@riligar/elysia-sqlite 1.1.0

package/src/ui/src/components/Filter.jsx

@@ -0,0 +1,302 @@
+import { useState } from "react";
+import {
+  TextInput,
+  Paper,
+  Group,
+  Badge,
+  Stack,
+  Text,
+  Chip,
+  ActionIcon,
+  Button,
+} from "@mantine/core";
+import { useClickOutside } from "@mantine/hooks";
+import { IconSearch, IconX, IconRefresh } from "@tabler/icons-react";
+
+export function Filter({
+  data: { query, activeFilters, logicalOperators },
+  setData: { setQuery, setActiveFilters, setLogicalOperators },
+  filterOptions = {},
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const [menuStep, setMenuStep] = useState(null);
+  const [tempKey, setTempKey] = useState(null);
+  const [tempOperator, setTempOperator] = useState(null);
+
+  const ref = useClickOutside(() => {
+    setShowMenu(false);
+    setMenuStep(null);
+    setTempKey(null);
+    setTempOperator(null);
+  });
+
+  const operators = [
+    "=",
+    "!=",
+    ">",
+    "<",
+    ">=",
+    "<=",
+    "contains",
+    "not_contains",
+  ];
+
+  const getMenuOptions = () => {
+    if (menuStep === "key") {
+      return Object.keys(filterOptions);
+    }
+    if (menuStep === "operator") {
+      return operators;
+    }
+    if (menuStep === "value" && tempKey) {
+      if (
+        Array.isArray(filterOptions[tempKey]) &&
+        filterOptions[tempKey].length > 0
+      ) {
+        return filterOptions[tempKey];
+      }
+      return [];
+    }
+    return [];
+  };
+
+  const selectMenuOption = (option) => {
+    if (menuStep === "key") {
+      setTempKey(option);
+      setMenuStep("operator");
+    } else if (menuStep === "operator") {
+      setTempOperator(option);
+      setMenuStep("value");
+    } else if (menuStep === "value" && tempKey && tempOperator) {
+      const filterValue = `${tempOperator} ${option}`;
+      setActiveFilters((prev) => {
+        const current = prev[tempKey];
+        const newValue = current ? `${current},${filterValue}` : filterValue;
+        return {
+          ...prev,
+          [tempKey]: newValue,
+        };
+      });
+      closeMenu();
+    }
+  };
+
+  const closeMenu = () => {
+    setShowMenu(false);
+    setMenuStep(null);
+    setTempKey(null);
+    setTempOperator(null);
+  };
+
+  const removeFilter = (key) => {
+    setActiveFilters((prev) => {
+      const updated = { ...prev };
+      delete updated[key];
+      return updated;
+    });
+  };
+
+  const clearAllFilters = () => {
+    setActiveFilters({});
+    setQuery("");
+  };
+
+  const hasActiveFilters = Object.keys(activeFilters).length > 0;
+
+  return (
+    <Stack gap="xs">
+      {/* Unified Search/Filter Input */}
+      <div style={{ position: "relative" }} ref={ref}>
+        <TextInput
+          placeholder="Search or filter..."
+          leftSection={<IconSearch size={14} />}
+          rightSection={
+            query.trim() || hasActiveFilters ? (
+              <ActionIcon
+                size="xs"
+                color="gray"
+                radius="sm"
+                variant="subtle"
+                onClick={clearAllFilters}
+              >
+                <IconX size={12} />
+              </ActionIcon>
+            ) : null
+          }
+          size="sm"
+          radius="md"
+          value={query}
+          onChange={(e) => setQuery(e.currentTarget.value)}
+          onFocus={() => {
+            if (!showMenu) {
+              setMenuStep("key");
+              setShowMenu(true);
+            }
+          }}
+          styles={{
+            input: {
+              border: "1px solid #E5E5E5",
+              "&:focus": {
+                borderColor: "#9CA3AF",
+              },
+            },
+          }}
+        />
+
+        {/* Filter Picker Dropdown */}
+        {showMenu && menuStep && (
+          <Paper
+            shadow="sm"
+            p="sm"
+            radius="md"
+            withBorder
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              marginTop: 4,
+            }}
+          >
+            <Stack gap={8}>
+              <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+                {menuStep === "key" && "Filter by column"}
+                {menuStep === "operator" && `Operator for ${tempKey}`}
+                {menuStep === "value" && `Value for ${tempKey} ${tempOperator}`}
+              </Text>
+              <Group gap={6} wrap="wrap">
+                {getMenuOptions().map((option, idx) => (
+                  <Chip
+                    key={idx}
+                    onClick={() => selectMenuOption(option)}
+                    variant="light"
+                    checked={false}
+                    size="xs"
+                    radius="md"
+                    styles={{
+                      label: {
+                        cursor: "pointer",
+                      },
+                    }}
+                  >
+                    {option}
+                  </Chip>
+                ))}
+                {menuStep === "value" && (
+                  <TextInput
+                    placeholder="Type value..."
+                    size="xs"
+                    radius="md"
+                    autoFocus
+                    style={{ flex: 1, minWidth: 120 }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        selectMenuOption(e.currentTarget.value);
+                      }
+                    }}
+                  />
+                )}
+              </Group>
+            </Stack>
+          </Paper>
+        )}
+      </div>
+
+      {/* Active Filters Display */}
+      {hasActiveFilters && (
+        <Group gap={6} wrap="wrap" align="center">
+          {Object.entries(activeFilters).map(
+            ([key, valueStr], filterIdx, filterArray) => {
+              const values = valueStr.split(",").map((v) => v.trim());
+              const isLastFilter = filterIdx === filterArray.length - 1;
+              return (
+                <Group key={key} gap={4} align="center">
+                  <Group gap={2}>
+                    {values.map((value, idx) => (
+                      <Badge
+                        key={`${key}-${idx}`}
+                        size="md"
+                        radius="md"
+                        variant="outline"
+                        color="gray"
+                        pr={4}
+                        rightSection={
+                          <IconX
+                            size={12}
+                            style={{ cursor: "pointer" }}
+                            onClick={() => {
+                              const newValues = values.filter(
+                                (_, i) => i !== idx
+                              );
+                              if (newValues.length === 0) {
+                                removeFilter(key);
+                              } else {
+                                setActiveFilters((prev) => ({
+                                  ...prev,
+                                  [key]: newValues.join(","),
+                                }));
+                              }
+                            }}
+                          />
+                        }
+                        styles={{
+                          root: {
+                            textTransform: "none",
+                            fontWeight: 500,
+                          },
+                        }}
+                      >
+                        <Text span c="dimmed" size="xs">
+                          {key}
+                        </Text>{" "}
+                        {value}
+                      </Badge>
+                    ))}
+                  </Group>
+                  {!isLastFilter && (
+                    <Button
+                      size="xs"
+                      variant="subtle"
+                      color="gray"
+                      onClick={() => {
+                        setLogicalOperators((prev) => ({
+                          ...prev,
+                          [key]: prev[key] === "OR" ? "AND" : "OR",
+                        }));
+                      }}
+                      title="Toggle AND/OR"
+                      fw={700}
+                      px={4}
+                      h="auto"
+                      py={2}
+                      c="dimmed"
+                      styles={{
+                        label: {
+                          fontSize: "10px",
+                        },
+                      }}
+                    >
+                      {logicalOperators[key] || "AND"}
+                    </Button>
+                  )}
+                </Group>
+              );
+            }
+          )}
+          <ActionIcon
+            size="sm"
+            variant="subtle"
+            color="red"
+            onClick={clearAllFilters}
+            title="Clear all"
+          >
+            <IconX size={14} />
+          </ActionIcon>
+        </Group>
+      )}
+    </Stack>
+  );
+}

package/src/ui/src/components/HoldButton.jsx

@@ -0,0 +1,230 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import {
+  ActionIcon,
+  RingProgress,
+  Tooltip,
+  Box,
+  Button,
+  Loader,
+} from "@mantine/core";
+import { IconTrash, IconCopy, IconCheck } from "@tabler/icons-react";
+
+/**
+ * HoldButton - Botão que requer segurar por um tempo para confirmar ação
+ * Ideal para ações destrutivas como delete
+ */
+export function HoldButton({
+  onConfirm,
+  holdDuration = 3000,
+  icon: Icon = IconTrash,
+  color = "red",
+  size = "md",
+  tooltip = "Segure para confirmar",
+  confirmingTooltip = "Segurando...",
+  ...props
+}) {
+  const [progress, setProgress] = useState(0);
+  const [isHolding, setIsHolding] = useState(false);
+  const intervalRef = useRef(null);
+  const startTimeRef = useRef(null);
+
+  const startHold = useCallback(() => {
+    if (props.disabled || props.loading) return;
+
+    setIsHolding(true);
+    startTimeRef.current = Date.now();
+
+    intervalRef.current = setInterval(() => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const newProgress = Math.min((elapsed / holdDuration) * 100, 100);
+      setProgress(newProgress);
+
+      if (newProgress >= 100) {
+        clearInterval(intervalRef.current);
+        setIsHolding(false);
+        setProgress(0);
+        onConfirm?.();
+      }
+    }, 50);
+  }, [holdDuration, onConfirm, props.disabled, props.loading]);
+
+  const cancelHold = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setIsHolding(false);
+    setProgress(0);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  return (
+    <Tooltip label={isHolding ? confirmingTooltip : tooltip} withArrow>
+      <Box
+        style={{
+          position: "relative",
+          display: "inline-flex",
+          verticalAlign: "middle",
+        }}
+      >
+        {isHolding && (
+          <RingProgress
+            size={size === "sm" ? 28 : size === "md" ? 34 : 42}
+            thickness={2}
+            sections={[{ value: progress, color }]}
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none",
+            }}
+          />
+        )}
+        <ActionIcon
+          variant="subtle"
+          color={color}
+          size={size}
+          onMouseDown={startHold}
+          onMouseUp={cancelHold}
+          onMouseLeave={cancelHold}
+          onTouchStart={startHold}
+          onTouchEnd={cancelHold}
+          style={{
+            opacity: isHolding ? 0.7 : 1,
+            transition: "opacity 0.2s",
+            ...props.style,
+          }}
+          {...props}
+        >
+          {props.loading ? (
+            <Loader size={12} color={color} />
+          ) : (
+            <Icon size={size === "sm" ? 14 : size === "md" ? 18 : 22} />
+          )}
+        </ActionIcon>
+      </Box>
+    </Tooltip>
+  );
+}
+
+/**
+ * TextHoldButton - Versão em texto do botão de segurar
+ * Usado para compatibilidade com type="button" ou quando children é passado
+ */
+export function TextHoldButton({
+  onDelete,
+  timerSeconds = 3,
+  children,
+  loading,
+  disabled,
+  variant = "light",
+  color = "red",
+  leftSection = <IconTrash size={14} />,
+  ...buttonProps
+}) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteCountdown, setDeleteCountdown] = useState(timerSeconds);
+  const deleteTimerRef = useRef(null);
+  const deleteIntervalRef = useRef(null);
+
+  const startDeleteTimer = () => {
+    if (loading || disabled) return;
+    setIsDeleting(true);
+    setDeleteCountdown(timerSeconds);
+
+    deleteTimerRef.current = setTimeout(() => {
+      handleDelete();
+    }, timerSeconds * 1000);
+
+    deleteIntervalRef.current = setInterval(() => {
+      setDeleteCountdown((prev) => {
+        const newCount = prev - 1;
+        if (newCount <= 0) {
+          clearInterval(deleteIntervalRef.current);
+          return 0;
+        }
+        return newCount;
+      });
+    }, 1000);
+  };
+
+  const stopDeleteTimer = () => {
+    setIsDeleting(false);
+    setDeleteCountdown(timerSeconds);
+    if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
+    if (deleteIntervalRef.current) clearInterval(deleteIntervalRef.current);
+  };
+
+  const handleDelete = async () => {
+    stopDeleteTimer();
+    if (onDelete) await onDelete();
+  };
+
+  useEffect(() => {
+    return () => stopDeleteTimer();
+  }, []);
+
+  return (
+    <Tooltip
+      label="Mantenha pressionado até a contagem terminar para confirmar a exclusão"
+      withArrow
+      multiline
+      w={220}
+    >
+      <Button
+        variant={variant}
+        color={isDeleting ? "orange" : color}
+        leftSection={leftSection}
+        onMouseDown={startDeleteTimer}
+        onMouseUp={stopDeleteTimer}
+        onMouseLeave={stopDeleteTimer}
+        onTouchStart={startDeleteTimer}
+        onTouchEnd={stopDeleteTimer}
+        disabled={loading || disabled}
+        style={{
+          transition: "all 0.2s ease",
+          transform: isDeleting ? "scale(0.98)" : "scale(1)",
+          ...buttonProps.style,
+        }}
+        {...buttonProps}
+      >
+        {isDeleting
+          ? `Excluindo em ${deleteCountdown}s...`
+          : children || "Segure para Excluir"}
+      </Button>
+    </Tooltip>
+  );
+}
+
+/**
+ * Wrapper para manter compatibilidade com Components.Buttons.Delete
+ */
+export function ButtonDelete({
+  onDelete,
+  timerSeconds = 3,
+  type = "button",
+  ...props
+}) {
+  if (type === "icon") {
+    return (
+      <HoldButton
+        onConfirm={onDelete}
+        holdDuration={timerSeconds * 1000}
+        {...props}
+      />
+    );
+  }
+  return (
+    <TextHoldButton
+      onDelete={onDelete}
+      timerSeconds={timerSeconds}
+      {...props}
+    />
+  );
+}

package/src/ui/src/components/Login.jsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import {
+  Paper,
+  Title,
+  Text,
+  TextInput,
+  PasswordInput,
+  Button,
+  Container,
+  Group,
+  Stack,
+  ThemeIcon,
+  Box,
+  Transition,
+} from "@mantine/core";
+import { IconDatabase, IconLock, IconDeviceMobile } from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+
+export function Login({ onLogin }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [showTotp, setShowTotp] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const response = await fetch("/admin/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password, totpCode }),
+      });
+      const data = await response.json();
+
+      if (data.success) {
+        onLogin();
+      } else {
+        if (data.code === "2FA_REQUIRED") {
+            setShowTotp(true);
+            notifications.show({
+                title: "Authentication Required",
+                message: "Please enter your 2FA code",
+                color: "blue",
+                icon: <IconDeviceMobile size={16} />
+            });
+        } else {
+            notifications.show({
+            title: "Login Failed",
+            message: data.error || "Invalid credentials",
+            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}>
+            SQLite Admin Login
+          </Title>
+        </Stack>
+
+        <Paper withBorder shadow="md" p={30} radius="md">
+          <form onSubmit={handleSubmit}>
+            <Stack>
+              <TextInput
+                label="Username"
+                placeholder="Your username"
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                disabled={showTotp}
+              />
+              <PasswordInput
+                label="Password"
+                placeholder="Your password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={showTotp}
+              />
+              
+              {showTotp && (
+                  <TextInput
+                    label="Authenticator Code (2FA)"
+                    placeholder="000 000"
+                    required
+                    autoFocus
+                    value={totpCode}
+                    onChange={(e) => setTotpCode(e.target.value)}
+                    leftSection={<IconDeviceMobile size={16} />}
+                    maxLength={6}
+                  />
+              )}
+
+              <Group mt="lg">
+                <Button 
+                    type="submit" 
+                    color="dark" 
+                    fullWidth 
+                    loading={loading}
+                    leftSection={<IconLock size={18} />}
+                >
+                  {showTotp ? "Verify & Login" : "Login"}
+                </Button>
+              </Group>
+              
+              {showTotp && (
+                  <Text 
+                    size="xs" 
+                    c="dimmed" 
+                    ta="center" 
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => { setShowTotp(false); setTotpCode(""); }}
+                  >
+                      Cancel
+                  </Text>
+              )}
+            </Stack>
+          </form>
+        </Paper>
+      </Container>
+    </Box>
+  );
+}