continue: add violation panel

src/app/ui/violations/file-page/violation-page-file-info.tsx

@@ -1,4 +1,14 @@
-export default function ViolationPageFileInfo() {
+'use client'
+
+import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { formatDate } from '@/app/lib/formatDate';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+
+export default function ViolationPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
+	const t = useTranslations('Global');
+
 	return (
 		<div
 			className="block-wrapper"
@@ -6,32 +16,46 @@ export default function ViolationPageFileInfo() {
 			<div className="content-card">
 				<div className="card-header">
 					<h3 className="card-title">
-						📄 Информация о файле
+						{t('file-information')}
 					</h3>
 				</div>
 
 				<div className="info-row">
-					<span className="info-label">Тип файла</span>
-					<span className="info-value">fileType</span>
-				</div>
-				<div className="info-row">
-					<span className="info-label">Размер</span>
-					<span className="info-value">0 КБ</span>
-				</div>
-				<div className="info-row">
-					<span className="info-label">Загружен</span>
-					<span className="info-value">0</span>
-				</div>
-				<div className="info-row">
-					<span className="info-label">Водяной знак</span>
+					<span className="info-label">
+						ID
+					</span>
 					<span className="info-value">
-						Применен
+						{fileInfo ? fileInfo.supportId : '#'}
 					</span>
 				</div>
 				<div className="info-row">
-					<span className="info-label">Уровень защиты</span>
+					<span className="info-label">
+						{t('file-type')}
+					</span>
 					<span className="info-value">
-						Максимальный
+						{fileInfo ? fileInfo.mimeType : '#'}
+					</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('size')}
+					</span>
+					<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('loaded')}
+					</span>
+					<span className="info-value">
+						{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
+					</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('monitoring')}
+					</span>
+					<span className="info-value">
+						{fileInfo ? fileInfo.monitoring : '#'}
 					</span>
 				</div>
 			</div>