insforge 0.3.3 → 1.3.0

package/frontend/src/features/database/components/TemplatePreview.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/components/radix/Button';
+import { DatabaseTemplate } from '@/features/database/templates';
+import { SchemaVisualizer } from '@/features/visualizer/components/SchemaVisualizer';
+import { useRawSQL } from '@/features/database/hooks/useRawSQL';
+
+interface TemplatePreviewProps {
+  template: DatabaseTemplate;
+  onCancel: () => void;
+}
+
+export function TemplatePreview({ template, onCancel }: TemplatePreviewProps) {
+  const { executeSQL, isPending } = useRawSQL({
+    showSuccessToast: true,
+    showErrorToast: true,
+    onSuccess: () => {
+      // Close preview after successful implementation
+      onCancel();
+    },
+  });
+
+  const handleImplementTemplate = () => {
+    executeSQL({ query: template.sql });
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-bg-gray dark:bg-neutral-800">
+      {/* Top Bar */}
+      <div className="flex items-center justify-center gap-3 h-12 px-4 border-b border-gray-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
+        <p className="text-sm font-normal text-zinc-600 dark:text-neutral-400">
+          You are previewing a template
+        </p>
+        <Button
+          variant="outline"
+          onClick={onCancel}
+          className="h-8 px-4 dark:bg-neutral-600 dark:text-zinc-300 dark:border-neutral-600 dark:hover:bg-neutral-700"
+        >
+          Cancel
+        </Button>
+        <Button
+          className="h-8 px-4 font-medium bg-emerald-300 hover:bg-emerald-400 text-black dark:bg-emerald-300 dark:hover:bg-emerald-400"
+          onClick={handleImplementTemplate}
+          disabled={isPending}
+        >
+          {isPending ? 'Implementing...' : 'Implement Template'}
+        </Button>
+      </div>
+
+      {/* Visualizer Content */}
+      <div className="relative flex-1 overflow-hidden">
+        {/* Dot Matrix Background - Light Mode */}
+        <div
+          className="absolute inset-0 opacity-50 dark:hidden"
+          style={{
+            backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+            backgroundSize: '12px 12px',
+          }}
+        />
+        {/* Dot Matrix Background - Dark Mode */}
+        <div
+          className="absolute inset-0 opacity-50 hidden dark:block"
+          style={{
+            backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
+            backgroundSize: '12px 12px',
+          }}
+        />
+
+        {/* SchemaVisualizer */}
+        <div className="relative z-10 w-full h-full">
+          <SchemaVisualizer
+            externalSchemas={template.visualizerSchema}
+            metadata={{
+              auth: {
+                oauths: [],
+              },
+              database: {
+                tables: [],
+                totalSizeInGB: 0,
+              },
+              storage: {
+                buckets: [],
+                totalSizeInGB: 0,
+              },
+              functions: [],
+            }}
+            showControls={false}
+            showMiniMap={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/database/components/index.ts

@@ -0,0 +1,19 @@
+export { ColumnTypeSelect } from './ColumnTypeSelect';
+export {
+  convertSchemaToColumns,
+  DatabaseDataGrid,
+  type DatabaseDataGridProps,
+} from './DatabaseDataGrid';
+export { ForeignKeyCell } from './ForeignKeyCell';
+export { ForeignKeyPopover } from './ForeignKeyPopover';
+export { LinkRecordModal } from './LinkRecordModal';
+export { RecordFormDialog } from './RecordFormDialog';
+export { RecordFormField } from './RecordFormField';
+export { TableEmptyState } from './TableEmptyState';
+export { TableForm } from './TableForm';
+export { TableFormColumn } from './TableFormColumn';
+export { TableListSkeleton } from './TableListSkeleton';
+export { TableSidebar } from './TableSidebar';
+export { TablesEmptyState } from './TablesEmptyState';
+export { TemplateCard } from './TemplateCard';
+export { TemplatePreview } from './TemplatePreview';

package/frontend/src/features/database/constants.ts

@@ -1,7 +1,6 @@
 import { Type, Clock, Calendar, Hash, Percent, ToggleLeft, Fingerprint, Code } from 'lucide-react';
 import { ColumnType } from '@insforge/shared-schemas';
 
-// Icon mapping for field types
 export const columnTypeIcons: Record<ColumnType, React.ComponentType<{ className?: string }>> = {
   [ColumnType.STRING]: Type,
   [ColumnType.DATE]: Calendar,
@@ -13,7 +12,6 @@ export const columnTypeIcons: Record<ColumnType, React.ComponentType<{ className
   [ColumnType.JSON]: Code,
 };
 
-// Field type descriptions
 export const columnTypeDescriptions: Record<ColumnType, string> = {
   [ColumnType.STRING]: 'Text values of any length',
   [ColumnType.INTEGER]: 'Whole numbers without decimals',
@@ -24,3 +22,31 @@ export const columnTypeDescriptions: Record<ColumnType, string> = {
   [ColumnType.UUID]: 'Unique identifiers (auto-generated)',
   [ColumnType.JSON]: 'Complex structured data',
 };
+
+/**
+ * System tables that should be filtered out from user-facing database views
+ */
+export const SYSTEM_TABLES = ['users'];
+export const SYSTEM_FUNCTIONS = [
+  'create_default_policies',
+  'create_policies_after_rls',
+  'email',
+  'reload_postgrest_schema',
+  'role',
+  'uid',
+  'update_updated_at_column',
+];
+
+/**
+ * Check if a table name is a system table
+ */
+export function isSystemTable(tableName: string): boolean {
+  return tableName.startsWith('_') || SYSTEM_TABLES.includes(tableName);
+}
+
+/**
+ * Check if a function name is a system function
+ */
+export function isSystemFunction(functionName: string): boolean {
+  return SYSTEM_FUNCTIONS.includes(functionName);
+}

package/frontend/src/features/database/contexts/SQLEditorContext.tsx

@@ -0,0 +1,188 @@
+import { createContext, useContext, useState, ReactNode, useEffect, useRef } from 'react';
+
+export interface SQLTab {
+  id: string;
+  name: string;
+  query: string;
+}
+
+interface SQLEditorContextType {
+  tabs: SQLTab[];
+  activeTabId: string;
+  activeTab: SQLTab | undefined;
+  addTab: (initialQuery?: string, initialName?: string) => void;
+  removeTab: (tabId: string) => void;
+  setActiveTab: (tabId: string) => void;
+  updateTabQuery: (tabId: string, query: string) => void;
+  updateTabName: (tabId: string, name: string) => void;
+}
+
+const SQLEditorContext = createContext<SQLEditorContextType | undefined>(undefined);
+
+interface SQLEditorProviderProps {
+  children: ReactNode;
+}
+
+const STORAGE_KEY = 'sql-editor-tabs';
+const ACTIVE_TAB_KEY = 'sql-editor-active-tab';
+const DEBOUNCE_DELAY = 500; // Save after 500ms of inactivity
+
+let tabCounter = 1;
+
+// Load tabs from localStorage
+function loadTabsFromStorage(): SQLTab[] {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const tabs = JSON.parse(stored) as SQLTab[];
+      // Update tabCounter to be higher than any existing tab number
+      tabs.forEach((tab) => {
+        const match = tab.name.match(/Query (\d+)/);
+        if (match) {
+          const num = parseInt(match[1], 10);
+          if (num >= tabCounter) {
+            tabCounter = num;
+          }
+        }
+      });
+      return tabs.length > 0 ? tabs : getDefaultTabs();
+    }
+  } catch (error) {
+    console.error('Failed to load tabs from localStorage:', error);
+  }
+  return getDefaultTabs();
+}
+
+function getDefaultTabs(): SQLTab[] {
+  return [
+    {
+      id: 'tab-1',
+      name: 'Query 1',
+      query: '',
+    },
+  ];
+}
+
+function loadActiveTabFromStorage(): string {
+  try {
+    const stored = localStorage.getItem(ACTIVE_TAB_KEY);
+    return stored || 'tab-1';
+  } catch (error) {
+    console.error('Failed to load active tab from localStorage:', error);
+    return 'tab-1';
+  }
+}
+
+export function SQLEditorProvider({ children }: SQLEditorProviderProps) {
+  const [tabs, setTabs] = useState<SQLTab[]>(loadTabsFromStorage);
+  const [activeTabId, setActiveTabId] = useState(loadActiveTabFromStorage);
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const tabsRef = useRef<SQLTab[]>(tabs);
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId);
+
+  // Debounced save to localStorage
+  const debouncedSave = (tabsToSave: SQLTab[]) => {
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = setTimeout(() => {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(tabsToSave));
+      } catch (error) {
+        console.error('Failed to save tabs to localStorage:', error);
+      }
+    }, DEBOUNCE_DELAY);
+  };
+
+  // Save active tab immediately (no debounce needed for this)
+  useEffect(() => {
+    try {
+      localStorage.setItem(ACTIVE_TAB_KEY, activeTabId);
+    } catch (error) {
+      console.error('Failed to save active tab to localStorage:', error);
+    }
+  }, [activeTabId]);
+
+  // Debounced save for tabs changes
+  useEffect(() => {
+    // Keep ref in sync with latest tabs
+    tabsRef.current = tabs;
+    debouncedSave(tabs);
+    // Cleanup timeout on unmount and flush pending save
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        // Flush the pending save to avoid data loss
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(tabsRef.current));
+        } catch (error) {
+          console.error('Failed to save tabs to localStorage:', error);
+        }
+      }
+    };
+  }, [tabs]);
+
+  const addTab = (initialQuery?: string, initialName?: string) => {
+    tabCounter++;
+    const newTab: SQLTab = {
+      id: `tab-${Date.now()}`,
+      name: initialName || `Query ${tabCounter}`,
+      query: initialQuery || '',
+    };
+    setTabs((prev) => [...prev, newTab]);
+    setActiveTabId(newTab.id);
+  };
+
+  const removeTab = (tabId: string) => {
+    setTabs((prev) => {
+      const newTabs = prev.filter((tab) => tab.id !== tabId);
+      // Don't allow removing the last tab
+      if (newTabs.length === 0) {
+        return prev;
+      }
+      // If we're removing the active tab, switch to the first remaining tab
+      if (tabId === activeTabId) {
+        setActiveTabId(newTabs[0].id);
+      }
+      return newTabs;
+    });
+  };
+
+  const setActiveTab = (tabId: string) => {
+    setActiveTabId(tabId);
+  };
+
+  const updateTabQuery = (tabId: string, query: string) => {
+    setTabs((prev) => prev.map((tab) => (tab.id === tabId ? { ...tab, query } : tab)));
+  };
+
+  const updateTabName = (tabId: string, name: string) => {
+    setTabs((prev) => prev.map((tab) => (tab.id === tabId ? { ...tab, name } : tab)));
+  };
+
+  return (
+    <SQLEditorContext.Provider
+      value={{
+        tabs,
+        activeTabId,
+        activeTab,
+        addTab,
+        removeTab,
+        setActiveTab,
+        updateTabQuery,
+        updateTabName,
+      }}
+    >
+      {children}
+    </SQLEditorContext.Provider>
+  );
+}
+
+export function useSQLEditorContext() {
+  const context = useContext(SQLEditorContext);
+  if (context === undefined) {
+    throw new Error('useSQLEditorContext must be used within a SQLEditorProvider');
+  }
+  return context;
+}

package/frontend/src/features/database/helpers.ts

@@ -1,4 +1,4 @@
-import { jsonSchema } from '@/lib/utils/validation-schemas';
+import { jsonSchema } from '@/lib/utils/schemaValidations';
 import { ColumnSchema, ColumnType } from '@insforge/shared-schemas';
 import { z } from 'zod';
 
@@ -60,7 +60,7 @@ export function buildDynamicSchema(columns: ColumnSchema[]) {
         }
         break;
       default:
-        fieldSchema = z.any();
+        fieldSchema = z.unknown();
         if (column.isNullable) {
           fieldSchema = fieldSchema.nullable().optional();
         }

package/frontend/src/features/database/hooks/useCSVImport.ts

@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query';
+import { recordService, CSVImportResponse } from '../services/record.service.js';
+
+interface UseCSVImportOptions {
+  onSuccess?: (data: CSVImportResponse) => void;
+  onError?: (error: Error) => void;
+}
+
+export function useCSVImport(tableName: string, options?: UseCSVImportOptions) {
+  const mutation = useMutation({
+    mutationFn: async (file: File) => {
+      return recordService.importCSV(tableName, file);
+    },
+    onSuccess: (data) => {
+      // Always call onSuccess, let the component decide what to do based on data.success
+      options?.onSuccess?.(data);
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+
+  return {
+    mutate: mutation.mutate,
+    reset: mutation.reset,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+}

package/frontend/src/features/database/hooks/useDatabase.ts

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query';
+import { databaseService } from '../services/database.service';
+
+export function useFunctions(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'functions'],
+    queryFn: () => databaseService.getFunctions(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useIndexes(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'indexes'],
+    queryFn: () => databaseService.getIndexes(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function usePolicies(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'policies'],
+    queryFn: () => databaseService.getPolicies(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useTriggers(enabled = false) {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['database', 'triggers'],
+    queryFn: () => databaseService.getTriggers(),
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    enabled,
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/frontend/src/features/database/hooks/useRawSQL.ts

@@ -0,0 +1,55 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { advanceService, RawSQLResponse } from '../services/advance.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+interface UseRawSQLOptions {
+  onSuccess?: (data: RawSQLResponse) => void;
+  onError?: (error: Error) => void;
+  showSuccessToast?: boolean;
+  showErrorToast?: boolean;
+}
+
+interface RawSQLParams {
+  query: string;
+  params?: unknown[];
+}
+
+export function useRawSQL(options?: UseRawSQLOptions) {
+  const { showToast } = useToast();
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async ({ query, params = [] }: RawSQLParams) => {
+      return advanceService.runRawSQL(query, params);
+    },
+    onSuccess: (data) => {
+      // Invalidate database schema queries to ensure UI reflects any schema changes
+      void queryClient.invalidateQueries({ queryKey: ['tables'] });
+      void queryClient.invalidateQueries({ queryKey: ['tables', 'schemas'] });
+
+      if (options?.showSuccessToast !== false) {
+        const message = data.message || 'SQL query executed successfully';
+        showToast(message, 'success');
+      }
+      options?.onSuccess?.(data);
+    },
+    onError: (error: Error) => {
+      if (options?.showErrorToast !== false) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to execute SQL query';
+        showToast(errorMessage, 'error');
+      }
+      options?.onError?.(error);
+    },
+  });
+
+  return {
+    executeSQL: mutation.mutate,
+    executeSQLAsync: mutation.mutateAsync,
+    reset: mutation.reset,
+    isPending: mutation.isPending,
+    isSuccess: mutation.isSuccess,
+    isError: mutation.isError,
+    error: mutation.error,
+    data: mutation.data,
+  };
+}

package/frontend/src/features/database/hooks/useRecords.ts

@@ -0,0 +1,139 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { recordService } from '../services/record.service';
+import { useToast } from '@/lib/hooks/useToast';
+import { ConvertedValue } from '@/components/datagrid/datagridTypes';
+
+export function useRecords(tableName: string) {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Hook to fetch table records with pagination, search, and sorting
+  const useTableRecords = (
+    limit = 10,
+    offset = 0,
+    searchQuery?: string,
+    sortColumns?: { columnKey: string; direction: string }[],
+    enabled = true
+  ) => {
+    return useQuery({
+      queryKey: ['records', tableName, limit, offset, searchQuery, JSON.stringify(sortColumns)],
+      queryFn: () =>
+        recordService.getTableRecords(tableName, limit, offset, searchQuery, sortColumns),
+      enabled: enabled && !!tableName,
+      staleTime: 30 * 1000, // Cache for 30 seconds
+    });
+  };
+
+  // Hook to fetch records with custom query params
+  const useRecordsWithQuery = (queryParams: string = '', enabled = true) => {
+    return useQuery({
+      queryKey: ['records', tableName, 'query', queryParams],
+      queryFn: () => recordService.getRecords(tableName, queryParams),
+      enabled: enabled && !!tableName,
+      staleTime: 30 * 1000,
+    });
+  };
+
+  // Hook to fetch a single record by foreign key value
+  const useRecordByForeignKey = (columnName: string, value: string, enabled = true) => {
+    return useQuery({
+      queryKey: ['records', tableName, 'foreignKey', columnName, value],
+      queryFn: () => recordService.getRecordByForeignKeyValue(tableName, columnName, value),
+      enabled: enabled && !!tableName && !!columnName && !!value,
+      staleTime: 30 * 1000,
+    });
+  };
+
+  // Mutation to create a single record
+  const createRecordMutation = useMutation({
+    mutationFn: (data: { [key: string]: ConvertedValue }) =>
+      recordService.createRecord(tableName, data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
+      void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      showToast('Record created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create record';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to create multiple records
+  const createRecordsMutation = useMutation({
+    mutationFn: (records: { [key: string]: ConvertedValue }[]) =>
+      recordService.createRecords(tableName, records),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
+      void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      showToast('Records created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create records';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to update a record
+  const updateRecordMutation = useMutation({
+    mutationFn: ({
+      pkColumn,
+      pkValue,
+      data,
+    }: {
+      pkColumn: string;
+      pkValue: string;
+      data: { [key: string]: ConvertedValue };
+    }) => recordService.updateRecord(tableName, pkColumn, pkValue, data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
+      void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      showToast('Record updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update record';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to delete a record
+  const deleteRecordsMutation = useMutation({
+    mutationFn: (variables: { pkColumn: string; pkValues: string[] }) =>
+      recordService.deleteRecords(tableName, variables.pkColumn, variables.pkValues),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
+      void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      const count = variables.pkValues.length;
+      if (count === 1) {
+        showToast('Record deleted successfully', 'success');
+      } else {
+        showToast(`${count} records deleted successfully`, 'success');
+      }
+    },
+    onError: (error: Error, variables) => {
+      const count = variables.pkValues.length;
+      const recordText = count === 1 ? 'record' : 'records';
+      const errorMessage =
+        error instanceof Error ? error.message : `Failed to delete ${recordText}`;
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  return {
+    // Hooks for fetching
+    useTableRecords,
+    useRecordsWithQuery,
+    useRecordByForeignKey,
+
+    // Loading states
+    isCreating: createRecordMutation.isPending,
+    isCreatingMultiple: createRecordsMutation.isPending,
+    isUpdating: updateRecordMutation.isPending,
+    isDeleting: deleteRecordsMutation.isPending,
+
+    // Actions - all using mutateAsync for consistency
+    createRecord: createRecordMutation.mutateAsync,
+    updateRecord: updateRecordMutation.mutateAsync,
+    deleteRecords: deleteRecordsMutation.mutateAsync,
+  };
+}