update your files block

src/app/ui/dashboard/new/dashboard-user-files.tsx

@@ -1,48 +1,153 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData } from '@/app/actions/fileEntity';
+import { useEffect, useState, useRef } from 'react';
+import { FileTypeIcon } from '@/app/components/FileTypeIcon';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { useTranslations } from 'next-intl';
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+import Link from 'next/link';
+
+type FileItem = {
+	id: string;
+	fileName: string;
+	fileType: string;
+	size?: number | undefined;
+	uploadDate?: number;
+	protectStatus: string;
+	supportId: number;
+};
+
+type ApiFile = {
+	id: string;
+	originalFileName: string;
+	mimeType: string;
+	fileSize: number;
+	updatedAt: string;
+	protectStatus: string;
+	supportId: number;
+};
+
+type ApiResponse = {
+	files?: ApiFile[];
+};
+
 export default function DashboardUserFiles() {
+	const {
+		data: tableData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<ApiResponse, Error, FileItem[], ['userFilesData', number, number]>({
+		queryKey: ['userFilesData', 1, 5],
+		queryFn: () => getUserFilesData(1, 5),
+
+		select: (data: ApiResponse): FileItem[] => {
+			if (!data?.files) return [];
+
+			return data.files.map((item: ApiFile) => {
+				const [datePart, timePart] = item.updatedAt.split(' ');
+				const [day, month, year] = datePart.split('-').map(Number);
+				const [hours, minutes, seconds] = timePart.split(':').map(Number);
+				const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();
+				console.log(newDate);
+
+				return {
+					id: item.id,
+					fileName: item.originalFileName,
+					fileType: item.mimeType.toLocaleLowerCase(),
+					size: item.fileSize,
+					uploadDate: newDate,
+					protectStatus: item.protectStatus,
+					supportId: item.supportId,
+				};
+			});
+		},
+	});
+
+	const t = useTranslations('Global');
+	const [openDropDownList, setOpenDropDownList] = useState(false);
+	const dropDownList = useRef(null);
+	useClickOutside(
+		dropDownList,
+		() => {
+			setOpenDropDownList(false)
+		},
+		openDropDownList
+	);
+
+	const formatDate = (timestamp: number) => {
+		const date = new Date(timestamp);
+		const day = date.getDate().toString().padStart(2, '0');
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		const year = date.getFullYear();
+
+		return `${day}.${month}.${year}`;
+	};
+
+	useEffect(() => {
+		console.log(tableData);
+	}, [tableData]);
+
+
+
 	return (
 		<div className="content-section">
 			<div className="section-header">
 				<h3 className="section-title">Ваши файлы</h3>
-				<a href="pages/marking-photo.php" className="view-all-link">Загрузить файл →</a>
+				<div
+					className="section-add-file btn view-all-link"
+					onClick={() => {
+						setOpenDropDownList(!openDropDownList);
+					}}
+					ref={dropDownList}
+				>
+					{t('add')}
+					<div
+						className={`section-drop-down-list ${openDropDownList ? 'opened' : ''}`}
+					>
+						<div
+							className="flex flex-col text-center"
+						>
+							<Link href='/pages/marking-images'>
+								{t('photo-marking')}
+							</Link>
+							<Link href='/pages/marking-video'>
+								{t('video-marking')}
+							</Link>
+							<Link href='/pages/marking-audio'>
+								{t('audio-marking')}
+							</Link>
+						</div>
+					</div>
+				</div>
 			</div>
 
 			<div className="user-files-list">
-				<div className="file-item">
-					<div className="file-icon video">
-						🎬</div>
-					<div className="file-info">
-						<div className="file-name" title="Запись экрана 2026-01-09 в 15.45.28.mov">
-							Запись экрана 2026-01-09 в 15.45.28.mov</div>
-						<div className="file-meta">
-							11.3 МБ •
-							11.01.2026</div>
-					</div>
-					<div className="file-badge protected">✓ Защищено</div>
-				</div>
-				<div className="file-item">
-					<div className="file-icon video">
-						🎬</div>
-					<div className="file-info">
-						<div className="file-name" title="SOUNE_миграция.mov">
-							SOUNE_миграция.mov</div>
-						<div className="file-meta">
-							17.1 МБ •
-							11.01.2026</div>
-					</div>
-					<div className="file-badge protected">✓ Защищено</div>
-				</div>
-				<div className="file-item">
-					<div className="file-icon video">
-						🎬</div>
-					<div className="file-info">
-						<div className="file-name" title="SOUNE_миграция.mov">
-							SOUNE_миграция.mov</div>
-						<div className="file-meta">
-							17.1 МБ •
-							11.01.2026</div>
-					</div>
-					<div className="file-badge protected">✓ Защищено</div>
-				</div>
+				{tableData?.map((file) => {
+					return (
+						<div
+							key={file.id}
+							className="file-item"
+						>
+							<div className="file-icon">
+								<FileTypeIcon type={file.fileType} />
+							</div>
+							<div className="file-info">
+								<div className="file-name" title={file.fileName}>
+									{file.fileName}
+								</div>
+								<div className="file-meta">
+									{convertBytes(file.size ? file.size : 0)} • {formatDate(file.uploadDate ? file.uploadDate : 0)}
+								</div>
+							</div>
+							<div className="file-badge protected">
+								{t(file.protectStatus)}
+							</div>
+						</div>
+					)
+				})}
 			</div>
 		</div>
 	)