add tracking statistic

src/app/ui/icons/icons.tsx

@@ -282,4 +282,12 @@ export function IconGlobe() {
 			<path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-7-.5-14.5T799-507q-5 29-27 48t-52 19h-80q-33 0-56.5-23.5T560-520v-40H400v-80q0-33 23.5-56.5T480-720h40q0-23 12.5-40.5T563-789q-20-5-40.5-8t-42.5-3q-134 0-227 93t-93 227h200q66 0 113 47t47 113v40H400v110q20 5 39.5 7.5T480-160Z" />
 		</svg>
 	)
+}
+
+export function IconCity() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon">
+			<path d="M120-120v-560h240v-80l120-120 120 120v240h240v400H120Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm240 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm240 480h80v-80h-80v80Zm0-160h80v-80h-80v80Z" />
+			</svg>
+	)
 }

src/app/ui/tracking-page/tracking-statistic.tsx

@@ -1,5 +1,11 @@
-import { IconLink, IconDocument, IconCheck, IconPerson, IconGlobe } from '@/app/ui/icons/icons';
+'use client'
+
+import {IconLink, IconDocument, IconCheck, IconPerson, IconGlobe, IconCity} from '@/app/ui/icons/icons';
+import { useTrackingStats } from '@/app/hooks/react-query/useTrackingStats';
+
 export function TrackingStatistic() {
+	const { data } = useTrackingStats();
+
 	return (
 		<div
 			className="general-statistic"
@@ -21,7 +27,7 @@ export function TrackingStatistic() {
 						<IconDocument />
 					</div>
 					<div className="general-statistic-item-val">
-						33
+						{data?.documentsCount ? data?.documentsCount : 0}
 					</div>
 					<div className="general-statistic-item-lbl">
 						Документов
@@ -31,29 +37,29 @@ export function TrackingStatistic() {
 					<div className="general-statistic-item-ico">
 						<IconLink />
 					</div><div className="general-statistic-item-val">
-						103
+						{data?.totalViews? data?.totalViews : 0}
 					</div>
 					<div className="general-statistic-item-lbl">
 						Открытий
 					</div>
 				</div>
-				<div className="general-statistic-item">
+{/* 				<div className="general-statistic-item">
 					<div className="general-statistic-item-ico">
 						<IconCheck />
 					</div>
 					<div className="general-statistic-item-val">
-						247
+						{data?.uniqueUsers ? data?.uniqueUsers : 0}
 					</div>
 					<div className="general-statistic-item-lbl">
-						Верификаций
+						Уникальных пользователей
 					</div>
-				</div>
+				</div> */}
 				<div className="general-statistic-item">
 					<div className="general-statistic-item-ico">
 						<IconPerson />
 					</div>
 					<div className="general-statistic-item-val">
-						27
+						{data?.uniqueIps ? data?.uniqueIps : 0}
 					</div>
 					<div className="general-statistic-item-lbl">
 						Уникальных IP
@@ -64,10 +70,21 @@ export function TrackingStatistic() {
 						<IconGlobe />
 					</div>
 					<div className="general-statistic-item-val">
-						7
+						{data?.uniqueCountryCount ? data?.uniqueCountryCount : 0}
 					</div>
 					<div className="general-statistic-item-lbl">
-						Стран
+						Уникальных стран
+					</div>
+				</div>
+				<div className="general-statistic-item">
+					<div className="general-statistic-item-ico">
+						<IconCity />
+					</div>
+					<div className="general-statistic-item-val">
+						{data?.uniqueCountryCount ? data?.uniqueCountryCount : 0}
+					</div>
+					<div className="general-statistic-item-lbl">
+						Уникальных городов
 					</div>
 				</div>
 			</div>