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