From 329830e09b0951916172f9276fb2f704011ccc99 Mon Sep 17 00:00:00 2001
From: "B.E.N.S.O.N" <bensonhkbus@gmail.com>
Date: Tue, 3 Mar 2026 16:46:29 +0800
Subject: [PATCH] New Goods Receipt Status Dashboard

---
 .../GoodsReceiptStatusNew.tsx                 | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatusNew.tsx b/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatusNew.tsx
index e19a74f..e763a8c 100644
--- a/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatusNew.tsx
+++ b/src/components/DashboardPage/goodsReceiptStatus/GoodsReceiptStatusNew.tsx
@@ -67,12 +67,23 @@ const GoodsReceiptStatusNew: React.FC = () => {
     return selectedDate.format('YYYY-MM-DD');
   }, [selectedDate]);
 
+  // Sort rows by supplier code alphabetically (A -> Z)
+  const sortedData = useMemo(() => {
+    return [...data].sort((a, b) => {
+      const codeA = (a.supplierCode || '').toUpperCase();
+      const codeB = (b.supplierCode || '').toUpperCase();
+      if (codeA < codeB) return -1;
+      if (codeA > codeB) return 1;
+      return 0;
+    });
+  }, [data]);
+
   const totalStatistics = useMemo(() => {
     // Overall statistics should count ALL POs, including those hidden from the table
-    const totalReceived = data.reduce((sum, row) => sum + (row.noOfOrdersReceivedAtDock || 0), 0);
-    const totalExpected = data.reduce((sum, row) => sum + (row.expectedNoOfDelivery || 0), 0);
+    const totalReceived = sortedData.reduce((sum, row) => sum + (row.noOfOrdersReceivedAtDock || 0), 0);
+    const totalExpected = sortedData.reduce((sum, row) => sum + (row.expectedNoOfDelivery || 0), 0);
     return { received: totalReceived, expected: totalExpected };
-  }, [data]);
+  }, [sortedData]);
 
   type StatusKey = 'pending' | 'receiving' | 'accepted';
 
@@ -205,7 +216,7 @@ const GoodsReceiptStatusNew: React.FC = () => {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {data.length === 0 ? (
+                  {sortedData.length === 0 ? (
                     <TableRow>
                       <TableCell colSpan={4} align="center">
                         <Typography variant="body2" color="text.secondary">
@@ -214,7 +225,7 @@ const GoodsReceiptStatusNew: React.FC = () => {
                       </TableCell>
                     </TableRow>
                   ) : (
-                    data
+                    sortedData
                       .filter((row) => !row.hideFromDashboard) // hide completed/rejected POs from table only
                       .map((row, index) => (
                       <TableRow