rework violation table and violation actions

This commit is contained in:
smanylov
2026-04-29 15:15:04 +07:00
parent c0fe6cce48
commit c274cb134d
6 changed files with 341 additions and 449 deletions
@@ -11,7 +11,7 @@ import Link from 'next/link';
import { getViolationFilesArray } from '@/app/actions/violationActions';
import { IconEye } from '@/app/ui/icons/icons';
interface ViolationFile {
interface FileViolation {
createdAt: string;
fileId: string;
fileName: string;
@@ -23,20 +23,26 @@ interface ViolationFile {
violationCount: number;
}
interface ViolationData {
content: FileViolation[];
}
export default function DashboardUserViolations() {
const {
data: violationData,
isLoading,
isError,
error,
} = useQuery<ViolationFile[]>({
queryKey: ['violationData'],
queryFn: () => getViolationFilesArray(),
} = useQuery<ViolationData>({
queryKey: ['violationData', { page: 0, size: 5 }],
queryFn: () => getViolationFilesArray({
page: 0,
size: 5,
}),
select: (data) => {
return data?.slice(0, 5) || [];
},
/* refetchInterval: 30000 */
return data;
}
});
const t = useTranslations('Global');
@@ -76,8 +82,8 @@ export default function DashboardUserViolations() {
</div>
)}
{violationData?.length ? (
violationData?.map((file) => {
{violationData?.content.length ? (
violationData?.content.map((file) => {
return (
<div
key={file.fileId}
@@ -1,173 +0,0 @@
'use client'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import Image from 'next/image';
import 'swiper/css';
import 'swiper/css/pagination';
import testImage from '@/app/src/image-preview.png'
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">{t('violation')}</h3>
<Link
href="violations"
className="view-all-link"
>
Смотреть все
</Link>
</div>
<div>
{t('are-no-violations')}
</div>
<div className="violations-carousel">
<Swiper
spaceBetween={50}
slidesPerView={1}
modules={[Pagination, Autoplay]}
pagination={{
clickable: true,
el: '.custon-swiper-pagination'
}}
loop={true}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
>
{/* {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" />
<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> */}
</Swiper>
<div
className="flex justify-center mt-6"
>
<div
ref={paginationRef}
className="flex justify-center gap-2 custon-swiper-pagination"
>
</div>
</div>
</div>
</div>
)
}