d1s 0.2.11 → 0.2.13

package/src/components/table-view.jsx

@@ -1,843 +0,0 @@
-// components/table-view.jsx
-'use client';
-
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback
-} from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Loader2, AlertCircle } from 'lucide-react';
-import { useDatabase } from '@/context/database-context';
-import TableToolbar from './table-toolbar';
-import { EditableCell } from './editable-cell';
-import { EditableRow } from './editable-row';
-import DeleteRecordsDialog from './delete-records-dialog';
-import { DatabaseErrorDialog } from './table-error-dialog';
-import { useToast } from '@/hooks/use-toast';
-import { parseSQLError } from '@/lib/parse-sql-error';
-import { ResizableTable, ResizableHeader } from './resize-columns';
-import { SortableHeader, sortData } from './column-sorting';
-
-export function TableView({ tableName }) {
-  // Database context and utilities
-  const { 
-    executeQuery,
-    getCachedTable,
-    updateTableCache,
-    invalidateTable,
-    switchTable,
-    activeTable,
-    updateTableData
-  } = useDatabase();
-  const { toast } = useToast();
-
-  // Table state
-  const [data, setData] = useState(() => []);
-  const [schema, setSchema] = useState([]);
-  const [totalRows, setTotalRows] = useState(0);
-  const [isTableLoading, setIsTableLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState(null);
-
-  // Edit states
-  const [editedCells, setEditedCells] = useState(new Map());
-  const [editedRows, setEditedRows] = useState(new Set());
-  const [newRecords, setNewRecords] = useState([]);
-
-  // Pagination state
-  const [currentPage, setCurrentPage] = useState(1);
-  const [rowsPerPage, setRowsPerPage] = useState(50);
-  const [totalPages, setTotalPages] = useState(1);
-
-  // Selection state
-  const [selectedRows, setSelectedRows] = useState(new Set());
-  const checkboxRef = useRef(null);
-
-  // Delete dialog state
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [deleteError, setDeleteError] = useState(null);
-
-  // Database error dialog state
-  const [showDatabaseError, setShowDatabaseError] = useState(false);
-  const [databaseError, setDatabaseError] = useState(null);
-
-  // Sorting state
-  const [sortConfigs, setSortConfigs] = useState({});
-
-  // Instead of reading from localStorage during initial render,
-  // we initialize with fallback values.
-  const [columnWidths, setColumnWidths] = useState({});
-  const [visibleColumns, setVisibleColumns] = useState([]);
-
-  // On mount (client only) load saved values from localStorage
-  useEffect(() => {
-    if (tableName && typeof window !== 'undefined') {
-      const savedWidths = localStorage.getItem(`table-widths-${tableName}`);
-      if (savedWidths) {
-        setColumnWidths(JSON.parse(savedWidths));
-      }
-      const savedColumns = localStorage.getItem(`table-columns-${tableName}`);
-      if (savedColumns) {
-        try {
-          setVisibleColumns(JSON.parse(savedColumns));
-        } catch (e) {
-          setVisibleColumns([]);
-        }
-      }
-    }
-  }, [tableName]);
-
-  // Load data with proper cache handling
-  const loadTableData = useCallback(async (forceFetch = false) => {
-    if (!tableName) return;
-  
-    // First check cache with correct page and limit
-    const cached = getCachedTable(tableName, currentPage, rowsPerPage);
-  
-    if (cached && !forceFetch) {
-      setData(cached.data);
-      setSchema(cached.schema);
-      setTotalRows(cached.meta.total);
-      setTotalPages(cached.meta.totalPages);
-      return;
-    }
-  
-    // Only show loading state for fresh fetches
-    setIsTableLoading(true);
-    setError(null);
-    setSelectedRows(new Set());
-  
-    try {
-      const result = await switchTable(tableName, {
-        page: currentPage,
-        limit: rowsPerPage,
-        forceFetch
-      });
-  
-      // If the returned meta doesn't have the correct page number, override it:
-      result.meta.page = currentPage;
-  
-      setData(Array.isArray(result.data) ? result.data : []);
-      setSchema(result.schema || []);
-      setTotalRows(result.meta.total);
-      setTotalPages(result.meta.totalPages);
-  
-      return true;
-    } catch (err) {
-      console.error('Error loading table data:', err);
-      setError(err.message || String(err));
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: `Failed to load table: ${err.message}`
-      });
-      throw err;
-    } finally {
-      setIsTableLoading(false);
-    }
-  }, [
-    tableName, 
-    currentPage, 
-    rowsPerPage, 
-    getCachedTable, 
-    switchTable, 
-    toast, 
-    visibleColumns.length
-  ]);  
-
-  // Handle column visibility
-  const handleColumnToggle = useCallback((columnName) => {
-    setVisibleColumns(prev => {
-      const newVisibleColumns = prev.includes(columnName)
-        ? prev.filter(col => col !== columnName)
-        : [...prev, columnName];
-      
-      localStorage.setItem(
-        `table-columns-${tableName}`,
-        JSON.stringify(newVisibleColumns)
-      );
-      
-      return newVisibleColumns;
-    });
-  }, [tableName]);
-
-  // Handle column resize
-  const handleColumnResize = useCallback((column, newWidth) => {
-    setColumnWidths(prev => {
-      const updated = { ...prev, [column]: newWidth };
-      localStorage.setItem(`table-widths-${tableName}`, JSON.stringify(updated));
-      return updated;
-    });
-  }, [tableName]);
-
-  // Handle refresh (explicit user action)
-  const handleRefresh = useCallback(async () => {
-    try {
-      setSelectedRows(new Set());
-      invalidateTable(tableName);
-      await loadTableData(true);
-
-      toast({
-        title: 'Success',
-        description: 'Table data refreshed'
-      });
-    } catch (error) {
-      console.error('Refresh failed:', error);
-      toast({
-        variant: 'destructive',
-        title: 'Refresh Failed',
-        description: error.message
-      });
-    }
-  }, [
-    loadTableData, 
-    invalidateTable, 
-    tableName, 
-    toast
-  ]);
-
-  // Handle sorting
-  const handleSort = useCallback((column, direction) => {
-    setSortConfigs(prev => ({
-      ...prev,
-      [column]: direction
-    }));
-    
-    const sortedData = sortData(data, column, direction);
-    setData(sortedData);
-
-    // Update cache with sorted data using the correct arguments:
-    // tableName, new data array, schema, and meta.
-    const currentCache = getCachedTable(tableName);
-    if (currentCache) {
-      updateTableCache(
-        tableName,
-        sortedData,
-        currentCache.schema,
-        { ...currentCache.meta, currentPage, limit: rowsPerPage },
-        currentPage,
-        rowsPerPage
-      );      
-    }
-  }, [data, tableName, getCachedTable, updateTableCache]);
-
-  // Start editing a cell
-  const handleStartEdit = useCallback((rowIndex, column, originalValue) => {
-    const cellKey = `${rowIndex}-${column}`;
-    setEditedCells((prev) =>
-      new Map(prev).set(cellKey, {
-        value: originalValue,
-        originalValue
-      })
-    );
-    setEditedRows((prev) => new Set(prev).add(rowIndex));
-  }, []);
-
-  // Handle cell value change
-  const handleCellChange = useCallback(
-    (rowIndex, column, value) => {
-      const cellKey = `${rowIndex}-${column}`;
-      const row = data[rowIndex];
-      const originalValue =
-        editedCells.get(cellKey)?.originalValue ?? row[column];
-
-      if (value === originalValue) {
-        // If value is back to original, remove from edited cells
-        const newEditedCells = new Map(editedCells);
-        newEditedCells.delete(cellKey);
-        setEditedCells(newEditedCells);
-
-        // Check if row has any other edits
-        const hasOtherEdits = Array.from(newEditedCells.keys()).some((key) =>
-          key.startsWith(`${rowIndex}-`)
-        );
-        if (!hasOtherEdits) {
-          const newEditedRows = new Set(editedRows);
-          newEditedRows.delete(rowIndex);
-          setEditedRows(newEditedRows);
-        }
-      } else {
-        // Add or update edit
-        setEditedCells((prev) =>
-          new Map(prev).set(cellKey, {
-            value,
-            originalValue
-          })
-        );
-        setEditedRows((prev) => new Set(prev).add(rowIndex));
-      }
-    },
-    [data, editedCells, editedRows]
-  );
-
-  // Add record handlers
-  const handleAddRecord = useCallback(() => {
-    setNewRecords((prev) => [...prev, {}]);
-  }, []);
-
-  const handleRemoveNewRecord = useCallback((index) => {
-    setNewRecords((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-
-  const handleNewRecordChange = useCallback((index, record) => {
-    setNewRecords((prev) => {
-      const updated = [...prev];
-      updated[index] = record;
-      return updated;
-    });
-  }, []);
-
-  // Modified handleSaveChanges function
-  const handleSaveChanges = async (forceUpdate = false) => {
-    setIsSaving(true);
-    try {
-      // ===== Save New Records =====
-      if (newRecords.length > 0) {
-        let addedCount = 0;
-  
-        // Get datetime columns from schema
-        const datetimeColumns = schema
-          .filter((col) => col.type.toLowerCase() === 'datetime')
-          .map((col) => col.name);
-  
-        for (const record of newRecords) {
-          let columnsToInsert = Object.keys(record).filter(
-            (col) =>
-              record[col] !== null &&
-              record[col] !== '' &&
-              record[col] !== 'null'
-          );
-  
-          datetimeColumns.forEach((col) => {
-            if (!columnsToInsert.includes(col)) {
-              columnsToInsert.push(col);
-            }
-          });
-  
-          if (columnsToInsert.length === 0) continue;
-  
-          const values = columnsToInsert.map((col) => {
-            if (datetimeColumns.includes(col)) {
-              return 'CURRENT_TIMESTAMP';
-            }
-  
-            const value = record[col];
-            if (value === null || value === '' || value === 'null') return 'NULL';
-            return `'${value.toString().replace(/'/g, "''")}'`;
-          });
-  
-          const insertQuery = `INSERT INTO ${tableName} (${columnsToInsert.join(
-            ', '
-          )}) VALUES (${values.join(', ')});`;
-  
-          await executeQuery(insertQuery);
-          addedCount++;
-        }
-  
-        if (addedCount > 0) {
-          // Fetch fresh data after insert using updateTableData
-          const result = await updateTableData(tableName);
-          setData(result.data);
-          setTotalRows(result.meta.total);
-          setTotalPages(Math.ceil(result.meta.total / rowsPerPage));
-  
-          toast({
-            title: 'Success',
-            description: `Added ${addedCount} ${
-              addedCount === 1 ? 'record' : 'records'
-            }`
-          });
-        }
-        setNewRecords([]);
-      }
-  
-      // ===== Save Edited Cells =====
-      if (editedCells.size > 0 && (forceUpdate || !databaseError)) {
-        const primaryKeyColumn = schema.find((col) => col.pk === 1)?.name;
-        if (!primaryKeyColumn) {
-          throw new Error('No primary key found in table schema');
-        }
-  
-        const rowUpdates = new Map();
-        editedCells.forEach((edit, cellKey) => {
-          const [rowIndex, column] = cellKey.split('-');
-          const row = data[rowIndex];
-          if (!rowUpdates.has(row[primaryKeyColumn])) {
-            rowUpdates.set(row[primaryKeyColumn], new Map());
-          }
-          rowUpdates.get(row[primaryKeyColumn]).set(column, edit.value);
-        });
-  
-        let updatedCount = 0;
-  
-        for (const [primaryKeyValue, updates] of rowUpdates) {
-          const setClauses = Array.from(updates.entries())
-            .map(([column, value]) => {
-              if (value === null || value === '' || value === 'null') {
-                return `${column} = NULL`;
-              } else if (value === 'CURRENT_TIMESTAMP') {
-                return `${column} = CURRENT_TIMESTAMP`;
-              } else {
-                return `${column} = '${value.toString().replace(/'/g, "''")}'`;
-              }
-            })
-            .join(', ');
-  
-          const updateQuery = `
-            UPDATE ${tableName}
-            SET ${setClauses}
-            WHERE ${primaryKeyColumn} = ${primaryKeyValue};
-          `;
-  
-          await executeQuery(updateQuery);
-          updatedCount++;
-        }
-  
-        if (updatedCount > 0) {
-          // Fetch fresh data after update using updateTableData
-          const result = await updateTableData(tableName);
-          setData(result.data);
-          setTotalRows(result.meta.total);
-          setTotalPages(Math.ceil(result.meta.total / rowsPerPage));
-  
-          toast({
-            title: 'Success',
-            description: `Updated ${updatedCount} ${
-              updatedCount === 1 ? 'record' : 'records'
-            }`
-          });
-        }
-      }
-  
-      // Clear edit states
-      setEditedCells(new Map());
-      setEditedRows(new Set());
-      setDatabaseError(null);
-    } catch (error) {
-  
-      const parsedError = parseSQLError(error);
-      const errorData = {
-        ...parsedError,
-        stderr: error.stderr,
-        stdout: error.stdout
-      };
-  
-      setDatabaseError(errorData);
-      setShowDatabaseError(true);
-  
-    } finally {
-      setIsSaving(false);
-    }
-  };
-  
-  // Handle delete records with cache update
-  const handleDeleteRecords = useCallback(async () => {
-    setIsDeleting(true);
-    setDeleteError(null);
-  
-    if (!tableName) return; // Early return if no table selected
-    
-    setIsDeleting(true);
-    setDeleteError(null);
-
-    try {
-      const primaryKeyColumn = schema.find((col) => col.pk === 1)?.name;
-      if (!primaryKeyColumn) {
-        throw new Error('No primary key found in table schema');
-      }
-      
-      // Store current table name to ensure we don't switch
-      const currentTableName = tableName;
-  
-      const selectedValues = Array.from(selectedRows).map((index) => {
-        const row = data[index];
-        return row[primaryKeyColumn];
-      });
-  
-      if (selectedValues.length === 0) return;
-  
-      const deleteQuery = `DELETE FROM ${tableName} WHERE ${primaryKeyColumn} IN (${selectedValues.join(
-        ','
-      )});`;
-      await executeQuery(deleteQuery);
-  
-      // Update local state
-      const deletedSet = new Set(selectedValues);
-      const updatedData = data.filter((row) => !deletedSet.has(row[primaryKeyColumn]));
-      setData(updatedData);
-      setTotalRows((prev) => prev - selectedValues.length);
-      setTotalPages(Math.ceil((totalRows - selectedValues.length) / rowsPerPage));
-  
-      // Update cache with the correct arguments:
-      // new data array, the same schema, and updated meta.
-      const currentCache = getCachedTable(tableName);
-      if (currentCache) {
-        updateTableCache(
-          tableName,
-          updatedData,
-          currentCache.schema,
-          {
-            ...currentCache.meta,
-            total: currentCache.meta.total - selectedValues.length
-          }
-        );
-      }
-  
-      // If current page becomes empty and it's not the first page
-      if (currentPage > 1 && data.length === selectedValues.length) {
-        setCurrentPage((prev) => prev - 1);
-        await loadTableData();
-      }
-  
-      setShowDeleteDialog(false);
-      setSelectedRows(new Set());
-  
-      toast({
-        title: 'Success',
-        description: `Successfully deleted ${selectedValues.length} ${
-          selectedValues.length === 1 ? 'record' : 'records'
-        }`
-      });
-    } catch (error) {
-      console.error('Delete operation failed:', error);
-      setDeleteError(error.message || String(error));
-    } finally {
-      setIsDeleting(false);
-    }
-  }, [
-    tableName,
-    selectedRows,
-    data,
-    schema,
-    executeQuery,
-    updateTableData,
-    loadTableData,
-    currentPage,
-    rowsPerPage,
-    totalRows,
-    toast,
-    getCachedTable,
-    updateTableCache
-  ]);
-  
-  // Handle discard changes
-  const handleDiscardChanges = () => {
-    setEditedCells(new Map());
-    setEditedRows(new Set());
-    setNewRecords([]);
-    setDatabaseError(null);
-  
-    toast({
-      description: 'Changes discarded'
-    });
-  };
-  
-  // Initialize table data
-  useEffect(() => {
-    if (!tableName) return;
-  
-    // Clear states only when tableName changes
-    setEditedCells(new Map());
-    setEditedRows(new Set());
-    setNewRecords([]);
-    setError(null);
-    setSelectedRows(new Set());
-    setCurrentPage(1); // Always start at page 1 for a new table
-  
-    // Look up the cache using page 1
-    const cached = getCachedTable(tableName, 1, rowsPerPage);
-    if (cached) {
-      setData(cached.data);
-      setSchema(cached.schema);
-      setTotalRows(cached.meta.total);
-      setTotalPages(cached.meta.totalPages);
-      setVisibleColumns((prev) => {
-        if (prev.length) return prev;
-        const columns = cached.schema.map((col) => col.name);
-        localStorage.setItem(`table-columns-${tableName}`, JSON.stringify(columns));
-        return columns;
-      });
-    } else {
-      loadTableData(false);
-    }
-    // Note: The dependency array now only depends on tableName (and rowsPerPage if needed)
-  }, [tableName, rowsPerPage]);
-
-  // Monitor active table changes
-  useEffect(() => {
-    if (activeTable === tableName) {
-      const cached = getCachedTable(tableName);
-      if (cached) {
-        setData(cached.data);
-        setSchema(cached.schema);
-        setTotalRows(cached.meta.total);
-        setTotalPages(cached.meta.totalPages);
-      }
-    }
-  }, [activeTable, tableName, getCachedTable]);
-  
-  // Handle pagination
-  useEffect(() => {
-    if (tableName && !isTableLoading) {
-      // Pass the correct page and limit to the cache lookup
-      const cached = getCachedTable(tableName, currentPage, rowsPerPage);
-
-      if (!cached || currentPage !== cached.meta?.currentPage) {
-        loadTableData(false);
-      }
-    }
-  }, [
-    tableName, 
-    currentPage, 
-    rowsPerPage, 
-    isTableLoading, 
-    loadTableData, 
-    getCachedTable]
-  );
-  
-  // Update checkbox indeterminate state
-  useEffect(() => {
-    if (checkboxRef.current) {
-      checkboxRef.current.indeterminate =
-        selectedRows.size > 0 && selectedRows.size < data.length;
-    }
-  }, [selectedRows.size, data.length]);
-  
-  // Row selection handlers
-  const handleSelectAll = useCallback(
-    (checked) => {
-      setSelectedRows(checked ? new Set(data.map((_, index) => index)) : new Set());
-    },
-    [data]
-  );
-  
-  const handleRowSelect = useCallback((index, checked) => {
-    setSelectedRows((prev) => {
-      const newSelected = new Set(prev);
-      if (checked) {
-        newSelected.add(index);
-      } else {
-        newSelected.delete(index);
-      }
-      return newSelected;
-    });
-  }, []);
-  
-  const handleColumnsResize = useCallback((newWidths) => {
-    setColumnWidths(newWidths);
-    localStorage.setItem(`table-widths-${tableName}`, JSON.stringify(newWidths));
-  }, [tableName]);
-  
-  // Filter schema based on visible columns
-  const visibleSchema = schema.filter(col => visibleColumns.includes(col.name));
-  
-  const hasChanges = editedCells.size > 0 || newRecords.length > 0;
-  
-  // Error display
-  if (error) {
-    return (
-      <div className="p-4">
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>Failed to load table: {error}</AlertDescription>
-        </Alert>
-      </div>
-    );
-  }
-  
-  return (
-    <div className="h-full flex flex-col">
-      <TableToolbar
-        selectedCount={selectedRows.size}
-        totalRows={totalRows}
-        currentPage={currentPage}
-        totalPages={totalPages}
-        rowsPerPage={rowsPerPage}
-        onPageChange={setCurrentPage}
-        onRowsPerPageChange={setRowsPerPage}
-        onAdd={handleAddRecord}
-        onDelete={() => setShowDeleteDialog(true)}
-        onRefresh={handleRefresh}
-        tableName={tableName}
-        disabled={hasChanges}
-        editCount={editedCells.size}
-        newRecordsCount={newRecords.length}
-        isSaving={isSaving}
-        onSaveChanges={handleSaveChanges}
-        onDiscardChanges={handleDiscardChanges}
-        schema={schema}               
-        visibleColumns={visibleColumns}
-        onColumnToggle={handleColumnToggle}
-      />
-  
-      <ResizableTable columns={schema} onColumnsResize={handleColumnResize}>
-        <div className="flex-1 overflow-hidden bg-background font-mono">
-          <ScrollArea className="w-full h-screen">
-            <div className="relative w-max min-w-fit pb-4">
-              <Table>
-                {!isTableLoading && (
-                  <TableHeader className="bg-neutral-100 sticky top-0 z-30">
-                    <TableRow>
-                      <TableHead className="w-10 p-0 border-r border-neutral-200">
-                        <div className="py-0.5 px-3 flex items-center">
-                          <Checkbox
-                            ref={checkboxRef}
-                            checked={selectedRows.size === data.length && data.length > 0}
-                            onCheckedChange={handleSelectAll}
-                            disabled={hasChanges}
-                          />
-                        </div>
-                      </TableHead>
-                      {visibleSchema.map((col) => (
-                        <ResizableHeader
-                          key={col.name}
-                          width={columnWidths[col.name] || 150}
-                          onResize={(width) => handleColumnResize(col.name, width)}
-                          className="py-0.5 whitespace-nowrap border-r border-neutral-200"
-                        >
-                          <SortableHeader
-                            column={col.name}
-                            sortConfig={sortConfigs}
-                            onSort={handleSort}
-                          >
-                            <span className="text-xs font-bold text-foreground">
-                              {col.name}
-                            </span>
-                            <span className="text-xs text-muted-foreground">
-                              {col.type?.toLowerCase()}
-                            </span>
-                          </SortableHeader>
-                        </ResizableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                )}
-
-                <TableBody>
-                {isTableLoading && (
-                  <TableRow className="hover:bg-transparent">
-                    <TableCell 
-                      colSpan={visibleSchema.length + 1} 
-                      className="h-[calc(100vh-200px)]"
-                    >
-                      <div className="h-full w-full flex items-center justify-center">
-                        <Loader2 className="h-6 w-6 animate-spin text-primary" />
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                )}
-                  
-                  {!isTableLoading && (
-                    <>
-                      {/* Render New Records */}
-                      {newRecords.map((record, index) => (
-                        <EditableRow
-                          key={`new-${index}`}
-                          schema={visibleSchema}
-                          onRemove={() => handleRemoveNewRecord(index)}
-                          onChange={(record) => handleNewRecordChange(index, record)}
-                        />
-                      ))}
-
-                      {/* Only show "Table is empty" message when there is no data */}
-                      {data.length === 0 && newRecords.length === 0 ? (
-                        <TableRow className="hover:bg-transparent">
-                          <TableCell
-                            colSpan={visibleSchema.length + 1}
-                            className="h-[calc(100vh-200px)] text-center text-muted-foreground"
-                          >
-                            Table is empty
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        data.map((row, index) => (
-                          <TableRow
-                            key={index}
-                            className={`${selectedRows.has(index) ? 'bg-muted/50' : ''}`}
-                          >
-                            <TableCell className="p-0">
-                              <div className="px-3 py-2.5 flex items-center">
-                                <Checkbox
-                                  checked={selectedRows.has(index)}
-                                  onCheckedChange={(checked) => handleRowSelect(index, checked)}
-                                  disabled={hasChanges}
-                                />
-                              </div>
-                            </TableCell>
-                            {visibleSchema.map((col) => {
-                              const cellKey = `${index}-${col.name}`;
-                              const editState = editedCells.get(cellKey);
-                              return (
-                                <EditableCell
-                                  key={col.name}
-                                  value={editState ? editState.value : row[col.name]}
-                                  row={row}
-                                  column={col.name}
-                                  schema={schema}
-                                  onChange={(value) => handleCellChange(index, col.name, value)}
-                                  onStartEdit={(originalValue) =>
-                                    handleStartEdit(index, col.name, originalValue)
-                                  }
-                                  isEditing={editedCells.has(cellKey)}
-                                  style={{ width: `${columnWidths[col.name] || 150}px` }}
-                                />
-                              );
-                            })}
-                          </TableRow>
-                        ))
-                      )}
-                    </>
-                  )}
-                </TableBody>
-              </Table>
-
-              <ScrollBar orientation="horizontal" />
-            </div>
-          </ScrollArea>
-        </div>
-      </ResizableTable>
-
-      {/* Delete Dialog */}
-      <DeleteRecordsDialog
-        isOpen={showDeleteDialog}
-        onClose={() => {
-          setShowDeleteDialog(false);
-          setDeleteError(null);
-        }}
-        onConfirm={handleDeleteRecords}
-        selectedCount={selectedRows.size}
-        tableName={tableName}
-        isDeleting={isDeleting}
-        error={deleteError}
-      />
-  
-      {/* Database Error Dialog */}
-      <DatabaseErrorDialog
-        isOpen={showDatabaseError}
-        onClose={() => setShowDatabaseError(false)}
-        error={databaseError}
-        onOpenInSQL={() => {
-          setShowDatabaseError(false);
-        }}
-        onUpdateAnyway={async () => {
-          setShowDatabaseError(false);
-          await handleSaveChanges(true); // Force update
-        }}
-        showSQLOption={databaseError?.type === 'NULLABLE_PK'}
-      />
-    </div>
-  );  
-}