Make Truck Deatil better

src/components/Shop/TruckLane.tsx

@@ -188,6 +188,18 @@ const TruckLane: React.FC = () => {
       return;
     }
 
+    // Check if truckLanceCode already exists
+    const trimmedCode = newTruck.truckLanceCode.trim();
+    const existingTruck = truckData.find(
+      (truck) => String(truck.truckLanceCode || "").trim().toLowerCase() === trimmedCode.toLowerCase()
+    );
+
+    if (existingTruck) {
+      setSnackbarMessage(t("Truck lane code already exists. Please use a different code."));
+      setSnackbarOpen(true);
+      return;
+    }
+
     setSaving(true);
     setError(null);
     try {

src/components/Shop/TruckLaneDetail.tsx

@@ -407,12 +407,14 @@ const TruckLaneDetail: React.FC = () => {
           shopCode: String(matchingShop.code || ""),
         });
       } else {
+        // If no matching shop found, allow free text input for shop name
         setNewShop({
           ...newShop,
           shopName: newValue,
         });
       }
-    } else if (newValue === null) {
+    } else {
+      // Clear shop name when selection is cleared (but keep shop code if it exists)
       setNewShop({
         ...newShop,
         shopName: "",
@@ -431,14 +433,17 @@ const TruckLaneDetail: React.FC = () => {
           shopName: String(matchingShop.name || ""),
         });
       } else {
+        // If no matching shop found, still set the code (shouldn't happen with restricted selection)
         setNewShop({
           ...newShop,
           shopCode: newValue,
         });
       }
-    } else if (newValue === null) {
+    } else {
+      // Clear both fields when selection is cleared
       setNewShop({
         ...newShop,
+        shopName: "",
         shopCode: "",
       });
     }
@@ -633,7 +638,7 @@ const TruckLaneDetail: React.FC = () => {
         <CardContent>
           <Paper sx={{ p: 3 }}>
             <Grid container spacing={3}>
-              <Grid item xs={12} sm={6}>
+              <Grid item xs={12} sm={4}>
                 <Typography variant="subtitle2" color="text.secondary">
                   {t("TruckLance Code")}
                 </Typography>
@@ -642,7 +647,7 @@ const TruckLaneDetail: React.FC = () => {
                 </Typography>
               </Grid>
 
-              <Grid item xs={12} sm={6}>
+              <Grid item xs={12} sm={4}>
                 <Typography variant="subtitle2" color="text.secondary">
                   {t("Departure Time")}
                 </Typography>
@@ -655,7 +660,7 @@ const TruckLaneDetail: React.FC = () => {
                 </Typography>
               </Grid>
 
-              <Grid item xs={12} sm={6}>
+              <Grid item xs={12} sm={4}>
                 <Typography variant="subtitle2" color="text.secondary">
                   {t("Store ID")}
                 </Typography>
@@ -943,12 +948,13 @@ const TruckLaneDetail: React.FC = () => {
                 <Autocomplete
                   freeSolo
                   options={uniqueShopNames}
-                  value={newShop.shopName}
+                  value={newShop.shopName || null}
                   onChange={(event, newValue) => {
                     handleNewShopNameChange(newValue);
                   }}
                   onInputChange={(event, newInputValue, reason) => {
                     if (reason === 'input') {
+                      // Allow free text input for shop name
                       setNewShop({ ...newShop, shopName: newInputValue });
                     }
                   }}
@@ -966,17 +972,11 @@ const TruckLaneDetail: React.FC = () => {
               </Grid>
               <Grid item xs={12}>
                 <Autocomplete
-                  freeSolo
                   options={uniqueShopCodes}
-                  value={newShop.shopCode}
+                  value={newShop.shopCode || null}
                   onChange={(event, newValue) => {
                     handleNewShopCodeChange(newValue);
                   }}
-                  onInputChange={(event, newInputValue, reason) => {
-                    if (reason === 'input') {
-                      setNewShop({ ...newShop, shopCode: newInputValue });
-                    }
-                  }}
                   renderInput={(params) => (
                     <TextField
                       {...params}

src/i18n/en/common.json

@@ -29,5 +29,6 @@
     "Search or select shop code": "Search or select shop code",
     "Search or select remark": "Search or select remark",
     "Edit shop details": "Edit shop details",
-    "Add Shop to Truck Lane": "Add Shop to Truck Lane"
+    "Add Shop to Truck Lane": "Add Shop to Truck Lane",
+    "Truck lane code already exists. Please use a different code.": "Truck lane code already exists. Please use a different code."
 }

src/i18n/zh/common.json

@@ -400,5 +400,6 @@
     "Search or select shop code": "搜尋或選擇店鋪編號",
     "Search or select remark": "搜尋或選擇備註",
     "Edit shop details": "編輯店鋪詳情",
-    "Add Shop to Truck Lane": "新增店鋪至卡車路線"
+    "Add Shop to Truck Lane": "新增店鋪至卡車路線",
+    "Truck lane code already exists. Please use a different code.": "卡車路線編號已存在，請使用其他編號。"
 }