CRM2040 Calendario de Visitas y Eventos

Una librería completa de calendario para React, construida con TypeScript y Shadcn/ui. Perfecta para sistemas CRM, gestión de visitas, eventos y seguimientos de casos.

✨ Características Principales

🗓️ Calendario Completo

• Vista de mes, semana y día
• Navegación intuitiva
• Indicador de fecha actual
• Responsive design

📅 Gestión de Eventos

• Visitas: Seguimiento de visitas programadas
• Eventos: Eventos generales del programa
• Seguimientos: Casos y compromisos
• Colores distintivos por tipo

🎨 Interfaz Moderna

• Integración con Shadcn/ui
• Modales interactivos
• Barra lateral de próximos eventos
• Iconos Lucide React

🔧 Desarrollador Friendly

• TypeScript completo
• Hooks personalizados
• Localización en español
• Fácil integración

📋 Requisitos

• React 18.3.1 o superior
• TypeScript (recomendado)
• Tailwind CSS
• Shadcn/ui (opcional, pero recomendado)

🚀 Quick Start

Instalación

npm install crm2040-calendario-visitas-eventos

Uso Básico

import React from 'react';
import { Calendar, useCalendarData } from 'crm2040-calendario-visitas-eventos';

function App() {
  const { events, loading } = useCalendarData();

  if (loading) {
    return <div>Cargando calendario...</div>;
  }

  return (
    <div className='h-[800px]'>
      <Calendar
        events={events}
        onEventClick={(event) => console.log('Evento clickeado:', event)}
        onDateClick={(date) => console.log('Fecha clickeada:', date)}
        currentView='month'
        allowViewChange={true}
        allowNavigation={true}
        showTodayIndicator={true}
      />
    </div>
  );
}

🎯 Tipos de Eventos

Visitas (visitas)

• Descripción: Visitas programadas a personas/familias
• Color: Morado (#AA83FF)
• Campos específicos: personId, visitTypeId, trainingTopicId, located, visitedById

Eventos (eventos)

• Descripción: Eventos generales del programa
• Color: Verde (#78C388)
• Campos específicos: programmedBy, done

Seguimientos de Casos (caseFollowUp)

• Descripción: Seguimientos de casos específicos
• Color: Naranja (#FFA500)
• Campos específicos: affair, commitmentdate, realizationdate, caseid, responsibleid

🧩 Componentes Principales

Calendar

Componente principal que orquesta toda la funcionalidad del calendario.

<Calendar
  events={events}
  onEventClick={handleEventClick}
  onDateClick={handleDateClick}
  currentView='month'
  allowViewChange={true}
  allowNavigation={true}
  showTodayIndicator={true}
  showUpcomingEventsSidebar={true}
  className='h-full'
/>

CalendarView

Vista visual del calendario con integración Shadcn/ui.

<CalendarView
  events={events}
  view='month'
  onEventClick={handleEventClick}
  onDateClick={handleDateClick}
  allowViewChange={true}
  allowNavigation={true}
/>

EventItem

Componente para renderizar eventos individuales en las celdas del calendario.

<EventItem event={event} onClick={handleEventClick} className='event-strip' />

🔧 Hooks Disponibles

useCalendarState

Maneja el estado del calendario (navegación, vista, fechas seleccionadas).

const {
  currentDate,
  currentView,
  filteredEvents,
  goToPrevious,
  goToNext,
  goToToday,
  setView,
  setDate,
  selectedDates,
  selectDate,
  clearSelection,
} = useCalendarState(events, initialDate, 'month');

useEventHandlers

Proporciona operaciones CRUD para eventos.

const {
  events,
  addEvent,
  updateEvent,
  removeEvent,
  getEventsByDate,
  getEventsByDateRange,
  getEventsByType,
} = useEventHandlers(initialEvents);

useCalendarData

Obtiene datos del calendario (actualmente mock, reemplazar con API real).

const { events, loading, refetch } = useCalendarData();

🎨 Modales

EventDetails

Modal para mostrar detalles de un evento específico.

EventsList

Modal para mostrar lista de eventos de una fecha específica.

VisitsList

Modal especializado para mostrar lista de visitas.

UpcomingEventsSidebar

Barra lateral que muestra los próximos eventos agrupados por fecha con menú hamburguesa.

<UpcomingEventsSidebar
  events={events}
  onEventClick={handleEventClick}
  isOpen={true}
  onToggle={handleToggle}
/>

🛠️ Utilidades

Funciones de Fecha

• formatDate() - Formatear fechas en español
• formatTime() - Formatear horas
• isToday() - Verificar si es hoy
• isCurrentMonth() - Verificar si es el mes actual
• navigateDate() - Navegar entre fechas

Funciones de Eventos

• filterEventsByDate() - Filtrar eventos por fecha
• filterEventsByDateRange() - Filtrar eventos por rango
• filterEventsByType() - Filtrar eventos por tipo
• getEventsForDay() - Obtener eventos de un día
• sortEventsByStartDate() - Ordenar eventos por fecha

Colores y Estilos

• getEventColor() - Obtener color por tipo de evento
• defaultEventTypeColors - Colores por defecto
• getDateClasses() - Clases CSS para fechas

📱 Responsive Design

El calendario se adapta automáticamente a diferentes tamaños de pantalla:

• Desktop: Vista completa con sidebar opcional
• Tablet: Vista compacta con navegación optimizada
• Mobile: Vista de lista con navegación táctil

🌐 Localización

• Idioma: Español (es-ES)
• Formato de fecha: DD/MM/YYYY
• Formato de hora: HH:MM
• Días de la semana: Lunes a Domingo
• Meses: Enero a Diciembre

🧪 Testing

# Ejecutar tests
npm test

# Tests con coverage
npm run test:coverage

# Tests en modo watch
npm run test:watch

📦 Build

# Build para producción
npm run build

# Build en modo desarrollo
npm run build:dev

# Build con análisis de bundle
npm run build:analyze

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🆘 Soporte

¿Necesitas ayuda? Estamos aquí para ayudarte:

• Issues: GitHub Issues
• Email: [email protected]
• NPM: Ver en NPM

🔮 Roadmap

• [ ] Integración con API real
• [ ] Soporte para múltiples idiomas
• [ ] Exportación a PDF/Excel
• [ ] Notificaciones push
• [ ] Sincronización en tiempo real
• [ ] Modo offline
• [ ] Integración con Google Calendar
• [ ] Temas personalizables