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],
-		queryFn: () => fetchComplainInfo(localViolation.id),
+		queryKey: ['complainInfo', selectedViolation.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"
 							>