update files date between modules

src/app/ui/marking-page/protection-summary.tsx

@@ -1,17 +1,52 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData } from '@/app/actions/fileEntity';
+
+type FilesInfo = {
+	totalSize: string;
+	totalCount: number;
+};
+
 
 export default function ProtectionSummary() {
 	const t = useTranslations('Global');
 
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<{
+		formattedTotalSize: string,
+		totalCount: number
+	}, Error, FilesInfo>({
+		queryKey: ['userFilesData'],
+		queryFn: getUserFilesData,
+		select: (data): FilesInfo => {
+			if (!data) {
+				return {
+					totalSize: '0',
+					totalCount: 0
+				}
+			}
+
+			return {
+				totalSize: data.formattedTotalSize,
+				totalCount: (data.totalCount)
+			}
+		},
+	});
+
+
 	return (
 		<div className="protection-overview grow">
 			<h3>{t('protecting-your-content')}</h3>
 			<p>{t('current-status-of')}</p>
 			<div className="protection-stats">
 				<div className="protection-stat total-files">
-					<div className="protection-stat-value">0</div>
+					<div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
 					<div className="protection-stat-label">{t('total-files')}</div>
 				</div>
 				<div className="protection-stat total-checks">
@@ -21,7 +56,7 @@ export default function ProtectionSummary() {
 					<div className="protection-stat-label">{t('violations')}</div>
 				</div>
 				<div className="protection-stat total-usage">
-					<div className="protection-stat-value">0 / 0</div>
+					<div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
 					<div className="protection-stat-label">
 						{t('disk-space-used')}
 					</div>