Dashboard Vinculaci\u00f3n 2024<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#1e3a8a', \/\/ Dark Blue\r\n accent: '#3b82f6', \/\/ Blue\r\n slate: {\r\n 850: '#1e293b', \r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased\">\r\n <div id=\"root-2024\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ --- Helper Functions ---\r\n const formatPercent = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'percent', minimumFractionDigits: 1 }).format(val);\r\n\r\n \/\/ --- Data 2024 ---\r\n const PROJECT_DATA_2024 = [\r\n \/\/ PROYECTOS NUEVOS\r\n { id: 101, code: \"P-VIN-1011647-2024\", faculty: \"BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de Empresas, Contabilidad y Auditor\u00eda, Mercadotecnia, Agronegocios, Enfermer\u00eda, Turismo, Hospitalidad y Hoteler\u00eda, Educaci\u00f3n, Derecho, Gastronom\u00eda, Construcci\u00f3n Sismoresistente\", project: \"Econom\u00eda Circular: Una alternativa para el desarrollo sostenible de las comunidades de los cantones Sucre \u2013 San Vicente\", status: \"NUEVO 2024\" },\r\n { id: 102, code: \"NO INFO\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de las Ciencias Experimentales, Tecnolog\u00edas de la Informaci\u00f3n, Software\", project: \"Matem\u00e1ticas y F\u00edsica recreativa para estudiantes de educaci\u00f3n general b\u00e1sica y bachillerato del cant\u00f3n Chone con el uso de tecnolog\u00edas y\/o materiales del medio\", status: \"NUEVO 2024\" },\r\n { id: 103, code: \"NO INFO\", faculty: \"EL CARMEN\", careers: \"INGENIER\u00cdA EN SOFTWARE, INGENIER\u00cdA EN TECNOLOG\u00cdAS DE LA INFORMACI\u00d3N\", project: \"Posicionamiento Digital de Peque\u00f1as y Medianas Empresas del Cant\u00f3n El Carmen y su Zona de influencia 2024-2026\", status: \"NUEVO 2024\" },\r\n { id: 104, code: \"NO INFO\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n odontol\u00f3gica y promoci\u00f3n de la salud bucodental a ni\u00f1os y adolescentes de la provincia de Manab\u00ed, 2024-2026\", status: \"NUEVO 2024\" },\r\n { id: 105, code: \"NO INFO\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Psicolog\u00eda\", project: \"Salud Mental en la comunidad Universitaria\", status: \"NUEVO 2024\" },\r\n { id: 106, code: \"NO INFO\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"Ambiente\", project: \"EcoMar: Conciencia Azul en Acci\u00f3n\", status: \"NUEVO 2024\" },\r\n { id: 107, code: \"NO INFO\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"CARRERA AGROINDUSTRIA\", project: \"Alimentaci\u00f3n saludable\", status: \"NUEVO 2024\" },\r\n { id: 108, code: \"NO INFO\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Derecho\", project: \"Buenas Pr\u00e1cticas Laborales- Manab\u00ed\", status: \"NUEVO 2024\" },\r\n { id: 109, code: \"NO INFO\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Ingenier\u00eda de alimentos\", project: \"Evaluaci\u00f3n anal\u00edtica de metales pesados a los productos de producci\u00f3n primaria en la provincia de Manab\u00ed, periodo 2024-2026.\", status: \"NUEVO 2024\" },\r\n\r\n \/\/ PROYECTOS QUE CONTIN\u00daAN\r\n { id: 201, code: \"P-VIN-1005944-2021\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de los Idiomas...\", project: \"El pensamiento computacional y la ense\u00f1anza del idioma Ingl\u00e9s...\", status: \"CONTINUA 2024\" },\r\n { id: 202, code: \"P-VIN-1005984-2021\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de las Ciencias...\", project: \"Build Mathematics: acompa\u00f1amiento pedag\u00f3gico...\", status: \"CONTINUA 2024\" },\r\n { id: 203, code: \"P-VIN-1005985-2021\", faculty: \"CHONE\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Asistencia T\u00e9cnica y Administrativa A Productores...\", status: \"CONTINUA 2024\" },\r\n { id: 204, code: \"P-VIN-1006516-2022\", faculty: \"CHONE\", careers: \"Agropecuaria, Administraci\u00f3n...\", project: \"Implementaci\u00f3n y asistencia t\u00e9cnica de huertos urbanos...\", status: \"CONTINUA 2024\" },\r\n { id: 205, code: \"P-VIN-1007826-2022\", faculty: \"CHONE\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"Centro de reciclaje para el manejo de los desechos...\", status: \"CONTINUA 2024\" },\r\n { id: 206, code: \"P-VIN-1007514-2021\", faculty: \"EL CARMEN\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas agr\u00edcolas...\", status: \"CONTINUA 2024\" },\r\n { id: 207, code: \"P-VIN-1005933-2021\", faculty: \"EL CARMEN\", careers: \"Ingenier\u00eda agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas pecuarios...\", status: \"CONTINUA 2024\" },\r\n { id: 208, code: \"P-VIN-1007543-2022\", faculty: \"EL CARMEN\", careers: \"EDUCACI\u00d3N B\u00c1SICA\", project: \"Fortalecimiento a Ni\u00f1os y J\u00f3venes en el Proceso De Interaprendizaje...\", status: \"CONTINUA 2024\" },\r\n { id: 209, code: \"P-VIN-1007579-2022\", faculty: \"EL CARMEN\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"Comunicaci\u00f3n para contribuir a la reducci\u00f3n de la brecha digital...\", status: \"CONTINUA 2024\" },\r\n { id: 210, code: \"P-VIN-1007810-2022\", faculty: \"EL CARMEN\", careers: \"Contabilidad y Auditor\u00eda\", project: \"Capacitaci\u00f3n para el desarrollo de las capacidades empresariales...\", status: \"CONTINUA 2024\" },\r\n { id: 211, code: \"P-VIN-1007847-2022\", faculty: \"PEDERNALES\", careers: \"INGENIERIA AGROPECUARIA\", project: \"Dise\u00f1o y Evaluaci\u00f3n de los Sistemas de Producci\u00f3n de Cacao...\", status: \"CONTINUA 2024\" },\r\n { id: 212, code: \"P-VIN-1007841-2022\", faculty: \"PEDERNALES\", careers: \"Turismo\", project: \"Fortalecimiento del talento humano de los restaurantes...\", status: \"CONTINUA 2024\" },\r\n { id: 213, code: \"P-VIN-1000392-2023\", faculty: \"PEDERNALES\", careers: \"Biolog\u00eda\", project: \"Especies vulnerables de las pesquer\u00edas y desarrollo productivo...\", status: \"CONTINUA 2024\" },\r\n { id: 214, code: \"P-VIN-1009662-2023\", faculty: \"PEDERNALES\", careers: \"Electromec\u00e1nica\", project: \"Formaci\u00f3n y asistencia t\u00e9cnica para las instalaciones a talleres...\", status: \"CONTINUA 2024\" },\r\n { id: 215, code: \"P-VIN-1010582-2023\", faculty: \"PEDERNALES\", careers: \"Arquitectura\", project: \"Intervenci\u00f3n territorial transdisciplinaria mediante la aplicaci\u00f3n...\", status: \"CONTINUA 2024\" },\r\n { id: 216, code: \"P-VIN-1005971-2021\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Fortalece tu Mi Pyme.\", status: \"CONTINUA 2024\" },\r\n { id: 217, code: \"P-VIN-1003717-2020\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Empoderamiento tur\u00edstico y comercial de Manta.\", status: \"CONTINUA 2024\" },\r\n { id: 218, code: \"P-VIN-1005997-2021\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Contabilidad y Auditor\u00eda...\", project: \"Fortalecimiento de las actividades econ\u00f3micas y comerciales (Tarqui)...\", status: \"CONTINUA 2024\" },\r\n { id: 219, code: \"P-VIN-1010604-2023\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Fortalecimiento de las Actividades Econ\u00f3micas (Acogida)...\", status: \"CONTINUA 2024\" },\r\n { id: 220, code: \"P-VIN-1007840-2022\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"CONTABILIDAD Y AUDITOR\u00cdA\", project: \"Fortalecimiento de las Habilidades Sociales, Cognitivas...\", status: \"CONTINUA 2024\" },\r\n { id: 221, code: \"P-VIN-1008613-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Expo Subasta de Arte en el desarrollo del mercado del arte...\", status: \"CONTINUA 2024\" },\r\n { id: 222, code: \"P-VIN-1007967-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Cursos y Talleres para ni\u00f1os, adolescentes y adultos...\", status: \"CONTINUA 2024\" },\r\n { id: 223, code: \"P-VIN-1007968-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Concursos y Simposios de Arte ULEAM 2022\", status: \"CONTINUA 2024\" },\r\n { id: 224, code: \"P-VIN-1006033-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Pedagog\u00eda de la Actividad F\u00edsica...\", project: \"Actividad f\u00edsica, deporte y recreaci\u00f3n para detecci\u00f3n de talentos...\", status: \"CONTINUA 2024\" },\r\n { id: 225, code: \"P-VIN-1005899-2021\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Pedagog\u00eda de la lengua...\", project: \"Proyecto Interdisciplinario de Alfabetizaci\u00f3n Integral...\", status: \"CONTINUA 2024\" },\r\n { id: 226, code: \"P-VIN-1003733-2020\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Hoteler\u00eda, Turismo\", project: \"Estrategias para Potencializar el Turismo Rural Comunitario...\", status: \"CONTINUA 2024\" },\r\n { id: 227, code: \"P-VIN-1009652-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n Especial\", project: \"Espacios de atenci\u00f3n pedag\u00f3gica inclusiva...\", status: \"CONTINUA 2024\" },\r\n { id: 228, code: \"P-VIN-1009651-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n especial\", project: \"Innovaci\u00f3n y Diversidad: Construyendo Comunidades Inclusivas...\", status: \"CONTINUA 2024\" },\r\n { id: 229, code: \"P-VIN-1009666-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"HOSPITALIDAD Y HOTELERIA\", project: \"Desarrollo de competencias laborales en empresas...\", status: \"CONTINUA 2024\" },\r\n { id: 230, code: \"P-VIN-1008790-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Hoteler\u00eda, Turismo\", project: \"Innovaci\u00f3n y fortalecimiento de CINFOTUR...\", status: \"CONTINUA 2024\" },\r\n { id: 231, code: \"P-VIN-1006082-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Medicina\", project: \"Estrategia Institucional para que el Ecuador crezca sin Desnutrici\u00f3n...\", status: \"CONTINUA 2024\" },\r\n { id: 232, code: \"P-VIN-1007824-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"ENFERMER\u00cdA\", project: \"Promoci\u00f3n de la Salud y Prevenci\u00f3n de Enfermedades...\", status: \"CONTINUA 2024\" },\r\n { id: 233, code: \"P-VIN-1007713-2021\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n ambulatoria odontol\u00f3gica a ni\u00f1os y adolescentes\", status: \"CONTINUA 2024\" },\r\n { id: 234, code: \"P-VIN-1009656-2023\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"INGENIER\u00cdA EN SISTEMAS...\", project: \"SERVICIOS Y SOLUCIONES TECNOL\u00d3GICAS VINCULANTES...\", status: \"CONTINUA 2024\" },\r\n { id: 235, code: \"P-VIN-1006007-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia t\u00e9cnica a productores agropecuarios (Av\u00edcola)...\", status: \"CONTINUA 2024\" },\r\n { id: 236, code: \"P-VIN-1006006-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia T\u00e9cnica Sobre Huertos Urbanos Y Rurales...\", status: \"CONTINUA 2024\" },\r\n { id: 237, code: \"P-VIN-1005996-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROINDUSTRIA\", project: \"Transformaci\u00f3n De Productos Derivados Del Mar...\", status: \"CONTINUA 2024\" },\r\n { id: 238, code: \"P-VIN-1005948-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROINDUSTRIA\", project: \"Valoraci\u00f3n E Innovaci\u00f3n De Los Residuos Org\u00e1nicos...\", status: \"CONTINUA 2024\" },\r\n { id: 239, code: \"P-VIN-1007769-2022\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"MEDIO AMBIENTE\", project: \"Monitoreo de la Calidad Ambiental Mediante Bioindicadores...\", status: \"CONTINUA 2024\" },\r\n { id: 240, code: \"P-VIN-1002493-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA, BIOLOG\u00cdA PESQUERA\", project: \"Fortalecimiento de las Organizaciones Pesqueras...\", status: \"CONTINUA 2024\" },\r\n { id: 241, code: \"P-VIN-1008734-2023\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Economia\", project: \"Fortalecimiento de los Comerciantes del Mercado Central...\", status: \"CONTINUA 2024\" },\r\n { id: 242, code: \"P-VIN-1007829-2022\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"TRABAJO SOCIAL\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo...\", status: \"CONTINUA 2024\" },\r\n { id: 243, code: \"P-VIN-1010607-2023\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"COMUNICACI\u00d3N\", project: \"Intervenci\u00f3n Comunicacional Estrat\u00e9gica...\", status: \"CONTINUA 2024\" },\r\n { id: 244, code: \"P-VIN-1003702-2020\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Arquitectura\", project: \"H\u00e1bitat saludable y diagn\u00f3stico de apoyo log\u00edstico...\", status: \"CONTINUA 2024\" },\r\n { id: 245, code: \"P-VIN-1007025-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Industrial\", project: \"Implementaci\u00f3n de dos vaca mec\u00e1nica para la producci\u00f3n de leche...\", status: \"CONTINUA 2024\" },\r\n { id: 246, code: \"P-VIN-1004938-2020\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Civil, El\u00e9ctrica, Naval\", project: \"Formaci\u00f3n de destrezas e impulso vocacional...\", status: \"CONTINUA 2024\" },\r\n { id: 247, code: \"P-VIN-1007332-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Civil\", project: \"Asistencia T\u00e9cnica Para El Fortalecimiento De La Red Vial...\", status: \"CONTINUA 2024\" },\r\n { id: 248, code: \"P-VIN-1009670-2023\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Electrica\", project: \"Evaluaci\u00f3n t\u00e9cnico-economica para el redise\u00f1o...\", status: \"CONTINUA 2024\" },\r\n { id: 249, code: \"P-VIN-1008791-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Fortalecimiento de la identidad cultural...\", status: \"CONTINUA 2024\" },\r\n { id: 250, code: \"P-VIN-1007737-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Escuela de Liderazgo 'Rosal\u00eda Arteaga'\", status: \"CONTINUA 2024\" },\r\n { id: 251, code: \"P-VIN-1007738-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en Competencias Laborales...\", status: \"CONTINUA 2024\" },\r\n { id: 252, code: \"P-VIN-1007782-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Intervenci\u00f3n En La Salud De La Poblaci\u00f3n Rural De Manab\u00ed\", status: \"CONTINUA 2024\" },\r\n { id: 253, code: \"P-VIN-1007793-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Plan de legalizaci\u00f3n, posesi\u00f3n, tenencia...\", status: \"CONTINUA 2024\" },\r\n { id: 254, code: \"P-VIN-1007783-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Reactivaci\u00f3n y Fortalecimiento en los Infocentros Zona 4\", status: \"CONTINUA 2024\" },\r\n { id: 255, code: \"P-VIN-1007781-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"DERECHO, PSICOLOG\u00cdA, TRABAJO SOCIAL\", project: \"Proyecto para la prevenci\u00f3n de G\u00e9nero en la Universidad...\", status: \"CONTINUA 2024\" },\r\n { id: 256, code: \"P-VIN-1006326-2022\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"Tecnolog\u00eda Superior en Riego...\", project: \"Asistencia T\u00e9cnica para la Instalaci\u00f3n de Sistemas de Riego...\", status: \"CONTINUA 2024\" },\r\n { id: 257, code: \"P-VIN-1009688-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"EXPLOTACI\u00d3N Y MANTENIMIENTO...\", project: \"Servicios de operaci\u00f3n y\/o mantenimiento...\", status: \"CONTINUA 2024\" },\r\n { id: 258, code: \"P-VIN-1009689-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"ELECTROMEC\u00c1NICA\", project: \"REPOTENCIACI\u00d3N DE SISTEMAS EL\u00c9CTRICOS...\", status: \"CONTINUA 2024\" },\r\n\r\n \/\/ PROYECTOS CERRADOS\r\n { id: 301, code: \"P-VIN-1006080-2022\", faculty: \"BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de empresas...\", project: \"Responsabilidad Social y liderazgo...\", status: \"CERRADO\" },\r\n { id: 302, code: \"P-VIN-1003514-2020\", faculty: \"CHONE\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Establecimiento de huertos org\u00e1nicos...\", status: \"CERRADO\" },\r\n { id: 303, code: \"P-VIN-1006479-2021\", faculty: \"PEDERNALES\", careers: \"Administracion de empresas\", project: \"Fomento al emprendimiento e innovaci\u00f3n...\", status: \"CERRADO\" },\r\n { id: 304, code: \"P-VIN-1007677-2021\", faculty: \"PEDERNALES\", careers: \"INGENIERIA AGROPECUARIA\", project: \"CAPACITACI\u00d3N EN EL MEJORAMIENTO PRODUCTIVO...\", status: \"CERRADO\" },\r\n { id: 305, code: \"P-VIN-1007821-2022\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"GESTI\u00d3N DE LA INFORMACI\u00d3N...\", project: \"Fortalecimiento de la Gesti\u00f3n Documental...\", status: \"CERRADO\" },\r\n { id: 306, code: \"P-VIN-1007828-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Turismo\", project: \"Proyecto para la Acreditaci\u00f3n de Gu\u00edas Locales...\", status: \"CERRADO\" },\r\n { id: 307, code: \"P-VIN-1005964-2021\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n Especial\", project: \"Aprendizaje en la diversidad para el fortalecimiento...\", status: \"CERRADO\" },\r\n { id: 308, code: \"P-VIN-1003348-2020\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Terapia Ocupacional\", project: \"Prevenci\u00f3n e intervenci\u00f3n de las alteraciones Psicomotrices...\", status: \"CERRADO\" },\r\n { id: 309, code: \"P-VIN-1007820-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Medicina\", project: \"Vigilancia Epidemiol\u00f3gica de las Enfermedades...\", status: \"CERRADO\" },\r\n { id: 310, code: \"P-VIN-1003659-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"An\u00e1lisis, Dise\u00f1o E Implementaci\u00f3n De Tiendas Online...\", status: \"CERRADO\" },\r\n { id: 311, code: \"P-VIN-1003692-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA\", project: \"Fomento de la Piscicultura en la Provincia de Manab\u00ed\", status: \"CERRADO\" },\r\n { id: 312, code: \"P-VIN-1003737-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"COMUNICACI\u00d3N\", project: \"Productos comunicacionales y estrat\u00e9gicos...\", status: \"CERRADO\" },\r\n { id: 313, code: \"P-VIN-1001661-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Econom\u00eda, Comunicaci\u00f3n\", project: \"Creaci\u00f3n y fortalecimiento de las actividades productivas...\", status: \"CERRADO\" },\r\n { id: 314, code: \"P-VIN-1003106-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Econom\u00eda\", project: \"Asesor\u00eda en estudios socio-econ\u00f3micos...\", status: \"CERRADO\" },\r\n { id: 315, code: \"P-VIN-1003701-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"DERECHO, PSICOLOGIA...\", project: \"Fortalecimiento de la equidad y lucha contra la violencia...\", status: \"CERRADO\" },\r\n { id: 316, code: \"P-VIN-1007827-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y CONSTRUCCI\u00d3N\", careers: \"Industrial\", project: \"Reingenier\u00eda de los Procesos de elaboraci\u00f3n de avena...\", status: \"CERRADO\" },\r\n { id: 317, code: \"P-VIN-1006682-2021\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"FACULTAD CIENCIAS DE LA SALUD\", project: \"Plan Vacuna ULEAM...\", status: \"CERRADO\" },\r\n ];\r\n\r\n \/\/ --- Components ---\r\n\r\n const Card = ({ children, className = '' }) => (\r\n <div className={`bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-100 flex flex-col ${className}`}>\r\n {children}\r\n <\/div>\r\n );\r\n\r\n \/\/ CHART 1: Careers (Count)\r\n \/\/ Adjusted: Increased bottom padding for labels\r\n const TopCareersChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value)) || 1;\r\n const chartHeight = 200;\r\n const barWidth = 35;\r\n const gap = 30;\r\n const width = Math.max(data.length * (barWidth + gap), 300);\r\n\r\n return (\r\n <div className=\"overflow-x-auto pb-5\">\r\n <svg width={width} height={chartHeight + 160} className=\"min-w-full\">\r\n <text x={0} y={15} fontSize=\"10\" fill=\"#94a3b8\" className=\"font-sans font-bold uppercase\">Proyectos<\/text>\r\n {data.map((d, i) => {\r\n const barHeight = (d.value \/ maxVal) * chartHeight;\r\n const x = i * (barWidth + gap) + 20;\r\n const y = chartHeight - barHeight + 30;\r\n \r\n return (\r\n <g key={i} transform={`translate(${x}, 0)`}>\r\n <rect \r\n x={0} \r\n y={y} \r\n width={barWidth} \r\n height={barHeight} \r\n fill=\"#1e3a8a\" \r\n rx=\"4\"\r\n \/>\r\n <text \r\n x={barWidth \/ 2} \r\n y={y - 8} \r\n textAnchor=\"middle\" \r\n fontSize=\"11\" \r\n fontWeight=\"bold\" \r\n fill=\"#1e293b\"\r\n className=\"font-sans\"\r\n >\r\n {d.value}\r\n <\/text>\r\n <text \r\n transform={`translate(${barWidth \/ 2}, ${chartHeight + 50}) rotate(45)`}\r\n textAnchor=\"start\" \r\n fontSize=\"10\" \r\n fill=\"#475569\"\r\n className=\"font-sans font-medium\"\r\n style={{ maxWidth: '120px' }}\r\n >\r\n {d.name.length > 25 ? d.name.substring(0, 22) + '...' : d.name}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 2: Donut (Status Count)\r\n const StatusDonutChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#64748b'];\r\n const radius = 70;\r\n const centerX = 90;\r\n const centerY = 90;\r\n let startPercent = 0;\r\n\r\n return (\r\n <div className=\"flex flex-wrap items-center justify-center gap-10 mt-4\">\r\n <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\r\n {data.map((slice, i) => {\r\n if (slice.value === 0) return null;\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const pathData = slicePercent > 0.99 \r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n\r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i % colors.length]} transform=\"rotate(-90 90 90)\" \/>;\r\n })}\r\n <circle cx={centerX} cy={centerY} r={radius * 0.6} fill=\"white\" \/>\r\n <text x={centerX} y={centerY} textAnchor=\"middle\" dy=\"0.3em\" fontWeight=\"bold\" fontSize=\"20\" fill=\"#334155\" className=\"font-sans\">{total}<\/text>\r\n <\/svg>\r\n <div className=\"flex flex-col gap-3\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-2 text-sm\">\r\n <div style={{ backgroundColor: colors[i % colors.length] }} className=\"w-3 h-3 rounded-sm\" \/>\r\n <span className=\"text-slate-800 font-semibold\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">({item.value})<\/span>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 3: Horizontal Bar (Projects by Unit)\r\n \/\/ Adjusted: X axis offset to 220 to prevent text overlapping\r\n const HorizontalBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n const rowHeight = 40; \/\/ Increased row height slightly\r\n const width = 450; \/\/ Increased total width context\r\n const textWidth = 220; \/\/ Explicit text width reserve\r\n\r\n return (\r\n <div className=\"overflow-x-auto\">\r\n <svg width=\"100%\" height={data.length * rowHeight} className=\"min-h-[300px] min-w-[350px]\">\r\n {data.map((d, i) => {\r\n \/\/ Calculate bar width relative to remaining space\r\n const barWidth = (d.value \/ maxVal) * (width - textWidth - 50); \r\n return (\r\n <g key={d.name} transform={`translate(0, ${i * rowHeight})`}>\r\n <text x={0} y={18} fontSize=\"11\" fill=\"#475569\" className=\"font-sans font-medium\" dominantBaseline=\"middle\">\r\n {d.name.length > 35 ? d.name.substring(0, 32) + '...' : d.name}\r\n <\/text>\r\n <rect x={textWidth} y={5} width={barWidth} height={20} fill=\"#3b82f6\" rx=\"4\" \/>\r\n <text x={textWidth + barWidth + 8} y={19} fontSize=\"11\" fontWeight=\"bold\" fill=\"#1e293b\" dominantBaseline=\"middle\" className=\"font-sans\">\r\n {d.value}\r\n <\/text>\r\n <\/g>\r\n )\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 4: Comparison Pie (Extensions vs Faculties - COUNT)\r\n const ComparisonPieChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#f43f5e', '#3b82f6', '#10b981']; \r\n let startPercent = 0;\r\n const centerX = 100;\r\n const centerY = 100;\r\n const radius = 80;\r\n\r\n return (\r\n <div className=\"flex flex-col items-center mt-4\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\r\n {data.map((slice, i) => {\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n \r\n const pathData = slicePercent > 0.999\r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n \r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i]} transform=\"rotate(-90 100 100)\" \/>;\r\n })}\r\n <\/svg>\r\n <div className=\"flex gap-4 mt-6 justify-center flex-wrap\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-1.5\">\r\n <div style={{ backgroundColor: colors[i] }} className=\"w-3 h-3 rounded-full\" \/>\r\n <div className=\"text-xs text-slate-700\">\r\n <span className=\"font-bold block\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">{formatPercent(item.value\/total)}<\/span>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProjectTable = ({ data }) => {\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [facultyFilter, setFacultyFilter] = useState(\"TODAS LAS FACULTADES\");\r\n const [statusFilter, setStatusFilter] = useState(\"TODOS\");\r\n\r\n const uniqueFaculties = useMemo(() => {\r\n const faculties = new Set(data.map(d => d.faculty));\r\n return [\"TODAS LAS FACULTADES\", ...Array.from(faculties).sort()];\r\n }, [data]);\r\n\r\n \/\/ Simplified Status Options excluding 2024\r\n const statusOptions = [\"TODOS\", \"NUEVO\", \"CONTINUA\", \"CERRADO\"];\r\n\r\n const filteredData = useMemo(() => {\r\n return data.filter(item => {\r\n const matchesSearch = \r\n item.project.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.faculty.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.careers.toLowerCase().includes(searchTerm.toLowerCase());\r\n \r\n const matchesFaculty = facultyFilter === \"TODAS LAS FACULTADES\" || item.faculty === facultyFilter;\r\n const matchesStatus = statusFilter === \"TODOS\" || item.status.includes(statusFilter);\r\n\r\n return matchesSearch && matchesFaculty && matchesStatus;\r\n });\r\n }, [data, searchTerm, facultyFilter, statusFilter]);\r\n\r\n return (\r\n <div>\r\n <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\r\n <div className=\"relative flex-grow\">\r\n <input \r\n type=\"text\" \r\n placeholder=\"Buscar por proyecto, c\u00f3digo, facultad o carrera...\" \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm\"\r\n value={searchTerm}\r\n onChange={e => setSearchTerm(e.target.value)}\r\n \/>\r\n <\/div>\r\n \r\n <div className=\"min-w-[200px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={facultyFilter}\r\n onChange={e => setFacultyFilter(e.target.value)}\r\n >\r\n {uniqueFaculties.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n\r\n <div className=\"min-w-[150px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={statusFilter}\r\n onChange={e => setStatusFilter(e.target.value)}\r\n >\r\n {statusOptions.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"overflow-x-auto max-h-[500px] overflow-y-auto border border-slate-200 rounded-lg\">\r\n <table className=\"w-full border-collapse text-left text-sm\">\r\n <thead className=\"sticky top-0 bg-white z-10 shadow-sm\">\r\n <tr className=\"bg-slate-50 border-b border-slate-200\">\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase w-1\/4\">Facultad \/ Unidad<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase\">Proyecto<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase text-center w-28\">Estado<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase text-right w-1\/4\">Carreras<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {filteredData.map((item, index) => (\r\n <tr key={item.id} className=\"hover:bg-slate-50 transition-colors\">\r\n <td className=\"p-3 align-top text-xs font-bold text-slate-600\">\r\n {item.faculty}\r\n <\/td>\r\n <td className=\"p-3 align-top\">\r\n <div className=\"font-semibold text-slate-800 text-xs mb-0.5\">{item.project}<\/div>\r\n <div className=\"text-[10px] text-slate-500 uppercase tracking-wide\">{item.code}<\/div>\r\n <\/td>\r\n <td className=\"p-3 align-top text-center\">\r\n <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold ${\r\n item.status.includes('CONTINUA') ? 'bg-emerald-100 text-emerald-800' : \r\n item.status.includes('NUEVO') ? 'bg-blue-100 text-blue-800' : \r\n 'bg-slate-100 text-slate-500'\r\n }`}>\r\n {item.status.split(' ')[0]}\r\n <\/span>\r\n <\/td>\r\n <td className=\"p-3 align-top text-right text-xs text-slate-500\">\r\n {item.careers}\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n {filteredData.length === 0 && (\r\n <tr>\r\n <td colSpan={4} className=\"p-8 text-center text-slate-500\">\r\n No se encontraron resultados para su b\u00fasqueda.\r\n <\/td>\r\n <\/tr>\r\n )}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ --- Main App ---\r\n\r\n const Dashboard2024 = () => {\r\n const [data] = useState(PROJECT_DATA_2024);\r\n\r\n \/\/ --- Calculations ---\r\n\r\n const totalProjects = data.length;\r\n\r\n \/\/ 1. Top Careers by Count\r\n const topCareers = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n const mainCareer = d.careers.split(',')[0].trim().toUpperCase();\r\n if(mainCareer.length > 2) acc[mainCareer] = (acc[mainCareer] || 0) + 1;\r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 8);\r\n }, [data]);\r\n\r\n \/\/ 2. Count by Faculty\r\n const countByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n \/\/ Normalize names\r\n let name = d.faculty;\r\n if(name.includes('CIENCIAS ADMINISTRATIVAS')) name = 'CIENCIAS ADMIN.';\r\n if(name.includes('CIENCIAS DE LA EDUCACI\u00d3N')) name = 'EDUCACI\u00d3N';\r\n if(name.includes('CIENCIAS DE LA VIDA')) name = 'VIDA Y TECNOLOG\u00cdAS';\r\n if(name.includes('CIENCIAS SOCIALES')) name = 'SOCIALES';\r\n if(name.includes('INGENIER\u00cdA, INDUSTRIA')) name = 'INGENIER\u00cdA';\r\n if(name.includes('PROYECTO INSTITUCIONAL')) name = 'INSTITUCIONAL';\r\n \r\n acc[name] = (acc[name] || 0) + 1; \r\n });\r\n return Object.entries(acc).map(([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value).slice(0, 10);\r\n }, [data]);\r\n\r\n \/\/ 3. Status Count\r\n const statusCounts = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n let k = d.status.includes('CERRADO') ? 'CERRADO' : d.status.includes('NUEVO') ? 'NUEVO' : 'CONTINUA';\r\n acc[k] = (acc[k] || 0) + 1; \r\n });\r\n return Object.entries(acc).map(([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n \/\/ 4. Extensions vs Faculties (Count)\r\n const extVsFac = useMemo(() => {\r\n let ext = 0, fac = 0, inst = 0;\r\n data.forEach(d => {\r\n const f = d.faculty.toUpperCase();\r\n if (f.includes('EXTENSI\u00d3N') || f.includes('CHONE') || f.includes('EL CARMEN') || f.includes('PEDERNALES') || f.includes('BAH\u00cdA') || f.includes('TOSAGUA')) ext += 1;\r\n else if (f.includes('FACULTAD') || f.includes('CIENCIAS') || f.includes('INGENIER\u00cdA')) fac += 1;\r\n else inst += 1;\r\n });\r\n return [\r\n { name: 'Facultades', value: fac },\r\n { name: 'Extensiones\/Unidades', value: ext },\r\n { name: 'Institucional\/Otros', value: inst }\r\n ];\r\n }, [data]);\r\n\r\n return (\r\n <div className=\"max-w-7xl mx-auto px-6 py-10 min-h-screen\">\r\n \r\n <header className=\"mb-10 border-b border-gray-200 pb-6 flex flex-col md:flex-row md:items-end justify-between gap-6\">\r\n <div>\r\n <h1 className=\"text-4xl font-extrabold text-primary mb-2 uppercase\">Dashboard de Vinculaci\u00f3n 2024<\/h1>\r\n <p className=\"text-slate-500 text-lg max-w-2xl\">\r\n An\u00e1lisis de cartera de proyectos: Nuevos, Continuos y Cerrados.\r\n <\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <div className=\"text-xs text-slate-400 uppercase font-bold tracking-wider mb-1\">Total Proyectos<\/div>\r\n <div className=\"text-3xl font-extrabold text-accent\">{totalProjects}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* ROW 1: Top Careers & Top Faculties *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Carreras con Mayor Participaci\u00f3n<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-8 leading-relaxed\">\r\n Las carreras de <strong>Tecnolog\u00edas de la Informaci\u00f3n, Agropecuaria y Turismo<\/strong> lideran la oferta de vinculaci\u00f3n. \r\n Esto refleja una fuerte orientaci\u00f3n hacia el desarrollo tecnol\u00f3gico y productivo de la regi\u00f3n.\r\n <\/p>\r\n <TopCareersChart data={topCareers} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Proyectos por Unidad Acad\u00e9mica<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-8 leading-relaxed\">\r\n Las <strong>Extensiones<\/strong> (especialmente Chone, El Carmen y Pedernales) muestran un volumen significativo de proyectos, \r\n demostrando un fuerte despliegue territorial descentralizado.\r\n <\/p>\r\n <HorizontalBarChart data={countByFaculty} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 2: Comparisons & Status *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Distribuci\u00f3n Regional vs Central<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-6 leading-relaxed\">\r\n Existe un equilibrio saludable entre la Sede Central (Facultades) y las Extensiones, lo que garantiza que la vinculaci\u00f3n llegue tanto a la zona urbana como rural.\r\n <\/p>\r\n <ComparisonPieChart data={extVsFac} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Estado de la Cartera<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-6 leading-relaxed\">\r\n La mayor\u00eda de proyectos se encuentran en ejecuci\u00f3n (<strong>CONTINUA<\/strong>), asegurando estabilidad. \r\n La incorporaci\u00f3n de proyectos <strong>NUEVOS<\/strong> asegura la renovaci\u00f3n de la oferta pertinente.\r\n <\/p>\r\n <StatusDonutChart data={statusCounts} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 3: Detailed Table *\/}\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-4 uppercase\">Detalle de Proyectos<\/h3>\r\n <ProjectTable data={data} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = createRoot(document.getElementById('root-2024'));\r\n root.render(<Dashboard2024 \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1020950702\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1020950702\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-fb4cd05 e-con-full e-flex e-con e-child\" data-id=\"fb4cd05\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc9ec45 elementor-widget elementor-widget-html\" data-id=\"fc9ec45\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Dashboard de Vinculaci\u00f3n<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#1e3a8a', \/\/ Dark Blue\r\n accent: '#3b82f6', \/\/ Blue\r\n slate: {\r\n 850: '#1e293b', \/\/ Custom dark\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ --- Helper Functions ---\r\n\r\n \/\/ Helper to parse budget strings like \"$ 2.250,00\" -> 2250.00\r\n const p = (str) => {\r\n if (!str) return 0;\r\n const clean = str.replace(\/\\$\/g, '').replace(\/\\.\/g, '').replace(',', '.').trim();\r\n return parseFloat(clean) || 0;\r\n };\r\n\r\n const formatCurrency = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(val);\r\n\r\n const formatNumber = (val) => \r\n new Intl.NumberFormat('es-MX').format(val);\r\n\r\n const formatPercent = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'percent', minimumFractionDigits: 1 }).format(val);\r\n\r\n \/\/ --- Data ---\r\n\r\n const INITIAL_DATA = [\r\n { id: 1, code: \"P-VIN-1011647-2024\", faculty: \"EXTENSI\u00d3N BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Econom\u00eda Circular: Una alternativa para el desarrollo sostenible...\", status: \"CONTINUA\", budget: p(\"$ 2.250,00\") },\r\n { id: 2, code: \"P-VIN-1005985-2021\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Administraci\u00f3n de Empresas\", project: \"Asistencia T\u00e9cnica y Administrativa A Productores Agropecuarios...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 3, code: \"P-VIN-1005944-2021\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Pedagog\u00eda de los Idiomas...\", project: \"El pensamiento computacional y la ense\u00f1anza del idioma Ingl\u00e9s...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 4, code: \"P-VIN-1006516-2022\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria - Administraci\u00f3n\", project: \"Implementaci\u00f3n y fortalecimiento de huertos urbanos...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 5, code: \"P-VIN-1010675-2024\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"VARIAS\", project: \"Matem\u00e1ticas y F\u00edsica recreativa para estudiantes...\", status: \"CONTINUA\", budget: p(\"$ 1.500,00\") },\r\n { id: 6, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria, Agronegocios\", project: \"Fortalecimiento integral de capacidades productivas...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 7, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Enfermer\u00eda, Psicolog\u00eda, Idiomas\", project: \"Fortalecimiento integral mediante actividades multidisciplinarias...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 8, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria\", project: \"Dise\u00f1o, estructuraci\u00f3n e implementaci\u00f3n de registros ganaderos...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 9, code: \"P-VIN-1007514-2021\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas agr\u00edcolas...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 10, code: \"P-VIN-1005933-2021\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Ingenier\u00eda agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas pecuarios...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 11, code: \"P-VIN-1007810-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Contabilidad y Auditor\u00eda\", project: \"Capacitaci\u00f3n para el desarrollo de las capacidades empresariales...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 12, code: \"P-VIN-1007844-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"EDUCACI\u00d3N B\u00c1SICA\", project: \"Acompa\u00f1amiento a ni\u00f1os y J\u00f3venes en el Proceso De Ense\u00f1anza...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 13, code: \"P-VIN-1007845-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n\", project: \"Fortalecimiento de las habilidades de la Informaci\u00f3n y Comunicaci\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 14, code: \"P-VIN-1012570-2024\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"INGENIER\u00cdA EN SOFTWARE\", project: \"Posicionamiento Digital de Peque\u00f1as y Medianas Empresas...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 15, code: \"P-VIN-1014157-2025\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Administraci\u00f3n, Agronegocios\", project: \"Centro de Apoyo y Asesor\u00eda Gratuita en la Gesti\u00f3n Empresarial...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 16, code: \"P-VIN-1014160-2025\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"VARIAS\", project: \"Fomento del desarrollo socioecon\u00f3mico mediante la producci\u00f3n sostenible...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 17, code: \"P-VIN-1010392-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Biolog\u00eda\", project: \"Especies vulnerables de las pesquer\u00edas y desarrollo productivo...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 18, code: \"P-VIN-1009662-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Electromec\u00e1nica\", project: \"Formaci\u00f3n y asistencia t\u00e9cnica para las instalaciones a talleres...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 19, code: \"P-VIN-1007841-2022\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Turismo\", project: \"Fortalecimiento del talento humano de los restaurantes...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 20, code: \"P-VIN-1010582-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Arquitectura\", project: \"Intervenci\u00f3n territorial mancomunada mediante la aplicaci\u00f3n de la arquitectura...\", status: \"CONTINUA\", budget: 0 },\r\n { id: 21, code: \"P-VIN-1013583-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"AGROPECUARIA, AGRONEGOCIOS\", project: \"Desarrollo Sostenible de las Actividades Pesqueras, Acu\u00edcolas...\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 22, code: \"P-VIN-1012604-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"EDUCACI\u00d3N Y ENFERMER\u00cdA\", project: \"Educaci\u00f3n y Promoci\u00f3n de Salud En las Parroquias Rurales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 23, code: \"P-VIN-1012603-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"ADMINISTRACI\u00d3N, ECONOM\u00cdA\", project: \"Escuela Formativa para el Fortalecimiento Comunitario...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 24, code: \"P-VIN-1005971-2021\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"Administraci\u00f3n, Mercadotecnia\", project: \"Fortalece tu Mi Pyme.\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 25, code: \"P-VIN-1010604-2023\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"Administraci\u00f3n, Mercadotecnia\", project: \"Fortalecimiento de las Actividades Econ\u00f3micas, Comerciales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 26, code: \"P-VIN-1014125-2025\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"ADMINISTRACI\u00d3N, AUDITOR\u00cdA...\", project: \"Empod\u00e9rate Comercialmente Manta\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 27, code: \"P-VIN-1007840-2022\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"CONTABILIDAD Y AUDITOR\u00cdA\", project: \"Fortalecimiento de las Capacidades Sociales, Cognitivas...\", status: \"CERRADO 2024\", budget: 0 },\r\n { id: 27, code: \"P-VIN-1006033-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Pedagog\u00eda Actividad F\u00edsica\", project: \"Actividad f\u00edsica, deporte y recreaci\u00f3n para detecci\u00f3n de talentos...\", status: \"CONTINUA\", budget: p(\"$ 5.000,00\") },\r\n { id: 28, code: \"P-VIN-1007968-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Concursos y Simposios de Arte ULEAM 2022\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 29, code: \"P-VIN-1007967-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Cursos y Talleres para ni\u00f1os, adolescentes y adultos...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 30, code: \"P-VIN-1009652-2023\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Educaci\u00f3n Especial\", project: \"Espacios de atenci\u00f3n pedag\u00f3gica inclusiva para el desarrollo...\", status: \"CONTINUA\", budget: p(\"$ 2.135,65\") },\r\n { id: 31, code: \"P-VIN-1008613-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Expo Subasta de Arte en el desarrollo del mercado del arte...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 32, code: \"P-VIN-1009651-2023\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Educaci\u00f3n especial\", project: \"Innovaci\u00f3n y Diversidad: Construyendo Comunidades Inclusivas...\", status: \"CONTINUA\", budget: p(\"$ 1.044,13\") },\r\n { id: 33, code: \"P-VIN-1008790-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Hoteler\u00eda Turismo\", project: \"Innovaci\u00f3n y fortalecimiento de Gastrotur para el desarrollo...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 34, code: \"P-VIN-1005899-2021\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Pedagog\u00eda lengua, idiomas...\", project: \"Proyecto Interdisciplinario de Alfabetizaci\u00f3n Integral...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 35, code: \"P-VIN-1014111-2025\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"TURISMO\", project: \"Empoderamiento de actores locales de turismo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 36, code: \"P-VIN-1014120-2025\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"HOSPITALIDAD Y HOTELER\u00cdA\", project: \"Enfoque Integral en la Experiencia del Cliente...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 37, code: \"FACULTAD CIENCIAS DE LA SALUD\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"SOCIOLOGIA\", project: \"Centro de Consultor\u00eda e Intervenci\u00f3n Sociol\u00f3gica...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 38, code: \"P-VIN-1006082-2022\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Medicina\", project: \"Estrategia Institucional para que el Ecuador crezca sin Desnutrici\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 39, code: \"P-VIN-1007824-2022\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"ENFERMER\u00cdA\", project: \"Promoci\u00f3n de la Salud y Prevenci\u00f3n de enfermedades...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 40, code: \"P-VIN-1012569-2024\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n Odontol\u00f3gica y Promoci\u00f3n de la Salud Bucodental...\", status: \"CONTINUA\", budget: p(\"$ 15.418,00\") },\r\n { id: 41, code: \"P-VIN-1012542-2024\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Psicolog\u00eda\", project: \"Atenci\u00f3n psicol\u00f3gica comunitaria en la comunidad universitaria\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 42, code: \"P-VIN-1006007-2021\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia t\u00e9cnica a productores agropecuarios para fortalecer...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 43, code: \"P-VIN-1006006-2021\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia T\u00e9cnica Sobre Huertos Urbanos Y Rurales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 44, code: \"P-VIN-1002493-2020\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA, BIOLOG\u00cdA PESQUERA\", project: \"Fortalecimiento de las Organizaciones Pesqueras en la provincia...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 45, code: \"P-VIN-1009656-2023\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"INGENIER\u00cdA SISTEMAS\", project: \"Servicios y Soluciones Tecnol\u00f3gicas Vinculantes...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 46, code: \"P-VIN-1012566-2024\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"CARRERA AGROINDUSTRIA\", project: \"Alimentaci\u00f3n saludable\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 47, code: \"P-VIN-1012567-2024\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"MEDIO AMBIENTE\", project: \"EcoMar: Conciencia Azul en Acci\u00f3n\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 48, code: \"P-VIN-1007829-2022\", faculty: \"FACULTAD SOCIALES\", careers: \"TRABAJO SOCIAL\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo asociados...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 49, code: \"P-VIN-1008734-2023\", faculty: \"FACULTAD SOCIALES\", careers: \"Econom\u00eda\", project: \"Fortalecimiento de los sectores productivos de Manta...\", status: \"CONTINUA\", budget: p(\"$ 1.400,00\") },\r\n { id: 50, code: \"P-VIN-1010607-2023\", faculty: \"FACULTAD SOCIALES\", careers: \"COMUNICACI\u00d3N\", project: \"Intervenci\u00f3n Comunicacional Estrat\u00e9gica para el fortalecimiento...\", status: \"CONTINUA\", budget: p(\"$ 7.150,00\") },\r\n { id: 51, code: \"P-VIN-1012565-2024\", faculty: \"FACULTAD SOCIALES\", careers: \"Derecho\", project: \"Buenas Pr\u00e1cticas Laborales, Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 52, code: \"P-VIN-1014158-2025\", faculty: \"FACULTAD SOCIALES\", careers: \"Trabajo Social\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 53, code: \"P-VIN-1007332-2022\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Civil\", project: \"Asistencia T\u00e9cnica Para El Inventario De La Red Vial...\", status: \"CONTINUA\", budget: p(\"$ 200,00\") },\r\n { id: 54, code: \"P-VIN-1009670-2023\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Electrica\", project: \"Evaluaci\u00f3n t\u00e9cnico-economica para el montaje y restructuraci\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 55, code: \"P-VIN-1004940-2020\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Civil El\u00e9ctrica Naval\", project: \"Formaci\u00f3n de destrezas e impulso vocacional en el \u00e1mbito ingenieril...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 56, code: \"P-VIN-1003702-2020\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Arquitectura\", project: \"H\u00e1bitat saludable y diagn\u00f3stico de apoyo t\u00e9cnico...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 57, code: \"P-VIN-1012562-2024\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Ingenier\u00eda de alimentos\", project: \"Identificaci\u00f3n de metales pesados a los productos...\", status: \"CONTINUA\", budget: p(\"$ 2.500,00\") },\r\n { id: 58, code: \"P-VIN-1007025-2022\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Industrial\", project: \"Implementaci\u00f3n de dos plantas pilotos para la producci\u00f3n de leche...\", status: \"SUSPENDIDO\", budget: 0 },\r\n { id: 59, code: \"P-VIN-1013679-2025\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"ARQUITECTURA\", project: \"Arquitectura, Urbanismo y Territorio para la Inclusi\u00f3n y el Desarrollo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 60, code: \"P-VIN-1014159-2025\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"INGENIER\u00cdA MAR\u00cdTIMA\", project: \"Programa de Inspecci\u00f3n y Capacitaci\u00f3n para la Seguridad de las Embarcaciones...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 61, code: \"P-VIN-1007738-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en competencias laborales para la Reactivaci\u00f3n...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 62, code: \"P-VIN-1008791-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Arte y cultura para la identidad cultural para el desarrollo integral...\", status: \"CONTINUA\", budget: p(\"$ 100.000,00\") },\r\n { id: 63, code: \"P-VIN-1007782-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Desarrollo Agropecuario De La Poblaci\u00f3n Rural De Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 64.902,22\") },\r\n { id: 64, code: \"P-VIN-1007781-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"DERECHO ECONOMIA TRABAJO SOCIAL\", project: \"Proyecto para la prevenci\u00f3n de G\u00e9nero en la Universidad Laica Eloy Alfaro...\", status: \"CONTINUA\", budget: p(\"$ 17.700,00\") },\r\n { id: 65, code: \"P-VIN-1013897-2024\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Creaci\u00f3n e implementaci\u00f3n operativa del COAL Centro de Orientaci\u00f3n y Apoyo...\", status: \"CONTINUA\", budget: p(\"$ 6.500,00\") },\r\n { id: 66, code: \"P-VIN-1013899-2024\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Turismo Cient\u00edfico Sostenible en las \u00c1reas de Conservaci\u00f3n de Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 7.000,00\") },\r\n { id: 67, code: \"PROYECTO INSTITUCIONAL\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Tecnolog\u00eda Superior en Riego y Producci\u00f3n Agr\u00edcola Ingenier\u00eda Agropecuaria\", project: \"Fomento del Desarrollo Socioecon\u00f3mico Mediante la Producci\u00f3n Sostenible de Plantas de Cacao...\", status: \"CONTINUA\", budget: p(\"$ 225.300,00\") },\r\n { id: 68, code: \"P-VIN-1014156-2025\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en Competencias Laborales para la Reactivaci\u00f3n econ\u00f3mica de la zona 4. Fase II\", status: \"NUEVO 2025\", budget: p(\"$ 70.000,00\") },\r\n { id: 69, code: \"P-VIN-1006326-2022\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"Tecnolog\u00eda Superior en Riego y Producci\u00f3n Agr\u00edcola. Electromec\u00e1nica\", project: \"Asistencia T\u00e9cnica para la Instalaci\u00f3n de Sistemas de Riego y Producci\u00f3n Agr\u00edcola...\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 70, code: \"P-VIN-1009689-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"ELECTROMEC\u00c1NICA\", project: \"Repotenciaci\u00f3n de Sistemas el\u00e9ctricos y Electromec\u00e1nicos en Baja Tensi\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 71, code: \"P-VIN-1009688-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"EXPLOTACI\u00d3N Y MANTENIMIENTO DE EQUIPOS BIOM\u00c9DICOS\", project: \"Servicios de operaci\u00f3n y\/o mantenimiento de tecnolog\u00edas biom\u00e9dicas...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n ];\r\n\r\n \/\/ --- Components ---\r\n\r\n const Card = ({ children, className = '' }) => (\r\n <div className={`bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-100 flex flex-col ${className}`}>\r\n {children}\r\n <\/div>\r\n );\r\n\r\n \/\/ CHART 1: Vertical Bar (Budget)\r\n const BudgetBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value)) || 1;\r\n const chartHeight = 200;\r\n const barWidth = 30;\r\n const gap = 25;\r\n const width = Math.max(data.length * (barWidth + gap), 300);\r\n\r\n return (\r\n <div className=\"overflow-x-auto pb-5\">\r\n <svg width={width} height={chartHeight + 120} className=\"min-w-full\">\r\n {data.map((d, i) => {\r\n const barHeight = (d.value \/ maxVal) * chartHeight;\r\n const x = i * (barWidth + gap) + 10;\r\n const y = chartHeight - barHeight;\r\n \r\n return (\r\n <g key={i} transform={`translate(${x}, 0)`}>\r\n <rect x={0} y={y} width={barWidth} height={barHeight} fill=\"#1e3a8a\" rx=\"4\" \/>\r\n <text x={barWidth \/ 2} y={y - 8} textAnchor=\"middle\" fontSize=\"9\" fontWeight=\"bold\" fill=\"#1e293b\" className=\"font-sans\">\r\n ${(d.value \/ 1000).toFixed(0)}k\r\n <\/text>\r\n <text\r\n transform={`translate(${barWidth \/ 2}, ${chartHeight + 15}) rotate(45)`}\r\n textAnchor=\"start\"\r\n fontSize=\"9\"\r\n fill=\"#64748b\"\r\n className=\"font-sans font-medium\"\r\n >\r\n {d.name.length > 20 ? d.name.substring(0, 18) + '...' : d.name}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 2: Donut (Status Count)\r\n const StatusDonutChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#64748b'];\r\n const radius = 70;\r\n const centerX = 90;\r\n const centerY = 90;\r\n let startPercent = 0;\r\n\r\n return (\r\n <div className=\"flex flex-wrap items-center justify-center gap-5\">\r\n <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\r\n {data.map((slice, i) => {\r\n if (slice.value === 0) return null;\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const pathData = slicePercent > 0.99 \r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n\r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i % colors.length]} transform=\"rotate(-90 90 90)\" \/>;\r\n })}\r\n <circle cx={centerX} cy={centerY} r={radius * 0.6} fill=\"white\" \/>\r\n <text x={centerX} y={centerY} textAnchor=\"middle\" dy=\"0.3em\" fontWeight=\"bold\" fontSize=\"20\" fill=\"#334155\" className=\"font-sans\">\r\n {total}\r\n <\/text>\r\n <\/svg>\r\n <div className=\"flex flex-col gap-2\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-2 text-xs\">\r\n <div style={{ backgroundColor: colors[i % colors.length] }} className=\"w-2.5 h-2.5 rounded-sm\" \/>\r\n <span className=\"text-slate-800 font-semibold\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">({item.value})<\/span>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 3: Horizontal Bar (Projects by Unit)\r\n const HorizontalBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n const rowHeight = 35;\r\n const width = 300;\r\n const labelWidth = 200;\r\n\r\n return (\r\n <svg width=\"100%\" height={data.length * rowHeight} className=\"min-h-[300px]\">\r\n {data.map((d, i) => {\r\n const barWidth = (d.value \/ maxVal) * (width - labelWidth);\r\n\r\n return (\r\n <g key={d.name} transform={`translate(0, ${i * rowHeight})`}>\r\n <text x={0} y={18} fontSize=\"11\" fill=\"#475569\" dominantBaseline=\"middle\" className=\"font-sans font-medium\">\r\n {d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name}\r\n <\/text>\r\n <rect x={labelWidth} y={5} width={barWidth} height={20} fill=\"#3b82f6\" rx=\"4\" \/>\r\n <text x={labelWidth + barWidth + 8} y={19} fontSize=\"11\" fontWeight=\"bold\" fill=\"#1e293b\" dominantBaseline=\"middle\" className=\"font-sans\">\r\n {d.value}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n );\r\n };\r\n\r\n \/\/ CHART 4: Comparison Pie (Extensions vs Faculties)\r\n const ComparisonPieChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#f43f5e', '#3b82f6', '#10b981']; \r\n let startPercent = 0;\r\n const centerX = 100;\r\n const centerY = 100;\r\n const radius = 80;\r\n\r\n return (\r\n <div className=\"flex flex-col items-center\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\r\n {data.map((slice, i) => {\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n \r\n const pathData = slicePercent > 0.999\r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n \r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i]} transform=\"rotate(-90 100 100)\" \/>;\r\n })}\r\n <\/svg>\r\n <div className=\"flex gap-4 mt-4 justify-center flex-wrap\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-1.5\">\r\n <div style={{ backgroundColor: colors[i] }} className=\"w-3 h-3 rounded-full\" \/>\r\n <div className=\"text-xs text-slate-700\">\r\n <span className=\"font-bold block\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">{formatPercent(item.value\/total)}<\/span>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 5: Investment by Status (Simple Bar)\r\n const InvestmentStatusChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n return (\r\n <div className=\"flex flex-col gap-3 mt-2.5\">\r\n {data.map((item) => (\r\n <div key={item.name}>\r\n <div className=\"flex justify-between text-xs mb-1\">\r\n <span className=\"font-semibold text-slate-700\">{item.name}<\/span>\r\n <span className=\"font-bold text-slate-900\">{formatCurrency(item.value)}<\/span>\r\n <\/div>\r\n <div className=\"w-full h-3 bg-slate-100 rounded-full overflow-hidden\">\r\n <div \r\n style={{ width: `${(item.value \/ maxVal) * 100}%` }}\r\n className={`h-full rounded-full ${item.name.includes('CONTINUA') ? 'bg-emerald-500' : 'bg-blue-500'}`}\r\n \/>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProjectTable = ({ data }) => {\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [facultyFilter, setFacultyFilter] = useState(\"TODAS LAS FACULTADES\");\r\n const [statusFilter, setStatusFilter] = useState(\"TODOS\");\r\n\r\n const uniqueFaculties = useMemo(() => {\r\n const faculties = new Set(data.map(d => d.faculty));\r\n return [\"TODAS LAS FACULTADES\", ...Array.from(faculties).sort()];\r\n }, [data]);\r\n\r\n const statusOptions = [\"TODOS\", \"NUEVO\", \"CONTINUA\", \"CERRADO\"];\r\n\r\n const filteredData = useMemo(() => {\r\n return data.filter(item => {\r\n const matchesSearch = \r\n item.project.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.faculty.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.careers.toLowerCase().includes(searchTerm.toLowerCase());\r\n \r\n const matchesFaculty = facultyFilter === \"TODAS LAS FACULTADES\" || item.faculty === facultyFilter;\r\n const matchesStatus = statusFilter === \"TODOS\" || item.status.includes(statusFilter);\r\n\r\n return matchesSearch && matchesFaculty && matchesStatus;\r\n });\r\n }, [data, searchTerm, facultyFilter, statusFilter]);\r\n\r\n return (\r\n <div>\r\n <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\r\n <div className=\"relative flex-grow\">\r\n <input \r\n type=\"text\" \r\n placeholder=\"Buscar por proyecto, c\u00f3digo, facultad o carrera...\" \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm\"\r\n value={searchTerm}\r\n onChange={e => setSearchTerm(e.target.value)}\r\n \/>\r\n <\/div>\r\n \r\n <div className=\"min-w-[200px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={facultyFilter}\r\n onChange={e => setFacultyFilter(e.target.value)}\r\n >\r\n {uniqueFaculties.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n\r\n <div className=\"min-w-[150px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={statusFilter}\r\n onChange={e => setStatusFilter(e.target.value)}\r\n >\r\n {statusOptions.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"overflow-x-auto max-h-[500px] overflow-y-auto border border-slate-200 rounded-lg\">\r\n <table className=\"w-full border-collapse text-left text-sm\">\r\n <thead className=\"sticky top-0 bg-white z-10 shadow-sm\"><\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {filteredData.map((item) => (\r\n <tr key={item.id} className=\"hover:bg-slate-50 transition-colors\">\r\n <td className=\"p-3 align-top text-xs font-bold text-slate-600 w-1\/4\">\r\n {item.faculty}\r\n <\/td>\r\n <td className=\"p-3 align-top\">\r\n <div className=\"font-semibold text-slate-800 text-xs mb-0.5\">{item.project}<\/div>\r\n <div className=\"text-[10px] text-slate-500 uppercase tracking-wide\">{item.code}<\/div>\r\n <\/td>\r\n <td className=\"p-3 align-top w-28\">\r\n <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold ${\r\n item.status.includes('CONTINUA') ? 'bg-emerald-100 text-emerald-800' : \r\n item.status.includes('NUEVO') ? 'bg-blue-100 text-blue-800' : \r\n 'bg-slate-100 text-slate-500'\r\n }`}>\r\n {item.status.split(' ')[0]}\r\n <\/span>\r\n <\/td>\r\n <td className=\"p-3 align-top text-right font-bold text-slate-800 w-28\">\r\n {item.budget > 0 ? formatCurrency(item.budget) : <span className=\"text-slate-300\">-<\/span>}\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n {filteredData.length === 0 && (\r\n <tr>\r\n <td colSpan={4} className=\"p-8 text-center text-slate-500\">\r\n No se encontraron resultados para su b\u00fasqueda.\r\n <\/td>\r\n <\/tr>\r\n )}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ --- Main App ---\r\n\r\n const App = () => {\r\n const [data] = useState(INITIAL_DATA);\r\n\r\n const totalBudget = useMemo(() => data.reduce((acc, curr) => acc + curr.budget, 0), [data]);\r\n\r\n const budgetByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { acc[d.faculty] = (acc[d.faculty] || 0) + d.budget; });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 8);\r\n }, [data]);\r\n\r\n const countByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { acc[d.faculty] = (acc[d.faculty] || 0) + 1; });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 10);\r\n }, [data]);\r\n\r\n const statusCounts = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n let k = d.status.includes('CERRADO') ? 'CERRADO' : d.status;\r\n acc[k] = (acc[k] || 0) + 1; \r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n const extVsFac = useMemo(() => {\r\n let ext = 0, fac = 0, inst = 0;\r\n data.forEach(d => {\r\n if (d.faculty.includes('EXTENSI\u00d3N')) ext += d.budget;\r\n else if (d.faculty.includes('FACULTAD')) fac += d.budget;\r\n else inst += d.budget;\r\n });\r\n return [\r\n { name: 'Facultades', value: fac },\r\n { name: 'Institucional\/Otros', value: inst },\r\n { name: 'Extensiones', value: ext }\r\n ];\r\n }, [data]);\r\n\r\n const investmentByStatus = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => {\r\n let key = d.status.includes('NUEVO') ? 'NUEVO' : d.status.includes('CONTINUA') ? 'CONTINUA' : 'OTROS';\r\n acc[key] = (acc[key] || 0) + d.budget;\r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n return (\r\n <div className=\"max-w-7xl mx-auto px-6 py-10 min-h-screen\">\r\n \r\n <header className=\"mb-10 border-b border-gray-200 pb-6 flex flex-col md:flex-row md:items-end justify-between gap-6\">\r\n <div>\r\n <h1 className=\"text-4xl font-extrabold text-primary mb-2 uppercase\">Dashboard de Vinculaci\u00f3n 2025<\/h1>\r\n <p className=\"text-slate-500 text-lg max-w-2xl\">\r\n An\u00e1lisis estrat\u00e9gico de la inversi\u00f3n y ejecuci\u00f3n de proyectos universitarios.\r\n <\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <div className=\"text-xs text-slate-400 uppercase font-bold tracking-wider mb-1\">Presupuesto Total<\/div>\r\n <div className=\"text-3xl font-extrabold text-accent\">{formatCurrency(totalBudget)}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* ROW 1 *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Distribuci\u00f3n Presupuestaria (Top Facultades)<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-6 leading-relaxed\">\r\n Los <strong>Proyectos Institucionales<\/strong> dominan la inversi\u00f3n, seguidos por la Facultad de Ciencias de la Salud. \r\n Esta concentraci\u00f3n sugiere una estrategia centralizada para los proyectos de mayor envergadura econ\u00f3mica.\r\n <\/p>\r\n <BudgetBarChart data={budgetByFaculty} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Top Unidades por Cantidad de Proyectos<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-6 leading-relaxed\">\r\n Aunque el presupuesto se concentra en pocos actores, la operatividad es dispersa. \r\n La <strong>Facultad de Educaci\u00f3n<\/strong> y las <strong>Extensiones (Chone, El Carmen)<\/strong> lideran en volumen de proyectos, \r\n mostrando una alta actividad de vinculaci\u00f3n en territorio.\r\n <\/p>\r\n <HorizontalBarChart data={countByFaculty} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 2 *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Extensiones vs. Facultades<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n Las Facultades y Extensiones manejan presupuestos comparables, pero el componente <strong>Institucional<\/strong> absorbe casi el 50% de los recursos, equilibrando la balanza hacia proyectos transversales.\r\n <\/p>\r\n <ComparisonPieChart data={extVsFac} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Estado de Proyectos<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n La mayor\u00eda de la cartera se mantiene activa (CONTINUA), garantizando la continuidad de procesos. La tasa de cierre (CERRADO) es saludable, permitiendo la renovaci\u00f3n.\r\n <\/p>\r\n <StatusDonutChart data={statusCounts} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Inversi\u00f3n por Estado<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n Financieramente, la prioridad es clara: los recursos fluyen masivamente hacia los proyectos <strong>CONTINUA<\/strong>, asegurando su finalizaci\u00f3n exitosa.\r\n <\/p>\r\n <InvestmentStatusChart data={investmentByStatus} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* TABLA *\/}\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-4 uppercase\">Detalle de Proyectos<\/h3>\r\n <ProjectTable data={data} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VINCULACI\u00d3N 2024 2025 Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n<\/p>\n","protected":false},"author":158,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4343","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"adminvivp","author_link":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/author\/adminvivp\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"VINCULACI\u00d3N 2024 2025 Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n","_links":{"self":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/users\/158"}],"replies":[{"embeddable":true,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/comments?post=4343"}],"version-history":[{"count":16,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343\/revisions"}],"predecessor-version":[{"id":4410,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343\/revisions\/4410"}],"wp:attachment":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/media?parent=4343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Dashboard Vinculaci\u00f3n 2024<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#1e3a8a', \/\/ Dark Blue\r\n accent: '#3b82f6', \/\/ Blue\r\n slate: {\r\n 850: '#1e293b', \r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased\">\r\n <div id=\"root-2024\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ --- Helper Functions ---\r\n const formatPercent = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'percent', minimumFractionDigits: 1 }).format(val);\r\n\r\n \/\/ --- Data 2024 ---\r\n const PROJECT_DATA_2024 = [\r\n \/\/ PROYECTOS NUEVOS\r\n { id: 101, code: \"P-VIN-1011647-2024\", faculty: \"BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de Empresas, Contabilidad y Auditor\u00eda, Mercadotecnia, Agronegocios, Enfermer\u00eda, Turismo, Hospitalidad y Hoteler\u00eda, Educaci\u00f3n, Derecho, Gastronom\u00eda, Construcci\u00f3n Sismoresistente\", project: \"Econom\u00eda Circular: Una alternativa para el desarrollo sostenible de las comunidades de los cantones Sucre \u2013 San Vicente\", status: \"NUEVO 2024\" },\r\n { id: 102, code: \"NO INFO\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de las Ciencias Experimentales, Tecnolog\u00edas de la Informaci\u00f3n, Software\", project: \"Matem\u00e1ticas y F\u00edsica recreativa para estudiantes de educaci\u00f3n general b\u00e1sica y bachillerato del cant\u00f3n Chone con el uso de tecnolog\u00edas y\/o materiales del medio\", status: \"NUEVO 2024\" },\r\n { id: 103, code: \"NO INFO\", faculty: \"EL CARMEN\", careers: \"INGENIER\u00cdA EN SOFTWARE, INGENIER\u00cdA EN TECNOLOG\u00cdAS DE LA INFORMACI\u00d3N\", project: \"Posicionamiento Digital de Peque\u00f1as y Medianas Empresas del Cant\u00f3n El Carmen y su Zona de influencia 2024-2026\", status: \"NUEVO 2024\" },\r\n { id: 104, code: \"NO INFO\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n odontol\u00f3gica y promoci\u00f3n de la salud bucodental a ni\u00f1os y adolescentes de la provincia de Manab\u00ed, 2024-2026\", status: \"NUEVO 2024\" },\r\n { id: 105, code: \"NO INFO\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Psicolog\u00eda\", project: \"Salud Mental en la comunidad Universitaria\", status: \"NUEVO 2024\" },\r\n { id: 106, code: \"NO INFO\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"Ambiente\", project: \"EcoMar: Conciencia Azul en Acci\u00f3n\", status: \"NUEVO 2024\" },\r\n { id: 107, code: \"NO INFO\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"CARRERA AGROINDUSTRIA\", project: \"Alimentaci\u00f3n saludable\", status: \"NUEVO 2024\" },\r\n { id: 108, code: \"NO INFO\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Derecho\", project: \"Buenas Pr\u00e1cticas Laborales- Manab\u00ed\", status: \"NUEVO 2024\" },\r\n { id: 109, code: \"NO INFO\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Ingenier\u00eda de alimentos\", project: \"Evaluaci\u00f3n anal\u00edtica de metales pesados a los productos de producci\u00f3n primaria en la provincia de Manab\u00ed, periodo 2024-2026.\", status: \"NUEVO 2024\" },\r\n\r\n \/\/ PROYECTOS QUE CONTIN\u00daAN\r\n { id: 201, code: \"P-VIN-1005944-2021\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de los Idiomas...\", project: \"El pensamiento computacional y la ense\u00f1anza del idioma Ingl\u00e9s...\", status: \"CONTINUA 2024\" },\r\n { id: 202, code: \"P-VIN-1005984-2021\", faculty: \"CHONE\", careers: \"Pedagog\u00eda de las Ciencias...\", project: \"Build Mathematics: acompa\u00f1amiento pedag\u00f3gico...\", status: \"CONTINUA 2024\" },\r\n { id: 203, code: \"P-VIN-1005985-2021\", faculty: \"CHONE\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Asistencia T\u00e9cnica y Administrativa A Productores...\", status: \"CONTINUA 2024\" },\r\n { id: 204, code: \"P-VIN-1006516-2022\", faculty: \"CHONE\", careers: \"Agropecuaria, Administraci\u00f3n...\", project: \"Implementaci\u00f3n y asistencia t\u00e9cnica de huertos urbanos...\", status: \"CONTINUA 2024\" },\r\n { id: 205, code: \"P-VIN-1007826-2022\", faculty: \"CHONE\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"Centro de reciclaje para el manejo de los desechos...\", status: \"CONTINUA 2024\" },\r\n { id: 206, code: \"P-VIN-1007514-2021\", faculty: \"EL CARMEN\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas agr\u00edcolas...\", status: \"CONTINUA 2024\" },\r\n { id: 207, code: \"P-VIN-1005933-2021\", faculty: \"EL CARMEN\", careers: \"Ingenier\u00eda agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas pecuarios...\", status: \"CONTINUA 2024\" },\r\n { id: 208, code: \"P-VIN-1007543-2022\", faculty: \"EL CARMEN\", careers: \"EDUCACI\u00d3N B\u00c1SICA\", project: \"Fortalecimiento a Ni\u00f1os y J\u00f3venes en el Proceso De Interaprendizaje...\", status: \"CONTINUA 2024\" },\r\n { id: 209, code: \"P-VIN-1007579-2022\", faculty: \"EL CARMEN\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"Comunicaci\u00f3n para contribuir a la reducci\u00f3n de la brecha digital...\", status: \"CONTINUA 2024\" },\r\n { id: 210, code: \"P-VIN-1007810-2022\", faculty: \"EL CARMEN\", careers: \"Contabilidad y Auditor\u00eda\", project: \"Capacitaci\u00f3n para el desarrollo de las capacidades empresariales...\", status: \"CONTINUA 2024\" },\r\n { id: 211, code: \"P-VIN-1007847-2022\", faculty: \"PEDERNALES\", careers: \"INGENIERIA AGROPECUARIA\", project: \"Dise\u00f1o y Evaluaci\u00f3n de los Sistemas de Producci\u00f3n de Cacao...\", status: \"CONTINUA 2024\" },\r\n { id: 212, code: \"P-VIN-1007841-2022\", faculty: \"PEDERNALES\", careers: \"Turismo\", project: \"Fortalecimiento del talento humano de los restaurantes...\", status: \"CONTINUA 2024\" },\r\n { id: 213, code: \"P-VIN-1000392-2023\", faculty: \"PEDERNALES\", careers: \"Biolog\u00eda\", project: \"Especies vulnerables de las pesquer\u00edas y desarrollo productivo...\", status: \"CONTINUA 2024\" },\r\n { id: 214, code: \"P-VIN-1009662-2023\", faculty: \"PEDERNALES\", careers: \"Electromec\u00e1nica\", project: \"Formaci\u00f3n y asistencia t\u00e9cnica para las instalaciones a talleres...\", status: \"CONTINUA 2024\" },\r\n { id: 215, code: \"P-VIN-1010582-2023\", faculty: \"PEDERNALES\", careers: \"Arquitectura\", project: \"Intervenci\u00f3n territorial transdisciplinaria mediante la aplicaci\u00f3n...\", status: \"CONTINUA 2024\" },\r\n { id: 216, code: \"P-VIN-1005971-2021\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Fortalece tu Mi Pyme.\", status: \"CONTINUA 2024\" },\r\n { id: 217, code: \"P-VIN-1003717-2020\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Empoderamiento tur\u00edstico y comercial de Manta.\", status: \"CONTINUA 2024\" },\r\n { id: 218, code: \"P-VIN-1005997-2021\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Contabilidad y Auditor\u00eda...\", project: \"Fortalecimiento de las actividades econ\u00f3micas y comerciales (Tarqui)...\", status: \"CONTINUA 2024\" },\r\n { id: 219, code: \"P-VIN-1010604-2023\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Fortalecimiento de las Actividades Econ\u00f3micas (Acogida)...\", status: \"CONTINUA 2024\" },\r\n { id: 220, code: \"P-VIN-1007840-2022\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"CONTABILIDAD Y AUDITOR\u00cdA\", project: \"Fortalecimiento de las Habilidades Sociales, Cognitivas...\", status: \"CONTINUA 2024\" },\r\n { id: 221, code: \"P-VIN-1008613-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Expo Subasta de Arte en el desarrollo del mercado del arte...\", status: \"CONTINUA 2024\" },\r\n { id: 222, code: \"P-VIN-1007967-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Cursos y Talleres para ni\u00f1os, adolescentes y adultos...\", status: \"CONTINUA 2024\" },\r\n { id: 223, code: \"P-VIN-1007968-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"ARTES PL\u00c1STICAS\", project: \"Concursos y Simposios de Arte ULEAM 2022\", status: \"CONTINUA 2024\" },\r\n { id: 224, code: \"P-VIN-1006033-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Pedagog\u00eda de la Actividad F\u00edsica...\", project: \"Actividad f\u00edsica, deporte y recreaci\u00f3n para detecci\u00f3n de talentos...\", status: \"CONTINUA 2024\" },\r\n { id: 225, code: \"P-VIN-1005899-2021\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Pedagog\u00eda de la lengua...\", project: \"Proyecto Interdisciplinario de Alfabetizaci\u00f3n Integral...\", status: \"CONTINUA 2024\" },\r\n { id: 226, code: \"P-VIN-1003733-2020\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Hoteler\u00eda, Turismo\", project: \"Estrategias para Potencializar el Turismo Rural Comunitario...\", status: \"CONTINUA 2024\" },\r\n { id: 227, code: \"P-VIN-1009652-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n Especial\", project: \"Espacios de atenci\u00f3n pedag\u00f3gica inclusiva...\", status: \"CONTINUA 2024\" },\r\n { id: 228, code: \"P-VIN-1009651-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n especial\", project: \"Innovaci\u00f3n y Diversidad: Construyendo Comunidades Inclusivas...\", status: \"CONTINUA 2024\" },\r\n { id: 229, code: \"P-VIN-1009666-2023\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"HOSPITALIDAD Y HOTELERIA\", project: \"Desarrollo de competencias laborales en empresas...\", status: \"CONTINUA 2024\" },\r\n { id: 230, code: \"P-VIN-1008790-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Hoteler\u00eda, Turismo\", project: \"Innovaci\u00f3n y fortalecimiento de CINFOTUR...\", status: \"CONTINUA 2024\" },\r\n { id: 231, code: \"P-VIN-1006082-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Medicina\", project: \"Estrategia Institucional para que el Ecuador crezca sin Desnutrici\u00f3n...\", status: \"CONTINUA 2024\" },\r\n { id: 232, code: \"P-VIN-1007824-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"ENFERMER\u00cdA\", project: \"Promoci\u00f3n de la Salud y Prevenci\u00f3n de Enfermedades...\", status: \"CONTINUA 2024\" },\r\n { id: 233, code: \"P-VIN-1007713-2021\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n ambulatoria odontol\u00f3gica a ni\u00f1os y adolescentes\", status: \"CONTINUA 2024\" },\r\n { id: 234, code: \"P-VIN-1009656-2023\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"INGENIER\u00cdA EN SISTEMAS...\", project: \"SERVICIOS Y SOLUCIONES TECNOL\u00d3GICAS VINCULANTES...\", status: \"CONTINUA 2024\" },\r\n { id: 235, code: \"P-VIN-1006007-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia t\u00e9cnica a productores agropecuarios (Av\u00edcola)...\", status: \"CONTINUA 2024\" },\r\n { id: 236, code: \"P-VIN-1006006-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia T\u00e9cnica Sobre Huertos Urbanos Y Rurales...\", status: \"CONTINUA 2024\" },\r\n { id: 237, code: \"P-VIN-1005996-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROINDUSTRIA\", project: \"Transformaci\u00f3n De Productos Derivados Del Mar...\", status: \"CONTINUA 2024\" },\r\n { id: 238, code: \"P-VIN-1005948-2021\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROINDUSTRIA\", project: \"Valoraci\u00f3n E Innovaci\u00f3n De Los Residuos Org\u00e1nicos...\", status: \"CONTINUA 2024\" },\r\n { id: 239, code: \"P-VIN-1007769-2022\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"MEDIO AMBIENTE\", project: \"Monitoreo de la Calidad Ambiental Mediante Bioindicadores...\", status: \"CONTINUA 2024\" },\r\n { id: 240, code: \"P-VIN-1002493-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA, BIOLOG\u00cdA PESQUERA\", project: \"Fortalecimiento de las Organizaciones Pesqueras...\", status: \"CONTINUA 2024\" },\r\n { id: 241, code: \"P-VIN-1008734-2023\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Economia\", project: \"Fortalecimiento de los Comerciantes del Mercado Central...\", status: \"CONTINUA 2024\" },\r\n { id: 242, code: \"P-VIN-1007829-2022\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"TRABAJO SOCIAL\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo...\", status: \"CONTINUA 2024\" },\r\n { id: 243, code: \"P-VIN-1010607-2023\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"COMUNICACI\u00d3N\", project: \"Intervenci\u00f3n Comunicacional Estrat\u00e9gica...\", status: \"CONTINUA 2024\" },\r\n { id: 244, code: \"P-VIN-1003702-2020\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Arquitectura\", project: \"H\u00e1bitat saludable y diagn\u00f3stico de apoyo log\u00edstico...\", status: \"CONTINUA 2024\" },\r\n { id: 245, code: \"P-VIN-1007025-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Industrial\", project: \"Implementaci\u00f3n de dos vaca mec\u00e1nica para la producci\u00f3n de leche...\", status: \"CONTINUA 2024\" },\r\n { id: 246, code: \"P-VIN-1004938-2020\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Civil, El\u00e9ctrica, Naval\", project: \"Formaci\u00f3n de destrezas e impulso vocacional...\", status: \"CONTINUA 2024\" },\r\n { id: 247, code: \"P-VIN-1007332-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Civil\", project: \"Asistencia T\u00e9cnica Para El Fortalecimiento De La Red Vial...\", status: \"CONTINUA 2024\" },\r\n { id: 248, code: \"P-VIN-1009670-2023\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y ARQUITECTURA\", careers: \"Electrica\", project: \"Evaluaci\u00f3n t\u00e9cnico-economica para el redise\u00f1o...\", status: \"CONTINUA 2024\" },\r\n { id: 249, code: \"P-VIN-1008791-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Fortalecimiento de la identidad cultural...\", status: \"CONTINUA 2024\" },\r\n { id: 250, code: \"P-VIN-1007737-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Escuela de Liderazgo 'Rosal\u00eda Arteaga'\", status: \"CONTINUA 2024\" },\r\n { id: 251, code: \"P-VIN-1007738-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en Competencias Laborales...\", status: \"CONTINUA 2024\" },\r\n { id: 252, code: \"P-VIN-1007782-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Intervenci\u00f3n En La Salud De La Poblaci\u00f3n Rural De Manab\u00ed\", status: \"CONTINUA 2024\" },\r\n { id: 253, code: \"P-VIN-1007793-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Plan de legalizaci\u00f3n, posesi\u00f3n, tenencia...\", status: \"CONTINUA 2024\" },\r\n { id: 254, code: \"P-VIN-1007783-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Reactivaci\u00f3n y Fortalecimiento en los Infocentros Zona 4\", status: \"CONTINUA 2024\" },\r\n { id: 255, code: \"P-VIN-1007781-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"DERECHO, PSICOLOG\u00cdA, TRABAJO SOCIAL\", project: \"Proyecto para la prevenci\u00f3n de G\u00e9nero en la Universidad...\", status: \"CONTINUA 2024\" },\r\n { id: 256, code: \"P-VIN-1006326-2022\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"Tecnolog\u00eda Superior en Riego...\", project: \"Asistencia T\u00e9cnica para la Instalaci\u00f3n de Sistemas de Riego...\", status: \"CONTINUA 2024\" },\r\n { id: 257, code: \"P-VIN-1009688-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"EXPLOTACI\u00d3N Y MANTENIMIENTO...\", project: \"Servicios de operaci\u00f3n y\/o mantenimiento...\", status: \"CONTINUA 2024\" },\r\n { id: 258, code: \"P-VIN-1009689-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"ELECTROMEC\u00c1NICA\", project: \"REPOTENCIACI\u00d3N DE SISTEMAS EL\u00c9CTRICOS...\", status: \"CONTINUA 2024\" },\r\n\r\n \/\/ PROYECTOS CERRADOS\r\n { id: 301, code: \"P-VIN-1006080-2022\", faculty: \"BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de empresas...\", project: \"Responsabilidad Social y liderazgo...\", status: \"CERRADO\" },\r\n { id: 302, code: \"P-VIN-1003514-2020\", faculty: \"CHONE\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Establecimiento de huertos org\u00e1nicos...\", status: \"CERRADO\" },\r\n { id: 303, code: \"P-VIN-1006479-2021\", faculty: \"PEDERNALES\", careers: \"Administracion de empresas\", project: \"Fomento al emprendimiento e innovaci\u00f3n...\", status: \"CERRADO\" },\r\n { id: 304, code: \"P-VIN-1007677-2021\", faculty: \"PEDERNALES\", careers: \"INGENIERIA AGROPECUARIA\", project: \"CAPACITACI\u00d3N EN EL MEJORAMIENTO PRODUCTIVO...\", status: \"CERRADO\" },\r\n { id: 305, code: \"P-VIN-1007821-2022\", faculty: \"CIENCIAS ADMINISTRATIVAS...\", careers: \"GESTI\u00d3N DE LA INFORMACI\u00d3N...\", project: \"Fortalecimiento de la Gesti\u00f3n Documental...\", status: \"CERRADO\" },\r\n { id: 306, code: \"P-VIN-1007828-2022\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Turismo\", project: \"Proyecto para la Acreditaci\u00f3n de Gu\u00edas Locales...\", status: \"CERRADO\" },\r\n { id: 307, code: \"P-VIN-1005964-2021\", faculty: \"CIENCIAS DE LA EDUCACI\u00d3N...\", careers: \"Educaci\u00f3n Especial\", project: \"Aprendizaje en la diversidad para el fortalecimiento...\", status: \"CERRADO\" },\r\n { id: 308, code: \"P-VIN-1003348-2020\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Terapia Ocupacional\", project: \"Prevenci\u00f3n e intervenci\u00f3n de las alteraciones Psicomotrices...\", status: \"CERRADO\" },\r\n { id: 309, code: \"P-VIN-1007820-2022\", faculty: \"CIENCIAS DE LA SALUD\", careers: \"Medicina\", project: \"Vigilancia Epidemiol\u00f3gica de las Enfermedades...\", status: \"CERRADO\" },\r\n { id: 310, code: \"P-VIN-1003659-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n...\", project: \"An\u00e1lisis, Dise\u00f1o E Implementaci\u00f3n De Tiendas Online...\", status: \"CERRADO\" },\r\n { id: 311, code: \"P-VIN-1003692-2020\", faculty: \"CIENCIAS DE LA VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA\", project: \"Fomento de la Piscicultura en la Provincia de Manab\u00ed\", status: \"CERRADO\" },\r\n { id: 312, code: \"P-VIN-1003737-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"COMUNICACI\u00d3N\", project: \"Productos comunicacionales y estrat\u00e9gicos...\", status: \"CERRADO\" },\r\n { id: 313, code: \"P-VIN-1001661-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Econom\u00eda, Comunicaci\u00f3n\", project: \"Creaci\u00f3n y fortalecimiento de las actividades productivas...\", status: \"CERRADO\" },\r\n { id: 314, code: \"P-VIN-1003106-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"Econom\u00eda\", project: \"Asesor\u00eda en estudios socio-econ\u00f3micos...\", status: \"CERRADO\" },\r\n { id: 315, code: \"P-VIN-1003701-2020\", faculty: \"CIENCIAS SOCIALES, DERECHO Y BIENESTAR\", careers: \"DERECHO, PSICOLOGIA...\", project: \"Fortalecimiento de la equidad y lucha contra la violencia...\", status: \"CERRADO\" },\r\n { id: 316, code: \"P-VIN-1007827-2022\", faculty: \"INGENIER\u00cdA, INDUSTRIA Y CONSTRUCCI\u00d3N\", careers: \"Industrial\", project: \"Reingenier\u00eda de los Procesos de elaboraci\u00f3n de avena...\", status: \"CERRADO\" },\r\n { id: 317, code: \"P-VIN-1006682-2021\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"FACULTAD CIENCIAS DE LA SALUD\", project: \"Plan Vacuna ULEAM...\", status: \"CERRADO\" },\r\n ];\r\n\r\n \/\/ --- Components ---\r\n\r\n const Card = ({ children, className = '' }) => (\r\n <div className={`bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-100 flex flex-col ${className}`}>\r\n {children}\r\n <\/div>\r\n );\r\n\r\n \/\/ CHART 1: Careers (Count)\r\n \/\/ Adjusted: Increased bottom padding for labels\r\n const TopCareersChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value)) || 1;\r\n const chartHeight = 200;\r\n const barWidth = 35;\r\n const gap = 30;\r\n const width = Math.max(data.length * (barWidth + gap), 300);\r\n\r\n return (\r\n <div className=\"overflow-x-auto pb-5\">\r\n <svg width={width} height={chartHeight + 160} className=\"min-w-full\">\r\n <text x={0} y={15} fontSize=\"10\" fill=\"#94a3b8\" className=\"font-sans font-bold uppercase\">Proyectos<\/text>\r\n {data.map((d, i) => {\r\n const barHeight = (d.value \/ maxVal) * chartHeight;\r\n const x = i * (barWidth + gap) + 20;\r\n const y = chartHeight - barHeight + 30;\r\n \r\n return (\r\n <g key={i} transform={`translate(${x}, 0)`}>\r\n <rect \r\n x={0} \r\n y={y} \r\n width={barWidth} \r\n height={barHeight} \r\n fill=\"#1e3a8a\" \r\n rx=\"4\"\r\n \/>\r\n <text \r\n x={barWidth \/ 2} \r\n y={y - 8} \r\n textAnchor=\"middle\" \r\n fontSize=\"11\" \r\n fontWeight=\"bold\" \r\n fill=\"#1e293b\"\r\n className=\"font-sans\"\r\n >\r\n {d.value}\r\n <\/text>\r\n <text \r\n transform={`translate(${barWidth \/ 2}, ${chartHeight + 50}) rotate(45)`}\r\n textAnchor=\"start\" \r\n fontSize=\"10\" \r\n fill=\"#475569\"\r\n className=\"font-sans font-medium\"\r\n style={{ maxWidth: '120px' }}\r\n >\r\n {d.name.length > 25 ? d.name.substring(0, 22) + '...' : d.name}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 2: Donut (Status Count)\r\n const StatusDonutChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#64748b'];\r\n const radius = 70;\r\n const centerX = 90;\r\n const centerY = 90;\r\n let startPercent = 0;\r\n\r\n return (\r\n <div className=\"flex flex-wrap items-center justify-center gap-10 mt-4\">\r\n <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\r\n {data.map((slice, i) => {\r\n if (slice.value === 0) return null;\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const pathData = slicePercent > 0.99 \r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n\r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i % colors.length]} transform=\"rotate(-90 90 90)\" \/>;\r\n })}\r\n <circle cx={centerX} cy={centerY} r={radius * 0.6} fill=\"white\" \/>\r\n <text x={centerX} y={centerY} textAnchor=\"middle\" dy=\"0.3em\" fontWeight=\"bold\" fontSize=\"20\" fill=\"#334155\" className=\"font-sans\">{total}<\/text>\r\n <\/svg>\r\n <div className=\"flex flex-col gap-3\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-2 text-sm\">\r\n <div style={{ backgroundColor: colors[i % colors.length] }} className=\"w-3 h-3 rounded-sm\" \/>\r\n <span className=\"text-slate-800 font-semibold\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">({item.value})<\/span>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 3: Horizontal Bar (Projects by Unit)\r\n \/\/ Adjusted: X axis offset to 220 to prevent text overlapping\r\n const HorizontalBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n const rowHeight = 40; \/\/ Increased row height slightly\r\n const width = 450; \/\/ Increased total width context\r\n const textWidth = 220; \/\/ Explicit text width reserve\r\n\r\n return (\r\n <div className=\"overflow-x-auto\">\r\n <svg width=\"100%\" height={data.length * rowHeight} className=\"min-h-[300px] min-w-[350px]\">\r\n {data.map((d, i) => {\r\n \/\/ Calculate bar width relative to remaining space\r\n const barWidth = (d.value \/ maxVal) * (width - textWidth - 50); \r\n return (\r\n <g key={d.name} transform={`translate(0, ${i * rowHeight})`}>\r\n <text x={0} y={18} fontSize=\"11\" fill=\"#475569\" className=\"font-sans font-medium\" dominantBaseline=\"middle\">\r\n {d.name.length > 35 ? d.name.substring(0, 32) + '...' : d.name}\r\n <\/text>\r\n <rect x={textWidth} y={5} width={barWidth} height={20} fill=\"#3b82f6\" rx=\"4\" \/>\r\n <text x={textWidth + barWidth + 8} y={19} fontSize=\"11\" fontWeight=\"bold\" fill=\"#1e293b\" dominantBaseline=\"middle\" className=\"font-sans\">\r\n {d.value}\r\n <\/text>\r\n <\/g>\r\n )\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 4: Comparison Pie (Extensions vs Faculties - COUNT)\r\n const ComparisonPieChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#f43f5e', '#3b82f6', '#10b981']; \r\n let startPercent = 0;\r\n const centerX = 100;\r\n const centerY = 100;\r\n const radius = 80;\r\n\r\n return (\r\n <div className=\"flex flex-col items-center mt-4\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\r\n {data.map((slice, i) => {\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n \r\n const pathData = slicePercent > 0.999\r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n \r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i]} transform=\"rotate(-90 100 100)\" \/>;\r\n })}\r\n <\/svg>\r\n <div className=\"flex gap-4 mt-6 justify-center flex-wrap\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-1.5\">\r\n <div style={{ backgroundColor: colors[i] }} className=\"w-3 h-3 rounded-full\" \/>\r\n <div className=\"text-xs text-slate-700\">\r\n <span className=\"font-bold block\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">{formatPercent(item.value\/total)}<\/span>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProjectTable = ({ data }) => {\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [facultyFilter, setFacultyFilter] = useState(\"TODAS LAS FACULTADES\");\r\n const [statusFilter, setStatusFilter] = useState(\"TODOS\");\r\n\r\n const uniqueFaculties = useMemo(() => {\r\n const faculties = new Set(data.map(d => d.faculty));\r\n return [\"TODAS LAS FACULTADES\", ...Array.from(faculties).sort()];\r\n }, [data]);\r\n\r\n \/\/ Simplified Status Options excluding 2024\r\n const statusOptions = [\"TODOS\", \"NUEVO\", \"CONTINUA\", \"CERRADO\"];\r\n\r\n const filteredData = useMemo(() => {\r\n return data.filter(item => {\r\n const matchesSearch = \r\n item.project.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.faculty.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.careers.toLowerCase().includes(searchTerm.toLowerCase());\r\n \r\n const matchesFaculty = facultyFilter === \"TODAS LAS FACULTADES\" || item.faculty === facultyFilter;\r\n const matchesStatus = statusFilter === \"TODOS\" || item.status.includes(statusFilter);\r\n\r\n return matchesSearch && matchesFaculty && matchesStatus;\r\n });\r\n }, [data, searchTerm, facultyFilter, statusFilter]);\r\n\r\n return (\r\n <div>\r\n <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\r\n <div className=\"relative flex-grow\">\r\n <input \r\n type=\"text\" \r\n placeholder=\"Buscar por proyecto, c\u00f3digo, facultad o carrera...\" \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm\"\r\n value={searchTerm}\r\n onChange={e => setSearchTerm(e.target.value)}\r\n \/>\r\n <\/div>\r\n \r\n <div className=\"min-w-[200px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={facultyFilter}\r\n onChange={e => setFacultyFilter(e.target.value)}\r\n >\r\n {uniqueFaculties.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n\r\n <div className=\"min-w-[150px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={statusFilter}\r\n onChange={e => setStatusFilter(e.target.value)}\r\n >\r\n {statusOptions.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"overflow-x-auto max-h-[500px] overflow-y-auto border border-slate-200 rounded-lg\">\r\n <table className=\"w-full border-collapse text-left text-sm\">\r\n <thead className=\"sticky top-0 bg-white z-10 shadow-sm\">\r\n <tr className=\"bg-slate-50 border-b border-slate-200\">\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase w-1\/4\">Facultad \/ Unidad<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase\">Proyecto<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase text-center w-28\">Estado<\/th>\r\n <th className=\"px-4 py-3 text-xs font-bold text-slate-600 uppercase text-right w-1\/4\">Carreras<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {filteredData.map((item, index) => (\r\n <tr key={item.id} className=\"hover:bg-slate-50 transition-colors\">\r\n <td className=\"p-3 align-top text-xs font-bold text-slate-600\">\r\n {item.faculty}\r\n <\/td>\r\n <td className=\"p-3 align-top\">\r\n <div className=\"font-semibold text-slate-800 text-xs mb-0.5\">{item.project}<\/div>\r\n <div className=\"text-[10px] text-slate-500 uppercase tracking-wide\">{item.code}<\/div>\r\n <\/td>\r\n <td className=\"p-3 align-top text-center\">\r\n <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold ${\r\n item.status.includes('CONTINUA') ? 'bg-emerald-100 text-emerald-800' : \r\n item.status.includes('NUEVO') ? 'bg-blue-100 text-blue-800' : \r\n 'bg-slate-100 text-slate-500'\r\n }`}>\r\n {item.status.split(' ')[0]}\r\n <\/span>\r\n <\/td>\r\n <td className=\"p-3 align-top text-right text-xs text-slate-500\">\r\n {item.careers}\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n {filteredData.length === 0 && (\r\n <tr>\r\n <td colSpan={4} className=\"p-8 text-center text-slate-500\">\r\n No se encontraron resultados para su b\u00fasqueda.\r\n <\/td>\r\n <\/tr>\r\n )}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ --- Main App ---\r\n\r\n const Dashboard2024 = () => {\r\n const [data] = useState(PROJECT_DATA_2024);\r\n\r\n \/\/ --- Calculations ---\r\n\r\n const totalProjects = data.length;\r\n\r\n \/\/ 1. Top Careers by Count\r\n const topCareers = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n const mainCareer = d.careers.split(',')[0].trim().toUpperCase();\r\n if(mainCareer.length > 2) acc[mainCareer] = (acc[mainCareer] || 0) + 1;\r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 8);\r\n }, [data]);\r\n\r\n \/\/ 2. Count by Faculty\r\n const countByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n \/\/ Normalize names\r\n let name = d.faculty;\r\n if(name.includes('CIENCIAS ADMINISTRATIVAS')) name = 'CIENCIAS ADMIN.';\r\n if(name.includes('CIENCIAS DE LA EDUCACI\u00d3N')) name = 'EDUCACI\u00d3N';\r\n if(name.includes('CIENCIAS DE LA VIDA')) name = 'VIDA Y TECNOLOG\u00cdAS';\r\n if(name.includes('CIENCIAS SOCIALES')) name = 'SOCIALES';\r\n if(name.includes('INGENIER\u00cdA, INDUSTRIA')) name = 'INGENIER\u00cdA';\r\n if(name.includes('PROYECTO INSTITUCIONAL')) name = 'INSTITUCIONAL';\r\n \r\n acc[name] = (acc[name] || 0) + 1; \r\n });\r\n return Object.entries(acc).map(([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value).slice(0, 10);\r\n }, [data]);\r\n\r\n \/\/ 3. Status Count\r\n const statusCounts = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n let k = d.status.includes('CERRADO') ? 'CERRADO' : d.status.includes('NUEVO') ? 'NUEVO' : 'CONTINUA';\r\n acc[k] = (acc[k] || 0) + 1; \r\n });\r\n return Object.entries(acc).map(([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n \/\/ 4. Extensions vs Faculties (Count)\r\n const extVsFac = useMemo(() => {\r\n let ext = 0, fac = 0, inst = 0;\r\n data.forEach(d => {\r\n const f = d.faculty.toUpperCase();\r\n if (f.includes('EXTENSI\u00d3N') || f.includes('CHONE') || f.includes('EL CARMEN') || f.includes('PEDERNALES') || f.includes('BAH\u00cdA') || f.includes('TOSAGUA')) ext += 1;\r\n else if (f.includes('FACULTAD') || f.includes('CIENCIAS') || f.includes('INGENIER\u00cdA')) fac += 1;\r\n else inst += 1;\r\n });\r\n return [\r\n { name: 'Facultades', value: fac },\r\n { name: 'Extensiones\/Unidades', value: ext },\r\n { name: 'Institucional\/Otros', value: inst }\r\n ];\r\n }, [data]);\r\n\r\n return (\r\n <div className=\"max-w-7xl mx-auto px-6 py-10 min-h-screen\">\r\n \r\n <header className=\"mb-10 border-b border-gray-200 pb-6 flex flex-col md:flex-row md:items-end justify-between gap-6\">\r\n <div>\r\n <h1 className=\"text-4xl font-extrabold text-primary mb-2 uppercase\">Dashboard de Vinculaci\u00f3n 2024<\/h1>\r\n <p className=\"text-slate-500 text-lg max-w-2xl\">\r\n An\u00e1lisis de cartera de proyectos: Nuevos, Continuos y Cerrados.\r\n <\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <div className=\"text-xs text-slate-400 uppercase font-bold tracking-wider mb-1\">Total Proyectos<\/div>\r\n <div className=\"text-3xl font-extrabold text-accent\">{totalProjects}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* ROW 1: Top Careers & Top Faculties *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Carreras con Mayor Participaci\u00f3n<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-8 leading-relaxed\">\r\n Las carreras de <strong>Tecnolog\u00edas de la Informaci\u00f3n, Agropecuaria y Turismo<\/strong> lideran la oferta de vinculaci\u00f3n. \r\n Esto refleja una fuerte orientaci\u00f3n hacia el desarrollo tecnol\u00f3gico y productivo de la regi\u00f3n.\r\n <\/p>\r\n <TopCareersChart data={topCareers} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Proyectos por Unidad Acad\u00e9mica<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-8 leading-relaxed\">\r\n Las <strong>Extensiones<\/strong> (especialmente Chone, El Carmen y Pedernales) muestran un volumen significativo de proyectos, \r\n demostrando un fuerte despliegue territorial descentralizado.\r\n <\/p>\r\n <HorizontalBarChart data={countByFaculty} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 2: Comparisons & Status *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Distribuci\u00f3n Regional vs Central<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-6 leading-relaxed\">\r\n Existe un equilibrio saludable entre la Sede Central (Facultades) y las Extensiones, lo que garantiza que la vinculaci\u00f3n llegue tanto a la zona urbana como rural.\r\n <\/p>\r\n <ComparisonPieChart data={extVsFac} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Estado de la Cartera<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-6 leading-relaxed\">\r\n La mayor\u00eda de proyectos se encuentran en ejecuci\u00f3n (<strong>CONTINUA<\/strong>), asegurando estabilidad. \r\n La incorporaci\u00f3n de proyectos <strong>NUEVOS<\/strong> asegura la renovaci\u00f3n de la oferta pertinente.\r\n <\/p>\r\n <StatusDonutChart data={statusCounts} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 3: Detailed Table *\/}\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-4 uppercase\">Detalle de Proyectos<\/h3>\r\n <ProjectTable data={data} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = createRoot(document.getElementById('root-2024'));\r\n root.render(<Dashboard2024 \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-1020950702\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-1020950702\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-fb4cd05 e-con-full e-flex e-con e-child\" data-id=\"fb4cd05\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc9ec45 elementor-widget elementor-widget-html\" data-id=\"fc9ec45\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Dashboard de Vinculaci\u00f3n<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#1e3a8a', \/\/ Dark Blue\r\n accent: '#3b82f6', \/\/ Blue\r\n slate: {\r\n 850: '#1e293b', \/\/ Custom dark\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo } = React;\r\n const { createRoot } = ReactDOM;\r\n\r\n \/\/ --- Helper Functions ---\r\n\r\n \/\/ Helper to parse budget strings like \"$ 2.250,00\" -> 2250.00\r\n const p = (str) => {\r\n if (!str) return 0;\r\n const clean = str.replace(\/\\$\/g, '').replace(\/\\.\/g, '').replace(',', '.').trim();\r\n return parseFloat(clean) || 0;\r\n };\r\n\r\n const formatCurrency = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(val);\r\n\r\n const formatNumber = (val) => \r\n new Intl.NumberFormat('es-MX').format(val);\r\n\r\n const formatPercent = (val) => \r\n new Intl.NumberFormat('es-MX', { style: 'percent', minimumFractionDigits: 1 }).format(val);\r\n\r\n \/\/ --- Data ---\r\n\r\n const INITIAL_DATA = [\r\n { id: 1, code: \"P-VIN-1011647-2024\", faculty: \"EXTENSI\u00d3N BAH\u00cdA DE CAR\u00c1QUEZ\", careers: \"Administraci\u00f3n de Empresas...\", project: \"Econom\u00eda Circular: Una alternativa para el desarrollo sostenible...\", status: \"CONTINUA\", budget: p(\"$ 2.250,00\") },\r\n { id: 2, code: \"P-VIN-1005985-2021\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Administraci\u00f3n de Empresas\", project: \"Asistencia T\u00e9cnica y Administrativa A Productores Agropecuarios...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 3, code: \"P-VIN-1005944-2021\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Pedagog\u00eda de los Idiomas...\", project: \"El pensamiento computacional y la ense\u00f1anza del idioma Ingl\u00e9s...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 4, code: \"P-VIN-1006516-2022\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria - Administraci\u00f3n\", project: \"Implementaci\u00f3n y fortalecimiento de huertos urbanos...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 5, code: \"P-VIN-1010675-2024\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"VARIAS\", project: \"Matem\u00e1ticas y F\u00edsica recreativa para estudiantes...\", status: \"CONTINUA\", budget: p(\"$ 1.500,00\") },\r\n { id: 6, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria, Agronegocios\", project: \"Fortalecimiento integral de capacidades productivas...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 7, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Enfermer\u00eda, Psicolog\u00eda, Idiomas\", project: \"Fortalecimiento integral mediante actividades multidisciplinarias...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 8, code: \"EXTENSI\u00d3N CHONE\", faculty: \"EXTENSI\u00d3N CHONE\", careers: \"Agropecuaria\", project: \"Dise\u00f1o, estructuraci\u00f3n e implementaci\u00f3n de registros ganaderos...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 9, code: \"P-VIN-1007514-2021\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Ingenier\u00eda Agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas agr\u00edcolas...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 10, code: \"P-VIN-1005933-2021\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Ingenier\u00eda agropecuaria\", project: \"Capacitaci\u00f3n en el mejoramiento productivo de sistemas pecuarios...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 11, code: \"P-VIN-1007810-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Contabilidad y Auditor\u00eda\", project: \"Capacitaci\u00f3n para el desarrollo de las capacidades empresariales...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 12, code: \"P-VIN-1007844-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"EDUCACI\u00d3N B\u00c1SICA\", project: \"Acompa\u00f1amiento a ni\u00f1os y J\u00f3venes en el Proceso De Ense\u00f1anza...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 13, code: \"P-VIN-1007845-2022\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Tecnolog\u00edas de la Informaci\u00f3n\", project: \"Fortalecimiento de las habilidades de la Informaci\u00f3n y Comunicaci\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 14, code: \"P-VIN-1012570-2024\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"INGENIER\u00cdA EN SOFTWARE\", project: \"Posicionamiento Digital de Peque\u00f1as y Medianas Empresas...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 15, code: \"P-VIN-1014157-2025\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"Administraci\u00f3n, Agronegocios\", project: \"Centro de Apoyo y Asesor\u00eda Gratuita en la Gesti\u00f3n Empresarial...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 16, code: \"P-VIN-1014160-2025\", faculty: \"EXTENSI\u00d3N EL CARMEN\", careers: \"VARIAS\", project: \"Fomento del desarrollo socioecon\u00f3mico mediante la producci\u00f3n sostenible...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 17, code: \"P-VIN-1010392-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Biolog\u00eda\", project: \"Especies vulnerables de las pesquer\u00edas y desarrollo productivo...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 18, code: \"P-VIN-1009662-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Electromec\u00e1nica\", project: \"Formaci\u00f3n y asistencia t\u00e9cnica para las instalaciones a talleres...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 19, code: \"P-VIN-1007841-2022\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Turismo\", project: \"Fortalecimiento del talento humano de los restaurantes...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 20, code: \"P-VIN-1010582-2023\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"Arquitectura\", project: \"Intervenci\u00f3n territorial mancomunada mediante la aplicaci\u00f3n de la arquitectura...\", status: \"CONTINUA\", budget: 0 },\r\n { id: 21, code: \"P-VIN-1013583-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"AGROPECUARIA, AGRONEGOCIOS\", project: \"Desarrollo Sostenible de las Actividades Pesqueras, Acu\u00edcolas...\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 22, code: \"P-VIN-1012604-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"EDUCACI\u00d3N Y ENFERMER\u00cdA\", project: \"Educaci\u00f3n y Promoci\u00f3n de Salud En las Parroquias Rurales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 23, code: \"P-VIN-1012603-2024\", faculty: \"EXTENSI\u00d3N PEDERNALES\", careers: \"ADMINISTRACI\u00d3N, ECONOM\u00cdA\", project: \"Escuela Formativa para el Fortalecimiento Comunitario...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 24, code: \"P-VIN-1005971-2021\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"Administraci\u00f3n, Mercadotecnia\", project: \"Fortalece tu Mi Pyme.\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 25, code: \"P-VIN-1010604-2023\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"Administraci\u00f3n, Mercadotecnia\", project: \"Fortalecimiento de las Actividades Econ\u00f3micas, Comerciales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 26, code: \"P-VIN-1014125-2025\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"ADMINISTRACI\u00d3N, AUDITOR\u00cdA...\", project: \"Empod\u00e9rate Comercialmente Manta\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 27, code: \"P-VIN-1007840-2022\", faculty: \"FACULTAD CIENCIAS ADMIN.\", careers: \"CONTABILIDAD Y AUDITOR\u00cdA\", project: \"Fortalecimiento de las Capacidades Sociales, Cognitivas...\", status: \"CERRADO 2024\", budget: 0 },\r\n { id: 27, code: \"P-VIN-1006033-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Pedagog\u00eda Actividad F\u00edsica\", project: \"Actividad f\u00edsica, deporte y recreaci\u00f3n para detecci\u00f3n de talentos...\", status: \"CONTINUA\", budget: p(\"$ 5.000,00\") },\r\n { id: 28, code: \"P-VIN-1007968-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Concursos y Simposios de Arte ULEAM 2022\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 29, code: \"P-VIN-1007967-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Cursos y Talleres para ni\u00f1os, adolescentes y adultos...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 30, code: \"P-VIN-1009652-2023\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Educaci\u00f3n Especial\", project: \"Espacios de atenci\u00f3n pedag\u00f3gica inclusiva para el desarrollo...\", status: \"CONTINUA\", budget: p(\"$ 2.135,65\") },\r\n { id: 31, code: \"P-VIN-1008613-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"ARTES PL\u00c1STICAS\", project: \"Expo Subasta de Arte en el desarrollo del mercado del arte...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 32, code: \"P-VIN-1009651-2023\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Educaci\u00f3n especial\", project: \"Innovaci\u00f3n y Diversidad: Construyendo Comunidades Inclusivas...\", status: \"CONTINUA\", budget: p(\"$ 1.044,13\") },\r\n { id: 33, code: \"P-VIN-1008790-2022\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Hoteler\u00eda Turismo\", project: \"Innovaci\u00f3n y fortalecimiento de Gastrotur para el desarrollo...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 34, code: \"P-VIN-1005899-2021\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"Pedagog\u00eda lengua, idiomas...\", project: \"Proyecto Interdisciplinario de Alfabetizaci\u00f3n Integral...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 35, code: \"P-VIN-1014111-2025\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"TURISMO\", project: \"Empoderamiento de actores locales de turismo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 36, code: \"P-VIN-1014120-2025\", faculty: \"FACULTAD EDUCACI\u00d3N\", careers: \"HOSPITALIDAD Y HOTELER\u00cdA\", project: \"Enfoque Integral en la Experiencia del Cliente...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 37, code: \"FACULTAD CIENCIAS DE LA SALUD\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"SOCIOLOGIA\", project: \"Centro de Consultor\u00eda e Intervenci\u00f3n Sociol\u00f3gica...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 38, code: \"P-VIN-1006082-2022\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Medicina\", project: \"Estrategia Institucional para que el Ecuador crezca sin Desnutrici\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 39, code: \"P-VIN-1007824-2022\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"ENFERMER\u00cdA\", project: \"Promoci\u00f3n de la Salud y Prevenci\u00f3n de enfermedades...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 40, code: \"P-VIN-1012569-2024\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Odontolog\u00eda\", project: \"Atenci\u00f3n Odontol\u00f3gica y Promoci\u00f3n de la Salud Bucodental...\", status: \"CONTINUA\", budget: p(\"$ 15.418,00\") },\r\n { id: 41, code: \"P-VIN-1012542-2024\", faculty: \"FACULTAD CIENCIAS SALUD\", careers: \"Psicolog\u00eda\", project: \"Atenci\u00f3n psicol\u00f3gica comunitaria en la comunidad universitaria\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 42, code: \"P-VIN-1006007-2021\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia t\u00e9cnica a productores agropecuarios para fortalecer...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 43, code: \"P-VIN-1006006-2021\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"AGROPECUARIA\", project: \"Asistencia T\u00e9cnica Sobre Huertos Urbanos Y Rurales...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 44, code: \"P-VIN-1002493-2020\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"BIOLOG\u00cdA, BIOLOG\u00cdA PESQUERA\", project: \"Fortalecimiento de las Organizaciones Pesqueras en la provincia...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 45, code: \"P-VIN-1009656-2023\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"INGENIER\u00cdA SISTEMAS\", project: \"Servicios y Soluciones Tecnol\u00f3gicas Vinculantes...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 46, code: \"P-VIN-1012566-2024\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"CARRERA AGROINDUSTRIA\", project: \"Alimentaci\u00f3n saludable\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 47, code: \"P-VIN-1012567-2024\", faculty: \"FACULTAD VIDA Y TECNOLOG\u00cdAS\", careers: \"MEDIO AMBIENTE\", project: \"EcoMar: Conciencia Azul en Acci\u00f3n\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 48, code: \"P-VIN-1007829-2022\", faculty: \"FACULTAD SOCIALES\", careers: \"TRABAJO SOCIAL\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo asociados...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 49, code: \"P-VIN-1008734-2023\", faculty: \"FACULTAD SOCIALES\", careers: \"Econom\u00eda\", project: \"Fortalecimiento de los sectores productivos de Manta...\", status: \"CONTINUA\", budget: p(\"$ 1.400,00\") },\r\n { id: 50, code: \"P-VIN-1010607-2023\", faculty: \"FACULTAD SOCIALES\", careers: \"COMUNICACI\u00d3N\", project: \"Intervenci\u00f3n Comunicacional Estrat\u00e9gica para el fortalecimiento...\", status: \"CONTINUA\", budget: p(\"$ 7.150,00\") },\r\n { id: 51, code: \"P-VIN-1012565-2024\", faculty: \"FACULTAD SOCIALES\", careers: \"Derecho\", project: \"Buenas Pr\u00e1cticas Laborales, Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 52, code: \"P-VIN-1014158-2025\", faculty: \"FACULTAD SOCIALES\", careers: \"Trabajo Social\", project: \"Capacitaciones para la identificaci\u00f3n de factores de riesgo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 53, code: \"P-VIN-1007332-2022\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Civil\", project: \"Asistencia T\u00e9cnica Para El Inventario De La Red Vial...\", status: \"CONTINUA\", budget: p(\"$ 200,00\") },\r\n { id: 54, code: \"P-VIN-1009670-2023\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Electrica\", project: \"Evaluaci\u00f3n t\u00e9cnico-economica para el montaje y restructuraci\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 55, code: \"P-VIN-1004940-2020\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Civil El\u00e9ctrica Naval\", project: \"Formaci\u00f3n de destrezas e impulso vocacional en el \u00e1mbito ingenieril...\", status: \"CONTINUA\", budget: p(\"$ 1.000,00\") },\r\n { id: 56, code: \"P-VIN-1003702-2020\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Arquitectura\", project: \"H\u00e1bitat saludable y diagn\u00f3stico de apoyo t\u00e9cnico...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 57, code: \"P-VIN-1012562-2024\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Ingenier\u00eda de alimentos\", project: \"Identificaci\u00f3n de metales pesados a los productos...\", status: \"CONTINUA\", budget: p(\"$ 2.500,00\") },\r\n { id: 58, code: \"P-VIN-1007025-2022\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"Industrial\", project: \"Implementaci\u00f3n de dos plantas pilotos para la producci\u00f3n de leche...\", status: \"SUSPENDIDO\", budget: 0 },\r\n { id: 59, code: \"P-VIN-1013679-2025\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"ARQUITECTURA\", project: \"Arquitectura, Urbanismo y Territorio para la Inclusi\u00f3n y el Desarrollo...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 60, code: \"P-VIN-1014159-2025\", faculty: \"FACULTAD INGENIER\u00cdA\", careers: \"INGENIER\u00cdA MAR\u00cdTIMA\", project: \"Programa de Inspecci\u00f3n y Capacitaci\u00f3n para la Seguridad de las Embarcaciones...\", status: \"NUEVO 2025\", budget: p(\"$ 1.000,00\") },\r\n { id: 61, code: \"P-VIN-1007738-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en competencias laborales para la Reactivaci\u00f3n...\", status: \"CERRADO 2025\", budget: 0 },\r\n { id: 62, code: \"P-VIN-1008791-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Arte y cultura para la identidad cultural para el desarrollo integral...\", status: \"CONTINUA\", budget: p(\"$ 100.000,00\") },\r\n { id: 63, code: \"P-VIN-1007782-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Desarrollo Agropecuario De La Poblaci\u00f3n Rural De Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 64.902,22\") },\r\n { id: 64, code: \"P-VIN-1007781-2022\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"DERECHO ECONOMIA TRABAJO SOCIAL\", project: \"Proyecto para la prevenci\u00f3n de G\u00e9nero en la Universidad Laica Eloy Alfaro...\", status: \"CONTINUA\", budget: p(\"$ 17.700,00\") },\r\n { id: 65, code: \"P-VIN-1013897-2024\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Creaci\u00f3n e implementaci\u00f3n operativa del COAL Centro de Orientaci\u00f3n y Apoyo...\", status: \"CONTINUA\", budget: p(\"$ 6.500,00\") },\r\n { id: 66, code: \"P-VIN-1013899-2024\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Turismo Cient\u00edfico Sostenible en las \u00c1reas de Conservaci\u00f3n de Manab\u00ed\", status: \"CONTINUA\", budget: p(\"$ 7.000,00\") },\r\n { id: 67, code: \"PROYECTO INSTITUCIONAL\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Tecnolog\u00eda Superior en Riego y Producci\u00f3n Agr\u00edcola Ingenier\u00eda Agropecuaria\", project: \"Fomento del Desarrollo Socioecon\u00f3mico Mediante la Producci\u00f3n Sostenible de Plantas de Cacao...\", status: \"CONTINUA\", budget: p(\"$ 225.300,00\") },\r\n { id: 68, code: \"P-VIN-1014156-2025\", faculty: \"PROYECTO INSTITUCIONAL\", careers: \"Proyecto Institucional\", project: \"Capacitaci\u00f3n en Competencias Laborales para la Reactivaci\u00f3n econ\u00f3mica de la zona 4. Fase II\", status: \"NUEVO 2025\", budget: p(\"$ 70.000,00\") },\r\n { id: 69, code: \"P-VIN-1006326-2022\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"Tecnolog\u00eda Superior en Riego y Producci\u00f3n Agr\u00edcola. Electromec\u00e1nica\", project: \"Asistencia T\u00e9cnica para la Instalaci\u00f3n de Sistemas de Riego y Producci\u00f3n Agr\u00edcola...\", status: \"CONTINUA\", budget: p(\"$ 3.000,00\") },\r\n { id: 70, code: \"P-VIN-1009689-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"ELECTROMEC\u00c1NICA\", project: \"Repotenciaci\u00f3n de Sistemas el\u00e9ctricos y Electromec\u00e1nicos en Baja Tensi\u00f3n...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n { id: 71, code: \"P-VIN-1009688-2023\", faculty: \"UNIDAD ACAD\u00c9MICA TOSAGUA\", careers: \"EXPLOTACI\u00d3N Y MANTENIMIENTO DE EQUIPOS BIOM\u00c9DICOS\", project: \"Servicios de operaci\u00f3n y\/o mantenimiento de tecnolog\u00edas biom\u00e9dicas...\", status: \"CONTINUA\", budget: p(\"$ 2.000,00\") },\r\n ];\r\n\r\n \/\/ --- Components ---\r\n\r\n const Card = ({ children, className = '' }) => (\r\n <div className={`bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-100 flex flex-col ${className}`}>\r\n {children}\r\n <\/div>\r\n );\r\n\r\n \/\/ CHART 1: Vertical Bar (Budget)\r\n const BudgetBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value)) || 1;\r\n const chartHeight = 200;\r\n const barWidth = 30;\r\n const gap = 25;\r\n const width = Math.max(data.length * (barWidth + gap), 300);\r\n\r\n return (\r\n <div className=\"overflow-x-auto pb-5\">\r\n <svg width={width} height={chartHeight + 120} className=\"min-w-full\">\r\n {data.map((d, i) => {\r\n const barHeight = (d.value \/ maxVal) * chartHeight;\r\n const x = i * (barWidth + gap) + 10;\r\n const y = chartHeight - barHeight;\r\n \r\n return (\r\n <g key={i} transform={`translate(${x}, 0)`}>\r\n <rect x={0} y={y} width={barWidth} height={barHeight} fill=\"#1e3a8a\" rx=\"4\" \/>\r\n <text x={barWidth \/ 2} y={y - 8} textAnchor=\"middle\" fontSize=\"9\" fontWeight=\"bold\" fill=\"#1e293b\" className=\"font-sans\">\r\n ${(d.value \/ 1000).toFixed(0)}k\r\n <\/text>\r\n <text\r\n transform={`translate(${barWidth \/ 2}, ${chartHeight + 15}) rotate(45)`}\r\n textAnchor=\"start\"\r\n fontSize=\"9\"\r\n fill=\"#64748b\"\r\n className=\"font-sans font-medium\"\r\n >\r\n {d.name.length > 20 ? d.name.substring(0, 18) + '...' : d.name}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 2: Donut (Status Count)\r\n const StatusDonutChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#64748b'];\r\n const radius = 70;\r\n const centerX = 90;\r\n const centerY = 90;\r\n let startPercent = 0;\r\n\r\n return (\r\n <div className=\"flex flex-wrap items-center justify-center gap-5\">\r\n <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\r\n {data.map((slice, i) => {\r\n if (slice.value === 0) return null;\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const pathData = slicePercent > 0.99 \r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n\r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i % colors.length]} transform=\"rotate(-90 90 90)\" \/>;\r\n })}\r\n <circle cx={centerX} cy={centerY} r={radius * 0.6} fill=\"white\" \/>\r\n <text x={centerX} y={centerY} textAnchor=\"middle\" dy=\"0.3em\" fontWeight=\"bold\" fontSize=\"20\" fill=\"#334155\" className=\"font-sans\">\r\n {total}\r\n <\/text>\r\n <\/svg>\r\n <div className=\"flex flex-col gap-2\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-2 text-xs\">\r\n <div style={{ backgroundColor: colors[i % colors.length] }} className=\"w-2.5 h-2.5 rounded-sm\" \/>\r\n <span className=\"text-slate-800 font-semibold\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">({item.value})<\/span>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 3: Horizontal Bar (Projects by Unit)\r\n const HorizontalBarChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n const rowHeight = 35;\r\n const width = 300;\r\n const labelWidth = 200;\r\n\r\n return (\r\n <svg width=\"100%\" height={data.length * rowHeight} className=\"min-h-[300px]\">\r\n {data.map((d, i) => {\r\n const barWidth = (d.value \/ maxVal) * (width - labelWidth);\r\n\r\n return (\r\n <g key={d.name} transform={`translate(0, ${i * rowHeight})`}>\r\n <text x={0} y={18} fontSize=\"11\" fill=\"#475569\" dominantBaseline=\"middle\" className=\"font-sans font-medium\">\r\n {d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name}\r\n <\/text>\r\n <rect x={labelWidth} y={5} width={barWidth} height={20} fill=\"#3b82f6\" rx=\"4\" \/>\r\n <text x={labelWidth + barWidth + 8} y={19} fontSize=\"11\" fontWeight=\"bold\" fill=\"#1e293b\" dominantBaseline=\"middle\" className=\"font-sans\">\r\n {d.value}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n <\/svg>\r\n );\r\n };\r\n\r\n \/\/ CHART 4: Comparison Pie (Extensions vs Faculties)\r\n const ComparisonPieChart = ({ data }) => {\r\n const total = data.reduce((sum, item) => sum + item.value, 0);\r\n const colors = ['#f43f5e', '#3b82f6', '#10b981']; \r\n let startPercent = 0;\r\n const centerX = 100;\r\n const centerY = 100;\r\n const radius = 80;\r\n\r\n return (\r\n <div className=\"flex flex-col items-center\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\r\n {data.map((slice, i) => {\r\n const slicePercent = slice.value \/ total;\r\n const endPercent = startPercent + slicePercent;\r\n const [startX, startY] = [Math.cos(2 * Math.PI * startPercent), Math.sin(2 * Math.PI * startPercent)];\r\n const [endX, endY] = [Math.cos(2 * Math.PI * endPercent), Math.sin(2 * Math.PI * endPercent)];\r\n const largeArcFlag = slicePercent > 0.5 ? 1 : 0;\r\n \r\n const pathData = slicePercent > 0.999\r\n ? `M ${centerX - radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX + radius} ${centerY} A ${radius} ${radius} 0 1 1 ${centerX - radius} ${centerY}`\r\n : `M ${centerX} ${centerY} L ${centerX + radius * startX} ${centerY + radius * startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * endX} ${centerY + radius * endY} Z`;\r\n \r\n startPercent = endPercent;\r\n return <path key={slice.name} d={pathData} fill={colors[i]} transform=\"rotate(-90 100 100)\" \/>;\r\n })}\r\n <\/svg>\r\n <div className=\"flex gap-4 mt-4 justify-center flex-wrap\">\r\n {data.map((item, i) => (\r\n <div key={item.name} className=\"flex items-center gap-1.5\">\r\n <div style={{ backgroundColor: colors[i] }} className=\"w-3 h-3 rounded-full\" \/>\r\n <div className=\"text-xs text-slate-700\">\r\n <span className=\"font-bold block\">{item.name}<\/span>\r\n <span className=\"text-slate-500\">{formatPercent(item.value\/total)}<\/span>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ CHART 5: Investment by Status (Simple Bar)\r\n const InvestmentStatusChart = ({ data }) => {\r\n const maxVal = Math.max(...data.map(d => d.value));\r\n return (\r\n <div className=\"flex flex-col gap-3 mt-2.5\">\r\n {data.map((item) => (\r\n <div key={item.name}>\r\n <div className=\"flex justify-between text-xs mb-1\">\r\n <span className=\"font-semibold text-slate-700\">{item.name}<\/span>\r\n <span className=\"font-bold text-slate-900\">{formatCurrency(item.value)}<\/span>\r\n <\/div>\r\n <div className=\"w-full h-3 bg-slate-100 rounded-full overflow-hidden\">\r\n <div \r\n style={{ width: `${(item.value \/ maxVal) * 100}%` }}\r\n className={`h-full rounded-full ${item.name.includes('CONTINUA') ? 'bg-emerald-500' : 'bg-blue-500'}`}\r\n \/>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n );\r\n };\r\n\r\n const ProjectTable = ({ data }) => {\r\n const [searchTerm, setSearchTerm] = useState(\"\");\r\n const [facultyFilter, setFacultyFilter] = useState(\"TODAS LAS FACULTADES\");\r\n const [statusFilter, setStatusFilter] = useState(\"TODOS\");\r\n\r\n const uniqueFaculties = useMemo(() => {\r\n const faculties = new Set(data.map(d => d.faculty));\r\n return [\"TODAS LAS FACULTADES\", ...Array.from(faculties).sort()];\r\n }, [data]);\r\n\r\n const statusOptions = [\"TODOS\", \"NUEVO\", \"CONTINUA\", \"CERRADO\"];\r\n\r\n const filteredData = useMemo(() => {\r\n return data.filter(item => {\r\n const matchesSearch = \r\n item.project.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.faculty.toLowerCase().includes(searchTerm.toLowerCase()) ||\r\n item.careers.toLowerCase().includes(searchTerm.toLowerCase());\r\n \r\n const matchesFaculty = facultyFilter === \"TODAS LAS FACULTADES\" || item.faculty === facultyFilter;\r\n const matchesStatus = statusFilter === \"TODOS\" || item.status.includes(statusFilter);\r\n\r\n return matchesSearch && matchesFaculty && matchesStatus;\r\n });\r\n }, [data, searchTerm, facultyFilter, statusFilter]);\r\n\r\n return (\r\n <div>\r\n <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\r\n <div className=\"relative flex-grow\">\r\n <input \r\n type=\"text\" \r\n placeholder=\"Buscar por proyecto, c\u00f3digo, facultad o carrera...\" \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm\"\r\n value={searchTerm}\r\n onChange={e => setSearchTerm(e.target.value)}\r\n \/>\r\n <\/div>\r\n \r\n <div className=\"min-w-[200px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={facultyFilter}\r\n onChange={e => setFacultyFilter(e.target.value)}\r\n >\r\n {uniqueFaculties.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n\r\n <div className=\"min-w-[150px]\">\r\n <select \r\n className=\"w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-sm bg-white cursor-pointer\"\r\n value={statusFilter}\r\n onChange={e => setStatusFilter(e.target.value)}\r\n >\r\n {statusOptions.map(s => <option key={s} value={s}>{s}<\/option>)}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"overflow-x-auto max-h-[500px] overflow-y-auto border border-slate-200 rounded-lg\">\r\n <table className=\"w-full border-collapse text-left text-sm\">\r\n <thead className=\"sticky top-0 bg-white z-10 shadow-sm\"><\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {filteredData.map((item) => (\r\n <tr key={item.id} className=\"hover:bg-slate-50 transition-colors\">\r\n <td className=\"p-3 align-top text-xs font-bold text-slate-600 w-1\/4\">\r\n {item.faculty}\r\n <\/td>\r\n <td className=\"p-3 align-top\">\r\n <div className=\"font-semibold text-slate-800 text-xs mb-0.5\">{item.project}<\/div>\r\n <div className=\"text-[10px] text-slate-500 uppercase tracking-wide\">{item.code}<\/div>\r\n <\/td>\r\n <td className=\"p-3 align-top w-28\">\r\n <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold ${\r\n item.status.includes('CONTINUA') ? 'bg-emerald-100 text-emerald-800' : \r\n item.status.includes('NUEVO') ? 'bg-blue-100 text-blue-800' : \r\n 'bg-slate-100 text-slate-500'\r\n }`}>\r\n {item.status.split(' ')[0]}\r\n <\/span>\r\n <\/td>\r\n <td className=\"p-3 align-top text-right font-bold text-slate-800 w-28\">\r\n {item.budget > 0 ? formatCurrency(item.budget) : <span className=\"text-slate-300\">-<\/span>}\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n {filteredData.length === 0 && (\r\n <tr>\r\n <td colSpan={4} className=\"p-8 text-center text-slate-500\">\r\n No se encontraron resultados para su b\u00fasqueda.\r\n <\/td>\r\n <\/tr>\r\n )}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ --- Main App ---\r\n\r\n const App = () => {\r\n const [data] = useState(INITIAL_DATA);\r\n\r\n const totalBudget = useMemo(() => data.reduce((acc, curr) => acc + curr.budget, 0), [data]);\r\n\r\n const budgetByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { acc[d.faculty] = (acc[d.faculty] || 0) + d.budget; });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 8);\r\n }, [data]);\r\n\r\n const countByFaculty = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { acc[d.faculty] = (acc[d.faculty] || 0) + 1; });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value)\r\n .slice(0, 10);\r\n }, [data]);\r\n\r\n const statusCounts = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => { \r\n let k = d.status.includes('CERRADO') ? 'CERRADO' : d.status;\r\n acc[k] = (acc[k] || 0) + 1; \r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n const extVsFac = useMemo(() => {\r\n let ext = 0, fac = 0, inst = 0;\r\n data.forEach(d => {\r\n if (d.faculty.includes('EXTENSI\u00d3N')) ext += d.budget;\r\n else if (d.faculty.includes('FACULTAD')) fac += d.budget;\r\n else inst += d.budget;\r\n });\r\n return [\r\n { name: 'Facultades', value: fac },\r\n { name: 'Institucional\/Otros', value: inst },\r\n { name: 'Extensiones', value: ext }\r\n ];\r\n }, [data]);\r\n\r\n const investmentByStatus = useMemo(() => {\r\n const acc = {};\r\n data.forEach(d => {\r\n let key = d.status.includes('NUEVO') ? 'NUEVO' : d.status.includes('CONTINUA') ? 'CONTINUA' : 'OTROS';\r\n acc[key] = (acc[key] || 0) + d.budget;\r\n });\r\n return Object.entries(acc)\r\n .map(([name, value]) => ({ name, value }))\r\n .sort((a, b) => b.value - a.value);\r\n }, [data]);\r\n\r\n return (\r\n <div className=\"max-w-7xl mx-auto px-6 py-10 min-h-screen\">\r\n \r\n <header className=\"mb-10 border-b border-gray-200 pb-6 flex flex-col md:flex-row md:items-end justify-between gap-6\">\r\n <div>\r\n <h1 className=\"text-4xl font-extrabold text-primary mb-2 uppercase\">Dashboard de Vinculaci\u00f3n 2025<\/h1>\r\n <p className=\"text-slate-500 text-lg max-w-2xl\">\r\n An\u00e1lisis estrat\u00e9gico de la inversi\u00f3n y ejecuci\u00f3n de proyectos universitarios.\r\n <\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <div className=\"text-xs text-slate-400 uppercase font-bold tracking-wider mb-1\">Presupuesto Total<\/div>\r\n <div className=\"text-3xl font-extrabold text-accent\">{formatCurrency(totalBudget)}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* ROW 1 *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Distribuci\u00f3n Presupuestaria (Top Facultades)<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-6 leading-relaxed\">\r\n Los <strong>Proyectos Institucionales<\/strong> dominan la inversi\u00f3n, seguidos por la Facultad de Ciencias de la Salud. \r\n Esta concentraci\u00f3n sugiere una estrategia centralizada para los proyectos de mayor envergadura econ\u00f3mica.\r\n <\/p>\r\n <BudgetBarChart data={budgetByFaculty} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-3 uppercase\">Top Unidades por Cantidad de Proyectos<\/h3>\r\n <p className=\"text-justify text-sm text-slate-600 mb-6 leading-relaxed\">\r\n Aunque el presupuesto se concentra en pocos actores, la operatividad es dispersa. \r\n La <strong>Facultad de Educaci\u00f3n<\/strong> y las <strong>Extensiones (Chone, El Carmen)<\/strong> lideran en volumen de proyectos, \r\n mostrando una alta actividad de vinculaci\u00f3n en territorio.\r\n <\/p>\r\n <HorizontalBarChart data={countByFaculty} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* ROW 2 *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8\">\r\n \r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Extensiones vs. Facultades<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n Las Facultades y Extensiones manejan presupuestos comparables, pero el componente <strong>Institucional<\/strong> absorbe casi el 50% de los recursos, equilibrando la balanza hacia proyectos transversales.\r\n <\/p>\r\n <ComparisonPieChart data={extVsFac} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Estado de Proyectos<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n La mayor\u00eda de la cartera se mantiene activa (CONTINUA), garantizando la continuidad de procesos. La tasa de cierre (CERRADO) es saludable, permitiendo la renovaci\u00f3n.\r\n <\/p>\r\n <StatusDonutChart data={statusCounts} \/>\r\n <\/Card>\r\n\r\n <Card>\r\n <h3 className=\"text-base font-bold text-primary mb-3 uppercase\">Inversi\u00f3n por Estado<\/h3>\r\n <p className=\"text-justify text-xs text-slate-600 mb-4 leading-relaxed\">\r\n Financieramente, la prioridad es clara: los recursos fluyen masivamente hacia los proyectos <strong>CONTINUA<\/strong>, asegurando su finalizaci\u00f3n exitosa.\r\n <\/p>\r\n <InvestmentStatusChart data={investmentByStatus} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n\r\n {\/* TABLA *\/}\r\n <Card>\r\n <h3 className=\"text-lg font-bold text-primary mb-4 uppercase\">Detalle de Proyectos<\/h3>\r\n <ProjectTable data={data} \/>\r\n <\/Card>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VINCULACI\u00d3N 2024 2025 Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n<\/p>\n","protected":false},"author":158,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4343","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"adminvivp","author_link":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/author\/adminvivp\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"VINCULACI\u00d3N 2024 2025 Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n Dashboard Vinculaci\u00f3n 2024 Dashboard de Vinculaci\u00f3n","_links":{"self":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/users\/158"}],"replies":[{"embeddable":true,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/comments?post=4343"}],"version-history":[{"count":16,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343\/revisions"}],"predecessor-version":[{"id":4410,"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/pages\/4343\/revisions\/4410"}],"wp:attachment":[{"href":"https:\/\/departamentos.uleam.edu.ec\/vicerrectorado-de-investigacion\/wp-json\/wp\/v2\/media?parent=4343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}