[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/client-info-tab.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import PerfilCliente from "../perfil-cliente" import HistorialModificaciones from "../historial-modificaciones" import InformacionAlternativa from "../informacion-alternativa" export default function ClientInfoTab() { return (

{/* Perfil del Cliente */} {/* Historial de Modificaciones del Contacto */} {/* Información Alternativa del Contacto */}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/documentation-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { FileText, FileCheck } from "lucide-react" // Importamos los componentes de pestañas import DocumentosProgramaTab from "./tabs/documentos-programa-tab" import DocumentosLegalesTab from "./tabs/documentos-legales-tab" export default function DocumentationTab() { const [activeTab, setActiveTab] = useState("documentos-programa") // Función para determinar el color de fondo y texto según la pestaña const getTabStyles = (tabId) => { if (tabId === "documentos-programa") { return { active: "bg-blue-600 text-white", inactive: "bg-blue-100 text-blue-600 hover:bg-blue-200", iconColor: "text-blue-600", } } else { return { active: "bg-purple-600 text-white", inactive: "bg-purple-100 text-purple-600 hover:bg-purple-200", iconColor: "text-purple-600", } } } // Array de pestañas para facilitar el renderizado const tabs = [ { id: "documentos-programa", label: "Documentos del\nprograma", icon: FileText }, { id: "documentos-legales", label: "Documentos\nlegales", icon: FileCheck }, ] return (

{/* Tabs Navigation */}

{tabs.map((tab, index) => { const TabIcon = tab.icon const styles = getTabStyles(tab.id) const roundedClasses = index === 0 ? "rounded-tl-lg" : index === tabs.length - 1 ? "rounded-tr-lg" : "" return ( ) })}

{activeTab === "documentos-programa" && } {activeTab === "documentos-legales" && }

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/enrolled-courses-tab.tsx" isMerged="true" "use client" import { ChevronDown, ChevronUp, Trash2, X } from "lucide-react" import { useState } from "react" export default function EnrolledCoursesTab() { const [isOpen, setIsOpen] = useState(true) const [isConfirmationOpen, setIsConfirmationOpen] = useState(false) const [selectedCourse, setSelectedCourse] = useState<{ name: string; index: number } | null>(null) const toggleCollapsible = () => { setIsOpen(!isOpen) } const coursesData = [ { name: "Curso Sistemas de Gestión de Calidad ISO 9001:2015 ONLINE 2025 IV LIMA", duration: "14", type: "Online Asincronica", }, { name: "Curso Sistemas de Gestión Ambiental ISO 14001:2015 ONLINE 2025 II LIMA", duration: "7", type: "Online Sincronica", }, { name: "Curso Sistema de Gestión de Seguridad en el Trabajo y la Gestión de Riesgos ISO 45001 ONLINE 2025 II LIMA", duration: "10", type: "Online Sincronica", }, { name: "Curso Interpretación de la Norma ISO 9001:2015 ONLINE 2025 II LIMA", duration: "16", type: "Online Sincronica", }, { name: "Curso Interpretación de los Requisitos de la Norma ISO 14001:2015 ONLINE 2025 II LIMA", duration: "23", type: "Online Sincronica", }, ] // Estado local para manejar los cursos después de eliminar const [courses, setCourses] = useState([...coursesData]) const handleDeleteClick = (course: { name: string }, index: number) => { setSelectedCourse({ name: course.name, index: index }) setIsConfirmationOpen(true) } const handleConfirmDelete = () => { if (selectedCourse) { // Crear una copia del array y eliminar el curso seleccionado const updatedCourses = [...courses] updatedCourses.splice(selectedCourse.index, 1) setCourses(updatedCourses) // Mostrar mensaje de éxito alert(`Matrícula anulada exitosamente para "${selectedCourse.name}"`) } setIsConfirmationOpen(false) } return (

{/* Collapsible section */}

{/* Collapsible header */}

Cursos Matriculados

{isOpen ? : }

{/* Collapsible content */} {isOpen && (

{courses.map((course, index) => ( ))}

Nombre del Curso	Duración	Tipo	Acciones
{course.name}	{course.duration} Horas	{course.type}

{/* Paginación */}

Página

{}} />

de 1

items por página

)}

{/* Diálogo de confirmación */} {isConfirmationOpen && selectedCourse && (

{/* Encabezado */}

Confirmar anulación

{/* Contenido */}

¿Estás seguro que deseas anular la matrícula?

{/* Botones */}

)}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/payment-management-tab.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Search, XCircle, Calendar, Gift, CreditCard, FileText } from "lucide-react" // Importamos los componentes de pestañas import CronogramaPagosTab from "./tabs/cronograma-pagos-tab" import BeneficiosInversionTab from "./tabs/beneficios-inversion-tab" import FormasPagoTab from "./tabs/formas-pago-tab" import TarifariosTab from "./tabs/tarifarios-tab" export default function PaymentManagementTab() { const [activeTab, setActiveTab] = useState("cronograma-pagos") const [selectedProgram, setSelectedProgram] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") const [searchTerm, setSearchTerm] = useState("") const [isOpen, setIsOpen] = 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", "PROGRAMA DE DESARROLLO MÓVIL CON REACT NATIVE", "DIPLOMADO EN BIG DATA Y BUSINESS INTELLIGENCE", "CURSO DE SEGURIDAD INFORMÁTICA", "CERTIFICACIÓN EN REDES CISCO", "PROGRAMA ESPECIALIZADO EN INTERNET DE LAS COSAS (IOT)", "CURSO DE DESARROLLO DE VIDEOJUEGOS", "DIPLOMADO EN TRANSFORMACIÓN DIGITAL", "CERTIFICACIÓN EN LINUX ADMINISTRATION", "CURSO DE ROBÓTICA Y AUTOMATIZACIÓN", ] // Filtrar programas basados en el término de búsqueda const filteredPrograms = searchTerm ? availablePrograms.filter((program) => program.toLowerCase().includes(searchTerm.toLowerCase())) : availablePrograms // Actualizar el término de búsqueda cuando se selecciona un programa useEffect(() => { setSearchTerm(selectedProgram) }, [selectedProgram]) // 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 } 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 determinar el color de fondo y texto según la pestaña const getTabStyles = (tabId) => { // Pestañas azules const blueTabs = ["cronograma-pagos", "formas-pago"] // Pestañas verdes const greenTabs = ["beneficios-inversion"] // Pestañas amarillas const yellowTabs = ["tarifarios"] if (blueTabs.includes(tabId)) { return { active: "bg-blue-600 text-white", inactive: "bg-blue-100 text-blue-600 hover:bg-blue-200", iconColor: "text-blue-600", } } else if (greenTabs.includes(tabId)) { return { active: "bg-green-600 text-white", inactive: "bg-green-100 text-green-600 hover:bg-green-200", iconColor: "text-green-600", } } else if (yellowTabs.includes(tabId)) { return { active: "bg-amber-500 text-white", inactive: "bg-amber-100 text-amber-600 hover:bg-amber-200", iconColor: "text-amber-600", } } // Default (should not reach here) return { active: "bg-purple-600 text-white", inactive: "bg-purple-100 text-purple-600 hover:bg-purple-200", iconColor: "text-purple-600", } } // Función para determinar las clases de borde redondeado según la posición const getTabRoundedClasses = (index, totalTabs) => { if (index === 0) { return "rounded-tl-lg" } else if (index === totalTabs - 1) { return "rounded-tr-lg" } return "" } // Array de pestañas para facilitar el renderizado const tabs = [ { id: "cronograma-pagos", label: "Cronograma de\npagos", icon: Calendar }, { id: "beneficios-inversion", label: "Beneficios e\ninversión", icon: Gift }, { id: "formas-pago", label: "Formas de\npago", icon: CreditCard }, { id: "tarifarios", label: "Tarifarios", icon: FileText }, ] return (

{/* Program Selector with Search */}

{ setSearchTerm(e.target.value) if (!isOpen) setIsOpen(true) }} onClick={() => setIsOpen(true)} placeholder="Buscar programa..." className="w-full pl-9 pr-8 py-2.5 text-sm text-gray-700 bg-transparent outline-none" /> {searchTerm && ( )}

{isOpen && (

{filteredPrograms.length > 0 ? ( filteredPrograms.map((program) => ( )) ) : (

No se encontraron programas

)}

{/* Tabs Navigation */}

{tabs.map((tab, index) => { const TabIcon = tab.icon const styles = getTabStyles(tab.id) const roundedClasses = getTabRoundedClasses(index, tabs.length) return ( ) })}

{activeTab === "cronograma-pagos" && } {activeTab === "beneficios-inversion" && } {activeTab === "formas-pago" && } {activeTab === "tarifarios" && }

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/program-info-tab.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Target, BookOpen, Award, Layout, DollarSign, AlertTriangle, Users, FileText, User, ThumbsUp, Search, XCircle, ChevronLeft, ChevronRight, Video, PlayCircle, Laptop, Calendar, ChevronDown, CheckCircle, BookOpenCheck, } from "lucide-react" export default function ProgramInfoTab() { const [activeTab, setActiveTab] = useState("modalidades") const [selectedProgram, setSelectedProgram] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") 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", "PROGRAMA DE DESARROLLO MÓVIL CON REACT NATIVE", "DIPLOMADO EN BIG DATA Y BUSINESS INTELLIGENCE", "CURSO DE SEGURIDAD INFORMÁTICA", "CERTIFICACIÓN EN REDES CISCO", "PROGRAMA ESPECIALIZADO EN INTERNET DE LAS COSAS (IOT)", "CURSO DE DESARROLLO DE VIDEOJUEGOS", "DIPLOMADO EN TRANSFORMACIÓN DIGITAL", "CERTIFICACIÓN EN LINUX ADMINISTRATION", "CURSO DE ROBÓTICA Y AUTOMATIZACIÓN", ] const [searchTerm, setSearchTerm] = useState("") const [isOpen, setIsOpen] = useState(false) const [showTopWhatsappPopup, setShowTopWhatsappPopup] = useState(false) const [showTopEmailPopup, setShowTopEmailPopup] = useState(false) const [showTopConditionsPopup, setShowTopConditionsPopup] = useState(false) const toggleTopWhatsappPopup = () => setShowTopWhatsappPopup(!showTopWhatsappPopup) const toggleTopEmailPopup = () => setShowTopEmailPopup(!showTopEmailPopup) const toggleTopConditionsPopup = () => setShowTopConditionsPopup(!showTopConditionsPopup) // Filtrar programas basados en el término de búsqueda const filteredPrograms = searchTerm ? availablePrograms.filter((program) => program.toLowerCase().includes(searchTerm.toLowerCase())) : availablePrograms // Actualizar el término de búsqueda cuando se selecciona un programa useEffect(() => { setSearchTerm(selectedProgram) }, [selectedProgram]) // 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 } useEffect(() => { function handleClickOutside(event) { const target = event.target if (!target.closest(".program-selector")) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Componentes para las pestañas const Modalidades = () => (

{/* Modalidad Online Sincrónica */}

Modalidad Online Sincrónica (Clases en vivo)

Las clases se desarrollarán de forma virtual, con una frecuencia semanal en el siguiente horario (*):

•

Jueves: 19:00 a 22:00 horas

(Hora Perú y Colombia)
•

Jueves: 18:00 a 21:00 horas

(Hora México)
•

Jueves: 21:00 a 00:00 horas

(Hora Chile)

{/* Modalidad Online Asincrónica */}

Modalidad Online Asincrónica (Clases grabadas)

Versión Profesional:

6 meses para completar el programa. Los contenidos comprenden 83 horas cronológicas de clases grabadas que podrá visualizar en línea (conectado a Internet) a través de nuestro campus virtual y Q&A Webinars donde podrá despejar sus dudas y consultas con los expositores del curso en tiempo real.

Versión Gerencial:

6 meses para completar el programa. Los contenidos comprenden 82 horas cronológicas de clases grabadas que podrá visualizar en línea (conectado a Internet) a través de nuestro campus virtual.

Próximas fechas de inicio

Online Sincrónica

Cupos disponibles

Inicio: 15 de mayo de 2025 | Horario: Jueves de 19:00 a 22:00 horas

Online Asincrónico

Disponible

Inicio: Inmediato | Duración: 6 meses de acceso

Metodología Online de este Programa

La metodología consta de los siguientes componentes:

•

Sesiones de clases grabadas publicadas en el Aula Virtual de BSG Institute y accesibles en línea 24 horas 7 días a la semana.
•

Auto-evaluaciones semanales.
•

Interacción de los alumnos con el profesor a través del foro virtual de preguntas.
•

Desarrollo de un trabajo de aplicación práctica a ser revisado por el expositor/tutor del programa.
•

Aplicación de una evaluación final.
•

Interacción de los alumnos con el profesor mediante Q&A webinars en vivo, donde los alumnos podrán plantear sus dudas a los expositores y/o tutores.

Requisitos técnicos

Para el acceso a las clases

•

Computadora con mínimo 8GB de RAM
•

Conexión a internet estable (mínimo 10 Mbps)
•

Micrófono y cámara web
•

Navegador Chrome o Firefox actualizado

Software necesario

•

Cuenta de AWS (se proporcionarán créditos para laboratorios)
•

Putty o Terminal (para conexiones SSH)
•

AWS CLI (se instalará durante el curso)
•

Editor de código (VS Code recomendado)

) const Inversion = () => (

{/* Plan Profesional */}

Profesional

Precio Contado:

US$1690

Precio Crédito:

1 cuota inicial de US$590 y 2 cuotas mensuales desde US$590

{/* Plan Gerencial */}

Gerencial

Precio Contado:

US$1890

Precio Crédito:

1 cuota inicial de US$590 y 2 cuotas mensuales desde US$690

) const Beneficios = () => (

{/* Versión Profesional */}

Versión Profesional

1

Aplicarás técnicas avanzadas en el diseño de arquitecturas seguras, escalables y optimizadas en AWS, aplicables directamente a tu entorno laboral para resolver problemas complejos.
2

Obtendrás acceso al simulador en español BSG AWS - CSA Tento® con 195 preguntas del examen de certificación AWS Certified Solutions Architect - Associate.
3

Obtendrás la Certificación Oficial de AWS de participación en el curso.
4

Obtendrás acceso al Laboratorio oficial de Architecting on AWS
5

Obtendrás acceso al Laboratorio oficial Technical Essentials

{/* Versión Gerencial */}

Versión Gerencial

Todos los beneficios de la versión profesional además de:

1

Obtendrás la certificación AWS Certified Solutions Architect - Associate emitida por Amazon Web Services, reconocida globalmente, que elevará tu credibilidad y abrirá nuevas oportunidades profesionales en el mercado internacional.(*)

) const Presentacion = () => (

Este curso está enfocado en el examen AWS Certified Solutions Architect - Associate (SAA - C03), que te proporcionará los conocimientos y herramientas necesarias para utilizar las tecnologías de AWS para diseñar soluciones basadas en el marco de buena arquitectura de AWS. Además, aprenderás a diseñar soluciones que incorporen los servicios de AWS para cumplir con los requisitos comerciales actuales y las necesidades futuras proyectadas, a diseñar arquitecturas que sean seguras, resistentes, de alto rendimiento y rentables, y a revisar soluciones existentes y determinar las posibles mejoras.

) const Objetivos = () => (

1

Diseñar soluciones que incorporen servicios de AWS para satisfacer los requisitos comerciales actuales y las necesidades futuras proyectadas.
2

Diseñar arquitecturas que sean seguras, resistentes, de alto rendimiento y rentables.
3

Revisar soluciones existentes y determinar las posibles mejoras.

) const EstructuraCurricular = () => { const [openAccordion, setOpenAccordion] = useState("aws-technical") const toggleAccordion = (id: string) => { setOpenAccordion(openAccordion === id ? "" : id) } const awsTechnicalContent = [ "Introduction to Amazon Web Services", "AWS Compute", "AWS Networking", "AWS Storage", "Databases", "Monitoring, Optimization, and Serverless", ] const awsSolutionsContent = [ "Architecting Fundamentals", "Account Security", "Security policies", "Networking 1", "Compute", "Storage", "Data migration tools", "Database Services", "Monitoring and Scaling", "Auto scaling", "Automation", "Microservices", "Containers", "Networking 2", "Serverless services", "Serverless", "Edge Services", "Backup and Recovery", ] // Función para dividir un array en dos columnas const splitIntoColumns = (items: string[]) => { const midpoint = Math.ceil(items.length / 2) return [items.slice(0, midpoint), items.slice(midpoint)] } const [awsTechnicalCol1, awsTechnicalCol2] = splitIntoColumns(awsTechnicalContent) const [awsSolutionsCol1, awsSolutionsCol2] = splitIntoColumns(awsSolutionsContent) return (

{/* AWS Technical Essentials Accordion */}

{openAccordion === "aws-technical" && (

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsTechnicalCol1.length + index + 1}

{item}

)}

{/* AWS Solutions Architect Accordion */}

{openAccordion === "aws-solutions" && (

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsSolutionsCol1.length + index + 1}

{item}

)}

) } const Certificacion = () => (

Los participantes que completen exitosamente el curso, recibirán la siguiente certificación:

Certificación Oficial de AWS de participación en el curso. (**)
Certificación AWS Certified Solutions Architect – Associate emitida por Amazon Web Services. (*)
Certificación emitida por BSG Institute.

(*) Incluido solo en la versión gerencial. Sujeto a la aprobación del examen correspondiente.

) const PublicoObjetivo = () => (

El curso está dirigido a:

1

Ingenieros en sistemas, profesionales del área de TI, informática de computación y profesionales de áreas relacionadas interesados en fortalecer su conocimiento sobre AWS y obtener la certificación AWS Certified Solutions Architect - Associate.

) const Prerrequisitos = () => (

Los participantes deben contar con alguna experiencia práctica en la administración de sistemas, operaciones de TI o desarrollo de software, con un enfoque en la computación en la nube o infraestructura de TI.

Los participantes deben contar con conocimientos básicos de computación en la nube, redes, y seguridad de la información. Conocimientos básicos de AWS, incluyendo servicios como EC2, S3, y VPC.

) const Expositores = () => { const [currentIndex, setCurrentIndex] = useState(0) // Lista de expositores const expositores = [ { nombre: "Hans Verduguez", pais: "Perú", imagen: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icono-Docente-Varon%20%281%29-3al2NXpq9jrtCpTxX9aZ1EqwlctLWg.png", bio: "AWS Official Trainer, AWS Architect Associate. Ingeniero de Sistemas con más de 15 años de experiencia en diseño y arquitectura de soluciones en países como Perú, Chile, Argentina, Bolivia, Ecuador y Uruguay.", }, { nombre: "Francisco Javier Moreno Díaz", pais: "Colombia", imagen: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icono-Docente-Varon%20%281%29-3al2NXpq9jrtCpTxX9aZ1EqwlctLWg.png", bio: "AWS Official Trainer, AWS Architect Associate. Ingeniero Electrónico con más de 10 años de experiencia en integración e implementación de soluciones tecnológicas en hardware, software y nube.", }, { nombre: "Marcelo Fabian Rivero Rivero", pais: "México", imagen: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icono-Docente-Varon%20%281%29-3al2NXpq9jrtCpTxX9aZ1EqwlctLWg.png", bio: "Instructor autorizado de Microsoft Azure, AWS Certified Solutions Architect - Associate. Ingeniero con más de 20 años de experiencia en consultoría y capacitación en plataformas cloud.", }, { nombre: "Ana María Rodríguez", pais: "Argentina", imagen: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icono-Docente-Mujer-3al2NXpq9jrtCpTxX9aZ1EqwlctLWg.png", bio: "Especialista en AWS y DevOps. Ingeniera en Sistemas con más de 12 años de experiencia en implementación de soluciones cloud y automatización de infraestructura. Certificada como AWS Solutions Architect Professional.", }, { nombre: "Carlos Mendoza", pais: "Chile", imagen: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icono-Docente-Varon%20%281%29-3al2NXpq9jrtCpTxX9aZ1EqwlctLWg.png", bio: "Experto en Cloud Computing y AWS. Ingeniero Informático con más de 15 años de experiencia en arquitectura de soluciones cloud y migración de aplicaciones. Certificado como AWS DevOps Engineer Professional.", }, ] // Calcular el número total de slides (grupos de 2) const totalSlides = Math.ceil(expositores.length / 2) // Funciones para navegar por el carrusel const nextSlide = () => { setCurrentIndex((prevIndex) => (prevIndex === totalSlides - 1 ? 0 : prevIndex + 1)) } const prevSlide = () => { setCurrentIndex((prevIndex) => (prevIndex === 0 ? totalSlides - 1 : prevIndex - 1)) } const goToSlide = (index) => { setCurrentIndex(index) } // Obtener los expositores actuales (2 por slide) const getCurrentExpositores = () => { const startIdx = currentIndex * 2 return expositores.slice(startIdx, startIdx + 2) } // Componente para mostrar un expositor individual const ExpositorCard = ({ expositor }) => (

{expositor.nombre}

{expositor.pais}

{expositor.bio}

) return (

{/* Carrusel de expositores */}

{/* Botón de navegación izquierdo */} {/* Contenedor de los expositores actuales (2 por slide) */}

{getCurrentExpositores().map((expositor, idx) => ( ))}

{/* Botón de navegación derecho */}

{/* Indicadores de posición */}

{Array.from({ length: totalSlides }).map((_, index) => (

) } return ( <> {/* Program Selector with Search and Filters */}

{/* Program Type Selector - Reduced width */}

Tipo de programa:

{/* Area Selector - Reduced width */}

Área:

{/* Program Search Selector - Increased width (spans 2 columns) */}

Información del programa:

{isOpen && (

{filteredPrograms.length > 0 ? ( filteredPrograms.map((program) => ( )) ) : (

No se encontraron programas

)}

{/* Tabs Navigation */}

{/* Modalidades - Blue */} {/* Inversión - Blue */} {/* Beneficios - Blue */} {/* Presentación - Blue */} {/* Objetivos - Blue */} {/* Estructura Curricular - Blue */} {/* Certificación - Blue */} {/* Público Objetivo - Green */} {/* Expositores - Yellow */} {/* Prerrequisitos - Yellow */}

{activeTab === "modalidades" && } {activeTab === "inversion" && } {activeTab === "beneficios" && } {activeTab === "presentacion" && } {activeTab === "objetivos" && } {activeTab === "publico-objetivo" && } {activeTab === "prerrequisitos" && } {activeTab === "estructura-curricular" && } {activeTab === "certificacion" && } {activeTab === "expositores" && }

[V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/speech-tab.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import ChangeRequestCollapsible from "../change-request-collapsible" import SectionWhatsApp from "../sections/section-whatsapp" import ChatPortalWeb from "../sections/chat-portal-web" import SemaforoFinanciero from "../semaforo-financiero" import HistorialMensajesCollapsible from "../historial-mensajes-collapsible" import SolicitudesReclamosCollapsible from "../solicitudes-reclamos-collapsible" import HistorialInteraccionOportunidades from "../historial-interaccion-oportunidades" import CertificacionesTasasCollapsible from "../certificaciones-tasas-collapsible" import SemaforoFinancieroBSG from "../semaforo-financiero-bsg" import AcademicSummarySincronico from "../academic-summary-sincronico" import AcademicSummaryAsincronico from "../academic-summary-asincronico" export default function SpeechTab() { const [whatsappMessageInput, setWhatsappMessageInput] = useState("") const handleWhatsappMessageChange = (e: React.ChangeEvent) => { setWhatsappMessageInput(e.target.value) } return (

{/* Desplegable de solicitud de cambios */}

{/* Nuevos desplegables */}

{/* Nuevo desplegable: Resumen académico (asincrónico) */}

{/* Nuevo desplegable: Semáforo Financiero */}

{/* Nuevo desplegable: Semáforo Financiero BSG */}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/tabs/beneficios-inversion-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { Gift, DollarSign, FileText, ChevronUp, ChevronDown } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { ConfirmationDialog } from "@/components/confirmation-dialog" import { DateLabel } from "@/components/date-label" import BotonDeTabla from "@/components/boton-de-tabla" export default function BeneficiosInversionTab() { const [openSection, setOpenSection] = useState("beneficios") const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false) const [selectedBenefit, setSelectedBenefit] = useState("") const [expandedTexts, setExpandedTexts] = useState<{ [key: string]: boolean }>({}) const toggleSection = (section: string) => { setOpenSection(openSection === section ? "" : section) } const toggleTextExpansion = (textId: string) => { setExpandedTexts((prev) => ({ ...prev, [textId]: !prev[textId], })) } const handleSolicitarBeneficio = (benefitDescription: string) => { setSelectedBenefit(benefitDescription) setIsConfirmDialogOpen(true) } const handleConfirmSolicitud = () => { // Aquí iría la lógica para procesar la solicitud del beneficio console.log("Beneficio solicitado:", selectedBenefit) setIsConfirmDialogOpen(false) // Opcional: mostrar un mensaje de éxito alert("Beneficio solicitado con éxito") } return (

{/* Beneficios Solicitados */}

{openSection === "solicitados" && ( {/* Leyenda */}

F.S: Fecha solicitada F.P: Fecha programada F.E: Fecha entregada

Beneficio solicitado	Programa	Centro costo	Fecha	Coordinador	Aprobar solicitud	Restablecer solicitud
Entregado 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		Bianca Mamani

)}

{/* Beneficios de matrícula actual */}

{openSection === "beneficios" && (

Beneficios	Acciones	Estado solicitud
Certificación por haber completado el Curso Auditor Interno ISO 9001:2015 reconocida por IRCA.	handleSolicitarBeneficio("implementar y gestionar sistemas integrados")} className="whitespace-nowrap" > Solicitar Beneficio	Por Solicitar
Registro en IRCA.	handleSolicitarBeneficio("aplicar al Registro en IRCA")} className="whitespace-nowrap" > Solicitar Beneficio	Por Solicitar
Curso Certificado por IRCA: Auditor Líder ISO 9001:2015.	handleSolicitarBeneficio("obtener la certificación del Curso Auditor Líder ISO 9001:2015") } className="whitespace-nowrap" > Solicitar Beneficio	Por Solicitar

)}

{/* Version y monto de matricula actual */}

{openSection === "version" && (

Versión	Precio Original	Descuento	Porcentaje Descuento	Precio Final
Gerencial	12.400,00 PEN	3.472,00 PEN	(28% MyC)	8.928,00 PEN

)}

{/* Versiones disponibles */}

{openSection === "versiones" && (

Versión	Precio Contado	Precio Crédito
Básica	7.190,00 PEN	8.800,00 PEN 1 cuota inicial de 2.900,00 PEN y 10 cuotas mensuales de 590,00 PEN
Profesional	8.390,00 PEN	9.800,00 PEN 1 cuota inicial de 2.900,00 PEN y 10 cuotas mensuales de 690,00 PEN
Gerencial	10.790,00 PEN	12.400,00 PEN 1 cuota inicial de 3.500,00 PEN y 10 cuotas mensuales de 890,00 PEN

)}

{/* Diálogo de confirmación */} setIsConfirmDialogOpen(false)} onConfirm={handleConfirmSolicitud} message={`¿Estás seguro de solicitar el beneficio para ${selectedBenefit}?`} title="Confirmar solicitud" />

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/tabs/cronograma-pagos-tab.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Calendar, ChevronDown, Plus, Eye, CheckCircle, AlertCircle } from "lucide-react" import type { LucideIcon } from "lucide-react" import { AgregarCompromisoPagoModal } from "@/components/agregar-compromiso-pago-modal" import { VerCompromisosPagoModal } from "@/components/ver-compromisos-pago-modal" import { DateLabel } from "@/components/date-label" // Datos de ejemplo para los compromisos const compromisosData = { "3": [{ id: 1, fechaRegistro: "31/03/2025", fechaCompromiso: "01/04/2025", monto: 296.5, cumplio: false }], "2": [ { id: 1, fechaRegistro: "31/03/2025", fechaCompromiso: "01/04/2025", monto: 296.5, cumplio: false }, { id: 2, fechaRegistro: "04/04/2025", fechaCompromiso: "04/04/2025", monto: 296.5, cumplio: false }, ], } // Componente de gráfico circular const CircularProgress = ({ percentage, color, size = 120, strokeWidth = 8, children }) => { const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const strokeDashoffset = circumference - (percentage / 100) * circumference return (

{/* Círculo de fondo */} {/* Contenido central */}

{children}

) } // Componente desplegable con el estilo de la aplicación export function Collapsible({ title, children, defaultOpen = false, icon: Icon, }: { title: string children: React.ReactNode defaultOpen?: boolean icon: LucideIcon }) { const [isOpen, setIsOpen] = useState(defaultOpen) return (

{isOpen && ( {children} )}

) } export default function CronogramaPagosTab() { const [isAgregarModalOpen, setIsAgregarModalOpen] = useState(false) const [isVerModalOpen, setIsVerModalOpen] = useState(false) const [selectedCuotaId, setSelectedCuotaId] = useState() const handleAgregarCompromiso = (cuotaId: string) => { setSelectedCuotaId(cuotaId) setIsAgregarModalOpen(true) } const handleVerCompromisos = (cuotaId: string) => { setSelectedCuotaId(cuotaId) setIsVerModalOpen(true) } const handleSaveCompromiso = (fecha: string, monto: number) => { console.log("Compromiso guardado:", { cuotaId: selectedCuotaId, fecha, monto }) // Aquí iría la lógica para guardar el compromiso } return (

{/* Modal de agregar compromiso */} setIsAgregarModalOpen(false)} onSave={handleSaveCompromiso} cuotaId={selectedCuotaId} /> {/* Modal de ver compromisos */} setIsVerModalOpen(false)} compromisos={selectedCuotaId ? compromisosData[selectedCuotaId] || [] : []} cuotaId={selectedCuotaId} /> {/* Dashboard de Pagos con gráficos circulares */}

{/* Panel izquierdo - Resumen de pagos con gráfico circular */}

Pagado 90%

Monto Abonado: 8.092,80

Pendiente a pagar: 835,31

Monto Total: 8.928,11

{/* Panel derecho - Información adicional */}

Tipo de moneda:

PEN

Cuota Mensual:

92,80

Medio de pago:

{/* Información de Cuotas */}

Cuotas pagadas:

10 de 11

Próximo vencimiento:

30/06/2025

{/* Desplegable de Estado de Cronograma */}

M Matrícula

C Cuota

F.V Fecha vencimiento

F.P Fecha de pago

U.C Último Compromiso

Estado	N° Cuota	Sub Cuota	Fechas	Monto (PEN)	Mora (PEN)	Forma de Pago	Compromisos de pagos
							Agregar	Fecha U.C.	Ver
Pagado	1 M	1		8.000,00	0,00	Comercio Electrónico Izipay
Pagado	2 C	1		92,80	0,00	Deposito Yape		22/04/2025 No cumplió
Vencido	3 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,11			12/05/2025 No cumplió
Pendiente	4 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	5 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	6 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	7 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	8 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	9 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	10 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00
Pendiente	11 C	1	{/* F.P conditional rendering */} {false && "-" !== "-" && }	92,80	0,00

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/tabs/documentos-legales-tab.tsx" isMerged="true" "use client" import { Download, Eye, FileText } from "lucide-react" export default function DocumentosLegalesTab() { return ( <> {/* Tabla de Documentos Legales */}

{/* Contenido de la tabla */}

{/* Licencia de funcionamiento definitiva */} {/* Resolución Instituto */} {/* Ficha RUC */} {/* DNI Representante Legal */} {/* Constancia del RNP */}

Nombre del Documento	Detalles	País
Licencia de funcionamiento definitiva	Licencia de funcionamiento definitiva	Perú
Resolución Instituto	Resolución Ministerial BS Grupo SAC	Perú
Ficha RUC	Ficha RUC	Perú
DNI Representante Legal	DNI REPRESENTATE LEGAL	Perú
Constancia del RNP	Constancia del Registro Nacional de Proveedores	Perú

{/* 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/tabs/documentos-programa-tab.tsx" isMerged="true" "use client" import { Download, FileText } from "lucide-react" export default function DocumentosProgramaTab() { return ( <> {/* Tabla de Documentos del Programa */}

{/* Contenido de la tabla */}

{/* Brochure BSG Institute */} {/* Brochure */} {/* Cronograma de Alumnos */} {/* Requisitos programas online */} {/* Pagare 1 (Word) */} {/* Pagare 2 (Excel) */} {/* Convenio de capacitación y/o formación */} {/* Condiciones y Características del servicio de capacitación */} {/* Sílabos del Programa */} {/* Contrato Uso de Datos */} {/* Lineamientos de Condiciones */} {/* Convenio de Prestacion de Servicios */} {/* Cronograma de Alumnos (Todos los Grupos) */}

Nombre del Documento	Descargar	Detalles
Brochure BSG Institute		Disponible Para todos
Brochure		Disponible Para todos los programas / No colocaron la URL del{" "} brochure en el Programa General
Cronograma de Alumnos		Disponible programas Presencial y Online sincrónico / No actualizaron el cronograma de alumnos.
Requisitos programas online		Disponible programas Online sincrónico.
Pagare 1 (Word)		Disponible programas Presencial Perú, Colombia y Bolivia
Pagare 2 (Excel)		Disponible programas Online asincrónico-sincrónico Extranjero
Convenio de capacitación y/o formación (Firma o grabacion contrato de voz)		Disponible programa{" "} Presencial Perú y Colombia, Extranjero Online sincrónico-asincrónico , se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado.
Condiciones y Características del servicio de capacitación (grabación contrato de voz)		Disponible para programas{" "} Perú y Colombia Online sincrónico-asincrónico se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado.
Sílabos del Programa		Disponible para todos los programas / Programa nuevo, pendiente sílabo
Contrato Uso de Datos		Disponible programa{" "} Presencial, Online sincrónico-asincrónico de alumnos de México, es posible descargar y se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado, deben tener los datos reales generados del cliente.
Lineamientos de Condiciones		Disponible programa{" "} Presencial, Online sincrónico-asincrónico de alumnos de México, es posible descargar y se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado, deben tener los datos reales generados del cliente.
Convenio de Prestacion de Servicios		Disponible programa{" "} Presencial, Online sincrónico-asincrónico de alumnos de México o Chile , es posible descargar y se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado, deben tener los datos reales generados del cliente.
Cronograma de Alumnos (Todos los Grupos)		Disponible programas Presencial y Online sincrónico / No actualizaron el cronograma de alumnos.

{/* 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/tabs/formas-pago-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, CreditCard, Building, Wallet, MapPin, Globe, Link } from "lucide-react" export default function FormasPagoTab() { const [activeTab, setActiveTab] = useState<"peru" | "mexico" | "colombia" | "internacional">("peru") const [expandedSections, setExpandedSections] = useState({ // Perú tarjeta: true, transferencia: false, billeteras: false, oficina: false, // México tarjetaMx: true, transferenciaMx: false, ligaPagoMx: false, // Colombia transferenciaCo: true, tarjetaCo: false, ligaPagoCo: false, // Internacional transferenciaInt: true, }) const toggleSection = (section: keyof typeof expandedSections) => { setExpandedSections((prev) => ({ ...prev, [section]: !prev[section], })) } return (

{/* Pestañas de navegación */}

{/* Contenido de las pestañas */}

{activeTab === "peru" && (

{/* 1. Pago por Tarjeta */}

{expandedSections.tarjeta && (

Visa, Mastercard, Amex, Diners a través de nuestra página web:{" "} https://bsginstitute.com/

)}

{/* 2. Pago mediante transferencia interbancaria */}

{expandedSections.transferencia && (

Datos de la empresa

Razón social: BS Grupo SAC
Razón Comercial: BSG INSTITUTE
RUC: 20454870591
Dirección: Pasaje Romaña-Calle 2 Nro 107 Urb. León XIII Arequipa-Arequipa-Cayma

Cuenta Corriente en Soles - Banco de Crédito del Perú

Número de cuenta: 215-1863341-0-42*
Código de cuenta interbancario (CCI):{" "} 002-215-001863341042-20

Cuenta Corriente en Dólares - Banco de Crédito del Perú

Número de cuenta: 215-1870934-1-48*
Código de cuenta interbancario (CCI):{" "} 002-215-001870934148-23

* A través de la generación de código BCP, para gestionar el pago por Banca Web y Móvil

Cuenta Corriente en Soles - Banco BBVA Continental

Número de cuenta: 0011-0220-01-00131737
Código de cuenta interbancario (CCI): 011 220 000100131737 17

Cuenta Corriente en Soles - Banco Scotiabank

Número de cuenta: 000-4654102
Código de cuenta interbancario (CCI):{" "} 009-313-000004654102-85

* Considerar que al costo indicado en el cronograma de pagos se debe incluir las comisiones bancarias por transferencia.

* Número de cuenta autorizada solo para transferencias de empresas, no está habilitado para depósitos en ventanilla.

)}

{/* 3. Pago mediante billeteras y aplicaciones digitales */}

{expandedSections.billeteras && (

Yape

Número asociado a la empresa: 992651774
Operaciones: los alumnos pueden pagar hasta S/500 soles al día

Izipay y Niubiz

Se solicita la generación de un enlace de pago
Se aceptan pagos de tarjetas Visa, MasterCard, Dinners Club y Amex

)}

{/* 4. Pago realizado en oficina */}

{expandedSections.oficina && (

Se puede acercar a las sedes de Arequipa y Lima para realizar el pago por:

• POS VISA: Soles y Dólares
• POS MASTERCARD: Soles y Dólares
• Efectivo

)}

)} {activeTab === "mexico" && (

{/* 1. Pagos aceptados con Tarjeta */}

{expandedSections.tarjetaMx && (

Visa, Mastercard, American Express y Carnet (Débito y Crédito) a través de nuestra página web:{" "} https://bsginstitute.com/

)}

{/* 2. Pagos mediante Depósitos Bancarios y Transferencia por SPEI */}

{expandedSections.transferenciaMx && (

Datos de la empresa

Razón Social: BSG Institute México S.A. de C.V.
Razón Comercial: BSG Institute
RFC: BIM210209H26
Dirección: Montecito No. 38, Piso 33, Of. 4.
Edificio: World Trade Center – WTC
Colonia Nápoles
Ciudad de México

Cuenta Corriente - BBVA Bancomer

Número de Cuenta Pesos Mexicanos: 0116490468
Número de Cuenta CLABE Interbancaria: 012180001164904687
Número de Cuenta Dólares Americanos: 0116490522
Número de Cuenta Dólares: 012180001164905220

Cuenta Corriente - Banorte

Número de Cuenta Pesos Mexicanos: 1185992526
Número de Cuenta CLABE Interbancaria: 072180011859925260
Número de Cuenta Dólares Americanos: 1193560126
Número de Cuenta Dólares: 072180011935601262

* El pago podría estar sujeto al cobro de comisiones del banco emisor, por favor verificar previamente.

)}

{/* 3. Liga (Enlace) de Pago */}

{expandedSections.ligaPagoMx && (

Deberá solicitar a su Asesor el envío de la liga de pago por correo electrónico, una vez recibido lo conduce a una página web para completar el pago.

)}

)} {activeTab === "colombia" && (

{/* 1. Para transferencias Nacionales Colombia */}

{expandedSections.transferenciaCo && (

Datos de la empresa

Razón Social: BS GRUPO COLOMBIA SAS
NIT: 900776296-8
Dirección: Av. Carrera 45 Nro 108-27 – Torre 1 Oficina 1002 – Bogotá

Cuenta de Ahorro en Pesos - Bancolombia

Número de Cuenta: 65231918412

* Considerar que al costo indicado en el cronograma de pagos se debe incluir las comisiones bancarias por transferencia.

* Para depósitos por sucursal añadir el número de convenio: 56470.

)}

{/* 2. Pago por Tarjeta */}

{expandedSections.tarjetaCo && (

Visa, Mastercard, Amex, Pse a través de nuestra página web:{" "} https://bsginstitute.com/

)}

{/* 3. Liga (Enlace) de Pago */}

{expandedSections.ligaPagoCo && (

Deberá solicitar a su Asesor el envío de la liga de pago por correo electrónico, una vez recibido lo conduce a una página web para completar el pago.

)}

)} {activeTab === "internacional" && (

{/* 1. Pago mediante una transferencia bancaria Internacional */}

{expandedSections.transferenciaInt && (

Los datos para que realice esta transferencia son los siguientes:

Datos de la empresa

Razón Social: BSG Institute S.A.C
RUC: 20454870591
Address: Pasaje Romaña-Calle 2 Nro 107 Urb. León XIII Arequipa-Arequipa-Cayma

Datos del banco

Bank: Banco de Crédito del Perú
Address: Street San Juan de Dios 123, Arequipa, Perú
Swift Code: BCPLPEPL
Account Number USD$: 215-1870934-1-48

* Considerar que al costo indicado en el cronograma de pagos se debe incluir las comisiones bancarias por transferencia.

)}

Información Importante

• Todos los pagos son procesados en la moneda local del país seleccionado
• Las facturas se emiten una vez confirmado el pago
• Para pagos corporativos, contacte con nuestro departamento financiero

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-components/tabs/tarifarios-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" export default function TarifariosTab() { const [isExpanded, setIsExpanded] = useState(true) const [activeTab, setActiveTab] = useState("peru") const tarifasData = [ { id: 1, concepto: "Costos Gestión de Cobranza", descripcion: "Aplica cuando se realicen cualquiera de las siguientes formas de cobranza de una cuota con más de 5 días de vencimiento: llamadas telefónica, visitas, envió de cartas notariales u otros.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, { id: 2, concepto: "Emisión de duplicado de certificado de estudios BSG Institute.", descripcion: "Cuando el alumno solicita una segunda copia del certificado de estudios emitido por BSG Insitute.", montos: { PEN: "50.00", USD: "17.00", MXN: "340.00", COP: "62,900.00", }, }, { id: 3, concepto: "Emisión de duplicado de certificado de estudios partner.", descripcion: "Cuando el alumno solicita una segunda copia del certificado de estudios emitido por el partner.", montos: { PEN: "100.00", USD: "33.00", MXN: "660.00", COP: "125,800.00", }, }, { id: 4, concepto: "Calificación de trabajos fuera de plazo.", descripcion: "Cuando se haya superado el plazo para calificación y requiera una revisión en fecha posterior a la establecida.", montos: { PEN: "50.00", USD: "17.00", MXN: "340.00", COP: "62,900.00", }, }, { id: 5, concepto: "Constancias de No Adeudo", descripcion: "Cuando solicita una constancia que no tiene ninguna deuda pendiente con la institución.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, { id: 6, concepto: "Traslado de Beneficios", descripcion: "Cuando solicita el traslado de sus pagos a un tercero para que continúe con el beneficio en el mismo u otro programa.", montos: { PEN: "100.00", USD: "33.00", MXN: "660.00", COP: "125,800.00", }, }, { id: 7, concepto: "Período de gracia de cuotas", descripcion: "Cuando solicita un período de gracia por motivos académicos, viajes y otros que considere la institución.", montos: { PEN: "100.00", USD: "33.00", MXN: "660.00", COP: "125,800.00", }, }, { id: 8, concepto: "Retiro de Programa", descripcion: "Cuando solicita una devolución fuera del plazo establecido en la política de devoluciones y antes del inicio del programa por viaje, traslado laboral, salud u otro motivo.", montos: { PEN: "25.00 %", USD: "25.00 %", MXN: "25.00 %", COP: "25.00 %", }, }, { id: 9, concepto: "Reincorporación al curso o programa", descripcion: "Cuando abandonó el curso o programa sin aviso y solicita su reincorporación luego de un período mayor a 6 meses. El monto a pagar le da acceso durante 3 meses adicionales al programa para poder concluirlo.", montos: { PEN: "10.00 %", USD: "10.00 %", MXN: "10.00 %", COP: "10.00 %", }, }, { id: 10, concepto: "Emisión de Constancia de Matrícula", descripcion: "Se solicita durante la capacitación, certifica que el alumno tiene una matrícula vigente en un programa de BSG Institute detallando la fecha de inicio y fin con la duración total del programa.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, { id: 11, concepto: "Constancia de Avance", descripcion: "Se solicita durante la capacitación, contiene el avance a la fecha de solicitud en cuanto a notas y asistencia si aplicase.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, { id: 12, concepto: "Constancia de Nota / Calificación", descripcion: "Se solicita después de terminar la capacitación, contiene el detalle de las notas obtenidas en la capacitación.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, { id: 13, concepto: "Constancia de Participación", descripcion: "Se solicita después de terminar la capacitación, certifica que el alumno ha participado en un módulo (Curso) de BSG Institute detallando la fecha de inicio y fin con la duración total del programa.", montos: { PEN: "30.00", USD: "10.00", MXN: "200.00", COP: "37,740.00", }, }, ] const getCurrentCurrencyData = () => { const currencyMap = { peru: "PEN", mexico: "MXN", colombia: "COP", internacional: "USD", } return currencyMap[activeTab] } return (

{/* Pestañas de navegación */}

{isExpanded && (

{tarifasData.map((tarifa, index) => ( ))}

N°	Concepto	Descripción	Monto ( {activeTab === "peru" ? "PEN" : activeTab === "mexico" ? "MXN" : activeTab === "colombia" ? "COP" : "USD"} )
{tarifa.id}	{tarifa.concepto}	{tarifa.descripcion}	{tarifa.montos[getCurrentCurrencyData()]}

)}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-content.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" interface TabContentProps { tab: string } const TabContent: React.FC = ({ tab }) => { switch (tab) { case "contact-info": return (

Información de Contacto

Aquí se mostrará la información de contacto.

) case "interaction-history": return (

Historial de Interacciones

Aquí se mostrará el historial de interacciones.

) case "program-info": return default: return (

Contenido no encontrado

No hay contenido para esta pestaña.

) } } type ProgramInfoTabContentProps = {} const ProgramInfoTabContent: React.FC = () => { const [programType, setProgramType] = useState("") const [area, setArea] = useState("") const [programInfo, setProgramInfo] = useState("") const [activeSubTab, setActiveSubTab] = useState("modalities") const handleProgramTypeChange = (event: React.ChangeEvent) => { setProgramType(event.target.value) } const handleAreaChange = (event: React.ChangeEvent) => { setArea(event.target.value) } const handleProgramInfoChange = (event: React.ChangeEvent) => { setProgramInfo(event.target.value) } const handleSubTabClick = (subTab: string) => { setActiveSubTab(subTab) } return (

Información del Programa

Tipo de programa:

Área:

Información del programa:

{activeSubTab === "modalities" && (

Modalidades

Sincrónica

Descripción de la modalidad sincrónica.

Asincrónica

Descripción de la modalidad asincrónica.

)} {activeSubTab === "investment" && (

Inversión

Información sobre la inversión del programa.

)} {activeSubTab === "benefits" && (

Beneficios

Información sobre los beneficios del programa.

)} {activeSubTab === "presentation" && (

Presentación

Información sobre la presentación del programa.

)} {activeSubTab === "objectives" && (

Objetivos

Información sobre los objetivos del programa.

)} {activeSubTab === "curricularStructure" && (

Estructura Curricular

Información sobre la estructura curricular del programa.

)} {activeSubTab === "certification" && (

Certificación

Información sobre la certificación del programa.

)} {activeSubTab === "targetAudience" && (

Público Objetivo

Información sobre el público objetivo del programa.

)} {activeSubTab === "speakers" && (

Expositores

Información sobre los expositores del programa.

)} {activeSubTab === "prerequisites" && (

Prerrequisitos

Información sobre los prerrequisitos del programa.

)}

Próximas fechas de inicio

Aquí se mostrarán las próximas fechas de inicio del programa.

) } export default TabContent [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/tab-registry.tsx" isMerged="true" export default function TabRegistry() { return [ { id: "speech", label: "Speech", criticality: "high", }, { id: "clientInfo", label: "Información del cliente", criticality: "high", }, { id: "paymentManagement", label: "Gestión de pagos", criticality: "medium", }, { id: "programInfo", label: "Información del programa", criticality: "medium", }, { id: "academicPortal", label: "Portal académico", criticality: "low", }, { id: "documentation", label: "Documentación", criticality: "low", }, { id: "enrolledCourses", label: "Cursos matriculados", criticality: "low", }, ] } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/components/top-action-buttons.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { MdEmail, MdSchool } from "react-icons/md" import { ConfirmationDialog } from "@/components/confirmation-dialog" interface TopActionButtonsProps { sendWhatsappAccess?: () => void sendEmailAccess?: () => void sendEmailConditions?: () => void accessVirtualClassroom?: () => void } const TopActionButtons: React.FC = ({ sendWhatsappAccess = () => console.log("sendWhatsappAccess not implemented"), sendEmailAccess = () => console.log("sendEmailAccess not implemented"), sendEmailConditions = () => console.log("sendEmailConditions not implemented"), accessVirtualClassroom = () => console.log("accessVirtualClassroom not implemented"), }) => { const [dialogState, setDialogState] = useState<{ isOpen: boolean title: string message: string onConfirm: () => void }>({ isOpen: false, title: "", message: "", onConfirm: () => {}, }) const openDialog = (title: string, message: string, onConfirm: () => void) => { setDialogState({ isOpen: true, title, message, onConfirm, }) } const closeDialog = () => { setDialogState((prev) => ({ ...prev, isOpen: false })) } const handleConfirm = () => { dialogState.onConfirm() closeDialog() } return ( <>

) } export default TopActionButtons [V0_FILE]typescript:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/data/clients-data.ts" isMerged="true" export interface ClientData { id: string name: string course: string program: string location: string currentPhase: string hasVoiceAgreement?: boolean additionalEnrollments?: number discount?: { percentage: number code: string } } const clientsData: ClientData[] = [ { id: "1", name: "Jorge Armando Lopez Pulido", course: "Cod. Matricula: 10117142A23266", program: "Curso Oficial de Preparación para el Examen Project Management Professional (PMP)® ONLINE 2023 V CDMEXICO", location: "Perú - Lima", currentPhase: "", hasVoiceAgreement: true, additionalEnrollments: 2, }, { id: "2", name: "Ana María Gutiérrez", course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE", program: "D SIG ONLINE 2025 II LIMA", location: "Perú - Lima", currentPhase: "IP", hasVoiceAgreement: false, additionalEnrollments: 0, discount: { percentage: 15, code: "BSGDESCUENTO15", }, }, { id: "3", name: "Roberto Sánchez", course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE", program: "LEAN SSSB AONLINE 2025 I BOGOTA", location: "Colombia - Bogotá", currentPhase: "IP", hasVoiceAgreement: true, additionalEnrollments: 1, }, { id: "4", name: "Patricia Flores", course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE", program: "D SIG ONLINE 2025 II LIMA", location: "Perú - Lima", currentPhase: "IP", hasVoiceAgreement: false, additionalEnrollments: 0, discount: { percentage: 20, code: "BSGDESCUENTO20", }, }, ] export function getClientById(id: string): ClientData | undefined { return clientsData.find((client) => client.id === id) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/layout.tsx" isMerged="true" import type React from "react" import { SolucionSolicitudProvider } from "../../../../../../contexts/solucion-solicitud-context" import SolucionSolicitudModal from "../../../../../../components/solucion-solicitud-modal" export default function ContactoEntranteLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/contacto-entrante/[id]/page.tsx" isMerged="true" import { EmailModalProvider } from "@/contexts/email-modal-context" import ClientInfo from "./client-info" import { ComentarioProvider } from "@/contexts/comentario-context" export default function ClientPage({ params }: { params: { id: string } }) { return (

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/layout.tsx" isMerged="true" import type React from "react" import { AgendaAtencionClienteLayoutClient } from "./AgendaAtencionClienteLayoutClient" import "./agenda-atencion-cliente.css" export default function AgendaAtencionClienteLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return {children} } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/mensajes-recibidos/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/mensajes-recibidos/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Search, PlayCircle, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, RefreshCw } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { AgendaAtencionClienteTabs } from "@/components/agenda-atencion-cliente-tabs" import { AgendaContentContainer, AgendaTableContainer } from "@/components/agenda-container" // Función para formatear la hora en formato AM/PM const formatTimeToAMPM = (time: string): string => { const [hours, minutes] = time.split(":").map(Number) const period = hours >= 12 ? "PM" : "AM" const formattedHours = hours % 12 || 12 // Convierte 0 a 12 para el mediodía/medianoche return `${formattedHours}:${minutes.toString().padStart(2, "0")} ${period}` } export default function MensajesRecibidosPage() { const router = useRouter() const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState("10") const [pageInputValue, setPageInputValue] = useState("1") // Datos de ejemplo const totalItems = 22 const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage)) // Calcular el rango de elementos mostrados const startItem = (currentPage - 1) * Number.parseInt(itemsPerPage) + 1 const endItem = Math.min(currentPage * Number.parseInt(itemsPerPage), totalItems) // Manejadores de eventos const handlePageChange = (page: number) => { if (page < 1 || page > totalPages) return setCurrentPage(page) setPageInputValue(page.toString()) } const handlePageInputChange = (e: React.ChangeEvent) => { setPageInputValue(e.target.value) } const handlePageInputBlur = () => { const page = Number.parseInt(pageInputValue) if (!isNaN(page) && page >= 1 && page <= totalPages) { setCurrentPage(page) } else { setPageInputValue(currentPage.toString()) } } const handleItemsPerPageChange = (value: string) => { setItemsPerPage(value) setCurrentPage(1) setPageInputValue("1") } // Función para manejar el clic en el botón Ejecutar const handleExecute = (contactId: string) => { router.push(`/atencion-cliente/gestion/agenda/contacto-entrante/${contactId}`) } return ( {/* Espacio reducido antes de AgendaTabs */}

{/* Espacio reducido después de las pestañas y antes del título */}

Mensajes Recibidos

{/* Contacto 1 */} {/* Contacto 2 */} {/* Contacto 3 */} {/* Contacto 4 */}

Actividad	Centro de Costo	Contacto	Fecha de Seguimiento
Llamada de seguimiento	Regular Carlos Mendoza LEAN SSSB ONLINE 2024 II LIMA Subestado: Pago al día	Correos Solicita información sobre costos y modalidades disponibles	17/04/2025 {formatTimeToAMPM("14:30")}
Llamada de seguimiento	Regular Ana María Gutiérrez D SIG ONLINE 2025 II LIMA Subestado: Seguimiento Académico	Portal Web Interesada en conocer fechas de inicio y requisitos de admisión	17/04/2025 {formatTimeToAMPM("11:45")}
Llamada de seguimiento	Regular Roberto Sánchez LEAN SSSB AONLINE 2025 I BOGOTA Subestado: Pago atrasado	WhatsApp Pregunta por descuentos corporativos para grupo de 5 personas	16/04/2025 {formatTimeToAMPM("18:20")}
Llamada de seguimiento	Regular Patricia Flores D SIG ONLINE 2025 II LIMA Subestado: Seguimiento Académico	Seguimiento de WhatsApp Respuesta a campaña de email, solicita reunión con asesor académico	15/04/2025 {formatTimeToAMPM("09:00")}

{/* Componente de paginación */}

Página e.key === "Enter" && handlePageInputBlur()} className="w-12 h-8 text-center" /> de {totalPages}

ítems por página

{startItem} - {endItem} de {totalItems} ítems

{/* Añadir un espacio adicional al final */}

) } [V0_FILE]typescriptreact:file="app/atencion-cliente/gestion/agenda/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { useRouter, usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { Search, PlayCircle, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, RefreshCw, MessageSquare, Calendar, Gift, } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { AgendaContainer, AgendaContentContainer, AgendaTableContainer } from "@/components/agenda-container" import ChatInterfaceAtencionCliente from "@/components/chat-interface-atencion-cliente" import "./agenda-atencion-cliente.css" // Definir tipos para las categorías de perfil type ProfileCategory = "excellent" | "very-good" | "good" interface ProfileCategoryInfo { value: ProfileCategory label: string color: string } // Definir la estructura de las pestañas de navegación interface NavTab { name: string path: string count: number color: "blue" | "green" | "amber" | "gray" | "purple" | "red" | "orange" } // Función para formatear la hora en formato AM/PM const formatTimeToAMPM = (time: string): string => { const [hours, minutes] = time.split(":").map(Number) const period = hours >= 12 ? "PM" : "AM" const formattedHours = hours % 12 || 12 // Convierte 0 a 12 para el mediodía/medianoche return `${formattedHours}:${minutes.toString().padStart(2, "0")} ${period}` } export default function AgendaAtencionClientePage() { // Update the title to be dynamic based on the current path const router = useRouter() const pathname = usePathname() const [activeTab, setActiveTab] = useState("/mensajes-recibidos") const [currentTabSection, setCurrentTabSection] = useState(0) const [canScrollLeft, setCanScrollLeft] = useState(true) // Always start as true const [canScrollRight, setCanScrollRight] = useState(true) // Always start as true // Definir todas las pestañas de navegación const navTabs: NavTab[] = [ { name: "Mensajes Recibidos", path: "/mensajes-recibidos", count: 12, color: "blue" }, { name: "Actividades", path: "/actividades", count: 8, color: "green" }, { name: "Asignados y Reasignados", path: "/asignados-reasignados", count: 8, color: "blue" }, { name: "Programación Manual", path: "/programacion-manual", count: 5, color: "blue" }, { name: "Clases Online", path: "/clases-online", count: 7, color: "green" }, { name: "Pagos Atrasados", path: "/pagos-atrasados", count: 15, color: "blue" }, { name: "Pagos Atrasados (Mes Actual-Previo)", path: "/pagos-atrasados-mes", count: 9, color: "blue" }, { name: "Compromisos de Pagos", path: "/compromisos-pagos", count: 6, color: "green" }, { name: "Pre Reporte CR", path: "/pre-reporte-cr", count: 4, color: "blue" }, { name: "Reportado CR", path: "/reportado-cr", count: 3, color: "blue" }, { name: "Pagos del Día", path: "/pagos-dia", count: 11, color: "green" }, { name: "Pago al Día", path: "/pago-dia", count: 18, color: "amber" }, { name: "Seguimiento Académico", path: "/seguimiento-academico", count: 14, color: "purple" }, { name: "Beneficios Pendientes", path: "/beneficios-pendientes", count: 7, color: "orange" }, { name: "Culminados", path: "/culminados", count: 22, color: "green" }, { name: "Certificado", path: "/certificado", count: 16, color: "green" }, { name: "Reservados Sin Deuda", path: "/reservados-sin-deuda", count: 5, color: "blue" }, { name: "Reservado Con Deuda", path: "/reservado-con-deuda", count: 8, color: "red" }, { name: "Retirado", path: "/retirado", count: 12, color: "gray" }, { name: "Por Abandonar", path: "/por-abandonar", count: 9, color: "red" }, { name: "Abandonado", path: "/abandonado", count: 7, color: "red" }, { name: "En Evaluación", path: "/en-evaluacion", count: 4, color: "purple" }, { name: "BICs con Deuda", path: "/bics-con-deuda", count: 6, color: "red" }, { name: "Contestan y Cortan", path: "/contestan-cortan", count: 10, color: "gray" }, { name: "BICs", path: "/bics", count: 8, color: "blue" }, { name: "Solicitudes", path: "/solicitudes", count: 13, color: "blue" }, { name: "Sin Contacto", path: "/sin-contacto", count: 5, color: "gray" }, ] // Enhanced navigation tabs with more options const enhancedNavTabs = [ { name: "Mensajes Recibidos", path: "/mensajes-recibidos", count: 4, icon: , bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Actividades", path: "/actividades", count: 8, icon: , bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Beneficios Pendientes", path: "/beneficios-pendientes", count: 7, icon: , bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Culminados", path: "/culminados", count: 22, icon: ( ), bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Certificado", path: "/certificado", count: 16, icon: ( ), bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Reservados Sin Deuda", path: "/reservados-sin-deuda", count: 5, icon: ( ), bgColor: "bg-blue-100", textColor: "text-blue-600", hoverColor: "bg-blue-200", activeColor: "bg-blue-600", }, { name: "Reservado Con Deuda", path: "/reservado-con-deuda", count: 8, icon: ( ), bgColor: "bg-green-100", textColor: "text-green-600", hoverColor: "bg-green-200", activeColor: "bg-green-600", }, { name: "Retirado", path: "/retirado", count: 12, icon: ( ), bgColor: "bg-green-100", textColor: "text-green-600", hoverColor: "bg-green-200", activeColor: "bg-green-600", }, { name: "Por Abandonar", path: "/por-abandonar", count: 9, icon: ( ), bgColor: "bg-green-100", textColor: "text-green-600", hoverColor: "bg-green-200", activeColor: "bg-green-600", }, { name: "Abandonado", path: "/abandonado", count: 7, icon: ( ), bgColor: "bg-green-100", textColor: "text-green-600", hoverColor: "bg-green-200", activeColor: "bg-green-600", }, { name: "En Evaluación", path: "/en-evaluacion", count: 4, icon: ( ), bgColor: "bg-green-100", textColor: "text-green-600", hoverColor: "bg-green-200", activeColor: "bg-green-600", }, { name: "BICs con Deuda", path: "/bics-con-deuda", count: 6, icon: ( ), bgColor: "bg-yellow-100", textColor: "text-yellow-600", hoverColor: "bg-yellow-200", activeColor: "bg-yellow-600", }, { name: "Contestan y Cortan", path: "/contestan-cortan", count: 10, icon: ( ), bgColor: "bg-yellow-100", textColor: "text-yellow-600", hoverColor: "bg-yellow-200", activeColor: "bg-yellow-600", }, { name: "BICs", path: "/bics", count: 8, icon: ( ), bgColor: "bg-yellow-100", textColor: "text-yellow-600", hoverColor: "bg-yellow-200", activeColor: "bg-yellow-600", }, { name: "Solicitudes", path: "/solicitudes", count: 13, icon: ( ), bgColor: "bg-yellow-100", textColor: "text-yellow-600", hoverColor: "bg-yellow-200", activeColor: "bg-yellow-600", }, { name: "Sin Contacto", path: "/sin-contacto", count: 5, icon: ( ), bgColor: "bg-yellow-100", textColor: "text-yellow-600", hoverColor: "bg-yellow-200", activeColor: "bg-yellow-600", }, ] // Add refs and scroll functions const tabsContainerRef = useRef(null) const scrollTabs = (direction: "left" | "right") => { if (tabsContainerRef.current) { const scrollAmount = 300 // Fixed scroll amount in pixels const newScrollLeft = direction === "left" ? Math.max(0, tabsContainerRef.current.scrollLeft - scrollAmount) : tabsContainerRef.current.scrollLeft + scrollAmount tabsContainerRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth", }) // Update scroll state after scrolling setTimeout(() => { handleTabsScroll() }, 100) } } const handleTabsScroll = () => { if (tabsContainerRef.current) { const { scrollLeft, scrollWidth, clientWidth } = tabsContainerRef.current // Always keep buttons active, just update visual state if needed setCanScrollLeft(scrollLeft > 10) // Small threshold setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10) } } const scrollToSection = (sectionIndex: number) => { if (tabsContainerRef.current) { const containerWidth = tabsContainerRef.current.clientWidth const tabWidth = 140 + 16 // tab width + gap const tabsPerView = Math.floor(containerWidth / tabWidth) const scrollAmount = sectionIndex * (tabsPerView * tabWidth) tabsContainerRef.current.scrollTo({ left: scrollAmount, behavior: "smooth", }) setCurrentTabSection(sectionIndex) } } useEffect(() => { const handleResize = () => { handleTabsScroll() } // Initial check handleTabsScroll() // Add resize listener window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, []) const getPageTitle = () => { // Default title if no match is found let title = "Mensajes Recibidos" // Map path segments to readable titles - updated for main tabs const titleMap: Record = { "/mensajes-recibidos": "Mensajes Recibidos", "/asignados-reasignados": "Asignados y Reasignados", "/pagos-atrasados": "Pagos Atrasados", "/seguimiento-academico": "Seguimiento Académico", "/certificado": "Certificado", "/solicitudes": "Solicitudes", "/culminados": "Culminados", "/programacion-manual": "Programación Manual", "/clases-online": "Clases Online", "/pagos-atrasados-mes": "Pagos Atrasados (Mes Actual-Previo)", "/compromisos-pagos": "Compromisos de Pagos", "/pre-reporte-cr": "Pre Reporte CR", "/reportado-cr": "Reportado CR", "/pagos-dia": "Pagos del Día", "/pago-dia": "Pago al Día", "/beneficios-pendientes": "Beneficios Pendientes", "/reservados-sin-deuda": "Reservados Sin Deuda", "/reservado-con-deuda": "Reservado Con Deuda", "/retirado": "Retirado", "/por-abandonar": "Por Abandonar", "/abandonado": "Abandonado", "/en-evaluacion": "En Evaluación", "/bics-con-deuda": "BICs con Deuda", "/contestan-cortan": "Contestan y Cortan", "/bics": "BICs", "/sin-contacto": "Sin Contacto", "/actividades": "Actividades", } // Use active tab to determine title if (activeTab in titleMap) { title = titleMap[activeTab] } return title } // Get the dynamic title const pageTitle = getPageTitle() const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState("10") const [pageInputValue, setPageInputValue] = useState("1") // Datos de ejemplo const totalItems = 22 const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage)) // Calcular el rango de elementos mostrados const startItem = (currentPage - 1) * Number.parseInt(itemsPerPage) + 1 const endItem = Math.min(currentPage * Number.parseInt(itemsPerPage), totalItems) // Definir las categorías de perfil const profileCategories: Record = { excellent: { value: "excellent", label: "¡Cliente con EXCELENTE Perfil! Insiste y bríndale todo el apoyo para que se matricule", color: "green", }, "very-good": { value: "very-good", label: "¡Cliente con Muy Buen Perfil! No dejes de INSISTIR", color: "yellow", }, good: { value: "good", label: "¡Buen Perfil! Agota las posibilidades de apoyo y define su participación", color: "red", }, } // Asignar aleatoriamente categorías a las filas const rowProfiles: ProfileCategory[] = ["excellent", "very-good", "good", "excellent"] // Manejadores de eventos const handlePageChange = (page: number) => { if (page < 1 || page > totalPages) return setCurrentPage(page) setPageInputValue(page.toString()) } const handlePageInputChange = (e: React.ChangeEvent) => { setPageInputValue(e.target.value) } const handlePageInputBlur = () => { const page = Number.parseInt(pageInputValue) if (!isNaN(page) && page >= 1 && page <= totalPages) { setCurrentPage(page) } else { setPageInputValue(currentPage.toString()) } } const handleItemsPerPageChange = (value: string) => { setItemsPerPage(value) setCurrentPage(1) setPageInputValue("1") } // Función para obtener el color de la categoría const getProfileColor = (category: ProfileCategory): string => { switch (category) { case "excellent": return "bg-green-500" case "very-good": return "bg-yellow-500" case "good": return "bg-red-500" default: return "bg-gray-500" } } // Función para obtener el color del botón según la categoría const getButtonColor = (category: ProfileCategory): string => { switch (category) { case "excellent": return "bg-green-500 text-white hover:bg-green-600" case "very-good": return "bg-yellow-500 text-white hover:bg-yellow-600" case "good": return "bg-red-500 text-white hover:bg-red-600" default: return "bg-gray-500 text-white hover:bg-gray-600" } } // Función para manejar el clic en el botón Ejecutar const handleExecute = (contactId: string) => { router.push(`/atencion-cliente/gestion/agenda/contacto-entrante/${contactId}`) } // Función para renderizar una pestaña de navegación const renderNavTab = (tab: NavTab) => { const isActive = pathname.includes(tab.path) || (tab.path === "/mensajes-recibidos" && pathname === "/atencion-cliente/gestion/agenda") const baseClasses = "inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium leading-none transition-colors h-11 text-center relative group whitespace-nowrap" let colorClasses = "" let textColorClass = "" if (isActive) { switch (tab.color) { case "blue": colorClasses = "bg-blue-600 text-white" textColorClass = "text-blue-600" break case "green": colorClasses = "bg-green-600 text-white" textColorClass = "text-green-600" break case "amber": colorClasses = "bg-amber-500 text-white" textColorClass = "text-amber-600" break case "gray": colorClasses = "bg-gray-600 text-white" textColorClass = "text-gray-600" break case "purple": colorClasses = "bg-purple-600 text-white" textColorClass = "text-purple-600" break case "red": colorClasses = "bg-red-600 text-white" textColorClass = "text-red-600" break case "orange": colorClasses = "bg-orange-500 text-white" textColorClass = "text-orange-600" break default: colorClasses = "bg-blue-600 text-white" } } else { switch (tab.color) { case "blue": colorClasses = "bg-blue-100 text-blue-600 hover:bg-blue-200" textColorClass = "text-blue-600" break case "green": colorClasses = "bg-green-100 text-green-600 hover:bg-green-200" textColorClass = "text-green-600" break case "amber": colorClasses = "bg-amber-100 text-amber-600 hover:bg-amber-200" textColorClass = "text-amber-600" break case "gray": colorClasses = "bg-gray-100 text-gray-600 hover:bg-gray-200" textColorClass = "text-gray-600" break case "purple": colorClasses = "bg-purple-100 text-purple-600 hover:bg-purple-200" textColorClass = "text-purple-600" break case "red": colorClasses = "bg-red-100 text-red-600 hover:bg-red-200" textColorClass = "text-red-600" break case "orange": colorClasses = "bg-orange-100 text-orange-600 hover:bg-orange-200" textColorClass = "text-orange-600" break default: colorClasses = "bg-blue-100 text-blue-600 hover:bg-blue-200" } } return ( {tab.name} {tab.count} {/* Tooltip */}

{tab.name}

{tab.count} elementos

) } const handleTabClick = (tabPath: string, index: number) => { setActiveTab(tabPath) setCurrentTabSection(Math.floor(index / 7)) } const getTabData = () => { switch (activeTab) { case "/mensajes-recibidos": return { data: [ { id: "1", activity: "Llamada de seguimiento", profile: "excellent" as ProfileCategory, center: { type: "Regular", name: "Carlos Mendoza", program: "LEAN SSSB ONLINE 2024 II LIMA", status: "Pago al día", }, contact: { type: "Correos", message: "Solicita información sobre costos y modalidades disponibles" }, date: "17/04/2025", time: "14:30", }, { id: "2", activity: "Llamada de seguimiento", profile: "very-good" as ProfileCategory, center: { type: "Regular", name: "Ana María Gutiérrez", program: "D SIG ONLINE 2025 II LIMA", status: "Seguimiento Academico", }, contact: { type: "Portal Web", message: "Interesada en conocer fechas de inicio y requisitos de admisión", }, date: "17/04/2025", time: "11:45", }, ], } case "/beneficios-pendientes": return { data: [ { id: "3", activity: "Revisión de beneficios", profile: "excellent" as ProfileCategory, center: { type: "Premium", name: "María González", program: "MBA ONLINE 2025 I LIMA", status: "Beneficio pendiente", }, contact: { type: "WhatsApp", message: "Consulta sobre descuentos disponibles" }, date: "18/04/2025", time: "09:30", }, ], } case "/culminados": return { data: [ { id: "4", activity: "Seguimiento post-culminación", profile: "good" as ProfileCategory, center: { type: "Regular", name: "Pedro Ramírez", program: "DIPLOMADO FINANZAS 2024", status: "Culminado", }, contact: { type: "Correos", message: "Solicita certificado de culminación" }, date: "19/04/2025", time: "16:00", }, ], } case "/actividades": return { data: [ { id: "5", alumno: "María González Pérez", detalle: "Solicita cambio de horario de clases debido a conflictos laborales. Necesita horarios vespertinos...", solucion: "Se coordinó cambio a horario vespertino. Se actualizó el sistema académico y se notificó a profesores.", fechaSolucion: "18/04/2025", horaSolucion: "10:00", profile: "excellent" as ProfileCategory, colorIndicator: "red" as const, }, { id: "6", alumno: "Roberto Silva Mendoza", detalle: "Reporta problemas técnicos con la plataforma virtual. No puede acceder a las clases online...", solucion: "Se reseteo su contraseña y se actualizaron los permisos de acceso. Se brindó soporte técnico personalizado.", fechaSolucion: "18/04/2025", horaSolucion: "14:15", profile: "very-good" as ProfileCategory, colorIndicator: "red" as const, }, { id: "7", alumno: "Ana Martínez López", detalle: "Consulta sobre proceso de convalidación de materias previas de otra institución educativa...", solucion: "Se revisó su expediente académico y se aprobó la convalidación de 3 materias. Se actualizó su plan de estudios.", fechaSolucion: "19/04/2025", horaSolucion: "09:30", profile: "good" as ProfileCategory, colorIndicator: "red" as const, }, { id: "8", alumno: "Luis Rodríguez Castro", detalle: "Solicita extensión de plazo para entrega de proyecto final debido a situación familiar...", solucion: "Se aprobó extensión de 2 semanas adicionales. Se coordinó con el profesor para nueva fecha de entrega.", fechaSolucion: "19/04/2025", horaSolucion: "16:00", profile: "excellent" as ProfileCategory, colorIndicator: "red" as const, }, { id: "9", alumno: "Carmen López Torres", detalle: "Requiere certificado de estudios urgente para proceso de visa de trabajo en el extranjero...", solucion: "Se emitió certificado oficial en 24 horas. Se envió por correo certificado y copia digital por email.", fechaSolucion: "20/04/2025", horaSolucion: "11:00", profile: "very-good" as ProfileCategory, colorIndicator: "green" as const, }, { id: "10", alumno: "Pedro Jiménez Vargas", detalle: "Consulta sobre opciones de financiamiento y becas disponibles para continuar estudios...", solucion: "Se le informó sobre 3 opciones de beca disponibles. Se le ayudó a completar solicitudes correspondientes.", fechaSolucion: "20/04/2025", horaSolucion: "15:30", profile: "good" as ProfileCategory, colorIndicator: "green" as const, }, { id: "11", alumno: "Sandra Torres Morales", detalle: "Reporta calificación incorrecta en examen parcial. Solicita revisión del puntaje obtenido...", solucion: "Se revisó el examen con el profesor. Se corrigió la calificación y se actualizó en el sistema académico.", fechaSolucion: "21/04/2025", horaSolucion: "13:00", profile: "excellent" as ProfileCategory, colorIndicator: "green" as const, }, { id: "12", alumno: "Miguel Herrera Ruiz", detalle: "Necesita cambio de modalidad de presencial a virtual por mudanza a otra ciudad...", solucion: "Se aprobó cambio de modalidad. Se transfirió a sede virtual y se actualizaron todos los registros académicos.", fechaSolucion: "21/04/2025", horaSolucion: "17:00", profile: "very-good" as ProfileCategory, colorIndicator: "green" as const, }, ], } default: return { data: [ { id: "default", activity: "Sin datos disponibles", profile: "good" as ProfileCategory, center: { type: "N/A", name: "Sin información", program: "N/A", status: "N/A" }, contact: { type: "N/A", message: "No hay datos para mostrar en esta pestaña" }, date: "N/A", time: "N/A", }, ], } } } const renderTabContent = () => { const tabData = getTabData() return ( {activeTab === "/actividades" && (

Leyenda

Solicitudes derivadas a las asesoras académicas

Solicitudes resueltas

)} {activeTab === "/actividades" ? ( <> ) : ( <> )} {tabData.data.map((item) => ( {activeTab === "/actividades" ? ( <> ) : ( <> )} ))}

Alumno	Detalle	Solución	Fecha Solución	Actividad	Centro de Costo	Contacto	Fecha de Seguimiento
{item.alumno}	{item.detalle}	{item.solucion}	{item.fechaSolucion} {item.horaSolucion !== "N/A" && ( {formatTimeToAMPM(item.horaSolucion)} )} {item.id !== "default" && ( {item.colorIndicator === "green" && ( )} )}	{item.activity}	{item.center.type} {item.center.name} {item.center.program} Subestado: {item.center.status}	{item.contact.type} {item.contact.message}	{item.date} {item.time !== "N/A" && ( {formatTimeToAMPM(item.time)} )} {item.id !== "default" && ( )}

) } return ( <> {/* Enhanced Tabs Navigation with Side Buttons */}

{/* Main tabs container with side navigation */}

{/* Left navigation button */} {/* Scrollable tabs container */}

{/* Enhanced tabs with more options */} {enhancedNavTabs.map((tab, index) => ( ))}

{/* Right navigation button */}

{/* Section indicator and pagination dots */}

{/* Pagination dots */}

{Array.from({ length: Math.ceil(enhancedNavTabs.length / 7) }, (_, index) => (

{/* Título de la página */}

{pageTitle}

{renderTabContent()} {/* Pagination controls */}

Página de {totalPages}

items por página

{startItem} - {endItem} de {totalItems} items

{/* Agregar el componente de chat */} ) } [V0_FILE]typescriptreact:file="app/control-operativo/cambio-fase/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function CambioFasePage() { return (

Cambio de Fase

Cambio de Fase Gestione los cambios de fase en el proceso comercial

Contenido de Cambio de Fase en desarrollo...

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

Control Operativo

Control Operativo Supervise y controle las operaciones de BSG Institute

Contenido de Control Operativo en desarrollo...

) } [V0_FILE]typescriptreact:file="app/correos/bandeja-entrada/[id]/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Avatar } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Star, StarOff, Reply, Forward, Trash2, MoreVertical, Paperclip, Download, Mail, X, Send, } from "lucide-react" import Link from "next/link" import { format } from "date-fns" import { es } from "date-fns/locale" // Datos de ejemplo para un correo específico const emailData = { id: "1", from: { name: "Juan Pérez", email: "juan.perez@bsginstitute.com", }, to: [ { name: "Yesica Palomino", email: "yesica.palomino@bsginstitute.com", }, ], cc: [ { name: "María Rodríguez", email: "maria.rodriguez@bsginstitute.com", }, ], subject: "Actualización de estado de matrícula", body: `Hola Yesica, Te escribo para informarte que el alumno Carlos Mendoza ha completado su proceso de matrícula para el curso de AWS Solutions Architect. Por favor, actualiza su estado en el sistema y asígnale los recursos correspondientes. El estudiante ya ha realizado el pago completo y ha enviado toda la documentación necesaria. También te comento que ha solicitado información adicional sobre los horarios de las sesiones en vivo y el acceso a los materiales de estudio. ¿Podrías proporcionarle esta información? Adjunto encontrarás el comprobante de pago y el formulario de inscripción firmado. Quedo atento a tu confirmación. Saludos cordiales, Juan Pérez Coordinador de Admisiones BSG Institute`, date: new Date("2023-05-21T10:30:00"), read: true, starred: true, hasAttachments: true, attachments: [ { name: "Comprobante_Pago_CarlosMendoza.pdf", size: "1.2 MB", type: "application/pdf", }, { name: "Formulario_Inscripcion_Firmado.pdf", size: "850 KB", type: "application/pdf", }, ], labels: ["Matrícula"], } export default function EmailDetailPage({ params }: { params: { id: string } }) { const [isStarred, setIsStarred] = useState(emailData.starred) const [showDetails, setShowDetails] = useState(false) const [showReply, setShowReply] = useState(false) const handleReply = () => { setShowReply(true) } return (

{emailData.subject}

{emailData.from.name.charAt(0)}

{emailData.from.name} <{emailData.from.email}> {emailData.labels && emailData.labels.map((label) => ( {label} ))}

{format(emailData.date, "d 'de' MMMM 'de' yyyy 'a las' HH:mm", { locale: es })}

Para: {emailData.to.map((recipient) => recipient.name).join(", ")}

{showDetails && (

De: {emailData.from.name} <{emailData.from.email}>

Para: {emailData.to.map((recipient) => `${recipient.name} <${recipient.email}>`).join(", ")}

{emailData.cc && emailData.cc.length > 0 && (

CC: {emailData.cc.map((recipient) => `${recipient.name} <${recipient.email}>`).join(", ")}

)}

Fecha: {format(emailData.date, "d 'de' MMMM 'de' yyyy 'a las' HH:mm", { locale: es })}

Asunto: {emailData.subject}

)}

{emailData.body}

{emailData.hasAttachments && (

Archivos adjuntos ({emailData.attachments.length})

{emailData.attachments.map((attachment, index) => (

{attachment.name}

{attachment.size}

))}

)}

{showReply && (

Responder a: {emailData.subject}

Para:

Asunto:

<div className="flex justify-end gap-2">
                <Button variant="outline" size="sm" onClick={() => setShowReply(false)}>
                  Cancelar
                </Button>
                <Button className="bg-[#1a56db] hover:bg-[#1e429f] text-white" size="sm">
                  <Send className="h-4 w-4 mr-2" />
                  Enviar respuesta
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

<div className="p-4 border-t">
        <Button className="bg-[#1a56db] hover:bg-[#1e429f] text-white" onClick={handleReply}>
          <Reply className="h-4 w-4 mr-2" />
          Responder
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/bandeja-entrada/page.tsx" isMerged="true"
import { EmailList } from "@/components/email-list"

// Datos de ejemplo para la bandeja de entrada
const inboxEmails = [
  {
    id: "1",
    from: {
      name: "Juan Pérez",
      email: "juan.perez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Actualización de estado de matrícula",
    body: "Hola Yesica, te escribo para informarte que el alumno Carlos Mendoza ha completado su proceso de matrícula para el curso de AWS Solutions Architect. Por favor, actualiza su estado en el sistema y asígnale los recursos correspondientes.",
    date: new Date("2023-05-21T10:30:00"),
    read: false,
    starred: true,
    hasAttachments: true,
    labels: ["Matrícula"],
  },
  {
    id: "2",
    from: {
      name: "María Rodríguez",
      email: "maria.rodriguez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Solicitud de información sobre programa de certificación",
    body: "Estimada Yesica, un cliente potencial está interesado en nuestro programa de certificación en Project Management. Necesita información detallada sobre los requisitos, duración y costos. ¿Podrías proporcionarme esta información para compartirla con él?",
    date: new Date("2023-05-20T15:45:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Información"],
  },
  {
    id: "3",
    from: {
      name: "Carlos Gutiérrez",
      email: "carlos.gutierrez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Problema con acceso al portal académico",
    body: "Hola Yesica, varios estudiantes han reportado problemas para acceder al portal académico. Parece ser un problema con la autenticación. ¿Podrías verificar con el equipo técnico y darme una actualización lo antes posible?",
    date: new Date("2023-05-20T09:15:00"),
    read: true,
    starred: true,
    hasAttachments: false,
    labels: ["Urgente", "Soporte"],
  },
  {
    id: "4",
    from: {
      name: "Ana Martínez",
      email: "ana.martinez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Recordatorio: Reunión de equipo mañana",
    body: "Hola a todos, les recuerdo que mañana tenemos nuestra reunión semanal de equipo a las 10:00 AM. Por favor, preparen sus reportes de avance y estén listos para discutir los objetivos de la próxima semana. La reunión será en la sala de conferencias principal.",
    date: new Date("2023-05-19T16:30:00"),
    read: true,
    starred: false,
    hasAttachments: true,
    labels: ["Reunión"],
  },
  {
    id: "5",
    from: {
      name: "Roberto Sánchez",
      email: "roberto.sanchez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Nuevo material de curso disponible",
    body: "Estimados colegas, me complace informarles que hemos actualizado el material del curso de Gestión de Proyectos. Los nuevos recursos incluyen casos de estudio actualizados, ejercicios prácticos adicionales y una guía completa para la certificación PMP. Pueden acceder a estos materiales a través del portal de instructores.",
    date: new Date("2023-05-18T11:20:00"),
    read: false,
    starred: false,
    hasAttachments: true,
    labels: ["Material"],
  },
  {
    id: "6",
    from: {
      name: "Laura Díaz",
      email: "laura.diaz@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Solicitud de cambio de horario",
    body: "Hola Yesica, un estudiante del curso de AWS Solutions Architect ha solicitado un cambio de horario debido a compromisos laborales. ¿Podríamos trasladarlo al grupo de la tarde? Adjunto su solicitud formal para tu revisión.",
    date: new Date("2023-05-17T14:05:00"),
    read: true,
    starred: false,
    hasAttachments: true,
    labels: ["Cambio"],
  },
  {
    id: "7",
    from: {
      name: "Pedro Vargas",
      email: "pedro.vargas@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Feedback sobre nuevo programa",
    body: "Estimada Yesica, hemos recibido comentarios muy positivos sobre nuestro nuevo programa de certificación en Ciberseguridad. Los estudiantes están especialmente satisfechos con el contenido práctico y las sesiones de laboratorio. Te comparto algunos testimonios que podríamos usar para marketing.",
    date: new Date("2023-05-16T09:45:00"),
    read: true,
    starred: true,
    hasAttachments: false,
    labels: ["Feedback"],
  },
  {
    id: "8",
    from: {
      name: "Sofía López",
      email: "sofia.lopez@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Propuesta de colaboración",
    body: "Hola Yesica, una empresa tecnológica local está interesada en establecer una colaboración con nosotros para ofrecer prácticas profesionales a nuestros estudiantes. Creo que esta podría ser una gran oportunidad para fortalecer nuestros programas. ¿Podríamos agendar una reunión para discutir esta propuesta?",
    date: new Date("2023-05-15T13:30:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Colaboración"],
  },
  {
    id: "9",
    from: {
      name: "Miguel Torres",
      email: "miguel.torres@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Actualización de plataforma",
    body: "Estimados usuarios, les informamos que este fin de semana realizaremos una actualización importante de nuestra plataforma educativa. El sistema estará fuera de servicio desde el viernes a las 8:00 PM hasta el domingo a las 6:00 AM. Por favor, planifiquen sus actividades teniendo en cuenta esta interrupción.",
    date: new Date("2023-05-14T10:15:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Sistema"],
  },
  {
    id: "10",
    from: {
      name: "Carmen Ruiz",
      email: "carmen.ruiz@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Invitación a webinar",
    body: "Estimada Yesica, te invitamos a participar como ponente en nuestro próximo webinar sobre 'Tendencias en Educación Tecnológica'. El evento se realizará el próximo 25 de mayo a las 7:00 PM. Tu experiencia y conocimientos serían de gran valor para nuestra audiencia. Por favor, confirma tu disponibilidad.",
    date: new Date("2023-05-13T16:50:00"),
    read: false,
    starred: true,
    hasAttachments: true,
    labels: ["Evento"],
  },
  {
    id: "11",
    from: {
      name: "Javier Morales",
      email: "javier.morales@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Resultados de encuesta de satisfacción",
    body: "Hola Yesica, te comparto los resultados de la última encuesta de satisfacción de estudiantes. En general, los comentarios son positivos, con un NPS de 8.7. Sin embargo, hay algunas áreas de mejora identificadas, especialmente en relación al soporte técnico y la disponibilidad de recursos adicionales.",
    date: new Date("2023-05-12T11:25:00"),
    read: true,
    starred: false,
    hasAttachments: true,
    labels: ["Encuesta"],
  },
  {
    id: "12",
    from: {
      name: "Elena Castro",
      email: "elena.castro@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Solicitud de certificado",
    body: "Estimada Yesica, un estudiante ha completado todos los requisitos del programa de AWS Solutions Architect y está solicitando su certificado. He verificado su expediente y cumple con todos los criterios. ¿Podrías procesar esta solicitud y enviarle su certificado digital?",
    date: new Date("2023-05-11T09:40:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Certificado"],
  },
]

export default function BandejaEntradaPage() {
  return (
    <div className="h-full">
      <h1 className="sr-only">Bandeja de entrada</h1>
      <EmailList emails={inboxEmails} folder="bandeja-entrada" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/borradores/page.tsx" isMerged="true"
import { EmailList } from "@/components/email-list"

// Datos de ejemplo para borradores
const draftEmails = [
  {
    id: "d1",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Equipo de Instructores",
        email: "instructores@bsginstitute.com",
      },
    ],
    subject: "Actualización de políticas de evaluación",
    body: "Estimados instructores, les escribo para informarles sobre las actualizaciones en nuestras políticas de evaluación que entrarán en vigor a partir del próximo mes. Los cambios principales incluyen...",
    date: new Date("2023-05-21T09:30:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Borrador"],
  },
  {
    id: "d2",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Departamento de Marketing",
        email: "marketing@bsginstitute.com",
      },
    ],
    subject: "Propuesta para campaña de promoción",
    body: "Hola equipo de marketing, he estado pensando en algunas ideas para nuestra próxima campaña de promoción. Creo que podríamos enfocarnos en...",
    date: new Date("2023-05-19T14:15:00"),
    read: true,
    starred: false,
    hasAttachments: true,
    labels: ["Borrador"],
  },
  {
    id: "d3",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Carmen Ruiz",
        email: "carmen.ruiz@bsginstitute.com",
      },
    ],
    subject: "Re: Invitación a webinar",
    body: "Estimada Carmen, gracias por la invitación al webinar sobre 'Tendencias en Educación Tecnológica'. Me encantaría participar como ponente. Mi presentación se enfocará en...",
    date: new Date("2023-05-14T10:45:00"),
    read: true,
    starred: true,
    hasAttachments: false,
    labels: ["Borrador", "Evento"],
  },
]

export default function BorradoresPage() {
  return (
    <div className="h-full flex flex-col">
      <h1 className="sr-only">Borradores</h1>
      <div className="flex-1 overflow-hidden">
        <EmailList emails={draftEmails} folder="borradores" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/enviados/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Star, StarOff, Reply, Forward, Trash2, MoreVertical } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"
import { es } from "date-fns/locale"

// Datos de ejemplo para un correo enviado específico
const emailData = {
  id: "s1",
  from: {
    name: "Yesica Palomino",
    email: "yesica.palomino@bsginstitute.com",
  },
  to: [
    {
      name: "Juan Pérez",
      email: "juan.perez@bsginstitute.com",
    },
  ],
  subject: "Re: Actualización de estado de matrícula",
  body: `Hola Juan,

Gracias por la información. He actualizado el estado de Carlos Mendoza en el sistema y le he asignado los recursos correspondientes. Ya puede acceder al portal académico con sus credenciales.

Respecto a su consulta sobre los horarios, las sesiones en vivo se realizarán los martes y jueves de 7:00 PM a 9:00 PM (hora de Lima). Los materiales de estudio ya están disponibles en su portal académico.

Le he enviado un correo con toda esta información y las instrucciones para acceder al sistema.

Cualquier otra consulta, estoy a tu disposición.

Saludos cordiales,
Yesica Palomino
Coordinadora Académica
BSG Institute`,
  date: new Date("2023-05-21T11:15:00"),
  read: true,
  starred: false,
  hasAttachments: false,
  labels: ["Matrícula"],
}

export default function SentEmailDetailPage({ params }: { params: { id: string } }) {
  const [isStarred, setIsStarred] = useState(emailData.starred)
  const [showDetails, setShowDetails] = useState(false)

return (
    <div className="flex flex-col h-full bg-white">
      <div className="flex items-center justify-between p-4 border-b">
        <div className="flex items-center gap-2">
          <Link href="/correos/enviados">
            <Button variant="ghost" size="icon" title="Volver">
              <ArrowLeft className="h-5 w-5" />
            </Button>
          </Link>
          <Button
            variant="ghost"
            size="icon"
            title={isStarred ? "Quitar estrella" : "Destacar"}
            onClick={() => setIsStarred(!isStarred)}
          >
            {isStarred ? <Star className="h-5 w-5 fill-amber-400 text-amber-400" /> : <StarOff className="h-5 w-5" />}
          </Button>
          <Button variant="ghost" size="icon" title="Responder">
            <Reply className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" title="Reenviar">
            <Forward className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" title="Eliminar">
            <Trash2 className="h-5 w-5" />
          </Button>
        </div>
        <Button variant="ghost" size="icon" title="Más opciones">
          <MoreVertical className="h-5 w-5" />
        </Button>
      </div>

<div className="flex-1 overflow-auto p-6">
        <h1 className="text-xl font-bold mb-6">{emailData.subject}</h1>

<div className="flex items-start mb-6">
          <Avatar className="h-10 w-10 mr-4">
            <div className="bg-[#7b3ff7] text-white h-full w-full flex items-center justify-center text-lg font-semibold">
              {emailData.from.name.charAt(0)}
            </div>
          </Avatar>

<div className="flex-1">
            <div className="flex items-center justify-between">
              <div>
                <span className="text-sm font-semibold">{emailData.from.name}</span>
                <span className="text-xs text-gray-500 ml-2"><{emailData.from.email}></span>
                {emailData.labels &&
                  emailData.labels.map((label) => (
                    <Badge key={label} variant="outline" className="ml-2 text-xs">
                      {label}
                    </Badge>
                  ))}
              </div>
              <div className="text-xs text-gray-500">
                {format(emailData.date, "d 'de' MMMM 'de' yyyy 'a las' HH:mm", { locale: es })}
              </div>
            </div>

<div className="flex items-center mt-1">
              <span className="text-xs text-gray-500">
                Para: {emailData.to.map((recipient) => recipient.name).join(", ")}
              </span>
              <Button
                variant="ghost"
                size="sm"
                className="text-xs text-gray-500 h-auto py-0 px-1"
                onClick={() => setShowDetails(!showDetails)}
              >
                {showDetails ? "Ocultar detalles" : "Mostrar detalles"}
              </Button>
            </div>

{showDetails && (
              <div className="mt-2 text-xs text-gray-500">
                <p>
                  De: {emailData.from.name} <{emailData.from.email}>
                </p>
                <p>Para: {emailData.to.map((recipient) => `${recipient.name} <${recipient.email}>`).join(", ")}</p>
                <p>Fecha: {format(emailData.date, "d 'de' MMMM 'de' yyyy 'a las' HH:mm", { locale: es })}</p>
                <p>Asunto: {emailData.subject}</p>
              </div>
            )}
          </div>
        </div>

<div className="whitespace-pre-line text-sm mb-6">{emailData.body}</div>
      </div>

<div className="p-4 border-t">
        <Button className="bg-[#7b3ff7] hover:bg-[#6a30e3] text-white">
          <Forward className="h-4 w-4 mr-2" />
          Reenviar
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/enviados/page.tsx" isMerged="true"
import { EmailList } from "@/components/email-list"

// Datos de ejemplo para correos enviados
const sentEmails = [
  {
    id: "s1",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Juan Pérez",
        email: "juan.perez@bsginstitute.com",
      },
    ],
    subject: "Re: Actualización de estado de matrícula",
    body: "Hola Juan, gracias por la información. He actualizado el estado de Carlos Mendoza en el sistema y le he asignado los recursos correspondientes. Ya puede acceder al portal académico con sus credenciales. Saludos cordiales.",
    date: new Date("2023-05-21T11:15:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Matrícula"],
  },
  {
    id: "s2",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "María Rodríguez",
        email: "maria.rodriguez@bsginstitute.com",
      },
    ],
    subject: "Re: Solicitud de información sobre programa de certificación",
    body: "Estimada María, adjunto encontrarás toda la información solicitada sobre nuestro programa de certificación en Project Management. Incluye requisitos, duración, costos y beneficios. Si el cliente tiene alguna pregunta adicional, no dudes en contactarme. Saludos cordiales.",
    date: new Date("2023-05-20T16:30:00"),
    read: true,
    starred: false,
    hasAttachments: true,
    labels: ["Información"],
  },
  {
    id: "s3",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Carlos Gutiérrez",
        email: "carlos.gutierrez@bsginstitute.com",
      },
    ],
    subject: "Re: Problema con acceso al portal académico",
    body: "Hola Carlos, he verificado con el equipo técnico y efectivamente había un problema con el servidor de autenticación. Ya ha sido resuelto y los estudiantes deberían poder acceder sin inconvenientes. Por favor, pídeles que intenten nuevamente y me informas si persiste algún problema. Saludos.",
    date: new Date("2023-05-20T10:05:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Soporte"],
  },
  {
    id: "s4",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Roberto Sánchez",
        email: "roberto.sanchez@bsginstitute.com",
      },
    ],
    subject: "Re: Nuevo material de curso disponible",
    body: "Estimado Roberto, gracias por actualizar el material del curso de Gestión de Proyectos. He revisado los nuevos recursos y son excelentes. Ya he informado a los instructores sobre esta actualización y les he pedido que lo incorporen en sus próximas sesiones. Saludos cordiales.",
    date: new Date("2023-05-18T13:45:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Material"],
  },
  {
    id: "s5",
    from: {
      name: "Yesica Palomino",
      email: "yesica.palomino@bsginstitute.com",
    },
    to: [
      {
        name: "Laura Díaz",
        email: "laura.diaz@bsginstitute.com",
      },
    ],
    subject: "Re: Solicitud de cambio de horario",
    body: "Hola Laura, he revisado la solicitud del estudiante y apruebo el cambio de horario. Ya he actualizado su registro en el sistema y ahora está asignado al grupo de la tarde. Por favor, notifícale este cambio y asegúrate de que reciba el enlace para las nuevas sesiones. Saludos.",
    date: new Date("2023-05-17T15:20:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: ["Cambio"],
  },
]

export default function EnviadosPage() {
  return (
    <div className="h-full flex flex-col">
      <h1 className="sr-only">Correos enviados</h1>
      <div className="flex-1 overflow-hidden">
        <EmailList emails={sentEmails} folder="enviados" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/layout.tsx" isMerged="true"
import type React from "react"
import { CorreosTopBar } from "@/components/correos-top-bar"

export default function CorreosLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex flex-col h-full">
      <CorreosTopBar />
      <div className="flex-1 overflow-auto">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/nuevo/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Send,
  Paperclip,
  Bold,
  Italic,
  Underline,
  List,
  ListOrdered,
  LinkIcon,
  ImageIcon,
  MoreHorizontal,
  X,
  Save,
} from "lucide-react"
import Link from "next/link"

export default function NuevoCorreoPage() {
  const [to, setTo] = useState("")
  const [cc, setCc] = useState("")
  const [bcc, setBcc] = useState("")
  const [subject, setSubject] = useState("")
  const [body, setBody] = useState("")
  const [showCc, setShowCc] = useState(false)
  const [showBcc, setShowBcc] = useState(false)

const handleSendEmail = (e: React.FormEvent) => {
    e.preventDefault()
    // Aquí iría la lógica para enviar el correo
    console.log({ to, cc, bcc, subject, body })
    // Redirigir a la bandeja de entrada después de enviar
    window.location.href = "/correos/bandeja-entrada"
  }

return (
    <div className="flex flex-col h-full bg-white border rounded-lg shadow-sm">
      <div className="flex items-center justify-between p-4 border-b">
        <h1 className="text-xl font-semibold">Nuevo mensaje</h1>
        <Link href="/correos/bandeja-entrada">
          <Button variant="ghost" size="icon">
            <X className="h-5 w-5" />
          </Button>
        </Link>
      </div>

<form onSubmit={handleSendEmail} className="flex flex-col flex-1">
        <div className="p-4 space-y-4">
          <div className="flex items-center">
            <label htmlFor="to" className="w-16 text-sm font-medium">
              Para:
            </label>
            <Input
              id="to"
              type="text"
              value={to}
              onChange={(e) => setTo(e.target.value)}
              className="flex-1 border-0 shadow-none focus-visible:ring-0"
              placeholder="Destinatarios"
            />
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => {
                setShowCc(!showCc)
                if (!showCc && !showBcc) setShowBcc(true)
              }}
            >
              {showCc ? "- Cc" : "+ Cc"}
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => {
                setShowBcc(!showBcc)
                if (!showBcc && !showCc) setShowCc(true)
              }}
            >
              {showBcc ? "- Cco" : "+ Cco"}
            </Button>
          </div>

{showCc && (
            <div className="flex items-center">
              <label htmlFor="cc" className="w-16 text-sm font-medium">
                Cc:
              </label>
              <Input
                id="cc"
                type="text"
                value={cc}
                onChange={(e) => setCc(e.target.value)}
                className="flex-1 border-0 shadow-none focus-visible:ring-0"
                placeholder="Copia carbón"
              />
            </div>
          )}

{showBcc && (
            <div className="flex items-center">
              <label htmlFor="bcc" className="w-16 text-sm font-medium">
                Cco:
              </label>
              <Input
                id="bcc"
                type="text"
                value={bcc}
                onChange={(e) => setBcc(e.target.value)}
                className="flex-1 border-0 shadow-none focus-visible:ring-0"
                placeholder="Copia carbón oculta"
              />
            </div>
          )}

<div className="flex items-center border-t pt-2">
            <label htmlFor="subject" className="w-16 text-sm font-medium">
              Asunto:
            </label>
            <Input
              id="subject"
              type="text"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              className="flex-1 border-0 shadow-none focus-visible:ring-0"
              placeholder="Asunto del correo"
            />
          </div>
        </div>

<Textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          className="flex-1 resize-none border-0 shadow-none focus-visible:ring-0 p-4"
          placeholder="Escribe tu mensaje aquí..."
        />

<div className="flex items-center justify-between p-4 border-t">
          <div className="flex gap-2">
            <Button type="submit" className="bg-[#7b3ff7] hover:bg-[#6a30e3] text-white">
              <Send className="h-4 w-4 mr-2" />
              Enviar
            </Button>
            <Button type="button" variant="outline">
              <Save className="h-4 w-4 mr-2" />
              Guardar borrador
            </Button>
          </div>

<Button type="button" variant="ghost" title="Adjuntar archivo">
            <Paperclip className="h-5 w-5" />
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/page.tsx" isMerged="true"
import { redirect } from "next/navigation"

export default function CorreosPage() {
  // Redirect to inbox by default
  redirect("/correos/bandeja-entrada")
}
[V0_FILE]typescriptreact:file="app/correos/papelera/page.tsx" isMerged="true"
import { EmailList } from "@/components/email-list"

// Datos de ejemplo para papelera
const trashEmails = [
  {
    id: "t1",
    from: {
      name: "Sistema Automático",
      email: "no-reply@bsginstitute.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Notificación automática: Mantenimiento del sistema",
    body: "Estimado usuario, le informamos que nuestro sistema estará en mantenimiento programado el próximo domingo de 2:00 AM a 5:00 AM. Durante este período, algunos servicios podrían no estar disponibles...",
    date: new Date("2023-05-15T08:30:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: [],
  },
  {
    id: "t2",
    from: {
      name: "Newsletter Educativa",
      email: "newsletter@education-trends.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Boletín semanal: Tendencias en educación - Mayo 2023",
    body: "En esta edición: Las últimas tendencias en educación online, herramientas innovadoras para el aula virtual, entrevistas con expertos en e-learning y mucho más...",
    date: new Date("2023-05-14T10:15:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: [],
  },
  {
    id: "t3",
    from: {
      name: "Recursos Humanos",
      email: "rrhh@bsginstitute.com",
    },
    to: [
      {
        name: "Todos los empleados",
        email: "empleados@bsginstitute.com",
      },
    ],
    subject: "Recordatorio: Actualización de datos personales",
    body: "Estimados colaboradores, les recordamos que deben actualizar sus datos personales en el sistema de recursos humanos antes del 30 de mayo. Esta información es importante para mantener nuestros registros actualizados...",
    date: new Date("2023-05-12T14:45:00"),
    read: true,
    starred: false,
    hasAttachments: false,
    labels: [],
  },
]

export default function PapeleraPage() {
  return (
    <div className="h-full flex flex-col">
      <h1 className="sr-only">Papelera</h1>
      <div className="flex-1 overflow-hidden">
        <EmailList emails={trashEmails} folder="papelera" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/correos/spam/page.tsx" isMerged="true"
import { EmailList } from "@/components/email-list"

// Datos de ejemplo para spam
const spamEmails = [
  {
    id: "sp1",
    from: {
      name: "Promociones Especiales",
      email: "promociones@ofertas-exclusivas.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "¡OFERTA EXCLUSIVA! 80% de descuento en cursos online",
    body: "¡Aprovecha esta oferta por tiempo limitado! Obtén un 80% de descuento en todos nuestros cursos online. Solo por hoy, no dejes pasar esta oportunidad única...",
    date: new Date("2023-05-21T07:15:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Spam"],
  },
  {
    id: "sp2",
    from: {
      name: "Premio Internacional",
      email: "claim-prize@international-lottery.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "¡FELICIDADES! Has ganado 1,000,000 USD en nuestro sorteo",
    body: "Estimado ganador, nos complace informarle que su dirección de correo electrónico ha sido seleccionada como ganadora de nuestro sorteo internacional. Para reclamar su premio de 1,000,000 USD, por favor responda a este correo con sus datos personales...",
    date: new Date("2023-05-20T05:30:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Spam"],
  },
  {
    id: "sp3",
    from: {
      name: "Servicio Técnico",
      email: "support@tech-verification.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "URGENTE: Su cuenta será suspendida en 24 horas",
    body: "Estimado usuario, hemos detectado actividad sospechosa en su cuenta. Para evitar la suspensión, por favor verifique su identidad haciendo clic en el siguiente enlace y proporcionando sus credenciales...",
    date: new Date("2023-05-19T12:45:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Spam"],
  },
  {
    id: "sp4",
    from: {
      name: "Inversiones Seguras",
      email: "invest@secure-opportunity.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Oportunidad de inversión con retorno garantizado del 300%",
    body: "Estimado inversionista, le presentamos una oportunidad única para multiplicar su capital. Nuestro fondo de inversión garantiza un retorno del 300% en solo 3 meses. Invierta ahora y comience a generar ganancias pasivas...",
    date: new Date("2023-05-18T09:20:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Spam"],
  },
  {
    id: "sp5",
    from: {
      name: "Farmacia Online",
      email: "sales@discount-pharmacy.com",
    },
    to: [
      {
        name: "Yesica Palomino",
        email: "yesica.palomino@bsginstitute.com",
      },
    ],
    subject: "Medicamentos a precios increíbles - Envío gratis",
    body: "¡Grandes descuentos en medicamentos! Compre ahora y obtenga envío gratis a cualquier parte del mundo. No necesita receta médica. Garantizamos productos de alta calidad a precios imbatibles...",
    date: new Date("2023-05-17T16:10:00"),
    read: false,
    starred: false,
    hasAttachments: false,
    labels: ["Spam"],
  },
]

export default function SpamPage() {
  return (
    <div className="h-full flex flex-col">
      <h1 className="sr-only">Spam</h1>
      <div className="flex-1 overflow-hidden">
        <EmailList emails={spamEmails} folder="spam" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/AgendaLayoutClient.tsx" isMerged="true"
"use client"

import { usePathname } from "next/navigation"
import type React from "react"
import { AgendaInfoBar } from "@/components/agenda-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 (
    <ComentarioProvider>
      <div className="flex-1 w-full overflow-auto">
        {/* Solo mostrar la barra de información si NO estamos en una página de detalle */}
        {!isClientDetailPage && <AgendaInfoBar />}
        <div className="flex-1 w-full overflow-auto content-container">{children}</div>
      </div>
      <ComentarioActividadButton />
    </ComentarioProvider>
  )
}
[V0_FILE]css:file="app/gestion-comercial/agenda/agenda.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 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]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/client-info.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { getClientById } from "./data/clients-data"
import ClientHeader from "./components/client-header"
import NavigationTabs from "./components/navigation-tabs"
import TabContent from "./components/tab-content"
import ReporteIncidenciaButton from "../../../../../components/reporte-incidencia-button"
import { AgendaContainer } from "@/components/agenda-container"

interface ClientInfoProps {
  id: string
}

export default function ClientInfo({ id }: ClientInfoProps) {
  const router = useRouter()
  const clientData = getClientById(id)

const [activeTab, setActiveTab] = useState("speech")
  const [activeMessageTab, setActiveMessageTab] = useState("whatsapp")
  const [messageInput, setMessageInput] = useState("")

// Actualizar el hash de la URL cuando cambia la pestaña
  const updateTabInUrl = (tab: string) => {
    if (typeof window !== "undefined") {
      window.location.hash = tab
    }
  }

// Inicializar la pestaña activa desde el hash de la URL si existe
  useEffect(() => {
    if (typeof window !== "undefined") {
      const hash = window.location.hash
      if (hash.startsWith("#")) {
        const tabFromHash = hash.substring(1)
        if (tabFromHash) {
          setActiveTab(tabFromHash)
        }
      }
    }
  }, [])

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

// Función para ir al reporte de incidencia
  const goToIncidentReport = () => {
    // Navegar a la sección de reporte de incidencia o cambiar a la pestaña correspondiente
    setActiveTab("speech")
    // Esperar a que cambie la pestaña y luego hacer scroll al elemento
    setTimeout(() => {
      const reporteElement = document.getElementById("reporte-incidencia-section")
      if (reporteElement) {
        reporteElement.scrollIntoView({ behavior: "smooth" })
      }
    }, 100)
  }

const handleBack = () => {
    router.back()
  }

// Si no se encuentra el cliente, mostrar un mensaje y un botón para volver
  if (!clientData) {
    return (
      <AgendaContainer>
        <div className="w-full flex flex-col items-center justify-center">
          <div className="bg-white rounded-lg shadow-md p-6 max-w-md w-full">
            <h2 className="text-xl font-bold text-red-600 mb-4">Cliente no encontrado</h2>
            <p className="text-gray-700 mb-6">
              No se pudo encontrar el cliente con ID: {id}. Es posible que el cliente haya sido eliminado o que el ID
              sea incorrecto.
            </p>
            <button
              onClick={() => router.back()}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors"
            >
              Volver a la agenda
            </button>
          </div>
        </div>
      </AgendaContainer>
    )
  }

return (
    <AgendaContainer withTopPadding={true}>
      <div className="max-w-[1200px] mx-auto">
        {/* Menú de navegación por pestañas */}
        <div className="mb-8">
          <NavigationTabs
            activeTab={activeTab}
            setActiveTab={(tab) => {
              console.log("Setting active tab to:", tab)
              setActiveTab(tab)
              updateTabInUrl(tab)
            }}
          />
        </div>

{/* Información del cliente - SOLO visible en pestaña speech */}
        {activeTab === "speech" && (
          <div className="mb-8">
            <ClientHeader clientData={clientData} onBack={handleBack} />
          </div>
        )}

{/* Contenido de la pestaña activa */}
        <TabContent
          activeTab={activeTab}
          clientData={clientData}
          activeMessageTab={activeMessageTab}
          setActiveMessageTab={setActiveMessageTab}
          messageInput={messageInput}
          handleMessageInputChange={handleMessageInputChange}
        />
      </div>

{/* Botón flotante para ir al reporte de incidencia - solo visible en pestaña speech */}
      {activeTab === "speech" && (
        <div className="z-40">
          <ReporteIncidenciaButton onButtonClick={goToIncidentReport} />
        </div>
      )}
    </AgendaContainer>
  )
}
[V0_FILE]css:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/badge-animation.css" isMerged="true"
.blink-animation {
  animation: attention-pulse 2s infinite;
  position: relative;
  overflow: hidden;
}

@keyframes attention-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Add a subtle shine effect that moves across the badge */
.blink-animation::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shine-effect 2s infinite;
}

@keyframes shine-effect {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/client-header.tsx" isMerged="true"
"use client"

import { ArrowLeft, FileText, Phone, CheckCircle, Calendar, Tag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import type { ClientData } from "../data/clients-data"
import { Badge } from "@/components/ui/badge"
import "./badge-animation.css"

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

export default function ClientHeader({ clientData, onBack }: ClientHeaderProps) {
  return (
    <Card className="border-0 shadow-md overflow-hidden">
      <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">
            {/* Nueva información de categoría de dato */}
            <div className="flex items-center gap-1.5">
              <div className="bg-[#004fff] text-white p-1 rounded-full">
                <Tag className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff]">Categoría de Dato:</span>
              <span className="text-gray-700">Llamada Oficina</span>
            </div>

<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 className="flex items-center gap-1.5">
              <div className="bg-[#004fff] text-white p-1 rounded-full">
                <Phone className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff]">Intentos Marcador:</span>
              <span className="text-gray-700">0</span>
            </div>
          </div>
        </div>

{/* Contenido principal - más compacto */}
        <div className="p-8 bg-gradient-to-r from-white to-[#f9f5ff]">
          {/* Verificar si este componente contiene el menú horizontal */}
          <div className="flex flex-col md:flex-row justify-between items-center gap-3">
            {/* Información del cliente */}
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-4 flex-wrap">
                {/* Etiqueta de Alta - movida antes del nombre */}
                <Badge variant="outline" className="bg-green-50 text-green-600">
                  Alta
                </Badge>
                <h2 className="text-xl font-bold text-[#004fff]">{clientData.name}</h2>

{/* Etiqueta de perfil excelente - versión en línea */}
                <div className="inline-flex items-center ml-2">
                  <div className="bg-green-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 EXCELENTE Perfil! Insiste y bríndale todo el apoyo para que se matricule
                    </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 font-medium">{clientData.course}</p>
                </div>
                <div className="flex items-center gap-2 text-gray-700">
                  <Calendar className="h-4 w-4 text-[#004fff]" />
                  <p className="text-sm">{clientData.program}</p>
                </div>
                {clientData.discount && (
                  <div className="mt-2 flex items-center gap-2">
                    <span className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
                      {clientData.discount.percentage}% de descuento
                    </span>
                    <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
                      {clientData.discount.code}
                    </span>
                  </div>
                )}
              </div>
            </div>

{/* Información de ubicación y fase */}
            <div className="flex flex-col items-end justify-center gap-2 self-center h-full py-4">
              <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>

<div className="flex items-center gap-2 bg-green-500 text-white px-3 py-1.5 rounded-full shadow-sm">
                <div className="bg-white p-1 rounded-full">
                  <CheckCircle className="h-3.5 w-3.5 text-green-500" />
                </div>
                <span className="text-sm font-medium">Fase Actual: {clientData.currentPhase}</span>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/editar-datos-personales/datos-contacto-form.tsx" isMerged="true"
"use client"
import { useState } from "react"
import type React from "react"

import { Phone, Mail, ArrowLeftRight, ChevronDown, User, FileText, MapPin, Building } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function DatosContactoForm() {
  const [formData, setFormData] = useState({
    primerNombre: "Prueba",
    segundoNombre: "",
    apellidoPaterno: "Alvarez",
    apellidoMaterno: "",
    dni: "77137267",
    direccion: "",
    pais: "Perú",
    ciudad: "Arequipa",
    email1: "••••••••••••••••••••",
    email2: "",
    telefono1: "Teléfono 1",
    telefono2: "",
    celular1: "••••••••••",
    celular2: "",
  })

const ciudadesPeru = [
    "Arequipa",
    "Lima",
    "Cusco",
    "Trujillo",
    "Chiclayo",
    "Piura",
    "Iquitos",
    "Huancayo",
    "Tacna",
    "Pucallpa",
    "Chimbote",
    "Juliaca",
  ]

// Función para formatear números de teléfono
  const formatPhoneNumber = (value: string): string => {
    // Eliminar todos los caracteres no numéricos
    const numbers = value.replace(/\D/g, "")

// Si no hay números, devolver string vacío
    if (!numbers) return ""

// Si solo tenemos el prefijo o menos
    if (numbers.length <= 2) return `+${numbers}`

// Asegurarnos que el prefijo sea +51
    let formatted = "+51"

// Formatear el resto de los dígitos en grupos de 3
    const mainNumber = numbers.substring(2)
    for (let i = 0; i < mainNumber.length; i += 3) {
      const chunk = mainNumber.substring(i, i + 3)
      formatted += ` ${chunk}`
    }

return formatted.trim()
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, field: string) => {
    const value = e.target.value

// Aplicar formato especial para campos de teléfono
    if (field === "telefono1" || field === "telefono2" || field === "celular1" || field === "celular2") {
      setFormData((prev) => ({
        ...prev,
        [field]: formatPhoneNumber(value),
      }))
    } else {
      setFormData((prev) => ({
        ...prev,
        [field]: value,
      }))
    }
  }

const swapEmails = () => {
    setFormData((prev) => ({
      ...prev,
      email1: prev.email2,
      email2: prev.email1,
    }))
  }

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

return (
    <form onSubmit={handleSubmit} 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"
                  value={formData.primerNombre}
                  onChange={(e) => handleChange(e, "primerNombre")}
                  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"
                  value={formData.apellidoPaterno}
                  onChange={(e) => handleChange(e, "apellidoPaterno")}
                  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-orange-100 p-1.5 rounded-full flex-shrink-0">
                <FileText className="h-4 w-4 text-orange-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">DNI</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.dni}
                  onChange={(e) => handleChange(e, "dni")}
                  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-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"
                  value={formData.pais}
                  onChange={(e) => handleChange(e, "pais")}
                  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">
                <Phone className="h-4 w-4 text-purple-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono 1</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.telefono1}
                  onChange={(e) => handleChange(e, "telefono1")}
                  placeholder="+51"
                  className="w-full bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                />
              </div>
              <div className="flex h-10">
                <button
                  type="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 rounded-r-md"
                >
                  <Phone className="h-4 w-4" />
                </button>
              </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">Celular 1</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.celular1}
                  onChange={(e) => handleChange(e, "celular1")}
                  placeholder="+51"
                  className="w-full bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                />
              </div>
              <div className="flex h-10">
                <button
                  type="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 rounded-r-md"
                >
                  <Phone className="h-4 w-4" />
                </button>
              </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"
                  value={formData.segundoNombre}
                  onChange={(e) => handleChange(e, "segundoNombre")}
                  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"
                  value={formData.apellidoMaterno}
                  onChange={(e) => handleChange(e, "apellidoMaterno")}
                  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-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"
                  value={formData.direccion}
                  onChange={(e) => handleChange(e, "direccion")}
                  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-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 relative">
                <select
                  value={formData.ciudad}
                  onChange={(e) => handleChange(e, "ciudad")}
                  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 appearance-none"
                >
                  {ciudadesPeru.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>
                <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                  <ChevronDown className="h-4 w-4 text-gray-500" />
                </div>
              </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">
                <Mail className="h-4 w-4 text-blue-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Email 2</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.email2}
                  onChange={(e) => handleChange(e, "email2")}
                  className="w-full bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                />
              </div>
              <div className="flex h-10">
                <button
                  type="button"
                  onClick={swapEmails}
                  className="bg-white border-t border-b border-r border-gray-200 px-2 h-full hover:bg-purple-50 text-purple-500 transition-colors flex items-center justify-center rounded-r-md"
                  title="Intercambiar Email 1 y Email 2"
                >
                  <ArrowLeftRight className="h-4 w-4" />
                </button>
              </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 2</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.telefono2}
                  onChange={(e) => handleChange(e, "telefono2")}
                  placeholder="+51"
                  className="w-full bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                />
              </div>
              <div className="flex h-10">
                <button
                  type="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 rounded-r-md"
                >
                  <Phone className="h-4 w-4" />
                </button>
              </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">Celular 2</span>
            </div>
            <div className="w-[60%] flex items-center">
              <div className="w-3/4">
                <input
                  type="text"
                  value={formData.celular2}
                  onChange={(e) => handleChange(e, "celular2")}
                  placeholder="+51"
                  className="w-full bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
                />
              </div>
              <div className="flex h-10">
                <button
                  type="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 rounded-r-md"
                >
                  <Phone className="h-4 w-4" />
                </button>
              </div>
            </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/gestion-comercial/agenda/contacto-entrante/[id]/components/editar-datos-personales/editar-datos-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import DatosContactoForm from "./datos-contacto-form"
import InformacionAlternativaForm from "./informacion-alternativa-form"
import HistorialModificaciones from "./historial-modificaciones"

export default function EditarDatosContent() {
  const [openSections, setOpenSections] = useState({
    datosContacto: true,
    historialModificaciones: false,
    informacionAlternativa: false,
  })

const toggleSection = (section: string) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section as keyof typeof prev],
    }))
  }

return (
    <div className="space-y-4">
      {/* Datos del Contacto */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <button
          onClick={() => toggleSection("datosContacto")}
          className="w-full flex items-center justify-between p-4 bg-[#e6f0ff] text-[#1a56db] font-medium"
        >
          <div className="flex items-center gap-2">
            <div className="bg-[#1a56db] 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 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
              </svg>
            </div>
            <span className="text-base">Datos del Contacto</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={`transition-transform ${openSections.datosContacto ? "transform rotate-180" : ""}`}
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>

{openSections.datosContacto && (
          <div className="p-4">
            <DatosContactoForm />
          </div>
        )}
      </div>

{/* Historial de Modificaciones - contenido directo */}
      <HistorialModificaciones />

{/* Información alternativa del Contacto */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <button
          onClick={() => toggleSection("informacionAlternativa")}
          className="w-full flex items-center justify-between p-4 bg-[#e6f0ff] text-[#1a56db] font-medium"
        >
          <div className="flex items-center gap-2">
            <div className="bg-[#1a56db] 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
              </svg>
            </div>
            <span className="text-base">Información alternativa del Contacto</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={`transition-transform ${openSections.informacionAlternativa ? "transform rotate-180" : ""}`}
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>

{openSections.informacionAlternativa && (
          <div className="p-4">
            <InformacionAlternativaForm />
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/editar-datos-personales/historial-modificaciones.tsx" isMerged="true"
"use client"

import { useState } from "react"

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

// Datos de ejemplo para el historial de modificaciones
  const modificaciones = [
    {
      campo: "Apellido Materno",
      valorAnterior: "",
      valorNuevo: "Medina",
      fecha: "25/04/2025 18:20",
      usuario: "ypalomino",
    },
    {
      campo: "Ciudad",
      valorAnterior: "",
      valorNuevo: "Lima Y Callao",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Nombre 1",
      valorAnterior: "Ximena",
      valorNuevo: "XIMENA",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Nombre 2",
      valorAnterior: "",
      valorNuevo: "SOPHIA",
      fecha: "21/04/2021 18:45",
      usuario: "mlandeo",
    },
    {
      campo: "Apellido Paterno",
      valorAnterior: "Ruiz",
      valorNuevo: "RUIZ",
      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) => {
    // 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("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",
      }
    }

return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden">
      {/* Cabecera del desplegable */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-4 bg-[#e6f0ff] text-[#1a56db] font-medium"
      >
        <div className="flex items-center gap-2">
          <div className="bg-[#1a56db] 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <span className="text-base">Historial de Modificaciones del Contacto</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={`transition-transform ${isOpen ? "transform rotate-180" : ""}`}
        >
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </button>

{/* Contenido desplegable */}
      {isOpen && (
        <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%]">Usuario</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>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/editar-datos-personales/informacion-alternativa-form.tsx" isMerged="true"
"use client"

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

export default function InformacionAlternativaForm() {
  const [formData, setFormData] = useState({
    nombres: "RUIZ MEDINA XIMENA SOPHIA",
    apellidoPaterno: "",
    apellidoMaterno: "",
    fechaNacimiento: "26-09-1992",
    celular1: "",
    celular2: "",
    direccion: "",
    distrito: "",
    provincia: "",
    departamento: "",
    telefonoFijo1: "",
    telefonoFijo2: "",
    ubigeo: "",
    nombreEmpresa: "",
    cargo: "",
    email: "",
  })

// Si no hay números, devolver string vacío
    if (!numbers) return ""

// Si solo tenemos el prefijo o menos
    if (numbers.length <= 2) return `+${numbers}`

// Asegurarnos que el prefijo sea +51
    let formatted = "+51"

return formatted.trim()
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement>, field: string) => {
    const value = e.target.value

// Aplicar formato especial para campos de teléfono
    if (field === "celular1" || field === "celular2" || field === "telefonoFijo1" || field === "telefonoFijo2") {
      setFormData((prev) => ({
        ...prev,
        [field]: formatPhoneNumber(value),
      }))
    } else {
      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-[30%] 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</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.nombres}
                onChange={(e) => handleChange(e, "nombres")}
                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-[30%] 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">Apellido Paterno</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.apellidoPaterno}
                onChange={(e) => handleChange(e, "apellidoPaterno")}
                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-[30%] 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">Apellido Materno</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.apellidoMaterno}
                onChange={(e) => handleChange(e, "apellidoMaterno")}
                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-[30%] 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-[70%] 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 className="flex items-center mb-4">
            <div className="w-[30%] flex items-center gap-2 pr-2">
              <div className="bg-[#f0e6ff] p-1.5 rounded-full flex-shrink-0">
                <Smartphone className="h-4 w-4 text-[#6419e6]" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Celular 1</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.celular1}
                onChange={(e) => handleChange(e, "celular1")}
                placeholder="+51"
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
              <button
                type="button"
                className="bg-white border-t border-b border-r border-gray-200 px-2 h-10 hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center rounded-r-md"
              >
                <Phone className="h-4 w-4" />
              </button>
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[30%] flex items-center gap-2 pr-2">
              <div className="bg-[#f0e6ff] p-1.5 rounded-full flex-shrink-0">
                <Smartphone className="h-4 w-4 text-[#6419e6]" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Celular 2</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.celular2}
                onChange={(e) => handleChange(e, "celular2")}
                placeholder="+51"
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
              <button
                type="button"
                className="bg-white border-t border-b border-r border-gray-200 px-2 h-10 hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center rounded-r-md"
              >
                <Phone className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>

{/* COLUMNA 2 */}
        <div>
          <div className="flex items-center mb-4">
            <div className="w-[30%] 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-[70%] 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-[30%] 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-[70%] 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-[30%] 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-[70%] 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 className="flex items-center mb-4">
            <div className="w-[30%] 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-[70%] 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-[30%] flex items-center gap-2 pr-2">
              <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                <Phone className="h-4 w-4 text-blue-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono Fijo 1</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.telefonoFijo1}
                onChange={(e) => handleChange(e, "telefonoFijo1")}
                placeholder="+51"
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
              <button
                type="button"
                className="bg-white border-t border-b border-r border-gray-200 px-2 h-10 hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center rounded-r-md"
              >
                <Phone className="h-4 w-4" />
              </button>
            </div>
          </div>

<div className="flex items-center mb-4">
            <div className="w-[30%] flex items-center gap-2 pr-2">
              <div className="bg-blue-100 p-1.5 rounded-full flex-shrink-0">
                <Phone className="h-4 w-4 text-blue-500" />
              </div>
              <span className="text-sm font-medium text-gray-700 leading-tight">Teléfono Fijo 2</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.telefonoFijo2}
                onChange={(e) => handleChange(e, "telefonoFijo2")}
                placeholder="+51"
                className="flex-1 bg-white px-3 py-2 h-10 text-sm rounded-l-md text-gray-800 border border-gray-200 focus:border-[#6419e6] focus:ring-1 focus:ring-[#6419e6] outline-none transition-all"
              />
              <button
                type="button"
                className="bg-white border-t border-b border-r border-gray-200 px-2 h-10 hover:bg-blue-50 text-blue-500 transition-colors flex items-center justify-center rounded-r-md"
              >
                <Phone className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>

{/* COLUMNA 3 */}
        <div>
          <div className="flex items-center mb-4">
            <div className="w-[30%] 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-[70%] 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-[30%] 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">Nombre Empresa</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.nombreEmpresa}
                onChange={(e) => handleChange(e, "nombreEmpresa")}
                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-[30%] 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">Cargo</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.cargo}
                onChange={(e) => handleChange(e, "cargo")}
                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-[30%] 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</span>
            </div>
            <div className="w-[70%] flex items-center">
              <input
                type="text"
                value={formData.email}
                onChange={(e) => handleChange(e, "email")}
                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/gestion-comercial/agenda/contacto-entrante/[id]/components/fase1/client-info-form.tsx" isMerged="true"
"use client"

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

interface ClientInfoFormProps {
  clientData: ClientData
}

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

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

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

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

return formatted
  }

return (
      <div className="flex items-center mb-4">
        {/* Label side */}
        <div className="w-1/4 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="w-3/4 flex items-center">
          <input
            type="text"
            value={displayValue}
            readOnly
            className={`w-64 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>
            )}

<ContactField
                    icon={<Phone className="h-4 w-4 text-gray-500" />}
                    iconBg="bg-gray-100"
                    iconColor="text-gray-500"
                    label="Teléfono 1"
                    value={clientData.contactInfo.phone1}
                    showCopy={true}
                    isPhoneField={true}
                  />

<ContactField
                    icon={<Mail className="h-4 w-4 text-blue-500" />}
                    iconBg="bg-blue-50"
                    iconColor="text-blue-500"
                    label="Email 1"
                    value={clientData.contactInfo.email1}
                    hasMail={true}
                    showCopy={true}
                    isPhoneField={false}
                  />
                </div>

{/* COLUMNA 2 */}
                <div>
                  <ContactField
                    icon={<Phone className="h-4 w-4 text-[#004fff]" />}
                    iconBg="bg-[#e3f2fd]"
                    iconColor="text-[#004fff]"
                    label="Celular 2"
                    value={clientData.contactInfo.mobile2}
                    hasCall={true}
                    hasCheck={true}
                    showCopy={true}
                    isPhoneField={true}
                  />

<ContactField
                    icon={<Phone className="h-4 w-4 text-gray-500" />}
                    iconBg="bg-gray-100"
                    iconColor="text-gray-500"
                    label="Teléfono 2"
                    value={clientData.contactInfo.phone2}
                    showCopy={true}
                    isPhoneField={true}
                  />

<ContactField
                    icon={<Mail className="h-4 w-4 text-gray-500" />}
                    iconBg="bg-gray-100"
                    iconColor="text-gray-500"
                    label="Email 2"
                    value={clientData.contactInfo.email2}
                    showCopy={false}
                    isPhoneField={false}
                  />
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase1/fase1-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import ClientInfoForm from "./client-info-form"
import type { ClientData } from "../../data/clients-data"

interface Fase1ContentProps {
  clientData: ClientData
}

export default function Fase1Content({ clientData }: Fase1ContentProps) {
  const [isOpen, setIsOpen] = useState(true)

return (
    <div className="space-y-4">
      {/* Título de la fase */}
      <div className="w-full text-center py-2">
        <h2 className="text-xl font-bold text-green-600">FASE 1: VALIDACION DE LA SOLICITUD DE INFORMACIÓN</h2>
      </div>

{/* Contenido de la fase */}
      <ClientInfoForm clientData={clientData} />
    </div>
  )
}
[V0_FILE]css:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase1/number-styles.css" isMerged="true"
/* Estilos para los números en los formularios y componentes */
.number-badge,
.step-number,
.form-number,
.counter-badge {
  background-color: #0a5d36 !important;
  color: white !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Estilos para los números en los pasos del formulario */
.form-field-number {
  background-color: #0a5d36 !important;
  color: white !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Estilos para los badges de notificación */
.notification-badge {
  background-color: #0a5d36 !important;
  color: white !important;
  font-weight: 600;
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/fase2-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { User, Target, AlertTriangle, History, ShoppingBag } from "lucide-react"
import Paso21ValidarPerfil from "./paso-2-1-validar-perfil"
import Paso22IdentificarObjetivo from "./paso-2-2-identificar-objetivo"
import Paso23VerificarSemaforo from "./paso-2-3-verificar-semaforo"
import Paso24VerificarHistorial from "./paso-2-4-verificar-historial"
import OportunidadesVentasCruzadas from "./oportunidades-ventas-cruzadas"

export default function Fase2Content() {
  const [activeTab, setActiveTab] = useState("validar-perfil")

return (
    <div className="space-y-6 mt-10">
      <div className="text-center mb-8">
        <h2 className="text-[#1a56db] text-xl font-semibold">FASE 2: VALIDACION DE PERFIL Y FILTRADO DE PROSPECTOS</h2>
      </div>

{/* Tabs Navigation */}
      <div className="border rounded-lg shadow-sm mb-6">
        <div className="w-full grid grid-cols-5 bg-[#e6f0ff] rounded-t-lg divide-x divide-blue-200">
          <button
            onClick={() => setActiveTab("validar-perfil")}
            className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
              activeTab === "validar-perfil"
                ? "bg-blue-600 text-white rounded-t-lg shadow-sm"
                : "bg-blue-100 text-gray-700 hover:bg-white/80"
            }`}
          >
            <div className={`p-2 rounded-full ${activeTab === "validar-perfil" ? "bg-blue-600" : "bg-blue-200"}`}>
              <User className={`h-5 w-5 ${activeTab === "validar-perfil" ? "text-white" : "text-blue-600"}`} />
            </div>
            <div className="mt-2 flex flex-col items-center">
              <span
                className={`text-sm font-medium ${activeTab === "validar-perfil" ? "text-white" : "text-blue-600"}`}
              >
                PASO 2.1
              </span>
              <span
                className={`text-sm font-medium ${activeTab === "validar-perfil" ? "text-white" : "text-blue-600"}`}
              >
                Validar perfil del cliente
              </span>
            </div>
          </button>

<button
            onClick={() => setActiveTab("identificar-objetivo")}
            className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
              activeTab === "identificar-objetivo"
                ? "bg-blue-600 text-white rounded-t-lg shadow-sm"
                : "bg-blue-100 text-gray-700 hover:bg-white/80"
            }`}
          >
            <div className={`p-2 rounded-full ${activeTab === "identificar-objetivo" ? "bg-blue-600" : "bg-blue-200"}`}>
              <Target className={`h-5 w-5 ${activeTab === "identificar-objetivo" ? "text-white" : "text-blue-600"}`} />
            </div>
            <span
              className={`text-sm font-medium ${activeTab === "identificar-objetivo" ? "text-white" : "text-blue-600"}`}
            >
              PASO 2.2
            </span>
            <span
              className={`text-sm font-medium ${activeTab === "identificar-objetivo" ? "text-white" : "text-blue-600"}`}
            >
              Identificar objetivo del cliente
            </span>
          </button>

<button
            onClick={() => setActiveTab("verificar-semaforo")}
            className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
              activeTab === "verificar-semaforo"
                ? "bg-blue-600 text-white rounded-t-lg shadow-sm"
                : "bg-blue-100 text-gray-700 hover:bg-white/80"
            }`}
          >
            <div className={`p-2 rounded-full ${activeTab === "verificar-semaforo" ? "bg-blue-600" : "bg-blue-200"}`}>
              <AlertTriangle
                className={`h-5 w-5 ${activeTab === "verificar-semaforo" ? "text-white" : "text-blue-600"}`}
              />
            </div>
            <span
              className={`text-sm font-medium ${activeTab === "verificar-semaforo" ? "text-white" : "text-blue-600"}`}
            >
              PASO 2.3
            </span>
            <span
              className={`text-sm font-medium ${activeTab === "verificar-semaforo" ? "text-white" : "text-blue-600"}`}
            >
              Verificar semáforo de riesgo
            </span>
          </button>

<button
            onClick={() => setActiveTab("verificar-historial")}
            className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
              activeTab === "verificar-historial"
                ? "bg-green-600 text-white rounded-t-lg shadow-sm"
                : "bg-green-100 text-gray-700 hover:bg-white/80"
            }`}
          >
            <div
              className={`p-2 rounded-full ${activeTab === "verificar-historial" ? "bg-green-600" : "bg-green-200"}`}
            >
              <History className={`h-5 w-5 ${activeTab === "verificar-historial" ? "text-white" : "text-green-600"}`} />
            </div>
            <span
              className={`text-sm font-medium ${activeTab === "verificar-historial" ? "text-white" : "text-green-600"}`}
            >
              PASO 2.4
            </span>
            <span
              className={`text-sm font-medium ${activeTab === "verificar-historial" ? "text-white" : "text-green-600"}`}
            >
              Verificar historial de interacciones
            </span>
          </button>

<button
            onClick={() => setActiveTab("oportunidades")}
            className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
              activeTab === "oportunidades"
                ? "bg-amber-500 text-white rounded-t-lg shadow-sm"
                : "bg-amber-100 text-gray-700 hover:bg-white/80"
            }`}
          >
            <div className={`p-2 rounded-full ${activeTab === "oportunidades" ? "bg-amber-500" : "bg-amber-200"}`}>
              <ShoppingBag className={`h-5 w-5 ${activeTab === "oportunidades" ? "text-white" : "text-amber-600"}`} />
            </div>
            <span className={`text-sm font-medium ${activeTab === "oportunidades" ? "text-white" : "text-amber-600"}`}>
              Oportunidades de
            </span>
            <span className={`text-sm font-medium ${activeTab === "oportunidades" ? "text-white" : "text-amber-600"}`}>
              ventas cruzadas
            </span>
          </button>
        </div>

<div className="bg-white p-4 rounded-b-lg border-t">
          {activeTab === "validar-perfil" && <Paso21ValidarPerfil />}
          {activeTab === "identificar-objetivo" && <Paso22IdentificarObjetivo />}
          {activeTab === "verificar-semaforo" && <Paso23VerificarSemaforo />}
          {activeTab === "verificar-historial" && <Paso24VerificarHistorial />}
          {activeTab === "oportunidades" && <OportunidadesVentasCruzadas />}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/oportunidades-ventas-cruzadas.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ShoppingBag, Check } from "lucide-react"
import { OportunidadVentaCruzadaModal } from "@/components/oportunidad-venta-cruzada-modal"

export default function OportunidadesVentasCruzadas() {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [selectedOportunidad, setSelectedOportunidad] = useState<any>(null)

const oportunidades = [
    {
      programa: "Curso Certificado por CQI e IRCA: Auditor Interno ISO 9001:2015",
      probabilidad: "Muy Alta",
      precio: "2490",
      comision: "25",
    },
    {
      programa: "Curso Interpretación de la Norma ISO 9001:2015",
      probabilidad: "Muy Alta",
      precio: "1490",
      comision: "15",
    },
    {
      programa: "Curso Documentación del Sistema de Gestión de Calidad ISO 9001:2015",
      probabilidad: "Muy Alta",
      precio: "1490",
      comision: "15",
    },
  ]

const handleOpenModal = (oportunidad: any) => {
    setSelectedOportunidad(oportunidad)
    setIsModalOpen(true)
  }

const handleCloseModal = () => {
    setIsModalOpen(false)
  }

return (
    <div className="space-y-6">
      {/* Contenedor principal con cabecera morada */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="flex items-center justify-between p-4 bg-[#e6f0ff] text-[#1a56db] font-medium">
          <div className="flex items-center gap-2">
            <div className="bg-[#1a56db] text-white p-1.5 rounded-full">
              <ShoppingBag className="h-4 w-4" />
            </div>
            <h4 className="font-semibold text-[#1a56db]">
              Curso de Curso Oficial AWS Certified Solutions Architect - Associate
            </h4>
          </div>
          <div className="bg-orange-500 text-white px-3 py-1 rounded-full text-sm">Fase de oportunidad: (IP)</div>
        </div>

<div className="grid grid-cols-12 bg-[#e6f0ff] border-t border-[#e6e9ff]">
          <div className="col-span-6 p-3 font-medium text-[#6419e6] text-xs">PROGRAMA</div>
          <div className="col-span-2 p-3 font-medium text-[#6419e6] text-xs text-center">PRECIO</div>
          <div className="col-span-2 p-3 font-medium text-[#6419e6] text-xs text-center">COMISIÓN</div>
          <div className="col-span-2 p-3 font-medium text-[#6419e6] text-xs text-center">CAMBIAR</div>
        </div>

<div className="divide-y divide-gray-200">
          {oportunidades.map((oportunidad, index) => (
            <div key={index} className={`grid grid-cols-12 ${index % 2 === 1 ? "bg-gray-50" : ""} hover:bg-gray-100`}>
              <div className="col-span-6 p-4 text-sm">
                <div className="flex items-center">
                  <span className="mr-1">{oportunidad.programa}</span>
                  <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-300">
                    <Check className="w-3 h-3 mr-1" />
                    {oportunidad.probabilidad}
                  </span>
                </div>
              </div>
              <div className="col-span-2 p-4">
                <div className="flex flex-col items-center">
                  <div className="text-gray-600 text-sm whitespace-nowrap">Total Contado: PEN {oportunidad.precio}</div>
                </div>
              </div>
              <div className="col-span-2 p-4 text-center text-sm whitespace-nowrap">PEN {oportunidad.comision}</div>
              <div className="col-span-2 p-4">
                <div className="flex justify-center">
                  <button
                    onClick={() => handleOpenModal(oportunidad)}
                    className="bg-green-500 text-white p-1 rounded-full hover:bg-green-600 transition-colors"
                    title="Gestionar oportunidad"
                  >
                    <Check className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Modal de Oportunidad de Venta Cruzada */}
      {selectedOportunidad && (
        <OportunidadVentaCruzadaModal
          isOpen={isModalOpen}
          onClose={handleCloseModal}
          oportunidad={selectedOportunidad}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-1-validar-perfil.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronDown, User, FileText } from "lucide-react"

export default function Paso21ValidarPerfil() {
  const [expandedSection, setExpandedSection] = useState<string | null>("perfil-profesional")

const toggleSection = (section: string) => {
    setExpandedSection(expandedSection === section ? null : section)
  }

return (
    <div className="space-y-6">
      {/* Perfil profesional del cliente */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <button
          onClick={() => toggleSection("perfil-profesional")}
          className="w-full flex items-center justify-between p-4 bg-[#e6f0ff] text-[#1a56db] font-medium"
        >
          <div className="flex items-center gap-2">
            <div className="bg-[#1a56db] text-white p-1.5 rounded-full">
              <User className="h-4 w-4" />
            </div>
            <h4 className="font-semibold text-[#1a56db]">Perfil profesional del cliente</h4>
          </div>
          <ChevronDown
            className={`h-5 w-5 transition-transform duration-200 ${
              expandedSection === "perfil-profesional" ? "transform rotate-180" : ""
            }`}
          />
        </button>

{expandedSection === "perfil-profesional" && (
          <div className="p-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Columna 1 */}
              <div className="space-y-4">
                {/* Área de Formación */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      1
                    </div>
                    <label className="text-sm font-medium text-gray-700">Área de Formación:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value="">Sin Área de formación</option>
                      <option value="ingenieria">Ingeniería</option>
                      <option value="administracion">Administración y Negocios</option>
                      <option value="tecnologia">Tecnología</option>
                      <option value="ciencias">Ciencias</option>
                      <option value="humanidades">Humanidades</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>

{/* Cargo */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      2
                    </div>
                    <label className="text-sm font-medium text-gray-700">Cargo:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value=""><Sin Cargo Registrado></option>
                      <option value="director">Director/a</option>
                      <option value="gerente">Gerente</option>
                      <option value="coordinador">Coordinador/a</option>
                      <option value="analista">Analista</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>

{/* Área de Trabajo */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      3
                    </div>
                    <label className="text-sm font-medium text-gray-700">Área de Trabajo:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value=""><Sin Área Trabajo Registrada></option>
                      <option value="ventas">Ventas</option>
                      <option value="marketing">Marketing</option>
                      <option value="rrhh">Recursos Humanos</option>
                      <option value="finanzas">Finanzas</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>

{/* Industria */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      4
                    </div>
                    <label className="text-sm font-medium text-gray-700">Industria:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value="">Sin industria</option>
                      <option value="tecnologia">Tecnología</option>
                      <option value="finanzas">Finanzas y Banca</option>
                      <option value="salud">Salud</option>
                      <option value="educacion">Educación</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>
              </div>

{/* Columna 2 */}
              <div className="space-y-4">
                {/* Años de experiencia */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      5
                    </div>
                    <label className="text-sm font-medium text-gray-700">Años de experiencia:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value=""><Sin Experiencia Registrada></option>
                      <option value="0-2">0-2 años</option>
                      <option value="3-5">3-5 años</option>
                      <option value="6-10">6-10 años</option>
                      <option value="11-15">11-15 años</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>

{/* Empresa */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      6
                    </div>
                    <label className="text-sm font-medium text-gray-700">Empresa:</label>
                  </div>
                  <div className="flex-1">
                    <div className="relative mb-1">
                      <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                        <option value=""><Sin Empresa Registrada></option>
                        <option value="empresa1">Tecnologías Avanzadas S.A.</option>
                        <option value="empresa2">Grupo Financiero Integra</option>
                        <option value="empresa3">Constructora Moderna</option>
                      </select>
                      <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                        <ChevronDown className="w-4 h-4 text-gray-500" />
                      </div>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-xs text-gray-500 italic">Ingrese mínimo 3 caracteres</span>
                      <button className="bg-[#1a56db] hover:bg-[#1e429f] text-white px-3 py-1 rounded text-sm">
                        Agregar Empresa
                      </button>
                    </div>
                  </div>
                </div>

{/* Tamaño de empresa */}
                <div className="flex items-start">
                  <div className="flex items-center gap-2 min-w-[180px]">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                      7
                    </div>
                    <label className="text-sm font-medium text-gray-700">Tamaño de empresa:</label>
                  </div>
                  <div className="relative flex-1">
                    <select className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 appearance-none pr-8 text-sm">
                      <option value=""><Sin Tamaño de Empresa Registrado></option>
                      <option value="micro">Micro (1-10 empleados)</option>
                      <option value="pequena">Pequeña (11-50 empleados)</option>
                      <option value="mediana">Mediana (51-250 empleados)</option>
                      <option value="grande">Grande (más de 250 empleados)</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Principal responsabilidad profesional - Ancho completo */}
            <div className="mt-6">
              <div className="flex items-start">
                <div className="flex items-center gap-2 min-w-[180px]">
                  <div className="bg-gray-200 p-1.5 rounded-full">
                    <FileText className="h-4 w-4 text-gray-600" />
                  </div>
                  <label className="text-sm font-medium text-gray-700">Principal responsabilidad:</label>
                </div>
                <div className="flex-1">
                  <textarea
                    className="w-full p-2 bg-gray-50 border border-gray-300 rounded text-gray-700 min-h-[80px] text-sm"
                    placeholder="Describa las principales responsabilidades del cliente en su rol profesional"
                  >

)} ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-2-identificar-objetivo.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Circle } from "lucide-react" import { colors } from "../../../../../../../lib/colors" export default function Paso22IdentificarObjetivo() { const [selectedMotivations, setSelectedMotivations] = useState([]) const [expandedArguments, setExpandedArguments] = useState([]) // Efecto para sincronizar automáticamente las motivaciones seleccionadas con los argumentos expandidos useEffect(() => { // Cuando se selecciona una motivación, expandir sus argumentos automáticamente const newExpandedArguments = [...expandedArguments] // Añadir motivaciones seleccionadas que no estén ya expandidas selectedMotivations.forEach((motivation) => { if (!expandedArguments.includes(motivation)) { newExpandedArguments.push(motivation) } }) // Eliminar motivaciones expandidas que ya no están seleccionadas const filteredExpanded = newExpandedArguments.filter((motivation) => selectedMotivations.includes(motivation)) setExpandedArguments(filteredExpanded) }, [selectedMotivations]) const toggleMotivation = (motivation: string) => { if (selectedMotivations.includes(motivation)) { setSelectedMotivations(selectedMotivations.filter((m) => m !== motivation)) // No es necesario actualizar expandedArguments aquí, el useEffect se encargará } else { setSelectedMotivations([...selectedMotivations, motivation]) } } return (

¿Cuáles son los motivos por los que te interesa capacitarte en Curso Oficial AWS Certified Solutions Architect - Associate?

MOTIVACIÓN

{/* Certificarse */}

toggleMotivation("Certificarse")} /> Certificarse

{/* Submenu de argumentos para Certificarse - Con viñetas */} {selectedMotivations.includes("Certificarse") && (

Este curso ha sido diseñado para brindarte todos los conocimientos necesarios para que puedas obtener la Certificación AWS Certified Solutions Architect – Associate emitida por Amazon Web Services.

En la Versión Gerencial el costo del examen de Certificación AWS Certified Solutions Architect – Associate Level está incluido en la inversión del curso (Sujeto a la aprobación del examen).

)}

{/* Aprender */}

toggleMotivation("Aprender")} /> Aprender

{/* Submenu de argumentos para Aprender - Con viñetas */} {selectedMotivations.includes("Aprender") && (

Con nuestro curso podrás:

Adquirir los conocimientos y las habilidades necesarias para la identificación de los servicios de Amazon Web Services en modo teórico/práctico.
Comprender los servicios básicos de Amazon Web Services incluido EC2, VCP, RDS, BD, EBS y Route53.
Adquirir los conocimientos y las habilidades necesarias para el diseño e implementación de infraestructuras en la plataforma AWS, además de la identificación y solución de los problemas presentados en los servicios de AWS en modo teórico/práctico.
Contar con una preparación especializada para rendir el examen AWS Certified Solutions Architect - Associate.

)}

{/* Superación personal */}

toggleMotivation("Superación")} /> Superación personal y mejorar su calidad de vida

{/* Submenu de argumentos para Superación - Con viñetas */} {selectedMotivations.includes("Superación") && (

La certificación AWS puede mejorar significativamente tus oportunidades laborales y nivel de ingresos, contribuyendo a una mejor calidad de vida.

)}

{/* Desarrollo profesional */}

toggleMotivation("Desarrollo")} /> Desarrollo profesional

{/* Submenu de argumentos para Desarrollo - Con viñetas */} {selectedMotivations.includes("Desarrollo") && (

La certificación AWS es reconocida globalmente y demuestra tu competencia en tecnologías cloud, abriendo puertas a nuevas oportunidades profesionales.

)}

{/* Aplicar */}

toggleMotivation("Aplicar")} /> Aplicar

{/* Submenu de argumentos para Aplicar - Con viñetas */} {selectedMotivations.includes("Aplicar") && (

Este curso te brinda conocimientos prácticos que podrás aplicar inmediatamente en tu trabajo o proyectos personales.

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-3-verificar-semaforo.tsx" isMerged="true" "use client" import { useState } from "react" import { Check, Search, CreditCard, DollarSign, Award, User, ChevronDown, ChevronUp } from "lucide-react" import { HistorialCrediticioModal } from "../../../../../../../components/historial-crediticio-modal" export default function Paso23VerificarSemaforo() { 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/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-4-verificar-historial.tsx" isMerged="true" "use client" import { Check } from "lucide-react" export default function Paso24VerificarHistorial() { return (

Programa	Fecha Solicitud	Asesor
IP → IP Curso Oficial AWS Certified Solutions Architect - Associate Muy Alta	10/03/2025	ASESOR 12 ASESOR

items per page

1 - 1 of 1 items

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/aspectos-diferenciadores.tsx" isMerged="true" "use client" export default function AspectosDiferenciadores() { return (

{/* Diferenciador 1 */}

AWS Training Partner

BSG Institute es AWS TRAINING PARTNER (ATP), esto significa que AWS nos ha seleccionado sobre la base de nuestra calidad y experiencia para ofrecer formación creada por AWS.

{/* Diferenciador 2 */}

Simulador de examen

El valor del curso incluye el acceso al simulador en español BSG AWS - CSA Tento® con 195 preguntas del examen de certificación AWS Certified Solutions Architect – Associate.

{/* Diferenciador 3 */}

Laboratorios oficiales

El valor del curso incluye acceso al laboratorio oficial de Architecting on AWS y al laboratorio oficial Technical Essentials.

{/* Diferenciador 4 */}

Voucher de certificación

El valor del curso incluye el voucher del examen para la certificación AWS Certified Solutions Architect - Associate emitida por Amazon Web Services.

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/certificacion.tsx" isMerged="true" "use client" import { CheckCircle } from "lucide-react" export default function Certificacion() { return (

Los participantes que completen exitosamente el curso, recibirán la siguiente certificación:

Certificación Oficial de AWS de participación en el curso. (**)
Certificación AWS Certified Solutions Architect – Associate emitida por Amazon Web Services. (*)
Certificación emitida por BSG Institute.

(*) Incluido solo en la versión gerencial. Sujeto a la aprobación del examen correspondiente.

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/convenio-voz.tsx" isMerged="true" "use client" import { useState } from "react" export default function ConvenioVoz() { const [showFullText, setShowFullText] = useState(false) return (

Saludar adecuadamente al cliente

Buenos días/tardes/noches Prueba Alvarez Te saluda ASESOR 12 ASESOR de BSG Institute. Te llamo para grabar el convenio de voz para formalizar tu participación en nuestro programa Curso Oficial AWS Certified Solutions Architect - Associate.

Siendo las 18:10 horas del 28 de Abril del 2025 se le informa que esta llamada está siendo grabada y la misma no va a tomar más de 5 minutos en ser completada con la finalidad de realizar el contrato de voz, que de acuerdo a ley tiene el mismo valor legal que un contrato firmado y por lo tanto respalda la inversión que usted está realizando.

A continuación, necesito me confirme algunos datos personales para validar su identidad plenamente. Con voz fuerte y lo más clara posible por favor responda:

¿Cuáles son sus nombres y apellidos completos?
¿Cuál es el número de su documento de identidad?
¿Cuál es su fecha de nacimiento?
¿Cuál es su dirección?
¿En que distrito y Ciudad?
¿Cuál es su número de celular?
¿Confirma Ud. que su correo electrónico es: PruebaAlvarez@gmail.com?

{!showFullText ? ( ) : ( <>

POR FAVOR CONTESTE CLARAMENTE LAS SIGUIENTES PREGUNTAS:

1. ¿Sabe Ud. que BSG Institute es una persona jurídica de derecho privado dedicada a brindar diversos servicios de capacitación y formación y que, en este caso en particular, la formación prestada por BSG Institute no otorga ninguna certificación oficial regida por el Ministerio de Educación del Perú u organismo similar?

Conteste por favor SI ES CONFORME: SI ES CONFORME

2. ¿Confirma Ud. que ha revisado y analizado la información acerca de las características condiciones y costos del programa de capacitación denominado Curso Oficial AWS Certified Solutions Architect - Associate que BSG Institute le ha enviado a su correo electrónico con el asunto "BSG Institute - CONDICIONES Y CARACTERISTICAS Curso Oficial AWS Certified Solutions Architect - Associate"; con fecha Fecha de envio no registrada y que Ud. conoce que también puede revisar información adicional en nuestra página web: bsginstitute.com?.

Conteste por favor SI ES CORRECTO: SI ES CORRECTO

3. El objeto del presente contrato verbal de venta a distancia es la prestación del servicio de capacitación del Curso Oficial AWS Certified Solutions Architect - Associate conforme a las condiciones y características del servicio que Ud. declara conocer y aceptar en todos sus puntos y que le fueron enviados a su correo electrónico conforme a su repuesta anterior.

Por favor Diga fuerte y claro ESTOY CONFORME CON LAS CONDICIONES Y CARACTERISTICAS: ESTOY CONFORME CON LAS CONDICIONES Y CARACTERISTICAS

4. Conforme a su respuesta anterior, y con su aceptación verbal expresa, queda entonces Ud. matriculado en el programa de capacitación denominado Curso Oficial AWS Certified Solutions Architect - Associate comprometiéndose a llevarlo hasta su culminación, siendo 2 Meses a partir del inicio del programa y que en caso de incluir contenidos virtuales podrá visualizarlos hasta 1 mes después de terminado el programa de capacitación. En caso de solicitar retiro, este será únicamente académico, no exime de las responsabilidades económicas contraídas.

Por favor conteste SI ESTOY CONFORME: SI ESTOY CONFORME

5. Sobre la forma de pago Ud. declara y acepta que el precio del programa de capacitación asciende a la suma total de: que Ud. Pagará de acuerdo al cronograma de pagos enviado a a su correo electrónico que usted declara conocer y aprobar:

Por favor conteste SI ESTOY CONFORME: SI ESTOY CONFORME

y que en caso de incumplimiento generará el pago de intereses moratorios conforme a lo señalado en el correo electrónico enviado y que se le podría reportar a una central de riesgo, así mismo que podrían aplicar tasas de gestión administrativa, las mismas que están publicadas en nuestro sitio web www.bsginstitute.com/TarifasdeGestion que Ud. se compromete a verificar en su debida oportunidad.

Por favor conteste SI ACEPTO: SI ACEPTO

Con esto hemos finalizado la grabación del contrato, le agradezco por el tiempo brindado.

Que tenga un buen día. Hasta luego.

Caso 1: Se grabó el convenio en la llamada:

Dar la bienvenida al programa/curso al alumno, indicarle que en un plazo máximo de 48 horas nuestra área de atención al cliente se pondrá en contacto con él para que pueda iniciar su participación en el programa/curso.

Caso 2: No se pudo grabar el convenio en la llamada:

Resaltar la importancia del envío del convenio por parte del cliente para que su participación en el programa/curso este completamente formalizada.

Agendar la llamada de grabación de convenio de voz para más tarde durante el día o para mañana a primera hora.

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/demostracion-valor.tsx" isMerged="true" "use client" import { ExternalLink, Star } from "lucide-react" export default function DemostracionValor() { return (

La certificación AWS Certified Solutions Architect - Associate representa una inversión en tu futuro profesional, con beneficios tangibles y medibles:

{/* Incremento salarial */}

Incremento
salarial

Enfatizar al participante

Los participantes del curso pueden obtener incrementos salariales significativos, con un promedio de 15%-25% según Skillsoft.

Verificar información

{/* Acceso a posiciones de liderazgo */}

Acceso a posiciones
de liderazgo

Enfatizar al participante

La certificación Certified Solutions Architect - Associate emitida por AWS, es reconocida globalmente como la cuarta certificación mejor pagada según Skill Soft.

Verificar información

{/* Mejora de la marca personal */}

Mejora de la
marca personal

Enfatizar al participante

La certificación Certified Solutions Architect - Associate emitida por AWS proporciona un reconocimiento formal que mejora la credibilidad y el valor de los profesionales en el mercado.

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/estructura-curricular.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" export default function EstructuraCurricular() { const [openAccordion, setOpenAccordion] = useState("aws-technical") const toggleAccordion = (id: string) => { setOpenAccordion(openAccordion === id ? "" : id) } const awsTechnicalContent = [ "Introduction to Amazon Web Services", "AWS Compute", "AWS Networking", "AWS Storage", "Databases", "Monitoring, Optimization, and Serverless", ] const awsSolutionsContent = [ "Architecting Fundamentals", "Account Security", "Security policies", "Networking 1", "Compute", "Storage", "Data migration tools", "Database Services", "Monitoring and Scaling", "Auto scaling", "Automation", "Microservices", "Containers", "Networking 2", "Serverless services", "Serverless", "Edge Services", "Backup and Recovery", ] // Función para dividir un array en dos columnas const splitIntoColumns = (items: string[]) => { const midpoint = Math.ceil(items.length / 2) return [items.slice(0, midpoint), items.slice(midpoint)] } const [awsTechnicalCol1, awsTechnicalCol2] = splitIntoColumns(awsTechnicalContent) const [awsSolutionsCol1, awsSolutionsCol2] = splitIntoColumns(awsSolutionsContent) return (

{/* AWS Technical Essentials Accordion */}

{openAccordion === "aws-technical" && (

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsTechnicalCol1.length + index + 1}

{item}

)}

{/* AWS Solutions Architect Accordion */}

{openAccordion === "aws-solutions" && (

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsSolutionsCol1.length + index + 1}

{item}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/fase3-content.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Shield, Target, BookOpen, Award, Layout, TrendingUp, CheckSquare, AlertTriangle, Zap, DollarSign, Search, XCircle, } from "lucide-react" import RefuerzoConfianza from "./refuerzo-confianza" import ObjetivosPrograma from "./objetivos-programa" import EstructuraCurricular from "./estructura-curricular" import Certificacion from "./certificacion" import Modalidades from "./modalidades" import DemostracionValor from "./demostracion-valor" import GarantiaPrograma from "./garantia-programa" import Limitaciones from "./limitaciones" import AspectosDiferenciadores from "./aspectos-diferenciadores" import Precio from "./precio" export default function Fase3Content() { const [activeTab, setActiveTab] = useState("refuerzo-confianza") const [selectedProgram, setSelectedProgram] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") const [searchTerm, setSearchTerm] = useState("") const [isOpen, setIsOpen] = 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", "PROGRAMA DE DESARROLLO MÓVIL CON REACT NATIVE", "DIPLOMADO EN BIG DATA Y BUSINESS INTELLIGENCE", "CURSO DE SEGURIDAD INFORMÁTICA", "CERTIFICACIÓN EN REDES CISCO", "PROGRAMA ESPECIALIZADO EN INTERNET DE LAS COSAS (IOT)", "CURSO DE DESARROLLO DE VIDEOJUEGOS", "DIPLOMADO EN TRANSFORMACIÓN DIGITAL", "CERTIFICACIÓN EN LINUX ADMINISTRATION", "CURSO DE ROBÓTICA Y AUTOMATIZACIÓN", ] // Filtrar programas basados en el término de búsqueda const filteredPrograms = searchTerm ? availablePrograms.filter((program) => program.toLowerCase().includes(searchTerm.toLowerCase())) : availablePrograms // Actualizar el término de búsqueda cuando se selecciona un programa useEffect(() => { setSearchTerm(selectedProgram) }, [selectedProgram]) // 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 } 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 determinar el color de fondo y texto según la pestaña const getTabStyles = (tabId) => { // Pestañas azules const blueTabs = [ "refuerzo-confianza", "objetivos-programa", "estructura-curricular", "certificacion", "modalidades", "precio", ] // Pestañas verdes const greenTabs = ["garantia-programa", "aspectos-diferenciadores", "demostracion-valor"] // Pestañas amarillas const yellowTabs = ["limitaciones"] if (blueTabs.includes(tabId)) { return { active: "bg-blue-600 text-white", inactive: "bg-blue-100 text-blue-600 hover:bg-blue-200", iconColor: "text-blue-600", } } else if (greenTabs.includes(tabId)) { return { active: "bg-green-600 text-white", inactive: "bg-green-100 text-green-600 hover:bg-green-200", iconColor: "text-green-600", } } else if (yellowTabs.includes(tabId)) { return { active: "bg-amber-500 text-white", inactive: "bg-amber-100 text-amber-600 hover:bg-amber-200", iconColor: "text-amber-600", } } // Default (should not reach here) return { active: "bg-purple-600 text-white", inactive: "bg-purple-100 text-purple-600 hover:bg-purple-200", iconColor: "text-purple-600", } } // Función para determinar las clases de borde redondeado según la posición const getTabRoundedClasses = (index, totalTabs) => { if (index === 0) { return "rounded-tl-lg" } else if (index === totalTabs - 1) { return "rounded-tr-lg" } return "" } // Array de pestañas para facilitar el renderizado const tabs = [ { id: "refuerzo-confianza", label: "Refuerzo de\nla confianza", icon: Shield }, { id: "objetivos-programa", label: "Objetivos del\nprograma", icon: Target }, { id: "estructura-curricular", label: "Estructura\ncurricular", icon: BookOpen }, { id: "certificacion", label: "Certificación", icon: Award }, { id: "modalidades", label: "Modalidades", icon: Layout }, { id: "precio", label: "Precio", icon: DollarSign }, { id: "garantia-programa", label: "Garantía de\nprograma", icon: CheckSquare }, { id: "demostracion-valor", label: "Demostración\nde valor", icon: TrendingUp }, { id: "aspectos-diferenciadores", label: "Aspectos\ndiferenciadores", icon: Zap }, { id: "limitaciones", label: "Limitaciones", icon: AlertTriangle }, ] return (

FASE 3: PRESENTACIÓN DE LA PROPUESTA DE VALOR

{/* Program Selector with Search */}

{isOpen && (

{filteredPrograms.length > 0 ? ( filteredPrograms.map((program) => ( )) ) : (

No se encontraron programas

)}

{/* Tabs Navigation */}

{tabs.map((tab, index) => { const TabIcon = tab.icon const styles = getTabStyles(tab.id) const roundedClasses = getTabRoundedClasses(index, tabs.length) return ( ) })}

{activeTab === "refuerzo-confianza" && } {activeTab === "objetivos-programa" && } {activeTab === "estructura-curricular" && } {activeTab === "certificacion" && } {activeTab === "modalidades" && } {activeTab === "demostracion-valor" && } {activeTab === "garantia-programa" && } {activeTab === "limitaciones" && } {activeTab === "aspectos-diferenciadores" && } {activeTab === "precio" && }

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/fase3-tabs.tsx" isMerged="true" "use client" import { useState } from "react" import RefuerzoConfianza from "./refuerzo-confianza" import ObjetivosPrograma from "./objetivos-programa" import EstructuraCurricular from "./estructura-curricular" import Certificacion from "./certificacion" import Modalidades from "./modalidades" import DemostracionValor from "./demostracion-valor" import GarantiaPrograma from "./garantia-programa" import AspectosDiferenciadores from "./aspectos-diferenciadores" import Limitaciones from "./limitaciones" import Precio from "./precio" import { Shield, Target, BookOpen, Award, Video, TrendingUp, CheckCircle, AlertTriangle, Zap, DollarSign, } from "lucide-react" export default function Fase3Tabs() { const [activeTab, setActiveTab] = useState("refuerzo-confianza") // Define tabs with their criticality const tabs = [ { id: "refuerzo-confianza", label: "Refuerzo de la confianza", icon: , criticality: "blue", component: , order: 1, }, { id: "objetivos-programa", label: "Objetivos del programa", icon: , criticality: "blue", component: , order: 2, }, { id: "estructura-curricular", label: "Estructura curricular", icon: , criticality: "blue", component: , order: 3, }, { id: "certificacion", label: "Certificación", icon: , criticality: "blue", component: , order: 4, }, { id: "modalidades", label: "Modalidades", icon:

Actividad	Oportunidad	Comentario Anterior	Fecha Programada
Llamada de contacto inicial	Alta Perez Montiel, Julio D SIG AONLINE 2025 II LIMA Fase: BNC Categoría: Mailing Bases Propias Chat	Sin Comentario	17/04/2025 {formatTimeToAMPM("14:30")}
Llamada de contacto inicial	Alta Chumbile Cerda, Edith D SIG ONLINE 2025 III LIMA Fase: BNC Categoría: Whatsapp Chat Bases Propias	Asignacion Manual	17/04/2025 {formatTimeToAMPM("11:45")}

Actividad	Oportunidad	Días S/C Mañana	Días S/C Tarde	Comentario Anterior	Fecha Programada
Llamada de Confirmación de Revisión de Información	Alta Valverde Rafael D SIG ONLINE 2025 II LIMA Fase: IT Categoría: Facebook Formulario Facebook 5 Campos	0 (0)	0 (0)	Indica q se le envio la info	24/04/2025 {formatTimeToAMPM("9:00")}
Llamada de Confirmación de Revisión de Información	Alta Lopez Lia Janeth D SIG AONLINE 2025 II LIMA Fase: IT	0 (0)	0 (0)	en la empresa donde labor	24/04/2025 {formatTimeToAMPM("9:30")}

Actividad	Oportunidad	Comentario Anterior	Fecha Programada
llamada de grabación de contrato de voz	Muy Alta Benancio Chinchay, Jose Luis PI SST AONLINE 2020 I LIMA Fase: M Categoría: Facebook Remarketing Formulario Facebook		22/04/2020 14:37
llamada de grabación de contrato de voz	Muy Alta Dávila Marín, Diana Lucía LEAN SSBB AONLINE 2020 I LIMA Fase: M Categoría: Facebook Formulario Propio		22/04/2020 15:10
llamada de grabación de contrato de voz	Muy Alta Jaramillo Ospino, Jhon Jairo D SIG AONLINE 2020 I BOGOTA Fase: M Categoría: Facebook Formulario Propio		22/04/2020 20:33
llamada de grabación de contrato de voz	Muy Alta Ballesteros Ruiz, Kelsy D SIG AONLINE 2020 I BOGOTA Fase: M Categoría: Facebook Formulario Propio	se hizo la grabacion	28/04/2020 14:12
llamada de grabación de contrato de voz	Muy Alta Salazar franco, Wilbert Fernando D SIG AONLINE 2020 I LIMA Fase: IS Categoría: Facebook Formulario Facebook 5 Campos		30/04/2020 19:00

Actividad	Oportunidad	Días S/C (Act. Hoy) Mañana	Días S/C (Act. Hoy) Tarde	Comentario Anterior	Fecha Programada
Llamada de Cierre	Alta Sarango Chamba, Fredy FF ISO 9001 AONLINE 2025 I LIMA Fase: IP Categoría: Organico Offline Chat	0 (0)	1 (0)	nc	24/04/2025 09:36
Llamada de Cierre	Alta Santos Condor, Miguel Angel D SIG ONLINE 2025 III LIMA Fase: IP Categoría: Adwords Busqueda Formulario Propio	2 (0)	2 (0)	PROG. AUTOMATICA - MA...	24/04/2025 09:48
Llamada de Cierre	Alta Molano, Henry LEAN SSSB AONLINE 2025 I BOGOTA Fase: IP Categoría: Whatsapp Chat Bases Propias	2 (0)	2 (0)	nc	24/04/2025 11:26
Llamada de Cierre	Alta Arzapalo Tarique, Gissella Alicia D SIG ONLINE 2025 III LIMA Fase: IP Categoría: Whatsapp Chat Bases Propias	0 (0)	0 (0)	ocupado llamarla mañana...	24/04/2025 12:00
Llamada de Cierre	Alta Paricahua Zapana, Yhon Alex D SIG ONLINE 2025 III LIMA Fase: IP Categoría: Whatsapp Chat Bases Propias	0 (0)	0 (0)	quiere abrirse campo para...	24/04/2025 13:00

Flujo	Categoria	Estado	Global	Cursos
Confirmacion de Sesion Asegurar confirmacion 24h antes	Ejecucion de Curso	En ejecución	toggleFlujoGlobal(1)} className="rounded border-gray-300 text-[#6419e6] h-5 w-5 cursor-pointer" />	{!flujoGlobalState[1] ? ( {flujoCursosSelection[1].length > 0 && ( {flujoCursosSelection[1].map(cursoId => { const curso = cursosDisponibles.find(c => c.id === cursoId) return curso ? ( {curso.nombre} ) : null })} )} ) : ( - )}
Recordatorio Subida Notas Recordar subir notas post-sesion	Ejecucion de Curso	En ejecución	toggleFlujoGlobal(2)} className="rounded border-gray-300 text-[#6419e6] h-5 w-5 cursor-pointer" />	{!flujoGlobalState[2] ? ( {flujoCursosSelection[2].length > 0 && ( {flujoCursosSelection[2].map(cursoId => { const curso = cursosDisponibles.find(c => c.id === cursoId) return curso ? ( {curso.nombre} ) : null })} )} ) : ( - )}
Reporte Semanal Envio cada lunes 9am	General	INACTIVO	toggleFlujoGlobal(3)} className="rounded border-gray-300 text-[#6419e6] h-5 w-5 cursor-pointer" />	{!flujoGlobalState[3] ? ( {flujoCursosSelection[3].length > 0 && ( {flujoCursosSelection[3].map(cursoId => { const curso = cursosDisponibles.find(c => c.id === cursoId) return curso ? ( {curso.nombre} ) : null })} )} ) : ( - )}
Envio Material Didactico 7 dias antes sesion inicial	Ejecucion de Curso	En ejecución	toggleFlujoGlobal(4)} className="rounded border-gray-300 text-[#6419e6] h-5 w-5 cursor-pointer" />	{!flujoGlobalState[4] ? ( {flujoCursosSelection[4].length > 0 && ( {flujoCursosSelection[4].map(cursoId => { const curso = cursosDisponibles.find(c => c.id === cursoId) return curso ? ( {curso.nombre} ) : null })} )} ) : ( - )}

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}

Confirmar anulación

Modalidad Online Sincrónica (Clases en vivo)

Modalidad Online Asincrónica (Clases grabadas)

Versión Profesional:

Versión Gerencial:

Próximas fechas de inicio

Online Sincrónica

Online Asincrónico

Metodología Online de este Programa

Requisitos técnicos

Para el acceso a las clases

Software necesario

Profesional

Gerencial

Versión Profesional

Versión Gerencial

Curso AWS Technical Essentials

AWS Solutions Architect

{expositor.nombre}

Datos de la empresa

Cuenta Corriente en Soles - Banco de Crédito del Perú

Cuenta Corriente en Dólares - Banco de Crédito del Perú

Cuenta Corriente en Soles - Banco BBVA Continental

Cuenta Corriente en Soles - Banco Scotiabank

Yape

Izipay y Niubiz

Datos de la empresa

Cuenta Corriente - BBVA Bancomer

Cuenta Corriente - Banorte

Datos de la empresa

Cuenta de Ahorro en Pesos - Bancolombia

Datos de la empresa

Datos del banco

Información Importante

Información de Contacto

Historial de Interacciones

Contenido no encontrado

Información del Programa

Modalidades

Sincrónica

Asincrónica

Inversión

Beneficios

Presentación

Incremento
salarial

Acceso a posiciones
de liderazgo

Mejora de la
marca personal