[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]typescriptreact:file="app/analitica-ventas/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function AnaliticaVentas() { return (

Analítica de Ventas

Analítica de Ventas Analice el rendimiento de ventas de BSG Institute

Contenido de Analítica de Ventas en desarrollo...

) } [V0_FILE]typescriptreact:file="app/analitica-ventas/tasas-conversion/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function TasasConversionPage() { return (

Tasas de Conversión Consolidadas

Tasas de Conversión Análisis de las tasas de conversión en el proceso comercial

Contenido de Tasas de Conversión en desarrollo...

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/AgendaAtencionClienteLayoutClient.tsx" isMerged="true" "use client" import type React from "react" import { usePathname } from "next/navigation" import { AgendaAtencionClienteInfoBar } from "@/components/agenda-atencion-cliente-info-bar" import ChatInterfaceAtencionCliente from "@/components/chat-interface-atencion-cliente" export function AgendaAtencionClienteLayoutClient({ children }: { children: React.ReactNode }) { const pathname = usePathname() const isContactoEntrantePage = pathname?.includes("contacto-entrante") return (

{/* Solo mostrar las métricas en la página principal, no en la página de detalle del cliente */} {!isContactoEntrantePage && } {/* Contenido principal */}

{children}

{/* Componente de chat */}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/AgendaLayoutClient.tsx" isMerged="true" "use client" import { usePathname } from "next/navigation" import type React from "react" import { AgendaAtencionClienteInfoBar } from "@/components/agenda-atencion-cliente-info-bar" import { ComentarioProvider } from "@/contexts/comentario-context" import { ComentarioActividadButton } from "@/components/comentario-actividad-button" import "./agenda.css" export default function AgendaLayoutClient({ children, }: Readonly<{ children: React.ReactNode }>) { const pathname = usePathname() // Verificar si estamos en una página de detalle de cliente const isClientDetailPage = pathname.includes("/contacto-entrante/") || pathname.includes("/prog-automaticas/") || pathname.includes("/prog-manuales/") || pathname.includes("/no-prog-altas-medias/") || pathname.includes("/vendidas-ipic-pf/") || pathname.includes("/vencidas-is-m/") return (

{/* Solo mostrar la barra de información si NO estamos en una página de detalle */} {!isClientDetailPage && }

{children}

) } [V0_FILE]css:file="app/atencion-cliente/gestion/agenda/agenda-atencion-cliente.css" isMerged="true" /* Estilos para la página de agenda */ /* Reducir el espacio vertical entre las tarjetas de estadísticas y las pestañas */ .agenda-container { background-color: #f8faff; width: 100%; padding-bottom: 2.5rem; padding-top: 1.5rem; } /* Reducir significativamente el espacio entre las tarjetas y las pestañas */ .agenda-container .mb-8 { margin-bottom: 0.5rem !important; /* Reducción drástica del espacio */ } /* Reducir el espacio después de las pestañas */ .agenda-container .mt-10 { margin-top: 1.5rem !important; /* Reducción del espacio después de las pestañas */ } /* Mejoras para la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Estilos modernos para la tabla de agenda */ .agenda-table { width: 100%; border-collapse: separate; border-spacing: 0; } .agenda-table th { font-weight: 600; color: hsl(240, 10%, 30%); padding: 0.75rem 1rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .agenda-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem; } .agenda-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .agenda-table tbody tr:last-child td { border-bottom: none; } /* Estilos para la tabla de agenda de atención al cliente */ .agenda-atencion-cliente-table { width: 100%; border-collapse: separate; border-spacing: 0; } .agenda-atencion-cliente-table th { font-weight: 600; color: hsl(240, 10%, 30%); padding: 0.75rem 1rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .agenda-atencion-cliente-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem; } .agenda-atencion-cliente-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .agenda-atencion-cliente-table tbody tr:last-child td { border-bottom: none; } /* Estilos para las tarjetas */ .dashboard-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } /* Estilos para badges y etiquetas */ .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .status-badge-success { background-color: hsl(142, 71%, 45%, 0.1); color: hsl(142, 71%, 45%); } .status-badge-warning { background-color: hsl(35, 100%, 60%, 0.1); color: hsl(35, 100%, 60%); } .status-badge-info { background-color: hsl(210, 100%, 50%, 0.1); color: hsl(210, 100%, 50%); } /* Estilos para asegurar que el scroll funcione correctamente */ html, body { height: 100%; overflow: hidden; } /* Estilos para la paginación en dispositivos móviles */ @media (max-width: 768px) { .pagination-container { flex-direction: column; gap: 0.5rem; } } [V0_FILE]css:file="app/atencion-cliente/gestion/agenda/agenda.css" isMerged="true" /* Estilos para la agenda */ .agenda-container { width: 100%; max-width: 100%; overflow-x: auto; } .agenda-table { border-collapse: separate; border-spacing: 0; } .agenda-table th { position: sticky; top: 0; z-index: 10; } .agenda-table tr:hover { background-color: rgba(227, 242, 253, 0.7); } .content-container { padding-bottom: 80px; /* Espacio para el botón flotante */ } /* Estilos para los tooltips de perfil */ tr[data-profile-category]::before { content: attr(data-profile-label); position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 100; pointer-events: none; max-width: 300px; text-align: center; } tr[data-profile-category]:hover::before { opacity: 1; visibility: visible; } tr[data-profile-category="excellent"]::before { background-color: #22c55e; } tr[data-profile-category="very-good"]::before { background-color: #eab308; } tr[data-profile-category="good"]::before { background-color: #ef4444; } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/client-info.tsx" isMerged="true" "use client" import type React from "react" import { useRouter } from "next/navigation" import { useState, useEffect } from "react" import { getClientById } from "./data/clients-data" import ClientHeader from "./components/client-header" import NavigationTabs from "./components/navigation-tabs" import SpeechTab from "./components/tab-components/speech-tab" import ClientInfoTab from "./components/tab-components/client-info-tab" import ProgramInfoTab from "./components/tab-components/program-info-tab" import AcademicPortalTab from "./components/tab-components/academic-portal-tab" import DocumentationTab from "./components/tab-components/documentation-tab" import EnrolledCoursesTab from "./components/tab-components/enrolled-courses-tab" import PaymentManagementTab from "./components/tab-components/payment-management-tab" import { ReporteIncidenciaAtencionClienteButton } from "@/components/reporte-incidencia-atencion-cliente-button" import { AgendaContainer } from "@/components/agenda-container" import { ComentarioActividadAtencionClienteButton } from "@/components/comentario-actividad-atencion-cliente-button" import ChatInterfaceAtencionCliente from "@/components/chat-interface-atencion-cliente" import TopActionButtons from "./components/top-action-buttons" // Eliminar esta línea si ya no se usa // import ActionButtons from "./components/action-buttons" interface ClientInfoProps { id: string } export default function ClientInfo({ id }: ClientInfoProps) { const router = useRouter() const clientData = getClientById(id) const [activeTab, setActiveTab] = useState("speech") const [whatsappMessageInput, setWhatsappMessageInput] = useState("") const handleWhatsappMessageChange = (e: React.ChangeEvent) => { setWhatsappMessageInput(e.target.value) } // Establecer la pestaña activa basada en el hash de la URL al cargar useEffect(() => { if (typeof window !== "undefined") { const hash = window.location.hash.replace("#", "") if (hash) { setActiveTab(hash) } } }, []) // Actualizar el hash de la URL cuando cambia la pestaña activa useEffect(() => { if (typeof window !== "undefined") { window.location.hash = activeTab } }, [activeTab]) // Si no se encuentra el cliente, mostrar un mensaje y un botón para volver if (!clientData) { return (

Cliente no encontrado

No se pudo encontrar el cliente con ID: {id}. Es posible que el cliente haya sido eliminado o que el ID sea incorrecto.

) } const handleBack = () => { router.back() } // Renderizar el contenido según la pestaña activa const renderTabContent = () => { switch (activeTab) { case "speech": return case "clientInfo": return case "programInfo": return case "academicPortal": return case "documentation": return case "enrolledCourses": return case "paymentManagement": return default: return } } return (

{/* Navegación por pestañas - colocada antes del header del cliente */}

{/* Botones de acción - ahora usando el componente TopActionButtons */} {activeTab === "speech" && (

)} {/* Información del cliente */} {activeTab === "speech" && (

)} {/* Contenido de la pestaña activa */}

{renderTabContent()}

{/* Botón flotante para ir al reporte de incidencia */} {activeTab === "speech" && (

{}} />

)} {/* Agregar el botón de comentario de actividad */}

{/* Chat flotante - solo visible en esta página específica */} ) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/academic-summary-asincronico.tsx" isMerged="true" "use client" import { useState } from "react" export default function AcademicSummaryAsincronico() { const [showDateModal, setShowDateModal] = useState(false) const [estimatedEndDate, setEstimatedEndDate] = useState("29/11/2024") const [selectedDate, setSelectedDate] = useState("") const handleDateChange = (date: string) => { setSelectedDate(date) } const handleSaveDate = () => { if (selectedDate) { // Convert ISO date to DD/MM/YYYY format const dateObj = new Date(selectedDate) const formattedDate = `${dateObj.getDate().toString().padStart(2, "0")}/${(dateObj.getMonth() + 1).toString().padStart(2, "0")}/${dateObj.getFullYear()}` setEstimatedEndDate(formattedDate) setShowDateModal(false) setSelectedDate("") } } const handleCancel = () => { setShowDateModal(false) setSelectedDate("") } return (

{/* Fechas importantes - Información de matrícula */}

Fecha de matrícula

14/02/2024

Fecha de inicio

09/08/2024

Fecha de término estimada

{estimatedEndDate}

{/* Modal para seleccionar nueva fecha */} {showDateModal && (

{/* Header */}

Nueva Fecha de Término

{/* Content */}

Seleccione la nueva fecha de término estimada

handleDateChange(e.target.value)} className="w-64 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500" />

{selectedDate && (

Nueva fecha seleccionada:{" "} {new Date(selectedDate).toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric", })}

)}

{/* Footer */}

)} {/* Contenido principal - Avance académico */}

{/* Gráfico de asistencia */}

Tasa de avance

{/* Círculo de fondo */}

{/* Círculo de progreso - 35% */}

{/* Texto central */}

35% Tasa de avance

Sesiones avanzadas: 12

Sesiones totales: 35

{/* Actividades */}

Actividades

Total de Actividades

Todas las actividades programadas en el curso

Actividades Pendientes

Actividades que aún no han sido completadas

Progreso general

51%

{/* Información de la última sesión */}

Avance programado

¿El avance va de acuerdo a lo estimado?

Horas avanzadas en la semana

2 horas

Ultimo dia de avance

05/11/2024

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/academic-summary-sincronico.tsx" isMerged="true" "use client" export default function AcademicSummarySincronico() { return (

{/* Fechas importantes - Información de matrícula */}

Fecha de matrícula

14/02/2024

Fecha de inicio

09/08/2024

Fecha de término

29/11/2024

{/* Contenido principal - Avance académico */}

{/* Gráfico de asistencia */}

Tasa de asistencia

{/* Círculo de fondo */}

{/* Círculo de progreso - 73% */}

{/* Texto central */}

73% Tasa de asistencia

Asistencias: 11

Sesiones dictadas: 15

{/* Actividades */}

Actividades

Total de Actividades

Todas las actividades programadas en el curso

Actividades Pendientes

Actividades que aún no han sido completadas

Progreso general

100%

{/* Información de la última sesión */}

Información de la última sesión

¿Asistió?

Sí

Última sesión dictada

29/11/2024

Próxima sesión

Ninguna

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/academic-summary.tsx" isMerged="true" "use client" export default function AcademicSummary() { return (

{/* Fechas importantes - Información de matrícula */}

Fecha de matrícula

14/02/2024

Fecha de inicio

09/08/2024

Fecha de término

29/11/2024

{/* Contenido principal - Avance académico */}

{/* Gráfico de asistencia */}

Tasa de asistencia

{/* Círculo de fondo */}

{/* Círculo de progreso - 73% */}

{/* Texto central */}

73% Tasa de asistencia

Asistencias: 11

Sesiones dictadas: 15

{/* Actividades */}

Actividades

Total de Actividades

Todas las actividades programadas en el curso

Actividades Pendientes

Actividades que aún no han sido completadas

Progreso general

100%

{/* Información de la última sesión */}

Información de la última sesión

¿Asistió?

Sí

Última sesión dictada

29/11/2024

Próxima sesión

Ninguna

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/action-buttons.tsx" isMerged="true" "use client" import type React from "react" import { useState, useCallback, useRef, useEffect } from "react" interface ActionButtonsProps { email?: string phone?: string } export default function ActionButtons({ email = "PruebaAlvarez@gmail.com", phone = "+51 922 191 058", }: ActionButtonsProps) { const [showWhatsappPopup, setShowWhatsappPopup] = useState(false) const [showEmailPopup, setShowEmailPopup] = useState(false) const [showConditionsPopup, setShowConditionsPopup] = useState(false) // Referencias para los botones const whatsappButtonRef = useRef(null) const emailButtonRef = useRef(null) const conditionsButtonRef = useRef(null) // Usar useCallback para evitar recreaciones innecesarias de funciones const toggleWhatsappPopup = useCallback((e?: React.MouseEvent) => { if (e) { e.preventDefault() e.stopPropagation() // Detiene la propagación del evento } setShowWhatsappPopup((prev) => !prev) console.log("Toggle WhatsApp popup") }, []) const toggleEmailPopup = useCallback((e?: React.MouseEvent) => { if (e) { e.preventDefault() e.stopPropagation() } setShowEmailPopup((prev) => !prev) console.log("Toggle Email popup") }, []) const toggleConditionsPopup = useCallback((e?: React.MouseEvent) => { if (e) { e.preventDefault() e.stopPropagation() } setShowConditionsPopup((prev) => !prev) console.log("Toggle Conditions popup") }, []) // Usar useEffect para agregar event listeners nativos useEffect(() => { const whatsappButton = whatsappButtonRef.current const emailButton = emailButtonRef.current const conditionsButton = conditionsButtonRef.current if (whatsappButton) { const handleWhatsappClick = (e: Event) => { e.preventDefault() e.stopPropagation() setShowWhatsappPopup((prev) => !prev) console.log("Native WhatsApp button click") } whatsappButton.addEventListener("click", handleWhatsappClick) return () => { whatsappButton.removeEventListener("click", handleWhatsappClick) } } // Similar para los otros botones... }, []) // Depurar cambios en el estado useEffect(() => { console.log("Estado del popup de WhatsApp:", showWhatsappPopup) }, [showWhatsappPopup]) useEffect(() => { console.log("Estado del popup de Email:", showEmailPopup) }, [showEmailPopup]) useEffect(() => { console.log("Estado del popup de Condiciones:", showConditionsPopup) }, [showConditionsPopup]) return ( <>

{/* Popup for Whatsapp Access */} {showWhatsappPopup && (

{ // Solo cerrar si se hace clic en el fondo, no en el contenido if (e.target === e.currentTarget) { toggleWhatsappPopup() } }} >

e.stopPropagation()} // Evitar que los clics en el contenido cierren el popup >

Enviar Accesos Portal Web por Whatsapp

Número de WhatsApp

Mensaje

)} {/* Popup for Email Access */} {showEmailPopup && (

{ if (e.target === e.currentTarget) { toggleEmailPopup() } }} >

e.stopPropagation()}>

Enviar Accesos Portal Web por correo

Correo electrónico

Asunto

Mensaje

)} {/* Popup for Conditions */} {showConditionsPopup && (

{ if (e.target === e.currentTarget) { toggleConditionsPopup() } }} >

e.stopPropagation()}>

Enviar Condiciones y características por correo

Correo electrónico

Asunto

Mensaje

Adjuntos

Condiciones_Programa.pdf

)} ) } [V0_FILE]css:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/badge-animation.css" isMerged="true" @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .blink-animation { animation: blink 2s infinite; } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/beneficios-solicitados-collapsible.tsx" isMerged="true" "use client" import { useState } from "react" import { Gift, ChevronDown } from "lucide-react" import BeneficiosSolicitadosTable from "./beneficios-solicitados-table" export default function BeneficiosSolicitadosCollapsible() { const [isOpen, setIsOpen] = useState(false) return (

{/* Header - Exactamente con el color #e3f2fd */}

{/* Content */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/beneficios-solicitados-table.tsx" isMerged="true" "use client" import { RefreshCw } from "lucide-react" export default function BeneficiosSolicitadosTable() { return (

Beneficio solicitado	Programa	Centro costo	Fecha de solicitud	Fecha programada	Fecha entrega	Coordinador	Estado de solicitud	Aprobar solicitud	Restablecer solicitud
Acceso al material oficial del PMI elaborado a partir del Esquema de Contenido del Examen PMP® (ECO) vigente para el desarrollo del Curso de preparación PMP®.	Curso Oficial de Preparación para el Examen Project Management Professional (PMP)®	PREP EXAMPMP ONLINE 2024 XIV LIMA	28/02/2025	05/04/2025	06/03/2025	Bianca Mamani	Entregado

{/* Paginación */}

Página

{}} />

de 1

items por página

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/certificaciones-tasas-collapsible.tsx" isMerged="true" "use client" import { useState } from "react" import { CheckCircle, ChevronDown } from "lucide-react" import CertificacionesTasasTable from "./certificaciones-tasas-table" export default function CertificacionesTasasCollapsible() { const [isOpen, setIsOpen] = useState(false) return (

{/* Header - Exactamente con el color #e3f2fd */}

{/* Content */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/certificaciones-tasas-table.tsx" isMerged="true" "use client" import BotonDeTabla from "@/components/boton-de-tabla" export default function CertificacionesTasasTable() { return (

Concepto	Monto	Fecha Registro	Documento	Generar	Republicación Certificado	Solicitar Certificado Físico
Certificado Partner PMI	0 PEN	21/05/2025 \| 5:09 p. m.	Descargar	Generar	Republicar	Solicitar

{/* Paginación */}

Página

{}} />

de 1

items por página

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/change-request-collapsible.tsx" isMerged="true" "use client" import { useState } from "react" import { CheckCircle, ChevronDown } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import SolicitudesRealizadasTable from "./solicitudes-realizadas-table" import HistorialCambioAsistenteTable from "./historial-cambio-asistente-table" function SolicitudesPendientesTable() { // Datos para la tabla de solicitudes pendientes const solicitudesPendientesData = [ { tipoSolicitud: "Subestado", valorAnterior: "Por emitir certificado aprobado", valorNuevo: "Certificado emitido", solicitante: "Bianca Mamani", fechaSolicitud: "08/12/2025", horaSolicitud: "4:09 p. m.", }, ] // Función para obtener el estilo según el tipo de solicitud const getTipoSolicitudStyle = (tipo) => { if (tipo === "Centro de costo") { return "bg-purple-100 text-purple-800 border border-purple-300" } if (tipo === "Estado") { return "bg-blue-100 text-blue-800 border border-blue-300" } if (tipo === "Subestado") { return "bg-amber-100 text-amber-800 border border-amber-300" } return "bg-gray-100 text-gray-800 border border-gray-300" } return (

{solicitudesPendientesData.map((solicitud, index) => { const tipoSolicitudStyle = getTipoSolicitudStyle(solicitud.tipoSolicitud) return ( ) })}

Tipo de Solicitud	Valor Anterior	Valor Nuevo	Solicitante	Fecha Solicitud
{solicitud.tipoSolicitud}	{solicitud.valorAnterior}	{solicitud.valorNuevo}	{solicitud.solicitante}	{solicitud.fechaSolicitud} \| {solicitud.horaSolicitud}

{/* Paginación */}

Página

{}} />

de 1

items por página

) } export default function ChangeRequestCollapsible() { const [isOpen, setIsOpen] = useState(false) const [activeTab, setActiveTab] = useState("pending") return ( {/* Header */} {/* Content */} {isOpen && (

{/* Navigation Buttons - Exactly like the example */}

{/* Tab Content */}

{activeTab === "pending" && } {activeTab === "completed" && } {activeTab === "history" && }

)} ) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/client-header.tsx" isMerged="true" "use client" import { ArrowLeft, FileText, Mic, Play, BookOpen, Edit, Mail, Phone, Send, ChevronDown, Eye, Building2, User, AlertTriangle, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import type { ClientData } from "../data/clients-data" import { useState } from "react" import "./badge-animation.css" interface ChangeRequestModalProps { isOpen: boolean onClose: () => void type: "centro-costo" | "version" | "estado" | "sub-estado" currentValue: string } const ChangeRequestModal = ({ isOpen, onClose, type, currentValue }: ChangeRequestModalProps) => { const [selectedValue, setSelectedValue] = useState("") const [comment, setComment] = useState("") if (!isOpen) return null const getTitle = () => { switch (type) { case "centro-costo": return "Solicitar Cambio Centro Costo" case "version": return "Solicitar Cambio de Versión" case "estado": return "Solicitar Cambio Estado" case "sub-estado": return "Solicitar Cambio Sub Estado" default: return "Solicitar Cambio" } } const getDropdownLabel = () => { switch (type) { case "centro-costo": return "Nuevo Centro de Costo" case "version": return "Nueva Versión" case "estado": return "Nuevo Estado" case "sub-estado": return "Nuevo Sub Estado" default: return "Nuevo Valor" } } const getOptions = () => { switch (type) { case "centro-costo": return ["CDMEXICO", "CDPERU", "CDCOLOMBIA", "CDCHILE"] case "version": return ["Gerencial", "Ejecutiva", "Premium", "Básica"] case "estado": return ["Certificado", "En Proceso", "Pendiente", "Cancelado"] case "sub-estado": return ["aprobado BSGI CD", "pendiente BSGI CD", "rechazado BSGI CD"] default: return [] } } const handleAccept = () => { console.log("Solicitud de cambio:", { type, selectedValue, comment }) onClose() } return (

{getTitle()}

{getDropdownLabel()}

Comentario

setComment(e.target.value)}
              className="w-full border border-gray-300 rounded-md px-3 py-2 h-24 resize-none focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
              placeholder="Ingrese su comentario..."
            />
          </div>
        </div>
        <div className="flex justify-end space-x-3 p-6 pt-0">
          <button
            onClick={onClose}
            className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
          >
            Cancelar
          </button>
          <button
            onClick={handleAccept}
            className="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 transition-colors"
          >
            Aceptar
          </button>
        </div>
      </div>
    </div>
  )
}

const VoiceAgreementModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration] = useState(30) // 30 segundos de duración
  const [volume, setVolume] = useState(100)
  const [playbackSpeed, setPlaybackSpeed] = useState(1)

if (!isOpen) return null

const handlePlayPause = () => {
    setIsPlaying(!isPlaying)
    // Aquí iría la lógica real de reproducción
  }

const handleRewind = () => {
    setCurrentTime(Math.max(0, currentTime - 10))
  }

const handleForward = () => {
    setCurrentTime(Math.min(duration, currentTime + 10))
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl w-[500px] max-w-[90vw]">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b">
          <div className="flex items-center gap-3">
            <div className="bg-blue-100 p-2 rounded-full">
              <Mic className="h-5 w-5 text-blue-600" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-gray-900">Convenio de Voz</h2>
              <p className="text-sm text-gray-500">Cliente - Convenio de matrícula</p>
            </div>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

{/* Content */}
        <div className="p-6 space-y-6">
          {/* Info Grid */}
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="text-gray-500">Fecha:</span>
              <span className="ml-2 font-medium">24/04/2025</span>
            </div>
            <div>
              <span className="text-gray-500">Hora:</span>
              <span className="ml-2 font-medium">11:15 AM</span>
            </div>
            <div>
              <span className="text-gray-500">Duración:</span>
              <span className="ml-2 font-medium">0:30 s</span>
            </div>
            <div>
              <span className="text-gray-500">Estado:</span>
              <span className="ml-2 font-medium text-green-600">Completada</span>
            </div>
          </div>

{/* Info Message */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <div className="bg-blue-500 text-white rounded-full p-1 mt-0.5">
                <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 112 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <p className="text-blue-700 text-sm">
                Reproductor funcional - En producción se conectará con tu base de datos
              </p>
            </div>
          </div>

{/* Play Button */}
          <div className="flex justify-center">
            <button
              onClick={handlePlayPause}
              className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-4 transition-colors"
            >
              {isPlaying ? (
                <svg className="h-8 w-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              ) : (
                <svg className="h-8 w-8 ml-1" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm9.555 7.168A1 1 0 0018 8v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              )}
            </button>
          </div>

{/* Progress Bar */}
          <div className="space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-sm text-gray-500 w-10">{formatTime(currentTime)}</span>
              <div className="flex-1 bg-gray-200 rounded-full h-2">
                <div
                  className="bg-blue-500 h-2 rounded-full transition-all duration-300"
                  style={{ width: `${(currentTime / duration) * 100}%` }}
                />
              </div>
              <span className="text-sm text-gray-500 w-10">{formatTime(duration)}</span>
            </div>
          </div>

{/* Volume and Controls */}
          <div className="flex items-center justify-between">
            {/* Volume */}
            <div className="flex items-center gap-2">
              <svg className="h-4 w-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fillRule="evenodd"
                  d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.816L4.846 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.846l3.537-3.816a1 1 0 011.617.816zM16 8a2 2 0 11-4 0 2 2 0 014 0z"
                  clipRule="evenodd"
                />
              </svg>
              <div className="w-20 bg-gray-200 rounded-full h-2">
                <div className="bg-blue-500 h-2 rounded-full" style={{ width: `${volume}%` }} />
              </div>
              <span className="text-sm text-gray-500 w-8">{volume}%</span>
            </div>

{/* Playback Speed and Download */}
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <span className="text-sm text-gray-500">Velocidad:</span>
                <select
                  value={playbackSpeed}
                  onChange={(e) => setPlaybackSpeed(Number(e.target.value))}
                  className="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value={0.5}>0.5x</option>
                  <option value={0.75}>0.75x</option>
                  <option value={1}>Normal</option>
                  <option value={1.25}>1.25x</option>
                  <option value={1.5}>1.5x</option>
                  <option value={1.75}>1.75x</option>
                  <option value={2}>2x</option>
                </select>
              </div>
              <button
                onClick={() => {
                  // Simulate download
                  console.log("Descargando audio...")
                }}
                className="flex items-center gap-1 text-gray-500 hover:text-gray-700 transition-colors bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded"
              >
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                  />
                </svg>
                <span className="text-sm">Descargar</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

interface ClientHeaderProps {
  clientData: ClientData
  onBack: () => void
}

export default function ClientHeader({ clientData, onBack }: ClientHeaderProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [selectedEmail, setSelectedEmail] = useState("secundario")
  const [selectedPhone, setSelectedPhone] = useState("principal")
  const [isMatriculasModalOpen, setIsMatriculasModalOpen] = useState(false)
  const [modalOpen, setModalOpen] = useState(false)
  const [modalType, setModalType] = useState<"centro-costo" | "version" | "estado" | "sub-estado">("centro-costo")
  const [isVoiceAgreementModalOpen, setIsVoiceAgreementModalOpen] = useState(false)
  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false)

const handlePlayVoiceAgreement = () => {
    setIsPlaying(true)
    // Simulación de reproducción de audio
    setTimeout(() => {
      setIsPlaying(false)
    }, 3000)
  }

const emailOptions = {
    principal: "PruebaAlvarez@gmail.com",
    secundario: "jalvarez@gmail.com",
  }

const phoneOptions = {
    principal: "+51 922 191 058",
    secundario: "+51 987 654 321",
  }

return (
    <Card className="border-0 shadow-md overflow-hidden mt-8">
      <CardContent className="p-0">
        {/* Barra superior con información adicional */}
        <div className="bg-[#e3f2fd] px-8 py-2 flex flex-wrap justify-between items-center border-b border-[#cce3fd]">
          <Button
            variant="ghost"
            onClick={onBack}
            className="flex items-center gap-1 text-[#004fff] hover:bg-[#cce3fd] p-1.5"
          >
            <ArrowLeft className="h-4 w-4" />
            <span>Volver</span>
          </Button>

<div className="flex items-center gap-4 text-sm">
            <div className="flex items-center gap-1.5">
              <div className="bg-[#004fff] text-white p-1 rounded-full">
                <FileText className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff]">Tab Origen:</span>
              <span className="text-gray-700">Contacto Entrante</span>
            </div>
          </div>
        </div>

{/* Course Title Section - Independent Layout */}
        <div className="bg-white px-8 py-4 border-b border-gray-200">
          <h1 className="text-lg font-semibold text-[#004fff] leading-tight text-center">
            Curso Oficial de Preparación para el Examen Project Management Professional (PMP)® ONLINE 2023 V CDMEXICO
          </h1>
        </div>

{/* Contenido principal */}
        <div className="p-8 bg-white">
          {/* Información del cliente */}
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
            {/* Información del cliente */}
            <div className="min-w-0">
              <div className="w-full">
                <div className="flex flex-col gap-8">
                  {/* Información del cliente */}
                  <div className="w-full">
                    <div className="flex items-center gap-2 mb-4 flex-wrap">
                      {/* Remove Regular Badge */}
                      <h2 className="text-xl font-bold text-[#004fff]">{clientData.name}</h2>
                      {/* Etiqueta de pago atrasado - versión en línea */}
                      <div className="inline-flex items-center ml-2">
                        <div className="bg-red-500 text-white px-3 py-1 rounded-md shadow-sm blink-animation flex items-center gap-2 whitespace-nowrap">
                          <span className="text-white flex-shrink-0 text-lg leading-none">⚠️</span>
                          <span className="text-sm font-medium">Cliente con pago atrasado</span>
                        </div>
                      </div>
                    </div>

<div className="space-y-4">
                      <div className="flex items-center gap-2 text-gray-700">
                        <FileText className="h-4 w-4 text-[#004fff]" />
                        <p className="text-sm">Cod. Matricula: 10117142A23266</p>
                      </div>
                      <div className="flex items-center gap-2 text-gray-700">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 px-2 text-xs text-orange-600 hover:bg-orange-600 hover:text-white"
                          onClick={() => {
                            setModalType("centro-costo")
                            setModalOpen(true)
                          }}
                        >
                          <Edit className="h-3 w-3 mr-1" />
                        </Button>
                        <p className="text-sm">PREP EXAMPMP ONLINE 2023 V CDMEXICO</p>
                      </div>

<div className="flex items-center gap-2 text-gray-700">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 px-2 text-xs text-orange-600 hover:bg-orange-600 hover:text-white"
                          onClick={() => {
                            setModalType("version")
                            setModalOpen(true)
                          }}
                        >
                          <Edit className="h-3 w-3 mr-1" />
                        </Button>
                        <p className="text-sm">Versión: Gerencial</p>
                      </div>

<div className="flex items-center gap-2 text-gray-700">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 px-2 text-xs text-orange-600 hover:bg-orange-600 hover:text-white"
                          onClick={() => {
                            setModalType("estado")
                            setModalOpen(true)
                          }}
                        >
                          <Edit className="h-3 w-3 mr-1" />
                        </Button>
                        <p className="text-sm">Estado: Certificado</p>
                      </div>

<div className="flex items-center gap-2 text-gray-700">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 px-2 text-xs text-orange-600 hover:bg-orange-600 hover:text-white"
                          onClick={() => {
                            setModalType("sub-estado")
                            setModalOpen(true)
                          }}
                        >
                          <Edit className="h-3 w-3 mr-1" />
                        </Button>
                        <p className="text-sm">Sub-Estado: Aprobado BSGI CD</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Información adicional - lado derecho */}
            <div className="flex flex-col items-end justify-start gap-3 self-start py-4 flex-shrink-0 min-w-[300px]">
              {/* Ubicación */}
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
                <div className="h-5 w-5 rounded-full overflow-hidden flex items-center justify-center">
                  <svg className="h-6 w-6" viewBox="0 0 549.6 549.6" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="274.8" cy="274.8" r="256" fill="#fff" />
                    <path
                      d="M530.8,274.8c0-110.1-69.5-203.9-167-240.1v480.2c97.5-36.2,167-130,167-240.1h0Z"
                      fill="#d80027"
                    />
                    <path
                      d="M18.8,274.8c0,110.1,69.5,203.9,167,240.1V34.7C88.3,70.9,18.8,164.7,18.8,274.8Z"
                      fill="#d80027"
                    />
                  </svg>
                </div>
                <span className="text-gray-700 text-sm font-medium">{clientData.location}</span>
              </div>

{/* Nueva etiqueta: Matrículas adicionales */}
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
                <div className="bg-amber-100 p-1 rounded-full">
                  <BookOpen className="h-3.5 w-3.5 text-amber-600" />
                </div>
                <span className="text-gray-700 text-sm font-medium">
                  Matrículas adicionales: {clientData.additionalEnrollments || 0}
                </span>
                {clientData.additionalEnrollments > 0 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 w-6 p-0 rounded-full bg-blue-100 hover:bg-blue-200 ml-1"
                    onClick={() => setIsMatriculasModalOpen(true)}
                  >
                    <Eye className="h-3.5 w-3.5 text-blue-600" />
                  </Button>
                )}
              </div>

{/* Nueva etiqueta: Tipo de matrícula */}
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
                <div className="bg-purple-100 p-1 rounded-full">
                  <Building2 className="h-3.5 w-3.5 text-purple-600" />
                </div>
                <span className="text-gray-700 text-sm font-medium">Tipo de matrícula: Empresarial</span>
              </div>

{/* Nueva etiqueta: Convenio de voz */}
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
                <div className="bg-blue-100 p-1 rounded-full">
                  <Mic className="h-3.5 w-3.5 text-blue-600" />
                </div>
                <span className="text-gray-700 text-sm font-medium">
                  Convenio de voz: {clientData.hasVoiceAgreement ? "Sí" : "No"}
                </span>
                {clientData.hasVoiceAgreement && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 w-6 p-0 rounded-full bg-green-100 hover:bg-green-200"
                    onClick={() => setIsVoiceAgreementModalOpen(true)}
                    disabled={isPlaying}
                  >
                    <Play className="h-3.5 w-3.5 text-green-600" />
                  </Button>
                )}
              </div>

{/* Nueva etiqueta: Asesor Comercial */}
              <div className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
                <div className="bg-indigo-100 p-1 rounded-full">
                  <User className="h-3.5 w-3.5 text-indigo-600" />
                </div>
                <span className="text-gray-700 text-sm font-medium">Asesor Comercial: Yesica Palomino</span>
              </div>
            </div>
          </div>

{/* Sección de Email y Celular - Layout centrado */}
          <div className="pt-8 w-full flex justify-center border-b border-gray-100 pb-6">
            <div className="flex items-center gap-6">
              {/* Sección Email */}
              <div className="flex items-center gap-1">
                <span className="text-sm font-semibold text-gray-800 w-16">Email</span>
                <div className="flex items-center border border-gray-300 rounded-md bg-white h-10">
                  <div className="flex items-center px-3 h-full">
                    <Mail className="h-4 w-4 text-blue-600 mr-2" />
                    <span className="text-sm text-gray-900 w-48 truncate">
                      {emailOptions[selectedEmail as keyof typeof emailOptions]}
                    </span>
                  </div>
                  <div className="relative h-full">
                    <select
                      value={selectedEmail}
                      onChange={(e) => setSelectedEmail(e.target.value)}
                      className="h-full px-3 pr-8 text-xs text-blue-600 bg-blue-50 border-l border-gray-300 rounded-r-md appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="principal">principal</option>
                      <option value="secundario">secundario</option>
                    </select>
                    <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-blue-600 pointer-events-none" />
                  </div>
                </div>
                <Button
                  className="bg-blue-600 hover:bg-blue-700 text-white h-10 px-4"
                  onClick={() => setIsEmailModalOpen(true)}
                >
                  <Send className="h-4 w-4 mr-2" />
                </Button>
              </div>

{/* Sección Celular */}
              <div className="flex items-center gap-1">
                <span className="text-sm font-semibold text-gray-800 w-16">Celular</span>
                <div className="flex items-center border border-gray-300 rounded-md bg-white h-10">
                  <div className="flex items-center px-3 h-full">
                    <Phone className="h-4 w-4 text-green-600 mr-2" />
                    <span className="text-sm text-gray-900 w-32">
                      {phoneOptions[selectedPhone as keyof typeof phoneOptions]}
                    </span>
                  </div>
                  <div className="relative h-full">
                    <select
                      value={selectedPhone}
                      onChange={(e) => setSelectedPhone(e.target.value)}
                      className="h-full px-3 pr-8 text-xs text-green-600 bg-green-50 border-l border-gray-300 rounded-r-md appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-green-500"
                    >
                      <option value="principal">principal</option>
                      <option value="secundario">secundario</option>
                    </select>
                    <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-green-600 pointer-events-none" />
                  </div>
                </div>
                <Button className="bg-green-600 hover:bg-green-700 text-white h-10 px-4">
                  <Phone className="h-4 w-4 mr-2" />
                </Button>
              </div>
            </div>
          </div>

{/* Información de Compromisos e Información de Cuotas */}
          <div className="pt-6 w-full">
            <div className="grid grid-cols-3 gap-4 w-full">
              {/* Cuadro 1: Información de Compromisos */}
              <div className="border border-gray-200 rounded-lg p-4 bg-white shadow-sm w-full">
                <div className="flex items-center mb-4">
                  <div className="bg-green-500 text-white p-1.5 rounded-full mr-2">
                    <svg
                      className="h-4 w-4"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                      <line x1="16" y1="2" x2="16" y2="6"></line>
                      <line x1="8" y1="2" x2="8" y2="6"></line>
                      <line x1="3" y1="10" x2="21" y2="10"></line>
                      <path d="M8 14h.01"></path>
                      <path d="M12 14h.01"></path>
                      <path d="M16 14h.01"></path>
                      <path d="M8 18h.01"></path>
                      <path d="M12 18h.01"></path>
                      <path d="M16 18h.01"></path>
                    </svg>
                  </div>
                  <h3 className="font-medium text-gray-800">Información de Compromisos</h3>
                </div>

{/* Compromisos incumplidos */}
                <div className="mb-4">
                  <div className="bg-red-50 p-4 rounded-lg text-center border border-red-100">
                    <p className="text-xs text-gray-600 mb-1">Compromisos Incumplidos</p>
                    <p className="text-2xl font-bold text-red-600">0</p>
                  </div>
                </div>

{/* Último compromiso */}
                <div>
                  <h4 className="text-sm font-semibold text-gray-700 mb-3">Último compromiso</h4>
                  <div className="grid grid-cols-3 gap-3">
                    <div className="bg-blue-50 p-3 rounded-lg text-center">
                      <p className="text-xs text-gray-600 mb-1">Fecha</p>
                      <p className="text-sm font-semibold text-gray-800">28/06/2024</p>
                    </div>
                    <div className="bg-blue-50 p-3 rounded-lg text-center">
                      <p className="text-xs text-gray-600 mb-1">Monto</p>
                      <p className="text-sm font-semibold text-gray-800">302.56 USD</p>
                    </div>
                    <div className="bg-green-50 p-3 rounded-lg text-center">
                      <p className="text-xs text-gray-600 mb-1">Estado</p>
                      <p className="text-sm font-semibold text-green-600">Cumplido</p>
                    </div>
                  </div>
                </div>
              </div>

{/* Cuadro 2: Información de Cuotas */}
              <div className="border border-gray-200 rounded-lg p-4 bg-white shadow-sm w-full">
                <div className="flex items-center mb-4">
                  <div className="bg-purple-500 text-white p-1.5 rounded-full mr-2">
                    <svg
                      className="h-4 w-4"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <rect x="2" y="5" width="20" height="14" rx="2"></rect>
                      <line x1="2" y1="10" x2="22" y2="10"></line>
                    </svg>
                  </div>
                  <h3 className="font-medium text-gray-800">Información de Cuotas</h3>
                </div>

{/* Monto atrasado - ficha grande */}
                <div className="mb-4">
                  <div className="bg-orange-50 p-4 rounded-lg text-center border border-orange-100">
                    <p className="text-xs text-gray-600 mb-1">Monto Atrasado</p>
                    <p className="text-2xl font-bold text-orange-600">0 USD</p>
                  </div>
                </div>

{/* Segunda fila con cuotas atrasadas y próxima cuota */}
                <div className="grid grid-cols-2 gap-3">
                  <div className="bg-red-50 p-3 rounded-lg text-center">
                    <p className="text-xs text-gray-600 mb-1">Cuotas Atrasadas</p>
                    <p className="text-xl font-bold text-gray-800">0</p>
                  </div>
                  <div className="bg-blue-50 p-3 rounded-lg text-center">
                    <p className="text-xs text-gray-600 mb-1">Próxima Cuota</p>
                    <p className="text-sm font-semibold text-gray-800">No aplica</p>
                  </div>
                </div>
              </div>
              {/* Cuadro 3: Información de Encuestas */}
              <div className="border border-gray-200 rounded-lg p-4 bg-white shadow-sm w-full">
                <div className="flex items-center mb-4">
                  <div className="bg-orange-500 text-white p-1.5 rounded-full mr-2">
                    <svg
                      className="h-4 w-4"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                      <polyline points="14,2 14,8 20,8"></polyline>
                      <line x1="16" y1="13" x2="8" y2="13"></line>
                      <line x1="16" y1="17" x2="8" y2="17"></line>
                      <polyline points="10,9 9,9 8,9"></polyline>
                    </svg>
                  </div>
                  <h3 className="font-medium text-gray-800">Información de Encuestas</h3>
                </div>

{/* Encuestas pendientes y resueltas */}
                <div className="grid grid-cols-1 gap-3">
                  <div className="bg-yellow-50 p-3 rounded-lg text-center border border-yellow-100">
                    <p className="text-xs text-gray-600 mb-1">Encuesta Pendientes</p>
                    <p className="text-xl font-bold text-yellow-600">0</p>
                  </div>
                  <div className="bg-green-50 p-3 rounded-lg text-center border border-green-100">
                    <p className="text-xs text-gray-600 mb-1">Encuesta Resueltas</p>
                    <p className="text-xl font-bold text-green-600">5</p>
                  </div>
                </div>
              </div>
            </div>

<div className="mt-6 p-6 bg-white rounded-lg border border-gray-200">
              {/* Línea 1: Título con icono */}
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                  <AlertTriangle className="w-5 h-5 text-red-600" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900">Semáforo de Riesgos</h3>
              </div>

{/* Línea 3: Tarjetas con círculos */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Abandono */}
                <div className="flex flex-col items-center p-8 bg-white rounded-lg border border-gray-200">
                  <h4 className="text-base font-semibold text-gray-800 mb-4">Abandono</h4>
                  <div className="w-8 h-8 rounded-full bg-green-500"></div>
                  <span className="mt-3 px-3 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full border border-green-300">
                    Probabilidad baja
                  </span>
                </div>

{/* Atraso académico */}
                <div className="flex flex-col items-center p-8 bg-white rounded-lg border border-gray-200">
                  <h4 className="text-base font-semibold text-gray-800 mb-4">Atraso académico</h4>
                  <div className="w-8 h-8 rounded-full bg-yellow-500"></div>
                  <span className="mt-3 px-3 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full border border-yellow-300">
                    Probabilidad media
                  </span>
                </div>

{/* Atraso en pagos */}
                <div className="flex flex-col items-center p-8 bg-white rounded-lg border border-gray-200">
                  <h4 className="text-base font-semibold text-gray-800 mb-4">Atraso en pagos</h4>
                  <div className="w-8 h-8 rounded-full bg-red-500"></div>
                  <span className="mt-3 px-3 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full border border-red-300">
                    Probabilidad alta
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/client-info-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { CheckCircle, Phone, Mail, Copy, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import { useEmailModal } from "@/contexts/email-modal-context"

interface ClientInfoFormProps {
  clientData: any
}

export default function ClientInfoForm({ clientData }: ClientInfoFormProps) {
  const [isOpen, setIsOpen] = useState(true)
  const { openTemplateModal } = useEmailModal()

// Verificar si clientData existe
  if (!clientData || !clientData.contactInfo) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-4">
        <p className="text-red-500">Error: No se pudieron cargar los datos del cliente.</p>
      </div>
    )
  }

const handleEmailButtonClick = () => {
    openTemplateModal(clientData.contactInfo.email1)
  }

// Función para verificar si es un número telefónico
  const isPhoneNumberValue = (value: string) => {
    // Verificar si el valor comienza con + seguido de dígitos
    return value && /^\+\d+/.test(value)
  }

// Función para formatear números telefónicos
  const formatPhoneNumber = (phoneNumber: string) => {
    if (!phoneNumber || !isPhoneNumberValue(phoneNumber)) return phoneNumber

// Si comienza con +51 (prefijo de Perú)
    if (phoneNumber.startsWith("+51")) {
      // Extraer el prefijo y el resto del número
      const prefix = phoneNumber.substring(0, 3)
      const restOfNumber = phoneNumber.substring(3)

// Formatear el resto del número en grupos de 3
      let formattedRest = ""
      for (let i = 0; i < restOfNumber.length; i++) {
        formattedRest += restOfNumber[i]
        if ((i + 1) % 3 === 0 && i !== restOfNumber.length - 1) {
          formattedRest += " "
        }
      }

return `${prefix} ${formattedRest}`
    }

// Para otros formatos, intentar agrupar en bloques de 3
    let formatted = ""
    for (let i = 0; i < phoneNumber.length; i++) {
      formatted += phoneNumber[i]
      if ((i + 1) % 3 === 0 && i !== phoneNumber.length - 1) {
        formatted += " "
      }
    }

return formatted
  }

const ContactField = ({
    icon,
    iconBg,
    iconColor,
    label,
    value,
    hasCall = false,
    hasCheck = false,
    hasMail = false,
    showCopy = true,
    isPhoneField = false,
  }) => {
    // Determinar si debemos aplicar el formato de teléfono
    const shouldFormatAsPhone = isPhoneField && isPhoneNumberValue(value)
    const displayValue = shouldFormatAsPhone ? formatPhoneNumber(value) : value

return (
      <div className="flex items-center mb-4">
        {/* Label side */}
        <div className="w-24 flex-shrink-0 flex items-center gap-2">
          <div className={`${iconBg} p-1.5 rounded-full`}>{icon}</div>
          <span className="text-sm font-medium text-gray-700">{label}</span>
        </div>

{/* Input side */}
        <div className="flex-1 flex items-center">
          <input
            type="text"
            value={displayValue}
            readOnly
            className={`flex-1 bg-white px-3 py-2 h-10 text-sm ${showCopy || hasCall || hasMail || hasCheck ? "rounded-l-md" : "rounded-md"} text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all`}
          />
          <div className="flex h-10">
            {showCopy && (
              <button className="bg-white border-t border-b border-r border-gray-200 px-2 h-full hover:bg-gray-50 transition-colors flex items-center justify-center">
                <Copy className="h-4 w-4 text-gray-500" />
              </button>
            )}

{hasCall && (
              <button className="bg-white border-t border-b border-r border-gray-200 px-2 h-full hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center">
                <Phone className="h-4 w-4" />
              </button>
            )}

{hasMail && (
              <button
                className="bg-white border-t border-b border-r border-gray-200 px-2 h-full hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center"
                onClick={handleEmailButtonClick}
              >
                <Mail className="h-4 w-4" />
              </button>
            )}

{hasCheck && (
              <button className="bg-white border-t border-b border-r border-gray-200 px-2 h-full hover:bg-gray-50 rounded-r-md transition-colors flex items-center justify-center">
                <input
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-[#6419e6] focus:ring-[#6419e6]"
                />
              </button>
            )}
          </div>
        </div>
      </div>
    )
  }

return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden mb-0 w-full"
    >
      {/* Header */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">Información del cliente</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

{/* Content */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="p-5">
              <div className="flex flex-col items-center justify-center max-w-3xl mx-auto">
                <div className="w-full max-w-xl">
                  <ContactField
                    icon={<Mail className="h-4 w-4 text-blue-500" />}
                    iconBg="bg-blue-50"
                    iconColor="text-blue-500"
                    label="Email"
                    value={clientData.contactInfo.email1}
                    hasMail={true}
                    showCopy={true}
                    isPhoneField={false}
                  />

<ContactField
                    icon={<Phone className="h-4 w-4 text-[#004fff]" />}
                    iconBg="bg-[#e3f2fd]"
                    iconColor="text-[#004fff]"
                    label="Celular"
                    value={clientData.contactInfo.mobile1}
                    hasCall={true}
                    hasCheck={false}
                    showCopy={true}
                    isPhoneField={true}
                  />
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/empty-collapsible.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

interface EmptyCollapsibleProps {
  title?: string
}

export default function EmptyCollapsible({ title = "Ficha de resumen" }: EmptyCollapsibleProps) {
  const [isOpen, setIsOpen] = useState(true)

return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden mb-6 w-full"
    >
      {/* Header */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">{title}</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

import { DateLabel } from "@/components/date-label"
import { Legend } from "@/components/legend"

export default function HistorialCambioAsistenteTable() {
  // Datos para la tabla de historial de cambio de asistente
  const historialData = [
    {
      asistenteAnterior: "Elizabeth Beatriz Farfan Paucar",
      asistenteNueva: "Bianca Luz Mamani Choquehuanca",
      usuarioAprobacion: "Maria Salazar",
      fechaInicio: "22/11/2024",
      fechaFin: "Vigente",
    },
    {
      asistenteAnterior: "Fayet Nepdy Gonzales Puma",
      asistenteNueva: "Elizabeth Beatriz Farfan Paucar",
      usuarioAprobacion: "Maria Salazar",
      fechaInicio: "10/06/2024",
      fechaFin: "22/11/2024",
    },
    {
      asistenteAnterior: "Areli Ida Torres Guerra",
      asistenteNueva: "Fayet Nepdy Gonzales Puma",
      usuarioAprobacion: "Maria Salazar",
      fechaInicio: "09/05/2024",
      fechaFin: "10/06/2024",
    },
    {
      asistenteAnterior: "Jessica Gabriela Melgarejo Cajahuanca",
      asistenteNueva: "Areli Ida Torres Guerra",
      usuarioAprobacion: "Maria Salazar",
      fechaInicio: "03/04/2024",
      fechaFin: "09/05/2024",
    },
    {
      asistenteAnterior: "Frans Camero Cusihuallpa",
      asistenteNueva: "Jessica Gabriela Melgarejo Cajahuanca",
      usuarioAprobacion: "Maria Salazar",
      fechaInicio: "22/03/2024",
      fechaFin: "03/04/2024",
    },
  ]

return (
    <div className="overflow-x-auto">
      {/* Leyenda */}
      <Legend
        items={[
          { label: "F.I", description: "Fecha de Inicio", variant: "blue" },
          { label: "F.F", description: "Fecha de Finalización", variant: "green" },
        ]}
      />

<table className="w-full text-sm">
        <thead>
          <tr className="bg-[#e6f0ff]">
            <th className="py-2 px-4 text-left font-medium text-[#1a56db]">Asistente Anterior</th>
            <th className="py-2 px-4 text-left font-medium text-[#1a56db]">Asistente Nueva</th>
            <th className="py-2 px-4 text-left font-medium text-[#1a56db]">Usuario Aprobación</th>
            <th className="py-2 px-4 text-left font-medium text-[#1a56db]">Fechas</th>
          </tr>
        </thead>
        <tbody className="text-sm">
          {historialData.map((item, index) => (
            <tr key={index} className={`border-b ${index % 2 === 1 ? "bg-gray-50" : ""}`}>
              <td className="py-3 px-4 text-gray-700">{item.asistenteAnterior}</td>
              <td className="py-3 px-4">
                <span className="text-gray-700">{item.asistenteNueva}</span>
              </td>
              <td className="py-3 px-4">
                <span className="px-2 py-1 rounded-full text-xs bg-amber-100 text-amber-800 border border-amber-300">
                  {item.usuarioAprobacion}
                </span>
              </td>
              <td className="py-3 px-4">
                <div className="flex flex-col space-y-2">
                  <DateLabel label="F.I" date={item.fechaInicio} variant="blue" />
                  <DateLabel label="F.F" date={item.fechaFin} variant="green" />
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

{/* Paginación */}
      <div className="flex items-center justify-between p-3 border-t border-gray-200 text-xs">
        <div className="flex items-center gap-2">
          <span className="text-gray-600">Página</span>
          <div className="w-10 h-7 border border-gray-200 rounded flex items-center justify-center bg-white">
            <input type="text" defaultValue="1" className="w-full h-full text-center text-xs" onChange={(e) => {}} />
          </div>
          <span className="text-gray-600">de 1</span>
        </div>

<div className="flex items-center gap-2">
          <div className="relative">
            <select className="h-7 pl-2 pr-6 border border-gray-200 rounded appearance-none bg-white text-xs">
              <option>5</option>
              <option>10</option>
              <option>20</option>
            </select>
            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="10"
                height="10"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </div>
          </div>
          <span className="text-gray-600">items por página</span>
        </div>

<div className="flex items-center gap-1">
          <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="11 17 6 12 11 7"></polyline>
              <polyline points="18 17 13 12 18 7"></polyline>
            </svg>
          </button>
          <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200 bg-blue-600 text-white">
            1
          </button>
          <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
          <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="13 17 18 12 13 7"></polyline>
              <polyline points="6 17 11 12 6 7"></polyline>
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/historial-interaccion-oportunidades.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Mic } from "lucide-react"

const VoiceAgreementModal = ({
  isOpen,
  onClose,
  audioData,
}: { isOpen: boolean; onClose: () => void; audioData: any }) => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration] = useState(30) // 30 segundos de duración
  const [volume, setVolume] = useState(100)
  const [playbackSpeed, setPlaybackSpeed] = useState(1)

if (!isOpen) return null

const handlePlayPause = () => {
    setIsPlaying(!isPlaying)
    // Aquí iría la lógica real de reproducción
  }

const handleRewind = () => {
    setCurrentTime(Math.max(0, currentTime - 10))
  }

const handleForward = () => {
    setCurrentTime(Math.min(duration, currentTime + 10))
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

{/* Content */}
        <div className="p-6 space-y-6">
          {/* Info Grid */}
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="text-gray-500">Fecha:</span>
              <span className="ml-2 font-medium">{audioData?.fecha || "24/04/2025"}</span>
            </div>
            <div>
              <span className="text-gray-500">Hora:</span>
              <span className="ml-2 font-medium">{audioData?.hora || "11:15 AM"}</span>
            </div>
            <div>
              <span className="text-gray-500">Duración:</span>
              <span className="ml-2 font-medium">{audioData?.duracionConversacion || "0:30 s"}</span>
            </div>
            <div>
              <span className="text-gray-500">Estado:</span>
              <span className="ml-2 font-medium text-green-600">Completada</span>
            </div>
          </div>

{/* Info Message */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <div className="bg-blue-500 text-white rounded-full p-1 mt-0.5">
                <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <p className="text-blue-700 text-sm">
                Reproductor funcional - En producción se conectará con tu base de datos
              </p>
            </div>
          </div>

{/* Play Button */}
          <div className="flex justify-center">
            <button
              onClick={handlePlayPause}
              className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-4 transition-colors"
            >
              {isPlaying ? (
                <svg className="h-8 w-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              ) : (
                <svg className="h-8 w-8 ml-1" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                    clipRule="evenodd"
                  />
                </svg>
              )}
            </button>
          </div>

{/* Playback Speed and Download */}
            <div className="flex items-center justify-between">
              {/* Playback Speed */}
              <div className="flex items-center gap-2">
                <span className="text-sm text-gray-500">Velocidad:</span>
                <select
                  value={playbackSpeed}
                  onChange={(e) => setPlaybackSpeed(Number(e.target.value))}
                  className="w-20 px-2 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value={0.5}>0.5x</option>
                  <option value={0.75}>0.75x</option>
                  <option value={1}>Normal</option>
                  <option value={1.25}>1.25x</option>
                  <option value={1.5}>1.5x</option>
                  <option value={1.75}>1.75x</option>
                  <option value={2}>2x</option>
                </select>
              </div>

{/* Download Button */}
              <button
                onClick={() => {
                  // Aquí iría la lógica de descarga
                  console.log("Descargando audio...")
                }}
                className="flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors text-sm"
                title="Descargar audio"
              >
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 10v6m0 0l-4-4m4 4l4-4m5-8H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2z"
                  />
                </svg>
                Descargar
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function HistorialInteraccionOportunidades() {
  const [isOpen, setIsOpen] = useState(false)
  const [isAudioModalOpen, setIsAudioModalOpen] = useState(false)
  const [selectedAudioData, setSelectedAudioData] = useState(null)
  const [expandedComments, setExpandedComments] = useState<{ [key: number]: boolean }>({})

// Datos de ejemplo para la tabla
  const interacciones = [
    {
      id: 1,
      actividad: "Llamada de seguimiento",
      fechaProgramada: "24/04/2025",
      fechaRealizada: "-",
      horaProgramada: "04:06 PM",
      horaRealizada: "",
      tipoLlamada: "",
      duracionTotal: "",
      duracionConversacion: "",
      faseInicial: "IP",
      faseDespues: "",
      estado: "NO EJECUTADO",
      comentario: "Pendiente",
      fecha: "",
      textoEstado: "",
      Asistente: "Bianca Mamani",
      etiquetaComentario: "Pagos",
    },
    {
      id: 2,
      actividad: "Respuesta por telefono",
      fechaProgramada: "23/04/2025",
      fechaRealizada: "24/04/2025",
      fechaRealizadaR2: "24/04/2025",
      horaProgramada: "11:00 AM",
      horaRealizada: "11:12:48 PM",
      horaRealizadaR2: "11:13:48 PM",
      tipoLlamada: "Llamada saliente",
      duracionTotal: "45 s",
      duracionTotalR2: "32 s",
      duracionConversacion: "7:15 m",
      duracionConversacionR2: "",
      faseInicial: "IP",
      faseDespues: "IP",
      estado: "EJECUTADO",
      comentario:
        'Alumno reporta que resolvió el examen el viernes 09/05 sin embargo ayer que se hizo el recordatorio de que resuelva la actividad: "Examen Final" se validaba que no se había enviado correctamente, se pide revisar su usuario si es que hubo alguna actualización. (se adjunta comentario de alumno)',
      fecha: "",
      textoEstado: "Se agendó próximo seguimiento",
      usuario: "Bianca Mamani",
      etiquetaComentario: "Académico",
    },
    {
      id: 3,
      actividad: "No se tuvo contacto con el cliente",
      fechaProgramada: "15/04/2025",
      fechaRealizada: "24/04/2025",
      fechaRealizadaR2: "24/04/2025",
      horaProgramada: "10:30 AM",
      horaRealizada: "11:15 AM",
      horaRealizadaR2: "11:16 AM",
      tipoLlamada: "Llamada saliente",
      duracionTotal: "25 s",
      duracionTotalR2: "18 s",
      duracionConversacion: "",
      duracionConversacionR2: "",
      faseInicial: "IP",
      faseDespues: "IP",
      estado: "REPROGRAMADO AUT.",
      comentario: "Pendiente",
      fecha: "",
      textoEstado: "No responde llamada y se va a buzón de voz",
      usuario: "Bianca Mamani",
      etiquetaComentario: "Pagos",
    },
    {
      id: 4,
      actividad: "Respuesta por Teléfono",
      fechaProgramada: "12/04/2025",
      fechaRealizada: "14/04/2025",
      fechaRealizadaR2: "14/04/2025",
      horaProgramada: "10:00 AM",
      horaRealizada: "10:15 AM",
      horaRealizadaR2: "10:16 AM",
      tipoLlamada: "Llamada saliente",
      duracionTotal: "30 s",
      duracionTotalR2: "25 s",
      duracionConversacion: "7:15 m",
      duracionConversacionR2: "5:45 m",
      faseInicial: "IP",
      faseDespues: "IP",
      estado: "EJECUTADO",
      comentario: "record clases y seg atrea anterior, plazo ok",
      fecha: "",
      textoEstado: "Se agendó próximo seguimiento",
      usuario: "Bianca Mamani",
      etiquetaComentario: "Académico",
    },
    {
      id: 5,
      actividad: "No se tuvo contacto con el cliente",
      fechaProgramada: "10/04/2025",
      fechaRealizada: "11/04/2025",
      fechaRealizadaR2: "11/04/2025",
      horaProgramada: "04:00 PM",
      horaRealizada: "04:15 PM",
      horaRealizadaR2: "04:16 PM",
      tipoLlamada: "Llamada saliente",
      duracionTotal: "20 s",
      duracionTotalR2: "22 s",
      duracionConversacion: "15:28 m",
      duracionConversacionR2: "12:10 m",
      faseInicial: "IP",
      faseDespues: "IP",
      estado: "REPROGRAMADO AUT.",
      comentario: "nc, dejamos wsp clazes confirma y preguntamos seg",
      fecha: "",
      textoEstado: "No responde llamada y se va a buzón de voz",
      usuario: "Bianca Mamani",
      etiquetaComentario: "Pagos",
    },
  ]

// Clase base común para todas las etiquetas de estado
  const baseTagClass = "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border"

// Función para renderizar el estado con el color adecuado
  const renderEstado = (estado) => {
    if (estado === "EJECUTADO") {
      return (
        <span className={`${baseTagClass} bg-green-100 text-green-800 border-green-200`}>
          <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          Ejecutado
        </span>
      )
    } else if (estado === "REPROGRAMADO AUT.") {
      return (
        <span className={`${baseTagClass} bg-purple-100 text-purple-800 border-purple-200`}>
          <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          Reprogramado automatico
        </span>
      )
    } else if (estado === "REPROGRAMADO MAN.") {
      return (
        <span className={`${baseTagClass} bg-purple-100 text-purple-800 border-purple-200`}>
          <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          Reprogramado manual
        </span>
      )
    } else {
      return (
        <span className={`${baseTagClass} bg-orange-100 text-orange-800 border-orange-200`}>
          <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          Por Ejecutar
        </span>
      )
    }
  }

// Función para renderizar la etiqueta personalizada para cada comentario
  const renderEtiquetaComentario = (etiqueta) => {
    if (!etiqueta) return null

// Determinar el color de la etiqueta según su contenido
    let bgColor = "bg-green-100"
    let textColor = "text-green-700"
    let borderColor = "border-green-200"
    let icon = (
      <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
        />
      </svg>
    )

// Cambiar colores según el tipo de etiqueta
    if (etiqueta.includes("Pagos")) {
      bgColor = "bg-red-100"
      textColor = "text-red-700"
      borderColor = "border-red-200"
      icon = (
        <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      )
    } else if (etiqueta.includes("Académico")) {
      bgColor = "bg-orange-100"
      textColor = "text-orange-700"
      borderColor = "border-orange-200"
      icon = (
        <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0H9"
          />
        </svg>
      )
    }

return (
      <span className={`${baseTagClass} ${bgColor} ${textColor} ${borderColor}`}>
        {icon}
        <span>{etiqueta}</span>
      </span>
    )
  }

// Función para renderizar etiquetas de tiempo total
  const renderTiempoTotal = (duracion, numero) => {
    if (!duracion) return null

return (
      <span className={`${baseTagClass} bg-yellow-100 text-yellow-700 border-yellow-200`}>
        <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <span>
          T.T ({numero}) {duracion}
        </span>
      </span>
    )
  }

// Función para manejar click en etiqueta T.C
  const handleTCClick = (contacto) => {
    setSelectedAudioData({
      duracionConversacion: contacto.duracionConversacion,
      fecha: contacto.fechaRealizada,
      hora: contacto.horaRealizada,
      actividad: contacto.actividad,
    })
    setIsAudioModalOpen(true)
  }

// Función para renderizar etiqueta de tiempo conversado (T.C) - solo una
  const renderTiempoConversado = (contacto) => {
    // Solo mostrar T.C si hay duración de conversación y no es "No se tuvo contacto"
    if (
      !contacto.duracionConversacion ||
      contacto.duracionConversacion === "" ||
      contacto.etiquetaComentario?.includes("No se tuvo contacto")
    ) {
      return null
    }

return (
      <div className="mt-2">
        <button
          onClick={() => handleTCClick(contacto)}
          className={`${baseTagClass} bg-blue-100 text-blue-700 border-blue-200 hover:underline cursor-pointer hover:bg-blue-200 transition-colors`}
        >
          <svg className="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <span>T.C {contacto.duracionConversacion}</span>
        </button>
      </div>
    )
  }

// Función para renderizar la fecha y hora con etiquetas adicionales
  const renderFechaHoraCompleto = (contacto) => {
    return (
      <div className="space-y-2">
        <div className="flex flex-col gap-1">
          <div className="flex items-center gap-1.5 text-sm font-medium">
            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-600 border border-orange-200 mr-2">
              P
            </span>
            <span className="text-gray-700 text-[14px]">
              <span className="font-medium text-orange-600">{contacto.fechaProgramada}</span>
              {contacto.horaProgramada && <span className="ml-1 text-orange-600">| {contacto.horaProgramada}</span>}
            </span>
          </div>

{contacto.fechaRealizada !== "-" ? (
            <>
              <div className="flex items-center gap-1.5 text-sm font-medium">
                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-600 border border-green-200 mr-2">
                  R1
                </span>
                <span className="text-gray-700 text-[14px]">
                  <span className="font-medium text-green-600">{contacto.fechaRealizada}</span>
                  {contacto.horaRealizada && <span className="ml-1 text-green-600">| {contacto.horaRealizada}</span>}
                </span>
              </div>

{contacto.fechaRealizadaR2 && (
                <div className="flex items-center gap-1.5 text-sm font-medium">
                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-600 border border-green-200 mr-2">
                    R2
                  </span>
                  <span className="text-gray-700 text-[14px]">
                    <span className="font-medium text-green-600">{contacto.fechaRealizadaR2}</span>
                    {contacto.horaRealizadaR2 && (
                      <span className="ml-1 text-green-600">| {contacto.horaRealizadaR2}</span>
                    )}
                  </span>
                </div>
              )}
            </>
          ) : (
            <span className="text-gray-500 text-[14px] ml-8">-</span>
          )}
        </div>

{contacto.id !== 1 && (
          <div className="flex flex-wrap gap-3">
            {contacto.duracionTotal && renderTiempoTotal(contacto.duracionTotal, "1")}
            {contacto.duracionTotalR2 && renderTiempoTotal(contacto.duracionTotalR2, "2")}
          </div>
        )}
      </div>
    )
  }

// Función para renderizar el estado con texto descriptivo encima
  const renderEstadoConTexto = (contacto) => {
    return (
      <div className="space-y-2">
        {renderEstado(contacto.estado)}
        {contacto.textoEstado && <div className="text-gray-700 text-[14px] mt-2">{contacto.textoEstado}</div>}
      </div>
    )
  }

const toggleCommentExpansion = (contactoId: number) => {
    setExpandedComments((prev) => ({
      ...prev,
      [contactoId]: !prev[contactoId],
    }))
  }

const shouldTruncateComment = (text: string) => {
    return text.length > 200 // Truncar si el texto es muy largo
  }

const truncateText = (text: string, maxLength = 200) => {
    if (text.length <= maxLength) return text
    return text.substring(0, maxLength)
  }

// Función para renderizar el comentario con la etiqueta personalizada encima
  const renderComentarioConEtiqueta = (contacto) => {
    return (
      <div className="space-y-2">
        {contacto.etiquetaComentario && (
          <div className="mb-2">{renderEtiquetaComentario(contacto.etiquetaComentario)}</div>
        )}

<div className="text-gray-700 text-[14px]">
          {shouldTruncateComment(contacto.comentario) && !expandedComments[contacto.id] ? (
            <>
              <div
                className="overflow-hidden"
                style={{
                  display: "-webkit-box",
                  WebkitLineClamp: 5,
                  WebkitBoxOrient: "vertical",
                  lineHeight: "1.4em",
                  maxHeight: "7em", // 5 líneas * 1.4em line-height
                }}
              >
                {contacto.comentario}
              </div>
              <button
                onClick={() => toggleCommentExpansion(contacto.id)}
                className="text-blue-600 underline hover:text-blue-800 mt-1 text-sm font-medium"
              >
                ver más
              </button>
            </>
          ) : (
            <>
              <div>{contacto.comentario}</div>
              {shouldTruncateComment(contacto.comentario) && expandedComments[contacto.id] && (
                <button
                  onClick={() => toggleCommentExpansion(contacto.id)}
                  className="text-blue-600 underline hover:text-blue-800 mt-1 text-sm font-medium"
                >
                  ver menos
                </button>
              )}
            </>
          )}
        </div>
        {contacto.fecha && contacto.fecha !== "Sin Comentario" && (
          <div className="text-gray-500 text-[14px]">{contacto.fecha}</div>
        )}
        {contacto.fecha === "Sin Comentario" && <div className="text-red-500 text-[14px]">Sin Comentario</div>}

{/* Agregar etiqueta T.C debajo del comentario */}
        {renderTiempoConversado(contacto)}
      </div>
    )
  }

return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden">
      <div className="w-full flex items-center justify-between p-4 bg-[#e3f2fd]">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="flex-grow flex items-center gap-2 text-[#004fff] font-medium text-left"
        >
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
              <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
              <path d="M9 14h6"></path>
              <path d="M9 18h6"></path>
              <path d="M9 10h6"></path>
            </svg>
          </div>
          <span className="text-base">Historial de Interacción de Oportunidades</span>
        </button>

<button onClick={() => setIsOpen(!isOpen)} className="text-[#004fff]">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={`transform transition-transform ${isOpen ? "rotate-180" : ""}`}
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
      </div>

{isOpen && (
        <div>
          <div className="flex flex-wrap items-center gap-4 px-3 py-2 bg-[#e3f2fd] border-b border-[#b6e0fe]">
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-600 border border-orange-200">
                P
              </span>
              <span className="text-[14px] text-gray-700 font-medium">Llamada programada</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-600 border border-green-200">
                R
              </span>
              <span className="text-[14px] text-gray-700 font-medium">Llamada realizada</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 border border-yellow-200">
                T.T
              </span>
              <span className="text-[14px] text-gray-700 font-medium">Tiempo Timbrado</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
                T.C
              </span>
              <span className="text-[14px] text-gray-700 font-medium">Tiempo Conversado</span>
            </div>
          </div>

<div className="overflow-x-auto">
            <table className="w-full table-fixed">
              <thead>
                <tr className="bg-[#e3f2fd]">
                  <th className="px-3 py-2 text-left font-medium text-gray-600 w-[15%] text-[14px]">Actividad</th>
                  <th className="px-3 py-2 text-left font-medium text-gray-600 w-[22%] text-[14px]">Fecha y Hora</th>
                  <th className="px-3 py-2 text-left font-medium text-gray-600 w-[18%] text-[14px]">Estado</th>
                  <th className="px-3 py-2 text-left font-medium text-gray-600 w-[30%] text-[14px]">Comentario</th>
                  <th className="px-3 py-2 text-left font-medium text-gray-600 w-[15%] text-[14px]">Asesor</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-300">
                {interacciones.map((contacto) => (
                  <tr key={contacto.id} className="hover:bg-gray-50">
                    <td className="px-3 py-10">
                      <div className="text-gray-700 text-[14px] font-medium">{contacto.actividad}</div>
                    </td>
                    <td className="px-3 py-10">{renderFechaHoraCompleto(contacto)}</td>
                    <td className="px-3 py-10">{renderEstadoConTexto(contacto)}</td>
                    <td className="px-3 py-10">{renderComentarioConEtiqueta(contacto)}</td>
                    <td className="px-3 py-10">
                      <div className="text-gray-700 text-[14px]">
                        {contacto.usuario || contacto.Asistente || "Bianca Mamani"}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

<div className="flex items-center justify-between p-3 border-t border-gray-200">
            <div className="flex items-center gap-2">
              <span className="text-[14px] text-gray-600">Página</span>
              <div className="w-10 h-7 border border-gray-200 rounded flex items-center justify-center bg-white">
                <input
                  type="text"
                  defaultValue="1"
                  className="w-full h-full text-center text-[14px]"
                  onChange={(e) => {}}
                />
              </div>
              <span className="text-[14px] text-gray-600">de 3</span>
            </div>

<div className="flex items-center gap-2">
              <div className="relative">
                <select className="h-7 pl-2 pr-6 border border-gray-200 rounded appearance-none bg-white text-[14px]">
                  <option>10</option>
                  <option>20</option>
                  <option>50</option>
                </select>
                <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="10"
                    height="10"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
              </div>
              <span className="text-[14px] text-gray-600">items por página</span>
            </div>

<div className="flex items-center gap-1">
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="11 17 6 12 11 7"></polyline>
                  <polyline points="18 17 13 12 18 7"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
              </button>
              <span className="text-[14px] text-gray-600 mx-2">1 - 5 de 23 items</span>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="13 17 18 12 13 7"></polyline>
                  <polyline points="6 17 11 12 6 7"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200 ml-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                  <path d="M21 3v5h-5"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      )}

{/* Modal de Audio - Idéntico al convenio de voz existente */}
      <VoiceAgreementModal
        isOpen={isAudioModalOpen}
        onClose={() => setIsAudioModalOpen(false)}
        audioData={selectedAudioData}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/historial-mensajes-collapsible.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import HistorialMensajesTable from "./historial-mensajes-table"
import { NuevoMensajeModal } from "@/components/nuevo-mensaje-modal"

export default function HistorialMensajesCollapsible() {
  const [isOpen, setIsOpen] = useState(false)
  const [activeTab, setActiveTab] = useState("received")
  const [isNuevoMensajeModalOpen, setIsNuevoMensajeModalOpen] = useState(false)

const handleNuevoMensajeClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    setIsNuevoMensajeModalOpen(true)
  }

return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden mb-6 w-full"
      >
        {/* Header */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
        >
          <div className="flex items-center gap-2">
            <div className="bg-[#004fff] text-white p-1.5 rounded-full">
              <CheckCircle className="h-4 w-4" />
            </div>
            <span className="text-[#004fff] font-semibold">Historial de Mensajes</span>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={handleNuevoMensajeClick}
              className="bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-1 transition-colors no-underline"
              style={{ textDecoration: "none" }}
            >
              <span className="text-lg leading-none">+</span>
              Nuevo mensaje
            </button>
            <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
              <ChevronDown className="h-5 w-5" />
            </motion.div>
          </div>
        </button>

{/* Content */}
        <AnimatePresence>
          {isOpen && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: "auto", opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.3 }}
              className="overflow-hidden"
            >
              <div className="p-5">
                {/* Navigation Buttons */}
                <div className="flex gap-2 mb-4">
                  <button
                    onClick={() => setActiveTab("received")}
                    className={`px-4 py-2 text-sm font-medium rounded-md ${
                      activeTab === "received"
                        ? "bg-blue-600 text-white"
                        : "bg-[#EFF6FF] text-blue-600 hover:bg-blue-100"
                    }`}
                  >
                    Correos recibidos ({3})
                  </button>
                  <button
                    onClick={() => setActiveTab("sent")}
                    className={`px-4 py-2 text-sm font-medium rounded-md ${
                      activeTab === "sent" ? "bg-blue-600 text-white" : "bg-[#EFF6FF] text-blue-600 hover:bg-blue-100"
                    }`}
                  >
                    Correos enviados ({2})
                  </button>
                  <button
                    onClick={() => setActiveTab("mass")}
                    className={`px-4 py-2 text-sm font-medium rounded-md ${
                      activeTab === "mass" ? "bg-blue-600 text-white" : "bg-[#EFF6FF] text-blue-600 hover:bg-blue-100"
                    }`}
                  >
                    Correos Masivos ({2})
                  </button>
                  <button
                    onClick={() => setActiveTab("whatsapp")}
                    className={`px-4 py-2 text-sm font-medium rounded-md ${
                      activeTab === "whatsapp"
                        ? "bg-blue-600 text-white"
                        : "bg-[#EFF6FF] text-blue-600 hover:bg-blue-100"
                    }`}
                  >
                    WhatsApp Comercial (1)
                  </button>
                </div>

{/* Tab Content */}
                <div className="py-2">
                  <HistorialMensajesTable activeTab={activeTab} />
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>

<NuevoMensajeModal isOpen={isNuevoMensajeModalOpen} onClose={() => setIsNuevoMensajeModalOpen(false)} />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/historial-mensajes-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Eye } from "lucide-react"
import { EmailViewerModal } from "@/components/email-viewer-modal"
import "./badge-animation.css"

interface EmailMessage {
  id: string
  subject: string
  sender: string
  recipient: string
  date: string
  time: string
  status: string
  category?: string
}

// Sample data for received emails
const receivedEmails: EmailMessage[] = [
  {
    id: "1",
    subject: "Confirmación de inscripción al programa",
    sender: "admisiones@bsginstitute.com",
    recipient: "pruebaalvarez@gmail.com",
    date: "15/04/2024",
    time: "10:15 AM",
    status: "Leído",
    category: "Atención al cliente",
  },
  {
    id: "2",
    subject: "Bienvenida al programa PREP EXAMPMP",
    sender: "onboarding@bsginstitute.com",
    recipient: "pruebaalvarez@gmail.com",
    date: "16/04/2024",
    time: "09:15 AM",
    status: "Leído",
    category: "Atención al cliente",
  },
  {
    id: "3",
    subject: "Acceso al aula virtual - Credenciales",
    sender: "soporte@bsginstitute.com",
    recipient: "pruebaalvarez@gmail.com",
    date: "17/04/2024",
    time: "02:30 PM",
    status: "No leído",
    category: "Comercial",
  },
]

// Sample data for sent emails
const sentEmails: EmailMessage[] = [
  {
    id: "1",
    subject: "Respuesta: Consulta sobre materiales del curso",
    sender: "asistente@bsginstitute.com",
    recipient: "pruebaalvarez@gmail.com",
    date: "20/04/2024",
    time: "11:45 AM",
    status: "Entregado",
    category: "Atención al cliente",
  },
  {
    id: "2",
    subject: "Información sobre próximas sesiones",
    sender: "asistente@bsginstitute.com",
    recipient: "pruebaalvarez@gmail.com",
    date: "22/04/2024",
    time: "03:20 PM",
    status: "Entregado",
    category: "Atención al cliente",
  },
]

// Sample data for mass emails
const massEmails: EmailMessage[] = [
  {
    id: "1",
    subject: "Webinar: Preparación para la certificación PMP",
    sender: "eventos@bsginstitute.com",
    recipient: "estudiantes-pmp@bsginstitute.com",
    date: "10/04/2024",
    time: "08:00 AM",
    status: "Enviado",
    category: "Atención al cliente",
  },
  {
    id: "2",
    subject: "Actualización de plataforma - Mantenimiento programado",
    sender: "sistemas@bsginstitute.com",
    recipient: "todos-los-estudiantes@bsginstitute.com",
    date: "25/04/2024",
    time: "07:30 AM",
    status: "Enviado",
    category: "Atención al cliente",
  },
]

// WhatsApp Commercial Component with updated header
function WhatsAppComercial() {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden">
      {/* Contenedor principal del chat con ancho máximo y borde - Con padding añadido */}
      <div className="max-w-2xl mx-auto p-4">
        <div className="border border-gray-300 rounded-lg overflow-hidden shadow-sm">
          {/* Cabecera del chat */}
          <div className="bg-[#00bc3a] text-white p-2 flex items-center justify-between">
            <div className="flex items-center gap-2 flex-1">
              <div className="bg-white rounded-full p-1.5">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#00bc3a"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
              </div>
              <div className="flex flex-col">
                <span className="font-medium text-sm">Alvarez, Prueba</span>
                <span className="text-xs opacity-80">Fecha de último mensaje: 2024/06/15 02:30 PM</span>
              </div>
            </div>
            <button className="p-1 hover:bg-[#0e6b5e] rounded-full">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
                <path d="M21 3v5h-5" />
                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
                <path d="M3 21v-5h5" />
              </svg>
            </button>
          </div>

{/* Área de mensajes con altura fija - Aumentada en un 30% */}
          <div
            className="h-[24rem] overflow-y-auto p-2"
            style={{
              backgroundColor: "#f2eae4",
            }}
          >
            {/* Mensaje 1 */}
            <div className="max-w-[80%] ml-auto mb-3">
              <div className="bg-[#d4f1ff] p-2 rounded-lg shadow-sm text-gray-800">
                <p className="text-xs">
                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-[#2979FF] text-white border border-[#90CAF9] mr-1">
                    Automático
                  </span>
                  <span className="font-medium">Hola prueba, te saluda de BSG INSTITUTE</span> Te hemos enviado un
                  correo electrónico con la información del{" "}
                  <span className="font-medium">Programa Internacional en Gerencia de Proyectos</span> que nos
                  solicitaste vía Llamada Telefonica. Estoy a tu disposición para poder resolver todas tus dudas o
                  consultas. Coméntame en que horario podría llamarte por teléfono.
                </p>
                <div className="flex justify-end items-center gap-1 mt-1">
                  <span className="text-xs text-gray-600">2024/04/24 10:16 AM</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-[#2979FF]"
                  >
                    <polyline points="20 6 9 17 4 12"></polyline>
                    <polyline points="20 12 9 23 4 18"></polyline>
                  </svg>
                </div>
              </div>
            </div>

{/* Mensaje 2 */}
            <div className="max-w-[80%] ml-auto mb-3">
              <div className="bg-[#dcffde] p-2 rounded-lg shadow-sm text-gray-800">
                <p className="text-xs">
                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-[#00bc3a] text-white border border-[#A5D6A7] mr-1">
                    Manual
                  </span>
                  <span className="font-medium">Paola Lozano</span>
                  <br />
                  <span className="font-medium">Hola prueba, te saluda Paola Lozano de BSG INSTITUTE</span> Te hemos
                  enviado un correo electrónico con la información del{" "}
                  <span className="font-medium">Programa Internacional en Gerencia de Proyectos</span> que nos
                  solicitaste vía Llamada Telefonica. Estoy a tu disposición para poder resolver todas tus dudas o
                  consultas. Coméntame en que horario podría llamarte por teléfono.
                </p>
                <div className="flex justify-end items-center gap-1 mt-1">
                  <span className="text-xs text-gray-600">2024/05/30 04:06 PM</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-[#00bc3a]"
                  >
                    <polyline points="20 6 9 17 4 12"></polyline>
                    <polyline points="20 12 9 23 4 18"></polyline>
                  </svg>
                </div>
              </div>
            </div>

{/* Mensaje 3 - Adicional para mostrar más historial */}
            <div className="max-w-[80%] ml-auto mb-3">
              <div className="bg-[#d4f1ff] p-2 rounded-lg shadow-sm text-gray-800">
                <p className="text-xs">
                  <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-[#2979FF] text-white border border-[#90CAF9] mr-1">
                    Automático
                  </span>
                  Gracias por tu interés en nuestros programas. ¿Te gustaría agendar una cita para conversar sobre las
                  opciones de financiamiento disponibles?
                </p>
                <div className="flex justify-end items-center gap-1 mt-1">
                  <span className="text-xs text-gray-600">2024/06/15 02:30 PM</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-[#2979FF]"
                  >
                    <polyline points="20 6 9 17 4 12"></polyline>
                    <polyline points="20 12 9 23 4 18"></polyline>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function HistorialMensajesTable({ activeTab }: { activeTab: string }) {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(5)
  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false)
  const [selectedEmail, setSelectedEmail] = useState<EmailMessage | null>(null)

// If WhatsApp tab is active, show WhatsApp component
  if (activeTab === "whatsapp") {
    return <WhatsAppComercial />
  }

// Determine which data to show based on active tab
  let data: EmailMessage[] = []
  switch (activeTab) {
    case "received":
      data = receivedEmails
      break
    case "sent":
      data = sentEmails
      break
    case "mass":
      data = massEmails
      break
    default:
      data = receivedEmails
  }

// Calculate pagination
  const totalPages = Math.ceil(data.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const currentData = data.slice(startIndex, endIndex)

const handleViewEmail = (email: EmailMessage) => {
    setSelectedEmail(email)
    setIsEmailModalOpen(true)
  }

// Function to get tag style based on category
  const getTagStyle = (category: string) => {
    if (category === "Comercial") {
      return "bg-green-100 text-green-800 border border-green-300 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap"
    }
    // Style for "Atención al cliente"
    return "bg-amber-100 text-amber-800 border border-amber-300 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap"
  }

return (
    <div>
      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full border-collapse">
          <thead>
            <tr className="bg-blue-50 text-blue-600">
              <th className="px-4 py-3 text-left text-sm font-medium">Fecha</th>
              <th className="px-4 py-3 text-left text-sm font-medium">Asunto</th>
              <th className="px-4 py-3 text-left text-sm font-medium">
                {activeTab === "received" ? "Remitente" : "Destinatario"}
              </th>
              <th className="px-4 py-3 text-left text-sm font-medium">Acciones</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {currentData.length > 0 ? (
              currentData.map((email, index) => (
                <tr key={email.id} className="hover:bg-gray-50">
                  <td className="px-4 py-3 text-sm text-blue-600">
                    {email.date} | {email.time.toUpperCase().replace("A.M.", "AM").replace("P.M.", "PM")}
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-700">
                    <div className="flex items-center flex-nowrap">
                      <span className={`inline-block mr-2 ${getTagStyle(email.category || "Atención al cliente")}`}>
                        {email.category}
                      </span>
                      {index === 0 && activeTab === "received" && (
                        <span className="inline-block mr-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full animate-pulse whitespace-nowrap">
                          Nuevo
                        </span>
                      )}
                      <span className={index === 0 && activeTab === "received" ? "font-bold" : ""}>
                        {email.subject}
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-700">{email.sender}</td>
                  <td className="px-4 py-3 text-sm">
                    <button
                      onClick={() => handleViewEmail(email)}
                      className="flex items-center justify-center px-3 py-1 text-blue-600 bg-blue-100 rounded-md hover:bg-blue-200 transition-colors"
                    >
                      <Eye className="w-4 h-4 mr-1" />
                      Ver
                    </button>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={4} className="px-4 py-8 text-center text-gray-500">
                  No hay mensajes para mostrar
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

{/* Pagination */}
      {data.length > 0 && (
        <div className="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 sm:px-6">
          <div className="flex items-center">
            <span className="text-sm text-gray-700 mr-2">Página</span>
            <input
              type="number"
              min={1}
              max={totalPages}
              value={currentPage}
              onChange={(e) => setCurrentPage(Math.min(Math.max(1, Number.parseInt(e.target.value) || 1), totalPages))}
              className="w-12 h-8 text-center border border-gray-300 rounded-md"
            />
            <span className="text-sm text-gray-700 mx-2">de {totalPages}</span>
          </div>

<div className="flex items-center">
            <span className="text-sm text-gray-700 mr-2">Items por página</span>
            <select
              value={itemsPerPage}
              onChange={(e) => {
                setItemsPerPage(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="h-8 border border-gray-300 rounded-md"
            >
              <option value={5}>5</option>
              <option value={10}>10</option>
              <option value={20}>20</option>
            </select>
          </div>

<div className="flex items-center space-x-2">
            <button
              onClick={() => setCurrentPage(1)}
              disabled={currentPage === 1}
              className="p-1 rounded-md border border-gray-300 bg-white text-gray-500 disabled:opacity-50"
            >
              «
            </button>
            <button
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
              className="p-1 rounded-md border border-gray-300 bg-white text-gray-500 disabled:opacity-50"
            >
              ‹
            </button>
            <button className="p-1 rounded-md border border-gray-300 bg-blue-600 text-white w-8 h-8">
              {currentPage}
            </button>
            <button
              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages}
              className="p-1 rounded-md border border-gray-300 bg-white text-gray-500 disabled:opacity-50"
            >
              ›
            </button>
            <button
              onClick={() => setCurrentPage(totalPages)}
              disabled={currentPage === totalPages}
              className="p-1 rounded-md border border-gray-300 bg-white text-gray-500 disabled:opacity-50"
            >
              »
            </button>
          </div>
        </div>
      )}

{/* Email Viewer Modal */}
      {selectedEmail && (
        <EmailViewerModal
          isOpen={isEmailModalOpen}
          onClose={() => setIsEmailModalOpen(false)}
          emailData={{
            sender: selectedEmail.sender,
            recipient: selectedEmail.recipient,
            subject: selectedEmail.subject,
            content: `Contenido del email ${selectedEmail.id}`,
            date: `${selectedEmail.date} | ${selectedEmail.time}`,
          }}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/historial-modificaciones.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

export default function HistorialModificaciones() {
  const [isOpen, setIsOpen] = useState(false)

// Datos actualizados para el historial de modificaciones
  const modificaciones = [
    {
      campo: "Apellido Materno",
      valorAnterior: "Cristóbal",
      valorNuevo: "Cristóbal",
      fecha: "25/04/2025 18:20",
      usuario: "ypalomino",
    },
    {
      campo: "Genero",
      valorAnterior: "",
      valorNuevo: "F",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Direccion",
      valorAnterior: "",
      valorNuevo: "Calle San Ignacio 206 - Chorrillos",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Apellido Materno",
      valorAnterior: "",
      valorNuevo: "Cristóbal",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Empresa",
      valorAnterior: "",
      valorNuevo: "Rock Drill Contratistas Civiles y Mineros S.A.C.",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
  ]

// Función para obtener el icono y color de fondo según el tipo de campo
  const getFieldIcon = (campo: string) => {
    // Campos relacionados con nombres y apellidos
    if (campo.includes("Nombre") || campo.includes("Apellido")) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-purple-600"
          >
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        ),
        bgColor: "bg-purple-100",
      }
    }

// Campos relacionados con ubicación
    if (
      campo.includes("Ciudad") ||
      campo.includes("Dirección") ||
      campo.includes("Direccion") ||
      campo.includes("Distrito") ||
      campo.includes("Provincia") ||
      campo.includes("Departamento")
    ) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-green-600"
          >
            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
        ),
        bgColor: "bg-green-100",
      }
    }

// Campos relacionados con contacto
    if (campo.includes("Email") || campo.includes("Teléfono") || campo.includes("Celular")) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-blue-600"
          >
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
          </svg>
        ),
        bgColor: "bg-blue-100",
      }
    }

// Campos relacionados con fechas
    if (campo.includes("Fecha")) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-orange-600"
          >
            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
            <line x1="16" x2="16" y1="2" y2="6"></line>
            <line x1="8" x2="8" y1="2" y2="6"></line>
            <line x1="3" x2="21" y1="10" y2="10"></line>
          </svg>
        ),
        bgColor: "bg-orange-100",
      }
    }

// Campos relacionados con empresa
    if (campo.includes("Empresa") || campo.includes("Cargo")) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-amber-600"
          >
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
        ),
        bgColor: "bg-amber-100",
      }
    }

// Campos relacionados con género
    if (campo.includes("Genero") || campo.includes("Género")) {
      return {
        icon: (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-pink-600"
          >
            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
            <path d="M8 9a4 4 0 1 1 8 0c0 1.098-.564 2.025-1.159 2.815L8 20h8"></path>
          </svg>
        ),
        bgColor: "bg-pink-100",
      }
    }

// Valor por defecto
    return {
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="text-gray-600"
        >
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" y1="13" x2="8" y2="13"></line>
          <line x1="16" y1="17" x2="8" y2="17"></line>
          <polyline points="10 9 9 9 8 9"></polyline>
        </svg>
      ),
      bgColor: "bg-gray-100",
    }
  }

return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden w-full">
      {/* Cabecera del desplegable */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">Historial de Modificaciones del Contacto</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

{/* Contenido desplegable */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-[#e6f0ff]">
                    <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-[20%]">Campo Actualizado</th>
                    <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-[20%]">Valor Anterior</th>
                    <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-[20%]">Valor Nuevo</th>
                    <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-[20%]">Fecha</th>
                    <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-[20%]">Asistente</th>
                  </tr>
                </thead>
                <tbody className="text-sm">
                  {modificaciones.map((modificacion, index) => {
                    const { icon, bgColor } = getFieldIcon(modificacion.campo)
                    return (
                      <tr key={index} className={`border-b ${index % 2 === 1 ? "bg-gray-50" : ""}`}>
                        <td className="py-3 px-4 text-gray-700">
                          <div className="flex items-center gap-2">
                            <div className={`${bgColor} p-1.5 rounded-full`}>{icon}</div>
                            {modificacion.campo}
                          </div>
                        </td>
                        <td className="py-3 px-4 text-gray-700">{modificacion.valorAnterior || "-"}</td>
                        <td className="py-3 px-4 text-gray-700">{modificacion.valorNuevo}</td>
                        <td className="py-3 px-4 text-purple-700 font-medium">{modificacion.fecha}</td>
                        <td className="py-3 px-4 text-gray-700">{modificacion.usuario}</td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

{/* Paginación */}
              <div className="flex items-center justify-between p-3 border-t border-gray-200 text-xs">
                <div className="flex items-center gap-2">
                  <span className="text-gray-600">Página</span>
                  <div className="w-10 h-7 border border-gray-200 rounded flex items-center justify-center bg-white">
                    <input
                      type="text"
                      defaultValue="1"
                      className="w-full h-full text-center text-xs"
                      onChange={(e) => {}}
                    />
                  </div>
                  <span className="text-gray-600">de 2</span>
                </div>

<div className="flex items-center gap-2">
                  <div className="relative">
                    <select className="h-7 pl-2 pr-6 border border-gray-200 rounded appearance-none bg-white text-xs">
                      <option>5</option>
                      <option>10</option>
                      <option>20</option>
                    </select>
                    <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="10"
                        height="10"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <polyline points="6 9 12 15 18 9"></polyline>
                      </svg>
                    </div>
                  </div>
                  <span className="text-gray-600">items por página</span>
                </div>

<div className="flex items-center gap-1">
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="11 17 6 12 11 7"></polyline>
                      <polyline points="18 17 13 12 18 7"></polyline>
                    </svg>
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200 bg-blue-600 text-white">
                    1
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">2</button>
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                  </button>
                  <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="13 17 18 12 13 7"></polyline>
                      <polyline points="6 17 11 12 6 7"></polyline>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/informacion-alternativa-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import type React from "react"
import { Calendar, MapPin, User, Briefcase, CreditCard, Users, Compass, Globe } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function InformacionAlternativaForm() {
  const [formData, setFormData] = useState({
    nombresApellidos: "RUIZ MEDINA XIMENA SOPHIA",
    dni: "",
    genero: "",
    fechaNacimiento: "26-09-1992",
    direccion: "",
    distrito: "",
    provincia: "",
    departamento: "",
    ubigeo: "",
    actividadEconomica: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>, field: string) => {
    const value = e.target.value
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Datos guardados:", formData)
  }

return (
    <form onSubmit={handleSubmit}>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-x-6">
        {/* COLUMNA 1 */}
        <div>
          <div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                <User className="h-4 w-4 text-purple-600" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Nombres y Apellidos</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.nombresApellidos}
                onChange={(e) => handleChange(e, "nombresApellidos")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                <CreditCard className="h-4 w-4 text-blue-600" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">DNI</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.dni}
                onChange={(e) => handleChange(e, "dni")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                <Users className="h-4 w-4 text-purple-600" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Género</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.genero}
                onChange={(e) => handleChange(e, "genero")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-orange-100 p-1.5 rounded-full flex-shrink-0">
                <Calendar className="h-4 w-4 text-orange-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Fecha Nacimiento</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.fechaNacimiento}
                onChange={(e) => handleChange(e, "fechaNacimiento")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>
        </div>

{/* COLUMNA 2 */}
        <div>
          <div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-red-100 p-1.5 rounded-full flex-shrink-0">
                <MapPin className="h-4 w-4 text-red-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Dirección</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.direccion}
                onChange={(e) => handleChange(e, "direccion")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-red-100 p-1.5 rounded-full flex-shrink-0">
                <MapPin className="h-4 w-4 text-red-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Distrito</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.distrito}
                onChange={(e) => handleChange(e, "distrito")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-green-100 p-1.5 rounded-full flex-shrink-0">
                <Globe className="h-4 w-4 text-green-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Provincia</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.provincia}
                onChange={(e) => handleChange(e, "provincia")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>
        </div>

{/* COLUMNA 3 */}
        <div>
          <div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-green-100 p-1.5 rounded-full flex-shrink-0">
                <Globe className="h-4 w-4 text-green-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Departamento</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.departamento}
                onChange={(e) => handleChange(e, "departamento")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-gray-100 p-1.5 rounded-full flex-shrink-0">
                <Compass className="h-4 w-4 text-gray-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Ubigeo</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.ubigeo}
                onChange={(e) => handleChange(e, "ubigeo")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[40%] flex items-center gap-2 pr-2">
              <div className="bg-amber-100 p-1.5 rounded-full flex-shrink-0">
                <Briefcase className="h-4 w-4 text-amber-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Actividad Económica</span>
            </div>
            <div className="w-[60%] flex items-center">
              <input
                type="text"
                value={formData.actividadEconomica}
                onChange={(e) => handleChange(e, "actividadEconomica")}
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
            </div>
          </div>
        </div>
      </div>

{/* Action Button */}
      <div className="flex justify-center mt-6">
        <Button
          type="submit"
          className="bg-[#f59e0b] hover:bg-[#d97706] text-white shadow-sm px-6 py-2.5 rounded-md flex items-center gap-2"
        >
          <span>Guardar Datos</span>
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/informacion-alternativa.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import InformacionAlternativaForm from "./informacion-alternativa-form"

export default function InformacionAlternativa() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden w-full">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">Información Alternativa del Contacto</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

<AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="p-5">
              <InformacionAlternativaForm />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/matriculas-adicionales-modal.tsx" isMerged="true"
"use client"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"

interface MatriculasAdicionalesModalProps {
  isOpen: boolean
  onClose: () => void
}

export default function MatriculasAdicionalesModal({ isOpen, onClose }: MatriculasAdicionalesModalProps) {
  if (!isOpen) return null

const matriculas = [
    {
      numero: 1,
      codigo: "10117142A23266",
      programa: "Lean Six Sigma Black Belt",
      centroCosto: "LEAN SSBB",
      version: "Gerencial",
      asesorAtencion: "Bianca Mamani",
      asesorComercial: "Yesica Palomino",
      pagos: {
        cp: "0",
        da: "0.00 PEN",
      },
    },
    {
      numero: 2,
      codigo: "10117142A85942",
      programa: "Curso MS Project aplicado a la Gestión de Proyectos",
      centroCosto: "TI MSPROJECT",
      version: "Gerencial",
      asesorAtencion: "Fabiola Salas",
      asesorComercial: "Yesica Palomino",
      pagos: {
        cp: "11",
        da: "3480.00 PEN",
      },
    },
  ]

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden">
        {/* Header del modal */}
        <div className="bg-orange-500 text-white p-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold">Matrículas adicionales</h2>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="text-white hover:bg-white hover:bg-opacity-20 p-1"
          >
            <X className="h-5 w-5" />
          </Button>
        </div>

{/* Contenido del modal */}
        <div className="p-6 overflow-y-auto max-h-[calc(90vh-80px)]">
          {/* Legend above table */}
          <div className="mb-4 bg-[#e3f2fd] p-3 flex items-center gap-6">
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                C.A
              </span>
              <span className="text-sm text-gray-700">Cuotas Atrasadas</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                D.A
              </span>
              <span className="text-sm text-gray-700">Deuda Atrasada</span>
            </div>
          </div>

<div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-[#e3f2fd]">
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">N°</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Código de Matrícula</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Programa</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Centro de Costo</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Versión</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Asesor Atención al Cliente</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff]">Asesor Comercial</th>
                  <th className="py-2 px-4 text-left font-medium text-[#004fff] w-40">Pagos</th>
                </tr>
              </thead>
              <tbody className="text-sm">
                {matriculas.map((matricula, index) => (
                  <tr key={matricula.numero} className={`border-b ${index % 2 === 1 ? "bg-gray-50" : ""}`}>
                    <td className="py-3 px-4 text-gray-700">{matricula.numero}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.codigo}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.programa}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.centroCosto}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.version}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.asesorAtencion}</td>
                    <td className="py-3 px-4 text-gray-700">{matricula.asesorComercial}</td>
                    <td className="py-3 px-4 text-gray-700 w-40">
                      <div className="flex flex-col gap-1 text-xs">
                        <div className="flex items-center gap-1">
                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            C.A
                          </span>
                          <span className="whitespace-nowrap">{matricula.pagos.cp} Cuotas</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            D.A
                          </span>
                          <span className="whitespace-nowrap">{matricula.pagos.da}</span>
                        </div>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

{/* Paginación */}
          <div className="flex items-center justify-between p-3 border-t border-gray-200 text-xs">
            <div className="flex items-center gap-2">
              <span className="text-gray-600">Página</span>
              <div className="w-10 h-7 border border-gray-200 rounded flex items-center justify-center bg-white">
                <input type="text" defaultValue="1" className="w-full h-full text-center text-xs" />
              </div>
              <span className="text-gray-600">de 1</span>
            </div>

<div className="flex items-center gap-2">
              <div className="relative">
                <select className="h-7 pl-2 pr-6 border border-gray-200 rounded appearance-none bg-white text-xs">
                  <option>2</option>
                  <option>5</option>
                  <option>10</option>
                </select>
                <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="10"
                    height="10"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
              </div>
              <span className="text-gray-600">ítems por página</span>
            </div>

<div className="flex items-center gap-1">
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="11 17 6 12 11 7"></polyline>
                  <polyline points="18 17 13 12 18 7"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200 bg-blue-600 text-white">
                1
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
              </button>
              <button className="w-7 h-7 flex items-center justify-center rounded border border-gray-200">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="13 17 18 12 13 7"></polyline>
                  <polyline points="6 17 11 12 6 7"></polyline>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/navigation-tabs.tsx" isMerged="true"
"use client"

import { MessageSquare, User, CreditCard, Info, Laptop, FileText, BookOpen } from "lucide-react"
import TabRegistry from "./tab-registry"

interface NavigationTabsProps {
  activeTab: string
  setActiveTab: (tab: string) => void
}

export default function NavigationTabs({ activeTab, setActiveTab }: NavigationTabsProps) {
  const tabs = TabRegistry()

// Función para manejar el clic en las pestañas
  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId)

// Actualizar el hash de la URL directamente
    if (typeof window !== "undefined") {
      window.location.hash = tabId
    }

// Forzar la actualización del contenido
    const tabContent = document.getElementById("tab-content-container")
    if (tabContent) {
      // Pequeña animación para indicar cambio
      tabContent.style.opacity = "0.5"
      setTimeout(() => {
        tabContent.style.opacity = "1"
      }, 150)
    }
  }

return (
    <div className="w-full">
      <div className="grid grid-cols-7 gap-1">
        {tabs.map((tab) => {
          // Determinar las clases según el ID del tab o la criticidad
          let bgClass, iconBgClass

// Asignar colores específicos según la criticidad
          if (tab.criticality === "high") {
            // Pestañas azules
            bgClass = activeTab === tab.id ? "bg-blue-600 text-white" : "bg-blue-100 text-blue-800 hover:bg-blue-200"
            iconBgClass = activeTab === tab.id ? "bg-blue-500" : "bg-blue-200"
          } else if (tab.criticality === "medium") {
            // Pestañas verdes
            bgClass =
              activeTab === tab.id ? "bg-green-600 text-white" : "bg-green-100 text-green-800 hover:bg-green-200"
            iconBgClass = activeTab === tab.id ? "bg-green-500" : "bg-green-200"
          } else if (tab.criticality === "low") {
            // Pestañas amarillas
            bgClass =
              activeTab === tab.id ? "bg-amber-500 text-white" : "bg-amber-100 text-amber-800 hover:bg-amber-200"
            iconBgClass = activeTab === tab.id ? "bg-amber-400" : "bg-amber-200"
          }

// Obtener el icono correspondiente
          let icon
          switch (tab.id) {
            case "speech":
              icon = <MessageSquare className="h-5 w-5" />
              break
            case "clientInfo":
              icon = <User className="h-5 w-5" />
              break
            case "paymentManagement":
              icon = <CreditCard className="h-5 w-5" />
              break
            case "programInfo":
              icon = <Info className="h-5 w-5" />
              break
            case "academicPortal":
              icon = <Laptop className="h-5 w-5" />
              break
            case "documentation":
              icon = <FileText className="h-5 w-5" />
              break
            case "enrolledCourses":
              icon = <BookOpen className="h-5 w-5" />
              break
            default:
              icon = <Info className="h-5 w-5" />
          }

return (
            <button
              key={tab.id}
              onClick={() => handleTabClick(tab.id)}
              className={`flex flex-col items-center justify-center p-2 h-20 rounded-md transition-colors ${bgClass}`}
              data-tab-id={tab.id}
            >
              <div className={`flex items-center justify-center w-8 h-8 rounded-full mb-1 ${iconBgClass}`}>{icon}</div>
              <span className="text-xs font-medium text-center whitespace-pre-line leading-tight h-8 flex items-center justify-center px-1">
                {tab.label}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/nuevo-desplegable.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

export default function NuevoDesplegable() {
  const [isOpen, setIsOpen] = useState(true)

return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden mb-6 w-full"
    >
      {/* Header */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">Información Adicional</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

import { useState } from "react"
import { CheckCircle, ChevronDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import {
  User,
  FileText,
  Mail,
  MapPin,
  Building,
  Phone,
  Calendar,
  Users,
  Briefcase,
  Factory,
  UserCircle,
  GraduationCap,
  UserPlus,
} from "lucide-react"

export default function PerfilCliente() {
  const [isOpen, setIsOpen] = useState(true)

return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden w-full">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <CheckCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">Perfil del Cliente</span>
        </div>
        <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
          <ChevronDown className="h-5 w-5" />
        </motion.div>
      </button>

<AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="p-5">
              {/* Datos Personales */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Datos Personales</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <User className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Primer Nombre</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Prueba"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <User className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Apellido Paterno</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Alvarez"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                            <Calendar className="h-4 w-4 text-blue-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Fecha de nacimiento</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="15/03/1985"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <User className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Segundo Nombre</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue=""
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <User className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Apellido Materno</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue=""
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-pink-100 p-1.5 rounded-full flex-shrink-0">
                            <Users className="h-4 w-4 text-pink-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Género</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Masculino"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Datos Laborales */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Datos Laborales</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-indigo-100 p-1.5 rounded-full flex-shrink-0">
                            <Building className="h-4 w-4 text-indigo-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Empresa</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Consultora Tecnológica Internacional S.A.C."
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-indigo-100 p-1.5 rounded-full flex-shrink-0">
                            <Briefcase className="h-4 w-4 text-indigo-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Trabajo</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Tiempo completo"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-indigo-100 p-1.5 rounded-full flex-shrink-0">
                            <Factory className="h-4 w-4 text-indigo-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Industria</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Tecnología"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-indigo-100 p-1.5 rounded-full flex-shrink-0">
                            <UserCircle className="h-4 w-4 text-indigo-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Cargo</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Gerente de Proyectos"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-indigo-100 p-1.5 rounded-full flex-shrink-0">
                            <GraduationCap className="h-4 w-4 text-indigo-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Formación</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Ingeniería de Sistemas"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Correo Electrónico */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Correo Electrónico</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                            <Mail className="h-4 w-4 text-blue-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Email Principal</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="PruebaAlvarez@gmail.com"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                            <Mail className="h-4 w-4 text-blue-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Email Secundario</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="jorge.lopez@empresa.com"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Domicilio */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Domicilio</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-green-100 p-1.5 rounded-full flex-shrink-0">
                            <MapPin className="h-4 w-4 text-green-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">País</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Perú"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-green-100 p-1.5 rounded-full flex-shrink-0">
                            <MapPin className="h-4 w-4 text-green-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Dirección</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Av. Javier Prado Este 4580, Dpto. 302"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-green-100 p-1.5 rounded-full flex-shrink-0">
                            <Building className="h-4 w-4 text-green-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Ciudad</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Lima"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Datos Familiares */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Datos Familiares</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-amber-100 p-1.5 rounded-full flex-shrink-0">
                            <Users className="h-4 w-4 text-amber-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Nombres y Apellidos</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="María Fernanda López"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-amber-100 p-1.5 rounded-full flex-shrink-0">
                            <UserPlus className="h-4 w-4 text-amber-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Parentesco</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="Esposa"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-amber-100 p-1.5 rounded-full flex-shrink-0">
                            <Phone className="h-4 w-4 text-amber-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="+51 987 654 321"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Datos Telefónicos */}
              <div className="border border-white rounded-lg p-4 mb-6">
                <h3 className="text-lg font-semibold mb-4 text-blue-700">Datos Telefónicos</h3>
                <form className="max-w-4xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 max-w-4xl mx-auto">
                    {/* COLUMNA 1 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <Phone className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Celular Principal</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="+51 922 191 058"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <Phone className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono Principal</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="+51 1 234 5678"
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

{/* COLUMNA 2 */}
                    <div>
                      <div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <Phone className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Celular Secundario</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue=""
                              readOnly
                              className="w-full bg-gray-100 px-3 py-2 h-10 text-sm rounded-md text-gray-600 border border-gray-200 cursor-not-allowed"
                            />
                          </div>
                        </div>
                      </div>

<div className="flex items-center mb-4">
                        <div className="w-[40%] flex items-center gap-2 pr-2">
                          <div className="bg-purple-100 p-1.5 rounded-full flex-shrink-0">
                            <Phone className="h-4 w-4 text-purple-500" />
                          </div>
                          <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono Secundario</span>
                        </div>
                        <div className="w-[60%] flex items-center">
                          <div className="w-3/4">
                            <input
                              type="text"
                              defaultValue="+51 987 654 321"
                              readOnly
                              className="w-full bg-white px-3 py-2 h-10 text-sm rounded-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

{/* Botón Guardar */}
              <div className="flex justify-center mt-6">
                <button className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md font-medium transition-colors">
                  Guardar
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/sections/chat-portal-web.tsx" isMerged="true"
"use client"

import type React from "react"

import { RefreshCw, Send, MessageSquare, Paperclip, X } from "lucide-react"
import { useState } from "react"

export default function ChatPortalWeb() {
  const [messageInput, setMessageInput] = useState("")

const handleMessageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMessageInput(e.target.value)
  }

const handleClearText = () => {
    setMessageInput("")
  }

const handleFileAttachment = () => {
    // Aquí se implementaría la lógica para adjuntar archivos
    console.log("Adjuntar archivo")
  }

return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 max-w-[650px] mx-auto my-4">
      {/* Contenedor principal con estilo naranja */}
      <div className="flex flex-col h-full">
        {/* Barra superior con nombre y fecha del último mensaje */}
        <div className="bg-[#FF8A00] text-white p-3 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-[#FF8A00] text-white p-1.5 rounded-full">
              <MessageSquare className="h-4 w-4" />
            </div>
            <div className="flex flex-col">
              <span className="text-white font-medium">Alvarez, Prueba</span>
              <span className="text-white text-xs opacity-90">Fecha de último mensaje: 24/04/2025 04:45</span>
            </div>
          </div>
          <button className="p-1 hover:bg-[#E67E00] rounded-full transition-colors">
            <RefreshCw className="h-5 w-5" />
          </button>
        </div>

{/* Área de mensajes con fondo blanco */}
        <div className="flex-1 h-[500px] overflow-y-auto p-4" style={{ backgroundColor: "#f9f9f9" }}>
          {/* Aquí irían los mensajes del chat */}
          <div className="flex flex-col space-y-4">
            {/* Mensaje del sistema */}
            <div className="flex justify-center">
              <div className="bg-gray-100 px-3 py-1 rounded-lg text-xs text-gray-500">Hoy, 24 de abril de 2025</div>
            </div>

{/* Mensaje del ASESOR (a la DERECHA) */}
            <div className="flex justify-end">
              <div className="bg-[#FFF1E5] rounded-lg p-3 shadow-sm max-w-[80%]">
                <div className="text-sm">¡Buenos días!</div>
                <div className="text-sm mt-1">
                  Para poder ayudarte mejor, ¿podrías indicarme si eres alumno, exalumno o estás interesado en alguno de
                  nuestros programas o cursos?
                </div>
                <div className="text-right text-xs text-gray-500 mt-1">11:25 am</div>
              </div>
            </div>

{/* Mensaje del ALUMNO (a la IZQUIERDA) */}
            <div className="flex justify-start">
              <div className="bg-[#EFF3F7] rounded-lg p-3 shadow-sm max-w-[80%]">
                <div className="text-sm">Soy alumno</div>
                <div className="text-right text-xs text-gray-500 mt-1">11:26 am</div>
              </div>
            </div>

{/* Mensaje del ALUMNO (a la IZQUIERDA) */}
            <div className="flex justify-start">
              <div className="bg-[#EFF3F7] rounded-lg p-3 shadow-sm max-w-[80%]">
                <div className="text-sm">Quiero revisar mis cursos</div>
                <div className="text-right text-xs text-gray-500 mt-1">11:26 am</div>
              </div>
            </div>
          </div>
        </div>

{/* Área de entrada de mensajes */}
        <div className="border-t border-gray-200 bg-white p-3">
          <div className="flex items-center gap-2">
            <button
              onClick={handleFileAttachment}
              className="bg-gray-100 hover:bg-gray-200 text-gray-600 p-2 rounded-full transition-colors"
              title="Adjuntar archivo"
            >
              <Paperclip className="h-5 w-5" />
            </button>
            <input
              type="text"
              placeholder="Escribe tu mensaje aquí"
              className="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-[#FF8A00] text-base"
              value={messageInput}
              onChange={handleMessageInputChange}
            />
            <button
              onClick={handleClearText}
              className="bg-gray-200 hover:bg-gray-300 text-gray-600 p-2 rounded-full transition-colors"
              title="Borrar texto"
            >
              <X className="h-5 w-5" />
            </button>
            <button className="bg-[#FF8A00] hover:bg-[#E67E00] text-white p-2 rounded-full transition-colors">
              <Send className="h-5 w-5" />
            </button>
          </div>
        </div>

{/* Botón para finalizar chat */}
        <div className="flex justify-center p-4 border-t border-gray-200 bg-white">
          <button className="bg-[#FF8A00] hover:bg-[#E67E00] text-white px-4 py-2 rounded-md flex items-center gap-2 transition-colors">
            <span>Finalizar Chat</span>
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/sections/section-whatsapp.tsx" isMerged="true"
"use client"

import { useState } from "react"
import type React from "react"
import { RefreshCw, Send, X, MessageCircle } from "lucide-react"
import { WhatsAppTemplateModal } from "@/components/whatsapp-template-modal"

interface NombreYFechaParaChatsProps {
  nombre: string
  fechaUltimoMensaje: string
}

function NombreYFechaParaChats({ nombre, fechaUltimoMensaje }: NombreYFechaParaChatsProps) {
  return (
    <div className="flex flex-col">
      <span className="font-medium text-sm">{nombre}</span>
      <span className="text-xs text-white/80">Fecha de último mensaje: {fechaUltimoMensaje}</span>
    </div>
  )
}

interface SectionWhatsAppProps {
  messageInput: string
  handleMessageInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export default function SectionWhatsApp({ messageInput, handleMessageInputChange }: SectionWhatsAppProps) {
  const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false)

const handleSelectTemplate = (templateText: string) => {
    handleMessageInputChange({ target: { value: templateText } } as any)
  }

return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden">
      <button
        onClick={() => document.getElementById("whatsapp-content")?.classList.toggle("hidden")}
        className="w-full flex items-center justify-between p-4 bg-[#e3f2fd] text-[#004fff] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#004fff] text-white p-1.5 rounded-full">
            <MessageCircle className="h-4 w-4" />
          </div>
          <span className="text-[#004fff] font-semibold">WhatsApp</span>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="transform transition-transform"
        >
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </button>
      <div id="whatsapp-content" className="hidden">
        {/* Contenedor principal del chat con ancho máximo y borde - Con padding añadido */}
        <div className="max-w-2xl mx-auto p-4">
          <div className="border border-gray-300 rounded-lg overflow-hidden shadow-sm">
            {/* Cabecera del chat */}
            <div className="bg-[#00bc3a] text-white p-2 flex items-center justify-between">
              <div className="flex items-center gap-2 flex-1">
                <div className="bg-white rounded-full p-1.5">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#00bc3a"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                  </svg>
                </div>
                <NombreYFechaParaChats nombre="Alvarez, Prueba" fechaUltimoMensaje="2024/05/30 04:06 PM" />
              </div>
              <button className="p-1 hover:bg-[#0e6b5e] rounded-full">
                <RefreshCw className="h-4 w-4" />
              </button>
            </div>

{/* Área de mensajes con altura fija - Aumentada en un 30% */}
            <div
              className="h-[24rem] overflow-y-auto p-2"
              style={{
                backgroundColor: "#f2eae4",
              }}
            >
              {/* Mensaje 1 */}
              <div className="max-w-[80%] ml-auto mb-3">
                <div className="bg-[#d4f1ff] p-2 rounded-lg shadow-sm text-gray-800">
                  <p className="text-xs">
                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-[#2979FF] text-white border border-[#90CAF9] mr-1">
                      Automático
                    </span>
                    <span className="font-medium">Hola prueba, te saluda de BSG INSTITUTE</span> Te hemos enviado un
                    correo electrónico con la información del{" "}
                    <span className="font-medium">Programa Internacional en Gerencia de Proyectos</span> que nos
                    solicitaste vía Llamada Telefonica. Estoy a tu disposición para poder resolver todas tus dudas o
                    consultas. Coméntame en que horario podría llamarte por teléfono.
                  </p>
                  <div className="flex justify-end items-center gap-1 mt-1">
                    <span className="text-xs text-gray-600">2024/04/24 10:16 AM</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="12"
                      height="12"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-[#2979FF]"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                      <polyline points="20 12 9 23 4 18"></polyline>
                    </svg>
                  </div>
                </div>
              </div>

{/* Mensaje 2 */}
              <div className="max-w-[80%] ml-auto mb-3">
                <div className="bg-[#dcffde] p-2 rounded-lg shadow-sm text-gray-800">
                  <p className="text-xs">
                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-[#00bc3a] text-white border border-[#A5D6A7] mr-1">
                      Manual
                    </span>
                    <span className="font-medium">Paola Lozano</span>
                    <br />
                    <span className="font-medium">Hola prueba, te saluda Paola Lozano de BSG INSTITUTE</span> Te hemos
                    enviado un correo electrónico con la información del{" "}
                    <span className="font-medium">Programa Internacional en Gerencia de Proyectos</span> que nos
                    solicitaste vía Llamada Telefonica. Estoy a tu disposición para poder resolver todas tus dudas o
                    consultas. Coméntame en que horario podría llamarte por teléfono.
                  </p>
                  <div className="flex justify-end items-center gap-1 mt-1">
                    <span className="text-xs text-gray-600">2024/05/30 04:06 PM</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="12"
                      height="12"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-[#00bc3a]"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                      <polyline points="20 12 9 23 4 18"></polyline>
                    </svg>
                  </div>
                </div>
              </div>
            </div>

{/* Área de entrada de mensajes - Iconos en columna vertical con contenedores */}
            <div className="flex border-t border-gray-200 bg-white p-2">
              {/* Columna de iconos vertical */}
              <div className="flex flex-col gap-2 mr-2">
                {/* Botón de Plantillas */}
                <div className="group relative">
                  <button
                    className="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-[#00bc3a] rounded-md border border-gray-300 shadow-sm transition-colors"
                    onClick={() => setIsTemplateModalOpen(true)}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                  </button>
                  <div className="absolute left-full ml-2 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
                    Plantillas
                  </div>
                </div>

{/* Botón de Agregar documento */}
                <div className="group relative">
                  <button className="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-[#00bc3a] rounded-md border border-gray-300 shadow-sm transition-colors">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                      <polyline points="14 2 14 8 20 8"></polyline>
                      <line x1="16" y1="13" x2="8" y2="13"></line>
                      <line x1="16" y1="17" x2="8" y2="17"></line>
                      <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                  </button>
                  <div className="absolute left-full ml-2 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
                    Agregar documento
                  </div>
                </div>

{/* Botón de Agregar imagen */}
                <div className="group relative">
                  <button className="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-[#00bc3a] rounded-md border border-gray-300 shadow-sm transition-colors">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                      <circle cx="8.5" cy="8.5" r="1.5"></circle>
                      <polyline points="21 15 16 10 5 21"></polyline>
                    </svg>
                  </button>
                  <div className="absolute left-full ml-2 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
                    Agregar imagen
                  </div>
                </div>
              </div>

{/* Área de texto y botones */}
              <div className="flex-1 flex items-center">
                {/* Área de texto - Ocupa todo el ancho disponible */}
                <textarea
                  placeholder="Escribe un mensaje..."
                  className="flex-1 border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#128C7E] resize-none"
                  style={{ height: "100%", minHeight: "60px" }}
                  value={messageInput}
                  onChange={(e) => handleMessageInputChange(e as any)}
                >

{/* Botones de borrar y enviar a la derecha */} {/* Botones de borrar y enviar a la derecha, now in columna vertical */}

{/* Botón Finalizar Actividad - Ahora dentro de la ventana de chat */}

{/* Modal para plantillas de WhatsApp */} setIsTemplateModalOpen(false)} onSelectTemplate={handleSelectTemplate} /> ) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/semaforo-financiero-bsg.tsx" isMerged="true" "use client" export default function SemaforoFinancieroBSG() { return null } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/semaforo-financiero.tsx" isMerged="true" "use client" import { useState } from "react" import { Search, CreditCard, DollarSign, Award, User, ChevronDown, ChevronUp, AlertTriangle } from "lucide-react" import { HistorialCrediticioModal } from "../../../../../../../components/historial-crediticio-modal" export default function SemaforoFinanciero() { const [isOpen, setIsOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false) // Estados independientes para cada sección desplegable const [isTarjetasExpanded, setIsTarjetasExpanded] = useState(false) const [isCreditosExpanded, setIsCreditosExpanded] = useState(false) const handleOpenModal = () => { setIsModalOpen(true) } const handleCloseModal = () => { setIsModalOpen(false) } return (

{/* Información del cliente y consulta */}

{/* Columna 1: Consulta rápida */}

Consulta rápida

Número de documento

{/* Columna 2: Resumen crediticio */}

Resumen financiero

Línea total disponible: 24,625 PEN

Créditos vigentes: 3,601 PEN

Top 2 - Excelente historial crediticio

{/* Columna 3: Información del cliente */}

Información del cliente

Edad: 29 años

Consulta realizada: 21/04/2025

Próxima consulta: 21/10/2025

{/* Secciones de Tarjetas de Crédito y Créditos Vigentes lado a lado */}

{/* Sección de Tarjetas de Crédito (desplegable) */}

{/* Contenido expandible de Tarjetas - Separado del botón */} {isTarjetasExpanded && (

{/* Tarjeta 1 */}

BCO FALABELLA PERÚ

7,300 PEN disponible

Línea otorgada

8,300 PEN

Línea utilizada

1,000 PEN

% Disponible

88%

{/* Tarjeta 2 */}

BCP

17,325 PEN disponible

Línea otorgada

20,000 PEN

Línea utilizada

2,601 PEN

% Disponible

87%

)}

{/* Sección de Créditos Vigentes (desplegable) */}

{/* Contenido expandible de Créditos - Separado del botón */} {isCreditosExpanded && (

{/* Crédito 1 */}

BCO FALABELLA PERÚ

Al día

1,000 PEN

{/* Crédito 2 */}

BCP

Al día

2,601 PEN

)}

{/* Modal para historial crediticio */}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/semaforo-riesgos.tsx" isMerged="true" "use client" import { AlertTriangle } from "lucide-react" export default function SemaforoRiesgos() { // Datos de ejemplo para cada riesgo (puedes cambiar estos valores) const riesgos = [ { nombre: "Abandono", probabilidad: "baja", // "baja", "media", "alta" color: "green", }, { nombre: "Atraso Académico", probabilidad: "baja", color: "green", }, { nombre: "Atraso en Pagos", probabilidad: "media", color: "yellow", }, ] const getColorClasses = (color: string) => { switch (color) { case "green": return { circle: "bg-green-500", bg: "bg-green-50", text: "text-green-700", border: "border-green-100", } case "yellow": return { circle: "bg-yellow-500", bg: "bg-yellow-50", text: "text-yellow-700", border: "border-yellow-100", } case "red": return { circle: "bg-red-500", bg: "bg-red-50", text: "text-red-700", border: "border-red-100", } default: return { circle: "bg-gray-500", bg: "bg-gray-50", text: "text-gray-700", border: "border-gray-100", } } } const getProbabilidadTexto = (probabilidad: string) => { switch (probabilidad) { case "baja": return "Probabilidad Baja" case "media": return "Probabilidad Media" case "alta": return "Probabilidad Alta" default: return "Probabilidad Desconocida" } } return (

Semáforo de Riesgos

{riesgos.map((riesgo, index) => { const colorClasses = getColorClasses(riesgo.color) return (

{/* Nombre del riesgo */}

{riesgo.nombre}

{/* Círculo de color */}

{/* Leyenda de probabilidad */}

{getProbabilidadTexto(riesgo.probabilidad)}

) })}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/solicitudes-realizadas-table.tsx" isMerged="true" "use client" export default function SolicitudesRealizadasTable() { // Datos específicos para las solicitudes realizadas con la información corregida const solicitudesData = [ { tipoSolicitud: "Subestado", valorAnterior: "Seguimiento Academico", valorNuevo: "POR EMITIR CERTIFICADO APROBADO (NO APLICA PF)", solicitadoPor: "Bianca Mamani", aprobadoPor: "Claudia Obando", fechaAprobacion: "08/04/2025", horaAprobacion: "07:21 p.m.", observacion: "Ninguna", }, { tipoSolicitud: "Estado", valorAnterior: "REGULAR", valorNuevo: "CULMINADO", solicitadoPor: "Bianca Mamani", aprobadoPor: "Claudia Obando", fechaAprobacion: "08/04/2025", horaAprobacion: "07:21 p.m.", observacion: "Ninguna", }, { tipoSolicitud: "Centro de costo", valorAnterior: "PREP EXAMPMP ONLINE 2023 XIV LIMA", valorNuevo: "PREP EXAMPMP ONLINE 2023 V CDMEXICO", solicitadoPor: "Elizabeth Farfan", aprobadoPor: "Fabiola Rojas", fechaAprobacion: "01/08/2024", horaAprobacion: "07:01 p.m.", observacion: "REALIZADO", }, ] // Función para obtener el estilo según el tipo de solicitud const getTipoSolicitudStyle = (tipo) => { if (tipo === "Centro de costo") { return "bg-purple-100 text-purple-800 border border-purple-300" } if (tipo === "Estado") { return "bg-blue-100 text-blue-800 border border-blue-300" } if (tipo === "Subestado") { return "bg-amber-100 text-amber-800 border border-amber-300" } return "bg-gray-100 text-gray-800 border border-gray-300" } return (

{solicitudesData.map((solicitud, index) => { const tipoSolicitudStyle = getTipoSolicitudStyle(solicitud.tipoSolicitud) return ( ) })}

Tipo de Solicitud	Valor Anterior	Valor Nuevo	Solicitante	Aprobado por	Fecha Aprobación	Observación
{solicitud.tipoSolicitud}	{solicitud.valorAnterior}	{solicitud.valorNuevo}	{solicitud.solicitadoPor}	{solicitud.aprobadoPor}	{solicitud.fechaAprobacion} {solicitud.horaAprobacion}	{solicitud.observacion}

{/* Paginación */}

Página

{}} />

de 1

items por página

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/solicitudes-reclamos-collapsible.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { CheckCircle, ChevronDown, Plus } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import SolicitudesReclamosTable from "./solicitudes-reclamos-table" import { RegistroSolicitudModal } from "@/components/registro-solicitud-modal" export default function SolicitudesReclamosCollapsible() { const [isOpen, setIsOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false) const handleNewRequest = (e: React.MouseEvent) => { e.stopPropagation() setIsModalOpen(true) } return ( {/* Header */}

{/* Content */} {isOpen && (

)} setIsModalOpen(false)} /> ) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/solicitudes-reclamos-table.tsx" isMerged="true" "use client" import { useState } from "react" import { useSolucionSolicitud } from "../../../../../../../contexts/solucion-solicitud-context" import { Legend } from "@/components/legend" interface DateLabelProps { label: string date: string variant?: "blue" | "yellow" | "green" } function DateLabel({ label, date, variant = "blue" }: DateLabelProps) { const variantStyles = { blue: "bg-blue-100 text-blue-700", yellow: "bg-yellow-100 text-yellow-700", green: "bg-green-100 text-green-700", } return (

{label}: {date}

) } export default function SolicitudesReclamosTable() { // Estado para controlar qué filas están expandidas const [expandedRows, setExpandedRows] = useState>({}) const [expandedComments, setExpandedComments] = useState>({}) const { openModal } = useSolucionSolicitud() // Función para alternar la expansión de una fila const toggleRowExpansion = (index: number) => { setExpandedRows((prev) => ({ ...prev, [index]: !prev[index], })) } // Función para alternar la expansión de un comentario const toggleCommentExpansion = (index: number) => { setExpandedComments((prev) => ({ ...prev, [index]: !prev[index], })) } // Datos actualizados para la tabla de solicitudes, reclamos, quejas y sugerencias const solicitudesData = [ { id: "SOL-001", tipo: "Queja", estado: "Académica", detalle: 'Alumno reporta que resolvió el examen el viernes 09/05 sin embargo ayer que se hizo el recordatorio de que resuelva la actividad: "Examen Final" se validaba que no se había enviado correctamente, se pide revisar su usuario si es que hubo alguna actualización. (se adjunta comentario de alumno)', curso: "Control de versiones con Git ONLINE 2025 I LIMA", asistente: "Bianca Mamani", fechaRegistro: "13/05/2025 01:47 PM", fechaSolicitud: null, // No solucionado aún solucionado: false, comentarioGestion: "Se validó el envío de cuestionarios y todo se encuentra de manera normal, se dará seguimiento si sucede algún caso posterior.", estadoGestion: "En proceso de resolución", }, { id: "SOL-002", tipo: "Sugerencia", estado: "Técnica", detalle: 'Alumno solicita apoyo para activar as tareas de la sesión 3 que por motivo laboral no pudo entregar a tiempo: "Introducción Programación en Python - Tarea Sesión 03" y "Introducción Programación en Python - Cuestionario Sesión 03" (se adjunta correo solicitante)', curso: "Introducción a Python ONLINE 2025 II LIMA", asistente: "Bianca Mamani", fechaRegistro: "12/03/2025 11:37 AM", fechaSolicitud: "12/03/2025 06:59 PM", // Ya solucionado solucionado: true, comentarioGestion: "Se realizó ampliación de actividades hasta el día 14/03 23:59pm", estadoGestion: "Resuelta", }, ] // Función para truncar el texto y añadir "ver más" como parte del texto const renderDetailText = (text: string, index: number, tipo: string, estado: string) => { const isExpanded = expandedRows[index] || false const tipoColor = tipo === "Queja" ? "bg-red-100 text-red-700" : "bg-orange-100 text-orange-700" const estadoColor = estado === "Técnica" ? "bg-blue-100 text-blue-700" : "bg-purple-100 text-purple-700" if (isExpanded) { return (

{tipo} {estado}

{text}{" "}

) } return (

{tipo} {estado}

{text}

) } // Función para truncar el comentario y añadir "ver más" como parte del texto const renderCommentText = (text: string, index: number, estadoGestion: string) => { const isExpanded = expandedComments[index] || false // Determinar el color de la etiqueta de estado de gestión const estadoColor = estadoGestion === "Resuelta" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700" if (isExpanded) { return (

{estadoGestion}

{text}{" "}

) } // Para la primera fila if (index === 0) { return (

{estadoGestion}

) } // Para la segunda fila return (

{estadoGestion}

Se realizó ampliación de actividades hasta el día 14/03...{" "}

) } return (

{/* Leyenda */} {solicitudesData.map((solicitud, index) => { return ( ) })}

Detalle	Curso	Asistente	Fechas	Comentario de Gestión	Gestión de Solicitud
{renderDetailText(solicitud.detalle, index, solicitud.tipo, solicitud.estado)}	{solicitud.curso}	{solicitud.asistente}	{solicitud.fechaSolicitud && ( )}	{renderCommentText(solicitud.comentarioGestion, index, solicitud.estadoGestion)}

{/* Paginación */}

Página

{}} />

de 1

items por página

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/academic-portal-tab.tsx" isMerged="true" "use client" import { Search, ChevronDown, ChevronUp, Award } from "lucide-react" import { useState, useEffect } from "react" import { DateLabel } from "@/components/date-label" import { Legend } from "@/components/legend" export default function AcademicPortalTab() { const [searchTerm, setSearchTerm] = useState("") const [selectedProgram, setSelectedProgram] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") const [isOpen, setIsOpen] = useState(false) // Estados separados para cada sección const [isSincronicaCollapsed, setIsSincronicaCollapsed] = useState(false) const [isAsincronicaCollapsed, setIsAsincronicaCollapsed] = useState(false) const [isAsistenciasCollapsed, setIsAsistenciasCollapsed] = useState(false) const [isRecuperacionModalOpen, setIsRecuperacionModalOpen] = useState(false) const [selectedCourse, setSelectedCourse] = useState("") // Estados separados para filas expandidas de cada sección const [expandedRowsSincronica, setExpandedRowsSincronica] = useState([]) const [expandedRowsAsincronica, setExpandedRowsAsincronica] = useState([]) const [isProyectoCollapsed, setIsProyectoCollapsed] = useState(false) const [expandedComment, setExpandedComment] = useState(false) const availablePrograms = [ "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE", "CURSO OFICIAL AZURE ADMINISTRATOR ASSOCIATE", "DIPLOMADO EN CIBERSEGURIDAD", "PROGRAMA ESPECIALIZADO EN DATA SCIENCE", "CERTIFICACIÓN EN DEVOPS PROFESSIONAL", "CURSO DE DESARROLLO WEB FULL STACK", "MÁSTER EN INTELIGENCIA ARTIFICIAL", "DIPLOMADO EN GESTIÓN DE PROYECTOS ÁGILES", "CURSO DE PYTHON PARA ANÁLISIS DE DATOS", "CERTIFICACIÓN EN CLOUD COMPUTING", "PROGRAMA DE ESPECIALIZACIÓN EN UX/UI DESIGN", "CURSO DE JAVASCRIPT AVANZADO", "DIPLOMADO EN MARKETING DIGITAL", "CERTIFICACIÓN EN BLOCKCHAIN", "CURSO DE MACHINE LEARNING", ] // Actualizar el término de búsqueda cuando se selecciona un programa useEffect(() => { setSearchTerm(selectedProgram) }, [selectedProgram]) // Función para cerrar el menú cuando se hace clic fuera useEffect(() => { function handleClickOutside(event) { const target = event.target if (!target.closest(".program-selector")) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Función para limpiar la selección const clearSelection = (e) => { e.stopPropagation() // Evitar que el clic se propague al input setSearchTerm("") setSelectedProgram("") setIsOpen(true) // Abrir el desplegable para mostrar todas las opciones } // Filtrar programas basados en el término de búsqueda const filteredPrograms = searchTerm ? availablePrograms.filter((program) => program.toLowerCase().includes(searchTerm.toLowerCase())) : availablePrograms // Función para manejar el clic en el botón de recuperación const handleRecuperacionClick = (courseName) => { setSelectedCourse(courseName) setIsRecuperacionModalOpen(true) } // Función para manejar la confirmación de recuperación const handleConfirmRecuperacion = () => { alert(`Recuperación programada para: ${selectedCourse}`) setIsRecuperacionModalOpen(false) } // Funciones separadas para manejar expansión de filas const toggleRowExpansionSincronica = (rowIndex: number) => { setExpandedRowsSincronica((prev) => prev.includes(rowIndex) ? prev.filter((index) => index !== rowIndex) : [...prev, rowIndex], ) } const toggleRowExpansionAsincronica = (rowIndex: number) => { setExpandedRowsAsincronica((prev) => prev.includes(rowIndex) ? prev.filter((index) => index !== rowIndex) : [...prev, rowIndex], ) } // Agregar esta clase CSS para truncar texto const styles = ` .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } ` return ( <>

Analítica de Ventas

Tasas de Conversión Consolidadas

Cliente no encontrado

Nueva Fecha de Término

Tasa de avance

Actividades

Total de Actividades

Actividades Pendientes

Progreso general

Avance programado

Tasa de asistencia

Actividades

Total de Actividades

Actividades Pendientes

Progreso general

Información de la última sesión

Tasa de asistencia

Actividades

Total de Actividades

Actividades Pendientes

Progreso general

Información de la última sesión

Enviar Accesos Portal Web por Whatsapp

Enviar Accesos Portal Web por correo

Enviar Condiciones y características por correo

{getTitle()}

Consulta rápida

Resumen financiero

Información del cliente

Tarjetas de crédito disponible

BCO FALABELLA PERÚ

BCP

Créditos vigentes

BCO FALABELLA PERÚ

BCP

{riesgo.nombre}