add violation tanstak-table

2026-03-12 17:44:02 +07:00
parent d36b724d4f
commit 7a1b45895f
5 changed files with 658 additions and 77 deletions
@@ -1,18 +1,112 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { getViolationSearchStatus, startGlobalMonitoring } from '@/app/actions/violationActions';
+import { useState } from 'react';
+import ModalWindow from '@/app/components/ModalWindow';
+import { fa } from 'zod/v4/locales';
+
 export default function ViolationsCheckAllSection() {
-	return (
-		<div className="violation-check-all-section">
-			<div className="check-all-left">
-				<div className="check-all-header">
-					<div className="check-all-icon">🔍</div>
-					<div className="check-all-title">Глобальная проверка контента</div>
+	const {
+		data: violationSearchStatus,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['violationSearchStatus'],
+		queryFn: () => {
+			return getViolationSearchStatus();
+		},
+		select: (data) => {
+			/* console.log(data); */
+			if (data) {
+				return data;
+			} else {
+				return null
+			}
+		}
+	});
+	const t = useTranslations('Global');
+	const [isProcessing, setIsProcessing] = useState<boolean>(false);
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+
+	function openModalWindow() {
+		setOpenWindow(true);
+	}
+
+	async function handlerStartMonitoring(type: 'monitoring' | 'all_files') {
+		setIsProcessing(true);
+
+		try {
+			const response = await startGlobalMonitoring(type);
+		} catch (error) {
+			console.error(error);
+		} finally {
+			setIsProcessing(false);
+			setOpenWindow(false);
+		}
+	}
+
+	function ConfirmationModal() {
+		return (
+			<div className="modal-window-confirm-payment">
+				<h3 className="modal-window-confirm-payment-title">
+					Поиск нарушений во всех ваших изображениях
+				</h3>
+				<div className="modal-window-confirm-payment-price">
+					<div>Варианты проверки.</div>
 				</div>
-				<div className="check-all-description">
-					Поиск нарушений во всех ваших изображениях. Проверка только точных совпадений (95%+).
+				<div className="flex justify-center gap-4">
+					<button
+						className="btn-primary btn-cancel"
+						disabled={isProcessing}
+						onClick={() => {
+							handlerStartMonitoring('all_files');
+						}}
+					>
+						Проверить все
+					</button>
+					<button
+						className="btn-primary btn-cancel"
+						disabled={isProcessing}
+						onClick={() => {
+							handlerStartMonitoring('monitoring');
+						}}
+					>
+						Проверить файлы с мониторингом
+					</button>
 				</div>
 			</div>
-			<button type="button" className="check-all-btn">
-				🌐 Проверить все
-			</button>
-		</div>
+		);
+	}
+
+	return (
+		<>
+			<ModalWindow state={openWindow} callBack={setOpenWindow}>
+				<ConfirmationModal />
+			</ModalWindow>
+			<div className="violation-check-all-section">
+
+				<div className="check-all-left">
+					<div className="check-all-header">
+						{/* <div className="check-all-icon">🔍</div> */}
+						<div className="check-all-title">Глобальная проверка контента</div>
+					</div>
+					<div className="check-all-description">
+						Поиск нарушений во всех ваших изображениях. Проверка только точных совпадений (95%+).
+					</div>
+				</div>
+				<button
+					type="button"
+					className="check-all-btn"
+					onClick={() => {
+						openModalWindow()
+					}}
+				>
+					Проверить все
+				</button>
+			</div>
+		</>
 	)
 }