\n \n )\n\n })\n }\n \n \n
\n
\n {\n modules.map((module, index) => {\n const ComponentTagName = allModules[module.module_code][status];\n return (\n \n \n \n
\n \n )\n })\n }\n \n \n \n \n \n \n )\n}\nexport default VerticalTabs;","import Swal from 'sweetalert2';\nimport {Theme1} from './../themes/Theme1'\n\nexport const ICON = {\n SUCCESS: 'success',\n ERROR: 'error',\n WARNING: 'warning',\n INFO: 'info',\n QUESTION: 'question'\n}\n\nexport const AlertForm = (icon = ICON.INFO, title = \"\", text = \"\", position = \"center\", timer = 5000, confirmButtonText) => {\n const Toast = Swal.mixin({\n toast: true,\n position,\n showConfirmButton: confirmButtonText,\n timer,\n timerProgressBar: true,\n confirmButtonColor: Theme1.orange, \n confirmButtonText: confirmButtonText\n })\n\n Toast.fire({\n icon,\n title,\n text\n })\n}\n\nexport const AlertFormLarge = (icon = ICON.INFO, title = \"\", text = \"\", footer = null) => {\n Swal.fire({\n icon,\n title,\n text,\n footer\n })\n}\n\nexport const AlertConfirm = (icon = ICON.WARNING, title = \"\", text = \"\", callback = () => { }, textButton = 'Si', fallback = () => { }) => {\n Swal.fire({\n title,\n text,\n icon,\n showCancelButton: true,\n confirmButtonColor: Theme1.orange,\n cancelButtonColor: Theme1.red,\n confirmButtonText: textButton\n }).then((result) => {\n if (result.isConfirmed) {\n callback();\n } else if (result.dismiss === \"cancel\") {\n fallback();\n }\n })\n}\n\nexport const AlertHtml = (icon = ICON.INFO, title = \"\", html = \"\", footer = null) => {\n Swal.fire({\n title,\n html,\n icon,\n footer\n });\n}","import React, { useContext, useEffect, useState } from \"react\";\r\nimport Utils from \"../../../utils\";\r\nimport Select from \"react-select\";\r\nimport { styleTheme } from \"../../../themes/themeSelect\";\r\nimport { UserContext } from \"../../../Context/User\";\r\n\r\nfunction AddIndicator({ addIndicator }) {\r\n const { colorPalette } = useContext(UserContext);\r\n //obtains data from DB\r\n const [optionsIndicator, setOptionsIndicator] = useState([]);\r\n const [optionsStage, setOptionsStage] = useState([]);\r\n const [selectedIndicator, setSelectedIndicator] = useState(null);\r\n const [selectedStage, setSelectedStage] = useState(\"\");\r\n\r\n const indicatorHandler = (evt) => {\r\n setSelectedIndicator(evt.value);\r\n localStorage.setItem(\"selectedIndicator\", evt.value);\r\n };\r\n\r\n const stageHandler = (evt) => {\r\n setSelectedStage(evt.value);\r\n localStorage.setItem(\"selectedStage\", evt.value);\r\n };\r\n\r\n useEffect(() => {\r\n Utils.Petition.get(\r\n \"/indicators/getNames\",\r\n (res) => {\r\n let data = res.data;\r\n let _options = [];\r\n for (let name in data) {\r\n let label = `${data[name].code} ${data[name].name}`;\r\n let value = data[name].id;\r\n\r\n _options.push({ value: value, label: label });\r\n }\r\n setOptionsIndicator(_options);\r\n },\r\n (err) => {\r\n console.log(err);\r\n }\r\n );\r\n\r\n Utils.Petition.get(\r\n \"/stages_relation/filterbyname/montly\",\r\n (res) => {\r\n let _options = [];\r\n let data = res.names;\r\n for (let pos in data) {\r\n _options.push({ value: data[pos].code, label: data[pos].name });\r\n }\r\n setOptionsStage(_options);\r\n },\r\n (err) => {\r\n console.log(err);\r\n }\r\n );\r\n }, []);\r\n\r\n return (\r\n
\r\n
\r\n Generador de Indicadores\r\n
\r\n
\r\n
\r\n \r\n (styleTheme(theme, colorPalette?.primary))}\r\n />\r\n
\r\n
\r\n \r\n (styleTheme(theme, colorPalette?.primary))}\r\n />\r\n
\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default AddIndicator;\r\n","import React, { useContext, useEffect, useState } from \"react\";\nimport Utils from \"../../../utils\";\nimport Select from \"react-select\";\nimport { styleTheme } from \"../../../themes/themeSelect\";\nimport { UserContext } from \"../../../Context/User\";\n\nfunction AddPopup({ idpage, addPopup }) {\n const { colorPalette } = useContext(UserContext);\n const [popupOption, setPopupOption] = useState([]);\n const [popupDescription, setPopupDescription] = useState(\"\");\n\n const popupOptionHandler = (event) => {\n setPopupOption(event.value);\n };\n\n const popupDescriptionHandler = (event) => {\n setPopupDescription(event.target.value);\n };\n\n useEffect(() => {\n Utils.Petition.get(\n `/popups/idpage/${idpage}`,\n (res) => {\n let data = res.data;\n let _options = [];\n for (let pos in data) {\n let label = `${data[pos].id} - ${data[pos].name}`;\n let value = data[pos].id;\n\n _options.push({ value: value, label: label });\n }\n setPopupOption(_options);\n },\n (err) => {\n console.log(err);\n }\n );\n }, []);\n return (\n localStorage.setItem(\"popupOption\", popupOption) ||\n localStorage.setItem(\"popupDescription\", popupDescription) || (\n
\n
\n Generar PopUp\n
\n
\n
\n \n \n
\n
\n \n (styleTheme(theme, colorPalette?.primary))}\n />\n
\n
\n
\n )\n );\n}\n\nexport default AddPopup;\n","import React, { useContext, useEffect, useState } from \"react\";\nimport Utils from \"../../../utils\";\nimport Select from \"react-select\";\nimport { styleTheme } from \"../../../themes/themeSelect\";\nimport { UserContext } from \"../../../Context/User\";\n\nfunction AddSign() {\n const { colorPalette } = useContext(UserContext);\n //obtains data from DB\n const [optionsIndicator, setOptionsIndicator] = useState([]);\n const [optionsStage, setOptionsStage] = useState([]);\n const [selectedIndicator, setSelectedIndicator] = useState(null);\n const [selectedStage, setSelectedStage] = useState(\"\");\n\n const indicatorHandler = (evt) => {\n setSelectedIndicator(evt.value);\n localStorage.setItem(\"signIndicator\", evt.value);\n };\n\n const stageHandler = (evt) => {\n setSelectedStage(evt.value);\n localStorage.setItem(\"signStage\", evt.value);\n };\n\n useEffect(() => {\n Utils.Petition.get(\n \"/indicators/getNames\",\n (res) => {\n let data = res.data;\n let _options = [];\n for (let name in data) {\n let label = `${data[name].code} ${data[name].name}`;\n let value = data[name].id;\n\n _options.push({ value: value, label: label });\n }\n setOptionsIndicator(_options);\n },\n (err) => {\n console.log(err);\n }\n );\n\n Utils.Petition.get(\n \"/stages_relation/filterbyname/montly\",\n (res) => {\n let _options = [];\n let data = res.names;\n for (let pos in data) {\n _options.push({ value: data[pos].code, label: data[pos].name });\n }\n setOptionsStage(_options);\n },\n (err) => {\n console.log(err);\n }\n );\n }, []);\n\n return (\n
\n
\n Generador de Semaforos\n
\n
\n
\n \n (styleTheme(theme, colorPalette?.primary))}\n />\n
\n
\n \n (styleTheme(theme, colorPalette?.primary))}\n />\n
\n
\n
\n );\n}\n\nexport default AddSign;\n","import { Editor } from \"@tinymce/tinymce-react\";\nimport * as tinymce from \"@tinymce/tinymce-react\";\nimport React, { useContext, useRef, useState } from \"react\";\nimport { Button } from \"../../../commonStyles\";\nimport { AlertForm, ICON } from \"../../../Components/SweetAlert\";\nimport Utils from \"../../../utils\";\n\n//Indicator Convert Selector\nimport CustomModal from \"../../../base/CustomModal\";\nimport AddIndicator from \"../content/addIndicator\";\n\n//custom popups\nimport AddPopup from \"../content/addPopup\";\n\n//add sign\nimport AddSign from \"../content/addSign\"\nimport { UserContext } from \"../../../Context/User\";\nexport const EditorText = ({\n content,\n setContent,\n page,\n idModule,\n inline = false,\n menubar = true,\n}) => {\n const { colorPalette } = useContext(UserContext);\n //state vars for indicator Adder\n const editorRef = useRef(null);\n const [showModal, setShowModal] = useState(false);\n const [showSign, setShowSign] = useState(false);\n const [showCustomPageComponent, setShowCustomPageComponent] = useState(false);\n\n const selectorsHandler = () => {\n localStorage.removeItem(\"selectedIndicator\");\n localStorage.removeItem(\"selectedStage\");\n localStorage.removeItem(\"signIndicator\");\n localStorage.removeItem(\"signStage\");\n };\n\n //Saves data of the component\n const log = () => {\n if (editorRef.current) {\n setContent(editorRef.current.getContent());\n\n //petition to save data\n let data = editorRef.current.getContent();\n let id = idModule;\n\n let result = {\n id: id,\n config: { data: data },\n };\n\n Utils.Petition.post(\n \"/pages-modules/update\",\n result,\n (res) => {\n AlertForm(ICON.SUCCESS, \"Guardado Correctamente\", \"\");\n },\n (err) => {\n console.log(err);\n }\n );\n }\n };\n\n //Custom Popups\n\n const handleMenuCustomPageComponent = (event) => {\n event.preventDefault();\n setShowCustomPageComponent(true);\n };\n\n const handlePopup = (event) => {\n event.preventDefault();\n setShowModal(true);\n };\n\n const handleSign = (event) => {\n event.preventDefault();\n setShowSign(true);\n };\n\n\n const addIndicator = () => {\n let indicator = localStorage.getItem(\"selectedIndicator\");\n let stage = localStorage.getItem(\"selectedStage\");\n\n if (indicator && stage) {\n editorRef.current.execCommand('mceInsertContent', false, `Indicador@indicador:${indicator},escenario:${stage}@`)\n AlertForm(ICON.SUCCESS, \"Guardado Correctamente\", \"\");\n } else {\n AlertForm(ICON.ERROR, \"Se deben seleccionar los 2 campos\", \"\");\n }\n };\n\n const addPopup = () => {\n let popUpId = localStorage.getItem(\"popupOption\");\n let popUpDescription = localStorage.getItem(\"popupDescription\");\n\n if (popUpId && popUpDescription) {\n editorRef.current.execCommand('mceInsertContent', false, `PopUp@descripcion:${popUpDescription},id:${popUpId}@`)\n AlertForm(ICON.SUCCESS, \"PopUp Añadido\", \"\");\n } else {\n AlertForm(ICON.ERROR, \"Se deben seleccionar los 2 campos\", \"\");\n }\n };\n\n const addSign = () => {\n let indicator = localStorage.getItem(\"signIndicator\");\n let stage = localStorage.getItem(\"signStage\");\n\n if (indicator && stage) {\n editorRef.current.execCommand('mceInsertContent', false, `Semaforo@indicador:${indicator},escenario:${stage}@`)\n AlertForm(ICON.SUCCESS, \"Guardado Correctamente\", \"\");\n } else {\n AlertForm(ICON.ERROR, \"Se deben seleccionar los 2 campos\", \"\");\n }\n };\n\n return (\n <>\n
(editorRef.current = editor)}\n initialValue={content}\n init={{\n selector: \"textarea#classic\",\n width: \"100%\",\n height: 500,\n resize: false,\n inline,\n statusbar: false,\n language: \"es\",\n image_title: true,\n /* enable automatic uploads of images represented by blob or data URIs*/\n automatic_uploads: true,\n file_picker_types: \"image\",\n /* and here's our custom image picker*/\n file_picker_callback: function (cb, value, meta) {\n var input = document.createElement(\"input\");\n input.setAttribute(\"type\", \"file\");\n input.setAttribute(\"accept\", \"image/*\");\n input.onchange = function () {\n var file = this.files[0];\n if (file.type.slice(0, 5) === \"image\") {\n let reader = new FileReader();\n reader.onload = function (e) {\n if (meta.filetype === \"image\") {\n cb(e.target.result, { alt: file.name });\n }\n };\n reader.readAsDataURL(file);\n }\n };\n input.click();\n },\n\n menubar: menubar ? \"file edit view insert format tools table\" : false,\n plugins: [\n \" advlist anchor autolink codesample fullscreen help image imagetools charmap print\",\n \" lists link media noneditable preview emoticons insertdatetime hr\",\n \" searchreplace table template visualblocks wordcount code pagebreak \",\n ],\n templates: [\n {\n title: \"Non-editable Example\",\n description: \"Non-editable example.\",\n content: \"table1\",\n },\n {\n title: \"Simple Table Example\",\n description: \"Simple Table example.\",\n content: \"table2\",\n },\n ],\n\n toolbar:\n \"undo redo | bold italic | forecolor backcolor | template codesample | link image | alignleft aligncenter alignright alignjustify | bullist numlist | code pagebreak | fontselect fontsizeselect styleselect \",\n\n tinydrive_token_provider: function (success, failure) {\n success({\n token:\n \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo\",\n });\n },\n content_style:\n \"body { font-family:Helvetica,Arial,sans-serif; font-size:16px }\",\n }}\n />\n\n \n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n {parse(totalValue, options)}\n
\n \n );\n}\nexport default View;\n","import Edit from './Edit';\nimport View from './View';\nconst Html = {\n Edit, View\n}\nexport default Html;","import { useContext, useEffect, useState } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport {ADMIN_URL} from '../../config';\nimport { UserContext } from '../../Context/User';\nimport Utils from '../../utils';\nimport { ButtonConfig } from '../Components/ButtonConfig';\nfunction Edit({globalParams, page, module, everypages, filter}){\n const { validateShowComponent } = useContext(UserContext);\n const [showModal, setShowModal] = useState(false);\n useEffect(()=>{\n window.addEventListener('message', (event)=>{\n if(event.origin===ADMIN_URL && event.data==='cerrar popup'){\n setShowModal(false);\n }\n })\n }, []);\n const handlePopup = (event)=>{\n event.preventDefault();\n setShowModal(true);\n \n }\n return (\n \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) && }\n \n { showModal && \n \n \n \n }\n
\n );\n}\n\nexport default Edit;","import Circle from './Circle';\nfunction SignYellowIndicator({value, type, base = 100, percent = 90, isDescendingIndicator = false}){\n let percentYellow = Number(percent) / base;\n const validateColor = () => {\n if(value === null) return \"gray\";\n if(value === base) return \"green\"; \n if(!isDescendingIndicator) {\n if(value > base) return \"green\";\n \n if(value / base > percentYellow) return \"yellow\";\n return \"red\";\n } else {\n if(type === \"C\" ) {\n if(value > base) return \"green\";\n if(value / base > percentYellow) return \"yellow\";\n return \"red\";\n } else {\n return (value < base) ? \"green\" : \"red\"; \n }\n }\n\n } \n return(\n \n )\n}\nexport default SignYellowIndicator;","import styled from \"styled-components\";\nimport { Theme1 } from \"../../themes/Theme1\";\n\nexport const ButtonsContent = styled.div`\n width: 100%;\n display:flex;\n justify-content: flex-end;\n margin-bottom: 15px;\n\n`;\n\nexport const PerspectiveWrapper = styled.div`\n width: 100%;\n border-radius: ${Theme1.radius};\n background-color: white;\n padding: 10px;\n box-shadow: ${Theme1.shadow};\n margin-bottom: ${props => props.design ? \"20px\": \"10px\"};\n position: relative;\n :first-child{\n &.is-grouped{\n margin-top: unset !important;\n &:after{\n display: none !important;\n }\n }\n }\n &.is-grouped{\n margin-top: -20px;\n padding-top: 30px;\n &:after{\n content: \"\";\n display: block;\n width: 100%;\n height: 30px;\n background-color: white;\n top: -20px;\n left: 0;\n position: absolute;\n border-bottom: ${Theme1.borderTwo};\n }\n }\n`;\nexport const PerspectiveTitleWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: ${props => props.design ? \"space-between\": \"center\"};\n align-items: center;\n\n & .empty {\n width: 120px;\n }\n`;\n\nexport const PerspectiveTitle = styled.div`\n width: 300px;\n font-size: 18px;\n font-weight: bold;\n position: relative;\n padding-bottom: 10px;\n text-align: ${props => props.design ? \"left\": \"center\"};\n &::after{\n content: \"\";\n width: ${props => props.design ? \"120px\": \"280px\"};\n text-align: ${props => props.design ? \"left\": \"center\"};\n height: 2px;\n background-color: ${props => props.color};\n position: absolute;\n bottom: 8px;\n left: 0;\n }\n`;\nexport const PerspectiveTitleHandle = styled.div`\n color: ${Theme1.grayText};\n font-size: 12px;\n cursor: pointer;\n min-width: 112px;\n &:hover{\n color: ${props => props.color};\n }\n`;\n\nexport const ObjetiveWrapperCollapse = styled.div`\n width: 100%;\n position: relative;\n`;\n\nexport const ObjetiveContainerCollapse = styled.div`\n display: block;\n width: 100%;\n max-width: 470px;\n border-radius: ${Theme1.radius};\n background-color: white;\n padding: 20px;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n box-shadow: ${Theme1.shadow};\n .objetive_content{\n width: 100% !important;\n &>div{\n width: 100% !important;\n }\n }\n`;\n\nexport const ObjetiveWrapper = styled.div`\n width: 100%;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));\n justify-content: center;\n`;\n\nexport const ObjetiveContent = styled.div`\n width: 100%;\n padding: 10px;\n &.is-transversal{\n width: 100%;\n &>div{\n width: 100%;\n }\n }\n &.is-unique{\n width: 100%;\n &>div{\n width: 50%;\n margin: 0 auto;\n }\n }\n table{\n font-size: 12px;\n }\n`;\n\nexport const ObjetiveContainer = styled.div`\n \n width: 100%;\n border-radius: ${Theme1.radius};\n .container-table {\n border: ${Theme1.borderTwo};\n border-radius: ${Theme1.radius};\n font-size: 12px;\n max-height: 300px;\n overflow-y: auto;\n\n & table {\n position: relative;\n }\n & table > thead {\n position: sticky;\n top: 0;\n left: 0;\n background-color: white;\n }\n & table > thead th:first-child, & table> tbody > tr > td:first-child {\n width: 40%;\n }\n\n & table tbody > tr {\n border-bottom: ${Theme1.borderTwo};\n font-size: 10px;\n padding: 0.5rem;\n }\n }\n .objective-title{\n font-size: 14px;\n font-weight: bold;\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n color: white;\n background-color: ${props => props.backGroundColor};\n padding: 10px 10px;\n align-items: center;\n border-radius: 10px;\n border: medium solid ${props => props.backGroundColor};\n .label{\n padding-left: 0px;\n span{\n display: inline-block;\n width: 12px;\n height: 12px;\n border-radius: 10px;\n border: 1px solid rgb(204, 204, 204);\n margin-right: 5px;\n }\n }\n &:hover{\n box-shadow: ${Theme1.shadowContainer};\n }\n \n &.color-gray{\n .label{\n span{\n background-color: gray;\n }\n }\n }\n &.color-red{\n .label{\n span{\n background-color: red;\n }\n }\n }\n &.color-green{\n .label{\n span{\n background-color: green;\n }\n }\n }\n }\n`;\n\nexport const IndicatorLabel = styled.div`\n color: ${Theme1.grayText};\n cursor: pointer;\n font-weight: bold;\n &:hover{\n text-decoration: underline;\n }\n`;\nexport const ObjetiveJerarquico = styled.div`\n display: flex;\n`;\nexport const StyleArrow = styled.div`\n background: url(${props => props.image});\n height: 25px;\n width: 100%;\n color: red\n`;\n","import { useContext, useState } from \"react\";\nimport {FaRegCommentDots} from 'react-icons/fa';\nimport CustomModal from \"../../base/CustomModal\";\nimport Sign from \"../../Components/Sign\";\nimport SignYellowIndicator from \"../../Components/SignYellowIndicator\";\nimport { UserContext } from \"../../Context/User\";\nimport Utils from \"../../utils\";\nimport { IndicatorLabel } from \"./styles\";\n\nfunction Indicator({indicator, indicatorData, setShowIndicatorsDetailModal, setSelectedIndicatorDetail, config}){\n const { colorPalette } = useContext(UserContext);\n\n const [comment, setComment] = useState(0);\n const [showModal, setShowModal] = useState(false);\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n const handleCommentModal = ()=>{\n Utils.Petition.get('/comments/type-model/indicator/type-id/'+indicator+'/year/'+localStorage.getItem('year')+'/month/'+localStorage.getItem('month')+'/view/'+localStorage.getItem('view'), (response)=>{\n if(response){\n setComment(response.data.comment);\n }else{\n setComment('');\n }\n setShowModal(true);\n })\n }\n const handleDetailIndicator = (event)=>{\n event.preventDefault();\n setSelectedIndicatorDetail(indicator);\n setShowIndicatorsDetailModal(true);\n }\n\n return (\n \n | \n \n {indicatorData[indicator].name} \n \n {showModal &&\n \n {comment!==''?comment:Ningun comentario ingresado en el mes}\n \n }\n | \n \n {\n config.stages.includeYellow && config.stages.unitPercent &&\n <>\n {\n indicatorData[indicator].unit === '%' && \n }\n {\n indicatorData[indicator].unit !== '%' && \n }\n \n \n \n }\n {\n !config.stages.unitPercent && config.stages.includeYellow &&\n \n }\n {\n !config.stages.unitPercent && !config.stages.includeYellow &&\n \n }\n {\n !config.stages.includeYellow && config.stages.unitPercent && \n \n }\n {\n config.stages.col1.percent && indicatorData[indicator].col1 ? Utils.formatNumber(format_percent,indicatorData[indicator].col1) + \"%\" : \"\"\n }\n {\n !config.stages.col1.percent && Utils.formatNumber(format_number,indicatorData[indicator].col1)\n }\n | \n \n {\n indicatorData[indicator].col2 !== \"0\" &&\n \n {\n config.stages.col2.percent && indicatorData[indicator].col2 ? Utils.formatNumber(format_percent,indicatorData[indicator].col2) + \"%\" : \"\"\n }\n {\n !config.stages.col2.percent && Utils.formatNumber(format_number,indicatorData[indicator].col2)\n }\n | \n }\n {\n indicatorData[indicator].col3 !== \"0\" &&\n \n {\n config.stages.col3.percent && indicatorData[indicator].col3 ? Utils.formatNumber(format_percent,indicatorData[indicator].col3) + \"%\" : \"\"\n }\n {\n !config.stages.col3.percent && Utils.formatNumber(format_number,indicatorData[indicator].col3)\n }\n | \n }\n {\n indicatorData[indicator].col4 !== \"0\" &&\n \n {\n config.stages.col4.percent && indicatorData[indicator].col4 ? Utils.formatNumber(format_percent,indicatorData[indicator].col4) + \"%\" : \"\"\n }\n {\n !config.stages.col4.percent && Utils.formatNumber(format_number,indicatorData[indicator].col4)\n }\n | \n }\n
\n );\n}\nexport default Indicator;","import { useEffect, useState, useContext } from \"react\";\nimport { Col, Row, Table } from \"react-bootstrap\";\nimport { FaAngleDown, FaAngleUp } from \"react-icons/fa\";\nimport Indicator from \"./Indicator\";\nimport { ObjetiveContainer } from \"./styles\";\nimport { UserContext } from \"../../Context/User\";\n\nfunction Objective({config, objective, indicatorData, setShowIndicatorsDetailModal, setSelectedIndicatorDetail, showObjective, designSecondary = false}){\n const { colorPalette } = useContext(UserContext);\n const [show, setShow] = useState(false);\n const [colorBG, setColorBG] = useState(\"\");\n useEffect(()=>{\n setShow(showObjective);\n getColor();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showObjective])\n const getColor = ()=>{\n let greens = 0;\n let reds = 0;\n let finalColor = '#808080';\n for(let i in objective.data){\n let _color = calculateColor(indicatorData[objective.data[i]]);\n if(_color === 'yellow') return setColorBG('#e6da00');\n if(_color==='green') greens++;\n else if(_color==='red') reds++;\n }\n\n if(greens || reds){\n if(!greens) finalColor='#ff0000';\n else if(!reds) finalColor='#008000';\n else finalColor='#e6da00';\n }\n setColorBG(finalColor);\n }\n const calculateColor = (indicator)=>{\n let base = 100;\n if((config.stages.includeYellow && config.stages.unitPercent) || config.stages.unitPercent ) {\n base = indicator.unit === '%' ? 0: 100;\n }\n\n // let base = config.stages.includeYellow ? 100: indicator.unit === '%' ? 0: 100;\n if(indicator.sign===null) return 'gray';\n if(base === parseFloat(indicator.sign)) return 'green';\n\n if(config.stages.descendingIndicator) {\n if(indicator.type === 'C'){\n if(parseFloat(indicator.sign)base) return 'red';\n return 'green';\n }\n }\n if(parseFloat(indicator.sign)>base) return 'green';\n if(config.stages.includeYellow && parseFloat(indicator.sign)/base > Number(config.stages.percentYellow)/100) return 'yellow';\n return 'red';\n }\n\n return (\n \n \n \n \n \n setShow(!show)} className={\"objective-title color-\"+ colorBG}>\n
{objective.name}
\n
{show ? : }\n
\n {\n
\n \n \n | Indicador | \n {config.stages.col1.name} | \n {\n config.stages.col2.name !== '' &&\n {config.stages.col2.name} | \n }\n {\n config.stages.col3.name !== '' &&\n {config.stages.col3.name} | \n }\n {\n config.stages.col4.name !== '' && config.stages.col4.name !== undefined &&\n {config.stages.col4.name} | \n }\n
\n \n \n {\n objective.data.map((indicator, index)=>{\n return (\n \n )\n })\n }\n \n
\n }\n
\n \n );\n}\nexport default Objective;","import { useContext, useState } from \"react\";\nimport Objective from \"./Objective\";\nimport { FaAngleDown, FaAngleUp } from \"react-icons/fa\";\nimport { PerspectiveWrapper, PerspectiveTitle, ObjetiveWrapper, PerspectiveTitleWrapper, PerspectiveTitleHandle, ObjetiveContainerCollapse, ObjetiveWrapperCollapse, StyleArrow } from \"./styles\";\nimport { UserContext } from \"../../Context/User\";\nimport { Row } from \"react-bootstrap\";\n\nfunction Perspective({showObjective, config, perspective, setShowIndicatorsDetailModal, setSelectedIndicatorDetail, indicatorData, idx}){\n const { colorPalette } = useContext(UserContext);\n const [design, setDesign] = useState(config.stages.designStrategicMap === undefined ? \"Default\":config.stages.designStrategicMap.value);\n\n const getClassName = ()=>{\n let _class='';\n if(perspective.grouped){\n _class += ' is-grouped'\n }\n if(perspective.horizontal){\n _class += ' is-horizontal'\n }\n return _class;\n }\n const [showIndicadoresH, setShowIndicadoresH] = useState(false);\n\n const haddleIndicadores = () => {\n setShowIndicadoresH(!showIndicadoresH);\n }\n\n return (\n <>\n {\n design === \"Jerarquico\" && idx !== 0 &&\n \n }\n \n \n
\n {perspective.horizontal && }\n {perspective.name}\n {\n perspective.horizontal && \n Ver indicadores {showIndicadoresH ? :}\n }\n \n {\n perspective.horizontal ?\n
\n { showIndicadoresH &&\n \n {\n \n {\n\n perspective.data.map((objective, index)=>{\n return (\n \n )\n })\n }\n \n }\n \n }\n \n \n :\n
\n {\n design === \"Default\" && \n \n {\n perspective.data.map((objective, index)=>{\n return (\n \n )\n })\n }\n
\n }\n {\n design === \"Jerarquico\" && \n \n {\n perspective.data.map((objective, index)=>{\n return (\n \n )\n })\n }\n
\n }\n
\n }\n
Convenciones:
\n 100%
\n Parcial
\n No cumple
\n \n \n { \n showModal && \n \n {comment}\n \n }\n {\n showIndicatorsDetailModal &&\n \n \n \n }\n {\n module.config.data.map((perspective, index)=>{\n return \n })\n }\n \n : null\n )\n}\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst StrategicMap = {\n Edit, View\n}\nexport default StrategicMap;","import { useContext, useEffect, useState } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport {ADMIN_URL} from '../../config';\nimport { UserContext } from '../../Context/User';\nimport Utils from '../../utils';\nimport { ButtonConfig } from '../Components/ButtonConfig';\n\nfunction Edit({globalParams, page, module, everypages, filter}){\n const { validateShowComponent } = useContext(UserContext);\n const [showModal, setShowModal] = useState(false);\n useEffect(()=>{\n window.addEventListener('message', (event)=>{\n if(event.origin===ADMIN_URL && event.data==='cerrar popup'){\n setShowModal(false);\n }\n })\n }, []);\n const handlePopup = (event)=>{\n event.preventDefault();\n setShowModal(true);\n \n }\n\n\n return (\n \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) && }\n { showModal && \n \n \n \n }\n
\n );\n}\n\nexport default Edit;","import React, { useState, useEffect } from \"react\";\nimport { Doughnut } from 'react-chartjs-2';\nimport Utils from \"../utils\";\n\nfunction DoughnutChart({dataConfig, data}) {\n\n const [chartData, setChartData] = useState({});\n const format_percent = Utils.getConfigPortal('format_percent');\n const format_number = Utils.getConfigPortal('format_number');\n\n const chart = () => {\n let xlabels = [];\n \n let dataY = dataConfig.indicators.map(ind => {\n let label = \"\"\n if( ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\" ) label = ind.labelIndicator;\n else label = ind.name;\n\n let total = 0;\n data.map( d => {\n if(d.value !== null) total = total + Math.abs(parseInt(d.value))\n })\n\n let temp = 0;\n let value = 0;\n for (let i = 0; i < data.length; i ++) {\n if (data[i].indicator === ind.id && data[i].value !== null) {\n temp = data[i].value;\n value = Utils.formatNumber(format_percent,(Math.abs(temp)/total)*100);\n label = `${label} ${value}%` \n break;\n }\n }\n xlabels.push(label)\n return temp;\n });\n\n let backgroundColors = dataConfig.indicators.map(indicator => indicator.color);\n\n setChartData({\n labels:xlabels,\n datasets: [{\n data: dataY,\n backgroundColor: backgroundColors\n }]\n })\n }\n \n useEffect(() => {\n chart();\n }, []);\n\n return (\n \n \n
\n )\n}\n\nexport default DoughnutChart;","import React, { useState, useEffect } from \"react\";\nimport { Bar } from 'react-chartjs-2';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport Utils from \"../utils\";\n\nfunction WaterfallChart({dataConfig, data}) {\n\n const [chartData, setChartData] = useState({});\n const [minChart, setMinChart] = useState(0);\n\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n\n const chart = () => {\n\n let xlabels = [];\n const dataSet = [];\n let total = 0.0;\n let backgroundColors = [];\n let mayor = 0;\n let menor = 0;\n let contador = 0\n\n if( !dataConfig.addTotalColumn ) {\n dataConfig.indicators.map((ind, index) => {\n const aux = data.filter( d => d.indicator === ind.id && d.stage === ind.stage.id )[0];\n if( aux.value !== null && parseFloat(aux.value) !== 0 ) {\n contador++;\n if( index === 0) {\n mayor = parseFloat(aux.value);\n menor = parseFloat(aux.value);\n }\n xlabels.push(ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\" ? ind.labelIndicator : ind.name);\n const vStart = total;\n if(ind.negative){\n total -= parseFloat(aux.value);\n }else { \n total += parseFloat(aux.value);\n }\n if( index === dataConfig.indicators.length - 1) {dataSet.push(parseFloat(aux.value)); total = parseFloat(aux.value)}\n else dataSet.push([parseFloat(vStart.toFixed(2)), parseFloat(total.toFixed(2))]);\n mayor = total > mayor ? total : mayor;\n menor = total < menor ? total : menor;\n if( index > 0 && index < dataConfig.indicators.length - 1) {\n backgroundColors.push(aux.value < 0 ? dataConfig.colorNegative !== undefined ? dataConfig.colorNegative : \"#ef8220\" : dataConfig.colorPositive !== undefined ? dataConfig.colorPositive : \"#8eaadc\")\n } else {\n backgroundColors.push(ind.color)\n }\n \n };\n }) \n } else {\n /*let labelTotal = \"Label no definido\";\n if( dataConfig.hasOwnProperty('labelTotal') && dataConfig.labelTotal !== undefined && dataConfig.labelTotal.trim() !== \"\"){\n labelTotal = dataConfig.labelTotal;\n };\n let xlabels = dataConfig.indicators.map(ind => {\n if(ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\"){\n return ind.labelIndicator;\n } else {\n return ind.name;\n }\n }).concat(labelTotal);\n const backgroundColors = dataConfig.indicators.map(indicator => indicator.color).concat(dataConfig.backgroundTotalLabel)\n */\n }\n\n let aux_min = Math.floor(menor - (mayor - menor)/10)\n\n setMinChart( contador > 1 ? menor < 0 ? aux_min : aux_min < 0 ? 0 : aux_min : 0)\n\n setChartData({\n labels: xlabels, \n datasets: [{\n barPercentage: 1,\n data: dataSet,\n backgroundColor: backgroundColors,\n datalabels: {\n color: 'black',\n font: {\n weight: 'bold',\n size: 15\n },\n anchor: function(context) {\n let value = context.dataset.data[context.dataIndex];\n if (Array.isArray(value)) {\n if( value[1] - value[0] > 0) {\n return \"end\"\n } else if (value[1] - value[0] < 0) {\n return \"start\"\n }\n } else {\n if(value > 0) {\n return \"end\"\n } else if (value < 0) {\n return \"start\"\n }\n };\n },\n align: function(context) {\n let value = context.dataset.data[context.dataIndex];\n if (Array.isArray(value)) {\n if( value[1] - value[0] > 0) {\n return \"top\"\n } else if (value[1] - value[0] < 0) {\n return \"bottom\"\n }\n } else {\n if(value > 0) {\n return \"top\"\n } else if (value < 0) {\n return \"bottom\"\n }\n };\n },\n offset: 5,\n formatter: function(value, context) {\n let str = \"\"\n if (Array.isArray(value)) {\n if( value[1] - value[0] === 0) {\n return str\n }\n let format = Math.abs(value[1] - value[0]) < 100 ? ',.1f' : ',.0f';\n str = dataConfig.hasOwnProperty('yLeft') && dataConfig.yLeft !== undefined && dataConfig.yLeft.trim() !== \"PorDefecto\" ? dataConfig.yLeft === '%' ? Utils.formatNumber(format_percent, value[1] - value[0]) + \"%\" : \"$\" + Utils.formatNumber(format_number, value[1] - value[0]) : Utils.formatNumber(format, value[1] - value[0]);\n return str;\n } else {\n let format = Math.abs(value) < 100 ? ',.1f' : ',.0f';\n if( value !== 0 ) str = dataConfig.hasOwnProperty('yLeft') && dataConfig.yLeft !== undefined && dataConfig.yLeft.trim() !== \"PorDefecto\" ? dataConfig.yLeft === '%' ? Utils.formatNumber(format_percent, value) + \"%\" : \"$\" + Utils.formatNumber(format_number, value) : Utils.formatNumber(format_number, value);\n return str\n };\n },\n\n }\n }]\n })\n }\n\n useEffect(() => {\n chart();\n }, []);\n\n return (\n \n \n
\n )\n}\n\nexport default WaterfallChart","import React, { useState, useEffect } from \"react\";\nimport { Bar } from 'react-chartjs-2';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport Utils from \"../utils\";\n\nfunction StackedBarChart({dataConfig, data}) { \n\n const [chartData, setChartData] = useState({});\n const colors = ['#204f79', '#3074b6', '#8597b0', '#8eaadc', '#bdd7ee', '#aad18e', '#71ad47', '#548234', '#395723', '#e1f0d8']\n const [box, setBox] = useState(true);\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n const chart = () => { \n \n const dataSetInfo = []; \n let xlabels = dataConfig.columns.map(column => column.columnLabel)\n let numbersTotal = [];\n let colorLabelsTotal = {};\n if(dataConfig.infoTotal) {\n if ( dataConfig.otherIndTotal ) {\n for( let clave in dataConfig.othersIndForTotal) {\n let aux_total = new Array(dataConfig.othersIndForTotal[clave].indicator.length);\n for( let i = 0; i < aux_total.length; i++) {\n let data_total = dataConfig.othersIndForTotal[clave].indicator[i];\n let colorAux = data_total.hasOwnProperty('totalColor') ? data_total.totalColor : '#000000'\n if ( !colorLabelsTotal.hasOwnProperty(`${i}`) ) {\n colorLabelsTotal = {\n ...colorLabelsTotal,\n [`${i}`]: [colorAux]\n }\n } else {\n colorLabelsTotal[`${i}`].push(colorAux)\n }\n //console.log(data_total)\n for(let j=0; j {\n let aux_total = new Array(dataConfig.stagesTotalSelected.length);\n dataConfig.stagesTotalSelected.map((stage, index) => {\n for(let i=0; i stage.hasOwnProperty('serieLabel') && stage.serieLabel.trim() !== \"\" ? stage.serieLabel : stage.name )\n }\n\n dataConfig.series.map((serie, index) => {\n let info = {};\n info.backgroundColor = [];\n let numbersSerie = [];\n let labelsSerie = [];\n \n let labelSerie = serie.serieLabel;\n info.label = labelSerie;\n \n \n let dataTemp = dataConfig.columns.map((col, indexC) => {\n let temp = 0;\n let columnsOfSerie = dataConfig.indicatorsStages.filter(indStage => indStage.serieLabel === labelSerie && indStage.columnLabel === col.columnLabel)[0];\n if (columnsOfSerie !== undefined) {\n let aux_numbers = [];\n let aux_labels = [];\n let info_col = [];\n\n // Busca en indicador Stage su color\n let colorMatch;\n if( serie.multipleColors && !columnsOfSerie.checked){\n colorMatch = colors[indexC] || \"#B3B2B2\";\n setBox(false);\n } else if(columnsOfSerie.checked) {\n colorMatch = columnsOfSerie.background;\n } else {\n colorMatch = serie.serieColor;\n }\n info.backgroundColor.push(colorMatch);\n if(dataConfig.stagesSerie) {\n if(dataConfig.otherIndSerie) {\n info_col = dataConfig.othersIndForLabels[`${index}-${indexC}`].indicator;\n aux_numbers = new Array(info_col.length);\n aux_labels = new Array(info_col.length);\n } else {\n aux_numbers = new Array(dataConfig.stagesSerieSelected.length);\n }\n }\n\n for(let i=0; i 0 ) {\n for(let i=0; i {\n let color = 'black';\n if(stage.hasOwnProperty('totalColor') && stage.totalColor !== \"'#777273'\") color = stage.totalColor;\n\n info.datalabels.labels[\"label_\" + index] = {\n color,\n font: {\n weight: 'bold',\n size: 13\n },\n anchor: 'end',\n align: 'top',\n offset,\n textAlign: 'center',\n formatter: function(value, ctx) {\n let resp = \"\"; \n if( numbersTotal.length > 0 && Object.keys(numbersTotal[ctx.dataIndex]).length > 0 && numbersTotal[ctx.dataIndex].length > 0 && numbersTotal[ctx.dataIndex][index] !== undefined ) {\n return numbersTotal[ctx.dataIndex][index]\n }\n return resp;\n },\n }\n offset = offset - var_off + 4;\n })\n }\n else {\n\n let var_off = 22;\n let offset = var_off*(numbersTotal[0].length-1);\n\n for( let k = 0; k 0 && numbersTotal[ctx.dataIndex].length > 0 && numbersTotal[ctx.dataIndex][k] !== undefined ) {\n return numbersTotal[ctx.dataIndex][k];\n }\n return resp;\n },\n }\n offset = offset - var_off + 4;\n }\n }\n }\n \n } else {\n if ( !serie.hideLabel ) {\n let color = 'white';\n if(serie.hasOwnProperty('serieLabelColor') && serie.serieLabelColor !== '#777273' ) {\n color = serie.serieLabelColor;\n }\n info.datalabels = {\n color,\n textAlign: 'center',\n font: {\n size: 13\n },\n formatter: function(value, ctx) {\n let val = ctx.dataset.dataM[ctx.dataIndex]\n let resp = \"\";\n if( val.length > 0 && val[0] !== undefined ) {\n for(let i=0; i {\n chart();\n }, []);\n\n return (\n \n \n
\n )\n}\n\nexport default StackedBarChart","import React, { useState, useEffect } from \"react\";\nimport DoughnutChart from \"../../Components/DoughnutChart\";\nimport BarChart from \"../../Components/BarChart\";\nimport WaterfallChart from \"../../Components/WaterfallChart\";\nimport StackedBarChart from \"../../Components/StackedBarChart\";\nimport Utils from '../../utils';\nimport { GraphicCustomWrapper, GraphicCustomWrapperContent, GraphicCustomContainer } from \"./styles\";\n\nfunction View({page, module}){\n \n const [data, setData] = useState([]);\n const [bandera, setBandera] = useState(0);\n const currentYear = useState(parseInt(localStorage.getItem('year')));\n\n useEffect(() => {\n if( Object.keys(module.config).length > 0) {\n let end_point = ''; \n let indicators_temp = [];\n let indicators_complete_temp = []\n module.config.indicators.map(ind => {\n if( ind.multiStages ) {\n for( let i=0; i 0) {\n info_ind['labelIndicator'] = ind.stage[i]['labelStage'] === undefined || ind.stage[i]['labelStage'] === \"\" ? \"\" + currentYear[0] : ind.stage[i]['labelStage'];\n for( let j=0; j < parseInt(ind.stage[i].numYears); j++) {\n let aux = JSON.parse(JSON.stringify(info_ind));\n aux['otherYears'] = ind.stage[i].otherYears;\n aux['year'] = currentYear[0] - ind.stage[i].numYears + j;\n aux['completeYearInd'] = true;\n aux['labelIndicator'] = ind.stage[i].infoYears[j].labelYear !== \"\" ? ind.stage[i].infoYears[j].labelYear : \"\" + (currentYear[0] - ind.stage[i].numYears + j);\n aux['color'] = ind.stage[i].infoYears[j].colorYear;\n aux['dataLabelTop'] = false;\n indicators_temp.push(aux);\n } \n } else {\n info_ind['labelIndicator'] = ind.stage[i]['labelStage'];\n }\n info_ind['otherYears'] = false;\n info_ind['year'] = currentYear[0];\n info_ind['color'] = ind.stage[i]['color'];\n info_ind['completeYearInd'] = ind.stage[i]['completeYearInd'];\n info_ind['dataLabelTop'] = ind.stage[i].dataLabelTop\n info_ind['stageBarSelected'] = ind.stage[i].stageBarSelected;\n info_ind['percent'] = ind.stage[i]['percent'];\n info_ind['colorLabel'] = ind.stage[i]['colorLabel']; \n info_ind['nameLabel'] = ind.stage[i]['nameLabel']; \n indicators_temp.push(info_ind);\n }\n } else {\n let info_ind = JSON.parse(JSON.stringify(ind));\n if(ind.otherYears && ind.numYears > 0 && !ind.multiStages) {\n info_ind['labelIndicator'] = ind['labelIndicator'] === undefined || ind['labelIndicator'] === \"\" ? \"\" + currentYear[0] : ind['labelIndicator'];\n for( let j=0; j < ind.numYears; j++) {\n let aux = JSON.parse(JSON.stringify(info_ind));\n aux['otherYears'] = ind.otherYears;\n aux['year'] = currentYear[0] - ind.numYears + j;\n aux['completeYearInd'] = true;\n aux['labelIndicator'] = ind.infoYears[j].labelYear !== \"\" ? ind.infoYears[j].labelYear : \"\" + (currentYear[0] - ind.numYears + j);\n aux['color'] = ind.infoYears[j].colorYear;\n aux['dataLabelTop'] = false;\n indicators_temp.push(aux);\n } \n }\n info_ind.otherYears = false;\n info_ind.year = currentYear[0];\n indicators_temp.push(info_ind);\n }\n })\n\n if( module.config.completeYear ) {\n module.config.indicatorsComplete.map(ind => {\n if( ind.multiStages ) {\n for( let i=0; i {\n if(ind.dataLabelTop && ind.hasOwnProperty('stageBarSelected') && ind.stageBarSelected !== undefined ) {\n aux_cont ++; \n }\n })\n if( module.config.completeYear && module.config.option === \"currentYear\") {\n module.config.indicatorsComplete.map( ind => {\n if(ind.dataLabelTop && ind.hasOwnProperty('stageBarSelected') && ind.stageBarSelected !== undefined ) {\n aux_cont ++; \n }\n })\n };\n\n cont = cont + aux_cont;\n const option = module.config.option;\n let from = '';\n \n if(option !== 'lastYears'){\n\n if(option === 'lastMonths') {\n const months = module.config.months;\n const aux = new Date(fecha_SinDia.setMonth(fecha_SinDia.getMonth() - months + 1))\n if( aux.getMonth() + 1 < 10){\n from = aux.getFullYear() + '-0' + (aux.getMonth()+1) + '-01';\n } else {\n from = aux.getFullYear() + '-' + (aux.getMonth()+1) + '-01';\n }\n } else if(option === 'currentYear') from = today.getFullYear()+'-01-01';\n\n module.config.indicators.map( (infoIndicator) => {\n const toBefore = to;\n const fromBefore = from;\n\n if(option === 'currentYear' && infoIndicator.completeYearInd) {\n to = today.getFullYear() + '-12-01';\n };\n\n if(option === 'currentYear' && infoIndicator.otherYears) {\n to = infoIndicator.year + \"-12-01\";\n from = infoIndicator.year + \"-01-01\";\n };\n\n end_point = '/indicator-value/indicator/' + infoIndicator.id + '/stage/' + infoIndicator.stage.id + '/range/' + from + '/' + to;\n Utils.Petition.get(end_point,\n (response) => {\n temp.push({\n year: infoIndicator.year,\n indicator: infoIndicator.id,\n stage: infoIndicator.stage.id,\n data: response.data\n });\n ite++;\n if(ite === cont){\n setData(temp);\n setBandera(1); \n } \n } \n );\n if(infoIndicator.dataLabelTop && infoIndicator.hasOwnProperty('stageBarSelected') && infoIndicator.stageBarSelected !== undefined ) {\n end_point = '/indicator-value/indicator/' + infoIndicator.id + '/stage/' + infoIndicator.stageBarSelected.id + '/range/' + from + '/' + to;\n Utils.Petition.get(end_point,\n (response) => {\n temp.push({\n year: infoIndicator.year,\n indicator: infoIndicator.id,\n stage: infoIndicator.stageBarSelected.id,\n data: response.data\n });\n ite++;\n if(ite === cont){\n setData(temp);\n setBandera(1); \n } \n } \n );\n }\n to = toBefore;\n from = fromBefore;\n }); \n\n if( module.config.indicatorsComplete !== undefined && module.config.indicatorsComplete.length > 0) {\n \n let fromComplete = '';\n const aux = new Date(fecha_SinDia.setMonth(fecha_SinDia.getMonth()+1))\n\n if( aux.getMonth() + 1 < 10){\n fromComplete = aux.getFullYear() + '-0' + (aux.getMonth()+1) + '-01';\n } else {\n fromComplete = aux.getFullYear() + '-' + (aux.getMonth()+1) + '-01';\n }\n let toComplete = today.getFullYear() + '-12-01';\n\n module.config.indicatorsComplete.map( (infoIndicator) => {\n end_point = '/indicator-value/indicator/' + infoIndicator.id + '/stage/' + infoIndicator.stage.id + '/range/' + fromComplete + '/' + toComplete;\n Utils.Petition.get(end_point,\n (response) => {\n temp.push({\n year: infoIndicator.year,\n indicator: infoIndicator.id,\n stage: infoIndicator.stage.id,\n data: response.data\n })\n ite++;\n if(ite === cont){\n setData(temp);\n setBandera(1); \n } \n } \n );\n if(infoIndicator.dataLabelTop && infoIndicator.hasOwnProperty('stageBarSelected') && infoIndicator.stageBarSelected !== undefined ) {\n end_point = '/indicator-value/indicator/' + infoIndicator.id + '/stage/' + infoIndicator.stageBarSelected.id + '/range/' + from + '/' + to;\n Utils.Petition.get(end_point,\n (response) => {\n temp.push({\n year: infoIndicator.year,\n indicator: infoIndicator.id,\n stage: infoIndicator.stageBarSelected.id,\n data: response.data\n });\n ite++;\n if(ite === cont){\n setData(temp);\n setBandera(1); \n } \n } \n );\n };\n });\n }\n\n } else if(option === 'lastYears' ) {\n\n let num_years = module.config.years;\n let year = parseInt(localStorage.getItem('year'));\n let month = parseInt(localStorage.getItem('month')) + 1;\n let info_values = [];\n \n for(let i=0; i < num_years; i++) {\n module.config.indicators.map(ind => {\n info_values.push(\"'\" + ind.id + \"-\" + ind.stage.id + \"-\" + (year - i) + \"-\" + month + \"'\");\n if(ind.dataLabelTop && ind.hasOwnProperty('stageBarSelected') && ind.stageBarSelected !== undefined ) {\n info_values.push(\"'\" + ind.id + \"-\" + ind.stageBarSelected.id + \"-\" + (year - i) + \"-\" + month + \"'\");\n }\n })\n }\n \n end_point = '/indicator-value/info_values/' + info_values;\n Utils.Petition.get(end_point,\n (response) => {\n setData(response.data)\n setBandera(1); \n } \n ) \n } \n\n } else if (module.config.type === 'WaterfallChart' || module.config.type === 'DoughnutChart' || module.config.type === 'Table' ){\n\n let year = localStorage.getItem('year');\n let month = parseInt(localStorage.getItem('month')) + 1;\n let info_values = [];\n \n module.config.indicators.map(indicator => {\n if(module.config.type === 'WaterfallChart') {\n info_values.push(\"'\" + indicator.id + \"-\" + indicator.stage.id + \"-\" + year + \"-\" + month + \"'\")\n } else {\n module.config.stages.map(stage => {\n info_values.push(\"'\" + indicator.id + \"-\" + stage.id + \"-\" + year + \"-\" + month + \"'\")\n }); \n } \n });\n\n end_point = '/indicator-value/info_values/' + info_values;\n Utils.Petition.get(end_point, \n (response) => {\n setData(response.data) \n if( module.config.type === 'WaterfallChart' ) {\n setBandera(2);\n }else if(module.config.type === 'DoughnutChart' ){\n setBandera(3);\n }\n } \n )\n \n } else if ( module.config.type === 'StackedBarChart' ) {\n\n let year = localStorage.getItem('year');\n let month = parseInt(localStorage.getItem('month')) + 1;\n let info_values = [];\n\n \n module.config.indicatorsStages.map(indStage => {\n info_values.push(\"'\" + indStage.indicator.id + \"-\" + indStage.stage.id + \"-\" + year + \"-\" + month + \"'\" );\n if(module.config.stagesSerie && !module.config.otherIndSerie) {\n module.config.stagesSerieSelected.map(stage => {\n info_values.push(\"'\" + indStage.indicator.id + \"-\" + stage.id + \"-\" + year + \"-\" + month + \"'\");\n })\n };\n });\n\n if(module.config.stagesSerie && module.config.otherIndSerie) {\n for( let clave in module.config.othersIndForLabels) {\n for( let i = 0; i < module.config.othersIndForLabels[clave].indicator.length ; i++) {\n info_values.push(\"'\" + module.config.othersIndForLabels[clave].indicator[i].id + \"-\" + module.config.othersIndForLabels[clave].indicator[i].stage.id + \"-\" + year + \"-\" + month + \"'\");\n }\n }\n }\n\n if(module.config.infoTotal && !module.config.otherIndTotal) {\n module.config.indicatorTotalSelected.map( ind => {\n module.config.stagesTotalSelected.map(stage => {\n info_values.push(\"'\" + ind.id + \"-\" + stage.id + \"-\" + year + \"-\" + month + \"'\");\n })\n })\n }\n\n if(module.config.infoTotal && module.config.otherIndTotal) {\n for( let clave in module.config.othersIndForTotal) {\n for( let i = 0; i < module.config.othersIndForTotal[clave].indicator.length ; i++) {\n info_values.push(\"'\" + module.config.othersIndForTotal[clave].indicator[i].id + \"-\" + module.config.othersIndForTotal[clave].indicator[i].stage.id + \"-\" + year + \"-\" + month + \"'\");\n }\n }\n }\n \n \n end_point = '/indicator-value/info_values/' + info_values;\n \n Utils.Petition.get(end_point, \n (response) => {\n setData(response.data)\n setBandera(4);\n }\n )\n } \n }\n }, []);\n \n return(\n \n \n \n {\n module.config.title !== undefined && module.config.title !== \"\" &&\n {module.config.title}
\n } \n { \n data.length > 0 && bandera === 1 && \n }\n {\n data.length > 0 && bandera === 2 && \n }\n {\n data.length > 0 && bandera === 3 && \n }\n {\n data.length > 0 && bandera === 4 && \n }\n \n \n \n \n \n \n \n )\n}\n\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst Graphic = {\n Edit, View\n}\nexport default Graphic;","import { useContext, useEffect, useState } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport {ADMIN_URL} from '../../config';\nimport { UserContext } from '../../Context/User';\nimport Utils from '../../utils';\nimport { ButtonConfig } from '../Components/ButtonConfig';\n\nfunction Edit({globalParams, page, module, everypages, filter}){\n const { validateShowComponent } = useContext(UserContext);\n const [showModal, setShowModal] = useState(false);\n useEffect(()=>{\n window.addEventListener('message', (event)=>{\n if(event.origin===ADMIN_URL && event.data==='cerrar popup'){\n setShowModal(false);\n }\n })\n }, []);\n \n const handlePopup = (event)=>{\n event.preventDefault();\n setShowModal(true);\n \n }\n return (\n \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) && }\n { showModal && \n \n \n \n }\n
\n );\n}\n\nexport default Edit;","import React, { useState, useEffect } from \"react\";\nimport { Bar } from 'react-chartjs-2';\nimport Utils from \"../utils\";\n\nfunction BarChartUser ({config, data, stages}) {\n\n const [chartData, setChartData] = useState({});\n const meses = [ \"Ene\", \"Feb\", \"Mar\", \"Abr\", \"May\", \"Jun\", \"Jul\", \"Ago\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"]; \n\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n\n const chart = () => {\n const xLabels = meses.slice(0, data[0].data.length);\n let dataSetInfo = [];\n\n stages.map((id, index) => {\n let info = {}\n const data_stage = (data.filter( d => d.indicator === config.indicator.id && d.stage === id))[0];\n info.data = data_stage.data.map( temp => temp.value );\n info.backgroundColor = config.stages[index].color;\n info.type = config.stages[index].type === 'PorDefecto'? 'bar' : config.stages[index].type || 'bar';\n info.fill = \"false\";\n info.borderColor = config.stages[index].color;\n if ( config.stages[index].hasOwnProperty('labelStage') && config.stages[index].labelStage !== \"\" ) {\n info.label = config.stages[index].labelStage;\n } else {\n info.label = config.stages[index].label;\n }\n info.borderRadius = 10; \n dataSetInfo.push(info)\n })\n\n setChartData({\n labels: xLabels,\n datasets: dataSetInfo\n })\n }\n \n useEffect(() => {\n chart();\n }, []);\n\n\n return (\n \n \n
\n )\n}\nexport default BarChartUser","import { Col, Row } from 'react-bootstrap';\nimport React, { useState, useEffect, useContext } from \"react\";\nimport Utils from '../utils';\nimport AsyncSelect from 'react-select/async';\nimport Select from 'react-select';\nimport { Button } from '../commonStyles';\nimport { Theme1 } from '../themes/Theme1';\nimport { styleTheme } from '../themes/themeSelect';\nimport { UserContext } from '../Context/User';\n\nfunction SelectInfo({ form, setForm, setShowModal, id }) {\n const { colorPalette } = useContext(UserContext);\n const [stages, setStages] = useState([]);\n const [iduser, setIduser] = useState(localStorage.getItem('iduser'))\n const [indicator, setIndicator] = useState({});\n const [stage, setStage] = useState([]);\n const [flagUser, setFlagUser] = useState(false);\n\n useEffect(() => {\n Utils.Petition.get(\n '/stages_relation/select',\n (response) => {\n setStages(response.data);\n }\n );\n\n if (form.users.hasOwnProperty(iduser)) {\n setIndicator(form.users[iduser].indicator)\n setStage(form.users[iduser].stages)\n setFlagUser(true);\n } else {\n setIndicator(form.default.indicator)\n setStage(form.default.stages)\n }\n }, [])\n\n const loadIndicators = (inputValue) => {\n\n if (inputValue.length > 1) {\n return new Promise((resolve) => {\n setTimeout(() => {\n Utils.Petition.get(\n '/indicators/name-code-indicator/' + inputValue,\n (response) => {\n resolve(response.data)\n }\n )\n }, 100);\n });\n }\n return new Promise((resolve) => resolve([]));\n };\n\n const selectIndicators = (data) => {\n setIndicator(data);\n };\n\n const selectStage = (data, index) => {\n let temp = [...stage];\n temp[index] = data;\n setStage(temp);\n }\n\n const handleSubmit = (event) => {\n event.preventDefault();\n const configUser = { indicator, stages: stage };\n const data = {\n id,\n config: configUser\n }\n let temp = form.users;\n temp = {\n ...temp,\n [iduser]: configUser\n }\n\n if (flagUser) {\n let changeStage = false;\n for( let i=0; i {\n setForm({\n ...form,\n users: temp\n })\n }\n );\n }\n\n } else {\n let changeStage = false;\n for( let i=0; i {\n setForm({\n ...form,\n users: temp\n })\n }\n );\n }\n\n }\n setShowModal(false)\n }\n\n return (\n \n )\n\n}\n\nexport default SelectInfo;","import styled from \"styled-components\";\nimport { Theme1 } from \"./../../themes/Theme1\";\n\nexport const GraphicWrapper = styled.div`\n width: 100%;\n padding: 10px;\n`;\nexport const GraphicWrapperContent = styled.div`\n display: block;\n width: 100%;\n`;\nexport const GraphicContainer = styled.div`\n width: 100%;\n padding: 20px;\n background-color: white;\n border-radius: ${Theme1.radius};\n box-shadow: ${Theme1.shadow};\n h3{\n font-size: 18px;\n display:flex;\n justify-content: space-between;\n margin-bottom: 0 !important;\n }\n`;\n\n","import React, { useState, useEffect } from \"react\";\nimport Utils from '../../utils';\nimport BarChartUser from '../../Components/BarChartUser';\nimport { FaCog } from \"react-icons/fa\";\nimport { Col, Row } from 'react-bootstrap';\nimport CustomModal from '../../base/CustomModal'\nimport SelectInfo from \"../../Components/SelectInfo\";\nimport { GraphicWrapper, GraphicContainer, GraphicWrapperContent } from \"./styles\";\n\nfunction View({ page, module }) {\n\n const [data, setData] = useState([]);\n const [showModal, setShowModal] = useState(false);\n const [form, setForm] = useState(module.config);\n const [loaded, setLoaded] = useState(false);\n const [title, setTitle] = useState(\"\");\n const [config, setConfig] = useState({});\n const [idModule, setIdModule] = useState(module.id);\n const [idstages, setIdstages] = useState([]);\n\n\n const getInfo = ({ stages, indicator }) => {\n const view = localStorage.getItem('view');\n let contador = 0;\n let today = new Date(localStorage.getItem('year'), localStorage.getItem('month'))\n let to = '';\n\n if (today.getMonth() + 1 < 10) {\n to = today.getFullYear() + '-0' + (today.getMonth() + 1) + '-01';\n } else {\n to = today.getFullYear() + '-' + (today.getMonth() + 1) + '-01';\n }\n const from = today.getFullYear() + '-01-01';\n let aux = [];\n let aux_2 = [];\n\n for (let i = 0; i < stages.length; i++) {\n const stage = stages[i];\n let idstage = -1;\n\n for (let j = 0; j < stage.view.length; j++) {\n if (stage.view[j] === view) {\n idstage = stage.value[j];\n aux_2.push(idstage);\n break;\n }\n }\n\n const end_point = `/indicator-value/indicator/${indicator.id}/stage/${idstage}/range/${from}/${to}`;\n Utils.Petition.get(end_point,\n (response) => {\n const data = {\n indicator: indicator.id,\n stage: idstage,\n data: response.data\n }\n aux.push(data)\n contador++;\n if (contador === stages.length) {\n setData(aux);\n setLoaded(true);\n }\n }\n )\n };\n setIdstages(aux_2);\n }\n\n useEffect(() => {\n setLoaded(false);\n\n if (Object.keys(module.config).length > 0) {\n const iduser = localStorage.getItem('iduser');\n let indicator = {};\n let stages = {};\n if (form.users[iduser]) {\n indicator = form.users[iduser].indicator;\n stages = form.users[iduser].stages;\n for (let i = 0; i < form.default.stages.length; i++) {\n stages[i].color = form.default.stages[i].color;\n stages[i].type = form.default.stages[i].type;\n }\n setTitle(form.users[iduser].indicator.name)\n } else {\n indicator = form.default.indicator;\n stages = form.default.stages;\n setTitle(form.default.title === \"\" ? form.default.indicator.name : form.default.title);\n indicator.legend = form.default.legend;\n }\n setConfig({ indicator, stages, hideLegend: form.default.hideLegend, legendPosition: form.default.legendPosition, height: form.default.height, yLeft: form.default.yLeft, minYL: form.default.minYL });\n getInfo({ indicator, stages });\n }\n }, [form])\n\n const handlePopup = () => {\n setShowModal(true);\n }\n\n return (\n \n \n \n {\n loaded && Object.keys(config).length > 0 &&\n <>\n \n {title}
\n
\n {\n data.length > 0 && \n }\n \n {\n showModal &&\n \n }\n \n \n }\n \n \n\n \n )\n}\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst UserGraphic = {\n Edit, View\n}\nexport default UserGraphic;","import { useContext, useState } from \"react\";\nimport { Card } from \"react-bootstrap\";\nimport CustomModal from \"../../base/CustomModal\";\nimport { UserContext } from \"../../Context/User\";\nimport Utils from \"../../utils\";\nimport { ButtonConfig } from \"../Components/ButtonConfig\";\n\nfunction Edit({globalParams, page, module, everypages, filter}){\n const { validateShowComponent } = useContext(UserContext);\n const [showModal, setShowModal] = useState(false);\n const handlePopup = (event)=>{\n event.preventDefault();\n setShowModal(true);\n \n }\n \n return (\n \n {\n module.config.description !== undefined && \n \n { module.config.description }\n \n } \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) && }\n { \n showModal && \n \n \n \n }\n
\n );\n}\nexport default Edit;","import { useEffect, useState } from 'react';\n\nimport Circle from './Circle';\nfunction TendenceSign({value, type, base, styles}){\n const [baseNumber, setBaseNumber] = useState(100);\n const [valueNumber, setValueNumber] = useState(100);\n useEffect(() => {\n if(base === undefined) {\n setBaseNumber(0);\n } else if(Number(base) === \"NaN\") {\n setBaseNumber(null);\n } else {\n setBaseNumber(Number(base));\n }\n }, [base]);\n\n useEffect(() => {\n if(value === undefined || value === null) {\n setValueNumber(null);\n } else if(Number(value) === \"NaN\") {\n setValueNumber(null);\n } else {\n setValueNumber(Number(value));\n }\n }, [value]);\n \n return(\n (valueNumber===null || baseNumber===null)\n ? \n :(\n (valueNumber === baseNumber)\n ? \n :(\n (type === 'C')\n ?(\n (valueNumber > baseNumber) \n ?\n :\n )\n :(\n (valueNumber < baseNumber) \n ?\n :\n )\n )\n )\n\n )\n}\nexport default TendenceSign;","import styled from \"styled-components\";\nimport { Theme1 } from \"../../themes/Theme1\";\n\nexport const CustomCard = styled.div`\n\n border: 1px solid lightgray;\n border-radius: 0.5rem;\n padding: 1rem;\n box-shadow: ${Theme1.shadow};\n margin: 2.5rem 0 1rem 0;\n color: black;\n height: 170px;\n transition: transform 1s ease-in-out;\n\n &:hover {\n pointer-events: all;\n border: 1px solid green;\n cursor: pointer;\n transform: scale(1.1, 1.1);\n }\n & .number {\n display: flex;\n justify-content: space-evenly;\n margin: 1rem 0;\n & svg {\n font-size: 1.5rem;\n }\n & p {\n margin: 0;\n font-weight: bolder;\n font-size: 1.5rem;\n }\n }\n & .description {\n font-style: italic;\n font-size: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 65px;\n }\n \n`;\n\nexport const Comments = styled.div`\n height: 50px;\n text-align: center;\n & svg {\n cursor: pointer;\n }\n\n & textarea {\n resize: none;\n font-size: 0.8rem;\n overflow: hidden;\n }\n & span.comment {\n margin-right: 1rem;\n font-size: 0.85rem;\n text-align: justify;\n overflow-wrap: break-word;\n }\n`;\n\nexport const ViewContainer = styled.div`\n \n`;","import { useContext, useEffect, useState } from \"react\";\nimport { FaEdit, FaSave } from \"react-icons/fa\";\nimport Sign from \"../../Components/Sign\";\nimport TendenceSign from \"../../Components/TendenceSign\";\nimport Utils from \"../../utils\";\nimport { Comments, CustomCard, ViewContainer } from \"./styles\";\nimport { Form} from \"react-bootstrap\";\nimport { Link } from 'react-router-dom';\nimport { UserContext } from \"../../Context/User\";\n\nfunction View({page, module}){\n const { hasPermission } = useContext(UserContext);\n const [values, setValues] = useState({});\n const [edit, setEdit] = useState(false);\n const [comment, setComment] = useState('');\n const [commentInput, setCommentInput] = useState('');\n\n const format = Utils.getConfigPortal('format_number');\n\n useEffect(()=>{\n let sign = 0;\n let stage = 0;\n let viewsSign = {};\n let viewsStage = {};\n if(module.config && Object.keys(module.config).length > 0){\n for(let i= 0; i{\n setValues(response.data[0]);\n //console.log(response.data);\n }\n )\n Utils.Petition.get(\n `/comments/type-model/page_module/type-id/${module.id}/year/${localStorage.getItem('year')}/month/${localStorage.getItem('month')}/view/${module.config.view ? module.config.view: localStorage.getItem('view')}`,\n (response)=>{\n setComment(response.data.comment);\n }\n )\n }\n \n }, []);\n const handleEditMode = () => {\n setCommentInput(comment);\n setEdit(true);\n }\n const handleSave = () => {\n //Save\n Utils.Petition.post('/comments', {\n typeModel:'page_module',\n idtype:module.id, \n year:localStorage.getItem('year'), \n month:localStorage.getItem('month'), \n view: module.config.view ? module.config.view: localStorage.getItem('view'),\n comment: commentInput\n }, (response)=>{\n setEdit(false);\n setComment(commentInput);\n })\n }\n const cardComponent = () => {\n return (\n \n \n
\n
{module.config.prefix}{Utils.formatNumber(format,values.col1)}{module.config.postfix}
\n
\n {module.config.description}\n
\n \n )\n }\n return (\n \n {\n module.config.type && \n \n {cardComponent()}\n \n }\n {\n !module.config.type && \n <>\n {cardComponent()}\n \n }\n \n {\n edit ? \n <>\n setCommentInput(event.target.value)}/>\n \n \n : \n <>\n \n {\n !comment ?\n 'Sin comentarios': \n comment\n }\n \n { hasPermission.edit && }\n \n }\n \n \n )\n}\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst IndicatorRelevant = {\n Edit, View\n}\nexport default IndicatorRelevant;","import { useState, useEffect, useContext } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport Utils from '../../utils';\nimport React from \"react\";\nimport { ButtonConfig } from '../Components/ButtonConfig';\nimport { UserContext } from '../../Context/User';\n\n\nfunction Edit({ globalParams, page, module, everypages, filter }) {\n\n const { validateShowComponent } = useContext(UserContext);\n const [_idObjetive, setIdObjetive] = useState(0)\n const [showModal, setShowModal] = useState(false);\n const [showIndicatorsModal, setIndicatorsModal] = useState(false);\n const [isMenuModule, setIsMenuModule] = useState(false);\n const [updateData, setUpdateData] = useState(false);\n const [dataObjetive, setDataObjetive] = useState([]);\n const [dataIndicators, setDataIndicators] = useState([]);\n const [image, setImage] = useState(new window.Image());\n const [state, setState] = useState({\n selectedShapeName: \"\"\n });\n const handlePopup = (event) => {\n event.preventDefault();\n setShowModal(true);\n }\n return (\n\n \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) &&}\n \n {showModal &&\n \n \n \n }\n
\n );\n}\nexport default Edit;","export default __webpack_public_path__ + \"static/media/mapa-e.83e2b3f8.png\";","import styled from \"styled-components\";\n\nexport const NameIndicator = styled.span`\n cursor: pointer;\n color: ${props => props.color};\n &:hover{\n text-decoration: underline;\n }\n`;","import { useState, useEffect, useContext } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport { Container, Row } from 'react-bootstrap';\nimport Utils from '../../utils';\nimport React from \"react\";\nimport Mapa from \"../value-map/mapa-e.png\";\nimport '../../style.css'\nimport IndicatorDetail from '../../Components/IndicatorDetail';\nimport Sign from '../../Components/Sign';\nimport { IndicatorConvensiones } from '../../Components/styles';\nimport { NameIndicator } from './styles';\nimport { UserContext } from '../../Context/User';\n\n\nfunction View({ globalParams, page, module }) {\n const { colorPalette } = useContext(UserContext);\n\n const [config, setConfig] = useState({});\n \n const [_idObjetive, setIdObjetive] = useState(0);\n const [_idIndicator, setIdIndicator] = useState(0);\n const [dataObjetive, setDataObjetive] = useState([]);\n const [image, setImage] = useState(new window.Image());\n const [showIndicatorsModal, setIndicatorsModal] = useState(false);\n const [showIndicatorsDetailModal, setIndicatorsDetailModal] = useState(false);\n const [dataIndicators, setDataIndicators] = useState([]);\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n \n const img = new window.Image();\n\n useEffect(() => {\n img.src = Mapa;\n img.addEventListener('load', handleLoad);\n if (Object.keys(module.config).length === 0) {\n module.config = {\n indicator: [],\n objetives: []\n }\n }\n setConfig(module.config)\n getColor();\n }, []);\n\n const handleLoad = () => {\n setImage(img);\n }\n\n const handlePopupIndicators = (id) => {\n setIdObjetive(id)\n setDataIndicators([]);\n asyncUpdateIndicator(id);\n setIndicatorsModal(true);\n }\n\n const handlePopupDetail = (id) => {\n setIdIndicator(id)\n setIndicatorsDetailModal(true);\n }\n let v = 0;\n let r = 0;\n function getColor() {\n var _newDataIndicators = [];\n module.config.objetives.map((obj, key) => {\n let newDataObjetive = [];\n module.config.indicator.map((ind, index) => {\n if (module.config.indicator[index].IDObjetive === obj.ID) {\n newDataObjetive.push(module.config.indicator[index].IDIndicator)\n }\n })\n \n let color = \"amarillo\"\n if (obj.DSNumber !== \"\" && newDataObjetive !== []) {\n const indicatorValue = {\n indicators: newDataObjetive,\n view: \"A\",// localStorage.getItem('view'),\n year: localStorage.getItem('year'),\n month: parseInt(localStorage.getItem('month'))+1\n };\n if (indicatorValue.indicators.length !== 0 && indicatorValue.indicators !== []) {\n Utils.Petition.post('/indicator-value/indicators_table_values',\n indicatorValue,\n (response) => {\n r=0;\n v=0;\n response.data.map((data, index2) => {\n var real = 0;\n var ppto = 0;\n if (data.real !== null) { real = parseFloat(data.real.replace(\".\", \"\").replace(\",\", \".\")) };\n if (data.ppto !== null) { ppto = parseFloat(data.ppto.replace(\".\", \"\").replace(\",\", \".\")) };\n if (real === 0 || ppto === 0) {\n color = \"amarillo\"\n } else\n if (real === ppto) { color = \"verde\";v++;}\n else {\n if (data.type === \"C\") {\n if (real > ppto) { color = \"verde\";v++; }\n else { color = \"rojo\";r++; }\n } else {\n if (real > ppto) { color = \"rojo\";r++; }\n else { color = \"verde\";v++; }\n }\n }\n response.data[index2].color = color\n response.data[index2].IDObjetive = obj.ID\n _newDataIndicators.push(response.data[index2])\n })\n if (v === 0 && r > 0) color = \"rojo\";\n else if (r === 0 && v > 0) color = \"verde\";\n else color=\"amarillo\";\n \n module.config.objetives[key].semaforo = color\n setDataObjetive([...module.config.objetives]);\n })\n }else{\n module.config.objetives[key].semaforo = color\n setDataObjetive([...module.config.objetives]);\n }\n }\n \n })\n setDataIndicators(_newDataIndicators);\n }\n\n function asyncUpdateIndicator(id) {\n let newDataObjetive = [];\n config.indicator.map((data, index) => {\n if (config.indicator[index].IDObjetive == id) {\n newDataObjetive.push(config.indicator[index].IDIndicator)\n }\n })\n if (newDataObjetive !== []) {\n const indicatorValue = {\n indicators: newDataObjetive,\n view: \"A\",// localStorage.getItem('view'),\n year: localStorage.getItem('year'),\n month: parseInt(localStorage.getItem('month'))+1\n };\n if (indicatorValue.indicators.length !== 0) {\n Utils.Petition.post('/indicator-value/indicators_table_values',\n indicatorValue,\n (response) => {\n response.data.map((data, index) => {\n if(data.unit !==\"%\") response.data[index].base = 100;\n else response.data[index].base = 0;\n response.data[index].porcentaje = data.cp\n })\n setDataIndicators(response.data);\n })\n }\n }\n\n }\n return (\n \n \n \n \n \n \n | Nombre | \n Real | \n Ppto | \n RF | \n VAR | \n \n \n {\n dataIndicators.map((indicator, index) => {\n return (\n \n | {indicator.name} | \n {Utils.formatNumber(format_number, indicator.real)} | \n {Utils.formatNumber(format_number, indicator.ppto)} | \n {Utils.formatNumber(format_number, indicator.rf)} | \n {Utils.formatNumber(format_percent, indicator.var)} | \n
\n )\n })\n }\n \n
\n
\n \n \n \n \n \n \n \n Convenciones:
\n 100%
\n Parcial
\n No cumple
\n \n \n {\n dataObjetive.map((objetive, index) => {\n const style = {\n left: objetive.NMX,\n top: objetive.NMY,\n width: objetive.NMWidth + \"px\",\n transform: `rotate(${objetive.NMRotation}deg) `,\n color: objetive.DSColor,\n padding: \"10px\",\n transformOrigin: \"left top\"\n };\n var number = \"\"\n var classes = \"\"\n if (objetive.DSNumber !== \"\") {\n classes = `mv-dynamic-element objetives `;\n number = `number ${objetive.semaforo}`\n } else {\n classes = `mv-dynamic-element`;\n }\n if(objetive.DSNumber!== \"\"){\n return (\n
{\n <>\n
{objetive.DSNumber}
\n
{objetive.DSText}
\n \n }\n
\n )\n }else{\n return (\n
{\n <>\n
{objetive.DSNumber}
\n
{objetive.DSText}
\n \n }\n
\n )\n }\n \n })\n }\n
\n {(module.idpopup !== null || validateShowComponent(everypages, filter)) &&}\n \n { showModal && \n \n \n \n }\n
\n );\n}\nexport default Edit;","import React, { useState, useEffect, useContext } from \"react\";\nimport { Table, Dropdown } from 'react-bootstrap';\nimport Utils from \"../utils\";\nimport { Link } from \"react-router-dom\";\nimport { ConfigTable, ConfigTable2, TableWrapper } from \"./styles\";\nimport Sign from \"./Sign\";\nimport CustomModal from '../base/CustomModal';\nimport {FaCog, FaEye, FaEyeSlash, FaAngleDown} from 'react-icons/fa';\nimport { UserContext } from \"../Context/User\";\n\nfunction CreateTable({ dataConfig, data, idstages, configPopup, setConfigPopup, id }) {\n const { hasPermission, colorPalette } = useContext(UserContext);\n const [tableData, setTableData] = useState([]);\n const [headersTable, setHeadersTable] = useState([])\n //const [titleTable] = useState([dataConfig.title])\n const [showModal, setShowModal] = useState(false);\n const [hiddenRowsForm, setHiddenRowsForm] = useState([]);\n //const [hiddenRowsTable, setHiddenRowsTable] = useState([]);\n \n const [hiddenColsForm, setHiddenColsForm] = useState([]);\n \n const [hiddenCols, sethiddenCols] = useState(\n (dataConfig.hiddenCols && dataConfig.hiddenCols[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')])? \n dataConfig.hiddenCols[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')]\n :\n [] \n );\n \n const [hiddenRows, setHiddenRows] = useState(\n (dataConfig.hiddenRows && dataConfig.hiddenRows[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')])? \n dataConfig.hiddenRows[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')]\n :\n []\n );\n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n\n const handlePopup = (event, id, title) => {\n event.preventDefault();\n setConfigPopup({\n ...configPopup,\n id,\n title\n })\n }\n\n const handleHideRows=(row)=>{\n let _hiddenRowsForm= [...hiddenRowsForm];\n _hiddenRowsForm.push(row);\n setHiddenRowsForm(_hiddenRowsForm);\n }\n const handleShowRows=(row)=>{\n let _hiddenRowsForm= [...hiddenRowsForm];\n _hiddenRowsForm.splice(_hiddenRowsForm.indexOf(row),1);\n setHiddenRowsForm(_hiddenRowsForm);\n }\n\n const handleHideCols=(row)=>{\n let _hiddenColsForm= [...hiddenColsForm];\n _hiddenColsForm.push(row);\n setHiddenColsForm(_hiddenColsForm);\n }\n const handleShowCols=(row)=>{\n let _hiddenColsForm= [...hiddenColsForm];\n _hiddenColsForm.splice(_hiddenColsForm.indexOf(row),1);\n setHiddenColsForm(_hiddenColsForm);\n }\n\n const handleSaveRows = ()=>{\n\n if( dataConfig.hasOwnProperty('hiddenRows')) {\n dataConfig.hiddenRows[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')] = hiddenRowsForm;\n } else {\n dataConfig.hiddenRows = {\n [localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')]: hiddenRowsForm\n }\n }\n if( dataConfig.hasOwnProperty('hiddenCols')) {\n dataConfig.hiddenCols[localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')] = hiddenColsForm;\n } else {\n dataConfig.hiddenCols = {\n [localStorage.getItem('year')+'-'+localStorage.getItem('month')+'-'+localStorage.getItem('view')]: hiddenColsForm\n }\n }\n const data = {\n id,\n config: dataConfig\n };\n\n Utils.Petition.post(\n '/pages-modules/update', data\n );\n \n setHiddenRows(hiddenRowsForm);\n sethiddenCols(hiddenColsForm);\n setShowModal(false);\n }\n useEffect(() => {\n let htmlTr = [];\n let headers = [];\n //console.log(\"dataconfig-->\",dataConfig)\n //console.log(\"data--->\",data)\n //console.log(\"idstages---->\", idstages)\n if (dataConfig.reverse) {\n headers.push(dataConfig.title_column !== \"\" ? 0 ? {width:`${dataConfig.widthFirstCol}px`} : {width:''}}>{dataConfig.title_column} | : Escenarios | )\n\n headers.push(dataConfig.indicators.map((ind, index) => {\n let label = ind.name;\n if (ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\") {\n label = ind.labelIndicator;\n };\n let th;\n if (ind.popup) {\n th = handlePopup(e, ind.popUpSelected.id, ind.popUpSelected.name)}>{label} | \n };\n if (ind.url) {\n th = {label} | \n }\n if (!ind.popup && !ind.url) {\n th = {label} | \n }\n return th;\n }));\n\n idstages.map((idstage, index) => {\n let month = parseInt(localStorage.getItem('month')) + 1;\n let year = parseInt(localStorage.getItem('year'));\n if( dataConfig.stages[index].lastYear ) {\n year--;\n } \n if( dataConfig.stages[index].lastDec ) {\n year--;\n month = 12;\n }\n let info = '';\n let stage_label = dataConfig.stages[index].label;\n\n if (dataConfig.stages[index].hasOwnProperty('labelStage') && dataConfig.stages[index].labelStage.trim() !== \"\") stage_label = dataConfig.stages[index].labelStage;\n if( dataConfig.stages[index].spaceAbove ) {\n htmlTr.push(\n \n {\n dataConfig.stages[index].hasOwnProperty('labelSpaceAbove') && dataConfig.stages[index].labelSpaceAbove !== \"\" ? \n | {dataConfig.stages[index].labelSpaceAbove} | \n :\n | \n }\n {\n dataConfig.indicators.map( (indicator, indexI) => {\n return | \n })\n }\n
\n )\n };\n htmlTr.push(\n \n | {stage_label} | \n {\n dataConfig.indicators.map((indicator, indexI) => {\n if (dataConfig.stages[index].othersInd) {\n if( dataConfig.stages[index].lessInd ) {\n if( indexI + 1 >= parseInt(dataConfig.stages[index].posLessInd) && indexI + 1 < parseInt(dataConfig.stages[index].posLessInd) + parseInt(dataConfig.stages[index].amountLessInd)) {\n info = data.filter( aux => dataConfig.stages[index].newIndicators[indexI - parseInt(dataConfig.stages[index].posLessInd) + 1].id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\" ) { \n let real = data.filter( aux => dataConfig.stages[index].newIndicators[indexI - parseInt(dataConfig.stages[index].posLessInd) + 1].id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => dataConfig.stages[index].newIndicators[indexI - parseInt(dataConfig.stages[index].posLessInd) + 1].id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n } else {\n return | \n }\n } else {\n info = data.filter( aux => dataConfig.stages[index].newIndicators[indexI].id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\" ) { \n let real = data.filter( aux => dataConfig.stages[index].newIndicators[indexI].id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => dataConfig.stages[index].newIndicators[indexI].id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n } \n } else {\n info = data.filter(aux => indicator.id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\" ) { \n let real = data.filter( aux => indicator.id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => indicator.id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n }\n let value = 0;\n if(info.value!==null){\n if(indicator.percent || idstage.percent){\n value = Utils.formatNumber(format_percent, info.value)+'%';\n }else{\n value = Utils.formatNumber(format_number, info.value);\n }\n }\n /*\n if (info.value !== null) {\n let formato = Math.abs(info.value) < 100 ? ',.1f' : ',.0f';\n value = Utils.formatNumber(formato, info.value);\n }\n if (indicator.percent || idstage.percent) {\n value = info.value !== null ? Utils.formatNumber(',.1f', info.value) + \"%\" : 0.0 + '%';\n }\n //*/\n if (idstage.semaphore === true) {\n if( dataConfig.stages[index].othersInd ) {\n if(dataConfig.stages[index].lessInd ) {\n if( indexI + 1 >= parseInt(dataConfig.stages[index].posLessInd) && indexI + 1 < parseInt(dataConfig.stages[index].posLessInd) + parseInt(dataConfig.stages[index].amountLessInd)) {\n return {value} | \n }\n } else {\n return {value} | \n }\n } else {\n return {value} | \n } \n } else {\n return {value} | \n }\n })\n }\n
\n );\n if( dataConfig.stages[index].spaceBelow ) {\n htmlTr.push(\n \n {\n dataConfig.stages[index].hasOwnProperty('labelSpaceBelow') && dataConfig.stages[index].labelSpaceBelow !== \"\" ? \n | {dataConfig.stages[index].labelSpaceBelow} | \n :\n | \n }\n {\n dataConfig.indicators.map( (indicator, indexI) => {\n return | \n })\n }\n
\n )\n };\n })\n\n\n } else {\n\n headers.push(dataConfig.title_column !== \"\" ? 0 ? {width:`${dataConfig.widthFirstCol}px`} : {width:''}}>{dataConfig.title_column} | : Indicadores | )\n\n headers.push(dataConfig.stages.map((stage, index) => {\n\n if (stage.hasOwnProperty('labelStage') && stage.labelStage.trim() !== \"\") {\n return {stage.labelStage} | ;\n } else {\n return {stage.label} | ;\n }\n }));\n\n dataConfig.indicators.map((indicator, index) => {\n let info = '';\n let ind_label = indicator.name;\n if (indicator.hasOwnProperty('labelIndicator') && indicator.labelIndicator.trim() !== \"\") ind_label = indicator.labelIndicator;\n if( indicator.spaceAbove ) {\n \n htmlTr.push(\n \n {\n indicator.hasOwnProperty('labelSpaceAbove') && indicator.labelSpaceAbove !== \"\" ? \n | {indicator.labelSpaceAbove} | \n :\n | \n }\n {\n idstages.map( (idstage, indexS) => { \n return | \n })\n }\n
\n )\n };\n \n htmlTr.push(\n \n {\n indicator.url &&\n | {ind_label} | \n }\n {\n indicator.popup &&\n handlePopup(e, indicator.popUpSelected.id, indicator.popUpSelected.name)}>{ind_label} | \n }\n {\n !indicator.popup && !indicator.url &&\n {ind_label} | \n }\n {\n idstages.map((idstage, indexS) => {\n let month = parseInt(localStorage.getItem('month')) + 1;\n let year = parseInt(localStorage.getItem('year'));\n if( dataConfig.stages[indexS].lastYear ) {\n year--;\n } \n if( dataConfig.stages[indexS].lastDec ) {\n year--;\n month = 12;\n }\n if (dataConfig.stages[indexS].othersInd) {\n if( dataConfig.stages[indexS].lessInd ) {\n if( index + 1 >= parseInt(dataConfig.stages[indexS].posLessInd) && index + 1 < parseInt(dataConfig.stages[indexS].posLessInd) + parseInt(dataConfig.stages[indexS].amountLessInd)) {\n info = data.filter( aux => dataConfig.stages[indexS].newIndicators[index - parseInt(dataConfig.stages[indexS].posLessInd) + 1].id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\" ) { \n let real = data.filter( aux => dataConfig.stages[indexS].newIndicators[index - parseInt(dataConfig.stages[indexS].posLessInd) + 1].id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => dataConfig.stages[indexS].newIndicators[index - parseInt(dataConfig.stages[indexS].posLessInd) + 1].id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n } else {\n return | \n }\n } else {\n info = data.filter( aux => dataConfig.stages[indexS].newIndicators[index].id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\") {\n let real = data.filter( aux => dataConfig.stages[indexS].newIndicators[index].id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => dataConfig.stages[indexS].newIndicators[index].id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n }\n } else {\n info = data.filter(aux => indicator.id === aux.indicator && idstage.id === aux.stage && aux.year === year && aux.month === month)[0];\n if(idstage.compliance && indicator.unit !== \"%\") {\n let real = data.filter( aux => indicator.id === aux.indicator && parseInt(idstage.compliance_stages[0]) === aux.stage && aux.year === year && aux.month === month)[0];\n let ppto = data.filter( aux => indicator.id === aux.indicator && parseInt(idstage.compliance_stages[1]) === aux.stage && aux.year === year && aux.month === month)[0];\n if( real.value !== null && ppto.value !== null) {\n ppto.value = ppto.value === 0 ? 1 : ppto.value;\n let variacion = Math.abs((parseFloat(real.value)-parseFloat(ppto.value))/parseFloat(ppto.value));\n info.value = parseFloat(real.value) > parseFloat(ppto.value) ? (1 + variacion) * 100 : (1 - variacion) * 100;\n } \n }\n }\n let value = 0;\n if(info.value!==null){\n if(indicator.percent || idstage.percent){\n value = Utils.formatNumber(format_percent, info.value)+'%';\n }else{\n value = Utils.formatNumber(format_number, info.value);\n }\n }\n /*\n if (info.value !== null) {\n let formato = Math.abs(info.value) < 100 ? ',.1f' : ',.0f';\n value = Utils.formatNumber(formato, info.value);\n }\n if (indicator.percent || idstage.percent) {\n value = info.value !== null ? Utils.formatNumber(',.1f', info.value) + \"%\" : 0.0 + '%';\n }\n //*/\n\n \n if (idstage.semaphore === true) {\n if( dataConfig.stages[indexS].othersInd ) {\n if( dataConfig.stages[indexS].lessInd ) {\n if( index + 1 >= parseInt(dataConfig.stages[indexS].posLessInd) && index + 1 < parseInt(dataConfig.stages[indexS].posLessInd) + parseInt(dataConfig.stages[indexS].amountLessInd)) {\n return {value} | \n }\n } else {\n return {value} | \n }\n } else { \n return {value} | \n }\n } else {\n return {value} | \n }\n\n })\n }\n
\n )\n if( indicator.spaceBelow ) {\n \n htmlTr.push(\n \n {\n indicator.hasOwnProperty('labelSpaceBelow') && indicator.labelSpaceBelow !== \"\" ? \n | {indicator.labelSpaceBelow} | \n :\n | \n }\n {\n idstages.map( (idstage, indexS) => { \n return | \n })\n }\n
\n );\n };\n });\n\n }\n setHeadersTable(headers)\n setTableData(htmlTr)\n\n\n }, [hiddenRows,hiddenCols]);\n\n return (\n \n
\n {\n hasPermission.edit &&\n \n \n \n \n \n\n \n {setShowModal(true); setHiddenRowsForm(hiddenRows); setHiddenColsForm(hiddenCols) }}>Configurar \n \n \n \n \n }\n \n \n \n {headersTable}\n
\n \n \n {tableData}\n \n
\n \n
\n \n \n \n | Fila | \n Acción | \n
\n \n \n { dataConfig.reverse === false ?\n dataConfig.indicators.map((ind, index)=>{\n return (\n \n | {(ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\") ? ind.labelIndicator : ind.name} | \n \n {\n hiddenRowsForm.includes(index)?\n \n handleShowRows(index)}>Mostrar \n :\n \n handleHideRows(index)}>Ocultar \n \n }\n | \n
\n )\n })\n :\n dataConfig.stages.map((stage,idx) => {\n return(\n \n | {(stage.hasOwnProperty('labelStage') && stage.labelStage.trim() !== \"\") ? stage.labelStage : stage.label} | \n \n {\n hiddenRowsForm.includes(idx)?\n \n handleShowRows(idx)}>Mostrar \n :\n \n handleHideRows(idx)}>Ocultar \n \n }\n | \n
\n )\n })\n }\n \n
\n \n \n \n | Columna | \n Acción | \n
\n \n \n { dataConfig.reverse === false ?\n dataConfig.stages.map((stage,idx) => {\n return(\n \n | {(stage.hasOwnProperty('labelStage') && stage.labelStage.trim() !== \"\") ? stage.labelStage : stage.label} | \n \n {\n hiddenColsForm.includes(idx)?\n \n handleShowCols(idx)}>Mostrar \n :\n \n handleHideCols(idx)}>Ocultar \n \n }\n | \n
\n )\n })\n :\n dataConfig.indicators.map((ind, index)=>{\n return (\n \n | {(ind.hasOwnProperty('labelIndicator') && ind.labelIndicator.trim() !== \"\") ? ind.labelIndicator : ind.name} | \n \n {\n hiddenColsForm.includes(index)?\n \n handleShowCols(index)}>Mostrar \n :\n \n handleHideCols(index)}>Ocultar \n \n }\n | \n
\n )\n })\n }\n \n
\n \n
\n
{config.headerTemplate}
\n
{config.descriptionTemplate}
\n
\n \n\n \n \n {config.headerTemplate}
\n {config.descriptionTemplate}
\n\n \n {config.newTabTemplate ? (\n \n {config.linkDescription}\n \n ) : (\n {config.linkDescription}\n )}\n ![\"arrow\"](\"/assets/Icon-flecha-izquierda.svg\")
\n \n\n \n
\n \n \n );\n }\n\n if (config.typeTemplate === 3) {\n template = (\n <>\n \n \n
\n \n
{config.headerTemplate}
\n
{config.descriptionTemplate}
\n
\n {config.newTabTemplate ? (\n \n {config.linkDescription}\n \n ) : (\n {config.linkDescription}\n\n )}\n \n \n
\n \n \n \n {config.headerTemplate}
\n {config.descriptionTemplate}
\n\n \n \n
\n\n \n \n );\n }\n\n return template;\n}\n\nexport default Plantillas;\n","import React, { useState } from \"react\";\nimport Plantillas from \"./functions/Plantillas\";\nimport { Link } from \"react-router-dom\";\n\nfunction View({ page, module }) {\n let [data, setData] = useState(module.config.data);\n\n if (data) {\n return (\n \n );\n } else {\n return (\n \n Sin ningún contenido\n
\n );\n }\n}\nexport default View;\n\n/*\n\n<>\n \n
{data.headerTemplate}
\n
{data.descriptionTemplate}
\n
\n
\n {data.linkDescription}\n
\n
\n \n \n {\n module.config.data !==undefined \n ?\n module.config.data.map(e=>{\n return e.newTab?( )// newTab, title, type, url\n : ( )\n })\n : Visualización del menú: aún no se ha configurado\n } \n
\n {(module.idpopup !== null || validateShowComponent(everypages, filter)) && setShowModal(true)} />}\n \n { showModal && \n \n \n \n }\n
\n );\n}\n\nexport default Edit;","import styled from 'styled-components';\nimport { Theme1 } from '../../themes/Theme1';\n\nexport const DivMenu = styled.div`\n &.tmenu-tab li::after {\n content: '';\n height: calc(100% - 20px); //You can change this if you want smaller/bigger borders\n width: 1px;\n\n position: absolute;\n right: -2px;\n top: 10px; // If you want to set a smaller height and center it, change this value\n\n background-color: ${Theme1.grayLight}; // The color of your border\n }\n &.tmenu-tab li.active {\n background-color: white;\n box-shadow: 0px -10px 20px 1px rgb(0 0 0 / 15%);\n z-index: 2;\n border-radius: 0.8rem 0.8rem 0 0;\n border: none;\n font-size: 1.2rem;\n font-weight: bold;\n \n &::after {\n content: '';\n width: 0px;\n }\n }\n\n\n \n &.tmenu-tab a {\n color: ${Theme1.grayText};\n text-decoration: none;\n \n }\n &.menu-type-horizontal.tmenu-undefined {\n margin-top: -3rem;\n font-size: 0.9rem;\n margin-bottom: 1rem;\n }\n\n &.tmenu-btn{\n ul{\n padding-left: 0px;\n }\n li{\n button{\n font-size: 12px;\n background-color: ${props => props.colors?.primary};\n border-color: ${props => props.colors?.primary};\n &:hover {\n background-color: transparent;\n color: ${props => props.colors?.primary};\n } \n }\n a{\n font-size: 12px;\n background-color: ${props => props.colors?.primary};\n border-color: ${props => props.colors?.primary} ;\n &:hover{\n color: ${props => props.colors?.primary};\n background-color: transparent ;\n }\n }\n &:first-child{\n padding-left: 0px !important;\n }\n }\n li.active{\n \n button{\n color: ${props => props.colors?.primary};\n background-color: transparent;\n }\n a{\n color: ${props => props.colors?.primary} ;\n background-color: transparent ;\n }\n }\n }\n`;\n\nexport const StyledMenu = styled.ul`\n\n display: flex;\n text-decoration: none;\n list-style:none;\n margin: 0;\n\n & li {\n padding: 0.8rem 1.2rem;\n position: relative;\n \n }\n\n & img {\n filter: sepia(100%) hue-rotate(190deg) saturate(500%);\n }\n`;\n\n","\nimport { Link } from \"react-router-dom\";\nimport { StyledMenu, DivMenu } from \"./styles\";\nimport { useLocation } from \"react-router-dom\";\nimport React, { useContext } from 'react';\nimport { Button } from \"../../commonStyles\";\nimport { UserContext } from \"../../Context/User\";\n\n\nfunction View({ page, module }) {\n const { colorPalette } = useContext(UserContext);\n let location = useLocation();\n\n\n return (\n \n \n {Object.keys(module.config).length>0 && module.config.data.map((e,i) => {\n if (e.type === 'externo') {\n return \n {module.config.tMenu !== 'btn'\n ? {e.title} ![\"export\"](\"/assets/Icon-compartir.svg\")
\n : \n }\n \n }\n return (\n \n {module.config.tMenu !== 'btn'? \n \n {e.title}\n \n : \n \n \n }\n \n )\n })}\n \n \n );\n}\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst Menu = {\n Edit, View\n}\nexport default Menu;","import { useContext, useEffect, useState } from 'react';\nimport CustomModal from '../../base/CustomModal';\nimport {ADMIN_URL} from '../../config';\nimport { UserContext } from '../../Context/User';\nimport Utils from '../../utils';\nimport { ButtonConfig } from '../Components/ButtonConfig';\n\nfunction Edit({globalParams, page, module, everypages, filter}){\n const { validateShowComponent } = useContext(UserContext);\n const [showModal, setShowModal] = useState(false);\n useEffect(()=>{\n window.addEventListener('message', (event)=>{\n if(event.origin===ADMIN_URL && event.data==='cerrar popup'){\n setShowModal(false);\n }\n })\n }, []);\n \n const handlePopup = (event)=>{\n event.preventDefault();\n setShowModal(true);\n \n }\n\n return (\n \n {(module.idpopup !== null || validateShowComponent(everypages, filter)) &&}\n \n { showModal && \n \n \n \n }\n
\n );\n}\nexport default Edit;","import React, { useState, useEffect, useContext } from \"react\";\nimport { Table } from 'react-bootstrap';\nimport { UserContext } from \"../Context/User\";\nimport Utils from \"../utils\";\nimport Sign from \"./Sign\";\nimport { TableWrapper } from \"./styles\";\n\nfunction CreateTableCostumer({dataConfig, data}) {\n \n const { colorPalette } = useContext(UserContext);\n const year = parseInt(useState(localStorage.getItem('year')));\n const [tableData, setTableData] = useState([]);\n const [headersTable, setHeadersTable] = useState([]);\n \n const format_number = Utils.getConfigPortal('format_number');\n const format_percent = Utils.getConfigPortal('format_percent');\n\n useEffect(() => {\n const real = dataConfig.stages.filter( stage => stage.code === \"R\")[0];\n const variacion = dataConfig.stages.filter( stage => stage.code === \"VR\")[0];\n const data_now = (data.filter( d => d.year === year && d.stage === real.idstage)).sort( (a, b) => parseFloat(b.value) - parseFloat(a.value));\n const data_pre = (data.filter( d => d.year === (year-1) && d.stage === real.idstage)).sort((a, b) => parseFloat(b.value) - parseFloat(a.value));\n let htmlTr = [];\n let htmlHeaders = []; \n\n htmlHeaders.push(\n \n | Ranking | \n | \n | \n Ventas | \n Variación | \n
\n )\n htmlHeaders.push(\n \n | Actual | \n {dataConfig.hideLastYear ? \"\" : A.Ant | }\n Cliente | \n Canal | \n Actual | \n A.Ant | \n % | \n $ | \n
\n )\n data_now.map ( (dataN, index) => {\n if( index <= 19) {\n let pos_pre = 0;\n let indicator = dataConfig.indicators.filter( ind => ind.id === dataN.indicator)[0];\n const name_customer = indicator.hasOwnProperty('labelIndicator') && indicator.labelIndicator !== undefined && indicator.labelIndicator.trim() !== \"\" ? indicator.labelIndicator : indicator.name;\n const name_Canal = indicator.hasOwnProperty('labelCanal') && indicator.labelCanal !== undefined && indicator.labelCanal.trim() !== \"\" ? indicator.labelCanal : 'N/A';\n let data_var = data.filter( d => d.indicator === dataN.indicator && d.stage === variacion.idstage)[0];\n\n const ind_data_pre = data_pre.filter( (d, i) => {\n if (d.indicator === dataN.indicator) {\n pos_pre = i + 1;\n return d;\n }\n })[0];\n let dif = dataN.value - ind_data_pre.value;\n htmlTr.push(\n \n | {index + 1 } | \n {dataConfig.hideLastYear ? \"\" : {pos_pre > 20 ? '-' : pos_pre} | }\n {name_customer} | \n {name_Canal} | \n {Utils.formatNumber(format_number, dataN.value)} | \n {Utils.formatNumber(format_number, ind_data_pre.value)} | \n {Utils.formatNumber(format_number, data_var.value)} | \n {Utils.formatNumber(format_number, dif)} | \n
\n )\n }\n });\n\n setTableData(htmlTr);\n setHeadersTable(htmlHeaders)\n\n }, [])\n\n return (\n \n
\n \n \n {headersTable}\n \n \n {tableData}\n \n
\n \n \n
{module.config.title}
\n {\n flag && data.length > 0 && \n }\n \n )\n};\n\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst TableCostumer = {\n Edit, View\n}\nexport default TableCostumer;","function View({page, module}){\n return (Admin report
);\n}\nexport default View;","import Edit from './Edit';\nimport View from './View';\nconst AdminReport = {\n Edit, View\n}\nexport default AdminReport;","function Edit({page, module}){\n return (Editar admin report
);\n}\nexport default Edit;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('app')\n);\n\n","export const API_URL = 'https://api.conectandonosconlaestrategia.com/api/v1'; \nexport const TOKEN_PREFIX = \"Bearer \";\nexport const VERSION_SESSION = \"4\";\nexport const ADMIN_URL = \"https://admin.conectandonosconlaestrategia.com\";\nexport const CENTRIFY_LOGIN = 'https://aaj0709.my.idaptive.app/applogin/appKey/9075809d-527b-41b1-9379-a04175ae802d/customerId/AAJ0709';\nexport const CENTRIFY_LOGOUT = 'https://aaj0709.my.idaptive.app/applogout/appkey/9075809d-527b-41b1-9379-a04175ae802d/customerid/AAJ0709';\nexport const API_MEDIA_URL = \"https://api.conectandonosconlaestrategia.com/uploads/images/\"\nexport const OLD_SITE = \"https://conectandonos.negociocarnico.com/indicadores\"\n","import {useContext} from \"react\";\nimport { Modal } from \"react-bootstrap\";\nimport { Button } from \"../commonStyles\";\nimport { ModalWrapper } from \"./styles\";\nimport { UserContext } from '../Context/User';\n\nfunction CustomModal(props) {\n const { colorPalette } = useContext(UserContext);\n\n const handleClose = () => {\n props.setShow(false)\n if (props.handleClose) {\n props.handleClose()\n }\n };\n\n return (\n \n \n \n {props.title}\n \n \n {props.children}\n \n\n {!props.hideFooter && \n \n {\n props.handleSaveButton &&\n \n }\n \n }\n \n \n\n );\n}\nexport default CustomModal;","import styled from \"styled-components\";\nimport { Theme1 } from \"./../themes/Theme1\";\n\nexport const TableWrapper = styled.div`\n width: 100%;\n position: relative;\n margin-top: 0px;\n margin-bottom: 30px;\n .config-buton{\n position: absolute;\n z-index: 2;\n top: 22px;\n right: 0;\n display: none;\n button, button:hover{\n background-color: white !important;\n color: ${props => props.colors?.primary} !important;\n }\n }\n &:hover{\n .config-buton{\n display: block;\n } \n }\n table{\n border-top-left-radius: ${Theme1.radius};\n border-top-right-radius: ${Theme1.radius};\n overflow: hidden; \n thead{\n background-color: ${props => props.colors?.primary};\n color: white;\n font-size: 14px;\n th{\n &:not(:first-child){\n text-align: center !important;\n }\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n }\n a{\n color: white;\n text-decoration: underline;\n font-weight: bold;\n }\n }\n tbody{\n font-size: 14px;\n tr{\n background-color: #f2f2f2;\n &.tr-empty{\n th{\n height: 20px;\n }\n \n }\n th{\n font-weight: normal;\n font-size: 16px;\n padding: 0.3rem 0.5rem;\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n a{\n color: ${props => props.colors?.grayText} !important;\n text-decoration: underline;\n &.text-success{\n color: ${props => props.colors?.grayText} !important; \n }\n &:hover{\n text-decoration: underline;\n }\n }\n }\n td{\n font-size: 16px;\n padding: 0.3rem 0.5rem;\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n a{\n color: ${props => props.colors?.grayText} !important;\n text-decoration: underline;\n &.text-success{\n color: ${props => props.colors?.grayText} !important; \n }\n }\n }\n &.table-secondary{\n th{\n font-weight: bold;\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n }\n td{\n font-weight: bold;\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n }\n }\n &.tr-empty th{\n font-weight: bold;\n }\n }\n }\n &.table-sec{\n td, th{\n padding: .3rem;\n }\n thead{\n background-color: #f2f2f2;\n color: ${props => props.colors?.grayText};\n font-weight: 300;\n th{\n font-weight: bold;\n &.text-center{\n text-align: center !important;\n }\n &.text-left{\n text-align: left !important;\n }\n }\n a{\n color:${props => props.colors?.grayText} !important;\n text-decoration: underline;\n font-weight: bold;\n &:hover{\n color: ${props => props.colors?.primary};\n }\n }\n }\n }\n }\n \n \n`;\nexport const ConfigTable = styled.div`\n float: ${props => props.align || 'right'};\n margin-bottom: 5px;\n margin-top: -20px ;\n span{\n font-size: 10px;\n color:${props => props.colors?.primary};\n border: thin solid ${props => props.colors?.primary};\n padding: 5px 10px;\n border-radius: 4px;\n cursor: pointer;\n &:hover{\n color: white;\n background-color: ${props => props.colors?.primary};\n }\n\n }\n .dropdown{\n text-align: right !important;\n }\n button{\n font-size: 10px;\n color:${props => props.colors?.primary} !important;\n border: thin solid ${props => props.colors?.primary} !important;\n padding: 5px 10px;\n border-radius: 4px;\n background-color: transparent;\n cursor: pointer;\n &:after{\n display: none;\n }\n &:hover, &:active, &:focus{\n color: white !important;\n background-color: ${props => props.colors?.primary} !important;\n }\n }\n .dropdown-menu{\n font-size: 10px;\n }\n`;\nexport const ConfigTable2 = styled.div`\n float: ${props => props.align || 'right'};\n margin-bottom: 5px;\n margin-top:0 ;\n span{\n font-size: 10px;\n color:${props => props.colors?.primary};\n border: thin solid ${props => props.colors?.primary};\n padding: 5px 10px;\n border-radius: 4px;\n cursor: pointer;\n &:hover{\n color: white;\n background-color: ${props => props.colors?.primary};\n }\n\n }\n .dropdown{\n text-align: right !important;\n }\n button{\n font-size: 10px;\n color:${props => props.colors?.primary} !important;\n border: thin solid ${props => props.colors?.primary} !important;\n padding: 5px 10px;\n border-radius: 4px;\n background-color: transparent;\n cursor: pointer;\n &:after{\n display: none;\n }\n &:hover, &:active, &:focus{\n color: white !important;\n background-color: ${props => props.colors?.primary} !important;\n }\n }\n .dropdown-menu{\n font-size: 10px;\n }\n`;\n//indicators\n\nexport const IndicatorHeadWrapper = styled.div`\n width: 100%;\n`;\n\nexport const IndicatorConvensiones = styled.div`\n display: table;\n margin: 0 0 0 auto;\n &.B-option{\n margin: 0 auto 0 0;\n }\n &>div{\n vertical-align: middle;\n font-size: 12px;\n &:first-child{\n font-weight: bold;\n }\n span, i{\n display: inline-block;\n vertical-align: middle; \n }\n }\n`;\n\nexport const IndicatorConvensionesTwo = styled.div`\n display: table;\n margin: 10px 0 10px auto;\n &.B-option{\n margin: 0 auto 0 0;\n }\n &>div{\n vertical-align: middle;\n font-size: 12px;\n &:first-child{\n font-weight: bold;\n }\n span, i{\n display: inline-block;\n vertical-align: middle; \n }\n }\n`;\n\nexport const IndicatorHeadContain = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n \n`;\nexport const IndicatorHeadContainer = styled.div`\n width: ${props => props.Wd || '50%'};\n padding: 10px;\n &>div{\n padding: 10px;\n border-radius: ${Theme1.radius};\n border: ${Theme1.borderTwo};\n }\n\n & ul p:hover, & p:hover {\n cursor: pointer;\n text-decoration: underline;\n }\n table{\n thead{\n th{\n text-align: center;\n &.activo{ \n background-color: #f2f2f2;\n color: ${props => props.colors?.grayText};\n }\n }\n }\n tbody{\n td{\n &.activo{\n background-color: #f2f2f2;\n color: ${props => props.colors?.grayText};\n }\n }\n }\n }\n`;\n\n\nexport const IndicatorHeadLabel = styled.div`\n width: 100%;\n font-size: 14px;\n font-weight: bold;\n position: relative;\n padding-bottom: 10px;\n text-align: center;\n &::after{\n content: \"\";\n width: 50px;\n height: 1px;\n background-color: ${props => props.colors?.primary};\n position: absolute;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n }\n`;\n","import styled from \"styled-components\";\n\n\nexport const ButtonWrapper = styled.div`\n width: 100%;\n display:flex;\n justify-content: flex-end;\n \n`; ","\nimport { useContext } from \"react\";\nimport { FaCog } from \"react-icons/fa\";\nimport { Button } from \"../../../commonStyles\";\nimport { UserContext } from \"../../../Context/User\";\nimport { ButtonWrapper } from \"./styles\";\n\nexport const ButtonConfig = ({onPress}) =>{\n const { colorPalette } = useContext(UserContext);\n return (\n <>\n \n \n \n \n \n )\n}","import Circle from './Circle';\nfunction Sign({value, type, base, isDescendingIndicator = false}){\n if(base===undefined) base= 100;\n return(\n value===null\n ? \n :(\n (value == base)\n ? \n :( (!isDescendingIndicator) ? (\n (value > base) \n ?\n :) : (\n (type === 'C')\n ?(\n (value > base) \n ?\n :\n )\n :(\n (value < base) \n ?\n :\n )\n )\n )\n )\n\n )\n}\nexport default Sign;","import { FaChevronDown, FaChevronUp, FaGripLines } from \"react-icons/fa\";\n\nfunction Circle (props) {\n const styles = {\n width: props.inside ? '40px' : \"12px\", \n height: props.inside ? '40px' : \"12px\", \n borderRadius: \"50%\", \n border: \"1px solid #ccc\", \n color:\"white\", \n display: \"inline-flex\",\n paddingLeft:'4px',\n paddingRight:'4px',\n background: props.color,\n alignItems:'center',\n marginRight: \"4px\",\n justifyContent: 'center',\n };\n return(\n \n {\n props.inside!==undefined &&\n (\n props.inside==='igual'\n ? \n : props.inside==='up'\n ? \n : \n )\n }\n \n )\n}\n\nexport default Circle;\n","export const styleTheme = (theme, primary = \"#000000\") => {\n return {\n ...theme,\n borderRadius: 6,\n colors: {\n ...theme.colors,\n primary25: `${primary}30`,\n primary: primary,\n },\n }\n}","import { ADMIN_URL } from '../config';\nimport Petition from './Petition';\nimport Security from './Security';\n\nconst Utils = {\n Petition,\n Security,\n getAdminUrl:(url)=>{\n\n return (`${ADMIN_URL+url}`);\n },\n adminAutologinData:(url,encoded)=>{\n let data = JSON.stringify({ ...localStorage });\n return (`${ADMIN_URL}/autologin/data/${encodeURIComponent(data)}/url/${encoded?url:encodeURIComponent(url)}`);\n },\n adminAutologin: (token, iframe)=>{\n if(!iframe) iframe='false';\n return (`${ADMIN_URL}/autologin/token/${token}/year/${localStorage.getItem('year')}/month/${localStorage.getItem('month')}/view/${localStorage.getItem('view')}/site/${localStorage.getItem('site')}/iframe/${iframe}`);\n },\n\n getConfigPortal: (property) => {\n const config = JSON.parse(localStorage.getItem('config'));\n if(config !== null) return config[property];\n return null;\n },\n formatNumber:(format, number)=>{\n if(format){\n try{\n let _format =format.split('');\n let _number = number.toString().split('.');\n\n /*\n POSIBLES formatos\n\n 1 caracter, Ejemplo ','\n Separador decimal ','\n 2 caracteres Ejemplo ',.' \n Separador de miles ',' \n Separador de decimales '.'\n 4 caracteres Ejemplo ',.2f' \n Separador de miles ',' \n Separador de decimales '.', \n Mostrar 2 decimales siempre\n 6 caracteres Ejemplo ',.2f4d' \n Separador de miles ','\n Separador de decimales '.', \n Mostrar 2 decimales mientras el número sea igual o menor de 4 digitos \n En caso de 5 digitos mostrará un decimal \n En caso de que sea de 6 digitos no mostrará ninguno\n //*/\n\n switch(_format.length){\n case 1: return _number.join(_format[0]);\n case 2: \n _number[0] = _number[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, _format[0]);\n return _number.join(_format[1]);\n case 4: \n _number = parseFloat(number).toFixed(format[2]).split('.');\n _number[0] = _number[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, _format[0]);\n if(_format[2]>0){\n return _number.join(_format[1]);\n }else{\n return _number[0];\n }\n default:\n // Por defecto, 6 digitos\n let _f = parseInt(_format[4]) + parseInt(_format[2]) - _number[0].length;\n\n if(_format[2] > 0 && _f > 0){\n if(_f<_format[2]) _format[2]= _f;\n \n }else{\n _format[2] = 0;\n }\n _number = parseFloat(number).toFixed(_format[2]).split('.');\n _number[0] = _number[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, _format[0]);\n return _number.join(_format[1]);\n }\n }catch(_){}\n return number;\n \n }\n },\n removeOptions: (selectElement)=>{\n let i, L = selectElement.options.length - 1;\n for(i = L; i >= 0; i--) {\n selectElement.remove(i);\n }\n }\n}\nexport default Utils;","import axios from 'axios';\nimport {API_URL} from '../config';\nimport { counter } from '../App';\n\n const Petition = {\n publicGet: (url, callback, fallback, _finally)=> {\n axios.get(\n API_URL+url,\n {responseType: 'json'}\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n\n },\n publicGetExternal: (url, callback, fallback, _finally)=> {\n axios.get(\n url\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n },\n publicPost: (url, data, callback, fallback, _finally)=> {\n axios.post(\n API_URL+url,\n data,\n {responseType: 'json'}\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n },\n get: (url, callback, fallback, _finally)=> {\n let timeInitial = performance.now();\n counter.number++;\n axios.get(\n API_URL+url,\n {\n responseType: 'json',\n headers: {\n Authorization: 'Bearer '+localStorage.getItem('token_user')\n }\n }\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{ \n //Add more code all fallbacks\n if(fallback) fallback(err);\n })\n .finally(()=>{\n let timeEnd = performance.now();\n counter.startTime.push(timeInitial);\n counter.endTime.push(timeEnd);\n if(_finally) _finally();\n });\n },\n delete: (url, callback, fallback, _finally)=> {\n axios.delete(\n API_URL+url,\n {\n responseType: 'json',\n headers: {\n Authorization: 'Bearer '+ localStorage.getItem('token_user')\n }\n \n }\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n },\n post: (url, data, callback, fallback, _finally)=> {\n axios.post(\n API_URL+url,\n data,\n {\n responseType: 'json',\n headers: {\n Authorization: 'Bearer '+localStorage.getItem('token_user')\n }\n }\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n },\n postFile:(url,data,callback, fallback, _finally) => {\n let _data = new FormData();\n for(let i in data){\n _data.append(i, data[i]);\n }\n \n\n axios.post(\n API_URL+url,\n _data,\n {\n responseType: 'json',\n headers: {\n 'Content-Type': 'multipart/form-data;',\n 'Authorization': 'Bearer '+localStorage.getItem('token_user')\n }\n \n }\n )\n .then((result)=>{\n callback(result.data);\n })\n .catch((err)=>{\n \n //Add more code all fallbacks\n\n if(fallback) fallback(err);\n })\n .finally(()=>{\n if(_finally) _finally();\n });\n }\n\n}\nexport default Petition;","import Utils from \".\";\nimport { VERSION_SESSION } from \"../config\";\nimport Petition from \"./Petition\";\n\nconst Security = {\n checkRoleGroup:(rol)=>{\n return true;\n },\n //type = SSO, Login, AppValidate\n setStartLocalStorage: function(response, type, callback){\n if(type!=='AppValidate'){\n localStorage.setItem('version', VERSION_SESSION);\n }\n if(!localStorage.getItem('idfilter')){\n localStorage.setItem('idfilter', response.data.idfilter);\n localStorage.setItem('filter', response.data.filter);\n }\n localStorage.setItem('user_ocupation', JSON.stringify({department: response.data.user.department?.name,position:response.data.user.position?.name}));\n localStorage.setItem('token_user', response.data.token);\n localStorage.setItem('iduser', response.data.user.id)\n localStorage.setItem('idportal', response.data.idportal);\n localStorage.setItem('portal', response.data.portal);\n localStorage.setItem('business', response.data.business);\n localStorage.setItem('client', response.data.client);\n localStorage.setItem('config', JSON.stringify(response.data.config));\n localStorage.setItem('content_permissions', JSON.stringify(response.data.permissionsContent));\n localStorage.setItem('admin_permissions', JSON.stringify(response.data.permissionsAdmin));\n localStorage.setItem('idrolAdmin', response.data.idrol_admin);\n localStorage.setItem('idrolContent', response.data.idrol_content);\n localStorage.setItem('rolAdmin', response.data.rol_admin);\n localStorage.setItem('rolContent', response.data.rol_content);\n Utils.Petition.get('/portals-filter', (response) => {\n let _filter = [];\n for (let i = 0; i < response.data.length; i++) {\n if(response.data[i].default==='1') localStorage.setItem('defaultFilter', response.data[i].filter.id);\n _filter.push({ value: response.data[i].filter.id, description: response.data[i].filter.name })\n }\n localStorage.setItem('filters', JSON.stringify(_filter));\n callback();\n });\n }\n}\n\nexport default Security;","import styled from 'styled-components';\n\nexport const StyleLoading = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n height: ${(props => props.height ? props.height : '100px')};\n & > div {\n margin-right: 1rem;\n }\n`;","import { Spinner } from \"react-bootstrap\"\nimport { StyleLoading } from \"./style\"\n\n\nexport const Loading = ({ height, text = \"Cargando....\", fontSize=\"2rem\" }) => {\n return (\n \n {text}
\n \n )\n}","import styled from \"styled-components\";\nimport { Theme1 } from \"./../../themes/Theme1\";\n\nexport const GraphicCustomWrapper = styled.div`\n width: 100%;\n padding: 0 10px;\n margin-bottom: 30px;\n`;\nexport const GraphicCustomWrapperContent = styled.div`\n display: block;\n width: 100%;\n`;\nexport const GraphicCustomContainer = styled.div`\n width: 100%;\n background-color: white;\n border-radius: ${Theme1.radius};\n h3{\n font-size: 18px;\n margin-bottom: 0 !important;\n }\n`;\n","import styled from \"styled-components\";\nimport { Theme1 } from \"../themes/Theme1\";\n\nexport const ButonLink = styled.p`\n color : ${Theme1.orange};\n margin-top: -10px;\n a{\n color : ${Theme1.orange}; \n font-size: 14px;\n text-decoration: underline\n }\n`;\n\nexport const BgContainer = styled.div`\n background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)),\n url(${props => props.imgLogin});\n height: 100vh;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n`;\n\nexport const OptionsContainer = styled.div`\n position: absolute;\n width: 32rem;\n height: 32rem;\n top: 8rem;\n right: 8rem;\n background-color: #FFFFFF;\n border-radius: 1rem;\n text-align: center;\n z-index: 2;\n`;\n\nexport const IntroContainer = styled.div`\n position: absolute;\n width: 35rem;\n bottom: 8rem;\n left: 8rem;\n border-radius: 1rem;\n color: #FFF;\n`;\n\nexport const CtaContainer = styled.div`\n& h2 {\n margin: 8rem 0 2rem;\n}\n& button {\n margin: 2rem 0;\n padding: 1rem 3rem;\n border-radius: 0.5rem;\n}\n& hr {\n width: 80%;\n}\n`;\n\nexport const PrimaryBtn = styled.button`\n background-color: #EF8220;\n color: #FFFFFF;\n border: thin solid #EF8220;\n :hover {\n background-color: #FFFFFF;\n border: thin solid #EF8220;\n color: #EF8220;\n }\n`;\n\nexport const SecondaryBtn = styled.button`\n background-color: #FFFFFF;\n border: none;\n color: #EF8220;\n :hover {\n opacity: 0.8;\n }\n`;\n\nexport const TertiaryBtn = styled.button`\n background-color: #FFFFFF;\n color: gray;\n :hover {\n opacity: 0.8;\n }\n`;\n\nexport const LoginContainer = styled.div`\n& h3 {\n margin: 4rem 0 2rem;\n}\n& form {\n display: flex;\n flex-direction: column;\n width: 75%;\n margin: auto;\n gap: 1rem;\n}\n& input {\n padding: 1rem;\n border: thin solid gray;\n border-radius: 1rem;\n}\n& button {\n width: 50%;\n margin: auto;\n padding: 1rem 3rem;\n border: none;\n border-radius: 0.5rem;\n}\n`;","import { useEffect, useState } from \"react\";\nimport { Redirect } from \"react-router-dom\";\nimport Utils from \"../utils\";\nimport {AlertForm, ICON} from './../Components/SweetAlert'\nimport { BgContainer, ButonLink, CtaContainer, IntroContainer, LoginContainer, OptionsContainer, PrimaryBtn, SecondaryBtn, TertiaryBtn } from \"./styles\";\nimport { OLD_SITE } from \"../config\";\nimport Swal from \"sweetalert2\";\n\nfunction Login({logged, setLogged, loginDefaultMessage, setLoginDefaultMessage}){\n \n const [form, setForm] = useState({\n username:'',\n password:'',\n idportal:0,\n });\n \n const [message, setMessage] = useState('');\n const [guess, setGuess] = useState(false);\n const [redirectUrl] = useState(localStorage.getItem('redirect_url') || '');\n const [imgLogin, setImgLogin] = useState(\"\");\n const [urlCentrify, setUrlCentrify] = useState(null);\n const handleInputForm = (event)=>{\n setForm({...form, [event.target.name]:event.target.value});\n }\n\n const handleLogin = (event)=>{\n event.preventDefault();\n setMessage('');\n\n if(form.username===''){\n setMessage('Completa tu nombre de usuario');\n }else if(form.password===''){\n setMessage('Completa tu contraseña');\n }else{\n \n if(form.idportal){\n Utils.Petition.publicPost('/users/login', form, (response)=>{\n Utils.Security.setStartLocalStorage(response, 'Login', ()=>{\n setLogged(true);\n })\n \n },\n (error)=>{\n if(error.response){\n setMessage(error.response.data.message);\n }else{\n setMessage('La aplicación está presentando problemas, por favor intente más tarde');\n }\n });\n }else{\n AlertForm(ICON.WARNING, 'Para iniciar sesión primero configura correctamente el portal', \"\", \"center\", null, 'De acuerdo');\n }\n }\n }\n const handleSSO = ()=>{\n if(form.idportal){\n window.location.href=urlCentrify;\n \n }else{\n AlertForm(ICON.WARNING, 'Para iniciar sesión primero configura correctamente el portal', \"\", \"center\", null, 'De acuerdo');\n }\n }\n useEffect(() => {\n if (loginDefaultMessage !== '' ){\n AlertForm(ICON.WARNING, loginDefaultMessage, \"\", \"center\", null, 'De acuerdo');\n setLoginDefaultMessage('');\n }\n \n }, [loginDefaultMessage]);\n\n useEffect(() => {\n const domain = window.location.href.toLowerCase();\n \n if(domain.includes('login')){\n Swal.fire({\n title: 'Cargando...',\n allowOutsideClick: false,\n });\n Swal.showLoading()\n const url = encodeURIComponent(domain.split('/login')[0]);\n localStorage.setItem('site', url);\n Utils.Petition.publicGet('/portal-url/url/'+url, (response)=>{\n if(response && response.data){\n setForm({...form, idportal:response.data.idportal});\n setImgLogin(response.data.portal.portal_config.splash);\n setUrlCentrify(response.data.portal.portal_config.centrify_login);\n }else{\n AlertForm(ICON.WARNING, 'No se ha configurado correctamente el portal', \"\", \"center\", null, 'De acuerdo');\n }\n }, (error) => console.log(error),\n () => Swal.close())\n }\n }, []);\n\n return (\n <>\n \n {!logged &&\n \n \n {\n !guess && urlCentrify &&\n \n ¡Te estamos esperando!
\n Iniciar sesión\n
\n setGuess(true)}>Invitados externos\n \n }\n {\n (guess || !urlCentrify) && \n \n {!urlCentrify ? \"Iniciar Sesion\" : \"Invitado\"}
\n \n {urlCentrify && setGuess(false)}>Volver}\n \n \n }\n \n }\n {\n logged && ()\n }\n \n Bienvenido
\n Aquí podrás ingresar a la plataforma de Conectándonos con la estrategia, en la cual podrás ver las cifras del desempeño de la empresa en sus diversas áreas.
\n \n \n\n );\n}\nexport default Login;\n\n","import { useEffect } from \"react\";\nimport { useParams } from \"react-router\";\nimport Utils from \"../utils\";\n\nfunction RedirectAdminComponent(){\n const {url} = useParams();\n useEffect(()=>{\n window.location.href=Utils.getAdminUrl(url, true);\n }, []);\n return (Redireccionando...
);\n}\nexport default RedirectAdminComponent;","import { useContext, useEffect, useState } from 'react';\nimport { Col } from 'react-bootstrap';\nimport Section from '../base/Section';\nimport { UserContext } from '../Context/User';\n\nfunction Blank({globalProps, page, templateZonesLoadingPageRoute, setPopupStructure}) {\n const { setPageId } = useContext(UserContext);\n const [loadedContainer, setLoadedContainer] = useState(false);\n\n useEffect(() => {\n setPageId(page.id);\n }, [page])\n const templateZonesLoading = {\n container:{ loaded: loadedContainer, setLoaded:setLoadedContainer},\n popup: templateZonesLoadingPageRoute['popup'],\n popupIzquierda: templateZonesLoadingPageRoute['popupIzquierda'],\n popupDerecha: templateZonesLoadingPageRoute['popupDerecha'],\n popupIzquierdaA: templateZonesLoadingPageRoute['popupIzquierdaA'],\n popupDerechaA: templateZonesLoadingPageRoute['popupDerechaA'],\n popupIzquierdaB: templateZonesLoadingPageRoute['popupIzquierdaB'],\n popupCentroB: templateZonesLoadingPageRoute['popupCentroB'],\n popupDerechaB: templateZonesLoadingPageRoute['popupDerechaB'],\n popupCentroC: templateZonesLoadingPageRoute['popupCentroC'],\n \n };\n return (\n \n
\n \n \n \n \n );\n }\n \n export default Blank;","import { Col, Container, Row } from \"react-bootstrap\";\nimport CustomModal from \"../../../CustomModal\";\nimport Section from \"../../../Section\";\n\nfunction Popup({page, templateZonesLoading, popupStructure, setPopupStructure, globalProps}){\n\n const handleShow = (isShow)=>{\n setPopupStructure({...popupStructure, show:isShow});\n }\n return (\n \n {\n popupStructure.show && \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n } \n \n \n )\n}\nexport default Popup;","import { Card } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { Theme1 } from './../themes/Theme1';\n\nexport const SubContainer = styled.div`\n box-shadow: ${Theme1.shadowContainer};\n border-radius: 0.5rem;\n padding-top: 0rem;\n margin-bottom: 3rem;\n`;\n\nexport const StyleCard = styled(Card)`\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 1px 0px 20px 10px #00000020;\n text-align: center;\n height: 100%;\n justify-content: space-between;\n & h4, & h3 {\n margin-bottom: 2rem;\n }\n\n & button {\n margin: 0 auto;\n }\n`;\n\nexport const ButtonClose = styled.button`\n color: white;\n margin-top: 15px;\n width: 24px;\n height: 24px;\n background-color: ${props => props.color} !important;\n border-radius:100px;\n box-shadow: ${Theme1.shadow};\n &:hover{\n color:white;\n }\n`;\n\nexport const WrapperPadding = styled.div`\n padding-top:30px;\n`;","import { useContext, useEffect, useMemo, useState } from 'react';\nimport Popup from '../base/custom-page-components/popups/view/Popup';\nimport Section from '../base/Section';\nimport { UserContext } from '../Context/User';\nimport { SubContainer } from './styles';\nlet perfomance1 = 0, perfomance2 = 0;\nfunction Default({ globalProps, page, setPopupStructure, templateZonesLoadingPageRoute }) {\n const { setPageId } = useContext(UserContext);\n const [loadedSuperiorCompleto, setLoadedSuperiorCompleto] = useState(false);\n\n const [loadedCentroA, setLoadedCentroA] = useState(false);\n\n const [loadedIzquierdaB, setLoadedIzquierdaB] = useState(false);\n const [loadedDerechaB, setLoadedDerechaB] = useState(false);\n\n const [loadedIzquierdaC, setLoadedIzquierdaC] = useState(false);\n const [loadedCentroC, setLoadedCentroC] = useState(false);\n const [loadedDerechaC, setLoadedDerechaC] = useState(false);\n\n const [loadedCentroD, setLoadedCentroD] = useState(false);\n\n \n const [loadedIzquierdaE1, setLoadedIzquierdaE1] = useState(false);\n const [loadedIzquierdaE2, setLoadedIzquierdaE2] = useState(false);\n const [loadedDerechaE1, setLoadedDerechaE1] = useState(false);\n const [loadedDerechaE2, setLoadedDerechaE2] = useState(false);\n \n const [loadedCentroF, setLoadedCentroF] = useState(false);\n /* useMemo(() => {\n // componentWillMount events\n console.log(\"useMemo\");\n \n perfomance1 = performance.now();\n },[]);\n useEffect(() => {\n // componentDidMount events\n console.log(\"useEffect\");\n perfomance2 = performance.now();\n console.log(`el tiempo es: ${perfomance2 - perfomance1}`);\n return () => {\n // componentWillUnmount events\n }\n }, []); */\n useEffect(() => {\n setPageId(page.id);\n }, [page])\n const templateZonesLoading = {\n superiorCompleto: { loaded: loadedSuperiorCompleto, setLoaded: setLoadedSuperiorCompleto },\n\n centroA: { loaded: loadedCentroA, setLoaded: setLoadedCentroA },\n\n izquierdaB: { loaded: loadedIzquierdaB, setLoaded: setLoadedIzquierdaB },\n derechaB: { loaded: loadedDerechaB, setLoaded: setLoadedDerechaB },\n\n izquierdaC: { loaded: loadedIzquierdaC, setLoaded: setLoadedIzquierdaC },\n centroC: { loaded: loadedCentroC, setLoaded: setLoadedCentroC },\n derechaC: { loaded: loadedDerechaC, setLoaded: setLoadedDerechaC },\n\n centroD: { loaded: loadedCentroD, setLoaded: setLoadedCentroD },\n popup: templateZonesLoadingPageRoute['popup'],\n popupIzquierda: templateZonesLoadingPageRoute['popupIzquierda'],\n popupDerecha: templateZonesLoadingPageRoute['popupDerecha'],\n popupIzquierdaA: templateZonesLoadingPageRoute['popupIzquierdaA'],\n popupDerechaA: templateZonesLoadingPageRoute['popupDerechaA'],\n popupIzquierdaB: templateZonesLoadingPageRoute['popupIzquierdaB'],\n popupCentroB: templateZonesLoadingPageRoute['popupCentroB'],\n popupDerechaB: templateZonesLoadingPageRoute['popupDerechaB'],\n popupCentroC: templateZonesLoadingPageRoute['popupCentroC'],\n izquierdaE1: { loaded: loadedIzquierdaE1, setLoaded: setLoadedIzquierdaE1 },\n izquierdaE2:{ loaded: loadedIzquierdaE2, setLoaded: setLoadedIzquierdaE2 },\n derechaE1:{ loaded: loadedDerechaE1, setLoaded: setLoadedDerechaE1 },\n derechaE2:{ loaded: loadedDerechaE2, setLoaded: setLoadedDerechaE2 },\n centroF:{ loaded: loadedCentroF, setLoaded: setLoadedCentroF }\n };\n\n return (\n <>\n \n\n \n
\n \n\n
\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n \n\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n {\n openContent === 'macroeconomic' &&\n \n \n \n ×Close\n \n \n \n
\n }\n {\n openContent === 'market' &&\n \n \n \n ×Close\n \n \n
\n }\n {\n openContent === 'catering' &&\n \n \n \n ×Close\n \n \n
\n }\n \n
\n \n \n \n
\n
\n \n
\n \n \n \n \n \n
\n \n
\n
\n \n \n \n
\n
\n\n\n\n
\n
\n \n
\n \n \n \n \n
\n \n
\n
\n \n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n\n
handleHomePage('estrategia')}>\n
\n
![\"estrategia\"](\"/assets/estrategia.png\")
\n
handleHomePage('gestion')}>\n
\n
![\"gestion\"/](\"/assets/gestion.png\")
\n
\n
\n \n\n
\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n \n\n
Cargando
);\n const [activeName, setActiveName] = useState('');\n\n useEffect(()=>{\n if(Array.isArray(children)){\n setComponent(children[0].props.selectedComponent);\n setActiveName(children[0].props.name);\n }else{\n setComponent(children.props.selectedComponent);\n setActiveName(children.props.name);\n }\n\n }, []);\n const handleChangeComponent = (_component)=>{\n setComponent(_component.selectedComponent);\n setActiveName(_component.name);\n }\n\n return (\n \n \n \n \n \n { component }\n \n \n )\n}\n\nexport default CustomPageComponentGroup;","import { useState, useContext } from \"react\";\nimport { ButtonGroup } from \"react-bootstrap\";\nimport { FaEdit, FaRedo, FaSave, FaTrash } from \"react-icons/fa\";\nimport { Button } from \"../../../../commonStyles\";\nimport Utils from \"../../../../utils\";\nimport { UserContext } from \"../../../../Context/User\";\n\nfunction Item({templateZonesLoading, setPopupStructure, popups, setPopups, popup, index}){\n const { colorPalette } = useContext(UserContext);\n const [editMode, setEditMode] = useState(false);\n const [popupName, setPopupName]= useState('');\n const handleDelete = (event)=>{\n Utils.Petition.delete('/popups/id/'+popup.id, (_)=>{\n let _popups = [...popups];\n _popups.splice(index, 1);\n setPopups(_popups);\n })\n }\n const handlePopup= (event)=>{\n event.preventDefault();\n setPopupStructure({\n id:popup.id,\n title: popup.name,\n show: true,\n });\n \n templateZonesLoading['popup'].setLoaded(false);\n templateZonesLoading['popupIzquierda'].setLoaded(false);\n templateZonesLoading['popupDerecha'].setLoaded(false);\n templateZonesLoading['popupIzquierdaA'].setLoaded(false);\n templateZonesLoading['popupDerechaA'].setLoaded(false);\n templateZonesLoading['popupIzquierdaB'].setLoaded(false);\n templateZonesLoading['popupCentroB'].setLoaded(false);\n templateZonesLoading['popupDerechaB'].setLoaded(false);\n templateZonesLoading['popupCentroC'].setLoaded(false);\n \n }\n const handleEdit = ()=>{\n setEditMode(true);\n setPopupName(popup.name);\n }\n const handleReturn = ()=>{\n setEditMode(false);\n }\n const handleSave = ()=>{\n Utils.Petition.post('/popups/update',\n {id: popup.id, name:popupName},\n (_)=>{\n let _popups = [...popups];\n for(let i = 0; i{\n setPopupName(event.target.value);\n }\n return (\n \n \n {!editMode && }\n {editMode && }\n {!editMode && }\n {editMode && }\n {editMode && }\n \n \n
\n \n )\n}\nexport default Item;","import { useContext, useEffect, useState } from \"react\";\nimport { Alert, Form } from \"react-bootstrap\";\nimport { FaSave } from \"react-icons/fa\";\nimport { Button } from \"../../../../commonStyles\";\nimport { UserContext } from \"../../../../Context/User\";\nimport Utils from \"../../../../utils\";\nimport Item from \"./Item\";\n\nfunction AdminPopups({templateZonesLoading, setPopupStructure, page}){\n const { colorPalette } = useContext(UserContext);\n const [popups, setPopups] = useState([]);\n const [message, setMessage] = useState('');\n const [form, setForm] = useState({\n name: '',\n idpage: page.id\n })\n useEffect(()=>{\n Utils.Petition.get('/popups/idpage/'+page.id, (response)=>{\n setPopups(response.data);\n })\n }, []);\n const handleForm = (event)=>{\n setForm({...form, [event.target.name]: event.target.value});\n }\n const handleCreatePopup=(event)=>{\n event.preventDefault();\n setMessage(\"\");\n let valid = true;\n if(form.name===''){\n valid = false;\n setMessage(\"Ingresa un nombre por favor\")\n }\n if(valid){\n Utils.Petition.post('/popups', form, (response)=>{\n let _popups = [...popups];\n _popups.push(response.data);\n setPopups(_popups);\n \n });\n setForm({...form, name:''})\n }\n }\n return (\n <>\n Popups
\n \n
\n \n {\n popups.map((popup, index)=>{\n return (\n
\n \n\n )\n \n}\nexport default AdminPopups;","import { useContext, useEffect, useState } from \"react\";\nimport { Form, FormGroup } from \"react-bootstrap\";\nimport { FaSave } from \"react-icons/fa\";\nimport { Button, StyleCheckbox } from \"../../../../commonStyles\";\nimport { AlertForm, ICON } from \"../../../../Components/SweetAlert\";\nimport { UserContext } from \"../../../../Context/User\";\nimport Utils from \"../../../../utils\";\n\nfunction AdminComments({ page }) {\n const { colorPalette } = useContext(UserContext);\n const [form, setForm] = useState({\n includeComment: '0',\n comment: '',\n })\n useEffect(() => {\n setForm({\n includeComment: page.comment,\n });\n }, [page]);\n const handleFormCheckbox = (event) => {\n setForm({ ...form, [event.target.name]: (event.target.checked) ? '1' : '0' });\n }\n\n const handleSaveComment = () => {\n Utils.Petition.post('/pages/update', {\n id: page.id,\n comment: form.includeComment\n },\n (response) => {\n AlertForm(ICON.SUCCESS, response.message, \"\");\n });\n\n }\n return (\n <>\n Comentarios
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n )\n}\nexport default AdminComments;","import { Editor } from \"@tinymce/tinymce-react\";\nimport React, { useRef } from 'react'\nimport { Button } from \"../../commonStyles\";\nimport { Theme1 } from \"../../themes/Theme1\";\nimport { AlertForm, ICON } from \"../../Components/SweetAlert\";\nimport Utils from \"../../utils\";\n\nexport const EditorText = ({ content, setContent, page, inline = false, menubar = true }) => {\n const editorRef = useRef(null);\n const log = () => {\n if (editorRef.current) {\n setContent(editorRef.current.getContent());\n Utils.Petition.post('/comments', {\n comment: editorRef.current.getContent(),\n year: localStorage.getItem('year'),\n month: localStorage.getItem('month'),\n view: localStorage.getItem('view'),\n idfilter: localStorage.getItem('idfilter'),\n typeModel: 'page',\n idtype: page.id\n }, (response) => {\n AlertForm(ICON.SUCCESS, response.message, \"\", \"center\", 2500);\n });\n }\n };\n return (\n <>\n (editorRef.current = editor)}\n initialValue={content}\n init={{\n selector: \"textarea#classic\",\n width: \"100%\",\n height: \"Calc(100% - 45px)\",\n resize: false,\n inline,\n statusbar: false,\n language: \"es\",\n image_title: true,\n /* enable automatic uploads of images represented by blob or data URIs*/\n automatic_uploads: true,\n file_picker_types: \"image\",\n /* and here's our custom image picker*/\n file_picker_callback: function (cb, value, meta) {\n var input = document.createElement(\"input\");\n input.setAttribute(\"type\", \"file\");\n input.setAttribute(\"accept\", \"image/*\");\n input.onchange = function () {\n var file = this.files[0];\n if (file.type.slice(0, 5) === \"image\") {\n let reader = new FileReader();\n reader.onload = function (e) {\n if (meta.filetype === 'image') {\n cb(e.target.result, { alt: file.name });\n }\n };\n reader.readAsDataURL(file);\n }\n };\n input.click();\n },\n\n menubar: menubar ? \"file edit view insert format tools table\" : false,\n plugins: [\n \" advlist anchor autolink codesample fullscreen help image imagetools charmap print\",\n \" lists link media noneditable preview emoticons insertdatetime hr\",\n \" searchreplace table template visualblocks wordcount code pagebreak \"\n ],\n templates: [\n {\n title: \"Non-editable Example\",\n description: \"Non-editable example.\",\n content: \"table1\"\n },\n {\n title: \"Simple Table Example\",\n description: \"Simple Table example.\",\n content: \"table2\"\n }\n ],\n\n toolbar:\n \"undo redo | bold italic | forecolor backcolor | template codesample | link image | alignleft aligncenter alignright alignjustify | bullist numlist | code pagebreak | fontselect fontsizeselect styleselect \",\n\n tinydrive_token_provider: function (success, failure) {\n success({\n token:\n \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo\"\n });\n },\n content_style:\n \"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }\"\n }}\n />\n \n \n )\n}","import styled from \"styled-components\";\n\nexport const ContainerCustom = styled.div`\n display: none;\n height: 100%;\n &.active {\n display: block;\n }\n`;","import { ContainerCustom } from \"./styles\"\n\nexport const Text = ({ showText, content }) => {\n return (\n \n )\n}\n","import { useContext, useState } from \"react\";\nimport { useEffect } from \"react\";\nimport { Form, FormGroup, Table } from \"react-bootstrap\";\nimport { FaSave } from \"react-icons/fa\";\nimport { Button, StyleCheckbox } from \"../../../../commonStyles\";\nimport { AlertForm, ICON } from \"../../../../Components/SweetAlert\";\nimport { UserContext } from \"../../../../Context/User\";\nimport Utils from \"../../../../utils\";\nimport { WrapperButton } from \"../../styles\";\n\nfunction AdminFilters({page}){\n const { colorPalette } = useContext(UserContext);\n const [sections, setSections]=useState([]);\n const [form, setForm] = useState({idpage:page.id, filters:[]});\n useEffect(()=>{\n Utils.Petition.get('/portals-filter', (response) => {\n let _filter = [];\n for (let i = 0; i < response.data.length; i++) {\n _filter.push({ value: response.data[i].filter.id.toString(), description: response.data[i].filter.name, default: response.data[i].default})\n }\n Utils.Petition.get('/hide-filters/page/'+page.id, (response)=>{\n let _form = JSON.parse(JSON.stringify(form));\n for (let i = 0; i < response.data.length; i++) {\n _form.filters.push(response.data[i].idfilter.toString());\n }\n setForm(_form);\n })\n setSections(_filter);\n });\n }, []);\n\n const handleChange = (event) =>{\n let _form = JSON.parse(JSON.stringify(form));\n const checked = event.target.checked;\n const id = event.target.name.split('-')[1];\n if(checked){\n if(!_form.filters.includes(id)){\n _form.filters.push(id);\n }\n }else{\n if(_form.filters.includes(id)){\n _form.filters.splice(_form.filters.indexOf(id), 1);\n }\n }\n setForm(_form);\n }\n const saveHideFilters = ()=>{\n Utils.Petition.post('/hide-filters', form, (response)=>{\n AlertForm(ICON.SUCCESS, response.message, \"\");\n });\n }\n\n return (\n \n )\n}\nexport default AdminFilters;","import { Spinner } from \"react-bootstrap\"\n\nexport const ButtonLoading = ({text = 'Cargando...'}) => {\n return (\n {text} \n )\n}\n","import { useEffect, useState,useContext } from \"react\";\nimport { Table } from \"react-bootstrap\";\nimport { FaSave } from \"react-icons/fa\";\nimport Utils from \"../../../../utils\";\nimport { WrapperButton } from \"../../styles\";\nimport { AlertForm, ICON } from \"../../../../Components/SweetAlert\";\nimport { Loading } from \"../../../../Components/Loading\";\nimport { Button, StyleCheckbox } from \"../../../../commonStyles\";\nimport {ButtonLoading} from \"../../../../Components/Loading/ButtonLoading\";\nimport { UserContext } from \"../../../../Context/User\";\nimport { BsCheck, BsSquare } from \"react-icons/bs\";\n\nfunction ListModules({page,filter,globalProps,containerComponent}) {\n const { colorPalette } = useContext(UserContext);\n const [modules, setModules] = useState([]);\n const [modulesChecked, setModulesChecked] = useState([]);\n const [isLoadingTable, setIsLoadingTable] = useState(true);\n const [isLoadingSave, setisLoadingSave] = useState(false);\n\n useEffect(()=>{ \n setModulesChecked([]);\n if(filter && filter.page && filter.page > 0 ){\n Utils.Petition.get(`/pages-modules/page/idpage/${filter.page}/filter/${filter.filter}/year/${filter.year}/month/${filter.month}`, (response) => {\n setModules(response.data);\n },(e) => {\n console.log(e);\n },() => {\n setIsLoadingTable(false);\n })\n } \n }, []);\n\n const checkModule = (module ) => {\n console.log(modulesChecked.includes(module));\n if(!modulesChecked.includes(module)){\n setModulesChecked([...modulesChecked,module])\n }else{\n let _modulesChecked = [...modulesChecked];\n _modulesChecked.splice(_modulesChecked.indexOf(module),1)\n setModulesChecked(_modulesChecked)\n }\n }\n\n const allCheckModules = (e) => {\n setModulesChecked((modulesChecked.length === modules.length) ? []: modules);\n }\n\n const handleSaveModules = (event) => {\n event.preventDefault();\n if(modulesChecked.length > 0 ){\n setisLoadingSave(true);\n const saveModules = []\n for (let index = 0; index < modulesChecked.length; index++) {\n const element = modulesChecked[index];\n const module = {\n idmodule:element.id,\n idpage:page.id,\n idfilter:localStorage.getItem('idfilter'),\n }\n saveModules.push(module);\n }\n \n if(saveModules.length === modulesChecked.length){\n Utils.Petition.post(`/pages-modules/copy-modules/`,{modules:saveModules},\n () => {\n containerComponent.setShowCustomPageComponent(false)\n AlertForm(ICON.SUCCESS, 'Módulos copiados correctamente');\n globalProps.setReloadContent(true);\n },(e) => {\n console.log(e)\n }, () => {\n setisLoadingSave(false);\n })\n }\n }else{\n AlertForm(ICON.WARNING, 'Selecciona al menos un módulo para copiar');\n } \n \n }\n\n \n return(\n <>\n {isLoadingTable && }\n {\n modules.length > 0 &&\n \n }\n \n \n )\n}\n\nexport default ListModules;","import { useContext, useEffect, useState } from \"react\";\nimport { styleTheme } from \"../../../../themes/themeSelect\";\nimport Utils from \"../../../../utils\";\nimport AsyncSelect from 'react-select/async';\n\nimport { FaSave } from \"react-icons/fa\";\nimport { WrapperButton } from \"../../styles\";\nimport ListModules from \"./ListModules\";\nimport { AlertForm, ICON } from \"../../../../Components/SweetAlert\";\nimport { Button } from \"../../../../commonStyles\";\nimport { UserContext } from \"../../../../Context/User\";\n\nfunction CopyModules({page,globalProps,containerComponent}) {\n const { colorPalette } = useContext(UserContext);\n const [filters, setFilters] = useState([]);\n const [Allpages, setAllpages] = useState([]);\n const [pageSeleted, setPageSeleted] = useState({})\n const [pageTemplateActual, setPageTemplateActual] = useState(page.template);\n const [showListModule, setShowListModule] = useState(false);\n const [filterOfModules, setFilterOfModules] = useState({});\n const [templates, setTemplates] = useState([]);\n const [form, setForm] = useState({\n page:null,\n filter:null,\n month:null,\n year:\"\"\n });\n const filter_name = Utils.getConfigPortal('filter_name');\n const months = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre','Todos'];\n useEffect(()=>{\n Utils.Petition.get('/portals-filter', (response) => {\n let _filter = [];\n for (let i = 0; i < response.data.length; i++) {\n _filter.push({ value: response.data[i].filter.id.toString(), description: response.data[i].filter.name, default: response.data[i].default})\n }\n setFilters(_filter);\n });\n Utils.Petition.get('/pages/portal/'+localStorage.getItem('idportal'),(response) => {\n setAllpages(response.data)\n })\n setShowListModule(false);\n Utils.Petition.get('/templates/',(response) => {\n setTemplates(response.data)\n })\n \n }, []);\n\n const loadPages = (inputValue) => {\n if (inputValue.length > 2) {\n return new Promise((resolve)=>{\n setTimeout(()=>{\n const searchPages = []; \n Allpages.filter(e => e.name.toLowerCase().includes(inputValue.toLowerCase())).map((el) => {\n const objPage = {}\n objPage.value = el.id;\n objPage.label = el.name;\n searchPages.push(objPage);\n })\n resolve(searchPages)\n \n },100)\n })\n }\n return new Promise((resolve) => resolve([]));\n }\n\n const loadFilter = (inputValue) => {\n if (inputValue.length > 2) {\n return new Promise((resolve)=>{\n setTimeout(()=>{\n const searchFilter = []; \n filters.filter(e => e.description.toLowerCase().includes(inputValue.toLowerCase())).map((el) => {\n const objPage = {}\n objPage.value = el.value;\n objPage.label = el.description;\n searchFilter.push(objPage);\n })\n resolve(searchFilter)\n \n },100)\n })\n }\n return new Promise((resolve) => resolve([]));\n }\n\n const LoadMonths = () => {\n return new Promise((resolve)=>{\n setTimeout(()=>{\n const monthsResponse = months.map((e, idx) => {\n return({\n value: idx,\n label: e\n })\n })\n resolve(monthsResponse)\n \n },100)\n })\n }\n const handleform = (event) => {\n if(event && event.target){\n setForm({...form,[event.target.name]:event.target.value === \"\" ? null : event.target.value})\n }\n }\n const ListModule = (event) => {\n event.preventDefault();\n if(validate()){\n \n setFilterOfModules({\n page:form.page.value,\n filter:form.filter.value,\n month:form.month === null ? null : form.month.value,\n year:form.year === \"\" ? null : form.year\n });\n setShowListModule(true);\n }\n \n }\n const backModule = () => {\n setShowListModule(false);\n }\n\n const validate = () => {\n if(form.page === null){\n AlertForm(ICON.WARNING, 'Selecciona una página');\n return false;\n }\n if(form.filter === null){\n AlertForm(ICON.WARNING, 'Selecciona una región');\n return false;\n }\n return true;\n }\n\n useEffect(() => {\n if(form.page != null){\n Utils.Petition.get('/pages/id/'+form.page.value, (response) => {\n setPageSeleted(response.data[0]);\n })\n }\n \n }, [form.page])\n\n const changeTemplate = () => {\n if(form.page != null && pageSeleted.template != undefined){\n Utils.Petition.post('/pages/update', {\n id: page.id,\n template: pageSeleted.template\n },(response) => {\n setPageTemplateActual(pageSeleted.template)\n AlertForm(ICON.SUCCESS, response.message, \"\");\n }\n );\n }\n \n }\n\n\n return(\n <>\n Copiar Modulos
\n Todos los módulos seleccionados se copiarán en la pagina {Allpages.filter(e => e.path === page.path)[0]?.name } en:
{filter_name} > { filters.filter(e => e.value === localStorage.getItem('idfilter'))[0]?.description } \n {\n !showListModule &&\n \n }\n {\n showListModule &&\n <>\n \n \n \n
\n \n }\n \n \n \n \n )\n}\nexport default CopyModules;","import Utils from \".\";\nimport { counter } from \"../App\"\n\nexport const registerVisit = (timeSpent, amountEndpoint, inactivity,reportByHour = false) => {\n console.log(counter.number, amountEndpoint,counter.startTime.length,counter.endTime.length)\n let ocupation = JSON.parse(localStorage.getItem(\"user_ocupation\"));\n let tiempoRebote = JSON.parse(localStorage.getItem(\"config\")).tiempo_rebote;\n \n let data = {\n client: localStorage.getItem('client'),\n filter: localStorage.getItem('filter'),\n portal: localStorage.getItem('portal'),\n business: localStorage.getItem('business'),\n rolAdmin: localStorage.getItem('rolAdmin'),\n rolContent: localStorage.getItem('rolContent'),\n year: localStorage.getItem('year'),\n month: localStorage.getItem('month'),\n view: localStorage.getItem('view'),\n page: localStorage.getItem(\"pageName\"),\n department: ocupation.department,\n position: ocupation.position,\n idUserPlatform: Number(localStorage.getItem(\"idUserPlatform\"))\n }\n if(reportByHour) { /* reporte cada hora saber la concurrencia */\n Utils.Petition.post('/users/visit', {\n ...data,\n cargaPagina: localStorage.getItem(\"cargaPagina\"),\n permanencia: \"N/A\",\n tasaRebote: \"N/A\",\n idUserPlatform: \"ReporteHora\"\n });\n } else if((counter.number && counter.number === counter.startTime.length && counter.number === counter.endTime.length)) { /* Cambia de pagina */\n \n let calcInitialTime = Math.min(...counter.startTime);\n let calcEndTime = Math.max(...counter.endTime);\n let cargaPagina = counter.enabled ? calcEndTime : calcEndTime - calcInitialTime;\n localStorage.setItem(\"cargaPagina\", cargaPagina);\n Utils.Petition.post('/users/visit', {\n ...data,\n cargaPagina: cargaPagina,\n permanencia: timeSpent,\n tasaRebote: Number(tiempoRebote) * 1000 > timeSpent /* tiempo de rebote < tiempo permanencia, si se cumple es true tasa de rebote */\n });\n } else if(inactivity) { /* Registro por inactividad */\n\n let cargaPagina = localStorage.getItem(\"cargaPagina\");\n Utils.Petition.post('/users/visit', {\n ...data,\n cargaPagina: Number(cargaPagina),\n permanencia: timeSpent,\n tasaRebote: false \n });\n\n } else if(counter.number === 0 && amountEndpoint === 0 && counter.startTime.length === 0 && counter.endTime.length === 0) { /* Registro por post inactividad y cambia de pagina*/\n let cargaPagina = localStorage.getItem(\"cargaPagina\");\n Utils.Petition.post('/users/visit', {\n ...data,\n cargaPagina: cargaPagina,\n permanencia: timeSpent,\n tasaRebote: Number(tiempoRebote) * 1000 > timeSpent /* tiempo de rebote < tiempo permanencia, si se cumple es true tasa de rebote */\n });\n } else { /* LA pagina no cargo en su totalidad */\n Utils.Petition.post('/users/visit', {\n ...data,\n cargaPagina: timeSpent,\n permanencia: timeSpent,\n tasaRebote: true \n });\n }\n counter.number = 0; \n counter.startTime = [];\n counter.endTime = [];\n counter.enabled = false;\n}\n","import { useEffect, useState, useRef, useContext, useMemo } from \"react\";\nimport { Container, Breadcrumb } from \"react-bootstrap\";\nimport { Button } from \"../commonStyles\";\nimport Utils from \"../utils\";\nimport CustomPageComponent from \"./custom-page-components/CustomPageComponent\";\nimport CustomPageComponentGroup from \"./custom-page-components/CustomPageComponentGroup\";\nimport AdminPopups from \"./custom-page-components/popups/admin/AdminPopups\";\nimport Popup from \"./custom-page-components/popups/view/Popup\";\nimport { AggButtonWrapper, AggWrapper, AggWrapperContainer, AggWrapperClose, PageIdWrapper, StyleComentario, ContainerEditor, ContainerPage, DivEditor, DivClose, BreadcrumbWrapper } from \"./styles\";\nimport { FaPlus } from \"react-icons/fa\"\nimport { Helmet } from 'react-helmet'\nimport AdminComments from \"./custom-page-components/comments/admin/AdminComments\";\nimport React from \"react\";\nimport { EditorText } from \"./Editor\";\nimport { Text } from \"./Editor/text\";\nimport { ContainerCustom } from \"./Editor/styles\";\nimport { FaHome } from \"react-icons/fa\";\nimport AdminFilters from \"./custom-page-components/hide-filters/admin/AdminFilters\";\nimport CopyModules from \"./custom-page-components/copy-modules/admin/CopyModules\";\nimport { UserContext } from \"../Context/User\";\nimport { registerVisit } from \"../utils/RegisterVisit\";\nimport { counter } from \"../App\";\n\nfunction PageRoute({ globalProps, page, ComponentTagName }) {\n const { hasPermission, colorPalette } = useContext(UserContext);\n const [popupStructure, setPopupStructure] = useState({\n id: 0,\n show: false,\n title: ''\n });\n const [breadcrumbs, setBreadcrumbs] = useState([]);\n\n const [showCustomPageComponent, setShowCustomPageComponent] = useState(false);\n \n const [loadedPopup, setLoadedPopup] = useState(false);\n const [loadedPopupIzquierda, setLoadedPopupIzquierda] = useState(false);\n const [loadedPopupDerecha, setLoadedPopupDerecha] = useState(false);\n const [loadedPopupIzquierdaA, setLoadedPopupIzquierdaA] = useState(false);\n const [loadedPopupDerechaA, setLoadedPopupDerechaA] = useState(false);\n const [loadedPopupIzquierdaB, setLoadedPopupIzquierdaB] = useState(false);\n const [loadedPopupCentroB, setLoadedPopupCentroB] = useState(false);\n const [loadedPopupDerechaB, setLoadedPopupDerechaB] = useState(false);\n const [loadedPopupCentroC, setLoadedPopupCentroC] = useState(false);\n \n const [content, setContent] = useState(\"\");\n const btnComment = useRef(null);\n const showComment = useRef(null);\n const showEditor = useRef(null);\n const showText = useRef(null);\n const textbtn = useRef(null);\n const textbtn2 = useRef(null);\n\n const templateZonesLoading = {\n popup: { loaded: loadedPopup, setLoaded: setLoadedPopup },\n popupIzquierda: { loaded: loadedPopupIzquierda, setLoaded: setLoadedPopupIzquierda },\n popupDerecha: { loaded: loadedPopupDerecha, setLoaded: setLoadedPopupDerecha },\n popupIzquierdaA: { loaded: loadedPopupIzquierdaA, setLoaded: setLoadedPopupIzquierdaA },\n popupDerechaA: { loaded: loadedPopupDerechaA, setLoaded: setLoadedPopupDerechaA },\n popupIzquierdaB: { loaded: loadedPopupIzquierdaB, setLoaded: setLoadedPopupIzquierdaB },\n popupCentroB: { loaded: loadedPopupCentroB, setLoaded: setLoadedPopupCentroB },\n popupDerechaB: { loaded: loadedPopupDerechaB, setLoaded: setLoadedPopupDerechaB },\n popupCentroC: { loaded: loadedPopupCentroC, setLoaded: setLoadedPopupCentroC },\n };\n\n const containerComponent = {setShowCustomPageComponent}\n useEffect(() => {\n let timeActive = 0;\n let timeActiveInitial = performance.now();\n let timeActiveFinal;\n let isInactiveByTime = false;\n let tiempoInactividad = JSON.parse(localStorage.getItem(\"config\")).tiempo_inactividad;\n tiempoInactividad = Number(tiempoInactividad) * 60000;\n const handleVisibility = () => {\n let visibilityState = document.visibilityState\n \n if (visibilityState === 'hidden') { // Cuando la página se en segundo plano\n timeActiveFinal = performance.now();\n if(isInactiveByTime) timeActiveInitial = timeActiveFinal;\n timeActive += (timeActiveFinal - timeActiveInitial);\n }\n if (visibilityState === 'visible') { // Cuando la página está octivo\n timeActiveInitial = performance.now();\n }\n }\n document.addEventListener(\"visibilitychange\", handleVisibility);\n let programarTiempo;\n const inactivityByTime = () => {\n \n let amountEndpoint = counter.number;\n \n timeActiveFinal = performance.now();\n timeActive += (timeActiveFinal - timeActiveInitial);\n registerVisit(timeActive, amountEndpoint, true);\n let idUserPlatform = Date.parse(new Date());\n localStorage.setItem(\"idUserPlatform\", idUserPlatform);\n timeActive = 0;\n isInactiveByTime = true;\n }\n programarTiempo = setTimeout(inactivityByTime, tiempoInactividad);\n const handleClickEvent = (e) => {\n if(programarTiempo) clearTimeout(programarTiempo);\n programarTiempo = setTimeout(inactivityByTime, tiempoInactividad);\n console.log({timeActive})\n if(isInactiveByTime) {\n timeActiveInitial = performance.now();\n isInactiveByTime = false;\n }\n } \n \n let $mainContent = document.getElementById(\"main-content\");\n $mainContent.addEventListener(\"click\", handleClickEvent);\n $mainContent.addEventListener(\"scroll\",handleClickEvent);\n \n\n /* cierre de ventana, pestaña o recarga la pagina*/\n let handleBeforeUnload = (e) => {\n let amountEndpoint = counter.number;\n registerVisit(timeActive, amountEndpoint, false);\n delete e['returnValue'];\n }\n window.addEventListener(\"beforeunload\", handleBeforeUnload);\n\n return () => {\n timeActiveFinal = performance.now();\n timeActive += (timeActiveFinal - timeActiveInitial);\n let amountEndpoint = counter.number;\n clearTimeout(programarTiempo);\n $mainContent.removeEventListener(\"click\", handleClickEvent)\n $mainContent.removeEventListener(\"scroll\", handleClickEvent);\n document.removeEventListener(\"visibilitychange\", handleVisibility);\n window.removeEventListener(\"beforeunload\", handleBeforeUnload);\n registerVisit(timeActive, amountEndpoint, false);\n }\n }, [])\n \n useEffect(() => {\n /* debugger; */\n\n let _filters = JSON.parse(localStorage.getItem('filters'));\n \n Utils.removeOptions(globalProps.filterTag.current);\n for (let i = 0; i < _filters.length; i++) {\n globalProps.filterTag.current.add(new Option(_filters[i].description, _filters[i].value))\n }\n globalProps.filterTag.current.value=localStorage.getItem('idfilter');\n if(page.hide_filters.length){\n let useDefault=false;\n for(let i in page.hide_filters){\n for (let j=0; j {\n setBreadcrumbs(response.data);\n });\n Utils.Petition.get('/comments/type-model/page/type-id/' + page.id + '/year/' + localStorage.getItem('year') + '/month/' + localStorage.getItem('month')+ '/view/' + localStorage.getItem('view')+'/idfilter/'+localStorage.getItem('idfilter'),\n (response) => {\n setContent(response.data?.comment);\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [page]);\n\n const handleMenuCustomPageComponent = () => {\n setShowCustomPageComponent(!showCustomPageComponent);\n }\n\n const handleComments = () => {\n btnComment.current.classList.toggle('active');\n showComment.current.classList.toggle('active');\n showText.current.classList.add('active');\n showEditor.current.classList.remove('active');\n if(hasPermission.edit){\n textbtn.current.classList.remove('btn-inactive');\n textbtn2.current.classList.add('btn-inactive');\n }\n }\n\n const handleEditor = () => {\n showEditor.current.classList.toggle('active');\n showText.current.classList.toggle('active');\n textbtn.current.classList.toggle('btn-inactive');\n textbtn2.current.classList.toggle('btn-inactive');\n }\n\n return (\n \n {\n globalProps.editMode &&\n <>\n {`CCE | ${page.name}`} \n \n \n \n \n\n {\n showCustomPageComponent &&\n \n \n \n \n \n\n \n } />\n } />\n } />\n } />\n \n \n \n }\n \n \n }\n \n \n \n Inicio\n {\n breadcrumbs.map((item, i) => (\n \n {item.page.name}\n \n ))\n }\n\n \n \n \n \n \n \n \n Comentarios\n \n \n \n ![\"close\"](\"/assets/Icon-cerrar.svg\")
\n \n \n \n \n \n \n \n\n { \n hasPermission.edit &&\n \n }\n \n \n )\n}\nexport default PageRoute;","import { useContext } from \"react\";\nimport { UserContext } from \"../Context/User\";\nimport { PageNotFoundImage, PageNotFoundTitle, PageNotFoundWrapper, PageNotFoundDescription } from \"./styles\";\n\nfunction PageNotFound(){\n\n const { colorPalette } = useContext(UserContext);\n return (\n \n \n ![\"not_found\"/](\"/assets/bx-error-alt.png\")
\n \n Error 404\n Página no encontrada\n \n )\n}\nexport default PageNotFound;","import {Route, Switch} from 'react-router-dom';\nimport React, { useState, useEffect } from 'react';\n// All templates\nimport AllTemplates from '../templates';\nimport Utils from '../utils';\nimport PageRoute from './PageRoute';\nimport PageNotFound from './PageNotFound';\nfunction Templates({globalProps}){\n const [pages, setPages] = useState([]);\n const [load, setload] = useState(false); \n useEffect(() => {\n Utils.Petition.get(\n '/pages/portal/'+localStorage.getItem('idportal'),\n (response)=>{\n setPages(response.data);\n setload(true);\n }\n );\n }, []);\n return (\n \n {\n load &&\n \n {\n pages.map(page => {\n const ComponentTagName = AllTemplates[page.template || 'Default'];\n return ( } />)\n })\n }\n }/>\n \n }\n { }\n \n )\n}\nexport default Templates;","import styled from \"styled-components\";\nimport { Theme1 } from \"../../../themes/Theme1\";\nexport const ItemWrapper = styled.div`\n width: 100%;\n padding: 0 10px;\n a{\n display: flex;\n width: 100%;\n \n color: ${props => props.colors?.grayText};\n padding: 10px 0;\n font-size: 18px;\n &:hover{\n color: ${props => props.colors?.primary};\n }\n }\n`;\n\nexport const ItemContainWrapper = styled.div`\n border-bottom: ${Theme1.borderTwo};\n width: 100%;\n .menu-collase{\n padding-left: 20px;\n }\n`;\nexport const ItemContain = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n .collase-menu{\n font-size: 12px;\n display: block;\n width: 20px;\n text-align: center;\n cursor: pointer;\n text-align: center;\n border-radius: 4px;\n &:hover{\n background-color: ${props => props.primary};\n color: white;\n }\n }\n`;\nexport const ItemContainNoLink = styled.div`\n display: flex;\n width: 100%;\n cursor: pointer;\n color: ${props => props.colors?.grayText};\n padding: 10px 0;\n &:hover{\n color: ${props => props.colors?.primary};\n }\n`;\nexport const Label = styled.span`\n font-size: 14px;\n margin-left: 5px;\n text-decoration: none;\n`;\n","import { Link } from \"react-router-dom\"\nimport { useState, useContext } from 'react';\nimport { ItemWrapper, ItemContain, Label, ItemContainWrapper, ItemContainNoLink } from \"./styles\"\nimport { FaAngleDown, FaAngleRight, FaAngleUp, FaExternalLinkAlt } from \"react-icons/fa\";\nimport { Collapse } from 'react-bootstrap';\nimport { UserContext } from \"../../../Context/User\";\n\nexport const ItemSidebar = ({label, icon: Icon, path, child, external}) => {\n const { colorPalette } = useContext(UserContext);\n const [open, setOpen] = useState(false);\n const handleOpenChild = () =>{\n if (path === \"#\" && child !== undefined){\n setOpen(!open);\n }\n };\n return (\n \n \n \n {\n path === \"#\" ?\n \n \n \n :\n (\n external ?\n \n \n \n \n :\n \n \n \n \n )\n }\n { child !== undefined && child.length > 0 && \n setOpen(!open)}>\n { open ? : }\n \n }\n \n \n \n { child !== undefined && \n child.map((item, i) => (\n item.external\n ?\n
\n \n \n \n :\n
\n
\n
\n \n ))\n }\n
\n \n \n handleSearch(event)} />\n \n \n
\n {wordToSearch.length > 2 && \n \n \n \n \n | Indicador | \n Real | \n Ppto | \n RF | \n
\n \n \n \n {indicators.length > 0 && indicators.map((el, index)=>{\n return(\n \n | {el.name} | \n {el.col1 !== null ? Utils.formatNumber(format_number,el.col1) : 0}{el.unit === '%' && '%'} | \n {el.col2 !== null ? Utils.formatNumber(format_number,el.col2) : 0}{el.unit === '%' && '%'} | \n {el.col3 !== null ? Utils.formatNumber(format_number,el.col3) : 0}{el.unit === '%' && '%'} | \n
\n )}\n )}\n \n
\n {isLoadingIndicator && }\n {!indicators.length && !isLoadingIndicator && \"No hay resultados de indicadores\"}\n \n \n \n | Página | \n
\n \n \n {pages.length > 0 && pages.map((el, index)=>{\n return(\n \n | setWordToSearch(\"\")}>{el.name} | \n
\n )}\n )}\n \n
\n {isLoadingPages && }\n {!pages.length && !isLoadingPages && \"No hay resultados de Paginas\"}\n \n \n \n | Contenido | \n Ubicado en | \n
\n \n \n {content.length > 0 && content.map((el, index)=>{\n return(\n \n | \n {handleLocalStorage({month:el.month, year:el.year, idfilter:el.idfilter})}}>\n {el.name}\n \n | \n \n Página: {el.page_name} \n {el.month === null && el.year === null ? <>Publicado: Actualmente : <> Publicado: {el.year} } \n Región: {el.region === null ? 'Todas' : el.region} \n | \n
\n )}\n )}\n \n
\n {isLoadingContent && }\n {!content.length && !isLoadingContent && \"No hay resultados de Contenido\"}\n \n }\n \n )\n}","import { useContext, useState } from \"react\";\nimport { FaCog, FaAngleRight } from \"react-icons/fa\";\nimport Utils from \"../utils\";\nimport { Dropdown } from 'react-bootstrap';\nimport { UserContext } from \"../Context/User\";\nimport { AlertForm, ICON } from \"../Components/SweetAlert\";\n\nfunction AdminSection({globalProps, editMode, setEditMode}){\n const { hasPermission } = useContext(UserContext);\n const [isMenuAdmin, setIsMenuAdmin] = useState(false);\n const handleEditPage = (event)=>{\n\n event.preventDefault();\n setIsMenuAdmin(false);\n setEditMode(!editMode);\n }\n const handleMenuAdmin = (event) => {\n event.preventDefault();\n Utils.Petition.post('/users/create-temporal-token-admin', {}, (data)=>{\n window.location.href=Utils.adminAutologin(data.token);\n })\n \n \n }\n return ( \n \n \n \n \n\n \n {hasPermission.edit && { editMode ? 'Dejar de editar' :'Editar página' }}\n {/* Ir al administrador*/}\n Ir al administrador\n \n \n );\n}\nexport default AdminSection;","import { useContext, useEffect, useState } from \"react\";\nimport { Container } from \"react-bootstrap\";\nimport { UserContext } from \"../Context/User\";\nimport Utils from \"../utils\";\nimport { FiltrosWrapper, FiltrosLabel, FiltrosMenu, FiltrosWrapperSelect } from \"./styles\";\n\nfunction Filtros({ globalProps, setEditMode, updateLocalStorage, setUpdateLocalStorage }) {\n const { setIdFilter, colorPalette } = useContext(UserContext);\n const [months, setMonths] = useState([]);\n const [years, setYears] = useState([]);\n const [views, setViews] = useState([]);\n const [filterSelects, setFilterSelects] = useState({\n month: '',\n year: '',\n view: '',\n section: '',\n });\n const filter_name = Utils.getConfigPortal('filter_name');\n useEffect(() => {\n let date = new Date();\n let month = date.getMonth();\n let year = date.getFullYear();\n //let lastYear = (month === 0) ? year - 1 : year;\n let lastYear = year;\n if (!localStorage.getItem('view')) localStorage.setItem('view', 'M');\n if (!localStorage.getItem('month')) localStorage.setItem('month', month - 1);\n if (!localStorage.getItem('year')) localStorage.setItem('year', lastYear);\n\n Utils.Petition.get('/view-business', (response) => {\n let _views = [];\n \n response.data.forEach(element => {\n let obj = {}\n obj.value = element.code;\n obj.description = element.description;\n _views.push(obj);\n });\n setViews(_views);\n\n })\n \n let _years = [];\n for (let i = lastYear - 5; i <= lastYear; i++) {\n _years.push(i);\n }\n setYears(_years);\n let _months = [];\n if(localStorage.getItem('view')==='T'){\n _months = ['Enero-Marzo', 'Abril-Junio', 'Julio-Septiembre', 'Octubre-Diciembre'];\n setMonths(_months);\n }else{\n\n _months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\n if (localStorage.getItem('year') === year) {\n _months.splice(month);\n }\n setMonths(_months);\n }\n if(_months.length===4 && \n localStorage.getItem('month')!=='2' &&\n localStorage.getItem('month')!=='5' &&\n localStorage.getItem('month')!=='8' &&\n localStorage.getItem('month')!=='11'\n ){\n localStorage.setItem('month','2');\n }\n\n setFilterSelects({\n month: localStorage.getItem('month'),\n year: localStorage.getItem('year'),\n view: localStorage.getItem('view'),\n section: localStorage.getItem('idfilter'),\n });\n setIdFilter(localStorage.getItem('idfilter'));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if(updateLocalStorage) {\n setFilterSelects({\n month: localStorage.getItem('month'),\n year: localStorage.getItem('year'),\n view: localStorage.getItem('view'),\n section: localStorage.getItem('idfilter'),\n });\n setUpdateLocalStorage(false);\n }\n \n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [updateLocalStorage])\n\n const handleFilterSelect = (event) => {\n setFilterSelects({ ...filterSelects, [event.target.name]: event.target.value });\n if (event.target.name === 'section') {\n localStorage.setItem('idfilter', event.target.value);\n localStorage.setItem('filter', event.target[event.target.selectedIndex].text);\n } else {\n let _localname = event.target.name;\n localStorage.setItem(_localname, event.target.value);\n }\n globalProps.setReloadContent(true);\n }\n\n\n return (\n \n \n \n\n \n {filter_name}\n \n \n \n Mes\n \n \n \n Año\n \n \n \n Tipo\n \n \n \n \n \n );\n}\nexport default Filtros;","import { Header, Logo, SectionLogo, SectionAccount } from \"./styles\"\nimport {Search} from \"./search\"\nimport { FaBars, FaUserAlt, FaAngleRight } from \"react-icons/fa\";\nimport { Dropdown } from 'react-bootstrap';\nimport AdminSection from './../AdminSection';\nimport Utils from './../../utils';\nimport { Link } from \"react-router-dom\";\nimport Filtros from \"../Filtros\";\nimport { CENTRIFY_LOGOUT } from \"../../config\";\nimport { useContext, useState, useEffect } from \"react\";\nimport { UserContext } from \"../../Context/User\";\n\nexport const Head = ({ editMode, globalProps, setEditMode, onPress }) => {\n const { colorPalette } = useContext(UserContext);\n const [updateLocalStorage, setUpdateLocalStorage] = useState(false);\n const [logo, setLogo] = useState(\"\");\n const handleCloseSession = () => {\n const w = window.open(CENTRIFY_LOGOUT,\"Cerrando sesión\", \"height=50,width=50\");\n setTimeout(()=>w.close(), 3000);\n localStorage.removeItem('token_user');\n localStorage.removeItem('editable');\n setEditMode(false);\n globalProps.setLogged(false);\n }\n useEffect(() => {\n setLogo(JSON.parse(localStorage.getItem(\"config\")).logo);\n }, [])\n\n return (\n \n \n \n \n {logo && 
}\n {!logo && Mi Logo
}\n \n \n \n \n \n \n \n \n \n {Utils.Security.checkRoleGroup('adminSite') && }\n \n \n \n \n\n \n {/* Gestionar cuenta\n Gestionar perfil */}\n Cerrar Sesion\n \n \n \n \n )\n}","import Templates from './Templates';\nimport { Dashboard, DashboardWrapper, DashboardHeader, DashboardContent, DashboardSidebar, DashboardContentWrapper, DashboardContainertWrapper } from './styles';\nimport { Sidebar } from './Sidebar';\nimport { Head } from './Head';\nimport { useRef } from 'react';\n\nfunction MasterPage({ editMode, setEditMode, globalProps, }) {\n const showPage = useRef(null);\n const showSidebar = useRef(null);\n\n const handleSidebar = () => {\n showPage.current.classList.toggle(\"active-Menu\");\n showSidebar.current.classList.toggle(\"active-Menu\");\n }\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n );\n}\n\nexport default MasterPage;","import { createGlobalStyle } from \"styled-components\";\nimport { Theme1 } from \"./themes/Theme1\";\n\n\nexport const GlobalStyle = createGlobalStyle`\n *{\n font-family: ${Theme1.font};\n }\n body {\n margin: 0;\n padding: 0;\n font-family: ${Theme1.font};\n color: ${Theme1.grayText};\n }\n a {\n text-decoration: none;\n &:hover{\n text-decoration: none;\n }\n }\n .modal-sm{\n max-width: 450px;\n }\n\n// style SCROLL\n::-webkit-scrollbar {\n width: 12px;\n}\n::-webkit-scrollbar-track {\n box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n border-radius: 10px;\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\n}\n \n// focus input y botones\ninput.form-control:focus,\ntextarea.form-control:focus,\nselect.form-control:focus {\n border-color: ${props => props.colors?.primary};\n box-shadow: 0 0 0 0.2rem ${props => props.colors?.primary}30;\n}\n\n.btn-primary:not(:disabled):not(.disabled).active:focus,\n.btn-primary:not(:disabled):not(.disabled):active:focus,\n.show > .btn-primary.dropdown-toggle:focus {\n box-shadow: 0 0 0 0.2rem ${props => props.colors?.primary}30;\n}\n\n.btn-primary.focus, .btn-primary:focus {\n box-shadow: 0 0 0 0.2rem ${props => props.colors?.primary}30;\n}\n\n.dropdown-item.active, .dropdown-item:active{\n background-color: ${props => props.colors?.primary};\n}\n\n.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {\n background-color: ${props => props.colors?.primary};\n border-color: ${props => props.colors?.primary};\n}\n// boton para modal\nbutton.modal-primary {\n background-color: ${props => props.colors?.primary};\n border-color: ${props => props.colors?.primary};\n\n &:hover {\n color: ${props => props.colors?.primary};\n background-color: white;\n border-color: ${props => props.colors?.primary};\n }\n\n &:focus {\n border-color: ${props => props.colors?.primary};\n box-shadow: 0 0 0 0.2rem ${props => props.colors?.primary}30;\n background-color: ${props => props.colors?.primary};\n }\n}\n.tox-notifications-container {\n display: none;\n }\n\n\n .tabla-seguimiento li, .tabla-seguimiento p, .tabla-seguimiento div, .tabla-seguimiento ul, .tabla-seguimiento ol {\n font-family: inherit !important;\n font-size: inherit !important;\n background-color: transparent !important;\n}\n\n.tabla-seguimiento span {\n font-family: inherit !important;\n font-size: inherit !important;\n}\n\n.tabla-seguimiento > tbody > tr:not(:nth-child(4)) span {\n background-color: transparent !important;\n}\n`;\n\n","import { useEffect } from \"react\";\nimport { Redirect } from \"react-router-dom\";\n\nfunction PreLogin(props){\n useEffect(()=>{\n localStorage.setItem('redirect_url', props.location.pathname);\n }, []);\n return ()\n}\nexport default PreLogin;","import { useState } from \"react\";\nimport { useEffect } from \"react\";\nimport { Redirect, useParams } from \"react-router-dom\";\nimport { VERSION_SESSION } from \"../config\";\nimport Utils from \"../utils\";\n\nfunction AutologinSSO({logged, setLogged}){\n\n const [loaded, setLoaded] = useState(false);\n const [redirectUrl] = useState(localStorage.getItem('redirect_url') || '');\n const [data, setData] = useState({});\n const {token } = useParams();\n useEffect(()=>{\n\n localStorage.setItem('token_user', token);\n Utils.Petition.get('/users/validate-token',(response)=>{\n Utils.Security.setStartLocalStorage(response, 'SSO', ()=>{\n setLogged(true);\n setLoaded(true);\n window.location.href='/';\n })\n });\n }, []);\n\n return (\n <>\n {\n !loaded && 'Validando usuario'\n }\n {\n loaded && !logged && ()\n }\n {\n logged && loaded \n && 'Autenticación correcta, redireccionado...'\n /* && */\n }\n \n\n \n \n )\n}\nexport default AutologinSSO;","import axios from \"axios\";\nimport { useEffect } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport { CENTRIFY_LOGOUT } from \"../config\";\nimport Utils from \"../utils\";\n\nfunction Logout({setLogged}){\n let history = useHistory();\n useEffect(()=>{\n const w = window.open(CENTRIFY_LOGOUT,\"Cerrando sesión\", \"height=50,width=50\");\n setTimeout(()=>w.close(), 3000);\n localStorage.clear();\n setLogged(false);\n history.push('/');\n\n }, []);\n return (null)\n}\nexport default Logout;","import 'bootstrap/dist/css/bootstrap.min.css';\nimport { UserInfo } from './Context/User';\nimport React, { useRef } from \"react\";\nimport './App.css'\nimport { useEffect, useState } from 'react';\nimport Utils from './utils';\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\nimport Login from './account/Login';\nimport { VERSION_SESSION } from './config';\nimport RedirectAdminComponent from './base/RedirectAdminComponent';\nimport MasterPage from './base/MasterPage';\nimport { GlobalStyle } from './globalStyles';\n\nimport PreLogin from './account/PreLogin';\nimport AutologinSSO from './account/AutologinSSO';\nimport Logout from './account/Logout';\nimport { Loading } from './Components/Loading';\nimport { Theme1 } from './themes/Theme1';\nimport { registerVisit } from './utils/RegisterVisit';\n\n\nexport var counter = {number: 0, startTime: [], endTime: [], enabled: true};\nfunction App() {\n const [editMode, setEditMode]=useState(null);\n const [moduleList, setModuleList]=useState([]);\n const [loadedEditMode, setLoadedEditMode] = useState(false);\n const [loaded, setLoaded] = useState(false);\n const [logged, setLogged] = useState(false);\n const [reloadContent, setReloadContent] = useState(false);\n const [loginDefaultMessage, setLoginDefaultMessage] = useState('');\n\n const filterTag = useRef();\n const configGeneral = useRef(null);\n let globalProps = {\n moduleList,\n editMode,\n loaded,\n reloadContent,\n setReloadContent,\n setLogged,\n filterTag,\n }\n useEffect(()=>{\n \n \n if(VERSION_SESSION===localStorage.getItem('version') && localStorage.getItem('token_user')){\n Utils.Petition.get('/users/validate-token',(response)=>{\n if(localStorage.getItem('editable')==='1') setEditMode(true);\n let config = response.data.config;\n configGeneral.current = {colors:{...Theme1, primary: config.color_primary, secondary: config.color_secondary} };\n Utils.Security.setStartLocalStorage(response, 'AppValidate', ()=>{\n setLogged(true);\n })\n\n },\n (_)=>{\n setLoaded(true);\n setEditMode(false);\n localStorage.setItem('editable','0');\n setLoginDefaultMessage('Su sesión ha vencido');\n });\n }else{\n setLoaded(true);\n (localStorage.getItem('version') && VERSION_SESSION!==localStorage.getItem('version')) && setLoginDefaultMessage('Se han realizado actualizaciones en la plataforma, para tener una experiencia completa, debes volver a iniciar sesión');\n setEditMode(false);\n localStorage.clear();\n }\n localStorage.setItem(\"idUserPlatform\", Date.parse(new Date()));\n setInterval(() => {\n let date = new Date();\n let formatTime = date.toLocaleTimeString();\n if(formatTime.split(\":\").at(1) === \"00\") {\n // cada hora minuto 0\n registerVisit(\"\", \"\", false, true)\n }\n }, 60000)\n }, []);\n\n useEffect(()=>{\n if(logged){\n setLoaded(false); \n localStorage.getItem('redirect_url');\n if(editMode){\n Utils.Petition.get(\n '/modules',\n (response)=>{\n setModuleList(response.data);\n setLoadedEditMode(true);\n localStorage.setItem('editable','1');\n setLoaded(true);\n }\n );\n }else{\n setLoadedEditMode(false);\n localStorage.setItem('editable','0');\n setLoaded(true);\n }\n }\n }, [editMode, logged]);\n \n return (\n \n \n \n\n \n \n {\n !loaded &&
\n }\n { \n loaded && \n <>\n
} />\n } />\n } />\n \n }\n {\n loaded && !logged &&\n \n \n \n \n }\n {\n loaded && ( !editMode || loadedEditMode ) && logged &&\n \n \n } />\n \n \n \n \n }/>\n \n }\n