@riligar/elysia-sqlite 1.1.0 → 1.1.5

package/src/ui/src/components/Onboarding.jsx

@@ -1,127 +0,0 @@
-import { useState } from "react";
-import {
-  Paper,
-  Title,
-  Text,
-  TextInput,
-  PasswordInput,
-  Button,
-  Container,
-  Group,
-  Stack,
-  ThemeIcon,
-  Box,
-} from "@mantine/core";
-import { IconDatabase, IconShieldLock } from "@tabler/icons-react";
-import { notifications } from "@mantine/notifications";
-
-export function Onboarding({ onConfigured }) {
-  const [username, setUsername] = useState("admin");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!password) {
-      notifications.show({
-        title: "Error",
-        message: "Password is required",
-        color: "red",
-      });
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const response = await fetch("/admin/api/setup", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
-      });
-      const data = await response.json();
-
-      if (data.success) {
-        notifications.show({
-          title: "Welcome!",
-          message: "System configured successfully",
-          color: "green",
-        });
-        onConfigured();
-      } else {
-        notifications.show({
-          title: "Error",
-          message: data.error,
-          color: "red",
-        });
-      }
-    } catch (error) {
-      notifications.show({
-        title: "Error",
-        message: "Failed to connect to server",
-        color: "red",
-      });
-    }
-    setLoading(false);
-  };
-
-  return (
-    <Box
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#FBFAF8",
-      }}
-    >
-      <Container size={420}>
-        <Stack align="center" mb="xl">
-          <ThemeIcon size={60} radius="md" color="dark">
-            <IconDatabase size={34} />
-          </ThemeIcon>
-          <Title order={1} fw={700}>
-            Welcome to SQLite Admin
-          </Title>
-          <Text c="dimmed" size="sm" ta="center">
-            Set up your administrator credentials to start managing your database.
-          </Text>
-        </Stack>
-
-        <Paper withBorder shadow="md" p={30} radius="md">
-          <form onSubmit={handleSubmit}>
-            <Stack>
-              <TextInput
-                label="Administrator Username"
-                placeholder="admin"
-                required
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-              <PasswordInput
-                label="Password"
-                placeholder="Choose a strong password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <Group mt="lg" justify="flex-end">
-                <Button 
-                    type="submit" 
-                    color="dark" 
-                    fullWidth 
-                    loading={loading}
-                    leftSection={<IconShieldLock size={18} />}
-                >
-                  Save and Start
-                </Button>
-              </Group>
-            </Stack>
-          </form>
-        </Paper>
-        <Text c="dimmed" size="xs" ta="center" mt="xl">
-            This configuration will be saved in sqlite-admin-config.json
-        </Text>
-      </Container>
-    </Box>
-  );
-}

package/src/ui/src/components/Pagination.jsx

@@ -1,35 +0,0 @@
-import { Group, Text, ActionIcon } from "@mantine/core";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-
-export const Pagination = ({ 
-  page, 
-  total, 
-  limit = 50, 
-  onPageChange 
-}) => {
-  const totalPages = Math.ceil(total / limit);
-
-  return (
-    <Group justify="flex-end" gap="xs" mt="xs">
-      <Text size="xs" c="dimmed">
-        Page {page} of {totalPages} ({total} records)
-      </Text>
-      <ActionIcon
-        variant="default"
-        size="sm"
-        disabled={page <= 1}
-        onClick={() => onPageChange(page - 1)}
-      >
-        <IconChevronLeft size={14} />
-      </ActionIcon>
-      <ActionIcon
-        variant="default"
-        size="sm"
-        disabled={page >= totalPages}
-        onClick={() => onPageChange(page + 1)}
-      >
-        <IconChevronRight size={14} />
-      </ActionIcon>
-    </Group>
-  );
-};

package/src/ui/src/components/SecuritySettings.jsx

@@ -1,273 +0,0 @@
-import { useState, useEffect } from "react";
-import {
-  Modal,
-  Button,
-  Text,
-  Stack,
-  Group,
-  Image,
-  TextInput,
-  ThemeIcon,
-  Paper,
-  Alert,
-  Loader,
-  CopyButton,
-  ActionIcon,
-  Tooltip,
-} from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import {
-  IconDeviceMobile,
-  IconCheck,
-  IconX,
-  IconCopy,
-  IconShieldLock,
-  IconAlertCircle,
-} from "@tabler/icons-react";
-
-export function SecuritySettings({ opened, onClose }) {
-  const [status, setStatus] = useState(null); // { enabled: boolean }
-  const [loading, setLoading] = useState(true);
-
-  // Setup Flow State
-  const [setupStep, setSetupStep] = useState(0); // 0: idle, 1: generating, 2: verifying
-  const [qrData, setQrData] = useState(null); // { secret, qrCode }
-  const [verifyCode, setVerifyCode] = useState("");
-  const [verifying, setVerifying] = useState(false);
-
-  useEffect(() => {
-    if (opened) loadStatus();
-  }, [opened]);
-
-  const loadStatus = async () => {
-    setLoading(true);
-    try {
-      const res = await fetch("/admin/auth/status");
-      const data = await res.json();
-      setStatus(data);
-    } catch (e) {
-      notifications.show({
-        title: "Error",
-        message: "Failed to load status",
-        color: "red",
-      });
-    }
-    setLoading(false);
-  };
-
-  const startSetup = async () => {
-    setSetupStep(1); // generating
-    try {
-      const res = await fetch("/admin/api/totp/generate", { method: "POST" });
-      const data = await res.json();
-      if (data.success) {
-        setQrData(data);
-        setSetupStep(2);
-      } else {
-        notifications.show({
-          title: "Error",
-          message: "Failed to generate QR",
-          color: "red",
-        });
-        setSetupStep(0);
-      }
-    } catch (e) {
-      setSetupStep(0);
-    }
-  };
-
-  const verifyAndEnable = async () => {
-    if (!verifyCode) return;
-    setVerifying(true);
-    try {
-      const res = await fetch("/admin/api/totp/verify", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ secret: qrData.secret, code: verifyCode }),
-      });
-      const data = await res.json();
-      if (data.success) {
-        notifications.show({
-          title: "Success",
-          message: "2FA Enabled!",
-          color: "green",
-        });
-        setSetupStep(0);
-        loadStatus();
-      } else {
-        notifications.show({
-          title: "Error",
-          message: "Invalid code",
-          color: "red",
-        });
-      }
-    } catch (e) {
-      notifications.show({
-        title: "Error",
-        message: "Request failed",
-        color: "red",
-      });
-    }
-    setVerifying(false);
-  };
-
-  const disable2FA = async () => {
-    // In a real app we might ask for code confirmation here too,
-    // but for simplicity we'll assume session auth is enough or ask for code in a prompt
-    // For this UI, let's ask for code to confirm disable
-    const code = prompt("Enter your 2FA code to confirm disabling:");
-    if (!code) return;
-
-    try {
-      const res = await fetch("/admin/api/totp/disable", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ code }),
-      });
-      const data = await res.json();
-      if (data.success) {
-        notifications.show({
-          title: "Success",
-          message: "2FA Disabled",
-          color: "gray",
-        });
-        loadStatus();
-      } else {
-        notifications.show({
-          title: "Error",
-          message: data.error || "Failed to disable",
-          color: "red",
-        });
-      }
-    } catch (e) {
-      notifications.show({
-        title: "Error",
-        message: "Request failed",
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title="Security Settings"
-      size="lg"
-    >
-      {loading ? (
-        <Stack align="center" py="xl">
-          <Loader />
-        </Stack>
-      ) : (
-        <Stack>
-          <Group justify="space-between" align="flex-start">
-            <Group>
-              <ThemeIcon
-                size="xl"
-                radius="md"
-                color={status?.totpEnabled ? "green" : "gray"}
-                variant="light"
-              >
-                <IconDeviceMobile size={28} />
-              </ThemeIcon>
-              <div>
-                <Text fw={600}>Two-Factor Authentication (2FA)</Text>
-                <Text size="sm" c="dimmed">
-                  {status?.totpEnabled
-                    ? "Your account is secured with 2FA."
-                    : "Add an extra layer of security to your account."}
-                </Text>
-              </div>
-            </Group>
-            {status?.totpEnabled ? (
-              <Button color="red" variant="subtle" onClick={disable2FA}>
-                Disable
-              </Button>
-            ) : (
-              setupStep === 0 && (
-                <Button color="dark" onClick={startSetup}>
-                  Enable 2FA
-                </Button>
-              )
-            )}
-          </Group>
-
-          {/* Setup Wizard */}
-          {setupStep === 2 && qrData && (
-            <Paper withBorder p="md" radius="md" bg="gray.0">
-              <Stack align="center">
-                <Text fw={600}>1. Scan QR Code</Text>
-                <Text size="sm" c="dimmed" ta="center">
-                  Use your authenticator app (Google Authenticator, Authy, etc.)
-                  to scan this code.
-                </Text>
-
-                <div
-                  style={{
-                    background: "white",
-                    padding: "10px",
-                    borderRadius: "8px",
-                  }}
-                >
-                  <Image src={qrData.qrCode} w={180} h={180} />
-                </div>
-
-                <Group gap="xs">
-                  <Text size="xs" c="dimmed">
-                    Secret: {qrData.secret}
-                  </Text>
-                  <CopyButton value={qrData.secret}>
-                    {({ copied, copy }) => (
-                      <ActionIcon
-                        variant="subtle"
-                        color={copied ? "green" : "gray"}
-                        onClick={copy}
-                        size="xs"
-                      >
-                        {copied ? (
-                          <IconCheck size={12} />
-                        ) : (
-                          <IconCopy size={12} />
-                        )}
-                      </ActionIcon>
-                    )}
-                  </CopyButton>
-                </Group>
-
-                <Text fw={600} mt="md">
-                  2. Verify Code
-                </Text>
-                <Group align="flex-start">
-                  <TextInput
-                    placeholder="000 000"
-                    value={verifyCode}
-                    onChange={(e) => setVerifyCode(e.target.value)}
-                    maxLength={6}
-                    w={140}
-                  />
-                  <Button
-                    onClick={verifyAndEnable}
-                    loading={verifying}
-                    color="dark"
-                  >
-                    Verify
-                  </Button>
-                </Group>
-
-                <Button
-                  variant="subtle"
-                  size="xs"
-                  color="gray"
-                  onClick={() => setSetupStep(0)}
-                >
-                  Cancel
-                </Button>
-              </Stack>
-            </Paper>
-          )}
-        </Stack>
-      )}
-    </Modal>
-  );
-}

package/src/ui/src/components/TableSelector.jsx

@@ -1,75 +0,0 @@
-import { Stack, Text, NavLink, ScrollArea } from "@mantine/core";
-import { IconTable } from "@tabler/icons-react";
-
-export const TableSelector = ({ 
-  tables, 
-  favorites, 
-  currentTable, 
-  onSelectTable 
-}) => {
-  return (
-    <ScrollArea style={{ flex: 1 }}>
-      <Stack gap={0}>
-        <Text
-          size="xs"
-          fw={500}
-          c="#91918E"
-          px="xs"
-          mb={4}
-          mt="xs"
-          style={{
-            textTransform: "uppercase",
-            fontSize: "11px",
-            letterSpacing: "0.03em",
-          }}
-        >
-          Favorites
-        </Text>
-        {favorites.map((name) => (
-          <NavLink
-            key={name}
-            label={name}
-            leftSection={<IconTable size={16} />}
-            active={currentTable === name}
-            onClick={() => onSelectTable(name)}
-            style={{ borderRadius: 6 }}
-          />
-        ))}
-
-        {favorites.length === 0 && (
-          <Text size="xs" c="dimmed" px="sm" py={2} fs="italic">
-            No favorites
-          </Text>
-        )}
-
-        <Text
-          size="xs"
-          fw={500}
-          c="#91918E"
-          px="xs"
-          mb={4}
-          mt="lg"
-          style={{
-            textTransform: "uppercase",
-            fontSize: "11px",
-            letterSpacing: "0.03em",
-          }}
-        >
-          Tables
-        </Text>
-        {tables
-          .filter((t) => !favorites.includes(t.name))
-          .map((t) => (
-            <NavLink
-              key={t.name}
-              label={t.name}
-              leftSection={<IconTable size={16} />}
-              active={currentTable === t.name}
-              onClick={() => onSelectTable(t.name)}
-              style={{ borderRadius: 6 }}
-            />
-          ))}
-      </Stack>
-    </ScrollArea>
-  );
-};

package/src/ui/src/hooks/useFilter.js

@@ -1,120 +0,0 @@
-import { useState, useMemo } from "react";
-
-export function useFilter(items, filterKeys = []) {
-  const [query, setQuery] = useState("");
-  const [activeFilters, setActiveFilters] = useState({});
-  const [logicalOperators, setLogicalOperators] = useState({}); // Stores AND/OR between filters
-
-  // Helper function to apply operator
-  const applyOperator = (elementValue, operator, filterValue) => {
-    const elemStr = String(elementValue).toLowerCase();
-    const filterStr = String(filterValue).toLowerCase();
-    const elemNum = Number(elementValue);
-    const filterNum = Number(filterValue);
-
-    switch (operator) {
-      case "=":
-        return elemStr === filterStr;
-      case "!=":
-        return elemStr !== filterStr;
-      case "contains":
-        return elemStr.includes(filterStr);
-      case "not_contains":
-        return !elemStr.includes(filterStr);
-      case ">":
-        return !isNaN(elemNum) && !isNaN(filterNum) && elemNum > filterNum;
-      case "<":
-        return !isNaN(elemNum) && !isNaN(filterNum) && elemNum < filterNum;
-      case ">=":
-        return !isNaN(elemNum) && !isNaN(filterNum) && elemNum >= filterNum;
-      case "<=":
-        return !isNaN(elemNum) && !isNaN(filterNum) && elemNum <= filterNum;
-      default:
-        return elemStr.includes(filterStr);
-    }
-  };
-
-  // Filter elements based on active filters + query + logical operators
-  const filteredItems = useMemo(() => {
-    if (!items) return [];
-
-    return items.filter((element) => {
-      // Free text filter (query)
-      if (query.trim()) {
-        const searchTerm = query.toLowerCase();
-        // If filterKeys are provided, search only in those keys, otherwise search in all values
-        const searchKeys =
-          filterKeys.length > 0 ? filterKeys : Object.keys(element);
-
-        const matchesSearch = searchKeys.some((key) => {
-          const val = element[key];
-          return val && String(val).toLowerCase().includes(searchTerm);
-        });
-
-        if (!matchesSearch) return false;
-      }
-
-      // Key:operator:value filters (active chips)
-      const activeFilterKeys = Object.keys(activeFilters);
-      if (activeFilterKeys.length === 0) return true;
-
-      // Evaluate each filter
-      const filterResults = {};
-      for (const key of activeFilterKeys) {
-        const valueStr = activeFilters[key];
-        const values = valueStr.split(",").map((v) => v.trim());
-        let matches = false;
-
-        for (const value of values) {
-          let operator = "=";
-          let filterValue = value;
-
-          const opMatch = value.match(
-            /^([=!><]+|contains|not_contains)\s*(.*)$/
-          );
-          if (opMatch) {
-            operator = opMatch[1];
-            filterValue = opMatch[2];
-          }
-
-          const elementValue = element[key];
-          if (
-            elementValue !== undefined &&
-            applyOperator(elementValue, operator, filterValue)
-          ) {
-            matches = true;
-            break;
-          }
-        }
-        filterResults[key] = matches;
-      }
-
-      // Apply logical operators between filters
-      let result = filterResults[activeFilterKeys[0]];
-      for (let i = 1; i < activeFilterKeys.length; i++) {
-        const logicalOp = logicalOperators[activeFilterKeys[i - 1]] || "AND";
-        if (logicalOp === "OR") {
-          result = result || filterResults[activeFilterKeys[i]];
-        } else {
-          result = result && filterResults[activeFilterKeys[i]];
-        }
-      }
-
-      return result;
-    });
-  }, [items, query, activeFilters, logicalOperators, filterKeys]);
-
-  return {
-    filteredItems,
-    data: {
-      query,
-      activeFilters,
-      logicalOperators,
-    },
-    setData: {
-      setQuery,
-      setActiveFilters,
-      setLogicalOperators,
-    },
-  };
-}