add resolved button for matched file

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

@@ -8,24 +8,36 @@ import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
 import CaseViolation from '@/app/ui/file-page/violation-table/case-violation';
 import { updateMatchStatus } from '@/app/actions/violationActions';
 import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
+import { MatchStatus } from '@/app/actions/violationActions';
+import { toast } from 'sonner';
 
 export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
 	const t = useTranslations('Global');
+	const tStatus = useTranslations('Match-status');
 	const queryClient = useQueryClient();
 
+	const updateStatusHandler = useCallback(async (id: number, status: MatchStatus) => {
+		const response = await updateMatchStatus(id, status);
+		if (response) {
+			if (status === 'AUTHORIZED_USE') {
+				toast.success('Статус обновлен');
+			}
+			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+			return true;
+		}
+		return false;
+	}, [queryClient]);
+
 	useEffect(() => {
 		const updateStatus = async () => {
 			if (selectedViolation && (selectedViolation.status === 'CREATED' || selectedViolation.status === 'NEW')) {
-				const response = await updateMatchStatus(selectedViolation.id, 'SHOWED');
-				if (response) {
-					queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
-				}
+				await updateStatusHandler(selectedViolation.id, 'SHOWED');
 			}
 		};
 
 		updateStatus();
-	}, [selectedViolation, queryClient]);
+	}, [selectedViolation, updateStatusHandler]);
 
 	if (!selectedViolation) {
 		return (
@@ -57,7 +69,9 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 						<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
 					</div>
 
-					<div>
+					<div
+						className="violation-info-right-side"
+					>
 						<div
 							className="violation-info-source"
 						>
@@ -74,14 +88,38 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 							</Link>
 						</div>
 						<div
-							className="violation-info-source"
+							className="violation-info-date-status"
 						>
 							<span>
 								{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
 							</span>
+							{/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
+							{selectedViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
+								<>
+									<span className="source-status legal_in_work">
+										{tStatus('LEGAL_IN_WORK')}
+									</span>
+									<span className="source-status complaint_in_work">
+										{tStatus('COMPLAINT_IN_WORK')}
+									</span>
+								</>
+							) : (
+								<span className={`source-status ${selectedViolation?.status.toLowerCase()}`}>
+									{tStatus(selectedViolation?.status)}
+								</span>
+							)}
 						</div>
-						<div>
-							{selectedViolation?.status}
+						<div
+							className="violation-info-action"
+						>
+							<button
+								className="btn-action btn-success"
+								onClick={() => {
+									updateStatusHandler(selectedViolation?.id, 'AUTHORIZED_USE');
+								}}
+							>
+								{t('mark-as-solved')}
+							</button>
 						</div>
 					</div>
 				</div>

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

@@ -108,10 +108,10 @@ export default function FilePageViolationsList({
 									{item.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
 										<>
 											<span className="source-status legal_in_work">
-												{t('legal_in_work')}
+												{tStatus('LEGAL_IN_WORK')}
 											</span>
 											<span className="source-status complaint_in_work">
-												{t('complaint_in_work')}
+												{tStatus('COMPLAINT_IN_WORK')}
 											</span>
 										</>
 									) : (