first commit

resources/js/Components/Inventory/InventoryToolbar.tsx

@@ -0,0 +1,59 @@
+/**
+ * 庫存工具列元件
+ * 包含搜尋和篩選功能
+ */
+
+import { Filter } from "lucide-react";
+import SearchToolbar from "@/Components/shared/SearchToolbar";
+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="bg-white rounded-lg shadow-sm border p-4">
+      <div className="flex flex-col sm:flex-row gap-4">
+        {/* 搜尋框 */}
+        <SearchToolbar
+          value={searchTerm}
+          onChange={onSearchChange}
+          placeholder="搜尋商品名稱或批號..."
+          className="flex-1"
+        />
+
+        {/* 類型篩選 */}
+        <div className="w-full sm:w-56">
+          <Select value={typeFilter} onValueChange={onTypeFilterChange}>
+            <SelectTrigger className="border-gray-300">
+              <div className="flex items-center gap-2">
+                <Filter className="h-4 w-4 text-gray-400" />
+                <SelectValue placeholder="篩選類型" />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部類型</SelectItem>
+              <SelectItem value="原物料">原物料</SelectItem>
+              <SelectItem value="半成品">半成品</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}