feat: add server-side table sorting

src/app/(modules)/roles/hooks/useRoleQueries.ts

@@ -1,9 +1,11 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import { toast } from 'sonner';
 
+import { getServerSortParams } from '@/components/data-table/sorting';
 import { mapPermissionTree } from '@/components/permission-tree';
 import { permissionService, roleService } from '@/services/api';
 import type { Role, RoleListParams } from '@/types';
@@ -16,6 +18,7 @@ interface UseRolesQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: StatusFilter;
+  sorting: SortingState;
 }
 
 function buildRoleListParams({
@@ -23,22 +26,22 @@ function buildRoleListParams({
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UseRolesQueryParams): RoleListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     effective_status: statusFilter === 'all' ? undefined : statusFilter === 'active',
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 
 export function useRolesQuery(params: UseRolesQueryParams) {
-  const { skip, limit, searchTerm, statusFilter } = params;
+  const { skip, limit, searchTerm, statusFilter, sorting } = params;
   const listParams = useMemo(
-    () => buildRoleListParams({ skip, limit, searchTerm, statusFilter }),
-    [limit, searchTerm, skip, statusFilter],
+    () => buildRoleListParams({ skip, limit, searchTerm, statusFilter, sorting }),
+    [limit, searchTerm, skip, sorting, statusFilter],
   );
 
   return useQuery({