>\"\r\n aria-label=\"breadcrumb\"\r\n style={{ margin: \"14px\", fontSize: \"0.85rem\" }}\r\n >\r\n \r\n Home\r\n \r\n \r\n Workflow\r\n \r\n \r\n {\" \"}\r\n Workflow Steps\r\n \r\n \r\n {state.WorkflowName}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default WorkflowSteps;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport AppContext from \"../../../../App/AppContext\";\r\nimport {\r\n SecondaryButton,\r\n DefaultButton,\r\n TextBox,\r\n DialogContents,\r\n DialogTitles,\r\n Dialogs,\r\n DialogsActions,\r\n} from \"./../../../../Core/FormInput/index\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport \"./../../User Management/UserManagement.css\";\r\nimport {\r\n addOCRDocToProcess,\r\n} from \"./../../../../Core/Service/OcrDocuments-service\";\r\nimport { getBranches } from \"../../../../Core/Service/branches-service\";\r\n\r\nconst AddOCRDocToProcess = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const OCRDocToProcess = props.OCRDocToProcessList;\r\n const ocrDocId = props.ocrDocId;\r\n const [state, setState] = useState({\r\n InputLocation: \"\",\r\n OutputLocation: \"\",\r\n BranchID:null,\r\n OCRDocToProcessID: null,\r\n branches: [],\r\n IsDeleted: false,\r\n });\r\n useEffect(async () => {\r\n let res1 = await getBranches();\r\n if (res1.success) {\r\n const branches = res1.data.map((w) => ({\r\n id: w.id,\r\n name: w.branchShortName,\r\n }));\r\n setState((st) => ({ ...st, branches }));\r\n }\r\n if (OCRDocToProcess && OCRDocToProcess.id) {\r\n setState((st) => ({\r\n ...st,\r\n OCRDocToProcessID: OCRDocToProcess.id,\r\n InputLocation: OCRDocToProcess.inputLocation,\r\n OutputLocation: OCRDocToProcess.outputLocation,\r\n BranchID: OCRDocToProcess.branchID,\r\n IsDeleted:OCRDocToProcess.IsDeleted,\r\n }));\r\n }\r\n }, []);\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handelSubmit = async () => {\r\n let res = await addOCRDocToProcess(\r\n ocrDocId,\r\n state.OCRDocToProcessID,\r\n state.InputLocation,\r\n state.OutputLocation,\r\n state.BranchID,\r\n state.IsDeleted,\r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n return (\r\n \r\n \r\n \r\n {state.OCRDocToProcessID ? (\r\n Update OCR Document To Process\r\n ) : (\r\n Add OCR Document To Process\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Input Location\r\n \r\n \r\n \r\n Output Location\r\n \r\n \r\n \r\n Branch\r\n \r\n {state.branches.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddOCRDocToProcess;\r\n","import { IconButton, Typography } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport React, { useContext, useEffect, useState } from \"react\";\r\nimport AppContext from \"../../../../App/AppContext\";\r\nimport { DefaultButton, DialogContents, Dialogs, DialogsActions, DialogTitles, SecondaryButton, TextBox } from \"./../../../../Core/FormInput/index\";\r\nimport \"./../../User Management/UserManagement.css\";\r\nimport { getOCRDocumentFieldToProcess, getOCRDocumentFieldToProcessDropdown, addUpdateDocumentFieldToProcess } from \"../../../../Core/Service/OcrDocuments-service\";\r\nimport { Tooltip } from \"@material-ui/core\";\r\nimport RemoveCircleIcon from \"@material-ui/icons/RemoveCircle\";\r\nimport AddBoxIcon from \"@material-ui/icons/AddBox\";\r\n\r\nconst DocumentFieldToProcess = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n id: null,\r\n enabled: true,\r\n ocrDocumentFieldId: null,\r\n documentsList: [],\r\n errors: [],\r\n });\r\n\r\n const splitByList = [\r\n {\r\n displayName: `${'\\u00A0'}`,\r\n description: \" \"\r\n },\r\n {\r\n displayName: '_',\r\n description: '_'\r\n }\r\n ];\r\n\r\n const [inputList, setInputList] = useState([]);\r\n\r\n const handleInputChange = (e, index) => {\r\n const { name, value } = e.target;\r\n const list = [...inputList];\r\n\r\n list[index][name] = value;\r\n\r\n if (name === \"splitBy\" && value === \" \") {\r\n list[index].splitIndex = 1;\r\n }\r\n if (name === \"splitIndex\") {\r\n if (value > 9) {\r\n list[index].splitIndex = 9;\r\n }\r\n if (value < 1) {\r\n list[index].splitIndex = 1;\r\n }\r\n }\r\n\r\n setInputList(list);\r\n };\r\n const handleRemoveClick = (index) => {\r\n const list = [...inputList];\r\n list.splice(index, 1);\r\n setInputList(list);\r\n };\r\n const handleAddClick = () => {\r\n setInputList([\r\n ...inputList,\r\n {\r\n splitBy: ' ',\r\n splitIndex: 1,\r\n }\r\n ]);\r\n };\r\n\r\n useEffect(async () => {\r\n pulldata();\r\n pullDropdown();\r\n }, []);\r\n\r\n useEffect(() => {\r\n /* Called and Updated when scriptOnFileName state is set/changed. \r\n Do not modify that state unless this needs to be re-called */\r\n\r\n if (state?.scriptOnFileName) {\r\n /* convert the retrieved data into parsable JSON */\r\n const str = state.scriptOnFileName\r\n .replaceAll(\"'\", '\"')\r\n .replaceAll(\"]\", \"\")\r\n .replaceAll(\"[\", \"\")\r\n .replaceAll(\"method\", '\"method\"')\r\n .replaceAll(\"splitBy\", '\"splitBy\"')\r\n .replaceAll(\"parts\", '\"splitIndex\"')\r\n .replaceAll(\"by\", '\"splitBy\"');\r\n\r\n /* Parse JSON */\r\n const dataArr = JSON.parse(`[${str}]`);\r\n\r\n /* Remove un-needed field in JSON */\r\n dataArr.map((obj) => {\r\n delete obj.method;\r\n })\r\n\r\n /* Add JSON Objects to InputList (which adds visible rows) */\r\n setInputList([\r\n ...dataArr,\r\n ]);\r\n }\r\n }, [state?.scriptOnFileName]);\r\n\r\n const handleValidation = () => {\r\n let errors = {};\r\n let formIsValid = true;\r\n\r\n if (!state.ocrDocumentFieldId) {\r\n formIsValid = false;\r\n errors[\"ocrDocumentFieldId\"] = \"Document Field cannot be empty\";\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n errors: errors,\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n const pullDropdown = async () => {\r\n let resDropdown = await getOCRDocumentFieldToProcessDropdown(props.OCRDocToProcessList.id)\r\n\r\n if(resDropdown.success) {\r\n setState((st) => ({\r\n ...st,\r\n documentsList: resDropdown.data,\r\n }));\r\n }\r\n }\r\n\r\n const pulldata = async () => {\r\n let res = await getOCRDocumentFieldToProcess(props.OCRDocToProcessList.id);\r\n\r\n const data = res?.data[0];\r\n\r\n if (data.id) {\r\n setState((st) => ({\r\n ...st,\r\n id: data.id,\r\n enabled: !data.isDeleted,\r\n ocrDocumentFieldId: data.ocrDocumentFieldId,\r\n scriptOnFileName: data.scriptOnFileName,\r\n }));\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const handleSubmit = async () => {\r\n // Below is the format that is expected\r\n /* XENTRY [{method:'split',splitBy:'_',parts:[6]},{method:'split',splitBy:'_',parts:[7]},{method:'split',splitBy:'_',parts:[9]}] */\r\n /* OTHER [{method:'split',by:' ',parts:[1]}] */\r\n\r\n /* Re-Create the script string in format that is expected */\r\n let script = \"[\";\r\n inputList.map((x, i) => {\r\n script += `{method:'split',${inputList.length == 1 ? \"by\" : \"splitBy\"}:'${x.splitBy}',parts:[${x.splitIndex}]}` + ((i + 1) != inputList.length ? \",\" : \"]\");\r\n })\r\n\r\n const data = {\r\n Id: state.id ? state.id : null,\r\n OcrDocumentToProcessId: props.OCRDocToProcessList.id,\r\n OcrDocumentFieldId: state.ocrDocumentFieldId,\r\n IsDeleted: !state.enabled,\r\n ScriptOnFileName: script === \"[\" ? \"\" : script\r\n }\r\n\r\n if (handleValidation()) {\r\n let res = await addUpdateDocumentFieldToProcess(data);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n handleClose()\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n Update OCR Document Field\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Document Field\r\n \r\n {state.documentsList?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n {state.errors[\"ocrDocumentFieldId\"]}\r\n \r\n \r\n\r\n {inputList.length == 0 && (\r\n \r\n \r\n Add split data using the + icon\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {inputList.map((x, i) => (\r\n <>\r\n \r\n \r\n handleRemoveClick(i)} className=\"rightButton\">\r\n \r\n \r\n \r\n {inputList.length - 1 === i && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n\r\n \r\n Split By\r\n handleInputChange(e, i)}\r\n variant=\"outlined\"\r\n >\r\n {splitByList?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n Split Index\r\n handleInputChange(e, i)}\r\n type=\"number\"\r\n value={x.splitIndex}\r\n />\r\n \r\n \r\n ))}\r\n\r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n \r\n handleClick(\"enabled\", true)\r\n }\r\n >\r\n Yes\r\n \r\n \r\n \r\n \r\n handleClick(\"enabled\", false)\r\n }\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DocumentFieldToProcess;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport { getOcrDocumentToProcess, getOcrDocuments } from './../../../../Core/Service/OcrDocuments-service';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { SecondaryButton } from '../../../../Core/FormInput/index';\r\nimport AddOCRDocToProcess from './AddUpdateModal';\r\nimport DataGridComp from '../../../../Core/Grid';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport DocumentFieldToProcess from './DocumentFieldModal';\r\n\r\nconst OcrDocumentToProcess = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n showDocumentFieldModal: false,\r\n branches: [],\r\n OCRName: ''\r\n });\r\n const { showToast } = useContext(AppContext);\r\n const ocrDocId = props.match.params.ocrDocId;\r\n const name = props.match.params.name;\r\n\r\n useEffect(async () => {\r\n pullOCRDocToprocessAndUpdateState();\r\n }, []);\r\n\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'inputLocation',\r\n headerName: 'Input Location',\r\n flex: 1\r\n },\r\n {\r\n field: 'outputLocation',\r\n headerName: 'Output Location',\r\n flex: 1\r\n },\r\n {\r\n field: 'branch',\r\n headerName: 'Branch',\r\n flex: 0.6\r\n }\r\n ];\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n handleDocumentFieldModal(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const pullOCRDocToprocessAndUpdateState = async () => {\r\n let result = await getOcrDocumentToProcess(ocrDocId);\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data,\r\n show: false\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n OCRDocToProcessList: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDocumentFieldModal = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showDocumentFieldModal: true,\r\n OCRDocToProcessList: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n OCRDocToProcessList: []\r\n };\r\n });\r\n };\r\n\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDocumentFieldModal: false }));\r\n refreshGrid && pullOCRDocToprocessAndUpdateState();\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No OCR Document To process available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add OCR Document Process\r\n \r\n
\r\n\r\n {state.show ?
: null}\r\n {state.showDocumentFieldModal ?
: null}\r\n\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n OCR Documents\r\n \r\n \r\n OCR Document To Process\r\n \r\n \r\n {name}\r\n \r\n \r\n
\r\n
No OCR Document Field available
\r\n \r\n );\r\n }\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullOcrDocumentFieldAndUpdateState();\r\n };\r\n return (\r\n \r\n
\r\n \r\n Add OCR Document Field\r\n \r\n
\r\n {state.show ?
: null}\r\n\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n OCR Documents\r\n \r\n \r\n OCR Document Field\r\n \r\n \r\n {state.OCRName}\r\n \r\n \r\n
\r\n
No Web Form available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Web Form\r\n \r\n
\r\n {state.show ?
: null}\r\n {state.showDel ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Web Forms\r\n \r\n \r\n
\r\n
\r\n Background Colour\r\n
\r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n backgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n
\r\n \r\n \r\n \r\n Text Colour\r\n
\r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n textColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n
\r\n \r\n \r\n } label=\"Active?\" />\r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddReturnReasonModal;\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { SecondaryButton } from \"../../../../Core/FormInput/index\";\r\nimport { DataGrid, GridOverlay } from \"@material-ui/data-grid\";\r\nimport EditOutlinedIcon from \"@material-ui/icons/EditOutlined\";\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\nimport AppContext from \"../../../../App/AppContext\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Breadcrumbs from \"@material-ui/core/Breadcrumbs\";\r\nimport { getByWorkflowIdAndHeaderId } from \"../../../../Core/Service/returnReason-service\";\r\nimport AddReturnReasonModal from \"./AddReturnReasonModal\";\r\nimport { getWorkflows } from \"../../../../Core/Service/workflow-service\";\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles =(props)=> makeStyles((thems) => {\r\n return ({\r\n ...props\r\n })\r\n});\r\n\r\nconst ReturnReason = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n ReturnReasonId: null,\r\n ReturnReasonDetails: [],\r\n workflowList: [],\r\n });\r\n const { showToast } = useContext(AppContext);\r\n const WorkflowID = props.match.params.workflowId;\r\n useEffect(async () => {\r\n pullReturnReasonAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n const ReturnReason_id = params.value.row.id;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n ReturnReasonId: ReturnReason_id,\r\n ReturnReasonDetails: params.value.row,\r\n };\r\n return nst;\r\n });\r\n };\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n var colorCodeObj = {};\r\n state.rows.forEach(c => {\r\n colorCodeObj[[c.id]] = {\r\n background: c.returnReasonColourCode,\r\n color: c.returnReasonTextColourCode\r\n };\r\n })\r\n const classes = useStyles(colorCodeObj)();\r\n\r\n const getClass = (params) => {\r\n if (params.row.returnReasonColourCode) {\r\n return classes[params.row.id]\r\n }\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: \"id\",\r\n headerName: \"ID\",\r\n width: 130,\r\n sortable: false,\r\n hide: true,\r\n },\r\n {\r\n field: \"\",\r\n headerName: \"Action\",\r\n sortable: false,\r\n width: 120,\r\n\r\n renderCell: (params) => ,\r\n },\r\n {\r\n field: \"returnReasonDescription\",\r\n headerName: \"Reason\",\r\n flex: 1,\r\n },\r\n {\r\n field: \"returnReasonNextWorkflowID\",\r\n headerName: \"Next Workflow\",\r\n flex: 1,\r\n valueGetter: (params) =>\r\n state.workflowList\r\n .filter((m) => params.value == m.id)\r\n .map((res) => {\r\n return res.workflowName;\r\n }),\r\n },\r\n {\r\n field: \"uniqIdentifier\",\r\n headerName: \"Unique Identifier\",\r\n flex: 1,\r\n },\r\n {\r\n field: \"returnReasonColourCode\",\r\n headerName: \"Background Colour\",\r\n flex: 1,\r\n },\r\n {\r\n field: \"returnReasonTextColourCode\",\r\n headerName: \"Text Colour\",\r\n flex: 1,\r\n }\r\n ].map((c) => ({ ...c, cellClassName: getClass }));\r\n\r\n const pullReturnReasonAndUpdateState = async () => {\r\n let result = await getByWorkflowIdAndHeaderId(WorkflowID);\r\n let result1 = await getWorkflows();\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.returnReasons.map((el) => ({\r\n ...el,\r\n id: el.returnReasonID,\r\n })),\r\n show: false,\r\n showDel: false,\r\n workflowList: result1.data,\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n ReturnReasonId: null,\r\n ReturnReasonDetails: null,\r\n };\r\n });\r\n };\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Return Reason data available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n {state.show ? (\r\n
\r\n ) : null}\r\n
\r\n Add Return Reason\r\n \r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Workflow\r\n \r\n \r\n Return Reasons\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n }\r\n onClose={handleClose}\r\n onOpen={handleOpen}\r\n open={open}\r\n direction={direction}\r\n color=\"secondary\"\r\n >\r\n {actions.map((m) => (\r\n \r\n ))}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Agree\r\n \r\n \r\n {props.handleCancel && (\r\n \r\n \r\n Cancel\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton, TextBox, DialogContents, DialogTitles, Dialogs, DialogsActions, DefaultButton } from '../../../Core/FormInput/index';\r\nimport Box from '@material-ui/core/Box';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Button, IconButton } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport '..//User Management/UserManagement.css';\r\nimport { AddStandardWriteUp, getStandardWriteUpById, AddStandardWriteUpUpdate } from '../../../Core/Service/techWriteUp-service';\r\nimport '../../technician/technician-app/TechnicianStyle.scss';\r\nimport SpeedDials from '../../../Core/Controls/SpeedDial';\r\nimport ConfirmationModal from '../../../Core/Controls/Dialog/ConfirmationModal';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\n\r\nconst AddUpdateModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const StandardWriteData = props.StandardWriteDataList;\r\n const [state, setState] = useState({\r\n complaint: '',\r\n cause: '',\r\n cure: '',\r\n Title: '',\r\n errors: {},\r\n StandardWriteUpID: null,\r\n isActive: true,\r\n languages: [],\r\n selectedLanguageCode: 'en',\r\n translationExistsY: [],\r\n translationExistsN: [],\r\n selectedData: '',\r\n selectedLanguages: []\r\n });\r\n\r\n useEffect(() => {\r\n if (StandardWriteData && StandardWriteData.id) {\r\n pullData();\r\n }\r\n }, []);\r\n\r\n const pullData = async () => {\r\n let result = await getStandardWriteUpById(StandardWriteData.id);\r\n let selectedData = result.data.standardWriteup.find((p) => state.selectedLanguageCode == p.languageCode);\r\n\r\n setState((st) => ({\r\n ...st,\r\n languages: result.data.languages,\r\n standardWriteupList: result.data.standardWriteup,\r\n StandardWriteUpID: StandardWriteData.id,\r\n TranslatedID: selectedData.id,\r\n complaint: selectedData.complaint,\r\n cause: selectedData.cause,\r\n cure: selectedData.cure,\r\n Title: selectedData.title,\r\n isActive: selectedData.isActive,\r\n selectedLanguages: []\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n translationExistsY: state.languages.filter((o) => o.translationExists == 'Y'),\r\n translationExistsN: state.languages\r\n .filter((o) => o.translationExists == 'N')\r\n .map((p) => {\r\n return {\r\n icon: `${p.languageCode.toUpperCase()}`,\r\n name: `${p.languageDescription}`,\r\n action: () => speedDialActionHandler(p)\r\n };\r\n })\r\n }));\r\n }, [state.languages]);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const speedDialActionHandler = (value) => {\r\n let tempSelectedLanguage = [...state.selectedLanguages];\r\n if (tempSelectedLanguage.indexOf(value.languageCode) === -1) {\r\n tempSelectedLanguage.push(value.languageCode);\r\n }\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst.showConfirmModal = true;\r\n nst.modalLaguage = value.languageDescription;\r\n nst.selectedLanguages = tempSelectedLanguage;\r\n nst.TranslatedID = null;\r\n return nst;\r\n });\r\n };\r\n\r\n const speedDialActionSubmitHandler = () => {\r\n handelSubmit(true);\r\n };\r\n\r\n const handleValidation = () => {\r\n let errors = {};\r\n let formIsValid = true;\r\n // if (!state.Title) {\r\n // formIsValid = false;\r\n // errors['Title'] = 'Title cannot be empty';\r\n // }\r\n if (!state.complaint) {\r\n formIsValid = false;\r\n errors['complaint'] = 'Complaint cannot be empty';\r\n }\r\n if (!state.cure) {\r\n formIsValid = false;\r\n errors['cure'] = 'Cure cannot be empty';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n return formIsValid;\r\n };\r\n const handelSubmit = async (flag) => {\r\n let tempLang = [];\r\n let res = '';\r\n if (flag && state.StandardWriteUpID) {\r\n tempLang = [...state.selectedLanguages];\r\n } else {\r\n tempLang.push(state.selectedLanguageCode);\r\n }\r\n if (handleValidation()) {\r\n let data = {\r\n Id: state.StandardWriteUpID,\r\n Title: state.Title,\r\n Complaint: state.complaint,\r\n Cause: state.cause,\r\n Cure: state.cure,\r\n isActive: state.isActive,\r\n Languages: tempLang,\r\n TranslatedID: state.TranslatedID || ''\r\n };\r\n if (state.StandardWriteUpID) {\r\n res = await AddStandardWriteUpUpdate(data);\r\n } else {\r\n res = await AddStandardWriteUp(data);\r\n }\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n !flag && props.onFormSubmit(true);\r\n flag && pullData();\r\n flag && confirmationModalClose();\r\n }\r\n showToast(res.message);\r\n }\r\n };\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n if (StandardWriteData.id) {\r\n let selectedId = state.standardWriteupList.findIndex((p) => state.selectedLanguageCode == p.languageCode);\r\n\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n nst.standardWriteupList[selectedId][name] = value;\r\n return nst;\r\n });\r\n } else {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n }\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const confirmationModalClose = () => {\r\n setState((st) => ({ ...st, showConfirmModal: false }));\r\n };\r\n\r\n const TechBtnClick = (id) => {\r\n if (state.selectedLanguageCode != id) {\r\n let selectedData = state.standardWriteupList.find((p) => id == p.languageCode);\r\n\r\n setState((st) => ({\r\n ...st,\r\n selectedLanguageCode: id,\r\n TranslatedID: selectedData.id,\r\n complaint: selectedData.complaint,\r\n cause: selectedData.cause,\r\n cure: selectedData.cure,\r\n Title: selectedData.title,\r\n isActive: selectedData.isActive\r\n }));\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {state.StandardWriteUpID ? (\r\n Update Standard Technician Write-Up\r\n ) : (\r\n Add Standard Technician Write-Up\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.StandardWriteUpID && (\r\n \r\n \r\n {state.translationExistsY.map((m) => (\r\n \r\n TechBtnClick(m.languageCode)}\r\n disabled={m.isDisabled}\r\n >\r\n {m.languageDescription}\r\n \r\n \r\n ))}\r\n \r\n\r\n {state.translationExistsN.length > 0 && (\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n {/* \r\n \r\n Title\r\n \r\n \r\n {state.errors['Title']}\r\n */}\r\n \r\n \r\n Complaint\r\n \r\n \r\n {state.errors['complaint']}\r\n \r\n \r\n Cause\r\n \r\n \r\n \r\n \r\n Cure\r\n \r\n \r\n {state.errors['cure']}\r\n \r\n {state.StandardWriteUpID && (\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n handleClick('isActive', true)}\r\n >\r\n Yes\r\n \r\n \r\n \r\n handleClick('isActive', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n handelSubmit(false)}>\r\n Submit\r\n \r\n \r\n \r\n {state.showConfirmModal ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default AddUpdateModal;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport {\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogTitle,\r\n} from \"@material-ui/core\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { SecondaryButton, PrimaryButton } from \"../../../Core/FormInput\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport { DeleteStandardWriteUp } from \"../../../Core/Service/techWriteUp-service\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst DeleteStandardWriteUpModal = (props) => {\r\n const { hideModal,showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n StandardWriteUpName: \"\",\r\n });\r\n const StandardWriteUpID = props.StandardWriteUpID;\r\n const name = props.StandardWriteUpDetails;\r\n useEffect(async () => {\r\n setState((st) => {\r\n const nst = { ...st, StandardWriteUpName: name };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handleDelete = async () => {\r\n let res = await DeleteStandardWriteUp(StandardWriteUpID);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DeleteStandardWriteUpModal;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport AddUpdateModal from './AddUpdateModal';\r\nimport { getStandardWriteUp } from '../../../Core/Service/techWriteUp-service';\r\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\r\nimport DeleteStandardWriteUpModal from './DeleteStandardWriteUp';\r\nimport DataGridComp from '../../../Core/Grid';\r\n\r\nconst StandardTechWriteUp = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n branches: [],\r\n showDel: false,\r\n StandardWriteUpID: null\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullStandardWriteUpAndUpdateState();\r\n }, []);\r\n const getClass = (params) => {\r\n if (!params.row.isActive) {\r\n return 'Deleted-record';\r\n }\r\n };\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n renderCell: (params) => \r\n },\r\n { field: 'title', headerName: 'Title', flex: 1.5 },\r\n { field: 'complaint', headerName: 'Complaint', flex: 1.7 },\r\n {\r\n field: 'cause',\r\n headerName: 'Cause',\r\n flex: 3\r\n },\r\n {\r\n field: 'cure',\r\n headerName: 'Cure',\r\n flex: 4\r\n }\r\n ].map((c) => ({ ...c, cellClassName: getClass }));\r\n const handleDeleteStandardWriteUp = (params) => {\r\n const StandardWriteUp_id = params.value.row.id;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showDel: true,\r\n StandardWriteUpID: StandardWriteUp_id,\r\n StandardWriteUpDetails: params.value.row.title\r\n };\r\n return nst;\r\n });\r\n };\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n handleDeleteStandardWriteUp(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n const pullStandardWriteUpAndUpdateState = async () => {\r\n let result = await getStandardWriteUp('Y');\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.list\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n StandardWriteDataList: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n [props]: true,\r\n StandardWriteDataList: []\r\n };\r\n });\r\n };\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No record available
\r\n \r\n );\r\n }\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullStandardWriteUpAndUpdateState();\r\n };\r\n return (\r\n \r\n
\r\n handleAdd('show')} className=\"btnadd\">\r\n Add Standard Technician Write Up\r\n \r\n
\r\n {state.show ?
: null}\r\n {state.showDel ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Standard Technician Write-Up\r\n \r\n \r\n
\r\n
No Failure Notes available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Failure Notes\r\n \r\n
\r\n {state.show ?
: null}\r\n {state.showDel ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Failure Notes\r\n \r\n \r\n
\r\n
No parts available
\r\n \r\n );\r\n }\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n Workflow Steps List Option\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n List Name - {state.listName}\r\n \r\n\r\n \r\n Option Name\r\n \r\n \r\n\r\n \r\n Background Colour
\r\n \r\n setState((state) => ({\r\n ...state,\r\n backgroundColour: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n Text Colour
\r\n \r\n setState((state) => ({\r\n ...state,\r\n foregroundColour: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n \r\n Update\r\n \r\n \r\n \r\n\r\n \r\n item.MarkForDelete !== true)}\r\n disableColumnMenu={true}\r\n showColumnRightBorder={true}\r\n pageSize={100}\r\n />\r\n No Workflow Step List Option available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Workflow Steps List\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showOption ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Workflow Steps List\r\n \r\n \r\n
\r\n
No Work Accomplished Code available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Work Accomplished Code\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showDel ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Work Accomplished Code\r\n \r\n \r\n
\r\n
\r\n
\r\n {state.showLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n Branch \r\n
\r\n
\r\n \r\n {`${props.branchCode} - ${state.branchName}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {inputList.map((item, i) => (\r\n \r\n 
\r\n \r\n handleRemoveClick(i)}>\r\n Remove\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n {props.vehicleCategoryID ? 'Update' : 'Add'}\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {MonthShortNameList.map((p) => {\r\n return {p};\r\n })}\r\n \r\n Total\r\n \r\n \r\n \r\n \r\n \r\n \r\n Retail Units\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetRetail${p}`, state.rows[`salesTargetRetail${p}`])};\r\n })}\r\n {state.totals.salesTargetRetailTotal}\r\n \r\n \r\n \r\n Motab Units\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetMotab${p}`, state.rows[`salesTargetMotab${p}`])};\r\n })}\r\n {state.totals.salesTargetMotabTotal}\r\n \r\n \r\n \r\n Vehicle Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTarget${p}`, state.rows[`salesTarget${p}`])};\r\n })}\r\n {state.totals.salesTargetTotal}\r\n \r\n \r\n \r\n Vehicle Cost Of Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetCost${p}`, state.rows[`salesTargetCost${p}`])};\r\n })}\r\n {state.totals.salesTargetCostTotal}\r\n \r\n \r\n \r\n Vehicle Gross Profit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Vehicle Gross Profit %\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfitPercentage${p}`]};\r\n })}\r\n \r\n \r\n \r\n Vehicle Profit Per Unit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfitPerUnit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetAccessory${p}`, state.rows[`salesTargetAccessory${p}`])};\r\n })}\r\n {state.totals.salesTargetAccessoryTotal}\r\n \r\n \r\n \r\n Accessory Cost Of Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetAccessoryCost${p}`, state.rows[`salesTargetAccessoryCost${p}`])};\r\n })}\r\n {state.totals.salesTargetAccessoryCostTotal}\r\n \r\n \r\n \r\n Accessory Gross Profit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Gross Profit %\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfitPercentage${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Profit Per Unit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfitPerUnit${p}`]};\r\n })}\r\n \r\n \r\n \r\n PDI costs\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetPDICost${p}`, state.rows[`salesTargetPDICost${p}`])};\r\n })}\r\n {state.totals.salesTargetPDICostTotal}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SalesTargetScreen;\r\n","import { Checkbox, FormControlLabel, FormLabel, Grid, TextField } from '@material-ui/core';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useContext, useMemo, useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../Core/Controls/Tabs';\r\nimport { SecondaryButton, TextBox } from '../../../Core/FormInput';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport '../commonStyle.scss';\r\nimport {\r\n AddExpenseCategory,\r\n AddOtherIncomeCategory,\r\n getBudgetDropDown,\r\n getBudgetExpenses,\r\n getBudgetOtherIncomes,\r\n getSalesTargets,\r\n postBudgetExpenceData,\r\n postSetOtherIncomes\r\n} from '../../../Core/Service/branch-screen-service';\r\nimport SalesTargetScreen from './SalesTargetScreen';\r\nimport AppContext from '../../../App/AppContext';\r\n\r\nfunction CustomNoRowsOverlay() {\r\n return (\r\n \r\n No parts available
\r\n \r\n );\r\n}\r\n\r\nconst MonthShortNameList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\n\r\nconst ExpenseOtherIncomeComp = (props) => {\r\n const [state, setState] = useState({ rows: [], isActive: false, category: '', columnTotal: {} });\r\n const { showToast } = useContext(AppContext);\r\n\r\n const pullExpenseBudgetGridData = async () => {\r\n let res = await getBudgetExpenses(props.yearCode?.id, props.data.departmentID, props.branchCode);\r\n let temp = res.data.list.table.map((o) => {\r\n return { ...o, id: o.expenseCategoryID };\r\n });\r\n setState((st) => {\r\n return { ...st, rows: temp || [] };\r\n });\r\n };\r\n\r\n const pullOtherIncomesBudgetGridData = async () => {\r\n let res = await getBudgetOtherIncomes(props.yearCode?.id, props.data.departmentID, props.branchCode);\r\n let temp = res.data.list.table.map((o) => {\r\n return { ...o, id: o.otherIncomeCategoryID };\r\n });\r\n setState((st) => {\r\n return { ...st, rows: temp || [] };\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (props.fromPage == 'expense') {\r\n pullExpenseBudgetGridData();\r\n } else if (props.fromPage == 'otherIncome') {\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }, [props.yearCode?.id]);\r\n\r\n useEffect(() => {\r\n if (state.rows.length > 0) {\r\n let tempRows = [...state.rows];\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let tempObj = {};\r\n let grandTotal = 0;\r\n MonthShortNameList.forEach((r) => {\r\n let total = 0;\r\n tempRows.forEach((q) => {\r\n total += +q[`${frmpPage}${r}`];\r\n });\r\n tempObj[`${frmpPage}${r}`] = total;\r\n grandTotal += tempObj[`${frmpPage}${r}`];\r\n });\r\n tempObj.grandTotal = grandTotal;\r\n setState((st) => {\r\n return { ...st, columnTotal: tempObj };\r\n });\r\n }\r\n }, [state.rows]);\r\n\r\n const column = [\r\n {\r\n field: `${props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : ''}CategoryName`,\r\n headerName: 'Category',\r\n width: 300\r\n },\r\n ...MonthShortNameList.map((p) => {\r\n return {\r\n field: `${props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : ''}${p}`,\r\n headerName: `${p}`,\r\n align: 'right',\r\n renderCell: (params) => {\r\n if (params.row.id != 'Columntotal') {\r\n return (\r\n \r\n );\r\n }\r\n },\r\n flex: 1\r\n };\r\n })\r\n ];\r\n\r\n const new_columns = useMemo(() => {\r\n let tempCols = [...column];\r\n tempCols.push({\r\n field: ``,\r\n headerName: 'Total',\r\n flex: 1,\r\n align: 'right',\r\n renderCell: (params) => {\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let total = 0;\r\n MonthShortNameList.forEach((o) => {\r\n total += +params.row[`${frmpPage}${o}`];\r\n });\r\n return <>{total};\r\n }\r\n });\r\n\r\n return tempCols;\r\n }, [state.rows]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n };\r\n\r\n const changeQantity = (id, des, name) => (e) => {\r\n let changedArray = [...state.rows];\r\n let objIndex = state.rows.findIndex((x) => x.id === id);\r\n changedArray[objIndex][name] = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n rows: changedArray\r\n }));\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let res = {};\r\n let fromPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let data = {\r\n branchID: props.branchCode,\r\n year: props.yearCode?.id,\r\n expenseVM: state.rows.map((q) => {\r\n return {\r\n [`${fromPage}CategoryID`]: q[`${fromPage}CategoryID`],\r\n [`${fromPage}Jan`]: q[`${fromPage}Jan`],\r\n [`${fromPage}Feb`]: q[`${fromPage}Feb`],\r\n [`${fromPage}Mar`]: q[`${fromPage}Mar`],\r\n [`${fromPage}Apr`]: q[`${fromPage}Apr`],\r\n [`${fromPage}May`]: q[`${fromPage}May`],\r\n [`${fromPage}Jun`]: q[`${fromPage}Jun`],\r\n [`${fromPage}Jul`]: q[`${fromPage}Jul`],\r\n [`${fromPage}Aug`]: q[`${fromPage}Aug`],\r\n [`${fromPage}Sep`]: q[`${fromPage}Sep`],\r\n [`${fromPage}Oct`]: q[`${fromPage}Oct`],\r\n [`${fromPage}Nov`]: q[`${fromPage}Nov`],\r\n [`${fromPage}Dec`]: q[`${fromPage}Dec`]\r\n };\r\n })\r\n };\r\n\r\n if (props.fromPage == 'expense') {\r\n res = await postBudgetExpenceData(data);\r\n if (res.success) {\r\n showToast('Expense Target Save Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n } else if (props.fromPage == 'otherIncome') {\r\n res = await postSetOtherIncomes(data);\r\n if (res.success) {\r\n showToast('Other Income Target Save Successfully');\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }\r\n };\r\n\r\n const handleCategorySubmit = async () => {\r\n let res = {};\r\n let data = {\r\n branchID: props.branchCode,\r\n departmentID: props.data.departmentID,\r\n categoryName: state.category,\r\n categoryIncludeInProfit: state.isActive\r\n };\r\n\r\n if (props.fromPage == 'expense') {\r\n res = await AddExpenseCategory(data);\r\n if (res.success) {\r\n showToast('Expense Category Added Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n } else if (props.fromPage == 'otherIncome') {\r\n res = await AddOtherIncomeCategory(data);\r\n if (res.success) {\r\n showToast('Other Income Category Added Successfully');\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }\r\n };\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const TableFooter = () => {\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n return (\r\n \r\n \r\n Total\r\n \r\n {state.columnTotal &&\r\n MonthShortNameList.map((u) => {\r\n return (\r\n \r\n {state.columnTotal[`${frmpPage}${u}`]}
\r\n \r\n );\r\n })}\r\n \r\n {state.columnTotal?.grandTotal}
\r\n \r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {(props.fromPage == 'expense' || props.fromPage == 'otherIncome') && (\r\n \r\n \r\n {/* Category */}\r\n \r\n \r\n \r\n }\r\n label=\"Include in Profit/Loss?\"\r\n />\r\n \r\n \r\n \r\n Add\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n\r\n \r\n TableFooter()}\r\n minWidth={1250}\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nconst DepartmentDetailsComp = (props) => {\r\n const insideTabs = [\r\n ...(props.data.includeSales\r\n ? [{ label: 'Sales', body: }]\r\n : []),\r\n ...(props.data.includeExpenses\r\n ? [\r\n {\r\n label: 'Expense',\r\n body: \r\n }\r\n ]\r\n : []),\r\n ...(props.data.includeExpenses\r\n ? [\r\n {\r\n label: 'Other Income',\r\n body: \r\n }\r\n ]\r\n : [])\r\n ];\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst BranchTargetScreen = (props) => {\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n salesDepartments: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getBudgetDropDown();\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear = res.data.budgetYear.map((o) => {\r\n return { description: `${o.budgetYear}`, id: `${o.budgetYear}` };\r\n });\r\n newSt.salesDepartments = res.data.salesDepartments;\r\n\r\n return newSt;\r\n });\r\n }, []);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.salesDepartments.map((q) => {\r\n return { label: `${q.name}`, body: };\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default BranchTargetScreen;\r\n","import { Grid, FormLabel, Typography } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton, TextBox } from '../../../Core/FormInput';\r\nimport { getBranchCodes, setBranchCodes } from '../../../Core/Service/branch-screen-service';\r\n\r\nconst UpdateBranchCodesModal = (props) => {\r\n const [state, setState] = useState({\r\n BranchInvoiceEmail: '',\r\n BranchContractBranchName: '',\r\n BranchRandMCodes: '',\r\n BranchWarrantyCodes: '',\r\n BranchCashCodes: '',\r\n BranchRectificationAccountCode: '',\r\n BranchServiceWarrantyWriteOffAccountCode: '',\r\n BranchPartsWarrantyWriteOffAccountCode: '',\r\n BranchConsumablesAccountCode: '',\r\n BranchMobiloVanAccountCode: '',\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleSubmit = async () => {\r\n const data = {\r\n BranchID: props.branchID,\r\n BranchInvoiceEmail: state.BranchInvoiceEmail ? state.BranchInvoiceEmail : '',\r\n BranchContractBranchName: state.BranchContractBranchName ? state.BranchContractBranchName : '',\r\n BranchRandMCodes: state.BranchRandMCodes ? state.BranchRandMCodes : '',\r\n BranchWarrantyCodes: state.BranchWarrantyCodes ? state.BranchWarrantyCodes : '',\r\n BranchCashCodes: state.BranchCashCodes ? state.BranchCashCodes : '',\r\n BranchRectificationAccountCode: state.BranchRectificationAccountCode ? state.BranchRectificationAccountCode : '',\r\n BranchServiceWarrantyWriteOffAccountCode: state.BranchServiceWarrantyWriteOffAccountCode ? state.BranchServiceWarrantyWriteOffAccountCode : '',\r\n BranchPartsWarrantyWriteOffAccountCode: state.BranchPartsWarrantyWriteOffAccountCode ? state.BranchPartsWarrantyWriteOffAccountCode : '',\r\n BranchConsumablesAccountCode: state.BranchConsumablesAccountCode ? state.BranchConsumablesAccountCode : '',\r\n BranchMobiloVanAccountCode: state.BranchMobiloVanAccountCode ? state.BranchMobiloVanAccountCode : '',\r\n }\r\n let res = await setBranchCodes(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast(\"Error occured.\")\r\n } else {\r\n showToast(\"Branch Codes updated successfully\")\r\n props.onClose()\r\n }\r\n }\r\n\r\n const pullAndUpdateState = async () => {\r\n let res = await getBranchCodes(props.branchID);\r\n if (res.success) {\r\n const data = res.data[0]\r\n setState((st) => ({\r\n ...st,\r\n BranchInvoiceEmail: data.branchInvoiceEmail,\r\n BranchContractBranchName: data.branchContractBranchName,\r\n BranchRandMCodes: data.branchRandMCodes,\r\n BranchWarrantyCodes: data.branchWarrantyCodes,\r\n BranchCashCodes: data.branchCashCodes,\r\n BranchRectificationAccountCode: data.branchRectificationAccountCode,\r\n BranchServiceWarrantyWriteOffAccountCode: data.branchServiceWarrantyWriteOffAccountCode,\r\n BranchPartsWarrantyWriteOffAccountCode: data.branchPartsWarrantyWriteOffAccountCode,\r\n BranchConsumablesAccountCode: data.branchConsumablesAccountCode,\r\n BranchMobiloVanAccountCode: data.branchMobiloVanAccountCode\r\n }));\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n pullAndUpdateState();\r\n }, []);\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Invoice Email\r\n \r\n \r\n\r\n \r\n Contract Branch Name\r\n \r\n \r\n\r\n \r\n RandM Codes\r\n \r\n \r\n\r\n \r\n Warranty Codes\r\n \r\n \r\n\r\n \r\n Cash Codes\r\n \r\n \r\n\r\n \r\n Rectification Account Code\r\n \r\n \r\n\r\n \r\n Service Warranty Write Off Account Code\r\n \r\n \r\n\r\n \r\n Parts Warranty Write Off Account Code\r\n \r\n \r\n\r\n \r\n Consumables Account Code\r\n \r\n \r\n\r\n \r\n Mobilo Van Account Code\r\n \r\n \r\n\r\n \r\n \r\n Note: Codes can be comma seperated i.e (1233,5232)\r\n \r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default UpdateBranchCodesModal;","import React, { useState, useEffect, useContext } from 'react';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport BranchModal from './BranchModal';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb/index';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { IconButton } from '@material-ui/core';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport { getAllBranch } from '../../../Core/Service/branch-screen-service';\r\nimport '../commonStyle.scss';\r\nimport BranchTargetScreen from './BranchTarget';\r\nimport AppContext from '../../../App/AppContext';\r\nimport TrackChangesIcon from '@material-ui/icons/TrackChanges';\r\nimport { Backup, Link } from '@material-ui/icons';\r\nimport UpdateBranchCodesModal from './BranchCodeModal';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Branch', active: true }\r\n];\r\nconst styles = {\r\n gridImage: { width: 60, height: 'auto', backgroundSize: 'cover', marginTop: '5%' },\r\n gridImageContainer: { width: '100%', textAlign: 'center' }\r\n};\r\n\r\nfunction Braches(props) {\r\n let config = window._ENV_;\r\n let checkSite = window.location.host.includes('Nicol') ? true : false;\r\n\r\n const [state, setState] = useState({\r\n branchList: [],\r\n branchName: null,\r\n branchCode: '',\r\n id: null,\r\n loader: true,\r\n open: false\r\n });\r\n\r\n const { portalSettings } = useContext(AppContext);\r\n\r\n const stampRender = (data) => {\r\n let isBase64Image = data.row.branchStampImage.includes('base64');\r\n return (\r\n \r\n {data.row.branchStampImage ? (\r\n
\r\n ) : null}\r\n
\r\n \r\n btnHandler(params.value.row)}>\r\n {/* */}\r\n \r\n \r\n \r\n {portalSettings.portalSettingReportingEnabled && checkSite && (\r\n //Show this button to only Nicol site\r\n \r\n targetBtnHandler(params.value.row)}>\r\n \r\n \r\n \r\n )}\r\n \r\n codesBtnHandler(params.value.row)}>\r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const columns = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n renderCell: (params) => \r\n },\r\n { field: 'branchName', headerName: 'Branch Name', flex: 2 }\r\n // { field: 'branchStampImage', headerName: 'Stamps', flex: 2, renderCell: stampRender }\r\n ];\r\n\r\n const title = state.id ? 'Upload Stamps' : 'Add Stamps';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false, openTargetModal: false, openCodeModal: false }));\r\n res && pullData();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {state.open ? (\r\n closeModal(false)} fullWidth maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n {state.openTargetModal ? (\r\n closeModal(false)} fullWidth maxWidth=\"xl\" fullScreen>\r\n \r\n \r\n ) : null}\r\n {state.openCodeModal ? (\r\n closeModal(false)} maxWidth=\"lg\">\r\n closeModal(false)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default Braches;\r\n","import React, { useEffect, useMemo, useState, useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nimport './reportGijgoGrid.scss';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { makeStyles } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nimport { ExpBaseURL } from '../../../../Core/Service/http-calls';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { GetExcelFileFromEndpoint } from '../../../../Core/Service/reportService';\r\n\r\nvar grid1;\r\nvar $ = window.$;\r\n\r\nlet addCommas = (val) => {\r\n if (val === '') {\r\n return '';\r\n } else {\r\n return val ? `£${val?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n }\r\n};\r\n\r\nconst ReportGijgoGrid = (props) => {\r\n let isAction = props.columns.find((c) => c.field === 'action');\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n // gijgoGrid: {\r\n // '& .gj-grid-md th:first-of-type': {\r\n // // backgroundColor: 'red',\r\n // padding: (props) => {\r\n // return props.isAction ? '12px 5px 12px 5px' : '12px 15px 12px 10px';\r\n // }\r\n // }\r\n // }\r\n }));\r\n\r\n const classes = useStyles({ isAction: isAction });\r\n let token = AppStorage.getToken();\r\n const [state, setState] = useState({\r\n dropDownList: [],\r\n dropDownColNames: [],\r\n recordId: props.recordId,\r\n fileCount: `${props.fileCount || 0}`,\r\n configName: props.fileUploaderConfigName,\r\n columns: []\r\n });\r\n const [gridReload, setGridReload] = useState(new Date());\r\n\r\n const { hideModal, showToast } = useContext(AppContext);\r\n\r\n const gridFileCountRefresh = () => {\r\n setGridReload((st) => ({ ...st, gridReload: new Date() }));\r\n };\r\n\r\n useEffect(async () => {\r\n let dropDownColNames = [];\r\n let dropDownList = [];\r\n let finalColumns = [...props.columns].map((c) => {\r\n let tempObj = {\r\n ...c,\r\n // headerCssClass: 'gridHeader'\r\n align: c.align ? c.align : 'left'\r\n };\r\n let currencyRenderer = c.isCurrency;\r\n if (currencyRenderer) {\r\n tempObj.renderer = function (value, record) {\r\n return '' + formatters.CurrencyThousandSeparator(value) + '';\r\n };\r\n }\r\n if (c.isDropDown) {\r\n dropDownColNames.push(c);\r\n }\r\n return { ...tempObj };\r\n });\r\n\r\n if (dropDownColNames.length > 0) {\r\n dropDownList = typeof props.dropDownListProvider === 'function' ? await props.dropDownListProvider() : props.dropDownListProvider;\r\n }\r\n\r\n setState((st) => ({ ...st, columns: finalColumns, dropDownList: dropDownList, dropDownColNames: dropDownColNames }));\r\n }, [props.columns, gridReload, props.dropDownListProvider]);\r\n\r\n useEffect(async () => {\r\n if (state.columns.length > 0) {\r\n pullArchivedJobsAndUpdateState();\r\n }\r\n }, [state.columns, props.isReload, props.getUrl]);\r\n\r\n var GijgoFilterExtension = (function () {\r\n function DropdownFilter(grid, inputProperty, dropdown, changeValueConversion) {\r\n var id = $(grid).attr('id');\r\n var rowXPath = '#' + id + ' thead tr[data-role=\"filter\"]';\r\n var filterRow = $(rowXPath);\r\n if ($(filterRow).length == 1) {\r\n var colXPath = 'th [data-field=\"' + inputProperty.field + '\"]';\r\n var filterInput = $(filterRow).find(colXPath);\r\n if ($(filterInput).length) {\r\n $(filterInput).parent().addClass('grid-filter-select-th');\r\n $(dropdown).attr('data-field', inputProperty.field);\r\n $(filterInput).replaceWith(dropdown);\r\n $(dropdown).on('change', function () {\r\n ChangeFilter(grid, inputProperty, $(this), changeValueConversion);\r\n });\r\n }\r\n }\r\n }\r\n\r\n function ChangeFilter(grid, inputProperty, ddl, changeValueConversion) {\r\n if (changeValueConversion) {\r\n var propArr = changeValueConversion(ddl, inputProperty.field, grid);\r\n $(propArr).each(function (i, obj) {\r\n grid.data().params[obj.inputProperty.field] = obj.value;\r\n });\r\n if (propArr.length) {\r\n grid.reload();\r\n }\r\n } else {\r\n grid.data().params[`${inputProperty.queryParamName || inputProperty.field}`] = $(ddl).val();\r\n grid.reload();\r\n }\r\n }\r\n\r\n return {\r\n Dropdown: DropdownFilter\r\n };\r\n })();\r\n\r\n const pullArchivedJobsAndUpdateState = async () => {\r\n window.$(`#${'key1'}`).grid('destroy', true, true);\r\n\r\n const onSuccessFunc = function (response) {\r\n grid1.render(props.dataConverter(response));\r\n };\r\n\r\n grid1 = window.$(`#${'key1'}`).grid({\r\n primaryKey: 'Id',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/${props.getUrl}`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: onSuccessFunc\r\n },\r\n ...(props.minWidth !== null && { minWidth: 1350 }),\r\n ...(props.isGroupingId && { grouping: { groupBy: `${props.isGroupingId}` } }),\r\n // fixedHeader: true,\r\n // uiLibrary: 'bootstrap4',\r\n ...(!props.hideHeaderFilter && {\r\n headerFilter: {\r\n type: 'onchange'\r\n }\r\n }),\r\n ...(props.selectionType && { selectionType: props.selectionType }),\r\n ...(props.selectionMethod && { selectionMethod: props.selectionMethod }),\r\n // selectionType: 'multiple',\r\n // selectionMethod: 'checkbox',\r\n ...(props.detailTemplate && { detailTemplate: props.detailTemplate() }),\r\n columns: state.columns,\r\n ...(!props.hidePagination && { pager: { limit: 20, sizes: [20, 50, 100, 500, 1000, 2000, 5000] } })\r\n });\r\n\r\n if (state.dropDownColNames.length > 0) {\r\n state.dropDownColNames.forEach((q) => {\r\n var ddl = $('');\r\n\r\n state.dropDownList[`${q.listIdFromAPIResponse}`].forEach((k) => {\r\n let value = k[q.dropDownValueField || 'id'];\r\n if (value === undefined || value === null) {\r\n console.error(`${q.dropDownValueField} Invalid Property`);\r\n }\r\n ddl.append(``);\r\n });\r\n GijgoFilterExtension.Dropdown(grid1, q, ddl);\r\n });\r\n }\r\n\r\n let storedFiltterValue = props.FilterdParamsValues;\r\n props.columns.forEach((itm) => {\r\n if (storedFiltterValue) {\r\n var id = $(grid1).attr('id');\r\n var rowXPath = '#' + id + ' thead tr[data-role=\"filter\"]';\r\n var filterRow = $(rowXPath);\r\n if ($(filterRow).length == 1) {\r\n var colXPath = 'th [data-field=\"' + `${itm.field}` + '\"]';\r\n var filterInput = $(filterRow).find(colXPath);\r\n if ($(filterInput).length && storedFiltterValue[`${itm.field}`]) {\r\n $(filterInput).val(storedFiltterValue[`${itm.field}`]);\r\n grid1.data().params[itm.field] = storedFiltterValue[`${itm.field}`];\r\n }\r\n }\r\n }\r\n });\r\n\r\n grid1.on('dataBound', function (e, records, totalRecords) {\r\n let $tfoot = grid1.children('tfoot');\r\n let $thead = grid1.children('thead');\r\n if (props.hidePagination) {\r\n $tfoot.children('tr[data-role=\"pager\"]').remove();\r\n }\r\n if (props.hideFilterRow) {\r\n $thead.children('tr[data-role=\"filter\"]').remove();\r\n }\r\n if (props.isShowTotal) {\r\n let cal = state.columns.map((p) => {\r\n if (p.showColumnTotal) {\r\n let total = 0;\r\n records.forEach((u) => {\r\n total += +u[`${p.field}`];\r\n });\r\n return total;\r\n } else {\r\n return '';\r\n }\r\n });\r\n $tfoot.children('tr[data-role=\"TotalAmount\"]').remove();\r\n $tfoot.prepend(\r\n ` \r\n ${cal.map((y, i) => {\r\n if (i == 0) {\r\n return `| Total | `;\r\n }\r\n\r\n return `${addCommas(y)} | `;\r\n })}\r\n
`\r\n );\r\n }\r\n\r\n if (props.showCheckboxColFilterBtn) {\r\n // var SendMulitpleInvoiceslink = `\r\n // \r\n // `;\r\n // $('#key1').find('thead tr[data-role=\"filter\"] > th:nth-child(1)').html(SendMulitpleInvoiceslink);\r\n }\r\n if (props.showCheckboxColFilterBtn) {\r\n $('#key1')\r\n .find('thead tr[data-role=\"filter\"] > th:nth-child(1)')\r\n .html(() => props.showCheckboxColFilterBtn('#key1', records));\r\n }\r\n });\r\n\r\n grid1.on('rowDataBound', function (e, $row, id, record) {\r\n if (props.setRowStyleOnCondition) {\r\n let resColor = props.setRowStyleFunction(record);\r\n if (resColor) {\r\n for (var key in resColor) {\r\n $row.css(`${key}`, `${resColor[key]}`);\r\n }\r\n }\r\n }\r\n });\r\n\r\n grid1.on('cellDataBound', function (e, $displayEl, id, column, record) {\r\n if (props.setColStyleOnCondition) {\r\n let resColor = props.setColStyleFunction(record);\r\n if (resColor) {\r\n for (var key in resColor) {\r\n $displayEl.css(`${key}`, `${resColor[key]}`);\r\n }\r\n }\r\n }\r\n });\r\n\r\n grid1.reload();\r\n };\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n\r\n const data = grid1.data().params;\r\n\r\n let downloadURL = `${props.getUrl}${props.getUrl.includes('?') ? '&' : '?'}fileType=excel`;\r\n\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n\r\n await GetExcelFileFromEndpoint(downloadURL, props.downloadName);\r\n };\r\n\r\n return (\r\n \r\n \r\n {props.downloadName && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ReportGijgoGrid;\r\n","import {get, post, put } from './http-calls';\r\n\r\nexport const addBatteryResults = async(id, description) => {\r\n let res = await post(`/api/BatteryTestResults`, {\r\n BatteryTestResultCode: id,\r\n BatteryTestResultName: description,\r\n Mode: \"A\",\r\n }, { useAuthToken: true });\r\n return res;\r\n}\r\n\r\nexport const updateBatteryResults = async(id, description) => {\r\n let res = await post(`/api/BatteryTestResults`, {\r\n BatteryTestResultCode: id,\r\n BatteryTestResultName: description,\r\n Mode: \"U\",\r\n }, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getBatteryResults = async() => {\r\n let res = await get('/api/BatteryTestResults', { useAuthToken: true });\r\n return res;\r\n}","import React, { useContext, useState, useEffect } from \"react\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { TextBox, DialogContents, DialogTitles, Dialogs, SecondaryButton, DialogsActions} from \"../../../Core/FormInput\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport \"../User Management/UserManagement.css\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport {addBatteryResults,updateBatteryResults} from \"../../../Core/Service/BatteryResults-service\";\r\n\r\nconst AddBatteryResultsModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n id: \"\",\r\n description: \"\",\r\n errors: {},\r\n fields: {},\r\n });\r\n\r\n const BatteryResultDetails = props.BatteryResultsDetails;\r\n\r\n useEffect(async () => {\r\n const BatteryResultData = BatteryResultDetails;\r\n if (BatteryResultDetails) {\r\n setState((st) => ({\r\n ...st,\r\n id: BatteryResultData.id,\r\n description: BatteryResultData.batteryTestResultName,\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n let fields = state.fields;\r\n fields[name] = value;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value, fields: fields };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (handleValidation()) {\r\n if(BatteryResultDetails) {\r\n let res = await updateBatteryResults(\r\n state.id,\r\n state.description, \r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n } else {\r\n let res = await addBatteryResults(\r\n state.id,\r\n state.description, \r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n }\r\n }\r\n };\r\n\r\n const handleValidation = () => {\r\n let fields = state.fields;\r\n let errors = {};\r\n let formIsValid = true;\r\n if (!state.description) {\r\n formIsValid = false;\r\n errors[\"description\"] = \"Battery Result Name cannot be empty\";\r\n }\r\n if (state.description.length > 50) {\r\n formIsValid = false;\r\n errors[\"description\"] = \"description cannot be larger than 50 character\";\r\n }\r\n if (!state.id) {\r\n formIsValid = false;\r\n errors[\"id\"] = \"Battery Result Code cannot be empty\";\r\n }\r\n if (state.id.length > 1) {\r\n formIsValid = false;\r\n errors[\"id\"] = \"ID cannot be larger than one character\";\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors,\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {BatteryResultDetails ? (\r\n Update Battery Results\r\n ) : (\r\n Add Battery Result\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Battery Result Code\r\n \r\n \r\n {state.errors[\"id\"]}\r\n \r\n \r\n \r\n Battery Result Name\r\n \r\n \r\n {state.errors[\"description\"]}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddBatteryResultsModal;","import { IconButton } from '@material-ui/core';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport AddBatteryResultsModal from './AddUpdateModal';\r\nimport { getBatteryResults } from '../../../Core/Service/BatteryResults-service';\r\n\r\nconst BatteryResults = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n BatteryResultsDetails: [],\r\n showDel: false\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullBatteryResultsAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n BatteryResultsDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'id', //batteryTestResultCode\r\n headerName: 'Battery Result Code',\r\n width: 200\r\n },\r\n {\r\n field: 'batteryTestResultName',\r\n headerName: 'Battery Result Name',\r\n flex: 1\r\n }\r\n ];\r\n\r\n const pullBatteryResultsAndUpdateState = async () => {\r\n let result = await getBatteryResults();\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.list.map((w) => ({\r\n ...w,\r\n id: w.batteryTestResultCode,\r\n batteryTestResultName: w.batteryTestResultName\r\n })),\r\n show: false,\r\n showDel: false\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n BatteryResultsDetails: null\r\n };\r\n });\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Battery Results Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullBatteryResultsAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Battery Result\r\n \r\n
\r\n {state.show ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Battery Results\r\n \r\n \r\n
\r\n
No Video available
\r\n \r\n );\r\n }\r\n\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullVideosAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Video\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Video Categories\r\n \r\n \r\n {VideoCategoryDetails.videoCategoryDescription}\r\n \r\n \r\n {state.showLoader && (\r\n
\r\n Loading Videos\r\n \r\n )}\r\n
\r\n
No Video Categories available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false, VideoCategoryDetails: null, }));\r\n refreshGrid && pullVideoCategoriesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n {\r\n state.showVideoList ?
:\r\n <>\r\n
\r\n \r\n Add Video Category\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Video Categories\r\n \r\n \r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n \r\n Hide Work Accomplished and Failure Reasons?\r\n \r\n handleClick('workflowStepOptionsAsButtonGroup', true)}\r\n onNoClick={() => handleClick('workflowStepOptionsAsButtonGroup', false)}\r\n />\r\n \r\n \r\n \r\n Display Part Stock Status?\r\n \r\n handleClick('portalSettingDisplayPartStockStatus', true)}\r\n onNoClick={() => handleClick('portalSettingDisplayPartStockStatus', false)}\r\n />\r\n \r\n \r\n \r\n Workflow - unassigned technician job\r\n \r\n \r\n \r\n \r\n \r\n Grid Refresh Time (seconds)\r\n \r\n \r\n \r\n Tech Writeup Height\r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n Special Equipment Enabled?\r\n \r\n handleClick('portalSettingSpecialEquipmentEnabled', true)}\r\n onNoClick={() => handleClick('portalSettingSpecialEquipmentEnabled', false)}\r\n />\r\n */}\r\n\r\n \r\n \r\n Show Reg In Customer Rating Box?\r\n \r\n handleClick('showRegNumberInCustomerRatingBox', true)}\r\n onNoClick={() => handleClick('showRegNumberInCustomerRatingBox', false)}\r\n />\r\n \r\n\r\n \r\n \r\n Diagnostic Charges\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Quality Control\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n User Grid Columns\r\n \r\n
\r\n \r\n \r\n \r\n Action\r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n \r\n Model\r\n \r\n \r\n \r\n Customer Name\r\n \r\n \r\n \r\n Date Due In\r\n \r\n \r\n \r\n Date Due Out\r\n \r\n \r\n \r\n Return Reason\r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n Job Description\r\n \r\n \r\n \r\n Account\r\n \r\n \r\n \r\n Created By\r\n \r\n \r\n \r\n Assigned Date\r\n \r\n \r\n \r\n Time Taken\r\n \r\n \r\n \r\n Status\r\n \r\n \r\n \r\n Assigned Days\r\n \r\n \r\n \r\n Chassis Number\r\n \r\n \r\n \r\n Owning Operator\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Workflow Button Visibility\r\n \r\n
\r\n \r\n \r\n \r\n Customer\r\n \r\n \r\n \r\n \r\n }\r\n label=\"Show Notes Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show History Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Save Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Save & Complete Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return History Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show All Documents Button?\"\r\n />\r\n \r\n\r\n \r\n \r\n Auditor\r\n \r\n \r\n \r\n }\r\n label=\"Show Notes Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show History Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Save Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Save & Complete Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return History Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show All Documents Button?\"\r\n />\r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const CommunicatorModule = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n High Priority Job Colour\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n portalHighPriorityJobColour: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const tabs = [\r\n ...(portalSettings.portalSettingeWIPEnabled\r\n ? [\r\n {\r\n label: 'eWIP',\r\n body: \r\n }\r\n ]\r\n : []),\r\n // ...(portalSettings.portalSettingReportingEnabled\r\n // ? [\r\n // {\r\n // label: 'Reporting',\r\n // body: <>\r\n // }\r\n // ]\r\n // : null)\r\n ...(!portalSettings.portalSettingCommunicatorEnabled\r\n ? [\r\n {\r\n label: 'Communicator',\r\n body: \r\n }\r\n ]\r\n : [])\r\n ];\r\n return (\r\n \r\n
\r\n
\r\n \r\n Portal Title\r\n \r\n \r\n \r\n Call Us\r\n \r\n \r\n \r\n Opening Times\r\n \r\n \r\n \r\n Email Us\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Colors\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Header Text\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n HeaderTextColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Header Background\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n HeaderBackgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Menu bar Text\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n MenubarTextColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n\r\n \r\n \r\n \r\n Menu bar Background\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n MenubarBackgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Logos\r\n \r\n
\r\n \r\n \r\n Product Logo\r\n {state.productLogo ? (\r\n Remove Logo\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {'\\u{2800}'}\r\n {state.productLogo ? (\r\n \r\n ) : (\r\n Using default logo
\r\n )}\r\n \r\n \r\n \r\n Banner Image\r\n \r\n {state.bannerLogo ? (\r\n Remove Logo\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {'\\u{2800}'}\r\n {state.bannerLogo ? (\r\n \r\n ) : (\r\n Using default logo
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n Settings\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Display Top Navigation Counter?\r\n \r\n handleClick('navigationMenuActive', true)}\r\n onNoClick={() => handleClick('navigationMenuActive', false)}\r\n />\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n {\r\n props.history.push('/');\r\n }}\r\n >\r\n Cancel\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n File\r\n \r\n (typeof option === 'string' ? option : option.fileName)}\r\n renderInput={(params) => }\r\n />\r\n \r\n {state.errors[\"file\"]}\r\n \r\n \r\n \r\n Category\r\n \r\n \r\n {state.errors[\"category\"]}\r\n \r\n \r\n \r\n Key\r\n \r\n \r\n {state.errors[\"key\"]}\r\n \r\n \r\n \r\n Text\r\n \r\n \r\n {state.errors[\"text\"]}\r\n \r\n \r\n\r\n \r\n \r\n Translation Literals\r\n \r\n
\r\n \r\n\r\n \r\n Polish\r\n \r\n \r\n \r\n Romanian\r\n \r\n \r\n \r\n Hindi\r\n \r\n \r\n\r\n \r\n handleSubmit()}\r\n disabled={state.disableSubmit}\r\n >\r\n {state.editMode ? \"Save\" : \"Add\"}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n {props.counts || 0}\r\n {}\r\n
\r\n );\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n {count || 0}\r\n
\r\n \r\n {label}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {sublabel1}\r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n {sublabel2}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {props.counts || 0}\r\n {}\r\n
\r\n );\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n {count || 0}\r\n
\r\n \r\n {label}\r\n
\r\n \r\n \r\n {sublabel}\r\n
\r\n \r\n \r\n
\r\n {props.counts || 0}\r\n {}\r\n
\r\n );\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n {val ? <>£{val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n
\r\n \r\n {label}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {label_1}\r\n
\r\n \r\n\r\n \r\n \r\n \r\n {label_2}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n {label}\r\n
\r\n
\r\n \r\n \r\n Budget\r\n
\r\n \r\n {subValue_1 ? <>£{subValue_1.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n
\r\n \r\n \r\n \r\n Profit\r\n
\r\n \r\n {subValue_2 ? <>£{subValue_2.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n Profit\r\n
\r\n \r\n {subVal_1 ? <>£{subVal_1.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n
\r\n \r\n \r\n \r\n Budget\r\n
\r\n \r\n {subVal_2 ? <>£{subVal_2.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {' '}\r\n \r\n {\r\n handleTable(1);\r\n // setBtn(1);\r\n }}\r\n >\r\n COMBINED\r\n \r\n {\r\n handleTable(2);\r\n // setBtn(2);\r\n }}\r\n >\r\n NEW\r\n \r\n {\r\n // setBtn(3);\r\n handleTable(3);\r\n }}\r\n >\r\n USED\r\n \r\n \r\n \r\n \r\n Retail Volume\r\n \r\n \r\n Retail Profit\r\n \r\n \r\n Retail PPU\r\n \r\n \r\n {state.btn === 1 ? 'Total Volume' : state.btn === 2 ? 'Motability Profit' : state.btn === 3 ? 'Trade Profit' : 'Total Volume'}\r\n \r\n \r\n Total Profit\r\n \r\n \r\n Budget\r\n \r\n \r\n Difference (Profit:Budget)\r\n \r\n \r\n \r\n \r\n {state?.rows?.map((row, i) => {\r\n let Difference = row.totalProfit - row.budget;\r\n let volumeTotal = row.motabilityVolume + row.retailVolume + row.tradeVolume;\r\n return (\r\n \r\n \r\n {row.branch}\r\n \r\n {row.retailVolume}\r\n \r\n {row.retailProfit ? <>£{row.retailProfit.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n \r\n \r\n {row.retailPPU ? <>£{row.retailPPU.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n \r\n \r\n {state.btn === 1 ? (\r\n volumeTotal\r\n ) : state.btn === 2 ? (\r\n \r\n {row.motabilityProfit ? (\r\n <>£{row.motabilityProfit.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n ) : (\r\n <>£0.00\r\n )}\r\n \r\n ) : state.btn === 3 ? (\r\n {row.tradeProfit ? <>£{row.tradeProfit.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n ) : (\r\n 'N/A'\r\n )}\r\n \r\n \r\n {row.totalProfit ? <>£{row.totalProfit.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n \r\n \r\n {row.budget ? <>£{row.budget.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n \r\n \r\n {Difference ? <>£{Difference.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>£0.00}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import { ButtonGroup } from '@material-ui/core';\r\nimport { Button, Collapse, FormLabel, Grid, Hidden, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { Multiselect, TextBox, DatePicker } from '../../../Core/FormInput';\r\nimport { ProfitLossCard } from './budgetCard';\r\nimport { useState } from 'react';\r\nimport { ProfitTable } from './profitlossTable';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\n\r\nimport { getReportsDropdowns, getProfitLossbyID } from '../../../Core/Service/reportService';\r\nimport { FilterListIcon } from '@material-ui/icons/FilterList';\r\n\r\nconst ProfitLoss = () => {\r\n let startDate = moment().startOf('month').format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n branches: [],\r\n tableRow: [],\r\n branchList: [],\r\n franchise: [],\r\n groupIds: [],\r\n franchiseIds: []\r\n });\r\n\r\n const [temp, tempOption] = useState();\r\n\r\n const handleinput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n useEffect(async () => {\r\n let DropDownRes = await getReportsDropdowns();\r\n if (DropDownRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: DropDownRes.data.branch,\r\n franchise: DropDownRes.data.franchiseCode\r\n }));\r\n }\r\n }, []);\r\n useEffect(async () => {\r\n let res = await getProfitLossbyID(state.startDate, state.endDate, state.franchiseIds, state.groupIds);\r\n setState((st) => ({ ...st, branches: res?.data?.branches, tableRow: res?.data?.list }));\r\n }, [state.startDate, state.endDate, state.franchiseIds, state.groupIds]);\r\n\r\n const handleChanges = (event, value) => {\r\n tempOption((st) => ({ ...st, groupVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, groupIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangesfranch = (event, value) => {\r\n tempOption((st) => ({ ...st, franchiseVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchiseIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const [checked, setChecked] = useState(false);\r\n\r\n const handleChange = () => {\r\n setChecked((prev) => !prev);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Group\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n {state?.branches?.map((m) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {state.branchInvoice.map((m) => {\r\n return (\r\n <>\r\n \r\n {m.departmentDescription}\r\n \r\n \r\n \r\n Invoice Response Email\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditBranchScreen;\r\n","import React, { useMemo } from 'react';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from './../../internal/ReportsScreens/GijgoForReportsScreen/index';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport EditBranchScreen from './editBranch';\r\nimport { useState } from 'react';\r\nimport DialogComp from './../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n { field: 'shortName', sortable: false, title: `Short Name`, width: 150 },\r\n\r\n { field: 'name', sortable: false, title: `Branch` },\r\n { field: 'address1', sortable: false, title: `Address` },\r\n {\r\n field: 'town',\r\n sortable: false,\r\n title: `Town`,\r\n width: 150\r\n },\r\n\r\n { field: 'country', sortable: false, title: `County`, width: 120 }\r\n];\r\n\r\nconst baseUrl = 'Branches/GetAllBranches';\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Invoices', active: true },\r\n { name: `Branch`, active: true }\r\n];\r\n\r\nconst BranchesScreen = () => {\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n branchID: val.branchID\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const randerSortCol = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {record.shortName} ({record.branchCode})\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n let colSortName = col.find((m) => m.field === 'shortName');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n if (colSortName) {\r\n colSortName.renderer = randerSortCol;\r\n }\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n return (\r\n \r\n {state.showModal ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n ({\r\n records: res.data.list,\r\n records: res?.data?.list.map((p) => ({ ...p }))\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n // isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default BranchesScreen;\r\n","import { get, post } from './http-calls';\r\n\r\nexport let addInvoiceCustomer = async (data) => {\r\n let res = await post(`Customers/Add`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let editInvoiceCustomer = async (data) => {\r\n let res = await post(`Customers/Update`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let editInvoiceCustomerNote = async (data) => {\r\n let res = await post(`Customers/UpdateNote`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let addBranchStatusEmails = async (data) => {\r\n let res = await post(`BranchStatusEmails`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport let editBranchStatusEmails = async (data) => {\r\n let res = await post(`BranchStatusEmails/update`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport let getInvoiceCustomerById = async (custId) => {\r\n let data = await get(`Customers?Id=${custId}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchStatusEmailsById = async (InvoiceStatusId, BranchID) => {\r\n let data = await get(`BranchStatusEmails/GetById?InvoiceStatusId=${InvoiceStatusId}&BranchID=${BranchID}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let deleteBranchStatusEmailsById = async (InvoiceStatusId, BranchID) => {\r\n let data = await post(`BranchStatusEmails/Delete?InvoiceStatusId=${InvoiceStatusId}&BranchID=${BranchID}`, {}, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchStatusEmailsDropdown = async () => {\r\n let data = await get(`BranchStatusEmails/ScreenDropDown`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchInvoiceStatusDropdown = async (id) => {\r\n let data = await get(`Branches/GetBranchInvoiceStatus?BranchID=${id}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getDashboardForInvoice = async (data) => {\r\n let res = await get(`Invoices/Dashboard`, { useAuthToken: true });\r\n return res;\r\n};\r\n","export let validatePostCode = (postCode) => {\r\n // const pattern = /(^[A-Z]{1,2}[0-9]{1,2})([0-9][A-Z]{2}$)/i;\r\n const pattern =\r\n /([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9][A-Za-z]?))))\\s?[0-9][A-Za-z]{2})/gm;\r\n return pattern.test(postCode);\r\n};\r\n\r\nexport let emailValidation = (emailValidation) => {\r\n const pattern =\r\n /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n\r\n if (!emailValidation || emailValidation == null) return false;\r\n\r\n if (emailValidation.includes(',')) {\r\n let multiEmailTest = true;\r\n emailValidation.split(',').map((email) => {\r\n if (!pattern.test(email)) multiEmailTest = false;\r\n });\r\n return multiEmailTest;\r\n } else {\r\n return pattern.test(emailValidation);\r\n }\r\n};\r\n\r\nexport let singleEmailValidation = (emailValidation) => {\r\n const pattern =\r\n /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return pattern.test(emailValidation);\r\n};\r\n","import { Checkbox, FormControlLabel, FormLabel, Grid, InputLabel, TextField } from '@material-ui/core';\r\nimport React, { useEffect, useState, useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton, SelectBox, TextBox } from '../../../../Core/FormInput';\r\nimport {\r\n addBranchStatusEmails,\r\n editBranchStatusEmails,\r\n getBranchInvoiceStatusDropdown,\r\n getBranchStatusEmailsById,\r\n getBranchStatusEmailsDropdown\r\n} from '../../../../Core/Service/InvoiceScreen-service';\r\nimport { singleEmailValidation } from '../../../../Core/Service/StaticService';\r\n\r\nconst EditBranchStatusEmail = (props) => {\r\n const [state, setState] = useState({\r\n branchInvoice: [],\r\n branchID: props.branchID,\r\n errors: {},\r\n resData: {},\r\n branchName: '',\r\n invoiceStatus: '',\r\n email: '',\r\n emailContext: '',\r\n isActive: false,\r\n branchList: [],\r\n invoiceStatusList: []\r\n });\r\n\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const pullData = async () => {\r\n let res = await getBranchStatusEmailsById(props.InvoiceStatusId, props.BranchID);\r\n setState((st) => ({\r\n ...st,\r\n branchName: res.data?.list?.table[0]?.branchName,\r\n invoiceStatus: res.data?.list?.table[0]?.invoiceStatus,\r\n email: res.data?.list?.table[0]?.email,\r\n emailContext: res.data?.list?.table[0]?.emailContext,\r\n isActive: res.data?.list?.table[0]?.isActive || false\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let dropDownRes = await getBranchStatusEmailsDropdown();\r\n setState((st) => ({\r\n ...st,\r\n branchList: dropDownRes.data.branchList,\r\n invoiceStatusList: dropDownRes.data.invoiceStatusList\r\n }));\r\n if (props.InvoiceStatusId && props.BranchID) {\r\n pullData();\r\n }\r\n }, [props.InvoiceStatusId, props.BranchID]);\r\n\r\n // useEffect(async () => {\r\n // if (state.branchID) {\r\n // let dropDownRes = await getBranchInvoiceStatusDropdown(state.branchID);\r\n // console.log(dropDownRes, 'dropDownRes');\r\n // }\r\n // }, [state.branchID]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[name] = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { email } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!singleEmailValidation(email)) {\r\n errors.email = 'Invalid Email Id';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n let data = {\r\n branchID: props.BranchID || state.branchID,\r\n invoiceStatusId: props.InvoiceStatusId || state.invoiceStatusId,\r\n isActive: state.isActive,\r\n email: state.email,\r\n emailContext: state.emailContext\r\n };\r\n if (props.InvoiceStatusId && props.BranchID) {\r\n let res = await editBranchStatusEmails(data);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n } else {\r\n let res = await addBranchStatusEmails(data);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n return (\r\n \r\n \r\n {props.InvoiceStatusId && props.BranchID ? (\r\n \r\n \r\n {`Branch Name`}\r\n \r\n \r\n {`${state.branchName}`}\r\n \r\n \r\n ) : (\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {props.InvoiceStatusId && props.BranchID ? (\r\n \r\n \r\n {`Invoice Status`}\r\n \r\n \r\n {`${state.invoiceStatus}`}\r\n \r\n \r\n ) : (\r\n \r\n \r\n Status\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n Email\r\n \r\n {state.errors['email']}\r\n \r\n \r\n Email Body\r\n \r\n {state.errors['emailContext']}\r\n \r\n {props.InvoiceStatusId && props.BranchID && (\r\n \r\n } label=\"Active?\" />\r\n \r\n )}\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default EditBranchStatusEmail;\r\n","import React, { useContext, useMemo } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\n\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n\r\nimport { useState } from 'react';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditBranchStatusEmail from './editBranchStatusEmail';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever';\r\nimport ConfirmationModal from '../../../../Core/Controls/Dialog/ConfirmationModal';\r\nimport { deleteBranchStatusEmailsById } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport AppContext from '../../../../App/AppContext';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 90, filterable: false },\r\n { field: 'branchName', sortable: false, title: `Branch` },\r\n { field: 'invoiceStatus', sortable: false, title: `Status` },\r\n { field: 'email', sortable: false, title: `Email` },\r\n {\r\n field: 'emailAllow',\r\n sortable: false,\r\n title: `isActive`,\r\n width: 150\r\n }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Invoices', active: true },\r\n { name: `Branch Status Emails`, active: true }\r\n];\r\n\r\nconst baseUrl = 'BranchStatusEmails';\r\n\r\nconst BranchStatusEmail = () => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n branchID: val?.branchID,\r\n invoiceStatusId: val?.invoiceStatusId\r\n }));\r\n };\r\n const handleDelete = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showConfirmModal: true,\r\n branchID: val?.branchID,\r\n invoiceStatusId: val?.invoiceStatusId\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleEdit(record)}\r\n toolTipTitle=\"Edit Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n handleDelete(record)}\r\n toolTipTitle=\"Edit Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showModal = false;\r\n newSt.branchID = '';\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const deleteStatusEmailHandler = async () => {\r\n let res = await deleteBranchStatusEmailsById(state.invoiceStatusId, state.branchID);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n confirmationModalClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n const confirmationModalClose = (flag) => {\r\n let newSt = {};\r\n newSt.showConfirmModal = false;\r\n newSt.branchID = '';\r\n if (flag) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n return (\r\n \r\n {state.showModal ? (\r\n
handleClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showConfirmModal ? (\r\n
confirmationModalClose(false)} maxWidth=\"sm\">\r\n confirmationModalClose(false)}\r\n />\r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n \r\n handleEdit()}\r\n toolTipTitle=\"Add Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n
({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n // isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch Parameters\r\n \r\n \r\n \r\n \r\n {/* \r\n Branch Parameters\r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Update\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n Branch Parameters\r\n \r\n \r\n \r\n */}\r\n \r\n \r\n Booking Email Received request\r\n \r\n \r\n \r\n Cash Customer Message\r\n \r\n \r\n\r\n \r\n \r\n \r\n Overdue Reminder Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Job Approved Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Awaiting Parts Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n High Priority Jobs Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n Feedback Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n Technical Assistance Required Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Workshop Vehicles Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Awaiting Collection Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n VOR Status Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Site Vehicle Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BranchParametersScreen;\r\n","import { Button, ButtonGroup, FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { Multiselect, SecondaryButton, SelectBox, TextBox } from '../../../../Core/FormInput';\r\nimport { getAdminDropDown, getNotificationGroupsById, postNotificationGroups } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { MultiselectWithoutCheckbox } from '../../../../Core/FormInput/MultiSelect';\r\nimport { useContext } from 'react';\r\nimport AppContext from './../../../../App/AppContext';\r\nimport { FormatColorResetRounded } from '@material-ui/icons';\r\n\r\nconst AddCustomerGroups = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n customerList: [],\r\n customerGroupSiteVehiclesOnly: false,\r\n sendSMSUpdates: false,\r\n sendEmailNotifaction: false,\r\n customerGroupList: [],\r\n frequencyList: [],\r\n frequency: '',\r\n errors: {},\r\n ocrDocumentsList: [],\r\n ocrDocumentSelectIDs: []\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n customerGroups: [],\r\n ocrDocuments: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAdminDropDown();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n frequencyList: res.data.frequency,\r\n customerGroupList: res.data.customerGroupList,\r\n ocrDocumentsList: res.data?.ocrDocuments\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.customerGroupID) {\r\n pullDataById(props.customerGroupID);\r\n }\r\n }, []);\r\n\r\n const pullDataById = async (val) => {\r\n let res = await getNotificationGroupsById(val);\r\n if (res.success) {\r\n let data = res.data.list[0];\r\n let customerSelectIDs = res.data.customerSelectIDs;\r\n let ocrDocumentSelectIDs = res.data.ocrDocumentSelectIDs;\r\n setState((st) => ({\r\n ...st,\r\n customerGroupEmail: data.customerGroupEmail,\r\n customerGroupID: data.customerGroupID,\r\n customerGroupName: data.customerGroupName,\r\n customerGroupSiteVehiclesOnly: data.customerGroupSiteVehiclesOnly,\r\n feedbackEmailAddress: data.feedbackEmailAddress,\r\n frequency: data.frequency,\r\n sendEmailNotifaction: data.sendEmailNotifaction,\r\n sendSMSUpdates: data.sendSMSUpdates,\r\n sMSNumber: data.smsNumber,\r\n vORTimer: data.vorTimer,\r\n customerSelectIDs: customerSelectIDs,\r\n ocrDocumentSelectIDs: ocrDocumentSelectIDs\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (state.customerSelectIDs && state.customerGroupList.length > 0) {\r\n setSelectedData((st) => ({\r\n ...st,\r\n customerGroups: state.customerGroupList.filter((w) => state.customerSelectIDs.indexOf(w.id) > -1)\r\n }));\r\n }\r\n }, [state.customerSelectIDs, state.customerGroupList]);\r\n\r\n useEffect(() => {\r\n if (state.ocrDocumentSelectIDs && state.ocrDocumentsList.length > 0) {\r\n setSelectedData((st) => ({\r\n ...st,\r\n ocrDocuments: state.ocrDocumentsList.filter((w) => state.ocrDocumentSelectIDs.indexOf(w.id) > -1)\r\n }));\r\n }\r\n }, [state.ocrDocumentSelectIDs, state.ocrDocumentsList]);\r\n\r\n const handleYesNo = (name, val) => {\r\n setState((st) => ({ ...st, [name]: val }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const AutoWorkAccomplish = (event, value) => {\r\n setSelectedData((st) => ({\r\n ...st,\r\n customerGroups: value\r\n }));\r\n setState((st) => {\r\n const nst = { ...st, customerSelectIDs: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoOcrDocuments = (event, value) => {\r\n setSelectedData((st) => ({\r\n ...st,\r\n ocrDocuments: value\r\n }));\r\n setState((st) => {\r\n const nst = { ...st, ocrDocumentSelectIDs: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n const validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n\r\n let { customerGroupName, customerGroupEmail } = state;\r\n\r\n if (!customerGroupName) {\r\n isValid = false;\r\n errors.name = 'Notification Group is required';\r\n }\r\n if (!customerGroupEmail) {\r\n isValid = false;\r\n errors.email = 'Emails is required';\r\n }\r\n if (selectedData.customerGroups.length == 0) {\r\n isValid = false;\r\n errors.customer = 'Customers is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handlesubmit = async () => {\r\n if (validation()) {\r\n let data = {\r\n customerGroupID: props.customerGroupID || null,\r\n customerGroupName: state.customerGroupName || '',\r\n customerGroupEmail: state.customerGroupEmail || '',\r\n customerGroupSiteVehiclesOnly: state.customerGroupSiteVehiclesOnly || false,\r\n sendEmailNotifaction: state.sendEmailNotifaction || false,\r\n vORTimer: state.vORTimer || '',\r\n frequency: state.frequency || '',\r\n feedbackEmailAddress: state.feedbackEmailAddress || '',\r\n sendSMSUpdates: state.sendSMSUpdates || false,\r\n sMSNumber: state.sMSNumber || '',\r\n customerSelectIDs: state.customerSelectIDs || [],\r\n ocrDocumentSelectIDs: state.ocrDocumentSelectIDs || []\r\n };\r\n\r\n let res = await postNotificationGroups(data);\r\n if (res.success) {\r\n showToast(`Customer Group ${props.customerGroupID ? 'Updated' : 'Added'} successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Customer Group Failed to ${props.customerGroupID ? 'Update' : 'Add'}`);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Notification Group\r\n \r\n \r\n {state.errors.name}\r\n \r\n \r\n \r\n Email Updates\r\n \r\n \r\n \r\n Send Notification?\r\n
\r\n \r\n handleYesNo('sendEmailNotifaction', true)}\r\n >\r\n Yes\r\n \r\n handleYesNo('sendEmailNotifaction', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n\r\n \r\n Site Vehicles Only?\r\n
\r\n \r\n handleYesNo('customerGroupSiteVehiclesOnly', true)}\r\n >\r\n Yes\r\n \r\n handleYesNo('customerGroupSiteVehiclesOnly', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n Frequency\r\n \r\n \r\n \r\n VOR Alert (Hours)\r\n \r\n \r\n \r\n \r\n Emails\r\n \r\n \r\n {state.errors.email}\r\n \r\n \r\n Feedback Email \r\n \r\n \r\n \r\n \r\n \r\n \r\n SMS Updates\r\n \r\n\r\n \r\n \r\n Send SMS Updates?\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Mobile\r\n \r\n \r\n \r\n \r\n Customers\r\n \r\n \r\n {state.errors.customer}\r\n \r\n \r\n \r\n Documents\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.customerGroupID ? 'Update' : 'Submit'}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddCustomerGroups;\r\n","import { Container, FormLabel, Grid, Typography, InputLabel, ButtonGroup, Button } from '@material-ui/core';\r\nimport React from 'react';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\n\r\nimport { getCommunicatorSmsStatus, postCommunicatorSms } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect, useMemo } from 'react';\r\nimport { useState } from 'react';\r\nimport { useContext } from 'react';\r\n// import AppContext from '../../../../App/AppContext';\r\n// import BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton, SquareButton } from './../../../../Core/FormInput/AppButton';\r\nimport SelectBox from './../../../../Core/FormInput/SelectBox';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\n// import { Typography } from '@material-ui/core/Typography';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddCustomerGroups from './addCustomergroup';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\n\r\nconst baseColumns = [\r\n { title: 'Action', field: 'action', width: '5%', filterable: false },\r\n { title: 'Group Name', field: 'customerGroupName', width: '15%', sortable: true },\r\n\r\n {\r\n title: 'Group Email',\r\n field: 'customerGroupEmail',\r\n width: '75%',\r\n sortable: true\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Communicator', active: true },\r\n { name: 'Notifications Groups', active: true }\r\n];\r\n\r\nconst baseUrl = `CustomerGroups`;\r\n\r\nconst AdminVehicleNotification = () => {\r\n const [state, setState] = useState({\r\n showAddCustGroup: false\r\n });\r\n\r\n const handleAddCust = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddCustGroup: true,\r\n customerGroupID: val.customerGroupID,\r\n customerGroupName: val.customerGroupName,\r\n customerGroupEmail: val.customerGroupEmail\r\n }));\r\n };\r\n\r\n const handleClose = (res) => () => {\r\n setState((st) => ({\r\n ...st,\r\n showAddCustGroup: false,\r\n isReload: res ? new Date() : ''\r\n }));\r\n };\r\n\r\n const handleEdit = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleAddCust(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let tempColumn = [...baseColumns];\r\n\r\n let actionCol = tempColumn.find((m) => m.field === 'action');\r\n if (actionCol) {\r\n actionCol.renderer = handleEdit;\r\n }\r\n return tempColumn;\r\n }, []);\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n + Add Customer Group\r\n \r\n\r\n \r\n ({\r\n records: res.data?.list,\r\n total: res.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
\r\n\r\n {state.showAddCustGroup ? (\r\n
\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Status\r\n \r\n \r\n Include In Site Vehicles\r\n \r\n \r\n Include In VOR Vehicles\r\n \r\n \r\n Send Text\r\n \r\n \r\n SMS Text\r\n \r\n \r\n Action\r\n \r\n \r\n \r\n \r\n {state.showLoader ? null : state.updateSmsList.length > 0 ? (\r\n state.updateSmsList.map((m) => (\r\n \r\n \r\n {m.vehicleStatusDescription}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {m.smsTextMessage ? {m.smsTextMessage} : null} */}\r\n \r\n \r\n handleSubmit(m)} disabled={(!m.smsText && m.sendSMSUpdate) || !m.validation}>\r\n Update\r\n \r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n \r\n \r\n No Data Available
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Ticker Message\r\n \r\n \r\n {state.messages}\r\n \r\n \r\n \r\n {props.id ? 'Update' : 'Submit'}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddEditTicker;\r\n","import React, { useContext } from 'react';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport { getTickers, getTickerDelete } from '../../../Core/Service/KPI_message-service';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\nimport AddEditTicker from './addEditTicker';\r\nimport { Grid, Tooltip } from '@material-ui/core';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport AppContext from '../../../App/AppContext';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\n\r\nconst KipMessages = () => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n tickerList: [],\r\n showAddUpdate: false\r\n });\r\n\r\n const handleAddUpdate = (val) => {\r\n setState((st) => ({ ...st, showAddUpdate: true, id: val.id }));\r\n };\r\n\r\n const closeAddUpdate = (res) => {\r\n setState((st) => ({ ...st, showAddUpdate: false, id: '' }));\r\n res && pulldata();\r\n };\r\n\r\n const handledelete = async (val) => {\r\n let data = { id: val.id };\r\n let res = await getTickerDelete(val.id, data);\r\n if (res.success) {\r\n showToast(`Ticker Message Deleted successfully`);\r\n pulldata();\r\n } else {\r\n showToast(`Ticker Message Failed to Delete`);\r\n }\r\n };\r\n\r\n const handleEdit = (val) => {\r\n return (\r\n \r\n \r\n \r\n handleAddUpdate(val.row)} />\r\n \r\n \r\n \r\n \r\n handledelete(val.row)} />\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: handleEdit\r\n },\r\n {\r\n field: 'id',\r\n headerName: 'TICKER ID',\r\n width: 120,\r\n sortable: false,\r\n renderCell: (params) => {\r\n {params}
;\r\n }\r\n },\r\n {\r\n field: 'message',\r\n headerName: 'TICKER MESSAGE',\r\n flex: 1,\r\n renderCell: (params) => {\r\n {params}
;\r\n }\r\n }\r\n ];\r\n const pulldata = async () => {\r\n let res = await getTickers();\r\n if (res.success) {\r\n setState((st) => ({ ...st, tickerList: res.data.list }));\r\n }\r\n };\r\n useEffect(() => {\r\n pulldata();\r\n }, []);\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Ticker Messages', active: true }\r\n ];\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n + Add Ticker Message\r\n \r\n \r\n \r\n
\r\n {state.showAddUpdate ? (\r\n
closeAddUpdate(false)} title={!state.id ? `Add Ticker Message` : 'Update Ticker Message'} fullWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n Result List Description\r\n \r\n \r\n {state.errors['QCResultListDescription']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default EditResultList;\r\n","import { FormLabel, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useContext, useState } from 'react';\r\nimport { SketchPicker } from 'react-color';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { CustomColorPicker, DefaultButton, SecondaryButton, TextBox, YesNoButton } from '../../../../Core/FormInput';\r\nimport { addUpdateResultListOption } from '../../../../Core/Service/qc-service';\r\n\r\nconst EditResultOption = (props) => {\r\n const [state, setState] = useState({\r\n QCResultOptionID: props?.focusedRow?.qcResultOptionID ? props?.focusedRow?.qcResultOptionID : null,\r\n QCResultOptionDescription: props?.focusedRow?.qcResultOptionDescription ? props?.focusedRow?.qcResultOptionDescription : '',\r\n QCResultOptionActive: props?.focusedRow?.qcResultOptionActive ? props?.focusedRow?.qcResultOptionActive : true,\r\n QCResultOptionBackgroundColour: props?.focusedRow?.qcResultOptionBackgroundColour ? props?.focusedRow?.qcResultOptionBackgroundColour : '#ff0000',\r\n QCResultOptionForegroundColour: props?.focusedRow?.qcResultOptionForegroundColour ? props?.focusedRow?.qcResultOptionForegroundColour : '#ff0000',\r\n QCResultOptionDefectRequired: props.focusedRow?.qcResultOptionDefectRequired || false,\r\n QCResultOptionIsFailed: props.focusedRow?.qcResultOptionIsFailed || false,\r\n\r\n errors: []\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const onColorChange = (updatedColor, name) => {\r\n if (updatedColor) {\r\n setState((state) => ({\r\n ...state,\r\n [name]: updatedColor?.hex\r\n }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { QCResultOptionDescription } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (QCResultOptionDescription == null || QCResultOptionDescription == '') {\r\n errors.QCResultOptionDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n QCResultOptionID: state.QCResultOptionID ? state.QCResultOptionID : null,\r\n QCResultOptionDescription: state.QCResultOptionDescription,\r\n QCResultOptionActive: state.QCResultOptionActive ? state.QCResultOptionActive : true,\r\n QCResultOptionListID: props.QCResultListID,\r\n QCResultOptionBackgroundColour: state.QCResultOptionBackgroundColour ? state.QCResultOptionBackgroundColour : '',\r\n QCResultOptionForegroundColour: state.QCResultOptionForegroundColour ? state.QCResultOptionForegroundColour : '',\r\n QCResultOptionDefectRequired: state.QCResultOptionDefectRequired,\r\n QCResultOptionIsFailed: state.QCResultOptionIsFailed\r\n };\r\n let res = await addUpdateResultListOption(data);\r\n if (!res.success) {\r\n console.error(res);\r\n props.onClose(false);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('QC Results List option updated successfully');\r\n props.onClose(true);\r\n }\r\n }\r\n };\r\n\r\n const handleClick = (compon, val) => {\r\n setState((st) => ({\r\n ...st,\r\n [compon]: val\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Results List Option Description\r\n \r\n \r\n {state.errors['QCResultOptionDescription']}\r\n \r\n\r\n \r\n Background Colour\r\n onColorChange(m, 'QCResultOptionBackgroundColour')}\r\n />\r\n \r\n \r\n Foreground Colour\r\n onColorChange(m, 'QCResultOptionForegroundColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Is Required?\r\n \r\n \r\n handleClick('QCResultOptionDefectRequired', true)}\r\n onNoClick={() => handleClick('QCResultOptionDefectRequired', false)}\r\n />\r\n \r\n \r\n \r\n \r\n Is Failed?\r\n \r\n \r\n handleClick('QCResultOptionIsFailed', true)}\r\n onNoClick={() => handleClick('QCResultOptionIsFailed', false)}\r\n />\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n handleClick('QCResultOptionActive', true)}\r\n onNoClick={() => handleClick('QCResultOptionActive', false)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default EditResultOption;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditResultOption from './editResultOption';\r\n\r\nconst ResultListOptions = (props) => {\r\n const [state, setState] = useState({\r\n QCResultListID: props.QCResultListID,\r\n showAddEdit: false,\r\n\r\n focusedRow: null\r\n });\r\n\r\n useEffect(async () => {}, []);\r\n\r\n const handelColseModal = (val) => {\r\n console.log(val, 'valllllllllll');\r\n let newSt = {};\r\n if (val) newSt.isReload = new Date();\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: false,\r\n ...newSt\r\n }));\r\n };\r\n const handleAddEditModal = (val, row) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: true,\r\n focusedRow: row\r\n }));\r\n };\r\n const baseUrl = `QC/Options/${state.QCResultListID}`;\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '3%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcResultOptionID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcResultOptionDescription',\r\n title: `Description`,\r\n width: '30%'\r\n },\r\n {\r\n field: 'qcResultOptionBackgroundColour',\r\n title: `Foreground`,\r\n width: '15%'\r\n },\r\n {\r\n field: 'qcResultOptionForegroundColour',\r\n title: `Background`,\r\n width: '15%'\r\n },\r\n {\r\n field: 'qcResultOptionActive',\r\n title: `Active`,\r\n width: '10%'\r\n }\r\n ];\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Results List Options`, active: true }\r\n ];\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEditModal(true, record);\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n handleAddEditModal(true, null)} className=\"btnadd\">\r\n Add Results List Option\r\n \r\n \r\n \r\n\r\n \r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n handelColseModal(false)}\r\n fullWidth\r\n height=\"460px\"\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default ResultListOptions;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit, List } from '@material-ui/icons';\r\nimport React, { useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditResultList from './editResultList';\r\nimport ResultListOptions from './resultListOptions';\r\n\r\nconst QCResultsList = () => {\r\n const [state, setState] = useState({\r\n showAddEdit: false,\r\n showOptions: false,\r\n\r\n focusedRow: null\r\n });\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '10%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcResultListID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcResultListDescription',\r\n title: `Description`,\r\n width: '90%'\r\n },\r\n ];\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Results Lists`, active: true }\r\n ];\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n {\r\n handleOptions()\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n
\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n const handleOptions = () => {\r\n setState((st) => ({\r\n ...st,\r\n showOptions: true\r\n }))\r\n }\r\n\r\n const baseUrl = 'QC/Lists';\r\n\r\n return (\r\n \r\n {state.showOptions ?\r\n <>\r\n \r\n \r\n :\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Results List\r\n \r\n \r\n \r\n\r\n \r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n handleAddEdit(false)} fullWidth>\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n }\r\n
\r\n );\r\n}\r\nexport default QCResultsList;\r\n","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { DefaultButton, SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addUpdateQCItem, getDropdown } from '../../../../Core/Service/qc-service';\r\n\r\nconst AddEditItem = (props) => {\r\n const [state, setState] = useState({\r\n QCItemID: props.focusedRow?.qcItemID ? props.focusedRow?.qcItemID : null,\r\n QCItemVehicleTypeID: props.QCItemVehicleTypeID,\r\n QCItemTitle: props.focusedRow?.qcItemTitle ? props.focusedRow?.qcItemTitle : '',\r\n QCItemSequence: props.focusedRow?.qcItemSequence ? props.focusedRow?.qcItemSequence : 0,\r\n QCItemActive: props.focusedRow?.qcItemActive ? props.focusedRow?.qcItemActive : true,\r\n QCItemResultListID: props.focusedRow?.qcItemResultListID ? props.focusedRow?.qcItemResultListID : null,\r\n\r\n QCItemResultLists: [],\r\n errors: []\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { QCItemID, QCItemVehicleTypeID, QCItemTitle, QCItemSequence, QCItemActive, QCItemResultListID } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (QCItemTitle == null || QCItemTitle == '') {\r\n errors.QCItemTitle = 'QC Item Title field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n QCItemID: state.QCItemID || null,\r\n QCItemVehicleTypeID: state.QCItemVehicleTypeID,\r\n QCItemTitle: state.QCItemTitle,\r\n QCItemSequence: state.QCItemSequence,\r\n QCItemActive: state.QCItemActive,\r\n QCItemResultListID: state.QCItemResultListID\r\n };\r\n let res = await addUpdateQCItem(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('QC Item updated successfully');\r\n props.onClose();\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClick = (compon, val) => {\r\n setState((st) => ({\r\n ...st,\r\n [compon]: val\r\n }));\r\n };\r\n\r\n const pullDropdown = async () => {\r\n let result = await getDropdown();\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n QCItemResultLists: result.data,\r\n QCItemResultListID: st.QCItemResultListID ? st.QCItemResultListID : result.data[0].qcResultListID\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullDropdown();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n QC Item Title\r\n \r\n \r\n {state.errors['QCItemTitle']}\r\n \r\n\r\n \r\n Sequence\r\n \r\n \r\n\r\n \r\n QC Result List\r\n \r\n {state.QCItemResultLists?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n handleClick('QCItemActive', true)}\r\n >\r\n Yes\r\n \r\n \r\n \r\n handleClick('QCItemActive', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditItem;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport { getFranchiseHeaders } from '../../../../Core/Service/qc-service';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport AddEditItem from './AddEditItem';\r\n\r\nconst QCItems = () => {\r\n const [state, setState] = useState({\r\n franchiseHeaders: [],\r\n\r\n focusedFranchise: {},\r\n focusedQCItemID: null,\r\n showAddEdit: false\r\n });\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Items`, active: true }\r\n ];\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '3%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcItemID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcItemTitle',\r\n title: `Title`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcResultListDescription',\r\n title: `List`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcItemSequence',\r\n title: `Sequence`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcItemActive',\r\n title: `Active`,\r\n width: '22%'\r\n },\r\n ];\r\n\r\n const pullFranchiseHeaders = async () => {\r\n let result = await getFranchiseHeaders();\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n franchiseHeaders: result.data,\r\n focusedFranchise: result.data[0]\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullFranchiseHeaders();\r\n }, []);\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n let baseUrl = `qc/Items/${state.focusedFranchise.letterIdentifier}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add QC Item\r\n \r\n \r\n \r\n\r\n
\r\n {state.franchiseHeaders.map((franchise) => {\r\n return (\r\n \r\n setState((st) => ({ ...st, focusedFranchise: franchise }))}\r\n >\r\n {franchise.franchiseName}\r\n \r\n \r\n )\r\n })}\r\n \r\n\r\n {state.focusedFranchise ?\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n : null}\r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n \r\n ) : null}\r\n \r\n ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticFault;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { getDiagnosticFaultByID, postDiagnosticFaults } from '../../../../Core/Service/diagnosticFaults-service';\r\nimport { Grid, InputLabel, Typography, FormLabel } from '@material-ui/core';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport {\r\n getDiagnosticEngineFaultsByID,\r\n getDiagnosticLocationsByID,\r\n getDiagnosticNoiseApparentsByID,\r\n postDiagnosticEngineFaults,\r\n postDiagnosticLocations,\r\n postDiagnosticNoiseApparents\r\n} from '../../../../Core/Service/diagnosticFaults-service';\r\n\r\nconst DiagnosticCommonModal = (props) => {\r\n const [state, setState] = useState({\r\n name: '',\r\n id: props.id,\r\n errors: {}\r\n });\r\n\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n let res = {};\r\n if (props.id) {\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n res = await getDiagnosticEngineFaultsByID(props.id);\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n res = await getDiagnosticNoiseApparentsByID(props.id);\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n res = await getDiagnosticLocationsByID(props.id);\r\n } else {\r\n res = {};\r\n }\r\n if (res.success) {\r\n let data = res.data?.list?.table[0];\r\n setState((st) => ({\r\n ...st,\r\n name: data.name,\r\n id: data.id\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n\r\n let { name } = state;\r\n\r\n if (!name) {\r\n isValid = false;\r\n errors.name = 'Name is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n let res = {};\r\n let data = {\r\n id: state.id,\r\n name: state.name\r\n };\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n res = await postDiagnosticEngineFaults(data);\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n res = await postDiagnosticNoiseApparents(data);\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n res = await postDiagnosticLocations(data);\r\n } else {\r\n res = {};\r\n }\r\n if (res.success) {\r\n showToast(`${props.screenSortName} ${state.id ? 'Updated' : 'Added'} Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Name\r\n \r\n \r\n {state.errors?.name}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticCommonModal;\r\n","import React, { useMemo } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen/index';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n// import DiagnosticFaultsModal from '../DiagnosticFaultsModal';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { useEffect } from 'react';\r\nimport DiagnosticCommonModal from './addEditModal';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n { field: 'name', sortable: false, title: `Name` }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Diagnostic Sheets', active: true },\r\n { name: `${path}`, active: true }\r\n];\r\n\r\nconst DiagnosticEngineFaults = (props) => {\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n useEffect(() => {\r\n let url = '';\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n url = 'DiagnosticEngineFaults';\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n url = 'DiagnosticNoiseApparents';\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n url = 'DiagnosticLocations';\r\n } else {\r\n url = '';\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n url: url,\r\n screenSortName: props.screenName.substr(props.screenName.indexOf(' ') + 1)\r\n }));\r\n }, [props.screenName]);\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n id: val?.id\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n + Add {`${state.screenSortName}`}\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={state.url}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticEngineFaults;\r\n","import { get, post, put } from './http-calls';\r\n\r\nexport const addUpdateVorType = async (data) => {\r\n let res = await post(`VOR/VORTypes`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const addUpdateVorReason = async (data) => {\r\n let res = await post(`VOR/VORReasons`, data, { useAuthToken: true });\r\n return res;\r\n};","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport { DefaultButton } from '../../../Core/FormInput';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { addUpdateVorType } from '../../../Core/Service/vor-service';\r\n\r\nconst AddEditVorType = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n\r\n vorTypeDescription: props.focusedRow?.vorTypeDescription ? props.focusedRow.vorTypeDescription : '',\r\n vorTypeCode: props.focusedRow?.vorTypeCode ? props.focusedRow.vorTypeCode : '',\r\n vorTypeID: props.focusedRow?.vorTypeID ? props.focusedRow.vorTypeID : null\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { vorTypeDescription, vorTypeCode } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (vorTypeDescription == null || vorTypeDescription == '') {\r\n errors.vorTypeDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (vorTypeCode == null || vorTypeCode == '') {\r\n errors.vorTypeCode = 'Code field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n vorTypeDescription: state.vorTypeDescription,\r\n vorTypeCode: state.vorTypeCode,\r\n vorTypeID: state.vorTypeID\r\n };\r\n let res = await addUpdateVorType(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('Vor type updated successfully');\r\n props.onClose();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n {state.errors['vorTypeDescription']}\r\n \r\n\r\n \r\n \r\n Code\r\n \r\n \r\n {state.errors['vorTypeCode']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditVorType;\r\n","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport { DefaultButton } from '../../../Core/FormInput';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { addUpdateVorReason, addUpdateVorType } from '../../../Core/Service/vor-service';\r\n\r\nconst AddEditVorReason = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n\r\n vorReasonDescription: props.focusedRow?.vorReasonDescription ? props.focusedRow.vorReasonDescription : '',\r\n vorReasonID: props.focusedRow?.vorReasonID ? props.focusedRow.vorReasonID : null\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }))\r\n }\r\n\r\n const validations = () => {\r\n const {\r\n vorReasonDescription\r\n } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (vorReasonDescription == null || vorReasonDescription == '') {\r\n errors.vorReasonDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n vorReasonDescription: state.vorReasonDescription,\r\n VORReasonTypeID: props.VORReasonTypeID,\r\n vorReasonID: state.vorReasonID,\r\n }\r\n let res = await addUpdateVorReason(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast(\"Error occured.\")\r\n } else {\r\n showToast(\"Vor reason updated successfully\")\r\n props.onClose()\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Description\r\n \r\n {state.errors['vorReasonDescription']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default AddEditVorReason;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport AddEditVorReason from './AddEditVorReason';\r\n\r\nconst VorReasons = (props) => {\r\n const [state, setState] = useState({\r\n showAddEdit: false\r\n });\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'VOR', active: true },\r\n { name: `VOR Reasons`, active: true },\r\n { name: `${props.focusedRow.vorTypeDescription}`, active: true }\r\n ];\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '5%',\r\n filterable: false\r\n },\r\n {\r\n field: 'vorReasonID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'vorReasonDescription',\r\n title: `Description`,\r\n },\r\n ];\r\n\r\n useEffect(() => {\r\n\r\n }, []);\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n let baseUrl = `VOR/VORReasons/${props.focusedRow.vorTypeID}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Vor Reason\r\n \r\n \r\n \r\n\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n {state.showVorReasons ?\r\n <>\r\n
\r\n \r\n :\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Vor Type\r\n \r\n \r\n \r\n\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n }\r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n Subject\r\n \r\n \r\n \r\n Body\r\n
\r\n\r\n \r\n \r\n \r\n } label=\"Send Email?\" />\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddUpdateBookingStatus;\r\n","import { Grid } from '@material-ui/core';\r\nimport React, { useMemo, useState } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\n\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddUpdateBookingStatus from './addUpdateBooking';\r\nimport DialogComp from './../../../../Core/Modal/dialogModal';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n\r\n { field: 'description', sortable: false, title: `Description` },\r\n { field: 'subject', sortable: false, title: `Subject`, width: 200 },\r\n\r\n { field: 'body', sortable: false, title: `Body` },\r\n {\r\n field: 'email',\r\n sortable: false,\r\n title: `Email`,\r\n width: 150,\r\n renderer: (val) => {\r\n return val ? 'Yes' : 'No';\r\n }\r\n }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Communicator', active: true },\r\n { name: `Booking Request Status`, active: true }\r\n];\r\n\r\nconst BookingRequestStatus = () => {\r\n const [state, setState] = useState({\r\n showModal: false,\r\n isReload: ''\r\n });\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false,\r\n isReload: res ? new Date() : ''\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n reqID: val.id,\r\n data: val\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n const baseUrl = 'CommunicatorBookingRequest/GetBookingRequestStatus';\r\n return (\r\n \r\n
({\r\n records: res.data.list.table\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n // isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n {state.showModal ? (\r\n handleClose(false)}>\r\n handleClose(true)} reqID={state.reqID} data={state.data} />\r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n + Add Dynamic Form\r\n \r\n \r\n \r\n
({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={url}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n {state.showModal ? : null}\r\n {state.deleteModal ? : null}\r\n \r\n \r\n
\r\n )}\r\n {state.dynamicFormFieldTextImage && (\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n + Add Dynamic Form Field\r\n \r\n \r\n \r\n
handleData(res)}\r\n columns={column}\r\n getUrl={url}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n overflow=\"auto\"\r\n >\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Available Jobs\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {cards.map((option) => (\r\n \r\n \r\n \r\n \r\n
{option.name} \r\n
{option.count}
\r\n
{handleBtnClcik(vl)} } className=\"px-10\">\r\n
\r\n \r\n \r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n {props.match.params.name}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {state.isShowScrollArrow && (\r\n
scrollPrev()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n {state.buttons.map((btn) => {\r\n if (btn.id == mainWorkflowButtonId) {\r\n return (\r\n
buttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n if (btn.id === state.selectedId && state.showHighlightedButton) {\r\n if (color === 'secondary') {\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n } else {\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n })}\r\n
\r\n {state.isShowScrollArrow && (\r\n
scrollNext()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n | \r\n onJobSelect(e.target.checked, job.headerId)}\r\n />\r\n | \r\n {job.wipNumber} | \r\n {job.registration} | \r\n {job.customerName} | \r\n {job.dateDueIn ? moment(job.dateDueIn).format(\"LLL\") : ' - '} | \r\n
\r\n}\r\n\r\nconst MatchingJobsTable = ({ jobs, loading, onJobSelect }) => {\r\n return <>\r\n \r\n \r\n \r\n | \r\n WIP | \r\n Reg. | \r\n Customer | \r\n Due In | \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {jobs.map((j, i) => )}\r\n {jobs.length === 0 && | {loading ? 'Loading...' : 'No record found.'} |
}\r\n \r\n
\r\n
\r\n \r\n \r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n {/* \r\n Key No: 63216{' '}\r\n */}\r\n \r\n \r\n \r\n \r\n Log Message (\r\n {' '}\r\n Visible to customer?)\r\n \r\n \r\n {state.newlogTextmessage}\r\n \r\n \r\n \r\n Reminder Action Date & Time\r\n \r\n \r\n {state.logActionTimeMessage}\r\n \r\n\r\n \r\n \r\n \r\n High Priority\r\n \r\n \r\n {state.errors.isHighPriorityEmail}\r\n \r\n\r\n \r\n \r\n \r\n Customer Email\r\n \r\n \r\n {state.errors.isUpdateCustomerEmail}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.isPhoneNo}\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddEditActionLog;\r\n","import React, { useReducer } from 'react';\r\nimport { Grid, Typography, InputLabel, RadioGroup, FormControlLabel, Radio, Checkbox, DialogTitle, Chip, Avatar, FormHelperText } from '@material-ui/core';\r\nimport { reducer, initState } from '../../../Reducer/action';\r\nimport { SecondaryButton, TextBox, YesNoButton } from '../../../../Core/FormInput/index';\r\nimport { useState, useCallback } from 'react';\r\nimport CommonGijgoGrid from '../../../../Core/Controls/GijgoGrid/index';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport LogHistory from './logHistory';\r\nimport { postCommunicatorAddActionLog, getActionLogByID } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport { useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\n\r\nconst EditActionLog = (props) => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n const [show, setShow] = useState({\r\n history: false\r\n });\r\n\r\n const [state, setState] = useState({\r\n logVisibleToCustomer: false,\r\n logHighPriority: false,\r\n isCustomerUpdate: false,\r\n isUpdateSms: false,\r\n newisCustomerUpdate: false,\r\n newisUpdateSms: false,\r\n errors: {},\r\n resultDateAndTime: moment().format('YYYY-MM-DD HH:MM')\r\n });\r\n\r\n const handleCheck = (e) => {\r\n const { name, checked } = e.target;\r\n setState((st) => ({ ...st, [name]: checked }));\r\n if (state.logHighPriority) {\r\n setState((st) => ({ ...st, newisHighPriorityEmail: state.highPriorityEmail }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getActionLogByID(props.id);\r\n let data = res.data.list[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n logActionTime: data.logActionTime,\r\n logActioned: data.logActioned,\r\n logCreatedUserID: data.logCreatedUserID,\r\n logDateCreated: data.logDateCreated,\r\n logHeaderRecordID: data.logHeaderRecordID,\r\n logHighPriority: data.logHighPriority,\r\n logID: data.logID,\r\n logText: data.logText,\r\n logVisibleToCustomer: data.logVisibleToCustomer,\r\n highPriorityEmail: data.highPriorityEmail,\r\n newisHighPriorityEmail: data.logHighPriority ? data.highPriorityEmail : ''\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleHistory = () => {\r\n setShow((st) => ({\r\n ...st,\r\n history: true\r\n }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validation = () => {\r\n let { logResultText } = state;\r\n let message = '';\r\n let isValid = true;\r\n let errors = {};\r\n if (!logResultText) {\r\n isValid = false;\r\n message = 'Log Result is required';\r\n }\r\n if (state.isUpdateSms && !state.isPhoneNo) {\r\n isValid = false;\r\n errors.isPhoneNo = 'SMS is required';\r\n }\r\n if (state.isCustomerUpdate && !state.isUpdateCustomerEmail) {\r\n isValid = false;\r\n errors.isUpdateCustomerEmail = 'Email is required';\r\n }\r\n setState((st) => ({ ...st, message: message, errors: errors }));\r\n return isValid;\r\n };\r\n\r\n const Newvalidation = () => {\r\n let { newlogText, newlogActionTime } = state;\r\n let logActionTimeMessage = '';\r\n let newlogTextmessage = '';\r\n let errors = {};\r\n let isValid = true;\r\n if (!newlogText) {\r\n isValid = false;\r\n newlogTextmessage = 'Log Message is required';\r\n }\r\n if (!newlogActionTime) {\r\n isValid = false;\r\n logActionTimeMessage = 'Reminder Action Date & Time is required';\r\n }\r\n if (state.newisUpdateSms && !state.newisPhoneNo) {\r\n isValid = false;\r\n errors.newisPhoneNo = 'SMS is required';\r\n }\r\n if (state.newisCustomerUpdate && !state.newisUpdateCustomerEmail) {\r\n isValid = false;\r\n errors.newisUpdateCustomerEmail = 'Email is required';\r\n }\r\n if (state.newlogHighPriority && !state.newisHighPriorityEmail) {\r\n isValid = false;\r\n errors.newisHighPriorityEmail = 'Email is required';\r\n }\r\n setState((st) => ({ ...st, newlogTextmessage: newlogTextmessage, logActionTimeMessage: logActionTimeMessage, errors: errors }));\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n let data = {\r\n logID: props.id,\r\n logHeaderRecordID: props.headerRecordID,\r\n logText: state.logText,\r\n logActionTime: state.logActionTime,\r\n logResultText: state.logResultText,\r\n logVisibleToCustomer: state.logVisibleToCustomer,\r\n logHighPriority: state.logHighPriority,\r\n isPhoneNo: state.isPhoneNo || '',\r\n isUpdateCustomerEmail: state.isUpdateCustomerEmail || '',\r\n isHighPriorityEmail: state.isHighPriorityEmail || ''\r\n };\r\n\r\n let res = await postCommunicatorAddActionLog(data);\r\n if (res.success) {\r\n showToast(`Action Log Closed Successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Action Log Failed close`);\r\n }\r\n }\r\n };\r\n\r\n const handleNewSubmit = async () => {\r\n if (Newvalidation()) {\r\n let data = {\r\n logID: null,\r\n logHeaderRecordID: props.headerRecordID,\r\n logText: state.newlogText,\r\n logActionTime: state.newlogActionTime,\r\n logResultText: state.logResultText || '',\r\n logVisibleToCustomer: state.logVisibleToCustomer,\r\n logHighPriority: state.logHighPriority,\r\n isPhoneNo: state.newisPhoneNo || '',\r\n isUpdateCustomerEmail: state.newisUpdateCustomerEmail || '',\r\n isHighPriorityEmail: state.newisHighPriorityEmail || ''\r\n };\r\n\r\n let res = await postCommunicatorAddActionLog(data);\r\n if (res.success) {\r\n handleSubmit();\r\n showToast(`New Action Log Added Successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Action Log Failed To New Add`);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Update Action Log\r\n \r\n \r\n \r\n }\r\n label=\"History\"\r\n onClick={handleHistory}\r\n />\r\n \r\n \r\n }\r\n onClose={() => props.onClose(false)}\r\n fullWidth\r\n maxWidth=\"lg\"\r\n >\r\n \r\n \r\n \r\n WIP No: {props.wip} Reg. No: {props.reg}{' '}\r\n {/* \r\n Key No: 63216{' '}\r\n */}\r\n \r\n \r\n \r\n \r\n {' '}\r\n Action Log Message ( @ {moment(state.logActionTime).format('LLL')} ) \r\n \r\n
\r\n \r\n {state.logText}\r\n \r\n \r\n \r\n \r\n {' '}\r\n Result\r\n \r\n
\r\n\r\n \r\n {state.message}\r\n \r\n\r\n \r\n \r\n {' '}\r\n Result Completion Date & Time\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Email Customer\r\n \r\n \r\n {state.errors.isUpdateCustomerEmail}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.isPhoneNo}\r\n \r\n\r\n \r\n \r\n Close Action Log\r\n \r\n \r\n \r\n\r\n \r\n \r\n Next Action Log\r\n \r\n \r\n \r\n Log Message (\r\n \r\n Visible to customer?)\r\n \r\n \r\n {state.newlogTextmessage}\r\n \r\n \r\n \r\n {' '}\r\n Reminder Action Date & Time\r\n \r\n \r\n {state.logActionTimeMessage}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.newisPhoneNo}\r\n \r\n\r\n \r\n \r\n \r\n High Priority\r\n \r\n \r\n {state.errors.newisHighPriorityEmail}\r\n \r\n\r\n \r\n \r\n \r\n Email Customer\r\n \r\n \r\n {state.errors.newisUpdateCustomerEmail}\r\n \r\n\r\n \r\n \r\n Close & Create New Action Log\r\n \r\n \r\n \r\n \r\n
\r\n {show.history ? (\r\n {\r\n setShow((st) => ({\r\n ...st,\r\n history: false\r\n }));\r\n }}\r\n />\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default EditActionLog;\r\n","import moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { getActionLogHistory } from '../../../../Core/Service/communicator-service';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport { Avatar, Chip, DialogTitle } from '@material-ui/core';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddEditActionLog from './addEditActionLog';\r\nimport EditActionLog from './editActionLog';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\n\r\nconst LogHistory = (props) => {\r\n const [state, setState] = useState({\r\n messaegList: [],\r\n actionLog: false,\r\n editActionLog: false\r\n });\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n useEffect(async () => {\r\n let res = await getActionLogHistory(props.headerRecordID);\r\n if (res.success) {\r\n setState((st) => ({ ...st, messaegList: res?.data?.list }));\r\n }\r\n }, []);\r\n\r\n const handleActionLog = () => {\r\n setState((st) => ({\r\n ...st,\r\n actionLog: !st.actionLog\r\n }));\r\n };\r\n\r\n const handleEditActionLog = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n editActionLog: true,\r\n headerRecordID: props.headerRecordID,\r\n id: val.logID\r\n }));\r\n // props.onClose();\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n editActionLog: false\r\n }));\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n Action Log History\r\n {!props.hideAddActionBtn && (\r\n \r\n \r\n \r\n }\r\n label=\"Add New Log\"\r\n onClick={handleActionLog}\r\n />\r\n )}\r\n \r\n \r\n }\r\n onClose={() => props.onClose(false)}\r\n fullScreen={WindowWidths < 1260 ? true : false}\r\n maxWidth=\"md\"\r\n fullWidth\r\n >\r\n \r\n
\r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n
\r\n
\r\n {state.messaegList.length > 0 ? (\r\n
\r\n {state.messaegList.map((m) => (\r\n
\r\n
\r\n {m.logText}{' '}\r\n {m.logActioned ? null : (\r\n
\r\n \r\n \r\n }\r\n size=\"small\"\r\n label=\"Close\"\r\n onClose={() => props.onClose(false)}\r\n onClick={() => handleEditActionLog(m)}\r\n />\r\n )}\r\n \r\n\r\n
\r\n {m.logResultText} \r\n \r\n {moment(m.logActionTime).format('LLL')} ( Created by : {m.createdBy} @ {moment(m.logDateCreated).format('LLL')} )\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n ) : (\r\n
\r\n
No Log Available
\r\n
\r\n )}\r\n
\r\n \r\n Priority Number\r\n \r\n \r\n \r\n handelSubmit('submit')} disabled={state.isSetDisabled}>\r\n Set\r\n \r\n \r\n \r\n handelSubmit('reset')}>\r\n Reset\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default JobPriorityModal;\r\n","import { FormLabel, Grid } from '@material-ui/core';\r\nimport React, { useEffect } from 'react';\r\nimport { useContext } from 'react';\r\nimport { useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { GreenButton, SecondaryButton, TextBox } from '../../../Core/FormInput';\r\nimport { postCustomerRating, getCustomerRating } from '../../../Core/Service/workflow-service';\r\n// import { SelectBox } from '';\r\nimport SelectBox from './../../../Core/FormInput/SelectBox';\r\nimport StarIcon from '@material-ui/icons/Star';\r\n\r\nconst CustomerRating = (props) => {\r\n const [state, setState] = useState({ customerRatingIcon: null });\r\n const { hideTopNavAndMenu, showToast, portalSettings } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n if (props.jobId) {\r\n let res = await getCustomerRating(props.jobId);\r\n if (res?.success) {\r\n let data = res?.data?.table[0];\r\n setState((st) => ({\r\n ...st,\r\n headerRecordID: data.headerRecordID,\r\n customerRatingIcon: data.customerRatingIcon || null,\r\n customerRatingNotes: data.customerRatingNotes || '',\r\n enteredRegNo: data.enteredRegNo || '',\r\n s24ChassisNumber: data.s24ChassisNumber || '',\r\n registration: data.registration,\r\n wipNo: data.wipNumber\r\n }));\r\n }\r\n }\r\n }, []);\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n // nst.isSetDisabled = nst.jobPriority ? false : true;\r\n return nst;\r\n });\r\n };\r\n\r\n const ratingList = [\r\n {\r\n id: 1,\r\n name: (\r\n <>\r\n Gold\r\n \r\n )\r\n },\r\n {\r\n id: 2,\r\n name: (\r\n <>\r\n Silver\r\n \r\n )\r\n },\r\n {\r\n id: 3,\r\n name: (\r\n <>\r\n Bronze\r\n \r\n )\r\n }\r\n ];\r\n\r\n const handelSubmit = async () => {\r\n let data = {\r\n headerRecordID: props.jobId,\r\n customerRatingIcon: state.customerRatingIcon,\r\n customerRatingNotes: state.customerRatingNotes,\r\n enteredRegNo: state.enteredRegNo,\r\n s24ChassisNumber: state.s24ChassisNumber\r\n };\r\n const res = await postCustomerRating(data);\r\n if (res.success) {\r\n showToast(res.data.list.table[0].msg);\r\n props.handleCancel(true);\r\n }\r\n if (!res.success) {\r\n console.error(res);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n WIP No: {state.wipNo} {state.registration}\r\n \r\n \r\n Reg No: {state.registration}\r\n \r\n
\r\n {portalSettings.showRegNumberInCustomerRatingBox && (\r\n <>\r\n \r\n S24 Chassis Number\r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n Customer Rating Icon\r\n \r\n \r\n \r\n \r\n Notes\r\n \r\n \r\n \r\n handelSubmit('reset')}>\r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CustomerRating;\r\n","import { CircularProgress, Grid, InputLabel } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport { getMotHistory } from '../../../../Core/Service/ReportScreens-service';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport ErrorIcon from '@material-ui/icons/Error';\r\nimport './motHistory.scss';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\n\r\nvar dateInPast = function (firstDate) {\r\n if (firstDate && new Date(firstDate).setHours(0, 0, 0, 0) <= new Date().setHours(0, 0, 0, 0)) {\r\n return true;\r\n }\r\n return false;\r\n};\r\n\r\nconst MotHistoryScreen = (props) => {\r\n const [state, setState] = useState({\r\n dvla: null,\r\n lcvMot: null,\r\n hgvMOT: null,\r\n errors: {},\r\n isResponse: false,\r\n isLoader: false\r\n });\r\n const pullMotHistory = async (regNo, FranchiseCode) => {\r\n if (props.regNo || regNo) {\r\n setState((st) => ({\r\n ...st,\r\n isResponse: false,\r\n isLoader: true\r\n }));\r\n const res = await getMotHistory(regNo || props.regNo, props.FranchiseCode || '');\r\n setState((st) => ({\r\n ...st,\r\n dvla: res.data.dvla.response,\r\n lcvMot: res.data.lcvMot.response,\r\n hgvMOT: res.data.hgvMOT.response,\r\n isMotExpiryDate: dateInPast(res.data.dvla?.response?.motExpiryDate),\r\n isAnnualTestExpiryDate: dateInPast(res.data.hgvMOT?.response?.annualTestExpiryDate),\r\n isResponse: true,\r\n isLoader: false\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n dvla: null,\r\n lcvMot: null,\r\n hgvMOT: null,\r\n isMotExpiryDate: null,\r\n isAnnualTestExpiryDate: null,\r\n isResponse: false,\r\n isLoader: false\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullMotHistory();\r\n }, [props.regNo, props.FranchiseCode]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[name] = value.toUpperCase();\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleSubmit = () => {\r\n pullMotHistory(state.regNumber, '');\r\n };\r\n\r\n return (\r\n \r\n {!props.hideSeachText && (\r\n
\r\n \r\n Reg Number\r\n \r\n {state.errors['regNumber']}\r\n \r\n \r\n \r\n GO\r\n \r\n \r\n \r\n )}\r\n {state.isResponse ? (\r\n
\r\n {state.lcvMot != null ? (\r\n <>\r\n {state.isMotExpiryDate && (\r\n \r\n This Vehicle's MOT has expired
\r\n You can fined up to £1000 for Driving without a valid MOT
\r\n \r\n This vehicle may be MOT exempt, for more information refer to\r\n \r\n MOT exemption guidance\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n {state.lcvMot.registration}\r\n \r\n \r\n \r\n \r\n Make/Model\r\n \r\n \r\n {`${state.lcvMot.make} (${state.lcvMot.model})`}\r\n \r\n \r\n \r\n \r\n {state.lcvMot.motTests ? 'MOT Valid Until' : 'MOT Due Date'}\r\n \r\n \r\n \r\n {state.lcvMot.motTests\r\n ? formatters.YearFormatter(state.lcvMot.motTests[0].expiryDate)\r\n : formatters.YearFormatter(state.lcvMot.motTestDueDate)}\r\n \r\n \r\n \r\n \r\n \r\n Tax Status\r\n \r\n \r\n {state.dvla.taxStatus}\r\n \r\n \r\n\r\n {state.dvla.taxDueDate != null && (\r\n \r\n \r\n Tax Due\r\n \r\n \r\n {formatters.YearFormatter(state.dvla.taxDueDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {state.lcvMot.motTests != null ? (\r\n <>\r\n {state.lcvMot.motTests.map((q, i) => {\r\n return (\r\n \r\n \r\n {`Test Date: ${formatters.YearFormatter(q.completedDate)}`}\r\n \r\n \r\n \r\n \r\n \r\n | Result | \r\n Test No. | \r\n Mileage | \r\n Expiry Date | \r\n
\r\n \r\n \r\n \r\n {q.testResult == 'PASSED' ? (\r\n | \r\n \r\n \r\n \r\n \r\n Pass\r\n \r\n | \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Fail\r\n \r\n | \r\n )}\r\n {q.motTestNumber} | \r\n {q.odometerValue} | \r\n {q.expiryDate != null ? formatters.YearFormatter(q.expiryDate) : ''} | \r\n
\r\n \r\n
\r\n \r\n\r\n {q.rfrAndComments != null && (\r\n <>\r\n {q.rfrAndComments.map((m) => {\r\n return (\r\n \r\n {m.type == 'ADVISORY' ? (\r\n }\r\n >\r\n {m.text}\r\n \r\n ) : m.type == 'PRS' ||\r\n m.type == 'FAILED' ||\r\n // m.type == 'MAJOR' ||\r\n // m.type == 'MINOR' ||\r\n q.testResult == 'FAILED' ? (\r\n }>\r\n {m.text}\r\n \r\n ) : (\r\n }>\r\n {m.text}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n <>\r\n \r\n }>\r\n MOT records not available\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n ) : state.hgvMOT != null ? (\r\n <>\r\n {state.isAnnualTestExpiryDate && (\r\n
\r\n This Vehicle's annual test has expired
\r\n
\r\n \r\n If the vehicle has been tested recently, it can take up to 10 working day for DVSA to update records\r\n
\r\n
\r\n \r\n This vehicle may be MOT exempt, for more information refer to\r\n \r\n MOT exemption guidance\r\n \r\n
\r\n \r\n )}\r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n {state.hgvMOT.registration}\r\n \r\n \r\n \r\n \r\n Make/Model\r\n \r\n \r\n {`${state.hgvMOT.make} (${state.hgvMOT.model})`}\r\n \r\n \r\n\r\n {state.hgvMOT.annualTestExpiryDate != null && (\r\n \r\n \r\n MOT Valid Until\r\n \r\n \r\n {formatters.YearFormatter(state.hgvMOT.annualTestExpiryDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Tax Status\r\n \r\n \r\n {state.dvla.taxStatus}\r\n \r\n \r\n {state.dvla.taxDueDate != null && (\r\n \r\n \r\n Tax Due\r\n \r\n \r\n {formatters.YearFormatter(state.dvla.taxDueDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n\r\n \r\n {state.hgvMOT.annualTests != null ? (\r\n <>\r\n {state.hgvMOT.annualTests.map((q, i) => {\r\n return (\r\n \r\n \r\n {`Test Date: ${formatters.YearFormatter(q.testDate)}`}\r\n \r\n \r\n \r\n \r\n \r\n | Result | \r\n Test No. | \r\n Expiry Date | \r\n Location | \r\n
\r\n \r\n \r\n \r\n {q.testResult == 'Pass' ? (\r\n | \r\n \r\n \r\n \r\n \r\n Pass\r\n \r\n | \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Fail\r\n \r\n | \r\n )}\r\n {q.testCertificateNumber} | \r\n {q.expiryDate != null ? formatters.YearFormatter(q.expiryDate) : ''} | \r\n {q.location} | \r\n
\r\n \r\n
\r\n \r\n\r\n {q.defects != null ? (\r\n <>\r\n {q.defects.map((m) => {\r\n return (\r\n \r\n {m.severityCode == 'A' ? (\r\n }\r\n >\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n ) : m.severityCode == 'F' ? (\r\n }>\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n ) : (\r\n }>\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : q.testResult == 'Pass' ? (\r\n <>\r\n \r\n }>\r\n {`Passed MOT with no advisories`}\r\n \r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n \r\n \r\n }>\r\n No MOT with no advisories\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ) : (\r\n \r\n }>\r\n Resource not found\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n {state.isLoader ? : null}\r\n \r\n )}\r\n \r\n
\r\n {AppStorage.getCanAmendJobNotes() && (\r\n <>\r\n
handleEditNote(true, props.note)} style={{ padding: '0px' }}>\r\n \r\n \r\n
handleDeleteNote(true, props.note)} style={{ marginRight: '5px' }}>\r\n \r\n \r\n \r\n )}\r\n
{props.note.msg}
\r\n
\r\n
\r\n {props.note.by} @ {moment(props.note.at).format('LLL')}\r\n
\r\n
\r\n \r\n WIP No: {state.wip} Reg No: {state.reg}\r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {state.currentWorkflowId && !_.isEmpty(state.tempObj) && (\r\n \r\n )}\r\n
\r\n {state.showFilter ? (\r\n
closeDialog(false)}>\r\n \r\n \r\n ) : null}\r\n {state.showTechAssign ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showJobPriority ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showCustomerRating ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.jobNotes ? (\r\n
handleJobNotes([], false)}\r\n onNotesAdded={() => {\r\n console.log('');\r\n }}\r\n />\r\n ) : null}\r\n {state.displayCustomerMessage ? (\r\n closeTechAssignDialog(false)} fullWidth>\r\n \r\n {state.customerMessage}\r\n \r\n \r\n ) : null}\r\n {state.logHistory ? (\r\n {\r\n setState((st) => ({\r\n ...st,\r\n logHistory: false\r\n }));\r\n }}\r\n />\r\n ) : null}\r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n \r\n {step.textImage && (\r\n
\r\n )}\r\n {step.textURL && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n {/* {selfBg &&
} */}\r\n
\r\n
\r\n {props.disabled ? null : (\r\n
\r\n \r\n {props.isUploading && }\r\n
\r\n )}\r\n {props.isLoading ? (\r\n
\r\n \r\n
\r\n ) : props.imageList.length > 0 ? (\r\n
\r\n ) : (\r\n
\r\n No image found\r\n
\r\n )}\r\n
\r\n {/* {props.disabled ? null : (\r\n
\r\n Submit\r\n
\r\n )} */}\r\n
;\r\n } else {\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n {state.formFields.map((s, i) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n tryToSaveDynamicFormData(false)} disabled={!saveBtnEnabled}>\r\n Save\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n )}\r\n\r\n {state.showDoc && (\r\n \r\n updateState({\r\n showDoc: false,\r\n imageList: []\r\n })\r\n }\r\n />\r\n )}\r\n\r\n {screenState.showMailModal && (\r\n \r\n )}\r\n \r\n );\r\n};\r\nconst Screen = (props) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Screen;\r\n","import { useContext, useEffect, useState } from 'react';\r\nimport { CircularProgress, DialogTitle, Grid, IconButton, Tooltip } from '@material-ui/core';\r\nimport { Backup, Mail, Visibility } from '@material-ui/icons';\r\nimport { AppSelect, Dialogs, PrimaryButton, TextBox } from '../../../Core/FormInput';\r\nimport { ScreenContext } from './WorkflowJob.Provider';\r\nimport { uploadOcrDoc } from '../../../Core/Service/workflowJobDocument-service';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { useHistory } from 'react-router-dom';\r\nimport RenderForm from './DynamicForm/renderForm';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { useWindowSize } from '../../../Core/Controls/ScreenResolution';\r\nconst WorkflowStep = ({ step, jobId, onDropdownChange, dropdownValue, onDocumentAction, technicianJobId, isTechReadonly }) => {\r\n const [uploading, setUploading] = useState(false);\r\n const { showToast } = useContext(AppContext);\r\n const { updateState, state, screenState, getListOptionById, getDocumentFromOcrDocId, setDocumentWithOcrDocId } = useContext(ScreenContext);\r\n\r\n const ops = step.stepListId && getListOptionById(step.stepListId);\r\n const ocrDoc = getDocumentFromOcrDocId(step.ocrDocumentId);\r\n const enableViewEmail = ocrDoc && ocrDoc.docName;\r\n const showDoc = () => {\r\n updateState({ tabView: false });\r\n docAction('VIEW');\r\n };\r\n const docAction = (actionType) => {\r\n onDocumentAction &&\r\n onDocumentAction({\r\n eventType: actionType,\r\n stepId: step.stepId,\r\n ocrDocumentId: step.ocrDocumentId,\r\n doc: ocrDoc,\r\n step\r\n });\r\n };\r\n\r\n const uploadDoc = async (e) => {\r\n const firstFile = e.target.files[0];\r\n if (firstFile) {\r\n const formData = new FormData();\r\n formData.append(firstFile.name, firstFile);\r\n setUploading(true);\r\n let res = await uploadOcrDoc(state.jobId, step.ocrDocumentId, formData);\r\n setDocumentWithOcrDocId(step.ocrDocumentId, res.data.docName);\r\n setUploading(false);\r\n if (res.success) {\r\n showToast('File Uploaded successfully.');\r\n }\r\n }\r\n };\r\n\r\n const getDocumentAction = () => {\r\n if (step.ocrDocumentId) {\r\n return (\r\n <>\r\n {step.ocrDocument_ShowUpload && (\r\n \r\n \r\n \r\n )}\r\n {step.ocrDocument_ShowView && (\r\n \r\n showDoc('VIEW')}\r\n disabled={!enableViewEmail}\r\n >\r\n \r\n \r\n \r\n )}\r\n {step.ocrDocument_ShowEmail && (\r\n \r\n docAction('MAIL')} disabled={!enableViewEmail}>\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n {step.stepLabel}\r\n {step.isRequired && *}\r\n
\r\n
{getDocumentAction()}
\r\n
\r\n
\r\n {step.isTextboxType ? (\r\n
onDropdownChange({ [step.jsonPropertyName]: e.target.value })}\r\n />\r\n ) : (\r\n ops && (\r\n \r\n )\r\n )}\r\n {step.webFormTypeId && (\r\n \r\n )}\r\n {step.dynamicFormID && (\r\n \r\n )}\r\n \r\n
\r\n \r\n ×\r\n \r\n
\r\n \r\n {loading && }\r\n \r\n )}\r\n \r\n );\r\n};\r\nexport default ViewPdfModal;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, IconButton } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SingelSelect, TextBox } from '../../../../../Core/FormInput';\r\nimport { ExpBaseURL } from '../../../../../Core/Service/http-calls';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport GetWIPHeader from '../../GetWIPDetails';\r\nimport DialogComp from '../../../../../Core/Controls/Dialog/DialogComp';\r\nimport { getAgedMeasuresViewDocument } from '../../../../../Core/Service/ReportScreens-service';\r\nimport ViewPdfModal from '../../../../../Core/Modal/PdfViweModal';\r\nimport ReactDOM from 'react-dom';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { GetExcelFileFromEndpoint } from '../../../../../Core/Service/reportService';\r\nimport AppContext from '../../../../../App/AppContext';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { useContext } from 'react';\r\nimport { GetBranchDeportmentScreenDropdowns } from '../../../../../Core/Service/reportService';\r\n\r\nconst baseColumns = [\r\n { field: 'bn', title: `Branch`, width: 180 },\r\n { field: 'sold', title: `Sold Hours`, width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'taken', title: `Taken Hours`, width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'eff', title: `Efficiency %`, width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'sale', title: `Sale Value`, width: 150, align: 'right', renderer: formatters.CurrencyThousandSeparator, filterable: false, sortable: false },\r\n { field: 'cost', title: `Cost Value`, width: 120, align: 'right', renderer: formatters.CurrencyThousandSeparator, filterable: false, sortable: false },\r\n { field: 'profit', title: `Profit`, width: 120, align: 'right', renderer: formatters.CurrencyThousandSeparator, filterable: false, sortable: false },\r\n { field: 'marginPerc', title: 'Margin %', width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'recRate', title: 'Rec Rate ', width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.CurrencyThousandSeparator }\r\n];\r\n\r\nvar opColumns = [\r\n { title: 'Operator', field: 'opName', width: 90, sortable: true },\r\n { title: 'Sold', field: 'sold', width: 70, sortable: true, align: 'right' },\r\n { title: 'Taken', field: 'taken', width: 70, sortable: true, align: 'right' },\r\n { title: '% Eff.', field: 'eff', width: 66, sortable: true, align: 'right' },\r\n { title: 'Sale Value', field: 'sale', width: 80, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Cost Value', field: 'cost', width: 80, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Profit', field: 'profit', width: 80, sortable: true, align: 'right' },\r\n { title: 'Margin %', field: 'marginPerc', width: 60, sortable: true, align: 'right' },\r\n { title: 'Rec Rate ', renderer: formatters.CurrencyThousandSeparator, field: 'recRate', width: 60, sortable: true, align: 'right' }\r\n];\r\n\r\nconst wipColumns = [\r\n { title: 'WIP', field: 'wipNumber', width: 70, sortable: true },\r\n { title: 'Invoice No', field: 'invoiceNumber', width: 70, sortable: true },\r\n { title: 'Customer', field: 'customersName', width: 130, sortable: true },\r\n { title: 'Sold', field: 'sold', width: 70, sortable: true, align: 'right' },\r\n { title: 'Taken', field: 'taken', width: 70, sortable: true, align: 'right' },\r\n { title: '% Eff.', field: 'eff', width: 70, sortable: true, align: 'right' },\r\n { title: 'Sale Value', field: 'sale', width: 60, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Cost Value', field: 'cost', width: 70, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Profit', field: 'profit', width: 70, sortable: true, align: 'right' },\r\n { title: 'Margin %', field: 'marginPerc', width: 70, sortable: true, align: 'right' },\r\n { title: 'Rec Rate ', field: 'recRate', width: 70, sortable: true, align: 'right', renderer: formatters.CurrencyThousandSeparator }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Services', active: true },\r\n { name: 'Invoiced Hours', active: true }\r\n];\r\nvar mainGrid, opGrid, wipsGrid;\r\nvar $ = window.$;\r\n\r\nconst InvoicedHours = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamStartDateType = params.get('startDateType') || '';\r\n let ParamBranchID = params.get('branchID') || '';\r\n\r\n let dateType = ParamStartDateType == 'ytd' ? 'year' : 'month';\r\n let startDate = moment().startOf(`${dateType}`).format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n BranchList: [],\r\n branchID: null\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await GetBranchDeportmentScreenDropdowns();\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.BranchList = res.data?.branchList || [];\r\n if (ParamBranchID) {\r\n newSt.branchID = res.data?.branchList.find((r) => r.id == ParamBranchID);\r\n }\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n const fieldChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n let token = AppStorage.getToken();\r\n\r\n const mainGridOnSuccessFunc = function (response) {\r\n var obj = {\r\n records: response.data.list,\r\n total: response.data.total\r\n };\r\n mainGrid.render(obj);\r\n };\r\n\r\n const opGridOnSuccessFunc = function (response) {\r\n var obj = {\r\n records: response.data.list,\r\n total: response.data.total\r\n };\r\n opGrid.render(obj);\r\n };\r\n const onSuccessWipFunc = function (response) {\r\n var obj = {\r\n records: response.data.list,\r\n total: response.data.total\r\n };\r\n wipsGrid.render(obj);\r\n };\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showWIPDetails: true, wipNumber: record.wipNumber, company: record.company }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const documentHandler = async (record) => {\r\n let res = await getAgedMeasuresViewDocument(record.invoiceFileName);\r\n if (res) {\r\n setState((st) => ({ ...st, showPdfModal: true, pdfFileData: res }));\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n\r\n const docEditButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n let isFile = record.invoiceFileName;\r\n const lnk = (\r\n documentHandler(record) : ''}>\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const NewWipcolumns = useMemo(() => {\r\n const tempCols = [...wipColumns];\r\n let wipNumberCol = tempCols.find((element) => element.field === 'wipNumber');\r\n let ViewDocCol = tempCols.find((element) => element.field === 'invoiceNumber');\r\n if (ViewDocCol) {\r\n ViewDocCol.renderer = docEditButton;\r\n }\r\n if (wipNumberCol) {\r\n wipNumberCol.renderer = editButton({});\r\n }\r\n return tempCols;\r\n });\r\n let getUrl = `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&branchID=${state.branchID?.id || ''}`;\r\n\r\n const pullInvoiceHours = async () => {\r\n window.$(`#tb_InvoicedHours`).grid('destroy', true, true);\r\n\r\n mainGrid = $('#tb_InvoicedHours').grid({\r\n primaryKey: 'branchID',\r\n\r\n dataSource: {\r\n url: getUrl,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: mainGridOnSuccessFunc\r\n },\r\n detailTemplate: '',\r\n columns: baseColumns,\r\n pager: { limit: 15 }\r\n });\r\n mainGrid.on('dataBound', function (e, records, totalRecords) {\r\n var recordsCount = records.length;\r\n var sumsold = 0,\r\n sumtaken = 0,\r\n sumeff = 0,\r\n sumsale = 0,\r\n sumcost = 0,\r\n sumprofit = 0,\r\n summarginPerc = 0,\r\n sumrecRate = 0,\r\n $tfoot;\r\n $.each(records, function () {\r\n sumsold += parseFloat(this.sold);\r\n sumtaken += parseFloat(this.taken);\r\n sumeff += parseFloat(this.eff);\r\n sumsale += parseFloat(this.sale);\r\n sumcost += parseFloat(this.cost);\r\n sumprofit += parseFloat(this.profit);\r\n summarginPerc += parseFloat(this.marginPerc);\r\n sumrecRate += parseFloat(this.recRate);\r\n });\r\n sumeff = parseFloat((sumsold / sumtaken) * 100);\r\n summarginPerc = parseFloat(summarginPerc / recordsCount);\r\n sumrecRate = parseFloat(sumrecRate / recordsCount);\r\n $tfoot = mainGrid.children('tfoot');\r\n $tfoot.children('tr[data-role=\"TotalAmount\"]').remove();\r\n $tfoot.children('tr[data-role=\"pager\"]').remove();\r\n $tfoot.prepend(\r\n ' | Total | ' +\r\n formatters.ToFixedSeparator(sumsold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumtaken) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumeff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcost) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumprofit) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(summarginPerc) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumrecRate) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n primaryKey: 'opno',\r\n\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: opGridOnSuccessFunc\r\n },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, opno) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, opno: opno },\r\n primaryKey: 'id',\r\n\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n success: onSuccessWipFunc\r\n },\r\n columns: NewWipcolumns,\r\n pager: { limit: 10 }\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullInvoiceHours();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.BranchList]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}${getUrl.includes('?') ? '&' : '?'}fileType=excel`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'InvoicedHours');\r\n };\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumIdleHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumProductiveHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumNonProductiveHours) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n headerFilter: false,\r\n primaryKey: 'rc',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: nominalColumns,\r\n detailTemplate: ''\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, rc) {\r\n console.log(rc, 'ressss');\r\n techGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, res: rc },\r\n headerFilter: false,\r\n primaryKey: 'rn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechFun\r\n },\r\n columns: techCol\r\n });\r\n });\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/IdleTimeAnalysis${getUrl.includes('?') ? '&' : '?'}fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'IdelTimeAnalysis');\r\n };\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list.map((p) => {\r\n console.log(p, 'p');\r\n return {\r\n ...p,\r\n totalAmount: p.currentMonthTotal + p.oneMonthTotal + p.twoMonthsTotal + p.threeMonthsTotal + p.fourMonthsAndOverTotal\r\n };\r\n }),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AgedMeasuresDashBoard;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\nconst baseColumns = [\r\n { field: 'branch', sortable: false, title: `Branch`, width: 180, filterable: false },\r\n {\r\n field: 'currentProvision',\r\n title: `Current Provision`,\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'provisionRequired',\r\n sortable: true,\r\n title: `Provision Required`,\r\n width: 130,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'provisionDifference',\r\n sortable: true,\r\n title: `Provision Difference`,\r\n width: 140,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n { field: 'totalAmount', sortable: true, title: `Total`, width: 120, showColumnTotal: true, align: 'right', filterable: false, isCurrency: true },\r\n { field: 'currentMonthTotal', sortable: true, title: `Current`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n {\r\n field: 'oneMonthTotal',\r\n sortable: true,\r\n title: `1 Month`,\r\n width: 150,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false\r\n },\r\n { field: 'twoMonthsTotal', sortable: true, title: `2 Months`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n { field: 'threeMonthsTotal', sortable: true, title: `3 Months`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n {\r\n field: 'fourMonthsAndOverTotal',\r\n sortable: true,\r\n title: '4+ Months',\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false\r\n },\r\n {\r\n field: 'unallocatedItemsTotal',\r\n title: 'Unallocated',\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n }\r\n];\r\n// const crumbs = (path) => [\r\n// { name: 'Home', path: '/' },\r\n// { name: 'Aged Measures', path: '/AgedMeasures' },\r\n// { name: `${path}`, active: true }\r\n// ];\r\n\r\nconst crumbs = (val, menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Reports', path: '/ReportsDashboard' });\r\n }\r\n if (val) {\r\n list.push({ name: 'Aged Measures', path: '/AgedMeasures' }, { name: val, active: true });\r\n }\r\n return list;\r\n};\r\n\r\nconst GetAllBranchByAgedMeasures = (props) => {\r\n const history = useHistory();\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Measuredesc = params.get('measuredesc') || '';\r\n let MeasureID = params.get('MeasureID') || '';\r\n const redirectToScreens = (value, record, MeasureID, field) => {\r\n let searchQuery = `?branchID=${record.branchID}&bn=${\r\n record.branch\r\n }&measuredesc=${Measuredesc}&MeasureID=${MeasureID}&fromPage=${'Aged Measures'}&month=${field.month == 0 ? 0 : field.month || ''}&unallocated=${\r\n field.unallocated || ''\r\n }`;\r\n if (MeasureID == '1') {\r\n history.push({\r\n pathname: '/sales/AgedMeasuresWorkingProgress',\r\n search: searchQuery\r\n });\r\n } else if (MeasureID == '17') {\r\n history.push({\r\n pathname: '/sales/AgedMeasuresWorkingProgress',\r\n search: `${searchQuery}&DepartmentDes=${record.department}&departmentCode=${record.departmentCode}`\r\n });\r\n } else if (MeasureID == '2') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n search: searchQuery\r\n });\r\n } else if (MeasureID == '6' || MeasureID == '21') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n search: `${searchQuery}&departmentCode=${record.departmentCode}&isGroupingById=prSentTo`\r\n });\r\n } else if (MeasureID == '3' || MeasureID == '4' || MeasureID == '5' || MeasureID == '7') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n search: `${searchQuery}&departmentCode=${record.departmentCode}`\r\n });\r\n } else return false;\r\n };\r\n\r\n const editButton = (field) => (value, record) => {\r\n let isClickable = record.accessAllowed.trim() === 'Y';\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, MeasureID, field) : ''}\r\n style={{ cursor: isClickable ? 'pointer' : '' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const monthsActionHandler = (field) => (value, record) => {\r\n let isClickable = record.accessAllowed.trim() === 'Y';\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, MeasureID, field) : ''}\r\n style={{ cursor: isClickable ? 'pointer' : '' }}\r\n >\r\n {addCommas(value)}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n // const totalAmountWrapper = (value, record) => {\r\n // const spn = document.createElement('span');\r\n // const lnk = (\r\n // \r\n // {addCommas(record.currentMonthTotal + record.oneMonthTotal + record.twoMonthsTotal + record.threeMonthsTotal + record.fourMonthsAndOverTotal)}\r\n // \r\n // );\r\n // ReactDOM.render(lnk, spn);\r\n // return spn;\r\n // };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let branchCol = tempCols.find((element) => element.field === 'branch');\r\n // let totalAmount = tempCols.find((element) => element.field === 'totalAmount');\r\n let currentMonthTotalCol = tempCols.find((element) => element.field === 'currentMonthTotal');\r\n let oneMonthTotalCol = tempCols.find((element) => element.field === 'oneMonthTotal');\r\n let twoMonthTotalCol = tempCols.find((element) => element.field === 'twoMonthsTotal');\r\n let threeMonthTotalCol = tempCols.find((element) => element.field === 'threeMonthsTotal');\r\n let fourPlusMonthTotalCol = tempCols.find((element) => element.field === 'fourMonthsAndOverTotal');\r\n let unallocatedTotalCol = tempCols.find((element) => element.field === 'unallocatedItemsTotal');\r\n if (branchCol) {\r\n branchCol.renderer = editButton({});\r\n }\r\n // if (totalAmount) {\r\n // totalAmount.renderer = totalAmountWrapper;\r\n // }\r\n if (currentMonthTotalCol) {\r\n currentMonthTotalCol.renderer = monthsActionHandler({ month: 0, toolTipLabel: 'currentMonthCount' });\r\n }\r\n if (oneMonthTotalCol) {\r\n oneMonthTotalCol.renderer = monthsActionHandler({ month: 1, toolTipLabel: 'oneMonthCount' });\r\n }\r\n if (twoMonthTotalCol) {\r\n twoMonthTotalCol.renderer = monthsActionHandler({ month: 2, toolTipLabel: 'twoMonthsCount' });\r\n }\r\n if (threeMonthTotalCol) {\r\n threeMonthTotalCol.renderer = monthsActionHandler({ month: 3, toolTipLabel: 'threeMonthsCount' });\r\n }\r\n if (fourPlusMonthTotalCol) {\r\n fourPlusMonthTotalCol.renderer = monthsActionHandler({ month: 4, toolTipLabel: 'fourMonthsAndOverCount' });\r\n }\r\n if (unallocatedTotalCol) {\r\n unallocatedTotalCol.renderer = monthsActionHandler({ unallocated: 1, toolTipLabel: 'unallocatedItemsCount' });\r\n }\r\n return tempCols;\r\n }, [MeasureID]);\r\n\r\n const baseUrl = `AgedMeasures/GetAllBranchByAgedMeasures?MeasureID=${MeasureID}`;\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list.map((p) => {\r\n return {\r\n ...p,\r\n totalAmount: p.currentMonthTotal + p.oneMonthTotal + p.twoMonthsTotal + p.threeMonthsTotal + p.fourMonthsAndOverTotal\r\n };\r\n }),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n // hidePagination={true}\r\n hideFilterRow={true}\r\n downloadName={Measuredesc || 'Aged Measures'}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetAllBranchByAgedMeasures;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../../Core/Service/storage-service';\r\nimport formatters from '../../../../../../Core/Grid/inputFormatter';\r\n\r\n\r\n\r\nconst getCrumbs = (menuPermissionCounter,ParamMeasureID, ParamMeasuredesc, ParamBranchName, ParamMonth, ParamUnallocated) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '' },\r\n // { name: 'Aged Measures', active: true }\r\n ];\r\n if (menuPermissionCounter !== 1) {\r\n final.push({ name: 'Reports', path: '/ReportsDashboard' });\r\n } \r\n final.push({ name: 'Aged Measures', path: '/AgedMeasures' });\r\n \r\n if (ParamMeasureID == '2') {\r\n temp = { name: `${ParamMeasuredesc}`, path: '/AgedMeasures/DirtyUnits' };\r\n } else {\r\n temp = { name: `${ParamMeasuredesc}`, active: true };\r\n }\r\n final = [...final, { ...temp }];\r\n if (ParamBranchName) {\r\n temp = {\r\n name: `${ParamBranchName} ${ParamMonth > 0 ? `(${ParamMonth} ${ParamMonth == 1 ? 'Month' : 'Months'})` : ''} ${\r\n ParamUnallocated > 0 ? `(Unallocated)` : ''\r\n }`,\r\n active: true\r\n };\r\n }\r\n final = [...final, { ...temp }];\r\n return final;\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Part Number', field: 'pnp', width: 110, sortable: true },\r\n { title: 'Description', field: 'pd', width: 150, sortable: true },\r\n { title: 'Quantity', field: 'qty', width: 100, sortable: true, align: 'right' },\r\n {\r\n title: 'Surcharge',\r\n field: 'sv',\r\n width: 100,\r\n sortable: true,\r\n isCurrency: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Sale Surcharge',\r\n field: 'ssv',\r\n width: 100,\r\n sortable: true,\r\n isCurrency: true,\r\n align: 'right'\r\n },\r\n { title: 'Location', field: 'bl', width: 90, sortable: true },\r\n {\r\n title: 'Last Purchased',\r\n field: 'dlp',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Last Sold',\r\n field: 'dls',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Last Bought',\r\n field: 'dlb',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n { title: 'Months', field: 'am', width: 70, sortable: true, align: 'right' },\r\n { title: 'Days', field: 'ad', width: 70, sortable: true, align: 'right' }\r\n // { title: 'Branch', field: 'bn', width: 100, sortable: true }\r\n];\r\n\r\nconst GetAgedMeasuresDirtyUnits = (props) => {\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter()\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamMeasureID = params.get('MeasureID') || '';\r\n let ParamMeasuredesc = params.get('measuredesc') || '';\r\n let ParamMonth = params.get('month') || '';\r\n let ParamBranchName = params.get('bn') || '';\r\n let ParamBranchId = params.get('branchID') || params.get('branchId') || '';\r\n let ParamUnallocated = params.get('unallocated') || '';\r\n if (ParamMeasureID !== '2') {\r\n baseColumns.push({ title: 'Branch', field: 'bn', width: 100, sortable: true });\r\n }\r\n\r\n const baseUrl = `AgedMeasures/GetAgedMeasuresDirtyUnits?BranchID=${ParamBranchId}&mont=${ParamMonth}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetAgedMeasuresDirtyUnits;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport moment from 'moment';\r\nimport { PrimaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addReportingNotes, getReportingNotes } from '../../../../Core/Service/ReportScreens-service';\r\nimport './reportingNotes.scss';\r\nconst JobSingleNote = (props) => {\r\n return (\r\n \r\n
{props.note.reportingAccountQueryNotes}
\r\n
\r\n {props.note.userName} @ {moment(props.note.reportingAccountQueryCreated).format('LLL')}\r\n
\r\n
\r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n {state.showLoader ? (\r\n \r\n \r\n
\r\n \r\n | Invoice Name | \r\n Stockbook Number | \r\n Order Date | \r\n Reg Date | \r\n
\r\n \r\n | {iname} | \r\n {sn} | \r\n {od} | \r\n {rd} | \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n detailTemplate={detailTemplate}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetUsedAndNewVehicleDebt;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, Hidden, Collapse } from '@material-ui/core';\r\nimport { Multiselect, SecondaryButton, DatePicker } from '../../../../Core/FormInput';\r\nimport NestedGijgoGrid from '../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport { getReportsDropdowns } from '../../../../Core/Service/reportService';\r\nimport FilterListIcon from '@material-ui/icons/FilterList';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst baseColumns = [\r\n { title: 'Type', field: 'moi_type', width: 40, sortable: true },\r\n { title: 'Sales Type', field: 'salestypedesc', width: 55, sortable: true },\r\n { title: 'Branch', field: 'branchdesc', width: 110, sortable: true },\r\n { title: 'Date', field: 'solddate', width: 59, sortable: true },\r\n { title: 'Name', field: 'name', width: 90, sortable: true },\r\n { title: 'Make', field: 'modelofinterestmanu', width: 80, sortable: true },\r\n { title: 'Model', field: 'modelofinterestmodel', width: 130, sortable: true },\r\n { title: 'Reg No', field: 'regNo', width: 55, sortable: true },\r\n // { title: 'Profit', field: 'ownedbydesc', width: 80, sortable: true },// need to add this column\r\n { title: 'Media', field: 'mediasourcelabel', width: 70, sortable: true },\r\n {\r\n title: 'Cash/Finance',\r\n field: 'isfinanced',\r\n width: 60,\r\n sortable: true\r\n },\r\n { title: 'Sales Exec', field: 'ownedbydesc', width: 70, sortable: true }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return `\r\n
\r\n \r\n | Id | \r\n Monthly Payment | \r\n Deposit | \r\n Mileage | \r\n Description | \r\n PX Reg | \r\n PX DOR | \r\n PX Condition | \r\n PX Offer | \r\n Settlement | \r\n
\r\n \r\n | {enquiry_id} | \r\n {approxmonthlypayment} | \r\n {deposit} | \r\n {Mileage} | \r\n {px_description} | \r\n {partExchange} | \r\n {px_dor} | \r\n {px_condition} | \r\n {px_offered} | \r\n {px_settlement} | \r\n
\r\n
\r\n
{partExchange} | \r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Enquiry', path: '/', active: true }\r\n];\r\n\r\nconst EnquirieList = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n\r\n let startDate = moment().startOf('month').format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n moiType: '',\r\n isReload: null,\r\n franchiseIds: [],\r\n bnIds: [],\r\n branchList: [],\r\n franchise: []\r\n });\r\n\r\n const [checked, setChecked] = React.useState(false);\r\n\r\n const handleChange = () => {\r\n setChecked((prev) => !prev);\r\n };\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n brnIds: [],\r\n fnIds: []\r\n });\r\n useEffect(async () => {\r\n let DropDownRes = await getReportsDropdowns();\r\n if (DropDownRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: DropDownRes.data.branch,\r\n franchise: DropDownRes.data.franchiseCode\r\n }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n startDate: params.get('start') || startDate,\r\n endDate: params.get('end') || endDate,\r\n moiType: params.get('type') || '',\r\n franchiseIds: props.location?.state?.fnCode,\r\n bnIds: props.location?.state?.bn\r\n }));\r\n }, [window.location.search]);\r\n\r\n useEffect(() => {\r\n if (state.branchList.lenght > 0 || state.franchise.length > 0) {\r\n const selectedfranchises = state.franchise.filter((w) => props.location?.state?.fnCode?.indexOf(w.id) > -1);\r\n const selectedCust = state.branchList.filter((w) => props.location?.state?.bn?.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({\r\n ...st,\r\n brnIds: selectedCust,\r\n fnIds: selectedfranchises\r\n }));\r\n }\r\n }, [props.location?.state, state.branchList, state.franchise]);\r\n\r\n const fieldChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n const handleChanges = (e, value) => {\r\n setSelectedData((st) => ({ ...st, brnIds: value }));\r\n setState((st) => {\r\n const nst = { ...st, bnIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangesfranch = (e, value) => {\r\n setSelectedData((st) => ({ ...st, fnIds: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchiseIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n let FranchiseCode = `FranchiseCode=${state.franchiseIds.join('&FranchiseCode=')}`;\r\n let BranchID = state.bnIds.length > 0 ? `BranchID=${state.bnIds.join('&BranchID=')}` : '';\r\n const RenderFinance = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {record.isfinanced}({record.financeterm})\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let isFinancedCol = tempCols.find((element) => element.field === 'isfinanced');\r\n if (isFinancedCol) {\r\n isFinancedCol.renderer = RenderFinance();\r\n }\r\n return tempCols;\r\n }, []);\r\n const baseUrl = `AgedMeasures/GetEnquirieList?moi_type=${state.moiType}&StartDate=${state.startDate}&EndDate=${state.endDate}&${FranchiseCode}&${BranchID}`;\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Filters\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
| \r\n ))}\r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n {props.data.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n
\r\n {' '}\r\n
\r\n
{m.name}
\r\n
({m.total})
\r\n
\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Work In Progress Clocked Hours\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Service Warranty Write off\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Part Warranty Write off\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Sold Hours By Month Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sold Hours By Branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n Customer Notes\r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default InvoiceCustomersNoteScreen;","import { Grid } from '@material-ui/core';\r\nimport React, { useMemo } from 'react';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../ReportsScreens/GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport { NoteAdd } from '@material-ui/icons';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { SecondaryButton, SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport InvoiceCustomersAddScreen from './addScreen';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport InvoiceCustomersEditScreen from './editScreen';\r\nimport InvoiceCustomersNoteScreen from './noteScreen';\r\nimport { getCustomerExcelFile } from '../../../../Core/Service/customer-services';\r\nimport moment from 'moment/moment';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { Tooltip, IconButton } from '@material-ui/core';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: `Action`, width: 30, filterable: false },\r\n {\r\n field: 'name',\r\n title: `Customer Name`,\r\n width: 120\r\n },\r\n {\r\n field: 'customerCode',\r\n title: `Code`,\r\n width: 40\r\n },\r\n {\r\n field: 'invoiceEmail',\r\n title: `Invoice Email`,\r\n width: 120\r\n },\r\n {\r\n field: 'address1',\r\n title: `Address`,\r\n width: 120\r\n },\r\n {\r\n field: 'town',\r\n title: `Town`,\r\n width: 80\r\n },\r\n {\r\n field: 'contactName',\r\n title: `Contact Name`,\r\n width: 100\r\n }\r\n];\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Invoices', active: true },\r\n { name: `Customers`, active: true }\r\n];\r\n\r\nconst InvoiceCustomersListScreen = (props) => {\r\n const [state, setState] = useState({ showModal: false });\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n \r\n handleNote(record)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let branchCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (branchCol) {\r\n branchCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, [props.MeasureID]);\r\n\r\n const handleEdit = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showEditModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleNote = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showNoteModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleEditClose = (res) => {\r\n let newSt = {};\r\n newSt.showEditModal = false;\r\n newSt.showNoteModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const downloadCSVWrapper = async () => {\r\n getCustomerExcelFile();\r\n };\r\n\r\n const baseUrl = `Customers/CustomerList`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: true\r\n }))\r\n }\r\n startIcon={}\r\n >\r\n Add Customer\r\n \r\n */}\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n // records: res?.data?.list.map((p) => ({ ...p })),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n\r\n {state.showModal ? (\r\n
handleClose(false)} fullWidth>\r\n handleClose(true)} />\r\n \r\n ) : null}\r\n {state.showEditModal ? (\r\n
handleEditClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showNoteModal ? (\r\n
handleEditClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n
\r\n {/* \r\n \r\n Send Email\r\n \r\n */}\r\n \r\n \r\n \r\n Send Email\r\n \r\n \r\n \r\n {state.error.email}\r\n \r\n \r\n {/* Email */}\r\n \r\n {state.error.invoiceMessageText}\r\n \r\n \r\n SubmitMessage(false)}>\r\n send\r\n \r\n \r\n \r\n SubmitMessage(true)}>\r\n Close Message\r\n \r\n \r\n \r\n {state.messageList.length > 0 ? (\r\n \r\n {state.messageList.map((m) => (\r\n
\r\n
{m.invoiceMessageText}
\r\n\r\n
\r\n \r\n From User: {m.invoiceMessageFromUser} @ {moment(m.invoiceMessageDateSent).format('LLL')} {' '}\r\n {m.invoiceMessageReplyUser\r\n ? `( Reply by :\r\n ${m.invoiceMessageReplyUser ? m.invoiceMessageReplyUser : ''} @\r\n ${m.invoiceMessageDateReplied ? moment(m.invoiceMessageDateReplied).format('LLL') : ''} )`\r\n : ''}\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n
No Messages Available
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Invoice Number\r\n \r\n \r\n \r\n WIP Number\r\n \r\n \r\n \r\n Invoice Net\r\n \r\n \r\n \r\n Invoice Gross Value\r\n \r\n \r\n \r\n Post Date\r\n \r\n \r\n \r\n \r\n Status\r\n \r\n \r\n \r\n \r\n Customer\r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Update Invoice\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n alert('Functionallity is pending')}>\r\n Upload\r\n \r\n */}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditInvoice;\r\n","import React from 'react';\r\nimport { Grid, InputLabel, Checkbox, FormHelperText } from '@material-ui/core';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport { SecondaryButton } from './../../../../Core/FormInput/AppButton';\r\nimport { Alert } from '@material-ui/lab';\r\nimport { getsendInvoice } from '../../../../Core/Service/internal_Invoice-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { postMulitpleInvoices } from './../../../../Core/Service/internal_Invoice-service';\r\nimport AppContext from './../../../../App/AppContext';\r\nimport { useContext } from 'react';\r\n\r\nconst SendInvoices = (props) => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n showAlert: false,\r\n error: {}\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.invoiceIDList.length > 0) {\r\n let res = await getsendInvoice(props.invoiceIDList);\r\n setState((st) => ({\r\n ...st,\r\n multiInvoiceFileName: res.multiInvoiceFileName,\r\n multiInvoiceId: res.multiInvoiceId,\r\n multiInvoiceNo: res.multiInvoiceNo,\r\n sendInvoiceContent: res.sendInvoiceContent,\r\n sendInvoiceEmail: res.sendInvoiceEmail\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAlert: true\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n let Validation = () => {\r\n let isValid = true;\r\n let error = {};\r\n if (!state.sendInvoiceContent) {\r\n isValid = false;\r\n error.sendInvoiceContent = 'Email Message is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n error: error\r\n }));\r\n return isValid;\r\n };\r\n\r\n const SubmitMessage = async () => {\r\n if (Validation()) {\r\n let data = {\r\n multiInvoiceId: state.multiInvoiceId,\r\n multiInvoiceNo: state.multiInvoiceNo,\r\n sendInvoiceContent: state.sendInvoiceContent,\r\n sendInvoiceEmail: state.sendInvoiceEmail,\r\n multiInvoiceFileName: state.multiInvoiceFileName\r\n };\r\n let res = await postMulitpleInvoices(data);\r\n if (res.success) {\r\n showToast(`Invoice Message Send Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {state.showAlert ? (\r\n
\r\n \r\n \r\n Please Select some Invoices No to Send the Invoice.\r\n \r\n \r\n \r\n ) : (\r\n
\r\n \r\n Invoice Numbers:\r\n
\r\n \r\n \r\n {state.multiInvoiceNo}\r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n selectionType=\"multiple\"\r\n selectionMethod=\"checkbox\"\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n hideFilterRow={false}\r\n showCheckboxColFilterBtn={mailButton}\r\n downloadName={crumbsList[+props.status] || 'All Invoices'}\r\n />\r\n {state.showInvoiceMessage ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showInvoiceMessage: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showInvoiceMessage: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoice={state.invoice}\r\n />\r\n \r\n ) : null}\r\n {state.showEditInvoice ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showEditInvoice: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showEditInvoice: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoiceID={state.invoiceID}\r\n invoiceNo={state.invoiceNo}\r\n />\r\n \r\n ) : null}\r\n {state.showSendInvoice ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showSendInvoice: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showSendInvoice: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoiceIDList={state.invoiceIDList}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default InvoiceScreens;\r\n","import React, { useEffect, useContext, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AppContext from '../../App/AppContext';\r\nimport { Link, useHistory } from 'react-router-dom';\r\nimport { Avatar, Card, CardContent, Typography, Container, makeStyles, Tooltip } from '@material-ui/core';\r\nimport '../Auditor/Dashboard/dashboard.scss';\r\nimport { getDashboardForInvoice } from '../../Core/Service/InvoiceScreen-service';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport PeopleIcon from '@material-ui/icons/People';\r\nimport { getCustomerDashboard } from '../../Core/Service/customer-services';\r\nimport { getCommunicatorDash } from '../../Core/Service/CustUserCommunicator/communicator-service';\r\nimport { AppStorage } from './../../Core/Service/storage-service';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport TimerIcon from '@material-ui/icons/Timer';\r\nimport CalendarTodayIcon from '@material-ui/icons/CalendarToday';\r\nimport DateRangeIcon from '@material-ui/icons/DateRange';\r\nimport MessageIcon from '@material-ui/icons/Message';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AnnouncementIcon from '@material-ui/icons/Announcement';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport TelegramIcon from '@material-ui/icons/Telegram';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport DoneAllIcon from '@material-ui/icons/DoneAll';\r\nimport LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';\r\nimport ShoppingCartIcon from '@material-ui/icons/ShoppingCart';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport EventAvailableIcon from '@material-ui/icons/EventAvailable';\r\nimport DialogComp from '../../Core/Modal/dialogModal';\r\nimport BookingRequestedModal from './bookingRequested/bookingRequestedModal';\r\nimport { SecondaryButton } from '../../Core/FormInput';\r\nimport CancelPresentationIcon from '@material-ui/icons/CancelPresentation';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport ScheduleIcon from '@material-ui/icons/Schedule';\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n border: '2px solid rgb(90 114 123 / 20%)',\r\n Opacity: 0.9,\r\n minWidth: 345,\r\n borderRadius: 15,\r\n boxShadow: 'rgb(90 114 123 / 11%) 0px 7px 30px 0px',\r\n paddingBottom: 20\r\n },\r\n\r\n avatar: {\r\n height: 40,\r\n width: 40\r\n }\r\n}));\r\n\r\nexport const RenderTiles = (props) => {\r\n const classes = useStyles();\r\n const { cards, label } = props;\r\n let history = useHistory();\r\n\r\n let onChange = (val, logID) => {\r\n let tempUrlObj = { state: logID ? logID : '' };\r\n if (val.pathname) {\r\n tempUrlObj = { ...val, ...tempUrlObj };\r\n } else {\r\n tempUrlObj = { pathname: val, ...tempUrlObj };\r\n }\r\n history.push(tempUrlObj);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {props.label}\r\n \r\n\r\n \r\n {cards?.map((m, i) => {\r\n let Icons = m.icon;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {Icons}\r\n \r\n {m?.name}
\r\n\r\n {m?.count}\r\n \r\n Bookings\r\n
\r\n Request Booking\r\n
\r\n
\r\n \r\n {AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled ? (\r\n \r\n \r\n \r\n ) : null}\r\n {AppStorage.getInvoiceAllowed() && (\r\n \r\n \r\n \r\n )}\r\n {AppStorage.getCommunicatorAllowed() && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n {state.isBookingRequesteModal && (\r\n // closeModal(false)} maxWidth=\"md\" fullWidth overflow=\"auto\">\r\n \r\n // \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustCommonDash;\r\n","import React, { useEffect, useContext, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport { Avatar, Card, CardContent, Typography, Container } from '@material-ui/core';\r\nimport '../../../Auditor/Dashboard/dashboard.scss';\r\nimport { getDashboardForInvoice } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport PeopleIcon from '@material-ui/icons/People';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AnnouncementIcon from '@material-ui/icons/Announcement';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport TelegramIcon from '@material-ui/icons/Telegram';\r\nimport { RenderTiles } from '../../../customer/CustCommonDash';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nconst InvoicesDashboard = (props) => {\r\n const [state, setState] = useState({\r\n rows_new: []\r\n });\r\n const { showToast, userRoles } = useContext(AppContext);\r\n let isCustomer = userRoles[0] === 'customer';\r\n\r\n useEffect(async () => {\r\n let res = await getDashboardForInvoice();\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows_new: res.data.list[0] }));\r\n } else {\r\n showToast(res.message);\r\n }\r\n }, []);\r\n const cards = [\r\n {\r\n id: 1,\r\n name: 'All Invoices',\r\n color: '#1abc9c',\r\n count: state.rows_new.allInvoices || 0,\r\n icon: ,\r\n url: '/invoice/allInvoices'\r\n },\r\n {\r\n id: 2,\r\n name: 'Invoices Outstanding',\r\n color: '#2ecc71',\r\n count: state.rows_new.unPaidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Outstanding'\r\n },\r\n {\r\n id: 3,\r\n name: 'Invoices Queried',\r\n color: '#e74c3c',\r\n count: state.rows_new.queriedCount || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Queried'\r\n },\r\n {\r\n id: 4,\r\n name: 'Invoices Paid',\r\n color: '#3498db',\r\n count: state.rows_new.paidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Paid'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Sent',\r\n color: '#95a5a6',\r\n count: state.rows_new.messagesSent || 0,\r\n icon: ,\r\n url: '/invoice/messagesSent'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Received',\r\n color: '#9b6bcc',\r\n count: state.rows_new.messagesReceived || 0,\r\n icon: ,\r\n url: '/invoice/messagesReceived'\r\n }\r\n ];\r\n\r\n if (!isCustomer) {\r\n cards.push({\r\n id: 5,\r\n name: 'Total Customer',\r\n color: '#2ecc71',\r\n count: state.rows_new.customerCount || 0,\r\n icon: ,\r\n url: '/invoice/Customers'\r\n });\r\n }\r\n\r\n return (\r\n // \r\n //
\r\n // \r\n // {cards.map((option) => (\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // {option.icon ? option.icon : £}\r\n // \r\n // \r\n // \r\n // \r\n // {option.count}\r\n // \r\n // \r\n // {option.name}\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // ))}\r\n // \r\n // \r\n //
\r\n \r\n {AppStorage.getInvoiceAllowed() && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n};\r\nexport default InvoicesDashboard;\r\n","import React from 'react';\r\nimport './budgetCommon.scss';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\n\r\nexport const FilterBtn = (props) => {\r\n const { active, children, ...rest } = props;\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const FilterBtnWithIcon = (props) => {\r\n const { active, children, ...rest } = props;\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const BudgetSendBtn = (props) => {\r\n return (\r\n <>\r\n \r\n {' '}\r\n {' '}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const SmallBudgetSendBtn = (props) => {\r\n return (\r\n <>\r\n \r\n {' '}\r\n {' '}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const LinkedButton = (props) => {\r\n return (\r\n <>\r\n \r\n {props.children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const SmallLinkedButton = (props) => {\r\n return (\r\n <>\r\n \r\n {props.children}\r\n
\r\n \r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport './wipHours.scss';\r\nimport { Grid, Typography } from '@material-ui/core';\r\n\r\nconst GraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 12,\r\n border: '1px solid #f9f9f9',\r\n padding: 4,\r\n backgroundColor: '#E31C48',\r\n textAlign: 'center',\r\n color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 12,\r\n border: '1px solid #f9f9f9',\r\n padding: 4,\r\n backgroundColor: 'white',\r\n border: '1px solid rgba(0,0,0,0.03)',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyGraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 14,\r\n // border: '1px solid #f9f9f9',\r\n padding: 6,\r\n backgroundColor: '#f9f9f9',\r\n textAlign: 'center',\r\n color: '#f9f9f9'\r\n },\r\n body: {\r\n fontSize: 14,\r\n border: '1px solid #f9f9f9',\r\n padding: 6,\r\n backgroundColor: 'white',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n },\r\n container: {\r\n // maxHeight: 200\r\n }\r\n});\r\n\r\nexport const WipGraphTable = (props) => {\r\n const [state, setState] = useState({\r\n index: 0\r\n });\r\n\r\n const handleIndex = (index) => {\r\n setState((st) => ({ ...st, index: index }));\r\n };\r\n const temp = [];\r\n const newtemp = [];\r\n\r\n props.data.forEach((q) => {\r\n let date = newtemp.findIndex((t) => t.date == q.date);\r\n if (date > -1) {\r\n newtemp[date]['monthTotal'] += q.hours;\r\n } else {\r\n newtemp.push({\r\n date: q.date,\r\n monthTotal: q.hours\r\n });\r\n }\r\n });\r\n props.data.forEach((q) => {\r\n let isIDExist = temp.findIndex((t) => t.branchID == q.branchID);\r\n if (isIDExist > -1) {\r\n temp[isIDExist].data.push({ date: q.date, hours: q.hours });\r\n } else {\r\n temp.push({\r\n branchID: q.branchID,\r\n branch: q.branch,\r\n data: [{ date: q.date, hours: q.hours }]\r\n });\r\n }\r\n });\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n branch\r\n {temp[0]?.data.map((m, i) => {\r\n return (\r\n <>\r\n {m.date}\r\n {/* Hours */}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Total\r\n \r\n {newtemp?.map((m, index) => {\r\n return (\r\n <>\r\n \r\n {m.monthTotal}\r\n \r\n \r\n );\r\n })}\r\n \r\n {temp?.map((m, index) => {\r\n return (\r\n handleIndex(index)}>\r\n \r\n {m.branch}\r\n \r\n\r\n {m?.data.map((n, i) => {\r\n return (\r\n <>\r\n {/* \r\n {n.date}\r\n */}\r\n \r\n {n.hours}\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\n// export const WipTiles = (props) => {\r\n// const temp = [];\r\n// props.data.forEach((q) => {\r\n// let isIDExist = temp.findIndex((t) => t.branchID == q.branchID);\r\n// if (isIDExist > -1) {\r\n// temp[isIDExist].data.push({ date: q.date, hours: q.hours });\r\n// } else {\r\n// temp.push({\r\n// branchID: q.branchID,\r\n// branch: q.branch,\r\n// data: [{ date: q.date, hours: q.hours }]\r\n// });\r\n// }\r\n// });\r\n\r\n// return (\r\n// \r\n// {temp.map((m, i) => {\r\n// return (\r\n// \r\n// \r\n// {m.branch}\r\n// \r\n// \r\n// \r\n// {m.data.map((n) => {\r\n// return (\r\n// <>\r\n// \r\n// {n.date}\r\n// {n.hours}\r\n// \r\n// \r\n// );\r\n// })}\r\n// \r\n// \r\n// \r\n// );\r\n// })}\r\n//
\r\n// );\r\n// };\r\n","import { Typography } from '@material-ui/core';\r\n// import { color } from 'html2canvas/dist/types/css/types/color';\r\nimport React, { PureComponent } from 'react';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\nimport { WipGraphTable, WipTiles } from './wipTable';\r\n\r\nconst COLORS = {\r\n 0: '#0074D9',\r\n 1: '#FF4136',\r\n 2: '#2ECC40',\r\n 3: '#FF851B',\r\n 4: '#7FDBFF',\r\n 5: '#B10DC9',\r\n 6: '#FFDC00',\r\n 7: '#C33C9A',\r\n 8: '#39CCCC',\r\n 9: '#01FF70',\r\n 10: '#85144b',\r\n 11: '#F012BE',\r\n 12: '#3D9970',\r\n 13: '#111111',\r\n 14: '#AAAAAA'\r\n};\r\n\r\nclass CustomizedLabel extends PureComponent {\r\n render() {\r\n const { x, y, stroke, value } = this.props;\r\n\r\n return (\r\n \r\n {value}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const WIPLineCharts = (props) => {\r\n return (\r\n <>\r\n \r\n {props.label}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.tempData && }\r\n {props?.keys ? (\r\n props.keys.map((m, i) => {\r\n return ;\r\n })\r\n ) : (\r\n } />\r\n )}\r\n \r\n \r\n {props.showTable ? : null}\r\n \r\n );\r\n};\r\n","import { CircularProgress, Grid, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport './ReportingScreensStyle.scss';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList, Legend, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\r\nimport { RenderTiles } from '../../customer/CustCommonDash';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport GraphicEqIcon from '@material-ui/icons/GraphicEq';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport TimerIcon from '@material-ui/icons/Timer';\r\nimport { WIPLineCharts } from './WIpHours/WipLineChart';\r\n\r\nfunction isFiniteCheck(str) {\r\n return isFinite(str) ? str.toFixed(2) : '0.00';\r\n}\r\n\r\nvar colorCombi = {\r\n 0: { succ: '#abeaab', fail: '#e58f87' },\r\n 1: { succ: '#188f18', fail: '#792222' }\r\n};\r\n\r\nconst COLORS = {\r\n 0: '#0074D9',\r\n 1: '#FF4136',\r\n 2: '#2ECC40',\r\n 3: '#FF851B',\r\n 4: '#7FDBFF',\r\n 5: '#B10DC9',\r\n 6: '#FFDC00',\r\n 7: '#C33C9A',\r\n 8: '#39CCCC',\r\n 9: '#01FF70',\r\n 10: '#85144b',\r\n 11: '#F012BE',\r\n 12: '#3D9970',\r\n 13: '#111111',\r\n 14: '#AAAAAA'\r\n};\r\n\r\nconst minMaxYAxisCal = (dataMin, dataMax) => {\r\n // return [dataMin, dataMax];\r\n const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax));\r\n // if (dataMax < 0) {\r\n // dataMin = dataMin + dataMin / 10;\r\n // dataMax = 0 - dataMin / 10;\r\n // }\r\n // else {\r\n // dataMin = dataMin + dataMin / 10;\r\n // dataMax = dataMax + dataMax / 5;\r\n // }\r\n\r\n return [-absMax - absMax / 6, absMax + absMax / 6];\r\n};\r\n\r\nconst CustomTooltip = ({ active, payload, label, formatter }) => {\r\n if (active && payload && payload.length) {\r\n return (\r\n \r\n
{label}
\r\n
\r\n {payload[0].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[0].value) : +payload[0].value}\r\n
\r\n
\r\n
{label}
\r\n
\r\n {payload[0].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[0].value) : +payload[0].value}\r\n
\r\n
\r\n {payload[1].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[1].value) : +payload[1].value}\r\n
\r\n
\r\n
{BudgetMTD || 0}
\r\n
{BudgetYTD || 0}
\r\n \r\n \r\n \r\n\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n Franchise\r\n MTD\r\n YTD\r\n {/* MTD Budget\r\n YTD Budget */}\r\n \r\n \r\n \r\n {row.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.franchiseName}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.mtdTotal)}\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdTotal)}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const StockCard = (props) => {\r\n const { row, label } = props;\r\n\r\n return (\r\n \r\n \r\n {row.map((n) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n \r\n \r\n \r\n Current Stock Value\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.currentStockTotal)}\r\n \r\n \r\n\r\n \r\n Average Stock Value\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.currentStockTotal / n.currentStockCount)}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 0 - 30 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total0to30)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count0to30)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 31 -60 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total31to60)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count31to60)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 61 - 90 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total61to90)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count61to90)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 91 - 120 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total91to120)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count91to120)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 121 - 150 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total121to150)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count121to150)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 150+ DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total150Plus)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count150Plus)}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nlet configIndex = [\r\n { name: 'MTD Hours', keyName: 'mtdSold' },\r\n { name: 'Hours Taken', keyName: 'mtdTaken' },\r\n { name: 'Available Hours', keyName: 'ytdAvailable' },\r\n { name: 'YTD Hours', keyName: 'ytdSold' },\r\n { name: 'YTD Taken', keyName: 'ytdTaken' }\r\n];\r\nlet configIndex2 = [\r\n { name: 'MTD Sold', keyName: 'mtdSale' },\r\n { name: 'YTD Sold', keyName: 'ytdSale' }\r\n];\r\n\r\nexport const AfterSaleCombined = (props) => {\r\n const classes = useStyles();\r\n const { row, label } = props;\r\n const history = useHistory();\r\n\r\n props.list.forEach((o, i) => {\r\n configIndex.forEach((p) => {\r\n p[`${o.bn}`] = o[p.keyName];\r\n });\r\n configIndex2.forEach((p) => {\r\n p[`${o.bn}`] = o[p.keyName];\r\n });\r\n });\r\n\r\n const GoToDailyInvoicedHours = (params) => {\r\n let searchQuery = `startDateType=${params?.startDateType || ''}&branchID=${params?.branchId || ''}`;\r\n history.push({\r\n pathname: `/Services/InvoicedHours`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n \r\n \r\n \r\n Sold Hours\r\n \r\n MTD\r\n\r\n GoToDailyInvoicedHours({ startDateType: 'mtd' })}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(props.sold)}\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(props.MTDTotalBudget) || 0}\r\n
\r\n \r\n
\r\n YTD\r\n GoToDailyInvoicedHours({ startDateType: 'ytd' })}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(props.YTDsold)}\r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(props.YTDTotalBudget) || 0}\r\n
\r\n
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.mtdBudget) || 0}\r\n
\r\n
\r\n YTD\r\n GoToDailyInvoicedHours({ startDateType: 'ytd' })}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.YTDsale)}\r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.ytdBudget) || 0}\r\n
\r\n
| \r\n ))}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* Dummy */}\r\n \r\n \r\n \r\n \r\n value.toFixed(2)} />\r\n \r\n \r\n \r\n\r\n {props.list.map((p, i) => {\r\n return (\r\n \r\n {props.list.map((entry, index) => (\r\n | \r\n ))}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n MTD Hours\r\n MTD Sold\r\n Hours Taken\r\n Available Hours\r\n Recovery Rate\r\n {/* MTD Cost */}\r\n YTD Hours\r\n YTD Sold\r\n YTD Taken\r\n {/* YTD Cost */}\r\n \r\n \r\n \r\n {props?.list.map((n, i) => {\r\n return (\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.bn}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.mtdSold)}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdSale)}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.mtdTaken)}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.ytdAvailable)}\r\n {formatters.CurrencyThousandSeparator(n.recRateTable)}\r\n\r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdSold)}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdSale)}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdTaken)}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Invoicing Hours\r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => value.toFixed(2)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'ThousandSeparatorWithoutZero' })}\r\n />\r\n\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Invoicing\r\n (£'s)\r\n \r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => value.toFixed(2)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'CurrencyThousandSeparatorWithoutZero' })}\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n Recovery Rate\r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => value.toFixed(2)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'CurrencyThousandSeparator' })}\r\n position=\"top\"\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Efficiency\r\n (Sold/Taken hrs)\r\n \r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => value.toFixed(2)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'PercentageFormatter' })}\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleBranchCardPart = (props) => {\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `desc=Total&code=MT&startDateType=${params?.startDateType || ''}&branchID=${params?.branchId || ''}&dc=${params?.dc || ''}`;\r\n history.push({\r\n pathname: 'Total',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const classes = useStyles();\r\n const { row, label } = props;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n {props.showLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n Group Sales\r\n \r\n \r\n \r\n \r\n {props.partsCalculatedList.map((item, i) => {\r\n return (\r\n \r\n MTD {item.d}\r\n\r\n onRedirect({ startDateType: 'mtd', dc: item.dc })}\r\n style={{\r\n fontSize: 20,\r\n fontWeight: '600',\r\n cursor: 'pointer',\r\n textAlign: 'left'\r\n }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.mtdSaleValue)}\r\n {!item.d ? ({isFiniteCheck(item.mtdgpp)}%) : null}\r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.mtdBudget) || 0}\r\n
\r\n
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.ytdBudget) || 0}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {props.uniqueBranchList.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.bn}\r\n
\r\n MTD / YTD\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {props.list.map((itm, i) => {\r\n return (\r\n \r\n onRedirect({ dc: itm.dc })}>\r\n {itm.d}\r\n \r\n \r\n \r\n \r\n Required\r\n \r\n \r\n Accomplished\r\n \r\n \r\n \r\n {itm.data.map((dataItme, dataItmIndex) => {\r\n return (\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.mtdBudget)} /{' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.ytdBudget)}\r\n \r\n \r\n \r\n onRedirect({\r\n startDateType: 'mtd',\r\n dc: itm.dc,\r\n branchId: dataItme.branchID\r\n })\r\n }\r\n style={{ cursor: 'pointer' }}\r\n className={\r\n dataItme.mtdSaleValue < dataItme.mtdBudget\r\n ? 'customChipRed'\r\n : 'customChip'\r\n }\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.mtdSaleValue)}\r\n \r\n {' / '}\r\n \r\n onRedirect({\r\n startDateType: 'ytd',\r\n dc: itm.dc,\r\n branchId: dataItme.branchID\r\n })\r\n }\r\n style={{ cursor: 'pointer' }}\r\n className={\r\n dataItme.ytdSaleValue < dataItme.ytdBudget\r\n ? 'customChipRed'\r\n : 'customChip'\r\n }\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.ytdSaleValue)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleSupercharge = (props) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `?branchID=${params.branchId}&bn=${\r\n params.branch\r\n }&measuredesc=${'Surcharges'}&MeasureID=${2}&fromPage=${'Aged Measures'}&month=${''}&unallocated=${''}`;\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const { row, label } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n {label}\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n {label}\r\n \r\n \r\n Qty\r\n Surcharge\r\n \r\n \r\n \r\n {props.list.map((n, i) => {\r\n return (\r\n \r\n onRedirect({ branchId: n.branchID, branch: n.bsn })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.branch}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.qty)}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.surchargevalue)}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleJobsDetails = (props) => {\r\n let communicatorDashList = [\r\n {\r\n id: 1,\r\n name: 'VOR Vehicles',\r\n color: '#dc3545',\r\n icon: ,\r\n count: props.partsVOR?.vor,\r\n url: { pathname: '/SiteVehicles', search: `?status=VOR` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Part Back Order, ETA > 72 hrs',\r\n color: '#dc3545',\r\n count: props.partsVOR?.partsBackOrder,\r\n icon: ,\r\n url: { pathname: '/SiteVehicles', search: `?status=PB` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Awaiting Collection',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: props.partsVOR?.awaitingCollection,\r\n url: { pathname: '/SiteVehicles', search: `?status=ACOLLECTION` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Awaiting Authority',\r\n color: '#3498db',\r\n icon: ,\r\n count: props.partsVOR?.awaitingAuthority,\r\n url: { pathname: '/SiteVehicles', search: `?status=AUTH` },\r\n isShowCustomer: true\r\n }\r\n ];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.label}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleYtdMtdSection = (props) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `branchID=${params?.branchId || ''}&bn=${params.branch}`;\r\n history.push({\r\n pathname: `/AgedMeasures/WorkInProgressbyDepartement`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const { row, label } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n {label}\r\n */}\r\n \r\n \r\n Group WIP MTD\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.dailyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.name}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {props.dailyWIPsCombinedList.map((n, i) => {\r\n return (\r\n \r\n onRedirect({ branchId: n.branchID, branch: n.branchShortCode })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.branchShortCode}\r\n \r\n {n.data.map((q) => {\r\n return (\r\n {formatters.ThousandSeparatorWithoutZero(q.hours)}\r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n {props.dailyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.Total)}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Group WIP Monthly\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.monthlyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.name}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {props.monthlyWIPsCombinedList.map((n, i) => {\r\n return (\r\n \r\n onRedirect({ branchId: n.branchID, branch: n.branchShortCode })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.branchShortCode}\r\n \r\n {n.data.map((q) => {\r\n return (\r\n {formatters.ThousandSeparatorWithoutZero(q.hours)}\r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n {props.monthlyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.Total)}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, Tooltip, IconButton } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { TextBox } from '../../../../../Core/FormInput';\r\nimport { ExpBaseURL } from '../../../../../Core/Service/http-calls';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport ViewPdfModal from '../../../../../Core/Modal/PdfViweModal';\r\nimport { useMemo } from 'react';\r\nimport { getAgedMeasuresViewDocument } from '../../../../../Core/Service/ReportScreens-service';\r\nimport ReactDOM from 'react-dom';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { GetExcelFileFromEndpoint } from '../../../../../Core/Service/reportService';\r\nimport AppContext from '../../../../../App/AppContext';\r\n\r\nconst baseNominalColumns = [\r\n {\r\n title: 'Posted',\r\n field: 'pd',\r\n width: 100,\r\n sortable: true,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Document Date',\r\n field: 'dd',\r\n width: 100,\r\n sortable: true,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n { title: 'Base Value', field: 'bv', width: 90, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Document Number', field: 'dn', width: 100, sortable: true, align: 'right' },\r\n { title: 'Journal Reference', field: 'jr', width: 110, sortable: true }\r\n];\r\n\r\nconst baseColumns = [\r\n { field: 'bn', title: 'Branch', width: 120, showColumnTotal: false },\r\n { field: 'cc', title: 'Cost Centre', width: 120, showColumnTotal: false },\r\n { field: 'ec', title: 'Expense Code', width: 120, showColumnTotal: false },\r\n { field: 'currentPostings', title: 'Current Postings', width: 120, showColumnTotal: true, align: 'right', renderer: formatters.CurrencyThousandSeparator },\r\n { field: 'broughtForward', title: 'Brought Forward', width: 120, showColumnTotal: true, align: 'right', renderer: formatters.CurrencyThousandSeparator },\r\n {\r\n field: 'dateLastPosting',\r\n title: 'Last Posted',\r\n width: 120,\r\n showColumnTotal: false,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n }\r\n];\r\nconst screenName = {\r\n C: 'Consumables',\r\n M: 'Mobilovan',\r\n R: 'NPW Rectification',\r\n P: 'Parts Warranty Write Off',\r\n S: 'Service Warranty Write Off'\r\n};\r\n// const crumbs = (code) => {\r\n// let final = [\r\n// { name: 'Home', path: '/' },\r\n// { name: 'Services', active: true },\r\n// { name: screenName[code], active: true }\r\n// ];\r\n// return final;\r\n// };\r\nconst crumbs = (code, menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Reports', path: '/ReportsDashboard' });\r\n }\r\n if (code) {\r\n list.push( { name: 'Services', active: true }, { name: screenName[code], active: true });\r\n }\r\n return list;\r\n};\r\n\r\nvar $ = window.$;\r\nvar mainGrid, opGrid;\r\n\r\nconst ServiceNominals = (props) => { \r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n const { showToast } = useContext(AppContext);\r\n\r\n let startDate = moment().startOf('month').format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate\r\n });\r\n const fieldChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n let token = AppStorage.getToken();\r\n const onSuccessFunc = function (response) {\r\n var obj = {\r\n records: response.data.list,\r\n total: response.data.total\r\n };\r\n mainGrid.render(obj);\r\n };\r\n\r\n const onSuccessOperatorFunc = function (response) {\r\n var obj = {\r\n records: response.data.list,\r\n total: response.data.total\r\n };\r\n opGrid.render(obj);\r\n };\r\n\r\n const documentHandler = async (record) => {\r\n let res = await getAgedMeasuresViewDocument(record.ifn);\r\n if (res) {\r\n setState((st) => ({ ...st, showPdfModal: true, pdfFileData: res }));\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n\r\n const docEditButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n let isFile = record.ifn;\r\n const lnk = (\r\n documentHandler(record) : ''}>\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const nominalColumns = useMemo(() => {\r\n let tempColumns = [...baseNominalColumns];\r\n let ViewDocCol = tempColumns.find((element) => element.field === 'dn');\r\n if (ViewDocCol) {\r\n ViewDocCol.renderer = docEditButton;\r\n }\r\n return tempColumns;\r\n }, []);\r\n let getUrl = `${ExpBaseURL}/api/services/ServiceNominalsList`;\r\n const PullSalesNominalData = async () => {\r\n window.$(`#ServiceNominals`).grid('destroy', true, true);\r\n mainGrid = $('#ServiceNominals').grid({\r\n primaryKey: 'branchID',\r\n dataSource: {\r\n url: getUrl,\r\n data: { Type: props.type },\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: onSuccessFunc\r\n },\r\n detailTemplate: '',\r\n headerFilter: false,\r\n columns: baseColumns,\r\n pager: { limit: 10 }\r\n });\r\n mainGrid.on('dataBound', function (e, records, totalRecords) {\r\n var sumCurrent = 0,\r\n sumBroughtForward = 0,\r\n $tfoot;\r\n $.each(records, function () {\r\n sumCurrent += parseFloat(this.currentPostings);\r\n sumBroughtForward += parseFloat(this.broughtForward);\r\n });\r\n $tfoot = mainGrid.children('tfoot');\r\n $tfoot.children('tr[data-role=\"TotalAmount\"]').remove();\r\n $tfoot.children('tr[data-role=\"pager\"]').remove();\r\n $tfoot.prepend(\r\n ' | | | Total | ' +\r\n formatters.CurrencyThousandSeparator(sumCurrent) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumBroughtForward) +\r\n ' | |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n headerFilter: true,\r\n primaryKey: 'dn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/ServiceNominalsList`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { Type: props.type, StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: nominalColumns\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n let downloadURL = `services/ServiceNominalsList?Type=${props.type}&fileType=excel`;\r\n await GetExcelFileFromEndpoint(downloadURL, screenName[props.type]);\r\n };\r\n\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumSold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumTaken) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumEff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumSale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumCost) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumProfit) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumMarginPerc) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumRecRate) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n // headerFilter: true,\r\n primaryKey: 'code',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/TechEfficiency`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n opGrid.on('detailExpand', function (e, $detailWrapper, code) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, code: code },\r\n primaryKey: 'id',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/TechEfficiency`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessWipFunc\r\n },\r\n columns: columns,\r\n pager: { limit: 10 }\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, code) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n let downloadURL = `services/TechEfficiency?fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n await GetExcelFileFromEndpoint(downloadURL, 'TechEfficiency');\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n return (\r\n \r\n
\r\n
\r\n {state.showWIPDetails && (\r\n setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
| Total | ' +\r\n formatters.CurrencyThousandSeparator(sumgrossProfit) +\r\n ' | ' +\r\n '' +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsaleValue) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcostValue) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumretailPrice) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsurchargeValue) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { BranchID: branchID },\r\n primaryKey: 'opno',\r\n\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: opGridOnSuccessFunc\r\n },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, opno) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { BranchID: branchID, opno: opno },\r\n primaryKey: 'id',\r\n\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n success: onSuccessWipFunc\r\n },\r\n columns: WipRendererNColumns\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showWIPDetails: true, wipNumber: record.wn, company: record.co }))} style={{ cursor: 'pointer' }}>\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const WipRendererNColumns = useMemo(() => {\r\n const tempCols = [...wipColumns];\r\n let wipNumberCol = tempCols.find((element) => element.field === 'wn');\r\n if (wipNumberCol) {\r\n wipNumberCol.renderer = editButton({});\r\n }\r\n return tempCols;\r\n });\r\n\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullPartsSalesList();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.departmentCode, state.BranchList]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n\r\n const data = mainGrid.data().params;\r\n let downloadURL = `Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}&fileType=excel`;\r\n\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, ParamMeasuredesc);\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n Select Department\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n \r\n {!state.isRelod ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {/* \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n {tilte[state.buttonID]}
*/}\r\n {/* {state.newVehicle.map((m) => {\r\n return (\r\n <>\r\n \r\n {m.branch || 'N / A'}
\r\n\r\n \r\n \r\n \r\n \r\n New Vehicle
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'new') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Used Vehicle
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'used') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Registrations
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'reg') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n })} */}\r\n \r\n \r\n {/* \r\n \r\n RedirectToDash('/AgedMeasures')}\r\n >\r\n \r\n
\r\n
Aged Measures
\r\n
\r\n
\r\n
Service Dashboard
\r\n
\r\n
\r\n
Sales Dashboard v1
\r\n
\r\n
\r\n
Sales Dashboard V2
\r\n
\r\n \r\n props.handleRemoveClick(i)}>\r\n Remove\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DiagnosticSheetsImageComponent;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionOne = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 1: Engine/Transmission
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n\r\n \r\n \r\n \r\n Engine fault:\r\n \r\n \r\n \r\n {state.enginefault.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Warning light:\r\n \r\n \r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetEngineTransmissionWarningLight', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetEngineTransmissionWarningLight', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionOne;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionTwo = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 2: Noise/Vibration
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n\r\n \r\n \r\n \r\n Noise apparent:\r\n \r\n \r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetIsNoiseApparent', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetIsNoiseApparent', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n {/* {state.diagnosticSheetIsNoiseApparent && ( */}\r\n \r\n \r\n {state.noiseApparent.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n {/* )} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Location:\r\n \r\n \r\n \r\n {state.location.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Type of noise:\r\n \r\n \r\n \r\n {state.typeOfNoise.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Other (specify)`}:\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Images`}:\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRemoveClick(i, 'diagnosticSheetNoiseVibrationImg')}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionTwo;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionThree = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 3: Water Leaks
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Has the vehicle had any body repairs:\r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetWaterLeaksehadAnyBodyRepairs', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetWaterLeaksehadAnyBodyRepairs', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`*If Yes, what repair was carried out:`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vehicle position:\r\n \r\n \r\n \r\n {state.vehiclePosition.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Occurs:\r\n \r\n \r\n \r\n {state.occurs.map((c) => {\r\n return (\r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Water:\r\n \r\n \r\n \r\n {state.water.map((c) => {\r\n return (\r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Images`}:\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRemoveClick(i, 'diagnosticSheetWaterLeakImg')}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionThree;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionFour = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 4: Electronics, Controls and Audio
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n \r\n \r\n \r\n Malfunction:\r\n \r\n \r\n \r\n {state.malfunction.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Other (specify)`}:\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionFour;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst GeneralSection = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n General
\r\n \r\n \r\n \r\n Model : \r\n\r\n \r\n \r\n \r\n {state.models.map((btn, i) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n Fault codes\r\n \r\n \r\n \r\n Can the customer resolve the issue in any way, e.g. switching the engine off and on?\r\n \r\n \r\n \r\n \r\n {state.modelItemList.map((p) => {\r\n return (\r\n \r\n }\r\n label={p.name}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Fault:\r\n \r\n \r\n \r\n \r\n {state.generalFualts.map((p) => {\r\n return } label={p.name} />;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Engine condition:\r\n \r\n \r\n \r\n {state.engineCondition.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Weather related:\r\n \r\n \r\n \r\n {state.weatherRelated.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Driving condition:\r\n \r\n \r\n \r\n {state.drivingCondition.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Road conditions:\r\n \r\n \r\n \r\n {state.roadCondition.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Speed:\r\n \r\n \r\n \r\n \r\n MPH\r\n \r\n \r\n \r\n RPM\r\n \r\n \r\n \r\n \r\n }\r\n label=\"All speeds\"\r\n />\r\n \r\n \r\n \r\n \r\n Gear\r\n \r\n \r\n\r\n \r\n {state.gear.map((p) => {\r\n return } label={p.name} />;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {/* */}\r\n \r\n Customer Details
\r\n \r\n {/*
*/}\r\n \r\n \r\n Cutomer Name\r\n
\r\n \r\n {state.headerData.customerName}\r\n \r\n \r\n \r\n Wip number\r\n
\r\n \r\n {state.headerData.wipNumber}\r\n \r\n \r\n \r\n Registration number\r\n
\r\n \r\n {state.headerData.registration}\r\n \r\n \r\n \r\n Repeat repair\r\n
\r\n \r\n {state.headerData.repeatRepair == 'N' ? 'No' : 'Yes'}\r\n \r\n \r\n {state.reportedTakenBy && (\r\n \r\n Report taken by\r\n
\r\n \r\n {state.reportedTakenBy}\r\n \r\n \r\n )}\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {btnLoader ? 'Saving' : 'Submit'}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n downloadName={'Account Queries Sales exec'}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AccountQueriesbySalesexec;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel, Breadcrumbs } from '@material-ui/core';\r\nimport { TextBox } from './../../../../../Core/FormInput';\r\n// import NestedGijgoGrid from './../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport { Link } from 'react-router-dom';\r\n// import BreadCrumbs from './../../../../Core/Controls/Breadcrumb';\r\nimport NestedGijgoGrid from './../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useState } from 'react';\r\nimport MotHistoryScreen from '../../MotHistoryScreen';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport ReactDOM from 'react-dom';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nvar monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 80, sortable: true },\r\n { title: 'Comm Number', field: 'cn', width: 90, sortable: true },\r\n { title: 'Reg Number', field: 'rn', width: 100, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Model',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Stock Days',\r\n field: 'd',\r\n width: 90,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Type',\r\n field: 'mac',\r\n width: 70,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Customer',\r\n field: 'cust',\r\n width: 100,\r\n sortable: true\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'sp',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Profit',\r\n field: 'latestProfitValue',\r\n width: 100,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Cost',\r\n field: 'cost',\r\n width: 70,\r\n sortable: true,\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n },\r\n align: 'right'\r\n },\r\n {\r\n title: 'Order Date',\r\n field: 'od',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Est Date',\r\n field: 'estimDeliveryDate',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return `| Vehicle Description | Notes | Est Profit |
|---|
\r\n | {vd} | {n} | £{estimatedProfit} |
`;\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Sales Work In Progress', active: true }\r\n];\r\n\r\nconst SalesWorkinProgress = (props) => {\r\n const [state, setState] = useState({ showMotHistory: false });\r\n\r\n const regNumberRendrer = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showMotHistory: true, regNo: record?.rn, FranchiseCode: record?.f }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let regNumberCol = tempCols.find((element) => element.field === 'rn');\r\n if (regNumberCol) {\r\n regNumberCol.renderer = regNumberRendrer({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const baseUrl = `Sales/NewVehicleOrdersWIP`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n downloadName={'Sales Work In Progress'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SalesWorkinProgress;\r\n","import React from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, Breadcrumbs, InputLabel } from '@material-ui/core';\r\nimport { TextBox } from '../../../../../Core/FormInput';\r\n// import NestedGijgoGrid from './../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport { Link } from 'react-router-dom';\r\n// import BreadCrumbs from './../../../../Core/Controls/Breadcrumb';\r\nimport NestedGijgoGrid from '../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nvar monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\nlet addCommas = (val) => {\r\n return val ? `${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 80, sortable: true },\r\n { title: 'Comm Number', field: 'cn', width: 100, sortable: true },\r\n { title: 'Reg Number', field: 'rn', width: 90, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Model',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Stock Days',\r\n field: 'd',\r\n width: 100,\r\n sortable: true,\r\n // renderer: formatters.MonthShortFormatter,\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Type',\r\n field: 'mac',\r\n width: 50,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 150,\r\n sortable: true,\r\n // align: 'right',\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Customer',\r\n field: 'cust',\r\n width: 200,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'sp',\r\n width: 100,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Latest Profit',\r\n field: 'latestProfitValue',\r\n renderer: formatters.CurrencyThousandSeparator,\r\n width: 70,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Cost',\r\n field: 'cost',\r\n renderer: formatters.CurrencyThousandSeparator,\r\n width: 70,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Order Date',\r\n field: 'od',\r\n width: 70,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 70,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Est Date',\r\n field: 'EstimDeliveryDate',\r\n renderer: formatters.MonthShortFormatter,\r\n width: 70,\r\n sortable: true,\r\n align: 'right'\r\n }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return (\r\n \"| Vehicle Description | Notes | Est Profit |
|---|
\" +\r\n '| {vd} | {n} | {estimatedProfit} |
'\r\n );\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Registration Report', active: true }\r\n];\r\n\r\n// let startDate = ;\r\n\r\nconst RegistrationReports = (props) => {\r\n const [state, setState] = useState({\r\n EndDate: moment().format('YYYY-MM-DD'),\r\n StartDate: moment().startOf('month').format('YYYY-MM-DD')\r\n });\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const baseUrl = `Sales/RegistrationReport?StartDate=${state.StartDate}&EndDate=${state.EndDate}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n downloadName={'Registration Report'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default RegistrationReports;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport moment from 'moment';\r\nimport { PrimaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addReportingWIPLogs, getReportingWIPLogs } from '../../../../Core/Service/ReportScreens-service';\r\nimport '../ReportingNotesScreen/reportingNotes.scss';\r\n\r\nconst JobSingleNote = (props) => {\r\n return (\r\n \r\n
{props.note.notes}
\r\n
\r\n {props.note.userName} @ {moment(props.note.created).format('LLL')}\r\n
\r\n
\r\n \r\n \r\n {state.showWIPDetails && (\r\n setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))}\r\n maxWidth=\"md\"\r\n fullWidth\r\n overflow={'auto'}\r\n >\r\n \r\n \r\n )}\r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n downloadName=\"Aged Measures Workin Progress\"\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showNotesModal && }\r\n
\r\n );\r\n};\r\n\r\nexport default AgedMeasuresWorkingProgress;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\nconst baseColumns = [\r\n { field: 'salesExec', sortable: false, title: `Sales Exec`, filterable: false },\r\n {\r\n field: 'totalAmount',\r\n title: 'Total',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'sevenDays',\r\n title: '7 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'fourteenDays',\r\n title: '8-14 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'twentyOneDays',\r\n title: '15-21 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'overTwentyOneDays',\r\n title: 'Over 21 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n }\r\n];\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Vehicle Aged Debt By Salesexec', active: true }\r\n];\r\nconst VehicleAgedDebtBySalesexec = (props) => {\r\n const history = useHistory();\r\n const redirectToScreens = (value, record, MeasureID, field) => {\r\n let searchQuery = `?SalesExecCode=${record.salesExecCode}&AgeDays=${field.AgeDays}&salesExec=${record.salesExec}`;\r\n history.push({\r\n pathname: '/sales/ViewDebtDetailsSalesexec',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const monthsActionHandler = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, props.MeasureID, field)}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {field.AgeDays ? addCommas(value) : value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n let salesExecCol = tempCols.find((element) => element.field === 'salesExec');\r\n let sevenDaysCol = tempCols.find((element) => element.field === 'sevenDays');\r\n let fourteenDaysCol = tempCols.find((element) => element.field === 'fourteenDays');\r\n let twentyOneDaysCol = tempCols.find((element) => element.field === 'twentyOneDays');\r\n let overTwentyOneDaysCol = tempCols.find((element) => element.field === 'overTwentyOneDays');\r\n\r\n if (salesExecCol) {\r\n salesExecCol.renderer = monthsActionHandler({ AgeDays: '' });\r\n }\r\n if (sevenDaysCol) {\r\n sevenDaysCol.renderer = monthsActionHandler({ AgeDays: 7 });\r\n }\r\n if (fourteenDaysCol) {\r\n fourteenDaysCol.renderer = monthsActionHandler({ AgeDays: 14 });\r\n }\r\n if (twentyOneDaysCol) {\r\n twentyOneDaysCol.renderer = monthsActionHandler({ AgeDays: 21 });\r\n }\r\n if (overTwentyOneDaysCol) {\r\n overTwentyOneDaysCol.renderer = monthsActionHandler({ AgeDays: 22 });\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const baseUrl = `Sales/VehicleDebt`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n downloadName=\"Vehicle Aged Debt By Salesexec\"\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleAgedDebtBySalesexec;\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 80, sortable: true },\r\n { title: 'Status', field: 's', width: 60, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name',\r\n sortable: true\r\n },\r\n {\r\n title: 'Model Code',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Comm Number',\r\n field: 'cn',\r\n width: 100,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Days',\r\n field: 'd',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'bn',\r\n width: 150,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Notes',\r\n field: 'n',\r\n width: 150,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Loc',\r\n field: 'rsc',\r\n width: 90,\r\n sortable: true\r\n // renderer: function (value, record) {\r\n // return addCommas(value);\r\n // }\r\n },\r\n {\r\n title: 'Vehicle Group',\r\n field: 'mac',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'New Vehicle Stock (Excluding WIP)', active: true }\r\n];\r\n\r\nconst VehicleStocksExWip = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Prampd = params.get('pd') || '';\r\n let PramMC = params.get('mc') || '';\r\n let PramMAC = params.get('mac') || '';\r\n const baseUrl = `Sales/SalesVehicleStock`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ pd: Prampd, mc: PramMC, mac: PramMAC }}\r\n downloadName={'New Vehicle Stock'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleStocksExWip;\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 80, sortable: true },\r\n { title: 'Status', field: 's', width: 80, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Model',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Comm Number',\r\n field: 'cn',\r\n width: 110,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Days',\r\n field: 'd',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'bn',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Notes',\r\n field: 'n',\r\n width: 150,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Loc',\r\n field: 'rsc',\r\n width: 90,\r\n sortable: true\r\n // renderer: function (value, record) {\r\n // return addCommas(value);\r\n // }\r\n },\r\n {\r\n title: 'Vehicle Group',\r\n field: 'mac',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'New Vehicle Orders', active: true }\r\n];\r\n\r\nconst VehicleNewOrder = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramMC = params.get('mc') || '';\r\n const baseUrl = `Sales/NewVehicleOrders`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ mc: PramMC }}\r\n downloadName={'New Vehicle Orders'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleNewOrder;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel, Breadcrumbs } from '@material-ui/core';\r\nimport { TextBox } from './../../../../../Core/FormInput';\r\nimport { Link } from 'react-router-dom';\r\nimport NestedGijgoGrid from './../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport CommonGijgoGrid from './../../../../../Core/Controls/GijgoGrid/index';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport { useState } from 'react';\r\nimport MotHistoryScreen from '../../MotHistoryScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nvar monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Reg Number', field: 'rn', width: 100, sortable: true },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n { title: 'VSB No', field: 'sn', width: 80, sortable: true },\r\n {\r\n title: 'Invoice Date',\r\n field: 'ivd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'In Stock',\r\n field: 'isd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'RegDate',\r\n field: 'rd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Mileage',\r\n field: 'm',\r\n width: 80,\r\n\r\n sortable: true\r\n },\r\n { title: 'Status', field: 'acs', width: 50, sortable: true },\r\n { title: 'Q', field: 'qv', width: 50, sortable: true },\r\n\r\n {\r\n title: 'VAT Price',\r\n field: 'va',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n\r\n {\r\n title: 'Recon',\r\n field: 'rc',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Total',\r\n field: 'total',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Age',\r\n field: 'age',\r\n width: 90,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Model Code',\r\n field: 'mdc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Franchise',\r\n field: 'fn',\r\n width: 70,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'franchiseRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Selling Branch',\r\n width: 70,\r\n sortable: true,\r\n field: 'bn',\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Used Vehicle Stock', active: true }\r\n];\r\n\r\nconst UsedVehicleStock = (props) => {\r\n const [state, setState] = useState({ showMotHistory: false });\r\n\r\n const regNumberRendrer = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showMotHistory: true, regNo: record?.rn, FranchiseCode: record?.franchiseCode }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n let regNumberCol = tempCols.find((element) => element.field === 'rn');\r\n\r\n if (regNumberCol) {\r\n regNumberCol.renderer = regNumberRendrer({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramFN = params.get('fn') || '';\r\n let PramBN = params.get('bn') || '';\r\n let PramMDC = params.get('mdc') || '';\r\n\r\n const baseUrl = `Sales/UsedVehicleStock`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ fn: PramFN, bn: PramBN, mdc: PramMDC }}\r\n downloadName=\"Used Vehicle Stock\"\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default UsedVehicleStock;\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Department',\r\n field: 'dd',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'departmentCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'WIP No.',\r\n field: 'wn',\r\n width: 100,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Raised',\r\n field: 'r',\r\n width: 100,\r\n sortable: true,\r\n // align: 'center',\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n { title: 'Account', field: 'ac', width: 100, sortable: true },\r\n {\r\n title: 'Phone No.',\r\n field: 'ph',\r\n width: 100,\r\n sortable: true,\r\n // align: 'center',\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Part Total',\r\n field: 'pt',\r\n width: 90,\r\n sortable: true,\r\n // align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Labour Total',\r\n field: 'lt',\r\n width: 90,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Total',\r\n field: 't',\r\n width: 90,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n\r\n {\r\n title: 'Address',\r\n field: 'addr',\r\n width: 200,\r\n sortable: true,\r\n align: 'center'\r\n },\r\n {\r\n title: 'Code',\r\n field: 'mdc',\r\n width: 90,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Franchise',\r\n field: 'fc',\r\n width: 100,\r\n align: 'right',\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'franchiseRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 100,\r\n align: 'center',\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n { title: 'D', field: 'qv', width: 50, align: 'center', sortable: true }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Sales Contingency Debt', active: true }\r\n];\r\n\r\nconst SalesContingencyDebt = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramFN = params.get('fn') || '';\r\n let PramBN = params.get('bn') || '';\r\n let PramDD = params.get('dd') || '';\r\n const baseUrl = `Sales/SalesContingencyDebt`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ fn: PramFN, bn: PramBN, dd: PramDD }}\r\n downloadName={'Sales Contingency Debt'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SalesContingencyDebt;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\n\r\nconst baseColumns = [\r\n {\r\n field: 'ac',\r\n title: 'Account',\r\n filterable: false,\r\n sortable: false,\r\n width: 90\r\n // isCurrency: true\r\n },\r\n {\r\n field: 'cr',\r\n title: 'Reference',\r\n filterable: false,\r\n sortable: false,\r\n width: 180\r\n },\r\n {\r\n field: 'rn',\r\n title: 'Reg No',\r\n filterable: false,\r\n sortable: false,\r\n width: 100\r\n },\r\n {\r\n field: 'iname',\r\n title: 'Invoice Name',\r\n filterable: false,\r\n sortable: false,\r\n width: 250\r\n },\r\n {\r\n field: 'cn',\r\n title: 'Customer Name',\r\n filterable: false,\r\n sortable: false,\r\n width: 200\r\n },\r\n {\r\n field: 'bal',\r\n title: 'Balance',\r\n showColumnTotal: true,\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true,\r\n width: 120,\r\n align: 'right'\r\n },\r\n {\r\n field: 'id',\r\n title: 'Invoice Date',\r\n filterable: false,\r\n sortable: false,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n },\r\n width: 120\r\n },\r\n {\r\n field: 'age',\r\n title: 'Age',\r\n filterable: false,\r\n sortable: false,\r\n width: 60\r\n },\r\n {\r\n field: 'loc',\r\n title: 'Sold By',\r\n filterable: false,\r\n sortable: false,\r\n width: 100\r\n },\r\n {\r\n field: 'comm',\r\n title: 'Comm Number',\r\n filterable: false,\r\n sortable: false,\r\n width: 140\r\n },\r\n {\r\n field: 'sbn',\r\n title: 'Stockbook Number',\r\n filterable: false,\r\n sortable: false,\r\n width: 180\r\n },\r\n {\r\n field: 'dn',\r\n title: 'Invoice No',\r\n filterable: false,\r\n sortable: false,\r\n width: 120\r\n }\r\n];\r\n\r\nconst getCrumbs = (ParamsalesExec, ParamSalesExecCode, ParamAgeDays) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '' },\r\n { name: `Vehicle Aged Debt By Salesexec`, path: '/sales/VehicleAgedDebtBySalesexec' }\r\n ];\r\n if (ParamsalesExec || ParamSalesExecCode || ParamAgeDays) {\r\n temp = {\r\n name: `${ParamsalesExec ? ParamsalesExec : ''} ${\r\n ParamAgeDays == '7'\r\n ? '(7 Days)'\r\n : ParamAgeDays == '14'\r\n ? '(8-14 Days)'\r\n : ParamAgeDays == '21'\r\n ? '(15-21 Days)'\r\n : ParamAgeDays == '22'\r\n ? '(Over 21 Days)'\r\n : ''\r\n }`,\r\n active: true\r\n };\r\n final = [...final, { ...temp }];\r\n }\r\n\r\n return final;\r\n};\r\n\r\nconst ViewDebtDetailsSalesexec = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamsalesExec = params.get('salesExec') || '';\r\n let ParamSalesExecCode = params.get('SalesExecCode') || '';\r\n let ParamAgeDays = params.get('AgeDays') || '';\r\n const baseUrl = `Sales/VehicleDebt?SalesExecCode=${ParamSalesExecCode}&AgeDays=${ParamAgeDays}`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ViewDebtDetailsSalesexec;\r\n","import { Grid, Paper } from '@material-ui/core';\r\nimport React from 'react';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport './WeeklyFlashReport.scss';\r\nimport PublicIcon from '@material-ui/icons/Public';\r\nimport moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { getWeeklyFlashReport } from '../../../../../Core/Service/ReportScreens-service';\r\nimport { useState } from 'react';\r\n\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'DOC', active: true },\r\n { name: measuredesc, active: true }\r\n];\r\n\r\nlet currentYear = moment().year();\r\n\r\nconst WeeklyFlashReport = (props) => {\r\n const [state, setState] = useState({ tableData: {} });\r\n\r\n const pullTableData = async () => {\r\n let res = await getWeeklyFlashReport();\r\n setState((st) => ({ ...st, tableData: res.data[0] }));\r\n };\r\n\r\n useEffect(() => {\r\n pullTableData();\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
New Truck Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | {state.tableData.invoiceTruckMTD} | \r\n {state.tableData.budgetInvoiceTruckMTD} | \r\n {state.tableData.invoiceTruckYTD} | \r\n {state.tableData.budgetInvoiceTruckYTD} | \r\n {state.tableData.orderTruckMTD} | \r\n {state.tableData.orderTruckYTD} | \r\n {state.tableData.orderTruckWIP} | \r\n {state.tableData.totalVolumeTruck} | \r\n {state.tableData.budgetVolumeTruck} | \r\n {state.tableData.budgetAchievedTruck} | \r\n {state.tableData.wIPTruck} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | {state.tableData.invoiceVanMTD} | \r\n {state.tableData.budgetInvoiceVanMTD} | \r\n {state.tableData.invoiceVanYTD} | \r\n {state.tableData.budgetInvoiceVanYTD} | \r\n {state.tableData.orderVanMTD} | \r\n {state.tableData.orderVanYTD} | \r\n {state.tableData.orderVanWIP} | \r\n {state.tableData.totalVolumeVan} | \r\n {state.tableData.budgetVolumeVan} | \r\n {state.tableData.budgetAchievedVan} | \r\n {state.tableData.wIPVan} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Maxus Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | {state.tableData.invoiceMaxusMTD} | \r\n {state.tableData.budgetInvoiceMaxusMTD} | \r\n {state.tableData.invoiceMaxusYTD} | \r\n {state.tableData.budgetInvoiceMaxusYTD} | \r\n {state.tableData.orderMaxusMTD} | \r\n {state.tableData.orderMaxusYTD} | \r\n {state.tableData.orderMaxusWIP} | \r\n {state.tableData.totalVolumeMaxus} | \r\n {state.tableData.budgetVolumeMaxus} | \r\n {state.tableData.budgetAchievedMaxus} | \r\n {state.tableData.wIPMaxus} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Used Sales\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n | Used Truck Sales | \r\n
\r\n \r\n | MTD | \r\n YTD | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n
\r\n \r\n\r\n \r\n \r\n | {state.tableData.invoiceUsedTruckMTD} | \r\n {state.tableData.budgetUsedTruckMTD} | \r\n {state.tableData.invoiceUsedTruckYTD} | \r\n {state.tableData.budgetUsedTruckYTD} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Used Van Sales | \r\n
\r\n \r\n | MTD | \r\n YTD | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n
\r\n \r\n\r\n \r\n \r\n | {state.tableData.invoiceUsedVanMTD} | \r\n {state.tableData.budgetInvoiceUsedVanMTD} | \r\n {state.tableData.invoiceUsedVanYTD} | \r\n {state.tableData.budgetInvoiceUsedVanYTD} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Used Truck Stocks | \r\n Current Wk | \r\n (Prior Month) | \r\n
\r\n \r\n \r\n \r\n | Used Stock Units | \r\n {state.tableData.truckUsedStockUnitsCurrentWk} | \r\n {state.tableData.truckUsedStockUnitsPriorMonth} | \r\n
\r\n \r\n | Used Stock Value | \r\n {state.tableData.truckUsedStockValueCurrentWk} | \r\n {state.tableData.truckUsedStockValuePriorMonth} | \r\n
\r\n \r\n | Avg / vehicle | \r\n {state.tableData.truckAvgvehicleCurrentWk} | \r\n {state.tableData.truckAvgvehiclePriorMonth} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Used Van Stocks | \r\n Current Wk | \r\n (Prior Month) | \r\n
\r\n \r\n\r\n \r\n \r\n | Used Stock Units | \r\n {state.tableData.vanUsedStockUnitsCurrentWk} | \r\n {state.tableData.vanUsedStockUnitsPriorMonth} | \r\n
\r\n \r\n | Used Stock Value | \r\n {state.tableData.vanUsedStockValueCurrentWk} | \r\n {state.tableData.vanUsedStockValuePriorMonth} | \r\n
\r\n \r\n | Avg / vehicle | \r\n {state.tableData.vanAvgvehicleCurrentWk} | \r\n {state.tableData.vanAvgvehiclePriorMonth} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Aftersales\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n | Parts MTD % of Flex Budget | \r\n
\r\n \r\n | Trade | \r\n Workshop | \r\n Total | \r\n
\r\n \r\n \r\n \r\n | {state.tableData.aftersalesPartsMTDTrade} | \r\n {state.tableData.aftersalesPartsMTDWorkshop} | \r\n {state.tableData.aftersalesPartsMTDTotal} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Service MTD % of Flex Budget | \r\n
\r\n \r\n \r\n \r\n | Attended Hours | \r\n {state.tableData.aftersalesAttendedHours} | \r\n
\r\n \r\n | Booked Hours | \r\n {state.tableData.aftersalesServiceBookedHours} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Service Productivity | \r\n
\r\n \r\n | \r\n | \r\n % of Budget Achieved | \r\n
\r\n \r\n \r\n \r\n | Open'g WIP | \r\n {state.tableData.serviceProductivityOpenWIP} | \r\n | \r\n
\r\n \r\n | Hours Sold | \r\n {state.tableData.serviceProductivityHoursSold} | \r\n | \r\n
\r\n \r\n | Current WIP | \r\n {state.tableData.serviceProductivityCurrentWIP} | \r\n | \r\n
\r\n \r\n | Prod. Hours | \r\n {state.tableData.serviceProductivityProdHours} | \r\n {state.tableData.serviceProductivityBudgetAchieved} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Forecast\r\n
\r\n
\r\n
\r\n \r\n \r\n | Forecast | \r\n Actual | \r\n Budget | \r\n % of Budget | \r\n
\r\n \r\n \r\n \r\n | Parts Gross Margin v Budget | \r\n {state.tableData.forecastActualPartsGrossMargin} | \r\n {state.tableData.forecastBudgetPartsGrossMargin} | \r\n {state.tableData.forecastpercBudgetPartsGrossMargin} | \r\n
\r\n \r\n | Labour Revenue v Budget | \r\n {state.tableData.forecastpercBudgetLabourRevenue} | \r\n {state.tableData.forecastBudgetLabourRevenue} | \r\n {state.tableData.forecastpercBudgetLabourRevenue} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Outstanding Cont.\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Current Wk | \r\n (Prior Week) | \r\n
\r\n \r\n\r\n \r\n \r\n | Impacting on cash flow | \r\n {state.tableData.outstandingContCurrentWkImpactingcashflow} | \r\n {state.tableData.outstandingContPriorWeekImpactingcashflow} | \r\n
\r\n \r\n | Pending Registrations | \r\n {state.tableData.outstandingContCurrentWkPendingRegistrations} | \r\n {state.tableData.outstandingContPriorWeekPendingRegistrations} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Vehicle Debtors\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Current Wk | \r\n (Prior Week) | \r\n
\r\n \r\n \r\n \r\n | Total Value | \r\n {state.tableData.vehicleDebtorsCurrentWkTotalValue} | \r\n {state.tableData.vehicleDebtorsPriorWeekTotalValue} | \r\n
\r\n \r\n | {`Value >30-days`} | \r\n {state.tableData.vehicleDebtorsCurrentWk30daygreater} | \r\n {state.tableData.vehicleDebtorsPriorWeek30daygreater} | \r\n
\r\n \r\n | {`Value >60-days`} | \r\n {state.tableData.vehicleDebtorsCurrentWk60daygreater} | \r\n {state.tableData.vehicleDebtorsPriorWeek60daygreater} | \r\n
\r\n \r\n | Reg + Not Deferred | \r\n {state.tableData.vehicleDebtorsCurrentWkRegNotDeferred} | \r\n {state.tableData.vehicleDebtorsPriorWeekRegNotDeferred} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Aged WIP\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Current Week | \r\n (Prior Week) | \r\n
\r\n \r\n\r\n \r\n \r\n | Current | \r\n {state.tableData.agedWIPCurrentWkCurrent} | \r\n {state.tableData.agedWIPCurrentWkCurrentperc} | \r\n {state.tableData.agedWIPPriorWeekCurrent} | \r\n
\r\n \r\n | {`Value >30-days`} | \r\n {state.tableData.agedWIPCurrentWk30daysgreater} | \r\n {state.tableData.agedWIPCurrentWk30daysgreaterperc} | \r\n {state.tableData.agedWIPPriorWeek30daysgreater} | \r\n
\r\n \r\n | {`Value >60-days`} | \r\n {state.tableData.agedWIPCurrentWk60daysgreater} | \r\n {state.tableData.agedWIPCurrentWk60daysgreaterperc} | \r\n {state.tableData.agedWIPPriorWeek60daysgreater} | \r\n
\r\n\r\n {/* \r\n | {`>90-days`} | \r\n £10,882 | \r\n 14.6% | \r\n | \r\n
\r\n */}\r\n \r\n | Total | \r\n {state.tableData.agedWIPCurrentWkTotal} | \r\n {state.tableData.agedWIPCurrentWkTotalperc} | \r\n {state.tableData.agedWIPPriorWeekTotal} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Cash Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Current Week | \r\n (Prior Week) | \r\n
\r\n \r\n\r\n \r\n \r\n | Current | \r\n {state.tableData.cashSalesCurrentWkCurrent} | \r\n {state.tableData.cashSalesCurrentWkCurrentperc} | \r\n {state.tableData.cashSalesPriorWeekCurrent} | \r\n
\r\n \r\n | {`Value >30-days`} | \r\n\r\n {state.tableData.cashSalesCurrentWk30daygreater} | \r\n {state.tableData.cashSalesCurrentWk30daygreaterperc} | \r\n {state.tableData.cashSalesPriorWeek30daygreater} | \r\n
\r\n \r\n | {`Value >60-days`} | \r\n {state.tableData.cashSalesCurrentWk60daygreater} | \r\n {state.tableData.cashSalesCurrentWk60daygreaterperc} | \r\n {state.tableData.cashSalesPriorWeek60daygreater} | \r\n
\r\n \r\n | {`>90-days`} | \r\n {state.tableData.cashSalesCurrentWk90daygreater} | \r\n {state.tableData.cashSalesCurrentWk90daygreaterperc} | \r\n {state.tableData.cashSalesPriorWeek90daygreater} | \r\n
\r\n \r\n | Total | \r\n {state.tableData.cashSalesCurrentWkTotal} | \r\n {state.tableData.cashSalesCurrentWkTotalperc} | \r\n {state.tableData.cashSalesPriorWeekTotal} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Queries\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Count | \r\n Amount | \r\n
\r\n \r\n\r\n \r\n \r\n | Current | \r\n {state.tableData.queriesCurrentWkCurrent} | \r\n {state.tableData.queriesCurrentWkCurrentperc} | \r\n {state.tableData.queriesPriorWeekCurrent} | \r\n
\r\n \r\n | {`Value >30-days`} | \r\n {state.tableData.queriesCurrentWk30daygreater} | \r\n {state.tableData.queriesCurrentWk30daygreaterperc} | \r\n {state.tableData.queriesPriorWeek30daygreater} | \r\n
\r\n \r\n | {`Value >60-days`} | \r\n {state.tableData.queriesCurrentWk60daygreater} | \r\n {state.tableData.queriesCurrentWk60daygreaterperc} | \r\n {state.tableData.queriesPriorWeek60daygreater} | \r\n
\r\n \r\n | {`>90-days`} | \r\n {state.tableData.queriesCurrentWk90daygreater} | \r\n {state.tableData.queriesCurrentWk90daygreaterperc} | \r\n {state.tableData.queriesPriorWeek90daygreater} | \r\n
\r\n \r\n | Total | \r\n {state.tableData.queriesCurrentWkTotal} | \r\n {state.tableData.queriesCurrentWkTotalperc} | \r\n {state.tableData.queriesPriorWeekTotal} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
MTD Sales Gross Margin\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n Budget | \r\n Actual | \r\n Variance | \r\n
\r\n \r\n\r\n \r\n \r\n | New truck | \r\n {state.tableData.mtdSalesGrossMarginNewtruckBudget} | \r\n {state.tableData.mtdSalesGrossMarginNewtruckActual} | \r\n {state.tableData.mtdSalesGrossMarginNewtruckVariance} | \r\n
\r\n \r\n | New Van | \r\n {state.tableData.mtdSalesGrossMarginNewVanBudget} | \r\n {state.tableData.mtdSalesGrossMarginNewVanActual} | \r\n {state.tableData.mtdSalesGrossMarginNewVanVariance} | \r\n
\r\n \r\n | Used Van | \r\n {state.tableData.mtdSalesGrossMarginUsedVanBudget} | \r\n {state.tableData.mtdSalesGrossMarginUsedVanActual} | \r\n {state.tableData.mtdSalesGrossMarginUsedVanVariance} | \r\n
\r\n \r\n | Used Truck | \r\n {state.tableData.mtdSalesGrossMarginUsedTruckBudget} | \r\n {state.tableData.mtdSalesGrossMarginUsedTruckActual} | \r\n {state.tableData.mtdSalesGrossMarginUsedTruckVariance} | \r\n
\r\n \r\n | Total | \r\n {state.tableData.mtdSalesGrossMarginTotalBudget} | \r\n {state.tableData.mtdSalesGrossMarginTotalActual} | \r\n {state.tableData.mtdSalesGrossMarginTotalVariance} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n Invoicing (Hrs)\r\n Invoicing (£'s)\r\n Recovery Rate\r\n WIP\r\n EOM Forecast (£)\r\n \r\n \r\n \r\n \r\n Location\r\n \r\n \r\n \r\n Inv (MTD)\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Inv (MTD)\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Recovery Rate\r\n \r\n \r\n Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Pre Books\r\n \r\n \r\n 0 to 30\r\n \r\n \r\n 30+\r\n \r\n \r\n Wip Days\r\n \r\n \r\n Hours in WIP\r\n \r\n \r\n Parts Value in WIP (£)\r\n \r\n \r\n Avg Labour Hours value\r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Projection\r\n \r\n \r\n Invoice Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { blue } from '@material-ui/core/colors';\r\nimport { border } from '@material-ui/system';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white\r\n }\r\n}))(TableCell);\r\n\r\nconst LightGreyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#d3d3d3',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst SkyblueCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n borderBottom: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid',\r\n padding: 6,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst CellWithoutPadding = withStyles((theme) => ({\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: 0,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst LightSkyBlue = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#95D9FA',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\nconst LightYellowCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#CDE272',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst GraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: 0,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: '2px 6px',\r\n backgroundColor: 'white',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n // root: {\r\n // '&:nth-of-type(odd)': {\r\n // backgroundColor: theme.palette.action.hover\r\n // }\r\n // }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n }\r\n});\r\n\r\nexport const TargetTableOne = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n EOM Productive Hours Forecast\r\n \r\n Revised Invoicing Target to reduce WIP\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Daily Productive Hrs Actual\r\n \r\n \r\n Projected ME Hours (Actual)\r\n \r\n \r\n Efficiency\r\n \r\n\r\n \r\n Live Forecast Target\r\n \r\n \r\n \r\n \r\n \r\n \r\n EOM Re-Fcast Budget 5% Stretch\r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP Reduction\r\n \r\n \r\n Revised Monthly Invoicing Target\r\n \r\n \r\n Revised Daily Invoicing Targets\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableTwo = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Location\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n Graphs\r\n Ide\r\n \r\n \r\n\r\n \r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Totals\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Previous Week\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableThree = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Location\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n Graphs\r\n \r\n \r\n \r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Group (MTD)\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Daily Invoicing\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableFour = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n To Do\r\n {/* */}\r\n \r\n \r\n \r\n \r\n Actual\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n {/* \r\n Actual\r\n \r\n */}\r\n \r\n Budget\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableFive = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Inv Variance\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n \r\n \r\n \r\n \r\n Revised Target\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Budget\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const GraphTable = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n \r\n \r\n \r\n \r\n \r\n 30+\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n 0 to 30\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n {' '}\r\n Pre Books\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { blue } from '@material-ui/core/colors';\r\nimport { border } from '@material-ui/system';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white\r\n }\r\n}))(TableCell);\r\n\r\nconst SkyblueCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n // border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n // border: '1px solid black',\r\n fontSize: 11,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst WipCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#34B5C4',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\nconst EomCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#E54CDF',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n // root: {\r\n // '&:nth-of-type(odd)': {\r\n // backgroundColor: theme.palette.action.hover\r\n // }\r\n // }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n }\r\n});\r\n\r\nexport default function BudgetTableTwo() {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Attended Hours\r\n Productive Hours\r\n Efficiency (Sold/Taken hrs)\r\n Utilisation (Productive/Attended)\r\n Non Prod\r\n Productivity (Sold/Attended)\r\n EOM Forecast (£)\r\n \r\n \r\n \r\n \r\n Location\r\n \r\n \r\n \r\n Attended MTD\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Productive MTD\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Efficiency\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n {/* */}\r\n\r\n \r\n \r\n \r\n Utilisation\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Productivity\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Projection\r\n \r\n \r\n Invoice Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { Container, Grid, Typography } from '@material-ui/core';\r\nimport BudgetTableOne from './dashTableOne';\r\nimport './budgetStyle.scss';\r\nimport { BudgetGraph, WipGraph, WipGraphtwo } from './budgetGraph';\r\nimport BudgetTableTwo from './dasbordTabletwo';\r\nimport { TargetTableOne, TargetTableTwo, TargetTableThree, TargetTableFour, TargetTableFive } from './targetTabels';\r\nimport { lightGreen } from '@material-ui/core/colors';\r\n\r\nconst BudgetDashboard = () => {\r\n return (\r\n \r\n
\r\n \r\n Dec
\r\n \r\n \r\n Current position Report
\r\n \r\n \r\n 12/13/22
\r\n \r\n \r\n {/* Current position Report
*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n Variance on Budget Graph
\r\n \r\n \r\n Wip
\r\n \r\n \r\n Forecast
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n Target Calculations
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Hours in WIP This Week\r\n \r\n \r\n \r\n \r\n \r\n Invoicing\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n *Note to Dealer staff: incase of Para B. the vehicle and key are NOT to be handed over to the customer, It must be clear that the\r\n operator takes them from the counter/van against your wishes.\r\n \r\n \r\n \r\n \r\n );\r\n});\r\n","import React, { useEffect, useState,useContext } from 'react';\r\nimport { FormLabel, Grid, makeStyles } from '@material-ui/core';\r\nimport { TextBoxShrink } from '../../../../Core/FormInput';\r\nimport { get } from 'lodash';\r\nimport { CustomeSignPad } from '../../../../Core/SignaturePad';\r\nimport AppContext from '../../../../App/AppContext';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n signFormControl: {\r\n border: '1px solid rgba(0, 0, 0, 0.23)',\r\n borderRadius: 4,\r\n '& > label': {\r\n background: 'white',\r\n padding: '0px 5px'\r\n },\r\n '& > canvas': {\r\n width: '100%'\r\n }\r\n },\r\n clearSign: {\r\n position: 'absolute',\r\n bottom: 10,\r\n right: 10\r\n }\r\n}));\r\n\r\nexport const DriverDetails = React.memo((props) => {\r\n const classes = useStyles();\r\n // const [hasSign, setHasSign] = useState(true);\r\n const { state, setState } = props; //useContext(JobSheetContext);\r\n // let canvasRef;\r\n const { userRoles } = useContext(AppContext);\r\n const isAuditor = userRoles.includes('auditor');\r\n\r\n const setField = (e) => {\r\n const { name, type, value, valueAsNumber, checked } = e.target;\r\n if (type === 'number') {\r\n setState((st) => ({ ...st, [name]: valueAsNumber }));\r\n } else if (type === 'checkbox') {\r\n setState((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n\r\n const getField = (name) => {\r\n return get(state, name);\r\n };\r\n\r\n // const setSign = () => {\r\n // const service24DriverSignature = canvasRef.toDataURL();\r\n // console.log(service24DriverSignature);\r\n // setState((st) => ({ ...st, service24DriverSignature }));\r\n // };\r\n const GetTechnicianSign = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n ...val\r\n }));\r\n };\r\n const clearSign = () => {\r\n // canvasRef.clear();\r\n setState((st) => ({ ...st, service24DriverSignature: undefined }));\r\n };\r\n\r\n // useEffect(() => {\r\n // setHasSign(state.service24DriverSignature);\r\n // }, [canvasRef, state.service24DriverSignature]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n { !isAuditor && \r\n \r\n Signature\r\n {state.service24DriverDateSigned && (\r\n ({`On Behalf of customer:${state.driverName} ${state.service24DriverDateSigned}`})\r\n )}\r\n \r\n }\r\n sign={getField('driverSignature')}\r\n name=\"service24DriverSignature\"\r\n clearSig={clearSign}\r\n />\r\n }\r\n \r\n );\r\n});\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport { TextBoxShrink } from '../../../../Core/FormInput';\r\nimport { get } from 'lodash';\r\n\r\nexport const BasicFooter = React.memo((props) => {\r\n const { state, setState } = props;\r\n const setField = (e) => {\r\n const { name, type, value, valueAsNumber, checked } = e.target;\r\n if (type === 'number') {\r\n setState((st) => ({ ...st, [name]: valueAsNumber }));\r\n } else if (type === 'checkbox') {\r\n setState((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n const getField = (name) => {\r\n return get(state, name);\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n});\r\n","import { get, post } from './http-calls';\r\n\r\nexport const getService24ByID = async (id) => {\r\n let res = await get(`Service24Jobs/GetDetails/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getService24Dropdowns = async () => {\r\n let res = await get(`Service24Jobs/Dropdowns`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postService24 = async (data) => {\r\n let res = await post(`Service24Jobs`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import { get, post, put } from './http-calls';\r\n\r\nexport const getBtteryTestDetails = async (id, technicianJobId) => {\r\n let res = await get(`BatteryTests/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBtteryTestDetails = async (data) => {\r\n let res = await post('BatteryTests', data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useContext, useMemo, useEffect, useState, useRef } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport { TextBox, SecondaryButton, DialogContents, AppButtonGroup } from '../../../Core/FormInput';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport '../../technician/technician-app/TechnicianStyle.scss';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport { Backup, Mail, Visibility } from '@material-ui/icons';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { getBtteryTestDetails, postBtteryTestDetails } from '../../../Core/Service/batteryTest-service';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\n\r\nconst SecondaryBatteryModal = ({ state, fieldChange, handel, styles }) => {\r\n return (\r\n <>\r\n \r\n \r\n Battery Manufacturer\r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestManufacturerID}\r\n \r\n \r\n \r\n Barcode (Mode Designation)\r\n \r\n {state.secondaryErrors.batteryTestBarcode}\r\n \r\n \r\n Capacity\r\n Ah\r\n }}\r\n />\r\n {state.secondaryErrors.batteryTestCapacity}\r\n \r\n\r\n \r\n Cold Test Current\r\n \r\n {state.secondaryErrors.batteryTestColdTestCurrent}\r\n \r\n\r\n \r\n MB Part Number\r\n \r\n {state.secondaryErrors.batteryTestMBPartNumber}\r\n \r\n \r\n \r\n \r\n Production Date (on negative terminal)\r\n \r\n \r\n \r\n {/* \r\n Weeks \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestProductionWeek}\r\n \r\n \r\n \r\n
\r\n Visual Inspection\r\n \r\n
\r\n \r\n \r\n \r\n External signs of leaks\r\n \r\n \r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestLeak}\r\n \r\n \r\n \r\n If yes, where is the leak:\r\n \r\n \r\n {state.secondaryErrors.batteryTestLeakPosition}\r\n \r\n \r\n
\r\n
\r\n Midronics Test\r\n \r\n
\r\n \r\n \r\n \r\n Result\r\n \r\n \r\n\r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestMidtronicsTestResult}\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: true\r\n }))\r\n }\r\n >\r\n Secondary Battery\r\n \r\n */}\r\n \r\n \r\n
\r\n {/* \r\n Midronics Test\r\n */}\r\n \r\n \r\n Test Code\r\n \r\n {state.secondaryErrors.batteryTestTestCode}\r\n \r\n \r\n Damage Code\r\n \r\n {state.secondaryErrors.batteryTestDamageCode}\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SecondaryBatteryModal;\r\n","import {\r\n Dialog,\r\n DialogContent,\r\n DialogTitle,\r\n Divider,\r\n FormControlLabel,\r\n Grid,\r\n IconButton,\r\n InputLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography,\r\n withStyles\r\n} from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { DescriptionIcon } from '@material-ui/icons/Description';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport SecondaryBatteryModal from './../../technician/BatteryTest/SecondaryBatteryModal';\r\nimport { SecondaryButton } from './../../../Core/FormInput/AppButton';\r\nimport moment, { relativeTimeRounding } from 'moment';\r\nimport { FieldWrappper } from '../../../Core/FieldWrapper';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n // color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: theme.palette.action.hover\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: 700\r\n }\r\n});\r\n\r\nconst PartDialog = (props) => {\r\n const { part, setPart, control } = props;\r\n\r\n const classes = useStyles();\r\n\r\n const addPartsRow = () => {\r\n setPart((st) => [\r\n ...st,\r\n {\r\n service24PartID: null,\r\n service24PartNumber: '',\r\n service24PartDescription: '',\r\n service24PartQuantity: 0,\r\n service24PartPrice: null\r\n }\r\n ]);\r\n };\r\n\r\n const removePartAt = (indx) => {\r\n setPart((st) => {\r\n const newSt = [...st];\r\n newSt.splice(indx, 1);\r\n return newSt;\r\n });\r\n };\r\n\r\n const handlepart = (index) => (e) => {\r\n let { name, value } = e.target;\r\n setPart((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex[name] = value;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const totalRepair = moment(control.service24RepairEndTime).diff(control.service24RepairStartTime, 'minute');\r\n let repairHours = Math.floor(totalRepair / 60);\r\n let repairMinutes = totalRepair % 60;\r\n const TotalRepairTime = control.service24RepairEndTime && totalRepair > 0 ? `${repairHours} hours ${repairMinutes} minutes` : totalRepair < 0 ? '' : null;\r\n\r\n const Traveltimestart = moment(control.service24RepairStartTime).diff(control.service24DrivingStartTime, 'minute');\r\n const TraveltimeEnd = moment(control.service24DrivingEndTime).diff(control.service24RepairEndTime, 'minute');\r\n\r\n let TravelDiff = Traveltimestart + TraveltimeEnd;\r\n let travelHours = Math.floor(TravelDiff / 60);\r\n let travelMinutes = TravelDiff % 60;\r\n\r\n const TotalTravelTime = control.service24DrivingEndTime && TravelDiff > 0 ? `${travelHours} hours ${travelMinutes} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TechTime = totalRepair + TravelDiff;\r\n\r\n let techHH = Math.floor(TechTime / 60);\r\n let techMM = TechTime % 60;\r\n\r\n const TotaltechTime = TotalTravelTime && TechTime > 0 ? `${techHH} hours ${techMM} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TotalMileage = control.service24DrivingEndTime && control.service24DrivingFinishMileage - control.service24DrivingStartMileage;\r\n\r\n return (\r\n \r\n
\r\n {part.map((row, index) => {\r\n return (\r\n \r\n \r\n \r\n {index !== 0 && (\r\n
{\r\n removePartAt(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === part.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n
\r\n {index !== 0 && (\r\n
{\r\n removeTimeRow(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === service24.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default ServiceTime;\r\n","import {\r\n Dialog,\r\n DialogContent,\r\n DialogTitle,\r\n Divider,\r\n FormControlLabel,\r\n Grid,\r\n IconButton,\r\n InputLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography,\r\n withStyles\r\n} from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { DescriptionIcon } from '@material-ui/icons/Description';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport SecondaryBatteryModal from '../../../technician/BatteryTest/SecondaryBatteryModal';\r\nimport { SecondaryButton } from '../../../../Core/FormInput/AppButton';\r\nimport moment, { relativeTimeRounding } from 'moment';\r\nimport { FieldWrappper } from '../../../../Core/FieldWrapper';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n // color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: theme.palette.action.hover\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: 700\r\n }\r\n});\r\n\r\nconst WorkRequestedModal = (props) => {\r\n const { work, setWork, control } = props;\r\n\r\n const classes = useStyles();\r\n\r\n const addWorkRow = () => {\r\n setWork((st) => [\r\n ...st,\r\n {\r\n service24WorkID: null,\r\n service24WorkRequested: '',\r\n service24WorkReason: '',\r\n service24WorkAction: '',\r\n service24WorkTimeTaken: null\r\n }\r\n ]);\r\n };\r\n\r\n const removeWorkAt = (indx) => {\r\n setWork((st) => {\r\n const newSt = [...st];\r\n newSt.splice(indx, 1);\r\n return newSt;\r\n });\r\n };\r\n\r\n const handlwork = (index) => (e) => {\r\n let { name, value } = e.target;\r\n setWork((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex[name] = value;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const totalRepair = moment(control.service24RepairEndTime).diff(control.service24RepairStartTime, 'minute');\r\n let repairHours = Math.floor(totalRepair / 60);\r\n let repairMinutes = totalRepair % 60;\r\n const TotalRepairTime = control.service24RepairEndTime && totalRepair > 0 ? `${repairHours} hours ${repairMinutes} minutes` : totalRepair < 0 ? '' : null;\r\n\r\n const Traveltimestart = moment(control.service24RepairStartTime).diff(control.service24DrivingStartTime, 'minute');\r\n const TraveltimeEnd = moment(control.service24DrivingEndTime).diff(control.service24RepairEndTime, 'minute');\r\n\r\n let TravelDiff = Traveltimestart + TraveltimeEnd;\r\n let travelHours = Math.floor(TravelDiff / 60);\r\n let travelMinutes = TravelDiff % 60;\r\n\r\n const TotalTravelTime = control.service24DrivingEndTime && TravelDiff > 0 ? `${travelHours} hours ${travelMinutes} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TechTime = totalRepair + TravelDiff;\r\n\r\n let techHH = Math.floor(TechTime / 60);\r\n let techMM = TechTime % 60;\r\n\r\n const TotaltechTime = TotalTravelTime && TechTime > 0 ? `${techHH} hours ${techMM} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TotalMileage = control.service24DrivingEndTime && control.service24DrivingFinishMileage - control.service24DrivingStartMileage;\r\n\r\n return (\r\n \r\n
\r\n {work.map((row, index) => {\r\n return (\r\n \r\n \r\n \r\n {index !== 0 && (\r\n
{\r\n removeWorkAt(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === work.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n {MonthShortNameList.map((p) => {\r\n return {p};\r\n })}\r\n \r\n Total\r\n \r\n \r\n \r\n \r\n {state.calculatedRows.map((q) => {\r\n if (!q.branchID) {\r\n return (\r\n \r\n Group Total\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n {formatters.ToFixedSeparator(q[`reportingBudget${p}Total`])}\r\n );\r\n })}\r\n \r\n {formatters.ToFixedSeparator(q.reportingBudgetTotalTotal)}\r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n {q.branchShortName}\r\n \r\n {InputWrapper('reportingBudgetJan', q.reportingBudgetJan, q.branchID)}\r\n {InputWrapper('reportingBudgetFeb', q.reportingBudgetFeb, q.branchID)}\r\n {InputWrapper('reportingBudgetMar', q.reportingBudgetMar, q.branchID)}\r\n {InputWrapper('reportingBudgetApr', q.reportingBudgetApr, q.branchID)}\r\n {InputWrapper('reportingBudgetMay', q.reportingBudgetMay, q.branchID)}\r\n {InputWrapper('reportingBudgetJun', q.reportingBudgetJun, q.branchID)}\r\n {InputWrapper('reportingBudgetJul', q.reportingBudgetJul, q.branchID)}\r\n {InputWrapper('reportingBudgetAug', q.reportingBudgetAug, q.branchID)}\r\n {InputWrapper('reportingBudgetSep', q.reportingBudgetSep, q.branchID)}\r\n {InputWrapper('reportingBudgetOct', q.reportingBudgetOct, q.branchID)}\r\n {InputWrapper('reportingBudgetNov', q.reportingBudgetNov, q.branchID)}\r\n {InputWrapper('reportingBudgetDec', q.reportingBudgetDec, q.branchID)}\r\n {formatters.ToFixedSeparator(q.totals) || 0}\r\n \r\n );\r\n }\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ReportingBudgetTable;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport ReportingBudgetTable from './budgetTable';\r\nimport { getReportingBudgetScreenDropDown } from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\n\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Bugdet', active: true }\r\n];\r\n\r\nconst ReportingBudget = (props) => {\r\n const childFunc = useRef(null);\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n budgetType: [],\r\n isValueChange: false\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getReportingBudgetScreenDropDown();\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear = res.data.year.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n });\r\n newSt.budgetType = res.data.type || [];\r\n\r\n return newSt;\r\n });\r\n }, []);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.budgetType.map((q) => {\r\n return {\r\n label: `${q.name}`,\r\n body: \r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n childFunc.current()} disabled={!state.isValueChange}>\r\n Save\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n = 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(profit, budget) < 50\r\n ? '#D92641'\r\n : setPercentage(profit, budget) >= 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n \r\n \r\n {props.dept}\r\n
\r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n {showLink ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n\r\n
\r\n {value || 0}\r\n
\r\n
{label || 'N/A'}
\r\n
\r\n BUDGET\r\n
\r\n
\r\n {profitVal || 0}\r\n \r\n {icon === 'down' ? : }\r\n \r\n \r\n
{branchName}
\r\n
props.onRedirectFun(branchID)} />\r\n \r\n = 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(profit, budget) < 50\r\n ? '#D92641'\r\n : setPercentage(profit, budget) >= 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px',\r\n dominantBaseline: 'central'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n
Retail Units
\r\n
{formatters.ThousandSeparatorWithoutZero(retailsUnits)}
\r\n
\r\n
{props.selectedFilterBtnId == 'New' ? 'Motability Units' : 'Trade Units'}
\r\n
\r\n {props.selectedFilterBtnId == 'New'\r\n ? formatters.ThousandSeparatorWithoutZero(motabilityUnits)\r\n : formatters.ThousandSeparatorWithoutZero(tradeUnits)}\r\n
\r\n
\r\n
New Units
\r\n
{formatters.ThousandSeparatorWithoutZero(newUnits)}
\r\n
\r\n
Used Units
\r\n
{formatters.ThousandSeparatorWithoutZero(usedUnits)}
\r\n
\r\n
{props.label}
\r\n
\r\n
\r\n = 50 && value < 75 ? '#ff9f00' : value >= 75 ? '#569101' : '#D92641',\r\n pathColor: value < 50 ? '#D92641' : value >= 50 && value < 75 ? '#ff9f00' : value >= 75 ? '#569101' : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n
\r\n \r\n {label || 'N/A'}
\r\n \r\n \r\n {value || 0}
\r\n \r\n \r\n BUDGET
\r\n \r\n\r\n \r\n \r\n {profitVal || 0}\r\n \r\n {!up ? : }\r\n \r\n \r\n
\r\n \r\n {label || 'N/A'}
\r\n \r\n \r\n \r\n
\r\n {value || 0}\r\n \r\n {showBudget ? !up ? : : null}\r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.profit)}
\r\n
\r\n
Budget Variance
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.variance)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.budget)}
\r\n
\r\n {data.ppu ? (\r\n <>\r\n
Total PPU
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.ppu)}
\r\n \r\n ) : (\r\n <>\r\n
\r\n
\r\n \r\n )}\r\n
\r\n = 50 && setPercentage(data?.profit, data?.budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(data?.profit, data?.budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(data?.profit, data?.budget) < 50\r\n ? '#D92641'\r\n : setPercentage(data?.profit, data?.budget) >= 50 && setPercentage(data?.profit, data?.budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(data?.profit, data?.budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const UsedStocksCard = (props) => {\r\n const { CurrentStockValue, AverageStockValue, PreviousYearAverage } = props;\r\n const handleRedirect = (link, branchID) => {\r\n let searchQuery = `?isTrue=${true}`;\r\n let array = [];\r\n if (branchID) {\r\n array.push(branchID);\r\n }\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: array }));\r\n props.history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {props.branch}
\r\n \r\n \r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
{props.branch}
\r\n \r\n \r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n handleRedirect(props.stockLink, props.branchID)}>\r\n STOCK LIST \r\n \r\n\r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n
\r\n \r\n \r\n \r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
\r\n
\r\n //
{m.valuationDate1}
\r\n //
{formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue1)}
\r\n // {list.length - 1 == index ? (\r\n //
\r\n // ) : (\r\n //
= 0 ? '#569101' : '#E51A54', padding: 0 }}\r\n // >\r\n // {parseFloat(m.getCalculatedvalue).toFixed(2)}% \r\n // {m.getCalculatedvalue >= 0 ? (\r\n // \r\n // ) : (\r\n // \r\n // )}\r\n // {data.branch}
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n \r\n \r\n \r\n \r\n handleRedirect(props.stockLink, props.branchID)}>\r\n STOCK LIST \r\n \r\n \r\n \r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total CAP Clean\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Total Variance \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n \r\n {!true ? : }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Avg DIS
\r\n \r\n {data.avgDis}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Stock Turn
\r\n \r\n {data.stockTurn}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n
{data.branch}
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n
\r\n handleRedirect(props.stockLink, props.branchID)}\r\n >\r\n STOCK LIST \r\n \r\n\r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
Total CAP Clean
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n
\r\n
\r\n
Total Variance
\r\n
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n
\r\n {!true ? : }\r\n \r\n
\r\n
\r\n
Avg DIS
\r\n
\r\n {data.avgDis}\r\n
\r\n
\r\n
Stock Turn
\r\n
\r\n {data.stockTurn}\r\n
\r\n
\r\n
\r\n {list.map((m) => {\r\n if (m.branchID === props.branchID) {\r\n return (\r\n \r\n \r\n
{m.valuationDays1}
\r\n
{`${m.totalCount1} (${m.percent1}%)`}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue1)}\r\n
\r\n
\r\n
\r\n \r\n {list.map((m) => {\r\n if (m.branchID === props.branchID) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n 0 - 30 DAYS\r\n \r\n {`${m.totalCount0to30} (${m.totalPerc0to30}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue0to30)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 31 -60 DAYS\r\n \r\n {`${m.totalCount31to60} (${m.totalPerc31to60}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue31to60)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 61 - 90 DAYS\r\n \r\n {`${m.totalCount61to90} (${m.totalPerc61to90}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue61to90)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 91 - 120 DAYS\r\n \r\n {`${m.totalCount91to120} (${m.totalPerc91to120}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue91to120)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 121 - 150 DAYS\r\n \r\n {`${m.totalCount121to150} (${m.totalPerc121to150}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue121to150)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 150+ DAYS\r\n \r\n {`${m.totalCount150Plus} (${m.totalPerc150Plus}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue150Plus)}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n //
\r\n );\r\n};\r\n\r\nexport const SalesCard = (props) => {\r\n const { up, value, label, profitVal, subLabelOne, subLabelTwo } = props;\r\n return (\r\n \r\n
\r\n \r\n {label || 'N/A'}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(value) || 0}\r\n \r\n\r\n \r\n \r\n
{subLabelOne}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.newProfit)}\r\n
\r\n
\r\n
{subLabelTwo}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.newPpu)}\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n CURRENT\r\n \r\n \r\n PRIOR YEAR\r\n \r\n \r\n DIFFERENCE\r\n \r\n \r\n \r\n \r\n {props.data?.map((row) => (\r\n \r\n \r\n {row.description}\r\n \r\n \r\n {row.current}\r\n \r\n \r\n {row.priorYear}\r\n \r\n \r\n {row.diff || 0} \r\n {false ? : }\r\n \r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n height: 600,\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n width: '100%'\r\n }\r\n}));\r\n\r\nexport default function CircularIndeterminate() {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n","import { Avatar, ButtonGroup } from '@material-ui/core';\r\nimport { Button, Collapse, FormLabel, Grid, Hidden, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\n\r\nimport { useState } from 'react';\r\n// import { ProfitTable } from './profitlossTable';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\r\n\r\nimport { getReportsDropdowns, getProfitLossbyID } from '../../../../../Core/Service/reportService';\r\nimport { FilterListIcon } from '@material-ui/icons/FilterList';\r\nimport { BudgetSendBtn, FilterBtn, LinkedButton, SmallLinkedButton } from '../BudgetCore/budgetButton';\r\nimport { ProfitLossCards, UsedStocksCard, UsedStocksCardTWO } from '../BudgetCore/budgetCardsUi_v2';\r\nimport ViewComfyIcon from '@material-ui/icons/ViewComfy';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport { PandLLineChart } from '../BudgetCore/p&ldetailsChart';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Label } from 'recharts';\r\n\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CircularIndeterminate from '../BudgetCore/loader';\r\n\r\nimport { getUsedStockValuation } from '../../../../../Core/Service/ReportScreens-service';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\n\r\nlet filterBtnList = [\r\n { label: 'COMBINED', id: 'C' },\r\n { label: 'RETAIL', id: 'R' },\r\n { label: 'TRADE', id: 'T' }\r\n];\r\n\r\nconst crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Used Stock', active: true },\r\n { name: 'Used Stock Valuation', active: true }\r\n];\r\n\r\nconst UsedStockValuation = () => {\r\n const [state, setState] = useState({\r\n branches: [],\r\n tableRow: [],\r\n branchList: [],\r\n franchise: [],\r\n groupIds: [],\r\n franchiseIds: [],\r\n showTable: true,\r\n gpStock: {},\r\n mainData: [],\r\n selectedFilterBtn: filterBtnList[0].id,\r\n showLoader: true\r\n });\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n const portalNicolJson = JSON.parse(localStorage.getItem('NicoleFilterData'));\r\n\r\n const history = useHistory();\r\n\r\n const [temp, tempOption] = useState();\r\n\r\n const [table, setTable] = useState(false);\r\n\r\n const handleinput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n useEffect(async () => {\r\n let DropDownRes = await getReportsDropdowns();\r\n if (DropDownRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: DropDownRes.data.branch,\r\n franchise: DropDownRes.data.franchiseCode\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleTable = () => {\r\n setTable(!table);\r\n };\r\n\r\n useEffect(async () => {\r\n let combineData = [];\r\n let res = await getUsedStockValuation(state.selectedFilterBtn);\r\n if (res.success) {\r\n if (res?.data?.mainData != null && res?.data?.mainData.length > 0) {\r\n combineData = res?.data?.mainData.map((p) => {\r\n let weeklyDataByIdList = res?.data?.weeklyData.filter((q) => q.branchID == p.branchID);\r\n p.weeklyDataList = [...weeklyDataByIdList].sort(\r\n (a, b) => moment(b.valuationDate1).format('YYYYMMDD') - moment(a.valuationDate1).format('YYYYMMDD')\r\n );\r\n p.weeklyDataList = p.weeklyDataList.map((m, index) => ({\r\n ...m,\r\n getCalculatedvalue: ((m.stockValue1 - p.weeklyDataList[index + 1]?.stockValue1) / p.weeklyDataList[index + 1]?.stockValue1) * 100\r\n }));\r\n return p;\r\n });\r\n }\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n gpStock: res?.data?.gpStock[0],\r\n gpValueData: res?.data?.gpValue,\r\n mainData: combineData || [],\r\n showLoader: false\r\n }));\r\n }, [state.startDate, state.endDate, state.franchiseIds, state.groupIds, state.selectedFilterBtn]);\r\n\r\n const handleChanges = (event, value) => {\r\n tempOption((st) => ({ ...st, groupVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, groupIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangesfranch = (event, value) => {\r\n tempOption((st) => ({ ...st, franchiseVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchiseIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const [checked, setChecked] = useState(false);\r\n\r\n const handleChange = () => {\r\n setChecked((prev) => !prev);\r\n };\r\n\r\n const filterBtnChange = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedFilterBtn: id\r\n }));\r\n };\r\n\r\n const handleRedirect = (link) => {\r\n let searchQuery = `?isTrue=${true}`;\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: [] }));\r\n };\r\n\r\n return (\r\n \r\n {/*
*/}\r\n {state.showLoader ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n\r\n \r\n {filterBtnList.map((p) => {\r\n return (\r\n \r\n filterBtnChange(p.id)}>\r\n {p.label}\r\n \r\n \r\n );\r\n })}\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n GROUP STOCK
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{state.gpStock.totalUnitStock}
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.avgSIV)}\r\n
\r\n
Average SIV
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.previousYearAvg)}\r\n
\r\n
Previous Year Average
\r\n
GROUP STOCK VALUE (YR)
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {state.mainData.map((p) => {\r\n return (\r\n <>\r\n {/* {p.branch}
*/}\r\n \r\n \r\n \r\n \r\n
{p.units}
\r\n
Units
\r\n
\r\n
\r\n \r\n \r\n \r\n {stableSort(props.list, getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n return (\r\n \r\n \r\n {row.stockNO}\r\n \r\n \r\n {row.regNo}\r\n \r\n \r\n {row.make}\r\n \r\n \r\n {row.model}\r\n \r\n \r\n {formatters.YearFormatter(row.dor)}\r\n \r\n \r\n {row.dayInStock}\r\n \r\n \r\n {row.mileage}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.standInValue)}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.capClean)}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.capClean - row.standInValue)}\r\n {!true ? : }\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n
\r\n {/* */}\r\n {stockData.showLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {WindowWidths > 1024 ? <> DOWNLOAD CSV : ''}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n SELECT BRANCH\r\n \r\n \r\n \r\n \r\n \r\n VEHICLE PROFILE\r\n \r\n \r\n \r\n \r\n {/*
*/}\r\n \r\n\r\n \r\n \r\n GROUP STOCK VALUE (YR)
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {stockData?.mainData?.map((p) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
{p.units}
\r\n
Units
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default UsedStock;\r\n","import { Avatar, ButtonGroup } from '@material-ui/core';\r\nimport { Button, Collapse, FormLabel, Grid, Hidden, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { Multiselect, TextBox, DatePicker } from '../../../../../Core/FormInput';\r\n\r\nimport { useState } from 'react';\r\n// import { ProfitTable } from './profitlossTable';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\r\n\r\nimport { FilterListIcon } from '@material-ui/icons/FilterList';\r\nimport { BudgetSendBtn, FilterBtn, LinkedButton, SmallLinkedButton } from '../BudgetCore/budgetButton';\r\nimport { AgedStockCard, AgedStocksCardTWO, AgedStocksDayRangeCard, ProfitLossCards, UsedStocksCard, UsedStocksCardTWO } from '../BudgetCore/budgetCardsUi_v2';\r\nimport ViewComfyIcon from '@material-ui/icons/ViewComfy';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport { PandLLineChart } from '../BudgetCore/p&ldetailsChart';\r\nimport { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\n// import UsedStocksTable from './usedStockTable';\r\n\r\nimport ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';\r\n\r\nimport ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';\r\nimport { getAgedStockValuation } from '../../../../../Core/Service/ReportScreens-service';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CircularIndeterminate from '../BudgetCore/loader';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\n\r\nconst crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Used Stock', active: true },\r\n { name: 'Aged Vehicle Stock', active: true }\r\n];\r\n\r\nconst AgedStocks = () => {\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n const history = useHistory();\r\n const portalNicolJson = JSON.parse(localStorage.getItem('NicoleFilterData'));\r\n const [state, setState] = useState({ avgVehicle: [], mainData: [], vehilceSplitByDays: [], showLoader: true });\r\n\r\n useEffect(async () => {\r\n let res = await getAgedStockValuation();\r\n if (res.success) {\r\n let groupStock = res.data.gpStock[0];\r\n setState((st) => ({\r\n ...st,\r\n avgSIV: groupStock.avgSIV,\r\n totalCAPValue: groupStock.totalCAPValue,\r\n totalStockValue: groupStock.totalStockValue,\r\n totalUnitStock: groupStock.totalUnitStock,\r\n avgVehicle: res.data.avgVehicle,\r\n totalVariance: groupStock.totalCAPValue - groupStock.totalStockValue,\r\n mainData: res.data.mainData,\r\n vehilceSplitByDays: res.data.vehilceSplitByDays,\r\n showLoader: false\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleRedirect = (link) => {\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: [] }));\r\n history.push({\r\n pathname: link\r\n });\r\n };\r\n\r\n let barColor = {\r\n 1: '#569101',\r\n 2: '#FFBF00',\r\n 3: 'red'\r\n };\r\n\r\n return (\r\n \r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n GROUP STOCK
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{state.totalUnitStock || 0}
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalCAPValue)}\r\n
\r\n
Total CAP Clean
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
{formatters.CurrencyThousandSeparatorWithoutZero(Math.abs(state.totalVariance))}\r\n
\r\n {state.totalVariance < 0 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
Total Variance
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRedirect('/usedStock')}>\r\n STOCK LIST \r\n \r\n \r\n \r\n handleRedirect('/overagePriority')}>\r\n OVERAGE \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n
AVERAGE VEHICLE AGE PER SITE
{' '}\r\n
\r\n \r\n {/* */}\r\n \r\n \r\n \r\n {/* */}\r\n {state.avgVehicle.map((entry, index) => {\r\n let colorCode;\r\n if (entry.count <= 50) {\r\n colorCode = 1;\r\n } else if (entry.count >= 50 && entry.count < 150) {\r\n colorCode = 2;\r\n } else if (entry.count >= 150) {\r\n colorCode = 3;\r\n }\r\n return (\r\n {\r\n // handleDetailpopUp(entry, 'VMRS');\r\n // }}\r\n />\r\n );\r\n })}\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n\r\n {state.mainData.map((m) => {\r\n return (\r\n <>\r\n
\r\n \r\n \r\n \r\n
{m.units}
\r\n
Units
\r\n
\r\n {/*
*/}\r\n {state.showLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {WindowWidths > 1024 ? <> DOWNLOAD CSV : ''}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n SELECT BRANCH\r\n \r\n \r\n \r\n \r\n\r\n \r\n {state.gpStock.map((p) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n {p.label}
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{p.totalUnits}
\r\n
Total Units
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(p.standInValue)}\r\n
\r\n
Stand In Value (SIV)
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(p.totalCAPClean)}\r\n
\r\n
Total CAP Clean
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(Math.abs(p.totalVariance))}\r\n
\r\n
Total Variance
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Budget\r\n \r\n \r\n \r\n Actuals\r\n \r\n \r\n \r\n MTD VARIANCE\r\n \r\n \r\n \r\n RUN RATE PROJECTION\r\n \r\n \r\n \r\n BALANCE TO HIT BUDGET\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total month\r\n \r\n \r\n Month to date 5 days\r\n \r\n \r\n Daily rate\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n Month to date 5 days\r\n \r\n \r\n Daily rate\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n Month to date 5 days\r\n \r\n \r\n Month to date 5 days\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Full month at run rate\r\n \r\n \r\n Full month budget\r\n \r\n \r\n Full month last year\r\n \r\n \r\n Variance to budget\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n Based on MTD Actual\r\n \r\n \r\n Daily rate required\r\n \r\n \r\n Run rate improvement required\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n £\r\n \r\n \r\n %\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n %\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Knowsley Van\r\n \r\n Workshop\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n Counter\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n Total\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {/* \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n Total Parts Sales Counter/Workshop \r\n \r\n \r\n December 2022\r\n \r\n \r\n \r\n Working Days : 05\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n KVN\r\n KNT\r\n Dee\r\n TRA\r\n STO\r\n \r\n Total Group\r\n Difference\r\n \r\n \r\n \r\n \r\n Parts sales Counter\r\n Need\r\n showSummenry()}>\r\n £43,486\r\n \r\n \r\n £37,730\r\n \r\n \r\n £26,871\r\n \r\n \r\n £66,130\r\n \r\n \r\n £56,593\r\n \r\n \r\n \r\n £230,820\r\n \r\n \r\n \r\n\r\n \r\n Parts sales Counter\r\n Done\r\n \r\n £42,825\r\n \r\n \r\n £95,194\r\n \r\n \r\n £31,742\r\n \r\n \r\n £45,054\r\n \r\n \r\n £42,820\r\n \r\n \r\n \r\n £257,634\r\n \r\n £26,824\r\n \r\n\r\n \r\n Parts sales Workshop\r\n Need\r\n \r\n £36,330\r\n \r\n \r\n £47,732\r\n \r\n \r\n £51,754\r\n \r\n \r\n £57,981\r\n \r\n \r\n £58,307\r\n \r\n \r\n \r\n £252,104\r\n \r\n \r\n \r\n\r\n \r\n Parts sales Workshop\r\n Done\r\n \r\n £35,962\r\n \r\n \r\n £28,726\r\n \r\n \r\n £24,417\r\n \r\n \r\n £42,862\r\n \r\n \r\n £48,248\r\n \r\n \r\n \r\n £180,216\r\n \r\n \r\n -£71,887\r\n \r\n \r\n \r\n Profit \r\n Need\r\n \r\n £15,000\r\n \r\n \r\n £17,093\r\n \r\n \r\n £15,003\r\n \r\n \r\n £23,023\r\n \r\n \r\n £23,023\r\n \r\n \r\n \r\n £22,176\r\n \r\n \r\n \r\n \r\n Profit \r\n Done\r\n \r\n £14,989\r\n \r\n \r\n £18,775\r\n \r\n \r\n £12,002\r\n \r\n \r\n £18,615\r\n \r\n \r\n £18,558\r\n \r\n \r\n \r\n £82,938\r\n \r\n \r\n -£9,356\r\n \r\n \r\n \r\n Profit % \r\n \r\n \r\n 19.02%\r\n \r\n \r\n 15.15%\r\n \r\n \r\n 21.37%\r\n \r\n \r\n 21.17%\r\n \r\n \r\n 20.38%\r\n \r\n \r\n \r\n 18.94%\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumIdleHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumProductiveHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumNonProductiveHours) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n headerFilter: false,\r\n primaryKey: 'ic',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: IdelCol,\r\n detailTemplate: ''\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, ic) {\r\n techGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, IdleCode: ic },\r\n headerFilter: false,\r\n primaryKey: 'rc',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechFun\r\n },\r\n columns: nominalColumns,\r\n detailTemplate: ''\r\n });\r\n techGrid.on('detailExpand', function (e, $detailWrapper, rc) {\r\n techDetailsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, IdleCode: ic, res: rc },\r\n headerFilter: false,\r\n primaryKey: 'rn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechDetailsFun\r\n },\r\n columns: techDetailsColumns\r\n });\r\n });\r\n });\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/IdleTimeAnalysis${getUrl.includes('?') ? '&' : '?'}fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'IdelTimeAnalysis');\r\n };\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n {/* \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Shift\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n */}\r\n\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Shift\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {Object.keys(colorConfig).map(function (key, i) {\r\n return (\r\n \r\n {colorConfig[key].name}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {calender.length > 0 ? (\r\n \r\n {calender.map((a, i) => (\r\n \r\n \r\n \r\n | \r\n \r\n {a.monthName}\r\n \r\n | \r\n
\r\n \r\n | Mon | \r\n Tue | \r\n Wed | \r\n Thu | \r\n Fri | \r\n Sat | \r\n Sun | \r\n
\r\n {a.monthData.map((p) => (\r\n \r\n {p.map((q) => (\r\n \r\n {q !== null ? q.day : ''}\r\n \r\n ))}\r\n
\r\n ))}\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n
\r\n \r\n {state.screenMsg}\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {state.reasonForXvail.map((q) => {\r\n return (\r\n \r\n {q.description}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {state.dayHoursList.map((p) => {\r\n return (\r\n \r\n \r\n {p.time}\r\n \r\n
\r\n
\r\n \r\n \r\n {/* \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Resource\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n */}\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Resource\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.reasonForXvail.map((j) => {\r\n return (\r\n \r\n {j.description}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {calender.length > 0 ? (\r\n \r\n {calender.map((a, i) => (\r\n \r\n \r\n \r\n | \r\n \r\n {a.monthName}\r\n \r\n | \r\n
\r\n \r\n | Mon | \r\n Tue | \r\n Wed | \r\n Thu | \r\n Fri | \r\n Sat | \r\n Sun | \r\n
\r\n {a.monthData.map((p) => (\r\n \r\n {p.map((q) => (\r\n showDayDataModal(q) : () => false}\r\n >\r\n {q !== null ? q.day : ''}\r\n \r\n ))}\r\n
\r\n ))}\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n
\r\n \r\n {state.screenMsg}\r\n \r\n \r\n )}\r\n \r\n \r\n {state.showDayDataModal && (\r\n
\r\n \r\n \r\n )}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {state.currentTechnicianId && state.technicianWorkflowId && (\r\n
\r\n \r\n
\r\n )}\r\n {state.showFilter ? (\r\n
closeDialog(false)}>\r\n \r\n \r\n ) : null}\r\n {state.showMotHistory && (\r\n
setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n {state.showCustomerRating ? (\r\n
closeDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.displayCustomerMessage ? (\r\n
closeDialog(false)} fullWidth>\r\n \r\n {state.customerMessage}\r\n \r\n \r\n ) : null}\r\n
\r\n Diagnostic Road Test\r\n \r\n \r\n Mileage In\r\n \r\n \r\n \r\n Mileage Out\r\n \r\n \r\n \r\n Time In\r\n \r\n \r\n \r\n Time Out\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n }\r\n label=\"Smoke Test Performed\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Service Indicator Reset\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Radio Code Reset\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Time Clock Reset\"\r\n />\r\n \r\n \r\n \r\n Technician {hideBrace ? ({`${state.technicianName || ''} ${state.technicianDateSigned}`}) : ' Signature'}\r\n \r\n }\r\n sign={state.imgtechniciansign}\r\n name=\"techniciansign\"\r\n hideBtn={!isTechnician}\r\n clearSig={clearSig}\r\n />\r\n {state.errors['techniciansign']}\r\n \r\n\r\n {state.imgteamleadersign && (\r\n \r\n \r\n Workshop Controller\r\n {hideBrace2 ? ({`${state.teamLeaderName || ''} ${state.teamLeaderDateSigned}`}) : ' Signature'}\r\n \r\n }\r\n sign={state.imgteamleadersign}\r\n name=\"teamleadersign\"\r\n hideBtn={true}\r\n />\r\n \r\n )}\r\n {/* {!state.isTechReadonly && ( */}\r\n \r\n {!ShowSubmit\r\n ? !state.imgteamleadersign &&\r\n (isTechnician || canAmendTechWriteUpFlag) && (\r\n \r\n \r\n {'\\u{2800}'}\r\n handleSubmit('T')}>\r\n Save\r\n \r\n \r\n {portalSettings.portalSettingDisplaySubmitbutton && (\r\n \r\n {'\\u{2800}'}\r\n \r\n Submit\r\n \r\n \r\n )}\r\n \r\n )\r\n : null}\r\n \r\n {/* )} */}\r\n \r\n {state.showConfirmModal ? (\r\n \r\n handleSubmit('S')}\r\n handleCancel={hideConfirmationModal}\r\n />\r\n \r\n ) : null}\r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {state.showGrid ? : null}\r\n \r\n {!fromStep && (\r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Technician App\r\n \r\n \r\n Technician Write-up\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n Registration Number: {state.registration}\r\n \r\n WIP No: {state.wipNumber}\r\n \r\n \r\n Customer: {state.customerName}\r\n \r\n \r\n Zoom\r\n \r\n \r\n \r\n \r\n \r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n {state.technicians.map((m) => (\r\n \r\n TechBtnClick(m.technicianJobID)}\r\n >\r\n {m.technician}\r\n \r\n
\r\n ))}\r\n\r\n {TabBody()}\r\n \r\n )}\r\n \r\n \r\n
\r\n {!params.row.partReqQuantity && *}\r\n \r\n
\r\n );\r\n }\r\n },\r\n { field: 'issueStatus', headerName: 'Issue Status', width: 230 },\r\n {\r\n field: '',\r\n headerName: '',\r\n width: 140,\r\n sortable: false,\r\n renderCell: (params) => (\r\n = 0 ? 'pointer' : ''}` }}>\r\n 0 || 0}\r\n count={params.row.photosUploaded || 0}\r\n onClick={() =>\r\n params.row.photosUploaded >= 0 &&\r\n setState((st) => ({ ...st, partId: params.row.id, desc: params.row.partReqPartDescription, showImage: true }))\r\n }\r\n />\r\n setShowInfo(params.row)} />\r\n
\r\n )\r\n }\r\n ];\r\n const isTechnician = userRoles.includes('technician');\r\n const isAuditor = userRoles.includes('auditor');\r\n\r\n const new_columns = useMemo(() => {\r\n const tempCols = [...columns];\r\n if (state.checkIssued) {\r\n tempCols.splice(0, 2, { field: 'qnIssued', headerName: 'Issued', width: 140 });\r\n }\r\n return tempCols;\r\n }, [columns]);\r\n\r\n const technicianJobId = props.match.params?.technicianJobId;\r\n useEffect(async () => {\r\n setState((st) => ({\r\n ...st,\r\n technicianNotesJobID: technicianJobId\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n pullWorkflowAndUpdateState();\r\n }, [state.technicianNotesJobID]);\r\n\r\n const TechBtnClick = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n technicianNotesJobID: id\r\n }));\r\n };\r\n\r\n const pullWorkflowAndUpdateState = async () => {\r\n let result = await getPartReqs(Id, state.technicianNotesJobID);\r\n const Result = result.data?.partReqs?.map((row) => ({\r\n id: row.partReqID,\r\n partReqPartDescription: row.partReqPartDescription,\r\n partReqQuantity: row.partReqQuantity,\r\n isDeleted: false,\r\n disabled: row.issuerSignature && row.approverSignature,\r\n isApproved: row.isApproved,\r\n qnIssued: row.partReqIssuedQuantity,\r\n requestor: row.requestor,\r\n approver: row.approver,\r\n partReqStatusDescription: row.partReqStatusDescription,\r\n issuer: row.issuer,\r\n issueStatus: row.issueStatus,\r\n requestorSignature: row.requestorSignature,\r\n issuerSignature: row.issuerSignature,\r\n approverSignature: row.approverSignature,\r\n partReqId: row.partReqID,\r\n requestedTime: row.requestedTime,\r\n issuedTime: row.issuedTime,\r\n approvedTime: row.approvedTime,\r\n photosUploaded: row.photosUploaded,\r\n Photos: [],\r\n oldPhoto: []\r\n }));\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: Result,\r\n technician: result.data?.technician,\r\n wipDetails: result.data?.wipDetails[0],\r\n checkIssued: some(result.data.partReqs, (r) => r.qnIssued)\r\n // technicianSignature: result.data.partReqs[0]?.partReqTechnicianSignature,\r\n // partReqTechnicianSignature: result.data.partReqs[0]?.partReqTechnicianSignature\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const addPartToLocally = () => {\r\n if (state.quantity === null) {\r\n showToast('Quantity is required');\r\n } else {\r\n let newPartToAdd = {\r\n partReqPartDescription: state.part,\r\n partReqQuantity: state.quantity,\r\n qnIssued: '-',\r\n isDeleted: +state.quantity === 0,\r\n ...(state.partId && { partReqId: state.partId || null })\r\n };\r\n setState((st) => ({\r\n ...st,\r\n rows: state.rows.filter((item) => item.id !== state.partId)\r\n }));\r\n setState((st) => {\r\n newPartToAdd.id = st.rows.length === 0 ? 1 : Math.max(...st.rows.map((c) => c.id)) + 1;\r\n return {\r\n ...st,\r\n rows: [...st.rows, newPartToAdd],\r\n part: '',\r\n quantity: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n }\r\n };\r\n\r\n const validations = (mode) => {\r\n const { partReqTechnicianSignature } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!partReqTechnicianSignature) {\r\n errors.partReqTechnicianSignature = 'Technician signature is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handelAddPartToServer = async (mode) => {\r\n if (isTechnician) {\r\n if (state.rows?.length > 0) {\r\n addPart(mode);\r\n } else {\r\n showToast('Please add least one part');\r\n }\r\n } else {\r\n addPart(mode);\r\n }\r\n };\r\n const addPart = async (mode) => {\r\n mode == 'save' ? setBtnLoader((st) => ({ ...st, btn2: true })) : setBtnLoader((st) => ({ ...st, btn1: true }));\r\n const data = {\r\n partReqTechnicianSignature: state.partReqTechnicianSignature,\r\n partReqsAddVM: state.rows.map((c) => ({\r\n partReqQuantity: c.partReqQuantity,\r\n partReqPartDescription: c.partReqPartDescription,\r\n isDeleted: c.isDeleted,\r\n partReqId: c.partReqId\r\n })),\r\n mode: mode\r\n };\r\n let res1 = await postPhotosByPartReqID(state.rows);\r\n let res = await addPartReq(Id, data, state.technicianNotesJobID);\r\n if (!res.success) {\r\n console.error(res);\r\n }\r\n showToast(res.message);\r\n if (res.success && fromStep) {\r\n mode == 'save' ? setBtnLoader((st) => ({ ...st, btn2: false })) : setBtnLoader((st) => ({ ...st, btn1: false }));\r\n setTimeout(() => {\r\n window.top.postMessage({ type: navigateToDashboard ? 'navigate-dashboard' : 'close-modal' }, '*');\r\n }, 1000);\r\n }\r\n };\r\n\r\n const showConfirmationModal = () => {\r\n if (validations()) {\r\n setState((st) => ({ ...st, showConfirmModal: true }));\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n };\r\n\r\n const signChange = (e) => {\r\n setState((st) => {\r\n return { ...st, ...e };\r\n });\r\n };\r\n\r\n const clearSig = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n partReqTechnicianSignature: null\r\n }));\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No parts available
\r\n \r\n );\r\n }\r\n\r\n const gridheight = `calc(100vh - ${isTechnician ? '348px' : '274px'})`;\r\n\r\n const inputFile = useRef(null);\r\n\r\n const upload = async (e) => {\r\n const files = Array.from(e.target.files);\r\n\r\n files.map((file) => {\r\n const reader = new FileReader();\r\n reader.readAsText(file);\r\n\r\n reader.onload = () => {\r\n const res = reader.result.split('\\n');\r\n res.splice(0, 1);\r\n\r\n res.map((row) => {\r\n const parts = row.split('|');\r\n\r\n const partDesc = parts[0] + ' - ' + parts[1] + ' - ' + parts[5];\r\n const quantity = parts[2];\r\n\r\n if (row == '' || quantity == '') return;\r\n\r\n let newPartToAdd = {\r\n partReqPartDescription: partDesc,\r\n partReqQuantity: quantity % 1 == 0 ? Math.trunc(quantity) : quantity,\r\n qnIssued: '-'\r\n };\r\n\r\n setState((st) => {\r\n newPartToAdd.id = st.rows.length === 0 ? 1 : Math.max(...st.rows.map((c) => c.id)) + 1;\r\n return {\r\n ...st,\r\n rows: [...st.rows, newPartToAdd],\r\n part: '',\r\n quantity: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n });\r\n };\r\n\r\n reader.onerror = () => {\r\n console.log('Error reading .xfr File');\r\n };\r\n });\r\n };\r\n\r\n const makeEmptyPhotos = (name) => {\r\n let changedArray = [...state.rows];\r\n let objIndex = state.rows.findIndex((x) => x.partReqId === state.partId);\r\n changedArray[objIndex][name] = [];\r\n setState((st) => ({ ...st, rows: changedArray }));\r\n };\r\n const setPhotos = (name) => {\r\n setState((st) => ({ ...st, name }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n {!fromStep && (\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Technician App\r\n \r\n \r\n Part Requisitions\r\n \r\n \r\n )}\r\n
\r\n \r\n {state.technician.map((m) => (\r\n \r\n TechBtnClick(m.technicianJobID)}\r\n >\r\n {m.technician}\r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n {data.showInfo && setData((st) => ({ ...st, showInfo: false }))} />}\r\n {state.showImage && (\r\n onImagemodalClose(false)} fullWidth maxWidth=\"lg\">\r\n pullWorkflowAndUpdateState()}\r\n desc={state.desc}\r\n onClose={onImagemodalClose}\r\n onImageChange={setPhotos}\r\n rows={state.rows}\r\n />\r\n \r\n )}\r\n {state.imgPreview ? (\r\n setImgPreview(false)} fullWidth maxWidth=\"md\">\r\n \r\n
{state.sigDate}
\r\n
\r\n
\r\n
\r\n \r\n \r\n Reg. No: {state.headerRecords.registration} WIP No: {state.headerRecords.wipNumber}\r\n \r\n \r\n {/* {state.technicians.map((m) => (\r\n \r\n \r\n
\r\n ))} */}\r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n Sign\r\n \r\n \r\n Defect\r\n \r\n \r\n Serviceable\r\n \r\n \r\n Action\r\n \r\n \r\n Created By\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n {inputList.map((x, i) => {\r\n return (\r\n \r\n \r\n handleCheck(e, i)}\r\n value={x?.checkDefectCreatedUserSignature}\r\n name=\"checkDefectCreatedUserSignature\"\r\n />\r\n }\r\n />\r\n \r\n \r\n handleInputChange(e, i)}\r\n disabled={!state.flag}\r\n placeholder=\"Defect Description\"\r\n />\r\n {state.errors['defectDescription']}\r\n \r\n \r\n {' '}\r\n {state.defectReportedCategories && (\r\n handleBtn(e, i, 'defectReportedCategoryID')}\r\n options={state.defectReportedCategories}\r\n disabled={!state.flag}\r\n valuePropertyName=\"defectReportedCategoryID\"\r\n textPropertyName=\"defectReportedCategoryDescription\"\r\n />\r\n )}\r\n \r\n \r\n {state.defectActionedCategories && (\r\n handleBtn(e, i, 'defectActionedCategoryID')}\r\n options={state.defectActionedCategories}\r\n valuePropertyName=\"defectActionedCategoryID\"\r\n textPropertyName=\"defectActionedCategoryDescription\"\r\n />\r\n )}\r\n \r\n {/* */}\r\n \r\n \r\n \r\n {x.createdUser}\r\n \r\n \r\n \r\n {\r\n showModal(x.defectCreatedUserSignature);\r\n }}\r\n style={{ cursor: 'pointer', marginTop: 10 }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.flag && isTechnician && (\r\n \r\n {inputList.length !== 1 && (\r\n
\r\n handleRemoveClick(i)}\r\n // className=\"rightButton\"\r\n style={{\r\n margin: '-16px 0px -17px 0px',\r\n padding: 1\r\n }}\r\n >\r\n \r\n \r\n \r\n )}\r\n {inputList.length - 1 === i && (\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n Technician Signature \r\n {(state.defectDateCreated || state.createdUser) && (\r\n ( {`${state.createdUser || ' '} ${state.defectDateCreated}`} )\r\n )}\r\n {!state.imgtechniciansign && (\r\n \r\n )}\r\n \r\n {!state.imgtechniciansign && (\r\n \r\n )}\r\n \r\n {state.imgtechniciansign ? (\r\n \r\n ) : (\r\n <>\r\n {\r\n GetTechnicianSign();\r\n }}\r\n canvasProps={{\r\n className: 'signatureCanvas'\r\n }}\r\n />\r\n {state.errors.sign}\r\n \r\n )}\r\n {/* {state.errors['techniciansign']} */}\r\n \r\n {state.flag && isTechnician && (\r\n <>\r\n \r\n handleSubmit('save')}>\r\n Save\r\n \r\n \r\n \r\n handleSubmit('submit')}>\r\n Sign-Off\r\n \r\n \r\n\r\n \r\n history.goBack()}>\r\n Cancel\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n {state.showSignature ? (\r\n
\r\n \r\n \r\n ) : null}\r\n
\r\n
\r\n \r\n \r\n Axel: {props.title}\r\n \r\n \r\n {props.logoValue ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
{props.logoValue &&
}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Reg No: {state.headerRecords?.registration} WIP No: {state.headerRecords?.wipNumber}\r\n \r\n \r\n \r\n Date\r\n \r\n \r\n \r\n {state.DatendSign['brakeReportDate']}\r\n \r\n \r\n {inputList.map((x, i) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Axle Position\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n NEARSIDE\r\n \r\n \r\n \r\n Brake Pad Wear\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Thickness\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Limit\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n Reason for renewal\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n {x.brakeReportItemNearSidePhoto ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n OFFSIDE\r\n \r\n \r\n \r\n Brake Pad Wear\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Thickness\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Limit\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n Reason for renewal \r\n {inputList.length !== 1 && state.showAdd && (\r\n handleRemoveClick(i)}\r\n toolTipTitle=\"Remove Row\"\r\n />\r\n )}\r\n {inputList.length - 1 === i && state.showAdd && (\r\n \r\n )}\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n {x.brakeReportItemOffSidePhoto ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {state.errors && i == 0 && {Object.values(state.errors)[0]}}\r\n \r\n \r\n ))}\r\n\r\n \r\n \r\n {'\\u{2800}'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Warranty / R&M and many other companies require brake pad measurements in MM, please be sure to put readings down.\r\n \r\n \r\n Also, the wear level & wear limit of the discs should always be filled in when replacing. This is always in MM.\r\n \r\n \r\n
\r\n \r\n {!isAuditor && \r\n \r\n \r\n {state.DatendSign['techniciansign']}\r\n \r\n }\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n {state.showLogo &&
}\r\n
\r\n
\r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n Registration Number: {state.headerRecordsInfo.registration}\r\n WIP No: {state.headerRecordsInfo.wipNumber}\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Date\r\n \r\n \r\n {state.errors['batteryTestDate']}\r\n \r\n \r\n \r\n Odometer Reading\r\n \r\n \r\n {state.errors['batteryTestOdometerReading']}\r\n \r\n \r\n Odometer Reading Unit\r\n \r\n {state.odometerUnitsVM?.length > 0 &&\r\n state.odometerUnitsVM.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: false\r\n }))\r\n }\r\n >\r\n Primary Battery\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {!state.open ? (\r\n <>\r\n \r\n \r\n Battery Manufacturer\r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestManufacturerID}\r\n \r\n \r\n\r\n \r\n Barcode (Mode Designation)\r\n \r\n {/* {state.errors['batteryTestBarcode']} */}\r\n \r\n \r\n Capacity\r\n Ah\r\n }}\r\n />\r\n {state.errors['batteryTestCapacity']}\r\n \r\n\r\n \r\n Cold Test Current\r\n \r\n {state.errors['batteryTestColdTestCurrent']}\r\n \r\n\r\n \r\n MB Part Number\r\n \r\n {state.errors['batteryTestMBPartNumber']}\r\n \r\n \r\n \r\n \r\n Production Date (on negative terminal)\r\n \r\n \r\n \r\n {/* \r\n Weeks \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestProductionWeek}\r\n \r\n \r\n \r\n
\r\n Visual Inspection\r\n \r\n
\r\n \r\n \r\n \r\n External signs of leaks\r\n \r\n \r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestLeak}\r\n \r\n \r\n \r\n If yes, where is the leak:\r\n \r\n \r\n {state.primaryErrors.batteryTestLeakPosition}\r\n \r\n \r\n
\r\n
\r\n Midronics Test\r\n \r\n
\r\n \r\n \r\n \r\n Result\r\n \r\n \r\n\r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestMidtronicsTestResult}\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: true\r\n }))\r\n }\r\n >\r\n Secondary Battery\r\n \r\n */}\r\n \r\n \r\n
\r\n {/* \r\n Midronics Test\r\n */}\r\n \r\n \r\n Test Code\r\n \r\n {state.errors['batteryTestTestCode']}\r\n \r\n \r\n Damage Code\r\n \r\n {state.errors['batteryTestDamageCode']}\r\n \r\n \r\n
\r\n \r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {!isAuditor && \r\n \r\n }\r\n \r\n \r\n \r\n {!state.open ? (\r\n \r\n \r\n Receipt\r\n \r\n\r\n \r\n {state.list[0]?.batteryTestPrintoutImage && (\r\n \r\n \r\n clearImage(1)} />\r\n \r\n \r\n )}\r\n \r\n {state.list[0]?.batteryTestPrintoutImage ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n No Receipt Found
\r\n \r\n \r\n \r\n \r\n
\r\n No Receipt Found
\r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n {state.primaryErrors.batteryTestPrintoutImage}\r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\nexport default BatteryTest;\r\n","import { get, post } from './http-calls';\r\n\r\nexport const getTyreCheckByID = async (headerID, id) => {\r\n let res;\r\n if (id) {\r\n res = await get(`TyreConditions?HeaderRecordID=${headerID}&TyreConditionID=${id}`, { useAuthToken: true });\r\n } else {\r\n res = await get(`TyreConditions?HeaderRecordID=${headerID}`, { useAuthToken: true });\r\n }\r\n return res;\r\n};\r\n\r\nexport const postTyreCheck = async (data) => {\r\n let res = await post(`TyreConditions`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import { createContext, useCallback, useEffect, useState, useRef, useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, Typography, FormControlLabel, Radio, RadioGroup } from '@material-ui/core';\r\nimport { getTyreCheckByID, postTyreCheck } from '../../../../Core/Service/tyreCheckService';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nimport moment from 'moment';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\n\r\nexport const TyreChecksContaxt = createContext();\r\n\r\nexport const TyreCheckProvider = (props) => {\r\n const { hideModal, showToast, hideTopNavAndMenu, userRoles } = useContext(AppContext);\r\n const urlParams = new URLSearchParams(props.location.search.toLowerCase());\r\n const navigateToDashboard = urlParams.get('navigate') === 'true';\r\n const fromStep = urlParams.get('fromstep') === 'true';\r\n const [inputList, setInputList] = useState([{ tyreConditionDefectDescription: '' }]);\r\n const [state, setState] = useState({\r\n editTyreAxlesVM: [],\r\n tyreAxlesVM: [],\r\n remainingAxle: [],\r\n tyreConditionHeaderRecordID: props.match.params.jobId || null,\r\n tyreConditionID: null,\r\n errors: {}\r\n });\r\n\r\n const signCanvas = useRef({});\r\n\r\n const GetTechnicianSign = () => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n techniciansign: signCanvas.current.toDataURL()\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getTyreCheckByID(state.tyreConditionHeaderRecordID, state.tyreConditionID);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n let defectsData = res.data.tyreConditionDefects;\r\n // let getAxle = [];\r\n // if (res.data.tyreAxles) {\r\n // let IsAxel1 = res.data.tyreAxles.find((x) => x.axleNumber === 1);\r\n // let IsAxel2 = res.data.tyreAxles.find((x) => x.axleNumber === 2);\r\n // let IsAxel3 = res.data.tyreAxles.find((x) => x.axleNumber === 3);\r\n // let IsAxel4 = res.data.tyreAxles.find((x) => x.axleNumber === 4);\r\n // if (!IsAxel1) {\r\n // IsAxel1 = { axleNumber: 1 };\r\n // }\r\n // if (!IsAxel2) {\r\n // IsAxel2 = { axleNumber: 2 };\r\n // }\r\n // if (!IsAxel3) {\r\n // IsAxel3 = { axleNumber: 3 };\r\n // }\r\n // if (!IsAxel4) {\r\n // IsAxel4 = { axleNumber: 4 };\r\n // }\r\n // getAxle = [IsAxel1, IsAxel2, IsAxel3, IsAxel4];\r\n // }\r\n\r\n // let remainingAxle = [...getAxle];\r\n // remainingAxle.shift();\r\n\r\n if (data.tyreConditionID) {\r\n setState((st) => ({\r\n ...st,\r\n registration: data.registration,\r\n wipNumber: data.wipNumber,\r\n customerName: data.customerName,\r\n tyreConditionID: data.tyreConditionID,\r\n tyreConditionHeaderRecordID: data.tyreConditionHeaderRecordID,\r\n tyreConditionFrontTyreSize: data.tyreConditionFrontTyreSize,\r\n tyreConditionRearTyreSize: data.tyreConditionRearTyreSize,\r\n tyreConditionDateOfTachoGraph: formatters.DateFormatter(data?.tyreConditionDateOfTachoGraph),\r\n tyreConditionWindscreenCondition: data.tyreConditionWindscreenCondition,\r\n tyreConditionWindscreenConditionDescription: data.tyreConditionWindscreenConditionDescription,\r\n techniciansign: data.tyreConditionTechnicianSignature,\r\n imgtechniciansign: data.tyreConditionTechnicianSignature,\r\n tyreAxlesVM: [...res.data.tyreAxles]\r\n }));\r\n\r\n setInputList(!defectsData.length ? [{ tyreConditionDefectDescription: '' }] : defectsData);\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n registration: data.registration,\r\n wipNumber: data.wipNumber,\r\n customerName: data.customerName\r\n }));\r\n }\r\n }\r\n }, [state.tyreConditionID]);\r\n\r\n const clear = () => {\r\n if (state.imgtechniciansign) {\r\n setState((st) => ({\r\n ...st,\r\n imgtechniciansign: null,\r\n techniciansign: null\r\n }));\r\n } else {\r\n signCanvas.current.clear();\r\n }\r\n };\r\n\r\n const useDefaultSig = () => {\r\n let userSign = AppStorage.getSignature();\r\n if (userSign) {\r\n signCanvas.current.fromDataURL(AppStorage.getSignature());\r\n setState((st) => ({ ...st, techniciansign: AppStorage.getSignature() }));\r\n } else {\r\n showToast('User signature not found');\r\n }\r\n };\r\n\r\n const handleInputChange = (e, index) => {\r\n const { name, value } = e.target;\r\n const list = [...inputList];\r\n list[index][name] = value;\r\n setInputList(list);\r\n };\r\n\r\n const handleAddClick = () => {\r\n setInputList([...inputList, { tyreConditionDefectDescription: '' }]);\r\n };\r\n const handleRemoveClick = (index) => {\r\n const list = [...inputList];\r\n list.splice(index, 1);\r\n setInputList(list);\r\n };\r\n\r\n const YesNoRadio = (props) => {\r\n return (\r\n \r\n \r\n } label=\"Yes\" />\r\n } label=\"No\" />\r\n \r\n
\r\n );\r\n };\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value, type } = e.target;\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n setState((st) => ({ ...st, [name]: true }));\r\n } else if (value === 'false' && type.toLowerCase() === 'radio') {\r\n setState((st) => ({ ...st, [name]: false }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n }, []);\r\n\r\n const handleInputs = (axelNo) => (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let ax = st.tyreAxlesVM.find((a) => a.axleNumber === axelNo);\r\n if (!ax) {\r\n ax = { axleNumber: axelNo };\r\n st.tyreAxlesVM.push(ax);\r\n }\r\n ax[name] = value;\r\n\r\n return { ...st, tyreAxlesVM: [...st.tyreAxlesVM] };\r\n });\r\n };\r\n\r\n const Validations = () => {\r\n let fromValid = true;\r\n let errors = {};\r\n if (!state.tyreConditionWindscreenCondition) {\r\n if (!state.tyreConditionWindscreenConditionDescription) {\r\n errors.message = 'Description is required';\r\n fromValid = false;\r\n }\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return fromValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let finalAxle = state.tyreAxlesVM.map((ax) => ({\r\n axleNumber: +ax.axleNumber || null,\r\n nsBrakeLineRemaining: +ax.nsBrakeLineRemaining || null,\r\n osBrakeLineRemaining: +ax.osBrakeLineRemaining || null,\r\n nsTreadDepth: +ax.nsTreadDepth || null,\r\n osTreadDepth: +ax.osTreadDepth || null,\r\n nsFrontTreadDepth: +ax.nsFrontTreadDepth || null,\r\n osFrontTreadDepth: +ax.osFrontTreadDepth || null,\r\n nsTyrePressure: +ax.nsTyrePressure || null,\r\n osTyrePressure: +ax.osTyrePressure || null,\r\n nsFrontTyrePressure: +ax.nsFrontTyrePressure || null,\r\n osFrontTyrePressure: +ax.osFrontTyrePressure || null,\r\n nsBrakeTemperatureAxle: +ax.nsBrakeTemperatureAxle || null,\r\n osBrakeTemperatureAxle: +ax.osBrakeTemperatureAxle || null\r\n }));\r\n\r\n if (Validations()) {\r\n let data = {\r\n tyreConditionID: state.tyreConditionID || null,\r\n tyreConditionHeaderRecordID: state.tyreConditionHeaderRecordID || null,\r\n tyreConditionFrontTyreSize: state.tyreConditionFrontTyreSize || null,\r\n tyreConditionRearTyreSize: state.tyreConditionRearTyreSize || null,\r\n tyreConditionDateOfTachoGraph: state.tyreConditionDateOfTachoGraph || null,\r\n tyreConditionWindscreenCondition: state.tyreConditionWindscreenCondition,\r\n tyreConditionWindscreenConditionDescription: state.tyreConditionWindscreenConditionDescription || null,\r\n tyreConditionTechnicianSignature: state.techniciansign || null,\r\n tyreAxlesVM: finalAxle,\r\n tyreConditionDefectsVM: inputList\r\n };\r\n\r\n let res = await postTyreCheck(data);\r\n if (res.success) {\r\n showToast(res.message);\r\n if (fromStep) {\r\n setTimeout(() => {\r\n window.top.postMessage({ type: navigateToDashboard ? 'navigate-dashboard' : 'close-modal' }, '*');\r\n }, 1000);\r\n }\r\n }\r\n if (res.errors) { \r\n for (const [key, value] of Object.entries(res?.errors)) {\r\n showToast(`${key}: ${value}`);\r\n }\r\n } else {\r\n showToast(res.message);\r\n }\r\n }\r\n };\r\n return (\r\n \r\n {props.children}\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport singleAxel from './VehicleDiagrams/images1.png';\r\nimport doubleAxelOne from './VehicleDiagrams/axImage01.png';\r\nimport doubleAxelTwo from './VehicleDiagrams/azImage02.png';\r\nimport doubleAxelThree from './VehicleDiagrams/axImage03.png';\r\nimport { TextBox, SecondaryButton, CustomButton, AppButtonGroup } from '../../../../Core/FormInput';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel } from '@material-ui/core';\r\n\r\nconst style = {\r\n axOS: {\r\n marginTop: '45px'\r\n },\r\n axOS2: {\r\n marginTop: '152px'\r\n },\r\n ax2OS: {\r\n marginTop: '-18px'\r\n },\r\n ax2OS2: {\r\n marginTop: '0px'\r\n },\r\n ax2NS: { marginTop: '135px' },\r\n ax2Break: { marginBottom: '5px' },\r\n axBreakHeading: { textAlign: 'center' }\r\n};\r\n\r\nexport const SingleAxle = (props) => {\r\n const { state, axNO } = props;\r\n const axle1 = state.tyreAxlesVM?.find((st) => st.axleNumber === axNO);\r\n return (\r\n \r\n \r\n AXLE 1
\r\n \r\n \r\n \r\n \r\n \r\n Depth*\r\n \r\n\r\n \r\n \r\n Depth*\r\n \r\n\r\n \r\n \r\n \r\n Brakelining*\r\n \r\n \r\n Brakelining*\r\n \r\n \r\n \r\n \r\n Pressure*\r\n \r\n \r\n \r\n Pressure*\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const CustomAxle = (props) => {\r\n const { state, axNO } = props;\r\n let ax = state.tyreAxlesVM?.find((m) => m.axleNumber === axNO);\r\n return (\r\n \r\n {props.axleTitle}
\r\n \r\n \r\n \r\n \r\n Depth*\r\n \r\n \r\n \r\n {/* Depth* */}\r\n \r\n \r\n \r\n Depth*\r\n \r\n \r\n \r\n {/* Depth* */}\r\n \r\n \r\n \r\n \r\n 
\r\n \r\n Brakelining*\r\n \r\n \r\n 
\r\n \r\n Brakelining*\r\n \r\n \r\n 
\r\n \r\n \r\n \r\n Pressure*\r\n \r\n \r\n \r\n {/* Pressure* */}\r\n \r\n \r\n \r\n Pressure*\r\n \r\n \r\n \r\n {/* Pressure* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\n// export const EditAxle = (props) => {\r\n// const { state } = props;\r\n// return (\r\n// \r\n// AXLE{state.axleNumber}
\r\n// \r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Brakelining*\r\n// \r\n// \r\n// \r\n// \r\n// Brakelining*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// {/* */}\r\n// \r\n// );\r\n// };\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAAFMCAYAAADyaO89AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABL/SURBVHhe7Z09kBTV14fv7rog6mKtYIELVkG0lAEmEGECkSSQkUAGAURigolQ/xITIYEIAiGCBCJI0AQSjCABEijLAotyqZVlsQTkS+TlufRZ7vY7Hz1npmfY6d9T1TXdPf1573PPPf2xswMvXxEynj17Fm7fvh0ePXqUzRHiDe+//35YunRp/IQZeaampsLk5GR48eJF/EKIeixevDiMjY29lgdpGIQoyujoaBiYnp5+SVclRKsMKuIIL4MkyUJ4GMw+hWgZySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcDFy5cmXmfZ5ucv369XDjxo1sKsRH/MuWLYuf7fDgwYNw4MCBMDExEQ4dOhRGRkayb97Ad5cuXcqmOrfvqtFVeai0EydOhLNnz8ZKrsX4+HjYunVr2Lx5czanNc6cORP27dsXNm3aFPbv35/NfQ2yItbly5ezObNBnjVr1oRdu3ZJpAJ0rds6efJk2LJlS/ysJw5QwVT+xo0bo2ytcvTo0fiJPCnnz58P27dvrysOsD/ERsB+gOjKOZd1Pl2RhwqlxZs0tO49e/aEU6dOhXPnzsXPY8eOxQq3Fk9FIlvatTUDMViPbaxduzab+3pbBw8ejPunGyOyXLx4MbyKunFg/3Rx/RZtKA8rkzIoXR7EOXLkSByn4qgkRKFroouiwvhEKLoZkwiobFpO0ZO3FoYcKXSVtg2k3blz56xciP2vX78+HkM/UZY0RqnycPAmDiAGldQIZEKiVKC9e/fG8UawL7ocyEtg0Qth8t1ZPzOn5UnFobXTwotChLDoQOhNr45qYd+nXZ9h3WUabWpBks76q1atyuZ0BvbP1SXHaMfSDcqWp7SrLQrpiy++iONUJrlNq6RdHpWav3pKsQT7xx9/nJXvwO7du8OFCxfiOMfRrdyGbpRomE/S2T+NKX9FWSuhr3W8+YuJtHyZz375tEhMo00bLuPbtm3LpvyUFnnSSOHNJdIuxiq/FpYUUoh5cSCNJFRQsyjWLjQchOWq0WTg2EwCjrXWFeWGDRuyscbkZUrh3Gh0Jg7QbTNtQ6OybIXS5EmvklrprlIoJOtqqJB6Ib9eomyQnKcVt2PHjplL2LTyOgVXllZB7JsrOyIDA+N2nOwbyQyW5eqvWV5I7sh2apUrAvI9g0EjtHkMpASdoDR50krxygNpK6tV0cyzVlYvwiEghZZui4hgrb+T90LYrh0PlZbmbsA4XRaiAI2Mq8GUZrkZsEyt5ZhHOaRlwXnbPIZ26iOl1IS5E6QF9Pfff2djb2iUKKfwHS2fvClfeKlI7UaiVMJ6kRD4zs6tU91It+mKPA8fPszG2oPnT3nq3VGuB8vZzUmiQtpCEYco1M4VkeU4CNpIZosQwDrt7LNXlCZPmqT+8ccf2VjrpLlTPkxT6FQ4lVQrUW4E69B1WB5gFc328t1IK1jkyh9rLVK52o14vaA0edKuIRWgFShQa5FsL18hzRLlohABEMiwnKUdGkUdIz2fWl3y206p8ljh0Kd7wnIaAfJ5CmI1S5SB/ZIXNWvZVHZ+H+1Q5HzTZRYuXJiNzR1KkwdxLA+hkNK7zUWgstNEMh9d0iuaRq2cqMeleXpJXA+TPR/hWsGOpUi0TZcpEqneNkpNmLmLaRXBqxitdAc8z7JoUUsQ67KKJsrNIgH7sspspyItCqbbq0X6Peukws4VkUqVh0JIIwZCNItAFGp6mz6/DeDdHJbju6KJMss3gi7SBNtQ8E5vLdJHDo3OlYZk+8s/pkjlqXf/CfEayZnSrOF4GXpVMf/Lxkth9erVYWBgYEYGPik4KvPp06fxF8kYZz6X3YcPHw63bt2Ky1KI+Zt7YMtwqd0sT2HbFvHoBm/evBnmzZsXC5R9//LLL/Fdn59//jkuQxRo5w4sx8q2r127Fo+R/XPlaZGF7zj+48ePx2mO/9tvv43jBrckTp8+HX/mD0EWLVo0c/XK+qz7zTffhPnz58dl2DYCMp1CtOf7e/fuxQbBcjS8q1evduThb9deQ6Xi7N3iIlCJ3NDLi8P63MwD7tXkv8+DlESyIrDPeu89twrnSuUZbJMhPf9G+2NdtmHk16e7ZjrdByJyD8tIHywDyyMfn5Qdn+1QeuQxVq5cGXMgWhUnUEsiTubLL7+MLZ+uqtbJUVgIQeHlw30tkItWRrQBWmEeKpFjIwLkW6+XdevWzTpXIgDjwP44P86z3v6I2KxP5GE9W5/zYd2vvvoqzvvpp5+yNV6fG98ZyER0te6N5ZnHMmy/XXr21xNWqFagFEqzKAL2CKFI1KmH7Rc5bSgbayye/ZlARcsoj5U1+/WWWS16Jo8HCoGCpPV0o8JFY+aUPOLtotRLddHfSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYSbweHh4WxUiNYYXLFiRTYqRGsMLliwICxfvjybFKIYS5YsefNvIh8/fhxfXnr+/Hn8UohaDA4Oxv8zyr+KnPUPamF6ejr+y0hJJFKQ5uOPP47SDA0NxXn/Tx6DF4dsqBp//vlnofOmED/55JNsqj/hHElt7GW6lLryVJnffvut0L8Hp0A78S7wXEX3eYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kqcHLly/Df//9F54/fx6HZ8+excGm+Y5lqo7kSfj333/DxMREePDgQRxHkFQSm+Y7JHr69GkcqsrAq8JQE3oFwty8eTNGmFYZGxuLQ9WQPK+YnJwMt2/fzqZ8LFmyJHz66afZVDWovDx0UwydYPHixWHFihXZVP9T6Zzn/v37HRMHpqam2o5gc4nKykOiW0ZF0wX+9ddf2VR/U1l57ty540qOi0Di/eLFi2yqf6mkPHQvDGWBOJ3sDt9WKilPNyqW7qvf7wFVTh7u55TVXeW5d+9eNtafVE6eblYo0aefc59KyUNFlpnr5GF///zzTzbVf1RKHrqsbtNNWbtNpeTpxf2Xfr7nUyl5etGF0HX161WX5OkCjx8/zsb6i8rI08vEVZFnjtPLS+Z+veKqjDzdujFYJSqV8/SKfhVX8gg3kke4kTxdYN68edlYf1EZeXpZge+880421l9Ini6gyDPHmT9/fhgaGsqmust7772XjfUXlcp5elWJkqcPGBkZyca6x4IFC3oW8cpG8pTMwoULs7H+o3LydDsKLFq0KBvrPyolD/A35d2Cq6x+zXdA8pRIv/9yRuXkodvqRldC1OGHD/qZyskDRISyc58q/F5PJeXhhmGZlUti3u9RByopD5D7lHHpTndVld/oqaw8QCV3+rkTvw5GZKsClZaHSh4fH++YQMg4OjqaTfU/+k3CV/DXDTdu3HC/LkryTcSpQp6TInky+OsKfnqFHydoBfImIk5VuqoUyZODKPTrr7+GJ0+eZHNqMzAwEB96fvbZZ9mc6lHpnKcWRBCkGB4ejm8A0iUNDg7ODMzjOwamq4zkqQORBTmQB2FsYB7fCckj2kDyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7gZePmKbDw8evQoPH78ODx8+DC8ePEim1s9njx5Uuj8h4aGwrvvvptN9R+c3wcffBAWLlwY5s2bl819Q5Tn2bNn4fbt21EeIWoxOjoalixZMkuigbt3776cnJysdKQRxSASLV++PHz44YdxenBiYkLiiELgye+//x6mp6fjtBJm0TJ37twJpDqSR7QMEYgcWfIIF1xcSR7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIINwNXrlyZeRmsE5w/fz48ePAgmwph1apVYXx8PJuqD0/3L126lE3NZtmyZWHNmjXZVH3YxpYtW8LIyEg4d+5cNvcNHNeZM2fCjRs3sjkhjI2NxePjOBkXxem4PNu3bw+XL1/Opl5z6tSppgJRqfv27cumZrNp06awf//+bKo+tm+WZZ2UI0eOhJMnT84SOw+C7tmzp5DsooRua9u2bbHi0la8e/fuhpUGa9euDVu3bp0VYahE5rHNZhB1TNp8lDpw4EA4evTozDGwXZZhIEoZrH/9+vVsam7DOX/++eexUZZFx+VZv359bPlpBVKxCNQIZKPVHzt2LJvzeltFIwGRBfLiUnhEHGA7dGdEQvbDcPHixTiv37osyrxsupYw06qtgsvAok4+Sp09ezZ+EmEOHTpUUxLmpRGoH+gLeagUqzC6jnpJcTsQXSgsIks+SllyzPxG0UWRp3W6Ik+a7H799dcdPzGLLrVyo2a5lsG63333Xcy9OoVd3Z04cSIOXInWO3dyLRpWOtQiv0x65Wiw36Ln3Q4dv9oy9u7dGyuVFk1OQdSxbosoQN5RDxI92LlzZ9i1a1ccrweVsXHjxigp+8l3P3xnFdat3Ib9cf7WleYhL+O80mNJjxOs3PJY2RjklpYnWn6HOLYtyiMtE8sjO0HXch5EsCSa1sLVQCcwISmUvDiwefPmbOz1pXyZVx/AuXGvycShoSALx2ey0Kg4llQWlkkvMurBcvmu2WDfDOl2TSQbOhmRuhZ5gAOnYO3kat2PgVYij7XYeveS8vsEjomKYt+d7KbYh0mByCToeSGIDNZwakVgu1dVL/IYdt5p5DFYn+0AXXHagDpJ1yIPWIEaFGJaqa3SKFE22CeFa60eWAexd+zYESuB6NXOcRjpdugaakUS7ltZgyBKkAfNVboqD1DJ1ucSFWgh3lDaKFFOsVaMRESbvEjkYxwHldkO1lWx/VoR1UAgw+5BzUW6Lg9QeFa4VJ7n/g/rUVlEFvKJIhAJ6CpTkQy2147IrGdRp14UNDhmW6ZdYXtJT+QBoo9FAFofl7Kt0CxRbkYqkh0HArR6HEYqQTN5IN3nXKVn8lguYhVP19FKK7Quoshzr0ZQiWnC2YtIMFcF6pk8QMWl+U+RB6hQJFEGRCBCmWj14DjajQS2Plj31Yh0P57I+TbQU3mAvMMSSAqdS/xmFE2UuWtLRCtyb8cq01uRyGPrFpHHIlyRLu5tpefyANHHCvHChQvxsx5UTKuJcrPKTF9g27BhQ/z0YOfA8TXaJ9/b/vKX8xbBWN8bBbvFWyEPcP+nSKv3JMqNKoLvDh48GMfZXq17M0VJb2jWu4POcaTRNR89eaPRqBcxm90fS8ulTAGHXp3w/7LxjsDBXr16NUYQO8EVK1aEp0+fhsWLF8fpWnDCq1evnumSgIrM3wGmotkHV0qNtgd0DRwHyx8/fnwmIjAwn6u8w4cPh3v37sXlybnWrVsXxz0QNQYGBuJ+bt26Fc/FKpLfsyHCff/99/E74A56PtKtXLkynD59Oi5/7dq1+DNuDLY+b1ty7GyXeUDE43cD58+fH6f55HyBffG9NZKpqalYzp2gK6+hGvUeIaSkD1DzjydoiRQe22j0YNWgkJu9hAZUBPtJb961Q3oOtWi2P6Srl/uxLt08T9TThpYvE6JTrRuQCN7osUcrdDzy0Noxn4PMD7TqZtGCaEOkYBtEnVQ2Wg4tCCGaSQi0Yp7rWFdg+2b7HA/b4Psffvihre4qD9uy50kWDaj0ovtjOSLSzZs347ESYTheujjWJXLwi7V2HgycaxrFKGuioK3PubM+EduOqV1KezDaaZCG51AUenpfRvSOOSOPePt4a662xNxD8gg3kke4kTzCjeQRbiSPcCN5hBvJI9xIHuFieHhY8ggf/OM2ySNaBnE++uijMNjsKbcQKfiCPBD/x+jdu3fjS0LPnz+PM4XIMzg4GJYuXTrrlZqZ/27MOx+8I3L//n39o1oRQZgFCxbEtxTppvgfo28I4f8ASDBINVxhzpAAAAAASUVORK5CYIJDuOCuiXTflQlEgNf1Rf65lgnjP96oBJmQm0juoX3WnVgX0dCfi3lBBXJ52YEP9pvX8cqoCQSe/mlbMiK80v5S3k1JpuQ5E2hOkC8hKkEmtw+ICOnuxeWCk+8qj5jpaGxM7G+PTnTHM6MqEMK5N9Rv1/lIPs1IupHnfIBMyEtcNEJPySXZhYIkNxuTbdLbq5Pd8cyoCgRMNFi/3pRx4bbl2NXMJXkG+M5sQkBkr4TSXCgfanO4RTOWGXWBwKrVa5IX0IyV5NCM5JI8A/SykCDn0zxCqEJArwd0n8ieR7nPeJP68ciYEAg8rKOQO5kYA3L3r1KRb/IMsuUa3vtHiIqF4CJht06mMw1NYFvu/ebZqbfV2zs+mrYxIxBq/fO6+XK9k0wUkjxnasa6TpwYNuBZKN5mcPfOi116Pxipdtyjo68XN4aDSJxOQrev2UCnIGhKJlAuBwMZ7rMPhGWikOQZTV7iftMHprcEodCsYewG40AA8koG2xCB3D4hiuK7vfmU6+U5AbAtfwVw6+OzGB/zro/9fXLjxmFd/1Tn1X1nrEfnf3Z9rOua/WIS2COtuL3gb4bwTM99D/ylznlW2yWpQZfejQshInifRMSJwAVH8vyaZ+AuHU/qz+ImZDYgz3M6AhbafDnMhdei4sE2h8uNvOcD41AYSkiFf5+962M/N+ueq5MeQBgMkromFJUEI+0OrO+27X9Ss1ACfSLx1MmT5k60HzwRWFdfl/XeFu4PfXzwoHmK0X9PCLUaOQZyJu9AYDpwUnHCBvS2cYcb95m84ILgCcUNmzapWbNm2aWFg3tvf3Lb7Safw/0oXDi8YsK25lw311SIO1eutGuMpLW11Ry7y8vc+sj3nv2HfzSSd3Z06mWJ6IP3cB8Nt0+Au8fnngZ12/7BvX+R9dznirsXFkgECgqEY9zlRvRBtCikJuFk4hkhTLgBWYzamA2Xf+W7Lewr8jPkh406N8rlqUw/aA2COM5AH6oPCjOmoyVqnj27oJNJiocTaMz0wnIBtQhNEuUZO4wrgcjYgwIRERSIiKBARAQFIgWBnz4AFIgUxJQpU8wrBSIF8Qf1iZ+5qphoQxEhuYKffcJAIqj4/pXF/9soUt603HC9LWmBrm5uStpESDb8vpgc6KYb5yeTIkLSAXlmNzXZuQTDfvISP/2EH58jxAvy5OuuvUbNmD7dLrnIiB/dxW8g4Od8Tp35vfrq66+TP+tDwgWkmapbpUjD98xzP+k6WyMEIiQfOA5EBCj1/3XS1DEJssPQAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAB3CAYAAAA+V8PaAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMTowNzoxOSAyMTozMToxMInKaXsAAA0fSURBVHhe7Z0/jA1fFMdnn1iR9SeWtWKziVDQoKERDRUNFQ0aGrpV7EZDfkFFQ0WxOho0NFQ0S0OzNET8D4mEyLJikY2fz905m/Nm59+d9968ffvOJ5mYN//u3Hu+99xzZ8aejr//CCJMTEwEY2Njwc+fP91itB/z5s0LOjs7g6VLlwZdXV1uXagSze/fv4OPHz8G3759C7cYxhS9vb1ugWnR4FHevn3rhGMYceBt1q5dOyUahPLixYtgcnIy3G0Y8SCcCiuvXr0ywRi5wMFUvn79akOS4UXl06dP4aph5KNiXsbwxcU0huGDicbwxkRjeGOiMbwx0RjemGgMb0w0hjdzUjTfv38Pnj17Fjx//jzcYtSTjtHR0Rnf0zQajHrr1q3g8ePHVYZdvXp1sH79+mDHjh3B1q1bw63+DAwMBPfv3w/OnDkT7NmzJ9w6BWVfvXrVlc1nIEC5ixcvni6X30YypYoGg126dCm4du1auCUZDHflyhVvAyKE3bt3u/Pu3LkTbp2Ccimf+0jj6NGjwbFjx8JfrQl1vHfvXtDX1xds2bIl3Fof5v1rnP/C9YaCMQ8dOhQ8fPgw3DIlDHo33oX1FStWTPd+Ki3i8vE6586dc96L6+7cuTPcGjjPdvbsWfdyFq+ya9cudwwNSvkLFiyo8jz63FbkwYMHwYkTJ9x6vetSiqfBGEeOHJk2CoaiJ8f1AI7BG9y+fTvcEgSDg4PBwYMHw1/p4GW4Bl5GeynZzrYkD0a5ly9fdkMaQ1srQ4ejAzWiLqUEwlowuH6MluQyMSaV1BU9f/58rqAWb0I5XFuLQscviDVOMLBkyZJwrfX58OFDuFZ/Gi4aMSQwHOSNFeghQ0ND4a+pYScL8U579+51/wq6ARmKkkgSUysibd4IGj487d+/f9pLRIeMPMiwAsPDw4nxDcckBcAI99SpU279woULTrxlIDM16i/Bt8zSosJmf7RjROMyILhlZqihc3FdoB34jwHHjx9361zjwIEDbh/gTdM6Th4aKhoxJDBkMCz5QoxBrAFps5qTJ086TxN3DMMTQyQgqiKzMl8kpkgieh+6rYS4ukjcpZHOqOuZRFE7aBo6PPGATUiKYbLQ5yXFNfRS6X3RHgxcQ66DcfB+iIz1RoBRRTCUe/r0aWcoFgJ6DCz3IXUSEWUN39QPbxnXnngQvApDu3gerstvWeLO86WhotFGlh7liz4vSTS4bISDK04qh8Ba9nEsXomejeEYQuolIHq7eEbuByFgaBEuM0G2YdTokMR+DJsGdeC6ccbnmgxV1FVEw3EysWDJG1OmUdprhHqIJgl5nhPnZQSug7GiRkGIzM4QUD28jwgGdCCv4V7kEQIie/TokVtvFUoTzfj4eLhWHOk9GozOIj0wDY6ht42MjLh/EZC+Jt6HmAAPUBREAPTwNMFr8UYD29lOQ0Wjn3sUfW6gh6Q40TC0QJZb13AdjtcCEgPjaeSavmgvFTd8aLSg6jU0lkVDRaOndknxSBZpz1iyAuC8ICCJM0CGO198jS/CqcWzNYOGi0YMgXGLNI523dFnNHkC4LxwvgxvRY0Y5wnTaDWxCA0VjQwDQAPxkM0Heq485dVGFfIEwECQu3nz5kxP4Gv0KD5DDu0hoqm13LJpeCDMLEEahecXeV04DaofVEWnij4BsJAVV8kQWvSJKfUU4WQFt3rGtFM99dUCmq2eqOGioRHF4CKErCkmwuI4ERhGjAa6RQLgtBkcXktmPkVFA+L1qCvDZxJM8wGR6KCZ3yKctDiwaIxYD0r5nmbTpk1BR0eHMwqNyZBDpX/9+uX2840L2xHTjRs33HcvIhhEx7MP3QPZR6NzHjMfvS8OBMH1nzx54n5TLjM7zn/9+rUr8+LFi24f5eW5ZhII7u7du648vh1avnx5sGHDhnDvlJgoS74rOnz48Iz3S58/fw6ePn063QY6lqONeK8kAgftzQWpMwtC5nshzqXj8N1SLZT65R4VQQBUJA8MO3EGlBeQ7OeRehbENGKANCiHWVQtngYoS3tKrss1qTfbpP5J79KSzuc3C785V3sr9tMWrIN+Z8c2Fs6lU1y/fn36uCKUKhrgxqkMPUUaRSMNQGMmPesQEeR9Y018wVCBd4tz65TJMCfvheoBwqCT6E9DBOqVVj/gHC0cgXOkI23fvj3cOoX+ioDyeUUhEwngHMrVb72LULpoNBiQyhGgMlxQYZa0XoDYaEyOi34CkYdobxeRNhLKY6GsrPpFkTYC7lOfy3bZByIYjS67XvVsqmiKQCPy9pw4wKfxjfrRcqIxmk/Dp9zG3MNEY3hjojG8MdEY3phoDG9MNIY3JhrDmwopWgzDh0qtbzyN9sOJZv78+eFPw8jGDU9r1qxxmcQMIwscTFWSsDdv3gR//vxxOw0jCoJZt27dzHSEZGUhnY9hCJVKJejp6XFf/DEiVYlGQDx8coj3Yb1dyOtlacR2GM4XLlzokp52d3dX1TdWNO2KfEOcRX9/f7Bs2bLwV/thD/cMb0w0hjcmGsMbE43hjYnG8MZEY3hjojG8MdEY3phoDG9MNIY3ia8Rfvz4EYyNjbl3T7yDagfyvnviPQzvn+Y6nZ2dblm0aFHVa5MZokEg/IdxRGMYAuLp7e114qkSDZ9EIJjJyclwi2FUw+cR06IhcwcfYRlGFm5gJm55//6922AYWTjR8LWeDUlGXip4Gfu80/ChYrMkw5dKuzyDMepHxWIZwxd7jWB4Y6IxvDHRGN6YaAxvTDSGNx3v3r3726yHe/yJdslZoP9cO3+OnSUp238eePHKn8Pnuvw5/OhfN2c7eQt0rgT+TDzlkjUl7k/G+8I9kIEXdJ7MVqcposFg5GuS9DJJ0MhkGymSn1IytZAoA4Np8mSDQTwk7KjF0AMDA9PJwkiEQYaXuUDpwxM5h8iiQmoZMRpeAOOwaI9AT8XwNH6agePg+iD5rwXJzi/XQxwIC6OyLuCBimb4jcP3/mczpXoahiISXAlJKWwQC9lW8AasAwbVGW3TkEwtnENuIwEhkPEfkjwJxuUYyh0eHq55iJyLw1NpnoYGlKRWwLCDCKKCARqX3s9+aWgMLkmvspAEq1Evo/NtJw099czswvWpg67HXKA00WivkZRRLYo0uhiSWCRP/ksSY3FONIGYlI9Q04w4lwzcCEoZnjAWcQxgEN/kXohA3DwGR0hJSBq+uACYYQePlXUP3C8LQ1gRz8O5UXHvjOSnkpzigt7PuZLHXMRfyzBZb0oRDR6C4BMwJAb1gcZDdNLIIyMjicaUVIXEMjqwBYQn6fmK3EdeZOamicZHcp/C4OCgEw73qJOaCqQQHBoaCn81l3n/AtP/JiYmwp+Ngeyw0kAMS75/u5hMr2S1lWcq27ZtC/r6+ty6ht578+ZNJ5a44Y+UhyIaejL3xDOZIt4kDe6Nr/dB6o1A9T1zL/Dlyxf3uS11pJ34vW/fPieqjRs3uvPpLGTPhdngcUqJabQbjvb+vOg4Q8QTRQQRDYAFhjbtXTge4zBsESTrnl8LiBDRpsVt3IfObouIuT+GTTwKnoXztcfMeq5VFqWKppYAU3omxDUcBqfhJQZIgmEJY0RFyMwOATE81Es8PiAMLSKB3zpBfDPuLUrpD/eKwv/yS0O8DIKJNnwUZm/0YAQUFZh4H7leWaTds/bOJH1tNqWKppZeos+N81hJz2aSwEgyRIyOjjoB6evqp8ZGNaWIRveUosLRcUxUNATAXJdydFk+ICDiCYl5EIwI0aimFNHoiL+oIWQaioeIziCyAmAf9LQ2KeBud0oRjZ6xFJkBIDQ5J+4pb54AGAHwPirrVURWPGSUJBqJHwDj532HBIhC3lhDdBor18oKgCkXb5UV4GbFTkaJgTBuX4wg37NkgQHxDmJIZj1RQ8qwVY+hCbSo4l6mGiWKBi+gn0PgPZja6qFHQCSISj5RADxV1MtwLvt9AmCOl/M03AMzJu25ZtP7ntlE6V/uYSztPQTExILxoiJKeu/CdfA0ed4jcRzHa6RM0PeDN6vlcwauhfiIoySY5lp4LnmwiHCJxVgEhMoS/VJR3zvn0kG4TtGZYq2U5mkEKi2PyrVREAqNrQUjb7TjBMOxNCZGTwuABRoYYYlIQMrUguEYHvzpe/OFt9QMc3r2RRlsk7ffeFotGOC3jt/i4Docx2OGZtGUb4Q1GJ7G5Y8qCRgs+ilBFHljjZHxND5QnoiFcnlFwRPnrDLzIteOA/FSBvWOg31RD4K4tQCBNqpF2LXQdNEUBfc+Pj4+w3sYjadlRWM0j9JjGqP1MdEY3phoDG9MNIY3JhrDGxON4U2lHZKSG/WlQpZ3w/Chor/yN4w8uOGpq6sr/GkY2bhAuL+/3yW+Mow8ONHwX0hXrlzpNhhGFtNT7p6eHpc5zDDSIJSZkY6Q/4z+8uXL3PkcjfaAnJ2rVq2qziwXhW9V+GSChBvtkj8hb0ehAdslBuSRDN6lu7s7rHMQ/A8C7fjjcQKGRQAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAABRCAYAAADvoiXxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dzLqhpBFIXh8o6CgigIguBM8f1fRkQcCIqgHEG8XxJXUwYjHjjb2NVx7/VBky4dZNB/qsqOdurXlaO/DIdDt16v/eh7+XzedbtdP7Ij7f8k+jFGQ2KMhsQYDYkxGhJjNCTGaEiM0ZAYoyExRkNijIbEGA2JMRoSYzQkxmhIjNGQGKN5At9Lu1wu7ng8RsfhcIiO2xjvWf7uGqO5czqd3GQycavVKjpHGPdx3MZ4D/Hs9/vosIZf9/QQymg0imYUqWazGR1WMJqr2WzmxuOxH72m0Wi4VqvlR7qZjwbLEY53qNfrrt1u+5Fepvc0X19fbwsG5vP5P89Yn8BsNNjAxnGBsdQtl0s/0slsNNPp9KVN709gQ30+n/1IH5PRYBnBERcE885l739jMpoQFxTLlNZ7OOaiwf2YuJalR4vFwp/pYi6akBcSs43GvY2paHAB49zLPMLft9ls/EgPU9FgaQotZKShmIomifsnGu/ZmIomiaUCS5S2T1GMJoDtduvPdDATTZIbUs40HyrJj77aPkGZiSbUDT0LTO1pkqItWEZDYoyGxBhNAHjesCZmoknywmWzWX+mA6MJgDPNhyoUCi6TyfhRWKVSyZ/pYGpPk9TFYzQfrFwu+7NwisViYjNcXBhNzCqVij/Tw1w0of/V12o1f6aHqWgAv7kOBZ+atO1ngNHESOuTJMxFg+UpxJKBWQYPBNDIXDSAGSDuvY3m59WYjAY3+uK8qNhwa51lwGQ0gL1NHB/BsSxpf0aN2WgAF/fd/y+Ep2FhJtPMdDS4uJ1O523hIMJqtepHevGZe1f4tUC/33/5a5nYVGOG0byPucdoPPxaAY8gwY/2JbAvwgyjfUm6x2geYNYZDAZut9v5V55LpVLRf0b2ej3/ih2m9zTPYMZADLlcLvrGHZaedDr958BreA8HxhYxmm9gJkEUiAah3A68hvcsYzQkxmhIjNGQGKMhMUZDYoyGxBgNiTEaEmM0JMZoSIzRkBijITFGQ2KMhsQYDYkxGhJjNCTGaEiM0ZAYoyEh534Dro8Yg7Uu3YAAAAAASUVORK5CYIJVNxErAAAAAElFTkSuQmCCgg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAB0CAYAAAC4w7F0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMTowNzoxOSAyMTozMToxMInKaXsAAAwxSURBVHhe7Z09jE1NGMfH3ayP+AqRSNiNr8JWNHQat6KhokFlC9vZYmmQN6uj0VHQ0VDR6GioaJaGgkiERLJIfETYyPv6zT3PvnPH+Zi55957zt19fsnJ3vM1M2fmP888M2f2zJJ//2Acfv/+bWZnZ823b9/M9+/fk6PKYmXlypVm/fr1Zt26dckRY9pE8+XLF/P27VsrHEVxWbp0qdm+fbv9Oy+aDx8+2E1RshgaGjIjIyMt0dAcvX//PjmlKNkgnMavX7/UwijB4Lo0EIz6MEoMDZxfRYmhoVZGiaWR/FWUYFQ0SjQqGiUaFY0SjYpGiUZFo0SjolGiUdEo0aholGiWzMzMtE3C6gVPnz417969S/aMGRsbMzt37kz2snn58qV58eJFstfO3r17zaZNm5K9bK5du2bu3r1rpqamTLPZTI7+z5MnT2w8vOVfvXq1PUbaSGNI+CFcvXrV5sGxY8dS0zBo9EU058+fN/fu3Uv2Wly/ft0WfB5kNoWexvT0tDl8+HCylw5COHjwoC38+/fvJ0dbIJTTp0/nTglBPGfOnDF79uxJjsSDYC9cuGB/I0rSIeIcVPrSPFG4hw4daqu5ZOTXr1+TvXS4j9rpFhq/OVYkOEB0QNwuCObkyZPzgqEQCZfNLVCuwxKVgWmzQtHzDgp9sTSCbzkopBs3biR72YjFgBALJXAP91K7XcHKcQRy5cqVNlEChYt1fPjwoTl16pSZmJhIzsQjYdE8EQ6CH3QqdYTJSLEG3YZmAWHs37+/TTAPHjyYtzBZTQ9i6lYTIsJ89OjRghAMVCIaMlIKEstTtglIQ3wo3++hyREQVBau0JR2KhENJpvaJ7V5cnJyvvZ3A8LCilHwecLI8zEQG852md4OlcHdXMEC6XTPu3lA2m7evGktMRvn60JlzRM9E/EVyCB6Mt0iywGGNWvWJL+MLZQsEBzCCRkaSAMBjI+Pt21+fKTTPX/p0iWbF/zdt2+fuXz5srXEbJw/evRoVytXp1Tq09DGSztPLSSzykKm48CC3zSBK6Rbt25ZJ7UXBYHocKLTfCYBK+b6XNKrI13cJ/njnie9VVOpaABrI5lCZvnjObHg6CIc3wEWaBJxgAXiozdFLcYSdFNAPFte75A00kyLkImbtHMPG+lko/cn19DsVt1UVS4aCpEMEv8Ga1Om4BAepFkZgdp78eLFNlFRi2kOEBC13fc/+gV5kWadpCmHqtImVC4aoPCk9lPTKDT+xkJmshFengMM1FxqMOLxr6U2Y3l6NRyQR5p1BF/gVVIL0QCFKP4NlqYT/0YcTddvKYJraSJmZmbsX9fx7dVwwKBTG9EA1kYKDV8jr3fjU+QAh4DFuX37dltT4I5gKy1qJRpwx28osFBTXOQAx0CvR8Tbi57VoFM70VDgCAcQAeM3If5NiAMM+EtsRZQV3kKmdqIBeg/SRFDTiwb+YhxgnFy2IgsiQlXx/E0tRQPuwFhRAXfiAOdBfAgLOh0RXsjUVjRAM1VU0yngrJeTechbcB96S9J84VsdP37c/lb+py/zaWg6KCRqrzi2NCNYEgpaHN80uJ4xE8GfTyMz4whPfKE8du/enfxqgShFmMTl+k+M4ZSxXlhAwhRRS/PJczebzcx8YUurAJJ2wiEMriOcflPZdE8hZFIVTq6M2/jXy4QqBEMmFiGTq/KcawoFwUjz2AmkibSlgRAJPy9f/Ilj4Aue9OW9pugVlUwsd0EAfuakQUHzLR33esKlKWGfTI6Bmk3BMnFdBLR582brw5QRi0CYDAOkQTzEkZcvWBDfAmOVXDi/YC1Nr0BIFAx+hzqs/WOgRaNUQ617T0o9UdEo0aholGhUNEo0KholGhWNEk2DpVkUJYbGxo0bk5+KEkZj1apVdiEoRQnF+jRbt241w8PD9oCi5MEKc/OLhLGED6vK6RKEShYbNmywL4f/WsPy06dPdv2nubm55Iiy2MF9wffFlYG/RCPwBacfP35Y8SyWlVo+f/6c/MqHTGQtx4UMK8jhsqxdu/avZ80UzWLk2bNnya98RkdH21aPXWzo4J4SjYpGiUZFo0SjolGiUdEo0aholGhUNEo0KholmtTBPUaAGR1lRJh3UouF0PduK1asMI3Gwq9vPCevDtzP6EKbaBDL7Oys3XSRd0XgNQLvnmQUfF40WJTXr18vKsuixME7N6bRWNGoYJRQli9f3hIN/wSvglFCaeDwqmCUGBpMuFKUGBpqZZRYdHBPiUZFo0SjolGiUdEo0aholGhUNEo0Kholmp5+3ZPv9LqLbIV+9zbkG7xF8J1gFuLgg9TumpUCcfBdXv6ykTY+K8u/nY6NjSVXKWn0VDTycWgXVo9LK0SXvK99h36lm3iJ3/+SOQJhmUFZ6icNhJMlNsWYoYmJiX+S312H2vvz50+zbNkyKwR4/vy5Pb5r1y67n4X8KyiFzKg19xw4cMBaqqIPTRMXi5hS+OfOnUuOtjhx4sT8CnSEuW3bNrvx++PHj/Y4cfJ7ISymwfred+7c6eqz9NSnoSCorawD4MKKcSKiNLiP9Z6wKCIQan7oAhdZi7m7K9Vh8fg0PssPEg9//1hdMzU1Zc8vBMhjKkC3qcQR5kFoPnrxQECzBP5KJrK2AEJEzIjTp2hxj0Eir2KWoe+iEcvBA3VjxX8fhEHYWCaaJ4Fjkomuj+OTJqRBJWuxjrL0XTQ0C9L7iV0RN4SQtSzzLBxCw3nuZjNFfIiZZpONnmGWFWBCHD1O2aQ5dSE89xq2tPCy4ihLXxbUIPHSG5qenrZNAM2TPBT+RJZzK70gWSMpDzKYBcUoeH8pHzIapxA4jx/jWqJewPNhTcXx9pEempsOWb9KSOstpvVKyVepKJK3bjg+aetJhVKJT0NiXQGErohbRN5aljQ7YuHITDLWXz+pm0gcIhjixsq6a3Nyjmtca0IHQM5nQQUjrKyKJnnpNrXkubuVoRLRABkTsyJuEWSUFFBW04RQJcOIk2UMqdms8IaJ7yZS2wFLwYZVkV4hNZ1ClWeXgkbwRVaQ+wiLLQ0sN+GL70ZY7LtbGeFUJhpwax0mV7rKnRCymDvH/QKh0PCtxsfHrYC6YX3EGQf3GV1IgxQ61/bS6nWbSkUD7oq4jKN0WuNDF3MnLmoa4qFW+wIS61OmuXR9mLz0IHBpQrL8njpSuWjINIQjmTc5OTlfS0PBJ2BDAHndaRdqP80VAsKcu34Q8ZdpLiX9+ByuKH14Zjmf1kuqK5WLBshc8W+o4bEFVnYxd+IXAYl4aS47tTZyn4SVhzizZSxbv6mFaIDeABtQ60IH/sjsIgc4FGq9iBdkZFlppzaiAQpMzDU+Staa1S4hDjBgjfzubRpuN1Y+ttwpIc2sXBNilepCrURDxuGgSgZibYrMNs4zFFkZxILlyJqnI7ii8j+xEYr0lhBEUfolPlesIHlQx2arVqIBrIV0RcmwPMuACCgY7gl1gIsKQfwjwvQLMhRXwHmvSehmS3p80YvVzLNWLG5fBbUTDeDQin+Th4xtxDjACC2tW0/hMcgnhdSpUw1YGrE2NLNpwicesZIIxI9P3raTrrTxK56B4YEQCMOtLO7vTuj5uydqGgUlziq1lwxtNpvzGZsFPog4o2Sq++qBTJf3WSEjnAjC9ZEw/2JJCMut0X5cnUB47qgwltCNj/yg8KRJ9q0a53iPlnY/ecJGOuWZOMc1WCzJCwQrHQoRJvchYrenGEtPZ+6RwLNnz5o3b94kR4xhRhyz9wDh5EFtk8wlU9zr8U04R0YdOXIkOZoNC4SQWVLLmA1IgbDJMTKRgs4ano+BsEgvYRMveSCFzT7xU2mwIswc9GG2I8//+PFjG4Z7P2nGEktF4Dz5yjniFStFuNzPOa6Re1mCh1mQnYqmp5aGhGY5nqETxHlITLF/vbwN9ucAF8E9FBpTEEgfG7WQjULuNCPzIE4KTOa34GCT5iLrCHKvpJdJ71gMSacbLnDet1oIi/tBKl+Z5+zL1IhuQ0ZSQ8mgEN9H6S4DKRqlWmrZe1LqjYpGiUZFo0SjolGiUdEo0aholGhUNEo0KholmgaLditKDA1eXilKDFY0am2UGGzztGXLlmRXUfIZHh5uOcJMoB4ZGbEHFSULBLNjx4725QiZGPTq1SszNzeXHFGUFswBGh0d/ePKDJn/ADUrZQ9Ndj+cAAAAAElFTkSuQmCC\"","import React, { useEffect, useContext } from 'react';\r\nimport { TyreChecksContaxt, TyreCheckProvider } from './tyreChecksProvider';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport { TextBox, SecondaryButton, CustomButton, AppButtonGroup } from '../../../../Core/FormInput';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Button, CircularProgress, DialogContent, Grid, Tooltip, FormLabel, IconButton, InputLabel, Typography } from '@material-ui/core';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport { SingleAxle, CustomAxle, EditAxle } from './tyreAxle';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\n\r\nconst TyreChecks = () => {\r\n const {\r\n state,\r\n fromStep,\r\n inputList,\r\n handleAddClick,\r\n handleRemoveClick,\r\n handleInputChange,\r\n useDefaultSig,\r\n signCanvas,\r\n GetTechnicianSign,\r\n clear,\r\n YesNoRadio,\r\n handleInputs,\r\n inputChange,\r\n handleSubmit\r\n } = useContext(TyreChecksContaxt);\r\n const { hideModal, showToast, hideTopNavAndMenu } = useContext(AppContext);\r\n useEffect(() => {\r\n fromStep && hideTopNavAndMenu();\r\n }, []);\r\n const history = useHistory();\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {' '}\r\n Registration Number: {state.registration}\r\n \r\n \r\n {' '}\r\n WIP No: {state.wipNumber}\r\n \r\n \r\n Company : \r\n {state.customerName}\r\n \r\n \r\n \r\n \r\n {/* \r\n Size and Type of Tyre\r\n */}\r\n \r\n Size & Type of Tyre (Front)\r\n \r\n \r\n \r\n Size & Type of Tyre (Rear)\r\n \r\n \r\n \r\n Date of Tachograph (Last Callibration)\r\n \r\n \r\n \r\n Windscreen Condition Okay?\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.errors?.message}\r\n \r\n \r\n \r\n \r\n \r\n handleInputs(1)} state={state} axNO={1} />\r\n handleInputs(2)} axNO={2} state={state} />\r\n handleInputs(3)} axNO={3} state={state} />\r\n handleInputs(4)} axNO={4} state={state} />\r\n \r\n \r\n {inputList?.map((x, i) => (\r\n \r\n \r\n Defect\r\n handleInputChange(e, i)}\r\n InputProps={{\r\n endAdornment: (\r\n \r\n <>\r\n {inputList.length !== 1 && (\r\n handleRemoveClick(i)}\r\n />\r\n )}\r\n {inputList.length - 1 === i && (\r\n \r\n )}\r\n \r\n \r\n )\r\n }}\r\n />\r\n \r\n \r\n ))}\r\n \r\n\r\n \r\n \r\n Technician Signature \r\n {!state.imgtechniciansign && }\r\n \r\n {!state.imgtechniciansign && }\r\n \r\n {state.imgtechniciansign ? (\r\n \r\n ) : (\r\n <>\r\n {\r\n GetTechnicianSign();\r\n }}\r\n canvasProps={{\r\n className: 'signatureCanvas'\r\n }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n history.goBack()}>\r\n Cancel\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {!props.currency ? : £}\r\n \r\n \r\n \r\n \r\n {props.val}\r\n \r\n \r\n {props.title}\r\n \r\n \r\n \r\n
\r\n {props?.data?.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n
\r\n {' '}\r\n
\r\n
{m.name}
\r\n
({m.value})
\r\n
\r\n
\r\n );\r\n })}\r\n
\r\n \r\n \r\n {props.t1 ? 'VehicleType' : 'Salesperson'}\r\n Sold\r\n \r\n \r\n \r\n {props?.rows?.length > 0 ? (\r\n props?.rows?.map((row) => (\r\n \r\n \r\n {row.name}\r\n \r\n {row.value}\r\n \r\n ))\r\n ) : (\r\n \r\n No record found\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import { get } from './http-calls';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getsalesDashBoard = memoize(async () => {\r\n let res = await get(`Sales/SalesDashboard`, { useAuthToken: true });\r\n return res;\r\n});\r\n\r\nexport const getUsedVehicle = memoize(async () => {\r\n let res = await get(`Sales/SaleUsedVehicleDashBoard`, { useAuthToken: true });\r\n return res;\r\n});\r\n\r\nexport const getNewVehicle = memoize(async () => {\r\n let res = await get(`Sales/SaleNewVehicleDashBoard`, { useAuthToken: true });\r\n return res;\r\n});\r\n\r\nexport const getVehicleContingency = memoize(async () => {\r\n let res = await get(`Sales/SaleContingencyDashBoard`, { useAuthToken: true });\r\n return res;\r\n});\r\nexport const getOrderVehicle = memoize(async () => {\r\n let res = await get(`Sales/NewVehicleOrdersDashBoard`, { useAuthToken: true });\r\n return res;\r\n});\r\n","import React from 'react';\r\nimport { Grid, Avatar, Typography, Paper, CircularProgress } from '@material-ui/core';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport { DashboardTemplets, SalesBarChart, SalesLineChart, SalesTable, SalePieChart } from './dashboardTemplates';\r\nimport ReactSpeedometer from 'react-d3-speedometer';\r\nimport { getsalesDashBoard, getUsedVehicle, getNewVehicle, getVehicleContingency, getOrderVehicle } from './../../../../../Core/Service/salesDasboard-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n// import { CircularProgress } from '@material-ui/core/CircularProgress';\r\n\r\nconst SalesDashboard = () => {\r\n const [state, setState] = useState({\r\n usedVehicleFrenchise: [],\r\n usedVehicleBranch: [],\r\n usedVehicleModelCode: [],\r\n newVehicleStatus: [],\r\n newVehicleModel: [],\r\n newVehicleModelCode: [],\r\n contBranch: [],\r\n contDepartment: [],\r\n contFranchise: [],\r\n orderYear: [],\r\n orderMonth: [],\r\n orderCount: [],\r\n vehicleType_Sold: [],\r\n salePerson_Sold: [],\r\n UsedLoader: true,\r\n NewOrderLoader: true,\r\n NewLoader: true,\r\n ContiLoader: true\r\n });\r\n\r\n const pullOrderData = async () => {\r\n let res = await getOrderVehicle();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n orderYear: res.data?.table.map((m) => ({\r\n name: m.orderYear,\r\n val: m.sold\r\n })),\r\n orderMonth: res.data?.table1.map((m) => ({\r\n name: m.orderMonthName,\r\n val: m.sold\r\n })),\r\n orderCount: res.data?.table3.map((m) => ({\r\n name: m.modelDescription,\r\n total: m.vehicleCount\r\n })),\r\n vehicleType_Sold: res.data?.table2.map((m) => ({\r\n name: m.modelAnalysisCode,\r\n value: m.vehicleCount\r\n })),\r\n salePerson_Sold: res.data?.table4.map((m) => ({\r\n name: m.salesperson,\r\n value: m.totalSold\r\n })),\r\n progress: 100,\r\n NewOrderLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullUsedVehicleData = async () => {\r\n let usedVehicleRes = await getUsedVehicle();\r\n\r\n if (usedVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n usedVehicleFrenchise: usedVehicleRes.data?.table.map((m) => ({\r\n name: m.franchiseName,\r\n total: m.numberOfVehicles,\r\n value: m.totalValue\r\n })),\r\n usedVehicleBranch: usedVehicleRes.data?.table1.map((m) => ({\r\n name: m.branchShortName,\r\n total: m.numberOfVehicles,\r\n value: m.totalValue\r\n })),\r\n usedVehicleModelCode: usedVehicleRes.data?.table2.map((m) => ({\r\n name: m.modelCode,\r\n total: m.numberOfVehicles,\r\n totalvalue: m.totalValue\r\n })),\r\n totalUsedVehicleCount: usedVehicleRes.data?.table3[0].totalVehicleCount,\r\n progress: 25,\r\n UsedLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullNewVehicleData = async () => {\r\n let newVehicleRes = await getNewVehicle();\r\n if (newVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n newVehicleStatus: newVehicleRes.data?.table.map((m) => ({\r\n name: m.statusDescription,\r\n total: m.vehicleCount\r\n })),\r\n newVehicleModel: newVehicleRes.data?.table1.map((m) => ({\r\n name: m.modelAnalysisCode,\r\n value: m.vehicleCount\r\n })),\r\n newVehicleModelCode: newVehicleRes.data?.table2.map((m) => ({\r\n name: m.modelDescription,\r\n total: m.vehicleCount\r\n })),\r\n totalNewVehicleCount: newVehicleRes.data?.table3[0].totalVehicleCount,\r\n progress: 50,\r\n NewLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullcontingencyData = async () => {\r\n let res = await getVehicleContingency();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n contBranch: res.data?.table.map((m) => ({\r\n name: m.branchShortName,\r\n total: m.total\r\n })),\r\n contDepartment: res.data?.table1.map((m) => ({\r\n name: m.departmentDescription,\r\n total: m.total\r\n })),\r\n contFranchise: res.data?.table2.map((m) => ({\r\n name: m.franchiseName,\r\n total: m.total\r\n })),\r\n\r\n contTotalCount: `£${res.data?.table3[0].total}`,\r\n progress: 75,\r\n ContiLoader: false\r\n }));\r\n }\r\n };\r\n const history = useHistory();\r\n\r\n useEffect(async () => {\r\n pullUsedVehicleData();\r\n pullNewVehicleData();\r\n pullcontingencyData();\r\n pullOrderData();\r\n }, []);\r\n const GotoNewVehicleOrder = (val) => {\r\n console.log(val, 'val');\r\n let searchQuery = `?mc=${val}`;\r\n history.push({\r\n pathname: `/sales/VehicleNewOrder`,\r\n search: searchQuery\r\n });\r\n };\r\n const GoToUsedVehicleOrder = (name) => (val) => {\r\n let searchQuery = `?${name}=${val}`;\r\n history.push({\r\n pathname: `/sales/UsedVehicleStock`,\r\n search: searchQuery\r\n });\r\n };\r\n const GoToNewVehicleStockExcludingWIP = (name, url) => (val) => {\r\n ///sales/SalesContingencyDebt\r\n let searchQuery = `?${name}=${val}`;\r\n history.push({\r\n pathname: `/sales/${url}`,\r\n search: searchQuery\r\n });\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Vehicle Order\r\n \r\n \r\n {state.NewOrderLoader ? (\r\n \r\n \r\n \r\n New Vehicle Order Year\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n New Vehicle Order Month\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n New Vehicle Order Count\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Used Vehicle\r\n \r\n \r\n {state.UsedLoader ? (\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n Vehicle by Franchise\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/* NEW VEHICLE ORDERS MONTH */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle by Branch\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n {/* NEW VEHICLE ORDERS MONTH */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle by model codes\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total model by model codes\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n New Vehicle\r\n \r\n \r\n {state.NewLoader ? (\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n Vehicles count by status\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/* NEW VEHICLE ORDERS MONTH */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle count by model\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Sales Contingency Debt\r\n \r\n \r\n {state.ContiLoader ? (\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n Sales branch total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Departments total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Franchise total\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SalesDashboard;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabContext from '@material-ui/lab/TabContext';\r\nimport TabList from '@material-ui/lab/TabList';\r\nimport TabPanel from '@material-ui/lab/TabPanel';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper\r\n }\r\n}));\r\n\r\nexport const CustomTab = (props) => {\r\n const { TabScreen1, TabScreen2, TabScreen3 } = props;\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState('1');\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n \r\n Vehicle Count By Status\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Count By Model Analysis Code\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Count By Model\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nconst TabScreen2 = (props) => {\r\n return (\r\n \r\n \r\n \r\n \r\n Vehicle By Franchise\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By Franchise\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle By Branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle By Model Codes\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By Model Codes\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nconst TabScreen3 = (props) => {\r\n return (\r\n \r\n \r\n \r\n \r\n Sales Branches Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Department Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Franchise Total\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst SalesDashboard = () => {\r\n const [state, setState] = useState({\r\n usedVehicleFrenchise: [],\r\n usedVehicleBranch: [],\r\n usedVehicleModelCode: [],\r\n newVehicleStatus: [],\r\n newVehicleModel: [],\r\n newVehicleModelCode: [],\r\n contBranch: [],\r\n contDepartment: [],\r\n contFranchise: [],\r\n showLoader: true\r\n });\r\n const pullUsedVehicleData = async () => {\r\n let usedVehicleRes = await getUsedVehicle();\r\n\r\n if (usedVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n usedVehicleFrenchise: usedVehicleRes.data?.table.map((m) => ({\r\n name: m?.franchiseName,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n usedVehicleBranch: usedVehicleRes.data?.table1.map((m) => ({\r\n name: m?.branchShortName,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n usedVehicleModelCode: usedVehicleRes.data?.table2.map((m) => ({\r\n name: m?.modelCode,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n totalUsedVehicleCount: usedVehicleRes.data?.table3[0].totalVehicleCount\r\n }));\r\n }\r\n };\r\n\r\n const pullNewVehicleData = async () => {\r\n let newVehicleRes = await getNewVehicle();\r\n if (newVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n newVehicleStatus: newVehicleRes.data?.table.map((m) => ({\r\n name: m?.statusDescription,\r\n total: m?.vehicleCount\r\n })),\r\n newVehicleModel: newVehicleRes.data?.table1.map((m) => ({\r\n name: m?.modelAnalysisCode,\r\n total: m?.vehicleCount\r\n })),\r\n newVehicleModelCode: newVehicleRes.data?.table2.map((m) => ({\r\n name: m?.modelDescription,\r\n total: m?.vehicleCount\r\n })),\r\n totalNewVehicleCount: newVehicleRes.data?.table3[0].totalVehicleCount,\r\n showLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullcontingencyData = async () => {\r\n let res = await getVehicleContingency();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n contBranch: res.data?.table.map((m) => ({\r\n name: m?.branchShortName,\r\n total: m?.total\r\n })),\r\n contDepartment: res.data?.table1.map((m) => ({\r\n name: m?.departmentDescription,\r\n total: m?.total\r\n })),\r\n contFranchise: res.data?.table2.map((m) => ({\r\n name: m?.franchiseName,\r\n total: m?.total\r\n })),\r\n\r\n contTotalCount: `£${res.data?.table3[0].total}`\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullUsedVehicleData();\r\n pullNewVehicleData();\r\n pullcontingencyData();\r\n // pullOrderData();\r\n }, []);\r\n\r\n return (\r\n \r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n TabScreen1(state)} TabScreen2={() => TabScreen2(state)} TabScreen3={() => TabScreen3(state)} />\r\n \r\n \r\n )}\r\n
\r\n
\r\n \r\n \r\n \r\n Reg No: {state.headerRecords?.registration} WIP No: {state.headerRecords?.wipNumber}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Repair Required\r\n \r\n \r\n Authorised\r\n \r\n \r\n Actioned\r\n \r\n Comments\r\n \r\n \r\n \r\n \r\n {inputList.map((x, i) => {\r\n return (\r\n \r\n \r\n {x.isDisabled ? (\r\n {x.handoverSheetRepairRequired}
\r\n ) : (\r\n handleInputChange(e, i)}\r\n disabled={x.isDisabled}\r\n />\r\n )}\r\n {x.createdBy && (\r\n {`Created By ${x.createdBy}-${moment(x.dateCreated).format(\r\n 'LLL'\r\n )}`}\r\n )}\r\n {x.errorHandoverSheetRepairRequired && (\r\n \r\n {x.errorHandoverSheetRepairRequired}\r\n \r\n )}\r\n \r\n \r\n {x.authorisedBy ? (\r\n \r\n {x.authorisedBy}\r\n {moment(x.dateAuthorised).format('DD-MMM-YY')}\r\n
\r\n ) : (\r\n handleCheckbox(e, i)}\r\n name=\"handoverSheetAuthorised\"\r\n disabled={x.isDisabled}\r\n />\r\n )}\r\n \r\n \r\n {x.actionedBy ? (\r\n \r\n {x.actionedBy}\r\n {moment(x.dateActioned).format('DD-MMM-YY')}\r\n
\r\n ) : (\r\n handleCheckbox(e, i)}\r\n name=\"handoverSheetActioned\"\r\n // disabled={!x.handoverSheetAuthorised || x.isDisabled}\r\n disabled={x.isDisabled ? x.isDisabled : !x.handoverSheetAuthorised}\r\n />\r\n )}\r\n \r\n \r\n {x.isDisabled ? (\r\n {x.handoverSheetActionComment}
\r\n ) : (\r\n handleInputChange(e, i)}\r\n disabled={x.isDisabled}\r\n />\r\n )}\r\n \r\n \r\n {inputList.length !== 1 && state.showAdd && !x.isDisabled && (\r\n handleRemoveClick(i)}\r\n toolTipTitle=\"Remove Row\"\r\n />\r\n )}\r\n {i === 0 && state.showAdd && }\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Daily Lift Check List\r\n \r\n \r\n \r\n \r\n \r\n It is important that before a lift is used in the workshop the technician inspects the lift\r\n to ensure it is in good working order. This checklist helps to ensure the correct areas are checked.\r\n If you answer no to any of the following questions, please report the defect to your supervisor or\r\n Workshop Controller immediately and ensure there is a sign which confirms the lift is 'out of use' until fixed.\r\n \r\n \r\n \r\n\r\n \r\n * Required\r\n \r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n 1. Name\r\n \r\n \r\n \r\n {state.errors[\"name\"]}\r\n \r\n \r\n\r\n \r\n \r\n 2. Is the frame structurally sound?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"frameStructurallySound\"]}\r\n \r\n \r\n\r\n \r\n \r\n 3. Have you checked to make sure the lifting capacity of the lift is rated higher than the weight of the vehicle you are intending to lift?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedWeight\"]}\r\n \r\n \r\n\r\n \r\n \r\n 4. Have you located the stop control?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"locatedStopControl\"]}\r\n \r\n \r\n\r\n \r\n \r\n 5. Have you checked the lifting arms and are they functioning correctly?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedLiftingArms\"]}\r\n \r\n \r\n\r\n \r\n \r\n 6. Please confirm that you have checked the condition of the pads\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedPads\"]}\r\n \r\n \r\n\r\n \r\n \r\n 7. Confirm that you have checked pillar lift locks have been activated before moving under vehicle\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedPillarLiftLocks\"]}\r\n \r\n \r\n\r\n \r\n \r\n 8. Confirm that you have used chocks. If not available, inform the workshop controller to locate some before the lift is used.\r\n \r\n
\r\n \r\n } label=\"Yes, and in use\" />\r\n
\r\n } label=\"None available - discussed with workshop controller\" />\r\n \r\n \r\n {state.errors[\"chocksUsed\"]}\r\n \r\n \r\n\r\n \r\n \r\n 9. Use this space to make any comments/issues following your lift check.\r\n \r\n \r\n \r\n\r\n \r\n Save\r\n \r\n \r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n {props.match.params.name}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
No user available
\r\n \r\n );\r\n }\r\n const setFilterText = (e) => {\r\n const vl = e.target.value;\r\n setState((st) => ({ ...st, filterText: vl }));\r\n searchTimer && clearTimeout(searchTimer);\r\n searchTimer = setTimeout(() => {\r\n setFilteredRow();\r\n }, 500);\r\n };\r\n\r\n const setFilteredRow = () => {\r\n setState((st) => {\r\n const newSt = { ...st };\r\n const { rows_new, filterText } = newSt;\r\n let filterd = [];\r\n filterd = [...rows_new];\r\n if (filterText.trim().length > 0) {\r\n filterText\r\n .trim()\r\n .split(' ')\r\n .map((t) => t.trim().toLowerCase())\r\n .forEach((src) => {\r\n filterd = filterd.filter((rw) => some(rw, (vl) => `${vl}`.toLowerCase().includes(src)));\r\n });\r\n }\r\n newSt.filteredRows = filterd;\r\n return newSt;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n setFilteredRow();\r\n }, [state.rows_new]);\r\n\r\n const column_new = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n tempCols.splice(5, 0, {\r\n field: 'userRole',\r\n headerName: 'User Type',\r\n flex: 0.4\r\n });\r\n if (WindowWidths > 750) {\r\n tempCols.splice(6, 0, { field: 'isLocked', headerName: 'Is Locked?', flex: 0.5, valueGetter: (params) => (params.value ? 'Yes' : 'No') });\r\n tempCols.splice(7, 0, {\r\n field: 'isActive',\r\n headerName: 'Is Active?',\r\n flex: 0.5,\r\n valueGetter: (params) => (params.value ? 'Yes' : 'No')\r\n });\r\n }\r\n return tempCols;\r\n }, [WindowWidths]);\r\n\r\n return (\r\n \r\n {state.showResetModal ?
: null}\r\n
>\" aria-label=\"breadcrumb\" style={{ fontSize: '0.85rem' }}>\r\n \r\n Home\r\n \r\n \r\n Reset Password\r\n \r\n \r\n
\r\n
\r\n {/* table start*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* table end*/}\r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n setRowStyleOnCondition={true}\r\n setRowStyleFunction={rowDataStyle}\r\n setColStyleOnCondition={true}\r\n setColStyleFunction={colDataStyle}\r\n />\r\n \r\n \r\n\r\n {show.showSendMessageModal ? (\r\n handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default CustSiteVehicles;\r\n","import { useMemo, useState } from 'react';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { FormLabel, Grid, TextField, Tooltip } from '@material-ui/core';\r\nimport SendMessageModal from './sendMessageModal';\r\nimport moment from 'moment';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport ReactDOM from 'react-dom';\r\nimport { CustomIconButton, SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport BookingsScreen from '../../internal/Communicator/Bookings';\r\nimport { SlideToggle } from '../../../Core/FormInput';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\n\r\nconst years = () => {\r\n const years = [];\r\n const d = new Date();\r\n let startYear = d.getFullYear() - 10;\r\n let endYear = d.getFullYear() + 10;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ description: `${startYear}`, id: `${startYear}` });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Action',\r\n field: 'action',\r\n width: 70,\r\n filterable: false\r\n },\r\n { field: 'wipNumber', sortable: true, title: `${'WIP No'}`, width: 70 },\r\n { field: 'registration', sortable: true, title: `${'Vehicle Reg'}`, width: 90 },\r\n { field: 'st', sortable: true, title: `${'Job Description'}`, width: 170 },\r\n { field: 'makeModel', sortable: true, title: `${'Model'}`, width: 200 },\r\n {\r\n field: 'dateDueIn',\r\n sortable: true,\r\n title: `${'Due Date In'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueIn != null) {\r\n return moment(record.dateDueIn).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n {\r\n field: 'dateDueOut',\r\n sortable: true,\r\n title: `${'Date Due Out'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueOut != null) {\r\n return moment(record.dateDueOut).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n { field: 'branchShortName', sortable: true, title: `${'Branch'}`, width: 120 },\r\n {\r\n field: 'status',\r\n sortable: true,\r\n title: `${'Status'}`,\r\n width: 100\r\n }\r\n];\r\n\r\nconst screenName = {\r\n S: 'Site Vehicles',\r\n V: 'VOR Vehicles',\r\n W: 'Workshop Vehicles'\r\n};\r\n// const crumbs = (val) => {\r\n// return [\r\n// { name: 'Home', path: '/' },\r\n// { name: 'Communicator', path: '/communicator_dash' },\r\n// { name: 'Bookings', active: true }\r\n// ];\r\n// };\r\n\r\nconst crumbs = (menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Communicator', path: '/communicator_dash' });\r\n }\r\n list.push({ name: 'Bookings', active: true });\r\n return list;\r\n};\r\n\r\nconst CustBookings = (props) => {\r\n const monthsList = formatters.constantMonthList();\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n\r\n const [show, setShow] = useState({\r\n showSendMessageModal: false,\r\n isGrid: true,\r\n monthCode: monthsList[`${new Date().getMonth()}`],\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` }\r\n });\r\n\r\n const HandelSendMessage = (val) => {\r\n setShow((st) => ({\r\n ...st,\r\n showSendMessageModal: true,\r\n headerRecordID: val.headerRecordID,\r\n reg: val.registration,\r\n wip: val.wipNumber\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n HandelSendMessage(record)} toolTipTitle=\"Add Action Log\">\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showSendMessageModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setShow((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n if (type === 'checkbox') {\r\n setShow((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setShow((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setShow((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const getUrl = `CustUserCommunicator/Booking?Month=${show.monthCode.id}&Year=${show.yearCode.id}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n {show.isGrid ? (\r\n \r\n \r\n \r\n Select Month\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Year\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n />\r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n {show.showSendMessageModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n Approval Order Number\r\n \r\n \r\n {state.error.customerOrderReference}\r\n \r\n \r\n \r\n {state.error.customerSignature}\r\n \r\n \r\n \r\n Approve\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ApproveJobModal;\r\n","import { useMemo, useState } from 'react';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { Grid } from '@material-ui/core';\r\nimport SendMessageModal from './sendMessageModal';\r\nimport ApproveJobModal from './approveJobModal';\r\nimport moment from 'moment';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport ReactDOM from 'react-dom';\r\nimport { CustomIconButton, SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\r\nimport DoneOutlineIcon from '@material-ui/icons/DoneOutline';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Action',\r\n field: 'action',\r\n width: 70,\r\n filterable: false\r\n },\r\n { field: 'wipNumber', sortable: true, title: `${'WIP No'}`, width: 70 },\r\n { field: 'registration', sortable: true, title: `${'Vehicle Reg'}`, width: 90 },\r\n { field: 'st', sortable: true, title: `${'Job Description'}`, width: 170 },\r\n { field: 'makeModel', sortable: true, title: `${'Model'}`, width: 200 },\r\n {\r\n field: 'dateDueIn',\r\n sortable: true,\r\n title: `${'Due Date In'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueIn != null) {\r\n return moment(record.dateDueIn).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n {\r\n field: 'dateDueOut',\r\n sortable: true,\r\n title: `${'Date Due Out'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueOut != null) {\r\n return moment(record.dateDueOut).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n { field: 'branchShortName', sortable: true, title: `${'Branch'}`, width: 120 },\r\n {\r\n field: 'status',\r\n sortable: true,\r\n title: `${'Status'}`,\r\n width: 100\r\n }\r\n];\r\n\r\nconst crumbs = (menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Communicator', path: '/communicator_dash' });\r\n }\r\n\r\n list.push({ name: 'Awaiting Authority', active: true });\r\n\r\n return list;\r\n};\r\n\r\nconst CustAwaitingAuthority = (props) => {\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n\r\n const [show, setShow] = useState({\r\n showSendMessageModal: false,\r\n awaitingAuthModal: false\r\n });\r\n\r\n const HandelSendMessage = (name, val) => {\r\n setShow((st) => ({\r\n ...st,\r\n [name]: true,\r\n headerRecordID: val.headerRecordID,\r\n reg: val.registration,\r\n wip: val.wipNumber\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n HandelSendMessage('showSendMessageModal', record)} toolTipTitle=\"Send Message\">\r\n \r\n \r\n \r\n \r\n HandelSendMessage('awaitingAuthModal', record)} toolTipTitle=\"Approve Job\">\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showSendMessageModal = false;\r\n newSt.awaitingAuthModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setShow((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const getUrl = `CustUserCommunicator/AwaitingAuthority`;\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n />\r\n \r\n \r\n\r\n {show.showSendMessageModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n {show.awaitingAuthModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"sm\">\r\n \r\n \r\n ) : null}\r\n
\r\n {/* Bookings */}\r\n
\r\n Request Booking\r\n
\r\n
\r\n \r\n {AppStorage.getCommunicatorAllowed() && (\r\n <>\r\n {isCustomer ? (\r\n <>\r\n \r\n p.isShowCustomer\r\n )}\r\n />\r\n \r\n \r\n p.isShowCustomer)} label={CommunicatorHeaderComp()} />\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n {state.isBookingRequesteModal && (\r\n // closeModal(false)} maxWidth=\"md\" fullWidth overflow=\"auto\">\r\n \r\n // \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustCommunicatorDash;\r\n","import { get, post, put } from \"./http-calls\";\r\n\r\nexport const changeUserPassword = async (currentpass, newpassword, confirm) => {\r\n let res = await post(`/changePassword`, {\r\n currentPassword: currentpass,\r\n newPassword: newpassword,\r\n confirmPassword: confirm,\r\n }, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const SetUserPassword = async (newpassword, confirm,id,token) => { \r\n let res = await post(`/setNewPassword/${id}`, {\r\n newPassword: newpassword,\r\n confirmPassword: confirm,\r\n passwordResetToken: token\r\n });\r\n return res;\r\n};\r\n","export const TypeOfAuth = {\r\n NonAuth: 0,\r\n Auth: 1,\r\n Both: 2,\r\n};","import * as Components from \"./../../../../Components\";\r\nimport PasswordReset from \"../../../Modal/PasswordReset\"\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [{\r\n label: \"Home\",\r\n path: \"/\",\r\n exact: true,\r\n component: Components.home,\r\n authType: TypeOfAuth.NonAuth,\r\n}, {\r\n label: \"Login\",\r\n path: \"/login\",\r\n hidden: true,\r\n component: Components.login,\r\n authType: TypeOfAuth.NonAuth,\r\n}\r\n, {\r\n label: \"Reset Password\",\r\n path: \"/ResetPassword/:id\",\r\n hidden: true,\r\n component: PasswordReset,\r\n authType: TypeOfAuth.NonAuth,\r\n}\r\n];","import React, { useContext, useState } from \"react\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport AppContext from \"../../App/AppContext\";\r\nimport { PasswordBox, SecondaryButton, PrimaryButton } from \"./../FormInput\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { SetUserPassword } from \"../Service/changePassword-service\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport \"./model.css\";\r\n\r\nconst ResetPasswordModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n new: \"\",\r\n confirm: \"\",\r\n enableChange: false,\r\n });\r\n\r\n const handleClose = () => {\r\n // hideModal();\r\n props.history.push(\"/\");\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n nst.enableChange =\r\n nst.new &&\r\n nst.confirm &&\r\n nst.new === nst.confirm;\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangePassword = async (e) => {\r\n e.preventDefault();\r\n if (state.new && state.confirm) {\r\n const res = await SetUserPassword(\r\n state.new,\r\n state.confirm,\r\n props.match.params.id,\r\n window.location.search.substring(1)\r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n // showToast(res.messages);\r\n }\r\n else\r\n {\r\n showToast(res.message);\r\n props.history.push(\"/\");\r\n }\r\n \r\n } else {\r\n showToast(\"New password and confirm password is required.\");\r\n }\r\n hideModal();\r\n };\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default ResetPasswordModal;\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport { Navbar } from './../../Navbar';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport LabelImportantIcon from '@material-ui/icons/LabelImportant';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\n\r\nexport default [\r\n {\r\n label: 'Home',\r\n path: '/',\r\n exact: true,\r\n component: Components.home,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Branches',\r\n path: '/branches',\r\n exact: true,\r\n component: Components.Braches,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Users',\r\n path: '/users',\r\n component: Components.userManagement,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'eWIP',\r\n authType: TypeOfAuth.Both,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'QC',\r\n path: '/',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n {\r\n label: 'Results Lists',\r\n path: '/results-lists',\r\n component: Components.QCResultsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Items',\r\n path: '/items',\r\n component: Components.QCItems,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workflows',\r\n path: '/workflow',\r\n component: Components.workflow,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'OCR Documents',\r\n path: '/ocrdocuments',\r\n component: Components.ocrDocuments,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Web Forms',\r\n path: '/webform',\r\n component: Components.WebForm,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Dynamic Forms',\r\n path: '/DynamicFormsList',\r\n component: Components.DynamicFormsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Lists',\r\n path: '/',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n {\r\n label: 'Failure Notes',\r\n path: '/Lists/failurenotes',\r\n exact: true,\r\n component: Components.FailureNotes,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Std Tech Write-ups',\r\n path: '/standard-write-up',\r\n component: Components.StandardTechWriteUp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work Accomplished Codes',\r\n path: '/Lists/workaccomplishedcode',\r\n exact: true,\r\n component: Components.WorkAccomplishedCode,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Steps List',\r\n path: '/Lists/workflowttepslist',\r\n exact: true,\r\n component: Components.WorkflowStepsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Results',\r\n path: '/Lists/BatteryResults',\r\n exact: true,\r\n component: Components.BatteryResults,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect Reported Categories',\r\n path: '/defect-reported-categories',\r\n component: Components.DefectReportedCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect Actioned Category',\r\n path: '/DefectActionCategories',\r\n component: Components.DefectActionedCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Manufacturers',\r\n path: '/Lists/BatteryManufacturers',\r\n exact: true,\r\n component: Components.BatteryManufacturers,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Video Categories',\r\n path: '/Lists/VideoCategories',\r\n exact: true,\r\n component: Components.VideoCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'VOR Types',\r\n exact: true,\r\n path: '/Communicator/vortypes',\r\n component: Components.VorTypes,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Translations',\r\n path: '/Translations',\r\n exact: true,\r\n component: Components.Translations,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Sheets',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n { label: 'Faults', path: '/diagnostic_faults', component: Components.DiagnosticFaults, authType: TypeOfAuth.Auth },\r\n {\r\n label: 'Engine Faults',\r\n path: '/diagnosticEngineFaults',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Noise Apparents',\r\n path: '/diagnosticNoiseApparents',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Locations',\r\n path: '/diagnosticLocations',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Branch Parameters',\r\n exact: true,\r\n path: '/Communicator/BranchParameters',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Booking Request Status',\r\n exact: true,\r\n path: '/Communicator/BookingRequestStatus',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Notifications Groups',\r\n exact: true,\r\n path: '/Communicator/setVehicleNotification',\r\n component: Components.AdminVehicleNotification,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Status Update',\r\n exact: true,\r\n path: '/Communicator/smsstatusupdate',\r\n component: Components.SMSStatusUpdate,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Branches',\r\n exact: true,\r\n path: '/invoice/Branches',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Branch Status Email',\r\n exact: true,\r\n path: '/invoice/BranchStatusEmail',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'OCR Documents To Process',\r\n path: '/ocrdocumentstoprocess/:name/:ocrDocId',\r\n hidden: true,\r\n exact: true,\r\n component: Components.OcrDocumentToProcess,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'OCR Documents Field',\r\n path: '/ocrdocumentsfield/:ocrDocId',\r\n hidden: true,\r\n exact: true,\r\n component: Components.OcrDocumentField,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Settings',\r\n path: '/Settings',\r\n icon: ,\r\n exact: true,\r\n component: Components.Settings,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Ticker Messages',\r\n path: '/ticker_Messages',\r\n icon: ,\r\n exact: true,\r\n component: Components.KipMessages,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Steps List Option',\r\n path: '/workflowstplistops/:listID',\r\n component: Components.WorkflowStepsListOptions,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true,\r\n exact: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Steps',\r\n hidden: true,\r\n exact: true,\r\n path: '/steps/:workflowId',\r\n component: Components.workflowSteps,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Return Reason',\r\n hidden: true,\r\n exact: true,\r\n path: '/returnreason/:workflowId',\r\n component: Components.ReturnReason,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Dynamic Form Fields',\r\n hidden: true,\r\n exact: true,\r\n path: '/DynamicForm/:DynamicFormID',\r\n component: Components.DynamicFormFields,\r\n authType: TypeOfAuth.Auth\r\n },\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\n\r\nexport default [\r\n {\r\n label: 'Dashboard',\r\n path: '/',\r\n exact: true,\r\n component: Components.CustCommonDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/cust_dashboard',\r\n exact: true,\r\n component: Components.CustDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Customers',\r\n // exact: true,\r\n // path: '/invoice/Customers',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Customer',\r\n path: '/Customer/:name/:id',\r\n exact: true,\r\n hidden: true,\r\n component: Components.JobDetails,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Job',\r\n hidden: true,\r\n exact: true,\r\n path: '/job/:jobId/:workflowId',\r\n component: Components.workflowJobDetails,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Awaiting Authority',\r\n path: '/AwaitingAuthority',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.CustAwaitingAuthority,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.CustBookings,\r\n icon: \r\n }\r\n ]\r\n }\r\n];\r\n","import Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Container from '@material-ui/core/Container';\r\nimport React, { useEffect, useContext, useState } from 'react';\r\nimport AppContext from '../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport { getCustomerDashboard } from '../../Core/Service/customer-services';\r\nimport './dashboard.scss';\r\nimport { RenderTiles } from './CustCommonDash';\r\nimport { AppStorage } from '../../Core/Service/storage-service';\r\n\r\nexport default function Album() {\r\n const portalSettings = AppStorage.getPortalSetting();\r\n const [state, setState] = useState({\r\n rows_new: []\r\n });\r\n const { showToast } = useContext(AppContext);\r\n useEffect(async () => {\r\n let res = await getCustomerDashboard();\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows_new: res.data }));\r\n }\r\n if (!res.success) {\r\n showToast(res.message);\r\n }\r\n }, []);\r\n const cards = [\r\n {\r\n id: 1,\r\n name: 'Current Month',\r\n color: '#3498db',\r\n count: state.rows_new.currentMonth,\r\n url: '/Customer/Current Month/1'\r\n },\r\n {\r\n id: 2,\r\n name: 'Current Year',\r\n color: '#2ecc71',\r\n count: state.rows_new.currentYear,\r\n url: '/Customer/Current Year/2'\r\n },\r\n {\r\n id: 3,\r\n name: 'Last Year',\r\n color: '#dc3545',\r\n count: state.rows_new.preYear,\r\n url: '/Customer/Last Year/3'\r\n },\r\n {\r\n id: 4,\r\n name: 'Total',\r\n color: '#868e96',\r\n count: state.rows_new.total,\r\n url: '/Customer/Total/4'\r\n }\r\n ];\r\n return (\r\n // \r\n // \r\n // \r\n // {cards.map((option) => (\r\n // \r\n // \r\n // \r\n // \r\n // {option.name}\r\n // {option.count}\r\n // \r\n // \r\n // \r\n // \r\n // ))}\r\n // \r\n // \r\n //
\r\n \r\n \r\n {AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport AirplayIcon from '@material-ui/icons/Airplay';\r\nimport Dashboard from './../../../../Components/internal/dashboard/dashboard';\r\nimport AssessmentIcon from '@material-ui/icons/Assessment';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport BubbleChartIcon from '@material-ui/icons/BubbleChart';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport EmojiEventsIcon from '@material-ui/icons/EmojiEvents';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport SmsIcon from '@material-ui/icons/Sms';\r\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport FolderSpecialIcon from '@material-ui/icons/FolderSpecial';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BookIcon from '@material-ui/icons/Book';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nexport default [\r\n // {\r\n // label: 'Home',\r\n // path: '/',\r\n // exact: true,\r\n // component: Components.Dashbord,\r\n // authType: TypeOfAuth.Auth,\r\n // hidden: true,\r\n // icon: \r\n // },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Home',\r\n path: '/eWIPDashboard',\r\n exact: true,\r\n component: Components.Dashbord,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n icon: ,\r\n authType: TypeOfAuth.Auth,\r\n dontFlatListChildren: true,\r\n isDynamicChildren: 'eWipDashboard',\r\n children: [\r\n // {\r\n // label: 'Service Advisor',\r\n // path: '/dashboard/sa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Awaiting Arrival',\r\n // path: '/dashboard/aa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Workshop Control',\r\n // path: '/dashboard/wc',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Parts Advisor',\r\n // path: '/dashboard/pa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Technician App',\r\n // path: '/dashboard/ta',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Back Office',\r\n // path: '/dashboard/bo',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // }\r\n ]\r\n },\r\n {\r\n label: 'Special Equipments',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/Lists/SpecialEquipment/Dash',\r\n exact: false,\r\n component: Components.SpecialEquipmentDash,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipments',\r\n path: '/Lists/SpecialEquipment',\r\n exact: false,\r\n component: Components.SpecialEquipment,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Archived Jobs',\r\n path: '/archivedjobs',\r\n exact: true,\r\n component: Components.ArchivedJobs,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'QC Jobs',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/qc_jobs',\r\n component: Components.QCJobsDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Dashboard Detail',\r\n path: '/dashgrid',\r\n exact: true,\r\n component: Components.dashboard,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Open Action Log',\r\n path: '/Openactionlog',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.OpenActionLog,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Workshop Vehicles',\r\n path: '/WorkshopVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Check In - WSL not set',\r\n path: '/CheckInWSLNotSet',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.BookingsScreen,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Reports',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Group Dashboard',\r\n exact: true,\r\n path: '/ReportsDashboard',\r\n component: Components.MiniViewReportingDashboard,\r\n // component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Detail Dashboard',\r\n exact: true,\r\n path: '/RepotingTab',\r\n component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Budget Dashboard',\r\n exact: true,\r\n path: '/budget',\r\n component: Components.BudgetScreen,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Profit & Loss',\r\n exact: true,\r\n path: '/profitloss',\r\n component: Components.ProfitLoss,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/AgedMeasures',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueries',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries By Department',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueriesByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Branch',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Branch',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Company',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Company',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash',\r\n exact: true,\r\n path: '/AgedMeasures/Cash',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash By Department',\r\n exact: true,\r\n path: '/AgedMeasures/CashByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Surcharges',\r\n exact: true,\r\n path: '/AgedMeasures/DirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/NewMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'R&M',\r\n exact: true,\r\n path: '/AgedMeasures/R&M',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/UsedMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Non-franchise Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedNon-franchiseStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Debt',\r\n exact: true,\r\n path: '/AgedMeasures/VehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Warranty',\r\n exact: true,\r\n path: '/AgedMeasures/Warranty',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgress',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress by Departement',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgressbyDepartement',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'New Services',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: ,\r\n // children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/budget_dashboard',\r\n // component: Components.BudgetDashboard,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'DOC',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Weekly Flash Report',\r\n exact: true,\r\n path: '/Docs/WeeklyFlashReport',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Used Stock',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Used Stock Valuation',\r\n exact: true,\r\n path: '/UsedStockValuation',\r\n component: Components.UsedStockValuation,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/usedStock',\r\n component: Components.UsedStock,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Aged Vehicle Stock',\r\n exact: true,\r\n path: '/agedStocks',\r\n component: Components.AgedStocks,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Overage Priority List',\r\n exact: true,\r\n path: '/overagePriority',\r\n component: Components.OveragePriority,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/sales/dashboard',\r\n component: Components.SalesDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Dashboard V2',\r\n exact: true,\r\n path: '/sales/dashboardtwo',\r\n component: Components.SalesDashboardTwo,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'New Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/NewVehicleProfitReport',\r\n component: Components.NewVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/UsedVehicleProfitReport',\r\n component: Components.UsedVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries by Salesexec',\r\n exact: true,\r\n path: '/sales/AccountQueriesbySalesexec',\r\n component: Components.AccountQueriesbySalesexec,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Measures Work - Progress',\r\n exact: true,\r\n path: '/sales/AgedMeasuresWorkingProgress',\r\n component: Components.AgedMeasuresWorkingProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Work In Progress',\r\n exact: true,\r\n path: '/sales/SalesWorkInProgress',\r\n component: Components.SalesWorkinProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Registration Reports',\r\n exact: true,\r\n path: '/sales/RegistrationReports',\r\n component: Components.RegistrationReports,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Stock (Excluding WIP)',\r\n exact: true,\r\n path: '/sales/NewVehicleStockExcludingWIP',\r\n component: Components.VehicleStocksExWip,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Order',\r\n exact: true,\r\n path: '/sales/VehicleNewOrder',\r\n component: Components.VehicleNewOrder,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Outstanding Invoices',\r\n exact: true,\r\n path: '/sales/OutstandingInvoices',\r\n component: Components.OutstandingInvoices,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Contingency Debt',\r\n exact: true,\r\n path: '/sales/SalesContingencyDebt',\r\n component: Components.SalesContingencyDebt,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/sales/UsedVehicleStock',\r\n component: Components.UsedVehicleStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Aged Debt By Salesexec',\r\n exact: true,\r\n path: '/sales/VehicleAgedDebtBySalesexec',\r\n component: Components.VehicleAgedDebtBySalesexec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Services',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/service/dashboard',\r\n // component: Components.ServiceDashboard,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Consumables',\r\n exact: true,\r\n path: '/Services/Consumables',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysis',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis-Reason',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysisReason',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours',\r\n exact: true,\r\n path: '/Services/InvoicedHours',\r\n component: Components.InvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Mobilovan',\r\n exact: true,\r\n path: '/Services/Mobilovan',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'NPW Rectification',\r\n exact: true,\r\n path: '/Services/NPWRectification',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Parts Warranty Write Off',\r\n exact: true,\r\n path: '/Services/PartsWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service Warranty Write Off',\r\n exact: true,\r\n path: '/Services/ServiceWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Technician Efficiency',\r\n exact: true,\r\n path: '/Services/Efficiency',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/parts/dashboard',\r\n // component: Components.HeadLinesDashboard\r\n // },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n path: '/parts/PartsSales/P',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Trade Centre',\r\n exact: true,\r\n path: '/parts/PartsSales/B',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n path: '/parts/PartsSales/w',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Car Express',\r\n exact: true,\r\n path: '/parts/PartsSales/f',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Total',\r\n exact: true,\r\n path: '/parts/PartsSales/A',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used',\r\n exact: true,\r\n path: '/parts/PartsSales/U',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Shift Calendar',\r\n exact: true,\r\n path: '/ShiftCalendar',\r\n component: Components.ShiftCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Resource Calendar',\r\n exact: true,\r\n path: '/ResourceCalendar',\r\n component: Components.ResourceCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'WIP Hours',\r\n // exact: true,\r\n // path: '/wipHours',\r\n // component: Components.WipHours,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n {\r\n label: 'Budget',\r\n exact: true,\r\n path: '/ReportingBudget',\r\n component: Components.ReportingBudget,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'MOT HISTORY',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/MotHistoryAndRoadTax',\r\n component: Components.MotHistoryScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresDirtyUnits',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'ViewDebtDetailsSalesexec',\r\n exact: true,\r\n path: '/sales/ViewDebtDetailsSalesexec',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresRanMWarrantyCashGen',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetUsedAndNewVehicleDebt',\r\n exact: true,\r\n path: '/AgedMeasures/GetUsedAndNewVehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'EnquirieList',\r\n exact: true,\r\n path: '/AgedMeasures/EnquirieList',\r\n component: Components.EnquirieList,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Workflow Job',\r\n path: '/job/:jobId/:workflowId',\r\n component: Components.workflowJobDetails,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Dashboard Detail',\r\n path: '/techDashgrid',\r\n exact: true,\r\n component: Components.TechDashboardGrid,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'HistoryModal',\r\n path: '/SpecialEquipmentHistoryModal',\r\n hidden: true,\r\n component: Components.SpecialEquipmentHistoryModal,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import * as Components from \"./../../../../Components\";\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [{\r\n label: \"Home\",\r\n path: \"/\",\r\n exact: true,\r\n component: Components.AuditorDashboard,\r\n authType: TypeOfAuth.Auth,\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: \"Logout\",\r\n path: \"/logout\",\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth,\r\n },\r\n {\r\n label: \"Auditor\",\r\n path: \"/Auditor/:name/:id\",\r\n exact: true,\r\n hidden: true,\r\n component: Components.AuditorJobDetails,\r\n authType: TypeOfAuth.Auth,\r\n },\r\n {\r\n label: \"Workflow Job\",\r\n hidden: true,\r\n exact: true,\r\n path: \"/job/:jobId/:workflowId\",\r\n component: Components.workflowJobDetails,\r\n authType: TypeOfAuth.Auth,\r\n }\r\n];","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [\r\n {\r\n label: 'Technician App',\r\n path: '/',\r\n exact: true,\r\n component: Components.technicianApp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Job',\r\n hidden: true,\r\n exact: true,\r\n path: '/job/:jobId/:workflowId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.workflowJobDetails,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [\r\n {\r\n label: 'Technician Write-Up',\r\n hidden: true,\r\n exact: true,\r\n path: '/technicianwriteup/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.TechWriteUp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partrequisitions/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.PartRequisitionsModal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partreq-approve/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.ApprovePartRequisitions,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partreq-qty-issue/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.PartRequisitionsIssueQty,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Quality Control',\r\n hidden: true,\r\n exact: true,\r\n path: '/qc/:jobId',\r\n component: Components.QualityControlSheet,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Customer Consultation',\r\n hidden: true,\r\n exact: true,\r\n path: '/customerconsultation/:jobId',\r\n component: Components.CustomerConsultation,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipment',\r\n hidden: true,\r\n exact: true,\r\n path: '/specialequipment/:jobId',\r\n component: Components.SpecialEquipmentWebForm,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Lift Check List',\r\n hidden: true,\r\n exact: true,\r\n path: '/liftchecklist/:jobId',\r\n component: Components.LiftCheckList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Write-Up',\r\n hidden: true,\r\n exact: true,\r\n path: '/techwriteupadvisor/:jobId/:technicianJobId?',\r\n component: Components.TechWrite_Up,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Assign Technician',\r\n hidden: true,\r\n exact: true,\r\n path: '/assign-technician/:jobId',\r\n component: Components.AssignTechnician,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Test',\r\n hidden: true,\r\n exact: true,\r\n path: '/batterytest/:jobId',\r\n component: Components.BatteryTest,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect',\r\n hidden: true,\r\n exact: true,\r\n path: '/defectsworkshopcontroller/:jobId/:isReadOnly?',\r\n component: Components.DefectWC,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defects',\r\n hidden: true,\r\n exact: true,\r\n path: '/defects/:jobId',\r\n component: Components.AddDefects,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Break Disc Pad Wear Evaluation',\r\n hidden: true,\r\n exact: true,\r\n path: '/brakediscpadwear/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.BrakeDiscPadWear,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Charges',\r\n hidden: true,\r\n exact: true,\r\n path: '/diagnosticcharges/:jobId',\r\n component: Components.DiagnosticCharge,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tyre Check',\r\n hidden: true,\r\n exact: true,\r\n path: '/tyrecheck/:jobId',\r\n component: Components.TyreChecks,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service 24',\r\n hidden: true,\r\n exact: true,\r\n path: '/technican/service24/:jobId',\r\n component: Components.Service24Modal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Sheet',\r\n hidden: true,\r\n // icon: ,\r\n exact: true,\r\n path: '/diagnosticSheet/:jobId',\r\n component: Components.DiagnosticSheets,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Hand Over Sheet',\r\n hidden: true,\r\n exact: true,\r\n path: '/handOverSheetScreen/:jobId',\r\n component: Components.HandOverSheetScreen,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","export default __webpack_public_path__ + \"static/media/tree.1d45ee2e.png\";","import { Card, Grid, Typography, Box } from '@material-ui/core';\r\nimport React, { useEffect, useState, useLayoutEffect } from 'react';\r\nimport TreeImg from '../../Core/Header/tree.png';\r\nimport { useWindowSize } from '../../Core/Controls/ScreenResolution';\r\n\r\nconst TreesGrid = (props) => {\r\n const [state, setState] = useState({\r\n val: null,\r\n styleObj: { float: 'left', padding: 10 }\r\n });\r\n\r\n const Card = () => {\r\n return (\r\n \r\n 
\r\n \r\n );\r\n };\r\n const [widths, heights] = useWindowSize();\r\n let resolution = 947 - heights;\r\n let screen = 750 - resolution;\r\n\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n val: props.match?.params.count || null\r\n }));\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n let obj = { float: 'right', padding: 5 };\r\n let count = props.match?.params.count;\r\n if (count <= 30) {\r\n obj.width = 180;\r\n obj.height = 230;\r\n }\r\n if (count > 30 && count <= 100) {\r\n obj.width = 100;\r\n obj.height = 120;\r\n }\r\n if (count >= 100 && count <= 200) {\r\n obj.width = 77;\r\n obj.height = 84;\r\n }\r\n if (count >= 200 && count <= 300) {\r\n obj.width = 58;\r\n obj.height = 60;\r\n }\r\n if (count >= 300 && count <= 475) {\r\n obj.width = 45;\r\n obj.height = 50;\r\n }\r\n if (count >= 475 && count <= 880) {\r\n obj.width = 35;\r\n obj.height = 30;\r\n }\r\n if (count > 880) {\r\n obj.width = 20;\r\n obj.height = 30;\r\n }\r\n newSt.styleObj = obj;\r\n return newSt;\r\n });\r\n }, [props.match?.params.count]);\r\n\r\n var arr = [];\r\n var elements = [];\r\n for (var i = 0; i < state.val; i++) {\r\n elements.push();\r\n }\r\n\r\n const count = state.val <= 1 ? 'tree' : 'trees';\r\n\r\n return (\r\n \r\n {elements.length !== 0 ? (\r\n <>\r\n
\r\n {elements}\r\n \r\n\r\n \r\n
\r\n You have saved {state.val} {count}\r\n \r\n \r\n ) : (\r\n \r\n
\r\n
\r\n You are on your way to help environment by reducing printed papers\r\n \r\n
\r\n \r\n \r\n {subOption.label}\r\n \r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n handleClick(subOption.label)} title={subOption.label}>\r\n {subOption.label}\r\n \r\n {state[subOption.label] ? : }\r\n \r\n \r\n \r\n {handler(subOption.children, true)}\r\n \r\n
\r\n );\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n {handler(\r\n props.currentMenus.filter((m) => !m.hidden),\r\n false\r\n )}\r\n
\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { getTickers } from './../Service/KPI_message-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\n\r\nexport const TickerDisplayMessage = () => {\r\n const [screenWidth, screenHeight] = useWindowSize();\r\n const [message, setMessage] = useState('');\r\n useEffect(async () => {\r\n let res = await getTickers();\r\n if (res.success) {\r\n let array = [];\r\n res.data.list.forEach((m) => {\r\n array.push(`${m.message}`);\r\n array.push();\r\n });\r\n\r\n let newstring = array.join(` 💠`);\r\n setMessage(newstring);\r\n }\r\n }, []);\r\n\r\n return (\r\n 1050 ? 390 : screenWidth > 960 ? 300 : screenWidth > 895 ? 220 : screenWidth > 850 ? 170 : 100,\r\n display: screenWidth > 775 ? 'block' : 'none',\r\n marginTop: 8,\r\n font: 'message-box',\r\n fontSize: '15px'\r\n }}\r\n >\r\n {message && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport AirplayIcon from '@material-ui/icons/Airplay';\r\nimport Dashboard from './../../../../Components/internal/dashboard/dashboard';\r\nimport AssessmentIcon from '@material-ui/icons/Assessment';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport BubbleChartIcon from '@material-ui/icons/BubbleChart';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport EmojiEventsIcon from '@material-ui/icons/EmojiEvents';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport SmsIcon from '@material-ui/icons/Sms';\r\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport FolderSpecialIcon from '@material-ui/icons/FolderSpecial';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BookIcon from '@material-ui/icons/Book';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nexport default [\r\n // {\r\n // label: 'Home',\r\n // path: '/',\r\n // exact: true,\r\n // component: Components.Dashbord,\r\n // authType: TypeOfAuth.Auth,\r\n // hidden: true,\r\n // icon: \r\n // },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Home',\r\n path: '/eWIPDashboard',\r\n exact: true,\r\n component: Components.Dashbord,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n icon: ,\r\n authType: TypeOfAuth.Auth,\r\n dontFlatListChildren: true,\r\n isDynamicChildren: 'eWipDashboard',\r\n children: [\r\n // {\r\n // label: 'Service Advisor',\r\n // path: '/dashboard/sa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Awaiting Arrival',\r\n // path: '/dashboard/aa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Workshop Control',\r\n // path: '/dashboard/wc',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Parts Advisor',\r\n // path: '/dashboard/pa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Technician App',\r\n // path: '/dashboard/ta',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Back Office',\r\n // path: '/dashboard/bo',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // }\r\n ]\r\n },\r\n {\r\n label: 'Special Equipments',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/Lists/SpecialEquipment/Dash',\r\n exact: false,\r\n component: Components.SpecialEquipmentDash,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipments',\r\n path: '/Lists/SpecialEquipment',\r\n exact: false,\r\n component: Components.SpecialEquipment,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Archived Jobs',\r\n path: '/archivedjobs',\r\n exact: true,\r\n component: Components.ArchivedJobs,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'QC Jobs',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/qc_jobs',\r\n component: Components.QCJobsDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Dashboard Detail',\r\n path: '/dashgrid',\r\n exact: true,\r\n component: Components.dashboard,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Open Action Log',\r\n path: '/Openactionlog',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.OpenActionLog,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Workshop Vehicles',\r\n path: '/WorkshopVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Check In - WSL not set',\r\n path: '/CheckInWSLNotSet',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.BookingsScreen,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Reports',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/ReportsDashboard',\r\n component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Budget Dashboard',\r\n exact: true,\r\n path: '/budget',\r\n component: Components.BudgetScreen,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Profit & Loss',\r\n exact: true,\r\n path: '/profitloss',\r\n component: Components.ProfitLoss,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/AgedMeasures',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueries',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries By Department',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueriesByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Branch',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Branch',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Company',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Company',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash',\r\n exact: true,\r\n path: '/AgedMeasures/Cash',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash By Department',\r\n exact: true,\r\n path: '/AgedMeasures/CashByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Surcharges',\r\n exact: true,\r\n path: '/AgedMeasures/DirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/NewMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'R&M',\r\n exact: true,\r\n path: '/AgedMeasures/R&M',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/UsedMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Non-franchise Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedNon-franchiseStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Debt',\r\n exact: true,\r\n path: '/AgedMeasures/VehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Warranty',\r\n exact: true,\r\n path: '/AgedMeasures/Warranty',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgress',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress by Departement',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgressbyDepartement',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'New Services',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: ,\r\n // children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/budget_dashboard',\r\n // component: Components.BudgetDashboard,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'DOC',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Weekly Flash Report',\r\n exact: true,\r\n path: '/Docs/WeeklyFlashReport',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Used Stock',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Used Stock Valuation',\r\n exact: true,\r\n path: '/UsedStockValuation',\r\n component: Components.UsedStockValuation,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/usedStock',\r\n component: Components.UsedStock,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Aged Vehicle Stock',\r\n exact: true,\r\n path: '/agedStocks',\r\n component: Components.AgedStocks,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Overage Priority List',\r\n exact: true,\r\n path: '/overagePriority',\r\n component: Components.OveragePriority,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/sales/dashboard',\r\n component: Components.SalesDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Dashboard V2',\r\n exact: true,\r\n path: '/sales/dashboardtwo',\r\n component: Components.SalesDashboardTwo,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'New Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/NewVehicleProfitReport',\r\n component: Components.NewVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/UsedVehicleProfitReport',\r\n component: Components.UsedVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries by Salesexec',\r\n exact: true,\r\n path: '/sales/AccountQueriesbySalesexec',\r\n component: Components.AccountQueriesbySalesexec,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Measures Work - Progress',\r\n exact: true,\r\n path: '/sales/AgedMeasuresWorkingProgress',\r\n component: Components.AgedMeasuresWorkingProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Work In Progress',\r\n exact: true,\r\n path: '/sales/SalesWorkInProgress',\r\n component: Components.SalesWorkinProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Registration Reports',\r\n exact: true,\r\n path: '/sales/RegistrationReports',\r\n component: Components.RegistrationReports,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Stock (Excluding WIP)',\r\n exact: true,\r\n path: '/sales/NewVehicleStockExcludingWIP',\r\n component: Components.VehicleStocksExWip,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Order',\r\n exact: true,\r\n path: '/sales/VehicleNewOrder',\r\n component: Components.VehicleNewOrder,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Outstanding Invoices',\r\n exact: true,\r\n path: '/sales/OutstandingInvoices',\r\n component: Components.OutstandingInvoices,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Contingency Debt',\r\n exact: true,\r\n path: '/sales/SalesContingencyDebt',\r\n component: Components.SalesContingencyDebt,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/sales/UsedVehicleStock',\r\n component: Components.UsedVehicleStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Aged Debt By Salesexec',\r\n exact: true,\r\n path: '/sales/VehicleAgedDebtBySalesexec',\r\n component: Components.VehicleAgedDebtBySalesexec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Services',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/service/dashboard',\r\n component: Components.ServiceDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Consumables',\r\n exact: true,\r\n path: '/Services/Consumables',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysis',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis-Reason',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysisReason',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours',\r\n exact: true,\r\n path: '/Services/InvoicedHours',\r\n component: Components.InvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Mobilovan',\r\n exact: true,\r\n path: '/Services/Mobilovan',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'NPW Rectification',\r\n exact: true,\r\n path: '/Services/NPWRectification',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Parts Warranty Write Off',\r\n exact: true,\r\n path: '/Services/PartsWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service Warranty Write Off',\r\n exact: true,\r\n path: '/Services/ServiceWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Technician Efficiency',\r\n exact: true,\r\n path: '/Services/Efficiency',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/parts/dashboard',\r\n // component: Components.HeadLinesDashboard\r\n // },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n path: '/parts/PartsSales/P',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Trade Centre',\r\n exact: true,\r\n path: '/parts/PartsSales/B',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n path: '/parts/PartsSales/w',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Car Express',\r\n exact: true,\r\n path: '/parts/PartsSales/f',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Total',\r\n exact: true,\r\n path: '/parts/PartsSales/A',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used',\r\n exact: true,\r\n path: '/parts/PartsSales/U',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Shift Calendar',\r\n exact: true,\r\n path: '/ShiftCalendar',\r\n component: Components.ShiftCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Resource Calendar',\r\n exact: true,\r\n path: '/ResourceCalendar',\r\n component: Components.ResourceCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'WIP Hours',\r\n // exact: true,\r\n // path: '/wipHours',\r\n // component: Components.WipHours,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n {\r\n label: 'Budget',\r\n exact: true,\r\n path: '/ReportingBudget',\r\n component: Components.ReportingBudget,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'MOT HISTORY',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/MotHistoryAndRoadTax',\r\n component: Components.MotHistoryScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresDirtyUnits',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'ViewDebtDetailsSalesexec',\r\n exact: true,\r\n path: '/sales/ViewDebtDetailsSalesexec',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresRanMWarrantyCashGen',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetUsedAndNewVehicleDebt',\r\n exact: true,\r\n path: '/AgedMeasures/GetUsedAndNewVehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'EnquirieList',\r\n exact: true,\r\n path: '/AgedMeasures/EnquirieList',\r\n component: Components.EnquirieList,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Workflow Job',\r\n path: '/job/:jobId/:workflowId',\r\n component: Components.workflowJobDetails,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Dashboard Detail',\r\n path: '/techDashgrid',\r\n exact: true,\r\n component: Components.TechDashboardGrid,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'HistoryModal',\r\n path: '/SpecialEquipmentHistoryModal',\r\n hidden: true,\r\n component: Components.SpecialEquipmentHistoryModal,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import React, { useContext, useMemo, useEffect } from 'react';\r\nimport { AppBar, Toolbar, Button, useScrollTrigger, Slide, MenuItem, MenuList, Paper, Divider, Collapse } from '@material-ui/core';\r\nimport { makeStyles, fade } from '@material-ui/core/styles';\r\nimport { Link, NavLink } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport _ from 'lodash';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport { SecondaryButton, CustomButton } from '../FormInput';\r\nimport VpnKeyIcon from '@material-ui/icons/VpnKey';\r\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp';\r\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { getMenuForRole } from './_menu';\r\nimport AppContext from '../../App/AppContext';\r\nimport { AppStorage } from '../Service/storage-service';\r\nimport MySignature, { UserSignatureReminder } from '../Modal/SignatureModal';\r\nimport { postSignature, postSignatureStatus } from '../Service/login-service';\r\nimport InputBase from '@material-ui/core/InputBase';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport moment from 'moment';\r\nimport Popper from '@material-ui/core/Popper';\r\nimport Fade from '@material-ui/core/Fade';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { getDataByEwipNo } from '../Service/common-service';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport TemporaryDrawer from './Drawer';\r\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\r\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\nimport { WorkflowDash, PartSales } from '../../Components';\r\nimport { Label } from 'recharts';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport { TickerDisplayMessage } from './ticker';\r\nimport { TableContainer } from '@material-ui/core';\r\nimport { Table } from '@material-ui/core';\r\nimport { TableHead } from '@material-ui/core';\r\nimport { TableBody } from '@material-ui/core';\r\nimport { TableRow } from '@material-ui/core';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { TableCell } from '@material-ui/core';\r\nimport formatters from '../Grid/inputFormatter';\r\nimport InternalMenusToConvertDynamic from '../Root/menu/roles-menu/reportingMenu';\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:hover': {\r\n backgroundColor: theme.palette.action.hover,\r\n cursor: 'pointer'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n table: {\r\n width: 800\r\n },\r\n root: {\r\n flexGrow: 0\r\n },\r\n title: {\r\n flexGrow: 1,\r\n fontSize: '15px'\r\n },\r\n linknav: {\r\n textDecoration: 'none',\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n fontSize: '15px'\r\n },\r\n labelBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n textTransform: 'none',\r\n textDecoration: 'none',\r\n fontSize: '15px'\r\n },\r\n logoutBtn: {\r\n display: 'inline-flex',\r\n VerticalAlign: 'text-bottom',\r\n BoxSizing: 'inherit',\r\n textAlign: 'center',\r\n alignItems: 'center',\r\n textDecoration: 'none',\r\n cursor: 'pointer',\r\n marginLeft: 1\r\n },\r\n app_toolbar: {\r\n height: '45px',\r\n minHeight: '45px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n padding: '0px 10px'\r\n },\r\n search: {\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: fade(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: fade(theme.palette.common.white, 0.25)\r\n },\r\n marginRight: theme.spacing(2),\r\n marginLeft: 0,\r\n marginTop: (props) => (props.WindowWidths > 750 ? 4 : 12),\r\n width: '180px !important',\r\n maxHeight: '30px',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(3),\r\n width: 'auto'\r\n }\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 0.9),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n },\r\n inputRoot: {\r\n color: 'inherit'\r\n },\r\n inputInput: {\r\n padding: '4px 8px 8px 0px', //theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n transition: theme.transitions.create('width'),\r\n width: '100%',\r\n [theme.breakpoints.up('md')]: {\r\n width: '20ch'\r\n }\r\n },\r\n drawerPaper: {\r\n top: '60px',\r\n '&::-webkit-scrollbar': {\r\n width: '0.4em'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n backgroundColor: 'rgba(0,0,0,.1)',\r\n outline: '1px solid slategrey'\r\n }\r\n }\r\n}));\r\n\r\nfunction HideOnScroll(props) {\r\n const { children } = props;\r\n const trigger = useScrollTrigger();\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nconst AppbarComponent = (props) => {\r\n const [state, setState] = React.useState({ open2: null, WorkflowJobs: [], left: false });\r\n const {\r\n loggedIn,\r\n userRoles,\r\n displayName,\r\n lastLogin,\r\n showToast,\r\n portalSettings,\r\n showModal,\r\n showTopNavAndMenu,\r\n hideShowTopNav,\r\n isTopNav,\r\n tempMenus,\r\n reportingMenus\r\n } = useContext(AppContext);\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n let tempPortalSettings = { ...portalSettings };\r\n tempPortalSettings.WindowWidths = WindowWidths;\r\n const classes = useStyles(tempPortalSettings);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [anchorEl2, setAnchorEl2] = React.useState(null);\r\n const [anchorEl3, setAnchorEl3] = React.useState(null);\r\n const [openSign, setOpenSign] = React.useState(false);\r\n const [openSignRem, setOpenSignRem] = React.useState(false);\r\n const [searchAnchorEl, setSearchAnchorEl] = React.useState(null);\r\n let history = useHistory();\r\n const isCommunicatorAllowed = AppStorage.getCommunicatorAllowed();\r\n const isInvoiceAllowed = AppStorage.getInvoiceAllowed();\r\n const isReportingAllowed = AppStorage.getReportingAllowed();\r\n const isWIPAllowed = AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled;\r\n let menuPermissionCounter = isCommunicatorAllowed + isInvoiceAllowed + isReportingAllowed + isWIPAllowed;\r\n const isReportingAgedMeasureAllowed = AppStorage.getReportingAgedMeasureAllowed();\r\n const isReportingPartsAllowed = AppStorage.getReportingPartsAllowed();\r\n\r\n useEffect(() => {\r\n if (loggedIn && AppStorage.getSignNotifiedStatus() === 0 && AppStorage.getSignatureStatus() != 1 && AppStorage.getSignatureStatus() != 2) {\r\n setOpenSignRem(true);\r\n AppStorage.setSignNotifiedStatus('set');\r\n }\r\n }, []);\r\n let isAdmin = userRoles.includes('admin');\r\n\r\n const getWipDataById = async (wipNo) => {\r\n const res = await getDataByEwipNo(wipNo);\r\n if (res.success) {\r\n console.log(res);\r\n setState((st) => ({ ...st, WorkflowJobs: res.data.jobsDetails }));\r\n } else {\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n }\r\n };\r\n\r\n const handleChange = (event) => {\r\n if (event.target.value.length > 4) {\r\n getWipDataById(event.target.value);\r\n setSearchAnchorEl(event.currentTarget);\r\n } else {\r\n setSearchAnchorEl(null);\r\n }\r\n };\r\n\r\n const handleClick = (item) => (e) => {\r\n setState((st) => ({ ...st, [item]: !st[item], id2: item }));\r\n setAnchorEl2(e.currentTarget);\r\n };\r\n\r\n const handleCollaps = (item) => (e) => {\r\n setState((st) => ({ ...st, [item]: !st[item], id2: item }));\r\n setAnchorEl3(e.currentTarget);\r\n };\r\n\r\n const handleClose = (item, coll) => {\r\n setState((st) => ({ ...st, [item]: null }));\r\n if (!coll) {\r\n setAnchorEl2(null);\r\n } else {\r\n setAnchorEl3(null);\r\n }\r\n };\r\n\r\n const handleCloseSearch = (data) => {\r\n history.push(`/Job/${data.headerRecordID}/${data.workFlowID}`);\r\n setSearchAnchorEl(null);\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n };\r\n\r\n const open = Boolean(anchorEl);\r\n const open2 = Boolean(anchorEl2);\r\n\r\n const id = open ? 'simple-popover' : undefined;\r\n const handlePopupClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handlePopupClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const showPasswordChangeModal = (e) => {\r\n e.preventDefault();\r\n showModal('PasswordChange');\r\n };\r\n\r\n const currentMenus = useMemo(() => {\r\n let menus = getMenuForRole(userRoles, loggedIn);\r\n if (isWIPAllowed) {\r\n let dashMenus = [];\r\n if (tempMenus.menus.length > 0) {\r\n dashMenus = tempMenus.menus.map((x) => {\r\n return {\r\n label: `${x.label}`,\r\n path: `/dashboard/${x.id}`,\r\n exact: true,\r\n authType: 1,\r\n component: () => {\r\n return ;\r\n }\r\n };\r\n });\r\n }\r\n if (menuPermissionCounter == 1) {\r\n let isDash = menus.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[isDash].children = dashMenus;\r\n }\r\n } else {\r\n let iseWIPMenu = menus.findIndex((p) => p.label === 'eWIP');\r\n let isDash = menus[iseWIPMenu].children.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[iseWIPMenu].children[isDash].children = dashMenus;\r\n }\r\n }\r\n }\r\n if (isReportingAllowed) {\r\n let ReportsIndex = InternalMenusToConvertDynamic.findIndex((m) => m.label == 'Reports');\r\n let findAgedMeasureMenuIndex = InternalMenusToConvertDynamic[ReportsIndex]?.children?.findIndex((m) => m.label == 'Aged Measures');\r\n let tempAgedMeasureChildren = InternalMenusToConvertDynamic[ReportsIndex]?.children[findAgedMeasureMenuIndex]?.children;\r\n const agedMeasureMenus = [];\r\n const PartsMenus = [];\r\n\r\n if (reportingMenus.menus.length > 0) {\r\n let menusFromAPI = reportingMenus.menus;\r\n if (tempAgedMeasureChildren?.length > 0) {\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n for (let i = 0; i < tempAgedMeasureChildren?.length; i++) {\r\n if (tempAgedMeasureChildren[i].label === menusFromAPI[j].label) {\r\n agedMeasureMenus.push({\r\n ...tempAgedMeasureChildren[i],\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel\r\n });\r\n }\r\n }\r\n }\r\n }\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n if (menusFromAPI[j].parentMenu == 'Part') {\r\n PartsMenus.push({\r\n exact: true,\r\n authType: 1,\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel,\r\n component: () => {\r\n return ;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu > -1) {\r\n if (isReportingAgedMeasureAllowed || isReportingPartsAllowed) {\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu >= 0) {\r\n let agedMeasuresIndex = menus[isReportingMenu].children.findIndex((p) => p.label === 'Aged Measures');\r\n let partsIndex = menus[isReportingMenu].children.findIndex((p) => p.label === 'Parts');\r\n if (isReportingAgedMeasureAllowed && agedMeasuresIndex >= 0) {\r\n menus[isReportingMenu].children[agedMeasuresIndex].children = agedMeasureMenus.length > 0 ? agedMeasureMenus : [];\r\n }\r\n if (isReportingPartsAllowed && partsIndex >= 0) {\r\n menus[isReportingMenu].children[partsIndex].children = PartsMenus.length > 0 ? PartsMenus : [];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n return menus;\r\n }, [loggedIn, tempMenus, reportingMenus]);\r\n\r\n const closeSign = () => {\r\n setOpenSign(!openSign);\r\n };\r\n const closeSignRem = () => {\r\n setOpenSignRem(false);\r\n };\r\n\r\n const postSignData = async (sign, id, defaultInternalDashboard, appbarLocation) => {\r\n const data = {\r\n signature: sign,\r\n AppbarLocation: appbarLocation,\r\n defaultInternalDashboard: defaultInternalDashboard\r\n };\r\n console.log('from appbar ');\r\n let resSign = await postSignature(data);\r\n let resStatus = id && (await postSignatureStatus(id));\r\n if (resSign) {\r\n if (resSign?.success) {\r\n AppStorage.setSignature(sign);\r\n AppStorage.setUserGridColumnAppbarLocation(appbarLocation);\r\n\r\n localStorage.setItem('_defaultInternalDashboard_', defaultInternalDashboard);\r\n showToast('User Settings Updated Successfully!');\r\n } else {\r\n showToast(resSign?.message || 'Something went wrong!');\r\n }\r\n }\r\n };\r\n\r\n const toggleDrawer = (anchor, open) => (event) => {\r\n if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {\r\n return;\r\n }\r\n setState({ ...state, [anchor]: open });\r\n };\r\n\r\n const handler = (children, isFiltered) => {\r\n let currentNav = isFiltered ? _.orderBy(children, [(c) => c.label.toLowerCase()], ['asc']) : children;\r\n return currentNav.map((m, index) => {\r\n if (!m.children) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n
handleClose(m.label)}\r\n anchorOrigin={{\r\n vertical: 'bottom',\r\n horizontal: 'center'\r\n }}\r\n transformOrigin={{\r\n vertical: 'top',\r\n horizontal: 'center'\r\n }}\r\n >\r\n \r\n handleClose(m.label)}>\r\n \r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {WindowWidths < 1469 && loggedIn ? (\r\n
\r\n \r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {handler(\r\n currentMenus.filter((m) => !m.hidden),\r\n false\r\n )}\r\n
\r\n )}\r\n {loggedIn && !isAdmin && isWIPAllowed && (\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n Customer Name\r\n \r\n \r\n Workflow\r\n \r\n \r\n Return Reason\r\n \r\n \r\n Branch\r\n \r\n \r\n Due Date In\r\n \r\n \r\n \r\n \r\n {console.log(state.WorkflowJobs)}\r\n {state.WorkflowJobs.map((w, index) => {\r\n return (\r\n handleCloseSearch(w)}>\r\n \r\n {w.wipNumber}
\r\n \r\n \r\n {w.regNumber}
\r\n \r\n \r\n {w.customer}
\r\n \r\n \r\n {w.workflow}
\r\n \r\n \r\n {w.returnReason}
\r\n \r\n \r\n {w.branch}
\r\n \r\n \r\n {formatters.DateTimeFormatter(w.dateDueIn)}
\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n
\r\n {loggedIn ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n {isTopNav ? (\r\n hideShowTopNav(false)}\r\n toolTipTitle=\"Hide Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n ) : (\r\n hideShowTopNav(true)}\r\n toolTipTitle=\"Show Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n )}\r\n
\r\n
\r\n {displayName}\r\n \r\n
\r\n
\r\n \r\n \r\n {!isAdmin && (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n
\r\n
Login\r\n \r\n )}\r\n
\r\n {openSign &&
}\r\n {!isAdmin && openSignRem &&
}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {currentMenus.map((m, i) => {\r\n return m.children ? (\r\n m.children.map((a) => {\r\n return a.children ? (\r\n a.children.map((b) => {\r\n const [url, params] = b.path.split('?');\r\n return ;\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/tree.1d45ee2e.png\";","import { get, post } from './http-calls';\r\nimport { memoize } from 'lodash';\r\nexport const getSavePaperData = async () => {\r\n let res = await get('Jobdocuments/DocumentsProcessed', { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport TreeImg from './assests/tree.png';\r\nimport { getSavePaperData } from '../../Core/Service/saveTree-service';\r\n\r\nconst TreeImgLogo = () => {\r\n const [state, setState] = useState({\r\n val: 0\r\n });\r\n useEffect(async () => {\r\n let res = await getSavePaperData();\r\n let ResData = res.data.documents[0]?.documentsProcessed;\r\n saveTrees(ResData);\r\n }, [state.val]);\r\n\r\n const saveTrees = (values) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (values >= 12000) {\r\n let treeVal = values / 12000;\r\n let newVal = Math.round(treeVal);\r\n newSt.val = newVal;\r\n } else {\r\n newSt.val = 0;\r\n }\r\n return newSt;\r\n });\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default TreeImgLogo;\r\n","import React, { useContext, useMemo } from 'react';\r\nimport clsx from 'clsx';\r\nimport { makeStyles, useTheme, fade } from '@material-ui/core/styles';\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport List from '@material-ui/core/List';\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport { Link, NavLink, Route, Switch, useHistory } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport { Collapse, Fade, Grid, InputBase, MenuItem, MenuList, Paper, Popover, Popper } from '@material-ui/core';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\nimport AppContext from '../../App/AppContext';\r\nimport { getMenuForRole } from './_menu';\r\nimport { WorkflowDash, PartSales } from '../../Components';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { getDataByEwipNo } from '../Service/common-service';\r\nimport moment from 'moment';\r\nimport { CustomButton, SecondaryButton } from '../FormInput';\r\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\r\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\r\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport VpnKeyIcon from '@material-ui/icons/VpnKey';\r\nimport MySignature, { UserSignatureReminder } from '../Modal/SignatureModal';\r\nimport { postSignature, postSignatureStatus } from '../Service/login-service';\r\nimport { AppStorage } from '../Service/storage-service';\r\nimport { TypeOfAuth } from './menu/menu-auth-type';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport { TickerDisplayMessage } from './ticker';\r\nimport { TableContainer } from '@material-ui/core';\r\nimport { Table } from '@material-ui/core';\r\nimport { TableHead } from '@material-ui/core';\r\nimport { TableBody } from '@material-ui/core';\r\nimport { TableRow } from '@material-ui/core';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { TableCell } from '@material-ui/core';\r\nimport formatters from '../Grid/inputFormatter';\r\nimport InternalMenusToConvertDynamic from '../Root/menu/roles-menu/reportingMenu';\r\n\r\nconst drawerWidth = 240;\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:hover': {\r\n backgroundColor: theme.palette.action.hover,\r\n cursor: 'pointer'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n table: {\r\n maxWidth: 800\r\n },\r\n root: {\r\n display: 'flex'\r\n },\r\n appBar: {\r\n top: '60px',\r\n height: '45px',\r\n zIndex: theme.zIndex.drawer + 1,\r\n transition: theme.transitions.create(['width', 'margin'], {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen\r\n })\r\n },\r\n appBarShift: {\r\n marginLeft: drawerWidth,\r\n width: `calc(100% - ${drawerWidth}px)`,\r\n transition: theme.transitions.create(['width', 'margin'], {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.enteringScreen\r\n })\r\n },\r\n menuButton: {\r\n marginRight: 36\r\n },\r\n hide: {\r\n display: 'none'\r\n },\r\n drawer: {\r\n width: drawerWidth,\r\n flexShrink: 0,\r\n whiteSpace: 'nowrap'\r\n },\r\n drawerOpen: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n width: drawerWidth,\r\n transition: theme.transitions.create('width', {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.enteringScreen\r\n })\r\n },\r\n drawerClose: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n transition: theme.transitions.create('width', {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen\r\n }),\r\n overflowX: 'hidden',\r\n width: theme.spacing(0) + 1,\r\n [theme.breakpoints.up('sm')]: {\r\n width: theme.spacing(7) + 1\r\n }\r\n },\r\n toolbar: {\r\n [theme.breakpoints.up('sm')]: {\r\n width: theme.spacing(7) + 1\r\n },\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n padding: theme.spacing(0, 1),\r\n // necessary for content to be below app bar\r\n ...theme.mixins.toolbar\r\n },\r\n app_toolbar: {\r\n height: '45px',\r\n minHeight: '45px',\r\n display: 'flex',\r\n // justifyContent: 'space-between',\r\n padding: '0px 10px'\r\n },\r\n content: {\r\n flexGrow: 1,\r\n // padding: theme.spacing(3)\r\n overflow: 'auto',\r\n height: 'calc(100vh - 60px)'\r\n },\r\n drawerPaper: {\r\n top: '60px',\r\n '&::-webkit-scrollbar': {\r\n width: '0.4em'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n backgroundColor: 'rgba(0,0,0,.1)',\r\n outline: '1px solid slategrey'\r\n }\r\n },\r\n\r\n labelBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n textTransform: 'none',\r\n textDecoration: 'none',\r\n fontSize: '15px'\r\n },\r\n menuIcon: {\r\n minWidth: '40px'\r\n },\r\n logoutBtn: {\r\n display: 'inline-flex',\r\n VerticalAlign: 'text-bottom',\r\n BoxSizing: 'inherit',\r\n textAlign: 'center',\r\n alignItems: 'center',\r\n textDecoration: 'none',\r\n cursor: 'pointer',\r\n marginLeft: 1\r\n },\r\n search: {\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: fade(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: fade(theme.palette.common.white, 0.25)\r\n },\r\n marginRight: theme.spacing(2),\r\n marginLeft: 0,\r\n marginTop: (props) => (props.WindowWidths > 750 ? 4 : 0),\r\n width: '180px !important',\r\n maxHeight: '30px',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(3),\r\n width: 'auto'\r\n }\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 0.9),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n },\r\n inputRoot: {\r\n color: 'inherit'\r\n },\r\n inputInput: {\r\n padding: '4px 8px 8px 0px', //theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n transition: theme.transitions.create('width'),\r\n width: '100%',\r\n [theme.breakpoints.up('md')]: {\r\n width: '20ch'\r\n }\r\n },\r\n linknav: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n textDecoration: 'none',\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n fontSize: '15px'\r\n },\r\n activeLink: {\r\n '& .MuiTypography-root': {\r\n color: '#f50057 !important'\r\n }\r\n },\r\n itemText: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n '& span, & svg': {\r\n fontSize: '0.83rem',\r\n color: (props) => `${props.portalMenuBarTextColour}`\r\n }\r\n },\r\n ChevronRightIconBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`\r\n }\r\n}));\r\n\r\nexport default function MiniDrawer(props) {\r\n const { loggedIn, userRoles, displayName, lastLogin, showToast, portalSettings, showModal, showTopNavAndMenu, hideShowTopNav, reportingMenus, tempMenus } =\r\n useContext(AppContext);\r\n\r\n const classes = useStyles(portalSettings);\r\n\r\n const theme = useTheme();\r\n const [screenWidth, screenHeight] = useWindowSize();\r\n const [open, setOpen] = React.useState((localStorage.getItem('_sideBarIsOpen_') || '').toUpperCase() === 'TRUE' || false);\r\n const [state, setState] = React.useState({\r\n isError404: false,\r\n WorkflowJobs: []\r\n });\r\n const [searchAnchorEl, setSearchAnchorEl] = React.useState(null);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [openSign, setOpenSign] = React.useState(false);\r\n const isCommunicatorAllowed = AppStorage.getCommunicatorAllowed();\r\n const isInvoiceAllowed = AppStorage.getInvoiceAllowed();\r\n const isReportingAllowed = AppStorage.getReportingAllowed();\r\n const isWIPAllowed = AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled;\r\n let menuPermissionCounter = isCommunicatorAllowed + isInvoiceAllowed + isReportingAllowed + isWIPAllowed;\r\n let history = useHistory();\r\n const isReportingAgedMeasureAllowed = AppStorage.getReportingAgedMeasureAllowed();\r\n const isReportingPartsAllowed = AppStorage.getReportingPartsAllowed();\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n let isAdmin = userRoles.includes('admin');\r\n const isInternal = userRoles.includes('internal');\r\n const currentMenus = useMemo(() => {\r\n let menus = getMenuForRole(userRoles, loggedIn);\r\n // if (menuPermissionCounter > 1) {\r\n // let firstmenu = menus.find((p) => p.children.length > 0);\r\n // setState((st) => ({ ...st, [`${firstmenu.label}`]: true }));\r\n // }\r\n\r\n if (isWIPAllowed) {\r\n let dashMenus = [];\r\n if (tempMenus.menus.length > 0) {\r\n dashMenus = tempMenus.menus.map((x) => {\r\n return {\r\n label: `${x.label}`,\r\n path: `/dashboard/${x.id}`,\r\n exact: true,\r\n authType: 1,\r\n component: () => {\r\n return ;\r\n }\r\n };\r\n });\r\n }\r\n if (menuPermissionCounter == 1) {\r\n let isDash = menus.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[isDash].children = dashMenus;\r\n }\r\n } else {\r\n let iseWIPMenu = menus.findIndex((p) => p.label === 'eWIP');\r\n let isDash = menus[iseWIPMenu]?.children?.findIndex((p) => p?.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus?.menus?.length > 0 && isDash >= 0) {\r\n menus[iseWIPMenu].children[isDash].children = dashMenus;\r\n }\r\n }\r\n }\r\n if (isReportingAllowed) {\r\n let ReportsIndex = InternalMenusToConvertDynamic.findIndex((m) => m.label == 'Reports');\r\n let findAgedMeasureMenuIndex = InternalMenusToConvertDynamic[ReportsIndex]?.children?.findIndex((m) => m.label == 'Aged Measures');\r\n let tempAgedMeasureChildren = InternalMenusToConvertDynamic[ReportsIndex]?.children[findAgedMeasureMenuIndex]?.children;\r\n const agedMeasureMenus = [];\r\n const PartsMenus = [];\r\n\r\n if (reportingMenus.menus.length > 0) {\r\n let menusFromAPI = reportingMenus.menus;\r\n if (tempAgedMeasureChildren?.length > 0) {\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n for (let i = 0; i < tempAgedMeasureChildren?.length; i++) {\r\n if (tempAgedMeasureChildren[i].label === menusFromAPI[j].label) {\r\n agedMeasureMenus.push({\r\n ...tempAgedMeasureChildren[i],\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel\r\n });\r\n }\r\n }\r\n }\r\n }\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n if (menusFromAPI[j].parentMenu == 'Part') {\r\n PartsMenus.push({\r\n exact: true,\r\n authType: 1,\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel,\r\n component: () => {\r\n return ;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu > -1) {\r\n if (isReportingAgedMeasureAllowed || isReportingPartsAllowed) {\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu >= 0) {\r\n let agedMeasuresIndex = menus[isReportingMenu].children.findIndex((p) => p.label === 'Aged Measures');\r\n let partsIndex = menus[isReportingMenu].children.findIndex((p) => p.label === 'Parts');\r\n if (isReportingAgedMeasureAllowed && agedMeasuresIndex >= 0) {\r\n menus[isReportingMenu].children[agedMeasuresIndex].children = agedMeasureMenus.length > 0 ? agedMeasureMenus : [];\r\n }\r\n if (isReportingPartsAllowed && partsIndex >= 0) {\r\n menus[isReportingMenu].children[partsIndex].children = PartsMenus.length > 0 ? PartsMenus : [];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n return menus;\r\n }, [loggedIn, tempMenus, reportingMenus]);\r\n\r\n const handleDrawerOpen = (isFlag) => {\r\n if (isFlag == true) {\r\n localStorage.setItem('_sideBarIsOpen_', true);\r\n }\r\n setOpen(true);\r\n };\r\n\r\n const handleDrawerClose = (isFlag) => {\r\n if (isFlag == true) {\r\n localStorage.setItem('_sideBarIsOpen_', false);\r\n }\r\n\r\n setOpen(false);\r\n };\r\n\r\n const handleClick = (item) => {\r\n setState((st) => ({ ...st, [item]: !st[item] }));\r\n handleDrawerOpen();\r\n };\r\n\r\n const getWipDataById = async (wipNo) => {\r\n const res = await getDataByEwipNo(wipNo);\r\n if (res.success) {\r\n setState((st) => ({ ...st, WorkflowJobs: res.data.jobsDetails }));\r\n }\r\n };\r\n\r\n const handleChange = (event) => {\r\n if (event.target.value.length > 4) {\r\n getWipDataById(event.target.value);\r\n setSearchAnchorEl(event.currentTarget);\r\n } else {\r\n setSearchAnchorEl(null);\r\n }\r\n };\r\n\r\n const handleCloseSearch = (data) => {\r\n history.push(`/Job/${data.headerRecordID}/${data.workFlowID}`);\r\n setSearchAnchorEl(null);\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n };\r\n\r\n const handler = (children, isFiltered, isIcon) => {\r\n let currentNav = children;\r\n // isFiltered ? _.orderBy(children, [(c) => c.navigationMenuLabel.toLowerCase()], ['asc']) : children;\r\n return currentNav?.map((subOption, index) => {\r\n if (!subOption.children) {\r\n return (\r\n \r\n
\r\n 1200 ? handleDrawerOpen : !open ? handleDrawerOpen : handleDrawerClose}\r\n >\r\n {isIcon ? (\r\n \r\n {subOption.icon}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {!open && !isIcon ? : ''}\r\n {subOption.label}\r\n \r\n \r\n
\r\n
handleClick(subOption.label)} title={subOption.label}>\r\n {isIcon ? (\r\n \r\n {subOption.icon}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {!open && !isIcon ? : ''}\r\n {subOption.label}\r\n \r\n {state[subOption.label] ? : }\r\n \r\n \r\n
\r\n {handler(subOption.children, true, false)}\r\n \r\n
\r\n {showTopNavAndMenu && (\r\n
\r\n \r\n \r\n \r\n {loggedIn && (\r\n handleDrawerOpen(true)}\r\n edge=\"start\"\r\n style={{ padding: '0px', marginLeft: '7px' }}\r\n className={clsx(classes.menuButton, {\r\n [classes.hide]: open\r\n })}\r\n >\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {loggedIn && !isAdmin && isWIPAllowed && (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n Customer Name\r\n \r\n \r\n Workflow\r\n \r\n \r\n Return Reason\r\n \r\n \r\n Branch\r\n \r\n \r\n Due Date In\r\n \r\n \r\n \r\n \r\n {state.WorkflowJobs.map((w, index) => {\r\n return (\r\n handleCloseSearch(w)}>\r\n \r\n {w.wipNumber}
\r\n \r\n \r\n {w.regNumber}
\r\n \r\n \r\n {w.customer}
\r\n \r\n \r\n {w.workflow}
\r\n \r\n \r\n {w.returnReason}
\r\n \r\n \r\n {w.branch}
\r\n \r\n \r\n {formatters.DateTimeFormatter(w.dateDueIn)}
\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {loggedIn ? (\r\n
\r\n {/*
\r\n {isTopNav ? (\r\n hideShowTopNav(false)}\r\n toolTipTitle=\"Hide Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n ) : (\r\n hideShowTopNav(true)}\r\n toolTipTitle=\"Show Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n )}\r\n
*/}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {displayName}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!isAdmin && (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n
\r\n
Login\r\n \r\n )}\r\n
\r\n handleDrawerClose(true)} className={classes.ChevronRightIconBtn}>\r\n {theme.direction === 'rtl' ? : }\r\n \r\n
\r\n \r\n \r\n {handler(\r\n currentMenus.filter((m) => !m.hidden),\r\n false,\r\n true\r\n )}\r\n
\r\n \r\n )}\r\n \r\n {showTopNavAndMenu && }\r\n {/* 775 ? 'none' : 'block',\r\n marginTop: -15\r\n // backgroundColor: portalSettings.portalMenuBarBackgroundColour,\r\n // color: portalSettings.portalMenuBarTextColour\r\n }}\r\n >\r\n \r\n */}\r\n\r\n \r\n {currentMenus.map((m, i) => {\r\n return m.children ? (\r\n m.children.map((a) => {\r\n return a.children ? (\r\n a.children.map((b) => {\r\n const [url, params] = b.path.split('?');\r\n\r\n return ;\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {showTopNavAndMenu && (\r\n
\r\n \r\n 
\r\n \r\n {[\r\n { text: 'Call US', value: portalSettings.portalSettingCallUs, icon: PhoneIphone, link: 'tel:' + portalSettings.callUs },\r\n { text: 'Opening Time', value: portalSettings.portalSettingOpeningTime, icon: AccessTime },\r\n {\r\n text: 'Email US',\r\n value: portalSettings.portalSettingEmailUs,\r\n icon: Email,\r\n link: 'mailto:' + portalSettings.portalSettingEmailUs + '?subject=eWIP Query',\r\n isDynamicDisplay: true\r\n }\r\n ].map((c, i) => (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
750 ? 30 : 0 }}>\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","import React, { useLayoutEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport langLabel from '../../../Lang.Labels.json';\r\n\r\nexport const Customi18 = () => {\r\n const { t, i18n } = useTranslation();\r\n // const setLanguage = (langCode) => {\r\n // i18n.changeLanguage(langCode || 'en');\r\n // };\r\n\r\n return { t, i18n, langLabel };\r\n};\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import i18n from 'i18next';\r\nimport Backend from 'i18next-http-backend';\r\nimport LanguageDetector from 'i18next-browser-languagedetector';\r\nimport { initReactI18next } from 'react-i18next';\r\n// import temp from '/locales/en/common.json';\r\n\r\nlet lngs = ['en', 'pl'];\r\n// array will have exact name of files inside public/locales/[lang code]\r\nlet localesFiles = ['common', 'navbar'];\r\n\r\n// resource will be populated by above arrays - lang and locales files.\r\nconst resources = {};\r\n\r\nlngs.forEach((lng) => {\r\n resources[lng] = {};\r\n Promise.all(\r\n localesFiles.map((fileName) => {\r\n return fetch(`/locales/${lng}/${fileName}.json`)\r\n .then((resp) => resp.json())\r\n .then((resJson) => [fileName, resJson]);\r\n })\r\n ).then((fileNameJsonList) => {\r\n fileNameJsonList.forEach((nmRes) => {\r\n let resJson = nmRes[1];\r\n let tempObj = {};\r\n Object.keys(resJson).forEach((k) => {\r\n tempObj[k.replace(/\\s+/, '')] = resJson[k];\r\n });\r\n resources[lng][nmRes[0]] = tempObj;\r\n });\r\n });\r\n});\r\n\r\ni18n\r\n // load translation using http -> see /public/locales\r\n // learn more: https://github.com/i18next/i18next-http-backend\r\n .use(Backend)\r\n // detect user language\r\n // learn more: https://github.com/i18next/i18next-browser-languageDetector\r\n .use(LanguageDetector)\r\n // pass the i18n instance to react-i18next.\r\n .use(initReactI18next)\r\n // init i18next\r\n // for all options read: https://www.i18next.com/overview/configuration-options\r\n .init({\r\n resources,\r\n\r\n // Set default namespace\r\n // defaultNS: 'common',\r\n\r\n lng: 'en',\r\n // debug: true,\r\n // whitelist: Languages,\r\n interpolation: {\r\n escapeValue: false // not needed for react as it escapes by default\r\n }\r\n });\r\n\r\nexport default i18n;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './App/index.css';\r\nimport App from './App/App.jsx';\r\nimport reportWebVitals from './App/reportWebVitals';\r\nimport './App/i18n';\r\nimport PackageJson from '../package.json';\r\nimport { AppStorage } from './Core/Service/storage-service';\r\n\r\nconst DevApp = () => {\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst ProdApp = () => {\r\n return ;\r\n};\r\n\r\nwindow._ENV_ = Object.assign(window._ENV_ || {}, { app_version: PackageJson.version });\r\nif (AppStorage.isLoggedIn() && window._ENV_.app_version !== AppStorage.getLoggedInUIVersion()) {\r\n AppStorage.performLogout();\r\n}\r\n\r\nReactDOM.render(process.env.NODE_ENV === 'production' ? : , document.getElementById('root'));\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}