update general statistic and analytic

src/app/ui/reports/analytics-card-distribution.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useViolationAnalyticStatistic, UseViolationStatistic } from '@/app/hooks/react-query/useViolationAnalyticStatistic';
+
+interface DomainListProps {
+	data: UseViolationStatistic;
+}
+
+export default function AnalyticsCardDistribution() {
+	const t = useTranslations('Global');
+	const { data: violationGeography, isLoading, isError, error } = useViolationAnalyticStatistic('domain');
+
+	const DomainList = ({ data }: DomainListProps) => {
+		const topDomains = Object.entries(data)
+			.map(([domain, count]) => ({ domain, count }))
+			.sort((a, b) => b.count - a.count)
+			.slice(0, 6);
+
+		return (
+			<div className="storage-timeline">
+				{topDomains.map((item, index) => (
+					<div
+						className="timeline-item"
+						key={item.domain}
+					>
+						<span className="timeline-month">
+							{item.domain}
+						</span>
+						<span className="method-count">
+							{item.count}
+						</span>
+					</div>
+				))}
+			</div>
+		);
+	};
+
+	return (
+		<div className="analytics-card">
+			<div className="analytics-header">
+				<div className="analytics-icon"></div>
+				<h3 className="analytics-title">
+					{t('distribution-analytics')}
+				</h3>
+			</div>
+			{violationGeography && (
+				<DomainList data={violationGeography} />
+			)}
+		</div>
+	)
+}

src/app/ui/reports/analytics-card-geography.tsx

@@ -1,11 +1,40 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import {useViolationGeography} from '@/app/hooks/react-query/useViolationGeography';
+import {useViolationAnalyticStatistic, UseViolationStatistic} from '@/app/hooks/react-query/useViolationAnalyticStatistic';
+
+interface DomainListProps {
+	data: UseViolationStatistic;
+}
 
 export default function AnalyticsCardGeography() {
 	const t = useTranslations('Global');
-	const { data: violationGeography, isLoading, isError, error } = useViolationGeography();
+	const { data: violationGeography, isLoading, isError, error } = useViolationAnalyticStatistic('tld');
+
+	const DomainList = ({ data }: DomainListProps) => {
+		const topDomains = Object.entries(data)
+			.map(([domain, count]) => ({ domain, count }))
+			.sort((a, b) => b.count - a.count)
+			.slice(0, 6);
+
+		return (
+			<div className="storage-timeline">
+				{topDomains.map((item, index) => (
+					<div
+						className="timeline-item"
+						key={item.domain}
+					>
+						<span className="timeline-month">
+							{item.domain}
+						</span>
+						<span className="method-count">
+							{item.count}
+						</span>
+					</div>
+				))}
+			</div>
+		);
+	};
 
 	return (
 		<div className="analytics-card">
@@ -15,44 +44,9 @@ export default function AnalyticsCardGeography() {
 					{t('geography-of-violations')}
 				</h3>
 			</div>
-			<div className="storage-timeline">
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('russia')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('usa')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('germany')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('france')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('uk')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-				<div className="timeline-item">
-					<span className="timeline-month">
-						{t('china')}
-					</span>
-					<span className="method-count">0</span>
-				</div>
-			</div>
+			{violationGeography && (
+				<DomainList data={violationGeography} />
+			)}
 		</div>
 	)
 }

src/app/ui/reports/final-summary.tsx

@@ -3,10 +3,12 @@
 import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
 
 export default function FinalSummary() {
 	const t = useTranslations('Global');
 	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
+	const { data: violationStatistic } = useViolationStatistic();
 
 	return (
 		<div className="final-summary">
@@ -30,13 +32,17 @@ export default function FinalSummary() {
 				<div className="summary-stat center">
 					{/* <div className="summary-stat-icon">🚨</div> */}
 					<div>
-						<div className="summary-stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
+						<div className="summary-stat-value">
+							{violationStatistic?.new_violations ?? 0}
+						</div>
 						<div className="summary-stat-label">
 							{t('violations-found')}
 						</div>
 					</div>
 					<div>
-						<div className="summary-stat-value">0</div>
+						<div className="summary-stat-value">
+							{violationStatistic?.in_progress_violations ?? 0}
+						</div>
 						<div className="summary-stat-label">
 							{t('violations-registered')}
 						</div>

src/app/ui/reports/reports-info.tsx

@@ -2,11 +2,13 @@
 
 import { useTranslations } from 'next-intl';
 import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
-import {IconDocument, IconSearch, IconWarning, IconGraph} from '@/app/ui/icons/icons';
+import { IconDocument, IconSearch, IconWarning, IconGraph } from '@/app/ui/icons/icons';
+import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
 
 export default function ReportsInfo() {
 	const t = useTranslations("Global");
 	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
+	const { data: violationStatistic } = useViolationStatistic();
 
 	return (
 		<>
@@ -27,7 +29,7 @@ export default function ReportsInfo() {
 							<IconWarning />
 						</div>
 					</div>
-					<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
+					<div className="stat-value">{violationStatistic?.total_violations ?? 0}</div>
 					<div className="stat-label">{t('violations-few')}</div>
 				</div>
 

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

@@ -1,35 +1,38 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
+
+import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
 
 export default function ViolationsStatistic() {
 	const t = useTranslations('Global');
 
-	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
+	const { data: violationStatistic } = useViolationStatistic();
 
 	return (
 		<div className="protection-statistic">
 			<div className="protection-statistic-stat-card">
 				<div className="protection-statistic-stat-number">
-					{filesInfo?.total.violation}
+					{violationStatistic?.total_violations ?? 0}
 				</div>
 				<div className="protection-statistic-stat-label">{t(`total-violations`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">
 				<div className="protection-statistic-stat-number">
-					{filesInfo?.total.violation}
+					{violationStatistic?.new_violations ?? 0}
 				</div>
 				<div className="protection-statistic-stat-label">{t(`new`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">
 				<div className="protection-statistic-stat-number">
-					0
+					{violationStatistic?.in_progress_violations ?? 0}
 				</div>
 				<div className="protection-statistic-stat-label">{t(`in-progress`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">
-				<div className="protection-statistic-stat-number">0</div>
+				<div className="protection-statistic-stat-number">
+					{violationStatistic?.resolved_violations ?? 0}
+				</div>
 				<div className="protection-statistic-stat-label">{t('it-decided')}</div>
 			</div>
 		</div>