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

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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/Components/ui/select";
+import { SearchableSelect } from "@/Components/ui/searchable-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}>
-              <SelectTrigger className="w-full md:w-[180px]">
-                <SelectValue placeholder="商品分類" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">全部分類</SelectItem>
-                {categories.map(cat => (
-                  <SelectItem key={cat.id} value={cat.id.toString()}>{cat.name}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <SearchableSelect
+              value={typeFilter}
+              onValueChange={handleCategoryChange}
+              options={[
+                { label: "全部分類", value: "all" },
+                ...categories.map((cat) => ({ label: cat.name, value: cat.id.toString() }))
+              ]}
+              placeholder="商品分類"
+              className="w-full md:w-[180px]"
+            />
 
             {/* 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}>
-              <SelectTrigger className="w-[80px] h-8">
-                <SelectValue placeholder="10" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="20">20</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-                <SelectItem value="100">100</SelectItem>
-              </SelectContent>
-            </Select>
+            <SearchableSelect
+              value={perPage}
+              onValueChange={handlePerPageChange}
+              options={[
+                { label: "10", value: "10" },
+                { label: "20", value: "20" },
+                { label: "50", value: "50" },
+                { label: "100", value: "100" }
+              ]}
+              className="w-[80px] h-8"
+              showSearch={false}
+            />
             <span>筆</span>
           </div>
           <Pagination links={products.links} />