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

resources/js/Components/Product/ProductDialog.tsx

@@ -11,13 +11,7 @@ import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
 import { Textarea } from "@/Components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/select";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { useForm } from "@inertiajs/react";
 import { toast } from "sonner";
 import type { Product, Category } from "@/Pages/Product/Index";
@@ -123,21 +117,14 @@ export default function ProductDialog({
                 <Label htmlFor="category_id">
                   分類 <span className="text-red-500">*</span>
                 </Label>
-                <Select
+                <SearchableSelect
                   value={data.category_id}
                   onValueChange={(value) => setData("category_id", value)}
-                >
-                  <SelectTrigger id="category_id" className={errors.category_id ? "border-red-500" : ""}>
-                    <SelectValue placeholder="選擇分類" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {categories.map((category) => (
-                      <SelectItem key={category.id} value={category.id.toString()}>
-                        {category.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  options={categories.map((c) => ({ label: c.name, value: c.id.toString() }))}
+                  placeholder="選擇分類"
+                  searchPlaceholder="搜尋分類..."
+                  className={errors.category_id ? "border-red-500" : ""}
+                />
                 {errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
               </div>
 
@@ -188,42 +175,30 @@ export default function ProductDialog({
                 <Label htmlFor="base_unit_id">
                   基本庫存單位 <span className="text-red-500">*</span>
                 </Label>
-                <Select
+                <SearchableSelect
                   value={data.base_unit_id}
                   onValueChange={(value) => setData("base_unit_id", value)}
-                >
-                  <SelectTrigger id="base_unit_id" className={errors.base_unit_id ? "border-red-500" : ""}>
-                    <SelectValue placeholder="選擇單位" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {units.map((unit) => (
-                      <SelectItem key={unit.id} value={unit.id.toString()}>
-                        {unit.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  options={units.map((u) => ({ label: u.name, value: u.id.toString() }))}
+                  placeholder="選擇單位"
+                  searchPlaceholder="搜尋單位..."
+                  className={errors.base_unit_id ? "border-red-500" : ""}
+                />
                 {errors.base_unit_id && <p className="text-sm text-red-500">{errors.base_unit_id}</p>}
               </div>
 
               <div className="space-y-2">
                 <Label htmlFor="large_unit_id">大單位</Label>
-                <Select
+                <SearchableSelect
                   value={data.large_unit_id}
                   onValueChange={(value) => setData("large_unit_id", value)}
-                >
-                  <SelectTrigger id="large_unit_id" className={errors.large_unit_id ? "border-red-500" : ""}>
-                    <SelectValue placeholder="無" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="none">無</SelectItem>
-                    {units.map((unit) => (
-                      <SelectItem key={unit.id} value={unit.id.toString()}>
-                        {unit.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  options={[
+                    { label: "無", value: "none" },
+                    ...units.map((u) => ({ label: u.name, value: u.id.toString() }))
+                  ]}
+                  placeholder="無"
+                  searchPlaceholder="搜尋單位..."
+                  className={errors.large_unit_id ? "border-red-500" : ""}
+                />
                 {errors.large_unit_id && <p className="text-sm text-red-500">{errors.large_unit_id}</p>}
               </div>
 

resources/js/Components/PurchaseOrder/PurchaseOrderItemsTable.tsx

@@ -5,13 +5,7 @@
 import { Trash2 } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/Components/ui/select";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 import {
     Table,
     TableBody,
@@ -82,27 +76,18 @@ export function PurchaseOrderItemsTable({
                                         {isReadOnly ? (
                                             <span className="font-medium">{item.productName}</span>
                                         ) : (
-                                            <Select
+                                            <SearchableSelect
                                                 value={item.productId}
                                                 onValueChange={(value) =>
                                                     onItemChange?.(index, "productId", value)
                                                 }
                                                 disabled={isDisabled}
-                                            >
-                                                <SelectTrigger className="h-10 border-gray-200">
-                                                    <SelectValue placeholder="選擇商品" />
-                                                </SelectTrigger>
-                                                <SelectContent>
-                                                    {supplier?.commonProducts.map((product) => (
-                                                        <SelectItem key={product.productId} value={product.productId}>
-                                                            {product.productName}
-                                                        </SelectItem>
-                                                    ))}
-                                                    {(!supplier || supplier.commonProducts.length === 0) && (
-                                                        <div className="p-2 text-sm text-gray-400 text-center">無可用商品</div>
-                                                    )}
-                                                </SelectContent>
-                                            </Select>
+                                                options={supplier?.commonProducts.map((p) => ({ label: p.productName, value: p.productId })) || []}
+                                                placeholder="選擇商品"
+                                                searchPlaceholder="搜尋商品..."
+                                                emptyText="無可用商品"
+                                                className="w-full"
+                                            />
                                         )}
                                     </TableCell>
 
@@ -128,21 +113,18 @@ export function PurchaseOrderItemsTable({
                                     {/* 單位選擇 */}
                                     <TableCell>
                                         {!isReadOnly && item.large_unit_id ? (
-                                            <Select
+                                            <SearchableSelect
                                                 value={item.selectedUnit || 'base'}
                                                 onValueChange={(value) =>
                                                     onItemChange?.(index, "selectedUnit", value)
                                                 }
                                                 disabled={isDisabled}
-                                            >
-                                                <SelectTrigger className="h-10 border-gray-200 w-24">
-                                                    <SelectValue />
-                                                </SelectTrigger>
-                                                <SelectContent className="z-[9999]">
-                                                    <SelectItem value="base">{item.base_unit_name || "個"}</SelectItem>
-                                                    <SelectItem value="large">{item.large_unit_name}</SelectItem>
-                                                </SelectContent>
-                                            </Select>
+                                                options={[
+                                                    { label: item.base_unit_name || "個", value: "base" },
+                                                    { label: item.large_unit_name || "", value: "large" }
+                                                ]}
+                                                className="w-24"
+                                            />
                                         ) : (
                                             <span className="text-gray-500 font-medium">
                                                 {item.selectedUnit === 'large' && item.large_unit_name

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>
           )}
 

resources/js/Components/ui/searchable-select.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/Components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/Components/ui/popover";
+
+interface Option {
+    label: string;
+    value: string;
+    sublabel?: string;
+    disabled?: boolean;
+}
+
+interface SearchableSelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    options: Option[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    /** 當選項數量超過此閾值時顯示搜尋框，預設為 10。若設為 0 則總是顯示。 */
+    searchThreshold?: number;
+    /** 強制控制是否顯示搜尋框。若設定此值，則忽略 searchThreshold */
+    showSearch?: boolean;
+}
+
+export function SearchableSelect({
+    value,
+    onValueChange,
+    options,
+    placeholder = "請選擇...",
+    searchPlaceholder = "搜尋...",
+    emptyText = "找不到符合的項目",
+    disabled = false,
+    className,
+    searchThreshold = 10,
+    showSearch,
+}: SearchableSelectProps) {
+    const [open, setOpen] = React.useState(false);
+
+    // 決定是否顯示搜尋框
+    const shouldShowSearch =
+        showSearch !== undefined ? showSearch : options.length > searchThreshold;
+
+    const selectedOption = options.find((option) => option.value === value);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    role="combobox"
+                    aria-expanded={open}
+                    disabled={disabled}
+                    className={cn(
+                        // Base styles matching SelectTrigger
+                        "flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none",
+                        // Outlined default state - 2px border with grey-3
+                        "border-2 border-grey-3 bg-grey-5",
+                        // Text colors
+                        "text-grey-0",
+                        !selectedOption && "text-grey-3",
+                        // Focus state - primary border with ring
+                        "focus-visible:border-primary-main focus-visible:ring-primary-main/20 focus-visible:ring-[3px]",
+                        // Disabled state
+                        "disabled:border-grey-4 disabled:bg-background-light-grey disabled:text-grey-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        // Height
+                        "h-9",
+                        className
+                    )}
+                >
+                    <span className="truncate">
+                        {selectedOption ? selectedOption.label : placeholder}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 text-grey-2" />
+                </button>
+            </PopoverTrigger>
+            <PopoverContent
+                className="p-0 z-[9999]"
+                align="start"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+            >
+                <Command>
+                    {shouldShowSearch && (
+                        <CommandInput placeholder={searchPlaceholder} />
+                    )}
+                    <CommandList>
+                        <CommandEmpty>{emptyText}</CommandEmpty>
+                        <CommandGroup>
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => {
+                                        onValueChange(option.value);
+                                        setOpen(false);
+                                    }}
+                                    disabled={option.disabled}
+                                    className="cursor-pointer"
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4 text-primary",
+                                            value === option.value
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    <div className="flex items-center justify-between flex-1">
+                                        <span>{option.label}</span>
+                                        {option.sublabel && (
+                                            <span className="text-xs text-muted-foreground ml-2">
+                                                {option.sublabel}
+                                            </span>
+                                        )}
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}