#591 - sites [wip]

resources/js/components/data-table.tsx

@@ -1,26 +1,68 @@
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { router } from '@inertiajs/react';
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { PaginatedData } from '@/types';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
-  data: TData[];
+  paginatedData?: PaginatedData<TData>;
+  data?: TData[];
   className?: string;
   modal?: boolean;
+  onPageChange?: (page: number) => void;
+  isFetching?: boolean;
+  isLoading?: boolean;
 }
 
-export function DataTable<TData, TValue>({ columns, data, className, modal }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({
+  columns,
+  paginatedData,
+  data,
+  className,
+  modal,
+  onPageChange,
+  isFetching,
+  isLoading,
+}: DataTableProps<TData, TValue>) {
+  // Use paginatedData.data if available, otherwise fall back to data prop
+  const tableData = paginatedData?.data || data || [];
+
   const table = useReactTable({
-    data,
+    data: tableData,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
   const extraClasses = modal && 'border-none shadow-none';
 
+  const handlePageChange = (url: string) => {
+    if (onPageChange) {
+      // Use custom page change handler (for axios/API calls)
+      const urlObj = new URL(url);
+      const page = urlObj.searchParams.get('page');
+      if (page) {
+        onPageChange(parseInt(page));
+        return;
+      }
+
+      onPageChange(1);
+    } else {
+      // Use Inertia router for server-side rendered pages
+      router.get(url, {}, { preserveState: true });
+    }
+  };
+
   return (
-    <div className={cn('rounded-md border shadow-xs', className, extraClasses)}>
+    <div className={cn('relative overflow-hidden rounded-md border shadow-xs', className, extraClasses)}>
+      {isLoading && (
+        <div className="absolute top-0 right-0 left-0 h-[2px] overflow-hidden">
+          <div className="animate-loading-bar bg-primary absolute inset-0 w-full" />
+        </div>
+      )}
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -53,6 +95,62 @@ export function DataTable<TData, TValue>({ columns, data, className, modal }: Da
           )}
         </TableBody>
       </Table>
+
+      {paginatedData && (
+        <div className="flex items-center justify-between border-t px-4 py-3">
+          <div className="text-muted-foreground flex items-center text-sm">
+            {paginatedData.meta.from && paginatedData.meta.to && (
+              <span>
+                Showing {paginatedData.meta.from} to {paginatedData.meta.to}
+                {paginatedData.meta.total && ` of ${paginatedData.meta.total}`} results
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => paginatedData.links.first && handlePageChange(paginatedData.links.first)}
+              disabled={!paginatedData.links.first || isFetching}
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => paginatedData.links.prev && handlePageChange(paginatedData.links.prev)}
+              disabled={!paginatedData.links.prev || isFetching}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            <div className="flex items-center text-sm font-medium">
+              Page {paginatedData.meta.current_page}
+              {paginatedData.meta.last_page && ` of ${paginatedData.meta.last_page}`}
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => paginatedData.links.next && handlePageChange(paginatedData.links.next)}
+              disabled={!paginatedData.links.next || isFetching}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => paginatedData.links.last && handlePageChange(paginatedData.links.last)}
+              disabled={!paginatedData.links.last || isFetching}
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }