refactor: extract FilterBar component

frontend/app/inventory/page.tsx

@@ -7,6 +7,7 @@ import PageShell from '@/components/PageShell';
 import Scanner from '@/components/Scanner';
 import StatCard from '@/components/StatCard';
 import InventoryTable from '@/components/InventoryTable';
+import FilterBar from '@/components/FilterBar';
 import { useInventoryFilter } from '@/hooks/useInventoryFilter';
 import { toast } from 'react-hot-toast';
 import {
@@ -24,7 +25,6 @@ import {
   Layout,
   Printer,
   Download,
-  Search,
   Box
 } from 'lucide-react';
 import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
@@ -289,18 +289,10 @@ export default function InventoryPage() {
         </section>
 
         {/* Search */}
-        <div className="relative">
+        <FilterBar
-          <input 
+          searchQuery={searchQuery}
-            type="text"
+          onChange={setSearchQuery}
-            placeholder="Search catalog..."
+        />
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full bg-surface border border-slate-800 rounded-2xl py-3.5 pr-4 pl-11 text-sm focus:border-primary outline-none transition-all placeholder:text-secondary"
-          />
-          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary">
-            <Search size={18} />
-          </div>
-        </div>
 
         {/* Inventory Table */}
         <InventoryTable

frontend/components/FilterBar.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Search } from 'lucide-react';
+
+interface FilterBarProps {
+  searchQuery: string;
+  onChange: (value: string) => void;
+}
+
+export default function FilterBar({ searchQuery, onChange }: FilterBarProps) {
+  return (
+    <div className="relative">
+      <input
+        type="text"
+        placeholder="Search catalog..."
+        value={searchQuery}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full bg-surface border border-slate-800 rounded-2xl py-3.5 pr-4 pl-11 text-sm focus:border-primary outline-none transition-all placeholder:text-secondary"
+      />
+      <div className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary">
+        <Search size={18} />
+      </div>
+    </div>
+  );
+}