update general statistic and analytic

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