\r\n {getFormErrorMessage(props.name)}\r\n
\r\n )\r\n } \r\n \r\n )\r\n} \r\n \r\nexport default FieldButton; \r\n","import React from 'react';\r\n\r\nexport default class ErrorHandler extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { error: null, errorInfo: null };\r\n }\r\n\r\n componentDidCatch(error, errorInfo) {\r\n // Catch errors in any components below and re-render with error message\r\n this.setState({\r\n error,\r\n errorInfo,\r\n });\r\n // You can also log error messages to an error reporting service here\r\n }\r\n\r\n render() {\r\n if (this.state.errorInfo) {\r\n // Error path\r\n return (\r\n\r\n
\r\n );\r\n }\r\n // Normally, just render children\r\n return this.props.children;\r\n }\r\n}\r\n","import React from 'react';\r\n// nodejs library to set properties for components\r\nimport PropTypes from 'prop-types';\r\n// reactstrap components\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport logo from '../../assets/img/MSWLogo.png';\r\n\r\nclass AuthHeader extends React.Component {\r\n render() {\r\n return (\r\n <>\r\n Oh oh.. algo salio mal :( .
\r\n\r\n {this.state.error && this.state.error.toString()}\r\n
\r\n {this.state.errorInfo.componentStack}\r\n
\r\n \r\n {this.state.errorInfo.componentStack}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nAuthHeader.propTypes = {\r\n title: PropTypes.string,\r\n lead: PropTypes.string,\r\n};\r\n\r\nexport default AuthHeader;\r\n","export default __webpack_public_path__ + \"static/media/default-avatar.92e83fe5.png\";","export default __webpack_public_path__ + \"static/media/Sirius_logo.e1ed04f0.png\";","import React, {createContext, useState, useEffect } from 'react';\r\n\r\nexport const AppContext = createContext();\r\n\r\nconst AppContextProvider = (props) => { \r\n\r\n const [forceRefresh, setforceRefresh] = useState(0);\r\n const [viewportRefresh, setViewportRefresh] = useState(null);\r\n\r\n const refreshAlerts = () => {\r\n setforceRefresh(forceRefresh+1);\r\n }\r\n \r\n const refreshViewport = (viewport) => {\r\n setViewportRefresh(viewport);\r\n }\r\n\r\n const getViewport = () => {\r\n const width = window.innerWidth;\r\n let viewport;\r\n if (width < 576) {\r\n viewport = 'xs';\r\n } else if (width < 768) {\r\n viewport = 'sm';\r\n } else if (width < 992) {\r\n viewport = 'md';\r\n } else if (width < 1200) {\r\n viewport = 'lg';\r\n } else {\r\n viewport = 'xl';\r\n }\r\n refreshViewport(viewport);\r\n };\r\n\r\n useEffect(() => { \r\n getViewport();\r\n window.addEventListener('resize', getViewport);\r\n window.addEventListener('orientationchange', getViewport2);\r\n\r\n return () => {\r\n window.removeEventListener('resize', getViewport);\r\n window.removeEventListener('orientationchange', getViewport2);\r\n }\r\n }, []);\r\n\r\n const getViewport2 = () => {\r\n setTimeout(()=> {\r\n\r\n getViewport();\r\n }, 100)\r\n };\r\n\r\n return (\r\n \r\n \r\n 
*/}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n You have {listadoAlertas.length} new notifications\r\n
\r\n \r\n { listadoAlertas.length === 0 ? ( \r\n \r\n ) : (<>)}\r\n
\r\n {listadoAlertas.map((element, index) => { \r\n\r\n if (element.ClaTipoNotificacion === 1) {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n if (element.RedireccionarA !== null && element.RedireccionarA.length > 0){\r\n return (\r\n \r\n {element.TituloNotificacion}\r\n
\r\n \r\n \r\n {element.DescripcionNotificacion}\r\n
\r\n \r\n \r\n { moment(element.FechaNotificacion).format(\"LL\") } \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ) \r\n }\r\n \r\n return (\r\n \r\n {element.TituloNotificacion}\r\n
\r\n \r\n \r\n {element.DescripcionNotificacion}\r\n
\r\n \r\n \r\n { moment(element.FechaNotificacion).format(\"LL\") } \r\n
\r\n \r\n { removeAlert(element)}}>\r\n {t('common:Remove')} \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ) \r\n \r\n \r\n })}\r\n \r\n {element.TituloNotificacion}\r\n
\r\n \r\n \r\n {element.DescripcionNotificacion}\r\n
\r\n \r\n { moment(element.FechaNotificacion).format(\"LL\") } \r\n
\r\n \r\n { removeAlert(element)}}>\r\n {t('common:Remove')} \r\n
\r\n \r\n \r\n
\r\n {t(\"it:NeedHelpFrom\")}
\r\n{t(\"it:SoftwareSupport\")}
\r\n {t(\"it:SoftwareSupportDesc\")}
\r\n \r\n {t(\"it:ITHelpDesk\")}
\r\n {t(\"it:ITHelpDeskDesc\")}
\r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n \r\n VideoPlayer.propTypes = {\r\n url: PropTypes.string.isRequired \r\n };\r\n \r\n export default VideoPlayer;","/* eslint-disable react/no-deprecated */\r\n/* eslint-disable react/jsx-no-bind */\r\n/* eslint-disable react/state-in-constructor */\r\n/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable react/static-property-placement */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\"; \r\nimport { Page } from 'react-pdf'; \r\nimport { Waypoint } from 'react-waypoint';\r\n\r\nconst EXPERIMENTAL_VIRTUALIZED = false;\r\nconst noop = () => {};\r\n\r\nexport default class PDFPage extends React.PureComponent {\r\n \r\n static propTypes = {\r\n fitTo: PropTypes.oneOf([\"page\", \"width\"]),\r\n scale: PropTypes.number,\r\n pageCount: PropTypes.number,\r\n pages: PropTypes.object,\r\n onPageChange: PropTypes.func,\r\n rotation: PropTypes.number\r\n };\r\n\r\n static defaultProps = {\r\n onPageChange: noop\r\n };\r\n\r\n state = {\r\n pages: {}\r\n }; \r\n \r\n handleWaypointEnter = (page, index) => { \r\n this.props.onPageChange(index + 1);\r\n };\r\n\r\n handleOnLoadSuccess = (page) => {\r\n this.setState({\r\n pages: { ...this.state.pages, [page._pageIndex]: page }\r\n });\r\n this.props.onLoadSuccess(page);\r\n }; \r\n\r\n renderPage = ({\r\n index, // Index of row \r\n isScrolling, // The List is currently being scrolled\r\n isVisible, // This row is visible within the List (eg it is not an overscanned row)\r\n key, // Unique key within array of rendered rows\r\n parent, // Reference to the parent List (instance)\r\n style, // Style object to be applied to row (to position it); This must be passed through to the rendered row element.\r\n }) => {\r\n const { pages } = this.state;\r\n return ( \r\n \r\n this.handleOnLoadSuccess(page)}\r\n rotate={this.props.rotation}\r\n /> \r\n
\r\n \r\n );\r\n };\r\n\r\n calculateScale = (page) => {\r\n const { fitTo, scale: globalScale, container } = this.props;\r\n\r\n if (!page || !container) {\r\n return globalScale;\r\n }\r\n\r\n const pageScale = page.scale || 1;\r\n const { clientWidth, clientHeight } = container.current;\r\n\r\n const rotated = page._pageInfo.rotate === 90 || page._pageInfo.rotate === 270;\r\n const pageWidth = rotated ? page.originalHeight : page.originalWidth;\r\n const pageHeight = rotated ? page.originalWidth : page.originalHeight;\r\n const scaleX = clientWidth / pageWidth;\r\n const scaleY = clientHeight / pageHeight;\r\n if (fitTo === \"page\") {\r\n return globalScale * Math.min(scaleX, scaleY);\r\n }\r\n if (fitTo === \"width\") {\r\n return globalScale * scaleX;\r\n }\r\n return globalScale * pageScale;\r\n }; \r\n\r\n render() { \r\n\r\n const { pageCount } = this.props; \r\n\r\n return ( \r\n \r\n {[...Array(this.props.pageCount).keys()].map((index) =>\r\n this.renderPage({\r\n index,\r\n key: `page-${index}`\r\n })\r\n )} \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable react/button-has-type */\r\nimport React from 'react';\r\nimport './PDFViewer.scss'; \r\nimport { useTranslation } from 'react-i18next'; \r\n\r\nconst FIT_LABELS = {\r\n page: 'Original Size',\r\n width: 'Original Size'\r\n};\r\nconst noop = () => {};\r\nconst nextFit = fitTo => (fitTo === 'page' ? 'width' : 'page');\r\n \r\n\r\nconst PDFToolbar = ({ fitTo, onZoomToFit = noop, onZoomIn, onZoomOut, onDownloadDocument, onRotateLeft, onRotateRight, copyLink, downloadFile}) => {\r\n \r\n const { t } = useTranslation(['common']);\r\n\r\n return (\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\n\r\nexport default PDFToolbar;","import React, { useState, useRef } from 'react'; \r\nimport { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack'; \r\nimport PDFPage from './PDFPage';\r\nimport PDFToolbar from './PDFToolbar'; \r\nimport { Dialog } from 'primereact/dialog'; \r\nimport pdfjsWorker from \"pdfjs-dist/build/pdf.worker.entry\";\r\nimport printJS from 'print-js'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, CardHeader} from 'reactstrap';\r\n\r\nexport default function PDFViewer(props) {\r\n \r\n const { t } = useTranslation(['common']);\r\n\r\n pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; // `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\r\n\r\n const [numPages, setNumPages] = useState(null);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [rotation, setRotation] = useState(0);\r\n \r\n const PDFcontainer = useRef(null);\r\n\r\n const [fitTo, setFitTo] = useState('page');\r\n const [scale, setScale] = useState(1); \r\n\r\n function onDocumentLoadSuccess({ numPages }) {\r\n setNumPages(numPages);\r\n setPageNumber(1); \r\n }\r\n\r\n function onPageChange(pageNumber) {\r\n setPageNumber(pageNumber); \r\n }\r\n \r\n function changePage(offset) {\r\n setPageNumber(prevPageNumber => prevPageNumber + offset);\r\n }\r\n \r\n function previousPage() {\r\n changePage(-1);\r\n }\r\n \r\n function nextPage() {\r\n changePage(1);\r\n } \r\n\r\n function onZoomToFit(fitTo) {\r\n setScale(1);\r\n setFitTo(fitTo); \r\n }\r\n\r\n function onRotateLeft() {\r\n setRotation(rotation === 0 ? 270 : rotation - 90);\r\n console.log(rotation);\r\n }\r\n\r\n function onRotateRight() {\r\n setRotation(rotation === 270 ? 0 : rotation + 90);\r\n console.log(rotation);\r\n }\r\n \r\n function onDownloadDocument() {\r\n if (file.includes('.')) {\r\n \r\n printJS({printable:file, type:'pdf', showModal:true})\r\n }\r\n else {\r\n let b64File = file;\r\n\r\n const searchString = 'base64,';\r\n if (file.search(searchString) !== -1) {\r\n b64File = file.split(searchString).pop();\r\n }\r\n\r\n printJS({printable: b64File, type: 'pdf', base64: true, showModal: true});\r\n }\r\n }\r\n \r\n\r\n function onLoadSuccess(page) { \r\n const pageScale = PDFcontainer.current.clientWidth / page.originalWidth\r\n\r\n \r\n if (PDFcontainer.current.clientWidth < 350) {\r\n // si es un monitor chico, escalamos la imagen por default...\r\n setScale(pageScale);\r\n } \r\n \r\n }\r\n \r\n const renderHeader = () => {\r\n return (\r\n <>\r\n\r\n \r\n\r\n\r\n \r\n onZoomToFit(nextFit(fitTo))}\r\n title={FIT_LABELS[nextFit(fitTo)]}\r\n >\r\n ◱\r\n {FIT_LABELS[nextFit(fitTo)]}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {copyLink !== undefined && copyLink !== null ? (\r\n <>\r\n \r\n \r\n \r\n ) : <>}\r\n {downloadFile !== undefined && downloadFile !== null ? (\r\n <>\r\n \r\n \r\n \r\n ) : <>}\r\n
\r\n \r\n { numPages && (\r\n
\r\n \r\n \r\n );\r\n }\r\n\r\n\r\n const { file } = props;\r\n /*\r\n \r\n \r\n */\r\n // https://codesandbox.io/s/62yw483vpw?file=/src/PageList.js\r\n return (\r\n <>\r\n {props.ShowDialog === false ?\r\n (\r\n \r\n {t('common:Page')} {pageNumber} {t('common:Of')} {numPages}\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n props.FileType === 1 ?\r\n (\r\n <>\r\n
\r\n \r\n \r\n
\r\n )\r\n :\r\n (<>)\r\n }\r\n \r\n \r\n
\r\n \r\n {props.FileName} \r\n
\r\n \r\n {props.FileDescription} \r\n
\r\n { onClickViewDetail(props) }}> \r\n View\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n })}\r\n \r\n \r\n © {new Date().getFullYear()}. Made for You by DeAcero USA Digital Solutions 
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Calendar;\r\n","import React from 'react';\r\n// react library for routing\r\nimport { NavLink as NavLinkRRD, Link, useHistory } from 'react-router-dom';\r\n// nodejs library that concatenates classes\r\nimport classnames from 'classnames';\r\n// nodejs library to set properties for components\r\nimport { PropTypes } from 'prop-types';\r\n// react library that creates nice scrollbar on windows devices\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport { Collapse, NavbarBrand, Navbar, NavItem, NavLink, Nav, Button, Media, FormGroup, Input, InputGroup } from 'reactstrap';\r\nimport { setSessionData,tracker, getSessionItem, logOut } from '../../utils/utils';\r\nimport logo from '../../assets/img/MSWLogo35-small.png';\r\nimport logoSmall from '../../assets/img/MSW.png';\r\nimport team4 from '../../assets/img/default-avatar.png'; \r\n// reactstrap components\r\n\r\nclass Sidebar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n collapseOpen: false,\r\n sidenavOpen: true,\r\n ...this.getCollapseStates(props.routes),\r\n filteredRoutes:null\r\n };\r\n \r\n this.keypressFilter = this.keypressFilter.bind(this);\r\n this.onLogService = this.onLogService.bind(this);\r\n }\r\n\r\n \r\n // verifies if routeName is the one active (in browser input)\r\n activeRoute = (routeName) =>\r\n this.props.location.pathname.indexOf(routeName) > -1 ? 'active' : '';\r\n\r\n // makes the sidenav normal on hover (actually when mouse enters on it)\r\n onMouseEnterSidenav = () => {\r\n if (!document.body.classList.contains('g-sidenav-pinned')) {\r\n document.body.classList.add('g-sidenav-show');\r\n }\r\n };\r\n\r\n // makes the sidenav mini on hover (actually when mouse leaves from it)\r\n onMouseLeaveSidenav = () => {\r\n if (!document.body.classList.contains('g-sidenav-pinned')) {\r\n document.body.classList.remove('g-sidenav-show');\r\n }\r\n };\r\n\r\n \r\n // toggles collapse between opened and closed (true/false)\r\n toggleCollapse = () => {\r\n this.setState({\r\n collapseOpen: !this.state.collapseOpen,\r\n });\r\n };\r\n\r\n // closes the collapse\r\n closeCollapse = () => {\r\n this.setState({\r\n collapseOpen: false,\r\n });\r\n };\r\n\r\n // this creates the intial state of this component based on the collapse routes\r\n // that it gets through this.props.routes\r\n getCollapseStates = (routes) => {\r\n let initialState = {}; \r\n routes.map((prop, key) => {\r\n if (prop.collapse) {\r\n initialState = {\r\n [prop.state]: this.getCollapseInitialState(prop.views),\r\n ...this.getCollapseStates(prop.views),\r\n ...initialState,\r\n };\r\n }\r\n return null;\r\n });\r\n return initialState;\r\n };\r\n\r\n // this verifies if any of the collapses should be default opened on a rerender of this component\r\n // for example, on the refresh of the page,\r\n // while on the src/views/forms/RegularForms.js - route /admin/regular-forms\r\n getCollapseInitialState(routes) {\r\n for (let i = 0; i < routes.length; i++) {\r\n if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {\r\n return true;\r\n }\r\n if (window.location.href.indexOf(routes[i].path) !== -1) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n // this is used on mobile devices, when a user navigates\r\n // the sidebar will autoclose\r\n closeSidenav = () => {\r\n if (window.innerWidth < 1200) {\r\n this.props.toggleSidenav();\r\n }\r\n };\r\n\r\n homeScreen = () => {\r\n console.log('click....')\r\n history.push({\r\n pathname: `./HomeHR` \r\n });\r\n }\r\n\r\n // this function creates the links and collapses that appear in the sidebar (left menu)\r\n createLinks = (routes) => \r\n routes.map((prop, key) => {\r\n if (prop.redirect) {\r\n return null;\r\n }\r\n if (prop.collapse) {\r\n return (\r\n \r\n \r\n {navigator.platform.indexOf('Win') > -1 ? (\r\n {scrollBarInner} \r\n ) : (\r\n scrollBarInner\r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nSidebar.defaultProps = {\r\n routes: [{}],\r\n toggleSidenav: () => {},\r\n sidenavOpen: false,\r\n rtlActive: false,\r\n};\r\n\r\nSidebar.propTypes = {\r\n // function used to make sidenav mini or normal\r\n toggleSidenav: PropTypes.func,\r\n // prop to know if the sidenav is mini or normal\r\n sidenavOpen: PropTypes.bool,\r\n // links that will be displayed inside the component\r\n routes: PropTypes.arrayOf(PropTypes.object),\r\n // logo\r\n logo: PropTypes.shape({\r\n // innerLink is for links that will direct the user within the app\r\n // it will be rendered as ... tag\r\n innerLink: PropTypes.string,\r\n // outterLink is for links that will direct the user outside the app\r\n // it will be rendered as simple ... tag\r\n outterLink: PropTypes.string,\r\n // the image src of the logo\r\n imgSrc: PropTypes.string.isRequired,\r\n // the alt for the img\r\n imgAlt: PropTypes.string.isRequired,\r\n }),\r\n // rtl active, this will make the sidebar to stay on the right side\r\n rtlActive: PropTypes.bool,\r\n};\r\n\r\nexport default Sidebar;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAAAoCAYAAADT7zckAAAACXBIWXMAAAfWAAAH1gE5iKMEAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAHRNJREFUeJztnXl0W9W1/z/7XHnMHMeSkzCFEgjEkuMkZILQpoXackIohZpHoLRQSktLC5ShD0ofUAhNKaWPRwuUR0uB0sdMGxLLIUCYEyAhkWQgDCEMGSQ5ceY4tqS7f3/IkmVbsmUTSPtb/q7ltXzP3efsfa/uvvecPR1RVXoLqa21nO/smCrGmqWqkxQdZ5AyhYFAHGQHaARoQFiNzZJw0BfoNaN+9OMzoKSi5iCH6sPhgO+4/TnuyIk1pXZM3xQY0Nu+NuzOy8+buHHlwi3d0ZVVVJWrmucFTF9kVNWrw8H6uxy96TS6/KRDYibvx070bMSMSr4cBCHtNZEHWgi4ADfKmQg3uzze9aD3OvLz7+zp4vrRj/2BwnjUxIxj4P4e147zK+Cg3n8aAeQ3uTz/aptbEEr6xoP1g/eZeyHHt8PIiTWlLo/3TzHjeB/0SmBUH5iOAflVrDX6icvtvbl03CmD+jBGP/pxQDHKPedoVM/vY/d1Q5r5756InB5vDUJVH3mgIle+/35dC0CPX/AyT/U8RW4Hhmc4vU9hhcBbCB+Lyg5V26jIUIHDgAqgEihI61OEcIXJbz2r1F19QWOwfnFfL6Qf/fiiETfxWaI82ROdggDfIE3HROTSpOJlg8ya5XBSeHPHRh5Aac5FPhG2RgK+x5PHWRVcJk/Oc7aO+CPI9zvLriKLxda/FO/e51u/ftm+7hiWjK0ZnFess1U5H/hq2qlRRuQpp7v6psajB1+rjzwSz+UC+tGPA4mw33cHcEdPdG0fxtPbW9QX8vue6qmfs6no+6Dj05qeDPt95/RFVgDJZGQbPXlucbw1+qhCTadTTwvm8lBgcbAvzEaWe4+1LX6P0tno8bfIuEHf7VfyfuxPJGxGjqfCAV/FF8nXWT5roJjCtcDotqZWW/A0+n3vdtevdNwpg0x+63tAWaqfMe7GNYvf66ssXb7gbV/ux0C8ac27Eflx2F93f18ZAWxu8L0hIjOdHu8PUf097VP3s51rd1kicpb2xazfj378C8GYgmu0XblBua0x0L1yA1j5Lb9QpCyt6Q+5KLfL430RZFiCOZdh67xYs/zUUWy/0MXI1jYtT1fuDcbotM+q3Emoqob9dXeKyFdAwmmnznS6vb/cHzz60Y8DBWd59RGKXNLeIuFoQWx+T/1GVnoPU+TiVC/YlheN3pQLz5jIPNAjbJVzJRYvAE7IK+YnqLg7KHiZp3pepzX3Bitmjt+8pv6tXBj1BiF/3QqR+IkoaS4DvWL05Lkj9jevfvTji4IxchtpRmVF/7Np5dIdPfWL27oAKEwe2yrXbnjnma258Nzqr9sAqCgb2jzWCrZCmpts9OS5I9qs5UnsNrZUbXp78ce5MOkLQv4lDWLMHKAV2GtsndvvI+/HvyvKKmpOTrdbCbKqMTitx5lvWUXNNFGpTWt6t7EgcldveCs05MdborY4dqL6cnSv+QPQkDKyuTzePwEXtPfQc8LB+gd6w6SvcLmrfyjGvBfy1z0HEKg4zunxvxL5Inj34/9ffJFGtvLy2vxGsysIHNnWpCJmesi/+LXu+omION3VrwDT05qDQBT0cJChif/ZCqwHlqvo0sajBi/NxSgtqpoM6VsH5Le1Px0O+PrsaP8sWD3xuBPE6ENxWo+etHJlj1Ob0eUnHRI31pFxoanRX/9mJhqnZ/YJhnj+PhyrtgcWbRvhqRpnsMYARAJ1PoCyitlT0XiH4Bujjo2bG459V/Va+7Nc01DPnGH5GjvJGI5QJaZCoHF4yzO6bFksnc7l8U4XmKboQFWzUfNi9Y1vPr2pA43b6xFRp2XH39vYsPST9HMjy2uOUWOPimOijYG6F0a55xwdE/uwbHKJxmPh4JKl3d0PKz9/TedZVamnapKFDBPDzs1r6l8XESl1e6uz3gBDKLKmbnVSPkTXhfxL1ncYc8LsIy07fghi7JC/7jln5dfHEncc0d19TcqaDV+kgpdVVF+tKulr7V2IXBQJTP1bd89PmbvmDBV9qA8sNyjyhwG7mm/rzlXtAMhT+yJFksqtIvZlmYhLK6onWspwsc2mzQ11b/dGmoTrrXWGqkSyxaWvnjL9RDGyECiyyP8+cEtP48aN4zSFW40SK6uomRny161IP+/0eL8rcK8iFNmxrwLLDPIDQZOGEAFQte8EqewwtsRxuldsLPPUXB8K1P1vb643CZe7+ocFIjcjMijpHxAF55ai90vds+c1BhevLKmoOciBPgQclwr+FUViVovL7f11pKH+V9oeF/xLRU6PWY6PXe4Tp4aDz6QMlXFLfyYq3zNoE1BiS/xCgZ9kFU7MbmCQhbkA9FIAETGqqsn7EWuNvjl68tyZG1cu3JvqhrlF4Su2zRvAlPHjv5XXyK66rHzi8jhwuhouV+RcVEIl7qopW4NLPk2NaccvVOQSVFuBAmKO74ro1T3cXunh/BeCERNOHm2pdJZ1EKr3Od0rLhk5ofqHm9fUv56pr4r+oo9sDxJ0wd7BhRe6Jnh/EF7jW5KJyEhtraXI2e0MZXHIv6QhI7HKbxVZahtdXeaumpOrJKMnzy2OtUafUmQphmuz0YktvwCK2g6/nev4bXCo6oMlY2sGJxtc7povCfxPL8eJCWwjMS0CGK3o3WUe7697OQ5lnprvI3InkJwZtE+pRIvyC6yPhlWeOtShuixDbABAAcJ1Lnd1V2uqciiS98TYsTUFGfolsUdgW9v1pCKo2tukKYfLmBhrjd4nIrkq077k+Ck+ors60ZQ5xPyzrKIqa7KGMexNkz31heow7r8IrHhsigqvg27PcLrStuUFl9t7doZzKHp3hmYbeFvgEZQ7ELkL4QkSU/TOAxyKTZ2rwntdpt/IONfumkKaz06UP+dwTfkq5vFclDyp3HSMYssIUUk3SHiCU2YenoMs6TjcUaT/Awl/PmI/SLty5YoXQwHf8Eh+4wBUqhA+BlD4z7KKmmm5DjKs8tShiv627XCvwrki9pBWq3CYwrkqOm/jyoVb8u2Wa4DkVHShiH14qT2oQNQ+OelGVLhy5ITq8RnYzNhZaGd6QAAIBXxXhQK+4aGAbzgi97Y170u2hQN1h+Z4Oac73VXX5ESp3J4cv52P79wMlJWKuV/k+oz5ECF/3fyU7ErK+Bsu2edMtf+LIBz0PRnx+74aCS4ZDswA+TsJw3EShQgPuDzVV3bu2xicfgfgbzsMIVxpO+IHhwO+8aGA74xw0PfjsL/uwrDfd1o44DvcFsaB3AykvzQNyrWl5d7fdx7fiOistOPm4l3N9TleV76Keaw7Je+NcgO0OGILSby9ALDj9ok99dGu07TvuDw1ZzlbSueDTO1Aa5mcp3S6cmU0HKx7Gtuel2pTzfSgZkR+vGU2MKSt5/WRgO+vIf+SPdtWP7k9EvD9NeKvf0lEBNWz2rqsL96174yQf8n6hoZHWkPBJYtE48mkBqMqZ2VgAyLnZHpw9j/k+rIK73/0RKWieaXjThmU/Bs9eW5xdmK+6XS/dt3+lPJAQlU1HPAtDwfqzrLUmiDIqo4UsqDMXXNGxz7X2iLyS4RbROwjwn7fbzvbXdLR6Pe9Gw7U/RyNjkXl8fRzInpxWUV1h6WCUWRSipmwoqfY8k4oUDGPutw1X+98Ioty7xXkj9kGm/Laa1tpf5uhwoReyAKwoa3nXQhJO0LazdJer9nCwSWvpvnqy3Ptp+i45P/GNosy0YyadHIJ7WGJSzvf+/CI1nraptaqdP6Cb2p/gOTXZRXeubnK1kv4QT4BRJU/l3qqJnVHLMglJr91Z/Iv3hpd1ZWGbSgvJ470mrIK75mfi+QHEJuCi94J50emI6R7okRF/1xa4T0qnTbkr3sq7PddEfIv2ZPr+OHgM+FwsO50Eekws1KV650TvMcnjx0oKWZGybj27gGFiC4sdVeflswMa1PuhXRU7mYR5iZdYd0gSCIDDUVzVigAY+s5tpFFJApPAGwQ4UpV/p44lD6m8NKhn6vCez+aForYWQ6HdPjSRU08oxXVtmPtLxyRrjSlpcrWXdkssC1R4RsO5Q2gTJW/CX36/XpCoxrOFZuXgWKD+SfQnXcjDqS8A5q29k9ri4mxT1O13gA9RJU/C7Jy/4t+YKErV0altvZc19pdBQpJP/cAsfktsF9eyCF/3XyX2+tAuK6tyYGtd8usWR5dtixmgJFp9F0X8bmhwIg8Xuqunp2m3F9LO98s6NyQ3/dsjyOJpGQwUNojvbZ/ldXSt0Q0Ge4XU9F5atvpkXK9/oKXVcyeSpscgq5NDMMMEi+vjH+t0Xghwgep61DTZYYDEFrt25KaHdh8rby8Nj/9vPOdHV8laXRUusQyt0UwfZOEEg2ioy91vyGypm41yrcBJWGvOSYrsXJrOOArTPvLOAsL+ZdEsO25wB4S1zjzcxD9gEMfeSRetGvfd0BfBD4EPhRhvLN8dm9np1kRaaj/lYo+nBofKXBtLZgNCTdZe8WLrtbO3qDAiDwabY02CByb1t4swskhf/2zAK9PnVrSNhXPCFV2pWnh0N4KEfLX31NWUT0AJBz217/kcledlDZ4rxTc6Zl9gmAnjVPEMQkjoNoXgslaKaR40JAtduu+xbHW6B5ggAi/KqvwfhQOTFvEt94S19qdc+LoBlVdVeapeUjRixAd2yi77z3o6BN/unHts02l7pqZItY9CZ1CbZPZVxoO+Ja7KmouQPW+3lxbbxEO+p5werzzBXIztuUyZkO93+X2noPwGP8iLq/PA21Lry9/XuO3uVAz2kcckDb91NyNUG1YB3wp7bioi3Kjc5PK7Z887fh8rO8D38lJ8Jx+dCN0nEET8tfflsv4WTDd5fGuA0YIpFxuqN7ZGPS9ABAOLlmawzjNrgrv9Sg3A0NU+afTvWI3a3EoUmiQdSVjaybmFcdvQM2pwGjQedG8vHlOd/VesNuNU8qdjYHMQTwAYX/d/U5PdaV0SHLY/2gM1v+Xy119lMK3shIJF7g83o7nlbpw0PfjTOThoO8Jl6fmRtADmmj0xpQpZYUUZDcI/htir4lucZBYTzkBVLRXX0yFGwUmA5l+vIRyB+qfgYRyK8anwtPdjWnQwWnq+llmFH1FEZByzwlsU5WbIg31v+vtQJFA/S1Od1UhyDUkogRTX32B4XnFHBPyL1nhrPz6LIlbjwPuttPJBy2u6O2NI1qu6IlX47jBl7vW7joyQw7/foOqqrN81nliCselydoZQ0h5D5IQV3fjRoK+a9teHLXd0X2eyLMdz8WJH32g+H8eKLTNAgfQSJuCi3JwbweJBOt/4iyvFoQfpTVnVG7SlwPZoIxJfbeFrO6CJGyjT4kmfNWD91oZjD/xgGISD47GEoUqjLlfVDvGCKv9cxWTesGJEhcjm0bEB77Z0PBIK31A29TphlHHzL4/ZtmngBxuxN5ni7zTotbC7f5F2wAiq59+X2prK0e8s7NaYLoRGawqn9iWLMyQD3yrwiMk1q7tvB55JD7UM+fsfOInGrSLvLbG77HEvGAjsc7n1Db3G8t+PU3mtPth0lN6iTQs211SUVNjqU43QhPAW2+Nj7k8K7JawtXmUwCx9U7b4DPS0fDW9uL4HqbwMRHtalRUfVCMJGYwzz+/34uCrKmcNRSLo3qm/PeCwjQp9VQ9JCpJ39xL4YDvhGwdXB7vs6RZxhXOjQR8f03EIlfdajAzEz+XfXVyGhuYPH2qjTxLW4lZFZ6ofOPV07LxWDN5xmpIusfkngkrX+lcMqof/cgJucai+4+dUalKhyWQ5OdRdv55hP73L2g0SuERXyKvpIQ9a/wMm+1l6xP/YIB7PIih5ZNPGTR9Ktt8Sxg4aSKxpiZi27czeObxNC1cxPC5c9j50ss4hg5l6NcToR1bHnoULMPwk2dDPE7TIh+x7dsZ4HEzZNaX2bPGz44XXgKg5NS57Am+xb4P1iGWRenZiXfpjmeX0bJxE86zz6Tx7w8zovY0tjz+JNqaCMJU5FODypq065rcXfhgNqiqRgL1l4YCdZNDAd+x6WtUG5lJjvWjX586tQTwpG5ywgXUj358rrDjXQuKDvnyCQyrOokhMxMRxIWHHsKY3/6aYvd4hlUn7LZFRx3FmFt/Q/ExRzPkK4nv4sBJlRSMOYzY9h2UnnE61uBBjPjWN4lt30HBmMMo/NLh7Fv3IfHmveSNKGHgpEqwLFznJcxSI3/8A0xBPtHGRgCswYMoPfMMnG1KLZbF8Dk1RENhRl/xM1AFYzjk2msoOOzQlHIDCDrcoaJPi0oyzrpIbVMFPPE53MceUWBbp2hajnoc7clnngj0t6MXqBoHIksigcUvdqYZVnnq0AK7ObWEsDHvRfx1j3WmGz15bnE82ppmqNKFmeLySyu8R1loahbSYoru2Lb6yS5xyGUV3q/ZaF7EX59rdGAHyKxZDmdT4aU2+my2TDkAV4X3Rxo3T0QaFoec7upaNXyQiX7s2JqCHUVcAmCUj0bowCd7s/woq6gao7Z8Mxys/53LXf3tuJX3nBWLHybGPjQUqP97Jn67iu3LQG/LFMThcns9KqnqQYFs2WEHz6gtiu7ZeWmqQa2n+loXMBPEsg3aMWJ2+Mmz2fHiyww/5WS2P/c8ANuWLOWgK35GbEf7SnBb/VJGX/kzmt/ttJJSZfuzz3PQlZexY9kLCUUEHEMGk+csTSli0VFHMqC8nA8vSwQjfjr/ZlznnUPZBefz4SWXM6zqJJrfe5+BEysxxcUQi5HnLGXUxRcRujsRVd74fw9zzFNP8O5/dEzfELBM24PwUapR+N5nvmN9hCrnpf6H4MRVr37QHT2Aw47dLUiNEQaL2BkDYwZGm41tmwGqcpGqTBElY4JGPNoyUFXmK2a4bZsBdtyRseqssRmvKpfYthlg22aAxqMZrf2q1IjKN3q6hmwYsaWgCmW+2HJdt4TK1cboooNn1BYJcp5oZn94ExQIusDAQSr2pY1m51KprbVylScvLjsQ+Y3L7fUgcpcVj5+JpT9TlYw+3a1DooWqMt+OOzLmAygyWdCLRCgV9IFERaGusFv3DVCV+apSYttmgG20Vxt29ASj0sFt6xgyBFTZ+dIroIo1eDB28z6a3/+AT2+6mWgk8XWN79nD3oa32Pi7/ya2tamtbS+6L2FiaFrso7h8PE2LEu8t3deCKS5m0NQp5JWOQKMxti9ZyuY7/kTREQlnVMmpcyk8fAz71n8EwMCJlWx7+hm2P/Mcg6Yei6LsfmMVn9xwEwWHHpIYtzVK89r3iG3r+I1R2NJ2o+SBpJtCwVvmme3O8obcTMKZnuiVk99ct4O099EOddhSCEw6fibSnlElSq7FJtYpzFTVNdia0UL/aUN9E/CLMo/364o8Gg7UPdi9yDrICPmhYN2abqgsIwxG7A+2++s+l8wmY+Q8VBaI6GWlx1SPbHy7fnM2WkVHte7edTfSs2vRtmW+sXSXqmka8e7OCiDr7CAdnzbUN7k83tcQbgAU9BSUI43qH3K/qs6Q7YguRfH2ZG0HHWRE8kNr6lb3nV9XGIduTA8qjO3YwYcXJyKdd72eWCXufHV56vwefyLbeVtahubOl14BoPHB/0u1RcNh3vlGu8dw56vLO4wTbdzCxls7Jjtuuq3jrfzoqoT3cOeLL6fa1l/+nwnZlrfbiZPydsJGB4BI/A+q5goSNaEE7NtFZFbnCqfhgC9jylt3mLBy+T3APd0SiRidNO3mNLf3Titqdd8nKVN+42Wlra7HROwFiPyDXsSLZ4MKr6qyt1sa2KNqv2TZNH5WfpkwevLcEShzRHSDKk3GMmfRXX68chHCLSR2nVnY0/hxS4eYGFae7cipoH4SIlKnqjciXA9cCbSGCre83FO/7LAPwpY/KtrqyM//U3eUCstV7ZzjtXNF+YoV4TWTZ6wHxuzvsQ8ohOUOSIQNllV471blpwAKX3Z6vN8G9ksl1Z7gnzztYlVJpWIK3OYOvJTTV9HZWnqfYh+BylBE1+0PeUT1DFWJjSyv3rK5oX5ZRhoYqsjZcQGX+8S30wsvdCKsdrq9CwVWhYO+63OVIdoSnSfCB7bKJgNLVfRculFwW2RrnprZcYkvz0aTEsnY90rMUSnY920KLnonV5kA4tg+g9xo2dbDcYlXAq26cmW0x47ZoNJgxc3ZcYcdtFuiU4Dns8qN1CpEyypqtuSQ09BLMbgO1ewhuP+GEDGPp9Yy0b3yS0eRfotkbLrqXaWeqrcaA0u6ZAPtT6yZMmMGKgvSmj6O0boga4dOaLUKf5Qfb/mKiubl5ed1uw2SbbjUxsoabz8iPmT7FtlxMiTyS6KO/Iw1qVXNq4bYvOR8wyoozrhUsdS6x9boMgHEkl7VmBPslah5PhKsCzjLZw3EFHrHjJlVmCnbT0XPjKrV0BhctG2Ue870FmNnlKdpSKS5tLW0NuHjj7+XrbBHd9gSWLLaWV79zU3BRe+MLK+5SsRkTeDZNii2x9XkOGVwi2Z8WRsTXyZxWb/p7cUfuzzeKhs74/JiE5t2uLSk7XeBKFafNwLIhso3Xv1CPmZfNDrsbOKqqD4NlUdJljGCT0VlVjhYt1++jJ3x5qTpRxuRl4CStiYbsasnvLEil1DQfvSjW/S2JpvLXXWSijWxvUWDkYAveymqHFFWUTVAMT9SlXYPUTN3bn2/budnHRtA5HpT6l7+IzApd7Rl6cObV/s+6uAbCPvrH1c0FcctcDCiL5R5ZmcLS+wzVk88broR8yLtyo3A/H7l7seBglFro6A3CLog8cc/yiq8X+u5Z3aIXG9Qcy/Kze3j6oz9pdwALs+KGwW5PU3us0ND922ADNsHN+ZvuRL0H2lNoxV7RbaaUr2GiKyefNxPxegy0PZNDkT/VrFqedZ6bf3ox+eNzQ11byOkJyrlqepjmQqa5IKxY2sKnO4V93dKztkpWJdm7dQLtJVcvlGVq9KaY2r0wmTF3i4KritXRkvtwWeoSHoVEgO9W0NmwpuTjp+2ZvL0VyQxS0jzRcuDcY2eR/++ZP04wIjkNV4NpBnwZCiidS5PzX8dPKO2KGvHTnC5vZ5dRfoykF5qS1G+Gwos+jCdtszt/Z7L4713WOWpOSd7jS4/6RCnu2qxiHSsyqpyVWSNL+XVyLi7KIDU1lqutTvnK3KJrZqq1rJ64nEnYOnlIPdZrbvrPX5/t26Ld48/flBzc3yuipwnXWuzKSo3TXjz1V/2K3c/9jf6Whd9WOWpQ/Pj+16ka8bcRhG5xYpHn+hckx4SOlO6ds9xgn0BcAYdN/dURX8SCdR3KFl28Izaotbdu9eCHgI0ifAnO65/iTTUZwzyck6oqTQ25yl6Hu1Zh20CcEvY7+uQeZhVwZMYMeHk0VvWPLURUpsSLKY9K6wF4TVU3kLsj8Q22wFUtESVQwXcCFPIvA/5Rls5f+KqV/sUxtmPfvSEz7LxQcnYmsGOIn2ALKWVBNYC60AiKupAGSUwUWFYBvJmFS6M+H1dinKUeaoXKPLzDBw+ETSopOIsyoAKOlZgSiIuIteG/HVdNjnsMeQvqdyrJp8w0jL6BB1TPgtQTgA9ARU0reRZN1W096Dyx6IiufGol18+EPne/ehHj9j6ft1OEfmGy1N1lSY2NeiQMKUwDhiXCOhLtWWCH+WcSCDzZh9AAIjQlrKdxuEQhUNyEPVDY+v5mxt8GeM1MtakzoRJK1/c7HDY4wVuIC12vRdYh+p1ajvGTFj1ys/7lbsf/+pQVQ35629S2xwhcDtpGzD0DGlA9ZxIcNrEbDv5AIQC9X9vwRqncGOn7bR7woeqXFxqDzo6WzAW5DBFzwb/sTMq1eZEhErALTCCthpqiuwG3aAi76K8YUSfq1i5fE3/OrsfXyT2995kZRVVA1A50VaZI8J4kNGgLhKbHGwFfQeV12yxF/UlQKy8vDZ/i7W7SlW/AkwDOajN02SDNCn6ISqvqvD0lqDvxc6h5Jnw/wBZH8Bh6SKumAAAAABJRU5ErkJggg==\"","import React from 'react';\r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n CardImg,\r\n CardImgOverlay,\r\n CardTitle,\r\n CardText,\r\n ListGroupItem,\r\n ListGroup,\r\n Row,\r\n Col\r\n } from \"reactstrap\";\r\n import { NavLink as NavLinkRRD, Link, Switch } from 'react-router-dom';\r\n import 'assets/css/CardFormulario.css';\r\n// the hook\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst CardFormulario = ({ formulario, isAvailableCheckList,claUbicacion }) => {\r\n const { t, i18n } = useTranslation(['formulario','common']);\r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n {formulario.NomFormulario} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n ); \r\n};\r\n\r\nexport default CardFormulario;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\n\r\nfunction PageContent (props) { \r\n return ( \r\n <> \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n)\r\n }\r\n\r\n return (\r\n <> \r\n \r\n {/* \r\n {this.state.Formularios.map((formulario) => (\r\n
\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Formularios; ","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport { SelectButton } from 'primereact/selectbutton'; \r\n\r\nconst FieldSelectButton = (props) => {\r\n \r\n const onChange = (value) => { \r\n if (props.onChange !== null){\r\n props.onChange(value);\r\n } \r\n } \r\n\r\n const isFormFieldInValid = (name) => !!(typeof(props.errors) !== 'undefined' && props.errors !== null && props.errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {props.errors[name].message};\r\n };\r\n\r\n return ( \r\n <> \r\n \r\n\r\n \r\n setShowKeyboard(!ShowKeyboard)} onChange={(text) => onChangekeyboard(text)} />)\r\n :\r\n (<>)\r\n } \r\n \r\n )\r\n }\r\n\r\n if(props.isInputGroup){\r\n return ( \r\n <>\r\n setShowKeyboard(!ShowKeyboard)} onChange={(text) => onChangekeyboard(text)} />)\r\n :\r\n (<>)\r\n } \r\n \r\n )\r\n }\r\n\r\n\r\n if(props.isInputGroup){\r\n return ( \r\n <> \r\n 30 : false) : false} \r\n disabled={props.disabled}\r\n resetFilterOnHide={true}\r\n optionDisabled={props.optionDisabled}\r\n />\r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n \r\n );\r\n }\r\n return ( \r\n <> \r\n \r\n 30 : false) : false} \r\n showClear\r\n resetFilterOnHide={true}\r\n disabled={props.disabled}\r\n optionDisabled={props.optionDisabled}\r\n />\r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n )\r\n} \r\n \r\nexport default FieldDropdown; \r\n","import React, { useRef, useState, useEffect, useContext } from 'react';\r\nimport WebCam from 'react-webcam'\r\nimport './CameraComponent.scss'; // Import your CSS file\r\n// import { RTLContext } from '../../../App.js';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { Image } from 'primereact/image';\r\nimport FieldButton from '../FieldButton/FieldButton';\r\nimport { useTranslation } from 'react-i18next';\r\nimport imageCompression from 'browser-image-compression';\r\nimport { showNotify } from 'utils/utils';\r\n\r\nconst CameraComponent = ({\r\n show,\r\n onAcceptPhoto,\r\n onHide,\r\n allowUploadImageFromFile \r\n}) => {\r\n const { t } = useTranslation(['common']);\r\n // const { toastRef } = useContext(RTLContext);\r\n const [cameraType, setCameraType] = useState('environment'); // 'user' is front camera, 'environment' is rear camera\r\n const [ImageURL, setImageURL] = useState(null);\r\n const webCamRef = useRef(null);\r\n const [IsCameraAccessDenied, setIsCameraAccessDenied] = useState(false);\r\n const allowedExtensions = ['jpg', 'png', 'jpeg'];\r\n\r\n useEffect(() => {\r\n async function validateCameraAccess () {\r\n try {\r\n const cameraPermission = await navigator.permissions.query({ name: 'camera' });\r\n\r\n console.log('cameraPermission', cameraPermission);\r\n\r\n if (show){\r\n if (cameraPermission.state === 'denied') {\r\n setIsCameraAccessDenied(true);\r\n }\r\n }\r\n\r\n } catch (error) {\r\n console.error('Error fetching data:', error);\r\n }\r\n }\r\n\r\n validateCameraAccess ();\r\n\r\n }, [show]); // Empty dependency array to run once when the component mounts\r\n\r\n\r\n const toggleCamera = () => {\r\n setCameraType((prevCameraType) =>\r\n prevCameraType === 'user' ? 'environment' : 'user'\r\n );\r\n };\r\n\r\n const compressImage = async (imageFile, callback) => {\r\n try {\r\n const options = {\r\n maxSizeMB: 1, \r\n useWebWorker: true,\r\n };\r\n const compressedFile = await imageCompression(imageFile, options);\r\n const compressedBase64 = await imageCompression.getDataUrlFromFile(compressedFile);\r\n callback(compressedBase64);\r\n } catch (error) { \r\n callback(imageFile);\r\n console.error('Error compressing image:', error);\r\n }\r\n };\r\n\r\n const capture = async() => {\r\n const cameraPermission = await navigator.permissions.query({ name: 'camera' });\r\n\r\n if (show){\r\n if (cameraPermission.state === 'denied') {\r\n setIsCameraAccessDenied(true);\r\n }\r\n }\r\n\r\n const imageSrc = webCamRef.current.getScreenshot();\r\n const imageBlob = await (await fetch(imageSrc)).blob();\r\n\r\n compressImage(imageBlob, setImageURL);\r\n };\r\n\r\n const uploadPhoto = () => {\r\n const input = document.createElement('input');\r\n input.type = 'file';\r\n input.accept = 'image/jpeg, image/jpg, image/png';\r\n if (typeof input.click === 'function') {\r\n input.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (file) {\r\n if (!isValidExtension(file)) {\r\n /*\r\n toastRef.current.show(\r\n {\r\n severity: 'warn',\r\n summary: t('common:Warning'),\r\n detail: t('common:InvalidFileTypeSelected'),\r\n });\r\n */\r\n showNotify(t('common:InvalidFileTypeSelected'), 'centerTop', 'warning');\r\n setImageURL(null);\r\n return false;\r\n }\r\n\r\n compressImage(file, setImageURL);\r\n }\r\n });\r\n input.click();\r\n }\r\n };\r\n\r\n const acceptPhoto = () => {\r\n setImageURL(null);\r\n // mandamos llamar el metodo de aceptar y le mandamos la imagen: ImageURL\r\n onAcceptPhoto(ImageURL);\r\n }\r\n\r\n const retakePhoto = () => {\r\n setImageURL(null);\r\n }\r\n\r\n const onCancel = () => {\r\n setImageURL(null);\r\n onHide();\r\n }\r\n\r\n const isValidExtension = (fileInfo) => {\r\n const fileExtension = fileInfo.name.split(\".\").pop();\r\n\r\n if (typeof(allowedExtensions) !== 'undefined' && allowedExtensions !== null && typeof(allowedExtensions) === 'object')\r\n {\r\n if(!allowedExtensions.includes(fileExtension.toString().toLowerCase())){\r\n return false;\r\n }\r\n }\r\n \r\n return true; \r\n }\r\n\r\n return (\r\n \r\n {\r\n IsCameraAccessDenied ?\r\n (\r\n <>\r\n \r\n {\r\n Archivos.map((item, index) => {\r\n const base64Icon = `data:image/${item.ExtensionArchivo};base64,${item.Archivo}`;\r\n return (\r\n
\r\n\r\n \r\n\r\n \r\n \r\n \r\n )\r\n ); \r\n};\r\nexport default PreguntaArchivo;","import React, { useState } from 'react';\r\nimport { withTranslation } from 'react-i18next';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar';\r\nimport FieldTextArea from 'components/Controls/FieldTextArea';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport CameraComponent from 'components/Controls/Camera/CameraComponent';\r\nimport { Image } from 'primereact/image';\r\nimport PreguntaArchivo from './PreguntaArchivo';\r\n\r\nconst Pregunta = (props) => {\r\n const [esRespuestaDeOpciones, setEsRespuestaDeOpciones] = useState(null);\r\n const [respuesta, setRespuesta] = useState(null); \r\n \r\n const [showCamera, setShowCamera] = useState(false); \r\n \r\n const onSelectedChange = (event) => {\r\n const {value} = event.target;\r\n setEsRespuestaDeOpciones(1);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onMultipleSelectedChange = (event) => {\r\n const value = Array.from(event.target.selectedOptions, (option) => option.value).join('|');\r\n setEsRespuestaDeOpciones(1);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onTextChange = (event) => {\r\n const {value} = event.target;\r\n setEsRespuestaDeOpciones(0);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onNumBoxValueChange = (event) => {\r\n const {value} = event;\r\n setEsRespuestaDeOpciones(0);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onDateBoxChange = (event) => {\r\n const {value} = event;\r\n setEsRespuestaDeOpciones(0);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onSelectedButtonChange = (event) => {\r\n const {value} = event;\r\n setEsRespuestaDeOpciones(1);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onMultipleSelectedButtonChange = (event) => {\r\n const value = Array.from(event.value).join('|');\r\n setEsRespuestaDeOpciones(1);\r\n setRespuesta(value);\r\n props.onValueChanged(props.pregunta, value);\r\n };\r\n\r\n const onImageChange = (imageItems) => {\r\n setEsRespuestaDeOpciones(0);\r\n setRespuesta('');\r\n props.onValueChanged(props.pregunta, imageItems, true);\r\n };\r\n\r\n const options = props.pregunta.OpcionesRespuesta.map(optn => ({\r\n label: optn.TextoFormularioPregunta || optn.IdFormularioPreguntaOpcion,\r\n value: optn.IdFormularioPreguntaOpcion\r\n }));\r\n\r\n const selectButtonOptions = props.pregunta.OpcionesRespuesta.map(optn => ({\r\n label: optn.TextoFormularioPregunta || optn.IdFormularioPreguntaOpcion,\r\n value: optn.IdFormularioPreguntaOpcion\r\n }));\r\n\r\n const renderField = () => {\r\n const { pregunta } = props;\r\n if(pregunta.respuesta!== \"\"&&pregunta.OpcionesRespuesta.length===0&&pregunta.imageItems===undefined){\r\n pregunta.imageItems=null;\r\n }\r\n\r\n switch (pregunta.ClaFormularioTipoCampo) {\r\n case 1:\r\n return (\r\n \r\n \r\n )} \r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(Pregunta);","import React from \"react\";\r\nimport { Wizard, WizardStep, useWizardStep } from \"react-wizard-primitive\";\r\nimport { Button, Row, Col } from 'reactstrap';\r\n\r\nconst WizardLayout = (props) => {\r\n const stepCount = React.Children.count(props.children);\r\n \r\n \r\n\r\n return (\r\n { \r\n }}\r\n > \r\n {\r\n \r\n\r\n ({ activeStepIndex, previousStep, nextStep }\r\n , onBeforeNextStep = ( ) => { \r\n \r\n // si traemos defindos los props mandamos verificar con el controlador padre si puede continuar al siguiente paso o no....\r\n if (props.children[activeStepIndex].props !== undefined)\r\n {\r\n if (props.children[activeStepIndex].props.items === undefined && props.children[activeStepIndex].props.onBeforeNextStep === undefined)\r\n {\r\n nextStep(); \r\n }\r\n\r\n if (props.children[activeStepIndex].props.items !== undefined){\r\n \r\n if (props.children[activeStepIndex].props.onBeforeNextStep !== undefined && props.children[activeStepIndex].props.onBeforeNextStep(props.children[activeStepIndex].props.items))\r\n {\r\n nextStep();\r\n }\r\n }\r\n else if (props.children[activeStepIndex].props.onBeforeNextStep(null)){\r\n nextStep(); \r\n }\r\n }\r\n else\r\n { \r\n nextStep();\r\n }\r\n }\r\n ) => ( \r\n \r\n <>\r\n \r\n ); \r\n\r\n \r\n };\r\n\r\n WizardLayout.Step = props => ( \r\n \r\n \r\n {\r\n ({ isActive }) => isActive && (\r\n \r\n ); \r\n \r\n export default WizardLayout; \r\n ","import React from 'react'; \r\nimport { FormGroup, Label, Card, CardHeader, CardBody, Row, Col, CardTitle, Button, CardFooter } from 'reactstrap';\r\nimport Pregunta from './Pregunta.js'; \r\nimport { config } from '../../utils/config'; \r\nimport { callApi, showSweetAlert, showNotify, getCliente } from '../../utils/utils'; \r\nimport queryString from 'query-string' \r\nimport WizardLayout from '../../components/Wizard/Wizard.js'; \r\nimport { Skeleton } from 'primereact/skeleton';\r\nimport SignatureCanvas from 'react-signature-canvas'\r\nimport { SelectButton } from 'primereact/selectbutton'; \r\nimport { withTranslation } from 'react-i18next';\r\nimport PageContent from '../../layouts/PageContent'; \r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton.jsx';\r\n\r\n\r\nclass ResponderFormulario extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n \r\n const params= typeof(props.location) === 'undefined' || props.location === null ? {} : queryString.parse(props.location.search);\r\n \r\n\r\n this.state = {\r\n ClaFormulario: params.ClaFormulario ? params.ClaFormulario : props.ClaFormulario,\r\n IsAvailableCheckList: props.isAvailableCheckList,\r\n NomFormulario: null,\r\n DefaultCantidadPreguntas: null,\r\n ClaTurno: props.ClaTurno ? props.ClaTurno : null,\r\n ClaCelda: props.IdCelda ? props.IdCelda : null,\r\n ClaMaquina: null,\r\n ABCMachine: null,\r\n preguntas: [] , \r\n Shifts: [],\r\n Departments: [],\r\n Cells: [],\r\n Lines: [],\r\n SignData: null,\r\n errors: {},\r\n IsLoading: false,\r\n ClaDepartamento: props.ClaAreaDepartamento ? props.ClaAreaDepartamento : null,\r\n IsNewHomeVersion:props.IsNewHomeVersion ? Boolean(props.IsNewHomeVersion) : Boolean(false),\r\n Language: 'English'\r\n }\r\n console.log(this.state);\r\n this.preguntaCambio = this.preguntaCambio.bind(this);\r\n this.enviarFormulario = this.enviarFormulario.bind(this); \r\n this.onBeforeNextStep = this.onBeforeNextStep.bind(this); \r\n this.ValidaStep1 = this.ValidaStep1.bind(this);\r\n\r\n this.languageOptions = [\r\n {name: 'EN', value: 'English'}, \r\n {name: 'ES', value: 'Spanish'}\r\n ]; \r\n };\r\n\r\n clearSignPad = () => {\r\n this.signPad.clear()\r\n this.setState({SignData: null})\r\n }\r\n\r\n setSignData = () => { \r\n this.setState({SignData: this.signPad.getTrimmedCanvas().toDataURL().replace('data:image/png;base64,','')})\r\n }\r\n \r\n getFormulario = (claFormulario, language) => {\r\n let urlWebService = `${config.UrlApiProject}formulario/getFormulario?ClaFormulario=${claFormulario}&Idioma=${language}`; \r\n let paramsService = null;\r\n\r\n this.setState({ \r\n preguntas: []\r\n });\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n NomFormulario: response.data.NomFormulario,\r\n DefaultCantidadPreguntas: response.data.DefaultCantidadPreguntas,\r\n preguntas: response.data.preguntas,\r\n // ClaTurno:null, \r\n // ClaDepartamento:null,\r\n // ClaCelda:null,\r\n Shifts:response.data.Turnos,\r\n Departments:response.data.Departamentos,\r\n Celdas:[],\r\n errors: {},\r\n IsLoading:false\r\n });\r\n\r\n if (!this.state.IsNewHomeVersion) {\r\n this.setState({ \r\n ClaTurno:null, \r\n ClaDepartamento:null,\r\n ClaCelda:null \r\n });\r\n }\r\n\r\n // Wire Coil\r\n if (claFormulario === '3') {\r\n this.setState({\r\n ClaDepartamento: 2\r\n })\r\n\r\n urlWebService = `${config.UrlApiProject}Celda/GetCeldas?ClaTipoCelda=${5}`; \r\n paramsService = null;\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Celdas: response.data.Celdas\r\n })\r\n });\r\n }\r\n\r\n // Plastic Strip\r\n if (claFormulario === '4') {\r\n this.setState({\r\n ClaDepartamento: 2\r\n })\r\n\r\n urlWebService = `${config.UrlApiProject}Celda/GetCeldas?ClaTipoCelda=${3}`; \r\n paramsService = null;\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Celdas: response.data.Celdas\r\n })\r\n });\r\n }\r\n \r\n // Bulk\r\n if (claFormulario === '5') {\r\n this.setState({\r\n ClaDepartamento: 1\r\n })\r\n\r\n urlWebService = `${config.UrlApiProject}Celda/GetCeldas?ClaDepartamento=${1}`; \r\n paramsService = null;\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Celdas: response.data.Celdas\r\n })\r\n });\r\n }\r\n\r\n });\r\n };\r\n\r\n componentDidMount() \r\n { \r\n this.getFormulario(this.state.ClaFormulario, this.state.Language);\r\n }\r\n \r\n\r\n // se manda llamar cuando modifican una respuesta en la pregunta....\r\n preguntaCambio ( item, newValue, isImageField ) { \r\n const newStatePregunta = item;\r\n const index = this.state.preguntas.findIndex(prg => prg.IdFormularioPregunta === item.IdFormularioPregunta);\r\n // index.respuesta = newValue;\r\n const newPreguntas = [...this.state.preguntas] // important to create a copy, otherwise you'll modify state outside of setState call\r\n \r\n if (isImageField){\r\n newStatePregunta.imageItems = newValue;\r\n newStatePregunta.respuesta = newValue.length === 0 ? '' : newValue.length;\r\n }else{\r\n newStatePregunta.respuesta = newValue;\r\n }\r\n \r\n newPreguntas[index] = newStatePregunta;\r\n this.marcarPreguntaInvalida(item, false);\r\n // this.setState({ preguntas:newPreguntas}); \r\n };\r\n\r\n onBeforeNextStep ( items ) { \r\n console.log(this.state);\r\n let isContinue = true;\r\n // validamos los elementos recibidos...... \r\n for (let i = 0; i < items.length;){ \r\n if ((items[i].EsRequerida === true || items[i].EsRequerida === 1) && (items[i].respuesta === undefined || items[i].respuesta === '' || items[i].respuesta === null)){\r\n this.marcarPreguntaInvalida(items[i], true);\r\n isContinue = false;\r\n }\r\n \r\n i+=1; \r\n }\r\n\r\n if (!isContinue){\r\n // regresar a pantalla de formularios.....\r\n showNotify(this.props.t('common:ReviewRequiredFields'), 'centerTop', 'warning');\r\n }\r\n return isContinue;\r\n };\r\n\r\n\r\n ValidaStep1 ( items ) { \r\n let isContinue = true;\r\n // validamos manualmente los campos de celda, turno y departamento....... \r\n \r\n const errorHandled = {}\r\n \r\n switch(this.state.ClaFormulario) \r\n {\r\n case '1':\r\n if (this.state.ClaTurno === null){\r\n isContinue =false;\r\n errorHandled.ClaTurno = this.props.t('common:RequiredField')\r\n } \r\n \r\n if (this.state.ClaDepartamento === null){\r\n isContinue =false;\r\n errorHandled.ClaDepartamento = this.props.t('common:RequiredField')\r\n }\r\n \r\n if (this.state.Celdas.length> 0 && this.state.ClaCelda === null){\r\n isContinue =false;\r\n errorHandled.ClaCelda = this.props.t('common:RequiredField')\r\n }\r\n \r\n this.setState({errors:errorHandled});\r\n\r\n break; \r\n case '2':\r\n if (this.state.ClaTurno === null){\r\n isContinue =false;\r\n errorHandled.ClaTurno = this.props.t('common:RequiredField') \r\n } \r\n \r\n this.setState({errors:errorHandled});\r\n\r\n break;\r\n case '3':\r\n case '4':\r\n case '5':\r\n if (this.state.ClaTurno === null){\r\n isContinue =false;\r\n errorHandled.ClaTurno = this.props.t('common:RequiredField')\r\n }\r\n\r\n if (this.state.Celdas.length> 0 && this.state.ClaCelda === null){\r\n isContinue =false;\r\n errorHandled.ClaCelda = this.props.t('common:RequiredField')\r\n }\r\n\r\n if (this.state.ClaMaquina === null){\r\n isContinue =false;\r\n errorHandled.ClaMaquina = this.props.t('common:RequiredField')\r\n }\r\n \r\n this.setState({errors:errorHandled});\r\n \r\n break;\r\n default:\r\n // nothing special\r\n break;\r\n } \r\n\r\n if (!isContinue){\r\n // regresar a pantalla de formularios..... \r\n showNotify(this.props.t('common:ReviewRequiredFields') , 'centerTop', 'warning');\r\n }\r\n \r\n return isContinue;\r\n };\r\n\r\n marcarPreguntaInvalida ( item, esInvalida ) { \r\n const newStatePregunta = item;\r\n const index = this.state.preguntas.findIndex(prg => prg.IdFormularioPregunta === item.IdFormularioPregunta);\r\n // index.respuesta = newValue;\r\n const newPreguntas = [...this.state.preguntas] // important to create a copy, otherwise you'll modify state outside of setState call\r\n newStatePregunta.EsInvalida = esInvalida;\r\n newPreguntas[index] = newStatePregunta;\r\n \r\n this.setState({ preguntas:newPreguntas}); \r\n };\r\n\r\n enviarFormulario() {\r\n\r\n // validamos que este firmado el formulario....\r\n if (this.state.SignData === null || this.state.SignData === '') { \r\n showSweetAlert(null, this.props.t('formulario:SignatureRequired') , 'warning');\r\n return;\r\n } \r\n \r\n this.setState({IsLoading:true});\r\n\r\n let urlServ = `${config.UrlApiProject}formulario/enviarFormulario`;\r\n \r\n if(this.state.IsAvailableCheckList){\r\n urlServ = `${config.UrlApiProject}formulario/EnviarFormularioAvailableCheckListByLocation`;\r\n }\r\n \r\n const params = {\r\n ...this.state\r\n }; \r\n\r\n console.log('formulario', JSON.stringify( params ) );\r\n \r\n callApi(urlServ, \"POST\", params, (res) => {\r\n \r\n // harcode dependiendo el formulario\r\n\r\n this.setState({\r\n ClaFormulario: params.ClaFormulario ? params.ClaFormulario : null,\r\n NomFormulario:null,\r\n DefaultCantidadPreguntas:null,\r\n ClaTurno:null,\r\n ClaCelda:null,\r\n preguntas: [] , \r\n Shifts:[],\r\n Departments:[],\r\n Cells:[],\r\n SignData:null,\r\n errors: {},\r\n IsLoading:false,\r\n ClaMaquina: null,\r\n ABCMachine: null\r\n });\r\n \r\n // regresar a pantalla de formularios.....\r\n showNotify(this.props.t('common:SuccessOperation') , 'centerTop', 'success');\r\n \r\n if (res.data.EsEnviarAdvertencia){\r\n showSweetAlert(null, res.data.MensajeAdvertencia, 'warning'); \r\n } \r\n \r\n if (typeof(this.props.onFormularioSent) === 'function'){\r\n this.props.onFormularioSent();\r\n }\r\n else {\r\n this.props.history.push(\"/layout/Formularios\");\r\n }\r\n \r\n });\r\n }; \r\n\r\n chunkArray(myArray, chunk_size){\r\n const results = [];\r\n \r\n while (myArray.length) {\r\n results.push(myArray.splice(0, chunk_size));\r\n }\r\n \r\n return results;\r\n }\r\n\r\n onSelectedShiftChange = ( event ) => { \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaTurno: event.value,\r\n errors:{...this.state.errors, ClaTurno:null}\r\n }\r\n } ) \r\n };\r\n\r\n onSelectedCeldaChange = (e) => { \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaCelda: event.value,\r\n errors:{...this.state.errors, ClaCelda:null}\r\n }\r\n } ) \r\n\r\n if (e.value === null)\r\n {\r\n e.value = '';\r\n this.setState({ \r\n Lines: [],\r\n });\r\n \r\n return;\r\n }\r\n\r\n let claTipoMaquina = 1\r\n\r\n if (this.state.ClaFormulario === \"3\" || this.state.ClaFormulario === \"4\") {\r\n claTipoMaquina = 3\r\n }\r\n\r\n const urlWebService = `${config.UrlApiProject}Celda/GetCellLines?ClaTipoMaquina=${claTipoMaquina}&ClaCelda=${e.value}`; \r\n const paramsService = null;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({ \r\n ClaCelda: e.value,\r\n Lines: response.data.Lines\r\n });\r\n\r\n\r\n }); \r\n\r\n };\r\n\r\n onSelectedLineChange = (e) => {\r\n this.state.Lines.forEach(line => {\r\n if (line.ClaMaquina === e.value) {\r\n this.setState ((state, props) => {\r\n return {\r\n ABCMachine: line.ABCMachine,\r\n ClaMaquina: e.value,\r\n errors: {...this.state.errors, ClaMaquina: null, ABCMachine: null}\r\n }\r\n })\r\n \r\n }\r\n });\r\n\r\n if (e.value === null) {\r\n e.value = '';\r\n this.setState({\r\n ClaMaquina: null,\r\n ABCMachine: null\r\n });\r\n }\r\n }\r\n\r\n onLanguageChange = (e) => {\r\n const language = e.value;\r\n if (e.value !== null) {\r\n this.setState({ \r\n Language: language\r\n });\r\n this.getFormulario(this.state.ClaFormulario, language); \r\n }\r\n };\r\n\r\n onSelectedDepartmentChange = ( event ) => { \r\n\r\n let {value} = event;\r\n\r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaDepartamento: event.value,\r\n ClaCelda:null,\r\n errors:{...this.state.errors, ClaDepartamento:null, ClaCelda:null}\r\n }\r\n } )\r\n \r\n if (value === null)\r\n {\r\n value = '';\r\n this.setState({ \r\n Celdas:[] \r\n });\r\n \r\n return;\r\n }\r\n\r\n \r\n const urlWebService = `${config.UrlApiProject}formulario/GetCeldas?ClaDepartamento=${value}`; \r\n const paramsService = null;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({ \r\n Celdas:response.data.Celdas \r\n });\r\n\r\n\r\n }); \r\n\r\n\r\n };\r\n\r\n languageTemplate = () => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n 3 ? ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" buttonList buttonListInvalid\" : \" buttonList\"\r\n : ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaTurno !== null ? ( \r\n \r\n \r\n \r\n \r\n 3 ? ( this.state.errors.ClaDepartamento !== null && this.state.errors.ClaDepartamento !== undefined) ? \" buttonList buttonListInvalid\" : \" buttonList\"\r\n : ( this.state.errors.ClaDepartamento !== null && this.state.errors.ClaDepartamento !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaDepartamento !== null ? ( \r\n \r\n \r\n {\r\n this.state.Celdas.length > 0 ? (\r\n \r\n \r\n 3 ? ( this.state.errors.ClaCelda !== null && this.state.errors.ClaCelda !== undefined) ? \" cellList cellListInvalid scrollbar-primary scroll-y\" : \" cellList scrollbar-primary scroll-y\"\r\n : ( this.state.errors.ClaCelda !== null && this.state.errors.ClaCelda !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaCelda !== null ? ( \r\n \r\n \r\n ) : <>\r\n }\r\n \r\n
\r\n ) \r\n } \r\n }\r\n\r\n if (this.state.ClaFormulario === \"2\"){\r\n listPreguntasSteps.push(\r\n \r\n \r\n \r\n \r\n 3 ? ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" buttonList buttonListInvalid scroll-y\" : \" buttonList scroll-y\"\r\n : ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaTurno !== null ? ( \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n if (this.state.ClaFormulario === \"3\" || this.state.ClaFormulario === \"4\" || this.state.ClaFormulario === \"5\") {\r\n listPreguntasSteps.push(\r\n \r\n \r\n \r\n \r\n 3 ? ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" buttonList buttonListInvalid\" : \" buttonList\"\r\n : ( this.state.errors.ClaTurno !== null && this.state.errors.ClaTurno !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaTurno !== null ? ( \r\n \r\n \r\n {\r\n this.state.Celdas.length > 0 ? (\r\n \r\n \r\n 3 ? ( this.state.errors.ClaCelda !== null && this.state.errors.ClaCelda !== undefined) ? \" cellList cellListInvalid scrollbar-primary scroll-y\" : \" cellList scrollbar-primary scroll-y\"\r\n : ( this.state.errors.ClaCelda !== null && this.state.errors.ClaCelda !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaCelda !== null ? ( \r\n \r\n \r\n ) : <>\r\n }\r\n {\r\n this.state.Lines.length > 0 ? (\r\n \r\n \r\n 3 ? ( this.state.errors.ClaMaquina !== null && this.state.errors.ClaMaquina !== undefined) ? \" buttonList buttonListInvalid\" : \" buttonList\"\r\n : ( this.state.errors.ABCMachine !== null && this.state.errors.ABCMachine !== undefined) ? \" p-invalid\" : \" \"}\r\n > \r\n \r\n { this.state.errors.ClaMaquina !== null ? ( \r\n \r\n \r\n ) : <>\r\n }\r\n \r\n
\r\n )\r\n }\r\n \r\n } \r\n\r\n for (let i = 0; i < result.length;){ \r\n for (let x = 0; x < result[i].length;) {\r\n listPreguntasTemp.push( 5 ? 'both' : 'default'}\r\n >\r\n {listPreguntasTemp}\r\n \r\n )\r\n\r\n listPreguntasTemp = [];\r\n i+=1;\r\n }\r\n \r\n if (listPreguntasSteps.length>0){\r\n listPreguntasSteps.push(\r\n \r\n \r\n \r\n \r\n { this.signPad = ref }}\r\n canvasProps={{ className: 'react-sign-canvas'}}\r\n onEnd={this.setSignData}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n } \r\n \r\n if (listPreguntasSteps.length===0){\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n {this.props.t('common:Loading')} \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n\r\n if (this.props.ClaFormulario !== null && typeof(this.props.ClaFormulario) !== 'undefined'){\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n { listPreguntasSteps } \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n \r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n { listPreguntasSteps } \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n} \r\n\r\n export default withTranslation(['formulario','common'])(ResponderFormulario); ","import React from 'react';\r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n CardImg,\r\n CardImgOverlay,\r\n CardTitle,\r\n CardText,\r\n ListGroupItem,\r\n ListGroup,\r\n Row,\r\n Col,\r\n Form, \r\n FormGroup, \r\n Label, \r\n Input \r\n } from \"reactstrap\";\r\n import { NavLink as NavLinkRRD, Link, Switch } from 'react-router-dom';\r\n import Pregunta from './Pregunta.js'; \r\n import { Divider } from 'primereact/divider'; \r\n import { useTranslation } from 'react-i18next';\r\n\r\nfunction chunkArray(myArray, chunk_size){\r\n const results = [];\r\n \r\n while (myArray.length) {\r\n results.push(myArray.splice(0, chunk_size));\r\n }\r\n \r\n return results;\r\n}\r\n\r\n// Format the time\r\nconst formatTime = (inputTime) => {\r\n const time = new Date(inputTime);\r\n\r\n const options = {\r\n dateStyle: \"short\",\r\n timeStyle: \"short\"\r\n }\r\n\r\n return(time.toLocaleString(\"en-US\", options));\r\n}\r\n\r\nconst FormularioResuelto = ({ formularioResuelto, returnResultados }, ) => {\r\n \r\n const { t, i18n } = useTranslation(['formulario','common']);\r\n const listPreguntasTemp = []; \r\n\r\n const copyPreguntas = [...formularioResuelto.preguntas];\r\n\r\n const result = chunkArray(copyPreguntas, formularioResuelto.preguntas.length);\r\n\r\n for (let i = 0; i < result.length;){ \r\n for (let x = 0; x < result[i].length;) {\r\n listPreguntasTemp.push(\r\n \r\n {formularioResuelto.NomFormulario} \r\n \r\n \r\n \r\n {t('formulario:GeneralInformation')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n { formularioResuelto.ClaFormulario === 1 ? \r\n ( \r\n // cuando es el formulario 1 \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) \r\n : formularioResuelto.ClaFormulario === 2 ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : <>} \r\n \r\n {t('formulario:Questionnaire')} { formularioResuelto.EsRequiereRevision === true ? () : <> }\r\n \r\n {listPreguntasTemp}\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n ); \r\n}; \r\n \r\nexport default FormularioResuelto;","import React from 'react'; \r\nimport { Card, CardHeader, CardBody, Row, Col, CardTitle, Button } from 'reactstrap';\r\nimport { config } from '../../utils/config'; \r\nimport { callApi } from '../../utils/utils'; \r\nimport { Skeleton } from 'primereact/skeleton';\r\nimport FormularioResuelto from './FormularioResuelto.js'; \r\nimport { withTranslation } from 'react-i18next';\r\nimport { responsiveFontSizes } from '@material-ui/core';\r\n\r\nclass ResultadoFormularioDet extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n this.state = {\r\n IdFormularioResuelto: props.IdFormularioResuelto ? props.IdFormularioResuelto : null,\r\n IsLoading:true\r\n }\r\n }\r\n\r\n componentDidMount() \r\n { \r\n if(this.state.IdFormularioResuelto === null)\r\n return;\r\n \r\n const urlWebService = `${config.UrlApiProject}formulario/getFormularioResuelto?IdFormularioResuelto=${this.state.IdFormularioResuelto}`; \r\n const paramsService = null;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n \r\n ClaFormulario: response.data.ClaFormulario,\r\n NomFormulario: response.data.NomFormulario,\r\n FechaCaptura\t\t\t\t: response.data.FechaCaptura,\r\n ClaDepartamento\t\t\t: response.data.ClaDepartamento,\r\n NomDepartamento\t\t\t: response.data.NomDepartamento,\r\n ClaCelda\t\t\t\t\t: response.data.ClaCelda, \r\n ClaTurno\t\t\t\t\t: response.data.ClaTurno, \r\n NomUsuarioResuelve\t\t: response.data.NomUsuarioResuelve, \r\n ClaveCelda\t\t: response.data.ClaveCelda,\r\n ABCMachine: response.data.ABCMachine,\r\n NomTurno\t\t: response.data.NomTurno, \r\n DefaultCantidadPreguntas: response.data.DefaultCantidadPreguntas,\r\n FirmaDigital: response.data.FirmaDigital,\r\n EsRequiereRevision: response.data.EsRequiereRevision,\r\n preguntas: response.data.preguntas, \r\n Shifts:response.data.Turnos,\r\n Departments:response.data.Departamentos, \r\n IsLoading:false\r\n });\r\n \r\n \r\n }); \r\n }\r\n\r\n\r\n render(){ \r\n\r\n if (this.state.IsLoading){\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n\r\n \r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n}\r\n\r\nexport default withTranslation(['formulario','common'])(ResultadoFormularioDet);","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React , { useState, useEffect } from 'react'; \r\nimport { FormGroup, Label, Card, CardHeader, CardBody, Row, Col, CardTitle, CardFooter, InputGroup, InputGroupText } from 'reactstrap'; \r\nimport { config } from '../../utils/config'; \r\nimport { callApi, showSweetAlert, showNotify, getCliente } from '../../utils/utils'; \r\nimport queryString from 'query-string' \r\nimport WizardLayout from '../../components/Wizard/Wizard.js'; \r\nimport { Skeleton } from 'primereact/skeleton'; \r\nimport { SelectButton } from 'primereact/selectbutton'; \r\nimport { Panel } from 'primereact/panel';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { InputText } from 'primereact/inputtext';\r\nimport { Dropdown } from 'primereact/dropdown';\r\nimport DateBox from 'devextreme-react/date-box'; \r\nimport { DataView, DataViewLayoutOptions } from 'primereact/dataview';\r\nimport { Column } from 'primereact/column'; \r\nimport '../../assets/css/DataViewBase.css';\r\nimport { Tag } from 'primereact/tag';\r\nimport { Button } from 'primereact/button'; \r\nimport { NavLink as NavLinkRRD, Link, Switch } from 'react-router-dom';\r\nimport { Checkbox } from 'primereact/checkbox';\r\nimport { withTranslation } from 'react-i18next'; \r\nimport ResultadoFormularioDet from './ResultadoFormularioDet.js'; \r\nimport PageContent from '../../layouts/PageContent'; \r\n\r\nclass ResultadoFormulario extends React.Component {\r\n \r\n constructor(props) {\r\n super(props); \r\n\r\n this.state = {\r\n IsLoading:false,\r\n ClaFormulario:null,\r\n Shifts:[],\r\n Departments:[],\r\n Celdas:[],\r\n Formularios:[],\r\n FormularioResueltos:[],\r\n layout:'grid'\r\n } \r\n \r\n this.onFormularioSelectedChange = this.onFormularioSelectedChange.bind(this);\r\n this.onStartDateChange = this.onStartDateChange.bind(this); \r\n this.onLayoutChange = this.onLayoutChange.bind(this); \r\n this.onActionsClick = this.onActionsClick.bind(this);\r\n this.onSearch = this.onSearch.bind(this);\r\n this.onEsRequiereRevisionChange = this.onEsRequiereRevisionChange.bind(this); \r\n this.onclickButton = this.onclickButton.bind(this);\r\n this.returnResultados = this.returnResultados.bind(this);\r\n this.formatTime = this.formatTime.bind(this);\r\n } \r\n\r\n componentDidMount() \r\n { \r\n let urlWebService = `${config.UrlApiProject}formulario/getFormularios`; \r\n\r\n const paramsService = null;\r\n\r\n this.setState({\r\n EsRequiereRevision: false,\r\n EsVerDetalle: false,\r\n IsLoading: true, \r\n });\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Formularios: response.data.Formularios \r\n }); \r\n\r\n // obtenemos los departamentos \r\n urlWebService = `${config.UrlApiProject}departamento/getDepartamentos`; \r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Departments: response.data.Departamentos \r\n });\r\n // obtenemos los turnos\r\n\r\n urlWebService = `${config.UrlApiProject}turno/getTurnos`; \r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Shifts: response.data.Turnos, \r\n IsLoading:false\r\n });\r\n // obtenemos los turnos\r\n }); \r\n \r\n }); \r\n }); \r\n \r\n } \r\n \r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n if (prevState.ClaTurno !== this.state.ClaTurno) {\r\n this.onSearch();\r\n }\r\n\r\n if (prevState.ClaFormulario !== this.state.ClaFormulario) {\r\n this.onSearch();\r\n }\r\n\r\n if (prevState.ClaDepartamento !== this.state.ClaDepartamento) {\r\n this.onSearch();\r\n }\r\n\r\n if (prevState.EsRequiereRevision !== this.state.EsRequiereRevision) {\r\n this.onSearch();\r\n }\r\n\r\n if (prevState.FechaCapturaFin !== this.state.FechaCapturaFin) {\r\n this.onSearch();\r\n }\r\n\r\n if (prevState.FechaCapturaInicia !== this.state.FechaCapturaInicia) {\r\n this.onSearch();\r\n }\r\n\r\n }\r\n\r\n \r\n onclickButton(IdFormularioResuelto) { \r\n this.setState({ \r\n IsLoading:false,\r\n EsVerDetalle:true,\r\n IdFormularioResuelto\r\n });\r\n\r\n\r\n }\r\n\r\n returnResultados() { \r\n console.log('entro aquiu');\r\n this.setState({ \r\n IsLoading:false,\r\n EsVerDetalle:false,\r\n IdFormularioResuelto:null\r\n });\r\n\r\n\r\n }\r\n \r\n\r\n onFormularioSelectedChange = ( event ) => { \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaFormulario: event.value,\r\n ClaCelda:null ,\r\n ClaDepartamento:null ,\r\n ClaTurno:null,\r\n Celdas:[],\r\n FormularioResueltos:[]\r\n }\r\n } )\r\n };\r\n \r\n \r\n onStartDateChange = ( event ) => { \r\n this.setState ( ( state, props ) => {\r\n return { \r\n FechaCapturaInicia: event.value,\r\n FormularioResueltos:[]\r\n }\r\n } )\r\n \r\n };\r\n\r\n onEsRequiereRevisionChange = ( event ) => { \r\n this.setState ( ( state, props ) => {\r\n return { \r\n EsRequiereRevision: event.checked,\r\n FormularioResueltos:[]\r\n }\r\n } )\r\n \r\n };\r\n\r\n onEndDateChange = ( event ) => { \r\n this.setState ( ( state, props ) => {\r\n return { \r\n FechaCapturaFin: event.value,\r\n FormularioResueltos:[]\r\n }\r\n } )\r\n \r\n }; \r\n\r\n onLayoutChange = ( event ) => { \r\n this.setState ( ( state, props ) => {\r\n return { \r\n layout: event.value\r\n }\r\n } )\r\n \r\n };\r\n\r\n onActionsClick = ( event ) => { \r\n console.log(this.menuRef.current);\r\n this.menuRef.current.toggle(event)\r\n \r\n };\r\n\r\n onSelectedShiftChange = ( event ) => { \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaTurno: event.value ,\r\n FormularioResueltos:[]\r\n }\r\n } ) \r\n };\r\n\r\n onSelectedDepartmentChange = ( event ) => { \r\n\r\n let {value} = event;\r\n \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaDepartamento: event.value,\r\n ClaCelda:null ,\r\n FormularioResueltos:[]\r\n }\r\n } )\r\n \r\n if (value === null)\r\n {\r\n value = '';\r\n this.setState({ \r\n Celdas:[] ,\r\n FormularioResueltos:[]\r\n });\r\n \r\n return;\r\n }\r\n \r\n \r\n const urlWebService = `${config.UrlApiProject}celda/GetCeldas?ClaDepartamento=${value}`; \r\n const paramsService = null;\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({ \r\n Celdas:response.data.Celdas ,\r\n FormularioResueltos:[]\r\n });\r\n \r\n \r\n }); \r\n \r\n \r\n };\r\n\r\n onSelectedCeldaChange = ( event ) => { \r\n this.setState ( ( state, props ) => { \r\n return { \r\n ClaCelda: event.value ,\r\n FormularioResueltos:[]\r\n }\r\n } ) \r\n };\r\n\r\n onSearch() { \r\n \r\n this.setState({IsLoading:true});\r\n\r\n\r\n const urlServ = `${config.UrlApiProject}formulario/getFormulariosResueltos`;\r\n const params = {\r\n ...this.state\r\n }; \r\n\r\n // console.log( JSON.stringify( params ) );\r\n callApi(urlServ, \"POST\", params, (res) => {\r\n if (res.hasError) {\r\n showSweetAlert(null, res.mensaje, 'error');\r\n } else { \r\n this.setState({\r\n FormularioResueltos: res.data.FormularioResueltos, \r\n IsLoading:false\r\n });\r\n \r\n }\r\n });\r\n };\r\n \r\n // Format the time\r\n formatTime(inputTime) {\r\n const time = new Date(inputTime);\r\n\r\n const options = {\r\n dateStyle: \"short\",\r\n timeStyle: \"short\"\r\n }\r\n\r\n return(time.toLocaleString(\"en-US\", options));\r\n };\r\n\r\n\r\n render () { \r\n const itemTemplate = (item, layout) => {\r\n if (!item) {\r\n return;\r\n }\r\n \r\n if (layout === 'list')\r\n return renderListItem(item);\r\n if (layout === 'grid')\r\n return renderGridItem(item);\r\n }\r\n\r\n const items = [\r\n {\r\n label: 'Options' ,\r\n command: () => {\r\n console.log('click options');\r\n }\r\n },\r\n {\r\n label: 'Navigate' ,\r\n command: () => {\r\n console.log('click Navigate');\r\n }\r\n }\r\n ];\r\n\r\n const renderListItem = (data) => {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n { this.state.EsVerDetalle === false ? \r\n ( \r\n
\r\n \r\n \r\n);\r\n }\r\n\r\n}\r\n\r\n\r\nexport default withTranslation(['formulario','common'])(ResultadoFormulario); ","import { LegendTitle } from \"devextreme-react/chart\";\r\n\r\nfunction mergeObject(properties, destinationObject, value){\r\n if (properties.length === 1){\r\n destinationObject[properties[0]] = value;\r\n return;\r\n }\r\n\r\n const propertyName = properties.shift();\r\n let childObject = destinationObject[propertyName];\r\n if (childObject == null){\r\n childObject = {};\r\n destinationObject[propertyName] = childObject;\r\n }\r\n\r\n if (propertyName.includes('[')){\r\n destinationObject[propertyName.substring(0, propertyName.indexOf('['))] = {\r\n type: 'itemArray',\r\n message: 'error, at least one property contain an array'\r\n }\r\n }\r\n\r\n mergeObject(properties, childObject, value);\r\n}\r\n\r\nclass YupValidator {\r\n constructor (schema){\r\n this.schema = schema;\r\n this.submitted = false;\r\n this.errors = {};\r\n }\r\n\r\n validate(values){\r\n const self = this;\r\n this.submitted = false;\r\n self.errors = {};\r\n\r\n return new Promise( (resolve, reject) => {\r\n this.schema.validate(values, {abortEarly: false})\r\n .then(() =>{\r\n resolve(true);\r\n })\r\n .catch((err)=> {\r\n for (const er of err.inner){\r\n mergeObject(er.path.split('.'), self.errors, {type: er.type, message: er.message});\r\n }\r\n\r\n resolve(false);\r\n });\r\n });\r\n\r\n }\r\n}\r\n\r\nexport default YupValidator;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React , {useEffect, useState} from 'react'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi } from '../../utils/utils'; \r\nimport '../../assets/css/PivotGridBase.css';\r\nimport { Dropdown } from 'primereact/dropdown'; \r\nimport FieldButton from '../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { MultiSelect } from 'primereact/multiselect'; \r\nimport { ToggleButton } from 'primereact/togglebutton'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx' \r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../utils/YupValidator';\r\n\r\nconst PocketMarginFilters = (props) => {\r\n \r\n const { t, i18n } = useTranslation(['formulario','common']);\r\n const [Anio, setAnio] = useState(props.defultFilters.Anio !== undefined ? props.defultFilters.Anio : null);\r\n const [Divisiones, setDivisiones] = useState(props.defultFilters.Divisiones !== undefined ? props.defultFilters.Divisiones : null);\r\n const [DivisionesList, setDivisionesList] = useState(props.defultFilters.DivisionesList !== undefined ? props.defultFilters.DivisionesList : null); \r\n const [EsUltimos12Meses, setEsUltimos12Meses] = useState(props.defultFilters.EsUltimos12Meses !== undefined ? props.defultFilters.EsUltimos12Meses : false);\r\n const [OpcionesAnios, setOpcionesAnios] = useState([]);\r\n const [OpcionesDivision, setOpcionesDivision] = useState([]);\r\n const [OpcionesYesNo, setOpcionesYesNo] = useState([{ value: 1, name: \"YES\"}, { value: 0, name: \"NO\" }]);\r\n // de momento se requiere que EsMostrarSoloConfiables este apagado....\r\n const [EsMostrarSoloConfiables, setEsMostrarSoloConfiables] = useState(props.defultFilters.EsMostrarSoloConfiables !== undefined ? props.defultFilters.EsMostrarSoloConfiables : 0);\r\n \r\n const [errors, setErrors] = useState({}); \r\n \r\n useEffect(() => {\r\n let urlWebService = `${config.UrlApiProject}Rentabilidad/GetDivisions`; \r\n\r\n let paramsService = null; \r\n paramsService = {AnioMes:0};\r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesDivision (response.data.Divisiones);\r\n // obtenemos los departamentos \r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetAnios`; \r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios(response.data.Anios); \r\n \r\n }); \r\n }); \r\n }, []); \r\n \r\n const setSelectedDivision = ( value ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Divisiones; \r\n setErrors(newErrors)\r\n\r\n setDivisiones(value);\r\n setDivisionesList(value !== undefined ? value : ''); \r\n }; \r\n\r\n const setSelectOnlyReliable = ( value ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.EsMostrarSoloConfiables; \r\n setErrors(newErrors)\r\n\r\n setEsMostrarSoloConfiables(value); \r\n }; \r\n\r\n const onAnioChange = ( value ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Anio; \r\n setErrors(newErrors)\r\n\r\n setAnio(value); \r\n }; \r\n\r\n const valitationScheme = yup.object().shape({\r\n Anio: yup.string().required(t('common:RequiredField')).nullable(),\r\n Divisiones: yup.string().required(t('common:RequiredField')).nullable() ,\r\n EsMostrarSoloConfiables: yup.string().required(t('common:RequiredField')).nullable() \r\n });\r\n \r\n \r\n const onApplyFilters = async ( ) => { \r\n // ejecutamos validaciones....\r\n const value = {\r\n Anio,\r\n Divisiones,\r\n EsMostrarSoloConfiables\r\n }\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n }\r\n \r\n if (props.onSearch){ \r\n \r\n const filtersData = {}\r\n filtersData.Anio = Anio;\r\n filtersData.Divisiones = Divisiones;\r\n filtersData.DivisionesList = DivisionesList;\r\n filtersData.EsUltimos12Meses = EsUltimos12Meses;\r\n filtersData.EsMostrarSoloConfiables = EsMostrarSoloConfiables;\r\n\r\n console.log(filtersData);\r\n\r\n props.onSearch( filtersData );\r\n } \r\n };\r\n \r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n setEsMostrarFilterToolbar(false)}>\r\n \r\n \r\n)\r\n} \r\n\r\n \r\nexport default PocketMarginFilterBarActions; \r\n\r\n ","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter, \r\n CardTitle, \r\n Row,\r\n Col \r\n } from \"reactstrap\"; \r\nimport Highcharts from 'highcharts'\r\n import HighchartsReact from 'highcharts-react-official';\r\n\r\nconst SparkLine = (props) => {\r\n \r\n \r\n const defaultOptions = {\r\n chart: {\r\n backgroundColor: null,\r\n borderWidth: 0,\r\n type: 'area',\r\n margin: [2, 0, 2, 0],\r\n /* width: '100%', */ \r\n height: props.height == null ? 40 : props.height,\r\n style: {\r\n overflow: 'visible'\r\n },\r\n \r\n // small optimalization, saves 1-2 ms each sparkline\r\n skipClone: true\r\n },\r\n title: {\r\n text: ''\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n xAxis: {\r\n lineWidth: 0,\r\n minorGridLineWidth: 0,\r\n labels: {\r\n enabled: false\r\n },\r\n title: {\r\n text: null\r\n },\r\n startOnTick: false,\r\n endOnTick: false,\r\n tickPositions: []\r\n },\r\n yAxis: {\r\n gridLineWidth:0,\r\n minorGridLineWidth: 0,\r\n lineWidth: 0,\r\n endOnTick: false,\r\n startOnTick: false,\r\n labels: {\r\n enabled: false\r\n },\r\n title: {\r\n text: null\r\n },\r\n tickPositions: [0]\r\n },\r\n legend: {\r\n enabled: false\r\n },\r\n tooltip: {\r\n useHTML:true,\r\n backgroundColor: 'white',\r\n borderWidth: 1,\r\n hideDelay: 0,\r\n shared: true,\r\n padding: 8,\r\n borderColor: 'silver',\r\n borderRadius: 3, \r\n positioner: function (w, h, point) {\r\n return { x: point.plotX - w / 2, y: point.plotY - h };\r\n },\r\n valueDecimals: 2,\r\n },\r\n plotOptions: {\r\n series: {\r\n animation: false,\r\n lineWidth: 1,\r\n shadow: false,\r\n color: props.color != null ? props.color : \"#ff3594\",\r\n states: {\r\n hover: {\r\n lineWidth: 1\r\n }\r\n },\r\n marker: {\r\n radius: 1,\r\n states: {\r\n hover: {\r\n radius: 2\r\n }\r\n }\r\n },\r\n fillOpacity: 0.05\r\n },\r\n column: {\r\n negativeColor: '#910000',\r\n borderColor: 'silver'\r\n }\r\n },\r\n \r\n series: [{\r\n data: [1,2,3]\r\n }]\r\n };\r\n\r\n const options = Highcharts.merge(defaultOptions, props.options) \r\n \r\n \r\n return ( \r\n <> \r\n \r\n \r\n \r\n {chartTitle} - {t('formulario:RealCost')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {chartTitle} - {t('formulario:TrendLast12Months')} - {t('formulario:RealCost')} \r\n \r\n \r\n \r\n \r\n {sparkLinesChartValues.map((bucket) => { \r\n const options = {\r\n xAxis: { \r\n categories: bucket.categories\r\n },\r\n yAxis: { \r\n categories: ['Real'] \r\n },\r\n series: [{ \r\n name: 'Real',\r\n data: bucket.serieReal \r\n } \r\n ],\r\n \r\n tooltip: {\r\n headerFormat: `${bucket.name} ({series.name})
{point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n\r\n return (\r\n\r\n \r\n {bucket.name} \r\n \r\n \r\n \r\n \r\n \r\n );\r\n })} \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\nexport default Buckets;\r\n","/* eslint-disable object-shorthand */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport Highcharts from 'highcharts';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { useTranslation } from 'react-i18next'; \r\n\r\nconst StandarVsRealChar = (props) => {\r\n\r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [dataForBuckets, setDataForBuckets] = useState({});\r\n const [chartTitle, setChartTitle] = useState('');\r\n const [standardCostData, setStandardCostData] = useState([]);\r\n const [realCostData, setRealCostData] = useState([]);\r\n const [xCategories, setXCategories] = useState([]);\r\n\r\n const lineChart = {\r\n chart: {\r\n height: 328,\r\n type: 'line',\r\n },\r\n title: {\r\n text: `${chartTitle}
${ t('formulario:TrendLast12Months')}`,\r\n }, \r\n xAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 0,\r\n categories: xCategories,\r\n title: {\r\n text: null,\r\n },\r\n },\r\n yAxis: { \r\n gridLineWidth:1,\r\n title: {\r\n text: null,\r\n }, \r\n labels: {\r\n overflow: 'justify',\r\n enabled:true\r\n },\r\n },\r\n tooltip: { \r\n valuePrefix: ' $',\r\n valueDecimals: 2\r\n },\r\n plotOptions: {\r\n bar: {\r\n dataLabels: {\r\n enabled: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n layout: 'horizontal',\r\n align: 'left',\r\n verticalAlign: 'bottom', \r\n borderWidth: 1,\r\n backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',\r\n shadow: true,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n series: [\r\n {\r\n name: 'Real',\r\n data: realCostData, \r\n showInLegend: true, \r\n color: '#ff7a3d',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n },\r\n {\r\n name: 'Standard',\r\n data: standardCostData, \r\n showInLegend: true, \r\n color: '#26caf6',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n }\r\n ], \r\n };\r\n\r\n useEffect(() => {\r\n \r\n const GetInconsistenciasGridService = `${config.UrlApiProject}Rentabilidad/GetInconsistenciasLinesChart`;\r\n \r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes,\r\n claGrupoEstadistico3: props.filters.ClaGrupoEstadistico3,\r\n claGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n claclientecuenta: props.filters.ClaClienteCuenta,\r\n claBucket: props.ClaBucket,\r\n esMostrarSoloConfiables: props.filters.EsMostrarSoloConfiables,\r\n claMarketSegment: props.filters.ClaMarketSegment\r\n }; \r\n\r\n callApi(GetInconsistenciasGridService, 'POST', paramsToService, (response) => {\r\n \r\n setStandardCostData(response.data.Standard.data);\r\n setRealCostData(response.data.Real.data);\r\n setXCategories(response.data.Categories); \r\n });\r\n\r\n const GetFollowUpTitle = `${config.UrlApiProject}Rentabilidad/GetBucketFollowUpTitle`; \r\n \r\n callApi(GetFollowUpTitle, 'POST', paramsToService, (response) => { \r\n console.log('StandarVsRealChar response');\r\n console.log(response);\r\n if (response.data.NomClienteCuenta !== ''){ \r\n setChartTitle(`${response.data.NomClienteCuenta } / ${ response.data.NomBucket }`); \r\n }else{ \r\n setChartTitle(response.data.NomBucket); \r\n } \r\n });\r\n \r\n }, [props.ClaBucket]);\r\n\r\n return\r\n {children}\r\n \r\n {getFormErrorMessage(name)}\r\n \r\n );\r\n\r\n }\r\n\r\n return (\r\n <> \r\n \r\n {children}\r\n \r\n {getFormErrorMessage(name)}\r\n \r\n );\r\n};\r\n\r\nexport default FieldDataTable;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport { \r\n Row,\r\n Col, \r\n} from 'reactstrap'; \r\nimport ArrowUpwardRounded from '@material-ui/icons/ArrowUpwardRounded';\r\nimport ArrowDownwardRounded from '@material-ui/icons/ArrowDownwardRounded'; \r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport TimelineIcon from '@material-ui/icons/Timeline';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport StandarVsRealChar from \"./StandarVsRealChar.jsx\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n/* ############### START COMPONENT ############### */\r\n\r\nconst Inconsistencies = (props) => {\r\n /* ############### DECLARE URLS ############### */\r\n const urlWebServiceChart = `${config.UrlApiProject}Rentabilidad/GetBucketGrafico12Months`;\r\n const urlWebServiceLineChart = `${config.UrlApiProject}Rentabilidad/GetInconsistenciasLinesChart`; \r\n\r\n /* ############### DECLARE USESTATE ############### */\r\n\r\n const { t } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]); \r\n const [chartTitle, setChartTitle] = useState('');\r\n const [SelectedBucket, setSelectedBucket] = useState(null);\r\n const [ClaBucket, setClaBucket] = useState(null);\r\n\r\n \r\n\r\n /* ############### DECLARE USEEFFECT ############### */\r\n\r\n useEffect(() => {\r\n \r\n const GetInconsistenciasGridService = `${config.UrlApiProject}Rentabilidad/GetInconsistenciasGrid`;\r\n\r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes,\r\n claGrupoEstadistico3: props.filters.ClaGrupoEstadistico3,\r\n claGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n claclientecuenta: props.filters.ClaClienteCuenta,\r\n claBucket: null,\r\n esMostrarSoloConfiables: props.filters.EsMostrarSoloConfiables,\r\n ClaMarketSegment: props.filters.ClaMarketSegment\r\n }; \r\n\r\n callApi(GetInconsistenciasGridService, 'POST', paramsToService, (response) => { \r\n setRowsGrid(response.data[0]); \r\n });\r\n\r\n callApi(urlWebServiceChart, 'POST', paramsToService, (response) => {\r\n const newChartSeries = [];\r\n\r\n for (const dataChart of response.data) {\r\n newChartSeries.push({\r\n name: dataChart.name,\r\n data: dataChart.values,\r\n });\r\n }\r\n });\r\n\r\n const GetFollowUpTitle = `${config.UrlApiProject}Rentabilidad/GetBucketFollowUpTitle`; \r\n\r\n callApi(GetFollowUpTitle, 'POST', paramsToService, (response) => { \r\n \r\n if (response.data.NomClienteCuenta !== ''){ \r\n setChartTitle(`${response.data.NomClienteCuenta } / ${ response.data.NomFecha}`); \r\n }else{ \r\n setChartTitle(response.data.NomFecha); \r\n } \r\n \r\n setClaBucket(null);\r\n });\r\n\r\n }, [props.filters]);\r\n\r\n /* ############### END USEEFFECT ############### */\r\n \r\n const header = ( \r\n <>\r\n {chartTitle}\r\n \r\n )\r\n \r\n const pirColumn = (row) => { \r\n return (<>{ row.PIR === null ? '' : row.PIR.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })});\r\n }\r\n\r\n const standardCostColumn = (row) => { \r\n return (<>{row.StandarCost === null ? '' : row.StandarCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const realCostColumn = (row) => { \r\n return (<>{ row.RealCost === null ? '' :row.RealCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const onRowSelect = (event) => { \r\n setClaBucket(event.data.ClaBucket)\r\n }\r\n\r\n const onRowUnselect = (event) =>{ \r\n setClaBucket(null);\r\n }\r\n\r\n \r\n const chartColumn = (row) => { \r\n return (<>\r\n setSelectedBucket(e.value)} \r\n onRowSelect={onRowSelect} \r\n onRowUnselect={onRowUnselect}\r\n selectionMode=\"single\"\r\n metaKeySelection={false}\r\n >\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\n\r\nexport default Inconsistencies;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport { Tag } from 'primereact/tag'; \r\n\r\nconst FieldTag = (props) => {\r\n const onClick = (value) => { \r\n if (props.onClick !== undefined){\r\n props.onClick(value);\r\n } \r\n } \r\n return ( \r\n <> \r\n \r\n \r\n {props.label}\r\n \r\n \r\n \r\n )\r\n} \r\nexport default FieldTag; \r\n\r\n\r\n","import React, { useEffect, useState } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport { \r\n Row,\r\n Col\r\n} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport TimelineIcon from '@material-ui/icons/Timeline'; \r\nimport DescriptionIcon from '@material-ui/icons/Description'; \r\nimport Buckets from '../Buckets/Buckets.jsx';\r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next';\r\nimport FieldTag from '../../../components/Controls/FieldTag.jsx'\r\nimport PropTypes from 'prop-types'\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n/* ################################# START COMPONENT ################################# */\r\n\r\nconst CustomerProductDetail = (props) => { \r\n const { t } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]);\r\n const [showBuckets, setshowBuckets] = useState(false);\r\n const [bucketFilters , setbucketFilters] = useState({});\r\n const [SelectedCustomer, setSelectedCustomer] = useState(null);\r\n const [showAllColumns, setshowAllColumns] = useState(false);\r\n \r\n useEffect(() => {\r\n const GetBallenasGridService = `${config.UrlApiProject}Rentabilidad/GetProductsGrid`; \r\n\r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes, \r\n claGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n claClienteCuenta: props.filters.ClaClienteCuenta,\r\n esMostrarSoloConfiables: props.filters.EsMostrarSoloConfiables,\r\n ClaClienteUnico: props.filters.ClaClienteUnico\r\n }; \r\n \r\n callApi(GetBallenasGridService, 'POST', paramsToService, (response) => { \r\n setRowsGrid(response.data[0]); \r\n setshowBuckets(false); \r\n });\r\n \r\n }, [props.filters]); \r\n\r\n const onShowColumnsDetail = () => { \r\n setshowAllColumns(!showAllColumns); \r\n }\r\n\r\n const header = ( \r\n <> \r\n onDetailBucket(row)} size=\"small\" color=\"primary\"> \r\n onClickInvoice(row)} size=\"small\" color=\"success\"> \r\n \r\n );\r\n }\r\n \r\n const onDetailBucket = (row) =>{\r\n const filters = { ...props.filters }; \r\n filters.ClaGrupoEstadistico3 = row.ClaGrupoEstadistico3;\r\n setbucketFilters(filters);\r\n setshowBuckets(true); \r\n }\r\n\r\n const onClickInvoice = (row) =>{\r\n const filters = { ...props.filters }; \r\n filters.ClaGrupoEstadistico3 = row.ClaGrupoEstadistico3;\r\n filters.NomGrupoEstadistico3 = row.NomGrupoEstadistico3;\r\n props.onClickInvoice(filters)\r\n }\r\n \r\n const PMColumn = (row) => { \r\n return (<>${ row.ImpMargenBolsillo === null ? '' : row.ImpMargenBolsillo.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n \r\n const onRowSelect = (event) => { \r\n onDetailBucket(event.data); \r\n\r\n }\r\n\r\n const AcumuladoImpMargenColumn = (row) => { \r\n return (<>${row.AcumuladoImpMargen === null ? '' : row.AcumuladoImpMargen.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const TonsPorcColumn = (row) => { \r\n return (<>{ row.TonsPorc === null ? '' : row.TonsPorc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%);\r\n }\r\n \r\n \r\n const footer = ( \r\n <> \r\n \r\n ( {t('common:Total')})}> \r\n ({ (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n { showAllColumns ? ( \r\n (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.RawMaterialRealImp === null ? 0 : v.RawMaterialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ConvCostRealImp === null ? 0 : v.ConvCostRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightInboundRealImp === null ? 0 : v.FreightInboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightOutboundRealImp === null ? 0 : v.FreightOutboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SGFinancialRealImp === null ? 0 : v.SGFinancialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SHRealImp === null ? 0 : v.SHRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.PriceRealImp === null ? 0 : v.PriceRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n { \r\n (rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) > 0 ? \r\n (100* (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n %\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n ${ \r\n \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n \r\n }\r\n \r\n )}\r\n >\r\n \r\n
\r\n \r\n )\r\n\r\n\r\n return (\r\n <> \r\n \r\n setSelectedCustomer(e.value)} \r\n onRowSelect={onRowSelect}\r\n footerColumnGroup={footer}\r\n removableSort\r\n > \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ); \r\n};\r\n\r\n\r\nexport default CustomerProductDetail;\r\n","import React, { useEffect, useState } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport { Row, Col} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Tag } from 'primereact/tag';\r\nimport FieldTag from '../../../components/Controls/FieldTag.jsx'\r\nimport moment from 'moment';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport FieldText from '../../../components/Controls/FieldText.jsx'\r\n\r\nconst InvoiceDetail = (props) => { \r\n const { t } = useTranslation(['formulario','common']); \r\n const [showAllColumns, setshowAllColumns] = useState(false);\r\n const [detalleFactura, setDetalleFactura] = useState([]); \r\n const [Encabezado, setEncabezado] = useState({});\r\n \r\n useEffect(() => {\r\n const GetInvoiceDetail = `${config.UrlApiProject}Rentabilidad/GetInvoiceDetail`; \r\n const paramsToService = {...props.filters} \r\n \r\n console.log(paramsToService);\r\n callApi(GetInvoiceDetail, 'POST', paramsToService, (response) => { \r\n if (response.data.InvoiceDetail.length > 0){ \r\n setEncabezado(response.data.InvoiceDetail[0]);\r\n }\r\n\r\n setDetalleFactura(response.data.InvoiceDetail); \r\n });\r\n \r\n }, [props.filters]); \r\n\r\n const onShowColumns = () => { \r\n setshowAllColumns(!showAllColumns); \r\n }\r\n\r\n const header = ( \r\n <> \r\n ${row.AcumuladoImpMargen === null ? '' : row.AcumuladoImpMargen.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const FechaTemplate = (row) => {\r\n return (\r\n <>\r\n { row.FechaFactura !== null ? moment(row.FechaFactura).format(\"MM/DD/YYYY\") : row.FechaFactura } \r\n \r\n );\r\n }\r\n \r\n const TonsPorcColumn = (row) => { \r\n return (<>{ row.TonsPorc === null ? '' : row.TonsPorc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%);\r\n }\r\n \r\n \r\n const footer = ( \r\n <> \r\n \r\n ( {t('common:Total')})}> \r\n ({ (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n { showAllColumns ? ( \r\n (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.RawMaterialRealImp === null ? 0 : v.RawMaterialRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.ConvCostRealImp === null ? 0 : v.ConvCostRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.FreightInboundRealImp === null ? 0 : v.FreightInboundRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.FreightOutboundRealImp === null ? 0 : v.FreightOutboundRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.SGFinancialRealImp === null ? 0 : v.SGFinancialRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.SHRealImp === null ? 0 : v.SHRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.PriceRealImp === null ? 0 : v.PriceRealImp , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (detalleFactura.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(detalleFactura.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n { \r\n (detalleFactura.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) > 0 ? \r\n (100* (detalleFactura.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(detalleFactura.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n %\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n ${ \r\n \r\n ( (detalleFactura.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n \r\n }\r\n \r\n )}\r\n >\r\n \r\n
\r\n \r\n )\r\n \r\n return (\r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ); \r\n};\r\nexport default InvoiceDetail;\r\n","import React, { useEffect, useState } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport { Row, Col} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Tag } from 'primereact/tag';\r\nimport FieldTag from '../../../components/Controls/FieldTag.jsx'\r\nimport moment from 'moment';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport InvoiceDetail from \"./InvoiceDetail.jsx\";\r\n\r\nconst InvoiceCustomerProduct = (props) => { \r\n const { t } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]); \r\n const [SelectedCustomer, setSelectedCustomer] = useState(null);\r\n const [showAllColumns, setshowAllColumns] = useState(false);\r\n const [showInvoiceDetail, setShowInvoiceDetail] = useState(false);\r\n const [SelectedItem, setSelectedItem] = useState(null);\r\n const [InvoiceFilters , setInvoiceFilters] = useState({});\r\n \r\n useEffect(() => {\r\n const GetBallenasInvoiceGridService = `${config.UrlApiProject}Rentabilidad/GetInvoiceCustomerProductsGrid`; \r\n const paramsToService = {...props.filters} \r\n \r\n callApi(GetBallenasInvoiceGridService, 'POST', paramsToService, (response) => { \r\n setRowsGrid(response.data[0]); \r\n });\r\n \r\n }, [props.filters]); \r\n\r\n const onShowColumns = () => { \r\n setshowAllColumns(!showAllColumns); \r\n }\r\n\r\n const header = ( \r\n <> \r\n ${row.AcumuladoImpMargen === null ? '' : row.AcumuladoImpMargen.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const FechaTemplate = (row) => {\r\n return (\r\n <>\r\n { row.FechaFactura !== null ? moment(row.FechaFactura).format(\"MM/DD/YYYY\") : row.FechaFactura } \r\n \r\n );\r\n }\r\n \r\n const TonsPorcColumn = (row) => { \r\n return (<>{ row.TonsPorc === null ? '' : row.TonsPorc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%);\r\n }\r\n \r\n \r\n const footer = ( \r\n <> \r\n \r\n ( {t('common:Total')})}> \r\n ({ (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n { showAllColumns ? ( \r\n (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.RawMaterialRealImp === null ? 0 : v.RawMaterialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ConvCostRealImp === null ? 0 : v.ConvCostRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightInboundRealImp === null ? 0 : v.FreightInboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightOutboundRealImp === null ? 0 : v.FreightOutboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SGFinancialRealImp === null ? 0 : v.SGFinancialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SHRealImp === null ? 0 : v.SHRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.PriceRealImp === null ? 0 : v.PriceRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n { \r\n (rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) > 0 ? \r\n (100* (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n %\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n ${ \r\n \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n \r\n }\r\n \r\n )}\r\n >\r\n \r\n
\r\n \r\n )\r\n\r\n const onRowSelect = (event) => { \r\n onDetailInvoice(event.data); \r\n\r\n }\r\n\r\n const onDetailInvoice = (row) =>{\r\n const filters = { ...props.filters }; \r\n filters.IdFactura = row.IdFactura; \r\n setInvoiceFilters(filters);\r\n setShowInvoiceDetail(true); \r\n }\r\n\r\n\r\n\r\n return (\r\n <> \r\n \r\n setSelectedItem(e.value)} \r\n onRowSelect={onRowSelect}\r\n > \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ); \r\n};\r\nexport default InvoiceCustomerProduct;\r\n","import React, { useEffect, useState } from 'react';\r\nimport './Ballenas.scss';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi} from '../../../utils/utils';\r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n Row,\r\n Col,\r\n CardTitle\r\n} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport TimelineIcon from '@material-ui/icons/Timeline';\r\nimport OpenInNewIcon from '@material-ui/icons/OpenInNew';\r\nimport Buckets from '../Buckets/Buckets.jsx';\r\nimport CustomerProductDetail from './CustomerProductDetail.jsx'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldTag from '../../../components/Controls/FieldTag.jsx'\r\nimport InvoiceCustomerProduct from './InvoiceCustomerProduct.jsx'; \r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n/* ################################# START COMPONENT ################################# */\r\n\r\nconst Ballenas = (props) => {\r\n \r\n const { buttonLabel, className } = props;\r\n\r\n /* ################# SET STATE AREA ################# */\r\n const { t, i18n } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]);\r\n const [rowsClientes, setRowsClientes] = useState([]);\r\n const [modalProduct, setModalProduct] = useState(false);\r\n const [modalInvoice, setModalInvoice] = useState(false);\r\n const [bucketFilters , setbucketFilters] = useState({});\r\n const [showBuckets, setshowBuckets] = useState(false);\r\n const [showAllColumns, setshowAllColumns] = useState(false);\r\n const [CustomerDetailProductFilters, setCustomerDetailProductFilters] = useState({});\r\n const [InvoiceCustomerProductFilters, setInvoiceCustomerProductFilters] = useState({});\r\n const [SelectedCustomer, setSelectedCustomer] = useState(null);\r\n const [EsMostrarPorCuenta, setEsMostrarPorCuenta] = useState(true);\r\n /* ################# END SET STATE AREA ################# */\r\n \r\n useEffect(() => { \r\n const GetBallenasGridService = `${config.UrlApiProject}Rentabilidad/GetBallenasGrid`;\r\n \r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes,\r\n claGrupoEstadistico3: props.filters.ClaGrupoEstadistico3,\r\n claGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n claClienteCuenta: props.filters.ClaClienteCuenta,\r\n claBucket: null,\r\n esMostrarSoloConfiables: props.filters.EsMostrarSoloConfiables,\r\n claMarketSegment: props.filters.ClaMarketSegment,\r\n }; \r\n\r\n callApi(GetBallenasGridService, 'POST', paramsToService, (response) => { \r\n setRowsGrid(response.data[0]); \r\n setRowsClientes(response.data[1]);\r\n setshowBuckets(false); \r\n setModalProduct(false);\r\n setModalInvoice(false);\r\n });\r\n\r\n }, [props.filters]); \r\n\r\n const onCloseModal = () => {\r\n setModalProduct(!modalProduct);\r\n if(modalInvoice){\r\n setModalInvoice(!modalInvoice);\r\n }\r\n }\r\n\r\n const onShowInvoice = (data) => { \r\n\r\n setInvoiceCustomerProductFilters(data)\r\n setModalInvoice(true);\r\n setModalProduct(false);\r\n }\r\n\r\n const onShowColumns = () => { \r\n setshowAllColumns(!showAllColumns); \r\n }\r\n\r\n const onClickByCustomer = () => {\r\n setEsMostrarPorCuenta(!EsMostrarPorCuenta);\r\n setshowBuckets(false);\r\n }\r\n\r\n const header = ( \r\n <>\r\n ${row.AcumuladoImpMargen === null ? '' : row.AcumuladoImpMargen.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const PMColumn = (row) => { \r\n return (<>${ row.ImpMargenBolsillo === null ? '' : row.ImpMargenBolsillo.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const onCustomerDetailBucket = (row) =>{\r\n const filters = { ...props.filters };\r\n filters.ClaClienteCuenta = row.ClaClienteCuenta;\r\n filters.ClaClienteUnico = row.ClaClienteUnico; \r\n \r\n setbucketFilters(filters);\r\n setshowBuckets(true); \r\n }\r\n\r\n const onCustomerDetailProducts = (row) =>{\r\n const filters = { ...props.filters };\r\n filters.ClaClienteCuenta = row.ClaClienteCuenta;\r\n filters.NomClienteCuenta = row.ClaClienteCuenta > 0 ? row.NomClienteCuenta : row.NomClienteUnico; \r\n filters.ClaClienteUnico = row.ClaClienteUnico; \r\n \r\n setCustomerDetailProductFilters(filters); \r\n setInvoiceCustomerProductFilters(filters);\r\n setModalProduct(true); \r\n }\r\n\r\n const ActionsColumn = (row) => { \r\n return (\r\n <> \r\n onCustomerDetailBucket(row)} size=\"small\" color=\"primary\"> \r\n onCustomerDetailProducts(row)} color=\"secondary\"> \r\n \r\n );\r\n }\r\n\r\n const onRowSelect = (event) => { \r\n onCustomerDetailBucket(event.data); \r\n }\r\n\r\n const onRowUnselect = (event) =>{ \r\n // setClaBucket(null);\r\n } \r\n\r\n const footer = ( \r\n <> \r\n \r\n ( {t('common:Total')})}> \r\n ({ (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n { showAllColumns ? ( \r\n (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.RawMaterialRealImp === null ? 0 : v.RawMaterialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ConvCostRealImp === null ? 0 : v.ConvCostRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightInboundRealImp === null ? 0 : v.FreightInboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.FreightOutboundRealImp === null ? 0 : v.FreightOutboundRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SGFinancialRealImp === null ? 0 : v.SGFinancialRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.SHRealImp === null ? 0 : v.SHRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.PriceRealImp === null ? 0 : v.PriceRealImp , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n ) : \r\n ( (\r\n \r\n ${ \r\n (rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) > 0 ? \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.Tons === null ? 0 : v.Tons , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n { \r\n (rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) > 0 ? \r\n (100* (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 ))/(rowsGrid.reduce((a,v) => a += v.ImpPriceVtaPocketPrice === null ? 0 : v.ImpPriceVtaPocketPrice , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n : null\r\n }\r\n %\r\n \r\n )}\r\n >\r\n \r\n (\r\n \r\n ${ \r\n \r\n ( (rowsGrid.reduce((a,v) => a += v.ImpMargenBolsillo === null ? 0 : v.ImpMargenBolsillo , 0 )) ).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\r\n \r\n }\r\n \r\n )}\r\n >\r\n \r\n
\r\n \r\n )\r\n\r\n /* ################# START RENDER AREA ################# */\r\n \r\n if (props.showHide) {\r\n return (\r\n <> \r\n \r\n \r\n \r\n onCloseModal()} />\r\n \r\n \r\n \r\n { \r\n modalProduct ? ( \r\n \r\n onDetailOpportunity(rowData)} icon=\"pi pi-pencil\" className=\"p-button-rounded p-button-success p-mr-2\" />\r\n confirm(rowData)} icon=\"pi pi-trash\" className=\"p-button-rounded p-button-warning\" />\r\n \r\n );\r\n }\r\n \r\n const DueDateTemplate = (rowData) => {\r\n return (\r\n <>\r\n { rowData.DueDate !== null ? moment(rowData.DueDate).format(\"MM/DD/YYYY\") : rowData.DueDate } \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n const CompletedDateTemplate = (rowData) => {\r\n return (\r\n <>\r\n { rowData.CompletedDate !== null ? moment(rowData.CompletedDate).format(\"MM/DD/YYYY\") : rowData.CompletedDate}\r\n \r\n );\r\n }\r\n \r\n const header = ( \r\n <>\r\n {t('formulario:TitleGridOpportunity')} {NomGrupoEstadistico3}\r\n \r\n )\r\n\r\n const newOpportunity = () => { \r\n resetModal();\r\n setOpenNewProduct(true);\r\n } \r\n\r\n const onDetailOpportunity = (row) =>{ \r\n resetModal();\r\n const urlWebService = `${config.UrlApiProject}Rentabilidad/GetOportunidadPorClave`;\r\n const paramsToService = {\r\n IdRdsOportunidad: row.IdRdsOportunidad\r\n };\r\n callApi(urlWebService, 'POST', paramsToService, (response) => { \r\n if (response.data.Oportunidad.length >0 ){ \r\n const AutoCompleteData = {\r\n ClaUsuario: response.data.Oportunidad[0].ClaUsuario,\r\n ClaEmpleado: response.data.Oportunidad[0].ClaEmpleado,\r\n NomUsuario: response.data.Oportunidad[0].NomUsuario,\r\n };\r\n setIdRdsOportunidad(response.data.Oportunidad[0].IdRdsOportunidad);\r\n setClaTipoOportunidad(response.data.Oportunidad[0].ClaTipoOportunidad); \r\n setClaUsuarioResponsableOportunidad(AutoCompleteData);\r\n setDueDate(new Date(response.data.Oportunidad[0].DueDate)); \r\n setTituloOportunidad(response.data.Oportunidad[0].TituloOportunidad);\r\n setComentarios(response.data.Oportunidad[0].Comentarios);\r\n if(response.data.Oportunidad[0].CompletedDate !== null){\r\n setCompletedDate(new Date(response.data.Oportunidad[0].CompletedDate)); \r\n } \r\n setOpenNewProduct(true);\r\n }\r\n });\r\n }\r\n\r\n const resetModal = () => {\r\n setErrors({}); \r\n setIdRdsOportunidad(null);\r\n setClaTipoOportunidad(null); \r\n setDueDate(null); \r\n setClaUsuarioResponsableOportunidad(null);\r\n setTituloOportunidad(null);\r\n setComentarios(null);\r\n setCompletedDate(null); \r\n }\r\n\r\n const closeModal = () => {\r\n setOpenNewProduct(false)\r\n } \r\n\r\n const confirm = (rowData) => {\r\n confirmDialog({\r\n message: t('formulario:MessageConfirm'),\r\n header: t('common:Confirmation'),\r\n icon: 'pi pi-exclamation-triangle',\r\n accept: () => acceptBaja(rowData)\r\n });\r\n }\r\n\r\n const acceptBaja = (row) =>{ \r\n const urlWebService = `${config.UrlApiProject}Rentabilidad/OportunidadBaja`;\r\n const paramsToService = {\r\n IdRdsOportunidad: row.IdRdsOportunidad\r\n }; \r\n callApi(urlWebService, 'POST', paramsToService, (response) => { \r\n onGridOpportunity(); \r\n });\r\n } \r\n\r\n const onChangeTipoOportunidad = (value) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaTipoOportunidad; \r\n setErrors(newErrors)\r\n setClaTipoOportunidad(value);\r\n } \r\n\r\n const onChangeClaUsuarioResponsable = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.ClaUsuarioResponsableOportunidad; \r\n setErrors(newErrors)\r\n setClaUsuarioResponsableOportunidad(e.value)\r\n }\r\n\r\n const onChangeTituloOportunidad = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.TituloOportunidad; \r\n setErrors(newErrors)\r\n setTituloOportunidad(e.target.value)\r\n }\r\n\r\n const onChangeComentarios = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.Comentarios; \r\n setErrors(newErrors)\r\n setComentarios(e.target.value)\r\n }\r\n\r\n const onChangeDueDate = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.DueDate; \r\n setErrors(newErrors)\r\n setDueDate(e.target.value)\r\n } \r\n\r\n const onChangeCompletedDate = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.CompletedDate; \r\n setErrors(newErrors)\r\n setCompletedDate(e.target.value)\r\n } \r\n const filterResponsible = (event) => {\r\n let valor = ''; \r\n if (ClaUsuarioResponsableOportunidad !== null && ClaUsuarioResponsableOportunidad !== '' && event.query === \"\")\r\n {\r\n valor = ClaUsuarioResponsableOportunidad.NomUsuario;\r\n }\r\n else{\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query \r\n const urlWebServiceOwners = `${config.UrlApiProject}Rentabilidad/GetUsuarioResponsableOportunidad?descriptionFilter=${valor}`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => { \r\n setfilteredResponsible(response.data.DueniosOportunidades);\r\n }); \r\n \r\n } \r\n\r\n const valitationScheme = yup.object().shape({\r\n ClaTipoOportunidad: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n DueDate: yup.date().required(t('common:RequiredField')).nullable(),\r\n ClaUsuarioResponsableOportunidad: yup.object({ ClaUsuario: yup.string().required(t('common:RequiredField')) }).required(t('common:RequiredField')).nullable(),\r\n TituloOportunidad: yup.string().required(t('common:RequiredField')).nullable(),\r\n Comentarios: yup.string().required(t('common:RequiredField')).nullable(),\r\n });\r\n \r\n const saveOpportunity = async () => { \r\n // ejecutamos validaciones....\r\n const value = {\r\n ClaTipoOportunidad,\r\n DueDate,\r\n ClaUsuarioResponsableOportunidad,\r\n TituloOportunidad,\r\n Comentarios \r\n }\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n\r\n if (!esValido){ \r\n console.log(validator.errors);\r\n setErrors(validator.errors); \r\n return;\r\n }\r\n const paramsServiceOwners = {\r\n AnioMes: props.filters.AnioMes,\r\n ClaGrupoEstadistico3: props.filters.ClaGrupoEstadistico3,\r\n ClaGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n Claclientecuenta: props.filters.ClaClienteCuenta,\r\n ClaTipoOportunidad,\r\n DueDate,\r\n ClaUsuarioResponsableOportunidad:ClaUsuarioResponsableOportunidad.ClaUsuario,\r\n TituloOportunidad,\r\n Comentarios,\r\n IdRdsOportunidad,\r\n CompletedDate\r\n };\r\n callApi(urlWebServiceSaveOportunidad, 'POST', paramsServiceOwners, (response) => { \r\n onGridOpportunity();\r\n closeModal();\r\n }); \r\n } \r\n\r\n const isFormFieldValid = (name) => !!(errors[name]); \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldValid(name) && {errors[name].message};\r\n };\r\n \r\n if (props.showHide) {\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\nexport default Oportunities;\r\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n} from 'reactstrap'; \r\nimport Button from '@material-ui/core/Button';\r\nimport Buckets from './Buckets/Buckets';\r\nimport Inconsistencies from './Inconsistencies/Incosistencies';\r\nimport Ballenas from './Ballenas/Ballenas';\r\nimport Oportunities from './Oportunities/Oportunities'; \r\nimport BarChart from '@material-ui/icons/BarChart';\r\nimport CheckCircle from '@material-ui/icons/CheckCircle';\r\nimport MultilineChart from '@material-ui/icons/MultilineChart';\r\nimport Help from '@material-ui/icons/Help';\r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils'; \r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst SummaryReportsCharts = (props) => { \r\n\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [showBuckets, setShowBuckets] = useState(true);\r\n const [showInconsistencies, setShowInconsistencies] = useState(false);\r\n const [showBallenas, setShowBallenas] = useState(false);\r\n const [showOportunities, setShowOportunities] = useState(false);\r\n const [headerTitle, setHeaderTitle] = useState();\r\n const [claGrupoEstadistico3Value, setClaGrupoEstadistico3Value] = useState(''); \r\n const [filters, setfilters] = useState({ ...props.filters });\r\n\r\n /* ################## End useState area start ################## */\r\n\r\n const clickShowBuckets = () => {\r\n setShowBuckets(true);\r\n setShowInconsistencies(false);\r\n setShowBallenas(false);\r\n setShowOportunities(false); \r\n };\r\n const clickShowInconsistencies = () => {\r\n setShowBuckets(false);\r\n setShowInconsistencies(true);\r\n setShowBallenas(false);\r\n setShowOportunities(false); \r\n };\r\n const clickShowBallenas = () => {\r\n setShowBuckets(false);\r\n setShowInconsistencies(false);\r\n setShowBallenas(true);\r\n setShowOportunities(false); \r\n };\r\n const clickShowOportunities = () => {\r\n setShowBuckets(false);\r\n setShowInconsistencies(false);\r\n setShowBallenas(false);\r\n setShowOportunities(true); \r\n };\r\n\r\n useEffect(() => {\r\n const {ClaGrupoEstadistico3, AnioMes, ClaGerenciaRegional, EsMostrarSoloConfiables, ClaMarketSegment } = props.filters;\r\n const GetFollowUpTitle = `${config.UrlApiProject}Rentabilidad/GetBucketFollowUpTitle`;\r\n const paramsToService = {\r\n anioMes: AnioMes,\r\n claGrupoEstadistico3: ClaGrupoEstadistico3,\r\n claGerenciaRegional: ClaGerenciaRegional,\r\n esMostrarSoloConfiables:EsMostrarSoloConfiables,\r\n claMarketSegment:ClaMarketSegment\r\n };\r\n\r\n callApi(GetFollowUpTitle, 'POST', paramsToService, (response) => { \r\n setHeaderTitle(`${response.data.Titulo}`);\r\n setClaGrupoEstadistico3Value(ClaGrupoEstadistico3); \r\n setfilters({...props.filters, NomFecha: response.data.NomFecha})\r\n });\r\n }, [props.filters]);\r\n \r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n clickShowBuckets();\r\n }}\r\n variant=\"contained\"\r\n color={showBuckets ? 'primary' : 'default'}\r\n size=\"large\" \r\n startIcon={ {\r\n clickShowInconsistencies();\r\n }}\r\n color={showInconsistencies ? 'primary' : 'default'}\r\n variant=\"contained\"\r\n size=\"large\" \r\n startIcon={ {\r\n clickShowBallenas();\r\n }}\r\n color={showBallenas ? 'primary' : 'default'}\r\n variant=\"contained\"\r\n size=\"large\" \r\n startIcon={ {\r\n clickShowOportunities();\r\n }}\r\n color={showOportunities ? 'primary' : 'default'}\r\n variant=\"contained\"\r\n size=\"large\" \r\n startIcon={
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SummaryReportsCharts;\r\n","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useState, useRef, useEffect } from 'react'; \r\nimport { Sidebar } from 'primereact/sidebar';\r\nimport { Button } from 'primereact/button'; \r\nimport { Dropdown } from 'primereact/dropdown'; \r\nimport { ToggleButton } from 'primereact/togglebutton';\r\nimport { FormGroup, Label, Card, CardHeader, CardBody, Row, Col, CardTitle, CardFooter, InputGroup, InputGroupText } from 'reactstrap'; \r\nimport PocketMarginFilters from './PocketMarginFilters.js'; \r\nimport { useTranslation } from 'react-i18next';\r\nimport SummaryReportsCharts from '../SummaryReportsCharts/SummaryReportsCharts';\r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx'\r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\n\r\nconst PocketMarginFollowupSegment = (props) => {\r\n const { t } = useTranslation(['formulario','common']); \r\n const [IsViewFollowUpDetail, setIsViewFollowUpDetail] = useState(false);\r\n const [ChartFilters, setChartFilters] = useState({}); \r\n const [Anio, setAnio] = useState(props.Anio !== null ? props.Anio : null);\r\n const [Division, setDivision] = useState(props.Division !== null ? props.Division : null);\r\n const [Segmento, setSegmento] = useState(props.Segmento !== null ? props.Segmento : null);\r\n const [OpcionesAnios, setOpcionesAnios] = useState([]);\r\n const [Mes, setMes] = useState(props.Mes !== null ? props.Mes : null);\r\n const [OpcionesMeses, setOpcionesMeses] = useState([]);\r\n const [OpcionesDivision, setOpcionesDivision] = useState([]); \r\n const [OpcionesSegmento, setOpcionesSegmento] = useState([]); \r\n const [GrupoEstadistico3, setGrupoEstadistico3] = useState(props.GrupoEstadistico3 !== null ? props.GrupoEstadistico3 : null);\r\n const [OpcionesGrupoEstadistico3, setOpcionesGrupoEstadistico3] = useState([]); \r\n const [DisabledButton, setDisabledButton] = useState(true);\r\n const [OpcionesYesNo] = useState([{ value: 1, name: \"YES\"}, { value: 0, name: \"NO\" }]);\r\n // de momento se requiere que EsMostrarSoloConfiables este apagado....\r\n const [EsMostrarSoloConfiables, setEsMostrarSoloConfiables] = useState(props.filters.EsMostrarSoloConfiables !== undefined ? props.filters.EsMostrarSoloConfiables : 0);\r\n \r\n useEffect(() => {\r\n console.log('PocketMarginFollowupSegment props');\r\n console.log(props);\r\n let urlWebService = `${config.UrlApiProject}Rentabilidad/GetAnios`; \r\n let paramsService = null; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios);\r\n paramsService = {Anio:null};\r\n if (response.data.Anios.length > 0){\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n paramsService.Anio = response.data.Anios[0].ClaAnio;\r\n } \r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetMeses`; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses); \r\n \r\n if (props.Mes !== null){\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetDivisions`; \r\n paramsService = {AnioMes:props.Mes, EsmostrarTodos : 1};\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesDivision (response.data.Divisiones); \r\n \r\n if (props.Division !== null){\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetSegment`; \r\n paramsService = {AnioMes:props.Mes, ClaGerenciaRegional:props.Division};\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesSegmento(response.data.Segment);\r\n \r\n if (props.Segmento !== null){\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetGroupEstadistic3`; \r\n paramsService = {AnioMes:props.Mes, ClaGerenciaRegional:props.Division,ClaMarketSegment:props.Segmento};\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesGrupoEstadistico3(response.data.GrupoEstadistico3);\r\n setGrupoEstadistico3(props.GrupoEstadistico3); \r\n onViewDetailClick();\r\n });\r\n }\r\n \r\n });\r\n } \r\n }); \r\n }\r\n }); \r\n }); \r\n }, []); \r\n\r\n\r\n const onMonthChange = (anioMes) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {AnioMes:anioMes, EsmostrarTodos : 1};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetDivisions`; \r\n if (typeof(Division) === 'undefined' && Division === null\r\n || typeof(GrupoEstadistico3) === 'undefined' && GrupoEstadistico3 === null\r\n || typeof(Segmento) === 'undefined' && Segmento === null\r\n || typeof(anioMes) === 'undefined' && anioMes === null\r\n ){\r\n setIsViewFollowUpDetail(false); \r\n }\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setOpcionesDivision (response.data.Divisiones);\r\n setMes(anioMes);\r\n \r\n let filters = {\r\n ClaGerenciaRegional: null, \r\n ClaGrupoEstadistico3: null,\r\n Mes : anioMes,\r\n Anio : Anio\r\n }\r\n \r\n if (typeof(Division) !== 'undefined' && Division !== null\r\n && typeof(GrupoEstadistico3) !== 'undefined' && GrupoEstadistico3 !== null\r\n && typeof(Segmento) !== 'undefined' && Segmento !== null\r\n ){\r\n filters = {\r\n ClaGerenciaRegional: Division, \r\n ClaGrupoEstadistico3: GrupoEstadistico3,\r\n Mes : anioMes,\r\n Anio : Anio,\r\n AnioMes: anioMes,\r\n ClaMarketSegment: Segmento,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n } \r\n \r\n setChartFilters(filters);\r\n setIsViewFollowUpDetail(true); \r\n }\r\n else{\r\n setDivision(null);\r\n setSegmento(null);\r\n setOpcionesSegmento([]);\r\n setGrupoEstadistico3(null); \r\n setOpcionesGrupoEstadistico3([]);\r\n setIsViewFollowUpDetail(false);\r\n\r\n filters = {\r\n ClaGerenciaRegional: null, \r\n ClaGrupoEstadistico3: null,\r\n Mes : anioMes,\r\n Anio : Anio\r\n }\r\n }\r\n \r\n\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n \r\n\r\n }); \r\n \r\n };\r\n\r\n const onYearChange = (yearId) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {Anio:yearId};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetMeses`; \r\n // Meses\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setAnio(yearId);\r\n setMes(null);\r\n setDivision(null);\r\n setSegmento(null);\r\n setGrupoEstadistico3(null);\r\n setOpcionesMeses(response.data.Meses); \r\n setOpcionesDivision([]); \r\n setOpcionesSegmento([]);\r\n setOpcionesGrupoEstadistico3([]);\r\n setDisabledButton(true);\r\n setIsViewFollowUpDetail(false);\r\n\r\n const filters = {\r\n ClaGerenciaRegional: null, \r\n ClaGrupoEstadistico3: null,\r\n Mes : null,\r\n Anio : yearId\r\n }\r\n\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n }); \r\n };\r\n\r\n const onDivisionChange = (divisionId) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {AnioMes:Mes, ClaGerenciaRegional:divisionId};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetSegment`; \r\n setIsViewFollowUpDetail(false);\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setGrupoEstadistico3(null);\r\n setSegmento(null);\r\n setOpcionesSegmento(response.data.Segment);\r\n setDivision(divisionId);\r\n \r\n const filters = {\r\n ClaGerenciaRegional: divisionId, \r\n ClaGrupoEstadistico3: null,\r\n Mes : Mes,\r\n Anio : Anio,\r\n ClaMarketSegment : Segmento,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n }\r\n\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n }); \r\n };\r\n\r\n const onSegmentoChange = (segmentoId) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {AnioMes:Mes, ClaGerenciaRegional:Division,ClaMarketSegment:segmentoId};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetGroupEstadistic3`; \r\n setIsViewFollowUpDetail(false);\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setGrupoEstadistico3(null);\r\n setSegmento(segmentoId);\r\n setOpcionesGrupoEstadistico3(response.data.GrupoEstadistico3);\r\n const filters = {\r\n ClaGerenciaRegional: Division, \r\n ClaGrupoEstadistico3: null,\r\n Mes : Mes,\r\n Anio : Anio,\r\n ClaMarketSegment:segmentoId,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n }\r\n\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n }); \r\n };\r\n\r\n const onGrupoEstadistico3Change = (grupoEstaditico3Id) => { \r\n setGrupoEstadistico3(grupoEstaditico3Id);\r\n setDisabledButton(false);\r\n const filters = {\r\n ClaGerenciaRegional: Division, \r\n ClaGrupoEstadistico3: grupoEstaditico3Id,\r\n AnioMes: Mes,\r\n ClaMarketSegment: Segmento,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n }\r\n\r\n setChartFilters(filters);\r\n setIsViewFollowUpDetail(true);\r\n\r\n if (props.onSelectionChange !== null){\r\n const filters = {\r\n ClaGerenciaRegional: Division, \r\n ClaGrupoEstadistico3: grupoEstaditico3Id,\r\n Mes : Mes,\r\n Anio : Anio,\r\n ClaMarketSegment: Segmento,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n }\r\n\r\n props.onSelectionChange(filters); \r\n }\r\n };\r\n\r\n const onViewDetailClick = ( ) => { \r\n const filters = {\r\n ClaGerenciaRegional: Division, \r\n ClaGrupoEstadistico3: GrupoEstadistico3,\r\n AnioMes: Mes,\r\n ClaMarketSegment: Segmento,\r\n EsMostrarSoloConfiables:EsMostrarSoloConfiables\r\n }\r\n \r\n setIsViewFollowUpDetail(false);\r\n if (typeof(GrupoEstadistico3) !== 'undefined' && GrupoEstadistico3 !== null){\r\n\r\n setChartFilters(filters);\r\n setIsViewFollowUpDetail(true);\r\n }\r\n };\r\n\r\n return ( \r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n setIsViewFollowUpDetail(value)} /> :<>}\r\n \r\n
\r\n \r\n )\r\n } \r\nexport default PocketMarginFollowupSegment; \r\n\r\n ","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n\r\nimport React, { useState, useEffect } from 'react'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils';\r\nimport '../../assets/css/PivotGridBase.css'; \r\n \r\nimport DataGrid, {\r\n Column, \r\n ColumnFixing, \r\n StateStoring,\r\n Paging\r\n } from 'devextreme-react/data-grid'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Row, Col } from 'reactstrap'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx' \r\nimport IconButton from '@material-ui/core/IconButton'; \r\nimport OpenInNewIcon from '@material-ui/icons/OpenInNew';\r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\n\r\nconst PocketInconsistenciesSummary = (props) => { \r\n \r\n const { t } = useTranslation(['formulario','common']); \r\n\r\n const [Anio, setAnio] = useState(props.Anio !== null ? props.Anio : null); \r\n const [OpcionesAnios, setOpcionesAnios] = useState([]);\r\n const [Mes, setMes] = useState(props.AnioMes !== null ? props.AnioMes : null);\r\n const [OpcionesMeses, setOpcionesMeses] = useState([]);\r\n const [RowsData, setRowsData] = useState(props.dataSource === null ? [] : props.dataSource);\r\n const [Division, setDivision] = useState(props.ClaGerenciaRegional !== null ? props.ClaGerenciaRegional : null);\r\n const [OpcionesDivision, setOpcionesDivision] = useState([]); \r\n const [EsMostrarSoloConfiables, setEsMostrarSoloConfiables] = useState(props.filters.EsMostrarSoloConfiables !== undefined ? props.filters.EsMostrarSoloConfiables : 0);\r\n \r\n function onCellPrepared(e) { \r\n if(e.rowType === \"data\" && e.data.ClaGerenciaRegional !== null && e.data.ClaGrupoEstadistico3 === null) {\r\n e.cellElement.style.backgroundColor = \"#C0C6CF\";\r\n e.cellElement.style.color = \"#777\";\r\n e.cellElement.style.fontWeight = \"bold\";\r\n }\r\n if(e.rowType === \"data\" && e.data.ClaMarketSegment !== null && e.data.ClaGrupoEstadistico3 === null) {\r\n e.cellElement.style.backgroundColor = \"#EDEDED\"; \r\n e.cellElement.style.color = \"#777\"; \r\n }\r\n if(e.rowType === \"data\" && e.data.ClaGrupoEstadistico3 !== null) {\r\n e.cellElement.style.backgroundColor = \"#FFFFFF\";\r\n e.cellElement.style.color = \"#888888\";\r\n }\r\n } \r\n \r\n useEffect(() => { \r\n let urlWebService = `${config.UrlApiProject}Rentabilidad/GetAnios`; \r\n let paramsService = null; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios);\r\n paramsService = {Anio : Anio === null ? response.data.Anios[0].ClaAnio : Anio };\r\n if (response.data.Anios.length > 0 && Anio == null){\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n paramsService.Anio = response.data.Anios[0].ClaAnio;\r\n } \r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetMeses`; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses); \r\n \r\n if (Mes !== null){\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetDivisions`; \r\n paramsService = {AnioMes:Mes};\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesDivision (response.data.Divisiones); \r\n \r\n if (typeof(Division) !== \"undefined\" && Division !== null){ \r\n refreshInconsitencies();\r\n }\r\n }); \r\n }\r\n\r\n }); \r\n }); \r\n }, [props.ClaGerenciaRegional]); \r\n\r\n\r\n const onMonthChange = (anioMes) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {AnioMes:anioMes};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetDivisions`; \r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setMes(anioMes); \r\n setOpcionesDivision (response.data.Divisiones); \r\n setDivision(null); \r\n setRowsData([]); \r\n\r\n const filters = {\r\n Anio,\r\n AnioMes: anioMes\r\n }\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n }); \r\n \r\n }; \r\n\r\n const onYearChange = (yearId) => { \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {Anio:yearId};\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetMeses`; \r\n // Meses\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setAnio(yearId);\r\n \r\n setMes(null); \r\n setOpcionesMeses(response.data.Meses); \r\n setOpcionesDivision([]); \r\n setRowsData([]); \r\n \r\n const filters = {\r\n Anio: yearId\r\n }\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n }); \r\n };\r\n\r\n const onDivisionChange = (divisionId) => { \r\n const filters = {\r\n ClaGerenciaRegional: divisionId, \r\n AnioMes : Mes,\r\n Anio\r\n }\r\n if (props.onSelectionChange !== null){\r\n props.onSelectionChange(filters); \r\n }\r\n setDivision(divisionId);\r\n \r\n // refreshInconsitencies (divisionId) ;\r\n };\r\n\r\n\r\n const refreshInconsitencies = (divisionId) => { \r\n const urlWebService = `${config.UrlApiProject}Rentabilidad/GetDetalleInconsistenciesPM`;\r\n\r\n const paramsService = {\r\n Anio,\r\n AnioMes: Mes,\r\n ClaGerenciaRegional: Division === null ? divisionId : Division,\r\n EsMostrarSoloConfiables\r\n };\r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setRowsData(response.data.RdSDetalleInconsistenciesPM); \r\n }); \r\n }; \r\n\r\n const descriptionColumn = (row) => { \r\n \r\n if (row.data.ClaGrupoEstadistico3 === null){\r\n return <>{row.data.Description}\r\n }\r\n\r\n return ( \r\n <>{row.data.Description} onClickDetailProduct(row.data)}> \r\n );\r\n } \r\n\r\n const onClickDetailProduct = (row) => { \r\n if (props.onClickDetailProduct !== null){\r\n props.onClickDetailProduct(row);\r\n } \r\n }\r\n\r\n return ( \r\n <> \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n } \r\n \r\n \r\n export default PocketInconsistenciesSummary; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; \r\nimport '../../assets/css/PivotGridBase.css'; \r\nimport $ from 'jquery';\r\n \r\nimport PivotGrid, {\r\n FieldChooser ,\r\n StateStoring\r\n} from 'devextreme-react/pivot-grid';\r\n \r\nimport { useTranslation } from 'react-i18next'; \r\n\r\nconst PocketMarginSummaryRDS = (props) => { \r\n \r\n \r\n const { t, i18n } = useTranslation(['formulario','common']); \r\n \r\n const getPivotDataSource = () => {\r\n return {\r\n fields: [{\r\n caption: t('formulario:Division'),\r\n width: 250,\r\n dataField: 'NomGrupoEstadistico1',\r\n area: 'row', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:Segment'),\r\n dataField: 'NomSegmento',\r\n width: 250,\r\n area: 'row', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:StatisticalGpo3'),\r\n dataField: 'NomGrupoEstadistico3',\r\n width: 250,\r\n area: 'row', \r\n isMeasure: false\r\n }/* , {\r\n caption: t('formulario:AccountName'),\r\n dataField: 'NomClienteCuenta', \r\n width: 350, \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:Zone'),\r\n dataField: 'NomZona', \r\n width: 250, \r\n isMeasure: false\r\n } */, {\r\n caption: t('formulario:ProducerLocation'),\r\n width: 250,\r\n dataField: 'NomUbicacionOrigen', \r\n isMeasure: false\r\n }, {\r\n dataField: 'FechaFactura',\r\n dataType: 'date',\r\n area: 'column', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:ToneladasRDS'),\r\n dataField: 'Toneladas', \r\n summaryType: 'sum', \r\n dataType: 'number',\r\n format: 'fixedPoint',\r\n width: 50,\r\n area: 'data', \r\n isMeasure: true\r\n }, {\r\n caption: t('formulario:Pocket Price'),\r\n dataField: 'PocketPrice', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint', \r\n visible:true,\r\n isMeasure: true,\r\n width: 50\r\n }, {\r\n caption: t('formulario:PocketMargin'),\r\n dataField: 'PocketMargin', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint', \r\n visible:true,\r\n isMeasure: true,\r\n width: 50\r\n }, {\r\n caption: t('formulario:TonsReliab'),\r\n dataField: 'TonConfiables', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint',\r\n area: 'data', \r\n width: 50 ,\r\n isMeasure: true\r\n }, {\r\n caption: t('formulario:PorcReliab'), \r\n summaryType: 'sum', \r\n area: 'data', \r\n dataType: 'number', \r\n format: 'percent', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) { \r\n return e.value('TonConfiables', true) !== 0 ? e.value('TonConfiables', true) / e.value('Toneladas', true) : 0;\r\n } \r\n }, {\r\n caption: t('formulario:PMPriceByton'), \r\n summaryType: 'sum', \r\n area: 'data', \r\n dataType: 'number',\r\n format:'fixedPoint', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) {\r\n return e.value('TonConfiables', true) !== 0 ? e.value('PocketMargin', true) / e.value('TonConfiables', true) : 0;\r\n } \r\n }, {\r\n caption: t('formulario:PMPorc'), \r\n summaryType: 'sum', \r\n area: 'data',\r\n dataType: 'number',\r\n format: 'percent', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) {\r\n return e.value('PocketPrice', true) !== 0 ? e.value('PocketMargin', true) / e.value('PocketPrice', true) : 0;\r\n }\r\n }\r\n ],\r\n store: []\r\n }\r\n } \r\n\r\n const defaultValues = getPivotDataSource();\r\n \r\n defaultValues.store = props.data; \r\n \r\n const dataSource = new PivotGridDataSource(defaultValues) ; \r\n\r\n \r\n\r\n function isHeaderCell(cell) {\r\n return (cell.area === 'column' && cell.type === 'D');\r\n }\r\n \r\n function isDataCell(cell) {\r\n return (cell.area === 'data' && cell.rowType === 'D' && cell.columnType === 'D');\r\n }\r\n \r\n function isRowCell(cell){\r\n return (cell.area === 'row' && cell.type === 'D');\r\n }\r\n\r\n \r\n\r\n function onCellPrepared(e) { \r\n e.cell.area = e.area;\r\n \r\n\r\n // console.log('selectDx: ', selectDx );\r\n \r\n if(isDataCell(e.cell) || isTotalCell(e.cell) || isHeaderCell(e.cell) || isRowCell(e.cell)) { \r\n e.cellElement.classList.add(getConditionalAppearance(e.cell)); \r\n }\r\n }\r\n\r\n \r\n function isTotalCell(cell) {\r\n return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');\r\n }\r\n \r\n function getConditionalAppearance(cell) {\r\n if(isTotalCell(cell)) { \r\n return 'dx-total-row'\r\n } \r\n \r\n if(isHeaderCell(cell)) {\r\n // cuando es el encabezado principal \r\n if (cell.isLast === true){\r\n return 'dx-column-header'\r\n }\r\n \r\n return `dx-header-level-${ cell.path.length.toString() }`;\r\n } \r\n \r\n if(isRowCell(cell)) {\r\n return `dx-row-level-${ cell.path.length.toString() }`;\r\n } \r\n \r\n return 'dx-cell';\r\n } \r\n \r\n \r\n\r\n return ( \r\n\r\n <> \r\n \r\n
\r\n Do not forget to hit Apply Filter button before to close filters section.\r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.PM-Step-2',\r\n content: (\r\n <>\r\n
\r\n
\r\n Use filter icon located in header of the column to delimitate the data showed in the table. \r\n \r\n ),\r\n } ,\r\n {\r\n target: '.PM-Step-4',\r\n content: (\r\n <>\r\n
\r\n
\r\n Data will be filtered automaticaly once you select all filters.\r\n \r\n ), \r\n } ,\r\n {\r\n target: '.PM-Step-5',\r\n content: (\r\n <>\r\n
\r\n
\r\n Data will be filtered automaticaly once you select all filters inside of this option.\r\n \r\n ), \r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourPocketMargin;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport \"./ToogleSwitch.scss\";\r\n\r\n/*\r\nToggle Switch Component\r\nNote: id, checked and onChange are required for ToggleSwitch component to function. The props name, small, disabled\r\nand optionLabels are optional.\r\nUsage: setValue(checked)}} />\r\n*/\r\n\r\nconst FieldToogleSwitch = ({\r\n id,\r\n name,\r\n checked,\r\n onChange,\r\n optionLabels,\r\n small,\r\n disabled\r\n}) => {\r\n function handleKeyPress(e) {\r\n if (e.keyCode !== 32) return;\r\n\r\n e.preventDefault();\r\n onChange(!checked);\r\n }\r\n\r\n const uniqueID = Math.floor(Math.random() * 1000) \r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ); \r\n};\r\nexport default PocketMarginResults;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter, \r\n CardTitle, \r\n Row,\r\n Col \r\n } from \"reactstrap\";\r\n import { Sparklines, SparklinesLine, SparklinesBars } from 'react-sparklines';\r\n import PropTypes from 'prop-types' \r\nimport { Switch } from 'react-router';\r\nimport SparkLine from \"../SparkLine/SparkLine.jsx\"\r\n\r\nconst CardSparkLine = (props) => {\r\n\r\n const options = {\r\n xAxis: { \r\n categories: props.categories\r\n },\r\n series: [{ \r\n data: props.series \r\n }],\r\n tooltip: {\r\n headerFormat: `${props.title}
{point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n // console.log('spark');\r\n // console.log(options);\r\n\r\n const chartTitle = props.title;\r\n let colorChart = \"#cccccc\";\r\n let chartValue = \"\"; \r\n \r\n let headerClass = \"\";\r\n\r\n switch (props.theme) {\r\n case \"blue\":\r\n headerClass = \"hard-blue\";\r\n colorChart = \"#0d2034\";\r\n break;\r\n case \"lightBlue\":\r\n headerClass = \"light-blue\";\r\n colorChart = \"#00b7c3\";\r\n break;\r\n case \"red\":\r\n headerClass = \"light-red\";\r\n colorChart = \"#ef2f40\";\r\n break;\r\n case \"green\":\r\n headerClass = \"light-green\";\r\n colorChart = \"#20d891\";\r\n break;\r\n case \"gray\":\r\n headerClass = \"hard-gray\";\r\n colorChart = \"#636465\";\r\n break;\r\n case \"skyBlue\":\r\n headerClass = \"sky-blue\";\r\n colorChart = \"#457dcc\";\r\n break;\r\n case \"azulFuerte\":\r\n headerClass = \"azul-fuerte\";\r\n colorChart = \"#2E4480\";\r\n break;\r\n case \"azulMedio\":\r\n headerClass = \"azul-medio\";\r\n colorChart = \"#215ABF\";\r\n break;\r\n default:\r\n headerClass = \"hard-blue\";\r\n colorChart = \"#0d2034\";\r\n break;\r\n } \r\n \r\n let sufijo = \"\";\r\n\r\n let finalValue = props.footerValue == null ? 0 : props.footerValue;\r\n\r\n if (finalValue > 100000){\r\n finalValue /= 1000.0;\r\n sufijo = \"K\";\r\n }\r\n else{\r\n sufijo = \"\";\r\n } \r\n\r\n chartValue = new Intl.NumberFormat('en-US').format(finalValue);\r\n\r\n return ( \r\n <> \r\n\r\n \r\n {chartTitle} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n )\r\n} \r\n\r\n \r\nexport default CardSparkLine; \r\n\r\n ","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, {useState , useEffect } from 'react'; \r\nimport CardSparkLine from '../../../components/Charts/Card-SparkLine/CardSparkLine';\r\nimport { Row, Col } from 'reactstrap';\r\nimport Highcharts from 'highcharts';\r\nimport HighchartsHeatmap from \"highcharts/modules/heatmap\";\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport queryString from 'query-string' \r\nimport moment from 'moment'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Dialog } from 'primereact/dialog'; \r\nimport { Tag } from 'primereact/tag';\r\n\r\nHighchartsHeatmap(Highcharts);\r\n\r\nconst DailyOperationDashboard = (props) => {\r\n \r\n \r\n const { t, i18n } = useTranslation(['productionDashboard', 'common']);\r\n \r\n let defaultZona;\r\n let defaultFechaInicial = null;\r\n let defaultFechaFinal= null;\r\n let defaultClaCelda= null;\r\n let defaultClaTurno= null;\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n defaultZona = params !== undefined ? params.ClaZona : 0;\r\n }\r\n else {\r\n defaultZona = props.filters.ClaZona !== undefined ? props.filters.ClaZona : 0;\r\n defaultFechaInicial = props.filters.FechaInicial !== undefined ? props.filters.FechaInicial : null;\r\n defaultFechaFinal = props.filters.FechaFinal !== undefined ? props.filters.FechaFinal : null;\r\n defaultClaCelda = props.filters.ClaCelda !== undefined ? props.filters.ClaCelda : null;\r\n defaultClaTurno= props.filters.ClaTurno !== undefined ? props.filters.ClaTurno : null;\r\n } \r\n\r\n const [claZona, setClaZona] = useState(defaultZona);\r\n const [fechaInicial, setFechaInicial] = useState(null);\r\n const [fechaFinal, setFechaFinal] = useState(null);\r\n const [nomZona, setNomZona] = useState('');\r\n const [NomTurno, setNomTurno] = useState('');\r\n const [ClaTurno, setClaTurno] = useState(defaultClaTurno);\r\n const [totalDias, setTotalDias] = useState('');\r\n const [tonsData, setTonsData] = useState([]);\r\n const [tonsTotal, setTonsTotal] = useState(0);\r\n const [cajasData, setCajasData] = useState([]);\r\n const [cajasTotal, setCajasTotal] = useState(0);\r\n const [utilizacionData, setUtilizacionData] = useState([]);\r\n const [utilizacionTotal, setUtilizacionTotal] = useState(0);\r\n const [disponibilidadData, setDisponibilidadData] = useState([]);\r\n const [disponibilidadTotal, setDisponibilidadTotal] = useState(0);\r\n const [eficienciaData, setEficienciaData] = useState([]);\r\n const [eficienciaTotal, setEficienciaTotal] = useState(0); \r\n const [oEEData, setOEEData] = useState([]);\r\n const [oEETotal, setOEETotal] = useState(0);\r\n const [utilizationSeries, setUtilizationSeries] = useState([]);\r\n const [utilizationXCategoriesFecha, setUtilizationXCategoriesFecha] = useState([]);\r\n const [utilizationYCategoriesClaCelda, setUtilizationYCategoriesClaCelda] = useState([]);\r\n const [utilizationXCategories, setUtilizationXCategories] = useState([]);\r\n const [utilizationYCategories, setUtilizationYCategories] = useState([]);\r\n const [openModal, setOpenModal] = useState(false);\r\n const [cellValue, setCellValue] = useState(null);\r\n const [titleRank1, setTitleRank1] = useState('');\r\n const [titleRank2, setTitleRank2] = useState('');\r\n const [downtimeByReasonRank1Categories, setDowntimeByReasonRank1Categories] = useState([]);\r\n const [downtimeByReasonRank1Series, setDowntimeByReasonRank1Series] = useState([]);\r\n const [downtimeByReasonRank2Categories, setDowntimeByReasonRank2Categories] = useState([]);\r\n const [downtimeByReasonRank2Series, setDowntimeByReasonRank2Series] = useState([]);\r\n\r\n const onSearch = (filters) => {\r\n \r\n let urlWebService = `${config.UrlApiProject}Produccion/GetGraficoUtilizationData`; \r\n \r\n const paramsService = {\r\n ...filters,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setUtilizationSeries(response.data.series);\r\n setUtilizationYCategories(response.data.yAxisCategories);\r\n setUtilizationXCategories(response.data.xAxisCategories); \r\n setUtilizationYCategoriesClaCelda(response.data.arregloClaCelda); \r\n setUtilizationXCategoriesFecha(response.data.arregloFecha); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n // como no dependen entre si los hacemos asincronos todos...\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoTonsData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setTonsData(response.data.series);\r\n setTonsTotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoCajasData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setCajasData(response.data.series);\r\n setCajasTotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoUtilizationCardData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setUtilizacionData(response.data.series);\r\n setUtilizacionTotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoDisponibilidadCardData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setDisponibilidadData(response.data.series);\r\n setDisponibilidadTotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoEficienciaCardData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setEficienciaData(response.data.series);\r\n setEficienciaTotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoOEECardData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOEEData(response.data.series);\r\n setOEETotal(response.data.total); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n };\r\n \r\n const onSearchGrafica = (filters) => {\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperationDowntimePareto`; \r\n filters.EsTipoPareto = 3;\r\n filters.DetalleRank = null;\r\n filters.ClaZona = props.filters.ClaZona;\r\n filters.FechaInicial = filters.Fecha;\r\n filters.FechaFinal = filters.Fecha;\r\n filters.ClaTurno = ClaTurno;\r\n let paramsService = {\r\n ...filters,\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n if (response.data.series.length >0 ){ \r\n response.data.series[0] = {\r\n y: response.data.series[0] ,\r\n color: '#ef2f40'\r\n } \r\n\r\n response.data.series[response.data.series.length-1] = {\r\n y: response.data.series[response.data.series.length-1] ,\r\n color: '#e4e4e4'\r\n } \r\n }\r\n setTitleRank1(response.data.title);\r\n setDowntimeByReasonRank1Series(response.data.series);\r\n setDowntimeByReasonRank1Categories(response.data.categories); \r\n });\r\n filters.FechaInicial = props.filters.FechaInicial;\r\n filters.FechaFinal = props.filters.FechaFinal;\r\n paramsService = {\r\n ...filters,\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n if (response.data.series.length >0 ){ \r\n response.data.series[0] = {\r\n y: response.data.series[0] ,\r\n color: '#ef2f40'\r\n } \r\n response.data.series[response.data.series.length-1] = {\r\n y: response.data.series[response.data.series.length-1] ,\r\n color: '#e4e4e4'\r\n } \r\n }\r\n setTitleRank2(response.data.title);\r\n setDowntimeByReasonRank2Series(response.data.series);\r\n setDowntimeByReasonRank2Categories(response.data.categories); \r\n });\r\n }\r\n \r\n const utilizationHeatMap = {\r\n chart: {\r\n type: 'heatmap',\r\n marginTop: 40,\r\n marginBottom: 80,\r\n plotBorderWidth: 1\r\n }, \r\n \r\n title: {\r\n text: t('productionDashboard:chartUtilizationTitle') \r\n },\r\n \r\n xAxis: { \r\n categories: utilizationXCategories\r\n },\r\n \r\n yAxis: { \r\n title:\"\",\r\n categories: utilizationYCategories,\r\n reversed: true\r\n },\r\n\r\n tooltip: {\r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${t('productionDashboard:chartUtilizationTitle') }
${t('formulario:Cell')}: ${ series.yAxis.categories[y] }
${t('formulario:Day')}: ${ series.xAxis.categories[point.x] }
${t('formulario:Value')}: ${Highcharts.numberFormat(point.value,1) }`;\r\n }\r\n },\r\n /*\r\n colorAxis: {\r\n \r\n min: 0,\r\n max:100, \r\n stops: [\r\n [0, '#d9d9d9'], \r\n [0.01, '#c00000'], \r\n [0.79, '#c00000'], \r\n [0.82, '#fafd00'], \r\n [0.83, '#00b050'] \r\n ]\r\n },\r\n */\r\n legend: {\r\n align: 'right',\r\n layout: 'vertical',\r\n margin: 0,\r\n verticalAlign: 'top',\r\n y: 25,\r\n symbolHeight: 280\r\n }, \r\n \r\n series: [{\r\n name: t('productionDashboard:chartUtilizationTitle') ,\r\n borderWidth: 1,\r\n color: '#e4e4e4',\r\n cursor : 'pointer',\r\n data: utilizationSeries,\r\n showInLegend:false,\r\n dataLabels: {\r\n enabled: true,\r\n color: '#FFFFFF'\r\n },\r\n point: {\r\n events: {\r\n click: function () {\r\n const { x, y, point, series } = this; \r\n setCellValue(series.yAxis.categories[y]);\r\n setOpenModal(true);\r\n const filtersData = {}\r\n filtersData.xAxis = series.xAxis.categories[x];\r\n filtersData.yAxis = series.yAxis.categories[y];\r\n filtersData.Fecha = utilizationXCategoriesFecha[x];\r\n filtersData.claCelda = utilizationYCategoriesClaCelda[y];\r\n onSearchGrafica(filtersData);\r\n }\r\n }\r\n }\r\n }],\r\n }\r\n\r\n \r\n \r\n useEffect(() => {\r\n \r\n console.log('turno', defaultClaTurno);\r\n const filter = {} \r\n filter.ClaZona = defaultZona; \r\n filter.FechaInicial = defaultFechaInicial\r\n filter.FechaFinal = defaultFechaFinal\r\n filter.ClaCelda = defaultClaCelda\r\n filter.ClaTurno = defaultClaTurno\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n const paramsService = {\r\n ...filter,\r\n }; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(response.data.FechaInicial);\r\n setFechaFinal(response.data.FechaFinal); \r\n setNomZona(response.data.NomZona); \r\n setTotalDias(response.data.TotalDias); \r\n setClaTurno(response.data.ClaTurno); \r\n setNomTurno(response.data.NomTurno); \r\n const filter = {}\r\n filter.ClaZona = response.data.ClaZona;\r\n filter.FechaInicial = response.data.FechaInicial;\r\n filter.FechaFinal = response.data.FechaFinal;\r\n filter.ClaCelda = response.data.ClaCelda;\r\n filter.ClaTurno = response.data.ClaTurno;\r\n onSearch(filter);\r\n \r\n }, () => {}, false, false\r\n ); \r\n \r\n }, [props.filters]);\r\n\r\n \r\n const closeModal = () => {\r\n setOpenModal(false);\r\n }\r\n \r\n const onOpenModal = () => {\r\n setOpenModal(true)\r\n }\r\n\r\n const paretoReasonChartRank1 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank1\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank1Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank1Series\r\n }]\r\n \r\n }\r\n\r\n const paretoReasonChartRank2 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank2\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank2Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank2Series\r\n }]\r\n \r\n }\r\n\r\n const headerDialog = ( \r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n} \r\n\r\n \r\nexport default DailyOperationDashboard; \r\n","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, {useState , useEffect } from 'react'; \r\nimport CardSparkLine from '../../../components/Charts/Card-SparkLine/CardSparkLine';\r\nimport { Row, Col } from 'reactstrap';\r\nimport Highcharts from 'highcharts';\r\nimport HighchartsPareto from \"highcharts/modules/pareto\";\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport queryString from 'query-string' \r\nimport moment from 'moment'\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nHighchartsPareto(Highcharts);\r\n\r\nconst OperationDowntimesParetos = (props) => {\r\n\r\n \r\n const { t, i18n } = useTranslation(['productionDashboard', 'common']);\r\n\r\n let defaultZona;\r\n let defaultFechaInicial = null;\r\n let defaultFechaFinal= null;\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n defaultZona = params !== undefined ? params.ClaZona : 0;\r\n }\r\n else {\r\n defaultZona = props.filters.ClaZona !== undefined ? props.filters.ClaZona : 0;\r\n defaultFechaInicial = props.filters.FechaInicial !== undefined ? props.filters.FechaInicial : null;\r\n defaultFechaFinal = props.filters.FechaFinal !== undefined ? props.filters.FechaFinal : null;\r\n }\r\n \r\n const [claZona, setClaZona] = useState(defaultZona);\r\n const [fechaInicial, setFechaInicial] = useState(null);\r\n const [fechaFinal, setFechaFinal] = useState(null);\r\n const [nomZona, setNomZona] = useState('');\r\n const [totalDias, setTotalDias] = useState('');\r\n\r\n \r\n const [downtimeByCellCategories, setDowntimeByCellCategories] = useState([]);\r\n const [downtimeByCellSeries, setDowntimeByCellSeries] = useState([]);\r\n const [downtimeByReasonRank1Categories, setDowntimeByReasonRank1Categories] = useState([]);\r\n const [downtimeByReasonRank1Series, setDowntimeByReasonRank1Series] = useState([]);\r\n \r\n const [downtimeByReasonRank2Categories, setDowntimeByReasonRank2Categories] = useState([]);\r\n const [downtimeByReasonRank2Series, setDowntimeByReasonRank2Series] = useState([]);\r\n\r\n const [titleRank1, setTitleRank1] = useState('');\r\n const [titleRank2, setTitleRank2] = useState('');\r\n\r\n const formatDecimalValue = (x, y) => { \r\n return Highcharts.numberFormat( y,2); \r\n }\r\n\r\n const onSearch = (filters) => {\r\n \r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperationDowntimePareto`; \r\n \r\n filters.EsTipoPareto = 2;\r\n\r\n let paramsService = {\r\n ...filters,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n \r\n if (response.data.series.length >0 ){ \r\n response.data.series[0] = {\r\n y: response.data.series[0] ,\r\n color: '#ef2f40'\r\n } \r\n\r\n response.data.series[response.data.series.length-1] = {\r\n y: response.data.series[response.data.series.length-1] ,\r\n color: '#e4e4e4'\r\n } \r\n\r\n \r\n }\r\n\r\n setDowntimeByCellSeries(response.data.series);\r\n setDowntimeByCellCategories(response.data.categories); \r\n });\r\n \r\n filters.EsTipoPareto = 3;\r\n filters.DetalleRank = 1;\r\n\r\n paramsService = {\r\n ...filters,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n if (response.data.series.length >0 ){ \r\n response.data.series[0] = {\r\n y: response.data.series[0] ,\r\n color: '#ef2f40'\r\n } \r\n\r\n response.data.series[response.data.series.length-1] = {\r\n y: response.data.series[response.data.series.length-1] ,\r\n color: '#e4e4e4'\r\n } \r\n\r\n \r\n }\r\n\r\n setTitleRank1(response.data.title);\r\n setDowntimeByReasonRank1Series(response.data.series);\r\n setDowntimeByReasonRank1Categories(response.data.categories); \r\n });\r\n\r\n filters.EsTipoPareto = 3;\r\n filters.DetalleRank = 2;\r\n\r\n paramsService = {\r\n ...filters,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n if (response.data.series.length >0 ){ \r\n response.data.series[0] = {\r\n y: response.data.series[0] ,\r\n color: '#ef2f40'\r\n } \r\n\r\n response.data.series[response.data.series.length-1] = {\r\n y: response.data.series[response.data.series.length-1] ,\r\n color: '#e4e4e4'\r\n } \r\n\r\n \r\n }\r\n\r\n setTitleRank2(response.data.title);\r\n setDowntimeByReasonRank2Series(response.data.series);\r\n setDowntimeByReasonRank2Categories(response.data.categories); \r\n });\r\n \r\n };\r\n const paretoChart = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column' \r\n },\r\n title: {\r\n text: t('productionDashboard:chartDownTimeByCell')\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByCellCategories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [\r\n {\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByCellSeries\r\n }]\r\n \r\n }\r\n\r\n const paretoReasonChartRank1 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank1\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank1Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank1Series\r\n }]\r\n \r\n }\r\n\r\n const paretoReasonChartRank2 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank2\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank2Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank2Series\r\n }]\r\n \r\n }\r\n\r\n useEffect(() => {\r\n const filter = {}\r\n filter.ClaZona = defaultZona;\r\n filter.FechaInicial = defaultFechaInicial\r\n filter.FechaFinal = defaultFechaFinal\r\n \r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n \r\n const paramsService = {\r\n ...filter,\r\n }; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(response.data.FechaInicial);\r\n setFechaFinal(response.data.FechaFinal); \r\n setNomZona(response.data.NomZona); \r\n setTotalDias(response.data.TotalDias); \r\n const filter = {}\r\n filter.ClaZona = response.data.ClaZona;\r\n filter.FechaInicial = response.data.FechaInicial;\r\n filter.FechaFinal = response.data.FechaFinal;\r\n onSearch(filter);\r\n \r\n }\r\n ); \r\n \r\n }, [props.filters]);\r\n\r\n return ( \r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n} \r\n\r\n \r\nexport default OperationDowntimesParetos; \r\n","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, {useState , useEffect } from 'react'; \r\nimport CardSparkLine from '../../../components/Charts/Card-SparkLine/CardSparkLine';\r\nimport { \r\n Row, \r\n Col,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardTitle,\r\n CardFooter\r\n} from 'reactstrap';\r\nimport Highcharts from 'highcharts'; \r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport HighchartsHeatmap from \"highcharts/modules/heatmap\";\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport queryString from 'query-string' \r\nimport moment from 'moment'\r\nimport { useTranslation } from 'react-i18next';\r\nimport SparkLine from '../../../components/Charts/SparkLine/SparkLine.jsx'\r\nimport { Tag } from 'primereact/tag';\r\n \r\nHighchartsHeatmap(Highcharts);\r\n\r\nconst OperationScrapDashboard = (props) => {\r\n\r\n \r\n const { t, i18n } = useTranslation(['productionDashboard', 'common']);\r\n \r\n let defaultZona;\r\n let defaultFechaInicial = null;\r\n let defaultFechaFinal= null;\r\n\r\n if(props.location!==undefined){ \r\n const params = queryString.parse(props.location.search);\r\n defaultZona = params !== undefined ? params.ClaZona : 0;\r\n }\r\n else {\r\n defaultZona = props.filters.ClaZona !== undefined ? props.filters.ClaZona : 0;\r\n defaultFechaInicial = props.filters.FechaInicial !== undefined ? props.filters.FechaInicial : null;\r\n defaultFechaFinal = props.filters.FechaFinal !== undefined ? props.filters.FechaFinal : null;\r\n }\r\n \r\n const [claZona, setClaZona] = useState(defaultZona);\r\n const [fechaInicial, setFechaInicial] = useState(null);\r\n const [fechaFinal, setFechaFinal] = useState(null);\r\n const [nomZona, setNomZona] = useState('');\r\n const [totalDias, setTotalDias] = useState('');\r\n const [scrapData, setScrapData] = useState([]);\r\n const [scrapTotal, setScrapTotal] = useState(0);\r\n const [scrapControllable, setScrapControllableData] = useState([]);\r\n const [scrapControllableCategories, setScrapControllableCategories] = useState(0);\r\n const [scrapSeries, setScrapSeries] = useState([]);\r\n const [scrapXCategories, setScrapXCategories] = useState([]);\r\n const [scrapYCategories, setScrapYCategories] = useState([]);\r\n const [sparkLinesChartValues, setSparkLinesChartValues] = useState([]);\r\n\r\n const onSearch = (filters) => {\r\n let urlWebService = `${config.UrlApiProject}Produccion/GetGraficoScrapHeatMapData`; \r\n \r\n const paramsService = {\r\n ...filters,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setScrapSeries(response.data.series);\r\n setScrapYCategories(response.data.yAxisCategories);\r\n setScrapXCategories(response.data.xAxisCategories); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoScrapData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setSparkLinesChartValues(response.data.series);\r\n setScrapData(response.data.series);\r\n setScrapTotal(response.data.total != null ? response.data.total.toFixed(1) : 0); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n\r\n urlWebService = `${config.UrlApiProject}Produccion/GetGraficoControllableData`; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setScrapControllableData(response.data.series); \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n \r\n };\r\n \r\n const cfgCtrvsUnCtr = { \r\n chart: {\r\n plotBackgroundColor: null,\r\n plotBorderWidth: null,\r\n plotShadow: false,\r\n type: 'pie'\r\n },\r\n title: {\r\n text: null\r\n },\r\n tooltip: {\r\n pointFormat: '{series.name}: {point.percentage:.1f}%'\r\n },\r\n accessibility: {\r\n point: {\r\n valueSuffix: '%'\r\n }\r\n }, \r\n legend: { \r\n align: 'left',\r\n layout: 'vertical',\r\n verticalAlign: 'mididle',\r\n itemMarginTop: 1,\r\n itemMarginBottom: 1, \r\n labelFormatter: function () {\r\n const { y, percentage, name } = this; \r\n \r\n return `${ name }
${ Highcharts.numberFormat(y,1,'.',',') } ${t('common:pounds')} - ${Highcharts.numberFormat(percentage,1,'.',',') } %`;\r\n }\r\n },\r\n plotOptions: {\r\n pie: {\r\n allowPointSelect: true,\r\n cursor: 'pointer', \r\n size: '100%',\r\n dataLabels: {\r\n enabled: false \r\n },\r\n showInLegend: true\r\n }\r\n },\r\n \r\n xAxis: { \r\n categories: scrapControllableCategories\r\n },\r\n series: [{\r\n name: 'Scrap',\r\n colorByPoint: true,\r\n data: scrapControllable\r\n }],\r\n credits: {\r\n enabled: false\r\n }\r\n }\r\n\r\n const scrapHeatMap = {\r\n\r\n chart: {\r\n type: 'heatmap',\r\n marginTop: 40,\r\n marginBottom: 80,\r\n plotBorderWidth: 1\r\n }, \r\n \r\n title: {\r\n text: t('productionDashboard:chartScrapByCellTitle')\r\n },\r\n \r\n xAxis: { \r\n categories: scrapXCategories\r\n },\r\n \r\n yAxis: { \r\n title:\"\",\r\n categories: scrapYCategories,\r\n reversed: true\r\n },\r\n\r\n tooltip: {\r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${t('productionDashboard:chartScrapByCellTitle') }
${t('formulario:Cell')}: ${ series.yAxis.categories[y] }
${t('formulario:Day')}: ${ series.xAxis.categories[point.x] }
${t('formulario:Value')}: ${Highcharts.numberFormat(point.value,1) }`;\r\n }\r\n },\r\n \r\n \r\n legend: {\r\n align: 'right',\r\n layout: 'vertical',\r\n margin: 0,\r\n verticalAlign: 'top',\r\n y: 25,\r\n symbolHeight: 280\r\n }, \r\n \r\n series: [{\r\n name: t('productionDashboard:chartScrapByCellTitle'),\r\n borderWidth: 1,\r\n color: '#e4e4e4',\r\n data: scrapSeries,\r\n showInLegend:false,\r\n dataLabels: {\r\n enabled: true,\r\n color: '#FFFFFF'\r\n }\r\n }], \r\n \r\n }\r\n \r\n\r\n useEffect(() => {\r\n const filter = {}\r\n filter.ClaZona = defaultZona\r\n filter.FechaInicial = defaultFechaInicial\r\n filter.FechaFinal = defaultFechaFinal\r\n\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n const paramsService = {\r\n ...filter,\r\n }; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(response.data.FechaInicial);\r\n setFechaFinal(response.data.FechaFinal); \r\n setNomZona(response.data.NomZona); \r\n setTotalDias(response.data.TotalDias); \r\n const filter = {}\r\n filter.ClaZona = response.data.ClaZona;\r\n filter.FechaInicial = response.data.FechaInicial;\r\n filter.FechaFinal = response.data.FechaFinal;\r\n onSearch(filter);\r\n \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n }\r\n ); \r\n \r\n }, [props.filters]);\r\n\r\n return ( \r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n )\r\n} \r\n\r\n \r\nexport default OperationScrapDashboard; \r\n","\r\nimport React from 'react';\r\n\r\nconst StepsTourCostAnalysisSummary = {\r\n steps: [\r\n {\r\n target: '.AC-Step-1',\r\n content: (\r\n <>\r\n
\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.AC-Step-2',\r\n content: (\r\n <>\r\n
\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.AC-Step-2',\r\n content: (\r\n <>\r\n
\r\n
\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourCostAnalysisDefault;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React , {useEffect, useState} from 'react'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi, showSweetAlert } from '../../utils/utils'; \r\nimport '../../assets/css/PivotGridBase.css'; \r\nimport FieldButton from '../../components/Controls/FieldButton/FieldButton.jsx'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx' \r\nimport FieldAutoComplete from '../../components/Controls/FieldAutoComplete.jsx'\r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../utils/YupValidator';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Panel } from 'primereact/panel';\r\nimport Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride'; \r\nimport StepsTourCostAnalysisSummary from './StepsTourCostAnalysisSummary'\r\nimport StepsTourCostAnalysisDetail from './StepsTourCostAnalysisDetail'\r\nimport StepsTourCostAnalysisDefault from './StepsTourCostAnalysisDefault'\r\nimport { Row, Col, Card, CardHeader, CardBody, } from 'reactstrap'; \r\n\r\nconst AnalisisCostosFilters = (props) => {\r\n \r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [Anio, setAnio] = useState(props.filters.Anio !== undefined ? props.filters.Anio : null);\r\n const [Mes, setMes] = useState();\r\n const [Target, setTarget] = useState(props.filters.Target !== undefined ? props.filters.Target : null);\r\n const [ClaMes, setClaMes] = useState();\r\n const [OpcionesAnios, setOpcionesAnios] = useState([]);\r\n const [OpcionesMeses, setOpcionesMeses] = useState([]); \r\n const [ClaDepartamento, setClaDepartamento] = useState();\r\n const [OpcionesDepartamentos, setOpcionesDepartamentos] = useState([]); \r\n const [OpcionesTipoCelda, setOpcionesTipoCelda] = useState([]); \r\n const [OpcionesCelda, setOpcionesCelda] = useState([]); \r\n const [ClaCelda , setClaCelda ] = useState();\r\n const [ClaTipoCelda , setClaTipoCelda ] = useState(); \r\n const [ClaArticulo , setClaArticulo ] = useState();\r\n const [FilteredArticulo, setFilteredArticulo] = useState([]);\r\n const [errors, setErrors] = useState({}); \r\n const valitationScheme = yup.object().shape({\r\n Anio: yup.string().required(t('common:RequiredField')).nullable(),\r\n Mes: yup.string().required(t('common:RequiredField')).nullable(),\r\n TipoConversionCost: yup.mixed().required(t('common:RequiredField')).nullable()\r\n });\r\n \r\n const [OpcionesConversionCost, setOpcionesConversionCost] = useState([{ value: 1, name: t('formulario:ConversionCost')}, { value: 2, name: t('formulario:ManufactureCost') }]);\r\n const [TipoConversionCost, setTipoConversionCost] = useState(1);\r\n \r\n const [IsRunTour, setIsRunTour] = useState(false); \r\n \r\n useEffect(() => { \r\n let urlWebService = `${config.UrlApiProject}Costos/GetAnios`; \r\n let paramsService = null; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios);\r\n paramsService = {Anio:null};\r\n if (response.data.Anios.length > 0){\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n paramsService.Anio = response.data.Anios[0].ClaAnio;\r\n } \r\n urlWebService = `${config.UrlApiProject}Costos/GetMeses`; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses); \r\n \r\n urlWebService = `${config.UrlApiProject}departamento/getDepartamentos`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesDepartamentos(response.data.Departamentos); \r\n }); \r\n });\r\n })\r\n }, []);\r\n \r\n const onYearChange = (yearId) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Anio; \r\n setErrors(newErrors) \r\n setAnio(yearId);\r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {Anio:yearId};\r\n urlWebService = `${config.UrlApiProject}Costos/GetMeses`; \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setMes(null);\r\n setOpcionesMeses(response.data.Meses); \r\n });\r\n };\r\n \r\n const onMonthChange = (anioMes,e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Mes; \r\n setErrors(newErrors) \r\n setMes(anioMes); \r\n let value = 0;\r\n OpcionesMeses.map((a) => { \r\n if(a.AnioMes === anioMes){\r\n value = a.ClaMes;\r\n }\r\n return 0;\r\n });\r\n setClaMes(value); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n }; \r\n\r\n const onChangeDepartament = (departamentId) => { \r\n setClaDepartamento(departamentId); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n if(departamentId===undefined){\r\n setClaTipoCelda(null);\r\n setOpcionesTipoCelda(null); \r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n return;\r\n } \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {};\r\n urlWebService = `${config.UrlApiProject}celda/GetTipoCeldas?ClaDepartamento=${departamentId}`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setClaTipoCelda(null);\r\n setOpcionesTipoCelda(null); \r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n setOpcionesTipoCelda(response.data.TipoCelda); \r\n });\r\n };\r\n \r\n const onChangeTipoCelda = (tipoCeldaId) => {\r\n setClaTipoCelda(tipoCeldaId);\r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n if(tipoCeldaId===undefined){\r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n return;\r\n } \r\n let paramsService = null; \r\n let urlWebService = ``;\r\n paramsService = {}; \r\n urlWebService = `${config.UrlApiProject}celda/GetCeldas?ClaDepartamento=${ClaDepartamento}&ClaTipoCelda=${tipoCeldaId}`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesCelda(response.data.Celdas); \r\n setClaCelda(null); \r\n });\r\n };\r\n \r\n const onChangeCelda = (celdaId) => { \r\n setClaCelda(celdaId); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n } \r\n };\r\n \r\n const onChangeArticulo = (e) => { \r\n setClaArticulo(e.value)\r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n } \r\n }\r\n \r\n const FilterArticulo = (event) => {\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}articulo/GetArticulos?Valor=${event.query}&Tipo=2`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => { \r\n setFilteredArticulo(response.data.Articulos);\r\n }); \r\n } \r\n \r\n const onApply = async ( ) => { \r\n const value = {\r\n Anio,\r\n Mes,\r\n TipoConversionCost\r\n } \r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n const filtersData = {}\r\n filtersData.Anio = Anio === undefined ? null : Anio;\r\n filtersData.AnioMes = Mes === undefined ? null : Mes; \r\n filtersData.Mes = ClaMes === undefined ? null : ClaMes;\r\n filtersData.ClaDepartamento = ClaDepartamento === undefined ? null : ClaDepartamento;\r\n filtersData.ClaCelda = ClaCelda === undefined ? null : ClaCelda;\r\n filtersData.ClaTipoCelda = ClaTipoCelda === undefined ? null : ClaTipoCelda;\r\n filtersData.ClaArticulo = ClaArticulo === null || ClaArticulo === undefined ? null : ClaArticulo.ClaArticulo;\r\n filtersData.Target = Target === undefined ? null : Target;\r\n filtersData.TipoConversionCost = TipoConversionCost === undefined ? null : TipoConversionCost;\r\n if (props.onSearch != null){ \r\n props.onSearch(filtersData);\r\n }\r\n };\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n\r\n \r\n)\r\n} \r\n \r\nexport default AnalisisCostosFilters; \r\n \r\n","/* eslint-disable object-shorthand */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n Row,\r\n Col,\r\n CardTitle \r\n} from 'reactstrap';\r\nimport Highcharts from 'highcharts';\r\nimport HighchartsReact from 'highcharts-react-official'; \r\nimport SparkLine from '../../../components/Charts/SparkLine/SparkLine.jsx'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { InputSwitch } from 'primereact/inputswitch';\r\nimport { ValueErrorBar } from 'devextreme-react/range-selector';\r\n\r\nconst ElementosCostos = (props) => { \r\n const { t } = useTranslation(['formulario','common']);\r\n const [barCharCategories, setBarCharCategories] = useState({});\r\n const [barCharSeries, setBarCharSeries] = useState({});\r\n const [sparkLinesChartValues, setSparkLinesChartValues] = useState([]);\r\n const [chartTitle, setChartTitle] = useState('');\r\n\r\n \r\n const [esPorTonelada, setEsPorTonelada] = useState(true);\r\n const [byTonLabel, setByTonLabel] = useState(`${t('formulario:RealCost')} by MTon`);\r\n\r\n useEffect(() => { \r\n const GetDetalleElementService = `${config.UrlApiProject}Costos/GetDetalleGraficoElement`;\r\n const GetDetalleElementMonthService = `${config.UrlApiProject}Costos/GetDetalleGraficoElementMonth`;\r\n const paramsToService = {\r\n anio: props.filters.Anio,\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda,\r\n claCelda:props.filters.ClaCelda,\r\n claArticulo:props.filters.ClaArticulo,\r\n EsPorTonelada: esPorTonelada,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n }; \r\n\r\n console.log(paramsToService);\r\n\r\n callApi(GetDetalleElementService, 'POST', paramsToService, (response) => {\r\n setBarCharCategories(response.data.categories); \r\n setBarCharSeries(response.data.series.data); \r\n callApi(GetDetalleElementMonthService, 'POST', paramsToService, (response) => {\r\n setSparkLinesChartValues(response.data.series); \r\n const GetCeldaTitleService = `${config.UrlApiProject}Costos/GetCeldaElementTitle`; \r\n callApi(GetCeldaTitleService, 'POST', paramsToService, (response) => { \r\n if(response.data.info!==undefined)\r\n { \r\n setChartTitle(`${response.data.info[0].NomFecha }`); \r\n } \r\n });\r\n });\r\n });\r\n \r\n }, [props.filters, esPorTonelada]); \r\n\r\n const onChangeByton = (event) => { \r\n console.log(event.value);\r\n setEsPorTonelada(event.value);\r\n\r\n if (event.value){\r\n setByTonLabel(`${t('formulario:RealCost')} by MTon`);\r\n }\r\n else{\r\n setByTonLabel(`${t('formulario:RealCost')} $ USD`);\r\n }\r\n } \r\n\r\n const barChart = {\r\n chart: {\r\n height: 480,\r\n type: 'bar',\r\n },\r\n title: {\r\n text: '',\r\n }, \r\n xAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 1,\r\n lineColor: '#dddfe1',\r\n categories: barCharCategories,\r\n title: {\r\n text: null,\r\n },\r\n labels: {\r\n }\r\n },\r\n yAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 1,\r\n lineColor: '#dddfe1',\r\n title: {\r\n text: null,\r\n },\r\n /* min: 0, */ \r\n labels: {\r\n overflow: 'justify',\r\n enabled:false,\r\n },\r\n },\r\n tooltip: {\r\n valuePrefix: ' $',\r\n valueDecimals: 1\r\n },\r\n plotOptions: {\r\n bar: {\r\n dataLabels: {\r\n enabled: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'right',\r\n verticalAlign: 'top',\r\n x: -40,\r\n y: 80,\r\n floating: true,\r\n borderWidth: 1,\r\n backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',\r\n shadow: true,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n series: [\r\n {\r\n name: '',\r\n data: barCharSeries, \r\n showInLegend: false, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,2) }`;\r\n }\r\n }\r\n },\r\n ], \r\n };\r\n if (props.showHide) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n {chartTitle} - {byTonLabel} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {chartTitle} - {t('formulario:TrendLast12Months')} - {byTonLabel} \r\n \r\n \r\n \r\n {sparkLinesChartValues.map((bucket) => { \r\n const options = {\r\n xAxis: { \r\n categories: bucket.categories\r\n },\r\n yAxis: { \r\n categories: ['Real'] \r\n },\r\n series: [{ \r\n name: 'Real',\r\n data: bucket.serieReal \r\n } \r\n ],\r\n \r\n tooltip: {\r\n headerFormat: `${bucket.name} ({series.name})
{point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n\r\n return (\r\n\r\n \r\n {bucket.name} \r\n \r\n \r\n \r\n \r\n \r\n );\r\n })} \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\nexport default ElementosCostos;\r\n","/* eslint-disable object-shorthand */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport Highcharts from 'highcharts';\r\nimport HighchartsReact from 'highcharts-react-official'; \r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst StandarVsRealChar = (props) => {\r\n \r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [chartTitle, setChartTitle] = useState('');\r\n const [standardCostData, setStandardCostData] = useState([]);\r\n const [realCostData, setRealCostData] = useState([]);\r\n const [xCategories, setXCategories] = useState([]);\r\n\r\n const lineChart = {\r\n chart: {\r\n height: 328,\r\n type: 'line',\r\n },\r\n title: {\r\n text: `${chartTitle}
${ t('formulario:TrendLast12Months')}`,\r\n }, \r\n xAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 0,\r\n categories: xCategories,\r\n title: {\r\n text: null,\r\n },\r\n },\r\n yAxis: { \r\n gridLineWidth:1,\r\n title: {\r\n text: null,\r\n }, \r\n labels: {\r\n overflow: 'justify',\r\n enabled:true\r\n },\r\n },\r\n tooltip: { \r\n valuePrefix: ' $',\r\n valueDecimals: 2\r\n },\r\n plotOptions: {\r\n bar: {\r\n dataLabels: {\r\n enabled: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n layout: 'horizontal',\r\n align: 'left',\r\n verticalAlign: 'bottom', \r\n borderWidth: 1,\r\n backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',\r\n shadow: true,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n series: [\r\n {\r\n name: 'Actual',\r\n data: realCostData, \r\n showInLegend: true, \r\n color: '#ff7a3d',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n },\r\n {\r\n name: 'Standard',\r\n data: standardCostData, \r\n showInLegend: true, \r\n color: '#26caf6',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n }\r\n ], \r\n };\r\n\r\n useEffect(() => {\r\n \r\n const GetInconsistenciasElementGridService = `${config.UrlApiProject}Costos/GetElementInconsistenciasLinesChart`;\r\n \r\n const paramsToService = {\r\n anio: props.filters.Anio,\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claElemento: props.ClaElemento,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda,\r\n claCelda:props.filters.ClaCelda,\r\n claArticulo:props.filters.ClaArticulo,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n }; \r\n \r\n callApi(GetInconsistenciasElementGridService, 'POST', paramsToService, (response) => {\r\n setStandardCostData(response.data.Standard.data);\r\n setRealCostData(response.data.Real.data);\r\n setXCategories(response.data.Categories); \r\n console.log('paramsToService');\r\n console.log(paramsToService);\r\n const GetCeldaTitleService = `${config.UrlApiProject}Costos/GetCeldaElementTitle`; \r\n callApi(GetCeldaTitleService, 'POST', paramsToService, (response) => { \r\n if(response.data.info!==undefined)\r\n { \r\n setChartTitle(`${response.data.info[0].NomElemento }`); \r\n } \r\n });\r\n });\r\n\r\n }, [props.ClaElemento]);\r\n\r\n return\r\n \r\n \r\n ( {t('common:Total')})}> \r\n \r\n ({ (rowsGrid.reduce((a,v) => a += v.StandarCost === null ? 0 : v.StandarCost , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n ({ (rowsGrid.reduce((a,v) => a += v.RealCost === null ? 0 : v.RealCost , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n \r\n if (props.showHide) {\r\n return (\r\n <>\r\n \r\n setSelectedElement(e.value)} \r\n onRowSelect={onRowSelect} \r\n onRowUnselect={onRowUnselect}\r\n selectionMode=\"single\"\r\n metaKeySelection={false} \r\n footerColumnGroup={footer}\r\n >\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n };\r\n \r\n export default InconsistenciasCostos;\r\n ","import React, { useEffect, useState } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport { \r\n Row,\r\n Col\r\n} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport TimelineIcon from '@material-ui/icons/Timeline'; \r\nimport ElementosCostos from \"../ElementosCostos/ElementosCostos\"; \r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport PropTypes from 'prop-types' \r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n/* ################################# START COMPONENT ################################# */\r\n\r\nconst ArticulosCelda = (props) => { \r\n const { t } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]);\r\n const [showEstadisticas, setshowEstadisticas] = useState(false);\r\n const [EstadisticasFilters , setEstadisticasFilters] = useState({});\r\n const [SelectedCustomer, setSelectedCustomer] = useState(null); \r\n const [Title, setTitle] = useState('');\r\n \r\n useEffect(() => {\r\n\r\n console.log('ArticulosCelda useEffect')\r\n console.log(props.filters);\r\n\r\n const GetCeldaArticulosGridService = `${config.UrlApiProject}Costos/GetCeldaArticulosGrid`; \r\n const paramsToService = {\r\n anio: props.filters.Anio,\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claCelda:props.filters.ClaCelda,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda, \r\n claArticulo:props.filters.ClaArticulo,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n }; \r\n\r\n setshowEstadisticas(false); \r\n callApi(GetCeldaArticulosGridService, 'POST', paramsToService, (response) => { \r\n setRowsGrid(response.data[0]); \r\n const GetCeldaTitleService = `${config.UrlApiProject}Costos/GetCeldaElementTitle`; \r\n callApi(GetCeldaTitleService, 'POST', paramsToService, (response) => { \r\n if(response.data.info!==undefined)\r\n { \r\n setTitle(`${response.data.info[0].NomFecha } ${ response.data.info[0].NomCelda}`); \r\n } \r\n });\r\n });\r\n \r\n }, [props.filters]); \r\n\r\n\r\n const header = ( \r\n <> \r\n ${row.AcumuladoRealCost === null ? '' : row.AcumuladoRealCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const ActionsColumn = (row) => { \r\n return (\r\n <>\r\n \r\n onDetailBucket(row)} size=\"small\" color=\"primary\"> \r\n \r\n \r\n );\r\n }\r\n \r\n const onDetailBucket = (row) =>{\r\n const filters = { ...props.filters }; \r\n filters.ClaCelda = row.IdCelda;\r\n filters.ClaArticulo = row.ClaArticulo;\r\n setEstadisticasFilters(filters);\r\n setshowEstadisticas(true); \r\n }\r\n \r\n const onRowSelect = (event) => { \r\n onDetailBucket(event.data); \r\n }\r\n \r\n return (\r\n <> \r\n \r\n setSelectedCustomer(e.value)} \r\n onRowSelect={onRowSelect}\r\n > \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ); \r\n};\r\nexport default ArticulosCelda;\r\n","import React, { useEffect, useState } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi} from '../../../utils/utils';\r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n Row,\r\n Col,\r\n CardTitle\r\n} from 'reactstrap';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport TimelineIcon from '@material-ui/icons/Timeline';\r\nimport OpenInNewIcon from '@material-ui/icons/OpenInNew'; \r\nimport EqualizerIcon from '@material-ui/icons/Equalizer';\r\nimport ElementosCostos from \"../ElementosCostos/ElementosCostos\"; \r\nimport ArticulosCelda from './ArticulosCelda.jsx'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldTag from '../../../components/Controls/FieldTag.jsx' \r\nimport DailyOperationDashboard from \"../../ProductionsDashboards/DailyOperationDashboard/DailyOperationDashboard\";\r\nimport { Dialog } from 'primereact/dialog'; \r\nimport { Sidebar } from 'primereact/sidebar';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n\r\n/* ################################# START COMPONENT ################################# */\r\n\r\nconst CeldasCostos = (props) => {\r\n \r\n const { buttonLabel, className } = props;\r\n\r\n /* ################# SET STATE AREA ################# */\r\n const { t } = useTranslation(['formulario','common']);\r\n const [rowsGrid, setRowsGrid] = useState([]); \r\n const [elementFilters , setelementFilters] = useState({...props});\r\n const [showEstadisticas, setshowEstadisticas] = useState(false); \r\n const [SelectedCustomer, setSelectedCustomer] = useState(null);\r\n const [IdCelda, setIdCelda] = useState(null);\r\n const [modalArticulos, setModalArticulos] = useState(false);\r\n const [CeldaDetalleArticulosFilters, setCeldaDetalleArticulosFilters] = useState({...props});\r\n const [openDetailProduction, setOpenDetailProduction] = useState(false);\r\n const [dailyOperationFilters, setdailyOperationFilters] = useState({});\r\n \r\n /* ################# END SET STATE AREA ################# */\r\n \r\n useEffect(() => { \r\n console.log('Celda costos useffect');\r\n const GetCeldasGridService = `${config.UrlApiProject}Costos/GetCeldasGrid`;\r\n const paramsToService = {\r\n anio: props.filters.Anio,\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda,\r\n claCelda:props.filters.ClaCelda,\r\n claArticulo:props.filters.ClaArticulo,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n };\r\n setRowsGrid(null);\r\n setModalArticulos(false);\r\n callApi(GetCeldasGridService, 'POST', paramsToService, (response) => { \r\n setIdCelda(null);\r\n setRowsGrid(response.data[0]); \r\n });\r\n \r\n }, [props.filters]); \r\n\r\n const header = ( \r\n <>\r\n ${row.AcumuladoRealCost === null ? '' : row.AcumuladoRealCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} );\r\n }\r\n\r\n const onElementoDetalleCelda = (row) =>{\r\n const filters = { ...props.filters };\r\n filters.ClaCelda = row.IdCelda;\r\n filters.Cell = row.Cell; \r\n setIdCelda(row.IdCelda);\r\n setelementFilters(filters);\r\n setshowEstadisticas(true); \r\n }\r\n\r\n const onCeldaDetalleArticulos = (row) =>{\r\n const filters = { ...props.filters }; \r\n filters.ClaCelda = row.IdCelda; \r\n filters.Cell = row.Cell;\r\n setCeldaDetalleArticulosFilters(filters); \r\n setModalArticulos(true); \r\n\r\n console.log('onCeldaDetalleArticulos')\r\n console.log(filters);\r\n\r\n }\r\n\r\n const onShowInvoice = (data) => { \r\n // setInvoiceCustomerProductFilters(data)\r\n setModalArticulos(false);\r\n }\r\n\r\n const ActionsColumn = (row) => { \r\n return (\r\n <> \r\n \r\n onElementoDetalleCelda(row)} size=\"small\" color=\"primary\"> \r\n \r\n \r\n onCeldaDetalleArticulos(row)} color=\"secondary\"> \r\n \r\n \r\n onOpenModalDetail(row)} color=\"action\"> \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n const onRowSelect = (event) => { \r\n onElementoDetalleCelda(event.data); \r\n }\r\n\r\n const onRowUnselect = (event) =>{ \r\n // setClaBucket(null);\r\n } \r\n\r\n const onCloseModal = () => {\r\n setModalArticulos(!modalArticulos);\r\n }\r\n\r\n const closeModalDetail = () => {\r\n setOpenDetailProduction(false);\r\n }\r\n \r\n const onOpenModalDetail = (row) => { \r\n const filters = {\r\n ClaCelda : row.IdCelda,\r\n ClaZona: null,\r\n FechaInicial: row.FechaInicial,\r\n FechaFinal: row.FechaFinal\r\n }; \r\n \r\n setdailyOperationFilters(filters);\r\n setOpenDetailProduction(true);\r\n }\r\n\r\n const dialogStyle = ( \r\n { width: '1120px', \r\n borderLeft:\"solid 2px #2791FF\", \r\n borderTop:\"solid 2px #2791FF\", \r\n textAlign:\"center\" \r\n }\r\n )\r\n\r\n const headerDialog = ( \r\n <>\r\n \r\n \r\n \r\n onCloseModal()} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n \r\n return (\r\n <> \r\n \r\n setSelectedCustomer(e.value)} \r\n onRowSelect={onRowSelect} \r\n onRowUnselect={onRowUnselect}\r\n > \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n \r\n \r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\n\r\nexport default CeldasCostos;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable object-shorthand */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils';\r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n Row,\r\n Col,\r\n CardTitle \r\n} from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next';\r\nimport { PickList } from 'primereact/picklist';\r\nimport { TreeList, Scrolling, Paging, Pager, Column, Selection, Format } from 'devextreme-react/tree-list';\r\nimport { Dialog } from 'primereact/dialog'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldToogleSwitch from '../../../components/Controls/FieldToogleSwitch/FieldToogleSwitch.jsx'\r\n\r\nconst AnalisisCostosGeneral = (props) => { \r\n const { t } = useTranslation(['formulario','common']);\r\n const [source, setSource] = useState([]);\r\n const [target, setTarget] = useState([]);\r\n const [matriz, setMatriz] = useState([]); \r\n const [openFilterTree, setOpenFilterTree] = useState(false); \r\n\r\n const [showColumnsEne, setshowColumnsEne] = useState(false);\r\n const [showColumnsFeb, setshowColumnsFeb] = useState(false);\r\n const [showColumnsMar, setshowColumnsMar] = useState(false);\r\n const [showColumnsAbr, setshowColumnsAbr] = useState(false);\r\n const [showColumnsMay, setshowColumnsMay] = useState(false);\r\n const [showColumnsJun, setshowColumnsJun] = useState(false);\r\n const [showColumnsJul, setshowColumnsJul] = useState(false);\r\n const [showColumnsAgo, setshowColumnsAgo] = useState(false);\r\n const [showColumnsSep, setshowColumnsSep] = useState(false);\r\n const [showColumnsOct, setshowColumnsOct] = useState(false);\r\n const [showColumnsNov, setshowColumnsNov] = useState(false);\r\n const [showColumnsDic, setshowColumnsDic] = useState(false);\r\n const [yesNoOptions, setYesNoOptions] = useState([`${t('common:Yes')}`, `${t('common:No')}`]);\r\n const [EsMostrarTodoElAnio, setEsMostrarTodoElAnio] = useState(true); \r\n const expandedRowKeys = [0];\r\n let targetFilter = [];\r\n \r\n useEffect(() => { \r\n console.log('Entro');\r\n const GetDetalleElementService = `${config.UrlApiProject}Costos/GetMatrizCtaContableCmb`;\r\n const paramsToService = {\r\n }; \r\n callApi(GetDetalleElementService, 'POST', paramsToService, (response) => { \r\n if(props.filters.target!==undefined){\r\n targetFilter = props.filters.target;\r\n setSource(props.filters.source); \r\n setTarget(props.filters.target);\r\n }else if(source.length===0){\r\n const defaultSource = [];\r\n const defaultTarget = [];\r\n \r\n for (let index = 0; index < response.data[0].length; index++) {\r\n\r\n if (response.data[0][index].ClaPivotOrderMatrizCtaContable === 1){ \r\n defaultTarget.push(response.data[0][index]); \r\n }\r\n else if (response.data[0][index].ClaPivotOrderMatrizCtaContable === 2){ \r\n defaultTarget.push(response.data[0][index]);\r\n }\r\n else if (response.data[0][index].ClaPivotOrderMatrizCtaContable === 3){ \r\n defaultTarget.push(response.data[0][index]);\r\n }\r\n else {\r\n defaultSource.push(response.data[0][index]);\r\n }\r\n } \r\n\r\n\r\n setSource(defaultSource); \r\n setTarget(defaultTarget);\r\n }\r\n DataBindTree();\r\n });\r\n }, [props.filters]); \r\n\r\n \r\nconst onChange = (event) => {\r\n setSource(event.source);\r\n setTarget(event.target); \r\n}\r\n\r\n\r\nconst itemTemplate = (item) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AnalisisCostos;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React , {useEffect, useState} from 'react'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi } from '../../utils/utils'; \r\nimport '../../assets/css/PivotGridBase.css'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx' \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../utils/YupValidator';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Panel } from 'primereact/panel';\r\nimport FieldCalendar from '../../components/Controls/FieldCalendar.jsx'\r\nimport moment from 'moment'\r\nimport FieldButton from '../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Row, Col } from 'reactstrap';\r\n\r\nconst ProductionsDashboardsFilters = (props) => {\r\n \r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [ClaZona, setClaZona] = useState(props.filters.ClaZona !== undefined ? props.filters.ClaZona : null);\r\n const [OpcionesZonas, setOpcionesZona] = useState([]);\r\n const [OpcionesTurnos, setOpcionesTurnos] = useState([]);\r\n const [ClaTurno, setClaTurno] = useState(props.filters.ClaTurno !== undefined ? props.filters.ClaTurno : null);\r\n const [errors, setErrors] = useState({}); \r\n const [FechaInicial, setFechaInicial] = useState(null); \r\n const [FechaFinal, setFechaFinal] = useState(null); \r\n const valitationScheme = yup.object().shape({\r\n ClaZona: yup.string().required(t('common:RequiredField')).nullable(),\r\n FechaInicial: yup.date().required(t('common:RequiredField')).nullable(),\r\n FechaFinal: yup.date().required(t('common:RequiredField')).nullable()\r\n });\r\n \r\n useEffect(() => { \r\n let urlWebService = `${config.UrlApiProject}celda/GetZonas?EsZonaDashboard=1&EsAgregarTodos=0`; \r\n let paramsService = null; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesZona(response.data.Zonas);\r\n urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n paramsService = {\r\n ClaZona,\r\n FechaInicial:null,\r\n FechaFinal:null,\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(new Date(response.data.FechaInicial)); \r\n setFechaFinal(new Date(response.data.FechaFinal)); \r\n setClaTurno((response.data.ClaTurno)); \r\n });\r\n \r\n const urlgetTurnos = `${config.UrlApiProject}turno/getTurnos`; \r\n \r\n callApi(urlgetTurnos, 'GET', paramsService, (response) => {\r\n setOpcionesTurnos(response.data.Turnos);\r\n // obtenemos los turnos\r\n }); \r\n \r\n\r\n })\r\n }, []);\r\n \r\n const onZoneChange = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaZona; \r\n setErrors(newErrors) \r\n setClaZona(e.value); \r\n };\r\n \r\n const onTurnoChange = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaTurno; \r\n setErrors(newErrors) \r\n setClaTurno(e.value); \r\n };\r\n\r\n const onChangeStartDate = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.FechaInicial; \r\n setErrors(newErrors);\r\n setFechaInicial(e.target.value);\r\n } \r\n\r\n const onChangeEndDate = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.FechaFinal; \r\n setErrors(newErrors);\r\n setFechaFinal(e.target.value);\r\n } \r\n\r\n const onApply = async () => { \r\n const value = {\r\n ClaZona,\r\n FechaInicial, \r\n FechaFinal\r\n }\r\n console.log('onApply');\r\n console.log(value);\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n }\r\n if (props.onSearch != null){ \r\n const filtersData = {}\r\n filtersData.ClaZona = ClaZona === undefined ? null : ClaZona;\r\n filtersData.FechaInicial = FechaInicial === undefined ? null : FechaInicial;\r\n filtersData.FechaFinal = FechaFinal === undefined ? null : FechaFinal;\r\n filtersData.ClaTurno = ClaTurno === undefined ? null : ClaTurno;\r\n props.onSearch(filtersData);\r\n }\r\n };\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n)\r\n} \r\n \r\nexport default ProductionsDashboardsFilters; \r\n \r\n","import React, {useState, useEffect} from 'react';\r\nimport { \r\n Row, \r\n Col,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardText,\r\n CardFooter } from 'reactstrap';\r\n import FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { useTranslation } from 'react-i18next';\r\nimport queryString from 'query-string';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport './ActiveDowntimes.scss';\r\nimport PageContent from '../../../layouts/PageContent';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable';\r\nimport { Column } from 'primereact/column';\r\n\r\nconst ActiveDowntimesComponent = (props) => {\r\n const { t, i18n } = useTranslation(['productionDashboard', 'common']);\r\n const MINUTES_MS = 60000; // 1 minute\r\n\r\n let defaultZone;\r\n let firstRun = 0; // Fetch data on first run\r\n\r\n // Check to see if the zone was passed from the filter or as a URL parameter\r\n if (props.location !== undefined) {\r\n const params = queryString.parse(props.location.search);\r\n defaultZone = params.ClaZona !== undefined ? params.ClaZona : \"\";\r\n }\r\n else {\r\n defaultZone = props.filters.ClaZona !== undefined ? props.filters.ClaZona : \"\";\r\n }\r\n\r\n const [claZona, setClaZona] = useState(defaultZone); // Zone number\r\n const [nomZona, setNomZona] = useState(\"\"); // Zone name\r\n const [downtimeData, setDowntimeData] = useState([]); // Active downtimes\r\n const [openDetails, setOpenDetails] = useState(false); // Detail Dialog open/close\r\n const [details, setDetails] = useState([]); // Details for individual cell\r\n\r\n useEffect(() => {\r\n\r\n // Check to see the the zone changed\r\n if (props.location !== undefined) {\r\n const params = queryString.parse(props.location.search);\r\n defaultZone = params.ClaZona !== undefined ? params.ClaZona : \"\";\r\n }\r\n else {\r\n defaultZone = props.filters.ClaZona !== undefined ? props.filters.ClaZona : \"\";\r\n }\r\n\r\n // Get data on first run\r\n if (firstRun === 0) {\r\n getData();\r\n firstRun = 1;\r\n }\r\n\r\n // Refresh the data every 1 minute\r\n const getDataInterval = setInterval(() => {\r\n getData();\r\n }, MINUTES_MS)\r\n\r\n return () => clearInterval(getDataInterval);\r\n }, [props.filters]);\r\n\r\n\r\n\r\n // Get the active downtimes\r\n const getData = () => {\r\n const filters = {}\r\n filters.ClaZona = defaultZone;\r\n\r\n // console.log(defaultZone);\r\n\r\n const paramsService = {\r\n ... filters,\r\n }\r\n\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetActiveDowntimeData?ClaZona=${defaultZone}`;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => { \r\n setDowntimeData(response.data.cells);\r\n\r\n if (response.data.cells.length > 0 ){\r\n setNomZona(response.data.cells[0].ZoneName);\r\n }\r\n else{\r\n setNomZona('');\r\n }\r\n \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n }); \r\n };\r\n\r\n // Handle Detail button click\r\n const onOpenDetails = (claCelda, claTurno) => {\r\n const filters = {\r\n ClaCelda: claCelda,\r\n ClaTurno: claTurno,\r\n };\r\n\r\n const paramsService = {\r\n ... filters,\r\n };\r\n\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetDowntimeDetails?ClaCelda=${claCelda}&ClaTurno=${claTurno}`;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setDetails(response.data.rows);\r\n\r\n setOpenDetails(true);\r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n });\r\n };\r\n\r\n const onCloseDetails = () => { setOpenDetails(false); };\r\n\r\n // Format the time\r\n const formatCellTime = (cellTime) => {\r\n const time = new Date(cellTime);\r\n\r\n const options = {\r\n dateStyle: \"short\",\r\n timeStyle: \"short\"\r\n }\r\n\r\n return(time.toLocaleString(\"en-US\", options));\r\n }\r\n\r\n // Create a Card from the cell data\r\n const addCell = (cell) => {\r\n\r\n // Cell is down\r\n if (cell.ActiveDowntime === 1) {\r\n // Card Style\r\n let style = \"up\"\r\n if (!cell.CheckInTime && cell.ActiveDowntime === 1) {\r\n style = \"down-red\"\r\n }\r\n if (cell.CheckInTime && cell.ActiveDowntime === 1) {\r\n style = \"down-yellow\"\r\n }\r\n\r\n let andonColor = \"black\"\r\n switch(cell.ANDON.toUpperCase()) {\r\n case \"MAINTENANCE\":\r\n andonColor = \"DarkRed\";\r\n break;\r\n case \"SUPERVISOR\":\r\n andonColor = \"Purple\";\r\n break;\r\n case \"SETUP\":\r\n andonColor = \"rgb(255,123,0)\";\r\n break;\r\n case \"QUALITY\":\r\n andonColor = \"Blue\";\r\n break;\r\n case \"TEAM LEAD\":\r\n andonColor = \"DarkBlue\";\r\n break;\r\n case \"ENGINEER\":\r\n andonColor = \"DarkGreen\";\r\n break;\r\n default:\r\n andonColor = \"Black\";\r\n }\r\n\r\n // Hours and minutes\r\n let hours = 0;\r\n let minutes = 0;\r\n if (cell.ActiveDowntime === 1) {\r\n hours = Math.floor(cell.TimeElapsed / 60);\r\n minutes = cell.TimeElapsed % 60;\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n {`${cell.CellCode} - ${cell.CellType} - ${cell.ShiftName}`} \r\n \r\n \r\n \r\n {t(\"productionDashboard:DowntimeRequestLabel\")}
\r\n {formatCellTime(cell.StartDate)}
\r\n {t(\"productionDashboard:DowntimeByLabel\")}
\r\n {cell.ANDON}
\r\n \r\n {t(\"productionDashboard:AssignedDateLabel\")}
\r\n {!cell.AssignedDate || cell.AssignedDate === \"\" ? \"-\" : formatCellTime(cell.AssignedDate)}
\r\n {t(\"productionDashboard:MachineLabel\")}
\r\n {`${cell.MachineType} - ${cell.MachinePosition}`}
\r\n \r\n {t(\"productionDashboard:CheckInLabel\")}
\r\n {!cell.CheckInTime || cell.CheckInTime === \"\" ? \"-\" : formatCellTime(cell.CheckInTime)}
\r\n {t(\"productionDashboard:ReasonLabel\")}
\r\n {cell.Reason}
\r\n \r\n
\r\n \r\n {t(\"productionDashboard:AssignedToLabel\")} {!cell.AssignedTo || cell.AssignedTo === \"\" ? \"-\" : cell.AssignedTo}
\r\n {t(\"productionDashboard:DescriptionLabel\")} {cell.Description}
\r\n \r\n {onOpenDetails(cell.CellNumber, cell.ShiftNumber)}}>{t(\"productionDashboard:detailsButton\")} |
\r\n \r\n
\r\n \r\n \r\n \r\n {t(\"productionDashboard:TimeElapsedLabel\")}{` ${hours} H ${minutes} M`} \r\n \r\n \r\n )\r\n }\r\n\r\n // Cell is up\r\n // Hours and minutes\r\n const runHours = Math.floor(cell.RunTime / 60);\r\n const runMinutes = cell.RunTime % 60;\r\n const downHours = Math.floor(cell.TotalDownTime / 60);\r\n const downMinutes = cell.TotalDownTime % 60;\r\n const downtimeColor = cell.TotalDownTime > 0 ? \"Red\" : \"Black\"\r\n\r\n return (\r\n \r\n {`${cell.CellCode} - ${cell.CellType} - ${cell.ShiftName}`} \r\n \r\n \r\n {t(\"productionDashboard:RuntimeLabel\")} {runHours} H {runMinutes} M
\r\n {t(\"productionDashboard:TimesDownLabel\")} {cell.TotalDownTimes}
\r\n {t(\"productionDashboard:TotalDowntimeLabel\")} {downHours} H {downMinutes} M
\r\n {onOpenDetails(cell.CellNumber, cell.ShiftNumber)}}>{t(\"productionDashboard:detailsButton\")} |
\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n };\r\n\r\n return ( \r\n <>\r\n \r\n \r\n \r\n
\r\n
|
\r\n \r\n {downtimeData.map(cell => addCell(cell))} \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default ActiveDowntimesComponent;","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable no-const-assign */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton'; \r\nimport { \r\n Row,\r\n Col \r\n} from 'reactstrap';\r\nimport './GantryWarningBanner.scss'; \r\nimport { config } from 'utils/config';\r\nimport { callApi} from 'utils/utils'; \r\n\r\nconst GantryWarningBanner = (props) => {\r\n const { t, i18n } = useTranslation(['tablets', 'common']);\r\n\r\n const [ListadoCeldasAfectadas, setListadoCeldasAfectadas] = useState(null);\r\n const [EsGantryEstatusActivo, setEsGantryEstatusActivo] = useState(true); \r\n const [ListadoClaveCeldasAfectadas, setListadoClaveCeldasAfectadas] = useState(null);\r\n const interval = useRef();\r\n\r\n const getStatusGantry = () => {\r\n const GetStatusGantry = `${config.UrlApiProject}Operations/ObtieneEstatusGantry`; \r\n const paramsToService = {}; \r\n \r\n // si detectamos en el navegador que no tiene internet\r\n try{\r\n if (!window.navigator.onLine){\r\n return ;\r\n }\r\n }catch(e){\r\n // \r\n } \r\n \r\n callApi(GetStatusGantry, 'GET', paramsToService, (response) => { \r\n setEsGantryEstatusActivo(response.data.EsGantryActivo);\r\n setListadoCeldasAfectadas(response.data.ListadoCeldasAfectadas); \r\n setListadoClaveCeldasAfectadas(response.data.ListadoClaveCeldasAfectadas); \r\n // cuando recibimos una celda necesitamos confirmar que la celda este entre las involucradas con problemas.\r\n if (props.ClaCelda !== null && typeof(props.ClaCelda) !== 'undefined')\r\n {\r\n if (response.data.ListadoCeldasAfectadas !== null){\r\n // sacamos los valores separados por coma recortando los espacios para poder hacer una comparacion correcta.\r\n const valuesArray = response.data.ListadoCeldasAfectadas.split(',').map(item => item.trim());\r\n \r\n // si la celda la que esta mostrando el banner esta dentro del listado habilitamos el banner\r\n if (!valuesArray.includes(props.ClaCelda.toString())){\r\n setEsGantryEstatusActivo(true);\r\n }\r\n }\r\n }\r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n }, false, false); \r\n}\r\n\r\n useEffect(() => { \r\n getStatusGantry();\r\n \r\n interval.current = setInterval(() => {\r\n getStatusGantry();\r\n }, 1500 * 60);\r\n \r\n return () => {\r\n if (interval.current) {\r\n clearTimeout(interval.current); \r\n } \r\n } \r\n }, []); \r\n \r\n if (EsGantryEstatusActivo){\r\n return (<>);\r\n }\r\n\r\n return (\r\n \r\n \r\n );\r\n}\r\nexport default ActiveDowntimes;","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n label,\r\n} from 'reactstrap'; \r\nimport Button from '@material-ui/core/Button';\r\nimport AppsIcon from '@material-ui/icons/Apps';\r\nimport Help from '@material-ui/icons/Help';\r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils'; \r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next';\r\nimport ProductionsDashboardsFilters from './ProductionsDashboardsFilters';\r\nimport DailyOperationDashboard from \"./DailyOperationDashboard/DailyOperationDashboard\";\r\nimport OperationDowntimesDashboard from \"./OperationDownTimes/OperationDowntimesParetos\"\r\nimport OperationScrapDashboard from \"./OperationScrap/OperationScrapDashboard\";\r\nimport { TabView, TabPanel } from 'primereact/tabview';\r\nimport Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride'; \r\nimport PageContent from '../../layouts/PageContent'; \r\nimport ActiveDowntimes from './ActiveDowntimes/ActiveDowntimes';\r\nimport ActiveDowntimesComponent from './ActiveDowntimes/ActiveDowntimesComponent';\r\n\r\nconst ProductionsDashboards = (props) => { \r\n /* ################## useState area start ################## */\r\nconst { t } = useTranslation(['formulario', 'common']);\r\nconst [showContent, setshowContent] = useState(false);\r\nconst [filters, setfilters] = useState({ ClaZona:null }); \r\nconst [activeIndex, setActiveIndex] = useState(0);\r\n /* ################## End useState area start ################## */\r\n \r\n\r\n const onSearch = (dataFilter) => { \r\n console.log('onSearch'); \r\n console.log(dataFilter);\r\n setfilters(dataFilter);\r\n if (dataFilter.ClaZona > 0){\r\n setshowContent(true); \r\n }\r\n else{\r\n setshowContent(false);\r\n }\r\n } \r\n \r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n { showContent === true ? ( \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ProductionsDashboards;\r\n","/* eslint-disable react/button-has-type */\r\nimport React, { useState, useEffect, useRef } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from '../../../layouts/PageContent'; \r\nimport { Toolbar } from 'primereact/toolbar';\r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { Row, Col } from 'reactstrap';\r\nimport { Badge } from 'primereact/badge';\r\nimport moment from \"moment\"; \r\nimport { Dialog } from 'primereact/dialog'; \r\nimport { Dropdown } from 'primereact/dropdown';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\n\r\nconst PerformanceDevSetUpTable = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']);\r\n const [PerformanceDevList, setPerformanceDevList] = useState([]); \r\n const [mostrarDetalleUsuarios, setMostrarDetalleUsuarios] = useState(false);\r\n const [EmployeeParticipationDet, setEmployeeParticipationDet] = useState([]);\r\n const [IdPeformanceDevSelected, setIdPeformanceDevSelected] = useState([]); \r\n const dt = useRef(null); \r\n \r\n\r\n useEffect(() => { \r\n const GetCfgPerformanceDevList = `${config.UrlApiProject}hr/GetCfgPerformanceDevList`; \r\n const paramsToService = { }; \r\n callApi(GetCfgPerformanceDevList, 'GET', paramsToService, (response) => {\r\n setPerformanceDevList(response.data.PerformanceDevList);\r\n });\r\n \r\n }, []); \r\n\r\n const header = ( \r\n <>\r\n {t('hr:PerformanceDevTableTitle')}\r\n \r\n )\r\n\r\n const modalHeader = () => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n \r\n\r\n\r\n const OnParticipationDetail = (rowData) => { \r\n const GetEmployeeParticipationDetail = `${config.UrlApiProject}hr/GetEmployeeParticipationDetail`; \r\n const paramsToService = { \r\n IdPerformanceDev : rowData.IdPerformanceDev,\r\n TipoDetalleParticipacion: 1 // 180-Degree Feedback\r\n }; \r\n\r\n setIdPeformanceDevSelected(rowData.IdPerformanceDev);\r\n callApi(GetEmployeeParticipationDetail, 'POST', paramsToService, (response) => {\r\n setEmployeeParticipationDet(response.data.EmployeeParticipationDet);\r\n setMostrarDetalleUsuarios(true);\r\n });\r\n\r\n \r\n }\r\n\r\n const DegreeTemplate = (rowData) => {\r\n return (\r\n <>\r\n onEditClick(rowData)} className=\"p-button-rounded p-button-primary\" /> \r\n \r\n );\r\n } \r\n\r\n \r\n\r\n return (\r\n <> \r\n \r\n \r\n { setMostrarDetalleUsuarios(false)}}\r\n maximized={true}\r\n > \r\n {\r\n IdPeformanceDevSelected === 1 ?\r\n (\r\n <>\r\n \r\n checkMarkTempate(rowdata, \"EstatusIDPTool\")} header={t('hr:IdPTool')} columnKey=\"EstatusIDPTool\" headerStyle={{ width: '130px' }}> \r\n checkMarkTempate(rowdata, \"Estatus180DegreeSelfReview\")} header={t('hr:180Degree')} columnKey=\"Estatus180DegreeSelfReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusEmployeeSelfReview\")} header={t('hr:EmployeeSelfReview')} columnKey=\"EstatusEmployeeSelfReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusContribucionReview\")} header={t('hr:ScorecardReviewed')} columnKey=\"EstatusContribucionReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusManagerReview\")} header={t('hr:ManagerReview')} columnKey=\"EstatusManagerReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusAnnualReview\")} header={t('hr:AnnualReview')} columnKey=\"EstatusAnnualReview\" headerStyle={{ width: '100px' }}> \r\n \r\n \r\n checkMarkTempate(rowdata, \"EstatusIDPTool\")} header={t('hr:IdPTool')} columnKey=\"EstatusIDPTool\" headerStyle={{ width: '130px' }}> \r\n checkMarkTempate(rowdata, \"Estatus180DegreeSelfReview\")} header={t('hr:180Degree')} columnKey=\"Estatus180DegreeSelfReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusEmployeeSelfReview\")} header={t('hr:EmployeeSelfReview')} columnKey=\"EstatusEmployeeSelfReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusManagerReview\")} header={t('hr:ManagerReview')} columnKey=\"EstatusManagerReview\" headerStyle={{ width: '100px' }}> \r\n checkMarkTempate(rowdata, \"EstatusAnnualReview\")} header={t('hr:AnnualReview')} columnKey=\"EstatusAnnualReview\" headerStyle={{ width: '100px' }}> \r\n \r\n handleRemoveClick(rowData)} className=\"p-button-rounded p-button-warning\" /> \r\n \r\n );\r\n}\r\n\r\nconst emptyValueValidator = (e) => {\r\n const { rowData, field } = e.columnProps;\r\n return rowData[field].trim().length > 0;\r\n}\r\n\r\nconst fieldsRequired = (rowData) => { \r\n return (\r\n <>\r\n {errors[`${name}[${rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n} \r\n return (\r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n descPreguntaEditor(props)}> \r\n orderByEditor(props)}> \r\n \r\n \r\n
\r\n \r\n );\r\n}; \r\n\r\nexport default PerformanceDevQuestionario;\r\n\r\n\r\n","/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport \"./SweatAlertCustomIcon.scss\";\r\n \r\n\r\nfunction SweatAlertCustomIcon ({\r\n title\r\n ,letter \r\n ,className\r\n }) { \r\n return ( \r\n <> \r\n handleRemoveClick(rowData)} className=\"p-button-rounded p-button-warning\" /> \r\n \r\n );\r\n}\r\n\r\nconst fieldsRequired = (rowData) => { \r\n return (\r\n <>\r\n {errors[`${name}[${rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n} \r\n\r\nconst TituloCriterioEditor = (props) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n TituloCriterioEditor(props)}\r\n >\r\n \r\n orderByEditor(props)}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}; \r\n\r\nexport default PerformanceDevCriterio;\r\n\r\n\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useState, useEffect } from 'react'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi, showSweetAlert } from '../../../utils/utils'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from '../../../layouts/PageContent'; \r\nimport { Toolbar } from 'primereact/toolbar'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { Row, Col, Card, CardBody } from 'reactstrap';\r\nimport FieldNumber from '../../../components/Controls/FieldNumber.jsx'\r\nimport FieldText from '../../../components/Controls/FieldText.jsx'\r\nimport { Divider } from 'primereact/divider';\r\nimport FieldToogleSwitch from '../../../components/Controls/FieldToogleSwitch/FieldToogleSwitch' \r\nimport PerformanceDevQuestionario from './PerformanceDevQuestionario'; \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\nimport FieldCalendar from '../../../components/Controls/FieldCalendar';\r\nimport { Calendar } from 'primereact/calendar';\r\nimport { LegendTitleSubtitle } from 'devextreme-react/bar-gauge';\r\nimport FieldDropdown from '../../../components/Controls/FieldDropdown.jsx';\r\nimport swal from '@sweetalert/with-react';\r\nimport SweatAlertCustomIcon from 'components/SweatAlert/SweatAlertCustomIcon';\r\nimport PerformanceDevCriterio from './PerformanceDevCriterio';\r\n\r\nconst PerformanceDevSetUpDetail = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']);\r\n const [yesNoOptions, setYesNoOptions] = useState([`${t('common:On')}`, `${t('common:Off')}`]);\r\n const [ActivaEmployeeSelfReview, setActivaEmployeeSelfReview] = useState(false);\r\n const [ActivaManagerReview, setActivaManagerReview] = useState(false);\r\n const [ActivaAnnualReview, setActivaAnnualReview] = useState(false);\r\n const [Activa180DegreeReview, setActiva180DegreeReview] = useState(false);\r\n const [ActivaIDPTool, setActivaIDPTool] = useState(false);\r\n const [Anio, setAnio] = useState(new Date().getFullYear());\r\n const [errors, setErrors] = useState({}); \r\n const [EmployeeReviewQuestionario, setEmployeeReviewQuestionario] = useState([]); \r\n const [ManagerQuestionario, setManagerQuestionario] = useState([]); \r\n const [IdPerformanceDev, setIdPerformanceDev] = useState(null); \r\n const [employeeSelfReviewRange, setEmployeeSelfReviewRange] = useState([]);\r\n const [managerReviewRange, setManagerReviewRange] = useState([]);\r\n const [c180DegreeReviewRange, setC180DegreeReviewRange] = useState([]);\r\n const [annualReviewRange, setAnnualReviewRange] = useState([]);\r\n const [IDPRange, setIDPRange] = useState([]);\r\n const [EncuestasList, setEncuestasList] = useState([]);\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [ActivaRecibirFeedbackCultureSurvey, setActivaRecibirFeedbackCultureSurvey] = useState(false);\r\n const [ActivaDarFeedbackCultureSurvey, setActivaDarFeedbackCultureSurvey] = useState(false);\r\n const [PerformanceCriterio, setPerformanceCriterio] = useState([]); \r\n \r\n const rightToolbarTemplate = () => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {\r\n Anio < 2022 ? (<>) :\r\n (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n } \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n setEmployeeReviewQuestionario(questionario)}> \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n setManagerQuestionario(questionario)}> \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setPerformanceCriterio(criterio)}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}; \r\nexport default PerformanceDevSetUpDetail;\r\n\r\n\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport { Calendar } from 'primereact/calendar';\r\n\r\nconst FieldTime = (props) => {\r\n \r\n const onChange = (value) => { \r\n if (props.onChange !== null){ \r\n props.onChange(value);\r\n } \r\n } \r\n\r\n const isFormFieldInValid = (name) => !!(typeof(props.errors) !== 'undefined' && props.errors !== null && props.errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {props.errors[name].message};\r\n };\r\n\r\n return ( \r\n <> \r\n \r\n 30 : false) : false} \r\n /> \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n \r\n )\r\n} \r\n\r\n \r\nexport default FieldMultiSelect; \r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from '../../../../layouts/PageContent';\r\nimport { Row, Col, Card, CardBody, CardHeader, CardTitle, CardFooter } from 'reactstrap';\r\nimport InstructionsCard from '../../../../components/Cards/InstructionsCard/InstructionsCard';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../../utils/utils';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport swal from '@sweetalert/with-react';\r\nimport SweatAlertCustomIcon from '../../../../components/SweatAlert/SweatAlertCustomIcon';\r\nimport moment from 'moment';\r\nimport { Badge } from 'primereact/badge';\r\nimport Score from '../../../../components/Cards/Score/Score.jsx';\r\nimport FieldButton from '../../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport EditorText from 'components/Controls/EditorText/EditorText';\r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\nimport FieldTextArea from 'components/Controls/FieldTextArea';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport './Survey.css';\r\nimport { Tooltip } from 'primereact/tooltip';\r\nimport { Divider } from 'primereact/divider';\r\n\r\nconst SurveyManagementContestarPreguntas = (props) => {\r\n /* ################## useState area start ################## */\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [IdEncuestaPagina, setIdEncuestaPagina] = useState(null);\r\n const [IdEncuestaPaginaPregunta, setIdEncuestaPaginaPregunta] = useState(null);\r\n const [ClaFormularioTipoCampo, setClaFormularioTipoCampo] = useState(null);\r\n const [Descripcion, setDescripcion] = useState(null);\r\n const [Index, setIndex] = useState(null); \r\n\r\n useEffect(() => {\r\n setIdEncuesta(props.IdEncuesta === undefined ? null : props.IdEncuesta);\r\n setIdEncuestaPagina(props.IdEncuestaPagina === undefined ? null : props.IdEncuestaPagina);\r\n setIdEncuestaPaginaPregunta(\r\n props.IdEncuestaPaginaPregunta === undefined ? null : props.IdEncuestaPaginaPregunta\r\n );\r\n setIndex(props.Index === undefined ? null : props.Index);\r\n setDescripcion(props.Descripcion === undefined ? null : props.Descripcion);\r\n setClaFormularioTipoCampo(props.ClaFormularioTipoCampo === undefined ? null : props.ClaFormularioTipoCampo);\r\n // obtenerSurveyPageQuestion(\r\n // props.IdEncuesta,\r\n // props.IdEncuestaPagina,\r\n // props.IdEncuestaPaginaPregunta\r\n // ); \r\n\r\n }, [\r\n props.IdEncuesta,\r\n props.IdEncuestaPagina,\r\n props.IdEncuestaPaginaPregunta,\r\n props.RespuestaPregunta,\r\n props.PosiblesRespuestas,\r\n props.Index,\r\n props.Descripcion,\r\n props.ClaFormularioTipoCampo\r\n ]);\r\n\r\n const obtenerSurveyPageQuestion = (pIdEncuesta, pIdEncuestaPagina, pIdEncuestaPaginaPregunta) => {\r\n const GetHRSurveyManagementQuestionForPage = `${config.UrlApiProject}HR/GetHRSurveyManagementQuestionForPage`;\r\n const paramsToService = {\r\n IdEncuesta: pIdEncuesta,\r\n IdEncuestaPagina: pIdEncuestaPagina,\r\n IdEncuestaPaginaPregunta: pIdEncuestaPaginaPregunta,\r\n };\r\n callApi(GetHRSurveyManagementQuestionForPage, 'POST', paramsToService, (response) => {\r\n const [preguntasPorPagina] = response.data.EncuestaPaginaPregunta;\r\n setDescripcion(preguntasPorPagina.Descripcion);\r\n setClaFormularioTipoCampo(preguntasPorPagina.ClaFormularioTipoCampo);\r\n });\r\n };\r\n\r\n const onchangeControlSingle = (value) => {\r\n props.onValueChangedQuestion(\r\n props.Index,\r\n value, \r\n value\r\n );\r\n };\r\n\r\n const onChangeControlPlano = (value) => {\r\n props.onValueChangedQuestion(props.Index, null, value);\r\n };\r\n const TipodeCampoPregunta = (pClaFormularioTipoCampo) => {\r\n if (pClaFormularioTipoCampo === 1) {\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default SurveyManagementContestarPreguntas;\r\n","/* eslint-disable react/no-danger */\r\n/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert, getDeviceUniqueID } from '../../../../utils/utils';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport swal from '@sweetalert/with-react';\r\nimport SweatAlertCustomIcon from 'components/SweatAlert/SweatAlertCustomIcon';\r\nimport SurveyManagementContestarPreguntas from './SurveyManagementContestarPreguntas';\r\nimport { CodeSharp } from '@material-ui/icons';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { Toolbar } from 'primereact/toolbar';\r\nimport InstructionsCard from '../../../../components/Cards/InstructionsCard/InstructionsCard.jsx';\r\n\r\nconst SurveyManagementContestar = (props) => {\r\n const { t } = useTranslation(['survey', 'common']);\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [IdEncuestaPagina, setIdEncuestaPagina] = useState(null);\r\n const [Siguiente, setSiguiente] = useState(null);\r\n const [Survey, setSurvey] = useState([]);\r\n const [Preguntas, setPreguntas] = useState([]);\r\n const [PosiblesRespuestas, setPosiblesRespuestas] = useState([]);\r\n const [Titulo, setTitulo] = useState(null);\r\n const [CantPaginas, setCantPaginas] = useState(null);\r\n const [PaginaActual, setPaginaActual] = useState(null);\r\n const [TituloPagina, setTituloPagina] = useState(null);\r\n const [DescripcionPagina, setDescripcionPagina] = useState(null);\r\n const [DescripcionHtmlPagina, setDescripcionHtmlPagina] = useState(null);\r\n const [DescripcionEncuestaHtml, setDescripcionEncuestaHtml] = useState(null);\r\n const [errors, setErrors] = useState({});\r\n const [EsContestar, setEsContestar] = useState(true);\r\n const [IdEncuestaContestada, setIdEncuestaContestada] = useState(null);\r\n const [Completado, setCompletado] = useState(1);\r\n const [FechaIniciaEncuesta, setFechaIniciaEncuesta] = useState(null);\r\n const [EsEncuestaCompletada, setEsEncuestaCompletada] = useState(0);\r\n const [EsEncuestaCerrada, setEsEncuestaCerrada] = useState(0);\r\n const [DeviceUniqueID, setDeviceUniqueID] = useState(getDeviceUniqueID());\r\n const [EsDeviceParticipo, setEsDeviceParticipo] = useState(0);\r\n const [MultiplesRespuestasPorDispositivo, setMultiplesRespuestasPorDispositivo] = useState(false);\r\n \r\n useEffect(() => { \r\n setIdEncuesta(props.IdEncuesta === undefined ? null : props.IdEncuesta);\r\n setIdEncuestaContestada(props.IdEncuestaContestada === undefined ? null : props.IdEncuestaContestada);\r\n obtenerEncuestaPorPagina(props.IdEncuesta, null, null, props.IdEncuestaContestada, DeviceUniqueID);\r\n \r\n /*\r\n if (props.IdEncuestaContestada !== null) {\r\n EncuestaContestadExistSel(props.IdEncuestaContestada); \r\n }\r\n */\r\n }, [props.IdEncuesta, props.IdEncuestaContestada]);\r\n\r\n const obtenerEncuestaPorPagina = (pIdEncuesta, pPaginaActual, pSiguiente, pIdEncuestaContestada, DeviceUniqueID) => {\r\n const getHRSurveyManagementContestar = `${config.UrlApiProject}HR/GetHRSurveyManagementContestar`;\r\n const paramsToService = {\r\n IdEncuesta: pIdEncuesta,\r\n IdEncuestaPagina: pPaginaActual === null ? null : IdEncuestaPagina,\r\n IdEncuestaContestada : pIdEncuestaContestada,\r\n Siguiente: pSiguiente,\r\n DeviceUniqueID\r\n };\r\n callApi(getHRSurveyManagementContestar, 'POST', paramsToService, (response) => {\r\n const head = response.data.Encuesta.length > 0 ? response.data.Encuesta[0] : {};\r\n setTitulo(head.Titulo);\r\n setDescripcionEncuestaHtml(head.DescripcionHtml);\r\n setCantPaginas(head.CantPaginas);\r\n setPaginaActual(head.PaginaActual);\r\n setIdEncuestaPagina(head.IdEncuestaPagina);\r\n setTituloPagina(head.TituloPagina);\r\n setDescripcionPagina(head.DescripcionPagina);\r\n setDescripcionHtmlPagina(head.DescripcionHtmlPagina);\r\n setEsEncuestaCompletada(head.EsEncuestaCompletada);\r\n setIdEncuestaContestada(head.IdEncuestaContestada);\r\n setFechaIniciaEncuesta(head.FechaIniciaEncuesta)\r\n setPreguntas(response.data.Preguntas);\r\n setPosiblesRespuestas(response.data.PosiblesRespuestas); \r\n setEsEncuestaCerrada(head.EsEncuestaCerrada);\r\n setEsDeviceParticipo(head.EsDeviceParticipo);\r\n setMultiplesRespuestasPorDispositivo(head.MultiplesRespuestasPorDispositivo);\r\n });\r\n };\r\n\r\n const siguientePagina = () => {\r\n onSaveQuestionClick();\r\n };\r\n\r\n const previusPagina = () => {\r\n setErrors({});\r\n obtenerEncuestaPorPagina(IdEncuesta, PaginaActual, 2, IdEncuestaContestada, DeviceUniqueID);\r\n };\r\n\r\n const onValueChangedQuestion = (RowIndex, idEncuestaPaginaPreguntaRespuesta, newValue) => {\r\n const newErrors = { ...errors }; \r\n const newPreguntas = [...Preguntas];\r\n newPreguntas[RowIndex].RespuestaPregunta = newValue;\r\n newPreguntas[RowIndex].IdEncuestaPaginaPreguntaRespuesta = idEncuestaPaginaPreguntaRespuesta;\r\n setPreguntas(newPreguntas);\r\n };\r\n\r\n async function onSaveQuestionClick() {\r\n const newPreguntasOpc = [...Preguntas];\r\n\r\n newPreguntasOpc.forEach((element) => {\r\n if (Array.isArray(element.RespuestaPregunta)) {\r\n let opc = '';\r\n element.RespuestaPregunta.map((item, index) => {\r\n return (opc = `${opc + element.RespuestaPregunta[index]},`);\r\n });\r\n element.RespuestaPregunta = opc.slice(0, -1);\r\n element.IdEncuestaPaginaPreguntaRespuesta = null;\r\n }\r\n });\r\n\r\n const value = {\r\n Preguntas: newPreguntasOpc,\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n setErrors({});\r\n const saveMSWSurveyRespuestaPorPregunta = `${config.UrlApiProject}HR/SaveMSWSurveyRespuestaPorPregunta`;\r\n\r\n const paramsToService = {\r\n IdEncuesta,\r\n IdEncuestaContestada,\r\n surveyManagementContestadaDTO: newPreguntasOpc,\r\n };\r\n\r\n callApi(saveMSWSurveyRespuestaPorPregunta, 'POST', paramsToService, (response) => {\r\n obtenerEncuestaPorPagina(IdEncuesta, PaginaActual, 1, IdEncuestaContestada, DeviceUniqueID);\r\n });\r\n }\r\n\r\n async function onSubmitSaveQuestionClick() {\r\n const newPreguntasOpc = [...Preguntas];\r\n\r\n newPreguntasOpc.forEach((element) => {\r\n if (Array.isArray(element.RespuestaPregunta)) {\r\n let opc = '';\r\n element.RespuestaPregunta.map((item, index) => {\r\n return (opc = `${opc + element.RespuestaPregunta[index]},`);\r\n });\r\n element.RespuestaPregunta = opc.slice(0, -1);\r\n element.IdEncuestaPaginaPreguntaRespuesta = null;\r\n }\r\n });\r\n\r\n const value = {\r\n Preguntas: newPreguntasOpc,\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n\r\n const saveMSWSurveyRespuestaPorPregunta = `${config.UrlApiProject}HR/SaveMSWSurveyRespuestaPorPregunta`;\r\n\r\n const paramsToService = {\r\n IdEncuesta,\r\n IdEncuestaContestada,\r\n Completado,\r\n surveyManagementContestadaDTO: newPreguntasOpc,\r\n };\r\n\r\n callApi(saveMSWSurveyRespuestaPorPregunta, 'POST', paramsToService, (response) => {\r\n obtenerEncuestaPorPagina(IdEncuesta, null, null, IdEncuestaContestada, DeviceUniqueID);\r\n showSweetAlert(t('common:Success'), t('survey:EncuestaContestada'), 'success');\r\n EncuestaEnviada();\r\n });\r\n }\r\n\r\n const valitationSchemeSave = yup.object().shape({\r\n Preguntas: yup.array().of(\r\n yup.object().shape({\r\n RespuestaPregunta: yup\r\n .string()\r\n .when('EsObligatorio', {\r\n is: 1,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }),\r\n })\r\n ),\r\n });\r\n \r\n const InicioContestarEncuesta = () => { \r\n const saveMSWSurveyRespuestaHead = `${config.UrlApiProject}HR/SaveMSWSurveyRespuestaHead`;\r\n\r\n const paramsToService = {\r\n IdEncuesta,\r\n IdEncuestaContestada,\r\n DeviceUniqueID\r\n };\r\n\r\n callApi(saveMSWSurveyRespuestaHead, 'POST', paramsToService, (response) => {\r\n setEsContestar(false); \r\n obtenerEncuestaPorPagina(IdEncuesta, null, null, response.data.Encuesta[0].IdEncuestaContestada, DeviceUniqueID);\r\n // setIdEncuestaContestada(response.data.Encuesta.IdEncuestaContestada);\r\n // setFechaIniciaEncuesta(response.data.Encuesta.FechaIniciaEncuesta); \r\n // setEsEncuestaCompletada(response.data.Encuesta.EsEncuestaCompletada); \r\n }); \r\n }\r\n \r\n /*\r\n const EncuestaContestadExistSel = (IdEncuestaContestada) => {\r\n const getEncuestaContestadExistSel = `${config.UrlApiProject}HR/GetEncuestaContestadExistSel`;\r\n\r\n const paramsToService = {\r\n IdEncuesta: props.IdEncuesta,\r\n IdEncuestaContestada\r\n };\r\n\r\n callApi(getEncuestaContestadExistSel, 'POST', paramsToService, (response) => {\r\n const encuestaContestada = response.data.EncuestaContestada.length > 0 ? response.data.EncuestaContestada[0]:{};\r\n setFechaIniciaEncuesta(encuestaContestada.FechaIniciaEncuesta); \r\n }); \r\n }\r\n */\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n \r\n const closeModalEsIniciarEncuesta = () => {\r\n if (typeof(props.onClose)==='function'){ \r\n props.onClose();\r\n } \r\n };\r\n\r\n const EncuestaEnviada = () => {\r\n if (typeof(props.onFinishSubmit)==='function'){ \r\n props.onFinishSubmit();\r\n } \r\n };\r\n\r\n const renderHeaderContestada = () => {\r\n return (\r\n \r\n \r\n \r\n );\r\n };\r\n \r\n const RenderEncuestaDeviceParticipo = (\r\n <>\r\n \r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n)} \r\n \r\n )\r\n const RenderEncuestaIniciada = (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {Preguntas.length >= 1 ? (\r\n showActiveRows(Preguntas).map((element, index) => {\r\n return (\r\n \r\n opc.IdEncuestaPaginaPregunta === element.IdEncuestaPaginaPregunta\r\n )}\r\n RespuestaPregunta={element.RespuestaPregunta} \r\n ClaFormularioTipoCampo={element.ClaFormularioTipoCampo}\r\n Descripcion={element.DescripcionPregunta} \r\n Index={element.RowIndex}\r\n >\r\n \r\n
\r\n );\r\n })\r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n { /* logo ? (\r\n \r\n 
\r\n \r\n ) : null */}\r\n {/* \r\n \r\n */}\r\n \r\n {/*
\r\n );\r\n return (\r\n */}\r\n
\r\n \r\n
\r\n {/* \r\n \r\n
\r\n \r\n \r\n
*/}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {/* \r\n 
\r\n \r\n \r\n Bienvenido: {getSessionItem('NomUsuario', '')}\r\n */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {getSessionItem('NomUsuario', '')}\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n ({formulario.TotalPreguntas}) {t('formulario:QuestionAvailable')}
\r\n ●\r\n Active\r\n \r\n
\r\n \r\n
\r\n \r\n {props.title} \r\n
\r\n \r\n { props.toolBar }\r\n
\r\n \r\n {props.subheader} \r\n
\r\n \r\n { props.children }\r\n
\r\n \r\n )\r\n} \r\nexport default PageContent; \r\n","import React , { useEffect } from 'react'; \r\nimport { Alert, Form, FormGroup, Label, Input, Card, CardHeader, CardBody, Row, Col, CardTitle, Button } from 'reactstrap';\r\nimport DateBox from 'devextreme-react/date-box';\r\nimport CardFormulario from './CardFormulario.js'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi } from '../../utils/utils'; \r\nimport { ButtonGroup } from 'devextreme-react/button-group';\r\nimport { Wizard, WizardStep } from \"react-wizard-primitive\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { Skeleton } from 'primereact/skeleton';\r\nimport { Background } from 'devextreme-react/vector-map';\r\nimport PageContent from '../../layouts/PageContent'; \r\n\r\n\r\nclass Formularios extends React.Component {\r\n\r\n constructor(props) {\r\n super(props); \r\n \r\n this.state = { \r\n Formularios: [],\r\n IsLoading:false\r\n }\r\n\r\n \r\n \r\n };\r\n \r\n \r\n \r\n componentDidMount() \r\n { \r\n const urlWebService = `${config.UrlApiProject}formulario/getFormularios`; \r\n\r\n const paramsService = null;\r\n\r\n this.setState({\r\n IsLoading: true, \r\n });\r\n \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n this.setState({\r\n Formularios: response.data.Formularios, \r\n IsLoading:false\r\n });\r\n\r\n\r\n }); \r\n } \r\n \r\n \r\n\r\n \r\n render () { \r\n \r\n if (this.state.IsLoading){\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
*/}\r\n \r\n \r\n Total traffic\r\n \r\n 350,897\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n 3.48%\r\n \r\n Since last month\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
*/} \r\n {/* \r\n \r\n QUESTIONARIES\r\n \r\n
\r\n \r\n _______________\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n Start questionary\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
*/} \r\n {/* \r\n \r\n QUESTIONARIES\r\n \r\n
\r\n \r\n _______________\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Questionary results\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
*/} \r\n \r\n \r\n PROFITABILITY\r\n \r\n\r\n
\r\n \r\n _______________\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Summary report\r\n
\r\n\r\n \r\n onHideKeyboard()} \r\n className=\"no-border white-color pi pi-times\"\r\n style={{ marginRight: '.25em', background: \"transparent\", width: '30px' }}\r\n />\r\n \r\n
\r\n
\r\n)\r\n\r\nconst renderFooter = ( \r\n \r\n \r\n
\r\n
\r\n )\r\n\r\nconst onHideKeyboard = () => { \r\n if (props.onHide !== null && typeof props.onHide === 'function') {\r\n props.onHide();\r\n }\r\n}; \r\n \r\n return ( \r\n <> \r\n \r\n onClearClick()}\r\n label={t('common:Clear')}\r\n className=\"p-button-danger no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em', width: '100%' }}\r\n />\r\n
\r\n \r\n \r\n onAcceptClick()}\r\n label={t('common:Accept')}\r\n className=\"p-button-success no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em', width: '100%' }}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n} \r\n\r\nexport default FieldKeyboard; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useState } from 'react'; \r\nimport { InputText } from 'primereact/inputtext';\r\nimport { Button } from 'reactstrap'; \r\nimport FieldKeyboard from \"./Keyboard/FieldKeyboard\";\r\n\r\nconst FieldText = (props) => {\r\n\r\n const [ShowKeyboard, setShowKeyboard] = useState(false);\r\n\r\n const onChange = (value) => { \r\n if (props.onChange !== null && props.onChange !== undefined){\r\n props.onChange(value);\r\n } \r\n } \r\n const onBlur = (value) => { \r\n if (props.onBlur !== null && props.onBlur !== undefined){\r\n props.onBlur(value);\r\n } \r\n } \r\n const onKeyDown = (value) => { \r\n if (props.onKeyDown !== null && props.onKeyDown !== undefined){\r\n props.onKeyDown(value);\r\n } \r\n } \r\n const onClick = () => { \r\n if (props.onClick !== null && props.onClick !== undefined){\r\n props.onClick(); \r\n } \r\n } \r\n\r\n const onFocus = (event) => {\r\n event.target.select();\r\n if (props.onFocus !== null && typeof(props.onFocus) === 'function'){\r\n props.onFocus(event);\r\n } \r\n }\r\n\r\n const isFormFieldInValid = (name) => !!(typeof(props.errors) !== 'undefined' && props.errors !== null && props.errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {props.errors[name].message};\r\n };\r\n\r\n const onClickKeyboard = () => {\r\n setShowKeyboard(true);\r\n }\r\n\r\n const onChangekeyboard = (text) => {\r\n if (props.onChange !== null && props.onChange !== undefined){\r\n const e = {\r\n target: {\r\n value: text\r\n }\r\n }\r\n\r\n console.log('value', e);\r\n props.onChange(e);\r\n } \r\n }\r\n \r\n if (props.IsShowKeyboard){\r\n return (\r\n <>\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {renderHeader}\r\n
\r\n \r\n (keyboardReference.current = r)} \r\n layoutName={layoutName}\r\n mergeDisplay={true}\r\n newLineOnEnter={true} \r\n theme=\"hg-theme-default hg-layout-numeric numeric-theme\"\r\n layout={{\r\n default: [\"1 2 3\", \"4 5 6\", \"7 8 9\", \". 0 {bksp}\"],\r\n shift: [\"! / #\", \"$ % ^\", \"& * (\", \"{shift} ) +\", \"{bksp}\"],\r\n \r\n }}\r\n onChange={onChangeKeyboard}\r\n onKeyPress={onKeyPressKeyboard} \r\n display={{\r\n \"{alt}\": \".?123\",\r\n \"{smileys}\": \"\\uD83D\\uDE03\",\r\n \"{shift}\": \"Shift\",\r\n \"{shiftactivated}\": \"⇧\",\r\n \"{enter}\": \"Enter\",\r\n \"{bksp}\": \"⌫\",\r\n \"{altright}\": \".?123\",\r\n \"{downkeyboard}\": \"🞃\",\r\n \"{space}\": \"Space\",\r\n \"{default}\": \"ABC\",\r\n \"{back}\": \"⇦\"\r\n }}\r\n /> \r\n \r\n )\r\n :\r\n (\r\n <>\r\n (keyboardReference.current = r)} \r\n layoutName={layoutName}\r\n mergeDisplay={true}\r\n newLineOnEnter={true} \r\n layout={{\r\n default: [\r\n \"q w e r t y u i o p {bksp}\",\r\n \"a s d f g h j k l {enter}\",\r\n \"{shift} z x c v b n m , . {alt} \",\r\n \"{space}\"\r\n ],\r\n shift: [\r\n \"Q W E R T Y U I O P {bksp}\",\r\n \"A S D F G H J K L {enter}\",\r\n \"{shiftactivated} Z X C V B N M , . {alt}\",\r\n \"{space}\"\r\n ],\r\n alt: [\r\n \"1 2 3 4 5 6 7 8 9 0 {bksp}\",\r\n `@ # $ & * ( ) ' \" {enter}`,\r\n \"{shift} % - + = / ; : ! ? {shift}\",\r\n \"{default} {space} \"\r\n ],\r\n smileys: [\r\n \"😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}\",\r\n `😏 😬 😭 😓 😱 😪 😬 😴 😯 {enter}`,\r\n \"😐 😇 🤣 😘 😚 😆 😡 😥 😓 🙄 {shift}\",\r\n \"{default} {space} {altright} {downkeyboard}\"\r\n ]\r\n }}\r\n onChange={onChangeKeyboard}\r\n onKeyPress={onKeyPressKeyboard} \r\n display={{\r\n \"{alt}\": \".?123\",\r\n \"{smileys}\": \"\\uD83D\\uDE03\",\r\n \"{shift}\": \"⇧\",\r\n \"{shiftactivated}\": \"⇧\",\r\n \"{enter}\": \"Enter\",\r\n \"{bksp}\": \"⌫\",\r\n \"{altright}\": \".?123\",\r\n \"{downkeyboard}\": \"🞃\",\r\n \"{space}\": \"Space\",\r\n \"{default}\": \"ABC\",\r\n \"{back}\": \"⇦\"\r\n }}\r\n /> \r\n \r\n)\r\n } \r\n
\r\n \r\n {\r\n /*\r\n
\r\n {\r\n props.isNumeric === true ?\r\n (\r\n <>\r\n \r\n {renderFooter}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n {\r\n ShowKeyboard ?\r\n (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n )\r\n }\r\n return ( \r\n <> \r\n \r\n \r\n \r\n {\r\n props.IsShowText ?\r\n (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n {\r\n ShowKeyboard ?\r\n (\r\n \r\n \r\n {props.labelGroupLeft}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n )\r\n }\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t('common:HeaderCameraAccess')}.\r\n
\r\n\r\n {t('common:SubHeaderCameraAccess')}:\r\n
\r\n- \r\n
- {t('common:CameraAccessInstruccion1')}. \r\n
- {t('common:CameraAccessInstruccion2')}. \r\n
- {t('common:CameraAccessInstruccion3')}. \r\n
\r\n
\r\n \r\n)\r\n :\r\n (\r\n <>\r\n {\r\n ImageURL!= null ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n {allowUploadImageFromFile && (\r\n uploadPhoto()}\r\n />\r\n )} \r\n retakePhoto()}\r\n />\r\n\r\n
\r\n \r\n ):(\r\n <>\r\n \r\n
\r\n \r\n {allowUploadImageFromFile && (\r\n uploadPhoto()}\r\n />\r\n )} \r\n toggleCamera()}\r\n />\r\n\r\n
\r\n \r\n )\r\n }\r\n \r\n)\r\n }\r\n\r\n \r\n );\r\n}\r\n\r\nexport default CameraComponent;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils';\r\nimport React, { useState, useEffect } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Image } from 'primereact/image';\r\nimport { Col, Row } from 'reactstrap';\r\n\r\nconst PreguntaArchivo = ({\r\n IdFormularioResuelto,\r\n IdFormularioPregunta\r\n}) => { \r\n const { t } = useTranslation(['common']);\r\n const [IsLoading, setIsLoading] = useState(true);\r\n const [Archivos, setArchivos] = useState([]);\r\n\r\n useEffect(() => { \r\n const urlWebService = `${config.UrlApiProject}formulario/getFormularioRespuestaArchivoAnexo?IdFormularioResuelto=${IdFormularioResuelto}&IdFormularioPregunta=${IdFormularioPregunta}`; \r\n const paramsService = {};\r\n setIsLoading(true);\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n const archivos = response.data.ArchivoAnexoList;\r\n setArchivos(archivos);\r\n setIsLoading(false);\r\n });\r\n }, [IdFormularioResuelto, IdFormularioPregunta]); \r\n\r\n\r\n return (\r\n IsLoading ? (\r\n \r\n \r\n
\r\n ) : (\r\n <> \r\n \r\n
\r\n );\r\n\r\n case 2:\r\n case 3:\r\n return (\r\n \r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n );\r\n\r\n case 4:\r\n case 5:\r\n return (\r\n \r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n );\r\n\r\n case 6:\r\n return (\r\n \r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n );\r\n\r\n case 7:\r\n return (\r\n \r\n {pregunta.DescripcionFormularioPregunta}\r\n
\r\n \r\n
\r\n );\r\n\r\n case 8:\r\n case 9: \r\n return (\r\n \r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n );\r\n\r\n case 10:\r\n case 11: \r\n return (\r\n \r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n );\r\n \r\n case 12:\r\n return (\r\n <>\r\n \r\n 3 ? pregunta.EsRequerida === true && pregunta.EsInvalida === true ? \"buttonList buttonListInvalid scroll-y scrollbar-primary\" : \"buttonList scrollbar-primary scroll-y\" : pregunta.EsRequerida === true && pregunta.EsInvalida === true ? \"p-invalid\" : \"\"}\r\n />\r\n {pregunta.EsRequerida === true && pregunta.EsInvalida === true && (\r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n \r\n
\r\n )}\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n
\r\n \r\n );\r\n\r\n default:\r\n return null;\r\n }\r\n };\r\n \r\n const removeImage = (idata) => { \r\n const newImageList = []\r\n for (let index = 0; index < props.pregunta.imageItems.length; index++) {\r\n if(idata===index){\r\n // no se agrega la imagen \r\n }else{\r\n newImageList.push(props.pregunta.imageItems[index]);\r\n }\r\n \r\n }\r\n \r\n // setImageItems(newImageList);\r\n onImageChange(newImageList);\r\n };\r\n\r\n const addImage = (ImageURL) => { \r\n const Image = ImageURL.split(\",\");\r\n if(Image[1]!==undefined){\r\n const infoObjectImage = { \r\n BajaLogica:0,\r\n Archivo:Image[1],\r\n ExtensionArchivo:'jpeg',\r\n NomArchivo:''\r\n }\r\n\r\n const CurrentImages = props.pregunta.imageItems === undefined || props.pregunta.imageItems === null ? [] : props.pregunta.imageItems;\r\n\r\n CurrentImages.push(infoObjectImage);\r\n\r\n // setImageItems(CurrentImages);\r\n onImageChange(CurrentImages);\r\n } \r\n \r\n setShowCamera(false);\r\n }\r\n\r\n const onHideCam=()=>{ \r\n setShowCamera(false);\r\n document.body.classList.add('p-overflow-hidden');\r\n }\r\n\r\n return (\r\n <>\r\n {renderField()}\r\n\r\n {showCamera && (\r\n \r\n \r\n \r\n \r\n )\r\n :\r\n (\r\n <>\r\n setShowCamera(true)} \r\n label={props.t('common:AttachPhotos')}\r\n icon=\"fas fa-camera\"\r\n className={pregunta.EsRequerida === true && pregunta.EsInvalida === true ? \"p-3 p-button-outlined p-button-info p-invalid-fileupload\" : \"p-3 p-button-outlined p-button-info\"}\r\n >\r\n \r\n {\r\n pregunta.imageItems !== undefined && pregunta.imageItems !== null\r\n ?\r\n (\r\n <>\r\n {\r\n pregunta.imageItems.map((item, index) => {\r\n const base64Icon = `data:image/jpeg;base64,${item.Archivo}`;\r\n return (\r\n <>\r\n
\r\n {pregunta.DescripcionFormularioPregunta}
\r\n {\r\n pregunta.respuesta!== \"\"&&pregunta.OpcionesRespuesta.length===0 && pregunta.imageItems=== null\r\n ?\r\n (\r\n <>\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n )\r\n })\r\n } \r\n \r\n )\r\n :\r\n (<>)\r\n }\r\n \r\n {pregunta.EsRequerida === true && pregunta.EsInvalida === true && (\r\n | \r\n | \r\n \r\n | \r\n
\r\n
\r\n )}\r\n \r\n )\r\n }\r\n \r\n {props.t('common:RequiredField')}.\r\n
\r\n \r\n \r\n \r\n \r\n \r\n ) }\r\n \r\n \r\n \r\n \r\n ) }\r\n \r\n
\r\n \r\n \r\n \r\n \r\n ) }\r\n \r\n \r\n \r\n \r\n ) }\r\n \r\n
\r\n\r\n ) }\r\n
\r\n \r\n )\r\n} \r\n \r\n Step {activeStepIndex + 1} of {stepCount}\r\n
\r\n{props.children} \r\n
\r\n { props.children[activeStepIndex].props.showNavigation === 'both' && (\r\n \r\n {props.children} \r\n
\r\n )\r\n } \r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaTurno}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaDepartamento}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaCelda}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaTurno}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaTurno}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaCelda}\r\n
\r\n \r\n
\r\n \r\n ) \r\n : <>}\r\n {this.state.errors.ClaMaquina}\r\n
\r\n \r\n
{formularioResuelto.NomUsuarioResuelve}
\r\n {formatTime(formularioResuelto.FechaCaptura)}
\r\n {formularioResuelto.NomTurno}
\r\n {formularioResuelto.NomDepartamento}
\r\n {formularioResuelto.ClaveCelda}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n ) \r\n : formularioResuelto.ClaFormulario === 3 || formularioResuelto.ClaFormulario === 4 || formularioResuelto.ClaFormulario === 5 ? (\r\n {formularioResuelto.NomTurno}
\r\n {formularioResuelto.NomTurno}
\r\n {formularioResuelto.NomDepartamento}
\r\n {`${formularioResuelto.ClaveCelda}${formularioResuelto.ABCMachine !== null && formularioResuelto.ABCMachine !== undefined ? formularioResuelto.ABCMachine : ''}`}
\r\n \r\n
\r\n {this.props.t('formulario:QuestionnaireResultTitle')}
\r\n \r\n\r\n
\r\n );\r\n }\r\n \r\n const renderGridItem = (data) => {\r\n return ( \r\n \r\n
\r\n \r\n {this.formatTime(data.FechaCaptura)}\r\n
\r\n {data.NomUsuarioResuelve}
\r\n {data.NomFormulario}
\r\n\r\n { data.ClaFormulario === 1 ? \r\n ( \r\n // cuando es el formulario 1\r\n \r\n \r\n
\r\n
\r\n ) \r\n : data.ClaFormulario === 2 ? (\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n {this.props.t('formulario:Department')} \r\n
\r\n {data.NomDepartamento} \r\n \r\n \r\n {this.props.t('formulario:Cell')} \r\n
\r\n {data.ClaveCelda}\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n : data.ClaFormulario === 3 || data.ClaFormulario === 4 || data.ClaFormulario === 5 ? (\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n \r\n
\r\n
\r\n ) \r\n : <> }\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n {this.props.t('formulario:Department')} \r\n
\r\n {data.NomDepartamento} \r\n \r\n \r\n {this.props.t('formulario:Cell')} \r\n
\r\n {`${data.ClaveCelda}${data.ABCMachine !== null && data.ABCMachine !== undefined ? data.ABCMachine : ''}`}\r\n \r\n \r\n { data.EsRequiereRevision === true ? () : <> }\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n const renderHeader = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {this.formatTime(data.FechaCaptura)}\r\n
\r\n { data.EsRequiereRevision === true ? () : <> }\r\n \r\n \r\n
\r\n { data.ClaFormulario === 1 ? \r\n ( \r\n // cuando es el formulario 1\r\n {data.NomUsuarioResuelve}
\r\n {data.NomFormulario}
\r\n \r\n \r\n
\r\n
\r\n ) \r\n : data.ClaFormulario === 2 ? (\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n {this.props.t('formulario:Department')} \r\n
\r\n {data.NomDepartamento} \r\n \r\n \r\n {this.props.t('formulario:Cell')} \r\n
\r\n {data.ClaveCelda} \r\n \r\n \r\n \r\n
\r\n
\r\n ) \r\n : data.ClaFormulario === 3 || data.ClaFormulario === 4 || data.ClaFormulario === 5 ? (\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n : <>}\r\n \r\n {this.props.t('formulario:Shift')} \r\n
\r\n {data.NomTurno} \r\n \r\n \r\n {this.props.t('formulario:Department')} \r\n
\r\n {data.NomDepartamento} \r\n \r\n \r\n {this.props.t('formulario:Cell')} \r\n
\r\n {`${data.ClaveCelda}${data.ABCMachine !== null && data.ABCMachine !== undefined ? data.ABCMachine : ''}`} \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n \r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n\r\n \r\n const header = renderHeader();\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {this.props.t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n { this.state.ClaFormulario === 1 ? \r\n ( \r\n // cuando es el formulario 1\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {\r\n this.state.Celdas.length > 0 ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : <> \r\n}\r\n \r\n ) \r\n : this.state.ClaFormulario === 2 ? (\r\n \r\n \r\n \r\n \r\n
\r\n ) : this.state.ClaFormulario === 3 || this.state.ClaFormulario === 4 || this.state.ClaFormulario === 5 ? (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : <>}\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n)\r\n} \r\n \r\nexport default PocketMarginFilters; \r\n \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source'; \r\nimport '../../assets/css/PivotGridBase.css'; \r\nimport $ from 'jquery';\r\n \r\nimport PivotGrid, {\r\n FieldChooser ,\r\n StateStoring\r\n} from 'devextreme-react/pivot-grid';\r\n \r\nimport { useTranslation } from 'react-i18next'; \r\n\r\nconst PocketMarginSummary = (props) => { \r\n \r\n \r\n const { t, i18n } = useTranslation(['formulario','common']); \r\n \r\n const getPivotDataSource = () => {\r\n return {\r\n fields: [{\r\n caption: t('formulario:Division'),\r\n width: 250,\r\n dataField: 'NomGrupoEstadistico1',\r\n area: 'row', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:Segment'),\r\n dataField: 'NomSegmento',\r\n width: 250,\r\n area: 'row', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:StatisticalGpo3'),\r\n dataField: 'NomGrupoEstadistico3',\r\n width: 250,\r\n area: 'row', \r\n isMeasure: false\r\n }, /* {\r\n caption: t('formulario:AccountName'),\r\n dataField: 'NomClienteCuenta', \r\n width: 350, \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:Zone'),\r\n dataField: 'NomZona', \r\n width: 250, \r\n isMeasure: false\r\n }, */ {\r\n caption: t('formulario:ToneladasRDS'),\r\n dataField: 'ToneladasRDS', \r\n summaryType: 'sum',\r\n dataType: 'number', format: 'fixedPoint', \r\n width: 50 ,\r\n isMeasure: true\r\n }, /* {\r\n caption: t('formulario:ProducerLocation'),\r\n width: 250,\r\n dataField: 'NomUbicacionOrigen', \r\n isMeasure: false\r\n }, */ {\r\n dataField: 'FechaFactura',\r\n dataType: 'date',\r\n area: 'column', \r\n isMeasure: false\r\n }, {\r\n caption: t('formulario:TonsSold'),\r\n dataField: 'Toneladas', \r\n summaryType: 'sum', \r\n dataType: 'number',\r\n format: 'fixedPoint',\r\n width: 50,\r\n area: 'data', \r\n isMeasure: true\r\n }, {\r\n caption: t('formulario:Pocket Price'),\r\n dataField: 'PocketPrice', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint', \r\n visible:true,\r\n isMeasure: true,\r\n width: 50\r\n }, {\r\n caption: t('formulario:PocketMargin'),\r\n dataField: 'PocketMargin', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint', \r\n visible:true,\r\n isMeasure: true,\r\n width: 50\r\n }, {\r\n caption: t('formulario:TonsReliab'),\r\n dataField: 'TonConfiables', \r\n summaryType: 'sum',\r\n dataType: 'number',\r\n format: 'fixedPoint',\r\n area: 'data', \r\n width: 50 ,\r\n isMeasure: true\r\n }, {\r\n caption: t('formulario:PorcReliab'), \r\n summaryType: 'sum', \r\n area: 'data', \r\n dataType: 'number', \r\n format: 'percent', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) { \r\n return e.value('TonConfiables', true) !== 0 ? e.value('TonConfiables', true) / e.value('Toneladas', true) : 0;\r\n } \r\n }, {\r\n caption: t('formulario:PMPriceByton'), \r\n summaryType: 'sum', \r\n area: 'data', \r\n dataType: 'number',\r\n format:'fixedPoint', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) {\r\n if (e.value('PocketMargin', true) < 0 && e.value('Toneladas', true) < 0 ) {\r\n return e.value('Toneladas', true) !== 0 ? (e.value('PocketMargin', true)*-1) / e.value('Toneladas', true) : 0;\r\n }\r\n\r\n return e.value('Toneladas', true) !== 0 ? e.value('PocketMargin', true) / e.value('Toneladas', true) : 0;\r\n } \r\n }, {\r\n caption: t('formulario:PMPorc'), \r\n summaryType: 'sum', \r\n area: 'data',\r\n dataType: 'number',\r\n format: 'percent', \r\n isMeasure: true, \r\n width: 50,\r\n calculateSummaryValue (e) {\r\n\r\n if (e.value('PocketMargin', true) < 0 && e.value('Toneladas', true) < 0){\r\n return e.value('PocketPrice', true) !== 0 ? ((e.value('PocketMargin', true)*-1 ) / e.value('PocketPrice', true)) : 0;\r\n }\r\n \r\n return e.value('PocketPrice', true) !== 0 ? ((e.value('PocketMargin', true) ) / e.value('PocketPrice', true)) : 0;\r\n }\r\n }\r\n ],\r\n store: []\r\n }\r\n } \r\n\r\n const defaultValues = getPivotDataSource();\r\n \r\n defaultValues.store = props.data; \r\n \r\n const dataSource = new PivotGridDataSource(defaultValues) ; \r\n\r\n \r\n\r\n function isHeaderCell(cell) {\r\n return (cell.area === 'column' && cell.type === 'D');\r\n }\r\n \r\n function isDataCell(cell) {\r\n return (cell.area === 'data' && cell.rowType === 'D' && cell.columnType === 'D');\r\n }\r\n \r\n function isRowCell(cell){\r\n return (cell.area === 'row' && cell.type === 'D');\r\n }\r\n\r\n \r\n\r\n function onCellPrepared(e) { \r\n e.cell.area = e.area;\r\n \r\n\r\n // console.log('selectDx: ', selectDx );\r\n \r\n if(isDataCell(e.cell) || isTotalCell(e.cell) || isHeaderCell(e.cell) || isRowCell(e.cell)) { \r\n e.cellElement.classList.add(getConditionalAppearance(e.cell)); \r\n }\r\n }\r\n\r\n \r\n function isTotalCell(cell) {\r\n return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');\r\n }\r\n \r\n function getConditionalAppearance(cell) {\r\n if(isTotalCell(cell)) { \r\n return 'dx-total-row'\r\n } \r\n \r\n if(isHeaderCell(cell)) {\r\n // cuando es el encabezado principal \r\n if (cell.isLast === true){\r\n return 'dx-column-header'\r\n }\r\n \r\n return `dx-header-level-${ cell.path.length.toString() }`;\r\n } \r\n \r\n if(isRowCell(cell)) {\r\n return `dx-row-level-${ cell.path.length.toString() }`;\r\n } \r\n \r\n return 'dx-cell';\r\n } \r\n \r\n \r\n\r\n return ( \r\n\r\n <> \r\n \r\n
\r\n {t('common:Filters')}
\r\n\r\n \r\n onAnioChange(e.value)} \r\n optionValue=\"ClaAnio\"\r\n optionLabel=\"NomAnio\" \r\n placeholder={t('common:SelectYear')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n setEsUltimos12Meses(e.value)} onIcon=\"pi pi-check\" offIcon=\"pi pi-times\" />\r\n
\r\n \r\n \r\n setSelectedDivision(e.value)} \r\n optionValue=\"ClaGerenciaRegional\"\r\n optionLabel=\"NomGerenciaRegional\" \r\n placeholder={t('formulario:FilterByDivision')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n setSelectOnlyReliable(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\" \r\n errors={errors}\r\n /> \r\n
\r\n \r\n onApplyFilters()} label={t('common:ApplyFilter')} className=\"p-button-success\" style={{ marginRight: '.25em' }} /> \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n setEsMostrarFilterToolbar(true)} />\r\n
\r\n {point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n\r\n return (\r\n
${ t('formulario:TrendLast12Months')}`,\r\n }, \r\n xAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 0,\r\n categories: xCategories,\r\n title: {\r\n text: null,\r\n },\r\n },\r\n yAxis: { \r\n gridLineWidth:1,\r\n title: {\r\n text: null,\r\n }, \r\n labels: {\r\n overflow: 'justify',\r\n enabled:true\r\n },\r\n },\r\n tooltip: { \r\n valuePrefix: ' $',\r\n valueDecimals: 2\r\n },\r\n plotOptions: {\r\n bar: {\r\n dataLabels: {\r\n enabled: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n layout: 'horizontal',\r\n align: 'left',\r\n verticalAlign: 'bottom', \r\n borderWidth: 1,\r\n backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',\r\n shadow: true,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n series: [\r\n {\r\n name: 'Real',\r\n data: realCostData, \r\n showInLegend: true, \r\n color: '#ff7a3d',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n },\r\n {\r\n name: 'Standard',\r\n data: standardCostData, \r\n showInLegend: true, \r\n color: '#26caf6',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n }\r\n ], \r\n };\r\n\r\n useEffect(() => {\r\n \r\n const GetInconsistenciasGridService = `${config.UrlApiProject}Rentabilidad/GetInconsistenciasLinesChart`;\r\n \r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes,\r\n claGrupoEstadistico3: props.filters.ClaGrupoEstadistico3,\r\n claGerenciaRegional: props.filters.ClaGerenciaRegional,\r\n claclientecuenta: props.filters.ClaClienteCuenta,\r\n claBucket: props.ClaBucket,\r\n esMostrarSoloConfiables: props.filters.EsMostrarSoloConfiables,\r\n claMarketSegment: props.filters.ClaMarketSegment\r\n }; \r\n\r\n callApi(GetInconsistenciasGridService, 'POST', paramsToService, (response) => {\r\n \r\n setStandardCostData(response.data.Standard.data);\r\n setRealCostData(response.data.Real.data);\r\n setXCategories(response.data.Categories); \r\n });\r\n\r\n const GetFollowUpTitle = `${config.UrlApiProject}Rentabilidad/GetBucketFollowUpTitle`; \r\n \r\n callApi(GetFollowUpTitle, 'POST', paramsToService, (response) => { \r\n console.log('StandarVsRealChar response');\r\n console.log(response);\r\n if (response.data.NomClienteCuenta !== ''){ \r\n setChartTitle(`${response.data.NomClienteCuenta } / ${ response.data.NomBucket }`); \r\n }else{ \r\n setChartTitle(response.data.NomBucket); \r\n } \r\n });\r\n \r\n }, [props.ClaBucket]);\r\n\r\n return
\r\n
\r\n \r\n \r\n )\r\n \r\n const PMPriceColumn = (row) => { \r\n return (<>${ row.PMPrice === null ? '' : row.PMPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PMPorcColumn = (row) => { \r\n return (<>{ row.PMPorc === null ? '' : row.PMPorc.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%);\r\n }\r\n \r\n const TonsColumn = (row) => { \r\n return (<>{row.Tons === null ? '' : row.Tons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const ConvCostColumn = (row) => { \r\n return (<>${row.ConvCostReal === null ? '' : row.ConvCostReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightInboundColumn = (row) => { \r\n return (<>${row.FreightInboundReal === null ? '' : row.FreightInboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightOutboundColumn = (row) => { \r\n return (<>${row.FreightOutboundReal === null ? '' : row.FreightOutboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PriceColumn = (row) => { \r\n return (<>${row.PriceReal === null ? '' : row.PriceReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const RawMaterialColumn = (row) => { \r\n return (<>${row.RawMaterialReal === null ? '' : row.RawMaterialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const SHColumn= (row) => { \r\n return (<>${ row.SHReal === null ? '' : row.SHReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const SGFinancialColumn= (row) => { \r\n return (<>${ row.SGFinancialReal === null ? '' : row.SGFinancialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const ActionsColumn = (row) => { \r\n return (\r\n <> \r\n \r\n {t('formulario:FullListOfProductsBoughtBy')} \r\n {props.filters.NomClienteCuenta} in {props.filters.NomFecha} \r\n
\r\n \r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n )\r\n\r\n\r\n\r\n \r\n const PMPriceColumn = (row) => { \r\n return (<>${ row.PMPrice === null ? '' : row.PMPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PMPorcColumn = (row) => { \r\n return (<>{ row.PMPorc === null ? '' : row.PMPorc.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%);\r\n }\r\n \r\n const TonsColumn = (row) => { \r\n return (<>{row.Tons === null ? '' : row.Tons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const ConvCostColumn = (row) => { \r\n return (<>${row.ConvCostReal === null ? '' : row.ConvCostReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightInboundColumn = (row) => { \r\n return (<>${row.FreightInboundReal === null ? '' : row.FreightInboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightOutboundColumn = (row) => { \r\n return (<>${row.FreightOutboundReal === null ? '' : row.FreightOutboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PriceColumn = (row) => { \r\n return (<>${row.PriceReal === null ? '' : row.PriceReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const RawMaterialColumn = (row) => { \r\n return (<>${row.RawMaterialReal === null ? '' : row.RawMaterialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const SHColumn= (row) => { \r\n return (<>${ row.SHReal === null ? '' : row.SHReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const SGFinancialColumn= (row) => { \r\n return (<>${ row.SGFinancialReal === null ? '' : row.SGFinancialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const PMColumn = (row) => { \r\n return (<>${ row.ImpMargenBolsillo === null ? '' : row.ImpMargenBolsillo.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const AcumuladoImpMargenColumn = (row) => { \r\n return (<> \r\n {t('formulario:InvoiceDetail')}\r\n
\r\n \r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n\r\n \r\n const PMPriceColumn = (row) => { \r\n return (<>${ row.PMPrice === null ? '' : row.PMPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PMPorcColumn = (row) => { \r\n return (<>{ row.PMPorc === null ? '' : row.PMPorc.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%);\r\n }\r\n \r\n const TonsColumn = (row) => { \r\n return (<>{row.Tons === null ? '' : row.Tons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const ConvCostColumn = (row) => { \r\n return (<>${row.ConvCostReal === null ? '' : row.ConvCostReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightInboundColumn = (row) => { \r\n return (<>${row.FreightInboundReal === null ? '' : row.FreightInboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightOutboundColumn = (row) => { \r\n return (<>${row.FreightOutboundReal === null ? '' : row.FreightOutboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PriceColumn = (row) => { \r\n return (<>${row.PriceReal === null ? '' : row.PriceReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const RawMaterialColumn = (row) => { \r\n return (<>${row.RawMaterialReal === null ? '' : row.RawMaterialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const SHColumn= (row) => { \r\n return (<>${ row.SHReal === null ? '' : row.SHReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const SGFinancialColumn= (row) => { \r\n return (<>${ row.SGFinancialReal === null ? '' : row.SGFinancialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const PMColumn = (row) => { \r\n return (<>${ row.ImpMargenBolsillo === null ? '' : row.ImpMargenBolsillo.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const AcumuladoImpMargenColumn = (row) => { \r\n return (<> \r\n {t('formulario:FullListOfInvoice')} {props.filters.NomGrupoEstadistico3} \r\n {t('formulario:BoughtBy')} {props.filters.NomClienteCuenta} in {props.filters.NomFecha} \r\n
\r\n \r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n )\r\n\r\n const headerClientes = ( \r\n <>\r\n \r\n {t('formulario:AccountListInformation')} \r\n \r\n
\r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n ) \r\n\r\n const PMPriceColumn = (row) => { \r\n return (<>${ row.PMPrice === null ? '' : row.PMPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const PMPorcColumn = (row) => { \r\n return (<>{ row.PMPorc === null ? '' : row.PMPorc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%);\r\n }\r\n\r\n const TonsPorcColumn = (row) => { \r\n return (<>{ row.TonsPorc === null ? '' : row.TonsPorc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%);\r\n }\r\n\r\n const TonsColumn = (row) => { \r\n return (<>{row.Tons === null ? '' : row.Tons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const ConvCostColumn = (row) => { \r\n return (<>${row.ConvCostReal === null ? '' : row.ConvCostReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightInboundColumn = (row) => { \r\n return (<>${row.FreightInboundReal === null ? '' : row.FreightInboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const FreightOutboundColumn = (row) => { \r\n return (<>${row.FreightOutboundReal === null ? '' : row.FreightOutboundReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const PriceColumn = (row) => { \r\n return (<>${row.PriceReal === null ? '' : row.PriceReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const RawMaterialColumn = (row) => { \r\n return (<>${row.RawMaterialReal === null ? '' : row.RawMaterialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const SHColumn= (row) => { \r\n return (<>${ row.SHReal === null ? '' : row.SHReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const SGFinancialColumn= (row) => { \r\n return (<>${ row.SGFinancialReal === null ? '' : row.SGFinancialReal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n } \r\n\r\n const AcumuladoImpMargenColumn = (row) => { \r\n return (<>\r\n {t('formulario:CustomerListInformation')} \r\n \r\n
\r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n \r\n setSelectedCustomer(e.value)} \r\n onRowSelect={onRowSelect} \r\n onRowUnselect={onRowUnselect}\r\n footerColumnGroup={footer}\r\n removableSort\r\n > \r\n \r\n \r\n)\r\n :\r\n (\r\n <>\r\n setSelectedCustomer(e.value)} \r\n onRowSelect={onRowSelect} \r\n onRowUnselect={onRowUnselect}\r\n footerColumnGroup={footer}\r\n removableSort\r\n > \r\n \r\n \r\n)}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n if (!props.showHide) {\r\n return <>;\r\n }\r\n};\r\n\r\nexport default Ballenas;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport { AutoComplete } from 'primereact/autocomplete'; \r\n\r\nconst FieldAutoComplete = (props) => {\r\n \r\n const onChange = (value) => { \r\n if (props.onChange !== null){\r\n if (value.value === ''){\r\n value.value = null;\r\n }\r\n \r\n props.onChange(value);\r\n } \r\n } \r\n\r\n const isFormFieldInValid = (name) => !!(typeof(props.errors) !== 'undefined' && props.errors !== null && props.errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {props.errors[name].message};\r\n };\r\n\r\n const onFocus = (event) => {\r\n event.target.select();\r\n if (props.onFocus !== null && typeof(props.onFocus) === 'function'){\r\n props.onFocus(event);\r\n } \r\n }\r\n\r\n return ( \r\n <> \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('formulario:SelectedLabelFilter')}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n /> \r\n
\r\n \r\n onMonthChange(e.value)}\r\n label={t('common:Month')}\r\n /> \r\n
\r\n \r\n onDivisionChange(e.value)} \r\n optionValue=\"ClaGerenciaRegional\"\r\n optionLabel=\"NomGerenciaRegional\"\r\n label={t('common:Division')}\r\n /> \r\n
\r\n \r\n onSegmentoChange(e.value)} \r\n optionValue=\"ClaMarketSegment\"\r\n optionLabel=\"NomMarketSegment\"\r\n label={t('common:Segment')}\r\n /> \r\n
\r\n \r\n onGrupoEstadistico3Change(e.value)} \r\n optionValue=\"ClaGrupoEstadistico3\"\r\n optionLabel=\"NomGrupoEstadistico3\"\r\n label={t('formulario:StatisticalGpo3')}\r\n /> \r\n
\r\n \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n /> \r\n
\r\n \r\n onMonthChange(e.value)}\r\n label={t('common:Month')}\r\n /> \r\n
\r\n \r\n onDivisionChange(e.value)} \r\n optionValue=\"ClaGerenciaRegional\"\r\n optionLabel=\"NomGerenciaRegional\"\r\n label={t('common:Division')}\r\n /> \r\n
\r\n Filter Button
\r\n Use this button to open Filters Section and customize your filters. \r\n\r\n Do not forget to hit Apply Filter button before to close filters section.\r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.PM-Step-2',\r\n content: (\r\n <>\r\n
Summary
\r\n This section will display a pivot table. You will be able to group the information in differents ways if you need it.\r\n\r\n
\r\n Available Columns:\r\n Tons Sold \r\n Tons Reliab \r\n % Reliab \r\n PM $/t \r\n PM % \r\n
\r\n\r\n
\r\n
\r\n \r\n )\r\n } ,\r\n {\r\n target: '.PM-Step-3',\r\n content: (\r\n <>\r\n \r\n
| \r\n | Use this button to open a play with the avaiable fields. | \r\n
BUCKET DETAIL
\r\n Show a table with a panoramic view of the last 12 months. \r\n\r\n Use filter icon located in header of the column to delimitate the data showed in the table. \r\n \r\n ),\r\n } ,\r\n {\r\n target: '.PM-Step-4',\r\n content: (\r\n <>\r\n
INCONSISTENCIES
\r\n Use this option when you need to compare buckets on one division for and specific year-month.\r\n\r\n
\r\n Data will be filtered automaticaly once you select all filters.\r\n \r\n ), \r\n } ,\r\n {\r\n target: '.PM-Step-5',\r\n content: (\r\n <>\r\n
DETAILED ANALYSIS AND FOLLOW UP
\r\n\r\n \r\n If you want to analize in a detail way, this option can help you to: \r\n \r\n COMPARE each BUCKET \r\n View the TREND of the BUCKET \r\n Identify your POTENTIAL CUSTOMERS [WHALES] \r\n FOLLOW UP your OPPORTUNITIES \r\n
\r\n \r\n
\r\n Data will be filtered automaticaly once you select all filters inside of this option.\r\n \r\n ), \r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourPocketMargin;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport \"./ToogleSwitch.scss\";\r\n\r\n/*\r\nToggle Switch Component\r\nNote: id, checked and onChange are required for ToggleSwitch component to function. The props name, small, disabled\r\nand optionLabels are optional.\r\nUsage:
\r\n onChange(e.target.checked)}\r\n disabled={disabled}\r\n />\r\n {id ? (\r\n handleKeyPress(e)}\r\n htmlFor={`${id}${uniqueID}`}\r\n >\r\n
\r\n );\r\n};\r\n\r\n// Set optionLabels for rendering.\r\nFieldToogleSwitch.defaultProps = {\r\n optionLabels: [\"YES\", \"NO\"]\r\n};\r\n\r\nFieldToogleSwitch.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n checked: PropTypes.bool.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n name: PropTypes.string,\r\n optionLabels: PropTypes.array,\r\n small: PropTypes.bool,\r\n disabled: PropTypes.bool\r\n};\r\n\r\nexport default FieldToogleSwitch;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useState, useRef, useEffect } from 'react';\r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi } from '../../utils/utils';\r\nimport PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';\r\nimport '../../assets/css/PivotGridBase.css';\r\nimport { Dropdown } from 'primereact/dropdown';\r\nimport Chart, { AdaptiveLayout, CommonSeriesSettings, Size, Tooltip } from 'devextreme-react/chart';\r\nimport PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';\r\nimport { Sidebar } from 'primereact/sidebar';\r\nimport FieldButton from '../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { InputText } from 'primereact/inputtext';\r\nimport { MultiSelect } from 'primereact/multiselect';\r\nimport { ToggleButton } from 'primereact/togglebutton';\r\nimport {\r\n FormGroup,\r\n Label,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n Row,\r\n Col,\r\n CardTitle,\r\n CardFooter,\r\n InputGroup,\r\n InputGroupText,\r\n TabContent, \r\n TabPane, \r\n Nav, \r\n NavItem, \r\n NavLink\r\n} from 'reactstrap';\r\nimport PocketMarginFilters from './PocketMarginFilters.js';\r\nimport PocketMarginSummary from './PocketMarginSummary.js';\r\nimport PocketMarginFilterBarActions from './PocketMarginFilterBarActions.js';\r\nimport PocketMarginFollowupSegment from './PocketMarginFollowupSegment.jsx';\r\nimport PocketInconsistenciesSummary from './PocketInconsistenciesSummary.js';\r\nimport PocketMarginSummaryRDS from './PocketMarginSummaryRDS';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { TabView, TabPanel } from 'primereact/tabview';\r\nimport DataGrid, {\r\n ColumnFixing,\r\n HeaderFilter,\r\n Paging,\r\n StateStoring,\r\n} from 'devextreme-react/data-grid';\r\nimport Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride'; \r\nimport StepsTourPocketMargin from './StepsTourPocketMargin';\r\nimport PageContent from '../../layouts/PageContent'; \r\nimport FieldToogleSwitch from '../../components/Controls/FieldToogleSwitch/FieldToogleSwitch';\r\n\r\n/* ################## Finish import section ################## */\r\n\r\nconst PocketMarginResults = (props) => {\r\n\r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [RdSDetallePM, setRdSDetallePM] = useState([]);\r\n const [RdSDetallePMSoloRDS, setRdSDetallePMSoloRDS] = useState([]);\r\n const [RdSDetallePMBucket, setRdSDetallePMBucket] = useState([]);\r\n const [filtersData, setFiltersData] = useState({}); \r\n const [pageBucketIndex, setpageBucketIndex] = useState({}); \r\n const dataGridSummary = useRef(null);\r\n const [activeIndex, setActiveIndex] = useState(0);\r\n const [valueFromPivot, setValueFromPivot] = useState({});\r\n const [RdSDetalleInconsistenciesPM, setRdSDetalleInconsistenciesPM] = useState([]);\r\n const [headerTitle, setHeaderTitle] = useState();\r\n /* mantener state entre tabs */ \r\n const [Anio, setAnio] = useState(null);\r\n const [Mes, setMes] = useState(null);\r\n const [Division, setDivision] = useState(null);\r\n const [Segmento, setSegmento] = useState(null);\r\n const [GrupoEstadistico3, setGrupoEstadistico3] = useState(null);\r\n const [EsMostrarSoloConfiables, setEsMostrarSoloConfiables] = useState(null);\r\n \r\n const [AnioInc, setAnioInc] = useState(null);\r\n const [AnioMesInc, setAnioMesInc] = useState(null);\r\n const [ClaGerenciaRegionalInc, setClaGerenciaRegionalInc] = useState(null);\r\n const [IsRunTour, setIsRunTour] = useState(false); \r\n\r\n \r\n const [showCompareVsSalesTons, setShowCompareVsSalesTons] = useState(true);\r\n const [showOnlyRds, setShowOnlyRds] = useState(false);\r\n const [yesNoOptions, setYesNoOptions] = useState([`${t('common:On')}`, `${t('common:Off')}`]);\r\n const [esSoloInformacionRDS, setEsSoloInformacionRDS] = useState(false);\r\n /* ########### End useState declarations ########### */\r\n \r\n\r\n const onSearch = (filters) => {\r\n let urlWebService = `${config.UrlApiProject}Rentabilidad/GetDetallePM`;\r\n \r\n let paramsService = {\r\n ...filters,\r\n };\r\n\r\n setFiltersData(filters);\r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setRdSDetallePM(response.data.RdSDetallePM);\r\n });\r\n \r\n paramsService = {\r\n ...filters,\r\n EsSoloInformacionRDS: 1\r\n };\r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setRdSDetallePMSoloRDS(response.data.RdSDetallePM);\r\n });\r\n\r\n\r\n urlWebService = `${config.UrlApiProject}Rentabilidad/GetDetallePMBucket`;\r\n\r\n paramsService = {\r\n ...filters,\r\n };\r\n \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n response.data.columns[0].fixed = true;\r\n response.data.columns[0].fixedPosition = 'left';\r\n response.data.columns[0].headerFilter = {\r\n allowSearch: true,\r\n };\r\n response.data.columns[1].fixed = true;\r\n response.data.columns[1].fixedPosition = 'left';\r\n response.data.columns[1].headerFilter = {\r\n allowSearch: true,\r\n };\r\n response.data.columns[2].fixed = true;\r\n response.data.columns[2].fixedPosition = 'left';\r\n response.data.columns[2].headerFilter = {\r\n allowSearch: true,\r\n };\r\n response.data.columns[3].fixed = true;\r\n response.data.columns[3].fixedPosition = 'left';\r\n response.data.columns[3].headerFilter = {\r\n allowSearch: true,\r\n };\r\n\r\n localStorage.removeItem('gBucketPersists');\r\n \r\n setRdSDetallePMBucket(response.data); \r\n });\r\n \r\n // select the first tab...\r\n setActiveIndex(0);\r\n };\r\n \r\n const getValueFromPivot = (value) => {\r\n setValueFromPivot(value);\r\n setFilterViewActive(false);\r\n }\r\n \r\n const onPocketMarginFollowUpSelectionChange = (filters) => {\r\n setAnio(filters.Anio);\r\n setMes(filters.Mes);\r\n setDivision(filters.ClaGerenciaRegional);\r\n setGrupoEstadistico3(filters.ClaGrupoEstadistico3);\r\n setEsMostrarSoloConfiables(filters.EsMostrarSoloConfiables); \r\n setSegmento(filters.ClaMarketSegment);\r\n } \r\n\r\n const onPocketInconsistenciesChange = (filters) => { \r\n setAnioInc(filters.Anio);\r\n setAnioMesInc(filters.AnioMes); \r\n setClaGerenciaRegionalInc(filters.ClaGerenciaRegional);\r\n setEsMostrarSoloConfiables(filters.EsMostrarSoloConfiables);\r\n } \r\n\r\n const onClickDetailProduct = (row) =>{\r\n setAnio(row.Anio);\r\n setMes(row.AnioMes);\r\n setDivision(row.ClaGerenciaRegional);\r\n setGrupoEstadistico3(row.ClaGrupoEstadistico3); \r\n setSegmento(row.ClaMarketSegment);\r\n setActiveIndex(3);\r\n }\r\n \r\n const onStartTour = () =>{ \r\n setIsRunTour(true);\r\n }\r\n\r\n const handleJoyrideCallback = (data) => {\r\n const { status, type } = data;\r\n const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];\r\n\r\n if (finishedStatuses.includes(status)) {\r\n setIsRunTour(false);\r\n } \r\n }; \r\n\r\n useEffect(() => {\r\n // defaults...\r\n const filtersData = {};\r\n filtersData.Anio = null;\r\n filtersData.Divisiones = null;\r\n filtersData.DivisionesList = null;\r\n filtersData.EsUltimos12Meses = true;\r\n\r\n setFiltersData(filtersData);\r\n\r\n }, []); \r\n \r\n\r\n return (\r\n <>\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setActiveIndex(e.index)}> \r\n \r\n \r\n
\r\n \r\n
\r\n { esSoloInformacionRDS ? ( getValueFromPivot(value)} data={RdSDetallePM}> ) }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n // console.log('spark');\r\n // console.log(options);\r\n\r\n const chartTitle = props.title;\r\n let colorChart = \"#cccccc\";\r\n let chartValue = \"\"; \r\n \r\n let headerClass = \"\";\r\n\r\n switch (props.theme) {\r\n case \"blue\":\r\n headerClass = \"hard-blue\";\r\n colorChart = \"#0d2034\";\r\n break;\r\n case \"lightBlue\":\r\n headerClass = \"light-blue\";\r\n colorChart = \"#00b7c3\";\r\n break;\r\n case \"red\":\r\n headerClass = \"light-red\";\r\n colorChart = \"#ef2f40\";\r\n break;\r\n case \"green\":\r\n headerClass = \"light-green\";\r\n colorChart = \"#20d891\";\r\n break;\r\n case \"gray\":\r\n headerClass = \"hard-gray\";\r\n colorChart = \"#636465\";\r\n break;\r\n case \"skyBlue\":\r\n headerClass = \"sky-blue\";\r\n colorChart = \"#457dcc\";\r\n break;\r\n case \"azulFuerte\":\r\n headerClass = \"azul-fuerte\";\r\n colorChart = \"#2E4480\";\r\n break;\r\n case \"azulMedio\":\r\n headerClass = \"azul-medio\";\r\n colorChart = \"#215ABF\";\r\n break;\r\n default:\r\n headerClass = \"hard-blue\";\r\n colorChart = \"#0d2034\";\r\n break;\r\n } \r\n \r\n let sufijo = \"\";\r\n\r\n let finalValue = props.footerValue == null ? 0 : props.footerValue;\r\n\r\n if (finalValue > 100000){\r\n finalValue /= 1000.0;\r\n sufijo = \"K\";\r\n }\r\n else{\r\n sufijo = \"\";\r\n } \r\n\r\n chartValue = new Intl.NumberFormat('en-US').format(finalValue);\r\n\r\n return ( \r\n <> \r\n
${t('formulario:Cell')}: ${ series.yAxis.categories[y] }
${t('formulario:Day')}: ${ series.xAxis.categories[point.x] }
${t('formulario:Value')}: ${Highcharts.numberFormat(point.value,1) }`;\r\n }\r\n },\r\n /*\r\n colorAxis: {\r\n \r\n min: 0,\r\n max:100, \r\n stops: [\r\n [0, '#d9d9d9'], \r\n [0.01, '#c00000'], \r\n [0.79, '#c00000'], \r\n [0.82, '#fafd00'], \r\n [0.83, '#00b050'] \r\n ]\r\n },\r\n */\r\n legend: {\r\n align: 'right',\r\n layout: 'vertical',\r\n margin: 0,\r\n verticalAlign: 'top',\r\n y: 25,\r\n symbolHeight: 280\r\n }, \r\n \r\n series: [{\r\n name: t('productionDashboard:chartUtilizationTitle') ,\r\n borderWidth: 1,\r\n color: '#e4e4e4',\r\n cursor : 'pointer',\r\n data: utilizationSeries,\r\n showInLegend:false,\r\n dataLabels: {\r\n enabled: true,\r\n color: '#FFFFFF'\r\n },\r\n point: {\r\n events: {\r\n click: function () {\r\n const { x, y, point, series } = this; \r\n setCellValue(series.yAxis.categories[y]);\r\n setOpenModal(true);\r\n const filtersData = {}\r\n filtersData.xAxis = series.xAxis.categories[x];\r\n filtersData.yAxis = series.yAxis.categories[y];\r\n filtersData.Fecha = utilizationXCategoriesFecha[x];\r\n filtersData.claCelda = utilizationYCategoriesClaCelda[y];\r\n onSearchGrafica(filtersData);\r\n }\r\n }\r\n }\r\n }],\r\n }\r\n\r\n \r\n \r\n useEffect(() => {\r\n \r\n console.log('turno', defaultClaTurno);\r\n const filter = {} \r\n filter.ClaZona = defaultZona; \r\n filter.FechaInicial = defaultFechaInicial\r\n filter.FechaFinal = defaultFechaFinal\r\n filter.ClaCelda = defaultClaCelda\r\n filter.ClaTurno = defaultClaTurno\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n const paramsService = {\r\n ...filter,\r\n }; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(response.data.FechaInicial);\r\n setFechaFinal(response.data.FechaFinal); \r\n setNomZona(response.data.NomZona); \r\n setTotalDias(response.data.TotalDias); \r\n setClaTurno(response.data.ClaTurno); \r\n setNomTurno(response.data.NomTurno); \r\n const filter = {}\r\n filter.ClaZona = response.data.ClaZona;\r\n filter.FechaInicial = response.data.FechaInicial;\r\n filter.FechaFinal = response.data.FechaFinal;\r\n filter.ClaCelda = response.data.ClaCelda;\r\n filter.ClaTurno = response.data.ClaTurno;\r\n onSearch(filter);\r\n \r\n }, () => {}, false, false\r\n ); \r\n \r\n }, [props.filters]);\r\n\r\n \r\n const closeModal = () => {\r\n setOpenModal(false);\r\n }\r\n \r\n const onOpenModal = () => {\r\n setOpenModal(true)\r\n }\r\n\r\n const paretoReasonChartRank1 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank1\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank1Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank1Series\r\n }]\r\n \r\n }\r\n\r\n const paretoReasonChartRank2 = {\r\n\r\n chart: {\r\n renderTo: 'container',\r\n type: 'column'\r\n },\r\n title: {\r\n text: titleRank2\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n xAxis: {\r\n categories: downtimeByReasonRank2Categories,\r\n crosshair: true\r\n },\r\n yAxis: [{\r\n title: {\r\n text: ''\r\n }\r\n }, {\r\n title: {\r\n text: ''\r\n },\r\n minPadding: 0,\r\n maxPadding: 0,\r\n max: 100,\r\n min: 0,\r\n opposite: true,\r\n labels: {\r\n format: \"{value}%\"\r\n }\r\n }],\r\n series: [{\r\n type: 'pareto',\r\n name: 'Pareto',\r\n showInLegend: false, \r\n yAxis: 1,\r\n zIndex: 10,\r\n baseSeries: 1, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,1) }%`;\r\n }\r\n },\r\n tooltip: {\r\n valueDecimals: 2,\r\n valueSuffix: '%'\r\n }\r\n }, {\r\n name: 'Hours',\r\n type: 'column',\r\n showInLegend: false, \r\n zIndex: 2,\r\n data: downtimeByReasonRank2Series\r\n }]\r\n \r\n }\r\n\r\n const headerDialog = ( \r\n <>\r\n
\r\n
\r\n \r\n )\r\n\r\n const dialogStyle = ( \r\n { width: '900px', \r\n borderLeft:\"solid 2px #2791FF\", \r\n borderTop:\"solid 2px #2791FF\", \r\n textAlign:\"center\" \r\n }\r\n )\r\n\r\n return ( \r\n <> \r\n {`${t('formulario:DowntimesCausesDetailCell')}`} { cellValue}
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {t('productionDashboard:Last') } {totalDias} {t('productionDashboard:Daysfrom') } { moment(fechaInicial).format('MMMM Do YYYY') } {t('common:to') } {moment(fechaFinal).format('MMMM Do YYYY') } \r\n
\r\n \r\n \r\n {nomZona} - Shift - {NomTurno}\r\n
\r\n \r\n \r\n 0% \r\n 79% \r\n 80-82% \r\n 83% + \r\n
\r\n { defaultClaCelda === null ? \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {t('productionDashboard:Last')} {totalDias} {t('productionDashboard:Daysfrom') } { moment(fechaInicial).format('MMMM Do YYYY') } {t('common:to') } {moment(fechaFinal).format('MMMM Do YYYY') } \r\n
\r\n \r\n \r\n {nomZona}\r\n
\r\n \r\n ${ Highcharts.numberFormat(y,1,'.',',') } ${t('common:pounds')} - ${Highcharts.numberFormat(percentage,1,'.',',') } %`;\r\n }\r\n },\r\n plotOptions: {\r\n pie: {\r\n allowPointSelect: true,\r\n cursor: 'pointer', \r\n size: '100%',\r\n dataLabels: {\r\n enabled: false \r\n },\r\n showInLegend: true\r\n }\r\n },\r\n \r\n xAxis: { \r\n categories: scrapControllableCategories\r\n },\r\n series: [{\r\n name: 'Scrap',\r\n colorByPoint: true,\r\n data: scrapControllable\r\n }],\r\n credits: {\r\n enabled: false\r\n }\r\n }\r\n\r\n const scrapHeatMap = {\r\n\r\n chart: {\r\n type: 'heatmap',\r\n marginTop: 40,\r\n marginBottom: 80,\r\n plotBorderWidth: 1\r\n }, \r\n \r\n title: {\r\n text: t('productionDashboard:chartScrapByCellTitle')\r\n },\r\n \r\n xAxis: { \r\n categories: scrapXCategories\r\n },\r\n \r\n yAxis: { \r\n title:\"\",\r\n categories: scrapYCategories,\r\n reversed: true\r\n },\r\n\r\n tooltip: {\r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${t('productionDashboard:chartScrapByCellTitle') }
${t('formulario:Cell')}: ${ series.yAxis.categories[y] }
${t('formulario:Day')}: ${ series.xAxis.categories[point.x] }
${t('formulario:Value')}: ${Highcharts.numberFormat(point.value,1) }`;\r\n }\r\n },\r\n \r\n \r\n legend: {\r\n align: 'right',\r\n layout: 'vertical',\r\n margin: 0,\r\n verticalAlign: 'top',\r\n y: 25,\r\n symbolHeight: 280\r\n }, \r\n \r\n series: [{\r\n name: t('productionDashboard:chartScrapByCellTitle'),\r\n borderWidth: 1,\r\n color: '#e4e4e4',\r\n data: scrapSeries,\r\n showInLegend:false,\r\n dataLabels: {\r\n enabled: true,\r\n color: '#FFFFFF'\r\n }\r\n }], \r\n \r\n }\r\n \r\n\r\n useEffect(() => {\r\n const filter = {}\r\n filter.ClaZona = defaultZona\r\n filter.FechaInicial = defaultFechaInicial\r\n filter.FechaFinal = defaultFechaFinal\r\n\r\n const urlWebService = `${config.UrlApiProject}Produccion/GetOperacionDashboardHeaderInfo`;\r\n const paramsService = {\r\n ...filter,\r\n }; \r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => \r\n { \r\n setFechaInicial(response.data.FechaInicial);\r\n setFechaFinal(response.data.FechaFinal); \r\n setNomZona(response.data.NomZona); \r\n setTotalDias(response.data.TotalDias); \r\n const filter = {}\r\n filter.ClaZona = response.data.ClaZona;\r\n filter.FechaInicial = response.data.FechaInicial;\r\n filter.FechaFinal = response.data.FechaFinal;\r\n onSearch(filter);\r\n \r\n }, () => {\r\n // no hacemos nada solo para evitar de mandar el mensaje si algun momento se pierde la conexion...\r\n }\r\n ); \r\n \r\n }, [props.filters]);\r\n\r\n return ( \r\n <> \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {t('productionDashboard:Last')} {totalDias} {t('productionDashboard:Daysfrom') } { moment(fechaInicial).format('MMMM Do YYYY') } {t('common:to') } {moment(fechaFinal).format('MMMM Do YYYY') } \r\n
\r\n \r\n \r\n {nomZona}\r\n
\r\n \r\n \r\n 0% \r\n 0.1-1.9% \r\n 2-5% \r\n 5.1-8% \r\n 8.1% + \r\n
\r\n Filters Section
\r\n Use this section to filter your data. Remember, you will need to fill in all required fields. \r\n\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.AC-Step-2',\r\n content: (\r\n <>\r\n
Tab Section
\r\n Click the tab to change between tabs. \r\n \r\n )\r\n /* ,\r\n disableBeacon: true,\r\n disableOverlayClose: true,\r\n hideCloseButton: true,\r\n hideFooter: true,\r\n placement: 'bottom',\r\n spotlightClicks: true,\r\n */\r\n } ,\r\n {\r\n target: '.AC-Step-3',\r\n content: (\r\n <>\r\nCustomize Drilldown
\r\n The system sets a drill down by default, but you can customize it here.\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n }\r\n } ,\r\n {\r\n target: '.AC-Step-4',\r\n content: (\r\n <>\r\nCost Analysist Results
\r\n \r\n The months displayed will depend on the month you selected in the filters. For example, if you selected March it will display results from January to March of the selected year. \r\n
\r\n
\r\n You can expand / collapse the row by clicking the arrow at the beginning of the row.\r\n
\r\n
\r\n
\r\n Remember, the drill down depends on what you selected in the customizations. \r\n \r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n } \r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourCostAnalysisSummary;","\r\nimport React from 'react';\r\n\r\nconst StepsTourCostAnalysisDetail = {\r\n steps: [\r\n {\r\n target: '.AC-Step-1',\r\n content: (\r\n <>\r\n \r\n
\r\n You can expand / collapse the row by clicking the arrow at the beginning of the row.\r\n
\r\n
\r\n
Filters Section
\r\n Use this section to filter your data. Remember, you will need to fill in all required fields. \r\n\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n },\r\n {\r\n target: '.AC-Step-2',\r\n content: (\r\n <>\r\n
Tab Section
\r\n Click the tab to change between tabs. \r\n \r\n )\r\n /* ,\r\n disableBeacon: true,\r\n disableOverlayClose: true,\r\n hideCloseButton: true,\r\n hideFooter: true,\r\n placement: 'bottom',\r\n spotlightClicks: true,\r\n */\r\n } ,\r\n {\r\n target: '.AC-Step-3-2',\r\n content: (\r\n <>\r\nDEACERO / MSW
\r\n Use this option to switch between Deacero and MSW groups\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n }\r\n } ,\r\n {\r\n target: '.AC-Step-4-2',\r\n content: (\r\n <>\r\nOptions
\r\n \r\n Here you can switch between different views to analyze the information.\r\n
\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n } \r\n } ,\r\n {\r\n target: '.AC-Step-4-3',\r\n content: (\r\n <>\r\n ELEMENTS
\r\n \r\n Click here if you want to see the Actual cost by element.\r\n
\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n } \r\n } ,\r\n {\r\n target: '.AC-Step-4-4',\r\n content: (\r\n <>\r\n ACTUAL VS STANDARD
\r\n \r\n Click here if you want to compare Actual vs Standard Cost by element.\r\n
\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n } \r\n } ,\r\n {\r\n target: '.AC-Step-4-5',\r\n content: (\r\n <>\r\n CELLS
\r\n \r\n Click here if you want to see the information by Cell. \r\n
\r\n
\r\n Select a row to analyze a specific cell.\r\n
\r\n \r\n
\r\n Select a row to analyze a specific cell.\r\n
\r\n
\r\n To drill down deeper click the red square icon at the beginning of row to see which products were produced by that cell.\r\n
\r\n \r\n ),\r\n styles: {\r\n options: {\r\n zIndex: 10000,\r\n },\r\n } \r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourCostAnalysisDetail;","\r\nimport React from 'react';\r\n\r\nconst StepsTourCostAnalysisDefault = {\r\n steps: [\r\n {\r\n target: '.AC-Step-1',\r\n content: (\r\n <>\r\n Filters Section
\r\n Use this section to filter your data. Remember, you will need to fill in all required fields. \r\n\r\n
\r\n Do not forget to click the Search Icon when you are ready. \r\n \r\n ),\r\n disableBeacon: true\r\n } \r\n ]\r\n };\r\n\r\n \r\nexport default StepsTourCostAnalysisDefault;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React , {useEffect, useState} from 'react'; \r\nimport { config } from '../../utils/config';\r\nimport { callApi, callKrakenApi, showSweetAlert } from '../../utils/utils'; \r\nimport '../../assets/css/PivotGridBase.css'; \r\nimport FieldButton from '../../components/Controls/FieldButton/FieldButton.jsx'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldDropdown from '../../components/Controls/FieldDropdown.jsx' \r\nimport FieldAutoComplete from '../../components/Controls/FieldAutoComplete.jsx'\r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../utils/YupValidator';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Panel } from 'primereact/panel';\r\nimport Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride'; \r\nimport StepsTourCostAnalysisSummary from './StepsTourCostAnalysisSummary'\r\nimport StepsTourCostAnalysisDetail from './StepsTourCostAnalysisDetail'\r\nimport StepsTourCostAnalysisDefault from './StepsTourCostAnalysisDefault'\r\nimport { Row, Col, Card, CardHeader, CardBody, } from 'reactstrap'; \r\n\r\nconst AnalisisCostosFilters = (props) => {\r\n \r\n const { t } = useTranslation(['formulario', 'common']);\r\n const [Anio, setAnio] = useState(props.filters.Anio !== undefined ? props.filters.Anio : null);\r\n const [Mes, setMes] = useState();\r\n const [Target, setTarget] = useState(props.filters.Target !== undefined ? props.filters.Target : null);\r\n const [ClaMes, setClaMes] = useState();\r\n const [OpcionesAnios, setOpcionesAnios] = useState([]);\r\n const [OpcionesMeses, setOpcionesMeses] = useState([]); \r\n const [ClaDepartamento, setClaDepartamento] = useState();\r\n const [OpcionesDepartamentos, setOpcionesDepartamentos] = useState([]); \r\n const [OpcionesTipoCelda, setOpcionesTipoCelda] = useState([]); \r\n const [OpcionesCelda, setOpcionesCelda] = useState([]); \r\n const [ClaCelda , setClaCelda ] = useState();\r\n const [ClaTipoCelda , setClaTipoCelda ] = useState(); \r\n const [ClaArticulo , setClaArticulo ] = useState();\r\n const [FilteredArticulo, setFilteredArticulo] = useState([]);\r\n const [errors, setErrors] = useState({}); \r\n const valitationScheme = yup.object().shape({\r\n Anio: yup.string().required(t('common:RequiredField')).nullable(),\r\n Mes: yup.string().required(t('common:RequiredField')).nullable(),\r\n TipoConversionCost: yup.mixed().required(t('common:RequiredField')).nullable()\r\n });\r\n \r\n const [OpcionesConversionCost, setOpcionesConversionCost] = useState([{ value: 1, name: t('formulario:ConversionCost')}, { value: 2, name: t('formulario:ManufactureCost') }]);\r\n const [TipoConversionCost, setTipoConversionCost] = useState(1);\r\n \r\n const [IsRunTour, setIsRunTour] = useState(false); \r\n \r\n useEffect(() => { \r\n let urlWebService = `${config.UrlApiProject}Costos/GetAnios`; \r\n let paramsService = null; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios);\r\n paramsService = {Anio:null};\r\n if (response.data.Anios.length > 0){\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n paramsService.Anio = response.data.Anios[0].ClaAnio;\r\n } \r\n urlWebService = `${config.UrlApiProject}Costos/GetMeses`; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses); \r\n \r\n urlWebService = `${config.UrlApiProject}departamento/getDepartamentos`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesDepartamentos(response.data.Departamentos); \r\n }); \r\n });\r\n })\r\n }, []);\r\n \r\n const onYearChange = (yearId) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Anio; \r\n setErrors(newErrors) \r\n setAnio(yearId);\r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {Anio:yearId};\r\n urlWebService = `${config.UrlApiProject}Costos/GetMeses`; \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n setMes(null);\r\n setOpcionesMeses(response.data.Meses); \r\n });\r\n };\r\n \r\n const onMonthChange = (anioMes,e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.Mes; \r\n setErrors(newErrors) \r\n setMes(anioMes); \r\n let value = 0;\r\n OpcionesMeses.map((a) => { \r\n if(a.AnioMes === anioMes){\r\n value = a.ClaMes;\r\n }\r\n return 0;\r\n });\r\n setClaMes(value); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n }; \r\n\r\n const onChangeDepartament = (departamentId) => { \r\n setClaDepartamento(departamentId); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n if(departamentId===undefined){\r\n setClaTipoCelda(null);\r\n setOpcionesTipoCelda(null); \r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n return;\r\n } \r\n let paramsService = null; \r\n let urlWebService = ``; \r\n paramsService = {};\r\n urlWebService = `${config.UrlApiProject}celda/GetTipoCeldas?ClaDepartamento=${departamentId}`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setClaTipoCelda(null);\r\n setOpcionesTipoCelda(null); \r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n setOpcionesTipoCelda(response.data.TipoCelda); \r\n });\r\n };\r\n \r\n const onChangeTipoCelda = (tipoCeldaId) => {\r\n setClaTipoCelda(tipoCeldaId);\r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n if(tipoCeldaId===undefined){\r\n setOpcionesCelda(null); \r\n setClaCelda(null); \r\n return;\r\n } \r\n let paramsService = null; \r\n let urlWebService = ``;\r\n paramsService = {}; \r\n urlWebService = `${config.UrlApiProject}celda/GetCeldas?ClaDepartamento=${ClaDepartamento}&ClaTipoCelda=${tipoCeldaId}`; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesCelda(response.data.Celdas); \r\n setClaCelda(null); \r\n });\r\n };\r\n \r\n const onChangeCelda = (celdaId) => { \r\n setClaCelda(celdaId); \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n } \r\n };\r\n \r\n const onChangeArticulo = (e) => { \r\n setClaArticulo(e.value)\r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n } \r\n }\r\n \r\n const FilterArticulo = (event) => {\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}articulo/GetArticulos?Valor=${event.query}&Tipo=2`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => { \r\n setFilteredArticulo(response.data.Articulos);\r\n }); \r\n } \r\n \r\n const onApply = async ( ) => { \r\n const value = {\r\n Anio,\r\n Mes,\r\n TipoConversionCost\r\n } \r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n const filtersData = {}\r\n filtersData.Anio = Anio === undefined ? null : Anio;\r\n filtersData.AnioMes = Mes === undefined ? null : Mes; \r\n filtersData.Mes = ClaMes === undefined ? null : ClaMes;\r\n filtersData.ClaDepartamento = ClaDepartamento === undefined ? null : ClaDepartamento;\r\n filtersData.ClaCelda = ClaCelda === undefined ? null : ClaCelda;\r\n filtersData.ClaTipoCelda = ClaTipoCelda === undefined ? null : ClaTipoCelda;\r\n filtersData.ClaArticulo = ClaArticulo === null || ClaArticulo === undefined ? null : ClaArticulo.ClaArticulo;\r\n filtersData.Target = Target === undefined ? null : Target;\r\n filtersData.TipoConversionCost = TipoConversionCost === undefined ? null : TipoConversionCost;\r\n if (props.onSearch != null){ \r\n props.onSearch(filtersData);\r\n }\r\n };\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n\r\n const handleJoyrideCallback = (data) => {\r\n const { status, type } = data;\r\n const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];\r\n \r\n if (finishedStatuses.includes(status)) {\r\n setIsRunTour(false);\r\n } \r\n };\r\n\r\n const onStartTour = () =>{ \r\n setIsRunTour(true);\r\n }\r\n\r\n const onchangeTipoConversionCost = ( value ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.TipoConversionCost; \r\n setErrors(newErrors) \r\n setTipoConversionCost(value); \r\n \r\n if (props.onChangeFilter !== null){\r\n props.onChangeFilter();\r\n }\r\n }; \r\n \r\n\r\n \r\n return (\r\n <> \r\n\r\n { props.TourType === 1 ? (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n onMonthChange(e.value,e)}\r\n label={t('common:Month')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n
\r\n\r\n \r\n onChangeDepartament(e.value)}\r\n label={t('formulario:Department')}\r\n /> \r\n
\r\n \r\n onChangeTipoCelda(e.value)}\r\n label={t('formulario:CellType')}\r\n /> \r\n
\r\n \r\n
\r\n \r\n onChangeCelda(e.value)}\r\n label={t('formulario:Cell')}\r\n /> \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onchangeTipoConversionCost(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n errors={errors}\r\n /> \r\n
\r\n \r\n {point.x}: `,\r\n pointFormat: '{point.y}'\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n }\r\n\r\n return (\r\n
${ t('formulario:TrendLast12Months')}`,\r\n }, \r\n xAxis: { \r\n gridLineWidth:0,\r\n lineWidth: 0,\r\n categories: xCategories,\r\n title: {\r\n text: null,\r\n },\r\n },\r\n yAxis: { \r\n gridLineWidth:1,\r\n title: {\r\n text: null,\r\n }, \r\n labels: {\r\n overflow: 'justify',\r\n enabled:true\r\n },\r\n },\r\n tooltip: { \r\n valuePrefix: ' $',\r\n valueDecimals: 2\r\n },\r\n plotOptions: {\r\n bar: {\r\n dataLabels: {\r\n enabled: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n layout: 'horizontal',\r\n align: 'left',\r\n verticalAlign: 'bottom', \r\n borderWidth: 1,\r\n backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',\r\n shadow: true,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n series: [\r\n {\r\n name: 'Actual',\r\n data: realCostData, \r\n showInLegend: true, \r\n color: '#ff7a3d',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n },\r\n {\r\n name: 'Standard',\r\n data: standardCostData, \r\n showInLegend: true, \r\n color: '#26caf6',\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `$ ${Highcharts.numberFormat(y,1) }`;\r\n }\r\n }\r\n }\r\n ], \r\n };\r\n\r\n useEffect(() => {\r\n \r\n const GetInconsistenciasElementGridService = `${config.UrlApiProject}Costos/GetElementInconsistenciasLinesChart`;\r\n \r\n const paramsToService = {\r\n anio: props.filters.Anio,\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claElemento: props.ClaElemento,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda,\r\n claCelda:props.filters.ClaCelda,\r\n claArticulo:props.filters.ClaArticulo,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n }; \r\n \r\n callApi(GetInconsistenciasElementGridService, 'POST', paramsToService, (response) => {\r\n setStandardCostData(response.data.Standard.data);\r\n setRealCostData(response.data.Real.data);\r\n setXCategories(response.data.Categories); \r\n console.log('paramsToService');\r\n console.log(paramsToService);\r\n const GetCeldaTitleService = `${config.UrlApiProject}Costos/GetCeldaElementTitle`; \r\n callApi(GetCeldaTitleService, 'POST', paramsToService, (response) => { \r\n if(response.data.info!==undefined)\r\n { \r\n setChartTitle(`${response.data.info[0].NomElemento }`); \r\n } \r\n });\r\n });\r\n\r\n }, [props.ClaElemento]);\r\n\r\n return
\r\n
\r\n \r\n )\r\n\r\n const TonsColumn = (row) => { \r\n return (<>{row.MTons === null ? '' : row.MTons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const StandarCostColumn = (row) => { \r\n return (<>${ row.StandarCost === null ? '' : row.StandarCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const RealCostColumn = (row) => { \r\n return (<>${ row.RealCost === null ? '' : row.RealCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const AcumuladoRealCostColumn = (row) => { \r\n return (<> \r\n {t('formulario:FullListOfArticlesBoughtBy')} \r\n {Title} \r\n
\r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n )\r\n\r\n const TonsColumn = (row) => { \r\n return (<>{row.MTons === null ? '' : row.MTons.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const StandarCostColumn = (row) => { \r\n return (<>${ row.StandarCost === null ? '' : row.StandarCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n \r\n const RealCostColumn = (row) => { \r\n return (<>${ row.RealCost === null ? '' : row.RealCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n }\r\n\r\n const AcumuladoRealCostColumn = (row) => { \r\n return (<>{t('formulario:CellListInformation')}
\r\n \r\n 80% 17% 3% (-) \r\n
\r\n \r\n
\r\n \r\n)\r\n\r\n /* ################# START RENDER AREA ################# */\r\n if (props.showHide) {\r\n\r\n\r\n if (modalArticulos){\r\n return (\r\n <> \r\n DETAIL
\r\n\r\n {\r\n IdCelda !== null ?
\r\n
\r\n );\r\n}\r\n\r\nconst closeModal = () => {\r\n setOpenFilterTree(false);\r\n}\r\n\r\nconst onOpenModal = () => {\r\n setOpenFilterTree(true)\r\n}\r\n\r\nconst DataBindTree = ()=>{\r\n if(source.length>0){ \r\n props.filters.source = source;\r\n props.filters.target = target;\r\n targetFilter = target;\r\n }\r\n if(targetFilter.length>0){\r\n const GetDetalleElementService = `${config.UrlApiProject}Costos/GetMatrizCtaContable`;\r\n const paramsToService = {\r\n anioMes: props.filters.AnioMes,\r\n claTipoElementoCosto: props.filters.ClaTipoElementoCosto,\r\n claDepartamento:props.filters.ClaDepartamento,\r\n claTipoCelda:props.filters.ClaTipoCelda,\r\n claCelda:props.filters.ClaCelda,\r\n claArticulo:props.filters.ClaArticulo,\r\n anio: props.filters.Anio,\r\n mes:props.filters.Mes, \r\n cmbPivot1:(targetFilter[0] !== undefined ? targetFilter[0].ClaPivotOrderMatrizCtaContable : null),\r\n cmbPivot2:(targetFilter[1] !== undefined ? targetFilter[1].ClaPivotOrderMatrizCtaContable : null),\r\n cmbPivot3:(targetFilter[2] !== undefined ? targetFilter[2].ClaPivotOrderMatrizCtaContable : null),\r\n cmbPivot4:(targetFilter[3] !== undefined ? targetFilter[3].ClaPivotOrderMatrizCtaContable : null),\r\n paramsLength:target.length,\r\n EsMostrarTodoElAnio: EsMostrarTodoElAnio ? 1 : 0,\r\n TipoConversionCost: props.filters.TipoConversionCost\r\n }; \r\n \r\n \r\n callApi(GetDetalleElementService, 'POST', paramsToService, (response) => {\r\n setMatriz(response.data[0]); \r\n if(response.data[1]!==undefined){\r\n setshowColumnsEne(response.data[1][0].EsEne === 1);\r\n setshowColumnsFeb(response.data[1][0].EsFeb === 1);\r\n setshowColumnsMar(response.data[1][0].EsMar === 1);\r\n setshowColumnsAbr(response.data[1][0].EsAbr === 1);\r\n setshowColumnsMay(response.data[1][0].EsMay === 1);\r\n setshowColumnsJun(response.data[1][0].EsJun === 1);\r\n setshowColumnsJul(response.data[1][0].EsJul === 1);\r\n setshowColumnsAgo(response.data[1][0].EsAgo === 1);\r\n setshowColumnsSep(response.data[1][0].EsSep === 1);\r\n setshowColumnsOct(response.data[1][0].EsOct === 1);\r\n setshowColumnsNov(response.data[1][0].EsNov === 1);\r\n setshowColumnsDic(response.data[1][0].EsDic === 1);\r\n }\r\n closeModal();\r\n });\r\n }\r\n}\r\n\r\nconst modalFooter = () => {\r\n return (\r\n <>\r\n \r\n
\r\n {item.NomPivotOrderMatrizCtaContable}
\r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n \r\n);\r\n};\r\nexport default AnalisisCostosGeneral;\r\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n label,\r\n TabContent, \r\n TabPane, \r\n Nav, \r\n NavItem, \r\n NavLink\r\n} from 'reactstrap'; \r\nimport Button from '@material-ui/core/Button';\r\nimport AppsIcon from '@material-ui/icons/Apps';\r\nimport Help from '@material-ui/icons/Help';\r\nimport { config } from '../../utils/config';\r\nimport { callApi } from '../../utils/utils'; \r\nimport { Tag } from 'primereact/tag';\r\nimport { useTranslation } from 'react-i18next';\r\nimport AnalisisCostosFilters from './AnalisisCostosFilters.js';\r\nimport ElementosCostos from './ElementosCostos/ElementosCostos';\r\nimport InconsistenciasCostos from './InconsistenciasCostos/InconsistenciasCostos';\r\nimport CeldasCostos from './CeldasCostos/CeldasCostos'; \r\nimport FieldSelectButton from '../../components/Controls/FieldSelectButton.jsx' \r\nimport AnalisisCostosGeneral from './AnalisisCostosGeneral/AnalisisCostosGeneral';\r\nimport { TabView, TabPanel } from 'primereact/tabview';\r\nimport classnames from 'classnames';\r\nimport PageContent from '../../layouts/PageContent'; \r\n\r\nconst AnalisisCostos = (props) => { \r\n /* ################## useState area start ################## */\r\nconst { t } = useTranslation(['formulario', 'common']);\r\nconst [headerTitle, setHeaderTitle] = useState();\r\nconst [showGeneral, setshowGeneral] = useState(true);\r\nconst [showElements, setshowElements] = useState(false);\r\nconst [showInconsistencias, setshowInconsistencias] = useState(false);\r\nconst [showCells, setshowCells] = useState(false);\r\nconst [showContent, setshowContent] = useState(false);\r\nconst [filters, setfilters] = useState({}); \r\nconst [OpcionesCtaContable, setOpcionesCtaContable] = useState([{ value: 2, name: \"DEACERO\"}, { value: 1, name: \"MSW\" }]);\r\nconst [CuentaContable, setCuentaContable] = useState(1);\r\nconst [activeIndex, setActiveIndex] = useState(1);\r\nconst [TourType, setTourType] = useState(0);\r\n \r\n /* ################## End useState area start ################## */\r\n\r\n useEffect(() => { \r\n const filtersData = {};\r\n filtersData.Anio = null;\r\n filtersData.Mes = null;\r\n filtersData.AnioMes = null;\r\n filtersData.ClaTipoElementoCosto = null;\r\n filtersData.ClaDepartamento = null;\r\n filtersData.ClaCelda = null;\r\n filtersData.ClaTipoCelda = null;\r\n filtersData.ClaArticulo = null;\r\n filtersData.Target = null;\r\n setfilters(filtersData); \r\n\r\n }, []);\r\n\r\n const onSearch = (dataFilter) => {\r\n dataFilter.ClaTipoElementoCosto = CuentaContable;\r\n setfilters(dataFilter);\r\n setshowContent(true);\r\n \r\n setTourType(activeIndex);\r\n\r\n const GetCeldaTitleService = `${config.UrlApiProject}Costos/GetCeldaElementTitle`; \r\n callApi(GetCeldaTitleService, 'POST', dataFilter, (response) => { \r\n if(response.data.info!==undefined)\r\n { \r\n setHeaderTitle(`${response.data.info[0].NomFecha }`); \r\n } \r\n });\r\n } \r\n \r\n const setSelectCtaContable = ( value ) => { \r\n setCuentaContable(value); \r\n setfilters({ ...filters, ClaTipoElementoCosto : value});\r\n }; \r\n \r\n const onChangeFilter = () => { \r\n setshowContent(false);\r\n\r\n }\r\n \r\n const clickShowElements = () => {\r\n setshowElements(true);\r\n setshowInconsistencias(false); \r\n setshowCells(false); \r\n // setshowGeneral(false); \r\n };\r\n\r\n const clickShowInconsistencies = () => {\r\n setshowElements(false);\r\n setshowInconsistencias(true); \r\n setshowCells(false); \r\n // setshowGeneral(false); \r\n };\r\n\r\n const clickShowCells = () => {\r\n setshowElements(false);\r\n setshowInconsistencias(false); \r\n setshowCells(true); \r\n // setshowGeneral(false); \r\n };\r\n\r\n const clickShowGeneral = () => {\r\n setshowElements(false);\r\n setshowInconsistencias(false); \r\n setshowCells(false); \r\n // setshowGeneral(true); \r\n };\r\n\r\n const clickTab = (index) => {\r\n setActiveIndex(index);\r\n \r\n if(index>0){\r\n clickShowElements();\r\n }else{\r\n clickShowGeneral();\r\n } \r\n \r\n };\r\n\r\n const switchTab = tab => {\r\n if(activeIndex !== tab){\r\n setActiveIndex(tab);\r\n \r\n if(tab===2){\r\n setTourType(2);\r\n clickShowElements();\r\n }else{\r\n setTourType(1);\r\n clickShowGeneral();\r\n } \r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n clickShowElements();\r\n \r\n }}\r\n variant=\"contained\"\r\n color={showElements ? 'primary' : 'default'}\r\n size=\"large\" \r\n startIcon={ {\r\n clickShowInconsistencies();\r\n }}\r\n color={showInconsistencias ? 'primary' : 'default'}\r\n variant=\"contained\"\r\n size=\"large\" \r\n startIcon={ {\r\n clickShowCells();\r\n }}\r\n variant=\"contained\"\r\n color={showCells ? 'primary' : 'default'}\r\n size=\"large\" \r\n startIcon={
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n setSelectCtaContable(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n onZoneChange(e)}\r\n label={t('formulario:Zone')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onTurnoChange(e)}\r\n label={t('formulario:Shift')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeStartDate(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeEndDate(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default GantryWarningBanner;\r\n","/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable prefer-template */\r\nimport React, {useState, useEffect} from 'react';\r\nimport { \r\n Row, \r\n Col,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardText,\r\n CardFooter } from 'reactstrap';\r\n import FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { useTranslation } from 'react-i18next';\r\nimport queryString from 'query-string';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi } from '../../../utils/utils'; \r\nimport './ActiveDowntimes.scss';\r\nimport PageContent from '../../../layouts/PageContent';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable';\r\nimport { Column } from 'primereact/column'\r\nimport ActiveDowntimesComponent from './ActiveDowntimesComponent.jsx';\r\nimport GantryWarningBanner from 'views/Operations/Tablets/Common/GantryWarningBanner/GantryWarningBanner.jsx';\r\n\r\nconst ActiveDowntimes = (props) => {\r\n const { t, i18n } = useTranslation(['productionDashboard', 'common']);\r\n\r\n return (\r\n \r\n setActiveIndex(e.index)}> \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n :<>}\r\n \r\n
\r\n \r\n);\r\n }\r\n\r\n\r\n \r\n const onExportGrid = () => { \r\n dt.current.exportCSV();\r\n }\r\n\r\n const checkMarkTempate = (rowData, columnName) => {\r\n return (<>{rowData[columnName] ? : <>})\r\n }\r\n \r\n\r\n const employeeInfo = (rowData) => {\r\n return (\r\n <> \r\n \r\n {t('hr:EmployeeParticipationDet')} \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n | {t('hr:IdPTool')} | \r\n{rowData.EstatusIDPTool ? : <> } | \r\n
| {t('hr:180Degree')} | \r\n{rowData.Estatus180DegreeSelfReview ? : <> } | \r\n
| {t('hr:EmployeeSelfReview')} | \r\n{rowData.EstatusEmployeeSelfReview ? : <> } | \r\n
| {t('hr:ScorecardReviewed')} | \r\n{rowData.EstatusContribucionReview ? : <> } | \r\n
| {t('hr:ManagerReview')} | \r\n{rowData.EstatusManagerReview ? : <> } | \r\n
| {rowData.NombreCompletoManager} | \r\n
| {t('hr:AnnualReview')} | \r\n{rowData.EstatusAnnualReview ? : <> } | \r\n
{OnParticipationDetail(rowData)}}> \r\n
\r\n \r\n );\r\n }\r\n\r\n const IDPToolTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n { moment(rowData.FechaInicia180Degree).format(\"LL\") } - { moment(rowData.FechaTermina180Degree).format(\"LL\") }\r\n
\r\n {rowData.Anio < 2022 ? (<>) \r\n : \r\n ( \r\n \r\n onClickApproveResponses(rowData)} \r\n className=\"p-button-rounded light-yellow no-border\"\r\n /> \r\n
\r\n )}\r\n \r\n {OnParticipationDetail(rowData)}}> \r\n
\r\n \r\n );\r\n }\r\n\r\n const EmployeeSelfReview = (rowData) => {\r\n return (\r\n <>\r\n \r\n { moment(rowData.FechaIniciaIDPTool).format(\"LL\") } - { moment(rowData.FechaTerminaIDPTool).format(\"LL\") }\r\n
\r\n {OnParticipationDetail(rowData)}}> \r\n
\r\n \r\n );\r\n }\r\n\r\n const ManagerReviewTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n { moment(rowData.FechaIniciaEmployeeSelfReview).format(\"LL\") } - { moment(rowData.FechaTerminaEmployeeSelfReview).format(\"LL\") }\r\n
\r\n {OnParticipationDetail(rowData)}}> \r\n
\r\n \r\n );\r\n }\r\n\r\n\r\n const AnnualReviewTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n { moment(rowData.FechaIniciaManagerReview).format(\"LL\") } - { moment(rowData.FechaTerminaManagerReview).format(\"LL\") }\r\n
\r\n {OnParticipationDetail(rowData)}}> \r\n
\r\n \r\n );\r\n }\r\n\r\n const onEditClick = (rowData) => { \r\n props.onEditClick(rowData);\r\n };\r\n\r\n const onClickApproveResponses = (rowData) => {\r\n props.onClickApproveResponses(rowData);\r\n } \r\n\r\n\r\n const actionBodyTemplate = (rowData) => {\r\n return (\r\n <> \r\n \r\n { moment(rowData.FechaIniciaAnnualReview).format(\"LL\") } - { moment(rowData.FechaTerminaAnnualReview).format(\"LL\") }\r\n
\r\n \r\n onDescPreguntaValueChange(props, e.target.value, rowData)}\r\n errors={errors[`${name}[${props.rowData.RowIndex}]`]}\r\n /> \r\n
\r\n \r\n );\r\n }\r\n\r\n const onDescPreguntaValueChange = (props, value ) => { \r\n const updatedProducts = [...questionario];\r\n updatedProducts[props.rowData.RowIndex][props.field] = value;\r\n onQuestionarioChange(updatedProducts); \r\n}; \r\n\r\nconst onQuestionarioChange = (questionario) => {\r\n // setPerformanceDevQuestionario(questionario); \r\n onChange(questionario)\r\n}\r\n\r\nconst orderByEditor = (props, rowData) => {\r\n return (\r\n \r\n onorderByChange(props, e.target.value, rowData)}\r\n /> \r\n
\r\n \r\n );\r\n}\r\n\r\nconst onorderByChange = (props, value ) => { \r\n const updatedProducts = [...questionario];\r\n updatedProducts[props.rowData.RowIndex][props.field] = value;\r\n onQuestionarioChange(updatedProducts); \r\n}; \r\n \r\nconst addNewRow = () => { \r\n \r\n const newRow = { \r\n RowIndex: questionario.length,\r\n IdPerformanceDevQuestionario: null,\r\n IdPerformanceDev: null,\r\n BajaLogica: 0,\r\n DescripcionPregunta: \"\",\r\n Orden: null\r\n }; \r\n \r\n onQuestionarioChange([...questionario, newRow]);\r\n} \r\n\r\nconst handleRemoveClick = (rowData) => {\r\n const currentList = [...questionario];\r\n currentList[rowData.RowIndex].BajaLogica = 1;\r\n onQuestionarioChange(currentList); \r\n};\r\n\r\n\r\nconst showActiveRows = (rows) => {\r\n\r\n const activeRows = [];\r\n\r\n if (rows.length>0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0) {\r\n item.RowIndex = index;\r\n activeRows.push({...item});\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n \r\n return activeRows; \r\n};\r\n\r\nconst actionBodyTemplate = (rowData) => {\r\n return (\r\n <> \r\n \r\n
\r\n {letter}
\r\n {title}
\r\n \r\n )\r\n} \r\n\r\nSweatAlertCustomIcon.propTypes = { \r\n title: PropTypes.string,\r\n letter: PropTypes.string,\r\n className : PropTypes.string\r\n}\r\n\r\nexport default SweatAlertCustomIcon; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useState, useEffect } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { Row, Col, Card, CardBody } from 'reactstrap';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi} from '../../../utils/utils';\r\nimport FieldNumber from '../../../components/Controls/FieldNumber.jsx'\r\nimport FieldText from '../../../components/Controls/FieldText.jsx' \r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown.jsx';\r\n\r\nconst PerformanceDevCriterio = ({\r\n rowsCriterio,\r\n onChange,\r\n errors,\r\n name\r\n}) => { \r\n \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']); \r\n const [PerformanceCriterioList, setPerformanceCriterioList] = useState([]);\r\n\r\n useEffect(() => {\r\n GetPerformanceCriterioList();\r\n }, []);\r\n \r\n\r\nconst GetPerformanceCriterioList = () => { \r\n const getPerformanceCriterio = `${config.UrlApiProject}HR/GetPerformanceCriterioCmb?Idioma=${''}`; \r\n const paramsToService = {};\r\n callApi(getPerformanceCriterio, 'GET', paramsToService, (response) => {\r\n setPerformanceCriterioList(response.data.PerformanceCriterioList);\r\n });\r\n};\r\n\r\nconst onPerformanceCriterioChange = (rowsCriterio) => { \r\n onChange(rowsCriterio)\r\n}\r\n\r\nconst orderByEditor = (props, rowData) => {\r\n return (\r\n \r\n onorderByChange(props, e.target.value, rowData)}\r\n /> \r\n
\r\n \r\n );\r\n}\r\n\r\nconst onorderByChange = (props, value ) => { \r\n const updatedProducts = [...rowsCriterio];\r\n updatedProducts[props.rowData.RowIndex][props.field] = value;\r\n onPerformanceCriterioChange(updatedProducts); \r\n}; \r\n \r\nconst addNewRow = () => { \r\n const newRow = { \r\n RowIndex: rowsCriterio.length,\r\n ClaPerformanceCriterio: null,\r\n IdPerformanceDev: null,\r\n BajaLogica: 0,\r\n DescripcionPregunta: \"\",\r\n Orden: null\r\n }; \r\n onPerformanceCriterioChange([...rowsCriterio, newRow]);\r\n} \r\n\r\nconst handleRemoveClick = (rowData) => {\r\n const currentList = [...rowsCriterio];\r\n currentList[rowData.RowIndex].BajaLogica = 1;\r\n onPerformanceCriterioChange(currentList); \r\n};\r\n\r\nconst showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length>0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0) {\r\n item.RowIndex = index;\r\n activeRows.push({...item});\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n \r\n return activeRows; \r\n};\r\n\r\nconst actionBodyTemplate = (rowData) => {\r\n return (\r\n <> \r\n \r\n onClaPerformanceCriterioChange(props, e)}\r\n />\r\n
\r\n );\r\n};\r\n \r\nconst onClaPerformanceCriterioChange = (props, e) => {\r\n const _performanceCriterioList = [...rowsCriterio];\r\n const ClaPerformanceCriterio = PerformanceCriterioList.filter((item) => item.ClaPerformanceCriterio === e.value)[0];\r\n if (ClaPerformanceCriterio !== undefined) {\r\n _performanceCriterioList[props.rowData.RowIndex].ClaPerformanceCriterio = ClaPerformanceCriterio.ClaPerformanceCriterio;\r\n _performanceCriterioList[props.rowData.RowIndex].TituloCriterio = ClaPerformanceCriterio.TituloCriterio;\r\n } \r\n onPerformanceCriterioChange(_performanceCriterioList);\r\n}; \r\n\r\n\r\n return (\r\n <> \r\n \r\n
\r\n ) \r\n \r\n \r\nconst onConfirmSendReceivingFeedbackNotification = () => {\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: sendNotificationConfirmationHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n onSendReceivingFeedbackNotificationClick();\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n}\r\n\r\n return (\r\n <> \r\n {t('hr:SendRecivingFeedBackNotification')}.
\r\n \r\n \r\n
\r\n 0}\r\n /> \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n onChangeEncuesta(e.value)}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {children}\r\n
\r\n \r\n )\r\n} \r\n\r\nexport default InstructionsCard; \r\n","/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport \"./Score.scss\";\r\n \r\nimport { Badge } from 'primereact/badge'; \r\nimport FieldButton from '../../Controls/FieldButton/FieldButton.jsx';\r\n \r\n\r\nfunction Score ({ \r\n title\r\n ,score \r\n ,range\r\n ,severity\r\n ,small\r\n }) { \r\n\r\n let severityClass = '';\r\n\r\n switch (severity) {\r\n case \"blue\":\r\n severityClass = \"score-blue-gradient\";\r\n break;\r\n case \"green\":\r\n severityClass = \"score-green-gradient\";\r\n break;\r\n case \"yellow\":\r\n severityClass = \"score-yellow-gradient\";\r\n break;\r\n case \"red\":\r\n severityClass = \"score-red-gradient\";\r\n break; \r\n case \"darkBlue\":\r\n severityClass = \"score-darkBlue-gradient\";\r\n break; \r\n default:\r\n severityClass = \"score-default-gradient\";\r\n break;\r\n }\r\n \r\n if (small){\r\n return ( \r\n \r\n {score}\r\n \r\n );\r\n }\r\n\r\n return ( \r\n <> \r\n \r\n
\r\n \r\n )\r\n} \r\n\r\nScore.propTypes = { \r\n title: PropTypes.string,\r\n score: PropTypes.any,\r\n range: PropTypes.string,\r\n severity: PropTypes.oneOf(['green', 'yellow', 'red', 'darkBlue', 'blue'])\r\n}\r\n\r\nexport default Score; \r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\nimport React, { useState, useRef } from 'react'; \r\nimport { Editor } from 'primereact/editor';\r\nimport { Toast } from 'primereact/toast';\r\n\r\nconst EditorText = (props) => {\r\n \r\n const warningMessageCopyPaste = useRef(null);\r\n const onTextChange = (value, secondValue) => {\r\n console.log('value', value); \r\n console.log('value', secondValue);\r\n if (props.onTextChange !== null && props.onTextChange !== undefined){\r\n props.onTextChange(value);\r\n } \r\n } \r\n\r\n const renderHeader = () => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n const header = renderHeader();\r\n \r\n const onPaste = (e) => {\r\n warningMessageCopyPaste.current.show({severity:'warn', summary: 'Warn Message', detail:'Copy paste is not allowed!!!', life: 3000});\r\n e.preventDefault();\r\n }\r\n\r\n return ( \r\n <> \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n maxLength={7000}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 2) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 3) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 4) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 5) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 7) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }} \r\n maxLength={7000}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 8) {\r\n return (\r\n \r\n {\r\n onchangeControlSingle(e.value);\r\n }}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 9) {\r\n return (\r\n \r\n onchangeControlSingle(e.value)}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 10) {\r\n return (\r\n \r\n onchangeControlSingle(e.value)}\r\n optionValue=\"IdEncuestaPaginaPreguntaRespuesta\"\r\n optionLabel=\"DescripcionRespuesta\"\r\n className=\"buttonListSurvey\"\r\n multiple={false}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 11) {\r\n return (\r\n \r\n onchangeControlSingle(e.value)}\r\n optionValue=\"IdEncuestaPaginaPreguntaRespuesta\"\r\n optionLabel=\"DescripcionRespuesta\"\r\n className=\"buttonListSurvey\"\r\n multiple={true}\r\n />\r\n
\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n /* {Index + 1}.- {props.Descripcion} */ \r\n }\r\n {props.Descripcion}\r\n
\r\n \r\n
{TipodeCampoPregunta(ClaFormularioTipoCampo)}
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n \r\n const renderHeader = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const leftToolbarFooterNewAPTemplate = () => { \r\n return (\r\n <> \r\n {PaginaActual > 1 ? (\r\n <>\r\n \r\n \r\n {PaginaActual} | {CantPaginas}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {t('survey:EncuestaContestada')}\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n\r\n )\r\n\r\n\r\n const RenderEncuestaCerrada = (\r\n <>\r\n \r\n {Titulo}\r\n
\r\n \r\n
\r\n \r\n \r\n {t('survey:EncuestaContestada')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {t('survey:SurveyClosed')}.\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n\r\n )\r\n\r\n const RenderIniciarEncuesta = (\r\n <>\r\n \r\n {Titulo}\r\n
\r\n \r\n
\r\n \r\n \r\n {t('survey:SurveyClosed')}.\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n\r\n const RenderEncuestaTerminada = (\r\n <>\r\n {props.showAsModal ?\r\n (\r\n \r\n {Titulo}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {Titulo}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {Titulo}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n {t('common:From')}: {props.NomUsuarioRespondeEncuesta}\r\n
\r\n \r\n {t('common:To')}: {props.RespuestasPara}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n ApprovedAllResponse(props, e)}\r\n />\r\n
*/}\r\n \r\n \r\n {index === 0 ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n {index > 0 &&\r\n element.IdEncuestaPagina !==\r\n (index + 1 === AprovingFeedBackResponseList.length\r\n ? AprovingFeedBackResponseList[index].IdEncuestaPagina\r\n : AprovingFeedBackResponseList[index - 1].IdEncuestaPagina) ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n\r\n \r\n
\r\n
\r\n );\r\n })}\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n {element.DescripcionPagina}\r\n
\r\n \r\n
\r\n \r\n \r\n {element.CountPage} | {element.TotalPage}\r\n
\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n {element.DescripcionPagina}\r\n
\r\n \r\n
\r\n \r\n \r\n {element.CountPage} | {element.TotalPage}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n ApprovedQuestion(element, e)}\r\n // optionLabels={Options}\r\n small\r\n disabled={EsSoloLectura}\r\n />\r\n\r\n \r\n
\r\n
\r\n \r\n {index + 1}.- \r\n {element.DescripcionPregunta}\r\n
\r\n \r\n {element.RespuestaPregunta} \r\n
\r\n \r\n \r\n ApprovedQuestion(element, e)}\r\n />\r\n
*/}\r\n {t('survey:ApproveResponses')}
{' '}\r\n \r\n \r\n\r\n
\r\n \r\n );\r\n }\r\n \r\n\r\n const modalFooter = () => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n /* Modal */\r\n const loadAprovingFeedBackResponse = (pIdEncuesta, pIdEncuestaContestada) => {\r\n const GetAprovingFeedBackResponse = `${config.UrlApiProject}hr/GetAprovingFeedBackResponse?IdEncuesta=${pIdEncuesta}&IdEncuestaContestada=${pIdEncuestaContestada}`;\r\n const paramsToService = {};\r\n callApi(GetAprovingFeedBackResponse, 'GET', paramsToService, (response) => { \r\n setAprovingFeedBackResponseList(response.data.AprovingFeedbackResponse);\r\n });\r\n };\r\n\r\n const ApprovedAllResponse = (props, e) => {\r\n const updatedField = [...AprovingFeedBackResponseList];\r\n\r\n updatedField.map((p) => (updatedField[p.RowIndex].Visible = e.checked ? 1 : 0));\r\n\r\n setVisible(e.checked ? 1 : 0);\r\n\r\n setAprovingFeedBackResponseList(updatedField);\r\n }; \r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {row.NomUsuario}\r\n
\r\n \r\n \r\n {row.FechaCompletada !== null\r\n ? \r\n (<>{t('survey:DateEndSurvey')}: {moment(row.FechaCompletada).format('MMMM DD, YYYY h:mm:ss a')})\r\n : \r\n (<>{t('survey:SurveyNotCompleted')})}\r\n \r\n
\r\n {\r\n row.EsRevisadoRH === 1 ?\r\n (\r\n \r\n {t('survey:ApprovedByHRDate')}: {moment(row.FechaRevisadoRH).format('MMMM DD, YYYY h:mm:ss a')}\r\n
\r\n )\r\n :\r\n (<>)\r\n }\r\n \r\n \r\n {\r\n row.EsCompletado === 1 ? (\r\n <>\r\n {\r\n row.EsRevisadoRH === 1 ?\r\n (\r\n <>\r\n onClickViewResponses(row)}\r\n />\r\n \r\n)\r\n :\r\n (\r\n <>\r\n onClickViewResponses(row)}\r\n />\r\n \r\n)\r\n }\r\n \r\n \r\n \r\n \r\n ) : (\r\n <>\r\n )\r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const ClosedDetail = () => {\r\n setEsReviewResponse(!EsReviewResponse);\r\n loadAprovingFeedBack(props.ClaAnio);\r\n };\r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const onExportGrid = () => {\r\n dt.current.exportCSV();\r\n };\r\n\r\n const ExportExcelSurvey = () => { \r\n const ExportarSurvey = `${config.UrlApiProject}HR/ExportarPerformanceDevSetUp`; \r\n const paramsService = {\r\n IdEncuesta,\r\n IsCultureSurvey: 1\r\n };\r\n callApi(ExportarSurvey, 'POST', paramsService, (response) => {\r\n const linkSource = `data:application/${response.data.FileExtension};base64,${response.data.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${response.data.FileName}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName }.${ response.data.FileExtension}`;\r\n downloadLink.click();\r\n }); \r\n };\r\n\r\n return (\r\n <>\r\n {t('survey:CultureSurveyApprovalResponsesInstructions')}.
\r\n\r\n
\r\n \r\n \r\n \r\n {t('hr:EmployeeParticipationDet')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n \r\n if (EsApproveResponses){\r\n return (\r\n
\r\n \r\n {imageSrc !== undefined ? ( \r\n \r\n 
\r\n
\r\n \r\n )\r\n : <>}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {title}\r\n
\r\n \r\n {children}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {title}\r\n
\r\n \r\n {children}\r\n
\r\n \r\n
\r\n \r\n {\r\n icon === null || typeof(icon) === 'undefined' ? () : icon\r\n } \r\n
\r\n {title} \r\n \r\n {children}\r\n
\r\n \r\n )\r\n} \r\n\r\nListItem.propTypes = {\r\n color: PropTypes.string,\r\n title: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number,\r\n PropTypes.node\r\n ]), \r\n onClick: PropTypes.func\r\n}\r\n\r\nexport default ListItem; \r\n","export default __webpack_public_path__ + \"static/media/MCSW-team.022103b0.png\";","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Row, Col , \r\n ListGroupItem,\r\n ListGroup,\r\n Progress,} from 'reactstrap'; \r\nimport HomeMenuCard from '../../../components/Cards/HomeMenuCard/HomeMenuCard.jsx';\r\nimport MyPerformanceImg from '../../../assets/img/MCSW-team.png';\r\nimport ListItem from '../../../components/ListGroup/ListItem.jsx' \r\nimport { useHistory, Link } from \"react-router-dom\";\r\nimport { config } from '../../../utils/config';\r\nimport { callApi, getSessionItem } from '../../../utils/utils'; \r\n\r\nconst MyPerformanceMenu = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']);\r\n const [EsTienePermisosTalenPlannig, setEsTienePermisosTalenPlannig] = useState(false);\r\n \r\n useEffect(() => {\r\n getOptionsMyPerformanceRestricted();\r\n }, []);\r\n\r\n const getOptionsMyPerformanceRestricted = () => {\r\n const GetOptionsMyPerformanceRestricted = `${config.UrlApiProject}HR/GetOptionsMyPerformanceRestricted`; \r\n\r\n callApi(GetOptionsMyPerformanceRestricted, 'GET', {}, (response) => {\r\n \r\n setEsTienePermisosTalenPlannig(response.data.EsTienePermisosTalenPlannig); \r\n });\r\n };\r\n\r\n const annualReviewLnk = useRef(null);\r\n const survey180DegreeLnk = useRef(null);\r\n const individualDevelopmentPlanLnk = useRef(null); \r\n const talentPlanningLnk = useRef(null); \r\n \r\n const onAnnualReviewClick = () => {\r\n annualReviewLnk.current.click();\r\n }\r\n const onsurvey180DegreeClick = () => {\r\n survey180DegreeLnk.current.click();\r\n }\r\n const onIndividualDevelopmentPlanClick = () => {\r\n individualDevelopmentPlanLnk.current.click();\r\n }\r\n\r\n const ontalentPlanningClick = () => {\r\n talentPlanningLnk.current.click();\r\n }\r\n \r\n return (\r\n <> \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\n\r\n return (\r\n <> \r\n {\r\n LibraryFileByUserList.length > 0 ? (\r\n <>\r\n \r\n onLibraryLinkClick(item.Category, {ClaLibrary: item.ClaLibrary, Category: item.Category}, listAttributes)}>{item.Category} \r\n \r\n {\r\n item.IsNewFile ?\r\n (\r\n
\r\n \r\n \r\n )\r\n \r\n\r\n return ( \r\n \r\n viewFile(item)}>{item.TitleFile} \r\n \r\n \r\n \r\n)\r\n :\r\n (<>)\r\n } \r\n \r\n {\r\n item.IsNewFile ?\r\n (\r\n
\r\n \r\n \r\n )\r\n \r\n\r\n return ( \r\n \r\n CELL PHONE POLICY FOR QUALIFIED PERSONNEL \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) \r\n */ \r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderHeaderFileLibrary = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooterFileLibrary = () => {\r\n return (\r\n \r\n \r\n setEsShowDialogFileLibrary(false)}\r\n />\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const viewFile = (rowData) => { \r\n const GetFileData = `${config.UrlApiProject}DMS/GetLibraryFileById`; \r\n // const GetFileData = `${config.UrlApiProject}DMS/GetFileFromServer`; \r\n const paramsToService = { \r\n IdLibraryFile:rowData.IdLibraryFile\r\n }; \r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n const AnexoImg = response.data.ImgDownLoad;\r\n console.log(response);\r\n if(AnexoDetalle!==undefined){\r\n \r\n let linkSource = ''\r\n\r\n switch (AnexoDetalle.TypeExtension) {\r\n case 'mp4':\r\n case 'webm':\r\n linkSource = `data:video/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n case 'pdf':\r\n linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setShowVisorPDF(true); \r\n break;\r\n case 'jpg':\r\n case 'gif':\r\n case 'jpeg':\r\n case 'jfif':\r\n case 'pjpeg':\r\n case 'png':\r\n case 'svg':\r\n case 'webp':\r\n case 'bmp':\r\n case 'ico':\r\n case 'cur':\r\n linkSource = `data:image/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n default:\r\n break;\r\n } \r\n \r\n // SI NO FORMAMOS EL LINK QUE LO INTENTE DESCARGAR\r\n if (linkSource === ''){\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n else{ \r\n setFile(linkSource);\r\n setfileExtension(AnexoDetalle.TypeExtension);\r\n }\r\n\r\n }\r\n }); \r\n }\r\n\r\n const calculateUniqueCategories = (array) => {\r\n const uniqueValues = Array.from(new Set(array.map(obj => obj.Category))).map(Category => {\r\n return array.find(obj => obj.Category === Category);\r\n });\r\n\r\n return uniqueValues;\r\n\r\n }\r\n\r\n return (\r\n <> \r\n \r\n \r\n {t('hr:lnkHrLibrary')}\r\n \r\n
\r\n\r\n {\r\n LibraryFileByUserList.map((item, index) => {\r\n return listItemElement(item, index);\r\n }\r\n )\r\n }\r\n Other)}\r\n color=\"#9bdee3\"\r\n icon={()}\r\n >\r\n \r\n
\r\n\r\n \r\n { /* NEW LIBRARY */ }\r\n
\r\n \r\n {t('hr:lnkHrRiskAndInternalControl')}\r\n \r\n
\r\n\r\n {\r\n LibraryRICFileByUserList.filter((item) => item.ShowInHome === true).map((item, index) => {\r\n return listItemElement(item, index);\r\n }\r\n )\r\n }\r\n { /* Pintamos las diferentes categorias que obtenemos */ }\r\n {\r\n calculateUniqueCategories(LibraryRICFileByUserList).map((item, index) => {\r\n return listCategoryElement(item, index, ListAttributeRiskAndIC);\r\n }\r\n )\r\n }\r\n
\r\n \r\n \r\n \r\n {t('hr:lnkHrLibraryAdministration')}\r\n \r\n
\r\n\r\n {\r\n LibraryAdmonFileByUserList.filter((item) => item.ShowInHome === true).map((item, index) => {\r\n return listItemElement(item, index);\r\n }\r\n )\r\n }\r\n { /* Pintamos las diferentes categorias que obtenemos */ }\r\n {\r\n calculateUniqueCategories(LibraryAdmonFileByUserList).map((item, index) => {\r\n return listCategoryElement(item, index, ListAttributeAdmon);\r\n }\r\n )\r\n }\r\n
\r\n \r\n \r\n \r\n viewFile(item)}>{item.TitleFile} \r\n \r\n \r\n )\r\n :\r\n (<>)\r\n }\r\n \r\n {\r\n item.IsNewFile ?\r\n (\r\n
\r\n \r\n \r\n )\r\n \r\n\r\n return ( \r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n \r\n const viewFile = (rowData) => { \r\n const GetFileData = `${config.UrlApiProject}DMS/GetLibraryFileById`; \r\n // const GetFileData = `${config.UrlApiProject}DMS/GetFileFromServer`; \r\n const paramsToService = { \r\n IdLibraryFile:rowData.IdLibraryFile\r\n }; \r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n const AnexoImg = response.data.ImgDownLoad;\r\n console.log('viewFile',response);\r\n if(AnexoDetalle!==undefined){\r\n \r\n let linkSource = ''\r\n\r\n switch (AnexoDetalle.TypeExtension) {\r\n case 'mp4':\r\n case 'webm':\r\n linkSource = `data:video/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n case 'pdf':\r\n linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setShowVisorPDF(true); \r\n break;\r\n case 'jpg':\r\n case 'gif':\r\n case 'jpeg':\r\n case 'jfif':\r\n case 'pjpeg':\r\n case 'png':\r\n case 'svg':\r\n case 'webp':\r\n case 'bmp':\r\n case 'ico':\r\n case 'cur':\r\n linkSource = `data:image/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n default:\r\n break;\r\n } \r\n // SI NO FORMAMOS EL LINK QUE LO INTENTE DESCARGAR\r\n if (linkSource === ''){\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n else{ \r\n setFile(linkSource);\r\n setfileExtension(AnexoDetalle.TypeExtension);\r\n }\r\n\r\n }\r\n }); \r\n }\r\n\r\n return (\r\n <> \r\n How to Apply:
\r\n 1. Apply directly through Indeed by clicking on the blue box with an arrow icon below next to each job profile.
\r\n 2. Send an inquiry email to bmigliori@mcswusa.com
\r\n \r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n {t('hr:CareersMidContinentNotJobs')}
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n } \r\n return (\r\n \r\n {\r\n typeFile(Files[0].FileExtension) === 'image' ?\r\n (
)\r\n :\r\n typeFile(Files[0].FileExtension) === 'video' ?\r\n () \r\n :\r\n typeFile(Files[0].FileExtension) === 'pdf' ?\r\n ()\r\n :\r\n typeFile(Files[0].FileExtension) === 'excel' ?\r\n ()\r\n : \r\n typeFile(Files[0].FileExtension) === 'csv' ?\r\n ()\r\n : \r\n typeFile(Files[0].FileExtension) === 'word' ?\r\n () \r\n : \r\n typeFile(Files[0].FileExtension) === 'zip' ?\r\n ()\r\n : \r\n ()\r\n } \r\n \r\n {Files[0].FileName}\r\n \r\n
\r\n \r\n \r\n \r\n {uploadPromptText}\r\n
\r\n )\r\n } \r\n\r\n const typeFile = (Extension) => {\r\n\r\n let type = null;\r\n\r\n switch (Extension) {\r\n case '.mp4':\r\n case '.webm':\r\n type = 'video'; \r\n break;\r\n case '.pdf': \r\n type = 'pdf'; \r\n break;\r\n \r\n case '.xls': \r\n case '.xlsx': \r\n type = 'excel'; \r\n break;\r\n case '.csv': \r\n type = 'csv'; \r\n break;\r\n case '.doc': \r\n case '.docx': \r\n type = 'word'; \r\n break;\r\n case '.zip': \r\n case '.rar': \r\n type = 'zip'; \r\n break;\r\n case '.jpg':\r\n case '.gif':\r\n case '.jpeg':\r\n case '.jfif':\r\n case '.pjpeg':\r\n case '.png':\r\n case '.svg':\r\n case '.webp':\r\n case '.bmp':\r\n case '.ico':\r\n case '.cur': \r\n type = 'image'; \r\n break;\r\n\r\n default:\r\n break;\r\n } \r\n\r\n\r\n return type;\r\n };\r\n \r\n const headerTemplate = (options) => {\r\n const { className, chooseButton } = options;\r\n const value = totalSize/10000;\r\n const formatedValue = fileUploadRef && fileUploadRef.current ? fileUploadRef.current.formatSize(totalSize) : '0 B';\r\n \r\n\r\n return (\r\n \r\n {\r\n Files.length === 0 ? (\r\n <>\r\n {chooseButton}\r\n \r\n ):(\r\n <>\r\n
\r\n );\r\n }\r\n\r\nconst chooseOptions = {title: 'Subir Archivo', icon: 'pi pi-fw pi-images', iconOnly: true, className: 'custom-choose-btn p-button-rounded p-button-outlined'};\r\nconst uploadOptions = {icon: 'pi pi-fw pi-cloud-upload', iconOnly: true, className: 'custom-upload-btn p-button-success p-button-rounded p-button-outlined'};\r\nconst cancelOptions = {icon: 'pi pi-fw pi-times', iconOnly: true, className: 'custom-cancel-btn p-button-danger p-button-rounded p-button-outlined'};\r\n\r\nconst getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {errors[name].message};\r\n};\r\n \r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const downloadFile = (rowData) => {\r\n const GetReporteAvanceArchivoDocumentosById = `${config.UrlApiProject}ScoreCard/GetReporteAvanceArchivoDocumentosById`;\r\n const paramsToService = {\r\n IdReporteAvanceMensualProyectoArchivo: rowData.IdReporteAvanceMensualProyectoArchivo,\r\n };\r\n callApi(GetReporteAvanceArchivoDocumentosById, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n if(AnexoDetalle!==undefined){\r\n const linkSource = `data:application/${AnexoDetalle.TipoExtension};base64,${AnexoDetalle.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NombreArchivo}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TipoExtension}`;\r\n downloadLink.click();\r\n }\r\n });\r\n };\r\n\r\n const onConfirmRemoveSubmit = (pIdReporteAvanceMensualProyectoArchivo) => {\r\n swal({\r\n buttons: {\r\n cancelar: {\r\n text: 'Cancel',\r\n value: 'cancel',\r\n className: 'rounded-button danger',\r\n },\r\n continuar: {\r\n text: 'Continue',\r\n value: 'continue',\r\n className: 'rounded-button light-green',\r\n },\r\n },\r\n content: confirmationMessageHTML,\r\n }).then((value) => {\r\n switch (value) {\r\n case 'continue':\r\n // run function\r\n onSubmit(pIdReporteAvanceMensualProyectoArchivo);\r\n break;\r\n default:\r\n break;\r\n }\r\n });\r\n };\r\n\r\n const onSubmit = async (pIdReporteAvanceMensualProyectoArchivo) => {\r\n const paramsService = {\r\n IdReporteAvanceMensualProyectoArchivo: pIdReporteAvanceMensualProyectoArchivo,\r\n };\r\n const BajaAnexosReporteAvanceById = `${config.UrlApiProject}ScoreCard/BajaAnexosReporteAvanceById`;\r\n callApi(BajaAnexosReporteAvanceById, 'POST', paramsService, (response) => {\r\n obtenerInformacionAttachtmentsProgressReport(); \r\n });\r\n };\r\n\r\n const NomArchivoTemplate = (rowData) => {\r\n return <>{`${rowData.NomArchivo}.${rowData.Extension}`};\r\n };\r\n\r\n const AnexoInfo = (rowData) => {\r\n return (\r\n <>\r\n {t('actionPlan:SubmitRemoveDocument')}.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/*
\r\n \r\n \r\n
\r\n \r\n )\r\n} \r\n \r\nexport default FieldRadioButton; \r\n","/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\r\nimport React, { useState, useEffect, useRef } from \"react\"; \r\nimport PropTypes from \"prop-types\"; \r\nimport { Tree } from 'primereact/tree';\r\nimport { TreeSelect } from 'primereact/treeselect';\r\nimport { OverlayPanel } from 'primereact/overlaypanel';\r\nimport onClickOutside from \"react-onclickoutside\"; \r\nimport FieldText from \"../FieldText.jsx\";\r\nimport \"./TreeviewButton.css\";\r\n\r\nconst TreeviewButton = ({\r\n nodes,\r\n selectedKey, \r\n optionLabel,\r\n onChange,\r\n icon,\r\n nodeTemplate,\r\n expandedKeys,\r\n showAsTreeSelect, \r\n iconPosition,\r\n showPositionName,\r\n onToggle,\r\n errors,\r\n name\r\n}) => {\r\n \r\n const [isOpen, setIsOpen] = useState(false);\r\n const [selectedText, setSelectedText] = useState(null); \r\n const [selectedNodeKey2, setSelectedNodeKey2] = useState(null);\r\n\r\n TreeviewButton.handleClickOutside = () => setIsOpen(false);\r\n \r\n const onNodeSelect = (node) => {\r\n setSelectedText(node.node[optionLabel]); \r\n setIsOpen(false);\r\n }\r\n\r\n const onToggleChange = (e) => {\r\n if (typeof(onToggle) === 'function'){\r\n onToggle(e);\r\n }\r\n }\r\n\r\n const onNodeUnselect = (node) => { \r\n setSelectedText(null);\r\n setIsOpen(false);\r\n }\r\n\r\n const getSelectedNodes = () => {\r\n const selectedNodes = [];\r\n if (selectedKey && nodes) {\r\n const keys = {[`${selectedKey}`]: true};\r\n findSelectedNodes(null, keys, selectedNodes);\r\n }\r\n\r\n return selectedNodes;\r\n }\r\n\r\n const findSelectedNodes = (node, keys, selectedNodes) => {\r\n if (node) {\r\n if (isSelected(node, keys)) {\r\n selectedNodes.push(node);\r\n delete keys[node.key];\r\n }\r\n\r\n if (Object.keys(keys).length && node.children) {\r\n for (const childNode of node.children) {\r\n findSelectedNodes(childNode, keys, selectedNodes);\r\n }\r\n }\r\n }\r\n else {\r\n for (const childNode of nodes) {\r\n findSelectedNodes(childNode, keys, selectedNodes);\r\n }\r\n }\r\n }\r\n\r\n const isSelected = (node, keys) => {\r\n return keys[node.key];\r\n } \r\n\r\n const nodeTemplateDefault = (node, options) => {\r\n \r\n if (nodeTemplate !== null && typeof(nodeTemplate) === 'function'){\r\n return nodeTemplate(node, options);\r\n }\r\n\r\n return (\r\n \r\n {node.label}\r\n \r\n )\r\n }\r\n\r\n const isFormFieldInValid = (name) => !!(typeof(errors) !== 'undefined' && errors !== null && errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {errors[name].message};\r\n };\r\n \r\n\r\n return (\r\n <> \r\n {\r\n showAsTreeSelect?(\r\n <>\r\n \r\n
\r\n \r\n )\r\n : \r\n (\r\n <>\r\n setIsOpen(!isOpen)}>\r\n \r\n { getSelectedNodes().length > 0 ? getSelectedNodes()[0][optionLabel] : null }\r\n
\r\n \r\n { isOpen ? (\r\n \r\n onChange(e.value)} onSelect={onNodeSelect} onUnselect={onNodeUnselect} onToggle={e => onToggleChange(e)} />\r\n
\r\n ) : <>}\r\n \r\n
\r\n \r\n )\r\n }\r\n \r\n );\r\n};\r\n\r\nconst clickOutsideConfig = {\r\n handleClickOutside: () => TreeviewButton.handleClickOutside\r\n };\r\n \r\nexport default onClickOutside(TreeviewButton, clickOutsideConfig);\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { Avatar } from 'primereact/avatar';\r\nimport React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap';\r\nimport TreeviewButton from '../../../components/Controls/TreeViewButton/TreeviewButton.jsx';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi, getSessionItem } from '../../../utils/utils';\r\nimport \"./OrganizationalPositionView.scss\"; \r\n\r\nconst OrganizationalPositionView = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']);\r\n\r\n const [selectedUser, setSelectedUser] = useState(\r\n props.value !== undefined ? props.value : getSessionItem('ClaUsuarioMod', '')\r\n );\r\n const [expandedKeys, setExpandedKeys] = useState({});\r\n const [nodes, setNodes] = useState([]);\r\n const [imageUrl, setImageUrl] = useState(null);\r\n\r\n const expandAll = (nodes) => {\r\n const _expandedKeys = {};\r\n for (const node of nodes) {\r\n expandNode(node, _expandedKeys);\r\n break;\r\n }\r\n\r\n setExpandedKeys(_expandedKeys);\r\n };\r\n\r\n const expandNode = (node, _expandedKeys) => {\r\n if (node.children && node.children.length) {\r\n _expandedKeys[node.key] = true;\r\n }\r\n };\r\n\r\n const onToggle = (event) => {\r\n setExpandedKeys(event.value);\r\n };\r\n\r\n useEffect(() => {\r\n const Get180DegreeFeedbackUser = `${config.UrlApiProject}ScoreCard/GetOrganizationalDataByUser`;\r\n const paramsToService = {};\r\n\r\n callApi(Get180DegreeFeedbackUser, 'GET', paramsToService, (response) => {\r\n expandAll(response.data);\r\n setNodes(response.data);\r\n });\r\n }, []);\r\n\r\n const nodeTemplate = (node, options) => {\r\n return {node.label};\r\n };\r\n \r\n let selectedNodeElement = null\r\n\r\n const readChildNode = (nodesArray, node) => { \r\n nodesArray.map((element, key) => { \r\n if (element.key === node ) {\r\n selectedNodeElement = element; \r\n return element;\r\n }\r\n\r\n if (element.children.length > 0 ) \r\n { \r\n return readChildNode(element.children, node); \r\n }\r\n \r\n return null;\r\n }); \r\n\r\n\r\n return selectedNodeElement;\r\n }\r\n const onChange = (node) => {\r\n setSelectedUser(node);\r\n \r\n \r\n // busco en mis nodos con el id para obtener el elemento y setear el valor de imgUrl\r\n selectedNodeElement = null\r\n const item = readChildNode(nodes, node);\r\n \r\n setImageUrl(item.ImageUrl); \r\n \r\n if (props.onChange !== undefined && typeof props.onChange === 'function') { \r\n props.onChange(node, item);\r\n } \r\n };\r\n\r\n return (\r\n <> \r\n setIsOpen(!isOpen)}>\r\n
\r\n \r\n \r\n { isOpen ? (\r\n \r\n { getSelectedNodes().length > 0 ? getSelectedNodes()[0][optionLabel] : null }\r\n { showPositionName ? \r\n (<>
{ getSelectedNodes().length > 0 ? getSelectedNodes()[0].positionName : null}) :\r\n (<>)}\r\n
\r\n { getSelectedNodes().length > 0 ? getSelectedNodes()[0].positionName : null}) :\r\n (<>)}\r\n
\r\n \r\n \r\n
\r\n \r\n onChange(e.value)} onSelect={onNodeSelect} onUnselect={onNodeUnselect} onToggle={e => onToggleChange(e)} />\r\n
\r\n ) : <>}\r\n \r\n
\r\n {/* \r\n {\r\n imageUrl === null || imageUrl === undefined ? \r\n (
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const leftToolbarFooterTemplate = () => { \r\n return (\r\n <> \r\n \r\n );\r\n }; \r\n\r\n const rightToolbarFooterTemplate = () => {\r\n \r\n return (\r\n <> \r\n \r\n \r\n );\r\n }; \r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n {t('scoreCard:Formula')}:
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
{t('scoreCard:Command')}:
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
{t('scoreCard:FinalResult')}:
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n {\r\n /*\r\n | {t('scoreCard:Variable')} | \r\n{t('scoreCard:KPIReference')} | \r\n\r\n {t('scoreCard:Value')}\r\n | \r\n\r\n |
|---|---|---|---|
\r\n \r\n {t('scoreCard:NoVariablesFound')}\r\n \r\n | \r\n |||
| {item.ClaveKPIFormulaDetalle} | \r\n \r\n {\r\n item.ClaTipoKPIFormula === 1 ?\r\n ( {t('scoreCard:FromScorecard')} )\r\n :\r\n ({t('scoreCard:FromProject')} )\r\n } \r\n {t('scoreCard:KPI')}: {item.KPIReferenceDescription} \r\n {\r\n item.ClaTipoKPIFormula === 1 ?\r\n (\r\n <>\r\n {t('scoreCard:Position')}: {item.NomPuesto} - {item.NomColaborador} \r\n \r\n {t('scoreCard:Source')}: \r\n {\r\n item.TipoResultadoKPI === 1 &&\r\n (<>{t('scoreCard:CurrentStatus')})\r\n }\r\n {\r\n item.TipoResultadoKPI === 2 &&\r\n (<>{t('scoreCard:MinimunAcceptable')})\r\n }\r\n {\r\n item.TipoResultadoKPI === 3 &&\r\n (<>{t('scoreCard:Satisfactory')})\r\n }\r\n {\r\n item.TipoResultadoKPI === 4 &&\r\n (<>{t('scoreCard:OutStanding')})\r\n }\r\n \r\n \r\n )\r\n :\r\n ({t('scoreCard:Project')}: {item.NomProyecto} )\r\n }\r\n | \r\n \r\n {item.ValorVariable}\r\n | \r\n\r\n {\r\n typeof(item.ValorVariable) !== 'undefined' && item.ValorVariable !== '' && item.ValorVariable !== null \r\n ?\r\n (<>)\r\n :\r\n (<>)\r\n }\r\n | \r\n
{t('scoreCard:LastUpdate')}: {moment(LastUpdate).format('MMMM Do YYYY, h:mm:ss a')}
\r\n */\r\n }\r\n \r\n \r\n \r\n \r\n {t('orangePage:ProjectProgressEvaluation')}\r\n \r\n
\r\n\r\n {t('orangePage:YourEstimatedProgressIs')} \r\n \r\n {projectPerformance.LabelEstProgress}\r\n \r\n {`, ${t('orangePage:YourRealProgressIs')}`} \r\n \r\n {projectPerformance.LabelRealProgress}\r\n \r\n {`, ${t('orangePage:YourProjectProgressIs')}`} \r\n \r\n {`${projectPerformance.ProgresoProyecto} (${projectPerformance.ProgresoProyectoDivision})`}\r\n \r\n
\r\n \r\n )\r\n }\r\n \r\n );\r\n \r\n const headerDialog = (\r\n <>\r\n\r\n {`${t('orangePage:ProjectPerformanceCalculation')} ${projectPerformance.AnioMesDate? moment(projectPerformance.AnioMesDate).format(\"MMMM, YYYY\"): '' }:`}\r\n
\r\n \r\n\r\n \r\n {t('orangePage:KPIProgressEvaluation')}\r\n \r\n
\r\n \r\n\r\n ({t('focusReport:Total')})}> \r\n ({ (kpiProgressEvaluationDetailList.reduce((a,v) => a += v.Points === null ? 0 : v.Points , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n ({ (kpiProgressEvaluationDetailList.reduce((a,v) => a += v.PointsObtained === null ? 0 : v.PointsObtained , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) })}> \r\n
\r\n \r\n )\r\n\r\n const datatableTemplate = (\r\n <>\r\n {dataTableHeader}\r\n \r\n
\r\n \r\n onClickViewProgressReport(rowData.ClaProyecto, rowData.IdReporteMensual)}>{rowData.NomProyecto}
);\r\n }\r\n \r\n return (<>{rowData.NomProyecto})\r\n /*\r\n return ( \r\n <> \r\n \r\n {rowData.NomProyecto} \r\n \r\n \r\n) */\r\n }\r\n\r\n const onClickViewProgressReport = (ClaProyecto, IdReporteMensual) => {\r\n setEsMostrarProgressReportParent(true);\r\n setclaSelectedProject(ClaProyecto);\r\n setidSelectedReporteMensual(IdReporteMensual);\r\n }\r\n\r\n const keyTemplate = (rowData) => {\r\n return ( \r\n <> \r\n \r\n {rowData.ClaProyecto} \r\n \r\n \r\n)\r\n }\r\n\r\n const SemaforoTemplate = (rowData) => {\r\n let className = '';\r\n const semaforo = rowData.Semaforo === null ? '' : rowData.Semaforo ;\r\n switch(semaforo.toString()) {\r\n case \"1\":\r\n className = \"success-color\";\r\n break;\r\n case \"2\":\r\n className = \"warning-color\";\r\n break;\r\n case \"3\":\r\n className = \" danger-color\";\r\n break;\r\n default:\r\n className = \"default-color\";\r\n }\r\n return (\r\n <>\r\n \r\n \r\n );\r\n } \r\n\r\n const DifActualVsObjetivoTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n \r\n\r\n const headerSeguimientoFasesGroup = ( \r\n \r\n \r\n
\r\n
\r\n );\r\n}; \r\n \r\nconst renderFooter = () => {\r\n return (\r\n <>\r\n \r\n {EncabezadoList.NomPeriodo} \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst leftToolbarFooterNewAPTemplate = () => { \r\n return (\r\n <> \r\n \r\n \r\n );\r\n};\r\nconst rightToolbarFooterNewAPTemplate = () => {\r\n \r\n return (\r\n <>\r\n \r\n {Logros}\r\n
\r\n\r\n {ProblemasAResolver}\r\n
\r\n\r\n {SiguientesPasos}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n onClickViewProgressReport(rowData.ClaProyecto, rowData.IdReporteMensual)}>{rowData.NomProyecto}
);\r\n }\r\n\r\n return (<>{rowData.NomProyecto})\r\n }\r\n\r\n const keyTemplate = (rowData) => {\r\n \r\n\r\n return (\r\n <>\r\n {rowData.ClaProyecto}\r\n \r\n \r\n)\r\n }\r\n \r\n \r\n const SemaforoTemplate = (rowData) => {\r\n let className = ''; \r\n const semaforo = rowData.Semaforo;\r\n switch (semaforo.toString()) {\r\n case '1':\r\n className = 'success-color';\r\n break;\r\n case '2':\r\n className = 'warning-color';\r\n break;\r\n case '3':\r\n className = ' danger-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n const ActivityTemplate = (rowData) => {\r\n let className = '';\r\n const semaforo = rowData.Semaforo;\r\n switch (semaforo.toString()) {\r\n case '1':\r\n className = 'color:green;';\r\n break;\r\n case '2':\r\n className = 'color:red;';\r\n break;\r\n default:\r\n className = 'color:red;';\r\n }\r\n return { className };\r\n };\r\n const FechaEstimadaFinTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaEstimadaFin !== null\r\n ? moment(rowData.FechaEstimadaFin).format('MM/DD/YYYY')\r\n : rowData.FechaEstimadaFin}\r\n \r\n );\r\n };\r\n \r\n const FechaTerminoTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaTermino !== null\r\n ? moment(rowData.FechaTermino).format('MM/DD/YYYY')\r\n : rowData.FechaTermino}\r\n \r\n );\r\n };\r\n\r\n const FechaRealTerminoTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaRealTermino !== null\r\n ? moment(rowData.FechaRealTermino).format('MM/DD/YYYY')\r\n : rowData.FechaRealTermino}\r\n \r\n );\r\n }; \r\n\r\n const FechaRealFinTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaRealFin !== null\r\n ? moment(rowData.FechaRealFin).format('MM/DD/YYYY')\r\n : rowData.FechaRealFin}\r\n \r\n );\r\n };\r\n\r\n const FechaCompromisoTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaCompromiso !== null\r\n ? moment(rowData.FechaCompromiso).format('MM/DD/YYYY')\r\n : rowData.FechaCompromiso}\r\n \r\n );\r\n };\r\n const PorcPesoTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n const AvanceEstimadoTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n const AvanceRealTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n const ComentariosActualizacionFaseTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n \r\n\r\n const FechaEstimadaInicioTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaEstimadaInicio !== null\r\n ? moment(rowData.FechaEstimadaInicio).format('MM/DD/YYYY')\r\n : rowData.FechaEstimadaInicio}\r\n \r\n );\r\n };\r\n const FechaRealInicioTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaRealInicio !== null\r\n ? moment(rowData.FechaRealInicio).format('MM/DD/YYYY')\r\n : rowData.FechaRealInicio}\r\n \r\n );\r\n };\r\n\r\n const headerActividadesACloncluir = <>{t('reportevanceMensualProyecto:ActPendComp')};\r\n const headerActividadesCompletadas = <>{t('reportevanceMensualProyecto:ActivitiesPeriod')};\r\n const headerActividadesSiguiente = <>{t('reportevanceMensualProyecto:ActivitiesMonth')};\r\n const headerActividadesEntregable = <>{t('reportevanceMensualProyecto:Deliverables')};\r\n \r\n const DescripcionPresenteEditor = (props) => { \r\n return (\r\n \r\n onDescripcionPresenteChange(props, e.target.value)} \r\n errors={errors[`PresenteList[${props.rowData.RowIndex}]`]} \r\n maxLength={500} \r\n />\r\n
\r\n );\r\n };\r\n const EsMostrarEnOrangePageEditor = (rowData, props) => {\r\n return (\r\n \r\n EsMostrarEnOrangePageSelected(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n const DescripcionFuturoEditor = (props) => {\r\n return (\r\n \r\n onDescripcionFuturoChange(props, e.target.value)}\r\n errors={errors[`FuturoList[${props.rowData.RowIndex}]`]} \r\n maxLength={500} \r\n />\r\n
\r\n );\r\n };\r\n const EsMostrarEnOrangePageFuturoEditor = (rowData, props) => {\r\n return (\r\n \r\n EsMostrarEnOrangePageFuturoSelected(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onShowCalculationFormulaRevi = (IdKPIFormula) => {\r\n setEsMostrarFormulaReview(true);\r\n setIdKPIFormulaSelected(IdKPIFormula); \r\n }\r\n\r\n const calculateKPIResult = (item, props) => { \r\n /* Ejecutamos proceso para calcular el kpi con la formula */\r\n const paramsService = {\r\n AnioMes, \r\n IdKPIFormula: item.IdKPIFormula,\r\n };\r\n\r\n \r\n const CalcularResultadoFormula = `${config.UrlApiProject}ScoreCard/CalcularResultadoFormula`;\r\n \r\n callApi(CalcularResultadoFormula, 'POST', paramsService, (response) => {\r\n const updatedValorActual = [...props.value];\r\n const target = updatedValorActual[props.rowIndex].EstatusObjetivo;\r\n let DiffvsTarget = null;\r\n const value = response.data.Resultado; \r\n\r\n console.log('updatedValorActual[props.rowIndex].ClaSentidoMejora', updatedValorActual[props.rowIndex].ClaSentidoMejora);\r\n if (updatedValorActual[props.rowIndex].ClaSentidoMejora === 1 )\r\n {\r\n if (target === 0){\r\n if (value === 0){\r\n DiffvsTarget = 100.0;\r\n }else {\r\n // no se puede divir entre 0\r\n DiffvsTarget = null\r\n }\r\n }\r\n else \r\n {\r\n DiffvsTarget = (1 - ((target - value)/target))*100.0; \r\n DiffvsTarget = DiffvsTarget > 100? 100 : DiffvsTarget;\r\n }\r\n }\r\n else if (updatedValorActual[props.rowIndex].ClaSentidoMejora === 2)\r\n {\r\n if (value === 0){\r\n if (target === 0){\r\n DiffvsTarget = 100.0;\r\n }else {\r\n // no se puede divir entre 0\r\n DiffvsTarget = null\r\n }\r\n }\r\n else \r\n {\r\n\r\n DiffvsTarget = (1 - ((value - target)/value))*100.0; \r\n DiffvsTarget = DiffvsTarget > 100? 100 : DiffvsTarget;\r\n } \r\n } \r\n\r\n \r\n updatedValorActual[props.rowIndex].ValorActual = value;\r\n updatedValorActual[props.rowIndex].DifActualVsObjetivo = DiffvsTarget;\r\n updatedValorActual[props.rowIndex].EsCalculoEjecutado = true;\r\n \r\n setReporteAvanceProyectoKPIList(updatedValorActual);\r\n }); \r\n }\r\n // IdKPIFormula\r\n const ValorActualKPITemplate = (rowData, props) => {\r\n \r\n if (rowData.IdKPIFormula !== null){\r\n return (\r\n <>\r\n calculateKPIResult(rowData, props)}> onShowCalculationFormulaRevi(rowData.IdKPIFormula)}>{rowData.ValorActual !== null? Highcharts.numberFormat(rowData.ValorActual, 2, '.', ',') : null}\r\n \r\n {\r\n rowData.EsCalculoEjecutado === true &&\r\n (<> onShowCalculationFormulaRevi(rowData.IdKPIFormula)}>) \r\n }\r\n \r\n \r\n )\r\n }\r\n return ({rowData.ValorActual !== null? Highcharts.numberFormat(rowData.ValorActual, 2, '.', ',') : null})\r\n }\r\n\r\n const ValorActualEditor = (props) => {\r\n\r\n if (props.rowData.IdKPIFormula !== null){\r\n return (\r\n <>\r\n calculateKPIResult(props.rowData, props)}> onShowCalculationFormulaRevi(props.rowData.IdKPIFormula)}>{props.rowData.ValorActual !== null? Highcharts.numberFormat(props.rowData.ValorActual, 2, '.', ',') : null}\r\n {\r\n props.rowData.EsCalculoEjecutado === true &&\r\n (<> onShowCalculationFormulaRevi(props.rowData.IdKPIFormula)}>) \r\n }\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n onValorActualKPIManagementChange(props, e.target.value)}\r\n minFractionDigits={2}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n />\r\n
\r\n );\r\n };\r\n const ComentariosActualizacionFaseEditor = ( props ) => { \r\n return (\r\n \r\n ComentariosActualizacionFaseChange(props, e.target.value)}\r\n maxLength={3000}\r\n rows={2}\r\n />\r\n
\r\n )\r\n };\r\n const ComentariosActualizacionFaseListeningEditor = ( props ) => { \r\n return (\r\n \r\n ComentariosActualizacionFaseListeningChange(props, e.target.value)}\r\n maxLength={3000}\r\n rows={2}\r\n />\r\n
\r\n )\r\n };\r\n const DescripcionSoporteEditor = (props) => {\r\n return (\r\n \r\n onDescripcionSoporteChange(props, e.target.value)}\r\n errors={errors[`SoporteList[${props.rowData.RowIndex}]`]} \r\n maxLength={500} \r\n />\r\n
\r\n );\r\n };\r\n const FechaCompromisoEditor = ( props ) => { \r\n return (\r\n \r\n onChangeFechaCompromiso(props, e)}\r\n errors={errors[`SoporteList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n const onChangeFechaCompromiso = (props, e) => { \r\n const updatedProducts = [...SoporteList];\r\n const saveArray= getCurrentSoporteRowValues(props); \r\n saveArray.FechaCompromiso = new Date(e.target.value)\r\n updatedProducts[props.rowData.RowIndex].FechaCompromiso = e.target.value;\r\n setSoporteList(updatedProducts); \r\n } \r\n const FechaRealTerminoEditor = ( props ) => { \r\n return (\r\n \r\n onChangeFechaRealTermino(props, e)}\r\n /> \r\n
\r\n )\r\n };\r\n const onChangeFechaRealTermino = (props, e) => { \r\n const updatedProducts = [...SoporteList];\r\n const saveArray= getCurrentSoporteRowValues(props); \r\n saveArray.FechaRealTermino = new Date(e.target.value)\r\n updatedProducts[props.rowData.RowIndex].FechaRealTermino = e.target.value;\r\n setSoporteList(updatedProducts); \r\n }\r\n const getCurrentSoporteRowValues = (props) => {\r\n const updatedProducts = [...props.value];\r\n let RowValues ={}\r\n \r\n if (updatedProducts[props.rowIndex].IdReporteAvanceMenProySeg !== null){\r\n RowValues ={\r\n IdReporteAvanceMenProySeg: updatedProducts[props.rowIndex].IdReporteAvanceMenProySeg,\r\n IdReporteAvanceMensualProyecto: updatedProducts[props.rowIndex].IdReporteAvanceMensualProyecto,\r\n Descripcion: updatedProducts[props.rowIndex].Descripcion,\r\n // ClaColaborador: {\r\n // ClaColaborador: updatedProducts[props.rowIndex].ClaColaborador.ClaColaborador,\r\n // NomColaborador: updatedProducts[props.rowIndex].ClaColaborador.NomColaborador\r\n // }, \r\n ClaUsuario: SoporteList[props.rowIndex].ClaUsuario.ClaColaborador === undefined ? SoporteList[props.rowIndex].ClaUsuario : SoporteList[props.rowIndex].ClaUsuario.ClaColaborador, \r\n NomUsuario: SoporteList[props.rowIndex].ClaUsuario.ClaColaborador === undefined ? SoporteList[props.rowIndex].NomUsuario : SoporteList[props.rowIndex].ClaUsuario.NomColaborador, \r\n EsMostrarEnOrangePage: updatedProducts[props.rowIndex].EsMostrarEnOrangePage,\r\n FechaCompromiso: updatedProducts[props.rowIndex].FechaCompromiso, \r\n FechaRealTermino: updatedProducts[props.rowIndex].FechaRealTermino,\r\n BajaLogica: updatedProducts[props.rowIndex].BajaLogica\r\n }\r\n }\r\n else {\r\n RowValues ={\r\n IdReporteAvanceMenProySeg: updatedProducts[props.rowIndex].IdReporteAvanceMenProySeg,\r\n IdReporteAvanceMensualProyecto: updatedProducts[props.rowIndex].IdReporteAvanceMensualProyecto,\r\n Descripcion: updatedProducts[props.rowIndex].Descripcion,\r\n ClaUsuario: null,\r\n NomUsuario: updatedProducts[props.rowIndex].NomUsuario,\r\n EsMostrarEnOrangePage: updatedProducts[props.rowIndex].EsMostrarEnOrangePage,\r\n FechaCompromiso: updatedProducts[props.rowIndex].FechaCompromiso, \r\n FechaRealTermino: updatedProducts[props.rowIndex].FechaRealTermino,\r\n BajaLogica: updatedProducts[props.rowIndex].BajaLogica\r\n }\r\n }\r\n \r\n return RowValues;\r\n } \r\n const ComentariosActualizacionFaseChange = (props, value) => {\r\n const updatedComentariosActualizacion = [...props.value];\r\n updatedComentariosActualizacion[props.rowIndex][props.field] = value;\r\n \r\n setSeguimientoFasesList(updatedComentariosActualizacion);\r\n };\r\n\r\n const ComentariosActualizacionFaseListeningChange = (props, value) => {\r\n const updatedComentariosActualizacion = [...props.value];\r\n updatedComentariosActualizacion[props.rowIndex][props.field] = value;\r\n \r\n setSeguimientoFasesListeningList(updatedComentariosActualizacion);\r\n };\r\n\r\n const onValorActualKPIManagementChange = (props, value) => { \r\n const updatedValorActual = [...props.value];\r\n const target = updatedValorActual[props.rowIndex].EstatusObjetivo;\r\n let DiffvsTarget = null;\r\n\r\n // algunos meses el valor puede ser 0 entonces para esos casos, no dividimos, ya que puede ser que ese no genera valor\r\n // hasta mas adelante del proyecto\r\n console.log('ClaSentidoMejora 1', updatedValorActual[props.rowIndex].ClaSentidoMejora);\r\n \r\n if (updatedValorActual[props.rowIndex].ClaSentidoMejora === 1 )\r\n {\r\n if (target === 0){\r\n if (value === 0){\r\n DiffvsTarget = 100.0;\r\n }else if (value > 0){\r\n DiffvsTarget = 100.0;\r\n }else if (value < 0){\r\n DiffvsTarget = 0.0;\r\n }else{ \r\n // no se puede divir entre 0\r\n DiffvsTarget = null\r\n }\r\n }\r\n else \r\n {\r\n DiffvsTarget = (1 - ((target - value)/target))*100.0; \r\n DiffvsTarget = DiffvsTarget > 100? 100 : DiffvsTarget;\r\n }\r\n }\r\n else if (updatedValorActual[props.rowIndex].ClaSentidoMejora === 2)\r\n {\r\n if (target === 0){\r\n if (value === 0){\r\n DiffvsTarget = 100.0;\r\n }else if (value < 0){\r\n DiffvsTarget = 100.0;\r\n }else if (value > 0){\r\n DiffvsTarget = 0.0;\r\n }else {\r\n // no se puede divir entre 0\r\n DiffvsTarget = null\r\n }\r\n }\r\n else \r\n {\r\n DiffvsTarget = (1 - ((value - target)/value))*100.0;\r\n DiffvsTarget = DiffvsTarget > 100? 100 : DiffvsTarget;\r\n } \r\n } \r\n \r\n updatedValorActual[props.rowIndex][props.field] = value;\r\n updatedValorActual[props.rowIndex].DifActualVsObjetivo = DiffvsTarget;\r\n \r\n setReporteAvanceProyectoKPIList(updatedValorActual);\r\n };\r\n const onDescripcionPresenteChange = (props, value) => { \r\n const updatedField= [...PresenteList]; \r\n updatedField[props.rowData.RowIndex][props.field] = value;\r\n\r\n setPresenteList(updatedField);\r\n };\r\n const EsMostrarEnOrangePageSelected = (props, e) => { \r\n const updatedField= [...PresenteList]; \r\n updatedField[props.rowData.RowIndex][props.field] = e.checked ? 1 : 0; \r\n setPresenteList(updatedField);\r\n }\r\n const onDescripcionFuturoChange = (props, value) => {\r\n const updatedField= [...FuturoList]; \r\n updatedField[props.rowData.RowIndex][props.field] = value;\r\n\r\n setFuturoList(updatedField);\r\n };\r\n const EsMostrarEnOrangePageFuturoSelected = (props, e) => { \r\n const updatedField= [...FuturoList]; \r\n updatedField[props.rowData.RowIndex][props.field] = e.checked ? 1 : 0; \r\n setFuturoList(updatedField);\r\n }\r\n const onDescripcionSoporteChange = (props, value) => {\r\n const updatedField= [...SoporteList]; \r\n updatedField[props.rowData.RowIndex][props.field] = value;\r\n\r\n setSoporteList(updatedField);\r\n };\r\n const emptyValueValidator = (e) => {\r\n const { rowData, field } = e.columnProps;\r\n return rowData[e.columnProps.field].trim().length > 0;\r\n }\r\n const ResponsibleParticipantsEditor = (props) => { \r\n\r\n // if ( props.rowData.IdReporteAvanceMenProySeg === null) { \r\n return ( \r\n \r\n onChangeClaUsuarioResponsableParticipants(props,e)} \r\n suggestions={filteredResponsibleParticipants}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsibleParticipants(props, e)} \r\n errors={errors[`SoporteList[${props.rowData.RowIndex}]`]}\r\n // errors={errors[`ParticipantsList[${props.rowIndex}]`]}\r\n /> \r\n
\r\n ) \r\n // }\r\n \r\n // return (<>{props.rowData.NomColaborador})\r\n \r\n };\r\n const onChangeClaUsuarioResponsableParticipants = (props, e) => { \r\n const saveArray= getCurrentRowValuesParticipants(props); \r\n const updatedProducts = [...SoporteList]; \r\n \r\n // const newErrors = { ...errors } \r\n // const field = { ...newErrors[`ParticipantsList[${props.rowIndex}]`] };\r\n // field.ClaColaborador = null;\r\n // newErrors[`ParticipantsList[${props.rowIndex}]`] = field;\r\n // delete newErrors[`ParticipantsList[${props.rowIndex}]`];\r\n // setErrors(newErrors) ;\r\n\r\n if (e.value != null && typeof(e.value) === 'object'){\r\n const responsible = filteredResponsibleParticipants.filter(item => item.ClaColaborador ===e.value.ClaColaborador)[0]; \r\n \r\n if(responsible!==undefined){\r\n updatedProducts[props.rowData.RowIndex].NomUsuario = responsible.NomColaborador;\r\n updatedProducts[props.rowData.RowIndex].ClaUsuario = responsible.ClaColaborador;\r\n }\r\n }\r\n else{\r\n updatedProducts[props.rowData.RowIndex].NomUsuario = null;\r\n }\r\n updatedProducts[props.rowData.RowIndex].ClaUsuario = e.value;\r\n saveArray.ClaColaborador = e.value; \r\n setSoporteList(updatedProducts); \r\n }\r\n const filterResponsibleParticipants = (props, event) => {\r\n let valor = ''; \r\n const updatedProducts = [...SoporteList];\r\n\r\n if (updatedProducts[props.rowData.RowIndex].ClaUsuario !== null && updatedProducts[props.rowData.RowIndex].ClaUsuario !== '' && event.query === \"\")\r\n {\r\n valor = updatedProducts[props.rowData.RowIndex].NomUsuario;\r\n }\r\n else{\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query \r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetColaboradorProyectosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => { \r\n setfilteredResponsibleParticipants(response.data[0]);\r\n });\r\n}\r\n const getCurrentRowValuesParticipants = (props) => {\r\n const updatedProducts = [...props.value];\r\n let RowValues ={}\r\n\r\n if (updatedProducts[props.rowIndex].ClaUsuario !== null){\r\n RowValues ={ \r\n ClaColaborador: {\r\n ClaColaborador: updatedProducts[props.rowIndex].ClaUsuario,\r\n NomColaborador: updatedProducts[props.rowIndex].NomUsuario\r\n }\r\n }\r\n }\r\n else {\r\n RowValues ={ \r\n ClaColaborador: null, \r\n }\r\n }\r\n \r\n return RowValues;\r\n}\r\nconst showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length>0) {\r\n rows.forEach((item, index) => { \r\n if (item.BajaLogica === 0) {\r\n item.RowIndex = index;\r\n activeRows.push({...item});\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows; \r\n};\r\n\r\nconst fieldsRequiredPresenteList = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`PresenteList[${props.rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n}\r\n\r\nconst fieldsRequiredFuturoList = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`FuturoList[${props.rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n}\r\n\r\nconst fieldsRequiredSoporteList = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`SoporteList[${props.rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n}\r\n \r\nconst onHideProgressReport = () => { \r\n\r\n if (props.onHide !== null && typeof props.onHide === 'function') {\r\n props.onHide();\r\n }\r\n};\r\n\r\nconst renderHeader = () => { \r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n}; \r\n \r\nconst renderFooter = () => {\r\n return (\r\n <>\r\n \r\n {EncabezadoList.NomPeriodo} \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst leftToolbarFooterNewAPTemplate = () => { \r\n return (\r\n <> \r\n \r\n );\r\n};\r\nconst rightToolbarFooterNewAPTemplate = () => {\r\n \r\n return (\r\n <>\r\n \r\n {setLogros(e.target.value)}}\r\n /> \r\n
\r\n \r\n \r\n {setProblemasAResolver(e.target.value)}}\r\n /> \r\n
\r\n \r\n \r\n {setSiguientesPasos(e.target.value)}}\r\n /> \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n const onConfirmBaja = (proyectoInvolucrado, props) => {\r\n const proyectoRow = {\r\n ClaUsuario: proyectoInvolucrado.ClaUsuario,\r\n ClaRolProyecto: proyectoInvolucrado.ClaRolProyecto,\r\n ClaProyecto: proyectoInvolucrado.ClaProyecto,\r\n };\r\n swal({\r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: 'cancel',\r\n className: 'rounded-button danger',\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: 'continue',\r\n className: 'rounded-button light-green',\r\n },\r\n },\r\n content: confirmationMessageHTML,\r\n }).then((value) => {\r\n switch (value) {\r\n case 'continue':\r\n bajaProyectoInvolucrado(proyectoRow);\r\n break;\r\n default:\r\n break;\r\n }\r\n });\r\n };\r\n const confirmationMessageHTML = (\r\n \r\n \r\n \r\n
\r\n );\r\n const actionBodyTemplate = (rowData, itemProps) => {\r\n if (props.readOnly === true){\r\n return (<>)\r\n }\r\n\r\n return (\r\n <>\r\n {t('proyectoinvolucrados:SubmitCancelled')}.
\r\n \r\n onRolProyectoChange(itemProps, e)}\r\n />\r\n
\r\n );\r\n };\r\n const onChangeInvolucrado = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaInvolucrado;\r\n setErrors(newErrors);\r\n setClaInvolucrado(e.value);\r\n };\r\n const onChangeClaRolProyecto = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaRolProyecto;\r\n setErrors(newErrors);\r\n setClaRolProyecto(value);\r\n };\r\n\r\n const filterResponsible = (event) => {\r\n let valor = '';\r\n if (ClaInvolucrado !== null && ClaInvolucrado !== '' && event.query === '') {\r\n valor = ClaInvolucrado.NomUsuario;\r\n } else {\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query\r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetUsuariosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => {\r\n setfilteredResponsible(response.data.Usuarios);\r\n });\r\n };\r\n const addNewMember = async (e) => {\r\n const value = {\r\n ClaInvolucrado,\r\n ClaRolProyecto,\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeAgregarInvolucrado);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveInvolucrados`;\r\n const paramsService = {\r\n ClaUsuario: ClaInvolucrado.ClaUsuario,\r\n ClaRolProyecto,\r\n ClaProyecto\r\n };\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n obtenerInformacionProyectoInvoludrado();\r\n setClaInvolucrado(null);\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n });\r\n \r\n \r\n };\r\n const valitationSchemeAgregarInvolucrado = yup.object().shape({\r\n ClaInvolucrado: yup.object({ ClaUsuario: yup.string().required(t('common:RequiredField')) }).required(t('common:RequiredField')).nullable(),\r\n ClaRolProyecto: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n });\r\n\r\n \r\n\r\n const onChangeIncluirSoloUsuariosMSW = (props, e) => {\r\n setEsMostrarSoloUsuarioMSW(e.checked ? 1 : 0); \r\n };\r\n\r\n const closeModalActivityDetail = () => {\r\n setEsMostrarDetalleActividades(false);\r\n };\r\n \r\n\r\n const TotalActividadesTemplate = (props) => { \r\n return (<> onClickViewActivityDetail(props.ClaUsuario, TipoDetalleType.All, props.NomUsuario)}>{props.TotalActividades}
);\r\n \r\n }\r\n const ActividadesAbiertasTemplate= (props) => { \r\n return (<> onClickViewActivityDetail(props.ClaUsuario, TipoDetalleType.Open, props.NomUsuario)}>{props.ActividadesAbiertas}
);\r\n \r\n }\r\n const ActividadesAtrasadasTemplate= (props) => { \r\n return (<> onClickViewActivityDetail(props.ClaUsuario, TipoDetalleType.Delayed, props.NomUsuario)}>{props.ActividadesAtrasadas}
);\r\n \r\n }\r\n\r\n const FechaEstimadaFinTemplate = (props) => {\r\n return ({props.FechaEstimadaFin === null ? '' : moment(props.FechaEstimadaFin).format(\"ll\") } )\r\n }\r\n\r\n const FechaRealFinTemplate = (props) => {\r\n return ({props.FechaRealFin === null ? '' : moment(props.FechaRealFin).format(\"ll\") } )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {t('misProyectosScreen:EsMostrarSoloUsuarioMSW')}\r\n onChangeIncluirSoloUsuariosMSW(props, e)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onChangeClaRolProyecto(e.value)}\r\n label={t('caratulaproyecto:SeleccionaRole')}\r\n errors={errors}\r\n />\r\n
\r\n \r\n {t('hr:FeedbackCoaching')}
\r\n \r\n {\r\n /*\r\n -->\r\n
\r\n \r\n */\r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n : \r\n ActivaEmployeeSelfReview === 1 ? \r\n \r\n : \r\n }\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {\r\n /*\r\n \r\n \r\n \r\n : \r\n ActivaManagerReview === 1 ? \r\n \r\n : \r\n }\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n */\r\n }\r\n \r\n
\r\n {t('hr:ScoreCardSummary')}
\r\n \r\n \r\n : \r\n ActivaEmployeeSelfReview === 1 ? \r\n \r\n : \r\n }\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n {t('hr:TeamPerformance')}
\r\n \r\n \r\n onAnioChange(e.value, performanceDevelopmentInfo)} \r\n optionValue=\"Anio\"\r\n optionLabel=\"Anio\" \r\n placeholder={t('common:SelectYear')} \r\n showClear={false}\r\n /> \r\n\r\n \r\n
\r\n )\r\n }\r\n \r\n if (Anio === null)\r\n {\r\n return (<>);\r\n } \r\n \r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {t('hr:MytotalSuccessPathway')}
\r\n\r\n
{t('hr:Culture180DegreeReviewPeriodClosed')}
\r\n \r\n{t('hr:ActivaRecibirFeedbackCultureSurveyClosed')}
\r\n \r\n{t('common:NoData')}
\r\n \r\n\r\n {t('hr:PleaseReviewYourFeedback')} {t('hr:AddCommentBelow')}.\r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n Value / Competency\r\n | \r\n\r\n Self-Review Rating\r\n | \r\n\r\n Other's Review Rating\r\n | \r\n\r\n Overall Rating\r\n | \r\n
|---|---|---|---|
| \r\n \r\n {element.TituloTopico} \r\n \r\n | \r\n \r\n \r\n \r\n {element.SelfReviewRate !== null? Highcharts.numberFormat(element.SelfReviewRate, 2, '.', ','): null} \r\n | \r\n \r\n \r\n {element.OthersReviewRate !== null? Highcharts.numberFormat(element.OthersReviewRate, 2, '.', ','): null}\r\n \r\n | \r\n \r\n \r\n {element.OverallRateReview !== null? Highcharts.numberFormat(element.OverallRateReview, 2, '.', ','): null}\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n | \r\n Value / Competency\r\n | \r\n\r\n Feedback Received\r\n | \r\n
|---|---|
| \r\n \r\n {element.TituloTopico} \r\n \r\n | \r\n \r\n {\r\n SummaryNotRatedQuestions.filter((item) => item.TituloTopico === element.TituloTopico).map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n {item.DetalleRespuesta}\r\n \r\n \r\n | \r\n
\r\n { index > 0 ?
\r\n );\r\n })} \r\n \r\n \r\n
\r\n \r\n {element.RespuestaPregunta}\r\n
\r\n \r\n { index > 0 ?
\r\n );\r\n })} \r\n\r\n {\r\n managerReviewFeedback.length === 0 ?\r\n (\r\n \r\n
\r\n \r\n {element.RespuestaPregunta}\r\n
\r\n {t('common:NoData')}
)\r\n :\r\n (<>)\r\n }\r\n\r\n \r\n \r\n
\r\n {t('hr:SelfReflecton')}
{' '}\r\n \r\n\r\n
\r\n \r\n
\r\n {esTienePermisoEdicion && EsVersionSoloLectura === false ? (\r\n \r\n
\r\n ) : }\r\n \r\n
\r\n \r\n
\r\n {esTienePermisoEdicion && EsVersionSoloLectura === false ? (\r\n \r\n
\r\n ) : }\r\n \r\n \r\n \r\n \r\n
\r\n {esTienePermisoEdicion && EsVersionSoloLectura === false ? (\r\n \r\n
\r\n ) : }\r\n { EsVersionSoloLectura ? <> : (\r\n \r\n
\r\n )}\r\n \r\n {t('hr:Culture180DegreeReviewPeriodClosed')}
\r\n \r\n{t('hr:ActivaDarFeedbackCultureSurveyClosed')}
\r\n \r\n\r\n {t('survey:CultureSurveyFeedbackInstructions')}.\r\n
\r\n{t('survey:TitleQuestion1')}
{' '}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {\r\n errors.TeamToBeEvaluated && (\r\n <>\r\n \r\n {errors.TeamToBeEvaluated.message}\r\n \r\n \r\n )\r\n }\r\n {\r\n /*\r\n \r\n | \r\n #\r\n | \r\n\r\n {t('survey:Participant')}\r\n | \r\n\r\n \r\n | \r\n
|---|---|---|
| \r\n {element.RowIndexCount}\r\n | \r\n\r\n \r\n {\r\n element.CargaDefault === 1 ?\r\n (<>{element.NomUsuario})\r\n :\r\n (\r\n \r\n | \r\n \r\n \r\n | \r\n
{t('survey:TitleQuestion2')}
{' '}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {\r\n /*\r\n | \r\n #\r\n | \r\n\r\n {t('survey:Participant')}\r\n | \r\n\r\n \r\n | \r\n
|---|---|---|
| \r\n {element.RowIndexCount}\r\n | \r\n \r\n \r\n {\r\n element.CargaDefault === 1 ?\r\n (<>{element.NomUsuario})\r\n :\r\n (\r\n \r\n | \r\n \r\n \r\n | \r\n
{t('survey:TitleStep3')}
{' '}\r\n \r\n \r\n\r\n {t('survey:CultureSurveyCompleteSelfReview')}.\r\n
\r\n\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n if(!CultureSurveyFeedbackSetUp.Activa180DegreeReview){\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n {t('hr:Culture180DegreeReviewPeriodClosed')}
\r\n \r\n{t('hr:ActivaDarFeedbackCultureSurveyGivingClosed')}
\r\n \r\n\r\n {t('survey:CultureSurveyGiveInstructions')}.\r\n
\r\n{t('survey:GivingFeedbackTitleQuestion1')}
{' '}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {\r\n /*\r\n \r\n | \r\n {t('survey:ParticipantTobeEvaluated')}\r\n | \r\n\r\n \r\n | \r\n\r\n \r\n | \r\n
|---|---|---|
| \r\n \r\n {element.NomUsuario}\r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n | \r\n
{t('survey:GivingFeedbackTitleQuestion2')}
{' '}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {\r\n /*\r\n | \r\n {t('survey:ParticipantRequestingFeedback')}\r\n | \r\n\r\n \r\n | \r\n\r\n \r\n | \r\n
|---|---|---|
| \r\n \r\n {element.NomUsuario}\r\n \r\n | \r\n \r\n | \r\n \r\n \r\n | \r\n
\r\n \r\n onAnioChange(e.value)} \r\n optionValue=\"Anio\"\r\n optionLabel=\"Anio\" \r\n placeholder={t('common:SelectYear')} \r\n showClear={false}\r\n /> \r\n \r\n
\r\n )\r\n} \r\n\r\n const onCultureSurveyFeedbackSetUpSaved = () => {\r\n setActiveIndex(1);\r\n };\r\n\r\nconst stepItems = [\r\n {\r\n label: \r\n <> \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {t('hr:CultureSurveySetUp')}\r\n
\r\n ,\r\n className: 'itemInicio',\r\n command: (event) => { \r\n }\r\n },\r\n {\r\n label: \r\n <> \r\n \r\n \r\n
\r\n \r\n {t('hr:GivingFeedback')}\r\n
\r\n ,\r\n className: '',\r\n command: (event) => { \r\n }\r\n},\r\n{\r\n label: \r\n <> \r\n \r\n \r\n
\r\n \r\n {t('hr:ReceiveFeedback')}\r\n
\r\n ,\r\n className: 'itemFinal',\r\n command: (event) => { \r\n }\r\n} \r\n\r\n\r\n \r\n];\r\n\r\nconst StepRender = (index) => { \r\n switch(index+1) {\r\n case 1:\r\n return (<>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n })\r\n */\r\n } \r\n \r\n \r\n \r\n \r\n \r\n \r\n setActiveIndex(e.index)}\r\n readOnly={false}\r\n /> \r\n \r\n \r\n \r\n
\r\n { StepRender (activeIndex) } \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n { StepRender (activeIndex) } \r\n \r\n
\r\n
\r\n \r\n )\r\n} \r\n\r\nexport default FieldCarousel; \r\n","/* eslint-disable react/forbid-prop-types */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport \"./HighlighterText.css\"; \r\nimport Highlighter from \"react-highlight-words\";\r\n \r\n\r\n\r\nfunction HighlighterText ({ \r\n searchWords,\r\n autoEscape,\r\n textToHighlight\r\n }) { \r\n \r\n const highlight = ({ children, highlightIndex }) => (\r\n {children}\r\n );\r\n\r\n \r\n return ( \r\n <> \r\n \r\n onNomAccionValueChange(props, e.target.value, rowData)}\r\n disabled={EsDisabled}\r\n maxLength={250}\r\n /> \r\n
\r\n \r\n );\r\n }\r\n\r\n const valitationSchemeRejected = yup.object().shape({\r\n ComentariosRevisado: yup.string().required(t('common:RequiredField')).nullable()\r\n });\r\n const valitationSchemeSave = yup.object().shape({\r\n ClaCompetencia: yup.string().required(t('common:RequiredField')).nullable(),\r\n ObjetivoSmart: yup.string().required(t('common:RequiredField')).nullable(),\r\n IDPAcciones: yup.array().of(\r\n yup.object().shape({ \r\n FechaInicioEstimada: yup.date().when('BajaLogica', {is: 0,\r\n then: yup.date().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.date().nullable()\r\n }), \r\n FechaFinalEstimada: yup.date().when('BajaLogica', {is: 0,\r\n then: yup.date().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.date().nullable()\r\n })\r\n })\r\n )\r\n }); \r\n\r\n const valitationSchemeCompleted = yup.object().shape({\r\n IDPAcciones: yup.array().of(\r\n yup.object().shape({ \r\n FechaFinalReal: yup.date().when('EsAccionCompletada', {is: true,\r\n then: yup.date().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.date().nullable()\r\n }), \r\n ComentariosSeguimiento: yup.string().when('EsAccionCompletada', {is: false,\r\n then: yup.string().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }) \r\n // ,EsAccionCompletada: yup.boolean().required(t('common:RequiredField'))\r\n })\r\n )\r\n }); \r\n\r\n const saveStatus = async (ClaEstatus) => {\r\n let value = {\r\n ComentariosRevisado\r\n }\r\n let validator;\r\n let esValido;\r\n if(ClaEstatus===4){\r\n validator = new YupValidator(valitationSchemeRejected);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n if(ClaEstatus===6){\r\n value = {\r\n IDPAcciones\r\n }\r\n validator = new YupValidator(valitationSchemeCompleted);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n const urlWebServiceSave = `${config.UrlApiProject}hr/SaveStatusIndividualDevelopmentPersonal`;\r\n const paramsService = {\r\n IdIDP,\r\n ClaIDPEstatus:ClaEstatus,\r\n ComentariosRevisado,\r\n IndividualDevelopmentPersonalAcciones:IDPAcciones,\r\n SupportDocumentCertificateFileData:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileData : null),\r\n SupportDocumentCertificateNomArchivo:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileName: null),\r\n SupportDocumentCertificateExtension:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileExtension: null) \r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n // getIDP(StartDateFilter,EndDateFilter);\r\n if (props.onStatusSaved && typeof props.onStatusSaved === 'function') {\r\n props.onStatusSaved();\r\n }\r\n });\r\n }\r\n\r\n const save = async () => {\r\n const value = {\r\n ClaCompetencia,\r\n ObjetivoSmart,\r\n IDPAcciones\r\n }\r\n let validator = new YupValidator(valitationSchemeSave);\r\n let esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n if(EsDiscutirGerente){\r\n if(showActiveRows(IDPAcciones).length===0){\r\n const valueAction = {\r\n TextFilter:''\r\n }\r\n validator = new YupValidator(schemaAction);\r\n esValido = await validator.validate(valueAction);\r\n if (!esValido){ \r\n setTextFilter(null);\r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n }\r\n }\r\n const urlWebServiceSave = `${config.UrlApiProject}hr/SaveIndividualDevelopmentPersonal`;\r\n const paramsService = {\r\n IdIDP,\r\n Respuesta1,\r\n Respuesta2,\r\n Respuesta3,\r\n Respuesta4,\r\n ObjetivoSmart,\r\n ClaCompetencia,\r\n EsDiscutirGerente,\r\n EsPlanRevisado,\r\n IndividualDevelopmentPersonalAcciones:IDPAcciones,\r\n SupportDocumentCourseFileData:(supportDucumentCourseDatafiles.length > 0 ? supportDucumentCourseDatafiles[0].FileData : null),\r\n SupportDocumentCourseNomArchivo:(supportDucumentCourseDatafiles.length > 0 ? supportDucumentCourseDatafiles[0].FileName: null),\r\n SupportDocumentCourseExtension:(supportDucumentCourseDatafiles.length > 0 ? supportDucumentCourseDatafiles[0].FileExtension: null) ,\r\n SupportDocumentCertificateFileData:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileData : null),\r\n SupportDocumentCertificateNomArchivo:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileName: null),\r\n SupportDocumentCertificateExtension:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileExtension: null) \r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n // getIDP(StartDateFilter,EndDateFilter);\r\n if (props.onSaved && typeof props.onSaved === 'function') {\r\n props.onSaved();\r\n }\r\n });\r\n }\r\n\r\n const onDownloadDocument = (file) => { \r\n const linkSource = `data:application/${file.FileExtension};base64,${file.FileData}`;\r\n const downloadLink = document.createElement(\"a\"); \r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${file.FileName}`;\r\n downloadLink.click();\r\n };\r\n\r\n const onHide = () => {\r\n setMotivoDeshacer(null); \r\n if (props.onHide && typeof props.onHide === 'function') {\r\n props.onHide();\r\n }\r\n };\r\n\r\n const formTemplate = (\r\n <>\r\n {\r\n ClaIDPEstatus===3||ClaIDPEstatus===4 ?\r\n (\r\n <>\r\n \r\n
\r\n \r\n )\r\n :\r\n ( <> )\r\n }\r\n \r\n
\r\n \r\n {t('hr:ManagerFeedback')}\r\n
\r\n {ComentariosRevisado} \r\n \r\n {t('hr:PlanCreatedby')} \r\n {IDPClase.NombreCompleto} \r\n {t('hr:On')} \r\n {moment(IDPClase.FechaCreacion).format(\"LL\")} \r\n {IDPClase.HoraCreacion} \r\n
\r\n \r\n \r\n {t('hr:LastUpdate')} \r\n {moment(IDPClase.FechaModificacion).format(\"LL\")}\r\n \r\n {IDPClase.HoraModificacion} \r\n
\r\n \r\n {t('hr:ThinkingBoard')}
\r\n \r\n{t('hr:ThinkingBoardMessage')}
\r\n \r\n{t('hr:TitleStep1')}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('hr:TitleStep2')}
\r\n \r\n \r\n
\r\n \r\n {t('hr:TitleStep3')}
\r\n \r\n \r\n onCompetenciaIDPChange(e.value)}\r\n label={t('hr:Competency')}\r\n errors={errors}\r\n disabled={EsDisabled}\r\n /> \r\n
\r\n \r\n {t('hr:TitleStep4')}
\r\n \r\n\r\n
\r\n {t('hr:DescriptionTargets')} \r\n \r\n \r\n {t('hr:AssignTarget')} \r\n {\r\n /*\r\n \r\n {t('hr:TitleStep5StartDate')} \r\n {t('hr:CompletionDate')} \r\n {t('hr:TitleStep5EstimateFinishDate')}\r\n\r\n */\r\n }\r\n
\r\n{t('hr:TitleStep6')}
\r\n \r\n\r\n onSelectEsDiscutirGerente(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\" \r\n errors={errors}\r\n disabled={EsDisabled}\r\n /> \r\n
\r\n \r\n \r\n {\r\n EsDiscutirGerente?(\r\n <> \r\n { EsDisabled ? (<>) :\r\n (\r\n {save()}}\r\n hidden={ClaIDPEstatus!==1 && ClaIDPEstatus!==4 && ClaIDPEstatus !== 0}\r\n />\r\n ) }\r\n {save()}}\r\n />\r\n
\r\n \r\n \r\n {t('hr:SendRevieLegend')} \r\n {moment(IDPClase.FechaEnviadoGerente).format(\"LL\")} \r\n {t('common:At')} \r\n {IDPClase.HoraEnviadoGerente} \r\n {t('common:By')} \r\n {IDPClase.NombreCompleto} \r\n
\r\n \r\n ):(\r\n <>\r\n \r\n {t('hr:SaveDraftLegend')}\r\n
\r\n \r\n )\r\n }\r\n \r\n {t('hr:TitleStep6Reviewed')}
\r\n\r\n {t('hr:TitleStep6ReviewedQuestion')}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n )\r\n :\r\n (\r\n <>\r\n \r\n
\r\n \r\n {t('hr:ManagerFeedback')}\r\n
\r\n {ComentariosRevisado} \r\n \r\n {t('hr:SendReviewedLegend')} \r\n {moment(IDPClase.FechaRevisado).format(\"LL\")} \r\n {t('common:At')} \r\n {IDPClase.HoraRevisado} \r\n {t('common:By')} \r\n {IDPClase.UsuarioReviso} \r\n
\r\n \r\n {t('hr:CommentsUndoAccepted')}
\r\n\r\n {MotivoDeshacer}\r\n
\r\n \r\n \r\n {t('hr:PlanCreatedby')} \r\n {IDPClase.NombreCompleto} \r\n {t('hr:On')} \r\n {moment(IDPClase.FechaCreacion).format(\"LL\")} \r\n {IDPClase.HoraCreacion} \r\n
\r\n \r\n \r\n {t('hr:LastUpdate')} \r\n {moment(IDPClase.FechaModificacion).format(\"LL\")}\r\n \r\n {IDPClase.HoraModificacion} \r\n
\r\n \r\n \r\n {t('hr:PlanCreatedby')} \r\n {IDPClase.NombreCompleto} \r\n {t('hr:On')} \r\n {moment(IDPClase.FechaCreacion).format(\"LL\")} \r\n {IDPClase.HoraCreacion} \r\n
\r\n \r\n \r\n {t('hr:LastUpdate')} \r\n {moment(IDPClase.FechaModificacion).format(\"LL\")}\r\n \r\n {IDPClase.HoraModificacion} \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n } \r\n {\r\n (\r\n (\r\n ClaIDPEstatus === idpStatus.DRAFT ||\r\n ClaIDPEstatus === idpStatus.PENDING_REVIEW \r\n ) &&\r\n (\r\n ComentariosRevisadoEmpleadoOriginal && ComentariosRevisadoEmpleadoOriginal !== ''\r\n )\r\n ) && (\r\n <>\r\n \r\n
\r\n \r\n {t('hr:ManagerFeedback')}\r\n
\r\n {ComentariosRevisado} \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('iDPV2:Step4ManagerEmployeeFeedback')}\r\n
\r\n {ComentariosRevisadoEmpleadoOriginal} \r\n \r\n {t('iDPV2:SelfReflection')} \r\n
\r\n\r\n \r\n {`${t('common:Instructions')}:`} \r\n \r\n {t('iDPV2:SelfReflectionInstructions')}\r\n
\r\n \r\n\r\n {`${t('common:Purpose')}:`}\r\n
\r\n\r\n {`${t('iDPV2:SelfReflectionPurpose')}:`} \r\n
\r\n \r\n\r\n \r\n {`${t('iDPV2:SelfReflectionPurposeOption1Title')}:`}\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption1Description')}\r\n
\r\n \r\n\r\n \r\n {`${t('iDPV2:SelfReflectionPurposeOption2Title')}:`}\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption2Description')}\r\n
\r\n \r\n\r\n \r\n {`${t('iDPV2:SelfReflectionPurposeOption3Title')}:`}\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption3Description')}\r\n
\r\n \r\n\r\n \r\n {`${t('iDPV2:SelfReflectionPurposeOption4Title')}:`}\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption4Description')}\r\n
\r\n \r\n\r\n \r\n {`${t('iDPV2:SelfReflectionPurposeOption5Title')}:`}\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption5Description')}\r\n
\r\n \r\n\r\n {t('iDPV2:SelfReflectionPurposeOption1Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption1Question1')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption1Question2')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption2Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption2Question1')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption2Question2')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption3Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption3Question1')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption3Question2')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption4Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption4Question1')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption4Question2')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:SelfReflectionPurposeOption5Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:SelfReflectionPurposeOption5Question1')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1HelpTitle')}\r\n
\r\n- \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help1')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help2')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help3')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help4')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help5')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help6')}\r\n \r\n
- \r\n {t('iDPV2:Step1SetYourGoalQuestion1Help7')}\r\n \r\n
\r\n {t('iDPV2:Step1SetYourGoalQuestion1aHelp1')} \r\n
\r\n \r\n );\r\n\r\n const step1Question1aSkillsTemplate = (\r\n <>\r\n\r\n {t('iDPV2:Step1SetYourGoalQuestion1aTitle')} \r\n
\r\n \r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1aDescription')}\r\n \r\n
\r\n \r\n {\r\n !EsDisabled && (\r\n \r\n {\r\n OpcionesIDPCompetencia.map((competence, index) => {\r\n return (\r\n <> \r\n \r\n
\r\n \r\n );\r\n\r\n const step1SetYourGoalSectionTemplate = (\r\n <>\r\n \r\n \r\n {`${3 - Step2SelectedCompetences.length} ${t('iDPV2:Step1SetYourGoalQuestion1aAvailable')}. ${limitOfSelectedCompetenciesReached()? t('iDPV2:Step1SetYourGoalQuestion1aLimitReached'): ''}`}\r\n
\r\n )\r\n } \r\n\r\n
\r\n \r\n ); \r\n })\r\n }\r\n \r\n {t('iDPV2:Step1SetYourGoal')}\r\n
\r\n\r\n \r\n {`${t('common:Instructions')}:`} \r\n \r\n {t('iDPV2:Step1SetYourGoalInstructions')}\r\n
\r\n \r\n\r\n {t('iDPV2:Step1SetYourGoalQuestion1Title')} \r\n
\r\n \r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1Description')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1bTitle')} \r\n
\r\n\r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1bStartDate')}\r\n \r\n
\r\n\r\n \r\n {t('iDPV2:Step1SetYourGoalQuestion1bEndDate')}\r\n \r\n
\r\n\r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion1HelpTitle')}\r\n
\r\n- \r\n
- \r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion1Help')}\r\n \r\n
\r\n onStep2ActionColumnChange(props, e.target.value, rowData)}\r\n disabled={EsDisabled || SelfReflectionPurposeID === idpSelfReflectionPurposeTypes.NOT_PARTICIPATE}\r\n placeholder={t('iDPV2:Step2DevelopmentActionStepsQuestion1Placeholder')}\r\n maxLength={250}\r\n errors={errors}\r\n /> \r\n
\r\n );\r\n }\r\n\r\n const step2LearningMethodColumnEditorTemplate = (props, rowData) => {\r\n rowData = props.rowData;\r\n return (\r\n \r\n onStep2LearningMethodColumnChange(props, e.value, e)} \r\n disabled={EsDisabled || SelfReflectionPurposeID === idpSelfReflectionPurposeTypes.NOT_PARTICIPATE}\r\n errors={errors}\r\n showClear={false}\r\n /> \r\n
\r\n );\r\n };\r\n\r\n const step2LearningMethodColumnTemplate = (rowData) => {\r\n let learningMethodName = ''; \r\n const learningMethodsFiltered = LearningMethods.filter((learningMethod) => {\r\n return (learningMethod.ClaMetodoAprendizaje === rowData.ClaMetodoAprendizaje);\r\n }); \r\n if (learningMethodsFiltered.length > 0) {\r\n learningMethodName = learningMethodsFiltered[0].NomMetodoAprendizaje;\r\n } else {\r\n learningMethodName = `- ${t('iDPV2:Step2DevelopmentActionStepsQuestion1PlaceholderLearningMethod')} -`\r\n } \r\n return (\r\n <>\r\n {learningMethodName}\r\n \r\n );\r\n };\r\n\r\n const step2ActionsColumnTemplate = (rowData) => {\r\n return (\r\n <> \r\n \r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion1Title')} \r\n
\r\n \r\n \r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion1Description')}\r\n \r\n
\r\n \r\n\r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion2Title')} \r\n
\r\n \r\n\r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion2WithoutDocument')}\r\n
\r\n \r\n )\r\n }\r\n \r\n )\r\n }\r\n \r\n );\r\n\r\n const step2Question3ActionCommentsTemplate = (\r\n <>\r\n\r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion3Title')}\r\n
\r\n\r\n \r\n {t('iDPV2:Step2DevelopmentActionStepsQuestion3Description')}\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n\r\n const step2FooterTemplate = (\r\n <>\r\n {\r\n ( \r\n (\r\n !EsJefeInmediato &&\r\n ClaIDPEstatus === idpStatus.IN_PROGRESS \r\n )\r\n ) && ( \r\n <>\r\n \r\n {t('iDPV2:Step2DevelopmentActionSteps')}\r\n
\r\n\r\n \r\n {`${t('common:Instructions')}:`} \r\n \r\n {t('iDPV2:Step2DevelopmentActionStepsInstructions')}\r\n
\r\n \r\n\r\n {t('iDPV2:Step3EmployeeReview')}\r\n
\r\n\r\n \r\n {`${t('common:Instructions')}:`} \r\n \r\n {t('iDPV2:Step3EmployeeReviewInstructions')}\r\n
\r\n \r\n\r\n {t('iDPV2:Step3EmployeeReviewQuestion1Title')}\r\n
\r\n\r\n \r\n {t('iDPV2:Step3EmployeeReviewQuestion1Description')}\r\n \r\n
\r\n \r\n\r\n {t('hr:SendRevieLegend')} \r\n {moment(IDPClase.FechaEnviadoGerente).format(\"LL\")} \r\n {t('common:At')} \r\n {IDPClase.HoraEnviadoGerente} \r\n {t('common:By')} \r\n {IDPClase.NombreCompleto} \r\n
\r\n \r\n \r\n {t('iDPV2:Step4ManagerReview')}\r\n
\r\n \r\n\r\n {t('iDPV2:Step4ManagerReviewQuestion1Title')}\r\n
\r\n \r\n\r\n \r\n {t('iDPV2:Step4ManagerReviewQuestion1Description')}\r\n \r\n
\r\n \r\n
\r\n \r\n ) \r\n } \r\n {\r\n (\r\n EsJefeInmediato &&\r\n ClaIDPEstatus=== idpStatus.PENDING_REVIEW \r\n ) &&\r\n (\r\n <>\r\n \r\n
\r\n \r\n {t('iDPV2:Step4ManagerManagerFeedback')}\r\n
\r\n {ComentariosRevisado} \r\n \r\n {t('hr:SendReviewedLegend')} \r\n {moment(IDPClase.FechaRevisado).format(\"LL\")} \r\n {t('common:At')} \r\n {IDPClase.HoraRevisado} \r\n {t('common:By')} \r\n {IDPClase.UsuarioReviso} \r\n
\r\n \r\n {t('hr:CommentsUndoAccepted')}
\r\n\r\n {MotivoDeshacer}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('iDPV2:Step4ManagerEmployeeFeedback')}\r\n
\r\n {ComentariosRevisadoEmpleadoOriginal} \r\n \r\n \r\n {t('iDPV2:Step5CloseOutIDPQuestion1Description')}\r\n \r\n
\r\n \r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion1NoIndicateReason')}\r\n
\r\n\r\n {t('common:Pending')}\r\n
\r\n )\r\n } \r\n {\r\n Step5GoalCompleted === true && (\r\n\r\n {`${t('common:Yes')} (${moment(Step5GoalCompletedDate).format('LL')})`}\r\n
\r\n )\r\n }\r\n { \r\n Step5GoalCompleted === false && (\r\n <>\r\n\r\n {t('common:No')}\r\n
\r\n \r\n {t('iDPV2:Step5CloseOutIDPQuestion1NoReason')}\r\n \r\n\r\n {IDPClase.NomRazonNoCompletado}\r\n
\r\n \r\n ) \r\n }\r\n \r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion1Title')}\r\n
\r\n \r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion2Title')} \r\n
\r\n \r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion2Upload')}\r\n
\r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion2WithoutDocument')}\r\n
\r\n \r\n )\r\n }\r\n \r\n )\r\n }\r\n \r\n );\r\n\r\n const step5Question3HelpDialogBodyTemplate = (\r\n <>\r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion3HelpTitle')}\r\n
\r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion3Help1')}\r\n
\r\n \r\n );\r\n\r\n const step5Question3LessonsLearnedEditTemplate = (\r\n <>\r\n\r\n {t('iDPV2:Step5CloseOutIDPQuestion3Title')} \r\n
\r\n \r\n \r\n {t('iDPV2:Step5CloseOutIDPQuestion3Description')}\r\n \r\n
\r\n \r\n\r\n {t('iDPV2:Step5CloseOutIDP')}\r\n
\r\n\r\n \r\n {`${t('common:Instructions')}:`} \r\n \r\n {t('iDPV2:Step5CloseOutInstructions')}\r\n
\r\n \r\n\r\n {t('hr:IndividualDevelopmentPlan')}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n} \r\n \r\nconst renderNumericValue = (value) => { \r\n return (<>{ value === null ? '' : value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })});\r\n}\r\n\r\nconst NomMesRender = (row) => {\r\n /* 1 RED\r\n 2 YELLOW\r\n 3 GREEN\r\n */\r\n return (\r\n <>\r\n \r\n {row.NomMes}\r\n \r\n);\r\n} \r\n\r\nconst onViewDetailIDPClick = (item) => { \r\n console.log('onViewDetailIDPClick',item)\r\n setIdIDP(item.IdIDP);\r\n setIDPStatusName(item.Estatus)\r\n setIDPVersion(item.Version);\r\n setClaUsuarioOwner(item.ClaUsuario);\r\n setShowDetail(true);\r\n}\r\n\r\n\r\nconst goalTableColumnTemplate = (rowData) => { \r\n return (\r\n \r\n
\r\n { \r\n product.ClaIndicador !== null ?\r\n (\r\n \r\n {product.NomIndicador}\r\n
\r\n \r\n {\r\n product.ClaIndicador === null ?\r\n (\r\n <> \r\n
\r\n \r\n {product.NomTipoIndocador} \r\n
\r\n \r\n ):\r\n (\r\n <>\r\n \r\n {(product.PromedioCalificacion*100.0).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 1 })} \r\n
\r\n \r\n {product.NomTipoIndocador} \r\n
\r\n \r\n)\r\n } \r\n \r\n {\r\n typeof(product.DetalleResultado) !== 'undefined' && product.DetalleResultado.map((element, index) => { \r\n return ( \r\n
\r\n \r\n )\r\n })\r\n } \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n color=\"#9cc1f9\"\r\n >\r\n \r\n onViewDetailClick(product)}> View More
)\r\n :\r\n (<>)\r\n }\r\n \r\n \r\n { moment(rowData.FechaRevisado).format('MM/DD/YYYY h:mm a') }\r\n
\r\n \r\n );\r\n}\r\n\r\nconst AccionesTemplate = (row) => {\r\n let className = '';\r\n switch(true) {\r\n case row.Porcentaje<50:\r\n className = \"danger-color\";\r\n break;\r\n case row.Porcentaje<75:\r\n className = \"orange-color\";\r\n break;\r\n case row.Porcentaje<99:\r\n className = \"warning-color\";\r\n break;\r\n case row.Porcentaje===100:\r\n className = \"success-color\";\r\n break;\r\n default:\r\n className = \"default-color\";\r\n }\r\n return (\r\n <>\r\n {\r\n row.ClaIDPEstatus !== idpStatus.ACCEPTED && (\r\n <>\r\n \r\n \r\n {row.AccionesTerminada} \r\n {t('hr:Of')} \r\n {row.Acciones} \r\n {t('hr:Activities')} \r\n \r\n
\r\n \r\n
\r\n \r\n ) \r\n }\r\n \r\n );\r\n}\r\nconst onHideIDPDetail = () => {\r\n setShowDetail(false);\r\n};\r\n\r\nconst detailIDPDialogTemplate = (\r\n <>\r\n {t('hr:ScoreCardPeriodClosed')}
\r\n \r\n\r\n {t('hr:ScoreCardSummaryBeforeReviewed')} { moment(Encabezado.FechaIniciaEmployeeSelfReview).format(\"LL\") } - { moment(Encabezado.FechaTerminaEmployeeSelfReview).format(\"LL\") }.\r\n
\r\n ) : (\r\n{t('hr:ThanksPortionAnnualReviewPrework')} \r\n {\r\n /* \r\n {t('hr:ScoreCardSummaryAfterReviewed')} { moment(fechaIniciaAnnualReview).format(\"LL\") } \r\n */\r\n }\r\n .\r\n
\r\n ) \r\n \r\n : \r\n estatusContribucionReview === 0 ? (\r\n\r\n {t('hr:ScoreCardSummaryBeforeSubmitManager')} {NombreUsuario} .\r\n
\r\n ) :{t('hr:ScoreCardSummaryAfterSubmitManager')} {NombreUsuario} .
\r\n }\r\n\r\n
\r\n \r\n {t('hr:IndividualDevelopmentPlan')}
\r\n\r\n {t('hr:ScoreCardReview')}\r\n \r\n {\r\n esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n
\r\n \r\n {t('hr:ScorecardReviewed')} \r\n
\r\n ) : (\r\n \r\n {t('hr:ScorecardReviewed')} \r\n
\r\n ) \r\n } \r\n \r\n \r\n\r\n \r\n {t('hr:ScoreCardReview')}\r\n \r\n {\r\n esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n
\r\n \r\n {t('hr:ScorecardReviewed')} \r\n
\r\n ) : (\r\n \r\n {t('hr:ScorecardReviewed')} \r\n
\r\n ) \r\n } \r\n \r\n \r\n
\r\n \r\n {t('hr:ScoreCard')}
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {\r\n esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n \r\n
\r\n ) : \r\n } \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('hr:ActionPlans')}
\r\n\r\n {\r\n CardScorecardResultadosTemplate({ \r\n \"ClaIndicador\": null\r\n ,\"ClaTipoIndicador\": null\r\n ,\"ClaveIndicador\" : null\r\n ,\"NomTipoIndocador\" : \"AP\"\r\n ,\"NomIndicador\" : null\r\n ,\"NivelIndicador\": `${ScoreCardSummaryInfo.ActionPlansNivel}`\r\n ,\"DetalleResultado\": ActionPlansResultDet \r\n ,\"PromedioCalificacion\": null \r\n }) \r\n } \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {\r\n esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n \r\n
\r\n ) : \r\n } \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('hr:ProjectActivities')}
\r\n\r\n {\r\n CardScorecardResultadosTemplate({ \r\n \"ClaIndicador\": null\r\n ,\"ClaTipoIndicador\": null\r\n ,\"ClaveIndicador\" : null\r\n ,\"NomTipoIndocador\" : \"PA\"\r\n ,\"NomIndicador\" : null\r\n ,\"NivelIndicador\": `${ScoreCardSummaryInfo.ProjectActivitiesNivel}`\r\n ,\"DetalleResultado\": ProjectActivitiesResultDet\r\n }) \r\n } \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {\r\n esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n \r\n
\r\n ) : \r\n } \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const onConfirmSubmit = async () => {\r\n const value = {\r\n selfReviewFeedback,\r\n SelfReviewCriteria,\r\n EmpleadoDesempenioEntregablesAnioRevision,\r\n EmpleadoDesempenioMejorasSiguienteAnio\r\n };\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) {\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n setErrors(validator.errors);\r\n return;\r\n }\r\n swal({\r\n buttons: {\r\n cancelar: {\r\n text: 'Cancel',\r\n value: 'cancel',\r\n className: 'rounded-button danger',\r\n },\r\n continuar: {\r\n text: 'Continue',\r\n value: 'continue',\r\n className: 'rounded-button light-green',\r\n },\r\n },\r\n content: confirmationMessageHTML,\r\n }).then((value) => {\r\n switch (value) {\r\n case 'continue':\r\n // run function\r\n onSubmit();\r\n break;\r\n default:\r\n break;\r\n }\r\n });\r\n };\r\n\r\n const onSave = () => {\r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio: defaultAnio,\r\n ClaUsuarioPerformanceDev: defaultClaUsuario,\r\n ComentariosEmployeeSelfReview: Comentarios,\r\n PerformanceDevQuestionarioResuelto: selfReviewFeedback,\r\n EstatusEmployeeSelfReview: 0,\r\n PerformanceDevCriterioCalificacion: SelfReviewCriteria,\r\n EmpleadoDesempenioEntregablesAnioRevision,\r\n EmpleadoDesempenioMejorasSiguienteAnio\r\n };\r\n const SaveEmployeeSelfReview = `${config.UrlApiProject}HR/SaveEmployeeSelfReview`;\r\n callApi(SaveEmployeeSelfReview, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadEmployeeSelfReview();\r\n });\r\n };\r\n\r\n const onUpdateClick = async () => {\r\n const value = {\r\n Comentarios,\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeComentarios);\r\n const esValido = await validator.validate(value);\r\n\r\n console.log(validator.errors);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n return;\r\n }\r\n\r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio: defaultAnio,\r\n ClaUsuarioPerformanceDev: defaultClaUsuario,\r\n ComentariosEmployeeSelfReview: Comentarios,\r\n };\r\n\r\n const SaveEmployeeSelfReview = `${config.UrlApiProject}HR/UpdateEmployeeSelfReviewComments`;\r\n\r\n callApi(SaveEmployeeSelfReview, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadEmployeeSelfReview();\r\n });\r\n };\r\n\r\n const onSubmit = async () => {\r\n const value = {\r\n selfReviewFeedback,\r\n SelfReviewCriteria,\r\n EmpleadoDesempenioEntregablesAnioRevision,\r\n EmpleadoDesempenioMejorasSiguienteAnio\r\n\r\n };\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) {\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n setErrors(validator.errors);\r\n return;\r\n }\r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio: defaultAnio,\r\n ClaUsuarioPerformanceDev: defaultClaUsuario,\r\n ComentariosEmployeeSelfReview: Comentarios,\r\n PerformanceDevQuestionarioResuelto: selfReviewFeedback,\r\n EstatusEmployeeSelfReview: 1,\r\n PerformanceDevCriterioCalificacion: SelfReviewCriteria,\r\n EmpleadoDesempenioEntregablesAnioRevision,\r\n EmpleadoDesempenioMejorasSiguienteAnio\r\n };\r\n\r\n const SaveEmployeeSelfReview = `${config.UrlApiProject}HR/SaveEmployeeSelfReview`;\r\n\r\n callApi(SaveEmployeeSelfReview, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadEmployeeSelfReview();\r\n });\r\n };\r\n\r\n if (!esInformacionDisponible) {\r\n return (\r\n <>\r\n \r\n {t('hr:SubmitResponseConfirmation')}. {t('common:ThanksParticipation')}\r\n
\r\n {t('hr:SelftReviewPeriodClosed')}
\r\n \r\n{t('hr:EmployeeSelfReviewInstructionsBeforeSubmitManager')}
\r\n \r\n\r\n onCalificacionEmpleadoByChange(props, e.target.value, rowData)} \r\n /> \r\n
\r\n \r\n );\r\n }\r\n \r\nconst onCalificacionEmpleadoByChange = (props, value ) => { \r\n const updatedRows = [...SelfReviewCriteria];\r\n updatedRows[props.rowIndex].CalificacionEmpleado = value;\r\n updatedRows[props.rowIndex].errors = null;\r\n const newErrors = { ...errors };\r\n const fieldKey = `SelfReviewCriteria[${props.rowIndex}]`;\r\n if (value) {\r\n if (newErrors[fieldKey]) {\r\n delete newErrors[fieldKey].CalificacionEmpleado; \r\n if (Object.keys(newErrors[fieldKey]).length === 0) {\r\n delete newErrors[fieldKey];\r\n }\r\n }\r\n } else { \r\n if (!newErrors[fieldKey]) {\r\n newErrors[fieldKey] = {};\r\n }\r\n newErrors[fieldKey].CalificacionEmpleado = null;\r\n }\r\n setErrors(newErrors);\r\n setSelfReviewCriteria(updatedRows); \r\n setAvgTotal(obtienePromedio(updatedRows));\r\n \r\n}; \r\n\r\nfunction obtienePromedio(lSelfReviewCriteria) {\r\n const calificaciones = lSelfReviewCriteria\r\n .map(row => row.CalificacionEmpleado)\r\n .filter(val => val !== null && val !== undefined && !isNaN(val));\r\n\r\n if (calificaciones.length === 0) {\r\n return 0; \r\n }\r\n const nAvgTotal = calificaciones.reduce((acc, curr) => acc + curr, 0) / calificaciones.length;\r\n const roundedAvgTotal = parseFloat(nAvgTotal.toFixed(2));\r\n return roundedAvgTotal;\r\n}\r\n\r\n \r\nconst TituloDescripcionCriterioTemplate = (row) => { \r\n \r\n\r\n return (\r\n <>\r\n {row.TituloCriterio}
\r\n {row.DescripcionCiterio}
\r\n \r\n)\r\n}\r\n\r\n\r\n\r\n return (\r\n <>\r\n \r\n {defaultAnio > 2021 ? (\r\n <>\r\n \r\n {t('hr:EmployeeSelfReviewInstructionsBeforeSubmit')}{' '}\r\n \r\n {' '}\r\n {moment(fechaIniciaEmployeeSelfReview).format('LL')} -{' '}\r\n {moment(fechaTerminaEmployeeSelfReview).format('LL')}\r\n \r\n .\r\n
\r\n ) : (\r\n\r\n \r\n {t('hr:ThanksPortionAnnualReviewPrework')}\r\n {' '}\r\n {\r\n /*\r\n {t('hr:EmployeeSelfReviewInstructionsAfterSubmit')}{' '}\r\n \r\n {' '}\r\n {moment(fechaIniciaAnnualReview).format('LL')}{' '}\r\n \r\n */\r\n }\r\n \r\n .\r\n
\r\n )\r\n ) : estatusEmployeeSelfReview === 0 ? (\r\n{t('hr:EmployeeSelfReviewInstructionsBeforeSubmitManager')}.
\r\n ) : (\r\n{t('hr:EmployeeSelfReviewInstructionsAfterSubmitManager')}.
\r\n )}\r\n\r\n
\r\n \r\n {t('hr:EmployeePerformanceRating')}
\r\n\r\n
\r\n \r\n {t('hr:PerformanceRatingScale')}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {index > 0 ?
\r\n );\r\n })}\r\n {EsVersionSoloLectura || EstatusAnnualReview === 1 ? (\r\n <>\r\n ) : (\r\n \r\n \r\n
\r\n \r\n {estatusEmployeeSelfReview === 1 ||\r\n esTienePermisoEdicion === false ||\r\n EsVersionSoloLectura === true ||\r\n EstatusAnnualReview === 1 ? (\r\n <>\r\n \r\n \r\n ) : (\r\n <>\r\n
\r\n \r\n {\r\n onChangeRespuesta(e, index);\r\n }}\r\n errors={errors[`selfReviewFeedback[${index}]`]}\r\n />\r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n {esTienePermisoEdicion &&\r\n EsDesactivaUpdateButton === 0 &&\r\n EsVersionSoloLectura === false &&\r\n EstatusAnnualReview === 0 ? (\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n {EsVersionSoloLectura || EstatusAnnualReview === 1 ? (\r\n <>\r\n ) : (\r\n \r\n
\r\n )\r\n \r\n \r\n \r\n const onConfirmSubmit = async () => { \r\n const value = {\r\n selfReviewFeedback,\r\n SelfReviewCriteria,\r\n EmpleadoDesempenioAreasOportunidad\r\n }\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n setErrors(validator.errors); \r\n return;\r\n }\r\n \r\n\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n onSubmit();\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n\r\n }\r\n \r\n\r\n const onSave = () => { \r\n \r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio : defaultAnio\r\n ,ClaUsuarioPerformanceDev : defaultClaUsuario \r\n ,ComentariosManagerReview: Comentarios \r\n ,PerformanceDevQuestionarioResuelto:selfReviewFeedback \r\n ,EstatusManagerReview: 0\r\n ,ClaPotentialPerformance\r\n ,PerformanceDevCriterioCalificacion: SelfReviewCriteria\r\n ,EmpleadoDesempenioAreasOportunidad\r\n }; \r\n \r\n const SaveManagerReview = `${config.UrlApiProject}HR/SaveManagerReview`;\r\n\r\n callApi(SaveManagerReview, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadManagerReview(); \r\n }); \r\n }\r\n \r\n const onUpdateClick = async () => { \r\n \r\n const value = {\r\n Comentarios \r\n }\r\n\r\n const validator = new YupValidator(valitationSchemeComentarios);\r\n const esValido = await validator.validate(value);\r\n \r\n console.log(validator.errors);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n }\r\n \r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio : defaultAnio\r\n ,ClaUsuarioPerformanceDev : defaultClaUsuario \r\n ,ComentariosManagerReview: Comentarios \r\n }; \r\n \r\n\r\n const SaveManagerReview = `${config.UrlApiProject}HR/UpdateManagerReviewComments`;\r\n \r\n callApi(SaveManagerReview, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadManagerReview(); \r\n }); \r\n }\r\n\r\n const onChangeClaPotentialPerformance = (value) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.ClaPotentialPerformance; \r\n setErrors(newErrors)\r\n setClaPotentialPerformance(value)\r\n } \r\n \r\n const onSubmit = async () => { \r\n \r\n const value = {\r\n selfReviewFeedback,\r\n SelfReviewCriteria,\r\n EmpleadoDesempenioAreasOportunidad\r\n // ,ClaPotentialPerformance \r\n }\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n setErrors(validator.errors); \r\n return;\r\n }\r\n \r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio : defaultAnio\r\n ,ClaUsuarioPerformanceDev : defaultClaUsuario \r\n ,ComentariosManagerReview: Comentarios \r\n ,PerformanceDevQuestionarioResuelto:selfReviewFeedback \r\n ,EstatusManagerReview: 1\r\n ,ClaPotentialPerformance\r\n ,PerformanceDevCriterioCalificacion: SelfReviewCriteria\r\n ,EmpleadoDesempenioAreasOportunidad\r\n }; \r\n \r\n const SaveManagerReview = `${config.UrlApiProject}HR/SaveManagerReview`;\r\n\r\n callApi(SaveManagerReview, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadManagerReview(); \r\n }); \r\n }\r\n\r\n const fieldsRequired = (rowData) => { \r\n return (\r\n <>\r\n {errors[`SelfReviewCriteria[${rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n } \r\n\r\n const calificacionManagerByEditor = (props, rowData) => {\r\n return (\r\n {t('hr:SubmitResponseConfirmation')}. {t('common:ThanksParticipation')}
\r\n \r\n onCalificacionManagerByChange(props, e.target.value, rowData)}\r\n /> \r\n
\r\n \r\n );\r\n }\r\n \r\n const onCalificacionManagerByChange = (props, value ) => { \r\n const updatedRows = [...SelfReviewCriteria];\r\n updatedRows[props.rowIndex].CalificacionManager = value;\r\n\r\n updatedRows[props.rowIndex].errors = null;\r\n const newErrors = { ...errors };\r\n const fieldKey = `SelfReviewCriteria[${props.rowIndex}]`;\r\n if (value) {\r\n if (newErrors[fieldKey]) {\r\n delete newErrors[fieldKey].CalificacionManager; \r\n if (Object.keys(newErrors[fieldKey]).length === 0) {\r\n delete newErrors[fieldKey];\r\n }\r\n }\r\n } else { \r\n if (!newErrors[fieldKey]) {\r\n newErrors[fieldKey] = {};\r\n }\r\n newErrors[fieldKey].CalificacionManager = null;\r\n }\r\n setErrors(newErrors);\r\n setSelfReviewCriteria(updatedRows); \r\n setAvgTotal(obtienePromedio(updatedRows));\r\n }; \r\n\r\n \r\n\r\n function obtienePromedio(lSelfReviewCriteria) {\r\n const calificaciones = lSelfReviewCriteria\r\n .map(row => row.CalificacionManager)\r\n .filter(val => val !== null && val !== undefined && !isNaN(val));\r\n \r\n if (calificaciones.length === 0) {\r\n return 0; \r\n }\r\n const nAvgTotal = calificaciones.reduce((acc, curr) => acc + curr, 0) / calificaciones.length;\r\n const roundedAvgTotal = parseFloat(nAvgTotal.toFixed(2));\r\n return roundedAvgTotal;\r\n }\r\n\r\n const onChangeEmpleadoDesempenioAreasOportunidad = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.EmpleadoDesempenioAreasOportunidad;\r\n setErrors(newErrors);\r\n setEmpleadoDesempenioAreasOportunidad(e.target.value);\r\n };\r\n\r\n if(!esInformacionDisponible){\r\n return (\r\n <>\r\n {t('hr:ManagerReviewPeriodClosed')}
\r\n \r\n{t('hr:ManagerReviewInstructionsBeforeSubmitManager')}
\r\n \r\n{row.TituloCriterio}
\r\n {row.DescripcionCiterio}
\r\n \r\n )\r\n }\r\n\r\n\r\n\r\n\r\n return (\r\n <> \r\n {EsVersionSoloLectura?<>: (\r\n \r\n {t('hr:ManagerReviewInstructionsBeforeSubmit')} { moment(Encabezado.FechaIniciaManagerReview).format(\"LL\") } - { moment(Encabezado.FechaTerminaManagerReview).format(\"LL\") }.\r\n
\r\n ) : \r\n{t('hr:ManagerReviewInstructionsAfterSubmit')}.
\r\n \r\n : \r\n estatusManagerReview === 0 ? (\r\n\r\n {t('hr:ManagerReviewInstructionsBeforeSubmitManager')}.\r\n
\r\n ) :{t('hr:ManagerReviewInstructionsAfterSubmitManager')}.
\r\n }\r\n\r\n
\r\n \r\n {t('hr:ManagerPerformanceRating')}
\r\n\r\n
\r\n \r\n {t('hr:PerformanceRatingScale')}
\r\n\r\n
\r\n \r\n \r\n
\r\n {estatusManagerReview === 1 || esTienePermisoEdicion === false || EsVersionSoloLectura === true ? (\r\n <> \r\n \r\n \r\n )\r\n : (\r\n <>\r\n \r\n
\r\n \r\n )} \r\n \r\n The 9-Box is a tool that is widely used to capture current perceptions related to employee development. The factors that are being considered are perceived performance and professional growth potential. We are implementing this tool to help managers guide performance and development conversations.
\r\nInstructions: Please take some time and read the descriptions below to see which one aligns most closely with this employee. Once you have made your decision, please select the number that correlates with the description. Use this description as a guide for suggesting development actions to this employee in the questions below. There are more examples in the Manager Guide if needed.
\r\n\r\n \r\n \r\n
\r\n \r\n onChangeClaPotentialPerformance(e.value)} \r\n errors={errors}\r\n disabled={EsVersionSoloLectura||estatusManagerReview}\r\n /> \r\n
\r\n\r\n \r\n
\r\n \r\n Key
\r\n 9 - Consistently surpasses performance expectations and is successful in their role. Displays outstanding leadership, strategic thinking and problem-solving skills. Goes the extra mile to make the company successful and exhibits big picture thinking.
\r\n8 - Exceeds performance expectations and works with less effort than required. Is proactive and expresses a solid willingness to learn and grow. Shows high motivation to be the expert in their field.
\r\n7 - Reliable performance (results/quality of work) and displays independence, adaptability, and initiative. Is proactive and expresses an exceptional willingness to grow and advance. Goes the extra mile to improve processes and drive innovation.
\r\n6 - Exceeds performance expectations (results/quality of work) and works with less effort. Shows motivation to excel in their current role and are comfortable maintaining their acquired expertise.
\r\n5 - Reliable performance (results/quality of work) and shows work effort as expected. Is proactive and expresses a solid willingness to learn and grow. Occasionally goes above and beyond what is expected of them to improve processes.
\r\n4 - Has not achieved the performance expected for their role but shows extra effort to reach the expected performance. Is proactive and expresses a strong willingness to learn, grow and excel in their career.
\r\n3 - Meets performance expectations (results/quality of work) and shows work effort as expected. Does not express the willingness or motivation to improve or grow professionally.
\r\n2 - Shows inconsistent performance (results/quality of work) and must work hard to achieve results. Must frequently check with manager for direction. Expresses a willingness to learn, grow and improve but has not created a definitive plan yet.
\r\n1 – Consistently performs below expectations (results/quality of work) and must work extra hard to achieve minimum satisfactory results. Must constantly check with manager to be sure work is performed as expected. Does not express a willingness to learn, grow and improve.
\r\n\r\n { index > 0 ?
\r\n );\r\n })} \r\n \r\n \r\n { EsVersionSoloLectura || EstatusAnnualReview === 1 ? <> : (\r\n \r\n \r\n
\r\n \r\n {estatusManagerReview === 1 || esTienePermisoEdicion === false || EsVersionSoloLectura === true ? (\r\n <> \r\n \r\n \r\n )\r\n : (\r\n <>\r\n
\r\n \r\n { onChangeRespuesta(e, index)}} \r\n errors={errors[`selfReviewFeedback[${index}]`]}\r\n /> \r\n
\r\n \r\n )} \r\n \r\n \r\n { estatusManagerReview === 0 ?
\r\n )}\r\n \r\n \r\n
\r\n {esTienePermisoEdicion && EsDesactivaUpdateButton === 0 && EsVersionSoloLectura === false && EstatusAnnualReview === 0 ? (\r\n \r\n
\r\n ) : }\r\n { EsVersionSoloLectura || EstatusAnnualReview === 1 ? <> : (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n);\r\n }\r\n\r\n const renderHeader = () => {\r\n return (\r\n <> \r\n \r\n {\r\n typeof(value) !== 'undefined' \r\n ? 
\r\n : <>\r\n }\r\n \r\n
\r\n \r\n {t('hr:TitleEnterSignature')}\r\n
\r\n \r\n );\r\n }\r\n \r\n const renderFooter = () => {\r\n return (\r\n <> \r\n \r\n {t('hr:TypeSignature')} \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\n const valitationSchemeFirma = yup.object().shape({\r\n firma: yup.string().trim().required(t('common:RequiredField')).nullable()\r\n }); \r\n\r\n const onSign = async () => { \r\n \r\n const value = {\r\n firma \r\n }\r\n\r\n const validator = new YupValidator(valitationSchemeFirma);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n } \r\n \r\n // iniciamos cargando\r\n showLoad();\r\n\r\n htmlToImage.toPng(divRef.current)\r\n .then((dataUrl) => { \r\n setEsShowKeyboardOption(false);\r\n if (typeof(onChange) === 'function')\r\n {\r\n onChange(dataUrl.replace('data:image/png;base64,',''));\r\n setImgFirma(dataUrl);\r\n }\r\n hideLoad();\r\n })\r\n .catch((error) => {\r\n \r\n });\r\n \r\n\r\n }\r\n\r\n const onChangeFirma = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.firma; \r\n setErrors(newErrors) \r\n setFirma(e.target.value)\r\n }\r\n \r\n\r\n\r\n \r\n return ( \r\n <> \r\n \r\n { imgFirma === '' ?\r\n (\r\n
\r\n \r\n \r\n )\r\n} \r\n\r\nexport default Signature; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React from 'react'; \r\nimport { Password } from 'primereact/password'; \r\n\r\nconst FieldPassword = (props) => {\r\n\r\n const onChange = (value) => { \r\n if (props.onChange !== null && props.onChange !== undefined){\r\n props.onChange(value);\r\n } \r\n } \r\n const onBlur = (value) => { \r\n if (props.onBlur !== null && props.onBlur !== undefined){\r\n props.onBlur(value);\r\n } \r\n } \r\n const onKeyDown = (value) => { \r\n if (props.onKeyDown !== null && props.onKeyDown !== undefined){\r\n props.onKeyDown(value);\r\n } \r\n } \r\n const onClick = () => { \r\n if (props.onClick !== null && props.onClick !== undefined){\r\n props.onClick(); \r\n } \r\n } \r\n\r\n const isFormFieldInValid = (name) => !!(typeof(props.errors) !== 'undefined' && props.errors !== null && props.errors[name]);\r\n \r\n const getFormErrorMessage = (name) => { \r\n return isFormFieldInValid(name) && {props.errors[name].message};\r\n };\r\n\r\n\r\n \r\n return ( \r\n <> \r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n) }\r\n \r\n \r\n
\r\n Clear
\r\n setEsShowKeyboardOption(true)}>{t('hr:EnterSignature')}
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst onConfirmSubmit = async () => { \r\n const value = {\r\n SelfReviewCriteria,\r\n CompromisosSiguienteAnioReview,\r\n ComentariosCalificacionDesempenioFinal,\r\n IDPSiguienteAnioObjetivos\r\n }\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n \r\n if (!esValido){ \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n setErrors(validator.errors); \r\n return;\r\n }\r\n\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n onSubmit();\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n\r\n}\r\n\r\nconst valitationScheme = yup.object().shape({\r\n SelfReviewCriteria: (\r\n defaultAnio>=defaultAnioCriteria\r\n ? yup.array().of(\r\n yup.object().shape({\r\n CalificacionFinal: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n })\r\n )\r\n : yup.array().of(\r\n yup.object().shape({\r\n CalificacionFinal: yup.mixed().nullable(),\r\n })\r\n )\r\n ),\r\n CompromisosSiguienteAnioReview: yup.string().trim().nullable()\r\n .when([], {\r\n is: () => defaultAnio >= defaultAnioCriteria,\r\n then: schema => schema.required(t('common:RequiredField'))\r\n }),\r\n ComentariosCalificacionDesempenioFinal: yup.string().trim().nullable()\r\n .when([], {\r\n is: () => defaultAnio >= defaultAnioCriteria,\r\n then: schema => schema.required(t('common:RequiredField'))\r\n }),\r\n IDPSiguienteAnioObjetivos: yup.string().trim().nullable()\r\n .when([], {\r\n is: () => defaultAnio >= defaultAnioCriteria,\r\n then: schema => schema.required(t('common:RequiredField'))\r\n })\r\n}); \r\n\r\n\r\nconst onSubmit = async () => { \r\n /* \r\n validamos la informacion requerida antes de hacer el submit\r\n */\r\n \r\n\r\n if (props.Anio === '2021') { \r\n if (!EsContribucionRevisado || !EsManagerReviewRevisado || !EsEmployeeSelfReviewRevisado)\r\n {\r\n showSweetAlert(t('common:Oops'), t('hr:ReviewedRequired'), 'warning');\r\n return;\r\n }\r\n \r\n }\r\n else if (!EsManagerReviewRevisado || !EsEmployeeSelfReviewRevisado)\r\n {\r\n showSweetAlert(t('common:Oops'), t('hr:ReviewedRequired'), 'warning');\r\n return;\r\n }\r\n \r\n if (EmployeeSignature === null || ManagerSignature === null) { \r\n showSweetAlert(t('common:Oops'), t('hr:SignaturesRequired'), 'warning');\r\n return;\r\n } \r\n\r\n if (EmployeePasswordValid === false || ManagerPasswordValid === false) { \r\n showSweetAlert(t('common:Oops'), t('hr:PasswordConfirmationRequired'), 'warning');\r\n return;\r\n } \r\n \r\n const paramsService = {\r\n IdPerformanceDev: idPerformanceDev,\r\n Anio : defaultAnio\r\n ,ClaUsuarioPerformanceDev : defaultClaUsuario \r\n ,EsContribucionRevisado : EsContribucionRevisado || props.Anio !== '2021' ? 1:0\r\n ,EsManagerReviewRevisado : EsManagerReviewRevisado ? 1:0\r\n ,EsEmployeeSelfReviewRevisado : EsEmployeeSelfReviewRevisado ? 1:0\r\n ,ComentariosAnnualReview\r\n ,CompromisosSiguienteAnioReview\r\n ,FirmaEmpleado : EmployeeSignature\r\n ,FirmaJefeDirecto : ManagerSignature\r\n ,EstatusAnnualReview: 1\r\n ,PerformanceDevCriterioCalificacion: SelfReviewCriteria\r\n ,ComentariosCalificacionDesempenioFinal\r\n ,IDPSiguienteAnioObjetivos\r\n }; \r\n\r\n const SubmitAnnualReview = `${config.UrlApiProject}HR/SubmitAnnualReview`;\r\n\r\n callApi(SubmitAnnualReview, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n loadAnnualReview(); \r\n }); \r\n}\r\n\r\nconst confirmationMessageHTML = (\r\n \r\n \r\n \r\n \r\n \r\n {options.props.header}\r\n \r\n
\r\n \r\n {t('hr:Reviewed')} \r\n {tipo===1 ?
\r\n \r\n
\r\n )\r\n\r\n const onChangeEmployeePassword = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.EmployeePassword; \r\n setErrors(newErrors) \r\n setEmployeePassword(e.target.value)\r\n}\r\n\r\nconst onChangeManagerPassword = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ManagerPassword; \r\n setErrors(newErrors) \r\n setManagerPassword(e.target.value)\r\n}\r\n\r\nconst valitationSchemeEmployeePassword = yup.object().shape({\r\n EmployeePassword: yup.string().trim().required(t('common:RequiredField')).nullable()\r\n}); \r\n\r\nconst valitationSchemeManagerPassword = yup.object().shape({\r\n ManagerPassword: yup.string().trim().required(t('common:RequiredField')).nullable()\r\n}); \r\n\r\n\r\nconst onConfirmEmployeePassword = async () => {\r\n \r\n const value = {\r\n EmployeePassword \r\n }\r\n\r\n const validator = new YupValidator(valitationSchemeEmployeePassword);\r\n const esValido = await validator.validate(value);\r\n \r\n\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n }\r\n\r\n const urlWebService = `${config.UrlLoginServer}/authenticate`;\r\n\r\n const data = {\r\n username: EmployeeLoginName,\r\n password: EmployeePassword,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', data, (res) => {\r\n if (!res.token) {\r\n showSweetAlert('Error', res.mensaje, 'error');\r\n } else { \r\n setEmployeePasswordValid(true);\r\n }\r\n });\r\n \r\n}\r\n \r\nconst onConfirmManagerPassword = async () => {\r\n \r\n const value = {\r\n ManagerPassword \r\n }\r\n \r\n const validator = new YupValidator(valitationSchemeManagerPassword);\r\n const esValido = await validator.validate(value);\r\n \r\n \r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n return;\r\n }\r\n \r\n const urlWebService = `${config.UrlLoginServer}/authenticate`;\r\n\r\n const data = {\r\n username: ManagerLoginName,\r\n password: ManagerPassword,\r\n }; \r\n\r\n callApi(urlWebService, 'POST', data, (res) => {\r\n if (!res.token) {\r\n showSweetAlert('Error', res.mensaje, 'error');\r\n } else { \r\n setManagerPasswordValid(true);\r\n }\r\n }); \r\n }\r\n\r\n const fieldsRequired = (rowData) => { \r\n return (\r\n <>\r\n {errors[`SelfReviewCriteria[${rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n } \r\n\r\n const calificacionFinalByEditor = (props, rowData) => {\r\n return (\r\n {t('hr:SubmitResponseConfirmationAnnualRev')}. {t('common:ThanksParticipation')}
\r\n \r\n onCalificacionFinalByChange(props, e.target.value, rowData)}\r\n /> \r\n
\r\n \r\n );\r\n }\r\n \r\n const onCalificacionFinalByChange = (props, value ) => { \r\n const updatedRows = [...SelfReviewCriteria];\r\n updatedRows[props.rowIndex].CalificacionFinal = value;\r\n\r\n updatedRows[props.rowIndex].errors = null;\r\n const newErrors = { ...errors };\r\n const fieldKey = `SelfReviewCriteria[${props.rowIndex}]`;\r\n if (value) {\r\n if (newErrors[fieldKey]) {\r\n delete newErrors[fieldKey].CalificacionFinal; \r\n if (Object.keys(newErrors[fieldKey]).length === 0) {\r\n delete newErrors[fieldKey];\r\n }\r\n }\r\n } else { \r\n if (!newErrors[fieldKey]) {\r\n newErrors[fieldKey] = {};\r\n }\r\n newErrors[fieldKey].CalificacionFinal = null;\r\n }\r\n setErrors(newErrors);\r\n setSelfReviewCriteria(updatedRows);\r\n setAvgTotal(obtienePromedio(updatedRows,'CalificacionFinal'));\r\n }; \r\n\r\n function obtienePromedio(lSelfReviewCriteria, calificacionKey) {\r\n const calificaciones = lSelfReviewCriteria\r\n .map(row => row[calificacionKey])\r\n .filter(val => val !== null && val !== undefined && !isNaN(val));\r\n \r\n if (calificaciones.length === 0) {\r\n return 0; \r\n }\r\n\r\n const nAvgTotal = calificaciones.reduce((acc, curr) => acc + curr, 0) / calificaciones.length;\r\n const roundedAvgTotal = parseFloat(nAvgTotal.toFixed(2));\r\n return roundedAvgTotal;\r\n}\r\n\r\nconst onChangeCompromisosSiguienteAnioReview = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.CompromisosSiguienteAnioReview;\r\n setErrors(newErrors);\r\n setCompromisosSiguienteAnioReview(e.target.value);\r\n};\r\n\r\nconst onChangeComentariosCalificacionDesempenioFinal = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ComentariosCalificacionDesempenioFinal;\r\n setErrors(newErrors);\r\n setComentariosCalificacionDesempenioFinal(e.target.value);\r\n};\r\n\r\nconst onChangeIDPSiguienteAnioObjetivos = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.IDPSiguienteAnioObjetivos;\r\n setErrors(newErrors);\r\n setIDPSiguienteAnioObjetivos(e.target.value);\r\n};\r\n\r\nconst TituloDescripcionCriterioTemplate = (row) => { \r\n \r\n\r\n return (\r\n <>\r\n {row.TituloCriterio}
\r\n {row.DescripcionCiterio}
\r\n \r\n)\r\n}\r\n\r\n if(!esInformacionDisponible){\r\n return (\r\n <>\r\n {t('hr:ReviewOfInformationClosed')}
\r\n \r\n{t('hr:AnnualReviewNotReadyPendingSteps')}
\r\n \r\n{t('hr:AnnualReviewNotReadyForEmployee')}
\r\n \r\n{t(\"hr:ReviewOfInformationInstructions\")}
\r\n\r\n {\r\n props.Anio === '2021' ?\r\n (\r\n <>\r\n
\r\n \r\n )\r\n :\r\n (<>)\r\n }\r\n
\r\n
\r\n \r\n {t('hr:ReviewPerformanceRating')}
\r\n\r\n
\r\n \r\n {t('hr:PerformanceRatingScale')}
\r\n\r\n \r\n
\r\n {esTienePermisoEdicion && EstatusAnnualReview === 0 ? (\r\n \r\n { onChangeComentariosCalificacionDesempenioFinal (e) }}\r\n /> \r\n
\r\n ) : } \r\n \r\n \r\n \r\n
\r\n {esTienePermisoEdicion && EstatusAnnualReview === 0 ? (\r\n \r\n { onChangeIDPSiguienteAnioObjetivos (e) }}\r\n /> \r\n
\r\n ) : } \r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n )} \r\n {esTienePermisoEdicion && EstatusAnnualReview === 0 ? (\r\n \r\n { onChangeCompromisosSiguienteAnioReview(e) }}\r\n errors={errors}\r\n /> \r\n
\r\n ) : } \r\n \r\n \r\n \r\n
\r\n {esTienePermisoEdicion && EstatusAnnualReview === 0 ? (\r\n \r\n { setComentariosAnnualReview (e.target.value) }}\r\n /> \r\n
\r\n ) : } \r\n \r\n {t(\"hr:ReviewOfInformationInstructionsSection2\")}
\r\n\r\n \r\n
\r\n \r\n { EmployeePasswordValid ? \r\n (\r\n <>\r\n {t('hr:PasswordConfirmationSuccess')}.\r\n \r\n )\r\n :\r\n (\r\n <>\r\n \r\n \r\n {t('hr:EmployeePasswordConfirmarion')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n onConfirmEmployeePassword()} />\r\n
\r\n \r\n \r\n
\r\n \r\n { ManagerPasswordValid ? \r\n (\r\n <>\r\n {t('hr:PasswordConfirmationSuccess')}.\r\n \r\n )\r\n :\r\n (\r\n <>\r\n \r\n \r\n {t('hr:ManagerPasswordConfirmarion')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onConfirmManagerPassword()} />\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaEmployeeSelfReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:EmployeeSelfReview')}
\r\n \r\n ),\r\n className: 'itemInicio',\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n {EstatusContribucionReview === 1 && ActivaEmployeeSelfReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaEmployeeSelfReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:ScoreCardSummary')}
\r\n \r\n ),\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n {EstatusManagerReview === 1 && ActivaManagerReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaManagerReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:ManagerReview')}
\r\n \r\n ),\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n {EstatusAnnualReview === 1 && ActivaAnnualReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaAnnualReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:ReviewInformation')}
\r\n \r\n ),\r\n className: 'itemFinal',\r\n command: (event) => {},\r\n },\r\n ];\r\n\r\n const stepItemsNew = [\r\n {\r\n label: (\r\n <>\r\n {EstatusEmployeeSelfReview === 1 && ActivaEmployeeSelfReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaEmployeeSelfReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:EmployeeSelfReview')}
\r\n \r\n ),\r\n className: 'itemInicio',\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n {EstatusManagerReview === 1 && ActivaManagerReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaManagerReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:ManagerReview')}
\r\n \r\n ),\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n {EstatusAnnualReview === 1 && ActivaAnnualReview === 1 ? (\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n {ActivaAnnualReview === 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n\r\n {t('hr:1-on-ReviewInformation')}
\r\n \r\n ),\r\n className: 'itemFinal',\r\n command: (event) => {},\r\n },\r\n ];\r\n\r\n const StepRender = (index) => {\r\n switch (index + 1) {\r\n case 1:\r\n return (\r\n <>\r\n \r\n {anio}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {StepRender(activeIndex)}\r\n
\r\n
\r\n )\r\n }\r\n\r\n const onChangeMotivoDeshacer = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.MotivoDeshacer; \r\n setErrors(newErrors) \r\n setMotivoDeshacer(e.target.value)\r\n } \r\n\r\n const AccionesTemplate = (row) => {\r\n let className = '';\r\n switch(true) {\r\n case row.Porcentaje<50:\r\n className = \"danger-color\";\r\n break;\r\n case row.Porcentaje<75:\r\n className = \"orange-color\";\r\n break;\r\n case row.Porcentaje<99:\r\n className = \"warning-color\";\r\n break;\r\n case row.Porcentaje===100:\r\n className = \"success-color\";\r\n break;\r\n default:\r\n className = \"default-color\";\r\n }\r\n return (\r\n <>\r\n {\r\n row.ClaIDPEstatus !== idpStatus.ACCEPTED && (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n */}\r\n
\r\n \r\n {row.AccionesTerminada} \r\n {t('hr:Of')} \r\n {row.Acciones} \r\n {t('hr:Activities')} \r\n
\r\n \r\n
\r\n \r\n ) \r\n } \r\n \r\n );\r\n }\r\n \r\n const sIcon = (EstatusId) => {\r\n let sclass = '';\r\n switch (EstatusId) {\r\n case 1:\r\n sclass = 'pi pi-pencil'; \r\n break;\r\n case 2:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case 3:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case 5:\r\n sclass = 'pi pi-ban'; \r\n break;\r\n case 7:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case -1:\r\n sclass = 'pi pi-undo'; \r\n break;\r\n default:\r\n sclass = 'pi pi-send'; \r\n }\r\n return (\r\n sclass\r\n );\r\n }\r\n\r\n const dataInfo = (rowData) => {\r\n // console.log('dataInfo',rowData);\r\n const arreglo = [];\r\n rowData.Opciones.forEach((item) => { \r\n const arrItem = { \r\n label: item.NomIDPEstatus,\r\n icon: sIcon(item.ClaIDPEstatus),\r\n command: () => { \r\n switch (item.ClaIDPEstatus) {\r\n case -1:\r\n setIdIDP(rowData.IdIDP);\r\n if(rowData.EsjefeInmediato){\r\n onConfirmUndoSubmit(rowData.IdIDP, MotivoDeshacer); \r\n }else{\r\n setEsDialogUndo(true);\r\n }\r\n break;\r\n case 5:\r\n onConfirmSubmit(5, item.IdIDP, rowData.Version); \r\n break;\r\n default: \r\n setClaUsuarioRowSeleccionado(rowData.ClaUsuario); \r\n setIdIDP(item.IdIDP); \r\n setIDPStatusName(rowData.Estatus); \r\n setIDPVersion(rowData.Version);\r\n setEsListado(false);\r\n }\r\n }\r\n }\r\n arreglo.push(arrItem);\r\n })\r\n return (\r\n arreglo\r\n );\r\n }\r\n \r\n const goalTableColumnTemplate = (rowData) => { \r\n return (\r\n <>\r\n {rowData.ClaIDPEstatus === idpStatus.ACCEPTED? t('hr:NotParticipatingAtThisTime'): rowData.ObjetivoSmart} \r\n \r\n );\r\n };\r\n\r\n const statusTableColumnTemplate = (rowData) => {\r\n let className = '';\r\n if (\r\n (\r\n getSessionItem('ClaUsuarioMod', '') === rowData.ClaUsuario &&\r\n rowData.ClaIDPEstatus === idpStatus.ADDITIONAL_INPUT_NEEDED\r\n ) ||\r\n (\r\n getSessionItem('ClaUsuarioMod', '') !== rowData.ClaUsuario &&\r\n rowData.ClaIDPEstatus === idpStatus.PENDING_REVIEW\r\n ) \r\n ) {\r\n className = 'text-warning';\r\n }\r\n return (\r\n <>\r\n \r\n {rowData.Estatus}\r\n
\r\n \r\n );\r\n }; \r\n\r\n const BotonesTemplate = (rowData) => { \r\n return (\r\n <>\r\n\r\n
\r\n ) \r\n\r\n const confirmationUndoMessageHTML = (\r\n {t('hr:SubmitCancelled')}.
\r\n \r\n
\r\n ) \r\n \r\nconst onConfirmSubmit = (claEstatus, nIdIDP, version) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n saveStatus(claEstatus, nIdIDP, version);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n}\r\n\r\nconst onConfirmUndoSubmit = (nIdIDP, motive) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationUndoMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n acceptUndo(nIdIDP, motive);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n}\r\n\r\nconst onAcceptUndoClick = () => { \r\n acceptUndo(IdIDP, MotivoDeshacer);\r\n};\r\n \r\nconst saveStatus = async (ClaEstatus, Id, version) => {\r\n let value = {\r\n ComentariosRevisado\r\n }\r\n let validator;\r\n let esValido;\r\n if(ClaEstatus===4){\r\n validator = new YupValidator(valitationSchemeRejected);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n if(ClaEstatus===6){\r\n value = {\r\n IDPAcciones\r\n }\r\n validator = new YupValidator(valitationSchemeCompleted);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n \r\n let urlWebServiceSave = '';\r\n if (version === idpVersions.V1) {\r\n urlWebServiceSave = `${config.UrlApiProject}hr/SaveStatusIndividualDevelopmentPersonal`;\r\n } else if (version === idpVersions.V2) {\r\n urlWebServiceSave = `${config.UrlApiProject}hr/SaveStatusIndividualDevelopmentPlanV2`;\r\n }\r\n\r\n const paramsService = { \r\n IdIDP:Id,\r\n ClaIDPEstatus:ClaEstatus,\r\n ComentariosRevisado,\r\n IndividualDevelopmentPersonalAcciones:IDPAcciones,\r\n SupportDocumentCertificateFileData:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileData : null),\r\n SupportDocumentCertificateNomArchivo:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileName: null),\r\n SupportDocumentCertificateExtension:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileExtension: null) \r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n getIDP(StartDateFilter,EndDateFilter);\r\n });\r\n }\r\n\r\n const acceptUndo = async (idpID, motive) => {\r\n const urlWebServiceSave = `${config.UrlApiProject}hr/AcceptUndoIndividualDevelopmentPersonal`;\r\n const paramsService = {\r\n IdIDP: idpID,\r\n MotivoDeshacer: motive\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n closeDialogUndo();\r\n getIDP(StartDateFilter,EndDateFilter);\r\n });\r\n};\r\n\r\nconst onChange = (node) => { \r\n setClaUsuarioSeleccionado(node);\r\n}\r\n\r\nconst CreationDateTemplate = (rowData) => {\r\n return (\r\n <>\r\n {t('hr:SubmitUndo')}
\r\n \r\n { moment(rowData.FechaCreacion).format('MMMM DD, YYYY h:mm:ss a') }\r\n
\r\n \r\n );\r\n}\r\n\r\nconst FechaRevisionTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n { moment(rowData.FechaRevisado).format('MMMM DD, YYYY h:mm:ss a') }\r\n
\r\n \r\n );\r\n}\r\n\r\nconst headerTable = ( \r\n <>\r\n \r\n \r\n
\r\n
\r\n );\r\n}; \r\n\r\n const onHideIDPDetail = () => {\r\n setEsListado(true);\r\n };\r\n\r\n const onIDPSaved = () => { \r\n getIDP(StartDateFilter, EndDateFilter); \r\n };\r\n\r\n const onIDPStatusSaved = () => { \r\n getIDP(StartDateFilter, EndDateFilter); \r\n };\r\n\r\n const idpDetailDialogTemplate = (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onEstatusIDPChange(e.value)}\r\n label={t('hr:Status')}\r\n /> \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ) \r\n\r\n \r\n const onNomProyectoChange = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.NomProyecto; \r\n setErrors(newErrors);\r\n setNomProyecto(e.target.value);\r\n }\r\n \r\n const onFechaEstimadaInicio = ( e ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.FechaEstimadaInicio; \r\n setErrors(newErrors) \r\n setFechaEstimadaInicio(e.value)\r\n }; \r\n\r\n const onFechaEstimadaFin = ( e ) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.FechaEstimadaFin; \r\n setErrors(newErrors) \r\n setFechaEstimadaFin(e.value)\r\n }; \r\n\r\n const onChangeClaTipoProyecto = (value) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.ClaTipoProyecto; \r\n setErrors(newErrors) \r\n setClaTipoProyecto(value);\r\n setClaIndicador(null);\r\n }\r\n\r\n const onChangeClaIndicador= (value) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.ClaIndicador; \r\n setErrors(newErrors) \r\n setClaIndicador(value);\r\n }\r\n \r\n \r\n const obtenerIndicadorIniciativa = () => { \r\n const MSWBSCIndicadorIniciativa = `${config.UrlApiProject}ScoreCard/MSWBSCIndicadorIniciativa`; \r\n const paramsToService = { \r\n \r\n }; \r\n callApi(MSWBSCIndicadorIniciativa, 'POST', paramsToService, (response) => { \r\n setIndicadorIniciativa(response.data[0]); \r\n });\r\n }\r\n\r\n const obtenerTipoProyecto = () => { \r\n const MSWBSCTipoProyecto = `${config.UrlApiProject}ScoreCard/MSWBSCTipoProyecto`; \r\n const paramsToService = { \r\n \r\n }; \r\n callApi(MSWBSCTipoProyecto, 'POST', paramsToService, (response) => { \r\n setOpcionesTipoProyecto(response.data[0]); \r\n });\r\n }\r\n\r\n const obtenerRolesProyecto = () => { \r\n const GetRolProyectoCmb = `${config.UrlApiProject}ScoreCard/GetRolProyectoCmb`; \r\n const paramsToService = { \r\n \r\n }; \r\n callApi(GetRolProyectoCmb, 'GET', paramsToService, (response) => { \r\n setOpcionesRoleProyecto(response.data.RolesProyecto); \r\n });\r\n }\r\n \r\n const onChangeInvolucrado = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.ClaInvolucrado; \r\n setErrors(newErrors)\r\n setClaInvolucrado(e.value)\r\n }\r\n\r\n \r\n const onChangeClaRolProyecto = (value) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.ClaRolProyecto; \r\n setErrors(newErrors)\r\n setClaRolProyecto(value)\r\n }\r\n \r\n\r\n const filterResponsible = (event) => {\r\n let valor = ''; \r\n if (ClaInvolucrado !== null && ClaInvolucrado !== '' && event.query === \"\")\r\n {\r\n valor = ClaInvolucrado.NomUsuario;\r\n }\r\n else{\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query \r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetUsuariosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => { \r\n setfilteredResponsible(response.data.Usuarios);\r\n }); \r\n \r\n }\r\n\r\n const renderHeader = () => {\r\n return (\r\n <> \r\n { t('caratulaproyecto:NuevoProyecto')} \r\n \r\n );\r\n }\r\n\r\n const renderFooter = () => {\r\n return (\r\n <> \r\n {t('caratulaproyecto:ContinueEditingProject')}.
\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n const removeColumn = (rowData, props) => {\r\n return (\r\n <> \r\n \r\n setInplaceActiveCalendar(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n {\r\n // \r\n } \r\n {t('scoreCard:InformationFrom')} \r\n \r\n {moment(fechaInicial).format(\"ll\")}-{moment(fechaFinal).format(\"ll\")} \r\n \r\n \r\n {t('scoreCard:InformationFrom')} \r\n onFechaInicialChange(e)}\r\n />\r\n \r\n onFechaFinalChange(e)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n {t('scoreCard:NotificationStatus')} \r\n \r\n \r\n { EsTieneNotificacionActiva === 1 ? \"Active\" : \"Inactive\" } \r\n {\r\n FechaNotificaciones!= null ? (\r\n <> {t('scoreCard:Since')} {moment(FechaNotificaciones).format(\"ll\")}\r\n \r\n ):(<>)\r\n }\r\n \r\n
\r\n \r\n {\r\n props.readOnly === true ? (<>)\r\n :\r\n (\r\n <>\r\n {\r\n EsAdminBSC ? (\r\n <>{EsTieneNotificacionActiva === 0 ? \r\n ( \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('scoreCard:Open')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {ActividadesAbiertas} {t('scoreCard:Out')} {ActividadesTotal}
\r\n \r\n \r\n \r\n \r\n {t('scoreCard:Delayed')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {ActividadesRetrasadas}
\r\n \r\n \r\n \r\n \r\n {t('scoreCard:TotalMembers')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {TotalInvolucrados}
\r\n \r\n \r\n \r\n \r\n {t('scoreCard:ProjectStatus')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {NomProyectoEstatus}
\r\n \r\n \r\n \r\n \r\n {t('scoreCard:LaunchDate')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {TotalDiasProyecto} {t('scoreCard:Days')}
\r\n \r\n\r\n \r\n \r\n {t('scoreCard:EstimatedDateEnd')} \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {TotalDiasRestantes} {t('scoreCard:Days')}
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n )\r\n\r\n const downloadFile = (rowData) => { \r\n const GetFileData = `${config.UrlApiProject}ScoreCard/GetProyectoRepActTerminadaId`; \r\n const paramsToService = { \r\n IdProyectoRepActTerminada:rowData.IdArchivo\r\n }; \r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n if(AnexoDetalle!==undefined){\r\n const linkSource = `data:application/${rowData.TipoExtension};base64,${AnexoDetalle.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${rowData.NombreArchivo}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName }.${ rowData.TipoExtension}`;\r\n downloadLink.click();\r\n }\r\n });\r\n }\r\n \r\nconst onConfirmRemoveSubmit = (nIdProyectoRepActTerminada) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n onSubmit(nIdProyectoRepActTerminada);\r\n break; \r\n default:\r\n break;\r\n }\r\n }); \r\n}\r\n\r\nconst onSubmit = async (nIdProyectoRepActTerminada) => { \r\n const paramsService = {\r\n IdProyectoRepActTerminada:nIdProyectoRepActTerminada\r\n }; \r\n const SubmitBajaProyectoRep = `${config.UrlApiProject}ScoreCard/BajaProyectoRepActTerminada`;\r\n callApi(SubmitBajaProyectoRep, 'POST', paramsService, (response) => { \r\n obtenerInformacionFasesProyecto(); \r\n }); \r\n} \r\n\r\nconst NomArchivoTemplate = (rowData) => {\r\n return (\r\n <>\r\n { `${rowData.NombreArchivo}.${rowData.TipoExtension}` } \r\n \r\n )\r\n}\r\n \r\nconst AnexoInfo = (rowData) => {\r\n return (\r\n <> \r\n {t('scoreCard:SubmitRemoveDocument')}.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const renderHeader = () => {\r\n return (\r\n <>\r\n \r\n {t('scoreCard:MoveActivity')}\r\n
\r\n \r\n );\r\n };\r\n\r\n const close = async () => {\r\n setErrors({});\r\n if (props.onClickClose !== null) {\r\n props.onClickClose();\r\n }\r\n };\r\n return (\r\n <>\r\n\r\n
\r\n \r\n \r\n onNewPhaseChange(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n setInplaceActive(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n {NomActividad}\r\n \r\n \r\n onBlurNomActividad(e.target.value)}\r\n onChange={(e) => onNomActividadChange(e.target.value)}\r\n autoFocus\r\n maxLength={250}\r\n errors={errors} \r\n /> \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n);\r\n\r\nconst onHideActividad = () => {\r\n // document.body.classList.remove('bodynotscroll');\r\n if (props.onClickClose !== null){\r\n props.onClickClose();\r\n } \r\n}\r\n const anexo = async () => {\r\n setEsVerAnexo(!EsVerAnexo);\r\n}\r\n const close = async () => {\r\n setErrors({});\r\n if (props.onClickClose !== null){\r\n props.onClickClose();\r\n } \r\n}\r\nconst dialogStyle = ( \r\n { \r\n width: '80vw', \r\n borderLeft:\"solid 2px #2791FF\", \r\n borderTop:\"solid 2px #2791FF\"\r\n }\r\n)\r\nconst closeModal = () => {\r\n setEsVerAnexo(false);\r\n} \r\n\r\nconst onHideMoverActividad = () => {\r\n setEsMostrarMoverActividad(false);\r\n // refrescamos la informacion \r\n if (props.onClickClose !== null){\r\n props.onClickClose();\r\n } \r\n}\r\n \r\n return (\r\n <> \r\n \r\n close(e)}\r\n label={t('common:Close')}\r\n className=\"p-button-secondary no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em' }}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n :\r\n (<>)}\r\n \r\n \r\n \r\n anexo()} \r\n className=\"p-button-rounded p-button-secondary\"\r\n label={t('misActividades:CopyActivity')}\r\n /> \r\n
\r\n \r\n \r\n \r\n onEsNuevoDeliveryChange(e)}\r\n optionLabels={yesNoOptions}\r\n small\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n onIdProyectoFaseEntregableChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onFechaCompromisoFaseEntregableChange(e)}\r\n disabled={DisabledProyectoFaseEntregable}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onClaResponsableFaseEntregableChange(props,e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onClaResponsableChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onClaAutorizadorChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onFechaEstimadaInicioChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onFechaEstimadaFinChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {t('scoreCard:EstimatedDuration')} \r\n
\r\n \r\n \r\n onEstatusChange(e.value)}\r\n label={t('scoreCard:Status')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onFechaRealFinChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onDescripcionChange(props, e.target.value)}\r\n onBlur={(e) => onDescripcionBlur(props, e.target.value)}\r\n errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]} \r\n maxLength={150}\r\n />\r\n
\r\n )\r\n}; \r\n\r\nconst FechaCompromisoEditor = ( props ) => { \r\n return (\r\n \r\n onFechaCompromisoChange(props, e.target.value)}\r\n errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n}; \r\n\r\nconst headerTemplate = ( \r\n <>\r\n \r\n onResponsableChange(props,e)}\r\n errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n /> \r\n
\r\n )\r\n}; \r\n\r\nconst customIcons = (\r\n <> \r\n \r\n \r\n \r\n setInplaceActive(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n \r\n {NomFase} \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {NomEstatusFase} \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n);\r\n\r\nconst onHideFase = () => {\r\n // document.body.classList.remove('bodynotscroll');\r\n if (props.onClickClose !== null){\r\n props.onClickClose();\r\n } \r\n} \r\n\r\nconst BotonesTemplate = (rowData, e) => { \r\n return (\r\n <>\r\n \r\n onBlurNomFase(e.target.value)}\r\n onChange={(e) => onNomFaseChange(e.target.value)}\r\n autoFocus\r\n placeholder={t('scoreCard:PlaceHolderFase')}\r\n errors={errors} \r\n maxLength={250}\r\n />\r\n
\r\n \r\n close(e)}\r\n label={t('common:Close')}\r\n className=\"p-button-secondary no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em' }}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('scoreCard:IsMilestone')}\r\n
\r\n \r\n \r\n {t('scoreCard:Order')}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('scoreCard:Objetivo')}\r\n \r\n
\r\n \r\n \r\n \r\n {t('scoreCard:Scope')}\r\n \r\n
\r\n \r\n \r\n onClaResponsableChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onClaAutorizadorChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onClaEtapaFaseChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n handleHeaderEditClick()} className=\"p-button-rounded p-button-info\" /> \r\n \r\n onConfirmBaja(null,true)} className=\"p-button-rounded p-button-danger\" /> \r\n \r\n onCollapsed(false)} className=\"p-button-rounded p-button-secondary\" /> \r\n
\r\n \r\n );\r\n } \r\n \r\n const headerActions = (rowData) => {\r\n return (\r\n <> \r\n \r\n handleEditClick(rowData)} className=\"p-button-rounded p-button-info\" /> \r\n \r\n onConfirmBaja(rowData,true)} className=\"p-button-rounded p-button-danger\" /> \r\n \r\n {\r\n rowData.ClaTipoProyecto === 3 ?\r\n ( \r\n onCopyActivity(rowData)} className=\"p-button-rounded p-button-secondary\" /> \r\n )\r\n :\r\n (<>)\r\n } \r\n \r\n handleHeaderMoverActividadClick(rowData)} className=\"p-button-rounded p-button-secondary\" /> \r\n \r\n
\r\n \r\n );\r\n } \r\n \r\n const onRowEditInit = (event) => {\r\n OriginalFaseProyectoActividades[event.index] = { ...FaseProyectoActividades[event.index] };\r\n setOriginalFaseProyectoActividades(OriginalFaseProyectoActividades); \r\n };\r\n\r\n const NomActividadEditor = ( props ) => { \r\n return (\r\n \r\n onNomActividadChange(props, e.target.value)}\r\n onBlur={(e) => onNomActividadBlur(props, e.target.value)}\r\n maxLength={250}\r\n />\r\n
\r\n )\r\n }; \r\n\r\n const FechaRealInicioEditor = ( props ) => { \r\n return (\r\n \r\n onFechaEstimadaInicioChange(props, e.target.value)}\r\n /> \r\n
\r\n )\r\n }; \r\n\r\n const FechaRealFinEditor = ( props ) => { \r\n return (\r\n \r\n onFechaEstimadaFinChange(props, e.target.value)}\r\n /> \r\n
\r\n )\r\n }; \r\n\r\n const emptyValueValidator = (e) => {\r\n const { rowData, field } = e.columnProps;\r\n return rowData[field].trim().length > 0;\r\n }\r\n\r\n const ClaResponsableEditor = ( props ) => {\r\n return (\r\n \r\n onResponsableChange(props,e)}\r\n /> \r\n
\r\n )\r\n }; \r\n \r\n const ClaAutorizadorEditor = ( props ) => { \r\n return (\r\n \r\n onAutorizadorChange(props,e)}\r\n /> \r\n
\r\n )\r\n }; \r\n\r\n const onNomActividadChange = (props, value ) => {\r\n const updatedProducts = [...props.value];\r\n updatedProducts[props.rowIndex][props.field] = value;\r\n setFaseProyectoActividades(updatedProducts); \r\n }; \r\n\r\n const onNomActividadBlur = (props, value ) => {\r\n const saveArray= getCurrentRowValues(props);\r\n if(value!=='' && saveArray.NomActividadReal !== saveArray.NomActividad){\r\n saveArray.NomActividad = value;\r\n saveActividad(saveArray);\r\n }else{\r\n obtenerInformacionFasesProyecto();\r\n }\r\n }; \r\n\r\n const onResponsableChange = (props, e ) => {\r\n if(e.value===undefined){\r\n obtenerInformacionFasesProyecto();\r\n }else{\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const colaborador = OpcionesResponsables.filter(item => item.ClaColaborador ===e.value)[0];\r\n if(colaborador!==undefined){\r\n updatedProducts[props.rowIndex].NomResponsable = colaborador.NomColaborador;\r\n }\r\n updatedProducts[props.rowIndex].ClaResponsable = e.value;\r\n saveArray.ClaResponsable = e.value;\r\n setFaseProyectoActividades(updatedProducts); \r\n saveActividad(saveArray);\r\n }\r\n }; \r\n\r\n const onAutorizadorChange = (props, e ) => {\r\n if(e.value===undefined){\r\n obtenerInformacionFasesProyecto();\r\n }else{\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const colaborador = OpcionesResponsables.filter(item => item.ClaColaborador ===e.value)[0];\r\n if(colaborador!==undefined){\r\n updatedProducts[props.rowIndex].NomAutorizador = colaborador.NomColaborador;\r\n }\r\n updatedProducts[props.rowIndex].ClaAutorizador = e.value;\r\n saveArray.ClaAutorizador = e.value;\r\n setFaseProyectoActividades(updatedProducts); \r\n saveActividad(saveArray);\r\n }\r\n };\r\n\r\n const onFechaEstimadaInicioChange = ( props, value ) => { \r\n \r\n const updatedProducts = [...props.value];\r\n const saveArray= getCurrentRowValues(props); \r\n saveArray.FechaEstimadaInicio = new Date(value)\r\n updatedProducts[props.rowIndex].FechaEstimadaInicio = value;\r\n\r\n if (value === null){\r\n obtenerInformacionFasesProyecto();\r\n return;\r\n } \r\n saveActividad(saveArray);\r\n }; \r\n\r\n const onFechaEstimadaFinChange = ( props, value ) => { \r\n const updatedProducts = [...props.value];\r\n const saveArray= getCurrentRowValues(props);\r\n saveArray.FechaEstimadaFin = new Date(value)\r\n updatedProducts[props.rowIndex].FechaEstimadaFin = value;\r\n saveActividad(saveArray);\r\n }; \r\n \r\n const getCurrentRowValues = (props) => {\r\n const updatedProducts = [...props.value];\r\n const RowValues ={\r\n ClaProyecto: updatedProducts[props.rowIndex].ClaProyecto,\r\n ClaFase: updatedProducts[props.rowIndex].ClaFase,\r\n ClaActividad: updatedProducts[props.rowIndex].ClaActividad,\r\n NomActividad: updatedProducts[props.rowIndex].NomActividad,\r\n NomActividadReal: updatedProducts[props.rowIndex].NomActividadReal,\r\n ClaResponsable:updatedProducts[props.rowIndex].ClaResponsable,\r\n ClaAutorizador:updatedProducts[props.rowIndex].ClaAutorizador,\r\n ClaEstatus: updatedProducts[props.rowIndex].ClaEstatus,\r\n FechaEstimadaInicio: updatedProducts[props.rowIndex].FechaEstimadaInicio, \r\n FechaEstimadaFin: updatedProducts[props.rowIndex].FechaEstimadaFin,\r\n FechaRealFin: updatedProducts[props.rowIndex].FechaRealFin,\r\n Bajalogica: updatedProducts[props.rowIndex].Bajalogica,\r\n Milestone:updatedProducts[props.rowIndex].Milestone,\r\n IdProyectoFaseEntregable:updatedProducts[props.rowIndex].IdProyectoFaseEntregable\r\n }\r\n return RowValues;\r\n }\r\n\r\n const valitationSchemeAdd = yup.object().shape({\r\n NomActividad: yup.string().required(t('common:RequiredField')).nullable(),\r\n ClaResponsable: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n ClaAutorizador: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n FechaEstimadaInicio: yup.date().required(t('common:RequiredField')).nullable(),\r\n FechaEstimadaFin: yup.date().required(t('common:RequiredField')).nullable()\r\n });\r\n\r\n const addRow = async () => {\r\n\r\n tracker.trackEvent({\r\n type: 'Fases', /* component name */\r\n action: 'QUICK_NEW_ACTIVITY'\r\n }) \r\n\r\n const value = {\r\n NomActividad,\r\n ClaResponsable,\r\n ClaAutorizador,\r\n FechaEstimadaInicio,\r\n FechaEstimadaFin\r\n }\r\n const validator = new YupValidator(valitationSchemeAdd);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n if(NomActividad===''){\r\n inputRef.current.focus();\r\n }\r\n return;\r\n }\r\n const addRowValues ={\r\n ClaProyecto,\r\n ClaFase,\r\n ClaActividad: 0,\r\n NomActividad,\r\n ClaEstatus: 1,\r\n ClaResponsable,\r\n ClaAutorizador,\r\n FechaEstimadaInicio,\r\n FechaEstimadaFin,\r\n Bajalogica:0\r\n }\r\n \r\n\r\n saveActividad(addRowValues);\r\n setNomActividad(null);\r\n setClaResponsable(null);\r\n setClaAutorizador(null);\r\n setFechaEstimadaInicio(null);\r\n setFechaEstimadaFin(null); \r\n setclassNameButton('secondary');\r\n inputRef.current.focus();\r\n } \r\n\r\n const saveActividad = async (actividad) => {\r\n let FechaInicio = actividad.FechaEstimadaInicio;\r\n let FechaFin = actividad.FechaEstimadaFin;\r\n if(actividad.FechaEstimadaInicio!= null){\r\n if(actividad.FechaEstimadaInicio.toDateString !== undefined){\r\n FechaInicio = actividad.FechaEstimadaInicio.toDateString();\r\n }\r\n }\r\n if(actividad.FechaEstimadaFin!= null){\r\n if(actividad.FechaEstimadaFin.toDateString !== undefined){\r\n FechaFin = actividad.FechaEstimadaFin.toDateString();\r\n }\r\n }\r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveFaseProyectoActividad`;\r\n const paramsService = {\r\n ClaProyecto:actividad.ClaProyecto,\r\n ClaFase:actividad.ClaFase,\r\n ClaResponsable:actividad.ClaResponsable,\r\n ClaAutorizador:actividad.ClaAutorizador,\r\n ClaActividad:actividad.ClaActividad,\r\n NomActividad:actividad.NomActividad,\r\n ClaEstatus:actividad.ClaEstatus,\r\n FechaEstimadaInicio:FechaInicio,\r\n FechaEstimadaFin:FechaFin,\r\n FechaRealFin:actividad.FechaRealFin,\r\n Bajalogica:actividad.Bajalogica,\r\n Milestone:actividad.Milestone,\r\n IdProyectoFaseEntregable:actividad.IdProyectoFaseEntregable,\r\n EsVersionCorta: 1\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => { \r\n obtenerInformacionFasesProyecto();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n }, () =>{ \r\n obtenerInformacionFasesProyecto();\r\n }, null, false, false);\r\n }\r\n\r\n const bajaActividad = async (actividad) => {\r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveBajaFaseProyectoActividad`;\r\n const paramsService = {\r\n ClaProyecto:actividad.ClaProyecto,\r\n ClaFase:actividad.ClaFase,\r\n ClaActividad:actividad.ClaActividad,\r\n Bajalogica:actividad.Bajalogica,\r\n }; \r\n\r\n tracker.trackEvent({\r\n type: 'Fases', /* component name */\r\n action: 'REMOVE_ACTIVITY'\r\n }) \r\n\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerInformacionFasesProyecto();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n });\r\n }\r\n\r\n const bajaFase = async () => {\r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveBajaFaseProyecto`;\r\n const paramsService = {\r\n ClaProyecto,\r\n ClaFase,\r\n Bajalogica:1,\r\n }; \r\n\r\n tracker.trackEvent({\r\n type: 'Fases', /* component name */\r\n action: 'REMOVE_PHASE'\r\n }) \r\n\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n obtenerInformacionFasesProyecto();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n }, null, false, false);\r\n }\r\n\r\n const onConfirmBaja = (actividad, esBajaActividad) => {\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n if(actividad==null){\r\n bajaFase()\r\n }else{\r\n actividad.Bajalogica=1;\r\n if(esBajaActividad){\r\n bajaActividad(actividad);\r\n }\r\n }\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const onCollapsed = ( isCollapsed) => {\r\n setEsColapsado(isCollapsed);\r\n\r\n if (!isCollapsed){\r\n obtenerInformacionFasesProyecto();\r\n }\r\n }\r\n\r\n const handleKeyDown = (e) => {\r\n if (e.key === 'Enter') {\r\n addRow();\r\n }\r\n }\r\n\r\n const refreshPhasesList = () => { \r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n } \r\n }\r\n\r\n\r\nconst confirmationMessageHTML = (\r\n \r\n
\r\n ) \r\n\r\n const headerCol = (\r\n {t('hr:SubmitCancelled')}.
\r\n \r\n {\r\n // FaseProyecto.PorcAvance\r\n }{FaseProyecto.Milestone === 1 ? (<> ) : '' } {FaseProyecto.NomFase}\r\n
\r\n ) \r\n \r\n const porcHeaderCol = ( \r\n {FaseProyecto.PorcPeso }% \r\n ) \r\n \r\n const headerStatusFase = (\r\n <>{t('hr:Status')} {FaseProyecto.EsAtrasada ? : <> }\r\n ) \r\n\r\n const NomEstatusActividadColumn = (rowData) => {\r\n return (\r\n <>\r\n {rowData.NomEstatusActividad} {rowData.EsAtrasada ? : <> }\r\n \r\n );\r\n }\r\n\r\n const headerButtons = (\r\n \r\n handleHeaderEditClick()} className=\"p-button-rounded p-button-info\" /> \r\n \r\n onConfirmBaja(null,true)} className=\"p-button-rounded p-button-danger\" /> \r\n \r\n onCollapsed(true)} className=\"p-button-rounded p-button-secondary\" /> \r\n
\r\n) \r\n\r\nconst NomActividadColumn = (\r\n \r\n onChangeNomActividad(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n reference={inputRef}\r\n maxLength={250}\r\n autoFocus\r\n placeholder={t('common:New')}\r\n errors={errors}\r\n > \r\n \r\n
\r\n) \r\nconst ResponsableColumn = (\r\n \r\n onClaResponsableChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n) \r\nconst AutorizadorColumn = (\r\n \r\n onClaAutorizadorChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n) \r\n\r\nconst FechaEstimadaInicioColumn = (\r\n \r\n onFechaEstimadaInicioRowChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n) \r\n\r\nconst FechaEstimadaFinColumn = (\r\n \r\n onFechaEstimadaFinRowChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n) \r\n\r\nconst addNewActivity = (rowData) => {\r\n // document.body.classList.add('bodynotscroll');\r\n setClaActividadSelected(0);\r\n setEsFaseActividad(true); \r\n\r\n tracker.trackEvent({\r\n type: 'Fases', /* component name */\r\n action: 'ADD_NEW_ACTIVITY'\r\n }) \r\n};\r\n\r\nconst ButtonColumn = (\r\n \r\n addRow()} className=\"p-button-rounded p-button-success\" /> \r\n \r\n addNewActivity()} className=\"p-button-rounded p-button-secondary\" /> \r\n
\r\n) \r\n\r\n const headerData = ( \r\n <>\r\n \r\n { \r\n // rowData.PorcAvance%\r\n } \r\n {rowData.Milestone === 1 ? (<> ) : '' }{rowData.NomFase} \r\n
\r\n \r\n );\r\n }\r\n\r\n const DescriptionTemplate = (rowData) => {\r\n return (\r\n <> \r\n { \r\n rowData.Descripcion === null || rowData.Descripcion === '' ? (<>) :\r\n (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n)\r\n\r\nconst renderListItem = (data) => {\r\n return (\r\n {t('scoreCard:SubmitRemoveDocument')}.
\r\n \r\n
\r\n );\r\n}\r\n\r\nconst renderGridItem = (data) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {data.NomActividad}
\r\n {data.Comentarios}
\r\n { `${data.NomArchivo}.${data.TipoExtension}` }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n downloadFile(data)}\r\n data-pr-position=\"top\" \r\n data-pr-tooltip={t('scoreCard:Download')}\r\n icon=\"pi pi-paperclip\"\r\n className=\"p-button-rounded p-button-info p-button-outlined\"\r\n /> \r\n \r\n onConfirmRemoveSubmit(data.IdProyectoRepActTerminada)}\r\n data-pr-position=\"top\" \r\n data-pr-tooltip={t('scoreCard:Remove')}\r\n icon=\"pi pi-trash\"\r\n className=\"p-button-rounded p-button-danger p-button-outlined\"\r\n hidden={data.ClaTipoDocumentoProyectoRep === 5}\r\n /> \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n downloadFile(data)}\r\n data-pr-position=\"top\" \r\n data-pr-tooltip={t('scoreCard:Download')}\r\n icon=\"pi pi-paperclip\"\r\n className=\"p-button-rounded p-button-info p-button-outlined\"\r\n /> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n */\r\n }\r\n \r\n \r\n onConfirmRemoveSubmit(data.IdProyectoRepActTerminada)}\r\n data-pr-position=\"top\" \r\n data-pr-tooltip={t('scoreCard:Remove')}\r\n icon=\"pi pi-trash\"\r\n className=\"p-button-rounded p-button-danger p-button-outlined\"\r\n hidden={data.ClaTipoDocumentoProyectoRep === 5}\r\n /> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst itemTemplate = (product, layout) => {\r\n if (!product) {\r\n return;\r\n }\r\n if (layout === 'list')\r\n return renderListItem(product);\r\n if (layout === 'grid')\r\n return renderGridItem(product);\r\n}\r\n\r\nconst renderHeader = () => {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nconst header = renderHeader();\r\n\r\nconst filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n setLayout(e.value)} />\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst onClickNewDocument = () => {\r\n setIsAttachProjectDocument(true);\r\n\r\n tracker.trackEvent({\r\n type: 'Documentos', /* component name */\r\n action: 'ADD_NEW_ATTACHMENT'\r\n }) \r\n}\r\n\r\nconst onCloseAttachDocument = () => {\r\n setIsAttachProjectDocument(false);\r\n obtenerTipoDocumentos();\r\n}\r\n\r\n return (\r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n onTextoFilterChange(e.target.value)} \r\n autoFocus\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n onTargetMesChange(props, e.target.value)}\r\n max={99999999.99}\r\n maxFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n \r\n\r\n const modalFooter = () => {\r\n return (\r\n <>\r\n | {t('kpisManagement:KPIName')}: | \r\n{KpisManagementEnc.NomProyectoKPIManagement} | \r\n
| {t('kpisManagement:UoM')}: | \r\n{KpisManagementEnc.DescUnidadMedidad} | \r\n
\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const leftToolbarFooterTemplate = () => { \r\n return (\r\n <> \r\n \r\n );\r\n }; \r\n\r\n const rightToolbarFooterTemplate = () => {\r\n \r\n return (\r\n <> \r\n {\r\n typeof(IdKPIFormula) !== 'undefined' && IdKPIFormula !== null &&\r\n (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n \r\n
\r\n ) \r\n\r\n const confirmationRemoveMessageHTML = (\r\n {t('scoreCard:FormulaEditWarening')}
\r\n \r\n
\r\n ) \r\n\r\n const removeFormula = () => {\r\n /* mandamos confirmar que desea editar */\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationRemoveMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\": \r\n RemoveFormulaKPI();\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const EditarFormula = () => {\r\n /* mandamos confirmar que desea editar */\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\": \r\n setEsHabilitarEdicionFormula(true);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const AplicarFormula = () => {\r\n const variablesList = getVariablesFromFormula(Formula); \r\n setEsTieneErroresFormula(false);\r\n /* evaluamos la expresion a ver si detectamos que es valida */\r\n let expression = Formula;\r\n // console.log('expression', expression)\r\n for (let index = 0; index < variablesList.length; index++) {\r\n const element = variablesList[index]; \r\n // se trato de usar replaceAll y no funciono correctamente por las llaves\r\n for (let index2 = 0; index2 < 50; index2++) {\r\n expression = expression.replace(`{${ element }}`,'1'); \r\n }\r\n\r\n // console.log('expression', expression);\r\n }\r\n \r\n // evaluamos la formula solo para utilizar y poner una bandera de mensaje de error para que la revisen, no los vamos a\r\n // detener\r\n try{\r\n console.log('evaluacion:', evaluate(expression)) \r\n }\r\n catch(ex){\r\n setEsTieneErroresFormula(true);\r\n }\r\n\r\n const variables = [];\r\n \r\n variablesList.forEach(element => {\r\n variables.push({\r\n ClaveKPIFormulaDetalle: `{${ element }}`,\r\n IdKPIFormulaDet: null,\r\n IdKPIFormula : null, \r\n RowIndex: variables.length,\r\n tipoConfiguracionKPI: null,\r\n ClaPuesto: null,\r\n ClaIndicador: null,\r\n ClaTipoIndicador: null,\r\n ClaTipoProyecto: null,\r\n ClaProyecto: null,\r\n IdProyectoKPIManagement: null,\r\n ClaTipoKPIFormula: null,\r\n TipoResultadoKPI: null\r\n })\r\n });\r\n\r\n \r\n setFormulaVariablesList(variables);\r\n setEsHabilitarActualizarFormulaBtn(false);\r\n setEsMostrarVariablesFormula(true);\r\n setEsHabilitarEdicionFormula(false)\r\n }\r\n\r\n \r\n const valitationSchemeSetUpVariable = yup.object().shape({ \r\n tipoConfiguracionKPI: yup.number().required(t('common:RequiredField')),\r\n TipoResultadoKPI: yup.number().required(t('common:RequiredField')),\r\n ClaTipoProyecto: (tipoConfiguracionKPI === 2\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ), \r\n ClaProyecto: (tipoConfiguracionKPI === 2\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ), \r\n IdProyectoKPIManagement: (tipoConfiguracionKPI === 2 \r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ),\r\n ClaPuesto: (tipoConfiguracionKPI === 1\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ),\r\n ClaIndicadorUnico : (tipoConfiguracionKPI === 1\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ),\r\n ClaIndicador: (tipoConfiguracionKPI === 1\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ),\r\n ClaTipoIndicador: (tipoConfiguracionKPI === 1\r\n ? yup.mixed().required(t('common:RequiredField')).nullable()\r\n : yup.mixed().nullable()\r\n ) \r\n });\r\n\r\n const onApplySetUpVariable = async () => {\r\n \r\n // validamos campos requeridos. \r\n setErrors({});\r\n \r\n const value = { \r\n tipoConfiguracionKPI\r\n ,ClaPuesto\r\n ,ClaIndicador\r\n ,ClaTipoIndicador\r\n ,ClaIndicadorUnico\r\n\r\n ,ClaTipoProyecto\r\n ,ClaProyecto\r\n ,IdProyectoKPIManagement\r\n ,TipoResultadoKPI\r\n };\r\n\r\n \r\n \r\n const validator = new YupValidator(valitationSchemeSetUpVariable);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n console.log('errors', validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n\r\n\r\n \r\n const listadoVariables = [...FormulaVariablesList];\r\n const row = listadoVariables[CurrentRowIndexVariable]\r\n\r\n row.ClaPuesto = tipoConfiguracionKPI === 1 ? ClaPuesto : null;\r\n row.ClaIndicador = tipoConfiguracionKPI === 1 ? ClaIndicador: null;\r\n row.ClaTipoIndicador = tipoConfiguracionKPI === 1 ? ClaTipoIndicador: null; \r\n row.ClaIndicadorUnico = tipoConfiguracionKPI === 1 ? ClaIndicadorUnico: null; \r\n row.TipoResultadoKPI = tipoConfiguracionKPI === 1 ? TipoResultadoKPI: null;\r\n row.ClaTipoProyecto = tipoConfiguracionKPI === 2 ? ClaTipoProyecto : null;\r\n row.ClaProyecto = tipoConfiguracionKPI === 2 ? ClaProyecto : null;\r\n row.IdProyectoKPIManagement = tipoConfiguracionKPI === 2 ? IdProyectoKPIManagement : null;\r\n row.ClaTipoKPIFormula = tipoConfiguracionKPI; \r\n let indicador = null;\r\n\r\n if (tipoConfiguracionKPI === 1){ \r\n indicador = { ...IndicadoresList.filter((item) => item.ClaIndicador === ClaIndicador && item.ClaTipoIndicador === ClaTipoIndicador)[0]}; \r\n row.KPIReferenceDescription = indicador.Description;\r\n }\r\n else { \r\n indicador = { ...ProyectoKPIManagementList.filter((item) => item.IdProyectoKPIManagement === IdProyectoKPIManagement)[0]}; \r\n row.KPIReferenceDescription = indicador.NomProyectoKPIManagement;\r\n }\r\n \r\n setFormulaVariablesList(listadoVariables); \r\n setshowKPIRelated(false);\r\n }\r\n \r\n\r\n\r\n return (\r\n <>\r\n {t('scoreCard:FormulaRemoveWarening')}
\r\n {t('scoreCard:Formula')}:
\r\n \r\n
\r\n \r\n \r\n
\r\n {t('scoreCard:FormulaHelper')}
\r\n {\r\n EsTieneErroresFormula &&\r\n (\r\n {t('scoreCard:FormulaError')}\r\n )\r\n } \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n | {t('scoreCard:Variable')} | \r\n{t('scoreCard:KPIReference')} | \r\n\r\n |
|---|---|---|
\r\n \r\n {t('scoreCard:NoVariablesFound')}\r\n \r\n | \r\n ||
| {item.ClaveKPIFormulaDetalle} | \r\n\r\n onClickConfigurarVariable(item)}>\r\n {\r\n typeof(item.KPIReferenceDescription) !== 'undefined' && item.KPIReferenceDescription !== '' && item.KPIReferenceDescription !== null \r\n ?\r\n (<>{item.KPIReferenceDescription})\r\n :\r\n (<>{t('scoreCard:KPICfgLink')})\r\n\r\n } \r\n \r\n | \r\n\r\n {\r\n typeof(item.KPIReferenceDescription) !== 'undefined' && item.KPIReferenceDescription !== '' && item.KPIReferenceDescription !== null \r\n ?\r\n (<>)\r\n :\r\n (<>)\r\n }\r\n | \r\n
{t('scoreCard:HowWouldSetUpVariable')}
\r\n \r\n \r\n \r\n {t('scoreCard:Position')}
\r\n \r\n onChangePuesto(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n {t('scoreCard:KPIIndex')}
\r\n \r\n onChangeIndicador(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n {t('scoreCard:PickASource')}:
\r\n {t('misProyectosScreen:ProyectType')}
\r\n \r\n onChangeTipoProyecto(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n {t('misProyectosScreen:Project')}
\r\n \r\n onChangeProyecto(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n {t('misProyectosScreen:KPI')}
\r\n \r\n onChangeProyectoKPIManagement(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onNomProyectoKPIManagementChange(props, e.target.value)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n />\r\n
\r\n )\r\n };\r\n const DescUnidadMedidadEditor = ( props ) => { \r\n return (\r\n \r\n onNomProyectoKPIManagementChange(props, e.target.value)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n />\r\n
\r\n )\r\n }; \r\n const EstatusInicialProyectoEditor = ( props ) => { \r\n return (\r\n \r\n onNomProyectoKPIManagementChange(props, e.target.value)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n maxFractionDigits={2}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n />\r\n
\r\n )\r\n };\r\n const EstatusObjetivoEditor = ( props ) => { \r\n return (\r\n \r\n onNomProyectoKPIManagementChange(props, e.target.value)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n maxFractionDigits={2}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n />\r\n
\r\n )\r\n };\r\n const EstatusFinalEditor = ( props ) => { \r\n return (\r\n \r\n onNomProyectoKPIManagementChange(props, e.target.value)}\r\n maxFractionDigits={2}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n />\r\n
\r\n )\r\n };\r\n const NomRefSeguimientoKPIManagementEditor = ( props ) => { \r\n return (\r\n \r\n onNomRefSeguimientoKPIManagementChange(props, e.target.value)}\r\n maxLength={150}\r\n />\r\n
\r\n )\r\n }; \r\n const onNomProyectoKPIManagementChange = (props, value) => { \r\n const updatedNomProyectoKPIManagement = [...props.value];\r\n updatedNomProyectoKPIManagement[props.rowIndex][props.field] = value;\r\n \r\n setKPIManagementList(updatedNomProyectoKPIManagement); \r\n }; \r\n const onNomRefSeguimientoKPIManagementChange = (props, value ) => {\r\n const updatedNomProyectoKPIManagement = [...props.value];\r\n updatedNomProyectoKPIManagement[props.rowIndex][props.field] = value;\r\n setKPIManagementList(updatedNomProyectoKPIManagement); \r\n }; \r\n \r\n const getCurrentRowValues = (props) => {\r\n const updatedProducts = [...props.value];\r\n const RowValues ={\r\n IdProyectoKPIManagement: updatedProducts[props.rowIndex].IdProyectoKPIManagement, \r\n ClaProyecto: updatedProducts[props.rowIndex].ClaProyecto, \r\n NomProyectoKPIManagement: updatedProducts[props.rowIndex].NomProyectoKPIManagement,\r\n DescUnidadMedidad: updatedProducts[props.rowIndex].DescUnidadMedidad,\r\n EstatusInicialProyecto: updatedProducts[props.rowIndex].EstatusInicialProyecto,\r\n EstatusObjetivo: updatedProducts[props.rowIndex].EstatusObjetivo,\r\n EstatusFinal:updatedProducts[props.rowIndex].EstatusFinal,\r\n NomProyectoTipoKPIManagement:updatedProducts[props.rowIndex].NomProyectoTipoKPIManagement,\r\n NomRefSeguimientoKPIManagement: updatedProducts[props.rowIndex].NomRefSeguimientoKPIManagement,\r\n ClaUsuarioResponsable:updatedProducts[props.rowIndex].ClaUsuarioResponsable,\r\n NomUsuario: updatedProducts[props.rowIndex].NomUsuario, \r\n ClaProyectoTipoKPIManagement: updatedProducts[props.rowIndex].ClaProyectoTipoKPIManagement, \r\n ClaProyectoFrecuenciaKPIManagement: updatedProducts[props.rowIndex].ClaProyectoFrecuenciaKPIManagement, \r\n NomProyectoFrecuenciaKPIManagement: updatedProducts[props.rowIndex].NomProyectoFrecuenciaKPIManagement,\r\n PorcPeso : updatedProducts[props.rowIndex].PorcPeso\r\n }\r\n return RowValues;\r\n } \r\n const emptyValueValidator = (e) => {\r\n const { rowData, field } = e.columnProps;\r\n return rowData[field].trim().length > 0;\r\n }\r\n\r\n const onQuestionarioChange = (questionario) => {\r\n onChange(questionario)\r\n }\r\n const onEditClick = (rowData) => { \r\n props.onEditClick(rowData);\r\n };\r\n const onNewClick = () => { \r\n const newRow = { \r\n IdProyectoKPIManagement\t : null\t,\r\n ClaProyecto\t,\r\n NomProyectoKPIManagement\t : \"\"\t,\r\n DescUnidadMedidad\t : \"\"\t,\r\n EstatusInicialProyecto\t : null\t,\r\n EstatusObjetivo\t : null\t,\r\n EstatusFinal\t : null\t,\r\n ClaProyectoTipoKPIManagement\t :null\t,\r\n NomProyectoTipoKPIManagement\t : \"\"\t,\r\n NomRefSeguimientoKPIManagement\t : \"\"\t,\r\n ClaUsuarioResponsable\t : null\t,\r\n NomUsuario\t : \"\"\t,\r\n ClaProyectoFrecuenciaKPIManagement\t : null\t,\r\n NomProyectoFrecuenciaKPIManagement\t : \"\"\t,\r\n BajaLogica: 0,\r\n PorcPeso: null,\r\n ClaSentidoMejora : null,\r\n NomSentidoMejora: null\r\n };\r\n setKPIManagementList([...KPIManagementList, newRow]);\r\n }\r\n const onSaveClick = async () => { \r\n const value = {\r\n KPIManagementList\r\n }\r\n \r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n if(!esValido)\r\n {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n } \r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveKPIManagement`; \r\n const paramsService = {\r\n ClaProyecto: props.ClaProyecto,\r\n ProyectoKPIManagement:KPIManagementList\r\n }; \r\n\r\n tracker.trackEvent({\r\n type: 'KpisManagementTable', /* component name */\r\n action: 'SAVE_KPIS_MANAGEMENT'\r\n }) \r\n\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerInformacionKPIManagement();\r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n }); \r\n \r\n }\r\n \r\n\r\n const saveKPIManagement = async (kpimanagement) => { \r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveKPIManagement`;\r\n const paramsService = {\r\n ClaProyecto,\r\n ProyectoKpiManagemnt: KPIManagementList\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => { \r\n obtenerInformacionKPIManagement();\r\n });\r\n }\r\n const bajakpiManagement = async (kpiManagement) => { \r\n \r\n const urlWebServiceSave = `${config.UrlApiProject}ScoreCard/SaveBajaKPIManagement`;\r\n const paramsService = { \r\n ClaProyecto, \r\n ...kpiManagement\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => { \r\n obtenerInformacionKPIManagement();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n });\r\n }\r\n\r\n const confirmationMessageHTML = (\r\n \r\n
\r\n ) \r\n const onConfirmBaja = (kpiManagement, props) => {\r\n \r\n /* AQUI */\r\n if(kpiManagement.IdProyectoKPIManagement === null){ \r\n // aqui lo borro de mi arreglo y hago el setKPIManaget\r\n const kpiManagementListnew = [...KPIManagementList];\r\n kpiManagementListnew.splice(props.rowIndex, 1);\r\n setKPIManagementList(kpiManagementListnew);\r\n return\r\n }\r\n \r\n\r\n \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n bajakpiManagement(kpiManagement); \r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const actionBodyTemplate = (rowData, itemProps) => {\r\n\r\n if (props.readOnly === true){\r\n return (<>)\r\n }\r\n\r\n return (\r\n <> \r\n {t('kpisManagement:SubmitCancelled')}.
\r\n \r\n onResponsableChange(props,e)}\r\n /> \r\n
\r\n )\r\n };\r\n\r\n const obtenerResponsablesProyecto = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCColaboradorProyectosTeam`; \r\n const paramsToService = { \r\n ClaProyecto\r\n }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setOpcionesResponsables(response.data[0]);\r\n } \r\n });\r\n }\r\n\r\n const obtenerProyectoFrecuencia = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/MSWBSCProyectoFrecuencia`; \r\n const paramsToService = { }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setProyectoFrecuencia(response.data[0]);\r\n } \r\n });\r\n }\r\n\r\n const obtenerSentidoMejora = () => { \r\n const GetBSCSentidoMejoraCmb = `${config.UrlApiProject}ScoreCard/GetBSCSentidoMejoraCmb`; \r\n const paramsToService = { }; \r\n callApi(GetBSCSentidoMejoraCmb, 'GET', paramsToService, (response) => { \r\n setSentidoMejoraList(response.data.SentidoMejoraList); \r\n });\r\n } \r\n\r\n const obtenerProyectoMangement = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/MSWBSCProyectoTipoKPIManagement`; \r\n const paramsToService = { }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setProyectoManagement(response.data[0]);\r\n } \r\n });\r\n } \r\n\r\n const onResponsableChange = (props, e ) => {\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const colaborador = OpcionesResponsables.filter(item => item.ClaColaborador ===e.value)[0];\r\n if(colaborador!==undefined){\r\n updatedProducts[props.rowIndex].NomUsuario = colaborador.NomColaborador;\r\n }\r\n updatedProducts[props.rowIndex].ClaUsuarioResponsable = e.value;\r\n saveArray.ClaUsuarioResponsable = e.value; \r\n setKPIManagementList(updatedProducts);\r\n // saveKPIManagement(saveArray);\r\n };\r\n\r\n const onPorcPesoChange = (props, value) => { \r\n const updateValues = [...props.value];\r\n \r\n updateValues[props.rowIndex].PorcPeso = value; \r\n setKPIManagementList(updateValues);\r\n };\r\n\r\n\r\n const ClaProyectoFrecuenciaKPIManagementEditor = ( props ) => {\r\n return (\r\n \r\n onFrecuenciaProyectoChange(props,e)}\r\n /> \r\n
\r\n )\r\n };\r\n\r\n const ClaSentidoMejoraEditor = ( props ) => {\r\n return (\r\n \r\n onSentidoMejoraChange(props,e)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n /> \r\n
\r\n )\r\n };\r\n\r\n const onSentidoMejoraChange = (props, e ) => {\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const sentidoMejora = SentidoMejoraList.filter(item => item.ClaSentidoMejora ===e.value)[0];\r\n if(sentidoMejora!==undefined){\r\n updatedProducts[props.rowIndex].NomSentidoMejora = sentidoMejora.NomSentidoMejora;\r\n }else{\r\n updatedProducts[props.rowIndex].NomSentidoMejora = null;\r\n }\r\n updatedProducts[props.rowIndex].ClaSentidoMejora = e.value;\r\n saveArray.ClaSentidoMejora = e.value; \r\n setKPIManagementList(updatedProducts);\r\n };\r\n\r\n const onFrecuenciaProyectoChange = (props, e ) => {\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const frecuencia = ProyectoFrecuencia.filter(item => item.ClaProyectoFrecuenciaKPIManagement ===e.value)[0];\r\n if(frecuencia!==undefined){\r\n updatedProducts[props.rowIndex].NomProyectoFrecuenciaKPIManagement = frecuencia.NomProyectoFrecuenciaKPIManagement;\r\n }\r\n updatedProducts[props.rowIndex].ClaProyectoFrecuenciaKPIManagement = e.value;\r\n saveArray.ClaProyectoFrecuenciaKPIManagement = e.value; \r\n setKPIManagementList(updatedProducts);\r\n };\r\n \r\n const ClaProyectoTipoKPIManagementEditor = ( props ) => {\r\n return (\r\n \r\n onFrecuenciaManagementChange(props,e)}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n /> \r\n
\r\n )\r\n };\r\n\r\n const onFrecuenciaManagementChange = (props, e ) => {\r\n const saveArray= getCurrentRowValues(props);\r\n const updatedProducts = [...props.value];\r\n const management = ProyectoManagement.filter(item => item.ClaProyectoTipoKPIManagement ===e.value)[0];\r\n if(management!==undefined){\r\n updatedProducts[props.rowIndex].NomProyectoTipoKPIManagement = management.NomProyectoTipoKPIManagement;\r\n }\r\n updatedProducts[props.rowIndex].ClaProyectoTipoKPIManagement = e.value;\r\n saveArray.ClaProyectoTipoKPIManagement = e.value; \r\n setKPIManagementList(updatedProducts);\r\n };\r\n \r\n const valitationScheme = yup.object().shape({\r\n selfReviewFeedback: yup.array().of(\r\n yup.object().shape({\r\n NomProyectoKPIManagement: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n DescUnidadMedidad: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n EstatusInicialProyecto: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n EstatusObjetivo: yup.string().trim().required(t('common:RequiredField')).nullable() \r\n // NomProyectoTipoKPIManagement: yup.string().trim().required(t('common:RequiredField')).nullable() \r\n }))\r\n });\r\n\r\n const valitationSchemeSave = yup.object().shape({ \r\n KPIManagementList: yup.array().of(\r\n yup.object().shape({ \r\n NomProyectoKPIManagement: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n DescUnidadMedidad: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n EstatusInicialProyecto: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n EstatusObjetivo: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n NomSentidoMejora: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n NomProyectoTipoKPIManagement: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n PorcPeso: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }), \r\n })\r\n )\r\n });\r\n\r\n const onManagementChange =(e)=>{\r\n const newErrors = {...errors}\r\n delete newErrors.Management;\r\n setErrors(newErrors);\r\n setManagement(e);\r\n }\r\n\r\n const NomProyectoKPIManagementSchema = yup.object().shape({\r\n NomProyectoKPIManagement: yup.string()\r\n .required(t('common:RequiredField'))\r\n });\r\n \r\n const fieldsRequired = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`KPIManagementList[${props.rowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n }\r\n\r\n const DefaultColumnTemplate = (rowData, props, columnName) => {\r\n \r\n if (errors[`KPIManagementList[${props.rowIndex}]`] !== undefined && \r\n errors[`KPIManagementList[${props.rowIndex}]`][columnName] !== undefined\r\n )\r\n {\r\n return (\r\n \r\n { rowData[columnName] } \r\n
\r\n );\r\n }\r\n return (\r\n <>\r\n { rowData[columnName] } \r\n \r\n );\r\n }\r\n\r\n const headerKPIManagement =(\r\n <>\r\n \r\n onPorcPesoChange(props, e.target.value)}\r\n max={100}\r\n errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n \r\n const onClickViewDetailKPI = (IdProyectoKPIManagement) => {\r\n setIdProyectoKPIManagementSeleccionado(IdProyectoKPIManagement);\r\n setEsMostrarKPISDetalle(true);\r\n tracker.trackEvent({\r\n type: 'KpisManagementTable', /* component name */\r\n action: 'VIEW_KPI_TARGETS_DETAIL'\r\n }) \r\n }\r\n\r\n const onClickCfgFormulaKPI = (row) => {\r\n setIdProyectoKPIManagementSeleccionado(row.IdProyectoKPIManagement);\r\n setEsMostrarCfgFormula(true);\r\n setIdKPIFormulaSelected(row.IdKPIFormula);\r\n setKPIDescriptionSelected(row.NomProyectoKPIManagement);\r\n tracker.trackEvent({\r\n type: 'KpisManagementTable', /* component name */\r\n action: 'CONFIG_FORMULA_KPI'\r\n }) \r\n }\r\n\r\n \r\n\r\n const targetByMonthTemplate = (rowData) => {\r\n \r\n // return (<>);\r\n\r\n if (rowData.IdProyectoKPIManagement === null){\r\n return (<>); \r\n }\r\n\r\n return (<> onClickViewDetailKPI(rowData.IdProyectoKPIManagement)} title='View / Edit Monthly Target'>);\r\n } \r\n \r\n const cfgFormulaTemplate = (rowData) => {\r\n \r\n // return (<>);\r\n\r\n if (rowData.IdProyectoKPIManagement === null){\r\n return (<>); \r\n }\r\n\r\n if (rowData.IdKPIFormula !== null){\r\n return (<> onClickCfgFormulaKPI(rowData)} title='Edit Formula'>);\r\n }\r\n\r\n return (<> onClickCfgFormulaKPI(rowData)} title='Click here to create a formula for this KPI'>);\r\n } \r\n\r\n const onFormulaCreated = (formula) => { \r\n \r\n const RelacionarFormulaKPIProyecto = `${config.UrlApiProject}ScoreCard/RelacionarFormulaKPIProyecto`; \r\n const paramsToService = { \r\n IdKPIFormula: formula.IdKPIFormula,\r\n IdProyectoKPIManagement : IdProyectoKPIManagementSeleccionado\r\n }; \r\n \r\n callApi(RelacionarFormulaKPIProyecto, 'POST', paramsToService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n setEsMostrarCfgFormula(false);\r\n setIdProyectoKPIManagementSeleccionado(null);\r\n setIdKPIFormulaSelected(null);\r\n obtenerInformacionKPIManagement(); \r\n });\r\n \r\n }\r\n\r\n const onFormulaRemoved = (formula) => { \r\n \r\n const RelacionarFormulaKPIProyecto = `${config.UrlApiProject}ScoreCard/RelacionarFormulaKPIProyecto`; \r\n const paramsToService = { \r\n IdKPIFormula: null,\r\n IdProyectoKPIManagement : IdProyectoKPIManagementSeleccionado\r\n }; \r\n \r\n callApi(RelacionarFormulaKPIProyecto, 'POST', paramsToService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n setEsMostrarCfgFormula(false);\r\n setIdProyectoKPIManagementSeleccionado(null);\r\n setIdKPIFormulaSelected(null);\r\n obtenerInformacionKPIManagement(); \r\n });\r\n \r\n }\r\n\r\n const footer = ( \r\n <> \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n setClaArea(e.value)}\r\n errors={errors}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaLineaEstrategica(e)}\r\n disabled={props.readOnly === true ? true : EsAdminScorecard?\"\":\"disabled\"}\r\n /> \r\n
\r\n \r\n \r\n setClaIniciativaEstrategica(e.value)}\r\n errors={errors}\r\n disabled={props.readOnly === true ? true : EsAdminScorecard?\"\":\"disabled\"}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaTipoProyecto(e)}\r\n errors={errors}\r\n disabled=\"disabled\"\r\n /> \r\n
\r\n \r\n { hdInitiative === 0 ? (\r\n <>\r\n \r\n setClaIndicador(e.value)} \r\n disabled={props.readOnly === true ? true : EsAdminScorecard?\"\":\"disabled\"}\r\n /> \r\n
\r\n \r\n \r\n ) : (<>)}\r\n \r\n onChangeObjetivo(e.target)}\r\n label={t('caratulaproyecto:Objetivo')}\r\n errors={errors}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setClaPrioridad(e.value)}\r\n errors={errors}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setClaEstatusProyecto(e.value)}\r\n errors={errors}\r\n disabled={props.readOnly === true ? true : EsAdminScorecard?\"\":\"disabled\"}\r\n /> \r\n
\r\n \r\n \r\n setDetonante(e.target.value)}\r\n errors={errors}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setJustificacion(e.target.value)}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setSituacionActual(e.target.value)}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setSituacionEsperada(e.target.value)}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n setComentarios(e.target.value)}\r\n disabled={props.readOnly === true}\r\n /> \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const downloadFile = (rowData) => {\r\n const GetFileData = `${config.UrlApiProject}ScoreCard/GetMinutaArchivoDocumentosById`;\r\n const paramsToService = {\r\n IdMinutaArchivo: rowData.IdMinutaArchivo,\r\n };\r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n if(AnexoDetalle!==undefined){\r\n const linkSource = `data:application/${AnexoDetalle.TipoExtension};base64,${AnexoDetalle.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NombreArchivo}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TipoExtension}`;\r\n downloadLink.click();\r\n }\r\n });\r\n };\r\n\r\n const onConfirmRemoveSubmit = (pIdMinutaArchivo) => {\r\n swal({\r\n buttons: {\r\n cancelar: {\r\n text: 'Cancel',\r\n value: 'cancel',\r\n className: 'rounded-button danger',\r\n },\r\n continuar: {\r\n text: 'Continue',\r\n value: 'continue',\r\n className: 'rounded-button light-green',\r\n },\r\n },\r\n content: confirmationMessageHTML,\r\n }).then((value) => {\r\n switch (value) {\r\n case 'continue':\r\n // run function\r\n onSubmit(pIdMinutaArchivo);\r\n break;\r\n default:\r\n break;\r\n }\r\n });\r\n };\r\n\r\n const onSubmit = async (pIdMinutaArchivo) => {\r\n const paramsService = {\r\n IdMinutaArchivo: pIdMinutaArchivo,\r\n };\r\n const SubmitBajaAnexosActionPlan = `${config.UrlApiProject}ScoreCard/BajaAnexosMinutaileById`;\r\n callApi(SubmitBajaAnexosActionPlan, 'POST', paramsService, (response) => {\r\n obtenerInformacionMinutaFileAttachtment(); \r\n });\r\n };\r\n\r\n const NomArchivoTemplate = (rowData) => {\r\n return <>{`${rowData.NomArchivo}.${rowData.Extension}`};\r\n };\r\n\r\n const AnexoInfo = (rowData) => {\r\n return (\r\n <>\r\n {t('actionPlan:SubmitRemoveDocument')}.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/*
\r\n \r\n \r\n onChangeClaUsuarioResponsableParticipants(props,e)} \r\n suggestions={filteredResponsibleParticipants}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsibleParticipants(props, e)}\r\n errors={errors[`ParticipantsList[${props.rowData.RowIndex}]`]}\r\n /> \r\n
\r\n ) \r\n }\r\n \r\n return (<>{props.rowData.NomColaborador})\r\n \r\n };\r\n const onNewParticipantsClick = () => { \r\n const newRow = {\r\n ClaParticipante: null,\r\n ClaColaborador\t : null\t,\r\n BajaLogica: 0,\r\n IdMinuta: null\r\n };\r\n setParticipantsList([...ParticipantsList, newRow]);\r\n }\r\n const onConfirmBajaParticipants = (row, props) => { \r\n /* AQUI */ \r\n // aqui lo borro de mi arreglo \r\n const participantsListnew = [...ParticipantsList];\r\n\r\n if (participantsListnew[row.RowIndex].IdMinuta === null){\r\n participantsListnew.splice(row.RowIndex, 1);\r\n }\r\n else { \r\n participantsListnew[row.RowIndex].BajaLogica = 1;\r\n } \r\n \r\n setParticipantsList(participantsListnew); \r\n }\r\n\r\n const onChangeClaUsuarioResponsableParticipants = (props, e) => { \r\n const saveArray= getCurrentRowValuesParticipants(props); \r\n const updatedProducts = [...ParticipantsList]; \r\n \r\n const newErrors = { ...errors } \r\n const field = { ...newErrors[`ParticipantsList[${props.rowData.RowIndex}]`] };\r\n field.ClaColaborador = null;\r\n newErrors[`ParticipantsList[${props.rowData.RowIndex}]`] = field;\r\n delete newErrors[`ParticipantsList[${props.rowData.RowIndex}]`];\r\n setErrors(newErrors) ;\r\n\r\n if (e.value != null && typeof(e.value) === 'object'){\r\n const responsible = filteredResponsibleParticipants.filter(item => item.ClaColaborador ===e.value.ClaColaborador)[0]; \r\n \r\n if(responsible!==undefined){\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = responsible.NomColaborador;\r\n updatedProducts[props.rowData.RowIndex].ClaParticipante = responsible.ClaColaborador;\r\n }\r\n }\r\n else{\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = null;\r\n }\r\n updatedProducts[props.rowData.RowIndex].ClaColaborador = e.value;\r\n saveArray.ClaColaborador = e.value; \r\n setParticipantsList(updatedProducts); \r\n }\r\n const filterResponsibleParticipants = (props, event) => {\r\n let valor = ''; \r\n const updatedProducts = [...ParticipantsList];\r\n \r\n if (updatedProducts[props.rowData.RowIndex].ClaColaborador !== null && updatedProducts[props.rowData.RowIndex].ClaColaborador !== '' && event.query === \"\")\r\n {\r\n valor = updatedProducts[props.rowData.RowIndex].ClaColaborador.NomColaborador;\r\n }\r\n else{\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query \r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetColaboradorProyectosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n \r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => { \r\n setfilteredResponsibleParticipants(response.data[0]);\r\n });\r\n }\r\n const getCurrentRowValuesParticipants = (props) => {\r\n const updatedProducts = [...props.value];\r\n let RowValues ={}\r\n \r\n if (updatedProducts[props.rowIndex].ClaColaborador !== null){\r\n RowValues ={ \r\n ClaColaborador: {\r\n ClaColaborador: updatedProducts[props.rowIndex].ClaColaborador.ClaColaborador,\r\n NomColaborador: updatedProducts[props.rowIndex].ClaColaborador.NomColaborador\r\n }\r\n }\r\n }\r\n else {\r\n RowValues ={ \r\n ClaColaborador: null, \r\n }\r\n }\r\n \r\n return RowValues;\r\n }\r\n const actionBodyTemplateParticipants = (rowData, itemProps) => {\r\n if (props.readOnly === true)\r\n {\r\n return (<>);\r\n }\r\n \r\n return (\r\n <> \r\n \r\n onTipoPendienteMinutaAcuerdoChange(props,e)}\r\n errors={errors[`AcuerdoList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n const DescripcionAcuerdoEditor = ( props ) => { \r\n return (\r\n \r\n onDescripcionAcuerdoChange(props, e.target.value)} \r\n errors={errors[`AcuerdoList[${props.rowData.RowIndex}]`]} \r\n maxLength={200}\r\n />\r\n
\r\n )\r\n };\r\n const ResponsibleAcuerdoEditor = ( props ) => { \r\n return (\r\n \r\n onChangeClaUsuarioResponsableAcuerdo(props,e)} \r\n suggestions={filteredResponsibleAcuerdo}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsibleAcuerdo(props, e)}\r\n errors={errors[`AcuerdoList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n \r\n const FechaCompromisoAcuerdoEditor = ( props ) => { \r\n return (\r\n \r\n onChangeFechaCompromisoAcuerdo(props, e.target.value)}\r\n errors={errors[`AcuerdoList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n const ClaEstatusPendienteMinutaAcuerdoEditor = ( props ) => {\r\n return (\r\n \r\n onEstatusPendienteMinutaAcuerdoChange(props,e)}\r\n errors={errors[`AcuerdoList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n \r\n const ComentariosAcuerdoEditor = ( props ) => { \r\n return (\r\n \r\n onComentariosAcuerdoChange(props, e.target.value)} \r\n maxLength={200} \r\n />\r\n
\r\n )\r\n };\r\n const FechaEntregaAcuerdoEditor = ( props ) => { \r\n return (\r\n \r\n onChangeFechaEntregaAcuerdo(props, e)}\r\n /> \r\n
\r\n )\r\n };\r\n const FechaEntregaTemplateAcuerdo = (rowData) => {\r\n return (\r\n <>\r\n {(rowData.FechaEntrega !== null ? moment(rowData.FechaEntrega).format(\"MM/DD/YYYY\") : null)}\r\n \r\n );\r\n }\r\n const FechaCompromisoTemplateAcuerdo = (rowData) => {\r\n return (\r\n <>\r\n {(rowData.FechaCompromiso !== null ? moment(rowData.FechaCompromiso).format(\"MM/DD/YYYY\") : null)}\r\n \r\n );\r\n } \r\n \r\n const ComentariosAcuerdoTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.Comentarios}
\r\n \r\n );\r\n }\r\n\r\n const DescripcionAcuerdoTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.Descripcion}
\r\n \r\n );\r\n }\r\n\r\n const obtenerTipoPendienteMinutaAcuerdo = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCTipoPendienteMinuta`; \r\n const paramsToService = { \r\n }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setOpcionesTipoPendienteMinutaAcuerdo(response.data[0]);\r\n } \r\n });\r\n }\r\n const obtenerEstatusPendienteMinutaAcuerdo = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCEstatusPendienteMinuta`; \r\n const paramsToService = { \r\n }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setOpcionesEstatusPendienteMinutaAcuerdo(response.data[0]);\r\n } \r\n });\r\n }\r\n const onTipoPendienteMinutaAcuerdoChange = (props, e ) => {\r\n const updatedProducts = [...AcuerdoList];\r\n const tipominutapendiente = OpcionesTipoPendienteMinutaAcuerdo.filter(item => item.ClaTipoPendienteMinuta ===e.value)[0];\r\n if(tipominutapendiente!==undefined){\r\n updatedProducts[props.rowData.RowIndex].NomTipoPendienteMinuta = tipominutapendiente.NomTipoPendienteMinuta;\r\n }\r\n updatedProducts[props.rowData.RowIndex].ClaTipoPendienteMinuta = e.value;\r\n setAcuerdoList(updatedProducts);\r\n };\r\n const onDescripcionAcuerdoChange = (props, value) => { \r\n const updatedDescripcion = [...AcuerdoList];\r\n updatedDescripcion[props.rowData.RowIndex][props.field] = value;\r\n \r\n setAcuerdoList(updatedDescripcion); \r\n }; \r\n const onChangeClaUsuarioResponsableAcuerdo = (props, e) => { \r\n \r\n const newErrors = { ...errors } \r\n const field = { ...newErrors[`AcuerdoList[${props.rowData.RowIndex}]`] };\r\n field.ClaColaborador = null;\r\n newErrors[`AcuerdoList[${props.rowData.RowIndex}]`] = field;\r\n delete newErrors[`AcuerdoList[${props.rowData.RowIndex}]`];\r\n setErrors(newErrors) ;\r\n\r\n const saveArray= getCurrentAcuerdoRowValues(props); \r\n const updatedProducts = [...AcuerdoList]; \r\n\r\n if (e.value != null && typeof(e.value) === 'object'){\r\n const responsible = filteredResponsibleAcuerdo.filter(item => item.ClaColaborador ===e.value.ClaColaborador)[0]; \r\n \r\n if(responsible!==undefined){\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = responsible.NomColaborador;\r\n updatedProducts[props.rowData.RowIndex].ClaResponsable = responsible.ClaColaborador;\r\n }\r\n }\r\n else{\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = null;\r\n }\r\n \r\n \r\n updatedProducts[props.rowData.RowIndex].ClaColaborador = e.value;\r\n saveArray.ClaColaborador = e.value; \r\n setAcuerdoList(updatedProducts);\r\n \r\n }\r\n\r\n const onEstatusPendienteMinutaAcuerdoChange = (props, e ) => {\r\n const saveArray= getCurrentAcuerdoRowValues(props);\r\n const updatedProducts = [...AcuerdoList];\r\n const estatusminutapendiente = OpcionesEstatusPendienteMinutaAcuerdo.filter(item => item.ClaEstatusPendienteMinuta ===e.value)[0];\r\n if(estatusminutapendiente!==undefined){\r\n updatedProducts[props.rowData.RowIndex].NomEstatusPendienteMinuta = estatusminutapendiente.NomEstatusPendienteMinuta;\r\n }\r\n updatedProducts[props.rowData.RowIndex].ClaEstatusPendienteMinuta = e.value;\r\n saveArray.ClaEstatusPendienteMinuta = e.value; \r\n setAcuerdoList(updatedProducts);\r\n};\r\n\r\nconst onComentariosAcuerdoChange = (props, value) => { \r\n const updatedComentarios = [...AcuerdoList];\r\n updatedComentarios[props.rowData.RowIndex][props.field] = value;\r\n \r\n setAcuerdoList(updatedComentarios); \r\n}; \r\nconst onChangeFechaEntregaAcuerdo = (props, e) => { \r\n const updatedProducts = [...AcuerdoList];\r\n const saveArray= getCurrentAcuerdoRowValues(props); \r\n saveArray.FechaEntrega = new Date(e.target.value)\r\n updatedProducts[props.rowData.RowIndex].FechaEntrega = e.target.value;\r\n setAcuerdoList(updatedProducts); \r\n} \r\nconst onChangeFechaCompromisoAcuerdo = (props, value) => { \r\n const updatedProducts = [...AcuerdoList];\r\n const saveArray= getCurrentAcuerdoRowValues(props); \r\n saveArray.FechaCompromiso = new Date(value)\r\n updatedProducts[props.rowData.RowIndex].FechaCompromiso = value;\r\n setAcuerdoList(updatedProducts); \r\n}\r\n\r\nconst filterResponsibleAcuerdo = (props, event) => {\r\n let valor = ''; \r\n const updatedProducts = [...AcuerdoList];\r\n\r\n if (updatedProducts[props.rowData.RowIndex].ClaColaborador !== null && updatedProducts[props.rowData.RowIndex].ClaColaborador !== '' && event.query === \"\")\r\n {\r\n valor = updatedProducts[props.rowData.RowIndex].ClaColaborador.NomColaborador;\r\n }\r\n else{\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query \r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetColaboradorProyectosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n \r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => { \r\n setfilteredResponsibleAcuerdo(response.data[0]);\r\n }); \r\n \r\n }\r\n\r\nconst onConfirmBajaAcuerdo = (Acuerdo, props) => { \r\n const AcuerdoListnew = [...AcuerdoList];\r\n // AcuerdoListnew.splice(props.rowIndex, 1);\r\n if (AcuerdoListnew[Acuerdo.RowIndex].IdMinuta === null){\r\n AcuerdoListnew.splice(Acuerdo.RowIndex, 1);\r\n }\r\n else { \r\n AcuerdoListnew[Acuerdo.RowIndex].BajaLogica = 1;\r\n } \r\n setAcuerdoList(AcuerdoListnew);\r\n }\r\n\r\nconst onNewAcuerdoClick = () => { \r\n const newRow = { \r\n RowIndex: AcuerdoList.length,\r\n ClaResponsable: null,\r\n ClaTipoPendienteMinuta\t : 1,\r\n Descripcion\t : null,\r\n ClaColaborador : null,\r\n FechaCompromiso: null,\r\n ClaEstatusPendienteMinuta: 1,\r\n NomEstatusPendienteMinuta: \"\",\r\n Comentarios: \"\",\r\n NomTipoPendienteMinuta:\"\",\r\n FechaEntrega: null,\r\n BajaLogica: 0,\r\n IdMinuta: null\r\n };\r\n const updatedProducts = [...AcuerdoList];\r\n updatedProducts.push(newRow);\r\n\r\n const tipominutapendiente = OpcionesTipoPendienteMinutaAcuerdo.filter(item => item.ClaTipoPendienteMinuta ===newRow.ClaTipoPendienteMinuta)[0];\r\n if(tipominutapendiente!==undefined){\r\n updatedProducts[newRow.RowIndex].NomTipoPendienteMinuta = tipominutapendiente.NomTipoPendienteMinuta;\r\n }\r\n\r\n const estatusminutapendiente = OpcionesEstatusPendienteMinutaAcuerdo.filter(item => item.ClaEstatusPendienteMinuta ===newRow.ClaEstatusPendienteMinuta)[0];\r\n if(estatusminutapendiente!==undefined){\r\n updatedProducts[newRow.RowIndex].NomEstatusPendienteMinuta = estatusminutapendiente.NomEstatusPendienteMinuta;\r\n } \r\n\r\n updatedProducts[newRow.RowIndex].ClaTipoPendienteMinuta = newRow.ClaTipoPendienteMinuta;\r\n updatedProducts[newRow.RowIndex].ClaEstatusPendienteMinuta = newRow.ClaEstatusPendienteMinuta;\r\n setAcuerdoList(updatedProducts);\r\n\r\n }\r\n \r\nconst getCurrentAcuerdoRowValues = (props) => {\r\n const updatedProducts = [...props.value];\r\n let RowValues ={}\r\n\r\n if (updatedProducts[props.rowIndex].ClaColaborador !== null){\r\n RowValues ={\r\n ClaTipoPendienteMinuta: updatedProducts[props.rowIndex].ClaTipoPendienteMinuta,\r\n Descripcion: updatedProducts[props.rowIndex].Descripcion,\r\n ClaColaborador: {\r\n ClaColaborador: updatedProducts[props.rowIndex].ClaColaborador.ClaColaborador,\r\n NomColaborador: updatedProducts[props.rowIndex].ClaColaborador.NomColaborador\r\n },\r\n FechaCompromiso: updatedProducts[props.rowIndex].FechaCompromiso,\r\n ClaEstatusPendienteMinuta: updatedProducts[props.rowIndex].ClaEstatusPendienteMinuta, \r\n Comentarios: updatedProducts[props.rowIndex].Comentarios,\r\n FechaEntrega: updatedProducts[props.rowIndex].FechaEntrega\r\n }\r\n }\r\n else {\r\n RowValues ={\r\n ClaTipoPendienteMinuta: updatedProducts[props.rowIndex].ClaTipoPendienteMinuta,\r\n Descripcion: updatedProducts[props.rowIndex].Descripcion,\r\n ClaColaborador: null,\r\n FechaCompromiso: updatedProducts[props.rowIndex].FechaCompromiso,\r\n ClaEstatusPendienteMinuta: updatedProducts[props.rowIndex].ClaEstatusPendienteMinuta, \r\n Comentarios: updatedProducts[props.rowIndex].Comentarios,\r\n FechaEntrega: updatedProducts[props.rowIndex].FechaEntrega\r\n }\r\n }\r\n \r\n return RowValues;\r\n } \r\n\r\nconst actionBodyTemplateAcuerdo = (rowData, itemProps) => {\r\n \r\n if (props.readOnly === true)\r\n {\r\n return (<>)\r\n }\r\n\r\n return (\r\n <> \r\n \r\n setIdMinuta(e.target.value)}\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n onChangeMeetingType(e)}\r\n disabled={EsTieneTipoMinutaFija}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {t('misProyectosScreen:EsMostrarSoloUsuarioMSW')}\r\n onChangeIncluirSoloUsuariosMSW(props, e)}\r\n />\r\n
\r\n \r\n \r\n onChangePeriodo(e)}\r\n errors={errors}\r\n disabled={EsTieneInfoPeriodoFija}\r\n /> \r\n \r\n
\r\n \r\n \r\n onChangeFechaReporte(e)}\r\n errors={errors}\r\n disabled={EsTieneInfoPeriodoFija}\r\n /> \r\n
\r\n \r\n \r\n onChangePuesto(e)}\r\n errors={errors}\r\n disabled={EsTieneInfoPeriodoFija}\r\n /> \r\n
\r\n \r\n \r\n onChangeProyectoNoMaestro(e)}\r\n disabled={EsTieneTipoMinutaFija}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeLugar(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onChangeAsunto(e)}\r\n label={t('minutameeting:Asunto')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeObjetivo(e)}\r\n label={t('minutameeting:Objective')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaUsuarioResponsable(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n): (\r\n <>\r\n \r\n
\r\n \r\n \r\n)\r\n}\r\n \r\n setComentarios(e.target.value)}\r\n /> \r\n
\r\n \r\n \r\n
\r\n )\r\n };\r\n const LugarEditor = (props) => {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n const NomResponsableEditor = (props) => {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n const TaskEditor = (props) => {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n const OpenTaskEditor = (props) => {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n const FechaReunion = (rowData) => {\r\n return (\r\n <>\r\n \r\n {/* { moment(rowData.FechaReunion).format(\"LL\") } - { moment(rowData.FechaReunion).format(\"LL\") } */}\r\n {moment(rowData.FechaReunion).format(\"MM/DD/YYYY\")}\r\n
\r\n \r\n );\r\n }\r\n const AccionesTemplate = (row) => {\r\n let className = '';\r\n const Porcentaje = (row.Task > 0 && row.OpenTask > 0 ? ((row.Task - row.OpenTask) / row.Task) : 1.0) * 100.0\r\n\r\n\r\n switch (true) {\r\n case Porcentaje < 50:\r\n className = \"danger-color\";\r\n break;\r\n case Porcentaje < 75:\r\n className = \"orange-color\";\r\n break;\r\n case Porcentaje < 99:\r\n className = \"warning-color\";\r\n break;\r\n case Porcentaje === 100:\r\n className = \"success-color\";\r\n break;\r\n default:\r\n className = \"default-color\";\r\n }\r\n return (\r\n <>\r\n {/* \r\n {row.OpenTask} \r\n {t('hr:Of')} \r\n {row.Task} \r\n {t('hr:Activities')} \r\n
*/}\r\n \r\n
\r\n \r\n );\r\n }\r\n const actionBodyTemplate = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n onClickViewDetailMeeting(rowData)} />\r\n \r\n onOpenModal(rowData)} />\r\n
\r\n \r\n );\r\n }\r\n const modalFooter = () => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onChangeCopiarA(e)}\r\n value={CopiarA}\r\n errors={errors} \r\n />\r\n
\r\n \r\n \r\n onChangeMensajeModal(e)}\r\n label={t('minutameeting:Message')}\r\n />\r\n
\r\n \r\n \r\n {e.value}\r\n
\r\n ) \r\n }\r\n return (\r\n \r\n {e.value}\r\n
\r\n ) \r\n \r\n}\r\n\r\nconst sClaseEstatusProyecto = (nClaEstatus) => {\r\n let sclass = '';\r\n switch (nClaEstatus) {\r\n case 2:\r\n sclass = 'info'; \r\n break;\r\n case 3:\r\n sclass = 'danger'; \r\n break;\r\n case 4:\r\n sclass = 'orange'; \r\n break;\r\n case 5:\r\n sclass = 'success'; \r\n break;\r\n default:\r\n sclass = 'default'; \r\n }\r\n return (\r\n sclass\r\n );\r\n}\r\n\r\nconst onHideFase = () => {\r\n // document.body.classList.remove('bodynotscroll');\r\n setEsFaseDetalle(false);\r\n}\r\n\r\nconst onHideActividad = () => {\r\n // document.body.classList.remove('bodynotscroll');\r\n setEsFaseActividad(false);\r\n}\r\n\r\nconst onChangeEsFaseActividad = () => {\r\n setClaActividad(null); \r\n onHideActividad();\r\n obtenerInformacionProyectoGantt();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n};\r\n\r\nconst onChangeEsFaseDetalle = () => { \r\n setClaFase(null); \r\n onHideFase(); \r\n obtenerInformacionProyectoGantt();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n};\r\n\r\nconst onClickCloseFaseDetalle = () => { \r\n setClaFase(null); \r\n onHideFase(); \r\n};\r\n\r\nconst toggleFullScreen = () => {\r\n \r\n setisGanttFullScreenMode(!isGanttFullScreenMode);\r\n /*\r\n const element = ganttRef.current; // .getDOMNode()\r\n if (!document.fullscreenElement) {\r\n if (element.requestFullscreen) {\r\n element.requestFullscreen();\r\n } else if (element.mozRequestFullScreen) { \r\n element.mozRequestFullScreen();\r\n } else if (element.webkitRequestFullscreen) { \r\n element.webkitRequestFullscreen();\r\n } else if (element.msRequestFullscreen) { \r\n element.msRequestFullscreen();\r\n }\r\n } else if (document.exitFullscreen) {\r\n document.exitFullscreen();\r\n } else if (document.mozCancelFullScreen) {\r\n document.mozCancelFullScreen(); \r\n } else if (document.webkitExitFullscreen) {\r\n document.webkitExitFullscreen();\r\n } else if (document.msExitFullscreen) {\r\n document.msExitFullscreen();\r\n }\r\n */\r\n};\r\n\r\nconst fullScreenTemplate = () => {\r\n \r\n if (isGanttFullScreenMode){\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {\r\n EsFaseActividad!= null ? (\r\n <> \r\n
\r\n )\r\n}\r\n\r\nif (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n onNomFaseChange(props, e.target.value)}\r\n max={100}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const OrdenColumnEditor = (props) => {\r\n return (\r\n \r\n onOrdenChange(props, e.target.value)}\r\n max={999999}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onOrdenChange = (props, value) => {\r\n const updatedFasesProyectosPorcPeso = [...props.value];\r\n updatedFasesProyectosPorcPeso[props.rowIndex][props.field] = value;\r\n\r\n setFasesProyectosPorcPeso(updatedFasesProyectosPorcPeso);\r\n };\r\n\r\n const modalFooter = () => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n onClaProyectoChange(props,e)}\r\n errors={errors[`ProyectoMaestroDetalleList[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n const PorcPesoEditor = (props) => {\r\n return (\r\n \r\n onPorcPesoChange(props, e.target.value)}\r\n errors={errors[`ProyectoMaestroDetalleList[${props.rowData.RowIndex}]`]} \r\n />\r\n
\r\n );\r\n };\r\n const fieldsRequiredProyectoMaestroDetalleList = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`ProyectoMaestroDetalleList[${props.rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n }\r\n const FechaEstimadaInicioTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaEstimadaInicio !== null\r\n ? moment(rowData.FechaEstimadaInicio).format('MM/DD/YYYY')\r\n : rowData.FechaEstimadaInicio}\r\n \r\n );\r\n };\r\n\r\n const FechaEstimadaFinTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaEstimadaFin !== null\r\n ? moment(rowData.FechaEstimadaFin).format('MM/DD/YYYY')\r\n : rowData.FechaEstimadaFin}\r\n \r\n );\r\n };\r\n\r\n const PorcPesoTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n };\r\n\r\n const actionBodyTemplateProyectoMaestro = (rowData, props) => {\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n \r\n\r\n if (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n /* SI NO TIENE PERMISOS PARA VER EL DETALLE DEL PROYECTO */\r\n if (!EsProjectManager && !EsAdminBSC && !EsStakeHolder){\r\n return (\r\n <> \r\n \r\n {t('common:EditProject')}\r\n
\r\n \r\n {t('caratulaproyecto:NoAccessToEdiProject')}
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n )\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n\r\n const downloadFile = (rowData) => { \r\n const GetFileData = `${config.UrlApiProject}ScoreCard/GetAnexosActionPlanFileById`; \r\n const paramsToService = { \r\n IdArchivo:rowData.IdArchivo\r\n }; \r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n if(AnexoDetalle!==undefined){\r\n const linkSource = `data:application/${rowData.TipoExtension};base64,${AnexoDetalle.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${rowData.NombreArchivo}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName }.${ rowData.TipoExtension}`;\r\n downloadLink.click();\r\n }\r\n });\r\n }\r\n \r\nconst onConfirmRemoveSubmit = (nIdArchivo) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n onSubmit(nIdArchivo);\r\n break; \r\n default:\r\n break;\r\n }\r\n }); \r\n}\r\n\r\nconst onSubmit = async (nIdArchivo) => { \r\n const paramsService = {\r\n IdArchivo: nIdArchivo\r\n }; \r\n const SubmitBajaAnexosActionPlan = `${config.UrlApiProject}ScoreCard/BajaAnexosActionPlanFileById`;\r\n callApi(SubmitBajaAnexosActionPlan, 'POST', paramsService, (response) => { \r\n obtenerInformacionActionPlanFileAttachtment(); \r\n props.obtenerInformacionActionPlanFile !== undefined? props.obtenerInformacionActionPlanFile(IdCSF, ClaPeriodo, ClaFechaReporte) : \"\"; \r\n }); \r\n} \r\n\r\nconst NomArchivoTemplate = (rowData) => {\r\n return (\r\n <>\r\n { `${rowData.NombreArchivo}.${rowData.Extension}` } \r\n \r\n )\r\n}\r\n \r\nconst AnexoInfo = (rowData) => {\r\n return (\r\n <> \r\n {t('actionPlan:SubmitRemoveDocument')}.
\r\n \r\n \r\n
\r\n \r\n onTipoArchivoChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n onChangeAPCommPrevious(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n} \r\n\r\nActionPlanScoreSquare.propTypes = { \r\n title: PropTypes.string,\r\n score: PropTypes.any,\r\n range: PropTypes.string,\r\n severity: PropTypes.oneOf(['green', 'yellow', 'red'])\r\n}\r\n\r\nexport default ActionPlanScoreSquare; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n Row,\r\n Col,\r\n ListGroupItem,\r\n ListGroup,\r\n Progress,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n CardTitle,\r\n Label\r\n} from 'reactstrap';\r\nimport { Panel } from 'primereact/panel';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Badge } from 'primereact/badge';\r\n// import FeedbackCoaching from './FeedbackCoaching.jsx';\r\nimport { Link } from 'react-router-dom';\r\nimport ActionPlanScoreSquare from './ActionPlanScoreSquare.jsx';\r\nimport { Toolbar } from 'primereact/toolbar';\r\nimport Highcharts from 'highcharts';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, tracker, getSessionItem, showSweetAlert } from '../../../../utils/utils';\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport { Column } from 'primereact/column';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { Tag } from 'primereact/tag';\r\nimport moment from \"moment\"; \r\n\r\nconst KPIObjectivesDetail = ({\r\n ClaDepartamento,\r\n ClaArea,\r\n ClaTipoIndicador,\r\n ClaIndicador,\r\n ClaPuesto,\r\n ClaAnio,\r\n showCloseButton,\r\n onCloseClick,\r\n NomKPI\r\n}) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['focusReport', 'common']); \r\n\r\n const [PuestoIndicadorDetList, setIndicadorPuestoDetalleList] = useState([]);\r\n const [nomIndicadorSelected, setNomIndicadorSelected] = useState(null); \r\n\r\n useEffect(() => { \r\n GetKPIObjetivosDetalle();\r\n }, [ClaDepartamento, ClaArea, ClaTipoIndicador, ClaIndicador,ClaPuesto,ClaAnio ]);\r\n\r\n const GetKPIObjetivosDetalle = () => {\r\n const GetIndicadorPuesto = `${config.UrlApiProject}ScoreCard/GetIndicadorPuestoDetalle`;\r\n const paramsToService = {\r\n ClaDepartamento,\r\n ClaArea,\r\n ClaTipoIndicador,\r\n ClaIndicador,\r\n ClaPuesto,\r\n ClaAnio,\r\n }; \r\n callApi(GetIndicadorPuesto, 'POST', paramsToService, (response) => {\r\n setIndicadorPuestoDetalleList(response.data.IndicadorPuestoDetalle); \r\n } );\r\n };\r\n \r\n const headerPuestoIndicadorDet = <>{NomKPI} {t('position:ByPeriod')};\r\n \r\n const NomMesTemplate = (props) => {\r\n\r\n if (props.EsMostrarBotonActualizarResultado === true) {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n confirmacionRecalcultarEstatusKPI(props)}>\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n\r\n return (<>{props.NomMes});\r\n\r\n \r\n }\r\n\r\n const EstatusPeriodoTemplate = (props) => {\r\n let className = '';\r\n\r\n switch (props.ColorEstatus) {\r\n case 1:\r\n className = 'danger-color';\r\n break;\r\n case 2:\r\n className = 'warning-color';\r\n break;\r\n case 3:\r\n className = 'success-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n return (\r\n <>\r\n \r\n \r\n {props.EstatusPeriodo !== null? Highcharts.numberFormat(props.EstatusPeriodo, 2, '.', ','): null}\r\n \r\n );\r\n };\r\n const MinimoTemplate = (props) => {\r\n return <>{props.Minimo !== null? Highcharts.numberFormat(props.Minimo, 2, '.', ',') : null};\r\n };\r\n const SatisfactorioTemplate = (props) => {\r\n return <>{props.Satisfactorio !== null? Highcharts.numberFormat(props.Satisfactorio, 2, '.', ','): null};\r\n };\r\n\r\n const SobreSalienteTemplate = (props) => {\r\n return <>{props.SobreSaliente !== null? Highcharts.numberFormat(props.SobreSaliente, 2, '.', ','): null};\r\n };\r\n \r\n\r\n return (\r\n <>\r\n | {props.NomMes} | \r\n\r\n |
\r\n
\r\n \r\n {headerPuestoIndicadorDet}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n AbrirNotas(rowData)}\r\n className={`fas fa-sticky-note ${\r\n rowData.cComentarioTarea !== null && rowData.cComentarioTarea !== ''\r\n ? 'light-yellow-color'\r\n : 'light-gray-color'\r\n }`}\r\n >\r\n \r\n
\r\n);\r\n };\r\n \r\n\r\n const onChangePickOne = (value, props) => {\r\n const updatedPickOne = [...CausaRaizList];\r\n for (let i = 0; i < updatedPickOne.length; i++) {\r\n if (props.rowData.IdCausa === updatedPickOne[i].IdCausa) {\r\n updatedPickOne[i].EsSeleccionada = 1;\r\n if (props.rowData.DescripcionCausa !== null && props.rowData.DescripcionCausa !== '') {\r\n setIdCausaAux(props.rowData.IdCausa);\r\n }\r\n } else {\r\n updatedPickOne[i].EsSeleccionada = 0;\r\n }\r\n }\r\n setPickOneVal(value);\r\n setIdCausa(props.rowData.IdCausa);\r\n };\r\n\r\n const onChangeExplicacionResultado = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ExplicacionResultado;\r\n setErrors(newErrors);\r\n setExplicacionResultado(e.target.value);\r\n };\r\n\r\n \r\n \r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onNewClick = () => {\r\n const newRow = {\r\n RowIndex: ResponsablesList.length,\r\n cIdCausa: null,\r\n DescAccion: null,\r\n ClaColaborador: null,\r\n cFechaCompromiso: null,\r\n cFechaTermino: null,\r\n cIdPlanAccion: null,\r\n };\r\n const updatedProducts = [...ResponsablesList];\r\n updatedProducts.push(newRow);\r\n\r\n setResponsablesList(updatedProducts);\r\n };\r\n \r\n\r\n const valitationScheme = yup.object().shape({\r\n ExplicacionResultado: yup.string().required(t('common:RequiredField')).nullable(),\r\n CausaRaizList: yup.array().of(\r\n yup.object().shape({\r\n DescripcionCausa: yup\r\n .string()\r\n .when('EsSeleccionada', {\r\n is: 1,\r\n then: yup.string().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }),\r\n })\r\n ),\r\n ResponsablesList: yup.array().of(\r\n yup.object().shape({\r\n cDescAccion: yup.string().required(t('common:RequiredField')).nullable(),\r\n ClaColaborador: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n cFechaCompromiso: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n })\r\n ) \r\n });\r\n\r\n const valitationMarkAsReviewedScheme = yup.object().shape({ \r\n CausaRaiz: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n AgregarAcciones: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n CrearActionPlan: yup.mixed().required(t('common:RequiredField')).nullable()\r\n });\r\n\r\n const headerResponsable = (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n onChangeExplicacionResultado(e)}\r\n errors={errors}\r\n className=\"bottom-rounded\"\r\n readonly={true}\r\n />\r\n
\r\n \r\n );\r\n\r\n const RenderCausaRaiz = (\r\n <>\r\n \r\n {rowData.PositionName}\r\n
\r\n \r\n { rowData.Responsible} \r\n
\r\n \r\n );\r\n } \r\n\r\n const AccionesTemplateAp = (row) => {\r\n let className = '';\r\n\r\n switch (row.PlanAccionBandera) {\r\n case 0:\r\n className = 'fas fa-flag-checkered Cursor';\r\n break;\r\n case 1:\r\n className = 'fa fa-flag danger-color Cursor';\r\n break;\r\n case 2:\r\n className = 'fa fa-flag warning-color Cursor';\r\n break;\r\n case 3:\r\n className = 'fa fa-flag success-color Cursor';\r\n break;\r\n default:\r\n className = 'fa fa-flag default-color Cursor';\r\n }\r\n return (\r\n <>\r\n onClickReviewActionPlan(row)}>\r\n \r\n );\r\n };\r\n\r\n const onClickReviewActionPlan = (row) => { \r\n setIsAtLeastOneActionPlanOpen(true);\r\n setIdCSFSel(row.IdCSF);\r\n setClaPeriodoSel(row.ClaPeriodo);\r\n setClaFechaReporteSel(row.ClaFechaReporte); \r\n setEsReviewActionPlan(true); \r\n }\r\n\r\n const onHideActionPlanReview = () => {\r\n setEsReviewActionPlan(false); \r\n setIsAtLeastOneActionPlanOpen(true); \r\n }\r\n\r\n // Cuando es un nuevo plan de accion lo renderizamos en modo wizard, para llevar al usuario\r\n // paso a paso o cuando se decide no crear action plan por que es manager del kpi\r\n \r\n \r\n if (IdPlanAccion === null || (IdPlanAccion > 0 && showAsEmptyActionPlan)) {\r\n return (\r\n <> \r\n \r\n {ResFecha} \r\n
\r\n \r\n {TopicoAnalisis}
\r\n \r\n\r\n onchangeCausaRaiz(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n onchangeAgregarAcciones(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n onchangeCrearActionPlan(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n {t('actionPlan:HelpReviewActionPlan')}\r\n
\r\n\r\n \r\n
\r\n \r\n {t('actionPlan:APForNoExists').replace('[TopicAnalisis]', TopicoAnalisis)}. \r\n
\r\n \r\n \r\n AbrirAnexo()}\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {ResFecha} \r\n
\r\n \r\n {TopicoAnalisis}
\r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n {\r\n // la navegacion esta visible unicamente cuando son mas de 1\r\n ActionPlanList.length > 1\r\n ?\r\n (\r\n \r\n \r\n
\r\n \r\n \r\n AbrirNotas(rowData)}\r\n className={`fas fa-sticky-note ${\r\n rowData.cComentarioTarea !== null && rowData.cComentarioTarea !== ''\r\n ? 'light-yellow-color'\r\n : 'light-gray-color'\r\n }`}\r\n >\r\n \r\n
\r\n);\r\n };\r\n \r\n\r\n const onChangePickOne = (value, props) => {\r\n const updatedPickOne = [...CausaRaizList];\r\n for (let i = 0; i < updatedPickOne.length; i++) {\r\n if (props.rowData.IdCausa === updatedPickOne[i].IdCausa) {\r\n updatedPickOne[i].EsSeleccionada = 1;\r\n if (props.rowData.DescripcionCausa !== null && props.rowData.DescripcionCausa !== '') {\r\n setIdCausaAux(props.rowData.IdCausa);\r\n }\r\n } else {\r\n updatedPickOne[i].EsSeleccionada = 0;\r\n }\r\n }\r\n setPickOneVal(value);\r\n setIdCausa(props.rowData.IdCausa);\r\n };\r\n\r\n const onChangeExplicacionResultado = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ExplicacionResultado;\r\n setErrors(newErrors);\r\n setExplicacionResultado(e.target.value);\r\n };\r\n\r\n \r\n \r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onNewClick = () => {\r\n const newRow = {\r\n RowIndex: ResponsablesList.length,\r\n cIdCausa: null,\r\n DescAccion: null,\r\n ClaColaborador: null,\r\n cFechaCompromiso: null,\r\n cFechaTermino: null,\r\n cIdPlanAccion: null,\r\n };\r\n const updatedProducts = [...ResponsablesList];\r\n updatedProducts.push(newRow);\r\n\r\n setResponsablesList(updatedProducts);\r\n };\r\n \r\n\r\n const valitationScheme = yup.object().shape({\r\n ExplicacionResultado: yup.string().required(t('common:RequiredField')).nullable(),\r\n CausaRaizList: yup.array().of(\r\n yup.object().shape({\r\n DescripcionCausa: yup\r\n .string()\r\n .when('EsSeleccionada', {\r\n is: 1,\r\n then: yup.string().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }),\r\n })\r\n ),\r\n ResponsablesList: yup.array().of(\r\n yup.object().shape({\r\n cDescAccion: yup.string().required(t('common:RequiredField')).nullable(),\r\n ClaColaborador: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n cFechaCompromiso: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n })\r\n ) \r\n });\r\n\r\n const valitationMarkAsReviewedScheme = yup.object().shape({ \r\n CausaRaiz: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n AgregarAcciones: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n CrearActionPlan: yup.mixed().required(t('common:RequiredField')).nullable()\r\n });\r\n\r\n const headerResponsable = (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n onChangeExplicacionResultado(e)}\r\n errors={errors}\r\n className=\"bottom-rounded\"\r\n readonly={true}\r\n />\r\n
\r\n \r\n );\r\n\r\n const RenderCausaRaiz = (\r\n <>\r\n \r\n {rowData.PositionName}\r\n
\r\n \r\n { rowData.Responsible} \r\n
\r\n \r\n );\r\n } \r\n\r\n const AccionesTemplateAp = (row) => {\r\n let className = '';\r\n\r\n switch (row.PlanAccionBandera) {\r\n case 0:\r\n className = 'fas fa-flag-checkered Cursor';\r\n break;\r\n case 1:\r\n className = 'fa fa-flag danger-color Cursor';\r\n break;\r\n case 2:\r\n className = 'fa fa-flag warning-color Cursor';\r\n break;\r\n case 3:\r\n className = 'fa fa-flag success-color Cursor';\r\n break;\r\n default:\r\n className = 'fa fa-flag default-color Cursor';\r\n }\r\n return (\r\n <>\r\n onClickReviewActionPlan(row)}>\r\n \r\n );\r\n };\r\n\r\n const onClickReviewActionPlan = (row) => { \r\n setIsAtLeastOneActionPlanOpen(true);\r\n setIdCSFSel(row.IdCSF);\r\n setClaPeriodoSel(row.ClaPeriodo);\r\n setClaFechaReporteSel(row.ClaFechaReporte); \r\n setEsReviewActionPlan(true); \r\n }\r\n\r\n const onHideActionPlanReview = () => {\r\n setEsReviewActionPlan(false); \r\n setIsAtLeastOneActionPlanOpen(true); \r\n }\r\n\r\n // Cuando es un nuevo plan de accion lo renderizamos en modo wizard, para llevar al usuario\r\n // paso a paso o cuando se decide no crear action plan por que es manager del kpi\r\n \r\n \r\n if (IdPlanAccion === null || (IdPlanAccion > 0 && showAsEmptyActionPlan)) {\r\n return (\r\n <> \r\n \r\n {ResFecha} \r\n
\r\n \r\n {TopicoAnalisis}
\r\n \r\n\r\n onchangeCausaRaiz(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n onchangeAgregarAcciones(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n onchangeCrearActionPlan(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={true}\r\n /> \r\n
\r\n \r\n \r\n {t('actionPlan:HelpReviewActionPlan')}\r\n
\r\n\r\n \r\n
\r\n \r\n {t('actionPlan:APForNoExists').replace('[TopicAnalisis]', TopicoAnalisis)}. \r\n
\r\n \r\n \r\n AbrirAnexo()}\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {ResFecha} \r\n
\r\n \r\n {TopicoAnalisis}
\r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n {\r\n // la navegacion esta visible unicamente cuando son mas de 1\r\n ActionPlanList.length > 1\r\n ?\r\n (\r\n \r\n \r\n
\r\n \r\n \r\n onChangeClaUsuarioResponsable(props, e)}\r\n suggestions={filteredResponsible}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsible(props, e)}\r\n errors={errors[`ResponsablesList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const Descripcionditor = (props) => {\r\n return (\r\n \r\n onDescripcionChange(props, e.target.value)}\r\n errors={errors[`ResponsablesList[${props.rowData.RowIndex}]`]}\r\n maxLength={550}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PickOneColumn = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n onChangeFechaCompromiso(props, e.target.value)}\r\n errors={errors[`ResponsablesList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const FechaEntregaEditor = (props) => {\r\n return (\r\n \r\n onChangeFechaEntrega(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const FechaEntregaPendingActionEditor = (props) => {\r\n return (\r\n \r\n onChangeFechaEntregaPendingAction(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const fieldsRequiredActionPlan = (rowData, props) => {\r\n return (\r\n <>\r\n {errors[`ResponsablesList[${props.rowData.RowIndex}]`] != null ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n };\r\n\r\n const actionBodyTemplateActionPlan = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n AbrirNotas(rowData)}\r\n className={`fas fa-sticky-note ${\r\n rowData.cComentarioTarea !== null && rowData.cComentarioTarea !== ''\r\n ? 'light-yellow-color'\r\n : 'light-gray-color'\r\n }`}\r\n >\r\n \r\n
\r\n ) : (\r\n ''\r\n );\r\n };\r\n const AddNotePendingActionTemplate = (rowData) => {\r\n return (\r\n \r\n AbrirNotas(rowData)}\r\n className={`fas fa-sticky-note ${\r\n rowData.cComentarioTarea !== null && rowData.cComentarioTarea !== ''\r\n ? 'light-yellow-color'\r\n : 'light-gray-color'\r\n }`}\r\n >\r\n \r\n
\r\n );\r\n };\r\n\r\n const PossibleCauseEditor = (props) => {\r\n return (\r\n \r\n onPossibleCauseChange(props, e.target.value)}\r\n errors={errors[`CausaRaizList[${props.rowData.RowIndex}]`]}\r\n maxLength={550}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const WeighEditor = (props) => {\r\n return (\r\n \r\n onWeighChange(props, e.target.value)}\r\n minFractionDigits={0}\r\n min={0}\r\n max={100}\r\n errors={errors[`CausaRaizList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onPossibleCauseChange = (props, value) => {\r\n // setDescCausaRaiz(value);\r\n const newErrors = { ...errors };\r\n delete newErrors.DescripcionCausa;\r\n setErrors(newErrors);\r\n\r\n if (value === null || value === '') {\r\n setIdCausaAux(null);\r\n }\r\n const updatedDescripcion = [...CausaRaizList];\r\n updatedDescripcion[props.rowIndex][props.field] = value;\r\n setCausaRaizList(updatedDescripcion);\r\n };\r\n\r\n const onWeighChange = (props, value) => {\r\n const updatedDescripcion = [...CausaRaizList];\r\n updatedDescripcion[props.rowIndex][props.field] = value;\r\n setCausaRaizList(updatedDescripcion);\r\n };\r\n\r\n const onDescripcionChange = (props, value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.cDescAccion;\r\n setErrors(newErrors);\r\n const updatedDescripcion = [...ResponsablesList];\r\n updatedDescripcion[props.rowData.RowIndex][props.field] = value;\r\n\r\n setResponsablesList(updatedDescripcion);\r\n };\r\n\r\n const onChangeFechaCompromiso = (props, value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.cFechaCompromiso;\r\n setErrors(newErrors);\r\n const updatedProducts = [...ResponsablesList];\r\n const saveArray = getCurrentActionPlanRowValues(props);\r\n saveArray.cFechaCompromiso = new Date(value);\r\n updatedProducts[props.rowData.RowIndex].cFechaCompromiso = value;\r\n setResponsablesList(updatedProducts);\r\n };\r\n\r\n const onChangeFechaEntrega = (props, e) => {\r\n const updatedProducts = [...ResponsablesList];\r\n const saveArray = getCurrentActionPlanRowValues(props);\r\n saveArray.cFechaTermino = new Date(e.target.value);\r\n updatedProducts[props.rowData.RowIndex].cFechaTermino = e.target.value;\r\n setResponsablesList(updatedProducts);\r\n };\r\n\r\n const onChangeFechaEntregaPendingAction = (props, e) => {\r\n const updatedProducts = [...HistorialPendientesList];\r\n // const saveArray = getCurrentActionPlanRowValues(props);\r\n // saveArray.cFechaTermino = new Date(e.target.value);\r\n updatedProducts[props.rowData.RowIndex].cFechaTermino = e.target.value;\r\n setHistorialPendientesList(updatedProducts);\r\n };\r\n\r\n const onConfirmBajaActionPlan = (ActionPlan, props) => {\r\n const ActionPlanListnew = [...ResponsablesList];\r\n if (ActionPlanListnew[ActionPlan.RowIndex].cIdCausa === null) {\r\n ActionPlanListnew.splice(ActionPlan.RowIndex, 1);\r\n } else {\r\n ActionPlanListnew[ActionPlan.RowIndex].BajaLogica = 1;\r\n }\r\n setResponsablesList(ActionPlanListnew);\r\n };\r\n\r\n const onChangePickOne = (value, props) => {\r\n const updatedPickOne = [...CausaRaizList];\r\n for (let i = 0; i < updatedPickOne.length; i++) {\r\n if (props.rowData.IdCausa === updatedPickOne[i].IdCausa) {\r\n updatedPickOne[i].EsSeleccionada = 1;\r\n if (props.rowData.DescripcionCausa !== null && props.rowData.DescripcionCausa !== '') {\r\n setIdCausaAux(props.rowData.IdCausa);\r\n }\r\n } else {\r\n updatedPickOne[i].EsSeleccionada = 0;\r\n }\r\n }\r\n setPickOneVal(value);\r\n setIdCausa(props.rowData.IdCausa);\r\n };\r\n\r\n const onChangeExplicacionResultado = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ExplicacionResultado;\r\n setErrors(newErrors);\r\n setExplicacionResultado(e.target.value);\r\n };\r\n\r\n const onChangeClaUsuarioResponsable = (props, e) => {\r\n const newErrors = { ...errors };\r\n const field = { ...newErrors[`ResponsablesList[${props.rowData.RowIndex}]`] };\r\n field.ClaColaborador = null;\r\n newErrors[`ResponsablesList[${props.rowData.RowIndex}]`] = field;\r\n delete newErrors[`ResponsablesList[${props.rowData.RowIndex}]`];\r\n setErrors(newErrors);\r\n\r\n const saveArray = getCurrentActionPlanRowValues(props);\r\n const updatedProducts = [...ResponsablesList];\r\n\r\n if (e.value != null && typeof e.value === 'object') {\r\n const responsible = filteredResponsible.filter(\r\n (item) => item.ClaColaborador === e.value.ClaColaborador\r\n )[0];\r\n\r\n if (responsible !== undefined) {\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = responsible.NomColaborador;\r\n updatedProducts[props.rowData.RowIndex].cClaColaborador = responsible.ClaColaborador;\r\n }\r\n } else {\r\n updatedProducts[props.rowData.RowIndex].NomColaborador = null;\r\n }\r\n\r\n updatedProducts[props.rowData.RowIndex].ClaColaborador = e.value;\r\n saveArray.ClaColaborador = e.value;\r\n setResponsablesList(updatedProducts);\r\n };\r\n\r\n const getCurrentActionPlanRowValues = (props) => {\r\n const updatedProducts = [...props.value];\r\n let RowValues = {};\r\n\r\n if (updatedProducts[props.rowIndex].ClaColaborador !== null) {\r\n RowValues = {\r\n cIdCausa: updatedProducts[props.rowIndex].cIdCausa,\r\n cDescAccion: updatedProducts[props.rowIndex].cDescAccion,\r\n ClaColaborador: {\r\n ClaColaborador: updatedProducts[props.rowIndex].ClaColaborador.ClaColaborador,\r\n NomColaborador: updatedProducts[props.rowIndex].ClaColaborador.NomColaborador,\r\n },\r\n NomColaborador: updatedProducts[props.rowIndex].cNomColaborador,\r\n cFechaCompromiso: updatedProducts[props.rowIndex].cFechaCompromiso,\r\n cFechaTermino: updatedProducts[props.rowIndex].cFechaEntrega,\r\n };\r\n } else {\r\n RowValues = {\r\n cIdCausa: updatedProducts[props.rowIndex].cIdCausa,\r\n cDescAccion: updatedProducts[props.rowIndex].cDescAccion,\r\n ClaColaborador: null,\r\n NomColaborador: null,\r\n cFechaCompromiso: updatedProducts[props.rowIndex].cFechaCompromiso,\r\n cFechaTermino: updatedProducts[props.rowIndex].cFechaTermino,\r\n };\r\n }\r\n\r\n return RowValues;\r\n };\r\n\r\n const filterResponsible = (props, event) => {\r\n let valor = '';\r\n const updatedProducts = [...ResponsablesList];\r\n\r\n if (\r\n updatedProducts[props.rowData.RowIndex].ClaColaborador !== null &&\r\n updatedProducts[props.rowData.RowIndex].ClaColaborador !== '' &&\r\n event.query === ''\r\n ) {\r\n valor = updatedProducts[props.rowData.RowIndex].ClaColaborador.NomColaborador;\r\n } else {\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query\r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetColaboradorProyectosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${!EsMostrarSoloUsuarioMSW?1:0}`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => {\r\n setfilteredResponsible(response.data[0]);\r\n });\r\n };\r\n\r\n const ActivarCheck = (rowData, props) => {\r\n return true;\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onNewClick = () => {\r\n const newRow = {\r\n RowIndex: ResponsablesList.length,\r\n cIdCausa: null,\r\n DescAccion: null,\r\n ClaColaborador: null,\r\n cFechaCompromiso: null,\r\n cFechaTermino: null,\r\n cIdPlanAccion: null,\r\n };\r\n const updatedProducts = [...ResponsablesList];\r\n updatedProducts.push(newRow);\r\n\r\n setResponsablesList(updatedProducts);\r\n };\r\n\r\n const onSaveActionPlanClick = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n ExplicacionResultado,\r\n ResponsablesList,\r\n CausaRaizList,\r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n\r\n return;\r\n }\r\n\r\n if (PickOneVal === null) {\r\n showSweetAlert(t('common:Warning'), t('actionPlan:PickOneVal'), 'warning');\r\n return;\r\n }\r\n /*\r\n if( IdCausaAux !== PickOneVal){\r\n showSweetAlert(t('common:Warning'), t('actionPlan:PickOneDesc'), 'warning'); \r\n return;\r\n }\r\n*/\r\n if (ResponsablesList.length === 0) {\r\n showSweetAlert(\r\n t('common:Warning'),\r\n t('actionPlan:ReviewRequiredFieldsResponsible'),\r\n 'warning'\r\n );\r\n return;\r\n }\r\n\r\n /*\r\n const arrayCausaRaizList = [];\r\n let RowValues ={};\r\n\r\n for (let index = 0; index < CausaRaizList.length; index++) {\r\n if (PickOneVal === CausaRaizList[index].IdCausa) { \r\n RowValues = {\r\n IdCausa: CausaRaizList[index].IdCausa,\r\n ClaveCausa: CausaRaizList[index].ClaveCausa,\r\n DescripcionCausa: CausaRaizList[index].DescripcionCausa,\r\n PesoRelevancia: CausaRaizList[index].PesoRelevancia,\r\n EsSeleccionada: 1\r\n }\r\n arrayCausaRaizList.push(RowValues);\r\n }\r\n }\r\n */\r\n const arrayResponsablesList = [];\r\n let RowValuesResponsables = {};\r\n\r\n for (let index = 0; index < ResponsablesList.length; index++) {\r\n RowValuesResponsables = {\r\n IdCausaSel: IdCausa,\r\n IdCausa: ResponsablesList[index].cIdCausa,\r\n IdTarea: ResponsablesList[index].cClaTarea,\r\n ClaveTarea: ResponsablesList[index].cClaveTarea,\r\n DescripcionTarea: ResponsablesList[index].cDescAccion,\r\n ClaUsuario: ResponsablesList[index].ClaColaborador.ClaColaborador,\r\n FechaCompromiso: ResponsablesList[index].cFechaCompromiso,\r\n FechaTermino: ResponsablesList[index].cFechaTermino,\r\n BajaLogica: ResponsablesList[index].BajaLogica,\r\n IdPlanAccionOrigen: typeof(ResponsablesList[index].IdPlanAccionOrigen) === 'undefined' ? null : ResponsablesList[index].IdPlanAccionOrigen,\r\n IdCausaOrigen: typeof(ResponsablesList[index].IdCausaOrigen) === 'undefined' ? null : ResponsablesList[index].IdCausaOrigen,\r\n IdTareaOrigen: typeof(ResponsablesList[index].IdTareaOrigen) === 'undefined' ? null : ResponsablesList[index].IdTareaOrigen \r\n };\r\n arrayResponsablesList.push(RowValuesResponsables);\r\n }\r\n\r\n const arrayHistorialPendientesList = [];\r\n let RowHistorialPendientes = {};\r\n\r\n for (let index = 0; index < HistorialPendientesList.length; index++) {\r\n RowHistorialPendientes = {\r\n IdPlanAccion: HistorialPendientesList[index].cIdPlanAccion,\r\n IdCSF: HistorialPendientesList[index].IdCSF,\r\n IdCausa: HistorialPendientesList[index].cIdCausa,\r\n IdTarea: HistorialPendientesList[index].cClaTarea,\r\n ClaveTarea: HistorialPendientesList[index].cClaveTarea,\r\n DescripcionCausa: HistorialPendientesList[index].cDescAccion,\r\n ClaUsuario: HistorialPendientesList[index].cClaColaborador,\r\n FechaCompromiso: HistorialPendientesList[index].cFechaCompromiso,\r\n FechaTermino: HistorialPendientesList[index].cFechaTermino,\r\n BajaLogica: HistorialPendientesList[index].BajaLogica,\r\n };\r\n arrayHistorialPendientesList.push(RowHistorialPendientes);\r\n }\r\n\r\n const paramsServiceOwners = {\r\n IdCSF,\r\n ClaPeriodo,\r\n ClaFechaReporte,\r\n NombreLider,\r\n TopicoAnalisis,\r\n ResultadoActual: CurrRes,\r\n ResultadoPlaneado: PlanRes,\r\n ExplicacionResultado,\r\n CausaRaizList,\r\n ResponsablesList: arrayResponsablesList,\r\n HistorialPendientesList: arrayHistorialPendientesList,\r\n EsCausaRaizRevisadas: CausaRaiz,\r\n EsAccionesRevisadas: AgregarAcciones,\r\n EsCrearPropioActionPlan: CrearActionPlan\r\n };\r\n\r\n const urlWebServiceSaveActionPlan = `${config.UrlApiProject}ScoreCard/SaveActionPlan`;\r\n\r\n callApi(urlWebServiceSaveActionPlan, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerEncabezadoActionPlan(\r\n props.IdCSF === undefined ? 0 : props.IdCSF,\r\n props.ClaPeriodo === undefined ? 0 : props.ClaPeriodo,\r\n props.ClaFechaReporte === undefined ? 0 : props.ClaFechaReporte\r\n );\r\n onHideAP();\r\n });\r\n };\r\n\r\n\r\n const onSaveActionPlanAsReviewedClick = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n CausaRaiz,\r\n AgregarAcciones,\r\n CrearActionPlan \r\n };\r\n\r\n const validator = new YupValidator(valitationMarkAsReviewedScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n console.log(validator.errors);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n\r\n return;\r\n } \r\n \r\n const arrayResponsablesList = [];\r\n let RowValuesResponsables = {};\r\n\r\n for (let index = 0; index < ResponsablesList.length; index++) {\r\n RowValuesResponsables = {\r\n IdCausaSel: IdCausa,\r\n IdCausa: ResponsablesList[index].cIdCausa,\r\n IdTarea: ResponsablesList[index].cClaTarea,\r\n ClaveTarea: ResponsablesList[index].cClaveTarea,\r\n DescripcionTarea: ResponsablesList[index].cDescAccion,\r\n ClaUsuario: ResponsablesList[index].ClaColaborador.ClaColaborador,\r\n FechaCompromiso: ResponsablesList[index].cFechaCompromiso,\r\n FechaTermino: ResponsablesList[index].cFechaTermino,\r\n BajaLogica: ResponsablesList[index].BajaLogica,\r\n };\r\n arrayResponsablesList.push(RowValuesResponsables);\r\n }\r\n\r\n const arrayHistorialPendientesList = [];\r\n let RowHistorialPendientes = {};\r\n\r\n for (let index = 0; index < HistorialPendientesList.length; index++) {\r\n RowHistorialPendientes = {\r\n IdPlanAccion: HistorialPendientesList[index].cIdPlanAccion,\r\n IdCSF: HistorialPendientesList[index].IdCSF,\r\n IdCausa: HistorialPendientesList[index].cIdCausa,\r\n IdTarea: HistorialPendientesList[index].cClaTarea,\r\n ClaveTarea: HistorialPendientesList[index].cClaveTarea,\r\n DescripcionCausa: HistorialPendientesList[index].cDescAccion,\r\n ClaUsuario: HistorialPendientesList[index].cClaColaborador,\r\n FechaCompromiso: HistorialPendientesList[index].cFechaCompromiso,\r\n FechaTermino: HistorialPendientesList[index].cFechaTermino,\r\n BajaLogica: HistorialPendientesList[index].BajaLogica,\r\n };\r\n arrayHistorialPendientesList.push(RowHistorialPendientes);\r\n }\r\n\r\n const paramsServiceOwners = {\r\n IdCSF,\r\n ClaPeriodo,\r\n ClaFechaReporte,\r\n NombreLider,\r\n TopicoAnalisis,\r\n ResultadoActual: CurrRes,\r\n ResultadoPlaneado: PlanRes,\r\n ExplicacionResultado,\r\n CausaRaizList,\r\n ResponsablesList: arrayResponsablesList,\r\n HistorialPendientesList: arrayHistorialPendientesList,\r\n EsCausaRaizRevisadas: CausaRaiz,\r\n EsAccionesRevisadas: AgregarAcciones,\r\n EsCrearPropioActionPlan: CrearActionPlan\r\n };\r\n\r\n const urlWebServiceSaveActionPlan = `${config.UrlApiProject}ScoreCard/SaveActionPlanAsReviewed`;\r\n\r\n callApi(urlWebServiceSaveActionPlan, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerEncabezadoActionPlan(\r\n props.IdCSF === undefined ? 0 : props.IdCSF,\r\n props.ClaPeriodo === undefined ? 0 : props.ClaPeriodo,\r\n props.ClaFechaReporte === undefined ? 0 : props.ClaFechaReporte\r\n );\r\n onHideAP();\r\n });\r\n };\r\n\r\n const valitationScheme = yup.object().shape({\r\n ExplicacionResultado: yup.string().required(t('common:RequiredField')).nullable(),\r\n CausaRaizList: yup.array().of(\r\n yup.object().shape({\r\n DescripcionCausa: yup\r\n .string()\r\n .when('EsSeleccionada', {\r\n is: 1,\r\n then: yup.string().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }),\r\n PesoRelevancia: yup\r\n .number()\r\n .when('EsSeleccionada', {\r\n is: 1,\r\n then: yup.number().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.number().nullable(),\r\n }), \r\n \r\n\r\n })\r\n ),\r\n ResponsablesList: yup.array().of(\r\n yup.object().shape({\r\n cDescAccion: yup.string().required(t('common:RequiredField')).nullable(), \r\n ClaColaborador: yup.object().when('BajaLogica', {is: 0,\r\n then: yup.object({ ClaColaborador: yup.string().required(t('common:RequiredField')) }).required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.object().nullable()\r\n }),\r\n cFechaCompromiso: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n })\r\n ) \r\n });\r\n\r\n const valitationMarkAsReviewedScheme = yup.object().shape({ \r\n CausaRaiz: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n AgregarAcciones: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n CrearActionPlan: yup.mixed().required(t('common:RequiredField')).nullable()\r\n });\r\n\r\n const headerResponsable = (\r\n <>\r\n \r\n {rowData.PositionName}\r\n
\r\n \r\n { rowData.Responsible} \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n } \r\n\r\n const dialogStyle = {\r\n width: '80vw',\r\n };\r\n const closeModal = () => {\r\n setEsVerAnexo(false);\r\n };\r\n const closeModalNotas = () => {\r\n setEsAbrirNotas(false);\r\n };\r\n const AbrirAnexo = () => {\r\n setEsVerAnexo(!EsVerAnexo);\r\n };\r\n const AbrirNotas = async (data) => {\r\n setEsAbrirNotas(!EsAbrirNotas);\r\n setRowDataNotas(data);\r\n };\r\n\r\n const goToStep1 = async () => {\r\n setErrors({});\r\n setActiveIndex(0);\r\n };\r\n\r\n const goToStep2 = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n ExplicacionResultado,\r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n console.log(validator.errors);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n\r\n // Si es diferente de rojo no requerimos paso 2 por default y lo mandamos al 3\r\n // ingresamos por default un valor en el paso #2\r\n if (colorEstatus !== 1) {\r\n const updatedDescripcion = [...CausaRaizList];\r\n if (updatedDescripcion[0].DescripcionCausa === null) {\r\n updatedDescripcion[0].DescripcionCausa = t('actionPlan:DefaultRootCause');\r\n updatedDescripcion[0].EsSeleccionada = 1;\r\n updatedDescripcion[0].PesoRelevancia = 100;\r\n setPickOneVal(updatedDescripcion[0].IdCausa);\r\n setCausaRaizList(updatedDescripcion);\r\n }\r\n\r\n setActiveIndex(2);\r\n } else {\r\n setActiveIndex(1);\r\n }\r\n };\r\n\r\n const goToStep3 = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n ExplicacionResultado,\r\n CausaRaizList,\r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n\r\n return;\r\n }\r\n\r\n if (PickOneVal === null) {\r\n showSweetAlert(t('common:Warning'), t('actionPlan:PickOneVal'), 'warning');\r\n return;\r\n }\r\n\r\n setActiveIndex(2);\r\n };\r\n\r\n const goToStep4 = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n ExplicacionResultado,\r\n ResponsablesList,\r\n CausaRaizList,\r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n\r\n return;\r\n }\r\n\r\n if (PickOneVal === null) {\r\n showSweetAlert(t('common:Warning'), t('actionPlan:PickOneVal'), 'warning');\r\n return;\r\n }\r\n\r\n if (ResponsablesList.length === 0) {\r\n showSweetAlert(\r\n t('common:Warning'),\r\n t('actionPlan:ReviewRequiredFieldsResponsible'),\r\n 'warning'\r\n );\r\n return;\r\n }\r\n\r\n setActiveIndex(3);\r\n };\r\n\r\n const StepRender = (index) => {\r\n return <>;\r\n };\r\n\r\n const stepItems = [\r\n {\r\n label: (\r\n <>\r\n \r\n 0 ? 'light-green-color' : 'secondary-color'}`}\r\n >\r\n \r\n
\r\n \r\n ),\r\n className: 'itemInicio',\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n \r\n 1 ? 'light-green-color' : 'secondary-color'}`}\r\n >\r\n \r\n
\r\n \r\n ),\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n \r\n 2 ? 'light-green-color' : 'secondary-color'}`}\r\n >\r\n \r\n
\r\n \r\n ),\r\n command: (event) => {},\r\n },\r\n {\r\n label: (\r\n <>\r\n \r\n 3 ? 'light-green-color' : 'secondary-color'}`}\r\n >\r\n \r\n
\r\n \r\n ),\r\n className: 'itemFinal',\r\n command: (event) => {},\r\n },\r\n ];\r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n \r\n {t('scoreCard:APModalTitle')}\r\n
\r\n \r\n {t('scoreCard:CrearNuevoAP')}\r\n
\r\n \r\n \r\n {ResFecha} \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {\r\n activeIndex === 3 || (activeIndex === null && IdPlanAccion > 0) ?\r\n (\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n onChangeExplicacionResultado(e)}\r\n errors={errors}\r\n className=\"bottom-rounded\"\r\n />\r\n
\r\n \r\n );\r\n\r\n const RenderCausaRaiz = (\r\n <>\r\n {TopicoAnalisis}
\r\n \r\n\r\n onchangeCausaRaiz(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={!IsAtLeastOneActionPlanOpen}\r\n /> \r\n
\r\n \r\n \r\n onchangeAgregarAcciones(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={!IsAtLeastOneActionPlanOpen}\r\n /> \r\n
\r\n \r\n \r\n onchangeCrearActionPlan(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n /> \r\n
\r\n \r\n \r\n {t('actionPlan:HelpReviewActionPlan')}\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('actionPlan:PendingActionsAvailable').replace('[TopicAnalisis]', TopicoAnalisis)}.\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n {TopicoAnalisis}
\r\n \r\n\r\n AbrirAnexo()}\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onchangeCausaRaiz(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={!IsAtLeastOneActionPlanOpen}\r\n /> \r\n
\r\n \r\n \r\n onchangeAgregarAcciones(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n disabled={!IsAtLeastOneActionPlanOpen}\r\n /> \r\n
\r\n \r\n \r\n onchangeCrearActionPlan(e.value)} \r\n optionValue=\"value\"\r\n optionLabel=\"name\"\r\n /> \r\n
\r\n \r\n \r\n {t('actionPlan:HelpReviewActionPlan')}\r\n
\r\n\r\n
\r\n );\r\n }\r\n \r\n const itemTemplate = (product, layout) => {\r\n if (!product) {\r\n return;\r\n }\r\n if (layout === 'grid')\r\n return renderGridItem(product);\r\n }\r\n\r\n const closeModal = () => {\r\n setEsVerAnexo(false);\r\n setActividadDescripcion(null);\r\n } \r\n\r\n const dialogStyle = ( \r\n { \r\n width: '80vw'\r\n \r\n })\r\n\r\n const dialogActividadStyle = ( \r\n { \r\n width: '30vw'\r\n \r\n })\r\n\r\n const AbrirAnexo = async (data) => {\r\n setActividadDescripcion(data.Descripcion);\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsVerAnexo(!EsVerAnexo); \r\n tracker.trackEvent({\r\n type: 'MisActividadesPendientes', /* component name */\r\n action: 'VIEW_SUPPORT_DOCUMENTS' \r\n })\r\n }\r\n \r\n const AbrirInicioFecha = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsIniciarActividad(!EsIniciarActividad); \r\n }\r\n\r\n const AbrirNotas = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsAbrirNotas(!EsAbrirNotas);\r\n tracker.trackEvent({\r\n type: 'MisActividadesPendientes', /* component name */\r\n action: 'VIEW_COMMENTS' \r\n })\r\n }\r\n\r\n const AbrirEdicionActividad = async (data) => { \r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n tracker.trackEvent({\r\n type: 'MisActividadesPendientes', /* component name */\r\n action: 'VIEW_ACTIVITY_DETAIL'\r\n })\r\n \r\n setEsEditarActividadProyecto(!EsEditarActividadProyecto);\r\n }\r\n\r\n const closeModalNotas = () => {\r\n setEsAbrirNotas(false); \r\n } \r\n\r\n const closeModalActividad = () => {\r\n setFechaInicioReal(null);\r\n setEsIniciarActividad(false); \r\n } \r\n\r\n const onFechaInicioRealChange = ( e ) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.FechaInicioReal; \r\n setErrors(newErrors);\r\n setFechaInicioReal(e.value);\r\n }; \r\n\r\n const valitationSchemeStart = yup.object().shape({\r\n FechaInicioReal:yup.date().required(t('common:RequiredField')).nullable()\r\n }); \r\n\r\n const IniciarActividad = async () => {\r\n const value = {\r\n FechaInicioReal\r\n }\r\n const validator = new YupValidator(valitationSchemeStart);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n const urlWebServiceIniciar = `${config.UrlApiProject}ScoreCard/StartActividadesFases`;\r\n const paramsService = {\r\n ClaProyecto,\r\n ClaFase,\r\n ClaActividad,\r\n FechaRealInicio:(FechaInicioReal!== null ? (new Date(FechaInicioReal)): null),\r\n }; \r\n callApi(urlWebServiceIniciar, 'POST', paramsService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerMisActividades();\r\n closeModalActividad();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n });\r\n }\r\n\r\n const onClickCloseComentario = () => {\r\n closeModalNotas();\r\n obtenerMisActividades(EsEstaSemana);\r\n };\r\n\r\n const onChangeEsEstaSemana = (value) => { \r\n setEsEstaSemana(value) \r\n obtenerMisActividades(value);\r\n }\r\n\r\n const LabelTypeActivity = (data)=> {\r\n let labelTypeActivity = \"\"; \r\n switch (data.ActivityType) {\r\n case 1:\r\n labelTypeActivity = t('misActividades:Project')\r\n break;\r\n case 2:\r\n labelTypeActivity = t('misActividades:Source')\r\n break; \r\n case 3: \r\n labelTypeActivity = t('misActividades:Source')\r\n break; \r\n case 4: \r\n labelTypeActivity = t('misActividades:Source')\r\n break;\r\n case 5:\r\n labelTypeActivity = t('misActividades:Source')\r\n break;\r\n default:\r\n labelTypeActivity = t('misActividades:Project')\r\n break;\r\n }\r\n return labelTypeActivity;\r\n }\r\n\r\n const onHideAbrirCreateActionPlan = () => {\r\n setEsAbrirCreateActionPlan(false);\r\n obtenerMisActividades(EsEstaSemana);\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n }\r\n\r\n const onClickCreateActionPlan = (row) => { \r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirCreateActionPlan(true); \r\n tracker.trackEvent({\r\n type: 'MisActividadesPendientes', /* component name */\r\n action: 'CREATE_NEW_ACTION_PLAN'\r\n })\r\n }\r\n\r\n const onCloseActivityDetail = () => {\r\n \r\n setClaProyecto(null);\r\n setClaFase(null);\r\n setClaActividad(null);\r\n setEsEditarActividadProyecto(false); \r\n obtenerMisActividades(EsEstaSemana);\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n };\r\n\r\n const onProjectClick = (claProyecto) => { \r\n tracker.trackEvent({\r\n type: 'MisActividadesPendientes', /* component name */\r\n action: 'OPEN_EDIT_PROJECT'\r\n })\r\n if (props.onOpenProject) props.onOpenProject(claProyecto);\r\n };\r\n \r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n AbrirAnexo(data)} className=\"p-button-rounded p-button-text\" />)\r\n :\r\n (<>)}\r\n\r\n AbrirNotas(data)} className={`p-button-rounded p-button-text ${ data.EsTieneComentarios === 1 ? 'light-yellow-color' : 'light-gray-color' }`} />\r\n AbrirInicioFecha(data)} className=\"p-button-rounded p-button-success p-button-text\" />\r\n \r\n onClickCreateActionPlan(data)} className=\"p-button-rounded p-button-success p-button-text\" />\r\n \r\n
\r\n \r\n
\r\n
\r\n {t('misActividades:ReportedDate')}: {moment(data.FechaReporte).format(\"ll\")}
) : (<>)\r\n }\r\n \r\n {data.DiasAtraso} {t('misActividades:DaysDelayed')}
)\r\n :\r\n (<>)\r\n }\r\n \r\n {ActividadDescripcion}
\r\n \r\n\r\n
\r\n \r\n \r\n onFechaInicioRealChange(e)} \r\n errors={errors}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n onFechaRealInicioChange(e)} \r\n errors={errors}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n onFechaRealFinChange(e)} \r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n {t('misActividades:PMComments')}\r\n \r\n
\r\n \r\n \r\n \r\n {t('misActividades:Comments')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onIdProyectoFaseEntregableChange(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onFechaCompromisoFaseEntregableChange(e)}\r\n disabled={DisabledProyectoFaseEntregable}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onClaResponsableFaseEntregableChange(props,e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n \r\n const itemTemplate = (product, layout) => {\r\n if (!product) {\r\n return;\r\n }\r\n if (layout === 'grid')\r\n return renderGridItem(product);\r\n }\r\n\r\n const AbrirAnexo = async (data) => { \r\n setActividadDescripcion(data.Descripcion);\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsVerAnexo(!EsVerAnexo);\r\n tracker.trackEvent({\r\n type: 'MisActividadesEnProceso', /* component name */\r\n action: 'VIEW_SUPPORT_DOCUMENTS' \r\n })\r\n }\r\n \r\n const AbrirTerminarActividad = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsTerminarActividad(!EsTerminarActividad);\r\n }\r\n \r\n const AbrirNotas = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsAbrirNotas(!EsAbrirNotas);\r\n tracker.trackEvent({\r\n type: 'MisActividadesEnProceso', /* component name */\r\n action: 'VIEW_COMMENTS' \r\n })\r\n }\r\n\r\n const AbrirEdicionActividad = async (data) => { \r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n \r\n setEsEditarActividadProyecto(!EsEditarActividadProyecto);\r\n tracker.trackEvent({\r\n type: 'MisActividadesEnProceso', /* component name */\r\n action: 'VIEW_ACTIVITY_DETAIL'\r\n })\r\n }\r\n\r\n \r\n const closeModalNotas = () => {\r\n setEsAbrirNotas(false); \r\n } \r\n\r\n const closeModalTerminarActividad = () => {\r\n setEsTerminarActividad(false); \r\n } \r\n\r\n \r\n const closeModal = () => {\r\n setEsVerAnexo(false);\r\n setActividadDescripcion(null);\r\n } \r\n \r\n const dialogStyle = ( \r\n { \r\n width: '80vw'\r\n \r\n })\r\n\r\n const onClickCloseComentario = () => {\r\n closeModalNotas();\r\n obtenerMisActividadesEnProceso();\r\n };\r\n\r\n const onClickCloseFinalizar = () => {\r\n closeModalTerminarActividad();\r\n obtenerMisActividadesEnProceso();\r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n };\r\n\r\n const onCloseActivityDetail = () => {\r\n \r\n setClaProyecto(null);\r\n setClaFase(null);\r\n setClaActividad(null);\r\n setEsEditarActividadProyecto(false); \r\n obtenerMisActividadesEnProceso();\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n };\r\n\r\n\r\n const headerTerminarActividad = () => {\r\n\r\n if (ClaProyecto>0){\r\n return (<>{t('misActividades:TituloFinalizarTareaProyecto')});\r\n }\r\n\r\n if (ClaProyecto===-999){\r\n return (<>{t('misActividades:TituloFinalizarTareaMinuta')});\r\n }\r\n\r\n if (ClaProyecto===-998){\r\n return (<>{t('misActividades:TituloFinalizarTareaAP')});\r\n }\r\n\r\n if (ClaProyecto===-997){\r\n return (<>{t('misActividades:TituloFinalizarTareaSporteProgress')});\r\n }\r\n\r\n return (<>{t('misActividades:TituloFinalizarActividad')});\r\n \r\n }\r\n\r\n const onClickActionPlan = (row) => { \r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirActionPlan(true);\r\n }\r\n \r\n const onHideActionPlan = () => {\r\n setEsAbrirActionPlan(false); \r\n }\r\n \r\n const onProjectClick = (claProyecto) => { \r\n tracker.trackEvent({\r\n type: 'MisActividadesEnProceso', /* component name */\r\n action: 'OPEN_EDIT_PROJECT'\r\n }) \r\n if (props.onOpenProject) props.onOpenProject(claProyecto);\r\n };\r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onClickActionPlan(data)} className=\"p-button-rounded p-button-text white\" />)\r\n :\r\n (<>) \r\n }\r\n { data.ActivityType === 1 ? \r\n ( AbrirAnexo(data)} className=\"p-button-rounded p-button-text\" />)\r\n :\r\n (<>)}\r\n \r\n AbrirNotas(data)} className={`p-button-rounded p-button-text ${ data.EsTieneComentarios === 1 ? 'light-yellow-color' : 'light-gray-color' }`} />\r\n AbrirTerminarActividad(data)} className=\"p-button-rounded p-button-success p-button-text\" />\r\n \r\n
\r\n \r\n
\r\n
\r\n {t('misActividades:ReportedDate')}: {moment(data.FechaReporte).format(\"ll\")}
) : (<>)\r\n }\r\n \r\n {data.DiasAtraso} {t('misActividades:DaysDelayed')}
)\r\n :\r\n (<>)\r\n }\r\n \r\n {ActividadDescripcion}
\r\n \r\n\r\n
\r\n \r\n \r\n onFechaRealInicioChange(e)} \r\n disabled={true}\r\n errors={errors}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n onFechaRealFinChange(e)} \r\n disabled={true}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n {t('misActividades:Comments')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {t('misActividades:PMComments')}\r\n \r\n
\r\n \r\n \r\n \r\n {t('misActividades:Status')}\r\n \r\n onEstatusChange(e.value)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onEsRevisionChange(e)}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n \r\n const itemTemplate = (product, layout) => {\r\n if (!product) {\r\n return;\r\n }\r\n if (layout === 'grid')\r\n return renderGridItem(product);\r\n }\r\n\r\n const AbrirAnexo = async (data) => {\r\n setActividadDescripcion(data.Descripcion);\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsVerAnexo(!EsVerAnexo);\r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'VIEW_SUPPORT_DOCUMENTS' \r\n })\r\n}\r\n\r\nconst AbrirAnexoEntregable = async (data) => { \r\n setIdProyectoRepActTerminada(data.IdProyectoRepActTerminada);\r\n setEsVerAnexoEntreable(!EsVerAnexoEntreable);\r\n}\r\n \r\nconst AbrirTerminarActividad = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsTerminarActividad(!EsTerminarActividad);\r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'EDIT_ACTIVITY_FINISHED'\r\n }) \r\n}\r\n\r\nconst AbrirRevisionActividad = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsRevisarActividad(!EsRevisarActividad);\r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'OPEN_REVIEW_ACIVITY'\r\n }) \r\n}\r\n\r\nconst AbrirNotas = async (data) => {\r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n setEsAbrirNotas(!EsAbrirNotas);\r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'VIEW_COMMENTS' \r\n })\r\n}\r\n\r\nconst AbrirEdicionActividad = async (data) => { \r\n setClaProyecto(data.ClaProyecto);\r\n setClaFase(data.ClaFase);\r\n setClaActividad(data.ClaActividad);\r\n\r\n setEsEditarActividadProyecto(!EsEditarActividadProyecto);\r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'VIEW_ACTIVITY_DETAIL'\r\n })\r\n}\r\n\r\n\r\n\r\nconst closeModalNotas = () => {\r\n setEsAbrirNotas(false); \r\n} \r\n\r\nconst closeModalTerminarActividad = () => {\r\n\r\n setEsTerminarActividad(false); \r\n} \r\n\r\nconst closeModalRevisionActividad = () => {\r\n\r\n setEsRevisarActividad(false); \r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n } \r\n\r\n\r\nconst closeModal = () => {\r\n setEsVerAnexo(false);\r\n setActividadDescripcion(null);\r\n} \r\n\r\nconst closeModalAnexoEntreable = () =>\r\n{\r\n setEsVerAnexoEntreable(false);\r\n setIdProyectoRepActTerminada(null);\r\n}\r\n\r\nconst dialogStyle = ( \r\n { \r\n width: '80vw'\r\n \r\n})\r\n\r\nconst onClickCloseComentario = () => {\r\n closeModalNotas();\r\n obtenerMisActividadesTerminadas(EsUltimos30Dias, EsSinRevisar);\r\n};\r\n\r\nconst onClickCloseFinalizar = () => {\r\n closeModalTerminarActividad();\r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n};\r\n\r\nconst onCloseActivityDetail = () => {\r\n \r\n setClaProyecto(null);\r\n setClaFase(null);\r\n setClaActividad(null);\r\n setEsEditarActividadProyecto(false); \r\n obtenerMisActividadesTerminadas(EsUltimos30Dias, EsSinRevisar);\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n};\r\n\r\n\r\nconst headerTerminarActividad = () => {\r\n\r\n if (ClaProyecto>0){\r\n return (<>{t('misActividades:TituloFinalizarTareaProyecto')});\r\n }\r\n\r\n if (ClaProyecto===-999){\r\n return (<>{t('misActividades:TituloFinalizarTareaMinuta')});\r\n }\r\n\r\n if (ClaProyecto===-998){\r\n return (<>{t('misActividades:TituloFinalizarTareaAP')});\r\n }\r\n\r\n if (ClaProyecto===-997){\r\n return (<>{t('misActividades:TituloFinalizarTareaSporteProgress')});\r\n }\r\n\r\n return (<>{t('misActividades:TituloFinalizarActividad')});\r\n \r\n}\r\n\r\n\r\nconst onChangeEsUltimos30Dias = (value) => { \r\n setEsUltimos30Dias(value) \r\n obtenerMisActividadesTerminadas(value, EsSinRevisar);\r\n}\r\n\r\n\r\nconst onChangeEsSinRevisar = (value) => { \r\n setEsSinRevisar(value) \r\n obtenerMisActividadesTerminadas(EsUltimos30Dias, value);\r\n}\r\n\r\nconst onClickActionPlan = (row) => { \r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirActionPlan(true);\r\n}\r\n\r\nconst onHideActionPlan = () => {\r\n setEsAbrirActionPlan(false); \r\n}\r\n\r\nconst onProjectClick = (claProyecto) => { \r\n tracker.trackEvent({\r\n type: 'MisActividadesTerminadas', /* component name */\r\n action: 'OPEN_EDIT_PROJECT'\r\n }) \r\n if (props.onOpenProject) props.onOpenProject(claProyecto);\r\n};\r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onClickActionPlan(data)} className=\"p-button-rounded p-button-text white\" />)\r\n :\r\n (<>) \r\n }\r\n { data.ActivityType === 1 ? \r\n ( AbrirAnexo(data)} className=\"p-button-rounded p-button-text\" />)\r\n :\r\n (<>)} \r\n \r\n { data.EsTieneDocumentoEntregable === 1 ? \r\n ( AbrirAnexoEntregable(data)} className=\"p-button-rounded orange-color p-button-text\" />)\r\n :\r\n (<>)} \r\n\r\n AbrirNotas(data)} className={`p-button-rounded p-button-text ${ data.EsTieneComentarios === 1 ? 'light-yellow-color' : 'light-gray-color' }`} />\r\n AbrirTerminarActividad(data)} className=\"p-button-rounded p-button-primary p-button-text\" />\r\n { data.ClaProyecto === -997 || data.ClaProyecto === -998 ? (<>) \r\n : \r\n ( AbrirRevisionActividad(data)} className=\"p-button-rounded p-button-success p-button-text\" />)}\r\n \r\n
\r\n \r\n
\r\n
\r\n {t('misActividades:ReportedDate')}: {moment(data.FechaReporte).format(\"ll\")}
) : (<>)\r\n } \r\n \r\n {t('misActividades:FechaTerminada')}: {moment(data.FechaRealTermina).format(\"ll\")}\r\n \r\n
\r\n \r\n {data.DiasAtraso} {t('misActividades:DaysDelayed')}
)\r\n :\r\n (<>)\r\n }\r\n \r\n {ActividadDescripcion}
\r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const obtenerFechaReporte = (claPeriodo) => { \r\n\r\n if (claPeriodo === null || typeof(claPeriodo) === 'undefined'){\r\n claPeriodo = -1\r\n }\r\n \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCFechaReporte?ClaPeriodo=${claPeriodo}`; \r\n const paramsToService = { \r\n \r\n }; \r\n callApi(GetSummaryScorecardUser, 'GET', paramsToService, (response) => { \r\n setFechaReporte(response.data[0]); \r\n });\r\n }\r\n const obtenerPeriodo = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCPeriodo`; \r\n const paramsToService = { \r\n \r\n }; \r\n callApi(GetSummaryScorecardUser, 'GET', paramsToService, (response) => { \r\n setPeriodo(response.data[0]); \r\n });\r\n }\r\n\r\n const obtenerResponsablesProyecto = (claProyecto) => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCColaboradorProyectosTeam`; \r\n const paramsToService = { \r\n ClaProyecto: claProyecto\r\n }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setOpcionesResponsables(response.data[0]);\r\n } \r\n });\r\n }\r\n const obtenerFasesProyecto = (claProyecto) => { \r\n const getMswFasesCmb = `${config.UrlApiProject}ScoreCard/GetMswFasesCmb?ClaProyecto=${claProyecto===null?0:claProyecto}`;\r\n const paramsToService = {};\r\n callApi(getMswFasesCmb, 'GET', paramsToService, (response) => {\r\n setOpcionesFase(response.data[0]); \r\n }); \r\n }\r\n\r\n\r\n return (\r\n <> \r\n {\r\n IsMyTeamActivities ?\r\n (\r\n <>\r\n \r\n {t('common:EditProject')}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n onChangeClaColaborador(e.value)}\r\n label={t('misActividades:Responsible')}\r\n /> \r\n
\r\n \r\n \r\n onChangePeriodo(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeFechaReporte(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n onChangeClaSeguimiento(e.value)}\r\n label={t('misActividades:From')}\r\n /> \r\n
\r\n \r\n {\r\n ClaSeguimiento===3 ?\r\n ( \r\n \r\n onChangeMeetingType(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n )\r\n :\r\n (<>)\r\n }\r\n {\r\n ClaTipoMinuta===1 || ClaSeguimiento === 2 || ClaSeguimiento === 5 ?\r\n (\r\n \r\n onChangeProyectoNoMaestro(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n )\r\n :\r\n (<>) \r\n }\r\n \r\n
\r\n \r\n \r\n onChangeFechaEstimadaTermina(props, e)}\r\n />\r\n
\r\n \r\n \r\n onClaResponsableActividadChange(props,e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onClaFaseChange(props,e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n\r\n )\r\n :\r\n (<>)\r\n } \r\n \r\n \r\n onChangeOrganizationalValue(itemValue, itemNode)}> \r\n
\r\n )\r\n\r\n const onChangeOrganizationalValue = (itemValue, itemNode)=> { \r\n // console.log(itemNode);\r\n // key = ClaUsuario\r\n setClaUsuarioFilter(itemNode.key);\r\n }\r\n \r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n \r\n \r\n setIsShowDeviceSettings(false)}\r\n />\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const onAreaDepartamentoClick = (pClaAreaDepartamento) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaAreaDepartamento;\r\n setErrors(newErrors); \r\n setClaAreaDepartamento(pClaAreaDepartamento);\r\n GetCelda(pClaAreaDepartamento);\r\n setClaCelda(null);\r\n };\r\n\r\n const GetCelda = (pClaAreaDepartamento) => {\r\n const urlWebService = `${config.UrlApiProject}celda/GetCeldas?ClaDepartamento=${pClaAreaDepartamento}`;\r\n const paramsService = null;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setCeldaList(response.data.Celdas);\r\n });\r\n };\r\n\r\n const onCeldaClick = (pIdCelda) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaCelda;\r\n setErrors(newErrors); \r\n setClaCelda(pIdCelda); \r\n };\r\n\r\n const onShowDeviceSettings = () => {\r\n setErrors([]); \r\n setClaAreaDepartamento(null); \r\n setClaCelda(null); \r\n setIsShowDeviceSettings(true)\r\n }\r\n\r\n const validationScheme = yup.object().shape({\r\n ClaAreaDepartamento: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n ClaCelda: yup.mixed().required(t('common:RequiredField')).nullable() \r\n });\r\n\r\n const setCeldaDefaultOnDevice = async (e) => {\r\n const value = {\r\n ClaAreaDepartamento,\r\n ClaCelda \r\n };\r\n\r\n const validator = new YupValidator(validationScheme);\r\n const isValid = await validator.validate(value);\r\n if (!isValid) {\r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n \r\n // cambiamos la configuracion\r\n setSessionData({\r\n IsDeviceAssignedOnCell: true,\r\n ClaAreaDepartamento,\r\n ClaCelda\r\n });\r\n\r\n setIsShowDeviceSettings(false);\r\n setTimeout(()=> {\r\n onConfigurationChange()\r\n }, 10);\r\n };\r\n \r\n\r\n const onHomeScreenClick = () => {\r\n homeScreenLink.current.click();\r\n }\r\n\r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n {\r\n IsHomeScreen === false ?\r\n ()\r\n :\r\n () \r\n }\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n onAreaDepartamentoClick(e.value)}\r\n optionValue=\"ClaDepartamento4\"\r\n optionLabel=\"NomDepartamento4\"\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onCeldaClick(e.value)}\r\n optionValue=\"ClaCelda\"\r\n optionLabel=\"ClaveCelda\"\r\n errors={errors}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n onScrollUp()}\r\n className=\"p-button-rounded tablet-icon-style\"\r\n />\r\n
\r\n \r\n onScrollDown()}\r\n className=\"p-button-rounded tablet-icon-style\"\r\n />\r\n
\r\n \r\n {\r\n /*\r\n props.IdCelda !== null && typeof(props.IdCelda) !== 'undefined' ?\r\n (\r\n \r\n \r\n
\r\n)\r\n :\r\n (<>)\r\n } \r\n \r\n \r\n \r\n \r\n { getFormErrorMessage(props.name) } \r\n \r\n )\r\n} \r\n \r\nexport default FieldDropdownMultiSelect; \r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Column } from 'primereact/column';\r\nimport { ColumnGroup } from 'primereact/columngroup';\r\nimport { Row, Col, Card, CardHeader, CardTitle, CardBody, CardFooter, Label } from 'reactstrap';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert,tracker } from '../../../utils/utils';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport SweatAlertCustomIcon from '../../../components/SweatAlert/SweatAlertCustomIcon';\r\nimport moment from 'moment';\r\nimport Highcharts from 'highcharts';\r\nimport swal from '@sweetalert/with-react';\r\nimport PageContent from 'layouts/PageContent';\r\nimport { Toolbar } from 'primereact/toolbar';\r\nimport { ProgressBar } from 'primereact/progressbar';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldDropdownMultiSelect from '../../../components/Controls/FieldDropDownMultiSelect/FieldDropdownMultiSelect.jsx';\r\nimport FieldText from 'components/Controls/FieldText.jsx';\r\nimport FieldNumber from 'components/Controls/FieldNumber.jsx';\r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox.jsx';\r\nimport FieldAutoComplete from 'components/Controls/FieldAutoComplete.jsx';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar.jsx';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport Select, { InputActionMeta } from 'react-select';\r\nimport { Panel } from 'primereact/panel';\r\nimport AltaProyecto from '../Projects/AltaProyecto.jsx';\r\n\r\nconst MisProyectosFilter = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['misProyectosScreen', 'common']);\r\n const [TipoProyectoList, setTipoProyectoList] = useState([]);\r\n const [EstatusProyectoList, setEstatusProyectoList] = useState([]);\r\n const [ProyectoList, setProyectoList] = useState([]);\r\n const [ColaboradorPorProyectosList, setColaboradorPorProyectosList] = useState([]);\r\n const [ResponsablePorProyectosList, setResponsablePorProyectosList] = useState([]);\r\n const [EstatusActividadesList, setEstatusActividadesList] = useState([]);\r\n const [ClaTipoProyecto, setClaTipoProyecto] = useState(1);\r\n const [ClaEstatusProyecto, setClaEstatusProyecto] = useState([]);\r\n const [FechaEstimada, setFechaEstimada] = useState(null);\r\n const [FechaEstimadaIni, setFechaEstimadaIni] = useState(null);\r\n const [FechaEstimadaFin, setFechaEstimadaFin] = useState(null);\r\n const [ClaProyecto, setClaProyecto] = useState(null);\r\n const [AdvancedSearch, setAdvancedSearch] = useState(0);\r\n const [ClaColaborador, setClaColaborador] = useState([]);\r\n const [ClaResponsable, setClaResponsable] = useState([]);\r\n const [ClaResponsableTeamMeber, setClaResponsableTeamMeber] = useState([]);\r\n const [AdvancedSearchText, setAdvancedSearchText] = useState(null);\r\n const [ClaEstatusActividad, setClaEstatusActividad] = useState([]);\r\n const [errors, setErrors] = useState({});\r\n const [EsMostrarAltraProyecto, setEsMostrarAltraProyecto] = useState(false);\r\n const [flagTipoProyecto, setflagTipoProyecto] = useState(1);\r\n const [flagProyecto, setflagProyecto] = useState(1);\r\n\r\n useEffect(() => {\r\n \r\n obtenerTipoProyecto();\r\n obtenerEstatus();\r\n obtenerEstatusActividades();\r\n obtenerColaboradorPorProyectos(-1);\r\n obtenerProyecto(1); // ClaTipoProyecto 1 por default\r\n setErrors({});\r\n const date = new Date();\r\n date.setDate(date.getDate() - 1);\r\n setFechaEstimadaFin(date);\r\n\r\n }, [props.ClaProyecto, props.AnioMes]);\r\n\r\n const obtenerTipoProyecto = () => {\r\n const GetTipoProyectoAllCmb = `${config.UrlApiProject}ScoreCard/GetTipoProyectoAllCmb`;\r\n const paramsToService = {};\r\n callApi(GetTipoProyectoAllCmb, 'GET', paramsToService, (response) => {\r\n setTipoProyectoList(response.data.TipoProyecto.filter(a => a.ClaTipoProyecto !== -1));\r\n });\r\n };\r\n const obtenerEstatus = () => {\r\n const GetEstatusProyectoCmb = `${config.UrlApiProject}ScoreCard/GetEstatusProyectoCmb`;\r\n const paramsToService = {};\r\n callApi(GetEstatusProyectoCmb, 'GET', paramsToService, (response) => {\r\n // setEstatusProyectoList(response.data.EstatusProyecto);\r\n const options = response.data.EstatusProyecto.map((d) => ({\r\n value: d.ClaEstatusProyecto,\r\n label: d.NomEstatusProyecto,\r\n }));\r\n\r\n const optionsDefaults = response.data.EstatusProyecto.filter(d => \r\n d.ClaEstatusProyecto === 1 \r\n || d.ClaEstatusProyecto === 2\r\n || d.ClaEstatusProyecto === 3\r\n || d.ClaEstatusProyecto === 4).map((d) => ({\r\n value: d.ClaEstatusProyecto,\r\n label: d.NomEstatusProyecto,\r\n }));\r\n setEstatusProyectoList(options);\r\n setClaEstatusProyecto(optionsDefaults);\r\n });\r\n };\r\n const obtenerProyecto = (pClaTipoProyecto) => {\r\n pClaTipoProyecto = pClaTipoProyecto === undefined ? 1 : pClaTipoProyecto\r\n const GetProyectoCmb = `${config.UrlApiProject}ScoreCard/GetProyectoCmb?ClaTipoProyecto=${pClaTipoProyecto}`;\r\n const paramsToService = {};\r\n callApi(GetProyectoCmb, 'GET', paramsToService, (response) => {\r\n setProyectoList(response.data.Proyecto);\r\n });\r\n };\r\n const obtenerColaboradorPorProyectos = (pClaProyecto) => {\r\n if (typeof(pClaProyecto) === 'undefined'){\r\n pClaProyecto = -1;\r\n }\r\n\r\n const GetColaboradorPorProyectosCmb = `${config.UrlApiProject}ScoreCard/GetColaboradorPorProyectosCmb?ClaProyecto=${pClaProyecto}`;\r\n const paramsToService = {};\r\n callApi(GetColaboradorPorProyectosCmb, 'GET', paramsToService, (response) => {\r\n // setColaboradorPorProyectosList(response.data.ColaboradorPorProyectos);\r\n const options = response.data.ColaboradorPorProyectos.map((d) => ({\r\n value: d.ClaColaborador,\r\n label: d.NomColaborador,\r\n }));\r\n setColaboradorPorProyectosList(options);\r\n setResponsablePorProyectosList(options);\r\n });\r\n };\r\n const obtenerEstatusActividades = () => {\r\n const GetEstatusActividadesCmb = `${config.UrlApiProject}ScoreCard/GetEstatusActividadesCmb`;\r\n const paramsToService = {};\r\n callApi(GetEstatusActividadesCmb, 'GET', paramsToService, (response) => {\r\n const options = response.data.EstatusActividades.map((d) => ({\r\n value: d.ClaEstatusActividad,\r\n label: d.NomEstatusActividad,\r\n }));\r\n setEstatusActividadesList(options);\r\n });\r\n };\r\n const onSearchClean = () => {\r\n if (props.onSearch) {\r\n const filtersData = {};\r\n filtersData.flagClean = 1;\r\n filtersData.flagExport = 0;\r\n props.onSearch(filtersData);\r\n props.onExportToExcelMyProject(filtersData);\r\n }\r\n }\r\n const onChangeTipoProyecto = (props, e) => {\r\n const newErrors = { ...errors }\r\n delete newErrors.ClaTipoProyecto; \r\n setErrors(newErrors);\r\n obtenerProyecto(e.target.value);\r\n setClaTipoProyecto(e.target.value);\r\n setflagTipoProyecto(e.target.value === 4 || e.target.value === 5 || e.target.value === 6 ? 0 : 1);\r\n setClaProyecto(null);\r\n onSearchClean(); \r\n };\r\n const onChangeEstatusProyecto = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaEstatusProyecto;\r\n setErrors(newErrors);\r\n setClaEstatusProyecto(e); \r\n onSearchClean(); \r\n };\r\n const onChangeFechaEstimada = (props, e) => {\r\n setFechaEstimadaFin(e.target.value);\r\n onSearchClean(); \r\n };\r\n const onChangeFechaEstimadaFin = (props, e) => {\r\n setFechaEstimadaFin(e.target.value);\r\n onSearchClean(); \r\n };\r\n const onChangeFechaEstimadaIni = (props, e) => {\r\n setFechaEstimadaIni(e.target.value);\r\n onSearchClean(); \r\n };\r\n const onChangeProyecto = (props, e) => {\r\n obtenerColaboradorPorProyectos(e.target.value);\r\n setClaProyecto(e.target.value);\r\n const updatedProyectos = [...ProyectoList];\r\n if (e.target.value !== undefined) {\r\n const tipoProyectoList = updatedProyectos.filter(a => a.ClaProyecto === e.target.value);\r\n setflagProyecto(tipoProyectoList[0].ClaTipoProyecto === 4 || tipoProyectoList[0].ClaTipoProyecto === 5 ? 0 : 1); \r\n }else {\r\n setflagProyecto(1);\r\n setClaColaborador(null);\r\n setClaResponsable(null);\r\n setClaResponsableTeamMeber(null);\r\n }\r\n onSearchClean(); \r\n };\r\n const onChangeAdvancedSearch = (props, e) => { \r\n setAdvancedSearch(e.checked ? 1 : 0);\r\n setFechaEstimadaIni(null);\r\n setClaColaborador(null);\r\n onSearchClean(); \r\n };\r\n const onChangeColaboradorPorProyectos = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.NomColaborador;\r\n setErrors(newErrors);\r\n setClaColaborador(e);\r\n onSearchClean(); \r\n };\r\n const onChangeResponsablePorProyectos = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.NomColaborador;\r\n setErrors(newErrors);\r\n setClaResponsable(e);\r\n onSearchClean(); \r\n };\r\n const onChangeAdvancedSearchText = (props, value) => {\r\n setAdvancedSearchText(value);\r\n onSearchClean(); \r\n };\r\n const onChangeEstatusActividad = (e) => {\r\n setClaEstatusActividad(e);\r\n onSearchClean(); \r\n }; \r\n const onChangeResponsableTeamMember = (e) => {\r\n // const newErrors = { ...errors };\r\n // delete newErrors.NomColaborador;\r\n // setErrors(newErrors);\r\n setClaResponsableTeamMeber(e);\r\n onSearchClean(); \r\n };\r\n\r\n const onApplyFilters = async () => {\r\n \r\n const value = { \r\n ClaTipoProyecto \r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n \r\n return;\r\n }\r\n \r\n let estatus = \"\";\r\n let responsable = \"\";\r\n let responsableProyecto = \"\";\r\n let responsableTeamMember = \"\";\r\n let estatusActividad = \"\";\r\n\r\n if (ClaEstatusProyecto !== null) {\r\n for (let index = 0; index < ClaEstatusProyecto.length; index++) {\r\n const element = ClaEstatusProyecto[index].value;\r\n estatus = `${estatus + element},`;\r\n } \r\n } \r\n\r\n if (ClaColaborador !== null) {\r\n for (let index = 0; index < ClaColaborador.length; index++) {\r\n const element = ClaColaborador[index].value;\r\n responsable = `${responsable + element},`;\r\n } \r\n }\r\n \r\n if (ClaResponsable !== null) {\r\n for (let index = 0; index < ClaResponsable.length; index++) {\r\n const element = ClaResponsable[index].value;\r\n responsableProyecto = `${responsableProyecto + element},`;\r\n } \r\n }\r\n\r\n if (ClaResponsableTeamMeber !== null) {\r\n for (let index = 0; index < ClaResponsableTeamMeber.length; index++) {\r\n const element = ClaResponsableTeamMeber[index].value;\r\n responsableTeamMember = `${responsableTeamMember + element},`;\r\n } \r\n }\r\n\r\n for (let index = 0; index < ClaEstatusActividad.length; index++) {\r\n const element = ClaEstatusActividad[index].value;\r\n estatusActividad = `${estatusActividad + element},`;\r\n }\r\n \r\n if (props.onSearch) {\r\n const filtersData = {};\r\n filtersData.flagExport = 0;\r\n filtersData.AdvancedSearch = AdvancedSearchText;\r\n filtersData.FechaEstimadaIni = FechaEstimadaIni === null ? null : FechaEstimadaIni.toDateString(); \r\n filtersData.FechaEstimadaFin = FechaEstimadaFin === null ? null : FechaEstimadaFin.toDateString();\r\n filtersData.ClaUsuarioResponsable = responsable;\r\n filtersData.ClaUsuarioResponsableProyecto = responsableProyecto;\r\n filtersData.ClaTipoProyecto = ClaTipoProyecto;\r\n filtersData.ClaProyecto = ClaProyecto; \r\n filtersData.ClaEstatusProyecto = estatus; \r\n filtersData.ClaEstatusActividad = estatusActividad; \r\n filtersData.flagClean = 0;\r\n filtersData.ClaUsuarioResponsableEquipo = responsableTeamMember;\r\n props.onSearch(filtersData);\r\n // props.onExportToExcelMyProject(filtersData);\r\n }\r\n };\r\n\r\n const onExportExcelMyProject = async () => {\r\n \r\n const value = { \r\n ClaTipoProyecto \r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n \r\n return;\r\n }\r\n \r\n let estatus = \"\";\r\n let responsable = \"\";\r\n let responsableProyecto = \"\";\r\n let responsableTeamMember = \"\";\r\n let estatusActividad = \"\";\r\n\r\n if (ClaEstatusProyecto !== null) {\r\n for (let index = 0; index < ClaEstatusProyecto.length; index++) {\r\n const element = ClaEstatusProyecto[index].value;\r\n estatus = `${estatus + element},`;\r\n } \r\n } \r\n\r\n if (ClaColaborador !== null) {\r\n for (let index = 0; index < ClaColaborador.length; index++) {\r\n const element = ClaColaborador[index].value;\r\n responsable = `${responsable + element},`;\r\n } \r\n }\r\n \r\n if (ClaResponsable !== null) {\r\n for (let index = 0; index < ClaResponsable.length; index++) {\r\n const element = ClaResponsable[index].value;\r\n responsableProyecto = `${responsableProyecto + element},`;\r\n } \r\n }\r\n\r\n if (ClaResponsableTeamMeber !== null) {\r\n for (let index = 0; index < ClaResponsableTeamMeber.length; index++) {\r\n const element = ClaResponsableTeamMeber[index].value;\r\n responsableTeamMember = `${responsableTeamMember + element},`;\r\n } \r\n }\r\n\r\n for (let index = 0; index < ClaEstatusActividad.length; index++) {\r\n const element = ClaEstatusActividad[index].value;\r\n estatusActividad = `${estatusActividad + element},`;\r\n }\r\n \r\n if (props.onExportToExcelMyProject) {\r\n const filtersData = {};\r\n filtersData.AdvancedSearch = AdvancedSearchText;\r\n filtersData.FechaEstimadaIni = FechaEstimadaIni === null ? null : FechaEstimadaIni.toDateString(); \r\n filtersData.FechaEstimadaFin = FechaEstimadaFin === null ? null : FechaEstimadaFin.toDateString();\r\n filtersData.ClaUsuarioResponsable = responsable;\r\n filtersData.ClaUsuarioResponsableProyecto = responsableProyecto;\r\n filtersData.ClaTipoProyecto = ClaTipoProyecto;\r\n filtersData.ClaProyecto = ClaProyecto; \r\n filtersData.ClaEstatusProyecto = estatus; \r\n filtersData.ClaEstatusActividad = estatusActividad; \r\n filtersData.flagClean = 0;\r\n filtersData.ClaUsuarioResponsableEquipo = responsableTeamMember;\r\n filtersData.flagExport = 1;\r\n tracker.trackEvent({\r\n type: 'MisProyectosFilter', /* component name */\r\n action: 'EXPORT_PROJECTS'\r\n }) \r\n\r\n props.onExportToExcelMyProject(filtersData);\r\n }\r\n };\r\n\r\n const valitationScheme = yup.object().shape({\r\n ClaTipoProyecto: yup.mixed().required(t('common:RequiredField')).nullable(), \r\n // ClaEstatusProyecto: yup\r\n // .array()\r\n // .min(1, t('common:RequiredField'))\r\n // .required(t('common:RequiredField')),\r\n });\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nconst onClickNewProyect = () => { \r\n setEsMostrarAltraProyecto(true);\r\n tracker.trackEvent({\r\n type: 'MisProyectosFilter', /* component name */\r\n action: 'NEW_PROJECT'\r\n }) \r\n} \r\n\r\nconst onCloseAltaProyecto = () => { \r\n setEsMostrarAltraProyecto(false); \r\n onApplyFilters(); \r\n} \r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n onChangeTipoProyecto(props, e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeEstatusProyecto(e)}\r\n errors={errors}\r\n placeholder={t('misProyectosScreen:ProjectStatusPlaceHolder')}\r\n label={t('misProyectosScreen:ProjectStatus')}\r\n />\r\n
\r\n \r\n \r\n onChangeFechaEstimada(props, e)}\r\n />\r\n
\r\n \r\n ) : (\r\n <> \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('misProyectosScreen:Start')}\r\n \r\n \r\n onChangeFechaEstimadaIni(props, e)}\r\n /> \r\n \r\n \r\n {t('misProyectosScreen:End')}\r\n \r\n \r\n onChangeFechaEstimadaFin(props, e)}\r\n />\r\n
\r\n \r\n onChangeProyecto(props, e)}\r\n />\r\n
\r\n \r\n \r\n onChangeResponsablePorProyectos(e)}\r\n errors={errors}\r\n placeholder={t('misProyectosScreen:ResponsiblePlaceHolder')} \r\n label={t('misProyectosScreen:ProjectResponsible')}\r\n /> \r\n
\r\n \r\n \r\n \r\n onChangeAdvancedSearch(props, e)}\r\n />\r\n
\r\n \r\n \r\n onChangeAdvancedSearchText(props, e.target.value)}\r\n maxLength={250}\r\n /> \r\n
\r\n \r\n \r\n onChangeEstatusActividad(e)}\r\n errors={errors}\r\n placeholder={t('misProyectosScreen:ActivityStatusPlaceHolder')} \r\n label={t('misProyectosScreen:ActivityStatus')}\r\n /> \r\n
\r\n \r\n \r\n onChangeColaboradorPorProyectos(e)}\r\n errors={errors}\r\n placeholder={t('misProyectosScreen:ResponsiblePlaceHolder')} \r\n label={t('misProyectosScreen:Responsible')}\r\n /> \r\n
\r\n \r\n \r\n onChangeResponsableTeamMember(e)}\r\n errors={errors}\r\n placeholder={t('misProyectosScreen:TeamMemberPlaceHolder')} \r\n label={t('misProyectosScreen:TeamMember')}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {t('common:EditProject')}\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n setShowEnterTicket(true)} />\r\n props.getTickets(filters)}>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) : <> }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ) : <> }\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n
\r\n \r\n onClaAnioChange(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('corporate:From')}\r\n onFromMes1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {t('corporate:To')}\r\n onToMes1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n onScenario1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n onClaAnio2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('corporate:From')}\r\n onFromMes2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {t('corporate:To')}\r\n onToMes2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n onScenario2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n onChangeClaAcumProm(value)}\r\n checked={TipoPromedio === 'Avg'}\r\n >\r\n \r\n onChangeClaAcumProm(value)}\r\n checked={TipoPromedio === 'Ac'}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeTons(value)}\r\n checked={TipoTonleadas === 'Mtons'}\r\n >\r\n \r\n onChangeTons(value)}\r\n checked={TipoTonleadas === 'ShorTons'}\r\n >\r\n \r\n
\r\n \r\n \r\n {rowData.PositionName}\r\n
\r\n \r\n { rowData.Responsible} \r\n
\r\n \r\n );\r\n } \r\n\r\n const EstatusPeriodoTemplate = (props) => {\r\n let className = '';\r\n\r\n switch (props.ColorEstatus) {\r\n case 1:\r\n className = 'danger-color';\r\n break;\r\n case 2:\r\n className = 'warning-color';\r\n break;\r\n case 3:\r\n className = 'success-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n return (\r\n <>\r\n \r\n {props.CurrentStatus !== null? Highcharts.numberFormat(props.CurrentStatus, 2, '.', ','): null}\r\n \r\n \r\n );\r\n };\r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const onHide = () => { \r\n if (props.onHide !== null && typeof props.onHide === 'function') {\r\n props.onHide();\r\n }\r\n };\r\n\r\n return (\r\n <> \r\n \r\n
\r\n )\r\n\r\n\r\n \r\nconst onConfirmRemoveSubmit = (nIdArchivo) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n onSubmit(nIdArchivo);\r\n break; \r\n default:\r\n break;\r\n }\r\n }); \r\n}\r\n\r\nconst onSubmit = async (nIdArchivo) => { \r\n const paramsService = {\r\n IdArchivo: nIdArchivo\r\n }; \r\n const SubmitBajaAnexosActionPlan = `${config.UrlApiProject}ScoreCard/BajaAnexosActionPlanFileById`;\r\n callApi(SubmitBajaAnexosActionPlan, 'POST', paramsService, (response) => { \r\n obtenerInformacionActionPlanFileAttachtment(); \r\n props.obtenerInformacionActionPlanFile !== undefined? props.obtenerInformacionActionPlanFile(IdCSF, ClaPeriodo, ClaFechaReporte) : \"\"; \r\n }); \r\n} \r\n\r\nconst onChangeUpload = (e) => { \r\n if(e===null){\r\n return;\r\n } \r\n setdatafiles(e);\r\n setImagenBase64(null);\r\n if(e[0]!==undefined){\r\n setEsMostrarImagen(true);\r\n setImagenBase64(e[0].objectURL);\r\n }\r\n}; \r\n\r\nconst removerImagen = () => {\r\n setdatafiles([]);\r\n setEsMostrarImagen(false);\r\n setImagenBase64(null);\r\n setImagen(null); \r\n}\r\n\r\n \r\nconst footer = (\r\n <> \r\n {t('focusReport:SubmitRemoveDocument')}.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ):(\r\n <>\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n ); \r\n};\r\nexport default KPITrendGraphAttachment;","/* eslint-disable react/no-this-in-sfc */\r\n/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n Row,\r\n Col,\r\n ListGroupItem,\r\n ListGroup,\r\n Progress,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n} from 'reactstrap';\r\nimport { Panel } from 'primereact/panel';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Badge } from 'primereact/badge';\r\nimport { Link } from 'react-router-dom';\r\nimport ActionPlanScoreSquare from './ActionPlanScoreSquare.jsx';\r\nimport { Toolbar } from 'primereact/toolbar';\r\nimport Highcharts from 'highcharts';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert,tracker } from '../../../../utils/utils'; \r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport FieldButton from '../../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Column } from 'primereact/column';\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport moment from \"moment\"; \r\nimport { ScrollPanel } from 'primereact/scrollpanel';\r\nimport ActionPlan from '../ActionPlans/ActionPlan.jsx';\r\nimport HighchartsExporting from 'highcharts-exporting';\r\nimport KPITrendGraphAttachment from './KPITrendGraphAttachment.jsx';\r\nimport { Tooltip } from 'primereact/tooltip';\r\nimport SweatAlertCustomIcon from 'components/SweatAlert/SweatAlertCustomIcon.jsx';\r\nimport swal from '@sweetalert/with-react';\r\n\r\nHighchartsExporting(Highcharts);\r\nconst KPITrendGraph = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'focusReport', 'common']);\r\n const [PosicionesRelacionadasList, setPosicionesRelacionadasList] = useState([]);\r\n const [ClaPeriodo, setClaPeriodo] = useState(null);\r\n const [ClaFechaReporte, setClaFechaReporte] = useState(null);\r\n const [IdCSF, setIdCSF] = useState(null);\r\n const [Base64Image, setBase64Image] = useState(null);\r\n const [Chart, setChart] = useState(null);\r\n const [Titulo, setTitulo] = useState('');\r\n const [Subtitulo, setSubtitulo] = useState('');\r\n const [Serie1, setSerie1] = useState('');\r\n const [Serie2, setSerie2] = useState('');\r\n const [Serie3, setSerie3] = useState('');\r\n const [Serie4, setSerie4] = useState('');\r\n const [Serie5, setSerie5] = useState('');\r\n const [Serie6, setSerie6] = useState('');\r\n const [Serie7, setSerie7] = useState('');\r\n const [ColorSerie1, setColorSerie1] = useState('');\r\n const [ColorSerie2, setColorSerie2] = useState('');\r\n const [ColorSerie3, setColorSerie3] = useState('');\r\n const [ColorSerie4, setColorSerie4] = useState('');\r\n const [ColorSerie5, setColorSerie5] = useState('');\r\n const [ColorSerie6, setColorSerie6] = useState('');\r\n const [ColorSerie7, setColorSerie7] = useState('');\r\n const [SerieValues1, setSerieValues1] = useState([]);\r\n const [SerieValues2, setSerieValues2] = useState([]);\r\n const [SerieValues3, setSerieValues3] = useState([]);\r\n const [SerieValues4, setSerieValues4] = useState([]);\r\n const [SerieValues5, setSerieValues5] = useState([]);\r\n const [SerieValues6, setSerieValues6] = useState([]);\r\n const [SerieValues7, setSerieValues7] = useState([]);\r\n const [xAxisCategories, setxAxisCategories] = useState([]);\r\n const [xAxisName, setxAxisName] = useState('');\r\n const [ClaSentidoMejora, setClaSentidoMejora] = useState('');\r\n const [NoElem, setNoElem] = useState(0);\r\n const [MainCausesInfo, setMainCausesInfo] = useState([]);\r\n const [CompletedInfo, setCompletedInfo] = useState([]);\r\n const [PendingInfo, setPendingInfo] = useState([]);\r\n const [ActionPlanReviewLogList, setActionPlanReviewLogList] = useState([]);\r\n const [EsAbrirActionPlan, setEsAbrirActionPlan] = useState(false);\r\n const [selectedAPRow, setselectedAPRow] = useState({}); \r\n const chartRef = useRef(null);\r\n const [EsSubirArchivos, setEsSubirArchivos] = useState(false);\r\n const [ClaPuesto, setClaPuesto] = useState(null);\r\n const [ClaTipoIndicador, setClaTipoIndicador] = useState(null);\r\n const [ClaIndicador, setClaIndicador] = useState(null); \r\n const [IdPuestoIndicadorActionPlanReviewLog, setIdPuestoIndicadorActionPlanReviewLog] = useState(null); \r\n\r\n useEffect(() => { \r\n setClaPeriodo(props.ClaPeriodo === undefined ? 0 : props.ClaPeriodo); \r\n setClaFechaReporte(props.ClaFechaReporte === undefined ? 0 : props.ClaFechaReporte);\r\n setIdCSF(props.IdCSF === undefined ? 0 : props.IdCSF);\r\n\r\n setTitulo('KPI - 415 - Team Performance Index');\r\n setSubtitulo('CSF - DANIEL GERARDO OROZCO MORALES');\r\n GetKPITendenciaChart(\r\n props.ClaPeriodo === undefined ? 0 : props.ClaPeriodo,\r\n props.IdCSF === undefined ? 0 : props.IdCSF,\r\n props.ClaFechaReporte === undefined ? 0 : props.ClaFechaReporte\r\n ); \r\n \r\n }, [props.IdCSF, props.ClaPeriodo, props.ClaFechaReporte, props.show]);\r\n\r\n const GetKPITendenciaChart = (ClaPeriodo, IdCSF, ClaFechaReporte) => {\r\n const GetKPITendenciaChart = `${config.UrlApiProject}ScoreCard/GetKPITendenciaChart`;\r\n const paramsToService = {\r\n IdCSF,\r\n ClaPeriodo,\r\n ClaFechaReporte \r\n };\r\n\r\n callApi(GetKPITendenciaChart, 'POST', paramsToService, (response) => { \r\n setTitulo(response.data.ConfiguracionGrafica.Titulo);\r\n setSubtitulo(response.data.ConfiguracionGrafica.Subtitulo);\r\n setxAxisName(response.data.ConfiguracionGrafica.xAxisName);\r\n setNoElem(response.data.ConfiguracionGrafica.NoElem);\r\n setSerie1(response.data.ConfiguracionGrafica.Serie1);\r\n setSerie2(response.data.ConfiguracionGrafica.Serie2);\r\n setSerie3(response.data.ConfiguracionGrafica.Serie3);\r\n setSerie4(response.data.ConfiguracionGrafica.Serie4);\r\n setSerie5(response.data.ConfiguracionGrafica.Serie5);\r\n setSerie6(response.data.ConfiguracionGrafica.Serie6);\r\n setSerie7(response.data.ConfiguracionGrafica.Serie7);\r\n setColorSerie1(response.data.ConfiguracionGrafica.ColorSerie1);\r\n setColorSerie2(response.data.ConfiguracionGrafica.ColorSerie2);\r\n setColorSerie3(response.data.ConfiguracionGrafica.ColorSerie3);\r\n setColorSerie4(response.data.ConfiguracionGrafica.ColorSerie4);\r\n setColorSerie5(response.data.ConfiguracionGrafica.ColorSerie5);\r\n setColorSerie6(response.data.ConfiguracionGrafica.ColorSerie6);\r\n setColorSerie7(response.data.ConfiguracionGrafica.ColorSerie7);\r\n setSerieValues1(response.data.Serie1);\r\n setSerieValues2(response.data.Serie2);\r\n setSerieValues3(response.data.Serie3);\r\n setSerieValues4(response.data.Serie4);\r\n setSerieValues5(response.data.Serie5);\r\n setSerieValues6(response.data.Serie6);\r\n setSerieValues7(response.data.Serie7);\r\n setxAxisCategories(response.data.xAxisCategories);\r\n setClaSentidoMejora(response.data.ConfiguracionGrafica.ClaSentidoMejora);\r\n setMainCausesInfo(response.data.MainCauses);\r\n setCompletedInfo(response.data.Completed);\r\n setPendingInfo(response.data.Pending);\r\n setIdPuestoIndicadorActionPlanReviewLog(response.data.PuestoIndicador[0].IdPuestoIndicadorActionPlanReviewLog);\r\n setClaPuesto(response.data.PuestoIndicador[0].ClaPuesto);\r\n setClaTipoIndicador(response.data.PuestoIndicador[0].ClaTipoIndicador);\r\n setClaIndicador(response.data.PuestoIndicador[0].ClaIndicador);\r\n setActionPlanReviewLogList(response.data.PuestoIndicadorActionPlanReviewLog);\r\n // setPosicionesRelacionadasList(response.data.PosicionesRelacionadas); \r\n });\r\n }; \r\n\r\n const afterSaveAttachment = (pClaPuesto, pClaIndicador, pClaTipoIndicador) => {\r\n const GetKPITendenciaActionPlanReviewLog = `${config.UrlApiProject}ScoreCard/GetKPITendenciaActionPlanReviewLogLista`;\r\n const paramsToService = {\r\n ClaPuesto:pClaPuesto,\r\n ClaIndicador:pClaIndicador,\r\n ClaTipoIndicador:pClaTipoIndicador\r\n };\r\n callApi(GetKPITendenciaActionPlanReviewLog, 'POST', paramsToService, (response) => {\r\n setActionPlanReviewLogList(response.data.ActionPlanReviewLog);\r\n });\r\n };\r\n\r\n const GetKPITendenciaPrint = () => {\r\n if (chartRef.current && chartRef.current.chart) {\r\n const { chart } = chartRef.current;\r\n const svg = chart.getSVG();\r\n\r\n // Crear un nuevo elemento Image\r\n const img = new Image();\r\n const svgData = `data:image/svg+xml;base64,${btoa(svg)}`;\r\n\r\n // Configurar el src de la imagen con los datos SVG codificados en base64\r\n img.src = svgData;\r\n\r\n // Asegúrate de que la imagen esté cargada antes de intentar dibujarla en el canvas\r\n img.onload = function() {\r\n // Crear un canvas para dibujar la imagen\r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n // Configura el canvas con el tamaño de la imagen\r\n canvas.width = img.width;\r\n canvas.height = img.height;\r\n // Dibuja la imagen en el canvas\r\n ctx.drawImage(img, 0, 0);\r\n // Obtén los datos de la imagen como un URI de datos en formato PNG\r\n const dataURL = canvas.toDataURL('image/png');\r\n // Extrae el base64 del URI de datos\r\n const base64 = dataURL.split(',')[1];\r\n\r\n /*\r\n const svgString = chartRef.current.chart.getSVG();\r\n const parser = new DOMParser();\r\n const svgElem = parser.parseFromString(svgString, \"image/svg+xml\").documentElement;\r\n const b64 = svgElem.toDataURL();\r\n */\r\n const GetKPITendenciaPrint = `${config.UrlApiProject}ScoreCard/GetKPITendenciaPrint`;\r\n const paramsToService = {\r\n IdCSF: props.IdCSF,\r\n ClaPeriodo: props.ClaPeriodo,\r\n ClaFechaReporte: props.ClaFechaReporte,\r\n FileData: base64\r\n };\r\n\r\n callApi(GetKPITendenciaPrint, 'POST', paramsToService, (response) => {\r\n const linkSource = `data:application/${response.data.FileExtension};base64,${response.data.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `kpiTendencia_report_${props.IdCSF}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = fileName;\r\n downloadLink.click();\r\n });\r\n\r\n }; \r\n \r\n } else {\r\n console.error('Chart not available');\r\n }\r\n };\r\n\r\n Highcharts.wrap(Highcharts.Series.prototype, 'drawPoints', function(p) {\r\n const {options} = this;\r\n const symbolCallback = options.marker && options.marker.symbolCallback;\r\n const {points} = this;\r\n if (symbolCallback && points.length) {\r\n points.forEach(point => {\r\n const symbol = symbolCallback.call(point);\r\n if (symbol) {\r\n point.update({\r\n marker: {\r\n fillColor: symbol\r\n }\r\n }, false)\r\n }\r\n })\r\n }\r\n p.call(this); \r\n })\r\n\r\n\r\n const kpiTrendChart = {\r\n\r\n title: {\r\n text: Titulo\r\n },\r\n\r\n subtitle: {\r\n text: Subtitulo\r\n }, \r\n xAxis: {\r\n title: {\r\n text: ''\r\n },\r\n categories: xAxisCategories\r\n }, \r\n yAxis: {\r\n title: {\r\n text: xAxisName\r\n } \r\n }, \r\n tooltip: {\r\n crosshairs: true,\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'right',\r\n verticalAlign: 'middle'\r\n }, \r\n\r\n series: [{\r\n type: NoElem <= 2 ? 'line' : 'line',\r\n name: Serie1,\r\n color: ColorSerie1,\r\n data: SerieValues1,\r\n zIndex: 1,\r\n marker: { \r\n fillColor: 'white',\r\n lineWidth: 2,\r\n lineColor: ColorSerie1,\r\n symbolCallback: function() { \r\n let minValue = null;\r\n let outstandingValue = null;\r\n\r\n if (SerieValues2.length > 0) {\r\n minValue = SerieValues2[this.index];\r\n }\r\n\r\n if (SerieValues3.length > 0) {\r\n outstandingValue = SerieValues3[this.index];\r\n }\r\n\r\n if (ClaSentidoMejora === 1) {\r\n if (this.y < minValue){ \r\n return 'red';\r\n }\r\n\r\n if (this.y > outstandingValue){ \r\n return 'MediumSeaGreen';\r\n }\r\n }\r\n\r\n if (ClaSentidoMejora === 2) {\r\n if (this.y > minValue){ \r\n return 'red';\r\n }\r\n\r\n if (this.y < outstandingValue){ \r\n return 'MediumSeaGreen';\r\n } \r\n } \r\n\r\n return 'white';\r\n }\r\n } \r\n }, {\r\n type: 'arearange',\r\n name: Serie7, \r\n data: SerieValues7,\r\n lineWidth: 0,\r\n linkedTo: ':previous',\r\n color: '#7cb5ec',// Highcharts.getOptions().colors[0],\r\n fillOpacity: 0.2,\r\n zIndex: 0,\r\n marker: {\r\n enabled: false\r\n }\r\n } , {\r\n type: 'line',\r\n name: Serie2,\r\n color: ColorSerie2,\r\n data: SerieValues2,\r\n marker: {\r\n enabled: false\r\n },\r\n visible: false\r\n }, {\r\n type: 'line',\r\n name: Serie3,\r\n color: ColorSerie3,\r\n data: SerieValues3,\r\n marker: {\r\n enabled: false\r\n } ,\r\n visible: false\r\n }, {\r\n type: 'line',\r\n name: Serie4,\r\n color: ColorSerie4,\r\n data: SerieValues4,\r\n marker: {\r\n enabled: false\r\n } ,\r\n visible: false\r\n }, {\r\n type: 'line',\r\n name: Serie5,\r\n color: ColorSerie5,\r\n data: SerieValues5,\r\n marker: {\r\n enabled: false\r\n },\r\n visible: false\r\n }, {\r\n type: 'line',\r\n name: Serie6,\r\n color: ColorSerie6,\r\n data: SerieValues6,\r\n marker: {\r\n enabled: false\r\n },\r\n visible: false\r\n }\r\n], \r\n responsive: {\r\n rules: [{\r\n condition: {\r\n maxWidth: 500\r\n },\r\n chartOptions: {\r\n legend: {\r\n layout: 'horizontal',\r\n align: 'center',\r\n verticalAlign: 'bottom'\r\n }\r\n }\r\n }]\r\n } \r\n}\r\n\r\nconst FechaCompromisoTemplate = (rowData) => {\r\n return (\r\n <>\r\n { rowData.FechaCompromiso !== null ? moment(rowData.FechaCompromiso).format(\"MM/DD/YYYY\") : rowData.FechaCompromiso } \r\n \r\n );\r\n}\r\n\r\nconst FechaCompletadaTemplate = (rowData) => {\r\n return (\r\n <>\r\n { rowData.FechaCompletada !== null ? moment(rowData.FechaCompletada).format(\"MM/DD/YYYY\") : rowData.FechaCompletada } \r\n \r\n );\r\n}\r\n\r\nconst AtrasadoTemplate = (rowData) => {\r\n return (\r\n <>\r\n { rowData.Atrasado } \r\n \r\n );\r\n}\r\n\r\nconsole.log(Highcharts.getOptions().colors[0]);\r\n\r\nconst AccionesTemplateAp = (row) => {\r\n let className = '';\r\n\r\n switch (row.PlanAccionBandera) { \r\n case 0:\r\n className = \"fas fa-flag-checkered Cursor\";\r\n break;\r\n case 1:\r\n className = \"fa fa-flag danger-color Cursor\";\r\n break;\r\n case 2:\r\n className = \"fa fa-flag warning-color Cursor\";\r\n break;\r\n case 3:\r\n className = \"fa fa-flag success-color Cursor\"; \r\n break;\r\n default:\r\n className = \"fa fa-flag default-color Cursor\";\r\n }\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n onClickActionPlan(row)}> \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nconst onClickActionPlan = (row) => { \r\n setselectedAPRow(row);\r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirActionPlan(true);\r\n\r\n tracker.trackEvent({\r\n type: 'KPITrendGraph', /* component name */\r\n action: 'CLICK_ACTION_PLAN'\r\n }) \r\n}\r\n\r\nconst onHideActionPlan = () => {\r\n setEsAbrirActionPlan(false);\r\n // GetProjectActivitiesScoreCardFocusReport();\r\n}\r\n\r\nconst MainCauseTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.MainCause}
\r\n \r\n );\r\n}\r\nconst ActionCompletedTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.Accion}
\r\n \r\n );\r\n}\r\n\r\nconst ActionPendingTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.Accion}
\r\n \r\n );\r\n}\r\n\r\nconst MainCausesTemplate = () => {\r\n return (\r\n <>\r\n \r\n {t('focusReport:MainCauses')}\r\n
\r\n \r\n\r\n {t('focusReport:ActionsCompleted')}\r\n
\r\n \r\n\r\n {t('focusReport:ActionsPending')}\r\n
\r\n \r\n\r\n
\r\n)\r\n\r\nconst onSubmitDelete = async (oRow) => { \r\n const paramsService = {\r\n IdPuestoIndicadorActionPlanReviewLog: oRow.IdPuestoIndicadorActionPlanReviewLog\r\n }; \r\n const deleteActionPlanReviewLog = `${config.UrlApiProject}ScoreCard/DeleteActionPlanReviewLog`;\r\n callApi(deleteActionPlanReviewLog, 'POST', paramsService, (response) => { \r\n afterSaveAttachment(oRow.ClaPuesto,oRow.ClaIndicador, oRow.ClaTipoIndicador)\r\n }); \r\n} \r\n\r\nconst onConfirmRemoveSubmit = (row) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\": \r\n onSubmitDelete(row);\r\n break; \r\n default:\r\n break;\r\n }\r\n }); \r\n}\r\n\r\nconst AnexoInfo = (rowData) => {\r\n return (\r\n <> \r\n {t('actionPlan:SubmitRemoveDocument')}.
\r\n \r\n {t('focusReport:ActionsComments')}\r\n
\r\n \r\n{t('hr:TeamPerformanceIndexCalculation')}
\r\n\r\n
\r\n \r\n);\r\n\r\n const footer = ( \r\n <> \r\n \r\n {KPIProgressEvaluationResult.NomIndicador}\r\n
\r\n \r\n
\r\n \r\n {KPIProgressEvaluationResult.NomIndicador}
\r\n\r\n {t('focusReport:ProjectActivitiesAccomplishmentPercentage')} ({KPIProgressEvaluationResultHeader.ProjectActivitiesAccomplishmentPercentage}%)\r\n
\r\n \r\n \r\n
\r\n \r\n {t('focusReport:Points')}: {Highcharts.numberFormat(KPIProgressEvaluationResultHeader.ProjectActivitiesAccomplishment, 2, '.', ',') }
\r\n\r\n {t('focusReport:ProjectKPIAccomplishmentPercentage')} ({KPIProgressEvaluationResultHeader.ProjectKPIAccomplishmentPercentage}%)\r\n
\r\n \r\n \r\n
\r\n \r\n {t('focusReport:Points')}: {Highcharts.numberFormat(KPIProgressEvaluationResultHeader.ProjectKPIAccomplishment, 2, '.', ',') }
\r\n\r\n *{t('focusReport:KPIProgressEvaluationNote')}\r\n
\r\n \r\n \r\n
\r\n \r\n {t('focusReport:TotalScoreTitle')}: {Highcharts.numberFormat(KPIProgressEvaluationResultHeader.Total, 2, '.', ',') }
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {t('focusReport:ProjectProgressActivitiesSummary')}\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ):(\r\n <>\r\n {\r\n KPIProgressEvaluationResultHeader.EsRequiereProgressReport ? (\r\n <>\r\n
\r\n
\r\n \r\n \r\n {t('focusReport:KPIProgressEvaluation')}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n ):(\r\n <>\r\n \r\n
\r\n \r\n \r\n {t('focusReport:NothingKPI')}\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n }\r\n \r\n \r\n )\r\n }\r\n \r\n \r\n
\r\n \r\n \r\n {t('focusReport:MessageNotProgressReport')}\r\n \r\n
\r\n onClickActionPlan(row)}> \r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n const onClickActionPlan = (row) => { \r\n setselectedAPRow(row);\r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirActionPlan(true);\r\n\r\n tracker.trackEvent({\r\n type: 'ScoreCardReport', /* component name */\r\n action: 'CREATE_ACTION_PLAN'\r\n }) \r\n }\r\n\r\n const onClickIndexRole = (row) => { \r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsAbrirKPIPositionIndexRole(true);\r\n\r\n tracker.trackEvent({\r\n type: 'ScoreCardReport', /* component name */\r\n action: 'CLICK_INDEX_ROLE'\r\n }) \r\n }\r\n\r\n const onClickIndexTendencia = (row) => { \r\n setClaPeriodo(row.ClaPeriodo);\r\n setClaFechaReporte(row.ClaFechaReporte);\r\n setIdCSF(row.IdCSF);\r\n setEsVerGraficaTendenciaKPI(true);\r\n\r\n tracker.trackEvent({\r\n type: 'ScoreCardReport', /* component name */\r\n action: 'CLICK_VIEW_TREND_DETAIIL'\r\n }) \r\n }\r\n\r\n const onClickDescription = (row) => { \r\n setEsVerTeamPerformance(true);\r\n }\r\n\r\n\r\n const AccionesTemplateExpectedTrend = (row) => {\r\n let className = '';\r\n switch (row.ExpectedTrend) {\r\n case 0:\r\n className = \"fa fa-chart-line fa-color-chart-line-down\";\r\n break;\r\n case 1:\r\n className = \"fa fa-chart-line fa-color-chart-line\";\r\n break;\r\n default:\r\n className = \"fa fa-exclamation-triangle fa-color-triangle\";\r\n }\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n const AccionesTemplateUoM = (row) => { \r\n return (\r\n <>\r\n \r\n {row.UnidadMedida}\r\n
\r\n \r\n );\r\n }\r\n const footer = ( \r\n <> \r\n onClickIndexRole(row)}>{row.IndexRole}
);\r\n } \r\n\r\n const DescriptionTemplate = (props) => {\r\n\r\n if (props.ClaProyecto !== null){\r\n return (<> onClickViewProjectDetail(props.ClaProyecto)}>{props.Description}
);\r\n }\r\n \r\n return (\r\n props.ClaTipoIndicador === 1 && props.ClaIndicador === 276 ? \r\n (<> onClickDescription(props)}>{props.Description}
)\r\n :(<>{props.Description})\r\n )\r\n \r\n }\r\n const MinimoTemplate = (props) => {\r\n return <>{props.Minimo !== null? Highcharts.numberFormat(props.Minimo, 2, '.', ',') : null};\r\n };\r\n const SatisfactorioTemplate = (props) => {\r\n return <>{props.Satisfactorio !== null? Highcharts.numberFormat(props.Satisfactorio, 2, '.', ','): null};\r\n };\r\n\r\n const SobreSalienteTemplate = (props) => {\r\n return <>{props.SobreSaliente !== null? Highcharts.numberFormat(props.SobreSaliente, 2, '.', ','): null};\r\n };\r\n\r\n const ScoreTemplate = (props) => {\r\n return <>{props.Score !== null? Highcharts.numberFormat(props.Score, 2, '.', ','): null};\r\n };\r\n\r\n const ScoreKpiTemplate = (props) => {\r\n let className = '';\r\n switch (props.ColorEstatus) {\r\n case 1:\r\n className = 'danger-color';\r\n break;\r\n case 2:\r\n className = 'warning-color';\r\n break;\r\n case 3:\r\n className = 'success-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n if (props.ClaProyecto !== null){\r\n return (\r\n <>\r\n \r\n {props.ClaSentidoMejora === 1 ? (): ()}\r\n onClickIndexTendencia(props)}>\r\n
\r\n);\r\n }; \r\n\r\n const PeriodsInaRowTemplate = (props) => {\r\n return (\r\n \r\n {props.PeriodsInaRow} {props.Tendencia} \r\n
\r\n);\r\n }; \r\n\r\n \r\n\r\n const onHideActionPlan = () => {\r\n setEsAbrirActionPlan(false);\r\n GetProjectActivitiesScoreCardFocusReport();\r\n }\r\n\r\n const onHideKPIPositionIndexRole = () => {\r\n setEsAbrirKPIPositionIndexRole(false);\r\n }\r\n\r\n const dialogStyle = {\r\n width: '80vw',\r\n };\r\n\r\n const closeModalTendenciaKPI = () => {\r\n setEsVerGraficaTendenciaKPI(false);\r\n };\r\n\r\n const closeModalTeamPerformance = () => {\r\n setEsVerTeamPerformance(false);\r\n };\r\n\r\n const renderEditProjectFooter = () => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const openDialogModalKPI = (ClaProyecto) => {\r\n setClaProyecto(ClaProyecto);\r\n setEsDialogModalKPI(true); \r\n } \r\n\r\n const openObjetivosKPIDetalle = (item) => { \r\n setKPISelected(item);\r\n setEsMostrarDetalleObjetivos(true)\r\n }\r\n\r\n const closeDialogModalKPI = () => {\r\n setEsDialogModalKPI(false); \r\n } \r\n \r\n const getSeverityClass = () => {\r\n let severityClass = ''; \r\n \r\n let severity = '';\r\n \r\n const value = (ScoreCardFocusReportList.reduce((a,v) => a += v.Score === null ? 0 : v.Score , 0 )); \r\n const nMinimo =\t(ScoreCardFocusReportList.reduce((a,v) => a += v.ScoreMin === null ? 0 : v.ScoreMin , 0 ));\r\n const\tnSatisfactorio =\t(ScoreCardFocusReportList.reduce((a,v) => a += v.ScoreSatisfactory === null ? 0 : v.ScoreSatisfactory , 0 ));\r\n const\tnSobreSaliente =\t(ScoreCardFocusReportList.reduce((a,v) => a += v.ScoreOutstanding === null ? 0 : v.ScoreOutstanding , 0 )); \r\n /*\r\n 0 - 70 --NO CUMPLE\r\n 71 - 90 --MINIMO\r\n 91 - 100 --SATISFACTORIO\r\n 101 - 120 --SOBRESALIENTE\r\n */ \r\n \r\n if (value < nMinimo)\r\n {\r\n severity = \"red\";\r\n }\r\n else if (value >= nMinimo && value < nSatisfactorio){\r\n severity = \"yellow\";\r\n } else if (value >= nSatisfactorio && value < nSobreSaliente) { \r\n severity = \"green\"\r\n } else if (value >= nSobreSaliente) {\r\n severity = \"green\";\r\n } else {\r\n severity = \"\";\r\n } \r\n \r\n switch (severity) {\r\n case \"blue\":\r\n severityClass = \"score-square-blue-gradient\";\r\n break;\r\n case \"green\":\r\n severityClass = \"score-square-green-gradient\";\r\n break;\r\n case \"yellow\":\r\n severityClass = \"score-square-yellow-gradient\";\r\n break;\r\n case \"red\":\r\n severityClass = \"score-square-red-gradient\";\r\n break; \r\n default:\r\n severityClass = \"score-square-default-gradient\";\r\n break;\r\n }\r\n \r\n return severityClass;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {t('common:EditProject')}\r\n
\r\n \r\n {t('focusReport:ScoreCardReport')}
\r\n \r\n{t('focusReport:Score')}: { (ScoreCardFocusReportList.reduce((a,v) => a += v.Score === null ? 0 : v.Score , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } %
\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n};\r\n \r\n\r\nconst onCloseMinuta = () => { \r\n setEsMinutaVisible(false); \r\n GetResultadoAnual();\r\n};\r\n\r\nconst onVerticalMeetingClick = () => { \r\n setClaTipoMinuta(3); // VERTICAL MEETINGS\r\n setIdMinuta(IdMinutaVertical);\r\n setEsMinutaVisible(true); \r\n\r\n tracker.trackEvent({\r\n type: 'FocusReportMonthSummary', /* component name */\r\n action: 'CLICK_VERTICAL_MEETING'\r\n }) \r\n};\r\n\r\nconst onTeamMeetingClick = () => { \r\n setClaTipoMinuta(2); // TEAM MEETINGS\r\n setIdMinuta(IdMinutaTeam);\r\n setEsMinutaVisible(true); \r\n\r\n tracker.trackEvent({\r\n type: 'FocusReportMonthSummary', /* component name */\r\n action: 'CLICK_TEAM_MEETING'\r\n }) \r\n};\r\n\r\n\r\nconst getSeverityClass = (value) => {\r\n let severityClass = ''; \r\n\r\n let severity = '';\r\n\r\n const nPorcMinimo =\t70.0;\r\n\tconst\tnPorcSatisfactorio =\t91.0;\r\n\tconst\tnPorcSobreSaliente =\t101.0; \r\n\t/*\r\n\t 0 - 70 --NO CUMPLE\r\n\t 71 - 90 --MINIMO\r\n\t 91 - 100 --SATISFACTORIO\r\n\t 101 - 120 --SOBRESALIENTE\r\n\t*/ \r\n \r\n if (value < nPorcMinimo)\r\n {\r\n severity = \"red\";\r\n }\r\n else if (value >= nPorcMinimo && value < nPorcSatisfactorio){\r\n severity = \"yellow\";\r\n } else if (value >= nPorcSatisfactorio && value < nPorcSobreSaliente) { \r\n severity = \"green\"\r\n } else if (value >= nPorcSobreSaliente) {\r\n severity = \"green\";\r\n } else {\r\n severity = \"\";\r\n } \r\n\r\n switch (severity) {\r\n case \"blue\":\r\n severityClass = \"score-square-blue-gradient\";\r\n break;\r\n case \"green\":\r\n severityClass = \"score-square-green-gradient\";\r\n break;\r\n case \"yellow\":\r\n severityClass = \"score-square-yellow-gradient\";\r\n break;\r\n case \"red\":\r\n severityClass = \"score-square-red-gradient\";\r\n break; \r\n default:\r\n severityClass = \"score-square-default-gradient\";\r\n break;\r\n }\r\n \r\n return severityClass;\r\n}\r\n\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n )\r\n : \r\n (<>)}\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n \r\n )\r\n : \r\n (<>)}\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n {t('focusReport:KPIsPrev')} {NombreMes} (Previous)
\r\n \r\n{t('focusReport:TotalScore')}: {ActionPlanMonthResult !== null && typeof(ActionPlanMonthResult) === 'number' ? Highcharts.numberFormat(ActionPlanMonthResult, 2, '.', ',') : ActionPlanMonthResult} %
\r\n \r\n\r\n \r\n
\r\n \r\n );\r\n }\r\n const dialogStyle = {\r\n width: '80vw',\r\n };\r\n\r\n const closeModalActionPlan = () => {\r\n setEsActionPlan(false);\r\n };\r\n\r\n const closeModalKPIsPrev = () => {\r\n setEsKPIsPrev(false);\r\n };\r\n const onViewKPIsPrev = () => { \r\n setEsKPIsPrev(!EsKPIsPrev);\r\n };\r\n\r\n const onClickViewDetailActionPlan = (props) => { \r\n setEsActionPlan(!EsActionPlan);\r\n GetActionPlanDetail(props.CumplimientoID);\r\n\r\n tracker.trackEvent({\r\n type: 'ActionPlanMonthSummary', /* component name */\r\n action: 'CLICK_VIEW_ACTIONPLAN_LIST'\r\n }) \r\n };\r\n\r\n const headerActionPlan =(\r\n <>\r\n {t('focusReport:ActionPlan')}
\r\n \r\n\r\n {t('focusReport:ActionPlanFinishedOnTime')} ({AccomplishmentPercentage}%)\r\n
\r\n \r\n {t('focusReport:Score')}: {ScoreAPAccomplishment !== null && typeof(ScoreAPAccomplishment) === 'number' ? Highcharts.numberFormat(ScoreAPAccomplishment, 2, '.', ',') : ScoreAPAccomplishment} %
\r\n\r\n \r\n \r\n \r\n\r\n {t('focusReport:KpiTiltle')} ({KPIsOnRedWithAP}%)\r\n
\r\n \r\n \r\n
\r\n \r\n {t('focusReport:Score')}: {ScoreAPFollowUP !== null && typeof(ScoreAPFollowUP) === 'number' ? Highcharts.numberFormat(ScoreAPFollowUP, 2, '.', ',') : ScoreAPFollowUP} %
\r\n{t('focusReport:TotalScore')}: {ActionPlanMonthResult !== null && typeof(ActionPlanMonthResult) === 'number' ? Highcharts.numberFormat(ActionPlanMonthResult, 2, '.', ',') : ActionPlanMonthResult} %
\r\n \r\n\r\n \r\n
\r\n \r\n );\r\n }\r\n const dialogStyle = {\r\n width: '80vw',\r\n };\r\n\r\n const closeModalActivity = () => {\r\n setEsActivity(false);\r\n };\r\n\r\n const onClickViewDetailActivity = (props) => { \r\n setEsActivity(!EsActivity);\r\n GetActivityDetail(props.CumplimientoID);\r\n\r\n tracker.trackEvent({\r\n type: 'ProjectActivitiesMonthSummary', /* component name */\r\n action: 'CLICK_ACTIVITY_DETAIL_LIST'\r\n }) \r\n };\r\n\r\n const headerActivity =(\r\n <>\r\n {t('focusReport:ProjectActivities')}
\r\n \r\n\r\n
\r\n {t('focusReport:ProjectActivitiesTiltle')}
\r\n\r\n
\r\n \r\n {t('focusReport:Score')}: {Highcharts.numberFormat(ProjectActivitiesMonthResult, 2, '.', ',') }%
\r\n{t('focusReport:ScoreCard')}
\r\n \r\n{t('focusReport:AnnualAvg')}: {ProjectActivitiesAnnualAvg}
\r\n \r\n\r\n
\r\n {t('focusReport:AnnualScoreCard')}
\r\n\r\n
\r\n \r\n {Highcharts.numberFormat(AnnualScoreCard,2)}
\r\n\r\n
\r\n {t('focusReport:AnnualActionPlans')}
\r\n\r\n
\r\n \r\n {Highcharts.numberFormat(AnnualActionPlan,2)}
\r\n\r\n
\r\n {t('focusReport:AnnualProjectActivities')}
\r\n\r\n
\r\n \r\n {Highcharts.numberFormat(AnnualProjectActivities,2)}
\r\n{t('focusReport:ProjectActivities')}
\r\n \r\n );\r\n };\r\n\r\n const rightToolbarTemplate = () => {\r\n return (\r\n <>\r\n{t('focusReport:AnnualAvg')}: {Highcharts.numberFormat(ProjectActivitiesAnnualResult,2)}
\r\n \r\n );\r\n };\r\n const dialogStyle = ( \r\n { \r\n width: '80vw'\r\n \r\n })\r\n const closeModalActivity = () => {\r\n\r\n setEsActivity(false); \r\n \r\n } \r\n\r\n const onViewActivity = (pClaMes, element) => { \r\n if (element.Resultado === null){\r\n return;\r\n }\r\n\r\n setClaMes(pClaMes);\r\n setEsActivity(!EsActivity);\r\n\r\n tracker.trackEvent({\r\n type: 'ProjectActivitiesAnnualSummary', /* component name */\r\n action: 'CLICK_MONTH_DETAIL'\r\n }) \r\n }\r\n return (\r\n <> \r\n{t('focusReport:ActionPlan')}
\r\n \r\n );\r\n };\r\n\r\n const rightToolbarTemplate = () => {\r\n return (\r\n <>\r\n\r\n {' '}\r\n {t('focusReport:AnnualAvg')}: {' '}\r\n {Highcharts.numberFormat(ActionPlanAnnualResult, 2)}\r\n
\r\n \r\n );\r\n };\r\n const onViewActionPlan = (pClaMes, element) => { \r\n\r\n if (element.Resultado === null){\r\n return;\r\n }\r\n\r\n setClaMes(pClaMes);\r\n setEsActionPlan(!EsActionPlan);\r\n\r\n tracker.trackEvent({\r\n type: 'ActionPlanAnnualSummary', /* component name */\r\n action: 'CLICK_MONTH_DETAIL'\r\n }) \r\n };\r\n\r\n const dialogStyle = {\r\n width: '80vw',\r\n };\r\n const closeModalActionPlan = () => {\r\n setEsActionPlan(false);\r\n };\r\n return (\r\n <>\r\n \r\n \r\n onAnioChange(e.value)} \r\n optionValue=\"ClaAnio\"\r\n optionLabel=\"NomAnio\" \r\n placeholder={t('common:SelectYear')} \r\n showClear={false}\r\n /> \r\n \r\n
\r\n )\r\n}\r\n\r\nconst panelAnnualHeaderTemplate = (options) => { \r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up';\r\n const className = `${options.className} ${options.collapsed ? ' collapsed-header' : ''} Cursor`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n ClaMes === PrimerClaMes ? (<> { onBeforeClaMesChange(ClaMes)}} />)\r\n :\r\n (<> { onBeforeClaMesChange(ClaMes)}} />)\r\n }\r\n { onNextClaMesChange(ClaMes)}} />)\r\n : (<> { onNextClaMesChange(ClaMes)}} />)\r\n } \r\n
\r\n \r\n \r\n onClaMesChange(e.value)} \r\n optionValue=\"ClaMes\"\r\n optionLabel=\"NomMes\" \r\n showClear={false}\r\n /> \r\n \r\n
\r\n {\r\n ClaMes === UltimoClaMesCerrado ? (<>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('focusReport:OverallProgress')} {ClaAnio}\r\n \r\n
\r\n )\r\n}\r\n\r\nconst organizationalView = (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n onChangeOrganizationalValue(itemValue, itemNode)}> \r\n
\r\n)\r\n\r\nconst onChangeOrganizationalValue = (itemValue, itemNode)=> { \r\n // console.log(itemNode);\r\n setClaPuesto(itemNode.claPuesto);\r\n\r\n tracker.trackEvent({\r\n type: 'FocusReportScreen', /* component name */\r\n action: 'PICK_NEW_POSITION'\r\n }) \r\n}\r\n\r\n // no carga nada hasta que no se carguen los defaults....\r\n if (ClaPuesto === null || ClaMes === null || ClaAnio === null) {\r\n return (<>);\r\n }\r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n const AccionesTemplateUoM = (row) => {\r\n return (\r\n <>\r\n \r\n {row.UnidadMedida}\r\n
\r\n \r\n );\r\n };\r\n const severityClass = (idx) => {\r\n const d = new Date();\r\n const month = d.getMonth() + 1;\r\n\r\n if (month <= idx) {\r\n if (month === idx) {\r\n return 'score-square-yellow-gradient';\r\n }\r\n return 'score-square-default-gradient-post';\r\n }\r\n return 'score-square-default-gradient-past';\r\n };\r\n\r\n const onClickViewDetailMonth = (ClaMes, props) => {\r\n setClaMes(ClaMes); \r\n GetProjectActivitiesScoreCardFocusReport(ClaPuesto, ClaAnio, ClaMes);\r\n }; \r\n\r\n const getUltimoDisponible = (meses) => {\r\n let ClaMes = 0;\r\n\r\n for (let index = 0; index < meses.length; index++) {\r\n if (meses[index].EsMesDisponible === 1) { \r\n ClaMes = meses[index].ClaMes;\r\n }\r\n }\r\n\r\n return ClaMes;\r\n }\r\n\r\n const onSaveMes = () => {\r\n \r\n \r\n const arrayScoreCardFocusReport = [];\r\n\r\n let RowValues ={};\r\n \r\n for (let index = 0; index < PuestoIndicadorResultado.length; index++) {\r\n if (PuestoIndicadorResultado[index].IsRowEdited){ \r\n RowValues = {\r\n ...PuestoIndicadorResultado[index],\r\n PeriodoReportado: PuestoIndicadorResultado[index].FechaReporte \r\n }\r\n arrayScoreCardFocusReport.push(RowValues);\r\n }\r\n\r\n }\r\n \r\n \r\n const paramsServiceOwners = { \r\n EstatusPeriodoList: arrayScoreCardFocusReport\r\n }; \r\n\r\n const urlWebServiceSaveIndicadorPuestoDetalle = `${config.UrlApiProject}ScoreCard/SaveIndicadorPuestoDetalle`; \r\n \r\n callApi(urlWebServiceSaveIndicadorPuestoDetalle, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n GetProjectActivitiesScoreCardFocusReport(ClaPuesto, ClaAnio, ClaMes);\r\n\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n } \r\n }); \r\n\r\n // setMostrarEstatusMes(!MostrarEstatusMes);\r\n };\r\n\r\n const footer = (\r\n <>\r\n \r\n onCurrentStatusChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onShowCalculationFormulaRevi = (IdKPIFormula) => {\r\n console.info(\"onShowCalculationFormulaRevi: kpi formula\", IdKPIFormula);\r\n console.info(\"onShowCalculationFormulaRevi: year\" , ClaAnio);\r\n console.info(\"onShowCalculationFormulaRevi: month\", ClaMes);\r\n setEsMostrarFormulaReview(true);\r\n setIdKPIFormulaSelected(IdKPIFormula); \r\n }\r\n\r\n const EstatusPeriodoTemplate = (rowData, props) => {\r\n let className = '';\r\n\r\n switch (rowData.ColorEstatus) {\r\n case 1:\r\n className = 'danger-color';\r\n break;\r\n case 2:\r\n className = 'warning-color';\r\n break;\r\n case 3:\r\n className = 'success-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n\r\n if (rowData.IdKPIFormula !== null){\r\n return (\r\n <>\r\n \r\n \r\n calculateKPIResult(rowData, props)}>\r\n \r\n \r\n onShowCalculationFormulaRevi(rowData.IdKPIFormula)}> \r\n {rowData.EstatusPeriodo? Number(rowData.EstatusPeriodo).toFixed(2) : null}\r\n \r\n {\r\n rowData.EsCalculoEjecutado === true &&\r\n (<> onShowCalculationFormulaRevi(rowData.IdKPIFormula)}>) \r\n }\r\n \r\n \r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n {rowData.EstatusPeriodo !== null? Highcharts.numberFormat(rowData.EstatusPeriodo, 2, '.', ','): null} \r\n \r\n );\r\n };\r\n\r\n const MinimoTemplate = (props) => {\r\n return <>{props.Minimo !== null? Highcharts.numberFormat(props.Minimo, 2, '.', ',') : null};\r\n };\r\n const SatisfactorioTemplate = (props) => {\r\n return <>{props.Satisfactorio !== null? Highcharts.numberFormat(props.Satisfactorio, 2, '.', ','): null};\r\n };\r\n\r\n const SobreSalienteTemplate = (props) => {\r\n return <>{props.SobreSaliente !== null? Highcharts.numberFormat(props.SobreSaliente, 2, '.', ','): null};\r\n };\r\n\r\n const SentidoMejoraTemplate = (props) => {\r\n return <>{props.ClaSentidoMejora === 1 ? (): ()};\r\n }; \r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n onClickViewDetailMonth(element.ClaMes, props)}\r\n className={`${ClaMes === element.ClaMes ? \"light-purple\" : \"light\"} border-none btn-shadow`}\r\n >\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n : \r\n }\r\n className=\"white-badge\"\r\n /> \r\n
\r\n \r\n {t('position:WantToRemoveKPIComposition')}\r\n
\r\n \r\n\r\n {props.PuestoIndicador.NomIndicador}\r\n
\r\n )\r\n } \r\n\r\n {t('position:KPIManagementByPositionComposition')}\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ) \r\n\r\n const BotonesTemplate = (rowData, e) => { \r\n return (\r\n <>\r\n {t('position:confirmacionSincronizarDet')}
\r\n \r\n
\r\n ) \r\n \r\n const onRemovePuestoIndicadorDet = (row, props) => {\r\n \r\n const arrayPuestoIndicador = []; \r\n row.BajaLogica = 1;\r\n\r\n arrayPuestoIndicador.push(row); \r\n \r\n\r\n const paramsServiceOwners = {\r\n EstatusPeriodoList: arrayPuestoIndicador,\r\n };\r\n\r\n const urlWebServiceSaveIndicadorPuestoDetalle = `${config.UrlApiProject}ScoreCard/SaveIndicadorPuestoDetalle`;\r\n\r\n callApi(urlWebServiceSaveIndicadorPuestoDetalle, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n onDetailPuesto(SelectedPuestoIndicador);\r\n });\r\n \r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onOutStandingChange = (props, value) => {\r\n const updatedOutStanding = [...PuestoIndicadorDetList];\r\n updatedOutStanding[props.rowData.RowIndex][props.field] = value;\r\n updatedOutStanding[props.rowData.RowIndex].IsRowEdited = true;\r\n setIndicadorPuestoDetalleList(updatedOutStanding);\r\n };\r\n\r\n const onSatisfactorioChange = (props, value) => {\r\n const updatedSatisfactorio = [...PuestoIndicadorDetList];\r\n updatedSatisfactorio[props.rowData.RowIndex][props.field] = value;\r\n updatedSatisfactorio[props.rowData.RowIndex].IsRowEdited = true;\r\n setIndicadorPuestoDetalleList(updatedSatisfactorio);\r\n };\r\n\r\n const onMinimoChange = (props, value) => {\r\n const updatedMinimo = [...PuestoIndicadorDetList];\r\n updatedMinimo[props.rowData.RowIndex][props.field] = value;\r\n updatedMinimo[props.rowData.RowIndex].IsRowEdited = true;\r\n setIndicadorPuestoDetalleList(updatedMinimo);\r\n };\r\n\r\n const onEstatusPeriodoChange = (props, value) => {\r\n const updatedEstatusPeriodo = [...PuestoIndicadorDetList];\r\n updatedEstatusPeriodo[props.rowData.RowIndex][props.field] = value;\r\n updatedEstatusPeriodo[props.rowData.RowIndex].IsRowEdited = true;\r\n setIndicadorPuestoDetalleList(updatedEstatusPeriodo);\r\n };\r\n\r\n const onClickCfgFormulaKPI = (row) => { \r\n setEsMostrarCfgFormula(true);\r\n setIdKPIFormulaSelected(row.IdKPIFormula);\r\n setKPIDescriptionSelected(row.NomIndicador);\r\n }\r\n\r\n const onFormulaCreated = (formula) => { \r\n \r\n const RelacionarFormulaPuestoIndicador = `${config.UrlApiProject}ScoreCard/RelacionarFormulaPuestoIndicador`; \r\n const paramsToService = { \r\n IdKPIFormula: formula.IdKPIFormula,\r\n ClaPeriodo: SelectedPuestoIndicador.ClaPeriodo,\r\n ClaTipoIndicador: SelectedPuestoIndicador.ClaTipoIndicador,\r\n ClaIndicador: SelectedPuestoIndicador.ClaIndicador,\r\n ClaPuesto: SelectedPuestoIndicador.ClaPuesto\r\n }; \r\n \r\n callApi(RelacionarFormulaPuestoIndicador, 'POST', paramsToService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n setEsMostrarCfgFormula(false); \r\n setIdKPIFormulaSelected(null); \r\n ObtenerIndicadorPuesto (ClaAnio, ClaPuesto);\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n } \r\n }); \r\n } \r\n\r\n const onFormulaRemoved = (formula) => { \r\n \r\n const RelacionarFormulaPuestoIndicador = `${config.UrlApiProject}ScoreCard/RelacionarFormulaPuestoIndicador`; \r\n const paramsToService = { \r\n IdKPIFormula: null,\r\n ClaPeriodo: SelectedPuestoIndicador.ClaPeriodo,\r\n ClaTipoIndicador: SelectedPuestoIndicador.ClaTipoIndicador,\r\n ClaIndicador: SelectedPuestoIndicador.ClaIndicador,\r\n ClaPuesto: SelectedPuestoIndicador.ClaPuesto\r\n }; \r\n \r\n callApi(RelacionarFormulaPuestoIndicador, 'POST', paramsToService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n setEsMostrarCfgFormula(false); \r\n setIdKPIFormulaSelected(null);\r\n ObtenerIndicadorPuesto (ClaAnio, ClaPuesto);\r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n } \r\n });\r\n \r\n }\r\n\r\n const onKPIManagementDialogHide = () => {\r\n setIsKPIManagementDialogVisible(false);\r\n };\r\n\r\n const onKPIManagementClick = (row) => {\r\n console.log(\"Row\", row);\r\n setIdKPIFormulaSelected(row.IdKPIFormula);\r\n setKPIDescriptionSelected(row.NomIndicador);\r\n setIsKPIManagementDialogVisible(true);\r\n };\r\n\r\n const onKPIManagementRemoveItem = () => {\r\n ObtenerIndicadorPuesto (ClaAnio, ClaPuesto); \r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n };\r\n\r\n const onKPIManagementUpdated = () => {\r\n ObtenerIndicadorPuesto (ClaAnio, ClaPuesto); \r\n setIsKPIManagementDialogVisible(false); \r\n if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n props.onChange();\r\n }\r\n };\r\n\r\n const OutStandingEditor = (props) => {\r\n return (\r\n {t('position:confirmacionRemovePeriodo')}.
\r\n \r\n onOutStandingChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n const SatisfactorioEditor = (props) => {\r\n return (\r\n \r\n onSatisfactorioChange(props, e.target.value)} \r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const MinimoEditor = (props) => {\r\n return (\r\n \r\n onMinimoChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const EstatusPeriodoEditor = (props) => { \r\n if (props.rowData.ClaMes > UlitmoClaMesDisponible){\r\n return (\r\n \r\n onEstatusPeriodoChange(props, e.target.value)}\r\n disabled\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n onEstatusPeriodoChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const DueDateTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.PeriodoReportado !== null}\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const confirmationRecalculaKPIMessageHTML = (\r\n \r\n
\r\n ) \r\n\r\n const confirmacionRecalcultarEstatusKPI = (indicador) => {\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationRecalculaKPIMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n recalculateKPI(indicador);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const recalculateKPI = (indicador) => { \r\n const RecalcularCurrentStatusKPIAutomatizado = `${config.UrlApiProject}ScoreCard/RecalcularCurrentStatusKPIAutomatizado`; \r\n const paramsToService = { \r\n ClaPeriodo: indicador.ClaPeriodo,\r\n ClaTipoIndicador: indicador.ClaTipoIndicador,\r\n ClaIndicador: indicador.ClaIndicador,\r\n ClaPuesto: indicador.ClaPuesto,\r\n ClaFechaReporte: indicador.ClaFechaReporte\r\n }; \r\n \r\n callApi(RecalcularCurrentStatusKPIAutomatizado, 'POST', paramsToService, (response) => { \r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n onDetailPuesto(SelectedPuestoIndicador); \r\n });\r\n \r\n } \r\n \r\n const NomMesTemplate = (props) => {\r\n\r\n if (props.EsMostrarBotonActualizarResultado === true) {\r\n return (\r\n {t('position:confirmacionRecalculaKPI')}
\r\n confirmacionRecalcultarEstatusKPI(props)}>\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n\r\n return (<>{props.NomMes});\r\n\r\n \r\n }\r\n\r\n const EstatusPeriodoTemplate = (props) => {\r\n let className = '';\r\n\r\n switch (props.ColorEstatus) {\r\n case 1:\r\n className = 'danger-color';\r\n break;\r\n case 2:\r\n className = 'warning-color';\r\n break;\r\n case 3:\r\n className = 'success-color';\r\n break;\r\n default:\r\n className = 'default-color';\r\n }\r\n return (\r\n <>\r\n \r\n \r\n {props.EstatusPeriodo !== null? Highcharts.numberFormat(props.EstatusPeriodo, 2, '.', ','): null}\r\n \r\n );\r\n };\r\n const MinimoTemplate = (props) => {\r\n return <>{props.Minimo !== null? Highcharts.numberFormat(props.Minimo, 2, '.', ',') : null};\r\n };\r\n const SatisfactorioTemplate = (props) => {\r\n return <>{props.Satisfactorio !== null? Highcharts.numberFormat(props.Satisfactorio, 2, '.', ','): null};\r\n };\r\n\r\n const SobreSalienteTemplate = (props) => {\r\n return <>{props.SobreSaliente !== null? Highcharts.numberFormat(props.SobreSaliente, 2, '.', ','): null};\r\n };\r\n\r\n const SentidoMejoraTemplate = (props) => {\r\n return <>{props.ClaSentidoMejora === 1 ? (): ()};\r\n }; \r\n\r\n const CfgFormulaTemplate = (props) => { \r\n\r\n // console.log(\"test:props\", props);\r\n \r\n if (props.IdKPIFormula !== null){\r\n return (<> onClickCfgFormulaKPI(props)} title='Edit Formula'>);\r\n }\r\n\r\n return (<> onClickCfgFormulaKPI(props)} title='Click here to create a formula for this KPI'>);\r\n } \r\n\r\n const kpiManagementColumnTemplate = (props) => { \r\n const flagColor = props.ClaSeguimientoKPIPosicionRelacionada || props.HasKPIComposition? 'text-warning': 'light-gray-color'; \r\n \r\n if (!props.EsMostrarConfiguracionComposicion){\r\n return (<>);\r\n }\r\n\r\n return (\r\n <>\r\n onKPIManagementClick(props)} \r\n />\r\n \r\n );\r\n } \r\n \r\n return (\r\n <> \r\n | {props.NomMes} | \r\n\r\n |
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {t('position:SelectAnIndex')} \r\n
\r\n \r\n {nomIndicadorSelected}\r\n
\r\n {descripcionIndicadorSelected}\r\n {\r\n formulaIndicadorSelected !== '' && formulaIndicadorSelected !== null ?\r\n (\r\n <>\r\n
\r\n
\r\n {t('position:Formula')}:
{formulaIndicadorSelected}\r\n \r\n )\r\n : (<>)\r\n }\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n EstatusPeriodoEditor(props)}\r\n body={EstatusPeriodoTemplate}\r\n >\r\n \r\n MinimoEditor(props)}\r\n body={MinimoTemplate}\r\n >\r\n \r\n SatisfactorioEditor(props)}\r\n body={SatisfactorioTemplate}\r\n >\r\n \r\n OutStandingEditor(props)}\r\n body={SobreSalienteTemplate}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n {descripcionIndicadorSelected}\r\n {\r\n formulaIndicadorSelected !== '' && formulaIndicadorSelected !== null ?\r\n (\r\n <>\r\n
\r\n
\r\n {t('position:Formula')}:
{formulaIndicadorSelected}\r\n \r\n )\r\n : (<>)\r\n }\r\n \r\n
\r\n { SelectedPuestoIndicador !== null ? \r\n (\r\n confirmacionSincronizacionObjetivos()}\r\n label={t('position:btnSincronizarObjetivos')}\r\n icon=\"fas fa-sync\"\r\n className=\"secondary no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em' }}\r\n hidden={SelectedPuestoIndicador.EsSoportaSincronizacionObjetivos===0}\r\n />\r\n )\r\n :\r\n (<>)} \r\n \r\n onSaveObjetivo()}\r\n label={t('common:Save')}\r\n icon=\"pi pi-save\"\r\n className=\"p-button-success no-border p-mr-2 rounded-button\"\r\n style={{ marginRight: '.25em' }}\r\n />\r\n
\r\n \r\n
\r\n onChangeOrganizationalValue(itemValue, itemNode)}> \r\n
\r\n)\r\n\r\n return (\r\n <>\r\n \r\n onClaAnioChange(props, e)} \r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n {/* { moment(rowData.FechaReunion).format(\"LL\") } - { moment(rowData.FechaReunion).format(\"LL\") } */}\r\n {moment(rowData.FechaReunion).format(\"MM/DD/YYYY\")}\r\n
\r\n \r\n );\r\n }\r\n\r\n const AccionesTemplate = (row) => {\r\n let className = '';\r\n const Porcentaje = (row.Task > 0 && row.OpenTask > 0 ? ((row.Task - row.OpenTask) / row.Task) : 1.0) * 100.0\r\n\r\n\r\n switch (true) {\r\n case Porcentaje < 50:\r\n className = \"danger-color\";\r\n break;\r\n case Porcentaje < 75:\r\n className = \"orange-color\";\r\n break;\r\n case Porcentaje < 99:\r\n className = \"warning-color\";\r\n break;\r\n case Porcentaje === 100:\r\n className = \"success-color\";\r\n break;\r\n default:\r\n className = \"default-color\";\r\n }\r\n return (\r\n <>\r\n {/* \r\n {row.OpenTask} \r\n {t('hr:Of')} \r\n {row.Task} \r\n {t('hr:Activities')} \r\n
*/}\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n const actionBodyTemplate = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n onClickViewDetailMeeting(rowData)} />\r\n \r\n onOpenModal(rowData)} />\r\n
\r\n \r\n );\r\n }\r\n\r\n const onClickViewDetailMeeting = (rowData) => {\r\n setEsMinutaVisible(true);\r\n setIdMinuta(rowData.IdMinuta); \r\n tracker.trackEvent({\r\n type: 'MeetingManagementScreen', /* component name */\r\n action: 'VIEW_MEETING_DETAIL'\r\n }) \r\n }\r\n\r\n const onOpenModal = (rowData) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.CopiarA; \r\n setErrors(newErrors) \r\n obtenerInformacionMinutaCorreo(rowData.IdMinuta);\r\n obtenerParticipanes(rowData.IdMinuta);\r\n setopenSendMail(true)\r\n setMinutaSeleccionada(rowData.IdMinuta);\r\n tracker.trackEvent({\r\n type: 'MeetingManagementScreen', /* component name */\r\n action: 'OPEN_SEND_MEETING_BY_EMAIL'\r\n }) \r\n }\r\n\r\n const obtenerParticipanes = (idMinutaParam) => {\r\n const GetParticipantesMinuta = `${config.UrlApiProject}ScoreCard/GetParticipantesMinuta?IdMinuta=${idMinutaParam}`;\r\n const paramsToService = {};\r\n callApi(GetParticipantesMinuta, 'GET', paramsToService, (response) => {\r\n setParticipantesMinutaList(response.data.ParticipantesMinuta);\r\n });\r\n }\r\n const obtenerInformacionMinutaCorreo = (idMinutaParam) => { \r\n const GetMinutasCorreo = `${config.UrlApiProject}ScoreCard/GetMinutasCorreo?IdMinuta=${idMinutaParam}`;\r\n const paramsToService = { };\r\n callApi(GetMinutasCorreo, 'GET', paramsToService, (response) => {\r\n if (response.data.Minutas.length > 0) {\r\n setProjectDesc(response.data.Minutas[0].ProyectoSeleccionado);\r\n setAsunto(response.data.Minutas[0].AsuntoSeleccionado);\r\n setMeetingDay(response.data.Minutas[0].FechaReunionModal);\r\n setCopiarA(response.data.Minutas[0].CopiarA);\r\n setMensaje(response.data.Minutas[0].MensajeModal);\r\n setClaTipoMinutaSendEmail(response.data.Minutas[0].ClaTipoMinuta);\r\n }\r\n });\r\n }\r\n\r\n const closeModal = () => {\r\n setopenSendMail(false);\r\n }\r\n\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nconst renderHeader = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nconst NomTipoReunionTemplate = (rowData) => {\r\n return (\r\n <> \r\n \r\n \r\n
\r\n \r\n {rowData.NomTipoReunion}
\r\n \r\n );\r\n}\r\n\r\nconst AsuntoTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.Asunto}
\r\n \r\n );\r\n}\r\n\r\nconst NomResponsableTemplate = (rowData) => {\r\n return (\r\n <> \r\n {rowData.NomResponsable}
\r\n \r\n );\r\n}\r\n\r\nconst onCloseMinuta = () => { \r\n setEsMinutaVisible(false); \r\n onApplyFilters();\r\n};\r\n\r\nconst onChangeProyecto = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.ClaProyecto;\r\n setErrors(newErrors);\r\n setClaProyecto(e.value); \r\n}\r\n\r\nconst onChangeCopiarA = (e) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.CopiarA; \r\n setErrors(newErrors) \r\n setCopiarA(e.target.value);\r\n}\r\n\r\nconst onChangeMensajeModal = (e) => {\r\n setMensaje(e.target.value);\r\n}\r\n \r\n return (\r\n <> \r\n \r\n onChangeMeetingType(e)} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('common:From')}\r\n onChangeFechaInicio(props, e)}\r\n errors={errors}\r\n />\r\n {t('common:To')}\r\n onChangeFechaFin(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n onChangeProyecto(e)} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onChangeCopiarA(e)}\r\n value={CopiarA}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeMensajeModal(e)}\r\n label={t('minutameeting:Message')}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SurveyManagementHeadSurveyEdit;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Row, Col } from 'reactstrap'; \r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../../utils/utils';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator'; \r\nimport SweatAlertCustomIcon from '../../../../components/SweatAlert/SweatAlertCustomIcon'; \r\nimport FieldButton from '../../../../components/Controls/FieldButton/FieldButton.jsx'; \r\nimport FieldText from 'components/Controls/FieldText'; \r\nimport './Survey.css';\r\nimport { Tooltip } from 'primereact/tooltip';\r\nimport { Divider } from 'primereact/divider';\r\n\r\nconst SurveyManagementTopics = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['survey', 'common']);\r\n \r\n const [EncuestaTopicoList, setEncuestaTopicoList] = useState([]); \r\n const [errors, setErrors] = useState({});\r\n const [IdEncuesta, setIdEncuesta] = useState(null); \r\n const [EsEditar , setEsEditar ] = useState(false);\r\n\r\n useEffect(() => {\r\n setIdEncuesta(props.IdEncuesta === undefined ? null : props.IdEncuesta);\r\n }, [\r\n props.IdEncuesta,\r\n props.ForceRefresh,\r\n props.EsEditar,\r\n ]);\r\n\r\n \r\n\r\n const obtenerEncuestaTopico = () => {\r\n const GetEncuestaTopicoCmb = `${config.UrlApiProject}HR/GetEncuestaTopicoCmb?IdEncuesta=${props.IdEncuesta}`;\r\n const paramsToService = {};\r\n callApi(GetEncuestaTopicoCmb, 'GET', paramsToService, (response) => {\r\n setEncuestaTopicoList(response.data.EncuestaTopicoList);\r\n });\r\n };\r\n\r\n\r\n const AddNewItemArregloMultiSel = () => {\r\n const newRow = {\r\n RowIndex: EncuestaTopicoList !== undefined ? EncuestaTopicoList.length : 0,\r\n Titulo: null,\r\n IdEncuestaTopico: null,\r\n IdEncuesta: props.IdEncuesta,\r\n BajaLogica: 0,\r\n };\r\n\r\n setEncuestaTopicoList([...EncuestaTopicoList, newRow]);\r\n };\r\n\r\n const onSaveEncuestaTopicClick = async () => {\r\n const value = {\r\n EncuestaTopicoList, \r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n\r\n const paramsService = {\r\n IdEncuesta,\r\n SurveyManagementTopico: EncuestaTopicoList \r\n };\r\n\r\n const SaveSurveyEncuestaTopico = `${config.UrlApiProject}HR/SaveSurveyEncuestaTopico`;\r\n\r\n callApi(SaveSurveyEncuestaTopico, 'POST', paramsService, (response) => { \r\n setErrors({}); \r\n showSweetAlert(t('common:Success'), t('common:SuccessOperation'), 'success');\r\n setEsEditar(false);\r\n });\r\n }; \r\n\r\n const confirmationMessageHTML = (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onEditorDescripcionChange(e.htmlValue, e.textValue)}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n onTituloChange(e.target.value)}\r\n autoFocus\r\n placeholder={t('survey:SurveyTile')}\r\n maxLength={500}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n ); \r\n\r\n const valitationSchemeSave = yup.object().shape({ \r\n EncuestaTopicoList: yup.array().of(\r\n yup.object().shape({\r\n Titulo: yup\r\n .string()\r\n .when('BajaLogica', {\r\n is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }) \r\n })\r\n ),\r\n });\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n \r\n const EditarSurveyQuestion = ( \r\n ) => {\r\n obtenerEncuestaTopico();\r\n setEsEditar(true);\r\n };\r\n\r\n const onTituloChange = (value, item) => {\r\n const copyEncuestaTopicoList = [...EncuestaTopicoList];\r\n copyEncuestaTopicoList[item.RowIndex].Titulo = value;\r\n setEncuestaTopicoList(copyEncuestaTopicoList);\r\n };\r\n\r\n const onRemoveEncuestaTopicoClick = (item) => {\r\n const copyEncuestaTopicoList = [...EncuestaTopicoList];\r\n copyEncuestaTopicoList[item.RowIndex].BajaLogica = 1;\r\n setEncuestaTopicoList(copyEncuestaTopicoList);\r\n };\r\n\r\n const onCancel = () => { \r\n setErrors({}); \r\n setEsEditar(false);\r\n };\r\n\r\n\r\n if (!EsEditar) {\r\n return (\r\n <>\r\n {t('survey:RemoveQuestion')}
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | {t('survey:Description')} | \r\n\r\n |
|---|---|
| \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SurveyManagementTopics;\r\n","/* eslint-disable react/no-danger */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Row, Col } from 'reactstrap';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi } from '../../../../utils/utils';\r\nimport SurveyManagementHeadSurveyEdit from './SurveyManagementHeadSurveyEdit';\r\nimport SurveyManagementTopics from './SurveyManagementTopics.jsx';\r\n\r\nconst SurveyManagementHeadSurveyLoad = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['survey', 'common']);\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [Titulo, setTitulo] = useState(null);\r\n const [Descripcion, setDescripcion] = useState(null);\r\n const [DescripcionHtml, setDescripcionHtml] = useState(null);\r\n const [EsHabilitarEditarSurvey, setEsHabilitarEditarSurvey] = useState(false);\r\n const [Index, setIndex] = useState(null);\r\n\r\n useEffect(() => { \r\n setIdEncuesta(props.IdEncuesta === undefined ? null : props.IdEncuesta);\r\n setTitulo(props.Titulo === undefined ? null : props.Titulo);\r\n setDescripcion(props.Descripcion === undefined ? null : props.Descripcion);\r\n setDescripcionHtml(props.DescripcionHtml === undefined ? null : props.DescripcionHtml);\r\n setIndex(props.Index === undefined ? null : props.Index);\r\n\r\n }, [props.IdEncuesta, props.ForceRefresh, props.Titulo, props.Descripcion, props.DescripcionHtml, props.Index]);\r\n\r\n const EditarSurvey = () => {\r\n setEsHabilitarEditarSurvey(true);\r\n }\r\n\r\n const onClickCloseEditarSurvey = () => {\r\n setEsHabilitarEditarSurvey(false); \r\n if (\r\n props.onSearch !== null &&\r\n props.onSearch !== 'undefined' &&\r\n typeof props.onSearch === 'function'\r\n ) {\r\n props.onSearch();\r\n }\r\n }; \r\n\r\n return (\r\n <>\r\n {EsHabilitarEditarSurvey === false ? (\r\n <>\r\n
\r\n \r\n
\r\n
\r\n \r\n {Titulo}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n ) : (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n\r\n const valitationSchemeSave = yup.object().shape({ \r\n Titulo: yup.mixed().required(t('common:RequiredField')).nullable(), \r\n });\r\n\r\n\r\n return (\r\n <>\r\n {t('survey:SubmitCancelled')}.
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SurveyManagementPageEdit;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from '../../../../layouts/PageContent';\r\nimport { Row, Col, Card, CardBody, CardHeader, CardTitle, CardFooter } from 'reactstrap';\r\nimport InstructionsCard from '../../../../components/Cards/InstructionsCard/InstructionsCard';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../../utils/utils';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport swal from '@sweetalert/with-react';\r\nimport SweatAlertCustomIcon from '../../../../components/SweatAlert/SweatAlertCustomIcon';\r\nimport moment from 'moment';\r\nimport { Badge } from 'primereact/badge';\r\nimport Score from '../../../../components/Cards/Score/Score.jsx';\r\nimport FieldButton from '../../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport EditorText from 'components/Controls/EditorText/EditorText';\r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\nimport FieldTextArea from 'components/Controls/FieldTextArea';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport './Survey.css';\r\nimport { Tooltip } from 'primereact/tooltip';\r\nimport { Divider } from 'primereact/divider';\r\n\r\nconst SurveyManagementQuestionEdit = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['survey', 'common']);\r\n const [TipoCampoCmb, setTipoCampoCmb] = useState([]);\r\n const [EncuestaTopicoList, setEncuestaTopicoList] = useState([]);\r\n const [RespuestaOpcionesList, setRespuestaOpcionesList] = useState([]);\r\n const [ClaFormularioTipoCampo, setClaFormularioTipoCampo] = useState(null);\r\n const [Titulo, setTitulo] = useState(null);\r\n const [preguntaPagina, setpreguntaPagina] = useState(null);\r\n const [EsHabilitarOpciones, setEsHabilitarOpciones] = useState(false);\r\n const [errors, setErrors] = useState({});\r\n const [Descripcion, setDescripcion] = useState(null);\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [IdEncuestaPagina, setIdEncuestaPagina] = useState(null);\r\n const [IdEncuestaPaginaPregunta, setIdEncuestaPaginaPregunta] = useState(null);\r\n const [EsHabilitarMultiSeleccion, setEsHabilitarMultiSeleccion] = useState(0);\r\n const [CamposMultiSeleccion, setCamposMultiSeleccion] = useState([]);\r\n const [EsObligatorio, setEsObligatorio] = useState(false);\r\n const [EsEditar, setEsEditar] = useState(false);\r\n const [OpcionesPorPreguntaList, setOpcionesPorPreguntaList] = useState([]);\r\n const [IdEncuestaTopico,setIdEncuestaTopico] = useState(null)\r\n\r\n useEffect(() => {\r\n setIdEncuestaPagina(props.IdEncuestaPagina === undefined ? null : props.IdEncuestaPagina);\r\n setIdEncuestaPaginaPregunta(\r\n props.IdEncuestaPaginaPregunta === undefined ? null : props.IdEncuestaPaginaPregunta\r\n );\r\n setEsEditar(props.EsEditar === undefined ? false : props.EsEditar);\r\n \r\n if (props.EsEditar === false) {\r\n GetHREncuestaPaginaPreguntaById(props.IdEncuestaPagina, props.IdEncuestaPaginaPregunta); \r\n }else{\r\n obtenerTipoCampo();\r\n obtenerEncuestaTopico();\r\n obtenerOpcionesRespuestaPorPregunta(props.IdEncuestaPaginaPregunta);\r\n } \r\n // obtenerOpcionesRespuestaPorPregunta(props.IdEncuestaPaginaPregunta);\r\n }, [\r\n props.IdEncuesta,\r\n props.IdEncuestaPagina,\r\n props.IdEncuestaPaginaPregunta,\r\n props.ForceRefresh,\r\n props.EsEditar,\r\n ]);\r\n\r\n const GetHREncuestaPaginaPreguntaById = (pIdEncuestaPagina, pIdEncuestaPaginaPregunta) => {\r\n const getHREncuestaPaginaPreguntaById = `${config.UrlApiProject}HR/GetHREncuestaPaginaPreguntaById`;\r\n const paramsToService = {\r\n IdEncuestaPagina: pIdEncuestaPagina,\r\n IdEncuestaPaginaPregunta: pIdEncuestaPaginaPregunta,\r\n };\r\n callApi(getHREncuestaPaginaPreguntaById, 'POST', paramsToService, (response) => {\r\n const PreguntaResult = response.data.Pregunta.length > 0 ? response.data.Pregunta[0] : {};\r\n setDescripcion(PreguntaResult.Descripcion);\r\n setClaFormularioTipoCampo(PreguntaResult.ClaFormularioTipoCampo);\r\n setIdEncuestaTopico(PreguntaResult.IdEncuestaTopico);\r\n setEsObligatorio(PreguntaResult.EsObligatorio);\r\n setIdEncuestaPaginaPregunta(PreguntaResult.IdEncuestaPaginaPregunta);\r\n setOpcionesPorPreguntaList(response.data.OpcionesRespuesta);\r\n setEsHabilitarMultiSeleccion(PreguntaResult.EsHabilitarOpciones);\r\n });\r\n };\r\n\r\n const obtenerOpcionesRespuestaPorPregunta = (pIdEncuestaPaginaPregunta) => {\r\n const getHREncuestaPaginaPreguntaRespuesta = `${config.UrlApiProject}HR/GetHREncuestaPaginaPreguntaRespuesta`;\r\n const paramsToService = {\r\n IdEncuestaPaginaPregunta: pIdEncuestaPaginaPregunta,\r\n };\r\n callApi(getHREncuestaPaginaPreguntaRespuesta, 'POST', paramsToService, (response) => {\r\n setCamposMultiSeleccion(response.data.PreguntasPorPagina);\r\n });\r\n };\r\n\r\n const onDescripcionChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.Descripcion;\r\n setErrors(newErrors);\r\n setDescripcion(value);\r\n };\r\n const onCancel = () => {\r\n // setCamposMultiSeleccion(null);\r\n // if (props.OcultarEditarSurveyPageQuestion) {\r\n // props.OcultarEditarSurveyPageQuestion();\r\n // }\r\n setErrors({});\r\n if (props.RecargarPaginaPreguntas) {\r\n props.RecargarPaginaPreguntas();\r\n }\r\n setEsEditar(false);\r\n };\r\n\r\n const obtenerTipoCampo = () => {\r\n const getTipoCampoCmb = `${config.UrlApiProject}HR/GetTipoCampoCmb`;\r\n const paramsToService = {};\r\n callApi(getTipoCampoCmb, 'GET', paramsToService, (response) => {\r\n setTipoCampoCmb(response.data.TipoCampo);\r\n });\r\n };\r\n\r\n const obtenerEncuestaTopico = () => {\r\n const GetEncuestaTopicoCmb = `${config.UrlApiProject}HR/GetEncuestaTopicoCmb?IdEncuesta=${props.IdEncuesta}`;\r\n const paramsToService = {};\r\n callApi(GetEncuestaTopicoCmb, 'GET', paramsToService, (response) => {\r\n setEncuestaTopicoList(response.data.EncuestaTopicoList);\r\n });\r\n };\r\n\r\n\r\n const onChangeTipoCampo = (props, e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaFormularioTipoCampo;\r\n setErrors(newErrors);\r\n\r\n if (e.target.value === null || typeof e.target.value === 'undefined') {\r\n setClaFormularioTipoCampo(null);\r\n setEsHabilitarMultiSeleccion(0);\r\n setCamposMultiSeleccion([]);\r\n return;\r\n }\r\n\r\n const [EsHabilitarOpciones] = TipoCampoCmb.filter(\r\n (opc) => opc.ClaFormularioTipoCampo === e.target.value\r\n );\r\n\r\n setClaFormularioTipoCampo(e.target.value);\r\n\r\n if (EsHabilitarOpciones.EsHabilitarOpciones === 1) {\r\n setEsHabilitarMultiSeleccion(1);\r\n setCamposMultiSeleccion([{ DescripcionRespuesta: '', PesoRespuesta: 1 }]);\r\n } else {\r\n // setCamposMultiSeleccion([]);\r\n setCamposMultiSeleccion([]);\r\n setEsHabilitarMultiSeleccion(0);\r\n }\r\n };\r\n\r\n const onChangeEncuestaTopico = (props, e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.IdEncuestaTopico;\r\n setErrors(newErrors); \r\n \r\n setIdEncuestaTopico(e.target.value); \r\n }; \r\n\r\n const onDescripcionOpcRespuestaPreguntaChange = (value, item) => {\r\n const copyCamposMultiSeleccion = [...CamposMultiSeleccion];\r\n copyCamposMultiSeleccion[item.RowIndex].DescripcionRespuesta = value;\r\n setCamposMultiSeleccion(copyCamposMultiSeleccion);\r\n };\r\n\r\n const onRemoveRespuestaPreguntaClick = (item) => {\r\n const copyCamposMultiSeleccion = [...CamposMultiSeleccion];\r\n copyCamposMultiSeleccion[item.RowIndex].BajaLogica = 1;\r\n setCamposMultiSeleccion(copyCamposMultiSeleccion);\r\n };\r\n\r\n const AddCampoArregloMultiSeleccion = (item, index) => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onEditorDescripcionChange(e.htmlValue, e.textValue)}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n onTituloPaginaChange(e.target.value)}\r\n autoFocus \r\n maxLength={500}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const bajasurveyManagementPageQuestion = async () => {\r\n const urlWebServiceSave = `${config.UrlApiProject}HR/SaveSurveyPaginaPregunta`;\r\n const paramsService = {\r\n IdEncuestaPaginaPregunta,\r\n IdEncuestaPagina,\r\n IdAccion: 3,\r\n };\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n if (\r\n props.RecargarPaginaPreguntas !== null &&\r\n props.RecargarPaginaPreguntas !== 'undefined' &&\r\n typeof props.RecargarPaginaPreguntas === 'function'\r\n ) {\r\n props.RecargarPaginaPreguntas();\r\n }\r\n setEsEditar(false);\r\n });\r\n };\r\n\r\n const onCopyQuestion = () => {\r\n const urlWebServiceSave = `${config.UrlApiProject}HR/SaveSurveyPaginaPreguntaCopy`;\r\n\r\n const paramsService = {\r\n IdEncuestaPaginaPregunta,\r\n IdEncuestaPagina,\r\n };\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n if (\r\n props.RecargarPaginaPreguntas !== null &&\r\n props.RecargarPaginaPreguntas !== 'undefined' &&\r\n typeof props.RecargarPaginaPreguntas === 'function'\r\n ) {\r\n props.RecargarPaginaPreguntas();\r\n }\r\n setEsEditar(false);\r\n });\r\n };\r\n\r\n const valitationSchemeSave = yup.object().shape({\r\n Descripcion: yup.string().required(t('common:RequiredField')).nullable(),\r\n ClaFormularioTipoCampo: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n IdEncuestaTopico: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n CamposMultiSeleccion: yup.array().of(\r\n yup.object().shape({\r\n DescripcionRespuesta: yup\r\n .string()\r\n .when('BajaLogica', {\r\n is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable(),\r\n }),\r\n PesoRespuesta: yup\r\n .number()\r\n .when('BajaLogica', {\r\n is: 0,\r\n then: yup.number().required(t('common:RequiredField')).integer().nullable(),\r\n otherwise: yup.number().nullable(),\r\n }),\r\n })\r\n ),\r\n });\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n const onChangeObligarotio = (props, e) => {\r\n setEsObligatorio(e.checked ? 1 : 0);\r\n };\r\n\r\n const EditarSurveyQuestion = (\r\n descipcion,\r\n claFormularioTipoCampo,\r\n pIdEncuestaPaginaPregunta,\r\n pEsObligatorio\r\n ) => {\r\n // setDescripcion(descipcion);\r\n // setClaFormularioTipoCampo(claFormularioTipoCampo);\r\n // setEsObligatorio(pEsObligatorio);\r\n // obtenerOpcionesRespuestaPorPregunta(pIdEncuestaPaginaPregunta);\r\n obtenerTipoCampo();\r\n obtenerEncuestaTopico();\r\n obtenerOpcionesRespuestaPorPregunta(props.IdEncuestaPaginaPregunta);\r\n setEsEditar(true);\r\n };\r\n\r\n const onPesoRespuestaChange = (value, item) => {\r\n const copyCamposMultiSeleccion = [...CamposMultiSeleccion];\r\n copyCamposMultiSeleccion[item.RowIndex].PesoRespuesta = value;\r\n setCamposMultiSeleccion(copyCamposMultiSeleccion);\r\n };\r\n\r\n const TipodeCampoPregunta = (pClaFormularioTipoCampo) => {\r\n if (pClaFormularioTipoCampo === 1) {\r\n return (\r\n {t('survey:RemoveQuestion')}
\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 2) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 3) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 4) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 5) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 7) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 8) {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 9) {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 10) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 11) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n if (!EsEditar) {\r\n return (\r\n <>\r\n \r\n
\r\n {Descripcion}
\r\n \r\n
{TipodeCampoPregunta(ClaFormularioTipoCampo)}
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {EsHabilitarMultiSeleccion === 1 ? (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )} \r\n
\r\n \r\n onDescripcionChange(e.target.value)}\r\n autoFocus\r\n maxLength={500}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeTipoCampo(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n {t('survey:QuestionRequired')}\r\n \r\n onChangeObligarotio(props, e)}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n onChangeEncuestaTopico(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n | {t('survey:Description')} | \r\n{t('survey:WeightPoints')} | \r\n\r\n |
|---|---|---|
| \r\n \r\n \r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SurveyManagementQuestionEdit;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Row, Col, Card, CardBody, CardHeader, CardTitle, CardFooter } from 'reactstrap';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../../utils/utils';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport swal from '@sweetalert/with-react';\r\nimport SweatAlertCustomIcon from '../../../../components/SweatAlert/SweatAlertCustomIcon';\r\nimport moment from 'moment';\r\nimport { Badge } from 'primereact/badge';\r\nimport Score from '../../../../components/Cards/Score/Score.jsx';\r\nimport FieldTextArea from '../../../../components/Controls/FieldTextArea.jsx';\r\nimport FieldButton from '../../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport EditorText from 'components/Controls/EditorText/EditorText';\r\nimport { Divider } from 'primereact/divider';\r\nimport SurveyManagementQuestionEdit from './SurveyManagementQuestionEdit';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\n\r\nconst SurveyManagementQuestionLoad = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['survey', 'common']);\r\n const [PageList, setPageList] = useState([]);\r\n const [IdEncuesta, setIdEncuesta] = useState(null);\r\n const [Titulo, setTitulo] = useState(null);\r\n const [Descripcion, setDescripcion] = useState(null);\r\n const [IdEncuestaPagina, setIdEncuestaPagina] = useState(null);\r\n const [EsHabilitarNewSurveyQuestions, setEsHabilitarNewSurveyQuestions] = useState(false);\r\n const [EsHabilitarEditarSurveyQuestions, setEsHabilitarEditarSurveyQuestions] = useState(false);\r\n const [PaginaPreguntaList, setPaginaPreguntaList] = useState([]);\r\n const [RespuestaPregunta, setRespuestaPregunta] = useState(null);\r\n const [IdEncuestaPaginaPregunta, setIdEncuestaPaginaPregunta] = useState(null);\r\n const [arrayRespuesPorPregunta, setarrayRespuesPorPregunta] = useState([]);\r\n const [arrayPreguntasPorPagina, setarrayPreguntasPorPagina] = useState([]);\r\n const [arrayOpcionesPorPregunta, setarrayOpcionesPorPregunta] = useState([]);\r\n const [OpcionesPorPreguntaList, setOpcionesPorPreguntaList] = useState([]);\r\n const [CamposMultiSeleccion, setCamposMultiSeleccion] = useState([]);\r\n const [ForceRefresh, setForceRefresh] = useState(0);\r\n\r\n useEffect(() => {\r\n setIdEncuesta(props.IdEncuesta === undefined ? null : props.IdEncuesta);\r\n setIdEncuestaPagina(props.IdEncuestaPagina === undefined ? null : props.IdEncuestaPagina);\r\n obtenerSurveyPageQuestion(props.IdEncuestaPagina, props.IdEncuesta); \r\n console.log('Carga Preguntas Pagina:', props); \r\n }, [props.IdEncuestaPagina, props.IdEncuesta]);\r\n\r\n const obtenerSurveyPageQuestion = (pIdEncuestaPagina, pIdEncuesta) => {\r\n const GetHRSurveyManagementQuestionForPage = `${config.UrlApiProject}HR/GetHRSurveyManagementQuestionForPage`;\r\n const paramsToService = {\r\n IdEncuesta: pIdEncuesta,\r\n IdEncuestaPagina: pIdEncuestaPagina,\r\n };\r\n callApi(GetHRSurveyManagementQuestionForPage, 'POST', paramsToService, (response) => {\r\n setPaginaPreguntaList(response.data.EncuestaPaginaPregunta);\r\n setOpcionesPorPreguntaList(response.data.EncuestaPaginaPreguntaOpciones); \r\n });\r\n };\r\n\r\n const EditarSurveyQuestion = (element, paramindex) => {\r\n setEsHabilitarEditarSurveyQuestions(true);\r\n const arrayAuxPaginaPreguntaList = [...PaginaPreguntaList];\r\n arrayAuxPaginaPreguntaList.length > 0 ? (arrayAuxPaginaPreguntaList[paramindex].EsEditar = true): [];\r\n setPaginaPreguntaList(arrayAuxPaginaPreguntaList);\r\n MostrarOcultarEditQuestion(arrayAuxPaginaPreguntaList[paramindex].EsEditar);\r\n MostrarOcultarQuestion(arrayAuxPaginaPreguntaList[paramindex].EsEditar);\r\n setCamposMultiSeleccion(OpcionesPorPreguntaList.filter( opc => opc.IdEncuestaPaginaPregunta === arrayAuxPaginaPreguntaList[paramindex].IdEncuestaPaginaPregunta)); \r\n };\r\n\r\n const MostrarOcultarEditQuestion = (e) => {\r\n let styleShow = '';\r\n\r\n return styleShow = e === false ? 'none' : ''; \r\n }\r\n\r\n const MostrarOcultarQuestion = (e) => {\r\n let styleShow = '';\r\n\r\n return styleShow = e === false ? '' : 'none'; \r\n }\r\n\r\n const AddNewSurveyQuestion = () => {\r\n setEsHabilitarNewSurveyQuestions(true);\r\n };\r\n\r\n const OcultarEditarSurveyQuestion = () => {\r\n setEsHabilitarNewSurveyQuestions(false);\r\n props.onSearch();\r\n };\r\n\r\n const OcultarEditarSurveyPageQuestion = () => {\r\n setEsHabilitarEditarSurveyQuestions(false);\r\n setEsHabilitarNewSurveyQuestions(false);\r\n obtenerSurveyPageQuestion(IdEncuestaPagina, IdEncuesta);\r\n };\r\n\r\n const RecargarPaginaPreguntas = () => {\r\n setForceRefresh(ForceRefresh + 1);\r\n setEsHabilitarEditarSurveyQuestions(false);\r\n setEsHabilitarNewSurveyQuestions(false);\r\n obtenerSurveyPageQuestion(IdEncuestaPagina, IdEncuesta);\r\n }\r\n return (\r\n <>\r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {\r\n (Titulo === null || Titulo) === '' && (DescripcionHtml === null || DescripcionHtml === '')\r\n ? (\r\n <>\r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n )\r\n\r\n return (\r\n <>\r\n {t('survey:RemovePageMessage')}.
\r\n \r\n
\r\n \r\n \r\n onChangeCategory(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n ',\r\n shared: true\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'percent'\r\n }\r\n },\r\n series: Series \r\n}\r\n\r\n \r\n const onFechaInicialChange = ( e ) => { \r\n setFechaInicial(e.value);\r\n if(fechaFinal!==null && e.value!==null){ \r\n setInplaceActiveCalendar(false); \r\n GetSurveyInsightsQuestion(IdEncuesta, IdEncuestaPaginaPregunta, e.value, fechaFinal);\r\n }\r\n }; \r\n const onFechaFinalChange = ( e ) => { \r\n setFechaFinal(e.value);\r\n if(fechaInicial!==null && e.value!==null){ \r\n setInplaceActiveCalendar(false); \r\n GetSurveyInsightsQuestion(IdEncuesta, IdEncuestaPaginaPregunta, fechaInicial , e.value); \r\n }\r\n }; \r\n \r\n return (\r\n <> \r\n
\r\n setInplaceActiveCalendar(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n {\r\n // \r\n } \r\n {t('survey:InformationFrom')} \r\n \r\n {moment(fechaInicial).format(\"ll\")}-{moment(fechaFinal).format(\"ll\")} \r\n \r\n \r\n {t('scoreCard:InformationFrom')} \r\n onFechaInicialChange(e)}\r\n />\r\n \r\n onFechaFinalChange(e)}\r\n />\r\n \r\n \r\n
\r\n \r\n {/* \r\n
\r\n */}\r\n \r\n
\r\n setInplaceActiveCalendar(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n {\r\n // \r\n } \r\n {t('survey:InformationFrom')} \r\n \r\n {moment(fechaInicial).format(\"ll\")}-{moment(fechaFinal).format(\"ll\")} \r\n \r\n \r\n {t('scoreCard:InformationFrom')} \r\n onFechaInicialChange(e)}\r\n />\r\n \r\n onFechaFinalChange(e)}\r\n />\r\n \r\n \r\n
\r\n \r\n {/* \r\n
\r\n */}\r\n ',\r\n pointFormat: '{point.name}: {point.y} ({point.percentage:.0f}%)
'\r\n },\r\n \r\n series: [\r\n {\r\n name: \"\",\r\n colorByPoint: true,\r\n data: Series \r\n }\r\n ]\r\n\r\n}\r\n \r\nconst onFechaInicialChange = ( e ) => { \r\n setFechaInicial(e.value);\r\n if(fechaFinal!==null && e.value!==null){ \r\n setInplaceActiveCalendar(false); \r\n GetSurveySummaryQuestion(IdEncuesta, IdEncuestaPaginaPregunta, e.value, fechaFinal);\r\n }\r\n}; \r\nconst onFechaFinalChange = ( e ) => { \r\n setFechaFinal(e.value);\r\n if(fechaInicial!==null && e.value!==null){ \r\n setInplaceActiveCalendar(false); \r\n GetSurveySummaryQuestion(IdEncuesta, IdEncuestaPaginaPregunta, fechaInicial , e.value); \r\n }\r\n}; \r\n\r\n return (\r\n <> \r\n
\r\n setInplaceActiveCalendar(e.value)}\r\n className=\"p-fluid\"\r\n >\r\n \r\n {\r\n // \r\n } \r\n {t('scoreCard:InformationFrom')} \r\n \r\n {moment(fechaInicial).format(\"ll\")}-{moment(fechaFinal).format(\"ll\")} \r\n \r\n \r\n {t('scoreCard:InformationFrom')} \r\n onFechaInicialChange(e)}\r\n />\r\n \r\n onFechaFinalChange(e)}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {element.TituloPagina}\r\n
\r\n \r\n \r\n {element.CurrentPage} | {element.TotalPages}\r\n
\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n \r\n {element.CurrentPage} | {element.TotalPages}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }; \r\n\r\n const onSendCollect = () => {\r\n setEsCollect(true);\r\n setEsCollectTeam(false);\r\n };\r\n const onSendCollectTeam = () => {\r\n setEsCollect(false);\r\n setEsCollectTeam(true);\r\n };\r\n\r\n const onChange = (node) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.Users;\r\n setErrors(newErrors);\r\n\r\n const result = Object.keys(node).map((key) => {\r\n return [Number(key), node[key]];\r\n });\r\n setselectedUserFinal(result);\r\n setselectedUser(node);\r\n };\r\n\r\n \r\n\r\n const valitationSchemeSave = yup.object().shape({\r\n Emails:yup.string().required(t('common:RequiredField')).nullable() \r\n }); \r\n\r\n \r\n const onEmailsChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.Emails;\r\n setErrors(newErrors);\r\n setEmails(value)\r\n }\r\n\r\n const onCopyClipBoard = () => {\r\n console.log('eee');\r\n toast.current.show({severity:'success', summary: '', detail:'Link copied to clipboard.', life: 3000});\r\n }\r\n\r\n\r\n return (\r\n <>\r\n \r\n {t('survey:TitleType1')}\r\n
\r\n \r\n {t('survey:InstructionType1Desc')}\r\n
\r\n \r\n
\r\n {t('survey:InstructionType1Desc2')}: {t('survey:InstructionType1Desc3')}\r\n
\r\n \r\n \r\n {t('survey:TitleType2')}\r\n
\r\n \r\n {t('survey:InstructionType2Desc')}\r\n
\r\n \r\n\r\n \r\n {t('survey:TitleType3')}\r\n
\r\n \r\n {t('survey:InstructionType3Desc')}\r\n
\r\n \r\n \r\n {shareURL} \r\n
\r\n \r\n onEmailsChange(e.value)}\r\n separator=\";\"\r\n className=\"survey-chips\"\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n onChange(e.value)}\r\n expandedKeys={expandedKeys}\r\n className={`${!!(typeof(errors) !== 'undefined' && errors !== null && errors.Users) === true ? 'p-invalid-tree' : ''}`}\r\n /> \r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n
\r\n );\r\n };\r\n\r\n const FechaCreacion = (rowData) => {\r\n return <>{moment(rowData.FechaCreacion).format('MMMM DD, YYYY h:mm:ss a')};\r\n };\r\n\r\n const FechaModificacion = (rowData) => {\r\n return <>{moment(rowData.FechaModificacion).format('MMMM DD, YYYY h:mm:ss a')};\r\n };\r\n\r\n const EditarTemplate = (row) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n obtenerEncuestaList(ClaEncuestaCategoria)}\r\n >\r\n \r\n
\r\n \r\n
\r\n)\r\n }\r\n return (\r\n <>\r\n \r\n {row.Titulo}{' '}\r\n
\r\n \r\n {row.NomResponsable}\r\n
\r\n \r\n {t('survey:Created')} {FechaCreacion(row)}\r\n
\r\n \r\n );\r\n };\r\n\r\n const onClickEditarSurvey = (row) => {\r\n setIdEncuesta(row.IdEncuesta);\r\n setEsMostrarListSurvey(false);\r\n setEsMostrarInsights(false);\r\n };\r\n const onClickEditarSurveyInsights = (row) => {\r\n // setIdEncuesta(row.IdEncuesta);\r\n // setEsMostrarInsights(true);\r\n // setEsMostrarListSurvey(true);\r\n history.push({\r\n pathname: `./SurveyAnalyzeScreen/${ row.IdEncuesta}` \r\n });\r\n };\r\n\r\n const onSearch = () => {\r\n obtenerEncuestaList(null);\r\n setEsMostrarListSurvey(true);\r\n setEsMostrarInsights(false);\r\n };\r\n\r\n const onClickSendEmailSurvey = (row) => {\r\n setIdEncuesta(row.IdEncuesta);\r\n setEsEnviarMail(true);\r\n }; \r\n \r\n const closeModalEnviarMail = () => {\r\n setEsEnviarMail(false);\r\n }; \r\n\r\n \r\n\r\n const BotonesTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const confirmationCopyMessageHTML = (\r\n {t('survey:DeleteSurveyConfirmation')}.
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const confirmationCloseMessageHTML = (\r\n {t('survey:CopySurveyConfirmation')}.
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const confirmationOpenMessageHTML = (\r\n {t('survey:ConfirmCloseSurvey')}.
\r\n \r\n \r\n \r\n
\r\n );\r\n \r\n const confirmationMultipleResponsesSurveyMessageHTML = (\r\n {t('survey:ConfirmOpenSurvey')}.
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const confirmationMultipleResponsesSurveyOffMessageHTML = (\r\n {t('survey:ConfirmMultipleResponsesSurvey')}.
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const ExportExcelSurvey = (pIdEncuesta) => { \r\n const ExportarSurvey = `${config.UrlApiProject}HR/ExportarSurvey`; \r\n const paramsService = {\r\n IdEncuesta: pIdEncuesta\r\n };\r\n callApi(ExportarSurvey, 'POST', paramsService, (response) => {\r\n const linkSource = `data:application/${response.data.FileExtension};base64,${response.data.FileData}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${response.data.FileName}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName }.${ response.data.FileExtension}`;\r\n downloadLink.click();\r\n }); \r\n };\r\n\r\n\r\n if (EsMostrarListSurvey) {\r\n return (\r\n <>\r\n {t('survey:ConfirmMultipleResponsesOffSurvey')}.
\r\n \r\n onChangeCategory(props, e)}\r\n />\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n Tool
\r\n{row.ClaveArticuloTool}
\r\n{row.NomArticuloTool}
\r\n \r\nPart
\r\n{row.ClaveArticuloPart}
\r\n{row.NomArticuloPart}
\r\n \r\nPart
\r\n{row.ClaveArticuloPart}
\r\n{row.NomArticuloPart}
\r\n \r\n{`${toolArticulo.NomArticulo3}`}
\r\n \r\n\r\n
\r\n )\r\n}\r\n\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onClaAnioChange(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('corporate:From')}\r\n onFromMes1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {t('corporate:To')}\r\n onToMes1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n onScenario1Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n onClaAnio2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('corporate:From')}\r\n onFromMes2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {t('corporate:To')}\r\n onToMes2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n onScenario2Change(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n \r\n onChangePlVista(e.value)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeUbicacion(e.value)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onChangeClaAcumProm(value)}\r\n checked={TipoPromedio === 'Avg'}\r\n >\r\n \r\n
\r\n \r\n onChangeClaAcumProm(value)}\r\n checked={TipoPromedio === 'Ac'}\r\n >\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n onChangeTons(value)}\r\n checked={TipoTonleadas === 'Mtons'}\r\n >\r\n \r\n
\r\n \r\n onChangeTons(value)}\r\n checked={TipoTonleadas === 'ShorTons'}\r\n >\r\n \r\n
\r\n \r\n
\r\n \r\n
| {t('survey:DateStarSurvey')}: | \r\n\r\n | {moment(StartedDaySurvey).format('MMMM DD, YYYY h:mm:ss a')} | \r\n
| {t('survey:DateEndSurvey')} : | \r\n\r\n | {moment(EndDaySurvey).format('MMMM DD, YYYY h:mm:ss a') } | \r\n
| {t('survey:TimeSpent')} : | \r\n\r\n | {TiempoInvertido} | \r\n
\r\n {index === 0 ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n {index > 0 &&\r\n element.IdEncuestaPagina !==\r\n (index + 1 === ViewFeedBackResponseList.length\r\n ? ViewFeedBackResponseList[index].IdEncuestaPagina\r\n : ViewFeedBackResponseList[index - 1].IdEncuestaPagina) ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n })}\r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n {element.DescripcionPagina}\r\n
\r\n \r\n
\r\n \r\n \r\n {element.CountPage} | {element.TotalPage}\r\n
\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n {element.DescripcionPagina}\r\n
\r\n \r\n
\r\n \r\n \r\n {element.CountPage} | {element.TotalPage}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n {index + 1}.- \r\n \r\n
\r\n \r\n {element.RespuestaPregunta} \r\n
\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n \r\n {element.CurrentPage} | {element.TotalPages}\r\n
\r\n \r\n \r\n {element.TituloPagina}\r\n
\r\n \r\n \r\n {element.CurrentPage} | {element.TotalPages}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SurveyAnalyzeScreen;\r\n","/* eslint-disable react/forbid-prop-types */\r\n\r\nimport { React, useEffect, useState } from 'react';\r\nimport { callApi } from \"utils/utils\";\r\nimport { config } from 'utils/config';\r\nimport { Row, Col } from 'reactstrap';\r\nimport PropTypes from 'prop-types';\r\nimport * as Tableau from 'tableau-api-js';\r\n\r\nconst Viz = (props) => {\r\n\r\n let viz = null;\r\n\r\n useEffect(() => {\r\n createViz();\r\n }, [])\r\n\r\n const createViz = () => {\r\n // Get the url from props\r\n const { url } = props;\r\n\r\n // Make sure the url is for the Deacero tableau server\r\n if (url.search('https://tableau.deacero.com') === -1) {\r\n throw new Error('URL must be for https://tableau.deacero.com')\r\n }\r\n\r\n // Get the view part of the url\r\n const index = url.search('/views/');\r\n if (index === -1) {\r\n throw new Error('URL is not a valid view URL');\r\n }\r\n const urlEnd = url.substring(index);\r\n\r\n const paramsService = { };\r\n const urlWebService = `${config.UrlApiProject}Tableau/GetTableauTicket`;\r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n // Add in the trusted ticket\r\n const ticketUrl = `https://tableau.deacero.com/trusted/${response.data.ticket}${urlEnd}`;\r\n\r\n // Get the div container\r\n const containerDiv = document.getElementById('vizContainer');\r\n\r\n // Set options\r\n const options = {\r\n width: containerDiv.clientWidth,\r\n height: \"85vh\",\r\n toolbarPosition: Tableau.ToolbarPosition.BOTTOM\r\n };\r\n\r\n if (props.parameters !== null && props.parameters !== undefined) {\r\n Object.assign(options, props.parameters);\r\n }\r\n\r\n // Create the viz\r\n viz = new Tableau.Viz(containerDiv, ticketUrl, options);\r\n });\r\n }\r\n\r\n // Callback to resize the viz with the window\r\n window.addEventListener('resize', resizeViz);\r\n function resizeViz() {\r\n\r\n const vizContainer = document.getElementById('vizContainer');\r\n \r\n let width = \"100vw\";\r\n if (vizContainer !== null && vizContainer !== undefined) {\r\n width = vizContainer.offsetWidth;\r\n }\r\n\r\n const height = \"85vh\";\r\n\r\n if (viz !== null && viz !== undefined) {\r\n viz.setFrameSize(width, height);\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n onAnioChange(e.value)}\r\n optionValue=\"ClaAnio\"\r\n optionLabel=\"NomAnio\"\r\n placeholder={t('common:SelectYear')}\r\n showClear={false}\r\n />\r\n \r\n
\r\n );\r\n };\r\n\r\n const getYears = (ClaAnio) => {\r\n const paramsService = {\r\n MostrarSoloCerrados: 1,\r\n };\r\n\r\n const GetAniosScoreCard = `${config.UrlApiProject}ScoreCard/GetAniosScoreCard`;\r\n\r\n callApi(GetAniosScoreCard, 'Post', paramsService, (response) => {\r\n setOpcionesAnios(response.data.Anios);\r\n getMeses(ClaAnio);\r\n });\r\n };\r\n\r\n const getMeses = (ClaAnio) => {\r\n const paramsService = {\r\n ClaAnio,\r\n MostrarSoloCerrados: 1,\r\n };\r\n\r\n const GetMesesScoreCard = `${config.UrlApiProject}ScoreCard/GetMesesScoreCard`;\r\n\r\n callApi(GetMesesScoreCard, 'Post', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses);\r\n setUltimoClaMesCerrado(getUltimoMesCerrado(response.data.Meses));\r\n\r\n if (ClaMes > getUltimoMesCerrado(response.data.Meses) || ClaMes === 0 || ClaMes === null) {\r\n setClaMes(getUltimoMesCerrado(response.data.Meses));\r\n } else if (response.data.Meses.length > 0) {\r\n if (response.data.Meses[0].ClaMes > ClaMes) {\r\n setClaMes(response.data.Meses[0].ClaMes);\r\n }\r\n }\r\n\r\n if (response.data.Meses.length > 0) {\r\n setPrimerClaMes(response.data.Meses[0].ClaMes);\r\n }\r\n });\r\n };\r\n\r\n const onAnioChange = (value) => {\r\n setClaAnio(value);\r\n getMeses(value);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, value, ClaMes);\r\n };\r\n\r\n const onClaMesChange = (value) => {\r\n setClaMes(value);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, value);\r\n };\r\n\r\n const getUltimoMesCerrado = (meses) => {\r\n let ClaMes = 0;\r\n\r\n for (let index = 0; index < meses.length; index++) {\r\n ClaMes = meses[index].ClaMes;\r\n }\r\n \r\n return ClaMes;\r\n };\r\n\r\n const onNextClaMesChange = (ClaMes) => {\r\n setClaMes(ClaMes + 1);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes + 1);\r\n };\r\n\r\n const onBeforeClaMesChange = (ClaMes) => {\r\n if (ClaMes > PrimerClaMes) {\r\n setClaMes(ClaMes - 1);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes - 1);\r\n }\r\n };\r\n const onChangeMostrarIndividual = (props, e) => {\r\n // setEsMostrarIndividual(e.checked ? 1 : 0);\r\n setEsMostrarIndividual(e.checked);\r\n ParamScoreLlenado(e.checked, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes);\r\n };\r\n const onChangeMostrarTeam = (props, e) => {\r\n // setEsMostrarTeam(e.checked ? 1 : 0);\r\n setEsMostrarTeam(e.checked);\r\n ParamScoreLlenado(EsMostrarIndividual, e.checked, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes);\r\n };\r\n const onChangeMostrarProjectAssesment = (props, e) => {\r\n // setEsMostrarProjectAssesment(e.checked ? 1 : 0);\r\n setEsMostrarProjectAssesment(e.checked);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, e.checked, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes);\r\n };\r\n const onChangeMostrarVerticalMeeting = (props, e) => {\r\n // setEsMostrarVerticalMeeting(e.checked ? 1 : 0);\r\n setEsMostrarVerticalMeeting(e.checked);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, e.checked, EsMostrarTeamMeeting, ClaAnio, ClaMes);\r\n };\r\n const onChangeMostrarTeamMeeting = (props, e) => {\r\n // setEsMostrarTeamMeeting(e.checked ? 1 : 0);\r\n setEsMostrarTeamMeeting(e.checked);\r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, e.checked, ClaAnio, ClaMes);\r\n };\r\n const RefrescarInformacion = () => { \r\n ParamScoreLlenado(EsMostrarIndividual, EsMostrarTeam, EsMostrarProjectAssesment, EsMostrarVerticalMeeting, EsMostrarTeamMeeting, ClaAnio, ClaMes);\r\n }\r\n\r\n const ParamScoreLlenado = (pIndividual, pTeam, pProjectAssesment, pVerticalMeeting, pTeamMeeting, pClaAnio, pClaMes) => {\r\n const filtersData = {}; \r\n const arrayIndicadores = [];\r\n\r\n if (pIndividual) {\r\n arrayIndicadores.push(1); \r\n }\r\n if (pTeam) {\r\n arrayIndicadores.push(2); \r\n }\r\n if (pProjectAssesment) {\r\n arrayIndicadores.push(3); \r\n }\r\n if (pVerticalMeeting) {\r\n arrayIndicadores.push(4); \r\n }\r\n if (pTeamMeeting) {\r\n arrayIndicadores.push(5); \r\n } \r\n\r\n filtersData.Indicadores = arrayIndicadores;\r\n filtersData.ClaAnio = pClaAnio;\r\n filtersData.ClaMes = pClaMes;\r\n\r\n\r\n setfilters(filtersData);\r\n }\r\n\r\n const EsKPIsVisibles = () => {\r\n \r\n if (NivelPuesto === 1 || NivelPuesto === 2 || EsAdmin === 1){\r\n return true;\r\n }\r\n\r\n return false;\r\n } \r\n \r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n {ClaMes === PrimerClaMes ? (\r\n <>\r\n {\r\n onBeforeClaMesChange(ClaMes);\r\n }}\r\n />\r\n \r\n ) : (\r\n <>\r\n {\r\n onBeforeClaMesChange(ClaMes);\r\n }}\r\n />\r\n \r\n )}\r\n {\r\n onNextClaMesChange(ClaMes);\r\n }}\r\n />\r\n \r\n ) : (\r\n <>\r\n {\r\n onNextClaMesChange(ClaMes);\r\n }}\r\n />\r\n \r\n )}\r\n
\r\n \r\n \r\n onClaMesChange(e.value)}\r\n optionValue=\"ClaMes\"\r\n optionLabel=\"NomMes\"\r\n showClear={false}\r\n />\r\n \r\n
\r\n {ClaMes === UltimoClaMesCerrado ? (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default SalesPerformanceDashboard;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport SalesPerformanceDashboard from './SalesPerformanceDashboard';\r\n\r\nconst SalesPerformanceDashboardScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default MonthlyFollowUpDashboard;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport MonthlyFollowUpDashboard from './MonthlyFollowUpDashboard';\r\n\r\nconst MonthlyProgressDashboardScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default YTDProgressDashboard;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport YTDProgressDashboard from './YTDProgressDashboard';\r\n\r\nconst YTDProgressDashboardScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n const onChangePendingSearch = (props, e) => {\r\n setShowOnlyPending(e.checked);\r\n };\r\n\r\n const onClaAgenteSalesManagerComChange = (props, e) => { \r\n setClaAgenteSalesManager(e.value); \r\n };\r\n\r\n const onClaAgenteSalesRepComChange = (props, e) => { \r\n setClaAgenteSalesRep(e.value); \r\n };\r\n\r\n \r\n const onClaDivisionComChange = (props, e) => { \r\n setClaDivision(e.value); \r\n };\r\n\r\n \r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n */}\r\n
\r\n \r\n \r\n onChangePendingSearch(props, e)}\r\n />\r\n
\r\n \r\n \r\n onClaAgenteSalesManagerComChange(props, e)}\r\n showClear={true}\r\n /> \r\n
\r\n \r\n \r\n onClaDivisionComChange(props, e)}\r\n showClear={true}\r\n /> \r\n
\r\n \r\n \r\n onClaAgenteSalesRepComChange(props, e)}\r\n showClear={true}\r\n /> \r\n
\r\n \r\n \r\n onClaAgenteComChange(props, e)}\r\n // errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaAgenteComChange = (props, e) => {\r\n const compensationAgStpListAgenteCom = [...CompensationAgStpList];\r\n const ClaAgente = OpcionesClaAgenteCom.filter((item) => item.ClaAgente === e.value)[0];\r\n if (ClaAgente !== undefined) {\r\n compensationAgStpListAgenteCom[props.rowData.RowIndex].ClaAgenteCom = ClaAgente.ClaAgente;\r\n compensationAgStpListAgenteCom[props.rowData.RowIndex].NomAgenteComercial =\r\n ClaAgente.NomAgente;\r\n compensationAgStpListAgenteCom[props.rowData.RowIndex].Configurado = 1;\r\n }\r\n setCompensationAgStpList(compensationAgStpListAgenteCom);\r\n };\r\n\r\n const ClaAgenteMgrEditor = (props) => {\r\n return (\r\n \r\n onClaAgenteMgrChange(props, e)}\r\n // errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaAgenteMgrChange = (props, e) => {\r\n const compensationAgStpListAgente = [...CompensationAgStpList];\r\n const ClaAgente = OpcionesClaAgenteMgr.filter((item) => item.ClaAgente === e.value)[0];\r\n if (ClaAgente !== undefined) {\r\n compensationAgStpListAgente[props.rowData.RowIndex].ClaAgenteMgr = ClaAgente.ClaAgente;\r\n compensationAgStpListAgente[props.rowData.RowIndex].NomAgenteMgr = ClaAgente.NomAgente;\r\n compensationAgStpListAgente[props.rowData.RowIndex].Configurado = 1;\r\n }\r\n setCompensationAgStpList(compensationAgStpListAgente);\r\n };\r\n\r\n const ClaDivisionEditor = (props) => {\r\n return (\r\n \r\n onClaDivisionChange(props, e)}\r\n // errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaDivisionChange = (props, e) => {\r\n const compensationAgStpListDivision = [...CompensationAgStpList];\r\n const ClaDivision = OpcionesClaDivision.filter((item) => item.ClaDivision === e.value)[0];\r\n if (ClaDivision !== undefined) {\r\n compensationAgStpListDivision[props.rowData.RowIndex].ClaDivision = ClaDivision.ClaDivision;\r\n compensationAgStpListDivision[props.rowData.RowIndex].NomDivision = ClaDivision.NomDivision;\r\n compensationAgStpListDivision[props.rowData.RowIndex].Configurado = 1;\r\n }\r\n setCompensationAgStpList(compensationAgStpListDivision);\r\n };\r\n\r\n const onSaveClick = async () => {\r\n const ListConfigurado = CompensationAgStpList.filter((opc) => opc.Configurado === 1);\r\n\r\n const paramsServiceOwners = {\r\n CompensationAgStpListDTO: ListConfigurado,\r\n };\r\n\r\n const urlWebServiceSaveCompensationAgStp = `${config.UrlApiProject}SalesPerformanceSales/SaveCompensationAgStp`;\r\n\r\n callApi(urlWebServiceSaveCompensationAgStp, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerCompensationAgStp();\r\n });\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n item.RowIndexCount = index + 1;\r\n // item.Configurado = 0;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n return (\r\n <> \r\n \r\n onClaIncentivoChange(props, e)}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n disabled={props.rowData.NewRow === 0}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaIncentivoChange = (props, e) => {\r\n const PlanIncentivoListCopy = [...PlanIncentivoList];\r\n const ClaIncentivo = OpcionesClaIncentivo.filter((item) => item.ClaIncentivo === e.value)[0];\r\n if (ClaIncentivo !== undefined) {\r\n // PlanIncentivoListCopy[props.rowData.RowIndex].ClaIncentivo = ClaIncentivo.ClaIncentivo;\r\n PlanIncentivoListCopy[props.rowData.RowIndex].NomIncentivo = ClaIncentivo.NomIncentivo;\r\n }else{\r\n PlanIncentivoListCopy[props.rowData.RowIndex].NomIncentivo = null;\r\n }\r\n PlanIncentivoListCopy[props.rowData.RowIndex].ClaIncentivo = e.value;\r\n setPlanIncentivoList(PlanIncentivoListCopy);\r\n };\r\n\r\n const ClaTipoPagoEditor = (props) => {\r\n return (\r\n \r\n onClaTipoPagoChange(props, e)}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaTipoPagoChange = (props, e) => {\r\n const PlanIncentivoListCopy = [...PlanIncentivoList];\r\n const ClaTipoPago = OpcionesTipoPago.filter((item) => item.ClaTipoPago === e.value)[0];\r\n if (ClaTipoPago !== undefined) {\r\n PlanIncentivoListCopy[props.rowData.RowIndex].NomTipoPago = ClaTipoPago.NomTipoPago;\r\n }\r\n else { \r\n PlanIncentivoListCopy[props.rowData.RowIndex].NomTipoPago = null;\r\n }\r\n PlanIncentivoListCopy[props.rowData.RowIndex].ClaTipoPago = e.value;\r\n setPlanIncentivoList(PlanIncentivoListCopy);\r\n };\r\n\r\n const renderNumericValue = (value) => {\r\n return (\r\n <>\r\n {value === null\r\n ? ''\r\n : value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\r\n \r\n );\r\n };\r\n\r\n const renderFecha = (value) => {\r\n return (\r\n <>\r\n {value === null\r\n ? ''\r\n : moment(value).format(\"MMMM Do YYYY, HH:mm\") }\r\n \r\n );\r\n };\r\n\r\n const PctPonderadoEditor = (props) => {\r\n return (\r\n \r\n PctPonderadoChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PctPonderadoChange = (props, value) => {\r\n const UpdPlanIncentivoListCopy = [...props.value];\r\n UpdPlanIncentivoListCopy[props.rowIndex][props.field] = value;\r\n\r\n setPlanIncentivoList(UpdPlanIncentivoListCopy);\r\n };\r\n\r\n const PctMinGoalEditor = (props) => {\r\n return (\r\n \r\n PctMinGoalChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PctMinGoalChange = (props, value) => {\r\n const UpdPlanIncentivoListCopy = [...props.value];\r\n UpdPlanIncentivoListCopy[props.rowIndex][props.field] = value;\r\n\r\n setPlanIncentivoList(UpdPlanIncentivoListCopy);\r\n };\r\n\r\n const PctIncentivoMinEditor = (props) => {\r\n return (\r\n \r\n PctIncentivoMinChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PctIncentivoMinChange = (props, value) => {\r\n const UpdPlanIncentivoListCopy = [...props.value];\r\n UpdPlanIncentivoListCopy[props.rowIndex][props.field] = value;\r\n\r\n setPlanIncentivoList(UpdPlanIncentivoListCopy);\r\n };\r\n\r\n const PctMaxGoalEditor = (props) => {\r\n return (\r\n \r\n PctMaxGoalChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PctMaxGoalChange = (props, value) => {\r\n const UpdPlanIncentivoListCopy = [...props.value];\r\n UpdPlanIncentivoListCopy[props.rowIndex][props.field] = value;\r\n\r\n setPlanIncentivoList(UpdPlanIncentivoListCopy);\r\n };\r\n\r\n const PctIncentivoMaxEditor = (props) => {\r\n return (\r\n \r\n PctIncentivoMaxChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors[`PlanIncentivoList[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const PctIncentivoMaxChange = (props, value) => {\r\n const UpdPlanIncentivoListCopy = [...props.value];\r\n UpdPlanIncentivoListCopy[props.rowIndex][props.field] = value;\r\n\r\n setPlanIncentivoList(UpdPlanIncentivoListCopy);\r\n };\r\n\r\n const onClaAgenteChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaAgente;\r\n delete newErrors.ClaColaborador;\r\n setErrors(newErrors);\r\n setClaAgente(value);\r\n GetAgenteById_Sel(value);\r\n };\r\n\r\n const onChangeClaUsuarioClaColaborador = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaColaborador;\r\n setErrors(newErrors);\r\n setClaColaborador(e.value);\r\n };\r\n\r\n const filterResponsible = (event) => {\r\n let valor = '';\r\n if (ClaColaborador !== null && ClaColaborador !== '' && event.query === '') {\r\n valor = ClaColaborador.NomColaborador;\r\n } else {\r\n valor = event.query;\r\n }\r\n const paramsServiceOwners = {};\r\n // event.query\r\n const urlWebServiceOwners = `${config.UrlApiProject}ScoreCard/GetColaboradorProyectosCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=0`;\r\n\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => {\r\n setfilteredResponsible(response.data[0]);\r\n });\r\n };\r\n\r\n const onClaTipoAgenteChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaTipoAgente;\r\n setErrors(newErrors);\r\n setClaTipoAgente(value);\r\n };\r\n\r\n const onPctIncentivoChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.PctIncentivo;\r\n setErrors(newErrors);\r\n setPctIncentivo(value);\r\n };\r\n\r\n const onAnnualSPITargetIncentiveChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.AnnualSPITargetIncentive;\r\n setErrors(newErrors);\r\n setAnnualSPITargetIncentive(value);\r\n };\r\n\r\n \r\n\r\n const onChangeFechaInicio = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.FechaInicio;\r\n setErrors(newErrors);\r\n setFechaInicio(value);\r\n };\r\n\r\n const ComentarioChange = (value) => {\r\n setComentario(value);\r\n };\r\n\r\n const onChangeFechaBaja = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.FechaBaja;\r\n setErrors(newErrors);\r\n setFechaBaja(value);\r\n };\r\n\r\n const ComentarioBajaChange = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ComentarioBaja;\r\n setErrors(newErrors);\r\n setComentarioBaja(value);\r\n };\r\n\r\n const onClaAnioChange = (e) => { \r\n const newErrors = { ...errors };\r\n delete newErrors.ClaAnio;\r\n setErrors(newErrors);\r\n setClaAnio(e.value);\r\n };\r\n \r\n\r\n const header = (\r\n <>\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const onHideAP = () => {\r\n document.body.classList.remove('bodynotscroll');\r\n\r\n if (onCloseClick !== null && typeof onCloseClick === 'function') {\r\n onCloseClick();\r\n }\r\n };\r\n\r\n const fieldsRequired = (rowData, props) => {\r\n return (\r\n <>\r\n {errors[`PlanIncentivoList[${props.rowData.RowIndex}]`] != null ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n };\r\n\r\n const actionBodyTemplatePlanIncentivo = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n onClaAnioChange(e)}\r\n showClear={false}\r\n disabled={true}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onClaAgenteChange(e.value)}\r\n disabled={ClaUsuario !== null}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onClaTipoAgenteChange(e.value)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onPctIncentivoChange(e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n label={t('salesPerformanceSales:IncentivePct')}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onAnnualSPITargetIncentiveChange(e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n label={t('salesPerformanceSales:AnnualSPITargetIncentive')}\r\n mode=\"decimal\"\r\n locale=\"en-US\"\r\n minFractionDigits={2}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeFechaInicio(e.target.value)}\r\n label={t('salesPerformanceSales:StartingDate')}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n ComentarioChange(e.target.value)}\r\n label={t('salesPerformanceSales:Observation')}\r\n />\r\n
\r\n \r\n \r\n onChangeFechaBaja(e.target.value)}\r\n label={t('salesPerformanceSales:StopDate')}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n ComentarioBajaChange(e.target.value)}\r\n label={t('salesPerformanceSales:StopReason')}\r\n />\r\n
\r\n \r\n \r\n {t('common:Open')}\r\n
\r\n \r\n ); \r\n }\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const onConfirmaCierre = (rowData) => {\r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n ClosedMonthStatus(rowData);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const confirmationMessageHTML = (\r\n \r\n
\r\n ) \r\n\r\n const ClosedMonthStatus = async (rowData) => {\r\n \r\n const urlWebServiceSave = `${config.UrlApiProject}SalesPerformanceSales/ClosedMonthStatus`;\r\n const paramsService = {\r\n FechaCierre: rowData.AnioMes,\r\n ClaAgenteVentas: 5 // Se solicito que se mandara 5 por DAFAULT. \"ServByAgen\"\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success'); \r\n GetIncentiveProgramCompensationMonthStatus(ClaAnio);\r\n // if (props.onChange !== null && props.onChange !== 'undefined' && typeof(props.onChange) === 'function'){\r\n // props.onChange();\r\n // }\r\n });\r\n }\r\n\r\n\r\n return (\r\n <>\r\n {t('salesPerformance:MonthCloseConfirmation')}.
\r\n \r\n onChangeAnio(e)}\r\n />\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst onChangeMonthStatus = () => {\r\n setEsVerMonthStatus(true); \r\n};\r\n\r\nconst onHideMonthStatus = () => {\r\n setEsVerMonthStatus(false); \r\n};\r\n\r\nconst onChangeOnlyInactives = (props, e) => {\r\n setShowOnlyInactives(e.checked);\r\n};\r\n\r\nconst onClaAnioChange = (props, e) => {\r\n setClaAnio(e.value);\r\n};\r\n\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n */}\r\n
\r\n \r\n
\r\n \r\n \r\n onClaAnioChange(props, e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n onChangeOnlyInactives(props, e)}\r\n />\r\n \r\n
\r\n \r\n \r\n onClaAgenteAgChange(props, e)}\r\n // errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaAgenteAgChange = (props, e) => {\r\n const CompensationAgListCopy = [...CompensationAgList];\r\n const ClaAgente = OpcionesClaAgenteAg.filter((item) => item.ClaAgente === e.value)[0];\r\n if (ClaAgente !== undefined) {\r\n CompensationAgListCopy[props.rowData.RowIndex].ClaAgente = ClaAgente.ClaAgente;\r\n CompensationAgListCopy[props.rowData.RowIndex].SalesPerson = ClaAgente.NomAgente;\r\n }\r\n setCompensationAgList(CompensationAgListCopy);\r\n };\r\n\r\n const ClaTipoAgenteEditor = (props) => {\r\n return (\r\n \r\n onClaTipoAgenteChange(props, e)}\r\n // errors={errors[`FaseProyectoEntregables[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClaTipoAgenteChange = (props, e) => {\r\n const CompensationAgListCopy = [...CompensationAgList];\r\n const ClaTipoAgente = OpcionesTipoAgente.filter((item) => item.ClaTipoAgente === e.value)[0];\r\n if (ClaTipoAgente !== undefined) {\r\n CompensationAgListCopy[props.rowData.RowIndex].ClaTipoAgente = ClaTipoAgente.ClaTipoAgente;\r\n CompensationAgListCopy[props.rowData.RowIndex].NomTipoAgente = ClaTipoAgente.NomTipoAgente;\r\n }\r\n setCompensationAgList(CompensationAgListCopy);\r\n };\r\n\r\n const PctIncentivoEditor = (props) => {\r\n return (\r\n \r\n PctIncentivoChange(props, e.target.value)}\r\n // errors={errors[`KPIManagementList[${props.rowIndex}]`]}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n />\r\n
\r\n );\r\n };\r\n const PctIncentivoChange = (props, value) => {\r\n const UpdCompensationAgListCopy = [...props.value];\r\n UpdCompensationAgListCopy[props.rowIndex][props.field] = value;\r\n\r\n setCompensationAgList(UpdCompensationAgListCopy);\r\n };\r\n\r\n const FechaInicioEditor = (props) => {\r\n return (\r\n \r\n onChangeFechaInicio(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onChangeFechaInicio = (props, e) => {\r\n const CompensationAgListCopy = [...CompensationAgList];\r\n CompensationAgListCopy[props.rowData.RowIndex].FechaInicio = e.target.value;\r\n setCompensationAgList(CompensationAgListCopy);\r\n };\r\n\r\n const FechaBajaEditor = (props) => {\r\n return (\r\n \r\n onChangeFechaBaja(props, e)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onChangeFechaBaja = (props, e) => {\r\n const CompensationAgListCopy = [...CompensationAgList];\r\n CompensationAgListCopy[props.rowData.RowIndex].FechaBaja = e.target.value;\r\n setCompensationAgList(CompensationAgListCopy);\r\n };\r\n\r\n const ComentarioEditor = (props) => {\r\n return (\r\n \r\n ComentarioChange(props, e.target.value)}\r\n // errors={errors}\r\n /> \r\n
\r\n );\r\n };\r\n\r\n const ComentarioChange = (props, value) => { \r\n const UpdCompensationAgListCopy = [...props.value];\r\n UpdCompensationAgListCopy[props.rowIndex][props.field] = value;\r\n\r\n setCompensationAgList(UpdCompensationAgListCopy);\r\n }\r\n\r\n const ComentarioBajaEditor = (props) => {\r\n return (\r\n \r\n ComentarioBajaChange(props, e.target.value)}\r\n // errors={errors}\r\n /> \r\n
\r\n );\r\n };\r\n\r\n const ComentarioBajaChange = (props, value) => { \r\n const UpdCompensationAgListCopy = [...props.value];\r\n UpdCompensationAgListCopy[props.rowIndex][props.field] = value;\r\n\r\n setCompensationAgList(UpdCompensationAgListCopy);\r\n }\r\n const onSaveClick = async () => {\r\n const ListConfigurado = CompensationAgList.filter((opc) => opc.Configurado === 1);\r\n\r\n const paramsServiceOwners = {\r\n CompensationAgStpListDTO: ListConfigurado,\r\n };\r\n\r\n const urlWebServiceSaveCompensationAgStp = `${config.UrlApiProject}SalesPerformanceSales/SaveCompensationAgStp`;\r\n\r\n callApi(urlWebServiceSaveCompensationAgStp, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n obtenerCompensationAgStp();\r\n });\r\n };\r\n\r\n const renderNumericValue = (value) => {\r\n return (\r\n <>\r\n {value === null\r\n ? ''\r\n : value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\r\n \r\n );\r\n };\r\n const FechaInicioTemplate = (rowData) => {\r\n return (\r\n <>{rowData.FechaInicio !== null ? moment(rowData.FechaInicio).format('MM/DD/YYYY') : null}\r\n );\r\n };\r\n\r\n const FechaBajaTemplate = (rowData) => {\r\n return (\r\n <>{rowData.FechaBaja !== null ? moment(rowData.FechaBaja).format('MM/DD/YYYY') : null}\r\n );\r\n };\r\n\r\n const EditarTemplate = (row) => {\r\n return (\r\n <>\r\n \r\n onClaDivisionChange(props,e)}\r\n errors={errors[`IncentiveGoals[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n\r\n const NomDivisionTemplate = (props) => {\r\n return (\r\n <> \r\n {props.NomDivision}
\r\n \r\n );\r\n };\r\n \r\n const onClaGrupoEstadistico3Change = (props, e ) => {\r\n const updateRow = [...IncentiveGoals];\r\n const grupoEstadistico3 = OpcionesGrupoEstadistico3.filter(item => item.ClaGrupoEstadistico3 ===e.value)[0];\r\n updateRow[props.rowData.RowIndex].NomGrupoEstadistico3 = null;\r\n updateRow[props.rowData.RowIndex].ClaSegmento = null;\r\n updateRow[props.rowData.RowIndex].NomSegmento = null;\r\n if(grupoEstadistico3!==undefined){\r\n updateRow[props.rowData.RowIndex].NomGrupoEstadistico3 = grupoEstadistico3.NomGrupoEstadistico3;\r\n updateRow[props.rowData.RowIndex].ClaSegmento = grupoEstadistico3.ClaSegmento;\r\n updateRow[props.rowData.RowIndex].NomSegmento = grupoEstadistico3.NomSegmento;\r\n }\r\n updateRow[props.rowData.RowIndex].ClaGrupoEstadistico3 = e.value; \r\n updateRow[props.rowData.RowIndex].IsRowEdited = true; \r\n setIncentiveGoals(updateRow);\r\n };\r\n\r\n const ClaGrupoEstadistico3Editor = ( props ) => {\r\n if (IsReadOnly === true){ \r\n return NomGrupoEstadistico3Template(props.rowData);\r\n }\r\n\r\n return (\r\n \r\n onClaGrupoEstadistico3Change(props,e)}\r\n errors={errors[`IncentiveGoals[${props.rowData.RowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n\r\n const NomGrupoEstadistico3Template = (props) => {\r\n return (\r\n <> \r\n {props.NomGrupoEstadistico3}
\r\n \r\n );\r\n };\r\n\r\n const NomSegmentoTemplate = (props) => {\r\n return (\r\n <> \r\n {props.NomSegmento}
\r\n \r\n );\r\n };\r\n\r\n const onNumberChange = (props, value) => {\r\n const updatedRow = [...IncentiveGoals];\r\n updatedRow[props.rowData.RowIndex][props.field] = value;\r\n updatedRow[props.rowData.RowIndex].IsRowEdited = true; \r\n setIncentiveGoals(updatedRow);\r\n };\r\n\r\n const NumberEditor = (columnName, props) => {\r\n if (IsReadOnly === true){ \r\n return NumberTemplate(columnName, props.rowData);\r\n }\r\n\r\n return (\r\n \r\n onNumberChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n maxFractionDigits={2}\r\n />\r\n
\r\n );\r\n }; \r\n\r\n const NumberTemplate = (columnName, props) => { \r\n return {props[columnName] !== null && props[columnName] !== undefined ? Highcharts.numberFormat(props[columnName], 2, '.', ',') : null}
;\r\n }; \r\n\r\n const fieldRequiredFlag = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`IncentiveGoals[${props.rowData.RowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n }\r\n\r\n const valitationScheme = yup.object().shape({ \r\n IncentiveGoals: yup.array().of(\r\n yup.object().shape({\r\n\r\n ClaDivision: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }),\r\n \r\n ClaGrupoEstadistico3: yup.string().when('BajaLogica', {is: 0,\r\n then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n otherwise: yup.string().nullable()\r\n }) \r\n })) \r\n });\r\n\r\n const onSaveClick = async () => {\r\n setErrors({}); \r\n\r\n const value = { \r\n IncentiveGoals \r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n \r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n\r\n \r\n const incentiveGoalsModified = [];\r\n let row ={};\r\n\r\n for (let index = 0; index < IncentiveGoals.length; index++) {\r\n\r\n if (IncentiveGoals[index].IsRowEdited){ \r\n row = {\r\n ClaAnio: props.ClaAnio,\r\n ClaAgenteVentas: props.ClaAgenteVentas,\r\n ...IncentiveGoals[index]\r\n };\r\n incentiveGoalsModified.push(row); \r\n }\r\n }\r\n \r\n console.log('modified Rows:', incentiveGoalsModified);\r\n /* mandamos la informacion de los renglones que se modificaron para guardar la informacion */\r\n const paramsServiceOwners = {\r\n SpreadGoalByAgentList: incentiveGoalsModified,\r\n };\r\n \r\n const SaveIncentiveGoalsSalesRep = `${config.UrlApiProject}SalesPerformanceSales/SaveIncentiveGoalsSalesRep`;\r\n \r\n callApi(SaveIncentiveGoalsSalesRep, 'POST', paramsServiceOwners, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n // mandamos refrescar la informacion del grid....\r\n obtieneIncentiveSalesRepInfo(); \r\n });\r\n\r\n }\r\n \r\n return (\r\n <>\r\n {t('salesPerformance:SalesRepGoals')} {SalesRepInfo.ClaAnio}
\r\n \r\n\r\n {t('salesPerformance:IncentiveProgramGoalsInstructions')}.\r\n
\r\n\r\n setClaAnio(e.value === undefined ? null : e.value)} \r\n /> \r\n
\r\n \r\n \r\n setClaAgenteVentas(e.value === undefined ? null : e.value)} \r\n /> \r\n
\r\n \r\n {t('pod:ManualFixPODInstructionsWarning')}
\r\n \r\n ): docType === FixPODType.Upload ? (\r\n <>\r\n {t('pod:FixUploadPODInstructionsWarning')}
\r\n \r\n ): <>}\r\n \r\n {t('pod:FixPODInstructions1')}\r\n \r\n - {t('pod:FixPODInstructions2')}
\r\n - {t('pod:FixPODInstructions3')}\r\n
\r\n - {t('pod:FixPODInstructions3a')}
\r\n
\r\n \r\n - {t('pod:FixPODInstructions5')}
\r\n
\r\n
\r\n - \r\n
- {t('pod:FixPODInstructions3a')} \r\n
\r\n {t('pod:DataWeExtracted')}\r\n
\r\n \r\n {t('pod:SelectPageToView')}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {detectionType === 2 && tipoPOD === 2? // Manually enter Deacero invoice numbers\r\n (\r\n \r\n \r\n
\r\n ) : <>}\r\n {detectionType === 2 && tipoPOD === 1? // Manually enter MCSW numbers\r\n (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n ) : <>}\r\n \r\n \r\n {t('pod:PODsIdentifiedTable')}\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n setShowFixPODs(true)}\r\n className='p-button-secondary mr-2'\r\n icon='pi pi-pencil'\r\n />\r\n setShowEnterPOD(true)}\r\n className='p-button-success mr-2'\r\n icon='pi pi-upload'\r\n />\r\n refreshPODs()}\r\n className='p-button'\r\n icon='pi pi-search'\r\n />\r\n
\r\n | {t('pod:LastProcessedPOD')} | \r\n
|---|
| {t('pod:Company')}: {lastPODProcessed.NombreEmpresa} | \r\n
| {t('pod:Invoice')}: {lastPODProcessed.NumFactura} | \r\n
| {t('pod:ProcessedDate')}: {formatDate(lastPODProcessed.FechaUltimaMod)} | \r\n
{t('pod:LastProcessedPOD')}
\r\n {lastPODProcessed.NombreEmpresa}\r\n {t('pod:Invoice')}: {lastPODProcessed.NumFactura}\r\n {t('pod:ProcessedDate')}: {formatDate(lastPODProcessed.FechaUltimaMod)} */}\r\n \r\n
',\r\n pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: emailSeries\r\n }\r\n\r\n // Deacero Chart\r\n const deaceroChartOptions = {\r\n chart: {\r\n type: 'column',\r\n height: '50%'\r\n },\r\n title: {\r\n text: t('pod:CxPInvoicesProcessed'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text:`${monthNames[d.getMonth()]} ${d.getFullYear() - 1} to ${monthNames[d.getMonth()]} ${d.getFullYear()}` \r\n },\r\n xAxis: {\r\n categories: showDeaByMonth === true ? deaceroMonthTypes : deaceroTypes\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('pod:InvoicesProcessed')\r\n },\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: ( // theme\r\n Highcharts.defaultOptions.title.style &&\r\n Highcharts.defaultOptions.title.style.color\r\n ) || 'gray',\r\n textOutline: 'none'\r\n }\r\n }\r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: showDeaByMonth === true ? deaceroMonthSeries : deaceroSeries\r\n }\r\n\r\n // DST Chart\r\n const dstChartOptions = {\r\n chart: {\r\n type: 'column',\r\n height: '50%'\r\n },\r\n title: {\r\n text: t('pod:DSTPODsProcessed'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text:`${monthNames[d.getMonth()]} ${d.getFullYear() - 1} to ${monthNames[d.getMonth()]} ${d.getFullYear()}` \r\n },\r\n xAxis: {\r\n categories: showDSTByMonth === true ? dstMonthTypes : dstTypes\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('pod:PODsProcessed')\r\n },\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: ( // theme\r\n Highcharts.defaultOptions.title.style &&\r\n Highcharts.defaultOptions.title.style.color\r\n ) || 'gray',\r\n textOutline: 'none'\r\n }\r\n }\r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: showDSTByMonth === true ? dstMonthSeries : dstSeries\r\n }\r\n\r\n // MCN Chart\r\n const mcnChartOptions = {\r\n chart: {\r\n type: 'column',\r\n height: '50%'\r\n },\r\n title: {\r\n text: t('pod:MCSWInvoicesProcessed'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text:`${monthNames[d.getMonth()]} ${d.getFullYear() - 1} to ${monthNames[d.getMonth()]} ${d.getFullYear()}` \r\n },\r\n xAxis: {\r\n categories: showMCSWByMoth === true ? mcnMonthTypes : mcnTypes\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('pod:InvoicesProcessed')\r\n },\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: ( // theme\r\n Highcharts.defaultOptions.title.style &&\r\n Highcharts.defaultOptions.title.style.color\r\n ) || 'gray',\r\n textOutline: 'none'\r\n }\r\n }\r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: showMCSWByMoth === true ? mcnMonthSeries : mcnSeries\r\n }\r\n \r\n // Company Chart\r\n const companyChartOptions = {\r\n chart: {\r\n type: 'column'\r\n },\r\n title: {\r\n text: t('pod:PODsIdentifiedByCompany'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text:`January ${d.getFullYear()} to ${monthNames[d.getMonth()]} ${d.getFullYear()}` \r\n },\r\n xAxis: {\r\n categories: companyMonths\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('pod:PODsIdentified')\r\n },\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: ( // theme\r\n Highcharts.defaultOptions.title.style &&\r\n Highcharts.defaultOptions.title.style.color\r\n ) || 'gray',\r\n textOutline: 'none'\r\n }\r\n }\r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n series: companySeries\r\n }\r\n\r\n const headerTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('pod:DocumentStatistics')}\r\n \r\n
\r\n \r\n
\r\n \r\n {t('pod:NoPODsFoundUseManualSearch')}\r\n
\r\n ) : <>}\r\n \r\n setShowStats(true)} icon=\"pi pi-chart-bar\" className=\"p-button-success\" />\r\n
\r\n \r\n )\r\n\r\n return (\r\n <>\r\n \r\n {sJerarquia} \r\n {\r\n ClaFolder>0 ? (\r\n <>\r\n {t('dms:SimboloMayorQue')}{t('common:EDIT')}\r\n \r\n ):(\r\n <>\r\n {t('dms:SimboloMayorQue')}{t('common:NEW')}\r\n \r\n )\r\n }\r\n
\r\n \r\n );\r\n}\r\n\r\n const renderFooter = () => {\r\n return (\r\n <> \r\n\r\n {/*
\r\n \r\n );\r\n}\r\n\r\n return (\r\n <> \r\n \r\n \r\n ); \r\n};\r\n\r\nexport default FolderDetail;\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { config } from '../../../utils/config';\r\nimport { callApi,showSweetAlert } from '../../../utils/utils'; \r\nimport React, { useState, useEffect, useRef } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Row, Col} from 'reactstrap';\r\nimport { Button } from 'primereact/button'; \r\nimport { confirmDialog } from 'primereact/confirmdialog'; \r\nimport { TreeList, Scrolling, Paging, Pager, Column, Selection, Format } from 'devextreme-react/tree-list';\r\nimport moment from 'moment'; \r\nimport SweatAlertCustomIcon from '../../../components/SweatAlert/SweatAlertCustomIcon'\r\nimport swal from '@sweetalert/with-react';\r\n\r\nconst FolderList =(props) => { \r\n const { t } = useTranslation(['dms', 'common']); \r\n const [FolderList, setFolderList] = useState([]); \r\n const expandedRowKeys = [0];\r\n\r\n useEffect(() => { \r\n getList(0);\r\n}, [props.refresh]);\r\n\r\n const getList = (pClaFolderPadre) => { \r\n const paramsFilter = {}; \r\n const GetProductoFolderList = `${config.UrlApiProject}DMS/GetProductoFolderList?ClaFolderPadre=${pClaFolderPadre}&Language=\"\"`; \r\n callApi(GetProductoFolderList, 'GET', paramsFilter, (response) => { \r\n setFolderList(response.data.FolderList);\r\n });\r\n }\r\n\r\n const onSearch = () => {\r\n getList(0);\r\n };\r\n\r\n const onAddFolder = () => {\r\n console.log('onAddFolder',);\r\n if (props.onAfterSelect != null){ \r\n const data = {ClaFolder:0}\r\n props.onAfterSelect(data);\r\n }\r\n };\r\n\r\n const onAdd = (row) => {\r\n console.log('onAdd',row);\r\n if (props.onAfterSelect != null){ \r\n row.data.EsNuevo = true;\r\n props.onAfterSelect(row.data);\r\n }\r\n };\r\n\r\n const onEdit = (row) => {\r\n console.log('onEdit',row);\r\n if (props.onAfterSelect != null){ \r\n props.onAfterSelect(row.data);\r\n }\r\n };\r\n\r\n const confirmarEliminar = (ClaFolder) => {\r\n const urlWebServiceSave = `${config.UrlApiProject}DMS/PostCatFolderInactive`;\r\n const paramsService = {\r\n ClaFolder\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Exito'), t('common:SaveSuccess'), 'success');\r\n getList(0);\r\n }); \r\n }\r\n\r\n \r\nconst onConfirmarEliminar = (Obj) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: \"Cancel\",\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: \"Continue\",\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n // run function\r\n confirmarEliminar(Obj.data.ClaFolder);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n\r\n}\r\n\r\nconst confirmationMessageHTML = (\r\n \r\n
\r\n )\r\n\r\n const ShowButtons = (row) => { \r\n return (\r\n <> \r\n {t('dms:MessageDeleteFileConfirmation')}
\r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const FechaUltimaModTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaUltimaMod !== null\r\n ? moment(rowData.FechaUltimaMod).format('MM/DD/YYYY')\r\n : null}\r\n \r\n );\r\n }; \r\n\r\n const LibraryColumn = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n {t('dms:MessageConfirm')}\r\n
\r\n {t('dms:Library')}
\r\n \r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {EsHabilitarMultiSeleccion === 1 ? (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n onNomLibraryAttributeChange(e.target.value)}\r\n autoFocus\r\n maxLength={500}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeTipoCampo(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n {t('dms:AttributeRequired')}\r\n \r\n onChangeObligarotio(props, e)}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {onOrderChange(e.target.value)}}\r\n errors={errors}\r\n />\r\n
\r\n \r\n | {t('dms:Description')} | \r\n{t('dms:Order')} | \r\n\r\n |
|---|---|---|
| \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default LibraryEditAttribute;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from '../../../layouts/PageContent';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { config } from '../../../utils/config';\r\nimport { Row, Col, Card, CardHeader, CardBody, Tooltip } from 'reactstrap';\r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Panel } from 'primereact/panel';\r\nimport { Column } from 'primereact/column';\r\nimport swal from '@sweetalert/with-react';\r\nimport { Avatar } from 'primereact/avatar';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\nimport { SplitButton } from 'primereact/splitbutton';\r\nimport { ProgressBar } from 'primereact/progressbar';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../utils/utils';\r\nimport FieldCalendar from '../../../components/Controls/FieldCalendar.jsx';\r\nimport FieldDropdown from '../../../components/Controls/FieldDropdown.jsx';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport FieldTextArea from '../../../components/Controls/FieldTextArea.jsx';\r\nimport FieldText from '../../../components/Controls/FieldText.jsx';\r\nimport FieldSelectButton from '../../../components/Controls/FieldSelectButton.jsx';\r\nimport SweatAlertCustomIcon from '../../../components/SweatAlert/SweatAlertCustomIcon';\r\nimport moment from 'moment';\r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport { Divider } from 'primereact/divider';\r\nimport { Tree } from 'primereact/tree';\r\nimport TreeviewButton from 'components/Controls/TreeViewButton/TreeviewButton';\r\nimport FieldAutoComplete from 'components/Controls/FieldAutoComplete';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { Button } from 'primereact/button';\r\nimport LibraryEditAttribute from './LibraryEditAttribute';\r\n\r\nconst LibraryAddNew = (props) => {\r\n const { t } = useTranslation(['dms', 'common']);\r\n const [errors, setErrors] = useState({});\r\n const [NomLibrary, setNomLibrary] = useState(null);\r\n const [NomLibraryDescripcion, setNomLibraryDescripcion] = useState(null);\r\n const [Descripcion, setDescripcion] = useState(null);\r\n const [ClaFormularioTipoCampo, setClaFormularioTipoCampo] = useState(null);\r\n const [TipoCampoCmb, setTipoCampoCmb] = useState([]);\r\n const [EsHabilitarMultiSeleccion, setEsHabilitarMultiSeleccion] = useState(0);\r\n const [CamposMultiSeleccion, setCamposMultiSeleccion] = useState([]);\r\n const [CamposMultiSeleccionParam, setCamposMultiSeleccionParam] = useState([]);\r\n const [EsObligatorio, setEsObligatorio] = useState(false);\r\n const [AttributeMultiSeleccion, setAttributeMultiSeleccion] = useState([]);\r\n const [NomFormularioTipoCampo, setNomFormularioTipoCampo] = useState(null);\r\n const [nodes, setNodes] = useState([]);\r\n const [selectedUser, setselectedUser] = useState(null);\r\n const [selectedUserFinal, setselectedUserFinal] = useState([]);\r\n const [expandedKeys, setExpandedKeys] = useState({});\r\n const [selectedFolder, setselectedFolder] = useState(null);\r\n const [CamposMultiSeleccionById, setCamposMultiSeleccionById] = useState([]);\r\n const [EsEditarOpciones, setEsEditarOpciones] = useState(false);\r\n const [itemAtributoEditar, setitemAtributoEditar] = useState({});\r\n const [filteredResponsibleParticipants, setfilteredResponsibleParticipants] = useState([]);\r\n const [ClaUsuario, setClaUsuario] = useState(null);\r\n const [EsMostrarSoloUsuarioMSW, setEsMostrarSoloUsuarioMSW] = useState(false);\r\n const [UsuarioRoles, setUsuarioRoles] = useState([]);\r\n const [ClaFolder, setClaFolder] = useState([]);\r\n const [ClaLibrary, setClaLibrary] = useState(null);\r\n const [EsEditar, setEsEditar] = useState(false);\r\n const [ClaColaborador, setClaColaborador] = useState({});\r\n\r\n useEffect(() => {\r\n obtenerTipoCampo();\r\n obtenerOrganizationalDataByUser();\r\n setselectedUser([]);\r\n loadLibraryList(props.ClaLibrary);\r\n // GetLibraryAttribute(props.ClaLibrary);\r\n // GetLibraryRole(props.ClaLibrary);\r\n setClaLibrary(props.ClaLibrary === undefined ? null : props.ClaLibrary);\r\n setEsEditar(props.EsEditar === undefined ? false : props.EsEditar);\r\n }, [props.Filters, props.EsEditar, props.ClaLibrary]);\r\n\r\n const loadLibraryList = (pClaLibrary) => {\r\n const GetTeamPerformanceDevelopmentInfo = `${config.UrlApiProject}DMS/GetLibraryById`;\r\n const paramsToService = {\r\n ClaLibrary: pClaLibrary \r\n };\r\n\r\n callApi(GetTeamPerformanceDevelopmentInfo, 'POST', paramsToService, (response) => {\r\n const library = response.data.Library.length > 0 ? response.data.Library[0] : {};\r\n setNomLibrary(library.NomLibrary);\r\n setNomLibraryDescripcion(library.NomLibraryDescripcion);\r\n setselectedFolder(library.ClaFolder);\r\n setClaFolder(library.ClaFolder); \r\n setAttributeMultiSeleccion(response.data.LibraryAttributes);\r\n bindAttributeOpciones(response.data.LibraryAttributesOptions, response.data.LibraryAttributes);\r\n bindUsuarioRoles(response.data.LibraryRoles);\r\n\r\n });\r\n };\r\n\r\n const GetLibraryAttribute = (pClaLibrary) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttribute?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n setAttributeMultiSeleccion(response.data.ListAttibute);\r\n GetLibraryAttributeOpciones(pClaLibrary, response.data.ListAttibute);\r\n console.log(response.data.ListAttibute);\r\n });\r\n };\r\n const GetLibraryAttributeOpciones = (pClaLibrary, pListAttribute) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttributeOpciones?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n bindAttributeOpciones(response.data.ListOpciones, pListAttribute);\r\n });\r\n };\r\n\r\n const GetLibraryRole = (pClaLibrary) => {\r\n const getLibraryRole = `${config.UrlApiProject}DMS/GetLibraryRole?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryRole, 'GET', paramsToService, (response) => {\r\n bindUsuarioRoles(response.data.ListRol);\r\n });\r\n };\r\n\r\n const bindUsuarioRoles = (listUsuarioRoles) => { \r\n const arrayUsuarioRoles = [];\r\n let RowValues ={};\r\n for(let i=0; i < listUsuarioRoles.length; i++){\r\n RowValues ={ \r\n ...listUsuarioRoles[i]\r\n ,ClaUsuario : {\r\n ClaColaborador: listUsuarioRoles[i].ClaUsuario,\r\n NomColaborador: listUsuarioRoles[i].NomUsuario\r\n } \r\n }\r\n arrayUsuarioRoles.push(RowValues);\r\n }\r\n setUsuarioRoles(arrayUsuarioRoles)\r\n }\r\n\r\n const bindAttributeOpciones = (attributeOpciones, pListAttribute) => {\r\n const arrayOpciones = [];\r\n let RowValues = {};\r\n for (let i = 0; i < pListAttribute.length; i++) {\r\n const arrayOpcciones = attributeOpciones.filter(\r\n (opt) => opt.ClaLibraryAttribute === pListAttribute[i].ClaLibraryAttribute\r\n );\r\n RowValues = {\r\n CamposMultiSeleccion: arrayOpcciones,\r\n RowIndex: i,\r\n BajaLogica: 0,\r\n };\r\n arrayOpciones.push(RowValues);\r\n }\r\n console.log(arrayOpciones);\r\n setCamposMultiSeleccionById(arrayOpciones);\r\n };\r\n\r\n const obtenerTipoCampo = () => {\r\n const getTipoCampoCmb = `${config.UrlApiProject}HR/GetTipoCampoCmb`;\r\n const paramsToService = {};\r\n callApi(getTipoCampoCmb, 'GET', paramsToService, (response) => {\r\n setTipoCampoCmb(response.data.TipoCampo);\r\n });\r\n };\r\n\r\n const onChangeNomLibrary = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.NomLibrary;\r\n setErrors(newErrors);\r\n setNomLibrary(value);\r\n };\r\n\r\n const onChangeNomLibraryDescripcion = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.NomLibraryDescripcion;\r\n setErrors(newErrors);\r\n setNomLibraryDescripcion(e.target.value);\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n const onRemoveAttributeClick = (item) => {\r\n const copyAttributeMultiSeleccion = [...AttributeMultiSeleccion];\r\n copyAttributeMultiSeleccion[item.RowIndex].BajaLogica = 1;\r\n setAttributeMultiSeleccion(copyAttributeMultiSeleccion);\r\n\r\n if (item.ClaFormularioTipoCampo === 8 || item.ClaFormularioTipoCampo === 10 || item.ClaFormularioTipoCampo === 11) {\r\n const copyCamposMultiSeleccionById = [...CamposMultiSeleccionById];\r\n copyCamposMultiSeleccionById[item.RowIndex].BajaLogica = 1;\r\n setCamposMultiSeleccionById(copyCamposMultiSeleccionById);\r\n }\r\n };\r\n\r\n const onEditAttributeClick = (item) => {\r\n setitemAtributoEditar(item);\r\n setEsEditarOpciones(true);\r\n\r\n // onDescripcionChange(item.Descripcion);\r\n // onEditTipoCampo(item.ClaFormularioTipoCampo);\r\n // onEditObligarotio(item.EsObligatorio);\r\n setCamposMultiSeleccionParam([]);\r\n\r\n if (item.ClaFormularioTipoCampo === 11 || item.ClaFormularioTipoCampo === 10 || item.ClaFormularioTipoCampo === 8) {\r\n setEsHabilitarMultiSeleccion(1);\r\n const copyAttributeMultiSeleccion = [...CamposMultiSeleccionById];\r\n const filterAttributeMultiSeleccion = copyAttributeMultiSeleccion.filter(\r\n (opt) => opt.RowIndex === item.RowIndex\r\n );\r\n setCamposMultiSeleccionParam([...filterAttributeMultiSeleccion[0].CamposMultiSeleccion]);\r\n // setCamposMultiSeleccion([...copyAttributeMultiSeleccion[item.RowIndex].CamposMultiSeleccion]);\r\n }\r\n };\r\n\r\n const AddNewAttribute = () => {\r\n setitemAtributoEditar({});\r\n setEsEditarOpciones(true);\r\n setCamposMultiSeleccionParam([]);\r\n };\r\n\r\n const onHide = () => {\r\n setEsHabilitarMultiSeleccion(0);\r\n setEsEditarOpciones(false);\r\n setitemAtributoEditar({});\r\n };\r\n\r\n const valitationSchemeSave = yup.object().shape({\r\n NomLibrary: yup.string().required(t('common:RequiredField')).nullable(),\r\n NomLibraryDescripcion: yup.string().required(t('common:RequiredField')).nullable(),\r\n /* ClaFolder: yup.mixed().required(t('common:RequiredField')).nullable(), */\r\n });\r\n\r\n const onSaveLibrary = async () => {\r\n const value = {\r\n NomLibrary,\r\n NomLibraryDescripcion,\r\n /* ClaFolder, */\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) { \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n\r\n /*\r\n if (ClaFolder === undefined) {\r\n showSweetAlert(t('common:Warning'), t('dms:ReviewRequiredFieldsFolder'), 'warning');\r\n return;\r\n }\r\n */\r\n\r\n const OpcionesPorAtributo = CamposMultiSeleccionById; /* .filter((opt) => opt.BajaLogica === 0); */\r\n const AttributeOptionListById = [];\r\n let objOpciones = {};\r\n\r\n AttributeMultiSeleccion.forEach((element) => {\r\n const arrayOpciones = OpcionesPorAtributo.filter((opt) => opt.RowIndex === element.RowIndex);\r\n if (arrayOpciones !== undefined) {\r\n if (arrayOpciones[0].CamposMultiSeleccion !== null && arrayOpciones[0].CamposMultiSeleccion.length > 0) {\r\n const arrayCamposMultiSeleccion = arrayOpciones[0].CamposMultiSeleccion;\r\n arrayCamposMultiSeleccion.forEach((item) => {\r\n objOpciones = {\r\n RowIndexOpciones: element.RowIndex,\r\n ClaLibraryAttribute: element.ClaLibraryAttribute,\r\n ClaLibraryAttributeOption: item.ClaLibraryAttributeOption,\r\n NomLibraryAttributeOption: item.NomLibraryAttributeOption,\r\n BajaLogica : item.BajaLogica,\r\n Order : item.Order\r\n };\r\n AttributeOptionListById.push(objOpciones);\r\n });\r\n }\r\n }\r\n });\r\n const urlWebServiceSave = `${config.UrlApiProject}DMS/SaveLibrary`;\r\n\r\n const paramsService = {\r\n ClaLibrary,\r\n NomLibrary,\r\n NomLibraryDescripcion,\r\n ClaFolder,\r\n AttributeListDTO: AttributeMultiSeleccion,\r\n AttributeOptionListDTO: AttributeOptionListById,\r\n RolesListDTO: UsuarioRoles,\r\n // IdAccion: 1,\r\n };\r\n console.log(paramsService);\r\n\r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Exito'), t('common:SaveSuccess'), 'success');\r\n setErrors({});\r\n if (props.onAfterReturn != null) {\r\n props.onAfterReturn();\r\n }\r\n }); \r\n };\r\n\r\n const onCancel = () => {\r\n if (props.onHide !== undefined && typeof props.onHide === 'function') {\r\n props.onHide();\r\n }\r\n }; \r\n\r\n const SaveOpcionesEditor = (filterApply) => {\r\n setEsHabilitarMultiSeleccion(0);\r\n // Guardamos la descripcion del atributo seleccionado\r\n const updatedAttributeMultiSeleccion = [...AttributeMultiSeleccion];\r\n\r\n console.log(filterApply);\r\n if (Object.keys(itemAtributoEditar).length === 0) {\r\n const newRow = {\r\n RowIndex: AttributeMultiSeleccion !== undefined ? AttributeMultiSeleccion.length : 0,\r\n ClaLibraryAttribute: null,\r\n NomLibraryAttribute: filterApply.NomLibraryAttribute,\r\n ClaFormularioTipoCampo: filterApply.ClaFormularioTipoCampo,\r\n EsObligatorio: filterApply.EsObligatorio,\r\n BajaLogica: 0,\r\n NomFormularioTipoCampo: filterApply.NomFormularioTipoCampo,\r\n Order: filterApply.Order,\r\n };\r\n\r\n setAttributeMultiSeleccion([...AttributeMultiSeleccion, newRow]);\r\n\r\n if (filterApply.ClaFormularioTipoCampo === 11 || filterApply.ClaFormularioTipoCampo === 10 || filterApply.ClaFormularioTipoCampo === 8) {\r\n const newRowMultiSelOpciones = {\r\n RowIndex: AttributeMultiSeleccion !== undefined ? AttributeMultiSeleccion.length : 0,\r\n CamposMultiSeleccion: filterApply.CamposMultiSeleccionByIdNew,\r\n BajaLogica: 0,\r\n };\r\n setCamposMultiSeleccionById([...CamposMultiSeleccionById, newRowMultiSelOpciones]);\r\n }else{\r\n const newRowMultiSelOpcionesVacias = {\r\n RowIndex: AttributeMultiSeleccion !== undefined ? AttributeMultiSeleccion.length : 0,\r\n CamposMultiSeleccion: null,\r\n BajaLogica: 1,\r\n };\r\n setCamposMultiSeleccionById([...CamposMultiSeleccionById, newRowMultiSelOpcionesVacias]);\r\n }\r\n } else {\r\n updatedAttributeMultiSeleccion[itemAtributoEditar.RowIndex].NomLibraryAttribute =\r\n filterApply.NomLibraryAttribute;\r\n updatedAttributeMultiSeleccion[itemAtributoEditar.RowIndex].EsObligatorio =\r\n filterApply.EsObligatorio;\r\n updatedAttributeMultiSeleccion[itemAtributoEditar.RowIndex].Order =\r\n filterApply.Order;\r\n\r\n const claFormularioTipoCampo = TipoCampoCmb.filter(\r\n (item) => item.ClaFormularioTipoCampo === filterApply.ClaFormularioTipoCampo\r\n )[0];\r\n if (claFormularioTipoCampo !== undefined) {\r\n updatedAttributeMultiSeleccion[itemAtributoEditar.RowIndex].NomFormularioTipoCampo =\r\n claFormularioTipoCampo.NomFormularioTipoCampo;\r\n }\r\n updatedAttributeMultiSeleccion[itemAtributoEditar.RowIndex].ClaFormularioTipoCampo =\r\n filterApply.ClaFormularioTipoCampo;\r\n\r\n setAttributeMultiSeleccion(updatedAttributeMultiSeleccion);\r\n\r\n if (itemAtributoEditar.ClaFormularioTipoCampo === 11 || itemAtributoEditar.ClaFormularioTipoCampo === 10 || itemAtributoEditar.ClaFormularioTipoCampo === 8) {\r\n // const filterAttributeMultiSeleccion = CamposMultiSeleccionById.filter(\r\n // (opt) => opt.RowIndex === itemAtributoEditar.RowIndex\r\n // );\r\n // const copyCamposMultiSeleccionById = [...filterAttributeMultiSeleccion];\r\n // copyCamposMultiSeleccionById[0].CamposMultiSeleccion =\r\n // filterApply.CamposMultiSeleccionByIdNew;\r\n const copyCamposMultiSeleccionById = [...CamposMultiSeleccionById];\r\n copyCamposMultiSeleccionById[itemAtributoEditar.RowIndex].CamposMultiSeleccion =filterApply.CamposMultiSeleccionByIdNew;\r\n setCamposMultiSeleccionById(copyCamposMultiSeleccionById);\r\n }\r\n }\r\n setitemAtributoEditar({});\r\n };\r\n\r\n const obtenerOrganizationalDataByUser = () => {\r\n const GetOrganizationalDataInfo = `${config.UrlApiProject}DMS/GetCatBSCDMFolderCmb`;\r\n const paramsToService = {};\r\n\r\n callApi(GetOrganizationalDataInfo, 'GET', paramsToService, (response) => {\r\n expandAll(response.data);\r\n setNodes(response.data);\r\n });\r\n };\r\n\r\n const expandAll = (nodes) => {\r\n const _expandedKeys = {};\r\n for (const node of nodes) {\r\n expandNode(node, _expandedKeys);\r\n break;\r\n }\r\n\r\n setExpandedKeys(_expandedKeys);\r\n };\r\n\r\n const expandNode = (node, _expandedKeys) => {\r\n if (node.children && node.children.length) {\r\n _expandedKeys[node.key] = true;\r\n }\r\n };\r\n\r\n const onToggle = (event) => {\r\n setExpandedKeys(event.value);\r\n };\r\n\r\n const nodeTemplate = (node, options) => {\r\n return {node.label};\r\n };\r\n let selectedNodeElement = null;\r\n const onChangeFolder = (node) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaFolder;\r\n setErrors(newErrors);\r\n setselectedFolder(node);\r\n // busco en mis nodos con el id para obtener el elemento y setear el valor de imgUrl\r\n selectedNodeElement = null;\r\n const item = readChildNode(nodes, node);\r\n\r\n setClaFolder(item.key);\r\n // setImageUrl(item.ImageUrl);\r\n\r\n // if (props.onChange !== undefined && typeof props.onChange === 'function') {\r\n // props.onChange(node, item);\r\n // }\r\n };\r\n\r\n const readChildNode = (nodesArray, node) => {\r\n nodesArray.map((element, key) => {\r\n if (element.key === node) {\r\n selectedNodeElement = element;\r\n return element;\r\n }\r\n\r\n if (element.children.length > 0) {\r\n return readChildNode(element.children, node);\r\n }\r\n\r\n return null;\r\n });\r\n\r\n return selectedNodeElement;\r\n };\r\n\r\n const onChangeClaUsuarioResponsableParticipants = (props, e) => {\r\n const updatedUsuarioRoles = [...UsuarioRoles];\r\n if (e.value != null && typeof e.value === 'object') {\r\n const responsible = filteredResponsibleParticipants.filter(\r\n (item) => item.ClaColaborador === e.value.ClaColaborador\r\n )[0];\r\n\r\n if (responsible !== undefined) {\r\n updatedUsuarioRoles[props.rowData.RowIndex].NomUsuario = responsible.NomColaborador;\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaUsuario = responsible.ClaColaborador;\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaColaborador = responsible.ClaColaborador;\r\n }\r\n } else {\r\n updatedUsuarioRoles[props.rowData.RowIndex].NomUsuario = null;\r\n }\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaUsuario = e.value;\r\n setUsuarioRoles(updatedUsuarioRoles);\r\n \r\n };\r\n\r\n const AddResponsableRol = () => {\r\n const newRow = {\r\n RowIndex: UsuarioRoles.length,\r\n ClaUsuario: null,\r\n NomUsuario: null,\r\n ClaColaborador: null,\r\n Bajalogica: 0,\r\n };\r\n setUsuarioRoles([...UsuarioRoles, newRow]);\r\n // setUsuarioRoles([...UsuarioRoles, ClaColaborador]);\r\n };\r\n const filterResponsibleParticipants = (props, event) => {\r\n let valor = '';\r\n valor = event.query;\r\n const paramsServiceOwners = {};\r\n // event.query\r\n const urlWebServiceOwners = `${\r\n config.UrlApiProject\r\n }DMS/GetRolesColaboradorCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${\r\n !EsMostrarSoloUsuarioMSW ? 1 : 0\r\n }`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => {\r\n setfilteredResponsibleParticipants(response.data[0]);\r\n });\r\n };\r\n\r\n const onRemoveResponsableRolesClick = (item) => {\r\n const copyeUsuarioRoles = [...UsuarioRoles];\r\n copyeUsuarioRoles[item.RowIndex].BajaLogica = 1;\r\n setUsuarioRoles(copyeUsuarioRoles);\r\n };\r\n\r\n const headerTemplateResponsableRol = (\r\n <>\r\n
\r\n onChangeClaUsuarioResponsableParticipants(props, e)}\r\n suggestions={filteredResponsibleParticipants}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsibleParticipants(props, e)}\r\n errors={errors[`UsuarioRoles[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n const fieldsRequiredRol = (rowData, props) => {\r\n return (\r\n <>\r\n {errors[`UsuarioRoles[${props.rowData.RowIndex}]`] != null ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n };\r\n\r\n const BotonesTemplateRol = (rowData, e) => {\r\n return (\r\n <>\r\n {t('dms:TitleStep1')}
{' '}\r\n \r\n \r\n\r\n onChangeNomLibrary(e.target.value)}\r\n errors={errors}\r\n autoFocus\r\n maxLength={250}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n {t('dms:TitleStep2')}
{' '}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n {t('dms:TitleStep3')}
{' '}\r\n \r\n \r\n{t('dms:TitleStep4')}
{' '}\r\n \r\n \r\n\r\n
\r\n );\r\n };\r\n\r\n const onChangePendingSearch = (props, e) => {\r\n setShowOnlyPending(e.checked ? 1 : 0);\r\n };\r\n\r\n const onClaLibraryChange = (props, e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaLibrary;\r\n setErrors(newErrors);\r\n setErrors({});\r\n\r\n const clalibrary = e.value === undefined ? null : e.value;\r\n setClaLibrary(clalibrary); \r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n \r\n \r\n \r\n onAddFolderLibrary()}\r\n className=\"light-green no-border p-mr-2\"\r\n />\r\n \r\n {/* \r\n */}\r\n
\r\n \r\n onClaLibraryChange(props, e)}\r\n errors={errors}\r\n label={t('dms:NomLibrary')}\r\n />\r\n
\r\n \r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n maxLength={7000}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 2) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value); \r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 3) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 4) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 5) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 7) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n maxLength={7000}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 8) {\r\n return (\r\n \r\n {\r\n onchangeControlSingle(e.value, props);\r\n }}\r\n errors={props.errors}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 9) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n errors={props.errors}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 10) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n optionValue=\"ClaLibraryAttributeOption\"\r\n optionLabel=\"NomLibraryAttributeOption\"\r\n className=\"buttonListSurvey\"\r\n multiple={false}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 11) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n optionValue=\"ClaLibraryAttributeOption\"\r\n optionLabel=\"NomLibraryAttributeOption\"\r\n className=\"buttonListSurvey\"\r\n multiple={true}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {props.NomLibraryAttribute}\r\n
\r\n \r\n
{TipodeCampoAttribute(ClaFormularioTipoCampo)}
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const onChangeEsPrivado = (e) => {\r\n setEsArchivoPrivado(!!e.checked);\r\n if (e.checked) {\r\n if (UsuarioRolesAux.length > 0) {\r\n setUsuarioRoles(UsuarioRolesAux);\r\n }\r\n } else {\r\n setUsuarioRoles([]);\r\n }\r\n };\r\n\r\n /*\r\n const GetLibraryRole = (pClaLibrary) => {\r\n const getLibraryRole = `${config.UrlApiProject}DMS/GetLibraryRole?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryRole, 'GET', paramsToService, (response) => {\r\n bindUsuarioRoles(response.data.ListRol);\r\n });\r\n };\r\n */\r\n\r\n const bindUsuarioRoles = (listUsuarioRoles) => {\r\n const arrayUsuarioRoles = [];\r\n let RowValues = {};\r\n for (let i = 0; i < listUsuarioRoles.length; i++) {\r\n RowValues = {\r\n ...listUsuarioRoles[i],\r\n ClaColaborador: listUsuarioRoles[i].ClaUsuario,\r\n ClaUsuario: {\r\n ClaColaborador: listUsuarioRoles[i].ClaUsuario,\r\n NomColaborador: listUsuarioRoles[i].NomUsuario,\r\n },\r\n };\r\n arrayUsuarioRoles.push(RowValues);\r\n }\r\n setUsuarioRoles(arrayUsuarioRoles);\r\n setUsuarioRolesAux(arrayUsuarioRoles);\r\n };\r\n\r\n const headerTemplateResponsableRol = (\r\n <>\r\n \r\n onChangeClaUsuarioResponsableParticipants(props, e)}\r\n suggestions={filteredResponsibleParticipants}\r\n field=\"NomColaborador\"\r\n completeMethod={(e) => filterResponsibleParticipants(props, e)}\r\n errors={errors[`UsuarioRoles[${props.rowData.RowIndex}]`]}\r\n />\r\n
\r\n );\r\n };\r\n const filterResponsibleParticipants = (props, event) => {\r\n let valor = '';\r\n valor = event.query;\r\n const paramsServiceOwners = {};\r\n // event.query\r\n const urlWebServiceOwners = `${\r\n config.UrlApiProject\r\n }DMS/GetRolesColaboradorCmb?descriptionFilter=${valor}&EsMostrarSoloUsuarioMSW=${\r\n !EsMostrarSoloUsuarioMSW ? 1 : 0\r\n }`;\r\n // Get owner\r\n callApi(urlWebServiceOwners, 'GET', paramsServiceOwners, (response) => {\r\n setfilteredResponsibleParticipants(response.data[0]);\r\n });\r\n };\r\n\r\n const onChangeClaUsuarioResponsableParticipants = (props, e) => {\r\n const updatedUsuarioRoles = [...UsuarioRoles];\r\n if (e.value != null && typeof e.value === 'object') {\r\n const responsible = filteredResponsibleParticipants.filter(\r\n (item) => item.ClaColaborador === e.value.ClaColaborador\r\n )[0];\r\n\r\n if (responsible !== undefined) {\r\n updatedUsuarioRoles[props.rowData.RowIndex].NomUsuario = responsible.NomColaborador;\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaUsuario = responsible.ClaColaborador;\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaColaborador = responsible.ClaColaborador;\r\n }\r\n } else {\r\n updatedUsuarioRoles[props.rowData.RowIndex].NomUsuario = null;\r\n }\r\n updatedUsuarioRoles[props.rowData.RowIndex].ClaUsuario = e.value;\r\n setUsuarioRoles(updatedUsuarioRoles);\r\n };\r\n\r\n const onChangeTitleFile = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.TitleFile;\r\n setErrors(newErrors);\r\n setTitleFile(value);\r\n };\r\n\r\n const onChangeDescriptionFile = (value) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.DescriptionFile;\r\n setErrors(newErrors);\r\n setDescriptionFile(value);\r\n };\r\n\r\n const onChangeShowInHome = (e) => {\r\n setShowInHome(!!e.checked); \r\n };\r\n\r\n return (\r\n <>\r\n \r\n onClaLibraryChange(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n onChangeTitleFile(e.target.value)}\r\n errors={errors}\r\n autoFocus\r\n maxLength={250}\r\n />\r\n
\r\n \r\n \r\n onChangeDescriptionFile(e.target.value)}\r\n errors={errors}\r\n autoFocus\r\n maxLength={3000}\r\n rows={4}\r\n />\r\n
\r\n \r\n \r\n onChangeShowInHome(e)}\r\n />\r\n
\r\n \r\n \r\n onChangeEsPrivado(e)}\r\n />\r\n
\r\n \r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n maxLength={7000}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 2) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 3) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 4) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 5) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 7) {\r\n return (\r\n \r\n {\r\n onChangeControlPlano(e.target.value);\r\n }}\r\n maxLength={7000}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 8) {\r\n return (\r\n \r\n {\r\n onchangeControlSingle(e.value, props);\r\n }}\r\n errors={props.errors}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 9) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n errors={props.errors}\r\n >\r\n \r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 10) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n optionValue=\"ClaLibraryAttributeOption\"\r\n optionLabel=\"NomLibraryAttributeOption\"\r\n className=\"buttonListSurvey\"\r\n multiple={false}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n if (pClaFormularioTipoCampo === 11) {\r\n return (\r\n \r\n onchangeControlSingle(e.value, props)}\r\n optionValue=\"ClaLibraryAttributeOption\"\r\n optionLabel=\"NomLibraryAttributeOption\"\r\n className=\"buttonListSurvey\"\r\n multiple={true}\r\n errors={props.errors}\r\n />\r\n
\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n {props.NomLibraryAttribute}\r\n
\r\n \r\n
{TipodeCampoAttribute(ClaFormularioTipoCampo)}
\r\n \r\n
\r\n \r\n
*/}\r\n {/* \r\n
\r\n \r\n {props.NomLibraryAttribute}\r\n
\r\n \r\n
{TipodeCampoAttribute(ClaFormularioTipoCampo)}
\r\n \r\n
\r\n );\r\n }; \r\n \r\n const obtenerLibrary = () => {\r\n const getLibraryCmb = `${config.UrlApiProject}DMS/GetLibraryByUserCmb`;\r\n const paramsToService = {};\r\n callApi(getLibraryCmb, 'GET', paramsToService, (response) => {\r\n setOpcionesLibrary(response.data.Library);\r\n });\r\n };\r\n\r\n const onClaLibraryChange = (props, e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaLibrary;\r\n setErrors(newErrors);\r\n setErrors({});\r\n\r\n const clalibrary = e.value === undefined ? null : e.value;\r\n setClaLibrary(clalibrary);\r\n\r\n if (clalibrary === null) {\r\n setAttributeList([]);\r\n GetLibraryAttributeOpciones([]);\r\n if (props.onSearch) {\r\n const filtersData = {\r\n isClearInfo: true\r\n };\r\n props.onSearch(filtersData);\r\n }\r\n }else {\r\n GetLibraryAttribute(clalibrary);\r\n if (props.onSearch) {\r\n const filtersData = {\r\n isClearInfo: true\r\n };\r\n props.onSearch(filtersData);\r\n }\r\n } \r\n };\r\n \r\n const GetLibraryAttribute = (pClaLibrary) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttribute?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n setAttributeList(response.data.ListAttibute);\r\n GetLibraryAttributeOpciones(pClaLibrary);\r\n });\r\n };\r\n\r\n const GetLibraryAttributeOpciones = (pClaLibrary) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttributeOpciones?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n setAttributeOpciones(bindOpciones(response.data.ListOpciones));\r\n });\r\n };\r\n\r\n const bindOpciones = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n return activeRows;\r\n };\r\n\r\n const onValueChangedQuestion = (RowIndex, pClaAttribute, newValue, pAttributeOpciones) => {\r\n const newAttributeList = [...AttributeList]; \r\n newAttributeList[RowIndex].RespuestaAttribute = newValue === \"\" || newValue === undefined || (Array.isArray(newValue) && newValue.length === 0)? null: newValue; \r\n newAttributeList[RowIndex].ClaAttribute = pClaAttribute; \r\n setAttributeList(newAttributeList);\r\n if (props.onSearch) {\r\n const filtersData = {\r\n isClearInfo: true\r\n };\r\n props.onSearch(filtersData);\r\n }\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n \r\n \r\n \r\n onAddLibraryFile()}\r\n className=\"light-green no-border p-mr-2\"\r\n />\r\n \r\n {/* \r\n */}\r\n
\r\n \r\n onClaLibraryChange(props, e)}\r\n errors={errors}\r\n label={t('dms:NomLibrary')}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const FechaUltimaModTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaUltimaMod !== null\r\n ? moment(rowData.FechaUltimaMod).format('MM/DD/YYYY')\r\n : null}\r\n \r\n );\r\n }; \r\n\r\n const LibraryColumn = (rowData, props) => {\r\n return (\r\n <>\r\n \r\n {t('dms:MessageDeleteFileConfirmation')}\r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n const onClaLibraryChange = (props, e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaLibrary;\r\n setErrors(newErrors);\r\n setErrors({});\r\n\r\n const clalibrary = e.value === undefined ? null : e.value;\r\n setClaLibrary(clalibrary);\r\n if (clalibrary === null) {\r\n setAttributeList([]);\r\n GetLibraryAttributeOpciones([]); \r\n }else {\r\n GetLibraryAttribute(clalibrary);\r\n } \r\n\r\n if (props.onSearch) {\r\n const filtersData = {\r\n isClearInfo: true,\r\n TitleFile,\r\n DescriptionFile\r\n };\r\n props.onSearch(filtersData); \r\n }\r\n };\r\n\r\n const GetLibraryAttribute = (pClaLibrary) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttribute?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n setAttributeList(response.data.ListAttibute);\r\n GetLibraryAttributeOpciones(pClaLibrary);\r\n });\r\n };\r\n\r\n const GetLibraryAttributeOpciones = (pClaLibrary) => {\r\n const getLibraryAttribute = `${config.UrlApiProject}DMS/GetLibraryAttributeOpciones?ClaLibrary=${pClaLibrary}`;\r\n const paramsToService = {};\r\n callApi(getLibraryAttribute, 'GET', paramsToService, (response) => {\r\n setAttributeOpciones(bindOpciones(response.data.ListOpciones));\r\n });\r\n };\r\n\r\n const bindOpciones = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n return activeRows;\r\n };\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n const onValueChangedQuestion = (RowIndex, pClaAttribute, newValue, pAttributeOpciones) => {\r\n const newAttributeList = [...AttributeList]; \r\n newAttributeList[RowIndex].RespuestaAttribute = newValue === \"\" || newValue === undefined || (Array.isArray(newValue) && newValue.length === 0)? null: newValue; \r\n newAttributeList[RowIndex].ClaAttribute = pClaAttribute; \r\n setAttributeList(newAttributeList);\r\n if (props.onSearch) {\r\n const filtersData = {\r\n isClearInfo: true,\r\n TitleFile,\r\n DescriptionFile\r\n };\r\n props.onSearch(filtersData); \r\n }\r\n };\r\n\r\n \r\n const onChangeTitleFile = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.TitleFile;\r\n setErrors(newErrors);\r\n setTitleFile(e.target.value.trim());\r\n }\r\n\r\n const onChangeDescriptionFile = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.DescriptionFile;\r\n setErrors(newErrors);\r\n setDescriptionFile(e.target.value.trim());\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n onClaLibraryChange(props, e)}\r\n errors={errors}\r\n label={t('dms:NomLibrary')}\r\n />\r\n
\r\n \r\n {t('dms:notSureAboutFilters')}
) : (<>) }\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n\r\n const close = async () => {\r\n setErrors({});\r\n if (props.onClickClose !== null) {\r\n props.onClickClose();\r\n }\r\n };\r\n\r\n const FechaFacturaTemplate = (rowData) => {\r\n return (\r\n <>\r\n {rowData.FechaFactura !== null ? moment(rowData.FechaFactura).format('MM/DD/YYYY') : null}\r\n \r\n );\r\n };\r\n const footer = (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {t('indIncCompensation:DetailbyInvoice')}\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n ) \r\n \r\n const headerStrategicTonsV2 = ( \r\n <> \r\n \r\n setshowTonsAllColumns(!showTonsAllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n \r\n const headerRevenueExworksV2 = ( \r\n <> \r\n \r\n setshowStrategicTonsV2AllColumns(!showStrategicTonsV2AllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n\r\n const headerCustomerRetentionV2 = ( \r\n <> \r\n \r\n setshowRevenueExworksV2AllColumns(!showRevenueExworksV2AllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n\r\n const headerSpread = ( \r\n <> \r\n \r\n setshowCustomerRetentionV2AllColumns(!showCustomerRetentionV2AllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n \r\n const headerStrategicTons = ( \r\n <> \r\n \r\n setshowSpreadAllColumns(!showSpreadAllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n\r\n const headerTotalPay = ( \r\n <> \r\n \r\n setshowStrategicTonsAllColumns(!showStrategicTonsAllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ) \r\n const onChangeEsDetailInvoice = () => {\r\n setEsDetailInvoice(true); \r\n };\r\n\r\n const onClickViewMonthlyGoals = () =>\r\n {\r\n setEsViewMonthlyGoals(true); \r\n } \r\n\r\n const onHideDetailInvoice = () => {\r\n setEsDetailInvoice(false); \r\n };\r\n\r\n const NumberEditor = (columnName, props, TypeOpc) => {\r\n if (props.rowData.RowIndex === 0) {\r\n if (InsentiveCompensationMonthsStatus[columnName] !== undefined) {\r\n if (InsentiveCompensationMonthsStatus[columnName] === 1) {\r\n return (\r\n \r\n setshowTotalPayAllColumns(!showTotalPayAllColumns)}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onNumberChange(props, e.target.value, TypeOpc)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n maxFractionDigits={2}\r\n />\r\n
\r\n ); \r\n } \r\n return RederFormatColumn(columnName, props.rowData); \r\n }\r\n }else{\r\n return RederFormatColumn(columnName, props.rowData); \r\n }\r\n }; \r\n\r\n const onNumberChange = (props, value, TypeOpc) => {\r\n let updatedRow = [];\r\n switch (TypeOpc) {\r\n case 1: \r\n updatedRow = [...InsentiveCompensationTons];\r\n updatedRow[props.rowData.RowIndex][props.field] = value; \r\n setInsentiveCompensationTons(updatedRow); \r\n break;\r\n case 2: \r\n updatedRow = [...InsentiveCompensationSpread];\r\n updatedRow[props.rowData.RowIndex][props.field] = value; \r\n setInsentiveCompensationSpread(updatedRow); \r\n break;\r\n case 3: \r\n updatedRow = [...InsentiveCompensationStrategicTons];\r\n updatedRow[props.rowData.RowIndex][props.field] = value; \r\n setInsentiveCompensationStrategicTons(updatedRow); \r\n break;\r\n case 4: \r\n updatedRow = [...InsentiveCompensationTeamProfitServe];\r\n updatedRow[props.rowData.RowIndex][props.field] = value; \r\n setInsentiveCompensationTeamProfitServe(updatedRow); \r\n break;\r\n \r\n default:\r\n break;\r\n } \r\n };\r\n\r\n \r\n const recalculeIncentiveSalesRepInfo = () => {\r\n const infoSimulacion = [];\r\n\r\n const rowInsentiveCompensation = {\r\n Tipo: 1,\r\n EneroPresupuesto: InsentiveCompensationTons[0].Ene,\r\n FebreroPresupuesto: InsentiveCompensationTons[0].Feb,\r\n MarzoPresupuesto: InsentiveCompensationTons[0].Mar,\r\n AbrilPresupuesto: InsentiveCompensationTons[0].Abr,\r\n MayoPresupuesto: InsentiveCompensationTons[0].May,\r\n JunioPresupuesto: InsentiveCompensationTons[0].Jun,\r\n JulioPresupuesto: InsentiveCompensationTons[0].Jul,\r\n AgostoPresupuesto: InsentiveCompensationTons[0].Ago,\r\n SeptiembrePresupuesto: InsentiveCompensationTons[0].Sep,\r\n OctubrePresupuesto: InsentiveCompensationTons[0].Oct,\r\n NoviembrePresupuesto: InsentiveCompensationTons[0].Nov,\r\n DiciembrePresupuesto: InsentiveCompensationTons[0].Dic,\r\n }\r\n infoSimulacion.push(rowInsentiveCompensation);\r\n\r\n const rowInsentiveCompensationSpread = {\r\n Tipo: 2,\r\n EneroPresupuesto: InsentiveCompensationSpread[0].Ene,\r\n FebreroPresupuesto: InsentiveCompensationSpread[0].Feb,\r\n MarzoPresupuesto: InsentiveCompensationSpread[0].Mar,\r\n AbrilPresupuesto: InsentiveCompensationSpread[0].Abr,\r\n MayoPresupuesto: InsentiveCompensationSpread[0].May,\r\n JunioPresupuesto: InsentiveCompensationSpread[0].Jun,\r\n JulioPresupuesto: InsentiveCompensationSpread[0].Jul,\r\n AgostoPresupuesto: InsentiveCompensationSpread[0].Ago,\r\n SeptiembrePresupuesto: InsentiveCompensationSpread[0].Sep,\r\n OctubrePresupuesto: InsentiveCompensationSpread[0].Oct,\r\n NoviembrePresupuesto: InsentiveCompensationSpread[0].Nov,\r\n DiciembrePresupuesto: InsentiveCompensationSpread[0].Dic,\r\n }\r\n infoSimulacion.push(rowInsentiveCompensationSpread);\r\n\r\n const rowInsentiveCompensationStrategicTons = {\r\n Tipo: 3,\r\n EneroPresupuesto: InsentiveCompensationStrategicTons[0].Ene,\r\n FebreroPresupuesto: InsentiveCompensationStrategicTons[0].Feb,\r\n MarzoPresupuesto: InsentiveCompensationStrategicTons[0].Mar,\r\n AbrilPresupuesto: InsentiveCompensationStrategicTons[0].Abr,\r\n MayoPresupuesto: InsentiveCompensationStrategicTons[0].May,\r\n JunioPresupuesto: InsentiveCompensationStrategicTons[0].Jun,\r\n JulioPresupuesto: InsentiveCompensationStrategicTons[0].Jul,\r\n AgostoPresupuesto: InsentiveCompensationStrategicTons[0].Ago,\r\n SeptiembrePresupuesto: InsentiveCompensationStrategicTons[0].Sep,\r\n OctubrePresupuesto: InsentiveCompensationStrategicTons[0].Oct,\r\n NoviembrePresupuesto: InsentiveCompensationStrategicTons[0].Nov,\r\n DiciembrePresupuesto: InsentiveCompensationStrategicTons[0].Dic,\r\n }\r\n infoSimulacion.push(rowInsentiveCompensationStrategicTons);\r\n\r\n const rowInsentiveCompensationTeamProfitServe = {\r\n Tipo: 4,\r\n EneroPresupuesto: 0,\r\n FebreroPresupuesto: 0,\r\n MarzoPresupuesto: 0,\r\n AbrilPresupuesto: 0,\r\n MayoPresupuesto: 0,\r\n JunioPresupuesto: 0,\r\n JulioPresupuesto: 0,\r\n AgostoPresupuesto: 0,\r\n SeptiembrePresupuesto: 0,\r\n OctubrePresupuesto: 0,\r\n NoviembrePresupuesto: 0,\r\n DiciembrePresupuesto: InsentiveCompensationStrategicTons[0].Total,\r\n }\r\n infoSimulacion.push(rowInsentiveCompensationTeamProfitServe);\r\n\r\n console.log(infoSimulacion);\r\n\r\n const paramsService = {\r\n ClaAnio: props.ClaAnio,\r\n ClaAgenteVentas: props.ClaAgenteVentas,\r\n ClaMes: props.ClaMes,\r\n RecalculateListDTO: infoSimulacion,\r\n\r\n };\r\n const urlWebService = `${config.UrlApiProject}SalesPerformanceSales/GetRecalculateIndividualIncetiveCompensation`;\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n const InsentiveCompensationMonths = response.data.InsentiveCompensationMonthsStatus.length > 0 ? response.data.InsentiveCompensationMonthsStatus[0] :{} \r\n setInsentiveCompensationMonthsStatus(InsentiveCompensationMonths); \r\n setInsentiveCompensation(response.data.InsentiveCompensation);\r\n setInsentiveCompensationPM(response.data.InsentiveCompensationPM);\r\n setInsentiveCompensationTons(response.data.InsentiveCompensationTons);\r\n setInsentiveCompensationSpread(response.data.InsentiveCompensationSpread);\r\n setInsentiveCompensationStrategicTons(response.data.InsentiveCompensationStrategicTons);\r\n setInsentiveCompensationTeamProfitServe(response.data.InsentiveCompensationTeamProfitServe);\r\n setInsentiveCompensationTotalPay(response.data.InsentiveCompensationTotalPay); \r\n }); \r\n };\r\n \r\n return (\r\n <> \r\n {t('indIncCompensation:Note2')}.
\r\n\r\n
\r\n \r\n {/* \r\n \r\n onChangeClaMes(e)}\r\n showClear={false}\r\n />\r\n
\r\n \r\n */}\r\n \r\n setClaAgenteVentas(e.value === undefined ? null : e.value)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const TipoAndon2 = (tipoAndon, name) => {\r\n let severityClass = '';\r\n switch (tipoAndon) {\r\n case 1:\r\n severityClass = 'downtime-score-square-red-gradient';\r\n break;\r\n case 2:\r\n severityClass = 'downtime-score-square-purple-gradient';\r\n break;\r\n case 3:\r\n severityClass = 'downtime-score-square-yellow-gradient';\r\n break;\r\n case 4:\r\n severityClass = 'downtime-score-square-blue-gradient';\r\n break;\r\n case 5:\r\n severityClass = 'downtime-score-square-green-gradient';\r\n break;\r\n case 6:\r\n severityClass = 'downtime-score-square-strongblue-gradient';\r\n break;\r\n default:\r\n severityClass = '';\r\n break;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n onTipoAndonClick(tipoAndon)}\r\n >\r\n {ClaTipoAndon === tipoAndon ? (\r\n
\r\n \r\n }\r\n className=\"downtime-sqare-badge\"\r\n > \r\n \r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const LimpiaVariables = () => { \r\n setClaAreaDepartamento(null);\r\n setClaCelda(null);\r\n setClaMaquina(null);\r\n setTipoPreguntaPorMaquina(null);\r\n setCausing(null);\r\n setClaTipoAndon(null);\r\n setClaTipoParoAndon(null);\r\n setClaRazonAndon(null);\r\n setIdReporteAndon(null);\r\n setIdFixProblem(null);\r\n setCeldaList([]);\r\n setMaquinasList([]);\r\n setTipoAndonList([]);\r\n setTipoParoAndonList([]);\r\n setRazonAndonList([]);\r\n setEsEditarTurno(false);\r\n setEsEditarAD(false);\r\n setEsEditarCelda(false);\r\n setEsEditarMaquina(false);\r\n setEsEditarCausing(false);\r\n setEsEditarTipoAndon(false);\r\n setEsEditarTipoParoAndon(false);\r\n setEsEditarRazonAndon(false);\r\n setEsEditarFixProblem(false);\r\n setEsEditarComentarioRazonAndon(false);\r\n setEsEditarRazonAndon(false);\r\n setComentarioRazonAndon(null);\r\n setSolucionAndon(null); \r\n setClaTipoAndon2(null);\r\n setNombreEmpleado(null);\r\n };\r\n\r\n const LimpiaVariablesDesdeCelda = () => {\r\n setClaMaquina(null);\r\n setTipoPreguntaPorMaquina(null);\r\n setCausing(null);\r\n setClaTipoAndon(null);\r\n setClaTipoParoAndon(null);\r\n setClaRazonAndon(null);\r\n setIdReporteAndon(null);\r\n setIdFixProblem(null);\r\n setClaTipoAndon2(null);\r\n setMaquinasList([]);\r\n setTipoAndonList([]);\r\n setTipoParoAndonList([]);\r\n setRazonAndonList([]); \r\n };\r\n\r\n const LimpiaVariablesDesdeMaquina = () => {\r\n // setTipoPreguntaPorMaquina(null);\r\n setCausing(null);\r\n setClaTipoAndon(null);\r\n setClaTipoParoAndon(null);\r\n setClaRazonAndon(null);\r\n setIdReporteAndon(null);\r\n setIdFixProblem(null);\r\n setClaTipoAndon2(null);\r\n setTipoParoAndonList([]);\r\n setRazonAndonList([]); \r\n };\r\n\r\n const LimpiaVariablesDesdeCausing = () => {\r\n setClaTipoAndon(null);\r\n setClaTipoParoAndon(null);\r\n setClaRazonAndon(null);\r\n setClaTipoAndon2(null); \r\n };\r\n\r\n const LabelTurno = (value) => {\r\n const turno = TurnoList.filter((opt) => opt.ClaTurno === value);\r\n let nomTurno = '';\r\n if (TurnoList.length > 0) {\r\n nomTurno = turno[0].NomTurno;\r\n }\r\n return nomTurno;\r\n };\r\n\r\n const LabelAreaDepartamento = (value) => { \r\n const ad = AreaDepartamentoList.filter((opt) => opt.ClaDepartamento4 === value);\r\n return ad.length > 0 ? ad[0].NomDepartamento4 : '';\r\n };\r\n const LabelCell = (value) => {\r\n const cell = CeldaList.filter((opt) => opt.ClaCelda === value);\r\n let claveCelda = '';\r\n if (cell.length > 0) {\r\n claveCelda = cell[0].ClaveCelda;\r\n }\r\n return claveCelda;\r\n };\r\n\r\n const LabelMaquina = (value) => {\r\n const maquina = MaquinasList.filter((opt) => opt.ClaMaquina === value);\r\n let nomMaquina = '';\r\n if (maquina.length > 0) {\r\n nomMaquina = maquina[0].NomMaquina;\r\n }\r\n return nomMaquina;\r\n };\r\n\r\n const LabelCausing = (value) => {\r\n const causing = CausingList.filter((opt) => opt.IdCausing === value);\r\n let nomCausing = '';\r\n if (causing.length > 0) {\r\n nomCausing = causing[0].NomCausing;\r\n }\r\n return nomCausing;\r\n };\r\n\r\n const LabelTipoAndon = (value) => {\r\n const tipoAndon = TipoAndonList.filter((opt) => opt.ClaTipoAndon === value);\r\n let nomTipoAndon = '';\r\n if (tipoAndon.length > 0) {\r\n nomTipoAndon = tipoAndon[0].NomTipoAndon;\r\n }\r\n return nomTipoAndon;\r\n };\r\n\r\n const LabelTipoParoAndon = (value) => {\r\n const claTipoParoAndon = TipoParoAndonList.filter((opt) => opt.ClaTipoParoAndon === value);\r\n let nomTipoParoAndon = '';\r\n if (claTipoParoAndon.length > 0) {\r\n nomTipoParoAndon = claTipoParoAndon[0].NomTipoParoAndon;\r\n }\r\n return nomTipoParoAndon;\r\n };\r\n\r\n const LabelRazonAndon = (value) => {\r\n const claRazonAndon = RazonAndonList.filter((opt) => opt.ClaRazonAndon === value);\r\n let nomRazonAndon = '';\r\n if (claRazonAndon.length > 0) {\r\n nomRazonAndon = claRazonAndon[0].NomRazonAndon;\r\n }\r\n return nomRazonAndon;\r\n };\r\n\r\n const LabelFix = (value) => {\r\n const idFixProblem = FixList.filter((opt) => opt.IdFixProblem === value);\r\n let nomFix = '';\r\n if (idFixProblem.length > 0) {\r\n nomFix = idFixProblem[0].NomFix;\r\n }\r\n return nomFix;\r\n };\r\n\r\n const onScrollUp = () => { \r\n window.scrollTo(0, window.scrollY-200);\r\n }\r\n\r\n const onScrollDown = () => {\r\n window.scrollTo(0, window.scrollY+200);\r\n }\r\n\r\n const onChangeComentarioRazonAndon = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ComentarioRazonAndon; \r\n setErrors(newErrors);\r\n setComentarioRazonAndon(e.target.value);\r\n setEsEditarComentarioRazonAndon(e.target.value === null || e.target.value === '');\r\n setIdFixProblem(null);\r\n // keyboardRef.current.setInput(e.target.value);\r\n }\r\n\r\n const onChangeNombreEmpleado = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.NombreEmpleado; \r\n setErrors(newErrors);\r\n setNombreEmpleado(e.target.value);\r\n setEsEditarNombreEmpleado(e.target.value === null || e.target.value === '');\r\n setIdFixProblem(null);\r\n // keyboardRef.current.setInput(e.target.value);\r\n }\r\n\r\n const onChangeResponsableCheckIn = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ResponsableCheckIn; \r\n setErrors(newErrors);\r\n setResponsableCheckIn(e.target.value);\r\n setEsEditarResponsableCheckIn(e.target.value === null || e.target.value === '');\r\n setIdFixProblem(null);\r\n // keyboardRef.current.setInput(e.target.value);\r\n}\r\n\r\nconst onChangeResponsableResuelveProblema = (e) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.ResponsableResuelveProblema; \r\n setErrors(newErrors);\r\n setResponsableResuelveProblema(e.target.value);\r\n setEsEditarResponsableResuelveProblema(e.target.value === null || e.target.value === '');\r\n setIdFixProblem(null);\r\n}\r\n\r\n const onChangeSolucionAndon = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.SolucionAndon; \r\n setErrors(newErrors);\r\n setSolucionAndon(e.target.value);\r\n setEsEditarSolucionAndon(e.target.value === null || e.target.value === '');\r\n setIdFixProblem(null);\r\n // keyboardRef.current.setInput(e.target.value);\r\n} \r\n \r\n return (\r\n <>\r\n {\r\n IsNewHomeVersion ? (<>)\r\n :\r\n (\r\n <>\r\n {ClaTurno === null || EsEditarTurno ? (\r\n \r\n onTipoAndon2Click(tipoAndon)}\r\n >\r\n {ClaTipoAndon2 === tipoAndon ? (\r\n
\r\n \r\n }\r\n className=\"downtime-sqare-badge\"\r\n > \r\n \r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n \r\n setEsEditarTurno(!EsEditarTurno)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n onClaTurnoClick(e.value)}\r\n optionValue=\"ClaTurno\"\r\n optionLabel=\"NomTurno\"\r\n errors={errors}\r\n />\r\n
\r\n \r\n setEsEditarTurno(!EsEditarTurno)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )} \r\n {ClaAreaDepartamento === null || EsEditarAD ? (\r\n \r\n \r\n setEsEditarAD(!EsEditarAD)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n onAreaDepartamentoClick(e.value)}\r\n optionValue=\"ClaDepartamento4\"\r\n optionLabel=\"NomDepartamento4\"\r\n errors={errors}\r\n />\r\n
\r\n \r\n setEsEditarAD(!EsEditarAD)}>\r\n \r\n
\r\n
\r\n )}\r\n <>\r\n\r\n {ClaCelda === null || EsEditarCelda ? (\r\n <>\r\n {ClaAreaDepartamento !== null ? (\r\n \r\n \r\n setEsEditarCelda(!EsEditarCelda)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n onCeldaClick(e.value)}\r\n optionValue=\"ClaCelda\"\r\n optionLabel=\"ClaveCelda\"\r\n errors={errors}\r\n />\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n ) : (\r\n setEsEditarCelda(!EsEditarCelda)}>\r\n \r\n
\r\n
\r\n )}\r\n \r\n )\r\n }\r\n \r\n {ClaMaquina === null || EsEditarMaquina ? (\r\n <>\r\n {ClaCelda != null ? (\r\n \r\n \r\n setEsEditarMaquina(!EsEditarMaquina)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n ) : (\r\n <>\r\n {ClaMaquina !== null && ClaCelda != null ? (\r\n \r\n onMaquinaClick(e.value)}\r\n optionValue=\"ClaMaquina\"\r\n optionLabel=\"NomMaquina\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n setEsEditarMaquina(!EsEditarMaquina)}>\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n {Causing === null || EsEditarCausing ? (\r\n <>\r\n {ClaMaquina !== null && (TipoPreguntaPorMaquina === 1 || TipoPreguntaPorMaquina === 2) ? (\r\n \r\n \r\n setEsEditarCausing(!EsEditarCausing)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n ) : (\r\n <>\r\n {Causing !== null && ClaMaquina !== null ? (\r\n \r\n SiConfirmallegadaClick(e.value)}\r\n optionValue=\"IdCausing\"\r\n optionLabel=\"NomCausing\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n />\r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n setEsEditarCausing(!EsEditarCausing)}>\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n {\r\n ShowResponsableCheckIn && \r\n (\r\n <>\r\n {\r\n EsEditarResponsableCheckIn ?\r\n (\r\n \r\n \r\n setEsEditarResponsableCheckIn(!EsEditarResponsableCheckIn)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n setEsEditarResponsableCheckIn(!EsEditarResponsableCheckIn)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n ConfirmarLlegadaResponsableCheckIn()}\r\n label={t('downTime:ConfirmarLlegada')}\r\n className=\"p-button-success no-border p-mr-2 rounded-button btntablet\"\r\n style={{ marginRight: '.25em' }}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n setEsEditarTipoAndon(!EsEditarTipoAndon)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n \r\n {TipoAndonList.length >= 1 ? (\r\n showActiveRows(TipoAndonList).map((element, index) => {\r\n return (\r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n ) : (\r\n <>\r\n {(Causing !== null || ClaTipoAndon !== null) && TipoAndonList.length > 0 ? (\r\n setEsEditarTipoAndon(!EsEditarTipoAndon)}>\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n\r\n \r\n {EsEditarTipoParoAndon ? (\r\n <> \r\n {ClaTipoAndon !== null ? (\r\n \r\n \r\n setEsEditarTipoParoAndon(!EsEditarTipoParoAndon)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n ) : (\r\n <>\r\n {ClaTipoAndon !== null ? (\r\n \r\n onTipoParoAndonClick(e.value)}\r\n optionValue=\"ClaTipoParoAndon\"\r\n optionLabel=\"NomTipoParoAndon\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n setEsEditarTipoParoAndon(!EsEditarTipoParoAndon)}>\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n\r\n {EsEditarRazonAndon ? (\r\n \r\n \r\n
\r\n {ClaTipoParoAndon !== null ? (\r\n <>\r\n \r\n setEsEditarRazonAndon(!EsEditarRazonAndon)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n ) : (\r\n <>\r\n {ClaTipoParoAndon !== null ? (\r\n <>\r\n \r\n onRazonAndonClick(e.value)}\r\n optionValue=\"ClaRazonAndon\"\r\n optionLabel=\"NomRazonAndon\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n setEsEditarRazonAndon(!EsEditarRazonAndon)}>\r\n \r\n
\r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n\r\n {\r\n ClaRazonAndon !== null ?\r\n (\r\n <>\r\n {\r\n ClaTipoAndon === 1 || ClaTipoAndon === 5 ?\r\n (\r\n <>\r\n {\r\n EsEditarComentarioRazonAndon ?\r\n (\r\n \r\n \r\n setEsEditarComentarioRazonAndon(!EsEditarComentarioRazonAndon)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n setEsEditarComentarioRazonAndon(!EsEditarComentarioRazonAndon)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n ) \r\n :\r\n (<>)\r\n }\r\n \r\n ):\r\n (<>)\r\n }\r\n\r\n {\r\n ClaRazonAndon !== null ?\r\n (\r\n <>\r\n {\r\n ClaTipoAndon === 1 || ClaTipoAndon === 5 ?\r\n (\r\n <>\r\n {\r\n EsEditarNombreEmpleado ?\r\n (\r\n \r\n \r\n setEsEditarNombreEmpleado(!EsEditarNombreEmpleado)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n setEsEditarNombreEmpleado(!EsEditarNombreEmpleado)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n ) \r\n :\r\n (<>)\r\n }\r\n \r\n ):\r\n (<>)\r\n }\r\n\r\n\r\n {\r\n ClaRazonAndon !== null && IdReporteAndon !== null ?\r\n (\r\n <>\r\n {\r\n ClaTipoAndon === 3 || ClaTipoAndon === 4 || ClaTipoAndon === 5 ?\r\n (\r\n <>\r\n {\r\n EsEditarResponsableResuelveProblema ?\r\n (\r\n \r\n \r\n setEsEditarResponsableResuelveProblema(!ResponsableResuelveProblema)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n setEsEditarResponsableResuelveProblema(!ResponsableResuelveProblema)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n ) \r\n :\r\n (<>)\r\n }\r\n \r\n ):\r\n (<>)\r\n }\r\n\r\n {\r\n IdReporteAndon > 0 ?\r\n (\r\n <>\r\n {\r\n ClaTipoAndon === 1 || ClaTipoAndon === 5 ?\r\n (\r\n <>\r\n {\r\n EsEditarSolucionAndon ?\r\n (\r\n \r\n \r\n setEsEditarSolucionAndon(!EsEditarSolucionAndon)}\r\n className=\"p-button-rounded p-button-danger\"\r\n />\r\n \r\n \r\n ) : (\r\n <>\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n :\r\n (\r\n \r\n
\r\n \r\n setEsEditarSolucionAndon(!EsEditarSolucionAndon)} className=\"Tablet-Field-Read-Only\">\r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n ) \r\n :\r\n (<>)\r\n }\r\n \r\n ):\r\n (<>)\r\n }\r\n \r\n {IdReporteAndon > 0 && EsTipoConfirmacion !== 2 ? (\r\n <>\r\n {IdFixProblem === null || !EsEditarFixProblem ? (\r\n <>\r\n \r\n onIdFixProblemClick(e.value)}\r\n optionValue=\"IdFixProblem\"\r\n optionLabel=\"NomFix\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n />\r\n
\r\n \r\n setEsEditarFixProblem(!EsEditarFixProblem)}>\r\n \r\n
\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n {IdFixProblem === 0 ? (\r\n <>\r\n \r\n {ClaTipoAndon != null ? (\r\n
\r\n \r\n \r\n \r\n SendAlert()}\r\n label={t('downTime:SendAlert')}\r\n className=\"p-button-success no-border p-mr-2 rounded-button btntablet\"\r\n style={{ marginRight: '.25em' }}\r\n />\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n onScrollUp()}\r\n className=\"p-button-rounded icon-style\"\r\n />\r\n
\r\n \r\n onScrollDown()}\r\n className=\"p-button-rounded icon-style\"\r\n />\r\n
\r\n \r\n )\r\n }\r\n \r\n \r\n );\r\n};\r\n\r\nexport default DonwTimeDetail;\r\n","import FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport PageContent from 'layouts/PageContent';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { React, useState, useRef, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport DonwTimeDetail from './DonwTimeDetail';\r\nimport queryString from 'query-string';\r\nimport { config } from 'utils/config';\r\nimport { callApi } from 'utils/utils'; \r\nimport PrincipalHeader from '../Common/Header/PrincipalHeader.jsx';\r\nimport { useHistory, Link } from \"react-router-dom\"; \r\nimport HeaderTablet from '../Common/Header/HeaderTablet';\r\n\r\nconst DownTimeScreen = (props) => {\r\n const {t, i18n} = useTranslation(['downTime', 'common']); \r\n const params = queryString.parse(props.location.search); \r\n const {IdCelda, ClaAreaDepartamento} = params;\r\n const homeScreenLink = useRef();\r\n const [ClaveArticulo, setClaveArticulo] = useState(null);\r\n const [ClaArticulo, setClaArticulo] = useState(null);\r\n const [NomArticulo, setNomArticulo] = useState(null);\r\n const [Cajas, setCajas] = useState(null);\r\n const [ClaTurno, setClaTurno] = useState(null);\r\n const [NomTurno, setNomTurno] = useState(null);\r\n const [ClaAreaProduccion, setClaAreaProduccion] = useState(null);\r\n const [NomAreaProduccion, setNomAreaProduccion] = useState(null);\r\n const [NomCelda, setNomCelda] = useState(null); \r\n const [OperationCheckInList, setOperationCheckInList] = useState([]);\r\n const [ClaveCelda, setClaveCelda] = useState(null);\r\n const [ClaCelda, setClaCelda] = useState(null); \r\n\r\n useEffect(() => { \r\n OnloadDownTimecreen(IdCelda);\r\n }, []);\r\n\r\n let IsNewHomeVersion = false;\r\n let ClaMaquina = null;\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n IsNewHomeVersion = params !== undefined ? params.isNewHomeVersion : false; \r\n ClaMaquina = params !== undefined ? params.ClaMaquina !== undefined ? params.ClaMaquina : null : null;\r\n }\r\n\r\n const onSubmitDowntime = () => {\r\n homeScreenLink.current.click();\r\n } \r\n\r\n const OnloadDownTimecreen = (pIdCelda) => { \r\n setClaveArticulo(null);\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Operations/GetOperationOnloadDownTime?IdCelda=${pIdCelda}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n const operationDownTimeHead =\r\n response.data.OperationDownTimeHead.length > 0 ? response.data.OperationDownTimeHead[0] : {}; \r\n setNomArticulo(operationDownTimeHead.NomArticulo);\r\n setClaArticulo(operationDownTimeHead.ClaArticulo); \r\n setClaveArticulo(operationDownTimeHead.ClaveArticulo); \r\n setCajas(operationDownTimeHead.Cajas); \r\n setClaTurno(operationDownTimeHead.ClaTurno);\r\n setNomTurno(operationDownTimeHead.NomTurno);\r\n setClaAreaProduccion(operationDownTimeHead.ClaAreaProduccion);\r\n setNomAreaProduccion(operationDownTimeHead.NomAreaProduccion); \r\n setNomCelda(operationDownTimeHead.NomCelda);\r\n setOperationCheckInList(response.data.OperationCheckIn);\r\n setClaveCelda(operationDownTimeHead.ClaveCelda);\r\n setClaCelda(operationDownTimeHead.ClaCelda);\r\n });\r\n };\r\n\r\n const subHeader = ( \r\n \r\n
\r\n \r\n \r\n {t('visitLog:Welcome')} {Ubicacion.NombreUbicacion}\r\n
\r\n {moment(CurrentTime).format(\"MMMM Do YYYY, h:mm:ss a\")}\r\n\r\n \r\n onClickStarSurvey()}\r\n className=\"light-green no-border p-mr-2\"\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {t('visitLog:Welcome')} {NombreUbicacion}\r\n
\r\n {moment(CurrentTime).format(\"MMMM Do YYYY, h:mm:ss a\")}\r\n\r\n onClickStarSurvey()}\r\n className=\"light-green no-border p-mr-2\"\r\n />\r\n
\r\n \r\n {moment(rowData.FechaEntrada).format('MM/DD/YYYY')}
\r\n \r\n );\r\n };\r\n\r\n const FechaSalida = (rowData) => {\r\n return (\r\n <>\r\n {moment(rowData.FechaSalida).format('MM/DD/YYYY')}
\r\n \r\n );\r\n };\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed\r\n ? 'pi pi-chevron-down text-white'\r\n : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n const NomTipoReunionTemplate = (rowData) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {rowData.NomTipoReunion}\r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n \r\n onChangeUbicacion(e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('common:From')}\r\n onChangeFechaInicio(props, e)}\r\n errors={errors}\r\n />\r\n {t('common:To')}\r\n onChangeFechaFin(props, e)}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showActiveRows(OperationCheckInList).map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CheckInScreen;\r\n","export default __webpack_public_path__ + \"static/media/checkin.827e121c.png\";","export default __webpack_public_path__ + \"static/media/checkout.a4aa0466.png\";","export default __webpack_public_path__ + \"static/media/alert.1062d174.png\";","export default __webpack_public_path__ + \"static/media/break.ff9f3128.png\";","export default __webpack_public_path__ + \"static/media/lunch.348a32b7.png\";","export default __webpack_public_path__ + \"static/media/material.413e966d.png\";","export default __webpack_public_path__ + \"static/media/scrap.69198b78.png\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMJ0lEQVR4nO1defAdRRFOgAByKUJQMFCGKIEKAaxQYOGBYCxRQyFoVIxiwNJQeCFKBSw84g3FIUrEKAqKCAYwFcFSDKkYUZEYKASMKERKhahcIh6Igm1/NfvIprd3dmfP9970V9V//H470z3T873ZnnMnTDAYDAaDwWAwGAwGg8FgMBgMhglENIXlXJbbWB5gebhFeZDlDpYvsDy377pHD26Ew1keoX7wd5bX9O2DaMHO373Hxh/gnyx79e2LKMGO/1zPjT/A1/r2RZRgx68TDfEYyzKWpS3K1Sz/EHbv7dsXUYId/5BoiMs7snuhsPtkF3YNAuz4v/bRFZMbcWyCLuwaBIwAkcMIEDmMAJHDCBA5jACRwwgQOYwAkcMIEDkUAtzJsqQDuc0IMARQCNAb+vZFlCAjQNwgI0DcoCwB7qF2l4IH8hsjwBBAIYCNAmKCESByGAEihxEgchgBIocRIHIYASKHESByGAEihxEgcowTAVjF3ixnsHx2hGQhy25N+LSq08aCAJx9OrlDpqOIDSzPbMq3oY4bFwKc3kFDtYk3NuXbUMeNCwGO7aKVWsRBTfk21HGSAKtY5nYg10oP1KzHZiyLyV04MUrAjSmnNdWeVRwX9YYQNvstUYz/sDytId3vUao5tQndjYGMAL8TxbipQd1GgBD0UPddlGKc36D+kSTA49TuDWEDeWwICDBHaaA3N6h/JAkwkqOAimX4ZJsNZATw2x0GAlwvivCXhvUbATx2eyUAuWGjvB5vWcM2jAAeu30TYIbSOAsbtmEE8NjtmwBvVxrn0IZtGAE8dvsmwJeF+SdYtmvYhhHAY7dvAvxSmL+lBRtGAI/d3gjAprZl+a8wv7gFO0YAj90+CXCY0jBvbcGOEcBjt08CnKY0zPNbsGME8NjtkwDLhGl8wGJiC3aMAB67fRLgPmH62pbsGAE8doMJwEkmsxzDsk8Nu3sojXJGVX0FtowAHrtBBODHe9HGq+0xZj+uot25SqPMrlaLQlsjSYDLWHbsQL4YSIBzRPJ1Fesr9TzJskM17xXaGkkC9IaCcn5dJH+gYn1/IvTcXs1zpWxpBKgLtNftLOezvLSJQkZDAM4zieVfQs9Xqnuv0F4bBJBYxfKCOoWMiQAHKmZPqOy8YntdEAD4N1WMiWIjwLsVs5VHFCXsdUUA4H8s86oUUhLgSpY9O5CvyhoUlLMJAnxD6EDdNwt2Wnl7GgHwsaw6ZwkvZlmv6AWwz3K/0EKOyjCwCQLIuwmvq16DUvZaGwWQmw+5X9F/faiiKAjA6Xci102msaheLQpttjoMZF3TyH3nWeKQECWxEOBViqOOqFeLQputzwOwvjcoNs4OURALAT4m8qM3aPVIdkcEmMjyB2Hj5hAFsRDg+yL/r+vVoJTNTmYCKXu+sfz29hgIQO5X8rDIf3H9WhTa7YoA8gPg5T/DGwkBpisNsSD1/BUsJ7BMq1MnxW5XBKi+tB4JAY5TGmK/5NlnxP9vTBruWTXrtz/LD40A+Xa7JIBceXyUZXNyrwb5GfsBsOSMuAHk2T7AFnqb7+boNAKk7HZJgJtF3pWpZzKC1oAFJKy+beGxgaNmuPHr8QJdRoDEbicE4HTbkLv1I41PpZ6/kvTJFA0n59jYgbKjDA3wdeNXwoX6UmYedwK8RGmII0UakOTOEg14kaJ/Z1I+gZcCephPkFuJ3DzMS+UQ6kuZedwJ8EGRDxNAk0Wa3cjtDErjEfE/5JPEeTplXy8DYPvaiSxbhnsnDEYAf74rRb67lDTacG0+uQ2kHyB3+9gRIg9OF92Q0/grWHYJ80h1NE0ARMjrOxB5Nr8tAsgg71IlzY9FGgRyOxboXSrLn+Aiaqmr95SlUQL0hoJyBhOAXNcucZJIsytlu3/vOQFyk0YasMehtf0FnvIYAXLyHKOYmSXSvFdJM9+j83mkX0aJ8nXe+EmZjAA5ec4UeXCZ9CSRRr7Hc7t/chNHclcxgFFAI5dLVgE1TICfsryzA1kRUmiqRoDVIs9q8fw5lO3+v+fRpx0qwUxia/sKy4BsFKCm34Ky07xnijSlu3/+/5YsdynpTwyufMMwAujpD1Aa62iRJqT714aKt1LDET+5WUVsmkVwunXJPEaAJA3G5sezXMpyr9Jg6xM9r2OZSiW7f3ILR9qawWEN+AG3lX2Y3KtX3p6KBSmcAsJi1sso5wh7qC9l5pEnALlfzVlKXXzQFm3m59g+Ukl7Tc36z2JZTtmNqj6gxzmqri9l5pEmQNI48rx/Ffi6/8y3DRiHV6w3epOPUPaOohBclS4rxUoAlvdTthuvipU5djEd/IRIewdVuFGE82zN8oOGyovFq6lVfCkLNaoE8HWdaLAfsZzNcjLLqeT2za315MOScWabOP/vXUra4Mif82xF/iVjTI1jevnj5AJO9BKYWdRimQEQ0yBYjJIAGhBEIRaY7NGD4O8S0nsOzPDtLdJfI9KAXDtXqO95OWX+PcvbKGfVkNzk02yWNTn5ETx+Xv4zpGDjQgB8+WPfAPtwqtwpDGBhaGKSBr9aOZdwQ4W6IoLXCPcdlm1L6gAR0DtoPVjQwppUPA4EuIcqbOLkPPuy/E3RNy95rt0nGHyhNOl7BjBUrRJHvM/jh1K+lAolAXBl2toO5M9KuWenJP2FsXeQ262rAWfjZ4Y6MlX/1yo61yTPtJnCAwP1v1zRAUKUmuTJ0XlJji+eQoiyoVkMqojzqjoy5QMtMsdM4oXif+jGtwnUfbmiu9at5OS+dfSozykhykaZAGiQ2pssyb2jJbATaJX4392BevHelj3djXXLm+iWp4E2QYiiUSaA15nkFnBwKvhQ8rxvyS0cPSh0o5uWv7JfUdiKp3YlrTeG4OfPZjmaZXpBOo20T8Hf6psqwrWpvrHmMCP3hm9yjZ+OG64o8IP8flBbyL2TkJ/NpI0RPYabb/Gk3d5npFzrO0XTSBlGkBsTY5gEcgz28WEGbBDEYWPEikQwVbo0kW+yLEnkAtp4tQm+0LUwEUzMDH4lCPDSAV86EMRW6lmJHKSUMfeGT3Ln/SRyD2VQ9vqYtjDDU4bFIu2tBW2XGweUbXyMc9cq+XGVSunjUF2A3BZsidwbPihLGPyifBNE3y7ZgHWRe6UbP/u0SLvakxbxRebbiwOUdWrmtk5yEx+5LO0TSoUzBzVE+sEMGaZ5TylIq231agNzPGXAIZNbknQbyPNFcXL3JueijDNfn5MXwxZ0vxi/DrpfvCb2TAqIa15zz8i1Cbb7C1HWzB5/JQ/uBvJeBcvPt6MsuZq4LU17bZ1VUBb8sqcU+ZjcngaJBQPbRX6BAnljVhWgt0CcgOVYxAiIkvFK+Rm52ACLH4gLQCrEBF+ijTEBImTEAzg9g1jgWHIxwKvJEfAQcuSbkVQKTtF6rAMKK1vsizcpeo+vqzfHz3dTA7uIWMcVQi+GxDuFKJBXpo4qltd0JIaA64ROxAtT6uhN6b9AKfP8mjpnUnaJek2okuVNt0SPmFvDmR9V9F1VVZ+ifx/KLuD8iSoSjFzgrk2Lh10VS+7UTN7ZtlED9vu/qIIz51G2cfD3C0N1FdjRfmyYaAq6pYxcb3WZogv7FScVa9CVYl4ZQd4g4EPwh3cwggy8k3EMCu/oU8i9sxeRe4djKhLvdSxM4D2PCSW891eRiwMQzQ7mDwafjA/Z/xYKLArha6CFK2zkbg1flFOeJZUc6beHPQjamB3bzPcvqQMzhCtz6p47shhKkNvEidHE7uQCPLzTQL4XkyPfHHLkwy8U5DuJHPk+RG5CCTt/H5JeSPBzlqNIOanD/3sGuc0Xv83JiwZp9OuhKdvap2oBvMux8weTXhnykjuKhn0A2nE0oHHCjgTIze/n3e8D4LWAdyV6JtzZg15J3hSSxh+pzPCpXpkXeewDGE3hNBN6VFwwpR1ESQP1qtb1jwPI9RjahcmhgKO9iy8Nlhl7/ZrYyIqdwVt1UeahBrn5gcw5wwAghul02ptcnFV1AQ4924JiK5GB3BLqTSWdiOAPmz0P7rG8OMWEPQcbSpYZrzt88GrXvso8EiC3z+90lqvJrV7il4YNo9g9ixlJrD7u0Xc5ByA3IsHaPi6svI7cUXPEApicwtZ2rBAiqB2qxTmDwWAwGAwGg8FgMBgMBoPBMIz4P0OVQuPzS6kkAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cCFw8PA2VWt5QAABCySURBVHja7Z15kFzFfcc/vZd2VzcIIYSQAMkSMlgyEocFAtscNiZciQviOOAQmzhU5XCMc5QrTkhhCYNNEsCmcEI52CK2nMvGBQoGDDjOBoQkhBBOsAQIJIROdK20h3a1880f/Zuax/BmdubNm9nVbP+qXu3bd3VP/77d/evf1RAoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFqjdy1fiopLHAHGA2cAww2m51AXuBjcAG59zBwII6IUkLJX1d0hpJAxqcjkhaLelOSQtCCx6dTG+W9LuSXlbltF7SjZKaQ8seHcz/pKQ3lT5tknRNaOHhy/jJkh5V9eknkiaFFh9GQqCk84F/BaYO8uhOoAN4BXgL2GfXJwLTgbnAYmDyIN/ZClzrnFsZWDX0Pf8qSd1Feux+SXebMOhK+J6TdLakeyQdKPLdLklXBA4MPfP7CzCoW9KtksZX8P0Jkm6T1FOgjP4AgqFj/vlFen6HpFNSLGumpOeKjASLAkdqL/C9XYAh35LUVKWl5f0FynwrCIa1BUAhaf+rNSh7aaHVQeBM7db5sT0/wbfOk3Regve+XaAOQU9QZeY3F1DydJQ77Eu6MvL+FQnqsTKmHq8HjWE61FDg+vXAjLxrPcANzrkjZZYR1fMvLEtJ4Vy/1aU379apwKcD+6oHgFtirt3pnHujQmVT2dZH59xrwF0l1jFQpQCQdBZwRt7lTuCeIaznXcCBvGvzJM0PLEx/BLgu5tqDzrn9Q1VJ59wBYFnMrd8MLEwfABfHXHtoGNT1n2OuXRJYmCIAzJMnf1jdCawdBnVdDezOFzAljQlsTG8EmAM05l3rcM5pqCtqdejIu9yIdzsLlBIA4hrzlWFU37i6BACkCIBjY57ZPIzqG1eXYwMb0wPA2JhnDqVY3iWSKmFYnBfxuMDGdFcBadPGyPn5wBpJC0PTD08AxPWwsRWWsRxYAmQFyZOBDkmfTfCtuLp0BjamB4A9Mc9Mr1R6d879FXAlOd/AVuA7kpZJaivjczNiru0JbEyJJJ0VY3n7jxS/P0vSS3nfX1uqV5GkH8fULwSVpMigsRaxE6WdpTh5llFGq6Tv5JXxjqSPD/Jeg6TdMdFFowPn0gXB6phedlYVyvm8pMORMjKS7pDUUOD5c2Pq9XzgWPqMuTOmoe+pUlmLJG3Nn3LiQGA+iPm0NHAsfaYsiGnoA5ImVqm84yU9k1fepXnPHCOpM6Ze8wLHqsOU9TGNfVsVy2uS9A2bBt6RNC3v/u0x9VkXOFU9htwY0+A9kmZWudwZ+UKdpNmSemPqc0PgVPUY0WxRuvn0XC2dMSW1SFoVU49XqxGTEOjdjX9NAZfs+2tYhwcK1OHKwKHaMOAnBRiwtAZl31Gg7B8FzqRHbhAmTAJeBKbF3P4H4I/MdTvVYR+4D7gp5vYW4Ezn3N64aQsfft5EstxHAgaAfc65vgCAXMN+CHgKaI+5/Txwvblup8H82Xjfv7NjbncBFznnVsW8NwH4DPAJYArv9WoqhTLALuBx4LvOuWBjiDTwFUXCw3skfbUSPYGt828vIO1LUp+kywu82yjpZkm7LDlVpoJjQNIeSV8MQmY8CLqKJHI4IOleSeeUmCCiwdS73yyg5MnSoULMt++caIqkjIF0l9kvkhx99p3nJZ0cpoD3NvYifIqYaYM8uptcipgtQDamYALevPx+fIqYwUK9t+BTxKwqUqe5wE+Bk4BVwLdJ5sXUBnwWuBBvYr7UOfdS6PoxgmGR1UGa9KNS3McknSFpu/Xch8y1PcnvapN0n1kYD4wUM3PZLmHOuXecc1cDvw5sqkKdXgeucs79RhmCmItI8pVQZqR16MQ+gc65h4HTgBuB9SnU5SWT5E9zzj0SxtraUEWSrukAvgd8T9IH8bF6F+NDwgdbig0Aa2yJ+S/OufWBHUcZAPLAsA5YZ/PpGHzAxhx8suhs+NZB3p0suiuwoE4AkAeGQ/h4wrWhiUcgAIaQZgOfk3Q4wbvNwAeoUgr9AIDa6DQW4NPQJqVWahMsEwBQxVVNy1CsigIAhp4EbLBVRV/CtrgQ+GAAwNFLLwK3ER/iNhi1A0uBeQEARy9lgMPOubKFQHNFHxhpU8CIm/MCBQAECgAIFAAQqC6FwNquO73n04nA8dRGg9gLvOac6w0AGB70AeDLeLN4LQDQBTwgaZlzLhMAMPT0Prwn8vgalrkZeJicm10AQISOBxZL6k7wbqsN5+X05E34DKanF3lvkrWz8G7npXotTQRG2fkuvI7jALCSZIquugeAAy7AO5wmpYnlCMbOuRclfY74mAnwCbH+zqaINcCfGjMHo0nArfhcyK8BXzCwZYC3nXMDAQCFe/HUCkFU3gvObSkiJI41UGVHi3XOuUGzmpkzbNRZZmNawTf1DADh3blfJZlzqANOsWkkrRXCLLw3lPAu8oeHW6PV2wjwM+DPSW4M+ht8bEAa1IDfeKMZOIJ3g+sLAKgu9QP7nXMHE/TYwyn30Ca8h1IzsA14czhkXY9DaaDq0GR8YssG/Aba24ZjJQMAqkcnmTwh4E1gRwDAyAPAJJv3NyXxUQgAOFqXIz5ZxUx8wGkv8KvhWtcAgOpQmwmADui2pWkAQB307EZJpWQfGW06AIDtw3X+r8dlYDWZ3wZcBrRI+qntZVhsBXCCnb9Oirr7AIDi1ApMSZhBvJ3COn2Ac4GvWe/uB4plKzsVbyFUSgCYUGIKngGgt5wkV/VmDPo4lUUGTaVwVPN069XteJVxMZplQOm1FUAlmdRmAQ8yuMdyP7AV+Lmkx/HBtxppI8A43rvvcTXkpYZBVgCn4k25O4E3Uii7lN8k4EzgIuBq4G6bqvpGEgAOVShwHUflzh3jbYRw+FD4NACwl9IMXGOsE3zEViJd+EipEQEA4Y1BS0ieJOpLwG9VWI+JNl0In+TqnQq/twO4owRgZ0eea/Db/54D3CRpXbFUO/U2AhzE286TGIPaSMfN6kSTFTKkYwI+BKwoxR/AoptW4a2a5wAfBc6xqUBBD1ADPQE+K0qrCW2/NOGsNlKwdxR9Gvh3vAl6AnBeEcE2AKAKy+r59vcg8Hqa7lslgqAPeBbvetZsgHQBALXTQ5xmPe5tYLuk0bYtTi3b+iB+Q01nQqEbKTLAUNMUcp7Fm234/5KNCi9IegZvGDpQyK9f0igDUaWuabJ6NI6kZeBQ0wxbBQzgnUDH4F3MZgCX43MqPgs8JukZ59yuPOZPBm4APkWN8hQEAKRLJ5seoAevAt6DT6J5ok0Ps+yZX8NH+CzNpsqTNAv4E2P+MdaDu/F5lwcCAIb/CqDV1uEt+ACODc65bZKWmF5gvjG1Ce8osgg4FuiSNBX4oo0WrSbBrwEeAX5u00kAQAnUCLRJOpLg3fYK26OdnAl4b4RpMkEMWxauxdscVgC7LAbgFpseWk1x9BBe//9qmoGgIwEAi4H7Ew6ZDdZLk0rr42wEwJif3Sl9Id48LOAx4Hbr+Tudc72Srrd5v92Y//fAvZZsM8gA5SyB8fsYVBIZ1EDyKN8TjNHgPYC6JLUbANoNEGssMqjTpo0zgd+393qA7wL/VCvm1+MI0J9t3IQ0Bm8TSELZKKCMCYDdeL/AhXZ/C5Gs6pLGAdfbqJOx0eE+51xNvYfqzRj0LPCANX65NIrcxlNJaLaBp5PcPgqn2xIQfDr87ZHnF+L3XGjGWwwfrKawN1JGgK3AoxUYgy6gzLhCs/9PJhcFtA9vwGkHzrdR4Qg+rLvb3hltzJ9BzrvoicEcOMzWMA4Ya2DLWFmdSTOvh2VgZUu/mXgvpIvsyKaMuQW/pd6FkR6+NmIXeJ8934CPGXx4MMcNUxJdht+PYb7pGwbwKuf/kfQYsLJc76MAgGTUJulq4Gbr5e2R1UOLMeqSSPuu592xAYvI+Qz8wqaHYsw/18q6Em/hywqrwjuffAi4CvhHST8MAKg+XWpD+DxjxIDN7922lp9sPd/hI4N2Y/H+NvwvtqnhIPBUsSlL0oeBvzRAZcvabbJGM96Lqc3kjVut7BUBANVVNp1rbZex3v0oXnO3z+boBdZbzzQmfRi4WNKTeFXwfPvWBpsqCjF/BvCHeBcvbCr5T+C/8R5Co/BOsJ+wkWgiXps4jmS7px6V8/AZknbYtnHLKtw27puFto2TdKNdz1JG0qOSLs4PFrEAkkWSltv3MpJ+IOkESZ+0DTj7bXf0UYWES0lfsc0sJekVSb9j2/HkPztH0rciu7vuldRt50/afswjYgSYCXxGUhL1aQs+v5CzOXampB7rwY2m5WuILDn/F/hb4L/yTbvOuQFJK22EONnm6ItMKDzFeu5hWxkUEtpmWM9usunla8DyOCHPObdB0l14I9K1JieMyCngbHzuvqQ0ygAwGvhrW75ldyM/xq5jWrvvA78oZNd3zknSKmC51Wky3kev1b7XizcYFcr3tzACyKdtpVBQwnfOvSnp+zYVTB9pAMhYQzXbkQYV88XfCTwddfeyoXwysDtrwDEQPGP6iTl4R80Wq2sPMFnS/Dh+2mgx1oS9p6LJpcy7aArQlReitgq/c9uIAkA3PgHDceTy8WXsUOTI/z96LRMBEuSMSdF3ILdn8lY7sgxxwKfx+yY+Iem+SD6AbREAzI0IZ8ea1F7IcDXNnj0QXUJaWR8z4fCXkr7unNtrt7Nb8o2oZeBevBWtwRj2vEnkfTaE98f87S9yr9DfE4C7bU7v5N0Jn8bjPX4+Zr12GTl38CPk3M1bI++0UprXT759o8VGkkttivihtUFW9ug0UDXWPQBMDXutzXvO0L8UeDLau9NIziRpGrmAk3zfgew+iXPxmUO78paNYyLM3F1ikeNN5miKyB7Zb2wE/s8E0W15U0NUKbXbpqu6HQHeD3yenAtVvwlPs0zI6gV6JfVFevORvPNSr2HS+Bnk8v/ssJ53RNL9wI/xdv6eSB2Pw6uHMXDcPhhTDDQ32Zp+rP2eVVZWRtK/AS8A3Xl+hePsWYdXEf8FPjllX70CYG5E6ncGiK9ElmpEzvtt2O7POy92LfoXclHBU/A5iV/OSvHOuf3ERxYtjqh9XzThsaeEEec04Dpj6oWSHslqDE34jMs6Mo/crmebrKzt9awEukDSBlO01Jo6bMPsYvU7XdLPrH57JX2qjN92uqQX7N1Nkq4zAbDQ8+Ml3WuKowFJS8xPsa6FwNX4fP0LbJ5sKfEYZcvF7HmLDbtukCM7mrSbcufLku4AXnbOHYkwo8mk/ltMPsn6Kjxbxm/bBDxuI9x0fMLo/ZI6nHPdefP+VOD38K5lzSYfPFKKP6Grk5Gg2cDcEDkaB/mbPc/+34w3qrRGjraY8/H4CNyZJmh2mFKow4S/Nryt4LdN+9dossOfAT8oRyCVNAe4B29yFt6pdDnwBN7lvMmmvevwOQHG2DS0BLi71mFp9QAkJ6nBdPlNdjRLapE0SlKrpDGSbpa02YbnAUn7JW2UtFrSryTts+uStFXSF0oZjgvU5zL77oCVd0jSG5LWSHpZ0m4b9jOSOs2eMTVws7pAaZf0B5LWRow1+dQvaZ2kP06YsygKgsslrTAjUhwNSHpL0jcknVTO911gZ2LGNAFn4c2+F+CNN+02DWwBnsObiVdX6ttv1sbZeOPQR02+GG8rlB2m+FqBN0x1BgDUFgijjPlTTEboNaZsTjs9bETgO4mcr+Ee4I0kfpAA/w/8cTISnvd/cgAAAABJRU5ErkJggg==\"","export default __webpack_public_path__ + \"static/media/checklist.f385162a.png\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAJZCAYAAABLM+ZyAAAAyHpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbDsMgDPvnFDsCeQDhOHTtpN1gx59pUmlUs0QS7NYkScfn/UqPCSZNWprVXmsGtGvngcKyY5yRsp7xxPbMHOzCp9JDYFCCLC5Y9UwXHz9cmQaq8mNkzxC2Vejqme1mFA/J7Gi2sIdRDyNhFygMho+Va7e2jHbkFeYnzSDNx7tM7ndt2N5eQArzISQZUcS8AZlHkwwUDZGk4UMCOaQgD1QcnWAh//Z0IX0BisRZjOEGaO8AAAGFaUNDUElDQyBwcm9maWxlAAB4nH2RPUjDQBiG36ZKRSoiZhBxyFAdxC4q4ihVLIKF0lZo1cHk0j9o0pCkuDgKrgUHfxarDi7Oujq4CoLgD4izg5Oii5T4XVJoEeMdxz28970vd98BQqPCNKtrDtB020zFY1I2tyqFXhHCAM1xiDKzjER6MQPf8XWPAN/vojzLv+7P0afmLQYEJOI5Zpg28QbxzKZtcN4nFllJVonPiSdMuiDxI9cVj984F10WeKZoZlLzxCKxVOxgpYNZydSIp4kjqqZTvpD1WOW8xVmr1FjrnvyF4by+kuY6rRHEsYQEkpCgoIYyKrARpV0nxUKKzmM+/mHXnySXQq4yGDkWUIUG2fWD/8Hv3lqFqUkvKRwDul8c52MUCO0CzbrjfB87TvMECD4DV3rbX20As5+k19ta5Ajo3wYurtuasgdc7gBDT4Zsyq4UpCUUCsD7GX1TDhi8BXrXvL61znH6AGSoV8s3wMEhMFak7HWfd/d09u3fmlb/fgC/PXLFVyGx7gAADlVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4KIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgIHhtbG5zOkdJTVA9Imh0dHA6Ly93d3cuZ2ltcC5vcmcveG1wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICB4bXBNTTpEb2N1bWVudElEPSJnaW1wOmRvY2lkOmdpbXA6OWQyNWU5YTktOTJiMC00OWFjLThiOTctZjkxNTIyZDA1ODdkIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmI3MGI3NWNkLTRkZDctNDYyYS1iMzY4LTQwZjM3Njk5ODM4NCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjNkYzJiNzU4LWJjOGMtNGVmNi04NzU4LTQ5ODRiZTEyMDZlNSIKICAgZGM6Rm9ybWF0PSJpbWFnZS9wbmciCiAgIEdJTVA6QVBJPSIyLjAiCiAgIEdJTVA6UGxhdGZvcm09IldpbmRvd3MiCiAgIEdJTVA6VGltZVN0YW1wPSIxNzIxMjM4NjgzNzY5ODUxIgogICBHSU1QOlZlcnNpb249IjIuMTAuMzgiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0OjA3OjE3VDEyOjUxOjIyLTA1OjAwIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyNDowNzoxN1QxMjo1MToyMi0wNTowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExZDlhZTk4LTcwYzQtNDcwZC1iNjIxLTNhMDQxZTg2OTYyYiIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNC0wNy0xN1QxMjoyNjowNiIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNWE1ODY5Ni00YjA2LTQwMTAtYTEyMi0zOTRhNzViMjcxNTQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDctMTdUMTI6NTE6MjMiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+A8TMgQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+gHEREzFwYa9hUAAA/YSURBVHja7d3LchtXDEBBQsX//2V4ET9UjGySmhcu0L1MUomEYOYejmjqdgMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICOwgjel5lpCgDAqdEWodsEr9AFAIQvglfsAgCiV/AidgEA0dvHhxEAACB4AQBgUR6FP+HtDABA2ZDztoaXeMILAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AACMdzeCY/hcvOsd/RnKnf4fHzkrczIrs3L92anrvz/BC2J39IsZs3LY2ik7ZVYeUglecGN0gJiVnbJTZuX6Q/CCA8Sseh4gZuX6s1N2CsELboxmZU5mZafslFkheMFh6wAxq54HrVm5/uwUghccIGZlVuZkVnbKrBC84LB1gNgpszIrc7JTCF5wgDhAzMr1Z05mJXQRvIhdN0aHrZ2yU2ZlVmIXwYubogPEnOyUWbn+7BSCFxwg5mRWZuX6s1NmheAFh60DxKzMyazMyvWH4AUHiAPErMzJrMzJTiF4wQFiVg5bO2VOZuW+juBF7LopOkDslFm5/sxK6CJ4cVN0gJiTWbn+7JRZgeDFYWtW5mRWdsqsXH8IXnCAOEDMyqzMyU7ZKQQvOEDMymFrTmZlVq4/BC84QBwgdsqszMqczArBi9h1U3SAmJXrz06ZldhF8OLG6AAxKztlp8zK9QeCFweIWZmTWZmV689OgeDFAWJW5mRW5mSnzArBCw5bB4idMis7ZVZ2CsELDhAHiFm5/szKnMwKwYvYdWN02NopO2VW5iR2Eby4MTpAzMqsXH92yk6B4MUBYlZmZU52yqxcfyB4cYA4QMzJrMzK9WenQPDiAHGAmJVZmZNZmRWCFxy2DhA7ZafMyqzMCcGL0HVjdIDYKbNy/ZmT2EXwInYH3hTNymFrp+yUWYldBC9ujA4Qs7JTZuX6s1MgeHGAmJWAs1OuPztlp0Dw4gAxK3MyK9efWbn+QPDiAHGA2CmzslNmZU4IXnCAmJXD1k6ZlRdQYhfBi9h1Y3SA2Cmzcv3ZKbGL4MWN0QFiVmbl+rNTdgoEL26M5mRW5mSnzMr1B4IXB4gDxJzMyqxcf3YKBC8OEAeIWZmVOZmVWYHgxWHrALFTZmVOZiV0EbwIXTdGB4idMivXnzmJXQQvboztb4pm5bC1U2bl+hO7CF7cGB0gZmWnzMr1Z6dA8OIAMSuzMic7ZafMCgQvDlsHiDmZlYAzK9cfHMyCX3yTAQDwYuVYH0YAAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AAAIXgAAELwAACB4AQBA8AIAgOAFAADBCwAAz92N4BgRERW/rszMTt8P9glg8v2U13jCCwCA4AUAAMELAACCFwAABC8AAAheAAAQvAAACF4jAABA8AIAgOAFAADBCwAAghcAAAQvAAAIXgAABC8AAAheAAAQvAAAIHgBAEDwAgCA4AUAAMELAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AAAgeAEAELwAACB4AQBA8DYUEWEKAIBGEbwAACB4veICAEDwClgAQGtoE8FbdxEtIACgNWq5G8H7i5iZafEAgLNaQ28I3rKvwAAAtMb1vKUBAADBCwAAghcAAAQvAAAIXgAAELwAACB4AQAQvEYAAIDgBQAAwQsAAPX41cKU8tXvDud9fiUlAAheRO6YmYpfAAQvCN0Rcxa+AEzlPbwAAAhe2Junu2YOAIIXAAAELwAACF4AAAQvAAAIXgAAELwAACB4AQBA8AIAgOAFAADBCwCA4AUAAMELAACCFwAABC8AAAheAAAQvAAAIHgBABC8AADQURjBLJmZpsDlN54I9x4ATuMJLwAAghcAAAQvAAAIXgAAELwAACB4AQBA8AIAIHiNAAAAwQsAAIvy244G8tvWuPSm47esASB4Eb2IXQAQvIhexC4ACF6EL0IXABxEiGzxCQCt+ZQGAAAELwAACF4AABC8AAAgeAEAQPACAIDgBQBA8BoBAACCFwAABC8AAAheAAAQvAAAIHgBAEDwAgAgeAEAQPACAIDgBQAAwQsAAGcKI+AqmZmmcOLFHuF6B0DwgugVuwAgeEH4Cl0AELwwM8AFJgDU4w+tAQAgeAEAQPACAIDgBQAAwQsAAIIXAAAELwAAgtcIAAAQvAAAIHgBAEDwAgCA4AUAAMELAACCFwAAwQsAAIIXAAAELwAACF4AABC8AAAgeAEAQPACACB4AQBA8AIAgOAFAADBCwAAghcAAAQvAAAIXgAABC8AAAheAAAQvAAAIHgBAEDwAgCA4AUAAMELAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AAAgeAEAELwAACB4AQBA8AIAgOAFAADBCwAAghcAAAQvAACCFwAABC8AAAheAAAQvAAAIHgBAEDwAgCA4AUAQPACAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AAAIXgAAELwAACB4AQBA8AIAgOAFAADBCwAAghcAgKnCCOgqM3OZCzHCtQgAghd6xq7oBQDBC+1jV/QCgOCF9rEregHgGP7QGgAArXmSRBsdnu7+vjA95QWA3XjCCwCA4AUAAMELAAAFeZ8grfiUBgDgkSe8AAC05kkS7fjFEwCA4EX0il0AELwgfIUuAAheEMriFQCK84fWAAAQvAAAIHgBAEDwAgCA4AUAAMELAACCFwAAwWsEAAAIXgAAELwAACB4AQBA8AIAgOAFAADBCwCA4AUAAMELAACCFwAAyrkbAfyRmWkKACB4QeACAIIXhC4AIHhB5AIAgheELgDwfT6lAbELALTmCS9CFwBozRNexC4A0JonvAhdAKC1MALE7k4XU4TrCQAK8pYGxC4A0JonUojdPS4kT3cBQPCC2AUABC8sFLtCFwAELywdu4IWAHrwsWQgcgGg9/luBKzkiKe7IhcABC+0jF2hCwAz+BxeZr7SE7sAMOfcNwJWsOfTXbELAIIXWsau0AWAmbylgRmv7MQuAMztACOgsj2e7opdAJjNE14AAAQvrMrTXQBADFDW1rcziF0A4HbzhJeur+TELgAgeKnsiF8hDAAIXmjB010AQPACACB4AQCgAz/6pZwt79/1dgYA4JEnvAAAtHY3AljD3558e6oNAP/moGSZsHu6zI3D75WZCF8A+Jq3NECTFwA+uxgABC+0jV3RCwCCFwAAwQtU4mktAAheAAAQvAAACF4AABC8AAAgeAEAQPACAIDgBQAAwQufdfrcWp/BCwCCFwAABC8AAIQRUNGWH+lHRPjeAYBfPOEFAEDwAgCA4IUiVv6EA29nAADByxBb423F6PVRZAAgeAEA4G1+BEppW596rvJj/infJwBcwRNeBLOvEQAEL4hesQsAghcO4Ef1ZgQAm89KI6C6PZ+CVonDvb4nsQsAz3nCS/1XZTtGXYW3EHgbAwCc3BJGwCo6POnt+LQaAKq7GwGT4/msaPRUFwCu4wkRS4bqrhfBwdG74tcMAIIXmkXv3iG5wtcIAIIXBgbvlrA84+sSuwAgeBG9vS9YwQsAghfRK3YBAMGL6BW7ACB4QfSKXQAQvCB6xS4ACF4QvkIXAAQviF6xCwCCF7pHr9gFAMELLcNX6AKA4IWW0St0AUDwQtvwFbsAIHihXfyKXAAQvNAufEUuAAheaBfAIhcAAACAU3gKBRyu+sfDvftE/uzvp/rXd/T3Y6/tdfV5+6lefXcjACbGADV2Y7VQsNe8shcCWPACQhf+ty/VA8Fe03GvBS+AIEAg2GuEbxMfRgCIAirtUoV9qvJ14B6J4AXcyLFXdho7jeAF3MCxX3Ya90zBC+DGzfg9s9PYM8EL4IZN232z07iHCl4AN2ra7p2dxr1U8AK4QQO4pwpeAFgxDgQHCF4AYQDg3ip4ATdkWHEX7TUIXgAAFnshh+AFQBwIDBC8AMIAwL1W8AIAgOAFgKNseRrmSRoIXgAAELzADJ6EAbjnCl4AABC8AAAgeAEAQPACAIDgBQAAwQsAgOAFAADBCwAAghcAAAQvAAAIXgAAELwAACB4AQAQvAAAIHgBAEDwAgCA4AUAAMELAACCFwAABC8AAIIXAAAELwAACF4AABC8AAAgeAEAQPACAIDgBQBghLsRABwnIuKrv56ZaTrYaziHJ7wAJ0fBs78H9hoEL8DSUfD5nxEIrLTTr+61aSF4AcSuQMBOg+AFmBEGAgE7DYIXYJko2HrACwS6xO6e1wUIXoAGUSB6sdcgeAFGRIE4wF6D4AVoHwXigKt32l7TkV88AVD00BYH2GvYhye8AAAIXgAAELwAACB4AQBA8AK0kz+ZBPYaBC9AyygQCHQOXTuN4AUQuy//dbDTIHgBlg8DgYCdBsELsHwUvHrwCwS6xO539h8EL0DjKBC92GsQvAAjokAcYK9B8AK0j4LP/w6BQKWd3muvTRPBCyB2BQJ2GgQvwIwwEAjYaRC8AGWi4OgDXCDQJXbPvG5A8ALscMifeWCLAzruWuVrDsELIAouOHjf+W8KA1bZG7uK4AUoePheeUBX//qw1/aaysIIAAfNw40xIirP4fHrm/r/6qs52Ot1d6b6dVd9rxG8gOBFGNhrBO9g3tIAAIDgBQAAwQsAAIIXAAAELwAACF4AABC8AAAIXiMAAEDwAgCA4AUAAMELAACCFwAABC8AAAheAAAELwAACF4AABC8AAAgeAEAQPACAIDgBQAAwQsAgOAFAADBCwAAghcAAAQvAAAIXgAAELwAACB4AQAQvAAAIHgBAEDwAgCA4AUAAMELAACCFwAABC8AAIIXAAAELwAACF4AABC8AAAgeAEAQPACAIDgBQBA8AIAgOAFAADBCwAAghcAAAQvAAAIXgAAELwAAAheAAAQvAAAIHgBAEDwAgCA4AUAAMELAACCFwAAwQsAAIIXAAAELwAACF4AABC8AAAgeAEAQPACACB4AQBA8AIAgOAFAADBCwAAghcAAAQvAAAIXgAABC/Ag4gIUwBwzxW8AAAgeAFgP1uehHmKBoIXAAAELzCHp2EA7rWCFwAWCwNxAYIXQBwAuMcKXgBYOQxEBgheAHEA4N4qeAFg5TAQG4hdwQvg5kz73bPXMOAeYgTAuzIzTYFuL7TsNR33mv94wgu4UWPXwF73nrkRAN/liRgdo8BeI3YFL4A4oH0U2GvEruAFEAe0jwJ7jdAVvAACgRFRYK8Ru4IXQCDQPgrsNEJX8AKIBMYEgb1G6ApeAKHAqBCw1/baFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaOEHUXUL+09hMIgAAAAASUVORK5CYII=\"","export default __webpack_public_path__ + \"static/media/Meslite.29b42302.png\";","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable no-const-assign */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport queryString from 'query-string';\r\nimport { config } from 'utils/config';\r\nimport { callApi, showSweetAlert, getSessionItem, showNotify, tracker } from 'utils/utils'; \r\nimport moment from 'moment'; \r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n CardImg,\r\n CardImgOverlay,\r\n CardTitle,\r\n CardText,\r\n ListGroupItem,\r\n ListGroup,\r\n Row,\r\n Col,\r\n FormGroup,\r\n Label,\r\n} from 'reactstrap'; \r\nimport { useHistory, Link } from \"react-router-dom\";\r\nimport PageContent from 'layouts/PageContent'; \r\nimport './CellHomeMenuScreen.scss';\r\nimport CheckIn from '../../../../assets/img/checkin.png';\r\nimport CheckOut from '../../../../assets/img/checkout.png';\r\nimport Downtime from '../../../../assets/img/alert.png';\r\nimport Break from '../../../../assets/img/break.png';\r\nimport ChangeOver from '../../../../assets/img/changeover.png';\r\nimport Lunch from '../../../../assets/img/lunch.png';\r\nimport MaterialRequest from '../../../../assets/img/material.png';\r\nimport Scrap from '../../../../assets/img/scrap.png';\r\nimport call_forklift from '../../../../assets/img/call_forklift.png';\r\nimport awaiting_forklift from '../../../../assets/img/awaiting_forklift.png';\r\nimport CheckList from '../../../../assets/img/checklist.png';\r\nimport HeaderTablet from '../Common/Header/HeaderTablet.jsx';\r\nimport PrincipalHeader from '../Common/Header/PrincipalHeader.jsx';\r\nimport ResponderFormulario from '../../../Formulario/ResponderFormulario.js';\r\nimport Gantry from '../../../../assets/img/gantry.png';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton'; \r\nimport * as yup from 'yup';\r\nimport YupValidator from 'utils/YupValidator';\r\nimport logo from '../../../../assets/img/Meslite.png';\r\n\r\nconst CellHomeMenuScreen = (props) => {\r\n const { t, i18n } = useTranslation(['tablets', 'common']); \r\n const [EsCeldaConfigurada, setEsCeldaConfigurada] = useState(false);\r\n const [EsCheckListPendiente, setEsCheckListPendiente] = useState(false);\r\n const [EsEnBreakOrLunch, setEsEnBreakOrLunch] = useState(false);\r\n const [EsCheckInPendiente, setEsCheckInPendiente] = useState(false);\r\n const [EsMostrarCheckOutAlerta, setEsMostrarCheckOutAlerta] = useState(false);\r\n const [EsWaitingForkLift, setEsWaitingForkLift] = useState(false);\r\n const [ClaAreaProduccion, setClaAreaProduccion] = useState(null);\r\n const [ClaTurno, setClaTurno] = useState(null); \r\n const [ClaCelda, setClaCelda] = useState(null); \r\n const [ClaMaquina, setClaMaquina] = useState(null); \r\n const [EsCeldaControlaGantry, setEsCeldaControlaGantry] = useState(false);\r\n const [EsGantryActivo, setEsGantryActivo] = useState(true);\r\n const [EsMostrarDetenerGantry, setEsMostrarDetenerGantry] = useState(false);\r\n const [TipoAffectacion, setTipoAffectacion] = useState(null);\r\n const [CeldaList, setCeldaList] = useState([]);\r\n const [ClaCeldas, setClaCeldas] = useState([]);\r\n const [errors, setErrors] = useState([]);\r\n \r\n const [NomAreaProduccion, setNomAreaProduccion] = useState(null);\r\n const [NomTurno, setNomTurno] = useState(null); \r\n const [NomCelda, setNomCelda] = useState(null); \r\n const [ClaveCelda, setClaveCelda] = useState(null);\r\n const [ActiveDowntimes, setActiveDowntimes] = useState([]);\r\n\r\n const dailyOperationCheckListScreenLink = useRef();\r\n const solicitudMaterialScreenLink = useRef();\r\n const downtimeScreenLink = useRef();\r\n const checkInScreenLink = useRef();\r\n const scrapScreenLink = useRef();\r\n const checkOutScreenLink = useRef();\r\n const changeOverScreenLink = useRef();\r\n const downtimeScreenMachineLink = useRef(); \r\n const dashboardUtilizationLink = useRef(); \r\n const dashboardScrapLink = useRef();\r\n let IsDeviceAssignedOnCell = false;\r\n let EsPermitirVersionSirius = false;\r\n const refreshTimer = useRef(); \r\n const linkMesLite = useRef();\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n IsDeviceAssignedOnCell = params !== undefined ? params.IsDeviceAssignedOnCell : null;\r\n EsPermitirVersionSirius = params !== undefined ? params.EsPermitirVersionSirius : false;\r\n }\r\n\r\n const validationSchemeTurnOffGantry = yup.object().shape({\r\n TipoAffectacion: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n /* ClaCeldas: yup\r\n .array()\r\n .min(1, t('common:RequiredField'))\r\n .required(t('common:RequiredField'))\r\n .nullable() */\r\n ClaCeldas: yup\r\n .array()\r\n .nullable()\r\n .when('TipoAffectacion', {\r\n is: 2,\r\n then: yup.array().min(1, t('common:RequiredField')).required(t('common:RequiredField')),\r\n otherwise: yup.array().nullable(),\r\n })\r\n });\r\n\r\n useEffect(() => { \r\n InicializaOpciones();\r\n GetCeldaCollated();\r\n refreshTimer.current = setInterval(() => { \r\n InicializaOpciones();\r\n }, 1500 * 60);\r\n \r\n return () => {\r\n if (refreshTimer.current) {\r\n clearTimeout(refreshTimer.current); \r\n } \r\n }\r\n }, []);\r\n \r\n const InicializaOpciones = () => { \r\n\r\n if (getSessionItem('ClaCelda', null) !== null){ \r\n // mandamos llamar el servicio que nos ayuda a inicializar el home\r\n // verificamos si la celda ya realizo check list, si ya lo hizo sigue normal...\r\n const GetCellHomeScreenInitialValues = `${config.UrlApiProject}Operations/GetCellHomeScreenInitialValues?ClaCelda=${getSessionItem('ClaCelda', null)}`; \r\n \r\n callApi(GetCellHomeScreenInitialValues, 'GET', {}, (response) => { \r\n const info = response.data.CellHomeScreenInitialValues.length > 0 ? response.data.CellHomeScreenInitialValues[0] : {}\r\n \r\n if (response.data.CellHomeScreenInitialValues.length > 0){ \r\n setEsCheckListPendiente(info.EsCheckListPendiente);\r\n setEsEnBreakOrLunch(info.EsEnBreakOrLunch); \r\n setEsCheckInPendiente(info.EsCheckInPendiente);\r\n setEsMostrarCheckOutAlerta(info.EsMostrarCheckOutAlerta);\r\n setClaAreaProduccion(info.ClaAreaProduccion);\r\n setClaTurno(info.ClaTurno)\r\n setEsCeldaConfigurada(true);\r\n setClaCelda(info.ClaCelda);\r\n setEsWaitingForkLift(info.EsWaitingForkLift);\r\n setNomAreaProduccion(info.NomAreaProduccion);\r\n setNomTurno(info.NomTurno);\r\n setNomCelda(info.NomCelda);\r\n setClaveCelda(info.ClaveCelda);\r\n setEsCeldaControlaGantry(info.EsCeldaControlaGantry);\r\n setEsGantryActivo(info.EsGantryActivo); \r\n }\r\n\r\n setActiveDowntimes(response.data.ActiveDowntimesInformation);\r\n },null, false, false );\r\n \r\n \r\n }else{\r\n setEsCeldaConfigurada(false);\r\n } \r\n \r\n }\r\n\r\n const GetCeldaCollated = (pClaAreaDeartamento) => {\r\n const urlWebService = `${config.UrlApiProject}celda/GetCeldas?ClaDepartamento=2`;\r\n const paramsService = null;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setCeldaList(response.data.Celdas);\r\n });\r\n };\r\n\r\n const onStartCheckList = () => {\r\n dailyOperationCheckListScreenLink.current.click();\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'BEGIN_CHECK_LIST'\r\n }) \r\n }\r\n\r\n const onSolicitudMaterialClick = () => {\r\n solicitudMaterialScreenLink.current.click();\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'REQUEST_MATERIAL'\r\n }) \r\n }\r\n\r\n const onDownTimeClick = (claMaquina) => { \r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'CREATE_DOWNTIME'\r\n }) \r\n\r\n if (claMaquina !== null && typeof(claMaquina) !== 'undefined'){ \r\n setClaMaquina(claMaquina);\r\n setTimeout(()=> {downtimeScreenMachineLink.current.click(); }, 10) \r\n }else{\r\n downtimeScreenLink.current.click(); \r\n }\r\n }\r\n \r\n const onCheckInClick = () => {\r\n checkInScreenLink.current.click();\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'CHECK_IN'\r\n }) \r\n }\r\n\r\n const onChangeOverClick = () => {\r\n changeOverScreenLink.current.click();\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'CHANGE_OVER'\r\n }) \r\n } \r\n\r\n const onCheckOutClick = () => {\r\n checkOutScreenLink.current.click();\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'CHECK_OUT'\r\n }) \r\n }\r\n\r\n const onScrapClick = () => {\r\n scrapScreenLink.current.click();\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'VIEW_SCRAP'\r\n }) \r\n }\r\n\r\n const onProductionStatsClick = () => {\r\n dashboardUtilizationLink.current.click();\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'PRODUCTION_STATS'\r\n }) \r\n }\r\n\r\n const onProductionStatsScrapClick = () => {\r\n dashboardScrapLink.current.click();\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'SCRAP_STATS'\r\n }) \r\n }\r\n \r\n \r\n\r\n const onReturnWorkClick = () => {\r\n const ReturnToWork = `${config.UrlApiProject}Operations/ReturnToWork`; \r\n const paramsService = {\r\n ClaDepartamento : ClaAreaProduccion, \r\n ClaTurno,\r\n ClaCelda \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'RETURN_TO_WORK'\r\n }) \r\n\r\n callApi(ReturnToWork, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const onBreakTimeClick = () => {\r\n const ReturnToWork = `${config.UrlApiProject}Operations/BreakTime`; \r\n const paramsService = {\r\n ClaDepartamento : ClaAreaProduccion, \r\n ClaTurno,\r\n ClaCelda \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'START_BREAK_TIME'\r\n }) \r\n\r\n callApi(ReturnToWork, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const onLunchTimeClick = () => {\r\n const ReturnToWork = `${config.UrlApiProject}Operations/LunchTime`; \r\n const paramsService = {\r\n ClaDepartamento : ClaAreaProduccion, \r\n ClaTurno,\r\n ClaCelda \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'START_LUNCH_TIME'\r\n }) \r\n\r\n callApi(ReturnToWork, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const onCallForkliftClick = () => {\r\n const CallForklift = `${config.UrlApiProject}Operations/CallForklift`; \r\n const paramsService = {\r\n ClaDepartamento : ClaAreaProduccion, \r\n ClaTurno,\r\n ClaCelda \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'CALL_FORKLIFT'\r\n }) \r\n\r\n callApi(CallForklift, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const onClickGantry = () => {\r\n // \r\n setEsMostrarDetenerGantry(true);\r\n setClaCeldas([]);\r\n setTipoAffectacion(null);\r\n }\r\n\r\n const onMesClick = () => { \r\n linkMesLite.current.click(); \r\n }\r\n\r\n const onCompleteTurnOffGantry = async () => {\r\n //\r\n\r\n const value = {\r\n TipoAffectacion,\r\n ClaCeldas\r\n };\r\n\r\n const validator = new YupValidator(validationSchemeTurnOffGantry);\r\n const isValid = await validator.validate(value);\r\n if (!isValid) {\r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n\r\n // cuando esta afectando todo el gantry lo que hacemos es limpiar todas las celdas para enviar null\r\n\r\n const ActivateGantry = `${config.UrlApiProject}Operations/DeactivateGantry`; \r\n const paramsService = {\r\n EsGantryActivo : 0, \r\n ListadoCeldasAfectadas: TipoAffectacion === 1 ? null : ClaCeldas.join(\", \") \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'DEACTIVATE_GANTRY'\r\n }) \r\n\r\n callApi(ActivateGantry, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n setEsMostrarDetenerGantry(false);\r\n });\r\n\r\n }\r\n\r\n const onClickActivateGantry = () => {\r\n const CallForklift = `${config.UrlApiProject}Operations/ActivateGantry`; \r\n const paramsService = { };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'ACTIVATE_GANTRY'\r\n }) \r\n\r\n callApi(CallForklift, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const onAwaitingForkliftClick = () => {\r\n const AwaitingForklift = `${config.UrlApiProject}Operations/AwaitingForklift`; \r\n const paramsService = {\r\n ClaDepartamento : ClaAreaProduccion, \r\n ClaTurno,\r\n ClaCelda \r\n };\r\n\r\n tracker.trackEvent({\r\n type: 'CellHomeMenuScreen', /* component name */\r\n action: 'AWAITING_FORKLIFT'\r\n }) \r\n\r\n callApi(AwaitingForklift, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SuccessOperation'), 'centerTop', 'success');\r\n InicializaOpciones();\r\n });\r\n }\r\n\r\n const renderHeaderDetenerGantry = () => {\r\n return (\r\n \r\n onChangeContador(e.target.value, item)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n // locale=\"en-US\"\r\n // minFractionDigits={2}\r\n IsShowKeyboard={true} \r\n errors={errors[`OperationCheckInList[${item.RowIndex}]`]} \r\n title={item.NomMaquina}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooterDetenerGantry = () => {\r\n return (\r\n \r\n \r\n setEsMostrarDetenerGantry(false)}\r\n />\r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const EsSeleccionaTipoAffectacion = (value) => {\r\n\r\n const newErrors = { ...errors };\r\n delete newErrors.TipoAffectacion;\r\n setErrors(newErrors); \r\n\r\n if (value === null){\r\n setTipoAffectacion(null);\r\n return;\r\n }\r\n\r\n setTipoAffectacion(value);\r\n \r\n if (value === 1) {\r\n // mandamos parar el gantry total...\r\n }\r\n };\r\n\r\n const onClaCeldaChange = (celdas) => { \r\n // no se puede desmarcar el ultimo...\r\n \r\n\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaCeldas;\r\n setErrors(newErrors); \r\n\r\n setClaCeldas(celdas); \r\n };\r\n\r\n \r\n const subHeader = (\r\n This version is not longer available
\r\n\r\n Please switch to the new version using the button below. \r\n
\r\n
\r\n
\r\n
onMesClick()}> \r\n
\r\n \r\n \r\n \r\n
onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n Cell not configured on this device
\r\n\r\n Please set the cell on this device by selecting the configuration button on the top right of the screen. \r\n
\r\n
\r\n \r\n \r\n
onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n Safety First
\r\n\r\n Please tap the button below to complete the Daily Operations Safety Checklist. \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n Check In
\r\n\r\n Please tap the button below to complete the Check In. \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n Welcome Back
\r\n\r\n Please tap the button below to return to work. \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n InicializaOpciones()}\r\n >\r\n \r\n \r\n {ActiveDowntimes.length >= 1 ? \r\n ( \r\n ActiveDowntimes.map((element, index) => {\r\n return ( \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setEsMostrarDetenerGantry(false)}\r\n closable={false}\r\n className=\"dialog-header-background-blue\"\r\n maximized={true}\r\n draggable={false}\r\n > \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n \r\n
\r\n\r\n )\r\n :\r\n (\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n onDownTimeClick(null)}> \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n :\r\n (\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n EsSeleccionaTipoAffectacion(e.value)}\r\n optionValue=\"TipoAffectacion\"\r\n optionLabel=\"NomTipoAffectacion\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n onClaCeldaChange(e.value)}\r\n /> \r\n \r\n
\r\n
\r\n \r\n \r\n InicializaOpciones()} \r\n >\r\n \r\n \r\n {ActiveDowntimes.length >= 1 ? \r\n ( \r\n ActiveDowntimes.map((element, index) => {\r\n return ( \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CellHomeMenuScreen;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeUAAAF7CAYAAADsXJNRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuMTY0NzUzLCAyMDIxLzAyLzE1LTExOjUyOjEzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMTAtMThUMTQ6Mzk6MjAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMTAtMThUMTQ6Mzk6MjAtMDU6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTEwLTE4VDE0OjM5OjIwLTA1OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNhMmUxMjk1LTAzZDMtNDQxOS1hMmY3LTVlYTliMTYwZmI1YiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmI2N2QxMzlmLWY0NWEtZTc0Ny05NDY3LTQyYzU5NDRkZTE1MyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjcxNmU5MzkzLTBhMzYtNGNiMC04ZTk2LTZhN2I2Nzc0NTI2ZiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzE2ZTkzOTMtMGEzNi00Y2IwLThlOTYtNmE3YjY3NzQ1MjZmIiBzdEV2dDp3aGVuPSIyMDIyLTEwLTE4VDE0OjM5OjIwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2EyZTEyOTUtMDNkMy00NDE5LWEyZjctNWVhOWIxNjBmYjViIiBzdEV2dDp3aGVuPSIyMDIyLTEwLTE4VDE0OjM5OjIwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66EEwiAAAewElEQVR4nO3de5SdVZ3m8WdXSFJFQEy4BAIEzaYVYkMrrMSIY3ewZ6B1cAliwOCldRxxdTNjt6itLpft0rHV7qZpDJc0Mt09iSK4vNBcbImAImYSJTeBklSFbJMAlWCuValKVZKqU7/5o6p6QllV55w6l73P+34/a2Wt5Jz3ffezisN56t3vzZmZAABAfE2xAwAAgCGUMgAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkglIGACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEkEpAwCQCEoZAIBEUMoAACSCUgYAIBGUMgAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkglIGACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEnFc7ACNxDkXOwIQhZnNlPQXki6TdIakav7PMFXSiZKaq7zdiQxKOiypW9JAncaspqOStkr6lqR7nXODkfMUZWaxIzQExw+qdJQy8sjM5ktaJems2Fkwpgclvds5dzR2kInQNaVh+hrAuMxsmqQfiEJO2Tsk/a/YIVAd7CmXgT1l5I2ZXSPpO7FzoKg+Sac453pjBxkPXVMa9pQBTOSS2AFQkhZJfxA7BCpHKQOYyCtjB0DJpscOgMpx9jUAZMDKlStf772Xhs4q75D0YgiBOeMGw54yAGRLsyQv6fe995wI02AoZQDIppPFWfMNh1IGgOyaEzsAysMxZQAVW7ly5ce/9KUv/aqcdVpbW+9tbm6eXWy5c8899+OTzbVw4cJZ3/72tz9fbLkXX3wxLF68+LYx3vqNpIOTHb8aHn/88c+cddZZl09y9ZaqhkHNsacMAOPjmCzqilIGACARlDIAAImglAEASAQnegGopUOSxryBRVNTU6mPG+wb47WRRy9OqLm5uaRjwlOmTCmMM84hST2lbKNWpk6d2h9zfNQXpQygljaFEMZ8XvG0adNKfdRg+xiv9YQQ1hdbcevWra+SdHOx5Zqbm/vGGac1hLC3aMIamj179r6Y46O+mL4GACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAILolCNGZ2kaSPSbpI0isix2kkJuklST+V9I/OuT2R8wCoEkoZUZjZDZKWidmayXqVpEWSPmxmb3PObYycB0AV8IWIujOzt0i6VXz+quE0Sfeb2YzYQQBUji9FxPBJ8Ui8ajpL0ntjhwBQOUoZMbwpdoAMWhQ7AIDKUcqI4dTYATJoWuwAACrHiV5ABmzYsOGg936xpIKkvZK2hRCKPkUJQFrYUwYaXKFQ6Lv11lt/PPzPKZJmS7rYe39CxFgAJoFSBhrY4ODgwEMPPfQ3q1ev7hz11lRJ50eIBKACTF8DDahQKBzet2/fhrvvvnvF7bff/tw4i83w3k8PIRypazgAk0YpI0mFQqH3mmuuuTZ2jhQdPnx4sL29vbfExadKauhSbm1tvXf0a01NTYPTpk07WsLqfMehofCBRarsqaee6okdIgMsdoBKNTc3z46dAagXjikD2VbK3iSARFDKQHbtCyH0xw4BoHSUMpBNByW1xQ4BoDwcU0ajGZDETTHGd0RDNw95KYSQ+vHkvtgBRpjZQOwMgEQpo/F0hhBaY4dAVWyUdF7sEJK0d+/erbEzABLT1wDiWRY7gDR0A5YVK1Y8GDsHIFHKACJxzv1S0qdiZjAze/zxx//+O9/5TkfMHMAIShlANM65myT9F0mPSjpUr3ELhULv7t2719x55503XH/99T8uvgZQHxxTBhCVc+5RDZWyJGn4aVdALrGnDADjG4wdAPlCKQNITXfsAMfg8jvUFaUMIDXbYwcYdjCEUOqDP4CqoJQBJCWEsE9SiBzjkKRfR86AHOJELwDJCSG84L3fJ+lUSS2SptRhWNPQAzwOStrTAHdEQwZRygCSNDx1vCN2DqCemL4GACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCJ4IMUkmVmzpP8syUtykeNkjnNu6j333PPu0a+fcMIJh84///xdMTI1qJ2SHnHOHYgdBGkzs3Mk/bGkV5Sx2iFJTzjn2muTKn8o5Ukws3dI+oak02NnyaqmpqZpCxYsuCF2jow4ZGafds7dHjsI0mNm0yTdLOnPNMnZUzP7jqTrnXMHq5ktjyjlMpnZWyX9m5j6R+OYIek2MzPn3B2xwyA5/1vS+yvcxrWSZpvZHzvnBquQKbcolvLdKn5uaExfM7OTYodAOszsElVeyCMWS1pSpW3lFuVSBjP7PUnzY+cAJulESW+NHQJJubLK27uqytvLHUq5PGfGDgBU6IzYAZCU2VXeHufZVIhjykCOPP300/3e+7MlHZHUFUI4EjsTonqpmhs7fPjwdO/9XEn9knpCCN3V3H4esKcM5EShUDj02c9+tkNDl/HNl7Ro+AsU+fW9am6sr6+vRdI8Sa+VdLH3/kLvPTt/ZaCUgZxYu3btP7W3t/ce85KTNM97X+0pTDQI59w6Sf9awyFmSTqvhtvPHEoZyLhCoXBo9erV//DBD37woXEWeXVdAyE1H5X0j5IKNdr+Kd775hptO3OYVqiB7u7utra2tsdi50hVKTcFKRQK/Q899NAPR78+ffr0vpNPPnl/bZJlS6FQGNy9e/fuO++8c+OoPeTRmr33LSGEvrqFQzKcc/2SbjSzmyRdKunU1tbWs/r6+v6jSGfMmHHi/PnzP1DBMC2SDlcYNRco5Rro6urasXTp0qoeq8mSrVu3llLKhU984hM/G+OtLknbqp8q9/guyDnn3E5Jd0uS936hpONH3rvyyitPv+mmmyop5SkVxssNpq8BmCT2knEsPg+RUMoA9oUQBmKHQFKqeqkUSkcpA/l2RNJzsUMgLSGEPZJ2x86RRxxHAvLJJO2T9Bw3EME4Nmvo0Yxnxw6SJ5RyfXVI2hM7RCOYMmVKQdLWMd7ap6EvC0zeoKTeak5ZL1my5FPvete7fuc45IwZMw4556xa4+RUlBu8hBBM0g7v/fPXXnvt+TEy5BGlXF99IYTO2CEaSM8Yr3XzM0xPS0vLnNgZUBshBFuwYMFEl9ShijimDABAIihlAAASQSkDAJAIShnARDiW2CD6+/trde9q1BGlDGAiG2MHQHFmZo8++uiO2DlQOUoZwES+J2lv7BCY2K5du36ybt26g7FzoHKUMoBxOec6Jb1PPOEnWX19fTtuvPHGr8fOgeqglAFMyDm3StJCSfeLBxUko7+/f9+WLVvuveaaa/58/fr13bHzoDq4eQiAopxzz0i6UpLM7KQPf/jD53d2dp4SN1V+dXZ29u/YsYPbo2YQpQygLM65Lu99l6Tm2FmArGH6GsBkMF3aGDj5q8FQygAmY7ckrotN3/OxA6A8lDKAsoUQjkp6VhRzyraFELicrcFwTBnApIQQ9nnvn5R0hqQTJE2NHAlDvyT1SvptCIFDDA2IUgYwaSGEI5K2x84BZAXT1wAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEkEpAwCQCEoZAIBEUMoAACSCUgYAIBGUMgAAiaCUAQBIBKUMIHfM7C/NbKeZDZhZv5m9aGYfiZ0L4ClRAHLFzB6T9NZRL58p6Rtm9nbn3FURYgGS2FMGkCNmdq9+t5CPdaWZ3VGvPMBolDKAXDCzr0m6toRF/8zMPlPrPMBYKGUAmTdcyJ8uY5WvUsyIgVIGkGmTKOQRFDPqjlIGkFkVFPKIr+7YsePvq5UHKIZSBpBJVShkSdLcuXM/2draensVIgFFUcoAMqdahTzida973Z+zx4x6oJQBZEq1C3nE3LlzP9nR0fG1am8XOBalDCAzalXII+bMmfNpihm1RCkDyIRaF/IIihm1RCmjasxsmpmdY2Yn1WGsmWY218ym1XospK9ehTyCYkatUMqomJmdYWbflNQlabukTjNbY2ZvqfZYd9xxx5vM7ElJ+yXtkHTAzP7ZzE6p9lhoDPUu5BEUM2qBUkZFzOxsSeskvU9S8zFvvUnST83svdUaa8WKFe+87LLL/knSgmNePl7Sf5P0SzObXa2x0BjM7KuKUMgjhov5q7HGR/ZQyqjUnRp6ws5YpkhaWY1iXrFixTvf/OY3/6XG/8zOk3RLpeOgcZjZhyRFv+PWnDlzPtPa2spjH1EVlDImzczmSHpbkcWaVGExH1PIxSwxs5mTHQeNw8yOk1STPdTBwcFCuevMmzfvr733c2uRB/lCKaMSrytxuUkXcxmFLA3tmb+m3DHQkC6SVNbhira2tntKWW5gYKB/w4YN/7ecbbe0tJy1dOnSP6SYUSlKGZXoKWPZsou5zEKWJHV0dBz13jd776eUsx4azqxyFm5ra7vniiuu+EYpyzrn7LrrrvtKa2vrT8oZ48wzzzxR0jyKGZWglFGJTZpEMZeyoHNuarmFPDAw0Pm2t71tpqRFkt7ivb/Qe88lU9m0rdQFyylkSWpqahosFAq9V1999ZfLKeYnn3zypeG/UsyYNEoZk+acOyzpb8pcraTPXFNTU9llun79+pW9vb2Dx7w0S9IbvPfHlbstpM051y5pQ7Hlyi3kYxUKBSu1mPfv37/hiSeeOHDMS/O892dPZlzkG6WMSv2dpG/HDrF9+/YH3ve+9903xlstkl5V5zioj+sl9Y33Zltb27cnW8gjRor5mWeeeWyCZQ4tW7bs62O85b33r6xkfOQPpYyKOOcGJX1AEYt5+/btD1x++eW3TLDIqfXKgvpxzm2U9J8kbTz29f7+/gM//elP//aKK664qxrjFAoFu+qqq768du3arw8MDHQf+15nZ2frV77ylRu+9a1vvTDO6udUIwPyg2k9VMw5VzCzDwz/87p6jj1SyIVCwSZYbHrdAqGuhov5YjN7raR5bW1tR5YuXeq6u7vLvqypmPe///03n3POOXctWbLkj04++eQTN27c+MJ3v/vdnUVWq/ktZ5EtlDKqIkYxl1jIktRfjzyIZ/gYc7v3/iRJb6jVOD/5yU9+vWPHjn5Jc0qNVqssyCamr1E1zrmCpA8MDg6WdD1oJcooZGnoPtnIh5r/AhZC2CKp2B7yiN5aZkH2UMqoKudcoamp6f1dXV0P1GqMMgt5QGVcPoOG1yfpcK0HKaOYO2qdBdlCKaPqnHOFtra2qw8cOPBQtbf99NNPP15GIQ9Kag0h1PxLGmkIIZikZyVV/ZjyGGNt0cSlu0fSrlrnQLZQyqiJRYsWDWzZsuWqahbz+vXr1yxZsuSbZRTyMyGEzmqNj8YQQjiooWuY92rocyANlfRL4640+bGek7RZL7+JzmFJWyU9O/xLAlAyTvRCzSxatGjgF7/4xVWvec1r7ps5c+YVlWxr/fr1a6677rrvDQ4OllPIB4ouiUwKIfRKaq3TWL+V9Nt6jIXsY08ZNVWNPWYKGUBeUMqouUqKmUIGkCeUMupiMsVMIQPIG0oZdTNSzL29vb8qtuz27ds3U8gA8oZSRl0tWrRo4De/+c3C/v7+8e4VrH379u267LLL7qKQAeQNpYy6u+CCC/offfTRV+/fv/+HZjYw8nqhUBjYtGnT2je+8Y1/RyEDyCMuiUIUb3/72wve+3dIOu/iiy8+18zcxo0b55WxCQoZQOZQyogmhGDe+7YNGzZI0uklrjYoChlARjF9jaiG73jUpqG7LZXyMIEeUcgAMopSRnTHFPOzRRY9KukJChlAVlHKSMJwMT8uacs4ixyR9GAIYU/dQgFAnXFMGckYLuZ/9963S/o9SSdpaEp7l4amrHsmWh8AGh2ljOSEEIKkEDsHANQb09cAACSCUgYAIBGUMgAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkgjt6ZYyZvVLSmyWdWoPNnyrp1ZKm1WDbYzmkoXthH6rTeNV2VEP5NzjnLHYYAOmjlDPCzKZI+qKkT0hqjhwHL/e0mX3IObcxdhAAaWP6OjvukPQ5UcgpulDSE2b2uthBAKSNUs4AM3ujpOtj58CEZki6NXYIAGmjlLPh2tgBUJLFZnZy7BAA0kUpZ8M5sQOgJE7S2bFDAEgXJ3plw5TYAVCaX/7yl6/03p8i6YiknhACZ2UD+A/sKQN1tHr16nMl/b6kiyUt8t6/InIkAAmhlIF4pku60HvPGfMAJFHKQGzHiXMCAAzjmHKObN++/cGenp795awzf/78pU1NTRPewcvMBjs6OrZNNte0adOmnXbaaUVPgOrs7Ny9YcOGTaNfnzVr1r6pU6f2T3b8avDev7WlpWWyJ3FxRjYASZRyrnz/+99/YPny5VvLWae9vf3dKnJbzf7+/qOLFy++bbK5rrjiijNvueWWTxZbbu/evbs/+tGPPjzGW1sl9Ux2/GpYs2bNuRWUcr1uWwogcUxfAwCQCEoZAIBEUMoAACSCUgYAIBGc6AVJah3vjaampkKxlZuamgYljXX2da+kHcXWv+SSS86XVPREr5aWlkPjjLNZUlex9WvppJNOOhhzfADZQClDIYS9473nnCt6G8jhZcYqxc4QwpZi619zzTXHF1tGkqZOnTowzjj7QgidpWyjVqZPn3405vgAsoHpawAAEkEpAwCQCEoZAIBEUMoAACSCUgYAIBGUMgAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkglIGACARlDIAAImglAEASATPU0bFnHPH3XXXXX8y+vUTTjihd8GCBa8vYRNzq58KABoPpYyKNTU1Tb/00ks/HTtHnpnZKyV9VNKlkmZLclEDAZgUShlocGb2ekk/knR65CgAKsQxZaCBmdkJkn4oChnIBEoZaGwfkjQndggA1UEpA43tLbEDAKgeShnFdMQOMKKnp2dv7AwJOj52gKwZGBjoi50B+UUpo5j7YwcYsW7dutWxMyTo6dgBsqa7uzvEzoD8opRRzE2Sno8dYs+ePWs/97nPrY+dI0H/R1IhdogsWbNmzUOxMyC/KGVMyDm3X9JiSRtiZejo6HjsPe95zxdjjZ8y59wWSf8zdo6s2L59+4M33ngjMzKIhuuUUZRzbpuZLdDQSUULBwcHT3z22WfPqfW43d3dnY888sjGlStXRt9TT5lzbrmZbZP0RUkLY+dpRH19fS+uW7fu3o985CP/HjsL8o1SRkmccybpCUlPeO+bJP1h5EjHstgBYnPOPSzpYTNrkXTa5z//+df39fW1xM7VCNrb2w9u3ry5N3YOQKKUMTkmaVDpHP4YiB0gFc65Pkk7vPezxZnZ1Zb7X/5Qe6l8qaKBhBBMUiqXJ/VL4hKW39UdO0AGsTeNmqOUMVlB0pHYISQ9F0IYjB0iQclcX54R/ZI6Y4dA9lHKmJQQwhFJmyTtjxShT9IzIYTdkcZPWgjhoKTnxJRrNQxIag0hcOkZao5jypi0EMJhSU8Pn/g1RfV7XOBgCIHjyEWEEDq8912SzpA0QzzOsVwFSQcl7QwhHI0dBvlAKaNiw9PHTCEnKITQo6E9ZgANgOlrAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEkEpAwCQCEoZAIBEUMoAACSCUgYAIBE8JQrIOTObLul6SVdLOltDj+Gsh4OS1ki62Tm3ZTIbMLNLJN0g6Q2Sjq9itkbXK2m9pGXOufWxw6B0lDKQY2Y2S9KPJV0cKcIFkv7UzN7rnPtBOSua2V9J+tvaxMqE8yW918w+7pxbFjsMSsP0NZBv/6J4hTyiWdLdZuZLXcHMLheFXIomSV83s7fEDoLSUMpATpnZeZLeGTvHsGZJHytj+b+qVZCM+nTsACgNpQzk1xtjBxhlURnLvqlmKbJpYewAKA2lDOTX1NgBRinn+6heJ6NlxbTYAVAaTvQC8mtT7ADHeuGFF/Z47xdLMkkHJG0LIXSPs/hTkhbUK1ujO3DgwPbhn60kdUnaEULYHzESxsGeMpBfGyX9InaIYXbffff92/DfnaRZki7y3p8yzvK31iVVRqxdu/a+Y/55kqQLvfdnxsqD8VHKQE4550zSdZI6YmdZt27d8mXLlo2+VtlJOs97/ztT1c65b2rozHEUEUL4wcc+9rGfjfHWud775roHwoQoZSDHnHPbJF0k6XZJO+s59uDgYP/+/fs33XPPPZ9aunTpd8dZ7DhJrxjnvf8u6U8lbZDUX4uMjcrMBrq6utpWrVr15csvv3y8WQUn6eR65kJxHFMGcs45t1vS/xj+I+/96ZLOixrq5aaP9eLwnv7K4T8a3qPmetzysKecGPaUAYxmsQOMklqeLOFnmxhKGcBofbEDjFJSnhBCQUxjl+tQ7AB4OUoZwGjdGnqgQQp6NZSnVM/XKkgG9UvaFzsEXo5jyjly2WWXXXLRRRedO/r1Sy+99FUR4mTN3NgBqiWEYN77VkkXKu4xx8OSngkhlDzFGkJ4wXt/vKQzahcrE/o19LMdiB0EL0cp58gFF1zwodgZ0BhCCL3e+3WSTtXQ2c/1vPtXv4Ye67hneEq6LCGEdu/9Sxo6s7hZQ2cZY8iApB5Jv6WQ00QpAxjTcCG+NPynoYQQujR05yqgoXBMGQCARFDKAAAkglIGACARlHI27IodAKXZtm0bxzkBjItSzoYHYwdAcT09PeHhhx/eEzsHgHRRytnwI0mPxQ6B8ZmZ3X///XfEzgEgbVwSlQHOOTOzqyWtkPTO2HnwcoVC4dCqVatu+sIXvrAxdpbxmNkJkv5I0qtU32uS8+SIpCDpZ865I7HDIE2UckY457okXWlmCyW9VdLpzz///OyjR4/yBRvJwMDA0V27dj1/2223rX7qqad6YucZj5l9UNLNkmZGjpIXu8zseufcQ7GDID2UcsY4556U9KQkee8XSJoRNxFKEO1JPcOF/K+xxs+pMyTdb2b/1Tn3cOwwSAvHlLPtcOwAKEmUpzINT1nfHGNsqEnS7WbGdzBehg9Etu2NHQAl2R1p3MViyjqmeZL+IHYIpIVSzraXxP1/U3dI0guRxj4z0rj4/86KHQBpoZQzbPiRd0+Lm4ukao+kX03mSUhV0nAPmsian//85/3e+9O997O891Ni50F8nOiVccNf+O3e++fEf++UDIQQBiNneFxSt6QTI+fIpSNHjuy+4YYbjko6b/ilgve+LYTADWZyjC/pnBgugKOxcyAdzrkuM/uspNtiZ8mjVatW3drb23vsL2ZTJM333v9q+NGTyCGmr4Ecc87dLukvNHRsG3VQKBS6H3nkkS/feOONq8d420l6db0zIR3sKQM555xbZmZ3S/oTSeccOHBgZkdHx6mxc2XNwMDA0Z07d3YsX7583ebNm3snWPSkuoVCcihlAHLO7ZN0tyR578+Q9Nq4iXLNee/d8ImayBmmrwGM1h87QM4NUMj5RSkDGO2gIt76E9FuJoMEUMoAXiaEcFTSttg5cqpP/OxzjVIG8DtCCM9LahOX0dWLaWgPeVMIgcMHOcaJXgDGFEJ4SdJLw3eacrHzZFyB48iQKGUARUS8DSiQO0xfAwCQCEoZAIBEUMoAACSCUgYAIBGUMgAAiaCUAQBIBKUMAEAiKGUAABLBzUNqYPbs2QvXrVt3y+jXW1pa+pqbm49EiAQAlWiOHSAvKOUamDp16syZM2fOjJ0DANBYmL4GACARlDIAAImglAEASASlXB6ecwoA4zCzwdgZGh2lXJ52SXzoAGAMnZ2dO2JnaHSUchmcc3sl3Rc7BwAkyO67774fxg7R6Cjl8t0gaVvsEACQkk2bNt21fPnyrbFzNDpKuUzOud9KWijpG5K6I8cBgKh6enrCAw888NdLliy5J3aWLHBmFjtDw3DOvezfZnacpNMee+yxU370ox/Nj5MKAOJob28/uHnz5t4SFm3dunXr3poHygDu6FUB59yApJ3e+x5Js2LnAYBEcYJsiZi+rg7uZw0A4+M7skSUchWEEI5I6oqdAwASdEhSKVPcEKVcTc+KDx4AHOuIpF+HEDh5qUSc6FWG0Sd6jea9nyJpjqSTJU0Xv/QAyJ9BSUcl7Ze0M4TQL0l0TWkoZQAAEsGeHAAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkglIGACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEkEpAwCQCEoZAIBEUMoAACSCUgYAIBGUMgAAiaCUAQBIBKUMAEAiKGUAABJBKQMAkAhKGQCARFDKAAAkglIGACARlDIAAImglAEASASlDABAIihlAAASQSkDAJAIShkAgERQygAAJIJSBgAgEZQyAACJoJQBAEgEpQwAQCIoZQAAEvH/ABTqJX/TzWWYAAAAAElFTkSuQmCC\"","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable no-const-assign */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport queryString from 'query-string';\r\nimport { config } from 'utils/config';\r\nimport { callApi, showSweetAlert, getSessionItem } from 'utils/utils'; \r\nimport moment from 'moment'; \r\nimport {\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter,\r\n CardImg,\r\n CardImgOverlay,\r\n CardTitle,\r\n CardText,\r\n ListGroupItem,\r\n ListGroup,\r\n Row,\r\n Col,\r\n FormGroup,\r\n Label,\r\n} from 'reactstrap'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport PrincipalHeader from '../Common/Header/PrincipalHeader.jsx';\r\nimport ResponderFormulario from '../../../Formulario/ResponderFormulario.js';\r\nimport { useHistory, Link } from \"react-router-dom\";\r\nimport HeaderTablet from '../Common/Header/HeaderTablet.jsx';\r\n\r\nconst DailyOperationCheckListScreen = (props) => {\r\n const { t, i18n } = useTranslation(['tablets', 'common']); \r\n const homeScreenLink = useRef(); \r\n\r\n let IsNewHomeVersion = false;\r\n let IdCelda = null \r\n let ClaAreaDepartamento = null;\r\n let ClaTurno = null;\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n IsNewHomeVersion = params !== undefined ? Boolean(params.isNewHomeVersion) : false;\r\n } \r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n IdCelda = params !== undefined ? params.IdCelda : null;\r\n }\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n ClaAreaDepartamento = params !== undefined ? params.ClaAreaDepartamento : null;\r\n }\r\n\r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n ClaTurno = params !== undefined ? params.ClaTurno : null;\r\n }\r\n const [ClaveArticulo, setClaveArticulo] = useState(null);\r\n const [ClaArticulo, setClaArticulo] = useState(null);\r\n const [NomArticulo, setNomArticulo] = useState(null);\r\n const [Cajas, setCajas] = useState(null);\r\n const [NomTurno, setNomTurno] = useState(null);\r\n const [ClaAreaProduccion, setClaAreaProduccion] = useState(null);\r\n const [NomAreaProduccion, setNomAreaProduccion] = useState(null);\r\n const [NomCelda, setNomCelda] = useState(null); \r\n const [ClaveCelda, setClaveCelda] = useState(null);\r\n const [ClaCelda, setClaCelda] = useState(null);\r\n\r\n useEffect(() => { \r\n OnloadDailyOperationCheck(IdCelda);\r\n }, []);\r\n\r\n const onFormularioSent = () => {\r\n homeScreenLink.current.click();\r\n }\r\n\r\n const OnloadDailyOperationCheck = (pIdCelda) => { \r\n setClaveArticulo(null);\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Operations/GetOperationOnloadDailyOperationCheck?IdCelda=${pIdCelda}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => { \r\n const dailyOperationCheckHead =\r\n response.data.DailyOperationCheckHead.length > 0 ? response.data.DailyOperationCheckHead[0] : {}; \r\n setNomArticulo(dailyOperationCheckHead.NomArticulo);\r\n setClaArticulo(dailyOperationCheckHead.ClaArticulo); \r\n setClaveArticulo(dailyOperationCheckHead.ClaveArticulo); \r\n setCajas(dailyOperationCheckHead.Cajas); \r\n ClaTurno = dailyOperationCheckHead.ClaTurno;\r\n setNomTurno(dailyOperationCheckHead.NomTurno);\r\n setClaAreaProduccion(dailyOperationCheckHead.ClaAreaProduccion);\r\n setNomAreaProduccion(dailyOperationCheckHead.NomAreaProduccion); \r\n setNomCelda(dailyOperationCheckHead.NomCelda);\r\n setClaveCelda(dailyOperationCheckHead.ClaveCelda);\r\n setClaCelda(dailyOperationCheckHead.ClaCelda);\r\n });\r\n };\r\n \r\n const subHeader = (\r\n onDownTimeClick(element.ClaMaquina)}> \r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n onDownTimeClick(null)}> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n :\r\n (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n const renderFooter = () => {\r\n return (\r\n <>\r\n {t('tablets:TotalScrap')}: { (ScrapCellDetailList.reduce((a,v) => a += v.Scraplbs === null ? 0 : v.Scraplbs , 0 )).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }
\r\n \r\n\r\n
\r\n \r\n \r\n onTipoScrapCeldaClick(e.value)}\r\n optionValue=\"ClaTipoScrapCelda\"\r\n optionLabel=\"NomTipoScrapCelda\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n onRazonScrapCeldaClick(e.value)}\r\n optionValue=\"ClaRazonScrapCelda\"\r\n optionLabel=\"NomRazonScrapCelda\"\r\n className=\"buttonListSurveyTablet\"\r\n multiple={false}\r\n errors={errors}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showActiveRows(OperationCheckOutList).map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CheckOutScreen;\r\n","/* eslint-disable no-const-assign */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport queryString from 'query-string';\r\nimport { config } from 'utils/config';\r\nimport { callApi, showSweetAlert, showNotify } from 'utils/utils'; \r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport YupValidator from 'utils/YupValidator';\r\nimport * as yup from 'yup'; \r\nimport FieldText from 'components/Controls/FieldText';\r\nimport FieldNumber from 'components/Controls/FieldNumber';\r\nimport moment from 'moment'; \r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col,\r\n FormGroup,\r\n Label,\r\n} from 'reactstrap'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport HeaderTablet from '../Common/Header/HeaderTablet.jsx'; \r\nimport PrincipalHeader from '../Common/Header/PrincipalHeader.jsx';\r\nimport './CheckInScreen.scss';\r\nimport PackingList32 from '../../../../assets/img/PackingList32.png';\r\nimport { useHistory, Link } from \"react-router-dom\"; \r\n\r\nconst ChangeOverScreen = (props) => {\r\n const { t, i18n } = useTranslation(['tablets', 'common']);\r\n const [OperationChangeOverList, setOperationChangeOverList] = useState([]);\r\n const [ClaveArticulo, setClaveArticulo] = useState(null);\r\n const [ClaArticulo, setClaArticulo] = useState(null);\r\n const [NomArticulo, setNomArticulo] = useState(null);\r\n const [Cajas, setCajas] = useState(null);\r\n const [ClaTurno, setClaTurno] = useState(null);\r\n const [NomTurno, setNomTurno] = useState(null);\r\n const [ClaAreaProduccion, setClaAreaProduccion] = useState(null);\r\n const [NomAreaProduccion, setNomAreaProduccion] = useState(null);\r\n const [NomCelda, setNomCelda] = useState(null); \r\n const [errors, setErrors] = useState({});\r\n const [ClaveCelda, setClaveCelda] = useState(null);\r\n const [ClaCelda, setClaCelda] = useState(null);\r\n const [ScrapLbs, setScrapLbs] = useState(null);\r\n const [ClaArticuloNew, setClaArticuloNew] = useState(null);\r\n const [CajasNew, setCajasNew] = useState(null);\r\n const [NomArticuloNew, setNomArticuloNew] = useState(null);\r\n const [ClaveArticuloNew, setClaveArticuloNew] = useState(null);\r\n \r\n const homeScreenLink = useRef();\r\n\r\n // const IdCelda = props.IdCelda !== undefined ? props.IdCelda : null;\r\n let IdCelda = null\r\n \r\n if(props.location!==undefined){\r\n const params = queryString.parse(props.location.search);\r\n IdCelda = params !== undefined ? params.IdCelda : null;\r\n }\r\n \r\n\r\n useEffect(() => { \r\n OnloadChangeOverScreen(IdCelda); \r\n }, []);\r\n\r\n const OnloadChangeOverScreen = (pIdCelda) => { \r\n setClaveArticulo(null);\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Operations/GetOperationOnloadChangeOver?IdCelda=${pIdCelda}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n const operationChangeOverHead =\r\n response.data.OperationChangeOverHead.length > 0 ? response.data.OperationChangeOverHead[0] : {}; \r\n setNomArticulo(operationChangeOverHead.NomArticulo);\r\n setClaArticulo(operationChangeOverHead.ClaArticulo); \r\n setClaveArticulo(operationChangeOverHead.ClaveArticulo); \r\n setCajas(operationChangeOverHead.Cajas); \r\n setClaTurno(operationChangeOverHead.ClaTurno);\r\n setNomTurno(operationChangeOverHead.NomTurno);\r\n setClaAreaProduccion(operationChangeOverHead.ClaAreaProduccion);\r\n setNomAreaProduccion(operationChangeOverHead.NomAreaProduccion); \r\n setNomCelda(operationChangeOverHead.NomCelda); \r\n setClaveCelda(operationChangeOverHead.ClaveCelda);\r\n setClaCelda(operationChangeOverHead.ClaCelda);\r\n setScrapLbs(operationChangeOverHead.ScrapLbs);\r\n setOperationChangeOverList(response.data.OperationChangeOver);\r\n });\r\n };\r\n\r\n const onChangeClaveArticulo = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaveArticulo;\r\n setErrors(newErrors);\r\n setClaveArticulo(e.target.value);\r\n getOperationGetItemByCode(e.target.value === null || typeof(e.target.value) === 'undefined' ? '' : e.target.value);\r\n \r\n };\r\n\r\n const onChangeClaArticuloNew = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.ClaArticuloNew;\r\n setErrors(newErrors);\r\n setClaArticuloNew(e.target.value);\r\n getOperationGetItemByCodeNew(e.target.value === null || typeof(e.target.value) === 'undefined' ? '' : e.target.value);\r\n \r\n };\r\n \r\n\r\n const onChangeCajas = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.Cajas;\r\n setErrors(newErrors); \r\n // convertimos a intero ya que la cajas no son decimales\r\n setCajas(e.target.value !== null ? Math.floor(e.target.value) : null);\r\n };\r\n\r\n const onChangeCajasNew = (e) => {\r\n const newErrors = { ...errors };\r\n delete newErrors.CajasNew;\r\n setErrors(newErrors); \r\n // convertimos a intero ya que la cajas no son decimales\r\n setCajasNew(e.target.value !== null ? Math.floor(e.target.value) : null);\r\n };\r\n\r\n const getOperationGetItemByCode = (pClaveArticulo) => { \r\n \r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Operations/GetOperationGetItemByCode?ClaveArticulo=${pClaveArticulo}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n const operationCheckOutByCode =\r\n response.data.OperationCheckInByCode.length > 0 ? response.data.OperationCheckInByCode[0] : {}; \r\n\r\n // cuando no encuentra el producto lo limpiamos para simular que no existe y que no es un \r\n // valor valido, no mandamos mensaje por que la version actual tampoco lo hace.\r\n if (response.data.OperationCheckInByCode.length === 0){\r\n\r\n setNomArticulo(null); \r\n setClaArticulo(null); \r\n setClaveArticulo(null); \r\n }\r\n else{\r\n setNomArticulo(operationCheckOutByCode.NomArticulo); \r\n setClaArticulo(operationCheckOutByCode.ClaArticulo); \r\n }\r\n\r\n });\r\n };\r\n\r\n const getOperationGetItemByCodeNew = (pClaveArticulo) => { \r\n \r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Operations/GetOperationGetItemByCode?ClaveArticulo=${pClaveArticulo}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n const operationCheckOutByCode =\r\n response.data.OperationCheckInByCode.length > 0 ? response.data.OperationCheckInByCode[0] : {}; \r\n\r\n // cuando no encuentra el producto lo limpiamos para simular que no existe y que no es un \r\n // valor valido, no mandamos mensaje por que la version actual tampoco lo hace.\r\n if (response.data.OperationCheckInByCode.length === 0){\r\n\r\n setNomArticuloNew(null); \r\n setClaArticuloNew(null); \r\n setClaveArticuloNew(null); \r\n }\r\n else{\r\n setNomArticuloNew(operationCheckOutByCode.NomArticulo); \r\n setClaArticuloNew(operationCheckOutByCode.ClaArticulo); \r\n setClaveArticuloNew(operationCheckOutByCode.ClaveArticulo); \r\n }\r\n\r\n });\r\n };\r\n\r\n const onChangeContador = (value, item) => {\r\n const copyOperationChangeOverList = [...OperationChangeOverList];\r\n copyOperationChangeOverList[item.RowIndex].Contador = value;\r\n setOperationChangeOverList(copyOperationChangeOverList);\r\n };\r\n\r\n const onSavePostChangeOverClick = async () => {\r\n setErrors({});\r\n\r\n const value = {\r\n ClaveArticulo,\r\n ClaArticuloNew,\r\n Cajas,\r\n CajasNew,\r\n OperationChangeOverList\r\n };\r\n\r\n const validator = new YupValidator(valitationSchemeSave);\r\n const esValido = await validator.validate(value);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning');\r\n return;\r\n }\r\n \r\n let maquinaValues= '';\r\n OperationChangeOverList.forEach((element) => {\r\n maquinaValues+=`${element.IdContador}|${element.ClaMaquina}|${element.Contador},`;\r\n });\r\n\r\n const paramsService = {\r\n IdCelda: ClaCelda,\r\n ClaArticulo,\r\n Cajas,\r\n ClaTurno,\r\n ClaAreaProduccion,\r\n MaquinaValues:maquinaValues,\r\n ScrapLbl: ScrapLbs,\r\n ClaArticuloNew,\r\n CajasNew,\r\n };\r\n\r\n const urlWebService = `${config.UrlApiProject}Operations/SavePostChangeOver`;\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n showNotify(t('common:SaveSuccess'), 'centerTop', 'success'); \r\n homeScreenLink.current.click();\r\n setErrors({});\r\n }); \r\n\r\n };\r\n\r\n\r\n const valitationSchemeSave = yup.object().shape({\r\n ClaveArticulo: yup.string().required(t('common:RequiredField')).nullable(),\r\n ClaArticuloNew: yup.string().required(t('common:RequiredField')).nullable(),\r\n Cajas: yup.number().required(t('common:RequiredField')).nullable(), \r\n CajasNew: yup.number().required(t('common:RequiredField')).nullable(), \r\n OperationChangeOverList: yup.array().of(\r\n yup.object().shape({ \r\n Contador: yup\r\n .number().required(t('common:RequiredField')).nullable(), \r\n })\r\n ),\r\n });\r\n\r\n const showActiveRows = (rows) => {\r\n const activeRows = [];\r\n if (rows !== undefined) {\r\n if (rows.length > 0) {\r\n rows.forEach((item, index) => {\r\n if (!item.BajaLogica || item.BajaLogica === 0 || item.BajaLogica === undefined) {\r\n item.BajaLogica = 0;\r\n item.RowIndex = index;\r\n activeRows.push({ ...item });\r\n }\r\n });\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return activeRows;\r\n };\r\n\r\n const subHeader = ( \r\n \r\n onChangeContador(e.target.value, item)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n // locale=\"en-US\"\r\n // minFractionDigits={2}\r\n IsShowKeyboard={true} \r\n errors={errors[`OperationCheckOutList[${item.RowIndex}]`]} \r\n title={item.NomMaquina}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showActiveRows(OperationChangeOverList).map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ChangeOverScreen;\r\n","import { React, useState, useEffect, useRef } from 'react';\r\nimport Viz from 'components/Tableau/Viz';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { callApi, getSessionItem } from 'utils/utils';\r\nimport { config } from 'utils/config';\r\n\r\nconst ExecutiveOrderTrend = (props) => {\r\n\r\n const [viz, setViz] = useState(null);\r\n\r\n useEffect(() => {\r\n createViz();\r\n }, [])\r\n\r\n const createViz = () => {\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Tableau/GetExecutiveOrderTrendDashAgente?ClaUsuario=${getSessionItem('ClaUsuarioMod', 0)}`;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n // Tableau Dashboard parameters\r\n const params = {};\r\n\r\n // Current Month\r\n const date = new Date();\r\n const [DateParam] = new Date( date.getFullYear(), date.getMonth(), 1).toISOString().split('T');\r\n params.DateParameter = DateParam;\r\n\r\n if (response.data.Agente !== -1) {\r\n // ClaTipoAgente\r\n const IDUSERParam = response.data.Agente.ClaTipoAgente;\r\n params.IDUSER = IDUSERParam;\r\n \r\n // Agent ID or FLMID\r\n if (IDUSERParam === 1) {\r\n params.AgentFLMIDParameter = response.data.Agente.ClaAgenteFLM;\r\n }\r\n else if (IDUSERParam === 2) {\r\n params.AgentIDParameter = response.data.Agente.ClaAgente;\r\n }\r\n }\r\n else {\r\n // Not set up in table\r\n params.IDUSER = 0;\r\n }\r\n\r\n const url = 'https://tableau.deacero.com/views/OrderTrendDashManagersview/MonthlyAgent'\r\n\r\n setViz(\r\n onChangeContador(e.target.value, item)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n mode=\"decimal\"\r\n // locale=\"en-US\"\r\n // minFractionDigits={2}\r\n IsShowKeyboard={true} \r\n errors={errors[`OperationChangeOverList[${item.RowIndex}]`]} \r\n title={item.NomMaquina}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default ExecutiveOrderTrend;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport ExecutiveOrderTrend from './ExecutiveOrderTrend';\r\n\r\nconst ExecutiveOrderTrendScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n No data was found for zone #: {ClaZona}
\r\n \r\nComponent {componentID} is not valid, logic not found, please review this component ID
;\r\n};\r\n\r\nexport default DisplayOperationsDashboards;\r\n","export default __webpack_public_path__ + \"static/media/marker_success.9cb37c42.png\";","export default __webpack_public_path__ + \"static/media/marker_light_green.9cb37c42.png\";","export default __webpack_public_path__ + \"static/media/marker_yellow.8b5c904c.png\";","export default __webpack_public_path__ + \"static/media/marker_orange.23c6f5d3.png\";","export default __webpack_public_path__ + \"static/media/marker_default.b1b5df86.png\";","/* global google */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { Component, useEffect, useState, useMemo, useRef } from 'react';\r\n// import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';\r\nimport { compose, withProps } from 'recompose';\r\nimport { config } from '../../../../../utils/config';\r\nimport { callApi } from '../../../../../utils/utils';\r\nimport { Tag } from 'primereact/tag';\r\nimport { InputSwitch } from 'primereact/inputswitch';\r\nimport { Card, CardBody, Col, Collapse, Container, Label, Nav, Navbar, Row } from 'reactstrap';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport FieldDropdownMultiSelect from 'components/Controls/FieldDropDownMultiSelect/FieldDropdownMultiSelect';\r\nimport FieldCalendar from 'components/Controls/FieldCalendar';\r\nimport { useTranslation } from 'react-i18next';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport { Badge } from 'primereact/badge';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport FieldDataTable from '../../../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport { Column } from 'primereact/column';\r\n// import Geocode from 'react-geocode';\r\nimport { GoogleMap, useJsApiLoader, Polyline, Marker, InfoWindow } from '@react-google-maps/api';\r\nimport icon_sucess from '../../../../../assets/img/icons/marker_success.png';\r\nimport icon_ligh_green from '../../../../../assets/img/icons/marker_light_green.png';\r\nimport icon_yellow from '../../../../../assets/img/icons/marker_yellow.png';\r\nimport icon_orange from '../../../../../assets/img/icons/marker_orange.png';\r\nimport icon_default from '../../../../../assets/img/icons/marker_default.png';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\nimport FieldToogleSwitch from 'components/Controls/FieldToogleSwitch/FieldToogleSwitch';\r\nimport \"./PlanningMap.css\";\r\n\r\nconst PlanningMapSegment = (props) => {\r\n const { t } = useTranslation(['map', 'common']);\r\n const [TextFilterPlannerOpenOrders, setTextFilterPlannerOpenOrders] = useState(null);\r\n const [SegmentoMercadoList, setSegmentoMercadoList] = useState([]);\r\n const [ClaSegmentoMercado, setClaSegmentoMercado] = useState([]);\r\n const [SegmentoMercadoRange, setSegmentoMercadoRange] = useState([]);\r\n const [ReadyToShip, setReadyToShip] = useState(true);\r\n const [Delayed, setDelayed] = useState(true);\r\n const [NotReady, setNotReady] = useState(true);\r\n const mapRef = useRef();\r\n const [EsDialogPlanning, setEsDialogPlanning] = useState(false);\r\n const [EsDialogPlanningBtn, setEsDialogPlanningBtn] = useState(true);\r\n const [Tons, setTons] = useState(0);\r\n const [EsMiPlan, setEsMiPlan] = useState(false);\r\n const [zoom, setZoom] = useState(5);\r\n const [selected, setSelected] = useState(null);\r\n const [OrdersList, setOrdersList] = useState([]);\r\n const [OrdersPendintToShipmentList, setOrdersPendintToShipmentList] = useState([]);\r\n const [SegmentoLeyendasList, setSegmentoLeyendas] = useState([]);\r\n const [sidenavOpen, setsidenavOpen] = useState(true);\r\n // Geocode.setApiKey(config.GoogleKey);\r\n let arratItem = [];\r\n const buttonRef = React.useRef();\r\n\r\n const [center, setcenter] = useState({\r\n lat: 29.74059776564501,\r\n lng: -95.32716633074375,\r\n });\r\n const containerStyle = {\r\n top: '0px',\r\n width: '100%',\r\n height: '100%',\r\n flex: '1 1 0'\r\n };\r\n\r\n const mapOptions = {\r\n scrollwheel: true,\r\n zoomControlOptions: {\r\n style: 'SMALL',\r\n },\r\n mapTypeControlOptions: {\r\n position: 'BOTTOM_RIGHT',\r\n },\r\n draggable: true,\r\n rotateControl: false,\r\n scaleControl: true,\r\n streetViewControl: false,\r\n panControl: true,\r\n styles: [\r\n {\r\n featureType: 'poi',\r\n elementType: 'labels.icon',\r\n stylers: [\r\n {\r\n visibility: 'off',\r\n },\r\n ],\r\n },\r\n ],\r\n };\r\n\r\n const { isLoaded } = useJsApiLoader({\r\n id: 'google-map-script',\r\n googleMapsApiKey: config.GoogleKey,\r\n });\r\n\r\n const [map, setMap] = React.useState(null);\r\n\r\n const onLoad = React.useCallback((map) => {\r\n setZoom(6);\r\n setMap(map);\r\n }, []);\r\n\r\n const onUnmount = React.useCallback((map) => {\r\n setMap(null);\r\n }, []);\r\n\r\n useEffect(() => {\r\n // useEffect por si se quiere realizar una accion al mover el mapa\r\n }, [selected]);\r\n\r\n useEffect(() => {\r\n // useEffect para obtener datos de la dirección\r\n getOperationPlannerSegmentoMercadoCbm();\r\n GetOperationPlannerSegmentoLeyendas(); \r\n }, []);\r\n\r\n const onChangeTextFilterPlannerOpenOrders = (value) => {\r\n setTextFilterPlannerOpenOrders(value);\r\n };\r\n\r\n const onSearchTextFilter = () => {\r\n /*\r\n const GetPlanningService = `${config.UrlApiProject}operations/GetOperationPlannerOpenOrdersList`;\r\n const paramsToService = {\r\n TextSearch: TextFilterPlannerOpenOrders,\r\n };\r\n callApi(GetPlanningService, 'POST', paramsToService, (response) => {\r\n // const markersList = getMarkerList(response.data.OpenOrdersList);\r\n // setOrdersList(markersList);\r\n setOrdersList([]);\r\n getCoordinatesList(response.data.OpenOrdersList);\r\n setOrdersPendintToShipmentList(response.data.OpenOrdersList);\r\n });\r\n */\r\n };\r\n\r\n const getOperationPlannerSegmentoMercadoCbm = () => {\r\n const GetPlanningService = `${config.UrlApiProject}operations/GetOperationPlannerSegmentoMercadoCbm`;\r\n const paramsToService = {};\r\n callApi(GetPlanningService, 'GET', paramsToService, (response) => {\r\n const options = response.data.SegmentoMercado.map((d) => ({\r\n value: d.ClaSegmentoMercado,\r\n label: d.NomSegmentoMercado,\r\n }));\r\n setSegmentoMercadoList(response.data.SegmentoMercado);\r\n });\r\n };\r\n\r\n const GetOperationPlannerSegmentoLeyendas = () => { \r\n setSegmentoLeyendas([{\r\n Id: 1,\r\n Leyenda: 'Ready (FTL)'\r\n },\r\n {\r\n Id: 2,\r\n Leyenda: 'Ready (LTL)'\r\n },\r\n {\r\n Id: 3,\r\n Leyenda: 'Delayed (Ready to ship)'\r\n },\r\n {\r\n Id: 4,\r\n Leyenda: 'Not ready'\r\n }\r\n ]); \r\n };\r\n\r\n const onChangeSegmentoMercado = (e) => {\r\n setClaSegmentoMercado(e.value);\r\n };\r\n\r\n const onSegmentoMercadoRangeChange = (value) => {\r\n setSegmentoMercadoRange(value);\r\n };\r\n\r\n const onPlanning = () => {\r\n setEsDialogPlanning(true);\r\n setEsDialogPlanningBtn(false);\r\n };\r\n\r\n const renderHeaderPlanning = () => {\r\n return (\r\n <>\r\n\r\n \r\n
\r\n \r\n onChangeEsMiPlan(props, e)}\r\n />\r\n \r\n {t('maps:Show only my plan')}\r\n \r\n
\r\n
\r\n \r\n );\r\n };\r\n\r\n const onChangeEsMiPlan = (props, e) => {\r\n setEsMiPlan(!!e.checked);\r\n };\r\n\r\n const onCloseDialogPlanning = () => {\r\n setEsDialogPlanning(false);\r\n setEsDialogPlanningBtn(true);\r\n };\r\n\r\n const OrderPlanningTemplate = (rowData) => {\r\n return (\r\n <>\r\n {t('map:OrdersList')}
\r\n \r\n\r\n \r\n {' '}\r\n {t('maps:Tons')}
\r\n \r\n \r\n onChangeTextFilterPlannerOpenOrders(e.target.value)}\r\n maxLength={250}\r\n // isInputGroup\r\n // classGroup=\"p-inputgroup-addon info Cursor\"\r\n // iconGroup=\"pi pi-search\"\r\n onClick={(e) => onSearchTextFilter()}\r\n label={t('map:Search')}\r\n />\r\n
\r\n \r\n \r\n onChangeSegmentoMercado(e)}\r\n label={t('map:SegmentoMercado')}\r\n >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n setReadyToShip(!ReadyToShip)}\r\n >\r\n \r\n \r\n {t('map:ReadyToShip')}\r\n
\r\n \r\n \r\n setDelayed(!Delayed)}\r\n >\r\n \r\n \r\n {t('map:Delayed')}\r\n
\r\n \r\n \r\n setNotReady(!NotReady)}\r\n >\r\n \r\n \r\n {t('map:NotReady')}\r\n
\r\n \r\n \r\n onClickSearch()}\r\n className=\"p-button\"\r\n // icon=\"pi pi-search\"\r\n label=\"Search\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n {SegmentoLeyendasList.map((element, index) => {\r\n return (\r\n <>\r\n \r\n {element.Tipo}{' '}\r\n {element.Leyenda}\r\n \r\n \r\n );\r\n })}\r\n | \r\n
\r\n {t('tablets:AverageByweek')}\r\n
\r\n {DashboardUtilizationSemanal.length >= 1 ? \r\n ( \r\n DashboardUtilizationSemanal.map((element, index) => {\r\n return ( \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n\r\n \r\n \r\n \r\n { element.FechaInicial === null ? '' : moment(element.FechaInicial).format(\"MMMM DD\") }\r\n - \r\n {\r\n element.FechaFinal === null ? '' : moment(element.FechaFinal).format(\"DD\")\r\n } \r\n \r\n
\r\n \r\n \r\n {t('tablets:CurrentWeek')}\r\n
\r\n {DashboardUtilizationSemanaActual.length >= 1 ? \r\n ( \r\n DashboardUtilizationSemanaActual.map((element, index) => {\r\n return ( \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n \r\n \r\n \r\n { element.FechaDia === null ? '' : moment(element.FechaDia).format(\"MMMM DD\") } \r\n \r\n
\r\n \r\n \r\n {t('tablets:AverageByweek')}\r\n
\r\n {DashboardScrapSemanal.length >= 1 ? \r\n ( \r\n DashboardScrapSemanal.map((element, index) => {\r\n return ( \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n\r\n \r\n \r\n \r\n { element.FechaInicial === null ? '' : moment(element.FechaInicial).format(\"MMMM DD\") }\r\n - \r\n {\r\n element.FechaFinal === null ? '' : moment(element.FechaFinal).format(\"DD\")\r\n } \r\n \r\n
\r\n \r\n \r\n {t('tablets:CurrentWeek')}\r\n
\r\n {DashboardScrapSemanaActual.length >= 1 ? \r\n ( \r\n DashboardScrapSemanaActual.map((element, index) => {\r\n return ( \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }) \r\n ) : (\r\n <>\r\n )} \r\n \r\n \r\n \r\n { element.FechaDia === null ? '' : moment(element.FechaDia).format(\"MMMM DD\") } \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n TableuBMTrakingReportsList.length === 0 \r\n ?\r\n ( \r\n \r\n \r\n There is no report available for signed in user.\r\n \r\n \r\n \r\n )\r\n :\r\n (\r\n <>\r\n )\r\n }\r\n {\r\n TableuBMTrakingReportsList.map((item, index) => {\r\n return ( \r\n \r\n \r\n {item.title} {item.titleComplemento}\r\n \r\n \r\n \r\n \r\n {item.nomUsuario} \r\n \r\n \r\n {item.division}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n )\r\n }\r\n\r\n \r\n
\r\n \r\n {\r\n EsMostrarReporte && \r\n (\r\n setEsMostrarReporte(false)}\r\n header={reportSelectedTitle}\r\n closable={true}\r\n className=\"dialog-header-background-blue\"\r\n maximized={true}\r\n draggable={false}\r\n blockScroll={true}\r\n > \r\n {viz}\r\n \r\n )\r\n } \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default BMTrackingDashboardsScreen;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent.jsx';\r\n\r\nconst TalentPlanningScreen = (props) => { \r\n \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['hr', 'common']); \r\n \r\n \r\n return (\r\n <> \r\n \r\n This landing page was designed to contain Project tracking reports related to boldmoves. \r\n
\r\n \r\n If you consider that you should have access to one of these, please make your request through the project leader.\r\n
\r\n \r\n onViewReport(item.url, `${item.title } ${ item.titleComplemento}`)} className='link'>\r\n View Report\r\n \r\n
\r\n \r\n \r\n
\r\n {formatPhoneNumberNA(p.Valor)}
\r\n \r\n \r\n )\r\n })}\r\n\r\n \r\n ) : <>}\r\n {email.length > 0 ? (\r\n
{p.Valor}
\r\n \r\n \r\n )\r\n })}\r\n\r\n \r\n ) : <>}\r\n {website ? (\r\n
{website}
\r\n \r\n\r\n \r\n ): <>}\r\n {address ? (\r\n
{address}
\r\n \r\n\r\n \r\n ) : <>}\r\n {social.length > 0 ? (\r\n
\r\n onHideShareContactInfo()}\r\n position='center'\r\n draggable={false}\r\n resizable={false}\r\n header={t('qr:ShareContactInfo')}\r\n >\r\n \r\n {onContactPhoneNumberChange(phone)}}\r\n onCountryChange={(c, cc) => {onCountryChange(c, cc)}}\r\n errors={errors}\r\n />\r\n \r\n onSubmitContactInfoClick()}\r\n />\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default BusinessCard;","/* eslint-disable react/forbid-prop-types */\r\n\r\nimport React, {useState, useEffect, useRef} from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Row, Col, Card, CardHeader, CardBody, CardFooter, Label } from 'reactstrap';\r\nimport { callApi, showSweetAlert, formatDate, formatPhoneNumberNA } from \"utils/utils\";\r\nimport { config } from 'utils/config';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable';\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport { Column } from 'primereact/column';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport defaultAvatar from 'assets/img/default-avatar.png';\r\nimport FieldUpload from 'components/Controls/FieldUpload/FieldUpload';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldPhone from 'components/Controls/FieldPhone/FieldPhone';\r\nimport { object, string, number, date, InferType, array } from 'yup';\r\nimport YupValidator from 'utils/YupValidator';\r\n\r\nconst EditBusinessCard = (props) => {\r\n const { t } = useTranslation(['qr', 'common']);\r\n\r\n const [showEditSidebar, setShowEditSidebar] = useState(false);\r\n const [fullName, setFullName] = useState('');\r\n const [jobTitle, setJobTitle] = useState('');\r\n const [templateId, setTemplateId] = useState(null);\r\n const [templates, setTemplates] = useState([]);\r\n const [emails, setEmails] = useState([]);\r\n const [phoneNumbers, setPhoneNumbers] = useState([]);\r\n const [address, setAddress] = useState('');\r\n const [socialLinks, setSocialLinks] = useState([]);\r\n const [userImage, setUserImage] = useState({});\r\n const [selectedClaUsuarioBC, setSelectedClaUsuarioBC] = useState(props.ClaUsuarioBC !== undefined ? props.ClaUsuarioBC : null);\r\n const [errors, setErrors] = useState([]);\r\n const [userImageFile, setUserImageFile] = useState([]);\r\n const [showUploadImageDialog, setShowUploadImageDialog] = useState(false);\r\n const [selectedRow, setSelectedRow] = useState(null);\r\n const [selectedPhoneType, setSelectedPhoneType] = useState(null);\r\n const [selectedEmailType, setSelectedEmailType] = useState(null);\r\n const [selectedSocialType, setSelectedSocialType] = useState(null);\r\n const [selectedPhoneNumber, setSelectedPhoneNumber] = useState('');\r\n const [selectedCountryCode, setSelectedCountryCode] = useState('')\r\n const [selectedCountry, setSelectedCountry] = useState('');\r\n const [selectedEmail, setSelectedEmail] = useState('');\r\n const [selectedSocialLink, setSelectedSocialLink] = useState('');\r\n const [phoneNumberTypes, setPhoneNumberTypes] = useState([]);\r\n const [emailTypes, setEmailTypes] = useState([]);\r\n const [socialTypes, setSocialTypes] = useState([]);\r\n const [templateDetails, setTemplateDetails] = useState({});\r\n\r\n useEffect(() => {\r\n getEmailLabelTypes();\r\n getPhoneLabelTypes();\r\n getSocialLabelTypes();\r\n getBusinessCardTemplates();\r\n getVCardInfo();\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (props.setUserInfo !== undefined && props.userInfo !== undefined) {\r\n const newUserInfo = props.userInfo;\r\n newUserInfo.FullName = fullName;\r\n newUserInfo.JobTitle = jobTitle;\r\n newUserInfo.FullAddress = address;\r\n newUserInfo.TemplateId = templateId;\r\n newUserInfo.contactInfo = {\r\n Phone: phoneNumbers,\r\n Email: emails,\r\n Social: socialLinks\r\n };\r\n newUserInfo.UserImageFile = userImage.file;\r\n newUserInfo.UserImageFileName = userImage.fileName;\r\n newUserInfo.UserImageFileMIMEType = userImage.mimeType;\r\n newUserInfo.BackgroundColor = templateDetails.BackgroundColor;\r\n newUserInfo.UserInfoColor = templateDetails.UserInfoColor;\r\n newUserInfo.SecondaryColor = templateDetails.SecondaryColor;\r\n newUserInfo.ButtonColor = templateDetails.ButtonColor;\r\n newUserInfo.Website = templateDetails.Website;\r\n newUserInfo.CompanyName = templateDetails.CompanyName;\r\n newUserInfo.LogoFile = templateDetails.LogoFile;\r\n newUserInfo.LogoFileName = templateDetails.LogoFileName;\r\n newUserInfo.LogoFileMIMEType = templateDetails.LogoFileMIMEType\r\n \r\n props.setUserInfo({...newUserInfo});\r\n }\r\n }, [fullName, address, jobTitle, templateId, phoneNumbers, emails, socialLinks, userImage, templateDetails])\r\n\r\n const getBusinessCardTemplates = () => { \r\n const url = `${config.UrlApiProject}QRCode/GetBusinessCardTemplates`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setTemplates(response.data);\r\n });\r\n }\r\n\r\n const getBusinessCardTemplateDetails = (mTemplateId) => { \r\n const url = `${config.UrlApiProject}QRCode/GetBusinessCardTemplateDetails?TemplateId=${mTemplateId}`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setTemplateDetails({\r\n TemplateName: response.data.TemplateName,\r\n CompanyName: response.data.CompanyName,\r\n Website: response.data.Website,\r\n SecondaryColor: response.data.SecondaryColor,\r\n UserInfoColor: response.data.UserInfoColor,\r\n BackgroundColor: response.data.BackgroundColor,\r\n ButtonColor: response.data.ButtonColor,\r\n LogoFile: response.data.LogoFile,\r\n LogoFileName: response.data.LogoFileName,\r\n LogoFileMIMEType: response.data.LogoFileMIMEType\r\n });\r\n });\r\n }\r\n\r\n const getSocialLabelTypes = () => { \r\n const url = `${config.UrlApiProject}QRCode/GetBusinessCardLabels?ClaTipoDBCContact=3`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setSocialTypes(response.data);\r\n });\r\n }\r\n\r\n const getPhoneLabelTypes = () => { \r\n const url = `${config.UrlApiProject}QRCode/GetBusinessCardLabels?ClaTipoDBCContact=1`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setPhoneNumberTypes(response.data);\r\n });\r\n }\r\n\r\n const getEmailLabelTypes = () => { \r\n const url = `${config.UrlApiProject}QRCode/GetBusinessCardLabels?ClaTipoDBCContact=2`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setEmailTypes(response.data);\r\n });\r\n }\r\n\r\n const getVCardInfo = () => {\r\n const url = `${config.UrlApiProject}QRCode/GetVCardInfo?ClaUsuario=${selectedClaUsuarioBC}`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n setFullName(response.data.info.FullName);\r\n setJobTitle(response.data.info.JobTitle);\r\n setAddress(response.data.info.FullAddress);\r\n setTemplateId(response.data.info.TemplateId);\r\n setEmails(response.data.contactInfo.Email);\r\n setPhoneNumbers(response.data.contactInfo.Phone);\r\n setSocialLinks(response.data.contactInfo.Social);\r\n setUserImage({\r\n file: response.data.info.UserImageFile,\r\n fileName: response.data.info.UserImageFileName,\r\n mimeType: response.data.info.UserImageFileMIMEType\r\n });\r\n\r\n if (props.setUserInfo !== undefined) {\r\n props.setUserInfo({\r\n FullName: response.data.info.FullName,\r\n JobTitle: response.data.info.JobTitle,\r\n CompanyName: response.data.info.CompanyName,\r\n FullAddress: response.data.info.FullAddress,\r\n TemplateId: response.data.info.TemplateId,\r\n contactInfo: response.data.contactInfo,\r\n UserImageFile: response.data.info.UserImageFile,\r\n UserImageFileName: response.data.info.UserImageFileName,\r\n UserImageFileMIMEType: response.data.info.UserImageFileMIMEType,\r\n LogoFile: response.data.info.LogoFile,\r\n LogoFileName: response.data.info.LogoFileName,\r\n LogoFileMIMEType: response.data.info.LogoFileMIMEType,\r\n BackgroundColor: response.data.info.BackgroundColor,\r\n UserInfoColor: response.data.info.UserInfoColor,\r\n SecondaryColor: response.data.info.SecondaryColor,\r\n ButtonColor: response.data.info.ButtonColor\r\n })\r\n\r\n getBusinessCardTemplateDetails(response.data.info.TemplateId);\r\n }\r\n\r\n });\r\n }\r\n\r\n const onFullNameChange = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.fullName;\r\n setErrors(newErrors);\r\n setFullName(e.target.value);\r\n\r\n if (props.userInfo !== undefined) {\r\n const newUserInfo = props.userInfo;\r\n newUserInfo.FullName = e.target.value;\r\n props.setUserInfo({...newUserInfo});\r\n }\r\n }\r\n\r\n const onJobTitleChange = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.jobTitle;\r\n setErrors(newErrors);\r\n setJobTitle(e.target.value);\r\n }\r\n\r\n const onAddressChange = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.address;\r\n setErrors(newErrors);\r\n setAddress(e.target.value);\r\n }\r\n\r\n const onTemplateChange = (e) => {\r\n const newErrors = {...errors};\r\n delete newErrors.templateId;\r\n setErrors(newErrors);\r\n setTemplateId(e.value);\r\n getBusinessCardTemplateDetails(e.value);\r\n }\r\n\r\n const onUserImageFileChange = (files) => {\r\n const newErrors = {...errors};\r\n delete newErrors.userImageFile;\r\n setErrors(newErrors);\r\n setUserImageFile(files)\r\n }\r\n\r\n const onHideUploadImageDialog = () => {\r\n setShowUploadImageDialog(false);\r\n setUserImageFile([]);\r\n }\r\n\r\n const onSubmitUserImageClick = async () => {\r\n\r\n const validationScheme = object({\r\n userImageFile: array().min(1, t('common:RequiredField')).nullable()\r\n });\r\n \r\n const value = {\r\n userImageFile\r\n }\r\n\r\n const validator = new YupValidator(validationScheme);\r\n const isValid = await validator.validate(value);\r\n\r\n if (!isValid) {\r\n setErrors(validator.errors);\r\n return;\r\n }\r\n\r\n const fileExtension = userImageFile[0].FileExtension.toLowerCase();\r\n\r\n setUserImage({\r\n file: userImageFile[0].FileData,\r\n fileName: userImageFile[0].FileName,\r\n mimeType: fileExtension === '.gif' ? 'image/gif'\r\n : fileExtension === '.jpg' || fileExtension === '.jpeg' ? 'image/jpeg'\r\n : fileExtension === '.png' ? 'image/png'\r\n : fileExtension === '.svg' ? 'image/svg+xml'\r\n : 'application/unknown'\r\n });\r\n\r\n const newErrors = {...errors};\r\n delete newErrors.userImage;\r\n setErrors(newErrors);\r\n\r\n onHideUploadImageDialog();\r\n }\r\n\r\n const renderUserImage = () => {\r\n if (userImage.file !== null) {\r\n return (\r\n \r\n \r\n
\r\n \r\n {renderContactInfo()}\r\n
\r\n \r\n setShowShareContactInfo(true)}\r\n />\r\n \r\n
\r\n {!isEditorMode ? (\r\n <>\r\n 500 ? `${(windowDimensions.width / 2) - (250) + 40}px` : '40px',\r\n color:'white',\r\n backgroundColor: buttonColor,\r\n borderColor: 'white',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n borderRadius: '50%'\r\n }}\r\n onClick={() => downloadVCardFile()}\r\n >\r\n \r\n \r\n \r\n ) : <> }\r\n
\r\n \r\n {renderLogo()}\r\n
\r\n \r\n {userName}
\r\n \r\n{jobTitle}
\r\n \r\n{companyName}
\r\n \r\n\r\n {renderContactButtons()}\r\n
\r\n \r\n {row === selectedRow ? (\r\n onSavePhoneNumberClick(row)} />\r\n ) : <>}\r\n onDeleteContactRowClick(row)} />\r\n
\r\n )\r\n }\r\n\r\n const emailOptionsTemplate = (row) => {\r\n return (\r\n \r\n {row === selectedRow ? (\r\n onSaveEmailClick(row)} />\r\n ) : <>}\r\n onDeleteContactRowClick(row)} />\r\n
\r\n )\r\n }\r\n\r\n const socialLinkOptionsTemplate = (row) => {\r\n return (\r\n \r\n {row === selectedRow ? (\r\n onSaveSocialLinkClick(row)} />\r\n ) : <>}\r\n onDeleteContactRowClick(row)} />\r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n {t('qr:Edit Business Card')}
\r\n */}\r\n {t('qr:AcceptedImageTypesProfilePic')}
\r\n {t('qr:RecommendedProfilePicSize')}
\r\n \r\n \r\n setShowColorPicker(!showColorPicker)}\r\n style={{backgroundColor: buttonBackground, borderColor: getBorderColor(), color: getIconColor()}}\r\n />\r\n
\r\n \r\n \r\n {getFormErrorMessage(props.name)}\r\n { showColorPicker ? (\r\n \r\n
\r\n ) : <> }\r\n {/* \r\n {renderLogo()}\r\n
\r\n {t('qr:AcceptedImageTypes')}
\r\n {t('qr:RecommendedLogoSize')}
\r\n \r\n \r\n onAddNewBusinessCardUserClick()}\r\n />\r\n
\r\n )\r\n\r\n const filterHeaderTemplate = (options) => {\r\n const toggleIcon = options.collapsed ? 'pi pi-chevron-down text-white' : 'pi pi-chevron-up text-white';\r\n const className = `${options.className} p-jc-start`;\r\n const titleClassName = `${options.titleClassName} p-pl-1`;\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n Export to Excel\r\n \r\n \r\n
\r\n \r\n stringColumn(row, 'IdPedido')}> \r\n stringColumn(row, 'ClaveFactura')}> \r\n stringColumn(row, 'ClaCuC')}> \r\n stringColumn(row, 'NomCUC')}> \r\n {\r\n /*\r\n stringColumn(row, 'ClaveArticulo')}> \r\n */\r\n }\r\n stringColumn(row, 'NomArticulo')}> \r\n stringColumn(row, 'Unidad')}> \r\n integerColumn(row, 'Qty')}> \r\n priceColumn(row, 'Price_qty')}> \r\n priceColumn(row, 'Revenue')}> \r\n numericColumn(row, 'MTTons')}> \r\n priceColumn(row, 'PriceTon')}> \r\n priceColumn(row, 'FreightbyTon')}> \r\n priceColumn(row, 'PriceTonGross')}> \r\n dateColumn(row, 'FechaFactura')}> \r\n stringColumn(row, 'ShipToName')}> \r\n stringColumn(row, 'NomAgenteVenta')}> \r\n stringColumn(row, 'NomGrupoEstadistico1')}> \r\n stringColumn(row, 'NomGrupoEstadistico2')}> \r\n stringColumn(row, 'NomGrupoEstadistico3')}> \r\n stringColumn(row, 'NomSegmento')}> \r\n stringColumn(row, 'IdFactura')}> \r\n dateColumn(row, 'FechaPedido')}> \r\n dateColumn(row, 'NeededDate')}> \r\n dateColumn(row, 'PromiseDate')}> \r\n \r\n \r\n
\r\n
\r\n ); \r\n};\r\n\r\nexport default SalesDashboardDetailInvoices;\r\n","/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { Column } from 'primereact/column';\r\nimport { Row, Col , \r\n ListGroupItem,\r\n ListGroup,\r\n Progress,\r\n Card,\r\n CardHeader,\r\n CardBody,\r\n CardFooter} from 'reactstrap'; \r\nimport { Panel } from 'primereact/panel';\r\nimport { Ripple } from 'primereact/ripple'; \r\nimport { Badge } from 'primereact/badge';\r\nimport { Link } from \"react-router-dom\";\r\nimport { config } from '../../../utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert } from '../../../utils/utils'; \r\nimport Score from '../../../components/Cards/Score/Score.jsx'\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport Highcharts from 'highcharts';\r\nimport moment from 'moment';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport { ColumnGroup } from 'primereact/columngroup';\r\n\r\nconst SalesDashboardAccountSummary = ({ClaUsuarioSalesRep, AnioMes, EstatusTipoCliente, ClaClienteCuenta}) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['salesDashboard', 'common']);\r\n \r\n const [AccountSummaryInfo, setAccountSummaryInfo] = useState([]); \r\n const [EncabezadosAccountSummary, setEncabezadosAccountSummary] = useState({}); \r\n\r\n const AccountSummaryInfoGrid = useRef(null);\r\n\r\n\r\n useEffect(() => { \r\n // consultamos la informacion\r\n getSalesWTWDashboardAccountSummary();\r\n }, [AnioMes, ClaUsuarioSalesRep, EstatusTipoCliente, ClaClienteCuenta]); \r\n\r\n const getSalesWTWDashboardAccountSummary = () => { \r\n const GetSalesWTWDashboardAccountSummary = `${config.UrlApiProject}SalesPerformanceSales/GetSalesWTWDashboardAccountSummary`; \r\n const paramsToService = { \r\n AnioMes: AnioMes !== undefined ? AnioMes : null, \r\n EstatusTipoCliente: EstatusTipoCliente !== undefined ? EstatusTipoCliente : null,\r\n ClaUsuarioSalesRep: ClaUsuarioSalesRep !== undefined ? ClaUsuarioSalesRep : null , \r\n ClaClienteCuenta: ClaClienteCuenta !== undefined ? ClaClienteCuenta : null\r\n }; \r\n\r\n console.log('paramsToService', paramsToService);\r\n\r\n callApi(GetSalesWTWDashboardAccountSummary, 'POST', paramsToService, (response) => { \r\n setEncabezadosAccountSummary(response.data.AccountSummaryHeader.length > 0 ? response.data.AccountSummaryHeader[0] : {}) \r\n setAccountSummaryInfo(response.data.AccountSummaryInfo);\r\n \r\n\r\n });\r\n } \r\n \r\n const header = (\r\n <> \r\n );\r\n\r\n const stringColumn = (row, columnName) => {\r\n return (\r\n <>\r\n {row[columnName]}\r\n \r\n );\r\n } \r\n\r\n const integerColumn = (row, columnName) => {\r\n\r\n if (row[columnName] === null){\r\n return (<>);\r\n }\r\n\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 0, '.', ',')}\r\n \r\n );\r\n } \r\n \r\n const numericColumn = (row, columnName) => {\r\n if (row[columnName] === null){\r\n return (<>);\r\n }\r\n\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n );\r\n } \r\n\r\n const priceColumn = (row, columnName) => {\r\n if (row[columnName] === null){\r\n return (<>);\r\n }\r\n\r\n return (\r\n <>\r\n ${Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n );\r\n } \r\n\r\n const dateColumn = (row, columnName) => {\r\n if (row[columnName] === null){\r\n return (<>);\r\n }\r\n\r\n return (\r\n <>\r\n {moment(row[columnName]).format('MM/DD/YYYY')}\r\n \r\n );\r\n } \r\n\r\n const numericColumnMes = (row, columnName) => {\r\n if (row[columnName] === null){\r\n return (<>);\r\n }\r\n \r\n if (row.ComparablePeriodo !== 0 && row.ComparablePeriodo !== null){\r\n\r\n if ((row[columnName]/row.ComparablePeriodo)*100.0 > 90.0)\r\n {\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n ); \r\n }\r\n\r\n if ((row[columnName]/row.ComparablePeriodo)*100.0 > 70.0 && (row[columnName]/row.ComparablePeriodo)*100.0 < 90.0)\r\n {\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n ); \r\n }\r\n\r\n if ((row[columnName]/row.ComparablePeriodo)*100.0 < 70.0)\r\n {\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n ); \r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {Highcharts.numberFormat(row[columnName], 2, '.', ',')}\r\n \r\n );\r\n } \r\n\r\n const footer = ( \r\n <> \r\n \r\n \r\n \r\n \r\n Export to Excel\r\n \r\n \r\n
\r\n \r\n stringColumn(row, 'ClaClienteCuenta')}> \r\n stringColumn(row, 'NomClienteCuenta')}> \r\n dateColumn(row, 'UltimaCompra')}> \r\n stringColumn(row, 'SituacionActualCliente')}> \r\n numericColumn(row, 'AnioAnterior4PromTons')}> \r\n numericColumn(row, 'AnioAnterior3PromTons')}> \r\n numericColumn(row, 'AnioAnterior2PromTons')}> \r\n numericColumn(row, 'AnioAnterior1PromTons')}> \r\n numericColumn(row, 'AnioActualPromTons')}> \r\n numericColumnMes(row, 'Enero')}> \r\n numericColumnMes(row, 'Febrero')}> \r\n numericColumnMes(row, 'Marzo')}> \r\n numericColumnMes(row, 'Abril')}> \r\n numericColumnMes(row, 'Mayo')}> \r\n numericColumnMes(row, 'Junio')}> \r\n numericColumnMes(row, 'Julio')}> \r\n numericColumnMes(row, 'Agosto')}> \r\n numericColumnMes(row, 'Septiembre')}> \r\n numericColumnMes(row, 'Octubre')}> \r\n numericColumnMes(row, 'Noviembre')}> \r\n numericColumnMes(row, 'Diciembre')}> \r\n \r\n \r\n
\r\n
\r\n ); \r\n};\r\n\r\nexport default SalesDashboardAccountSummary;\r\n","/* eslint-disable radix */\r\n/* eslint-disable react/no-this-in-sfc */\r\n/* eslint-disable object-shorthand */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Column } from 'primereact/column';\r\nimport { Row,Col,Card, CardBody, CardHeader, CardTitle, CardFooter} from 'reactstrap'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi, showSweetAlert, getSessionItem } from '../../../utils/utils';\r\nimport Highcharts from 'highcharts';\r\nimport SparkLine from '../../../components/Charts/SparkLine/SparkLine.jsx'\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport new_customer from '../../../assets/img/icons/new_customer.png'\r\nimport active_customer from '../../../assets/img/icons/active_customer.png'\r\nimport inactive_customer from '../../../assets/img/icons/inactive_customer.png'\r\nimport truck_load_promised from '../../../assets/img/icons/truck_load_promised.png'\r\nimport customer_service_operations from '../../../assets/img/icons/customer_service_operations.png'\r\n\r\n\r\nimport avatar1 from '../../../assets/img/icons/avatar-1.png'\r\nimport avatar2 from '../../../assets/img/icons/avatar-2.png'\r\nimport avatar3 from '../../../assets/img/icons/avatar-3.png'\r\nimport avatar4 from '../../../assets/img/icons/avatar-4.png' \r\nimport { DataTable } from 'primereact/datatable';\r\nimport { ColumnGroup } from 'primereact/columngroup';\r\nimport moment from \"moment\";\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport { row } from 'mathjs';\r\nimport FieldTag from 'components/Controls/FieldTag';\r\nimport SalesDashboardDetailInvoices from './SalesDashboardDetailInvoices';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride'; \r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport InstructionsCard from 'components/Cards/InstructionsCard/InstructionsCard';\r\nimport SalesDashboardAccountSummary from './SalesDashboardAccountSummary';\r\nimport FieldSelectButton from 'components/Controls/FieldSelectButton';\r\n\r\n\r\nconst SalesDashboard = ({ ClaUsuario }) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['salesDashboard', 'common']);\r\n const [salesDashboardInfo, setsalesDashboardInfo] = useState({}); \r\n const [tonsSold, settonsSold] = useState({}); \r\n const [revenue, setrevenue] = useState({}); \r\n const [tonsPlanned, settonsPlanned] = useState({}); \r\n const [todaySold, settodaySold] = useState({}); \r\n const [tonsBySegmentList, settonsBySegmentList] = useState([]); \r\n const [spread, setspread] = useState({}); \r\n const [customer, setcustomer] = useState({}); \r\n const [promisedInfo, setpromisedInfo] = useState({}); \r\n const [myTeamList, setmyTeamList] = useState({}); \r\n const [currentWeek, setcurrentWeek] = useState({}); \r\n const [chartOptions, setchartOptions] = useState({}); \r\n const [chartRevenue, setchartRevenue] = useState({}); \r\n const [chartSpread, setchartSpread] = useState({}); \r\n const [chartCurrentMonth, setchartCurrentMonth] = useState({}); \r\n const [chartCurrentWeek, setchartCurrentWeek] = useState({}); \r\n const [chartTonsBySegment, setchartTonsBySegment] = useState({}); \r\n const [myTeam, setmyTeam] = useState([]);\r\n const [IsLoading, setIsLoading] = useState(true);\r\n const [byStatisticalGpo2List, setbyStatisticalGpo2List] = useState([]); \r\n const [byCustomerAccountList, setbyCustomerAccountList] = useState([]); \r\n const [TonsByCategoryList, setTonsByCategoryList] = useState([\r\n {\r\n ClaCategoria: 1,\r\n NomCategoria: 'Segment'\r\n },\r\n {\r\n ClaCategoria: 2,\r\n NomCategoria: 'Statistical Gpo 3'\r\n },\r\n {\r\n ClaCategoria: 3,\r\n NomCategoria: 'Customer (Account)'\r\n }\r\n ]);\r\n const [ClaCategoria, setClaCategoria] = useState(1);\r\n const [EsMostrarDetalleFacturacion, setEsMostrarDetalleFacturacion] = useState(false);\r\n const [AnioMes, setAnioMes] = useState(null);\r\n const [FechaSeleccionada, setFechaSeleccionada] = useState(null);\r\n const [EsShowNewOrder, setEsShowNewOrder] = useState(false);\r\n const [EstatusTipoCliente, setEstatusTipoCliente] = useState(null);\r\n const [TipoDetalleInformacion, setTipoDetalleInformacion] = useState(null);\r\n const [IsRunTour, setIsRunTour] = useState(false); \r\n const [EsMostrarAccountSummary, setEsMostrarAccountSummary] = useState(false);\r\n \r\n const [TipoObjetivo, setTipoObjetivo] = useState(1);\r\n const tipoObjetivoFilterOptions = [\r\n {name: t('salesDashboard:PVO'), value: 1},\r\n {name: t('salesDashboard:Compensation'), value: 2} \r\n ];\r\n\r\n const onStartTour = () =>{ \r\n setIsRunTour(true);\r\n }\r\n\r\n const handleJoyrideCallback = (data) => {\r\n const { status, type } = data;\r\n const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];\r\n\r\n if (finishedStatuses.includes(status)) {\r\n setIsRunTour(false);\r\n } \r\n }; \r\n\r\n\r\n useEffect(() => { \r\n obtieneSalesDashboard(TipoObjetivo); \r\n \r\n /* \r\n obtieneSalesDashboardInfo();\r\n obtieneSalesDasboardInfo2();\r\n setmyTeam([\r\n {name: 'Madison Huges',\"email\":\"madison@gmail.com\", \"avatar\":\"avatar-1.png\", planned: 105, sold: 90, promised: 10, esPositivo:1,porcentaje:\"31.8\"},\r\n {name: 'Joseph Wiliams',\"email\":\"joseph@gmail.com\", \"avatar\":\"avatar-2.png\", planned: 70, sold: 50, promised: 10, esPositivo:1,porcentaje:\"10.5\"},\r\n {name: 'Emily Clark',\"email\":\"emily@gmail.com\", \"avatar\":\"avatar-3.png\", planned: 50, sold: 50, promised: 0, esPositivo:1,porcentaje:\"1.2\"},\r\n {name: 'Tim Jonshon',\"email\":\"tim@gmail.com\", \"avatar\":\"avatar-4.png\", planned: 150, sold: 200, promised: 25,esPositivo:0,porcentaje:\"8.5\"},\r\n ]);\r\n */\r\n }, [ClaUsuario]);\r\n \r\n Highcharts.wrap(Highcharts.Series.prototype, 'drawPoints', function(p) {\r\n const {options} = this;\r\n const symbolCallback = options.marker && options.marker.symbolCallback;\r\n const {points} = this;\r\n if (symbolCallback && points.length) {\r\n points.forEach(point => {\r\n const symbol = symbolCallback.call(point);\r\n if (symbol) {\r\n point.update({\r\n marker: {\r\n fillColor: symbol\r\n }\r\n }, false)\r\n }\r\n })\r\n }\r\n p.call(this);\r\n })\r\n\r\n const obtieneSalesDashboard = (tipoObjetivo) => {\r\n const urlGetSalesDashboard = `${config.UrlApiProject}SalesPerformanceSales/GetSalesWTWDashboard?ClaUsuarioSalesRep=${ ClaUsuario === null || typeof(ClaUsuario) === 'undefined' ? '' : ClaUsuario}&TipoObjetivo=${ tipoObjetivo === null || typeof(tipoObjetivo) === 'undefined' ? '1' : tipoObjetivo}`; \r\n const paramsToService = {};\r\n callApi(urlGetSalesDashboard, 'GET', paramsToService, (response) => {\r\n console.log('response.data',response.data);\r\n const dataSalesDashboardInfo = response.data.SalesDashboardInfo[0];\r\n setAnioMes(dataSalesDashboardInfo.AnioMes);\r\n\r\n // const dataTonsSoldStadistic = response.data.TonsSoldSerie[0];\r\n // const dataRevenueStadistic = response.data.RevenueSerie[0];\r\n const dataCurrentMonthCategories = response.data.CurrentMonthCategories;\r\n const dataCurrentMonthSeries = response.data.CurrentMonthSeries;\r\n \r\n // const dataCurrentWeekCategories = response.data.CurrentWeekCategories;\r\n // const dataCurrentWeekSeries = response.data.CurrentWeekSeries;\r\n const dataBySegmentCategories = response.data.BySegmentCategories;\r\n const dataBySegmentSeries = response.data.BySegmentSeries;\r\n const dataBySegmentList = response.data.BySegmentList;\r\n // const dataSpreadInfoSerie = response.data.SpreadInfoSerie[0];\r\n const dataMyTeamList = response.data.MyTeamList;\r\n \r\n // TONS SOLD\r\n setsalesDashboardInfo(dataSalesDashboardInfo);\r\n /*\r\n if(dataTonsSoldStadistic!==undefined){\r\n setchartOptions({\r\n xAxis: { \r\n categories: []\r\n },\r\n series: [{ \r\n name: '',\r\n data: dataTonsSoldStadistic.data \r\n } \r\n ],\r\n tooltip: {\r\n headerFormat: ` Tons \r\n
\r\n * Years column representing the average of purchased tons during the period.
\r\n \r\n
\r\n \r\n Current Situation = GP: > 90% , NA: > 70% and < 90%, NSA: < 70 % comparing vs last period comparable.
\r\n {point.x} `,\r\n },\r\n chart: {\r\n type: 'area'\r\n }\r\n })\r\n } \r\n */\r\n \r\n // TONS PLANNED\r\n // CURRENT MONTH\r\n setchartCurrentMonth({\r\n chart: { \r\n height: '348px'\r\n },\r\n title: {\r\n align: 'center',\r\n text: ''\r\n },\r\n subtitle: {\r\n align: 'left',\r\n text: ''\r\n },\r\n accessibility: {\r\n announceNewData: {\r\n enabled: true\r\n }\r\n },\r\n xAxis: {\r\n title: {\r\n text: 'Days'\r\n },\r\n categories: dataCurrentMonthCategories,\r\n plotLines: [{\r\n color: '#FF0000', // Red\r\n dashStyle: 'dash',\r\n width: 1,\r\n value: parseInt(moment(new Date()).format('DD'))-1 // Position, you'll have to translate this to the values on your x axis\r\n }]\r\n },\r\n yAxis: {\r\n title: {\r\n text: 'Tons'\r\n }\r\n }, \r\n legend: {\r\n enabled: true\r\n },\r\n tooltip: {\r\n headerFormat: ' ',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n series: [\r\n { \r\n type: 'area',\r\n name: 'Goal',\r\n data: dataCurrentMonthSeries[0].data, \r\n showInLegend: true, \r\n color: dataCurrentMonthSeries[0].color,\r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,0,'.',',') }`;\r\n }\r\n },\r\n marker: {\r\n enabled: false\r\n }\r\n },\r\n {\r\n type: 'line',\r\n name: 'Invoiced',\r\n data: dataCurrentMonthSeries[1].data, \r\n color: dataCurrentMonthSeries[1].color,\r\n showInLegend: true, \r\n dataLabels:{\r\n enabled:true, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,0,'.',',') }`;\r\n }\r\n },\r\n marker: { \r\n fillColor: 'white',\r\n lineWidth: 2,\r\n lineColor: dataCurrentMonthSeries[1].color,\r\n symbolCallback: function() { \r\n let budget = null;\r\n \r\n // console.log('symbollCallback', '');\r\n\r\n if (dataCurrentMonthSeries[0].data.length > 0) {\r\n budget = dataCurrentMonthSeries[0].data[this.index];\r\n } \r\n \r\n if (this.y < budget){ \r\n return 'red';\r\n }\r\n\r\n if (this.y >= budget){ \r\n return 'MediumSeaGreen';\r\n } \r\n \r\n \r\n \r\n return 'white';\r\n } \r\n },\r\n cursor: 'pointer', \r\n point: {\r\n events: {\r\n click: function() {\r\n onCurrentMonthDailyInfoClick('Invoiced', this.category, dataSalesDashboardInfo.AnioMes);\r\n }\r\n }\r\n } \r\n },\r\n {\r\n type: 'line',\r\n name: 'New Orders',\r\n data: dataCurrentMonthSeries[2].data, \r\n color: dataCurrentMonthSeries[2].color,\r\n showInLegend: true, \r\n dataLabels:{\r\n enabled:false, \r\n formatter: function() { \r\n const { x, y, point, series } = this; \r\n return `${Highcharts.numberFormat(y,0,'.',',') }`;\r\n }\r\n },\r\n marker: {\r\n enabled: false\r\n },\r\n cursor: 'pointer', \r\n point: {\r\n events: {\r\n click: function() {\r\n onCurrentMonthDailyInfoClick('NewOrders', this.category, dataSalesDashboardInfo.AnioMes);\r\n }\r\n }\r\n } \r\n }\r\n ]\r\n });\r\n \r\n \r\n if(dataBySegmentCategories!==undefined){\r\n \r\n // TONS BY SEGMENT\r\n setchartTonsBySegment({\r\n chart: {\r\n type: 'bar',\r\n height: '60px' \r\n },\r\n title: {\r\n align: 'center',\r\n text: ''\r\n }, \r\n xAxis: {\r\n visible:false,\r\n categories: dataBySegmentCategories\r\n },\r\n yAxis: { \r\n visible:false\r\n },\r\n legend: {\r\n enabled: false\r\n },\r\n plotOptions: {\r\n series: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: false\r\n }\r\n }\r\n },\r\n tooltip: {\r\n enabled: true,\r\n headerFormat: 'Segment
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n series: dataBySegmentSeries\r\n });\r\n\r\n }\r\n\r\n \r\n settonsBySegmentList(dataBySegmentList);\r\n \r\n setmyTeamList(dataMyTeamList);\r\n setbyStatisticalGpo2List(response.data.ByStatisticalGpo3); \r\n setbyCustomerAccountList(response.data.ByCustomerAccount); \r\n setIsLoading(false);\r\n // setIsRunTour(true);\r\n });\r\n }; \r\n\r\n\r\n const NameTemplate = (rowData) => {\r\n \r\n return (\r\n <>\r\n
\r\n
| \r\n
\r\n
\r\n ):(\r\n \r\n {rowData.MontoResultado}% \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n );\r\n}\r\n\r\nconst plannedBodyTemplate = (rowData) => {\r\n return `${Highcharts.numberFormat(rowData.Planned,0,'.',',')}`;\r\n}\r\n\r\nconst soldBodyTemplate = (rowData) => {\r\n return Highcharts.numberFormat(rowData.Sold,0,'.',',') ;\r\n}\r\n\r\nconst promisedBodyTemplate = (rowData) => {\r\n return Highcharts.numberFormat(rowData.Promised,0,'.',',') ;\r\n} \r\n\r\nconst EstatusCUCTemplate = (rowData) =>{\r\n return (\r\n <>\r\n {\r\n rowData.EstatusTipoCliente === 1 &&\r\n (\r\n <> \r\n \r\n {rowData.MontoResultado}% \r\n \r\n \r\n
\r\n \r\n Invoiced Tons\r\n
\r\n \r\n \r\n {\r\n salesDashboardInfo.TonsSoldEsArribaPresupuesto>0\r\n ?\r\n (<>You are currently at {Highcharts.numberFormat(salesDashboardInfo.TonsSold,0,'.',',') } tons. You are doing great and above the mark by {Highcharts.numberFormat(salesDashboardInfo.TonsSold-salesDashboardInfo.TonsSoldExpectedCurrentDay,0,'.',',') } tons! Keep up the good work!) \r\n :\r\n (\r\n <>You are currently at {Highcharts.numberFormat(salesDashboardInfo.TonsSold,0,'.',',') } tons, which is {Highcharts.numberFormat(salesDashboardInfo.TosnSoldPercentageVsCurrentDay,2,'.',',') }% below your goal of {Highcharts.numberFormat(salesDashboardInfo.TonsSoldExpectedCurrentDay,0,'.',',') } tons as of today. You are missing the mark by {Highcharts.numberFormat(salesDashboardInfo.TonsSoldExpectedCurrentDay-salesDashboardInfo.TonsSold,0,'.',',') } tons.\r\n \r\n )\r\n } \r\n \r\n
\r\n \r\n )\r\n } ,\r\n {\r\n target: '.WTW-Step-3',\r\n content: (\r\n <>\r\n \r\n Goal Tons\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-4',\r\n content: (\r\n <>\r\n \r\n To meet your target of {Highcharts.numberFormat(salesDashboardInfo.MonthValue,0,'.',',')} tons this month, we need to invoice about {Highcharts.numberFormat(salesDashboardInfo.DailyGoal,0,'.',',')} tons per day. \r\n\r\n
\r\n {\r\n salesDashboardInfo.DailyGoalIncreasedEsArribaPresupuesto > 0\r\n ? \r\n (\r\n <>\r\n \r\n
\r\n However, we need to increase our daily goal by {Highcharts.numberFormat(salesDashboardInfo.DailyGoalIncreasedPercentage,2,'.',',')}% to invoice {Highcharts.numberFormat(salesDashboardInfo.DailyGoalIncreased,0,'.',',')} tons per day for the rest of the month.\r\n
\r\n \r\n )\r\n :\r\n (<>)\r\n }\r\n \r\n \r\n Current Month - Daily invoiced tons Vs Daily Goal\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-5',\r\n content: (\r\n <>\r\n \r\n This chart presents a comparison of three key data series for the current month:\r\n
\r\n
\r\n
\r\n Note: The vertical red dashed line indicates the current day of the month, offering a reference point for real-time analysis.\r\n
\r\n \r\n \r\n
\r\n
- \r\n
- \r\n Goal\r\n Track the daily goal for tonnage, estimated based on working days of this month. This provides a benchmark to gauge performance.\r\n \r\n
- \r\n Invoiced\r\n Visualize the daily tons invoiced. By clicking on a marker, you can access a detailed list of each invoice considered for that specific day.\r\n \r\n
- \r\n New Orders\r\n View the tons entered per day, based on the date the order was placed. Clicking on a marker allows you to explore a comprehensive list of each order entered on the selected day.\r\n \r\n
\r\n Note: The vertical red dashed line indicates the current day of the month, offering a reference point for real-time analysis.\r\n
\r\n Accounts behavior this month\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-6',\r\n content: (\r\n <>\r\n \r\n This comprehensive chart allows you to analyze three distinct series related to accounts behavior for the current month:\r\n
\r\n
\r\n
\r\n Note: Clicking on the respective number will grant you access to a detailed list of all invoices associated with that particular category. This enables you to delve deeper into the invoicing details and gain a comprehensive understanding of account behavior.\r\n
\r\n \r\n \r\n
\r\n
- \r\n
- \r\n New\r\n This category represents accounts for which we have invoiced something for the first time this month.\r\n \r\n
- \r\n Recovered\r\n These accounts demonstrate invoicing activity this month after a period of inactivity lasting three months. It highlights accounts that have re-engaged with our services or products.\r\n \r\n
- \r\n Recurrent\r\n Accounts that have been invoiced this month and have displayed invoicing activity at least once in the past three months. It reflects the consistent engagement of long-standing customers.\r\n \r\n
\r\n Note: Clicking on the respective number will grant you access to a detailed list of all invoices associated with that particular category. This enables you to delve deeper into the invoicing details and gain a comprehensive understanding of account behavior.\r\n
\r\n Total Accounts\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-7',\r\n content: (\r\n <>\r\n \r\n
\r\n \r\n - \r\n
- \r\n Active\r\n Total number of accounts that have had at least one invoicing event within the past three months.\r\n \r\n
- \r\n Inactive\r\n Total accounts without any invoicing in the last 3 months. This analysis helps us understand the engagement level of our accounts and identify potential areas for re-engagement or customer retention strategies..\r\n \r\n
\r\n Overdue Tons by Needed Date\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-8',\r\n content: (\r\n <>\r\n \r\n This information highlights the status of shipments based on needed dates. Currently, there are {Highcharts.numberFormat(salesDashboardInfo.PromisedTonsValue,0,'.',',')} tons of products that have not been shipped and are overdue, as the customers required them earlier. \r\n
\r\n For a detailed breakdown, click on the number to access a comprehensive list.\r\n
\r\n This overview enables you to prioritize and address the pending shipments promptly, ensuring customer satisfaction and meeting their urgent needs.\r\n\r\n
\r\n \r\n \r\n For a detailed breakdown, click on the number to access a comprehensive list.\r\n
\r\n This overview enables you to prioritize and address the pending shipments promptly, ensuring customer satisfaction and meeting their urgent needs.\r\n\r\n
\r\n Needed tons\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-9',\r\n content: (\r\n <>\r\n \r\n Based on our data, there are {Highcharts.numberFormat(salesDashboardInfo.PromiseTonsUptoThisMonth,0,'.',',')} tons that need to be shipped by the end of this month. \r\n
\r\n These tons represent pending orders that require prompt attention. For a detailed list, click on the number to access comprehensive information.\r\n
\r\n This overview allows you to prioritize and allocate resources efficiently to ensure timely delivery of the pending orders. By addressing these shipments promptly, you can meet customer expectations and maintain smooth operations.\r\n
\r\n \r\n \r\n These tons represent pending orders that require prompt attention. For a detailed list, click on the number to access comprehensive information.\r\n
\r\n This overview allows you to prioritize and allocate resources efficiently to ensure timely delivery of the pending orders. By addressing these shipments promptly, you can meet customer expectations and maintain smooth operations.\r\n
\r\n Invoiced + Due Needed Tons\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-10',\r\n content: (\r\n <>\r\n \r\n This analysis combines the invoiced tons with the orders that, based on the customers specified needed date captured in the order, should have been shipped prior to today. The total sum of these tons provides an overview of both invoiced and overdue shipments. To access a detailed list, click on the number for comprehensive information.\r\n
\r\n \r\n \r\n Opportunity Tons\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-11',\r\n content: (\r\n <>\r\n \r\n
\r\n - \r\n
- \r\n Due Promised Tons\r\n These are the tons that were promised by the shipping department before today but have not been shipped yet. They represent an opportunity to fulfill pending orders and meet customer expectations.\r\n \r\n
- \r\n Promise date for next month(s)\r\n These tons indicate the total quantity of products that were promised by the shipping department for shipment in the upcoming month(s). Although based on the customers needs for this month, the shipping department has assigned a promise date for next month(s).\r\n \r\n
\r\n
\r\n
For a detailed list, click on the respective numbers to access comprehensive information.
\r\n \r\n \r\n Open Orders without Promise Date\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-12',\r\n content: (\r\n <>\r\n \r\n
\r\n - \r\n
- \r\n Needed up to this month\r\n These are the total tons that do not have a promise date assigned, but our customers require them within this month. This indicates the immediate attention required to fulfill these orders.\r\n \r\n
- \r\n All Open Orders\r\n This category represents the total tons of open orders that do not have a promise date assigned, regardless of the customers specified timeframe.\r\n \r\n
\r\n
\r\n
If you need more detail, please click at the number to view detailed list.
\r\n \r\n \r\n Invoiced Tons by\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n )\r\n },\r\n {\r\n target: '.WTW-Step-1',\r\n isLastStep: true,\r\n content: (\r\n <>\r\n \r\n This card provides information on all invoiced orders during this month, allowing you to explore different grouping modes by clicking on the arrow icon.\r\n
\r\n By analyzing the invoiced tons, you can gain insights into the volume of orders fulfilled and track performance trends. The ability to customize the grouping mode offers flexibility in organizing and analyzing the data based on your specific requirements.\r\n
\r\n This overview helps monitor invoiced tons and facilitates data-driven decision-making to optimize operations and meet customer demands effectively.\r\n
\r\n \r\n By analyzing the invoiced tons, you can gain insights into the volume of orders fulfilled and track performance trends. The ability to customize the grouping mode offers flexibility in organizing and analyzing the data based on your specific requirements.\r\n
\r\n This overview helps monitor invoiced tons and facilitates data-driven decision-making to optimize operations and meet customer demands effectively.\r\n
\r\n
\r\n \r\n
\r\n Welcome to the WTW Dashboard, {salesDashboardInfo.UserName}!\r\n
\r\n \r\n \r\n You are currently viewing {salesDashboardInfo.SalesRepName}'s WTW Dashboard. If you need to choose another sales representative, feel free to select someone else by clicking on the dropdown menu provided.\r\n \r\n
\r\n \r\n )\r\n } \r\n ]\r\n};\r\n\r\n if (IsLoading){\r\n return (<>Loading....)\r\n }\r\n\r\n if (ClaUsuario === null){\r\n return (<>We could not find a sales representative by default for you, feel free to pick a valid sales rep from the dropdown menu.)\r\n }\r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n /*\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n */\r\n }\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n Welcome {salesDashboardInfo.UserName}
*/} \r\n Do you need a Walkthrough? click here \r\n \r\n{moment(salesDashboardInfo.DateToday).format('MMMM, YYYY')}
\r\n \r\n\r\n ({Highcharts.numberFormat(salesDashboardInfo.NewCustomerPorcentaje,2,'.',',')}% of total) \r\n
\r\n \r\n \r\n ({Highcharts.numberFormat(salesDashboardInfo.RecoveredPorcentaje,2,'.',',')}% of total) \r\n
\r\n \r\n \r\n ({Highcharts.numberFormat(salesDashboardInfo.ActiveCustomerTonsPorcentaje,2,'.',',')}% of total) \r\n
\r\n \r\n All open orders needed up to the end of the month.
\r\n \r\n \r\n \r\n {\r\n salesDashboardInfo.PromisedMasSoldEsArribaPresupuesto>0 ? (\r\n <>\r\n \r\n + {Highcharts.numberFormat(salesDashboardInfo.PromisedMasSoldPorcentaje,2,'.',',')}% \r\n \r\n \r\n ):(\r\n <>\r\n \r\n - {Highcharts.numberFormat(salesDashboardInfo.PromisedMasSoldPorcentaje,2,'.',',')}% \r\n \r\n \r\n )\r\n }\r\n
\r\n \r\n \r\n Due Promised Tons \r\n
\r\n \r\n \r\n Promise date for next month(s)\r\n
\r\n \r\n {\r\n /*\r\n \r\n Needed up to this month\r\n
\r\n \r\n \r\n All Open Orders\r\n
\r\n \r\n \r\n | Invoiced Tons by | \r\n\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n {tonsBySegmentList.map((element, index) => { \r\n return ( \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n })} \r\n
\r\n \r\n \r\n Avg Tons = Invoiced tons average last 12 months.\r\n
\r\n \r\n Performance of my team comparing invoiced tons vs the goal tons that should be invoiced up to today.\r\n
\r\n \r\n
\r\n {/* \r\n {\r\n imageUrl === null || imageUrl === undefined ? \r\n (
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n )\r\n \r\n const onChangeOrganizationalValue = (itemValue, itemNode)=> { \r\n setClaUsuario(itemNode.key); /* key = ClaUsaurio */\r\n }\r\n\r\n if (IsLoading){\r\n return (<>Loading...);\r\n }\r\n\r\n if (ClaUsuario === null){\r\n return (\r\n \r\n onChangeOrganizationalValue(itemValue, itemNode)}> \r\n
\r\n \r\n \r\n \r\n \r\n \r\n There is no report available for signed in user.\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <>\r\n \r\n If you consider that you should have access to this dashboard, please make your request through IT Department.\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default SalesDashboardScreen;\r\n","import { React, useState, useEffect, useRef } from 'react';\r\nimport Viz from 'components/Tableau/Viz';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { callApi, getSessionItem } from 'utils/utils';\r\nimport { config } from 'utils/config';\r\n\r\nconst WireSteelGeneralView = (props) => {\r\n\r\n const [viz, setViz] = useState(null);\r\n\r\n useEffect(() => {\r\n createViz();\r\n }, [])\r\n\r\n const createViz = () => {\r\n const paramsService = {};\r\n const urlWebService = `${config.UrlApiProject}Tableau/GetSalesPerformanceDashboardAgente?ClaUsuario=${getSessionItem('ClaUsuarioMod', 0)}`;\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n // Tableau Dashboard parameters\r\n const params = {};\r\n\r\n const url = 'https://tableau.deacero.com/views/SpreadGraphs/Wire-SteelGeneralView'\r\n\r\n setViz({viz}
\r\n \r\n )\r\n}\r\n\r\nexport default WireSteelGeneralView;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport WireSteelGeneralView from './WireSteelGeneralView';\r\n\r\nconst WireSteelGeneralViewScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n ',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n plotOptions: {\r\n bar: { \r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: woByDeptChartSeries\r\n };\r\n\r\n const woByPersonChartOptions = {\r\n chart: {\r\n type: 'bar'\r\n },\r\n title: {\r\n text: \"Work orders by Person in charge\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n xAxis: {\r\n categories: woByPersonChartCategories,\r\n title: {\r\n text: null\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: \"Work Orders\"\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n plotOptions: {\r\n bar: { \r\n dataLabels: {\r\n enabled: true\r\n }\r\n }\r\n },\r\n series: woByPersonChartSeries\r\n };\r\n\r\n const getNotAssignedWO = () => {\r\n setNotAssignedWO([{\r\n index: 0,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }, {\r\n index: 1,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }, {\r\n index: 2,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }, {\r\n index: 3,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n },{\r\n index: 4,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }, {\r\n index: 5,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }, {\r\n index: 6,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }]);\r\n };\r\n\r\n const getAssignedWO = () => {\r\n setAssignedWO([{\r\n index: 0,\r\n wo: '7521',\r\n asset: 'Bulk / Receiving / Dock 1',\r\n name: 'Dock Door PM',\r\n description: '1522 - 1522 - GT By Frequency - 12 Months - PREVENTIVE - Mechanic - Running Asset - 1 - 1-5 Dock Door PM',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }]);\r\n };\r\n\r\n const getDonedWO = () => {\r\n setDoneWO([{\r\n index: 0,\r\n wo: '11134',\r\n asset: 'Collated / Facility. / Compressor Room.',\r\n name: 'Clean Compressor',\r\n description: '3350 - 3350 - 3350 - TG - By Frequency - 1 - Week - PREVENTIVE - Mechanic - Asset - Running - 11-15 - 11-15.5 - Clean Compressor',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n },{\r\n index: 1,\r\n wo: '11134',\r\n asset: 'Collated / Facility. / Compressor Room.',\r\n name: 'Clean Compressor',\r\n description: '3350 - 3350 - 3350 - TG - By Frequency - 1 - Week - PREVENTIVE - Mechanic - Asset - Running - 11-15 - 11-15.5 - Clean Compressor',\r\n planDate: '6/18/2023',\r\n expirationDate: '8/9/2023'\r\n }]);\r\n };\r\n\r\n const getWoChart = (informationList,capturedList,inProgressList,closedList) => {\r\n setWoChartSeries([{ \r\n data: [{\r\n name:\"Not asigned\",\r\n color:\"#17a2b8\",\r\n y: (capturedList.length > 0) ? (capturedList.length / informationList.length) * 100 : 0\r\n }, {\r\n name:\"Asigned\",\r\n color:\"#ff8248\",\r\n y: (inProgressList.length > 0) ? (inProgressList.length / informationList.length) * 100 : 0\r\n },{\r\n name:\"Done\",\r\n color:\"#00cc85\",\r\n y: (closedList.length > 0) ? (closedList.length / informationList.length) * 100 : 0\r\n }]\r\n }]);\r\n };\r\n\r\n const getWoByDeptChart = (serieInfo,categoriesInfo) => {\r\n setWoByDeptChartSeries([{\r\n name:\"Not asigned\",\r\n color:serieInfo[0].color,\r\n data: serieInfo[0].data\r\n }, {\r\n name:\"Asigned\",\r\n color:serieInfo[1].color,\r\n data: serieInfo[1].data\r\n },{\r\n name:\"Done\",\r\n color:serieInfo[2].color,\r\n data: serieInfo[2].data\r\n }]);\r\n setWoByDeptChartCategories(categoriesInfo); \r\n // setWoByDeptChartCategories([\"Bulk\", \"Paper Tape\", \"Collated\", \"Spare Equipment\"]); \r\n };\r\n\r\n const getWoByPersonChart = (serieInfo,categoriesInfo) => {\r\n setWoByPersonChartSeries([{\r\n name:\"Not asigned\",\r\n color:serieInfo[0].color,\r\n data: serieInfo[0].data\r\n }, {\r\n name:\"Asigned\",\r\n color:serieInfo[1].color,\r\n data: serieInfo[1].data\r\n },{\r\n name:\"Done\",\r\n color:serieInfo[2].color,\r\n data: serieInfo[2].data\r\n }]);\r\n setWoByPersonChartCategories(categoriesInfo); \r\n // setWoByPersonChartCategories([\"Mickey Kovach\", \"Jimmy R Hill\", \"Stephen E Skinner\", \"Ricky G Dockins\"]);\r\n };\r\n\r\n const getWOCardStyle = (index) => {\r\n return index % 2? woCardStyleAlternative : woCardStyle;\r\n };\r\n\r\n useEffect(() => {\r\n // getWoChart();\r\n // getWoByDeptChart();\r\n // getWoByPersonChart(); \r\n // getNotAssignedWO();\r\n // getAssignedWO();\r\n // getDonedWO();\r\n }, []);\r\n\r\n const woCardTemplateUnAssigned = (wo) => {\r\n return (\r\n <>\r\n
\r\n Plan date:\r\n {wo.FechaHoraProgOriginal} \r\n
\r\n \r\n \r\n Expiration date:\r\n {wo.FechaHoraVigencia} \r\n
\r\n \r\n {wo.ClaveGuia}
\r\n \r\n \r\n Plan date:\r\n {wo.FechaHoraProgOriginal} \r\n
\r\n \r\n \r\n Expiration date:\r\n {wo.FechaHoraVigencia} \r\n
\r\n \r\n {wo.ClaveGuia}
\r\n \r\n \r\n Plan date:\r\n {wo.FechaHoraProgOriginal} \r\n
\r\n \r\n \r\n Expiration date:\r\n {wo.FechaHoraVigencia} \r\n
\r\n \r\n {wo.ClaveGuia}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n props.ShowAssetView && (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n Boxes Produced: ${this.y}
\r\n
Produced from ${this.point.data.TimeFrom} to ${this.point.data.TimeTo}
\r\n `;\r\n },\r\n },\r\n /*\r\n tooltip: {\r\n enabled: false, // Set to false to hide the tooltip\r\n },\r\n */\r\n series: [\r\n { \r\n data: boxesByHr,\r\n showInLegend: false\r\n },\r\n ],\r\n })\r\n \r\n setLoading(false);\r\n }, (error) => {\r\n setLoading(false);\r\n console.error(\"Error getting machine detail\", error); \r\n }, false, false);\r\n }\r\n\r\n const calculaDescripcionTiempo = (tiempoHrs) => {\r\n\r\n if (tiempoHrs >= 1){\r\n return `${Highcharts.numberFormat(tiempoHrs,1, '.', ',')} Hrs`\r\n }\r\n\r\n return `${Highcharts.numberFormat(tiempoHrs*60.0,1, '.', ',')} Min`\r\n }\r\n\r\n const getStatusAsset = (StatusSenial) => {\r\n /*\r\n\t\t\tStatus Senial \r\n\t\t\t0 -> cuando no hay check in\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t (gray-status)\r\n\t\t\t1 -> cuando hay check in y esta corriendo\t\t\t\t\t\t\t\t\t\t\t (green-status)\r\n\t\t\t2 -> cuando hay check in y esta detenida y no tiene paro y lleva menos de 30 minutos (yellow-blink-status)\r\n\t\t\t3 -> cuando hay check in y esta detenida y no tiene paro y lleva mas de 30 minutos (red-blink-status)\r\n\t\t\t4 -> cuando hay check in y esta detenida y tiene paro\t\t\t\t\t\t\t\t (red-status)\r\n\t\t\t5 -> cuando hay check in y no tiene senial\t\t\t\t\t\t\t\t\t\t\t (blue-status) \r\n\t\t */ \r\n if (StatusSenial === 0){\r\n return 'gray-status'\r\n }\r\n \r\n if (StatusSenial === 1){\r\n return 'green-status'\r\n }\r\n \r\n if (StatusSenial === 2){\r\n return 'yellow-blink-status'\r\n }\r\n \r\n if (StatusSenial === 3){\r\n return 'red-blink-status'\r\n }\r\n \r\n if (StatusSenial === 4){\r\n return 'red-status'\r\n }\r\n \r\n if (StatusSenial === 5){\r\n return 'blue-status'\r\n }\r\n\r\n return '';\r\n }\r\n\r\n const getStatusCell = (EstatusProduccionCelda) => {\r\n /*\r\n EstatusProduccionCelda\r\n 1 -> red-status\r\n 2 -> yello-status\r\n 3 -> green-status \r\n */ \r\n\r\n if (EstatusProduccionCelda === 1){\r\n return 'red-status'\r\n }\r\n \r\n if (EstatusProduccionCelda === 2){\r\n return 'yellow-status'\r\n }\r\n\r\n if (EstatusProduccionCelda === 3){\r\n return 'green-status'\r\n }\r\n\r\n return 'gray-status';\r\n }\r\n\r\n const cardTemplate = (\r\n <>\r\n{InformacionEncabezadoCelda.NomAreaProduccion} # {InformacionEncabezadoCelda.ClaveCelda}
\r\n \r\n
\r\n \r\n
\r\n Downtime
\r\n {calculaDescripcionTiempo(InformacionEncabezadoCelda.DowntimeHrs)}
\r\n {`(${InformacionEncabezadoCelda.DowntimeQty})`}
\r\n \r\n
\r\n Uptime
\r\n {calculaDescripcionTiempo(InformacionEncabezadoCelda.RunHrs)}
\r\n \r\n
\r\n Microstops
\r\n {calculaDescripcionTiempo(InformacionEncabezadoCelda.MicrostopsHrs)}
\r\n {`(${InformacionEncabezadoCelda.MicroStopsQty})`}
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n Current Downtime
\r\n {calculaDescripcionTiempo(InformacionEncabezadoCelda.CurrentDowntimeHrs)}\r\n \r\n {InformacionEncabezadoCelda.Unidades}\r\n
\r\n \r\n BOXES\r\n
\r\n \r\n
\r\n
\r\n {InformacionEncabezadoCelda.ClaveArticulo}\r\n
\r\n \r\n {InformacionEncabezadoCelda.ProduccionObj}\r\n
\r\n \r\n
\r\n \r\n {\r\n props.ShowAssetView && (\r\n <>\r\n \r\n Boxes/Hr\r\n
\r\n \r\n {\r\n boxesByHrsChart !== null &&\r\n (
\r\n Assets View
\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n \r\n { \r\n DetalleInformacionMaquinasCelda.map((item, index) => { \r\n return (\r\n <> \r\n
\r\n \r\n
\r\n \r\n \r\n\r\n );\r\n })\r\n } \r\n \r\n
\r\n {item.DisplayName}
\r\n {\r\n item.StatusSenial === 1 ? 'Running'\r\n : item.StatusSenial === 2 || item.StatusSenial === 3 || item.StatusSenial === 4 ? 'Down'\r\n : item.StatusSenial === 5 ? 'Offline' \r\n : ''\r\n }\r\n
\r\n \r\n
\r\n Downtime
\r\n {calculaDescripcionTiempo(item.DowntimeHrs)}
\r\n {`(${item.DowntimeQty})`}
\r\n \r\n
\r\n Uptime
\r\n {calculaDescripcionTiempo(item.RunHrs)}
\r\n \r\n
\r\n Microstops
\r\n {calculaDescripcionTiempo(item.MicrostopsHrs)}
\r\n {`(${item.MicroStopsQty})`}
\r\n \r\n \r\n
\r\n
\r\n );\r\n}; \r\n\r\nconst getBackGroundColorCell = (EstatusProduccionCelda) => {\r\n /*\r\n EstatusProduccionCelda\r\n 1 -> red-status\r\n 2 -> yello-status\r\n 3 -> green-status \r\n */ \r\n // console.log('EstatusProduccionCelda', EstatusProduccionCelda);\r\n if (EstatusProduccionCelda === 1){\r\n return '#c40101'\r\n }\r\n \r\n if (EstatusProduccionCelda === 2){\r\n return '#f69708'\r\n }\r\n \r\n if (EstatusProduccionCelda === 3){\r\n return '#01ad0f'\r\n }\r\n \r\n return '#989898';\r\n}\r\n\r\nconst getBackGroundColorMaquina = (StatusSenial) => {\r\n /*\r\n\t\t\tStatus Senial \r\n\t\t\t0 -> cuando no hay check in\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t (gray-status)\r\n\t\t\t1 -> cuando hay check in y esta corriendo\t\t\t\t\t\t\t\t\t\t\t (green-status)\r\n\t\t\t2 -> cuando hay check in y esta detenida y no tiene paro y lleva menos de 30 minutos (yellow-blink-status)\r\n\t\t\t3 -> cuando hay check in y esta detenida y no tiene paro y lleva mas de 30 minutos (red-blink-status)\r\n\t\t\t4 -> cuando hay check in y esta detenida y tiene paro\t\t\t\t\t\t\t\t (red-status)\r\n\t\t\t5 -> cuando hay check in y no tiene senial\t\t\t\t\t\t\t\t\t\t\t (blue-status) \r\n\t\t */ \r\n if (StatusSenial === 0){\r\n return 'gray-status'\r\n }\r\n \r\n if (StatusSenial === 1){\r\n return 'green-status'\r\n }\r\n \r\n if (StatusSenial === 2){\r\n return 'yellow-blink-status'\r\n }\r\n\r\n if (StatusSenial === 3){\r\n return 'red-blink-status'\r\n }\r\n\r\n if (StatusSenial === 4){\r\n return 'red-status'\r\n }\r\n\r\n if (StatusSenial === 5){\r\n return 'blue-status'\r\n }\r\n\r\n return 'gray-status';\r\n}\r\n\r\n return (\r\n <> \r\n \r\n
\r\n );\r\n })\r\n } \r\n\r\n {\r\n DGTDetail.map((item, index) => { \r\n \r\n return (\r\n openDialogDGTDashboard(item)}>\r\n \r\n
\r\n openDialogDGTDashboard(item)}>\r\n \r\n
\r\n \r\n );\r\n })\r\n } \r\n \r\n \r\n
\r\n {lastUpdateDate !== null? `@ ${moment(lastUpdateDate).format('MMMM Do YYYY, h:mm:ss a')}` : ''}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('dgt:AssetView')}\r\n \r\n
\r\n \r\n onLayoutChange(e.value)}\r\n label=\"\"\r\n editable={false}\r\n showClear={false}\r\n disabled={Loading}\r\n /> \r\n
\r\n \r\n );\r\n \r\n return (\r\n <> \r\n \r\n {\r\n viewType === viewsTypes.LAYOUT && (\r\n {t('it:EquipmentDetails')}
\r\n \r\n\r\n
{t('it:UserDetails')}
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n setShowAddITAsset(true)}\r\n />\r\n exportItAssets()}>\r\n \r\n \r\n updateFilters()}>\r\n \r\n \r\n clearFilters()}>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n \r\n \r\n \r\n return ( \r\n <> \r\n {dateRangeTemplate}\r\n \r\n )\r\n} \r\n \r\nexport default FieldDateRange;\r\n\r\n","import React, { useState, useRef, useEffect, useContext } from 'react'; \r\nimport { Row,Col,Card, CardHeader, CardTitle, CardBody, CardFooter} from 'reactstrap'; \r\nimport { AppContext } from 'context/AppContext'; \r\nimport { config } from '../../../utils/config';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport moment from 'moment';\r\nimport { callApi, showSweetAlert} from '../../../utils/utils'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport FieldDataView from '../../../components/Controls/FieldDataView/FieldDataView.jsx';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport notassigned from '../../../assets/img/icons/notassigned.png'\r\nimport assigned from '../../../assets/img/icons/assigned.png'\r\nimport done from '../../../assets/img/icons/done.png'\r\nimport { Column } from 'primereact/column';\r\nimport { Badge } from 'primereact/badge'; \r\n\r\nconst MTDPerformanceReportDetail = (props) => { \r\n const { t } = useTranslation(['mtd', 'common']);\r\n const { viewportRefresh } = useContext(AppContext);\r\n const [Viewport, setViewport] = useState(viewportRefresh);\r\n const [workOrdersList, setworkOrdersList] = useState([]);\r\n \r\n\r\n useEffect(() => {\r\n GetDetail();\r\n }, []);\r\n \r\n useEffect(() => { \r\n setViewport(viewportRefresh); \r\n }, [viewportRefresh]);\r\n\r\n const GetDetail = () => { \r\n let sBuilding = '';\r\n let cBuilding = 0;\r\n const buildingList = props.filterBuildingList;\r\n const assignedTechList = props.filterTecAssignedList;\r\n const techTypeList = props.filterTecTypeList;\r\n for (let index = 0; index < buildingList.length; index++) {\r\n if(buildingList[index].EsSeleccionado){\r\n const element = buildingList[index].ClaEdificio;\r\n sBuilding = `${sBuilding + element},`;\r\n cBuilding +=1;\r\n }\r\n } \r\n let sAssignedTech = '';\r\n for (let index = 0; index < assignedTechList.length; index++) {\r\n if(assignedTechList[index].EsSeleccionado){\r\n const element = assignedTechList[index].ClaTechAssigned;\r\n sAssignedTech = `${sAssignedTech + element},`;\r\n }\r\n } \r\n let sTechType = '';\r\n for (let index = 0; index < techTypeList.length; index++) {\r\n if(techTypeList[index].EsSeleccionado){\r\n const element = techTypeList[index].ClaTechType;\r\n sTechType = `${sTechType + element},`;\r\n }\r\n }\r\n const paramsToService = {\r\n Building:sBuilding,\r\n AssignedTech:sAssignedTech,\r\n TechType:sTechType,\r\n RangeDateStart: props.StartDate,\r\n RangeDateEnd: props.EndDate,\r\n ClaEdificio: props.ClaEdificio,\r\n ClaAssignedTech: props.ClaAssignedTech,\r\n ClaTechType: props.ClaTechType,\r\n ClaAging:props.ClaAging,\r\n ClaEstatusOt: props.ClaEstatusOt,\r\n IsOpenWorkOrders: props.IsOpenWorkOrders,\r\n IsOverdueWorkOrders:props.IsOverdueWorkOrders,\r\n IsOverdueWorkOrdersTotal:props.IsOverdueWorkOrdersTotal,\r\n IsOntimeWorkOrders:props.IsOntimeWorkOrders,\r\n IsOntimeWorkOrdersTotal:props.IsOntimeWorkOrdersTotal,\r\n IsWorkOrders:props.IsWorkOrders,\r\n IsCurrentWeekWorkOrders:props.IsCurrentWeekWorkOrders,\r\n IsBackLog:props.IsBackLog\r\n }\r\n const url = `${config.UrlApiProject}MMA/GetMDTPerformanceReportDetail`;\r\n callApi(url, 'POST', paramsToService, (response) => {\r\n const ordersList = response.data.WorkOrdersList;\r\n setworkOrdersList(ordersList);\r\n }); \r\n }\r\n\r\n const headerWorkOrders =(\r\n <>\r\n {setIsOpen(!isOpen)}}\r\n onClick={(e) => op.current.toggle(e)} \r\n >\r\n \r\n {getFriendlyDate()}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {t('mtd:Date')}:\r\n {moment(wo.FechaHoraProgOriginal).format(\"MM/DD/YYYY\")} \r\n
\r\n \r\n {t('mtd:PlanDate')}\r\n :\r\n {\r\n wo.FechaHoraProgOriginal!= null ? (\r\n <>\r\n {moment(wo.FechaHoraProgOriginal).format(\"MM/DD/YYYY\")} \r\n \r\n ):(\r\n <> \r\n \r\n )\r\n }\r\n
\r\n \r\n {t('mtd:CompletionDate')}:\r\n {\r\n wo.FechaHoraFin!= null ? (\r\n <>\r\n {moment(wo.FechaHoraFin).format(\"MM/DD/YYYY\")} \r\n \r\n ):(\r\n <> \r\n \r\n )\r\n } \r\n
\r\n \r\n \r\n {t('mtd:AssignedPersonal')}:\r\n {wo.PersonalAsignado} \r\n
\r\n \r\n {t('mtd:ExpirationDate')}:\r\n {\r\n wo.FechaHoraVigencia!= null ? (\r\n <>\r\n {moment(wo.FechaHoraVigencia).format(\"MM/DD/YYYY\")} \r\n \r\n ):(\r\n <> \r\n \r\n )\r\n } \r\n
\r\n \r\n {t('mtd:OverdueDate')}:\r\n {\r\n wo.FechaVigenciaOverdue!= null ? (\r\n <>\r\n {moment(wo.FechaVigenciaOverdue).format(\"MM/DD/YYYY\")} \r\n \r\n ):(\r\n <> \r\n \r\n )\r\n } \r\n
\r\n \r\n {wo.ClaveGuia}
\r\n \r\n \r\n {statusName}\r\n
\r\n \r\n );\r\n};\r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MTDPerformanceReportDetail;\r\n","import React, { useState, useRef, useEffect, useContext } from 'react'; \r\nimport { Row,Col,Card, CardHeader, CardTitle, CardBody, CardFooter} from 'reactstrap'; \r\nimport { AppContext } from 'context/AppContext'; \r\nimport { config } from '../../../utils/config';\r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport moment from 'moment';\r\nimport { callApi, showSweetAlert} from '../../../utils/utils'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport notassigned from '../../../assets/img/icons/notassigned.png'\r\nimport assigned from '../../../assets/img/icons/assigned.png'\r\nimport done from '../../../assets/img/icons/done.png'\r\nimport MTDPerformanceReportDetail from './MTDPerformanceReportDetail';\r\nimport { Dialog } from 'primereact/dialog';\r\n\r\nconst MTDPerformanceReportBacklog = (props) => { \r\n const { t } = useTranslation(['mtd', 'common']);\r\n const { viewportRefresh } = useContext(AppContext);\r\n const [Viewport, setViewport] = useState(viewportRefresh);\r\n const [workOrdersByDeptCategories, setworkOrdersByDeptCategories] = useState([]);\r\n const [workOrdersByDeptSeries, setworkOrdersByDeptSeries] = useState([]);\r\n const [workOrdersAgingCategories, setworkOrdersAgingCategories] = useState([]);\r\n const [workOrdersAgingSeries, setworkOrdersAgingSeries] = useState([]);\r\n const [assignedTechBarChartCategories, setassignedTechBarChartCategories] = useState([]);\r\n const [assignedTechBarChartSeries, setassignedTechBarChartSeries] = useState([]);\r\n const [techTypeChartCategories, settechTypeChartCategories] = useState([]);\r\n const [techTypeChartSeries, settechTypeChartSeries] = useState([]); \r\n const [EsMostrarDialogDetail, setEsMostrarDialogDetail] = useState(false);\r\n const [ClaEdificio, setClaEdificio] = useState(null);\r\n const [ClaAssignedTech, setClaAssignedTech] = useState(null);\r\n const [ClaAging, setClaAging] = useState(null);\r\n const [ClaTechType, setClaTechType] = useState(null);\r\n const [ClaEstatusOt, setClaEstatusOt] = useState(null); \r\n const [TitleDetail, setTitleDetail] = useState(null); \r\n const [SubTitleDetail, setSubTitleDetail] = useState(null); \r\n const [IsOpenWorkOrders, setIsOpenWorkOrders] = useState(false); \r\n const [IsOverdueWorkOrders, setIsOverdueWorkOrders] = useState(false); \r\n const [IsOverdueWorkOrdersTotal, setIsOverdueWorkOrdersTotal] = useState(false); \r\n const [IsOntimeWorkOrders, setIsOntimeWorkOrders] = useState(false); \r\n const [IsOntimeWorkOrdersTotal, setIsOntimeWorkOrdersTotal] = useState(false); \r\n const [IsWorkOrders, setIsWorkOrders] = useState(false); \r\n const [IsCurrentWeekWorkOrders, setIsCurrentWeekWorkOrders] = useState(false); \r\n\r\n useEffect(() => {\r\n GetChartLoad();\r\n }, []);\r\n \r\n useEffect(() => { \r\n setViewport(viewportRefresh); \r\n }, [viewportRefresh]);\r\n\r\n const GetChartLoad = () => { \r\n let sBuilding = '';\r\n let cBuilding = 0;\r\n const buildingList = props.filterBuildingList;\r\n const assignedTechList = props.filterTecAssignedList;\r\n const techTypeList = props.filterTecTypeList;\r\n for (let index = 0; index < buildingList.length; index++) {\r\n if(buildingList[index].EsSeleccionado){\r\n const element = buildingList[index].ClaEdificio;\r\n sBuilding = `${sBuilding + element},`;\r\n cBuilding +=1;\r\n }\r\n } \r\n let sAssignedTech = '';\r\n for (let index = 0; index < assignedTechList.length; index++) {\r\n if(assignedTechList[index].EsSeleccionado){\r\n const element = assignedTechList[index].ClaTechAssigned;\r\n sAssignedTech = `${sAssignedTech + element},`;\r\n }\r\n } \r\n let sTechType = '';\r\n for (let index = 0; index < techTypeList.length; index++) {\r\n if(techTypeList[index].EsSeleccionado){\r\n const element = techTypeList[index].ClaTechType;\r\n sTechType = `${sTechType + element},`;\r\n }\r\n }\r\n const paramsToService = {\r\n Building:sBuilding,\r\n AssignedTech:sAssignedTech,\r\n TechType:sTechType,\r\n RangeDateStart: props.StartDate,\r\n RangeDateEnd: props.EndDate\r\n }\r\n const url = `${config.UrlApiProject}MMA/GetMDTPerformanceReportBacklog`;\r\n callApi(url, 'POST', paramsToService, (response) => {\r\n console.log('response',response)\r\n const series = response.data.DepartamentSeries;\r\n const categories = response.data.DepartamentCategories;\r\n const seriesPerson = response.data.PersonSeries;\r\n const categoriesPerson = response.data.PersonCategories;\r\n const seriesTypeTech = response.data.TypeTechSeries;\r\n const categoriesTypeTech = response.data.TypeTechCategories;\r\n const seriesAging = response.data.AgignSeries;\r\n const categoriesAging = response.data.AgignCategories;\r\n getworkOrdersByDeptSeries(series,categories);\r\n getworkOrdersAgingSeries(seriesAging,categoriesAging);\r\n getassignedTechSeries(seriesPerson,categoriesPerson);\r\n gettypeTechSeries(seriesTypeTech,categoriesTypeTech);\r\n }); \r\n }\r\n \r\n \r\n const workOrdersByDeptBarChartOptions = {\r\n chart: {\r\n type: 'bar',\r\n },\r\n title: {\r\n text: t('mtd:WorkordersByDept'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n xAxis: {\r\n categories: workOrdersByDeptCategories,\r\n title: {\r\n text: null\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('mtd:WorkOrders')\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n \r\n plotOptions: {\r\n bar: { \r\n dataLabels: {\r\n enabled: true\r\n }\r\n },\r\n series: {\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n console.log('seriesName',seriesName);\r\n console.log('e',e);\r\n console.log('series',e.point.series);\r\n console.log('category',e.point.category);\r\n console.log('value',e.point.y);\r\n\r\n let dataSerie = {};\r\n let ClaDepto = null;\r\n workOrdersByDeptSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomDepartamento === e.point.category) {\r\n ClaDepto = item.ClaDepartamento;\r\n setSubTitleDetail(item.NomDepartamento);\r\n }\r\n }); \r\n setClaEdificio(ClaDepto);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(null);\r\n setClaAging(null);\r\n setClaTechType(null);\r\n setTitleDetail(t('mtd:WorkordersByDept'));\r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false);\r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n }, \r\n series: workOrdersByDeptSeries\r\n };\r\n\r\n const workOrdersAgingChartOptions = {\r\n chart: {\r\n type: 'column',\r\n },\r\n title: {\r\n text: t('mtd:WorkOrderAging'),\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n xAxis: {\r\n categories: workOrdersAgingCategories,\r\n crosshair: true,\r\n accessibility: {\r\n description: 'Countries'\r\n }\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('mtd:WorkOrders')\r\n }\r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n plotOptions: {\r\n column: {\r\n pointPadding: 0.2,\r\n borderWidth: 0,\r\n dataLabels: {\r\n enabled: true\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n let dataSerie = {};\r\n let ClaAging = null;\r\n workOrdersAgingSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomAging === e.point.category) {\r\n ClaAging = item.ClaAging;\r\n setSubTitleDetail(item.NomAging);\r\n }\r\n });\r\n setTitleDetail(t('mtd:WorkOrderAging'));\r\n setClaEdificio(null);\r\n setClaTechType(null);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(null);\r\n setClaAging(ClaAging);\r\n setIsOpenWorkOrders(false); \r\n setIsOverdueWorkOrders(false);\r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: workOrdersAgingSeries\r\n };\r\n\r\n const assignedTechBarChartOptions = {\r\n chart: {\r\n type: 'column'\r\n },\r\n title: {\r\n text: \"\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n xAxis: {\r\n categories: assignedTechBarChartCategories\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('mtd:WorkOrders')\r\n }, \r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n console.log('seriesName',seriesName);\r\n console.log('e',e);\r\n console.log('series',e.point.series);\r\n console.log('category',e.point.category);\r\n console.log('value',e.point.y);\r\n \r\n let dataSerie = {};\r\n let ClaResponsable = null;\r\n assignedTechBarChartSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomResponsable === e.point.category) {\r\n ClaResponsable = item.ClaResponsable;\r\n setSubTitleDetail(item.NomResponsable);\r\n }\r\n });\r\n console.log('info',dataSerie);\r\n setClaEdificio(null);\r\n setClaTechType(null);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(ClaResponsable);\r\n setClaAging(null);\r\n setTitleDetail(t('mtd:AssignedTech'));\r\n setIsOpenWorkOrders(false); \r\n setIsOverdueWorkOrders(false);\r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: assignedTechBarChartSeries\r\n };\r\n\r\n const techTypeBarChartOptions = {\r\n chart: {\r\n type: 'column'\r\n },\r\n title: {\r\n text: \"\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n xAxis: {\r\n categories: techTypeChartCategories,\r\n title: {\r\n text: null\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('mtd:WorkOrders')\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n console.log('seriesName',seriesName);\r\n console.log('e',e);\r\n console.log('series',e.point.series);\r\n console.log('category',e.point.category);\r\n console.log('value',e.point.y);\r\n \r\n let dataSerie = {};\r\n let ClaDisciplina = null;\r\n techTypeChartSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomDisciplina === e.point.category) {\r\n ClaDisciplina = item.ClaDisciplina;\r\n setSubTitleDetail(item.NomDisciplina);\r\n }\r\n });\r\n console.log('info',dataSerie);\r\n setClaEdificio(null);\r\n setClaTechType(ClaDisciplina);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(null);\r\n setClaAging(null);\r\n setTitleDetail(t('mtd:TechType'));\r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false);\r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: techTypeChartSeries\r\n };\r\n const getworkOrdersByDeptSeries = (serieInfo,categoriesInfo) => {\r\n setworkOrdersByDeptSeries(serieInfo);\r\n setworkOrdersByDeptCategories(categoriesInfo); \r\n // setWoByDeptChartCategories([\"Bulk\", \"Paper Tape\", \"Collated\", \"Spare Equipment\"]); \r\n };\r\n const getworkOrdersAgingSeries = (serieInfo,categoriesInfo) => {\r\n setworkOrdersAgingSeries(serieInfo);\r\n setworkOrdersAgingCategories(categoriesInfo); \r\n // setWoByDeptChartCategories([\"Bulk\", \"Paper Tape\", \"Collated\", \"Spare Equipment\"]); \r\n };\r\n const getassignedTechSeries = (serieInfo,categoriesInfo) => {\r\n setassignedTechBarChartSeries(serieInfo);\r\n setassignedTechBarChartCategories(categoriesInfo); \r\n };\r\n\r\n const gettypeTechSeries = (serieInfo,categoriesInfo) => {\r\n settechTypeChartSeries(serieInfo);\r\n settechTypeChartCategories(categoriesInfo); \r\n };\r\n\r\n\r\n const chartOrdersTemplate = (\r\n <> \r\n
\r\n \r\n onHideDialogDetail()} \r\n style={{width: '50vw'}}\r\n header={`${TitleDetail }-${ SubTitleDetail}`}\r\n >\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MTDPerformanceReportBacklog;\r\n","import React, { useState, useRef, useEffect, useContext } from 'react'; \r\nimport { AppContext } from 'context/AppContext'; \r\nimport { config } from '../../../utils/config';\r\nimport { callApi, showSweetAlert} from '../../../utils/utils'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport { Row,Col,Card, CardHeader, CardTitle, CardBody, CardFooter} from 'reactstrap'; \r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport FieldCalendar from '../../../components/Controls/FieldCalendar';\r\nimport FieldCheckbox from '../../../components/Controls/FieldCheckbox.jsx' \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton';\r\nimport { Sidebar } from 'primereact/sidebar';\r\nimport { ScrollPanel } from 'primereact/scrollpanel';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport FieldDateRange from '../../../components/Controls/FieldDateRange/FieldDateRange';\r\nimport notassigned from '../../../assets/img/icons/notassigned.png'\r\nimport assigned from '../../../assets/img/icons/assigned.png'\r\nimport done from '../../../assets/img/icons/done.png'\r\nimport moment from 'moment';\r\nimport MTDPerformanceReportBacklog from './MTDPerformanceReportBacklog';\r\nimport MTDPerformanceReportDetail from './MTDPerformanceReportDetail';\r\nimport './MTDPerformanceReportScreen.scss'; \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\n\r\nconst MTDPerformanceReportScreen = (props) => { \r\n const { t } = useTranslation(['mtd', 'common']);\r\n const [workOrdersPieChartSeries, setworkOrdersPieChartSeries] = useState([]);\r\n const [workOrdersByDeptCategories, setworkOrdersByDeptCategories] = useState([]);\r\n const [workOrdersByDeptSeries, setworkOrdersByDeptSeries] = useState([]);\r\n const [workOrdersCardPieSeries, setworkOrdersCardPieSeries] = useState([]);\r\n const [assignedTechBarChartCategories, setassignedTechBarChartCategories] = useState([]);\r\n const [assignedTechBarChartSeries, setassignedTechBarChartSeries] = useState([]);\r\n const [workOrdersOverdueSeries, setworkOrdersOverdueSeries] = useState([]);\r\n const [workOrdersOverdueCategories, setworkOrdersOverdueCategories] = useState([]);\r\n const [techTypeChartCategories, settechTypeChartCategories] = useState([]);\r\n const [techTypeChartSeries, settechTypeChartSeries] = useState([]); \r\n const [TypeTechInfo, setTypeTechInfo] = useState([]); \r\n const [filterDateRange, setfilterDateRange] = useState([]);\r\n const [filterBuildingList, setfilterBuildingList] = useState([]);\r\n const [filterTecAssignedList, setfilterTecAssignedList] = useState([]);\r\n const [filterTecTypeList, setfilterTecTypeList] = useState([]);\r\n const [EsByBuildingSelectedAll, setEsByBuildingSelectedAll] = useState(true);\r\n const [EsByTechAssignedSelectedAll, setEsByTechAssignedSelectedAll] = useState(true);\r\n const [EsByTechTypeSelectedAll, setEsByTechTypeSelectedAll] = useState(true);\r\n const [BuildingCount, setBuildingCount] = useState(null);\r\n const [BuildingEtiqueta, setBuildingEtiqueta] = useState(null);\r\n const [openWorkOrders, setopenWorkOrders] = useState(null); \r\n const [MTTR, setMTTR] = useState(null); \r\n const [workorderbacklogadministrator, setworkorderbacklogadministrator] = useState(null); \r\n const [CountWorkOrderBackLogAdministrator, setCountWorkOrderBackLogAdministrator] = useState(null); \r\n const [OverdueWorkOrders, setOverdueWorkOrders] = useState(null); \r\n const [OverdueWorkOrdersTotal, setOverdueWorkOrdersTotal] = useState(null); \r\n const [OverdueWorkOrdersTotalRest, setOverdueWorkOrdersTotalRest] = useState(null); \r\n const [WorkOrderOntimeCompletion, setWorkOrderOntimeCompletion] = useState(null); \r\n const [WorkOrderOntimeCompletionRest, setWorkOrderOntimeCompletionRest] = useState(null); \r\n const [StartDateCurrentWeek, setStartDateCurrentWeek] = useState(null);\r\n const [EndDateCurrentWeek, setEndDateCurrentWeek] = useState(null); \r\n const [errors, setErrors] = useState({}); \r\n const { viewportRefresh } = useContext(AppContext);\r\n const [Viewport, setViewport] = useState(viewportRefresh);\r\n const [isShowFilter, setisShowFilter] = useState(false);\r\n const [StartDate, setStartDate] = useState(new Date());\r\n const [EndDate, setEndDate] = useState(new Date());\r\n const [EsMostrarDialogBacklog, setEsMostrarDialogBacklog] = useState(false);\r\n const [EsMostrarDialogDetail, setEsMostrarDialogDetail] = useState(false);\r\n const [ClaEdificio, setClaEdificio] = useState(null);\r\n const [ClaAssignedTech, setClaAssignedTech] = useState(null);\r\n const [ClaTechType, setClaTechType] = useState(null);\r\n const [ClaAging, setClaAging] = useState(null);\r\n const [ClaEstatusOt, setClaEstatusOt] = useState(null); \r\n const [TitleDetail, setTitleDetail] = useState(null); \r\n const [SubTitleDetail, setSubTitleDetail] = useState(null); \r\n const [IsOpenWorkOrders, setIsOpenWorkOrders] = useState(false); \r\n const [IsOverdueWorkOrders, setIsOverdueWorkOrders] = useState(false); \r\n const [IsOverdueWorkOrdersTotal, setIsOverdueWorkOrdersTotal] = useState(false); \r\n const [IsOntimeWorkOrders, setIsOntimeWorkOrders] = useState(false); \r\n const [IsOntimeWorkOrdersTotal, setIsOntimeWorkOrdersTotal] = useState(false); \r\n const [IsWorkOrders, setIsWorkOrders] = useState(false); \r\n const [IsCurrentWeekWorkOrders, setIsCurrentWeekWorkOrders] = useState(false); \r\n \r\n useEffect(() => {\r\n GetMDTLoad(); \r\n }, []);\r\n\r\n useEffect(() => { \r\n setViewport(viewportRefresh); \r\n }, [viewportRefresh]);\r\n \r\n\r\n const valitationScheme = yup.object().shape({\r\n filterBuildingList: yup.array().of(\r\n yup.object().shape({\r\n EsSeleccionado: yup.boolean().required(t('common:RequiredField')).nullable(),\r\n })\r\n ),\r\n });\r\n\r\n\r\n const onApplyFiltersClick = async () => { \r\n const value = {\r\n filterBuildingList,\r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n const esValido = await validator.validate(value);\r\n\r\n console.log(validator.errors);\r\n if (!esValido) {\r\n setErrors(validator.errors);\r\n return;\r\n }\r\n GetChartLoad(filterBuildingList,filterTecAssignedList,filterTecTypeList);\r\n closeSidebar();\r\n \r\n }\r\n\r\n const GetMDTLoad = () => { \r\n const url = `${config.UrlApiProject}MMA/GetMDTPerformanceReportFilter`; \r\n const paramsService= {}; \r\n callApi(url, 'GET', paramsService, (response) => {\r\n const buildingList = response.data.MDTInfoBuilding;\r\n const assignedTechList = response.data.MDTInfoAssignedTech;\r\n const techTypeList = response.data.MDTInfoTechType;\r\n setfilterBuildingList(buildingList);\r\n setfilterTecAssignedList(assignedTechList);\r\n setfilterTecTypeList(techTypeList); \r\n GetChartLoad(buildingList,assignedTechList,techTypeList);\r\n });\r\n }\r\n\r\n const GetChartLoad = (buildingList,assignedTechList,techTypeList) => { \r\n let sBuilding = '';\r\n let cBuilding = 0;\r\n for (let index = 0; index < buildingList.length; index++) {\r\n if(buildingList[index].EsSeleccionado){\r\n const element = buildingList[index].ClaEdificio;\r\n sBuilding = `${sBuilding + element},`;\r\n cBuilding +=1;\r\n }\r\n } \r\n let sAssignedTech = '';\r\n for (let index = 0; index < assignedTechList.length; index++) {\r\n if(assignedTechList[index].EsSeleccionado){\r\n const element = assignedTechList[index].ClaTechAssigned;\r\n sAssignedTech = `${sAssignedTech + element},`;\r\n }\r\n } \r\n let sTechType = '';\r\n for (let index = 0; index < techTypeList.length; index++) {\r\n if(techTypeList[index].EsSeleccionado){\r\n const element = techTypeList[index].ClaTechType;\r\n sTechType = `${sTechType + element},`;\r\n }\r\n }\r\n const paramsToService = {\r\n Building:sBuilding,\r\n AssignedTech:sAssignedTech,\r\n TechType:sTechType,\r\n RangeDateStart: StartDate.toDateString(),\r\n RangeDateEnd: EndDate.toDateString()\r\n }\r\n const url = `${config.UrlApiProject}MMA/GetMDTPerformanceReport`;\r\n callApi(url, 'POST', paramsToService, (response) => {\r\n const informationList = response.data.MDTDashboardPieInfo[0]; \r\n const series = response.data.DepartamentSeries;\r\n const categories = response.data.DepartamentCategories;\r\n const seriesPerson = response.data.PersonSeries;\r\n const categoriesPerson = response.data.PersonCategories;\r\n const seriesTypeTech = response.data.TypeTechSeries;\r\n const categoriesTypeTech = response.data.TypeTechCategories;\r\n const dashboardInfo = response.data.MDTDashboardInfo[0];\r\n const techInfo = response.data.TypeTechInfo;\r\n getworkOrdersPieChartSeries(informationList);\r\n getworkOrdersByDeptSeries(series,categories);\r\n getOrdersOverdueSeries(seriesTypeTech,categoriesTypeTech);\r\n getassignedTechSeries(seriesPerson,categoriesPerson);\r\n gettypeTechSeries(seriesTypeTech,categoriesTypeTech);\r\n getworkOrdersCardPieSeries(dashboardInfo);\r\n setopenWorkOrders(dashboardInfo.OpenWorkOrders);\r\n setMTTR(dashboardInfo.MTTR);\r\n setTypeTechInfo(techInfo);\r\n setworkorderbacklogadministrator(dashboardInfo.WorkOrderBackLogAdministrator);\r\n setCountWorkOrderBackLogAdministrator(dashboardInfo.CountWorkOrderBackLogAdministrator);\r\n setOverdueWorkOrders(dashboardInfo.OverdueWorkOrders); \r\n setOverdueWorkOrdersTotal(dashboardInfo.OverdueWorkOrdersTotal); \r\n setOverdueWorkOrdersTotalRest(dashboardInfo.OverdueWorkOrdersTotalRest); \r\n setWorkOrderOntimeCompletion(dashboardInfo.WorkOrderOntimeCompletion); \r\n setWorkOrderOntimeCompletionRest(dashboardInfo.WorkOrderOntimeCompletionRest); \r\n setStartDateCurrentWeek(dashboardInfo.StartDateCurrentWeek); \r\n setEndDateCurrentWeek(dashboardInfo.EndDateCurrentWeek); \r\n setBuildingCount(cBuilding);\r\n setBuildingEtiqueta(cBuilding>1?t('mtd:Buildings'):t('mtd:Building'));\r\n }); \r\n }\r\n\r\n const getOrdersOverdueSeries = (serieInfo,categoriesInfo) => {\r\n setworkOrdersOverdueSeries(serieInfo);\r\n setworkOrdersOverdueCategories(categoriesInfo); \r\n };\r\n\r\n const getassignedTechSeries = (serieInfo,categoriesInfo) => {\r\n setassignedTechBarChartSeries(serieInfo);\r\n setassignedTechBarChartCategories(categoriesInfo); \r\n };\r\n const gettypeTechSeries = (serieInfo,categoriesInfo) => {\r\n settechTypeChartSeries(serieInfo);\r\n settechTypeChartCategories(categoriesInfo); \r\n };\r\n const getworkOrdersPieChartSeries2 = (informationList,capturedList,inProgressList,closedList) => {\r\n setworkOrdersPieChartSeries([{ \r\n data: [{\r\n name:t('mtd:NotAssigned'),\r\n color:\"#17a2b8\",\r\n y: (capturedList.length > 0) ? (capturedList.length / informationList.length) * 100 : 0\r\n }, {\r\n name:t('mtd:Assigned'), \r\n color:\"#ff8248\",\r\n y: (inProgressList.length > 0) ? (inProgressList.length / informationList.length) * 100 : 0\r\n },{\r\n name:t('mtd:Done'),\r\n color:\"#00cc85\",\r\n y: (closedList.length > 0) ? (closedList.length / informationList.length) * 100 : 0\r\n }]\r\n }]);\r\n };\r\n const getworkOrdersPieChartSeries = (information) => {\r\n setworkOrdersPieChartSeries([{ \r\n data: [{\r\n id:1,\r\n name:t('mtd:NotAssigned'),\r\n color:\"#17a2b8\",\r\n y: information.NotAssigned\r\n }, {\r\n id:2,\r\n name:t('mtd:Assigned'), \r\n color:\"#ff8248\",\r\n y: information.Assigned\r\n },{\r\n id:3,\r\n name:t('mtd:Done'),\r\n color:\"#00cc85\",\r\n y: information.Done\r\n }]\r\n }]);\r\n };\r\n const getworkOrdersByDeptSeries = (serieInfo,categoriesInfo) => {\r\n setworkOrdersByDeptSeries(serieInfo);\r\n setworkOrdersByDeptCategories(categoriesInfo); \r\n // setWoByDeptChartCategories([\"Bulk\", \"Paper Tape\", \"Collated\", \"Spare Equipment\"]); \r\n };\r\n const getworkOrdersCardPieSeries = (data) => {\r\n setworkOrdersCardPieSeries([{ \r\n data: [{\r\n id:1,\r\n name:t('mtd:NotAssigned'),\r\n color:\"#17a2b8\",\r\n y: data.CurrentWeekNotAssigned\r\n }, {\r\n id:2,\r\n name:t('mtd:Assigned'), \r\n color:\"#ff8248\",\r\n y: data.CurrentWeekAssigned\r\n },{\r\n id:3,\r\n name:t('mtd:Done'),\r\n color:\"#00cc85\",\r\n y: data.CurrentWeekDone\r\n }]\r\n }]);\r\n }; \r\n const onfilterDateRange2 = (value) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.filterDateRange; \r\n setErrors(newErrors)\r\n setfilterDateRange(value);\r\n } \r\n const onfilterDateRange = (startDate, endDate) => { \r\n setStartDate(startDate);\r\n setEndDate(endDate);\r\n }\r\n const onfilterBuildingSelectedAll = (selected) => { \r\n const opciones = [...filterBuildingList];\r\n for (let i = 0; i < opciones.length; i++) {\r\n opciones[i].EsSeleccionado = (!selected ? null : selected);\r\n }\r\n setErrors({});\r\n setfilterBuildingList(opciones);\r\n setEsByBuildingSelectedAll(!EsByBuildingSelectedAll);\r\n }\r\n\r\n const onfilterBuildingSelected = (e,index) => { \r\n const opciones = [...filterBuildingList];\r\n opciones[index].EsSeleccionado = (!e.checked ? null : e.checked);\r\n let icheckedAll = 0;\r\n for (let i = 0; i < opciones.length; i++) {\r\n if(opciones[i].EsSeleccionado){\r\n icheckedAll +=1;\r\n }\r\n }\r\n if(icheckedAll===0){\r\n for (let i = 0; i < opciones.length; i++) {\r\n opciones[i].EsSeleccionado = null;\r\n }\r\n }else{\r\n for (let i = 0; i < opciones.length; i++) {\r\n if(opciones[i].EsSeleccionado === null){\r\n opciones[i].EsSeleccionado = false;\r\n }\r\n }\r\n }\r\n opciones[index].errors = null;\r\n setErrors({});\r\n setEsByBuildingSelectedAll(icheckedAll===opciones.length);\r\n setfilterBuildingList(opciones);\r\n }\r\n const onfilterTecAssignedSelectedAll = (selected) => { \r\n const opciones = [...filterTecAssignedList];\r\n for (let i = 0; i < opciones.length; i++) {\r\n opciones[i].EsSeleccionado = selected;\r\n }\r\n setfilterTecAssignedList(opciones);\r\n setEsByTechAssignedSelectedAll(!EsByTechAssignedSelectedAll);\r\n }\r\n\r\n const onfilterTecAssignedSelected = (e,index) => { \r\n const opciones = [...filterTecAssignedList];\r\n opciones[index].EsSeleccionado = e.checked;\r\n let icheckedAll = 0;\r\n for (let i = 0; i < opciones.length; i++) {\r\n if(opciones[i].EsSeleccionado){\r\n icheckedAll +=1;\r\n }\r\n }\r\n setEsByTechAssignedSelectedAll(icheckedAll===opciones.length);\r\n setfilterTecAssignedList(opciones);\r\n }\r\n\r\n const onfilterTecTypeSelectedAll = (selected) => { \r\n const opciones = [...filterTecTypeList]; \r\n for (let i = 0; i < opciones.length; i++) {\r\n opciones[i].EsSeleccionado = selected;\r\n }\r\n setfilterTecTypeList(opciones);\r\n setEsByTechTypeSelectedAll(!EsByTechTypeSelectedAll);\r\n } \r\n \r\n const onfilterTecTypeSelected = (e,index) => { \r\n const opciones = [...filterTecTypeList];\r\n opciones[index].EsSeleccionado = e.checked;\r\n let icheckedAll = 0;\r\n for (let i = 0; i < opciones.length; i++) {\r\n if(opciones[i].EsSeleccionado){\r\n icheckedAll +=1;\r\n }\r\n }\r\n setEsByTechTypeSelectedAll(icheckedAll===opciones.length);\r\n setfilterTecTypeList(opciones);\r\n } \r\n\r\n const filterTemplate = (\r\n <> \r\n \r\n \r\n {t('mtd:Filters')}\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n {t('mtd:WorkingPeriod')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {t('mtd:ByBuilding')}\r\n \r\n
\r\n \r\n \r\n {t('mtd:ByAssignedTech')} \r\n \r\n
\r\n \r\n \r\n {t('mtd:ByTechType')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n \r\n plotOptions: {\r\n bar: { \r\n dataLabels: {\r\n enabled: true\r\n }\r\n },\r\n series: {\r\n point: {\r\n events: {\r\n click(e){\r\n setSubTitleDetail(null);\r\n const seriesName = e.point.series.name;\r\n let dataSerie = {};\r\n let ClaDepto = null;\r\n workOrdersByDeptSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomDepartamento === e.point.category) {\r\n ClaDepto = item.ClaDepartamento;\r\n setSubTitleDetail(item.NomDepartamento);\r\n }\r\n }); \r\n setClaEdificio(ClaDepto);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(null);\r\n setClaTechType(null);\r\n setTitleDetail(t('mtd:WorkordersByDept')); \r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setIsWorkOrders(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n }, \r\n series: workOrdersByDeptSeries\r\n };\r\n\r\n const chartOrdersTemplate = (\r\n <> \r\n
',\r\n pointFormat: '{point.percentage:.1f}%' \r\n },\r\n plotOptions: {\r\n series: {\r\n cursor: 'pointer' \r\n },\r\n pie: {\r\n dataLabels: {\r\n enabled: true,\r\n distance: -65,\r\n style: {\r\n color: '#000'\r\n }\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n console.log('seriesName',seriesName);\r\n console.log('options',e.point.options);\r\n if(e.point.options.name==='overduetotal'){\r\n setIsOverdueWorkOrders(false);\r\n setIsOverdueWorkOrdersTotal(true);\r\n }else{\r\n setIsOverdueWorkOrders(true);\r\n setIsOverdueWorkOrdersTotal(false);\r\n }\r\n setTitleDetail(t('mtd:OverdueWorkOrders'));\r\n setSubTitleDetail(t('mtd:Detail'));\r\n setClaEdificio(null);\r\n setClaTechType(null);\r\n setClaEstatusOt(null);\r\n setClaAssignedTech(null);\r\n setIsOpenWorkOrders(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setIsWorkOrders(false);\r\n setIsCurrentWeekWorkOrders(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n },\r\n startAngle: 180,\r\n endAngle: 180,\r\n center: ['50%', '50%'],\r\n size: '150%'\r\n }\r\n },\r\n series: [{\r\n type: 'pie',\r\n name: '',\r\n innerSize: '60%',\r\n data: [\r\n [`${OverdueWorkOrders } Of ${ OverdueWorkOrdersTotal}`, OverdueWorkOrders],\r\n {\r\n name: 'overduetotal',\r\n y: OverdueWorkOrdersTotal,\r\n dataLabels: {\r\n enabled: false\r\n }\r\n }\r\n ]\r\n }]\r\n }; \r\n\r\n const workOrdersOnTimePieChartOptions = {\r\n chart: {\r\n type: 'pie', \r\n plotBackgroundColor: null,\r\n plotBorderWidth: null,\r\n plotShadow: false,\r\n height: '140px' \r\n },\r\n title: {\r\n text: \"\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n accessibility: {\r\n point: {\r\n valueSuffix: '%'\r\n }\r\n },\r\n tooltip: { \r\n headerFormat: '{point.x}
',\r\n pointFormat: '{point.percentage}' \r\n },\r\n plotOptions: {\r\n pie: {\r\n dataLabels: {\r\n enabled: true,\r\n distance: -75,\r\n y: 12,\r\n style: {\r\n fontWeight: 'bold',\r\n color: '#000',\r\n fontSize:22\r\n }\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n if(e.point.options.name==='workorderontimerest'){\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(true);\r\n }else{\r\n setIsOntimeWorkOrders(true);\r\n setIsOntimeWorkOrdersTotal(false);\r\n }\r\n setTitleDetail(t('mtd:WorkOrderOnTime'));\r\n setSubTitleDetail(t('mtd:Detail'));\r\n setClaEdificio(null);\r\n setClaTechType(null);\r\n setClaEstatusOt(null);\r\n setClaAssignedTech(null);\r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false); \r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsWorkOrders(false); \r\n setIsCurrentWeekWorkOrders(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n },\r\n startAngle: -90,\r\n endAngle: 90,\r\n center: ['50%', '50%'],\r\n size: '150%'\r\n }\r\n },\r\n series: [{\r\n type: 'pie',\r\n name: '%',\r\n innerSize: '55%',\r\n data: [\r\n [`${WorkOrderOntimeCompletion } %`, WorkOrderOntimeCompletion],\r\n {\r\n name: 'workorderontimerest',\r\n y: WorkOrderOntimeCompletionRest,\r\n dataLabels: {\r\n enabled: false\r\n }\r\n }\r\n ]\r\n }]\r\n }; \r\n \r\n const assignedTechBarChartOptions = {\r\n chart: {\r\n type: 'column'\r\n },\r\n title: {\r\n text: \"\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n xAxis: {\r\n categories: assignedTechBarChartCategories\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: \"Work Orders\"\r\n }, \r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n setSubTitleDetail(null);\r\n const seriesName = e.point.series.name;\r\n let dataSerie = {};\r\n let ClaResponsable = null;\r\n assignedTechBarChartSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomResponsable === e.point.category) {\r\n ClaResponsable = item.ClaResponsable;\r\n setSubTitleDetail(item.NomResponsable);\r\n }\r\n });\r\n console.log('info',dataSerie);\r\n setClaEdificio(null);\r\n setClaTechType(null);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(ClaResponsable);\r\n setTitleDetail(t('mtd:AssignedTech'));\r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false); \r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setIsWorkOrders(false);\r\n setIsCurrentWeekWorkOrders(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: assignedTechBarChartSeries\r\n };\r\n\r\n const techTypeBarChartOptions = {\r\n chart: {\r\n type: 'column'\r\n },\r\n title: {\r\n text: \"\",\r\n align: 'center'\r\n },\r\n subtitle: {\r\n text: \"\"\r\n },\r\n legend: {\r\n enabled: true\r\n },\r\n xAxis: {\r\n categories: techTypeChartCategories,\r\n title: {\r\n text: null\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0\r\n },\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: \"Work Orders\"\r\n },\r\n gridLineWidth: 1,\r\n lineWidth: 0,\r\n stackLabels: {\r\n enabled: true,\r\n style: {\r\n fontWeight: 'bold',\r\n color: 'blue',\r\n textOutline: 'none'\r\n }\r\n } \r\n },\r\n tooltip: {\r\n headerFormat: '{point.x}
',\r\n pointFormat: '{series.name}: {point.y}'\r\n },\r\n plotOptions: {\r\n column: {\r\n stacking: 'normal',\r\n dataLabels: {\r\n enabled: true\r\n },\r\n point: {\r\n events: {\r\n click(e){\r\n const seriesName = e.point.series.name;\r\n setSubTitleDetail(null);\r\n let dataSerie = {};\r\n let ClaDisciplina = null;\r\n techTypeChartSeries.forEach((item, index) => {\r\n if (item.name === seriesName) {\r\n dataSerie = item;\r\n }\r\n });\r\n const infolist = dataSerie.info\r\n infolist.forEach((item, index) => {\r\n if (item.NomDisciplina === e.point.category) {\r\n ClaDisciplina = item.ClaDisciplina;\r\n setSubTitleDetail(item.NomDisciplina);\r\n }\r\n });\r\n console.log('info',dataSerie);\r\n setClaEdificio(null);\r\n setClaTechType(ClaDisciplina);\r\n setClaEstatusOt(dataSerie.id);\r\n setClaAssignedTech(null);\r\n setTitleDetail(t('mtd:TechType'));\r\n setIsOpenWorkOrders(false);\r\n setIsOverdueWorkOrders(false); \r\n setIsOverdueWorkOrdersTotal(false);\r\n setIsOntimeWorkOrders(false);\r\n setIsOntimeWorkOrdersTotal(false);\r\n setIsWorkOrders(false);\r\n setIsCurrentWeekWorkOrders(false);\r\n setEsMostrarDialogDetail(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: techTypeChartSeries\r\n };\r\n\r\n const cardTemplate1 = (\r\n <>\r\n
\r\n {MTTR}{t('mtd:hrs')}\r\n
\r\n openDialogBacklog()}>\r\n {CountWorkOrderBackLogAdministrator}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n | {t('mtd:WorkInProgress')} | \r\n{t('mtd:OverdueWorkOrders')} | \r\n{t('mtd:OntimeCompletation')} | \r\n\r\n \r\n | \r\n|||
|---|---|---|---|---|---|---|---|
| {t('scoreCard:Assigned Tech')} | \r\n{t('mtd:Total')} | \r\n{t('mtd:porcentaje')} | \r\n{t('mtd:Total')} | \r\n{t('mtd:porcentaje')} | \r\n{t('mtd:Total')} | \r\n{t('mtd:porcentaje')} | \r\n{t('mtd:Total')} | \r\n
| \r\n {element.NomResponsable}\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkInProgressTotal,0,'.',','),0,'.',',')}\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkInProgressPorcentaje,1,'.',','),1,'.',',')}%\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkOrderOverDueTotal,0,'.',','),0,'.',',')}\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkOrderOverDuePorcentaje,1,'.',','),1,'.',',')}%\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkOrderOnTimeTotal,0,'.',','),0,'.',',')}\r\n | \r\n\r\n {Highcharts.numberFormat(Highcharts.numberFormat(element.WorkOrderOnTimePorcentaje,1,'.',','),1,'.',',')}%\r\n | \r\n\r\n {element.Total}\r\n | \r\n
\r\n \r\n { Viewport === 'xs' || Viewport === 'sm' ?\r\n (\r\n openSidebar()}> \r\n )\r\n :\r\n (<>)}\r\n {t('mtd:SummarizedPerformance')} \r\n \r\n \r\n {\r\n BuildingCount!= null ? (\r\n <>\r\n ({BuildingCount} {BuildingEtiqueta})\r\n \r\n ):(\r\n <>\r\n \r\n )\r\n }\r\n \r\n
\r\n \r\n\r\n {filterTemplate} \r\n
\r\n \r\n \r\n {UserTrackingSummary.NombreCompleto} \r\n \r\n ({t('usageTracking:UserID')}: {UserTrackingSummary.ClaUsuario})\r\n \r\n
\r\n\r\n {t('usageTracking:EventDate')}: {getFriendlyDate()} \r\n {t('usageTracking:NumberSessions')}: {UserTrackingSummary.Sessions}\r\n
\r\n \r\n\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n useEffect(() => { \r\n setIsDialogVisible(props.isVisible);\r\n if (props.isVisible) {\r\n setUserTrackingSummary({});\r\n setUserTrackingSessions([]);\r\n setTableExpandedRows([]);\r\n getUsageTrackingInfoByUser(\r\n props.claUsuario, \r\n props.startDate, \r\n props.endDate,\r\n props.claTrackingPlataforma, \r\n props.url,\r\n props.navegador,\r\n props.screenWidth,\r\n props.screenHeight,\r\n props.sistemaOperativo,\r\n props.country,\r\n props.city \r\n );\r\n }\r\n }, [\r\n props.isVisible, \r\n props.claUsuario, \r\n props.startDate, \r\n props.endDate,\r\n props.claTrackingPlataforma, \r\n props.url,\r\n props.navegador,\r\n props.screenWidth,\r\n props.screenHeight,\r\n props.sistemaOperativo,\r\n props.country,\r\n props.city \r\n ]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n )\r\n}\r\n\r\nexport default UsageTrackingByUserDialog","import FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable';\r\nimport moment from \"moment\";\r\nimport { Column } from 'primereact/column';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport React, { useEffect, useState } from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Col, Row } from 'reactstrap';\r\nimport { config } from 'utils/config';\r\nimport { callApi } from 'utils/utils';\r\nimport UsageTrackingByUserDialog from '../UsageTrackingByUserDialog/UsageTrackingByUserDialog';\r\n\r\nconst UsageTrackingUsersDialog = (props) => {\r\n const {t, i18n} = useTranslation(['it', 'common']);\r\n const [UsersTrackingSummary, setUsersTrackingSummary] = useState({});\r\n const [UsersTracking, setUsersTracking] = useState([]); \r\n const [SelectedClaUsuario, setSelectedClaUsuario] = useState(null); \r\n const [IsDialogVisible, setIsDialogVisible] = useState(false); \r\n const [IsTrackingByUserDialogVisible, setIsTrackingByUserDialogVisible] = useState(false);\r\n\r\n const getUsageTrackingInfoUsers = (\r\n startDate,\r\n endDate,\r\n claTrackingPlataforma,\r\n url,\r\n navegador,\r\n screenWidth,\r\n screenHeight,\r\n sistemaOperativo,\r\n country,\r\n city\r\n ) => {\r\n const serviceURL = `${config.UrlApiProject}IT/GetITUsageTrackingInfoUsers`; \r\n const paramsService = { \r\n StartDate: startDate,\r\n EndDate: endDate,\r\n ClaTrackingPlataforma: claTrackingPlataforma,\r\n URL: url,\r\n Navegador: navegador,\r\n ScreenWidth: screenWidth,\r\n ScreenHeight: screenHeight,\r\n SistemaOperativo: sistemaOperativo,\r\n Country: country,\r\n City: city\r\n }; \r\n callApi(serviceURL, 'POST', paramsService, (response) => { \r\n console.info(\"TRACKING: UsageTrackingUsersDialog > getUsageTrackingInfoUsers > success > response:\", response);\r\n setUsersTrackingSummary(response.data.usersTrackingSummary); \r\n setUsersTracking(response.data.usersTracking); \r\n });\r\n };\r\n\r\n const getFriendlyDate = () => {\r\n let friendlyDate = '';\r\n const startDateMoment = moment(props.startDate);\r\n const endDateMoment = moment(props.endDate);\r\n const startDate = startDateMoment.format(\"DD MMM YYYY\");\r\n const endDate = endDateMoment.format(\"DD MMM YYYY\");\r\n if (startDateMoment.isSame(endDate)) {\r\n friendlyDate = startDate;\r\n } else {\r\n friendlyDate = `${startDate} - ${endDate}`;\r\n }\r\n return friendlyDate;\r\n };\r\n\r\n const onHide = () => {\r\n if (props.onHide) {\r\n props.onHide();\r\n }\r\n };\r\n\r\n const onUserSessionsPress = (claUsuario) => { \r\n setSelectedClaUsuario(claUsuario);\r\n setIsTrackingByUserDialogVisible(true);\r\n }\r\n\r\n const onHideTrackingByUserDialog = () => {\r\n setIsTrackingByUserDialogVisible(false);\r\n }\r\n\r\n const dialogHeaderTemplate = (\r\n <>\r\n {t('usageTracking:EventsFor')}: {data.UUID}
\r\n\r\n {props.title}\r\n
\r\n\r\n {t('usageTracking:EventDate')}: {getFriendlyDate()} \r\n {t('usageTracking:Views')}: {UsersTrackingSummary.TotalVisits} \r\n {t('usageTracking:NumberSessions')}: {UsersTrackingSummary.TotalSessions}\r\n
\r\n \r\n{rowData[columnName]}
\r\n \r\n );\r\n }\r\n\r\n useEffect(() => { \r\n setIsDialogVisible(props.isVisible);\r\n if (props.isVisible) {\r\n setUsersTrackingSummary({});\r\n setUsersTracking([]); \r\n console.info(\"TRACKING: UsageTrackingUsersDialog > useEffect > props:\", props); \r\n getUsageTrackingInfoUsers(\r\n props.startDate,\r\n props.endDate,\r\n props.claTrackingPlataforma,\r\n props.url,\r\n props.navegador,\r\n props.screenWidth,\r\n props.screenHeight,\r\n props.sistemaOperativo,\r\n props.country,\r\n props.city \r\n );\r\n }\r\n }, [\r\n props.isVisible, \r\n props.title,\r\n props.startDate, \r\n props.endDate,\r\n props.claTrackingPlataforma,\r\n props.url,\r\n props.navegador,\r\n props.screenWidth,\r\n props.screenHeight,\r\n props.sistemaOperativo,\r\n props.country,\r\n props.city\r\n ]);\r\n\r\n return (\r\n <>\r\n \r\n {rowData[columnName]}
\r\n \r\n );\r\n }\r\n\r\n const resetSelectedDetail = (selected) => {\r\n setSelectedURL(null);\r\n setSelectedClaUsuario(null);\r\n setSelectedNavegador(null);\r\n setSelectedScreenWidth(null);\r\n setSelectedScreenHeight(null);\r\n setSelectedSistemaOperativo(null);\r\n setSelectedCountry(null);\r\n setSelectedCity(null);\r\n }\r\n\r\n const onDateRangeChange = (startDate, endDate) => { \r\n setStartDate(startDate);\r\n setEndDate(endDate);\r\n getUsageTrackingInfo(startDate, endDate, ClaTrackingPlatforma); \r\n }\r\n\r\n const onPlatformChange = (e) => { \r\n setClaTrackingPlatforma(e.value);\r\n getUsageTrackingInfo(StartDate, EndDate, e.value); \r\n }\r\n\r\n const onUserSessionsPress = (claUsuario) => { \r\n resetSelectedDetail();\r\n setSelectedClaUsuario(claUsuario);\r\n setIsTrackingByUserDialogVisible(true);\r\n }\r\n\r\n const onURLUsersPress = (url) => {\r\n resetSelectedDetail();\r\n setSelectedURL(url);\r\n setTrackingUsersDialogTitle(`${t(\"usageTracking:PageURL\")}: ${url}`);\r\n setIsTrackingUsersDialogVisible(true);\r\n }\r\n\r\n const onBrowserUsersPress = (navegador) => {\r\n resetSelectedDetail();\r\n setSelectedNavegador(navegador);\r\n setTrackingUsersDialogTitle(`${t(\"usageTracking:Browser\")}: ${navegador}`);\r\n setIsTrackingUsersDialogVisible(true);\r\n }\r\n\r\n const onScreenResolutionUsersPress = (screenResolution, width, heigth) => {\r\n resetSelectedDetail();\r\n setSelectedScreenWidth(width);\r\n setSelectedScreenHeight(heigth);\r\n setTrackingUsersDialogTitle(`${t(\"usageTracking:ScreenResolution\")}: ${screenResolution}`);\r\n setIsTrackingUsersDialogVisible(true);\r\n } \r\n\r\n const onOSUsersPress = (os) => {\r\n resetSelectedDetail();\r\n setSelectedSistemaOperativo(os);\r\n setTrackingUsersDialogTitle(`${t(\"usageTracking:OperatingSystem\")}: ${os}`);\r\n setIsTrackingUsersDialogVisible(true);\r\n }\r\n\r\n const onLocationUsersPress = (location, country, city) => {\r\n resetSelectedDetail();\r\n setSelectedCountry(country);\r\n setSelectedCity(city);\r\n setTrackingUsersDialogTitle(`${t(\"usageTracking:Location\")}: ${location}`);\r\n setIsTrackingUsersDialogVisible(true);\r\n } \r\n\r\n const onHideTrackingUsersDialog = () => {\r\n setIsTrackingUsersDialogVisible(false);\r\n }\r\n\r\n const onHideTrackingByUserDialog = () => {\r\n setIsTrackingByUserDialogVisible(false);\r\n }\r\n\r\n const filtersTemplate = (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('usageTracking:Users')}
\r\n\r\n setGlobalFilter(e.target.value)} placeholder=\"Global Search\" />\r\n \r\n
\r\n);\r\n\r\n const trackingByURLTemplate = (\r\n <>\r\n {t('usageTracking:Pages')}
\r\n \r\n{viz}
\r\n \r\n )\r\n}\r\n\r\nexport default BacklogByDivision;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport BacklogByDivision from './BacklogByDivision';\r\n\r\nconst BacklogByDivisionScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n | ${ element.NomClienteCuenta} | ` +\r\n `|
| Location | ` +\r\n `${ element.Location } | ` +\r\n `
| ${ element.NomClienteCuenta} | ` +\r\n `|
| Location | ` +\r\n `${ element.Location } | ` +\r\n `
| Price | ` +\r\n `${ Highcharts.numberFormat(element.UnitPrice, 2, '.', ',')} | ` +\r\n `
| Spread | ` +\r\n `${ Highcharts.numberFormat(element.UnitSpread, 2, '.', ',')} | ` +\r\n `
| ${t('priceTracker:Outbund')} | ` +\r\n `${ Highcharts.numberFormat(element.Outbound, 2, '.', ',')} | ` +\r\n `
| Tons | ` +\r\n `${ Highcharts.numberFormat(element.Tons, 2, '.', ',')} | ` +\r\n `
| Units | ` +\r\n `${ element.Qty } | ` +\r\n `
| Revenue | ` +\r\n `${ Highcharts.numberFormat(element.Revenue, 2, '.', ',')} | ` +\r\n `
| Agent | ` +\r\n `${ element.Agent } | ` +\r\n `
| Number of invoices | ` +\r\n `${ element.NumberInvoices } | ` +\r\n `
| Factory | ` +\r\n `${ element.Factory } | ` +\r\n `
| Miles | ` +\r\n `${ element.MillasRecorridas } | ` +\r\n `
\r\n
\r\n \r\n ); \r\n};\r\n\r\nexport default PriceTrackerMap;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { Row, Col } from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi} from '../../../utils/utils.js';\r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldDropdown from '../../../components/Controls/FieldDropdown';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport PriceTrackerMap from './PriceTrackerMap';\r\nimport FieldInputSwitch from '../../../components/Controls/FieldInputSwitch';\r\nimport { Slider } from 'primereact/slider';\r\nimport DataGrid, { Column } from 'devextreme-react/data-grid';\r\nimport './PriceTrackerScreen.scss'; \r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable';\r\n\r\nconst PriceTrackerDetailInvoices = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['priceTracker', 'common']);\r\n const [errors, setErrors] = useState({}); \r\n const [IsLoading, setIsLoading] = useState(true);\r\n const [ClaZonaFilter, setClaZonaFilter] = useState('All');\r\n const [ClaStateFilter, setClaStateFilter] = useState('All');\r\n const [ClaFactoryFilter, setClaFactoryFilter] = useState(null);\r\n const [ClaCuCostumerFilter, setClaCuCostumerFilter] = useState(null);\r\n const [ClaCostumerFilter, setClaCostumerFilter] = useState(null);\r\n const [ClaMileRangeFilter, setClaMileRangeFilter] = useState(null);\r\n const [InvoiceDetailList, setInvoiceDetailList] = useState(null);\r\n\r\n useEffect(() => { \r\n getPriceTrackerDetailInvoices(); \r\n setIsLoading(false);\r\n console.log('PriceTrackerDetailInvoices',props)\r\n }, [props]); \r\n\r\n\r\n const getPriceTrackerDetailInvoices = () => { \r\n const url = `${config.UrlApiProject}USADatalake/GetPriceTrackerDetaiInvoice`; \r\n const paramsToService = {\r\n AnioMes:props.AnioMes,\r\n ClaPeriodo:props.ClaPeriodo,\r\n ClaDivision:props.ClaDivision,\r\n ClaNivel:props.ClaNivel,\r\n ClaTipo:props.ClaTipo,\r\n ClaNivelProducto:props.ClaNivelProducto,\r\n NivelProducto:props.NivelProducto,\r\n ClaZona:ClaZonaFilter,\r\n ClaState:ClaStateFilter,\r\n ClaFactory:ClaFactoryFilter,\r\n ClaCuCostumer:ClaCuCostumerFilter,\r\n ClaCostumer:props.ClaCustumer,\r\n ClaDivicion:null,\r\n Milles:ClaMileRangeFilter,\r\n EsPrecioNeto:props.EsPrecioNeto\r\n }\r\n callApi(url, 'POST', paramsToService, (response) => { \r\n const ListInvoiceDetail = response.data.invoiceDetailList;\r\n setInvoiceDetailList(ListInvoiceDetail);\r\n setIsLoading(false);\r\n });\r\n }\r\n\r\nif (IsLoading){\r\n return (<>Loading...);\r\n}\r\n\r\nconst DescriptionTemplate = (item) => {\r\n return (\r\n <> \r\n {\r\n item.data.Nivel!== null ? (\r\n <>\r\n {t('priceTracker:DisclaimerInfo')}
\r\n \r\n {\r\n props.ClaTipo===1 ? (\r\n <>\r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Tons')}\r\n \r\n ):(\r\n <> \r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Units')}\r\n \r\n )\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n} \r\n\r\nexport default InfoNeedsToBeRefresh; \r\n","/* eslint-disable no-template-curly-in-string */\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { Row, Col } from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi} from '../../../utils/utils.js'; \r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldDropdown from '../../../components/Controls/FieldDropdown';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport PriceTrackerMap from './PriceTrackerMap';\r\nimport PriceTrackerDetailInvoices from './PriceTrackerDetailInvoices';\r\nimport FieldInputSwitch from '../../../components/Controls/FieldInputSwitch';\r\nimport { Slider } from 'primereact/slider';\r\nimport DataGrid, { Column } from 'devextreme-react/data-grid';\r\nimport './PriceTrackerScreen.scss'; \r\nimport InfoNeedsToBeRefresh from 'components/Cards/InfoNeedsToBeRefresh/InfoNeedsToBeRefresh';\r\n\r\nconst PriceTrackerDetail = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['priceTracker', 'common']);\r\n const [errors, setErrors] = useState({}); \r\n const [ClaUsuario, setClaUsuario] = useState(null); \r\n const [IsLoading, setIsLoading] = useState(true);\r\n const [DivisionList, setDivisionList] = useState([]);\r\n const [ClaDivisionFilter, setClaDivisionFilter] = useState(null);\r\n const [NomDivisionFilter, setNomDivisionFilter] = useState(null);\r\n const [ClaZonaFilter, setClaZonaFilter] = useState(typeof(props.ClaZonaFilter) !== 'undefined' && props.ClaZonaFilter !== null ? props.ClaZonaFilter : 'All');\r\n const [ClaStateFilter, setClaStateFilter] = useState(typeof(props.ClaStateFilter) !== 'undefined' && props.ClaStateFilter !== null ? props.ClaStateFilter : 'All');\r\n const [ClaFactoryFilter, setClaFactoryFilter] = useState(null);\r\n const [ClaCuCostumerFilter, setClaCuCostumerFilter] = useState(null);\r\n const [ClaCostumerFilter, setClaCostumerFilter] = useState(null);\r\n const [ClaMileRangeFilter, setClaMileRangeFilter] = useState(null);\r\n const [ZonaList, setZonaList] = useState([]);\r\n const [StateList, setStateList] = useState([]);\r\n const [FactoryList, setFactoryList] = useState([]);\r\n const [CucCostumerList, setCucCostumerList] = useState([]);\r\n const [CostumerList, setCostumerList] = useState([]);\r\n const [LevelComparisonList, setLevelComparisonList] = useState([]);\r\n const [layoutLevelComparison, setlayoutLevelComparison] = useState('grid');\r\n const [MapMarkersList, setMapMarkersList] = useState([]);\r\n const [MapMarkersFilterList, setMapMarkersFilterList] = useState([]);\r\n const [MillasList, setMillasList] = useState([]);\r\n const [ChartHistorySeries, setChartHistorySeries] = useState([]);\r\n const [ChartRegressionSeries, setChartRegressionSeries] = useState([]);\r\n const [ChartRegressionSeriesData, setChartRegressionSeriesData] = useState([]);\r\n const [ChartHistoryCategories, setChartHistoryCategories] = useState([]);\r\n const [ChartLineSeries, setChartLineSeries] = useState([]);\r\n const [ChartLineCategories, setChartLineCategories] = useState([]); \r\n const [TypeChartList, setTypeChartList] = useState([]);\r\n const [EsMostrarDialogDetail, setEsMostrarDialogDetail] = useState(false);\r\n const [ClaTypeChart, setClaTypeChart] = useState(null);\r\n const [chartMinMaxSeries, setchartMinMaxSeries] = useState([]);\r\n const [chartMinMaxCategories, setchartMinMaxCategories] = useState([]);\r\n const [chartInfoMinMaxSeries, setchartInfoMinMaxSeries] = useState([]);\r\n const [ChartBarSeries, setChartBarSeries] = useState([]);\r\n const [ChartBarCategories, setChartBarCategories] = useState([]);\r\n const [seriesAverageOfUnitList, setseriesAverageOfUnitList] = useState([]);\r\n const [seriesSumOfTonsList, setseriesSumOfTonsList] = useState([]);\r\n const [seriesSumOfRevenueList, setseriesSumOfRevenueList] = useState([]);\r\n const [productComparisonUnitPriceList, setproductComparisonUnitPriceList] = useState([]);\r\n const [showproductComparisonUnitPriceList, setshowproductComparisonUnitPriceList] = useState([]);\r\n const [showWholesale, setshowWholesale] = useState(false); \r\n const [showIndustrialWire, setshowIndustrialWire] = useState(false); \r\n const [showRetail, setshowRetail] = useState(false); \r\n const [showKeySteelAccountSteel, setshowKeySteelAccountSteel] = useState(false); \r\n const [showProductSpecialist, setshowProductSpecialist] = useState(false); \r\n const [leyendasMapaList, setleyendasMapaList] = useState([]);\r\n const [LeyendaSelect, setLeyendaSelect] = useState({});\r\n const [NivelGrupo, setNivelGrupo] = useState(props.NivelProducto);\r\n const [EsMostrarDialogDetailParent, setEsMostrarDialogDetailParent] = useState(false); \r\n const [ClaNivel, setClaNivel] = useState(null); \r\n const [NivelProducto, setNivelProducto] = useState(null); \r\n const [MinPriceRange, setMinPriceRange] = useState(null);\r\n const [MaxPriceRange, setMaxPriceRange] = useState(null);\r\n const [MinTonsRange, setMinTonsRange] = useState(null);\r\n const [MaxTonsRange, setMaxTonsRange] = useState(null);\r\n const [rangePrice, setrangePrice] = useState([]);\r\n const [rangeTons, setrangeTons] = useState([]);\r\n const [EsMostrarDialogDetailInvoice, setEsMostrarDialogDetailInvoice] = useState(false); \r\n const [ClaCuCustomerInvoice, setClaCuCustomerInvoice] = useState(null);\r\n const [CustomerInvoice, setCustomerInvoice] = useState(null);\r\n const [NomDivisionInvoice, setNomDivisionInvoice] = useState(null);\r\n const [ClaPeriodoInvoice, setClaPeriodoInvoice] = useState(null);\r\n const [EsPrecioNetoFilter, setEsPrecioNetoFilter] = useState(props.EsPrecioNeto); \r\n const [NeedsToClicSearchButton, setNeedsToClicSearchButton] = useState(false);\r\n const [ClaPriceFilter, setClaPriceFilter] = useState(!props.EsPrecioNeto?1:2);\r\n const [TipoPrecioList, setTipoPrecioList] = useState([]);\r\n const [refreshPriceTrackerDetail, setrefreshPriceTrackerDetail] = useState(0);\r\n const [minTons, setminTons] = useState(0); \r\n const [maxTons, setmaxTons] = useState(0); \r\n\r\n const gdpFormat = {\r\n type: 'fixedPoint',\r\n precision: 2,\r\n };\r\n Highcharts.setOptions({\r\n lang: {\r\n thousandsSep: ','\r\n }\r\n })\r\n \r\n\r\n useEffect(() => { \r\n console.log('load',props);\r\n getFilters();\r\n setClaFactoryFilter(-1);\r\n setClaCuCostumerFilter(-1);\r\n setClaCostumerFilter(-1);\r\n setClaZonaFilter(typeof(props.ClaZonaFilter) !== 'undefined' && props.ClaZonaFilter !== null ? props.ClaZonaFilter : 'All');\r\n setClaStateFilter(typeof(props.ClaStateFilter) !== 'undefined' && props.ClaStateFilter !== null ? props.ClaStateFilter : 'All');\r\n getStateByZoneFilter(typeof(props.ClaZonaFilter) !== 'undefined' && props.ClaZonaFilter !== null ? props.ClaZonaFilter : 'All');\r\n // ejecutamos para que refresque la informacion ya con los campos de filtros bien detectados\r\n setrefreshPriceTrackerDetail(refreshPriceTrackerDetail+1);\r\n // setClaZonaFilter('All') \r\n // setClaStateFilter('All')\r\n }, [props]); \r\n\r\n useEffect(\r\n () => {\r\n console.log('getPriceTrackerDetail();', refreshPriceTrackerDetail);\r\n if (refreshPriceTrackerDetail>0){\r\n getPriceTrackerDetail();\r\n }\r\n \r\n }, [refreshPriceTrackerDetail]\r\n );\r\n\r\n\r\n const getFilters = () => { \r\n const url = `${config.UrlApiProject}USADatalake/GetPriceTrackerFilterDetail`; \r\n const paramsToService = {\r\n ClaPeriodo:props.ClaPeriodo,\r\n ClaNivel:props.ClaNivel,\r\n ClaDivision:props.ClaDivision,\r\n ClaTipo:props.ClaTipo,\r\n NivelProducto:props.NivelProducto\r\n }\r\n callApi(url, 'POST', paramsToService, (response) => {\r\n const divisionList = response.data.DivisionList;\r\n const zonaList = response.data.ZonaList;\r\n const stateList = response.data.StateList;\r\n const factoryList = response.data.FactoryList;\r\n const cucCostumerList = response.data.CucCostumerList;\r\n const costumerList = response.data.CostumerList;\r\n const typeList = response.data.TypeList;\r\n const millasList = response.data.MillasList;\r\n const levelComparisonList = response.data.LevelComparisonList;\r\n const configuration = response.data.Configuration[0];\r\n const tipoPrecioList = response.data.TipoPrecioList;\r\n setDivisionList(divisionList);\r\n setZonaList(zonaList);\r\n // setStateList(stateList);\r\n setFactoryList(factoryList)\r\n setCucCostumerList(cucCostumerList);\r\n setCostumerList(costumerList);\r\n setTypeChartList(typeList);\r\n setMillasList(millasList);\r\n setClaTypeChart(1);\r\n setClaDivisionFilter(props.ClaDivision)\r\n setNomDivisionFilter(props.ClaDivision)\r\n setLevelComparisonList(levelComparisonList);\r\n setNivelGrupo(props.NivelProducto);\r\n setMinPriceRange(0)\r\n setMinTonsRange(0)\r\n setMaxPriceRange(configuration.MaxPriceRange);\r\n setMaxTonsRange(configuration.MaxTonsRange);\r\n setrangePrice([0,configuration.MaxPriceRange]);\r\n setrangeTons([0,configuration.MaxTonsRange]);\r\n setTipoPrecioList(tipoPrecioList);\r\n });\r\n }\r\n \r\n const getStateByZoneFilter = (pZona) => {\r\n const getStateCmb = `${config.UrlApiProject}USADatalake/GetPriceTrackerFilterStateByZone?ClaZona=${pZona}`;\r\n const paramsToService = {};\r\n callApi(getStateCmb, 'GET', paramsToService, (response) => {\r\n setStateList(response.data.StateList);\r\n });\r\n\r\n setNeedsToClicSearchButton(true);\r\n };\r\n\r\n const getCustomerByCucFilter = (pCuc) => {\r\n const getCustomerCmb = `${config.UrlApiProject}USADatalake/GetPriceTrackerFilterCustomerByCUC?ClaCuc=${pCuc}`;\r\n const paramsToService = {};\r\n callApi(getCustomerCmb, 'GET', paramsToService, (response) => {\r\n setCostumerList(response.data.CustomerList);\r\n });\r\n setNeedsToClicSearchButton(true);\r\n };\r\n \r\n \r\n const getNivelTracker = (claNivel, nomnivel) => { \r\n setClaNivel(claNivel);\r\n setNivelProducto(nomnivel);\r\n setEsMostrarDialogDetailParent(true);\r\n }\r\n\r\n const getPriceTrackerDetail = () => { \r\n const url = `${config.UrlApiProject}USADatalake/GetPriceTrackerDetail`; \r\n const paramsToService = {\r\n ClaPeriodo:props.ClaPeriodo,\r\n ClaDivision:props.ClaDivision,\r\n ClaNivel:props.ClaNivel,\r\n ClaTipo:props.ClaTipo,\r\n ClaNivelProducto:props.ClaNivelProducto,\r\n NivelProducto:props.NivelProducto,\r\n ClaZona:ClaZonaFilter,\r\n ClaState:ClaStateFilter,\r\n ClaFactory:ClaFactoryFilter,\r\n ClaCuCostumer:ClaCuCostumerFilter,\r\n ClaCostumer:ClaCostumerFilter,\r\n ClaDivicion:null,\r\n Milles:ClaMileRangeFilter,\r\n minPriceRange:(rangePrice!==undefined ? rangePrice[0] : null),\r\n maxPriceRange:(rangePrice!==undefined ? rangePrice[1] : null),\r\n minTonsRange:(rangeTons!==undefined ? rangeTons[0] : null),\r\n maxTonsRange:(rangeTons!==undefined ? rangeTons[1] : null),\r\n EsPrecioNeto: EsPrecioNetoFilter \r\n }\r\n callApi(url, 'POST', paramsToService, (response) => { \r\n setMapMarkersList(response.data.MapaMarkersList);\r\n setMapMarkersFilterList(response.data.MapaMarkersList); \r\n hiddeColumnsDivision(response.data.showproductComparisonUnitPriceList);\r\n setproductComparisonUnitPriceList(response.data.productComparisonUnitPriceList);\r\n setchartMinMaxSeries(response.data.seriesMinimoMaximoList);\r\n setchartMinMaxCategories(response.data.categoriesMinimoMaximoList);\r\n setchartInfoMinMaxSeries(response.data.seriesInfoMinimoMaximoList);\r\n setshowproductComparisonUnitPriceList(response.data.showproductComparisonUnitPriceList);\r\n setleyendasMapaList(response.data.leyendasMapa);\r\n getChartBarAverageOfUnit(response.data.seriesAverageOfUnitList,response.data.categoriesBarList);\r\n getChartBarSumOfTons(response.data.seriesSumOfTonsList)\r\n getChartBarRevenue(response.data.seriesSumOfRevenueList);\r\n getMinimoMaximoChartLine(props.ClaDivision,response.data.seriesMinimoMaximoList,response.data.categoriesMinimoMaximoList,response.data.seriesInfoMinimoMaximoList);\r\n getChartHistory(response.data.seriesHistList); \r\n const infoList = response.data.seriesRegressionList.infoRegression; \r\n const tons = getTons(infoList);\r\n setminTons(tons[0]);\r\n setmaxTons(tons[1]);\r\n getChartRegression(infoList,response.data.seriesRegressionData); \r\n setIsLoading(false);\r\n setNeedsToClicSearchButton(false);\r\n });\r\n }\r\n\r\n const hiddeColumnsDivision = (divisionList) => { \r\n divisionList.forEach((element)=>{\r\n if(element.ClaGrupoEstadistico1===477){\r\n setshowWholesale(true); \r\n }\r\n if(element.ClaGrupoEstadistico1===478){\r\n setshowIndustrialWire(true);\r\n }\r\n if(element.ClaGrupoEstadistico1===479){\r\n setshowKeySteelAccountSteel(true);\r\n }\r\n if(element.ClaGrupoEstadistico1===480){\r\n setshowProductSpecialist(true);\r\n }\r\n if(element.ClaGrupoEstadistico1===481){\r\n setshowRetail(true);\r\n }\r\n })\r\n \r\n }\r\n\r\n const getChartHistory = (series) => { \r\n setChartHistorySeries(series);\r\n setChartHistoryCategories([]);\r\n }\r\n\r\n const getChartRegression = (series,data) => { \r\n setChartRegressionSeries(series); \r\n setChartRegressionSeriesData(data); \r\n }\r\n\r\n const getMinimoMaximoChartLine = (division, serieList,categoriesList, infoSeries) => { \r\n const SerieDivisiones = Agrupar(serieList,\"NomDivision\");\r\n const SerieDivision = SerieDivisiones[division];\r\n const SerieList = SerieDivision === undefined ? null : Agrupar(SerieDivisiones[division],\"Serie\");\r\n const series = [];\r\n // Generamos la series\r\n if(SerieList!==null){\r\n infoSeries.forEach((element)=>{\r\n const serieValues = [];\r\n const item = {};\r\n const listValues = SerieList[element.Serie];\r\n listValues.forEach((itemElement)=>{\r\n serieValues.push(itemElement.ImporteVenta)\r\n });\r\n item.name = element.Serie;\r\n item.color = element.ColorHexadecimal;\r\n item.data = serieValues;\r\n series.push(item);\r\n })\r\n }\r\n\r\n const listCategories = categoriesList;\r\n const dataValues = [];\r\n listCategories.forEach((itemElement)=>{\r\n dataValues.push(itemElement.Periodo)\r\n });\r\n\r\n setChartLineSeries(series);\r\n setChartLineCategories(dataValues);\r\n }\r\n\r\n const Agrupar = (Arr,key) => {\r\n return Arr.reduce((acum, x) => {\r\n \r\n (acum[x[key]] = acum[x[key]] || []).push(x);\r\n return acum;\r\n }, {});\r\n}\r\n\r\n const getChartBarAverageOfUnit = (serie, categories) => {\r\n setseriesAverageOfUnitList(serie);\r\n setChartBarCategories(categories);\r\n }\r\n\r\n const getChartBarSumOfTons = (serie) => {\r\n setseriesSumOfTonsList(serie);\r\n }\r\n\r\n const getChartBarRevenue = (serie) => {\r\n setseriesSumOfRevenueList(serie);\r\n } \r\n\r\n const getChartLineByDivision = (sDivision) => {\r\n getMinimoMaximoChartLine(sDivision,chartMinMaxSeries,chartMinMaxCategories,chartInfoMinMaxSeries);\r\n }\r\n\r\n const optionsChartHistory = {\r\n chart: {\r\n zoomType: 'y'\r\n },\r\n title: {\r\n align: 'left',\r\n text: `${props.NivelProducto} ${t('-Historical Price')}`\r\n },\r\n xAxis: {\r\n labels: {\r\n overflow: 'justify'\r\n },\r\n lineColor: \"#1E232A\",\r\n tickColor: \"#1E232A\",\r\n type: \"category\" \r\n },\r\n yAxis: [{\r\n title: { text: '' },\r\n labels: {\r\n format: \"${value:,.0f}\"\r\n }\r\n }],\r\n plotOptions: {\r\n histogram: {\r\n accessibility: {\r\n point: {\r\n valueDescriptionFormat: '{index}. {point.x:.3f} to {point.x2:.3f}, {point.y}.'\r\n }\r\n }\r\n },\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click(e){\r\n const info = e.point;\r\n console.log('ChartHistorySeries info',e);\r\n setClaCuCustomerInvoice(info.claClienteCuenta);\r\n setCustomerInvoice(info.customer);\r\n setNomDivisionInvoice(info.nomDivision);\r\n setClaPeriodoInvoice(info.anioMes);\r\n setEsMostrarDialogDetailInvoice(true);\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: ChartHistorySeries,\r\n tooltip: {\r\n useHTML: true,\r\n headerFormat: '',\r\n pointFormat: `${'Updated Filters
\r\nWe need to refresh the information, please click following button once you set up all your filters.
\r\n | {point.nomDivision} | ' +\r\n '|
| Periodo | ' +\r\n '{point.name} | ' +\r\n '
| Price | ' +\r\n '{point.unitPrice:,.2f} | ' +\r\n '
| Spread | ' +\r\n '{point.spread:,.2f} | ' +\r\n '
| '}${ t('priceTracker:Outbund') } | ` +\r\n `{point.outbound:,.2f} | ` +\r\n `
| Tons | ` +\r\n `{point.tons:,.2f} | ` +\r\n `
| Qty | ` +\r\n `{point.qty} | ` +\r\n `
| Revenue | ` +\r\n `{point.revenue:,.2f} | ` +\r\n `
| Number of invoices | ` +\r\n `{point.numberInvoices} | ` +\r\n `
| Customer | ` +\r\n `{point.customer} | ` +\r\n `
| Location | ` +\r\n `{point.locationCliente} | ` +\r\n `
| Agent | ` +\r\n `{point.agent} | ` +\r\n `
| Factory | ` +\r\n `{point.factory} | ` +\r\n `
| {point.customer} | ' +\r\n '|
| Price | ' +\r\n '{point.y:,.2f} | ' +\r\n '
| Spread | ' +\r\n '{point.spread:,.2f} | ' +\r\n '
| '}${ t('priceTracker:Outbund') } | ` +\r\n `{point.outbound:,.2f} | ` +\r\n `
| Tons | ` +\r\n `{point.x:,.2f} | ` +\r\n `
| Qty | ` +\r\n `{point.qty} | ` +\r\n `
| Revenue | ` +\r\n `{point.revenue:,.2f} | ` +\r\n `
| Number of invoices | ` +\r\n `{point.numberInvoices} | ` +\r\n `
| Location | ` +\r\n `{point.locationCliente} | ` +\r\n `
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n {props.NomPeriodo} {NomDivisionFilter} - \r\n | \r\n\r\n | \r\n \r\n | \r\n
| \r\n \r\n {t('priceTracker:DisclaimerInfo')} \r\n {\r\n props.ClaTipo===1 ? (\r\n <>\r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Tons')}\r\n \r\n ):(\r\n <> \r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Units')}\r\n \r\n )\r\n }\r\n\r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n ):(\r\n <>\r\n \r\n | \r\n \r\n | \r\n \r\n )\r\n }\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {t('priceTracker:RangePriceBetween')}: [{Highcharts.numberFormat(rangePrice[0],0,'.',',')}-{Highcharts.numberFormat(rangePrice[1],0,'.',',')}]\r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {t('priceTracker:RangeTonsBetween')}: [{Highcharts.numberFormat(rangeTons[0],0,'.',',')}-{Highcharts.numberFormat(rangeTons[1],0,'.',',')}]\r\n | \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {\r\n ClaTypeChart===1 ? (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {\r\n EsMostrarDialogDetailParent && \r\n (\r\n setEsMostrarDialogDetailParent(false)}\r\n onChangePriceTrackerDetail={onChangePriceTrackerDetail}\r\n NomPeriodo={props.NomPeriodo} \r\n ClaPeriodo={props.ClaPeriodo} \r\n ClaDivision={props.ClaDivision} \r\n ClaNivel={ClaNivel}\r\n ClaNivelProducto={props.ClaNivelProducto}\r\n NivelProducto={NivelProducto}\r\n ClaTipo={props.ClaTipo}\r\n NomNivel={props.NomNivel}\r\n EsPrecioNeto={props.EsPrecioNeto} \r\n ClaZonaFilter={ClaZonaFilter}\r\n ClaStateFilter={ClaStateFilter}\r\n >\r\n \r\n )\r\n } \r\n {\r\n EsMostrarDialogDetailInvoice && \r\n (\r\n setEsMostrarDialogDetailInvoice(false)}\r\n NomPeriodo={props.NomPeriodo} \r\n AnioMes={ClaPeriodoInvoice}\r\n ClaPeriodo={props.ClaPeriodo} \r\n ClaDivision={NomDivisionInvoice} \r\n ClaNivel={props.ClaNivel}\r\n ClaNivelProducto={props.ClaNivelProducto}\r\n NivelProducto={props.NivelProducto}\r\n ClaTipo={props.ClaTipo}\r\n NomNivel={props.NomNivel}\r\n ClaCustumer={ClaCuCustomerInvoice}\r\n CustomerInvoice={CustomerInvoice}\r\n EsPrecioNeto={props.EsPrecioNeto}\r\n >\r\n \r\n )\r\n } \r\n
\r\n \r\n | \r\n \r\n | \r\n {leyendasMapaList.map((element, index) => { \r\n return ( \r\n\r\n
| \r\n );\r\n })} \r\n \r\n \r\n | \r\n
\r\n \r\n \r\n
\r\n \r\n | \r\n {t('priceTracker:MinimumAndMaximumPriceOf')} \r\n {props.NivelProducto} -\r\n | \r\n\r\n | \r\n
| \r\n {props.NivelProducto} -\r\n | \r\n\r\n | \r\n
\r\n \r\n
| {point.name} | ' +\r\n '||
| ' +\r\n ' | {point.nomDivision} | ' +\r\n '{point.nomDivisionComparacion} | ' +\r\n '
| '}${ t('priceTracker:UnitPrice') } | ` +\r\n `{point.unitPriceDivision:,.2f} | ` +\r\n `{point.unitPriceDivisionComparacion:,.2f} | ` +\r\n `
| ${ t('priceTracker:Tons') } | ` +\r\n `{point.tonsDivision:,.2f} | ` +\r\n `{point.tonsDivisionComparacion:,.2f} | ` +\r\n `
| ${ t('priceTracker:Spread') } | ` +\r\n `{point.spreadDivision:,.2f} | ` +\r\n `{point.spreadDivisionComparacion:,.2f} | ` +\r\n `
| {point.diferenciaPorc:,.2f}${ t('priceTracker:DifferencePorc') } | ` +\r\n `
\r\n
\r\n )\r\n}\r\n\r\n\r\nconst onChangeTipoPrecio = (e) => { \r\n if(e.value===1){\r\n setEsPrecioNetoFilter(false);\r\n }else{\r\n setEsPrecioNetoFilter(true);\r\n } \r\n setClaPriceFilter(e.value);\r\n setNeedsToClicSearchButton(true);\r\n}\r\n\r\nconst onChangeTypePrice = (e) => {\r\n if (e === 'price') {\r\n setEsPrecioNetoFilter(false);\r\n } else {\r\n setEsPrecioNetoFilter(true);\r\n }\r\n setTipoPrecio(e);\r\n setNeedsToClicSearchButton(true);\r\n};\r\n\r\nconst onChangeZona = (e) => { \r\n setLevelComparisonList([]);\r\n getStateByZoneFilter(e.value);\r\n setClaZonaFilter(e.value); \r\n setNeedsToClicSearchButton(true);\r\n}\r\n\r\nconst onChangeState = (e) => { \r\n setLevelComparisonList([]);\r\n setClaStateFilter(e.value);\r\n setNeedsToClicSearchButton(true); \r\n}\r\n\r\nconst onChangeClaSegmento = (e) => { \r\n setLevelComparisonList([]);\r\n setClaSegmento(e.value);\r\n setNeedsToClicSearchButton(true); \r\n}\r\n\r\n\r\n\r\n\r\nconst filters = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n \r\n {t('priceTracker:Search')}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n | \r\n\r\n \r\n | \r\n
\r\n {\r\n ClaTipoFilter===1 ? (\r\n <>\r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Tons')}\r\n \r\n ):(\r\n <> \r\n {t('priceTracker:LeyendaDetailPriceTracker')} {t('priceTracker:Units')}\r\n \r\n )\r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default PriceTrackerScreen;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport FieldButton from '../../../components/Controls/FieldButton/FieldButton.jsx';\r\nimport { Column } from 'primereact/column';\r\nimport { Row, Col, Card, CardBody, CardFooter } from 'reactstrap';\r\nimport { config } from '../../../utils/config';\r\nimport { callApi, showSweetAlert } from '../../../utils/utils';\r\nimport FieldNumber from '../../../components/Controls/FieldNumber.jsx';\r\nimport FieldDataTable from '../../../components/Controls/FieldDataTable/FieldDataTable.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown.jsx';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\nimport { ColumnGroup } from 'primereact/columngroup';\r\nimport Highcharts from 'highcharts';\r\n\r\nconst IncentiveProgramManualAdjustmentsRep = (props) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['incentiveProgramManualAdjustments', 'common']); \r\n\r\n const [errors, setErrors] = useState({});\r\n const [IncentiveGoals, setIncentiveGoals] = useState([]); \r\n const [OpcionesAgente, setOpcionesAgente] = useState([]); \r\n const [IsReadOnly, setIsReadOnly] = useState(false);\r\n \r\n useEffect(() => { \r\n obtenerAgentes(); \r\n setIsReadOnly(typeof(props.IsReadOnly) === 'undefined' || props.IsReadOnly === null ? false : props.IsReadOnly);\r\n }, [props.IsReadOnly]);\r\n\r\n useEffect(() => { \r\n obtieneIncentiveSalesRepInfo(); \r\n setIsReadOnly(typeof(props.IsReadOnly) === 'undefined' || props.IsReadOnly === null ? false : props.IsReadOnly);\r\n }, [props.ClaAnio, props.IsReadOnly]); \r\n\r\n const obtieneIncentiveSalesRepInfo = () => {\r\n const GetIncentiveProgramManualAdjustmentsRep = `${config.UrlApiProject}SalesPerformanceSales/GetIncentiveProgramManualAdjustmentsRep?ClaAnio=${props.ClaAnio === null || props.ClaAnio === undefined ? '' : props.ClaAnio}`;; \r\n callApi(GetIncentiveProgramManualAdjustmentsRep, 'GET', {}, (response) => { \r\n setIncentiveGoals (response.data.IncentiveProgram); \r\n }); \r\n }\r\n\r\n const obtenerAgentes = () => {\r\n const getAgenteCmb = `${config.UrlApiProject}SalesPerformanceSales/GetAgenteCmb`; \r\n callApi(getAgenteCmb, 'GET', {}, (response) => {\r\n setOpcionesAgente(response.data.Agente); \r\n });\r\n };\r\n\r\n const headerScoreCardDetailGroup = ( \r\n \r\n
\r\n \r\n \r\n onClaAgenteChange(props,e)}\r\n errors={errors[`IncentiveGoals[${props.rowIndex}]`]} \r\n /> \r\n
\r\n )\r\n };\r\n\r\n const NomAgenteTemplate = (props) => {\r\n return (\r\n <> \r\n {props.NomAgente}
\r\n \r\n );\r\n };\r\n\r\n const onNumberChange = (props, value) => { \r\n const updatedRow = [...IncentiveGoals];\r\n updatedRow[props.rowIndex][props.field] = value;\r\n updatedRow[props.rowIndex].IsRowEdited = true; \r\n setIncentiveGoals(updatedRow);\r\n };\r\n\r\n const NumberEditor = (columnName, props) => {\r\n if (IsReadOnly === true){ \r\n return NumberTemplate(columnName, props.rowData);\r\n }\r\n\r\n return (\r\n \r\n onNumberChange(props, e.target.value)}\r\n min={-99999999.99}\r\n max={99999999.99}\r\n minFractionDigits={2}\r\n maxFractionDigits={2}\r\n />\r\n
\r\n );\r\n }; \r\n\r\n const NumberTemplate = (columnName, props) => { \r\n return {props[columnName] !== null && props[columnName] !== undefined ? Highcharts.numberFormat(props[columnName], 2, '.', ',') : null}
;\r\n }; \r\n\r\n const fieldRequiredFlag = (rowData, props) => { \r\n return (\r\n <>\r\n {errors[`IncentiveGoals[${props.rowIndex}]`] != null ? () : \"\"}\r\n \r\n );\r\n }\r\n\r\n const valitationScheme = yup.object().shape({ \r\n IncentiveGoals: yup.array().of(\r\n yup.object().shape({\r\n \r\n ClaAgente: yup.number().required(t('common:RequiredField')).nullable()\r\n\r\n // ClaAgente: yup.string().when('BajaLogica', {is: 0,\r\n // then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n // otherwise: yup.string().nullable()\r\n // }),\r\n\r\n // ClaDivision: yup.string().when('BajaLogica', {is: 0,\r\n // then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n // otherwise: yup.string().nullable()\r\n // }),\r\n \r\n // ClaGrupoEstadistico3: yup.string().when('BajaLogica', {is: 0,\r\n // then: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n // otherwise: yup.string().nullable()\r\n // }) \r\n })) \r\n });\r\n\r\n const onSaveClick = async () => {\r\n setErrors({}); \r\n\r\n const value = { \r\n IncentiveGoals \r\n };\r\n\r\n const validator = new YupValidator(valitationScheme);\r\n \r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n \r\n const incentiveGoalsModified = []; \r\n \r\n for (let index = 0; index < IncentiveGoals.length; index++) {\r\n if (IncentiveGoals[index].IsRowEdited){ \r\n incentiveGoalsModified.push(IncentiveGoals[index]); \r\n }\r\n }\r\n \r\n /* mandamos la informacion de los renglones que se modificaron para guardar la informacion */\r\n const paramsService = {\r\n IncentiveProgramManualAdjustmentList: incentiveGoalsModified,\r\n };\r\n \r\n const SaveIncentiveProgramManualAdjustmentsRep = `${config.UrlApiProject}SalesPerformanceSales/SaveIncentiveProgramManualAdjustmentsRep`;\r\n \r\n callApi(SaveIncentiveProgramManualAdjustmentsRep, 'POST', paramsService, (response) => {\r\n showSweetAlert('success', t('common:SuccessOperation'), 'success');\r\n // mandamos refrescar la informacion del grid....\r\n obtieneIncentiveSalesRepInfo(); \r\n });\r\n }\r\n \r\n return (\r\n <>\r\n \r\n setClaAnio(e.value === undefined ? null : e.value)} \r\n /> \r\n
\r\n \r\n \r\n
\r\n\r\n )\r\n\r\n const onChangeOrganizationalValue = (itemValue, itemNode)=> { \r\n setClaUsuario(itemNode.key); /* key = ClaUsaurio */\r\n }\r\n\r\n const onChangeProfunidadInformacionID = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ProfunidadInformacionID;\r\n setErrors(newErrors) \r\n setProfunidadInformacionID(e.value);\r\n setIsOnSearchApplied(false); \r\n };\r\n\r\n const onSearch = async () => { \r\n obtieneSalesDataTransparency();\r\n };\r\n\r\n const getExcelCellFormat = ({ fill, font, bold }) => ({\r\n fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: fill } },\r\n font: { color: { argb: font }, bold },\r\n }); \r\n\r\n const getConditionalAppearance = (cell) => {\r\n if (isTotalCell(cell)) {\r\n return { fill: 'f8f8f8', font: '000000', bold: true };\r\n }\r\n const { value } = cell;\r\n \r\n return { font: '000000' };\r\n };\r\n\r\n const isDataCell = (cell) => (cell.area === 'data' && cell.rowType === 'D' && cell.columnType === 'D');\r\n\r\n const isTotalCell = (cell) => (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');\r\n\r\n // Ensure all rows and columns are expanded to export the entire dataset \r\n const expandAllFields = (fields) => {\r\n fields.forEach(field => {\r\n if (field.area === 'row' \r\n // || field.area === 'column'\r\n ) {\r\n field.expanded = true;\r\n }\r\n });\r\n }; \r\n \r\n\r\n const resetOriginalState = async () => { \r\n setIsOnSearchApplied(false);\r\n const defaultValues = getPivotDataSource(); \r\n defaultValues.store = salesInfo; \r\n setDataSource(new PivotGridDataSource(defaultValues)); \r\n setIsOnSearchApplied(true); \r\n }\r\n\r\n const onExporting = async (e) => { \r\n const workbook = new Workbook();\r\n const worksheet = workbook.addWorksheet('Main sheet');\r\n const pivotGridInstance = pivotGridRef.current.instance;\r\n \r\n const dataSource = pivotGridInstance.getDataSource(); \r\n const currentFields = dataSource.fields();\r\n \r\n expandAllFields(dataSource.fields()); \r\n\r\n await dataSource.reload();\r\n\r\n // Extract the data from the pivot grid\r\n const data = dataSource.getData();\r\n const {rows, columns, values} = data; \r\n \r\n // Function to handle cell values\r\n const handleCellValue = (value, excelCell) => { \r\n \r\n if (typeof(value) !== 'string' && (value === null || isNaN(value))) {\r\n return '';\r\n }\r\n \r\n return value;\r\n };\r\n \r\n await exportPivotGrid({\r\n component: e.component,\r\n worksheet,\r\n customizeCell(options) {\r\n // console.log('options', options);\r\n \r\n const { pivotCell , excelCell } = options;\r\n // excelCell.font = { name: 'Arial', size: 12 };\r\n // excelCell.alignment = { horizontal: 'left' };\r\n \r\n excelCell.value = handleCellValue(excelCell.value, excelCell);\r\n\r\n if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {\r\n const appearance = getConditionalAppearance(pivotCell);\r\n Object.assign(excelCell, getExcelCellFormat(appearance));\r\n }\r\n\r\n const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };\r\n excelCell.border = {\r\n bottom: borderStyle,\r\n left: borderStyle,\r\n right: borderStyle,\r\n top: borderStyle,\r\n };\r\n } \r\n }).then(() => {\r\n workbook.xlsx.writeBuffer()\r\n .then((buffer) => {\r\n saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Sales2yrPivote.xlsx'); \r\n });\r\n });\r\n \r\n \r\n resetOriginalState();\r\n };\r\n\r\n\r\n const filters = (\r\n <>\r\n \r\n onChangeOrganizationalValue(itemValue, itemNode)}> \r\n
\r\n \r\n onChangeProfunidadInformacionID(e)}\r\n label=\"Granularity Level / Information Depth\"\r\n showClear={false}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onSearch()}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n } \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n const onChangeClaUbicacion = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaUbicacion;\r\n setErrors(newErrors) \r\n setClaUbicacion(e.value);\r\n setEsApply(false);\r\n \r\n if (e.value === null || typeof(e.value) === 'undefined'){\r\n setNomUbicacion(''); \r\n setProduccionSeguimientoDiarioList([]);\r\n setClaZona(null);\r\n setClaTurno(null); \r\n setOpcionesZona([])\r\n setOpcionesTurnos([]);\r\n return;\r\n }\r\n\r\n const UbicacionList = [...PlantasList];\r\n const UbicacionName = UbicacionList.filter((item) => item.ClaUbicacion === e.value)[0];\r\n if(UbicacionName!==undefined){\r\n setNomUbicacion(UbicacionName.NombreUbicacion); \r\n } \r\n\r\n setProduccionSeguimientoDiarioList([]);\r\n setClaZona(null);\r\n setClaTurno(null);\r\n getZonas(e.value);\r\n getTurnos(e.value);\r\n};\r\n\r\nconst getPlantas = () => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetPlantasProduccionSeguimientoCmb`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setPlantasList(response.data.PlantasList);\r\n }, null, false, true);\r\n}\r\n \r\n \r\n const filters = (\r\n <> \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n onSearch()}\r\n >\r\n \r\n \r\n
\r\n {t('wtw:infoDailyProduction')}.
\r\n\r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeFecha(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onZoneChange(e)}\r\n label={t('wtw:Zone')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onTurnoChange(e)}\r\n label={t('wtw:Shift')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onSave()}\r\n >\r\n \r\n
\r\n \r\n | \r\n {`${t('wtw:DowntimeReason')}`}\r\n \r\n \r\n
| \r\n {/* {`${t('wtw:Hours')}`} | */}\r\n\r\n {`${t('wtw:Problem')}`}\r\n \r\n \r\n | \r\n \r\n {`${t('wtw:Solution')}`}\r\n \r\n \r\n | \r\n
\r\n onSave()}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n ):(\r\n <>\r\n {\r\n ProduccionSeguimientoDiarioList.length === 0 || EsApply === false\r\n ?\r\n (\r\n \r\n
\r\n The calculated results for the shift selected indicate that we do not need daily comments today.\r\n
\r\n
\r\n Thank you!\r\n \r\n
{viz}
\r\n \r\n )\r\n}\r\n\r\nexport default VolumeArchitectureOverview;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport VolumeArchitectureOverview from './VolumeArchitectureOverview';\r\n\r\nconst VolumeArchitectureOverviewScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n {t('wtw:Plant')} \r\n | \r\n{props.NomUbicacion} | \r\n\r\n { \r\n props.ClaTipo===3 ?\r\n (<>{t('wtw:Zone')})\r\n :\r\n (<>)\r\n }\r\n \r\n | \r\n\r\n {props.NomSemana}\r\n | \r\n
\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <>\r\n {\r\n props.ClaTipo=== 1 \r\n &&\r\n (\r\n \r\n
Last Update: {moment(item.Fecha).format(\"MMMM, DD, YYYY HH:mm\")}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n {\r\n ComentariosList.filter((item) => {\r\n return item.ClaArea === element.ClaArea && item.ClaDepartamento === element.ClaDepartamento\r\n && item.ClaZona === element.ClaZona\r\n }).map((item, rowIndex) => {\r\n return (\r\n <>\r\n {element.NomZona}\r\n \r\n \r\n )\r\n })\r\n } \r\n
\r\n )\r\n })} \r\n Last Update: {moment(item.Fecha).format(\"MMMM, DD, YYYY HH:mm\")}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n :\r\n (\r\n <>\r\n {DiasList.sort((a, b) => a.Fecha !== b.Fecha ? a.Fecha < b.Fecha ? -1 : 1 : 0).filter((item) => {\r\n return item.ClaTurno === ClaTurno\r\n }).map((element, index) => {\r\n return (\r\n \r\n
\r\n {moment(element.Fecha).format(\"MMMM, DD, YYYY\")}\r\n {\r\n ComentariosList.filter((item) => {\r\n return item.ClaArea === element.ClaArea && item.ClaDepartamento === element.ClaDepartamento\r\n && item.ClaZona === element.ClaZona\r\n && item.Fecha === element.Fecha\r\n && item.ClaTurno === ClaTurno\r\n }).map((item, rowIndex) => {\r\n return (\r\n
\r\n )\r\n })} \r\n \r\n)\r\n }\r\n \r\n \r\n \r\n
\r\n )\r\n })\r\n } \r\n {t('wtw:Cell')}: {item.NomMaquina}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <>\r\n \r\n
\r\n {t('wtw:LastUpdate')}: \r\n {moment(element.Fecha).format(\"MMMM, DD, YYYY HH:mm\")}\r\n
\r\n \r\n \r\n {element.Comentarios}\r\n \r\n
\r\n \r\n ${t('formulario:Cell')}: ${ series.yAxis.categories[y] }
${t('formulario:Day')}: ${ series.xAxis.categories[point.x] }
${t('formulario:Value')}: ${Highcharts.numberFormat(point.value,1) }`;\r\n }\r\n }, \r\n legend: {\r\n align: 'right',\r\n layout: 'vertical',\r\n margin: 0,\r\n verticalAlign: 'top',\r\n y: 25,\r\n symbolHeight: 280\r\n }, \r\n\r\n series: [{\r\n name: t('productionDashboard:chartUtilizationTitle') ,\r\n borderWidth: 1,\r\n color: '#e4e4e4', \r\n data: utilizationSeries,\r\n showInLegend:false,\r\n dataLabels: {\r\n enabled: true,\r\n color: '#FFFFFF'\r\n } \r\n }],\r\n }\r\n\r\nconst templateHeaderDialog = (\r\n <> \r\n
\r\n \r\n
\r\n
\r\n \r\n | \r\n {t('wtw:Plant')} \r\n | \r\n{props.NomUbicacion} | \r\n\r\n {t('wtw:Zone')}\r\n | \r\n{props.NomZona} | \r\n
| \r\n {t('wtw:Departament')} \r\n | \r\n{props.NomDepartamento} ({props.NomArea}) | \r\n\r\n \r\n | \r\n{props.NomSemana} | \r\n
{t('wtw:Shift')}:
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n You can use the following section to include comments at the Zone level.\r\n
\r\n Click View Cell Comments to access an overview of comments organized by cell.\r\n
\r\n \r\n \r\n Click View Cell Comments to access an overview of comments organized by cell.\r\n
\r\n {`${t('wtw:Comments')}:`}\r\n onChangeExplicacionProblema(e)} \r\n errors={errors} \r\n maxLength={3000}\r\n />\r\n
\r\n \r\n \r\n onSave()}\r\n >\r\n \r\n
\r\n \r\n | \r\n |
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n ); \r\n};\r\n\r\nexport default DailyOperationProductionTrendSkeleton;","import { Skeleton } from 'primereact/skeleton';\r\nimport React from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\n\r\nconst DailyOperationProductionTrendChartSkeleton = (props) => {\r\n const {t, i18n} = useTranslation(['companyOverview', 'common']); \r\n\r\n const summaryTemplate = (\r\n <>\r\n \r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n } \r\n \r\n )\r\n }\r\n\r\n if (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n \r\n View detail by asset / cell \r\n \r\n
\r\n \r\n \r\n {screenRender()}\r\n
\r\n \r\n \r\n )\r\n }\r\n return (\r\n <>\r\n \r\n {IsLoading ? (\r\n \r\n ExportExcelDetail()}\r\n > \r\n \r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n NomArticuloTemplate (rowData, 'NomArticulo')} headerStyle={{ width: '300px' }} columnKey=\"NomArticulo\"> \r\n DecimalTemplate (rowData, 'UnitsByHr', 2)}> \r\n PorcentajeTemplate (rowData, 'Utilizacion')}> \r\n PorcentajeTemplate (rowData, 'Efficiencia')}> \r\n PorcentajeTemplate (rowData, 'Scrap')}> \r\n PorcentajeTemplate (rowData, 'OEE')}> \r\n DecimalTemplate (rowData, 'Tons', 2)}> \r\n CajasTemplate (rowData, 'Cajas', 0)}> \r\n PorcentajeTemplate (rowData, 'Disponibilidad')}> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n HorasParoTemplate (rowData)} columnKey=\"HorasParo\"> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n \r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DailyOperationProductionTrendDetail;\r\n\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n Row,\r\n Col, \r\n Card,\r\n CardHeader,\r\n CardBody \r\n} from 'reactstrap'; \r\n// import FeedbackCoaching from './FeedbackCoaching.jsx'; \r\nimport Highcharts from 'highcharts';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi,showSweetAlert } from '../../../../utils/utils'; \r\nimport { Dialog } from 'primereact/dialog'; \r\nimport { TreeList, Column, Editing, Scrolling, Paging, Pager, SearchPanel, Selection, Format } from 'devextreme-react/tree-list';\r\nimport 'devextreme/dist/css/dx.light.css'; \r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton'; \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\nimport { TreeTable } from 'primereact/treetable'; \r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport DailyOperationProductionTrendSkeleton from './DailyOperationProductionTrendSkeleton';\r\nimport { TabView, TabPanel } from 'primereact/tabview';\r\nimport DailyOperationProductionTrendChart from './DailyOperationProductionTrendChart';\r\nimport DailyOperationProductionTrendDetail from './DailyOperationProductionTrendDetail';\r\nimport moment from 'moment';\r\n\r\nconst DailyOperationProductionTrend = (props) => {\r\n /* ################## useState area start ################## */\r\nconst { t } = useTranslation(['wtw', 'common']); \r\nconst [TrendList, setTrendList] = useState([]);\r\nconst [TrendDetail, setTrendDetail] = useState([]);\r\nconst [EsVerDetalleChart, setEsVerDetalleChart] = useState(false);\r\nconst [ProduccionSeguimientoReporteList, setProduccionSeguimientoReporteList] = useState([]);\r\nconst [IsLoading, setIsLoading] = useState(false);\r\nconst [IsExporting, setIsExporting] = useState(false);\r\nconst [Anio, setAnio] = useState(null);\r\nconst [Mes, setMes] = useState();\r\nconst [ClaMes, setClaMes] = useState();\r\nconst [ClaCelda, setClaCelda] = useState(props.ClaCelda === undefined ? null : props.ClaCelda); \r\nconst [ClaUbicacion, setClaUbicacion] = useState(null);\r\nconst [PlantasList, setPlantasList] = useState([]);\r\nconst [OpcionesAnios, setOpcionesAnios] = useState([]);\r\nconst [OpcionesMeses, setOpcionesMeses] = useState([]);\r\nconst [OpcionesMesesList, setOpcionesMesesList] = useState([]);\r\nconst [OpcionesDepartamentos, setOpcionesDepartamentos] = useState([]);\r\nconst [OpcionesTurnos, setOpcionesTurnos] = useState([]);\r\nconst [OpcionesCelda, setOpcionesCelda] = useState([]);\r\nconst [errors, setErrors] = useState({}); \r\nconst [SelectedDepartamentos, setSelectedDepartamentos] = useState(null); \r\nconst [SelectedTurnos, setSelectedTurnos] = useState(null); \r\nconst [SelectedDepartamentosString, setSelectedDepartamentosString] = useState(null); \r\nconst [SelectedTurnosString, setSelectedTurnosString] = useState(null); \r\nconst [showPromedioDiarioMes, setShowPromedioDiarioMes] = useState(true);\r\nconst [showTendenciaMes, setShowTendenciaMes] = useState(false);\r\nconst [showTendenciaUltimos30Dias, setShowTendenciaUltimos30Dias] = useState(false);\r\nconst [showPreviousMonths, setShowPreviousMonths] = useState(false);\r\nconst [mesPrevio1, setMesPrevio1] = useState(false);\r\nconst [mesPrevio2, setMesPrevio2] = useState(false);\r\nconst [mesPrevio3, setMesPrevio3] = useState(false); \r\nconst [isInitialized, setIsInitialized] = useState(false); \r\nconst [currentYear, setCurrentYear] = useState(new Date().getFullYear());\r\nconst [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);\r\nconst [TabActiveIndex, setTabActiveIndex] = useState(0);\r\nconst [ClaDepartamento, setClaDepartamento] = useState(null);\r\nconst [TrendData, setTrendData] = useState(null); \r\nconst [Refresh, setRefresh] = useState(0); \r\nconst [NomDepartamento, setNomDepartamento] = useState(null); \r\nconst [NomCelda, setNomCelda] = useState(null); \r\nconst [EsShowDialogDetail, setEsShowDialogDetail] = useState(false); \r\nconst [FechaDetalle, setFechaDetalle] = useState(null); \r\nconst [ClaArea, setClaArea] = useState(null); \r\nconst [ClaMaquina, setClaMaquina] = useState(null); \r\nconst [NomMaquina, setNomMaquina] = useState(null); \r\nconst [MaquinaValue, setMaquinaValue] = useState(null); \r\n\r\nconst [expandedKeys, setExpandedKeys] = useState({});\r\n\r\n const onToggle = (e) => {\r\n setExpandedKeys(e.value); // e.value contains the updated expanded state\r\n };\r\n \r\nuseEffect(() => {\r\n getAnios() \r\n getMeses(0) \r\n getPlantas() \r\n getTurnos(props.ClaUbicacion) \r\n getDepartamentos(props.ClaUbicacion, true)\r\n}, []); // Add props to dependency array if needed\r\n\r\n // Cuando la pantalla se inicializa y recibimos Fecha forzamos el onSearch...\r\n useEffect(() => {\r\n if (props.Fecha !== null && SelectedTurnos && SelectedDepartamentos && !isInitialized) { \r\n const fecha = props.Fecha ? new Date(props.Fecha) : null;\r\n const anio = fecha ? fecha.getFullYear() : undefined;\r\n const mes = fecha ? fecha.getMonth() + 1 : undefined; \r\n onSearch(false, props.ClaUbicacion, SelectedDepartamentos, props.ClaCelda, anio, mes, SelectedTurnos);\r\n setIsInitialized(true); // Set initialized to true to prevent future runs\r\n }\r\n}, [SelectedDepartamentos, SelectedTurnos, isInitialized]); \r\n\r\n\r\nconst getPlantas = () => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetPlantasProduccionSeguimientoCmb`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setPlantasList(response.data.PlantasList);\r\n setClaUbicacion(props.ClaUbicacion);\r\n }, null, false, false);\r\n}\r\n\r\nconst getAnios = () => { \r\n const nClaUbicacion = (ClaUbicacion===null?props.ClaUbicacion:ClaUbicacion);\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioAnios?ClaUbicacion=${nClaUbicacion}`;\r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios); \r\n if(props.Fecha!==null){ \r\n const anio = new Date(props.Fecha).getFullYear();\r\n setAnio(anio);\r\n }else {\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n }\r\n }, null, false, false);\r\n}\r\n\r\nconst getMeses = (anio) => { \r\n const panio = anio;\r\n if(anio===0&&props.Fecha!==null){\r\n anio = new Date(props.Fecha).getFullYear();\r\n }\r\n const paramsService = null; \r\n const nClaUbicacion = (ClaUbicacion===null?props.ClaUbicacion:ClaUbicacion);\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioMeses?ClaUbicacion=${nClaUbicacion}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses);\r\n setOpcionesMesesList(response.data.Meses);\r\n if(props.Fecha!==null&&panio===0){\r\n const mes = new Date(props.Fecha).getMonth()+1 \r\n setMes(mes);\r\n }else{ \r\n setMes(new Date().getMonth()+1);\r\n }\r\n }, null, false, false);\r\n};\r\n\r\nconst getDepartamentos = (nClaUbicacion, esBuscar, turnosSelected) => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioDepartamentos?ClaUbicacion=${nClaUbicacion}`;\r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesDepartamentos(response.data.Departamentos);\r\n let opcionesSelected = response.data.Departamentos.map(ubicacion => (ubicacion)); \r\n\r\n if (props.ClaArea !== null){\r\n opcionesSelected = response.data.Departamentos.filter(item => item.ClaDepartamento === props.ClaArea).map(ubicacion => (ubicacion));\r\n }\r\n setSelectedDepartamentos(opcionesSelected);\r\n setClaDepartamento((opcionesSelected.length>0?opcionesSelected[0].ClaDepartamento:null))\r\n getCeldas(nClaUbicacion,opcionesSelected); \r\n }, null, false, false);\r\n}\r\n\r\nconst getTurnos = (nClaUbicacion) => {\r\n const urlWebService = `${config.UrlApiProject}turno/getTurnos?ClaUbicacion=${nClaUbicacion}`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesTurnos(response.data.Turnos); \r\n let opcionesSelected = response.data.Turnos.map(turno => (turno));\r\n if (props.ClaTurno !== null){\r\n opcionesSelected = response.data.Turnos.filter(item => item.ClaTurno === props.ClaTurno).map(turno => (turno));\r\n }\r\n setSelectedTurnos(opcionesSelected);\r\n }, null, false, false);\r\n}\r\n\r\nconst getCeldas = (nClaUbicacion,departamentos) => { \r\n let selectedDepartamentos = \"\";\r\n if (Array.isArray(departamentos) && departamentos.length > 0) {\r\n selectedDepartamentos = departamentos.map(selected => selected.ClaDepartamento);\r\n selectedDepartamentos = selectedDepartamentos.join(',');\r\n setSelectedDepartamentosString(selectedDepartamentos);\r\n }\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioCeldas`; \r\n const paramsService = {\r\n ClaUbicacion:nClaUbicacion,\r\n ClaAreaList:selectedDepartamentos, \r\n Fecha:props.Fecha\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setOpcionesCelda(response.data.ProduccionCeldas);\r\n }, null, false, false);\r\n}\r\n\r\nconst onSearch = async (validate, nClaUbicacion, dptos, nCelda, nAnio, nMes, turnosSeleccionados) => { \r\n setNomDepartamento(null);\r\n setNomCelda(null);\r\n setTrendList([]);\r\n setTrendDetail([]); \r\n setEsVerDetalleChart(false);\r\n setTabActiveIndex(0);\r\n if(validate){\r\n const value = {\r\n ClaUbicacion,\r\n SelectedDepartamentos,\r\n SelectedTurnos,\r\n Anio,\r\n Mes\r\n };\r\n const validator = new YupValidator(valitationScheme);\r\n const isValid = await validator.validate(value);\r\n if (!isValid){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return\r\n } \r\n }\r\n let selectedDepartamentos = \"\";\r\n let selectedTurnos = \"\";\r\n let selectedCeldas = \"\";\r\n if (Array.isArray(dptos) && dptos.length > 0) {\r\n selectedDepartamentos = dptos.map(selected => selected.ClaDepartamento);\r\n selectedDepartamentos = selectedDepartamentos.join(',');\r\n setSelectedDepartamentosString(selectedDepartamentos);\r\n }\r\n if (Array.isArray(turnosSeleccionados) && turnosSeleccionados.length > 0) {\r\n selectedTurnos = turnosSeleccionados.map(selected => selected.ClaTurno);\r\n selectedTurnos = selectedTurnos.join(',');\r\n setSelectedTurnosString(selectedTurnos); \r\n }\r\n\r\n if (Array.isArray(nCelda) && nCelda.length > 0) {\r\n console.log('nCelda', nCelda, turnosSeleccionados);\r\n selectedCeldas = nCelda.map(selected => selected.ClaMaquina);\r\n selectedCeldas = selectedCeldas.join(','); \r\n }else {\r\n selectedCeldas = '';\r\n }\r\n\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoTendenciaDiariaMes`; \r\n const paramsService = {\r\n ClaUbicacion:nClaUbicacion,\r\n ClaAreaList:selectedDepartamentos, \r\n ClaTurnoList:selectedTurnos, \r\n Fecha:props.Fecha,\r\n ClaCeldaList:selectedCeldas,\r\n ClaMes:nMes,\r\n ClaAnio:nAnio\r\n }; \r\n\r\n setIsLoading(true);\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setIsLoading(false);\r\n const data = (response.data.ProduccionSeguimientoReporteList);\r\n const transforrm = transformToTreeData(data);\r\n setProduccionSeguimientoReporteList(transforrm);\r\n setTrendList([]);\r\n obtenerTituloMesesPrevios(nAnio,nMes);\r\n }, () => { },false,false);\r\n};\r\n\r\nconst obtenerTituloMesesPrevios = (anio, mes) => {\r\n const meses = [t('common:Jan'), t('common:Feb'), t('common:Mar'), t('common:Apr'),\r\n t('common:May'), t('common:Jun'), t('common:Jul'), t('common:Aug'), \r\n t('common:Sep'), t('common:Oct'), t('common:Nov'), t('common:Dec')];\r\n \r\n let mesActual = mes - 1;\r\n let anioActual = anio;\r\n\r\n const titulos = [];\r\n for (let i = 1; i <= 3; i++) {\r\n mesActual--;\r\n if (mesActual < 0) {\r\n mesActual = 11; \r\n anioActual--;\r\n }\r\n titulos.unshift(`${meses[mesActual]}-${anioActual.toString().slice(-2)}`);\r\n }\r\n setMesPrevio3(titulos[0])\r\n setMesPrevio2(titulos[1])\r\n setMesPrevio1(titulos[2])\r\n return titulos;\r\n};\r\n\r\nconst transformToTreeData = (data) => {\r\n const tree = [];\r\n const lookup = {};\r\n if(data.length===0){\r\n return tree;\r\n }\r\n data.forEach(item => {\r\n lookup[item.id] = { key: item.id.toString(), data: item, children: [], parent: null };\r\n });\r\n\r\n data.forEach(item => {\r\n if (item.parentId === null || item.parentId === 0) {\r\n tree.push(lookup[item.id]);\r\n } else {\r\n const parent = lookup[item.parentId];\r\n const childIndex = parent.children.length;\r\n lookup[item.id].key = `${parent.key}-${childIndex}`;\r\n lookup[item.id].parent = parent; // Establecer referencia al padre\r\n parent.children.push(lookup[item.id]);\r\n }\r\n });\r\n\r\n return tree;\r\n};\r\n\r\nconst valitationScheme = yup.object().shape({\r\n ClaUbicacion: yup.string().required(t('common:RequiredField')).nullable(),\r\n Anio: yup.string().required(t('common:RequiredField')).nullable(),\r\n Mes: yup.string().required(t('common:RequiredField')).nullable(),\r\n // SelectedDepartamentos: yup.mixed().required('').nullable(),\r\n});\r\n\r\nconst onClaDepartamentoChange = (nDepartamento) => {\r\n setTrendList([]);\r\n setNomDepartamento(null);\r\n setNomCelda(null);\r\n setEsVerDetalleChart(false);\r\n setClaDepartamento(nDepartamento);\r\n\r\n const departamentoSeleccionado = OpcionesDepartamentos.find(\r\n (departamento) => departamento.ClaDepartamento === nDepartamento\r\n );\r\n \r\n if (departamentoSeleccionado) {\r\n const descripcionDepartamento = departamentoSeleccionado.NomDepartamento4;\r\n setNomDepartamento(descripcionDepartamento);\r\n setNomCelda(null);\r\n const resultados = [];\r\n \r\n // Recorremos lista principal\r\n ProduccionSeguimientoReporteList.forEach(root => {\r\n // Buscamos si en el nivel 1 está el departamento en nivel 2\r\n const childrenNivel2 = root.children.filter(\r\n child => child.data.Descripcion === descripcionDepartamento\r\n );\r\n // Si encuentra coincidencias, agregar el nivel 1 completo con sus hijos\r\n if (childrenNivel2.length > 0) {\r\n resultados.push({\r\n ...root,\r\n children: childrenNivel2 // Solo los hijos de nivel 2 que coincidan\r\n });\r\n }\r\n });\r\n\r\n // Estructura por Nivel 1\r\n const estructuraFinal = resultados.map(root => {\r\n // Recorremos Nivel 2 (departamentos)\r\n const childrenNivel2 = root.children.map(nivel2 => {\r\n const info = Object.keys(nivel2.data)\r\n .filter(key => !isNaN(Number(key))) // Filtramos solo columnas numéricas\r\n .map(columna => {\r\n const dia = Number(columna); // Convertir la columna a número\r\n const fecha = new Date(Anio, Mes - 1, dia); // \r\n return {\r\n Date: fecha, // Fecha\r\n Valor: nivel2.data[columna],\r\n TendenciaUltimos30Dias: nivel2.data.TendenciaUltimos30Dias,\r\n PromedioDiarioMes: nivel2.data.PromedioDiarioMes ,\r\n MesPrevioPromedio1: nivel2.data.MesPrevioPromedio1 ,\r\n MesPrevioPromedio2: nivel2.data.MesPrevioPromedio2 ,\r\n MesPrevioPromedio3: nivel2.data.MesPrevioPromedio3 \r\n };\r\n });\r\n return {\r\n Titulo: nivel2.data.Descripcion, // Nombre Nivel 2\r\n Data: info // Data de Nivel 2\r\n };\r\n });\r\n\r\n // Reestructuramos para que `Data` esté directamente accesible en el primer departamento\r\n return {\r\n Titulo: root.data.Descripcion, // Nombre Nivel 1\r\n NomIndicador: root.data.Descripcion, // Nombre Nivel 1\r\n TipoValorIndicador: root.data.TipoValorIndicador, // Tipo Valor Indicador\r\n Departamento: childrenNivel2.length > 0 ? childrenNivel2[0].Data : [] // Accedemos directo al primer hijo y su data\r\n };\r\n });\r\n \r\n setRefresh(Refresh + 1);\r\n setTimeout(()=> {\r\n setTrendList(estructuraFinal); \r\n }, 1)\r\n \r\n }\r\n};\r\n\r\nconst onViewDetail = (sNivel1) => {\r\n setNomCelda(sNivel1);\r\n setEsVerDetalleChart(true);\r\n setTrendDetail({}); // Inicializamos como objeto vacío\r\n\r\n // Buscar el departamento seleccionado en el Nivel 1\r\n const departamentoSeleccionado = OpcionesDepartamentos.find(\r\n (departamento) => departamento.ClaDepartamento === ClaDepartamento\r\n );\r\n\r\n if (departamentoSeleccionado) {\r\n const descripcionDepartamento = departamentoSeleccionado.NomDepartamento4;\r\n\r\n let resultado = null;\r\n // Recorremos lista principal (Nivel 1)\r\n ProduccionSeguimientoReporteList.forEach(root => {\r\n if (root.data.Descripcion === sNivel1) {\r\n const hijosNivel2 = root.children.filter(\r\n child => child.data.Descripcion === descripcionDepartamento\r\n );\r\n if (hijosNivel2.length > 0) {\r\n resultado = {\r\n ...root,\r\n children: hijosNivel2 // Solo los hijos de Nivel 2 que coincidan\r\n };\r\n }\r\n }\r\n });\r\n\r\n if (resultado) {\r\n // Generamos la estructura final como un objeto en lugar de un array\r\n const hijosConDatos = resultado.children.map(nivel2 => {\r\n // Recorremos Nivel 3 (celdas)\r\n const hijosNivel3 = nivel2.children.map(nivel3 => {\r\n // Generar la estructura por cada columna numerada de 'data'\r\n const columnasNivel3 = Object.keys(nivel3.data)\r\n .filter(key => !isNaN(Number(key))) // Filtrar solo las columnas numéricas\r\n .map(columna => {\r\n const dia = Number(columna); // Convertir la columna a número\r\n const fecha = new Date(Anio, Mes - 1, dia); // \r\n return {\r\n Date: fecha, // Fecha\r\n Valor: nivel3.data[columna],\r\n TendenciaUltimos30Dias: nivel3.data.TendenciaUltimos30Dias,\r\n PromedioDiarioMes: nivel3.data.PromedioDiarioMes ,\r\n MesPrevioPromedio1: nivel3.data.MesPrevioPromedio1 ,\r\n MesPrevioPromedio2: nivel3.data.MesPrevioPromedio2 ,\r\n MesPrevioPromedio3: nivel3.data.MesPrevioPromedio3 \r\n };\r\n }) \r\n return {\r\n Titulo: nivel3.data.Descripcion, // `${resultado.data.Descripcion }-${ nivel3.data.Descripcion}`, // Nombre del nivel 3 (Celda)\r\n Data: columnasNivel3 // Arreglo con DateName, Valor y Goal\r\n };\r\n });\r\n\r\n return {\r\n Titulo: nivel2.data.Descripcion, // Nombre del departamento (nivel 2)\r\n TipoValorIndicador: resultado.data.TipoValorIndicador, // TipoValorIndicador para acceso directo\r\n NomIndicador: resultado.data.Descripcion, // TipoValorIndicador para acceso directo\r\n Celdas: hijosNivel3 // Agregar los hijos del nivel 3 (celdas)\r\n };\r\n });\r\n\r\n const estructuraFinal = {\r\n Titulo: resultado.data.Descripcion, // Nombre Nivel 1\r\n Departamento: hijosConDatos[0] // Eliminamos el array, solo accedemos al primer departamento\r\n };\r\n\r\n setTrendDetail(estructuraFinal);\r\n setEsVerDetalleChart(true);\r\n }\r\n }\r\n};\r\n\r\nconst onViewChart = () =>{\r\n setNomCelda(null);\r\n setEsVerDetalleChart(false);\r\n}\r\n\r\nconst onYearChange = (yearId) => { \r\n const _errors = { ...errors } \r\n delete _errors.Anio; \r\n delete _errors.Mes; \r\n setErrors(_errors); \r\n setAnio(yearId);\r\n\r\n // si el anio seleccionado es igual al actual y el mes actual seleccionado en el combo no es un mes valido cambiamos y seleccionamos currentmont\r\n if (yearId === currentYear && Mes > currentMonth)\r\n {\r\n setMes(currentMonth);\r\n }\r\n\r\n if(yearId!==undefined){\r\n const currentYear = new Date().getFullYear();\r\n const currentMonth = new Date().getMonth() + 1; \r\n if (yearId !== undefined) {\r\n if (yearId === currentYear) { \r\n const filteredMonths = OpcionesMesesList.filter(mes => mes.ClaMes <= currentMonth);\r\n setOpcionesMeses(filteredMonths); \r\n // Si no esta el mes lo limpiamos\r\n const isCurrentMonthInList = filteredMonths.some(mes => mes.ClaMes === currentMonth);\r\n if (!isCurrentMonthInList) {\r\n setMes(null);\r\n }\r\n }else{\r\n setOpcionesMeses(OpcionesMesesList); \r\n }\r\n }\r\n }\r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onMonthChange = (claMes) => { \r\n const _errors = { ...errors } \r\n delete _errors.Mes; \r\n setErrors(_errors)\r\n setMes(claMes);\r\n const mesSeleccionado = OpcionesMeses.find(a => a.ClaMes === claMes);\r\n if (mesSeleccionado) setClaMes(mesSeleccionado.ClaMes);\r\n setProduccionSeguimientoReporteList([]);\r\n}; \r\n\r\nconst onChangeMultiDepartament = (e) => { \r\n const _errors = { ...errors } \r\n delete _errors.SelectedDepartamentos; \r\n setErrors(_errors)\r\n setSelectedDepartamentos(e.value.length < 1? null: e.value); \r\n if(e.value.length===0){\r\n setOpcionesCelda([]);\r\n setClaCelda(null);\r\n }else{\r\n getCeldas(ClaUbicacion,e.value);\r\n }\r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeMultiTurnos = (e) => { \r\n const _errors = { ...errors } \r\n delete _errors.SelectedTurnos; \r\n setErrors(_errors)\r\n setSelectedTurnos(e.value.length < 1? null: e.value); \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n \r\nconst onChangeCelda = (e) => { \r\n setClaCelda(e.value.length < 1? null: e.value); \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeClaUbicacion = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaUbicacion;\r\n setClaCelda(null); \r\n if(e.value!==undefined){\r\n delete newErrors.SelectedDepartamentos; \r\n delete newErrors.SelectedTurnos; \r\n setClaUbicacion(e.value); \r\n getDepartamentos(e.value);\r\n getTurnos(e.value);\r\n }else{\r\n setClaUbicacion(null);\r\n setOpcionesDepartamentos([]);\r\n setSelectedDepartamentos(null)\r\n setOpcionesTurnos([]);\r\n setSelectedTurnos(null);\r\n setOpcionesCelda([]);\r\n }\r\n setErrors(newErrors) \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nfunction formatValue(item, column, applyColorRule, applyClick) {\r\n const result = item.data[column];\r\n if (result === 0||result===undefined||result===null) {\r\n return ;\r\n }\r\n \r\n let formattedResult;\r\n switch (item.data.TipoValorIndicador) {\r\n case 1:\r\n formattedResult = result.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });\r\n break;\r\n case 2:\r\n formattedResult = result.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 });\r\n break;\r\n case 3: \r\n formattedResult = (typeof result === 'number' && !isNaN(result)) ? `${result.toFixed(1)}%` : \"\"; \r\n break;\r\n default:\r\n formattedResult = result;\r\n }\r\n\r\n let classClick = ''\r\n let onMaquinaAreaClick = null;\r\n if(applyClick && item.data.ClaMaquina!==null){\r\n classClick = 'cursor link-text'\r\n onMaquinaAreaClick = () => onMaquinaClick(item, column, formattedResult);\r\n }\r\n else {\r\n onMaquinaAreaClick = () => {};\r\n }\r\n\r\n\r\n if (column==='TendenciaMes') {\r\n const valueMesPrevio1 = item.data.MesPrevio1 ?? 0;\r\n const valueTendenciaMes = item.data.TendenciaMes ?? 0;\r\n if (applyColorRule === true){\r\n if (item.data.ClaIndicador === 4) // Scrap\r\n {\r\n if (valueTendenciaMes > valueMesPrevio1 ){\r\n return {t('wtw:DetailByItem')}
\r\n \r\n{t('wtw:Downtimes')}
\r\n \r\n{t('wtw:DailyCommentsDetail')}
\r\n \r\n applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (valueTendenciaMes < valueMesPrevio1 ){\r\n return applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n }else if (applyColorRule === true){\r\n // si el indicador es top -> bottom:\r\n if (item.data.ClaIndicador === 4) // Scrap\r\n {\r\n if (result > item.data.PromedioDiarioMes ){\r\n return applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (result < item.data.PromedioDiarioMes ){\r\n return applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n \r\n return applyClick && onMaquinaAreaClick()} className={`${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n}\r\n\r\nconst onSelect = (event) => {\r\n console.log('onSelect',event);\r\n};\r\n\r\nconst onMaquinaClick = (item, column, val) => { \r\n const dia = Number(column); \r\n const fecha = new Date(Anio, Mes - 1, dia); \r\n setFechaDetalle(fecha);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion);\r\n setMaquinaValue(val);\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\nconst onAreaClick = (item) => { \r\n // const fecha = new Date(Anio, Mes - 1, 1); \r\n setFechaDetalle(null);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion);\r\n setMaquinaValue('');\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\n // Función para obtener todos los nodos, incluyendo los hijos\r\n const flattenNodes = (nodes) => {\r\n let flatData = [];\r\n nodes.forEach((node) => {\r\n flatData.push(node.data); // Agrega el nodo actual\r\n if (node.children) {\r\n flatData = flatData.concat(flattenNodes(node.children)); // Agrega los hijos de manera recursiva\r\n }\r\n });\r\n return flatData;\r\n};\r\n\r\nconst exportToCSV = () => {\r\n if (ProduccionSeguimientoReporteList.length === 0) {\r\n return;\r\n }\r\n setIsExporting(true);\r\n const allColumns = generateColumns(ProduccionSeguimientoReporteList);\r\n const filteredColumns = allColumns.filter(col => !columnsToOmit.includes(col.field))\r\n .sort((a, b) => b.field - a.field);\r\n\r\n const visibleColumns = [\r\n { field: 'Descripcion', header: t('wtw:Concept') },\r\n showPreviousMonths && { field: 'MesPrevio3', header: mesPrevio3 },\r\n showPreviousMonths && { field: 'MesPrevio2', header: mesPrevio2 },\r\n showPreviousMonths && { field: 'MesPrevio1', header: mesPrevio1 },\r\n showTendenciaUltimos30Dias && { field: 'TendenciaUltimos30Dias', header: t('wtw:TendenciaUltimos30Dias') },\r\n showTendenciaMes && { field: 'TendenciaMes', header: t('wtw:TendenciaMes') },\r\n showPromedioDiarioMes && { field: 'PromedioDiarioMes', header: t('wtw:PromedioDiarioMes') },\r\n ...filteredColumns.map((col) => ({ field: col.field, header: col.header }))\r\n ].filter(Boolean); \r\n\r\n const allNodes = flattenNodes(ProduccionSeguimientoReporteList); \r\n const headers = visibleColumns.map(col => col.header).join(',');\r\n const rows = allNodes.map((data) => {\r\n return visibleColumns.map((col) => {\r\n const value = data[col.field];\r\n return value !== undefined ? value : ''; \r\n }).join(',');\r\n });\r\n \r\n\r\n const csvContent = [headers, ...rows].join('\\n');\r\n \r\n\r\n // Crear y descargar el archivo CSV\r\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.setAttribute('download', 'treetable_export.csv');\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n setIsExporting(false);\r\n}; \r\n\r\nconst filters = (\r\n <> \r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onMonthChange(e.value,e)}\r\n label={t('common:Month')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n optionDisabled={(option) => (currentYear === Anio && option.ClaMes > currentMonth)} \r\n /> \r\n
\r\n \r\n \r\n onChangeMultiDepartament(e)}\r\n options={OpcionesDepartamentos}\r\n errors={errors} \r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeMultiTurnos(e)}\r\n options={OpcionesTurnos}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeCelda(e)}\r\n label={t('wtw:Cell')}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n onClaDepartamentoChange(e.value)}\r\n label={t('wtw:Department')} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {filtersCheckbox}\r\n \r\n bodyTemplate(rowData)}\r\n expander \r\n frozen \r\n style={{ width: '300px' }}\r\n >\r\n \r\n {showPreviousMonths && formatValue(rowData,'MesPrevio3')} style={{ width: '90px' }} header={mesPrevio3} />}\r\n {showPreviousMonths && formatValue(rowData,'MesPrevio2')} style={{ width: '90px' }} header={mesPrevio2} />}\r\n {showPreviousMonths && formatValue(rowData,'MesPrevio1')} style={{ width: '90px' }} header={mesPrevio1} />}\r\n {showTendenciaUltimos30Dias && formatValue(rowData,'TendenciaUltimos30Dias')} style={{ width: '100px' }} header={t('wtw:TendenciaUltimos30Dias')} />}\r\n {showTendenciaMes && formatValue(rowData,'TendenciaMes',true)} style={{ width: '90px' }} header={t('wtw:TendenciaMes')} />}\r\n {showPromedioDiarioMes && formatValue(rowData,'PromedioDiarioMes')} style={{ width: '90px' }} header={t('wtw:PromedioDiarioMes')} />}\r\n {filteredColumns.map((col) => (\r\n formatValue(rowData,col.field.toString(), true, true)}\r\n />\r\n ))}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n {NomMaquina}\r\n \r\n \r\n {\r\n FechaDetalle !== null \r\n ? moment(FechaDetalle).format('MMMM, D, YYYY') \r\n : moment(new Date(Anio, Mes - 1, 1)).format('MMMM, YYYY')\r\n }\r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n <>\r\n {IsLoading ? (\r\n <>\r\n \r\n {\r\n if (e.index === 1) {\r\n onClaDepartamentoChange(ClaDepartamento);\r\n setTabActiveIndex(e.index); \r\n } else {\r\n setTabActiveIndex(e.index);\r\n }\r\n }}\r\n > \r\n \r\n \r\n \r\n {filtersChart}\r\n <>\r\n {TrendList.length > 0 ? (\r\n !EsVerDetalleChart ? (\r\n <>\r\n \r\n \r\n \r\n
\r\n {EsShowDialogDetail ? (\r\n <>\r\n setEsShowDialogDetail(false)}\r\n >\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DailyOperationProductionTrend;","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n Row,\r\n Col, \r\n Card,\r\n CardHeader,\r\n CardBody \r\n} from 'reactstrap'; \r\n// import FeedbackCoaching from './FeedbackCoaching.jsx'; \r\nimport Highcharts from 'highcharts';\r\nimport { config } from '../../../../utils/config';\r\nimport { callApi } from '../../../../utils/utils'; \r\nimport { TabPanel, TabView } from 'primereact/tabview'; \r\nimport DailyOperationProductionTrend from './DailyOperationProductionTrend';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport moment from 'moment';\r\n\r\nconst DailyOperationAssetDetail = ({\r\n ClaUbicacion,\r\n ClaArea,\r\n Fecha\r\n}) => {\r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['wtw', 'common']); \r\n \r\n const [ProduccionSeguimientoDiarioList, setProduccionSeguimientoDiarioList] = useState([]);\r\n const [activeIndex, setActiveIndex] = useState(0);\r\n const [EsDialog, setEsDialog] = useState(false);\r\n const [ClaCelda, setClaCelda] = useState(false);\r\n const [ClaTurno, setClaTurno] = useState('');\r\n const [NomMaquina, setNomMaquina] = useState('');\r\n const [NomTurno, setNomTurno] = useState('');\r\n \r\n useEffect(() => { \r\n // Obtenemos la informacion del detalle de maquinas asociadas al area seleciconada, si compartieron todos los parametros al invocar el componente.\r\n if (ClaUbicacion && ClaArea && Fecha) {\r\n onSearch();\r\n }\r\n }, [ClaUbicacion, ClaArea, Fecha]);\r\n\r\n const onSearch = async () => { \r\n const value = {\r\n ClaUbicacion,\r\n ClaArea, \r\n Fecha\r\n } \r\n \r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioByArea`; \r\n const paramsService = {\r\n ClaUbicacion,\r\n ClaArea,\r\n Fecha \r\n }; \r\n\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setProduccionSeguimientoDiarioList(response.data.ProduccionSeguimientoDiarioList); \r\n }, () => { });\r\n };\r\n\r\n if (ProduccionSeguimientoDiarioList.length === 0){\r\n return (\r\n \r\n \r\n {TrendList.map((col) => (\r\n
\r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n {TrendDetail.Departamento && TrendDetail.Departamento.Celdas.map((celda) => (\r\n
\r\n
\r\n \r\n )\r\n ) : (\r\n <>\r\n {/* TrendList Sin datos */}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n )} \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n const obtieneTurnosTabs = (infoProduccion) => { \r\n const uniqueTurnos = infoProduccion.reduce((acc, current) => {\r\n // Check if the current combination of NomTurno and ClaTurno is already in the accumulator\r\n const exists = acc.find(item => \r\n item.NomTurno === current.NomTurno && item.ClaTurno === current.ClaTurno\r\n );\r\n \r\n // If the combination doesn't exist, add it to the accumulator\r\n if (!exists) {\r\n acc.push({ NomTurno: current.NomTurno, ClaTurno: current.ClaTurno });\r\n }\r\n return acc;\r\n }, []); \r\n\r\n return uniqueTurnos;\r\n }\r\n\r\n const onOpenDialog = (item) => { \r\n setClaCelda(item.ClaCelda);\r\n setClaTurno(item.ClaTurno);\r\n setNomMaquina(item.NomMaquina);\r\n setNomTurno(item.NomTurno);\r\n setEsDialog(true);\r\n }\r\n const dialogStyle = ( \r\n { \r\n }\r\n )\r\n\r\n const headerDialogProductionTrendDetail = () => {\r\n return (\r\n <>\r\n {t('wtw:ProductionTrendDetail')} - {moment(Fecha).format('MMMM, YYYY') } - {t('wtw:Shift')} : {NomTurno} - {t('wtw:Cell')} : {NomMaquina}\r\n \r\n )\r\n }\r\n \r\n return (\r\n <> \r\n \r\n {\r\n obtieneTurnosTabs(ProduccionSeguimientoDiarioList).length > 0 \r\n &&\r\n (\r\n setActiveIndex(e.index)}> \r\n {\r\n \r\n obtieneTurnosTabs(ProduccionSeguimientoDiarioList).map((item,index)=>{ \r\n return( \r\n \r\n {\r\n ProduccionSeguimientoDiarioList.filter(x => x.ClaTurno === item.ClaTurno).map((item, index) => { \r\n return ( \r\n \r\n \r\n \r\n \r\n onOpenDialog(item)}\r\n > {`${item.NomMaquina}`}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n ) \r\n }) \r\n } \r\n \r\n \r\n )\r\n }\r\n {EsDialog ? (\r\n <>\r\n setEsDialog(false)}\r\n position=\"top\"\r\n > \r\n \r\n \r\n \r\n \r\n ) : (\r\n <>\r\n )} \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DailyOperationAssetDetail;\r\n","import React, { useState, useRef, useEffect } from 'react'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport { config } from '../../../../utils/config';\r\nimport { callApi, showSweetAlert} from '../../../../utils/utils'; \r\nimport PageContent from 'layouts/PageContent'; \r\nimport { Panel } from 'primereact/panel';\r\nimport { Ripple } from 'primereact/ripple';\r\nimport { Row,Col,Card, CardHeader, CardTitle, CardBody, CardFooter} from 'reactstrap'; \r\nimport FieldDataView from 'components/Controls/FieldDataView/FieldDataView.jsx';\r\nimport FieldDropdown from 'components/Controls/FieldDropdown.jsx' \r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton.jsx';\r\nimport FieldTextArea from 'components/Controls/FieldTextArea.jsx'\r\nimport FieldCalendar from 'components/Controls/FieldCalendar.jsx'\r\nimport './DailyOperationTrackerScreen.scss'; \r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport Highcharts from 'highcharts';\r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../../utils/YupValidator';\r\nimport InstructionsCard from 'components/Cards/InstructionsCard/InstructionsCard';\r\nimport { setDate } from 'date-fns';\r\nimport FieldDataTable from 'components/Controls/FieldDataTable/FieldDataTable';\r\nimport { Column } from 'primereact/column';\r\nimport { Skeleton } from 'primereact/skeleton';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport moment from \"moment\";\r\nimport FieldText from 'components/Controls/FieldText';\r\nimport DailyOperationAssetDetail from './DailyOperationAssetDetail';\r\nimport FasesActividadesAnexo from 'views/ScoreCard/Projects/FasesActividadesAnexo';\r\n\r\nconst DailyOperationTrackerTask = (props) => { \r\n const { t } = useTranslation(['wtw', 'common']); \r\n const [errors, setErrors] = useState({}); \r\n const [PlantasList, setPlantasList] = useState([]); \r\n const [EsAgregarTarea, setEsAgregarTarea] = useState(false);\r\n const [NomActividadTarea, setNomActividadTarea] = useState(null);\r\n const [DescripcionTarea, setDescripcionTarea] = useState(null);\r\n const [OpcionesResponsables, setOpcionesResponsables] = useState([]);\r\n const [ClaResponsable , setClaResponsable] = useState(null); \r\n const [IdOperacionSeguimientoDiarioTarea , setIdOperacionSeguimientoDiarioTarea] = useState(null); \r\n const [ClaActividad , setClaActividad] = useState(null); \r\n const [FechaTarea, setFechaTarea] = useState(null); \r\n const [FechaTareaCompletada, setFechaTareaCompletada] = useState(null); \r\n const [EsCompletarTarea, setEsCompletarTarea] = useState(false); \r\n const [EsVerAnexo, setEsVerAnexo] = useState(false);\r\n const [ClaProyecto, setClaProyecto] = useState(null);\r\n const [ClaFase, setClaFase] = useState(null);\r\n \r\n useEffect(() => {\r\n console.log('DailyOperationTrackerTask',props);\r\n getPlantas(); \r\n obtenerResponsablesProyecto();\r\n if(props.IdOperacionSeguimientoDiarioTarea>0){\r\n getOperacionSeguimientoDiarioTarea();\r\n }\r\n }, [])\r\n\r\n\r\nconst obtenerResponsablesProyecto = () => { \r\n const GetSummaryScorecardUser = `${config.UrlApiProject}ScoreCard/GetMswBSCColaboradorProyectosTeam`; \r\n const paramsToService = { \r\n ClaProyecto:93\r\n }; \r\n callApi(GetSummaryScorecardUser, 'POST', paramsToService, (response) => { \r\n if (response.data[0].length >0)\r\n { \r\n setOpcionesResponsables(response.data[0]);\r\n } \r\n });\r\n}\r\n\r\nconst onChangeFechaTarea = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.FechaTarea; \r\n setErrors(newErrors);\r\n setFechaTarea(e.target.value); \r\n} \r\n\r\nconst onChangeFechaTareaCompletada = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.FechaTareaCompletada; \r\n setErrors(newErrors);\r\n setFechaTareaCompletada(e.target.value); \r\n} \r\n\r\nconst getOperacionSeguimientoDiarioTarea = () => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetOperacionSeguimientoDiarioTarea`; \r\n const paramsService = {\r\n ClaUbicacion:props.ClaUbicacion,\r\n ClaProyecto:props.ClaProyecto,\r\n ClaFase:props.ClaFase,\r\n ClaActividad:props.ClaActividad,\r\n Fecha:props.Fecha,\r\n Language:''\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n const data=response.data.OperacionSeguimientoDiarioTarea[0];\r\n setErrors(null);\r\n if(data!==undefined){\r\n setIdOperacionSeguimientoDiarioTarea(data.IdOperacionSeguimientoDiarioTarea);\r\n setClaActividad(data.ClaActividad);\r\n setClaResponsable(data.ClaResponsable);\r\n setNomActividadTarea(data.NomActividad);\r\n setDescripcionTarea(data.Descripcion);\r\n setFechaTarea(new Date(data.DueDate)); \r\n setFechaTareaCompletada(null);\r\n setEsCompletarTarea(true);\r\n setClaProyecto(props.ClaProyecto);\r\n setClaFase(props.ClaFase);\r\n setErrors({});\r\n }\r\n setEsAgregarTarea(true);\r\n }, null, false, true);\r\n}\r\n\r\nconst onChangeNomActividadTarea = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.NomActividadTarea; \r\n setErrors(newErrors) \r\n setNomActividadTarea(e.target.value); \r\n}\r\n\r\nconst onChangeDescripcionTarea = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.DescripcionTarea; \r\n setErrors(newErrors) \r\n setDescripcionTarea(e.target.value); \r\n}\r\n\r\nconst onClaResponsableChange = (props, e ) => {\r\n const newErrors = { ...errors } \r\n delete newErrors.ClaResponsable; \r\n setErrors(newErrors) \r\n setClaResponsable(e.value)\r\n}; \r\n \r\n\r\nconst getPlantas = () => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetPlantasProduccionSeguimientoCmb`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setPlantasList(response.data.PlantasList);\r\n }, null, false, true);\r\n}\r\n \r\n \r\nconst valitationSchemeSaveTask = yup.object().shape({\r\n NomActividadTarea: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n DescripcionTarea: yup.string().trim().required(t('common:RequiredField')).nullable(),\r\n FechaTarea: yup.date().required(t('common:RequiredField')).nullable(), \r\n ClaResponsable: yup.mixed().required(t('common:RequiredField')).nullable(),\r\n FechaTareaCompletada: (\r\n EsCompletarTarea\r\n ? yup.date().required(t('common:RequiredField')).nullable() \r\n : yup.date().nullable()\r\n )\r\n}); \r\n\r\nconst onSaveTask = async () => { \r\n const value = {\r\n NomActividadTarea,\r\n DescripcionTarea,\r\n FechaTarea,\r\n ClaResponsable\r\n }\r\n if(EsCompletarTarea){\r\n value.FechaTareaCompletada=FechaTareaCompletada;\r\n }\r\n const validator = new YupValidator(valitationSchemeSaveTask);\r\n const esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n const urlWebService = `${config.UrlApiProject}WTW/SaveOperacionSeguimientoDiarioTarea`; \r\n const paramsService = {\r\n IdOperacionSeguimientoDiarioTarea:props.IdOperacionSeguimientoDiarioTarea,\r\n ClaUbicacion:props.ClaUbicacion,\r\n ClaActividad:props.ClaActividad,\r\n NomActividadTarea,\r\n DescripcionTarea,\r\n Fecha:props.Fecha,\r\n FechaTarea,\r\n FechaTareaCompletada,\r\n ClaResponsable,\r\n Language:''\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Exito'), t('common:SaveSuccess'), 'success');\r\n if (props.onAferSaveTask != null) {\r\n props.onAferSaveTask();\r\n }\r\n }, () => {\r\n });\r\n};\r\n \r\nconst onCloseDialogTask = () => { \r\n if (props.onAfterReturn != null) {\r\n props.onAfterReturn();\r\n }\r\n}\r\n \r\nconst headerDialogTask = () => {\r\n return (\r\n <>\r\n {t('wtw:AddNewTask')}\r\n \r\n )\r\n}\r\n\r\nconst footerDialogTask = () => {\r\n return (\r\n <>\r\n \r\n | \r\n {`${t('wtw:DowntimeReason')}`}\r\n \r\n \r\n
| \r\n {/* {`${t('wtw:Hours')}`} | */}\r\n\r\n {`${t('wtw:Problem')}`}\r\n \r\n \r\n {item.ExplicacionProblema} \r\n \r\n \r\n | \r\n \r\n {`${t('wtw:Solution')}`}\r\n \r\n \r\n {item.PosibleSolucionProblema} \r\n \r\n \r\n | \r\n
\r\n onChangeNomActividadTarea(e)} \r\n errors={errors}\r\n maxLength={250}\r\n />\r\n
\r\n \r\n \r\n onChangeDescripcionTarea(e)} \r\n errors={errors}\r\n maxLength={5000}\r\n />\r\n
\r\n \r\n {DescripcionTarea === null ? 0 : DescripcionTarea.toString().length } / 5000
\r\n \r\n onClaResponsableChange(props,e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeFechaTarea(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeFechaTareaCompletada(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {row.NomActividad}\r\n
\r\n \r\n );\r\n }\r\n \r\n const AssignedToColumna = (row) => { \r\n return (\r\n <> \r\n \r\n {row.AssignedTo}\r\n
\r\n \r\n );\r\n }\r\n \r\n const CreatedByColumna = (row) => { \r\n return (\r\n <> \r\n \r\n {row.CreatedBy}\r\n
\r\n \r\n );\r\n }\r\n \r\n const DateTemplate = (item, columnName) => {\r\n const dateValue = item[columnName];\r\n return (\r\n <> \r\n \r\n {/* moment(item[columnName]).format('MMMM DD, YYYY h:mm:ss a') */}\r\n \r\n { dateValue ? moment(dateValue).format('MMMM DD, YYYY') : '' }\r\n \r\n \r\n \r\n );\r\n }; \r\n \r\nconst skeletonTemplate = () =>{\r\n return (\r\n \r\n )\r\n }\r\n\r\n return (\r\n
\r\n {\r\n ProduccionSeguimientoSemanalList!==null ? (\r\n <> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n onAddTask()}\r\n >\r\n {t('wtw:AddNewTask')}\r\n \r\n \r\n
\r\n {\r\n ProduccionSeguimientoSemanalList.Tasks.length >0\r\n &&\r\n ( \r\n \r\n \r\n \r\n \r\n CreatedByColumna (rowData)}> \r\n DateTemplate (rowData, 'CreationDate')}> \r\n AssignedToColumna (rowData)}> \r\n DateTemplate (rowData, 'DueDate')}> \r\n \r\n \r\n
\r\n )\r\n }\r\n {\r\n ProduccionSeguimientoSemanalList.CommentsDetail.length >0\r\n &&\r\n (\r\n { setEsVerDetalleArea(false)}}\r\n header={headerDialogDetalleMaquinas}\r\n footer={footerDialogDetalleMaquinas}\r\n > \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {EsAgregarTarea ? (\r\n <> \r\n \r\n \r\n \r\n ) : (\r\n <>\r\n )} \r\n
\r\n \r\n )\r\n}\r\n\r\n return (\r\n <> \r\n {`${t('wtw:CommentsHistory')}`}
\r\n \r\n\r\n {t('wtw:Tasks')}\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n \r\n ):(\r\n <>\r\n <>Sin datos\r\n \r\n )\r\n }\r\n {t('wtw:CommentsDetail')}
\r\n {ProduccionSeguimientoSemanalList.CommentsDetail.map((item, index) => { \r\n return ( \r\n \r\n \r\n
\r\n \r\n
\r\n {\r\n item.ComentariosPorAreaFuncional.length >0\r\n &&\r\n (\r\n
\r\n );\r\n })} \r\n \r\n {moment(item.FechaProduccion).format('MMMM DD, YYYY')}\r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n {t('wtw:Plant')} \r\n | \r\n{props.NomUbicacion} | \r\n\r\n \r\n | \r\n\r\n |
| \r\n {t('wtw:Departament')} \r\n | \r\n{props.NomDepartamento} ({props.NomArea}) | \r\n\r\n \r\n | \r\n{props.NomSemana} | \r\n
\r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaAnioMes(e)}\r\n label={t('wtw:YearMonth')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaSemana(e)}\r\n label={t('wtw:Week')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onSearch()}\r\n >\r\n \r\n
\r\n \r\n openDialogDepartament(row)}>\r\n \r\n {row.NomArea}\r\n \r\n
\r\n \r\n);\r\n}\r\n\r\nconst onChangePosibleSolucionProblema = (e) => { \r\n const newErrors = { ...errors }\r\n delete newErrors.PosibleSolucionProblema; \r\n setErrors(newErrors);\r\n setPosibleSolucionProblema(e.target.value);\r\n} \r\n\r\nconst onViewComments = async () => { \r\n setEsMostrarDialogComentarios(true);\r\n};\r\n\r\nconst onChangeEsActionPlan = (e) => {\r\n if (e === 'Si') {\r\n setEsActionPlan(true);\r\n } else {\r\n setFechaVencimiento(null);\r\n setPosibleSolucionProblema(null); \r\n setEsActionPlan(false);\r\n }\r\n};\r\n\r\nconst CajasTemplateCol = (item, columnName, decimals, columnNamePrev, columnNamePorc) => {\r\n const currentValue = item[columnName];\r\n const prevValue = item[columnNamePrev];\r\n const prevValuePoc = columnNamePorc ? item[columnNamePorc] : null;\r\n let changeIcon = '';\r\n let percentageChange = 0;\r\n\r\n if (prevValuePoc !== null && prevValuePoc !== 0) {\r\n percentageChange = prevValuePoc; \r\n changeIcon = percentageChange > 0 ? PrimeIcons.ARROW_UP : PrimeIcons.ARROW_DOWN;\r\n }\r\n console.log('columnNamePrev',columnNamePrev,'prevValue',prevValue)\r\n return (\r\n <> \r\n {columnNamePrev && prevValue !== null && prevValue !== 0 && prevValue !== undefined ? (\r\n \r\n {Highcharts.numberFormat(item[columnName], decimals, '.', ',')} \r\n showProductionTrend({ClaArea: null, NomArea: t('wtw:AllDepatments') })}>View Production Trend
\r\n \r\n \r\n {t('wtw:PlantlevelCommentsInstructions')}\r\n
\r\n Click onViewComments()}>here to view comments organized by department.\r\n
\r\n \r\n \r\n Click onViewComments()}>here to view comments organized by department.\r\n
\r\n {`${t('wtw:Comments')}:`}\r\n onChangeExplicacionProblema(e)} \r\n errors={errors} \r\n maxLength={3000}\r\n />\r\n
\r\n \r\n \r\n {`${t('wtw:DoYouNeedActionPlan')}`}\r\n
\r\n \r\n \r\n {`${t('wtw:ActionPlan')}:`}\r\n onChangePosibleSolucionProblema(e)} \r\n errors={errors} \r\n maxLength={3000}\r\n />\r\n
\r\n \r\n \r\n {`${t('wtw:DueDate')}:`}\r\n onChangeFechaVencimiento(e)}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onSave()}\r\n >\r\n \r\n
\r\n \r\n \r\n {t('daiSeer:WeAreImproving')}\r\n
\r\n \r\n\r\n {title}\r\n \r\n {date.format(\"MMMM Do YYYY, h:mm:ss a\")}\r\n \r\n
\r\n \r\n );\r\n\r\n const step1SelectTopicTemplate = (\r\n <>\r\n{viz}
\r\n \r\n )\r\n}\r\n\r\nexport default SteelTrackMonitor;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport SteelTrackMonitor from './SteelTrackMonitor';\r\n\r\nconst SteelTrackMonitorScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n \r\n {t('companyOverview:ActiveCells')}\r\n
\r\n\r\n {t('companyOverview:ActiveCells')}\r\n
\r\n {\r\n Report && (\r\n\r\n {`${Report.ActiveCount}/${Report.ActiveCount + Report.DownCount + Report.OtherCount}`}\r\n
\r\n )\r\n } \r\n \r\n\r\n {t('companyOverview:Availability')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n {t('companyOverview:Availability')}\r\n
\r\n\r\n {`${TotalAvailability} %`}\r\n
\r\n {/*\r\n \r\n {`${TotalDifference < 0? TotalDifference*-1: TotalDifference} %`} \r\n \r\n \r\n
*/}\r\n \r\n );\r\n\r\n const chartTemplate = (\r\n <> \r\n\r\n {t('companyOverview:OEE')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n {t('companyOverview:OEE')}\r\n
\r\n\r\n {`${TotalOEE} %`}\r\n
\r\n {/*\r\n \r\n {`${TotalDifference < 0? TotalDifference*-1: TotalDifference} %`} \r\n \r\n \r\n
*/}\r\n \r\n );\r\n\r\n const chartTemplate = (\r\n <> \r\n\r\n {t('companyOverview:OverallStatus')}\r\n
\r\n \r\n\r\n {t('companyOverview:OverallStatus')}\r\n
\r\n \r\n\r\n {t('companyOverview:Performance')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n {t('companyOverview:Performance')}\r\n
\r\n\r\n {`${TotalPerformance} %`}\r\n
\r\n {/*\r\n \r\n {`${TotalDifference < 0? TotalDifference*-1: TotalDifference} %`} \r\n \r\n \r\n
*/}\r\n \r\n );\r\n\r\n const chartTemplate = (\r\n <> \r\n\r\n {t('companyOverview:ProductionRate')}\r\n
\r\n \r\n\r\n {t('companyOverview:ProductionRate')}\r\n
\r\n \r\n\r\n {`${TotalBoxesHr} %`} \r\n \r\n {t('companyOverview:BoxesHr')}\r\n \r\n
*/}\r\n \r\n\r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n {`${TotalUtilization} %`}\r\n
\r\n {/*\r\n \r\n {`${TotalDifference < 0? TotalDifference*-1: TotalDifference} %`} \r\n \r\n \r\n
*/}\r\n \r\n );\r\n\r\n const chartTemplate = (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n onShiftChange(e)}\r\n label={t('formulario:Shift')} \r\n errors={errors} \r\n >\r\n \r\n
\r\n \r\n onReportTypeChange(e.value)} \r\n editable={false}\r\n showClear={false}\r\n errors={errors} \r\n /> \r\n
\r\n \r\n onSearchPress()}\r\n className=\"p-button\"\r\n icon=\"pi pi-search\"\r\n label=\"Search\" \r\n />\r\n
\r\n \r\n );\r\n\r\n useEffect(() => { \r\n setStartDate(yesterday);\r\n setEndDate(yesterday);\r\n getShifts();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {row.AccionesTerminada} \r\n {t('hr:Of')} \r\n {row.Acciones} \r\n {t('hr:Activities')} \r\n \r\n
\r\n \r\n
\r\n \r\n ) \r\n }\r\n \r\n );\r\n }\r\n \r\n const sIcon = (EstatusId) => {\r\n let sclass = '';\r\n switch (EstatusId) {\r\n case 1:\r\n sclass = 'pi pi-pencil'; \r\n break;\r\n case 2:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case 3:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case 5:\r\n sclass = 'pi pi-ban'; \r\n break;\r\n case 7:\r\n sclass = 'pi pi-eye'; \r\n break;\r\n case -1:\r\n sclass = 'pi pi-undo'; \r\n break;\r\n default:\r\n sclass = 'pi pi-send'; \r\n }\r\n return (\r\n sclass\r\n );\r\n }\r\n\r\n const dataInfo = (rowData) => {\r\n // console.log('dataInfo',rowData);\r\n const arreglo = [];\r\n rowData.Opciones.forEach((item) => { \r\n const arrItem = { \r\n label: item.NomIDPEstatus,\r\n icon: sIcon(item.ClaIDPEstatus),\r\n command: () => { \r\n switch (item.ClaIDPEstatus) {\r\n case -1:\r\n setIdIDP(rowData.IdIDP);\r\n if(rowData.EsjefeInmediato){\r\n onConfirmUndoSubmit(rowData.IdIDP, MotivoDeshacer); \r\n }else{\r\n setEsDialogUndo(true);\r\n }\r\n break;\r\n case 5:\r\n onConfirmSubmit(5, item.IdIDP, rowData.Version); \r\n break;\r\n default:\r\n console.log(\"default\");\r\n // getIdpDetalle(item); \r\n setIdIDP(item.IdIDP);\r\n setIDPStatusName(rowData.Estatus)\r\n setIDPVersion(rowData.Version);\r\n setShowDetail(true);\r\n }\r\n }\r\n }\r\n arreglo.push(arrItem);\r\n })\r\n return (\r\n arreglo\r\n );\r\n }\r\n\r\n const goalTableColumnTemplate = (rowData) => { \r\n return (\r\n \r\n {rowData.ClaIDPEstatus === idpStatus.ACCEPTED? t('hr:NotParticipatingAtThisTime'): rowData.ObjetivoSmart} \r\n \r\n );\r\n };\r\n\r\n const statusTableColumnTemplate = (rowData) => { \r\n let className = '';\r\n if (\r\n (props.type === reportTypes.MY_SELF && rowData.ClaIDPEstatus === idpStatus.ADDITIONAL_INPUT_NEEDED) ||\r\n (props.type === reportTypes.TEAM && rowData.ClaIDPEstatus === idpStatus.PENDING_REVIEW) \r\n ) {\r\n className = 'text-warning';\r\n }\r\n return (\r\n <>\r\n \r\n {rowData.Estatus}\r\n \r\n \r\n );\r\n }; \r\n \r\n const BotonesTemplate = (rowData) => { \r\n return (\r\n <>\r\n \r\n
\r\n ) \r\n\r\n const confirmationUndoMessageHTML = (\r\n {t('hr:SubmitCancelled')}.
\r\n \r\n
\r\n ) \r\n \r\n const onConfirmSubmit = (claEstatus, nIdIDP, version) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n saveStatus(claEstatus,nIdIDP);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const onConfirmUndoSubmit = (nIdIDP, motive) => { \r\n swal({ \r\n buttons: {\r\n cancelar: {\r\n text: t('common:Cancel'),\r\n value: \"cancel\",\r\n className: \"rounded-button danger\"\r\n },\r\n continuar: {\r\n text: t('common:Continue'),\r\n value: \"continue\",\r\n className: \"rounded-button light-green\"\r\n }\r\n },\r\n content: confirmationUndoMessageHTML\r\n }).then((value) => {\r\n switch (value) { \r\n case \"continue\":\r\n acceptUndo(nIdIDP, motive);\r\n break; \r\n default:\r\n break;\r\n }\r\n });\r\n }\r\n\r\n const onAcceptUndoClick = () => { \r\n acceptUndo(IdIDP, MotivoDeshacer);\r\n }; \r\n \r\n const saveStatus = async (ClaEstatus,Id, version) => {\r\n let value = {\r\n ComentariosRevisado\r\n }\r\n let validator;\r\n let esValido;\r\n if(ClaEstatus===4){\r\n validator = new YupValidator(valitationSchemeRejected);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n if(ClaEstatus===6){\r\n value = {\r\n IDPAcciones\r\n }\r\n validator = new YupValidator(valitationSchemeCompleted);\r\n esValido = await validator.validate(value);\r\n if (!esValido){ \r\n setErrors(validator.errors);\r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return;\r\n }\r\n }\r\n let urlWebServiceSave = '';\r\n if (version === idpVersions.V1) {\r\n urlWebServiceSave = `${config.UrlApiProject}hr/SaveStatusIndividualDevelopmentPersonal`;\r\n } else if (version === idpVersions.V2) {\r\n urlWebServiceSave = `${config.UrlApiProject}hr/SaveStatusIndividualDevelopmentPlanV2`;\r\n }\r\n \r\n const paramsService = {\r\n IdIDP: Id,\r\n ClaIDPEstatus:ClaEstatus,\r\n ComentariosRevisado,\r\n IndividualDevelopmentPersonalAcciones:IDPAcciones,\r\n SupportDocumentCertificateFileData:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileData : null),\r\n SupportDocumentCertificateNomArchivo:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileName: null),\r\n SupportDocumentCertificateExtension:(supportDucumentCertificateDatafiles.length > 0 ? supportDucumentCertificateDatafiles[0].FileExtension: null) \r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n getIDP(props.year, props.type);\r\n });\r\n }\r\n\r\n const acceptUndo = async (idpID, motive) => {\r\n const urlWebServiceSave = `${config.UrlApiProject}hr/AcceptUndoIndividualDevelopmentPersonal`;\r\n const paramsService = {\r\n IdIDP: idpID,\r\n MotivoDeshacer: motive\r\n }; \r\n callApi(urlWebServiceSave, 'POST', paramsService, (response) => {\r\n showSweetAlert(t('common:Success'), t('common:SaveSuccess'), 'success');\r\n closeDialogUndo();\r\n getIDP(props.year, props.type);\r\n });\r\n }\r\n\r\n const FechaRevisionTemplate = (rowData) => {\r\n return (\r\n <>\r\n {t('hr:SubmitUndo')}
\r\n \r\n { moment(rowData.FechaRevisado).format('MM/DD/YYYY h:mm a') }\r\n
\r\n \r\n );\r\n }\r\n\r\n const closeDialogUndo = () => { \r\n setIdIDP(null);\r\n setIDPStatusName('');\r\n setMotivoDeshacer(null);\r\n setEsDialogUndo(false);\r\n };\r\n\r\n const dialogStyle = {\r\n width: '60vw',\r\n };\r\n\r\n const renderFooterUndo = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n }; \r\n\r\n const undoDialogTemplate = (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n );\r\n\r\n const detailDialogTemplate = (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n onAnioChange(e.value, performanceDevelopmentInfo)} \r\n optionValue=\"Anio\"\r\n optionLabel=\"Anio\" \r\n placeholder={t('common:SelectYear')} \r\n showClear={false}\r\n /> \r\n \r\n
\r\n )\r\n }\r\n\r\n const mySelfIDPTableTemplate = (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n {t('hr:Myself')}
\r\n \r\n { \r\n Anio === moment().year() && ( \r\n{t('hr:Team')}
\r\n \r\n{viz}
\r\n \r\n )\r\n}\r\n\r\nexport default ProfitCube;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport ProfitCube from './ProfitCube';\r\n\r\nconst ProfitCubeScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default ConstructConnect;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport ConstructConnect from './ConstructConnect';\r\n\r\nconst ConstructConnectScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default GantryBoxLookup;","import { React, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport GantryBoxLookup from './GantryBoxLookup';\r\n\r\nconst GantryBoxLookupScreen = (props) => {\r\n const {t, i18n} = useTranslation(['operations', 'common']);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {showData ? (\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n ) : showError ? (\r\n | {t('operations:Barcode')}: | \r\n{boxData.barcode} | \r\n
|---|---|
| {t('operations:Cell')}: | \r\n{boxData.cell_description} | \r\n
| {t('operations:ProductionLine')}: | \r\n{boxData.production_line} | \r\n
| {t('operations:SKU')}: | \r\n{boxData.sku} | \r\n
| {t('operations:ItemCode')}: | \r\n{boxData['label sku']} | \r\n
| {t('common:Description')}: | \r\n{boxData.description} | \r\n
| {t('common:Timestamp')}: | \r\n{boxData.timestamp} | \r\n
| {t('operations:Operator')}: | \r\n{boxData.operator} | \r\n
\r\n No data was found for {prevBarcode}\r\n
\r\n ) : <>}\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default CustomerService;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport CustomerService from './CustomerService';\r\n\r\nconst CustomerServiceScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeFecha(e)}\r\n errors={errors}\r\n maxDate={getDefaultDateValue()}\r\n /> \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n);\r\n \r\nconst AreaDepartamentoColumna = (row) => { \r\n return (\r\n <> \r\n openDialogDepartament(row)}>\r\n \r\n {row.NomArea}\r\n \r\n
\r\n \r\n);\r\n}\r\n\r\nconst openDialogDepartament = (item) => {\r\n setSelectedArea(item.ClaArea); \r\n setSelectedAreaName(item.NomArea);\r\n setEsVerDetalleArea(true); \r\n}\r\n\r\n\r\n \r\nconst NomActividadColumna = (row) => { \r\n return (\r\n <> \r\n \r\n {row.NomActividad}\r\n \r\n \r\n);\r\n}\r\n\r\nconst AssignedToColumna = (row) => { \r\n return (\r\n <> \r\n \r\n {row.AssignedTo}\r\n \r\n \r\n);\r\n}\r\n\r\nconst CreatedByColumna = (row) => { \r\n return (\r\n <> \r\n \r\n {row.CreatedBy}\r\n \r\n \r\n);\r\n}\r\n\r\nconst DateTemplate = (item, columnName) => {\r\n const dateValue = item[columnName];\r\n return (\r\n <> \r\n \r\n {/* moment(item[columnName]).format('MMMM DD, YYYY h:mm:ss a') */}\r\n \r\n { dateValue ? moment(dateValue).format('MMMM DD, YYYY') : '' }\r\n \r\n \r\n \r\n );\r\n}; \r\n\r\nconst CompletedDateTemplate = (item) => {\r\n const dateValue = item.CompletedDate;\r\n return (\r\n <> \r\n \r\n {/* moment(item[columnName]).format('MMMM DD, YYYY h:mm:ss a') */}\r\n \r\n { dateValue ? moment(dateValue).format('MMMM DD, YYYY') : (\r\n <>\r\n \r\n
\r\n {\r\n OperacionSeguimientoList.length > 0 &&\r\n (\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n CajasTemplate (rowData, 'Cajas', 0)}> \r\n DecimalTemplate (rowData, 'UnitsByHr', 2)}> \r\n DecimalTemplate (rowData, 'Tons', 2)}> \r\n PorcentajeTemplate (rowData, 'Scrap')}> \r\n PorcentajeTemplate (rowData, 'Utilizacion')}> \r\n PorcentajeTemplate (rowData, 'Disponibilidad')}> \r\n PorcentajeTemplate (rowData, 'Efficiencia')}> \r\n PorcentajeTemplate (rowData, 'OEE')}> \r\n (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n CreatedByColumna (rowData)}> \r\n AssignedToColumna (rowData)}> \r\n DateTemplate (rowData, 'CreationDate')}> \r\n DateTemplate (rowData, 'DueDate')}> \r\n CompletedDateTemplate(rowData)}> \r\n \r\n
\r\n {\r\n OperacionSeguimientoList.length>0 ? (\r\n <> \r\n {OperacionSeguimientoList.map((item, index) => { \r\n return ( \r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n })} \r\n
\r\n \r\n )\r\n}\r\n\r\n return (\r\n <> \r\n showProductionTrend({ClaArea: null, NomArea: t('wtw:AllDepatments') })}>View Production Trend
\r\n \r\n getOperacionSeguimientoDiarioComentarioRazonPrincipal(rowData)}>\r\n getOperacionSeguimientoDiarioComentarioRazonPrincipal(rowData)} \r\n onFocus={(e) => getOperacionSeguimientoDiarioComentarioRazonPrincipal(rowData)} \r\n />\r\n
\r\n )}\r\n >\r\n \r\n \r\n \r\n
\r\n {\r\n OperacionSeguimientoList.length>0 ? (\r\n <> \r\n {OperacionSeguimientoList.map((item, index) => { \r\n return ( \r\n
showProductionTrend(item)}>{`${item.NomArea}`}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n {`${t('wtw:FunctionalArea')}`}\r\n | \r\n\r\n \r\n {`${t('wtw:ExplanationIssues')}`}\r\n \r\n | \r\n\r\n \r\n {`${t('wtw:ExplanationIssuesAddressed')}`}\r\n \r\n | \r\n|
| \r\n | |||
| \r\n \r\n {`${itemData.NomOperacionFuncionArea}`}\r\n \r\n | \r\n {/* {`${t('wtw:Hours')}`} | */}\r\n\r\n getOperacionSeguimientoDiarioComentarioOperacionFuncionArea(item,itemData)}>\r\n \r\n | \r\n \r\n getOperacionSeguimientoDiarioComentarioOperacionFuncionArea(item,itemData)}>\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n ):(\r\n <>\r\n <> \r\n \r\n )\r\n }\r\n {`${t('wtw:CommentsHistory')}`}
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n {`${t('wtw:Fecha')}`}\r\n | \r\n\r\n \r\n {`${t('wtw:ExplanationIssues')}`}\r\n \r\n | \r\n\r\n \r\n {`${t('wtw:ExplanationIssuesAddressed')}`}\r\n \r\n | \r\n
|---|---|---|
| \r\n \r\n {moment(item.Fecha).format('ll')}\r\n \r\n | \r\n \r\n \r\n \r\n {item.ComentarioProblema} \r\n \r\n \r\n | \r\n \r\n \r\n \r\n {item.PosibleSolucionProblema} \r\n \r\n \r\n | \r\n
{`${t('wtw:AddEditYourComment')}`}
\r\n\r\n {t('wtw:ExplanationIssues')}\r\n \r\n\r\n onChangeComentarioProblema(e)} \r\n errors={errors}\r\n maxLength={5000}\r\n autoFocus={!!EsAutofocusComentario} \r\n placeholder={`${t('wtw:PlaceHolderComentarioProblema')}`} \r\n /> \r\n
\r\n \r\n {ComentarioProblema === null ? 0 : ComentarioProblema.toString().length } / 5000
\r\n \r\n \r\n onChangePosibleSolucionProblema(e)} \r\n errors={errors}\r\n maxLength={5000} \r\n autoFocus={!!EsAutofocusSolucion}\r\n placeholder={`${t('wtw:PlaceHolderPosibleSolucionProblema')}`} \r\n />\r\n
\r\n \r\n {PosibleSolucionProblema === null ? 0 : PosibleSolucionProblema.toString().length } / 5000
\r\n {`${t('wtw:CommentsHistory')}`}
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n {`${t('wtw:Fecha')}`}\r\n | \r\n\r\n \r\n {`${t('wtw:MainCause')}`}\r\n \r\n | \r\n
|---|---|
| \r\n \r\n {moment(item.Fecha).format('ll')}\r\n \r\n | \r\n \r\n \r\n \r\n {item.RazonPrincipalProblema} \r\n \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n onSaveRazonPrincipal()}\r\n className=\"p-button p-button-success\"\r\n />\r\n \r\n
\r\n
\r\n \r\n {`${t('wtw:AddEditYourComment')}`}
\r\n\r\n {t('wtw:MainCause')}\r\n \r\n\r\n onChangeRazonPrincipalProblema(e)} \r\n errors={errors}\r\n maxLength={5000}\r\n placeholder={`${t('wtw:RazonPrincipalProblemaPlaceHolder')}`} \r\n />\r\n
\r\n \r\n {RazonPrincipalProblema === null ? 0 : RazonPrincipalProblema.toString().length } / 5000
\r\n \r\n \r\n 
\r\n
\r\n ):(\r\n <> \r\n {imageTemplate(image)}\r\n \r\n ) \r\n )\r\n}\r\n\r\nexport default MCSWNewsletterImage;","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\n\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { config } from 'utils/config';\r\nimport { callApi, formatDate, showSweetAlert } from 'utils/utils';\r\nimport { Card, CardBody, Row, Col, CardHeader, CardFooter } from 'reactstrap';\r\nimport PDFViewer from 'components/Controls/PDFViewer/PDFViewer';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport VideoPlayer from 'components/Controls/VideoPlayer/VideoPlayer.jsx';\r\nimport queryString from 'query-string';\r\n\r\nimport MCSWNewsletterImage from './MSCWNewsletterImage';\r\n\r\nconst MCSWNewsletter = (props) => {\r\n const { t } = useTranslation(['hr', 'common']);\r\n\r\n const [newsletters, setNewsletters] = useState([]);\r\n const [file, setFile] = useState(null);\r\n const [showPdfViewer, setShowPdfViewer] = useState(false);\r\n const VideoPlayerViewer = useRef(); \r\n const [EsShowDialog, setEsShowDialog] = useState(false);\r\n const [fileExtension, setfileExtension] = useState('');\r\n const [selectedNewsletter, setSelectedNewsletter] = useState(null);\r\n const [fileData, setFileData] = useState(null);\r\n\r\n useEffect(() => {\r\n GetNewsletters();\r\n\r\n const params = queryString.parse(props.location.search);\r\n\r\n if (params.IdLibraryFile !== null && params.IdLibraryFile !== undefined) {\r\n onViewNewsletterClick({IdLibraryFile: params.IdLibraryFile});\r\n }\r\n }, [])\r\n\r\n // Get the newsletters\r\n const GetNewsletters = () => {\r\n const urlWebService = `${config.UrlApiProject}HR/GetMCSWNewsletters`;\r\n const paramsService = {};\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setNewsletters(response.data.Newsletters);\r\n });\r\n }\r\n\r\n const newsletterTemplate = (newsletter) => {\r\n return (\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n const getNewsletterFile = (newsletter) => {\r\n const GetFileData = `${config.UrlApiProject}DMS/GetNewsletterLibraryFileById`;\r\n const paramsToService = { \r\n IdLibraryFile: newsletter.IdLibraryFile\r\n };\r\n\r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n setFileData(response.data);\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n const AnexoImg = response.data.ImgDownLoad;\r\n if(AnexoDetalle!==undefined){\r\n \r\n let linkSource = ''\r\n\r\n switch (AnexoDetalle.TypeExtension) {\r\n case 'mp4':\r\n case 'webm':\r\n linkSource = `data:video/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n case 'pdf':\r\n linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setShowPdfViewer(true); \r\n break;\r\n case 'jpg':\r\n case 'gif':\r\n case 'jpeg':\r\n case 'jfif':\r\n case 'pjpeg':\r\n case 'png':\r\n case 'svg':\r\n case 'webp':\r\n case 'bmp':\r\n case 'ico':\r\n case 'cur':\r\n linkSource = `data:image/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n default:\r\n break;\r\n } \r\n \r\n // SI NO FORMAMOS EL LINK QUE LO INTENTE DESCARGAR\r\n if (linkSource === ''){\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n else{ \r\n setFile(linkSource);\r\n setfileExtension(AnexoDetalle.TypeExtension);\r\n }\r\n\r\n }\r\n });\r\n }\r\n\r\n const onViewNewsletterClick = (newsletter) => {\r\n console.log('OnView',newsletter)\r\n setSelectedNewsletter(newsletter);\r\n getNewsletterFile(newsletter);\r\n }\r\n\r\n const copyLink = () => {\r\n if (selectedNewsletter.IdLibraryFile !== undefined) {\r\n navigator.clipboard.writeText(`https://sirius.mcswusa.com/r/MCSWNewsletter?IdLibraryFile=${selectedNewsletter.IdLibraryFile}`);\r\n showSweetAlert('Success', t('common:LinkCopiedSuccessfully'), 'success');\r\n }\r\n else {\r\n navigator.clipboard.writeText('https://sirius.mcswusa.com/r/MCSWNewsletter');\r\n showSweetAlert('Success', t('common:LinkCopiedSuccessfully'), 'success');\r\n }\r\n }\r\n\r\n const downloadFile = () => {\r\n console.log('Download',selectedNewsletter);\r\n const AnexoDetalle = fileData.AnexoDetalle[0];\r\n const AnexoImg = fileData.ImgDownLoad;\r\n console.log(fileData);\r\n\r\n if(AnexoDetalle !== undefined) {\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `Newsletter.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n }\r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n
\r\n {`${newsletter.MonthName} ${newsletter.YearNum} Newsletter`}
\r\n\r\n
\r\n \r\n onViewNewsletterClick(newsletter)}\r\n />\r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {newsletters.map((n) => newsletterTemplate(n))}\r\n
\r\n \r\n \r\n \r\n
\r\n ):(\r\n <> \r\n {imageTemplate(image)}\r\n \r\n ) \r\n )\r\n}\r\n\r\nexport default DntNewsletterImage;","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\n\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton';\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { config } from 'utils/config';\r\nimport { callApi, formatDate, showSweetAlert } from 'utils/utils';\r\nimport { Card, CardBody, Row, Col, CardHeader, CardFooter } from 'reactstrap';\r\nimport PDFViewer from 'components/Controls/PDFViewer/PDFViewer';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport VideoPlayer from 'components/Controls/VideoPlayer/VideoPlayer.jsx';\r\nimport queryString from 'query-string';\r\n\r\nimport DntNewsletterImage from './DntNewsletterImage';\r\n\r\nconst DntNewsletter = (props) => {\r\n const { t } = useTranslation(['hr', 'common']);\r\n\r\n const [newsletters, setNewsletters] = useState([]);\r\n const [file, setFile] = useState(null);\r\n const [showPdfViewer, setShowPdfViewer] = useState(false);\r\n const VideoPlayerViewer = useRef(); \r\n const [EsShowDialog, setEsShowDialog] = useState(false);\r\n const [fileExtension, setfileExtension] = useState('');\r\n const [selectedNewsletter, setSelectedNewsletter] = useState(null);\r\n const [fileData, setFileData] = useState(null);\r\n\r\n useEffect(() => {\r\n GetNewsletters();\r\n\r\n const params = queryString.parse(props.location.search);\r\n\r\n if (params.IdLibraryFile !== null && params.IdLibraryFile !== undefined) {\r\n onViewNewsletterClick({IdLibraryFile: params.IdLibraryFile});\r\n }\r\n }, [])\r\n\r\n // Get the newsletters\r\n const GetNewsletters = () => {\r\n const urlWebService = `${config.UrlApiProject}IT/GetDnTNewsletters`;\r\n const paramsService = {};\r\n\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setNewsletters(response.data.Newsletters);\r\n });\r\n }\r\n\r\n const newsletterTemplate = (newsletter) => {\r\n return (\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n const getNewsletterFile = (newsletter) => {\r\n const GetFileData = `${config.UrlApiProject}DMS/GetNewsletterLibraryFileById`;\r\n const paramsToService = { \r\n IdLibraryFile: newsletter.IdLibraryFile\r\n };\r\n\r\n callApi(GetFileData, 'POST', paramsToService, (response) => {\r\n setFileData(response.data);\r\n const AnexoDetalle = response.data.AnexoDetalle[0];\r\n const AnexoImg = response.data.ImgDownLoad;\r\n if(AnexoDetalle!==undefined){\r\n \r\n let linkSource = ''\r\n\r\n switch (AnexoDetalle.TypeExtension) {\r\n case 'mp4':\r\n case 'webm':\r\n linkSource = `data:video/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n case 'pdf':\r\n linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setShowPdfViewer(true); \r\n break;\r\n case 'jpg':\r\n case 'gif':\r\n case 'jpeg':\r\n case 'jfif':\r\n case 'pjpeg':\r\n case 'png':\r\n case 'svg':\r\n case 'webp':\r\n case 'bmp':\r\n case 'ico':\r\n case 'cur':\r\n linkSource = `data:image/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n setEsShowDialog(true); \r\n break;\r\n default:\r\n break;\r\n } \r\n \r\n // SI NO FORMAMOS EL LINK QUE LO INTENTE DESCARGAR\r\n if (linkSource === ''){\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `${fileName}.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n else{ \r\n setFile(linkSource);\r\n setfileExtension(AnexoDetalle.TypeExtension);\r\n }\r\n\r\n }\r\n });\r\n }\r\n\r\n const onViewNewsletterClick = (newsletter) => {\r\n console.log('OnView',newsletter)\r\n setSelectedNewsletter(newsletter);\r\n getNewsletterFile(newsletter);\r\n }\r\n\r\n const copyLink = () => {\r\n if (selectedNewsletter.IdLibraryFile !== undefined) {\r\n navigator.clipboard.writeText(`https://sirius.mcswusa.com/r/DnTNewsletter?IdLibraryFile=${selectedNewsletter.IdLibraryFile}`);\r\n showSweetAlert('Success', t('common:LinkCopiedSuccessfully'), 'success');\r\n }\r\n else {\r\n navigator.clipboard.writeText('https://sirius.mcswusa.com/r/DnTNewsletter');\r\n showSweetAlert('Success', t('common:LinkCopiedSuccessfully'), 'success');\r\n }\r\n }\r\n\r\n const downloadFile = () => {\r\n console.log('Download',selectedNewsletter);\r\n const AnexoDetalle = fileData.AnexoDetalle[0];\r\n const AnexoImg = fileData.ImgDownLoad;\r\n\r\n if(AnexoDetalle !== undefined) {\r\n const linkSource = `data:application/${AnexoDetalle.TypeExtension};base64,${AnexoImg}`;\r\n const downloadLink = document.createElement(\"a\");\r\n const fileName = `${AnexoDetalle.NomLibraryFile}`;\r\n downloadLink.href = linkSource;\r\n downloadLink.download = `Newsletter.${AnexoDetalle.TypeExtension}`;\r\n downloadLink.click();\r\n }\r\n }\r\n\r\n const renderHeader = () => {\r\n return (\r\n \r\n
\r\n {`${newsletter.MonthName} ${newsletter.YearNum} Newsletter`}
\r\n\r\n
\r\n \r\n onViewNewsletterClick(newsletter)}\r\n />\r\n
\r\n \r\n \r\n
\r\n
\r\n );\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {newsletters.map((n) => newsletterTemplate(n))}\r\n
\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default InventoryFollowUpScreenDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport InventoryFollowUpScreenDash from './InventoryFollowUpScreenDash';\r\n\r\nconst InventoryFollowUpScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default WeeklySalesDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport WeeklySalesDash from './WeeklySalesDash';\r\n\r\nconst WeeklySalesScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default MonthlyDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport MonthlyDash from './MonthlyDash';\r\n\r\nconst MonthlySalesScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n const uploadFooter = () => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n setShowUploadEmployees(true)}\r\n className='p-button-secondary mr-2'\r\n icon='pi pi-upload'\r\n />\r\n updateFilters()}\r\n className='p-button mr-2'\r\n icon='pi pi-search'\r\n />\r\n clearFilters()}\r\n className='p-button-danger'\r\n icon='pi pi-times'\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default SalesRepFollowUpDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport SalesRepFollowUpDash from './SalesRepFollowUpDash';\r\n\r\nconst SalesRepFollowUpScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default SalesByLocationDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport SalesByLocationDash from './SalesByLocationDash';\r\n\r\nconst SalesByLocationScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {t('common:Filters')}\r\n \r\n
\r\n \r\n updateFilters()}>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n | \r\n |
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n ); \r\n};\r\n\r\nexport default DailyDowntimeSummaryTrendSkeleton;","import { Skeleton } from 'primereact/skeleton';\r\nimport React from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\n\r\nconst DailyDowntimeSummaryTrendChartSkeleton = (props) => {\r\n const {t, i18n} = useTranslation(['companyOverview', 'common']); \r\n\r\n const summaryTemplate = (\r\n <>\r\n \r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n } \r\n \r\n )\r\n }\r\n\r\n if (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n \r\n {t(`wtw:${props.titleViewDetail}`)}\r\n \r\n
\r\n \r\n \r\n {screenRender()}\r\n
\r\n \r\n \r\n )\r\n }\r\n return (\r\n <>\r\n {formattedResult}
;\r\n } \r\n }\r\n }else if (applyColorRule === true){\r\n // si el indicador es top -> bottom: \r\n if (result > item.data.PromedioDiarioMes ){\r\n return {formattedResult}
;\r\n } \r\n }\r\n \r\n return {formattedResult}
;\r\n}\r\n\r\nconst onMaquinaClick = (item, column, val) => { \r\n const dia = Number(column); \r\n const fecha = new Date(Anio, Mes - 1, dia); \r\n setFechaDetalle(fecha);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion);\r\n setMaquinaValue(val);\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\nconst onAreaClick = (item) => { \r\n // const fecha = new Date(Anio, Mes - 1, 1); \r\n setFechaDetalle(null);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion);\r\n setMaquinaValue('');\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\n // Función para obtener todos los nodos, incluyendo los hijos\r\n const flattenNodes = (nodes) => {\r\n let flatData = [];\r\n nodes.forEach((node) => {\r\n flatData.push(node.data); // Agrega el nodo actual\r\n if (node.children) {\r\n flatData = flatData.concat(flattenNodes(node.children)); // Agrega los hijos de manera recursiva\r\n }\r\n });\r\n return flatData;\r\n};\r\n\r\nconst exportToCSV = () => {\r\n if (ProduccionSeguimientoReporteList.length === 0) {\r\n return;\r\n }\r\n setIsExporting(true);\r\n const allColumns = generateColumns(ProduccionSeguimientoReporteList);\r\n const filteredColumns = allColumns.filter(col => !columnsToOmit.includes(col.field))\r\n .sort((a, b) => b.field - a.field);\r\n\r\n const visibleColumns = [\r\n { field: 'Descripcion', header: t('wtw:Concept') },\r\n showPreviousMonths && { field: 'MesPrevio3', header: mesPrevio3 },\r\n showPreviousMonths && { field: 'MesPrevio2', header: mesPrevio2 },\r\n showPreviousMonths && { field: 'MesPrevio1', header: mesPrevio1 },\r\n showTendenciaUltimos30Dias && { field: 'TendenciaUltimos30Dias', header: t('wtw:TendenciaUltimos30Dias') },\r\n showTendenciaMes && { field: 'TendenciaMes', header: t('wtw:TendenciaMes') },\r\n showPromedioDiarioMes && { field: 'PromedioDiarioMes', header: t('wtw:PromedioDiarioMes') },\r\n ...filteredColumns.map((col) => ({ field: col.field, header: col.header }))\r\n ].filter(Boolean); \r\n\r\n const allNodes = flattenNodes(ProduccionSeguimientoReporteList); \r\n const headers = visibleColumns.map(col => col.header).join(',');\r\n const rows = allNodes.map((data) => {\r\n return visibleColumns.map((col) => {\r\n const value = data[col.field];\r\n return value !== undefined ? value : ''; \r\n }).join(',');\r\n });\r\n \r\n\r\n const csvContent = [headers, ...rows].join('\\n');\r\n \r\n\r\n // Crear y descargar el archivo CSV\r\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.setAttribute('download', 'treetable_export.csv');\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n setIsExporting(false);\r\n}; \r\n\r\nconst filters = (\r\n <> \r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onMonthChange(e.value,e)}\r\n label={t('common:Month')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n optionDisabled={(option) => (currentYear === Anio && option.ClaMes > currentMonth)} \r\n /> \r\n
\r\n \r\n \r\n onChangeMultiDepartament(e)}\r\n options={OpcionesDepartamentos}\r\n errors={errors} \r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeMultiTurnos(e)}\r\n options={OpcionesTurnos}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeCelda(e)}\r\n label={t('wtw:Cell')}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaGpoParo(e)}\r\n label={t('wtw:DowntimeGroup')}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaTipoParoGpo(e)}\r\n label={t('wtw:DowntimeType')}\r\n /> \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n onClaDepartamentoChange(e.value)}\r\n label={t('wtw:Department')} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {filtersCheckbox}\r\n \r\n bodyTemplate(rowData)}\r\n expander \r\n frozen \r\n style={{ width: '300px' }}\r\n >\r\n \r\n {showPreviousMonths && formatValue(rowData,'MesPrevio3')} style={{ width: '90px' }} header={mesPrevio3} />}\r\n {showPreviousMonths && formatValue(rowData,'MesPrevio2')} style={{ width: '90px' }} header={mesPrevio2} />}\r\n {showPreviousMonths && formatValue(rowData,'MesPrevio1')} style={{ width: '90px' }} header={mesPrevio1} />}\r\n {showTendenciaUltimos30Dias && formatValue(rowData,'TendenciaUltimos30Dias')} style={{ width: '100px' }} header={t('wtw:TendenciaUltimos30Dias')} />}\r\n {showTendenciaMes && formatValue(rowData,'TendenciaMes',true)} style={{ width: '90px' }} header={t('wtw:TendenciaMes')} />}\r\n {showPromedioDiarioMes && formatValue(rowData,'PromedioDiarioMes')} style={{ width: '90px' }} header={t('wtw:PromedioDiarioMes')} />}\r\n {filteredColumns.map((col) => (\r\n formatValue(rowData,col.field.toString(), true, true)}\r\n />\r\n ))}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n <>\r\n {IsLoading ? (\r\n <>\r\n \r\n {\r\n if (e.index === 1) {\r\n onClaDepartamentoChange(ClaDepartamento);\r\n setTabActiveIndex(e.index); \r\n } else {\r\n setTabActiveIndex(e.index);\r\n }\r\n }}\r\n > \r\n \r\n \r\n \r\n {filtersChart}\r\n <>\r\n {TrendList.length > 0 ? ( \r\n <>\r\n {\r\n EsVerDepartamentoChart\r\n &&\r\n (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DailyDowntimeSummaryTrend;","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n label,\r\n} from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent';\r\nimport DailyDowntimeSummaryTrend from './DailyDowntimeSummaryTrend';\r\n\r\nconst DailyDowntimeSummaryScreen = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['productionDashboard', 'common']);\r\n \r\n /* ################## End useState area start ################## */\r\n \r\n \r\n return (\r\n <>\r\n \r\n \r\n {TrendList.map((col) => (\r\n
\r\n
\r\n )\r\n }\r\n {\r\n EsVerCeldaChart\r\n &&\r\n (\r\n \r\n \r\n {TrendDetail.Departamento && TrendDetail.Departamento.Celdas.map((celda) => (\r\n
\r\n
\r\n )\r\n }\r\n {\r\n EsVerGrupoChart\r\n &&\r\n (\r\n \r\n \r\n {TrendGroupDetail.Departamento.Celdas && TrendGroupDetail.Departamento.Celdas.Grupo.Tipos.map((tipo) => (\r\n
\r\n
\r\n )\r\n }\r\n \r\n ) : (\r\n <>\r\n {/* TrendList Sin datos */}\r\n \r\n )}\r\n \r\n | \r\n |
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n ); \r\n};\r\n\r\nexport default MonthlyProductionSummarySkeleton;","import { Skeleton } from 'primereact/skeleton';\r\nimport React from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\n\r\nconst MonthlyProductionSummaryChartSkeleton = (props) => {\r\n const {t, i18n} = useTranslation(['companyOverview', 'common']); \r\n\r\n const summaryTemplate = (\r\n <>\r\n \r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n } \r\n \r\n )\r\n }\r\n\r\n if (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n \r\n View detail by asset / cell \r\n \r\n
\r\n \r\n \r\n {screenRender()}\r\n
\r\n \r\n \r\n )\r\n }\r\n return (\r\n <>\r\n \r\n {IsLoading ? (\r\n \r\n ExportExcelDetail()}\r\n > \r\n \r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n NomArticuloTemplate (rowData, 'NomArticulo')} headerStyle={{ width: '300px' }} columnKey=\"NomArticulo\"> \r\n DecimalTemplate (rowData, 'UnitsByHr', 2)}> \r\n PorcentajeTemplate (rowData, 'Utilizacion')}> \r\n PorcentajeTemplate (rowData, 'Efficiencia')}> \r\n PorcentajeTemplate (rowData, 'Scrap')}> \r\n PorcentajeTemplate (rowData, 'OEE')}> \r\n DecimalTemplate (rowData, 'Tons', 2)}> \r\n CajasTemplate (rowData, 'Cajas', 0)}> \r\n PorcentajeTemplate (rowData, 'Disponibilidad')}> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n HorasParoTemplate (rowData)} columnKey=\"HorasParo\"> \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.Fecha === null && DateTemplate (rowData, 'Fecha')}> } \r\n \r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MonthlyProductionSummaryDetail;\r\n\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\n/* eslint-disable react/button-has-type */\r\n/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n Row,\r\n Col, \r\n Card,\r\n CardHeader,\r\n CardBody \r\n} from 'reactstrap'; \r\n// import FeedbackCoaching from './FeedbackCoaching.jsx'; \r\nimport Highcharts from 'highcharts';\r\nimport { config } from \"../../../utils/config\";\r\nimport { callApi,showSweetAlert } from '../../../utils/utils'; \r\nimport { Dialog } from 'primereact/dialog'; \r\nimport { TreeList, Column, Editing, Scrolling, Paging, Pager, SearchPanel, Selection, Format } from 'devextreme-react/tree-list';\r\nimport 'devextreme/dist/css/dx.light.css'; \r\nimport FieldDropdown from 'components/Controls/FieldDropdown';\r\nimport FieldButton from 'components/Controls/FieldButton/FieldButton'; \r\nimport * as yup from 'yup';\r\nimport YupValidator from '../../../utils/YupValidator';\r\nimport FieldMultiSelect from 'components/Controls/FieldMultiSelect';\r\nimport { TreeTable } from 'primereact/treetable'; \r\nimport FieldCheckbox from 'components/Controls/FieldCheckbox';\r\nimport MonthlyProductionSummarySkeleton from './MonthlyProductionSummarySkeleton';\r\nimport { TabView, TabPanel } from 'primereact/tabview';\r\nimport MonthlyProductionSummaryChart from './MonthlyProductionSummaryChart';\r\nimport MonthlyProductionSummaryDetail from './MonthlyProductionSummaryDetail';\r\nimport moment from 'moment';\r\n\r\nconst MonthlyProductionSummary = (props) => {\r\n /* ################## useState area start ################## */\r\nconst { t } = useTranslation(['wtw', 'common']); \r\nconst [TrendList, setTrendList] = useState([]);\r\nconst [TrendDetail, setTrendDetail] = useState([]);\r\nconst [EsVerDetalleChart, setEsVerDetalleChart] = useState(false);\r\nconst [ProduccionSeguimientoReporteList, setProduccionSeguimientoReporteList] = useState([]);\r\nconst [IsLoading, setIsLoading] = useState(false);\r\nconst [IsExporting, setIsExporting] = useState(false);\r\nconst [Anio, setAnio] = useState(null);\r\nconst [Mes, setMes] = useState();\r\nconst [ClaMes, setClaMes] = useState();\r\nconst [ClaCelda, setClaCelda] = useState(props.ClaCelda === undefined ? null : props.ClaCelda); \r\nconst [ClaUbicacion, setClaUbicacion] = useState(null);\r\nconst [PlantasList, setPlantasList] = useState([]);\r\nconst [OpcionesAnios, setOpcionesAnios] = useState([]);\r\nconst [OpcionesMeses, setOpcionesMeses] = useState([]);\r\nconst [OpcionesMesesList, setOpcionesMesesList] = useState([]);\r\nconst [OpcionesDepartamentos, setOpcionesDepartamentos] = useState([]);\r\nconst [OpcionesTurnos, setOpcionesTurnos] = useState([]);\r\nconst [OpcionesCelda, setOpcionesCelda] = useState([]);\r\nconst [errors, setErrors] = useState({}); \r\nconst [SelectedDepartamentos, setSelectedDepartamentos] = useState(null); \r\nconst [SelectedTurnos, setSelectedTurnos] = useState(null); \r\nconst [SelectedDepartamentosString, setSelectedDepartamentosString] = useState(null); \r\nconst [SelectedTurnosString, setSelectedTurnosString] = useState(null); \r\nconst [showPromedioAnio, setShowPromedioAnio] = useState(true);\r\nconst [showTendenciaAnio, setShowTendenciaAnio] = useState(true);\r\nconst [showTendenciaUltimoMes, setShowTendenciaUltimoMes] = useState(false);\r\nconst [showPreviousMonths, setShowPreviousMonths] = useState(true);\r\nconst [anioPrevio1, setAnioPrevio1] = useState(true);\r\nconst [anioPrevio2, setAnioPrevio2] = useState(true);\r\nconst [anioPrevio3, setAnioPrevio3] = useState(true); \r\nconst [isInitialized, setIsInitialized] = useState(false); \r\nconst [currentYear, setCurrentYear] = useState(new Date().getFullYear());\r\nconst [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);\r\nconst [TabActiveIndex, setTabActiveIndex] = useState(0);\r\nconst [ClaDepartamento, setClaDepartamento] = useState(null);\r\nconst [TrendData, setTrendData] = useState(null); \r\nconst [Refresh, setRefresh] = useState(0); \r\nconst [NomDepartamento, setNomDepartamento] = useState(null); \r\nconst [NomCelda, setNomCelda] = useState(null); \r\nconst [EsShowDialogDetail, setEsShowDialogDetail] = useState(false); \r\nconst [FechaDetalle, setFechaDetalle] = useState(null); \r\nconst [ClaArea, setClaArea] = useState(null); \r\nconst [ClaMaquina, setClaMaquina] = useState(null); \r\nconst [NomMaquina, setNomMaquina] = useState(null); \r\nconst [MaquinaValue, setMaquinaValue] = useState(null); \r\n\r\nconst [expandedKeys, setExpandedKeys] = useState({});\r\n\r\n const onToggle = (e) => {\r\n setExpandedKeys(e.value); // e.value contains the updated expanded state\r\n };\r\n \r\nuseEffect(() => {\r\n getAnios() \r\n getMeses(0) \r\n getPlantas() \r\n getTurnos(props.ClaUbicacion) \r\n getDepartamentos(props.ClaUbicacion, true)\r\n}, []); // Add props to dependency array if needed\r\n\r\n // Cuando la pantalla se inicializa y recibimos Fecha forzamos el onSearch...\r\n useEffect(() => {\r\n if (props.Fecha !== null && SelectedTurnos && SelectedDepartamentos && !isInitialized) { \r\n const fecha = props.Fecha ? new Date(props.Fecha) : null;\r\n const anio = fecha ? fecha.getFullYear() : undefined;\r\n const mes = fecha ? fecha.getMonth() + 1 : undefined; \r\n onSearch(false, props.ClaUbicacion, SelectedDepartamentos, props.ClaCelda, anio, mes, SelectedTurnos);\r\n setIsInitialized(true); // Set initialized to true to prevent future runs\r\n }\r\n}, [SelectedDepartamentos, SelectedTurnos, isInitialized]); \r\n\r\n\r\nconst getPlantas = () => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetPlantasProduccionSeguimientoCmb`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setPlantasList(response.data.PlantasList);\r\n setClaUbicacion(props.ClaUbicacion);\r\n }, null, false, false);\r\n}\r\n\r\nconst getAnios = () => { \r\n const nClaUbicacion = (ClaUbicacion===null?props.ClaUbicacion:ClaUbicacion);\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioAnios?ClaUbicacion=${nClaUbicacion}`;\r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesAnios (response.data.Anios); \r\n if(props.Fecha!==null){ \r\n const anio = new Date(props.Fecha).getFullYear();\r\n setAnio(anio);\r\n }else {\r\n setAnio(response.data.Anios[0].ClaAnio);\r\n }\r\n }, null, false, false);\r\n}\r\n\r\nconst getMeses = (anio) => { \r\n const panio = anio;\r\n if(anio===0&&props.Fecha!==null){\r\n anio = new Date(props.Fecha).getFullYear();\r\n }\r\n const paramsService = null; \r\n const nClaUbicacion = (ClaUbicacion===null?props.ClaUbicacion:ClaUbicacion);\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioMeses?ClaUbicacion=${nClaUbicacion}`;\r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesMeses(response.data.Meses);\r\n setOpcionesMesesList(response.data.Meses);\r\n if(props.Fecha!==null&&panio===0){\r\n const mes = new Date(props.Fecha).getMonth()+1 \r\n setMes(mes);\r\n }else{ \r\n setMes(new Date().getMonth()+1);\r\n }\r\n }, null, false, false);\r\n};\r\n\r\nconst getDepartamentos = (nClaUbicacion, esBuscar, turnosSelected) => { \r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioDepartamentos?ClaUbicacion=${nClaUbicacion}`;\r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesDepartamentos(response.data.Departamentos);\r\n let opcionesSelected = response.data.Departamentos.map(ubicacion => (ubicacion)); \r\n\r\n if (props.ClaArea !== null){\r\n opcionesSelected = response.data.Departamentos.filter(item => item.ClaDepartamento === props.ClaArea).map(ubicacion => (ubicacion));\r\n }\r\n setSelectedDepartamentos(opcionesSelected);\r\n setClaDepartamento((opcionesSelected.length>0?opcionesSelected[0].ClaDepartamento:null))\r\n getCeldas(nClaUbicacion,opcionesSelected); \r\n }, null, false, false);\r\n}\r\n\r\nconst getTurnos = (nClaUbicacion) => {\r\n const urlWebService = `${config.UrlApiProject}turno/getTurnos?ClaUbicacion=${nClaUbicacion}`; \r\n const paramsService= {}; \r\n callApi(urlWebService, 'GET', paramsService, (response) => {\r\n setOpcionesTurnos(response.data.Turnos); \r\n let opcionesSelected = response.data.Turnos.map(turno => (turno));\r\n if (props.ClaTurno !== null){\r\n opcionesSelected = response.data.Turnos.filter(item => item.ClaTurno === props.ClaTurno).map(turno => (turno));\r\n }\r\n setSelectedTurnos(opcionesSelected);\r\n }, null, false, false);\r\n}\r\n\r\nconst getCeldas = (nClaUbicacion,departamentos) => { \r\n let selectedDepartamentos = \"\";\r\n if (Array.isArray(departamentos) && departamentos.length > 0) {\r\n selectedDepartamentos = departamentos.map(selected => selected.ClaDepartamento);\r\n selectedDepartamentos = selectedDepartamentos.join(',');\r\n setSelectedDepartamentosString(selectedDepartamentos);\r\n }\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoDiarioCeldas`; \r\n const paramsService = {\r\n ClaUbicacion:nClaUbicacion,\r\n ClaAreaList:selectedDepartamentos, \r\n Fecha:props.Fecha\r\n }; \r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setOpcionesCelda(response.data.ProduccionCeldas);\r\n }, null, false, false);\r\n}\r\n\r\nconst onSearch = async (validate, nClaUbicacion, dptos, nCelda, nAnio, nMes, turnosSeleccionados) => { \r\n setNomDepartamento(null);\r\n setNomCelda(null);\r\n setTrendList([]);\r\n setTrendDetail([]); \r\n setEsVerDetalleChart(false);\r\n setTabActiveIndex(0);\r\n if(validate){\r\n const value = {\r\n ClaUbicacion,\r\n SelectedDepartamentos,\r\n SelectedTurnos,\r\n Anio,\r\n Mes\r\n };\r\n const validator = new YupValidator(valitationScheme);\r\n const isValid = await validator.validate(value);\r\n if (!isValid){ \r\n setErrors(validator.errors); \r\n showSweetAlert(t('common:Warning'), t('common:ReviewRequiredFields'), 'warning'); \r\n return\r\n } \r\n }\r\n let selectedDepartamentos = \"\";\r\n let selectedTurnos = \"\";\r\n let selectedCeldas = \"\";\r\n if (Array.isArray(dptos) && dptos.length > 0) {\r\n selectedDepartamentos = dptos.map(selected => selected.ClaDepartamento);\r\n selectedDepartamentos = selectedDepartamentos.join(',');\r\n setSelectedDepartamentosString(selectedDepartamentos);\r\n }\r\n if (Array.isArray(turnosSeleccionados) && turnosSeleccionados.length > 0) {\r\n selectedTurnos = turnosSeleccionados.map(selected => selected.ClaTurno);\r\n selectedTurnos = selectedTurnos.join(',');\r\n setSelectedTurnosString(selectedTurnos); \r\n }\r\n if (Array.isArray(nCelda) && nCelda.length > 0) {\r\n console.log('nCelda', nCelda, turnosSeleccionados);\r\n selectedCeldas = nCelda.map(selected => selected.ClaMaquina);\r\n selectedCeldas = selectedCeldas.join(','); \r\n }else {\r\n selectedCeldas = '';\r\n }\r\n const urlWebService = `${config.UrlApiProject}WTW/GetProduccionSeguimientoTendenciaMensual`; \r\n const paramsService = {\r\n ClaUbicacion:nClaUbicacion,\r\n ClaAreaList:selectedDepartamentos, \r\n ClaTurnoList:selectedTurnos, \r\n Fecha:props.Fecha,\r\n ClaCeldaList:selectedCeldas,\r\n ClaMes:nMes,\r\n ClaAnio:nAnio\r\n }; \r\n\r\n setIsLoading(true);\r\n callApi(urlWebService, 'POST', paramsService, (response) => { \r\n setIsLoading(false);\r\n const data = (response.data.ProduccionSeguimientoReporteList);\r\n const transforrm = transformToTreeData(data);\r\n setProduccionSeguimientoReporteList(transforrm);\r\n setTrendList([]);\r\n console.log('transforrm',transforrm);\r\n obtenerTituloAnioPrevios(nAnio);\r\n }, () => { },false,false);\r\n};\r\n\r\nconst obtenerTituloAnioPrevios = (anio) => {\r\n const headerMapping = {\r\n '1': t('common:Jan'),\r\n '2': t('common:Feb'),\r\n '3': t('common:Mar'),\r\n '4': t('common:Apr'), \r\n '5': t('common:May'), \r\n '6': t('common:Jun'), \r\n '7': t('common:Jul'), \r\n '8': t('common:Aug') , \r\n '9': t('common:Sep'),\r\n '10': t('common:Oct'), \r\n '11': t('common:Nov'), \r\n '12': t('common:Dec') \r\n };\r\n \r\n const titulos = [];\r\n\r\n for (let i = 1; i <= 3; i++) {\r\n const anioTitulo = (anio - i).toString(); \r\n titulos.unshift(anioTitulo);\r\n }\r\n\r\n setAnioPrevio3(titulos[0]);\r\n setAnioPrevio2(titulos[1]);\r\n setAnioPrevio1(titulos[2]);\r\n\r\n return titulos;\r\n};\r\n\r\n\r\nconst transformToTreeData = (data) => {\r\n const tree = [];\r\n const lookup = {};\r\n if(data.length===0){\r\n return tree;\r\n }\r\n data.forEach(item => {\r\n lookup[item.id] = { key: item.id.toString(), data: item, children: [], parent: null };\r\n });\r\n\r\n data.forEach(item => {\r\n if (item.parentId === null || item.parentId === 0) {\r\n tree.push(lookup[item.id]);\r\n } else {\r\n const parent = lookup[item.parentId];\r\n const childIndex = parent.children.length;\r\n lookup[item.id].key = `${parent.key}-${childIndex}`;\r\n lookup[item.id].parent = parent; // Establecer referencia al padre\r\n parent.children.push(lookup[item.id]);\r\n }\r\n });\r\n\r\n return tree;\r\n};\r\n\r\nconst valitationScheme = yup.object().shape({\r\n ClaUbicacion: yup.string().required(t('common:RequiredField')).nullable(),\r\n Anio: yup.string().required(t('common:RequiredField')).nullable(),\r\n Mes: yup.string().required(t('common:RequiredField')).nullable(),\r\n // SelectedDepartamentos: yup.mixed().required('').nullable(),\r\n});\r\n\r\nconst onClaDepartamentoChange = (nDepartamento) => {\r\n setTrendList([]);\r\n setNomDepartamento(null);\r\n setNomCelda(null);\r\n setEsVerDetalleChart(false);\r\n setClaDepartamento(nDepartamento);\r\n\r\n const departamentoSeleccionado = OpcionesDepartamentos.find(\r\n (departamento) => departamento.ClaDepartamento === nDepartamento\r\n );\r\n \r\n if (departamentoSeleccionado) {\r\n const descripcionDepartamento = departamentoSeleccionado.NomDepartamento4;\r\n setNomDepartamento(descripcionDepartamento);\r\n setNomCelda(null);\r\n const resultados = [];\r\n \r\n // Recorremos lista principal\r\n ProduccionSeguimientoReporteList.forEach(root => {\r\n // Buscamos si en el nivel 1 está el departamento en nivel 2\r\n const childrenNivel2 = root.children.filter(\r\n child => child.data.Descripcion === descripcionDepartamento\r\n );\r\n // Si encuentra coincidencias, agregar el nivel 1 completo con sus hijos\r\n if (childrenNivel2.length > 0) {\r\n resultados.push({\r\n ...root,\r\n children: childrenNivel2 // Solo los hijos de nivel 2 que coincidan\r\n });\r\n }\r\n });\r\n\r\n // Estructura por Nivel 1\r\n const estructuraFinal = resultados.map(root => {\r\n // Recorremos Nivel 2 (departamentos)\r\n const childrenNivel2 = root.children.map(nivel2 => {\r\n const info = Object.keys(nivel2.data)\r\n .filter(key => !isNaN(Number(key)) && ![\"13\", \"14\", \"15\", \"16\"].includes(key)) // Filtramos numéricas y excluimos 13, 14, 15, 16 (Trimestres)\r\n .map(columna => {\r\n const dia = Number(columna); // Convertir la columna a número\r\n const fecha = new Date(Anio, Mes - 1, dia); // \r\n return {\r\n Date: fecha, // Fecha\r\n Valor: nivel2.data[columna],\r\n TendenciaUltimoMes: nivel2.data.TendenciaUltimoMes,\r\n PromedioAnio: nivel2.data.PromedioAnio ,\r\n AnioPrevioPromedio1: nivel2.data.AnioPrevioPromedio1 ,\r\n AnioPrevioPromedio2: nivel2.data.AnioPrevioPromedio2 ,\r\n AnioPrevioPromedio3: nivel2.data.AnioPrevioPromedio3 \r\n };\r\n });\r\n return {\r\n Titulo: nivel2.data.Descripcion, // Nombre Nivel 2\r\n Data: info // Data de Nivel 2\r\n };\r\n });\r\n\r\n // Reestructuramos para que `Data` esté directamente accesible en el primer departamento\r\n return {\r\n Titulo: root.data.Descripcion, // Nombre Nivel 1\r\n NomIndicador: root.data.Descripcion, // Nombre Nivel 1\r\n TipoValorIndicador: root.data.TipoValorIndicador, // Tipo Valor Indicador\r\n Departamento: childrenNivel2.length > 0 ? childrenNivel2[0].Data : [] // Accedemos directo al primer hijo y su data\r\n };\r\n });\r\n\r\n setRefresh(Refresh + 1);\r\n setTimeout(()=> {\r\n setTrendList(estructuraFinal); \r\n }, 1)\r\n \r\n }\r\n};\r\n\r\nconst onViewDetail = (sNivel1) => {\r\n setNomCelda(sNivel1);\r\n setEsVerDetalleChart(true);\r\n setTrendDetail({}); // Inicializamos como objeto vacío\r\n\r\n // Buscar el departamento seleccionado en el Nivel 1\r\n const departamentoSeleccionado = OpcionesDepartamentos.find(\r\n (departamento) => departamento.ClaDepartamento === ClaDepartamento\r\n );\r\n\r\n if (departamentoSeleccionado) {\r\n const descripcionDepartamento = departamentoSeleccionado.NomDepartamento4;\r\n\r\n let resultado = null;\r\n // Recorremos lista principal (Nivel 1)\r\n ProduccionSeguimientoReporteList.forEach(root => {\r\n if (root.data.Descripcion === sNivel1) {\r\n const hijosNivel2 = root.children.filter(\r\n child => child.data.Descripcion === descripcionDepartamento\r\n );\r\n if (hijosNivel2.length > 0) {\r\n resultado = {\r\n ...root,\r\n children: hijosNivel2 // Solo los hijos de Nivel 2 que coincidan\r\n };\r\n }\r\n }\r\n });\r\n\r\n if (resultado) {\r\n // Generamos la estructura final como un objeto en lugar de un array\r\n const hijosConDatos = resultado.children.map(nivel2 => {\r\n // Recorremos Nivel 3 (celdas)\r\n const hijosNivel3 = nivel2.children.map(nivel3 => {\r\n // Generar la estructura por cada columna numerada de 'data'\r\n const columnasNivel3 = Object.keys(nivel3.data)\r\n .filter(key => !isNaN(Number(key))) // Filtrar solo las columnas numéricas\r\n .map(columna => {\r\n const dia = Number(columna); // Convertir la columna a número\r\n const fecha = new Date(Anio, Mes - 1, dia); // \r\n return {\r\n Date: fecha, // Fecha\r\n Valor: nivel3.data[columna],\r\n TendenciaUltimoMes: nivel3.data.TendenciaUltimoMes,\r\n PromedioAnio: nivel3.data.PromedioAnio ,\r\n AnioPrevioPromedio1: nivel3.data.AnioPrevioPromedio1 ,\r\n AnioPrevioPromedio2: nivel3.data.AnioPrevioPromedio2 ,\r\n AnioPrevioPromedio3: nivel3.data.AnioPrevioPromedio3 \r\n };\r\n }) \r\n return {\r\n Titulo: nivel3.data.Descripcion, // `${resultado.data.Descripcion }-${ nivel3.data.Descripcion}`, // Nombre del nivel 3 (Celda)\r\n Data: columnasNivel3 // Arreglo con DateName, Valor y Goal\r\n };\r\n });\r\n\r\n return {\r\n Titulo: nivel2.data.Descripcion, // Nombre del departamento (nivel 2)\r\n TipoValorIndicador: resultado.data.TipoValorIndicador, // TipoValorIndicador para acceso directo\r\n NomIndicador: resultado.data.Descripcion, // TipoValorIndicador para acceso directo\r\n Celdas: hijosNivel3 // Agregar los hijos del nivel 3 (celdas)\r\n };\r\n });\r\n\r\n const estructuraFinal = {\r\n Titulo: resultado.data.Descripcion, // Nombre Nivel 1\r\n Departamento: hijosConDatos[0] // Eliminamos el array, solo accedemos al primer departamento\r\n };\r\n\r\n setTrendDetail(estructuraFinal);\r\n setEsVerDetalleChart(true);\r\n }\r\n }\r\n};\r\n\r\nconst onViewChart = () =>{\r\n setNomCelda(null);\r\n setEsVerDetalleChart(false);\r\n}\r\n\r\nconst onYearChange = (yearId) => { \r\n const _errors = { ...errors } \r\n delete _errors.Anio; \r\n delete _errors.Mes; \r\n setErrors(_errors); \r\n setAnio(yearId);\r\n\r\n // si el anio seleccionado es igual al actual y el mes actual seleccionado en el combo no es un mes valido cambiamos y seleccionamos currentmont\r\n if (yearId === currentYear && Mes > currentMonth)\r\n {\r\n setMes(currentMonth);\r\n }\r\n\r\n if(yearId!==undefined){\r\n const currentYear = new Date().getFullYear();\r\n const currentMonth = new Date().getMonth() + 1; \r\n if (yearId !== undefined) {\r\n if (yearId === currentYear) { \r\n const filteredMonths = OpcionesMesesList.filter(mes => mes.ClaMes <= currentMonth);\r\n setOpcionesMeses(filteredMonths); \r\n // Si no esta el mes lo limpiamos\r\n const isCurrentMonthInList = filteredMonths.some(mes => mes.ClaMes === currentMonth);\r\n if (!isCurrentMonthInList) {\r\n setMes(null);\r\n }\r\n }else{\r\n setOpcionesMeses(OpcionesMesesList); \r\n }\r\n }\r\n }\r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeMultiDepartament = (e) => { \r\n const _errors = { ...errors } \r\n delete _errors.SelectedDepartamentos; \r\n setErrors(_errors)\r\n setSelectedDepartamentos(e.value.length < 1? null: e.value); \r\n if(e.value.length===0){\r\n setOpcionesCelda([]);\r\n setClaCelda(null);\r\n }else{\r\n getCeldas(ClaUbicacion,e.value);\r\n }\r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeMultiTurnos = (e) => { \r\n const _errors = { ...errors } \r\n delete _errors.SelectedTurnos; \r\n setErrors(_errors)\r\n setSelectedTurnos(e.value.length < 1? null: e.value); \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeCelda = (e) => { \r\n setClaCelda(e.value.length < 1? null: e.value); \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nconst onChangeClaUbicacion = (e) => { \r\n const newErrors = { ...errors } \r\n delete newErrors.ClaUbicacion;\r\n setClaCelda(null); \r\n if(e.value!==undefined){\r\n delete newErrors.SelectedDepartamentos; \r\n delete newErrors.SelectedTurnos; \r\n setClaUbicacion(e.value); \r\n getDepartamentos(e.value);\r\n getTurnos(e.value);\r\n }else{\r\n setClaUbicacion(null);\r\n setOpcionesDepartamentos([]);\r\n setSelectedDepartamentos(null)\r\n setOpcionesTurnos([]);\r\n setSelectedTurnos(null);\r\n setOpcionesCelda([]);\r\n }\r\n setErrors(newErrors) \r\n setProduccionSeguimientoReporteList([]);\r\n};\r\n\r\nfunction formatValue(item, column, applyColorRule, applyClick) {\r\n const result = item.data[column];\r\n if (result === 0||result===undefined||result===null) {\r\n return ;\r\n }\r\n \r\n let formattedResult;\r\n switch (item.data.TipoValorIndicador) {\r\n case 1:\r\n formattedResult = result.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });\r\n break;\r\n case 2:\r\n formattedResult = result.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 });\r\n break;\r\n case 3: \r\n formattedResult = (typeof result === 'number' && !isNaN(result)) ? `${result.toFixed(1)}%` : \"\"; \r\n break;\r\n default:\r\n formattedResult = result;\r\n }\r\n\r\n let classClick = ''\r\n let onMaquinaAreaClick = null;\r\n if(applyClick && item.data.ClaMaquina!==null){\r\n classClick = 'cursor link-text'\r\n onMaquinaAreaClick = () => onMaquinaClick(item, column, formattedResult);\r\n }\r\n else {\r\n onMaquinaAreaClick = () => {};\r\n }\r\n \r\n if (column==='TendenciaAnio') {\r\n const valueAnioPrevio1 = item.data.AnioPrevio1 ?? 0;\r\n const valueTendenciaAnio = item.data.TendenciaAnio ?? 0;\r\n \r\n if (applyColorRule === true && (column!=='13' && column!=='14' && column!=='15' && column!=='16')){\r\n if (item.data.ClaIndicador === 4) // Scrap\r\n {\r\n if (valueTendenciaAnio > valueAnioPrevio1 ){\r\n return {t('wtw:DetailByItem')}
\r\n \r\n{t('wtw:Downtimes')}
\r\n \r\n{t('wtw:DailyCommentsDetail')}
\r\n \r\n applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (valueTendenciaAnio < valueAnioPrevio1 ){\r\n return applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n\r\n }else if (applyColorRule === true && (column!=='13' && column!=='14' && column!=='15' && column!=='16')){\r\n // si el indicador es top -> bottom:\r\n if (item.data.ClaIndicador === 4) // Scrap\r\n {\r\n if (result > item.data.PromedioAnio ){\r\n return applyClick && onMaquinaAreaClick()} className={` ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (result < item.data.PromedioAnio ){\r\n return applyClick && onMaquinaAreaClick()} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n \r\n return applyClick && (column!=='13' && column!=='14' && column!=='15' && column!=='16') && onMaquinaAreaClick()} className={`${applyClick && (column!=='13' && column!=='14' && column!=='15' && column!=='16') ? classClick : ''}`}>{formattedResult}
;\r\n}\r\n\r\n\r\nconst onMaquinaClick = (item,column) => { \r\n // const fecha = new Date(Anio, Mes - 1, 1); \r\n setFechaDetalle(null);\r\n setMes(column);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion); \r\n setMaquinaValue('');\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\n // Función para obtener todos los nodos, incluyendo los hijos\r\n const flattenNodes = (nodes) => {\r\n let flatData = [];\r\n nodes.forEach((node) => {\r\n flatData.push(node.data); // Agrega el nodo actual\r\n if (node.children) {\r\n flatData = flatData.concat(flattenNodes(node.children)); // Agrega los hijos de manera recursiva\r\n }\r\n });\r\n return flatData;\r\n};\r\n\r\nconst exportToCSV = () => {\r\n if (ProduccionSeguimientoReporteList.length === 0) {\r\n return;\r\n }\r\n setIsExporting(true);\r\n const allColumns = generateColumns(ProduccionSeguimientoReporteList);\r\n const filteredColumns = allColumns.filter(col => !columnsToOmit.includes(col.field))\r\n .sort((a, b) => a.order - b.order);\r\n\r\n const visibleColumns = [\r\n { field: 'Descripcion', header: t('wtw:Concept') },\r\n showPreviousMonths && { field: 'AnioPrevio3', header: anioPrevio3 },\r\n showPreviousMonths && { field: 'AnioPrevio2', header: anioPrevio2 },\r\n showPreviousMonths && { field: 'AnioPrevio1', header: anioPrevio1 },\r\n showTendenciaUltimoMes && { field: 'TendenciaUltimoMes', header: t('wtw:TendenciaUltimoMes') },\r\n showTendenciaAnio && { field: 'TendenciaAnio', header: t('wtw:TendenciaAnio') },\r\n showPromedioAnio && { field: 'PromedioAnio', header: t('wtw:PromedioAnio') },\r\n ...filteredColumns.map((col) => ({ field: col.field, header: col.header }))\r\n ].filter(Boolean); \r\n\r\n const allNodes = flattenNodes(ProduccionSeguimientoReporteList); \r\n const headers = visibleColumns.map(col => col.header).join(',');\r\n const rows = allNodes.map((data) => {\r\n return visibleColumns.map((col) => {\r\n const value = data[col.field];\r\n return value !== undefined ? value : ''; \r\n }).join(',');\r\n });\r\n \r\n\r\n const csvContent = [headers, ...rows].join('\\n');\r\n \r\n\r\n // Crear y descargar el archivo CSV\r\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.setAttribute('download', 'treetable_export.csv');\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n setIsExporting(false);\r\n}; \r\n\r\nconst filters = (\r\n <> \r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onChangeMultiDepartament(e)}\r\n options={OpcionesDepartamentos}\r\n errors={errors} \r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeMultiTurnos(e)}\r\n options={OpcionesTurnos}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeCelda(e)}\r\n label={t('wtw:Cell')}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n onClaDepartamentoChange(e.value)}\r\n label={t('wtw:Department')} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {filtersCheckbox}\r\n \r\n bodyTemplate(rowData)}\r\n expander \r\n frozen \r\n style={{ width: '300px' }}\r\n >\r\n \r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio3')} style={{ width: '90px' }} header={anioPrevio3} />}\r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio2')} style={{ width: '90px' }} header={anioPrevio2} />}\r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio1')} style={{ width: '90px' }} header={anioPrevio1} />}\r\n {showTendenciaAnio && formatValue(rowData,'TendenciaAnio',true)} style={{ width: '90px' }} header={t('wtw:TendenciaAnio')} />}\r\n {showPromedioAnio && formatValue(rowData,'PromedioAnio')} style={{ width: '90px' }} header={t('wtw:PromedioAnio')} />}\r\n {filteredColumns.map((col) => (\r\n formatValue(rowData,col.field.toString(), true, true)}\r\n />\r\n ))}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n {NomMaquina}\r\n \r\n \r\n {\r\n FechaDetalle !== null \r\n ? moment(FechaDetalle).format('MMMM, D, YYYY') \r\n : moment(new Date(Anio, Mes - 1, 1)).format('MMMM, YYYY')\r\n }\r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n return (\r\n <> \r\n \r\n \r\n
\r\n <>\r\n {IsLoading ? (\r\n <>\r\n \r\n {\r\n if (e.index === 1) {\r\n onClaDepartamentoChange(ClaDepartamento);\r\n setTabActiveIndex(e.index); \r\n } else {\r\n setTabActiveIndex(e.index);\r\n }\r\n }}\r\n > \r\n \r\n \r\n \r\n {filtersChart}\r\n <>\r\n {TrendList.length > 0 ? (\r\n !EsVerDetalleChart ? (\r\n <>\r\n \r\n \r\n \r\n
\r\n {EsShowDialogDetail ? (\r\n <>\r\n setEsShowDialogDetail(false)}\r\n >\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MonthlyProductionSummary;","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n label,\r\n} from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport MonthlyProductionSummary from './MonthlyProductionSummary';\r\nimport PageContent from 'layouts/PageContent';\r\n\r\nconst MonthlyProductionSummaryScreen = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['productionDashboard', 'common']);\r\n \r\n /* ################## End useState area start ################## */\r\n \r\n \r\n return (\r\n <>\r\n \r\n \r\n {TrendList.map((col) => (\r\n
\r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n {TrendDetail.Departamento && TrendDetail.Departamento.Celdas.map((celda) => (\r\n
\r\n
\r\n \r\n )\r\n ) : (\r\n <>\r\n {/* TrendList Sin datos */}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n )} \r\n \r\n )}\r\n \r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default InventoryWeeklyFollowUpScreenDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent'; \r\nimport InventoryWeeklyFollowUpScreenDash from './InventoryWeeklyFollowUpScreenDash';\r\n\r\nconst InventoryWeeklyFollowUpScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n | \r\n |
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n ); \r\n};\r\n\r\nexport default MonthlyDowntimeSummaryTrendSkeleton;","import { Skeleton } from 'primereact/skeleton';\r\nimport React from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\n\r\nconst MonthlyDowntimeSummaryTrendChartSkeleton = (props) => {\r\n const {t, i18n} = useTranslation(['companyOverview', 'common']); \r\n\r\n const summaryTemplate = (\r\n <>\r\n \r\n {t('companyOverview:Utilization')}\r\n
\r\n\r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n } \r\n \r\n )\r\n }\r\n\r\n if (isGanttFullScreenMode){ \r\n return (\r\n <>\r\n \r\n \r\n {t(`wtw:${props.titleViewDetail}`)}\r\n \r\n
\r\n \r\n \r\n {screenRender()}\r\n
\r\n \r\n \r\n )\r\n }\r\n return (\r\n <>\r\n applyClick && null} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (valueTendenciaAnio < valueAnioPrevio1 ){\r\n return applyClick && null} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n\r\n }else if (applyColorRule === true && (column!=='13' && column!=='14' && column!=='15' && column!=='16')){\r\n // si el indicador es top -> bottom:\r\n if (item.data.ClaIndicador === 4) // Scrap\r\n {\r\n if (result > item.data.PromedioAnio ){\r\n return applyClick && null} className={` ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n }\r\n }\r\n else if (result < item.data.PromedioAnio ){\r\n return applyClick && null} className={`orange-color ${applyClick ? classClick : ''}`}>{formattedResult}
;\r\n } \r\n }\r\n \r\n return applyClick && (column!=='13' && column!=='14' && column!=='15' && column!=='16') && null} className={`${applyClick && (column!=='13' && column!=='14' && column!=='15' && column!=='16') ? classClick : ''}`}>{formattedResult}
;\r\n}\r\n\r\n \r\nconst onAreaClick = (item) => { \r\n // const fecha = new Date(Anio, Mes - 1, 1); \r\n setFechaDetalle(null);\r\n setClaArea(item.data.ClaArea);\r\n setClaMaquina(item.data.ClaMaquina);\r\n setNomMaquina(item.data.Descripcion);\r\n setMaquinaValue('');\r\n setEsShowDialogDetail(true);\r\n};\r\n\r\n // Función para obtener todos los nodos, incluyendo los hijos\r\n const flattenNodes = (nodes) => {\r\n let flatData = [];\r\n nodes.forEach((node) => {\r\n flatData.push(node.data); // Agrega el nodo actual\r\n if (node.children) {\r\n flatData = flatData.concat(flattenNodes(node.children)); // Agrega los hijos de manera recursiva\r\n }\r\n });\r\n return flatData;\r\n};\r\n\r\nconst exportToCSV = () => {\r\n if (ProduccionSeguimientoReporteList.length === 0) {\r\n return;\r\n }\r\n setIsExporting(true);\r\n const allColumns = generateColumns(ProduccionSeguimientoReporteList);\r\n const filteredColumns = allColumns.filter(col => !columnsToOmit.includes(col.field))\r\n .sort((a, b) => b.order - a.order);\r\n\r\n const visibleColumns = [\r\n { field: 'Descripcion', header: t('wtw:Concept') },\r\n showPreviousMonths && { field: 'AnioPrevio3', header: anioPrevio3 },\r\n showPreviousMonths && { field: 'AnioPrevio2', header: anioPrevio2 },\r\n showPreviousMonths && { field: 'AnioPrevio1', header: anioPrevio1 },\r\n showTendenciaAnio && { field: 'TendenciaMes', header: t('wtw:TendenciaMes') },\r\n showPromedioAnio && { field: 'PromedioAnio', header: t('wtw:PromedioAnio') },\r\n ...filteredColumns.map((col) => ({ field: col.field, header: col.header }))\r\n ].filter(Boolean); \r\n\r\n const allNodes = flattenNodes(ProduccionSeguimientoReporteList); \r\n const headers = visibleColumns.map(col => col.header).join(',');\r\n const rows = allNodes.map((data) => {\r\n return visibleColumns.map((col) => {\r\n const value = data[col.field];\r\n return value !== undefined ? value : ''; \r\n }).join(',');\r\n });\r\n \r\n\r\n const csvContent = [headers, ...rows].join('\\n');\r\n \r\n\r\n // Crear y descargar el archivo CSV\r\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.setAttribute('download', 'treetable_export.csv');\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n setIsExporting(false);\r\n}; \r\n\r\nconst filters = (\r\n <> \r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onYearChange(e.value)}\r\n label={t('common:Year')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onMonthChange(e.value,e)}\r\n label={t('common:Month')}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n optionDisabled={(option) => (currentYear === Anio && option.ClaMes > currentMonth)} \r\n /> \r\n
\r\n \r\n \r\n onChangeMultiDepartament(e)}\r\n options={OpcionesDepartamentos}\r\n errors={errors} \r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeMultiTurnos(e)}\r\n options={OpcionesTurnos}\r\n errors={errors}\r\n disabled={props.DisableFilters===true}\r\n >\r\n \r\n
\r\n \r\n \r\n onChangeCelda(e)}\r\n label={t('wtw:Cell')}\r\n disabled={props.DisableFilters===true}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaGpoParo(e)}\r\n label={t('wtw:DowntimeGroup')}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaTipoParoGpo(e)}\r\n label={t('wtw:DowntimeType')}\r\n /> \r\n
\r\n \r\n | \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n \r\n \r\n \r\n | \r\n
\r\n onClaDepartamentoChange(e.value)}\r\n label={t('wtw:Department')} \r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n {filtersCheckbox}\r\n \r\n bodyTemplate(rowData)}\r\n expander \r\n frozen \r\n style={{ width: '300px' }}\r\n >\r\n \r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio3')} style={{ width: '90px' }} header={anioPrevio3} />}\r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio2')} style={{ width: '90px' }} header={anioPrevio2} />}\r\n {showPreviousMonths && formatValue(rowData,'AnioPrevio1')} style={{ width: '90px' }} header={anioPrevio1} />}\r\n {showTendenciaAnio && formatValue(rowData,'TendenciaAnio',true)} style={{ width: '90px' }} header={t('wtw:TendenciaAnio')} />}\r\n {showPromedioAnio && formatValue(rowData,'PromedioAnio')} style={{ width: '90px' }} header={t('wtw:PromedioAnio')} />}\r\n {filteredColumns.map((col) => (\r\n formatValue(rowData,col.field.toString(), true, true)}\r\n />\r\n ))}\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n <>\r\n {IsLoading ? (\r\n <>\r\n \r\n {\r\n if (e.index === 1) {\r\n onClaDepartamentoChange(ClaDepartamento);\r\n setTabActiveIndex(e.index); \r\n } else {\r\n setTabActiveIndex(e.index);\r\n }\r\n }}\r\n > \r\n \r\n \r\n \r\n {filtersChart}\r\n <>\r\n {TrendList.length > 0 ? ( \r\n <>\r\n {\r\n EsVerDepartamentoChart\r\n &&\r\n (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MonthlyDowntimeSummaryTrend;","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card, \r\n CardBody, \r\n Row,\r\n Col, \r\n label,\r\n} from 'reactstrap'; \r\nimport { useTranslation } from 'react-i18next'; \r\nimport PageContent from 'layouts/PageContent';\r\nimport MonthlyDowntimeSummaryTrend from './MonthlyDowntimeSummaryTrend';\r\n\r\nconst MonthlyDowntimeSummaryScreen = (props) => { \r\n /* ################## useState area start ################## */\r\n const { t } = useTranslation(['productionDashboard', 'common']);\r\n \r\n /* ################## End useState area start ################## */\r\n \r\n \r\n return (\r\n <>\r\n \r\n \r\n {TrendList.map((col) => (\r\n
\r\n
\r\n )\r\n }\r\n {\r\n EsVerCeldaChart\r\n &&\r\n (\r\n \r\n \r\n {TrendDetail.Departamento && TrendDetail.Departamento.Celdas.map((celda) => (\r\n
\r\n
\r\n )\r\n }\r\n {\r\n EsVerGrupoChart\r\n &&\r\n (\r\n \r\n \r\n {TrendGroupDetail.Departamento.Celdas && TrendGroupDetail.Departamento.Celdas.Grupo.Tipos.map((tipo) => (\r\n
\r\n
\r\n )\r\n }\r\n \r\n ) : (\r\n <>\r\n {/* TrendList Sin datos */}\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n {t('wtw:Plant')} \r\n | \r\n{props.NomUbicacion} | \r\n\r\n { \r\n props.ClaTipo===3 ?\r\n (<>{t('wtw:Zone')})\r\n :\r\n (<>)\r\n }\r\n \r\n | \r\n\r\n {props.NomAnioMes}\r\n\r\n | \r\n
\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <>\r\n {\r\n props.ClaTipo=== 1 \r\n &&\r\n (\r\n \r\n
Last Update: {moment(item.Fecha).format(\"MMMM, DD, YYYY HH:mm\")}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n {\r\n ComentariosList.filter((item) => {\r\n return item.ClaArea === element.ClaArea && item.ClaDepartamento === element.ClaDepartamento\r\n && item.ClaZona === element.ClaZona\r\n }).map((item, rowIndex) => {\r\n return (\r\n <>\r\n {element.NomZona}\r\n \r\n \r\n )\r\n })\r\n } \r\n
\r\n )\r\n })} \r\n Last Update: {moment(item.Fecha).format(\"MMMM, DD, YYYY HH:mm\")}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n :\r\n (\r\n <>\r\n {DiasList.sort((a, b) => a.Fecha !== b.Fecha ? a.Fecha < b.Fecha ? -1 : 1 : 0).filter((item) => {\r\n return item.ClaTurno === ClaTurno\r\n }).map((element, index) => {\r\n return (\r\n \r\n
\r\n {moment(element.Fecha).format(\"MMMM, DD, YYYY\")}\r\n {\r\n ComentariosList.filter((item) => {\r\n return item.ClaArea === element.ClaArea && item.ClaDepartamento === element.ClaDepartamento\r\n && item.ClaZona === element.ClaZona\r\n && item.Fecha === element.Fecha\r\n && item.ClaTurno === ClaTurno\r\n }).map((item, rowIndex) => {\r\n return (\r\n
\r\n )\r\n })} \r\n \r\n)\r\n }\r\n \r\n \r\n \r\n
\r\n )\r\n })\r\n } \r\n {t('wtw:Cell')}: {item.NomMaquina}
\r\n \r\n \r\n {item.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n return (\r\n <>\r\n \r\n
\r\n {element.departamentos && element.departamentos.length > 0 ? (\r\n element.departamentos.map((departamento, depIndex) => (\r\n
\r\n \r\n \r\n
\r\n {departamento.comentarios && departamento.comentarios.length > 0 ? (\r\n departamento.comentarios.map((comentario, idx) => (\r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n \r\n {moment(comentario.Fecha).format(\"MMMM DD, YYYY HH:mm\")}\r\n
\r\n \r\n \r\n {comentario.ExplicacionProblema}\r\n \r\n
\r\n \r\n \r\n \r\n {t('wtw:NoComments')}\r\n \r\n
\r\n )}\r\n \r\n \r\n {t('wtw:NoDepartments')}\r\n \r\n
\r\n \r\n )}\r\n \r\n onChangeClaUbicacion(e)}\r\n label={t('wtw:Plant')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onChangeClaAnioMes(e)}\r\n label={t('wtw:YearMonth')}\r\n errors={errors}\r\n /> \r\n
\r\n \r\n \r\n onSearch()}\r\n >\r\n \r\n
\r\n \r\n \r\n {row.NomArea} \r\n
\r\n \r\n );\r\n }\r\n if (row.IdProduccionSeguimientoSemanal>0){\r\n return (\r\n <> \r\n onViewComments(row)}>\r\n {row.NomArea}\r\n
\r\n \r\n );\r\n }\r\n return (\r\n <>\r\n \r\n \r\n {row.NomArea}\r\n \r\n
\r\n \r\n);\r\n}\r\n\r\nconst ComentariosTemplate = (row) => {\r\n if (row.ClaArea === -1){\r\n return (\r\n <> \r\n \r\n );\r\n }\r\n \r\n if (row.IdProduccionSeguimientoSemanal>0){\r\n return (\r\n <> \r\n onViewComments(row)}\r\n > \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n <> \r\n \r\n \r\n \r\n );\r\n} \r\n\r\n\r\n\r\nconst onViewComments = async (item) => { \r\n if (item === undefined) {\r\n const departamentos = ComentariosPlantaList[0];\r\n if(departamentos!==undefined){\r\n if (departamentos.departamentos !== undefined) {\r\n const info = departamentos.departamentos[0].comentarios[0];\r\n item = info;\r\n }\r\n }\r\n }\r\n if(item!==undefined){\r\n setClaDepartamento(item.ClaDepartamento);\r\n setNomDepartamento(item.NomDepartamento);\r\n setExplicacionProblemaDepartamento(item.Comentarios);\r\n setIdProduccionSeguimientoSemanalDepartamento(item.IdProduccionSeguimientoSemanal);\r\n setClaArea(item.ClaArea);\r\n setNomArea(item.NomArea);\r\n setEsMostrarDialogComentarios(true);\r\n }\r\n};\r\n\r\n\r\nconst CajasTemplateCol = (item, columnName, decimals, columnNamePrev, columnNamePorc) => {\r\n const currentValue = item[columnName];\r\n const prevValue = item[columnNamePrev];\r\n const prevValuePoc = columnNamePorc ? item[columnNamePorc] : null;\r\n let changeIcon = '';\r\n let percentageChange = 0;\r\n\r\n if (prevValuePoc !== null && prevValuePoc !== 0) {\r\n percentageChange = prevValuePoc; \r\n changeIcon = percentageChange > 0 ? PrimeIcons.ARROW_UP : PrimeIcons.ARROW_DOWN;\r\n }\r\n console.log('columnNamePrev',columnNamePrev,'prevValue',prevValue)\r\n return (\r\n <> \r\n {columnNamePrev && prevValue !== null && prevValue !== 0 && prevValue !== undefined ? (\r\n \r\n {Highcharts.numberFormat(item[columnName], decimals, '.', ',')} \r\n showProductionTrend({ClaArea: null, NomArea: t('wtw:AllDepatments') })}>View Production Trend
\r\n \r\n \r\n {t('wtw:PlantlevelCommentsInstructions')}\r\n
\r\n Click onViewComments()}>here to view comments organized by department.\r\n
\r\n \r\n \r\n Click onViewComments()}>here to view comments organized by department.\r\n
\r\n \r\n
\r\n \r\n {element.departamentos && element.departamentos.length > 0 ? (\r\n element.departamentos.map((departamento, depIndex) => (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n ))\r\n ) : (\r\n
\r\n
\r\n ))}\r\n \r\n {element.nomSemana}
\r\n \r\n\r\n {`${t('wtw:Comments')}:`}\r\n
\r\n \r\n \r\n \r\n {t('wtw:NoDepartments')}\r\n \r\n
\r\n \r\n )}\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default InventoryBySGDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport InventoryBySGDash from './InventoryBySGDash';\r\n\r\nconst InventoryBySGDashScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default ARAgingDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport ARAgingDash from './ARAgingDash';\r\n\r\nconst ARAgingDashScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n {viz}
\r\n \r\n )\r\n}\r\n\r\nexport default APAgingDash;","import { React, UseState, UseEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport PageContent from 'layouts/PageContent';\r\nimport APAgingDash from './APAgingDash';\r\n\r\nconst APAgingDashScreen = (props) => {\r\n const {t, i18n} = useTranslation(['salesPerformance', 'common']);\r\n \r\n return (\r\n \r\n \r\n {t('uploadResultsCompensation:DownloadLayout')}\r\n \r\n setShowUploadResults(true)}\r\n >\r\n {t('uploadResultsCompensation:UploadResults')}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {this.getRoutes(this.state.routes)}\r\n \r\n
\r\n \r\n \r\n {this.getRoutes(this.state.routes)}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default NoMenu;\r\n","\r\nimport PageContent from 'layouts/PageContent';\r\nimport React, {useState, useEffect} from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Col, Row } from 'reactstrap'; \r\nimport { config } from 'utils/config';\r\nimport { callApi, getSessionItem, showSweetAlert, getDeviceUniqueID } from 'utils/utils';\r\nimport CardFormulario from '../Formulario/CardFormulario';\r\n\r\nconst AvailableCheckListByLocation = (props) => {\r\n const { t } = useTranslation(['common']); \r\n const [FormularioList, setFormularioList] = useState([]);\r\n \r\n useEffect(() => { \r\n GetFormularios(props.claUbicacion); \r\n }, []);\r\n\r\n const GetFormularios = (pClaUbicacion) => {\r\n const urlWebService = `${config.UrlApiProject}formulario/GetAvailableCheckListByLocation?ClaUbicacion=${pClaUbicacion}`;\r\n const paramsToService = {};\r\n callApi(urlWebService, 'GET', paramsToService, (response) => {\r\n setFormularioList(response.data.Formularios);\r\n console.log('response', response); \r\n });\r\n };\r\n\r\n \r\n return ( \r\n \r\n {t('survey:InvalidSurveycode')}.\r\n
\r\n{userName}
\r\n {t('qr:JobTitle')}\r\n{jobTitle}
\r\n {t('qr:Company')}\r\n{companyName}
\r\n \r\n\r\n \r\n
\r\n
\r\n );\r\n };\r\n \r\n return (\r\n <> \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nReactDOM.render( \r\n onQuestionChange(e.target.value)} \r\n onKeyDown={onAskKeyDown}\r\n />\r\n
\r\n \r\n {\r\n props.topic && (\r\n <> \r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n
\r\n )\r\n}\r\n\r\nexport default DAISeerConversation","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport { Dialog } from 'primereact/dialog';\r\nimport React from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\n// Props:\r\n// - question\r\n// - visible\r\n// - onHide\r\nconst DAISeerThoughtsDialog = (props) => {\r\n const {t, i18n} = useTranslation(['daiSeer', 'common']); \r\n\r\n const dialogHeader = () => {\r\n return (\r\n <>\r\n \r\n {props.question.Question}\r\n
\r\n \r\n )\r\n }\r\n\r\n const dialogFooter = () => {\r\n return <>;\r\n }\r\n\r\n const dialogTemplate = (\r\n <>\r\n\r\n Thoughts...\r\n
\r\n \r\n \r\n );\r\n\r\n return (\r\n <>\r\n {dialogTemplate}\r\n \r\n )\r\n}\r\n\r\nexport default DAISeerThoughtsDialog","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useEffect, useState } from 'react';\r\nimport 'react-date-range/dist/styles.css';\r\nimport 'react-date-range/dist/theme/default.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Col, Row } from 'reactstrap';\r\n\r\n// Props:\r\n// - rawStep\r\nconst DAISeerThought = (props) => {\r\n const reprTypes = { \r\n NONE: 0, \r\n VALUE: 1, \r\n ARRAY: 2,\r\n OBJECT: 3\r\n };\r\n const {t, i18n} = useTranslation(['daiSeer', 'common']); \r\n const [thoughtRepr, setThoughtRepr] = useState('');\r\n const [thought, setThought] = useState('');\r\n const [repr, setRepr] = useState(null);\r\n const [reprType, setReprType] = useState(reprTypes.NONE); \r\n \r\n const parseStep = (rawStep) => {\r\n try {\r\n console.group(\"Parsing step\"); \r\n console.info(\"Raw step:\", rawStep); \r\n if (rawStep.length === 2) {\r\n const _thoughtRepr = rawStep[0].repr; \r\n setThoughtRepr(_thoughtRepr) \r\n parseThought(_thoughtRepr);\r\n parseRepr(rawStep[1]);\r\n } \r\n console.groupEnd();\r\n } catch(exception) {\r\n console.error(\"Error parsing step.\"); \r\n } finally {\r\n console.groupEnd();\r\n } \r\n };\r\n\r\n const parseThought = (thoughtRepr) => { \r\n console.group(\"Parsing thought\"); \r\n console.info(\"Thought repr:\", thoughtRepr);\r\n let thought = thoughtRepr.substring(\r\n thoughtRepr.indexOf('log=')+5, \r\n thoughtRepr.lastIndexOf(\"Action:\") - 2);\r\n if (thought.indexOf('Thought: ') !== -1) {\r\n thought = thought.substring(\r\n thought.indexOf('Thought: ') + 9, \r\n thought.length); \r\n } \r\n console.info(\"Thought:\", thought); \r\n setThought(thought);\r\n console.groupEnd(); \r\n };\r\n\r\n const parseRepr = (rawRepr) => { \r\n console.group(\"Parsing repr\"); \r\n console.info(\"Raw repr:\", rawRepr);\r\n let _reprType = null;\r\n let _repr = null;\r\n if (Array.isArray(rawRepr)) {\r\n console.log(\"Repr type is an Array\"); \r\n _reprType = reprTypes.ARRAY\r\n _repr = rawRepr;\r\n } else if (typeof rawRepr === \"object\") {\r\n console.log(\"Repr type is an Object\"); \r\n _reprType = reprTypes.OBJECT\r\n _repr = rawRepr;\r\n } else {\r\n console.log(\"Repr type is a Value\"); \r\n _reprType = reprTypes.VALUE\r\n _repr = rawRepr;\r\n }\r\n setRepr(_repr);\r\n setReprType(_reprType);\r\n console.info(\"Repr type:\", _reprType); \r\n console.info(\"Repr:\", _repr); \r\n console.groupEnd(); \r\n };\r\n\r\n const valueReprTemplate = (\r\n <>\r\n \r\n {repr} \r\n \r\n \r\n );\r\n \r\n const objectReprTemplate = (\r\n <>\r\n {\r\n repr && (\r\n \r\n {repr.repr}\r\n \r\n )\r\n }\r\n \r\n );\r\n\r\n const arrayReprTemplate = (\r\n <>\r\n {\r\n repr && Array.isArray(repr) && (\r\n- \r\n {\r\n repr.map((item) => {\r\n return (\r\n <>\r\n
- \r\n \r\n {item}\r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n
\r\n \r\n \r\n {thought}\r\n \r\n
\r\n\r\n {thoughtRepr}\r\n
\r\n \r\n\r\n \r\n \r\n {t(\"daiSeer:AnswerShortName\")}\r\n \r\n \r\n
\r\n \r\n ); \r\n\r\n const answerTemplate = ( \r\n <>\r\n {\r\n // a vaces regresan informacion de html, lo inyectamos para los scripts que se inyectan ver\r\n // DAISeerConversation.jsx que se encagra de correr los scripts una vez cargados.\r\n answerDataType === 'Table' || answerDataType === 'Plot Line' || answerDataType === 'Plot Bar' || answerDataType === 'Internal Error' ?\r\n ( \r\n <>\r\n\r\n
\r\n \r\n )\r\n :\r\n (\r\n \r\n {\r\n isErrorMessageResponse ?\r\n (\r\n <>\r\n {\r\n errorMessage.indexOf('maximum context length') !== -1\r\n ?\r\n (\r\n \r\n Hello! 👋 Copilot is here to help, but to get the best and quickest answers, it's best to keep your questions simple and specific. Feel free to ask straightforward questions, and we will do our best to assist you effectively. If you have a more complex query, consider breaking it down into smaller, more focused questions. Thanks for using our Copilot chat bot!\r\n \r\n )\r\n :\r\n ({errorMessage})\r\n }\r\n \r\n )\r\n :\r\n (\r\n <>\r\n {\r\n answer && Array.isArray(answer) ? (\r\n - \r\n {\r\n answer.map((item) => {\r\n return (\r\n <>\r\n
- \r\n \r\n {item}\r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n
\r\n \r\n \r\n {t(\"daiSeer:QuestionShortName\")}\r\n \r\n \r\n
\r\n \r\n );\r\n\r\n const questionTemplate = (\r\n <>\r\n \r\n {props.question.Pregunta}\r\n \r\n \r\n );\r\n\r\n const answerTemplate = (\r\n <>\r\n