feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目

resources/js/Components/Warehouse/TransferOrderDialog.tsx

@@ -18,13 +18,7 @@ import {
 import { Label } from "@/Components/ui/label";
 import { Input } from "@/Components/ui/input";
 import { Button } from "@/Components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/select";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Textarea } from "@/Components/ui/textarea";
 import { toast } from "sonner";
 import { Warehouse, TransferOrder, TransferOrderStatus } from "@/types/warehouse";
@@ -194,7 +188,7 @@ export default function TransferOrderDialog({
               <Label htmlFor="sourceWarehouse">
                 來源倉庫 <span className="text-red-500">*</span>
               </Label>
-              <Select
+              <SearchableSelect
                 value={formData.sourceWarehouseId}
                 onValueChange={(value) =>
                   setFormData({
@@ -207,44 +201,28 @@ export default function TransferOrderDialog({
                   })
                 }
                 disabled={!!order}
-              >
-                <SelectTrigger id="sourceWarehouse">
-                  <SelectValue placeholder="選擇來源倉庫" />
-                </SelectTrigger>
-                <SelectContent>
-                  {warehouses.map((warehouse) => (
-                    <SelectItem key={warehouse.id} value={warehouse.id}>
-                      {warehouse.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                options={warehouses.map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
+                placeholder="選擇來源倉庫"
+                searchPlaceholder="搜尋倉庫..."
+              />
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="targetWarehouse">
                 目標倉庫 <span className="text-red-500">*</span>
               </Label>
-              <Select
+              <SearchableSelect
                 value={formData.targetWarehouseId}
                 onValueChange={(value) =>
                   setFormData({ ...formData, targetWarehouseId: value })
                 }
                 disabled={!!order}
-              >
-                <SelectTrigger id="targetWarehouse">
-                  <SelectValue placeholder="選擇目標倉庫" />
-                </SelectTrigger>
-                <SelectContent>
-                  {warehouses
-                    .filter((w) => w.id !== formData.sourceWarehouseId)
-                    .map((warehouse) => (
-                      <SelectItem key={warehouse.id} value={warehouse.id}>
-                        {warehouse.name}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
+                options={warehouses
+                  .filter((w) => w.id !== formData.sourceWarehouseId)
+                  .map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
+                placeholder="選擇目標倉庫"
+                searchPlaceholder="搜尋倉庫..."
+              />
             </div>
           </div>
 
@@ -253,7 +231,7 @@ export default function TransferOrderDialog({
             <Label htmlFor="product">
               撥補商品 <span className="text-red-500">*</span>
             </Label>
-            <Select
+            <SearchableSelect
               value={
                 formData.productId && formData.batchNumber
                   ? `${formData.productId}|||${formData.batchNumber}`
@@ -261,28 +239,14 @@ export default function TransferOrderDialog({
               }
               onValueChange={handleProductChange}
               disabled={!formData.sourceWarehouseId || !!order}
-            >
-              <SelectTrigger id="product">
-                <SelectValue placeholder="選擇商品與批號" />
-              </SelectTrigger>
-              <SelectContent>
-                {availableProducts.length === 0 ? (
-                  <div className="p-2 text-sm text-gray-500 text-center">
-                    {formData.sourceWarehouseId ? "該倉庫無可用庫存" : "請先選擇來源倉庫"}
-                  </div>
-                ) : (
-                  availableProducts.map((product) => (
-                    <SelectItem
-                      key={`${product.productId}|||${product.batchNumber}`}
-                      value={`${product.productId}|||${product.batchNumber}`}
-                    >
-                      {product.productName} (庫存:{" "}
-                      {product.availableQty} {product.unit})
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
+              options={availableProducts.map((product) => ({
+                label: `${product.productName} (庫存: ${product.availableQty} ${product.unit})`,
+                value: `${product.productId}|||${product.batchNumber}`,
+              }))}
+              placeholder="選擇商品與批號"
+              searchPlaceholder="搜尋商品..."
+              emptyText={formData.sourceWarehouseId ? "該倉庫無可用庫存" : "請先選擇來源倉庫"}
+            />
           </div>
 
           {/* 數量和日期 */}
@@ -329,22 +293,18 @@ export default function TransferOrderDialog({
           {order && (
             <div className="space-y-2">
               <Label htmlFor="status">狀態</Label>
-              <Select
+              <SearchableSelect
                 value={formData.status}
                 onValueChange={(value) =>
                   setFormData({ ...formData, status: value as TransferOrderStatus })
                 }
-              >
-                <SelectTrigger id="status">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="待處理">待處理</SelectItem>
-                  <SelectItem value="處理中">處理中</SelectItem>
-                  <SelectItem value="已完成">已完成</SelectItem>
-                  <SelectItem value="已取消">已取消</SelectItem>
-                </SelectContent>
-              </Select>
+                options={[
+                  { label: "待處理", value: "待處理" },
+                  { label: "處理中", value: "處理中" },
+                  { label: "已完成", value: "已完成" },
+                  { label: "已取消", value: "已取消" },
+                ]}
+              />
             </div>
           )}