59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
/**
|
|
* 庫存工具列元件
|
|
* 包含搜尋和篩選功能
|
|
*/
|
|
|
|
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>
|
|
);
|
|
} |