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

app/Http/Controllers/PurchaseOrderController.php

@@ -94,6 +94,9 @@ class PurchaseOrderController extends Controller
             'warehouse_id' => 'required|exists:warehouses,id',
             'expected_delivery_date' => 'nullable|date',
             'remark' => 'nullable|string',
+            'invoice_number' => ['nullable', 'string', 'max:11', 'regex:/^[A-Z]{2}-\d{8}$/'],
+            'invoice_date' => 'nullable|date',
+            'invoice_amount' => 'nullable|numeric|min:0',
             'items' => 'required|array|min:1',
             'items.*.productId' => 'required|exists:products,id',
             'items.*.quantity' => 'required|numeric|min:0.01',
@@ -154,6 +157,9 @@ class PurchaseOrderController extends Controller
                 'tax_amount' => $taxAmount,
                 'grand_total' => $grandTotal,
                 'remark' => $validated['remark'],
+                'invoice_number' => $validated['invoice_number'] ?? null,
+                'invoice_date' => $validated['invoice_date'] ?? null,
+                'invoice_amount' => $validated['invoice_amount'] ?? null,
             ]);
 
             foreach ($validated['items'] as $item) {
@@ -310,6 +316,9 @@ class PurchaseOrderController extends Controller
             'expected_delivery_date' => 'nullable|date',
             'remark' => 'nullable|string',
             'status' => 'required|string|in:draft,pending,processing,shipping,confirming,completed,cancelled',
+            'invoice_number' => ['nullable', 'string', 'max:11', 'regex:/^[A-Z]{2}-\d{8}$/'],
+            'invoice_date' => 'nullable|date',
+            'invoice_amount' => 'nullable|numeric|min:0',
             'items' => 'required|array|min:1',
             'items.*.productId' => 'required|exists:products,id',
             'items.*.quantity' => 'required|numeric|min:0.01',
@@ -338,6 +347,9 @@ class PurchaseOrderController extends Controller
                 'grand_total' => $grandTotal,
                 'remark' => $validated['remark'],
                 'status' => $validated['status'],
+                'invoice_number' => $validated['invoice_number'] ?? null,
+                'invoice_date' => $validated['invoice_date'] ?? null,
+                'invoice_amount' => $validated['invoice_amount'] ?? null,
             ]);
 
             // Sync items

app/Models/PurchaseOrder.php

@@ -22,13 +22,18 @@ class PurchaseOrder extends Model
         'tax_amount',
         'grand_total',
         'remark',
+        'invoice_number',
+        'invoice_date',
+        'invoice_amount',
     ];
 
     protected $casts = [
         'expected_delivery_date' => 'date',
+        'invoice_date' => 'date',
         'total_amount' => 'decimal:2',
         'tax_amount' => 'decimal:2',
         'grand_total' => 'decimal:2',
+        'invoice_amount' => 'decimal:2',
     ];
 
     protected $appends = [
@@ -40,6 +45,9 @@ class PurchaseOrder extends Model
         'createdBy',
         'warehouse_name',
         'createdAt',
+        'invoiceNumber',
+        'invoiceDate',
+        'invoiceAmount',
     ];
 
     public function getCreatedAtAttribute()
@@ -82,6 +90,22 @@ class PurchaseOrder extends Model
         return $this->warehouse ? $this->warehouse->name : '';
     }
 
+    public function getInvoiceNumberAttribute(): ?string
+    {
+        return $this->attributes['invoice_number'] ?? null;
+    }
+
+    public function getInvoiceDateAttribute(): ?string
+    {
+        $date = $this->attributes['invoice_date'] ?? null;
+        return $date ? \Illuminate\Support\Carbon::parse($date)->format('Y-m-d') : null;
+    }
+
+    public function getInvoiceAmountAttribute(): ?float
+    {
+        return isset($this->attributes['invoice_amount']) ? (float) $this->attributes['invoice_amount'] : null;
+    }
+
     public function vendor(): BelongsTo
     {
         return $this->belongsTo(Vendor::class);

database/migrations/2026_01_09_095718_add_invoice_fields_to_purchase_orders_table.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->string('invoice_number', 11)->nullable()->comment('發票號碼 (格式: AB-12345678)');
+            $table->date('invoice_date')->nullable()->comment('發票日期');
+            $table->decimal('invoice_amount', 12, 2)->nullable()->comment('發票金額');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->dropColumn(['invoice_number', 'invoice_date', 'invoice_amount']);
+        });
+    }
+};

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 {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/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)}
-                >
+                  options={categories.map((c) => ({ label: c.name, value: c.id.toString() }))}
-                  <SelectTrigger id="category_id" className={errors.category_id ? "border-red-500" : ""}>
+                  placeholder="選擇分類"
-                    <SelectValue placeholder="選擇分類" />
+                  searchPlaceholder="搜尋分類..."
-                  </SelectTrigger>
+                  className={errors.category_id ? "border-red-500" : ""}
-                  <SelectContent>
+                />
-                    {categories.map((category) => (
-                      <SelectItem key={category.id} value={category.id.toString()}>
-                        {category.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
                 {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)}
-                >
+                  options={units.map((u) => ({ label: u.name, value: u.id.toString() }))}
-                  <SelectTrigger id="base_unit_id" className={errors.base_unit_id ? "border-red-500" : ""}>
+                  placeholder="選擇單位"
-                    <SelectValue placeholder="選擇單位" />
+                  searchPlaceholder="搜尋單位..."
-                  </SelectTrigger>
+                  className={errors.base_unit_id ? "border-red-500" : ""}
-                  <SelectContent>
+                />
-                    {units.map((unit) => (
-                      <SelectItem key={unit.id} value={unit.id.toString()}>
-                        {unit.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
                 {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)}
-                >
+                  options={[
-                  <SelectTrigger id="large_unit_id" className={errors.large_unit_id ? "border-red-500" : ""}>
+                    { label: "無", value: "none" },
-                    <SelectValue placeholder="無" />
+                    ...units.map((u) => ({ label: u.name, value: u.id.toString() }))
-                  </SelectTrigger>
+                  ]}
-                  <SelectContent>
+                  placeholder="無"
-                    <SelectItem value="none">無</SelectItem>
+                  searchPlaceholder="搜尋單位..."
-                    {units.map((unit) => (
+                  className={errors.large_unit_id ? "border-red-500" : ""}
-                      <SelectItem key={unit.id} value={unit.id.toString()}>
+                />
-                        {unit.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
                 {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 {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/Components/ui/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}
-                                            >
+                                                options={supplier?.commonProducts.map((p) => ({ label: p.productName, value: p.productId })) || []}
-                                                <SelectTrigger className="h-10 border-gray-200">
+                                                placeholder="選擇商品"
-                                                    <SelectValue placeholder="選擇商品" />
+                                                searchPlaceholder="搜尋商品..."
-                                                </SelectTrigger>
+                                                emptyText="無可用商品"
-                                                <SelectContent>
+                                                className="w-full"
-                                                    {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>
                                         )}
                                     </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}
-                                            >
+                                                options={[
-                                                <SelectTrigger className="h-10 border-gray-200 w-24">
+                                                    { label: item.base_unit_name || "個", value: "base" },
-                                                    <SelectValue />
+                                                    { label: item.large_unit_name || "", value: "large" }
-                                                </SelectTrigger>
+                                                ]}
-                                                <SelectContent className="z-[9999]">
+                                                className="w-24"
-                                                    <SelectItem value="base">{item.base_unit_name || "個"}</SelectItem>
+                                            />
-                                                    <SelectItem value="large">{item.large_unit_name}</SelectItem>
-                                                </SelectContent>
-                                            </Select>
                                         ) : (
                                             <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 {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/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}
-              >
+                options={warehouses.map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
-                <SelectTrigger id="sourceWarehouse">
+                placeholder="選擇來源倉庫"
-                  <SelectValue placeholder="選擇來源倉庫" />
+                searchPlaceholder="搜尋倉庫..."
-                </SelectTrigger>
+              />
-                <SelectContent>
-                  {warehouses.map((warehouse) => (
-                    <SelectItem key={warehouse.id} value={warehouse.id}>
-                      {warehouse.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
             </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}
-              >
+                options={warehouses
-                <SelectTrigger id="targetWarehouse">
+                  .filter((w) => w.id !== formData.sourceWarehouseId)
-                  <SelectValue placeholder="選擇目標倉庫" />
+                  .map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
-                </SelectTrigger>
+                placeholder="選擇目標倉庫"
-                <SelectContent>
+                searchPlaceholder="搜尋倉庫..."
-                  {warehouses
+              />
-                    .filter((w) => w.id !== formData.sourceWarehouseId)
-                    .map((warehouse) => (
-                      <SelectItem key={warehouse.id} value={warehouse.id}>
-                        {warehouse.name}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
             </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}
-            >
+              options={availableProducts.map((product) => ({
-              <SelectTrigger id="product">
+                label: `${product.productName} (庫存: ${product.availableQty} ${product.unit})`,
-                <SelectValue placeholder="選擇商品與批號" />
+                value: `${product.productId}|||${product.batchNumber}`,
-              </SelectTrigger>
+              }))}
-              <SelectContent>
+              placeholder="選擇商品與批號"
-                {availableProducts.length === 0 ? (
+              searchPlaceholder="搜尋商品..."
-                  <div className="p-2 text-sm text-gray-500 text-center">
+              emptyText={formData.sourceWarehouseId ? "該倉庫無可用庫存" : "請先選擇來源倉庫"}
-                    {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>
           </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 })
                 }
-              >
+                options={[
-                <SelectTrigger id="status">
+                  { label: "待處理", value: "待處理" },
-                  <SelectValue />
+                  { label: "處理中", value: "處理中" },
-                </SelectTrigger>
+                  { label: "已完成", value: "已完成" },
-                <SelectContent>
+                  { label: "已取消", value: "已取消" },
-                  <SelectItem value="待處理">待處理</SelectItem>
+                ]}
-                  <SelectItem value="處理中">處理中</SelectItem>
+              />
-                  <SelectItem value="已完成">已完成</SelectItem>
-                  <SelectItem value="已取消">已取消</SelectItem>
-                </SelectContent>
-              </Select>
             </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>
+    );
+}

resources/js/Pages/Product/Index.tsx

@@ -1,13 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
-import {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/select";
 import { Plus, Search, X } from "lucide-react";
 import ProductTable from "@/Components/Product/ProductTable";
 import ProductDialog from "@/Components/Product/ProductDialog";
@@ -209,17 +203,16 @@ export default function ProductManagement({ products, categories, units, filters
             </div>
 
             {/* Type Filter */}
-            <Select value={typeFilter} onValueChange={handleCategoryChange}>
+            <SearchableSelect
-              <SelectTrigger className="w-full md:w-[180px]">
+              value={typeFilter}
-                <SelectValue placeholder="商品分類" />
+              onValueChange={handleCategoryChange}
-              </SelectTrigger>
+              options={[
-              <SelectContent>
+                { label: "全部分類", value: "all" },
-                <SelectItem value="all">全部分類</SelectItem>
+                ...categories.map((cat) => ({ label: cat.name, value: cat.id.toString() }))
-                {categories.map(cat => (
+              ]}
-                  <SelectItem key={cat.id} value={cat.id.toString()}>{cat.name}</SelectItem>
+              placeholder="商品分類"
-                ))}
+              className="w-full md:w-[180px]"
-              </SelectContent>
+            />
-            </Select>
 
             {/* Add Button */}
             <div className="flex gap-2 w-full md:w-auto">
@@ -260,17 +253,18 @@ export default function ProductManagement({ products, categories, units, filters
         <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-2 text-sm text-gray-500">
             <span>每頁顯示</span>
-            <Select value={perPage} onValueChange={handlePerPageChange}>
+            <SearchableSelect
-              <SelectTrigger className="w-[80px] h-8">
+              value={perPage}
-                <SelectValue placeholder="10" />
+              onValueChange={handlePerPageChange}
-              </SelectTrigger>
+              options={[
-              <SelectContent>
+                { label: "10", value: "10" },
-                <SelectItem value="10">10</SelectItem>
+                { label: "20", value: "20" },
-                <SelectItem value="20">20</SelectItem>
+                { label: "50", value: "50" },
-                <SelectItem value="50">50</SelectItem>
+                { label: "100", value: "100" }
-                <SelectItem value="100">100</SelectItem>
+              ]}
-              </SelectContent>
+              className="w-[80px] h-8"
-            </Select>
+              showSearch={false}
+            />
             <span>筆</span>
           </div>
           <Pagination links={products.links} />

resources/js/Pages/PurchaseOrder/Create.tsx

@@ -7,13 +7,7 @@ import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Textarea } from "@/Components/ui/textarea";
 import { Alert, AlertDescription } from "@/Components/ui/alert";
-import {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/Components/ui/select";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, router } from "@inertiajs/react";
 import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
@@ -58,6 +52,12 @@ export default function CreatePurchaseOrder({
         updateItem,
         status,
         setStatus,
+        invoiceNumber,
+        invoiceDate,
+        invoiceAmount,
+        setInvoiceNumber,
+        setInvoiceDate,
+        setInvoiceAmount,
     } = usePurchaseOrderForm({ order, suppliers });
 
 
@@ -110,6 +110,9 @@ export default function CreatePurchaseOrder({
             expected_delivery_date: expectedDate,
             remark: notes,
             status: status,
+            invoice_number: invoiceNumber || null,
+            invoice_date: invoiceDate || null,
+            invoice_amount: invoiceAmount ? parseFloat(invoiceAmount) : null,
             items: validItems.map(item => ({
                 productId: item.productId,
                 quantity: item.quantity,
@@ -191,40 +194,26 @@ export default function CreatePurchaseOrder({
                                     <label className="text-sm font-bold text-gray-700">
                                         預計入庫倉庫
                                     </label>
-                                    <Select
+                                    <SearchableSelect
                                         value={String(warehouseId)}
                                         onValueChange={setWarehouseId}
                                         disabled={isOrderSent}
-                                    >
+                                        options={warehouses.map((w) => ({ label: w.name, value: String(w.id) }))}
-                                        <SelectTrigger className="h-12 border-gray-200 focus:ring-primary/20">
+                                        placeholder="請選擇倉庫"
-                                            <SelectValue placeholder="請選擇倉庫" />
+                                        searchPlaceholder="搜尋倉庫..."
-                                        </SelectTrigger>
+                                    />
-                                        <SelectContent>
-                                            {warehouses.map((w) => (
-                                                <SelectItem key={w.id} value={String(w.id)}>
-                                                    {w.name}
-                                                </SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
                                 </div>
 
                                 <div className="space-y-3">
                                     <label className="text-sm font-bold text-gray-700">供應商</label>
-                                    <Select
+                                    <SearchableSelect
                                         value={String(supplierId)}
                                         onValueChange={setSupplierId}
                                         disabled={isOrderSent}
-                                    >
+                                        options={suppliers.map((s) => ({ label: s.name, value: String(s.id) }))}
-                                        <SelectTrigger className="h-12 border-gray-200">
+                                        placeholder="選擇供應商"
-                                            <SelectValue placeholder="選擇供應商" />
+                                        searchPlaceholder="搜尋供應商..."
-                                        </SelectTrigger>
+                                    />
-                                        <SelectContent>
-                                            {suppliers.map((s) => (
-                                                <SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
                                 </div>
                             </div>
 
@@ -245,21 +234,12 @@ export default function CreatePurchaseOrder({
                                 {order && (
                                     <div className="space-y-3">
                                         <label className="text-sm font-bold text-gray-700">狀態</label>
-                                        <Select
+                                        <SearchableSelect
                                             value={status}
                                             onValueChange={(v) => setStatus(v as any)}
-                                        >
+                                            options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
-                                            <SelectTrigger className="h-12 border-gray-200">
+                                            placeholder="選擇狀態"
-                                                <SelectValue placeholder="選擇狀態" />
+                                        />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                {STATUS_OPTIONS.map((opt) => (
-                                                    <SelectItem key={opt.value} value={opt.value}>
-                                                        {opt.label}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
                                     </div>
                                 )}
                             </div>
@@ -276,11 +256,71 @@ export default function CreatePurchaseOrder({
                         </div>
                     </div>
 
-                    {/* 步驟二：品項明細 */}
+                    {/* 發票資訊 */}
+                    <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
+                        <div className="p-6 bg-gray-50/50 border-b flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
+                            <h2 className="text-lg font-bold">發票資訊</h2>
+                            <span className="text-sm text-gray-500">（選填）</span>
+                        </div>
+
+                        <div className="p-8 space-y-8">
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                                <div className="space-y-3">
+                                    <label className="text-sm font-bold text-gray-700">
+                                        發票號碼
+                                    </label>
+                                    <Input
+                                        type="text"
+                                        value={invoiceNumber}
+                                        onChange={(e) => setInvoiceNumber(e.target.value)}
+                                        placeholder="AB-12345678"
+                                        maxLength={11}
+                                        className="h-12 border-gray-200"
+                                    />
+                                    <p className="text-xs text-gray-500">格式：2 碼英文 + 分隔線 + 8 碼數字</p>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <label className="text-sm font-bold text-gray-700">
+                                        發票日期
+                                    </label>
+                                    <Input
+                                        type="date"
+                                        value={invoiceDate}
+                                        onChange={(e) => setInvoiceDate(e.target.value)}
+                                        className="h-12 border-gray-200"
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <label className="text-sm font-bold text-gray-700">
+                                        發票金額
+                                    </label>
+                                    <Input
+                                        type="number"
+                                        value={invoiceAmount}
+                                        onChange={(e) => setInvoiceAmount(e.target.value)}
+                                        placeholder="0"
+                                        min="0"
+                                        step="0.01"
+                                        className="h-12 border-gray-200"
+                                    />
+                                    {invoiceAmount && totalAmount > 0 && parseFloat(invoiceAmount) !== totalAmount && (
+                                        <p className="text-xs text-amber-600">
+                                            ⚠️ 發票金額與採購總額不一致（總額：{formatCurrency(totalAmount)}）
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 步驟三：品項明細 */}
                     <div className={`bg-white rounded-lg border shadow-sm overflow-hidden transition-all duration-300 ${!hasSupplier ? 'opacity-60 saturate-50' : ''}`}>
                         <div className="p-6 bg-gray-50/50 border-b flex items-center justify-between">
                             <div className="flex items-center gap-3">
-                                <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
+                                <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">3</div>
                                 <h2 className="text-lg font-bold">採購商品明細</h2>
                             </div>
                             <Button

resources/js/Pages/PurchaseOrder/Show.tsx

@@ -100,6 +100,36 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
                             )}
                         </div>
 
+                        {/* 發票資訊卡片 */}
+                        {(order.invoiceNumber || order.invoiceDate || (order.invoiceAmount !== null && order.invoiceAmount !== undefined)) && (
+                            <div className="bg-white rounded-lg border shadow-sm p-6">
+                                <h2 className="text-lg font-bold text-gray-900 mb-6">發票資訊</h2>
+                                <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
+                                    {order.invoiceNumber && (
+                                        <div>
+                                            <span className="text-sm text-gray-500 block mb-1">發票號碼</span>
+                                            <div className="flex items-center gap-1.5">
+                                                <span className="font-mono font-medium text-gray-900">{order.invoiceNumber}</span>
+                                                <CopyButton text={order.invoiceNumber} label="複製發票號碼" />
+                                            </div>
+                                        </div>
+                                    )}
+                                    {order.invoiceDate && (
+                                        <div>
+                                            <span className="text-sm text-gray-500 block mb-1">發票日期</span>
+                                            <span className="font-medium text-gray-900">{order.invoiceDate}</span>
+                                        </div>
+                                    )}
+                                    {order.invoiceAmount !== null && order.invoiceAmount !== undefined && (
+                                        <div>
+                                            <span className="text-sm text-gray-500 block mb-1">發票金額</span>
+                                            <span className="font-medium text-gray-900">{formatCurrency(order.invoiceAmount)}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+
                         {/* 採購項目卡片 */}
                         <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
                             <div className="p-6 border-b border-gray-100">

resources/js/Pages/Warehouse/AddInventory.tsx

@@ -8,13 +8,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 {
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/Components/ui/select";
 import {
     Table,
     TableBody,
@@ -242,18 +236,13 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
                                 <Label htmlFor="reason" className="text-gray-700">
                                     入庫原因 <span className="text-red-500">*</span>
                                 </Label>
-                                <Select value={reason} onValueChange={(value) => setReason(value as InboundReason)}>
+                                <SearchableSelect
-                                    <SelectTrigger id="reason" className="border-gray-300">
+                                    value={reason}
-                                        <SelectValue />
+                                    onValueChange={(value) => setReason(value as InboundReason)}
-                                    </SelectTrigger>
+                                    options={INBOUND_REASONS.map((r) => ({ label: r, value: r }))}
-                                    <SelectContent>
+                                    placeholder="選擇入庫原因"
-                                        {INBOUND_REASONS.map((r) => (
+                                    className="border-gray-300"
-                                            <SelectItem key={r} value={r}>
+                                />
-                                                {r}
-                                            </SelectItem>
-                                        ))}
-                                    </SelectContent>
-                                </Select>
                                 {errors.reason && (
                                     <p className="text-sm text-red-500">{errors.reason}</p>
                                 )}
@@ -331,23 +320,16 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
                                                 <TableRow key={item.tempId}>
                                                     {/* 商品 */}
                                                     <TableCell>
-                                                        <Select
+                                                        <SearchableSelect
                                                             value={item.productId}
                                                             onValueChange={(value) =>
                                                                 handleProductChange(item.tempId, value)
                                                             }
-                                                        >
+                                                            options={products.map((p) => ({ label: p.name, value: p.id }))}
-                                                            <SelectTrigger className="border-gray-300">
+                                                            placeholder="選擇商品"
-                                                                <SelectValue />
+                                                            searchPlaceholder="搜尋商品..."
-                                                            </SelectTrigger>
+                                                            className="border-gray-300"
-                                                            <SelectContent className="z-[9999]">
+                                                        />
-                                                                {products.map((product) => (
-                                                                    <SelectItem key={product.id} value={product.id}>
-                                                                        {product.name}
-                                                                    </SelectItem>
-                                                                ))}
-                                                            </SelectContent>
-                                                        </Select>
                                                         {errors[`item-${index}-product`] && (
                                                             <p className="text-xs text-red-500 mt-1">
                                                                 {errors[`item-${index}-product`]}
@@ -378,23 +360,20 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
                                                     {/* 單位 */}
                                                     <TableCell>
                                                         {item.largeUnit ? (
-                                                            <Select
+                                                            <SearchableSelect
-                                                                value={item.selectedUnit}
+                                                                value={item.selectedUnit || ""}
                                                                 onValueChange={(value) =>
                                                                     handleUpdateItem(item.tempId, {
                                                                         selectedUnit: value as 'base' | 'large',
                                                                         unit: value === 'base' ? item.baseUnit : item.largeUnit
                                                                     })
                                                                 }
-                                                            >
+                                                                options={[
-                                                                <SelectTrigger className="border-gray-300">
+                                                                    { label: item.baseUnit || "個", value: "base" },
-                                                                    <SelectValue />
+                                                                    { label: item.largeUnit || "", value: "large" }
-                                                                </SelectTrigger>
+                                                                ]}
-                                                                <SelectContent className="z-[9999]">
+                                                                className="border-gray-300"
-                                                                    <SelectItem value="base">{item.baseUnit}</SelectItem>
+                                                            />
-                                                                    <SelectItem value="large">{item.largeUnit}</SelectItem>
-                                                                </SelectContent>
-                                                            </Select>
                                                         ) : (
                                                             <Input
                                                                 value={item.baseUnit || "個"}

resources/js/hooks/usePurchaseOrderForm.ts

@@ -18,6 +18,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
     const [notes, setNotes] = useState("");
     const [status, setStatus] = useState<PurchaseOrderStatus>("draft");
     const [warehouseId, setWarehouseId] = useState<string | number>("");
+    const [invoiceNumber, setInvoiceNumber] = useState("");
+    const [invoiceDate, setInvoiceDate] = useState("");
+    const [invoiceAmount, setInvoiceAmount] = useState("");
 
     // 載入編輯訂單資料
     useEffect(() => {
@@ -28,6 +31,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
             setNotes(order.remark || "");
             setStatus(order.status);
             setWarehouseId(order.warehouse_id || "");
+            setInvoiceNumber(order.invoiceNumber || "");
+            setInvoiceDate(order.invoiceDate || "");
+            setInvoiceAmount(order.invoiceAmount ? String(order.invoiceAmount) : "");
         }
     }, [order]);
 
@@ -38,6 +44,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
         setNotes("");
         setStatus("draft");
         setWarehouseId("");
+        setInvoiceNumber("");
+        setInvoiceDate("");
+        setInvoiceAmount("");
     };
 
     const selectedSupplier = suppliers.find((s) => String(s.id) === String(supplierId));
@@ -142,6 +151,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
         selectedSupplier,
         isOrderSent,
         warehouseId,
+        invoiceNumber,
+        invoiceDate,
+        invoiceAmount,
 
         // Setters
         setSupplierId,
@@ -149,6 +161,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
         setNotes,
         setStatus,
         setWarehouseId,
+        setInvoiceNumber,
+        setInvoiceDate,
+        setInvoiceAmount,
 
         // Methods
         addItem,

resources/js/types/purchase-order.ts

@@ -78,6 +78,9 @@ export interface PurchaseOrder {
     remark?: string;
     reviewInfo?: ReviewInfo; // 審核資訊
     paymentInfo?: PaymentInfo; // 付款資訊
+    invoiceNumber?: string;  // 發票號碼
+    invoiceDate?: string;    // 發票日期
+    invoiceAmount?: number;  // 發票金額
 }
 
 export interface CommonProduct {