@riligar/elysia-sqlite 1.1.0

package/src/ui/src/App.jsx

@@ -0,0 +1,2103 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  AppShell,
+  NavLink,
+  Text,
+  Group,
+  ActionIcon,
+  TextInput,
+  Button,
+  Table,
+  Checkbox,
+  Badge,
+  Modal,
+  Select,
+  Textarea,
+  Menu,
+  Kbd,
+  Box,
+  Tooltip,
+  useMantineColorScheme,
+  ScrollArea,
+  Paper,
+  Divider,
+  Stack,
+  Loader,
+  Center,
+  SimpleGrid,
+  Title,
+  ThemeIcon,
+  HoverCard,
+  Switch,
+} from "@mantine/core";
+import { useDisclosure, useHotkeys, useLocalStorage } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import mermaid from "mermaid";
+import {
+  IconDatabase,
+  IconTable,
+  IconPlus,
+  IconRefresh,
+  IconFilter,
+  IconDownload,
+  IconSchema,
+  IconSearch,
+  IconChevronLeft,
+  IconChevronRight,
+  IconTerminal2,
+  IconPlayerPlay,
+  IconHistory,
+  IconStar,
+  IconStarFilled,
+  IconTrash,
+  IconDots,
+  IconSun,
+  IconMoon,
+  IconCommand,
+  IconX,
+  IconKey,
+  IconLink,
+  IconLetterA,
+  IconHash,
+  IconCalendar,
+  IconCheck,
+  IconSparkles,
+  IconSitemap,
+  IconSettings,
+  IconUser,
+  IconDeviceLaptop,
+  IconLogout,
+  IconSelector,
+  IconFileText,
+} from "@tabler/icons-react";
+
+import { useFilter } from "./hooks/useFilter";
+import { Filter } from "./components/Filter";
+import { ExportButton } from "./components/ExportButton";
+import { ButtonDelete } from "./components/HoldButton";
+import { Onboarding } from "./components/Onboarding";
+import { Login } from "./components/Login";
+import { SecuritySettings } from "./components/SecuritySettings";
+import { TableSelector } from "./components/TableSelector";
+import { DataGrid } from "./components/DataGrid";
+import { Pagination } from "./components/Pagination";
+
+const API = "/admin/api";
+
+// Column type icon mapping
+const getColumnIcon = (type, name) => {
+  const t = (type || "").toUpperCase();
+  const n = (name || "").toLowerCase();
+
+  if (n.includes("email")) return <IconLetterA size={14} />;
+  if (n.includes("date") || n.includes("time"))
+    return <IconCalendar size={14} />;
+  if (t.includes("INT") || t.includes("REAL") || t.includes("FLOAT"))
+    return <IconHash size={14} />;
+  if (t.includes("BOOL")) return <IconCheck size={14} />;
+  return <IconLetterA size={14} />;
+};
+
+// Tag colors
+const tagColors = ["gray"];
+const getTagColor = (value) => {
+  if (!value) return "gray";
+  const hash = String(value)
+    .split("")
+    .reduce((a, b) => a + b.charCodeAt(0), 0);
+  return tagColors[hash % tagColors.length];
+};
+
+const isTagColumn = (name) => {
+  const n = (name || "").toLowerCase();
+  return (
+    n.includes("status") ||
+    n.includes("categoria") ||
+    n.includes("category") ||
+    n === "cor"
+  );
+};
+
+// New Record Modal Component with FK Support
+const NewRecordModal = ({
+  opened,
+  onClose,
+  columns,
+  currentTable,
+  onSuccess,
+}) => {
+    // ... (modal implementation)
+  const [formData, setFormData] = useState({});
+  const [fkOptionsMap, setFkOptionsMap] = useState({});
+  const [loadingFk, setLoadingFk] = useState({});
+  const [saving, setSaving] = useState(false);
+
+  // Reset form when modal opens/closes
+  useEffect(() => {
+    if (opened) {
+      setFormData({});
+      // Load FK options for all FK columns
+      const fkColumns = columns.filter((c) => c.pk !== 1 && c.fk);
+      fkColumns.forEach((col) => {
+        loadFkOptions(col);
+      });
+    }
+  }, [opened, columns]);
+
+  const loadFkOptions = async (col) => {
+    if (!col.fk) return;
+
+    setLoadingFk((prev) => ({ ...prev, [col.name]: true }));
+
+    try {
+      const res = await fetch(
+        `${API}/table/${currentTable}/fk-options?refTable=${col.fk.table}&refColumn=${col.fk.column}`
+      );
+      const data = await res.json();
+
+      if (data.success) {
+        setFkOptionsMap((prev) => ({
+          ...prev,
+          [col.name]: data.options.map((o) => ({
+            value: String(o.value),
+            label: `${o.label} (ID: ${o.value})`,
+          })),
+        }));
+      }
+    } catch (err) {
+      console.error("Error loading FK options:", err);
+    }
+
+    setLoadingFk((prev) => ({ ...prev, [col.name]: false }));
+  };
+
+  const handleFieldChange = (colName, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [colName]: value,
+    }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+
+    try {
+      const res = await fetch(`${API}/table/${currentTable}/insert`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+      const result = await res.json();
+
+      if (result.success) {
+        notifications.show({
+          title: "Success",
+          message: "Record created!",
+          color: "green",
+        });
+        onSuccess();
+      } else {
+        notifications.show({
+          title: "Error",
+          message: result.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Error",
+        message: "Failed to save",
+        color: "red",
+      });
+    }
+
+    setSaving(false);
+  };
+
+  const renderField = (col) => {
+    const hasFK = !!col.fk;
+    const isRequired = col.notnull === 1;
+    const label = `${col.name}${isRequired ? " *" : ""}`;
+
+    if (hasFK) {
+      const options = fkOptionsMap[col.name] || [];
+      const isLoading = loadingFk[col.name];
+
+      return (
+        <Select
+          key={col.name}
+          label={label}
+          placeholder={isLoading ? "Loading..." : `Select ${col.fk.table}`}
+          data={options}
+          value={formData[col.name] || null}
+          onChange={(value) => handleFieldChange(col.name, value)}
+          searchable
+          clearable
+          disabled={isLoading}
+          leftSection={<IconKey size={14} />}
+        />
+      );
+    }
+
+    return (
+      <TextInput
+        key={col.name}
+        label={label}
+        placeholder={col.type || "TEXT"}
+        value={formData[col.name] || ""}
+        onChange={(e) => handleFieldChange(col.name, e.target.value)}
+      />
+    );
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="New Record">
+      <Stack>
+        {columns.filter((c) => c.pk !== 1).map((col) => renderField(col))}
+        <Group justify="flex-end">
+          <Button variant="subtle" onClick={onClose} color="gray">
+            Cancel
+          </Button>
+          <Button color="dark" onClick={handleSave} loading={saving}>
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+
+export default function App() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const dark = colorScheme === "dark";
+
+  // Auth State
+  const [auth, setAuth] = useState(null);
+
+  // Security Modal
+  const [securityOpened, { open: openSecurity, close: closeSecurity }] = useDisclosure(false);
+  
+  // ... (rest of checkAuth and useEffect)
+  const checkAuth = async () => {
+    try {
+      const res = await fetch("/admin/auth/status");
+      const data = await res.json();
+      setAuth(data);
+    } catch (e) {
+      console.error("Failed to check auth status", e);
+    }
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      await fetch("/admin/auth/logout", { method: "POST" });
+      setAuth({ ...auth, authenticated: false, user: null });
+      notifications.show({
+          title: "Logged out",
+          message: "You have been successfully logged out",
+          color: "gray"
+      });
+    } catch (e) {
+      notifications.show({
+          title: "Error",
+          message: "Failed to logout",
+          color: "red"
+      });
+    }
+  };
+  
+  // State
+  const [tables, setTables] = useState([]);
+// ... (rest of App state)
+
+  const [currentTable, setCurrentTable] = useState(null);
+  const [columns, setColumns] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [sort, setSort] = useState(null);
+  const [sortDir, setSortDir] = useState("ASC");
+  const [selectedRows, setSelectedRows] = useState(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sqlMode, setSqlMode] = useState(false);
+  const [sqlQuery, setSqlQuery] = useState("");
+  const [aiPrompt, setAiPrompt] = useState("");
+  const [aiLoading, setAiLoading] = useState(false);
+  const [editingCell, setEditingCell] = useState(null); // { rowPk, column }
+  const [fkMap, setFkMap] = useState({});
+
+  useEffect(() => {
+    const resolveFks = async () => {
+      if (!rows.length || !columns.length) return;
+
+      const fkCols = columns.filter((c) => c.fk);
+      if (fkCols.length === 0) return;
+
+      const newMap = { ...fkMap };
+      let hasChanges = false;
+
+      for (const col of fkCols) {
+        const idsToResolve = new Set();
+        rows.forEach((row) => {
+          const val = row[col.name];
+          if (val != null && !newMap[`${col.fk.table}:${val}`]) {
+            idsToResolve.add(val);
+          }
+        });
+
+        if (idsToResolve.size > 0) {
+          try {
+            const res = await fetch(`${API}/resolve-fk`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                table: col.fk.table,
+                idColumn: col.fk.column,
+                ids: Array.from(idsToResolve),
+              }),
+            });
+            const data = await res.json();
+            if (data.success) {
+              Object.entries(data.values).forEach(([id, label]) => {
+                newMap[`${col.fk.table}:${id}`] = label;
+              });
+              hasChanges = true;
+            }
+          } catch (e) {
+            console.error("Failed to resolve FKs", e);
+          }
+        }
+      }
+
+      if (hasChanges) {
+        setFkMap(newMap);
+      }
+    };
+
+    resolveFks();
+  }, [rows, columns]);
+
+  // Persisted state
+  const [favorites, setFavorites] = useLocalStorage({
+    key: "sqlite-favorites",
+    defaultValue: [],
+  });
+  const [queryHistory, setQueryHistory] = useLocalStorage({
+    key: "sqlite-history",
+    defaultValue: [],
+  });
+  const [recentTables, setRecentTables] = useLocalStorage({
+    key: "sqlite-recents",
+    defaultValue: [],
+  });
+
+  // Modals
+  const [newRecordOpened, { open: openNewRecord, close: closeNewRecord }] =
+    useDisclosure(false);
+  const [filterOpened, { open: openFilter, close: closeFilter }] =
+    useDisclosure(false);
+  const [schemaOpened, { open: openSchema, close: closeSchema }] =
+    useDisclosure(false);
+  const [exportOpened, { open: openExport, close: closeExport }] =
+    useDisclosure(false);
+  const [commandOpened, { open: openCommand, close: closeCommand }] =
+    useDisclosure(false);
+  const [historyOpened, { toggle: toggleHistory }] = useDisclosure(false);
+  const [erdOpened, { open: openErd, close: closeErd }] = useDisclosure(false);
+  const [erdSvg, setErdSvg] = useState("");
+  const [commandQuery, setCommandQuery] = useState("");
+  const [commandIndex, setCommandIndex] = useState(0);
+
+  // Filters
+  const [filters, setFilters] = useState([]);
+  const [exportFormat, setExportFormat] = useState("csv");
+
+  // Reset SQL Runner state (preserves queryHistory)
+  const resetSqlRunnerState = () => {
+    setSqlQuery("");
+    setAiPrompt("");
+    setRows([]);
+    setColumns([]);
+    if (historyOpened) {
+      toggleHistory();
+    }
+  };
+
+  // Command palette items
+  const commandActions = [
+    {
+      label: "Run SQL",
+      icon: IconTerminal2,
+      action: () => {
+        resetSqlRunnerState();
+        setSqlMode(true);
+        closeCommand();
+      },
+    },
+    {
+      label: "View ER Diagram",
+      icon: IconSitemap,
+      action: () => {
+        loadErd();
+        closeCommand();
+      },
+    },
+    {
+      label: "Toggle Theme",
+      icon: dark ? IconSun : IconMoon,
+      action: () => {
+        toggleColorScheme();
+        closeCommand();
+      },
+    },
+  ];
+
+  const filteredTables = tables.filter((t) =>
+    t.name.toLowerCase().includes(commandQuery.toLowerCase())
+  );
+
+  const filteredActions = commandActions.filter((a) =>
+    a.label.toLowerCase().includes(commandQuery.toLowerCase())
+  );
+
+  // Combined items for keyboard navigation
+  const allItems = [
+    ...filteredTables.slice(0, 8).map((t) => ({ type: "table", name: t.name })),
+    ...filteredActions.map((a) => ({
+      type: "action",
+      label: a.label,
+      action: a.action,
+    })),
+  ];
+
+  const handleCommandKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setCommandIndex((i) => Math.min(i + 1, allItems.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setCommandIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && allItems.length > 0) {
+      e.preventDefault();
+      const item = allItems[commandIndex];
+      if (item.type === "table") {
+        selectTable(item.name);
+        setCommandQuery("");
+        setCommandIndex(0);
+        closeCommand();
+      } else {
+        item.action();
+        setCommandIndex(0);
+      }
+    }
+  };
+
+  // Hotkeys
+  useHotkeys([
+    [
+      "mod+k",
+      () => {
+        setCommandQuery("");
+        setCommandIndex(0);
+        openCommand();
+      },
+    ],
+    [
+      "escape",
+      () => {
+        closeCommand();
+        setCommandQuery("");
+        setCommandIndex(0);
+      },
+    ],
+  ]);
+
+  // Load tables
+  useEffect(() => {
+    if (auth?.authenticated) {
+      loadTables();
+    }
+  }, [auth?.authenticated]);
+
+  const loadTables = async () => {
+    try {
+      const res = await fetch(`${API}/tables`);
+      const data = await res.json();
+
+      if (data.tables) {
+        const tablesWithCount = await Promise.all(
+          data.tables.map(async (name) => {
+            try {
+              const countRes = await fetch(`${API}/table/${name}/count`);
+              const countData = await countRes.json();
+              return { name, count: countData.count || 0 };
+            } catch {
+              return { name, count: "?" };
+            }
+          })
+        );
+        setTables(tablesWithCount);
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao carregar tabelas",
+        color: "red",
+      });
+    }
+  };
+
+  const selectTable = async (name) => {
+    setCurrentTable(name);
+    setPage(1);
+    setSort(null);
+    setSelectedRows(new Set());
+    setSearchQuery("");
+    setSearchQuery("");
+    setSqlMode(false);
+    setFilters([]);
+    resetSqlRunnerState();
+
+    // Add to recents
+    setRecentTables((prev) => {
+      const filtered = prev.filter((t) => t !== name);
+      return [name, ...filtered].slice(0, 5);
+    });
+
+    try {
+      const res = await fetch(`${API}/table/${name}`);
+      const data = await res.json();
+      setColumns(data.columns || []);
+    } catch {
+      setColumns([]);
+    }
+
+    loadData(name);
+    setFkMap({});
+  };
+
+  const loadData = async (tableName = currentTable) => {
+    if (!tableName) return;
+    setLoading(true);
+
+    const offset = (page - 1) * 50;
+    let sql = `SELECT * FROM ${tableName}`;
+
+    // Add filters
+    const conditions = [];
+    filters.forEach((f) => {
+      if (f.column && f.value) {
+        if (f.operator === "LIKE") {
+          conditions.push(`${f.column} LIKE '%${f.value}%'`);
+        } else {
+          conditions.push(`${f.column} ${f.operator} '${f.value}'`);
+        }
+      }
+    });
+
+    if (searchQuery) {
+      const textCols = columns.filter((c) =>
+        c.type?.toUpperCase().includes("TEXT")
+      );
+      if (textCols.length > 0) {
+        const searchConds = textCols
+          .map((c) => `${c.name} LIKE '%${searchQuery}%'`)
+          .join(" OR ");
+        conditions.push(`(${searchConds})`);
+      }
+    }
+
+    if (conditions.length > 0) {
+      sql += ` WHERE ${conditions.join(" AND ")}`;
+    }
+
+    if (sort) sql += ` ORDER BY ${sort} ${sortDir}`;
+    sql += ` LIMIT 50 OFFSET ${offset}`;
+
+    try {
+      const [dataRes, countRes] = await Promise.all([
+        fetch(`${API}/query`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ sql }),
+        }),
+        fetch(`${API}/table/${tableName}/count`),
+      ]);
+
+      const data = await dataRes.json();
+      const count = await countRes.json();
+
+      if (data.success) {
+        setRows(data.rows || []);
+        setTotal(count.count || 0);
+      } else {
+        notifications.show({
+          title: "Erro",
+          message: data.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao carregar dados",
+        color: "red",
+      });
+    }
+
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (currentTable && !sqlMode) {
+      loadData();
+    }
+  }, [page, sort, sortDir, filters, searchQuery]);
+
+  // Toggle favorite
+  const toggleFavorite = (table) => {
+    if (favorites.includes(table)) {
+      setFavorites(favorites.filter((f) => f !== table));
+    } else {
+      setFavorites([...favorites, table]);
+    }
+  };
+
+  // Run SQL query
+  const runQuery = async () => {
+    if (!sqlQuery.trim()) return;
+    setLoading(true);
+
+    // Add to history
+    const newHistory = [
+      { sql: sqlQuery, timestamp: Date.now() },
+      ...queryHistory.filter((h) => h.sql !== sqlQuery),
+    ].slice(0, 20);
+    setQueryHistory(newHistory);
+
+    try {
+      const res = await fetch(`${API}/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sql: sqlQuery }),
+      });
+      const data = await res.json();
+
+      if (data.success) {
+        if (data.rows) {
+          setRows(data.rows);
+          setColumns(
+            data.columns?.map((c) => ({ name: c, type: "TEXT" })) || []
+          );
+          setTotal(data.rows.length);
+        } else {
+          notifications.show({
+            title: "Sucesso",
+            message: data.message,
+            color: "green",
+          });
+          loadTables();
+        }
+      } else {
+        notifications.show({
+          title: "Erro",
+          message: data.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao executar query",
+        color: "red",
+      });
+    }
+
+    setLoading(false);
+  };
+
+  // Delete record
+  const deleteRecord = async (pk) => {
+    const pkCol = columns.find((c) => c.pk === 1)?.name || columns[0]?.name;
+
+    try {
+      const res = await fetch(`${API}/table/${currentTable}/delete`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ column: pkCol, value: pk }),
+      });
+      const result = await res.json();
+
+      if (result.success) {
+        notifications.show({
+          title: "Sucesso",
+          message: "Excluído!",
+          color: "green",
+        });
+        loadData();
+        loadTables();
+      } else {
+        notifications.show({
+          title: "Erro",
+          message: result.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao excluir",
+        color: "red",
+      });
+    }
+  };
+
+  // Bulk delete
+  const bulkDelete = async () => {
+    const pkCol = columns.find((c) => c.pk === 1)?.name || columns[0]?.name;
+
+    for (const pk of selectedRows) {
+      await fetch(`${API}/table/${currentTable}/delete`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ column: pkCol, value: pk }),
+      });
+    }
+
+    setSelectedRows(new Set());
+    notifications.show({
+      title: "Sucesso",
+      message: "Excluídos!",
+      color: "green",
+    });
+    loadData();
+    loadTables();
+  };
+
+  // Export
+  const doExport = async () => {
+    let exportRows = rows;
+
+    if (selectedRows.size > 0) {
+      const pkCol = columns.find((c) => c.pk === 1)?.name || columns[0]?.name;
+      exportRows = rows.filter((r) => selectedRows.has(String(r[pkCol])));
+    }
+
+    if (exportFormat === "csv") {
+      const cols = Object.keys(exportRows[0] || {});
+      const csv = [
+        cols.join(","),
+        ...exportRows.map((r) =>
+          cols
+            .map((c) => `"${String(r[c] || "").replace(/"/g, '""')}"`)
+            .join(",")
+        ),
+      ].join("\n");
+      downloadFile(`${currentTable}.csv`, csv, "text/csv");
+    } else {
+      downloadFile(
+        `${currentTable}.json`,
+        JSON.stringify(exportRows, null, 2),
+        "application/json"
+      );
+    }
+
+    closeExport();
+  };
+
+  const downloadFile = (filename, content, type) => {
+    const blob = new Blob([content], { type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+    closeExport();
+  };
+
+  const askAi = async () => {
+    if (!aiPrompt.trim()) return;
+    setAiLoading(true);
+
+    try {
+      const res = await fetch(`${API}/ai/sql`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: aiPrompt }),
+      });
+      const data = await res.json();
+
+      if (data.success) {
+        setSqlQuery(data.sql);
+        notifications.show({
+          title: "AI",
+          message: "SQL Gerado!",
+          color: "blue",
+          icon: <IconSparkles size={16} />,
+        });
+      } else {
+        notifications.show({
+          title: "Erro AI",
+          message: data.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao consultar AI",
+        color: "red",
+      });
+    }
+
+    setAiLoading(false);
+  };
+
+  // Inline edit - update cell
+  const updateCell = async (rowPk, column, newValue) => {
+    const pkCol = columns.find((c) => c.pk === 1)?.name || columns[0]?.name;
+
+    try {
+      const res = await fetch(`${API}/table/${currentTable}/update`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          column,
+          value: newValue,
+          pkColumn: pkCol,
+          pkValue: rowPk,
+        }),
+      });
+      const result = await res.json();
+
+      if (result.success) {
+        // Update local state
+        setRows((prevRows) =>
+          prevRows.map((r) =>
+            String(r[pkCol]) === String(rowPk)
+              ? { ...r, [column]: newValue }
+              : r
+          )
+        );
+        notifications.show({
+          title: "Salvo",
+          message: `${column} atualizado`,
+          color: "green",
+        });
+      } else {
+        notifications.show({
+          title: "Erro",
+          message: result.error,
+          color: "red",
+        });
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao atualizar",
+        color: "red",
+      });
+    }
+
+    setEditingCell(null);
+  };
+
+  // Load and render ERD
+  const loadErd = async () => {
+    try {
+      const res = await fetch(`${API}/meta/schema`);
+      const data = await res.json();
+
+      if (data.success) {
+        // Generate Mermaid syntax
+        let syntax = "erDiagram\n";
+
+        data.schema.forEach((table) => {
+          syntax += `  ${table.name} {\n`;
+          table.columns.forEach((col) => {
+            const type = col.type || "TEXT";
+            const key = col.pk ? "PK" : col.fk ? "FK" : "";
+            syntax += `    ${type} ${col.name} ${key}\n`;
+          });
+          syntax += "  }\n";
+
+          // Relationships
+          table.fks.forEach((fk) => {
+            syntax += `  ${table.name} }o--|| ${fk.table} : "${fk.from}"\n`;
+          });
+        });
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: dark ? "dark" : "neutral",
+          securityLevel: "loose",
+        });
+
+        const { svg } = await mermaid.render("erd-graph", syntax);
+        setErdSvg(svg);
+        openErd();
+      }
+    } catch (err) {
+      notifications.show({
+        title: "Erro",
+        message: "Erro ao gerar ERD",
+        color: "red",
+      });
+    }
+  };
+
+  // Render table
+  const pk = columns.find((c) => c.pk === 1)?.name || columns[0]?.name;
+
+  // Editable Cell Component with FK support
+  // Icon logic
+  const getTableIcon = (name) => {
+    if (!name) return <IconDatabase size={32} />;
+    const n = name.toLowerCase();
+    if (n.includes("user") || n.includes("usu")) return <IconStar size={32} />;
+    if (n.includes("prod")) return <IconSparkles size={32} />;
+    if (n.includes("order") || n.includes("ped"))
+      return <IconTable size={32} />;
+    // Deterministic random icon
+    const icons = [IconDatabase, IconTable, IconSitemap, IconCommand, IconHash];
+    const index = name.charCodeAt(0) % icons.length;
+    const Icon = icons[index];
+    return <Icon size={32} />;
+  };
+
+  // Filter Logic
+  const filterKeys = useMemo(() => columns.map((c) => c.name), [columns]);
+
+  // Create a filter options object
+  const filterOptions = useMemo(() => {
+    const options = {};
+    columns.forEach((col) => {
+      // Get unique values from current rows for this column
+      const values = new Set(
+        rows
+          .map((r) => r[col.name])
+          .filter((v) => v !== null && v !== undefined)
+      );
+      // Limit to 20 options to keep UI clean
+      options[col.name] = Array.from(values).map(String).slice(0, 20);
+    });
+    return options;
+  }, [columns, rows]);
+
+  const {
+    filteredItems: filteredRows,
+    data: filterData,
+    setData: filterSetData,
+  } = useFilter(rows, filterKeys);
+
+  const mainApp = (
+    <AppShell navbar={{ width: 260, breakpoint: "sm" }} padding="md">
+      <AppShell.Navbar
+        p="xs"
+        style={{
+          backgroundColor: "#FBFAF8",
+          borderRight: "1px solid #E8E5E0",
+        }}
+      >
+        <Group justify="space-between" mb="lg" px="xs" mt="xs">
+          <Group gap={4}>
+            <IconDatabase stroke={2.5} size={24} color="#37352F" />
+            <Text fw={700} size="md" c="#37352F">
+              SQLite Admin
+            </Text>
+          </Group>
+        </Group>
+
+        <Stack gap={4}>
+          <Text
+            size="xs"
+            fw={500}
+            c="#91918E"
+            px="xs"
+            mb={4}
+            style={{
+              textTransform: "uppercase",
+              fontSize: "11px",
+              letterSpacing: "0.03em",
+            }}
+          >
+            Platform
+          </Text>
+          <NavLink
+            label="Home"
+            leftSection={<IconCommand size={16} />}
+            onClick={() => {
+              setCurrentTable(null);
+              setSqlMode(false);
+              resetSqlRunnerState();
+            }}
+            style={{ borderRadius: 6 }}
+            active={!currentTable && !sqlMode}
+          />
+          <NavLink
+            label="Search"
+            leftSection={<IconSearch size={16} />}
+            onClick={() => openCommand()}
+            style={{ borderRadius: 6 }}
+          />
+          <NavLink
+            label="SQL Runner"
+            leftSection={<IconTerminal2 size={16} />}
+            active={sqlMode}
+            onClick={() => {
+              if (sqlMode) {
+                // Exiting SQL Runner - reset state
+                setSqlMode(false);
+                resetSqlRunnerState();
+              } else {
+                // Entering SQL Runner
+                resetSqlRunnerState();
+                setSqlMode(true);
+                setCurrentTable(null);
+              }
+            }}
+            style={{ borderRadius: 6 }}
+          />
+          <NavLink
+            label="ER Diagram"
+            leftSection={<IconSitemap size={16} />}
+            onClick={() => loadErd()}
+            style={{ borderRadius: 6 }}
+          />
+        </Stack>
+
+        <Divider my="sm" color="#E8E5E0" />
+
+        <TableSelector 
+          tables={tables}
+          favorites={favorites}
+          currentTable={currentTable}
+          onSelectTable={selectTable}
+        />
+
+        <Divider my="sm" color="#E8E5E0" />
+
+        {/* User Menu */}
+        <Menu shadow="md" width={200} position="right-end">
+          <Menu.Target>
+            <Button
+              variant="subtle"
+              color="gray"
+              fullWidth
+              justify="space-between"
+              size="md"
+              px={8}
+              py={4}
+              style={{
+                height: "auto",
+                borderRadius: 6,
+                color: "var(--mantine-color-text)",
+              }}
+            >
+              <Group gap="xs">
+                <Box
+                  style={{
+                    width: 28,
+                    height: 28,
+                    borderRadius: "50%",
+                    backgroundColor: "#E5E7EB",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#374151",
+                    fontSize: 12,
+                    fontWeight: 600,
+                  }}
+                >
+                  {auth?.user?.[0]?.toUpperCase() || "U"}
+                </Box>
+                <Box style={{ textAlign: "left" }}>
+                  <Text size="sm" fw={500} lh={1.2}>
+                    {auth?.user || "User"}
+                  </Text>
+                  <Text size="xs" c="dimmed" lh={1.2}>
+                    sqlite@local
+                  </Text>
+                </Box>
+              </Group>
+              <IconSelector size={14} color="gray" />
+            </Button>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            <Menu.Label>Application</Menu.Label>
+            <Menu.Item
+              closeMenuOnClick={false}
+              onClick={() => toggleColorScheme()}
+              rightSection={
+                <Switch
+                  checked={dark}
+                  size="sm"
+                  onLabel={<IconMoon size={12} stroke={2.5} color="var(--mantine-color-yellow-4)" />}
+                  offLabel={<IconSun size={12} stroke={2.5} color="var(--mantine-color-gray-6)" />}
+                  readOnly
+                  style={{ pointerEvents: "none" }}
+                />
+              }
+            >
+              Dark Mode
+            </Menu.Item>
+            <Menu.Item leftSection={<IconSettings size={14} />} onClick={openSecurity}>
+              Settings
+            </Menu.Item>
+
+            <Menu.Divider />
+
+            <Menu.Item color="red" leftSection={<IconLogout size={14} />} onClick={handleLogout}>
+              Logout
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </AppShell.Navbar>
+
+      <AppShell.Main>
+        <SecuritySettings opened={securityOpened} onClose={closeSecurity} />
+        {sqlMode ? (
+
+            // ... (rest of AppShell content)
+
+            
+          // SQL MODE LAYOUT
+          <Box p="xl" style={{ maxWidth: 900, margin: "0 auto" }}>
+            <Group mb="xl" gap="sm">
+              <IconTerminal2 size={42} />
+              <Title order={1}>SQL Runner</Title>
+            </Group>
+
+            <Paper
+              p="md"
+              withBorder
+              radius="md"
+              mb="lg"
+              bg={dark ? "dark.6" : "gray.0"}
+              style={{
+                borderColor: dark
+                  ? "var(--mantine-color-dark-4)"
+                  : "var(--mantine-color-gray-3)",
+              }}
+            >
+              <Group gap="sm">
+                <IconSparkles size={20} style={{ opacity: 0.6 }} />
+                <TextInput
+                  placeholder="Ask AI to write SQL..."
+                  style={{ flex: 1 }}
+                  value={aiPrompt}
+                  onChange={(e) => setAiPrompt(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && askAi()}
+                />
+                {aiLoading && <Loader size="xs" color="gray" />}
+              </Group>
+              <Text size="xs" c="dimmed" align="right" mt="xs">
+                Press ENTER to generate your query
+              </Text>
+            </Paper>
+
+            <Textarea
+              label="Query"
+              placeholder="SELECT * FROM ..."
+              minRows={5}
+              value={sqlQuery}
+              onChange={(e) => setSqlQuery(e.target.value)}
+              styles={{ input: { fontFamily: "monospace" } }}
+              mb="md"
+            />
+
+            <Group justify="flex-end">
+              <Button variant="subtle" onClick={toggleHistory} color="gray">
+                History
+              </Button>
+              <Button color="dark" onClick={runQuery}>
+                Run Query
+              </Button>
+            </Group>
+
+            {/* History */}
+            {historyOpened && (
+              <Paper withBorder p="md" radius="md" mt="xl">
+                <Text fw={600} mb="sm">
+                  Query History
+                </Text>
+                <Stack gap="xs">
+                  {queryHistory.length === 0 ? (
+                    <Text size="sm" c="dimmed" fs="italic">
+                      No history yet.
+                    </Text>
+                  ) : (
+                    queryHistory.slice(0, 10).map((h, i) => (
+                      <Group key={i} justify="space-between" wrap="nowrap">
+                        <Text
+                          size="sm"
+                          style={{
+                            fontFamily: "monospace",
+                            cursor: "pointer",
+                            flex: 1,
+                          }}
+                          onClick={() => setSqlQuery(h.sql)}
+                          lineClamp={1}
+                        >
+                          {h.sql}
+                        </Text>
+                        <Group gap="xs" wrap="nowrap">
+                          <Text size="xs" c="dimmed">
+                            {new Date(h.timestamp).toLocaleTimeString()}
+                          </Text>
+                          <ActionIcon
+                            variant="subtle"
+                            color="dark"
+                            size="sm"
+                            onClick={() => {
+                              setSqlQuery(h.sql);
+                              setTimeout(() => runQuery(), 100);
+                            }}
+                          >
+                            <IconPlayerPlay size={14} />
+                          </ActionIcon>
+                        </Group>
+                      </Group>
+                    ))
+                  )}
+                </Stack>
+              </Paper>
+            )}
+
+            {/* Results */}
+            {loading ? (
+              <Center py="xl">
+                <Loader color="gray" type="dots" />
+              </Center>
+            ) : (
+              rows.length > 0 &&
+              sqlMode && (
+                <Paper withBorder radius="md" mt="xl">
+                  <Group
+                    p="sm"
+                    justify="space-between"
+                    style={{
+                      borderBottom: "1px solid var(--mantine-color-gray-3)",
+                    }}
+                  >
+                    <Text size="sm" c="dimmed">
+                      {rows.length} result(s)
+                    </Text>
+                    <ExportButton
+                      data={rows}
+                      columns={columns}
+                      filename="query_results"
+                      variant="subtle"
+                      compact
+                    />
+                  </Group>
+                  <ScrollArea>
+                    <Table
+                      striped={false}
+                      highlightOnHover
+                      verticalSpacing="xs"
+                    >
+                      <Table.Thead>
+                        <Table.Tr>
+                          {columns.map((col) => (
+                            <Table.Th
+                              key={col.name}
+                              style={{ borderBottom: "1px solid #eee" }}
+                            >
+                              <Text size="xs" fw={500} c="dimmed">
+                                {col.name}
+                              </Text>
+                            </Table.Th>
+                          ))}
+                        </Table.Tr>
+                      </Table.Thead>
+                      <Table.Tbody>
+                        {rows.map((row, idx) => (
+                          <Table.Tr key={idx}>
+                            {columns.map((col) => (
+                              <Table.Td
+                                key={col.name}
+                                style={{ borderBottom: "1px solid #f5f5f5" }}
+                              >
+                                <Text
+                                  size="sm"
+                                  lineClamp={2}
+                                  title={String(row[col.name])}
+                                >
+                                  {col.fk ? (
+                                    <Group gap={6} wrap="nowrap">
+                                      <Badge
+                                        variant="outline"
+                                        color="gray"
+                                        size="sm"
+                                        leftSection={<IconLink size={10} />}
+                                        styles={{ label: { fontWeight: 500 } }}
+                                      >
+                                        {String(row[col.name])}
+                                      </Badge>
+                                      {fkMap[
+                                        `${col.fk.table}:${row[col.name]}`
+                                      ] && (
+                                        <Text
+                                          size="xs"
+                                          c="dimmed"
+                                          lineClamp={1}
+                                        >
+                                          {
+                                            fkMap[
+                                              `${col.fk.table}:${row[col.name]}`
+                                            ]
+                                          }
+                                        </Text>
+                                      )}
+                                    </Group>
+                                  ) : row[col.name] != null ? (
+                                    String(row[col.name])
+                                  ) : (
+                                    <Text span c="dimmed" fs="italic">
+                                      NULL
+                                    </Text>
+                                  )}
+                                </Text>
+                              </Table.Td>
+                            ))}
+                          </Table.Tr>
+                        ))}
+                      </Table.Tbody>
+                    </Table>
+                  </ScrollArea>
+                </Paper>
+              )
+            )}
+          </Box>
+        ) : !currentTable ? (
+          // DASHBOARD / OVERVIEW (NOTION STYLE)
+          <Box p="xl" style={{ maxWidth: 960, margin: "0 auto" }}>
+            {/* 1. Header Area */}
+            <Group align="flex-start" gap="md" mb={48} mt="xl">
+              <ThemeIcon size={72} variant="transparent" c="dark">
+                <IconDatabase size={72} stroke={1.3} />
+              </ThemeIcon>
+              <Stack gap={0} mt={4}>
+                <Title order={1} fw={700} fz={40}>
+                  SQLite Admin
+                </Title>
+                <Text c="dimmed" size="lg">
+                  Manage your local database schema and data.
+                </Text>
+              </Stack>
+            </Group>
+
+            {/* 2. Gallery Section (Tools) */}
+            <Box mb={48}>
+              <Title order={3} fw={600} mb="xl" fz={18}>
+                Quick Access
+              </Title>
+
+              <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="xl">
+                {/* Card: SQL Runner */}
+                <Paper
+                  withBorder
+                  p="lg"
+                  radius="md"
+                  onClick={() => setSqlMode(true)}
+                  style={{
+                    cursor: "pointer",
+                    transition: "box-shadow 0.2s",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                  }}
+                  className="editable-cell"
+                  h={140}
+                  display="flex"
+                >
+                  <Group justify="space-between" align="flex-start">
+                    <ThemeIcon variant="light" color="gray" size="lg">
+                      <IconTerminal2 size={20} />
+                    </ThemeIcon>
+                  </Group>
+                  <Box>
+                    <Text fw={600} size="md">
+                      SQL Runner
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                      Run queries & AI
+                    </Text>
+                  </Box>
+                </Paper>
+
+                {/* Card: Search */}
+                <Paper
+                  withBorder
+                  p="lg"
+                  radius="md"
+                  style={{
+                    cursor: "pointer",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                  }}
+                  className="editable-cell"
+                  h={140}
+                  display="flex"
+                  onClick={() => openCommand()}
+                >
+                  <Group justify="space-between" align="flex-start">
+                    <ThemeIcon variant="light" color="gray" size="lg">
+                      <IconSearch size={20} />
+                    </ThemeIcon>
+                  </Group>
+                  <Box>
+                    <Text fw={600} size="md">
+                      Global Search
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                      Find anything
+                    </Text>
+                  </Box>
+                </Paper>
+
+                {/* Card: Schema */}
+                <Paper
+                  withBorder
+                  p="lg"
+                  radius="md"
+                  style={{
+                    cursor: "pointer",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                  }}
+                  className="editable-cell"
+                  h={140}
+                  display="flex"
+                  onClick={() => loadErd()}
+                >
+                  <Group justify="space-between" align="flex-start">
+                    <ThemeIcon variant="light" color="gray" size="lg">
+                      <IconSitemap size={20} />
+                    </ThemeIcon>
+                  </Group>
+                  <Box>
+                    <Text fw={600} size="md">
+                      ER Diagram
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                      Visual Schema
+                    </Text>
+                  </Box>
+                </Paper>
+              </SimpleGrid>
+            </Box>
+
+            {/* 3. Table Section (Recents) */}
+            <Box>
+              <Group mb="md" gap="xs">
+                <IconTable size={18} />
+                <Title order={3} fw={600} fz={18}>
+                  Recent Activity
+                </Title>
+                <Divider orientation="vertical" />
+                <Text size="sm" c="dimmed" style={{ cursor: "pointer" }}>
+                  Board
+                </Text>
+              </Group>
+
+              <Paper withBorder radius="sm" overflow="hidden">
+                <Table verticalSpacing="xs" striped={false} highlightOnHover>
+                  <Table.Thead bg="gray.0">
+                    <Table.Tr>
+                      <Table.Th style={{ width: "40%" }}>
+                        <Group gap={4}>
+                          <Text size="xs" c="dimmed">
+                            Aa
+                          </Text>
+                          Table Name
+                        </Group>
+                      </Table.Th>
+                      <Table.Th>Type</Table.Th>
+                      <Table.Th>Action</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {recentTables.length === 0 ? (
+                      <Table.Tr>
+                        <Table.Td colSpan={3}>
+                          <Text size="sm" c="dimmed" fs="italic" py="xs">
+                            No recent pages visited.
+                          </Text>
+                        </Table.Td>
+                      </Table.Tr>
+                    ) : (
+                      recentTables.map((name) => (
+                        <Table.Tr
+                          key={name}
+                          onClick={() => selectTable(name)}
+                          style={{ cursor: "pointer" }}
+                        >
+                          <Table.Td>
+                            <Group gap="sm">
+                              <IconTable size={16} />
+                              <Text
+                                size="sm"
+                                fw={500}
+                                style={{ borderBottom: "1px solid #e5e7eb" }}
+                              >
+                                {name}
+                              </Text>
+                            </Group>
+                          </Table.Td>
+                          <Table.Td>
+                            <Badge size="xs" color="gray" variant="light">
+                              Table
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            <Button
+                              size="compact-xs"
+                              variant="subtle"
+                              color="gray"
+                            >
+                              Open
+                            </Button>
+                          </Table.Td>
+                        </Table.Tr>
+                      ))
+                    )}
+                  </Table.Tbody>
+                </Table>
+              </Paper>
+            </Box>
+          </Box>
+        ) : (
+          // TABLE VIEW
+          <Box pt="md">
+            {/* NOTION-LIKE HEADER */}
+            <Box
+              px="xl"
+              pb="md"
+              style={{ borderBottom: "1px solid var(--mantine-color-gray-2)" }}
+            >
+              <Group align="center" gap="md" mb="xs">
+                <IconTable size={32} stroke={1.5} />
+                <Title order={1} style={{ fontSize: 32, fontWeight: 700 }}>
+                  {currentTable}
+                </Title>
+              </Group>
+            </Box>
+
+            {/* TOOLBAR */}
+            <Group
+              justify="space-between"
+              px="xl"
+              py="sm"
+              style={{
+                borderBottom: "1px solid #E5E7EB",
+                backgroundColor: "#FAFAFA",
+              }}
+            >
+              <Group gap="xs">
+                <Button
+                  size="xs"
+                  color="dark"
+                  radius="md"
+                  leftSection={<IconPlus size={14} />}
+                  onClick={openNewRecord}
+                  styles={{
+                    root: {
+                      fontWeight: 500,
+                      letterSpacing: "-0.01em",
+                    },
+                  }}
+                >
+                  New
+                </Button>
+                <Button
+                  size="xs"
+                  variant="default"
+                  radius="md"
+                  leftSection={<IconSchema size={14} />}
+                  onClick={openSchema}
+                  styles={{
+                    root: {
+                      fontWeight: 500,
+                      letterSpacing: "-0.01em",
+                    },
+                  }}
+                >
+                  Structure
+                </Button>
+                <ExportButton
+                  data={
+                    selectedRows.size > 0
+                      ? rows.filter((r) =>
+                          selectedRows.has(
+                            String(
+                              r[
+                                columns.find((c) => c.pk === 1)?.name ||
+                                  columns[0]?.name
+                              ]
+                            )
+                          )
+                        )
+                      : rows
+                  }
+                  columns={columns}
+                  filename={currentTable}
+                  variant="default"
+                />
+              </Group>
+
+              <Button
+                size="xs"
+                variant={
+                  favorites.includes(currentTable) ? "filled" : "default"
+                }
+                color={favorites.includes(currentTable) ? "dark" : "gray"}
+                radius="md"
+                leftSection={
+                  favorites.includes(currentTable) ? (
+                    <IconStarFilled size={14} />
+                  ) : (
+                    <IconStar size={14} />
+                  )
+                }
+                onClick={() => toggleFavorite(currentTable)}
+                styles={{
+                  root: {
+                    fontWeight: 500,
+                    letterSpacing: "-0.01em",
+                  },
+                }}
+              >
+                {favorites.includes(currentTable) ? "Favorited" : "Favorite"}
+              </Button>
+            </Group>
+
+            {/* CONTENT */}
+            <Box px="xl" py="lg">
+              {/* Unified Filter Component */}
+              <Box mb="md">
+                <Filter
+                  data={filterData}
+                  setData={filterSetData}
+                  filterOptions={filterOptions}
+                />
+              </Box>
+
+              {/* Selection Actions Bar */}
+              {selectedRows.size > 0 && (
+                <Paper p="xs" bg="dark" radius="sm" mb="md">
+                  <Group justify="space-between">
+                    <Text c="white" size="sm">
+                      {selectedRows.size} selected
+                    </Text>
+                    <Group>
+                      <ButtonDelete
+                        size="xs"
+                        color="red"
+                        variant="white"
+                        onDelete={bulkDelete}
+                      >
+                        Delete
+                      </ButtonDelete>
+                      <ExportButton
+                        data={rows.filter((r) =>
+                          selectedRows.has(
+                            String(
+                              r[
+                                columns.find((c) => c.pk === 1)?.name ||
+                                  columns[0]?.name
+                              ]
+                            )
+                          )
+                        )}
+                        columns={columns}
+                        filename={`${currentTable}_selected`}
+                        variant="default"
+                      />
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        c="white"
+                        onClick={() => setSelectedRows(new Set())}
+                      >
+                        Clear
+                      </Button>
+                    </Group>
+                  </Group>
+                </Paper>
+              )}
+
+              {loading ? (
+                <Center py="xl">
+                  <Loader color="gray" type="dots" />
+                </Center>
+              ) : (
+                <>
+                  <DataGrid
+                    columns={columns}
+                    rows={filteredRows}
+                    pk={pk}
+                    selectedRows={selectedRows}
+                    onSelectRow={(pk, checked) => {
+                      const newSelected = new Set(selectedRows);
+                      if (checked) {
+                        newSelected.add(pk);
+                      } else {
+                        newSelected.delete(pk);
+                      }
+                      setSelectedRows(newSelected);
+                    }}
+                    onSelectAll={(checked) => {
+                      if (checked) {
+                        setSelectedRows(new Set(rows.map((r) => String(r[pk]))));
+                      } else {
+                        setSelectedRows(new Set());
+                      }
+                    }}
+                    onSort={(colName) => {
+                      if (sort === colName) {
+                        setSortDir((d) => (d === "ASC" ? "DESC" : "ASC"));
+                      } else {
+                        setSort(colName);
+                        setSortDir("ASC");
+                      }
+                    }}
+                    sort={sort}
+                    sortDir={sortDir}
+                    getColumnIcon={getColumnIcon}
+                    onDeleteRecord={deleteRecord}
+                    editingCell={editingCell}
+                    onStartEdit={(rowPk, column) => setEditingCell({ rowPk, column })}
+                    onUpdateCell={updateCell}
+                    onCancelEdit={() => setEditingCell(null)}
+                    fkMap={fkMap}
+                    API={API}
+                    currentTable={currentTable}
+                    getTagColor={getTagColor}
+                    isTagColumn={isTagColumn}
+                  />
+                  
+                  <Pagination
+                    page={page}
+                    total={total}
+                    onPageChange={setPage}
+                  />
+                </>
+              )}
+            </Box>
+          </Box>
+        )}
+      </AppShell.Main>
+
+      {/* New Record Modal */}
+      <NewRecordModal
+        opened={newRecordOpened}
+        onClose={closeNewRecord}
+        columns={columns}
+        currentTable={currentTable}
+        onSuccess={() => {
+          closeNewRecord();
+          loadData();
+          loadTables();
+        }}
+      />
+
+      {/* Filter Modal */}
+      <Modal opened={filterOpened} onClose={closeFilter} title="Filter">
+        <Stack>
+          {filters.map((f, i) => (
+            <Group key={i}>
+              <Select
+                data={columns.map((c) => c.name)}
+                value={f.column}
+                onChange={(v) => {
+                  const newFilters = [...filters];
+                  newFilters[i].column = v;
+                  setFilters(newFilters);
+                }}
+                placeholder="Column"
+                style={{ flex: 1 }}
+              />
+              <Select
+                data={[
+                  { value: "=", label: "=" },
+                  { value: "!=", label: "≠" },
+                  { value: ">", label: ">" },
+                  { value: "<", label: "<" },
+                  { value: "LIKE", label: "contains" },
+                ]}
+                value={f.operator}
+                onChange={(v) => {
+                  const newFilters = [...filters];
+                  newFilters[i].operator = v;
+                  setFilters(newFilters);
+                }}
+                w={100}
+              />
+              <TextInput
+                placeholder="Value"
+                value={f.value}
+                onChange={(e) => {
+                  const newFilters = [...filters];
+                  newFilters[i].value = e.target.value;
+                  setFilters(newFilters);
+                }}
+                style={{ flex: 1 }}
+              />
+              <ActionIcon
+                color="red"
+                variant="subtle"
+                onClick={() => setFilters(filters.filter((_, j) => j !== i))}
+              >
+                <IconX size={16} />
+              </ActionIcon>
+            </Group>
+          ))}
+          <Button
+            variant="subtle"
+            leftSection={<IconPlus size={16} />}
+            onClick={() =>
+              setFilters([...filters, { column: "", operator: "=", value: "" }])
+            }
+          >
+            Add Filter
+          </Button>
+          <Group justify="flex-end">
+            <Button
+              variant="subtle"
+              color="gray"
+              onClick={() => {
+                setFilters([]);
+                closeFilter();
+              }}
+            >
+              Clear
+            </Button>
+            <Button onClick={closeFilter} color="dark">
+              Apply
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* Schema Modal */}
+      <Modal
+        opened={schemaOpened}
+        onClose={closeSchema}
+        title={`Schema: ${currentTable}`}
+        size="lg"
+      >
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Column</Table.Th>
+              <Table.Th>Type</Table.Th>
+              <Table.Th>Nullable</Table.Th>
+              <Table.Th>Default</Table.Th>
+              <Table.Th>Key</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {columns.map((c) => (
+              <Table.Tr key={c.name}>
+                <Table.Td>{c.name}</Table.Td>
+                <Table.Td>{c.type || "TEXT"}</Table.Td>
+                <Table.Td>{c.notnull ? "NOT NULL" : "NULL"}</Table.Td>
+                <Table.Td>{c.dflt_value || "-"}</Table.Td>
+                <Table.Td>
+                  <Group gap={4}>
+                    {c.pk ? (
+                      <Tooltip label="Primary Key">
+                        <IconKey size={16} />
+                      </Tooltip>
+                    ) : null}
+                    {c.fk ? (
+                      <Tooltip
+                        label={`Foreign Key to ${c.fk.table}.${c.fk.column}`}
+                      >
+                        <IconLink
+                          size={16}
+                          color="var(--mantine-color-indigo-4)"
+                        />
+                      </Tooltip>
+                    ) : null}
+                    {!c.pk && !c.fk ? "-" : null}
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Modal>
+
+      {/* Export Modal */}
+      <Modal opened={exportOpened} onClose={closeExport} title="Export">
+        <Stack>
+          <Select
+            label="Format"
+            data={[
+              { value: "csv", label: "CSV" },
+              { value: "json", label: "JSON" },
+            ]}
+            value={exportFormat}
+            onChange={setExportFormat}
+          />
+          <Text size="sm" c="dimmed">
+            {selectedRows.size > 0
+              ? `${selectedRows.size} selected`
+              : `${rows.length} records on current page`}
+          </Text>
+          <Group justify="flex-end">
+            <Button variant="subtle" onClick={closeExport} color="gray">
+              Cancel
+            </Button>
+            <Button onClick={doExport} color="dark">
+              Export
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={commandOpened}
+        onClose={() => {
+          closeCommand();
+          setCommandQuery("");
+          setCommandIndex(0);
+        }}
+        withCloseButton={false}
+        size="lg"
+        padding={0}
+        radius="md"
+        yOffset="10vh"
+      >
+        <TextInput
+          placeholder="Search tables, commands..."
+          variant="unstyled"
+          p="xs"
+          value={commandQuery}
+          onChange={(e) => {
+            setCommandQuery(e.target.value);
+            setCommandIndex(0);
+          }}
+          onKeyDown={handleCommandKeyDown}
+          leftSection={<IconSearch size={22} />}
+          styles={{ input: { border: "none" } }}
+          autoFocus
+        />
+        <Divider />
+        <Stack gap={0} p="xs" mah={400} style={{ overflow: "auto" }}>
+          {filteredTables.length > 0 && (
+            <>
+              <Text size="xs" c="dimmed" px="sm" py={4} fw={600}>
+                TABLES
+              </Text>
+              {filteredTables.slice(0, 8).map((t, i) => (
+                <NavLink
+                  key={t.name}
+                  label={t.name}
+                  leftSection={<IconTable size={16} />}
+                  active={commandIndex === i}
+                  onClick={() => {
+                    selectTable(t.name);
+                    setCommandQuery("");
+                    setCommandIndex(0);
+                    closeCommand();
+                  }}
+                  style={{ borderRadius: 4 }}
+                />
+              ))}
+            </>
+          )}
+          {filteredActions.length > 0 && (
+            <>
+              <Text size="xs" c="dimmed" px="sm" py={4} fw={600} mt="xs">
+                ACTIONS
+              </Text>
+              {filteredActions.map((action, i) => (
+                <NavLink
+                  key={action.label}
+                  label={action.label}
+                  leftSection={<action.icon size={16} />}
+                  active={
+                    commandIndex === filteredTables.slice(0, 8).length + i
+                  }
+                  style={{ borderRadius: 4 }}
+                  onClick={() => {
+                    action.action();
+                    setCommandIndex(0);
+                  }}
+                />
+              ))}
+            </>
+          )}
+          {filteredTables.length === 0 && filteredActions.length === 0 && (
+            <Text size="sm" c="dimmed" ta="center" py="md">
+              No results found for "{commandQuery}"
+            </Text>
+          )}
+        </Stack>
+        <Paper bg="gray.0" p="xs" px="md">
+          <Group justify="space-between">
+            <Text size="xs" c="dimmed">
+              <Kbd size="xs">↑</Kbd> <Kbd size="xs">↓</Kbd> to navigate
+            </Text>
+            <Group gap={4}>
+              <Kbd size="xs">enter</Kbd>
+              <Text size="xs" c="dimmed">
+                to select
+              </Text>
+              <Kbd size="xs">esc</Kbd>
+              <Text size="xs" c="dimmed">
+                to close
+              </Text>
+            </Group>
+          </Group>
+        </Paper>
+      </Modal>
+
+      {/* ERD Modal */}
+      <Modal
+        opened={erdOpened}
+        onClose={closeErd}
+        title="Entity Relationship Diagram"
+        size="100%"
+        styles={{ body: { height: "calc(100vh - 100px)", overflow: "hidden" } }}
+      >
+        <ScrollArea h="100%">
+          <div
+            dangerouslySetInnerHTML={{ __html: erdSvg }}
+            style={{ textAlign: "center", minWidth: "1000px" }}
+          />
+        </ScrollArea>
+      </Modal>
+    </AppShell>
+  );
+
+  // AUTH RENDERING
+  if (!auth) {
+    return (
+      <Center h="100vh">
+        <Loader color="dark" type="dots" size="xl" />
+      </Center>
+    );
+  }
+
+  if (!auth.configured) {
+    return <Onboarding onConfigured={checkAuth} />;
+  }
+
+  if (!auth.authenticated) {
+    return <Login onLogin={checkAuth} />;
+  }
+
+  return mainApp;
+}