[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sistema de Citas - Alcaldía", description: "Sistema de gestión de citas con el alcalde", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { return (

Alcaldía Municipal

Sistema de Citas con el Alcalde

Agenda tu cita con el alcalde de manera fácil y rápida, sin necesidad de acudir presencialmente a la alcaldía.

Solicitar Cita Agenda una cita con el alcalde

Selecciona fecha y hora disponible para ser atendido por el alcalde según su disponibilidad.

Consultar Cita Verifica el estado de tu cita

Consulta los detalles de tu cita, como fecha, hora y estado actual.

Reagendar Cita Cambia la fecha u hora de tu cita

Si no puedes asistir, solicita un cambio de fecha u hora para tu cita ya agendada.

) } [V0_FILE]typescriptreact:file="app/registro/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" export default function RegistroPage() { const { toast } = useToast() const [formData, setFormData] = useState({ nombre: "", apellido: "", cedula: "", telefono: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Aquí iría la lógica para enviar los datos al backend console.log("Datos enviados:", formData) toast({ title: "Registro exitoso", description: "Tus datos han sido guardados correctamente.", }) // Resetear el formulario setFormData({ nombre: "", apellido: "", cedula: "", telefono: "", }) } return (

Alcaldía Municipal

Registro de Ciudadano Ingresa tus datos personales para agendar citas con el alcalde

) } [V0_FILE]typescriptreact:file="app/solicitar-cita/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { useToast } from "@/hooks/use-toast" import { format } from "date-fns" import { es } from "date-fns/locale" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" // Horarios disponibles simulados const HORARIOS_DISPONIBLES = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] export default function SolicitarCitaPage() { const { toast } = useToast() const [cedula, setCedula] = useState("") const [date, setDate] = useState(undefined) const [horario, setHorario] = useState(undefined) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!date || !horario) { toast({ title: "Error", description: "Debes seleccionar una fecha y hora para la cita.", variant: "destructive", }) return } // Aquí iría la lógica para enviar los datos al backend console.log("Cita solicitada:", { cedula, fecha: date, hora: horario }) toast({ title: "Cita agendada", description: `Tu cita ha sido agendada para el ${format(date, "PPP", { locale: es })} a las ${horario}.`, }) // Resetear el formulario setCedula("") setDate(undefined) setHorario(undefined) } return (

Alcaldía Municipal

Solicitar Cita Selecciona fecha y hora disponible para tu cita con el alcalde

Cédula setCedula(e.target.value)} required />

Fecha de la cita { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} />

Hora de la cita {HORARIOS_DISPONIBLES.map((hora) => (

{hora}

))}

) } [V0_FILE]typescriptreact:file="app/consultar-cita/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { Badge } from "@/components/ui/badge" // Datos de cita simulados const CITA_SIMULADA = { id: "123456", nombre: "Juan Pérez", cedula: "1234567890", fecha: "2025-05-20", hora: "10:00", estado: "confirmada", // confirmada, cancelada, reprogramada } export default function ConsultarCitaPage() { const { toast } = useToast() const [cedula, setCedula] = useState("") const [cita, setCita] = useState(null) const [loading, setLoading] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setLoading(true) // Simulación de consulta a la API setTimeout(() => { if (cedula === CITA_SIMULADA.cedula) { setCita(CITA_SIMULADA) } else { toast({ title: "No se encontraron citas", description: "No hay citas registradas con la cédula proporcionada.", variant: "destructive", }) setCita(null) } setLoading(false) }, 1000) } const getEstadoBadge = (estado: string) => { switch (estado) { case "confirmada": return Confirmada case "cancelada": return Cancelada case "reprogramada": return Reprogramada default: return Pendiente } } return (

Alcaldía Municipal

Consultar Cita Ingresa tu número de cédula para consultar el estado de tu cita {cita && (

Detalles de la Cita

Nombre: {cita.nombre}

Cédula: {cita.cedula}

Fecha: {new Date(cita.fecha).toLocaleDateString()}

Hora: {cita.hora}

Estado: {getEstadoBadge(cita.estado)}

)} {cita && ( )}

) } [V0_FILE]typescriptreact:file="app/reagendar-cita/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { useToast } from "@/hooks/use-toast" import { format } from "date-fns" import { es } from "date-fns/locale" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" // Horarios disponibles simulados const HORARIOS_DISPONIBLES = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] // Datos de cita simulados const CITA_SIMULADA = { id: "123456", nombre: "Juan Pérez", cedula: "1234567890", fecha: "2025-05-20", hora: "10:00", estado: "confirmada", } export default function ReagendarCitaPage() { const { toast } = useToast() const [cedula, setCedula] = useState("") const [cita, setCita] = useState(null) const [loading, setLoading] = useState(false) const [date, setDate] = useState(undefined) const [horario, setHorario] = useState(undefined) const [step, setStep] = useState(1) const handleBuscarCita = (e: React.FormEvent) => { e.preventDefault() setLoading(true) // Simulación de consulta a la API setTimeout(() => { if (cedula === CITA_SIMULADA.cedula) { setCita(CITA_SIMULADA) setStep(2) } else { toast({ title: "No se encontraron citas", description: "No hay citas registradas con la cédula proporcionada.", variant: "destructive", }) setCita(null) } setLoading(false) }, 1000) } const handleReagendar = (e: React.FormEvent) => { e.preventDefault() if (!date || !horario) { toast({ title: "Error", description: "Debes seleccionar una fecha y hora para la cita.", variant: "destructive", }) return } // Aquí iría la lógica para enviar los datos al backend console.log("Cita reagendada:", { id: cita?.id, cedula, fechaAnterior: cita?.fecha, horaAnterior: cita?.hora, nuevaFecha: date, nuevaHora: horario, }) toast({ title: "Cita reagendada", description: `Tu cita ha sido reagendada para el ${format(date, "PPP", { locale: es })} a las ${horario}.`, }) // Resetear el formulario y volver al paso 1 setCedula("") setCita(null) setDate(undefined) setHorario(undefined) setStep(1) } return (

Alcaldía Municipal

Reagendar Cita {step === 1 ? "Ingresa tu número de cédula para buscar tu cita" : "Selecciona una nueva fecha y hora para tu cita"} {step === 1 ? ( ) : (

Cita Actual

Fecha: {new Date(cita?.fecha || "").toLocaleDateString()}

Hora: {cita?.hora}

Nueva fecha de la cita { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} />

Nueva hora de la cita {HORARIOS_DISPONIBLES.map((hora) => (

{hora}

))}

)}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CalendarDays, Clock, Users, Calendar } from "lucide-react" export default function AdminPage() { return (

Alcaldía Municipal

Secretaria

Panel de Administración

Ver Todas las Citas Visualiza todas las citas programadas con el alcalde

Accede a la lista completa de citas, filtra por fecha, estado o cédula del ciudadano.

Asignar Cita Registra una nueva cita manualmente

Crea una cita para un ciudadano que se acerca directamente a la oficina.

Gestionar Disponibilidad Configura los horarios de atención del alcalde

Define los días y horas en que el alcalde puede atender a los ciudadanos.

Ciudadanos Registrados Consulta la lista de ciudadanos registrados

Accede a la información de todos los ciudadanos que han solicitado citas.

) } [V0_FILE]typescriptreact:file="app/admin/citas/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { format } from "date-fns" import { es } from "date-fns/locale" import { CalendarIcon, Search, Edit, Trash2 } from "lucide-react" import { cn } from "@/lib/utils" import { useToast } from "@/hooks/use-toast" // Datos de citas simulados const CITAS_SIMULADAS = [ { id: "1", nombre: "Juan Pérez", cedula: "1234567890", fecha: "2025-05-20", hora: "10:00", estado: "confirmada", }, { id: "2", nombre: "María López", cedula: "0987654321", fecha: "2025-05-21", hora: "14:00", estado: "confirmada", }, { id: "3", nombre: "Carlos Rodríguez", cedula: "5678901234", fecha: "2025-05-22", hora: "09:00", estado: "reprogramada", }, { id: "4", nombre: "Ana Martínez", cedula: "4321098765", fecha: "2025-05-23", hora: "16:00", estado: "cancelada", }, ] export default function CitasAdminPage() { const { toast } = useToast() const [citas, setCitas] = useState(CITAS_SIMULADAS) const [filtros, setFiltros] = useState({ cedula: "", fecha: undefined as Date | undefined, estado: "", }) const getEstadoBadge = (estado: string) => { switch (estado) { case "confirmada": return Confirmada case "cancelada": return Cancelada case "reprogramada": return Reprogramada default: return Pendiente } } const handleFiltrar = () => { let citasFiltradas = CITAS_SIMULADAS if (filtros.cedula) { citasFiltradas = citasFiltradas.filter((cita) => cita.cedula.includes(filtros.cedula)) } if (filtros.fecha) { const fechaFiltro = format(filtros.fecha, "yyyy-MM-dd") citasFiltradas = citasFiltradas.filter((cita) => cita.fecha === fechaFiltro) } if (filtros.estado) { citasFiltradas = citasFiltradas.filter((cita) => cita.estado === filtros.estado) } setCitas(citasFiltradas) } const handleReset = () => { setFiltros({ cedula: "", fecha: undefined, estado: "", }) setCitas(CITAS_SIMULADAS) } const handleEliminarCita = (id: string) => { if (confirm("¿Estás seguro de que deseas eliminar esta cita?")) { setCitas(citas.filter((cita) => cita.id !== id)) toast({ title: "Cita eliminada", description: "La cita ha sido eliminada correctamente.", }) } } return (

Alcaldía Municipal

Secretaria

Gestión de Citas

Filtros

Cédula

setFiltros({ ...filtros, cedula: e.target.value })} />

Fecha setFiltros({ ...filtros, fecha: date })} initialFocus />

Estado

Nombre Cédula Fecha Hora Estado Acciones {citas.length > 0 ? ( citas.map((cita) => ( {cita.nombre} {cita.cedula} {new Date(cita.fecha).toLocaleDateString()} {cita.hora} {getEstadoBadge(cita.estado)}

)) ) : ( No se encontraron citas con los filtros seleccionados )}

) } [V0_FILE]typescriptreact:file="app/admin/citas/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/asignar-cita/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { useToast } from "@/hooks/use-toast" import { format } from "date-fns" import { es } from "date-fns/locale" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" // Horarios disponibles simulados const HORARIOS_DISPONIBLES = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] export default function AsignarCitaPage() { const { toast } = useToast() const [formData, setFormData] = useState({ nombre: "", apellido: "", cedula: "", telefono: "", }) const [date, setDate] = useState(undefined) const [horario, setHorario] = useState(undefined) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!date || !horario) { toast({ title: "Error", description: "Debes seleccionar una fecha y hora para la cita.", variant: "destructive", }) return } // Aquí iría la lógica para enviar los datos al backend console.log("Cita asignada:", { ...formData, fecha: date, hora: horario, }) toast({ title: "Cita asignada", description: `La cita ha sido asignada para el ${format(date, "PPP", { locale: es })} a las ${horario}.`, }) // Resetear el formulario setFormData({ nombre: "", apellido: "", cedula: "", telefono: "", }) setDate(undefined) setHorario(undefined) } return (

Alcaldía Municipal

Secretaria

Asignar Cita Manualmente Registra una cita para un ciudadano que se acerca directamente a la oficina

Nombre

Apellido

Cédula

Teléfono

Fecha de la cita { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} />

Hora de la cita {HORARIOS_DISPONIBLES.map((hora) => (

{hora}

))}

) } [V0_FILE]typescriptreact:file="app/admin/disponibilidad/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Plus, Trash2 } from "lucide-react" // Horarios disponibles const HORAS = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] // Días de la semana const DIAS = [ { id: "lunes", label: "Lunes" }, { id: "martes", label: "Martes" }, { id: "miercoles", label: "Miércoles" }, { id: "jueves", label: "Jueves" }, { id: "viernes", label: "Viernes" }, ] // Disponibilidad simulada const DISPONIBILIDAD_INICIAL = [ { id: "1", dia: "lunes", horaInicio: "08:00", horaFin: "12:00" }, { id: "2", dia: "lunes", horaInicio: "14:00", horaFin: "17:00" }, { id: "3", dia: "martes", horaInicio: "09:00", horaFin: "12:00" }, { id: "4", dia: "martes", horaInicio: "14:00", horaFin: "18:00" }, { id: "5", dia: "miercoles", horaInicio: "08:00", horaFin: "12:00" }, { id: "6", dia: "jueves", horaInicio: "14:00", horaFin: "17:00" }, { id: "7", dia: "viernes", horaInicio: "08:00", horaFin: "13:00" }, ] export default function DisponibilidadPage() { const { toast } = useToast() const [disponibilidad, setDisponibilidad] = useState(DISPONIBILIDAD_INICIAL) const [seleccion, setSeleccion] = useState>>({ lunes: {}, martes: {}, miercoles: {}, jueves: {}, viernes: {}, }) // Inicializar la selección con los datos existentes useState(() => { const nuevaSeleccion = { ...seleccion } disponibilidad.forEach((bloque) => { const horaInicio = HORAS.indexOf(bloque.horaInicio) const horaFin = HORAS.indexOf(bloque.horaFin) if (horaInicio >= 0 && horaFin >= 0) { for (let i = horaInicio; i <= horaFin; i++) { if (HORAS[i]) { nuevaSeleccion[bloque.dia][HORAS[i]] = true } } } }) setSeleccion(nuevaSeleccion) }) const handleToggleHora = (dia: string, hora: string) => { setSeleccion((prev) => ({ ...prev, [dia]: { ...prev[dia], [hora]: !prev[dia][hora], }, })) } const handleGuardar = () => { // Aquí iría la lógica para enviar los datos al backend console.log("Disponibilidad guardada:", seleccion) toast({ title: "Disponibilidad actualizada", description: "Los horarios de atención han sido actualizados correctamente.", }) } const handleEliminarBloque = (id: string) => { if (confirm("¿Estás seguro de que deseas eliminar este bloque de disponibilidad?")) { setDisponibilidad(disponibilidad.filter((bloque) => bloque.id !== id)) toast({ title: "Bloque eliminado", description: "El bloque de disponibilidad ha sido eliminado correctamente.", }) } } return (

Alcaldía Municipal

Secretaria

Gestionar Disponibilidad del Alcalde

Bloques de Disponibilidad Actuales Bloques de tiempo en los que el alcalde puede atender citas Día Hora Inicio Hora Fin Acciones {disponibilidad.length > 0 ? ( disponibilidad.map((bloque) => ( {bloque.dia.charAt(0).toUpperCase() + bloque.dia.slice(1)} {bloque.horaInicio} {bloque.horaFin} )) ) : ( No hay bloques de disponibilidad configurados )}

Configuración Rápida Selecciona los días y horas en que el alcalde puede atender

{DIAS.map((dia) => (

{dia.label}

{HORAS.map((hora) => (

handleToggleHora(dia.id, hora)} /> {hora}

))}

) } [V0_FILE]typescriptreact:file="app/menu/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { CalendarDays, Clock, Users, Calendar, ArrowLeft } from "lucide-react" export default function MenuPage() { return (

Alcaldía Municipal

Menú Principal Selecciona una opción para continuar

) } [V0_FILE]typescriptreact:file="src/components/theme-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" | "system" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme storageKey?: string } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const initialState: ThemeProviderState = { theme: "system", setTheme: () => null, } const ThemeProviderContext = createContext(initialState) export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) { const [theme, setTheme] = useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") if (theme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" root.classList.add(systemTheme) return } root.classList.add(theme) }, [theme]) const value = { theme, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme) setTheme(theme) }, } return ( {children} ) } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } [V0_FILE]typescriptreact:file="src/lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="src/index.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="src/vite-env.d.ts" isMerged="true" /// [V0_FILE]typescriptreact:file="vite.config.ts" isMerged="true" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import path from "path" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }) [V0_FILE]json:file="tsconfig.node.json" isMerged="true" { "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"] } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="postcss.config.js" isMerged="true" export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]typescriptreact:file="src/components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="src/components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="src/components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="src/components/ui/label.tsx" isMerged="true" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="src/components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="src/components/ui/calendar.tsx" isMerged="true" "use client" import type * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="src/components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="src/components/ui/popover.tsx" isMerged="true" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="src/components/ui/radio-group.tsx" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="src/components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="src/components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (
), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( tr]:last:border-b-0", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableRow.displayName = "TableRow" const TableHead = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableHead.displayName = "TableHead" const TableCell = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (
), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]typescriptreact:file="src/components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="src/components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (
{title && {title}} {description && {description}}
{action} ))} ) } [V0_FILE]typescriptreact:file="src/hooks/use-toast.ts" isMerged="true" "use client" // Inspired by react-hot-toast library import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="src/main.tsx" isMerged="true" import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App" import { ThemeProvider } from "./components/theme-provider" import "./index.css" ReactDOM.createRoot(document.getElementById("root")!).render( , ) [V0_FILE]typescriptreact:file="src/components/AdminProtectedRoute.tsx" isMerged="true" "use client" import { type ReactNode, useEffect, useState } from "react" import { Navigate } from "react-router-dom" interface AdminProtectedRouteProps { children: ReactNode } const AdminProtectedRoute = ({ children }: AdminProtectedRouteProps) => { const [isAdmin, setIsAdmin] = useState(null) useEffect(() => { // Verificar directamente en localStorage const adminData = localStorage.getItem("admin") setIsAdmin(!!adminData) }, []) // Mientras se verifica, mostrar un indicador de carga if (isAdmin === null) { return
Cargando...
} if (!isAdmin) { return } return <>{children} } export default AdminProtectedRoute [V0_FILE]typescriptreact:file="src/pages/admin/Dashboard.tsx" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Link, useNavigate } from "react-router-dom" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { useAppointments } from "../../hooks/useAppointments" import { CalendarDays, Clock, Users, LogOut, User } from "lucide-react" export default function AdminDashboard() { const navigate = useNavigate() const { appointments, timeSlots } = useAppointments() const [admin, setAdmin] = useState<{ id: string; nombre: string; rol: string } | null>(null) useEffect(() => { // Cargar datos del admin directamente de localStorage const adminData = localStorage.getItem("admin") if (adminData) { setAdmin(JSON.parse(adminData)) } }, []) const handleLogout = () => { localStorage.removeItem("admin") navigate("/admin") } // Estadísticas const totalAppointments = appointments.length const confirmedAppointments = appointments.filter((a) => a.status === "confirmada").length const rescheduledAppointments = appointments.filter((a) => a.status === "reprogramada").length const canceledAppointments = appointments.filter((a) => a.status === "cancelada").length const availableSlots = timeSlots.filter((s) => s.available).length return (

Alcaldía Municipal

{admin?.nombre}

Rol: {admin?.rol}

Dashboard

Gestionar Horarios

Gestionar Citas

Panel de Administración

Total de Citas

{totalAppointments}

Citas Confirmadas

{confirmedAppointments}

Citas Reprogramadas

{rescheduledAppointments}

Horarios Disponibles

{availableSlots}

Acciones Rápidas Accede rápidamente a las funciones principales Citas Recientes Últimas citas agendadas en el sistema {appointments.length > 0 ? (
{appointments.slice(0, 5).map((appointment) => (

{appointment.userName} {appointment.userLastName}

{new Date(appointment.date).toLocaleDateString()} - {appointment.time}

))}
) : (
No hay citas registradas
)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescript:file="src/index.ts" isMerged="true" import express from "express" import cors from "cors" import helmet from "helmet" import dotenv from "dotenv" import { PrismaClient } from "@prisma/client" // Importar rutas import authRoutes from "./routes/auth" import userRoutes from "./routes/users" import appointmentRoutes from "./routes/appointments" import timeSlotRoutes from "./routes/timeSlots" import adminRoutes from "./routes/admin" // Configurar variables de entorno dotenv.config() // Crear instancia de Express const app = express() const PORT = process.env.PORT || 3001 // Crear instancia de Prisma export const prisma = new PrismaClient() // Middlewares app.use(helmet()) app.use( cors({ origin: process.env.FRONTEND_URL || "http://localhost:3000", credentials: true, }), ) app.use(express.json()) app.use(express.urlencoded({ extended: true })) // Middleware de logging app.use((req, res, next) => { console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`) next() }) // Rutas app.use("/api/auth", authRoutes) app.use("/api/users", userRoutes) app.use("/api/appointments", appointmentRoutes) app.use("/api/time-slots", timeSlotRoutes) app.use("/api/admin", adminRoutes) // Ruta de salud app.get("/api/health", (req, res) => { res.json({ status: "OK", message: "API del Sistema de Citas funcionando correctamente", timestamp: new Date().toISOString(), }) }) // Manejo de errores 404 app.use("", (req, res) => { res.status(404).json({ error: "Ruta no encontrada", path: req.originalUrl, }) }) // Manejo global de errores app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => { console.error("Error:", err) res.status(500).json({ error: "Error interno del servidor", message: process.env.NODE_ENV === "development" ? err.message : "Algo salió mal", }) }) // Iniciar servidor async function startServer() { try { // Conectar a la base de datos await prisma.$connect() console.log("✅ Conectado a la base de datos") // Iniciar servidor app.listen(PORT, () => { console.log(`🚀 Servidor ejecutándose en http://localhost:${PORT}`) console.log(`📚 Documentación de la API disponible en http://localhost:${PORT}/api/health`) }) } catch (error) { console.error("❌ Error al iniciar el servidor:", error) process.exit(1) } } // Manejo de cierre graceful process.on("SIGINT", async () => { console.log("\n🔄 Cerrando servidor...") await prisma.$disconnect() process.exit(0) }) process.on("SIGTERM", async () => { console.log("\n🔄 Cerrando servidor...") await prisma.$disconnect() process.exit(0) }) startServer() [V0_FILE]plaintext:file="prisma/schema.prisma" isMerged="true" // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id String @id @default(cuid()) nombre String apellido String cedula String @unique telefono String email String? password String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones appointments Appointment[] @@map("users") } model Admin { id String @id @default(cuid()) nombre String username String @unique password String rol String @default("secretaria") activo Boolean @default(true) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@map("admins") } model TimeSlot { id String @id @default(cuid()) day String // Día de la semana date DateTime // Fecha específica time String // Hora en formato HH:mm available Boolean @default(true) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones appointment Appointment? @@unique([date, time]) @@map("time_slots") } model Appointment { id String @id @default(cuid()) userId String? // Opcional para citas presenciales userName String userLastName String userCedula String userPhone String? timeSlotId String @unique status AppointmentStatus @default(CONFIRMADA) isRegisteredUser Boolean @default(true) notes String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones user User? @relation(fields: [userId], references: [id]) timeSlot TimeSlot @relation(fields: [timeSlotId], references: [id]) @@map("appointments") } enum AppointmentStatus { CONFIRMADA CANCELADA REPROGRAMADA COMPLETADA } [V0_FILE]typescript:file="src/types/index.ts" isMerged="true" import { z } from "zod" // Esquemas de validación con Zod export const UserCreateSchema = z.object({ nombre: z.string().min(2, "El nombre debe tener al menos 2 caracteres"), apellido: z.string().min(2, "El apellido debe tener al menos 2 caracteres"), cedula: z.string().min(6, "La cédula debe tener al menos 6 caracteres"), telefono: z.string().min(10, "El teléfono debe tener al menos 10 caracteres"), email: z.string().email("Email inválido").optional(), password: z.string().min(6, "La contraseña debe tener al menos 6 caracteres"), }) export const UserLoginSchema = z.object({ cedula: z.string().min(1, "La cédula es requerida"), password: z.string().min(1, "La contraseña es requerida"), }) export const AdminLoginSchema = z.object({ username: z.string().min(1, "El usuario es requerido"), password: z.string().min(1, "La contraseña es requerida"), }) export const TimeSlotCreateSchema = z.object({ day: z.string().min(1, "El día es requerido"), date: z.string().datetime("Fecha inválida"), time: z.string().regex(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/, "Formato de hora inválido (HH:mm)"), }) export const AppointmentCreateSchema = z.object({ timeSlotId: z.string().min(1, "El horario es requerido"), userName: z.string().min(2, "El nombre debe tener al menos 2 caracteres"), userLastName: z.string().min(2, "El apellido debe tener al menos 2 caracteres"), userCedula: z.string().min(6, "La cédula debe tener al menos 6 caracteres"), userPhone: z.string().optional(), isRegisteredUser: z.boolean().default(true), notes: z.string().optional(), }) export const AppointmentUpdateSchema = z.object({ status: z.enum(["CONFIRMADA", "CANCELADA", "REPROGRAMADA", "COMPLETADA"]).optional(), timeSlotId: z.string().optional(), notes: z.string().optional(), }) // Tipos TypeScript export type UserCreate = z.infer export type UserLogin = z.infer export type AdminLogin = z.infer export type TimeSlotCreate = z.infer export type AppointmentCreate = z.infer export type AppointmentUpdate = z.infer export interface JWTPayload { id: string cedula?: string username?: string type: "user" | "admin" } [V0_FILE]typescript:file="src/middleware/auth.ts" isMerged="true" import type { Request, Response, NextFunction } from "express" import jwt from "jsonwebtoken" import type { JWTPayload } from "../types" // Extender el tipo Request para incluir user declare global { namespace Express { interface Request { user?: JWTPayload } } } export const authenticateToken = (req: Request, res: Response, next: NextFunction) => { const authHeader = req.headers["authorization"] const token = authHeader && authHeader.split(" ")[1] if (!token) { return res.status(401).json({ error: "Token de acceso requerido" }) } jwt.verify(token, process.env.JWT_SECRET!, (err, user) => { if (err) { return res.status(403).json({ error: "Token inválido" }) } req.user = user as JWTPayload next() }) } export const requireAdmin = (req: Request, res: Response, next: NextFunction) => { if (!req.user || req.user.type !== "admin") { return res.status(403).json({ error: "Acceso denegado. Se requieren permisos de administrador" }) } next() } export const requireUser = (req: Request, res: Response, next: NextFunction) => { if (!req.user || req.user.type !== "user") { return res.status(403).json({ error: "Acceso denegado. Se requiere ser usuario registrado" }) } next() } [V0_FILE]typescript:file="src/routes/auth.ts" isMerged="true" import express from "express" import bcrypt from "bcryptjs" import jwt from "jsonwebtoken" import { prisma } from "../index" import { UserCreateSchema, UserLoginSchema, AdminLoginSchema } from "../types" const router = express.Router() // Registro de usuario router.post("/register", async (req, res) => { try { const validatedData = UserCreateSchema.parse(req.body) // Verificar si el usuario ya existe const existingUser = await prisma.user.findUnique({ where: { cedula: validatedData.cedula }, }) if (existingUser) { return res.status(400).json({ error: "Ya existe un usuario con esta cédula" }) } // Hashear la contraseña const hashedPassword = await bcrypt.hash(validatedData.password, 10) // Crear usuario const user = await prisma.user.create({ data: { ...validatedData, password: hashedPassword, }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, }, }) // Generar token const token = jwt.sign({ id: user.id, cedula: user.cedula, type: "user" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.status(201).json({ message: "Usuario registrado exitosamente", user, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en registro:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Login de usuario router.post("/login", async (req, res) => { try { const validatedData = UserLoginSchema.parse(req.body) // Buscar usuario const user = await prisma.user.findUnique({ where: { cedula: validatedData.cedula }, }) if (!user) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Verificar contraseña const isValidPassword = await bcrypt.compare(validatedData.password, user.password) if (!isValidPassword) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Generar token const token = jwt.sign({ id: user.id, cedula: user.cedula, type: "user" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.json({ message: "Inicio de sesión exitoso", user: { id: user.id, nombre: user.nombre, apellido: user.apellido, cedula: user.cedula, telefono: user.telefono, email: user.email, }, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en login:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Login de administrador router.post("/admin/login", async (req, res) => { try { const validatedData = AdminLoginSchema.parse(req.body) // Buscar administrador const admin = await prisma.admin.findUnique({ where: { username: validatedData.username }, }) if (!admin || !admin.activo) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Verificar contraseña const isValidPassword = await bcrypt.compare(validatedData.password, admin.password) if (!isValidPassword) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Generar token const token = jwt.sign({ id: admin.id, username: admin.username, type: "admin" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.json({ message: "Inicio de sesión exitoso", admin: { id: admin.id, nombre: admin.nombre, username: admin.username, rol: admin.rol, }, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en login admin:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="src/routes/users.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireUser } from "../middleware/auth" const router = express.Router() // Obtener perfil del usuario autenticado router.get("/profile", authenticateToken, requireUser, async (req, res) => { try { const user = await prisma.user.findUnique({ where: { id: req.user!.id }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, }, }) if (!user) { return res.status(404).json({ error: "Usuario no encontrado" }) } res.json({ user }) } catch (error) { console.error("Error al obtener perfil:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar perfil del usuario router.put("/profile", authenticateToken, requireUser, async (req, res) => { try { const { nombre, apellido, telefono, email } = req.body const updatedUser = await prisma.user.update({ where: { id: req.user!.id }, data: { ...(nombre && { nombre }), ...(apellido && { apellido }), ...(telefono && { telefono }), ...(email && { email }), }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, updatedAt: true, }, }) res.json({ message: "Perfil actualizado exitosamente", user: updatedUser, }) } catch (error) { console.error("Error al actualizar perfil:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener citas del usuario router.get("/appointments", authenticateToken, requireUser, async (req, res) => { try { const appointments = await prisma.appointment.findMany({ where: { userId: req.user!.id }, include: { timeSlot: true, }, orderBy: { createdAt: "desc", }, }) res.json({ appointments }) } catch (error) { console.error("Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="src/routes/timeSlots.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireAdmin } from "../middleware/auth" import { TimeSlotCreateSchema } from "../types" import { startOfDay, endOfDay } from "date-fns" const router = express.Router() // Obtener horarios disponibles (público) router.get("/available", async (req, res) => { try { const { date, startDate, endDate } = req.query const whereClause: any = { available: true, } if (date) { const targetDate = new Date(date as string) whereClause.date = { gte: startOfDay(targetDate), lte: endOfDay(targetDate), } } else if (startDate && endDate) { whereClause.date = { gte: new Date(startDate as string), lte: new Date(endDate as string), } } else { // Por defecto, mostrar horarios desde hoy en adelante whereClause.date = { gte: startOfDay(new Date()), } } const timeSlots = await prisma.timeSlot.findMany({ where: whereClause, orderBy: [{ date: "asc" }, { time: "asc" }], }) res.json({ timeSlots }) } catch (error) { console.error("Error al obtener horarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Crear horarios (solo admin) router.post("/", authenticateToken, requireAdmin, async (req, res) => { try { const slots = Array.isArray(req.body) ? req.body : [req.body] const validatedSlots = slots.map((slot) => TimeSlotCreateSchema.parse(slot)) const createdSlots = await Promise.all( validatedSlots.map(async (slot) => { // Verificar si ya existe un horario para esa fecha y hora const existing = await prisma.timeSlot.findUnique({ where: { date_time: { date: new Date(slot.date), time: slot.time, }, }, }) if (existing) { throw new Error(`Ya existe un horario para ${slot.date} a las ${slot.time}`) } return prisma.timeSlot.create({ data: { day: slot.day, date: new Date(slot.date), time: slot.time, }, }) }), ) res.status(201).json({ message: `${createdSlots.length} horarios creados exitosamente`, timeSlots: createdSlots, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error al crear horarios:", error) res.status(500).json({ error: error.message || "Error interno del servidor", }) } }) // Obtener todos los horarios (solo admin) router.get("/", authenticateToken, requireAdmin, async (req, res) => { try { const { date, available } = req.query const whereClause: any = {} if (date) { const targetDate = new Date(date as string) whereClause.date = { gte: startOfDay(targetDate), lte: endOfDay(targetDate), } } if (available !== undefined) { whereClause.available = available === "true" } const timeSlots = await prisma.timeSlot.findMany({ where: whereClause, include: { appointment: { select: { id: true, userName: true, userLastName: true, userCedula: true, status: true, }, }, }, orderBy: [{ date: "asc" }, { time: "asc" }], }) res.json({ timeSlots }) } catch (error) { console.error("Error al obtener horarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Eliminar horario (solo admin) router.delete("/:id", authenticateToken, requireAdmin, async (req, res) => { try { const { id } = req.params // Verificar si el horario tiene una cita asociada const timeSlot = await prisma.timeSlot.findUnique({ where: { id }, include: { appointment: true }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (timeSlot.appointment) { return res.status(400).json({ error: "No se puede eliminar un horario que tiene una cita asociada", }) } await prisma.timeSlot.delete({ where: { id }, }) res.json({ message: "Horario eliminado exitosamente" }) } catch (error) { console.error("Error al eliminar horario:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="src/routes/appointments.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireUser } from "../middleware/auth" import { AppointmentCreateSchema, AppointmentUpdateSchema } from "../types" const router = express.Router() // Crear cita (usuario registrado) router.post("/", authenticateToken, requireUser, async (req, res) => { try { const validatedData = AppointmentCreateSchema.parse(req.body) // Verificar que el horario existe y está disponible const timeSlot = await prisma.timeSlot.findUnique({ where: { id: validatedData.timeSlotId }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (!timeSlot.available) { return res.status(400).json({ error: "El horario ya no está disponible" }) } // Verificar que el usuario no tenga otra cita en la misma fecha const existingAppointment = await prisma.appointment.findFirst({ where: { userId: req.user!.id, timeSlot: { date: timeSlot.date, }, status: { in: ["CONFIRMADA", "REPROGRAMADA"], }, }, }) if (existingAppointment) { return res.status(400).json({ error: "Ya tienes una cita programada para esta fecha", }) } // Crear la cita en una transacción const result = await prisma.$transaction(async (tx) => { // Marcar el horario como no disponible await tx.timeSlot.update({ where: { id: validatedData.timeSlotId }, data: { available: false }, }) // Crear la cita const appointment = await tx.appointment.create({ data: { userId: req.user!.id, timeSlotId: validatedData.timeSlotId, userName: validatedData.userName, userLastName: validatedData.userLastName, userCedula: validatedData.userCedula, userPhone: validatedData.userPhone, isRegisteredUser: true, notes: validatedData.notes, }, include: { timeSlot: true, user: { select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, }, }, }, }) return appointment }) res.status(201).json({ message: "Cita creada exitosamente", appointment: result, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error al crear cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener citas del usuario autenticado router.get("/my-appointments", authenticateToken, requireUser, async (req, res) => { try { const appointments = await prisma.appointment.findMany({ where: { userId: req.user!.id }, include: { timeSlot: true, }, orderBy: { createdAt: "desc", }, }) res.json({ appointments }) } catch (error) { console.error("Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar cita (cancelar, reprogramar) router.put("/:id", authenticateToken, requireUser, async (req, res) => { try { const { id } = req.params const validatedData = AppointmentUpdateSchema.parse(req.body) // Verificar que la cita existe y pertenece al usuario const appointment = await prisma.appointment.findFirst({ where: { id, userId: req.user!.id, }, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } if (appointment.status === "CANCELADA") { return res.status(400).json({ error: "No se puede modificar una cita cancelada" }) } // Si se está reprogramando, verificar el nuevo horario if (validatedData.timeSlotId && validatedData.timeSlotId !== appointment.timeSlotId) { const newTimeSlot = await prisma.timeSlot.findUnique({ where: { id: validatedData.timeSlotId }, }) if (!newTimeSlot || !newTimeSlot.available) { return res.status(400).json({ error: "El nuevo horario no está disponible" }) } // Reprogramar en una transacción const result = await prisma.$transaction(async (tx) => { // Liberar el horario anterior await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) // Ocupar el nuevo horario await tx.timeSlot.update({ where: { id: validatedData.timeSlotId! }, data: { available: false }, }) // Actualizar la cita return tx.appointment.update({ where: { id }, data: { timeSlotId: validatedData.timeSlotId, status: "REPROGRAMADA", notes: validatedData.notes, }, include: { timeSlot: true, }, }) }) return res.json({ message: "Cita reprogramada exitosamente", appointment: result, }) } // Si se está cancelando if (validatedData.status === "CANCELADA") { const result = await prisma.$transaction(async (tx) => { // Liberar el horario await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) // Cancelar la cita return tx.appointment.update({ where: { id }, data: { status: "CANCELADA", notes: validatedData.notes, }, include: { timeSlot: true, }, }) }) return res.json({ message: "Cita cancelada exitosamente", appointment: result, }) } // Actualización simple (solo notas) const updatedAppointment = await prisma.appointment.update({ where: { id }, data: { notes: validatedData.notes, }, include: { timeSlot: true, }, }) res.json({ message: "Cita actualizada exitosamente", appointment: updatedAppointment, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error al actualizar cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="src/routes/admin.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireAdmin } from "../middleware/auth" import { AppointmentCreateSchema } from "../types" import { startOfDay, endOfDay } from "date-fns" const router = express.Router() // Obtener estadísticas del dashboard router.get("/dashboard/stats", authenticateToken, requireAdmin, async (req, res) => { try { const [ totalAppointments, confirmedAppointments, canceledAppointments, rescheduledAppointments, availableSlots, totalUsers, ] = await Promise.all([ prisma.appointment.count(), prisma.appointment.count({ where: { status: "CONFIRMADA" } }), prisma.appointment.count({ where: { status: "CANCELADA" } }), prisma.appointment.count({ where: { status: "REPROGRAMADA" } }), prisma.timeSlot.count({ where: { available: true } }), prisma.user.count(), ]) res.json({ stats: { totalAppointments, confirmedAppointments, canceledAppointments, rescheduledAppointments, availableSlots, totalUsers, }, }) } catch (error) { console.error("Error al obtener estadísticas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener todas las citas (con filtros) router.get("/appointments", authenticateToken, requireAdmin, async (req, res) => { try { const { date, status, cedula, page = 1, limit = 10 } = req.query const whereClause: any = {} if (date) { const targetDate = new Date(date as string) whereClause.timeSlot = { date: { gte: startOfDay(targetDate), lte: endOfDay(targetDate), }, } } if (status) { whereClause.status = status } if (cedula) { whereClause.userCedula = { contains: cedula as string, mode: "insensitive", } } const skip = (Number(page) - 1) Number(limit) const [appointments, total] = await Promise.all([ prisma.appointment.findMany({ where: whereClause, include: { timeSlot: true, user: { select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, }, }, }, orderBy: { createdAt: "desc", }, skip, take: Number(limit), }), prisma.appointment.count({ where: whereClause }), ]) res.json({ appointments, pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)), }, }) } catch (error) { console.error("Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Crear cita directa (para usuarios no registrados) router.post("/appointments/direct", authenticateToken, requireAdmin, async (req, res) => { try { const validatedData = AppointmentCreateSchema.parse(req.body) // Verificar que el horario existe y está disponible const timeSlot = await prisma.timeSlot.findUnique({ where: { id: validatedData.timeSlotId }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (!timeSlot.available) { return res.status(400).json({ error: "El horario ya no está disponible" }) } // Crear la cita en una transacción const result = await prisma.$transaction(async (tx) => { // Marcar el horario como no disponible await tx.timeSlot.update({ where: { id: validatedData.timeSlotId }, data: { available: false }, }) // Crear la cita const appointment = await tx.appointment.create({ data: { timeSlotId: validatedData.timeSlotId, userName: validatedData.userName, userLastName: validatedData.userLastName, userCedula: validatedData.userCedula, userPhone: validatedData.userPhone, isRegisteredUser: false, notes: validatedData.notes, }, include: { timeSlot: true, }, }) return appointment }) res.status(201).json({ message: "Cita creada exitosamente", appointment: result, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error al crear cita directa:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar estado de cita router.put("/appointments/:id", authenticateToken, requireAdmin, async (req, res) => { try { const { id } = req.params const { status, notes } = req.body const appointment = await prisma.appointment.findUnique({ where: { id }, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } // Si se está cancelando, liberar el horario if (status === "CANCELADA" && appointment.status !== "CANCELADA") { const result = await prisma.$transaction(async (tx) => { // Liberar el horario await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) // Actualizar la cita return tx.appointment.update({ where: { id }, data: { status, notes }, include: { timeSlot: true }, }) }) return res.json({ message: "Cita actualizada exitosamente", appointment: result, }) } // Actualización simple const updatedAppointment = await prisma.appointment.update({ where: { id }, data: { status, notes }, include: { timeSlot: true }, }) res.json({ message: "Cita actualizada exitosamente", appointment: updatedAppointment, }) } catch (error) { console.error("Error al actualizar cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener todos los usuarios router.get("/users", authenticateToken, requireAdmin, async (req, res) => { try { const { page = 1, limit = 10, search } = req.query let whereClause: any = {} if (search) { whereClause = { OR: [ { nombre: { contains: search as string, mode: "insensitive" } }, { apellido: { contains: search as string, mode: "insensitive" } }, { cedula: { contains: search as string, mode: "insensitive" } }, ], } } const skip = (Number(page) - 1) * Number(limit) const [users, total] = await Promise.all([ prisma.user.findMany({ where: whereClause, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, _count: { select: { appointments: true, }, }, }, orderBy: { createdAt: "desc", }, skip, take: Number(limit), }), prisma.user.count({ where: whereClause }), ]) res.json({ users, pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)), }, }) } catch (error) { console.error("Error al obtener usuarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="src/prisma/seed.ts" isMerged="true" import { PrismaClient } from "@prisma/client" import bcrypt from "bcryptjs" const prisma = new PrismaClient() async function main() { console.log("🌱 Iniciando seed de la base de datos...") // Crear administrador por defecto const adminPassword = await bcrypt.hash(process.env.DEFAULT_ADMIN_PASSWORD || "admin123", 10) const admin = await prisma.admin.upsert({ where: { username: process.env.DEFAULT_ADMIN_USERNAME || "admin" }, update: {}, create: { nombre: "Administrador del Sistema", username: process.env.DEFAULT_ADMIN_USERNAME || "admin", password: adminPassword, rol: "secretaria", }, }) console.log("✅ Administrador creado:", admin.username) // Crear usuario de prueba const userPassword = await bcrypt.hash("password123", 10) const user = await prisma.user.upsert({ where: { cedula: "1234567890" }, update: {}, create: { nombre: "Juan", apellido: "Pérez", cedula: "1234567890", telefono: "3001234567", email: "juan.perez@email.com", password: userPassword, }, }) console.log("✅ Usuario de prueba creado:", user.cedula) // Crear algunos horarios de ejemplo const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(today.getDate() + 1) const timeSlots = [ { day: "lunes", date: tomorrow, time: "08:00", }, { day: "lunes", date: tomorrow, time: "09:00", }, { day: "lunes", date: tomorrow, time: "10:00", }, { day: "lunes", date: tomorrow, time: "11:00", }, ] for (const slot of timeSlots) { await prisma.timeSlot.upsert({ where: { date_time: { date: slot.date, time: slot.time, }, }, update: {}, create: slot, }) } console.log("✅ Horarios de ejemplo creados") console.log("🎉 Seed completado exitosamente!") } main() .catch((e) => { console.error("❌ Error durante el seed:", e) process.exit(1) }) .finally(async () => { await prisma.$disconnect() }) [V0_FILE]typescript:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2020", "module": "commonjs", "lib": ["ES2020"], "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "declaration": true, "declarationMap": true, "sourceMap": true, "removeComments": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "noImplicitThis": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "baseUrl": "./", "paths": { "@/": ["src/"] }, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true }, "include": ["src/**/"], "exclude": ["node_modules", "dist"] } [V0_FILE]markdown:file="README.md" isMerged="true" # Backend - Sistema de Citas con el Alcalde API REST desarrollada con Node.js, Express, TypeScript y Prisma ORM para el sistema de gestión de citas con el alcalde. ## 🚀 Características - Autenticación JWT para usuarios y administradores - Gestión de usuarios con registro y login - Gestión de horarios disponibles para citas - Sistema de citas con estados (confirmada, cancelada, reprogramada) - Panel administrativo con estadísticas y gestión completa - Validación de datos con Zod - Base de datos PostgreSQL con Prisma ORM - Middleware de seguridad con Helmet y CORS ## 📋 Requisitos - Node.js 18+ - PostgreSQL 12+ - npm o yarn ## 🛠️ Instalación 1. Clonar el repositorio \`\`\`bash git clone cd backend-sistemas-alcaldia \`\`\` 2. Instalar dependencias \`\`\`bash npm install \`\`\` 3. Configurar variables de entorno \`\`\`bash cp .env.example .env \`\`\` Editar el archivo `.env` con tus configuraciones: \`\`\`env DATABASE_URL="postgresql://username:password@localhost:5432/sistema_citas_alcaldia" JWT_SECRET="tu_jwt_secret_muy_seguro_aqui" PORT=3001 NODE_ENV=development FRONTEND_URL="http://localhost:3000" \`\`\` 4. Configurar la base de datos \`\`\`bash # Generar el cliente de Prisma npm run db:generate # Aplicar migraciones npm run db:migrate # Ejecutar seed (datos iniciales) npm run db:seed \`\`\` ## 🚀 Uso ### Desarrollo \`\`\`bash npm run dev \`\`\` ### Producción \`\`\`bash npm run build npm start \`\`\` ### Base de datos \`\`\`bash # Ver la base de datos en el navegador npm run db:studio # Aplicar cambios al esquema npm run db:push # Crear nueva migración npm run db:migrate \`\`\` ## 📚 API Endpoints ### Autenticación - `POST /api/auth/register` - Registro de usuario - `POST /api/auth/login` - Login de usuario - `POST /api/auth/admin/login` - Login de administrador ### Usuarios - `GET /api/users/profile` - Obtener perfil del usuario - `PUT /api/users/profile` - Actualizar perfil - `GET /api/users/appointments` - Obtener citas del usuario ### Horarios - `GET /api/time-slots/available` - Obtener horarios disponibles (público) - `POST /api/time-slots` - Crear horarios (admin) - `GET /api/time-slots` - Obtener todos los horarios (admin) - `DELETE /api/time-slots/:id` - Eliminar horario (admin) ### Citas - `POST /api/appointments` - Crear cita (usuario) - `GET /api/appointments/my-appointments` - Obtener mis citas - `PUT /api/appointments/:id` - Actualizar cita (cancelar/reprogramar) ### Administración - `GET /api/admin/dashboard/stats` - Estadísticas del dashboard - `GET /api/admin/appointments` - Obtener todas las citas - `POST /api/admin/appointments/direct` - Crear cita directa - `PUT /api/admin/appointments/:id` - Actualizar estado de cita - `GET /api/admin/users` - Obtener todos los usuarios ## 🔐 Autenticación La API utiliza JWT (JSON Web Tokens) para la autenticación. Incluye el token en el header: \`\`\` Authorization: Bearer \`\`\` ## 📊 Base de Datos ### Modelos principales: - User: Usuarios registrados del sistema - Admin: Administradores del sistema - TimeSlot: Horarios disponibles para citas - Appointment: Citas agendadas ### Estados de citas: - `CONFIRMADA`: Cita confirmada - `CANCELADA`: Cita cancelada - `REPROGRAMADA`: Cita reprogramada - `COMPLETADA`: Cita completada ## 🛡️ Seguridad - Contraseñas hasheadas con bcrypt - Validación de datos con Zod - Middleware de seguridad con Helmet - CORS configurado - Rate limiting (recomendado para producción) ## 📝 Datos de Prueba Después del seed, tendrás: Administrador: - Usuario: `admin` - Contraseña: `admin123` Usuario de prueba: - Cédula: `1234567890` - Contraseña: `password123` ## 🚀 Despliegue Para producción, asegúrate de: 1. Configurar `NODE_ENV=production` 2. Usar una base de datos PostgreSQL en la nube 3. Configurar variables de entorno seguras 4. Implementar rate limiting 5. Configurar logs apropiados 6. Usar HTTPS ## 🤝 Contribución 1. Fork el proyecto 2. Crea una rama para tu feature 3. Commit tus cambios 4. Push a la rama 5. Abre un Pull Request ## 📄 Licencia Este proyecto está bajo la Licencia MIT. [V0_FILE]json:file="backend-sistemas-alcaldia/package.json" isMerged="true" { "name": "backend-sistemas-alcaldia", "version": "1.0.0", "description": "Backend API para el Sistema de Citas con el Alcalde", "main": "dist/index.js", "scripts": { "dev": "tsx watch src/index.ts", "build": "tsc", "start": "node dist/index.js", "db:generate": "prisma generate", "db:push": "prisma db push", "db:migrate": "prisma migrate dev", "db:seed": "tsx src/prisma/seed.ts", "db:studio": "prisma studio" }, "keywords": ["api", "alcaldia", "citas", "node.js", "express", "prisma"], "author": "Sistema Alcaldía", "license": "MIT", "dependencies": { "@prisma/client": "^5.7.1", "express": "^4.18.2", "cors": "^2.8.5", "helmet": "^7.1.0", "bcryptjs": "^2.4.3", "jsonwebtoken": "^9.0.2", "zod": "^3.22.4", "date-fns": "^3.0.6", "dotenv": "^16.3.1" }, "devDependencies": { "@types/express": "^4.17.21", "@types/cors": "^2.8.17", "@types/bcryptjs": "^2.4.6", "@types/jsonwebtoken": "^9.0.5", "@types/node": "^20.10.5", "typescript": "^5.3.3", "tsx": "^4.6.2", "prisma": "^5.7.1" } } [V0_FILE]plaintext:file="backend-sistemas-alcaldia/prisma/schema.prisma" isMerged="true" // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id String @id @default(cuid()) nombre String apellido String cedula String @unique telefono String email String? password String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones appointments Appointment[] @@map("users") } model Admin { id String @id @default(cuid()) nombre String username String @unique password String rol String @default("secretaria") activo Boolean @default(true) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@map("admins") } model TimeSlot { id String @id @default(cuid()) day String // Día de la semana date DateTime // Fecha específica time String // Hora en formato HH:mm available Boolean @default(true) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones appointment Appointment? @@unique([date, time]) @@map("time_slots") } model Appointment { id String @id @default(cuid()) userId String? // Opcional para citas presenciales userName String userLastName String userCedula String userPhone String? timeSlotId String @unique status AppointmentStatus @default(CONFIRMADA) isRegisteredUser Boolean @default(true) notes String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt // Relaciones user User? @relation(fields: [userId], references: [id]) timeSlot TimeSlot @relation(fields: [timeSlotId], references: [id]) @@map("appointments") } enum AppointmentStatus { CONFIRMADA CANCELADA REPROGRAMADA COMPLETADA } [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/routes/users.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireUser } from "../middleware/auth" const router = express.Router() // Obtener perfil del usuario autenticado router.get("/profile", authenticateToken, requireUser, async (req, res) => { try { const user = await prisma.user.findUnique({ where: { id: req.user!.id }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, }, }) if (!user) { return res.status(404).json({ error: "Usuario no encontrado" }) } res.json({ user }) } catch (error) { console.error("Error al obtener perfil:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar perfil del usuario router.put("/profile", authenticateToken, requireUser, async (req, res) => { try { const { nombre, apellido, telefono, email } = req.body const updatedUser = await prisma.user.update({ where: { id: req.user!.id }, data: { ...(nombre && { nombre }), ...(apellido && { apellido }), ...(telefono && { telefono }), ...(email && { email }), }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, updatedAt: true, }, }) res.json({ message: "Perfil actualizado exitosamente", user: updatedUser, }) } catch (error) { console.error("Error al actualizar perfil:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener citas del usuario router.get("/appointments", authenticateToken, requireUser, async (req, res) => { try { const appointments = await prisma.appointment.findMany({ where: { userId: req.user!.id }, include: { timeSlot: true, }, orderBy: { createdAt: "desc", }, }) res.json({ appointments }) } catch (error) { console.error("Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/routes/admin.ts" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireAdmin } from "../middleware/auth" import { AppointmentCreateSchema } from "../types" import { startOfDay, endOfDay } from "date-fns" const router = express.Router() // Obtener estadísticas del dashboard router.get("/dashboard/stats", authenticateToken, requireAdmin, async (req, res) => { try { const [ totalAppointments, confirmedAppointments, canceledAppointments, rescheduledAppointments, availableSlots, totalUsers, ] = await Promise.all([ prisma.appointment.count(), prisma.appointment.count({ where: { status: "CONFIRMADA" } }), prisma.appointment.count({ where: { status: "CANCELADA" } }), prisma.appointment.count({ where: { status: "REPROGRAMADA" } }), prisma.timeSlot.count({ where: { available: true } }), prisma.user.count(), ]) res.json({ stats: { totalAppointments, confirmedAppointments, canceledAppointments, rescheduledAppointments, availableSlots, totalUsers, }, }) } catch (error) { console.error("Error al obtener estadísticas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener todas las citas (con filtros) router.get("/appointments", authenticateToken, requireAdmin, async (req, res) => { try { const { date, status, cedula, page = 1, limit = 10 } = req.query const whereClause: any = {} if (date) { const targetDate = new Date(date as string) whereClause.timeSlot = { date: { gte: startOfDay(targetDate), lte: endOfDay(targetDate), }, } } if (status) { whereClause.status = status } if (cedula) { whereClause.userCedula = { contains: cedula as string, mode: "insensitive", } } const skip = (Number(page) - 1) Number(limit) const [appointments, total] = await Promise.all([ prisma.appointment.findMany({ where: whereClause, include: { timeSlot: true, user: { select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, }, }, }, orderBy: { createdAt: "desc", }, skip, take: Number(limit), }), prisma.appointment.count({ where: whereClause }), ]) res.json({ appointments, pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)), }, }) } catch (error) { console.error("Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Crear cita directa (para usuarios no registrados) router.post("/appointments/direct", authenticateToken, requireAdmin, async (req, res) => { try { const validatedData = AppointmentCreateSchema.parse(req.body) // Verificar que el horario existe y está disponible const timeSlot = await prisma.timeSlot.findUnique({ where: { id: validatedData.timeSlotId }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (!timeSlot.available) { return res.status(400).json({ error: "El horario ya no está disponible" }) } // Crear la cita en una transacción const result = await prisma.$transaction(async (tx) => { // Marcar el horario como no disponible await tx.timeSlot.update({ where: { id: validatedData.timeSlotId }, data: { available: false }, }) // Crear la cita const appointment = await tx.appointment.create({ data: { timeSlotId: validatedData.timeSlotId, userName: validatedData.userName, userLastName: validatedData.userLastName, userCedula: validatedData.userCedula, userPhone: validatedData.userPhone, isRegisteredUser: false, notes: validatedData.notes, }, include: { timeSlot: true, }, }) return appointment }) res.status(201).json({ message: "Cita creada exitosamente", appointment: result, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error al crear cita directa:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar estado de cita router.put("/appointments/:id", authenticateToken, requireAdmin, async (req, res) => { try { const { id } = req.params const { status, notes } = req.body const appointment = await prisma.appointment.findUnique({ where: { id }, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } // Si se está cancelando, liberar el horario if (status === "CANCELADA" && appointment.status !== "CANCELADA") { const result = await prisma.$transaction(async (tx) => { // Liberar el horario await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) // Actualizar la cita return tx.appointment.update({ where: { id }, data: { status, notes }, include: { timeSlot: true }, }) }) return res.json({ message: "Cita actualizada exitosamente", appointment: result, }) } // Actualización simple const updatedAppointment = await prisma.appointment.update({ where: { id }, data: { status, notes }, include: { timeSlot: true }, }) res.json({ message: "Cita actualizada exitosamente", appointment: updatedAppointment, }) } catch (error) { console.error("Error al actualizar cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener todos los usuarios router.get("/users", authenticateToken, requireAdmin, async (req, res) => { try { const { page = 1, limit = 10, search } = req.query let whereClause: any = {} if (search) { whereClause = { OR: [ { nombre: { contains: search as string, mode: "insensitive" } }, { apellido: { contains: search as string, mode: "insensitive" } }, { cedula: { contains: search as string, mode: "insensitive" } }, ], } } const skip = (Number(page) - 1) * Number(limit) const [users, total] = await Promise.all([ prisma.user.findMany({ where: whereClause, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, _count: { select: { appointments: true, }, }, }, orderBy: { createdAt: "desc", }, skip, take: Number(limit), }), prisma.user.count({ where: whereClause }), ]) res.json({ users, pagination: { page: Number(page), limit: Number(limit), total, pages: Math.ceil(total / Number(limit)), }, }) } catch (error) { console.error("Error al obtener usuarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescript:file="backend-sistemas-alcaldia/tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2020", "module": "commonjs", "lib": ["ES2020"], "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "declaration": true, "declarationMap": true, "sourceMap": true, "removeComments": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "noImplicitThis": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "baseUrl": "./", "paths": { "@/": ["src/"] }, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true }, "include": ["src/**/"], "exclude": ["node_modules", "dist"] } [V0_FILE]markdown:file="backend-sistemas-alcaldia/README.md" isMerged="true" # Backend - Sistema de Citas con el Alcalde API REST desarrollada con Node.js, Express, TypeScript y Prisma ORM para el sistema de gestión de citas con el alcalde. ## 🚀 Características - Autenticación JWT para usuarios y administradores - Gestión de usuarios con registro y login - Gestión de horarios disponibles para citas - Sistema de citas con estados (confirmada, cancelada, reprogramada) - Panel administrativo con estadísticas y gestión completa - Validación de datos con Zod - Base de datos PostgreSQL con Prisma ORM - Middleware de seguridad con Helmet y CORS ## 📋 Requisitos - Node.js 18+ - PostgreSQL 12+ - npm o yarn ## 🛠️ Instalación 1. Clonar el repositorio \`\`\`bash git clone cd backend-sistemas-alcaldia \`\`\` 2. Instalar dependencias \`\`\`bash npm install \`\`\` 3. Configurar variables de entorno \`\`\`bash cp .env.example .env \`\`\` Editar el archivo `.env` con tus configuraciones: \`\`\`env DATABASE_URL="postgresql://username:password@localhost:5432/sistema_citas_alcaldia" JWT_SECRET="tu_jwt_secret_muy_seguro_aqui" PORT=3001 NODE_ENV=development FRONTEND_URL="http://localhost:3000" \`\`\` 4. Configurar la base de datos \`\`\`bash # Generar el cliente de Prisma npm run db:generate # Aplicar migraciones npm run db:migrate # Ejecutar seed (datos iniciales) npm run db:seed \`\`\` ## 🚀 Uso ### Desarrollo \`\`\`bash npm run dev \`\`\` ### Producción \`\`\`bash npm run build npm start \`\`\` ### Base de datos \`\`\`bash # Ver la base de datos en el navegador npm run db:studio # Aplicar cambios al esquema npm run db:push # Crear nueva migración npm run db:migrate \`\`\` ## 📚 API Endpoints ### Autenticación - \`POST /api/auth/register\` - Registro de usuario - \`POST /api/auth/login\` - Login de usuario - \`POST /api/auth/admin/login\` - Login de administrador ### Usuarios - \`GET /api/users/profile\` - Obtener perfil del usuario - \`PUT /api/users/profile\` - Actualizar perfil - \`GET /api/users/appointments\` - Obtener citas del usuario ### Horarios - \`GET /api/time-slots/available\` - Obtener horarios disponibles (público) - \`POST /api/time-slots\` - Crear horarios (admin) - \`GET /api/time-slots\` - Obtener todos los horarios (admin) - \`DELETE /api/time-slots/:id\` - Eliminar horario (admin) ### Citas - \`POST /api/appointments\` - Crear cita (usuario) - \`GET /api/appointments/my-appointments\` - Obtener mis citas - \`PUT /api/appointments/:id\` - Actualizar cita (cancelar/reprogramar) ### Administración - \`GET /api/admin/dashboard/stats\` - Estadísticas del dashboard - \`GET /api/admin/appointments\` - Obtener todas las citas - \`POST /api/admin/appointments/direct\` - Crear cita directa - \`PUT /api/admin/appointments/:id\` - Actualizar estado de cita - \`GET /api/admin/users\` - Obtener todos los usuarios ## 🔐 Autenticación La API utiliza JWT (JSON Web Tokens) para la autenticación. Incluye el token en el header: \`\`\` Authorization: Bearer \`\`\` ## 📊 Base de Datos ### Modelos principales: - User: Usuarios registrados del sistema - Admin: Administradores del sistema - TimeSlot: Horarios disponibles para citas - Appointment: Citas agendadas ### Estados de citas: - \`CONFIRMADA\`: Cita confirmada - \`CANCELADA\`: Cita cancelada - \`REPROGRAMADA\`: Cita reprogramada - \`COMPLETADA\`: Cita completada ## 🛡️ Seguridad - Contraseñas hasheadas con bcrypt - Validación de datos con Zod - Middleware de seguridad con Helmet - CORS configurado - Rate limiting (recomendado para producción) ## 📝 Datos de Prueba Después del seed, tendrás: Administrador: - Usuario: \`admin\` - Contraseña: \`admin123\` Usuario de prueba: - Cédula: \`1234567890\` - Contraseña: \`password123\` ## 🚀 Despliegue Para producción, asegúrate de: 1. Configurar \`NODE_ENV=production\` 2. Usar una base de datos PostgreSQL en la nube 3. Configurar variables de entorno seguras 4. Implementar rate limiting 5. Configurar logs apropiados 6. Usar HTTPS ## 🤝 Contribución 1. Fork el proyecto 2. Crea una rama para tu feature 3. Commit tus cambios 4. Push a la rama 5. Abre un Pull Request ## 📄 Licencia Este proyecto está bajo la Licencia MIT. \`\`\` ```gitignore file="backend-sistemas-alcaldia/.gitignore" # Dependencies node_modules/ npm-debug.log yarn-debug.log* yarn-error.log* # Runtime data pids .pid .seed .pid.lock # Coverage directory used by tools like istanbul coverage/ .lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # TypeScript cache .tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of 'npm pack' .tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test .env.local .env.production # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache # Next.js build output .next # Nuxt.js build / generate output .nuxt dist # Gatsby files .cache/ public # Storybook build outputs .out .storybook-out # Temporary folders tmp/ temp/ # Logs logs .log # Runtime data pids .pid .seed .pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage .lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # TypeScript cache .tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of 'npm pack' .tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache # Storybook build outputs .out .storybook-out # Temporary folders tmp/ temp/ # Editor directories and files .vscode/ !.vscode/extensions.json .idea .DS_Store .suo .ntvs* .njsproj .sln .sw? # Prisma prisma/migrations/ [V0_FILE]typescriptreact:file="src/hooks/useAuth.tsx" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode, useEffect } from "react" import { authAPI } from "../services/api" // Tipos interface User { id: string nombre: string apellido: string cedula: string telefono: string } interface Admin { id: string nombre: string rol: string } interface AuthContextType { user: User | null admin: Admin | null loading: boolean login: (cedula: string, password: string) => Promise adminLogin: (username: string, password: string) => Promise register: (userData: Omit & { password: string }) => Promise logout: () => void adminLogout: () => void } // Crear contexto const AuthContext = createContext(undefined) // Proveedor del contexto export const AuthProvider = ({ children }: { children: ReactNode }) => { const [user, setUser] = useState(null) const [admin, setAdmin] = useState(null) const [loading, setLoading] = useState(true) // Cargar datos de sesión al iniciar useEffect(() => { const initAuth = async () => { const token = localStorage.getItem("token") const adminToken = localStorage.getItem("adminToken") if (token) { try { const response = await authAPI.getProfile() if (response.user) { setUser(response.user) } } catch (error) { console.error("Error al cargar perfil:", error) localStorage.removeItem("token") } } if (adminToken) { try { // Para admin, usar datos almacenados localmente por ahora const storedAdmin = localStorage.getItem("admin") if (storedAdmin) { setAdmin(JSON.parse(storedAdmin)) } } catch (error) { console.error("Error al cargar admin:", error) localStorage.removeItem("adminToken") localStorage.removeItem("admin") } } setLoading(false) } initAuth() }, []) // Iniciar sesión de usuario const login = async (cedula: string, password: string): Promise => { try { const response = await authAPI.login(cedula, password) if (response.token && response.user) { localStorage.setItem("token", response.token) setUser(response.user) return true } return false } catch (error) { console.error("Error al iniciar sesión:", error) return false } } // Iniciar sesión de administrador const adminLogin = async (username: string, password: string): Promise => { try { const response = await authAPI.adminLogin(username, password) if (response.token && response.admin) { localStorage.setItem("adminToken", response.token) localStorage.setItem("admin", JSON.stringify(response.admin)) setAdmin(response.admin) return true } return false } catch (error) { console.error("Error al iniciar sesión como administrador:", error) return false } } // Registrar usuario const register = async (userData: Omit & { password: string }): Promise => { try { const response = await authAPI.register(userData) if (response.token && response.user) { localStorage.setItem("token", response.token) setUser(response.user) return true } return false } catch (error) { console.error("Error al registrar usuario:", error) return false } } // Cerrar sesión de usuario const logout = () => { setUser(null) localStorage.removeItem("token") } // Cerrar sesión de administrador const adminLogout = () => { setAdmin(null) localStorage.removeItem("adminToken") localStorage.removeItem("admin") } return ( {children} ) } // Hook personalizado para usar el contexto export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth debe ser usado dentro de un AuthProvider") } return context } [V0_FILE]typescriptreact:file="src/pages/Login.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Link, useNavigate } from "react-router-dom" import { Button } from "../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card" import { Input } from "../components/ui/input" import { Label } from "../components/ui/label" import { useToast } from "../hooks/use-toast" import { useAuth } from "../hooks/useAuth" export default function Login() { const { toast } = useToast() const { login } = useAuth() const navigate = useNavigate() const [formData, setFormData] = useState({ cedula: "", password: "", }) const [loading, setLoading] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { const success = await login(formData.cedula, formData.password) if (success) { toast({ title: "Inicio de sesión exitoso", description: "Bienvenido al sistema de citas con el alcalde.", }) navigate("/dashboard") } else { toast({ title: "Error de inicio de sesión", description: "Cédula o contraseña incorrecta. Intente nuevamente.", variant: "destructive", }) } } catch (error: any) { toast({ title: "Error", description: error.message || "Ocurrió un error al iniciar sesión. Intente nuevamente.", variant: "destructive", }) } finally { setLoading(false) } } return (

Alcaldía Municipal

Iniciar Sesión Ingresa tus credenciales para acceder al sistema de citas

Cédula

Contraseña

¿No tienes una cuenta?{" "} Regístrate aquí

Acceso para administradores

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescriptreact:file="src/pages/Register.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Link, useNavigate } from "react-router-dom" import { Button } from "../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card" import { Input } from "../components/ui/input" import { Label } from "../components/ui/label" import { useToast } from "../hooks/use-toast" import { useAuth } from "../hooks/useAuth" export default function Register() { const { toast } = useToast() const { register } = useAuth() const navigate = useNavigate() const [formData, setFormData] = useState({ nombre: "", apellido: "", cedula: "", telefono: "", password: "", confirmPassword: "", }) const [loading, setLoading] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { toast({ title: "Error", description: "Las contraseñas no coinciden", variant: "destructive", }) return } setLoading(true) try { const success = await register({ nombre: formData.nombre, apellido: formData.apellido, cedula: formData.cedula, telefono: formData.telefono, password: formData.password, }) if (success) { toast({ title: "Registro exitoso", description: "Tu cuenta ha sido creada correctamente.", }) navigate("/dashboard") } else { toast({ title: "Error de registro", description: "No se pudo completar el registro. Intente nuevamente.", variant: "destructive", }) } } catch (error: any) { toast({ title: "Error", description: error.message || "Ocurrió un error al registrar la cuenta. Intente nuevamente.", variant: "destructive", }) } finally { setLoading(false) } } return (

Alcaldía Municipal

Registro de Ciudadano Crea una cuenta para agendar citas con el alcalde

Nombre

Apellido

Cédula

Número de teléfono

Contraseña

Confirmar Contraseña

¿Ya tienes una cuenta?{" "} Inicia sesión aquí

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescriptreact:file="src/pages/admin/Login.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Link, useNavigate } from "react-router-dom" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { Input } from "../../components/ui/input" import { Label } from "../../components/ui/label" import { useToast } from "../../hooks/use-toast" import { useAuth } from "../../hooks/useAuth" export default function AdminLogin() { const { toast } = useToast() const navigate = useNavigate() const [formData, setFormData] = useState({ username: "", password: "", }) const [loading, setLoading] = useState(false) const { adminLogin } = useAuth() // Move the hook call to the top level const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { // Usar el hook de autenticación real const success = await adminLogin(formData.username, formData.password) if (success) { toast({ title: "Inicio de sesión exitoso", description: "Bienvenido al panel de administración.", }) navigate("/admin/dashboard") } else { toast({ title: "Error de inicio de sesión", description: "Usuario o contraseña incorrecta. Intente nuevamente.", variant: "destructive", }) } } catch (error: any) { toast({ title: "Error", description: error.message || "Ocurrió un error al iniciar sesión. Intente nuevamente.", variant: "destructive", }) } finally { setLoading(false) } } return (

Alcaldía Municipal

Acceso Administrativo Ingresa tus credenciales para acceder al panel de administración

Usuario

Contraseña

Credenciales de prueba:

Usuario: admin

Contraseña: admin

Volver al inicio

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescript:file="src/config/env.ts" isMerged="true" export const config = { API_BASE_URL: import.meta.env.VITE_API_BASE_URL || "http://localhost:3001/api", APP_NAME: "Sistema de Citas - Alcaldía Municipal", VERSION: "1.0.0", } [V0_FILE]plaintext:file=".env.example" isFixed="true" isQuickEdit="true" isMerged="true" # Base de datos DATABASE_URL="postgresql://username:password@localhost:5432/sistema_citas_alcaldia" # JWT JWT_SECRET="tu_jwt_secret_muy_seguro_aqui" JWT_EXPIRES_IN="7d" # Servidor PORT=3001 NODE_ENV=development # Frontend FRONTEND_URL="http://localhost:3000" # Admin por defecto DEFAULT_ADMIN_USERNAME="admin" DEFAULT_ADMIN_PASSWORD="admin123" # URL del backend API VITE_API_BASE_URL=http://localhost:3001/api # Configuración de la aplicación VITE_APP_NAME="Sistema de Citas - Alcaldía Municipal" VITE_APP_VERSION=1.0.0 [V0_FILE]json:file="package.json" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "react-router-dom": "^6.0.0", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="src/pages/admin/AssignAppointment.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Link, useNavigate } from "react-router-dom" import { format } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { Input } from "../../components/ui/input" import { Label } from "../../components/ui/label" import { Calendar } from "../../components/ui/calendar" import { useToast } from "../../hooks/use-toast" import { useAppointments, type TimeSlot } from "../../hooks/useAppointments" import { LogOut, CalendarDays, ArrowLeft, User, Phone, CreditCard, Clock } from "lucide-react" export default function AdminAssignAppointment() { const { toast } = useToast() const navigate = useNavigate() const { timeSlots, createAppointmentDirect } = useAppointments() const [selectedDate, setSelectedDate] = useState(undefined) const [selectedSlot, setSelectedSlot] = useState(null) const [formData, setFormData] = useState({ nombre: "", apellido: "", cedula: "", telefono: "", }) const [admin, setAdmin] = useState<{ id: string; nombre: string; rol: string } | null>(null) useEffect(() => { // Cargar datos del admin directamente de localStorage const adminData = localStorage.getItem("admin") if (adminData) { setAdmin(JSON.parse(adminData)) } }, []) const handleLogout = () => { localStorage.removeItem("admin") navigate("/admin") } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } // Filtrar horarios disponibles para la fecha seleccionada const availableSlotsForDate = selectedDate ? timeSlots.filter((slot) => slot.date === format(selectedDate, "yyyy-MM-dd") && slot.available) : [] const handleAssignAppointment = async () => { // Validar que todos los campos estén llenos if (!formData.nombre || !formData.apellido || !formData.cedula || !formData.telefono) { toast({ title: "Error", description: "Todos los campos son obligatorios.", variant: "destructive", }) return } if (!selectedSlot) { toast({ title: "Error", description: "Debes seleccionar un horario disponible.", variant: "destructive", }) return } try { const success = await createAppointmentDirect( formData.nombre, formData.apellido, formData.cedula, formData.telefono, selectedSlot.id, ) if (success) { toast({ title: "Cita asignada exitosamente", description: `La cita ha sido asignada para ${formData.nombre} ${formData.apellido} el ${format( new Date(selectedSlot.date), "PPP", { locale: es }, )} a las ${selectedSlot.time}.`, }) // Limpiar formulario setFormData({ nombre: "", apellido: "", cedula: "", telefono: "", }) setSelectedDate(undefined) setSelectedSlot(null) } else { toast({ title: "Error", description: "No se pudo asignar la cita. El horario ya no está disponible.", variant: "destructive", }) } } catch (error) { toast({ title: "Error", description: "Ocurrió un error al asignar la cita. Inténtalo de nuevo.", variant: "destructive", }) } } return (

Alcaldía Municipal

{admin?.nombre}

Rol: {admin?.rol}

Dashboard

Gestionar Horarios

Gestionar Citas

Asignar Cita

Datos del Ciudadano Ingresa la información del ciudadano
Nombre

Apellido

Cédula

Teléfono

Seleccionar Fecha Elige una fecha para la cita { setSelectedDate(date) setSelectedSlot(null) }} className="rounded-md border" disabled={(date) => { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} />

Horarios Disponibles {selectedDate ? `Horarios disponibles para el ${format(selectedDate, "PPP", { locale: es })}` : "Selecciona una fecha para ver los horarios disponibles"} {selectedDate ? ( availableSlotsForDate.length > 0 ? (
{availableSlotsForDate.map((slot) => ( ))}
) : (

No hay horarios disponibles

No hay horarios disponibles para esta fecha.

) ) : (

Selecciona una fecha

Selecciona una fecha en el calendario para ver los horarios disponibles

)} {selectedSlot && ( Resumen de la Cita Verifica los datos antes de asignar la cita

Ciudadano: {formData.nombre && formData.apellido ? `${formData.nombre} ${formData.apellido}` : "Pendiente"}

Cédula: {formData.cedula || "Pendiente"}

Teléfono: {formData.telefono || "Pendiente"}

Fecha: {format(new Date(selectedSlot.date), "PPP", { locale: es })}

Hora: {selectedSlot.time}

)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/prisma/seed.ts" isMerged="true" import { PrismaClient } from "@prisma/client" import bcrypt from "bcryptjs" const prisma = new PrismaClient() async function main() { console.log("🌱 Iniciando seed de la base de datos...") // Crear administrador por defecto const adminUsername = process.env.DEFAULT_ADMIN_USERNAME || "admin" const adminPassword = process.env.DEFAULT_ADMIN_PASSWORD || "admin123" console.log(`📝 Creando admin con username: ${adminUsername}`) const hashedPassword = await bcrypt.hash(adminPassword, 10) const admin = await prisma.admin.upsert({ where: { username: adminUsername }, update: { password: hashedPassword, // Actualizar contraseña si ya existe }, create: { nombre: "Administrador del Sistema", username: adminUsername, password: hashedPassword, rol: "secretaria", activo: true, }, }) console.log("✅ Administrador creado/actualizado:", { id: admin.id, username: admin.username, nombre: admin.nombre, activo: admin.activo, }) // Crear usuario de prueba const userPassword = await bcrypt.hash("password123", 10) const user = await prisma.user.upsert({ where: { cedula: "1234567890" }, update: {}, create: { nombre: "Juan", apellido: "Pérez", cedula: "1234567890", telefono: "3001234567", email: "juan.perez@email.com", password: userPassword, }, }) console.log("✅ Usuario de prueba creado:", user.cedula) // Crear algunos horarios de ejemplo const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(today.getDate() + 1) const timeSlots = [ { day: "lunes", date: tomorrow, time: "08:00", }, { day: "lunes", date: tomorrow, time: "09:00", }, { day: "lunes", date: tomorrow, time: "10:00", }, { day: "lunes", date: tomorrow, time: "11:00", }, ] for (const slot of timeSlots) { await prisma.timeSlot.upsert({ where: { date_time: { date: slot.date, time: slot.time, }, }, update: {}, create: slot, }) } console.log("✅ Horarios de ejemplo creados") // Verificar que el admin se creó correctamente const adminCheck = await prisma.admin.findUnique({ where: { username: adminUsername }, }) if (adminCheck) { console.log("🔍 Verificación del admin:") console.log(` - ID: ${adminCheck.id}`) console.log(` - Username: ${adminCheck.username}`) console.log(` - Nombre: ${adminCheck.nombre}`) console.log(` - Activo: ${adminCheck.activo}`) console.log(` - Contraseña hasheada: ${adminCheck.password.substring(0, 20)}...`) } console.log("🎉 Seed completado exitosamente!") console.log(`📋 Credenciales de admin: ${adminUsername} / ${adminPassword}`) } main() .catch((e) => { console.error("❌ Error durante el seed:", e) process.exit(1) }) .finally(async () => { await prisma.$disconnect() }) [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/routes/auth.ts" isMerged="true" import express from "express" import bcrypt from "bcryptjs" import jwt from "jsonwebtoken" import { prisma } from "../index" import { UserCreateSchema, UserLoginSchema, AdminLoginSchema } from "../types" const router = express.Router() // Endpoint para verificar si existe el admin (solo para debugging) router.get("/admin/check", async (req, res) => { try { const adminCount = await prisma.admin.count() const admins = await prisma.admin.findMany({ select: { id: true, username: true, nombre: true, activo: true, createdAt: true, }, }) res.json({ adminCount, admins, message: adminCount > 0 ? "Admins encontrados" : "No hay admins en la base de datos", }) } catch (error) { console.error("Error verificando admins:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Registro de usuario router.post("/register", async (req, res) => { try { const validatedData = UserCreateSchema.parse(req.body) // Verificar si el usuario ya existe const existingUser = await prisma.user.findUnique({ where: { cedula: validatedData.cedula }, }) if (existingUser) { return res.status(400).json({ error: "Ya existe un usuario con esta cédula" }) } // Hashear la contraseña const hashedPassword = await bcrypt.hash(validatedData.password, 10) // Crear usuario const user = await prisma.user.create({ data: { ...validatedData, password: hashedPassword, }, select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, email: true, createdAt: true, }, }) // Generar token const token = jwt.sign({ id: user.id, cedula: user.cedula, type: "user" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.status(201).json({ message: "Usuario registrado exitosamente", user, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en registro:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Login de usuario router.post("/login", async (req, res) => { try { const validatedData = UserLoginSchema.parse(req.body) // Buscar usuario const user = await prisma.user.findUnique({ where: { cedula: validatedData.cedula }, }) if (!user) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Verificar contraseña const isValidPassword = await bcrypt.compare(validatedData.password, user.password) if (!isValidPassword) { return res.status(401).json({ error: "Credenciales inválidas" }) } // Generar token const token = jwt.sign({ id: user.id, cedula: user.cedula, type: "user" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.json({ message: "Inicio de sesión exitoso", user: { id: user.id, nombre: user.nombre, apellido: user.apellido, cedula: user.cedula, telefono: user.telefono, email: user.email, }, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en login:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Login de administrador router.post("/admin/login", async (req, res) => { try { const validatedData = AdminLoginSchema.parse(req.body) console.log(`🔍 Intentando login admin con username: ${validatedData.username}`) // Buscar administrador const admin = await prisma.admin.findUnique({ where: { username: validatedData.username }, }) console.log( `📋 Admin encontrado:`, admin ? { id: admin.id, username: admin.username, activo: admin.activo, hasPassword: !!admin.password, } : "No encontrado", ) if (!admin) { console.log("❌ Admin no encontrado") return res.status(401).json({ error: "Credenciales inválidas" }) } if (!admin.activo) { console.log("❌ Admin inactivo") return res.status(401).json({ error: "Cuenta de administrador inactiva" }) } // Verificar contraseña console.log(`🔐 Verificando contraseña...`) const isValidPassword = await bcrypt.compare(validatedData.password, admin.password) if (!isValidPassword) { console.log("❌ Contraseña incorrecta") return res.status(401).json({ error: "Credenciales inválidas" }) } console.log("✅ Login exitoso") // Generar token const token = jwt.sign({ id: admin.id, username: admin.username, type: "admin" }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN || "7d", }) res.json({ message: "Inicio de sesión exitoso", admin: { id: admin.id, nombre: admin.nombre, username: admin.username, rol: admin.rol, }, token, }) } catch (error: any) { if (error.name === "ZodError") { return res.status(400).json({ error: "Datos inválidos", details: error.errors, }) } console.error("Error en login admin:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]plaintext:file="backend-sistemas-alcaldia/.env.example" isMerged="true" # Base de datos DATABASE_URL="postgresql://username:password@localhost:5432/sistema_citas_alcaldia" # JWT JWT_SECRET="tu_jwt_secret_muy_seguro_aqui" JWT_EXPIRES_IN="7d" # Servidor PORT=3001 NODE_ENV=development # Frontend FRONTEND_URL="http://localhost:3000" # Admin por defecto (IMPORTANTE: Estas son las credenciales que se crearán en el seed) DEFAULT_ADMIN_USERNAME="admin" DEFAULT_ADMIN_PASSWORD="admin123" [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/types/index.ts" isEdit="true" isMerged="true" import { z } from "zod" // Esquemas de validación con Zod export const UserCreateSchema = z.object({ nombre: z.string().min(2, "El nombre debe tener al menos 2 caracteres"), apellido: z.string().min(2, "El apellido debe tener al menos 2 caracteres"), cedula: z.string().min(6, "La cédula debe tener al menos 6 caracteres"), telefono: z.string().min(10, "El teléfono debe tener al menos 10 caracteres"), email: z.string().email("Email inválido").optional(), password: z.string().min(6, "La contraseña debe tener al menos 6 caracteres"), }) export const UserLoginSchema = z.object({ cedula: z.string().min(1, "La cédula es requerida"), password: z.string().min(1, "La contraseña es requerida"), }) export const AdminLoginSchema = z.object({ username: z.string().min(1, "El usuario es requerido"), password: z.string().min(1, "La contraseña es requerida"), }) export const TimeSlotCreateSchema = z.object({ day: z.string().min(1, "El día es requerido"), date: z.string().min(1, "La fecha es requerida"), time: z.string().regex(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/, "Formato de hora inválido (HH:mm)"), }) export const AppointmentCreateSchema = z.object({ timeSlotId: z.string().min(1, "El horario es requerido"), userName: z.string().min(2, "El nombre debe tener al menos 2 caracteres").optional(), userLastName: z.string().min(2, "El apellido debe tener al menos 2 caracteres").optional(), userCedula: z.string().min(6, "La cédula debe tener al menos 6 caracteres").optional(), userPhone: z.string().optional(), isRegisteredUser: z.boolean().default(true), notes: z.string().optional(), }) export const AppointmentCreateDirectSchema = z.object({ timeSlotId: z.string().min(1, "El horario es requerido"), userName: z.string().min(2, "El nombre debe tener al menos 2 caracteres"), userLastName: z.string().min(2, "El apellido debe tener al menos 2 caracteres"), userCedula: z.string().min(6, "La cédula debe tener al menos 6 caracteres"), userPhone: z.string().optional(), notes: z.string().optional(), }) export const AppointmentUpdateSchema = z.object({ status: z.enum(["CONFIRMADA", "CANCELADA", "REPROGRAMADA", "COMPLETADA"]).optional(), timeSlotId: z.string().optional(), newTimeSlotId: z.string().optional(), notes: z.string().optional(), }) // Tipos TypeScript export type UserCreate = z.infer export type UserLogin = z.infer export type AdminLogin = z.infer export type TimeSlotCreate = z.infer export type AppointmentCreate = z.infer export type AppointmentCreateDirect = z.infer export type AppointmentUpdate = z.infer // Interfaz base para JWT export interface JWTPayload { id: string type: "user" | "admin" // Propiedades opcionales que pueden estar presentes cedula?: string username?: string nombre?: string apellido?: string telefono?: string rol?: string } // Tipos específicos para usuarios y admins export interface UserJWTPayload extends JWTPayload { type: "user" cedula: string nombre: string apellido: string telefono: string } export interface AdminJWTPayload extends JWTPayload { type: "admin" username: string rol: string } // Exportar explícitamente los tipos [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/middleware/auth.ts" isEdit="true" isMerged="true" import type { Request, Response, NextFunction } from "express" import jwt from "jsonwebtoken" import type { JWTPayload, UserJWTPayload, AdminJWTPayload } from "../types" // Extender el tipo Request para incluir user declare global { namespace Express { interface Request { user?: JWTPayload userDetails?: UserJWTPayload adminDetails?: AdminJWTPayload } } } export const authenticateToken = (req: Request, res: Response, next: NextFunction) => { const authHeader = req.headers["authorization"] const token = authHeader && authHeader.split(" ")[1] if (!token) { return res.status(401).json({ error: "Token de acceso requerido" }) } jwt.verify(token, process.env.JWT_SECRET!, (err, decoded) => { if (err) { return res.status(403).json({ error: "Token inválido" }) } req.user = decoded as JWTPayload // Agregar detalles específicos según el tipo if (req.user.type === "user") { req.userDetails = decoded as UserJWTPayload } else if (req.user.type === "admin") { req.adminDetails = decoded as AdminJWTPayload } next() }) } export const requireAdmin = (req: Request, res: Response, next: NextFunction) => { if (!req.user || req.user.type !== "admin") { return res.status(403).json({ error: "Acceso denegado. Se requieren permisos de administrador" }) } next() } export const requireUser = (req: Request, res: Response, next: NextFunction) => { if (!req.user || req.user.type !== "user") { return res.status(403).json({ error: "Acceso denegado. Se requiere ser usuario registrado" }) } next() } [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/index.ts" isEdit="true" isMerged="true" import express from "express" import cors from "cors" import helmet from "helmet" import { PrismaClient } from "@prisma/client" const app = express() const PORT = process.env.PORT || 3001 // Inicializar Prisma y exportarlo export const prisma = new PrismaClient() // Middleware de seguridad app.use(helmet()) // Configurar CORS app.use( cors({ origin: process.env.FRONTEND_URL || "http://localhost:5173", credentials: true, methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], allowedHeaders: ["Content-Type", "Authorization"], }), ) // Middleware para parsing JSON app.use(express.json({ limit: "10mb" })) app.use(express.urlencoded({ extended: true })) // Logging middleware app.use((req, res, next) => { console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`) next() }) // Importar rutas después de inicializar prisma import authRoutes from "./routes/auth" import userRoutes from "./routes/users" import timeSlotsRoutes from "./routes/timeSlots" import appointmentsRoutes from "./routes/appointments" import adminRoutes from "./routes/admin" // Registrar rutas de la API app.use("/api/auth", authRoutes) app.use("/api/users", userRoutes) app.use("/api/time-slots", timeSlotsRoutes) app.use("/api/appointments", appointmentsRoutes) app.use("/api/admin", adminRoutes) // Ruta de salud app.get("/api/health", (req, res) => { res.json({ status: "OK", timestamp: new Date().toISOString(), routes: [ "GET /api/health", "POST /api/auth/login", "POST /api/auth/register", "POST /api/auth/admin/login", "GET /api/time-slots", "POST /api/time-slots", "GET /api/appointments", "POST /api/appointments", "GET /api/admin/stats", ], }) }) // Middleware para debug de rutas app.use((req, res, next) => { console.log(`🔍 Ruta solicitada: ${req.method} ${req.path}`) console.log(`🔍 Headers:`, req.headers) next() }) // Manejo de rutas no encontradas app.use("", (req, res) => { console.log(`❌ Ruta no encontrada: ${req.method} ${req.originalUrl}`) console.log(`❌ Rutas registradas:`) console.log(` - /api/auth/`) console.log(` - /api/users/`) console.log(` - /api/time-slots/`) console.log(` - /api/appointments/`) console.log(` - /api/admin/`) res.status(404).json({ error: "Ruta no encontrada", path: req.originalUrl, method: req.method, availableRoutes: [ "/api/health", "/api/auth/login", "/api/auth/register", "/api/auth/admin/login", "/api/time-slots", "/api/appointments", "/api/admin/stats", ], }) }) // Manejo de errores global app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => { console.error("❌ Error no manejado:", err) res.status(500).json({ error: "Error interno del servidor", message: process.env.NODE_ENV === "development" ? err.message : "Algo salió mal", }) }) // Conectar a la base de datos y iniciar servidor async function startServer() { try { await prisma.$connect() console.log("✅ Conectado a la base de datos") app.listen(PORT, () => { console.log(`🚀 Servidor corriendo en http://localhost:${PORT}`) console.log(`📚 Rutas disponibles:`) console.log(` - GET /api/health`) console.log(` - POST /api/auth/login`) console.log(` - POST /api/auth/register`) console.log(` - POST /api/auth/admin/login`) console.log(` - GET /api/time-slots`) console.log(` - POST /api/time-slots`) console.log(` - GET /api/appointments`) console.log(` - POST /api/appointments`) console.log(` - GET /api/admin/stats`) console.log(`\n🔧 Para probar la API:`) console.log(` curl http://localhost:${PORT}/api/health`) }) } catch (error) { console.error("❌ Error al conectar con la base de datos:", error) process.exit(1) } } // Manejo de cierre graceful process.on("SIGINT", async () => { console.log("\n🔄 Cerrando servidor...") await prisma.$disconnect() process.exit(0) }) process.on("SIGTERM", async () => { console.log("\n🔄 Cerrando servidor...") await prisma.$disconnect() process.exit(0) }) startServer() [V0_FILE]typescriptreact:file="src/pages/admin/RescheduleAppointment.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link, useNavigate, useSearchParams } from "react-router-dom" import { format, parseISO } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card" import { Calendar } from "../../components/ui/calendar" import { Badge } from "../../components/ui/badge" import { useToast } from "../../hooks/use-toast" import { useAppointments } from "../../hooks/useAppointments" import { LogOut, Clock, ArrowLeft } from "lucide-react" export default function AdminRescheduleAppointment() { const { toast } = useToast() const navigate = useNavigate() const [searchParams] = useSearchParams() const appointmentId = searchParams.get("appointmentId") const { appointments, timeSlots, rescheduleAppointment, loading } = useAppointments() const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedTimeSlot, setSelectedTimeSlot] = useState("") const [appointment, setAppointment] = useState(null) const [admin, setAdmin] = useState<{ id: string; nombre: string; rol: string } | null>(null) useEffect(() => { // Cargar datos del admin const adminData = localStorage.getItem("admin") if (adminData) { setAdmin(JSON.parse(adminData)) } }, []) useEffect(() => { // Buscar la cita por ID if (appointmentId && appointments.length > 0) { const found = appointments.find((a) => a.id === appointmentId) if (found) { setAppointment(found) } else { toast({ title: "Error", description: "Cita no encontrada.", variant: "destructive", }) navigate("/admin/citas") } } }, [appointmentId, appointments, navigate, toast]) const handleLogout = () => { localStorage.removeItem("admin") navigate("/admin") } // Filtrar horarios disponibles para la fecha seleccionada const availableSlots = selectedDate ? timeSlots.filter((slot) => { const slotDate = parseISO(slot.date) return format(slotDate, "yyyy-MM-dd") === format(selectedDate, "yyyy-MM-dd") && slot.available }) : [] const handleReschedule = async () => { if (!selectedTimeSlot) { toast({ title: "Error", description: "Debes seleccionar un nuevo horario.", variant: "destructive", }) return } if (!appointmentId) { toast({ title: "Error", description: "ID de cita no válido.", variant: "destructive", }) return } try { const success = await rescheduleAppointment(appointmentId, selectedTimeSlot) if (success) { toast({ title: "Cita reprogramada", description: "La cita ha sido reprogramada exitosamente.", }) navigate("/admin/citas") } } catch (error: any) { toast({ title: "Error", description: error.message || "No se pudo reprogramar la cita.", variant: "destructive", }) } } if (!appointment) { return (

Cargando información de la cita...

) } return (

Alcaldía Municipal

{admin?.nombre}

Rol: {admin?.rol}

Dashboard

Gestionar Horarios

Gestionar Citas

Reprogramar Cita

Información de la Cita Detalles de la cita a reprogramar

Ciudadano

{appointment.userName} {appointment.userLastName}

Cédula

{appointment.userCedula}

Fecha Actual

{format(parseISO(appointment.date), "PPP", { locale: es })}

Hora Actual

{appointment.time}

Estado
{appointment.status}

Seleccionar Nueva Fecha y Hora Elige la nueva fecha y horario para la cita

Seleccionar Fecha
{ const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} />
{selectedDate && (

Horarios Disponibles - {format(selectedDate, "PPP", { locale: es })}
{availableSlots.length > 0 ? (
{availableSlots.map((slot) => ( ))}
) : (
No hay horarios disponibles para esta fecha
)}
)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/routes/timeSlots.ts" isEdit="true" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireAdmin } from "../middleware/auth" import { TimeSlotCreateSchema } from "../types" import { startOfDay, endOfDay } from "date-fns" const router = express.Router() // Obtener horarios disponibles (público - sin autenticación) router.get("/available", async (req, res) => { try { const { date, startDate, endDate } = req.query const whereClause: any = { available: true, } if (date) { const targetDate = new Date(date as string) whereClause.date = { gte: startOfDay(targetDate), lte: endOfDay(targetDate), } } else if (startDate && endDate) { whereClause.date = { gte: new Date(startDate as string), lte: new Date(endDate as string), } } else { // Por defecto, mostrar horarios desde hoy en adelante whereClause.date = { gte: startOfDay(new Date()), } } const timeSlots = await prisma.timeSlot.findMany({ where: whereClause, orderBy: [{ date: "asc" }, { time: "asc" }], }) res.json({ timeSlots }) } catch (error) { console.error("Error al obtener horarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener todos los horarios (usuarios autenticados pueden ver todos para consultar) router.get("/", authenticateToken, async (req, res) => { try { const { date, available } = req.query const whereClause: any = {} if (date) { const targetDate = new Date(date as string) whereClause.date = { gte: startOfDay(targetDate), lte: endOfDay(targetDate), } } if (available !== undefined) { whereClause.available = available === "true" } const timeSlots = await prisma.timeSlot.findMany({ where: whereClause, include: { appointment: { select: { id: true, userName: true, userLastName: true, userCedula: true, status: true, }, }, }, orderBy: [{ date: "asc" }, { time: "asc" }], }) res.json({ timeSlots }) } catch (error) { console.error("Error al obtener horarios:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Crear horarios (solo admin) - MEJORADO router.post("/", authenticateToken, requireAdmin, async (req, res) => { try { console.log("📝 Datos recibidos:", req.body) const slotsData = req.body.slots || req.body const slots = Array.isArray(slotsData) ? slotsData : [slotsData] console.log("📋 Slots a procesar:", slots) const validatedSlots = [] for (const slot of slots) { try { const validatedSlot = TimeSlotCreateSchema.parse(slot) validatedSlots.push(validatedSlot) } catch (validationError: any) { console.error("❌ Error de validación en slot:", slot, validationError.errors) return res.status(400).json({ error: "Datos inválidos en slot", details: validationError.errors, slot: slot, }) } } const createdSlots = [] const errors = [] const skipped = [] for (const slot of validatedSlots) { try { // Verificar si ya existe un horario para esa fecha y hora const existing = await prisma.timeSlot.findFirst({ where: { date: new Date(slot.date), time: slot.time, }, }) if (existing) { const message = `Ya existe un horario para ${slot.date} a las ${slot.time}` console.log("⚠️ Horario duplicado:", message) skipped.push(message) continue } const createdSlot = await prisma.timeSlot.create({ data: { day: slot.day, date: new Date(slot.date), time: slot.time, available: true, }, }) console.log("✅ Horario creado:", createdSlot) createdSlots.push(createdSlot) } catch (dbError: any) { console.error("❌ Error de base de datos:", dbError) errors.push(`Error al crear horario para ${slot.date} ${slot.time}: ${dbError.message}`) } } // Respuesta mejorada if (createdSlots.length === 0) { if (skipped.length > 0) { return res.status(200).json({ message: "No se crearon nuevos horarios", details: "Todos los horarios ya existen", skipped: skipped, timeSlots: [], }) } else if (errors.length > 0) { return res.status(400).json({ error: "No se pudo crear ningún horario", details: errors, }) } } const response: any = { message: `${createdSlots.length} horarios creados exitosamente`, timeSlots: createdSlots, } if (skipped.length > 0) { response.skipped = skipped response.message += ` (${skipped.length} ya existían)` } if (errors.length > 0) { response.errors = errors } res.status(201).json(response) } catch (error: any) { console.error("❌ Error general al crear horarios:", error) res.status(500).json({ error: "Error interno del servidor", details: error.message, }) } }) // Eliminar horario (solo admin) router.delete("/:id", authenticateToken, requireAdmin, async (req, res) => { try { const { id } = req.params const timeSlot = await prisma.timeSlot.findUnique({ where: { id }, include: { appointment: true }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (timeSlot.appointment) { return res.status(400).json({ error: "No se puede eliminar un horario que tiene una cita asociada", }) } await prisma.timeSlot.delete({ where: { id }, }) res.json({ message: "Horario eliminado exitosamente" }) } catch (error) { console.error("Error al eliminar horario:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) export default router [V0_FILE]typescriptreact:file="src/pages/admin/Schedule.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link, useNavigate } from "react-router-dom" import { format, addDays } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { Calendar } from "../../components/ui/calendar" import { Checkbox } from "../../components/ui/checkbox" import { Label } from "../../components/ui/label" import { useToast } from "../../hooks/use-toast" import { useAppointments } from "../../hooks/useAppointments" import { LogOut, CalendarDays, Plus, Clock } from "lucide-react" import { Badge } from "../../components/ui/badge" // Horarios disponibles const AVAILABLE_HOURS = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] // Días de la semana const WEEKDAYS = [ { id: "lunes", label: "Lunes" }, { id: "martes", label: "Martes" }, { id: "miercoles", label: "Miércoles" }, { id: "jueves", label: "Jueves" }, { id: "viernes", label: "Viernes" }, ] export default function AdminSchedule() { const { toast } = useToast() const navigate = useNavigate() const { timeSlots, createTimeSlots, loading, refreshData } = useAppointments() const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedHours, setSelectedHours] = useState>({}) const [weeklyConfig, setWeeklyConfig] = useState>>({ lunes: {}, martes: {}, miercoles: {}, jueves: {}, viernes: {}, }) const [admin, setAdmin] = useState<{ id: string; nombre: string; rol: string } | null>(null) useEffect(() => { // Cargar datos del admin directamente de localStorage const adminData = localStorage.getItem("admin") if (adminData) { setAdmin(JSON.parse(adminData)) } }, []) // Refrescar datos cuando se monta el componente useEffect(() => { refreshData() }, []) const handleLogout = () => { localStorage.removeItem("admin") localStorage.removeItem("adminToken") navigate("/admin") } const handleToggleHour = (hour: string) => { setSelectedHours((prev) => ({ ...prev, [hour]: !prev[hour], })) } const handleToggleWeeklyHour = (day: string, hour: string) => { setWeeklyConfig((prev) => ({ ...prev, [day]: { ...prev[day], [hour]: !prev[day][hour], }, })) } const handleSaveWeeklyConfig = async () => { // Verificar si hay horarios seleccionados let hasSelectedHours = false for (const day in weeklyConfig) { for (const hour in weeklyConfig[day]) { if (weeklyConfig[day][hour]) { hasSelectedHours = true break } } if (hasSelectedHours) break } if (!hasSelectedHours) { toast({ title: "Error", description: "Debes seleccionar al menos un horario para algún día.", variant: "destructive", }) return } // Crear slots para cada día con sus horarios seleccionados const newSlots: Array<{ day: string; date: string; time: string }> = [] const today = new Date() // Encontrar el próximo lunes para empezar la semana const nextMonday = new Date(today) const dayOfWeek = today.getDay() // 0 = domingo, 1 = lunes, etc. const daysUntilMonday = dayOfWeek === 0 ? 1 : dayOfWeek === 1 ? 0 : 8 - dayOfWeek nextMonday.setDate(today.getDate() + daysUntilMonday) // Crear slots para cada día de la semana WEEKDAYS.forEach((day, index) => { const date = new Date(nextMonday) date.setDate(nextMonday.getDate() + index) // Obtener horarios seleccionados para este día const selectedHoursForDay = Object.entries(weeklyConfig[day.id]) .filter(([_, selected]) => selected) .map(([hour]) => hour) // Crear slots para cada hora seleccionada for (const hour of selectedHoursForDay) { newSlots.push({ day: day.label.toLowerCase(), date: format(date, "yyyy-MM-dd"), time: hour, }) } }) if (newSlots.length > 0) { const success = await createTimeSlots(newSlots) if (success) { toast({ title: "Configuración guardada", description: `Se han creado ${newSlots.length} horarios para la próxima semana.`, }) // Limpiar selección setWeeklyConfig({ lunes: {}, martes: {}, miercoles: {}, jueves: {}, viernes: {}, }) } else { toast({ title: "Error", description: "No se pudieron crear los horarios. Intenta de nuevo.", variant: "destructive", }) } } } const handleCreateTimeSlots = async () => { if (!selectedDate) { toast({ title: "Error", description: "Debes seleccionar una fecha.", variant: "destructive", }) return } // Verificar que no sea fin de semana const dayOfWeek = selectedDate.getDay() if (dayOfWeek === 0 || dayOfWeek === 6) { toast({ title: "Error", description: "No se pueden crear horarios para fines de semana.", variant: "destructive", }) return } const selectedHoursList = Object.entries(selectedHours) .filter(([_, selected]) => selected) .map(([hour]) => hour) if (selectedHoursList.length === 0) { toast({ title: "Error", description: "Debes seleccionar al menos un horario.", variant: "destructive", }) return } // CORREGIDO: Crear slots para la fecha seleccionada sin conversión de zona horaria const newSlots: Array<{ day: string; date: string; time: string }> = selectedHoursList.map((hour) => { const dayName = format(selectedDate, "EEEE", { locale: es }) const dateString = format(selectedDate, "yyyy-MM-dd") console.log("🗓️ Creando slot:", { selectedDate, dayName, dateString, hour, }) return { day: dayName, date: dateString, time: hour, } }) console.log("📋 Slots a crear:", newSlots) const success = await createTimeSlots(newSlots) if (success) { toast({ title: "Horarios creados", description: `Se han creado ${newSlots.length} horarios para el ${format(selectedDate, "PPP", { locale: es, })}.`, }) // Limpiar selección setSelectedHours({}) } else { toast({ title: "Error", description: "No se pudieron crear los horarios. Intenta de nuevo.", variant: "destructive", }) } } const handleCreateWeekSlots = async () => { if (!selectedDate) { toast({ title: "Error", description: "Debes seleccionar una fecha de inicio.", variant: "destructive", }) return } const selectedHoursList = Object.entries(selectedHours) .filter(([_, selected]) => selected) .map(([hour]) => hour) if (selectedHoursList.length === 0) { toast({ title: "Error", description: "Debes seleccionar al menos un horario.", variant: "destructive", }) return } // Crear slots para toda la semana (5 días laborables) const newSlots: Array<{ day: string; date: string; time: string }> = [] for (let i = 0; i < 5; i++) { const currentDate = addDays(selectedDate, i) const dayOfWeek = format(currentDate, "EEEE", { locale: es }) // Solo crear slots para días laborables (lunes a viernes) const dayNumber = currentDate.getDay() if (dayNumber >= 1 && dayNumber <= 5) { for (const hour of selectedHoursList) { newSlots.push({ day: dayOfWeek, date: format(currentDate, "yyyy-MM-dd"), time: hour, }) } } } const success = await createTimeSlots(newSlots) if (success) { toast({ title: "Horarios creados", description: `Se han creado ${newSlots.length} horarios para la semana.`, }) // Limpiar selección setSelectedHours({}) } else { toast({ title: "Error", description: "No se pudieron crear los horarios. Intenta de nuevo.", variant: "destructive", }) } } // CORREGIDO: Filtrar slots para la fecha seleccionada const slotsForSelectedDate = selectedDate ? timeSlots.filter((slot) => { // Extraer solo la fecha (YYYY-MM-DD) de la fecha del slot const slotDateOnly = slot.date.split("T")[0] const selectedDateOnly = format(selectedDate, "yyyy-MM-dd") console.log("🔍 Comparando fechas:", { slotDate: slot.date, slotDateOnly, selectedDateOnly, match: slotDateOnly === selectedDateOnly, }) return slotDateOnly === selectedDateOnly }) : [] console.log("📅 Horarios para fecha seleccionada:", { selectedDate: selectedDate ? format(selectedDate, "yyyy-MM-dd") : null, totalSlots: timeSlots.length, filteredSlots: slotsForSelectedDate.length, slotsForSelectedDate, allTimeSlots: timeSlots, }) return (

Alcaldía Municipal

{admin?.nombre}

Rol: {admin?.rol}

Dashboard

Gestionar Horarios

Gestionar Citas

Gestionar Horarios de Atención

Seleccionar Fecha Elige una fecha para configurar horarios { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} /> Horarios Existentes {selectedDate ? `Horarios para el ${format(selectedDate, "PPP", { locale: es })}` : "Selecciona una fecha para ver los horarios"} {slotsForSelectedDate.length > 0 ? (
{slotsForSelectedDate.map((slot) => (

{slot.time}
{slot.available ? "Disponible" : "Ocupado"}
))}
) : (
No hay horarios configurados para esta fecha
)} {/ Debug info /} Debug Info

Total slots: {timeSlots.length}

Filtered slots: {slotsForSelectedDate.length}

Selected date: {selectedDate ? format(selectedDate, "yyyy-MM-dd") : "None"}

Configurar Nuevos Horarios {selectedDate ? `Configurar horarios para el ${format(selectedDate, "PPP", { locale: es })}` : "Selecciona una fecha y los horarios que deseas habilitar"}

Selecciona los horarios a habilitar:

{AVAILABLE_HOURS.map((hour) => (
handleToggleHour(hour)} /> {hour}
))}

Configuración Rápida por Día Selecciona los días y horarios que el alcalde atenderá regularmente
{WEEKDAYS.map((day) => (

{day.label}

{AVAILABLE_HOURS.map((hour) => (
handleToggleWeeklyHour(day.id, hour)} /> {hour}
))}

))}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescriptreact:file="src/hooks/useAppointments.tsx" isEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode, useEffect } from "react" import { timeSlotsAPI, appointmentsAPI } from "../services/api" // Tipos exportados export interface TimeSlot { id: string day: string date: string time: string available: boolean appointmentId?: string } export interface Appointment { id: string userId: string userName: string userLastName: string userCedula: string userPhone?: string slotId: string day: string date: string time: string status: "confirmada" | "cancelada" | "reprogramada" | "completada" isRegisteredUser?: boolean } interface AppointmentsContextType { timeSlots: TimeSlot[] appointments: Appointment[] loading: boolean error: string | null createTimeSlots: (slots: Omit[]) => Promise bookAppointment: (slotId: string) => Promise createAppointmentDirect: ( userName: string, userLastName: string, userCedula: string, userPhone: string, slotId: string, ) => Promise cancelAppointment: (appointmentId: string) => Promise rescheduleAppointment: (appointmentId: string, newSlotId: string) => Promise getUserAppointments: (userId: string) => Appointment[] getAvailableTimeSlots: () => TimeSlot[] refreshData: () => Promise clearCache: () => void } // Crear contexto const AppointmentsContext = createContext(undefined) // Proveedor del contexto export const AppointmentsProvider = ({ children }: { children: ReactNode }) => { const [timeSlots, setTimeSlots] = useState([]) const [appointments, setAppointments] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) // Limpiar cache const clearCache = () => { console.log("🧹 Limpiando cache...") setTimeSlots([]) setAppointments([]) setError(null) } // Cargar datos iniciales const refreshData = async () => { try { console.log("🔄 Refrescando datos...") setLoading(true) setError(null) // Limpiar datos anteriores setTimeSlots([]) setAppointments([]) const [slotsResponse, appointmentsResponse] = await Promise.all([timeSlotsAPI.getAll(), appointmentsAPI.getAll()]) console.log("📡 Respuesta del backend:", { slotsResponse, appointmentsResponse, }) // Mapear los datos del backend al formato del frontend const mappedSlots: TimeSlot[] = (slotsResponse.timeSlots || []).map((slot: any) => ({ id: slot.id, day: slot.day, date: slot.date, // Mantener la fecha tal como viene del backend time: slot.time, available: slot.available, appointmentId: slot.appointmentId, })) const mappedAppointments: Appointment[] = (appointmentsResponse.appointments || []).map((appointment: any) => ({ id: appointment.id, userId: appointment.userId, userName: appointment.userName, userLastName: appointment.userLastName, userCedula: appointment.userCedula, userPhone: appointment.userPhone, slotId: appointment.timeSlotId, day: appointment.timeSlot?.day || "", date: appointment.timeSlot?.date || "", time: appointment.timeSlot?.time || "", status: appointment.status.toLowerCase() as "confirmada" | "cancelada" | "reprogramada" | "completada", isRegisteredUser: appointment.isRegisteredUser, })) console.log("✅ Datos procesados:", { slots: mappedSlots.length, appointments: mappedAppointments.length, mappedSlots, mappedAppointments, }) setTimeSlots(mappedSlots) setAppointments(mappedAppointments) } catch (error: any) { console.error("❌ Error al cargar datos:", error) setError(error.message || "Error al cargar datos") // En caso de error, asegurar que los arrays estén vacíos setTimeSlots([]) setAppointments([]) } finally { setLoading(false) } } useEffect(() => { refreshData() }, []) // Crear horarios disponibles const createTimeSlots = async (slots: Omit[]): Promise => { try { setLoading(true) setError(null) console.log("📝 Creando horarios:", slots) await timeSlotsAPI.create(slots) await refreshData() // Recargar datos inmediatamente return true } catch (error: any) { console.error("Error al crear horarios:", error) setError(error.message || "Error al crear horarios") return false } finally { setLoading(false) } } // Reservar cita (para usuarios registrados) const bookAppointment = async (slotId: string): Promise => { try { setLoading(true) setError(null) await appointmentsAPI.create(slotId) await refreshData() // Recargar datos inmediatamente return true } catch (error: any) { console.error("Error al reservar cita:", error) setError(error.message || "Error al reservar cita") return false } finally { setLoading(false) } } // Crear cita directamente (para admin) const createAppointmentDirect = async ( userName: string, userLastName: string, userCedula: string, userPhone: string, slotId: string, ): Promise => { try { setLoading(true) setError(null) await appointmentsAPI.createDirect({ userName, userLastName, userCedula, userPhone, slotId, }) await refreshData() // Recargar datos inmediatamente return true } catch (error: any) { console.error("Error al crear cita directa:", error) setError(error.message || "Error al crear cita directa") return false } finally { setLoading(false) } } // Cancelar cita const cancelAppointment = async (appointmentId: string): Promise => { try { setLoading(true) setError(null) await appointmentsAPI.cancel(appointmentId) await refreshData() // Recargar datos inmediatamente return true } catch (error: any) { console.error("Error al cancelar cita:", error) setError(error.message || "Error al cancelar cita") return false } finally { setLoading(false) } } // Reprogramar cita const rescheduleAppointment = async (appointmentId: string, newSlotId: string): Promise => { try { setLoading(true) setError(null) await appointmentsAPI.reschedule(appointmentId, newSlotId) await refreshData() // Recargar datos inmediatamente return true } catch (error: any) { console.error("Error al reprogramar cita:", error) setError(error.message || "Error al reprogramar cita") return false } finally { setLoading(false) } } // Obtener citas de un usuario (función local para compatibilidad) const getUserAppointments = (userId: string): Appointment[] => { return appointments.filter((a) => a.userId === userId && a.status !== "cancelada") } // Obtener horarios disponibles (función local para compatibilidad) const getAvailableTimeSlots = (): TimeSlot[] => { return timeSlots.filter((slot) => slot.available) } return ( {children} ) } // Hook personalizado para usar el contexto export const useAppointments = () => { const context = useContext(AppointmentsContext) if (context === undefined) { throw new Error("useAppointments debe ser usado dentro de un AppointmentsProvider") } return context } [V0_FILE]typescript:file="src/services/api.ts" isEdit="true" isMerged="true" import { config } from "../config/env" const API_BASE_URL = config.API_BASE_URL // Función helper para hacer requests con autenticación const makeRequest = async (url: string, options: RequestInit = {}) => { const token = localStorage.getItem("token") const adminToken = localStorage.getItem("adminToken") console.log("🌐 API Request:", options.method || "GET", `${API_BASE_URL}${url}`) const headers: Record = { "Content-Type": "application/json", } if (options.headers) { Object.assign(headers, options.headers) } // Lógica simple: usar token de usuario para endpoints de usuario, admin para endpoints de admin if (url.includes("/appointments/user") || (url.includes("/appointments") && options.method === "POST")) { // Endpoints de usuario: usar token de usuario if (token) { headers.Authorization = `Bearer ${token}` console.log("🔐 Usando token de usuario") } } else if (url.includes("/time-slots") && options.method === "POST") { // Crear horarios: usar token de admin if (adminToken) { headers.Authorization = `Bearer ${adminToken}` console.log("🔐 Usando token de admin") } } else { // Para otros casos, usar el token que esté disponible if (adminToken) { headers.Authorization = `Bearer ${adminToken}` console.log("🔐 Usando token de admin") } else if (token) { headers.Authorization = `Bearer ${token}` console.log("🔐 Usando token de usuario") } } const response = await fetch(`${API_BASE_URL}${url}`, { ...options, headers, }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) console.error("❌ API Error:", errorData) throw new Error(errorData.error || errorData.message || `HTTP error! status: ${response.status}`) } const data = await response.json() console.log("✅ API Response:", data) return data } // API de Autenticación export const authAPI = { login: async (cedula: string, password: string) => { return makeRequest("/auth/login", { method: "POST", body: JSON.stringify({ cedula, password }), }) }, register: async (userData: { nombre: string apellido: string cedula: string telefono: string password: string }) => { return makeRequest("/auth/register", { method: "POST", body: JSON.stringify(userData), }) }, adminLogin: async (username: string, password: string) => { return makeRequest("/auth/admin/login", { method: "POST", body: JSON.stringify({ username, password }), }) }, getProfile: async () => { return makeRequest("/auth/profile") }, } // API de Horarios export const timeSlotsAPI = { // Obtener todos los horarios (requiere autenticación) getAll: async () => { return makeRequest("/time-slots") }, // Obtener horarios disponibles (público) getAvailable: async (date?: string) => { const url = date ? `/time-slots/available?date=${date}` : "/time-slots/available" return makeRequest(url) }, create: async ( slots: Array<{ day: string date: string time: string }>, ) => { console.log("Enviando slots al backend:", slots) return makeRequest("/time-slots", { method: "POST", body: JSON.stringify({ slots }), }) }, delete: async (id: string) => { return makeRequest(`/time-slots/${id}`, { method: "DELETE", }) }, } // API de Citas export const appointmentsAPI = { getAll: async () => { return makeRequest("/appointments") }, getUserAppointments: async () => { return makeRequest("/appointments/user") }, create: async (slotId: string) => { return makeRequest("/appointments", { method: "POST", body: JSON.stringify({ timeSlotId: slotId }), }) }, createDirect: async (appointmentData: { userName: string userLastName: string userCedula: string userPhone: string slotId: string }) => { return makeRequest("/appointments/direct", { method: "POST", body: JSON.stringify({ ...appointmentData, timeSlotId: appointmentData.slotId, }), }) }, cancel: async (id: string) => { return makeRequest(`/appointments/${id}/cancel`, { method: "PATCH", }) }, reschedule: async (id: string, newSlotId: string) => { return makeRequest(`/appointments/${id}/reschedule`, { method: "PATCH", body: JSON.stringify({ newTimeSlotId: newSlotId }), }) }, updateStatus: async (id: string, status: string) => { return makeRequest(`/appointments/${id}/status`, { method: "PATCH", body: JSON.stringify({ status }), }) }, } // API de Administración export const adminAPI = { getStats: async () => { return makeRequest("/admin/stats") }, getUsers: async () => { return makeRequest("/admin/users") }, createUser: async (userData: { nombre: string apellido: string cedula: string telefono: string password: string }) => { return makeRequest("/admin/users", { method: "POST", body: JSON.stringify(userData), }) }, // Reprogramar cita como admin rescheduleAppointment: async (appointmentId: string, newSlotId: string) => { return makeRequest(`/appointments/${appointmentId}/reschedule`, { method: "PATCH", body: JSON.stringify({ newTimeSlotId: newSlotId }), }) }, } // Función helper para agendar citas (compatibilidad) export const bookAppointment = async (slotId: string): Promise => { try { await appointmentsAPI.create(slotId) return true } catch (error) { console.error("Error al agendar cita:", error) return false } } [V0_FILE]typescriptreact:file="src/pages/user/Reschedule.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link, useNavigate, useSearchParams } from "react-router-dom" import { format, parseISO } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { Calendar } from "../../components/ui/calendar" import { useToast } from "../../hooks/use-toast" import { useAuth } from "../../hooks/useAuth" import { useAppointments, type TimeSlot, type Appointment } from "../../hooks/useAppointments" import { timeSlotsAPI } from "../../services/api" import { CalendarDays, ArrowLeft, LogOut, RefreshCw } from "lucide-react" export default function UserReschedule() { const { toast } = useToast() const navigate = useNavigate() const [searchParams] = useSearchParams() const appointmentId = searchParams.get("id") const { user, logout } = useAuth() const { appointments, rescheduleAppointment, refreshData } = useAppointments() const [selectedDate, setSelectedDate] = useState(undefined) const [selectedSlot, setSelectedSlot] = useState(null) const [appointment, setAppointment] = useState(null) const [availableSlots, setAvailableSlots] = useState([]) const [loading, setLoading] = useState(false) // Buscar la cita por ID useEffect(() => { if (appointmentId) { const found = appointments.find((a) => a.id === appointmentId) if (found) { setAppointment(found) } else { toast({ title: "Error", description: "No se encontró la cita especificada.", variant: "destructive", }) navigate("/mis-citas") } } else { navigate("/mis-citas") } }, [appointmentId, appointments, navigate, toast]) // Cargar horarios disponibles cuando se selecciona una fecha useEffect(() => { if (selectedDate) { loadAvailableSlots() } }, [selectedDate]) const loadAvailableSlots = async () => { if (!selectedDate) return try { setLoading(true) const dateString = format(selectedDate, "yyyy-MM-dd") console.log("🔍 Cargando horarios para fecha:", dateString) const response = await timeSlotsAPI.getAvailable(dateString) console.log("📅 Horarios disponibles recibidos:", response) const slots = response.timeSlots || [] // Filtrar horarios para la fecha seleccionada - CORREGIDO const slotsForDate = slots.filter((slot: any) => { // Normalizar la fecha del slot let slotDate: string if (slot.date.includes("T")) { slotDate = slot.date.split("T")[0] // Formato ISO: 2025-05-30T00:00:00.000Z } else { slotDate = slot.date // Ya está en formato YYYY-MM-DD } const matches = slotDate === dateString && slot.available console.log(`🔍 Comparando: ${slotDate} === ${dateString} && ${slot.available} = ${matches}`) return matches }) console.log("✅ Horarios filtrados para la fecha:", { dateString, totalSlots: slots.length, filteredSlots: slotsForDate.length, slotsForDate, }) setAvailableSlots(slotsForDate) setSelectedSlot(null) // Limpiar selección anterior } catch (error) { console.error("❌ Error al cargar horarios:", error) toast({ title: "Error", description: "No se pudieron cargar los horarios disponibles.", variant: "destructive", }) setAvailableSlots([]) } finally { setLoading(false) } } const handleLogout = () => { logout() navigate("/") } const handleReschedule = async () => { if (!appointment || !selectedSlot) return try { setLoading(true) const success = await rescheduleAppointment(appointment.id, selectedSlot.id) if (success) { toast({ title: "Cita reprogramada", description: `Tu cita ha sido reprogramada para el ${format(parseISO(selectedSlot.date), "PPP", { locale: es, })} a las ${selectedSlot.time}.`, }) navigate("/mis-citas") } else { toast({ title: "Error", description: "No se pudo reprogramar la cita. El horario ya no está disponible.", variant: "destructive", }) } } catch (error) { console.error("Error al reprogramar:", error) toast({ title: "Error", description: "Ocurrió un error al reprogramar la cita.", variant: "destructive", }) } finally { setLoading(false) } } const formatDate = (dateString: string) => { try { return format(parseISO(dateString), "PPP", { locale: es }) } catch { return dateString } } return (

Alcaldía Municipal

{user?.nombre} {user?.apellido}

Cédula: {user?.cedula}

Seleccionar Nueva Fecha Elige un día para ver los horarios disponibles { setSelectedDate(date) setSelectedSlot(null) setAvailableSlots([]) }} className="rounded-md border" disabled={(date) => { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} /> {appointment && ( Cita Actual

Fecha: {formatDate(appointment.date)}

Hora: {appointment.time}

Estado: {appointment.status}

)}

Horarios Disponibles {selectedDate ? `Horarios para el ${format(selectedDate, "PPP", { locale: es })}` : "Selecciona una fecha para ver los horarios disponibles"} {loading ? (

Cargando horarios...

) : selectedDate ? ( availableSlots.length > 0 ? (
{availableSlots.map((slot) => ( ))}
) : (
No hay horarios disponibles para esta fecha
) ) : (
Selecciona una fecha en el calendario para ver los horarios disponibles
)} {/ Debug info /} {selectedDate && (

Debug:

Fecha seleccionada: {format(selectedDate, "yyyy-MM-dd")}

Horarios cargados: {availableSlots.length}

Horario seleccionado: {selectedSlot?.time || "Ninguno"}

)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescriptreact:file="src/pages/user/Dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link, useNavigate } from "react-router-dom" import { format } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card" import { Badge } from "../../components/ui/badge" import { Calendar } from "../../components/ui/calendar" import { useToast } from "../../hooks/use-toast" import { useAuth } from "../../hooks/useAuth" import { useAppointments, type TimeSlot } from "../../hooks/useAppointments" import { CalendarDays, Clock, LogOut, RefreshCw } from "lucide-react" export default function UserDashboard() { const { toast } = useToast() const navigate = useNavigate() const { user, logout } = useAuth() const { timeSlots, bookAppointment, getUserAppointments, loading, refreshData } = useAppointments() const [selectedDate, setSelectedDate] = useState(undefined) const [selectedSlot, setSelectedSlot] = useState(null) const [bookingLoading, setBookingLoading] = useState(false) // Obtener citas del usuario const userAppointments = user ? getUserAppointments(user.id) : [] // Refrescar datos cuando el componente se monta o cuando cambian las citas useEffect(() => { refreshData() }, []) // Filtrar horarios disponibles para la fecha seleccionada - CORREGIDO const availableSlotsForDate = selectedDate ? timeSlots.filter((slot) => { // Normalizar la fecha del slot let slotDate: string if (slot.date.includes("T")) { slotDate = slot.date.split("T")[0] // Formato ISO: 2025-05-30T00:00:00.000Z } else { slotDate = slot.date // Ya está en formato YYYY-MM-DD } const selectedDateStr = format(selectedDate, "yyyy-MM-dd") const matches = slotDate === selectedDateStr && slot.available console.log(`🔍 Slot ${slot.id}: ${slotDate} === ${selectedDateStr} && ${slot.available} = ${matches}`) return matches }) : [] // Filtrar horarios ocupados para la fecha seleccionada - CORREGIDO const occupiedSlotsForDate = selectedDate ? timeSlots.filter((slot) => { // Normalizar la fecha del slot let slotDate: string if (slot.date.includes("T")) { slotDate = slot.date.split("T")[0] // Formato ISO: 2025-05-30T00:00:00.000Z } else { slotDate = slot.date // Ya está en formato YYYY-MM-DD } const selectedDateStr = format(selectedDate, "yyyy-MM-dd") return slotDate === selectedDateStr && !slot.available }) : [] console.log("📅 Horarios para fecha seleccionada:", { selectedDate: selectedDate ? format(selectedDate, "yyyy-MM-dd") : null, available: availableSlotsForDate.length, occupied: occupiedSlotsForDate.length, totalSlots: timeSlots.length, allSlots: timeSlots.map((slot) => ({ id: slot.id, date: slot.date, normalizedDate: slot.date.includes("T") ? slot.date.split("T")[0] : slot.date, time: slot.time, available: slot.available, })), }) const handleLogout = () => { logout() navigate("/") } const handleRefresh = async () => { await refreshData() toast({ title: "Datos actualizados", description: "La información ha sido actualizada.", }) } const handleBookAppointment = async () => { if (!user || !selectedSlot) return setBookingLoading(true) try { const success = await bookAppointment(selectedSlot.id) if (success) { toast({ title: "Cita agendada", description: `Tu cita ha sido agendada para el ${format(new Date(selectedSlot.date), "PPP", { locale: es, })} a las ${selectedSlot.time}.`, }) setSelectedSlot(null) setSelectedDate(undefined) // Refrescar datos inmediatamente para actualizar la vista await refreshData() } else { toast({ title: "Error", description: "No se pudo agendar la cita. El horario ya no está disponible.", variant: "destructive", }) } } catch (error: any) { toast({ title: "Error", description: error.message || "Ocurrió un error al agendar la cita.", variant: "destructive", }) } finally { setBookingLoading(false) } } if (loading) { return (

Cargando datos...

) } return (

Alcaldía Municipal

{user?.nombre} {user?.apellido}

Cédula: {user?.cedula}

Agendar Cita

Mis Citas

Seleccionar Fecha Elige un día para ver los horarios disponibles { console.log("📅 Fecha seleccionada:", date) setSelectedDate(date) setSelectedSlot(null) }} className="rounded-md border" disabled={(date) => { // Deshabilitar fechas pasadas y fines de semana const now = new Date() now.setHours(0, 0, 0, 0) const day = date.getDay() return date < now || day === 0 || day === 6 }} /> {userAppointments.length > 0 && ( Próxima Cita

Fecha: {format(new Date(userAppointments[0].date), "PPP", { locale: es })}

Hora: {userAppointments[0].time}

Estado: {userAppointments[0].status.charAt(0).toUpperCase() + userAppointments[0].status.slice(1)}

)} {/ Debug Info /} Debug Info
Fecha seleccionada: {selectedDate ? format(selectedDate, "yyyy-MM-dd") : "Ninguna"}

Total horarios: {timeSlots.length}

Horarios disponibles: {availableSlotsForDate.length}

Horarios ocupados: {occupiedSlotsForDate.length}

Horarios Disponibles {selectedDate ? `Horarios para el ${format(selectedDate, "PPP", { locale: es })}` : "Selecciona una fecha para ver los horarios disponibles"} {selectedDate ? ( availableSlotsForDate.length > 0 ? (
{availableSlotsForDate.map((slot) => ( ))}
) : (
No hay horarios disponibles para esta fecha
Debug: {timeSlots.length} horarios totales cargados
Fecha buscada: {selectedDate ? format(selectedDate, "yyyy-MM-dd") : "N/A"}
) ) : (
Selecciona una fecha en el calendario para ver los horarios disponibles
)} {selectedDate && occupiedSlotsForDate.length > 0 && (

Horarios Ocupados:

{occupiedSlotsForDate.map((slot) => ( ))}

)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescriptreact:file="src/pages/admin/Appointments.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link, useNavigate, useSearchParams } from "react-router-dom" import { format } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card" import { Input } from "../../components/ui/input" import { Label } from "../../components/ui/label" import { Badge } from "../../components/ui/badge" import { Calendar } from "../../components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table" import { useToast } from "../../hooks/use-toast" import { useAppointments, type Appointment } from "../../hooks/useAppointments" import { appointmentsAPI } from "../../services/api" import { LogOut, CalendarDays, Search, Edit, Trash2, CheckCircle } from "lucide-react" import { cn } from "../../lib/utils" export default function AdminAppointments() { const { toast } = useToast() const navigate = useNavigate() const [searchParams] = useSearchParams() const appointmentId = searchParams.get("id") const { appointments, timeSlots, cancelAppointment, refreshData } = useAppointments() const [filters, setFilters] = useState({ cedula: "", date: undefined as Date | undefined, status: "", }) const [selectedAppointment, setSelectedAppointment] = useState(null) const [admin, setAdmin] = useState<{ id: string; nombre: string; rol: string } | null>(null) useEffect(() => { // Cargar datos del admin directamente de localStorage const adminData = localStorage.getItem("admin") if (adminData) { setAdmin(JSON.parse(adminData)) } }, []) // Buscar la cita por ID si se proporciona en la URL useEffect(() => { if (appointmentId) { const found = appointments.find((a) => a.id === appointmentId) if (found) { setSelectedAppointment(found) } } }, [appointmentId, appointments]) const handleLogout = () => { localStorage.removeItem("admin") localStorage.removeItem("adminToken") navigate("/admin") } // Filtrar citas según los criterios const filteredAppointments = appointments.filter((appointment) => { let match = true // Filtro por cédula if (filters.cedula && !appointment.userCedula.includes(filters.cedula)) { match = false } // Filtro por fecha if (filters.date) { const appointmentDate = appointment.date.split("T")[0] // Extraer solo la fecha const filterDate = format(filters.date, "yyyy-MM-dd") if (appointmentDate !== filterDate) { match = false } } // Filtro por estado - CORREGIDO if (filters.status && filters.status !== "all" && appointment.status !== filters.status) { match = false } return match }) const handleCancelAppointment = async (appointmentId: string) => { if (confirm("¿Estás seguro de que deseas cancelar esta cita?")) { const success = await cancelAppointment(appointmentId) if (success) { toast({ title: "Cita cancelada", description: "La cita ha sido cancelada correctamente.", }) setSelectedAppointment(null) } } } const handleCompleteAppointment = async (appointmentId: string) => { if (confirm("¿Estás seguro de que deseas marcar esta cita como completada?")) { try { await appointmentsAPI.updateStatus(appointmentId, "completada") await refreshData() toast({ title: "Cita completada", description: "La cita ha sido marcada como completada.", }) setSelectedAppointment(null) } catch (error) { toast({ title: "Error", description: "No se pudo completar la cita.", variant: "destructive", }) } } } const handleRescheduleAppointment = (appointmentId: string) => { // Redirigir a una página de reprogramación o abrir un modal navigate(`/admin/reschedule?appointmentId=${appointmentId}`) } const getStatusBadge = (status: string) => { switch (status) { case "confirmada": return Confirmada case "cancelada": return Cancelada case "reprogramada": return Reprogramada case "completada": return Completada default: return Pendiente } } return (

Alcaldía Municipal

{admin?.nombre}

Rol: {admin?.rol}

Dashboard

Gestionar Horarios

Gestionar Citas

Gestionar Citas

Filtros Filtra las citas por diferentes criterios

Cédula
setFilters({ ...filters, cedula: e.target.value })} />

Fecha setFilters({ ...filters, date })} initialFocus />

Estado

Lista de Citas {filteredAppointments.length} citas encontradas
Ciudadano Cédula Fecha Hora Estado Tipo Acciones {filteredAppointments.length > 0 ? ( filteredAppointments.map((appointment) => ( {appointment.userName} {appointment.userLastName} {appointment.userCedula} {format(new Date(appointment.date), "dd/MM/yyyy")} {appointment.time} {getStatusBadge(appointment.status)} {appointment.isRegisteredUser === false ? "Presencial" : "Registrado"}
{appointment.status !== "cancelada" && appointment.status !== "completada" && ( <> )}
)) ) : ( No se encontraron citas con los filtros seleccionados )}

{selectedAppointment ? ( Detalles de la Cita Información completa de la cita seleccionada

Ciudadano

{selectedAppointment.userName} {selectedAppointment.userLastName}

Cédula

{selectedAppointment.userCedula}

{selectedAppointment.userPhone && (

Teléfono

{selectedAppointment.userPhone}

)}

Fecha

{format(new Date(selectedAppointment.date), "PPP", { locale: es })}

Hora

{selectedAppointment.time}

Estado

{getStatusBadge(selectedAppointment.status)}

Tipo de Usuario

{selectedAppointment.isRegisteredUser === false ? "Atención Presencial" : "Usuario Registrado"}

{selectedAppointment.status !== "cancelada" && selectedAppointment.status !== "completada" && ( <> )}

) : ( Información

Selecciona una cita

Haz clic en el botón de editar de una cita para ver sus detalles completos

)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } [V0_FILE]typescript:file="backend-sistemas-alcaldia/src/routes/appointments.ts" isEdit="true" isMerged="true" import express from "express" import { prisma } from "../index" import { authenticateToken, requireUser, requireAdmin } from "../middleware/auth" const router = express.Router() // Middleware de logging para esta ruta router.use((req, res, next) => { console.log(`📋 Appointments route: ${req.method} ${req.path}`) next() }) // Obtener todas las citas (admin) o citas del usuario router.get("/", authenticateToken, async (req, res) => { try { console.log("🔍 Obteniendo citas para usuario:", req.user?.id, "tipo:", req.user?.type) const isAdmin = req.user?.type === "admin" let appointments if (isAdmin) { // Admin puede ver todas las citas appointments = await prisma.appointment.findMany({ include: { timeSlot: true, user: { select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, }, }, }, orderBy: { createdAt: "desc", }, }) } else { // Usuario solo ve sus citas appointments = await prisma.appointment.findMany({ where: { userId: req.user!.id }, include: { timeSlot: true, }, orderBy: { createdAt: "desc", }, }) } console.log(`✅ Encontradas ${appointments.length} citas`) res.json({ appointments }) } catch (error) { console.error("❌ Error al obtener citas:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Obtener citas del usuario específicamente (ruta /user) router.get("/user", authenticateToken, requireUser, async (req, res) => { try { console.log("🔍 Obteniendo citas del usuario:", req.user?.id) const appointments = await prisma.appointment.findMany({ where: { userId: req.user!.id }, include: { timeSlot: true, }, orderBy: { createdAt: "desc", }, }) console.log(`✅ Encontradas ${appointments.length} citas del usuario`) res.json({ appointments }) } catch (error) { console.error("❌ Error al obtener citas del usuario:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Ruta de prueba sin autenticación router.get("/test", (req, res) => { console.log("🧪 Ruta de prueba de appointments funcionando") res.json({ message: "Ruta de appointments funcionando correctamente", timestamp: new Date().toISOString(), }) }) // Crear cita (usuario registrado) router.post("/", authenticateToken, requireUser, async (req, res) => { try { console.log("📝 Creando cita con datos:", req.body) const { timeSlotId, userName, userLastName, userCedula, userPhone, notes } = req.body if (!timeSlotId) { return res.status(400).json({ error: "timeSlotId es requerido" }) } // Verificar que el horario existe y está disponible const timeSlot = await prisma.timeSlot.findUnique({ where: { id: timeSlotId }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (!timeSlot.available) { return res.status(400).json({ error: "El horario ya no está disponible" }) } // Obtener datos del usuario autenticado const user = await prisma.user.findUnique({ where: { id: req.user!.id }, }) if (!user) { return res.status(404).json({ error: "Usuario no encontrado" }) } // Verificar que el usuario no tenga otra cita en la misma fecha const existingAppointment = await prisma.appointment.findFirst({ where: { userId: req.user!.id, timeSlot: { date: timeSlot.date, }, status: { in: ["CONFIRMADA", "REPROGRAMADA"], }, }, }) if (existingAppointment) { return res.status(400).json({ error: "Ya tienes una cita programada para esta fecha", }) } // Crear la cita en una transacción const result = await prisma.$transaction(async (tx) => { // Marcar el horario como no disponible await tx.timeSlot.update({ where: { id: timeSlotId }, data: { available: false }, }) // Crear la cita const appointment = await tx.appointment.create({ data: { userId: req.user!.id, timeSlotId: timeSlotId, userName: userName || user.nombre, userLastName: userLastName || user.apellido, userCedula: userCedula || user.cedula, userPhone: userPhone || user.telefono || "", isRegisteredUser: true, notes: notes || "", }, include: { timeSlot: true, user: { select: { id: true, nombre: true, apellido: true, cedula: true, telefono: true, }, }, }, }) return appointment }) console.log("✅ Cita creada exitosamente:", result.id) res.status(201).json({ message: "Cita creada exitosamente", appointment: result, }) } catch (error: any) { console.error("❌ Error al crear cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Crear cita directa (admin) router.post("/direct", authenticateToken, requireAdmin, async (req, res) => { try { const { userName, userLastName, userCedula, userPhone, timeSlotId } = req.body if (!userName || !userLastName || !userCedula) { return res.status(400).json({ error: "Nombre, apellido y cédula son requeridos", }) } // Verificar que el horario existe y está disponible const timeSlot = await prisma.timeSlot.findUnique({ where: { id: timeSlotId }, }) if (!timeSlot) { return res.status(404).json({ error: "Horario no encontrado" }) } if (!timeSlot.available) { return res.status(400).json({ error: "El horario ya no está disponible" }) } // Crear la cita en una transacción const result = await prisma.$transaction(async (tx) => { // Marcar el horario como no disponible await tx.timeSlot.update({ where: { id: timeSlotId }, data: { available: false }, }) // Crear la cita const appointment = await tx.appointment.create({ data: { userId: null, timeSlotId, userName, userLastName, userCedula, userPhone: userPhone || "", isRegisteredUser: false, notes: "", }, include: { timeSlot: true, }, }) return appointment }) res.status(201).json({ message: "Cita creada exitosamente", appointment: result, }) } catch (error: any) { console.error("Error al crear cita directa:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Actualizar estado de cita (NUEVO) router.patch("/:id/status", authenticateToken, requireAdmin, async (req, res) => { try { const { id } = req.params const { status } = req.body console.log(`📝 Actualizando estado de cita ${id} a ${status}`) // Validar estado const validStatuses = ["CONFIRMADA", "CANCELADA", "REPROGRAMADA", "COMPLETADA"] if (!validStatuses.includes(status.toUpperCase())) { return res.status(400).json({ error: "Estado inválido" }) } const appointment = await prisma.appointment.findUnique({ where: { id }, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } const result = await prisma.appointment.update({ where: { id }, data: { status: status.toUpperCase() }, include: { timeSlot: true }, }) console.log("✅ Estado de cita actualizado exitosamente") res.json({ message: "Estado de cita actualizado exitosamente", appointment: result, }) } catch (error) { console.error("Error al actualizar estado de cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Cancelar cita router.patch("/:id/cancel", authenticateToken, async (req, res) => { try { const { id } = req.params const isAdmin = req.user?.type === "admin" const whereClause: any = { id } if (!isAdmin) { whereClause.userId = req.user!.id } const appointment = await prisma.appointment.findFirst({ where: whereClause, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } if (appointment.status === "CANCELADA") { return res.status(400).json({ error: "La cita ya está cancelada" }) } const result = await prisma.$transaction(async (tx) => { await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) return tx.appointment.update({ where: { id }, data: { status: "CANCELADA" }, include: { timeSlot: true }, }) }) res.json({ message: "Cita cancelada exitosamente", appointment: result, }) } catch (error) { console.error("Error al cancelar cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) // Reprogramar cita router.patch("/:id/reschedule", authenticateToken, async (req, res) => { try { const { id } = req.params const { newTimeSlotId } = req.body const isAdmin = req.user?.type === "admin" console.log(`🔄 Reprogramando cita ${id} a slot ${newTimeSlotId} por ${isAdmin ? "admin" : "usuario"}`) const whereClause: any = { id } if (!isAdmin) { whereClause.userId = req.user!.id } const appointment = await prisma.appointment.findFirst({ where: whereClause, include: { timeSlot: true }, }) if (!appointment) { return res.status(404).json({ error: "Cita no encontrada" }) } if (appointment.status === "CANCELADA") { return res.status(400).json({ error: "No se puede reprogramar una cita cancelada" }) } const newTimeSlot = await prisma.timeSlot.findUnique({ where: { id: newTimeSlotId }, }) if (!newTimeSlot || !newTimeSlot.available) { return res.status(400).json({ error: "El nuevo horario no está disponible" }) } const result = await prisma.$transaction(async (tx) => { await tx.timeSlot.update({ where: { id: appointment.timeSlotId }, data: { available: true }, }) await tx.timeSlot.update({ where: { id: newTimeSlotId }, data: { available: false }, }) return tx.appointment.update({ where: { id }, data: { timeSlotId: newTimeSlotId, status: "REPROGRAMADA", }, include: { timeSlot: true }, }) }) console.log("✅ Cita reprogramada exitosamente") res.json({ message: "Cita reprogramada exitosamente", appointment: result, }) } catch (error) { console.error("Error al reprogramar cita:", error) res.status(500).json({ error: "Error interno del servidor" }) } }) console.log("📋 Módulo appointments cargado correctamente") export default router [V0_FILE]typescriptreact:file="src/components/ProtectedRoute.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import { Navigate } from "react-router-dom" import { useAuth } from "../hooks/useAuth" interface ProtectedRouteProps { children: ReactNode } const ProtectedRoute = ({ children }: ProtectedRouteProps) => { const { user } = useAuth() console.log("🔐 ProtectedRoute - Verificando usuario:", { hasUser: !!user, userId: user?.id, userType: "normal_user", }) if (!user) { console.log("❌ No hay usuario autenticado, redirigiendo a login") return } console.log("✅ Usuario autenticado correctamente, mostrando contenido de usuario") return <>{children} } export default ProtectedRoute [V0_FILE]typescriptreact:file="src/App.tsx" isEdit="true" isMerged="true" import { Routes, Route } from "react-router-dom" import { Toaster } from "./components/ui/toaster" import Login from "./pages/Login" import Register from "./pages/Register" import UserDashboard from "./pages/user/Dashboard" import UserAppointmentsComponent from "./pages/user/Appointments" // Nombre específico import UserReschedule from "./pages/user/Reschedule" import AdminLogin from "./pages/admin/Login" import AdminDashboard from "./pages/admin/Dashboard" import AdminSchedule from "./pages/admin/Schedule" import AdminAppointments from "./pages/admin/Appointments" import ProtectedRoute from "./components/ProtectedRoute" import { AuthProvider } from "./hooks/useAuth" import { AppointmentsProvider } from "./hooks/useAppointments" import AdminAssignAppointment from "./pages/admin/AssignAppointment" import AdminProtectedRoute from "./components/AdminProtectedRoute" import AdminRescheduleAppointment from "./pages/admin/RescheduleAppointment" function App() { console.log("🚀 App.tsx cargado - Definiendo rutas") return ( {/ Rutas públicas /} } /> } /> } /> {/ Rutas protegidas de usuario /} } /> } /> } /> } /> {/ Rutas de administrador */} } /> } /> } /> } /> ) } export default App [V0_FILE]typescriptreact:file="src/pages/user/Appointments.tsx" isEdit="true" "use client" import { Link, useNavigate } from "react-router-dom" import { format, parseISO } from "date-fns" import { es } from "date-fns/locale" import { Button } from "../../components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card" import { Badge } from "../../components/ui/badge" import { useToast } from "../../hooks/use-toast" import { useAuth } from "../../hooks/useAuth" import { useAppointments } from "../../hooks/useAppointments" import { LogOut, Calendar, Clock, AlertCircle, RefreshCw } from "lucide-react" import { appointmentsAPI } from "../../services/api" import { useState, useEffect } from "react" // COMPONENTE DE USUARIO - DISEÑO ORIGINAL function UserAppointmentsComponent() { console.log("🚀 UserAppointments component cargado correctamente") const { toast } = useToast() const navigate = useNavigate() const { user, logout } = useAuth() const { cancelAppointment } = useAppointments() // Estado para las citas del usuario const [userAppointments, setUserAppointments] = useState([]) const [loadingAppointments, setLoadingAppointments] = useState(true) // Cargar citas del usuario al montar el componente useEffect(() => { const loadUserAppointments = async () => { if (!user) return try { setLoadingAppointments(true) const response = await appointmentsAPI.getUserAppointments() setUserAppointments(response.appointments || []) } catch (error) { console.error("Error al cargar citas:", error) toast({ title: "Error", description: "No se pudieron cargar tus citas.", variant: "destructive", }) } finally { setLoadingAppointments(false) } } loadUserAppointments() }, [user, toast]) // Función para refrescar citas manualmente const handleRefreshAppointments = async () => { if (!user) return try { setLoadingAppointments(true) const response = await appointmentsAPI.getUserAppointments() setUserAppointments(response.appointments || []) toast({ title: "Actualizado", description: "Tus citas han sido actualizadas.", }) } catch (error) { console.error("Error al refrescar citas:", error) toast({ title: "Error", description: "No se pudieron actualizar las citas.", variant: "destructive", }) } finally { setLoadingAppointments(false) } } // Función para formatear fecha de manera segura const formatDate = (dateString: string) => { try { const date = typeof dateString === "string" ? parseISO(dateString) : new Date(dateString) if (isNaN(date.getTime())) { console.error("Fecha inválida:", dateString) return "Fecha inválida" } return format(date, "PPP", { locale: es }) } catch (error) { console.error("Error al formatear fecha:", error, dateString) return "Fecha inválida" } } // Cancelar cita const handleCancelAppointment = async (appointmentId: string) => { if (confirm("¿Estás seguro de que deseas cancelar esta cita?")) { try { const success = await cancelAppointment(appointmentId) if (success) { toast({ title: "Cita cancelada", description: "Tu cita ha sido cancelada correctamente.", }) // Refrescar citas await handleRefreshAppointments() } } catch (error: any) { toast({ title: "Error", description: error.message || "No se pudo cancelar la cita.", variant: "destructive", }) } } } const handleLogout = async () => { try { await logout() navigate("/") } catch (error) { toast({ title: "Error", description: "No se pudo cerrar sesión.", variant: "destructive", }) } } // Mostrar estado de carga if (loadingAppointments) { return (

Cargando tus citas...

) } return (

Alcaldía Municipal

{user?.nombre} {user?.apellido}

Cédula: {user?.cedula}

Agendar Cita

Mis Citas

Mis Citas
{userAppointments.length > 0 ? (
{userAppointments.map((appointment) => ( Cita con el Alcalde {appointment.status === "CONFIRMADA" ? "Confirmada" : appointment.status === "REPROGRAMADA" ? "Reprogramada" : appointment.status === "CANCELADA" ? "Cancelada" : appointment.status === "COMPLETADA" ? "Completada" : "Pendiente"}

Fecha

{formatDate(appointment.timeSlot?.date || appointment.date)}

Hora

{appointment.timeSlot?.time || appointment.time}

{appointment.status === "REPROGRAMADA" && (

Esta cita ha sido reprogramada

)} {(appointment.status === "CONFIRMADA" || appointment.status === "REPROGRAMADA") && (

)}
))}
) : (

No tienes citas agendadas

Actualmente no tienes ninguna cita programada con el alcalde.

)}

© {new Date().getFullYear()} Alcaldía Municipal. Todos los derechos reservados.

) } // Exportar con nombre específico para evitar conflictos export default UserAppointmentsComponent