1 files changed, 54 insertions, 0 deletions
diff --git a/components/client-table/client-table-toolbar.tsx b/components/client-table/client-table-toolbar.tsx
new file mode 100644
index 00000000..43b0a032
--- /dev/null
+++ b/components/client-table/client-table-toolbar.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Search, Download } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+
+interface ClientTableToolbarProps {
+  globalFilter: string
+  setGlobalFilter: (value: string) => void
+  totalRows: number
+  visibleRows: number
+  onExport?: () => void
+  actions?: React.ReactNode
+}
+
+export function ClientTableToolbar({
+  globalFilter,
+  setGlobalFilter,
+  totalRows,
+  visibleRows,
+  onExport,
+  actions,
+}: ClientTableToolbarProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 p-1">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search all columns..."
+            value={globalFilter ?? ""}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+        <div className="text-sm text-muted-foreground whitespace-nowrap">
+          Showing {visibleRows} of {totalRows}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {actions}
+        {onExport && (
+          <Button onClick={onExport} variant="outline" size="sm">
+            <Download className="mr-2 h-4 w-4" />
+            Export
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+