From 4cb751740c6c1046877941f6d34afe54486f81f9 Mon Sep 17 00:00:00 2001
From: "Tommy\\2Fi-Staff" <tommy.lu@2fi-solutions.com.hk>
Date: Sun, 18 Jan 2026 18:39:34 +0800
Subject: [PATCH] update shop and truck lazy load

---
 src/components/Shop/Shop.tsx      |  6 ---
 src/components/Shop/TruckLane.tsx | 86 +++++++++++++------------------
 2 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/src/components/Shop/Shop.tsx b/src/components/Shop/Shop.tsx
index 07b07cb..85a6601 100644
--- a/src/components/Shop/Shop.tsx
+++ b/src/components/Shop/Shop.tsx
@@ -303,12 +303,6 @@ const Shop: React.FC = () => {
     }
   }, [searchParams]);
 
-  useEffect(() => {
-    if (activeTab === 0) {
-      fetchAllShops();
-    }
-  }, [activeTab]);
-
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
     // Update URL to reflect the selected tab
diff --git a/src/components/Shop/TruckLane.tsx b/src/components/Shop/TruckLane.tsx
index efe0bc5..146318f 100644
--- a/src/components/Shop/TruckLane.tsx
+++ b/src/components/Shop/TruckLane.tsx
@@ -30,7 +30,7 @@ import {
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import SaveIcon from "@mui/icons-material/Save";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { findAllUniqueTruckLaneCombinationsClient, createTruckWithoutShopClient } from "@/app/api/shop/client";
@@ -50,7 +50,7 @@ const TruckLane: React.FC = () => {
   const { t } = useTranslation("common");
   const router = useRouter();
   const [truckData, setTruckData] = useState<Truck[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [page, setPage] = useState(0);
@@ -65,32 +65,6 @@ const TruckLane: React.FC = () => {
   const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
   const [snackbarMessage, setSnackbarMessage] = useState<string>("");
 
-  useEffect(() => {
-    const fetchTruckLanes = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const data = await findAllUniqueTruckLaneCombinationsClient() as Truck[];
-        // Get unique truckLanceCodes only
-        const uniqueCodes = new Map<string, Truck>();
-        (data || []).forEach((truck) => {
-          const code = String(truck.truckLanceCode || "").trim();
-          if (code && !uniqueCodes.has(code)) {
-            uniqueCodes.set(code, truck);
-          }
-        });
-        setTruckData(Array.from(uniqueCodes.values()));
-      } catch (err: any) {
-        console.error("Failed to load truck lanes:", err);
-        setError(err?.message ?? String(err) ?? t("Failed to load truck lanes"));
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchTruckLanes();
-  }, [t]);
-
   // Client-side filtered rows (contains-matching)
   const filteredRows = useMemo(() => {
     const fKeys = Object.keys(filters).filter((k) => String(filters[k] ?? "").trim() !== "");
@@ -125,9 +99,27 @@ const TruckLane: React.FC = () => {
     return filteredRows.slice(startIndex, startIndex + rowsPerPage);
   }, [filteredRows, page, rowsPerPage]);
 
-  const handleSearch = (inputs: Record<string, string>) => {
-    setFilters(inputs);
-    setPage(0); // Reset to first page when searching
+  const handleSearch = async (inputs: Record<string, string>) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await findAllUniqueTruckLaneCombinationsClient() as Truck[];
+      const uniqueCodes = new Map<string, Truck>();
+      (data || []).forEach((truck) => {
+        const code = String(truck.truckLanceCode ?? "").trim();
+        if (code && !uniqueCodes.has(code)) {
+          uniqueCodes.set(code, truck);
+        }
+      });
+      setTruckData(Array.from(uniqueCodes.values()));
+      setFilters(inputs);
+      setPage(0);
+    } catch (err: any) {
+      console.error("Failed to load truck lanes:", err);
+      setError(err?.message ?? String(err) ?? t("Failed to load truck lanes"));
+    } finally {
+      setLoading(false);
+    }
   };
 
   const handlePageChange = (event: unknown, newPage: number) => {
@@ -233,24 +225,6 @@ const TruckLane: React.FC = () => {
     }
   };
 
-  if (loading) {
-    return (
-      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Box>
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      </Box>
-    );
-  }
-
   const criteria: Criterion<SearchParamNames>[] = [
     { type: "text", label: t("TruckLance Code"), paramName: "truckLanceCode" },
     { type: "time", label: t("Departure Time"), paramName: "departureTime" },
@@ -265,6 +239,7 @@ const TruckLane: React.FC = () => {
             criteria={criteria as Criterion<string>[]}
             onSearch={handleSearch}
             onReset={() => {
+              setTruckData([]);
               setFilters({});
             }}
           />
@@ -284,7 +259,17 @@ const TruckLane: React.FC = () => {
               {t("Add Truck Lane")}
             </Button>
           </Box>
-          
+          {error && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {error}
+            </Alert>
+          )}
+
+          {loading ? (
+            <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+              <CircularProgress />
+            </Box>
+          ) : (
           <TableContainer component={Paper}>
             <Table>
               <TableHead>
@@ -356,6 +341,7 @@ const TruckLane: React.FC = () => {
               rowsPerPageOptions={[5, 10, 25, 50]}
             />
           </TableContainer>
+          )}
         </CardContent>
       </Card>