update work with marched files

src/app/actions/violationActions.ts

@@ -261,8 +261,9 @@ export async function fetchViolationStatistic() {
 
 interface complainBody {
 	previousText: string,
-	errorMessage: string | null,
+	violationID: string | null,
-	success: boolean
+	success: boolean,
+	errorMessage?: string | null
 }
 
 export async function createComplaint(
@@ -297,7 +298,7 @@ export async function createComplaint(
 
 			if (parsed?.message_code === 0) {
 				return {
-					errorMessage: violationId,
+					violationID: violationId,
 					previousText: text,
 					success: true
 				};
@@ -307,11 +308,24 @@ export async function createComplaint(
 		} else {
 			throw (`${response.status}`);
 		}
-	} catch (error) {
+	} catch (error: unknown) {
+		if (error && typeof error === 'object' && 'message_code' in error) {
+			const err = error as { message_code: number };
+			if (err.message_code === 2) {
+				return {
+					violationID: violationId,
+					previousText: text,
+					success: false,
+					errorMessage: 'the-complaint-has-not-been-registered'
+				}
+			}
+		}
+
 		return {
-			errorMessage: violationId,
+			violationID: violationId,
 			previousText: text,
-			success: false
+			success: false,
+			errorMessage: 'error-save'
 		}
 	}
 }
@@ -359,7 +373,6 @@ export type MatchStatus = 'NEW' | 'SHOWED' | 'LEGAL_IN_WORK' | 'COMPLAINT_IN_WOR
 
 export async function updateMatchStatus(id: number, status: MatchStatus) {
 	const token = await getSessionData('token');
-	console.log('updateMatchStatus');
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {

src/app/styles/pages-styles.scss

@@ -4526,6 +4526,10 @@
 		transition: all 0.3s ease;
 		font-size: 14px;
 		max-width: 300px;
+		
+		&:disabled {
+			opacity: 0.5;
+		}
 	}
 
 	.btn-case {

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

@@ -19,39 +19,57 @@ interface complaintInfo {
 }
 
 export default function CaseComplaint({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
-	const [showCreateCase, setShowCreateCase] = useState(false);
 	const t = useTranslations('Global');
-	const [state, formAction, isPending] = useActionState(createComplaint, undefined);
 	const queryClient = useQueryClient();
 
+	const [showCreateCase, setShowCreateCase] = useState(false);
+	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
+	const [state, formAction, isPending] = useActionState(createComplaint, undefined);
+
+	useEffect(() => {
+		setLocalViolation(selectedViolation);
+	}, [selectedViolation]);
+
 	const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
-		queryKey: ['complainInfo', selectedViolation.id],
+		queryKey: ['complainInfo', localViolation.id],
-		queryFn: () => fetchComplainInfo(selectedViolation.id),
+		queryFn: () => fetchComplainInfo(localViolation.id),
 		select: (data) => {
 			if (data) {
 				return data
 			}
 		},
-		enabled: selectedViolation.status !== 'NEW' &&
+		enabled: localViolation.status !== 'NEW' &&
-			selectedViolation.status !== 'CREATED' &&
+			localViolation.status !== 'CREATED' &&
-			selectedViolation.status !== 'SHOWED',
+			localViolation.status !== 'SHOWED',
 	});
 
 	useEffect(() => {
 		if (state?.success) {
-			toast.success('Жалоба зарегистрирована');
+			toast.success(t('the-complaint-has-been-registered'));
+
+			setLocalViolation(prev => ({
+				...prev,
+				status: 'COMPLAINT_IN_WORK'
+			}));
+
 			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
-			queryClient.invalidateQueries({ queryKey: ['complainInfo', selectedViolation.id] });
+			queryClient.invalidateQueries({ queryKey: ['complainInfo', localViolation.id] });
+
+			setShowCreateCase(false);
 		} else if (state && !state.success) {
-			toast.warning('Жалоба не зарегистрирована');
+			if (state.errorMessage) {
+				toast.warning(t(state.errorMessage));
+			} else {
+				toast.warning(t('the-complaint-has-not-been-registered'));
+			}
 		}
-	}, [state, queryClient, selectedViolation.id]);
+	}, [state, queryClient, localViolation.id]);
 
 	function toggleForm() {
 		setShowCreateCase(!showCreateCase);
 	}
 
-	if (selectedViolation.status === 'NEW' || selectedViolation.status === 'CREATED' || selectedViolation.status === 'SHOWED') {
+	if (localViolation.status === 'NEW' || localViolation.status === 'CREATED' || localViolation.status === 'SHOWED') {
 		return (
 			<div className="violation-info-case">
 				{!showCreateCase ? (
@@ -60,7 +78,7 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 						className="btn-action btn-case"
 						onClick={toggleForm}
 					>
-						Подача жалобы
+						{t('filing-complaint')}
 					</button>
 				) : (
 					<div>
@@ -74,18 +92,18 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 
 						<div className="note-form">
 							<form action={formAction}>
-								<input type="hidden" name="violationId" value={selectedViolation.id} />
+								<input type="hidden" name="violationId" value={localViolation.id} />
 								<textarea
 									name="note"
 									className="note-textarea"
-									placeholder="Текст нарушения...">
+									placeholder={`${t('text-of-the-complaint')}...`}>
 								</textarea>
 								<button
 									type="submit"
 									className="btn-small btn-primary-small"
 									disabled={isPending}
 								>
-									Отправить нарушение
+									{t('submit-violation')}
 								</button>
 							</form>
 						</div>
@@ -97,7 +115,7 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 		if (isLoadingComplain) {
 			return (
 				<div className="violation-info-case">
-					<div>Загрузка...</div>
+					<div>{t('loading')}...</div>
 				</div>
 			);
 		}
@@ -105,31 +123,30 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 		return (
 			<div className="violation-info-case">
 				{complainInfo?.body.content ? (
-
 					<div>
 						{complainInfo.body.content.map((item: complaintInfo) => {
 							return (
 								<div key={item.id}>
-									<h3
+									<h3 className="mb-3">
-										className="mb-3"
+										{t('complaint-Information')}
-									>
-										Информация о жалобе
 									</h3>
 									<div className="complaint-details">
 										<p><strong>ID:</strong> {item.id}</p>
-										<p><strong>Статус:</strong> {item.status}</p>
+										<p><strong>{t('status')}:</strong> {item.status}</p>
-										<p><strong>Текст жалобы:</strong> {item.complaint_text}</p>
+										<p><strong>{t('text-of-the-complaint')}:</strong> {item.complaint_text}</p>
-										<p><strong>ID нарушения:</strong> {item.violation_id}</p>
+										<p><strong>{t('violation-id')}:</strong> {item.violation_id}</p>
-										<p><strong>Email:</strong> {item.email}</p>
+										<p><strong>{t('email')}:</strong> {item.email}</p>
-										<p><strong>Дата создания:</strong> {item.created_at}</p>
+										<p><strong>{t('date-of-creation')}:</strong> {item.created_at}</p>
-										<p><strong>Дата обновления:</strong> {item.updated_at}</p>
+										<p><strong>{t('date-of-update')}:</strong> {item.updated_at}</p>
 									</div>
 								</div>
 							);
 						})}
 					</div>
 				) : (
-					<div>Нет информации о жалобе</div>
+					<div>
+						{t('no-information-about-the-complaint')}
+					</div>
 				)}
 			</div>
 		);

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

@@ -8,7 +8,7 @@ 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 { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MatchStatus } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
 
@@ -16,18 +16,44 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 	const t = useTranslations('Global');
 	const tStatus = useTranslations('Match-status');
 	const queryClient = useQueryClient();
+	const [localViolation, setLocalViolation] = useState<ViolationFileDetail | null>(null);
+	const [isUpdating, setIsUpdating] = useState(false);
+
+	useEffect(() => {
+		setLocalViolation(selectedViolation);
+	}, [selectedViolation]);
+
 
 	const updateStatusHandler = useCallback(async (id: number, status: MatchStatus) => {
-		const response = await updateMatchStatus(id, status);
+		setIsUpdating(true);
-		if (response) {
+
-			if (status === 'AUTHORIZED_USE') {
+		// Оптимистичное обновление UI
-				toast.success('Статус обновлен');
+		setLocalViolation(prev => prev ? { ...prev, status } : null);
+
+		try {
+			const response = await updateMatchStatus(id, status);
+			if (response) {
+				if (status === 'AUTHORIZED_USE') {
+					toast.success('Статус обновлен');
+				}
+				// Инвалидируем кэш, чтобы данные синхронизировались с сервером
+				queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+				return true;
+			} else {
+				// Если ошибка - откатываем изменение
+				setLocalViolation(selectedViolation);
+				toast.error('Ошибка при обновлении статуса');
+				return false;
 			}
-			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+		} catch (error) {
-			return true;
+			// При ошибке откатываем
+			setLocalViolation(selectedViolation);
+			toast.error('Ошибка при обновлении статуса');
+			return false;
+		} finally {
+			setIsUpdating(false);
 		}
-		return false;
+	}, [queryClient, selectedViolation]);
-	}, [queryClient]);
 
 	useEffect(() => {
 		const updateStatus = async () => {
@@ -94,7 +120,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 								{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" ? (
+							{localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
 								<>
 									<span className="source-status legal_in_work">
 										{tStatus('LEGAL_IN_WORK')}
@@ -104,9 +130,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 									</span>
 								</>
 							) : (
-								<span className={`source-status ${selectedViolation?.status.toLowerCase()}`}>
+								localViolation?.status && (
-									{tStatus(selectedViolation?.status)}
+									<span className={`source-status ${localViolation?.status.toLowerCase()}`}>
-								</span>
+										{tStatus(localViolation?.status)}
+									</span>
+								)
 							)}
 						</div>
 						<div
@@ -115,8 +143,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 							<button
 								className="btn-action btn-success"
 								onClick={() => {
-									updateStatusHandler(selectedViolation?.id, 'AUTHORIZED_USE');
+									if (selectedViolation?.id) {
+										updateStatusHandler(selectedViolation.id, 'AUTHORIZED_USE');
+									}
 								}}
+								disabled={isUpdating}
 							>
 								{t('mark-as-solved')}
 							</button>
@@ -127,8 +158,8 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 				<div
 					className="violation-info-case-grid"
 				>
-					<CaseComplaint selectedViolation={selectedViolation} />
+					<CaseComplaint key={"complaint_" + selectedViolation.id} selectedViolation={selectedViolation} />
-					<CaseViolation selectedViolation={selectedViolation} />
+					<CaseViolation key={"violation_" + selectedViolation.id} selectedViolation={selectedViolation} />
 				</div>
 			</div>
 		</div>

src/i18n/messages/en.json

@@ -369,7 +369,18 @@
 		"search-info-description-text": "Our system analyzes the uploaded file and compares it with your protected files, using computer vision and digital fingerprinting algorithms.",
 		"documents-few": "Documents",
 		"change": "Change",
-		"mark-as-solved": "Mark as solved"
+		"mark-as-solved": "Mark as solved",
+		"loading": "Loading",
+		"filing-complaint": "Filing a complaint",
+		"submit-violation": "Submit a violation",
+		"complaint-Information": "Complaint Information",
+		"date-of-creation": "Date of creation",
+		"date-of-update": "Date of update",
+		"text-of-the-complaint": "Text of the complaint",
+		"violation-id": "Violation ID",
+		"no-information-about-the-complaint": "No information about the complaint",
+		"the-complaint-has-not-been-registered": "The complaint has not been registered",
+		"the-complaint-has-been-registered": "The complaint has been registered"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -369,7 +369,18 @@
 		"search-info-description-text": "Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами, используя алгоритмы компьютерного зрения и цифровых отпечатков.",
 		"documents-few": "Документов",
 		"change": "Изменить",
-		"mark-as-solved": "Отметить решенным"
+		"mark-as-solved": "Отметить решенным",
+		"loading": "Загрузка",
+		"filing-complaint": "Подача жалобы",
+		"submit-violation": "Отправить нарушение",
+		"complaint-Information": "Информация о жалобе",
+		"date-of-creation": "Дата создания",
+		"date-of-update": "Дата обновления",
+		"text-of-the-complaint": "Текст жалобы",
+		"violation-id": "ID нарушения",
+		"no-information-about-the-complaint": "Нет информации о жалобе",
+		"the-complaint-has-not-been-registered": "Жалоба не зарегистрирована",
+		"the-complaint-has-been-registered": "Жалоба зарегистрирована"
 	},
 	"Login-register-form": {
 		"and": "и",