feat: add sorting icons to inventory table headers and disable sorting for edit/delete columns

frontend/app/(sidebar)/inventory/page.tsx

@@ -35,6 +35,7 @@ import {
   PaginationItem,
 } from "@/components/ui/pagination";
 import { Search } from "lucide-react";
+import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 
 import { Badge } from "@/components/ui/badge";
 import { fetchInventoryItems } from "@/api/inventory";
@@ -102,11 +103,17 @@ export default function InventoryPage() {
           | undefined;
       }) => <Badge>{info.getValue()}</Badge>,
     },
-    { accessorKey: "edit", header: "Edit", cell: () => <EditInventoryItem /> },
+    {
+      accessorKey: "edit",
+      header: "Edit",
+      cell: () => <EditInventoryItem />,
+      enableSorting: false,
+    },
     {
       accessorKey: "delete",
       header: "Delete",
       cell: () => <DeleteInventoryItem />,
+      enableSorting: false,
     },
   ];
 
@@ -158,11 +165,26 @@ export default function InventoryPage() {
                       <TableHead
                         key={header.id}
                         onClick={header.column.getToggleSortingHandler()}
+                        className="cursor-pointer "
                       >
+                        <div className="flex items-center">
                           {flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )}
+                          {header.column.getCanSort() &&
+                            !header.column.columnDef.enableSorting && (
+                              <span className="ml-2">
+                                {header.column.getIsSorted() === "desc" ? (
+                                  <FaSortDown />
+                                ) : header.column.getIsSorted() === "asc" ? (
+                                  <FaSortUp />
+                                ) : (
+                                  <FaSort />
+                                )}
+                              </span>
+                            )}
+                        </div>
                       </TableHead>
                     ))}
                   </TableRow>

frontend/package.json

@@ -46,6 +46,7 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-icons": "^5.5.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",

frontend/pnpm-lock.yaml

@@ -116,6 +116,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.54.2
     version: 7.54.2(react@19.0.0)
+  react-icons:
+    specifier: ^5.5.0
+    version: 5.5.0(react@19.0.0)
   recharts:
     specifier: ^2.15.1
     version: 2.15.1(react-dom@19.0.0)(react@19.0.0)
@@ -3996,6 +3999,14 @@ packages:
       react: 19.0.0
     dev: false
 
+  /react-icons@5.5.0(react@19.0.0):
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 19.0.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}