Initial commit - Horux Despachos NL
This commit is contained in:
437
apps/web/app/(dashboard)/calendario/page.tsx
Normal file
437
apps/web/app/(dashboard)/calendario/page.tsx
Normal file
@@ -0,0 +1,437 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DashboardShell } from '@/components/layouts/dashboard-shell';
|
||||
import { Card, CardContent, CardHeader, CardTitle, Button, Input, Label } from '@horux/shared-ui';
|
||||
import { useEventos, useCreateEvento, useUpdateEvento, useDeleteEvento } from '@/lib/hooks/use-calendario';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import {
|
||||
Calendar, ChevronLeft, ChevronRight, Check, Clock, FileText,
|
||||
CreditCard, Plus, X, Pencil, Trash2, Lock, Globe, AlertTriangle,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@horux/shared-ui';
|
||||
import type { EventoFiscal } from '@horux/shared';
|
||||
|
||||
const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
|
||||
|
||||
const tipoIcons: Record<string, any> = {
|
||||
declaracion: FileText,
|
||||
pago: CreditCard,
|
||||
obligacion: Clock,
|
||||
informativa: FileText,
|
||||
custom: Calendar,
|
||||
'obligacion-pendiente': Clock,
|
||||
'obligacion-completada': Check,
|
||||
'obligacion-atrasada': AlertTriangle,
|
||||
};
|
||||
|
||||
const tipoColors: Record<string, string> = {
|
||||
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',
|
||||
informativa: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
|
||||
custom: 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200',
|
||||
'obligacion-pendiente': 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
|
||||
'obligacion-completada': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
||||
'obligacion-atrasada': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
||||
};
|
||||
|
||||
interface RecordatorioForm {
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
fechaLimite: string;
|
||||
notas: string;
|
||||
privado: boolean;
|
||||
}
|
||||
|
||||
const emptyForm: RecordatorioForm = {
|
||||
titulo: '',
|
||||
descripcion: '',
|
||||
fechaLimite: '',
|
||||
notas: '',
|
||||
privado: false,
|
||||
};
|
||||
|
||||
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);
|
||||
const createEvento = useCreateEvento();
|
||||
const updateEvento = useUpdateEvento();
|
||||
const deleteEvento = useDeleteEvento();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [form, setForm] = useState<RecordatorioForm>(emptyForm);
|
||||
|
||||
const canEdit = ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor'].includes(user?.role || '');
|
||||
|
||||
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 = (evento: EventoFiscal) => {
|
||||
if (!evento.id) return;
|
||||
if (evento.tipo === 'custom') {
|
||||
updateEvento.mutate({ id: evento.id, data: { completado: !evento.completado } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenCreate = () => {
|
||||
setEditingId(null);
|
||||
const defaultDate = `${año}-${String(mes).padStart(2, '0')}-15`;
|
||||
setForm({ ...emptyForm, fechaLimite: defaultDate });
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (evento: EventoFiscal) => {
|
||||
if (!evento.id || evento.tipo !== 'custom') return;
|
||||
setEditingId(evento.id);
|
||||
setForm({
|
||||
titulo: evento.titulo,
|
||||
descripcion: evento.descripcion || '',
|
||||
fechaLimite: evento.fechaLimite,
|
||||
notas: evento.notas || '',
|
||||
privado: (evento as any).privado ?? false,
|
||||
});
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (editingId) {
|
||||
await updateEvento.mutateAsync({
|
||||
id: editingId,
|
||||
data: { titulo: form.titulo, descripcion: form.descripcion, fechaLimite: form.fechaLimite, notas: form.notas, privado: form.privado } as any,
|
||||
});
|
||||
} else {
|
||||
await createEvento.mutateAsync({
|
||||
titulo: form.titulo,
|
||||
descripcion: form.descripcion,
|
||||
tipo: 'custom',
|
||||
fechaLimite: form.fechaLimite,
|
||||
recurrencia: 'unica',
|
||||
notas: form.notas,
|
||||
privado: form.privado,
|
||||
} as any);
|
||||
}
|
||||
setShowForm(false);
|
||||
setForm(emptyForm);
|
||||
setEditingId(null);
|
||||
} catch {
|
||||
alert('Error al guardar recordatorio');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('¿Eliminar este recordatorio?')) return;
|
||||
try {
|
||||
await deleteEvento.mutateAsync(id);
|
||||
} catch {
|
||||
alert('Error al eliminar');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelForm = () => {
|
||||
setShowForm(false);
|
||||
setForm(emptyForm);
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
// 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 + 'T00:00:00');
|
||||
return fecha.getFullYear() === año && fecha.getMonth() + 1 === mes && fecha.getDate() === day;
|
||||
}) || [];
|
||||
};
|
||||
|
||||
const eventosDelMes = eventos?.filter(e => {
|
||||
const f = new Date(e.fechaLimite + 'T00:00:00');
|
||||
return f.getFullYear() === año && f.getMonth() + 1 === mes;
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<DashboardShell title="Calendario Fiscal">
|
||||
{/* Modal de crear/editar */}
|
||||
{showForm && (
|
||||
<Card className="mb-4">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">
|
||||
{editingId ? 'Editar Recordatorio' : 'Nuevo Recordatorio'}
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="icon" onClick={handleCancelForm}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="titulo">Título</Label>
|
||||
<Input
|
||||
id="titulo"
|
||||
value={form.titulo}
|
||||
onChange={e => setForm({ ...form, titulo: e.target.value })}
|
||||
placeholder="Reunión con contador"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="fechaLimite">Fecha</Label>
|
||||
<Input
|
||||
id="fechaLimite"
|
||||
type="date"
|
||||
value={form.fechaLimite}
|
||||
onChange={e => setForm({ ...form, fechaLimite: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="descripcion">Descripción (opcional)</Label>
|
||||
<Input
|
||||
id="descripcion"
|
||||
value={form.descripcion}
|
||||
onChange={e => setForm({ ...form, descripcion: e.target.value })}
|
||||
placeholder="Revisión de declaración mensual"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notas">Notas (opcional)</Label>
|
||||
<Input
|
||||
id="notas"
|
||||
value={form.notas}
|
||||
onChange={e => setForm({ ...form, notas: e.target.value })}
|
||||
placeholder="Llevar estados de cuenta"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setForm({ ...form, privado: !form.privado })}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-colors',
|
||||
form.privado
|
||||
? 'border-orange-300 bg-orange-50 text-orange-700 dark:border-orange-700 dark:bg-orange-950 dark:text-orange-300'
|
||||
: 'border-green-300 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-950 dark:text-green-300'
|
||||
)}
|
||||
>
|
||||
{form.privado ? <Lock className="h-4 w-4" /> : <Globe className="h-4 w-4" />}
|
||||
{form.privado ? 'Privado' : 'Público'}
|
||||
</button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{form.privado ? 'Solo tú puedes verlo' : 'Visible para todo el equipo'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button type="button" variant="outline" onClick={handleCancelForm}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={createEvento.isPending || updateEvento.isPending}>
|
||||
{editingId
|
||||
? (updateEvento.isPending ? 'Guardando...' : 'Guardar')
|
||||
: (createEvento.isPending ? 'Creando...' : 'Crear Recordatorio')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<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">
|
||||
{canEdit && !showForm && (
|
||||
<Button variant="outline" size="sm" onClick={handleOpenCreate} className="mr-2">
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Recordatorio
|
||||
</Button>
|
||||
)}
|
||||
<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>
|
||||
{/* Leyenda de colores por estado de obligación */}
|
||||
<div className="flex items-center gap-3 flex-wrap text-xs text-muted-foreground mb-3 pb-2 border-b">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded bg-amber-400" />
|
||||
Pendiente
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded bg-green-500" />
|
||||
Completada
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded bg-red-500" />
|
||||
Atrasada
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 ml-2">
|
||||
<span className="h-2.5 w-2.5 rounded bg-violet-400" />
|
||||
Recordatorio custom
|
||||
</span>
|
||||
</div>
|
||||
<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, idx) => {
|
||||
const Icon = tipoIcons[e.tipo] || Calendar;
|
||||
return (
|
||||
<div
|
||||
key={`${e.id}-${idx}`}
|
||||
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',
|
||||
e.tipo === 'custom' && canEdit && 'cursor-pointer'
|
||||
)}
|
||||
title={e.titulo}
|
||||
onClick={() => e.tipo === 'custom' && canEdit && handleOpenEdit(e)}
|
||||
>
|
||||
<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>
|
||||
) : eventosDelMes.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">No hay eventos este mes</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{eventosDelMes.map((evento, idx) => {
|
||||
const Icon = tipoIcons[evento.tipo] || FileText;
|
||||
const isCustom = evento.tipo === 'custom';
|
||||
return (
|
||||
<div
|
||||
key={`${evento.fechaLimite}-${evento.titulo}-${idx}`}
|
||||
className={cn(
|
||||
'p-3 rounded-lg border',
|
||||
evento.completado && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className={cn('p-1.5 rounded', tipoColors[evento.tipo] || 'bg-muted')}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
<h4 className={cn('font-medium text-sm truncate', evento.completado && 'line-through')}>
|
||||
{evento.titulo}
|
||||
</h4>
|
||||
{isCustom && (evento as any).privado && (
|
||||
<Lock className="h-3 w-3 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{evento.descripcion && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5 truncate">{evento.descripcion}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{new Date(evento.fechaLimite + 'T00:00:00').toLocaleDateString('es-MX', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
{isCustom && canEdit && (
|
||||
<div className="flex gap-1 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-7 w-7"
|
||||
onClick={() => handleToggleComplete(evento)}
|
||||
title={evento.completado ? 'Marcar pendiente' : 'Marcar completado'}
|
||||
>
|
||||
<Check className={cn('h-3.5 w-3.5', evento.completado && 'text-green-600')} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-7 w-7"
|
||||
onClick={() => handleOpenEdit(evento)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-7 w-7 text-destructive"
|
||||
onClick={() => evento.id && handleDelete(evento.id)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user