fix sorting for document view

src/app/actions/trackingActions.ts

@@ -166,7 +166,13 @@ export async function filePermisionChange(fileId: string, permissions: boolean)
 	}
 }
 
-export async function fetchHistoryView(page: number, size: number, locale: string) {
+export async function fetchHistoryView(
+	page: number,
+	size: number,
+	locale: string,
+	sortDirection?: 'asc' | 'desc',
+	sortBy?: string
+) {
 	const token = await getSessionData('token');
 
 	try {
@@ -180,7 +186,9 @@ export async function fetchHistoryView(page: number, size: number, locale: strin
 					action: 'history_view',
 					page: page,
 					size: size,
-					locale: locale
+					locale: locale,
+					sort_direction: sortDirection,
+					sort_by: sortBy
 				}
 			}),
 			headers: {

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

@@ -20,11 +20,17 @@ export interface UseHistoryView {
 	uniqueCountryCount: number;
 }
 
-export const useHistoryView = (page: number, size: number, locale: string) => {
+export const useHistoryView = (
+	page: number,
+	size: number,
+	locale: string,
+	sortDirection?: 'asc' | 'desc',
+	sortBy?: string
+) => {
 	return useQuery({
-		queryKey: ['violationStatistic', page, size, locale],
+		queryKey: ['violationStatistic', page, size, locale, sortDirection, sortBy],
 		queryFn: () => {
-			return fetchHistoryView(page, size, locale)
+			return fetchHistoryView(page, size, locale, sortDirection, sortBy)
 		},
 		select: (data: UseHistoryView | null) => {
 			if (!data) {

src/app/ui/tracking-page/tracking-history-view.tsx

@@ -2,7 +2,7 @@
 
 import { useHistoryView, HistoryViewItem } from '@/app/hooks/react-query/useHistoryView';
 import { useEffect, useState, useMemo } from 'react';
-import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconLink } from '@/app/ui/icons/icons';
+import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter } from '@/app/ui/icons/icons';
 import DropDownList from '@/app/components/DropDownList';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, SortingState, ColumnDef } from '@tanstack/react-table';
 import { formatDate, formatDateTime } from '@/app/lib/formatDate';
@@ -19,6 +19,25 @@ export function TrackingHistoryView() {
 	const t = useTranslations('Global');
 	const locale = useLocale();
 
+	const getSortParams = useMemo(() => {
+		if (sorting.length === 0) {
+			return { sortBy: '', sortOrder: undefined };
+		}
+
+		const sort = sorting[0];
+		const sortByMap: Record<string, string> = {
+			'document': 'docName',
+			'view_date': 'createdAt',
+			'viewer': 'viewerName',
+			'location': locale === 'ru' ? 'geoNameRu' : 'geoNameEn'
+		};
+
+		return {
+			sortBy: sortByMap[sort.id] || sort.id,
+			sortOrder: sort.desc ? 'desc' : 'asc' as 'desc' | 'asc'
+		};
+	}, [sorting]);
+
 	const {
 		data: apiResponse,
 		isLoading,
@@ -26,7 +45,7 @@ export function TrackingHistoryView() {
 		isError,
 		error,
 		refetch
-	} = useHistoryView(pagination.pageIndex, pagination.pageSize, locale);
+	} = useHistoryView(pagination.pageIndex, pagination.pageSize, locale, getSortParams.sortOrder, getSortParams.sortBy);
 
 	const tableData = apiResponse?.history || [];
 	const totalItems = apiResponse?.history.length || 0;
@@ -65,14 +84,15 @@ export function TrackingHistoryView() {
 		return nameWithoutExtension.substring(0, maxNameLength) + '...';
 	}
 
-	const editLocationName = (location: string | undefined | null, place: 'city' | 'country') => {
+	const editLocationName = (location: string | undefined | null) => {
-		let notDefinedPlace = (place === 'city') ? t('not-defined-city') : t('not-defined-country');
+		if (!location) return '';
-		location === 'UNKNOWN' ? notDefinedPlace : location;
+
-		let response = notDefinedPlace;
+		const [city, country] = location.split('/');
-		if (location !== 'UNKNOWN' && location !== undefined && location !== null) {
+
-			response = location;
+		const translatedCity = city === 'unknow' ? t('not-defined-city') : city;
-		}
+		const translatedCountry = country === 'unknow' ? t('not-defined-country') : country;
-		return response;
+
+		return `${translatedCity}/${translatedCountry}`;
 	}
 
 	const columns = useMemo<ColumnDef<HistoryViewItem>[]>(
@@ -220,10 +240,10 @@ export function TrackingHistoryView() {
 				cell: ({ row }) => {
 					return (
 						<div className="text-center font-semibold table-item">
-							{row.original.city === 'UNKNOWN' && row.original.country === 'UNKNOWN' ? (
+							{row.original.country === 'unknow/unknow' ? (
 								t('not-defined')
 							) : (
-								`${editLocationName(row.original.city, 'city')} / ${editLocationName(row.original.country, 'country')}`
+								`${editLocationName(row.original.country)}`
 							)}
 						</div>
 					)