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

2026-03-26 17:30:30 +07:00
parent c9f230a76f
commit 7ae0fecb61
8 changed files with 518 additions and 166 deletions
@@ -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>
+		);
+	}
+}