Client Dashboard - Copy this React, Tailwind Component to your project

Diseña una interfaz gráfica de usuario para visualizar y editar la información de un cliente. La pantalla debe incluir todos los campos disponibles en la variable proporcionada, agrupándolos en secciones lógicas para una lectura y navegación intuitiva. Además, implementa botones y modales funcionales que permitan interactuar con los datos del cliente. Asegúrate de que la interfaz sea atractiva, fácil de usar y tenga un diseño adaptable (responsive). Aquí tienes los detalles a incluir: Estructura de la Pantalla Encabezado del Cliente: Nombre Completo: Combina apellido_paterno, apellido_materno y nombres en un formato destacado. Avatar o Ícono de Género: Basado en el campo sexo. Estado del Cliente: Visualiza el estado en función del campo estado (1 = "Activo", 0 = "Inactivo"). Sección de Información Personal: DNI: numero_dni. Fecha de Nacimiento: fecha_nacimiento (calcula y muestra la edad). Estado Civil: estado_civil_id (muestra descripción si está disponible). Sexo: sexo. Sección de Contacto: Dirección Completa: direccion. Número de Celular: Muestra numero_celular o numero_celular2 si está presente. Email: email (si está vacío, muestra "No especificado"). Facebook: facebook (muestra un ícono si está disponible). Información Financiera y de Compra: Banco que financia: banco_financia_id o nombreBancosId (muestra la descripción, si está disponible). Ingreso Familiar: ingreso_familiar (destaca si es mayor a 0). Inicial Disponible: inicial_disponible. Máximo de Inversión: maximo_inversion. Estado de Compra: estado_compra y estado_compra_detalle. Ocupación y Motivaciones: Ocupación del Cliente: ocupacion_desc (muestra "No especificado" si está vacío). Ocupación del Cliente (ID): ocupacion_id. Ocupación de la Pareja: ocupacion_pareja_desc y ocupacion_pareja_id. DNI de la Pareja: numero_dni_pareja. Nombre de la Pareja: ape_nombres_pareja. Factor de Motivación: factor_motivacion_desc y razon_factor_motivacion. Sección de Prospecto y Probabilidad de Compra: Probabilidad de Compra: nombreProbabilidadId (por ejemplo, "ALTA"). Fuente de Prospección: nombreFuenteProspeccionId (por ejemplo, "FACEBOOK"). Referencia de Prospección: referencia_prospeccion. Fecha de Registro: fecha_registro. Usuario que Registró: usuario_registro_id. Usuario que Actualizó: usuario_actualiza_id. Otros Datos del Cliente: Estilo de Vida: nombreEstiloVidaId. Perfil de Cliente: nombrePerfilClienteId. Personalidad: personalidad_id. Tipo de Cliente: tipo_cliente_id. Tipo de Ingreso: nombreTipoIngresoId. Observaciones: observaciones. Nombre del Archivo Asociado: nombre_archivo. Registro de Fechas: created_at. updated_at. Detalles y Estado del Sistema: Estado del Registro: estado. Motivos o Detalles Adicionales de Estado: estado_compra y estado_compra_detalle. Botones y Funcionalidades Botón "Editar Información": Abre un modal con todos los datos del cliente ya precargados. Los campos editables incluyen texto, desplegables y selectores de fecha según corresponda. Los campos no editables (como created_at o usuario_registro_id) se mostrarán en un formato de solo lectura. Botón "Guardar Cambios": Valida los campos editados antes de guardar. Muestra un mensaje de confirmación al guardar los cambios correctamente. Botón "Cancelar": Cierra el modal de edición sin guardar cambios. Botón "Historial de Cambios": Abre un modal que muestra un historial de actualizaciones basado en los campos created_at y updated_at. Botón "Contactar Cliente": Abre opciones rápidas para enviar un correo (si email está disponible), llamar al cliente (si numero_celular o numero_celular2 están presentes), o visitar su perfil de Facebook. Botón "Exportar": Descarga la información del cliente en formato PDF o CSV. Mensajes Contextuales: Si se intenta guardar información incompleta, muestra mensajes de validación junto al campo correspondiente. Modales Funcionales Modal de Edición: Contiene todos los campos agrupados por secciones (Información Personal, Contacto, etc.). Incluye validaciones dinámicas (por ejemplo, número de celular debe ser un formato válido, email debe tener una estructura correcta, etc.). Permite guardar únicamente los cambios realizados. Modal de Historial de Cambios: Muestra un listado de modificaciones realizadas, con fecha, hora, y el usuario que realizó cada cambio. Modal de Contacto Rápido: Opciones para: Llamar al cliente (numero_celular o numero_celular2). Enviar correo (email). Abrir el perfil de Facebook (facebook). Diseño y Accesibilidad Diseño Responsivo: Adaptable para dispositivos móviles, tablets, y escritorios. Colores e Íconos: Usa colores suaves para destacar secciones importantes (e.g., verde para "Activo", rojo para "Inactivo") y emplea íconos universales para contacto, edición y exportación. Accesibilidad: Contraste de colores, etiquetas claras y soporte para lectores de pantalla. Entrega un diseño que incluya todas estas funcionalidades y permita editar, visualizar y gestionar fácilmente la información del cliente.