update your files block

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

@@ -26,7 +26,7 @@ export default function Page() {
 			<div className="dashboard-main-grid">
 				<div className="left-column">
 					<DashboardUserFiles />
-					<DashboardPlatformsList />
+					{/* <DashboardPlatformsList /> */}
 				</div>
 				<div className="right-column">
 					<ViolationsCarousel />
@@ -34,8 +34,13 @@ export default function Page() {
 			</div>
 			<DashboardFilesInfo />
 			<div className="dashboard-main-grid">
+
+				{/* <DahboardGeographySection /> */}
+			</div>
+			<div
+				className="mb-4"
+			>
 				<DahboardLimitsSection />
-				<DahboardGeographySection />
 			</div>
 			<DashboardLastCheck />
 		</Suspense>

src/app/components/FileTypeIcon.tsx

@@ -0,0 +1,22 @@
+import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons';
+
+export const FileTypeIcon = ({ type }: { type: string }) => {
+	switch (type) {
+		case 'image':
+			return <span className="color-image">
+				<IconImageFile />
+			</span>;
+		case 'video':
+			return <span className="color-video">
+				<IconVideoFile />
+			</span>;
+		case 'audio':
+			return <span className="color-audio">
+				<IconAudioFile />
+			</span>;
+		default:
+			return <span className="color-document">
+				<IconDocument />
+			</span>;
+	}
+};

src/app/components/tanstakTable.tsx

@@ -11,7 +11,7 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
+import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -21,6 +21,7 @@ import { toast } from 'sonner';
 import { pluralize } from '@/app/lib/pluralize';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { FileInfoModalWindow } from '@/app/ui/modal-windows/file-info-modal-window';
+import { FileTypeIcon } from '@/app/components/FileTypeIcon';
 
 type FileType = 'image' | 'video' | 'audio';
 
@@ -53,26 +54,6 @@ type ApiResponse = {
 	files?: ApiFile[];
 };
 
-// Иконки для типов файлов
-const FileTypeIcon = ({ type }: { type: string }) => {
-	switch (type) {
-		case 'image':
-			return <span className="color-image">
-				<IconImageFile />
-			</span>;
-		case 'video':
-			return <span className="color-video">
-				<IconVideoFile />
-			</span>;
-		case 'audio':
-			return <span className="color-audio">
-				<IconAudioFile />
-			</span>;
-		default:
-			return <span>📄</span>;
-	}
-};
-
 // Форматирование даты из timestamp
 const formatDate = (timestamp: number) => {
 	const date = new Date(timestamp);

src/app/styles/global-styles.scss

@@ -454,6 +454,13 @@
 		padding: 8px;
 		border-radius: 6px;
 	}
+
+	&-document {
+		color: v.$white;
+		background: v.$color-document;
+		padding: 8px;
+		border-radius: 6px;
+	}
 }
 
 .split-blocks {

src/app/styles/pages-styles.scss

@@ -3534,4 +3534,46 @@
 	&-content {
 		color: v.$text-s;
 	}
+}
+
+.section-add-file {
+	position: relative;
+
+	.section-drop-down-list {
+		position: absolute;
+		left: 80%;
+		top: 50%;
+		max-height: 0;
+		color: v.$text-p;
+		font-size: 16px;
+		border-radius: 20px;
+		padding: 0;
+		border: none;
+		width: fit-content;
+		z-index: 2;
+		font-weight: 500;
+
+		background: #ffffff00;
+		overflow: hidden;
+		transition: all 0.5s ease;
+		transform: translateY(-50%);
+
+		&.opened {
+			max-height: 500px;
+			padding: 15px 10px;
+			box-shadow: 0 4px 20px #00000014;
+			background: v.$white;
+		}
+
+		a {
+			white-space: nowrap;
+			color: v.$p-color;
+			opacity: 0.7;
+		}
+
+		a:hover {
+			transition: all 0.3s ease;
+			opacity: 1;
+		}
+	}
 }

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>
 	)