feat(alertas): add alerts CRUD with stats and management UI
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
205
apps/web/app/(dashboard)/calendario/page.tsx
Normal file
205
apps/web/app/(dashboard)/calendario/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DashboardShell } from '@/components/layouts/dashboard-shell';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEventos, useUpdateEvento } from '@/lib/hooks/use-calendario';
|
||||
import { Calendar, ChevronLeft, ChevronRight, Check, Clock, FileText, CreditCard } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
|
||||
|
||||
const tipoIcons = {
|
||||
declaracion: FileText,
|
||||
pago: CreditCard,
|
||||
obligacion: Clock,
|
||||
custom: Calendar,
|
||||
};
|
||||
|
||||
const tipoColors = {
|
||||
declaracion: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
||||
pago: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
||||
obligacion: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
|
||||
custom: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
|
||||
};
|
||||
|
||||
export default function CalendarioPage() {
|
||||
const [año, setAño] = useState(new Date().getFullYear());
|
||||
const [mes, setMes] = useState(new Date().getMonth() + 1);
|
||||
const { data: eventos, isLoading } = useEventos(año, mes);
|
||||
const updateEvento = useUpdateEvento();
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
if (mes === 1) {
|
||||
setMes(12);
|
||||
setAño(año - 1);
|
||||
} else {
|
||||
setMes(mes - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNextMonth = () => {
|
||||
if (mes === 12) {
|
||||
setMes(1);
|
||||
setAño(año + 1);
|
||||
} else {
|
||||
setMes(mes + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleComplete = (id: number, completado: boolean) => {
|
||||
updateEvento.mutate({ id, data: { completado: !completado } });
|
||||
};
|
||||
|
||||
// Generate calendar days
|
||||
const firstDay = new Date(año, mes - 1, 1).getDay();
|
||||
const daysInMonth = new Date(año, mes, 0).getDate();
|
||||
const days = Array.from({ length: 42 }, (_, i) => {
|
||||
const day = i - firstDay + 1;
|
||||
if (day < 1 || day > daysInMonth) return null;
|
||||
return day;
|
||||
});
|
||||
|
||||
const getEventosForDay = (day: number) => {
|
||||
return eventos?.filter(e => {
|
||||
const fecha = new Date(e.fechaLimite);
|
||||
return fecha.getDate() === day;
|
||||
}) || [];
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardShell
|
||||
title="Calendario Fiscal"
|
||||
description="Obligaciones fiscales y eventos importantes"
|
||||
>
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
{/* Calendar */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Calendar className="h-5 w-5" />
|
||||
{meses[mes - 1]} {año}
|
||||
</CardTitle>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="outline" size="icon" onClick={handlePrevMonth}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={handleNextMonth}>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(d => (
|
||||
<div key={d} className="text-center text-sm font-medium text-muted-foreground py-2">
|
||||
{d}
|
||||
</div>
|
||||
))}
|
||||
{days.map((day, i) => {
|
||||
const dayEventos = day ? getEventosForDay(day) : [];
|
||||
const isToday = day === new Date().getDate() && mes === new Date().getMonth() + 1 && año === new Date().getFullYear();
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'min-h-[80px] p-1 border rounded-md',
|
||||
day ? 'bg-background' : 'bg-muted/30',
|
||||
isToday && 'ring-2 ring-primary'
|
||||
)}
|
||||
>
|
||||
{day && (
|
||||
<>
|
||||
<div className={cn('text-sm font-medium', isToday && 'text-primary')}>{day}</div>
|
||||
<div className="space-y-1 mt-1">
|
||||
{dayEventos.slice(0, 2).map(e => {
|
||||
const Icon = tipoIcons[e.tipo];
|
||||
return (
|
||||
<div
|
||||
key={e.id}
|
||||
className={cn(
|
||||
'text-xs px-1 py-0.5 rounded truncate flex items-center gap-1',
|
||||
tipoColors[e.tipo],
|
||||
e.completado && 'opacity-50 line-through'
|
||||
)}
|
||||
title={e.titulo}
|
||||
>
|
||||
<Icon className="h-3 w-3 flex-shrink-0" />
|
||||
<span className="truncate">{e.titulo}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{dayEventos.length > 2 && (
|
||||
<div className="text-xs text-muted-foreground">+{dayEventos.length - 2} más</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Event List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Eventos del Mes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-4 text-muted-foreground">Cargando...</div>
|
||||
) : eventos?.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">No hay eventos este mes</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{eventos?.map(evento => {
|
||||
const Icon = tipoIcons[evento.tipo];
|
||||
return (
|
||||
<div
|
||||
key={evento.id}
|
||||
className={cn(
|
||||
'p-3 rounded-lg border',
|
||||
evento.completado && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className={cn('p-1.5 rounded', tipoColors[evento.tipo])}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className={cn('font-medium text-sm', evento.completado && 'line-through')}>
|
||||
{evento.titulo}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{evento.descripcion}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{new Date(evento.fechaLimite).toLocaleDateString('es-MX', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleToggleComplete(evento.id, evento.completado)}
|
||||
>
|
||||
<Check className={cn('h-4 w-4', evento.completado && 'text-success')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user