From e004c62941e5e04655e70f179d19f5a5920258fb Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Mon, 31 Mar 2025 21:53:09 +0700
Subject: [PATCH] feat: add sorting icons to inventory table headers and
 disable sorting for edit/delete columns

---
 frontend/app/(sidebar)/inventory/page.tsx | 32 +++++++++++++++++++----
 frontend/package.json                     |  1 +
 frontend/pnpm-lock.yaml                   | 11 ++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/app/(sidebar)/inventory/page.tsx b/frontend/app/(sidebar)/inventory/page.tsx
index ff857f7..ed25255 100644
--- a/frontend/app/(sidebar)/inventory/page.tsx
+++ b/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 "
                       >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                        <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>
diff --git a/frontend/package.json b/frontend/package.json
index 6dd6b31..a1c4030 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index f09642c..5b587b5 100644
--- a/frontend/pnpm-lock.yaml
+++ b/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==}