setFilterText(e.target.value)}\n onClear={handleClear} filterText={filterText}\n onclickSearchByText={handlerSearchByText}\n onStartDateChange={handleStartDateChange}\n onEndDateChange={handleEndDateChange}\n onClickSearch={handleDateSearch}\n //onExport={() => downloadCSV(props.listByStatus, params.stage === 'ProcesoFueraDeTiempo' || params.stage === 'ProcesoATiempo' || params.stage === 'Finalizacion' ? excelConfigurationAlter : excelConfiguration)}\n onExport={() => downloadCSVCustomName(props.listByStatus, selectConfig(params.stage), selectName(params.stage))}\n styles={classes.searchAlign}\n />;\n }, [filterText, props]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n {\n params.stage && params.stage === 'Tramite' && (\n {t(`collateralDashboard.${params.stage}`)}
\n )\n }\n {Constants.LegendsForAP.paymentStatus} : t(`collateralDashboard.${params.stage}`)}\n columns={getTableColumnsByStage(\"Collateral\", params.stage, i18n.language)}\n data={props.listByStatus}\n defaultSortField=\"woid\"\n customStyles={params.stage === 'Tramite' ? customStylePrincipalAP : customStylePrincipal}\n highlightOnHover\n dense\n responsive\n striped\n pointerOnHover\n pagination\n paginationComponentOptions={paginationOptions}\n subHeader\n subHeaderComponent={subHeaderComponentMemo}\n noDataComponent={{t('commonMessages.noData')}
}\n />\n \n
\n \n
\n
\n \n \n \n {t('common.numberWoid')}\n {props.workDetail[0].woid}\n \n \n {t('common.fleet')}\n {props.workDetail[0].fleet}\n \n \n {t('common.plates')}\n {props.workDetail[0].plate}\n \n \n {t('common.year')}\n {props.workDetail[0].modelYear}\n \n \n \n \n \n \n {t('common.AssignedDate')}\n {props.workDetail[0].assignedSupplierDate}\n \n \n {t('common.unit')}\n {props.workDetail[0].unitNumber}\n \n \n {t('common.model')}\n {props.workDetail[0].make}\n \n \n VIN\n {props.workDetail[0].vinNumber}\n \n \n \n \n \n {\n props.workDetail.length && props.workDetail[0].collateralStageID !== 3 && (\n \n {t('common.endDate')}\n {props.workDetail[0].endDate}\n \n )\n }\n \n {t('common.status')}\n {props.workDetail[0].woStatus}\n \n \n {t('collateralDetails.assignedArea')}\n {props.workDetail[0].assignedArea}\n \n \n {t('collateralDetails.applicantName')}\n {props.workDetail[0].assignedUser}\n \n {\n props.workDetail.length && props.workDetail[0].collateralStageID === 3 && (\n \n\n \n )\n }\n \n \n \n
\n {props.workDetail[0].collateralStageID === 4\n ?\n \n \n
\n \n \n \n \n \n \n \n \n :\n \n \n
\n \n \n \n \n \n \n \n }\n
\n \n
\n \n
\n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n dashboardItems: state.CollateralReducer.list,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nexport default connect(mapStateToProps)(withStyles(CollateralStyles)(Tramit))\n","import React, { useState, useEffect } from 'react'\nimport { connect } from \"react-redux\"\nimport TextField from \"@material-ui/core/TextField\"\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport { useHistory } from 'react-router-dom'\nimport Button from \"@material-ui/core/Button\"\nimport DataTable from 'react-data-table-component'\nimport { CollateralStyles } from '../../CollateralStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Box from '@material-ui/core/Box'\nimport Input from '@material-ui/core/Input'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\nimport { useTranslation } from 'react-i18next'\nimport Modal from 'antd/es/modal';\nimport FormControl from '@material-ui/core/FormControl';\nimport UseForm from '../../../common/UseForm'\nimport { Container } from '@material-ui/core'\nimport { customStyleSecondary } from '../../../common/CommonStyles'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\n\nconst Comments = ({ classes, ...props }) => {\n const history = useHistory()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [comment, setComment] = useState()\n const { t } = useTranslation()\n\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const initialCommentBody = {\n \"FormFile\": {},\n \"WOID\": \"\",\n \"BranchOfficeId\": \"\",\n \"StageID\": \"\",\n \"Comment\": \"\"\n }\n\n const {\n values,\n handleInpuFileChange\n } = UseForm(initialCommentBody)\n\n useEffect(() => {\n handleOpenBackdrop()\n props.actions.fetch_Comments(props.userLanguage, props.userToken, props.match.params.woid, props.match.params.branchOfficeId, onError, onSuccess)\n return () => {\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleSubmit = e => {\n e.preventDefault()\n if (comment !== undefined) {\n const formData = new FormData()\n formData.append('WOID', props.workDetail[0].woid)\n formData.append('BranchOfficeId', props.match.params.branchOfficeId)\n formData.append('StageID', props.workDetail[0].collateralStageID)\n formData.append('Comment', comment)\n\n if (values.pdf !== undefined && values.pdf.length !== 0) {\n for (let file of values.pdf) {\n formData.append(\"FormFile\", file);\n props.actions.post_Comments(props.userLanguage, props.userToken, formData, onError, onSuccessSave)\n }\n } else {\n props.actions.post_Comments(props.userLanguage, props.userToken, formData, onError, onSuccessSave)\n }\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessSave = (response) => {\n if (response.success) {\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n } else {\n Modal.error({\n title: t('commonMessages.alert500')\n })\n }\n props.actions.fetch_Comments(props.userLanguage, props.userToken, props.match.params.woid, props.match.params.branchOfficeId, onError, onSuccess)\n setComment(\"\")\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\")\n )\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`collateralErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n alert(t('commonMessages.alert500'))\n break\n default:\n break\n }\n }\n }\n\n const checkFileType = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['application/pdf', 'image/png', 'image/jpeg']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n props.actions.fetch_Comments(props.userLanguage, props.userToken, props.match.params.woid, props.match.params.branchOfficeId, onError, onSuccess)\n if (response.success) {\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n } else {\n Modal.error({\n title: 'Error',\n content: response.message\n })\n }\n }\n\n const handleDelete = (wocid) => {\n handleOpenBackdrop()\n props.actions.delete_Comment(props.userLanguage, props.userToken, wocid, props.match.params.woid, props.match.params.branchOfficeId, onError, onSuccessDelete)\n }\n\n const columns = [\n {\n name: t('collateralDetails.comments'),\n selector: 'comment',\n width: '682px',\n sortable: true,\n cell: row => row.comment\n },\n {\n name: t('collateralDetails.registerDate'),\n selector: 'creationDate',\n width: '175px',\n sortable: true,\n cell: row => row.creationDate\n },\n {\n name: t('common.user'),\n selector: 'creationUser',\n width: '171px',\n sortable: true,\n cell: row => row.creationUser\n },\n {\n name: \"\",\n center: true,\n width: '150px',\n cell: row => (buttonForColumns(row))\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n \n handleDelete(row.wocid)}>\n \n \n \n
\n )\n }\n\n return (\n \n \n \n \n \n
\n \n \n \n {t('collateralDetails.uploadComment')}\n \n \n {t('common.comment')}\n \n setComment(e.target.value)}\n fullWidth={true}\n multiline\n rows={3}\n />\n \n \n \n {t('commonMessages.addFile')}\n \n \n \n \n \n
\n \n \n \n \n \n \n
\n \n {t('collateralDetails.commentsHistory')}\n \n {t('commonMessages.noData')}}\n />\n \n
\n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n userProfile: state.UserProfileReducer.list,\n comments: state.CollateralReducer.comments,\n listByStatus: state.CollateralReducer.listOrders,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nexport default connect(mapStateToProps)(withStyles(CollateralStyles)(Comments))","import React, { useState, useEffect } from 'react'\nimport { connect } from \"react-redux\"\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport DataTable from 'react-data-table-component'\nimport Divider from \"@material-ui/core/Divider\"\nimport Button from \"@material-ui/core/Button\"\nimport Box from \"@material-ui/core/Box\"\nimport { CollateralStyles } from '../../CollateralStyles'\nimport { useTranslation } from 'react-i18next'\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport Modal from 'antd/es/modal';\nimport TextField from '@material-ui/core/TextField'\nimport { Container } from '@material-ui/core'\nimport FormControl from '@material-ui/core/FormControl'\nimport { customStyleSecondary } from '../../../common/CommonStyles'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\n\nconst Subphases = ({ classes, ...props }) => {\n const [subStageType, setSubStageType] = useState([]);\n const [subStageDesc, setSubStageDesc] = useState([])\n const { t } = useTranslation()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const saveSubStageBody = {\n \"OrderNumber\": props.workDetail[0].woid,\n \"SubStageId\": subStageDesc.subStageID,\n \"branchOfficeID\": parseInt(props.match.params.branchOfficeId)\n }\n\n useEffect(() => {\n handleOpenBackdrop()\n props.actions.fetch_Substage_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, props.match.params.branchOfficeId, onError, onSuccess)\n props.actions.fetch_Substage(props.userLanguage, props.userToken, 3, onError, onSuccess)\n }, [])// eslint-disable-line react-hooks/exhaustive-deps\n\n const handleOnClick = () => {\n props.actions.save_SubStage(props.userLanguage, props.userToken, saveSubStageBody, onError, onSuccessSave)\n }\n\n const handleDelete = (subStageId) => {\n handleOpenBackdrop()\n props.actions.delete_SubStage(props.userLanguage, props.userToken, subStageId, props.match.params.branchOfficeId, props.workDetail[0].woid, onError, onSuccessDelete)\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n if (response.success) {\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n } else {\n Modal.error({\n title: 'Error',\n content: t('collateralDetails.errorSubstages')\n })\n }\n props.actions.fetch_Substage_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, props.match.params.branchOfficeId, onError, onSuccess)\n }\n\n const onSuccessSave = () => {\n Modal.success({\n title: {t('commonMessages.savedSucc')}\n })\n props.actions.fetch_Substage_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, props.match.params.branchOfficeId, onError, onSuccess)\n setSubStageDesc([])\n setSubStageType([])\n }\n //*First Render Functions\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 500:\n Modal.error({\n title: 'Error',\n content: t('collateralDetails.errorSubstages')\n })\n break\n default:\n break\n }\n }\n }\n\n const columns = [\n {\n name: t('collateralDetails.subphase'),\n selector: 'subStageDescription',\n sortable: true,\n width: '800px',\n cell: row => row.subStageDescription\n },\n {\n name: t('collateralDetails.registerDate'),\n selector: 'subStageDate',\n sortable: true,\n width:'150',\n cell: row => row.subStageDate\n },\n {\n name: \"\",\n center: true,\n width: '150px',\n cell: row => (buttonForColumns(row))\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n \n handleDelete(row.id)}>\n \n \n \n
\n )\n }\n\n return (\n \n {props.subStagePerOrder\n ?\n
\n \n \n \n
\n \n
\n
\n \n \n {\n setSubStageType(newValue);\n }}\n size=\"small\"\n value={subStageType}\n style={{ width: 500 }}\n options={props.subStage}\n getOptionLabel={(option) => option.subStageType}\n getOptionSelected={(option, value) => option.subStageType === value.subStageType}\n renderInput={(params) => }\n />\n \n \n \n {\n subStageType.collateralSubStagesList !== undefined\n ?\n \n
\n {\n setSubStageDesc(newValue);\n }}\n size=\"small\"\n value={subStageDesc}\n style={{ width: 500 }}\n options={subStageType.collateralSubStagesList}\n getOptionLabel={(option) => option.statusDescription}\n getOptionSelected={(option, value) => option.statusDescription === value.statusDescription}\n renderInput={(params) => }\n />\n \n
\n }\n \n \n
\n
\n \n
\n
\n {\n subStageType.collateralSubStagesList !== undefined\n ?\n \n \n {t('common.save')}\n \n \n :
}\n \n\n \n
\n \n {\n props.subStagePerOrder && props.subStagePerOrder.length < 1 && (\n
\n )\n }\n \n \n :\n
}\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.processOnTime')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n props.workDetail.length\n ? \n : \n }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.processOutOfTime')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n props.workDetail.length\n ? \n : \n }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n {t('collateralDetails.xmlFile')}\n \n \n \n \n \n \n \n \n \n
\n {t('collateralDetails.pdfFile')}\n \n \n \n \n \n \n
\n \n \n \n \n {t('commonMessages.noData')}}\n />\n \n \n \n \n \n )\n}\n\nconst mapStateToProps = state => ({\n userProfile: state.UserProfileReducer.list,\n invoiceErrors: state.CollateralReducer.invoiceErrors,\n result: state.CollateralReducer.result,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(collateralActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(CollateralStyles)(Invoice))\n","import React, { useEffect, useState } from 'react'\nimport { connect } from \"react-redux\"\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Divider from \"@material-ui/core/Divider\"\nimport { CollateralStyles } from '../../CollateralStyles'\nimport { useTranslation } from 'react-i18next'\nimport Modal from 'antd/es/modal';\nimport UseForm from '../../../common/UseForm'\nimport DataTable from 'react-data-table-component'\nimport { customStyleSecondary } from '../../../common/CommonStyles'\nimport { Button, Container, TextField, FormControl, Grid, Input, InputLabel, MenuItem, Select } from '@material-ui/core'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\n\nconst Rigths = ({ classes, ...props }) => {\n const { t } = useTranslation()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const initialSaveSubStageBody = {\n BranchOfficeId: props.match.params.branchOfficeId,\n WOID: props.workDetail[0].woid,\n ProcedureID: \"\",\n Amount: 0,\n FormFile: {}\n }\n\n const {\n values,\n handleInputChange,\n handleInpuFileChange,\n resetForm\n } = UseForm(initialSaveSubStageBody)\n\n useEffect(() => {\n handleOpenBackdrop()\n props.actions.fetch_Rigths(props.userLanguage, props.userToken, onError, onSuccess)\n props.actions.fetch_Rigths_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, onError, onSuccess)\n }, [])// eslint-disable-line react-hooks/exhaustive-deps\n\n const handleSubmit = e => {\n e.preventDefault()\n\n let amountInt = parseFloat(values.Amount)\n if (values.pdf !== undefined && amountInt !== undefined && values.ProcedureID !== undefined && amountInt > 0) {\n handleOpenBackdrop()\n\n const formData = new FormData()\n formData.append('BranchOfficeId', values.BranchOfficeId)\n formData.append('WOID', values.WOID)\n formData.append('ProcedureID', values.ProcedureID)\n formData.append('Amount', amountInt)\n\n for (let file of values.pdf) {\n formData.append(\"FormFile\", file);\n }\n\n props.actions.save_Rigths(props.userLanguage, props.userToken, formData, onError, onSuccessSave)\n } else if (typeof (amountInt) === 'string' || typeof (amountInt) === 'undefined') {\n Modal.error({\n title: 'Error',\n content: t('collateralErrors.amountString')\n })\n } else if (amountInt <= 0) {\n Modal.error({\n title: 'Error',\n content: t('collateralErrors.amountGreaterZero')\n })\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const onSuccess = (res) => {\n handleCloseBackdrop()\n if (res.success === false) {\n\n }\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n props.actions.fetch_Rigths_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, onError, onSuccess)\n if (response.success) {\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n } else {\n Modal.error({\n title: 'Error',\n content: response.message\n })\n }\n }\n\n const onSuccessSave = () => {\n handleCloseBackdrop()\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n props.actions.fetch_Rigths_Per_Order(props.userLanguage, props.userToken, props.workDetail[0].woid, onError, onSuccess)\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\")\n )\n resetForm()\n }\n\n //*First Render Functions\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const handleDelete = (procedureId, procedureDocumentId) => {\n handleOpenBackdrop()\n props.actions.delete_Right(props.userLanguage, props.userToken, procedureId, procedureDocumentId, props.workDetail[0].woid, props.match.params.branchOfficeId, onError, onSuccessDelete)\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: err.response.errors[0]\n })\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const checkFileType = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['application/pdf', 'image/png', 'image/jpeg']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const columns = [\n {\n name: t('collateralDetails.rigthsFileName'),\n selector: 'fileName',\n sortable: true,\n with: '300px',\n cell: row => row.fileName\n },\n {\n name: t('collateralDetails.rigthsName'),\n selector: 'description',\n sortable: true,\n with: '350px',\n cell: row => row.description\n },\n {\n name: t('collateralDetails.rigthsDate'),\n selector: 'date',\n width: '200px',\n sortable: true,\n cell: row => row.date\n },\n {\n name: t('common.amount'),\n selector: 'amount',\n width: '180px',\n sortable: true,\n cell: row => row.amount\n },\n {\n name: \"\",\n center: true,\n width: '150px',\n cell: row => (buttonForColumns(row))\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n \n handleDelete(row.idProcedure, row.procedureDocumentId)}>\n \n \n \n
\n )\n }\n\n return (\n \n {props.rigths.length\n ?\n
\n \n \n \n
\n \n \n \n \n \n \n
\n \n \n {t('collateralDetails.rigthsProcedure')}\n \n \n {\n props.rigths.map((item, index) => (\n \n ))\n }\n \n \n \n \n
\n \n \n \n {t('common.amount')}\n \n \n \n
\n \n \n {t('collateralDetails.multipleFile')}\n \n \n \n \n\n
\n\n \n \n \n\n
\n \n
\n\n {t('commonMessages.noData')}}\n />\n {\n props.rigthsPerOrder && props.rigthsPerOrder.length < 1 && (\n
\n )\n }\n \n :\n
}\n
\n {t('common.status')}:\n {\n props.invoiceList && props.invoiceList.length > 1\n ?\n {props.invoiceList[0].invoiceStatus}\n :\n {t('common.withoutInvoice')}\n }\n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.invoiceList && props.invoiceList.length < 1 && (\n
\n )\n }\n \n )\n}\n\nconst mapStateToProps = state => ({\n invoiceList: state.CollateralReducer.invoiceList,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nexport default connect(mapStateToProps)(withStyles(CollateralStyles)(Status))","import React, { useEffect, useState } from 'react'\nimport { connect } from \"react-redux\"\nimport TopBarNav from '../../common/TopBarNav'\nimport Container from '@material-ui/core/Container'\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport { useHistory } from 'react-router-dom'\nimport BreadcrumbsHistory from '../../common/BreadcrumbsHistory'\nimport * as navigationActions from '../../../actions/common/NavigationActions'\nimport { CollateralStyles } from '../CollateralStyles'\nimport * as CollateralActions from \"../../../actions/collateral/CollateralActions\"\nimport { bindActionCreators } from 'redux'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\nimport { useTranslation } from 'react-i18next'\nimport AppBar from \"@material-ui/core/AppBar\"\nimport Tab from \"@material-ui/core/Tab\"\nimport TabContext from \"@material-ui/lab/TabContext\"\nimport TabList from \"@material-ui/lab/TabList\"\nimport TabPanel from \"@material-ui/lab/TabPanel\"\nimport { makeStyles } from '@material-ui/core/styles'\nimport Modal from 'antd/es/modal';\n//*Components Details\nimport WorkOrderDetails from './common/WorkOrderDetails'\nimport Invoice from './common/Invoice'\nimport Rigths from './common/Rigths'\nimport Status from './common/Status'\n\nconst useStyles = makeStyles({\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"capitalize\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n }\n})\n\nconst CollateralDetailsOnTramit = ({ classes, ...props }) => {\n const { match: { params } } = props;\n\n const history = useHistory();\n const localclass = useStyles();\n const { t } = useTranslation();\n\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [value, setValue] = useState(\"1\")\n useEffect(() => {\n handleOpenBackdrop()\n const newRoute = {\n path: '/collateral/WorkOrderDetailsComprobation',\n linkLegend: t('collateralDetails.workOrderDetails'),\n urlParams: [{ key: 'branchOfficeId', value: props.branchOfficeId }, { key: 'wOID', value: params.woid }, \"receptionProcess\"]\n }\n props.navigationActions.add_route(newRoute)\n props.actions.fetch_Work_Order_Detail(props.userLanguage, props.userToken, params.branchOfficeId, params.woid, \"receptionProcess\", onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.Tramite')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n props.workDetail.length\n ? \n : \n }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.comprobation')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n props.workDetail.length\n ? \n : \n }\n \n \n \n \n \n \n \n \n \n \n \n
\n{\n props.workDetail.length\n ?\n
\n \n \n \n {t('common.numberWoid')}\n {props.workDetail[0].woid}\n \n \n {t('common.fleet')}\n {props.workDetail[0].fleet}\n \n \n {t('common.plates')}\n {props.workDetail[0].plate}\n \n \n {t('common.year')}\n {props.workDetail[0].modelYear}\n \n \n \n \n \n \n {t('common.AssignedDate')}\n {props.workDetail[0].assignedSupplierDate}\n \n \n {t('common.unit')}\n {props.workDetail[0].unitNumber}\n \n \n {t('common.model')}\n {props.workDetail[0].make}\n \n \n VIN\n {props.workDetail[0].vinNumber}\n \n \n \n \n \n {\n props.workDetail.length && props.workDetail[0].collateralStageID !== 3 && (\n \n {t('common.endDate')}\n {props.workDetail[0].endDate}\n \n )\n }\n \n {t('common.status')}\n {props.workDetail[0].woStatus}\n \n \n {t('collateralDetails.assignedArea')}\n {props.workDetail[0].assignedArea}\n \n \n {t('collateralDetails.applicantName')}\n {props.workDetail[0].assignedUser}\n \n {\n props.workDetail.length && props.workDetail[0].collateralStageID === 3 && (\n \n\n \n )\n }\n \n \n \n
\n {props.workDetail[0].collateralStageID === 4\n ?\n \n \n
\n \n \n \n \n \n :\n \n \n
\n \n \n \n \n \n }\n
\n \n:\n\n
\n \n \n
{t('commonMessages.noData')}
\n
\n\n\n}\n\n
\n \n \n \n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.rigthsPerOrder && props.rigthsPerOrder.length < 1 && (\n
\n )\n }\n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n rigthsPerOrder: state.CollateralReducer.rigthsPerOrder,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nexport default connect(mapStateToProps)(withStyles(CollateralStyles)(InvoiceRigthsTab))","import React, { useEffect, useState } from 'react'\nimport { connect } from \"react-redux\"\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Box from \"@material-ui/core/Box\"\nimport { CollateralStyles } from '../../CollateralStyles'\nimport { useTranslation } from 'react-i18next'\nimport { customStyleSecondary } from '../../../common/CommonStyles'\nimport DataTable from 'react-data-table-component'\nimport Container from '@material-ui/core/Container'\nimport Modal from 'antd/es/modal';\nimport { Backdrop, CircularProgress } from '@material-ui/core'\n\nconst InvoiceStatusTab = ({ classes, ...props }) => {\n const { t } = useTranslation()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const { match: { params } } = props\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n useEffect(() => {\n handleOpenBackdrop()\n props.actions.fetch_Invoices(props.userLanguage, props.userToken, params.woid, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: err.response.errors[0]\n })\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const columns = [\n {\n name: t('collateralDetails.invoiceName'),\n selector: 'fileName',\n sortable: true,\n cell: row => row.fileName\n },\n {\n name: t('collateralDetails.registrationDate'),\n selector: 'collateralOrdInvDocInsertDt',\n width: '200px',\n sortable: true,\n cell: row => row.collateralOrdInvDocInsertDt\n },\n {\n name: t('collateralDetails.invoiceStatus'),\n selector: 'invoiceStatus',\n sortable: true,\n cell: row => row.invoiceStatus\n }\n ]\n\n return (\n \n \n \n \n
\n {t('common.status')}:\n {\n props.invoiceList && props.invoiceList.length > 1\n ?\n {props.invoiceList[0].invoiceStatus}\n :\n {t('common.withoutInvoice')}\n }\n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.invoiceList && props.invoiceList.length < 1 && (\n
\n )\n }\n \n )\n}\n\nconst mapStateToProps = state => ({\n invoiceList: state.CollateralReducer.invoiceList,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nexport default connect(mapStateToProps)(withStyles(CollateralStyles)(InvoiceStatusTab))","import React, { useEffect, useState } from 'react'\nimport { connect } from \"react-redux\"\nimport TopBarNav from '../../common/TopBarNav'\nimport Container from '@material-ui/core/Container'\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport { useHistory } from 'react-router-dom'\nimport BreadcrumbsHistory from '../../common/BreadcrumbsHistory'\nimport * as navigationActions from '../../../actions/common/NavigationActions'\nimport { CollateralStyles } from '../CollateralStyles'\nimport * as CollateralActions from \"../../../actions/collateral/CollateralActions\"\nimport { bindActionCreators } from 'redux'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\nimport { useTranslation } from 'react-i18next'\nimport AppBar from \"@material-ui/core/AppBar\"\nimport Tab from \"@material-ui/core/Tab\"\nimport TabContext from \"@material-ui/lab/TabContext\"\nimport TabList from \"@material-ui/lab/TabList\"\nimport TabPanel from \"@material-ui/lab/TabPanel\"\nimport { makeStyles } from '@material-ui/core/styles'\nimport Modal from 'antd/es/modal';\n//*Components Details\nimport InvoiceWorkOrderDetailsTab from './common/InvoiceWorkOrderDetailsTab'\nimport InvoiceRigthsTab from './common/InvoiceRigthsTab'\nimport InvoiceStatusTab from './common/InvoiceStatusTab'\nimport { any } from 'prop-types'\n\n\nconst useStyles = makeStyles({\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"capitalize\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n }\n})\n\nconst CollateralDetailsPaymentOnDelay = ({ classes, ...props }) => {\n const { match: { params } } = props;\n\n const history = useHistory();\n const localclass = useStyles();\n const { t } = useTranslation();\n\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [value, setValue] = useState(\"1\");\n\n useEffect(() => {\n handleOpenBackdrop()\n const newRoute = {\n path: '/collateral/WorkOrderDetailsComprobation',\n linkLegend: t('collateralDetails.workOrderDetails'),\n urlParams: [{ key: 'branchOfficeId', value: props.branchOfficeId }, { key: 'wOID', value: params.woid }, \"paymentOnDelay\"]\n }\n props.navigationActions.add_route(newRoute)\n props.actions.fetch_Work_Order_Detail(props.userLanguage, props.userToken, params.branchOfficeId, params.woid, \"paymentOnDelay\", onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n const onSuccess = () => {\n handleCloseBackdrop();\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.paymentOnDelay')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n \n \n {t('collateralDashboard.Finalizacion')}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n {t('telematics')}
\n \n \n \n \n {\n props.dashboardItems.map((itemDashboard, index) => {\n return (\n \n \n \n \n \n \n
\n
\n \n
\n \n \n
\n Total\n \n \n
\n {itemDashboard.total}\n
\n \n \n \n \n \n \n \n );\n }\n )\n }\n \n \n \n \n \n \n
\n
\n \n
\n \n \n \n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n dashboardItems: state.TelematicsReducer.list,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(telematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(TelematicsDashboard))\n","import React, { useState, useEffect, useMemo } from 'react'\nimport { connect } from \"react-redux\"\nimport TopBarNav from '../common/TopBarNav'\nimport Container from '@material-ui/core/Container'\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport { useHistory } from 'react-router-dom'\nimport DataTable from 'react-data-table-component'\nimport * as telematicsActions from '../../actions/telematics/TelematicsActions'\nimport { downloadCSV, getTableColumnsByStage } from \"../common/Utils\"\nimport { TelematicsStyles } from './TelematicsStyles'\nimport TableFilterComponentCollateralTelematics from '../common/TableFilterComponentCollateralTelematics'\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../actions/common/NavigationActions'\nimport BreadcrumbsHistory from '../common/BreadcrumbsHistory'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\nimport { useTranslation } from 'react-i18next'\nimport Modal from 'antd/es/modal';\nimport { customStylePrincipal } from '../common/CommonStyles'\n\nconst TelematicsListByStatus = ({ classes, ...props }) => {\n const history = useHistory()\n const [filterText, setFilterText] = useState('')\n const [startDate, setStartDate] = useState()\n const [endDate, setEndDate] = useState()\n const { match: { params } } = props\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const { t, i18n } = useTranslation()\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const excelConfiguration = [\n {\n selector: 'installationOrderId',\n label: t('common.installationOrderId')\n },\n {\n selector: 'statusDesc',\n label: t('common.status')\n },\n {\n selector: 'installers',\n label: t('common.installers'),\n propToJoin: 'name'\n },\n {\n selector: 'installationOrderDate',\n label: t('common.installationOrderDate'),\n },\n {\n selector: 'createDate',\n label: t('common.creationDate'),\n }\n ]\n\n useEffect(() => {\n const newRoute = {\n path: '/telematics/listByStatus',\n linkLegend: t(`telematicsDashboard.${params.status}`),\n urlParams: [{ key: 'status', value: params.status }, { key: 'branchOfficeId', value: params.branchOfficeId }]\n }\n props.navigationActions.add_route(newRoute)\n if (filterText.length === 0 || filterText.length >= 5) {\n handleOpenBackdrop()\n props.actions.fecth_filter_by_date(props.userLanguage, props.userToken, \"\", \"\", params.status, params.branchOfficeId, filterText, onError, onSuccess)\n props.cleanUserProfile()\n }\n }, [filterText]) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const subHeaderComponentMemo = useMemo(() => {\n const handleClear = () => {\n setFilterText('')\n setStartDate(null)\n setEndDate(null)\n }\n\n const handleStartDateChange = (e) => {\n if (e != null)\n setStartDate(e.format('YYYY-MM-DD'))\n else\n setStartDate(null)\n }\n\n const handleEndDateChange = (e) => {\n if (e != null)\n setEndDate(e.format('YYYY-MM-DD'))\n else\n setEndDate(null)\n }\n\n const handleDateSearch = () => {\n handleOpenBackdrop()\n props.actions.fecth_filter_by_date(props.userLanguage, props.userToken, startDate, endDate, params.status, params.branchOfficeId, \"\", onError, onSuccess)\n }\n\n const handlerSearchByText = () => {\n handleOpenBackdrop()\n props.actions.fecth_filter_by_date(props.userLanguage, props.userToken, \"\", \"\", params.status, params.branchOfficeId, filterText, onError, onSuccess)\n props.cleanUserProfile()\n }\n\n return setFilterText(e.target.value)}\n onClear={handleClear} filterText={filterText}\n onclickSearchByText={handlerSearchByText}\n onStartDateChange={handleStartDateChange}\n onEndDateChange={handleEndDateChange}\n onClickSearch={handleDateSearch}\n onExport={() => downloadCSV(props.listByStatus, excelConfiguration)}\n styles={classes.searchAlign}\n />;\n }, [filterText, props]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n \n \n
\n \n
\n \n \n \n \n \n \n \n \n {t('commonMessages.noData')}}\n />\n \n
\n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n userProfile: state.UserProfileReducer.list,\n listByStatus: state.TelematicsReducer.listOrders,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language,\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(telematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(TelematicsListByStatus))","import React, { useEffect, useState } from 'react'\n//*Material\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport CardContent from '@material-ui/core/CardContent'\nimport Divider from \"@material-ui/core/Divider\"\nimport Button from \"@material-ui/core/Button\"\nimport { makeStyles } from '@material-ui/core/styles'\nimport Tab from \"@material-ui/core/Tab\"\nimport TabContext from \"@material-ui/lab/TabContext\"\nimport TabList from \"@material-ui/lab/TabList\"\nimport TabPanel from \"@material-ui/lab/TabPanel\"\nimport { Backdrop, CircularProgress, Link } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport AppBar from \"@material-ui/core/AppBar\"\nimport DataTable from 'react-data-table-component'\nimport IconButton from '@material-ui/core/IconButton'\nimport MoreVert from '@material-ui/icons/MoreVert'\n//*antd\nimport Modal from 'antd/es/modal';\nimport Popover from 'antd/lib/popover'\n//*Styles and Assets\nimport { TelematicsStyles } from './TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\nimport PdfIcon from '../../assets/img/PdfIcon.svg'\n//*Redux\nimport { connect } from \"react-redux\"\nimport { useHistory } from 'react-router-dom'\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../actions/telematics/TelematicsActions'\nimport { Link as RouterLink } from 'react-router-dom'\n//*Components\nimport TopBarNav from '../common/TopBarNav'\nimport BreadcrumbsHistory from '../common/BreadcrumbsHistory'\nimport { customStyleSecondary } from '../common/CommonStyles'\nimport Constants from '../common/Constants.json'\n\nconst useStyles = makeStyles({\n stageButton: {\n backgroundColor: \"#003E5E\",\n color: \"white\"\n },\n denyButton: {\n backgroundColor: \"white\"\n },\n pdfButton: {\n backgroundColor: \"white\"\n },\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"initial\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n }\n})\n\nconst InstallationOrderDetails = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const localclass = useStyles();\n const history = useHistory()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const { match: { params } } = props;\n const [value, setValue] = useState(params.tabNumber);\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n useEffect(() => {\n handleOpenBackdrop()\n const newRoute = {\n path: '/telematics/InstalationDetails',\n linkLegend: t('telematicsDetail.serviceDetails'),\n urlParams: [{ key: 'branchOfficeId', value: props.match.params.branchOfficeId }, { key: 'instalationId', value: props.match.params.instalationId }, { key: 'tabNumber', value: Constants.orderDetailsTelematics.InstallationOrder }]\n }\n props.navigationActions.add_route(newRoute)\n props.actions.fecth_Installation_Order_Detail(props.userLanguage, props.userToken, props.match.params.branchOfficeId, props.match.params.instalationId, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleDownload = () => {\n props.actions.Download_Order_Detail_PDF(props.userLanguage, props.userToken, props.match.params.branchOfficeId, props.match.params.instalationId, onError, onSuccessSave)\n }\n\n const handleAcceptOrder = (accept) => {\n var acceptObj = {\n \"branchOfficeID\": Number(props.match.params.branchOfficeId),\n \"accept\": accept\n }\n\n props.actions.accept_Installation_order(props.userLanguage, props.userToken, props.match.params.instalationId, acceptObj, onError, onSuccessSave)\n }\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessSave = (data) => {\n if (data.success) {\n Modal.success({\n title: t('commonMessages.updatedSucc')\n });\n history.push(`/telematics/${props.match.params.branchOfficeId}`);\n }\n else {\n Modal.error({\n title: t('telematicsErrors.AcceptOrDeclineInstallationOrderError'),\n })\n }\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n const serviceColumns = [\n {\n name: t('telematicsDetail.serviceNumber'),\n selector: 'serviceRequestId',\n sortable: true,\n cell: row => row.serviceRequestId\n },\n {\n name: t('common.client'),\n selector: 'legalName',\n sortable: true,\n width: '250px',\n cell: row => row.legalName\n },\n {\n name: t('common.service'),\n selector: 'type_service',\n sortable: true,\n cell: row => row.type_service\n },\n {\n name: t('common.brand'),\n selector: 'brand',\n sortable: true,\n cell: row => row.brand\n },\n {\n name: t('common.model'),\n selector: 'model',\n sortable: true,\n cell: row => row.model\n },\n {\n name: \"VIN\",\n selector: 'vin',\n sortable: true,\n cell: row => row.vin\n },\n {\n name: t('common.status'),\n selector: 'nameStatusDesc',\n sortable: true,\n cell: row => row.nameStatusDesc\n },\n {\n name: t('telematicsDetail.rejectionComments'),\n selector: 'rejection_comments',\n sortable: true,\n cell: row => row.rejection_comments\n },\n {\n name: \"\",\n center: true,\n width: '60px',\n cell: row => (buttonForColumns(row))\n },\n {\n center: true,\n omit: true,\n cell: row => row.serviceRequestId\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n {props.installationDetail.nameStatus === \"EnProceso\"\n ?\n
\n \n \n {t('telematicsDetail.serviceDetails')}\n \n
\n \n \n {t('telematicsDetail.uploadEvidence')}\n \n
\n \n \n {t('telematicsDetail.serviceDetails')}\n \n
\n \n }>\n \n \n \n \n }\n \n )\n }\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n \n \n {t(`telematicsDashboard.${props.installationDetail.nameStatus}`)}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {t('telematicsDetail.instalationNumber')}\n {props.installationDetail.installationOrderId}\n \n \n {t('common.status')}\n {props.installationDetail.statusDesc}\n \n \n
\n \n \n \n \n \n \n {t('telematicsColumns.instalationDate')}\n {props.installationDetail.installationOrderDate}\n \n \n {t('common.creationDate')}\n {props.installationDetail.createDate}\n \n \n
\n \n \n
\n \n \n
\n {\n props.installationDetail.nameStatus === \"ConProveedor\"\n ?\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n :\n \n \n
\n \n \n \n \n \n }\n
\n \n \n
\n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.installationDetail.installationOrderServicesListDto && props.installationDetail.installationOrderServicesListDto.length < 1 && (\n
\n )\n }\n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n < br />\n \n \n \n {t(`telematicsDetail.serviceDetailsSingular`)}
\n \n \n \n \n \n {\n serviceDetails !== undefined\n ?\n \n
\n {t(`telematicsDetail.serviceInformation`)}
\n \n
\n \n {t('telematicsDetail.serviceNumber')}\n {serviceRequestId}\n \n \n {t('common.client')}\n {serviceDetails[0].legalName}\n \n \n
\n \n \n
\n
\n \n {t('common.creationDate')}\n {serviceDetails[0].createDate}\n \n \n {t('common.service')}\n {serviceDetails[0].type_service}\n \n \n {t('common.status')}\n {serviceDetails[0].nameStatusDesc}\n \n \n
\n \n \n
\n
\n {t(`telematicsDetail.unitInformation`)}
\n \n
\n \n {t('common.fleet')}\n {serviceDetails[0].fleet}\n \n \n {t('common.brand')}\n {serviceDetails[0].brand}\n \n \n {t('common.year')}\n {serviceDetails[0].modelYear}\n \n \n
\n \n \n
\n
\n \n {t('common.unit')}\n {serviceDetails[0].unitNumber}\n \n \n {t('common.model')}\n {serviceDetails[0].model}\n \n \n VIN\n {serviceDetails[0].vin}\n \n \n
\n \n \n
\n
\n {t(`telematicsDetail.contactInfo`)}
\n \n
\n \n {t('common.state')}\n {serviceDetails[0].stateProvince}\n \n \n {t('common.municipality')}\n {serviceDetails[0].county}\n \n \n {t('common.neighborhood')}\n {serviceDetails[0].town}\n \n \n {t('common.streetNumber')}\n {serviceDetails[0].installationAddress}\n \n \n
\n
\n \n {t('telematicsDetail.startTime')}\n {serviceDetails[0].startHour}\n \n \n {t('telematicsDetail.endTime')}\n {serviceDetails[0].endHour}\n \n \n {t('common.phone')}\n {serviceDetails[0].phone}\n \n \n {t('common.user')}\n {serviceDetails[0].user}\n \n \n
\n
\n \n
\n \n
\n \n \n \n \n \n {t('telematicsDetail.seriesNumber')}\n \n \n \n \n \n {t('telematicsDetail.serviceStatus')}\n \n }\n label={t('common.ended')}\n />\n }\n label={t('common.notEnded')}\n />\n \n \n \n
\n \n \n \n {t('common.comments')}\n \n \n \n \n
\n \n \n \n
\n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n phoneTypeList: state.TelematicsReducer.phoneTypesList,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n actions: bindActionCreators(TelematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(ServiceFinalization))","import React, { useEffect, useState } from 'react'\n//*Material\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Button from \"@material-ui/core/Button\"\nimport { makeStyles } from '@material-ui/core/styles'\nimport Tab from \"@material-ui/core/Tab\"\nimport TabContext from \"@material-ui/lab/TabContext\"\nimport TabList from \"@material-ui/lab/TabList\"\nimport TabPanel from \"@material-ui/lab/TabPanel\"\nimport { FormControl, Input, TextField } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport AppBar from \"@material-ui/core/AppBar\"\nimport IconButton from '@material-ui/core/IconButton'\nimport Divider from '@material-ui/core/Divider'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport DataTable from 'react-data-table-component'\nimport CircularProgress from \"@material-ui/core/CircularProgress\"\nimport Backdrop from '@material-ui/core/Backdrop'\n//*antd\nimport Modal from 'antd/es/modal';\n//*Styles and Assets\nimport { TelematicsStyles } from './TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\n//*Redux\nimport { connect } from \"react-redux\"\nimport { useHistory } from 'react-router-dom'\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../actions/telematics/TelematicsActions'\n//*Components\nimport TopBarNav from '../common/TopBarNav'\nimport BreadcrumbsHistory from '../common/BreadcrumbsHistory'\nimport { customStyleSecondary } from '../common/CommonStyles'\nimport UseForm from '../common/UseForm'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport ServiceFinalization from '../telematics/Evidences/ServiceFinalization'\n\nconst useStyles = makeStyles({\n cardHeader: {\n backgroundColor: \"#7a9bc2\",\n color: \"white\"\n },\n stageButton: {\n backgroundColor: \"#063452\",\n color: \"white\"\n },\n denyButton: {\n backgroundColor: \"white\"\n },\n pdfButton: {\n backgroundColor: \"white\"\n },\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"capitalize\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n },\n checked: {\n '&$checked': {\n color: \"#7a9bc2\"\n }\n }\n})\n\nconst TelematicsUploadEvidence = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const localclass = useStyles();\n const history = useHistory()\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [value, setValue] = useState(\"1\");\n const { match: { params } } = props\n const [uploadedFile, setUploadedFile] = useState(false)\n\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const initialFieldValues = {\n evidence: {}\n }\n\n const {\n values,\n handleInpuFileChange\n } = UseForm(initialFieldValues)\n\n useEffect(() => {\n handleOpenBackdrop()\n const newRoute = {\n path: '/telematics/UploadEvidence/',\n linkLegend: t('telematicsDetail.uploadEvidence'),\n }\n props.navigationActions.add_route(newRoute)\n props.actions.fetch_Evicence_Service_By_Id(props.userLanguage, props.userToken, params.serviceId, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (Object.keys(values.evidence).length !== 0) {\n setUploadedFile(true)\n } else {\n setUploadedFile(false)\n }\n }, [values]) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessSave = (response) => {\n handleCloseBackdrop()\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n props.actions.fetch_Evicence_Service_By_Id(props.userLanguage, props.userToken, params.serviceId, onError, onSuccess)\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\")\n )\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alert500')\n })\n break\n default:\n break\n }\n }\n }\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n const checkFileTypes = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['text/csv', 'application/pdf', 'image/png', 'image/jpeg', 'image/jpg',\n 'application/msword', 'image/svg+xml',\n 'application/vnd.ms-excel']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const handleSubmit = e => {\n if (uploadedFile) {\n e.preventDefault()\n handleOpenBackdrop()\n\n const formData = new FormData()\n formData.append('serviceId', params.serviceId)\n\n for (let file of values.evidence) {\n formData.append(\"evidence\", file);\n }\n\n props.actions.update_Service_Evidence(props.userLanguage, props.userToken, params.serviceId, formData, onError, onSuccessSave)\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const handleDelete = (evidenceId) => {\n handleOpenBackdrop()\n props.actions.delete_Evidence(props.userLanguage, props.userToken, params.serviceId, evidenceId, onError, onSuccessDelete)\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n props.actions.fetch_Evicence_Service_By_Id(props.userLanguage, props.userToken, params.serviceId, onError, onSuccess)\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n }\n\n const columns = [\n {\n name: t('telematicsDetail.fileName'),\n selector: 'fileName',\n sortable: true,\n cell: row => row.fileName\n },\n {\n name: t('collateralDetails.registerDate'),\n selector: 'creationDate',\n sortable: true,\n cell: row => row.creationDate\n },\n {\n name: \"\",\n selector: 'promoterCost',\n sortable: true,\n width: '150px',\n cell: row => showDeleteEvidence(row)\n }\n ]\n\n const showDeleteEvidence = (row) => {\n return (\n \n handleDelete(row.id)}>\n \n \n \n )\n }\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n \n \n {t(`telematicsDetail.uploadEvidence`)}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n {t('common.service')}\n \n \n \n
\n \n \n \n {t('telematicsDetail.addEvidence')}\n \n \n \n \n
\n \n \n \n
\n \n
\n \n {t('commonMessages.noData')}}\n />\n {\n props.evidences && props.evidences.length < 1 && (\n
\n )\n }\n \n \n \n \n \n \n \n \n \n \n
\n \n \n {t('telematicsInstallers.technicianName')}\n setName(e.target.value)} variant=\"outlined\" size=\"small\" fullWidth />\n \n
\n \n {t('common.email')}\n setEmail(e.target.value)} variant=\"outlined\" size=\"small\" fullWidth />\n \n \n
\n \n \n {t('common.telephoneNumber')}\n setPhone(e.target.value)}\n helperText={phone < 0 ? t('commonMessages.noLess') : ''}\n inputProps={{\n pattern: \"[0-9]\"\n }}\n variant=\"outlined\" size=\"small\" fullWidth />\n \n
\n \n {t('telematicsInstallers.phoneType')}\n {\n setPhoneType(newValue.id);\n }}\n fullWidth={true}\n size=\"small\"\n options={props.phoneTypeList}\n getOptionLabel={(option) => option.description}\n getOptionSelected={(option, value) => option.description === value.description}\n renderInput={(params) => }\n />\n \n \n
\n \n \n \n
\n \n )\n}\n\nconst mapStateToProps = state => ({\n technicianList: state.TelematicsReducer.technicianList,\n phoneTypeList: state.TelematicsReducer.phoneTypesList,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(TelematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(RegisterTechnician))","import React from 'react'\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport styled from 'styled-components';\nimport excelIcon from '../../assets/img/ExcelIcon.svg'\nimport { useTranslation } from 'react-i18next'\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 0px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n height: '32px',\n width: '32px',\n textAlign: 'center',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'white',\n color: '#7A9BC2',\n border: '1px solid #7A9BC2'\n}\n\nconst ExcelButton = {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n height: '32px',\n width: '22px',\n textAlign: 'right',\n alignItems: 'right',\n justifyContent: 'center',\n background: 'white',\n color: '#7A9BC2',\n border: '1px solid #7A9BC2'\n}\n\nconst TableFilterComponent = ({ filterText, onFilter, onClear, onExport }) => {\n const { t } = useTranslation();\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default TableFilterComponent\n","import React, { useEffect, useState, useMemo } from 'react'\n//*Material\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Card from '@material-ui/core/Card'\nimport CardContent from '@material-ui/core/CardContent'\nimport Button from \"@material-ui/core/Button\"\nimport { makeStyles } from '@material-ui/core/styles'\nimport { FormControl, TextField } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport DataTable from 'react-data-table-component'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport EditIcon from '@material-ui/icons/Edit'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport Dialog from '@material-ui/core/Dialog'\nimport CancelIcon from '@material-ui/icons/Cancel'\nimport { DialogContentText, DialogContent, DialogTitle, DialogActions } from '@material-ui/core'\n//*antd\nimport Modal from 'antd/es/modal';\n//*Toastify\nimport { ToastContainer, toast } from 'react-toastify'\nimport 'react-toastify/dist/ReactToastify.css'\n//*Styles and Assets\nimport { TelematicsStyles } from '../TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\n//*Redux\nimport { connect } from \"react-redux\"\nimport { useHistory } from 'react-router-dom'\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../../actions/telematics/TelematicsActions'\n//*Components\nimport { downloadCSV } from '../../common/Utils'\nimport TableFilterComponent from '../../common/TableFilterComponentTechnicians'\nimport { customStyleSecondary } from '../../common/CommonStyles'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\n\nconst useStyles = makeStyles({\n stageButton: {\n backgroundColor: \"#063452\",\n color: \"white\"\n },\n denyButton: {\n backgroundColor: \"white\"\n },\n cancelButton: {\n borderColor: \"#7a9bc2\"\n },\n deleteButton: {\n backgroundColor: \"#063452\",\n color: \"white\"\n },\n pdfButton: {\n backgroundColor: \"white\"\n },\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"capitalize\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n }\n})\n\nconst TelematicsTechnicians = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const localclass = useStyles();\n const history = useHistory()\n const [filterText, setFilterText] = useState('')\n const [open, setOpen] = useState(false)\n const [openDelete, setOpenDelete] = useState(false)\n\n const [deleteName, setDeleteName] = useState()\n const [deleteId, setDeleteId] = useState()\n\n const [oldName, setOldName] = useState()\n const [oldEmail, setOldEmail] = useState()\n const [oldPhone, setOldPhone] = useState()\n const [oldPhoneType, setOldPhoneType] = useState();\n const [oldPhoneTypeId, setOldPhoneTypeId] = useState();\n const [idTechnician, setIdTechnician] = useState([])\n\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const excelConfiguration = [\n {\n selector: 'name',\n label: t('telematicsInstallers.technicianName')\n },\n {\n selector: 'email',\n label: t('common.email')\n },\n {\n selector: 'phone',\n label: t('common.telephoneNumber')\n },\n {\n selector: 'phoneTypeDescription',\n label: t('telematicsInstallers.phoneType'),\n }\n ]\n\n const editTechnician = {\n \"name\": oldName,\n \"email\": oldEmail,\n \"phone\": oldPhone,\n \"idPhoneType\": oldPhoneTypeId\n }\n\n useEffect(() => {\n handleOpenBackdrop()\n const newRoute = {\n path: '/telematics/CatalogInstaller/',\n linkLegend: t('telematicsInstallers.technicianCatalog'),\n }\n props.navigationActions.add_route(newRoute)\n props.actions.filter_Technicians(props.userLanguage, props.userToken, props.match.params.branchOfficeId, filterText, onError, onSuccess)\n props.actions.fetch_Phone_Types(props.userLanguage, props.userToken, onError, onSuccess)\n return () => {\n\n }\n }, [filterText]) // eslint-disable-line react-hooks/exhaustive-deps\n\n //*First Render Functions\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n //*Delete Functions\n const handleOpenModalDelete = (row) => {\n setOpenDelete(true)\n setDeleteId(row.id)\n setDeleteName(row.name)\n }\n\n const handleCloseDelete = () => {\n setOpenDelete(false)\n }\n\n const handleDeleteTechnician = () => {\n handleOpenBackdrop()\n props.actions.delete_Technicians(props.userLanguage, props.userToken, deleteId, onError, onSuccessDelete)\n }\n\n const onSuccessDelete = () => {\n setOpenDelete(false)\n Modal.success({\n title: {t('commonMessages.deleteSuccesfully')}\n })\n props.actions.fetch_Technicians(props.userLanguage, props.userToken, props.match.params.branchOfficeId, onError, onSuccess)\n }\n\n //*Update Functions\n const handleOpenModal = (row) => {\n setOpen(true)\n setOldName(row.name)\n setOldEmail(row.email)\n setOldPhone(row.phone)\n setOldPhoneTypeId(row.idPhoneType)\n setOldPhoneType(row.phoneTypeDescription)\n setIdTechnician(row.id)\n }\n\n const handleClose = () => {\n setOpen(false)\n }\n\n const saveUpdate = () => {\n if (oldName !== undefined && oldEmail !== undefined && oldPhone !== undefined && oldPhoneType !== undefined) {\n props.actions.update_Technicians(props.userLanguage, props.userToken, idTechnician, editTechnician, onErrorUpdate, onSuccessUpdate)\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const onSuccessUpdate = () => {\n setOpen(false)\n Modal.success({\n title: t('commonMessages.updatedSucc')\n })\n props.actions.fetch_Technicians(props.userLanguage, props.userToken, props.match.params.branchOfficeId, onError, onSuccess)\n }\n\n //*Funtions Error & Navigation\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: {t('commonMessages.alert500')}\n })\n break\n default:\n break\n }\n }\n }\n\n const onErrorUpdate = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n toast.error(t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`), { className: classes.toastSuccess })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: {t('commonMessages.alert500')}\n })\n break\n default:\n break\n }\n }\n }\n\n const technicianColumns = [\n {\n name: t('telematicsInstallers.technicianName'),\n selector: 'name',\n sortable: true,\n cell: row => row.name\n },\n {\n name: t('common.telephoneNumber'),\n selector: 'phone',\n width: '250px',\n sortable: true,\n cell: row => row.phone\n },\n {\n name: t('common.email'),\n selector: 'email',\n sortable: true,\n cell: row => row.email\n },\n {\n name: \"\",\n center: true,\n width: '150px',\n cell: row => (buttonForColumns(row))\n },\n {\n center: true,\n omit: true,\n cell: row => row.supplierServiceID\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n \n handleOpenModal(row)}>\n \n \n \n \n handleOpenModalDelete(row)}>\n \n \n \n
\n )\n }\n\n const subHeaderComponentMemo = useMemo(() => {\n const handleClear = () => {\n handleOpenBackdrop()\n setFilterText('')\n props.actions.fetch_Technicians(props.userLanguage, props.userToken, props.match.params.branchOfficeId, onError, onSuccess)\n }\n\n return setFilterText(e.target.value)}\n onClear={handleClear} filterText={filterText}\n onExport={() => downloadCSV(props.technicianList, excelConfiguration)}\n />;\n }, [filterText, props]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n \n \n \n \n
\n \n {t('commonMessages.noData')}}\n />\n {\n props.technicianList && props.technicianList.length < 1 && (\n
\n )\n }\n \n \n \n
\n \n )\n}\n\nconst mapStateToProps = state => ({\n technicianList: state.TelematicsReducer.technicianList,\n phoneTypeList: state.TelematicsReducer.phoneTypesList,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(TelematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(TelematicsTechnicians))","import React, { useEffect, useState } from 'react'\n//*Material\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport { makeStyles } from '@material-ui/core/styles'\nimport Tab from \"@material-ui/core/Tab\"\nimport TabContext from \"@material-ui/lab/TabContext\"\nimport TabList from \"@material-ui/lab/TabList\"\nimport TabPanel from \"@material-ui/lab/TabPanel\"\nimport Container from '@material-ui/core/Container'\nimport AppBar from \"@material-ui/core/AppBar\"\n//*Styles and Assets\nimport { TelematicsStyles } from './TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\n//*Redux\nimport { connect } from \"react-redux\"\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../actions/telematics/TelematicsActions'\n//*Components\nimport TopBarNav from '../common/TopBarNav'\nimport BreadcrumbsHistory from '../common/BreadcrumbsHistory'\nimport RegisterTechnician from '../telematics/Technicians/RegisterTechnician'\nimport TechnicianList from './Technicians/TechnicianList'\n\nconst useStyles = makeStyles({\n stageButton: {\n backgroundColor: \"#063452\",\n color: \"white\"\n },\n denyButton: {\n backgroundColor: \"white\"\n },\n cancelButton: {\n borderColor: \"#7a9bc2\"\n },\n deleteButton: {\n backgroundColor: \"#063452\",\n color: \"white\"\n },\n pdfButton: {\n backgroundColor: \"white\"\n },\n appbar: {\n backgroundColor: \"White\",\n\n },\n tab: {\n backgroundColor: '#A5A5A5',\n '&.Mui-selected': {\n backgroundColor: '#789AC1'\n },\n borderTopRigthRadius: \"15%\",\n textTransform: \"capitalize\"\n },\n indicator: {\n backgroundColor: \"#7a9bc2\"\n }\n})\n\nconst TelematicsTechnicians = ({ classes, ...props }) => {\n const { t } = useTranslation()\n const localclass = useStyles()\n const [value, setValue] = useState(\"1\")\n\n useEffect(() => {\n const newRoute = {\n path: '/telematics/CatalogInstaller/',\n linkLegend: t('telematicsInstallers.technicianCatalog'),\n }\n props.navigationActions.add_route(newRoute)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n }\n\n return (\n \n
\n
\n
\n
\n
\n \n \n {t(`telematicsInstallers.technicianCatalog`)}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n \n \n \n
\n \n \n \n {t(`telematicsDetail.asignTechnician`)}
\n \n \n \n \n \n
\n \n \n {t('telematicsDetail.numberOrderInstalation')}\n \n \n
\n \n {t('telematicsInstallers.technicianName')}\n {\n setEmail(newValue.email)\n setPhone(newValue.phone)\n setInstallerId(newValue.id)\n }}\n fullWidth={true}\n size=\"small\"\n options={props.technicianList}\n getOptionLabel={(option) => option.name}\n getOptionSelected={(option, value) => option.name === value.name}\n renderInput={(params) => }\n />\n \n \n
\n \n \n {t('common.email')}\n \n \n
\n \n {t('common.telephoneNumber')}\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.invoiceRejectedList && props.invoiceRejectedList.length < 1 && (\n
\n )\n }\n \n )\n}\n\nconst mapStateToProps = state => ({\n invoiceRejectedList: state.TelematicsReducer.listRejectedInvoices,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(TelematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(Erros))","import React, { useEffect, useState } from 'react'\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Button from \"@material-ui/core/Button\"\nimport { FormControl } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DataTable from 'react-data-table-component'\nimport Input from '@material-ui/core/Input'\nimport { useHistory } from 'react-router-dom'\nimport GetAppIcon from '@material-ui/icons/GetApp'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport Divider from \"@material-ui/core/Divider\"\nimport { TelematicsStyles } from '../TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\nimport { connect } from \"react-redux\"\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../../actions/telematics/TelematicsActions'\nimport { customStyleSecondary } from '../../common/CommonStyles'\nimport Modal from 'antd/es/modal'\nimport UseForm from '../../common/UseForm'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\n\nconst ViaticInvoice = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const history = useHistory()\n const { match: { params } } = props\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [uploadedFiles, setUploadedFiles] = useState(false)\n\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n const initialFieldValues = {\n orderNumber: parseInt(params.instalationId),\n pdf: {},\n xml: {},\n excel: {}\n }\n\n const {\n values,\n handleInpuFileChange\n } = UseForm(initialFieldValues)\n\n useEffect(() => {\n handleOpenBackdrop()\n let isViatic = true\n props.actions.fetch_Viatic_Documents(props.userLanguage, props.userToken, params.instalationId, isViatic, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (Object.keys(values.xml).length !== 0 && Object.keys(values.pdf).length !== 0 && Object.keys(values.excel).length !== 0) {\n setUploadedFiles(true)\n } else {\n setUploadedFiles(false)\n }\n }, [values]) // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessSave = (response) => {\n handleCloseBackdrop()\n if (response.status) {\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\")\n )\n let isViatic = true\n props.actions.fetch_Viatic_Documents(props.userLanguage, props.userToken, params.instalationId, isViatic, onError, onSuccess)\n } else {\n if (response.message === null) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alertInvoiceInvalid')\n })\n } else {\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${response.message}`)\n })\n }\n }\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n let isViatic = true\n props.actions.fetch_Viatic_Documents(props.userLanguage, props.userToken, params.instalationId, isViatic, onError, onSuccess)\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n }\n\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: {t('commonMessages.alert500')}\n })\n break\n default:\n break\n }\n }\n }\n\n const checkFileTypePDF = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['application/pdf']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const checkFileTypeXML = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['text/xml', 'application/xml']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const checkFileTypeXLS = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const handleSubmit = e => {\n if (uploadedFiles) {\n e.preventDefault()\n handleOpenBackdrop()\n\n const formData = new FormData()\n formData.append('orderNumber', values.orderNumber)\n\n for (let file of values.pdf) {\n formData.append(\"pdf\", file);\n }\n for (let file of values.xml) {\n formData.append(\"xml\", file);\n }\n for (let file of values.excel) {\n formData.append(\"excel\", file);\n }\n\n props.actions.update_Invoice_Order(props.userLanguage, props.userToken, formData, onError, onSuccessSave)\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const handleDownload = (documentId) => {\n let isService = false\n props.actions.download_Viatic_Document(props.userLanguage, props.userToken, documentId, isService, onError)\n }\n\n const handleDelete = (documentId) => {\n handleOpenBackdrop()\n props.actions.delete_Viatic_Document(props.userLanguage, props.userToken, params.instalationId, documentId, onError, onSuccessDelete)\n }\n\n const invoiceColumns = [\n {\n name: t('telematicsDetail.fileName'),\n selector: 'fileName',\n width: '505px',\n sortable: true,\n cell: row => row.fileName\n },\n {\n name: t('collateralDetails.registerDate'),\n selector: 'createDate',\n width: '505px',\n sortable: true,\n cell: row => row.createDate\n },\n {\n name: \"\",\n center: true,\n cell: row => (buttonForInvoiceColumns(row))\n },\n {\n center: true,\n omit: true,\n cell: row => row.supplierServiceID\n }\n ]\n\n const buttonForInvoiceColumns = (row) => {\n return (\n \n \n handleDownload(row.id)}>\n \n \n \n \n handleDelete(row.id)}>\n \n \n \n
\n )\n }\n\n return (\n \n \n \n \n
\n \n \n {t('telematicsDetail.numberOrderInstalation')}\n {props.match.params.instalationId}\n \n
\n \n \n {t('telematicsDetail.invoiceDetails')}\n {t('collateralDetails.xlsFile')}\n \n \n \n \n
\n \n {t('telematicsDetail.invoicePerDiem')}\n \n \n \n \n {t('collateralDetails.xmlFile')}\n \n \n \n
\n \n \n {t('collateralDetails.pdfFile')}\n \n \n \n \n\n \n
\n \n \n\n
\n \n
\n\n \n {t('commonMessages.noData')}}\n />\n {\n props.listViaticDocuments && props.listViaticDocuments.length < 1 && (\n
\n )\n }\n \n \n )\n}\n\nconst mapStateToProps = state => ({\n listViaticDocuments: state.TelematicsReducer.listViaticDocuments,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(TelematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(ViaticInvoice))","import React, { useEffect, useState } from 'react'\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport Button from \"@material-ui/core/Button\"\nimport { FormControl } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DataTable from 'react-data-table-component'\nimport Input from '@material-ui/core/Input'\nimport GetAppIcon from '@material-ui/icons/GetApp'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\nimport Link from '@material-ui/core/Link'\nimport MoreVert from '@material-ui/icons/MoreVert'\nimport Divider from \"@material-ui/core/Divider\"\nimport Popover from 'antd/lib/popover'\nimport { TelematicsStyles } from '../TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\nimport { connect } from \"react-redux\"\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../../actions/telematics/TelematicsActions'\nimport { customStyleSecondary } from '../../common/CommonStyles'\nimport Modal from 'antd/es/modal'\nimport UseForm from '../../common/UseForm'\nimport { useHistory } from 'react-router-dom'\nimport { Backdrop, CircularProgress, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'\nimport InboxIcon from \"@material-ui/icons/Inbox\"\n\nconst ServiceInvoice = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const history = useHistory();\n const [openBackdrop, setOpenBackdrop] = useState(false);\n const [serviceId, setServiceId] = useState(undefined);\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') };\n const [uploadedFiles, setUploadedFiles] = useState(false);\n const [uploadedFileExcel, setUploadedFileExcel] = useState(undefined);\n\n const initialFieldValues = {\n //orderNumber: parseInt(params.instalationId),\n pdf: {},\n xml: {},\n excel: {}\n }\n\n const {\n values,\n handleInpuFileChange\n } = UseForm(initialFieldValues)\n\n useEffect(() => {\n handleOpenBackdrop()\n\n props.actions.fecth_Installation_Order_Detail(props.userLanguage, props.userToken, props.match.params.branchOfficeId, props.match.params.instalationId, onError, onSuccess)\n let isViatic = false\n props.actions.fetch_Excel_Documents(props.userLanguage, props.userToken, props.match.params.instalationId, isViatic, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (serviceId !== undefined) {\n props.actions.fetch_Invoice_Service_Documents(props.userLanguage, props.userToken, serviceId, onError, onSuccess)\n }\n }, [serviceId]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (Object.keys(values.xml).length !== 0 && Object.keys(values.pdf).length !== 0) {\n setUploadedFiles(true)\n } else {\n setUploadedFiles(false)\n }\n }, [values]) // eslint-disable-line react-hooks/exhaustive-deps\n\n //*First Render Functions\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n props.actions.fetch_Invoice_Service_Documents(props.userLanguage, props.userToken, serviceId, onError, onSuccess)\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n }\n\n const onSuccessSave = (response) => {\n handleCloseBackdrop()\n if (response.status) {\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\"))\n props.actions.fetch_Invoice_Service_Documents(props.userLanguage, props.userToken, serviceId, onError, onSuccess)\n }\n else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alertInvoiceInvalid')\n })\n }\n }\n\n const onSuccessSaveExcel = (response) => {\n handleCloseBackdrop()\n if (response.status) {\n Modal.success({\n title: t('commonMessages.savedSucc')\n })\n Array.from(document.querySelectorAll(\"input\")).forEach(\n input => (input.value = \"\"))\n setUploadedFileExcel(undefined)\n }\n else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.alertInvoiceInvalid')\n })\n }\n }\n\n //*Funtions Error & Navigation\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: {t('commonMessages.alert500')}\n })\n break\n default:\n break\n }\n }\n }\n\n // *Check File Types\n const checkFileTypePDF = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['application/pdf']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const checkFileTypeXML = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['text/xml', 'application/xml']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n handleInpuFileChange(event)\n }\n }\n }\n\n const checkFileTypeXLS = event => {\n let file = event.target.files[0]\n if (file != null) {\n let types = ['text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']\n\n if (types.every(type => file.type !== type)) {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.unsupportedFormat')\n })\n event.target.value = null\n return false\n } else {\n return true\n }\n }\n }\n\n const handleSubmit = e => {\n if (uploadedFiles) {\n e.preventDefault()\n handleOpenBackdrop()\n\n const formData = new FormData()\n formData.append('ServiceNumber', serviceId)\n\n for (let file of values.pdf) {\n formData.append(\"pdf\", file);\n }\n for (let file of values.xml) {\n formData.append(\"xml\", file);\n }\n props.actions.update_Invoice_Service(props.userLanguage, props.userToken, formData, onError, onSuccessSave)\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const onChangeHandlerExcel = event => {\n if (checkFileTypeXLS(event)) {\n setUploadedFileExcel(event.target.files[0])\n }\n }\n\n const handleSubmitExcel = e => {\n console.log(uploadedFileExcel)\n if (uploadedFileExcel !== undefined) {\n e.preventDefault()\n handleOpenBackdrop()\n\n const formData = new FormData()\n formData.append('orderNumber', props.match.params.instalationId)\n formData.append(\"excel\", uploadedFileExcel);\n\n props.actions.Upload_Excel_Invoice_To_Services(props.userLanguage, props.userToken, formData, onError, onSuccessSaveExcel)\n } else {\n Modal.error({\n title: 'Error',\n content: t('commonMessages.errorUndefined')\n })\n }\n }\n\n const handleDownload = (documentId) => {\n let isService = true\n props.actions.download_Viatic_Document(props.userLanguage, props.userToken, documentId, isService, onError)\n }\n\n const handleDownloadExcel = (documentId) => {\n let isService = false\n props.actions.download_Viatic_Document(props.userLanguage, props.userToken, documentId, isService, onError)\n }\n\n const handleDelete = (documentId) => {\n handleOpenBackdrop()\n props.actions.delete_Service_Document(props.userLanguage, props.userToken, serviceId, documentId, onError, onSuccessDelete)\n }\n\n const invoiceColumnsServices = [\n {\n name: t('telematicsDetail.fileName'),\n selector: 'fileName',\n width: '400px',\n sortable: true,\n cell: row => row.fileName\n },\n {\n name: t('telematicsDetail.registerDate'),\n selector: 'createDate',\n width: '400px',\n sortable: true,\n cell: row => row.createDate\n },\n {\n name: \"\",\n center: true,\n cell: row => (buttonForInvoiceColumns(row))\n },\n {\n center: true,\n omit: true,\n cell: row => row.supplierServiceID\n }\n ]\n\n const buttonForInvoiceColumns = (row) => {\n return (\n \n \n handleDownload(row.id)}>\n \n \n \n \n handleDelete(row.id)}>\n \n \n \n
\n )\n }\n\n const serviceColumns = [\n {\n name: t('telematicsDetail.serviceNumber'),\n selector: 'serviceRequestId',\n width: '525px',\n sortable: true,\n cell: row => row.serviceRequestId\n },\n {\n name: t('common.service'),\n selector: 'type_service',\n width: '525px',\n sortable: true,\n cell: row => row.type_service\n },\n {\n name: \"\",\n center: true,\n cell: row => (buttonForErrorColumns(row))\n },\n {\n center: true,\n omit: true,\n cell: row => row.supplierServiceID\n }\n ]\n\n const buttonForErrorColumns = (row) => {\n return (\n \n
\n \n setServiceId(row.serviceRequestId)}>\n {t('telematicsDetail.uploadInvoice')}\n \n
\n
\n {\n serviceId === undefined\n ?\n \n \n {t('telematicsDetail.numberOrderInstalation')}\n {props.match.params.instalationId}\n \n
\n \n \n \n {t('telematicsDetail.invoiceDetails')}\n {t('collateralDetails.xlsFile')}\n \n \n \n \n
\n \n \n \n
\n \n \n \n {\n props.listExcelDocuments && props.listExcelDocuments.map((item, index) => (\n handleDownloadExcel(item.id)}>\n \n \n \n \n \n ))\n }\n
\n \n \n\n \n
\n {t('commonMessages.noData')}}\n />\n {\n props.installationDetail.installationOrderServicesListDto && props.installationDetail.installationOrderServicesListDto.length < 1 && (\n
\n )\n }\n \n \n :\n \n
\n \n {t('telematicsDetail.numberOrderInstalation')}\n {props.match.params.instalationId}\n \n
\n \n {t('telematicsDetail.numberService')}\n {serviceId}\n \n \n
\n
\n \n \n {t('collateralDetails.xmlFile')}\n \n \n \n
\n \n \n {t('collateralDetails.pdfFile')}\n \n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n\n
\n
\n
\n\n
\n {t('commonMessages.noData')}}\n />\n {\n props.listInvoiceServiceDocuments && props.listInvoiceServiceDocuments.length < 1 && (\n
\n )\n }\n \n
\n
\n
\n
\n
\n
\n \n \n {t(`telematicsDetail.invoiceReception`)}
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n {t('telematicsInstallers.myInstallationOrders')}
\n \n \n \n \n {\n props.technicianOrdersList.map((itemDashboard, index) => {\n return (\n \n \n \n \n \n { }\n
\n
\n \n
\n \n \n
\n Total\n \n \n
\n {itemDashboard.numberOfOrders}\n
\n \n \n \n \n \n \n \n );\n }\n )\n }\n \n
\n \n {\n props.technicianOrdersList.length <= 0 &&\n {t('commonMessages.noData')}\n }\n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n technicianOrdersList: state.TelematicsReducer.technicianOrdersList,\n userProfile: state.UserProfileReducer.list,\n userlogin: state.LoginReducer.list,\n isUserAuthenticated: state.LoginReducer.isAuthenticated,\n userToken: state.LoginReducer.token,\n userLanguage: state.LoginReducer.language\n})\n\nconst mapDispatchToProps = dispatch => {\n return {\n tokenExpired: () => dispatch({ type: 'TOKEN_EXPIRED' }),\n cleanUserProfile: () => dispatch({ type: 'CLEAN_USER_PROFILE' }),\n actions: bindActionCreators(telematicsActions, dispatch),\n navigationActions: bindActionCreators(navigationActions, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withStyles(TelematicsStyles)(TelematicsTechnicianDashboard))\n","import React, { useEffect, useState } from 'react'\n//*Material\nimport Grid from '@material-ui/core/Grid'\nimport withStyles from '@material-ui/core/styles/withStyles'\nimport Typography from '@material-ui/core/Typography'\nimport { Backdrop, CircularProgress } from '@material-ui/core'\nimport Container from '@material-ui/core/Container'\nimport Divider from '@material-ui/core/Divider'\nimport DataTable from 'react-data-table-component'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport IconButton from '@material-ui/core/IconButton'\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever'\n//*antd\nimport Modal from 'antd/es/modal';\n//*Styles and Assets\nimport { TelematicsStyles } from './TelematicsStyles'\nimport { useTranslation } from 'react-i18next'\n//*Redux\nimport { connect } from \"react-redux\"\nimport { useHistory } from 'react-router-dom'\nimport { bindActionCreators } from 'redux'\nimport * as navigationActions from '../../actions/common/NavigationActions'\nimport * as TelematicsActions from '../../actions/telematics/TelematicsActions'\n//*Components\nimport TopBarNav from '../common/TopBarNav'\nimport BreadcrumbsHistory from '../common/BreadcrumbsHistory'\nimport { customStyleSecondary } from '../common/CommonStyles'\n\nconst TelematicsAsignTechnician = ({ classes, ...props }) => {\n const { t } = useTranslation();\n const history = useHistory()\n const { match: { params } } = props;\n const [openBackdrop, setOpenBackdrop] = useState(false);\n\n const paginationOptions = { rowsPerPageText: t('commonMessages.rowsPerPage'), rangeSeparatorText: t('common.to'), selectAllRowsItem: true, selectAllRowsItemText: t('common.all') }\n\n useEffect(() => {\n //handleOpenBackdrop()\n const newRoute = {\n path: '/telematics/UnasignTechnician/',\n linkLegend: t('telematicsDetail.unAsignTechnician'),\n urlParams: [{ key: 'instalationId', value: props.match.params.instalationId }]\n }\n props.navigationActions.add_route(newRoute)\n props.actions.fetch_Technicians_By_Order(props.userLanguage, props.userToken, params.instalationId, onError, onSuccess)\n return () => {\n\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n //*First Render Functions\n const handleCloseBackdrop = () => {\n setOpenBackdrop(false);\n }\n\n const handleOpenBackdrop = () => {\n setOpenBackdrop(true);\n }\n\n const handleDelete = (installerId) => {\n handleOpenBackdrop()\n props.actions.delete_Assigned_Technician(props.userLanguage, props.userToken, installerId, params.instalationId, onError, onSuccessDelete)\n }\n\n const onSuccess = () => {\n handleCloseBackdrop()\n }\n\n const onSuccessDelete = (response) => {\n handleCloseBackdrop()\n props.actions.fetch_Technicians_By_Order(props.userLanguage, props.userToken, params.instalationId, onError, onSuccess)\n Modal.success({\n title: t('commonMessages.deletedSucc')\n })\n }\n\n //*Funtions Error & Navigation\n const onError = (err) => {\n handleCloseBackdrop()\n if (err.response && err.response.status) {\n switch (err.response.status) {\n case 400:\n Modal.error({\n title: 'Error',\n content: t(`telematicsErrors.${err.response.data.errors.ErrorCodes[0]}`)\n })\n break\n case 401:\n props.tokenExpired()\n history.push('/login')\n break\n case 403:\n history.push('/forbidden')\n break\n case 500:\n Modal.error({\n title: 'Error',\n content: {t('commonMessages.alert500')}\n })\n break\n default:\n break\n }\n }\n }\n\n const technicianColumns = [\n {\n name: t('telematicsInstallers.technicianName'),\n selector: 'name',\n sortable: true,\n cell: row => row.name\n },\n {\n name: t('common.email'),\n selector: 'email',\n sortable: true,\n cell: row => row.email\n },\n {\n name: \"\",\n center: true,\n width: '150px',\n cell: row => (buttonForColumns(row))\n }\n ]\n\n const buttonForColumns = (row) => {\n return (\n \n \n handleDelete(row.id)}>\n \n \n \n
\n )\n }\n\n return (\n \n
\n
\n
\n
\n
\n \n \n \n
\n \n \n \n {t(`telematicsDetail.unAsignTechnician`)}
\n \n \n \n \n \n {t('commonMessages.noData')}}\n />\n {\n props.techniciansByOrder && props.techniciansByOrder.length < 1 && (\n
\n )\n }\n \n \n \n
\n \n
\n
\n