insforge 0.3.3 → 1.3.0

package/frontend/src/features/database/{page/DatabasePage.tsx → pages/TablesPage.tsx}

@@ -1,42 +1,40 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Plus } from 'lucide-react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Plus, Upload } from 'lucide-react';
 import PencilIcon from '@/assets/icons/pencil.svg?react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
-import { databaseService } from '@/features/database/services/database.service';
-import { useMetadata } from '@/features/metadata/hooks/useMetadata';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
+import { useTables } from '@/features/database/hooks/useTables';
+import { useRecords } from '@/features/database/hooks/useRecords';
 import { TableSidebar } from '@/features/database/components/TableSidebar';
 import { RecordFormDialog } from '@/features/database/components/RecordFormDialog';
 import { TableForm } from '@/features/database/components/TableForm';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { EmptyState } from '@/components/EmptyState';
+import { TablesEmptyState } from '@/features/database/components/TablesEmptyState';
+import { TemplatePreview } from '@/features/database/components/TemplatePreview';
+import { DATABASE_TEMPLATES, DatabaseTemplate } from '@/features/database/templates';
 import {
+  Alert,
+  AlertDescription,
+  Button,
+  ConfirmDialog,
+  ConnectCTA,
+  EmptyState,
+  SearchInput,
+  SelectionClearButton,
+  DeleteActionButton,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
+} from '@/components';
 import { useConfirm } from '@/lib/hooks/useConfirm';
 import { useToast } from '@/lib/hooks/useToast';
 import { DatabaseDataGrid } from '@/features/database/components/DatabaseDataGrid';
-import { SearchInput, SelectionClearButton, DeleteActionButton } from '@/components';
 import { SortColumn } from 'react-data-grid';
 import { convertValueForColumn } from '@/lib/utils/utils';
-import { LinkModalProvider, useLinkModal } from '@/features/database/hooks/UseLinkModal';
-import { LinkRecordModal } from '@/features/database/components/LinkRecordModal';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
+import { useCSVImport } from '@/features/database/hooks/useCSVImport';
 
 const PAGE_SIZE = 50;
 
-function DatabasePageContent() {
+export default function TablesPage() {
   // Load selected table from localStorage on mount
   const [selectedTable, setSelectedTable] = useState<string | null>(() => {
     return localStorage.getItem('selectedTable');
@@ -52,13 +50,26 @@ function DatabasePageContent() {
   const [currentPage, setCurrentPage] = useState(1);
   const [isSorting, setIsSorting] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [previewingTemplate, setPreviewingTemplate] = useState<DatabaseTemplate | null>(null);
 
   const { confirm, confirmDialogProps } = useConfirm();
   const { showToast } = useToast();
-  const queryClient = useQueryClient();
-  const { modalState, closeModal } = useLinkModal();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { tables, isLoadingTables, tablesError, deleteTable, useTableSchema, refetchTables } =
+    useTables();
+
+  const recordsHook = useRecords(selectedTable || '');
 
-  const { socket, isConnected } = useSocket();
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file && selectedTable) {
+      importCSV(file);
+    }
+    // Reset file input to allow re-uploading the same file
+    if (event.target) {
+      event.target.value = '';
+    }
+  };
 
   // Persist selected table to localStorage when it changes
   useEffect(() => {
@@ -96,96 +107,71 @@ function DatabasePageContent() {
     [showToast]
   );
 
-  // Fetch metadata
-  const { tables, isLoading, error: metadataError, refetch: refetchMetadata } = useMetadata();
+  // Fetch schema for selected table
+  const { data: schemaData } = useTableSchema(selectedTable || '', !!selectedTable);
 
-  // Fetch table data when selected
-  const {
-    data: tableData,
-    isLoading: isLoadingTable,
-    error: tableError,
-    refetch: refetchTableData,
-  } = useQuery({
-    queryKey: [
-      'table',
-      selectedTable,
-      currentPage,
-      PAGE_SIZE,
-      searchQuery,
-      JSON.stringify(sortColumns),
-    ],
-    queryFn: async () => {
-      if (!selectedTable) {
-        return null;
-      }
+  // Fetch schema for editing table
+  const { data: editingTableSchema } = useTableSchema(editingTable || '', !!editingTable);
 
-      const offset = (currentPage - 1) * PAGE_SIZE;
+  const primaryKeyColumn = useMemo(() => {
+    return schemaData?.columns.find((col) => col.isPrimaryKey)?.columnName;
+  }, [schemaData]);
 
-      try {
-        const [schema, records] = await Promise.all([
-          databaseService.getTableSchema(selectedTable),
-          databaseService.getTableRecords(
-            selectedTable,
-            PAGE_SIZE,
-            offset,
-            searchQuery,
-            sortColumns
-          ),
-        ]);
-
-        return {
-          name: selectedTable,
-          schema,
-          records: records.records,
-          totalRecords: records.pagination.total ?? schema.recordCount,
-        };
-      } catch (error) {
-        // If sorting caused the error, retry without sorting
-        if (sortColumns && sortColumns.length > 0) {
-          setSortColumns([]);
-
-          const [schema, records] = await Promise.all([
-            databaseService.getTableSchema(selectedTable),
-            databaseService.getTableRecords(selectedTable, PAGE_SIZE, offset, searchQuery, []),
-          ]);
-
-          showToast('Sorting not supported for this table. Showing unsorted results.', 'info');
-
-          return {
-            name: selectedTable,
-            schema,
-            records: records.records,
-            totalRecords: records.pagination.total || schema.recordCount,
-          };
-        }
-        throw error;
+  const {
+    mutate: importCSV,
+    isPending: isImporting,
+    reset: resetImport,
+  } = useCSVImport(selectedTable || '', {
+    onSuccess: (data) => {
+      if (data.success) {
+        showToast(data.message || 'Import successful!', 'success');
+        void refetchTableData();
+      } else {
+        // This case handles validation errors returned with a 200 OK but success: false
+        const errorMessage =
+          data.message || 'CSV import failed due to validation errors. Please check the file.';
+        showToast(errorMessage, 'error');
       }
+      resetImport();
+    },
+    onError: (error: Error) => {
+      // This handles 400/500 errors from the API client
+      const message =
+        error?.message || 'An unexpected error occurred during import. Please try again.';
+      showToast(message, 'error');
+      resetImport();
     },
-    enabled: !!selectedTable,
-    placeholderData: (previousData) => previousData, // Keep previous data while loading new sorted data
   });
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (
-        message.payload?.resource === DataUpdateResourceType.METADATA ||
-        message.payload?.resource === DataUpdateResourceType.DATABASE_SCHEMA
-      ) {
-        // Invalidate all tables queries
-        void queryClient.invalidateQueries({ queryKey: ['tables'] });
-      }
-    };
+  // Fetch table records using the hook
+  const offset = (currentPage - 1) * PAGE_SIZE;
+  const {
+    data: recordsData,
+    isLoading: isLoadingRecords,
+    error: recordsError,
+    refetch: refetchRecords,
+  } = recordsHook.useTableRecords(
+    PAGE_SIZE,
+    offset,
+    searchQuery,
+    sortColumns,
+    !!selectedTable && !!schemaData
+  );
 
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
+  // Combine schema and records data
+  const tableData =
+    selectedTable && schemaData && recordsData
+      ? {
+          name: selectedTable,
+          schema: schemaData,
+          records: recordsData.records,
+          totalRecords: recordsData.pagination.total ?? schemaData.recordCount,
+        }
+      : null;
 
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, queryClient]);
+  const isLoadingTable = isLoadingRecords;
+  const tableError = recordsError;
+  const refetchTableData = refetchRecords;
 
   // Reset sorting flag when loading completes
   useEffect(() => {
@@ -196,7 +182,7 @@ function DatabasePageContent() {
 
   // Auto-select first table (excluding system tables)
   useEffect(() => {
-    if (!isLoading && tables) {
+    if (!isLoadingTables && tables) {
       if (pendingTableSelection && tables.includes(pendingTableSelection)) {
         setSelectedTable(pendingTableSelection);
         setPendingTableSelection(undefined);
@@ -208,11 +194,11 @@ function DatabasePageContent() {
         return;
       }
 
-      if (!selectedTable && tables.length > 0 && !showTableForm && !pendingTableSelection) {
+      if (!selectedTable && tables.length && !showTableForm && !pendingTableSelection) {
         setSelectedTable(tables[0]);
       }
     }
-  }, [tables, pendingTableSelection, selectedTable, showTableForm, isLoading]);
+  }, [tables, pendingTableSelection, selectedTable, showTableForm, isLoadingTables]);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -227,7 +213,7 @@ function DatabasePageContent() {
       if (selectedTable) {
         await refetchTableData();
       }
-      await refetchMetadata();
+      await refetchTables();
     } finally {
       setIsRefreshing(false);
     }
@@ -291,28 +277,23 @@ function DatabasePageContent() {
     const shouldDelete = await confirm(confirmOptions);
 
     if (shouldDelete) {
-      try {
-        // Update selectedTable BEFORE deleting to prevent queries on deleted table
-        if (selectedTable === tableName) {
-          setSelectedTable(null);
-        }
-
-        await databaseService.deleteTable(tableName);
-        showToast('Table deleted successfully', 'success');
-
-        // Invalidate all related queries for the deleted table
-        void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-        void queryClient.invalidateQueries({ queryKey: ['tables'] });
-        void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
-        void queryClient.invalidateQueries({ queryKey: ['table-schema', tableName] });
-        void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to delete table';
-        showToast(errorMessage, 'error');
+      // Update selectedTable BEFORE deleting to prevent queries on deleted table
+      if (selectedTable === tableName) {
+        setSelectedTable(null);
       }
+
+      deleteTable(tableName);
     }
   };
 
+  const handleTemplateClick = (template: DatabaseTemplate) => {
+    setPreviewingTemplate(template);
+  };
+
+  const handleCancelPreview = () => {
+    setPreviewingTemplate(null);
+  };
+
   // Handle record update
   const handleRecordUpdate = async (rowId: string, columnKey: string, newValue: string) => {
     if (!selectedTable) {
@@ -331,9 +312,11 @@ function DatabasePageContent() {
           return;
         }
         const updates = { [columnKey]: conversionResult.value };
-        await databaseService.updateRecord(selectedTable, rowId, updates);
-        await refetchTableData();
-        showToast('Record updated successfully', 'success');
+        await recordsHook.updateRecord({
+          pkColumn: primaryKeyColumn || 'id',
+          pkValue: rowId,
+          data: updates,
+        });
       }
     } catch (error) {
       showToast('Failed to update record', 'error');
@@ -343,7 +326,7 @@ function DatabasePageContent() {
 
   // Handle bulk delete
   const handleBulkDelete = async (ids: string[]) => {
-    if (!selectedTable || ids.length === 0) {
+    if (!selectedTable || !ids.length) {
       return;
     }
 
@@ -355,51 +338,25 @@ function DatabasePageContent() {
     });
 
     if (shouldDelete) {
-      try {
-        await Promise.all(ids.map((id) => databaseService.deleteRecord(selectedTable, id)));
-        await Promise.all([
-          refetchTableData(),
-          refetchMetadata(), // Also refresh metadata to update sidebar record counts
-        ]);
-        setSelectedRows(new Set());
-        showToast(`${ids.length} records deleted successfully`, 'success');
-      } catch {
-        showToast('Failed to delete some records', 'error');
-      }
+      await recordsHook.deleteRecords({ pkColumn: primaryKeyColumn || 'id', pkValues: ids });
+      // Query invalidation is handled by the mutation, no manual refetch needed
+      setSelectedRows(new Set());
     }
   };
 
-  const error = metadataError || tableError;
-
-  // Fetch schema for selected table
-  const { data: schemaData } = useQuery({
-    queryKey: ['table-schema', selectedTable],
-    queryFn: async () => {
-      if (!selectedTable) {
-        return undefined;
-      }
-      return await databaseService.getTableSchema(selectedTable);
-    },
-    enabled: !!selectedTable,
-    staleTime: 30 * 1000, // 30 seconds
-  });
-
-  // Fetch schema for editing table
-  const { data: editingTableSchema } = useQuery({
-    queryKey: ['table-schema', editingTable],
-    queryFn: async () => {
-      if (!editingTable) {
-        return undefined;
-      }
-      const editingTableSchema = await databaseService.getTableSchema(editingTable);
-      return editingTableSchema;
-    },
-    enabled: !!editingTable,
-  });
+  const error = tablesError || tableError;
 
   // Calculate pagination
   const totalPages = Math.ceil((tableData?.totalRecords || 0) / PAGE_SIZE);
 
+  // Show empty state when there are no tables and not loading
+  const showEmptyState = !isLoadingTables && tables?.length === 0 && !showTableForm;
+
+  // Show template preview - takes full width without sidebar
+  if (previewingTemplate) {
+    return <TemplatePreview template={previewingTemplate} onCancel={handleCancelPreview} />;
+  }
+
   return (
     <div className="flex h-full bg-bg-gray dark:bg-neutral-800">
       {/* Secondary Sidebar - Table List */}
@@ -407,7 +364,7 @@ function DatabasePageContent() {
         tables={tables}
         selectedTable={selectedTable || undefined}
         onTableSelect={handleSelectTable}
-        loading={isLoading}
+        loading={isLoadingTables}
         onNewTable={handleCreateTable}
         onEditTable={handleEditTable}
         onDeleteTable={(tableName) => void handleDeleteTable(tableName)}
@@ -428,7 +385,7 @@ function DatabasePageContent() {
             editTable={editingTable ? editingTableSchema : undefined}
             setFormIsDirty={setIsTableFormDirty}
             onSuccess={(newTableName?: string) => {
-              void refetchMetadata();
+              void refetchTables();
               void refetchTableData();
               setShowTableForm(false);
               setPendingTableSelection(newTableName);
@@ -469,7 +426,6 @@ function DatabasePageContent() {
                               <p>Edit Table</p>
                             </TooltipContent>
                           </Tooltip>
-
                           <Tooltip>
                             <TooltipTrigger asChild>
                               <Button
@@ -503,11 +459,13 @@ function DatabasePageContent() {
                             itemType="record"
                             onClear={() => setSelectedRows(new Set())}
                           />
-                          <DeleteActionButton
-                            selectedCount={selectedRows.size}
-                            itemType="record"
-                            onDelete={() => void handleBulkDelete(Array.from(selectedRows))}
-                          />
+                          {
+                            <DeleteActionButton
+                              selectedCount={selectedRows.size}
+                              itemType="record"
+                              onDelete={() => void handleBulkDelete(Array.from(selectedRows))}
+                            />
+                          }
                         </div>
                       ) : (
                         <SearchInput
@@ -519,8 +477,18 @@ function DatabasePageContent() {
                         />
                       )}
                       <div className="flex items-center gap-2 ml-4">
-                        {selectedRows.size === 0 && selectedTable !== 'users' && (
+                        {selectedRows.size === 0 && (
                           <>
+                            {/* Import CSV Button */}
+                            <Button
+                              variant="secondary"
+                              className="h-10 px-4 font-medium gap-1.5 border border-zinc-200 dark:border-neutral-600"
+                              onClick={() => fileInputRef.current?.click()}
+                              disabled={isImporting}
+                            >
+                              <Upload className="w-5 h-5" />
+                              {isImporting ? 'Importing...' : 'Import CSV'}
+                            </Button>
                             {/* Add Record Button */}
                             <Button
                               className="h-10 px-4 font-medium gap-1.5 dark:bg-emerald-300 dark:hover:bg-emerald-400"
@@ -546,7 +514,13 @@ function DatabasePageContent() {
                 </Alert>
               )}
 
-              {!selectedTable ? (
+              {showEmptyState ? (
+                <TablesEmptyState
+                  templates={DATABASE_TEMPLATES}
+                  onCreateTable={handleCreateTable}
+                  onTemplateClick={handleTemplateClick}
+                />
+              ) : !selectedTable ? (
                 <div className="flex-1 flex items-center justify-center">
                   <EmptyState
                     title="No Table Selected"
@@ -560,18 +534,24 @@ function DatabasePageContent() {
                   loading={isLoadingTable && !tableData}
                   isSorting={isSorting}
                   isRefreshing={isRefreshing}
+                  rowKeyGetter={(row) => String(row[primaryKeyColumn || 'id'])}
                   selectedRows={selectedRows}
                   onSelectedRowsChange={setSelectedRows}
                   sortColumns={sortColumns}
                   onSortColumnsChange={handleSortColumnsChange}
                   onCellEdit={handleRecordUpdate}
                   onJumpToTable={setSelectedTable}
-                  searchQuery={searchQuery}
                   currentPage={currentPage}
                   totalPages={totalPages}
                   pageSize={PAGE_SIZE}
                   totalRecords={tableData?.totalRecords || 0}
                   onPageChange={setCurrentPage}
+                  emptyState={
+                    <div className="text-sm text-black dark:text-white">
+                      {searchQuery ? 'No records match your search criteria' : 'No records found'}.{' '}
+                      <ConnectCTA />
+                    </div>
+                  }
                 />
               )}
             </div>
@@ -579,6 +559,14 @@ function DatabasePageContent() {
         )}
       </div>
 
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileSelect}
+        accept=".csv,text/csv"
+        style={{ display: 'none' }}
+      />
+
       {/* Add Record Form */}
       {selectedTable && schemaData && (
         // In the RecordForm onSuccess callback
@@ -587,40 +575,11 @@ function DatabasePageContent() {
           onOpenChange={setShowRecordForm}
           tableName={selectedTable}
           schema={schemaData.columns}
-          onSuccess={() => {
-            void refetchTableData();
-            void refetchMetadata();
-            // Also invalidate the schema cache to ensure fresh data
-            void queryClient.invalidateQueries({ queryKey: ['table-schema', selectedTable] });
-          }}
         />
       )}
 
       {/* Confirm Dialog */}
       <ConfirmDialog {...confirmDialogProps} />
-
-      {/* Global Link Record Modal */}
-      {modalState.isOpen && modalState.referenceTable && modalState.referenceColumn && (
-        <LinkRecordModal
-          open={modalState.isOpen}
-          onOpenChange={closeModal}
-          referenceTable={modalState.referenceTable}
-          referenceColumn={modalState.referenceColumn}
-          currentValue={modalState.currentValue}
-          onSelectRecord={(record) => {
-            modalState.onSelectRecord?.(record);
-            closeModal();
-          }}
-        />
-      )}
     </div>
   );
 }
-
-export default function DatabasePage() {
-  return (
-    <LinkModalProvider>
-      <DatabasePageContent />
-    </LinkModalProvider>
-  );
-}

package/frontend/src/features/database/pages/TemplatesPage.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { DATABASE_TEMPLATES, type DatabaseTemplate } from '@/features/database/templates';
+import { useSQLEditorContext } from '@/features/database/contexts/SQLEditorContext';
+import { TemplateCard } from '@/features/database/components/TemplateCard';
+
+export default function TemplatesPage() {
+  const navigate = useNavigate();
+  const { addTab } = useSQLEditorContext();
+
+  const handleTemplateClick = (template: DatabaseTemplate) => {
+    // Create a new tab with the template's SQL query prefilled
+    addTab(template.sql, template.title);
+    // Navigate to the SQL Editor page
+    void navigate('/dashboard/database/sql-editor');
+  };
+
+  return (
+    <div className="flex flex-col h-full items-center bg-bg-gray dark:bg-neutral-800 overflow-auto">
+      {/* Main Content - Centered */}
+      <div className="flex flex-col max-w-[1024px] justify-center px-6 pb-6">
+        {/* Header */}
+        <div className="flex items-center justify-start gap-3 h-[72px] bg-bg-gray dark:bg-neutral-800 flex-shrink-0">
+          <h1 className="text-xl font-semibold text-zinc-950 dark:text-white">Database Template</h1>
+        </div>
+        <div className="w-full max-w-[1024px]">
+          <div className="grid grid-cols-2 xl:grid-cols-3 gap-6">
+            {DATABASE_TEMPLATES.map((template) => (
+              <TemplateCard
+                key={template.id}
+                template={template}
+                onClick={() => handleTemplateClick(template)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}