feat: refactor components to utilize DataGridCard for improved UI consistency

Updated various components including AccessApiKeysCard, FirewallClientsGrid, FirewallRulesGrid, ModuleEntriesSection, and DirectoriesComponent to replace traditional card and table structures with the new DataGridCard component. This change enhances the user interface by providing a more consistent layout and improved loading states. Additionally, integrated QueryState for better handling of loading and error scenarios across these components, streamlining the overall user experience.
2026-07-09 02:31:50 +07:00
parent 5d1102b497
commit b321aa5321
33 changed files with 2281 additions and 1330 deletions
@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import type { Table } from '@tanstack/react-table'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import {
+  DATA_GRID_PAGINATION_RU,
+  DATA_GRID_TABLE_LAYOUT,
+} from '@/lib/data-grid-defaults'
+
+interface DataGridShellProps<TData extends object> {
+  table: Table<TData>
+  recordCount: number
+  isLoading?: boolean
+  emptyMessage?: ReactNode
+  showPagination?: boolean
+  tableLayout?: typeof DATA_GRID_TABLE_LAYOUT
+  className?: string
+  onRowClick?: (row: TData) => void
+}
+
+export function DataGridShell<TData extends object>({
+  table,
+  recordCount,
+  isLoading = false,
+  emptyMessage,
+  showPagination = true,
+  tableLayout = DATA_GRID_TABLE_LAYOUT,
+  className,
+  onRowClick,
+}: DataGridShellProps<TData>) {
+  return (
+    <DataGrid
+      table={table}
+      recordCount={recordCount}
+      isLoading={isLoading}
+      emptyMessage={emptyMessage}
+      tableLayout={tableLayout}
+      className={className}
+      onRowClick={onRowClick}
+    >
+      <DataGridContainer>
+        <DataGridTable />
+      </DataGridContainer>
+      {showPagination ? <DataGridPagination {...DATA_GRID_PAGINATION_RU} /> : null}
+    </DataGrid>
+  )
+}
+
+interface DataGridCardProps {
+  title?: string
+  description?: string
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
+  const hasHeader = Boolean(title || description || actions)
+  return (
+    <Card className={className ?? 'gap-0'}>
+      {hasHeader ? (
+        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
+          <div className="flex flex-col gap-0.5">
+            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </div>
+          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+        </CardHeader>
+      ) : null}
+      <CardContent className="p-0">{children}</CardContent>
+    </Card>
+  )
+}