Refactor: Implement DashboardLayout, fix mobile nav, and resolve scroll issues
This commit is contained in:
ren
@@ -1,13 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import { Sidebar, Header, MobileNav } from '@/components/layout'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
import { AlertPanel, useAlerts } from '@/components/alerts'
|
||||
import { useSidebar } from '@/app/providers'
|
||||
import { RefreshCw } from 'lucide-react'
|
||||
|
||||
export default function AlertsPage() {
|
||||
const { isOpen, toggle, close } = useSidebar()
|
||||
const { regenerateAlerts, dismissAll, unreadCount } = useAlerts()
|
||||
const { regenerateAlerts, dismissAll } = useAlerts()
|
||||
|
||||
const handleRegenerateAlerts = () => {
|
||||
regenerateAlerts()
|
||||
@@ -18,41 +16,31 @@ export default function AlertsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
<Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
|
||||
<DashboardLayout title="Alertas">
|
||||
<div className="space-y-6">
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={handleRegenerateAlerts}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Regenerar Alertas
|
||||
</button>
|
||||
|
||||
<div className="lg:ml-64 min-h-screen flex flex-col">
|
||||
<Header onMenuClick={toggle} title="Alertas" />
|
||||
<button
|
||||
onClick={handleDismissAll}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500/20"
|
||||
>
|
||||
Limpiar Todas
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<button
|
||||
onClick={handleRegenerateAlerts}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Regenerar Alertas
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleDismissAll}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500/20"
|
||||
>
|
||||
Limpiar Todas
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Alert Panel */}
|
||||
<div className="w-full">
|
||||
<AlertPanel />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<MobileNav unreadAlertsCount={unreadCount} />
|
||||
{/* Alert Panel */}
|
||||
<div className="w-full">
|
||||
<AlertPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
25
app/api/auth/send/route.ts
Normal file
25
app/api/auth/send/route.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import TelegramBot from 'node-telegram-bot-api';
|
||||
import { generateOTP, saveOTP } from '@/lib/otp';
|
||||
|
||||
export async function POST() {
|
||||
const token = process.env.TELEGRAM_BOT_TOKEN;
|
||||
const chatId = process.env.TELEGRAM_CHAT_ID;
|
||||
|
||||
if (!token || !chatId) {
|
||||
console.error("Telegram credentials missing");
|
||||
return NextResponse.json({ error: 'Telegram not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const otp = generateOTP();
|
||||
saveOTP(otp);
|
||||
|
||||
const bot = new TelegramBot(token, { polling: false });
|
||||
try {
|
||||
await bot.sendMessage(chatId, `🔐 Your Login Code: ${otp}`);
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error: any) {
|
||||
console.error('Telegram Error:', error);
|
||||
return NextResponse.json({ error: 'Failed to send message: ' + error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
24
app/api/auth/verify/route.ts
Normal file
24
app/api/auth/verify/route.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { verifyOTP } from '@/lib/otp';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const { code } = await req.json();
|
||||
|
||||
if (verifyOTP(code)) {
|
||||
// Set cookie
|
||||
cookies().set('auth_token', 'true', {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
maxAge: 60 * 60 * 24 * 7, // 1 week
|
||||
path: '/'
|
||||
});
|
||||
return NextResponse.json({ success: true });
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: 'Invalid Code' }, { status: 401 });
|
||||
} catch (error) {
|
||||
return NextResponse.json({ error: 'Invalid Request' }, { status: 400 });
|
||||
}
|
||||
}
|
||||
17
app/api/sync/route.ts
Normal file
17
app/api/sync/route.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { getDatabase, saveDatabase } from '@/lib/server-db';
|
||||
|
||||
export async function GET() {
|
||||
const data = getDatabase();
|
||||
return NextResponse.json(data);
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const body = await req.json();
|
||||
saveDatabase(body);
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
return NextResponse.json({ error: 'Invalid Data' }, { status: 400 });
|
||||
}
|
||||
}
|
||||
@@ -1,27 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { Sidebar, Header, MobileNav } from '@/components/layout'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
import { BudgetSection } from '@/components/budget'
|
||||
import { useSidebar } from '@/app/providers'
|
||||
import { useAlerts } from '@/components/alerts'
|
||||
|
||||
export default function BudgetPage() {
|
||||
const { isOpen, close, toggle } = useSidebar()
|
||||
const { unreadCount } = useAlerts()
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-950">
|
||||
<Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
|
||||
|
||||
<div className="flex-1 flex flex-col min-h-screen">
|
||||
<Header onMenuClick={toggle} title="Presupuesto" />
|
||||
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
|
||||
<BudgetSection />
|
||||
</main>
|
||||
|
||||
<MobileNav unreadAlertsCount={unreadCount} />
|
||||
</div>
|
||||
</div>
|
||||
<DashboardLayout title="Presupuesto">
|
||||
<BudgetSection />
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,27 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { Sidebar, Header, MobileNav } from '@/components/layout';
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout';
|
||||
import { CardSection } from '@/components/cards';
|
||||
import { useSidebar } from '@/app/providers';
|
||||
import { useAlerts } from '@/components/alerts';
|
||||
|
||||
export default function CardsPage() {
|
||||
const { isOpen, toggle, close } = useSidebar();
|
||||
const { unreadCount } = useAlerts();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
<Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
|
||||
|
||||
<div className="lg:ml-64 min-h-screen flex flex-col">
|
||||
<Header onMenuClick={toggle} title="Tarjetas de Crédito" />
|
||||
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
|
||||
<CardSection />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<MobileNav unreadAlertsCount={unreadCount} />
|
||||
</div>
|
||||
<DashboardLayout title="Tarjetas de Crédito">
|
||||
<CardSection />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { Sidebar, Header, MobileNav } from '@/components/layout'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
import { DebtSection } from '@/components/debts'
|
||||
import { useSidebar } from '@/app/providers'
|
||||
import { useAlerts } from '@/components/alerts'
|
||||
|
||||
export default function DebtsPage() {
|
||||
const { isOpen, close, open } = useSidebar()
|
||||
const { unreadCount } = useAlerts()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
{/* Sidebar */}
|
||||
<Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
|
||||
|
||||
{/* Main content */}
|
||||
<div className="lg:ml-64 min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<Header onMenuClick={open} title="Deudas" />
|
||||
|
||||
{/* Page content */}
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
|
||||
<DebtSection />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<MobileNav unreadAlertsCount={unreadCount} />
|
||||
</div>
|
||||
<DashboardLayout title="Deudas">
|
||||
<DebtSection />
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
165
app/incomes/page.tsx
Normal file
165
app/incomes/page.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useFinanzasStore } from '@/lib/store'
|
||||
import { Plus, Trash2, TrendingUp, DollarSign } from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
|
||||
export default function IncomesPage() {
|
||||
const incomes = useFinanzasStore((state) => state.incomes) || []
|
||||
const addIncome = useFinanzasStore((state) => state.addIncome)
|
||||
const removeIncome = useFinanzasStore((state) => state.removeIncome)
|
||||
|
||||
const [newIncome, setNewIncome] = useState({
|
||||
amount: '',
|
||||
description: '',
|
||||
category: 'salary' as const,
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!newIncome.amount || !newIncome.description) return
|
||||
|
||||
addIncome({
|
||||
amount: parseFloat(newIncome.amount),
|
||||
description: newIncome.description,
|
||||
category: newIncome.category,
|
||||
date: new Date().toISOString(),
|
||||
})
|
||||
setNewIncome({ amount: '', description: '', category: 'salary' })
|
||||
}
|
||||
|
||||
const totalIncomes = incomes.reduce((acc, curr) => acc + curr.amount, 0)
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Ingresos">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-3xl font-bold flex items-center gap-2 text-white">
|
||||
<TrendingUp className="text-green-500" /> Ingresos
|
||||
</h2>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-400">Total Acumulado</p>
|
||||
<p className="text-2xl font-bold text-green-400">
|
||||
${totalIncomes.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Formulario */}
|
||||
<div className="bg-slate-800 border border-slate-700 rounded-xl md:col-span-1 h-fit overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-700">
|
||||
<h3 className="font-semibold text-lg text-white">Nuevo Ingreso</h3>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-gray-400 block mb-2">Descripción</label>
|
||||
<input
|
||||
placeholder="Ej. Pago Freelance"
|
||||
value={newIncome.description}
|
||||
onChange={(e) =>
|
||||
setNewIncome({ ...newIncome, description: e.target.value })
|
||||
}
|
||||
className="w-full bg-slate-700 border-slate-600 border rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-400 block mb-2">Monto</label>
|
||||
<div className="relative">
|
||||
<DollarSign className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={newIncome.amount}
|
||||
onChange={(e) =>
|
||||
setNewIncome({ ...newIncome, amount: e.target.value })
|
||||
}
|
||||
className="w-full pl-9 bg-slate-700 border-slate-600 border rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-400 block mb-2">Categoría</label>
|
||||
<select
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
value={newIncome.category}
|
||||
onChange={(e) =>
|
||||
setNewIncome({
|
||||
...newIncome,
|
||||
category: e.target.value as any,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="salary">Salario</option>
|
||||
<option value="freelance">Freelance</option>
|
||||
<option value="business">Negocio</option>
|
||||
<option value="gift">Regalo</option>
|
||||
<option value="other">Otro</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> Agregar Ingreso
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista */}
|
||||
<div className="bg-slate-800 border border-slate-700 rounded-xl md:col-span-2 overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-700">
|
||||
<h3 className="font-semibold text-lg text-white">Historial de Ingresos</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{incomes.length === 0 ? (
|
||||
<p className="text-center text-gray-500 py-8">
|
||||
No hay ingresos registrados aún.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{incomes
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
)
|
||||
.map((income) => (
|
||||
<div
|
||||
key={income.id}
|
||||
className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg border border-slate-700 hover:border-slate-600 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<p className="font-semibold text-white">
|
||||
{income.description}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 capitalize">
|
||||
{income.category} •{' '}
|
||||
{format(new Date(income.date), "d 'de' MMMM", {
|
||||
locale: es,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-emerald-400 font-mono font-bold">
|
||||
+${income.amount.toLocaleString()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeIncome(income.id)}
|
||||
className="text-slate-500 hover:text-red-400 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
115
app/login/page.tsx
Normal file
115
app/login/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Lock, Send, Loader2 } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [step, setStep] = useState<'initial' | 'verify'>('initial');
|
||||
const [code, setCode] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const router = useRouter();
|
||||
|
||||
const sendCode = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await fetch('/api/auth/send', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Failed to send code');
|
||||
setStep('verify');
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyCode = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await fetch('/api/auth/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Invalid code');
|
||||
|
||||
// Redirect
|
||||
router.push('/');
|
||||
router.refresh();
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-900 text-white p-4">
|
||||
<div className="w-full max-w-md bg-gray-800 rounded-lg shadow-xl p-8 border border-gray-700">
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
<div className="bg-blue-600 p-3 rounded-full mb-4">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">Secure Access</h1>
|
||||
<p className="text-gray-400 mt-2 text-center">
|
||||
Finanzas Personales
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-900/50 border border-red-500 text-red-200 p-3 rounded mb-4 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'initial' ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-300 text-center text-sm">
|
||||
Click below to receive a login code via Telegram.
|
||||
</p>
|
||||
<button
|
||||
onClick={sendCode}
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <Send size={20} />}
|
||||
Send Code to Telegram
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-300 text-center text-sm">
|
||||
Enter the 6-digit code sent to your Telegram.
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="123456"
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-center text-2xl tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
maxLength={6}
|
||||
/>
|
||||
<button
|
||||
onClick={verifyCode}
|
||||
disabled={loading || code.length < 4}
|
||||
className="w-full bg-green-600 hover:bg-green-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : 'Verify & Login'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep('initial')}
|
||||
className="w-full text-gray-400 hover:text-white text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
app/page.tsx
100
app/page.tsx
@@ -1,25 +1,21 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Sidebar, Header, MobileNav } from '@/components/layout'
|
||||
import { SummarySection, QuickActions, RecentActivity } from '@/components/dashboard'
|
||||
import { useSidebar } from '@/app/providers'
|
||||
import { useFinanzasStore } from '@/lib/store'
|
||||
import { AlertBanner, useAlerts } from '@/components/alerts'
|
||||
import { AddDebtModal } from '@/components/modals/AddDebtModal'
|
||||
import { AddCardModal } from '@/components/modals/AddCardModal'
|
||||
import { AddPaymentModal } from '@/components/modals/AddPaymentModal'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
|
||||
export default function Home() {
|
||||
// Sidebar control
|
||||
const sidebar = useSidebar()
|
||||
|
||||
// Datos del store
|
||||
const markAlertAsRead = useFinanzasStore((state) => state.markAlertAsRead)
|
||||
const deleteAlert = useFinanzasStore((state) => state.deleteAlert)
|
||||
|
||||
// Alertas
|
||||
const { unreadAlerts, unreadCount, regenerateAlerts } = useAlerts()
|
||||
const { unreadAlerts, regenerateAlerts } = useAlerts()
|
||||
|
||||
// Estados locales para modales
|
||||
const [isAddDebtModalOpen, setIsAddDebtModalOpen] = useState(false)
|
||||
@@ -31,23 +27,6 @@ export default function Home() {
|
||||
regenerateAlerts()
|
||||
}, [regenerateAlerts])
|
||||
|
||||
// Efecto para manejar resize de ventana
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
sidebar.open()
|
||||
} else {
|
||||
sidebar.close()
|
||||
}
|
||||
}
|
||||
|
||||
// Estado inicial
|
||||
handleResize()
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [sidebar])
|
||||
|
||||
// Handlers para modales
|
||||
const handleAddDebt = () => {
|
||||
setIsAddDebtModalOpen(true)
|
||||
@@ -65,54 +44,35 @@ export default function Home() {
|
||||
const topAlerts = unreadAlerts.slice(0, 3)
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-950">
|
||||
{/* Sidebar */}
|
||||
<Sidebar
|
||||
isOpen={sidebar.isOpen}
|
||||
onClose={sidebar.close}
|
||||
unreadAlertsCount={unreadCount}
|
||||
/>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex flex-1 flex-col lg:ml-0">
|
||||
{/* Header */}
|
||||
<Header onMenuClick={sidebar.toggle} title="Dashboard" />
|
||||
|
||||
{/* Main content area */}
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
|
||||
<div className="mx-auto max-w-7xl space-y-6">
|
||||
{/* Alertas destacadas */}
|
||||
{topAlerts.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{topAlerts.map((alert) => (
|
||||
<AlertBanner
|
||||
key={alert.id}
|
||||
alert={alert}
|
||||
onDismiss={() => deleteAlert(alert.id)}
|
||||
onMarkRead={() => markAlertAsRead(alert.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sección de resumen */}
|
||||
<SummarySection />
|
||||
|
||||
{/* Acciones rápidas */}
|
||||
<QuickActions
|
||||
onAddDebt={handleAddDebt}
|
||||
onAddCard={handleAddCard}
|
||||
onAddPayment={handleAddPayment}
|
||||
/>
|
||||
|
||||
{/* Actividad reciente */}
|
||||
<RecentActivity limit={5} />
|
||||
<DashboardLayout title="Dashboard">
|
||||
<div className="space-y-6">
|
||||
{/* Alertas destacadas */}
|
||||
{topAlerts.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{topAlerts.map((alert) => (
|
||||
<AlertBanner
|
||||
key={alert.id}
|
||||
alert={alert}
|
||||
onDismiss={() => deleteAlert(alert.id)}
|
||||
onMarkRead={() => markAlertAsRead(alert.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile navigation */}
|
||||
<MobileNav unreadAlertsCount={unreadCount} />
|
||||
{/* Sección de resumen */}
|
||||
<SummarySection />
|
||||
|
||||
{/* Acciones rápidas */}
|
||||
<QuickActions
|
||||
onAddDebt={handleAddDebt}
|
||||
onAddCard={handleAddCard}
|
||||
onAddPayment={handleAddPayment}
|
||||
/>
|
||||
|
||||
{/* Actividad reciente */}
|
||||
<RecentActivity limit={5} />
|
||||
</div>
|
||||
|
||||
{/* Modales */}
|
||||
<AddDebtModal
|
||||
@@ -129,6 +89,6 @@ export default function Home() {
|
||||
isOpen={isAddPaymentModalOpen}
|
||||
onClose={() => setIsAddPaymentModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useState, ReactNode } from "react";
|
||||
import { DataSync } from "@/components/DataSync";
|
||||
|
||||
interface SidebarContextType {
|
||||
isOpen: boolean;
|
||||
@@ -27,6 +28,7 @@ export function Providers({ children }: { children: ReactNode }) {
|
||||
open: openSidebar,
|
||||
}}
|
||||
>
|
||||
<DataSync />
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
|
||||
@@ -1,142 +1,145 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useFinanzasStore } from '@/lib/store'
|
||||
import { predictNextBill, calculateTrend } from '@/lib/predictions'
|
||||
import { formatCurrency } from '@/lib/utils'
|
||||
import { Zap, Droplets, Flame, Wifi, TrendingUp, TrendingDown, Plus, History } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { AddServiceModal } from '@/components/modals/AddServiceModal'
|
||||
|
||||
const SERVICES = [
|
||||
{ id: 'electricity', label: 'Luz (Electricidad)', icon: Zap, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
|
||||
{ id: 'water', label: 'Agua', icon: Droplets, color: 'text-blue-400', bg: 'bg-blue-400/10' },
|
||||
{ id: 'gas', label: 'Gas', icon: Flame, color: 'text-orange-400', bg: 'bg-orange-400/10' },
|
||||
{ id: 'internet', label: 'Internet', icon: Wifi, color: 'text-cyan-400', bg: 'bg-cyan-400/10' },
|
||||
]
|
||||
|
||||
export default function ServicesPage() {
|
||||
const serviceBills = useFinanzasStore((state) => state.serviceBills)
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Servicios y Predicciones</h1>
|
||||
<p className="text-slate-400 text-sm">Gestiona tus consumos de Luz, Agua y Gas.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsAddModalOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-cyan-500 hover:bg-cyan-400 text-white rounded-lg transition shadow-lg shadow-cyan-500/20 font-medium self-start sm:self-auto"
|
||||
>
|
||||
<Plus size={18} /> Nuevo Pago
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Service Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{SERVICES.map((service) => {
|
||||
const Icon = service.icon
|
||||
const prediction = predictNextBill(serviceBills, service.id as any)
|
||||
const trend = calculateTrend(serviceBills, service.id as any)
|
||||
const lastBill = serviceBills
|
||||
.filter(b => b.type === service.id)
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())[0]
|
||||
|
||||
return (
|
||||
<div key={service.id} className="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={cn("p-2 rounded-lg", service.bg)}>
|
||||
<Icon className={cn("w-6 h-6", service.color)} />
|
||||
</div>
|
||||
{trend !== 0 && (
|
||||
<div className={cn("flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full", trend > 0 ? "bg-red-500/10 text-red-400" : "bg-emerald-500/10 text-emerald-400")}>
|
||||
{trend > 0 ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
|
||||
{Math.abs(trend).toFixed(0)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-slate-400 text-sm font-medium">{service.label}</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h3 className="text-2xl font-bold text-white mt-1">
|
||||
{formatCurrency(prediction || (lastBill?.amount ?? 0))}
|
||||
</h3>
|
||||
{prediction > 0 && <span className="text-xs text-slate-500 font-mono">(est.)</span>}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
{lastBill
|
||||
? `Último: ${formatCurrency(lastBill.amount)}`
|
||||
: 'Sin historial'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* History List */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
|
||||
<div className="p-5 border-b border-slate-800 flex items-center gap-2">
|
||||
<History size={18} className="text-slate-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Historial de Pagos</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-800">
|
||||
{serviceBills.length === 0 ? (
|
||||
<div className="p-8 text-center text-slate-500 text-sm">
|
||||
No hay facturas registradas. Comienza agregando una para ver predicciones.
|
||||
</div>
|
||||
) : (
|
||||
serviceBills
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.map((bill) => {
|
||||
const service = SERVICES.find(s => s.id === bill.type)
|
||||
const Icon = service?.icon || Zap
|
||||
|
||||
return (
|
||||
<div key={bill.id} className="p-4 flex items-center justify-between hover:bg-slate-800/50 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn("p-2 rounded-lg", service?.bg || 'bg-slate-800')}>
|
||||
<Icon className={cn("w-5 h-5", service?.color || 'text-slate-400')} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium capitalize">{service?.label || bill.type}</p>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
|
||||
<p className="text-xs text-slate-500 capitalize">{new Date(bill.date).toLocaleDateString('es-AR', { dateStyle: 'long' })}</p>
|
||||
{bill.usage && (
|
||||
<>
|
||||
<span className="hidden sm:inline text-slate-700">•</span>
|
||||
<p className="text-xs text-slate-400">
|
||||
Consumo: <span className="text-slate-300 font-medium">{bill.usage} {bill.unit}</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-white font-mono font-medium">{formatCurrency(bill.amount)}</p>
|
||||
<div className="flex flex-col items-end">
|
||||
<p className="text-xs text-slate-500 uppercase">{bill.period}</p>
|
||||
{bill.usage && bill.amount && (
|
||||
<p className="text-[10px] text-cyan-500/80 font-mono">
|
||||
{formatCurrency(bill.amount / bill.usage)} / {bill.unit}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddServiceModal isOpen={isAddModalOpen} onClose={() => setIsAddModalOpen(false)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useFinanzasStore } from '@/lib/store'
|
||||
import { predictNextBill, calculateTrend } from '@/lib/predictions'
|
||||
import { formatCurrency } from '@/lib/utils'
|
||||
import { Zap, Droplets, Flame, Wifi, TrendingUp, TrendingDown, Plus, History } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { AddServiceModal } from '@/components/modals/AddServiceModal'
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout'
|
||||
|
||||
const SERVICES = [
|
||||
{ id: 'electricity', label: 'Luz (Electricidad)', icon: Zap, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
|
||||
{ id: 'water', label: 'Agua', icon: Droplets, color: 'text-blue-400', bg: 'bg-blue-400/10' },
|
||||
{ id: 'gas', label: 'Gas', icon: Flame, color: 'text-orange-400', bg: 'bg-orange-400/10' },
|
||||
{ id: 'internet', label: 'Internet', icon: Wifi, color: 'text-cyan-400', bg: 'bg-cyan-400/10' },
|
||||
]
|
||||
|
||||
export default function ServicesPage() {
|
||||
const serviceBills = useFinanzasStore((state) => state.serviceBills)
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Servicios">
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Servicios y Predicciones</h2>
|
||||
<p className="text-slate-400 text-sm">Gestiona tus consumos de Luz, Agua y Gas.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsAddModalOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-cyan-500 hover:bg-cyan-400 text-white rounded-lg transition shadow-lg shadow-cyan-500/20 font-medium self-start sm:self-auto"
|
||||
>
|
||||
<Plus size={18} /> Nuevo Pago
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Service Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{SERVICES.map((service) => {
|
||||
const Icon = service.icon
|
||||
const prediction = predictNextBill(serviceBills, service.id as any)
|
||||
const trend = calculateTrend(serviceBills, service.id as any)
|
||||
const lastBill = serviceBills
|
||||
.filter(b => b.type === service.id)
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())[0]
|
||||
|
||||
return (
|
||||
<div key={service.id} className="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={cn("p-2 rounded-lg", service.bg)}>
|
||||
<Icon className={cn("w-6 h-6", service.color)} />
|
||||
</div>
|
||||
{trend !== 0 && (
|
||||
<div className={cn("flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full", trend > 0 ? "bg-red-500/10 text-red-400" : "bg-emerald-500/10 text-emerald-400")}>
|
||||
{trend > 0 ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
|
||||
{Math.abs(trend).toFixed(0)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-slate-400 text-sm font-medium">{service.label}</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h3 className="text-2xl font-bold text-white mt-1">
|
||||
{formatCurrency(prediction || (lastBill?.amount ?? 0))}
|
||||
</h3>
|
||||
{prediction > 0 && <span className="text-xs text-slate-500 font-mono">(est.)</span>}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
{lastBill
|
||||
? `Último: ${formatCurrency(lastBill.amount)}`
|
||||
: 'Sin historial'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* History List */}
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
|
||||
<div className="p-5 border-b border-slate-800 flex items-center gap-2">
|
||||
<History size={18} className="text-slate-400" />
|
||||
<h3 className="text-lg font-semibold text-white">Historial de Pagos</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-800">
|
||||
{serviceBills.length === 0 ? (
|
||||
<div className="p-8 text-center text-slate-500 text-sm">
|
||||
No hay facturas registradas. Comienza agregando una para ver predicciones.
|
||||
</div>
|
||||
) : (
|
||||
serviceBills
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.map((bill) => {
|
||||
const service = SERVICES.find(s => s.id === bill.type)
|
||||
const Icon = service?.icon || Zap
|
||||
|
||||
return (
|
||||
<div key={bill.id} className="p-4 flex items-center justify-between hover:bg-slate-800/50 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn("p-2 rounded-lg", service?.bg || 'bg-slate-800')}>
|
||||
<Icon className={cn("w-5 h-5", service?.color || 'text-slate-400')} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium capitalize">{service?.label || bill.type}</p>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
|
||||
<p className="text-xs text-slate-500 capitalize">{new Date(bill.date).toLocaleDateString('es-AR', { dateStyle: 'long' })}</p>
|
||||
{bill.usage && (
|
||||
<>
|
||||
<span className="hidden sm:inline text-slate-700">•</span>
|
||||
<p className="text-xs text-slate-400">
|
||||
Consumo: <span className="text-slate-300 font-medium">{bill.usage} {bill.unit}</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-white font-mono font-medium">{formatCurrency(bill.amount)}</p>
|
||||
<div className="flex flex-col items-end">
|
||||
<p className="text-xs text-slate-500 uppercase">{bill.period}</p>
|
||||
{bill.usage && bill.amount && (
|
||||
<p className="text-[10px] text-cyan-500/80 font-mono">
|
||||
{formatCurrency(bill.amount / bill.usage)} / {bill.unit}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddServiceModal isOpen={isAddModalOpen} onClose={() => setIsAddModalOpen(false)} />
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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