feat(tables): implement sortable columns across various table components

- Added TableSortProvider to manage sorting state in AdminsTable, CmsTable, CompaniesTable, CustomersTable, TendersTable, and CompanyCategoriesTable.
- Enhanced TableHead component to support sortable columns with visual indicators for sort direction.
- Introduced columnSortKeys and columnDefaultOrder mappings in respective table presenters to define sortable fields and default sorting behavior.
- Updated useCompanyListPresenter, useCmsTablePresenter, useCustomerListPresenter, useTenderListPresenter, and useCompanyCategoriesPresenter to handle sorting logic and state management.
- Improved user experience by allowing dynamic sorting of table data based on user interactions.

src/components/Tables/admins/index.tsx

@@ -22,6 +22,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableSortProvider,
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { AdminStatus } from "@/constants/enums";
@@ -41,6 +42,11 @@ const AdminsTable = () => {
     isChangeStatusModalOpen,
     setIsChangeStatusModalOpen,
     columns,
+    columnSortKeys,
+    columnDefaultOrder,
+    sortBy,
+    sortOrder,
+    handleSortChange,
     changeStatus,
     currentUser,
     setStatus,
@@ -86,18 +92,29 @@ const AdminsTable = () => {
         onClearAll={clearAllFilters}
       />
       <div ref={tableSectionRef}>
+        <TableSortProvider
+          sortKey={sortBy}
+          sortOrder={sortOrder}
+          onSortChange={handleSortChange}
+        >
         <Table data-cy="admins-table">
           <TableHeader>
             <TableRow className="border-none uppercase [&>th]:text-start">
-              {columns.map((column, index) => (
-                <TableHead
-                  key={column}
-                  colSpan={100}
-                  data-cy={`admins-table-header-${index}`}
-                >
-                  {column}
-                </TableHead>
-              ))}
+              {columns.map((column, index) => {
+                const sortKey = columnSortKeys[column];
+                return (
+                  <TableHead
+                    key={column}
+                    colSpan={100}
+                    sortable={Boolean(sortKey)}
+                    sortKey={sortKey}
+                    defaultSortOrder={columnDefaultOrder[column]}
+                    data-cy={`admins-table-header-${index}`}
+                  >
+                    {column}
+                  </TableHead>
+                );
+              })}
             </TableRow>
           </TableHeader>
 
@@ -202,6 +219,7 @@ const AdminsTable = () => {
             </TableBody>
           )}
         </Table>
+        </TableSortProvider>
       </div>
       <Modal
         isOpen={isChangeStatusModalOpen}

src/components/Tables/admins/useAdminsPresenter.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { SortDirection } from "@/components/ui/tableSortContext";
 import { apiDefaultParams } from "@/constants/Api_Params";
 import { AdminStatus } from "@/constants/enums";
 import {
@@ -10,7 +11,11 @@ import {
 } from "@/hooks/queries";
 import { IUser, TChangeAdminStatusCredentials } from "@/lib/api";
 import { useHybridPagination } from "@/hooks/useHybridPagination";
-import { deleteEmptyKeys, getPaginatedRowNumber } from "@/utils/shared";
+import {
+  buildQueryString,
+  deleteEmptyKeys,
+  getPaginatedRowNumber,
+} from "@/utils/shared";
 import gsap from "gsap";
 import { useIsMutating } from "@tanstack/react-query";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -225,12 +230,49 @@ export const useAdminsPresenter = () => {
     "actions",
   ];
 
+  /** Column label → BSON `sort_by` field. */
+  const columnSortKeys: Record<string, string> = {
+    "full name": "full_name",
+    email: "email",
+    username: "username",
+    status: "status",
+  };
+
+  /** First-click direction per column. */
+  const columnDefaultOrder: Record<string, SortDirection> = {
+    "full name": "asc",
+    email: "asc",
+    username: "asc",
+  };
+
+  const sortBy = (params.sort_by as string) ?? "created_at";
+  const sortOrder = (params.sort_order as SortDirection) ?? "desc";
+
+  const handleSortChange = useCallback(
+    (key: string, order: SortDirection) => {
+      const newParams = buildFirstPageParams({
+        ...params,
+        sort_by: key,
+        sort_order: order,
+      });
+      const cleanedParams = deleteEmptyKeys(newParams);
+      const queryString = buildQueryString(cleanedParams);
+      router.push(`${pathName}?${queryString}`);
+    },
+    [buildFirstPageParams, params, pathName, router],
+  );
+
   return {
     allUsers: usersList,
     usersList,
     setFilterValue,
     metadata,
     columns,
+    columnSortKeys,
+    columnDefaultOrder,
+    sortBy,
+    sortOrder,
+    handleSortChange,
     isPending,
     onConfirmDelete,
     isModalOpen,