continue: create case

src/app/ui/dashboard/new/dashboard-user-violations.tsx

@@ -59,7 +59,7 @@ export default function DashboardUserViolations() {
 					className="section-add-file btn view-all-link"
 				>
 					<Link href='/pages/violations'>
-						{t('add')}
+						{t('all')}
 					</Link>
 				</div>
 			</div>

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

@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
 import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { MatchStatus } from '@/app/actions/violationActions';
 
 interface complaintInfo {
 	id: number,
@@ -18,7 +19,10 @@ interface complaintInfo {
 	not_moderated: boolean
 }
 
-export default function CaseComplaint({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
+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 }) {
 	const t = useTranslations('Global');
 	const queryClient = useQueryClient();
 
@@ -38,26 +42,26 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 				return data
 			}
 		},
-		enabled: localViolation.status !== 'NEW' &&
-			localViolation.status !== 'CREATED' &&
-			localViolation.status !== 'SHOWED',
+		enabled: ENABLED_STATUSES.includes(localViolation.status),
 	});
 
 	useEffect(() => {
 		if (state?.success) {
 			toast.success(t('the-complaint-has-been-registered'));
 
+			const newStatus = selectedViolation.status === 'LEGAL_IN_WORK'
+				? 'COMPLAINT_AND_LEGAL_IN_WORK'
+				: 'COMPLAINT_IN_WORK';
+
 			setLocalViolation(prev => ({
 				...prev,
-				status: 'COMPLAINT_IN_WORK'
+				status: newStatus
 			}));
 
-			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
-			queryClient.invalidateQueries({ queryKey: ['complainInfo', localViolation.id] });
+			updateStatusHandler(selectedViolation.id, newStatus);
 
 			setShowCreateCase(false);
 		} else if (state && !state.success) {
-			console.log('state.errorMessage');
 			console.log(state.errorMessage);
 			if (state.errorMessage?.server) {
 				toast.warning(t(state.errorMessage.server));
@@ -65,13 +69,13 @@ export default function CaseComplaint({ selectedViolation }: { selectedViolation
 				toast.warning(t('the-complaint-has-not-been-registered'));
 			}
 		}
-	}, [state, queryClient, localViolation.id]);
+	}, [state, updateStatusHandler, selectedViolation.id]);
 
 	function toggleForm() {
 		setShowCreateCase(!showCreateCase);
 	}
 
-	if (localViolation.status === 'NEW' || localViolation.status === 'CREATED' || localViolation.status === 'SHOWED') {
+	if (!ENABLED_STATUSES.includes(localViolation.status)) {
 		return (
 			<div className="violation-info-case">
 				{!showCreateCase ? (

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

@@ -1,14 +1,255 @@
+'use client'
+
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+import { useEffect, useState, useActionState } from 'react';
+import { fetchCaseInfo, MatchStatus, createCase } from '@/app/actions/violationActions';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 
-export default function CaseViolation({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
+interface CaseInfo {
+	id: number;
+	name: string;
+	description: string;
+	amount: number;
+	priority: string;
+	type: string;
+	lawyer: string | null;
+	createdAt: string;
+	updatedAt: string;
+	pageNumber: number;
+	pageSize: number;
+	totalElements: number;
+	totalPages: number;
+	violationId: number;
+	content: string | null;
+}
 
-	return (
-		<div
-			className="violation-info-case"
-		>
-			<button type="button" className="btn-action btn-case">
-				Создание дела
-			</button>
-		</div>
-	)
+const ENABLED_STATUSES = ['LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
+type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
+
+export default function CaseViolation({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
+	const t = useTranslations('Global');
+	const queryClient = useQueryClient();
+	const [showCreateCase, setShowCreateCase] = useState(false);
+	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
+	const [state, formAction, isPending] = useActionState(createCase, undefined);
+
+	const { data: caseInfo, isLoading: isLoadingCase } = useQuery({
+		queryKey: ['caseInfo', localViolation.id],
+		queryFn: () => fetchCaseInfo(localViolation.id),
+		select: (data) => {
+			if (data) {
+				return data
+			}
+		},
+		enabled: ENABLED_STATUSES.includes(localViolation.status)
+	});
+
+	useEffect(() => {
+		if (state?.success) {
+			toast.success(t('the-complaint-has-been-registered'));
+
+			const newStatus = selectedViolation.status === 'COMPLAINT_IN_WORK'
+				? 'COMPLAINT_AND_LEGAL_IN_WORK'
+				: 'LEGAL_IN_WORK';
+
+			setLocalViolation(prev => ({
+				...prev,
+				status: newStatus
+			}));
+
+			updateStatusHandler(selectedViolation.id, newStatus);
+
+			setShowCreateCase(false);
+		} else if (state && !state.success) {
+			console.log(state.errorMessage);
+			if (state.errorMessage?.server) {
+				toast.warning(t(state.errorMessage.server));
+			} else {
+				toast.warning(t('the-complaint-has-not-been-registered'));
+			}
+		}
+	}, [state, updateStatusHandler, selectedViolation.id]);
+
+	function toggleForm() {
+		setShowCreateCase(!showCreateCase);
+	}
+
+	if (!ENABLED_STATUSES.includes(localViolation.status)) {
+		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={localViolation.id} />
+								<div
+									className="note-form-flex"
+								>
+									<section
+										className="note-form-group"
+									>
+										<label
+											className="note-case-label"
+											htmlFor="caseTitle"
+										>
+											Название дела
+										</label>
+										<input
+											type="text"
+											name="caseTitle"
+											className="note-case-input"
+										/>
+										{state?.errorMessage?.caseTitle && (
+											<p
+												className="text-sm text-red-500"
+											>
+												{
+													state?.errorMessage?.caseTitle.split('&').map((e, index) => {
+														return (
+															<span key={index}>
+																{t(e)}
+																<br />
+															</span>
+														)
+													})
+												}
+											</p>
+										)}
+									</section>
+									<section
+										className="note-form-group"
+									>
+										<label
+											className="note-case-label"
+											htmlFor="amount"
+										>
+											Сумма ущерба
+										</label>
+										<input
+											type="number"
+											name="amount"
+											className="note-case-input"
+										/>
+										{state?.errorMessage?.amount && (
+											<p
+												className="text-sm text-red-500"
+											>
+												{
+													state?.errorMessage?.amount.split('&').map((e, index) => {
+														return (
+															<span key={index}>
+																{t(e)}
+																<br />
+															</span>
+														)
+													})
+												}
+											</p>
+										)}
+									</section>
+								</div>
+
+								<section>
+									<textarea
+										name="note"
+										className="note-textarea"
+										placeholder={`Текст дела...`}>
+									</textarea>
+									{state?.errorMessage?.textArea && (
+										<p
+											className="text-sm text-red-500"
+										>
+											{
+												state?.errorMessage?.textArea.split('&').map((e, index) => {
+													return (
+														<span key={index}>
+															{t(e)}
+															<br />
+														</span>
+													)
+												})
+											}
+										</p>
+									)}
+								</section>
+								<div
+									className="flex gap-3"
+								>
+									<button
+										type="submit"
+										className="btn-small btn-primary-small"
+										disabled={isPending}
+									>
+										{t('submit-violation')}
+									</button>
+								</div>
+							</form>
+						</div>
+					</div>
+				)}
+			</div>
+		);
+	} else {
+		if (isLoadingCase) {
+			return (
+				<div className="violation-info-case">
+					<div>{t('loading')}...</div>
+				</div>
+			);
+		}
+
+		return (
+			<div className="violation-info-case">
+				{caseInfo?.body?.content ? (
+					<div>
+						{caseInfo.body.content.map((item: CaseInfo) => {
+							return (
+								<div key={item.id}>
+									<h3 className="mb-3">
+										{t('complaint-Information')}
+									</h3>
+									<div className="complaint-details">
+										<p><strong>ID:</strong> {item.id}</p>
+										<p><strong>{t('name')}:</strong> {item.name}</p>
+										<p><strong>{t('description')}:</strong> {item.description}</p>
+										<p><strong>{t('amount')}:</strong> {item.amount}</p>
+										<p><strong>{t('priority')}:</strong> {item.priority}</p>
+										<p><strong>{t('type')}:</strong> {item.type}</p>
+										<p><strong>{t('lawyer')}:</strong> {item.lawyer || t('not-assigned')}</p>
+										<p><strong>{t('violation-id')}:</strong> {item.violationId}</p>
+										<p><strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</p>
+										<p><strong>{t('date-of-update')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</p>
+										{item.content && <p><strong>{t('content')}:</strong> {item.content}</p>}
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				) : (
+					<div>
+						{t('no-information-about-the-complaint')}
+					</div>
+				)}
+			</div>
+		);
+	}
 }

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

@@ -37,6 +37,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 					toast.success('Статус обновлен');
 				}
 				queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
+				queryClient.invalidateQueries({ queryKey: ['complainInfo', id] });
 				return true;
 			} else {
 				setLocalViolation(selectedViolation);
@@ -153,8 +154,16 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 				<div
 					className="violation-info-case-grid"
 				>
-					<CaseComplaint key={"complaint_" + selectedViolation.id} selectedViolation={selectedViolation} />
-					<CaseViolation key={"violation_" + selectedViolation.id} selectedViolation={selectedViolation} />
+					<CaseComplaint
+						key={"complaint_" + selectedViolation.id}
+						selectedViolation={selectedViolation}
+						updateStatusHandler={updateStatusHandler}
+					/>
+					<CaseViolation
+						key={"violation_" + selectedViolation.id}
+						selectedViolation={selectedViolation}
+						updateStatusHandler={updateStatusHandler}
+					/>
 				</div>
 			</div>
 		</div>

src/app/ui/marking-page/new/protection-statistic.tsx

@@ -3,12 +3,17 @@
 import { useTranslations } from 'next-intl';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
+import { useEffect } from 'react';
 
 export default function ProtectionStatistic({ fileType }: { fileType: string }) {
 	const t = useTranslations('Global');
 
 	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
 
+	useEffect(() => {
+		console.log(filesInfo);
+	}, [filesInfo])
+
 	const getFileTypeData = (fileType: string) => {
 		switch (fileType) {
 			case 'image':
@@ -35,7 +40,9 @@ export default function ProtectionStatistic({ fileType }: { fileType: string })
 				<div className="protection-statistic-stat-label">{t(`${fileType}-protected`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">
-				<div className="protection-statistic-stat-number">0</div>
+				<div className="protection-statistic-stat-number">
+					{currentData?.check ?? 0}
+				</div>
 				<div className="protection-statistic-stat-label">{t(`${fileType}-checked`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">