update user files info

src/app/ui/dashboard/stats-grid.tsx

@@ -1,8 +1,24 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import {convertBytes} from '@/app/lib/convertBytes';
+
 export default function StatsGrid() {
 	const t = useTranslations("Global");
 
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
 	return (
 		<div className="block-wrapper stats-wrapper">
 			<h3>
@@ -30,10 +46,10 @@ export default function StatsGrid() {
 					{t('images')}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_quantity ? filesInfo.images_quantity : 0}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
 				</div>
 				<div className="stats-item second-row">
 					0
@@ -47,10 +63,10 @@ export default function StatsGrid() {
 					{t('videos')}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
 				</div>
 				<div className="stats-item">
 					0
@@ -64,10 +80,10 @@ export default function StatsGrid() {
 					{t('audios')}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
 				</div>
 				<div className="stats-item last-row">
 					0