update do pick confirm

src/components/FinishedGoodSearch/FinishedGoodFloorLanePanel.tsx

@@ -57,72 +57,119 @@ const FinishedGoodFloorLanePanel: React.FC<Props> = ({ onPickOrderAssigned, onSw
     loadSummaries();
   }, [loadSummaries]);
 
-    const handleAssignByLane = useCallback(async (
-      storeId: string, 
-      truckDepartureTime: string, 
-      truckLanceCode: string,
-      requiredDate: string
+  const handleAssignByLane = useCallback(async (
+    storeId: string, 
+    truckDepartureTime: string, 
+    truckLanceCode: string,
+    requiredDate: string
 
-    ) => {
-      if (!currentUserId) {
-        console.error("Missing user id in session");
-        return;
-      }
-      let dateParam: string | undefined;
-      if (requiredDate === "today") {
-        dateParam = dayjs().format('YYYY-MM-DD');
-      } else if (requiredDate === "tomorrow") {
-        dateParam = dayjs().add(1, 'day').format('YYYY-MM-DD');
-      } else if (requiredDate === "dayAfterTomorrow") {
-        dateParam = dayjs().add(2, 'day').format('YYYY-MM-DD');
-      }
-      setIsAssigning(true);
-      try {
-        const res = await assignByLane(currentUserId, storeId, truckLanceCode, truckDepartureTime, dateParam);
-      
-      if (res.code === "SUCCESS") {
-        console.log(" Successfully assigned pick order from lane", truckLanceCode);
-        window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
-        loadSummaries(); // 刷新按钮状态
-        onPickOrderAssigned?.();
-        onSwitchToDetailTab?.();
-      } else if (res.code === "USER_BUSY") {
-        Swal.fire({
-          icon: "warning",
-          title: t("Warning"),
-          text: t("You already have a pick order in progess. Please complete it first before taking next pick order."),
-          confirmButtonText: t("Confirm"),
-          confirmButtonColor: "#8dba00"
-        });
-        window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
-      } else if (res.code === "NO_ORDERS") {
-        Swal.fire({
-          icon: "info",
-          title: t("Info"),
-          text: t("No available pick order(s) for this lane."),
-          confirmButtonText: t("Confirm"),
-          confirmButtonColor: "#8dba00"
-        });
-      } else {
-        console.log("ℹ️ Assignment result:", res.message);
-      }
-    } catch (error) {
-      console.error("❌ Error assigning by lane:", error);
+  ) => {
+    if (!currentUserId) {
+      console.error("Missing user id in session");
+      return;
+    }
+    let dateParam: string | undefined;
+    if (requiredDate === "today") {
+      dateParam = dayjs().format('YYYY-MM-DD');
+    } else if (requiredDate === "tomorrow") {
+      dateParam = dayjs().add(1, 'day').format('YYYY-MM-DD');
+    } else if (requiredDate === "dayAfterTomorrow") {
+      dateParam = dayjs().add(2, 'day').format('YYYY-MM-DD');
+    }
+    setIsAssigning(true);
+    try {
+      const res = await assignByLane(currentUserId, storeId, truckLanceCode, truckDepartureTime, dateParam);
+    
+    if (res.code === "SUCCESS") {
+      console.log(" Successfully assigned pick order from lane", truckLanceCode);
+      window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
+      loadSummaries(); // 刷新按钮状态
+      onPickOrderAssigned?.();
+      onSwitchToDetailTab?.();
+    } else if (res.code === "USER_BUSY") {
       Swal.fire({
-        icon: "error",
-        title: t("Error"),
-        text: t("Error occurred during assignment."),
+        icon: "warning",
+        title: t("Warning"),
+        text: t("You already have a pick order in progess. Please complete it first before taking next pick order."),
         confirmButtonText: t("Confirm"),
         confirmButtonColor: "#8dba00"
       });
-    } finally {
-      setIsAssigning(false);
+      window.dispatchEvent(new CustomEvent('pickOrderAssigned'));
+    } else if (res.code === "NO_ORDERS") {
+      Swal.fire({
+        icon: "info",
+        title: t("Info"),
+        text: t("No available pick order(s) for this lane."),
+        confirmButtonText: t("Confirm"),
+        confirmButtonColor: "#8dba00"
+      });
+    } else {
+      console.log("ℹ️ Assignment result:", res.message);
     }
-  }, [currentUserId, t, selectedDate, onPickOrderAssigned, onSwitchToDetailTab, loadSummaries]);
+  } catch (error) {
+    console.error("❌ Error assigning by lane:", error);
+    Swal.fire({
+      icon: "error",
+      title: t("Error"),
+      text: t("Error occurred during assignment."),
+      confirmButtonText: t("Confirm"),
+      confirmButtonColor: "#8dba00"
+    });
+  } finally {
+    setIsAssigning(false);
+  }
+}, [currentUserId, t, selectedDate, onPickOrderAssigned, onSwitchToDetailTab, loadSummaries]);
 
-  const getDateLabel = (offset: number) => {
-    return dayjs().add(offset, 'day').format('YYYY-MM-DD');
-  };
+const handleLaneButtonClick = useCallback(async (
+  storeId: string,
+  truckDepartureTime: string,
+  truckLanceCode: string,
+  requiredDate: string,
+  unassigned: number,
+  total: number
+) => {
+  // Format the date for display
+  let dateDisplay: string;
+  if (requiredDate === "today") {
+    dateDisplay = dayjs().format('YYYY-MM-DD');
+  } else if (requiredDate === "tomorrow") {
+    dateDisplay = dayjs().add(1, 'day').format('YYYY-MM-DD');
+  } else if (requiredDate === "dayAfterTomorrow") {
+    dateDisplay = dayjs().add(2, 'day').format('YYYY-MM-DD');
+  } else {
+    dateDisplay = requiredDate;
+  }
+
+  // Show confirmation dialog
+  const result = await Swal.fire({
+    title: t("Confirm Assignment"),
+    html: `
+      <div style="text-align: left; padding: 10px 0;">
+        <p><strong>${t("Store")}:</strong> ${storeId}</p>
+        <p><strong>${t("Lane Code")}:</strong> ${truckLanceCode}</p>
+        <p><strong>${t("Departure Time")}:</strong> ${truckDepartureTime}</p>
+        <p><strong>${t("Required Date")}:</strong> ${dateDisplay}</p>
+        <p><strong>${t("Available Orders")}:</strong> ${unassigned}/${total}</p>
+      </div>
+    `,
+    icon: "question",
+    showCancelButton: true,
+    confirmButtonText: t("Confirm"),
+    cancelButtonText: t("Cancel"),
+    confirmButtonColor: "#8dba00",
+    cancelButtonColor: "#F04438",
+    reverseButtons: true
+  });
+
+  // Only proceed if user confirmed
+  if (result.isConfirmed) {
+    await handleAssignByLane(storeId, truckDepartureTime, truckLanceCode, requiredDate);
+  }
+}, [handleAssignByLane, t]);
+
+const getDateLabel = (offset: number) => {
+  return dayjs().add(offset, 'day').format('YYYY-MM-DD');
+};
 
   // Flatten rows to create one box per lane
   const flattenRows = (rows: any[]) => {
@@ -296,7 +343,7 @@ const FinishedGoodFloorLanePanel: React.FC<Props> = ({ onPickOrderAssigned, onSw
                           variant="outlined"
                           size="medium"
                           disabled={item.lane.unassigned === 0 || isAssigning}
-                          onClick={() => handleAssignByLane("2/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate)}
+                          onClick={() => handleLaneButtonClick("2/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate, item.lane.unassigned, item.lane.total)}
                           sx={{
                             flex: 1,
                             fontSize: '1.1rem',
@@ -396,7 +443,7 @@ const FinishedGoodFloorLanePanel: React.FC<Props> = ({ onPickOrderAssigned, onSw
                           variant="outlined"
                           size="medium"
                           disabled={item.lane.unassigned === 0 || isAssigning}
-                          onClick={() => handleAssignByLane("4/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate)}
+                          onClick={() => handleLaneButtonClick("4/F", item.truckDepartureTime, item.lane.truckLanceCode, selectedDate, item.lane.unassigned, item.lane.total)}
                           sx={{
                             flex: 1,
                             fontSize: '1.1rem',

src/i18n/zh/do.json

@@ -11,11 +11,18 @@
     "Status": "來貨狀態",
     "Order Date From": "訂單日期",
     "Delivery Order Code": "送貨訂單編號",
+    "Select Remark": "選擇備註",
+    "Confirm Assignment": "確認分配",
+    "Required Date": "所需日期",
+    "Store": "位置",
+    "Available Orders": "可用訂單",
+    "Just Complete": "已完成",
     "Order Date To": "訂單日期至",
     "Warning: Some delivery orders do not have matching trucks for the target date.": "警告：部分送貨訂單於目標日期沒有可匹配的車輛。",
     "Truck Availability Warning": "車輛可用性警告",
     "Problem DO(s): ": "問題送貨訂單",
     "Fetching all matching records...": "正在獲取所有匹配的記錄...",
+    "Progress": "進度",
     "Loading...": "正在加載...",
     "Available Trucks": "可用車輛",
     "No trucks available": "沒有車輛可用",

src/i18n/zh/pickOrder.json

@@ -13,7 +13,14 @@
         "Escalated": "上報狀態",
         "NotEscalated": "無上報",
         "Assigned To": "已分配",
+        "Progress": "進度",
+        "Select Remark": "選擇備註",
+        "Just Complete": "已完成",
         "Skip": "跳過",
+        "Confirm Assignment": "確認分配",
+        "Required Date": "所需日期",
+        "Store": "位置",
+        "Available Orders": "可用訂單",
         "Fetching all matching records...": "正在獲取所有匹配的記錄...",
         "Edit": "改數",
         "Just Completed": "已完成",