277 lines
9.4 KiB
TypeScript
277 lines
9.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useTheme } from "next-themes";
|
||
|
|
import {
|
||
|
|
Settings,
|
||
|
|
Palette,
|
||
|
|
Globe,
|
||
|
|
Server,
|
||
|
|
CheckCircle2,
|
||
|
|
XCircle,
|
||
|
|
RefreshCw,
|
||
|
|
Monitor,
|
||
|
|
Sun,
|
||
|
|
Moon,
|
||
|
|
Info
|
||
|
|
} from "lucide-react";
|
||
|
|
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Separator } from "@/components/ui/separator";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import { dolibarrFetch } from "@/lib/dolibarrClient";
|
||
|
|
|
||
|
|
interface ConnectionStatus {
|
||
|
|
connected: boolean;
|
||
|
|
url: string;
|
||
|
|
version?: string;
|
||
|
|
error?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ConfiguracionPage() {
|
||
|
|
const { theme, setTheme } = useTheme();
|
||
|
|
const [mounted, setMounted] = useState(false);
|
||
|
|
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
|
||
|
|
const [isTestingConnection, setIsTestingConnection] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setMounted(true);
|
||
|
|
testConnection();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const testConnection = async () => {
|
||
|
|
setIsTestingConnection(true);
|
||
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "No configurada";
|
||
|
|
|
||
|
|
try {
|
||
|
|
const status = await dolibarrFetch("status");
|
||
|
|
setConnectionStatus({
|
||
|
|
connected: true,
|
||
|
|
url: apiUrl,
|
||
|
|
version: status?.success?.dolibarr_version || status?.dolibarr_version || "Desconocida",
|
||
|
|
});
|
||
|
|
toast.success("Conexion verificada con Dolibarr");
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Connection test failed:", err);
|
||
|
|
setConnectionStatus({
|
||
|
|
connected: false,
|
||
|
|
url: apiUrl,
|
||
|
|
error: err instanceof Error ? err.message : "Error desconocido",
|
||
|
|
});
|
||
|
|
toast.error("No se pudo conectar con Dolibarr");
|
||
|
|
} finally {
|
||
|
|
setIsTestingConnection(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const themeOptions = [
|
||
|
|
{ value: "light", label: "Claro", icon: Sun, description: "Tema claro" },
|
||
|
|
{ value: "dark", label: "Oscuro", icon: Moon, description: "Tema oscuro" },
|
||
|
|
{ value: "system", label: "Sistema", icon: Monitor, description: "Seguir preferencia del sistema" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6 max-w-3xl mx-auto">
|
||
|
|
{/* Header */}
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold tracking-tight">Ajustes</h1>
|
||
|
|
<p className="text-muted-foreground">Configuracion de la aplicacion y conexion con Dolibarr</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Theme */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
||
|
|
<Palette className="h-5 w-5" />
|
||
|
|
Apariencia
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Personaliza el aspecto visual de la aplicacion</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label>Tema</Label>
|
||
|
|
<div className="grid grid-cols-3 gap-3">
|
||
|
|
{mounted && themeOptions.map((option) => {
|
||
|
|
const isSelected = theme === option.value;
|
||
|
|
const Icon = option.icon;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={option.value}
|
||
|
|
onClick={() => setTheme(option.value)}
|
||
|
|
className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
|
||
|
|
isSelected
|
||
|
|
? "border-blue-500 bg-blue-50 dark:bg-blue-950"
|
||
|
|
: "border-muted hover:border-muted-foreground/25"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Icon className={`h-6 w-6 ${isSelected ? "text-blue-500" : "text-muted-foreground"}`} />
|
||
|
|
<span className={`text-sm font-medium ${isSelected ? "text-blue-600 dark:text-blue-400" : ""}`}>
|
||
|
|
{option.label}
|
||
|
|
</span>
|
||
|
|
<span className="text-xs text-muted-foreground">{option.description}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{!mounted && (
|
||
|
|
<>
|
||
|
|
{[1, 2, 3].map((i) => (
|
||
|
|
<Skeleton key={i} className="h-24 w-full rounded-lg" />
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Dolibarr Connection */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
||
|
|
<Server className="h-5 w-5" />
|
||
|
|
Conexion con Dolibarr
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Estado de la conexion con el servidor Dolibarr</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-4">
|
||
|
|
{/* Connection status */}
|
||
|
|
<div className="flex items-center justify-between p-4 rounded-lg bg-muted/50">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
{isTestingConnection ? (
|
||
|
|
<RefreshCw className="h-5 w-5 text-muted-foreground animate-spin" />
|
||
|
|
) : connectionStatus?.connected ? (
|
||
|
|
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||
|
|
) : (
|
||
|
|
<XCircle className="h-5 w-5 text-red-500" />
|
||
|
|
)}
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium">
|
||
|
|
{isTestingConnection
|
||
|
|
? "Verificando conexion..."
|
||
|
|
: connectionStatus?.connected
|
||
|
|
? "Conectado"
|
||
|
|
: "Desconectado"}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{connectionStatus?.url || "Verificando..."}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
onClick={testConnection}
|
||
|
|
disabled={isTestingConnection}
|
||
|
|
>
|
||
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${isTestingConnection ? "animate-spin" : ""}`} />
|
||
|
|
Probar
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Connection details */}
|
||
|
|
{connectionStatus && (
|
||
|
|
<>
|
||
|
|
<Separator />
|
||
|
|
<div className="space-y-3">
|
||
|
|
<DetailRow label="URL de la API" value={connectionStatus.url} />
|
||
|
|
{connectionStatus.connected && connectionStatus.version && (
|
||
|
|
<DetailRow label="Version de Dolibarr" value={connectionStatus.version} />
|
||
|
|
)}
|
||
|
|
{connectionStatus.error && (
|
||
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 text-red-700 dark:text-red-400 text-sm">
|
||
|
|
<XCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
|
||
|
|
<p>{connectionStatus.error}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<DetailRow
|
||
|
|
label="Estado"
|
||
|
|
value={
|
||
|
|
connectionStatus.connected ? "Operativo" : "Sin conexion"
|
||
|
|
}
|
||
|
|
badge
|
||
|
|
badgeVariant={connectionStatus.connected ? "success" : "error"}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* App Info */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
||
|
|
<Info className="h-5 w-5" />
|
||
|
|
Informacion de la Aplicacion
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
<DetailRow label="Aplicacion" value="Dolibarr - Gestion de Proyectos" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="Framework" value="Next.js 16.0.7" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="React" value="19.2.0" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="UI" value="shadcn/ui + Tailwind CSS" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="Idioma" value="Espanol (es-ES)" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Locale / Language */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
||
|
|
<Globe className="h-5 w-5" />
|
||
|
|
Idioma y Region
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Configuracion regional de la aplicacion</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
<DetailRow label="Idioma" value="Espanol" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="Formato de fecha" value="dd/mm/aaaa (es-ES)" />
|
||
|
|
<Separator />
|
||
|
|
<DetailRow label="Moneda" value="Euro (EUR)" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function DetailRow({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
badge,
|
||
|
|
badgeVariant,
|
||
|
|
}: {
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
badge?: boolean;
|
||
|
|
badgeVariant?: "success" | "error";
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-sm text-muted-foreground">{label}</span>
|
||
|
|
{badge ? (
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className={
|
||
|
|
badgeVariant === "success"
|
||
|
|
? "bg-green-100 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800"
|
||
|
|
: "bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{value}
|
||
|
|
</Badge>
|
||
|
|
) : (
|
||
|
|
<span className="text-sm font-medium">{value}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|