update dashboard statisctic

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

@@ -8,7 +8,6 @@ import { convertBytes } from '@/app/lib/convertBytes';
 import { useTranslations } from 'next-intl';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import Link from 'next/link';
-import { getSessionData } from '@/app/actions/session';
 
 type FileItem = {
 	id: string;
@@ -86,7 +85,9 @@ export default function DashboardUserFiles() {
 	return (
 		<div className="content-section">
 			<div className="section-header">
-				<h3 className="section-title">Ваши файлы</h3>
+				<h3 className="section-title">
+					{t('your-files')}
+				</h3>
 				<div
 					className="section-add-file btn view-all-link"
 					onClick={() => {

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

@@ -1,52 +1,83 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import {convertBytes} from '@/app/lib/convertBytes';
-import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
+import { useEffect } from 'react';
+import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
+import {IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield} from '@/app/ui/icons/icons';
 
 export default function DashboardUserStats() {
 	const t = useTranslations("Global");
 	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
+	const { data: violationStatistic } = useViolationStatistic();
 
 	return (
-		<div className="dashboard-user-stats">
+		<>
+			<div className="dashboard-user-stats">
 
-			<div className="stat-card projects">
-				<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
-				<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
-				<div className="stat-label">Файлов под защитой</div>
-				<div className="stat-icon">🛡️</div>
-			</div>
-
-			<div className="stat-card matches">
-				<div className="stat-type">СОВПАДЕНИЯ</div>
-				<div className="stat-value">0</div>
-				<div className="stat-label">Найдено совпадений</div>
-				<div className="stat-icon">🔍</div>
-			</div>
-
-			<div className="stat-card violations">
-				<div className="stat-type">НАРУШЕНИЯ</div>
-				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
-				<div className="stat-label">Требуют внимания</div>
-				<div className="stat-icon">⚠️</div>
-			</div>
-
-			<div className="stat-card storage">
-				<div className="stat-type">ХРАНИЛИЩЕ</div>
-				<div className="stat-value">
-					{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
+				<div className="stat-card projects">
+					<div className="stat-header">
+						<div className="stat-icon">
+							<IconShield />
+						</div>
+					</div>
+					<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
+					<div className="stat-label">
+						{t('files-under-protection')}
+					</div>
 				</div>
-				<div className="stat-label">Использовано места</div>
-				<div className="stat-icon">💾</div>
-			</div>
 
-			<div className="stat-card legal">
-				<div className="stat-type">ЖАЛОБЫ</div>
-				<div className="stat-value">0</div>
-				<div className="stat-label">Отправлено юристам</div>
-				<div className="stat-icon">⚖️</div>
+				<div className="stat-card matches">
+					<div className="stat-header">
+						<div className="stat-icon">
+							<IconSearch />
+						</div>
+					</div>
+					<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
+					<div className="stat-label">
+						{t('matches-found')}
+					</div>
+				</div>
+
+				<div className="stat-card violations">
+					<div className="stat-header">
+						<div className="stat-icon">
+							<IconWarning />
+						</div>
+					</div>
+					<div className="stat-value">{violationStatistic?.total_violations ?? 0}</div>
+					<div className="stat-label">
+						{t('violations')}
+					</div>
+				</div>
+
+				<div className="stat-card storage">
+					<div className="stat-header">
+						<div className="stat-icon">
+							<IconDiscet />
+						</div>
+					</div>
+					<div className="stat-value">
+						{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
+					</div>
+					<div className="stat-label">
+						{t('disk-space-used')}
+					</div>
+				</div>
+
+				<div className="stat-card legal">
+					<div className="stat-header">
+						<div className="stat-icon">
+							<IconDocument />
+						</div>
+					</div>
+					<div className="stat-value">{violationStatistic?.in_progress_violations ?? 0}</div>
+					<div className="stat-label">
+						{t('violations-in-progress')}
+					</div>
+				</div>
 			</div>
-		</div>
+		</>
 	)
 }

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

@@ -0,0 +1,104 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData } from '@/app/actions/fileEntity';
+import { useEffect, useState, useRef } from 'react';
+import { FileTypeIcon } from '@/app/components/FileTypeIcon';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { useTranslations } from 'next-intl';
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+import Link from 'next/link';
+import { getViolationFilesArray } from '@/app/actions/violationActions';
+import { IconEye } from '@/app/ui/icons/icons';
+
+interface ViolationFile {
+	createdAt: string;
+	fileId: string;
+	fileName: string;
+	fileSize: number;
+	latestViolationDate: string;
+	mimeType: string;
+	status: string;
+	supportId: number;
+	violationCount: number;
+}
+
+export default function DashboardUserViolations() {
+	const {
+		data: violationData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<ViolationFile[]>({
+		queryKey: ['violationData'],
+		queryFn: () => getViolationFilesArray(),
+
+		select: (data) => {
+			return data?.slice(0, 5) || [];
+		},
+		/* refetchInterval: 30000 */
+	});
+
+	const t = useTranslations('Global');
+	const formatDate = (timestamp: number | string) => {
+		const date = new Date(timestamp);
+		const day = date.getDate().toString().padStart(2, '0');
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		const year = date.getFullYear();
+
+		return `${day}.${month}.${year}`;
+	};
+
+	return (
+		<div className="content-section">
+			<div className="section-header">
+				<h3 className="section-title">
+					{t('violation')}
+				</h3>
+				<div
+					className="section-add-file btn view-all-link"
+				>
+					<Link href='/pages/violations'>
+						{t('add')}
+					</Link>
+				</div>
+			</div>
+
+			<div className="user-files-list">
+
+				{violationData?.length ? (
+					violationData?.map((file) => {
+						return (
+							<div
+								key={file.fileId}
+								className="file-item"
+							>
+								<div className="file-icon violent">
+									<Link
+										href={`/pages/violations/${file.fileId}`}
+										className="bg-violet-500 hover:bg-violet-600"
+										title={t('view')}
+									>
+										<IconEye />
+									</Link>
+								</div>
+								<div className="file-info">
+									<div className="file-name" title={file.fileName}>
+										{file.fileName}
+									</div>
+									<div className="file-meta">
+										{file.createdAt ? formatDate(file.createdAt) : 0} • {t('violations-found')}: {file.violationCount ? file.violationCount : 0}
+									</div>
+								</div>
+							</div>
+						)
+					})
+				) : (
+					<div>
+						{t('there-are-no-files-yet')}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}

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>
 	)
 }

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -53,6 +53,7 @@ export default function PaymentTabTariffs() {
 	const [isProcessing, setIsProcessing] = useState<boolean>(false);
 	const [showWidget, setShowWidget] = useState<boolean>(false);
 	const [yooMoneyConfig, setYooMoneyConfig] = useState<YooMoneyCheckoutWidgetConfig | null>(null);
+	const [billingPer, setBillingPer] = useState<'per-month' | 'per-year'>('per-month');
 	const queryClient = useQueryClient();
 
 	async function createPayment(value: number, tariff: number) {
@@ -183,6 +184,10 @@ export default function PaymentTabTariffs() {
 		setShowWidget(false);
 	}
 
+	function changeBilling(type: 'per-month' | 'per-year') {
+		setBillingPer(type)
+	}
+
 	return (
 		<>
 			<ModalWindow state={openWindow} callBack={closeModal}>
@@ -190,66 +195,80 @@ export default function PaymentTabTariffs() {
 			</ModalWindow>
 
 			<div className="tab-content">
-				<div className="billing-toggle" style={{ display: 'none' }}>
+				<div className="billing-toggle">
 					<div>
-						<button className="billing-btn active">💳 Помесячно</button>
-						<button className="billing-btn">
-							🔥 Годовая
-							<span>ВЫГОДНО</span>
+						<button
+							className={`billing-btn ${billingPer === 'per-month' ? 'active' : ''} `}
+							onClick={() => {
+								changeBilling('per-month');
+							}}
+						>
+							{t('per-month')}
+						</button>
+						<button
+							className={`billing-btn ${billingPer === 'per-year' ? 'active' : ''} `}
+							onClick={() => {
+								changeBilling('per-year');
+							}}
+						>
+							{t('annual')}
+							{/* <span>ВЫГОДНО</span> */}
 						</button>
 					</div>
 				</div>
-				<div className="subscription-grid">
-					{tariffData?.map((item: {
-						id: number;
-						name: string;
-						price: number;
-						tokens: number;
-						maxFilesCount: number;
-						diskSize: number;
-					}) => (
-						<div className="plan-card animate-card" key={item.id}>
-							<div className="plan-header">
-								<h3 className="plan-name">
-									{t.has(item.name) ? t(item.name) : item.name}
-								</h3>
-								<div className="plan-price">{item.price ?? 0} ₽</div>
-								<div className="plan-period">в месяц</div>
-								<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
+				{billingPer === 'per-month' && (
+					<div className="subscription-grid">
+						{tariffData?.map((item: {
+							id: number;
+							name: string;
+							price: number;
+							tokens: number;
+							maxFilesCount: number;
+							diskSize: number;
+						}) => (
+							<div className="plan-card animate-card" key={item.id}>
+								<div className="plan-header">
+									<h3 className="plan-name">
+										{t.has(item.name) ? t(item.name) : item.name}
+									</h3>
+									<div className="plan-price">{item.price ?? 0} ₽</div>
+									<div className="plan-period">{t('per-month')}</div>
+									<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
+								</div>
+								<ul className="plan-features">
+									<li className="plan-feature">
+										<span className="feature-icon">✓</span>
+										{item.maxFilesCount} файлов в месяц
+									</li>
+									<li className="plan-feature">
+										<span className="feature-icon">✓</span>
+										{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
+									</li>
+									<li className="plan-feature">
+										<span className="feature-icon">✓</span>
+										Базовые модули защиты
+									</li>
+									<li className="plan-feature">
+										<span className="feature-icon">✓</span>
+										Поддержка 24/7
+									</li>
+									<li className="plan-feature">
+										<span className="feature-icon not">✗</span>
+										API доступ
+									</li>
+								</ul>
+								<div className="flex justify-center">
+									<button
+										className="btn btn-primary"
+										onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
+									>
+										Выбрать план
+									</button>
+								</div>
 							</div>
-							<ul className="plan-features">
-								<li className="plan-feature">
-									<span className="feature-icon">✓</span>
-									{item.maxFilesCount} файлов в месяц
-								</li>
-								<li className="plan-feature">
-									<span className="feature-icon">✓</span>
-									{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
-								</li>
-								<li className="plan-feature">
-									<span className="feature-icon">✓</span>
-									Базовые модули защиты
-								</li>
-								<li className="plan-feature">
-									<span className="feature-icon">✓</span>
-									Поддержка 24/7
-								</li>
-								<li className="plan-feature">
-									<span className="feature-icon not">✗</span>
-									API доступ
-								</li>
-							</ul>
-							<div className="flex justify-center">
-								<button
-									className="btn btn-primary"
-									onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
-								>
-									Выбрать план
-								</button>
-							</div>
-						</div>
-					))}
-				</div>
+						))}
+					</div>
+				)}
 			</div>
 
 			{/* Модальное окно с виджетом */}

src/app/ui/violations/violations-table.tsx

@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, ColumnDef, SortingState, ColumnFiltersState } from '@tanstack/react-table';
 import { useTranslations } from 'next-intl';
 import { IconArrowUp, IconArrowDown, IconFilter, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconEye } from '@/app/ui/icons/icons';
-import DropDownList from '@/app/components/DropDownList';
 import { useQuery } from '@tanstack/react-query';
 import { getViolationFilesArray } from '@/app/actions/violationActions';
 import { useViewport } from '@/app/hooks/useViewport';