Default Component - Copy this React, Tailwind Component to your project
Objetivo del Módulo Completo: Crea una interfaz web completa para un Sistema de Gestión para Taller Automotriz, que combine dos módulos principales: 1. Gestión de Clientes y Vehículos: Permitir registrar, editar y eliminar clientes y sus vehículos asociados. 2. Agendamiento de Citas: Permitir crear citas seleccionando un cliente existente y mostrando automáticamente los vehículos asociados. La interfaz debe ser moderna, intuitiva y con colores cálidos (naranjas, rojos suaves, marrones, amarillos). ✅ Requisitos Específicos: 🟢 1. Gestión de Clientes y Vehículos (Página 1): Crear un formulario para registrar clientes con los campos: Nombre Completo Teléfono Correo Electrónico Dirección Crear un formulario asociado para agregar vehículos con los campos: Marca del Vehículo Modelo Año Placa Mostrar en una tabla todos los clientes con sus vehículos asociados. Incluir botones para editar o eliminar clientes y vehículos. Utilizar Context API o JSON simulado para almacenar datos. Conexión con el módulo de citas: Al crear un cliente, automáticamente se debe poder utilizar ese cliente al agendar citas. 🟠 2. Agendamiento de Citas (Página 2): Crear un formulario para agendar citas con los campos: Seleccionar Cliente (dropdown): Al seleccionarlo, deben cargarse automáticamente los vehículos asociados. Fecha de la Cita (datepicker) Motivo de la Cita (textarea) Crear una tabla de citas programadas que muestre: Nombre del Cliente Marca y Modelo del Vehículo Fecha de la Cita Estatus (Pendiente, Completada) Agregar opciones para: Editar Cita. Cancelar Cita. Validar que no se pueda agendar citas en fechas anteriores a la actual. Actualizar automáticamente la tabla cuando se cree, modifique o cancele una cita. 🔗 3. Conexión entre Módulos (Clave): 🚗 Cuando registres un cliente y un vehículo, automáticamente debe estar disponible para agendar citas. 📅 Al crear una cita, debe poder seleccionar un cliente existente, y al hacerlo, deben aparecer automáticamente sus vehículos asociados. 💾 Al eliminar un cliente, también debe eliminarse su historial de citas y vehículos. 5. Diseño Visual: Utiliza ReactJS + TailwindCSS. Agrega botones redondeados, fuentes modernas y transiciones suaves. Barra de navegación lateral o superior para cambiar entre "Gestión de Clientes" y "Agendamiento de Citas". Estilo limpio, cálido e intuitivo. ✅ 6. Reglas de Negocio: No se debe permitir agendar citas para clientes sin vehículos. Si se elimina un cliente, se deben eliminar automáticamente sus vehículos y citas. Mostrar alertas de confirmación al eliminar o modificar registros. Validar que no existan placas duplicadas. Mostrar notificaciones tipo toast al guardar, modificar o eliminar datos. ✅ 7. Entrega del Código: Lenguaje: ReactJS + TailwindCSS. Estructura Modular: Separar componentes de formulario, tabla y modal. Listo para implementarse. Conexión fluida entre módulos. 💡 Resultado Esperado: 🔗 Al registrar un cliente, su vehículo estará disponible al crear una cita. 📅 Al agendar una cita, se podrá seleccionar el cliente y cargar automáticamente sus vehículos. 🗑 Al eliminar un cliente, también se eliminarán sus citas y vehículos. 👉 El módulo debe funcionar de forma fluida y completamente conectado. 🚀 Bonus (Opcional): Si puedes, agrega un dashboard inicial que muestre: Total de clientes. Total de vehículos. Total de citas agendadas. Esto mejorará la experiencia del usuario. 💻 Resultado Final: Tendrás una aplicación completa que: ✅ Gestione clientes y vehículos. ✅ Agende citas automáticamente. ✅ Conecte ambos módulos entre sí. ✅ Elimine datos relacionados al eliminar clientes.
