Refactor: Implement DashboardLayout, fix mobile nav, and resolve scroll issues
This commit is contained in:
ren
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'
|
||||
import { Save, Plus, Trash2, Bot, MessageSquare, Key, Link as LinkIcon, Lock, Send, CheckCircle2, XCircle, Loader2, Sparkles, Box } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { AIServiceConfig, AppSettings } from '@/lib/types'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -159,211 +160,213 @@ export default function SettingsPage() {
|
||||
if (loading) return <div className="p-8 text-center text-slate-400">Cargando configuración...</div>
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8 pb-10">
|
||||
<DashboardLayout title="Configuración">
|
||||
<div className="max-w-4xl mx-auto space-y-8 pb-10">
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Configuración</h1>
|
||||
<p className="text-slate-400 text-sm">Gestiona la integración con Telegram e Inteligencia Artificial.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-2 bg-emerald-500 hover:bg-emerald-400 text-white rounded-lg transition shadow-lg shadow-emerald-500/20 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Save size={18} />
|
||||
{saving ? 'Guardando...' : 'Guardar Cambios'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={cn(
|
||||
"p-4 rounded-lg text-sm font-medium border flex items-center gap-2 animate-in fade-in slide-in-from-top-2",
|
||||
message.type === 'success' ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-red-500/10 border-red-500/20 text-red-400"
|
||||
)}>
|
||||
{message.type === 'success' ? <CheckCircle2 size={18} /> : <XCircle size={18} />}
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Telegram Configuration */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="text-cyan-400" />
|
||||
<h2 className="text-lg font-semibold">Telegram Bot</h2>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Configuración</h2>
|
||||
<p className="text-slate-400 text-sm">Gestiona la integración con Telegram e Inteligencia Artificial.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={testTelegram}
|
||||
disabled={testingTelegram || !settings.telegram.botToken || !settings.telegram.chatId}
|
||||
className="text-xs flex items-center gap-1.5 bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/20 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-2 bg-emerald-500 hover:bg-emerald-400 text-white rounded-lg transition shadow-lg shadow-emerald-500/20 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{testingTelegram ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
|
||||
Probar Envío
|
||||
<Save size={18} />
|
||||
{saving ? 'Guardando...' : 'Guardar Cambios'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-slate-900 border border-slate-800 rounded-xl">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Key size={12} /> Bot Token
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
|
||||
value={settings.telegram.botToken}
|
||||
onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, botToken: e.target.value } })}
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">El token que te da @BotFather.</p>
|
||||
{message && (
|
||||
<div className={cn(
|
||||
"p-4 rounded-lg text-sm font-medium border flex items-center gap-2 animate-in fade-in slide-in-from-top-2",
|
||||
message.type === 'success' ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-red-500/10 border-red-500/20 text-red-400"
|
||||
)}>
|
||||
{message.type === 'success' ? <CheckCircle2 size={18} /> : <XCircle size={18} />}
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<MessageSquare size={12} /> Chat ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="123456789"
|
||||
value={settings.telegram.chatId}
|
||||
onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, chatId: e.target.value } })}
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">Tu ID numérico de Telegram (o el ID del grupo).</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Providers Configuration */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="text-purple-400" />
|
||||
<h2 className="text-lg font-semibold">Proveedores de IA</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={addProvider}
|
||||
disabled={settings.aiProviders.length >= 3}
|
||||
className="text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-slate-200 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus size={14} /> Agregar Provider ({settings.aiProviders.length}/3)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{settings.aiProviders.length === 0 && (
|
||||
<div className="p-8 text-center text-slate-500 border border-dashed border-slate-800 rounded-xl">
|
||||
No hay proveedores de IA configurados. Agrega uno para empezar.
|
||||
{/* Telegram Configuration */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="text-cyan-400" />
|
||||
<h2 className="text-lg font-semibold">Telegram Bot</h2>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={testTelegram}
|
||||
disabled={testingTelegram || !settings.telegram.botToken || !settings.telegram.chatId}
|
||||
className="text-xs flex items-center gap-1.5 bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/20 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{testingTelegram ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
|
||||
Probar Envío
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{settings.aiProviders.map((provider, index) => (
|
||||
<div key={provider.id} className="p-6 bg-slate-900 border border-slate-800 rounded-xl relative group">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-300 bg-slate-950 inline-block px-3 py-1 rounded-md border border-slate-800">
|
||||
Provider #{index + 1}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => testAI(provider)}
|
||||
disabled={testingAI === provider.id || !provider.endpoint || !provider.token || !provider.model}
|
||||
className={cn("text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-500/20 px-2 py-1.5 rounded-lg transition disabled:opacity-50", !provider.model && "opacity-50")}
|
||||
title="Verificar conexión"
|
||||
>
|
||||
{testingAI === provider.id ? <Loader2 size={12} className="animate-spin" /> : <LinkIcon size={12} />}
|
||||
Test
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeProvider(provider.id)}
|
||||
className="text-slate-500 hover:text-red-400 transition-colors p-1.5 hover:bg-red-500/10 rounded-lg"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-slate-900 border border-slate-800 rounded-xl">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Key size={12} /> Bot Token
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
|
||||
value={settings.telegram.botToken}
|
||||
onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, botToken: e.target.value } })}
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">El token que te da @BotFather.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<MessageSquare size={12} /> Chat ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="123456789"
|
||||
value={settings.telegram.chatId}
|
||||
onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, chatId: e.target.value } })}
|
||||
className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">Tu ID numérico de Telegram (o el ID del grupo).</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Providers Configuration */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="text-purple-400" />
|
||||
<h2 className="text-lg font-semibold">Proveedores de IA</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={addProvider}
|
||||
disabled={settings.aiProviders.length >= 3}
|
||||
className="text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-slate-200 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus size={14} /> Agregar Provider ({settings.aiProviders.length}/3)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{settings.aiProviders.length === 0 && (
|
||||
<div className="p-8 text-center text-slate-500 border border-dashed border-slate-800 rounded-xl">
|
||||
No hay proveedores de IA configurados. Agrega uno para empezar.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej: MiniMax, Z.ai"
|
||||
value={provider.name}
|
||||
onChange={(e) => updateProvider(provider.id, 'name', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<LinkIcon size={12} /> Endpoint URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://api.example.com/v1"
|
||||
value={provider.endpoint}
|
||||
onChange={(e) => updateProvider(provider.id, 'endpoint', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Lock size={12} /> API Key / Token
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
value={provider.token}
|
||||
onChange={(e) => updateProvider(provider.id, 'token', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Selection */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Box size={12} /> Model
|
||||
</label>
|
||||
{settings.aiProviders.map((provider, index) => (
|
||||
<div key={provider.id} className="p-6 bg-slate-900 border border-slate-800 rounded-xl relative group">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-300 bg-slate-950 inline-block px-3 py-1 rounded-md border border-slate-800">
|
||||
Provider #{index + 1}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => detectModels(provider)}
|
||||
disabled={detectingModels === provider.id || !provider.endpoint || !provider.token}
|
||||
className="text-[10px] flex items-center gap-1 text-cyan-400 hover:text-cyan-300 disabled:opacity-50"
|
||||
onClick={() => testAI(provider)}
|
||||
disabled={testingAI === provider.id || !provider.endpoint || !provider.token || !provider.model}
|
||||
className={cn("text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-500/20 px-2 py-1.5 rounded-lg transition disabled:opacity-50", !provider.model && "opacity-50")}
|
||||
title="Verificar conexión"
|
||||
>
|
||||
{detectingModels === provider.id ? <Loader2 size={10} className="animate-spin" /> : <Sparkles size={10} />}
|
||||
Auto Detectar
|
||||
{testingAI === provider.id ? <Loader2 size={12} className="animate-spin" /> : <LinkIcon size={12} />}
|
||||
Test
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeProvider(provider.id)}
|
||||
className="text-slate-500 hover:text-red-400 transition-colors p-1.5 hover:bg-red-500/10 rounded-lg"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{availableModels[provider.id] ? (
|
||||
<select
|
||||
value={provider.model || ''}
|
||||
onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
|
||||
>
|
||||
<option value="" disabled>Selecciona un modelo</option>
|
||||
{availableModels[provider.id].map(m => (
|
||||
<option key={m} value={m}>{m}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej: gpt-3.5-turbo, glm-4"
|
||||
value={provider.model || ''}
|
||||
onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej: MiniMax, Z.ai"
|
||||
value={provider.name}
|
||||
onChange={(e) => updateProvider(provider.id, 'name', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<LinkIcon size={12} /> Endpoint URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://api.example.com/v1"
|
||||
value={provider.endpoint}
|
||||
onChange={(e) => updateProvider(provider.id, 'endpoint', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Lock size={12} /> API Key / Token
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
value={provider.token}
|
||||
onChange={(e) => updateProvider(provider.id, 'token', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Selection */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<Box size={12} /> Model
|
||||
</label>
|
||||
<button
|
||||
onClick={() => detectModels(provider)}
|
||||
disabled={detectingModels === provider.id || !provider.endpoint || !provider.token}
|
||||
className="text-[10px] flex items-center gap-1 text-cyan-400 hover:text-cyan-300 disabled:opacity-50"
|
||||
>
|
||||
{detectingModels === provider.id ? <Loader2 size={10} className="animate-spin" /> : <Sparkles size={10} />}
|
||||
Auto Detectar
|
||||
</button>
|
||||
</div>
|
||||
{availableModels[provider.id] ? (
|
||||
<select
|
||||
value={provider.model || ''}
|
||||
onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
|
||||
>
|
||||
<option value="" disabled>Selecciona un modelo</option>
|
||||
{availableModels[provider.id].map(m => (
|
||||
<option key={m} value={m}>{m}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej: gpt-3.5-turbo, glm-4"
|
||||
value={provider.model || ''}
|
||||
onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user