add complain registration, add view complaint inforation, add status change for marches when user click on mat

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

@@ -0,0 +1,137 @@
+'use client'
+
+import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+import { useActionState, useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActions';
+import { toast } from 'sonner';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+interface complaintInfo {
+	id: number,
+	status: string,
+	complaint_text: string,
+	violation_id: number,
+	email: string,
+	created_at: string,
+	updated_at: string,
+	not_moderated: boolean
+}
+
+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 { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
+		queryKey: ['complainInfo', selectedViolation.id],
+		queryFn: () => fetchComplainInfo(selectedViolation.id),
+		select: (data) => {
+			if (data) {
+				return data
+			}
+		},
+		enabled: selectedViolation.status !== 'NEW' &&
+			selectedViolation.status !== 'CREATED' &&
+			selectedViolation.status !== 'SHOWED',
+	});
+
+	useEffect(() => {
+		if (state?.success) {
+			toast.success('Жалоба зарегистрирована');
+			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+			queryClient.invalidateQueries({ queryKey: ['complainInfo', selectedViolation.id] });
+		} else if (state && !state.success) {
+			toast.warning('Жалоба не зарегистрирована');
+		}
+	}, [state, queryClient, selectedViolation.id]);
+
+	function toggleForm() {
+		setShowCreateCase(!showCreateCase);
+	}
+
+	if (selectedViolation.status === 'NEW' || selectedViolation.status === 'CREATED' || selectedViolation.status === 'SHOWED') {
+		return (
+			<div className="violation-info-case">
+				{!showCreateCase ? (
+					<button
+						type="button"
+						className="btn-action btn-case"
+						onClick={toggleForm}
+					>
+						Подача жалобы
+					</button>
+				) : (
+					<div>
+						<button
+							type="button"
+							className="btn-action btn-case"
+							onClick={toggleForm}
+						>
+							{t('cancel')}
+						</button>
+
+						<div className="note-form">
+							<form action={formAction}>
+								<input type="hidden" name="violationId" value={selectedViolation.id} />
+								<textarea
+									name="note"
+									className="note-textarea"
+									placeholder="Текст нарушения...">
+								</textarea>
+								<button
+									type="submit"
+									className="btn-small btn-primary-small"
+									disabled={isPending}
+								>
+									Отправить нарушение
+								</button>
+							</form>
+						</div>
+					</div>
+				)}
+			</div>
+		);
+	} else {
+		if (isLoadingComplain) {
+			return (
+				<div className="violation-info-case">
+					<div>Загрузка...</div>
+				</div>
+			);
+		}
+
+		return (
+			<div className="violation-info-case">
+				{complainInfo?.body.content ? (
+
+					<div>
+						{complainInfo.body.content.map((item: complaintInfo) => {
+							return (
+								<div key={item.id}>
+									<h3
+										className="mb-3"
+									>
+										Информация о жалобе
+									</h3>
+									<div className="complaint-details">
+										<p><strong>ID:</strong> {item.id}</p>
+										<p><strong>Статус:</strong> {item.status}</p>
+										<p><strong>Текст жалобы:</strong> {item.complaint_text}</p>
+										<p><strong>ID нарушения:</strong> {item.violation_id}</p>
+										<p><strong>Email:</strong> {item.email}</p>
+										<p><strong>Дата создания:</strong> {item.created_at}</p>
+										<p><strong>Дата обновления:</strong> {item.updated_at}</p>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				) : (
+					<div>Нет информации о жалобе</div>
+				)}
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,14 @@
+import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+
+export default function CaseViolation({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
+
+	return (
+		<div
+			className="violation-info-case"
+		>
+			<button type="button" className="btn-action btn-case">
+				Создание дела
+			</button>
+		</div>
+	)
+}

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

@@ -0,0 +1,98 @@
+'use client'
+
+import Link from 'next/link';
+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 { updateMatchStatus } from '@/app/actions/violationActions';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+
+export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
+	const t = useTranslations('Global');
+	const queryClient = useQueryClient();
+
+	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'] });
+				}
+			}
+		};
+
+		updateStatus();
+	}, [selectedViolation, queryClient]);
+
+	if (!selectedViolation) {
+		return (
+			<div>
+				not found
+			</div>
+		)
+	}
+
+	return (
+		<div
+			className="violation-info"
+		>
+			<div
+				className="violation-info-content"
+			>
+				<h3
+					className="violation-info-title"
+				>
+					{selectedViolation?.page_title}
+				</h3>
+
+				<div
+					className="violation-info-header"
+				>
+					<div
+						className="violation-info-image"
+					>
+						<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
+					</div>
+
+					<div>
+						<div
+							className="violation-info-source"
+						>
+							<span>
+								{t('source')}:
+							</span>
+							<Link
+								href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
+								className="source"
+								target="_blank"
+								scroll={false}
+							>
+								{selectedViolation?.page_url}
+							</Link>
+						</div>
+						<div
+							className="violation-info-source"
+						>
+							<span>
+								{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
+							</span>
+						</div>
+						<div>
+							{selectedViolation?.status}
+						</div>
+					</div>
+				</div>
+
+				<div
+					className="violation-info-case-grid"
+				>
+					<CaseComplaint selectedViolation={selectedViolation} />
+					<CaseViolation selectedViolation={selectedViolation} />
+				</div>
+			</div>
+		</div>
+	)
+} 

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

@@ -4,37 +4,15 @@
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { formatDate } from '@/app/lib/formatDate';
-import ViolationPageNote from '@/app/ui/file-page/file-page-note';
-
-interface ViolationFileDetail {
-	id: number;
-	url: string;
-	page_url: string;
-	page_title: string;
-	host: string;
-	status: string;
-	created_date: string;
-	file_id: string;
-}
-
-interface ViolationFile {
-	violations: ViolationFileDetail[],
-	total_elements: number,
-	total_pages: number,
-	current_page: number,
-	page_size: number,
-	has_next: boolean,
-	has_previous: boolean
-}
+import { useState } from 'react';
+import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
+import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
+import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 
 export default function FilePageViolationsList({
-	fileViolations,
 	currentPage,
 	fileId
 }: {
-	fileViolations: ViolationFile,
 	currentPage: number,
 	fileId: string
 }) {
@@ -42,6 +20,7 @@ export default function FilePageViolationsList({
 	const router = useRouter();
 	const pathname = usePathname();
 	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
+	const { data: fileViolations } = useFileViolations(fileId, currentPage);
 
 	if (!fileViolations?.violations) {
 		return null;
@@ -147,80 +126,8 @@ export default function FilePageViolationsList({
 					})}
 				</div>
 
-				<div
-					className="violation-info"
-				>
-					<div
-						className="violation-info-grid"
-					>
-						<div
-							className="violation-info-content"
-						>
-							<h3
-								className="violation-info-title"
-							>
-								{selectedViolation?.page_title}
-							</h3>
-							<div
-								className="violation-info-image"
-							>
-								<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
-							</div>
-							<div
-								className="violation-info-source"
-							>
+				<FilePageViolationInfo selectedViolation={selectedViolation} />
 
-								<span>
-									{t('source')}:
-								</span>
-								<Link
-									href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
-									className="source"
-									target="_blank"
-									scroll={false}
-								>
-									{selectedViolation?.page_url}
-								</Link>
-							</div>
-							<div
-								className="violation-info-source"
-							>
-								<span>
-									{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
-								</span>
-							</div>
-							<div>
-								{selectedViolation?.status}
-							</div>
-
-							<div
-								className="mt-auto"
-							>
-								Тут думаю нужно будет отображать инфу о работе с нарушением и её статус
-							</div>
-
-						</div>
-
-						<div
-							className="violation-info-actions"
-						>
-							<div className="action-buttons">
-								<button type="button" className="btn-action btn-warning">
-									Взять в работу
-								</button>
-
-								<button type="button" className="btn-action btn-success">
-									Отметить решенным
-								</button>
-
-								<button type="button" className="btn-action btn-secondary">
-									Ложное срабатывание
-								</button>
-							</div>
-						</div>
-					</div>
-					{/* <ViolationPageNote /> */}
-				</div>
 			</div>
 			{fileViolations.total_pages > 1 && (
 				<div className="pagination">