update dashboard statisctic

src/app/[locale]/pages/dashboard/page.tsx

@@ -11,6 +11,7 @@ import DahboardLimitsSection from '@/app/ui/dashboard/new/dashborad-limits-secti
 import DahboardGeographySection from '@/app/ui/dashboard/new/dashboard-geography-section';
 import DashboardLastCheck from '@/app/ui/dashboard/new/dashboard-last-check';
 import ViolationsCarousel from '@/app/ui/dashboard/new/violations-carousel';
+import DashboardUserViolations from '@/app/ui/dashboard/new/dashboard-user-violations';
 
 export const metadata: Metadata = {
 	title: 'Dashboard',
@@ -24,13 +25,16 @@ export default function Page() {
 			<PageTitle title="statistics" />
 			<DashboardUserStats />
 			<div className="dashboard-main-grid">
+				{/* <DashboardUserFiles />
+				<DashboardUserViolations /> */}
+
 				<div className="left-column">
 					<DashboardUserFiles />
-					{/* <DashboardPlatformsList /> */}
 				</div>
 				<div className="right-column">
-					<ViolationsCarousel />
+					<DashboardUserViolations />
 				</div>
+
 			</div>
 			<DashboardFilesInfo />
 			<div className="dashboard-main-grid">

src/app/styles/pages-styles.scss

@@ -1539,44 +1539,19 @@
 	.stat-card {
 		background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
 		border-radius: 20px;
-		padding: 30px 24px;
+		padding: 32px 28px;
 		color: white;
 		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all 0.4s ease;
+		cursor: pointer;
 		position: relative;
 		overflow: hidden;
 
-		&::before {
-			content: '';
-			position: absolute;
-			top: -50%;
-			right: -50%;
-			width: 200%;
-			height: 200%;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
-			opacity: 0;
-			transition: opacity 0.4s ease;
-		}
-
 		&:hover {
-			opacity: 1;
+			transform: translateY(-8px);
-			transform: translateY(0px);
+			box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
-			transition: 0.5s;
-
-			&::before {
-				opacity: 1;
 		}
 	}
-	}
-
-	.stat-type {
-		font-size: 11px;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 1.2px;
-		opacity: 0.9;
-		margin-bottom: 16px;
-	}
 
 	.stat-value {
 		font-size: 42px;
@@ -1592,13 +1567,19 @@
 		opacity: 0.95;
 	}
 
+	.stat-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 16px;
+		position: relative;
+		z-index: 1;
+	}
+
 	.stat-icon {
-		position: absolute;
+		.icon {
-		bottom: 20px;
+			transform: scale(1.5);
-		right: 20px;
+		}
-		font-size: 48px;
-		opacity: 0.2;
-		filter: blur(1px);
 	}
 
 	@media (max-width: 1360px) {
@@ -1617,33 +1598,32 @@
 
 .dashboard-main-grid {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 50% 50%;
-	gap: 30px;
 	margin-bottom: 40px;
 	width: 100%;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	.left-column {
-		display: flex;
 		flex-direction: column;
-		gap: 30px;
 		width: 100%;
-		max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
+		padding-right: 15px;
 	}
 
 	.right-column {
 		width: 100%;
-		display: flex;
 		flex-direction: column;
-		max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
+		padding-left: 15px;
 	}
 
 	@media (max-width: 1360px) {
 		grid-template-columns: 1fr;
+		gap: 30px;
 
 		.left-column,
 		.right-column {
 			max-width: calc(100vw - var(--side-bar-width) - 60px);
+			padding-right: 0;
+			padding-left: 0;
 		}
 	}
 
@@ -1714,6 +1694,18 @@
 		font-size: 24px;
 		flex-shrink: 0;
 
+		&.violent {
+			a {
+				color: #fff;
+				cursor: pointer;
+				border-radius: 8px;
+				padding: 8px;
+				font-size: 14px;
+				line-height: 20px;
+				transition: all .3s ease-in;
+			}
+		}
+
 		&.video {
 			background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
 		}
@@ -2255,7 +2247,6 @@
 				text-transform: uppercase;
 				background: #dbeafe;
 				color: #1e40af;
-				/* display: none; */
 			}
 		}
 
@@ -2396,6 +2387,7 @@
 	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	margin-bottom: 30px;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	@media (max-width: 1400px) {
 		grid-template-columns: repeat(2, 1fr);

src/app/styles/payment-container.scss

@@ -249,6 +249,7 @@
 			.plan-period {
 				color: #64748b;
 				font-size: 0.85rem;
+				text-transform: lowercase;
 			}
 
 			.plan-tokens {

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

@@ -3,50 +3,81 @@
 import { useTranslations } from 'next-intl';
 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="stat-card projects">
-				<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
+					<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">Файлов под защитой</div>
+					<div className="stat-label">
-				<div className="stat-icon">🛡️</div>
+						{t('files-under-protection')}
+					</div>
 				</div>
 
 				<div className="stat-card matches">
-				<div className="stat-type">СОВПАДЕНИЯ</div>
+					<div className="stat-header">
-				<div className="stat-value">0</div>
+						<div className="stat-icon">
-				<div className="stat-label">Найдено совпадений</div>
+							<IconSearch />
-				<div className="stat-icon">🔍</div>
+						</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-type">НАРУШЕНИЯ</div>
+					<div className="stat-header">
-				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
+						<div className="stat-icon">
-				<div className="stat-label">Требуют внимания</div>
+							<IconWarning />
-				<div className="stat-icon">⚠️</div>
+						</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-type">ХРАНИЛИЩЕ</div>
+					<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">Использовано места</div>
+					<div className="stat-label">
-				<div className="stat-icon">💾</div>
+						{t('disk-space-used')}
+					</div>
 				</div>
 
 				<div className="stat-card legal">
-				<div className="stat-type">ЖАЛОБЫ</div>
+					<div className="stat-header">
-				<div className="stat-value">0</div>
+						<div className="stat-icon">
-				<div className="stat-label">Отправлено юристам</div>
+							<IconDocument />
-				<div className="stat-icon">⚖️</div>
 						</div>
 					</div>
+					<div className="stat-value">{violationStatistic?.in_progress_violations ?? 0}</div>
+					<div className="stat-label">
+						{t('violations-in-progress')}
+					</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,
 					}}
 				>
+					{/* {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> */}
-					<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>
 				</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,15 +195,28 @@ 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
-						<button className="billing-btn">
+							className={`billing-btn ${billingPer === 'per-month' ? 'active' : ''} `}
-							🔥 Годовая
+							onClick={() => {
-							<span>ВЫГОДНО</span>
+								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>
+				{billingPer === 'per-month' && (
 					<div className="subscription-grid">
 						{tariffData?.map((item: {
 							id: number;
@@ -214,7 +232,7 @@ export default function PaymentTabTariffs() {
 										{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-period">{t('per-month')}</div>
 									<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
 								</div>
 								<ul className="plan-features">
@@ -250,6 +268,7 @@ export default function PaymentTabTariffs() {
 							</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';

src/i18n/messages/en.json

@@ -342,7 +342,14 @@
 		"france": "France",
 		"uk": "United Kingdom",
 		"china": "China",
-		"distribution-analytics": "Distribution analytics"
+		"distribution-analytics": "Distribution analytics",
+		"annual": "Annual",
+		"per-month": "Per month",
+		"violation-count": "Violation count",
+		"your-files": "Your files",
+		"files-under-protection": "Files under protection",
+		"matches-found": "Matches found",
+		"violations-in-progress": "Violations in progress"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -342,7 +342,14 @@
 		"france": "Франция",
 		"uk": "Великобритания",
 		"china": "Китай",
-		"distribution-analytics": "Аналитика распространения"
+		"distribution-analytics": "Аналитика распространения",
+		"annual": "Годовая",
+		"per-month": "Помесячно",
+		"violation-count": "Количество нарушений",
+		"your-files": "Ваши файлы",
+		"files-under-protection": "Файлов под защитой",
+		"matches-found": "Найдено совпадений",
+		"violations-in-progress": "Нарушений в работе"
 	},
 	"Login-register-form": {
 		"and": "и",