add tracking statistic

src/app/actions/trackingActions.ts

@@ -203,3 +203,39 @@ export async function fetchHistoryView(page: number, size: number) {
 		return null;
 	}
 }
+
+export async function fetchTrackingStats() {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 30028,
+				message_body: {
+					token: token,
+					action: 'view_stats'
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}

src/app/hooks/react-query/useTrackingStats.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchTrackingStats } from '@/app/actions/trackingActions';
+
+export interface useTrackingStats {
+	totalViews: number,
+	uniqueIps: number,
+	uniqueUsers: number,
+	documentsCount: number,
+	uniqueCountryCount: number,
+	uniqueCityCount: number,
+	firstViewDate: string,
+	lastViewDate: string
+}
+
+export const useTrackingStats = () => {
+	return useQuery({
+		queryKey: ['trackingStats'],
+		queryFn: () => {
+			return fetchTrackingStats()
+		},
+		select: (data: useTrackingStats | null) => {
+			if (!data) {
+				return null
+			}
+			return data;
+		},
+		retry: false
+	});
+};

src/app/ui/icons/icons.tsx

@@ -283,3 +283,11 @@ export function IconGlobe() {
 		</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>