insforge 0.3.1

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

@@ -0,0 +1,137 @@
+import { memo } from 'react';
+import { Controller, Control } from 'react-hook-form';
+import { X, Key } from 'lucide-react';
+import { Input } from '@/components/radix/Input';
+import { Checkbox } from '@/components';
+import { TableFormColumnSchema, TableFormSchema } from '../schema';
+import { ColumnTypeSelect } from './ColumnTypeSelect';
+
+interface TableFormColumnProps {
+  index: number;
+  control: Control<TableFormSchema>;
+  onRemove: () => void;
+  isSystemColumn: boolean;
+  isNewColumn: boolean;
+  column: TableFormColumnSchema;
+}
+
+export const TableFormColumn = memo(function TableFormColumn({
+  index,
+  control,
+  onRemove,
+  isSystemColumn,
+  isNewColumn,
+  column,
+}: TableFormColumnProps) {
+  return (
+    <div
+      className={`flex items-center gap-6 px-4 py-2 ${
+        isNewColumn ? 'bg-slate-50 dark:bg-neutral-800' : 'bg-white dark:bg-[#2D2D2D]'
+      }`}
+    >
+      {/* Name */}
+      <div className="flex-1 min-w-[175px]">
+        <div className="relative flex items-center">
+          <Controller
+            control={control}
+            name={`columns.${index}.columnName`}
+            render={({ field }) => (
+              <Input
+                {...field}
+                placeholder="Enter column name"
+                className={`w-full h-9 rounded-md border-zinc-200 dark:border-neutral-600 text-sm font-normal dark:placeholder:text-neutral-400 dark:focus:border-white ${
+                  isSystemColumn
+                    ? 'bg-zinc-100 text-zinc-950 dark:bg-neutral-700 dark:text-zinc-300'
+                    : 'bg-white text-zinc-950 shadow-sm dark:bg-neutral-800 dark:text-zinc-300'
+                }`}
+                disabled={isSystemColumn}
+              />
+            )}
+          />
+          {column.isPrimaryKey && (
+            <Key className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" />
+          )}
+        </div>
+      </div>
+
+      {/* Type */}
+      <div className="flex-1 min-w-[175px]">
+        <ColumnTypeSelect
+          control={control}
+          name={`columns.${index}.type`}
+          disabled={!isNewColumn}
+          className={`w-full h-9 rounded-md border-zinc-200 dark:border-neutral-600 text-sm font-normal dark:placeholder:text-neutral-400 ${
+            isSystemColumn
+              ? 'bg-zinc-100 dark:bg-neutral-700'
+              : 'bg-white shadow-sm dark:bg-neutral-800'
+          }`}
+        />
+      </div>
+
+      {/* Default Value */}
+      <div className="flex-1 min-w-[175px]">
+        <Controller
+          control={control}
+          name={`columns.${index}.defaultValue`}
+          render={({ field }) => (
+            <Input
+              {...field}
+              placeholder="Enter default value"
+              className={`w-full h-9 rounded-md border-zinc-200 dark:border-neutral-600 text-sm font-normal placeholder:text-zinc-500 dark:placeholder:text-neutral-400 dark:focus:border-white ${
+                isSystemColumn
+                  ? 'bg-zinc-100 dark:bg-neutral-700 dark:text-zinc-300'
+                  : 'bg-white shadow-sm dark:bg-neutral-800 dark:text-zinc-300'
+              }`}
+              disabled={isSystemColumn}
+            />
+          )}
+        />
+      </div>
+
+      {/* Nullable */}
+      <div className="w-18 2xl:w-25 flex justify-center flex-shrink-0">
+        <Controller
+          control={control}
+          name={`columns.${index}.isNullable`}
+          render={({ field }) => (
+            <Checkbox
+              checked={field.value}
+              onChange={field.onChange}
+              disabled={!isNewColumn}
+              className={`rounded border-zinc-700 shadow-sm data-[state=checked]:bg-zinc-600 data-[state=checked]:border-zinc-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700`}
+            />
+          )}
+        />
+      </div>
+
+      {/* Unique */}
+      <div className="w-18 2xl:w-25 flex justify-center flex-shrink-0">
+        <Controller
+          control={control}
+          name={`columns.${index}.isUnique`}
+          render={({ field }) => (
+            <Checkbox
+              checked={field.value}
+              onChange={field.onChange}
+              disabled={!isNewColumn}
+              className={`rounded border-zinc-700 shadow-sm data-[state=checked]:bg-zinc-600 data-[state=checked]:border-zinc-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700`}
+            />
+          )}
+        />
+      </div>
+
+      {/* Delete */}
+      <div className="w-5 h-5 flex-shrink-0">
+        {!isSystemColumn && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className="hover:bg-gray-100 rounded transition-colors dark:hover:bg-neutral-700"
+          >
+            <X className="w-5 h-5 text-zinc-500 dark:text-zinc-300" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,9 @@
+export function TableListSkeleton() {
+  return (
+    <div className="space-y-2">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-10 bg-neutral-100 dark:bg-neutral-400 rounded-md animate-pulse" />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { Table } from 'lucide-react';
+import { FeatureSidebar } from '@/components/FeatureSidebar';
+import { TableListSkeleton } from './TableListSkeleton';
+import { TableEmptyState } from './TableEmptyState';
+
+interface TableSidebarProps {
+  tables: string[];
+  selectedTable?: string;
+  onTableSelect: (tableName: string) => void;
+  loading?: boolean;
+  onNewTable?: () => void;
+  onEditTable?: (table: string) => void;
+  onDeleteTable?: (table: string) => void;
+}
+
+export function TableSidebar({
+  tables,
+  selectedTable,
+  onTableSelect,
+  loading,
+  onNewTable,
+  onEditTable,
+  onDeleteTable,
+}: TableSidebarProps) {
+  return (
+    <FeatureSidebar
+      title="Database"
+      items={tables}
+      selectedItem={selectedTable}
+      onItemSelect={onTableSelect}
+      loading={loading}
+      onNewItem={onNewTable}
+      onEditItem={onEditTable}
+      onDeleteItem={onDeleteTable}
+      searchPlaceholder="Search tables..."
+      newItemTooltip="Create New Table"
+      editLabel="Edit Table"
+      deleteLabel="Delete Table"
+      icon={Table}
+      filterItems={(tableNames) =>
+        tableNames.filter((name) => name !== 'auth' && name !== 'profiles' && name !== 'identifies')
+      }
+      renderSkeleton={() => <TableListSkeleton />}
+      renderEmptyState={(searchTerm) => <TableEmptyState searchTerm={searchTerm} />}
+    />
+  );
+}

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

@@ -0,0 +1,26 @@
+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,
+  [ColumnType.DATETIME]: Clock,
+  [ColumnType.INTEGER]: Hash,
+  [ColumnType.FLOAT]: Percent,
+  [ColumnType.BOOLEAN]: ToggleLeft,
+  [ColumnType.UUID]: Fingerprint,
+  [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',
+  [ColumnType.FLOAT]: 'Numbers with decimal places',
+  [ColumnType.BOOLEAN]: 'True or false values',
+  [ColumnType.DATETIME]: 'Date and time values',
+  [ColumnType.DATE]: 'Date values',
+  [ColumnType.UUID]: 'Unique identifiers (auto-generated)',
+  [ColumnType.JSON]: 'Complex structured data',
+};

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

@@ -0,0 +1,125 @@
+import { jsonSchema } from '@/lib/utils/validation-schemas';
+import { ColumnSchema, ColumnType } from '@insforge/shared-schemas';
+import { z } from 'zod';
+
+export const SYSTEM_FIELDS = ['id', 'created_at', 'updated_at'];
+
+// Helper function to build dynamic Zod schema based on column definitions
+export function buildDynamicSchema(columns: ColumnSchema[]) {
+  const schemaFields: Record<string, z.ZodTypeAny> = {};
+
+  columns.forEach((column) => {
+    // Skip system fields
+    if (SYSTEM_FIELDS.includes(column.columnName)) {
+      return;
+    }
+
+    let fieldSchema;
+
+    switch (column.type) {
+      case ColumnType.STRING:
+        fieldSchema = z.string();
+        if (!column.isNullable) {
+          fieldSchema = fieldSchema.min(1, `${column.columnName} is required`);
+        }
+        break;
+      case ColumnType.INTEGER:
+        fieldSchema = z.number().int();
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      case ColumnType.FLOAT:
+        fieldSchema = z.number();
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      case ColumnType.BOOLEAN:
+        fieldSchema = z.boolean();
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      case ColumnType.DATE:
+        fieldSchema = z.string();
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      case ColumnType.DATETIME:
+        fieldSchema = z.string(); // ISO date string
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      case ColumnType.JSON:
+        fieldSchema = jsonSchema;
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+        break;
+      default:
+        fieldSchema = z.any();
+        if (column.isNullable) {
+          fieldSchema = fieldSchema.nullable().optional();
+        }
+    }
+
+    schemaFields[column.columnName] = fieldSchema;
+  });
+
+  return z.object(schemaFields);
+}
+
+// Get initial values for form based on column definitions
+export function getInitialValues(columns: ColumnSchema[]): Record<string, unknown> {
+  const values: Record<string, unknown> = {};
+
+  columns.forEach((column) => {
+    // Skip auto-generated fields
+    if (SYSTEM_FIELDS.includes(column.columnName)) {
+      return;
+    }
+
+    // Set default values based on type and defaultValue setting
+    switch (column.type) {
+      case ColumnType.BOOLEAN:
+        values[column.columnName] = column.defaultValue
+          ? Boolean(column.defaultValue)
+          : column.isNullable
+            ? null
+            : false;
+        break;
+      case ColumnType.INTEGER:
+        if (column.defaultValue !== undefined) {
+          values[column.columnName] = parseInt(column.defaultValue, 10);
+        }
+        break;
+      case ColumnType.FLOAT:
+        if (column.defaultValue !== undefined) {
+          values[column.columnName] = parseFloat(column.defaultValue);
+        }
+        break;
+      case ColumnType.UUID:
+        if (column.defaultValue && !column.defaultValue.endsWith('()')) {
+          // Static UUID default value
+          values[column.columnName] = column.defaultValue;
+        } else {
+          // For gen_random_uuid() or no default, leave empty - will be generated on submit
+          values[column.columnName] = '';
+        }
+        break;
+      case ColumnType.STRING:
+      case ColumnType.DATE:
+      case ColumnType.DATETIME:
+      case ColumnType.JSON:
+        values[column.columnName] = column.defaultValue ?? '';
+        break;
+      default:
+        values[column.columnName] = '';
+    }
+  });
+
+  return values;
+}

package/frontend/src/features/database/hooks/UseLinkModal.tsx

@@ -0,0 +1,78 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+import type { DatabaseRecord } from '@/components/datagrid';
+
+interface LinkModalState {
+  isOpen: boolean;
+  referenceTable: string | null;
+  referenceColumn: string | null;
+  currentValue: string | null;
+  onSelectRecord: ((record: DatabaseRecord) => void) | null;
+}
+
+interface LinkModalContextType {
+  modalState: LinkModalState;
+  openModal: (config: {
+    referenceTable: string;
+    referenceColumn: string;
+    currentValue?: string | null;
+    onSelectRecord: (record: DatabaseRecord) => void;
+  }) => void;
+  closeModal: () => void;
+}
+
+const LinkModalContext = createContext<LinkModalContextType | undefined>(undefined);
+
+const initialState: LinkModalState = {
+  isOpen: false,
+  referenceTable: null,
+  referenceColumn: null,
+  currentValue: null,
+  onSelectRecord: null,
+};
+
+interface LinkModalProviderProps {
+  children: ReactNode;
+}
+
+export function LinkModalProvider({ children }: LinkModalProviderProps) {
+  const [modalState, setModalState] = useState<LinkModalState>(initialState);
+
+  const openModal = (config: {
+    referenceTable: string;
+    referenceColumn: string;
+    currentValue?: string | null;
+    onSelectRecord: (record: DatabaseRecord) => void;
+  }) => {
+    setModalState({
+      isOpen: true,
+      referenceTable: config.referenceTable,
+      referenceColumn: config.referenceColumn,
+      currentValue: config.currentValue || null,
+      onSelectRecord: config.onSelectRecord,
+    });
+  };
+
+  const closeModal = () => {
+    setModalState(initialState);
+  };
+
+  return (
+    <LinkModalContext.Provider
+      value={{
+        modalState,
+        openModal,
+        closeModal,
+      }}
+    >
+      {children}
+    </LinkModalContext.Provider>
+  );
+}
+
+export function useLinkModal() {
+  const context = useContext(LinkModalContext);
+  if (context === undefined) {
+    throw new Error('useLinkModal must be used within a LinkModalProvider');
+  }
+  return context;
+}

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

@@ -0,0 +1,12 @@
+// Components
+export { TableEmptyState } from './components/TableEmptyState';
+export { TableListSkeleton } from './components/TableListSkeleton';
+export { TableSidebar } from './components/TableSidebar';
+export { TableForm } from './components/TableForm';
+export { RecordFormDialog } from './components/RecordFormDialog';
+
+// Services
+export { databaseService } from './services/database.service';
+
+// Helpers
+export { buildDynamicSchema, getInitialValues } from './helpers';