edit tanstak-table

src/app/components/tanstakTable.tsx

@@ -19,6 +19,7 @@ import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity';
 import ModalWindow from '@/app/components/modalWindow';
 import { toast } from 'sonner';
 import { pluralize } from '@/app/lib/pluralize';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 type FileType = 'image' | 'video' | 'audio';
 
@@ -27,8 +28,9 @@ type FileItem = {
 	fileName: string;
 	fileType: string;
 	violations?: number | undefined;
-	checks?: number | undefined;
+	size?: number | undefined;
-	lastCheck?: number;
+	uploadDate?: number;
+	status?: string;
 	_original?: ApiFile;
 };
 
@@ -37,8 +39,9 @@ type ApiFile = {
 	originalFileName: string;
 	mimeType: string;
 	violations: number;
-	checks: number;
+	fileSize: number;
 	updatedAt: string;
+	status: string;
 };
 
 type ApiResponse = {
@@ -95,16 +98,22 @@ const cutFileName = (fileName: string) => {
 	const extension = fileName.substring(lastDotIndex);
 
 	if (fileName.length <= MAX_FILE_NAME_LENGTH) {
-		return fileName;
+		return nameWithoutExtension;
 	}
 
 	const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
 
 	if (maxNameLength <= 0) {
-		return '...' + extension;
+		return '...' /* + extension */;
 	}
 
-	return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
+	return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
+}
+
+const cutFileExtension = (fileName: string) => {
+	const lastDotIndex = fileName.lastIndexOf('.');
+	const extension = fileName.substring(lastDotIndex + 1);
+	return extension;
 }
 
 export default function TanstakFilesTable({ fileType }: { fileType: string }) {
@@ -131,8 +140,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					fileName: item.originalFileName,
 					fileType: item.mimeType.toLocaleLowerCase(),
 					violations: item.violations,
-					checks: item.checks,
+					size: item.fileSize,
-					lastCheck: newDate,
+					uploadDate: newDate,
+					status: item.status,
 					_original: item
 				};
 			});
@@ -195,12 +205,133 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							<div className="font-medium w-full truncate" title={row.original.fileName}>
 								{/* {row.original.fileName} */}
 								{cutFileName(row.original.fileName)}
+								<br />
+								{cutFileExtension(row.original.fileName)} • <span className="text-[#10b981]">{row.original?.status}</span>
 							</div>
 						</div>
 					</div>
 				),
 				enableColumnFilter: false,
 			},
+			/* 			{
+							accessorKey: 'violations',
+							header: ({ column }) => (
+								<div className="column">
+									<span>
+										{t('violations')}
+									</span>
+									<button
+										onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+										className="sort-button"
+									>
+										{
+											column.getIsSorted() === 'asc' ?
+												<span>
+													<IconArrowUp />
+												</span>
+												: column.getIsSorted() === 'desc' ?
+													<span>
+														<IconArrowDown />
+													</span>
+													: <span>
+														<IconFilter />
+													</span>
+										}
+									</button>
+								</div>
+							),
+							cell: ({ row }) => {
+								let classCollor = () => {
+									let result = ''
+									if (row.original.violations !== undefined) {
+										result = row.original.violations > 0 ? 'text-red-600' : 'text-green-600'
+									}
+									return result;
+								}
+								return (
+									<div className={`text-center font-semibold ${classCollor()}`}>
+										{row.original.violations !== undefined ? row.original.violations : '-'}
+									</div>
+								)
+							},
+						}, */
+			{
+				accessorKey: 'size',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('size')}
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => (
+					<div className="text-center">
+						{row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
+					</div>
+				),
+			},
+			{
+				accessorKey: 'uploadDate',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('upload-date')}
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => {
+					return (
+						<div className="text-center">
+							{row.original.uploadDate ? (
+								<>
+									{formatDate(row.original.uploadDate)}
+									<br />
+									{formatDateTime(row.original.uploadDate)}
+								</>
+							) : (
+								<div>-</div>
+							)}
+						</div>
+					)
+				},
+				enableColumnFilter: false,
+			},
 			{
 				accessorKey: 'status',
 				header: ({ column }) => (
@@ -236,125 +367,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					)
 				},
 			},
-			{
-				accessorKey: 'violations',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							{t('violations')}
-						</span>
-						<button
-							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button"
-						>
-							{
-								column.getIsSorted() === 'asc' ?
-									<span>
-										<IconArrowUp />
-									</span>
-									: column.getIsSorted() === 'desc' ?
-										<span>
-											<IconArrowDown />
-										</span>
-										: <span>
-											<IconFilter />
-										</span>
-							}
-						</button>
-					</div>
-				),
-				cell: ({ row }) => {
-					let classCollor = () => {
-						let result = ''
-						if (row.original.violations !== undefined) {
-							result = row.original.violations > 0 ? 'text-red-600' : 'text-green-600'
-						}
-						return result;
-					}
-					return (
-						<div className={`text-center font-semibold ${classCollor()}`}>
-							{row.original.violations !== undefined ? row.original.violations : '-'}
-						</div>
-					)
-				},
-			},
-			{
-				accessorKey: 'checks',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							{t('checks')}
-						</span>
-						<button
-							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button"
-						>
-							{
-								column.getIsSorted() === 'asc' ?
-									<span>
-										<IconArrowUp />
-									</span>
-									: column.getIsSorted() === 'desc' ?
-										<span>
-											<IconArrowDown />
-										</span>
-										: <span>
-											<IconFilter />
-										</span>
-							}
-						</button>
-					</div>
-				),
-				cell: ({ row }) => (
-					<div className="text-center">
-						{row.original.checks !== undefined ? row.original.checks : '-'}
-					</div>
-				),
-			},
-			{
-				accessorKey: 'lastCheck',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							{t('last-check')}
-						</span>
-						<button
-							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button"
-						>
-							{
-								column.getIsSorted() === 'asc' ?
-									<span>
-										<IconArrowUp />
-									</span>
-									: column.getIsSorted() === 'desc' ?
-										<span>
-											<IconArrowDown />
-										</span>
-										: <span>
-											<IconFilter />
-										</span>
-							}
-						</button>
-					</div>
-				),
-				cell: ({ row }) => {
-					return (
-						<div className="text-center">
-							{row.original.lastCheck ? (
-								<>
-									{formatDate(row.original.lastCheck)}
-									<br />
-									{formatDateTime(row.original.lastCheck)}
-								</>
-							) : (
-								<div>-</div>
-							)}
-						</div>
-					)
-				},
-				enableColumnFilter: false,
-			},
 			{
 				id: 'actions',
 				header: () => {
@@ -535,8 +547,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				case 'today':
 					const todayStart = new Date().setHours(0, 0, 0, 0);
 					result = result.filter(item => {
-						if (item.lastCheck) {
+						if (item.uploadDate) {
-							return item.lastCheck >= todayStart
+							return item.uploadDate >= todayStart
 						} else {
 							return 0
 						}
@@ -545,24 +557,24 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				case 'week':
 					const weekAgo = now - sevenDays;
 					result = result.filter(item => {
-						if (item.lastCheck) {
+						if (item.uploadDate) {
-							return item.lastCheck >= weekAgo;
+							return item.uploadDate >= weekAgo;
 						}
 					});
 					break;
 				case 'month':
 					const monthAgo = now - thirtyDays;
 					result = result.filter(item => {
-						if (item.lastCheck) {
+						if (item.uploadDate) {
-							return item.lastCheck >= monthAgo;
+							return item.uploadDate >= monthAgo;
 						}
 					});
 					break;
 				case 'older':
 					const monthAgo2 = now - thirtyDays;
 					result = result.filter(item => {
-						if (item.lastCheck) {
+						if (item.uploadDate) {
-							return item.lastCheck < monthAgo2;
+							return item.uploadDate < monthAgo2;
 						}
 					});
 					break;

src/i18n/messages/en.json

@@ -173,7 +173,8 @@
 		"my-content-description": "Managing protected files and copyright control",
 		"monitoring-copyright-infringements": "Monitoring copyright infringements",
 		"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online",
-		"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded."
+		"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded.",
+		"upload-date": "Upload date"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -173,7 +173,8 @@
 		"my-content-description": "Управление защищенными файлами и контролем авторских прав",
 		"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
 		"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
-		"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение."
+		"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.",
+		"upload-date": "Дата загрузки"
 	},
 	"Login-register-form": {
 		"and": "и",