feat: add user security audit logs

packages/ui/primitives/data-table.tsx

@@ -2,36 +2,53 @@
 
 import React, { useMemo } from 'react';
 
-import {
+import type {
   ColumnDef,
   PaginationState,
   Table as TTable,
   Updater,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
+  VisibilityState,
 } from '@tanstack/react-table';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 
+import { Skeleton } from './skeleton';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';
 
 export type DataTableChildren<TData> = (_table: TTable<TData>) => React.ReactNode;
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
+  columnVisibility?: VisibilityState;
   data: TData[];
   perPage?: number;
   currentPage?: number;
   totalPages?: number;
   onPaginationChange?: (_page: number, _perPage: number) => void;
+  onClearFilters?: () => void;
+  hasFilters?: boolean;
   children?: DataTableChildren<TData>;
+  skeleton?: {
+    enable: boolean;
+    rows: number;
+    component?: React.ReactNode;
+  };
+  error?: {
+    enable: boolean;
+    component?: React.ReactNode;
+  };
 }
 
 export function DataTable<TData, TValue>({
   columns,
+  columnVisibility,
   data,
+  error,
   perPage,
   currentPage,
   totalPages,
+  skeleton,
+  hasFilters,
+  onClearFilters,
   onPaginationChange,
   children,
 }: DataTableProps<TData, TValue>) {
@@ -67,6 +84,7 @@ export function DataTable<TData, TValue>({
     getCoreRowModel: getCoreRowModel(),
     state: {
       pagination: manualPagination ? pagination : undefined,
+      columnVisibility,
     },
     manualPagination,
     pageCount: totalPages,
@@ -103,10 +121,31 @@ export function DataTable<TData, TValue>({
                   ))}
                 </TableRow>
               ))
+            ) : error?.enable ? (
+              <TableRow>
+                {error.component ?? (
+                  <TableCell colSpan={columns.length} className="h-32 text-center">
+                    Something went wrong.
+                  </TableCell>
+                )}
+              </TableRow>
+            ) : skeleton?.enable ? (
+              Array.from({ length: skeleton.rows }).map((_, i) => (
+                <TableRow key={`skeleton-row-${i}`}>{skeleton.component ?? <Skeleton />}</TableRow>
+              ))
             ) : (
               <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
+                <TableCell colSpan={columns.length} className="h-32 text-center">
+                  <p>No results found</p>
+
+                  {hasFilters && onClearFilters !== undefined && (
+                    <button
+                      onClick={() => onClearFilters()}
+                      className="text-foreground mt-1 text-sm"
+                    >
+                      Clear filters
+                    </button>
+                  )}
                 </TableCell>
               </TableRow>
             )}