insforge 0.3.3 → 1.3.0

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

@@ -1,26 +1,25 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { AlertCircle } from 'lucide-react';
 import {
+  Alert,
+  AlertDescription,
+  Button,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/radix/Dialog';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
-import { ScrollArea } from '@/components/radix/ScrollArea';
-import { databaseService } from '@/features/database/services/database.service';
+  ScrollArea,
+} from '@/components';
+import { useRecords } from '@/features/database/hooks/useRecords';
 import { buildDynamicSchema, getInitialValues } from '@/features/database';
 import { RecordFormField } from '@/features/database/components/RecordFormField';
 import { cn } from '@/lib/utils/utils';
-import { useToast } from '@/lib/hooks/useToast';
 import { ColumnSchema } from '@insforge/shared-schemas';
 import { SYSTEM_FIELDS } from '../helpers';
-import { ConvertedValue } from '@/components/datagrid/datagridTypes';
 
 interface RecordFormDialogProps {
   open: boolean;
@@ -39,7 +38,7 @@ export function RecordFormDialog({
 }: RecordFormDialogProps) {
   const [error, setError] = useState<string | null>(null);
   const queryClient = useQueryClient();
-  const { showToast } = useToast();
+  const { createRecord, isCreating } = useRecords(tableName);
 
   const displayFields = useMemo(() => {
     const filteredFields = schema.filter((field) => !SYSTEM_FIELDS.includes(field.columnName));
@@ -72,31 +71,21 @@ export function RecordFormDialog({
     }
   }, [open]);
 
-  const createRecordMutation = useMutation({
-    mutationFn: (data: { [key: string]: ConvertedValue }) => {
-      return databaseService.createRecord(tableName, data);
-    },
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
-      void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
-      onOpenChange(false);
-      form.reset();
-      setError(null);
-      if (onSuccess) {
-        onSuccess();
-      }
-      showToast('Record created successfully', 'success');
-    },
-    onError: (err: Error) => {
-      setError(err.message || 'Failed to create record');
-    },
-  });
-
   const handleSubmit = form.handleSubmit(
     async (data) => {
       try {
-        await createRecordMutation.mutateAsync(data);
+        await createRecord(data);
+        void queryClient.invalidateQueries({ queryKey: ['records', tableName] });
+        void queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+        onOpenChange(false);
+        form.reset();
+        setError(null);
+        if (onSuccess) {
+          onSuccess();
+        }
       } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to create record';
+        setError(errorMessage);
         console.error('Form submission error:', err);
       }
     },
@@ -148,13 +137,13 @@ export function RecordFormDialog({
             </Button>
             <Button
               type="submit"
-              disabled={createRecordMutation.isPending}
+              disabled={isCreating}
               className={cn(
                 'h-10 px-4 bg-zinc-950 text-white hover:bg-zinc-800 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400',
-                createRecordMutation.isPending && 'opacity-40'
+                isCreating && 'opacity-40'
               )}
             >
-              {createRecordMutation.isPending ? 'Saving...' : 'Add Record'}
+              {isCreating ? 'Saving...' : 'Add Record'}
             </Button>
           </DialogFooter>
         </form>

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

@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import { Control, Controller, FieldError, UseFormReturn } from 'react-hook-form';
-import { Input } from '@/components/radix/Input';
-import { Label } from '@/components/radix/Label';
-import { Button } from '@/components/radix/Button';
 import { Calendar, Clock, Link2, X } from 'lucide-react';
 import {
+  Button,
+  Label,
+  Input,
   BooleanCellEditor,
   DateCellEditor,
   JsonCellEditor,
   type DatabaseRecord,
   type ConvertedValue,
   type UserInputValue,
-} from '@/components/datagrid';
+  TypeBadge,
+} from '@/components';
 import { ColumnSchema, ColumnType } from '@insforge/shared-schemas';
-import { useLinkModal } from '@/features/database/hooks/UseLinkModal';
 import { convertValueForColumn, cn, formatValueForDisplay } from '@/lib/utils/utils';
-import { TypeBadge } from '@/components/TypeBadge';
+import { LinkRecordModal } from '@/features/database/components/LinkRecordModal';
 import { isValid, parseISO } from 'date-fns';
 
 // Helper function to get appropriate placeholder text
@@ -184,7 +184,7 @@ function FormNumberEditor({ value, type, onChange, tableName, field }: FormNumbe
         }
       }}
       placeholder={getPlaceholderText(field)}
-      className={`dark:text-white dark:placeholder:text-neutral-400 dark:bg-neutral-900 dark:border-neutral-700 ${field.foreignKey ? 'pr-16' : ''}`}
+      className={`dark:text-white dark:placeholder:text-neutral-400 dark:bg-neutral-900 dark:border-neutral-700 ${field.foreignKey ? 'pr-18' : ''}`}
     />
   );
 }
@@ -278,13 +278,14 @@ interface FieldWithLinkProps {
 }
 
 function FieldWithLink({ field, control, children }: FieldWithLinkProps) {
-  const { openModal } = useLinkModal();
-
   if (!field.foreignKey) {
     // Regular field without foreign key
     return <>{children}</>;
   }
 
+  // Store foreignKey in a const to help TypeScript narrow the type
+  const foreignKey = field.foreignKey;
+
   // Field with foreign key linking capability - integrated design
   return (
     <>
@@ -309,56 +310,53 @@ function FieldWithLink({ field, control, children }: FieldWithLinkProps) {
               <div className="space-y-1">
                 <div className="relative">
                   {modifiedChildren}
-                  <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center">
-                    {hasLinkedValue && (
+                  <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                    {(hasLinkedValue || hasLinkedValue === 0) && (
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon"
                         onClick={() => formField.onChange('')}
-                        className="h-7 w-7 p-1 flex-shrink-0 text-zinc-500 hover:text-red-600 hover:bg-red-50 dark:text-neutral-400 dark:hover:text-red-400 dark:hover:bg-red-950/20"
+                        className="h-7 w-7 p-1 flex-shrink-0 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-700"
                         title="Clear linked record"
                       >
                         <X className="h-4 w-4" />
                       </Button>
                     )}
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => {
-                        if (field.foreignKey) {
-                          openModal({
-                            referenceTable: field.foreignKey.referenceTable,
-                            referenceColumn: field.foreignKey.referenceColumn,
-                            currentValue: formField.value ? String(formField.value) : null,
-                            onSelectRecord: (record: DatabaseRecord) => {
-                              if (field.foreignKey) {
-                                const referenceValue = record[field.foreignKey.referenceColumn];
-                                const result = convertValueForColumn(
-                                  field.type,
-                                  String(referenceValue || '')
-                                );
-                                if (result.success) {
-                                  formField.onChange(result.value);
-                                } else {
-                                  // Fallback to string if conversion fails
-                                  formField.onChange(String(referenceValue || ''));
-                                }
-                              }
-                            },
-                          });
+                    <LinkRecordModal
+                      referenceTable={foreignKey.referenceTable}
+                      referenceColumn={foreignKey.referenceColumn}
+                      onSelectRecord={(record: DatabaseRecord) => {
+                        const referenceValue = record[foreignKey.referenceColumn];
+                        const result = convertValueForColumn(
+                          field.type,
+                          String(referenceValue || '')
+                        );
+                        if (result.success) {
+                          formField.onChange(result.value);
+                        } else {
+                          // Fallback to string if conversion fails
+                          formField.onChange(String(referenceValue || ''));
                         }
                       }}
-                      className="rounded-l-none h-9 w-9 p-2 flex-shrink-0 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-700 border-l border-zinc-200 dark:border-neutral-700"
-                      title={
-                        hasLinkedValue
-                          ? `Change linked ${field.foreignKey?.referenceTable} record`
-                          : `Link to ${field.foreignKey?.referenceTable} record`
-                      }
                     >
-                      <Link2 className="h-5 w-5" />
-                    </Button>
+                      {(openModal) => (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={openModal}
+                          className="rounded-l-none h-9 w-9 p-2 flex-shrink-0 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-700 border-l border-zinc-200 dark:border-neutral-700"
+                          title={
+                            hasLinkedValue
+                              ? `Change linked ${foreignKey.referenceTable} record`
+                              : `Link to ${foreignKey.referenceTable} record`
+                          }
+                        >
+                          <Link2 className="h-5 w-5" />
+                        </Button>
+                      )}
+                    </LinkRecordModal>
                   </div>
                 </div>
 
@@ -366,7 +364,7 @@ function FieldWithLink({ field, control, children }: FieldWithLinkProps) {
                 <div className="text-xs text-medium text-black dark:text-neutral-400 flex items-center gap-1.5">
                   <span>Has a Foreign Key relation to</span>
                   <TypeBadge
-                    type={`${field.foreignKey?.referenceTable}.${field.foreignKey?.referenceColumn}`}
+                    type={`${foreignKey.referenceTable}.${foreignKey.referenceColumn}`}
                     className="dark:bg-neutral-700"
                   />
                 </div>

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

@@ -0,0 +1,75 @@
+import { ExternalLink } from 'lucide-react';
+import CodeMirror from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { EditorView } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+
+const customTheme = EditorView.theme({
+  '&': { backgroundColor: 'transparent', maxHeight: '400px' },
+  '.cm-scroller': { overflow: 'auto' },
+  '.cm-gutters': { display: 'none' },
+  '.cm-content': { padding: '16px' },
+  '.cm-line': { padding: '0' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-selectionBackground': { backgroundColor: 'transparent !important' },
+  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'transparent !important' },
+  '.cm-cursor': { display: 'none' },
+});
+
+interface SQLModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  value: string;
+}
+
+export function SQLModal({ open, onOpenChange, title, value }: SQLModalProps) {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-zinc-950 dark:text-white">{title}</DialogTitle>
+        </DialogHeader>
+        <div className="mt-2 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-900">
+          <CodeMirror
+            value={value}
+            theme={[resolvedTheme === 'dark' ? vscodeDark : vscodeLight, customTheme]}
+            extensions={[sql(), EditorView.lineWrapping, EditorView.editable.of(false)]}
+            editable={false}
+            basicSetup={false}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SQLCellButtonProps {
+  value: string | null;
+  onClick: () => void;
+}
+
+export function SQLCellButton({ value, onClick }: SQLCellButtonProps) {
+  if (!value) {
+    return <span className="text-sm">-</span>;
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-1 min-w-0">
+      <span className="text-sm truncate">{value}</span>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        className="shrink-0 p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded transition-colors"
+      >
+        <ExternalLink className="size-4 text-zinc-400 dark:text-neutral-400" />
+      </button>
+    </div>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { Database } from 'lucide-react';
+import { ConnectCTA } from '@/components/ConnectCTA';
 
 interface TableEmptyStateProps {
   searchTerm: string;
@@ -6,14 +7,14 @@ interface TableEmptyStateProps {
 
 export function TableEmptyState({ searchTerm }: TableEmptyStateProps) {
   return (
-    <div className="text-center py-8">
-      <Database className="mx-auto h-8 w-8 text-muted-foreground mb-2.5" />
-      <p className="text-sm text-muted-foreground">
+    <div className="flex flex-col items-center justify-center py-4 text-center">
+      <Database className="h-10 w-10 text-gray-400 dark:text-neutral-600 mb-3" />
+      <p className="text-sm text-gray-600 dark:text-neutral-400 font-medium">
         {searchTerm ? 'No tables found' : 'No tables yet'}
       </p>
       {!searchTerm && (
-        <p className="text-xs text-muted-foreground mt-2.5">
-          Create your first table to get started
+        <p className="text-xs text-gray-500 dark:text-neutral-400 font-medium mt-1 mx-10">
+          <ConnectCTA fallback="Create your first table to get started" />
         </p>
       )}
     </div>

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

@@ -3,10 +3,8 @@ import { useForm, useFieldArray } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Plus, X, Link, MoveRight } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
-import { databaseService } from '@/features/database/services/database.service';
+import { Alert, AlertDescription, Button, Input } from '@/components';
+import { tableService } from '@/features/database/services/table.service';
 import {
   TableFormColumnSchema,
   TableFormForeignKeySchema,
@@ -50,6 +48,7 @@ export function TableForm({
   const [showForeignKeyDialog, setShowForeignKeyDialog] = useState(false);
   const [editingForeignKey, setEditingForeignKey] = useState<string>();
   const [foreignKeys, setForeignKeys] = useState<TableFormForeignKeySchema[]>([]);
+  const [foreignKeysDirty, setForeignKeysDirty] = useState(false);
   const queryClient = useQueryClient();
   const { showToast } = useToast();
 
@@ -220,7 +219,7 @@ export function TableForm({
         };
       });
 
-      return databaseService.createTable(data.tableName, columns);
+      return tableService.createTable(data.tableName, columns);
     },
     onSuccess: (data) => {
       void queryClient.invalidateQueries({ queryKey: ['database-metadata'] });
@@ -232,12 +231,13 @@ export function TableForm({
       form.reset();
       setError(null);
       setForeignKeys([]);
+      setForeignKeysDirty(false);
       onSuccess?.(data.tableName);
     },
     onError: (err) => {
       const errorMessage = err.message || 'Failed to create table';
       setError(errorMessage);
-      showToast('Failed to create table', 'error');
+      showToast(errorMessage, 'error');
     },
   });
 
@@ -350,7 +350,7 @@ export function TableForm({
         operations.renameTable = { newTableName: data.tableName };
       }
 
-      return databaseService.updateTableSchema(editTable.tableName, operations);
+      return tableService.updateTableSchema(editTable.tableName, operations);
     },
     onSuccess: (_, data) => {
       void queryClient.invalidateQueries({ queryKey: ['database-metadata'] });
@@ -360,9 +360,6 @@ export function TableForm({
       // Invalidate all table data queries for this table (with all parameter combinations)
       void queryClient.invalidateQueries({ queryKey: ['table', editTable?.tableName] });
 
-      // Invalidate the separate table schema query used by AddRecordSheet
-      void queryClient.invalidateQueries({ queryKey: ['table-schema', editTable?.tableName] });
-
       showToast(`Table "${data.tableName}" updated successfully!`, 'success');
 
       form.reset();
@@ -373,15 +370,24 @@ export function TableForm({
     onError: (err) => {
       // Invalidate queries to ensure we have fresh data after failed request
       void queryClient.invalidateQueries({ queryKey: ['table', editTable?.tableName] });
-      void queryClient.invalidateQueries({ queryKey: ['table-schema', editTable?.tableName] });
 
       const errorMessage = err.message || 'Failed to update table';
       setError(errorMessage);
-      showToast('Failed to update table', 'error');
+      showToast(errorMessage, 'error');
     },
   });
 
   const handleSubmit = form.handleSubmit((data) => {
+    const userColumns = data.columns.filter((col) => !col.isSystemColumn);
+    if (!userColumns.length) {
+      const msg =
+        mode === 'create'
+          ? 'Please add at least one user-defined column to create a table.'
+          : 'Please ensure the table has at least one user-defined column.';
+      setError(msg);
+      showToast(msg, 'error');
+      return;
+    }
     if (mode === 'edit') {
       updateTableMutation.mutate(data);
     } else {
@@ -402,6 +408,7 @@ export function TableForm({
         )
       );
       setEditingForeignKey(undefined);
+      setForeignKeysDirty(true);
     } else {
       // Add new foreign key
       setForeignKeys([
@@ -411,10 +418,12 @@ export function TableForm({
         },
       ]);
     }
+    setForeignKeysDirty(true);
   };
 
   const handleRemoveForeignKey = (columnName?: string) => {
     setForeignKeys(foreignKeys.filter((fk) => fk.columnName !== columnName));
+    setForeignKeysDirty(true);
   };
 
   if (!open) {
@@ -470,7 +479,7 @@ export function TableForm({
               {/* Columns Table */}
               <div className="px-3 overflow-x-auto">
                 {/* Table Headers */}
-                <div className="flex items-center gap-6 px-4 py-2 bg-slate-50 rounded-t text-sm font-medium text-zinc-950 dark:bg-neutral-700 dark:text-white">
+                <div className="flex items-center gap-6 px-4 py-2 w-min xl:w-full bg-slate-50 rounded-t text-sm font-medium text-zinc-950 dark:bg-neutral-700 dark:text-white">
                   <div className="flex-1 min-w-[175px]">Name</div>
                   <div className="flex-1 min-w-[175px]">Type</div>
                   <div className="flex-1 min-w-[175px]">Default Value</div>
@@ -511,7 +520,7 @@ export function TableForm({
             </div>
 
             {/* Foreign Keys Section */}
-            <div className="bg-white pb-3 rounded-xl border border-zinc-200 dark:bg-neutral-800 dark:border-transparent">
+            <div className="bg-white pb-3 rounded-xl border border-zinc-200 overflow-hidden dark:bg-neutral-800 dark:border-transparent">
               <div className="p-6">
                 <h2 className="text-base font-semibold text-black dark:text-white">Foreign Keys</h2>
                 <p className="text-sm text-zinc-500 dark:text-neutral-400">
@@ -521,11 +530,11 @@ export function TableForm({
 
               {/* Existing foreign keys */}
               {foreignKeys.length > 0 && (
-                <div className="px-6 pb-6 space-y-3">
+                <div className="px-6 pb-6 space-y-3 overflow-x-auto">
                   {foreignKeys.map((fk) => (
                     <div
                       key={fk.columnName}
-                      className="group flex items-center gap-6 2xl:gap-8 pl-4 pr-2 py-2 rounded-lg border border-zinc-200 bg-white hover:bg-zinc-100 transition-colors duration-150 dark:bg-neutral-700 dark:border-transparent dark:hover:bg-neutral-600"
+                      className="group flex items-center gap-6 2xl:gap-8 pl-4 pr-2 py-2 w-min xl:w-full rounded-lg border border-zinc-200 bg-white hover:bg-zinc-100 transition-colors duration-150 dark:bg-neutral-700 dark:border-transparent dark:hover:bg-neutral-600"
                     >
                       <div className="flex items-center gap-2 flex-1 min-w-[188px] overflow-hidden">
                         <Link className="flex-shrink-0 w-5 h-5 text-zinc-500 dark:text-neutral-400" />
@@ -632,9 +641,8 @@ export function TableForm({
         <div className="flex justify-end gap-3 max-w-[1080px] mx-auto px-6">
           <Button
             type="button"
-            variant="outline"
             onClick={() => onOpenChange(false)}
-            className="h-10 px-4 text-sm font-medium border-zinc-200 shadow-sm dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700 dark:hover:bg-neutral-700"
+            className="h-10 px-4 text-sm font-medium bg-white border border-zinc-200 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-zinc-950 hover:bg-zinc-50 dark:bg-neutral-600 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-700"
           >
             Cancel
           </Button>
@@ -643,7 +651,8 @@ export function TableForm({
             disabled={
               !form.formState.isValid ||
               createTableMutation.isPending ||
-              updateTableMutation.isPending
+              updateTableMutation.isPending ||
+              (!form.formState.isDirty && !foreignKeysDirty)
             }
             className="h-10 px-4 text-sm font-medium bg-zinc-950 text-neutral-50 shadow-sm disabled:opacity-40 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
           >

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

@@ -1,8 +1,7 @@
 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 { Input, Checkbox } from '@/components';
 import { TableFormColumnSchema, TableFormSchema } from '../schema';
 import { ColumnTypeSelect } from './ColumnTypeSelect';
 
@@ -25,7 +24,7 @@ export const TableFormColumn = memo(function TableFormColumn({
 }: TableFormColumnProps) {
   return (
     <div
-      className={`flex items-center gap-6 px-4 py-2 ${
+      className={`flex items-center gap-6 px-4 py-2 w-min xl:w-full ${
         isNewColumn ? 'bg-slate-50 dark:bg-neutral-800' : 'bg-white dark:bg-[#2D2D2D]'
       }`}
     >

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

@@ -24,7 +24,7 @@ export function TableSidebar({
 }: TableSidebarProps) {
   return (
     <FeatureSidebar
-      title="Database"
+      title="Tables"
       items={tables}
       selectedItem={selectedTable}
       onItemSelect={onTableSelect}

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

@@ -0,0 +1,48 @@
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { DatabaseTemplate } from '@/features/database/templates';
+import { TemplateCard } from './TemplateCard';
+
+interface TablesEmptyStateProps {
+  templates: DatabaseTemplate[];
+  onCreateTable: () => void;
+  onTemplateClick: (template: DatabaseTemplate) => void;
+}
+
+export function TablesEmptyState({
+  templates,
+  onCreateTable,
+  onTemplateClick,
+}: TablesEmptyStateProps) {
+  return (
+    <div className="flex justify-center w-full h-full bg-bg-gray dark:bg-neutral-800 px-6">
+      <div className="flex flex-col gap-6 max-w-[1024px] w-full pb-9 pt-6">
+        <h2 className="text-xl font-semibold text-zinc-950 dark:text-white leading-7 tracking-[-0.1px]">
+          Create Your First Table
+        </h2>
+        <Button
+          className="h-9 w-50 gap-2 font-medium dark:bg-emerald-300 dark:hover:bg-emerald-400 dark:text-black"
+          onClick={onCreateTable}
+        >
+          <Plus className="w-5 h-5" />
+          Create Table
+        </Button>
+        <div className="flex flex-col gap-3">
+          <p className="text-sm font-normal text-zinc-500 dark:text-neutral-400 leading-6">
+            or choose a template to start
+          </p>
+          <div className="grid grid-cols-2 xl:grid-cols-3 gap-6">
+            {templates.map((template) => (
+              <TemplateCard
+                key={template.id}
+                template={template}
+                onClick={() => onTemplateClick(template)}
+                showTableCount
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Table } from 'lucide-react';
+import { DatabaseTemplate } from '@/features/database/templates';
+
+interface TemplateCardProps {
+  template: DatabaseTemplate;
+  onClick: () => void;
+  showTableCount?: boolean;
+}
+
+export function TemplateCard({ template, onClick, showTableCount = false }: TemplateCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded-[4px] pl-6 pr-4 pt-4 pb-6 text-left transition-colors hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] hover:shadow-sm flex flex-col gap-3"
+    >
+      <div className="flex flex-col gap-2">
+        <h3 className="text-base font-normal text-zinc-950 dark:text-white leading-6">
+          {template.title}
+        </h3>
+        {/* Fixed height container for description with line clamp */}
+        <div className="h-[72px]">
+          <p className="text-sm font-normal text-zinc-500 dark:text-neutral-400 leading-6 line-clamp-3">
+            {template.description}
+          </p>
+        </div>
+      </div>
+      {showTableCount && (
+        <div className="flex items-center gap-2">
+          <Table className="w-5 h-5 text-zinc-500 dark:text-neutral-400" />
+          <p className="text-sm font-normal text-zinc-500 dark:text-neutral-400 leading-6">
+            {template.tableCount} {template.tableCount === 1 ? 'Table' : 'Tables'}
+          </p>
+        </div>
+      )}
+    </button>
+  );
+}