navigation

src_generic/components/EnhancedTable.tsx

@@ -15,7 +15,9 @@ import {
 } from '@mui/x-data-grid';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { ResourceConfig, ResourceField } from '../types/config';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useNavigate } from 'react-router-dom';
+import { ResourceConfig } from '../types/config';
 
 interface EnhancedTableProps {
   config: ResourceConfig;
@@ -34,6 +36,7 @@ export default function EnhancedTable({
   onCreate,
   onNavigateToResource,
 }: EnhancedTableProps) {
+  const navigate = useNavigate();
   
   const columns: GridColDef[] = React.useMemo(() => {
     const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
@@ -45,6 +48,9 @@ export default function EnhancedTable({
         renderCell: (params: GridRenderCellParams) => {
           const value = params.value;
           
+          // 0. Link to View if it's the Primary Key (if it's displayed)
+          const isPk = key === config.primaryKey;
+          
           // 1. Custom Formatter
           if (field.formatter) {
             return field.formatter(value);
@@ -99,7 +105,23 @@ export default function EnhancedTable({
           // 4. Default renderings
           if (field.type === 'boolean') return value ? 'Yes' : 'No';
           if (field.type === 'datetime' || field.type === 'date') {
-            return new Date(value).toLocaleString();
+            return (value) ? new Date(value).toLocaleString() : '';
+          }
+
+          if (isPk) {
+            return (
+              <Link
+                component="button"
+                variant="body2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const rowId = params.row[config.primaryKey];
+                  navigate(`/${config.name}/${rowId}`);
+                }}
+              >
+                {value}
+              </Link>
+            );
           }
 
           return value;
@@ -112,12 +134,17 @@ export default function EnhancedTable({
       field: 'actions',
       type: 'actions',
       headerName: 'Actions',
-      width: 100,
+      width: 120,
       getActions: (params) => [
+        <GridActionsCellItem
+          icon={<VisibilityIcon />}
+          label="View"
+          onClick={() => navigate(`/${config.name}/${params.id}`)}
+        />,
         <GridActionsCellItem
           icon={<EditIcon />}
           label="Edit"
-          onClick={() => onEdit(params.row)}
+          onClick={() => navigate(`/${config.name}/edit/${params.id}`)}
         />,
         <GridActionsCellItem
           icon={<DeleteIcon />}
@@ -128,7 +155,7 @@ export default function EnhancedTable({
     });
 
     return cols;
-  }, [config, onEdit, onDelete, onNavigateToResource]);
+  }, [config, onDelete, navigate, onNavigateToResource]);
 
   return (
     <Box sx={{ height: 600, width: '100%' }}>
@@ -144,14 +171,10 @@ export default function EnhancedTable({
         getRowId={(row) => {
             const pk = config.primaryKey;
             if (row[pk] !== undefined && row[pk] !== null) return row[pk];
-            // Fallback: search for common ID fields
-            const fallbackKeys = ['id', 'uuid', 'pk'];
+            const fallbackKeys = ['id', '_id', 'uuid', 'pk'];
             for (const key of fallbackKeys) {
                 if (row[key] !== undefined && row[key] !== null) return row[key];
             }
-            debugger;
-
-            // Absolute fallback: index (not ideal but avoids crash)
             return `temp-id-${data.indexOf(row)}`;
         }}
         disableRowSelectionOnClick