continue: work on match table

src/app/styles/pages-styles.scss

@@ -4718,14 +4718,14 @@
 			border-bottom: 1px solid rgb(226, 232, 240);
 		}
 
-		&-case-grid {
+		/* 		&-case-grid {
 			display: grid;
 			grid-template-rows: 1fr 1fr;
 			gap: 5px;
 			flex: 1;
 			min-height: 0;
 			overflow: auto;
-		}
+		} */
 
 		&-case {
 			padding: 10px;
@@ -4736,6 +4736,59 @@
 				padding-bottom: 10px;
 			}
 		}
+
+		&-choice {
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+
+			h4 {
+				text-align: center;
+			}
+
+			.violation-info-choice-buttons {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+		}
+
+		&-tabs-wrapper {
+			position: relative;
+
+			.violation-info-choice {
+				padding: 20px;
+				text-align: center;
+			}
+
+			.violation-info-choice-buttons {
+				display: flex;
+				gap: 16px;
+				justify-content: center;
+				margin-top: 16px;
+			}
+
+			.violation-info-choice-btn {
+				padding: 12px 24px;
+				border: 1px solid #ccc;
+				border-radius: 6px;
+				background: white;
+				cursor: pointer;
+			}
+
+			.violation-info-tab {
+				padding: 8px 16px;
+				border: none;
+				background: transparent;
+				cursor: pointer;
+			}
+
+			.violation-info-tab--active {
+				border-bottom: 2px solid blue;
+				color: blue;
+			}
+		}
 	}
 
 	.violation-page-note {
@@ -5238,7 +5291,7 @@
 			padding: 20px;
 
 			&:first-child {
-/* 				width: 60px;
+				/* 				width: 60px;
 				min-width: 60px;
 				max-width: 60px; */
 				display: flex;

src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
+import CaseLegal from '@/app/ui/file-page/violation-table/case-legal';
+import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+import { MatchStatus } from '@/app/actions/violationActions';
+import { useEffect, useState } from 'react';
+
+type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
+
+const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
+
+type TabType = 'complaint' | 'legal'
+
+export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
+	const [activeTab, setActiveTab] = useState<TabType>('complaint');
+	const [showTabs, setShowTabs] = useState(false);
+	const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);
+
+	useEffect(() => {
+		console.log(selectedViolation.status);
+	}, [selectedViolation]);
+
+	useEffect(() => {
+		setShowTabs(false);
+	}, [selectedViolation.id]);
+
+	if (!isInWork && !showTabs) {
+		return (
+			<div className="violation-info-choice">
+				<h4>Вы можете</h4>
+				<div className="violation-info-choice-buttons">
+					<button
+						className="violation-info-choice-btn"
+						onClick={() => {
+							setShowTabs(true);
+							setActiveTab('complaint');
+						}}
+					>
+						Подать жалобу
+					</button>
+
+					<span>
+						или
+					</span>
+
+					<button
+						className="violation-info-choice-btn"
+						onClick={() => {
+							setShowTabs(true);
+							setActiveTab('legal');
+						}}
+					>
+						Подать притензию
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="violation-info-tabs-wrapper">
+			<div className="violation-info-tabs">
+				<button
+					className={`violation-info-tab ${activeTab === 'complaint' ? 'violation-info-tab--active' : ''}`}
+					onClick={() => setActiveTab('complaint')}
+				>
+					Жалоба
+				</button>
+				<button
+					className={`violation-info-tab ${activeTab === 'legal' ? 'violation-info-tab--active' : ''}`}
+					onClick={() => setActiveTab('legal')}
+				>
+					Претензия
+				</button>
+			</div>
+			<div className="violation-info-content">
+				{activeTab === 'complaint' && (
+					<CaseComplaint
+						key={"complaint_" + selectedViolation.id}
+						selectedViolation={selectedViolation}
+						updateStatusHandler={updateStatusHandler}
+					/>
+				)}
+				{activeTab === 'legal' && (
+					<CaseLegal
+						key={"legal_" + selectedViolation.id}
+						selectedViolation={selectedViolation}
+						updateStatusHandler={updateStatusHandler}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -5,7 +5,7 @@ import { formatDate } from '@/app/lib/formatDate';
 import { useTranslations } from 'next-intl';
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
-import CaseViolation from '@/app/ui/file-page/violation-table/case-violation';
+import CaseViolation from '@/app/ui/file-page/violation-table/case-legal';
 import { updateMatchStatus } from '@/app/actions/violationActions';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useState } from 'react';
@@ -13,6 +13,7 @@ import { MatchStatus } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
 import FilePageViolationEpmtyScreen from '@/app/ui/file-page/violation-table/file-page-violation-epmty-screen';
 import Image from 'next/image';
+import FilePageViolationInfoTabs from '@/app/ui/file-page/violation-table/file-page-violation-info-tabs';
 
 export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
 	const t = useTranslations('Global');
@@ -162,20 +163,10 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 					</div>
 				</div>
 
-				<div
+				<FilePageViolationInfoTabs
-					className="violation-info-case-grid"
+					selectedViolation={selectedViolation}
-				>
+					updateStatusHandler={updateStatusHandler}
-					<CaseComplaint
+				/>
-						key={"complaint_" + selectedViolation.id}
-						selectedViolation={selectedViolation}
-						updateStatusHandler={updateStatusHandler}
-					/>
-					<CaseViolation
-						key={"violation_" + selectedViolation.id}
-						selectedViolation={selectedViolation}
-						updateStatusHandler={updateStatusHandler}
-					/>
-				</div>
 			</div>
 		</div>
 	)

src/app/ui/file-page/violation-table/file-page-violations-list.tsx

@@ -37,6 +37,7 @@ export default function FilePageViolationsList({
 	const { data: fileViolations, error, isPending } = useFileViolations(fileId, currentPage, status);
 
 	useEffect(() => {
+		console.log(fileViolations);
 		if (fileViolations?.violations) {
 			setCachedPagination({
 				total_pages: fileViolations.total_pages,
@@ -80,6 +81,7 @@ export default function FilePageViolationsList({
 		const pages = [];
 		const maxVisible = 5;
 		const total = fileViolations.total_pages;
+		/* const totalPages = Math.ceil(fileViolations.total_elements / fileViolations.page_size); */
 
 		let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
 		let end = Math.min(total, start + maxVisible - 1);