split clients table

src/components/ClientsDataTable.tsx

@@ -5,6 +5,12 @@ import {
 } from "@tanstack/react-table";
 import { DataTable } from "@app/components/ui/data-table";
 
+type TabFilter = {
+    id: string;
+    label: string;
+    filterFn: (row: any) => boolean;
+};
+
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -13,6 +19,9 @@ interface DataTableProps<TData, TValue> {
     addClient?: () => void;
     columnVisibility?: Record<string, boolean>;
     enableColumnVisibility?: boolean;
+    hideHeader?: boolean;
+    tabs?: TabFilter[];
+    defaultTab?: string;
 }
 
 export function ClientsDataTable<TData, TValue>({
@@ -22,22 +31,27 @@ export function ClientsDataTable<TData, TValue>({
     onRefresh,
     isRefreshing,
     columnVisibility,
-    enableColumnVisibility
+    enableColumnVisibility,
+    hideHeader = false,
+    tabs,
+    defaultTab
 }: DataTableProps<TData, TValue>) {
     return (
         <DataTable
             columns={columns}
-            data={data}
+            data={data || []}
             persistPageSize="clients-table"
-            title="Clients"
+            title={hideHeader ? undefined : "Clients"}
             searchPlaceholder="Search clients..."
             searchColumn="name"
-            onAdd={addClient}
-            onRefresh={onRefresh}
+            onAdd={hideHeader ? undefined : addClient}
+            onRefresh={hideHeader ? undefined : onRefresh}
             isRefreshing={isRefreshing}
-            addButtonText="Add Client"
+            addButtonText={hideHeader ? undefined : "Add Client"}
             columnVisibility={columnVisibility}
             enableColumnVisibility={enableColumnVisibility}
+            tabs={tabs}
+            defaultTab={defaultTab}
         />
     );
 }