update dashboard statisctic

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

@@ -6,18 +6,50 @@ import Image from 'next/image';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import testImage from '@/app/src/image-preview.png'
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { getViolationFilesArray } from '@/app/actions/violationActions';
+
+interface ViolationFile {
+	createdAt: string;
+	fileId: string;
+	fileName: string;
+	fileSize: number;
+	latestViolationDate: string;
+	mimeType: string;
+	status: string;
+	supportId: number;
+	violationCount: number;
+}
 
 export default function ViolationsCarousel() {
+	const {
+		data: violationData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<ViolationFile[]>({
+		queryKey: ['violationData'],
+		queryFn: () => getViolationFilesArray(),
+
+		select: (data) => {
+			return data;
+		},
+		/* refetchInterval: 30000 */
+	});
 	const paginationRef = useRef(null);
 	const t = useTranslations('Global');
 
+	useEffect(() => {
+		console.log(violationData);
+	}, [violationData])
+
 	return (
 		<div className="content-section">
 			<div className="section-header">
-				<h3 className="section-title">Нарушения</h3>
+				<h3 className="section-title">{t('violation')}</h3>
 				<Link
 					href="violations"
 					className="view-all-link"
@@ -28,7 +60,7 @@ export default function ViolationsCarousel() {
 			<div>
 				{t('are-no-violations')}
 			</div>
-			{/* 			<div className="violations-carousel">
+			<div className="violations-carousel">
 				<Swiper
 					spaceBetween={50}
 					slidesPerView={1}
@@ -43,7 +75,18 @@ export default function ViolationsCarousel() {
 						disableOnInteraction: false,
 					}}
 				>
-					<SwiperSlide>
+					{/* {violationData?.map(item => {
+						return (
+							<SwiperSlide>
+								<div
+									className="violation-slide"
+								>
+
+								</div>
+							</SwiperSlide>
+						)
+					})} */}
+{/* 					<SwiperSlide>
 						<div className="violation-slide">
 							<div className="violation-image-container">
 								<Image src={testImage} alt="Preview" className="violation-image" />
@@ -113,151 +156,7 @@ export default function ViolationsCarousel() {
 								</div>
 							</div>
 						</div>
-					</SwiperSlide>
-					<SwiperSlide>
-						<div className="violation-slide">
-							<div className="violation-image-container">
-								<Image src={testImage} alt="Preview" className="violation-image" />
-
-								<div className="violation-badge">НАРУШЕНИЕ</div>
-								<div className="violation-status-badge">ОБРАБОТАНО</div>
-							</div>
-
-							<div className="violation-content">
-								<div className="violation-title-row">
-									<div className="violation-filename">
-										🖼️banner111.png</div>
-									<div className="violation-type-badge photo">
-										Фото
-									</div>
-								</div>
-
-								<div className="violation-info-grid">
-									<div className="violation-info-item">
-										<div className="violation-info-label">
-											🌍 Регион
-										</div>
-										<div className="violation-info-value">
-											<span className="region-flag">🇺🇸</span>
-											<span>США</span>
-										</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📅 Обнаружено</div>
-										<div className="violation-info-value">
-											17.10.2025</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">🌐 Домен</div>
-										<div className="violation-info-value">
-											m.apkpure.com    </div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📊 Категория</div>
-										<div className="violation-info-value">
-											Единичное
-										</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📁 Тип</div>
-										<div className="violation-info-value">
-											Изображение</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">⚡ Статус</div>
-										<div className="violation-info-value">
-											✅ Обработано</div>
-									</div>
-								</div>
-
-								<div className="violation-actions-row">
-									<button className="btn-visit-site">
-										🔗 Перейти на сайт
-									</button>
-									<button className="violation-action">
-										🚨 Открыть дело
-									</button>
-								</div>
-							</div>
-						</div>
-					</SwiperSlide>
-					<SwiperSlide>
-						<div className="violation-slide">
-							<div className="violation-image-container">
-								<Image src={testImage} alt="Preview" className="violation-image" />
-
-								<div className="violation-badge">НАРУШЕНИЕ</div>
-								<div className="violation-status-badge">ОБРАБОТАНО</div>
-							</div>
-
-							<div className="violation-content">
-								<div className="violation-title-row">
-									<div className="violation-filename">
-										🖼️banner111.png</div>
-									<div className="violation-type-badge photo">
-										Фото
-									</div>
-								</div>
-
-								<div className="violation-info-grid">
-									<div className="violation-info-item">
-										<div className="violation-info-label">
-											🌍 Регион
-										</div>
-										<div className="violation-info-value">
-											<span className="region-flag">🇺🇸</span>
-											<span>США</span>
-										</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📅 Обнаружено</div>
-										<div className="violation-info-value">
-											17.10.2025</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">🌐 Домен</div>
-										<div className="violation-info-value">
-											m.apkpure.com    </div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📊 Категория</div>
-										<div className="violation-info-value">
-											Единичное
-										</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">📁 Тип</div>
-										<div className="violation-info-value">
-											Изображение</div>
-									</div>
-
-									<div className="violation-info-item">
-										<div className="violation-info-label">⚡ Статус</div>
-										<div className="violation-info-value">
-											✅ Обработано</div>
-									</div>
-								</div>
-
-								<div className="violation-actions-row">
-									<button className="btn-visit-site">
-										🔗 Перейти на сайт
-									</button>
-									<button className="violation-action">
-										🚨 Открыть дело
-									</button>
-								</div>
-							</div>
-						</div>
-					</SwiperSlide>
+					</SwiperSlide> */}
 				</Swiper>
 				<div
 					className="flex justify-center mt-6"
@@ -268,7 +167,7 @@ export default function ViolationsCarousel() {
 					>
 					</div>
 				</div>
-			</div> */}
+			</div>
 		</div>
 	)
 }