更新採購單跟商品資料一些bug

resources/js/Components/Product/ProductDialog.tsx

@@ -21,6 +21,13 @@ import {
 import { useForm } from "@inertiajs/react";
 import { toast } from "sonner";
 import type { Product, Category } from "@/Pages/Product/Index";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { ChevronDown } from "lucide-react";
 
 interface ProductDialogProps {
   open: boolean;
@@ -41,7 +48,7 @@ export default function ProductDialog({
     category_id: "",
     brand: "",
     specification: "",
-    base_unit: "kg",
+    base_unit: "公斤",
     large_unit: "",
     conversion_rate: "",
     purchase_unit: "",
@@ -184,32 +191,34 @@ export default function ProductDialog({
                 <Label htmlFor="base_unit">
                   基本庫存單位 <span className="text-red-500">*</span>
                 </Label>
-                <Select
-                  value={data.base_unit}
-                  onValueChange={(value) => setData("base_unit", value)}
-                >
-                  <SelectTrigger id="base_unit" className={errors.base_unit ? "border-red-500" : ""}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="kg">公斤 (kg)</SelectItem>
-                    <SelectItem value="g">公克 (g)</SelectItem>
-                    <SelectItem value="l">公升 (l)</SelectItem>
-                    <SelectItem value="ml">毫升 (ml)</SelectItem>
-                    <SelectItem value="個">個</SelectItem>
-                    <SelectItem value="支">支</SelectItem>
-                    <SelectItem value="包">包</SelectItem>
-                    <SelectItem value="罐">罐</SelectItem>
-                    <SelectItem value="瓶">瓶</SelectItem>
-                    <SelectItem value="箱">箱</SelectItem>
-                    <SelectItem value="袋">袋</SelectItem>
-                  </SelectContent>
-                </Select>
+                <div className="flex gap-2">
+                  <Input
+                    id="base_unit"
+                    value={data.base_unit}
+                    onChange={(e) => setData("base_unit", e.target.value)}
+                    placeholder="可輸入或選擇..."
+                    className={errors.base_unit ? "border-red-500 flex-1" : "flex-1"}
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline" size="icon" className="shrink-0">
+                        <ChevronDown className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {["公斤", "公克", "公升", "毫升", "個", "支", "包", "罐", "瓶", "箱", "袋"].map((u) => (
+                        <DropdownMenuItem key={u} onClick={() => setData("base_unit", u)}>
+                          {u}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
                 {errors.base_unit && <p className="text-sm text-red-500">{errors.base_unit}</p>}
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor="large_unit">大單位 (進貨單位)</Label>
+                <Label htmlFor="large_unit">大單位</Label>
                 <Input
                   id="large_unit"
                   value={data.large_unit}
@@ -270,6 +279,6 @@ export default function ProductDialog({
           </DialogFooter>
         </form>
       </DialogContent>
-    </Dialog>
+    </Dialog >
   );
 }