[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [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/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/gestion-comercial/chats/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function ChatsPage() { return (

Chats

Gestión de Chats Administre las conversaciones con clientes potenciales

Contenido de Gestión de Chats en desarrollo...

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

Creación de Oportunidades

Creación de Oportunidades Genere nuevas oportunidades de negocio

Contenido de Creación de Oportunidades en desarrollo...

) } [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/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="components/sales-chart.tsx" isQuickEdit="true" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Ene", actual: 32500, anterior: 28000, }, { name: "Feb", actual: 30000, anterior: 25600, }, { name: "Mar", actual: 27800, anterior: 26400, }, { name: "Abr", actual: 34200, anterior: 29800, }, { name: "May", actual: 39800, anterior: 32500, }, { name: "Jun", actual: 45200, anterior: 37600, }, ] export function SalesChart() { return ( `S/. ${value.toLocaleString()}`} axisLine={false} tickLine={false} style={{ fontSize: "12px" }} width={80} domain={[0, "dataMax + 5000"]} /> [`S/. ${Number(value).toLocaleString()}`, undefined]} labelFormatter={(label) => `Mes: ${label}`} contentStyle={{ borderRadius: "8px", border: "none", boxShadow: "0 4px 20px rgba(0,0,0,0.15)", backgroundColor: "rgba(255, 255, 255, 0.95)", }} /> ) } [V0_FILE]typescriptreact:file="components/contacts-chart.tsx" isQuickEdit="true" isMerged="true" "use client" import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts" const data = [ { name: "Redes Sociales", value: 540 }, { name: "Página Web", value: 320 }, { name: "Referidos", value: 210 }, { name: "Eventos", value: 175 }, ] // Paleta de colores más vibrante const COLORS = [ "hsl(262, 80%, 55%)", // Morado principal vibrante "hsl(210, 100%, 55%)", // Azul brillante "hsl(142, 71%, 45%)", // Verde vibrante "hsl(35, 100%, 60%)", // Naranja brillante ] export function ContactsChart() { return ( `${name} ${(percent * 100).toFixed(0)}%`} labelStyle={{ fontSize: "11px", fill: "#fff", fontWeight: "bold" }} > {data.map((entry, index) => ( ))} [`${value} contactos`, undefined]} contentStyle={{ borderRadius: "8px", border: "none", boxShadow: "0 4px 20px rgba(0,0,0,0.15)", backgroundColor: "rgba(255, 255, 255, 0.95)", }} /> ) } [V0_FILE]typescriptreact:file="components/data-received-chart.tsx" isQuickEdit="true" isMerged="true" "use client" import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = Array.from({ length: 30 }, (_, i) => ({ name: i + 1, cantidad: Math.floor(Math.random() * 50) + 50, })) export function DataReceivedChart() { return ( [`${value} datos`, undefined]} labelFormatter={(label) => `Día ${label}`} contentStyle={{ borderRadius: "8px", border: "none", boxShadow: "0 4px 20px rgba(0,0,0,0.15)", backgroundColor: "rgba(255, 255, 255, 0.95)", }} /> ) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, // Configuración para tratar la sección de Agenda como una aplicación independiente experimental: { appDir: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/not-found.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function NotFound() { return (

404 - Página no encontrada

La página que estás buscando no existe en el sistema de Agenda.

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/prog-automaticas/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/agenda-top-bar.tsx" isQuickEdit="true" isMerged="true" "use client" import { Bell, Search, RefreshCw, Key, User, LogOut } from "lucide-react" import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" export function AgendaTopBar() { return (

Integra CRM

Yesica Palomino

yesica.palomino@bsginstitute.com

Cambiar clave Mi avatar Cerrar sesión

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

Gestión Del Desempeño

Gestión Del Desempeño Administre el desempeño y crecimiento del personal de BSG Institute

Bienvenido al módulo de Gestión Del Desempeño. Utilice el menú lateral para acceder a las diferentes secciones.

) } [V0_FILE]css:file="app/gestion-desempeno/configuracion/gestion-desempeno.css" isMerged="true" /* Estilos específicos para la sección de Gestión del Desempeño */ .gestion-desempeno-container { background-color: #f8faff; width: 100%; padding-bottom: 2rem; } /* Mejoras para la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Estilos modernos para la tabla */ .gestion-desempeno-table { width: 100%; border-collapse: separate; border-spacing: 0; } .gestion-desempeno-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; } .gestion-desempeno-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem; } .gestion-desempeno-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .gestion-desempeno-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="components/gestion-desempeno-sidebar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, AlignJustify, Sliders, Target, ClipboardCheck, LineChart, Trophy, Bell, BarChart3, } from "lucide-react" import { cn } from "@/lib/utils" import { usePathname, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" export function GestionDesempenoSidebar() { const pathname = usePathname() const router = useRouter() const [collapsed, setCollapsed] = useState(false) // Guardar el estado del menú en localStorage useEffect(() => { const savedCollapsed = localStorage.getItem("gestionDesempenoSidebarCollapsed") if (savedCollapsed) { setCollapsed(savedCollapsed === "true") } }, []) const toggleSidebar = () => { const newCollapsed = !collapsed setCollapsed(newCollapsed) localStorage.setItem("gestionDesempenoSidebarCollapsed", String(newCollapsed)) } const handleGoBack = () => { router.push("/") } const isActive = (path: string) => { return pathname === path } const menuItems = [ { id: "parametros-generales", label: "Configuración de Parámetros Generales", icon: Sliders, href: "/gestion-desempeno/configuracion/parametros-generales", }, { id: "okrs-kpis", label: "Configuración de OKRs/KPIs", icon: Target, href: "/gestion-desempeno/configuracion/okrs-kpis", }, { id: "evaluaciones", label: "Configuración de Evaluaciones", icon: ClipboardCheck, href: "/gestion-desempeno/configuracion/evaluaciones", }, { id: "historial-competencias", label: "Configuración de Historial de Competencias y Plan de Crecimiento", icon: LineChart, href: "/gestion-desempeno/configuracion/historial-competencias", }, { id: "gamificacion", label: "Configuración de Gamificación", icon: Trophy, href: "/gestion-desempeno/configuracion/gamificacion", }, { id: "notificaciones", label: "Configuración de Notificaciones", icon: Bell, href: "/gestion-desempeno/configuracion/notificaciones", }, { id: "reportes", label: "Configuración de Reportes", icon: BarChart3, href: "/gestion-desempeno/configuracion/reportes", }, ] return (

{!collapsed && Buenos días, Yessica}

{/* Botón de Volver */} {/* Separador con título */} {!collapsed && (

GESTIÓN DEL DESEMPEÑO

)} {collapsed &&

} {menuItems.map((item) => (

{!collapsed && ( {item.label} )}

))}

{!collapsed ? (

BSG Institute

Versión 1.0.0

) : (

v1.0

)}

) } [V0_FILE]typescriptreact:file="components/gestion-desempeno-top-bar.tsx" isMerged="true" "use client" import { Bell, Search, RefreshCw, Key, User, LogOut } from "lucide-react" import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" export function GestionDesempenoTopBar() { return (

Integra CRM

Yesica Palomino

yesica.palomino@bsginstitute.com

Cambiar clave Mi avatar Cerrar sesión

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function ConfiguracionPage() { // Redirigir a la página de parámetros generales redirect("/gestion-desempeno/configuracion/parametros-generales") } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/not-found.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function NotFound() { return (

404 - Página no encontrada

La página que estás buscando no existe en el sistema de Gestión del Desempeño.

) } [V0_FILE]typescriptreact:file="components/gestion-desempeno-info-bar.tsx" isQuickEdit="true" isMerged="true" "use client" import { usePathname } from "next/navigation" export function GestionDesempenoInfoBar() { const pathname = usePathname() // Solo mostrar en las páginas de gestión del desempeño if (!pathname.startsWith("/gestion-desempeno/configuracion")) { return null } // Ahora devolvemos un div vacío en lugar de los contenedores con estadísticas return (

{/* Se han eliminado los contenedores de información según lo solicitado */}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/parametros-generales/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/gestion-desempeno-content.css" isMerged="true" /* Estilos específicos para la sección de Gestión del Desempeño */ .gestion-desempeno-container { background-color: #f8faff; width: 100%; padding-bottom: 2rem; } /* Mejoras para la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Estilos modernos para la tabla */ .gestion-desempeno-table { width: 100%; border-collapse: separate; border-spacing: 0; } .gestion-desempeno-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; } .gestion-desempeno-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem; } .gestion-desempeno-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .gestion-desempeno-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 la paginación en dispositivos móviles */ @media (max-width: 768px) { .pagination-container { flex-direction: column; gap: 0.5rem; } } [V0_FILE]typescriptreact:file="components/empleado-top-bar.tsx" isMerged="true" "use client" import { Bell, Search, RefreshCw, Key, User, LogOut } from "lucide-react" import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" export function EmpleadoTopBar() { return (

Integra CRM - Gestión del Desempeño por Empleado

Yesica Palomino

yesica.palomino@bsginstitute.com

Cambiar clave Mi avatar Cerrar sesión

) } [V0_FILE]typescriptreact:file="components/empleado-info-bar.tsx" isMerged="true" "use client" import { usePathname } from "next/navigation" export function EmpleadoInfoBar() { const pathname = usePathname() // Solo mostrar en las páginas de gestión del desempeño por empleado if (!pathname.startsWith("/gestion-desempeno/empleado")) { return null } return (

Juan Antonio Salas

Desarrollador Junior - TI - Desarrollo

Activo

) } [V0_FILE]typescriptreact:file="components/edit-employee-dialog.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Definir tipos para el empleado y las áreas type Employee = { id: number name: string area: string subArea: string position: string colorClass?: string } type AreaOption = { name: string subAreas: string[] } // Opciones de áreas y subáreas const areaOptions: AreaOption[] = [ { name: "TI", subAreas: ["Desarrollo", "Soporte Técnico", "Infraestructura", "Seguridad", "QA", "DevOps"], }, { name: "Recursos Humanos", subAreas: ["Reclutamiento", "Capacitación", "Nómina", "Relaciones Laborales"], }, { name: "Finanzas", subAreas: ["Contabilidad", "Tesorería", "Auditoría", "Presupuesto"], }, { name: "Marketing", subAreas: ["Diseño", "Redes Sociales", "Publicidad", "Investigación de Mercado"], }, { name: "Ventas", subAreas: ["Ventas Directas", "Telemarketing", "Servicio al Cliente", "Postventa"], }, ] interface EmployeeDialogProps { isOpen: boolean onClose: () => void employee: Employee | null onSave: (employee: Employee) => void mode: "edit" | "create" } export function EmployeeDialog({ isOpen, onClose, employee, onSave, mode }: EmployeeDialogProps) { const [editedEmployee, setEditedEmployee] = useState(null) const [hasChanges, setHasChanges] = useState(false) const [availableSubAreas, setAvailableSubAreas] = useState([]) // Inicializar el estado cuando se abre el diálogo useEffect(() => { if (mode === "edit" && employee) { setEditedEmployee({ ...employee }) // Establecer las subáreas disponibles basadas en el área actual const area = areaOptions.find((a) => a.name === employee.area) setAvailableSubAreas(area?.subAreas || []) setHasChanges(false) } else if (mode === "create") { // Para crear un nuevo empleado, inicializar con valores por defecto const defaultArea = areaOptions[0].name const defaultSubAreas = areaOptions[0].subAreas setEditedEmployee({ id: 0, // Se asignará un ID real al guardar name: "", area: defaultArea, subArea: defaultSubAreas[0] || "", position: "", }) setAvailableSubAreas(defaultSubAreas) setHasChanges(mode === "create") // En creación, permitir guardar inmediatamente } }, [employee, isOpen, mode]) // Manejar cambios en los campos const handleChange = (field: keyof Employee, value: string) => { if (!editedEmployee) return // Si el campo es "area", actualizar también las subáreas disponibles if (field === "area") { const area = areaOptions.find((a) => a.name === value) const newSubAreas = area?.subAreas || [] setAvailableSubAreas(newSubAreas) // Resetear la subárea si no está disponible en la nueva área const newSubArea = newSubAreas.includes(editedEmployee.subArea) ? editedEmployee.subArea : newSubAreas[0] || "" setEditedEmployee({ ...editedEmployee, [field]: value, subArea: newSubArea, }) } else { setEditedEmployee({ ...editedEmployee, [field]: value, }) } setHasChanges(true) } // Validar si el formulario está completo para creación const isFormValid = () => { if (!editedEmployee) return false // En modo edición, solo verificar si hay cambios if (mode === "edit") return false // En modo edición, solo verificar si hay cambios if (mode === "edit") return hasChanges // En modo creación, verificar que todos los campos estén completos return ( editedEmployee.name.trim() !== "" && editedEmployee.area !== "" && editedEmployee.subArea !== "" && editedEmployee.position.trim() !== "" ) } // Manejar el guardado const handleSave = () => { if (editedEmployee && (hasChanges || mode === "create")) { onSave(editedEmployee) } onClose() } if (!editedEmployee) return null return ( ) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" export default function ParametrosGeneralesPage() { // Redirigir a la página de módulos redirect("/gestion-desempeno/empleado/parametros-generales/modulos") } [V0_FILE]typescriptreact:file="components/employee-detail-config.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { useEffect } from "react" interface EmployeeDetailConfigProps { employee: { id: number name: string area: string subArea: string position: string } onClose: () => void } export function EmployeeDetailConfig({ employee, onClose }: EmployeeDetailConfigProps) { const router = useRouter() useEffect(() => { // Redirigir a la nueva sección router.push("/gestion-desempeno/empleado/parametros-generales/modulos") }, [router]) return null } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/okrs-kpis.css" isMoved="true" isMovedFrom="app/gestion-desempeno/okrs-kpis/okrs-kpis.css" isMerged="true" /* Estilos específicos para la sección de Configuración de OKRs/KPIs */ .okrs-kpis-container { background-color: #f8faff; width: 100%; padding-bottom: 2rem; } /* Mejoras para la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Estilos modernos para la tabla */ .okrs-kpis-table { width: 100%; border-collapse: separate; border-spacing: 0; } .okrs-kpis-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; } .okrs-kpis-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem; } .okrs-kpis-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .okrs-kpis-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-desempeno/configuracion/okrs-kpis/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function OkrsKpisPage() { // Redirigir a la página de frecuencia de evaluación redirect("/gestion-desempeno/configuracion/okrs-kpis/frecuencia-evaluacion") } [V0_FILE]typescriptreact:file="components/okrs-kpis-sidebar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, AlignJustify, Clock, BarChart3, ClipboardCheck, Trophy, Target, FileText, Users, Eye, Hash, Layers, } from "lucide-react" import { cn } from "@/lib/utils" import { usePathname, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" export function OkrsKpisSidebar() { const pathname = usePathname() const router = useRouter() const [collapsed, setCollapsed] = useState(false) // Guardar el estado del menú en localStorage useEffect(() => { const savedCollapsed = localStorage.getItem("okrsKpisSidebarCollapsed") if (savedCollapsed) { setCollapsed(savedCollapsed === "true") } }, []) const toggleSidebar = () => { const newCollapsed = !collapsed setCollapsed(newCollapsed) localStorage.setItem("okrsKpisSidebarCollapsed", String(newCollapsed)) } const handleGoBack = () => { router.replace("/") } // Función para verificar si una ruta está activa const isActive = (path: string) => { return pathname === path } return (

{!collapsed && Configuración OKRs/KPIs}

{/* Botón de Volver */} {/* Separador con título */} {!collapsed && (

CONFIGURACIÓN DE OKRS/KPIS

)} {collapsed &&

} {/* Frecuencia de Evaluación */} {!collapsed && ( Frecuencia de Evaluación )} {/* Modelo Activo de OKRs/KPIs */} {!collapsed && ( Modelo Activo de OKRs/KPIs )} {/* Criterios de Evaluación */} {!collapsed && ( Criterios de Evaluación )} {/* Gamificación Activa */} {!collapsed && ( Gamificación Activa )} {/* Definir Metodología de OKRs */} {!collapsed && ( Definir Metodología de OKRs )} {/* Formato de Objetivos */} {!collapsed && ( Formato de Objetivos )} {/* Número Máximo de OKRs por Usuario */} {!collapsed && ( Número Máximo de OKRs por Usuario )} {/* Nivel de Aplicación */} {!collapsed && ( Nivel de Aplicación )} {/* Gestión de Roles */} {!collapsed && ( Gestión de Roles )} {/* Gestión de Visibilidad */} {!collapsed && ( Gestión de Visibilidad )}

{!collapsed ? (

BSG Institute

Versión 1.0.0

) : (

v1.0

)}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/layout.tsx" isMerged="true" import type React from "react" import { OkrsKpisSidebar } from "@/components/okrs-kpis-sidebar" import { OkrsKpisTopBar } from "@/components/okrs-kpis-top-bar" import { OkrsKpisInfoBar } from "@/components/okrs-kpis-info-bar" import "./okrs-kpis.css" export const metadata = { title: "Integra CRM - Configuración de OKRs/KPIs", description: "Sistema de configuración de OKRs/KPIs para Integra CRM", } export default function OkrsKpisLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/okrs-kpis-top-bar.tsx" isMerged="true" "use client" import { Bell, Search, RefreshCw, Key, User, LogOut } from "lucide-react" import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" export function OkrsKpisTopBar() { return (

Integra CRM - Configuración de OKRs/KPIs

Yesica Palomino

yesica.palomino@bsginstitute.com

Cambiar clave Mi avatar Cerrar sesión

) } [V0_FILE]typescriptreact:file="components/empleado-sidebar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, AlignJustify, Layers, UserCog, Clock, Eye, FileText, LayoutDashboard } from "lucide-react" import { cn } from "@/lib/utils" import { usePathname, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" export function EmpleadoSidebar() { const pathname = usePathname() const router = useRouter() const [collapsed, setCollapsed] = useState(false) // Guardar el estado del menú en localStorage useEffect(() => { const savedCollapsed = localStorage.getItem("empleadoSidebarCollapsed") if (savedCollapsed) { setCollapsed(savedCollapsed === "true") } }, []) const toggleSidebar = () => { const newCollapsed = !collapsed setCollapsed(newCollapsed) localStorage.setItem("empleadoSidebarCollapsed", String(newCollapsed)) } const handleGoBack = () => { // Usar replace en lugar de push para evitar que se añada a la historia de navegación router.replace("/") } // Función para verificar si una ruta está activa const isActive = (path: string) => { return pathname === path } return (

{!collapsed && Empleado Seleccionado}

{/* Botón de Volver */} {/* Separador con título */} {!collapsed && (

CONFIGURACIÓN POR EMPLEADO

)} {collapsed &&

} {/* Elementos de nivel 1 (anteriormente estaban en nivel 2) */} {/* Módulos */} {!collapsed && ( Módulos )} {/* Roles y Permisos */} {!collapsed && ( Roles y Permisos )} {/* Frecuencia de Datos */} {!collapsed && ( Frecuencia de Datos )} {/* Datos Sensibles */} {!collapsed && ( Datos Sensibles )} {/* Registro de Actividad */} {!collapsed && ( Registro de Actividad )} {/* Widgets */} {!collapsed && ( Widgets )}

{!collapsed ? (

BSG Institute

Versión 1.0.0

) : (

v1.0

)}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function EmpleadoPage() { // Redirigir a la página de módulos directamente redirect("/gestion-desempeno/empleado/parametros-generales/modulos") } [V0_FILE]typescriptreact:file="components/parametros-generales-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, CheckSquare, Filter, X } from "lucide-react" import { EmployeeDetailConfig } from "@/components/employee-detail-config" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" // Definir el tipo para empleados type Employee = { id: number name: string area: string subArea: string position: string colorClass: string } // Colores disponibles para los empleados const employeeColors = [ "bg-blue-500", "bg-purple-500", "bg-green-500", "bg-red-500", "bg-amber-500", "bg-indigo-500", "bg-pink-500", "bg-teal-500", ] // Opciones para los filtros const areaOptions = ["TI", "Recursos Humanos", "Ventas", "Marketing", "Finanzas"] const subAreaOptions = { TI: ["Desarrollo", "Soporte Técnico", "Infraestructura", "QA"], "Recursos Humanos": ["Reclutamiento", "Capacitación", "Nómina", "Relaciones Laborales"], Ventas: ["Ventas Directas", "Telemarketing", "Servicio al Cliente", "Postventa"], Marketing: ["Diseño", "Redes Sociales", "Publicidad", "Investigación de Mercado"], Finanzas: ["Contabilidad", "Tesorería", "Auditoría", "Presupuesto"], } export function ParametrosGeneralesContent() { const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState("10") const [selectedEmployee, setSelectedEmployee] = useState(null) const [showEmployeeConfig, setShowEmployeeConfig] = useState(false) const [selectedArea, setSelectedArea] = useState("todos") const [selectedSubArea, setSelectedSubArea] = useState("todos") const [filterPopoverOpen, setFilterPopoverOpen] = useState(false) // Lista de empleados const [employees, setEmployees] = useState([ { id: 1, name: "Juan Antonio Salas", area: "TI", subArea: "Desarrollo", position: "Desarrollador Junior", colorClass: "bg-blue-500", }, { id: 2, name: "María Fernanda López", area: "TI", subArea: "Soporte Técnico", position: "Analista de Soporte", colorClass: "bg-purple-500", }, { id: 3, name: "Carlos Eduardo Ramírez", area: "TI", subArea: "Infraestructura", position: "Especialista en Redes", colorClass: "bg-green-500", }, { id: 4, name: "Ana Lucía Mendoza", area: "TI", subArea: "Desarrollo", position: "Desarrollador Senior", colorClass: "bg-red-500", }, ]) // Datos de ejemplo const totalItems = employees.length const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage)) // Abrir el diálogo de creación // const handleAddEmployee = () => { // setCurrentEmployee(null) // setDialogMode("create") // setDialogOpen(true) // } // Seleccionar un empleado para configuración detallada const handleSelectEmployee = (employee: Employee) => { setSelectedEmployee(employee) setShowEmployeeConfig(true) } // Volver a la lista de empleados const handleBackToList = () => { setShowEmployeeConfig(false) setSelectedEmployee(null) } // Función para obtener las subáreas disponibles según el área seleccionada const getSubAreas = () => { if (selectedArea === "todos") return [] return subAreaOptions[selectedArea as keyof typeof subAreaOptions] || [] } // Función para filtrar empleados según los criterios seleccionados const filteredEmployees = employees.filter((employee) => { const areaMatch = selectedArea === "todos" || employee.area === selectedArea const subAreaMatch = selectedSubArea === "todos" || employee.subArea === selectedSubArea return areaMatch && subAreaMatch }) // Función para limpiar los filtros const clearFilters = () => { setSelectedArea("todos") setSelectedSubArea("todos") } return (

Configuración de Parámetros Generales

Administra los parámetros esenciales del módulo de Gestión del desempeño, ajustando las reglas de operación. Personalización de datos y automatización de procesos para garantizar un funcionamiento eficiente y alineado con la estrategia empresarial.

{/* Espacio adicional */}

{showEmployeeConfig && selectedEmployee ? ( ) : ( <>

Empleados

Filtros

{(selectedArea !== "todos" || selectedSubArea !== "todos") && ( )}

Área:

Sub Área:

{filteredEmployees.map((employee) => ( ))}

Nombre	Área	Sub Área	Puesto	Acciones
{employee.name}	{employee.area}	{employee.subArea}	{employee.position}

{/* Componente de paginación */}

Página 1 de 1

Items por página

1 - {totalItems} de {totalItems} items

)}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/parametros-generales/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search } from "lucide-react" import { EmployeeDetailConfig } from "@/components/employee-detail-config" // Definir el tipo para empleados type Employee = { id: number name: string area: string subArea: string position: string colorClass: string } // Colores disponibles para los empleados const employeeColors = [ "bg-blue-500", "bg-purple-500", "bg-green-500", "bg-red-500", "bg-amber-500", "bg-indigo-500", "bg-pink-500", "bg-teal-500", ] export default function ParametrosGenerales() { const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState("10") const [selectedEmployee, setSelectedEmployee] = useState(null) const [showEmployeeConfig, setShowEmployeeConfig] = useState(false) const [selectedArea, setSelectedArea] = useState("todos") const [selectedSubArea, setSelectedSubArea] = useState("todos") // Lista de empleados const [employees, setEmployees] = useState([ { id: 1, name: "Juan Antonio Salas", area: "TI", subArea: "Desarrollo", position: "Desarrollador Junior", colorClass: "bg-blue-500", }, { id: 2, name: "María Fernanda López", area: "TI", subArea: "Soporte Técnico", position: "Analista de Soporte", colorClass: "bg-purple-500", }, { id: 3, name: "Carlos Eduardo Ramírez", area: "TI", subArea: "Infraestructura", position: "Especialista en Redes", colorClass: "bg-green-500", }, { id: 4, name: "Ana Lucía Mendoza", area: "TI", subArea: "Desarrollo", position: "Desarrollador Senior", colorClass: "bg-red-500", }, ]) // Datos de ejemplo const totalItems = employees.length const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage)) // Seleccionar un empleado para configuración detallada const handleSelectEmployee = (employee: Employee) => { setSelectedEmployee(employee) setShowEmployeeConfig(true) } // Volver a la lista de empleados const handleBackToList = () => { setShowEmployeeConfig(false) setSelectedEmployee(null) } return (

Configuración de Parámetros Generales

Administra los parámetros esenciales del módulo de Gestión del desempeño, ajustando las reglas de operación, personalización de datos y automatización de procesos para garantizar un funcionamiento eficiente y alineado con la estrategia empresarial.

{/* Espacio adicional para igualar el espaciado de Contacto Entrante */}

{showEmployeeConfig && selectedEmployee ? ( ) : ( <>

Empleados

Área:

Subárea:

{employees.map((employee) => ( ))}

Nombre	Área	Sub Área	Puesto	Acciones
{employee.name}	{employee.area}	{employee.subArea}	{employee.position}

{/* Componente de paginación */}

Página 1 de 1

Items por página

1 - {totalItems} de {totalItems} items

{/* El contenido de esta pestaña ha sido eliminado */} Períodos de Evaluación Configure los períodos de evaluación del desempeño

Contenido de configuración de períodos en desarrollo...

Roles y Permisos Defina los roles y permisos para el sistema de gestión del desempeño

Contenido de configuración de roles en desarrollo...

)}

) } [V0_FILE]typescriptreact:file="components/okrs-kpis-info-bar.tsx" isQuickEdit="true" isMerged="true" "use client" import { usePathname } from "next/navigation" export function OkrsKpisInfoBar() { const pathname = usePathname() // Solo mostrar en las páginas de configuración de OKRs/KPIs if (!pathname.startsWith("/gestion-desempeno/configuracion/okrs-kpis")) { return null } // Retornar un div vacío en lugar de la cabecera return null } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/frecuencia-evaluacion/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Circle, User, BarChart2, FileText } from "lucide-react" export default function FrecuenciaEvaluacionPage() { // Estados para los filtros const [areaSeleccionada, setAreaSeleccionada] = useState("") const [subAreaSeleccionada, setSubAreaSeleccionada] = useState("") const [puestoSeleccionado, setPuestoSeleccionado] = useState("") // Datos de ejemplo para los filtros const areas = ["Ventas", "Marketing", "Operaciones", "Recursos Humanos", "Finanzas"] const subAreas = { Ventas: ["Ventas Directas", "Ventas Corporativas", "Soporte de Ventas"], Marketing: ["Marketing Digital", "Relaciones Públicas", "Diseño Gráfico"], Operaciones: ["Logística", "Producción", "Control de Calidad"], "Recursos Humanos": ["Reclutamiento", "Capacitación", "Compensaciones"], Finanzas: ["Contabilidad", "Tesorería", "Planificación Financiera"], } const puestos = { "Ventas Directas": ["Ejecutivo de Ventas", "Gerente de Ventas", "Director Comercial"], "Marketing Digital": ["Especialista SEO", "Analista de Marketing", "Gerente de Marketing Digital"], Logística: ["Coordinador de Logística", "Supervisor de Almacén", "Gerente de Operaciones"], Reclutamiento: ["Reclutador", "Especialista en Selección", "Gerente de Talento"], Contabilidad: ["Asistente Contable", "Contador", "Gerente de Contabilidad"], } // Datos para la tabla const okrsKpis = [ { tipo: "OKR Estratégico", icono: , nombre: "Expansión de mercado", frecuencia: "Anual", ponderacion: "40%", }, { tipo: "OKR Funcional", icono: , nombre: "Optimización de procesos internos", frecuencia: "Semestral", ponderacion: "30%", }, { tipo: "OKR Individual", icono: , nombre: "Desarrollo de habilidades clave", frecuencia: "Trimestral", ponderacion: "15%", }, { tipo: "KPI de Ventas", icono: , nombre: "Crecimiento en clientes nuevos", frecuencia: "Mensual", ponderacion: "10%", }, { tipo: "KPI de Servicio", icono: , nombre: "Satisfacción del cliente (NPS)", frecuencia: "Trimestral", ponderacion: "5%", }, ] // Función para obtener las subáreas disponibles según el área seleccionada const getSubAreas = () => { if (!areaSeleccionada) return [] return subAreas[areaSeleccionada] || [] } // Función para obtener los puestos disponibles según la subárea seleccionada const getPuestos = () => { if (!subAreaSeleccionada) return [] return puestos[subAreaSeleccionada] || [] } return (

Frecuencia de Evaluación

Configure la periodicidad con la que se evaluarán los OKRs y KPIs para cada área, subárea y puesto de la organización.

{/* Menú de selección */}

Selección de configuración

Área

Sub Área

Puesto

{/* Tabla de OKRs/KPIs */}

{okrsKpis.map((item, index) => ( ))}

Tipo	Nombre	Frecuencia	Ponderación	Acciones
{item.icono} {item.tipo}	{item.nombre}	{item.frecuencia}	{item.ponderacion}

{/* Botón para agregar nuevo OKR/KPI */}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/modelo-activo/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Circle, User, BarChart2 } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" export default function ModeloActivoPage() { // Estado para manejar los checkboxes const [configuracionActiva, setConfiguracionActiva] = useState([ { id: 1, tipo: "OKRs Estratégicos", descripcion: "Objetivos globales de la empresa", habilitado: true, icono: , }, { id: 2, tipo: "OKRs Funcionales", descripcion: "Metas departamentales alineadas con la estrategia", habilitado: true, icono: , }, { id: 3, tipo: "OKRs Individuales", descripcion: "Metas de cada colaborador en su desarrollo personal y profesional", habilitado: true, icono: , }, { id: 4, tipo: "KPIs Operacionales", descripcion: "Métricas de desempeño clave para cada área de negocio", habilitado: true, icono: , }, ]) // Función para manejar el cambio de estado de los checkboxes const handleCheckboxChange = (id: number) => { setConfiguracionActiva( configuracionActiva.map((item) => (item.id === id ? { ...item, habilitado: !item.habilitado } : item)), ) } return (

Modelo Activo de OKRs/KPIs

Configure los tipos de OKRs y KPIs que se utilizarán en su organización y defina su estado de activación.

{/* Tabla de configuración activa */}

{configuracionActiva.map((item) => ( ))}

Tipo	Descripción	Habilitar/Deshabilitar
{item.icono} {item.tipo}	{item.descripcion}	handleCheckboxChange(item.id)} className="h-5 w-5 border-purple-500 data-[state=checked]:bg-purple-600 data-[state=checked]:text-white" />

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/criterios-evaluacion/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Circle, User, BarChart2 } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" export default function CriteriosEvaluacionPage() { // Estado para manejar los checkboxes const [criteriosHabilitados, setCriteriosHabilitados] = useState([ { id: 1, habilitado: true }, { id: 2, habilitado: true }, { id: 3, habilitado: true }, { id: 4, habilitado: true }, ]) // Función para manejar el cambio de estado de los checkboxes const handleCheckboxChange = (id: number) => { setCriteriosHabilitados( criteriosHabilitados.map((item) => (item.id === id ? { ...item, habilitado: !item.habilitado } : item)), ) } // Datos para la tabla de criterios de evaluación const criteriosEvaluacion = [ { categoria: "OKRs Estratégicos", escala: "0-1 (Logro de Resultados Clave)", proposito: "Evalúa el cumplimiento de los objetivos a gran escala.", icono: , }, { categoria: "OKRs Funcionales", escala: "1 a 5 (Impacto en procesos)", proposito: "Mide cómo los cambios implementados generan mejoras en los procesos.", icono: , }, { categoria: "OKRs Individuales", escala: "% de cumplimiento", proposito: "Permite a cada colaborador ver su progreso y motivarse para mejorar.", icono: , }, { categoria: "KPIs", escala: "% de cumplimiento", proposito: "Determina si los indicadores clave se están cumpliendo según lo esperado.", icono: , }, ] return (

Criterios de Evaluación

Configure los criterios y escalas de evaluación para los diferentes tipos de OKRs y KPIs en su organización.

{/* Tabla de criterios de evaluación */}

{criteriosEvaluacion.map((criterio, index) => ( ))}

Categoría	Escala de Evaluación	Propósito	Habilitar/Deshabilitar
{criterio.icono} {criterio.categoria}	{criterio.escala}	{criterio.proposito}	handleCheckboxChange(index + 1)} className="h-5 w-5 border-purple-500 data-[state=checked]:bg-purple-600 data-[state=checked]:text-white" />

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/gamificacion-activa/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Award, Star, BarChart2, Trophy } from "lucide-react" export default function GamificacionActivaPage() { // Estado para manejar los checkboxes const [elementosHabilitados, setElementosHabilitados] = useState([ { id: 1, habilitado: true }, { id: 2, habilitado: true }, { id: 3, habilitado: true }, { id: 4, habilitado: true }, ]) // Función para manejar el cambio de estado de los checkboxes const handleCheckboxChange = (id: number) => { setElementosHabilitados( elementosHabilitados.map((item) => (item.id === id ? { ...item, habilitado: !item.habilitado } : item)), ) } // Datos para la tabla de elementos de gamificación const elementosGamificacion = [ { elemento: "Insignias por cumplimiento de OKRs", proposito: "Reconocimiento visual por alcanzar metas", icono: , }, { elemento: "Puntos de desempeño acumulables", proposito: "Sistema de recompensa basado en progreso", icono: , }, { elemento: "Rankings de equipos", proposito: "Competencia sana entre áreas para fomentar la colaboración y la mejora continua", icono: , }, { elemento: "Desafíos trimestrales", proposito: "Retos gamificados con incentivos para cumplir objetivos específicos", icono: , }, ] return (

Gamificación Activa

Configure los elementos de gamificación que se utilizarán para motivar y reconocer el cumplimiento de OKRs y KPIs.

{/* Tabla de elementos de gamificación */}

{elementosGamificacion.map((elemento, index) => ( ))}

Elementos	Propósito	Habilitar/Deshabilitar
{elemento.icono} {elemento.elemento}	{elemento.proposito}	handleCheckboxChange(index + 1)} className="h-5 w-5 border-purple-500 data-[state=checked]:bg-purple-600 data-[state=checked]:text-white" />

Recomendación

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/metodologia-okrs/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Edit, ArrowDownUp, ArrowDown, Users, TrendingUp } from "lucide-react" export default function MetodologiaOkrsPage() { // Estado para la metodología seleccionada const [metodologiaSeleccionada, setMetodologiaSeleccionada] = useState("cascada-contribucion") // Datos para las metodologías de OKRs const metodologiasOkrs = [ { id: "estricto", nombre: "Modelo Estricto (Top-Down)", descripcion: "Los OKRs son definidos en cascada desde la alta dirección hacia los niveles inferiores, sin modificaciones por parte de los equipos.", icono: , }, { id: "cascada-contribucion", nombre: "Cascada con Contribución Mutua", descripcion: "Los líderes establecen los OKRs generales, pero los equipos pueden proponer sus propios objetivos alineados.", icono: , }, { id: "individuales", nombre: "OKRs Individuales 100% Libres", descripcion: "Cada usuario define sus propios OKRs sin alineación con los objetivos de la empresa.", icono: , }, { id: "impacto", nombre: "OKRs Basados en Impacto (Bottom-Up)", descripcion: "Los equipos generan sus propios OKRs y la dirección los valida según la estrategia.", icono: , }, ] return (

Definir Metodología de OKRs

Seleccione el enfoque metodológico para la implementación de OKRs en su organización.

{/* Metodología seleccionada */}

Metodología Seleccionada:

{metodologiasOkrs.find((m) => m.id === metodologiaSeleccionada)?.nombre || "Cascada con Contribución Mutua"}

{/* Selección de metodología */} {metodologiasOkrs.map((metodologia) => (

{metodologia.icono} {metodologia.nombre}

{metodologia.descripcion}

))}

{/* Información adicional */}

Recomendación

La metodología "Cascada con Contribución Mutua" es la más recomendada para organizaciones que buscan un equilibrio entre la alineación estratégica y el empoderamiento de los equipos. Esta metodología fomenta la participación activa de todos los miembros mientras mantiene la coherencia con los objetivos organizacionales.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/formato-objetivos/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Edit, FileText, FileCode } from "lucide-react" export default function FormatoObjetivosPage() { // Estado para el formato seleccionado const [formatoSeleccionado, setFormatoSeleccionado] = useState("estructura-fija") // Datos para los formatos de objetivos const formatosObjetivos = [ { id: "texto-libre", nombre: "Texto Libre", descripcion: "Cada usuario redacta su objetivo de manera personalizada, sin restricciones de formato.", icono: , ejemplo: "Mejorar la experiencia del cliente en nuestra plataforma.", }, { id: "estructura-fija", nombre: "Estructura Fija", descripcion: 'Se exige el uso de un formato estándar común: "Aumentar [métrica] de [X] a [Y] para el [plazo]"', icono: , ejemplo: "Incrementar la tasa de retención de clientes del 75% al 85% en los próximos 6 meses.", }, ] return (

Formato de Objetivos

Seleccione el formato estándar para la redacción de objetivos en su organización.

{/* Formato seleccionado */}

Formato Seleccionado:

{formatosObjetivos.find((f) => f.id === formatoSeleccionado)?.nombre || "Estructura Fija"}

{/* Selección de formato */} {formatosObjetivos.map((formato) => (

{formato.icono} {formato.nombre}

{formato.descripcion}

{/* Los ejemplos se muestran en una sección separada abajo */}

))} {/* Ejemplos de formatos */}

Ejemplos de formatos:

{formatosObjetivos.map((formato) => (

{formato.icono}

{formato.nombre}:

"{formato.ejemplo}"

))}

{/* Información adicional */}

Recomendación

La "Estructura Fija" es recomendada para la mayoría de las organizaciones ya que proporciona claridad, mensurabilidad y un marco temporal definido. Este formato facilita el seguimiento del progreso y asegura que los objetivos sean específicos y orientados a resultados.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/numero-maximo-okrs/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Hash } from "lucide-react" export default function NumeroMaximoOkrsPage() { // Estados para los filtros const [areaSeleccionada, setAreaSeleccionada] = useState("TI") const [subAreaSeleccionada, setSubAreaSeleccionada] = useState("Desarrollo") const [puestoSeleccionado, setPuestoSeleccionado] = useState("Desarrollador Junior") // Estado para el límite seleccionado const [limiteSeleccionado, setLimiteSeleccionado] = useState("5") // Datos de ejemplo para los filtros const areas = ["TI", "Marketing", "Operaciones", "Recursos Humanos", "Finanzas"] const subAreas = { TI: ["Desarrollo", "Soporte Técnico", "Infraestructura", "QA"], Marketing: ["Marketing Digital", "Relaciones Públicas", "Diseño Gráfico"], Operaciones: ["Logística", "Producción", "Control de Calidad"], "Recursos Humanos": ["Reclutamiento", "Capacitación", "Compensaciones"], Finanzas: ["Contabilidad", "Tesorería", "Planificación Financiera"], } const puestos = { Desarrollo: ["Desarrollador Junior", "Desarrollador Senior", "Líder Técnico"], "Soporte Técnico": ["Analista de Soporte", "Especialista en Soporte", "Coordinador de Soporte"], Infraestructura: ["Administrador de Sistemas", "Especialista en Redes", "Ingeniero DevOps"], } // Opciones de límites de OKRs const opcionesLimites = [ { id: "sin-limite", valor: "0", nombre: "Sin límite", descripcion: "No hay restricción en la cantidad de OKRs que un usuario puede tener.", }, { id: "maximo-5", valor: "5", nombre: "Máximo de 5 OKRs por usuario", descripcion: "Recomendado para mantener foco y claridad.", }, { id: "maximo-3", valor: "3", nombre: "Máximo de 3 OKRs por usuario", descripcion: "Para equipos con objetivos altamente estratégicos.", }, { id: "maximo-10", valor: "10", nombre: "Máximo de 10 OKRs por usuario", descripcion: "Para usuarios con múltiples áreas de impacto.", }, ] // Función para obtener las subáreas disponibles según el área seleccionada const getSubAreas = () => { if (!areaSeleccionada) return [] return subAreas[areaSeleccionada as keyof typeof subAreas] || [] } // Función para obtener los puestos disponibles según la subárea seleccionada const getPuestos = () => { if (!subAreaSeleccionada) return [] return puestos[subAreaSeleccionada as keyof typeof puestos] || [] } return (

Número Máximo de OKRs por Usuario

Configure el límite de OKRs que cada usuario puede tener según su área, subárea y puesto.

{/* Menú de selección */}

Selección de configuración

Área

Sub Área

Puesto

{/* Límite seleccionado */}

Límite Actual:

{limiteSeleccionado === "0" ? "Sin límite" : `${limiteSeleccionado} OKRs por usuario`}

{/* Selección de límite */} {opcionesLimites.map((opcion) => (

{opcion.nombre}

{opcion.descripcion}

))}

{/* Información adicional */}

Recomendación

Se recomienda un máximo de 5 OKRs por usuario para mantener el enfoque y la claridad. Demasiados OKRs pueden diluir la atención y reducir la efectividad, mientras que muy pocos pueden no cubrir áreas importantes de responsabilidad.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/nivel-aplicacion/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Layers, Building, Users, UserCircle } from "lucide-react" export default function NivelAplicacionPage() { // Estado para los niveles de aplicación const [nivelesAplicacion, setNivelesAplicacion] = useState([ { id: 1, nivel: "Empresa", descripcion: "OKRs estratégicos globales", habilitado: true, icono: , }, { id: 2, nivel: "Departamento", descripcion: "Metas específicas por área", habilitado: true, icono: , }, { id: 3, nivel: "Equipo", descripcion: "OKRs de trabajo colaborativo", habilitado: true, icono: , }, { id: 4, nivel: "Individual", descripcion: "Metas personales de cada empleado", habilitado: false, icono: , }, ]) // Función para manejar el cambio de estado de los checkboxes const handleCheckboxChange = (id: number) => { setNivelesAplicacion( nivelesAplicacion.map((nivel) => (nivel.id === id ? { ...nivel, habilitado: !nivel.habilitado } : nivel)), ) } return (

Nivel de Aplicación

Configure los niveles organizacionales en los que se aplicarán los OKRs y KPIs.

{/* Tabla de niveles de aplicación */}

{nivelesAplicacion.map((nivel) => ( ))}

Nivel	Habilitar/Deshabilitar
{nivel.icono} {nivel.nivel} {nivel.descripcion}	handleCheckboxChange(nivel.id)} className="h-5 w-5 border-purple-500 data-[state=checked]:bg-purple-600 data-[state=checked]:text-white" />

{/* Información adicional */}

Recomendación

Se recomienda habilitar los niveles de Empresa, Departamento y Equipo para asegurar una alineación estratégica completa. El nivel Individual puede ser habilitado en organizaciones con alta madurez en la gestión de OKRs, pero puede generar complejidad adicional en la fase inicial de implementación.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/gestion-visibilidad/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Edit, Eye, EyeOff, Users } from "lucide-react" export default function GestionVisibilidadPage() { // Estado para la configuración de visibilidad seleccionada const [visibilidadSeleccionada, setVisibilidadSeleccionada] = useState("mixto") // Datos para las opciones de visibilidad const opcionesVisibilidad = [ { id: "todos-publicos", nombre: "Todos Públicos", descripcion: "Todos los OKRs son visibles para toda la organización.", icono: , }, { id: "todos-privados", nombre: "Todos Privados", descripcion: "Solo los creadores y administradores pueden ver los OKRs.", icono: , }, { id: "mixto", nombre: "Mixto", descripcion: "Cada usuario decide si su OKR es público o privado.", icono: , }, ] return (

Gestión de Visibilidad

Configure quién puede ver los OKRs y KPIs dentro de su organización.

{/* Configuración seleccionada */}

Configuración actual:

{opcionesVisibilidad.find((o) => o.id === visibilidadSeleccionada)?.nombre || "Mixto"} ( {visibilidadSeleccionada === "todos-publicos" ? "Todos públicos" : visibilidadSeleccionada === "todos-privados" ? "Todos privados" : "Algunos públicos, algunos privados"} )

{/* Selección de configuración de visibilidad */} {opcionesVisibilidad.map((opcion) => (

{opcion.icono} {opcion.nombre}

{opcion.descripcion}

))}

{/* Información adicional */}

Recomendación

La configuración "Mixto" es la más recomendada para la mayoría de las organizaciones, ya que proporciona flexibilidad y permite a cada usuario decidir el nivel de visibilidad de sus OKRs. Esto fomenta la transparencia mientras respeta la privacidad cuando sea necesario.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/okrs-kpis/gestion-roles/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Shield, Users, User, Info } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export default function GestionRolesPage() { // Estado para los permisos const [permisos, setPermisos] = useState([ // [Administrador, Líder de Equipo, Colaborador] [true, true, false], // Crear OKRs [true, true, true], // Editar OKRs [true, true, false], // Aprobar y Evaluar OKRs ]) // Función para manejar el cambio de permisos const handlePermisoChange = (rowIndex: number, colIndex: number) => { const nuevosPermisos = [...permisos] nuevosPermisos[rowIndex][colIndex] = !nuevosPermisos[rowIndex][colIndex] setPermisos(nuevosPermisos) } // Datos para la tabla de permisos const funciones = [ { id: 1, nombre: "Quién Puede Crear OKRs", icono: "🔑" }, { id: 2, nombre: "Quién Puede Editar OKRs", icono: "👤" }, { id: 3, nombre: "Quién Puede Aprobar y Evaluar OKRs", icono: "📊" }, ] // Roles const roles = [ { id: 1, nombre: "administrador", descripcion: "el administrador podrá gestionar las funciones de todos los usuarios", icono: , }, { id: 2, nombre: "líder de equipo", descripcion: "el líder de equipo podrá gestionar las funciones de todo su equipo de trabajo", icono: , }, { id: 3, nombre: "colaborador", descripcion: "el colaborador podrá gestionar solo sus funciones propias", icono: , }, ] return (

Gestión de Roles

Configure los roles y permisos para la gestión de OKRs y KPIs en su organización.

{/* Tabla de permisos */}

{roles.map((rol) => ( ))} {funciones.map((funcion, rowIndex) => ( {roles.map((rol, colIndex) => ( ))} ))}

Función	{rol.nombre} {rol.descripcion}
{funcion.icono} {funcion.nombre}	handlePermisoChange(rowIndex, colIndex)} className="h-5 w-5 border-purple-500 data-[state=checked]:bg-purple-600 data-[state=checked]:text-white" />

{/* Información adicional */}

Recomendación

Se recomienda mantener una clara separación de responsabilidades entre los diferentes roles. Los Administradores deben tener control total, los Líderes de Equipo deben poder gestionar sus equipos, y los Colaboradores deben tener permisos limitados para mantener la integridad del sistema de OKRs.

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/empleado.css" isQuickEdit="true" isMerged="true" /* Estilos específicos para la sección de Gestión del Desempeño por Empleado */ .empleado-container { background-color: #f8faff; width: 100%; padding-bottom: 2rem; } /* Modificar los estilos para reducir el tamaño de las letras en la sección de Empleado */ /* Ajustar tamaños de títulos y textos */ .empleado-container h1, .empleado-container h2 { font-size: 1.5rem !important; /* Reducir tamaño de títulos principales */ } .empleado-container h3 { font-size: 1.25rem !important; } .empleado-container p { font-size: 0.875rem !important; /* Reducir tamaño de párrafos */ } /* Ajustar específicamente los textos dentro de las tablas */ .empleado-container table th { font-size: 0.75rem !important; /* 12px - Encabezados de tabla */ font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #4b5563; /* text-gray-700 */ } /* Ajustar tamaño de texto en las celdas de tabla */ .empleado-container table td { font-size: 0.875rem !important; /* 14px - Texto en celdas */ } /* Ajustar tamaño de texto en los spans dentro de las celdas */ .empleado-container table td span.font-medium { font-size: 0.875rem !important; /* 14px */ font-weight: 500; color: #111827; /* text-gray-900 */ } /* Ajustar tamaño de texto para descripciones en celdas */ .empleado-container table td .text-gray-500, .empleado-container table td span:not(.font-medium) { font-size: 0.875rem !important; /* 14px */ color: #6b7280; /* text-gray-500 */ } /* Ajustar tamaño de texto en los botones dentro de las tablas */ .empleado-container table button { font-size: 0.875rem !important; /* 14px */ } /* Mejoras para la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Estilos modernos para la tabla */ .empleado-table { width: 100%; border-collapse: separate; border-spacing: 0; } .empleado-table th { font-weight: 500; color: #4b5563; /* text-gray-700 */ padding: 0.75rem 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem !important; /* 12px */ } .empleado-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(240, 5.9%, 90%); font-size: 0.875rem !important; /* 14px */ } .empleado-table tbody tr:hover { background-color: hsl(210, 40%, 98%); } .empleado-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); } /* Ajustar tamaño de texto en tarjetas */ .dashboard-card h3 { font-size: 1.25rem !important; } .dashboard-card p { font-size: 0.875rem !important; } /* Estilos para badges y etiquetas */ .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-weight: 500; font-size: 0.875rem !important; /* 14px */ } .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; } } /* Ajustar tamaño de texto en los selectores */ .empleado-container .select-trigger, .empleado-container .select-content, .empleado-container .select-item { font-size: 0.875rem !important; /* 14px */ } /* Ajustar tamaño de texto en los checkboxes y labels */ .empleado-container label { font-size: 0.875rem !important; /* 14px */ } /* Ajustar tamaño de texto en los botones */ .empleado-container button { font-size: 0.875rem !important; /* 14px */ } /* Ajustar tamaño de texto en los inputs */ .empleado-container input, .empleado-container select { font-size: 0.875rem !important; /* 14px */ } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/modulos/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Target, ClipboardCheck, Trophy, BarChart2, FileText, Users } from "lucide-react" export default function ModulosPage() { // Estado para los módulos const [modules, setModules] = useState([ { id: "1", name: "OKRs/KPIs", enabled: true, icon: }, { id: "2", name: "Evaluaciones", enabled: true, icon: }, { id: "3", name: "Gamificación", enabled: true, icon: }, { id: "4", name: "Reportes", enabled: true, icon: }, { id: "5", name: "Proyectos", enabled: true, icon: }, { id: "6", name: "Historial de Competencias", enabled: true, icon: }, ]) // Manejadores de eventos const toggleModule = (id: string) => { setModules(modules.map((module) => (module.id === id ? { ...module, enabled: !module.enabled } : module))) } const removeModule = (id: string) => { setModules(modules.filter((module) => module.id !== id)) } return (

Activar/Desactivar Módulos

Configure qué módulos estarán disponibles para este empleado. Active o desactive los módulos según las necesidades específicas del empleado.

{modules.map((module) => ( ))}

Módulo	Habilitar/Deshabilitar	Acciones
{module.icon} {module.name}	toggleModule(module.id)} className="mx-auto" />

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/widgets/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { LayoutDashboard, PieChart, LineChart, BarChart2, Activity, TrendingUp } from "lucide-react" export default function WidgetsPage() { // Estado para los widgets const [widgets, setWidgets] = useState([ { id: "1", name: "OKRs/KPIs", enabled: true, icon: }, { id: "2", name: "Evaluaciones", enabled: true, icon: }, { id: "3", name: "Gamificación", enabled: true, icon: }, { id: "4", name: "Reportes", enabled: true, icon: }, { id: "5", name: "Proyectos", enabled: true, icon: }, { id: "6", name: "Línea de carrera", enabled: true, icon: }, ]) // Manejadores de eventos const toggleWidget = (id: string) => { setWidgets(widgets.map((widget) => (widget.id === id ? { ...widget, enabled: !widget.enabled } : widget))) } const removeWidget = (id: string) => { setWidgets(widgets.filter((widget) => widget.id !== id)) } const addNewWidget = () => { // Implementación para añadir nuevo widget alert("Funcionalidad para añadir nuevo widget") } return (

Habilitar/Deshabilitar Widgets en Dashboards

Configure qué widgets estarán disponibles en los dashboards para este empleado. Personalice la experiencia del usuario según sus necesidades específicas.

{widgets.map((widget) => ( ))}

Widgets	Habilitar/Deshabilitar	Acciones
{widget.icon} {widget.name}	toggleWidget(widget.id)} className="mx-auto" />

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/frecuencia-datos/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { BarChart2, Award, FileText, Trophy, Users, Zap, ClipboardCheck, Target } from "lucide-react" export default function FrecuenciaDatosPage() { // Estado para frecuencia de actualización const [dataUpdates, setDataUpdates] = useState([ { id: "1", name: "Evaluaciones de Desempeño", frequency: "Diario", icon: , }, { id: "2", name: "OKRs y KPIs", frequency: "Semanal", icon: , }, { id: "3", name: "Competencias y Certificaciones", frequency: "Mensual", icon: , }, { id: "4", name: "Historial de Proyectos", frequency: "Diario", icon: , }, { id: "5", name: "Datos de Gamificación", frequency: "Diario", icon: , }, { id: "6", name: "Reportes Automatizados", frequency: "Semanal", icon: , }, { id: "7", name: "Movilidad Interna", frequency: "Diario", icon: , }, { id: "8", name: "Integraciones con Otros Sistemas", frequency: "Diario", icon: , }, ]) // Manejadores de eventos const changeFrequency = (id: string, frequency: "Diario" | "Semanal" | "Mensual") => { setDataUpdates(dataUpdates.map((item) => (item.id === id ? { ...item, frequency } : item))) } const removeDataUpdate = (id: string) => { setDataUpdates(dataUpdates.filter((item) => item.id !== id)) } return (

Definir Frecuencia de Actualización de Datos

Configure con qué frecuencia se actualizarán los diferentes tipos de datos para este empleado.

{dataUpdates.map((item) => ( ))}

Datos a actualizar	Frecuencia	Acciones
{item.icon} {item.name}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/datos-sensibles/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Eye, MessageSquare, BarChart2, DollarSign } from "lucide-react" export default function DatosSensiblesPage() { // Estado para datos sensibles const [sensitiveData, setSensitiveData] = useState([ { id: "1", name: "Evaluaciones 360", access: true, icon: , }, { id: "2", name: "Feedback", access: false, icon: , }, { id: "3", name: "Puntuaciones", access: false, icon: , }, { id: "4", name: "Datos salariales", access: false, icon: , }, ]) // Manejadores de eventos const toggleSensitiveDataAccess = (id: string) => { setSensitiveData(sensitiveData.map((item) => (item.id === id ? { ...item, access: !item.access } : item))) } const addNewSensitiveData = () => { // Implementación para añadir nuevo dato sensible alert("Funcionalidad para añadir nuevo dato sensible") } return (

Control de Visibilidad de Datos Sensibles

Configure qué datos sensibles puede ver este empleado. Controle el acceso a información confidencial según el rol y las necesidades del empleado.

{sensitiveData.map((item) => ( ))}

Datos sensibles	Acceso
{item.icon} {item.name}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/roles-permisos/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { AlertTriangle, Shield, Users, User, Lock } from "lucide-react" export default function RolesPermisosPage() { // Estado para el rol seleccionado const [selectedRole, setSelectedRole] = useState("Administrador") // Iconos para cada rol const roleIcons = { Administrador: , Supervisor: , Usuario: , Ninguno: , } return (

Definir Roles y Permisos para usuarios

Configure el nivel de acceso y permisos para este empleado. Asigne roles específicos según las responsabilidades y necesidades del empleado.

Rol

Información sobre roles

El rol asignado determina qué acciones puede realizar el empleado en el sistema:

Administrador: Acceso completo a todas las funciones
Supervisor: Puede gestionar empleados y ver reportes
Usuario: Acceso limitado a sus propios datos
Ninguno: Sin acceso al sistema

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/parametros-generales/registro-actividad/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { User, Shield, Clock, Sliders, Layers } from "lucide-react" export default function RegistroActividadPage() { // Estado para los registros de actividad const [activityLogs, setActivityLogs] = useState([ { id: "1", configKey: "Roles y Permisos", modification: "Cambio de rol", user: "jsalas", role: "Administrador", date: "10/03/2025", icon: , }, { id: "2", configKey: "Visibilidad de Datos Sensibles", modification: "Cambio de Acceso", user: "jsalas", role: "Colaborador", date: "10/03/2025", icon: , }, { id: "3", configKey: "Configuración de Períodos", modification: "Cambio de Frecuencia", user: "jsalas", role: "Configurador", date: "10/03/2025", icon: , }, { id: "4", configKey: "Frecuencia de Actualización", modification: "Cambio de Frecuencia", user: "jsalas", role: "Administrador", date: "10/03/2025", icon: , }, { id: "5", configKey: "Activar/Desactivar módulos", modification: "Cambio de Habilitación", user: "jsalas", role: "Colaborador", date: "10/03/2025", icon: , }, ]) // Añadir estados para los filtros de fecha y usuario const [startDate, setStartDate] = useState("31/12/2025") const [endDate, setEndDate] = useState("31/12/2025") const [filterUser, setFilterUser] = useState("Juan Antonio Salas") // Función para descargar el reporte const handleDownloadReport = () => { alert("Descargando reporte de actividades...") // Aquí iría la lógica real para generar y descargar el reporte } return (

Registro de Actividad

Visualiza y filtra los registros de actividad relacionados con la configuración de este empleado. Monitorea los cambios realizados en el sistema.

Desde setStartDate(e.target.value)} />

Hasta setEndDate(e.target.value)} />

{activityLogs.map((log) => ( ))}

Configuración	Modificación	Usuario	Rol	Fecha
{log.icon} {log.configKey}	{log.modification}	{log.user}	{log.role}	{log.date}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/okrs-kpis/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Target, BarChart2 } from "lucide-react" export default function OkrsKpisPage() { return (

Configuración de OKRs/KPIs

Configure los Objetivos y Resultados Clave (OKRs) y los Indicadores Clave de Desempeño (KPIs) para el empleado seleccionado.

OKRs

KPIs

Objetivos y Resultados Clave (OKRs)

Configure los OKRs para el empleado seleccionado

Contenido de configuración de OKRs en desarrollo...

Indicadores Clave de Desempeño (KPIs)

Configure los KPIs para el empleado seleccionado

Contenido de configuración de KPIs en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/evaluaciones/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ClipboardCheck } from "lucide-react" export default function EvaluacionesPage() { return (

Configuración de Evaluaciones

Configure las evaluaciones de desempeño para el empleado seleccionado.

Evaluaciones

Configure las evaluaciones para el empleado seleccionado

Contenido de configuración de evaluaciones en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/historial-competencias/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LineChart } from "lucide-react" export default function HistorialCompetenciasPage() { return (

Configuración de Historial de Competencias

Configure el historial de competencias y plan de crecimiento para el empleado seleccionado.

Historial de Competencias

Configure el historial de competencias para el empleado seleccionado

Contenido de configuración de historial de competencias en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/gamificacion/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Trophy } from "lucide-react" export default function GamificacionPage() { return (

Configuración de Gamificación

Configure la gamificación para el empleado seleccionado.

Gamificación

Configure la gamificación para el empleado seleccionado

Contenido de configuración de gamificación en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/notificaciones/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Bell } from "lucide-react" export default function NotificacionesPage() { return (

Configuración de Notificaciones

Configure las notificaciones para el empleado seleccionado.

Notificaciones

Configure las notificaciones para el empleado seleccionado

Contenido de configuración de notificaciones en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/reportes/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart2 } from "lucide-react" export default function ReportesPage() { return (

Configuración de Reportes

Configure los reportes para el empleado seleccionado.

Reportes

Configure los reportes para el empleado seleccionado

Contenido de configuración de reportes en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/page.tsx" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AgendaTabs } from "@/components/agenda-tabs" export default function GestionComercial() { return (

Gestión Comercial

Gestión Comercial Administre las actividades comerciales de BSG Institute

Contenido de Gestión Comercial en desarrollo...

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/prog-manuales/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/no-prog-altas-medias/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { AgendaTabs } from "@/components/agenda-tabs" export default function Loading() { return (

{[1, 2, 3].map((i) => (

))}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/vendidas-ipic-pf/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/vencidas-is-m/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/prog-automaticas/page.tsx" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" import { AgendaTabs } from "@/components/agenda-tabs" export default function ProgramadasAutomaticasPage() { return (

Programadas Automáticas

Programadas Automáticas (0) Gestión de actividades programadas automáticamente

Actividad	Contacto	Oportunidad	Fecha Programada	Mensaje	Ejecutar
No hay registros disponibles

{/* Este archivo no tiene entradas de categoría con datos, pero si las tuviera, aplicaríamos el mismo formato */}

) } [V0_FILE]typescriptreact:file="components/client-detail-view.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Copy, Mail, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" interface ClientDetailViewProps { clientData: { name: string course: string program: string location: string currentPhase: string profileStatus: { text: string type: "excellent" | "good" | "regular" | "poor" } contactInfo: { mobile1: string mobile2: string phone1: string phone2: string email1: string email2: string dataCategory: string } } onBack: () => void } export function ClientDetailView({ clientData, onBack }: ClientDetailViewProps) { const [activeTab, setActiveTab] = useState("speech") // Mapeo de colores para el estado del perfil const profileStatusColors = { excellent: "bg-green-600", good: "bg-blue-600", regular: "bg-yellow-600", poor: "bg-red-600", } return (

{/* Botón para volver */}

{/* Cabecera del cliente */}

{clientData.name}

{clientData.course}

{clientData.program}

{clientData.location}

Fase Actual: {clientData.currentPhase}

{/* Barra de estado del perfil */}

{clientData.profileStatus.text}

{/* Pestañas de navegación */} Speech Editar Datos Personales Competidores Cronograma de Pagos Resumen Programas Información del Programa Documentos del Programa Preguntas Frecuentes Documentos Legales {/* Contenido de la pestaña Speech */}

FASE 1: VALIDACION DE LA SOLICITUD DE INFORMACIÓN

{/* Encabezado con título */}

INFORMACIÓN DEL CLIENTE

{/* Línea divisoria */}

{/* Contenido del formulario */}

Celular 1

Celular 2

Teléfono 1

Teléfono 2

Email 1

Email 2

Categoría de Dato

{/* Contenido de otras pestañas (vacío por ahora) */}

Contenido de Editar Datos Personales (pendiente)

Contenido de Competidores (pendiente)

Contenido de Cronograma de Pagos (pendiente)

Contenido de Resumen Programas (pendiente)

Contenido de Información del Programa (pendiente)

Contenido de Documentos del Programa (pendiente)

Contenido de Preguntas Frecuentes (pendiente)

Contenido de Documentos Legales (pendiente)

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/table-pagination.tsx" isMerged="true" export default function TablePagination() { return ( <>

items por página

1 - 5 de 23 items

) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import { Phone, Mail, FileText, Copy, MessageSquare } from "lucide-react" export default function ContactForm() { return (

Información de contacto

{/* Columna izquierda */}

{/* Celular 1 */}

Celular 1

{/* Teléfono 1 */}

Teléfono 1

{/* Email 1 */}

Email 1

{/* Columna derecha */}

{/* Celular 2 */}

Celular 2

{/* Teléfono 2 */}

Teléfono 2

{/* Email 2 */}

Email 2

{/* Categoría */}

Categoría

{/* Botones de acción */}

) } [V0_FILE]typescriptreact:file="components/calling-notification.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Phone, X, PhoneCall } from "lucide-react" import { useRouter } from "next/navigation" import { ExecuteButton } from "./execute-button" interface CallingNotificationProps { isOpen: boolean onClose: () => void clientData: { name: string opportunity: string phase: string category: string probability: string id: string } } export const CallingNotification = ({ isOpen, onClose, clientData }: CallingNotificationProps) => { const router = useRouter() const [ringing, setRinging] = useState(0) // Efecto para la animación de llamada useEffect(() => { if (!isOpen) return const interval = setInterval(() => { setRinging((prev) => (prev + 1) % 3) }, 800) return () => clearInterval(interval) }, [isOpen]) if (!isOpen) return null const handleExecute = () => { onClose() // Navegar a la página del cliente router.push(`/gestion-comercial/agenda/contacto-entrante/${clientData.id}`) } return (

{/* Encabezado */}

{/* Animación de ondas de llamada */} {[...Array(3)].map((_, i) => (

))}

Llamada en curso

{/* Contenido */}

CONTACTO

{clientData.name}

OPORTUNIDAD

{clientData.opportunity}

Fase: {clientData.phase}

Categoría: {clientData.category}

Prob. Actual: {clientData.probability}

{/* Animación de llamada */}

{[...Array(3)].map((_, i) => (

))}

El sistema está realizando una llamada automática a este contacto

) } [V0_FILE]plaintext:file="public/images/peru-flag.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/peru-flag-JEqDc7WK2vlkbAu1FJTICplp1Wcj00.png" isMerged="true" [V0_FILE]typescriptreact:file="components/historial-crediticio-modal.tsx" isMerged="true" "use client" import { X, AlertCircle, HelpCircle, Download, Printer } from "lucide-react" import { useState } from "react" interface HistorialCrediticioModalProps { isOpen: boolean onClose: () => void data: any // En un caso real, definiríamos una interfaz más específica } export function HistorialCrediticioModal({ isOpen, onClose, data }: HistorialCrediticioModalProps) { const [activeTab, setActiveTab] = useState("resumen") if (!isOpen) return null // Función para renderizar el semáforo const renderSemaforo = (valor: number) => { if (valor === 0) return

if (valor === 1) return

if (valor === 2) return

if (valor === 3) return

return

} // Función para renderizar el indicador de calificación const renderCalificacion = (valor: number) => { if (valor === 0) return Sin calificación if (valor === 1) return Deficiente if (valor === 2) return Dudoso if (valor === 3) return CPP if (valor === 4) return Normal return Desconocido } // Datos de ejemplo para el historial crediticio const documentosData = { fechaProceso: "24/03/2025", tipoDoc: "D", nDoc: "77137267", nombreRazon: "QUISPE MAMANI GILMER", score: "0.0000", deudaTotal: "3601.21", actual: 4, previo: 4, m12: "", } const semaforoData = Array(24).fill(4) // Semáforo con todos los meses en verde (4) const deudaSBSData = [ { entidad: "BCP", calificacion: "NOR", monto: "2601.21", diasVencidos: "0", fechaReporte: "28/02/2025" }, { entidad: "BCO FALABELLA PERÚ", calificacion: "NOR", monto: "1000", diasVencidos: "0", fechaReporte: "28/02/2025", }, ] const datosGenerales = { fechaNacimiento: "01/06/1995", genero: "Masculino", digitoVerificador: "", digitoVerificadorAnterior: "", } const datosPrincipales = { ruc: "", razonSocial: "", nombreComercial: "", tipoContribuyente: "", estadoContribuyente: "", condicionContribuyente: "", dependencia: "", ciiu: "", inicioActividad: "31/12/1969", carnetPatronal: "", folio: "", asiento: "", telefono1: "", telefono2: "", telefono3: "", } const posicionHistorica = [ { fecha: "24/03/2025", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "3601.21", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "24/02/2025", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "3904.99", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "22/01/2025", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "4616.13", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "20/12/2024", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "8332.08", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "22/11/2024", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "2153.71", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "21/10/2024", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "714.85", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "20/09/2024", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "3760.34", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, { fecha: "22/08/2024", semaforo: 4, score: 0, numEntidades: 2, deudaTotal: "1590.25", porcentajeCalificacionNormal: 100, peorCalificacion: 1, deudaVencida: "", protestos: 0, docsProtestados: 0, deudaCastigada: 0, deudaJudicial: "", ctaCorriente: 0, tarjetaCredito: 0, otros: 0, }, ] return (

{/* Cabecera del modal */}

Historial Crediticio - {documentosData.nombreRazon}

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

{/* Contenido del modal */}

{activeTab === "resumen" && (

{/* Resumen principal */}

Resumen Crediticio

Calificación Actual

{renderCalificacion(documentosData.actual)}

{documentosData.actual === documentosData.previo ? "Sin cambios" : documentosData.actual > documentosData.previo ? "Mejoró" : "Empeoró"}

Deuda Total

S/ {documentosData.deudaTotal}

Actualizado al {documentosData.fechaProceso}

Entidades Financieras

{deudaSBSData.length}

Con deuda reportada

{/* Semáforo de los últimos 4 meses */}

Semáforo de los últimos 4 meses

{semaforoData.slice(0, 24).map((valor, index) => (

{renderSemaforo(valor)}

))}

Normal

CPP

Dudoso

Deficiente

Sin información

{/* Detalle de la deuda SBS/Microfinanzas */}

Detalle de la deuda SBS/Microfinanzas

{deudaSBSData.map((item, index) => ( ))}

Entidad	Calificación	Monto	Días Vencidos	Fecha Reporte
{item.entidad}	{item.calificacion}	S/ {item.monto}	{item.diasVencidos}	{item.fechaReporte}

{/* Documento de Identidad Consultado */}

Documento de Identidad Consultado

Tipo de Documento: {documentosData.tipoDoc}

Número de Documento: {documentosData.nDoc}

Nombre/Razón Social: {documentosData.nombreRazon}

Fecha de Consulta: {documentosData.fechaProceso}

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

{/* Detalle de la deuda SBS/Microfinanzas */}

Detalle de la deuda SBS/Microfinanzas

{deudaSBSData.map((item, index) => ( ))}

Entidad	Calificación	Monto	Días Vencidos	Fecha Reporte
{item.entidad}	{item.calificacion}	S/ {item.monto}	{item.diasVencidos}	{item.fechaReporte}

{/* Detalle Vencidos */}

Detalle Vencidos

Entidad	Cantidad Docs	Fuente	Monto	Días Vencidos
No records available.

{/* Utilización de Líneas de Crédito */}

Utilización de Líneas de Crédito

Entidad	Tipo Cuenta	Línea Aprobada	Línea No Utilizada	Línea Utilizada
No records available.

{/* Otros Documentos de Identidad Relacionados */}

Otros Documentos de Identidad Relacionados

No se encontraron documentos relacionados.

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

{/* Posición Histórica */}

Posición Histórica

{posicionHistorica.map((item, index) => ( ))}

Fecha	Semáforo	Score	Num. Entidades	Deuda Total	% Cal. Normal	Peor Calificación	Deuda Vencida
{item.fecha}	{renderSemaforo(item.semaforo)}	{item.score}	{item.numEntidades}	S/ {item.deudaTotal}	{item.porcentajeCalificacionNormal}%	{renderCalificacion(item.peorCalificacion)}	{item.deudaVencida \|\| "0"}

{/* Gráfico de evolución de deuda */}

Evolución de Deuda Total

Gráfico de evolución de deuda (Componente de gráfico se implementaría aquí)

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

{/* Datos Generales */}

Datos Generales

Fecha de Nacimiento: {datosGenerales.fechaNacimiento}

Género: {datosGenerales.genero}

Dígito Verificador: {datosGenerales.digitoVerificador || "No disponible"}

Dígito Verificador Anterior: {datosGenerales.digitoVerificadorAnterior || "No disponible"}

{/* Datos Principales */}

Datos Principales

Ruc	Razón Social	Nombre Comercial	Tipo de Contribuyente	Estado de Contribuyente	Condición Contribuyente	Dependencia
{datosPrincipales.ruc \|\| "No disponible"}	{datosPrincipales.razonSocial \|\| "No disponible"}	{datosPrincipales.nombreComercial \|\| "No disponible"}	{datosPrincipales.tipoContribuyente \|\| "No disponible"}	{datosPrincipales.estadoContribuyente \|\| "No disponible"}	{datosPrincipales.condicionContribuyente \|\| "No disponible"}	{datosPrincipales.dependencia \|\| "No disponible"}

CIIU	Inicio de Actividad	Carnet Patronal	Folio	Asiento	Teléfono 1	Teléfono 2	Teléfono 3
{datosPrincipales.ciiu \|\| "No disponible"}	{datosPrincipales.inicioActividad}	{datosPrincipales.carnetPatronal \|\| "No disponible"}	{datosPrincipales.folio \|\| "No disponible"}	{datosPrincipales.asiento \|\| "No disponible"}	{datosPrincipales.telefono1 \|\| "No disponible"}	{datosPrincipales.telefono2 \|\| "No disponible"}	{datosPrincipales.telefono3 \|\| "No disponible"}

{/* Direcciones Registradas */}

Direcciones Registradas

Dirección	Fuente
No se encontraron direcciones registradas.

)}

{/* Pie del modal */}

La información mostrada corresponde a la última actualización disponible.

) } [V0_FILE]typescriptreact:file="components/historial-crediticio-button.tsx" isMerged="true" "use client" import { useState } from "react" import { HistorialCrediticioModal } from "./historial-crediticio-modal" interface HistorialCrediticioButtonProps { clienteId: string clienteData?: any } export function HistorialCrediticioButton({ clienteId, clienteData }: HistorialCrediticioButtonProps) { const [isModalOpen, setIsModalOpen] = useState(false) const handleOpenModal = () => { setIsModalOpen(true) } const handleCloseModal = () => { setIsModalOpen(false) } return ( <> ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/historial-crediticio-table.tsx" isMerged="true" "use client" import { HistorialCrediticioButton } from "@/components/historial-crediticio-button" // Datos de ejemplo para el historial crediticio const historialCrediticioData = [ { id: "1", fechaProceso: "24/03/2025", tipoDoc: "D", nDoc: "77137267", nombreRazon: "QUISPE MAMANI GILMER", score: "0.0000", deudaTotal: "3601.21", actual: 4, previo: 4, m12: "", }, { id: "2", fechaProceso: "24/02/2025", tipoDoc: "D", nDoc: "12345678", nombreRazon: "RODRIGUEZ PEREZ MARIA", score: "0.0000", deudaTotal: "1250.00", actual: 4, previo: 3, m12: "", }, ] export default function HistorialCrediticioTable() { return (

Documentos

{historialCrediticioData.map((item) => ( ))}

Fecha Proceso	Tipo Doc	N. Doc	Nombre/Razón Social	Score	Deuda Total	Actual	Previo	12m	Acciones
{item.fechaProceso}	{item.tipoDoc}	{item.nDoc}	{item.nombreRazon}	{item.score}	{item.deudaTotal}	{item.actual}	{item.previo}	{item.m12}

) } [V0_FILE]typescriptreact:file="components/oportunidad-venta-cruzada-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Save, AlertCircle, Loader2, Check } from "lucide-react" import { Button } from "@/components/ui/button" interface OportunidadVentaCruzadaModalProps { isOpen: boolean onClose: () => void oportunidad: { programa: string } } export function OportunidadVentaCruzadaModal({ isOpen, onClose, oportunidad }: OportunidadVentaCruzadaModalProps) { const [comentario, setComentario] = useState("") const [horaContacto, setHoraContacto] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [submitSuccess, setSubmitSuccess] = useState(false) const [submitError, setSubmitError] = useState("") // Establecer la hora actual cuando se abre el modal useEffect(() => { if (isOpen) { const now = new Date() const formattedDate = now.toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric", }) const formattedTime = now.toLocaleTimeString("es-ES", { hour: "2-digit", minute: "2-digit", second: "2-digit", }) setHoraContacto(`${formattedDate} ${formattedTime}`) // Reset states when opening modal setSubmitSuccess(false) setSubmitError("") setComentario("") } }, [isOpen]) if (!isOpen) return null const handleSubmit = async () => { try { setIsSubmitting(true) setSubmitError("") // Preparar los datos para enviar const formData = { programa: oportunidad.programa, horaContacto, comentario, centroCosto: "TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA", asignadoActividades: "Asesor 12", tipoDato: "venta cruzada", origen: "llamada telefonica", faseOportunidad: "IT", referidoPor: "Alvarez prueba", } // Simular una llamada a la API await new Promise((resolve) => setTimeout(resolve, 1500)) // Simular éxito console.log("Datos enviados:", formData) setSubmitSuccess(true) // Cerrar el modal después de un breve retraso setTimeout(() => { onClose() }, 1500) } catch (error) { console.error("Error al enviar datos:", error) setSubmitError("Ocurrió un error al guardar la oportunidad. Por favor, inténtelo de nuevo.") } finally { setIsSubmitting(false) } } return (

{/* Cabecera del modal */}

Oportunidad de Venta Cruzada - {oportunidad.programa}

{/* Contenido del modal */}

{submitSuccess ? (

¡La oportunidad se ha guardado correctamente!

El modal se cerrará automáticamente...

) : (

{/* Columna 1: Datos del Alumno */}

Datos del Alumno

Hora Contacto

Fecha y hora en que se registró el contacto

Comentario de la Actividad

{/* Columna 2: Datos de la Oportunidad */}

Datos de la Oportunidad

Programa:

{oportunidad.programa}

Centro de Costo:

TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA

Asignado Actividades:

Asesor 12

Tipo de Dato:

venta cruzada

Origen:

llamada telefonica

Fase de Oportunidad:

Referido por:

Alvarez prueba

)} {submitError &&

{submitError}

}

{/* Pie del modal */}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase5/fase5-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" export default function Fase5Content() { const [expandedSections, setExpandedSections] = useState({ convenioVoz: false, reporteIncidencia: false, }) const toggleSection = (section: string) => { setExpandedSections((prev) => ({ ...prev, [section]: !prev[section], })) } return <> } [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="components/floating-action-button.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/router" import { PlusIcon } from "@heroicons/react/24/solid" export const FloatingActionButton = () => { const [isVisible, setIsVisible] = useState(false) const router = useRouter() const text = "Crear Incidencia" const icon = useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY setIsVisible(scrollPosition > 200) } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, []) const handleClick = () => { router.push("/incidencias/new") } return ( ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-resumen-comentarios.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" export default function SectionResumenComentarios() { const [isOpen, setIsOpen] = useState(false) // Datos de ejemplo para los comentarios const comentarios = [ { fecha: "24/04/2025", hora: "01:04 PM", duracion: "0 m (IP → IP)", duracionTipo: "cero", estado: "Reprogramado", tipoEstado: "reprogramado", comentario: "No responde llamada y se va a buzón de voz", notaAdicional: "Sin Comentario", notaColor: "text-red-500", }, { fecha: "24/04/2025", hora: "11:06 AM", duracion: " (IP → IP)", duracionTipo: "vacio", estado: "Ejecutado", tipoEstado: "ejecutado", comentario: "Está realmente interesado en el programa", notaAdicional: "24/04", notaColor: "text-gray-600", }, { fecha: "14/04/2025", hora: "11:28 AM", duracion: " (IP → IP)", duracionTipo: "vacio", estado: "Ejecutado", tipoEstado: "ejecutado", comentario: "Está realmente interesado en el programa", notaAdicional: "Prueba 14/04", notaColor: "text-gray-600", }, { fecha: "11/04/2025", hora: "05:03 PM", duracion: " (IP → IP)", duracionTipo: "vacio", estado: "Ejecutado", tipoEstado: "ejecutado", comentario: "Está realmente interesado en el programa", notaAdicional: "Prueba 11/04", notaColor: "text-gray-600", }, { fecha: "10/04/2025", hora: "12:33 PM", duracion: " (IP → IP)", duracionTipo: "vacio", estado: "Ejecutado", tipoEstado: "ejecutado", comentario: "Está realmente interesado en el programa", notaAdicional: "Sin Comentario", notaColor: "text-red-500", }, ] return (

{/* Cabecera eliminada */} {/* Contenido desplegable */} {isOpen && (

{comentarios.map((comentario, index) => ( ))}

Fecha y Hora	Comentario
{comentario.fecha} \| {comentario.hora} {/* Estado - Ahora primero /} {comentario.tipoEstado === "ejecutado" && ( )} {comentario.tipoEstado === "reprogramado" && ( )} {comentario.estado} {/ Duración - Ahora segundo */} {comentario.duracionTipo === "cero" && ( 0 m (IP → IP) )}	{comentario.comentario} {comentario.notaAdicional}

{/* Paginación */}

Página

{}} />

de 3

items por página

1 - 5 de 23 items

)}

) } [V0_FILE]typescriptreact:file="components/portal.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { createPortal } from "react-dom" interface PortalProps { children: React.ReactNode } export function Portal({ children }: PortalProps) { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) return () => setMounted(false) }, []) return mounted ? createPortal(children, document.body) : null } [V0_FILE]typescriptreact:file="contexts/email-modal-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" import { EmailTemplateModal } from "@/components/email-template-modal" import { EmailEditorModal } from "@/components/email-editor-modal" interface EmailModalContextType { openTemplateModal: (recipientEmail: string) => void } const EmailModalContext = createContext(undefined) export function EmailModalProvider({ children }: { children: ReactNode }) { const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false) const [isEmailEditorOpen, setIsEmailEditorOpen] = useState(false) const [selectedTemplate, setSelectedTemplate] = useState("") const [recipientEmail, setRecipientEmail] = useState("") const openTemplateModal = (email: string) => { setRecipientEmail(email) setIsTemplateModalOpen(true) } const handleTemplateSelected = (template: string) => { setSelectedTemplate(template) setIsTemplateModalOpen(false) setIsEmailEditorOpen(true) } const handleCloseEmailEditor = () => { setIsEmailEditorOpen(false) setSelectedTemplate("") } return ( {children} setIsTemplateModalOpen(false)} onSelectTemplate={handleTemplateSelected} /> ) } export function useEmailModal() { const context = useContext(EmailModalContext) if (context === undefined) { throw new Error("useEmailModal must be used within an EmailModalProvider") } return context } [V0_FILE]png:file="public/professional-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-MVQzBgqCWCm5OITNqIsbe1y1jZinpg.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-headshot-oeWONwTZBy5Zy36DN3TqchWC4Xo6BO.png" isMerged="true" [V0_FILE]typescriptreact:file="components/email-template-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Portal } from "./portal" interface EmailTemplateModalProps { isOpen: boolean onClose: () => void onSelectTemplate: (template: string) => void } export function EmailTemplateModal({ isOpen, onClose, onSelectTemplate }: EmailTemplateModalProps) { const [isDropdownOpen, setIsDropdownOpen] = useState(false) const [selectedTemplate, setSelectedTemplate] = useState("") if (!isOpen) return null const emailTemplates = [ "Carta de Presentación", "Confirmación de participación", "Correo Confirmación de Participación", "Correo de Propuesta de Pago", "Correo Información de Carrera Técnica", "Correo Información de la Carrera", "Correo Información del Curso Completo", "Correo Información del Programa - CETPRO", "Propuesta Personalizada de Pagos + Link 1° Clase", ] const handleSelectTemplate = (template: string) => { setSelectedTemplate(template) setIsDropdownOpen(false) } const handleGenerateEmail = () => { if (selectedTemplate) { onSelectTemplate(selectedTemplate) } } return (

Generar mensaje - Seleccione plantilla

setIsDropdownOpen(!isDropdownOpen)} > {selectedTemplate || "Seleccione una plantilla..."} ▼

{isDropdownOpen && (

{emailTemplates.map((template, index) => (

handleSelectTemplate(template)} > {template}

))}

)}

) } [V0_FILE]typescriptreact:file="components/email-editor-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Upload } from "lucide-react" import { Button } from "@/components/ui/button" import { Portal } from "./portal" interface EmailEditorModalProps { isOpen: boolean onClose: () => void templateName: string recipientEmail: string } export function EmailEditorModal({ isOpen, onClose, templateName, recipientEmail }: EmailEditorModalProps) { const [emailSubject, setEmailSubject] = useState(`BSG Institute - ${templateName}`) const [emailTo, setEmailTo] = useState("") const [emailCc, setEmailCc] = useState("") const [emailContent, setEmailContent] = useState("") // Inicializar el correo del destinatario cuando se abre el modal useEffect(() => { if (isOpen && recipientEmail) { setEmailTo(recipientEmail) } }, [isOpen, recipientEmail]) if (!isOpen) return null // Generar contenido de correo basado en la plantilla seleccionada const generateEmailContent = () => { return `

Estimado(a) Prueba,

Según lo conversado le envío adjunto la carta de presentación de nuestro programa "Curso Oficial AWS Certified Solutions Architect - Associate" junto con la propuesta corporativa para "X" personas.

Revísela por favor, estamos en contacto.

Saludos,

` } // Inicializar el contenido del correo cuando se abre el modal if (emailContent === "" && isOpen) { setEmailContent(generateEmailContent()) } const handleSendEmail = () => { // Aquí iría la lógica para enviar el correo console.log("Enviando correo:", { emailTo, emailCc, emailSubject, emailContent }) onClose() } return (

Redactar Mensaje

{/* Asunto del correo */}

setEmailSubject(e.target.value)} className="w-full border rounded-md p-2 text-sm" placeholder="Asunto" />

{/* Destinatario */}

setEmailTo(e.target.value)} className="w-full border rounded-md p-2 text-sm" placeholder="Para:" />

{/* CC */}

setEmailCc(e.target.value)} className="w-full border rounded-md p-2 text-sm" placeholder="Cc:" />

{/* Selector de archivos */}

Drop files here to select

{/* Barra de herramientas del editor */}

| | |

{/* Contenido del correo */}

setEmailContent(e.currentTarget.innerHTML)} />

) } [V0_FILE]typescriptreact:file="components/whatsapp-template-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Portal } from "./portal" interface WhatsAppTemplateModalProps { isOpen: boolean onClose: () => void onSelectTemplate: (template: string) => void } export function WhatsAppTemplateModal({ isOpen, onClose, onSelectTemplate }: WhatsAppTemplateModalProps) { const [isDropdownOpen, setIsDropdownOpen] = useState(false) const [selectedTemplate, setSelectedTemplate] = useState("") const [selectedTemplateText, setSelectedTemplateText] = useState("") const whatsappTemplates = [ "Corte de Llamada", "Día 1 sin Contacto", "Día 3 sin Contacto", "Retomar Conversación", "Validación Envío de Información", "Validación Revisión de Información", ] const templateTexts: Record = { "Corte de Llamada": "Estimado Joseph, se cortó la comunicación, por favor quedo atento a que me comentes tus consultas por este medio, o que me puedas indicar el horario en el cual me puedo comunicar contigo para poder explicarte el alcance de nuestro programa.", "Día 1 sin Contacto": "Hola Joseph, te saluda Asesor 12 de BSG INSTITUTE, solicitaste información sobre nuestro Curso. Estoy a tu disposición para cualquier consulta.", "Día 3 sin Contacto": "Hola Joseph, soy Asesor 12 de BSG INSTITUTE, he intentado comunicarme nuevamente contigo, sigo atento a tus consultas.", "Retomar Conversación": "Hola Joseph, disculpa que no te pude atender, para poder continuar con la comunicación y poder resolver todas tus dudas.", "Validación Envío de Información": "Hola Joseph, te saluda Asesor 12 de BSG INSTITUTE, nos comunicamos hace un momento para verificar si recibiste la información.", "Validación Revisión de Información": "Hola Joseph, soy Asesor 12 de BSG INSTITUTE, ¿Pudo revisar la información enviada?", } useEffect(() => { if (selectedTemplate) { setSelectedTemplateText(templateTexts[selectedTemplate] || "") } else { setSelectedTemplateText("") } }, [selectedTemplate]) if (!isOpen) return null const handleSelectTemplate = (template: string) => { setSelectedTemplate(template) setIsDropdownOpen(false) } const handleApplyTemplate = () => { if (selectedTemplateText) { onSelectTemplate(selectedTemplateText) onClose() } } return (

Plantillas para WhatsApp

setIsDropdownOpen(!isDropdownOpen)} > {selectedTemplate || "Seleccione una plantilla..."} ▼

{isDropdownOpen && (

{whatsappTemplates.map((template, index) => (

handleSelectTemplate(template)} > {template}

))}

)}

{selectedTemplateText && (

{selectedTemplateText}

)}

) } [V0_FILE]typescriptreact:file="app/layout-with-chat.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import ChatInterface from "@/components/chat-interface" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Integra - Plataforma de Gestión", description: "Sistema integrado de gestión comercial y académica", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]png:file="public/thoughtful-man-glasses.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thoughtful-man-glasses-rQI2rGuIjFhOZ8n4c4kWbpZmETo92U.png" isMerged="true" [V0_FILE]png:file="public/short-haired-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/short-haired-woman-aQMf9aRGSUhhiJQuEGEXbnKRtWVUXz.png" isMerged="true" [V0_FILE]png:file="public/young-man-contemplative.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-man-contemplative-gympfyBXrLMi0ZvNtAV4OGgHep6o5q.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-diverse.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-diverse-x99qTJySpGBT4ECiP8mYYq54It3qRx.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-list.tsx" isMerged="true" "use client" import { ScrollArea } from "@/components/ui/scroll-area" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import type { User } from "@/lib/types" interface UserListProps { users: User[] onSelectUser: (user: User) => void } // Función para obtener las iniciales de un nombre const getInitials = (name: string): string => { return name .split(" ") .map((word) => word[0]) .join("") .toUpperCase() .substring(0, 2) // Limitar a 2 caracteres } export default function UserList({ users, onSelectUser }: UserListProps) { const activeUsers = users.filter((user) => user.status === "active") const pendingUsers = users.filter((user) => user.status === "pending") return ( Activos {activeUsers.length > 0 && ( {activeUsers.length} )} Pendientes {pendingUsers.length > 0 && ( {pendingUsers.length} )} ) } function UserListContent({ users, onSelectUser }: UserListProps) { return (

{users.length === 0 ? (

No hay conversaciones

) : ( users.map((user) => (

onSelectUser(user)} >

{user.source === "whatsapp" ? ( ) : ( {getInitials(user.name)} )}

{user.name}

{user.lastMessageTime}

{user.lastMessage}

{user.unread > 0 && ( {user.unread} )}

{user.source === "whatsapp" ? "WhatsApp" : "Portal web"}

)) )}

) } [V0_FILE]typescriptreact:file="lib/types.ts" isQuickEdit="true" isMerged="true" export interface User { id: string name: string avatar?: string source: "whatsapp" | "website" status: "active" | "pending" | "closed" lastMessage: string lastMessageTime: string unread: number course?: string modality?: string location?: string phase?: string } export interface Message { id: string userId: string content: string timestamp: string isUser: boolean } [V0_FILE]typescriptreact:file="components/seguimiento-item.tsx" isMerged="true" "use client" import type { ReactNode } from "react" import { InstantTooltip } from "./instant-tooltip" import { Phone, MessageSquare, Info } from "lucide-react" interface SeguimientoItemProps { id: string title: string hasTooltip?: boolean tooltipContent?: ReactNode onClick?: (id: string) => void onLlamadaClick?: (id: string) => void onWhatsAppClick?: (id: string) => void isHighlighted?: boolean } export function SeguimientoItem({ id, title, hasTooltip = false, tooltipContent, onClick, onLlamadaClick, onWhatsAppClick, isHighlighted = false, }: SeguimientoItemProps) { return (

onClick && onClick(id)} >

{isHighlighted ? "📄" : "📋"} {hasTooltip ? (

{title}

) : ( {title} )}

{(onLlamadaClick || onWhatsAppClick) && (

{onLlamadaClick && ( )} {onWhatsAppClick && ( )}

)}

) } [V0_FILE]typescriptreact:file="components/seguimiento-lista.tsx" isMerged="true" "use client" import { useState } from "react" import { SeguimientoItem } from "./seguimiento-item" import { SeguimientoModal } from "./seguimiento-modal" export function SeguimientoLista() { const [modalOpen, setModalOpen] = useState(false) const [tipoSeguimiento, setTipoSeguimiento] = useState<"llamada" | "whatsapp">("llamada") const [selectedItemId, setSelectedItemId] = useState(null) const handleLlamadaClick = (id: string) => { setSelectedItemId(id) setTipoSeguimiento("llamada") setModalOpen(true) } const handleWhatsAppClick = (id: string) => { setSelectedItemId(id) setTipoSeguimiento("whatsapp") setModalOpen(true) } const tooltipContentPagoGrabacion = (

Instrucciones según modalidad

Si es online (Perú y Colombia):

Indicarle que se le devolverá la llamada para realizar el contrato de voz.{" "} (absolver todas las dudas antes de devolver la llamada)
Solicitar la creación de accesos virtuales y explicar que en un plazo no mayor a 24 horas el coordinador académico asignado se pondrá en contacto con el cliente para que pueda iniciar su capacitación. (Solo online asincrónico)

Si es presencial:

Enviar correo Invitación a primera sesión de clases (solo para presencial y online sincrónico).

Si es online (Extranjero):

Explicarle la documentación que necesita llenar y confirmar cuando la estará remitiendo escaneada.

) return (

setModalOpen(false)} tipoSeguimiento={tipoSeguimiento} itemId={selectedItemId || undefined} />

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase4/convenio-voz.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Info } from "lucide-react" import { Button } from "@/components/ui/button" export function ConvenioVoz() { const [showTooltip, setShowTooltip] = useState(false) const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 }) const handleMouseEnter = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() setTooltipPosition({ top: rect.top + window.scrollY, left: rect.right + window.scrollX + 10, }) setShowTooltip(true) } const handleMouseLeave = () => { setShowTooltip(false) } return (

Confirma pago, se pacta fecha de grabación de contrato de voz (IS)

{showTooltip && (

Instrucciones según modalidad

Si es online (Perú y Colombia):

Indicarle que se le devolverá la llamada para realizar el contrato de voz.{" "} (absolver todas las dudas antes de devolver la llamada)
Solicitar la creación de accesos virtuales y explicar que en un plazo no mayor a 24 horas el coordinador académico asignado se pondrá en contacto con el cliente para que pueda iniciar su capacitación. (Solo online asincrónico)

Si es presencial:

Enviar correo Invitación a primera sesión de clases (solo para presencial y online sincrónico).

Si es online (Extranjero):

Explicarle la documentación que necesita llenar y confirmar cuando la estará remitiendo escaneada.

)}

{/* Hide the original instructions section */}

Instrucciones según modalidad

Si es online (Perú y Colombia):

Indicarle que se le devolverá la llamada para realizar el contrato de voz.{" "} (absolver todas las dudas antes de devolver la llamada)
Solicitar la creación de accesos virtuales y explicar que en un plazo no mayor a 24 horas el coordinador académico asignado se pondrá en contacto con el cliente para que pueda iniciar su capacitación. (Solo online asincrónico)

Si es presencial:

Enviar correo Invitación a primera sesión de clases (solo para presencial y online sincrónico).

Si es online (Extranjero):

Explicarle la documentación que necesita llenar y confirmar cuando la estará remitiendo escaneada.

) } [V0_FILE]typescriptreact:file="components/instant-tooltip.tsx" isMerged="true" "use client" import { useState, useRef, useEffect, type ReactNode } from "react" interface InstantTooltipProps { content: ReactNode children: ReactNode position?: "top" | "right" | "bottom" | "left" width?: string } export function InstantTooltip({ content, children, position = "right", width = "400px" }: InstantTooltipProps) { const [isVisible, setIsVisible] = useState(false) const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 }) const triggerRef = useRef(null) const tooltipRef = useRef(null) const handleMouseEnter = () => { if (triggerRef.current) { const rect = triggerRef.current.getBoundingClientRect() let top = 0 let left = 0 switch (position) { case "top": top = rect.top + window.scrollY - 10 left = rect.left + window.scrollX + rect.width / 2 break case "right": top = rect.top + window.scrollY + rect.height / 2 left = rect.right + window.scrollX + 10 break case "bottom": top = rect.bottom + window.scrollY + 10 left = rect.left + window.scrollX + rect.width / 2 break case "left": top = rect.top + window.scrollY + rect.height / 2 left = rect.left + window.scrollX - 10 break } setTooltipPosition({ top, left }) setIsVisible(true) } } const handleMouseLeave = () => { setIsVisible(false) } // Adjust position after tooltip is rendered to ensure it stays in viewport useEffect(() => { if (isVisible && tooltipRef.current) { const tooltipRect = tooltipRef.current.getBoundingClientRect() const viewportWidth = window.innerWidth const viewportHeight = window.innerHeight let adjustedTop = tooltipPosition.top let adjustedLeft = tooltipPosition.left // Adjust horizontal position if needed if (position === "right" && tooltipRect.right > viewportWidth) { adjustedLeft = viewportWidth - tooltipRect.width - 10 } else if (position === "left" && tooltipRect.left < 0) { adjustedLeft = 10 } else if ((position === "top" || position === "bottom") && tooltipRect.right > viewportWidth) { adjustedLeft = tooltipPosition.left - (tooltipRect.right - viewportWidth) - 10 } else if ((position === "top" || position === "bottom") && tooltipRect.left < 0) { adjustedLeft = 10 } // Adjust vertical position if needed if (position === "bottom" && tooltipRect.bottom > viewportHeight) { adjustedTop = viewportHeight - tooltipRect.height - 10 } else if (position === "top" && tooltipRect.top < 0) { adjustedTop = 10 } else if ((position === "left" || position === "right") && tooltipRect.bottom > viewportHeight) { adjustedTop = tooltipPosition.top - (tooltipRect.bottom - viewportHeight) - 10 } else if ((position === "left" || position === "right") && tooltipRect.top < 0) { adjustedTop = 10 } if (adjustedTop !== tooltipPosition.top || adjustedLeft !== tooltipPosition.left) { setTooltipPosition({ top: adjustedTop, left: adjustedLeft }) } } }, [isVisible, position, tooltipPosition]) return (

{children} {isVisible && (

{content}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/empleado/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import { EmpleadoSidebar } from "@/components/empleado-sidebar" import { EmpleadoTopBar } from "@/components/empleado-top-bar" import { EmpleadoInfoBar } from "@/components/empleado-info-bar" import "./empleado.css" export const metadata = { title: "Integra CRM - Gestión del Desempeño por Empleado", description: "Sistema de gestión del desempeño por empleado para Integra CRM", } export default function EmpleadoLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/gestion-desempeno/configuracion/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import { GestionDesempenoSidebar } from "@/components/gestion-desempeno-sidebar" import { GestionDesempenoTopBar } from "@/components/gestion-desempeno-top-bar" import { GestionDesempenoInfoBar } from "@/components/gestion-desempeno-info-bar" import "./gestion-desempeno.css" export const metadata = { title: "Integra CRM - Gestión del Desempeño", description: "Sistema de gestión del desempeño para Integra CRM", } export default function GestionDesempenoLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowUpRight, Users, DollarSign, TrendingUp, FileText } from "lucide-react" import { SalesChart } from "@/components/sales-chart" import { ContactsChart } from "@/components/contacts-chart" import { DataReceivedChart } from "@/components/data-received-chart" // Importar el componente de Parámetros Generales al inicio del archivo import { ParametrosGeneralesContent } from "@/components/parametros-generales-content" import { useSearchParams } from "next/navigation" // Modificar la función Home para incluir la lógica de mostrar el contenido de Parámetros Generales export default function Home() { // Usar searchParams para detectar si debemos mostrar el contenido de Parámetros Generales const searchParams = useSearchParams() const showParametrosGenerales = searchParams.get("view") === "parametros-generales" // Si showParametrosGenerales es true, mostrar el contenido de Parámetros Generales if (showParametrosGenerales) { return } // Si no, mostrar el dashboard normal return (

Dashboard

Día Semana Mes

Ventas del Mes

S/. 45,231.89

+20.1% {" "} respecto al mes anterior

Personas Contactadas

1,245

+10.5% {" "} respecto al mes anterior

Número de Ventas

349

+12.3% {" "} respecto al mes anterior

Datos Recibidos

2,573

+18.7% {" "} respecto al mes anterior

Ventas Mensuales Comparativa de ventas de los últimos 6 meses Contactos por Fuente Distribución de contactos según su origen

Datos Recibidos Evolución de datos recibidos en los últimos 30 días Rendimiento por Programa Ventas por programa educativo

Maestría en Gestión Pública 78%

Diplomado en Gestión de Proyectos 65%

Curso de Contrataciones del Estado 52%

Especialización en Finanzas 45%

Otros programas 38%

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } /** * Formatea una hora en formato de 24 horas a formato AM/PM * @param time Hora en formato "HH:MM" (24 horas) * @returns Hora en formato "h:MM AM/PM" */ export function formatTimeToAMPM(time: string): string { if (!time) return "" const [hours, minutes] = time.split(":").map(Number) if (isNaN(hours) || isNaN(minutes)) return time 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}` } /** * Formatea una fecha y hora completa a formato AM/PM * @param dateTimeString Fecha y hora en formato ISO o similar * @returns Fecha y hora con el tiempo en formato AM/PM */ export function formatDateTimeToAMPM(dateTimeString: string): string { if (!dateTimeString) return "" try { const date = new Date(dateTimeString) if (isNaN(date.getTime())) return dateTimeString const hours = date.getHours() const minutes = date.getMinutes() const period = hours >= 12 ? "PM" : "AM" const formattedHours = hours % 12 || 12 const day = date.getDate().toString().padStart(2, "0") const month = (date.getMonth() + 1).toString().padStart(2, "0") const year = date.getFullYear() return `${day}/${month}/${year} ${formattedHours}:${minutes.toString().padStart(2, "0")} ${period}` } catch (error) { return dateTimeString } } [V0_FILE]typescriptreact:file="components/email-viewer-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import type React from "react" import { X, Reply, ChevronDown, ChevronRight, Paperclip } from "lucide-react" import { Button } from "@/components/ui/button" import { Portal } from "./portal" import { formatTimeToAMPM } from "@/lib/utils" interface EmailMessage { id: string sender: { name: string email: string avatar?: string } recipient: { name: string email: string } subject: string content: string date: string isRead: boolean } interface EmailThread { id: string subject: string messages: EmailMessage[] } interface EmailViewerModalProps { isOpen: boolean onClose: () => void emailData: { sender: string recipient: string subject: string content: string date?: string } } export function EmailViewerModal({ isOpen, onClose, emailData }: EmailViewerModalProps) { const [isReplying, setIsReplying] = useState(false) const [replyContent, setReplyContent] = useState("") const [ccValue, setCcValue] = useState("") const [isTemplateDropdownOpen, setIsTemplateDropdownOpen] = useState(false) const [selectedTemplate, setSelectedTemplate] = useState("") const [expandedMessages, setExpandedMessages] = useState>({}) const [selectedFiles, setSelectedFiles] = useState([]) // Simular un hilo de conversación basado en el emailData proporcionado const emailThread: EmailThread = { id: "thread-1", subject: emailData.subject, messages: [ { id: "msg-1", sender: { name: "Joseph Alvarez", email: "joseph.alvarez@example.com", avatar: "JA", }, recipient: { name: "BSG Institute", email: "info@bsginstitute.com", }, subject: emailData.subject, content: `Hola equipo de BSG Institute,

Gracias por la información enviada sobre el curso de AWS Certified Solutions Architect. Estoy interesado en inscribirme y quisiera saber cuáles son los próximos pasos a seguir.

También tengo algunas preguntas adicionales:
¿Cuál es la duración exacta del programa?
¿Hay opciones de financiamiento disponibles?
¿Se entrega algún certificado al finalizar el curso?

Quedo atento a su respuesta.

Saludos cordiales,
Joseph Alvarez`, date: "25/04/2023 | 10:15 AM", isRead: true, }, { id: "msg-2", sender: { name: "Yessica Palomino", email: "yessica.palomino@bsginstitute.com", avatar: "YP", }, recipient: { name: "Joseph Alvarez", email: "joseph.alvarez@example.com", }, subject: "Re: " + emailData.subject, content: `Estimado Joseph,

Gracias por su interés en nuestro curso de AWS Certified Solutions Architect. Con gusto respondo a sus preguntas:

Duración del programa: El curso tiene una duración de 12 semanas, con 2 sesiones semanales de 2 horas cada una.

Opciones de financiamiento: Sí, contamos con planes de pago en cuotas sin intereses y un descuento del 15% por pago completo anticipado.

Certificación: Al finalizar el curso, recibirá un certificado de BSG Institute. Adicionalmente, estará preparado para rendir el examen oficial de AWS, el cual tiene un costo adicional.

Para proceder con la inscripción, necesitaríamos que complete el formulario adjunto y realice el pago inicial de matrícula. Puede hacerlo a través de nuestra plataforma web o mediante transferencia bancaria.

¿Tiene alguna otra consulta o le gustaría proceder con la inscripción?

Saludos cordiales,
Yessica Palomino
Asesora Académica
BSG Institute`, date: "26/04/2023 | 2:30 PM", isRead: true, }, { id: "msg-3", sender: { name: "Joseph Alvarez", email: "joseph.alvarez@example.com", avatar: "JA", }, recipient: { name: "Yessica Palomino", email: "yessica.palomino@bsginstitute.com", }, subject: "Re: " + emailData.subject, content: `Hola Yessica,

Muchas gracias por la información detallada. Me interesa proceder con la inscripción.

Sin embargo, tengo una consulta adicional: ¿Las clases son en vivo o son grabadas? Pregunto porque mi horario laboral es variable y me gustaría saber si tendré acceso a las grabaciones en caso de no poder asistir a alguna sesión.

También, ¿podrían enviarme más detalles sobre el temario completo del curso?

Saludos,
Joseph`, date: "27/04/2023 | 9:45 AM", isRead: true, }, { id: "msg-4", sender: { name: "Yessica Palomino", email: "yessica.palomino@bsginstitute.com", avatar: "YP", }, recipient: { name: "Joseph Alvarez", email: "joseph.alvarez@example.com", }, subject: "Re: " + emailData.subject, content: `Estimado Joseph,

Me alegra saber que está interesado en proceder con la inscripción.

Respecto a sus consultas:

Modalidad de clases: Las clases son en vivo a través de nuestra plataforma virtual, pero todas quedan grabadas y disponibles para los estudiantes durante todo el curso y hasta 6 meses después de finalizado. Esto le permitirá revisar las sesiones en caso de no poder asistir o si desea repasar algún tema.

Temario del curso: Adjunto encontrará el PDF con el temario completo del curso. Algunos de los temas principales incluyen:
- Introducción a AWS y computación en la nube
- Servicios fundamentales: EC2, S3, RDS, VPC
- Arquitectura de aplicaciones en la nube
- Seguridad y cumplimiento
- Optimización de costos
- Preparación para el examen de certificación

Le envío también el formulario de inscripción y los datos para realizar el pago de la matrícula. Una vez completados estos pasos, recibirá las credenciales de acceso a nuestra plataforma y podrá comenzar con el material preliminar antes del inicio oficial del curso.

Quedo atenta a sus comentarios y a disposición para cualquier otra consulta.

Saludos cordiales,
Yessica Palomino
Asesora Académica
BSG Institute`, date: "27/04/2023 | 2:30 PM", isRead: false, }, ], } // Inicializar mensajes expandidos - solo el último expandido por defecto useEffect(() => { const initialExpandedState: Record = {} emailThread.messages.forEach((msg, index) => { // Solo el último mensaje expandido por defecto initialExpandedState[msg.id] = index === emailThread.messages.length - 1 }) setExpandedMessages(initialExpandedState) }, []) const toggleMessageExpansion = (messageId: string) => { setExpandedMessages((prev) => ({ ...prev, [messageId]: !prev[messageId], })) } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files) { const filesArray = Array.from(e.target.files) setSelectedFiles((prev) => [...prev, ...filesArray]) } } const removeFile = (index: number) => { setSelectedFiles((prev) => prev.filter((_, i) => i !== index)) } const emailTemplates = [ "Respuesta - Solicitud de información adicional", "Respuesta - Confirmación de recepción", "Respuesta - Propuesta de reunión", "Respuesta - Aclaración de dudas", "Respuesta - Seguimiento de inscripción", "Respuesta - Información complementaria", "Respuesta - Agradecimiento por contacto", "Respuesta - Derivación a otro departamento", "Respuesta - Solicitud de documentos", ] const handleSelectTemplate = (template: string) => { setSelectedTemplate(template) setIsTemplateDropdownOpen(false) // Simular contenido de plantilla según la selección let templateContent = "" switch (template) { case "Respuesta - Solicitud de información adicional": templateContent = `Estimado Joseph,\n\nGracias por su mensaje. Para poder atender mejor su solicitud sobre el curso AWS, necesitaríamos que nos proporcione la siguiente información adicional:\n\n- Nivel de conocimientos previos\n- Disponibilidad horaria\n- Objetivos específicos de aprendizaje\n\nQuedamos atentos a su respuesta.\n\nSaludos cordiales,\nEquipo de Atención al Cliente` break case "Respuesta - Confirmación de recepción": templateContent = `Estimado Joseph,\n\nHemos recibido su mensaje y estamos trabajando en darle respuesta lo antes posible. Nos pondremos en contacto con usted en un plazo máximo de 24 horas.\n\nGracias por su paciencia.\n\nSaludos cordiales,\nEquipo de Atención al Cliente` break default: templateContent = `Estimado Joseph,\n\nGracias por su mensaje. Estamos procesando su solicitud y nos pondremos en contacto con usted a la brevedad.\n\nSaludos cordiales,\nEquipo de Atención al Cliente` } setReplyContent(templateContent) } const handleSendReply = () => { // Aquí iría la lógica para enviar el correo alert("Respuesta enviada con éxito") setIsReplying(false) setReplyContent("") setSelectedTemplate("") setCcValue("") setSelectedFiles([]) } // Función para obtener iniciales del nombre const getInitials = (name: string) => { return name .split(" ") .map((part) => part[0]) .join("") .toUpperCase() .substring(0, 2) } // Función para obtener color basado en nombre const getAvatarColor = (name: string) => { const colors = [ "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-purple-500", "bg-pink-500", "bg-indigo-500", "bg-teal-500", "bg-orange-500", ] // Usar la suma de los códigos de caracteres para determinar el color const charSum = name.split("").reduce((sum, char) => sum + char.charCodeAt(0), 0) return colors[charSum % colors.length] } // Función para truncar el contenido a 3 líneas const truncateContent = (content: string) => { // Dividir por
y tomar solo las primeras 3 líneas const lines = content.split("
") const firstThreeLines = lines.slice(0, 3).join("
") // Si hay más de 3 líneas, añadir puntos suspensivos if (lines.length > 3) { return firstThreeLines + "..." } return firstThreeLines } // Función para formatear fechas y horas en formato AM/PM const formatDateTime = (dateTimeString: string) => { if (!dateTimeString) return "" // Si ya tiene formato AM/PM, devolverlo tal cual if (dateTimeString.includes("AM") || dateTimeString.includes("PM")) { return dateTimeString } // Si tiene formato de fecha y hora separados por | if (dateTimeString.includes("|")) { const [date, time] = dateTimeString.split("|").map((part) => part.trim()) return `${date} | ${formatTimeToAMPM(time)}` } // Si es solo hora if (dateTimeString.includes(":") && !dateTimeString.includes("/")) { return formatTimeToAMPM(dateTimeString) } return dateTimeString } if (!isOpen) return null return (

{emailThread.subject}

{/* Información del correo */}

Remitente:

{emailData.sender}

Destinatario:

{emailData.recipient}

Asunto:

{emailData.subject}

{/* Hilo de conversación */}

{emailThread.messages.map((message) => (

{message.sender.avatar || getInitials(message.sender.name)}

{message.sender.name} {formatDateTime(message.date)}

{/* Contenido del mensaje */}

{!expandedMessages[message.id] ? ( <>

) : ( <>

)}

))}

{/* Sección de respuesta */} {isReplying && (

Responder mensaje

{isTemplateDropdownOpen && (

{emailTemplates.map((template, index) => (

handleSelectTemplate(template)} > {template}

))}

)}

{/* Campo CC */}

CC: setCcValue(e.target.value)} placeholder="Añadir destinatarios en copia" />

{/* Selector de archivos */}

Adjuntos:

Seleccionar archivos o arrastre archivos aquí

{/* Lista de archivos seleccionados */} {selectedFiles.length > 0 && (

{selectedFiles.map((file, index) => (

{file.name} ({(file.size / 1024).toFixed(1)} KB)

))}

)}

{/* Barra de herramientas de formato exactamente igual a la imagen */}

{/* Grupo 1: B / U abc */} {/* Separador */}

{/* Grupo 2: x₂ x² */} {/* Separador */}

{/* Grupo 3: Alineación */} {/* Separador */}

{/* Grupo 4: Desplegables */}

setReplyContent(e.target.value)}
                />

<div className="flex justify-end mt-2.5 space-x-2.5">
                  <Button variant="outline" onClick={() => setIsReplying(false)} className="h-8 text-sm px-3.5">
                    Cancelar
                  </Button>
                  <Button
                    className="bg-[#6419e6] hover:bg-[#5314c5] h-8 text-sm px-3.5"
                    onClick={handleSendReply}
                    disabled={!replyContent.trim()}
                  >
                    Enviar respuesta
                  </Button>
                </div>
              </div>
            )}
          </div>

<div className="p-3.5 border-t flex justify-end">
            {!isReplying && (
              <div className="flex gap-3.5">
                <Button
                  variant="default"
                  className="bg-green-600 hover:bg-green-700 flex items-center h-8 text-sm px-3.5"
                  onClick={() => setIsReplying(true)}
                >
                  <Reply className="mr-1.5 h-3.5 w-3.5" />
                  Responder mensaje
                </Button>
                <Button variant="destructive" onClick={onClose} className="h-8 text-sm px-3.5">
                  Cerrar
                </Button>
              </div>
            )}
            {isReplying && (
              <Button variant="destructive" onClick={onClose} className="h-8 text-sm px-3.5">
                Cerrar
              </Button>
            )}
          </div>
        </div>
      </div>
    </Portal>
  )
}
[V0_FILE]typescriptreact:file="components/number-badge.tsx" isMerged="true"
"use client"

interface NumberBadgeProps {
  number: number | string
  className?: string
  size?: "sm" | "md" | "lg"
}

export default function NumberBadge({ number, className = "", size = "md" }: NumberBadgeProps) {
  // Determinar el tamaño del badge
  const sizeClasses = {
    sm: "h-5 w-5 text-xs",
    md: "h-6 w-6 text-sm",
    lg: "h-7 w-7 text-base",
  }

return (
    <div
      className={`bg-[#0a5d36] text-white font-semibold rounded-full flex items-center justify-center ${sizeClasses[size]} ${className}`}
    >
      {number}
    </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="components/notification-popup.tsx" isMerged="true"
"use client"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import type { User } from "@/lib/types"

// Función para obtener las iniciales de un nombre
const getInitials = (name: string): string => {
  return name
    .split(" ")
    .map((word) => word[0])
    .join("")
    .toUpperCase()
    .substring(0, 2) // Limitar a 2 caracteres
}

interface NotificationPopupProps {
  user: User
  message: string
  onClose: () => void
  onClick: () => void
}

export default function NotificationPopup({ user, message, onClose, onClick }: NotificationPopupProps) {
  return (
    <div className="mb-4 bg-white rounded-lg shadow-md p-3 w-[300px] border border-gray-200 animate-in slide-in-from-top-5">
      <div className="flex justify-between items-start mb-2">
        <div className="flex items-center space-x-2">
          <Avatar className="h-8 w-8">
            {user.source === "whatsapp" ? (
              <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
            ) : (
              <AvatarFallback className="bg-blue-500 text-white">{getInitials(user.name)}</AvatarFallback>
            )}
          </Avatar>
          <div>
            <p className="text-sm font-medium">{user.name}</p>
            <Badge
              variant="outline"
              className={`text-xs ${
                user.source === "whatsapp"
                  ? "bg-green-500 hover:bg-green-500 text-white border-green-500"
                  : "bg-blue-500 hover:bg-blue-500 text-white border-blue-500"
              }`}
            >
              {user.source === "whatsapp" ? "WhatsApp" : "Portal web"}
            </Badge>
          </div>
        </div>
        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>
      <p className="text-sm truncate mb-2">{message}</p>
      <Button variant="secondary" size="sm" className="w-full" onClick={onClick}>
        Responder
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navigation-tabs.tsx" isQuickEdit="true" isMerged="true"
// Si este archivo existe, necesitamos asegurarnos de que actualiza el hash cuando se cambia de pestaña
// Si no existe, no es necesario hacer cambios aquí

// Modificar este componente si es el que controla el menú horizontal
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/legal-documents.tsx" isMerged="true"
export default function LegalDocuments() {
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">Documentos Legales</h2>

<div className="space-y-6">
        <div className="border p-4 rounded-lg">
          <h3 className="text-lg font-semibold mb-2">Términos y Condiciones</h3>
          <p className="text-gray-600 mb-3">
            Documento legal que establece las reglas y lineamientos para el uso del programa.
          </p>
          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
            Descargar PDF
          </button>
        </div>

<div className="border p-4 rounded-lg">
          <h3 className="text-lg font-semibold mb-2">Política de Privacidad</h3>
          <p className="text-gray-600 mb-3">
            Información sobre cómo se recopilan, utilizan y protegen los datos personales.
          </p>
          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
            Descargar PDF
          </button>
        </div>

<div className="border p-4 rounded-lg">
          <h3 className="text-lg font-semibold mb-2">Contrato de Matrícula</h3>
          <p className="text-gray-600 mb-3">Acuerdo legal entre el estudiante y la institución educativa.</p>
          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
            Descargar PDF
          </button>
        </div>

<div className="border p-4 rounded-lg">
          <h3 className="text-lg font-semibold mb-2">Declaración de Consentimiento</h3>
          <p className="text-gray-600 mb-3">
            Documento para autorizar el uso de información personal con fines educativos.
          </p>
          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
            Descargar PDF
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/other-tab-content.tsx" isMerged="true"
import { Suspense } from "react"
import { tabComponents, type TabKey } from "./tab-registry"

interface OtherTabContentProps {
  activeTab: string
}

export default function OtherTabContent({ activeTab }: OtherTabContentProps) {
  console.log("OtherTabContent - activeTab:", activeTab)
  console.log("Available tabs:", Object.keys(tabComponents))

// Verificar si la pestaña existe en nuestro registro
  if (activeTab in tabComponents) {
    const TabComponent = tabComponents[activeTab as TabKey]

return (
      <Suspense fallback={<div className="p-4">Cargando contenido...</div>}>
        <TabComponent />
      </Suspense>
    )
  }

// Fallback para pestañas no registradas
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-xl font-bold mb-4">Contenido no disponible</h2>
      <p>El contenido para esta pestaña no está disponible actualmente.</p>
      <p className="mt-2 text-gray-500">Tab ID: {activeTab}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/speech.tsx" isMerged="true"
export default function SpeechTab() {
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">Speech</h2>
      <p className="text-gray-600">
        Este contenido se muestra normalmente a través del componente TabContent principal, no a través de
        OtherTabContent.
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/execute-button.tsx" isMerged="true"
"use client"

import type React from "react"
import { Play } from "lucide-react"
import { useComentario } from "@/contexts/comentario-context"

type ExecuteButtonProps = {
  color: "red" | "green" | "yellow"
  text?: string
  onClick?: () => void
  className?: string
}

export const ExecuteButton: React.FC<ExecuteButtonProps> = ({ color, text = "Ejecutar", onClick, className = "" }) => {
  const { setShowComentarioButton } = useComentario()

// Mapeo de colores a clases de Tailwind
  const colorClasses = {
    red: "bg-red-500 hover:bg-red-600",
    green: "bg-green-500 hover:bg-green-600",
    yellow: "bg-yellow-500 hover:bg-yellow-600",
  }

const handleClick = () => {
    // Mostrar el botón de comentarios cuando se ejecuta
    setShowComentarioButton(true)

// Llamar al onClick original si existe
    if (onClick) {
      onClick()
    }
  }

return (
    <button
      onClick={handleClick}
      className={`flex items-center gap-1 px-3 py-1 rounded-full text-white ${colorClasses[color]} ${className}`}
    >
      <div className="flex items-center justify-center w-4 h-4 rounded-full border border-white">
        <Play size={10} fill="white" className="ml-0.5" />
      </div>
      <span className="text-xs font-medium">{text}</span>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/chat-interface.tsx" isMerged="true"
"use client"
import type React from "react"
import { useState, useEffect } from "react"
import { X, MessageSquare, ArrowLeft } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"
import { usePathname } from "next/navigation"
import UserList from "./user-list"
import ChatWindow from "./chat-window"
import NotificationPopup from "./notification-popup"
import type { User as UserType, Message } from "@/lib/types"

// Sample data
const users: UserType[] = [
  {
    id: "1",
    name: "María García",
    avatar: "/thoughtful-man-glasses.png",
    source: "whatsapp",
    status: "active",
    lastMessage: "Necesito información sobre el programa LEAN SSSB",
    lastMessageTime: "10:30 AM",
    unread: 2,
    course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE",
    modality: "TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA",
    location: "Perú - Arequipa",
    phase: "IP",
  },
  {
    id: "2",
    name: "Juan Pérez",
    avatar: "/short-haired-woman.png",
    source: "website",
    status: "active",
    lastMessage: "¿Cuándo inicia el próximo curso?",
    lastMessageTime: "11:45 AM",
    unread: 0,
    course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE",
    modality: "TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA",
    location: "Perú - Lima",
    phase: "BNC",
  },
  {
    id: "3",
    name: "Ana Rodríguez",
    avatar: "/young-man-contemplative.png",
    source: "whatsapp",
    status: "pending",
    lastMessage: "Gracias por la información",
    lastMessageTime: "Yesterday",
    unread: 0,
    course: "LEAN SSSB ONLINE 2024 II LIMA",
    modality: "LEAN SSSB ONLINE 2024 II LIMA",
    location: "Perú - Cusco",
    phase: "IS",
  },
  {
    id: "4",
    name: "Carlos López",
    avatar: "/professional-woman-diverse.png",
    source: "website",
    status: "closed",
    lastMessage: "Ya realicé mi inscripción, muchas gracias",
    lastMessageTime: "Yesterday",
    unread: 0,
    course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE",
    modality: "TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA",
    location: "Perú - Trujillo",
    phase: "PF",
  },
]

// Sample messages for a conversation
const sampleMessages: Record<string, Message[]> = {
  "1": [
    {
      id: "m1",
      userId: "1",
      content: "Hola, necesito información sobre el programa LEAN SSSB",
      timestamp: "10:25 AM",
      isUser: true,
    },
    {
      id: "m2",
      userId: "agent",
      content:
        "Hola María, con gusto te ayudo. El programa LEAN SSSB es un curso especializado en metodologías de mejora continua. ¿Tienes alguna duda específica?",
      timestamp: "10:27 AM",
      isUser: false,
    },
    {
      id: "m3",
      userId: "1",
      content: "¿Cuál es el costo y la duración del programa?",
      timestamp: "10:30 AM",
      isUser: true,
    },
  ],
  "2": [
    {
      id: "m1",
      userId: "2",
      content: "Hola, ¿cuándo inicia el próximo curso?",
      timestamp: "11:45 AM",
      isUser: true,
    },
  ],
}

export default function ChatInterface() {
  const [isOpen, setIsOpen] = useState(false)
  const [selectedUser, setSelectedUser] = useState<UserType | null>(null)
  const [messages, setMessages] = useState<Record<string, Message[]>>(sampleMessages)
  const [newMessage, setNewMessage] = useState("")
  const [showNotification, setShowNotification] = useState(false)
  const [notificationData, setNotificationData] = useState<{ user: UserType; message: string } | null>(null)
  const [unreadCount, setUnreadCount] = useState(2) // Initial unread count
  const { toast } = useToast()
  const pathname = usePathname()

// Verificar si estamos en la página de contacto entrante y en la pestaña speech
  const isContactoEntrantePage = pathname?.includes("/gestion-comercial/agenda/contacto-entrante/")

// Function to play notification sound
  const playNotificationSound = () => {
    try {
      // Check if we're in a browser environment
      if (typeof window !== "undefined") {
        // Create audio context instead of using Audio element
        const AudioContext = window.AudioContext || (window as any).webkitAudioContext
        if (AudioContext) {
          // Use a simple beep sound generated programmatically
          const audioContext = new AudioContext()
          const oscillator = audioContext.createOscillator()
          const gainNode = audioContext.createGain()
          oscillator.type = "sine"
          oscillator.frequency.setValueAtTime(800, audioContext.currentTime)
          gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
          oscillator.connect(gainNode)
          gainNode.connect(audioContext.destination)
          oscillator.start()
          oscillator.stop(audioContext.currentTime + 0.2)
          console.log("Notification sound played successfully")
        } else {
          console.log("AudioContext not supported in this browser")
        }
      }
    } catch (error) {
      console.error("Error playing notification sound:", error)
      // Silent fail - don't break the app if sound fails
    }
  }

// Simulate receiving a new message
  const simulateNewMessage = () => {
    // Create a random user from the list
    const randomUserIndex = Math.floor(Math.random() * users.length)
    const user = users[randomUserIndex]

// Create a new message
    const newMessages = [
      "Hola, ¿pueden ayudarme con información sobre los programas?",
      "Necesito saber los requisitos para inscribirme",
      "¿Cuál es el costo del programa LEAN?",
      "¿Tienen disponibilidad para una consulta?",
      "Gracias por su atención",
    ]
    const randomMessageIndex = Math.floor(Math.random() * newMessages.length)
    const messageContent = newMessages[randomMessageIndex]

const newMsg: Message = {
      id: `m${Date.now()}`,
      userId: user.id,
      content: messageContent,
      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
      isUser: true,
    }

// Update messages
    setMessages((prev) => ({
      ...prev,
      [user.id]: [...(prev[user.id] || []), newMsg],
    }))

// Update user's last message
    const updatedUsers = users.map((u) => {
      if (u.id === user.id) {
        return {
          ...u,
          lastMessage: messageContent,
          lastMessageTime: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
          unread: u.unread + 1,
          status: "active", // Move to active if it wasn't
        }
      }
      return u
    })

// Show notification
    setNotificationData({
      user,
      message: messageContent,
    })
    setShowNotification(true)

// Increase unread count
    setUnreadCount((prev) => prev + 1)

// Play sound
    playNotificationSound()

// Show toast notification
    toast({
      title: `Nuevo mensaje de ${user.name}`,
      description: messageContent,
      duration: 5000,
    })

// Auto-hide notification after 5 seconds
    setTimeout(() => {
      setShowNotification(false)
    }, 5000)
  }

// Configurar la simulación automática cada 30 segundos
  useEffect(() => {
    // Crear un intervalo para simular mensajes nuevos cada 4 minutos
    const messageInterval = setInterval(() => {
      simulateNewMessage()
    }, 240000) // 240000 ms = 4 minutos

// Limpiar el intervalo cuando el componente se desmonte
    return () => clearInterval(messageInterval)
  }, []) // El array vacío asegura que este efecto solo se ejecute una vez al montar el componente

const toggleChat = () => {
    setIsOpen(!isOpen)
    if (!isOpen) {
      setSelectedUser(null)
    }
  }

const handleUserSelect = (user: UserType) => {
    setSelectedUser(user)
    // Reset unread count for this user
    const updatedUsers = users.map((u) => {
      if (u.id === user.id) {
        return { ...u, unread: 0 }
      }
      return u
    })
  }

const handleBackToList = () => {
    setSelectedUser(null)
  }

const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault()
    if (!newMessage.trim() || !selectedUser) return

const newMsg: Message = {
      id: `m${Date.now()}`,
      userId: "agent",
      content: newMessage,
      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
      isUser: false,
    }

setMessages((prev) => ({
      ...prev,
      [selectedUser.id]: [...(prev[selectedUser.id] || []), newMsg],
    }))
    setNewMessage("")
  }

const handleNotificationClick = () => {
    if (notificationData) {
      setIsOpen(true)
      handleUserSelect(notificationData.user)
      setShowNotification(false)
    }
  }

// Determinar la posición del botón de chat basado en la ruta
  // Obtener la pestaña activa del pathname
  const getActiveTab = () => {
    if (!pathname) return ""

// Extraer la pestaña de la URL
    if (pathname.includes("/editar-datos")) return "editar-datos"
    if (pathname.includes("/competidores")) return "competidores"
    if (pathname.includes("/cronograma")) return "cronograma"
    if (pathname.includes("/resumen")) return "resumen"
    if (pathname.includes("/informacion")) return "informacion"
    if (pathname.includes("/documentos")) return "documentos"
    if (pathname.includes("/preguntas")) return "preguntas"
    if (pathname.includes("/documentos-legales")) return "documentos-legales"

// Intentar obtener la pestaña del hash si existe
    const hash = typeof window !== "undefined" ? window.location.hash : ""
    if (hash.startsWith("#")) {
      const tabFromHash = hash.substring(1)
      if (tabFromHash) return tabFromHash
    }

return ""
  }

// Determinar la posición del botón de chat basado en la pestaña activa
  const activeTab = getActiveTab()
  const isInSpeechTab = activeTab === "" || activeTab === "speech" // Si no hay tab específica o es speech
  const chatButtonPosition = isContactoEntrantePage ? (isInSpeechTab ? "bottom-24" : "bottom-4") : "bottom-4"

// Determinar si estamos en la pestaña Speech para ajustar la posición de la notificación
  const isSpeechTabActive = isContactoEntrantePage && isInSpeechTab

return (
    <div className="fixed bottom-4 right-4 z-[100] flex flex-col items-end">
      {/* Notification popup */}
      {showNotification && notificationData && (
        <div className={isSpeechTabActive ? "relative top-[-80px]" : ""}>
          <NotificationPopup
            user={notificationData.user}
            message={notificationData.message}
            onClose={() => setShowNotification(false)}
            onClick={handleNotificationClick}
          />
        </div>
      )}

{isOpen ? (
        <div className="bg-white rounded-lg shadow-lg w-[350px] md:w-[400px] h-[500px] flex flex-col overflow-hidden border border-gray-200">
          {/* Fixed Chat Header */}
          <div className="bg-primary text-primary-foreground p-3 flex justify-between items-center sticky top-0 z-10">
            {selectedUser ? (
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 text-primary-foreground"
                  onClick={handleBackToList}
                >
                  <ArrowLeft className="h-5 w-5" />
                </Button>
                <Avatar className="h-8 w-8">
                  {selectedUser.source === "whatsapp" ? (
                    <AvatarImage src={selectedUser.avatar || "/placeholder.svg"} alt={selectedUser.name} />
                  ) : (
                    <AvatarFallback className="bg-blue-500 text-white">{getInitials(selectedUser.name)}</AvatarFallback>
                  )}
                </Avatar>
                <div>
                  <p className="font-medium text-sm">{selectedUser.name}</p>
                  <Badge
                    variant="outline"
                    className={`text-xs ${
                      selectedUser.source === "whatsapp"
                        ? "bg-green-500 hover:bg-green-500 text-white border-green-500"
                        : "bg-blue-500 hover:bg-blue-500 text-white border-blue-500"
                    }`}
                  >
                    {selectedUser.source === "whatsapp" ? "WhatsApp" : "Portal web"}
                  </Badge>
                </div>
              </div>
            ) : (
              <h3 className="font-semibold">Conversaciones</h3>
            )}
            <Button variant="ghost" size="icon" className="h-8 w-8 text-primary-foreground" onClick={toggleChat}>
              <X className="h-5 w-5" />
            </Button>
          </div>

{/* Chat Content */}
          <div className="flex-1 overflow-hidden flex flex-col">
            {selectedUser ? (
              <ChatWindow
                user={selectedUser}
                messages={messages[selectedUser.id] || []}
                newMessage={newMessage}
                setNewMessage={setNewMessage}
                handleSendMessage={handleSendMessage}
              />
            ) : (
              <UserList users={users} onSelectUser={handleUserSelect} />
            )}
          </div>
        </div>
      ) : (
        <Button
          onClick={toggleChat}
          className={`fixed ${chatButtonPosition} right-6 rounded-full h-14 w-14 shadow-lg flex items-center justify-center relative z-[100]`}
          aria-label="Chat"
        >
          <MessageSquare className="h-6 w-6" />
          {unreadCount > 0 && (
            <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
              {unreadCount}
            </span>
          )}
        </Button>
      )}
    </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: "",
  })

// 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>, 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/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",
  ]

// 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 | 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]css:file="styles/scrollbar-hide.css" isMerged="true"
/* Ocultar barras de desplazamiento para Chrome, Safari y Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Ocultar barras de desplazamiento para IE, Edge y Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE y Edge */
  scrollbar-width: none; /* Firefox */
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/refuerzo-confianza.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

export default function RefuerzoConfianza() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="space-y-4">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <Accordion type="single" collapsible className="w-full space-y-2">
              <AccordionItem value="testimonio-1" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Consultor en Tecnologías y Sistemas en el Sector Tecnológico,
                      </span>
                      <span className="text-sm font-light text-blue-600">Anuhar Misael Moreno Alvarado</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Anuhar Misael Moreno Alvarado, ingeniero informático mexicano, se inscribió en el Curso con el
                      objetivo de fortalecer sus conocimientos en la arquitectura de soluciones en la nube.
                    </p>
                    <p>
                      Al finalizar el curso, Anuhar destacó que la principal fortaleza fue el seguimiento personalizado
                      que recibió. Comentó que no solo se le proporcionaba el contenido, sino que el equipo de apoyo
                      estuvo pendiente de su progreso, enviándole recordatorios y sugerencias para mejorar su ritmo de
                      estudio.
                    </p>
                    <p>
                      Cuando le preguntaron si recomendaría el curso, no dudó en responder afirmativamente, valorando la
                      calidad del seguimiento y el enfoque práctico del contenido. Además, confirmó que volvería a
                      inscribirse en otro curso de BSG Institute, reconociendo la utilidad del aprendizaje adquirido.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-2" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Analista de Big Data en el Sector Tecnológico,{" "}
                      </span>
                      <span className="text-sm font-light text-blue-600">Uriel Barrales Garrido</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Uriel Barrales Garrido, ingeniero informático mexicano, se inscribió en el Curso para mejorar sus
                      habilidades en la arquitectura de soluciones en la nube.
                    </p>
                    <p>
                      Al finalizar el curso, Uriel destacó que la principal fortaleza fue la experiencia de los
                      docentes. Señaló que no solo dominan la teoría, sino que su vasta experiencia en el campo hace que
                      las clases sean mucho más enriquecedoras y aplicables al trabajo diario.
                    </p>
                    <p>
                      Cuando le preguntaron si recomendaría el curso, Uriel respondió afirmativamente, resaltando la
                      calidad de los instructores. Además, confirmó que sin duda volvería a inscribirse en otro curso de
                      BSG Institute, reconociendo el valor del aprendizaje obtenido.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-3" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">Analista de Sistemas en el Sector Salud, </span>
                      <span className="text-sm font-light text-blue-600">Alirio Enrique García Morillo</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Alirio Enrique García Morillo, ingeniero informático chileno, decidió inscribirse en el Curso para
                      actualizar sus conocimientos y mejorar su desempeño en el área de sistemas en el sector salud.
                    </p>
                    <p>
                      Al concluir el curso, Alirio resaltó que la principal fortaleza fue el contenido actualizado.
                      Señaló que esto le asegura estar aprendiendo lo que realmente es relevante para las demandas
                      actuales del mercado, lo cual valora mucho en un curso.
                    </p>
                    <p>
                      Cuando le preguntaron si recomendaría el curso, Alirio respondió que sí, y afirmó que volvería a
                      inscribirse en otro curso de BSG Institute, destacando la calidad y relevancia del aprendizaje
                      obtenido.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-4" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Supervisor de Ingeniería en el Sector Tecnológico,{" "}
                      </span>
                      <span className="text-sm font-light text-blue-600">Sebastian Vásquez Cruz</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Sebastian Vásquez Cruz, ingeniero de sistemas colombiano, se inscribió en el Curso para
                      perfeccionar sus habilidades en el área de ingeniería dentro del sector tecnológico.
                    </p>
                    <p>
                      Al finalizar el curso, Sebastian destacó que la principal fortaleza fue el acceso a los
                      laboratorios oficiales en línea, lo que le permitió experimentar con nuevas herramientas de manera
                      segura. Este enfoque práctico le ayudó a asimilar los conceptos de manera mucho más efectiva.
                    </p>
                    <p>
                      Cuando le preguntaron si recomendaría el curso, respondió afirmativamente y mencionó que
                      definitivamente volvería a inscribirse en otro curso de BSG Institute, reconociendo el valor de su
                      metodología de aprendizaje.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-5" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Consultor de Ingeniería en el Sector Tecnológico,{" "}
                      </span>
                      <span className="text-sm font-light text-blue-600">Luis Eduardo Oviedo Granados</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Luis Eduardo Oviedo Granados, ingeniero de telecomunicaciones colombiano, se matriculó en el Curso
                      con el fin de mejorar sus competencias en el área de ingeniería en el sector tecnológico.
                    </p>
                    <p>
                      Al finalizar el curso, Luis Eduardo destacó que la mayor fortaleza fue la posibilidad de obtener
                      una certificación oficial de AWS. Comentó que esta certificación no solo es un reconocimiento de
                      lo aprendido, sino que también tiene un valor internacional que le abre nuevas oportunidades en el
                      mercado laboral.
                    </p>
                    <p>
                      Cuando le preguntaron si recomendaría el curso, respondió que sí, y afirmó que volvería a
                      inscribirse en otro curso de BSG Institute, destacando el impacto positivo en su desarrollo
                      profesional.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-6" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Arquitecto y Coordinador de Proyectos en la Industria de Consumo Masivo,
                      </span>
                      <span className="text-sm font-light text-blue-600">Juan Nader</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Juan Nader se matriculó en el programa con el propósito de mejorar sus habilidades y adquirir una
                      ventaja competitiva en su carrera como Project Manager. Como arquitecto y coordinador de proyectos
                      en la industria de Consumo Masivo, Juan busca continuamente mantenerse actualizado, y este
                      programa le brindó una oportunidad perfecta para lograrlo.
                    </p>
                    <p>
                      Una de las razones principales por las que eligió este curso fue porque está enfocado a los
                      lineamientos del PMI reconocido por el PMI, una distinción que destaca frente a otras
                      capacitaciones, como maestrías de mayor costo que no cuentan con dicho reconocimiento. Al concluir
                      el programa, Juan recomienda el programa ya que afirmó sentirse mucho más preparado para los
                      desafíos de la gestión de proyectos.
                    </p>
                    <p>
                      Cuando se le preguntó si se volvería a inscribir en un programa de BSG Institute, su respuesta fue
                      un rotundo sí.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-7" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Ingeniero Mecánico y Gerente General de Proyectos en la Industria de Manufactura,
                      </span>
                      <span className="text-sm font-light text-blue-600">José Mario Mercado García</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      José Mario Mercado García, ingeniero mecánico colombiano, se matriculó en el programa con el
                      propósito de actualizar sus conocimientos y habilidades en la gestión de proyectos. Como gerente
                      general de proyectos en la industria de manufactura, José Mario siempre ha buscado herramientas
                      que le permitan optimizar la ejecución de los proyectos a su cargo.
                    </p>
                    <p>
                      Al concluir el programa, José Mario destacó como la principal fortaleza del curso el nuevo enfoque
                      Ágil del PMI, junto con la excelente calidad del material proporcionado. Esto le permitió ampliar
                      sus conocimientos y mejorar su desempeño en un entorno dinámico y en constante evolución.
                    </p>
                    <p>
                      José Mario recomienda este programa a otros profesionales que buscan mejorar sus habilidades en la
                      gestión de proyectos. Asimismo, cuando se le preguntó si volvería a inscribirse en un programa de
                      BSG Institute, respondió de manera afirmativa, destacando el valor y la utilidad de la formación
                      recibida.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-8" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Ingeniera Agrónoma y Coordinadora de Proyectos en la Industria de ONGs,
                      </span>
                      <span className="text-sm font-light text-blue-600">Alicia Karina Amoroto Peláez</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Alicia Karina Amoroto Peláez, ingeniera agrónoma peruana, se matriculó en el programa con la
                      intención de fortalecer sus habilidades y avanzar en su rol como coordinadora de proyectos de
                      ONGs. Como profesional comprometida con proyectos que generan impacto social, Alicia buscaba una
                      formación que le permitiera mejorar su desempeño y gestionar proyectos de manera más eficiente.
                    </p>
                    <p>
                      Al culminar el programa, Alicia destacó que la principal fortaleza del programa fueron las
                      sesiones prácticas, las cuales le brindaron la oportunidad de aplicar los conceptos aprendidos de
                      manera efectiva en su trabajo. Su experiencia con el programa fue altamente positiva. Alicia
                      recomienda el programa a otros profesionales interesados en la gestión de proyectos.
                    </p>
                    <p>
                      Asimismo, cuando se le preguntó si se volvería a inscribir en otro programa de BSG Institute,
                      Alicia respondió afirmativamente, resaltando la calidad y la utilidad del contenido impartido.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-9" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Ingeniero en Sistemas y Supervisor de Proyectos en la Industria de Educación,
                      </span>
                      <span className="text-sm font-light text-blue-600">Carlos Iván Briceño Díaz</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      Carlos Iván Briceño Díaz, ingeniero en sistemas peruano, se matriculó en el programa con el
                      propósito de mejorar sus competencias y avanzar en su rol como supervisor de proyectos en la
                      industria de la educación. Al buscar un programa que se adaptara a sus necesidades profesionales,
                      Carlos encontró en BSG Institute una opción de calidad que se alineaba con sus objetivos.
                    </p>
                    <p>
                      Al concluir el programa, Carlos destacó como principal fortaleza las sesiones en vivo a través de
                      internet, las cuales facilitaron su aprendizaje y le permitieron interactuar de manera efectiva
                      tanto con los docentes como con sus compañeros de clase. Esta modalidad enriqueció su experiencia
                      y le proporcionó un entorno de aprendizaje dinámico y colaborativo.
                    </p>
                    <p>
                      Carlos recomienda el programa sin dudarlo, resaltando su valor para quienes buscan perfeccionarse
                      en la gestión de proyectos. Además, afirmó que se inscribirá nuevamente en otro programa de BSG
                      Institute, dada la calidad de la formación recibida.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>

<AccordionItem value="testimonio-10" className="border rounded-md px-4">
                <AccordionTrigger className="text-left">
                  <div className="flex items-start">
                    <div>
                      <span className="text-sm font-bold text-blue-600">
                        Ingeniero Industrial y Gerente del Área de Seguridad Ocupacional e Industrial en la Industria
                        Agro-Industrial,
                      </span>
                      <span className="text-sm font-light text-blue-600">William David Huachaca Salas</span>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-3 text-sm text-gray-700">
                    <p>
                      William David Huachaca Salas, ingeniero industrial peruano, decidió inscribirse en el programa con
                      el objetivo de fortalecer sus habilidades y conocimientos en la gestión de proyectos. Como gerente
                      del área de Seguridad Ocupacional e Industrial en la industria agro-industrial, William siempre
                      busca mantenerse a la vanguardia en las mejores prácticas de su campo.
                    </p>
                    <p>
                      Al finalizar el programa, William resaltó como principal fortaleza la experiencia y el enfoque
                      práctico de los expositores, quienes aportaron un gran valor al proceso de aprendizaje,
                      compartiendo sus conocimientos y experiencias de manera clara y aplicable. Este enfoque le
                      permitió adquirir nuevas perspectivas útiles para su ámbito laboral.
                    </p>
                    <p>
                      William recomienda el programa sin dudarlo, destacando su utilidad y calidad. Además, afirmó que
                      definitivamente se inscribirá en otro programa de BSG Institute, valorando la excelente formación
                      que recibió.
                    </p>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/badge-animation.css" isFixed="true" isQuickEdit="true" 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]typescript:file="lib/colors.ts" isMerged="true"
// Colores principales para la aplicación
export const colors = {
  // Azules para cabeceras y elementos principales
  primaryLight: "#e6f0ff", // Azul claro para fondos
  primary: "#1a56db", // Azul oscuro para texto y acentos
  primaryHover: "#1e429f", // Azul más oscuro para hover

// Colores secundarios que mantenemos
  green: {
    light: "#dcfce7",
    default: "#16a34a",
    dark: "#166534",
  },
  amber: {
    light: "#fef3c7",
    default: "#f59e0b",
    dark: "#d97706",
  },

// Colores de texto
  text: {
    primary: "#1a56db",
    secondary: "#4b5563",
    light: "#6b7280",
  },
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/modalidades.tsx" isMerged="true"
"use client"

import { Calendar, Video, PlayCircle, Laptop } from "lucide-react"

export default function Modalidades() {
  return (
    <div className="space-y-6">
      <div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Modalidad Online Sincrónica */}
          <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
            <div className="bg-gradient-to-r from-blue-50 to-blue-100 p-3 border-b border-blue-200 flex items-center gap-2">
              <div className="text-white p-1.5 rounded-full bg-[rgba(100,25,230,1)]">
                <Video className="h-4 w-4" />
              </div>
              <h5 className="font-medium text-[rgba(100,25,230,1)]">Modalidad Online Sincrónica (Clases en vivo)</h5>
            </div>
            <div className="p-4 space-y-4">
              <p className="text-sm text-gray-700">
                Las clases se desarrollarán de forma virtual, con una frecuencia semanal en el siguiente horario (*):
              </p>

{/* Eliminado el contenedor con fondo azul claro */}
              <ul className="space-y-2 pl-4">
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-blue-600">•</div>
                  <div>
                    <p className="text-sm text-gray-700 font-medium">Jueves: 19:00 a 22:00 horas</p>
                    <p className="text-xs text-gray-500">(Hora Perú y Colombia)</p>
                  </div>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-blue-600">•</div>
                  <div>
                    <p className="text-sm text-gray-700 font-medium">Jueves: 18:00 a 21:00 horas</p>
                    <p className="text-xs text-gray-500">(Hora México)</p>
                  </div>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-blue-600">•</div>
                  <div>
                    <p className="text-sm text-gray-700 font-medium">Jueves: 21:00 a 00:00 horas</p>
                    <p className="text-xs text-gray-500">(Hora Chile)</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

{/* Modalidad Online Asincrónica */}
          <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
            <div className="bg-gradient-to-r from-purple-50 to-purple-100 p-3 border-b border-purple-200 flex items-center gap-2">
              <div className="bg-purple-500 text-white p-1.5 rounded-full">
                <PlayCircle className="h-4 w-4" />
              </div>
              <h5 className="font-medium text-purple-700">Modalidad Online Asincrónica (Clases grabadas)</h5>
            </div>
            <div className="p-4 space-y-4">
              {/* Versión Profesional - Eliminado el contenedor con fondo morado claro */}
              <div className="space-y-2">
                <h6 className="text-sm font-medium text-purple-700">Versión Profesional:</h6>
                <p className="text-sm text-gray-700">
                  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.
                </p>
              </div>

{/* Versión Gerencial - Eliminado el contenedor con fondo morado claro */}
              <div className="space-y-2">
                <h6 className="text-sm font-medium text-purple-700">Versión Gerencial:</h6>
                <p className="text-sm text-gray-700">
                  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.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="space-y-2">
              <div className="flex items-center gap-2">
                <div className="bg-purple-500 text-white p-1.5 rounded-full">
                  <PlayCircle className="h-4 w-4" />
                </div>
                <h5 className="font-medium text-sm">Online Asincrónico</h5>
                <div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full ml-2">Disponible</div>
              </div>
              <p className="text-xs text-gray-600 ml-8">Inicio: Inmediato | Duración: 6 meses de acceso</p>
            </div>
          </div>
        </div>
      </div>

<div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="bg-[#e6f0ff] p-4 border-b flex items-center gap-2">
          <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
            <Laptop className="h-4 w-4" />
          </div>
          <h4 className="font-semibold text-[#1a56db] text-[rgba(100,25,230,1)]">Requisitos técnicos</h4>
        </div>
        <div className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-gray-50 p-3 rounded-md border border-gray-100">
              <h5 className="font-medium text-sm mb-2 text-[#1a56db]">Para el acceso a las clases</h5>
              <ul className="space-y-2">
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Computadora con mínimo 8GB de RAM</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Conexión a internet estable (mínimo 10 Mbps)</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Micrófono y cámara web</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Navegador Chrome o Firefox actualizado</p>
                </li>
              </ul>
            </div>

<div className="bg-gray-50 p-3 rounded-md border border-gray-100">
              <h5 className="font-medium text-sm mb-2 text-[#1a56db]">Software necesario</h5>
              <ul className="space-y-2">
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Cuenta de AWS (se proporcionarán créditos para laboratorios)</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Putty o Terminal (para conexiones SSH)</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">AWS CLI (se instalará durante el curso)</p>
                </li>
                <li className="flex items-start gap-2">
                  <div className="min-w-4 text-[#1a56db]">•</div>
                  <p className="text-sm text-gray-700">Editor de código (VS Code recomendado)</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/program-documents.tsx" isMerged="true"
"use client"
import { Download, FileText } from "lucide-react"

export default function ProgramDocuments() {
  return (
    <>
      {/* Tabla de Documentos del Programa */}
      <div className="mt-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          {/* Cabecera del cronograma - Estilo igual al Cronograma de Asesor */}
          <div className="w-full flex items-center p-4 bg-[#e6f0ff] text-[#1a56db] font-medium">
            <div className="flex items-center gap-2">
              <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
                <FileText className="h-5 w-5" />
              </div>
              <span className="text-base text-[rgba(100,25,230,1)]">Documentos del Programa</span>
            </div>
          </div>

{/* Contenido de la tabla */}
          <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]">
                    <div className="flex items-center text-[rgba(100,25,230,1)]">Nombre del Documento</div>
                  </th>
                  <th className="py-2 px-4 text-center font-medium text-[#1a56db] w-24">
                    <div className="flex items-center justify-center text-[rgba(100,25,230,1)]">Descargar</div>
                  </th>
                  <th className="py-2 px-4 text-left font-medium text-[#1a56db]">
                    <div className="flex items-center text-[rgba(100,25,230,1)]">Detalles</div>
                  </th>
                </tr>
              </thead>
              <tbody className="text-sm">
                {/* Brochure BSG Institute */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Brochure BSG Institute</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible Para <span className="font-bold">todos</span>
                  </td>
                </tr>

{/* Brochure */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Brochure</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible Para <span className="font-bold">todos los programas</span> / No colocaron la URL del{" "}
                    <span className="font-bold">brochure</span> en el Programa General
                  </td>
                </tr>

{/* Cronograma de Alumnos */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Cronograma de Alumnos</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programas <span className="font-bold">Presencial y Online sincrónico</span> / No
                    actualizaron el cronograma de alumnos.
                  </td>
                </tr>

{/* Requisitos programas online */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Requisitos programas online</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programas <span className="font-bold">Online sincrónico</span>.
                  </td>
                </tr>

{/* Pagare 1 (Word) */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Pagare 1 (Word)</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programas <span className="font-bold">Presencial Perú, Colombia y Bolivia</span>
                  </td>
                </tr>

{/* Pagare 2 (Excel) */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Pagare 2 (Excel)</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programas <span className="font-bold">Online asincrónico-sincrónico Extranjero</span>
                  </td>
                </tr>

{/* Convenio de capacitación y/o formación */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <span className="text-blue-500 inline-block" style={{ width: "20px", height: "20px" }}>
                        <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"
                        >
                          <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" />
                          <polyline points="14 2 14 8 20 8" />
                          <line x1="16" y1="13" x2="8" y2="13" />
                          <line x1="16" y1="17" x2="8" y2="17" />
                          <line x1="10" y1="9" x2="8" y2="9" />
                        </svg>
                      </span>
                      <span>Convenio de capacitación y/o formación (Firma o grabacion contrato de voz)</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programa{" "}
                    <span className="font-bold">
                      Presencial Perú y Colombia, Extranjero Online sincrónico-asincrónico
                    </span>
                    , se genera cuando el cronograma de pagos este aprobado o el alumno está matriculado.
                  </td>
                </tr>

{/* Condiciones y Características del servicio de capacitación */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <span className="text-blue-500 inline-block" style={{ width: "20px", height: "20px" }}>
                        <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"
                        >
                          <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" />
                          <polyline points="14 2 14 8 20 8" />
                          <line x1="16" y1="13" x2="8" y2="13" />
                          <line x1="16" y1="17" x2="8" y2="17" />
                          <line x1="10" y1="9" x2="8" y2="9" />
                        </svg>
                      </span>
                      <span>
                        Condiciones y Características del servicio de capacitación (grabación contrato de voz)
                      </span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible para programas{" "}
                    <span className="font-bold">Perú y Colombia Online sincrónico-asincrónico</span> se genera cuando el
                    cronograma de pagos este aprobado o el alumno está matriculado.
                  </td>
                </tr>

{/* Sílabos del Programa */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Sílabos del Programa</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible para <span className="font-bold">todos los programas</span> / Programa nuevo, pendiente
                    sílabo
                  </td>
                </tr>

{/* Contrato Uso de Datos */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Contrato Uso de Datos</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programa{" "}
                    <span className="font-bold">Presencial, Online sincrónico-asincrónico de alumnos de México</span>,
                    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.
                  </td>
                </tr>

{/* Lineamientos de Condiciones */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Lineamientos de Condiciones</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programa{" "}
                    <span className="font-bold">Presencial, Online sincrónico-asincrónico de alumnos de México</span>,
                    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.
                  </td>
                </tr>

{/* Convenio de Prestacion de Servicios */}
                <tr className="border-b bg-gray-50">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Convenio de Prestacion de Servicios</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programa{" "}
                    <span className="font-bold">
                      Presencial, Online sincrónico-asincrónico de alumnos de México o Chile
                    </span>
                    , 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.
                  </td>
                </tr>

{/* Cronograma de Alumnos (Todos los Grupos) */}
                <tr className="border-b">
                  <td className="py-3 px-4 text-gray-700">
                    <div className="flex items-center gap-2">
                      <FileText className="h-5 w-5 text-blue-500" />
                      <span>Cronograma de Alumnos (Todos los Grupos)</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <button className="inline-flex items-center justify-center p-1.5 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed">
                      <Download className="h-5 w-5" />
                    </button>
                  </td>
                  <td className="py-3 px-4 text-gray-600">
                    Disponible programas <span className="font-bold">Presencial y Online sincrónico</span> / No
                    actualizaron el cronograma de alumnos.
                  </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"
                  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>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase5/convenio-voz.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"

type ConvenioVozProps = {}

const ConvenioVoz: React.FC<ConvenioVozProps> = () => {
  const [isOpen, setIsOpen] = useState(false)

return (
    <div className="border border-gray-200 rounded-md overflow-hidden mt-4">
      <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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          <span className="text-base">Convenio de voz</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>

{isOpen && (
        <div className="p-4">
          {/* Content for Convenio de voz section */}
          <p className="text-gray-700">
            This is the content for the Convenio de voz section. You can add form fields, text, or any other relevant
            information here.
          </p>
        </div>
      )}
    </div>
  )
}

export default ConvenioVoz
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/fase3-tabs.tsx" isQuickEdit="true" 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: <Shield className="h-5 w-5" />,
      criticality: "blue",
      component: <RefuerzoConfianza />,
      order: 1,
    },
    {
      id: "objetivos-programa",
      label: "Objetivos del programa",
      icon: <Target className="h-5 w-5" />,
      criticality: "blue",
      component: <ObjetivosPrograma />,
      order: 2,
    },
    {
      id: "estructura-curricular",
      label: "Estructura curricular",
      icon: <BookOpen className="h-5 w-5" />,
      criticality: "blue",
      component: <EstructuraCurricular />,
      order: 3,
    },
    {
      id: "certificacion",
      label: "Certificación",
      icon: <Award className="h-5 w-5" />,
      criticality: "blue",
      component: <Certificacion />,
      order: 4,
    },
    {
      id: "modalidades",
      label: "Modalidades",
      icon: <Video className="h-5 w-5" />,
      criticality: "blue",
      component: <Modalidades />,
      order: 5,
    },
    {
      id: "demostracion-valor",
      label: "Demostración de valor",
      icon: <TrendingUp className="h-5 w-5" />,
      criticality: "green",
      component: <DemostracionValor />,
      order: 6,
    },
    {
      id: "garantia-programa",
      label: "Garantía de programa",
      icon: <CheckCircle className="h-5 w-5" />,
      criticality: "green",
      component: <GarantiaPrograma />,
      order: 7,
    },
    {
      id: "precio",
      label: "Precio",
      icon: <DollarSign className="h-5 w-5" />,
      criticality: "blue",
      component: <Precio />,
      order: 8,
    },
    {
      id: "aspectos-diferenciadores",
      label: "Aspectos diferenciadores",
      icon: <Zap className="h-5 w-5" />,
      criticality: "green",
      component: <AspectosDiferenciadores />,
      order: 9,
    },
    {
      id: "limitaciones",
      label: "Limitaciones",
      icon: <AlertTriangle className="h-5 w-5" />,
      criticality: "yellow",
      component: <Limitaciones />,
      order: 10,
    },
  ]

return (
    <div className="w-full">
      {/* Tabs navigation */}
      <div className="grid grid-cols-5 md:grid-cols-10 gap-1 mb-6 overflow-x-auto">
        {tabs.map((tab) => {
          // Determine classes based on criticality
          let bgClass, iconBgClass

if (tab.criticality === "blue") {
            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 === "green") {
            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 === "yellow") {
            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"
          }

return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex flex-col items-center justify-center p-2 rounded-md transition-colors ${bgClass}`}
            >
              <div className={`flex items-center justify-center w-8 h-8 rounded-full mb-1 ${iconBgClass}`}>
                {tab.icon}
              </div>
              <span className="text-xs font-medium text-center whitespace-pre-line leading-tight">{tab.label}</span>
            </button>
          )
        })}
      </div>

{/* Tab content */}
      <div className="mt-4">{tabs.find((tab) => tab.id === activeTab)?.component}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/data/clients-data.tsx" isQuickEdit="true" isMerged="true"
export interface ClientProfileStatus {
  text: string
  type: "excellent" | "very-good" | "good"
}

export interface ClientContactInfo {
  mobile1: string
  mobile2: string
  phone1: string
  phone2: string
  email1: string
  email2: string
  dataCategory: string
}

export interface ClientData {
  id: string
  name: string
  course: string
  program: string
  location: string
  currentPhase: string
  profileStatus: ClientProfileStatus
  contactInfo: ClientContactInfo
  discount?: {
    code: string
    percentage: number
    expiryDate: string
  }
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-historial-mensajes.tsx" isQuickEdit="true" isMerged="true"
"use client"

export default function SectionHistorialMensajes() {
  // Componente eliminado según lo solicitado
  return null
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/data/clients-data.ts" isQuickEdit="true" isMerged="true"
export interface ClientProfileStatus {
  text: string
  type: "excellent" | "very-good" | "good"
}

export interface ClientContactInfo {
  mobile1: string
  mobile2: string
  phone1: string
  phone2: string
  email1: string
  email2: string
  dataCategory: string
}

const clientsData: ClientData[] = [
  {
    id: "1",
    name: "Prueba Alvarez",
    course: "CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE",
    program: "TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA",
    location: "Perú - Arequipa",
    currentPhase: "IP",
    profileStatus: {
      text: "¡Cliente con EXCELENTE Perfil! Insiste y bríndale todo el apoyo para que se matricule",
      type: "excellent",
    },
    contactInfo: {
      mobile1: "+51922191058",
      mobile2: "+51",
      phone1: "Teléfono Principal",
      phone2: "Teléfono Secundario",
      email1: "PruebaAlvarez@gmail.com",
      email2: "Email Secundario",
      dataCategory: "Llamada Oficina",
    },
    discount: {
      code: "BSGDESCUENTO10",
      percentage: 10,
      expiryDate: "18-02-2025",
    },
  },
  {
    id: "2",
    name: "Ana María Gutiérrez",
    course: "DIPLOMADO EN SISTEMAS DE INFORMACIÓN GEOGRÁFICA",
    program: "D SIG ONLINE 2025 II LIMA",
    location: "Perú - Lima",
    currentPhase: "BNC",
    profileStatus: {
      text: "¡Cliente con Muy Buen Perfil! No dejes de INSISTIR",
      type: "very-good",
    },
    contactInfo: {
      mobile1: "+51987654321",
      mobile2: "+51",
      phone1: "Teléfono Principal",
      phone2: "Teléfono Secundario",
      email1: "ana.gutierrez@gmail.com",
      email2: "Email Secundario",
      dataCategory: "Portal Web",
    },
  },
  {
    id: "3",
    name: "Roberto Sánchez",
    course: "LEAN SIX SIGMA BLACK BELT",
    program: "LEAN SSSB AONLINE 2025 I BOGOTA",
    location: "Colombia - Bogotá",
    currentPhase: "BNC",
    profileStatus: {
      text: "¡Buen Perfil! Agota las posibilidades de apoyo y define su participación",
      type: "good",
    },
    contactInfo: {
      mobile1: "+57123456789",
      mobile2: "+57",
      phone1: "Teléfono Principal",
      phone2: "Teléfono Secundario",
      email1: "roberto.sanchez@gmail.com",
      email2: "Email Secundario",
      dataCategory: "WhatsApp",
    },
  },
  {
    id: "4",
    name: "Patricia Flores",
    course: "DIPLOMADO EN SISTEMAS DE INFORMACIÓN GEOGRÁFICA",
    program: "D SIG ONLINE 2025 II LIMA",
    location: "Perú - Lima",
    currentPhase: "BNC",
    profileStatus: {
      text: "¡Cliente con EXCELENTE Perfil! Insiste y bríndale todo el apoyo para que se matricule",
      type: "excellent",
    },
    contactInfo: {
      mobile1: "+51912345678",
      mobile2: "+51",
      phone1: "Teléfono Principal",
      phone2: "Teléfono Secundario",
      email1: "patricia.flores@gmail.com",
      email2: "Email Secundario",
      dataCategory: "Seguimiento de WhatsApp",
    },
  },
]

export const getClientById = (id: string): ClientData | undefined => {
  // Verificar que id es un string válido
  if (!id) {
    console.error("ID de cliente no proporcionado")
    return undefined
  }

const client = clientsData.find((client) => client.id === id)

if (!client) {
    console.error(`Cliente con ID ${id} no encontrado`)
  }

return client
}
[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]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/objetivos-programa.tsx" isQuickEdit="true" isMerged="true"
export default function ObjetivosPrograma() {
  const objetivos = [
    "Ejecutar los servicios de AWS, incluyendo seguridad de cuentas, redes, cómputo y almacenamiento, para diseñar y gestionar arquitecturas escalables, seguras y resilientes en la nube.",
    "Automatizar procesos clave mediante el uso de contenedores y herramientas de automatización, incrementando la eficiencia y la capacidad de gestión de infraestructuras en AWS.",
    "Liderar equipos multidisciplinarios en la implementación de soluciones innovadoras en AWS, alineando la tecnología con los objetivos estratégicos de la organización.",
    "Adaptarte a entornos de TI cambiantes, utilizando soluciones serverless y tecnologías emergentes en AWS.",
    "Aprobar el examen de certificación AWS Certified Solutions Architect – Associate.",
  ]

return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg overflow-hidden border-[rgba(255,255,255,1)] shadow-none">
        <p className="text-sm text-gray-700 mb-4 p-4 pt-4">Al finalizar el curso estarás en la capacidad de:</p>
        <ul className="space-y-4 px-4 pb-4">
          {objetivos.map((objetivo, index) => (
            <li key={index} className="flex items-start gap-3">
              <div className="min-w-6 mt-0.5">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                  {index + 1}
                </div>
              </div>
              <p className="text-sm text-gray-700">{objetivo}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
[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 (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <p className="text-sm text-gray-700 mb-4 p-4 pt-4">
          La certificación AWS Certified Solutions Architect - Associate representa una inversión en tu futuro
          profesional, con beneficios tangibles y medibles:
        </p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-4 pb-4">
          {/* Incremento salarial */}
          <div className="bg-gray-50 p-4 rounded-md border border-gray-100">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-start gap-2">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                  1
                </div>
                <h5 className="font-medium text-sm leading-tight">
                  Incremento
                  <br />
                  salarial
                </h5>
              </div>
              <div className="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-md flex items-center">
                <Star className="h-3 w-3 mr-1" />
                Enfatizar al participante
              </div>
            </div>
            <div className="pl-8">
              <p className="text-sm text-gray-700 mb-3">
                Los participantes del curso pueden obtener incrementos salariales significativos, con un promedio de
                15%-25% según Skillsoft.
              </p>
              <a
                href="https://s3.us-east-1.amazonaws.com/skillsoft.com/prod/resources/Skillsoft-IT-Skills-and-Salary-Report-2023.pdf"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 hover:underline"
              >
                <ExternalLink className="h-3 w-3 mr-1" />
                Verificar información
              </a>
            </div>
          </div>

{/* Acceso a posiciones de liderazgo */}
          <div className="bg-gray-50 p-4 rounded-md border border-gray-100">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-start gap-2">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                  2
                </div>
                <h5 className="font-medium text-sm leading-tight">
                  Acceso a posiciones
                  <br />
                  de liderazgo
                </h5>
              </div>
              <div className="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-md flex items-center">
                <Star className="h-3 w-3 mr-1" />
                Enfatizar al participante
              </div>
            </div>
            <div className="pl-8">
              <p className="text-sm text-gray-700 mb-3">
                La certificación Certified Solutions Architect - Associate emitida por AWS, es reconocida globalmente
                como la cuarta certificación mejor pagada según Skill Soft.
              </p>
              <a
                href="https://www.skillsoft.com/blog/top-paying-it-certifications"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 hover:underline"
              >
                <ExternalLink className="h-3 w-3 mr-1" />
                Verificar información
              </a>
            </div>
          </div>

{/* Mejora de la marca personal */}
          <div className="bg-gray-50 p-4 rounded-md border border-gray-100">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-start gap-2">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                  3
                </div>
                <h5 className="font-medium text-sm leading-tight">
                  Mejora de la
                  <br />
                  marca personal
                </h5>
              </div>
              <div className="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-md flex items-center">
                <Star className="h-3 w-3 mr-1" />
                Enfatizar al participante
              </div>
            </div>
            <div className="pl-8">
              <p className="text-sm text-gray-700">
                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.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/garantia-programa.tsx" isMerged="true"
"use client"

import { Star } from "lucide-react"

export default function GarantiaPrograma() {
  return (
    <div className="space-y-6">
      <div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Nivel de satisfacción */}
          <div className="bg-white rounded-lg shadow-md p-4 relative">
            <div className="absolute right-2 top-2 bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-full flex items-center gap-1">
              <Star className="h-3 w-3" />
              <span>Enfatizar al participante</span>
            </div>
            <div className="flex items-center gap-2 mb-3">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                1
              </div>
              <h3 className="font-medium">Nivel de satisfacción</h3>
            </div>
            <p className="text-sm text-gray-700">
              El nivel de satisfacción de los más de 2,000 alumnos que participaron en el curso en los últimos 5 años es
              de <span className="font-semibold">4.6 en una escala del 1 al 5</span>, destacando el elevado nivel de
              especialización de los expositores como uno de los factores más valorados.
            </p>
          </div>

{/* Recomendación del programa (now in second position) */}
          <div className="bg-white rounded-lg shadow-md p-4 relative">
            <div className="absolute right-2 top-2 bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-full flex items-center gap-1">
              <Star className="h-3 w-3" />
              <span>Enfatizar al participante</span>
            </div>
            <div className="flex items-center gap-2 mb-3">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                2
              </div>
              <h3 className="font-medium">Recomendación del programa</h3>
            </div>
            <p className="text-sm text-gray-700">
              El <span className="font-semibold">95%</span> de los más de 2,000 alumnos que participaron en el programa
              en los últimos 5 años, recomendaría el programa, reflejando su confianza en la calidad de la formación
              recibida.
            </p>
          </div>

{/* Recomendación BSG Institute (now in third position) */}
          <div className="bg-white rounded-lg shadow-md p-4">
            <div className="flex items-center gap-2 mb-3">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                3
              </div>
              <h3 className="font-medium">Recomendación BSG Institute</h3>
            </div>
            <p className="text-sm text-gray-700">
              El <span className="font-semibold">95%</span> de los más de 2,000 alumnos que han completado el programa
              en los últimos 5 años, están dispuestos a inscribirse nuevamente en futuros programas ofrecidos por BSG
              Institute, evidenciando la fidelidad y satisfacción con la institución.
            </p>
          </div>

{/* Recomendación Google Reviews */}
          <div className="bg-white rounded-lg shadow-md p-4">
            <div className="flex items-center gap-2 mb-3">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
                4
              </div>
              <h3 className="font-medium">Recomendación Google Reviews</h3>
            </div>
            <p className="text-sm text-gray-700 mb-2">Según las reseñas de Google:</p>
            <ul className="space-y-2 mb-3">
              <li className="flex items-start gap-2">
                <div className="min-w-4 text-indigo-600">•</div>
                <p className="text-sm text-gray-700">
                  En Perú, BSG Institute mantiene un promedio de <span className="font-semibold">4.8/5</span> en la
                  satisfacción de los estudiantes
                </p>
              </li>
              <li className="flex items-start gap-2">
                <div className="min-w-4 text-indigo-600">•</div>
                <p className="text-sm text-gray-700">
                  En Colombia, BSG Institute mantiene un promedio de <span className="font-semibold">4.7/5</span> en la
                  satisfacción de los estudiantes
                </p>
              </li>
              <li className="flex items-start gap-2">
                <div className="min-w-4 text-indigo-600">•</div>
                <p className="text-sm text-gray-700">
                  En Chile, BSG Institute mantiene un promedio de <span className="font-semibold">4.7/5</span> en la
                  satisfacción de los estudiantes
                </p>
              </li>
              <li className="flex items-start gap-2">
                <div className="min-w-4 text-indigo-600">•</div>
                <p className="text-sm text-gray-700">
                  En México, BSG Institute mantiene un promedio de <span className="font-semibold">4.6/5</span> en la
                  satisfacción de los estudiantes
                </p>
              </li>
            </ul>
            <p className="text-sm text-gray-700">
              En estas reseñas se destaca frecuentemente la calidad del contenido y la experiencia de los instructores,
              además el <span className="font-semibold">90%</span> de los usuarios consideran que la inversión en el
              curso fue rentable, según Google Reviews, 2024.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[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 (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Diferenciador 1 */}
        <div className="bg-white rounded-lg shadow-md p-4 relative">
          <div className="flex items-center gap-2 mb-3">
            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
              1
            </div>
            <h3 className="font-medium">AWS Training Partner</h3>
          </div>
          <p className="text-sm text-gray-700">
            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.
          </p>
        </div>

{/* Diferenciador 2 */}
        <div className="bg-white rounded-lg shadow-md p-4 relative">
          <div className="flex items-center gap-2 mb-3">
            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
              2
            </div>
            <h3 className="font-medium">Simulador de examen</h3>
          </div>
          <p className="text-sm text-gray-700">
            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.
          </p>
        </div>

{/* Diferenciador 3 */}
        <div className="bg-white rounded-lg shadow-md p-4 relative">
          <div className="flex items-center gap-2 mb-3">
            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
              3
            </div>
            <h3 className="font-medium">Laboratorios oficiales</h3>
          </div>
          <p className="text-sm text-gray-700">
            El valor del curso incluye acceso al laboratorio oficial de Architecting on AWS y al laboratorio oficial
            Technical Essentials.
          </p>
        </div>

{/* Diferenciador 4 */}
        <div className="bg-white rounded-lg shadow-md p-4 relative">
          <div className="flex items-center gap-2 mb-3">
            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white font-semibold">
              4
            </div>
            <h3 className="font-medium">Voucher de certificación</h3>
          </div>
          <p className="text-sm text-gray-700">
            El valor del curso incluye el voucher del examen para la certificación AWS Certified Solutions Architect -
            Associate emitida por Amazon Web Services.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/limitaciones.tsx" isMerged="true"
"use client"

export default function Limitaciones() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg p-4 border border-[rgba(255,255,255,1)] shadow-none">
        <div className="flex items-start gap-2 mb-4">
          <div
            className="flex items-center justify-center rounded-full h-6 w-6 min-w-6 mt-0.5"
            style={{ backgroundColor: "#fc0000" }}
          >
            <span className="text-white font-semibold">1</span>
          </div>
          <p className="text-sm text-gray-700">
            <span className="font-medium">Los participantes deben contar con alguna experiencia práctica</span> 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.
          </p>
        </div>
        <div className="flex items-start gap-2">
          <div
            className="flex items-center justify-center rounded-full h-6 w-6 min-w-6 mt-0.5"
            style={{ backgroundColor: "#fc0000" }}
          >
            <span className="text-white font-semibold">2</span>
          </div>
          <p className="text-sm text-gray-700">
            <span className="font-medium">Los participantes deben contar con conocimientos básicos</span> 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.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase4/identificar-objeciones.tsx" isMerged="true"
"use client"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Check } from "lucide-react"
import { useState } from "react"

export default function IdentificarObjeciones() {
  // Estado para los checkboxes de soluciones
  const [selectedSolutions, setSelectedSolutions] = useState({
    // Objeción 1
    solucion1_1: false,
    solucion1_2: false,
    solucion1_3: false,
    // Objeción 2
    solucion2_1: false,
    solucion2_2: false,
    solucion2_3: false,
    solucion2_4: false,
    // Objeción 3
    solucion3_1: false,
    solucion3_2: false,
    solucion3_3: false,
    // Objeción 4
    solucion4_1: false,
    solucion4_2: false,
    solucion4_3: false,
    solucion4_4: false,
    solucion4_5: false,
    // Objeción 5
    solucion5_1: false,
    solucion5_2: false,
    solucion5_3: false,
    solucion5_4: false,
    // Objeción 6
    solucion6_1: false,
    solucion6_2: false,
    solucion6_3: false,
  })

// Función para alternar la selección de una solución
  const toggleSolution = (solucion) => {
    setSelectedSolutions((prev) => ({
      ...prev,
      [solucion]: !prev[solucion],
    }))
  }

// Estado para controlar qué pestaña está activa
  const [activeTab, setActiveTab] = useState("dificultad")

return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <Accordion type="single" collapsible className="w-full" defaultValue="objecion-1">
          {/* Objeción 1 */}
          <AccordionItem value="objecion-1" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  1
                </span>
                <span className="text-sm">
                  El programa es muy caro. / No estoy seguro de que realmente valga la pena la inversión
                </span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              {/* Tabs navigation - NUEVO ESTILO */}
              <div className="flex space-x-2 mb-4">
                <button
                  onClick={() => setActiveTab("dificultad")}
                  className={`py-2 px-4 text-center font-medium rounded-md ${
                    activeTab === "dificultad"
                      ? "bg-[#1a56db] text-white"
      : "bg-blue-50 text-blue-600 hover:bg-white/80 hover:underline"
  }`}
>
                  Dificultad para pagar
                </button>
                <button
                  onClick={() => setActiveTab("justifica")}
                  className={`py-2 px-4 text-center font-medium rounded-md ${
                    activeTab === "justifica" 
                    ? "bg-[#1a56db] text-white"
      : "bg-blue-50 text-blue-600 hover:bg-white/80 hover:underline"
  }`}
>
                  No justifica el precio
                </button>
                <button
                  onClick={() => setActiveTab("financiamiento")}
                  className={`py-2 px-4 text-center font-medium rounded-md ${
                    activeTab === "financiamiento"
                      ? "bg-[#1a56db] text-white"
      : "bg-blue-50 text-blue-600 hover:bg-white/80 hover:underline"
  }`}
>
                  Financiamiento empresarial
                </button>
              </div>

{/* Caso 1 - Dificultad para pagar */}
              {activeTab === "dificultad" && (
                <div className="pl-3 py-3 mb-6">
                  {/* Título del caso sin checkbox */}
                  <div className="mb-3">
                    <div className="font-bold text-blue-600 text-base">
                      Caso 1: El participante reconoce el valor del programa, pero se le dificulta pagar.
                    </div>
                  </div>
                  <p className="mb-3">
                    <span className="font-bold text-blue-600">Solución:</span> Averiguar si la dificultad del cliente
                    está en el pago de la matrícula o las cuotas, o en el pago del valor total del programa.
                  </p>

<div className="space-y-4">
                    {/* Punto 1 - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion1_1")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion1_1 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 1.1"
                        >
                          {selectedSolutions.solucion1_1 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Problema con el pago de la matrícula</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm mb-2">Ofrecer fraccionar la matrícula</p>
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            <span className="font-medium">Fraccionar la matrícula:</span> Permite al profesional
                            comenzar el programa pagando solo el 50% de la matrícula como mínimo.
                          </li>
                        </ul>
                      </div>
                    </div>

{/* Punto 2 - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion1_2")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion1_2 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 1.2"
                        >
                          {selectedSolutions.solucion1_2 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Problema con el pago de las cuotas</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm mb-2">Ofrecer las versiones del programa o cronogramas flexibles:</p>
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            <span className="font-medium">Cronogramas flexibles:</span> Ofrecer un cronograma
                            personalizado
                          </li>
                          <li>Reducir las cuotas normales incluyendo el pago de cuotas dobles en julio y diciembre</li>
                          <li>Incrementar el número de cuotas a pagar en 1 o 2 cuotas adicionales</li>
                        </ul>
                      </div>
                    </div>

{/* Punto 3 - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion1_3")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion1_3 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 1.3"
                        >
                          {selectedSolutions.solucion1_3 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">
                          Problema con el pago del valor total del programa
                        </span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm mb-2">
                          Ofrecer la opción de tomar las versiones del programa de menor valor u ofrecer un descuento:
                        </p>
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            <span className="font-medium">Versiones:</span> Ofrecer la versión de menor valor de acuerdo
                            al objetivo del cliente
                          </li>
                          <li>Si su objetivo solo es aprender los conocimientos técnicos ofrecer la versión básica</li>
                          <li>
                            Si su objetivo es obtener la certificación de AWS, ofrecer las opciones de versión gerencial
                          </li>
                          <li>
                            <span className="font-medium">Descuentos:</span> Como último recurso ofrecer un esquema de
                            descuento:
                            <ul className="list-disc pl-5 mt-1 space-y-1">
                              <li>
                                Empezar ofreciendo 15% por pago al contado. Se puede incrementar este descuento a 20%
                                como máximo.
                              </li>
                              <li>
                                En el caso de que el cliente no pueda afrontar el pago al contado ofrecer 5% de
                                descuento inicial, se puede negociar para subir a 10% y en el último de los casos a 15%.
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>

<p className="mt-4 font-bold text-red-600 text-base p-2 bg-red-50 rounded">
                    NO OFRECER DESCUENTOS SIN CONOCER EL PROBLEMA ESPECÍFICO DEL CLIENTE.
                  </p>
                </div>
              )}

{/* Caso 2: No justifica el precio */}
              {activeTab === "justifica" && (
                <div className="pl-3 py-3 mb-6">
                  {/* Título del caso sin checkbox */}
                  <div className="mb-3">
                    <div className="font-bold text-blue-600 text-base">
                      Caso 2: Al participante le parece que el valor del programa no justifica su precio
                    </div>
                  </div>
                  <p className="mb-3">
                    <span className="font-bold text-blue-600">Solución:</span> Enfatizar el{" "}
                    <span className="font-bold">
                      retorno sobre la inversión y el valor añadido del programa y el soporte continuo y personalizado.
                    </span>
                  </p>

<div className="space-y-4">
                    {/* Punto 1 - Retorno sobre la inversión - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion2_1")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion2_1 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 2.1"
                        >
                          {selectedSolutions.solucion2_1 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Retorno sobre la inversión</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm mb-2">
                          Enfatizar el potencial retorno sobre la inversión que puede obtener el participante:
                        </p>
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            <span className="font-medium">Incremento salarial:</span> Los participantes del curso pueden
                            obtener incrementos salariales significativos, con un promedio de 15%-25% según WhizLabs
                            <div className="mt-1">
                              <a
                                href="https://www.whizlabs.com/blog/aws-certified-solutions-architect-salary/"
                                className="text-blue-600 text-xs"
                              >
                                Ver fuente
                              </a>
                            </div>
                          </li>
                          <li>
                            <span className="font-medium">Acceso a posiciones de liderazgo:</span> La certificación
                            Certified Solutions Architect - Associate emitida por AWS, es reconocida globalmente como la
                            cuarta certificación mejor pagada según Skill Soft.
                            <div className="mt-1">
                              <a
                                href="https://www.skillsoft.com/blog/top-paying-it-certifications"
                                className="text-blue-600 text-xs"
                              >
                                Ver fuente
                              </a>
                            </div>
                          </li>
                          <li>
                            <span className="font-medium">Mejora de la marca personal:</span> 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.
                          </li>
                        </ul>
                      </div>
                    </div>

{/* Punto 2 - Valor añadido - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion2_2")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion2_2 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 2.2"
                        >
                          {selectedSolutions.solucion2_2 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Valor añadido</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            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.
                          </li>
                          <li>
                            El valor del curso incluye el acceso al simulador en español BSG AWS - CSA Tento® con 195
                            preguntas del examen de certificación.
                          </li>
                          <li>
                            El valor del curso incluye acceso al laboratorio oficial de Architecting on AWS y al
                            laboratorio oficial Technical Essentials.
                          </li>
                          <li>
                            El valor del curso incluye el voucher del examen para la certificación AWS Certified
                            Solutions Architect - Associate emitida por Amazon Web Services.
                          </li>
                        </ul>
                      </div>
                    </div>

{/* Punto 3 - Seguimiento continuo del aprendizaje - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion2_3")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion2_3 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 2.3"
                        >
                          {selectedSolutions.solucion2_3 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Seguimiento continuo del aprendizaje</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm">
                          Ofrecemos soporte continuo asegurando que reciban orientación personalizada, resolución de
                          dudas oportuna y seguimiento del progreso mediante recordatorios para completar el programa
                          exitosamente.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}

{/* Caso 3: Financiamiento empresarial */}
              {activeTab === "financiamiento" && (
                <div className="pl-3 py-3 mb-6">
                  {/* Título del caso sin checkbox */}
                  <div className="mb-3">
                    <div className="font-bold text-blue-600 text-base">
                      Caso 3: El participante está gestionando financiamiento con su empresa.
                    </div>
                  </div>
                  <p className="mb-3">
                    <span className="font-bold text-blue-600">Solución:</span> Ofrecer los documentos necesarios para
                    confirmar su participación del prospecto, como último recurso ofrecer un esquema de descuento
                  </p>

<div className="space-y-4">
                    {/* Punto 1 - Enviar los documentos que inspiran confianza - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion3_1")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion3_1 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 3.1"
                        >
                          {selectedSolutions.solucion3_1 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Enviar los documentos que inspiran confianza</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            Ofrecer al cliente los documentos necesarios para la solicitud en su empresa: constancia de
                            admisión, constancia de matrícula, constancia de participación o el documento que se
                            requiera.
                          </li>
                          <li>
                            Ofrecer una carta de presentación de la empresa incluyendo facilidades para clientes
                            corporativos.
                          </li>
                        </ul>
                      </div>
                    </div>

{/* Punto 2 - Descuentos - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion3_2")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion3_2 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 3.2"
                        >
                          {selectedSolutions.solucion3_2 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Descuentos</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <ul className="list-disc pl-5 space-y-1 text-sm">
                          <li>
                            Ofrecer el descuento corporativo: 5% de descuento para cada matriculado en grupo de 3 o más.
                          </li>
                          <li>
                            Ofrecer el descuento corporativo: un 10% de descuento en el monto total por el primer
                            referido que se inscriba, y por cada referido adicional, un 5% de descuento extra.
                          </li>
                        </ul>
                      </div>
                    </div>

{/* Punto 3 - Comunicarle que nos mantendremos en contacto - Siempre desplegado */}
                    <div className="bg-green-50/30">
                      <div className="flex items-center py-2">
                        <button
                          onClick={() => toggleSolution("solucion3_3")}
                          className={`w-6 h-6 flex items-center justify-center rounded mr-3 ${
                            selectedSolutions.solucion3_3 ? "bg-green-600" : "border border-gray-300"
                          }`}
                          aria-label="Seleccionar solución 3.3"
                        >
                          {selectedSolutions.solucion3_3 && <Check className="h-4 w-4 text-white" />}
                        </button>
                        <div className="w-3 mr-3"></div>
                        <span className="font-medium text-blue-600">Mantener contacto</span>
                      </div>

<div className="pl-12 pr-3 pb-3">
                        <p className="text-sm">
                          Comunicarle que nos mantendremos en contacto y agendar la siguiente llamada.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </AccordionContent>
          </AccordionItem>

{/* Objeción 2 */}
          <AccordionItem value="objecion-2" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  2
                </span>
                <span className="text-sm">No estoy seguro de tener tiempo suficiente para dedicarle al programa.</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              <div className="pt-4">
                <ul className="list-none pl-0 space-y-4">
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion2_1")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion2_1 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 2.1"
                    >
                      {selectedSolutions.solucion2_1 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Eficiencia del tiempo invertido</p>
                        <p className="text-sm mt-1">
                          El programa está estructurado para que cada hora de estudio sea valiosa y directamente
                          aplicable en tu trabajo diario.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion2_2")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion2_2 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 2.2"
                    >
                      {selectedSolutions.solucion2_2 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Retorno de la inversión de tiempo</p>
                        <p className="text-sm mt-1">
                          Invertir tiempo ahora puede ahorrarte mucho más tiempo en proyectos futuros debido a la mayor
                          eficiencia y habilidades adquiridas.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion2_3")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion2_3 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 2.3"
                    >
                      {selectedSolutions.solucion2_3 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Modalidad online sincrónica</p>
                        <p className="text-sm mt-1">
                          Las clases en vivo se desarrollan una vez por semana en horarios nocturnos. Todas las clases
                          se graban y están disponibles para revisar en cualquier momento.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion2_4")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion2_4 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 2.4"
                    >
                      {selectedSolutions.solucion2_4 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Soporte personalizado</p>
                        <p className="text-sm mt-1">
                          Ofrecemos orientación personalizada, resolución de dudas oportuna y seguimiento del progreso
                          mediante recordatorios para completar el programa exitosamente.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </AccordionContent>
          </AccordionItem>

{/* Objeción 3 */}
          <AccordionItem value="objecion-3" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  3
                </span>
                <span className="text-sm">No estoy seguro de que el contenido sea lo que busco.</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              <div className="pt-4">
                <ul className="list-none pl-0 space-y-4">
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion3_1")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion3_1 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 3.1"
                    >
                      {selectedSolutions.solucion3_1 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Enfoque en arquitectura de soluciones</p>
                        <p className="text-sm mt-1">
                          El programa se enfoca en la creación de arquitecturas escalables, seguras y de alto
                          rendimiento en AWS.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion3_2")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion3_2 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 3.2"
                    >
                      {selectedSolutions.solucion3_2 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Especialización en áreas específicas</p>
                        <p className="text-sm mt-1">
                          Los participantes pueden enfocarse en aspectos como seguridad en la nube y automatización de
                          infraestructuras.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion3_3")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion3_3 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 3.3"
                    >
                      {selectedSolutions.solucion3_3 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Acceso a sesión online de prueba</p>
                        <p className="text-sm mt-1">
                          Podrá experimentar de primera mano la metodología de enseñanza y el contenido antes de
                          decidir.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </AccordionContent>
          </AccordionItem>

{/* Objeción 4 */}
          <AccordionItem value="objecion-4" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  4
                </span>
                <span className="text-sm">No estoy seguro de la calidad/confiabilidad del programa.</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              <div className="pt-4">
                <ul className="list-none pl-0 space-y-4">
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion4_1")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion4_1 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 4.1"
                    >
                      {selectedSolutions.solucion4_1 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Nivel de satisfacción</p>
                        <p className="text-sm mt-1">
                          El nivel de satisfacción de los alumnos que participaron en el programa en los últimos 5 años
                          es de 4.5 en una escala del 1 al 5.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion4_2")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion4_2 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 4.2"
                    >
                      {selectedSolutions.solucion4_2 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Tasa de recomendación</p>
                        <p className="text-sm mt-1">
                          El 92% de los alumnos que participaron en el curso en los últimos 5 años, recomendaría el
                          curso.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion4_3")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion4_3 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 4.3"
                    >
                      {selectedSolutions.solucion4_3 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Fidelidad de los estudiantes</p>
                        <p className="text-sm mt-1">
                          El 92% de los alumnos que han completado el programa en los últimos 5 años, están dispuestos a
                          inscribirse nuevamente en futuros programas ofrecidos por BSG Institute.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion4_4")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion4_4 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 4.4"
                    >
                      {selectedSolutions.solucion4_4 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Según las reseñas de Google</p>
                        <p className="text-sm mt-1">
                          En Perú: 4.8/5, Colombia: 4.7/5, Chile: 4.7/5, México: 4.6/5 en la satisfacción de los
                          estudiantes.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion4_5")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion4_5 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 4.5"
                    >
                      {selectedSolutions.solucion4_5 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Retorno de inversión</p>
                        <p className="text-sm mt-1">
                          El 90% de los usuarios consideran que la inversión en el curso fue rentable, según Google
                          Reviews, 2024.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </AccordionContent>
          </AccordionItem>

{/* Objeción 5 */}
          <AccordionItem value="objecion-5" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  5
                </span>
                <span className="text-sm">
                  No estoy seguro de que las clases online sean tan efectivas como las clases presenciales.
                </span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              <div className="pt-4">
                <ul className="list-none pl-0 space-y-4">
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion5_1")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion5_1 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 5.1"
                    >
                      {selectedSolutions.solucion5_1 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">
                          Flexibilidad para conectarse desde cualquier locación
                        </p>
                        <p className="text-sm mt-1">
                          Los participantes tendrán acceso a 38 horas de clases online en vivo.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion5_2")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion5_2 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 5.2"
                    >
                      {selectedSolutions.solucion5_2 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Acceso a interacción con los expositores</p>
                        <p className="text-sm mt-1">
                          Posibilidad de interactuar con los expositores internacionales pudiendo ampliar la red de
                          contactos hacia otros países.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion5_3")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion5_3 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 5.3"
                    >
                      {selectedSolutions.solucion5_3 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Acceso a Grabaciones</p>
                        <p className="text-sm mt-1">
                          Todas las clases en vivo que se graban se encontrarán disponibles para revisar el contenido en
                          cualquier momento o repasar temas complejos.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion5_4")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion5_4 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 5.4"
                    >
                      {selectedSolutions.solucion5_4 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Acceso a una sesión online de prueba</p>
                        <p className="text-sm mt-1">
                          Se le puede ofrecer al participante el acceso a una clase prueba para que pueda experimentar
                          el contenido y la metodología de enseñanza.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </AccordionContent>
          </AccordionItem>

{/* Objeción 6 */}
          <AccordionItem value="objecion-6" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:bg-gray-50">
              <div className="flex items-center text-left">
                <span className="flex items-center justify-center w-6 h-6 rounded-full bg-[#00b200] text-white mr-2 font-semibold">
                  6
                </span>
                <span className="text-sm">No estoy seguro de que realmente necesite este programa ahora mismo.</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4">
              <div className="pt-4">
                <ul className="list-none pl-0 space-y-4">
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion6_1")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion6_1 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 6.1"
                    >
                      {selectedSolutions.solucion6_1 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Oportunidad de incremento salarial</p>
                        <p className="text-sm mt-1">
                          Posponer la certificación AWS Certified Solutions Architect - Associate podría retrasar la
                          posibilidad de acceder a un incremento salarial significativo, con un promedio de entre 10% y
                          20% en varios países de Latinoamérica.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion6_2")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion6_2 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 6.2"
                    >
                      {selectedSolutions.solucion6_2 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Competitividad en el mercado laboral</p>
                        <p className="text-sm mt-1">
                          No inscribirse ahora en el Curso puede reducir la competitividad del profesional en el mercado
                          laboral, limitando su capacidad para diseñar, implementar y gestionar arquitecturas seguras y
                          escalables en la nube con AWS.
                        </p>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <button
                      onClick={() => toggleSolution("solucion6_3")}
                      className={`w-6 h-6 flex items-center justify-center rounded mr-3 mt-0.5 ${
                        selectedSolutions.solucion6_3 ? "bg-green-600" : "border border-gray-300"
                      }`}
                      aria-label="Seleccionar solución 6.3"
                    >
                      {selectedSolutions.solucion6_3 && <Check className="h-4 w-4 text-white" />}
                    </button>
                    <div className="flex items-start flex-1">
                      <div className="w-3 mr-3"></div>
                      <div>
                        <p className="font-medium text-blue-600">Expansión de red profesional</p>
                        <p className="text-sm mt-1">
                          No inscribirse en el programa implica perder la oportunidad de expandir la red profesional en
                          un entorno de aprendizaje enriquecedor, lo que podría limitar futuras colaboraciones y
                          oportunidades de negocio.
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="contexts/comentario-context.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, type ReactNode, useEffect } from "react"
import { usePathname } from "next/navigation"

type ComentarioContextType = {
  showComentarioButton: boolean
  setShowComentarioButton: (show: boolean) => void
}

// Crear el contexto con un valor por defecto
export const ComentarioContext = createContext<ComentarioContextType | undefined>(undefined)

export function ComentarioProvider({ children }: { children: ReactNode }) {
  const [showComentarioButton, setShowComentarioButton] = useState(false)
  const pathname = usePathname()

// Initialize the button visibility based on the current path
  useEffect(() => {
    // Check if we're on a contact detail page
    const isContactDetailPage =
      pathname?.includes("/gestion-comercial/agenda/contacto-entrante/") &&
      pathname?.split("/").length > 4 &&
      !pathname?.endsWith("/contacto-entrante") &&
      !pathname?.endsWith("/agenda")

// Set the button visibility based on the current page
    if (isContactDetailPage) {
      setShowComentarioButton(true)
    }
  }, [pathname])

return (
    <ComentarioContext.Provider value={{ showComentarioButton, setShowComentarioButton }}>
      {children}
    </ComentarioContext.Provider>
  )
}

export function useComentario() {
  const context = useContext(ComentarioContext)
  if (context === undefined) {
    // En lugar de lanzar un error, devolvemos un valor por defecto
    return { showComentarioButton: false, setShowComentarioButton: () => {} }
  }
  return context
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/prog-manuales/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,
  Filter,
  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 { AgendaTabs } from "@/components/agenda-tabs"

// Definir tipos para las categorías de perfil
type ProfileCategory = "excellent" | "very-good" | "good"

interface ProfileCategoryInfo {
  value: ProfileCategory
  label: string
  color: string
}

// 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 ProgramadasManualesPage() {
  const router = useRouter()
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState("10")
  const [pageInputValue, setPageInputValue] = useState("1")

// Datos de ejemplo
  const totalItems = 5
  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<ProfileCategory, ProfileCategoryInfo> = {
    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[] = ["good", "excellent", "very-good", "excellent", "good"]

// Manejadores de eventos
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return
    setCurrentPage(page)
    setPageInputValue(page.toString())
  }

const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    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(`/gestion-comercial/agenda/contacto-entrante/${contactId}`)
  }

return (
    <div className="px-6 md:px-8 agenda-container">
      <div className="max-w-[calc(100%-2rem)] mx-auto">
        {/* Add extra space before AgendaTabs */}
        <div className="mb-8"></div>
        <AgendaTabs />

{/* Add more space after the tabs and before the title */}
        <div className="mt-10 mb-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div>
            <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-800">Programadas Manuales</h2>
          </div>
          <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="search"
                placeholder="Buscar actividad..."
                className="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-auto"
              />
            </div>
            <Button variant="outline" size="sm" className="gap-1">
              <Filter className="h-4 w-4" />
              Filtrar
            </Button>
            <Button variant="default" size="sm">
              Buscar
            </Button>
          </div>
        </div>

<div className="space-y-6">
          <div className="overflow-x-auto bg-white rounded-lg shadow-sm">
            <table className="w-full agenda-table">
              <thead>
                <tr style={{ backgroundColor: "#e3f2fd" }}>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Actividad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Oportunidad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Días S/C Mañana
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Días S/C Tarde
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Comentario Anterior
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Fecha Programada
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {/* Fila 1 */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[0]}
                  data-profile-label={profileCategories[rowProfiles[0]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[0])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Llamada de Confirmación de Revisión de Información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Valverde Rafael</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IT</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-blue-600">Facebook Formulario Facebook 5 Campos</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">indica q se le envio la info</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("09:00")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[0])}`}
                      onClick={() => handleExecute("1")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Fila 2 */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[1]}
                  data-profile-label={profileCategories[rowProfiles[1]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[1])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Llamada de Confirmación de Revisión de Información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Lopez Lia Janeth</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG AONLINE 2025 II LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IT</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-blue-600">Facebook Chat</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">en la empresa donde labor...</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("09:30")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[1])}`}
                      onClick={() => handleExecute("2")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Fila 3 */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[2]}
                  data-profile-label={profileCategories[rowProfiles[2]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[2])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Llamada de Confirmación de Revisión de Información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Jeronimo Pampa Juan</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IT</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-blue-600">Facebook Formulario Facebook 5 Campos</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">ocupado q se le envie la inf...</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("10:00")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[2])}`}
                      onClick={() => handleExecute("3")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Fila 4 */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[3]}
                  data-profile-label={profileCategories[rowProfiles[3]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[3])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Llamada de Confirmación de Revisión de Información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Inga Rojas Jimena</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG AONLINE 2020 I LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IT</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría:{" "}
                      <span className="font-bold text-blue-600">Facebook Remarketing Formulario Facebook</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">todo al segundo correo, ini...</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("12:45")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[3])}`}
                      onClick={() => handleExecute("4")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Fila 5 */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[4]}
                  data-profile-label={profileCategories[rowProfiles[4]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[4])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Llamada de Confirmación de Revisión de Información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Purizaca Fiestas Alberto</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IT</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-blue-600">Facebook Formulario Facebook 5 Campos</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">0 (0)</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">programa internacional de...</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("14:00")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[4])}`}
                      onClick={() => handleExecute("5")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>
              </tbody>
            </table>

{/* Componente de paginación */}
            <div className="flex flex-col md:flex-row md:items-center justify-between px-6 py-5 bg-white border-t border-gray-200 gap-4">
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
                  <span className="text-sm text-gray-700">Página</span>
                  <Input
                    type="text"
                    value={pageInputValue}
                    onChange={handlePageInputChange}
                    onBlur={handlePageInputBlur}
                    onKeyDown={(e) => e.key === "Enter" && handlePageInputBlur()}
                    className="w-12 h-8 text-center"
                  />
                  <span className="text-sm text-gray-700">de {totalPages}</span>
                </div>
              </div>

<div className="flex items-center gap-3">
                <Select value={itemsPerPage} onValueChange={handleItemsPerPageChange}>
                  <SelectTrigger className="h-8 w-[70px]">
                    <SelectValue placeholder="10" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="5">5</SelectItem>
                    <SelectItem value="10">10</SelectItem>
                    <SelectItem value="20">20</SelectItem>
                    <SelectItem value="50">50</SelectItem>
                  </SelectContent>
                </Select>
                <span className="text-sm text-gray-700">ítems por página</span>
              </div>

<div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => handlePageChange(1)}
                    disabled={currentPage === 1}
                  >
                    <ChevronsLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => handlePageChange(currentPage - 1)}
                    disabled={currentPage === 1}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <span className="text-sm text-gray-700 mx-3">
                    {startItem} - {endItem} de {totalItems} ítems
                  </span>
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => handlePageChange(currentPage + 1)}
                    disabled={currentPage === totalPages}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => handlePageChange(totalPages)}
                    disabled={currentPage === totalPages}
                  >
                    <ChevronsRight className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="h-8 w-8 ml-3"
                    onClick={() => {
                      /* Aquí iría la lógica para recargar los datos */
                    }}
                  >
                    <RefreshCw className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Añadir un espacio adicional al final */}
        <div className="h-16"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/no-prog-altas-medias/page.tsx" isMerged="true"
"use client"

import type React from "react"

// 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 NoProgAltasMediasPage() {
  const router = useRouter()
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState("10")
  const [pageInputValue, setPageInputValue] = useState("1")

// Datos de ejemplo
  const totalItems = 2
  const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage))

// Manejadores de eventos
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return
    setCurrentPage(page)
    setPageInputValue(page.toString())
  }

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

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(`/gestion-comercial/agenda/contacto-entrante/${contactId}`)
  }

{/* Add more space after the tabs and before the title */}
        <div className="mt-10 mb-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div>
            <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-800">No Prog. Altas y Medias</h2>
          </div>
          <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="search"
                placeholder="Buscar contacto..."
                className="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-auto"
              />
            </div>
            <Button variant="outline" size="sm" className="gap-1">
              <Filter className="h-4 w-4" />
              Filtrar
            </Button>
            <Button variant="default" size="sm">
              Buscar
            </Button>
          </div>
        </div>

<div className="space-y-6">
          <div className="overflow-x-auto bg-white rounded-lg shadow-sm">
            <table className="w-full agenda-table">
              <thead>
                <tr style={{ backgroundColor: "#e3f2fd" }}>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Actividad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Oportunidad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Comentario Anterior
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Fecha Programada
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {/* Contacto 1 */}
                <tr className="hover:bg-[#e3f2fd]/70">
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div className="w-3 h-10 bg-blue-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                      <div>
                        <div className="font-medium">Llamada de contacto inicial</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Perez Montiel, Julio</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG AONLINE 2025 II LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-red-600">Mailing Bases Propias Chat</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">Sin Comentario</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">17/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("14:30")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className="rounded-full h-7 px-3 bg-red-500 text-white hover:bg-red-600"
                      onClick={() => handleExecute("1")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Contacto 2 */}
                <tr className="hover:bg-[#e3f2fd]/70">
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div className="w-3 h-10 bg-yellow-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                      <div>
                        <div className="font-medium">Llamada de contacto inicial</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Chumbile Cerda, Edith</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Chat Bases Propias</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="text-sm text-gray-600 line-clamp-2">Asignacion Manual</div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">17/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("11:45")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className="rounded-full h-7 px-3 bg-yellow-500 text-white hover:bg-yellow-600"
                      onClick={() => handleExecute("2")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>
              </tbody>
            </table>

{/* Añadir un espacio adicional al final */}
        <div className="h-16"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/vendidas-ipic-pf/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Search, Filter, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, RefreshCw } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { AgendaTabs } from "@/components/agenda-tabs"
import { ExecuteButton } from "@/components/execute-button"

export default function VendidasIPICPFPage() {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState("10")
  const [pageInputValue, setPageInputValue] = useState("1")

// Datos de ejemplo
  const totalItems = 5
  const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage))

// Manejadores de eventos
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return
    setCurrentPage(page)
    setPageInputValue(page.toString())
  }

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

const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(value)
    setCurrentPage(1)
    setPageInputValue("1")
  }

return (
    <div className="px-6 md:px-8 max-w-[calc(100%-2rem)] mx-auto agenda-container">
      {/* Add extra space before AgendaTabs */}
      <div className="mb-8"></div>
      <AgendaTabs />

{/* Add more space after the tabs and before the title */}
      <div className="mt-10 mb-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-800">Vendidas [IPIC,PF]</h2>
        </div>
        <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <input
              type="search"
              placeholder="Buscar contacto..."
              className="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-auto"
            />
          </div>
          <Button variant="outline" size="sm" className="gap-1">
            <Filter className="h-4 w-4" />
            Filtrar
          </Button>
          <Button variant="default" size="sm">
            Buscar
          </Button>
        </div>
      </div>

<div className="space-y-6">
        <div className="overflow-x-auto bg-white rounded-lg shadow-sm">
          <table className="w-full agenda-table">
            <thead>
              <tr style={{ backgroundColor: "#e3f2fd" }}>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Actividad
                </th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Oportunidad
                </th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Días S/C (Act. Hoy) Mañana
                </th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Días S/C (Act. Hoy) Tarde
                </th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Comentario Anterior
                </th>
                <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                  Fecha Programada
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-100">
              {/* Fila 1 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-yellow-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">Llamada de Cierre</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div>
                    <div className="flex items-center mb-1">
                      <span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
                        Alta
                      </span>
                      <span className="font-medium">Sarango Chamba, Fredy</span>
                    </div>
                    <div className="font-medium" style={{ color: "#9333ea" }}>
                      FF ISO 9001 AONLINE 2025 I LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IP</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      Categoría: <span className="font-bold text-orange-600">Organico Offline Chat</span>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">0 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">1 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600">nc</div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex flex-col items-start">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-2">09:36</div>
                    <ExecuteButton color="yellow" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 2 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-yellow-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">Llamada de Cierre</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div>
                    <div className="flex items-center mb-1">
                      <span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
                        Alta
                      </span>
                      <span className="font-medium">Santos Condor, Miguel Angel</span>
                    </div>
                    <div className="font-medium" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IP</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      Categoría: <span className="font-bold text-red-600">Adwords Busqueda Formulario Propio</span>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">2 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">2 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600">PROG. AUTOMATICA - MA...</div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex flex-col items-start">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-2">09:48</div>
                    <ExecuteButton color="yellow" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 3 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-red-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">Llamada de Cierre</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div>
                    <div className="flex items-center mb-1">
                      <span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
                        Alta
                      </span>
                      <span className="font-medium">Molano, Henry</span>
                    </div>
                    <div className="font-medium" style={{ color: "#9333ea" }}>
                      LEAN SSSB AONLINE 2025 I BOGOTA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IP</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Chat Bases Propias</span>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">2 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">2 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600">nc</div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex flex-col items-start">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-2">11:26</div>
                    <ExecuteButton color="red" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 4 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-green-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">Llamada de Cierre</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div>
                    <div className="flex items-center mb-1">
                      <span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
                        Alta
                      </span>
                      <span className="font-medium">Arzapalo Tarique, Gissella Alicia</span>
                    </div>
                    <div className="font-medium" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IP</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Chat Bases Propias</span>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">0 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">0 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-1">ocupado llamarla mañana...</div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex flex-col items-start">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-2">12:00</div>
                    <ExecuteButton color="green" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 5 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-green-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">Llamada de Cierre</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div>
                    <div className="flex items-center mb-1">
                      <span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
                        Alta
                      </span>
                      <span className="font-medium">Paricahua Zapana, Yhon Alex</span>
                    </div>
                    <div className="font-medium" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 III LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">IP</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Chat Bases Propias</span>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">0 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">0 (0)</div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-1">quiere abrirse campo para...</div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex flex-col items-start">
                    <div className="font-medium">24/04/2025</div>
                    <div className="text-xs text-gray-500 mb-2">13:00</div>
                    <ExecuteButton color="green" text="Ejecutar" />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

{/* Componente de paginación */}
          <div className="flex flex-col md:flex-row md:items-center justify-between px-6 py-5 bg-white border-t border-gray-200 gap-3">
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1">
                <span className="text-sm text-gray-700">Página</span>
                <Input
                  type="text"
                  value={pageInputValue}
                  onChange={handlePageInputChange}
                  onBlur={handlePageInputBlur}
                  onKeyDown={(e) => e.key === "Enter" && handlePageInputBlur()}
                  className="w-12 h-8 text-center"
                />
                <span className="text-sm text-gray-700">de {totalPages}</span>
              </div>
            </div>

<div className="flex items-center gap-2">
              <Select value={itemsPerPage} onValueChange={handleItemsPerPageChange}>
                <SelectTrigger className="h-8 w-[70px]">
                  <SelectValue placeholder="10" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="5">5</SelectItem>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="20">20</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                </SelectContent>
              </Select>
              <span className="text-sm text-gray-700">ítems por página</span>
            </div>

<div className="flex items-center gap-2">
              <div className="flex items-center gap-1">
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(1)}
                  disabled={currentPage === 1}
                >
                  <ChevronsLeft className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <span className="text-sm text-gray-700 mx-2">
                  {startItem} - {endItem} de {totalItems} ítems
                </span>
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(totalPages)}
                  disabled={currentPage === totalPages}
                >
                  <ChevronsRight className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8 ml-2"
                  onClick={() => {
                    /* Aquí iría la lógica para recargar los datos */
                  }}
                >
                  <RefreshCw className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Añadir un espacio adicional al final */}
      <div className="h-16"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/vencidas-is-m/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Search, Filter, 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 { AgendaTabs } from "@/components/agenda-tabs"
import { ExecuteButton } from "@/components/execute-button"

export default function VencidasISMPage() {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState("10")
  const [pageInputValue, setPageInputValue] = useState("1")

// Datos de ejemplo
  const totalItems = 5
  const totalPages = Math.ceil(totalItems / Number.parseInt(itemsPerPage))

// Manejadores de eventos
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return
    setCurrentPage(page)
    setPageInputValue(page.toString())
  }

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

const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(value)
    setCurrentPage(1)
    setPageInputValue("1")
  }

return (
    <div className="px-6 md:px-8 max-w-[calc(100%-2rem)] mx-auto agenda-container">
      {/* Add extra space before AgendaTabs */}
      <div className="mb-8"></div>
      <AgendaTabs />

{/* Add more space after the tabs and before the title */}
      <div className="mt-10 mb-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-800">Vencidas [IS,M]</h2>
        </div>
        <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <input
              type="search"
              placeholder="Buscar contacto..."
              className="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-auto"
            />
          </div>
          <Button variant="outline" size="sm" className="gap-1">
            <Filter className="h-4 w-4" />
            Filtrar
          </Button>
          <Button variant="default" size="sm">
            Buscar
          </Button>
        </div>
      </div>

{/* Fila 2 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-red-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">llamada de grabación de contrato de voz</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex items-start gap-2">
                    <Badge variant="outline" className="bg-green-50 text-green-600">
                      Muy Alta
                    </Badge>
                    <div className="font-medium">Dávila Marín, Diana Lucía</div>
                  </div>
                  <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                    LEAN SSBB AONLINE 2020 I LIMA
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Fase: <span className="font-medium">M</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    Categoría: <span className="font-bold text-blue-600">Facebook Formulario Propio</span>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-2"></div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">22/04/2020</div>
                  <div className="text-xs text-gray-500">15:10</div>
                  <div className="mt-2">
                    <ExecuteButton color="red" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 3 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-red-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">llamada de grabación de contrato de voz</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex items-start gap-2">
                    <Badge variant="outline" className="bg-green-50 text-green-600">
                      Muy Alta
                    </Badge>
                    <div className="font-medium">Jaramillo Ospino, Jhon Jairo</div>
                  </div>
                  <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                    D SIG AONLINE 2020 I BOGOTA
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Fase: <span className="font-medium">M</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    Categoría: <span className="font-bold text-blue-600">Facebook Formulario Propio</span>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-2"></div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">22/04/2020</div>
                  <div className="text-xs text-gray-500">20:33</div>
                  <div className="mt-2">
                    <ExecuteButton color="red" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 4 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-red-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">llamada de grabación de contrato de voz</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex items-start gap-2">
                    <Badge variant="outline" className="bg-green-50 text-green-600">
                      Muy Alta
                    </Badge>
                    <div className="font-medium">Ballesteros Ruiz, Kelsy</div>
                  </div>
                  <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                    D SIG AONLINE 2020 I BOGOTA
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Fase: <span className="font-medium">M</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    Categoría: <span className="font-bold text-blue-600">Facebook Formulario Propio</span>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-2">se hizo la grabacion</div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">28/04/2020</div>
                  <div className="text-xs text-gray-500">14:12</div>
                  <div className="mt-2">
                    <ExecuteButton color="red" text="Ejecutar" />
                  </div>
                </td>
              </tr>

{/* Fila 5 */}
              <tr className="hover:bg-[#e3f2fd]/70">
                <td className="px-6 py-5">
                  <div className="flex items-center">
                    <div className="w-3 h-10 bg-red-500 rounded-full mr-3" style={{ width: "6px" }}></div>
                    <div>
                      <div className="font-medium">llamada de grabación de contrato de voz</div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="flex items-start gap-2">
                    <Badge variant="outline" className="bg-green-50 text-green-600">
                      Muy Alta
                    </Badge>
                    <div className="font-medium">Salazar franco, Wilbert Fernando</div>
                  </div>
                  <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                    D SIG AONLINE 2020 I LIMA
                  </div>
                  <div className="text-xs text-gray-500 mt-1">
                    Fase: <span className="font-medium">IS</span>
                  </div>
                  <div className="text-xs text-gray-500">
                    Categoría: <span className="font-bold text-blue-600">Facebook Formulario Facebook 5 Campos</span>
                  </div>
                </td>
                <td className="px-6 py-5">
                  <div className="text-sm text-gray-600 line-clamp-2"></div>
                </td>
                <td className="px-6 py-5">
                  <div className="font-medium">30/04/2020</div>
                  <div className="text-xs text-gray-500">19:00</div>
                  <div className="mt-2">
                    <ExecuteButton color="red" text="Ejecutar" />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

{/* Añadir un espacio adicional al final */}
      <div className="h-16"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        success: "bg-[#32cd32] text-white hover:bg-[#32cd32]/90",
        orange: "bg-[#F59E0B] text-white hover:bg-[#D97706]",
        execute: "bg-purple-100 text-purple-600 hover:bg-purple-200 border-none rounded-full flex items-center gap-1",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"

// Añadir el icono de reproducción para la variante "execute"
    const content =
      variant === "execute" ? (
        <>
          <div className="w-4 h-4 rounded-full bg-purple-600 flex items-center justify-center">
            <div className="w-0 h-0 border-t-[3px] border-t-transparent border-b-[3px] border-b-transparent border-l-[5px] border-l-white ml-0.5"></div>
          </div>
          {children}
        </>
      ) : (
        children
      )

return (
      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
        {content}
      </Comp>
    )
  },
)
Button.displayName = "Button"

const switchVariants = cva(
  "peer inline-flex h-[18px] w-[38px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
  {
    variants: {
      size: {
        default: "",
        sm: "h-[14px] w-[30px]",
      },
    },
    defaultVariants: {
      size: "default",
    },
  },
)

const Switch = React.forwardRef<
  React.ElementRef<"button">,
  React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof switchVariants>
>(({ className, size, ...props }, ref) => {
  return (
    <button
      {...props}
      ref={ref}
      className={cn(
        switchVariants({ size, className }),
        "after:bg-background after:absolute after:top-[2px] after:left-[2px] after:h-[14px] after:w-[14px] after:rounded-full after:border after:border-gray-300 after:shadow-md after:transition-all data-[state=checked]:after:translate-x-[20px]",
      )}
    ></button>
  )
})
Switch.displayName = "Switch"

export { Button, buttonVariants, Switch }
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/layout.tsx" isMerged="true"
import type React from "react"
import AgendaLayoutClient from "./AgendaLayoutClient"
import ChatInterface from "@/components/chat-interface"

export const metadata = {
  title: "Integra CRM - Agenda",
  description: "Sistema de gestión de agenda para Integra CRM",
}

export default function AgendaLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <AgendaLayoutClient>
      {children}
      <ChatInterface />
    </AgendaLayoutClient>
  )
}
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/wavix-dialer.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { X, Minimize2, Maximize2, Phone, Settings, Clock } from "lucide-react"

interface WavixDialerProps {
  onClose: () => void
}

export function WavixDialer({ onClose }: WavixDialerProps) {
  const [position, setPosition] = useState({ x: window.innerWidth - 350, y: 100 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [phoneNumber, setPhoneNumber] = useState("")
  const dialerRef = useRef<HTMLDivElement>(null)

// Handle dragging
  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    if (dialerRef.current) {
      const rect = dialerRef.current.getBoundingClientRect()
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      })
      setIsDragging(true)
    }
  }

const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
      setPosition({
        x: e.clientX - dragOffset.x,
        y: e.clientY - dragOffset.y,
      })
    }
  }

const handleMouseUp = () => {
    setIsDragging(false)
  }

useEffect(() => {
    if (isDragging) {
      window.addEventListener("mousemove", handleMouseMove)
      window.addEventListener("mouseup", handleMouseUp)
    } else {
      window.removeEventListener("mousemove", handleMouseMove)
      window.removeEventListener("mouseup", handleMouseUp)
    }

return () => {
      window.removeEventListener("mousemove", handleMouseMove)
      window.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDragging])

const handleDigitClick = (digit: string) => {
    setPhoneNumber((prev) => prev + digit)
  }

return (
    <div
      ref={dialerRef}
      className="fixed z-50 bg-white rounded shadow-lg border border-gray-300 w-[280px]"
      style={{
        left: `${position.x}px`,
        top: `${position.y}px`,
      }}
    >
      {/* Window header */}
      <div
        className="bg-gray-200 px-2 py-1 flex items-center justify-between rounded-t cursor-grab"
        onMouseDown={handleMouseDown}
        style={{ cursor: isDragging ? "grabbing" : "grab" }}
      >
        <div className="flex items-center">
          <Phone className="h-4 w-4 mr-1 text-gray-700" />
          <span className="text-xs text-gray-700">Wavix softphone</span>
        </div>
        <div className="flex items-center space-x-2">
          <button className="text-gray-600 hover:text-gray-800">
            <Minimize2 className="h-3 w-3" />
          </button>
          <button className="text-gray-600 hover:text-gray-800">
            <Maximize2 className="h-3 w-3" />
          </button>
          <button className="text-gray-600 hover:text-gray-800" onClick={onClose}>
            <X className="h-3 w-3" />
          </button>
        </div>
      </div>

{/* URL bar */}
      <div className="bg-gray-100 px-2 py-1 flex items-center text-xs border-b border-gray-300">
        <span className="text-gray-600">api.wavix.com/webrtc/v1...</span>
        <div className="ml-auto">
          <div className="w-4 h-3">
            <div className="bg-green-500 w-1 h-1 rounded-full inline-block"></div>
            <div className="bg-green-500 w-1 h-2 rounded-full inline-block"></div>
            <div className="bg-green-500 w-1 h-3 rounded-full inline-block"></div>
          </div>
        </div>
      </div>

{/* Phone dialer */}
      <div className="p-4">
        {/* Input field */}
        <div className="mb-4">
          <input
            type="text"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber(e.target.value)}
            placeholder="Enter number"
            className="w-full border-b border-gray-300 pb-1 focus:outline-none focus:border-gray-500 text-center"
          />
        </div>

{/* Keypad */}
        <div className="grid grid-cols-3 gap-2 mb-4">
          {[
            { num: "1", letters: "" },
            { num: "2", letters: "ABC" },
            { num: "3", letters: "DEF" },
            { num: "4", letters: "GHI" },
            { num: "5", letters: "JKL" },
            { num: "6", letters: "MNO" },
            { num: "7", letters: "PQRS" },
            { num: "8", letters: "TUV" },
            { num: "9", letters: "WXYZ" },
            { num: "*", letters: "" },
            { num: "0", letters: "space" },
            { num: "#", letters: "" },
          ].map((key, index) => (
            <button
              key={index}
              onClick={() => handleDigitClick(key.num)}
              className="bg-gray-100 hover:bg-gray-200 rounded-full w-14 h-14 flex flex-col items-center justify-center mx-auto"
            >
              <span className="text-xl font-medium text-gray-800">{key.num}</span>
              {key.letters && <span className="text-[10px] text-gray-500">{key.letters}</span>}
            </button>
          ))}
        </div>

{/* Call button */}
        <div className="flex justify-center mb-2">
          <button className="bg-green-500 hover:bg-green-600 text-white rounded-full w-14 h-14 flex items-center justify-center">
            <Phone className="h-6 w-6" />
          </button>
        </div>

{/* Bottom icons */}
        <div className="flex justify-between px-4">
          <button className="text-gray-500 hover:text-gray-700">
            <Settings className="h-5 w-5" />
          </button>
          <button className="text-gray-500 hover:text-gray-700">
            <Phone className="h-5 w-5" />
          </button>
          <button className="text-gray-500 hover:text-gray-700">
            <Clock className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/top-bar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { usePathname } from "next/navigation"
import { Bell, RefreshCw, Key, User, LogOut, AlignJustify, Phone } from "lucide-react"
import { WavixDialer } from "./wavix-dialer"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"

export function TopBar() {
  const [isWavixEnabled, setIsWavixEnabled] = useState(false)
  const pathname = usePathname()

// Verificar si estamos en la sección de agenda
  const isInAgenda = pathname?.includes("/gestion-comercial/agenda")

// Función para controlar el sidebar desde el botón de hamburguesa
  const toggleSidebar = () => {
    // Acceder directamente a la función del componente AppSidebar
    const event = new CustomEvent("toggle-sidebar")
    document.dispatchEvent(event)
  }

const toggleWavix = () => {
    setIsWavixEnabled(!isWavixEnabled)
  }

return (
    <header className="sticky top-0 z-10 flex h-16 items-center gap-4 bg-[#7b3ff7] text-white px-6 w-full">
      <Button
        variant="ghost"
        size="icon"
        className="text-white hover:bg-[#8f5af8] mr-2"
        onClick={toggleSidebar}
        aria-label="Menú principal"
      >
        <AlignJustify className="h-5 w-5" />
      </Button>
      <div className="flex items-center gap-2">
        <span className="font-semibold text-xl">Integra CRM</span>
      </div>
      <div className="ml-auto flex items-center gap-4">
        {/* Wavix toggle button - solo se muestra en la sección de agenda */}
        {isInAgenda && (
          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              className="flex items-center gap-2 text-white hover:bg-[#8f5af8] px-3 py-1"
              onClick={toggleWavix}
            >
              <Phone className="h-4 w-4" />
              <span>Wavix</span>
              <div className="relative inline-flex items-center">
                <div
                  className={`w-10 h-5 rounded-full transition-colors ${isWavixEnabled ? "bg-white" : "bg-purple-800"}`}
                >
                  <div
                    className={`absolute top-[2px] w-4 h-4 rounded-full transition-all ${
                      isWavixEnabled
                        ? "bg-purple-600 translate-x-5 border-white"
                        : "bg-white translate-x-[2px] border-purple-300"
                    } border`}
                  />
                </div>
              </div>
            </Button>
          </div>
        )}

<Button variant="ghost" size="icon" className="rounded-full text-white hover:bg-[#8f5af8]">
          <Bell className="h-5 w-5" />
          <span className="sr-only">Notificaciones</span>
        </Button>
        <Button variant="ghost" className="text-white hover:bg-[#8f5af8] gap-2">
          <span>Actualizar</span>
          <RefreshCw className="h-4 w-4" />
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="flex items-center gap-2 text-white hover:bg-[#8f5af8] px-2">
              <Avatar className="h-8 w-8 border border-white/30">
                <AvatarImage
                  src="/images/design-mode/Avatar%20mujer(1).svg"
                  alt="Yesica Palomino"
                />
                <AvatarFallback>YP</AvatarFallback>
              </Avatar>
              <span className="hidden md:inline whitespace-nowrap">Yesica Palomino</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <div className="flex items-center justify-start gap-2 p-2">
              <div className="flex flex-col space-y-1 leading-none">
                <p className="font-medium">Yesica Palomino</p>
                <p className="text-xs text-muted-foreground">yesica.palomino@bsginstitute.com</p>
              </div>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="cursor-pointer">
              <Key className="mr-2 h-4 w-4" />
              <span>Cambiar clave</span>
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer">
              <User className="mr-2 h-4 w-4" />
              <span>Mi avatar</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="cursor-pointer text-red-600">
              <LogOut className="mr-2 h-4 w-4" />
              <span>Cerrar sesión</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

{/* Render the WavixDialer when enabled */}
      {isWavixEnabled && <WavixDialer onClose={() => setIsWavixEnabled(false)} />}
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/wavix-toggle.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { usePathname } from "next/navigation"

export function WavixToggle() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()

// No mostrar este componente ya que ahora está en la barra superior
  return null
}
[V0_FILE]typescriptreact:file="components/agenda-tabs.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"

// Update the interface to include criticality
interface TabItem {
  label: string
  path: string
  count: number
  disabled?: boolean
  criticality?: "high" | "medium" | "low"
}

export function AgendaTabs() {
  const pathname = usePathname()

// Update the tabs array to include criticality information
  const tabs: TabItem[] = [
    {
      label: "Contacto Entrante",
      path: "/gestion-comercial/agenda/contacto-entrante",
      count: 1,
      disabled: false,
      criticality: "high", // Alta Criticidad / Uso Frecuente
    },
    {
      label: "Prog. Automáticas",
      path: "/gestion-comercial/agenda/prog-automaticas",
      count: 8,
      disabled: true,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
    {
      label: "Prog. Manuales",
      path: "/gestion-comercial/agenda/prog-manuales",
      count: 5,
      disabled: false,
      criticality: "high", // Alta Criticidad / Uso Frecuente
    },
    {
      label: "No Prog. 1 Solicitud",
      path: "/gestion-comercial/agenda/no-prog-1",
      count: 12,
      disabled: true,
      criticality: "medium", // Default
    },
    {
      label: "No Prog. +1 Solicitudes",
      path: "/gestion-comercial/agenda/no-prog-n",
      count: 7,
      disabled: true,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
    {
      label: "Altas y Medias",
      path: "/gestion-comercial/agenda/no-prog-altas-medias",
      count: 9,
      disabled: false,
      criticality: "high", // Alta Criticidad / Uso Frecuente
    },
    {
      label: "Vencidas [IP,IC,PF]",
      path: "/gestion-comercial/agenda/vendidas-ipic-pf",
      count: 4,
      disabled: false,
      criticality: "medium", // Uso Moderado / Seguimiento Medio
    },
    {
      label: "Vencidas [IS,M]",
      path: "/gestion-comercial/agenda/vencidas-is-m",
      count: 2,
      disabled: false,
      criticality: "medium", // Uso Moderado / Seguimiento Medio
    },
    {
      label: "Realizadas",
      path: "/gestion-comercial/agenda/realizadas",
      count: 8,
      disabled: true,
      criticality: "medium", // Uso Moderado / Seguimiento Medio
    },
    {
      label: "Pre-Lanzamiento",
      path: "/gestion-comercial/agenda/estadisticas",
      count: 6,
      disabled: false,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
    {
      label: "RN2-B",
      path: "/gestion-comercial/agenda/configuracion",
      count: 3,
      disabled: true,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
    {
      label: "RN2-A",
      path: "/gestion-comercial/agenda/rn2-a",
      count: 0,
      disabled: true,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
    {
      label: "Venta Cruzada",
      path: "/gestion-comercial/agenda/venta-cruzada",
      count: 0,
      disabled: true,
      criticality: "low", // Baja Criticidad / Bajo Uso
    },
  ]

// Update the renderTab function to apply different colors based on criticality
  const renderTab = (tab: TabItem) => {
    const isActive = pathname === tab.path
    // Mostrar 0 para pestañas deshabilitadas
    const displayCount = tab.disabled ? 0 : tab.count

// Define color schemes based on criticality
    let colorScheme = {
      bg: "bg-primary/10",
      activeBg: "bg-[#6419e6]",
      text: "text-primary",
      activeText: "text-white",
      countBg: "bg-white",
      countText: isActive ? "text-[#6419e6]" : "text-primary",
    }

// Apply color schemes based on criticality for enabled tabs
    if (!tab.disabled) {
      if (tab.criticality === "high") {
        // Red for high criticality
        colorScheme = {
          bg: "bg-blue-100",
          activeBg: "bg-blue-600",
          text: "text-blue-600",
          activeText: "text-white",
          countBg: "bg-white",
          countText: isActive ? "text-blue-600" : "text-blue-600",
        }
      } else if (tab.criticality === "medium") {
        // Yellow for medium criticality
        colorScheme = {
          bg: "bg-green-100",
          activeBg: "bg-green-600",
          text: "text-green-600",
          activeText: "text-white",
          countBg: "bg-white",
          countText: isActive ? "text-green-600" : "text-green-600",
        }
      } else if (tab.criticality === "low") {
        // Green for low criticality (changed from blue)
        colorScheme = {
          bg: "bg-amber-100",
          activeBg: "bg-amber-500",
          text: "text-amber-600",
          activeText: "text-white",
          countBg: "bg-white",
          countText: isActive ? "text-amber-600" : "text-amber-600",
        }
      }
    }

if (tab.disabled) {
      return (
        <div
          key={tab.path}
          className="rounded-lg px-3 py-2 text-sm font-medium flex items-center gap-1.5 whitespace-nowrap transition-colors bg-gray-100 text-gray-400 cursor-not-allowed"
        >
          <span>{tab.label}</span>
          <span className="rounded-full px-2 py-0.5 text-xs font-bold bg-gray-200 text-gray-500">{displayCount}</span>
        </div>
      )
    } else {
      return (
        <Link
          key={tab.path}
          href={tab.path}
          className={cn(
            "rounded-lg px-3 py-2 text-sm font-medium flex items-center gap-1.5 whitespace-nowrap transition-colors",
            isActive
              ? `${colorScheme.activeBg} ${colorScheme.activeText} font-semibold`
              : `${colorScheme.bg} ${colorScheme.text} hover:bg-opacity-80`,
          )}
        >
          <span>{tab.label}</span>
          <span
            className={cn(
              "rounded-full px-2 py-0.5 text-xs font-bold",
              `${colorScheme.countBg} ${colorScheme.countText}`,
            )}
          >
            {displayCount}
          </span>
        </Link>
      )
    }
  }

// Update the return statement to add more spacing between tabs
  return <div className="flex flex-wrap gap-4">{tabs.map(renderTab)}</div>
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { CallingNotification } from "@/components/calling-notification"

export default function AgendaPage() {
  const router = useRouter()
  const [showCallNotification, setShowCallNotification] = useState(true)

// Datos de ejemplo para la notificación de llamada
  const clientData = {
    name: "Carlos Mendoza",
    opportunity: "LEAN SSSB ONLINE 2024 II LIMA",
    phase: "BNC",
    category: "Facebook Chat",
    probability: "Alta",
    id: "1", // ID para la redirección
  }

useEffect(() => {
    // Si se cierra la notificación, redirigir a contacto-entrante
    if (!showCallNotification) {
      router.push("/gestion-comercial/agenda/contacto-entrante")
    }
  }, [showCallNotification, router])

return (
    <>
      <div className="flex items-center justify-center h-full">
        <p className="text-muted-foreground">Cargando...</p>
      </div>

<CallingNotification
        isOpen={showCallNotification}
        onClose={() => setShowCallNotification(false)}
        clientData={clientData}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

// Definir tipos para las categorías de perfil
type ProfileCategory = "excellent" | "very-good" | "good"

interface ProfileCategoryInfo {
  value: ProfileCategory
  label: string
  color: string
}

// 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 ContactoEntrantePage() {
  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))

// 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<HTMLInputElement>) => {
    setPageInputValue(e.target.value)
  }

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(`/gestion-comercial/agenda/contacto-entrante/${contactId}`)
  }

return (
    <div className="px-6 md:px-8 agenda-container">
      <div className="max-w-[calc(100%-2rem)] mx-auto">
        {/* Espacio reducido antes de AgendaTabs */}
        <div className="mb-2"></div>
        <AgendaTabs />

{/* Espacio reducido después de las pestañas y antes del título */}
        <div className="mt-6 mb-6 flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div>
            <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-800">Contacto Entrante</h2>
          </div>
          <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="search"
                placeholder="Buscar contacto..."
                className="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-auto"
              />
            </div>
            <Button variant="outline" size="sm" className="gap-1">
              <Filter className="h-4 w-4" />
              Filtrar
            </Button>
            <Button variant="default" size="sm">
              Buscar
            </Button>
          </div>
        </div>

<div className="space-y-6">
          <div className="overflow-x-auto bg-white rounded-lg shadow-sm">
            <table className="w-full agenda-table">
              <thead>
                <tr style={{ backgroundColor: "#e3f2fd" }}>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Actividad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Oportunidad
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Mensaje
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
                    Fecha Programada
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {/* Contacto Facebook */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[0]}
                  data-profile-label={profileCategories[rowProfiles[0]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[0])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Consulta inicial</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Carlos Mendoza</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      LEAN SSSB ONLINE 2024 II LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-blue-600">Facebook Chat</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div>
                      <Badge variant="outline" className="bg-blue-50 text-blue-600 inline-flex mr-1">
                        Correos
                      </Badge>
                      <span className="text-sm text-gray-600">
                        Solicita información sobre costos y modalidades disponibles
                      </span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">17/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("14:30")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[0])}`}
                      onClick={() => handleExecute("1")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Contacto AdWords */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[1]}
                  data-profile-label={profileCategories[rowProfiles[1]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[1])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Solicitud de información</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Ana María Gutiérrez</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 II LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Rpta - Mailing</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div>
                      <Badge variant="outline" className="bg-red-50 text-red-600 inline-flex mr-1">
                        Portal Web
                      </Badge>
                      <span className="text-sm text-gray-600">
                        Interesada en conocer fechas de inicio y requisitos de admisión
                      </span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">17/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("11:45")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[1])}`}
                      onClick={() => handleExecute("2")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Contacto WhatsApp */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[2]}
                  data-profile-label={profileCategories[rowProfiles[2]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[2])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Consulta de precios</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Roberto Sánchez</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      LEAN SSSB AONLINE 2025 I BOGOTA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Chat Bases Propias</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div>
                      <Badge variant="outline" className="bg-green-50 text-green-600 inline-flex mr-1">
                        WhatsApp
                      </Badge>
                      <span className="text-sm text-gray-600">
                        Pregunta por descuentos corporativos para grupo de 5 personas
                      </span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">16/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("18:20")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[2])}`}
                      onClick={() => handleExecute("3")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>

{/* Contacto Mailing */}
                <tr
                  className="hover:bg-[#e3f2fd]/70"
                  data-profile-category={rowProfiles[3]}
                  data-profile-label={profileCategories[rowProfiles[3]].label}
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center">
                      <div
                        className={`w-3 h-10 ${getProfileColor(rowProfiles[3])} rounded-full mr-3`}
                        style={{ width: "6px" }}
                      ></div>
                      <div>
                        <div className="font-medium">Solicitud de entrevista</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="bg-green-50 text-green-600">
                        Alta
                      </Badge>
                      <div className="font-medium">Patricia Flores</div>
                    </div>
                    <div className="font-medium mt-1" style={{ color: "#9333ea" }}>
                      D SIG ONLINE 2025 II LIMA
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Fase: <span className="font-medium">BNC</span>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Categoría: <span className="font-bold text-green-600">Whatsapp Rpta - Mailing</span>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div>
                      <Badge variant="outline" className="bg-purple-50 text-purple-600 inline-flex mr-1">
                        Seguimiento de WhatsApp
                      </Badge>
                      <span className="text-sm text-gray-600">Respuesta a campaña de email, solicita reunión con</span>
                      <div className="text-sm text-gray-600 ml-0">asesor académico</div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="font-medium">15/04/2025</div>
                    <div className="text-xs text-gray-500 mb-3">{formatTimeToAMPM("09:00")}</div>
                    <Button
                      variant="outline"
                      size="xs"
                      className={`rounded-full h-7 px-3 ${getButtonColor(rowProfiles[3])}`}
                      onClick={() => handleExecute("4")}
                    >
                      <PlayCircle className="h-3.5 w-3.5 mr-1" />
                      <span className="text-xs">Ejecutar</span>
                    </Button>
                  </td>
                </tr>
              </tbody>
            </table>

{/* Añadir un espacio adicional al final */}
        <div className="h-16"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/date-time-picker.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Calendar, Clock } from "lucide-react"
import { createPortal } from "react-dom"

// Add this style to the component
const scrollbarStyles = `
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
`

interface DateTimePickerProps {
  id: string
  value: string
  onChange: (value: string) => void
}

export function DateTimePicker({ id, value, onChange }: DateTimePickerProps) {
  const [date, setDate] = useState("")
  const [hours, setHours] = useState("")
  const [minutes, setMinutes] = useState("")
  const [ampm, setAmpm] = useState<"AM" | "PM">("AM")
  const [showTimePicker, setShowTimePicker] = useState(false)
  const timeInputRef = useRef<HTMLInputElement>(null)

// Parse initial value into date and time components
  useEffect(() => {
    if (value) {
      try {
        const dateObj = new Date(value)
        if (!isNaN(dateObj.getTime())) {
          setDate(dateObj.toISOString().split("T")[0])

let hour = dateObj.getHours()
          const isPM = hour >= 12
          hour = hour % 12 || 12 // Convert to 12-hour format

setHours(hour.toString())
          setMinutes(dateObj.getMinutes().toString().padStart(2, "0"))
          setAmpm(isPM ? "PM" : "AM")
        }
      } catch (e) {
        console.error("Error parsing date:", e)
      }
    }
  }, [value])

// Format time for display
  const formattedTime = hours && minutes ? `${hours}:${minutes} ${ampm}` : ""

// Combine date and time when any component changes
  const updateCombinedValue = (dateVal: string, hoursVal: string, minutesVal: string, ampmVal: "AM" | "PM") => {
    if (dateVal && hoursVal && minutesVal) {
      try {
        const hour = Number.parseInt(hoursVal, 10)
        const minute = Number.parseInt(minutesVal, 10)

// Convert to 24-hour format for Date object
        let hour24 = hour
        if (ampmVal === "PM" && hour !== 12) hour24 = hour + 12
        if (ampmVal === "AM" && hour === 12) hour24 = 0

const dateObj = new Date(dateVal)
        dateObj.setHours(hour24, minute)
        onChange(dateObj.toISOString())
      } catch (e) {
        console.error("Error updating combined value:", e)
      }
    }
  }

// Handle date change
  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newDate = e.target.value
    setDate(newDate)
    updateCombinedValue(newDate, hours, minutes, ampm)
  }

// Handle time picker changes
  const handleHourChange = (newHour: string) => {
    setHours(newHour)
    updateCombinedValue(date, newHour, minutes, ampm)
  }

const handleMinuteChange = (newMinute: string) => {
    setMinutes(newMinute)
    updateCombinedValue(date, hours, newMinute, ampm)
  }

const handleAmPmChange = (newAmPm: "AM" | "PM") => {
    setAmpm(newAmPm)
    updateCombinedValue(date, hours, minutes, newAmPm)
  }

// Handle time input click
  const handleTimeInputClick = () => {
    setShowTimePicker(!showTimePicker)
  }

// Close time picker when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement
      if (!target.closest(".time-picker-container") && !target.closest(".time-input")) {
        setShowTimePicker(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

// Generate hour options (1-12)
  const hourOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString())

// Generate minute options (00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55)
  const minuteOptions = Array.from({ length: 12 }, (_, i) => (i * 5).toString().padStart(2, "0"))

return (
    <>
      <style jsx>{scrollbarStyles}</style>
      <div className="flex gap-2">
        <div className="relative flex-1">
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Calendar className="h-4 w-4 text-gray-500" />
          </div>
          <input
            type="date"
            id={`${id}-date`}
            className="w-full pl-10 pr-3 py-2 border rounded-md text-sm"
            value={date}
            onChange={handleDateChange}
          />
        </div>
        <div className="relative flex-1">
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Clock className="h-4 w-4 text-gray-500" />
          </div>
          <input
            type="text"
            id={`${id}-time`}
            ref={timeInputRef}
            className="w-full pl-10 pr-3 py-2 border rounded-md text-sm time-input"
            value={formattedTime}
            placeholder="--:-- --"
            readOnly
            onClick={handleTimeInputClick}
          />

{showTimePicker &&
            typeof window !== "undefined" &&
            createPortal(
              <div
                className="fixed z-50 bg-white border rounded-md shadow-lg time-picker-container"
                style={{
                  position: "fixed",
                  top: timeInputRef.current ? timeInputRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
                  left: timeInputRef.current ? timeInputRef.current.getBoundingClientRect().left + window.scrollX : 0,
                  width: "220px",
                  fontSize: "0.75rem",
                }}
              >
                <div className="p-1">
                  <div className="flex text-center mb-1">
                    <div className="flex-1 text-xs font-medium text-gray-500">Hora</div>
                    <div className="flex-1 text-xs font-medium text-gray-500">Minuto</div>
                    <div className="flex-1 text-xs font-medium text-gray-500">AM/PM</div>
                  </div>

<div className="flex">
                    {/* Hour selector */}
                    <div className="flex-1 border-r">
                      <div className="h-24 overflow-y-auto custom-scrollbar">
                        {hourOptions.map((hour) => (
                          <div
                            key={hour}
                            className={`py-0.5 px-1 text-center cursor-pointer hover:bg-blue-100 text-xs ${
                              hours === hour ? "bg-blue-500 text-white" : ""
                            }`}
                            onClick={() => handleHourChange(hour)}
                          >
                            {hour}
                          </div>
                        ))}
                      </div>
                    </div>

{/* Minute selector */}
                    <div className="flex-1 border-r">
                      <div className="h-24 overflow-y-auto custom-scrollbar">
                        {minuteOptions.map((minute, index) => (
                          <div
                            key={index}
                            className={`py-0.5 px-1 text-center cursor-pointer hover:bg-blue-100 text-xs ${
                              minutes === minute ? "bg-blue-500 text-white" : ""
                            }`}
                            onClick={() => handleMinuteChange(minute)}
                          >
                            {minute}
                          </div>
                        ))}
                      </div>
                    </div>

{/* AM/PM selector */}
                    <div className="flex-1">
                      <div
                        className={`py-1 text-center cursor-pointer hover:bg-blue-100 text-xs ${
                          ampm === "AM" ? "bg-blue-500 text-white" : ""
                        }`}
                        onClick={() => handleAmPmChange("AM")}
                      >
                        AM
                      </div>
                      <div
                        className={`py-1 text-center cursor-pointer hover:bg-blue-100 text-xs ${
                          ampm === "PM" ? "bg-blue-500 text-white" : ""
                        }`}
                        onClick={() => handleAmPmChange("PM")}
                      >
                        PM
                      </div>
                    </div>
                  </div>

<button
                    className="w-full mt-1 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 text-xs"
                    onClick={() => setShowTimePicker(false)}
                  >
                    Aceptar
                  </button>
                </div>
              </div>,
              document.body,
            )}
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/agenda-info-bar.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Info, Phone } from "lucide-react"
import { WavixToggle } from "./wavix-toggle"

export function AgendaInfoBar() {
  return (
    <div className="px-6 md:px-8">
      {/* Add a container div with max-width to match the table */}
      <div className="max-w-[calc(100%-2rem)] mx-auto">
        {/* Wavix Toggle - Centered and purple */}
        <div className="flex justify-center mb-4 mt-2">
          <WavixToggle />
        </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-6 py-6 md:py-8">
          <Card className="shadow-md">
            <CardContent className="p-6">
              <div className="flex flex-col">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600 text-sm flex items-center">
                    Actividades Totales
                    <div className="relative group">
                      <Info className="h-4 w-4 ml-1 text-gray-400 cursor-help" />
                      <div className="absolute z-10 w-72 p-2 bg-black text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none left-0 top-6">
                        Considera: Actividades con Llamada Real Asociada + Actividades Reportadas como Respuestas
                        Telefonicas sin Llamada Real Asociada + Actividades Reportadas por Otro Medio
                      </div>
                    </div>
                  </span>
                  <Phone className="h-5 w-5 text-purple-600" />
                </div>
                <div className="mt-3">
                  <span className="text-3xl font-bold">21</span>
                  <div className="flex items-center mt-2">
                    <span className="text-green-600 text-sm">+15.2%</span>
                    <span className="text-gray-500 text-xs ml-1">respecto al mes anterior</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card className="shadow-md">
            <CardContent className="p-6">
              <div className="flex flex-col">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600 text-sm flex items-center">
                    Actividades Ejecutadas
                    <div className="relative group">
                      <Info className="h-4 w-4 ml-1 text-gray-400 cursor-help" />
                      <div className="absolute z-10 w-72 p-2 bg-black text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none left-0 top-6">
                        Considera: Actividades con Llamada Real Asociada + Actividades Reportadas como Respuestas
                        Telefonicas sin Llamada Real Asociada + Actividades Reportadas por Otro Medio
                      </div>
                    </div>
                  </span>
                  <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="text-blue-500"
                  >
                    <polyline points="9 11 12 14 22 4"></polyline>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                  </svg>
                </div>
                <div className="mt-3">
                  <span className="text-3xl font-bold">5</span>
                  <div className="flex items-center mt-2">
                    <span className="text-green-600 text-sm">+8.3%</span>
                    <span className="text-gray-500 text-xs ml-1">respecto al mes anterior</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card className="shadow-md">
            <CardContent className="p-6">
              <div className="flex flex-col">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600 text-sm flex items-center">
                    ITs Generados
                    <div className="relative group">
                      <Info className="h-4 w-4 ml-1 text-gray-400 cursor-help" />
                      <div className="absolute z-10 w-72 p-2 bg-black text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none left-0 top-6">
                        Considera: Actividades con Llamada Real Asociada + Actividades Reportadas como Respuestas
                        Telefonicas sin Llamada Real Asociada + Actividades Reportadas por Otro Medio
                      </div>
                    </div>
                  </span>
                  <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="text-green-500"
                  >
                    <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>
                </div>
                <div className="mt-3">
                  <span className="text-3xl font-bold">1</span>
                  <div className="flex items-center mt-2">
                    <span className="text-green-600 text-sm">+5.0%</span>
                    <span className="text-gray-500 text-xs ml-1">respecto al mes anterior</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card className="shadow-md">
            <CardContent className="p-6">
              <div className="flex flex-col">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600 text-sm flex items-center">
                    IPs Generados
                    <div className="relative group">
                      <Info className="h-4 w-4 ml-1 text-gray-400 cursor-help" />
                      <div className="absolute z-10 w-72 p-2 bg-black text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none right-0 top-6 transform translate-x-[-90%]">
                        Considera: Actividades con Llamada Real Asociada + Actividades Reportadas como Respuestas
                        Telefonicas sin Llamada Real Asociada + Actividades Reportadas por Otro Medio
                      </div>
                    </div>
                  </span>
                  <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="text-amber-500"
                  >
                    <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>
                </div>
                <div className="mt-3">
                  <span className="text-3xl font-bold">0</span>
                  <div className="flex items-center mt-2">
                    <span className="text-green-600 text-sm">+0.0%</span>
                    <span className="text-gray-500 text-xs ml-1">respecto al mes anterior</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Folder,
  Home,
  Users,
  Settings,
  BookOpen,
  ChevronDown,
  ChevronRight,
  Award,
  MessageSquare,
  Target,
  CalendarDays,
  CalendarRange,
  HeadsetIcon as HeadsetHelp,
} from "lucide-react"
import Link from "next/link"
import { useRouter, usePathname, useSearchParams } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

export function AppSidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const searchParams = useSearchParams()
  const [comercialExpanded, setComercialExpanded] = useState(false)
  const [gestionComercialExpanded, setGestionComercialExpanded] = useState(false)
  const [controlOperativoExpanded, setControlOperativoExpanded] = useState(false)
  const [analiticaVentasExpanded, setAnaliticaVentasExpanded] = useState(false)
  const [gestionDesempenoExpanded, setGestionDesempenoExpanded] = useState(false)
  const [configGestionDesempenoExpanded, setConfigGestionDesempenoExpanded] = useState(false)
  const [atencionClienteExpanded, setAtencionClienteExpanded] = useState(false)
  const [gestionAtencionClienteExpanded, setGestionAtencionClienteExpanded] = useState(false)
  const [certificadosBeneficiosExpanded, setCertificadosBeneficiosExpanded] = useState(false)
  const [collapsed, setCollapsed] = useState(false)
  const [hidden, setHidden] = useState(false) // Nuevo estado para controlar la visibilidad en móviles

// Verificar si estamos mostrando los parámetros generales
  const showingParametrosGenerales = searchParams.get("view") === "parametros-generales"

// Guardar el estado del menú en localStorage
  useEffect(() => {
    // Cargar el estado inicial desde localStorage
    const savedCollapsed = localStorage.getItem("sidebarCollapsed")
    if (savedCollapsed) {
      setCollapsed(savedCollapsed === "true")
    }

const savedHidden = localStorage.getItem("sidebarHidden")
    if (savedHidden) {
      setHidden(savedHidden === "true")
    }

// Contraer automáticamente el menú cuando se navega desde el inicio a otra sección
    const isHomePage = pathname === "/"
    const wasHomePage = localStorage.getItem("wasHomePage") === "true"

// Si estábamos en la página de inicio y ahora estamos en otra sección
    if (wasHomePage && !isHomePage && !showingParametrosGenerales) {
      setCollapsed(true)
      localStorage.setItem("sidebarCollapsed", "true")
    }

// Guardar el estado actual para la próxima navegación
    localStorage.setItem("wasHomePage", String(isHomePage))

// Expandir automáticamente los menús según la ruta actual
    if (showingParametrosGenerales || pathname.startsWith("/gestion-desempeno")) {
      setGestionDesempenoExpanded(true)

// Also expand the config submenu if showing parameters
      if (showingParametrosGenerales) {
        setConfigGestionDesempenoExpanded(true)
      }
    }

// Expandir automáticamente el menú comercial cuando estamos en la sección de agenda
    if (pathname.includes("/gestion-comercial/agenda")) {
      setComercialExpanded(true)
      setGestionComercialExpanded(true)
    }

// Escuchar el evento personalizado para toggle desde el TopBar
    const handleToggleSidebar = () => {
      // En dispositivos móviles, alternamos la visibilidad
      if (window.innerWidth < 1024) {
        setHidden(!hidden)
        localStorage.setItem("sidebarHidden", String(!hidden))
      } else {
        // En escritorio, alternamos el colapso
        setCollapsed(!collapsed)
        localStorage.setItem("sidebarCollapsed", String(!collapsed))
      }
    }

document.addEventListener("toggle-sidebar", handleToggleSidebar)

// Limpiar el event listener cuando el componente se desmonte
    return () => {
      document.removeEventListener("toggle-sidebar", handleToggleSidebar)
    }
  }, [pathname, showingParametrosGenerales, collapsed, hidden])

const toggleSidebar = () => {
    const newCollapsed = !collapsed
    setCollapsed(newCollapsed)
    localStorage.setItem("sidebarCollapsed", String(newCollapsed))
  }

const isActive = (path: string) => {
    // Para la opción de Configuración de parámetros generales
    if (path === "/?view=parametros-generales" && showingParametrosGenerales) {
      return true
    }

// Para otras rutas
    return pathname === path
  }

const isComercialActive = () => {
    return pathname === "/comercial"
  }

const isGestionComercialActive = () => {
    return pathname === "/gestion-comercial" || pathname.startsWith("/gestion-comercial/")
  }

const isControlOperativoActive = () => {
    return pathname === "/control-operativo"
  }

const isAnaliticaVentasActive = () => {
    return pathname === "/analitica-ventas"
  }

const isAtencionClienteActive = () => {
    return pathname.startsWith("/atencion-cliente")
  }

// Función para manejar el clic en "Configuración Gestión del Desempeño"
  const handleConfigGestionDesempenoClick = () => {
    // Si ya estamos mostrando los parámetros generales, volvemos al dashboard
    if (showingParametrosGenerales) {
      router.push("/")
    } else {
      // Si no, mostramos los parámetros generales
      router.push("/?view=parametros-generales")
    }
  }

// Si está oculto en móviles, no renderizamos nada
  if (hidden && typeof window !== "undefined" && window.innerWidth < 1024) {
    return null
  }

return (
    <div
      className={cn(
        "border-r border-gray-200 bg-white text-gray-700 transition-all duration-300 ease-in-out",
        collapsed ? "w-[70px]" : "w-[280px]",
        "lg:block", // Siempre visible en escritorio
        hidden ? "hidden" : "block", // Controla la visibilidad en móviles
        "sticky top-0 h-screen overflow-y-auto", // Añadimos sticky y altura completa de la pantalla
      )}
    >
      <div className="flex h-full max-h-screen flex-col gap-2">
        <div className="flex-1 overflow-auto py-2">
          <nav className={cn("grid items-start px-4 text-sm font-medium", collapsed && "px-2")}>
            <Link
              href="/"
              className={`flex w-full items-center ${collapsed ? "justify-center" : "gap-3"} rounded-lg px-3 py-2 transition-all group ${
                isActive("/") ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
              }`}
              title="Inicio"
            >
              <Home className="h-4 w-4" />
              {!collapsed && <span>Inicio</span>}
            </Link>

{!collapsed && (
              <div className="mt-6">
                <h4 className="mb-2 px-4 text-xs font-semibold uppercase tracking-wider text-gray-500">MÓDULOS</h4>
              </div>
            )}
            {collapsed && <div className="my-6 border-t border-gray-200"></div>}

<div className="grid gap-1">
              {/* Módulo Comercial con submenús */}
              <div>
                <button
                  onClick={() => setComercialExpanded(!comercialExpanded)}
                  className={`flex w-full items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                    isComercialActive() ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                  }`}
                  title="Comercial"
                >
                  <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                    <Folder className="h-4 w-4" />
                    {!collapsed && <span>Comercial</span>}
                  </div>
                  {!collapsed &&
                    (comercialExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />)}
                </button>

{comercialExpanded && !collapsed && (
                  <div className="ml-4 mt-1 grid gap-1 border-l border-gray-200 pl-2">
                    {/* Gestión Comercial con sus submenús */}
                    <div>
                      <button
                        onClick={() => setGestionComercialExpanded(!gestionComercialExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          isGestionComercialActive() ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-4 w-4 text-[#7b3ff7]" />
                          <span>Gestión Comercial</span>
                        </div>
                        {gestionComercialExpanded ? (
                          <ChevronDown className="h-4 w-4" />
                        ) : (
                          <ChevronRight className="h-4 w-4" />
                        )}
                      </button>

{gestionComercialExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          <Link
                            href="/gestion-comercial/chats"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/chats")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <MessageSquare className="h-4 w-4 text-amber-400" />
                              <span>Chats</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              3
                            </Badge>
                          </Link>
                          <Link
                            href="/gestion-comercial/creacion-oportunidades"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/creacion-oportunidades")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <Target className="h-4 w-4 flex-shrink-0 text-amber-400" />
                              <span>Creación de Oportunidades</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              5
                            </Badge>
                          </Link>
                          <Link
                            href="/gestion-comercial/agenda"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/agenda")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <CalendarDays className="h-4 w-4 text-amber-400" />
                              <span>Agenda</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              8
                            </Badge>
                          </Link>
                          <Link
                            href="/gestion-comercial/agenda-v2"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/agenda-v2")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <CalendarRange className="h-4 w-4 text-amber-400" />
                              <span>Agenda V2</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              4
                            </Badge>
                          </Link>
                        </div>
                      )}
                    </div>

{/* Control Operativo con sus submenús */}
                    <div>
                      <button
                        onClick={() => setControlOperativoExpanded(!controlOperativoExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          isControlOperativoActive() ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-4 w-4 text-[#7b3ff7]" />
                          <span>Control Operativo</span>
                        </div>
                        {controlOperativoExpanded ? (
                          <ChevronDown className="h-4 w-4" />
                        ) : (
                          <ChevronRight className="h-4 w-4" />
                        )}
                      </button>

{controlOperativoExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          <Link
                            href="/control-operativo/cambio-fase"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/cambio-fase")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-green-400">(R)</span>
                              <span>Cambio de Fase</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              6
                            </Badge>
                          </Link>
                          <Link
                            href="/control-operativo/contactabilidad"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/contactabilidad")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-green-400">(R)</span>
                              <span>Contactabilidad</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              2
                            </Badge>
                          </Link>
                          <Link
                            href="/control-operativo/llamadas-por-dia"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/llamadas-por-dia")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-green-400">(R)</span>
                              <span>Llamadas por día</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              7
                            </Badge>
                          </Link>
                          <Link
                            href="/control-operativo/seguimiento-oportunidades"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/seguimiento-oportunidades")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-green-400">(R)</span>
                              <span>Seguimiento de Oportunidades</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              9
                            </Badge>
                          </Link>
                        </div>
                      )}
                    </div>

{/* Analítica de Ventas con sus submenús */}
                    <div>
                      <button
                        onClick={() => setAnaliticaVentasExpanded(!analiticaVentasExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          isAnaliticaVentasActive() ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-4 w-4 text-[#7b3ff7]" />
                          <span>Analítica de Ventas</span>
                        </div>
                        {analiticaVentasExpanded ? (
                          <ChevronDown className="h-4 w-4" />
                        ) : (
                          <ChevronRight className="h-4 w-4" />
                        )}
                      </button>

{analiticaVentasExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          <Link
                            href="/analitica-ventas/tasas-conversion"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/tasas-conversion")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-green-400">(R)</span>
                              <span>Tasas de conversión consolidadas</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              3
                            </Badge>
                          </Link>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

{/* Módulo Gestión Del Desempeño */}
              <div>
                <button
                  onClick={() => setGestionDesempenoExpanded(!gestionDesempenoExpanded)}
                  className={`flex w-full items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                    pathname === "/gestion-desempeno"
                      ? "bg-[#f0ebff] text-[#7b3ff7]"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                  title="Gestión Del Desempeño"
                >
                  <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                    <Award className="h-4 w-4" />
                    {!collapsed && <span>Gestión Del Desempeño</span>}
                  </div>
                  {!collapsed &&
                    (gestionDesempenoExpanded ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    ))}
                </button>

{gestionDesempenoExpanded && !collapsed && (
                  <div className="ml-4 mt-1 grid gap-1 border-l border-gray-200 pl-2">
                    {/* Configuración Gestión del Desempeño - Level 2 */}
                    <div>
                      <button
                        onClick={() => setConfigGestionDesempenoExpanded(!configGestionDesempenoExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          pathname === "/gestion-desempeno/configuracion"
                            ? "bg-[#f0ebff] text-[#7b3ff7]"
                            : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-5 w-5 text-[#7b3ff7]" />
                          <span className="relative text-left after:absolute after:w-0 after:h-0.5 after:bg-[#7b3ff7] after:left-0 after:-bottom-0.5 after:transition-all after:duration-300 group-hover:after:w-full">
                            Configuración Gestión del Desempeño
                          </span>
                        </div>
                        {configGestionDesempenoExpanded ? (
                          <ChevronDown className="h-5 w-5" />
                        ) : (
                          <ChevronRight className="h-5 w-5" />
                        )}
                      </button>

{configGestionDesempenoExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          {/* Configuración de parámetros generales - Level 3 */}
                          <Link
                            href="/?view=parametros-generales"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              showingParametrosGenerales
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de parámetros generales</span>
                            </div>
                          </Link>

{/* Configuración de OKRs/KPIs - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/okrs-kpis"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname.startsWith("/gestion-desempeno/configuracion/okrs-kpis")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de OKRs/KPIs</span>
                            </div>
                          </Link>

{/* Configuración de Evaluaciones - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/evaluaciones"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname === "/gestion-desempeno/configuracion/evaluaciones"
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de Evaluaciones</span>
                            </div>
                          </Link>

{/* Configuración de Historial de Competencias - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/historial-competencias"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname === "/gestion-desempeno/configuracion/historial-competencias"
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de Historial de Competencias</span>
                            </div>
                          </Link>

{/* Configuración de Gamificación - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/gamificacion"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname === "/gestion-desempeno/configuracion/gamificacion"
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de Gamificación</span>
                            </div>
                          </Link>

{/* Configuración de Notificaciones - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/notificaciones"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname === "/gestion-desempeno/configuracion/notificaciones"
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de Notificaciones</span>
                            </div>
                          </Link>

{/* Configuración de Reportes - Level 3 */}
                          <Link
                            href="/gestion-desempeno/configuracion/reportes"
                            className={`flex items-center rounded-lg px-3 py-2 transition-all group ${
                              pathname === "/gestion-desempeno/configuracion/reportes"
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <span className="text-purple-400">(C)</span>
                              <span>Configuración de Reportes</span>
                            </div>
                          </Link>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

{/* Módulo Atención al Cliente */}
              <div>
                <button
                  onClick={() => setAtencionClienteExpanded(!atencionClienteExpanded)}
                  className={`flex w-full items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                    isAtencionClienteActive() ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                  }`}
                  title="Atención al Cliente"
                >
                  <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                    <HeadsetHelp className="h-4 w-4" />
                    {!collapsed && <span>Atención al Cliente</span>}
                  </div>
                  {!collapsed &&
                    (atencionClienteExpanded ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    ))}
                </button>

{atencionClienteExpanded && !collapsed && (
                  <div className="ml-4 mt-1 grid gap-1 border-l border-gray-200 pl-2">
                    {/* Gestión de atención al cliente - Level 2 */}
                    <div>
                      <button
                        onClick={() => setGestionAtencionClienteExpanded(!gestionAtencionClienteExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          pathname.startsWith("/atencion-cliente/gestion")
                            ? "bg-[#f0ebff] text-[#7b3ff7]"
                            : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-4 w-4 text-[#7b3ff7]" />
                          <span className="text-left">Gestión de atención al cliente</span>
                        </div>
                        {gestionAtencionClienteExpanded ? (
                          <ChevronDown className="h-4 w-4" />
                        ) : (
                          <ChevronRight className="h-4 w-4" />
                        )}
                      </button>

{gestionAtencionClienteExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          <Link
                            href="/atencion-cliente/gestion/agenda"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/atencion-cliente/gestion/agenda") && !pathname.includes("/agenda-v2")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <CalendarDays className="h-5 w-5 text-amber-400" />
                              <span>Agenda de Atención al Cliente</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              5
                            </Badge>
                          </Link>
                          <Link
                            href="/atencion-cliente/gestion/agenda-v2"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/atencion-cliente/gestion/agenda-v2")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <CalendarRange className="h-5 w-5 text-amber-400" />
                              <span>Agenda V2</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              3
                            </Badge>
                          </Link>
                        </div>
                      )}
                    </div>

{/* Certificados y beneficios - Level 2 */}
                    <div>
                      <button
                        onClick={() => setCertificadosBeneficiosExpanded(!certificadosBeneficiosExpanded)}
                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                          pathname.startsWith("/atencion-cliente/certificados")
                            ? "bg-[#f0ebff] text-[#7b3ff7]"
                            : "text-gray-700 hover:bg-gray-100"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Folder className="h-4 w-4 text-[#7b3ff7]" />
                          <span className="text-left">Certificados y beneficios</span>
                        </div>
                        {certificadosBeneficiosExpanded ? (
                          <ChevronDown className="h-4 w-4" />
                        ) : (
                          <ChevronRight className="h-4 w-4" />
                        )}
                      </button>

{certificadosBeneficiosExpanded && (
                        <div className="ml-4 mt-1 grid gap-1 pl-2">
                          <Link
                            href="/atencion-cliente/certificados/entregar-beneficios"
                            className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all group ${
                              pathname.includes("/atencion-cliente/certificados/entregar-beneficios")
                                ? "bg-[#f0ebff] text-[#7b3ff7]"
                                : "text-gray-700 hover:bg-gray-100"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <Award className="h-5 w-5 text-amber-400" />
                              <span>Entregar beneficios a alumnos</span>
                            </div>
                            <Badge variant="outline" className="bg-gray-100 text-gray-700">
                              7
                            </Badge>
                          </Link>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

<Link
                href="/clientes"
                className={`flex items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                  isActive("/clientes") ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                }`}
                title="Clientes"
              >
                <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                  <Users className="h-4 w-4" />
                  {!collapsed && <span>Clientes</span>}
                </div>
                {!collapsed && (
                  <Badge variant="outline" className="bg-gray-100 text-gray-700">
                    12
                  </Badge>
                )}
              </Link>
              <Link
                href="/cursos"
                className={`flex items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                  isActive("/cursos") ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                }`}
                title="Cursos"
              >
                <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                  <BookOpen className="h-4 w-4" />
                  {!collapsed && <span>Cursos</span>}
                </div>
                {!collapsed && (
                  <Badge variant="outline" className="bg-gray-100 text-gray-700">
                    8
                  </Badge>
                )}
              </Link>
              <Link
                href="/configuracion"
                className={`flex items-center ${collapsed ? "justify-center" : "justify-between"} rounded-lg px-3 py-2 transition-all group ${
                  isActive("/configuracion") ? "bg-[#f0ebff] text-[#7b3ff7]" : "text-gray-700 hover:bg-gray-100"
                }`}
                title="Configuración"
              >
                <div className={`flex items-center ${collapsed ? "" : "gap-3"}`}>
                  <Settings className="h-4 w-4" />
                  {!collapsed && <span>Configuración</span>}
                </div>
                {!collapsed && (
                  <Badge variant="outline" className="bg-gray-100 text-gray-700">
                    2
                  </Badge>
                )}
              </Link>
            </div>
          </nav>
        </div>
        <div className="mt-auto p-4">
          {!collapsed ? (
            <div className="rounded-lg bg-gray-100 p-3 text-xs text-gray-700">
              <p className="font-medium">BSG Institute</p>
              <p className="mt-1">Versión 1.0.0</p>
            </div>
          ) : (
            <div className="flex justify-center">
              <span className="text-xs text-gray-500">v1.0</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/audio/sample-call-recording.mp3" query="sample phone call recording for CRM system" isMerged="true"
[V0_FILE]plaintext:file="public/audio/call-recording-sample.mp3" query="short phone call recording sample" isMerged="true"
[V0_FILE]plaintext:file="public/audio/quiz-countdown-337785.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/quiz-countdown-337785-00UI7gVWSP4cx3vWpmH5WsSTxTUmmI.mp3" isMerged="true"
[V0_FILE]typescriptreact:file="components/audio-player-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Portal } from "./portal"

interface AudioPlayerModalProps {
  isOpen: boolean
  onClose: () => void
  audioUrl: string
  callInfo: {
    fecha: string
    hora: string
    duracion: string
    contacto: string
  }
}

export function AudioPlayerModal({ isOpen, onClose, audioUrl, callInfo }: AudioPlayerModalProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(30) // Duración fija para demo
  const [volume, setVolume] = useState(1)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false) // Cambiar a false por defecto
  const audioRef = useRef<HTMLAudioElement>(null)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

// Simular reproductor funcional
  useEffect(() => {
    if (isOpen) {
      // Reset state when modal opens
      setCurrentTime(0)
      setIsPlaying(false)
      setError(null)
      setLoading(false) // No mostrar loading
      setDuration(30) // Duración simulada
    }
  }, [isOpen])

const togglePlayPause = () => {
    if (isPlaying) {
      // Pausar
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
        intervalRef.current = null
      }
      setIsPlaying(false)
    } else {
      // Reproducir
      setIsPlaying(true)
      intervalRef.current = setInterval(() => {
        setCurrentTime((prev) => {
          if (prev >= duration) {
            // Audio terminado
            if (intervalRef.current) {
              clearInterval(intervalRef.current)
              intervalRef.current = null
            }
            setIsPlaying(false)
            return duration
          }
          return prev + 0.1
        })
      }, 100)
    }
  }

const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTime = Number.parseFloat(e.target.value)
    setCurrentTime(newTime)
  }

const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = Number.parseFloat(e.target.value)
    setVolume(newVolume)
  }

const formatTime = (time: number) => {
    if (isNaN(time)) return "0:00"
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)
    return `${minutes}:${seconds.toString().padStart(2, "0")}`
  }

// Cleanup interval on unmount
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [])

if (!isOpen) return null

return (
    <Portal>
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-gray-200">
            <div className="flex items-center gap-2">
              <div className="bg-blue-100 p-2 rounded-full">
                <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="text-blue-600"
                >
                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
                  <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
                  <line x1="12" x2="12" y1="19" y2="22" />
                  <line x1="8" x2="16" y1="22" y2="22" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">Grabación de Llamada</h3>
                <p className="text-sm text-gray-500">{callInfo.contacto}</p>
              </div>
            </div>
            <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M18 6 6 18" />
                <path d="M6 6l12 12" />
              </svg>
            </button>
          </div>

{/* Call Info */}
          <div className="p-4 bg-gray-50">
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span className="text-gray-500">Fecha:</span>
                <span className="ml-2 font-medium">{callInfo.fecha}</span>
              </div>
              <div>
                <span className="text-gray-500">Hora:</span>
                <span className="ml-2 font-medium">{callInfo.hora}</span>
              </div>
              <div>
                <span className="text-gray-500">Duración:</span>
                <span className="ml-2 font-medium">{callInfo.duracion}</span>
              </div>
              <div>
                <span className="text-gray-500">Estado:</span>
                <span className="ml-2 font-medium text-green-600">Completada</span>
              </div>
            </div>
          </div>

{/* Audio Player */}
          <div className="p-6">
            {/* Nota informativa */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
              <div className="flex items-center gap-2 text-blue-700 text-sm">
                <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"
                >
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 16v-4" />
                  <path d="M12 8h.01" />
                </svg>
                <span>Reproductor funcional - En producción se conectará con tu base de datos</span>
              </div>
            </div>

{/* Loading State */}
            {loading && (
              <div className="flex justify-center items-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <span className="ml-3 text-gray-600">Cargando grabación...</span>
              </div>
            )}

{/* Error State */}
            {error && (
              <div className="text-center py-8 text-red-500">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="mx-auto mb-2"
                >
                  <circle cx="12" cy="12" r="10" />
                  <line x1="12" y1="8" x2="12" y2="12" />
                  <line x1="12" y1="16" x2="12.01" y2="16" />
                </svg>
                <p className="font-medium">{error}</p>
                <p className="text-sm text-gray-500 mt-1">La grabación no está disponible en este momento.</p>
              </div>
            )}

{/* Audio Player Controls */}
            {!loading && !error && (
              <>
                {/* Play/Pause Button */}
                <div className="flex items-center justify-center mb-6">
                  <button
                    onClick={togglePlayPause}
                    className="bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 transition-colors shadow-lg"
                  >
                    {isPlaying ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <rect x="6" y="4" width="4" height="16" />
                        <rect x="14" y="4" width="4" height="16" />
                      </svg>
                    ) : (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <polygon points="5,3 19,12 5,21" />
                      </svg>
                    )}
                  </button>
                </div>

{/* Progress Bar */}
                <div className="mb-6">
                  <input
                    type="range"
                    min="0"
                    max={duration}
                    value={currentTime}
                    onChange={handleSeek}
                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-2">
                    <span>{formatTime(currentTime)}</span>
                    <span>{formatTime(duration)}</span>
                  </div>
                </div>

{/* Volume Control */}
                <div className="flex items-center gap-3">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-gray-500"
                  >
                    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" />
                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
                  </svg>
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    value={volume}
                    onChange={handleVolumeChange}
                    className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                  />
                  <span className="text-xs text-gray-500 w-8">{Math.round(volume * 100)}%</span>
                </div>

{/* Status indicator */}
                {isPlaying && (
                  <div className="mt-4 text-center">
                    <div className="inline-flex items-center gap-2 text-green-600 text-sm">
                      <div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
                      <span>Reproduciendo...</span>
                    </div>
                  </div>
                )}

{/* Additional Controls */}
                <div className="mt-6 flex justify-center gap-4">
                  <button
                    onClick={() => setCurrentTime(Math.max(0, currentTime - 10))}
                    className="flex items-center gap-1 px-3 py-1 text-sm text-gray-600 hover:text-gray-800 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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                      <path d="M3 3v5h5" />
                    </svg>
                    -10s
                  </button>
                  <button
                    onClick={() => setCurrentTime(Math.min(duration, currentTime + 10))}
                    className="flex items-center gap-1 px-3 py-1 text-sm text-gray-600 hover:text-gray-800 transition-colors"
                  >
                    +10s
                    <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 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
                      <path d="M21 3v5h-5" />
                    </svg>
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </div>

interface ChatWindowProps {
  user: UserType
  messages: Message[]
  newMessage: string
  setNewMessage: (message: string) => void
  handleSendMessage: (e: React.FormEvent) => void
}

export default function ChatWindow({ user, messages, newMessage, setNewMessage, handleSendMessage }: ChatWindowProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const router = useRouter()
  const [activeTab, setActiveTab] = useState<"chat" | "crm">("chat")
  const [isReporteModalOpen, setIsReporteModalOpen] = useState(false)

// Scroll to bottom when messages change
  useEffect(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [messages])

return (
    <div className="flex-1 flex flex-col h-full">
      {/* Custom tabs */}
      <div className="flex border-b mx-2 mt-2">
        <button
          className={cn(
            "flex-1 py-2 text-xs font-medium text-center border-b-2",
            activeTab === "chat" ? "border-primary text-primary" : "border-transparent text-muted-foreground",
          )}
          onClick={() => setActiveTab("chat")}
        >
          Chat
        </button>
        <button
          className={cn(
            "flex-1 py-2 text-xs font-medium text-center border-b-2",
            activeTab === "crm" ? "border-primary text-primary" : "border-transparent text-muted-foreground",
          )}
          onClick={() => setActiveTab("crm")}
        >
          Ficha CRM
        </button>
      </div>

{/* Chat content */}
      {activeTab === "chat" && (
        <>
          <ScrollArea className="flex-1 p-3">
            <div className="space-y-4">
              {messages.map((message) => (
                <div key={message.id} className={cn("flex", message.isUser ? "justify-start" : "justify-end")}>
                  <div
                    className={cn(
                      "max-w-[80%] rounded-lg px-3 py-2 text-sm",
                      message.isUser ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground",
                    )}
                  >
                    <p>{message.content}</p>
                    <p className="text-xs opacity-70 text-right mt-1">{message.timestamp}</p>
                  </div>
                </div>
              ))}
              <div ref={messagesEndRef} />
            </div>
          </ScrollArea>
          <form onSubmit={handleSendMessage} className="p-3 border-t bg-background sticky bottom-0 z-10">
            <div className="flex space-x-2">
              <Input
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                placeholder="Escribe un mensaje..."
                className="flex-1"
              />
              <Button type="submit" size="icon">
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </form>
        </>
      )}

{/* CRM content with improved styling */}
      {activeTab === "crm" && (
        <div className="p-4 bg-slate-50">
          {/* Client header with icon */}
          <div className="flex items-center gap-2 mb-4">
            <div className="bg-[#6419e6] rounded-full p-1.5">
              <CheckCircle className="h-5 w-5 text-white" />
            </div>
            <h2 className="text-lg font-bold text-[#6419e6]">{user.name}</h2>
          </div>

{/* Course information with icon */}
          <div className="flex gap-2 mb-2">
            <FileText className="h-5 w-5 text-[#6419e6] flex-shrink-0 mt-0.5" />
            <p className="text-sm text-slate-700">CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE</p>
          </div>

{/* Modality information with icon */}
          <div className="flex gap-2 mb-4">
            <Calendar className="h-5 w-5 text-[#6419e6] flex-shrink-0 mt-0.5" />
            <p className="text-sm text-slate-700">TI AWS ARCHITECT ASSOCIATE ONLINE 2024 II LIMA</p>
          </div>

{/* Location with flag and phase badge side by side */}
          <div className="flex items-center gap-3 mb-6">
            <div className="flex items-center border border-gray-300 rounded-full px-3 py-1">
              <div className="w-5 h-5 mr-2 rounded-full overflow-hidden flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="w-full h-full">
                  <path fill="#F0F0F0" d="M0 0h512v512H0z" />
                  <path fill="#D80027" d="M0 0h170.7v512H0z" />
                  <path fill="#D80027" d="M341.3 0H512v512H341.3z" />
                </svg>
              </div>
              <p className="text-sm text-slate-700">Perú - Arequipa</p>
            </div>

<div className="bg-[#6419e6] text-white text-xs font-medium px-3 py-1 rounded-full flex items-center gap-1">
              <CheckCircle className="h-3.5 w-3.5" />
              <span>Fase Actual: IP</span>
            </div>
          </div>

{/* Action buttons */}
          <Button
            onClick={() => router.push(`/gestion-comercial/agenda/contacto-entrante/${user.id}`)}
            className="w-full bg-green-600 hover:bg-green-700 mb-3"
          >
            Ir a ficha
          </Button>

<Button
            onClick={() => setIsReporteModalOpen(true)}
            className="w-full bg-orange-500 hover:bg-orange-600 flex items-center justify-center gap-2"
          >
            <FileText className="h-4 w-4" />
            Reporte de incidencia
          </Button>
        </div>
      )}

{/* Modal de reporte de incidencia */}
      <ReporteIncidenciaModal isOpen={isReporteModalOpen} onClose={() => setIsReporteModalOpen(false)} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/fase3-content.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Shield,
  Target,
  BookOpen,
  Award,
  Layout,
  TrendingUp,
  CheckSquare,
  AlertTriangle,
  Zap,
  DollarSign,
} from "lucide-react"
import Fase3ContentRedesigned from "./fase3-content-redesigned"

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 <Fase3ContentRedesigned />
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@heroicons/react": "2.2.0",
    "framer-motion": "12.23.15"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/proceso-pago.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { CreditCard, FileText, CheckCircle2 } from "lucide-react"

export default function ProcesoPagoTab() {
  const [selectedCountry] = useState<string>("peru")
  const [selectedSaleType, setSaleType] = useState<string>("")
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
  const [selectedPaymentOption, setSelectedPaymentOption] = useState<number | null>(null)

const saleTypes = [
    { id: "natural", label: "Persona natural" },
    { id: "empresa", label: "Empresa / Institución" },
  ]

const processData: Record<string, Record<string, string[]>> = {
    peru: {
      empresa: [
        "Verificar en SUNAT: empresa activa y vigente; validar PLAME (>=10 trab. para 1 alumno; >=20 para 2+).",
        "Evaluar solvencia en Sentinel: sin deudas/protestos; semáforo verde; buen historial 12 meses.",
        "Solicitar documentación: Ficha RUC (≤30 días), Vigencia de servicio firmada; cláusula de obligación de pago si aplica; acordar emisión de factura/fecha.",
        "Llamada de revalidación: modalidad, participantes, fecha(s) de pago, contacto encargado de pagos.",
        "Confirmación por correo: si cumple requisitos, registrar en Fase IS y continuar con proceso.",
      ],
      natural: [
        "Seleccionar método de pago disponible en la sede.",
        "Si es link de pago: solicitar al coordinador (Finanzas lo genera) por monto/moneda.",
        "Si es depósito/transferencia: compartir cuenta y CCI/CLABE/Swift según sede y moneda.",
        "Si es plataforma: ingresar a bsginstitute.com/login con accesos habilitados y pagar monto del cronograma.",
        "Recibir comprobante/pantallazo; registrar operación en sistema (n° operación/fecha/monto).",
        "Verificar conciliación con Finanzas; actualizar fase del cliente.",
      ],
    },
  }

const paymentMethodsData: Record<string, Array<{ method: string; detail: string }>> = {
    peru: [
      {
        method: "Links de pago (local)",
        detail: "Solicitar a coordinador; Finanzas genera link por monto/moneda (S/ o US$).",
      },
      { method: "Link internacional 2CO (US$)", detail: "Solo pagos en dólares; solicitar a coordinador." },
      { method: "Depósito/Transferencia BN (S/)", detail: "CC: 011-0320-0100131737-17 | CCI: 011-220-000100131737-17" },
      { method: "Depósito/Transferencia Scotiabank (S/)", detail: "CC: 000-4654102 | CCI: 009-313-000004654102-85" },
      {
        method: "Pago de servicios BCP (S/ y US$)",
        detail: "Vía banca web/móvil, ventanilla o agente. Código agente S/: 18185.",
      },
      { method: "Telecrédito BCP", detail: "S/: 215-1863341-0-42 | US$: 215-1870934-1-48" },
      {
        method: "Transferencias interbancarias BCP",
        detail: "CCI S/: 002215001863341042220 | CCI US$: 002215001870934148223",
      },
      { method: "Transferencia internacional", detail: "Swift: BCPLPEPL | Cuenta US$: 215-1870934-1-48" },
      { method: "Yape", detail: "N° 992 651 774" },
      { method: "Plataforma", detail: "bsginstitute.com/login (monto según cronograma)" },
    ],
  }

const getCurrentSteps = () => {
    if (!selectedCountry || !selectedSaleType) return []
    return processData[selectedCountry]?.[selectedSaleType] || []
  }

const getCurrentPaymentMethods = () => {
    if (!selectedCountry) return []
    return paymentMethodsData[selectedCountry] || []
  }

const toggleStepCompletion = (stepIndex: number) => {
    const newCompletedSteps = new Set(completedSteps)

if (selectedSaleType === "empresa") {
      // Para empresa: todos los pasos son independientes y secuenciales
      if (newCompletedSteps.has(stepIndex)) {
        newCompletedSteps.delete(stepIndex)
      } else {
        newCompletedSteps.add(stepIndex)
      }
    } else if (selectedSaleType === "natural") {
      // Para persona natural: mantener lógica de opciones mutuamente excluyentes
      if (stepIndex === 0 || stepIndex === 4 || stepIndex === 5) {
        // Pasos independientes (1, 5, 6)
        if (newCompletedSteps.has(stepIndex)) {
          newCompletedSteps.delete(stepIndex)
        } else {
          newCompletedSteps.add(stepIndex)
        }
      } else if (stepIndex >= 1 && stepIndex <= 3) {
        // Pasos mutuamente excluyentes (2a, 2b, 2c)
        // Limpiar todas las opciones de pago primero
        newCompletedSteps.delete(1)
        newCompletedSteps.delete(2)
        newCompletedSteps.delete(3)

// Si se hace clic en la opción ya seleccionada, deseleccionarla
        if (selectedPaymentOption === stepIndex) {
          setSelectedPaymentOption(null)
        } else {
          // Seleccionar la nueva opción
          newCompletedSteps.add(stepIndex)
          setSelectedPaymentOption(stepIndex)
        }
      }
    }

setCompletedSteps(newCompletedSteps)
  }

const handleSaleTypeChange = (saleTypeId: string) => {
    setSaleType(saleTypeId)
    setCompletedSteps(new Set())
    setSelectedPaymentOption(null)
  }

const getStepNumber = (index: number) => {
    if (selectedSaleType === "empresa") {
      // Para empresa: numeración secuencial simple
      return (index + 1).toString()
    } else if (selectedSaleType === "natural") {
      // Para persona natural: mantener lógica de 2a, 2b, 2c
      if (index === 0) return "1"
      if (index >= 1 && index <= 3) return "2"
      if (index === 4) return "3"
      if (index === 5) return "4"
    }
    return (index + 1).toString()
  }

const getStepPrefix = (index: number) => {
    if (selectedSaleType === "natural" && index >= 1 && index <= 3) {
      const options = ["a", "b", "c"]
      return `2${options[index - 1]}`
    }
    return ""
  }

const processSteps = getCurrentSteps()
  const paymentMethods = getCurrentPaymentMethods()

return (
    <div className="space-y-6">
      {/* PASO 1: CONFIGURAR PROCESO DE PAGO */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="w-full flex items-center 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">
              <CreditCard className="h-5 w-5" />
            </div>
            <span className="text-base">Paso 1: Configurar proceso de pago</span>
          </div>
        </div>

<div className="p-6">
          <div className="mb-4">
            <h3 className="text-sm font-medium text-[#1a56db] mb-3">Tipo de venta</h3>
            <div className="flex gap-6">
              {saleTypes.map((saleType) => (
                <div key={saleType.id} className="flex items-center space-x-2">
                  <Checkbox
                    id={saleType.id}
                    checked={selectedSaleType === saleType.id}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        handleSaleTypeChange(saleType.id)
                      } else {
                        handleSaleTypeChange("")
                      }
                    }}
                  />
                  <label
                    htmlFor={saleType.id}
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    {saleType.label}
                  </label>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

{/* PASO 2: VER PROCESO PASO A PASO */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div 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">
              <FileText className="h-5 w-5" />
            </div>
            <span className="text-base">{"Paso 2: Ver proceso paso a paso"}</span>
          </div>
          {processSteps.length > 0 && (
            <div className="flex items-center gap-2 text-sm">
              <CheckCircle2 className="h-4 w-4" />
              <span>
                {completedSteps.size} de {processSteps.length} completados
              </span>
            </div>
          )}
        </div>

<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-12">
                  <div className="flex items-center">✓</div>
                </th>
                <th className="py-2 px-4 text-left font-medium text-[#1a56db] w-16">
                  <div className="flex items-center">N°</div>
                </th>
                <th className="py-2 px-4 text-left font-medium text-[#1a56db]">
                  <div className="flex items-center">Descripción</div>
                </th>
              </tr>
            </thead>
            <tbody className="text-sm">
              {processSteps.length > 0
                ? processSteps.map((step, index) => (
                    <tr key={index} className={index % 2 === 0 ? "border-b" : "border-b bg-gray-50"}>
                      <td className="py-3 px-4 text-center">
                        <Checkbox
                          checked={completedSteps.has(index)}
                          onCheckedChange={() => toggleStepCompletion(index)}
                          className="mx-auto"
                        />
                      </td>
                      <td className="py-3 px-4 text-center font-medium text-gray-700">
                        {selectedSaleType === "natural" && index >= 1 && index <= 3
                          ? getStepPrefix(index)
                          : getStepNumber(index)}
                      </td>
                      <td
                        className={`py-3 px-4 ${
                          completedSteps.has(index)
                            ? "text-green-600 font-medium"
                            : selectedSaleType === "natural" &&
                                index >= 1 &&
                                index <= 3 &&
                                selectedPaymentOption !== null &&
                                selectedPaymentOption !== index
                              ? "text-gray-300"
                              : "text-gray-600"
                        }`}
                      >
                        {step}
                      </td>
                    </tr>
                  ))
                : Array.from({ length: 8 }, (_, i) => (
                    <tr key={i} className={i % 2 === 0 ? "border-b" : "border-b bg-gray-50"}>
                      <td className="py-3 px-4 text-center"></td>
                      <td className="py-3 px-4 text-center font-medium text-gray-700">{i + 1}</td>
                      <td className="py-3 px-4 text-gray-600">Seleccione tipo de venta para ver los pasos</td>
                    </tr>
                  ))}
            </tbody>
          </table>
        </div>
      </div>

{/* PASO 3: MÉTODOS DE PAGO POR SEDE */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="w-full flex items-center 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">
              <CreditCard className="h-5 w-5" />
            </div>
            <span className="text-base">Paso 3: Métodos de pago por sede </span>
          </div>
        </div>

// Importaciones de componentes de pestañas
const SpeechTab = lazy(() => import("./tab-components/speech"))
const EditPersonalDataTab = lazy(() => import("./editar-datos-personales/editar-datos-content"))
const CompetitorsTab = lazy(() => import("./tab-components/competitors"))
const PaymentScheduleTab = lazy(() => import("./tab-components/payment-schedule"))
const ProgramSummaryTab = lazy(() => import("./tab-components/program-summary"))
const ProgramInfoTab = lazy(() => import("./tab-components/program-info"))
const ProgramDocsTab = lazy(() => import("./tab-components/program-documents"))
const FAQTab = lazy(() => import("./tab-components/program-faq"))

// Registro de componentes de pestañas
export const tabComponents = {
  speech: SpeechTab,
  editPersonalData: EditPersonalDataTab,
  competitors: CompetitorsTab,
  paymentSchedule: PaymentScheduleTab,
  programSummary: ProgramSummaryTab,
  programInfo: ProgramInfoTab,
  programDocs: ProgramDocsTab,
  faq: FAQTab,
}

export default function TabRegistry() {
  return [
    { id: "speech", label: "Speech", criticality: "high" },
    { id: "editPersonalData", label: "Editar Datos\nPersonales", criticality: "high" },
    { id: "paymentSchedule", label: "Cronograma\nde Pagos", criticality: "medium" },
    { id: "programInfo", label: "Información\ndel Programa", criticality: "medium" },
    { id: "programDocs", label: "Documentos\ndel Programa", criticality: "high" },
    { id: "programSummary", label: "Resumen\nProgramas", criticality: "low" },
    { id: "competitors", label: "Competidores", criticality: "low" },
    { id: "faq", label: "Preguntas\nFrecuentes", criticality: "low" },
  ]
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/fase3-content-redesigned.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  Shield,
  Target,
  BookOpen,
  Award,
  Video,
  TrendingUp,
  CheckCircle,
  AlertTriangle,
  Zap,
  DollarSign,
  Search,
  XCircle,
  MessageSquare,
  Star,
  LucideTriangle as ExclamationTriangle,
} 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 Fase3ContentRedesigned() {
  const [activeMainTab, setActiveMainTab] = useState("argumentos")
  const [activeSubTab, setActiveSubTab] = useState("objetivos-programa")
  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",
  ]

// Configuración de las pestañas principales
  const mainTabs = [
    {
      id: "argumentos",
      label: "Argumentos",
      icon: <MessageSquare className="h-6 w-6" />,
      color: "blue",
      description: "Información clave del programa",
    },
    {
      id: "refuerzos",
      label: "Refuerzos",
      icon: <Star className="h-6 w-6" />,
      color: "green",
      description: "Elementos que fortalecen la propuesta",
    },
    {
      id: "limitaciones",
      label: "Limitaciones",
      icon: <ExclamationTriangle className="h-6 w-6" />,
      color: "amber",
      description: "Requisitos y restricciones",
    },
  ]

// Configuración de sub-pestañas por categoría
  const subTabs = {
    argumentos: [
      {
        id: "objetivos-programa",
        label: "Objetivos",
        icon: <Target className="h-4 w-4" />,
        component: <ObjetivosPrograma />,
      },
      {
        id: "estructura-curricular",
        label: "Estructura",
        icon: <BookOpen className="h-4 w-4" />,
        component: <EstructuraCurricular />,
      },
      {
        id: "certificacion",
        label: "Certificación",
        icon: <Award className="h-4 w-4" />,
        component: <Certificacion />,
      },
      { id: "modalidades", label: "Modalidades", icon: <Video className="h-4 w-4" />, component: <Modalidades /> },
      { id: "precio", label: "Precio", icon: <DollarSign className="h-4 w-4" />, component: <Precio /> },
    ],
    refuerzos: [
      {
        id: "refuerzo-confianza",
        label: "Confianza",
        icon: <Shield className="h-4 w-4" />,
        component: <RefuerzoConfianza />,
      },
      {
        id: "garantia-programa",
        label: "Garantía",
        icon: <CheckCircle className="h-4 w-4" />,
        component: <GarantiaPrograma />,
      },
      {
        id: "demostracion-valor",
        label: "Valor",
        icon: <TrendingUp className="h-4 w-4" />,
        component: <DemostracionValor />,
      },
      {
        id: "aspectos-diferenciadores",
        label: "Diferenciadores",
        icon: <Zap className="h-4 w-4" />,
        component: <AspectosDiferenciadores />,
      },
    ],
    limitaciones: [
      {
        id: "limitaciones",
        label: "Limitaciones",
        icon: <AlertTriangle className="h-4 w-4" />,
        component: <Limitaciones />,
      },
    ],
  }

// Limpiar selección del programa
  const clearSelection = (e) => {
    e.stopPropagation()
    setSearchTerm("")
    setSelectedProgram("")
    setIsOpen(true)
  }

// Cambiar pestaña principal y resetear sub-pestaña
  const handleMainTabChange = (tabId: string) => {
    setActiveMainTab(tabId)
    setActiveSubTab(subTabs[tabId][0].id)
  }

return (
    <div className="space-y-6 mt-10">
      <div className="text-center mb-8">
        <h2 className="text-green-600 text-xl font-semibold">FASE 4: PRESENTACIÓN DE LA PROPUESTA DE VALOR</h2>
      </div>

{/* Program Selector */}
      <div className="mb-6">
        <div className="relative w-full max-w-3xl mx-auto program-selector">
          <div className="flex items-center border border-purple-300 rounded-lg shadow-sm bg-white overflow-hidden">
            <div className="flex-grow relative">
              <div className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400">
                <Search size={16} />
              </div>
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => {
                  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 && (
                <button
                  onClick={clearSelection}
                  className="absolute right-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-600 focus:outline-none transition-colors"
                  aria-label="Borrar selección"
                >
                  <XCircle size={18} />
                </button>
              )}
            </div>
            <button onClick={() => setIsOpen(!isOpen)} className="p-2.5 text-gray-500 hover:text-gray-700">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fillRule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clipRule="evenodd"
                />
              </svg>
            </button>
          </div>

{isOpen && (
            <div className="absolute z-10 w-full mt-1 bg-white border border-purple-300 rounded-lg shadow-lg max-h-[500px] overflow-y-auto">
              {filteredPrograms.length > 0 ? (
                filteredPrograms.map((program) => (
                  <button
                    key={program}
                    onClick={() => {
                      setSelectedProgram(program)
                      setSearchTerm(program)
                      setIsOpen(false)
                    }}
                    className={`w-full text-left p-2.5 text-sm hover:bg-purple-50 ${
                      selectedProgram === program ? "bg-purple-100" : ""
                    }`}
                  >
                    {program}
                  </button>
                ))
              ) : (
                <div className="p-2.5 text-sm text-gray-500">No se encontraron programas</div>
              )}
            </div>
          )}
        </div>
      </div>

{/* Main Tabs Navigation - Estilo similar a Fase 2 */}
      <div className="border rounded-lg shadow-sm mb-6">
        <div className="w-full grid grid-cols-3 bg-[#e6f0ff] rounded-t-lg divide-x divide-blue-200">
          {mainTabs.map((tab) => {
            const isActive = activeMainTab === tab.id

// Definir colores según el tipo de pestaña
            let bgColor, textColor, iconBg, iconColor
            if (isActive) {
              if (tab.color === "blue") {
                bgColor = "bg-blue-600"
                textColor = "text-white"
                iconBg = "bg-blue-600"
                iconColor = "text-white"
              } else if (tab.color === "green") {
                bgColor = "bg-green-600"
                textColor = "text-white"
                iconBg = "bg-green-600"
                iconColor = "text-white"
              } else {
                bgColor = "bg-amber-500"
                textColor = "text-white"
                iconBg = "bg-amber-500"
                iconColor = "text-white"
              }
            } else {
              if (tab.color === "blue") {
                bgColor = "bg-blue-100"
                textColor = "text-blue-600"
                iconBg = "bg-blue-200"
                iconColor = "text-blue-600"
              } else if (tab.color === "green") {
                bgColor = "bg-green-100"
                textColor = "text-green-600"
                iconBg = "bg-green-200"
                iconColor = "text-green-600"
              } else {
                bgColor = "bg-amber-100"
                textColor = "text-amber-600"
                iconBg = "bg-amber-200"
                iconColor = "text-amber-600"
              }
            }

return (
              <button
                key={tab.id}
                onClick={() => handleMainTabChange(tab.id)}
                className={`flex flex-col items-center justify-center py-4 px-2 transition-colors ${
                  isActive
                    ? `${bgColor} ${textColor} rounded-t-lg shadow-sm`
                    : `${bgColor} ${textColor} hover:bg-white/80`
                }`}
              >
                <div className={`p-2 rounded-full ${iconBg}`}>
                  <div className={iconColor}>{tab.icon}</div>
                </div>
                <div className="mt-2 flex flex-col items-center">
                  <span className={`text-sm font-medium ${textColor}`}>{tab.label.toUpperCase()}</span>
                  <span className={`${textColor} opacity-80 text-center`} style={{ fontSize: "14px" }}>
                    {tab.description}
                  </span>
                </div>
              </button>
            )
          })}
        </div>

{/* Sub Tabs Navigation */}
        <div className="bg-white p-4 border-t">
          <div className="flex flex-wrap gap-2">
            {subTabs[activeMainTab].map((subTab) => {
              const isActive = activeSubTab === subTab.id
              const mainTabColor = mainTabs.find((tab) => tab.id === activeMainTab)?.color || "blue"

let activeStyles, inactiveStyles
              if (mainTabColor === "blue") {
                activeStyles = "bg-blue-600 text-white border-blue-600"
                inactiveStyles = "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100"
              } else if (mainTabColor === "green") {
                activeStyles = "bg-green-600 text-white border-green-600"
                inactiveStyles = "bg-green-50 text-green-700 border-green-200 hover:bg-green-100"
              } else {
                activeStyles = "bg-amber-500 text-white border-amber-500"
                inactiveStyles = "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100"
              }

return (
                <button
                  key={subTab.id}
                  onClick={() => setActiveSubTab(subTab.id)}
                  className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors border ${
                    isActive ? activeStyles : inactiveStyles
                  }`}
                >
                  {subTab.icon}
                  <span>{subTab.label}</span>
                </button>
              )
            })}
          </div>
        </div>

{/* Content Area */}
        <div className="bg-white p-4 rounded-b-lg border-t">
          {subTabs[activeMainTab].find((tab) => tab.id === activeSubTab)?.component}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/gestion-comercial/agenda/contacto-entrante/[id]/contexts/motivation-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, type ReactNode } from "react"

export type MotivationPriority = "Principal" | "Secundaria"

export interface SelectedMotivation {
  name: string
  priority: MotivationPriority
}

interface MotivationContextType {
  selectedMotivations: SelectedMotivation[]
  setSelectedMotivations: (motivations: SelectedMotivation[]) => void
}

const MotivationContext = createContext<MotivationContextType | undefined>(undefined)

export function MotivationProvider({ children }: { children: ReactNode }) {
  const [selectedMotivations, setSelectedMotivations] = useState<SelectedMotivation[]>([])

return (
    <MotivationContext.Provider value={{ selectedMotivations, setSelectedMotivations }}>
      {children}
    </MotivationContext.Provider>
  )
}

export function useMotivation() {
  const context = useContext(MotivationContext)
  if (context === undefined) {
    throw new Error("useMotivation must be used within a MotivationProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/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"
import { MotivationProvider } from "./contexts/motivation-context"

// Asegurarnos de que el contenedor principal ocupe todo el ancho
// Modificar el componente para que no tenga restricciones de ancho

export default function ClientPage({ params }: { params: { id: string } }) {
  return (
    <div className="content-container">
      <EmailModalProvider>
        <ComentarioProvider>
          <MotivationProvider>
            <ClientInfo id={params.id} />
          </MotivationProvider>
        </ComentarioProvider>
      </EmailModalProvider>
    </div>
  )
}
[V0_FILE]xml:file="public/images/design-mode/Avatar%20mujer(1).svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/Avatar%20mujer%281%29-mHNs8H67Z9RUYVVVMxrIQNyC0dl6X9.svg" isMerged="true"
[V0_FILE]css:file="app/gestion-comercial/agenda/agenda.css" isQuickEdit="true" 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: #ffffff; /* Changed background from light blue (#f8faff) to white */
  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]css:file="app/global-headers.css" isMerged="true"
/* Estilos globales para cabeceras */
.header-primary {
  background-color: var(--header-primary-bg, #e6f0ff);
  color: var(--header-primary-text, #1a56db);
}

.header-primary-dark {
  background-color: var(--header-primary-dark-bg, #1a56db);
  color: var(--header-primary-dark-text, white);
}

.button-primary {
  background-color: var(--button-primary-bg, #1a56db);
  color: var(--button-primary-text, white);
}

.button-primary:hover {
  background-color: var(--button-primary-hover-bg, #1e429f);
}

.text-primary {
  color: var(--text-primary, #1a56db);
}

.bg-primary-light {
  background-color: var(--bg-primary-light, #e6f0ff);
}

.border-primary {
  border-color: var(--border-primary, #1a56db);
}

/* Added new utility class for dividers */
.divide-primary {
  border-color: var(--divide-primary, #bfdbfe);
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/chat-portal-web.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { RefreshCw, Send } 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)
  }

return (
    <div className="flex flex-col h-full">
      {/* Barra superior con fecha del último mensaje */}
      <div className="bg-[#FF8A00] text-white p-3 flex justify-between items-center">
        <div className="text-sm font-medium">Fecha de último mensaje: 24/04/2025 04:45</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 px-4 py-3 bg-white">
        {/* 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 px-3 py-2">
        <div className="flex items-center gap-2">
          <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 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 px-3 py-2 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>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-3-verificar-semaforo.tsx" isQuickEdit="true" 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 (
    <div className="space-y-8">
      {/* Información del cliente y consulta */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Columna 1: Consulta rápida */}
        <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-100">
          <div className="flex items-center gap-2 mb-3">
            <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
              <Search className="h-4 w-4" />
            </div>
            <h4 className="font-medium text-gray-700">Consulta rápida</h4>
          </div>
          <div className="space-y-3">
            <div>
              <label className="block text-sm text-gray-500 mb-1">Número de documento</label>
              <input
                type="text"
                defaultValue="77137267"
                className="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-[#6419e6] focus:border-transparent text-sm"
              />
            </div>
            <button className="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-md flex items-center justify-center gap-2 transition-colors">
              <Search className="h-4 w-4" />
              Consultar
            </button>
            <button
              onClick={handleOpenModal}
              className="flex items-center justify-center gap-2 text-sm text-[#6419e6] hover:text-[#5310c7] mt-2 w-full cursor-pointer transition-colors"
            >
              <Check className="h-4 w-4" />
              <span className="underline">Ver detalles</span>
            </button>
          </div>
        </div>

{/* Columna 2: Resumen crediticio */}
        <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-100">
          <div className="flex items-center gap-2 mb-3">
            <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
              <DollarSign className="h-4 w-4" />
            </div>
            <h4 className="font-medium text-gray-700">Resumen financiero</h4>
          </div>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between items-center mb-1">
                <span className="text-sm text-gray-500">Línea total disponible:</span>
                <span className="text-lg font-semibold text-green-600">24,625 PEN</span>
              </div>
            </div>
            <div>
              <div className="flex justify-between items-center mb-1">
                <span className="text-sm text-gray-500">Créditos vigentes:</span>
                <span className="text-lg font-semibold text-blue-600">3,601 PEN</span>
              </div>
            </div>
            <div className="pt-2">
              <div className="flex items-center gap-2 bg-green-50 text-green-700 p-2 rounded-lg">
                <Award className="h-4 w-4" />
                <span className="text-sm font-medium">Top 2 - Excelente historial crediticio</span>
              </div>
            </div>
          </div>
        </div>

{/* Columna 3: Información del cliente */}
        <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-100">
          <div className="flex items-center gap-2 mb-3">
            <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
              <User className="h-4 w-4" />
            </div>
            <h4 className="font-medium text-gray-700">Información del cliente</h4>
          </div>
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-500">Edad:</span>
              <span className="text-sm font-medium">29 años</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-500">Consulta realizada:</span>
              <span className="text-sm font-medium">21/04/2025</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-500">Próxima consulta:</span>
              <span className="text-sm font-medium">21/10/2025</span>
            </div>
          </div>
        </div>
      </div>

{/* Secciones de Tarjetas de Crédito y Créditos Vigentes lado a lado */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Sección de Tarjetas de Crédito (desplegable) */}
        <div>
          <div className="bg-white rounded-lg shadow-sm border border-gray-100">
            <button
              onClick={() => setIsTarjetasExpanded(!isTarjetasExpanded)}
              className="w-full flex items-center justify-between p-4 text-left focus:outline-none hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center gap-2">
                <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
                  <CreditCard className="h-4 w-4" />
                </div>
                <h4 className="font-medium text-[#6419e6]">Tarjetas de crédito disponible</h4>
              </div>
              <div className="flex items-center gap-2">
                <span className="font-semibold text-green-600">24,625 PEN</span>
                {isTarjetasExpanded ? (
                  <ChevronUp className="h-5 w-5 text-gray-500" />
                ) : (
                  <ChevronDown className="h-5 w-5 text-gray-500" />
                )}
              </div>
            </button>
          </div>

{/* Contenido expandible de Tarjetas - Separado del botón */}
          {isTarjetasExpanded && (
            <div className="bg-white rounded-lg mt-2 p-4 border border-gray-100 shadow-sm">
              <div className="space-y-4">
                {/* Tarjeta 1 */}
                <div className="bg-white rounded-lg p-4 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-center mb-3">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-[#6419e6] rounded-full"></div>
                      <h5 className="font-medium text-gray-800">BCO FALABELLA PERÚ</h5>
                    </div>
                    <div className="text-sm font-medium text-green-600">7,300 PEN disponible</div>
                  </div>
                  <div className="grid grid-cols-3 gap-2">
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">Línea otorgada</div>
                      <div className="text-sm font-medium">8,300 PEN</div>
                    </div>
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">Línea utilizada</div>
                      <div className="text-sm font-medium">1,000 PEN</div>
                    </div>
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">% Disponible</div>
                      <div className="text-sm font-medium">88%</div>
                    </div>
                  </div>
                </div>

{/* Tarjeta 2 */}
                <div className="bg-white rounded-lg p-4 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-center mb-3">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                      <h5 className="font-medium text-gray-800">BCP</h5>
                    </div>
                    <div className="text-sm font-medium text-green-600">17,325 PEN disponible</div>
                  </div>
                  <div className="grid grid-cols-3 gap-2">
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">Línea otorgada</div>
                      <div className="text-sm font-medium">20,000 PEN</div>
                    </div>
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">Línea utilizada</div>
                      <div className="text-sm font-medium">2,601 PEN</div>
                    </div>
                    <div className="bg-gray-50 p-2 rounded-md">
                      <div className="text-xs text-gray-500 mb-1">% Disponible</div>
                      <div className="text-sm font-medium">87%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

{/* Sección de Créditos Vigentes (desplegable) */}
        <div>
          <div className="bg-white rounded-lg shadow-sm border border-gray-100">
            <button
              onClick={() => setIsCreditosExpanded(!isCreditosExpanded)}
              className="w-full flex items-center justify-between p-4 text-left focus:outline-none hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center gap-2">
                <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
                  <DollarSign className="h-4 w-4" />
                </div>
                <h4 className="font-medium text-[#6419e6]">Créditos vigentes</h4>
              </div>
              <div className="flex items-center gap-2">
                <span className="font-semibold text-blue-600">3,601 PEN</span>
                {isCreditosExpanded ? (
                  <ChevronUp className="h-5 w-5 text-gray-500" />
                ) : (
                  <ChevronDown className="h-5 w-5 text-gray-500" />
                )}
              </div>
            </button>
          </div>

{/* Contenido expandible de Créditos - Separado del botón */}
          {isCreditosExpanded && (
            <div className="bg-white rounded-lg mt-2 p-4 border border-gray-100 shadow-sm">
              <div className="space-y-4">
                {/* Crédito 1 */}
                <div className="bg-white rounded-lg p-4 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-[#6419e6] rounded-full"></div>
                      <h5 className="font-medium text-gray-800">BCO FALABELLA PERÚ</h5>
                      <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                        Al día
                      </span>
                    </div>
                    <div className="text-sm font-medium">1,000 PEN</div>
                  </div>
                </div>

{/* Crédito 2 */}
                <div className="bg-white rounded-lg p-4 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                      <h5 className="font-medium text-gray-800">BCP</h5>
                      <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                        Al día
                      </span>
                    </div>
                    <div className="text-sm font-medium">2,601 PEN</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

{/* Modal para historial crediticio */}
      <HistorialCrediticioModal isOpen={isModalOpen} onClose={handleCloseModal} data={{}} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-4-verificar-historial.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Check } from "lucide-react"

export default function Paso24VerificarHistorial() {
  return (
    <div className="space-y-6 bg-white rounded-lg shadow-md">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-[#e6f0ff]">
            <tr>
              <th className="px-4 py-2 text-left font-medium text-[#6419e6]">Programa</th>
              <th className="px-4 py-2 text-left font-medium text-[#6419e6]">Fecha Solicitud</th>
              <th className="px-4 py-2 text-left font-medium text-[#6419e6]">Asesor</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            <tr className="hover:bg-gray-50">
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <div className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-[#e6f0ff] text-[#6419e6] border border-[#c7d9f9]">
                    IP → IP
                  </div>
                  <div className="font-medium">Curso Oficial AWS Certified Solutions Architect - Associate</div>
                  <div 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" />
                    Muy Alta
                  </div>
                </div>
              </td>
              <td className="px-4 py-3">10/03/2025</td>
              <td className="px-4 py-3">ASESOR 12 ASESOR</td>
            </tr>
          </tbody>
        </table>
      </div>

<div className="flex items-center gap-2">
          <div className="relative">
            <select className="h-8 pl-3 pr-8 border border-gray-200 rounded appearance-none bg-white text-sm">
              <option>5</option>
              <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="12"
                height="12"
                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-sm text-gray-600">items per page</span>
        </div>

<div className="text-sm text-gray-600">1 - 1 of 1 items</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/oportunidades-ventas-cruzadas.tsx" isQuickEdit="true" 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-[#6419e6] font-medium">
          <div className="flex items-center gap-2">
            <div className="bg-[#6419e6] text-white p-1.5 rounded-full">
              <ShoppingBag className="h-4 w-4" />
            </div>
            <h4 className="font-semibold text-[#6419e6]">
              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/client-header.tsx" isQuickEdit="true" 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-[#6419e6] 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-[#6419e6] text-white p-1 rounded-full">
                <Tag className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff] text-[rgba(100,25,230,1)]">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-[#6419e6] text-white p-1 rounded-full">
                <FileText className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff] text-[rgba(100,25,230,1)]">Tab Origen:</span>
              <span className="text-gray-700">Contacto Entrante</span>
            </div>

<div className="flex items-center gap-1.5">
              <div className="bg-[#6419e6] text-white p-1 rounded-full">
                <Phone className="h-3.5 w-3.5" />
              </div>
              <span className="font-medium text-[#004fff] text-[rgba(100,25,230,1)]">Intentos Marcador:</span>
              <span className="text-gray-700">0</span>
            </div>
          </div>
        </div>

{/* Contenido principal - más compacto */}
        <div className="p-8 bg-white">
          {/* 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">
                <Badge variant="outline" className="bg-green-50 text-green-600">
                  Alta
                </Badge>
                <h2 className="text-xl font-bold text-[#004fff]">{clientData.name}</h2>
              </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/fase2/paso-2-2-identificar-objetivo.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Circle, ChevronDown, ChevronUp } from "lucide-react"
import { colors } from "../../../../../../../lib/colors"
import { useMotivation, type MotivationPriority } from "../../contexts/motivation-context"

export default function Paso22IdentificarObjetivo() {
  const { selectedMotivations, setSelectedMotivations } = useMotivation()
  const [expandedArguments, setExpandedArguments] = useState<string[]>([])

const toggleMotivation = (motivation: string) => {
    const existing = selectedMotivations.find((m) => m.name === motivation)

if (existing) {
      const remainingMotivations = selectedMotivations.filter((m) => m.name !== motivation)

// If we removed the Principal and there's a Secundaria left, promote it to Principal
      if (existing.priority === "Principal" && remainingMotivations.length === 1) {
        remainingMotivations[0].priority = "Principal"
      }

setSelectedMotivations(remainingMotivations)
      setExpandedArguments(expandedArguments.filter((m) => m !== motivation))
    } else {
      if (selectedMotivations.length < 2) {
        const defaultPriority: MotivationPriority = selectedMotivations.length === 0 ? "Principal" : "Secundaria"
        setSelectedMotivations([...selectedMotivations, { name: motivation, priority: defaultPriority }])
        // Auto-expand when selected
        setExpandedArguments([...expandedArguments, motivation])
      }
    }
  }

const updatePriority = (motivation: string, newPriority: MotivationPriority) => {
    setSelectedMotivations(
      selectedMotivations.map((m) => {
        if (m.name === motivation) {
          return { ...m, priority: newPriority }
        }
        // If another motivation has the same priority, swap it
        if (m.priority === newPriority) {
          return { ...m, priority: newPriority === "Principal" ? "Secundaria" : "Principal" }
        }
        return m
      }),
    )
  }

const toggleExpansion = (motivation: string) => {
    if (expandedArguments.includes(motivation)) {
      setExpandedArguments(expandedArguments.filter((m) => m !== motivation))
    } else {
      setExpandedArguments([...expandedArguments, motivation])
    }
  }

const isSelected = (motivation: string) => {
    return selectedMotivations.some((m) => m.name === motivation)
  }

const getPriority = (motivation: string): MotivationPriority | null => {
    const found = selectedMotivations.find((m) => m.name === motivation)
    return found ? found.priority : null
  }

const isDisabled = (motivation: string) => {
    return selectedMotivations.length >= 2 && !isSelected(motivation)
  }

const motivations = [
    {
      name: "Certificarse",
      label: "Certificarse",
      content: (
        <div className="px-4 pb-3 space-y-3 ml-11">
          <div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              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.
            </div>
          </div>

<div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              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).
            </div>
          </div>
        </div>
      ),
    },
    {
      name: "Aprender",
      label: "Aprender",
      content: (
        <div className="px-4 pb-3 ml-11">
          <div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              <p className="mb-2">Con nuestro curso podrás:</p>
              <ul className="list-disc pl-5 space-y-1">
                <li>
                  Adquirir los conocimientos y las habilidades necesarias para la identificación de los servicios de
                  Amazon Web Services en modo teórico/práctico.
                </li>
                <li>
                  Comprender los servicios básicos de Amazon Web Services incluido EC2, VCP, RDS, BD, EBS y Route53.
                </li>
                <li>
                  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.
                </li>
                <li>
                  Contar con una preparación especializada para rendir el examen AWS Certified Solutions Architect -
                  Associate.
                </li>
              </ul>
            </div>
          </div>
        </div>
      ),
    },
    {
      name: "Superación",
      label: "Superación personal y mejorar su calidad de vida",
      content: (
        <div className="px-4 pb-3 ml-11">
          <div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              La certificación AWS puede mejorar significativamente tus oportunidades laborales y nivel de ingresos,
              contribuyendo a una mejor calidad de vida.
            </div>
          </div>
        </div>
      ),
    },
    {
      name: "Desarrollo",
      label: "Desarrollo profesional",
      content: (
        <div className="px-4 pb-3 ml-11">
          <div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              La certificación AWS es reconocida globalmente y demuestra tu competencia en tecnologías cloud, abriendo
              puertas a nuevas oportunidades profesionales.
            </div>
          </div>
        </div>
      ),
    },
    {
      name: "Aplicar",
      label: "Aplicar",
      content: (
        <div className="px-4 pb-3 ml-11">
          <div className="flex items-start gap-2 py-2 px-2">
            <Circle className={`h-2 w-2 text-[${colors.primary}] mt-1.5 flex-shrink-0`} fill={colors.primary} />
            <div className="text-sm text-gray-700">
              Este curso te brinda conocimientos prácticos que podrás aplicar inmediatamente en tu trabajo o proyectos
              personales.
            </div>
          </div>
        </div>
      ),
    },
  ]

return (
    <div className="w-full">
      <p className="text-gray-600 mb-2 text-sm">
        ¿Cuáles son los motivos por los que te interesa capacitarte en Curso Oficial AWS Certified Solutions Architect -
        Associate?
      </p>

<div className="bg-white border border-gray-200 rounded-lg overflow-hidden w-full">
        <div className="grid grid-cols-[auto_1fr] bg-blue-50 w-full">
          <div className="py-2 px-4 text-xs font-medium text-[#6419e6]">MOTIVACIÓN</div>
          <div></div>
        </div>

<div className="divide-y divide-gray-200">
          {motivations.map((motivation) => {
            const selected = isSelected(motivation.name)
            const priority = getPriority(motivation.name)
            const disabled = isDisabled(motivation.name)
            const isExpanded = expandedArguments.includes(motivation.name)

return (
              <div key={motivation.name}>
                <div className="grid grid-cols-[auto_1fr] items-center">
                  <div className="py-3 px-4 flex items-center">
                    <input
                      type="checkbox"
                      className="h-4 w-4 mr-3 disabled:opacity-50 disabled:cursor-not-allowed"
                      checked={selected}
                      disabled={disabled}
                      onChange={() => toggleMotivation(motivation.name)}
                    />
                    <span className="text-sm text-gray-700">{motivation.label}</span>
                  </div>
                  <div className="py-3 px-4 flex items-center gap-3">
                    {selected ? (
                      <div className="relative">
                        <select
                          value={priority || "Principal"}
                          onChange={(e) => updatePriority(motivation.name, e.target.value as MotivationPriority)}
                          className="appearance-none bg-white border border-gray-300 rounded px-3 py-1.5 pr-8 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
                        >
                          <option value="Principal">Principal</option>
                          <option value="Secundaria">Secundaria</option>
                        </select>
                        <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
                      </div>
                    ) : (
                      <button
                        onClick={() => toggleExpansion(motivation.name)}
                        className="group inline-flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 hover:bg-transparent focus:outline-none"
                      >
                        <span className="text-sm font-semibold text-[#6419e6] hover:text-[#5310c7] transition-colors duration-200 hover:underline decoration-[#6419e6] decoration-2 underline-offset-4 hover:decoration-[#5310c7]">
                          {isExpanded ? "ver menos" : "ver más"}
                        </span>
                        {isExpanded ? (
                          <ChevronUp className="h-4 w-4 text-[#6419e6] group-hover:text-[#5310c7] transition-all duration-200 group-hover:-translate-y-0.5" />
                        ) : (
                          <ChevronDown className="h-4 w-4 text-[#6419e6] group-hover:text-[#5310c7] transition-all duration-200 group-hover:translate-y-0.5" />
                        )}
                      </button>
                    )}
                  </div>
                </div>

{(expandedArguments.includes(motivation.name) || selected) && motivation.content}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/reporte-incidencia-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  Phone,
  MessageSquare,
  Info,
  X,
  ThumbsDown,
  UserX,
  PhoneOff,
  CheckSquare,
  Square,
  ChevronLeft,
  XCircle,
  PhoneCall,
  Globe,
  Star,
} from "lucide-react"
import { InstantTooltip } from "./instant-tooltip"
import { DateTimePicker } from "./date-time-picker"

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

export function ReporteIncidenciaModal({ isOpen, onClose }: ReporteIncidenciaModalProps) {
  const [activeOption, setActiveOption] = useState<string | null>(null)
  const [selectedItem, setSelectedItem] = useState<string | null>(null)
  const [showSeguimiento, setShowSeguimiento] = useState(false)
  const [tipoSeguimiento, setTipoSeguimiento] = useState<"llamada" | "whatsapp">("llamada")

// Estados para el seguimiento (anteriormente en SeguimientoModal)
  const [comentario, setComentario] = useState("")
  const [fechaSiguiente, setFechaSiguiente] = useState("")
  const [opcionLlamada, setOpcionLlamada] = useState("")
  const [calidadLlamada, setCalidadLlamada] = useState("")
  const [estadoFase, setEstadoFase] = useState("")
  const [fechaEnvio, setFechaEnvio] = useState("")
  const [fechaPago, setFechaPago] = useState("")
  const [fechaInicio, setFechaInicio] = useState("")
  const [tipoComprobante, setTipoComprobante] = useState<"boleta" | "factura" | "">("")

if (!isOpen) return null

// Function to handle option selection
  const handleOptionSelect = (option: string) => {
    setActiveOption(option)
    setSelectedItem(null)
    setShowSeguimiento(false)
  }

// Function to go back to main options
  const handleBackToOptions = () => {
    setActiveOption(null)
    setSelectedItem(null)
    setShowSeguimiento(false)
  }

// Function to handle item selection
  const handleItemSelect = (itemId: string) => {
    setSelectedItem(itemId === selectedItem ? null : itemId)
    setShowSeguimiento(false)
  }

// Function to handle follow-up button clicks
  const handleSeguimiento = (tipo: "llamada" | "whatsapp") => {
    setTipoSeguimiento(tipo)
    setShowSeguimiento(true)
  }

// Function to handle close opportunity button
  const handleCerrarOportunidad = () => {
    // Aquí iría la lógica para cerrar la oportunidad
    console.log("Cerrando oportunidad...")
    onClose() // Cerrar el modal después de cerrar la oportunidad
  }

// Function to go back from seguimiento to item selection
  const handleBackFromSeguimiento = () => {
    setShowSeguimiento(false)
  }

// Content for the tooltip - Cliente interesado, pero no revisó la información
  const tooltipClienteInteresado = (
    <div className="space-y-4 text-sm">
      <div>
        <h4 className="font-semibold mb-2">1. Completar los datos del cliente (OBLIGATORIO)</h4>
        <ul className="list-disc pl-5 space-y-1">
          <li>Teléfonos alternativos: teléfono fijo de domicilio, teléfono fijo de trabajo incluyendo anexo.</li>
          <li>Empresa, cargo, carrera, industria y DNI del cliente.</li>
        </ul>
      </div>

<div>
        <h4 className="font-semibold mb-2">2. Obtener referidos</h4>
        <p>
          Ofrecer un 10% de descuento en el monto total por el primer referido que se inscriba, y por cada referido
          adicional que se inscriba con nosotros, obtendrás un 5% de descuento extra. Si se inscriben después, su
          cronograma de pagos será actualizado.
        </p>
      </div>

<div>
        <h4 className="font-semibold mb-2">3. Pactar hora y fecha de siguiente llamada</h4>
        <p>La siguiente llamada debe ser mañana o pasado mañana.</p>
      </div>
    </div>
  )

// Content for the tooltip - Está realmente interesado en el programa
  const tooltipEstaInteresado = (
    <div className="space-y-4 text-sm">
      <p className="font-medium">
        Identificar el problema específico y seleccionar la opción que corresponda, se debe preguntar y re-preguntar
        hasta conocer los detalles*.
      </p>
      <p className="italic text-gray-600">
        *Tener en cuenta que muchas veces el problema real no es mencionado inicialmente por el cliente.
      </p>

<div>
        <h4 className="font-semibold mb-2">¿Cómo identifico un problema específico?</h4>
        <ol className="list-decimal pl-5 space-y-2">
          <li>
            <strong>Conocer el problema general:</strong> ¿De qué dependería que se matricule? o ¿Cuál es el motivo por
            el cual no podría matricularse en este momento?
          </li>
          <li>
            <strong>Validar que el problema no sea una excusa:</strong> ¿Si no existiera este factor usted se matricula?
          </li>
          <li>
            <strong>Confirmar que no existan otros problemas:</strong> Según el tipo de problema confirmar lo siguiente:
            <ul className="list-disc pl-5 mt-1 space-y-1">
              <li>
                <strong>Si es costos:</strong> Confirmar que la estructura curricular es lo que busca, que puede
                llevarlo en la modalidad ofrecida, que cumpla con los requisitos, y que los horarios de clases se
                acomoden a los horarios del cliente.
              </li>
              <li>
                <strong>Si es modalidad y horarios de clases:</strong> Confirmar que la estructura curricular es lo que
                busca, que puede asumir el costo del programa, y que cumpla con los requisitos.
              </li>
              <li>
                <strong>Si es estructura curricular:</strong> Confirmar que puede asumir el costo del programa, que
                puede llevarlo en la modalidad ofrecida, que cumpla con los requisitos, y que los horarios de clases se
                acomoden a los horarios del cliente.
              </li>
            </ul>
          </li>
          <li>
            <strong>Conocer el problema específico:</strong> Se debe preguntar los detalles como: ¿En qué horas o fechas
            se complica? ¿Cuál es el monto más cercano que tiene para la matrícula? ¿Cuál es su sistema de trabajo?
          </li>
        </ol>
      </div>
    </div>
  )

// Content for the tooltip - Va a enviar la ficha de matrícula
  const tooltipVaEnviarFicha = (
    <div className="space-y-4 text-sm">
      <p>
        Te llegará al correo un usuario y contraseña para que puedas seleccionar el método de pago y puedas completar
        datos de tu ficha.
      </p>

<p>Confírmame, ¿el pago de la matrícula sería el día XXX en horas de la tarde está bien?</p>

<p>
        El pago de tus cuotas siendo XXXXX, serían para los XXXXX de los meses siguientes, puedes realizarlo en estas
        fechas o prefieres modificarlo?
      </p>

<p>
        Te comento los atrasos generan mora y para evitarlo prefiero me confirmes en qué fecha puedes realizar los pagos
        mensuales, ¿Los primeros días del mes, quincena o fin de mes?
      </p>

<p>
        Excelente, en tu usuario de la página web va a figurar el cronograma de pagos que estamos acordando, ¿estás en
        estos momentos frente a una computadora para que puedas ingresar?
      </p>

<div className="mt-2">
        <p>
          <strong>SI:</strong> ok en estos momentos te llegará el acceso a la página web y en unos 20 minutos te llamo
          para confirmar que ya hayas realizado el proceso. Recuerda que es necesario que ingreses para que se genere tu
          código de pago y puedas realizar el pago sin ningún problema el día de mañana.
        </p>
        <p>
          <strong>NO:</strong> (confirmar que el envío de la ficha se haga antes de las 6)
          <br />
          Nos comunicamos apenas realices el proceso de matrícula, gracias.
        </p>
      </div>
    </div>
  )

// Content for the tooltip - Instrucciones según modalidad
  const tooltipInstruccionesModalidad = (
    <div className="space-y-4 text-sm">
      <div>
        <h4 className="font-semibold mb-2">Si es online (Perú y Colombia):</h4>
        <ul className="list-disc pl-5 space-y-2">
          <li>
            Indicarle que se le devolverá la llamada para realizar el contrato de voz.{" "}
            <span className="italic text-gray-600">(absolver todas las dudas antes de devolver la llamada)</span>
          </li>
          <li>
            Solicitar la creación de accesos virtuales y explicar que en un plazo no mayor a 24 horas el coordinador
            académico asignado se pondrá en contacto con el cliente para que pueda iniciar su capacitación. (Solo online
            asincrónico)
          </li>
        </ul>
      </div>

<div>
        <h4 className="font-semibold mb-2">Si es presencial:</h4>
        <ul className="list-disc pl-5">
          <li>Enviar correo Invitación a primera sesión de clases (solo para presencial y online sincrónico).</li>
        </ul>
      </div>

<div>
        <h4 className="font-semibold mb-2">Si es online (Extranjero):</h4>
        <ul className="list-disc pl-5">
          <li>Explicarle la documentación que necesita llenar y confirmar cuando la estará remitiendo escaneada.</li>
        </ul>
      </div>
    </div>
  )

// Tooltips para Respuesta Negativa
  const tooltipNoMatriculaAhora = (
    <div className="space-y-4 text-sm">
      <p className="font-medium">
        No quedarse con la primera negativa del cliente. Preguntar por qué no le interesa el programa que se ofrece
        inicialmente:
      </p>

<ul className="list-disc pl-5 space-y-1">
        <li>No es de su interés el tema.</li>
        <li>No cuenta con tiempo para capacitarse.</li>
        <li>No tiene presupuesto para capacitarse.</li>
        <li>Piensa estudiar en otra institución.</li>
        <li>Está estudiando actualmente.</li>
      </ul>

<p>
        Si no es ninguna de las anteriores, tratar en la medida de lo posible de identificar la razón del no interés por
        parte del cliente.
      </p>

<p>
        En base al motivo recalcar la importancia de no aplazar la capacitación porque puede perder oportunidades
        laborales que se le presenten.
      </p>
    </div>
  )

const tooltipNoMatriculaOtroPrograma = (
    <div className="space-y-4 text-sm">
      <p className="font-medium">
        Identificar el nuevo programa de interés y registrar el nuevo interés en el sistema.
      </p>

<ul className="list-disc pl-5 space-y-1">
        <li>
          Indicar que se enviará la información del nuevo programa de interés si el cliente aún no tiene la información.
        </li>
        <li>Pactar hora y fecha de siguiente llamada. Sugerir que sea mañana o pasado mañana.</li>
      </ul>
    </div>
  )

const tooltipNoMatriculaRevisarInfo = (
    <div className="space-y-4 text-sm">
      <p>Sugerir que la siguiente llamada normalmente sea para mañana o pasado mañana como máximo.</p>
    </div>
  )

const tooltipNoMatriculaNoInteres = (
    <div className="space-y-4 text-sm">
      <p>Agradecer la atención del cliente.</p>
      <p>Solicitar referidos.</p>
    </div>
  )

// Tooltips para Sin contacto efectivo
  const tooltipFamiliarContesta = (
    <div className="space-y-4 text-sm">
      <p>
        Solicitar un número de teléfono en cual se pueda contactar directamente con el cliente. En caso no lo faciliten
        consultar en que horario se puede encontrar al cliente.
      </p>
    </div>
  )

const tooltipOcupadoNoAtiende = (
    <div className="space-y-4 text-sm">
      <p>
        Programar en la agenda la siguiente llamada dentro de 5 horas. Si no se alcanza a efectuar durante el día de hoy
        (porque sale de su horario de trabajo) programar en la primera hora disponible del día siguiente.
      </p>
    </div>
  )

// Tooltip común para opciones de Sin respuesta telefónica
  const tooltipSinRespuestaTelefonica = (
    <div className="space-y-4 text-sm">
      <p>
        Programar en la agenda la siguiente llamada dentro de 5 horas. Si no se alcanza a efectuar durante el día de hoy
        (porque sale de su horario de trabajo) programar en la primera hora disponible del día siguiente.
      </p>
    </div>
  )

// Options data
  const options = [
    {
      id: "respuestaTelefonicaPositiva",
      title: "Respuesta telefónica positiva",
      icon: PhoneCall,
      color: "bg-green-500",
      bgColor: "bg-green-200",
      textColor: "text-green-800",
      requiresContactType: false,
      items: [
        {
          id: "clienteInteresadoNoReviso",
          text: "Cliente interesado, pero no revisó la información, se agenda llamada para validar revisión de información (IT)",
          showTooltip: true,
          tooltipContent: tooltipClienteInteresado,
        },
        {
          id: "estaInteresado",
          text: "Está realmente interesado en el programa pero tiene algún problema para concretar su participación (IP)",
          showTooltip: true,
          tooltipContent: tooltipEstaInteresado,
        },
        {
          id: "vaEnviarFicha",
          text: "Va a enviar la ficha de matrícula (PF)",
          showTooltip: true,
          tooltipContent: tooltipVaEnviarFicha,
        },
        {
          id: "confirmaPagoGrabacion",
          text: "Confirma pago, se pacta fecha de grabación de contrato de voz (IS)",
          showTooltip: true,
          tooltipContent: tooltipInstruccionesModalidad,
        },
      ],
    },
    {
      id: "respuestaTelefonicaNegativa",
      title: "Respuesta telefónica negativa",
      icon: ThumbsDown,
      color: "bg-red-500",
      bgColor: "bg-red-200",
      textColor: "text-red-800",
      requiresContactType: false,
      items: [
        {
          id: "noMatriculaAhora1",
          text: "No se va a matricular en el programa ahora pero si más adelante (RN2-B)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaAhora,
        },
        {
          id: "noMatriculaOtroPrograma",
          text: "No se va a matricular en el programa, pero tiene interés concreto en otro programa. Se le crea nueva oportunidad en el programa de interés (RN1)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaOtroPrograma,
        },
        {
          id: "noMatriculaRevisarInfo",
          text: "No se va a matricular en el programa ahora pero si le interesa revisar la información de otros programas (RN)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaRevisarInfo,
        },
        {
          id: "noMatriculaNoInteres",
          text: "No se va a matricular en el programa y no le interesa la información de otros programas (RN3)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaNoInteres,
        },
        {
          id: "reportadoCentrales",
          text: "Está reportado en centrales de riesgo (RN4)",
          showTooltip: false,
          showCerrarOportunidad: true,
        },
        {
          id: "noSolicitoInfo",
          text: "No solicitó información",
          showTooltip: false,
        },
        {
          id: "predictivo",
          text: "Predictivo (RN2-C)",
          showTooltip: false,
          showCerrarOportunidad: true,
        },
      ],
    },
    {
      id: "sinContactoEfectivo",
      title: "Sin contacto telefónico efectivo",
      icon: UserX,
      color: "bg-blue-500",
      bgColor: "bg-blue-200",
      textColor: "text-blue-800",
      requiresContactType: false,
      items: [
        {
          id: "familiarContesta",
          text: "Familiar o un tercero contesta",
          showTooltip: true,
          tooltipContent: tooltipFamiliarContesta,
        },
        {
          id: "ocupadoNoAtiende",
          text: "Contesta, está ocupado y no puede atender en este momento",
          showTooltip: true,
          tooltipContent: tooltipOcupadoNoAtiende,
        },
      ],
    },
    {
      id: "sinRespuestaTelefonica",
      title: "Sin contacto con el cliente",
      icon: PhoneOff,
      color: "bg-yellow-500",
      bgColor: "bg-yellow-200",
      textColor: "text-yellow-800",
      requiresContactType: false,
      items: [
        {
          id: "noRespondeBuzon",
          text: "No responde llamada y se va a buzón de voz",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
        {
          id: "cortaLlamada",
          text: "Corta la llamada durante el timbrado",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
        {
          id: "noEntraLlamada",
          text: "No entra la llamada",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
        {
          id: "contestaYCorta",
          text: "Contesta la llamada y corta",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
        {
          id: "telefonoApagado",
          text: "Teléfono apagado",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
        {
          id: "numeroNoExiste",
          text: "Número no existe o está suspendido",
          showTooltip: true,
          tooltipContent: tooltipSinRespuestaTelefonica,
        },
      ],
    },
    {
      id: "respuestaPositivaOtroMedio",
      title: "Respuesta positiva por otro medio",
      icon: Globe,
      color: "bg-green-500",
      bgColor: "bg-green-200",
      textColor: "text-green-800",
      requiresContactType: false,
      items: [
        {
          id: "clienteInteresadoNoReviso",
          text: "Cliente interesado, pero no revisó la información, se agenda llamada para validar revisión de información (IT)",
          showTooltip: true,
          tooltipContent: tooltipClienteInteresado,
        },
        {
          id: "estaInteresado",
          text: "Está realmente interesado en el programa pero tiene algún problema para concretar su participación (IP)",
          showTooltip: true,
          tooltipContent: tooltipEstaInteresado,
        },
        {
          id: "vaEnviarFicha",
          text: "Va a enviar la ficha de matrícula (PF)",
          showTooltip: true,
          tooltipContent: tooltipVaEnviarFicha,
        },
        {
          id: "confirmaPagoGrabacion",
          text: "Confirma pago, se pacta fecha de grabación de contrato de voz (IS)",
          showTooltip: true,
          tooltipContent: tooltipInstruccionesModalidad,
        },
      ],
    },
    {
      id: "respuestaNegativaOtroMedio",
      title: "Respuesta negativa por otro medio",
      icon: X,
      color: "bg-red-500",
      bgColor: "bg-red-200",
      textColor: "text-red-800",
      requiresContactType: false,
      items: [
        {
          id: "noMatriculaAhora1",
          text: "No se va a matricular en el programa ahora pero si más adelante (RN2-B)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaAhora,
        },
        {
          id: "noMatriculaOtroPrograma",
          text: "No se va a matricular en el programa, pero tiene interés concreto en otro programa. Se le crea nueva oportunidad en el programa de interés (RN1)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaOtroPrograma,
        },
        {
          id: "noMatriculaRevisarInfo",
          text: "No se va a matricular en el programa ahora pero si le interesa revisar la información de otros programas (RN)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaRevisarInfo,
        },
        {
          id: "noMatriculaNoInteres",
          text: "No se va a matricular en el programa y no le interesa la información de otros programas (RN3)",
          showTooltip: true,
          tooltipContent: tooltipNoMatriculaNoInteres,
        },
        {
          id: "reportadoCentrales",
          text: "Está reportado en centrales de riesgo (RN4)",
          showTooltip: false,
          showCerrarOportunidad: true,
        },
        {
          id: "noSolicitoInfo",
          text: "No solicitó información",
          showTooltip: false,
        },
        {
          id: "predictivo",
          text: "Predictivo (RN2-C)",
          showTooltip: false,
          showCerrarOportunidad: true,
        },
      ],
    },
  ]

// Get the current option
  const currentOption = options.find((opt) => opt.id === activeOption)

// Get items based on the current selection
  const getItems = () => {
    if (!currentOption) return []
    return currentOption.items
  }

const items = getItems()

// Opciones para el formulario de seguimiento
  const opcionesLlamada = [
    "Ha habido interferencia en las llamadas",
    "No se puede escuchar al cliente",
    "El cliente no me puede escuchar",
    "Se corta la llamada",
    "Llamada al vacío",
  ]

const opcionesCalidad = ["0 - Muy mala", "1 - Mala", "2 - Normal", "3 - Buena", "4 - Muy buena", "5 - Excelente"]

const opcionesEstadoFase = ["Sólido", "Dudoso"]

// Verificamos si es el ítem específico para mostrar campos personalizados
  const isConfirmaPagoGrabacion = selectedItem === "confirmaPagoGrabacion"

// Renderizar el contenido del seguimiento
  const renderSeguimientoContent = () => {
    return (
      <div className="p-4 space-y-4">
        <div className="flex items-center mb-4">
          <button onClick={handleBackFromSeguimiento} className="mr-2 p-1 rounded-full hover:bg-gray-200">
            <ChevronLeft className="h-5 w-5" />
          </button>
          <h3 className="text-lg font-semibold text-[#6419e6]">
            {tipoSeguimiento === "llamada"
              ? "¿Qué ocurrió en esta llamada?"
              : "¿Qué ocurrió en este seguimiento por WhatsApp?"}
          </h3>
        </div>

{/* Comentario */}
        <div className="space-y-1">
          <label htmlFor="comentario" className="block text-sm font-medium text-gray-700">
            Ingrese un comentario
          </label>
          <div className="relative">
            <textarea
              id="comentario"
              className="w-full border rounded-md p-2 h-24 text-sm"
              placeholder="Ingrese un comentario"
              value={comentario}
              onChange={(e) => setComentario(e.target.value)}
              maxLength={500}
            >

{comentario.length}/500

{/* Fecha siguiente actividad y Estado Fase PF - side by side */}

Fecha siguiente actividad

Estado Fase PF

{/* Campos específicos para "Confirma pago, se pacta fecha de grabación de contrato de voz (IS)" */} {isConfirmaPagoGrabacion ? (

Elija Comprobante de Pago

Fecha Inicio Programa

setTipoComprobante("boleta")} className="form-radio h-4 w-4 text-purple-600" /> Boleta setTipoComprobante("factura")} className="form-radio h-4 w-4 text-purple-600" /> Factura

) : ( <> {/* Fecha de Envío Ficha y Fecha de Pago en un contenedor con borde */}

{/* Fecha de Envío Ficha */}

Fecha de Envío Ficha

{/* Fecha de Pago */}

Fecha de Pago

)} {/* Opción respecto a la llamada y Calificación de llamada en grid */}

{/* Opción respecto a la llamada */}

Opción respecto a la llamada

{/* Star Rating for Call Quality */}

Califique la calidad de la llamada

{[1, 2, 3, 4, 5].map((star) => ( ))}

{/* Botón de programar actividad */}

) } return (

{/* Header */}

REPORTE DE INCIDENCIA DE LLAMADA

{/* Content */}

{/* Si estamos mostrando el seguimiento, renderizamos su contenido */} {showSeguimiento ? ( renderSeguimientoContent() ) : (

{/* Mostrar opciones principales solo si no hay ninguna seleccionada */} {!activeOption && (

{options.slice(0, 2).map((option) => { const Icon = option.icon return ( ) })}

)} {/* Mostrar opciones secundarias solo si no hay ninguna seleccionada */} {!activeOption && (

{options.slice(2, 4).map((option) => { const Icon = option.icon return ( ) })}

)} {/* Mostrar opciones terciarias solo si no hay ninguna seleccionada */} {!activeOption && (

{options.slice(4).map((option) => { const Icon = option.icon return ( ) })}

)} {/* Si hay una opción seleccionada, mostrar cabecera y subniveles */} {activeOption && currentOption && ( <> {/* Cabecera de la opción seleccionada */}

{currentOption.title}

{/* Lista de items */}

{items.map((item) => (

handleItemSelect(item.id)} > {selectedItem === item.id ? ( ) : ( )} {item.text} {item.showTooltip && ( )}

{selectedItem === item.id && ( <> {item.showCerrarOportunidad ? (

) : (

)} {/* Only show instructions in the UI if we're not using tooltips */} {activeOption === "respuestaPositiva" && item.id === "confirmaPagoGrabacion" && !item.showTooltip && (

Instrucciones según modalidad

Si es online (Perú y Colombia):

Indicarle que se le devolverá la llamada para realizar el contrato de voz.{" "} (absolver todas las dudas antes de devolver la llamada)
Solicitar la creación de accesos virtuales y explicar que en un plazo no mayor a 24 horas el coordinador académico asignado se pondrá en contacto con el cliente para que pueda iniciar su capacitación. (Solo online asincrónico)

Si es presencial:

Enviar correo Invitación a primera sesión de clases (solo para presencial y online sincrónico).

Si es online (Extranjero):

Explicarle la documentación que necesita llenar y confirmar cuando la estará remitiendo escaneada.

)} )}

))}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/certificacion.tsx" isQuickEdit="true" 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/precio.tsx" isMerged="true" "use client" export default function Precio() { return (

{/* Versión Básica */}

Básica

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: [detallar los beneficios asociados a la versión]

{/* Divider */}

{/* Versión Profesional */}

Profesional

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: Todos los beneficios de la versión básica más [detallar los beneficios asociados a la versión]

{/* Divider */}

{/* Versión Gerencial */}

Gerencial

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: Todos los beneficios de la versión profesional más [detallar los beneficios asociados a la versión]

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3/estructura-curricular.tsx" isMerged="true" "use client" export default function EstructuraCurricular() { 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 Section */}

Curso AWS Technical Essentials

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsTechnicalCol1.length + index + 1}

{item}

{/* AWS Solutions Architect Section */}

AWS Solutions Architect

{/* Columna 1 */}

{index + 1}

{item}

{/* Columna 2 */}

{awsSolutionsCol1.length + index + 1}

{item}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/payment-schedule.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { ChevronDown, CreditCard, Calendar, Percent, Save, Edit, Trash2, Split, AlertCircle, FileText, CheckCircle2, } from "lucide-react" export default function PaymentSchedule() { const [selectedVersion, setSelectedVersion] = useState("") const [paymentType, setPaymentType] = useState("Contado") // Contado selected by default const [selectedDiscount, setSelectedDiscount] = useState("Sin descuento") // "Sin descuento" selected by default const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("") const [totalCost, setTotalCost] = useState(0) const [discountedCost, setDiscountedCost] = useState(0) const [discountAmount, setDiscountAmount] = useState(0) const [versionDropdownOpen, setVersionDropdownOpen] = useState(false) const [discountDropdownOpen, setDiscountDropdownOpen] = useState(false) const [paymentMethodDropdownOpen, setPaymentMethodDropdownOpen] = useState(false) const [showPaymentSchedule, setShowPaymentSchedule] = useState(false) const [paymentSchedule, setPaymentSchedule] = useState>([]) const [currencyCode, setCurrencyCode] = useState("USD") const [numberOfInstallments, setNumberOfInstallments] = useState(4) const [numPagosDropdownOpen, setNumPagosDropdownOpen] = useState(false) const [originalTotal, setOriginalTotal] = useState(0) const [currentTotal, setCurrentTotal] = useState(0) const [editingDate, setEditingDate] = useState(null) const [editingAmount, setEditingAmount] = useState(null) const [tempDate, setTempDate] = useState("") const [tempAmount, setTempAmount] = useState("") // Referencias para los dropdowns const priceDropdownRef = useRef(null) const paymentMethodDropdownRef = useRef(null) const discountTypeDropdownRef = useRef(null) const versionDropdownRef = useRef(null) const discountDropdownRef = useRef(null) const numPagosDropdownRef = useRef(null) // Estado para verificar si todos los campos requeridos están completos const [isFormComplete, setIsFormComplete] = useState(false) // Estados para el proceso de pago const [selectedCountry] = useState("peru") const [selectedSaleType, setSaleType] = useState("") const [completedSteps, setCompletedSteps] = useState>(new Set()) const [selectedPaymentOption, setSelectedPaymentOption] = useState(null) // Opciones para los desplegables const versionOptions = ["Versión Profesional", "Versión Gerencial"] const discountOptions = ["Sin descuento", "10% de descuento", "15% de descuento", "20% de descuento"] const paymentMethodOptions = ["Pagos Via Izipay", "Pagos Via Multiple 3", "Pagos Via OpenPay Peru"] const installmentOptions = [1, 2, 3, 4, 5, 6, 7, 8] const saleTypes = [ { id: "natural", label: "Persona natural" }, { id: "empresa", label: "Empresa / Institución" }, ] const processData: Record> = { peru: { empresa: [ "Verificar en SUNAT: empresa activa y vigente; validar PLAME (>=10 trab. para 1 alumno; >=20 para 2+).", "Evaluar solvencia en Sentinel: sin deudas/protestos; semáforo verde; buen historial 12 meses.", "Solicitar documentación: Ficha RUC (≤30 días), Vigencia de servicio firmada; cláusula de obligación de pago si aplica; acordar emisión de factura/fecha.", "Llamada de revalidación: modalidad, participantes, fecha(s) de pago, contacto encargado de pagos.", "Confirmación por correo: si cumple requisitos, registrar en Fase IS y continuar con proceso.", ], natural: [ "Seleccionar método de pago disponible en la sede.", "Si es link de pago: solicitar al coordinador (Finanzas lo genera) por monto/moneda.", "Si es depósito/transferencia: compartir cuenta y CCI/CLABE/Swift según sede y moneda.", "Si es plataforma: ingresar a bsginstitute.com/login con accesos habilitados y pagar monto del cronograma.", "Recibir comprobante/pantallazo; registrar operación en sistema (n° operación/fecha/monto).", "Verificar conciliación con Finanzas; actualizar fase del cliente.", ], }, } const paymentMethodsData: Record> = { peru: [ { method: "Links de pago (local)", detail: "Solicitar a coordinador; Finanzas genera link por monto/moneda (S/ o US$).", }, { method: "Link internacional 2CO (US$)", detail: "Solo pagos en dólares; solicitar a coordinador." }, { method: "Depósito/Transferencia BN (S/)", detail: "CC: 011-0320-0100131737-17 | CCI: 011-220-000100131737-17" }, { method: "Depósito/Transferencia Scotiabank (S/)", detail: "CC: 000-4654102 | CCI: 009-313-000004654102-85" }, { method: "Pago de servicios BCP (S/ y US$)", detail: "Vía banca web/móvil, ventanilla o agente. Código agente S/: 18185.", }, { method: "Telecrédito BCP", detail: "S/: 215-1863341-0-42 | US$: 215-1870934-1-48" }, { method: "Transferencias interbancarias BCP", detail: "CCI S/: 002215001863341042220 | CCI US$: 002215001870934148223", }, { method: "Transferencia internacional", detail: "Swift: BCPLPEPL | Cuenta US$: 215-1870934-1-48" }, { method: "Yape", detail: "N° 992 651 774" }, { method: "Plataforma", detail: "bsginstitute.com/login (monto según cronograma)" }, ], } const getCurrentSteps = () => { if (!selectedCountry || !selectedSaleType) return [] return processData[selectedCountry]?.[selectedSaleType] || [] } const getCurrentPaymentMethods = () => { if (!selectedCountry) return [] return paymentMethodsData[selectedCountry] || [] } const toggleStepCompletion = (stepIndex: number) => { const newCompletedSteps = new Set(completedSteps) if (selectedSaleType === "empresa") { // Para empresa: todos los pasos son independientes y secuenciales if (newCompletedSteps.has(stepIndex)) { newCompletedSteps.delete(stepIndex) } else { newCompletedSteps.add(stepIndex) } } else if (selectedSaleType === "natural") { // Para persona natural: mantener lógica de opciones mutuamente excluyentes if (stepIndex === 0 || stepIndex === 4 || stepIndex === 5) { // Pasos independientes (1, 5, 6) if (newCompletedSteps.has(stepIndex)) { newCompletedSteps.delete(stepIndex) } else { newCompletedSteps.add(stepIndex) } } else if (stepIndex >= 1 && stepIndex <= 3) { // Pasos mutuamente excluyentes (2a, 2b, 2c) // Limpiar todas las opciones de pago primero newCompletedSteps.delete(1) newCompletedSteps.delete(2) newCompletedSteps.delete(3) // Si se hace clic en la opción ya seleccionada, deseleccionarla if (selectedPaymentOption === stepIndex) { setSelectedPaymentOption(null) } else { // Seleccionar la nueva opción newCompletedSteps.add(stepIndex) setSelectedPaymentOption(stepIndex) } } } setCompletedSteps(newCompletedSteps) } const handleSaleTypeChange = (saleTypeId: string) => { setSaleType(saleTypeId) setCompletedSteps(new Set()) setSelectedPaymentOption(null) } const getStepNumber = (index: number) => { if (selectedSaleType === "empresa") { // Para empresa: numeración secuencial simple return (index + 1).toString() } else if (selectedSaleType === "natural") { // Para persona natural: mantener lógica de 2a, 2b, 2c if (index === 0) return "1" if (index >= 1 && index <= 3) return "2" if (index === 4) return "3" if (index === 5) return "4" } return (index + 1).toString() } const getStepPrefix = (index: number) => { if (selectedSaleType === "natural" && index >= 1 && index <= 3) { const options = ["a", "b", "c"] return `2${options[index - 1]}` } return "" } const processSteps = getCurrentSteps() const paymentMethods = getCurrentPaymentMethods() // Verificar si todos los campos requeridos están completos useEffect(() => { setIsFormComplete( selectedVersion !== "" && paymentType !== "" && selectedDiscount !== "" && selectedPaymentMethod !== "", ) }, [selectedVersion, paymentType, selectedDiscount, selectedPaymentMethod]) // Función para cerrar los dropdowns al hacer clic fuera de ellos useEffect(() => { function handleClickOutside(event: MouseEvent) { // No longer need to close priceDropdownRef or discountTypeDropdownRef as they are not used if (paymentMethodDropdownRef.current && !paymentMethodDropdownRef.current.contains(event.target as Node)) { setPaymentMethodDropdownOpen(false) } if (versionDropdownRef.current && !versionDropdownRef.current.contains(event.target as Node)) { setVersionDropdownOpen(false) } if (discountDropdownRef.current && !discountDropdownRef.current.contains(event.target as Node)) { setDiscountDropdownOpen(false) } if (numPagosDropdownRef.current && !numPagosDropdownRef.current.contains(event.target as Node)) { setNumPagosDropdownOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Establecer número de cuotas por defecto cuando cambia el tipo de pago useEffect(() => { if (paymentType === "Crédito") { setNumberOfInstallments(4) } else { setNumberOfInstallments(1) } }, [paymentType]) // Función para calcular los costos basados en las selecciones useEffect(() => { if (selectedVersion && paymentType) { // Determinar el costo base según la versión seleccionada let basePrice = 0 if (selectedVersion === "Versión Profesional") { basePrice = paymentType === "Contado" ? 1690 : 1770 } else if (selectedVersion === "Versión Gerencial") { basePrice = paymentType === "Contado" ? 1890 : 1970 } setTotalCost(basePrice) // Calcular descuento basado en la opción seleccionada let discountPercentage = 0 if (selectedDiscount && selectedDiscount !== "Sin descuento") { const match = selectedDiscount.match(/(\d+)%/) discountPercentage = match ? Number.parseInt(match[1]) / 100 : 0 } const discount = basePrice * discountPercentage setDiscountAmount(discount) setDiscountedCost(basePrice - discount) } }, [selectedVersion, paymentType, selectedDiscount]) // Mostrar el cronograma de pagos cuando se seleccionan versión y tipo de pago useEffect(() => { if (selectedVersion && paymentType) { const today = new Date() const schedule: Array<{ cuota: string; fecha: string; monto: number }> = [] // Determinar el costo base según la versión seleccionada let basePrice = 0 if (selectedVersion === "Versión Profesional") { basePrice = paymentType === "Contado" ? 1690 : 1770 } else if (selectedVersion === "Versión Gerencial") { basePrice = paymentType === "Contado" ? 1890 : 1970 } setTotalCost(basePrice) // Calcular descuento basado en la opción seleccionada let discountPercentage = 0 if (selectedDiscount && selectedDiscount !== "Sin descuento") { const match = selectedDiscount.match(/(\d+)%/) discountPercentage = match ? Number.parseInt(match[1]) / 100 : 0 } const discount = basePrice * discountPercentage setDiscountAmount(discount) setDiscountedCost(basePrice - discount) // Guardar el total original para comparaciones setOriginalTotal(basePrice - discount) // Generar cronograma según tipo de pago if (paymentType === "Contado") { // Para contado, un solo pago schedule.push({ cuota: "Pago único", fecha: formatDate(today), monto: basePrice - discount, }) } else { // Para crédito, matrícula y cuotas según el número seleccionado const matriculaAmount = (basePrice - discount) * 0.2 // 20% del total para matrícula schedule.push({ cuota: "Matrícula", fecha: formatDate(today), monto: Math.round(matriculaAmount * 100) / 100, }) // Generar el número de cuotas seleccionado const installmentAmount = Math.round(((basePrice - discount - matriculaAmount) / numberOfInstallments) * 100) / 100 for (let i = 1; i <= numberOfInstallments; i++) { const nextMonth = new Date(today) nextMonth.setMonth(today.getMonth() + i) schedule.push({ cuota: `Cuota - ${i}`, fecha: formatDate(nextMonth), monto: installmentAmount, }) } } setPaymentSchedule(schedule) setShowPaymentSchedule(true) // Calcular el total actual const total = schedule.reduce((sum, item) => sum + item.monto, 0) setCurrentTotal(total) } else { setShowPaymentSchedule(false) } }, [selectedVersion, paymentType, selectedDiscount, numberOfInstallments]) // Actualizar el total actual cuando cambia el cronograma de pagos useEffect(() => { const total = paymentSchedule.reduce((sum, item) => sum + item.monto, 0) setCurrentTotal(total) }, [paymentSchedule]) // Función para formatear fechas como DD/MM/YYYY const formatDate = (date: Date): string => { const day = date.getDate().toString().padStart(2, "0") const month = (date.getMonth() + 1).toString().padStart(2, "0") const year = date.getFullYear() return `${day}/${month}/${year}` } // Función para formatear montos con el código de moneda const formatAmount = (amount: number): string => { return `${currencyCode} ${amount.toFixed(2)}` } // Verificar si hay descuento const hasDiscount = discountAmount > 0 // Función para manejar el guardado del cronograma const handleSaveSchedule = () => { if (isFormComplete) { // Aquí iría la lógica para guardar el cronograma console.log("Cronograma guardado:", { version: selectedVersion, paymentType, discount: selectedDiscount, paymentMethod: selectedPaymentMethod, schedule: paymentSchedule, }) // Mostrar alguna notificación de éxito alert("Cronograma guardado exitosamente") } } // Calcular la diferencia entre el total original y el actual const totalDifference = originalTotal - currentTotal const isTotalCorrect = Math.abs(totalDifference) < 0.01 // Consideramos correcto si la diferencia es menor a 0.01 const getTotalSteps = () => { if (selectedSaleType === "empresa") { return processSteps.length } else if (selectedSaleType === "natural") { // Para persona natural: 4 pasos reales (1, 2 con opciones a/b/c, 3, 4) return 4 } return processSteps.length } const getCompletedStepsCount = () => { if (selectedSaleType === "empresa") { return completedSteps.size } else if (selectedSaleType === "natural") { let count = 0 // Paso 1 if (completedSteps.has(0)) count++ // Paso 2 (cualquiera de 2a, 2b, 2c) if (completedSteps.has(1) || completedSteps.has(2) || completedSteps.has(3)) count++ // Paso 3 if (completedSteps.has(4)) count++ // Paso 4 if (completedSteps.has(5)) count++ return count } return completedSteps.size } return ( <>

Configuración de Cronograma de Pagos

{/* Segunda columna - Now on the LEFT */}

Versión

{ e.stopPropagation() setVersionDropdownOpen(!versionDropdownOpen) setDiscountDropdownOpen(false) setPaymentMethodDropdownOpen(false) setNumPagosDropdownOpen(false) }} > {selectedVersion || "Selecciona la versión"}

{versionDropdownOpen && (

{versionOptions.map((option, index) => (

{ e.stopPropagation() setSelectedVersion(option) setVersionDropdownOpen(false) }} > {option}

))}

)}

Pago

setPaymentType("Contado")} className="h-4 w-4 text-blue-600" /> Contado setPaymentType("Crédito")} className="h-4 w-4 text-blue-600" /> Crédito

{/* Nuevo campo N° Pagos - Solo visible cuando se selecciona Crédito */} {paymentType === "Crédito" && (

N° de Cuotas

{ e.stopPropagation() setNumPagosDropdownOpen(!numPagosDropdownOpen) setVersionDropdownOpen(false) setDiscountDropdownOpen(false) setPaymentMethodDropdownOpen(false) }} > {numberOfInstallments}

{numPagosDropdownOpen && (

{[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (

{ e.stopPropagation() setNumberOfInstallments(num) setNumPagosDropdownOpen(false) }} > {num}

))}

)}

Descuento

{ e.stopPropagation() setDiscountDropdownOpen(!discountDropdownOpen) setVersionDropdownOpen(false) setPaymentMethodDropdownOpen(false) setNumPagosDropdownOpen(false) }} > {selectedDiscount || "Seleccione Descuento"}

{discountDropdownOpen && (

{discountOptions.map((option, index) => (

{ e.stopPropagation() setSelectedDiscount(option) setDiscountDropdownOpen(false) }} > {option}

))}

)}

Medio de pago

{ e.stopPropagation() setPaymentMethodDropdownOpen(!paymentMethodDropdownOpen) setDiscountDropdownOpen(false) setVersionDropdownOpen(false) setNumPagosDropdownOpen(false) }} > {selectedPaymentMethod || "Seleccione"}

{paymentMethodDropdownOpen && (

{paymentMethodOptions.map((option, index) => (

{ e.stopPropagation() setSelectedPaymentMethod(option) setPaymentMethodDropdownOpen(false) }} > {option}

))}

)}

{/* Primera columna - Now on the RIGHT */} {selectedVersion && (

{/* Solo mostrar el costo con descuento si hay un descuento aplicado */} {hasDiscount && (

Costo total con descuento

{`${currencyCode} ${totalCost.toFixed(2)}`} {`${currencyCode} ${discountedCost.toFixed(2)}`}

)}

Costo total sin descuento

{`${currencyCode} ${totalCost.toFixed(2)}`}

{hasDiscount && (

Monto de Descuento Otorgado

{`${currencyCode} ${discountAmount.toFixed(2)}`}

)}

{showPaymentSchedule && (

{/* Cabecera del cronograma - Ya no es expandible/contraíble */}

Cronograma de Pagos

{/* Contenido del cronograma - Siempre visible */}

{paymentSchedule.map((payment, index) => ( ))} {/* Fila del total */}

Cuota	Fecha de pago	Monto	Fraccionar	Eliminar
{payment.cuota}	{editingDate === index ? ( setTempDate(e.target.value)} className="px-2 py-1 border border-gray-300 rounded text-sm" /> ) : ( {payment.fecha} )}	{editingAmount === index ? ( setTempAmount(e.target.value)} className="px-2 py-1 border border-gray-300 rounded text-sm w-24" step="0.01" /> ) : ( {hasDiscount ? ( {`${currencyCode} ${(payment.monto * 1.1).toFixed(2)}`} {`${currencyCode} ${payment.monto.toFixed(2)}`} ) : ( {`${currencyCode} ${payment.monto.toFixed(2)}`} )} )}
TOTAL		{`${currencyCode} ${currentTotal.toFixed(2)}`} {!isTotalCorrect && totalDifference > 0 && ( {`Faltan ${currencyCode} ${totalDifference.toFixed(2)}`} )} {!isTotalCorrect && totalDifference < 0 && ( {`Exceso de ${currencyCode} ${Math.abs(totalDifference).toFixed(2)}`} )}

{/* Botón de guardar centrado - Deshabilitado si el formulario no está completo */}

)} {/* PROCESO DE PAGO */}

PROCESO DE PAGO

{/* PASO 1: CONFIGURAR PROCESO DE PAGO */}

Paso 1: Configurar proceso de pago

Tipo de venta

{saleTypes.map((saleType) => (

{ if (checked) { handleSaleTypeChange(saleType.id) } else { handleSaleTypeChange("") } }} /> {saleType.label}

))}

{/* PASO 2: VER PROCESO PASO A PASO */}

{"Paso 2: Ver proceso paso a paso"}

{processSteps.length > 0 && (

{getCompletedStepsCount()} de {getTotalSteps()} completados

)}

{processSteps.length > 0 ? processSteps.map((step, index) => ( )) : Array.from({ length: 8 }, (_, i) => ( ))}

	N°	Descripción
toggleStepCompletion(index)} className="mx-auto" />	{selectedSaleType === "natural" && index >= 1 && index <= 3 ? getStepPrefix(index) : getStepNumber(index)}	= 1 && index <= 3 && selectedPaymentOption !== null && selectedPaymentOption !== index ? "text-gray-300" : "text-gray-600" }`} > {step}
	{i + 1}	Seleccione tipo de venta para ver los pasos

{/* PASO 3: MÉTODOS DE PAGO POR SEDE */}

Paso 3: Métodos de pago por sede

{paymentMethods.length > 0 ? paymentMethods.map((payment, index) => ( )) : Array.from({ length: 6 }, (_, i) => ( ))}

Método	Detalle
{payment.method}	{payment.detail}
Métodos de pago disponibles para Perú

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/program-summary.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Search, XCircle, Calendar, Award } from "lucide-react" // Datos de áreas y subáreas const areaOptions = [ "Cloud", "Marketing Digital", "Inteligencia Artificial", "Excel", "Carreras Profesionales", "Compliance", "CETPRO", "Mantenimiento", "Construcción", "Proyectos", "Calidad", "Finanzas", "Minería", "Gestión Ambiental", "Seguridad Alimentaria", "Seguridad y Salud en el Trabajo", "Transformación Digital", "Data Science", "Seguridad de la Información", "Continuidad del Negocio", ] // Mapa de subáreas por área const subareasByArea: Record = { Cloud: ["AWS", "Microsoft", "Azure", "DevOps"], "Marketing Digital": ["SEO", "SEM", "Social Media", "Content Marketing"], "Inteligencia Artificial": ["Machine Learning", "Deep Learning", "NLP", "Computer Vision"], Excel: ["Básico", "Intermedio", "Avanzado", "Macros y VBA"], // Otras subáreas para las demás áreas } // Datos de programas const programsData = [ { nombre: "Curso de AWS Certified Solutions Architect - Associate", duracion: "4 Meses", precio: { profesional: { credito: { inicial: 490, cuotas: 6, montoCuota: 230, }, contado: 1690, }, gerencial: { credito: { inicial: 690, cuotas: 6, montoCuota: 230, }, contado: 1890, }, }, certificacion: { profesional: ["Certificación emitida por BSG Institute."], gerencial: [ "Certificación AWS Certified Solutions Architect – Associate emitida por Amazon Web Services. (*)", "Certificación emitida por BSG Institute.", ], nota: "(*) Incluido solo en la versión gerencial. Sujeto a la aprobación del examen correspondiente.", }, area: "Cloud", subarea: "AWS", }, { nombre: "Curso AWS Certified SysOps Administrator - Associate", duracion: "3 Meses", precio: { profesional: { credito: { inicial: 340, cuotas: 5, montoCuota: 195, }, contado: 1190, }, gerencial: { credito: { inicial: 340, cuotas: 5, montoCuota: 240, }, contado: 1390, }, }, certificacion: { profesional: ["Certificación emitida por BSG Institute."], gerencial: [ "Certificación emitida por BSG Institute.", "Certificación Amazon Web Services Certified SysOps Administrator – Associate Level emitida por Amazon (*)", ], nota: "(*) Incluido sólo en la versión gerencial, sujeto a la aprobación del examen: AWS Certified SysOps Administrator - Associate", detalles: [ "Preguntas de selección múltiple y varias respuestas", "130 minutos para completar el examen", "Disponible en inglés", ], }, area: "Cloud", subarea: "AWS", }, { nombre: "AWS Solutions Architect - Associate", duracion: "3 Meses", precio: { profesional: { credito: { inicial: 550, cuotas: 2, montoCuota: 350, }, contado: 1190, }, }, certificacion: { profesional: ["Certificación emitida por BSG Institute."], }, area: "Cloud", subarea: "AWS", }, ] export default function ProgramSummary() { const [selectedArea, setSelectedArea] = useState("Cloud") const [selectedSubarea, setSelectedSubarea] = useState("AWS") const [filteredPrograms, setFilteredPrograms] = useState(programsData) const [showAreaDropdown, setShowAreaDropdown] = useState(false) const [showSubareaDropdown, setShowSubareaDropdown] = useState(false) const [areaSearchTerm, setAreaSearchTerm] = useState("Cloud") const [subareaSearchTerm, setSubareaSearchTerm] = useState("AWS") // Filtrar programas cuando cambian las selecciones useEffect(() => { const filtered = programsData.filter((program) => { const areaMatch = !selectedArea || program.area === selectedArea const subareaMatch = !selectedSubarea || program.subarea === selectedSubarea return areaMatch && subareaMatch }) setFilteredPrograms(filtered) }, [selectedArea, selectedSubarea]) // Actualizar el término de búsqueda cuando se selecciona un área useEffect(() => { setAreaSearchTerm(selectedArea) }, [selectedArea]) // Actualizar el término de búsqueda cuando se selecciona una subárea useEffect(() => { setSubareaSearchTerm(selectedSubarea) }, [selectedSubarea]) // Obtener subáreas disponibles para el área seleccionada const availableSubareas = selectedArea ? subareasByArea[selectedArea] || [] : [] // Limpiar la selección de área const clearAreaSelection = (e) => { e.stopPropagation() setSelectedArea("") setAreaSearchTerm("") setSelectedSubarea("") setSubareaSearchTerm("") setShowAreaDropdown(true) } // Limpiar la selección de subárea const clearSubareaSelection = (e) => { e.stopPropagation() setSelectedSubarea("") setSubareaSearchTerm("") setShowSubareaDropdown(true) } // Filtrar áreas basadas en el término de búsqueda const filteredAreas = areaSearchTerm ? areaOptions.filter((area) => area.toLowerCase().includes(areaSearchTerm.toLowerCase())) : areaOptions // Filtrar subáreas basadas en el término de búsqueda const filteredSubareas = subareaSearchTerm ? availableSubareas.filter((subarea) => subarea.toLowerCase().includes(subareaSearchTerm.toLowerCase())) : availableSubareas return ( <> {/* Barras de búsqueda */}

Área

{ setAreaSearchTerm(e.target.value) if (!showAreaDropdown) setShowAreaDropdown(true) }} onClick={() => setShowAreaDropdown(true)} placeholder="Buscar área..." className="w-full pl-9 pr-8 py-2.5 text-sm text-gray-700 bg-transparent outline-none" /> {areaSearchTerm && ( )}

{showAreaDropdown && (

{filteredAreas.length > 0 ? ( filteredAreas.map((area) => ( )) ) : (

No se encontraron áreas

)}

Sub Área

{ setSubareaSearchTerm(e.target.value) if (!showSubareaDropdown) setShowSubareaDropdown(true) }} onClick={() => setShowSubareaDropdown(true)} placeholder="Buscar subárea..." className="w-full pl-9 pr-8 py-2.5 text-sm text-gray-700 bg-transparent outline-none" /> {subareaSearchTerm && ( )}

{showSubareaDropdown && availableSubareas.length > 0 && (

{filteredSubareas.length > 0 ? ( filteredSubareas.map((subarea) => ( )) ) : (

No se encontraron subáreas

)}

{/* Tabla de Programas Disponibles con el estilo del Cronograma de Asesor */}

{/* Cabecera del cronograma - Estilo igual al Cronograma de Asesor */}

Programas Disponibles

{/* Contenido de la tabla */}

{filteredPrograms.map((program, programIndex) => { // Create rows for each version const rows = [] // Professional version row rows.push( {/* Program name - only show on first row with rowspan */} {/* Version column */} {/* Price column */} {/* Certification column */} , ) // Managerial version row (if exists) if (program.precio.gerencial) { rows.push( {/* Version column */} {/* Price column */} {/* Certification column */} , ) } return rows })}

Nombre Programa	Versión	Precio	Certificación
{program.nombre} {program.duracion} Curso	Profesional	Crédito: 1 Cuota inicial de USD{" "} {program.precio.profesional.credito.inicial} y {program.precio.profesional.credito.cuotas}{" "} cuotas mensuales desde USD {program.precio.profesional.credito.montoCuota}. Contado: USD {program.precio.profesional.contado}.	{program.certificacion.profesional.map((cert, i) => ( {cert} ))}
Gerencial	Crédito: 1 Cuota inicial de USD{" "} {program.precio.gerencial.credito.inicial} y {program.precio.gerencial.credito.cuotas}{" "} cuotas mensuales desde USD {program.precio.gerencial.credito.montoCuota}. Contado: USD {program.precio.gerencial.contado}.	{program.certificacion.gerencial.map((cert, i) => ( {cert} ))} {program.certificacion.nota && ( {program.certificacion.nota} )} {program.certificacion.detalles && ( Detalles del examen: {program.certificacion.detalles.map((detalle, i) => ( {detalle} ))} )}

Nombre Programa

Versión

Precio

Certificación

{program.nombre}

{program.duracion} Curso

Profesional

Crédito: 1 Cuota inicial de USD{" "} {program.precio.profesional.credito.inicial} y {program.precio.profesional.credito.cuotas}{" "} cuotas mensuales desde USD {program.precio.profesional.credito.montoCuota}.
Contado: USD {program.precio.profesional.contado}.

{cert}

Gerencial

Crédito: 1 Cuota inicial de USD{" "} {program.precio.gerencial.credito.inicial} y {program.precio.gerencial.credito.cuotas}{" "} cuotas mensuales desde USD {program.precio.gerencial.credito.montoCuota}.
Contado: USD {program.precio.gerencial.contado}.

{cert}

{program.certificacion.nota && (

{program.certificacion.nota}

)} {program.certificacion.detalles && (

Detalles del examen:

{detalle}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/navigation-tabs.tsx" isQuickEdit="true" isMerged="true" "use client" import { MessageSquare, Edit, Users, Calendar, FileText, Info, File, HelpCircle } 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() return (

{tabs.map((tab) => { // Determinar las clases según el ID del tab o la criticidad let bgClass, iconBgClass // Asignar colores específicos a tabs particulares if (tab.id === "paymentSchedule") { // Cronograma de pagos - azul 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.id === "programDocs" || tab.id === "programSummary") { // Documentos del programa y Resumen programas - verde 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 === "high") { // Alta criticidad - mantener color actual 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") { // Media criticidad - mantener color actual 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") { // Baja criticidad - mantener color actual 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" } else { // Sin criticidad específica - mantener color actual bgClass = activeTab === tab.id ? "bg-purple-700 text-white" : "bg-purple-100 text-purple-800 hover:bg-purple-200" iconBgClass = activeTab === tab.id ? "bg-purple-600" : "bg-purple-200" } // Obtener el icono correspondiente let icon switch (tab.id) { case "speech": icon = break case "editPersonalData": icon = break case "competitors": icon = break case "paymentSchedule": icon = break case "programSummary": icon = break case "programInfo": icon = break case "programDocs": icon = break case "faq": icon = break default: icon = } return ( ) })}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/fase2-content.tsx" isQuickEdit="true" 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 (

FASE 2: VALIDACION DE PERFIL Y FILTRADO DE PROSPECTOS

{/* Tabs Navigation */}

{activeTab === "validar-perfil" && } {activeTab === "identificar-objetivo" && } {activeTab === "verificar-semaforo" && } {activeTab === "verificar-historial" && } {activeTab === "oportunidades" && }

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase3-presentacion-programa/fase3-presentacion-programa-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Presentation, Trophy, AlertCircle, CheckSquare, Check } from "lucide-react" import { useMotivation } from "../../contexts/motivation-context" const motivationContentMap: Record< string, { sections: { title: string items: string[] }[] } > = { Certificarse: { sections: [ { title: "Garantía / confiabilidad:", items: [ "CasPartner/ATP oficial, materiales/docentes aprobados.", "Reviews públicas + estadísticas de satisfacción en Google, Facebook y sitio web.", "Política de devoluciones y clase demo", ], }, { title: "Parte técnica — centrada en la preparación para la certificación:", items: [ "Contenidos alineados a la ruta de certificación.", "Material oficial y actualización inmediata ante cambios del examen.", "Simulador oficial con analítica de desempeño y focos de mejora.", "Soporte para el proceso de certificación.", 'Docentes certificados con "tips" frecuentes del examen.', ], }, { title: "Demostración de valor:", items: [ "Reconocimiento global: movilidad laboral internacional.", "Incremento salarial y elegibilidad a roles senior/lead tras certificar.", "Mayor probabilidad de aprobar en el primer intento con plan + simulacros.", ], }, ], }, Desarrollo: { sections: [ { title: "Garantía / confiabilidad:", items: [ "BSG: 20+ años, presencia LatAm, políticas transparentes.", "Historias de éxito y referencias directas de egresados.", "Continuidad post-programa (comunidad/acompañamiento hasta certificación).", ], }, { title: "Parte técnica — centrada en los objetivos del programa (competencias a desarrollar para asumir un rol de liderazgo técnico):", items: [ "Mapa de competencias orientadas a un rol (ej. PM/Lead/Architect).", "Proyecto integrador.", "Módulos enfocados a desarrollar habilidades de liderazgo (conocimiento técnico + gestión del cambio).", "Networking: comunidad LatAm de egresados; docentes de empresas líderes.", "Modalidad y calendario compatibles con agenda ejecutiva; acceso extendido.", "Seguimiento personalizado de asesor académico.", ], }, { title: "Demostración de valor:", items: [ "Acceso a rangos salariales superiores y proyectos de mayor impacto.", "Marca personal y networking que abre puertas (visibilidad en LinkedIn/ATS).", "Credencial habilitadora para promociones/cambios de línea de carrera estratégicos.", ], }, ], }, Aplicar: { sections: [ { title: "Garantía / confiabilidad:", items: [ "Casos aplicados al sector laboral del prospecto.", "Reviews públicas + métricas de satisfacción en Google, Facebook y sitio web.", "Listado de softwares, laboratorios y plataformas a usar en el programa.", ], }, { title: "Parte técnica — centrada en metodología y proyecto integrador:", items: [ "Project-based learning: proyecto integrador aplicado al problema real del puesto con rúbricas de impacto/KPIs y defensa técnica/negocio (board review).", "Tareas revisadas por pares para transferencia efectiva al entorno laboral.", "Uso de herramientas y softwares predominantes del mercado integradas en el curso (Jira, Power BI, Revit, AWS, etc.).", "Laboratorios guiados (cloud/BIM/data/OT-IoT/ciberseguridad...).", "Modalidad y calendario: vivo + grabado, minutado por temas; acceso offline cuando aplique.", "Soporte de asesor académico.", ], }, { title: "Demostración de valor:", items: [ "ROI operativo: menos retrabajo/errores en actividades laborales; mejora de KPIs en el trabajo del cliente en 8–12 semanas.", "Aplicabilidad inmediata a entorno laboral.", "Portafolio verificable de proyectos aplicados para entrevistas/ascensos internos.", ], }, ], }, Aprender: { sections: [ { title: "Garantía / confiabilidad:", items: [ "Docentes en ejercicio y certificados (PMP, AWS, ISO LA, etc.).", "Indicadores altos de satisfacción (puntuación promedio y % recomendación exalumnos).", "Clase de prueba / muestra grabada para validar nivel y dinámica.", ], }, { title: "Parte técnica — centrada en la estructura curricular (malla):", items: [ "Malla modular por rol/industria; progresión fundamentos → avanzado sin lagunas.", "Ruta explícita de competencias (qué sabrá/hará al terminar).", "Metodología académica: project-based learning; evaluación continua (quizzes, evaluaciones, tareas, proyectos) con feedback accionable.", "Práctica guiada: laboratorios y simulaciones; integración de herramientas (p. ej., Power BI, Revit, AWS Console).", "Recursos: simuladores, software.", "Modalidad y calendario: clases online en vivo + grabadas, acceso extendido post-curso.", "Acompañamiento: asesor académico, y tutor IA 24×7.", ], }, { title: "Demostración de valor:", items: [ "Calidad académica y vigencia: alineado a estándares/marcos (PMBOK/ISO/ITIL/BIM/Cloud).", "Aprendizaje activo (labs/role-plays) que acelera el dominio real, no solo teoría.", "Curva de aprendizaje guiada con feedback y refuerzo adaptativo (tareas y proyectos aplicados).", ], }, ], }, Superación: { sections: [ { title: "Garantía / confiabilidad:", items: [ "Reviews públicas + estadísticas de satisfacción en Google, Facebook y sitio web.", "Historias de éxito y referencias directas de egresados.", "Soporte cercano y seguimiento desde la primera clase.", ], }, { title: "Parte técnica — centrada en metodología y flexibilidad:", items: [ "Modalidad online en vivo + grabadas, minutado por temas y acceso extendido.", "Diseño de carga realista (p. ej., 3-4 h/semana) con resúmenes IA.", "Tutor IA 24×7 + asesor académico para planificar sin sacrificar familia/descanso.", "Reprogramación/pausas y alternativas de cambio de grupo ante imprevistos.", "Plan de pagos flexible (matrícula fraccionada, cuotas sin interés, medios locales).", "Clase demo para validar ritmo y exigencia antes de decidir.", ], }, { title: "Demostración de valor:", items: [ "ROI salarial y bienestar: mejores condiciones/ingresos.", "Flexibilidad real sin perder exigencia (vivo + grabado, acceso por temas).", "Logro personal con certificación internacional que genera crecimiento profesional.", ], }, ], }, } export default function Fase3PresentacionProgramaContent() { const [activeTab, setActiveTab] = useState("presentacion-programa") const { selectedMotivations } = useMotivation() const motivationContent = selectedMotivations .map((motivation) => ({ name: motivation.name, priority: motivation.priority, content: motivationContentMap[motivation.name], })) .filter((item) => item.content) .sort((a, b) => { // Principal comes before Secundaria if (a.priority === "Principal" && b.priority === "Secundaria") return -1 if (a.priority === "Secundaria" && b.priority === "Principal") return 1 return 0 }) const successStories = [ { name: "María González", role: "Ingeniera de Software", testimonial: "Cuando empecé el programa de AWS Solutions Architect, trabajaba como desarrolladora junior y sentía que necesitaba dar el siguiente paso en mi carrera. Lo que más me gustó fue que todo el contenido estaba alineado con el examen de certificación real, y los simuladores me ayudaron a identificar exactamente dónde necesitaba mejorar. Me certifiqué en el primer intento, y a los dos meses mi empresa me promovió a Senior Engineer con un aumento del 35%. Ahora lidero proyectos de migración a la nube para clientes internacionales, algo que antes ni siquiera imaginaba posible.", }, { name: "Carlos Ramírez", role: "Project Manager", testimonial: "Llevaba años gestionando proyectos pequeños, pero sabía que sin la certificación PMP no iba a poder acceder a proyectos más grandes. El programa me dio exactamente lo que necesitaba: metodología práctica con casos reales que pude aplicar inmediatamente en mi trabajo. Los docentes eran profesionales activos que compartían experiencias del día a día, no solo teoría. A los tres meses de terminar, me ofrecieron dirigir un proyecto de $2M para una multinacional. Fue el mejor retorno de inversión que he tenido en mi carrera.", }, { name: "Ana Martínez", role: "Analista de Datos", testimonial: "Como madre de dos hijos pequeños, pensé que nunca iba a poder hacer una transición a Data Science. Pero el diseño del programa con clases grabadas y carga de 3-4 horas semanales me permitió estudiar después de acostar a los niños sin sacrificar tiempo con mi familia. El tutor IA 24/7 fue un salvavidas cuando tenía dudas a las 11 de la noche. Hoy trabajo como Data Scientist con 40% más de salario y modalidad 100% remota. La flexibilidad del programa literalmente cambió mi vida profesional y personal.", }, ] const programLimitations = [ "Primero, aunque ofrecemos flexibilidad en el aprendizaje en línea, sugerimos que para que puedas tener una mejor experiencia de aprendizaje asistas a todas las sesiones.", "Segundo, nuestro programa está diseñado principalmente para ingenieros en roles técnicos; aquellos en roles muy administrativos pueden encontrar que ciertos módulos no son tan aplicables.", "Finalmente, aunque proporcionamos apoyo continuo, recomendamos una dedicación mínima de 5 horas por semana para obtener los mejores resultados. ¿Estas limitaciones afectarían tu capacidad para participar del programa?", ] const preValidationObjections = [ { label: "Horario", question: "¿El horario está ok o necesita ajustes?", followUp: "¿qué ajuste haríamos?", }, { label: "Fecha de inicio", question: "¿La fecha de inicio te acomoda?", followUp: "¿tendrías que hacer algún ajuste?", }, { label: "Contenido", question: "Podríamos decir que el contenido te resulta muy / medianamente / poco alineado a lo que buscas", followUp: "¿qué tema te faltaría?", }, { label: "Certificación", question: "¿Del 1 al 10 qué tan alineada está la certificación con lo que necesitas?", followUp: "¿qué te faltaría para subirlo?", }, { label: "Modalidad", question: "¿Con la modalidad online en vivo estamos OK?", followUp: "¿Quieres probar una clase demo o ver un video grabado de una clase?", }, { label: "Calidad", question: "¿Todo ok con el nivel de profundidad del programa, la calidad de los materiales y de los expositores?", followUp: "¿qué evidencia adicional te podría proporcionar para que te sientas 100% seguro?", }, ] const principalMotivation = motivationContent.find((item) => item.priority === "Principal") return (

FASE 3: PRESENTACIÓN DEL PROGRAMA (nueva fase)

{/* Tabs Navigation */}

{activeTab === "presentacion-programa" && (

{selectedMotivations.length === 0 ? (

Por favor, selecciona al menos una motivación en el{" "} PASO 2.2: Identificar objetivo del cliente para ver las opciones de programa disponibles.

) : (

{/* Principal Motivation - Only Display */} {principalMotivation && (

Motivación: {principalMotivation.name}{" "} {principalMotivation.priority}

{principalMotivation.content.sections.map((section, sectionIndex) => (

{section.title}

➤ {item}

))}

)}

)} {activeTab === "historias-exito" && (

"Ahora que he comprendido mejor cuáles son tus objetivos profesionales y cómo nuestro programa puede ayudarte en ese sentido te comento [nombre del cliente], me gustaría compartir contigo brevemente cómo hemos ayudado a otros profesionales con tu perfil a alcanzar sus metas con este programa."

{successStories.map((story, index) => (

{story.role} , {story.name}

"{story.testimonial}"

{/* Add horizontal divider between testimonials, but not after the last one */} {index < successStories.length - 1 &&

}

))}

)} {activeTab === "limitaciones-programa" && (

"[Nombre del cliente] para asegurar una completa transparencia, quiero compartir contigo algunas limitaciones que hemos identificado en nuestro programa."

➤ {limitation}

)} {activeTab === "pre-validacion-objeciones" && (

"[Nombre del cliente] llegados a este punto quiero hacer una verificación rápida de que no ha quedado alguna duda sobre el programa:"

{preValidationObjections.map((objection, index) => (

{objection.label}

{objection.question}

— {objection.followUp}

{/* Add horizontal divider between objections, but not after the last one */} {index < preValidationObjections.length - 1 &&

}

))}

"Antes de avanzar, ¿hay algo más que te haga dudar en este momento?"

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase4-presentacion-inversion/fase4-presentacion-inversion-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Award, DollarSign, AlertTriangle, Check } from "lucide-react" import { useMotivation } from "../../contexts/motivation-context" const aspectosDiferenciadoresMap: Record< string, { items: string[] } > = { Desarrollo: { items: [ "ROI (incremento salarial, más opciones de movilidad y promociones aceleradas).", "Certificación (abre la puerta para acceder a roles senior).", "Mejora de marca personal y networking (comunidad LatAm, visibilidad en LinkedIn).", ], }, Superacion: { items: [ "Reducción del riesgo (evidencia de satisfacción de exalumnos, testimonios verificables en Google, AdWords y Sitio Web, garantía de devolución y clase de prueba).", "Flexibilidad y conveniencia (clases online en vivo/noches, grabadas, plan de pagos en cuotas sin interés).", "ROI (mejores condiciones y empleabilidad que impactan calidad de vida).", ], }, Aprender: { items: [ "Calidad académica del programa (cobertura de temas, metodología activa, actualización a estándares internacionales).", "Aplicabilidad del programa (casos reales, proyectos integradores, cómo implementarlo en tu empresa).", "Soporte personalizado (asesor académico, tutor IA 24x7, seguimiento proactivo).", ], }, Certificarse: { items: [ "Certificación (reconocimiento global).", "ROI (mejora salarial post-certificación, elegibilidad a roles senior).", "Confianza (partner oficial/ATP, materiales y docentes aprobados; trayectoria BSG en LatAm).", ], }, Aplicar: { items: [ "Aplicabilidad del programa (mejores prácticas vigentes, KPIs de negocio, proyecto integrador aplicado).", "Calidad académica del programa (simuladores, laboratorios; profundidad y diversidad de contenidos).", "ROI laboral inmediata para el participante (mejoras en productividad y KPIs; mejora de procesos).", ], }, } const argumentosPerdidaMap: Record< string, { items: string[] } > = { Certificarse: { items: [ "Postergación de la certificación: mover la preparación posterga la primera fecha viable para obtener la certificación en varios meses.", "Perdida de competitividad laboral: sin certificación, el prospecto cae en el ranking de candidatos para posiciones de mayor liderazgo.", "Perdida de proyectos/oportunidades: sin certificación, el prospecto quedas fuera de licitaciones, convocatorias laborales y/o proyectos de alto potencial.", ], }, Aplicar: { items: [ "Perdida de oportunidades laborales(ventanas que se cierran): llegar sin el conocimiento especifico proveido por el programa te baja de una posición de líder potencial a personal de apoyo.", "Perdida de valor económico directo (ahorros operativos diferidos por la no aplicación de los conocimientos específicos del programa): cada mes sin mejora pospone ahorros.", "Asunción de riesgo y costos evitables: incidentes que se pueden prever a partir de la aplicación de los conocimientos del programa cuestan más que el programa.", ], }, Superacion: { items: [ "Perdida de valor económico directo: ingresos/bonos no capturados por retrasar el desarrollo de las competencias del programa.", "Asunción de riesgo y costos evitables: mantener brechas de competencias a desarrollar en el programa prolonga riesgos e incidencias en el entorno laboral.", "Peligro de obsolescencia y perdida de vigencia laboral: esperar = perder opción de estar a la vanguardia en términos de las competencias a desarrollar en el programa.", ], }, Desarrollo: { items: [ "Perdida de valor económico directo (meses sin incremento salarial): cada mes es un doceavo (1/12) del potencial incremento anual no percibido.", "Perdida de competitividad laboral (estamos en una ventana de escasez de personal con las competencias a desarrollar en el programa): entrar tarde al mercado diluye el valor salarial de las competencias desarrolladas en el programa.", "Perdida de timing: postergar la capacitación pueda dejar fuera al prospecto del aumento/promoción del año.", ], }, Aprender: { items: [ "Peligro de obsolescencia y perdida de vigencia laboral: esperar = perder opción de estar a la vanguardia en términos de las competencias a desarrollar en el programa.", "Perdida de valor económico directo (ahorros operativos diferidos): se prolongan retrabajos, fallas e incidencias debido a la falta del expertise técnico proveido por el programa.", "Perdida de competitividad laboral (peor posición en el pool de candidatos): menos visibilidad hoy = menor ranking mañana.", ], }, } export default function Fase4PresentacionInversionContent() { const [activeTab, setActiveTab] = useState("aspectos-diferenciadores") const { selectedMotivations } = useMotivation() const motivationContent = selectedMotivations .map((motivation) => ({ name: motivation.name, priority: motivation.priority, content: aspectosDiferenciadoresMap[motivation.name], })) .filter((item) => item.content) .sort((a, b) => { if (a.priority === "Principal" && b.priority === "Secundaria") return -1 if (a.priority === "Secundaria" && b.priority === "Principal") return 1 return 0 }) const potentialLossContent = selectedMotivations .map((motivation) => ({ name: motivation.name, priority: motivation.priority, content: argumentosPerdidaMap[motivation.name], })) .filter((item) => item.content) .sort((a, b) => { if (a.priority === "Principal" && b.priority === "Secundaria") return -1 if (a.priority === "Secundaria" && b.priority === "Principal") return 1 return 0 }) const principalMotivation = motivationContent.find((item) => item.priority === "Principal") const secundariaMotivation = motivationContent.find((item) => item.priority === "Secundaria") const principalLoss = potentialLossContent.find((item) => item.priority === "Principal") const secundariaLoss = potentialLossContent.find((item) => item.priority === "Secundaria") return (

FASE 4: PRESENTACIÓN DE LA INVERSIÓN (nueva fase)

{/* Tabs Navigation */}

{activeTab === "aspectos-diferenciadores" && (

{selectedMotivations.length === 0 ? (

Por favor, selecciona al menos una motivación en el{" "} PASO 2.2: Identificar objetivo del cliente para ver los aspectos diferenciadores disponibles.

) : (

{/* Principal Motivation */} {principalMotivation && (

Aspectos diferenciadores: {principalMotivation.name}{" "} {principalMotivation.priority}

Los aspectos diferenciadores más relevantes para este tipo de motivación son:

➤ {aspectItem}

)}

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

"Entiendo que la inversión es una consideración importante para ti [nombre del cliente]. Tenemos tres versiones para poder ofrecerte una solución de financiamiento flexible y adaptada a tus necesidades. En el caso de todas las versiones podemos ofrecerte un plan de pagos en cuotas mensuales sin intereses de acuerdo con tu presupuesto disponible."

{/* Versión Básica */}

Básica

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: [detallar los beneficios asociados a la versión]

{/* Divider */}

{/* Versión Profesional */}

Profesional

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: Todos los beneficios de la versión básica más [detallar los beneficios asociados a la versión]

{/* Divider */}

{/* Versión Gerencial */}

Gerencial

Precio Contado:

[monto]

Precio Crédito:

1 cuota inicial de [monto matrícula] y X cuotas mensuales desde [monto cuota]

Incluye: Todos los beneficios de la versión profesional más [detallar los beneficios asociados a la versión]

{/* Política de devoluciones */}

Para que puedas tener toda la confianza respecto a tu inversión en todas las versiones contamos con una política de devoluciones.

)} {activeTab === "potencial-perdida" && (

{selectedMotivations.length === 0 ? (

Por favor, selecciona al menos una motivación en el{" "} PASO 2.2: Identificar objetivo del cliente para ver los argumentos de pérdida potencial disponibles.

) : (

{/* Principal Loss */} {principalLoss && (

Argumentos de perdida potencial: {principalLoss.name}{" "} {principalLoss.priority}

Los argumentos de perdida más relevantes para este tipo de motivación son:

➤ {lossItem}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/program-info.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Target, BookOpen, Award, Layout, DollarSign, AlertTriangle, Users, FileText, User, ThumbsUp, Search, XCircle, ChevronLeft, ChevronRight, } from "lucide-react" // Importamos los componentes existentes para reutilizarlos import Modalidades from "../fase3/modalidades" import ObjetivosPrograma from "../fase3/objetivos-programa" import EstructuraCurricular from "../fase3/estructura-curricular" import Certificacion from "../fase3/certificacion" import Precio from "../fase3/precio" import Limitaciones from "../fase3/limitaciones" export default function ProgramInfo() { 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) // Function to get the color class for active tabs const getTabColorClass = (tabId) => { // Blue tabs if ( [ "modalidades", "inversion", "beneficios", "presentacion", "objetivos", "estructura-curricular", "certificacion", ].includes(tabId) ) { return "bg-[#2563eb] text-white rounded-t-lg shadow-sm" } // Green tabs else if (["publico-objetivo"].includes(tabId)) { return "bg-[#10b981] text-white rounded-t-lg shadow-sm" } // Yellow tabs else if (["prerrequisitos", "expositores"].includes(tabId)) { return "bg-[#f59e0b] text-white rounded-t-lg shadow-sm" } return "bg-purple-600 text-white rounded-t-lg shadow-sm" // Default fallback } // Function to get the color class for inactive tabs const getInactiveTabColorClass = (tabId) => { // Blue tabs (light blue background) if ( [ "modalidades", "inversion", "beneficios", "presentacion", "objetivos", "estructura-curricular", "certificacion", ].includes(tabId) ) { return "text-[#6419e6] bg-blue-50 hover:bg-blue-100" } else if (["publico-objetivo"].includes(tabId)) { return "text-[#6419e6] bg-green-50 hover:bg-green-100" } else if (["prerrequisitos", "expositores"].includes(tabId)) { return "text-[#6419e6] bg-yellow-50 hover:bg-yellow-100" } return "text-gray-700 hover:bg-white/80" // Default fallback } // 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 que no existen en FASE 3 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 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 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 */}

{ 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 */}

{/* 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/gestion-comercial/agenda/contacto-entrante/[id]/components/fase1/client-info-form.tsx" isQuickEdit="true" 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() // Verificar si clientData existe if (!clientData || !clientData.contactInfo) { return (

Error: No se pudieron cargar los datos del cliente.

) } 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 (

{/* Label side */}

{icon}

{label}

{/* Input side */}

{showCopy && ( )} {hasCall && ( )} {hasMail && ( )} {hasCheck && ( )}

) } return ( {/* Header */} {/* Content */} {isOpen && (

{/* COLUMNA 1 */}

} iconBg="bg-[#e3f2fd]" iconColor="text-[#004fff]" label="Celular 1" value={clientData.contactInfo.mobile1} hasCall={true} hasCheck={true} showCopy={true} isPhoneField={true} /> } iconBg="bg-gray-100" iconColor="text-gray-500" label="Teléfono 1" value={clientData.contactInfo.phone1} showCopy={true} isPhoneField={true} /> } iconBg="bg-blue-50" iconColor="text-blue-500" label="Email 1" value={clientData.contactInfo.email1} hasMail={true} showCopy={true} isPhoneField={false} />

{/* COLUMNA 2 */}

} iconBg="bg-[#e3f2fd]" iconColor="text-[#004fff]" label="Celular 2" value={clientData.contactInfo.mobile2} hasCall={true} hasCheck={true} showCopy={true} isPhoneField={true} /> } iconBg="bg-gray-100" iconColor="text-gray-500" label="Teléfono 2" value={clientData.contactInfo.phone2} showCopy={true} isPhoneField={true} /> } iconBg="bg-gray-100" iconColor="text-gray-500" label="Email 2" value={clientData.contactInfo.email2} showCopy={false} isPhoneField={false} />

)} ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-resumen-contactos.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { AudioPlayerModal } from "@/components/audio-player-modal" export default function SectionResumenContactos() { const [isOpen, setIsOpen] = useState(false) const [audioModal, setAudioModal] = useState<{ isOpen: boolean audioUrl: string callInfo: any }>({ isOpen: false, audioUrl: "", callInfo: null, }) // Datos de ejemplo para la tabla const contactos = [ { id: 1, fechaProgramada: "24/04/2025", fechaRealizada: "-", horaProgramada: "04:06 PM", horaRealizada: "", tipoLlamada: "", duracionTotal: "", duracionConversacion: "", faseInicial: "IP", faseDespues: "", estado: "NO EJECUTADO", comentario: "Sin Comentario", fecha: "", }, { id: 2, fechaProgramada: "23/04/2025", fechaRealizada: "24/04/2025", horaProgramada: "11:00 AM", horaRealizada: "11:12:48 PM", tipoLlamada: "Llamada saliente", duracionTotal: "45 s", duracionConversacion: "", faseInicial: "IP", faseDespues: "IP", estado: "REPROGRAMADO AUT.", comentario: "No responde llamada y se va a buzón de voz", fecha: "No contesta", }, { id: 3, fechaProgramada: "15/04/2025", fechaRealizada: "24/04/2025", horaProgramada: "10:30 AM", horaRealizada: "11:15 AM", tipoLlamada: "Llamada saliente", duracionTotal: "25 s", duracionConversacion: "0:07 s", faseInicial: "IP", faseDespues: "IP", estado: "REPROGRAMADO MAN.", comentario: "Contesta, está ocupado y no puede atender en este momento", fecha: "Horario de trabajo de 9am a 6pm", }, { id: 4, fechaProgramada: "12/04/2025", fechaRealizada: "14/04/2025", horaProgramada: "10:00 AM", horaRealizada: "10:15 AM", tipoLlamada: "Llamada saliente", duracionTotal: "30 s", duracionConversacion: "7:15 m", faseInicial: "IP", faseDespues: "IP", estado: "EJECUTADO", comentario: "Está realmente interesado en el programa pero aún no pudo resolver los problemas para concretar su participación (IP)", fecha: "Necesita pensar mas sobre el programa", }, { id: 5, fechaProgramada: "10/04/2025", fechaRealizada: "11/04/2025", horaProgramada: "04:00 PM", horaRealizada: "04:15 PM", tipoLlamada: "Llamada saliente", duracionTotal: "20 s", duracionConversacion: "15:28 m", faseInicial: "IP", faseDespues: "IP", estado: "EJECUTADO", comentario: "Está realmente interesado en el programa pero aún no pudo resolver los problemas para concretar su participación (IP)", fecha: "Necesita organizar sus gastos primero", }, ] const handleTCClick = (contacto: any) => { // Usar el archivo de audio que acabas de proporcionar setAudioModal({ isOpen: true, audioUrl: "/audio/sample-call-recording.mp3", // Usar archivo existente que funciona callInfo: { fecha: contacto.fechaRealizada, hora: contacto.horaRealizada, duracion: contacto.duracionConversacion, contacto: "Cliente - Llamada de seguimiento", }, }) } const closeAudioModal = () => { setAudioModal({ isOpen: false, audioUrl: "", callInfo: null, }) } // 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 ( Ejecutado ) } else if (estado === "REPROGRAMADO AUT.") { return ( Reprogramado automatico ) } else if (estado === "REPROGRAMADO MAN.") { return ( Reprogramado manual ) } else { return ( Por Ejecutar ) } } const renderDuracionBasica = (total, contactoId, contacto) => { // Si es la primera fila o no hay duración de conversación, no mostramos la etiqueta if (contactoId === 1 || !total) { return null } return ( ) } // Función para renderizar la etiqueta de fase const renderFaseTag = (faseInicial, faseFinal) => { if (!faseInicial || !faseFinal) return null return ( {faseInicial} → {faseFinal} ) } // Función para renderizar etiquetas adicionales (saliente, wavix, tiempo total) const renderEtiquetasAdicionales = (tipoLlamada, contactoId, duracionTotal) => { // Si es la primera fila (id = 1), no mostramos las etiquetas if (contactoId === 1) { return null } const renderSaliente = () => ( Saliente ) const renderTiempoTotal = () => ( T.T {duracionTotal} ) const renderWavix = () => ( wavix ) return (

{tipoLlamada && tipoLlamada.includes("saliente") && renderSaliente()} {duracionTotal && renderTiempoTotal()} {renderWavix()}

) } // Función para renderizar la fecha y hora con etiquetas adicionales const renderFechaHoraCompleto = (contacto) => { return (

P {/* Aplicar color naranja a la fecha y hora programada */} {contacto.fechaProgramada} {contacto.horaProgramada && | {contacto.horaProgramada}}

{contacto.fechaRealizada !== "-" ? ( <> R {/* Aplicar color verde a la fecha y hora realizada */} {contacto.fechaRealizada} {contacto.horaRealizada && | {contacto.horaRealizada}} ) : ( - )}

{renderEtiquetasAdicionales(contacto.tipoLlamada, contacto.id, contacto.duracionTotal)}

) } // Función para renderizar el comentario con el estado y duración básica const renderComentario = (comentario, fecha, contacto) => { // Obtener la etiqueta de fase si existe const faseTag = contacto.faseInicial && contacto.faseDespues ? renderFaseTag(contacto.faseInicial, contacto.faseDespues) : null return (

{/* Primera fila: Comentario principal con etiqueta de fase a la izquierda */}

{faseTag &&

{faseTag}

}

{comentario}

{/* Segunda fila: Texto adicional (fecha) si existe */} {fecha && fecha !== "Sin Comentario" &&

{fecha}

} {fecha === "Sin Comentario" &&

Sin Comentario

} {/* Tercera fila: Otras etiquetas (estado, duración) */}

{contacto.estado && renderEstado(contacto.estado)} {contacto.duracionConversacion && contacto.id !== 1 && renderDuracionBasica(contacto.duracionConversacion, contacto.id, contacto)}

) } return (

{isOpen && (

P Llamada programada

R Llamada realizada

T.T Tiempo Timbrado

T.C Tiempo Conversado

{contactos.map((contacto) => ( ))}

Fecha y Hora	Comentario
{renderFechaHoraCompleto(contacto)}	{renderComentario(contacto.comentario, contacto.fecha, contacto)}

Página

{}} />

de 3

items por página

1 - 5 de 23 items

)} {/* Audio Player Modal */}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-whatsapp.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import type React from "react" import { RefreshCw, Send, X } from "lucide-react" import { WhatsAppTemplateModal } from "@/components/whatsapp-template-modal" interface SectionWhatsAppProps { messageInput: string handleMessageInputChange: (e: React.ChangeEvent) => void } export default function SectionWhatsApp({ messageInput, handleMessageInputChange }: SectionWhatsAppProps) { const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false) const handleSelectTemplate = (templateText: string) => { handleMessageInputChange({ target: { value: templateText } } as any) } return (

{/* Contenedor principal del chat con ancho máximo y borde - Con padding añadido */}

{/* Cabecera del chat */}

Alvarez, Prueba

{/* Área de mensajes con altura fija - Aumentada en un 30% */}

{/* Mensaje 1 */}

Automático Hola prueba, te saluda de BSG INSTITUTE Te hemos enviado un correo electrónico con la información del{" "} Programa Internacional en Gerencia de Proyectos 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.

2024/04/24 10:16 AM

{/* Mensaje 2 */}

Manual Paola Lozano
Hola prueba, te saluda Paola Lozano de BSG INSTITUTE Te hemos enviado un correo electrónico con la información del{" "} Programa Internacional en Gerencia de Proyectos 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.

2024/05/30 04:06 PM

{/* Área de entrada de mensajes - Iconos en columna vertical con contenedores */}

{/* Columna de iconos vertical */}

{/* Botón de Plantillas */}

Plantillas

{/* Botón de Agregar documento */}

Agregar documento

{/* Botón de Agregar imagen */}

Agregar imagen

{/* Área de texto y botones */}

{/* Área de texto - Ocupa todo el ancho disponible */} {/* Botones de borrar y enviar a la derecha */} {/* Botones de borrar y enviar a la derecha, now in columna vertical */}

{/* Modal para plantillas de WhatsApp */} setIsTemplateModalOpen(false)} onSelectTemplate={handleSelectTemplate} />

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-correos.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Mail, Eye } from "lucide-react" import { EmailViewerModal } from "@/components/email-viewer-modal" // Interfaz para los elementos de correo interface EmailItem { id: number date: string time: string status: string subject: string sender: string recipient: string content: string isRead: boolean } export default function SectionCorreos() { // Estado para controlar si el contenido está expandido const [isExpanded, setIsExpanded] = useState(false) // Estado para el modal de visualización de correo const [isEmailViewerOpen, setIsEmailViewerOpen] = useState(false) // Estado para almacenar el correo seleccionado const [selectedEmail, setSelectedEmail] = useState({ sender: "", recipient: "", subject: "", content: "", date: "", }) // Estado para contar mensajes no leídos const [unreadCount, setUnreadCount] = useState(1) // Estado para los datos de correo con estado de lectura const [emailData, setEmailData] = useState([ { id: 1, date: "25/04/2025", time: "10:15 AM", status: "Enviado", subject: "Información sobre programa AWS Architect", sender: "BSG Institute ", recipient: "joseph.alvarez@example.com", content: `

Estimado(a) Joseph,

Revísela por favor, estamos en contacto.

Saludos,

`, isRead: true, }, { id: 2, date: "27/04/2025", time: "14:30 PM", status: "Recibido", subject: "Confirmación de inscripción - Curso AWS", sender: "Joseph Alvarez ", recipient: "info@bsginstitute.com", content: `

Hola equipo de BSG Institute,

Gracias por la información enviada sobre el curso de AWS Certified Solutions Architect. Estoy interesado en inscribirme y quisiera saber cuáles son los próximos pasos a seguir.

También tengo algunas preguntas adicionales:

¿Cuál es la duración exacta del programa?
¿Hay opciones de financiamiento disponibles?
¿Se entrega algún certificado al finalizar el curso?

Quedo atento a su respuesta.

Saludos cordiales,

Joseph Alvarez

`, isRead: false, }, ]) // Función para alternar la visibilidad del contenido const toggleContent = () => { setIsExpanded(!isExpanded) } // Función para manejar la visualización de un correo const handleViewEmail = (email: EmailItem) => { setSelectedEmail({ sender: email.sender, recipient: email.recipient, subject: email.subject, content: email.content, date: `${email.date} ${email.time}`, }) // Marcar el correo como leído cuando se visualiza if (!email.isRead) { const updatedEmails = emailData.map((item) => (item.id === email.id ? { ...item, isRead: true } : item)) setEmailData(updatedEmails) // Actualizar el contador de no leídos setUnreadCount((prev) => Math.max(0, prev - 1)) } setIsEmailViewerOpen(true) } return (

{/* Encabezado del contenedor principal */} {/* Contenido expandible */}

{emailData.map((email) => ( ))}

Fecha y Hora	Asunto	Acciones
{email.date} \| {email.time} {email.status} {!email.isRead && email.status === "Recibido" && ( Nuevo )}	{email.subject}

Página

{}} />

de 1

items por página

1 - {emailData.length} de {emailData.length} items

{/* Modal de visualización de correo */} setIsEmailViewerOpen(false)} emailData={selectedEmail} />

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/sections/section-chat-portal.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { MessageSquare } from "lucide-react" import ChatPortalWeb from "./chat-portal-web" export default function SectionChatPortal() { // Estado para controlar si el contenido está expandido const [isExpanded, setIsExpanded] = useState(false) // Estado para el input de mensaje const [messageInput, setMessageInput] = useState("") // Función para alternar la visibilidad del contenido const toggleContent = () => { setIsExpanded(!isExpanded) } // Función para manejar el cambio en el input de mensaje const handleMessageInputChange = (e: React.ChangeEvent) => { setMessageInput(e.target.value) } return (

{/* Encabezado del contenedor principal */} {/* Contenido expandible */}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase2/paso-2-1-validar-perfil.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, User, FileText } from "lucide-react" export default function Paso21ValidarPerfil() { const [expandedSection, setExpandedSection] = useState("perfil-profesional") const toggleSection = (section: string) => { setExpandedSection(expandedSection === section ? null : section) } return (

{/* Perfil profesional del cliente */}

{expandedSection === "perfil-profesional" && (

{/* Columna 1 */}

{/* Área de Formación */}

Área de Formación:

{/* Cargo */}

Cargo:

{/* Área de Trabajo */}

Área de Trabajo:

{/* Industria */}

Industria:

{/* Columna 2 */}

{/* Años de experiencia */}

Años de experiencia:

{/* Empresa */}

Empresa:

Ingrese mínimo 3 caracteres

{/* Tamaño de empresa */}

Tamaño de empresa:

{/* Principal responsabilidad profesional - Ancho completo */}

Principal responsabilidad:

)}

{/* Verificar público objetivo */}

Verificar que el cliente se encuentre dentro del público objetivo

El programa está dirigido a:

Ingenieros industriales, ambientales, en minas y administradores de empresas interesados en implementar y gestionar sistemas de calidad, medio ambiente y seguridad laboral bajo normativas ISO.

Nivel de cumplimiento

{/* Verificar pre requisitos */}

Verificar que el cliente cumpla los pre requisitos del programa

Nombre

Conocimientos previos de las normas ISO 9001:2015, ISO 14001:2015 e ISO 45001:2018.

Respuesta

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase5-manejo-objeciones/fase5-manejo-objeciones-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, AlertTriangle } from "lucide-react" import IdentificarObjeciones from "../fase4/identificar-objeciones" export default function Fase5ManejoObjecionesContent() { const [expandedSections, setExpandedSections] = useState({ objeciones: true, }) const toggleSection = (section: keyof typeof expandedSections) => { setExpandedSections((prev) => ({ ...prev, [section]: !prev[section], })) } return (

FASE 5: MANEJO DE OBJECIONES

{/* Sección de Identificar Objeciones */}

{expandedSections.objeciones && (

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/fase4/fase4-content.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, MessageSquare } from "lucide-react" import ConvenioVoz from "../fase3/convenio-voz" export default function Fase4Content() { const [expandedSections, setExpandedSections] = useState({ convenioVoz: true, }) const toggleSection = (section: keyof typeof expandedSections) => { setExpandedSections((prev) => ({ ...prev, [section]: !prev[section], })) } return (

FASE 6: CIERRE DE VENTA

{/* Sección de Convenio de Voz */}

{expandedSections.convenioVoz && (

)}

) } [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 (

{/* Datos del Contacto */}

{openSections.datosContacto && (

)}

{/* Historial de Modificaciones - contenido directo */} {/* Información alternativa del Contacto */}

{openSections.informacionAlternativa && (

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/editar-datos-personales/historial-modificaciones.tsx" isQuickEdit="true" 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: ( ), 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: ( ), bgColor: "bg-green-100", } } // Campos relacionados con contacto if (campo.includes("Email") || campo.includes("Teléfono") || campo.includes("Celular")) { return { icon: ( ), bgColor: "bg-blue-100", } } // Campos relacionados con fechas if (campo.includes("Fecha")) { return { icon: ( ), bgColor: "bg-orange-100", } } // Campos relacionados con empresa if (campo.includes("Empresa") || campo.includes("Cargo")) { return { icon: ( ), bgColor: "bg-amber-100", } } // Valor por defecto return { icon: ( ), bgColor: "bg-gray-100", } } return (

{/* Cabecera del desplegable */} {/* Contenido desplegable */} {isOpen && (

{modificaciones.map((modificacion, index) => { const { icon, bgColor } = getFieldIcon(modificacion.campo) return ( ) })}

Campo Actualizado	Valor Anterior	Valor Nuevo	Fecha	Usuario
{icon} {modificacion.campo}	{modificacion.valorAnterior \|\| "-"}	{modificacion.valorNuevo}	{modificacion.fecha}	{modificacion.usuario}

{/* Paginación */}

Página

{}} />

de 2

items por página

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/program-faq.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Search, XCircle, Award, BookOpen, ChevronDown } from "lucide-react" export default function ProgramFAQ() { const [selectedProgram, setSelectedProgram] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") const [searchTerm, setSearchTerm] = useState("CURSO OFICIAL AWS CERTIFIED SOLUTIONS ARCHITECT - ASSOCIATE") const [isOpen, setIsOpen] = useState(false) const [isCertificationOpen, setIsCertificationOpen] = useState(false) const [isProgramOpen, setIsProgramOpen] = useState(false) // Lista de programas disponibles (la misma que en ProgramInfo) 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 } // Manejar clics fuera del selector useEffect(() => { function handleClickOutside(event) { const target = event.target if (!target.closest(".program-selector")) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Preguntas frecuentes para el programa seleccionado const certificationFaqs = [ { question: "¿Qué certificación obtendré al finalizar el programa AWS Solutions Architect?", answer: "Al finalizar el programa obtendrás la certificación AWS Certified Solutions Architect - Associate emitida por Amazon Web Services, reconocida globalmente en el mercado internacional.", }, { question: "¿La certificación AWS tiene validez internacional?", answer: "Sí, la certificación AWS Certified Solutions Architect - Associate es reconocida internacionalmente y tiene validez global.", }, { question: "¿Cuánto tiempo es válida la certificación de AWS?", answer: "La certificación AWS Certified Solutions Architect - Associate tiene una validez de 3 años, después de los cuales deberás recertificarte.", }, { question: "¿Necesito experiencia previa para obtener la certificación de AWS?", answer: "Se recomienda tener al menos 1 año de experiencia práctica en el diseño de soluciones distribuidas en AWS, pero no es un requisito obligatorio para tomar el examen.", }, ] const programFaqs = [ { question: "¿Cuál es la duración del programa AWS Solutions Architect?", answer: "El programa tiene una duración de 4 meses, con clases dos veces por semana.", }, { question: "¿Qué modalidades de estudio están disponibles para el curso de AWS?", answer: "El programa está disponible en modalidad presencial en Perú, Colombia y Bolivia, y en modalidad online sincrónica para estudiantes de cualquier país.", }, { question: "¿Qué requisitos técnicos necesito para el programa online de AWS?", answer: "Para la modalidad online necesitarás una computadora con conexión estable a internet, micrófono y cámara web para participar en las sesiones sincrónicas.", }, { question: "¿Hay opciones de financiamiento disponibles para el curso de AWS?", answer: "Sí, ofrecemos diferentes opciones de financiamiento y planes de pago. Puedes consultar los detalles en la sección de Inversión.", }, { question: "¿Puedo acceder a las grabaciones de las clases del curso de AWS?", answer: "Sí, todas las sesiones son grabadas y estarán disponibles en la plataforma de aprendizaje durante la duración del programa.", }, ] return ( <> {/* Barra de búsqueda/selector de programas */}

{isOpen && (

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

No se encontraron programas

)}

{/* Secciones de preguntas frecuentes - Con colores actualizados */}

{/* Acerca de la Certificación */}

{isCertificationOpen && (

{certificationFaqs.map((faq, index) => (

{index + 1} {faq.question}

{faq.answer}

))}

)}

{/* Acerca del Programa */}

{isProgramOpen && (

{programFaqs.map((faq, index) => (

{index + 1} {faq.question}

{faq.answer}

))}

)}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-components/competitors.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" export default function Competitors() { const [isOpen, setIsOpen] = useState(true) // Datos de ejemplo para los competidores const competidoresData = [ { nombrePrograma: "Sistemas Integrados De Gestión De La Calidad, Ambiental, Seguridad Y Salud Ocupacional - Virtual", categoria: "Diplomas", institucion: "PONTIFICIA UNIVERSIDAD CATÓLICA DEL PERÚ", ciudad: "Lima", duracion: "256", precio: "4800", moneda: "PEN", contenidoCompetidor: "Sin Desventaja", }, { nombrePrograma: "Sistemas Integrados De Gestión: Iso 9001-Iso 14001-Ohsas 18001-Sa 8000", categoria: "Programas", institucion: "ASOCIACIÓN TECSUP N° 2", ciudad: "Cusco", duracion: "90", precio: "2100", moneda: "PEN", contenidoCompetidor: "Sin Desventaja", }, { nombrePrograma: "Sistema Integrado de Gestión", categoria: "Programas", institucion: "TECSUP N° 1", ciudad: "Arequipa", duracion: "96", precio: "2540", moneda: "PEN", contenidoCompetidor: "Sin Desventaja", }, { nombrePrograma: "Sistemas De Gestión De La Calidad, Medio Ambiente, Seguridad Y Salud Ocupacional", categoria: "Diplomas", institucion: "PONTIFICIA UNIVERSIDAD CATÓLICA DEL PERÚ", ciudad: "Lima", duracion: "170", precio: "7820", moneda: "PEN", contenidoCompetidor: "Con Desventaja", }, ] // Función para obtener el color de la etiqueta según la categoría const getCategoryBadgeStyle = (categoria) => { // Ahora ambas categorías tienen el mismo estilo morado if (categoria === "Diplomas" || categoria === "Programas") { return "bg-purple-100 text-purple-800 border border-purple-300" } return "bg-gray-100 text-gray-800 border border-gray-300" } // Función para obtener el estilo de la ventaja/desventaja const getVentajaStyle = (contenido) => { if (contenido === "Sin Desventaja") { return "text-green-600 font-medium" } if (contenido === "Con Desventaja") { return "text-red-600 font-medium" } return "text-gray-700" } return (

{/* Cabecera del desplegable */} {/* Contenido desplegable */} {isOpen && (

{competidoresData.map((competidor, index) => { const categoryBadgeStyle = getCategoryBadgeStyle(competidor.categoria) const ventajaStyle = getVentajaStyle(competidor.contenidoCompetidor) return ( ) })}

Nombre Programa	Institución	Ventaja/Desventaja
{competidor.nombrePrograma} {competidor.categoria} {competidor.duracion} horas {competidor.moneda} {competidor.precio}	{competidor.ciudad} {competidor.institucion}	{competidor.contenidoCompetidor}

{/* Paginación */}

Página

{}} />

de 1

items por página

)}

) } [V0_FILE]typescriptreact:file="components/comentario-actividad-button.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useContext, useRef, useEffect } from "react" import { FileText, Minus, Move } from "lucide-react" import { ComentarioContext } from "@/contexts/comentario-context" import { usePathname } from "next/navigation" interface ComentarioActividadButtonProps { activeTab?: string } export function ComentarioActividadButton({ activeTab = "speech" }: ComentarioActividadButtonProps) { const [isOpen, setIsOpen] = useState(false) const [comentario, setComentario] = useState("") const [position, setPosition] = useState({ x: 0, y: 0 }) const notepadRef = useRef(null) const isDraggingRef = useRef(false) const dragStartPosRef = useRef({ x: 0, y: 0 }) const pathname = usePathname() // Intentar obtener el contexto, pero no fallar si no existe const context = useContext(ComentarioContext) // Check if we're on a contact detail page - ONLY show on specific contact detail pages // This ensures the button only appears after clicking "Ejecutar" and not on the main agenda screen const isContactDetailPage = pathname?.includes("/gestion-comercial/agenda/contacto-entrante/") && pathname?.split("/").length > 4 && !pathname?.endsWith("/contacto-entrante") && !pathname?.endsWith("/agenda") // Initialize position on first render useEffect(() => { if (typeof window !== "undefined") { setPosition({ x: window.innerWidth - 350, y: 100 }) } }, []) // Add a new useEffect to set the button visibility based on the current page useEffect(() => { // Check if we're on a contact detail page if (isContactDetailPage && context?.setShowComentarioButton) { // Make sure the button is visible when on a contact detail page context.setShowComentarioButton(true) } // This effect should run whenever the pathname changes }, [pathname, context]) // Add and remove event listeners for dragging useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDraggingRef.current && notepadRef.current) { const newX = e.clientX - dragStartPosRef.current.x const newY = e.clientY - dragStartPosRef.current.y // Keep the notepad within the viewport const maxX = window.innerWidth - notepadRef.current.offsetWidth const maxY = window.innerHeight - notepadRef.current.offsetHeight setPosition({ x: Math.max(0, Math.min(newX, maxX)), y: Math.max(0, Math.min(newY, maxY)), }) } } const handleMouseUp = () => { isDraggingRef.current = false } if (isOpen) { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) } return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) } }, [isOpen]) // If context doesn't exist or button shouldn't be shown, or we're not on a contact detail page, return null if (!context || !context.showComentarioButton || !isContactDetailPage) { return null } const toggleOpen = () => { setIsOpen(!isOpen) } const handleMouseDown = (e: React.MouseEvent) => { if (notepadRef.current) { isDraggingRef.current = true dragStartPosRef.current = { x: e.clientX - position.x, y: e.clientY - position.y, } // Prevent text selection during drag e.preventDefault() } } const buttonBottomClass = activeTab === "speech" ? "bottom-[280px]" : "bottom-[200px]" return ( <> {isOpen && (

Comentario Actividad

{comentario.length}/500

)} ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/layout.tsx" isMerged="true" import type React from "react" // Importar los estilos para los números import "./components/fase1/number-styles.css" // Resto del código del layout... export default function Layout({ children, }: { children: React.ReactNode }) { return <>{children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next/types" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { AppSidebar } from "@/components/app-sidebar" import { TopBar } from "@/components/top-bar" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Integra CRM - Plataforma de Gestión", description: "Plataforma interna de gestión para BSG Institute", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [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 "./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]typescriptreact:file="components/reporte-incidencia-button.tsx" isMerged="true" "use client" import { FileText } from "lucide-react" import { useState } from "react" import { ReporteIncidenciaModal } from "./reporte-incidencia-modal" export default function ReporteIncidenciaButton() { const [isModalOpen, setIsModalOpen] = useState(false) return ( <>

setIsModalOpen(true)} className="fixed bottom-4 right-8 bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg flex items-center space-x-2 transition-all duration-300 ease-in-out z-40 cursor-pointer" style={{ padding: "12px 16px", display: "flex", alignItems: "center", gap: "8px", userSelect: "none", WebkitUserSelect: "none", MozUserSelect: "none", msUserSelect: "none", }} > Reporte de ocurrencia

setIsModalOpen(false)} /> ) } [V0_FILE]typescriptreact:file="components/virtual-assistant-chat.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Bot, X, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar } from "@/components/ui/avatar" interface Message { id: string content: string sender: "user" | "assistant" timestamp: Date } interface VirtualAssistantChatProps { activeTab?: string } export function VirtualAssistantChat({ activeTab = "speech" }: VirtualAssistantChatProps) { const [isOpen, setIsOpen] = useState(false) const [message, setMessage] = useState("") const [messages, setMessages] = useState([]) const messagesEndRef = useRef(null) const inputRef = useRef(null) // Get user's first name (you can replace this with actual user data) const userName = "Usuario" const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) useEffect(() => { if (isOpen && inputRef.current) { inputRef.current.focus() } }, [isOpen]) const handleSendMessage = () => { if (message.trim() === "") return const newMessage: Message = { id: Date.now().toString(), content: message, sender: "user", timestamp: new Date(), } setMessages([...messages, newMessage]) setMessage("") // Simulate assistant response setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), content: "Gracias por tu mensaje. Estoy aquí para ayudarte con cualquier pregunta sobre la agenda comercial.", sender: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) }, 1000) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } const buttonBottomClass = activeTab === "speech" ? "bottom-[200px]" : "bottom-[120px]" return ( <> {/* Floating Action Button */} {/* Chat Panel Sliding from Right */}

{/* Header */}

BSG Ventas

Asistente Virtual

{/* Welcome Message */}

Hola, {userName}

¿Cómo puedo ayudarte hoy?

{/* Messages Container */}

{messages.map((msg) => (

{msg.content}

))}

{/* Input Area */}

setMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder="" className="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/20 transition-all" />

{/* Overlay for mobile */} {isOpen && (

setIsOpen(false)} aria-hidden="true" /> )} ) } [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 { getClientById } from "./data/clients-data" import TabContent from "./components/tab-content" import { useRouter } from "next/navigation" import NavigationTabs from "./components/navigation-tabs" import ClientHeader from "./components/client-header" import ReporteIncidenciaButton from "../../../../../components/reporte-incidencia-button" import { VirtualAssistantChat } from "../../../../../components/virtual-assistant-chat" import { ComentarioActividadButton } from "../../../../../components/comentario-actividad-button" import { RecomendacionesVentaButton } from "../../../../../components/recomendaciones-venta-button" import RecomendacionesLlamada from "./components/recomendaciones-llamada/recomendaciones-llamada" import "./components/badge-animation.css" 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 } } // Función para ir a recomendaciones de llamada const goToRecommendations = () => { setActiveTab("speech") updateTabInUrl("speech") // Esperar a que cambie la pestaña y luego hacer scroll al elemento setTimeout(() => { const element = document.getElementById("recomendaciones-llamada-header") if (element) { element.scrollIntoView({ behavior: "smooth", block: "center" }) } }, 100) } // Función para ir al reporte de incidencia const goToIncidentReport = () => { setActiveTab("speech") updateTabInUrl("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() } // 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) } } } }, []) // 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.

) } return (

{/* Menú de navegación por pestañas */}

{ console.log("Setting active tab to:", tab) setActiveTab(tab) updateTabInUrl(tab) }} />

{/* Recomendaciones para la llamada - visible solo en pestaña speech */} {activeTab === "speech" && (

)}

😊 ¡Cliente con EXCELENTE Perfil! Insiste y bríndale todo el apoyo para que se matricule

{/* Información del cliente - SOLO visible en pestaña speech */} {activeTab === "speech" && (

)} {/* Contenido de la pestaña activa */} ) => setMessageInput(e.target.value)} /> {/* Botón flotante para ir al reporte de incidencia - visible solo en pestaña Speech */} {activeTab === "speech" && (

)} {/* Virtual Assistant Chat - visible en todas las pestañas */} {/* Recomendaciones Venta Button - visible en todas las pestañas */} {/* Comentario Actividad Button - visible en todas las pestañas */}

) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/tab-content.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import type { ClientData } from "../../../data/clients-data" import OtherTabContent from "./other-tab-content" import SectionResumenContactos from "./sections/section-resumen-contactos" import SectionWhatsApp from "./sections/section-whatsapp" import SectionCorreos from "./sections/section-correos" import SectionChatPortal from "./sections/section-chat-portal" import Fase1Content from "./fase1/fase1-content" import Fase2Content from "./fase2/fase2-content" import Fase3PresentacionProgramaContent from "./fase3-presentacion-programa/fase3-presentacion-programa-content" import Fase4PresentacionInversionContent from "./fase4-presentacion-inversion/fase4-presentacion-inversion-content" import Fase5ManejoObjecionesContent from "./fase5-manejo-objeciones/fase5-manejo-objeciones-content" import Fase4Content from "./fase4/fase4-content" interface TabContentProps { activeTab: string clientData: ClientData activeMessageTab: string setActiveMessageTab: (tab: string) => void messageInput: string handleMessageInputChange: (e: React.ChangeEvent) => void } export default function TabContent({ activeTab, clientData, activeMessageTab, setActiveMessageTab, messageInput, handleMessageInputChange, }: TabContentProps) { const [showReporteIncidencia, setShowReporteIncidencia] = useState(false) if (activeTab !== "speech") { return } return (

{/* Fase 1: Identificación y Registro */}

{/* Componentes que forman parte de la Fase 1 */}

{/* Sección de Resumen de Contactos */} {/* Sección de WhatsApp */} {/* Sección de Correos */} {/* Sección de Chat Portal Web */}

{/* Fase 2: Calificación */}

{/* Fase 4: Presentación de la inversión */}

{/* Fase 5: Manejo de Objecciones */}

{/* Fase 6: Cierre de Venta */}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; /* Color primario más vibrante */ --primary: 262 80% 50%; --primary-foreground: 0 0% 98%; /* Secundario con un toque de azul brillante */ --secondary: 210 100% 50%; --secondary-foreground: 210 40% 98%; /* Muted más claro pero con un toque de color */ --muted: 210 40% 96.1%; --muted-foreground: 215 16% 47%; /* Acento más vibrante */ --accent: 142 71% 45%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; /* Bordes más definidos */ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 262 80% 50%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 262 80% 50%; --primary-foreground: 0 0% 98%; --secondary: 210 100% 50%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 142 71% 45%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 262 80% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Estilos personalizados para gráficos con colores más vivos */ .chart-primary { color: hsl(262, 80%, 55%); } .chart-secondary { color: hsl(210, 100%, 50%); } .chart-accent { color: hsl(142, 71%, 45%); } .chart-warning { color: hsl(35, 100%, 50%); } /* Estilos para tarjetas con sombras más definidas */ .dashboard-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.2s ease; } .dashboard-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } /* Estilos para métricas con colores más vivos */ .metric-value { font-weight: 700; color: hsl(240, 20%, 15%); } .metric-label { color: hsl(240, 10%, 40%); font-weight: 500; } .metric-change-positive { color: hsl(142, 71%, 45%); font-weight: 600; } .metric-change-negative { color: hsl(0, 84%, 60%); font-weight: 600; } /* Gradientes vibrantes para fondos */ .gradient-purple { background: linear-gradient(135deg, hsl(262, 80%, 50%), hsl(280, 80%, 50%)); } .gradient-blue { background: linear-gradient(135deg, hsl(210, 100%, 50%), hsl(230, 100%, 50%)); } .gradient-green { background: linear-gradient(135deg, hsl(142, 71%, 45%), hsl(160, 71%, 45%)); } /* Mejoras para la visualización de gráficos */ .recharts-wrapper { overflow: visible !important; } .recharts-cartesian-axis-tick-value { font-size: 12px; } .recharts-legend-item-text { font-size: 12px; } /* Asegurar que los contenedores de tarjetas tengan suficiente espacio */ .dashboard-card .recharts-responsive-container { margin-left: -10px; } /* Mejorar la visualización de etiquetas en gráficos */ .recharts-pie-label-text { font-weight: 500; } /* Add these styles to the end of the file to ensure the input field in the purple header looks good */ .bg-[#7b3ff7] .bg-[#8f5af8]::placeholder { color: rgba(255, 255, 255, 0.7); } .bg-[#7b3ff7] input:focus { outline: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); } .bg-[#7b3ff7] input { color: white; } /* Agregar estos estilos al final del archivo para personalizar la barra de desplazamiento */ @layer utilities { .scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; } .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } .scrollbar-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #9ca3af; } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } } /* Estilos para asegurar que el scroll funcione correctamente */ html, body { height: 100%; overflow-y: auto !important; /* Forzar overflow auto con !important */ overflow-x: hidden; /* Prevenir scroll horizontal innecesario */ } /* Asegurar que el contenedor principal permita scroll */ #__next, main, .overflow-auto { overflow-y: auto !important; } /* Añadir una clase global para controlar los márgenes laterales de manera consistente */ /* Agregar esto al final del archivo globals.css */ .app-container { @apply px-8 w-full max-w-full; } .content-container { padding-left: 29px; padding-right: 29px; @apply w-full max-w-full bg-white; } /* Buscar cualquier estilo existente para numeraciones y reemplazarlo con el siguiente */ /* Agregar estos estilos al final del archivo para las numeraciones */ .number-indicator, [class*="step-number"], [class*="number-badge"], .numbered-item, .notification-badge, .badge-number, .step-indicator, .counter, .number-circle { background-color: #0a5d36 !important; /* Verde oscuro */ color: white !important; font-weight: 600 !important; } /* Asegurar que todos los elementos con atributos data-count o similares tengan el mismo estilo */ [data-count]:after, [data-notification]:after, [data-badge]:after { background-color: #0a5d36 !important; color: white !important; font-weight: 600 !important; } /* Animación fade-in para elementos prominentes */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out; } /* Animación shimmer/destello */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .animate-shimmer { background: linear-gradient( 90deg, #16a34a 0%, #22c55e 25%, #16a34a 50%, #22c55e 75%, #16a34a 100% ); background-size: 1000px 100%; animation: shimmer 4s ease-in-out infinite; } .animate-shimmer-fuchsia { background: linear-gradient( 90deg, #c2185b 0%, #ec407a 25%, #c2185b 50%, #ec407a 75%, #c2185b 100% ); background-size: 1000px 100%; animation: shimmer 4s ease-in-out infinite; } /* Estilo específico para los números en los pasos del formulario */ [class*="paso-"] .number, .form-step .number, .step .number, .numbered-field:before { background-color: #0a5d36 !important; color: white !important; font-weight: 600 !important; } /* Estilo para los círculos numerados en los formularios */ .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 !important; } /* Estilo para los indicadores de notificación en pestañas y menús */ .tab-notification, .menu-notification, .notification-count { background-color: #0a5d36 !important; color: white !important; font-weight: 600 !important; border-radius: 50%; padding: 2px 6px; font-size: 0.75rem; } /* Evitar que el contenedor de pestañas se subraye como un todo */ .TabsList, .tabs-list, [role="tablist"] { text-decoration: none !important; } /* Corrección para pestañas individuales */ .TabsList button:hover, .TabsList button:focus, .tabs-list button:hover, .tabs-list button:focus, [role="tablist"] button:hover, [role="tablist"] button:focus { text-decoration: underline; } /* Evitar que el contenedor de conversaciones se subraye como un todo */ .conversations-list, .chat-list { text-decoration: none !important; } /* Corrección para conversaciones en el chat */ .conversation-item:hover, .conversation-item:focus, .user-chat-item:hover, .user-chat-item:focus { text-decoration: underline; } /* Evitar que elementos no desplegables se comporten como desplegables */ .non-collapsible:hover, .non-collapsible:focus, .static-content:hover, .static-content:focus { text-decoration: none !important; } /* Reglas específicas para elementos individuales */ .tab-trigger:hover, .tab-trigger:focus { text-decoration: underline; } .tab-list { text-decoration: none !important; } .tab-list > * { text-decoration: none; } .tab-list > *:hover, .tab-list > *:focus { text-decoration: underline; } /* Reglas específicas para el chat */ .chat-user-item { text-decoration: none; } .chat-user-item:hover, .chat-user-item:focus { text-decoration: underline; } .chat-users-list { text-decoration: none !important; } .chat-users-list > * { text-decoration: none; } .chat-users-list > *:hover, .chat-users-list > *:focus { text-decoration: underline; } /* Reglas específicas para los casos */ .caso-container { text-decoration: none !important; } .caso-title { text-decoration: none; } .caso-title:hover, .caso-title:focus { text-decoration: underline; } .caso-content { text-decoration: none !important; } /* Reglas más específicas para elementos interactivos */ button:hover span, button:focus span, a:hover span, a:focus span { text-decoration: inherit; } /* Regla para evitar subrayado en elementos no interactivos */ .non-interactive, .non-interactive:hover, .non-interactive:focus, .static-text, .static-text:hover, .static-text:focus, .read-only, .read-only:hover, .read-only:focus { text-decoration: none !important; } /* Regla para evitar que los contenedores se subrayen */ .container, .container:hover, .container:focus, .wrapper, .wrapper:hover, .wrapper:focus, .box, .box:hover, .box:focus { text-decoration: none !important; } /* Regla para asegurar que solo se subraye el elemento específico */ .interactive-parent { text-decoration: none !important; } .interactive-parent > .interactive-child:hover, .interactive-parent > .interactive-child:focus { text-decoration: underline; } /* Reglas específicas para los componentes de la aplicación */ /* 1. Pestañas */ .TabsTrigger:hover, .TabsTrigger:focus, [data-state="active"]:hover, [data-state="active"]:focus, [data-state="inactive"]:hover, [data-state="inactive"]:focus { text-decoration: underline; } .TabsList, .TabsList:hover, .TabsList:focus { text-decoration: none !important; } /* 2. Chat */ .user-item:hover, .user-item:focus { text-decoration: underline; } .users-list, .users-list:hover, .users-list:focus { text-decoration: none !important; } /* 3. Casos */ .caso-header:hover, .caso-header:focus { text-decoration: underline; } .caso-wrapper, .caso-wrapper:hover, .caso-wrapper:focus, .caso-body, .caso-body:hover, .caso-body:focus { text-decoration: none !important; } /* Regla global para asegurar que solo se subraye el elemento específico */ *:hover > *, *:focus > * { text-decoration: none; } *:hover, *:focus { text-decoration-skip-ink: all; } /* Reglas específicas para elementos individuales */ .individual-tab:hover, .individual-tab:focus { text-decoration: underline; } .individual-chat-user:hover, .individual-chat-user:focus { text-decoration: underline; } .individual-caso:hover, .individual-caso:focus { text-decoration: underline; } /* Regla para evitar que los contenedores se subrayen */ .tabs-container, .chat-container, .casos-container { text-decoration: none !important; } /* Regla para evitar que los elementos no interactivos se subrayen */ .non-interactive-tab, .non-interactive-chat-user, .non-interactive-caso { text-decoration: none !important; } [V0_FILE]typescriptreact:file="components/recomendaciones-venta-button.tsx" isMerged="true" "use client" import type React from "react" import { Lightbulb } from "lucide-react" import { usePathname } from "next/navigation" interface RecomendacionesVentaButtonProps { activeTab?: string onChangeTab?: (tab: string) => void } export function RecomendacionesVentaButton({ activeTab = "speech", onChangeTab }: RecomendacionesVentaButtonProps) { const pathname = usePathname() // Check if we're on a contact detail page const isContactDetailPage = pathname?.includes("/gestion-comercial/agenda/contacto-entrante/") && pathname?.split("/").length > 4 && !pathname?.endsWith("/contacto-entrante") && !pathname?.endsWith("/agenda") // If we're not on a contact detail page, return null if (!isContactDetailPage) { return null } const handleScrollToRecommendations = () => { // Si no está en la pestaña speech, cambiar primero if (activeTab !== "speech" && onChangeTab) { onChangeTab("speech") // Esperar a que cambie la pestaña y luego abrir y scrollear setTimeout(() => { const section = document.getElementById("recomendaciones-llamada-section") if (section) { // Abrir el contenedor si está cerrado (dispararar click en el chevron) const header = document.getElementById("recomendaciones-llamada-header") if (header) { // Buscar el botón para abrir/cerrar const toggleButton = header.querySelector("button") if (toggleButton) { toggleButton.click() } } // Scrollear al elemento setTimeout(() => { const element = document.getElementById("recomendaciones-llamada-header") if (element) { element.scrollIntoView({ behavior: "smooth", block: "center" }) } }, 100) } }, 100) } else { // Ya en la pestaña speech, solo abrir y scrollear const section = document.getElementById("recomendaciones-llamada-section") if (section) { const header = document.getElementById("recomendaciones-llamada-header") if (header) { const toggleButton = header.querySelector("button") if (toggleButton) { toggleButton.click() } } // Scrollear al elemento setTimeout(() => { const element = document.getElementById("recomendaciones-llamada-header") if (element) { element.scrollIntoView({ behavior: "smooth", block: "center" }) } }, 100) } } } // Position button based on activeTab const buttonBottomClass = activeTab === "speech" ? "bottom-[350px]" : "bottom-[270px]" return ( ) } [V0_FILE]typescriptreact:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/recomendaciones-llamada/recomendaciones-llamada.tsx" isMerged="true" "use client" import React, { useState, useRef } from "react" import { Lightbulb, Check } from "lucide-react" import "./recomendaciones-llamada.css" export default function RecomendacionesLlamada() { const [completed, setCompleted] = useState<{ [key: number]: boolean }>({}) const [animatingId, setAnimatingId] = useState(null) const [achievementId, setAchievementId] = useState(null) const [confetti, setConfetti] = useState>([]) const confettiShownRef = useRef(false) const recomendaciones = [ { id: 1, titulo: "Validar Apertura de la Llamada", descripcion: "Validar que la fase de 'Apertura de la llamada' se ejecutó con éxito.", icon: "clock", }, { id: 2, titulo: "Concluir Validación del Perfil", descripcion: "Enfoca en cubrir detalles técnicos y económicos pendientes.", icon: "clock", }, { id: 3, titulo: "Busca un Compromiso de Inscripción", descripcion: "Ofrece facilidades de pago condicionando al beneficio inmediato.", icon: "check", }, ] const completedCount = Object.values(completed).filter(Boolean).length const totalCount = recomendaciones.length const percentage = Math.round((completedCount / totalCount) * 100) const isFullyCompleted = completedCount === totalCount && totalCount > 0 // Generate confetti when fully completed React.useEffect(() => { if (isFullyCompleted && !confettiShownRef.current) { confettiShownRef.current = true const newConfetti = Array.from({ length: 30 }, (_, i) => ({ id: i, left: Math.random() * 100, delay: Math.random() * 0.2, duration: 2 + Math.random() * 1, })) setConfetti(newConfetti) // Clear confetti after animation setTimeout(() => setConfetti([]), 3500) } }, [isFullyCompleted]) // Get dynamic progress message const getProgressMessage = () => { if (completedCount === 0) return "Sigue con las recomendaciones para tener mejores resultados 📝" if (completedCount === 1) return "Genial, ya vas avanzando 💡" if (completedCount === 2) return "Ya estás cerca, solo falta una recomendación 🚀" return "Felicidades, estás más cerca de lograr tu objetivo 🎉" } const toggleCompleted = (id: number) => { const newCompleted = { ...completed, [id]: !completed[id], } setCompleted(newCompleted) // Trigger animation setAnimatingId(id) setTimeout(() => setAnimatingId(null), 600) // Trigger achievement animation if completing (not uncompleting) if (!completed[id]) { setAchievementId(id) setTimeout(() => setAchievementId(null), 700) } } // Get the next recommended step const getNextStep = () => { for (let i = 1; i <= totalCount; i++) { if (!completed[i]) { return i } } return null } const nextStep = getNextStep() return (

{/* Confetti Container */} {confetti.length > 0 && (

{confetti.map((piece) => (

))}

)} {/* Header */}

Recomendaciones para la llamada

Indicaciones clave para esta interacción

{/* Progress Section */}

{getProgressMessage()}

{completedCount} de {totalCount} completadas ({percentage}%)

{/* Banner Cards */}

{recomendaciones.map((rec) => (

{/* Número, título y checkbox */}

{rec.id}

{rec.titulo}

{/* Descripción */}

{rec.descripcion}

))}

) } [V0_FILE]css:file="app/gestion-comercial/agenda/contacto-entrante/[id]/components/recomendaciones-llamada/recomendaciones-llamada.css" /* Container with responsive max-width */ .recomendaciones-llamada-container { /* On screens smaller than 1440px, be responsive (width: 100%) */ width: 100%; /* On screens 1440px and larger, fix max-width to 1000px */ @media (min-width: 1440px) { max-width: 1000px; margin-left: auto; margin-right: auto; } } /* Pop animation for checkbox */ @keyframes checkboxPop { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } /* Border glow animation */ @keyframes borderGlow { 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); } 50% { box-shadow: 0 0 8px 4px rgba(14, 165, 233, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } } /* Color transition animation */ @keyframes colorTransition { from { border-color: rgb(14, 165, 233); background-color: rgb(240, 249, 255); } to { border-color: rgb(14, 165, 233); background-color: rgb(240, 249, 255); } } /* Completion pulse */ @keyframes completionPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Apply animations to completed card */ .card-completed { animation: colorTransition 0.4s ease-out forwards, borderGlow 0.6s ease-out; } /* Apply animation to checkbox */ .checkbox-animating { animation: checkboxPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* Pulse for the completed state */ .completion-pulse { animation: completionPulse 0.5s ease-out; } /* Celebration highlight animation */ @keyframes celebrationHighlight { 0% { background-color: rgba(14, 165, 233, 0.05); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.3); } 50% { box-shadow: 0 0 12px 6px rgba(14, 165, 233, 0); } 100% { background-color: rgba(14, 165, 233, 0.05); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } } /* Confetti-like subtle animation */ @keyframes subtleConfetti { 0% { transform: translateY(-10px) scale(1); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 0.8; } } /* Apply celebration animation */ .celebration-highlight { animation: celebrationHighlight 0.8s ease-out, subtleConfetti 0.6s ease-out; } /* Achievement unlock animation - scales up and glows */ @keyframes achievementUnlock { 0% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 0 20px 8px rgba(14, 165, 233, 0.4), 0 0 40px 15px rgba(14, 165, 233, 0.2); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } } /* Achievement particles burst effect */ @keyframes particleBurst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } /* Apply achievement animation to card on completion */ .card-achievement { animation: achievementUnlock 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Particle effect */ .achievement-particle { position: absolute; pointer-events: none; animation: particleBurst 0.8s ease-out forwards; } /* Confetti animation */ @keyframes confettiFall { 0% { transform: translateY(0) rotateZ(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; } } /* Confetti piece styles */ .confetti-piece { position: absolute; width: 10px; height: 10px; background: #0ea5e9; opacity: 0.8; animation: confettiFall var(--duration, 2.5s) ease-in forwards; animation-delay: var(--delay, 0s); pointer-events: none; } .confetti-piece:nth-child(odd) { background: #06b6d4; } .confetti-piece:nth-child(3n) { background: #0284c7; } .confetti-piece:nth-child(5n) { background: #0369a1; }