fix tabs switch bag for matches table

src/app/ui/file-page/violation-table/case-complaint.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
-import { useActionState, useEffect, useState } from 'react';
+import {useActionState, useEffect, useState, SetStateAction} from 'react';
 import { useTranslations } from 'next-intl';
 import { createComplaint, fetchComplainInfo, MatchStatus } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
@@ -23,28 +23,29 @@ interface complaintInfo {
 const ENABLED_STATUSES = ['COMPLAINT_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
 type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
 
-export default function CaseComplaint({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
+export default function CaseComplaint({ selectedViolation, updateStatusHandler, setLocalViolation }:
+	{
+		selectedViolation: ViolationFileDetail,
+		updateStatusHandler: UpdateStatusHandler,
+		setLocalViolation: React.Dispatch<SetStateAction<ViolationFileDetail>>
+	}
+) {
 	const t = useTranslations('Global');
 
-	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
 	const [noteText, setNoteText] = useState('');
 	const [state, formAction, isPending] = useActionState(createComplaint, undefined);
 	const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
 	const [templateName, setTemplateName] = useState('');
 
-	useEffect(() => {
-		setLocalViolation(selectedViolation);
-	}, [selectedViolation]);
-
 	const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
-		queryKey: ['complainInfo', localViolation.id],
+		queryKey: ['complainInfo', selectedViolation.id],
-		queryFn: () => fetchComplainInfo(localViolation.id),
+		queryFn: () => fetchComplainInfo(selectedViolation.id),
 		select: (data) => {
 			if (data) {
 				return data
 			}
 		},
-		enabled: ENABLED_STATUSES.includes(localViolation.status),
+		enabled: ENABLED_STATUSES.includes(selectedViolation.status),
 	});
 
 	useEffect(() => {
@@ -58,7 +59,7 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 			setLocalViolation(prev => ({
 				...prev,
 				status: newStatus
-			}));
+			}))
 
 			updateStatusHandler(selectedViolation.id, newStatus);
 		} else if (state && !state.success) {
@@ -106,13 +107,13 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 		setTemplateName('');
 	}
 
-	if (!ENABLED_STATUSES.includes(localViolation.status)) {
+	if (!ENABLED_STATUSES.includes(selectedViolation.status)) {
 		return (
 			<>
 				<div className="violation-info-case">
 					<div className="note-form">
 						<form action={formAction}>
-							<input type="hidden" name="violationId" value={localViolation.id} />
+							<input type="hidden" name="violationId" value={selectedViolation.id} />
 							<section
 								className="note-form-section"
 							>

src/app/ui/file-page/violation-table/case-legal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
-import { useEffect, useState, useActionState } from 'react';
+import { useEffect, useActionState, SetStateAction } from 'react';
 import { fetchCaseInfo, createCase, MatchStatus } from '@/app/actions/violationActions';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
@@ -29,20 +29,25 @@ interface CaseInfo {
 const ENABLED_STATUSES = ['LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
 type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
 
-export default function CaseViolation({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
+export default function CaseViolation({ selectedViolation, updateStatusHandler, setLocalViolation }:
+	{
+		selectedViolation: ViolationFileDetail,
+		updateStatusHandler: UpdateStatusHandler,
+		setLocalViolation: React.Dispatch<SetStateAction<ViolationFileDetail>>
+	}
+) {
 	const t = useTranslations('Global');
-	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
 	const [state, formAction, isPending] = useActionState(createCase, undefined);
 
 	const { data: caseInfo, isLoading: isLoadingCase } = useQuery({
-		queryKey: ['caseInfo', localViolation.id],
+		queryKey: ['caseInfo', selectedViolation.id],
-		queryFn: () => fetchCaseInfo(localViolation.id),
+		queryFn: () => fetchCaseInfo(selectedViolation.id),
 		select: (data) => {
 			if (data) {
 				return data
 			}
 		},
-		enabled: ENABLED_STATUSES.includes(localViolation.status)
+		enabled: ENABLED_STATUSES.includes(selectedViolation.status)
 	});
 
 	useEffect(() => {
@@ -56,7 +61,7 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 			setLocalViolation(prev => ({
 				...prev,
 				status: newStatus
-			}));
+			}))
 
 			updateStatusHandler(selectedViolation.id, newStatus);
 		} else if (state && !state.success) {
@@ -69,12 +74,12 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 		}
 	}, [state, updateStatusHandler, selectedViolation.id]);
 
-	if (!ENABLED_STATUSES.includes(localViolation.status)) {
+	if (!ENABLED_STATUSES.includes(selectedViolation.status)) {
 		return (
 			<div className="violation-info-case">
 				<div className="note-form">
 					<form action={formAction}>
-						<input type="hidden" name="violationId" value={localViolation.id} />
+						<input type="hidden" name="violationId" value={selectedViolation.id} />
 						<div
 							className="note-form-flex"
 						>

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

@@ -113,6 +113,7 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 						key={"complaint_" + localViolation.id}
 						selectedViolation={localViolation}
 						updateStatusHandler={updateStatusHandler}
+						setLocalViolation={setLocalViolation}
 					/>
 				)}
 				{activeTab === 'claim' && (
@@ -120,6 +121,7 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta
 						key={"legal_" + localViolation.id}
 						selectedViolation={localViolation}
 						updateStatusHandler={updateStatusHandler}
+						setLocalViolation={setLocalViolation}
 					/>
 				)}
 			</div>