first commit

resources/js/Components/Warehouse/Inventory/InventoryToolbar.tsx

@@ -0,0 +1,60 @@
+/**
+ * 庫存篩選工具列
+ * 包含搜尋框和產品類型篩選
+ */
+
+import { Search, Filter } from "lucide-react";
+import { Input } from "@/Components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/Components/ui/select";
+
+interface InventoryToolbarProps {
+    searchTerm: string;
+    onSearchChange: (value: string) => void;
+    typeFilter: string;
+    onTypeFilterChange: (value: string) => void;
+}
+
+export default function InventoryToolbar({
+    searchTerm,
+    onSearchChange,
+    typeFilter,
+    onTypeFilterChange,
+}: InventoryToolbarProps) {
+    return (
+        <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between p-4 bg-white rounded-lg border shadow-sm">
+            <div className="relative w-full md:max-w-md">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                    placeholder="搜尋商品名稱或批號..."
+                    value={searchTerm}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                    className="pl-10"
+                />
+            </div>
+
+            <div className="flex items-center gap-3 w-full md:w-auto">
+                <div className="flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
+                    <Filter className="h-4 w-4" />
+                    <span>篩選類型：</span>
+                </div>
+                <Select value={typeFilter} onValueChange={onTypeFilterChange}>
+                    <SelectTrigger className="w-full md:w-[180px]">
+                        <SelectValue placeholder="所有類型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">所有類型</SelectItem>
+                        <SelectItem value="原物料">原物料</SelectItem>
+                        <SelectItem value="半成品">半成品</SelectItem>
+                        <SelectItem value="成品">成品</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
+}