+
);
}
diff --git a/web/src/components/PageHeader.tsx b/web/src/components/PageHeader.tsx
new file mode 100644
index 0000000..0e84674
--- /dev/null
+++ b/web/src/components/PageHeader.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+interface PageHeaderProps {
+ title: string;
+ description?: string;
+ actions?: ReactNode;
+ className?: string;
+}
+
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
+ return (
+
+
+
+
+
+
-
+
+
+
+ );
+}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
new file mode 100644
index 0000000..3cc07ef
--- /dev/null
+++ b/web/src/components/Sidebar.tsx
@@ -0,0 +1,130 @@
+import { NavLink } from "react-router-dom";
+import { api } from "../api";
+import { ThemeToggle } from "./ThemeToggle";
+import { UserMenu } from "./UserMenu";
+import { VersionInfo } from "../api";
+import {
+ Home,
+ Users,
+ FolderTree,
+ Share2,
+ Network,
+ HardDrive,
+ History,
+ Settings,
+} from "../lib/icons";
+import { cn } from "../lib/cn";
+import { useEffect, useState } from "react";
+
+const navItems = [
+ { to: "/", label: "Dashboard", end: true, Icon: Home },
+ { to: "/users", label: "Usuarios", Icon: Users },
+ { to: "/files", label: "Archivos", Icon: FolderTree },
+ { to: "/samba", label: "SMB / Samba", Icon: Share2 },
+ { to: "/nfs", label: "NFS", Icon: Network },
+ { to: "/storage", label: "Almacenamiento", Icon: HardDrive },
+ { to: "/log", label: "Historial", Icon: History },
+ { to: "/settings", label: "Ajustes", Icon: Settings },
+];
+
+interface SidebarProps {
+ username: string;
+ onLogout: () => void;
+ onClose?: () => void;
+ variant?: "drawer" | "fixed";
+}
+
+export function Sidebar({ username, onLogout, onClose, variant = "fixed" }: SidebarProps) {
+ const [version, setVersion] = useState
+
+ {actions && {title}
+ {description && ( +{description}
+ )} +{actions}
}
+
+
+ );
+}
diff --git a/web/src/components/ThemeProvider.tsx b/web/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..188b98c
--- /dev/null
+++ b/web/src/components/ThemeProvider.tsx
@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from "react";
+
+type Theme = "dark" | "light";
+
+interface ThemeContextValue {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+ toggleTheme: () => void;
+}
+
+const ThemeContext = createContext
+
+
+
+
+
+
+ {variant === "drawer" && onClose && (
+
+ )}
+
+
+
+
+ nas
+ ctl
+
+
+
+
+
+
+
+
+ v{version?.version ?? "dev"}
+ {version?.commit && (
+ {version.commit}
+ )}
+
+
+ {title}
+
+
+ (null);
+ const { toast } = useToast();
+
+ const initials = username.slice(0, 2).toUpperCase();
+
+ async function handleChangePassword() {
+ setLoading(true);
+ setError(null);
+ try {
+ await api.changePassword(oldPassword, newPassword);
+ toast({ type: "success", title: "Contraseña actualizada" });
+ setShowPasswordDialog(false);
+ setOldPassword("");
+ setNewPassword("");
+ } catch (e) {
+ setError(e instanceof Error ? e.message : "Error al cambiar contraseña");
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ return (
+ <>
+
+ {
+ variant?: BadgeVariant;
+ size?: "sm" | "md";
+}
+
+const variantClasses: Record = {
+ default: "bg-primary/15 text-primary border-primary/20",
+ secondary: "bg-secondary text-secondary-foreground border-secondary",
+ success: "bg-success/15 text-success border-success/20",
+ warning: "bg-warning/15 text-warning border-warning/20",
+ destructive: "bg-destructive/15 text-destructive border-destructive/20",
+ outline: "bg-transparent text-foreground border-border",
+};
+
+const sizeClasses: Record, string> = {
+ sm: "text-[10px] px-1.5 py-px",
+ md: "text-xs px-2.5 py-0.5",
+};
+
+export function Badge({ className, variant = "default", size = "md", ...props }: BadgeProps) {
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
new file mode 100644
index 0000000..3d8d1fe
--- /dev/null
+++ b/web/src/components/ui/Button.tsx
@@ -0,0 +1,51 @@
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/cn";
+import { Loader2 } from "../../lib/icons";
+
+export type ButtonVariant = "default" | "secondary" | "ghost" | "outline" | "destructive" | "link";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+interface ButtonProps extends ButtonHTMLAttributes {
+ variant?: ButtonVariant;
+ size?: ButtonSize;
+ loading?: boolean;
+}
+
+const variantClasses: Record = {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70",
+ ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
+ outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+ link: "text-primary underline-offset-4 hover:underline active:text-primary/80",
+};
+
+const sizeClasses: Record = {
+ sm: "h-8 px-3 text-xs",
+ md: "h-10 px-4 text-sm",
+ lg: "h-12 px-6 text-base",
+ icon: "h-10 w-10",
+};
+
+export const Button = forwardRef(
+ ({ className, variant = "default", size = "md", loading, disabled, children, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+
+Button.displayName = "Button";
diff --git a/web/src/components/ui/Card.tsx b/web/src/components/ui/Card.tsx
new file mode 100644
index 0000000..24382f5
--- /dev/null
+++ b/web/src/components/ui/Card.tsx
@@ -0,0 +1,52 @@
+import { HTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+interface CardProps extends HTMLAttributes {}
+
+export const Card = forwardRef(({ className, ...props }, ref) => (
+
+));
+
+Card.displayName = "Card";
+
+export const CardHeader = forwardRef(({ className, ...props }, ref) => (
+
+));
+
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = forwardRef(({ className, ...props }, ref) => (
+
+));
+
+CardContent.displayName = "CardContent";
+
+export const CardFooter = forwardRef(({ className, ...props }, ref) => (
+
+));
+
+CardFooter.displayName = "CardFooter";
diff --git a/web/src/components/ui/Checkbox.tsx b/web/src/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..2f79286
--- /dev/null
+++ b/web/src/components/ui/Checkbox.tsx
@@ -0,0 +1,45 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+interface CheckboxProps extends Omit, "type"> {
+ label?: string;
+}
+
+export const Checkbox = forwardRef(
+ ({ className, label, id, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+
+Checkbox.displayName = "Checkbox";
diff --git a/web/src/components/ui/ConfirmDialog.tsx b/web/src/components/ui/ConfirmDialog.tsx
new file mode 100644
index 0000000..00b146f
--- /dev/null
+++ b/web/src/components/ui/ConfirmDialog.tsx
@@ -0,0 +1,64 @@
+import { AlertTriangle } from "../../lib/icons";
+import { Button } from "./Button";
+import { Dialog, DialogTitle, DialogDescription, DialogFooter } from "./Dialog";
+
+interface ConfirmDialogProps {
+ open: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+ title: string;
+ description: string;
+ confirmLabel?: string;
+ cancelLabel?: string;
+ destructive?: boolean;
+ loading?: boolean;
+}
+
+export function ConfirmDialog({
+ open,
+ onClose,
+ onConfirm,
+ title,
+ description,
+ confirmLabel = "Confirmar",
+ cancelLabel = "Cancelar",
+ destructive = false,
+ loading = false,
+}: ConfirmDialogProps) {
+ function handleConfirm() {
+ onConfirm();
+ }
+
+ function handleClose() {
+ onClose();
+ }
+
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/Dialog.tsx b/web/src/components/ui/Dialog.tsx
new file mode 100644
index 0000000..1467183
--- /dev/null
+++ b/web/src/components/ui/Dialog.tsx
@@ -0,0 +1,128 @@
+import { ReactNode, useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { X } from "../../lib/icons";
+import { cn } from "../../lib/cn";
+
+interface DialogProps {
+ open: boolean;
+ onClose: () => void;
+ children: ReactNode;
+ maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
+ hideClose?: boolean;
+}
+
+const maxWidthMap: Record, string> = {
+ sm: "max-w-sm",
+ md: "max-w-md",
+ lg: "max-w-lg",
+ xl: "max-w-xl",
+ "2xl": "max-w-2xl",
+ "3xl": "max-w-3xl",
+ "4xl": "max-w-4xl",
+ full: "max-w-full",
+};
+
+export function Dialog({ open, onClose, children, maxWidth = "lg", hideClose }: DialogProps) {
+ const overlayRef = useRef(null);
+ const contentRef = useRef(null);
+
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose();
+ return;
+ }
+ if (e.key === "Tab" && contentRef.current) {
+ const focusable = contentRef.current.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ if (e.shiftKey) {
+ if (document.activeElement === first) {
+ e.preventDefault();
+ last?.focus();
+ }
+ } else {
+ if (document.activeElement === last) {
+ e.preventDefault();
+ first?.focus();
+ }
+ }
+ }
+ },
+ [onClose]
+ );
+
+ useEffect(() => {
+ if (open) {
+ document.addEventListener("keydown", handleKeyDown);
+ document.body.style.overflow = "hidden";
+ const firstFocusable = contentRef.current?.querySelector(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ firstFocusable?.focus();
+ } else {
+ document.body.style.overflow = "";
+ }
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ document.body.style.overflow = "";
+ };
+ }, [open, handleKeyDown]);
+
+ if (!open) return null;
+
+ return createPortal(
+ ) {
+ return ;
+}
+
+export function DialogTitle({ className, ...props }: React.HTMLAttributes) {
+ return ;
+}
+
+export function DialogDescription({ className, ...props }: React.HTMLAttributes) {
+ return ;
+}
+
+export function DialogContent({ className, ...props }: React.HTMLAttributes) {
+ return ;
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes) {
+ return ;
+}
diff --git a/web/src/components/ui/DropdownMenu.tsx b/web/src/components/ui/DropdownMenu.tsx
new file mode 100644
index 0000000..5fe4566
--- /dev/null
+++ b/web/src/components/ui/DropdownMenu.tsx
@@ -0,0 +1,128 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn";
+
+interface DropdownItem {
+ label: string;
+ onClick?: () => void;
+ href?: string;
+ disabled?: boolean;
+ destructive?: boolean;
+ icon?: ReactNode;
+ separator?: never;
+}
+
+interface DropdownSeparator {
+ separator: true;
+ label?: never;
+ onClick?: never;
+ href?: never;
+ disabled?: never;
+ destructive?: never;
+ icon?: never;
+}
+
+type DropdownItemType = DropdownItem | DropdownSeparator;
+
+interface DropdownMenuProps {
+ trigger: ReactNode;
+ items: DropdownItemType[];
+ align?: "left" | "right";
+}
+
+export function DropdownMenu({ trigger, items, align = "right" }: DropdownMenuProps) {
+ const [open, setOpen] = useState(false);
+ const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+ const triggerRef = useRef(null);
+ const menuRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+
+ function handleClickOutside(e: MouseEvent) {
+ if (
+ menuRef.current &&
+ !menuRef.current.contains(e.target as Node) &&
+ triggerRef.current &&
+ !triggerRef.current.contains(e.target as Node)
+ ) {
+ setOpen(false);
+ }
+ }
+
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") setOpen(false);
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ document.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [open]);
+
+ function handleTrigger() {
+ if (triggerRef.current) {
+ const rect = triggerRef.current.getBoundingClientRect();
+ setPosition({
+ top: rect.bottom + 4,
+ left: rect.left,
+ });
+ }
+ setOpen((prev) => !prev);
+ }
+
+ function handleItemClick(item: DropdownItem) {
+ if (item.disabled) return;
+ item.onClick?.();
+ setOpen(false);
+ }
+
+ return (
+ <>
+
+ {open && position
+ ? createPortal(
+ {
+ error?: boolean;
+ leftIcon?: ReactNode;
+ rightIcon?: ReactNode;
+}
+
+export const Input = forwardRef(
+ ({ className, error, leftIcon, rightIcon, ...props }, ref) => {
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+
+Label.displayName = "Label";
diff --git a/web/src/components/ui/Separator.tsx b/web/src/components/ui/Separator.tsx
new file mode 100644
index 0000000..32059d9
--- /dev/null
+++ b/web/src/components/ui/Separator.tsx
@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+interface SeparatorProps extends HTMLAttributes {
+ orientation?: "horizontal" | "vertical";
+}
+
+export function Separator({ className, orientation = "horizontal", ...props }: SeparatorProps) {
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/Skeleton.tsx b/web/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..8131198
--- /dev/null
+++ b/web/src/components/ui/Skeleton.tsx
@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+interface SkeletonProps extends HTMLAttributes {
+ variant?: "text" | "circular" | "rectangular";
+}
+
+export function Skeleton({ className, variant = "rectangular", ...props }: SkeletonProps) {
+ return (
+
+ );
+}
diff --git a/web/src/components/ui/Spinner.tsx b/web/src/components/ui/Spinner.tsx
new file mode 100644
index 0000000..c6574b5
--- /dev/null
+++ b/web/src/components/ui/Spinner.tsx
@@ -0,0 +1,10 @@
+import { Loader2 } from "../../lib/icons";
+
+interface SpinnerProps {
+ size?: number;
+ className?: string;
+}
+
+export function Spinner({ size = 20, className }: SpinnerProps) {
+ return ) => void;
+ dismiss: (id: string) => void;
+}
+
+const ToastContext = createContext(undefined);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+ const [toasts, setToasts] = useState([]);
+ const toast = useCallback((opts: Omit) => {
+ const id = Math.random().toString(36).slice(2);
+ setToasts((prev) => [...prev, { ...opts, id }]);
+ }, []);
+
+ const dismiss = useCallback((id: string) => {
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useToast() {
+ const ctx = useContext(ToastContext);
+ if (!ctx) throw new Error("useToast must be used within ToastProvider");
+ return ctx;
+}
+
+const iconMap: Record = {
+ success: CheckCircle,
+ error: AlertCircle,
+ warning: AlertTriangle,
+ info: Info,
+};
+
+const colorMap: Record = {
+ success: "text-success",
+ error: "text-destructive",
+ warning: "text-warning",
+ info: "text-primary",
+};
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+ const [leaving, setLeaving] = useState(false);
+ const timerRef = useRef>();
+
+ const handleDismiss = useCallback(() => {
+ setLeaving(true);
+ setTimeout(() => onDismiss(toast.id), 200);
+ }, [toast.id, onDismiss]);
+
+ useEffect(() => {
+ const duration = toast.duration ?? 4000;
+ timerRef.current = setTimeout(handleDismiss, duration);
+ return () => clearTimeout(timerRef.current);
+ }, [toast.duration, handleDismiss]);
+
+ const Icon = iconMap[toast.type];
+
+ return (
+
-
-
+
+
+
+
+
+
);
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index c053454..fdf40a9 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -1,116 +1,256 @@
import { useEffect, useState } from "react";
-import { api, formatBytes, SystemStatus } from "../api";
+import { api, formatBytes, SystemStatus, ApplyLogEntry } from "../api";
import { useDirty } from "../DirtyContext";
+import { PageHeader } from "../components/PageHeader";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/Card";
+import { Badge } from "../components/ui/Badge";
+import { Skeleton } from "../components/ui/Skeleton";
+import {
+ HardDrive,
+ Server,
+ CheckCircle,
+ AlertCircle,
+ Activity,
+} from "../lib/icons";
-const SOURCE_COLORS: Record = {
- samba: "bg-emerald-500/20 text-emerald-300",
- nfs: "bg-amber-500/20 text-amber-300",
- manual: "bg-cyan-500/20 text-cyan-300",
+const SOURCE_COLORS: Record = {
+ samba: "success",
+ nfs: "warning",
+ manual: "default",
};
const SOURCE_LABELS: Record = {
- samba: "SMB",
- nfs: "NFS",
+ samba: "SMB",
+ nfs: "NFS",
manual: "Vigilado",
};
export default function Dashboard() {
const [status, setStatus] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [recentLog, setRecentLog] = useState([]);
const { modules } = useDirty();
useEffect(() => {
- api.systemStatus().then(setStatus).catch(() => setStatus(null));
+ Promise.all([api.systemStatus(), api.applyLog()])
+ .then(([s, l]) => {
+ setStatus(s);
+ setRecentLog(l.entries.slice(0, 5));
+ })
+ .catch(() => setStatus(null))
+ .finally(() => setLoading(false));
}, []);
const visibleDisks = status?.disks.filter(
(d) => d.sources.includes("manual") || d.sources.includes("samba") || d.sources.includes("nfs")
) ?? [];
+ const activeServices = status?.services.filter((s) => s.active).length ?? 0;
+ const totalServices = status?.services.length ?? 0;
+
+ const kpis = [
+ {
+ label: "Discos vigilados",
+ value: visibleDisks.length,
+ icon: HardDrive,
+ color: "text-primary",
+ bg: "bg-primary/10",
+ },
+ {
+ label: "Servicios activos",
+ value: `${activeServices}/${totalServices}`,
+ icon: Server,
+ color: activeServices === totalServices ? "text-success" : "text-warning",
+ bg: activeServices === totalServices ? "bg-success/10" : "bg-warning/10",
+ },
+ {
+ label: "Cambios pendientes",
+ value: modules.length,
+ icon: Activity,
+ color: modules.length > 0 ? "text-warning" : "text-success",
+ bg: modules.length > 0 ? "bg-warning/10" : "bg-success/10",
+ },
+ {
+ label: "Entradas de log",
+ value: recentLog.length,
+ icon: AlertCircle,
+ color: "text-muted-foreground",
+ bg: "bg-muted",
+ },
+ ];
+
return (
setSidebarOpen(false)}
+ />
+
+ )}
+
+ );
+}
diff --git a/web/src/components/UserMenu.tsx b/web/src/components/UserMenu.tsx
new file mode 100644
index 0000000..f93d317
--- /dev/null
+++ b/web/src/components/UserMenu.tsx
@@ -0,0 +1,123 @@
+import { LogOut, Key } from "../lib/icons";
+import { DropdownMenu } from "./ui/DropdownMenu";
+import { useState } from "react";
+import { Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter } from "./ui/Dialog";
+import { Button } from "./ui/Button";
+import { Input } from "./ui/Input";
+import { Label } from "./ui/Label";
+import { api } from "../api";
+import { useToast } from "./ui/Toast";
+
+interface UserMenuProps {
+ username: string;
+ onLogout: () => void;
+}
+
+export function UserMenu({ username, onLogout }: UserMenuProps) {
+ const [showPasswordDialog, setShowPasswordDialog] = useState(false);
+ const [oldPassword, setOldPassword] = useState("");
+ const [newPassword, setNewPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState
+ setSidebarOpen(false)}
+ variant="drawer"
+ />
+
+
+ {initials}
+
+
+
+
+
+ }
+ items={[
+ {
+ label: "Cambiar contraseña",
+ icon: {username}
+ Sesión activa
+ {
+ if (e.target === overlayRef.current) onClose();
+ }}
+ >
+
+
,
+ document.body
+ );
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes
+ {!hideClose && (
+
+ )}
+ {children}
+
+
+ {items.map((item, i) => {
+ if ("separator" in item && item.separator) {
+ return ;
+ }
+ const typedItem = item as DropdownItem;
+ return (
+
+ );
+ })}
+
,
+ document.body
+ )
+ : null}
+
+ );
+}
diff --git a/web/src/components/ui/EmptyState.tsx b/web/src/components/ui/EmptyState.tsx
new file mode 100644
index 0000000..f616c3b
--- /dev/null
+++ b/web/src/components/ui/EmptyState.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { Button } from "./Button";
+
+interface EmptyStateProps {
+ icon?: ReactNode;
+ title: string;
+ description?: string;
+ action?: {
+ label: string;
+ onClick: () => void;
+ };
+ className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+ return (
+
+ {icon && (
+
+ );
+}
diff --git a/web/src/components/ui/Input.tsx b/web/src/components/ui/Input.tsx
new file mode 100644
index 0000000..52d6a4c
--- /dev/null
+++ b/web/src/components/ui/Input.tsx
@@ -0,0 +1,40 @@
+import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+interface InputProps extends InputHTMLAttributes
+ {icon}
+
+ )}
+
+
+ {action && (
+
+ )}
+ {title}
+ {description && ( +{description}
+ )} +
+ {leftIcon && (
+
+ );
+ }
+);
+
+Input.displayName = "Input";
diff --git a/web/src/components/ui/Label.tsx b/web/src/components/ui/Label.tsx
new file mode 100644
index 0000000..c703d8c
--- /dev/null
+++ b/web/src/components/ui/Label.tsx
@@ -0,0 +1,19 @@
+import { forwardRef, LabelHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export const Label = forwardRef
+ {leftIcon}
+
+ )}
+
+ {rightIcon && (
+
+ {rightIcon}
+
+ )}
+
+
+ );
+}
+
+function Toaster() {
+ const { toasts, dismiss } = useToast();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ return createPortal(
+
+
+
+ {toast.title}
+ {toast.description && ( +{toast.description}
+ )} +
+ {toasts.map((toast) => (
+
,
+ document.body
+ );
+}
diff --git a/web/src/index.css b/web/src/index.css
index 1c1cc5c..32392dc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3,31 +3,169 @@
@tailwind utilities;
@layer base {
+ :root {
+ --radius: 0.5rem;
+
+ --background: 222 47% 6%;
+ --foreground: 210 40% 96%;
+ --card: 222 35% 9%;
+ --card-foreground: 210 40% 96%;
+ --popover: 222 35% 9%;
+ --popover-foreground: 210 40% 96%;
+ --primary: 168 76% 38%;
+ --primary-foreground: 168 30% 6%;
+ --secondary: 217 33% 14%;
+ --secondary-foreground: 210 40% 96%;
+ --muted: 217 33% 14%;
+ --muted-foreground: 215 20% 55%;
+ --accent: 217 33% 17%;
+ --accent-foreground: 210 40% 96%;
+ --destructive: 350 89% 60%;
+ --destructive-foreground: 210 40% 98%;
+ --success: 158 64% 52%;
+ --success-foreground: 168 30% 6%;
+ --warning: 38 92% 50%;
+ --warning-foreground: 38 92% 10%;
+ --border: 217 33% 17%;
+ --input: 217 33% 17%;
+ --ring: 168 76% 38%;
+
+ --brand-50: 168 76% 95%;
+ --brand-100: 168 76% 85%;
+ --brand-200: 168 76% 75%;
+ --brand-300: 168 76% 65%;
+ --brand-400: 168 76% 55%;
+ --brand-500: 168 76% 45%;
+ --brand-600: 168 76% 38%;
+ --brand-700: 168 76% 32%;
+ --brand-800: 168 76% 24%;
+ --brand-900: 168 76% 16%;
+ }
+
+ .light {
+ --background: 0 0% 100%;
+ --foreground: 222 47% 11%;
+ --card: 0 0% 100%;
+ --card-foreground: 222 47% 11%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222 47% 11%;
+ --primary: 168 76% 32%;
+ --primary-foreground: 168 30% 98%;
+ --secondary: 210 40% 96%;
+ --secondary-foreground: 222 47% 11%;
+ --muted: 210 40% 96%;
+ --muted-foreground: 215 16% 47%;
+ --accent: 210 40% 96%;
+ --accent-foreground: 222 47% 11%;
+ --destructive: 350 89% 60%;
+ --destructive-foreground: 0 0% 100%;
+ --success: 158 64% 42%;
+ --success-foreground: 0 0% 100%;
+ --warning: 38 92% 50%;
+ --warning-foreground: 38 92% 10%;
+ --border: 214 32% 91%;
+ --input: 214 32% 91%;
+ --ring: 168 76% 38%;
+
+ --brand-50: 168 76% 95%;
+ --brand-100: 168 76% 88%;
+ --brand-200: 168 76% 78%;
+ --brand-300: 168 76% 68%;
+ --brand-400: 168 76% 58%;
+ --brand-500: 168 76% 48%;
+ --brand-600: 168 76% 38%;
+ --brand-700: 168 76% 32%;
+ --brand-800: 168 76% 24%;
+ --brand-900: 168 76% 16%;
+ }
+
+ * {
+ @apply border-border;
+ }
+
body {
- @apply bg-slate-950 text-slate-100 antialiased;
+ @apply bg-background text-foreground antialiased;
+ }
+
+ ::selection {
+ @apply bg-primary/30 text-foreground;
+ }
+
+ :focus-visible {
+ @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
}
}
-@layer components {
- .btn {
- @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50;
+@layer utilities {
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ scrollbar-color: hsl(var(--muted)) transparent;
}
- .btn-primary {
- @apply btn bg-brand-600 text-white hover:bg-brand-700;
+ .scrollbar-thin::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
}
- .btn-ghost {
- @apply btn bg-slate-800 text-slate-200 hover:bg-slate-700;
+ .scrollbar-thin::-webkit-scrollbar-track {
+ background: transparent;
}
- .btn-danger {
- @apply btn bg-red-600 text-white hover:bg-red-700;
+ .scrollbar-thin::-webkit-scrollbar-thumb {
+ background-color: hsl(var(--muted));
+ border-radius: 3px;
}
- .input {
- @apply w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500;
+
+ @keyframes skeleton-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
}
- .label {
- @apply mb-1 block text-sm font-medium text-slate-300;
+ .animate-skeleton-pulse {
+ animation: skeleton-pulse 1.5s ease-in-out infinite;
}
- .card {
- @apply rounded-lg border border-slate-800 bg-slate-900/60 p-5 shadow;
+
+ @keyframes toast-enter {
+ from { opacity: 0; transform: translateX(100%); }
+ to { opacity: 1; transform: translateX(0); }
+ }
+ .animate-toast-enter {
+ animation: toast-enter 0.3s ease-out forwards;
+ }
+
+ @keyframes toast-leave {
+ from { opacity: 1; transform: translateX(0); }
+ to { opacity: 0; transform: translateX(100%); }
+ }
+ .animate-toast-leave {
+ animation: toast-leave 0.2s ease-in forwards;
+ }
+
+ @keyframes dialog-enter {
+ from { opacity: 0; transform: scale(0.95); }
+ to { opacity: 1; transform: scale(1); }
+ }
+ .animate-dialog-enter {
+ animation: dialog-enter 0.2s ease-out forwards;
+ }
+
+ @keyframes dropdown-enter {
+ from { opacity: 0; transform: translateY(-4px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+ .animate-dropdown-enter {
+ animation: dropdown-enter 0.15s ease-out forwards;
+ }
+
+ @keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+ .animate-in {
+ animation: fade-in 0.2s ease-out forwards;
+ }
+
+ @keyframes slide-in-from-left {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(0); }
+ }
+ .animate-in {
+ animation: fade-in 0.2s ease-out forwards, slide-in-from-left 0.2s ease-out forwards;
}
}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index fe05248..d1151da 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -2,12 +2,18 @@ import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
+import { ThemeProvider } from "./components/ThemeProvider";
+import { ToastProvider } from "./components/ui/Toast";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
-
Dashboard
+
-
-
- Uso de disco -
- {visibleDisks.length ? ( -
- {visibleDisks.map((d) => (
- ([]);
- const [unrestricted, setUnrestricted] = useState(false);
const [currentPath, setCurrentPath] = useState("/");
const [entries, setEntries] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(false);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [capabilities, setCapabilities] = useState(null);
-
- const [searchQuery, setSearchQuery] = useState("");
- const [searchResults, setSearchResults] = useState([]);
- const [searching, setSearching] = useState(false);
-
- const [pathInput, setPathInput] = useState(currentPath);
- const [editingPath, setEditingPath] = useState(false);
-
const [showMkdir, setShowMkdir] = useState(false);
const [mkdirName, setMkdirName] = useState("");
-
- const [selectedEntry, setSelectedEntry] = useState(null);
- const [preview, setPreview] = useState(null);
- const [previewLoading, setPreviewLoading] = useState(false);
- const [showPreview, setShowPreview] = useState(false);
-
- const [renameState, setRenameState] = useState<{ entry: FileEntry; name: string } | null>(null);
- const [chmodState, setChmodState] = useState<{ entry: FileEntry; mode: string } | null>(null);
- const [chownState, setChownState] = useState<{ entry: FileEntry; uid: string; gid: string } | null>(null);
-
- const [isDragOver, setIsDragOver] = useState(false);
- const [uploading, setUploading] = useState(false);
-
+ const [mkdirLoading, setMkdirLoading] = useState(false);
+ const [editing, setEditing] = useState(null);
+ const [editName, setEditName] = useState("");
+ const [deleteTarget, setDeleteTarget] = useState(null);
+ const [deleteLoading, setDeleteLoading] = useState(false);
+ const [selectedPath, setSelectedPath] = useState(null);
+ const [pathInput, setPathInput] = useState("");
+ const [dragOver, setDragOver] = useState(false);
+ const [uploadLoading, setUploadLoading] = useState(false);
const fileInputRef = useRef(null);
- const LIMIT = 200;
+ const { toast } = useToast();
useEffect(() => {
- api.fileCapabilities().then(setCapabilities).catch(() => {});
- api.fileRoots().then(r => {
+ api.fileRoots().then((r) => {
setRoots(r.roots ?? []);
- setUnrestricted(r.unrestricted);
if ((r.roots ?? []).length > 0) {
setCurrentPath(r.roots![0]);
- } else if (!r.unrestricted) {
- setCurrentPath("/");
}
}).catch(() => {});
}, []);
useEffect(() => {
- if (currentPath) {
- loadDir(currentPath, 1);
- }
+ loadDir(currentPath, 1);
+ setPathInput(currentPath);
}, [currentPath]);
- useEffect(() => {
- setSearchResults([]);
- setSearchQuery("");
- }, [currentPath]);
-
- useEffect(() => {
- if (!editingPath) setPathInput(currentPath);
- }, [currentPath, editingPath]);
-
async function loadDir(path: string, pageNum: number) {
setLoading(true);
- setError(null);
try {
const res = await api.listFiles(path, pageNum, LIMIT);
- const entries = res.entries ?? [];
+ const ents = res.entries ?? [];
if (pageNum === 1) {
- setEntries(entries);
+ setEntries(ents);
} else {
- setEntries(prev => [...prev, ...entries]);
+ setEntries((prev) => [...prev, ...ents]);
}
setPage(pageNum);
setHasMore(res.has_more);
setTotal(res.total);
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error loading directory");
} finally {
setLoading(false);
}
@@ -119,10 +111,68 @@ export default function Files() {
}
function navigateTo(path: string) {
- setSelectedEntry(null);
- setPreview(null);
- setShowPreview(false);
setCurrentPath(path);
+ setSelectedPath(null);
+ }
+
+ function handleDoubleClick(entry: FileEntry) {
+ if (entry.is_dir) {
+ navigateTo(entry.path);
+ } else {
+ setSelectedPath(entry.path);
+ }
+ }
+
+ async function handleMkdir() {
+ if (!mkdirName.trim()) return;
+ setMkdirLoading(true);
+ try {
+ await api.mkdirFile(currentPath + "/" + mkdirName.trim());
+ setMkdirName("");
+ setShowMkdir(false);
+ refresh();
+ toast({ type: "success", title: "Carpeta creada" });
+ } catch (e) {
+ toast({ type: "error", title: "Error", description: e instanceof Error ? e.message : undefined });
+ } finally {
+ setMkdirLoading(false);
+ }
+ }
+
+ function startRename(entry: FileEntry) {
+ setEditing({ path: entry.path, name: entry.name, is_dir: entry.is_dir });
+ setEditName(entry.name);
+ }
+
+ async function handleRename() {
+ if (!editing || !editName.trim()) return;
+ if (editName === editing.name) {
+ setEditing(null);
+ return;
+ }
+ try {
+ await api.renameFile(editing.path, editName.trim());
+ setEditing(null);
+ refresh();
+ toast({ type: "success", title: "Renombrado correctamente" });
+ } catch (e) {
+ toast({ type: "error", title: "Error", description: e instanceof Error ? e.message : undefined });
+ }
+ }
+
+ async function handleDelete() {
+ if (!deleteTarget) return;
+ setDeleteLoading(true);
+ try {
+ await api.deleteFile(deleteTarget.path);
+ setDeleteTarget(null);
+ refresh();
+ toast({ type: "success", title: "Eliminado correctamente" });
+ } catch (e) {
+ toast({ type: "error", title: "Error", description: e instanceof Error ? e.message : undefined });
+ } finally {
+ setDeleteLoading(false);
+ }
}
async function handleNavigateToPath(e: React.FormEvent) {
@@ -131,550 +181,299 @@ export default function Files() {
try {
const info = await api.fileInfo(path);
if (!info.is_dir) {
- setError("La ruta no es un directorio");
+ toast({ type: "error", title: "No es un directorio" });
return;
}
navigateTo(path);
} catch (err) {
- setError(err instanceof Error ? err.message : "Ruta no accesible");
- }
- }
-
- function handleDoubleClick(entry: FileEntry) {
- if (entry.is_dir) {
- navigateTo(entry.path);
- } else {
- openPreview(entry);
- }
- }
-
- async function openPreview(entry: FileEntry) {
- setSelectedEntry(entry);
- setPreviewLoading(true);
- setShowPreview(true);
- try {
- const p = await api.filePreview(entry.path);
- setPreview(p);
- } catch (e) {
- setPreview({ type: "binary", mime: "", size: entry.size });
- } finally {
- setPreviewLoading(false);
- }
- }
-
- function parentDir(): string | null {
- if (currentPath === "/" || currentPath === "") return null;
- const parts = currentPath.split("/").filter(Boolean);
- parts.pop();
- const parent = "/" + parts.join("/");
- return parent === "/" ? "/" : parent;
- }
-
- async function handleMkdir() {
- if (!mkdirName.trim()) return;
- try {
- await api.mkdirFile(currentPath + "/" + mkdirName.trim());
- setMkdirName("");
- setShowMkdir(false);
- refresh();
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error creating folder");
- }
- }
-
- async function handleRename() {
- if (!renameState) return;
- try {
- await api.renameFile(renameState.entry.path, renameState.name);
- setRenameState(null);
- refresh();
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error renaming");
- }
- }
-
- async function handleChmod() {
- if (!chmodState) return;
- try {
- await api.chmodFile(chmodState.entry.path, chmodState.mode);
- setChmodState(null);
- refresh();
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error changing permissions");
- }
- }
-
- async function handleChown() {
- if (!chownState) return;
- const uid = parseInt(chownState.uid, 10);
- const gid = parseInt(chownState.gid, 10);
- if (isNaN(uid) || isNaN(gid)) {
- setError("UID y GID deben ser numéricos");
- return;
- }
- try {
- await api.chownFile(chownState.entry.path, uid, gid);
- setChownState(null);
- refresh();
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error changing owner");
- }
- }
-
- async function handleDelete(entry: FileEntry) {
- if (!confirm(`¿Eliminar "${entry.name}"${entry.is_dir ? " y todo su contenido" : ""}?`)) return;
- try {
- await api.deleteFile(entry.path);
- if (selectedEntry?.path === entry.path) {
- setSelectedEntry(null);
- setPreview(null);
- setShowPreview(false);
- }
- refresh();
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error deleting");
+ toast({ type: "error", title: "Ruta no accesible", description: err instanceof Error ? err.message : undefined });
}
}
async function handleUpload(fileList: FileList | null) {
- if (!fileList || fileList.length === 0) return;
- setUploading(true);
+ if (!fileList) return;
+ setUploadLoading(true);
+ let success = 0;
+ let failed = 0;
for (const file of Array.from(fileList)) {
try {
await api.uploadFile(currentPath, file);
- } catch (e) {
- setError(e instanceof Error ? e.message : `Error uploading ${file.name}`);
+ success++;
+ } catch {
+ failed++;
}
}
- setUploading(false);
refresh();
- }
-
- async function doSearch(q: string) {
- if (!q.trim()) {
- setSearchResults([]);
- return;
- }
- setSearching(true);
- try {
- const res = await api.searchFiles(currentPath, q, 100);
- setSearchResults(res.results ?? []);
- } catch (e) {
- setError(e instanceof Error ? e.message : "Error searching");
- } finally {
- setSearching(false);
+ setUploadLoading(false);
+ if (failed === 0 && success > 0) {
+ toast({ type: "success", title: `${success} archivo${success > 1 ? "s" : ""} subido${success > 1 ? "s" : ""}` });
+ } else if (failed > 0) {
+ toast({ type: "warning", title: `${success} ok, ${failed} error${failed > 1 ? "es" : ""}` });
}
}
- const handleSearchSubmit = useCallback((e: React.FormEvent) => {
- e.preventDefault();
- doSearch(searchQuery);
- }, [searchQuery, currentPath]);
-
function handleDropZone(e: DragEvent) {
e.preventDefault();
- setIsDragOver(false);
+ setDragOver(false);
handleUpload(e.dataTransfer.files);
}
- function handleDragOver(e: DragEvent) {
- e.preventDefault();
- setIsDragOver(true);
- }
+ const parentDir = currentPath === "/" ? null : (() => {
+ const parts = currentPath.split("/").filter(Boolean);
+ parts.pop();
+ return "/" + parts.join("/");
+ })();
- function handleDragLeave() {
- setIsDragOver(false);
- }
-
- function selectSearchResult(hit: SearchHit) {
- const dir = hit.path.substring(0, hit.path.lastIndexOf("/")) || "/";
- navigateTo(dir);
- setSelectedEntry({ name: hit.name, path: hit.path, is_dir: hit.is_dir, size: hit.size, mode: "", mode_num: 0, mod_time: 0 });
- }
+ const breadcrumbs = currentPath.split("/").filter(Boolean);
return (
-
);
}
diff --git a/web/src/pages/Files.tsx b/web/src/pages/Files.tsx
index 719e0d7..d48e86f 100644
--- a/web/src/pages/Files.tsx
+++ b/web/src/pages/Files.tsx
@@ -1,114 +1,106 @@
-import { useEffect, useState, useRef, DragEvent, useCallback } from "react";
-import { api, FileEntry, FileCapabilities, FilePreview, SearchHit, formatBytes } from "../api";
-import Modal from "../components/Modal";
+import { useEffect, useState, useRef, DragEvent } from "react";
+import { api, FileEntry, formatBytes } from "../api";
+import { PageHeader } from "../components/PageHeader";
+import { Button } from "../components/ui/Button";
+import { Input } from "../components/ui/Input";
+import { Card } from "../components/ui/Card";
+import { Spinner } from "../components/ui/Spinner";
+import { useToast } from "../components/ui/Toast";
+import { ConfirmDialog } from "../components/ui/ConfirmDialog";
+import {
+ Dialog,
+ DialogHeader,
+ DialogTitle,
+ DialogContent,
+} from "../components/ui/Dialog";
+import {
+ File,
+ Folder,
+ FolderPlus,
+ Upload,
+ RefreshCw,
+ ChevronRight,
+ ChevronLeft,
+ FileText,
+ FileImage,
+ Film,
+ Music,
+ Archive,
+ Search,
+ Trash2,
+ Pencil,
+} from "../lib/icons";
+import { cn } from "../lib/cn";
-function FileIcon({ name }: { name: string }) {
- const ext = name.split(".").pop()?.toLowerCase() ?? "";
- if (name === "..") return ↑;
- if (ext === "png" || ext === "jpg" || ext === "jpeg" || ext === "gif" || ext === "webp" || ext === "svg")
- return 🖼;
- if (ext === "mp4" || ext === "avi" || ext === "mkv" || ext === "mov")
- return 🎬;
- if (ext === "mp3" || ext === "wav" || ext === "ogg" || ext === "flac")
- return 🎵;
- if (ext === "zip" || ext === "tar" || ext === "gz" || ext === "rar" || ext === "7z")
- return 📦;
- if (ext === "pdf")
- return 📄;
- if (ext === "txt" || ext === "md" || ext === "log" || ext === "cfg" || ext === "conf" || ext === "json" || ext === "yaml" || ext === "yml" || ext === "toml" || ext === "xml")
- return 📝;
- return 📄;
+function getFileIcon(entry: FileEntry) {
+ if (entry.is_dir) return
-
-
-
- {d.path}
- {d.sources.map((s) => (
-
- {SOURCE_LABELS[s] ?? s}
-
- ))}
- {d.used_by && d.used_by.length > 0 && d.sources.length > 1 && (
- {d.used_by.join(", ")}
- )}
-
-
- {formatBytes(d.used_bytes)} / {formatBytes(d.total_bytes)}
-
+
+ {kpis.map(({ label, value, icon: Icon, color, bg }) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {loading ? "—" : value}
+{label}
+
+
+
+
+
+
+
+ {loading ? (
+
+
+
+
+ )}
+
+ {recentLog.length > 0 && (
+
+
+
+
+
+
+
-
-
+ {[1, 2].map((i) => (
+
+
+
+
+
+
+ {loading ? (
+
+
+
+
+ {modules.length > 0 && (
+
+
-
-
+ ))}
+
+ ) : visibleDisks.length ? (
+
+ {visibleDisks.map((d) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+ {d.path}
+ {d.sources.map((s) => (
+
+ {SOURCE_LABELS[s]}
+
+ ))}
+
+
+ {formatBytes(d.used_bytes)} / {formatBytes(d.total_bytes)}
+
+
+
+
+ + Sin puntos de montaje vigilados. Añádelos en Ajustes. +
+ )} + + + +
+ {[1, 2, 3].map((i) => (
+
+ ) : status?.services?.length ? (
+
+
+ ))}
+
+ {status.services.map((s) => (
+
+ ) : (
+
+ {s.name}
+
+ {s.active ? (
+
+
+ ))}
+ + Sin datos de servicios. +
+ )} +
+
+
+
+ + Cambios pendientes de aplicar +
++ Módulos: {modules.map((m) => m.module).join(", ")} +
+
+ {recentLog.map((entry) => (
+
- ) : (
-
+
))}
+ {entry.success ? (
+
+
+
+ {entry.module}
+ {entry.message}
+
+ + {new Date(entry.created_at).toLocaleString()} +
- Sin puntos de montaje vigilados. Añádelos en Ajustes. -
- )} -
-
- - Servicios -
- {status?.services?.length ? ( --
- {status.services.map((s) => (
-
- - {s.name} - - {s.state} - - - ))} -
Sin datos de servicios.
- )} -
-
+
+
+ )}
- Cambios pendientes -
- {modules.length > 0 ? ( -- Módulos con cambios sin aplicar: {modules.map((m) => m.module).join(", ")} -
- ) : ( -Todo aplicado. No hay cambios pendientes.
- )} -
-
+ }
+ />
-
-
- {(searchResults ?? []).length > 0 && (
-
-
-
- {error && (
- Archivos
-
-
-
- {error}
- )}
-
-
- {(roots ?? []).length > 1 && (
-
- )}
- {unrestricted && (
-
- Sin restricción — acceso a todo el FS
-
- )}
-
+
-
-
-
-
- ([]);
+ const [loading, setLoading] = useState(true);
+ const [filter, setFilter] = useState<"all" | "success" | "error">("all");
+ const [moduleFilter, setModuleFilter] = useState("");
useEffect(() => {
- api.applyLog().then((res) => setEntries(res.entries ?? [])).catch(() => setEntries([]));
+ api.applyLog()
+ .then((res) => setEntries(res.entries))
+ .catch(() => setEntries([]))
+ .finally(() => setLoading(false));
}, []);
+ const modules = [...new Set(entries.map((e) => e.module))];
+
+ const filtered = entries.filter((e) => {
+ if (filter === "success" && !e.success) return false;
+ if (filter === "error" && e.success) return false;
+ if (moduleFilter && e.module !== moduleFilter) return false;
+ return true;
+ });
+
+ const grouped = filtered.reduce>((acc, entry) => {
+ const date = new Date(entry.created_at).toLocaleDateString("es-ES", {
+ weekday: "long",
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+ if (!acc[date]) acc[date] = [];
+ acc[date].push(entry);
+ return acc;
+ }, {});
+
return (
(null);
const [loading, setLoading] = useState(false);
+ const { theme } = useTheme();
async function handleSubmit(e: FormEvent) {
e.preventDefault();
@@ -22,31 +27,76 @@ export default function Login({ onLoggedIn }: { onLoggedIn: (username: string) =
}
return (
-
Resultados ({(searchResults ?? []).length})
-
- {searchResults.map((hit, i) => (
- setShowMkdir(false)} maxWidth="sm">
-
- )}
-
- {renameState && (
- setRenameState(null)} maxWidth="sm">
-
- )}
-
- {chmodState && (
- setChmodState(null)} maxWidth="sm">
-
- )}
-
- {chownState && (
- setChownState(null)} maxWidth="sm">
-
- )}
-
- {showPreview && selectedEntry && (
- { setShowPreview(false); setPreview(null); }}
- maxWidth="3xl"
- >
- setDeleteTarget(null)}
+ onConfirm={handleDelete}
+ title={`Eliminar ${deleteTarget?.is_dir ? "carpeta" : "archivo"}`}
+ description={`¿Eliminar "${deleteTarget?.name}"${deleteTarget?.is_dir ? " y todo su contenido" : ""}? Esta acción no se puede deshacer.`}
+ confirmLabel="Eliminar"
+ destructive
+ loading={deleteLoading}
+ />
);
}
diff --git a/web/src/pages/Log.tsx b/web/src/pages/Log.tsx
index 00231f8..91c8278 100644
--- a/web/src/pages/Log.tsx
+++ b/web/src/pages/Log.tsx
@@ -1,51 +1,140 @@
import { useEffect, useState } from "react";
import { api, ApplyLogEntry } from "../api";
+import { PageHeader } from "../components/PageHeader";
+import { Card } from "../components/ui/Card";
+import { Badge } from "../components/ui/Badge";
+import { Button } from "../components/ui/Button";
+import { Spinner } from "../components/ui/Spinner";
+import { EmptyState } from "../components/ui/EmptyState";
+import { CheckCircle, AlertCircle, History } from "../lib/icons";
export default function Log() {
const [entries, setEntries] = useState selectSearchResult(hit)}
- onDoubleClick={() => {
- if (hit.is_dir) {
- navigateTo(hit.path);
- } else {
- setSelectedEntry({ name: hit.name, path: hit.path, is_dir: hit.is_dir, size: hit.size, mode: "", mode_num: 0, mod_time: 0 });
- openPreview({ name: hit.name, path: hit.path, is_dir: hit.is_dir, size: hit.size, mode: "", mode_num: 0, mod_time: 0 });
- }
- }}
+
+
- )}
-
-
+
-
-
+ {roots.length > 1 && (
+
- ))}
-
-
- handleUpload(e.target.files)} />
-
- {capabilities?.chown && (
-
- )}
- {capabilities?.chmod && (
-
- )}
-
-
-
- {isDragOver && (
-
-
-
-
-
- {hasMore && (
-
- )}
-
- {showMkdir && (
-
- Suelta para subir
-
- )}
- | Nombre | -Tamaño | -Permisos | -Modificado | -- |
|---|---|---|---|---|
| .. | -— | -— | -— | -- |
|
-
-
- |
- - {entry.is_dir ? "—" : formatBytes(entry.size)} - | -- {modeStr(entry.mode_num)} - | -- {entry.mod_time > 0 ? new Date(entry.mod_time * 1000).toLocaleString() : "—"} - | -
-
-
- {capabilities?.chmod && (
-
- )}
- {capabilities?.chown && (
-
- )}
-
-
- |
-
| - {searchQuery ? "Sin resultados" : "Directorio vacío"} - | -||||
| - Cargando… - | -
- setMkdirName(e.target.value)}
- onKeyDown={e => e.key === "Enter" && handleMkdir()}
- autoFocus
- />
-
-
-
- setRenameState({ ...renameState, name: e.target.value })}
- onKeyDown={e => e.key === "Enter" && handleRename()}
- autoFocus
- />
-
-
-
-
-
- setChmodState({ ...chmodState, mode: e.target.value })}
- onKeyDown={e => e.key === "Enter" && handleChmod()}
- autoFocus
- placeholder="755"
- />
- octal (ej: 755, 644)
-
-
- {(parseInt(chmodState.mode, 8) || 0).toString(8).padStart(3, "0")} = {[
- ["r", (parseInt(chmodState.mode, 8) || 0) & 0o400],
- ["w", (parseInt(chmodState.mode, 8) || 0) & 0o200],
- ["x", (parseInt(chmodState.mode, 8) || 0) & 0o100],
- ].map(([c, v]) => c + (v ? "✓" : "✗")).join(" ")}
-
-
-
-
-
-
-
-
-
- setChownState({ ...chownState, uid: e.target.value })}
- placeholder="0"
- />
-
-
-
- setChownState({ ...chownState, gid: e.target.value })}
- placeholder="0"
- />
-
-
-
-
-
-
- {previewLoading ? (
-
+
+ Cargando…
- ) : preview?.type === "text" ? (
-
-
- ) : preview?.type === "image" ? (
- {preview.mime} · {formatBytes(preview.size)}
-
- {preview.content}
-
-
- })
parentDir && navigateTo(parentDir)}
+ disabled={!parentDir}
+ >
+
-
+
+ {breadcrumbs.length > 0 && (
+ {preview.mime} · {formatBytes(preview.size)}
-
+ {breadcrumbs.map((part, i) => (
+
+ {i > 0 &&
+ )}
+ { e.preventDefault(); setDragOver(true); }}
+ onDragLeave={() => setDragOver(false)}
+ onDrop={handleDropZone}
+ >
+
+
+
+
+
+ {hasMore && (
+ | Nombre | +Tamaño | +Modificado | ++ |
|---|---|---|---|
|
+
+
+ |
+ — | +— | ++ |
|
+ |
+ |||
| + Directorio vacío + | +|||
|
+
+ {getFileIcon(entry)}
+ {editing?.path === entry.path ? (
+ setEditName(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleRename();
+ if (e.key === "Escape") setEditing(null);
+ }}
+ onBlur={handleRename}
+ onClick={(e) => e.stopPropagation()}
+ />
+ ) : (
+ {entry.name}
+ )}
+
+ |
+ + {entry.is_dir ? "—" : formatBytes(entry.size)} + | ++ {entry.mod_time > 0 ? new Date(entry.mod_time * 1000).toLocaleString() : "—"} + | +
+
+
+
+
+ |
+
+
+
+ )}
+
+
+ {showMkdir && (
+
)}
+
+
-
+ {loading ? (
+
);
}
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
index acb0090..7ec81d6 100644
--- a/web/src/pages/Login.tsx
+++ b/web/src/pages/Login.tsx
@@ -1,11 +1,16 @@
import { FormEvent, useState } from "react";
import { api } from "../api";
+import { Button } from "../components/ui/Button";
+import { Input } from "../components/ui/Input";
+import { Label } from "../components/ui/Label";
+import { useTheme } from "../components/ThemeProvider";
export default function Login({ onLoggedIn }: { onLoggedIn: (username: string) => void }) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useStateHistorial de aplicaciones
-
-
-
-
+
+ )}
+
+ | Fecha | -Módulo | -Resultado | -Mensaje | -
|---|---|---|---|
| {new Date(e.created_at).toLocaleString()} | -{e.module} | -- {e.success ? ( - OK - ) : ( - Error - )} - | -{e.message} | -
+
+ ) : filtered.length === 0 ? (
+
+ {Object.entries(grouped).map(([date, dateEntries]) => (
+
+ )}
+
+
+ ))}
+
+
+ {date}
+
+ {dateEntries.map((entry) => (
+
+
+
+ ))}
+
+ {entry.success ? (
+
+
+
+
+ {entry.module}
+ {entry.message}
+
+ + {new Date(entry.created_at).toLocaleTimeString("es-ES")} +
+
-