@object-ui/plugin-grid 0.5.0 → 3.0.0

package/src/ObjectGrid.tsx

@@ -23,16 +23,19 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
-import { SchemaRenderer, useDataScope } from '@object-ui/react';
+import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
-import { Button } from '@object-ui/components';
+import { Button, NavigationOverlay } from '@object-ui/components';
+import { usePullToRefresh } from '@object-ui/mobile';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@object-ui/components';
-import { Edit, Trash2, MoreVertical } from 'lucide-react';
+import { Edit, Trash2, MoreVertical, ChevronRight, ChevronDown } from 'lucide-react';
+import { useRowColor } from './useRowColor';
+import { useGroupedData } from './useGroupedData';
 
 export interface ObjectGridProps {
   schema: ObjectGridSchema;
@@ -42,7 +45,9 @@ export interface ObjectGridProps {
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
   onBulkDelete?: (records: any[]) => void;
-  onCellChange?: (rowIndex: number, columnKey: string, newValue: any) => void;
+  onCellChange?: (rowIndex: number, columnKey: string, newValue: any, row: any) => void;
+  onRowSave?: (rowIndex: number, changes: Record<string, any>, row: any) => void | Promise<void>;
+  onBatchSave?: (changes: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => void | Promise<void>;
   onRowSelect?: (selectedRows: any[]) => void;
 }
 
@@ -109,12 +114,33 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   onDelete,
   onRowSelect,
   onRowClick,
+  onCellChange,
+  onRowSave,
+  onBatchSave,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
+  const [useCardView, setUseCardView] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handlePullRefresh = useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handlePullRefresh,
+    enabled: !!dataSource && !!schema.objectName,
+  });
+
+  useEffect(() => {
+    const checkWidth = () => setUseCardView(window.innerWidth < 480);
+    checkWidth();
+    window.addEventListener('resize', checkWidth);
+    return () => window.removeEventListener('resize', checkWidth);
+  }, []);
 
   // Check if data is passed directly (from ListView)
   const passedData = (rest as any).data;
@@ -146,6 +172,20 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   
   const hasInlineData = dataConfig?.provider === 'value';
 
+  // Extract stable primitive/reference-stable values from schema for dependency arrays.
+  // This prevents infinite re-render loops when schema is a new object on each render
+  // (e.g. when rendered through SchemaRenderer which creates a fresh evaluatedSchema).
+  const objectName = dataConfig?.provider === 'object' && dataConfig && 'object' in dataConfig
+    ? (dataConfig as any).object
+    : schema.objectName;
+  const schemaFields = schema.fields;
+  const schemaColumns = schema.columns;
+  const schemaFilter = schema.filter;
+  const schemaSort = schema.sort;
+  const schemaPagination = schema.pagination;
+  const schemaPageSize = schema.pageSize;
+
+  // --- Inline data effect (synchronous, no fetch needed) ---
   useEffect(() => {
     if (hasInlineData && dataConfig?.provider === 'value') {
        // Only update if data is different to avoid infinite loop
@@ -160,42 +200,122 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     }
   }, [hasInlineData, dataConfig]);
 
+  // --- Unified async data loading effect ---
+  // Combines schema fetch + data fetch into a single async flow with AbortController.
+  // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
+  // triggering Effect 2 to call fetchData — a pattern prone to infinite loops when
+  // fetchData's reference is unstable.
   useEffect(() => {
-    const fetchObjectSchema = async () => {
+    if (hasInlineData) return;
+
+    let cancelled = false;
+
+    const loadSchemaAndData = async () => {
+      setLoading(true);
+      setError(null);
       try {
-        if (!dataSource) {
+        // --- Step 1: Resolve object schema ---
+        let resolvedSchema: any = null;
+        const cols = normalizeColumns(schemaColumns) || schemaFields;
+
+        if (cols && objectName) {
+          // We have explicit columns — use a minimal schema stub
+          resolvedSchema = { name: objectName, fields: {} };
+        } else if (objectName && dataSource) {
+          // Fetch full schema from DataSource
+          const schemaData = await dataSource.getObjectSchema(objectName);
+          if (cancelled) return;
+          resolvedSchema = schemaData;
+        } else if (!objectName) {
+          throw new Error('Object name required for data fetching');
+        } else {
           throw new Error('DataSource required');
         }
-        
-        // For object provider, get the object name
-        const objectName = dataConfig?.provider === 'object' && 'object' in dataConfig
-          ? dataConfig.object 
-          : schema.objectName;
-          
-        if (!objectName) {
-          throw new Error('Object name required for object provider');
+
+        if (!cancelled) {
+          setObjectSchema(resolvedSchema);
+        }
+
+        // --- Step 2: Fetch data ---
+        if (dataSource && objectName) {
+          const getSelectFields = () => {
+            if (schemaFields) return schemaFields;
+            if (schemaColumns && Array.isArray(schemaColumns)) {
+              return schemaColumns.map((c: any) => typeof c === 'string' ? c : c.field);
+            }
+            return undefined;
+          };
+
+          const params: any = {
+            $select: getSelectFields(),
+            $top: (schemaPagination as any)?.pageSize || schemaPageSize || 50,
+          };
+
+          // Support new filter format
+          if (schemaFilter && Array.isArray(schemaFilter)) {
+            params.$filter = schemaFilter;
+          } else if (schema.defaultFilters) {
+            // Legacy support
+            params.$filter = schema.defaultFilters;
+          }
+
+          // Support new sort format
+          if (schemaSort) {
+            if (typeof schemaSort === 'string') {
+              params.$orderby = schemaSort;
+            } else if (Array.isArray(schemaSort)) {
+              params.$orderby = schemaSort
+                .map((s: any) => `${s.field} ${s.order}`)
+                .join(', ');
+            }
+          } else if (schema.defaultSort) {
+            // Legacy support
+            params.$orderby = `${(schema.defaultSort as any).field} ${(schema.defaultSort as any).order}`;
+          }
+
+          const result = await dataSource.find(objectName, params);
+          if (cancelled) return;
+          setData(result.data || []);
         }
-        
-        const schemaData = await dataSource.getObjectSchema(objectName);
-        setObjectSchema(schemaData);
       } catch (err) {
-        setError(err as Error);
+        if (!cancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
     };
 
-    // Normalize columns (support both legacy 'fields' and new 'columns')
-    const cols = normalizeColumns(schema.columns) || schema.fields;
-    
-    if (hasInlineData && cols) {
-      setObjectSchema({ name: schema.objectName, fields: {} });
-    } else if (schema.objectName && !hasInlineData && dataSource) {
-      fetchObjectSchema();
-    }
-  }, [schema.objectName, schema.columns, schema.fields, dataSource, hasInlineData, dataConfig]);
+    loadSchemaAndData();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig, refreshKey]);
+
+  // --- NavigationConfig support ---
+  // Must be called before any early returns to satisfy React hooks rules
+  const navigation = useNavigationOverlay({
+    navigation: schema.navigation,
+    objectName: schema.objectName,
+    onNavigate: schema.onNavigate,
+    onRowClick,
+  });
+
+  // --- Action support for action columns ---
+  const { execute: executeAction } = useAction();
+
+  // --- Row color support ---
+  const getRowClassName = useRowColor(schema.rowColor);
+
+  // --- Grouping support ---
+  const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
 
   const generateColumns = useCallback(() => {
     // Use normalized columns (support both new and legacy)
-    const cols = normalizeColumns(schema.columns);
+    const cols = normalizeColumns(schemaColumns);
     
     if (cols) {
       // Check if columns are already in data-table format (have 'accessorKey')
@@ -208,17 +328,112 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
           return cols;
         }
         
-        // ListColumn format - convert to data-table format
+        // ListColumn format - convert to data-table format with full feature support
         if ('field' in firstCol) {
           return (cols as ListColumn[])
-            .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
-            .map((col) => ({
-              header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
-              accessorKey: col.field,
-              ...(col.width && { width: col.width }),
-              ...(col.align && { align: col.align }),
-              sortable: col.sortable !== false,
-            }));
+            .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
+            .map((col, colIndex) => {
+              const header = col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
+
+              // Build custom cell renderer based on column configuration
+              let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
+
+              // Type-based cell renderer (e.g., "currency", "date", "boolean")
+              const CellRenderer = col.type ? getCellRenderer(col.type) : null;
+
+              if (col.link && col.action) {
+                // Both link and action: link takes priority for navigation, action executes on secondary interaction
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.link) {
+                // Link column: clicking navigates to the record detail
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.action) {
+                // Action column: clicking executes the registered action
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        executeAction({
+                          type: col.action!,
+                          params: { record: row, field: col.field, value },
+                        });
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (CellRenderer) {
+                // Type-only cell renderer (no link/action)
+                cellRenderer = (value: any) => (
+                  <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                );
+              } else {
+                // Default renderer with empty value handling
+                cellRenderer = (value: any) => (
+                  value != null && value !== ''
+                    ? <span>{String(value)}</span>
+                    : <span className="text-muted-foreground">-</span>
+                );
+              }
+
+              // Auto-infer alignment from field type if not explicitly set
+              const numericTypes = ['number', 'currency', 'percent'];
+              const inferredAlign = col.align || (col.type && numericTypes.includes(col.type) ? 'right' as const : undefined);
+
+              // Determine if column should be hidden on mobile
+              const isEssential = colIndex === 0 || (col as any).essential === true;
+
+              return {
+                header,
+                accessorKey: col.field,
+                ...(!isEssential && { className: 'hidden sm:table-cell' }),
+                ...(col.width && { width: col.width }),
+                ...(inferredAlign && { align: inferredAlign }),
+                sortable: col.sortable !== false,
+                ...(col.resizable !== undefined && { resizable: col.resizable }),
+                ...(col.wrap !== undefined && { wrap: col.wrap }),
+                ...(cellRenderer && { cell: cellRenderer }),
+              };
+            });
         }
       }
       
@@ -238,7 +453,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     if (hasInlineData) {
       const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
       if (inlineData.length > 0) {
-        const fieldsToShow = schema.fields || Object.keys(inlineData[0]);
+        const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
         return fieldsToShow.map((fieldName) => ({
           header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
           accessorKey: fieldName,
@@ -249,7 +464,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     if (!objectSchema) return [];
 
     const generatedColumns: any[] = [];
-    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
+    const fieldsToShow = schemaFields || Object.keys(objectSchema.fields || {});
     
     fieldsToShow.forEach((fieldName) => {
       const field = objectSchema.fields?.[fieldName];
@@ -258,87 +473,22 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       if (field.permissions && field.permissions.read === false) return;
 
       const CellRenderer = getCellRenderer(field.type);
+      const numericTypes = ['number', 'currency', 'percent'];
       generatedColumns.push({
         header: field.label || fieldName,
         accessorKey: fieldName,
+        ...(numericTypes.includes(field.type) && { align: 'right' }),
         cell: (value: any) => <CellRenderer value={value} field={field} />,
         sortable: field.sortable !== false,
       });
     });
 
     return generatedColumns;
-  }, [objectSchema, schema.fields, schema.columns, dataConfig, hasInlineData]);
-
-  const fetchData = useCallback(async () => {
-    if (hasInlineData || !dataSource) return;
-
-    setLoading(true);
-    try {
-      // Get object name from data config or schema
-      const objectName = dataConfig?.provider === 'object' && 'object' in dataConfig
-        ? dataConfig.object 
-        : schema.objectName;
-        
-      if (!objectName) {
-        throw new Error('Object name required for data fetching');
-      }
-      
-      // Helper to get select fields
-      const getSelectFields = () => {
-        if (schema.fields) return schema.fields;
-        if (schema.columns && Array.isArray(schema.columns)) {
-          return schema.columns.map(c => typeof c === 'string' ? c : c.field);
-        }
-        return undefined;
-      };
-      
-      const params: any = {
-        $select: getSelectFields(),
-        $top: schema.pagination?.pageSize || schema.pageSize || 50,
-      };
-
-      // Support new filter format
-      if (schema.filter && Array.isArray(schema.filter)) {
-        params.$filter = schema.filter;
-      } else if ('defaultFilters' in schema && schema.defaultFilters) {
-        // Legacy support
-        params.$filter = schema.defaultFilters;
-      }
-
-      // Support new sort format
-      if (schema.sort) {
-        if (typeof schema.sort === 'string') {
-          // Legacy string format
-          params.$orderby = schema.sort;
-        } else if (Array.isArray(schema.sort)) {
-          // New array format
-          params.$orderby = schema.sort
-            .map(s => `${s.field} ${s.order}`)
-            .join(', ');
-        }
-      } else if ('defaultSort' in schema && schema.defaultSort) {
-        // Legacy support
-        params.$orderby = `${schema.defaultSort.field} ${schema.defaultSort.order}`;
-      }
-
-      const result = await dataSource.find(objectName, params);
-      setData(result.data || []);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  }, [schema, dataSource, hasInlineData, dataConfig]);
-
-  useEffect(() => {
-    if (objectSchema || hasInlineData) {
-      fetchData();
-    }
-  }, [objectSchema, hasInlineData, fetchData]);
+  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction]);
 
   if (error) {
     return (
-      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+      <div className="p-3 sm:p-4 border border-red-300 bg-red-50 rounded-md">
         <h3 className="text-red-800 font-semibold">Error loading grid</h3>
         <p className="text-red-600 text-sm mt-1">{error.message}</p>
       </div>
@@ -347,7 +497,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
 
   if (loading && data.length === 0) {
     return (
-      <div className="p-8 text-center">
+      <div className="p-4 sm:p-8 text-center">
         <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
         <p className="mt-2 text-sm text-gray-600">Loading grid...</p>
       </div>
@@ -357,7 +507,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const columns = generateColumns();
   const operations = 'operations' in schema ? schema.operations : undefined;
   const hasActions = operations && (operations.update || operations.delete);
-  
+
   const columnsWithActions = hasActions ? [
     ...columns,
     {
@@ -366,7 +516,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       cell: (_value: any, row: any) => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Button variant="ghost" size="icon" className="h-8 w-8 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0">
               <MoreVertical className="h-4 w-4" />
               <span className="sr-only">Open menu</span>
             </Button>
@@ -428,10 +578,156 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     rowActions: hasActions,
     resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
     reorderableColumns: schema.reorderableColumns ?? false,
+    editable: schema.editable ?? false,
     className: schema.className,
+    cellClassName: 'px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-2.5',
+    rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
     onSelectionChange: onRowSelect,
-    onRowClick: onRowClick,
+    onRowClick: navigation.handleClick,
+    onCellChange: onCellChange,
+    onRowSave: onRowSave,
+    onBatchSave: onBatchSave,
   };
 
-  return <SchemaRenderer schema={dataTableSchema} />;
+  /** Build a per-group data-table schema (inherits everything except data & pagination). */
+  const buildGroupTableSchema = (groupRows: any[]) => ({
+    ...dataTableSchema,
+    caption: undefined,
+    data: groupRows,
+    pagination: false,
+    searchable: false,
+  });
+
+  // Build record detail title
+  const detailTitle = schema.label
+    ? `${schema.label} Detail`
+    : schema.objectName
+      ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
+      : 'Record Detail';
+
+  // Mobile card-view fallback for screens below 480px
+  if (useCardView && data.length > 0 && !isGrouped) {
+    const displayColumns = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
+    return (
+      <>
+        <div className="space-y-2 p-2">
+          {data.map((row, idx) => (
+            <div
+              key={row.id || row._id || idx}
+              className="border rounded-lg p-3 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation"
+              onClick={() => navigation.handleClick(row)}
+            >
+              {displayColumns.slice(0, 4).map((col: any) => (
+                <div key={col.accessorKey} className="flex justify-between items-center py-1">
+                  <span className="text-xs text-muted-foreground">{col.header}</span>
+                  <span className="text-sm font-medium truncate ml-2 text-right">
+                    {col.cell ? col.cell(row[col.accessorKey], row) : String(row[col.accessorKey] ?? '—')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        {navigation.isOverlay && (
+          <NavigationOverlay {...navigation} title={detailTitle}>
+            {(record) => (
+              <div className="space-y-3">
+                {Object.entries(record).map(([key, value]) => (
+                  <div key={key} className="flex flex-col">
+                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      {key.replace(/_/g, ' ')}
+                    </span>
+                    <span className="text-sm">{String(value ?? '—')}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </NavigationOverlay>
+        )}
+      </>
+    );
+  }
+
+  // Render grid content: grouped (multiple tables with headers) or flat (single table)
+  const gridContent = isGrouped ? (
+    <div className="space-y-2">
+      {groups.map((group) => (
+        <div key={group.key} className="border rounded-md">
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-left bg-muted/50 hover:bg-muted transition-colors"
+            onClick={() => toggleGroup(group.key)}
+          >
+            {group.collapsed
+              ? <ChevronRight className="h-4 w-4 shrink-0" />
+              : <ChevronDown className="h-4 w-4 shrink-0" />}
+            <span>{group.label}</span>
+            <span className="ml-auto text-xs text-muted-foreground">{group.rows.length}</span>
+          </button>
+          {!group.collapsed && (
+            <SchemaRenderer schema={buildGroupTableSchema(group.rows)} />
+          )}
+        </div>
+      ))}
+    </div>
+  ) : (
+    <SchemaRenderer schema={dataTableSchema} />
+  );
+
+  // For split mode, wrap the grid in the ResizablePanelGroup
+  if (navigation.isOverlay && navigation.mode === 'split') {
+    return (
+      <NavigationOverlay
+        {...navigation}
+        title={detailTitle}
+        mainContent={gridContent}
+      >
+        {(record) => (
+          <div className="space-y-3">
+            {Object.entries(record).map(([key, value]) => (
+              <div key={key} className="flex flex-col">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  {key.replace(/_/g, ' ')}
+                </span>
+                <span className="text-sm">{String(value ?? '—')}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </NavigationOverlay>
+    );
+  }
+
+  return (
+    <div ref={pullRef} className="relative h-full">
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      {gridContent}
+      {navigation.isOverlay && (
+        <NavigationOverlay
+          {...navigation}
+          title={detailTitle}
+        >
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
+    </div>
+  );
 };