feat: 修正 BOM 單位顯示與完工入庫彈窗 UI 統一規範

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import {
@@ -36,6 +36,8 @@ interface SearchableSelectProps {
     searchThreshold?: number;
     /** 強制控制是否顯示搜尋框。若設定此值，則忽略 searchThreshold */
     showSearch?: boolean;
+    /** 是否可清除選取 */
+    isClearable?: boolean;
 }
 
 export function SearchableSelect({
@@ -49,6 +51,7 @@ export function SearchableSelect({
     className,
     searchThreshold = 10,
     showSearch,
+    isClearable = false,
 }: SearchableSelectProps) {
     const [open, setOpen] = React.useState(false);
 
@@ -86,7 +89,18 @@ export function SearchableSelect({
                     <span className="truncate">
                         {selectedOption ? selectedOption.label : placeholder}
                     </span>
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 text-grey-2" />
+                    <div className="flex items-center gap-1 shrink-0">
+                        {isClearable && value && !disabled && (
+                            <X
+                                className="h-4 w-4 text-grey-3 hover:text-grey-1 transition-colors pointer-events-auto cursor-pointer"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onValueChange("");
+                                }}
+                            />
+                        )}
+                        <ChevronsUpDown className="h-4 w-4 opacity-50 text-grey-2" />
+                    </div>
                 </button>
             </PopoverTrigger>
             <PopoverContent