betterstart-cli 0.0.13 → 0.0.14

package/dist/assets/adapters/next/templates/init/pages/audit-log/audit-log-page-content.tsx

@@ -1,36 +1,60 @@
 'use client'
 
-import type { AuditLogEntry, AuditLogQuery } from '@admin/actions/audit'
+import type { AuditLogEntry, AuditLogQuery, AuditLogSortField } from '@admin/actions/audit'
+import { AUDIT_LOG_ACTIONS, AUDIT_LOG_CATEGORIES } from '@admin/actions/audit'
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow
+} from '@admin/components/shared/data-table/data-grid'
+import { DataTablePagination } from '@admin/components/shared/data-table/data-table-pagination'
+import { EntityFiltersBar } from '@admin/components/shared/entity-filters-bar'
 import { PageHeader } from '@admin/components/shared/page-header'
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@admin/components/ui/table'
+import { Card, CardContent } from '@admin/components/ui/card'
 import { useAuditLogs, useCleanupAuditLogs } from '@admin/hooks/use-audit-log'
-import { LoaderCircle, Trash2 } from 'lucide-react'
+import { useTableUtils } from '@admin/hooks/use-table-utils'
+import { cn } from '@admin/utils/shared/cn'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { GripVertical, LoaderCircle, Trash2 } from 'lucide-react'
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import * as React from 'react'
 import { toast } from 'sonner'
 import { AuditLogDetailDrawer } from './audit-log-detail-drawer'
-import { AuditLogFilters } from './audit-log-filters'
 
-const DEFAULT_PAGE_SIZE = 25
+const DEFAULT_PAGE_SIZE = 20
+const AUDIT_LOG_SORT_FIELDS = [
+  'createdAt',
+  'event',
+  'target',
+  'actor',
+  'sourceType'
+] as const satisfies AuditLogSortField[]
+type AuditLogSortDirection = NonNullable<AuditLogQuery['dir']>
 
 const auditLogParsers = {
   q: parseAsString.withDefault(''),
   category: parseAsString.withDefault(''),
   action: parseAsString.withDefault(''),
-  targetType: parseAsString.withDefault(''),
-  actor: parseAsString.withDefault(''),
   createdAtFrom: parseAsString.withDefault(''),
   createdAtTo: parseAsString.withDefault(''),
-  page: parseAsInteger.withDefault(1)
+  page: parseAsInteger.withDefault(0),
+  size: parseAsInteger.withDefault(DEFAULT_PAGE_SIZE),
+  sort: parseAsString.withDefault(''),
+  dir: parseAsString.withDefault('')
+}
+
+function isAuditLogSortField(value: string): value is AuditLogSortField {
+  return (AUDIT_LOG_SORT_FIELDS as readonly string[]).includes(value)
+}
+
+function isAuditLogSortDirection(value: string): value is AuditLogSortDirection {
+  return value === 'asc' || value === 'desc'
 }
 
 function formatDateTime(value: string): string {
@@ -50,56 +74,274 @@ function formatEventLabel(auditLog: AuditLogEntry): string {
   return `${auditLog.category}.${auditLog.action}`
 }
 
+function formatFilterLabel(value: string): string {
+  return value
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+const categorySelectOptions = AUDIT_LOG_CATEGORIES.map((value) => ({
+  label: formatFilterLabel(value),
+  value
+}))
+const actionSelectOptions = AUDIT_LOG_ACTIONS.map((value) => ({
+  label: formatFilterLabel(value),
+  value
+}))
+
+function SortableAuditLogHeader({
+  column,
+  label
+}: {
+  column: {
+    getIsSorted: () => false | 'asc' | 'desc'
+    toggleSorting: (desc?: boolean) => void
+  }
+  label: string
+}) {
+  const sortDirection = column.getIsSorted()
+  const sortLabel =
+    sortDirection === 'asc'
+      ? 'sorted ascending'
+      : sortDirection === 'desc'
+        ? 'sorted descending'
+        : 'not sorted'
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+      aria-label={`Sort by ${label}, ${sortLabel}`}
+      aria-sort={
+        sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+      }
+    >
+      <span className="truncate">{label}</span>
+      <SortIndicator direction={sortDirection} />
+    </Button>
+  )
+}
+
+function createAuditLogColumns(): ColumnDef<AuditLogEntry>[] {
+  return [
+    {
+      accessorKey: 'createdAt',
+      id: 'createdAt',
+      size: 180,
+      header: ({ column }) => <SortableAuditLogHeader column={column} label="Time" />,
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap text-muted-foreground">
+          {formatDateTime(row.original.createdAt)}
+        </span>
+      )
+    },
+    {
+      id: 'event',
+      size: 160,
+      header: ({ column }) => <SortableAuditLogHeader column={column} label="Event" />,
+      cell: ({ row }) => <Badge variant="secondary">{formatEventLabel(row.original)}</Badge>
+    },
+    {
+      id: 'target',
+      size: 240,
+      header: ({ column }) => <SortableAuditLogHeader column={column} label="Target" />,
+      cell: ({ row }) => (
+        <div className="flex min-w-0 flex-col">
+          <span className="truncate font-medium">
+            {row.original.targetLabel ?? row.original.targetId ?? 'Unknown'}
+          </span>
+          <span className="truncate text-xs text-muted-foreground">{row.original.targetType}</span>
+        </div>
+      )
+    },
+    {
+      id: 'actor',
+      size: 220,
+      header: ({ column }) => <SortableAuditLogHeader column={column} label="Actor" />,
+      cell: ({ row }) => (
+        <div className="flex min-w-0 flex-col">
+          <span className="truncate">
+            {row.original.actorEmail ?? row.original.actorName ?? 'Unknown'}
+          </span>
+          <span className="truncate text-xs text-muted-foreground">
+            {row.original.actorRole ?? 'No role'}
+          </span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'sourceType',
+      id: 'sourceType',
+      size: 180,
+      header: ({ column }) => <SortableAuditLogHeader column={column} label="Source" />,
+      cell: ({ row }) => (
+        <div className="text-muted-foreground">
+          <div className="truncate">{row.original.sourceType}</div>
+          <div className="truncate text-xs">{row.original.ipAddress ?? 'No IP'}</div>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'changedFields',
+      id: 'changedFields',
+      size: 180,
+      enableSorting: false,
+      header: 'Fields',
+      cell: ({ row }) =>
+        row.original.changedFields.length > 0 ? (
+          <div className="flex flex-wrap gap-1">
+            {row.original.changedFields.slice(0, 3).map((field) => (
+              <Badge key={field} variant="outline">
+                {field}
+              </Badge>
+            ))}
+            {row.original.changedFields.length > 3 ? (
+              <Badge variant="outline">+{row.original.changedFields.length - 3}</Badge>
+            ) : null}
+          </div>
+        ) : (
+          <span className="text-muted-foreground">None</span>
+        )
+    }
+  ]
+}
+
 export function AuditLogPageContent() {
   const [selectedAuditLog, setSelectedAuditLog] = React.useState<AuditLogEntry | null>(null)
   const [filters, setFilters] = useQueryStates(auditLogParsers)
-  const safePage = Math.max(1, filters.page)
+  const safePageIndex = Number.isFinite(filters.page) && filters.page > 0 ? filters.page : 0
+  const safePageSize =
+    filters.size === -1 || (Number.isFinite(filters.size) && filters.size > 0)
+      ? filters.size
+      : DEFAULT_PAGE_SIZE
+  const safeSortField = isAuditLogSortField(filters.sort) ? filters.sort : undefined
+  const safeSortDir = safeSortField
+    ? isAuditLogSortDirection(filters.dir)
+      ? filters.dir
+      : 'asc'
+    : undefined
   const query = React.useMemo<AuditLogQuery>(
     () => ({
       search: filters.q || undefined,
       category: filters.category ? (filters.category as AuditLogQuery['category']) : undefined,
       action: filters.action ? (filters.action as AuditLogQuery['action']) : undefined,
-      targetType: filters.targetType || undefined,
-      actor: filters.actor || undefined,
       createdAtFrom: filters.createdAtFrom || undefined,
       createdAtTo: filters.createdAtTo || undefined,
-      page: safePage,
-      pageSize: DEFAULT_PAGE_SIZE
+      page: safePageIndex,
+      pageSize: safePageSize,
+      sort: safeSortField,
+      dir: safeSortDir
     }),
-    [filters, safePage]
+    [filters, safePageIndex, safePageSize, safeSortDir, safeSortField]
   )
   const auditLogsQuery = useAuditLogs(query)
   const cleanupMutation = useCleanupAuditLogs()
   const auditLogs = auditLogsQuery.data?.auditLogs ?? []
-  const total = auditLogsQuery.data?.total ?? 0
-  const totalPages = auditLogsQuery.data?.totalPages ?? 1
+  const totalRows = auditLogsQuery.data?.total ?? 0
+  const effectivePageSize = safePageSize === -1 ? totalRows : safePageSize
+  const pageCount = effectivePageSize > 0 ? Math.ceil(totalRows / effectivePageSize) : 1
+  const shouldShowPagination = totalRows > DEFAULT_PAGE_SIZE
   const activeFilterCount = [
     filters.q,
     filters.category,
     filters.action,
-    filters.targetType,
-    filters.actor,
     filters.createdAtFrom || filters.createdAtTo
   ].filter(Boolean).length
 
-  function updateFilter(updates: Partial<typeof filters>) {
-    void setFilters({ ...updates, page: 1 })
-  }
+  const {
+    columnSizing,
+    handleColumnSizingChange,
+    handlePaginationChange,
+    handleSortingChange,
+    hoveredColumnId,
+    registerTable,
+    resetColumnSizingToContainer,
+    setHoveredColumnId,
+    sorting,
+    tableContainerRef
+  } = useTableUtils<AuditLogEntry>({
+    data: auditLogs,
+    pageIndex: safePageIndex,
+    pageSize: effectivePageSize,
+    setPageIndex: (nextPageIndex) => setFilters({ page: nextPageIndex }),
+    setSortingParams: ({
+      pageIndex: nextPageIndex,
+      sortDir: nextSortDir,
+      sortField: nextSortField
+    }) =>
+      setFilters({
+        page: nextPageIndex,
+        sort: nextSortField,
+        dir: nextSortDir
+      }),
+    sortField: safeSortField,
+    sortDir: safeSortDir
+  })
+  const columns = React.useMemo(() => createAuditLogColumns(), [])
+
+  const table = useReactTable({
+    data: auditLogs,
+    columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: {
+      minSize: 48,
+      size: 220
+    },
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+    pageCount,
+    rowCount: totalRows,
+    onColumnSizingChange: handleColumnSizingChange,
+    onPaginationChange: handlePaginationChange,
+    onSortingChange: handleSortingChange,
+    state: {
+      sorting,
+      columnSizing,
+      pagination: {
+        pageIndex: safePageIndex,
+        pageSize: effectivePageSize
+      }
+    }
+  })
+  registerTable(table)
+  const gridTemplateColumns = table
+    .getVisibleLeafColumns()
+    .map((column) => `${column.getSize()}px`)
+    .join(' ')
+
+  const updateFilter = React.useCallback(
+    (updates: Partial<typeof filters>) => {
+      React.startTransition(() => {
+        void setFilters({ ...updates, page: 0 })
+      })
+    },
+    [setFilters]
+  )
 
-  function clearFilters() {
-    void setFilters({
-      q: null,
-      category: null,
-      action: null,
-      targetType: null,
-      actor: null,
-      createdAtFrom: null,
-      createdAtTo: null,
-      page: 1
+  const handleSearch = React.useCallback(
+    (value: string | null) => {
+      updateFilter({ q: value ?? '' })
+    },
+    [updateFilter]
+  )
+
+  const clearFilters = React.useCallback(() => {
+    React.startTransition(() => {
+      void setFilters({
+        q: null,
+        category: null,
+        action: null,
+        createdAtFrom: null,
+        createdAtTo: null,
+        page: 0
+      })
     })
-  }
+  }, [setFilters])
 
-  function runCleanup() {
+  const runCleanup = React.useCallback(() => {
     cleanupMutation.mutate(undefined, {
       onSuccess: (result) => {
         if (!result.success) {
@@ -116,155 +358,199 @@ export function AuditLogPageContent() {
         toast.error('Failed to clean up audit logs')
       }
     })
-  }
+  }, [cleanupMutation])
+
+  const filtersConfig = [
+    {
+      key: 'category',
+      label: 'Category',
+      type: 'select' as const,
+      value: filters.category,
+      options: categorySelectOptions
+    },
+    {
+      key: 'action',
+      label: 'Action',
+      type: 'select' as const,
+      value: filters.action,
+      options: actionSelectOptions
+    },
+    {
+      key: 'createdAt',
+      label: 'Created',
+      type: 'date-range' as const,
+      from: filters.createdAtFrom,
+      to: filters.createdAtTo
+    }
+  ]
 
   return (
-    <>
+    <React.Fragment>
       <PageHeader
         title="Audit Log"
         actions={
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            disabled={cleanupMutation.isPending}
-            onClick={runCleanup}
-          >
-            {cleanupMutation.isPending ? <LoaderCircle className="animate-spin" /> : <Trash2 />}
-            Cleanup
-          </Button>
-        }
-      />
-      <main className="flex min-h-0 flex-1 flex-col">
-        <AuditLogFilters
-          search={filters.q}
-          category={filters.category}
-          action={filters.action}
-          targetType={filters.targetType}
-          actor={filters.actor}
-          createdAtFrom={filters.createdAtFrom}
-          createdAtTo={filters.createdAtTo}
-          activeFilterCount={activeFilterCount}
-          onSearchChange={(value) => updateFilter({ q: value })}
-          onCategoryChange={(value) => updateFilter({ category: value })}
-          onActionChange={(value) => updateFilter({ action: value })}
-          onTargetTypeChange={(value) => updateFilter({ targetType: value })}
-          onActorChange={(value) => updateFilter({ actor: value })}
-          onCreatedAtFromChange={(value) => updateFilter({ createdAtFrom: value })}
-          onCreatedAtToChange={(value) => updateFilter({ createdAtTo: value })}
-          onClear={clearFilters}
-        />
-        <div className="min-h-0 flex-1 overflow-auto px-4 py-3">
-          <div className="overflow-hidden rounded-lg border border-border bg-card">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[180px]">Time</TableHead>
-                  <TableHead className="w-[160px]">Event</TableHead>
-                  <TableHead>Target</TableHead>
-                  <TableHead className="w-[220px]">Actor</TableHead>
-                  <TableHead className="w-[180px]">Source</TableHead>
-                  <TableHead className="w-[180px]">Fields</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {auditLogsQuery.isPending ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="h-40 text-center text-muted-foreground">
-                      Loading audit logs...
-                    </TableCell>
-                  </TableRow>
-                ) : null}
-                {!auditLogsQuery.isPending && auditLogs.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="h-40 text-center text-muted-foreground">
-                      No audit logs found.
-                    </TableCell>
-                  </TableRow>
-                ) : null}
-                {auditLogs.map((auditLog) => (
-                  <TableRow
-                    key={auditLog.id}
-                    className="cursor-pointer"
-                    onClick={() => setSelectedAuditLog(auditLog)}
-                  >
-                    <TableCell className="whitespace-nowrap text-muted-foreground">
-                      {formatDateTime(auditLog.createdAt)}
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="secondary">{formatEventLabel(auditLog)}</Badge>
-                    </TableCell>
-                    <TableCell className="min-w-[220px]">
-                      <div className="flex min-w-0 flex-col">
-                        <span className="truncate font-medium">
-                          {auditLog.targetLabel ?? auditLog.targetId ?? 'Unknown'}
-                        </span>
-                        <span className="truncate text-xs text-muted-foreground">
-                          {auditLog.targetType}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell className="min-w-[180px]">
-                      <div className="flex min-w-0 flex-col">
-                        <span className="truncate">
-                          {auditLog.actorEmail ?? auditLog.actorName ?? 'Unknown'}
-                        </span>
-                        <span className="truncate text-xs text-muted-foreground">
-                          {auditLog.actorRole ?? 'No role'}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell className="min-w-[160px] text-muted-foreground">
-                      <div className="truncate">{auditLog.sourceType}</div>
-                      <div className="truncate text-xs">{auditLog.ipAddress ?? 'No IP'}</div>
-                    </TableCell>
-                    <TableCell className="min-w-[160px]">
-                      {auditLog.changedFields.length > 0 ? (
-                        <div className="flex flex-wrap gap-1">
-                          {auditLog.changedFields.slice(0, 3).map((field) => (
-                            <Badge key={field} variant="outline">
-                              {field}
-                            </Badge>
-                          ))}
-                          {auditLog.changedFields.length > 3 ? (
-                            <Badge variant="outline">+{auditLog.changedFields.length - 3}</Badge>
-                          ) : null}
-                        </div>
-                      ) : (
-                        <span className="text-muted-foreground">None</span>
-                      )}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-        <div className="flex h-[53px] shrink-0 items-center justify-between border-t border-border bg-background px-4">
-          <p className="text-sm text-muted-foreground">{total} rows</p>
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              disabled={safePage <= 1}
-              onClick={() => void setFilters({ page: safePage - 1 })}
-            >
-              Previous
-            </Button>
-            <span className="min-w-20 text-center text-sm text-muted-foreground">
-              {safePage} / {totalPages}
-            </span>
+          <div className="flex items-center gap-1">
             <Button
               type="button"
               variant="outline"
-              size="sm"
-              disabled={safePage >= totalPages}
-              onClick={() => void setFilters({ page: safePage + 1 })}
+              disabled={cleanupMutation.isPending}
+              onClick={runCleanup}
             >
-              Next
+              {cleanupMutation.isPending ? <LoaderCircle className="animate-spin" /> : <Trash2 />}
+              Cleanup
             </Button>
           </div>
+        }
+      />
+
+      <EntityFiltersBar
+        filters={filtersConfig}
+        activeFilterCount={activeFilterCount}
+        onFilterChange={updateFilter}
+        onClearAll={clearFilters}
+        search={filters.q}
+        searchPlaceholder="Search audit logs..."
+        isPending={auditLogsQuery.isFetching}
+        onSearch={handleSearch}
+      />
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <div className="flex flex-col gap-6 pt-px pb-2 h-full">
+          <Card className="min-h-0 flex-1 p-0">
+            <CardContent ref={tableContainerRef} className="flex min-h-0 flex-1 flex-col p-0">
+              <DataGrid
+                containerClassName="min-h-0 flex-1"
+                gridTemplateColumns={gridTemplateColumns}
+                style={{ width: table.getTotalSize() }}
+              >
+                <DataGridHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <DataGridRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header, headerIndex) => {
+                        const resizeLabel =
+                          typeof header.column.columnDef.header === 'string'
+                            ? header.column.columnDef.header
+                            : header.column.id
+                        const nextHeader = headerGroup.headers[headerIndex + 1]
+                        const canResizeColumn =
+                          header.column.getCanResize() && nextHeader?.column.getCanResize() === true
+                        return (
+                          <DataGridHead
+                            key={header.id}
+                            className="group/resize-header relative overflow-hidden"
+                            data-column-id={header.column.id}
+                            onMouseEnter={() => setHoveredColumnId(header.column.id)}
+                            onMouseLeave={() =>
+                              setHoveredColumnId((current) =>
+                                current === header.column.id ? null : current
+                              )
+                            }
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(header.column.columnDef.header, header.getContext())}
+                            {canResizeColumn ? (
+                              <button
+                                type="button"
+                                aria-label={`Resize ${resizeLabel} column`}
+                                className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:text-foreground focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
+                                data-resize-handle
+                                data-column-hovered={
+                                  hoveredColumnId === header.column.id ? 'true' : 'false'
+                                }
+                                data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
+                                onDoubleClick={resetColumnSizingToContainer}
+                                onMouseDown={header.getResizeHandler()}
+                                onTouchStart={header.getResizeHandler()}
+                              >
+                                <GripVertical
+                                  aria-hidden="true"
+                                  className={cn('size-3.5', {
+                                    'text-ring': header.column.getIsResizing()
+                                  })}
+                                />
+                              </button>
+                            ) : null}
+                          </DataGridHead>
+                        )
+                      })}
+                    </DataGridRow>
+                  ))}
+                </DataGridHeader>
+                <DataGridBody>
+                  {auditLogsQuery.isPending ? (
+                    <DataGridRow>
+                      <DataGridCell
+                        className="flex h-24 items-center justify-center text-center"
+                        style={{ gridColumn: '1 / -1' }}
+                      >
+                        <div className="text-muted-foreground">Loading Audit Logs...</div>
+                      </DataGridCell>
+                    </DataGridRow>
+                  ) : auditLogsQuery.error ? (
+                    <DataGridRow>
+                      <DataGridCell
+                        className="flex h-24 items-center justify-center text-center"
+                        style={{ gridColumn: '1 / -1' }}
+                      >
+                        <div className="text-destructive">
+                          Error loading Audit Logs: {auditLogsQuery.error.message}
+                        </div>
+                      </DataGridCell>
+                    </DataGridRow>
+                  ) : table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <DataGridRow
+                        key={row.id}
+                        className="cursor-pointer hover:bg-muted/50"
+                        onClick={(event) => {
+                          const target = event.target as HTMLElement
+                          if (!event.currentTarget.contains(target)) return
+                          if (target.closest('button, a, input, [role="checkbox"]')) return
+                          setSelectedAuditLog(row.original)
+                        }}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <DataGridCell
+                            key={cell.id}
+                            data-column-id={cell.column.id}
+                            onMouseEnter={() => setHoveredColumnId(cell.column.id)}
+                            onMouseLeave={() =>
+                              setHoveredColumnId((current) =>
+                                current === cell.column.id ? null : current
+                              )
+                            }
+                          >
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </DataGridCell>
+                        ))}
+                      </DataGridRow>
+                    ))
+                  ) : (
+                    <DataGridRow>
+                      <DataGridCell
+                        className="flex h-24 items-center justify-center text-center"
+                        style={{ gridColumn: '1 / -1' }}
+                      >
+                        No Audit Logs found.
+                      </DataGridCell>
+                    </DataGridRow>
+                  )}
+                </DataGridBody>
+              </DataGrid>
+            </CardContent>
+          </Card>
+
+          {shouldShowPagination ? (
+            <DataTablePagination
+              table={table}
+              paginationMode="controlled"
+              pageSize={safePageSize}
+              pageIndex={safePageIndex}
+              pageCount={pageCount}
+              setPageIndex={(nextPageIndex) => setFilters({ page: nextPageIndex })}
+              setPageSize={(nextPageSize) => setFilters({ page: 0, size: nextPageSize })}
+            />
+          ) : null}
         </div>
       </main>
       <AuditLogDetailDrawer
@@ -274,6 +560,6 @@ export function AuditLogPageContent() {
           if (!open) setSelectedAuditLog(null)
         }}
       />
-    </>
+    </React.Fragment>
   )
 }