add more appeal information for modal window

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.120.0",
+	"version": "0.121.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/components/tanstak-table/TanstakTable.tsx

@@ -68,9 +68,22 @@ type ApiFile = {
 	thumbnailFileUrl: string;
 	permissions: {
 		DOWNLOAD: boolean;
-	}
+	},
+	appealInfos: AppealInfos[];
 };
 
+export type AppealInfos = {
+	additionalInfo: string | null;
+	adminComment: null;
+	appealId: string | null;
+	appealReason: string | null;
+	createdAt: string | null;
+	fileId: string | null;
+	fileName: string | null;
+	resolvedAt: string | null;
+	status: string;
+}
+
 type ApiResponse = {
 	files?: ApiFile[];
 	total_count: number;
@@ -709,11 +722,10 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 	};
 
 	const handleAppeal = async (file: FileItem) => {
-		console.log(file);
 
 		setOpenWindowChildren(() => {
 			return (
-				<FileAppealModalWindow fileId={file.id} setWindowClose={setOpenWindow} setWindowChildren={setOpenWindowChildren} />
+				<FileAppealModalWindow fileId={file.id} appeal={file._original?.appealInfos} setWindowClose={setOpenWindow} setWindowChildren={setOpenWindowChildren} />
 			)
 		})
 		setOpenWindow(true);

src/app/styles/pages-styles.scss

@@ -3805,6 +3805,10 @@
 			min-width: 400px;
 			width: 100%;
 
+			&.appeal-info {
+				margin-bottom: 20px;
+			}
+
 			@media (max-width: 470px) {
 				min-width: auto;
 			}
@@ -3936,6 +3940,40 @@
 				opacity: 0.5;
 				cursor: not-allowed;
 			}
+
+			.appeal-info {
+				margin-bottom: 20px;
+			}
+
+			.appeal-status {
+				display: inline-block;
+				background-color: #f9fafb;
+				padding: 4px 12px;
+				border-radius: 20px;
+				font-size: 12px;
+				font-weight: 500;
+			}
+
+			.appeal-reason-text,
+			.appeal-additional-text,
+			.admin-comment-text {
+				background-color: #f9fafb;
+				padding: 12px;
+				border-radius: 6px;
+				line-height: 1.5;
+				white-space: pre-wrap;
+				word-wrap: break-word;
+			}
+
+			.appeal-warning {
+				margin-top: 15px;
+				padding: 12px;
+				background-color: #fef3c7;
+				border-left: 4px solid #d97706;
+				border-radius: 6px;
+				color: #78350f;
+				font-size: 14px;
+			}
 		}
 	}
 }

src/app/ui/modal-windows/file-appeal-modal-window.tsx

@@ -1,15 +1,16 @@
 'use client';
 
-import { convertBytes } from '@/app/lib/convertBytes';
 import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 import { useTranslations } from 'next-intl';
 import { FileDetails } from '@/app/[locale]/pages/file/[id]/page';
 import { FileAnAppeal } from '@/app/actions/fileEntity';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { AppealInfos } from '@/app/components/tanstak-table/TanstakTable';
 
-export function FileAppealModalWindow({ fileId, setWindowClose, setWindowChildren }: {
+export function FileAppealModalWindow({ fileId, appeal, setWindowClose, setWindowChildren }: {
 	fileId: string,
+	appeal?: AppealInfos[],
 	setWindowClose: any,
 	setWindowChildren: any
 }) {
@@ -17,6 +18,8 @@ export function FileAppealModalWindow({ fileId, setWindowClose, setWindowChildre
 	const [appealReason, setAppealReason] = useState('');
 	const [additionalInfo, setAdditionalInfo] = useState('');
 	const [isSubmitting, setIsSubmitting] = useState(false);
+	const existingAppeal = appeal && appeal.length > 0 ? appeal[0] : null;
+	const hasActiveAppeal = existingAppeal && existingAppeal.status === 'pending';
 
 	const handleSubmitAppeal = async () => {
 		if (!appealReason.trim()) {
@@ -49,7 +52,79 @@ export function FileAppealModalWindow({ fileId, setWindowClose, setWindowChildre
 	return (
 		<div className="modal-window-view-file">
 			<div className="modal-window-view-file-content">
-				{/* Форма подачи апелляции */}
+				{existingAppeal && (
+					<div className="file-info-card appeal-info">
+						<div className="info-header">
+							<h4>{t('appeal-information')}</h4>
+						</div>
+
+						<div className="info-item">
+							<div className="info-label">{t('appeal-status')}</div>
+							<div className="info-value">
+								<span className="appeal-status">
+									{existingAppeal.status}
+								</span>
+							</div>
+						</div>
+
+						<div className="info-item">
+							<div className="info-label">{t('appeal-reason')}</div>
+							<div className="info-value">
+								<div className="appeal-reason-text">
+									{existingAppeal.appealReason || t('not-provided')}
+								</div>
+							</div>
+						</div>
+
+						{existingAppeal.additionalInfo && (
+							<div className="info-item">
+								<div className="info-label">{t('additional-info')}</div>
+								<div className="info-value">
+									<div className="appeal-additional-text">
+										{existingAppeal.additionalInfo}
+									</div>
+								</div>
+							</div>
+						)}
+
+						{existingAppeal.createdAt && (
+							<div className="info-item">
+								<div className="info-label">{t('appeal-created-at')}</div>
+								<div className="info-value">
+									{formatDate(existingAppeal.createdAt)} {formatDateTime(existingAppeal.createdAt)}
+								</div>
+							</div>
+						)}
+
+						{existingAppeal.adminComment && (
+							<div className="info-item">
+								<div className="info-label">{t('admin-comment')}</div>
+								<div className="info-value">
+									<div className="admin-comment-text">
+										{existingAppeal.adminComment}
+									</div>
+								</div>
+							</div>
+						)}
+
+						{existingAppeal.resolvedAt && (
+							<div className="info-item">
+								<div className="info-label">{t('resolved-at')}</div>
+								<div className="info-value">
+									{formatDateTime(existingAppeal.resolvedAt)}
+								</div>
+							</div>
+						)}
+
+						{hasActiveAppeal && (
+							<div className="appeal-warning">
+								{t('active-appeal-pending-message')}
+							</div>
+						)}
+					</div>
+				)}
+
+				{!hasActiveAppeal && (
 					<div className="file-info-card appeal-form">
 						<div className="info-header">
 							<h4>{t('file-an-appeal')}</h4>
@@ -83,6 +158,8 @@ export function FileAppealModalWindow({ fileId, setWindowClose, setWindowChildre
 									disabled={isSubmitting}
 								/>
 							</div>
+						</div>
+
 						<div className="appeal-actions">
 							<button
 								className="btn btn-cancel"
@@ -100,7 +177,7 @@ export function FileAppealModalWindow({ fileId, setWindowClose, setWindowChildre
 							</button>
 						</div>
 					</div>
-				</div>
+				)}
 			</div>
 		</div>
 	);

src/i18n/messages/en.json

@@ -493,7 +493,15 @@
 		"enter-additional-info": "Any additional information that may help...",
 		"submit-appeal": "Submit appeal",
 		"submitting": "Submitting...",
-		"active-appeal-already-exists-for-this-file": "Active appeal already exists for this file"
+		"active-appeal-already-exists-for-this-file": "Active appeal already exists for this file",
+		"appeal-information": "Appeal Information",
+		"appeal-status": "Status",
+		"appeal-created-at": "Created at",
+		"appeal-resolution": "Appeal Resolution",
+		"not-provided": "Not provided",
+		"admin-comment": "Admin Comment",
+		"resolved-at": "Resolved at",
+		"active-appeal-pending-message": "You have an active appeal pending review. Please wait for the admin to respond."
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -493,7 +493,15 @@
 		"enter-additional-info": "Любая дополнительная информация, которая может помочь...",
 		"submit-appeal": "Отправить апелляцию",
 		"submitting": "Отправка...",
-		"active-appeal-already-exists-for-this-file": "По данному делу уже подана активная апелляция"
+		"active-appeal-already-exists-for-this-file": "По данному делу уже подана активная апелляция",
+		"appeal-information": "Информация об апелляции",
+		"appeal-status": "Статус",
+		"appeal-created-at": "Дата создания",
+		"appeal-resolution": "Результат апелляции",
+		"not-provided": "Не указано",
+		"admin-comment": "Комментарий администратора",
+		"resolved-at": "Дата решения",
+		"active-appeal-pending-message": "У вас есть активная апелляция на рассмотрении. Пожалуйста, дождитесь ответа администратора."
 	},
 	"Login-register-form": {
 		"and": "и",