update files date between modules

src/app/[locale]/pages/dashboard/page.tsx

@@ -22,7 +22,7 @@ export default function Page() {
 					<ProtectionOverview />
 					<StatsGrid />
 				</div>
-				<FilesTable />
+				<FilesTable fileType={'all'}/>
 			</Suspense>
 		</div>
 	);

src/app/[locale]/pages/marking-audio/page.tsx

@@ -57,7 +57,7 @@ export default async function Page() {
 				</div>
 			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
-			<FilesTable />
+			<FilesTable fileType={FILE_TYPE} />
 		</div>
 	)
 }

src/app/[locale]/pages/marking-photo/page.tsx

@@ -57,7 +57,7 @@ export default async function Page() {
 				</div>
 			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
-			<FilesTable />
+			<FilesTable fileType={FILE_TYPE} />
 		</div>
 	)
 }

src/app/[locale]/pages/marking-video/page.tsx

@@ -57,7 +57,7 @@ export default async function Page() {
 				</div>
 			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
-			<FilesTable />
+			<FilesTable fileType={FILE_TYPE} />
 		</div>
 	)
 }

src/app/components/tanstakTable.tsx

@@ -82,7 +82,7 @@ const formatDateTime = (timestamp: number) => {
 	return `${hours}:${minutes}`;
 };
 
-export default function TanstakFilesTable() {
+export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 	const {
 		data: tableData,
 		isLoading,
@@ -120,7 +120,7 @@ export default function TanstakFilesTable() {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 	const [dateFilter, setDateFilter] = useState<string>('all');
-	const [typeFilter, setTypeFilter] = useState<string>('all');
+	const [typeFilter, setTypeFilter] = useState<string>(fileType);
 	const [pagination, setPagination] = useState({
 		pageIndex: 0,
 		pageSize: 10,
@@ -436,6 +436,11 @@ export default function TanstakFilesTable() {
 
 		onSuccess: (response, fileId) => {
 			if (response === fileId) {
+				queryClient.invalidateQueries({
+					queryKey: ['userFilesData'],
+					refetchType: 'active'
+				});
+
 				setOpenWindow(false);
 				setOpenWindowChildren(null);
 				toast.success(t('file-has-been-deleted'));
@@ -580,40 +585,42 @@ export default function TanstakFilesTable() {
 						</DropDownList>
 					</div>
 
-					<div className="flex flex-col w-50">
+					{fileType === "all" && (
-						<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
+						<div className="flex flex-col w-50">
-						<DropDownList
+							<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
-							value={typeFilter}
+							<DropDownList
-							translatedValue={
+								value={typeFilter}
-								(() => {
+								translatedValue={
-									switch (typeFilter) {
+									(() => {
-										case 'image':
+										switch (typeFilter) {
-											return t('images')
+											case 'image':
-										case 'video':
+												return t('images')
-											return t('videos')
+											case 'video':
-										case 'audio':
+												return t('videos')
-											return t('audios')
+											case 'audio':
-										default:
+												return t('audios')
-											return t('all-types')
+											default:
-									}
+												return t('all-types')
-								})()
+										}
-							}
+									})()
-							callBack={setTypeFilter}
+								}
-						>
+								callBack={setTypeFilter}
-							<li value="all">
+							>
-								{t('all-types')}
+								<li value="all">
-							</li>
+									{t('all-types')}
-							<li value="image">
+								</li>
-								{t('images')}
+								<li value="image">
-							</li>
+									{t('images')}
-							<li value="video">
+								</li>
-								{t('videos')}
+								<li value="video">
-							</li>
+									{t('videos')}
-							<li value="audio">
+								</li>
-								{t('audios')}
+								<li value="audio">
-							</li>
+									{t('audios')}
-						</DropDownList>
+								</li>
-					</div>
+							</DropDownList>
+						</div>
+					)}
 				</div>
 
 				<div className="flex flex-col w-full md:w-auto">

src/app/lib/prefetch-queries.ts

@@ -10,7 +10,10 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) {
 		}),
 		queryClient.prefetchQuery({
 			queryKey: ['userFilesData'],
-			queryFn: () => getUserFilesData(),
+			queryFn: () => {
+				console.log('make prefetch userFilesData');
+				return getUserFilesData();
+			},
 			staleTime: 30 * 1000
 		}),
 	]);

src/app/styles/pages-styles.scss

@@ -95,6 +95,15 @@
 			}
 		}
 
+		&.total-files.add-content {
+			display: flex;
+			justify-content: center;
+
+			.protection-stat-value {
+				margin-bottom: 0;
+			}
+		}
+
 		&-row {
 			display: flex;
 			align-items: center;
@@ -110,6 +119,13 @@
 
 			&.btn {
 				user-select: none;
+				transition: all 0.3s ease-in;
+				padding: 5px;
+				margin-top: 10px;
+
+				&:hover {
+					background: v.$shadow-1;
+				}
 			}
 		}
 

src/app/ui/dashboard/files-table.tsx

@@ -1,8 +1,13 @@
 import TanstakFilesTable from '@/app/components/tanstakTable';
-export default function FilesTable() {
+
+type FilesTable = {
+	fileType: string
+}
+
+export default function FilesTable({ fileType }: FilesTable) {
 	return (
 		<div className="block-wrapper">
-			<TanstakFilesTable/>
+			<TanstakFilesTable fileType={fileType} />
 		</div>
 	)
 }

src/app/ui/dashboard/protection-overview.tsx

@@ -5,6 +5,8 @@ import { PieChartComponent } from '@/app/components/PieChartComponent';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData } from '@/app/actions/fileEntity';
 
 
 const data = [
@@ -13,8 +15,12 @@ const data = [
 	{ name: 'audios', value: 25, color: '#1971c2' },
 ];
 
-/* нужно что бы включать выключать кнопки добавления маркировок */
+
-const totalFiles = 1;
+type FilesInfo = {
+	totalSize: string;
+	totalCount: number;
+};
+
 
 export default function ProtectionOverview() {
 	const [isOpen, setIsOpen] = useState(false);
@@ -25,6 +31,32 @@ export default function ProtectionOverview() {
 		setOpenDropDownList(false)
 	});
 
+	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>
@@ -32,33 +64,24 @@ export default function ProtectionOverview() {
 			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
 
 
-				{totalFiles ? (
+				{filesInfo?.totalCount ? (
 					<>
 						<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">
-							<div className="protection-stat-row">
-								<div className="protection-stat-value">0</div>
-								<div className="protection-stat-label">{t('check')}</div>
-							</div>
-							<div className="protection-stat-row">
-								<div className="protection-stat-value">0</div>
-								<div className="protection-stat-label">{t('violations')}</div>
-							</div>
-						</div> */}
 						<div className="protection-stat total-checks">
 							<div className="protection-stat-value">0</div>
 							<div className="protection-stat-label">{t('check')}</div>
 							<div className="protection-stat-value">0</div>
 							<div className="protection-stat-label">{t('violations')}</div>
-							
+
 						</div>
 					</>
 				) : (
-					<div className="protection-stat total-files relative">
+					<div className="protection-stat total-files add-content relative">
 						<div className="protection-stat-label">
 							{t('there-are-no-files-yet')}
 						</div>
@@ -96,14 +119,14 @@ export default function ProtectionOverview() {
 					</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>
 					</div>
 				)}
 			</div>
-			{!!totalFiles && (
+			{!!filesInfo?.totalCount && (
 				<button
 					className="protection-overview-switch cursor-pointer"
 					onClick={() => {

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>