\r\n Signature \r\n \r\n \r\n \r\n
\r\n {state.signAvailable ? (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n clearOnResize={false}\r\n />\r\n
\r\n )}\r\n \r\n \r\n 404 \r\n Page not found. \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\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 Home;\r\n","import React, { useState } from 'react';\r\nimport Button from '@material-ui/core/Button';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { tryLogin } from '../../../Core/Services/LoginService';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport { useLoader } from '../../../Core/Hooks/useLoader';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { InputText, InputPassword } from '../../../Core/Controls';\r\n\r\nlet defaultState = {\r\n name: '',\r\n password: ''\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: theme.spacing(3),\r\n '& > *': {\r\n margin: theme.spacing(1, 0)\r\n },\r\n '& > button': {\r\n margin: theme.spacing(3, 0, 2)\r\n }\r\n }\r\n}));\r\n\r\nlet LoginComp = (props) => {\r\n const classes = useStyles();\r\n const { showLoader, hideLoader } = useLoader();\r\n const { showToastWarning, showToastError } = useToast();\r\n let { isLoggedIn } = useLoginInfo();\r\n let [model, setState] = useState(defaultState);\r\n\r\n let onFieldChange = e => {\r\n let obj = {\r\n [e.target.name]: e.target.value\r\n }\r\n setState(st => ({ ...st, ...obj }));\r\n }\r\n\r\n function handleEnter(e) {\r\n if (e.key === 'Enter') {\r\n loginUser();\r\n }\r\n }\r\n\r\n let loginUser = async () => {\r\n if (model.name && model.password) {\r\n showLoader();\r\n let res = await tryLogin(model);\r\n hideLoader();\r\n if (res.success) {\r\n props.onSuccess && props.onSuccess();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n } else {\r\n showToastWarning('Name and Password is required.');\r\n }\r\n }\r\n\r\n return <>\r\n {!isLoggedIn &&\r\n\r\n \r\n }\r\n \r\n};\r\n\r\nexport default LoginComp;","import React from 'react';\r\nimport LoginComp from './LoginComp';\r\nimport { Container, Grid, Link } from '@material-ui/core';\r\nimport { CommonModals } from '../../../Core/App/PageLevel/AppContextProvider';\r\nimport { useDialog } from '../../../Core/Hooks/useDialog';\r\nimport DialogComp from \"../../../Core/Dialog/DialogComp\";\r\n\r\n\r\n// const useStyles = makeStyles((theme) => ({\r\n// root: {\r\n// '& > *': {\r\n// margin: theme.spacing(1, 0)\r\n// },\r\n// '& > button': {\r\n// margin: theme.spacing(3, 0, 2)\r\n// }\r\n// }\r\n// }));\r\n\r\nlet Login = props => {\r\n const { showDialog } = useDialog();\r\n\r\n\r\n const onSuccess = () => {\r\n props.history.push(\"/\");\r\n window.location.reload();\r\n }\r\n const closeModal = () => {\r\n props.history.push(\"/\");\r\n }\r\n const onLink = () => {\r\n props.history.push(\"/\");\r\n showDialog(CommonModals.ForgotPassword)\r\n }\r\n return <>\r\n \r\n
\r\n From Notes
;\r\n};\r\nconst Dashboard = () => {\r\n returnFrom Dashboard
;\r\n};\r\nconst List = [\r\n {\r\n header: 'Dashboard',\r\n accordianBody: Dashboard()\r\n },\r\n {\r\n header: 'Notes',\r\n accordianBody: Notes()\r\n }\r\n];\r\n\r\nconst options = [\r\n { id: 1, name: 'Button1' },\r\n { id: 2, name: 'Button2' },\r\n { id: 3, name: 'Button3' }\r\n];\r\n\r\nconst HelpComponent = (props) => {\r\n const [state, setState] = useState({ gridRow: [], showLoader: true, selectedBtn: null });\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setState((st) => ({\r\n ...st,\r\n showLoader: false,\r\n gridRow: dummyData\r\n }));\r\n }, 1000);\r\n }, []);\r\n\r\n const Tab1 = () => {\r\n returnFrom Tab1
;\r\n };\r\n const Tab2 = () => {\r\n returnFrom Tab2
;\r\n };\r\n const tabs = [\r\n {\r\n label: 'Tab1',\r\n body: Tab1()\r\n },\r\n {\r\n label: 'Tab2',\r\n body: Tab2()\r\n }\r\n ];\r\n const onBtnSelected = (o) => {\r\n setState((dt) => ({\r\n ...dt,\r\n ...o\r\n }));\r\n };\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n Text Box: \r\n \r\n Password field: \r\n \r\n \r\n \r\n \r\n \r\n Primary Checkbox: \r\n \r\n Secondary Checkbox with Force Editable: \r\n \r\n \r\n \r\n \r\n \r\n Separate Button for Edit Page (button in edit with ID = 1, second record in grid)\r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n {state.selectedBtn}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HelpComponent;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { Button, FormHelperText, InputLabel } from \"@material-ui/core\";\r\nimport { InputText, SecondaryCheckbox, SelectBox, SecondaryButton, MandatoryField, SimpleField } from \"../../../../Core/Controls\";\r\nimport { getModelById, postModelData, getModelDropdownData } from \"../../../../Core/Services/InternalUser/modelService\";\r\nimport { useToast } from \"../../../../Core/Hooks/useToast\";\r\nimport { useLoader } from \"../../../../Core/Hooks/useLoader\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst DialogStyle = {\r\n dialogInput: { width: \"100%\" },\r\n mandatoryLabel: { color: \"red\" },\r\n};\r\n\r\nconst AddEditModel = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { showLoader, hideLoader } = useLoader();\r\n\r\n const [state, setState] = useState({\r\n modelActive: true,\r\n modelID: null,\r\n modelMargin: \"\",\r\n makeList: [],\r\n vehicleTypeList: [],\r\n modelWarrantyGroupCode: null,\r\n errors: {},\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.modelId) {\r\n showLoader();\r\n let res = await getModelById(props.modelId);\r\n hideLoader();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n makeDescription: res.data.makeDescription,\r\n modelActive: res.data.modelActive,\r\n modelCode: res.data.modelCode,\r\n modelDescription: res.data.modelDescription,\r\n modelID: res.data.modelID,\r\n modelMakeID: res.data.modelMakeID,\r\n modelMargin: res.data.modelMargin,\r\n modelPhoto: res.data.modelPhoto,\r\n modelWarrantyGroupCode: res.data.modelWarrantyGroupCode,\r\n vehicleTypeDescription: res.data.vehicleTypeDescription,\r\n modelVehicleTypeID: res.data.modelVehicleTypeID,\r\n }));\r\n }\r\n }\r\n let dropDwonRes = await getModelDropdownData();\r\n if (dropDwonRes.success) {\r\n const Makes = dropDwonRes.data.makes.map((w) => ({\r\n id: w.makeID,\r\n name: w.makeDescription,\r\n }));\r\n const vehicleType = dropDwonRes.data.vehicleTypes.map((w) => ({\r\n id: w.vehicleTypeID,\r\n name: w.vehicleTypeDescription,\r\n }));\r\n setState((st) => ({ ...st, makeList: Makes, vehicleTypeList: vehicleType }));\r\n }\r\n }, []);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n let imagehandler = (event) => {\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n const { result } = e.target;\r\n setState((st) => ({ ...st, modelPhoto: result }));\r\n };\r\n reader.readAsDataURL(event.target.files[0]);\r\n };\r\n\r\n const clearImage = () => {\r\n if (state.modelPhoto) {\r\n setState((st) => ({ ...st, modelPhoto: null }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { modelCode, modelDescription, modelMakeID, modelMargin, modelVehicleTypeID } = state;\r\n const decimalPattern = /^\\d+(\\.\\d{1,2})?$/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!modelMakeID) {\r\n errors.modelMakeID = \"This field is required\";\r\n formIsValid = false;\r\n }\r\n if (!modelVehicleTypeID) {\r\n errors.modelVehicleTypeID = \"This field is required\";\r\n formIsValid = false;\r\n }\r\n if (!modelCode) {\r\n errors.modelCode = \"This field is required\";\r\n formIsValid = false;\r\n }\r\n if (!modelDescription) {\r\n errors.modelDescription = \"This field is required\";\r\n formIsValid = false;\r\n }\r\n if (!modelMargin.length && !decimalPattern.test(modelMargin)) {\r\n errors.modelMargin = `This field accepts only decimal value \"1.0\"`;\r\n formIsValid = false;\r\n }\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const selectHandler = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => ({ ...state, [name]: checked }));\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n let formData = {\r\n modelID: state.modelID,\r\n modelCode: state.modelCode,\r\n modelDescription: state.modelDescription,\r\n modelMakeID: state.modelMakeID,\r\n modelPhoto: state.modelPhoto,\r\n modelVehicleTypeID: state.modelVehicleTypeID,\r\n modelWarrantyGroupCode: state.modelWarrantyGroupCode,\r\n modelMargin: state.modelMargin,\r\n modelActive: state.modelActive,\r\n };\r\n let res = await postModelData(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n ) : (\r\n No Image Found
\r\n );\r\n\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n};\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'modelCode', name: 'Code' },\r\n { key: 'modelDescription', name: 'Description' },\r\n { key: 'vehicleTypeDescription', name: 'Type' },\r\n { key: 'makeDescription', name: 'Make' },\r\n { key: 'modelPhoto', name: 'Logo', formatter: renderImage, filterable: 'no' },\r\n { key: 'modelWarrantyGroupCode', name: 'Warranty Group' },\r\n { key: 'modelMargin', name: 'Margin', headerRenderer: formatters.ColumnHeaderAlignRight, formatter: formatters.ColumnTextAlignRight }\r\n];\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', active: true },\r\n { name: 'Models', active: true }\r\n];\r\n\r\nconst ModelScreen = () => {\r\n const [state, setState] = useState({ modalToggle: false, userId: null, List: [], showLoader: true });\r\n\r\n useEffect(async () => {\r\n pullModel();\r\n }, []);\r\n\r\n const pullModel = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n \r\n handleUpdate(row)} toolTipTitle=\"Edit Model\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n setState((state) => ({ ...state, userId: params?.modelID, modalToggle: true }));\r\n };\r\n\r\n const closeModelHandler = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullModel();\r\n };\r\n\r\n const title = state.userId ? 'Update Model' : 'Add Model';\r\n\r\n return (\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={'models'}\r\n btnTitle=\"Add Model\"\r\n onBtnClick={()=>handleUpdate(null)}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.modalToggle ? (\r\n closeModelHandler(false)} maxWidth=\"lg\" overflow=\"auto\">\r\n closeModelHandler(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ModelScreen;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllMake = async () => {\r\n let res = await getWithAuth(`makes`);\r\n return res;\r\n};\r\n\r\nexport const getMakeById = async (id) => {\r\n let res = await getWithAuth(`makes/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postMakeData = async (data) => {\r\n let res = await postWithAuth(`makes`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Button, FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { SecondaryCheckbox, InputText, SecondaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getMakeById, postMakeData } from '../../../../Core/Services/InternalUser/makeService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\n\r\nconst DialogStyle = {\r\n dialogInput: { width: '100%' },\r\n mandatoryLabel: { color: 'red' }\r\n};\r\n\r\nconst VehicleManufacturerModel = (props) => {\r\n const [state, setState] = useState({ makeDescription: '', makeActive: true, makeLogo: '', makeID: null, errors: {} });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.makeID) {\r\n let res = await getMakeById(props.makeID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n makeID: res.data.makeID,\r\n makeDescription: res.data.makeDescription,\r\n makeActive: res.data.makeActive,\r\n makeLogo: res.data.makeLogo\r\n }));\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((state) => ({ ...state, [name]: value }));\r\n };\r\n\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n let handleImage = (event) => {\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n const { result } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, makeLogo: result };\r\n return nst;\r\n });\r\n };\r\n reader.readAsDataURL(event.target.files[0]);\r\n };\r\n\r\n const clearImage = () => {\r\n if (state.makeLogo) {\r\n setState((st) => ({ ...st, makeLogo: null }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { makeDescription } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!makeDescription) {\r\n errors.makeDescription = 'Description is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const makeData = {\r\n makeID: state.makeID,\r\n makeDescription: state.makeDescription,\r\n makeLogo: state.makeLogo,\r\n makeActive: state.makeActive\r\n };\r\n let res = await postMakeData(makeData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n 
\r\n
\r\n ) : (\r\n No Image Found
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n};\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'makeDescription', name: 'Description' },\r\n { key: 'makeLogo', name: 'Logo', formatter: makeLogoRender, width: '25%', filterable: 'no' },\r\n { key: 'makeActive', name: 'Is Active ?', formatter: (e) => (e.row.makeActive ? 'Yes' : 'No'), width: '20%' }\r\n];\r\n\r\nconst VehicleManufacturer = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n uservalue: null,\r\n makeList: [],\r\n showLoader: true\r\n });\r\n\r\n useEffect(async () => {\r\n pullMakeData();\r\n }, []);\r\n\r\n const pullMakeData = async () => {\r\n setState((state) => ({\r\n ...state,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const actionButton = (data, row) => {\r\n return (\r\n \r\n handleMakeUpdate(row)} toolTipTitle=\"Edit Make\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const title = state.userId ? 'Update Make' : 'Add Make';\r\n\r\n const handleMakeUpdate = (params) => {\r\n setState((state) => ({ ...state, modalToggle: true, userId: params?.makeID }));\r\n };\r\n\r\n const closeMakeDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullMakeData();\r\n };\r\n\r\n return (\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={'makes'}\r\n btnTitle=\"Add Make\"\r\n onBtnClick={() => handleMakeUpdate(null)}\r\n isReload={state.isReload}\r\n />\r\n {/* closeMakeDialog(false)}>\r\n closeMakeDialog(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleManufacturer;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllVmrsSubCategorys = async () => {\r\n let res = await getWithAuth(`VMRSSubCategory`);\r\n return res;\r\n};\r\n\r\nexport const getVmrsSubCategoryById = async (id) => {\r\n let res = await getWithAuth(`VMRSSubCategory/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVmrsSubCategoryData = async (data) => {\r\n let res = await postWithAuth(`VMRSSubCategory`, data);\r\n return res;\r\n};\r\n","import { getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllVmrsCategorys = async () => {\r\n let res = await getWithAuth(`VMRSCategory`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { SecondaryButton, MandatoryField, SingleSelect } from '../../../../../Core/Controls';\r\nimport { getVmrsSubCategoryById, postVmrsSubCategoryData } from '../../../../../Core/Services/InternalUser/VMRS/vmrsSubCategoryService';\r\nimport { getAllVmrsCategorys } from '../../../../../Core/Services/InternalUser/VMRS/vmrsCategoryService';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { useLoader } from '../../../../../Core/Hooks/useLoader';\r\nimport '../../../../commonStyle.scss';\r\n\r\nconst DialogStyle = {\r\n dialogInput: { width: '100%' },\r\n mandatoryLabel: { color: 'red' }\r\n};\r\n\r\nconst AddEditVmrsModal = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { showLoader, hideLoader } = useLoader();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [state, setState] = useState({\r\n vmrsSubCategoryID: null,\r\n vmrsCategoryValue: '',\r\n vmrsSubCategoryDescription: '',\r\n vmrsTaskCodeID: '',\r\n vmrsCategoryList: [],\r\n errors: {}\r\n });\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n vmrsCategoryValueID: null\r\n });\r\n useEffect(async () => {\r\n let resCategoryDropDown = await getAllVmrsCategorys();\r\n setState((st) => ({\r\n ...st,\r\n vmrsCategoryList: resCategoryDropDown.data.list.map((w) => ({\r\n id: w.vmrsCategoryID,\r\n name: w.vmrsDescription\r\n }))\r\n }));\r\n if (props.subCategoryId) {\r\n let res = await getVmrsSubCategoryById(props.subCategoryId);\r\n setState((st) => ({\r\n ...st,\r\n vmrsSubCategoryDescription: res.data.vmrsSubCategoryDescription,\r\n vmrsSubCategoryID: res.data.vmrsSubCategoryID,\r\n vmrsTaskCodeID: res.data.vmrsTaskCodeID,\r\n vmrsCategoryValue: res.data.vmrsCategory,\r\n vmrsDescription: res.data.vmrsDescription\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let vmrsCategoryValueID = null;\r\n if (state.vmrsCategoryValue) {\r\n vmrsCategoryValueID = state.vmrsCategoryList.find(({ id }) => id === state.vmrsCategoryValue);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n vmrsCategoryValueID: vmrsCategoryValueID\r\n }));\r\n }, [state.vmrsCategoryValue]);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const validations = () => {\r\n const { vmrsSubCategoryDescription, vmrsTaskCodeID } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!/[^\\s]/.test(vmrsSubCategoryDescription)) {\r\n errors.vmrsSubCategoryDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(vmrsTaskCodeID)) {\r\n errors.vmrsTaskCodeID = 'This field is required';\r\n formIsValid = false;\r\n } else if (!/^[0-9]*$/.test(vmrsTaskCodeID)) {\r\n errors.vmrsTaskCodeID = 'This field accepts number 1 - 0';\r\n formIsValid = false;\r\n }\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const formData = {\r\n vmrsSubCategoryDescription: state.vmrsSubCategoryDescription,\r\n vmrsSubCategoryID: state.vmrsSubCategoryID,\r\n vmrsTaskCodeID: state.vmrsTaskCodeID,\r\n vmrsCategory: tempOptions.vmrsCategoryValueID?.id\r\n };\r\n setBtnLoader(true);\r\n let res = await postVmrsSubCategoryData(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n handleUpdate(row)} toolTipTitle=\"Edit VMRS SubCategory\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = [\r\n { key: 'action', name: 'Action', width: '5%', formatter: renderEdit },\r\n { key: 'vmrsSubCategoryDescription', name: 'Description' },\r\n { key: 'vmrsDescription', name: 'VMRS Category' },\r\n {\r\n key: 'vmrsTaskCodeID',\r\n name: 'Task Code',\r\n headerRenderer: formatters.ColumnHeaderAlignRight,\r\n formatter: formatters.ColumnTextAlignRight,\r\n width: '15%'\r\n }\r\n ];\r\n\r\n const handleUpdate = (params) => {\r\n setState((state) => ({ ...state, subCategoryId: params?.vmrsSubCategoryID, modalToggle: true }));\r\n };\r\n\r\n const closeModalHandler = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullVmrsSubCategory();\r\n };\r\n\r\n const title = state.subCategoryId ? 'Update VMRS Sub Category' : 'Add VMRS Sub Category';\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add VMRS Sub Category\"\r\n onBtnClick={() => handleUpdate(null)}\r\n />\r\n {state.modalToggle ? (\r\n closeModalHandler(false)}>\r\n closeModalHandler(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VmrsSubCategoryScreen;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllVMRSCategory = async () => {\r\n let res = await getWithAuth(`VMRSCategory`);\r\n return res;\r\n};\r\n\r\nexport const getVMRSCategoryById = async (id) => {\r\n let res = await getWithAuth(`VMRSCategory/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVMRSCategoryData = async (data) => {\r\n let res = await postWithAuth(`VMRSCategory`, data);\r\n return res;\r\n};\r\n\r\nexport const getVmrsCategoryDropDown = async () => {\r\n let res = await getWithAuth(`VMRSCategory/screenDropdowns`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel } from '@material-ui/core';\r\nimport { SecondaryButton, MandatoryField, SimpleField, SingleSelect } from '../../../../../Core/Controls';\r\nimport { getVMRSCategoryById, getVmrsCategoryDropDown, postVMRSCategoryData } from '../../../../../Core/Services/InternalUser/vmrsCategoryService';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../../../commonStyle.scss';\r\n\r\nconst VmrsCategoryModal = (props) => {\r\n const [state, setState] = useState({\r\n vmrsCustomerIDValue: '',\r\n vmrsVehicleTypeIDValue: '',\r\n vmrsDescription: '',\r\n customerCodeList: [],\r\n vehicleTypeList: [],\r\n vmrsCategoryID: null,\r\n errors: {}\r\n });\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n custIDValue: null,\r\n vehicleTypeIDValue: null\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let vmrsDropDowns = await getVmrsCategoryDropDown();\r\n if (vmrsDropDowns.success) {\r\n const customerCodeList = vmrsDropDowns.data.customers.map((item) => ({\r\n id: item.customerId,\r\n name: item.customerCompanyName\r\n }));\r\n const vehicle_type = vmrsDropDowns.data.vehicleTypes.map((item) => ({\r\n id: item.vehicleTypeID,\r\n name: item.vehicleTypeDescription\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n customerCodeList: customerCodeList,\r\n vehicleTypeList: vehicle_type\r\n }));\r\n }\r\n if (props.vmrsCategoryID) {\r\n let res = await getVMRSCategoryById(props.vmrsCategoryID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n vmrsCategoryID: res.data.vmrsCategoryID,\r\n vmrsDescription: res.data.vmrsDescription,\r\n nominalCode: res.data.nominalCode,\r\n vmrsCustomerIDValue: res.data.vmrsCustomerID,\r\n vmrsVehicleTypeIDValue: res.data.vmrsVehicleTypeID,\r\n vmrsType: res.data.vmrsType\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n let customerId = null;\r\n let vehicleId = null;\r\n if (state.vmrsCustomerIDValue) {\r\n customerId = state.customerCodeList.find(({ id }) => id === state.vmrsCustomerIDValue);\r\n }\r\n if (state.vmrsVehicleTypeIDValue) {\r\n vehicleId = state.vehicleTypeList.find(({ id }) => id === state.vmrsVehicleTypeIDValue);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n custIDValue: customerId,\r\n vehicleTypeIDValue: vehicleId\r\n }));\r\n }, [state.vmrsCustomerIDValue, state.vmrsVehicleTypeIDValue]);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const validations = () => {\r\n const { vmrsDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(vmrsDescription)) {\r\n errors.vmrsDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitVmrsCategory = async () => {\r\n if (validations()) {\r\n const vmrsCategoryData = {\r\n vmrsCategoryID: state.vmrsCategoryID,\r\n vmrsDescription: state.vmrsDescription,\r\n nominalCode: state.nominalCode,\r\n vmrsCustomerID: tempOptions.custIDValue?.id,\r\n vmrsVehicleTypeID: tempOptions.vehicleTypeIDValue?.id,\r\n vmrsType: state.vmrsType\r\n };\r\n setBtnLoader(true);\r\n let res = await postVMRSCategoryData(vmrsCategoryData);\r\n if (res.success) {\r\n showToastSuccess('VMRS Category Added Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleMakeUpdate(row)} toolTipTitle=\"Edit VMRS Category\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = editActionButton;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.userID ? 'Update VMRS Category' : 'Add VMRS Category';\r\n\r\n const closeMakeDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullMakeData();\r\n };\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add VMRS Category\"\r\n onBtnClick={() => handleMakeUpdate(null)}\r\n />\r\n {state.modalToggle ? (\r\n closeMakeDialog(false)} maxWidth=\"md\">\r\n closeMakeDialog(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VmrsCategory;\r\n","import { Button, FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useState } from \"react\";\r\nimport DialogComp from \"../../../../Core//Dialog/DialogComp\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst LicenseTypeDialog = (props) => {\r\n const [state, setState] = useState({\r\n inputValue: \"\",\r\n blank: false,\r\n id: null,\r\n });\r\n const validate = () => {\r\n if (state.inputValue === \"\") {\r\n setState((st) => ({ ...st, blank: true }));\r\n } else {\r\n props.childValue.btnText !== \"ADD\" ? props.updateRowData({ ID: state.id, text: state.inputValue }) : props.addRowData(state.inputValue);\r\n props.onClose();\r\n }\r\n };\r\n\r\n return (\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={getUrl}\r\n btnTitle=\"Add Driver License Type\"\r\n onBtnClick={addBtnClicked}\r\n isReload={value.isReload}\r\n />\r\n\r\n {value.isOpen ? (\r\n
\r\n );\r\n};\r\nexport default LicenseType;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllProductGroups = async () => {\r\n let res = await getWithAuth(`productgroups`);\r\n return res;\r\n};\r\n\r\nexport const getProductGroupsById = async (id) => {\r\n let res = await getWithAuth(`productgroups/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postProductGroupsData = async (data) => {\r\n let res = await postWithAuth(`productgroups`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { InputLabel, FormHelperText } from \"@material-ui/core\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport { getProductGroupsById, postProductGroupsData } from \"../../../../Core/Services/InternalUser/productGroupService\";\r\nimport { useToast } from \"../../../../Core/Hooks/useToast\";\r\nimport \"../../.././commonStyle.scss\";\r\n\r\nfunction ProductGroupModal(props) {\r\n const [state, setState] = useState({\r\n productGroupID: null,\r\n productGroupDescription: \"\",\r\n productGroupMaxMargin: \"\",\r\n productGroupMinMargin: \"\",\r\n productGroupCode: \"\",\r\n productGroupLeadTime: \"\",\r\n errors: {},\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.productGroupID) {\r\n let res = await getProductGroupsById(props.productGroupID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n productGroupID: res.data.productGroupID,\r\n productGroupDescription: res.data.productGroupDescription,\r\n productGroupMaxMargin: res.data.productGroupMaxMargin,\r\n productGroupMinMargin: res.data.productGroupMinMargin,\r\n productGroupCode: res.data.productGroupCode,\r\n productGroupLeadTime: res.data.productGroupLeadTime,\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { productGroupDescription, productGroupMaxMargin, productGroupMinMargin, productGroupCode, productGroupLeadTime } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(productGroupDescription)) {\r\n errors.productGroupDescription = \"Description is required\";\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(productGroupMaxMargin)) {\r\n errors.productGroupMaxMargin = \"Max margin is required\";\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(productGroupMinMargin)) {\r\n errors.productGroupMinMargin = \"Min margin is required\";\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(productGroupCode)) {\r\n errors.productGroupCode = \"Code is required\";\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(productGroupLeadTime)) {\r\n errors.productGroupLeadTime = \"Lead time is required\";\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const productGroupData = {\r\n productGroupID: state.productGroupID,\r\n productGroupDescription: state.productGroupDescription,\r\n productGroupMaxMargin: state.productGroupMaxMargin,\r\n productGroupMinMargin: state.productGroupMinMargin,\r\n productGroupCode: state.productGroupCode,\r\n productGroupLeadTime: state.productGroupLeadTime,\r\n };\r\n let res = await postProductGroupsData(productGroupData);\r\n if (res.success) {\r\n showToastSuccess(\"Product groups added sucessfully\");\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleProductUpdate(data.row)} toolTipTitle=\"Edit Product Group\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = editActionButton;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.productGroupID ? 'Update Product Group' : 'Add Product Group';\r\n\r\n const closeProductGroupModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullProdcutGroups();\r\n };\r\n\r\n return (\r\n \r\n closeProductGroupModal(false)} maxWidth=\"md\">\r\n closeProductGroupModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default ProductGroup;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllSlippage = async () => {\r\n let res = await getWithAuth(`SlippageReasons`);\r\n return res;\r\n};\r\n\r\nexport const getSlippageById = async (id) => {\r\n let res = await getWithAuth(`SlippageReasons/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postSlippageData = async (data) => {\r\n let res = await postWithAuth(`SlippageReasons`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getSlippageById, postSlippageData } from '../../../../Core/Services/InternalUser/slippageService';\r\nimport { useToast } from '../../../.././Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction SlippageModal(props) {\r\n const [state, setState] = useState({\r\n slippageID: null,\r\n slippageReasonDescription: '',\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n useEffect(async () => {\r\n if (props.slippageID) {\r\n let res = await getSlippageById(props.slippageID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n slippageID: res.data.slippageReasonID,\r\n slippageReasonDescription: res.data.slippageReasonDescription\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { slippageReasonDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(slippageReasonDescription)) {\r\n errors.slippageReasonDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const slippageData = {\r\n slippageReasonDescription: state.slippageReasonDescription,\r\n slippageReasonID: state.slippageID\r\n };\r\n let res = await postSlippageData(slippageData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleSlippageUpdate(row)} toolTipTitle=\"Edit Slippage Reason\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = editActionButton;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.slippageReasonId ? 'Update Slippage Reasons' : 'Add Slippage Reasons';\r\n\r\n const closeSlippageModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullSlippage();\r\n };\r\n const urlState = 'SlippageReasons';\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Slippage Reason\"\r\n onBtnClick={() => handleSlippageUpdate(null)}\r\n />\r\n {state.open ? (\r\n closeSlippageModal(false)} maxWidth=\"md\">\r\n closeSlippageModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default Slippage;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllCustomer = async () => {\r\n let res = await getWithAuth('customers');\r\n return res;\r\n};\r\n\r\nexport const getCustomerById = async (Id) => {\r\n let res = await getWithAuth(`customers/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const addCustomeres = async (data, tempOptions, invoice) => {\r\n let res = await postWithAuth('customers', {\r\n customerID: null,\r\n customerShortName: data.customerShortName,\r\n customerCompanyName: data.customerCompanyName,\r\n customerAddress1: data.customerAddress1,\r\n customerAddress2: data.customerAddress2,\r\n customerCity: data.customerCity,\r\n customerCounty: data.customerCounty,\r\n customerPostCode: data.customerPostCode,\r\n // customerCountryCode: data.customerCountryCode,\r\n customerTelephone: data.customerTelephone,\r\n customerEmail: data.customerEmail,\r\n customerWebSite: data.customerWebSite,\r\n // customerActive: data.customerActive,\r\n customerStatusID: tempOptions.customerStatusIDValue?.id,\r\n customerAccountManagerID: tempOptions.customerAccountManagerName?.id,\r\n // customerOperationsManagerID: data.customerOperationsManagerID,\r\n customerOperationsManagerName: data.customerOperationsManagerName,\r\n customerOperationsManagerPhone: data.customerOperationsManagerPhone,\r\n customerOperationsManagerEmail: data.customerOperationsManagerEmail,\r\n customerFinanceDirectorName: data.customerFinanceDirectorName,\r\n customerFinanceDirectorPhone: data.customerFinanceDirectorPhone,\r\n customerFinanceDirectorEmail: data.customerFinanceDirectorEmail,\r\n // customerCurrencyID: tempOptions.customerCurrencyIDValue?.id,\r\n customerRechargeMarkup: data.customerRechargeMarkup,\r\n customerISOWeekStartDay: tempOptions.ISODaysValue?.id,\r\n customerSendEmailNotifications: data.customerSendEmailNotifications || false,\r\n // customerSendVehicleNotification: data.customerSendVehicleNotification || false,\r\n // customerVehicleNotificationEmail: data.customerVehicleNotificationEmail,\r\n customerSendDefectEmail: data.customerSendDefectEmail || false,\r\n customerDefectEmail: data.customerDefectEmail,\r\n customerSendBreakdownEmail: data.customerSendBreakdownEmail || false,\r\n customerBreakdownEmail: data.customerBreakdownEmail,\r\n customerSendFailedDailyCheck: data.customerSendFailedDailyCheck || false,\r\n customerFailedDailyCheckEmail: data.customerFailedDailyCheckEmail,\r\n // ccheduleCompletionReminder: data.ccheduleCompletionReminder,\r\n sendScheduleConfirmation: data.sendScheduleConfirmation || false,\r\n customerScheduleConfirmationEmail: data.customerScheduleConfirmationEmail,\r\n customerSendScheduleCompletion: data.customerSendScheduleCompletion || false,\r\n customerScheduleCompletionEmail: data.customerScheduleCompletionEmail,\r\n customerSendVOREmail: data.customerSendVOREmail || false,\r\n customerVOREmail: data.customerVOREmail,\r\n customerSendQueryResponseReceived: data.customerSendQueryResponseReceived || false,\r\n customerQueryResponseReceivedEmail: data.customerQueryResponseReceivedEmail,\r\n customerSendJobApprovalRequired: data.customerSendJobApprovalRequired || false,\r\n customerJobApprovalRequiredEmail: data.customerJobApprovalRequiredEmail,\r\n // customerVORMobileNumbers: data.customerVORMobileNumbers,\r\n // oLicenseWarningInterval: data.oLicenseWarningInterval,\r\n // oLicenseWarningFollowupInterval: data.oLicenseWarningFollowupInterval,\r\n customerAutoApprovalLimit: data.customerAutoApprovalLimit,\r\n customerInspectionSheetHeadingBackgroundColour: data.customerInspectionSheetHeadingBackgroundColour,\r\n customerInspectionSheetHeadingTextColour: data.customerInspectionSheetHeadingTextColour,\r\n // autoApproveDays: data.autoApproveDays,\r\n // overdueQueriesDays: data.overdueQueriesDays,\r\n // autoApproveQueryDays: data.autoApproveQueryDays,\r\n // autoApproveOrderAckNo: data.autoApproveOrderAckNo,\r\n // customerAllowedDayRange: data.customerAllowedDayRange,\r\n // customerDisplayDefectsMonths: data.customerDisplayDefectsMonths,\r\n customerHandlingDefects: data.customerHandlingDefects || false,\r\n handlingOLicense: data.handlingOLicense || false,\r\n // autoCreateMileageBasedService: data.autoCreateMileageBasedService,\r\n customerEarnedRecognition: data.customerEarnedRecognition || false,\r\n customerERStartDate: data.customerERStartDate,\r\n customerLogo: data.customerLogo,\r\n customerLicenceCheckAccountCode: data.customerLicenceCheckAccountCode,\r\n customerCountryCode: data.customerCountryCode,\r\n customerInspectionEventID: tempOptions.customerInspectionEventIDValue?.id,\r\n customerPaymentDays: tempOptions.customerPaymentDaysValue?.id,\r\n customerAccountCode: data.customerAccountCode,\r\n customerOverdueReminderEmail: data.customerOverdueReminderEmail,\r\n customerSendOverdueReminderEmail: data.customerSendOverdueReminderEmail,\r\n\r\n customerSendInvoiceToDepot: invoice.customerSendInvoiceToDepot,\r\n customerUseAddressAsInvoiceAddress: invoice.customerUseAddressAsInvoiceAddress,\r\n customerInvoiceAddress1: invoice.customerInvoiceAddress1,\r\n customerInvoiceAddress2: invoice.customerInvoiceAddress2,\r\n customerInvoiceAddressCity: invoice.customerInvoiceAddressCity,\r\n customerInvoiceAddressCounty: invoice.customerInvoiceAddressCounty,\r\n customerInvoiceAddressPostCode: invoice.customerInvoiceAddressPostCode,\r\n customerInvoiceAddressCountryCode: invoice.customerInvoiceAddressCountryCode,\r\n customerInvoiceEmailAddress: invoice.customerInvoiceEmailAddress,\r\n customerEmailInvoices: invoice.customerEmailInvoices,\r\n customerTableHeaderBackgroundColour: data.customerTableHeaderBackgroundColour,\r\n customerTableHeaderColour: data.customerTableHeaderColour,\r\n customerOddRowBackgroundColour: data.customerOddRowBackgroundColour,\r\n customerOddRowColour: data.customerOddRowColour,\r\n customerEvenRowBackgroundColour: data.customerEvenRowBackgroundColour,\r\n customerEvenRowColour: data.customerEvenRowColour,\r\n customerLabourRate: data.customerLabourRate,\r\n customerOutOfHoursLabourRate: data.customerOutOfHoursLabourRate,\r\n customerVORHours: data.customerVORHours,\r\n customerVORTimed: data.customerVORTimed\r\n });\r\n return res;\r\n};\r\n\r\nexport const updateCustomer = async (data, tempOptions, invoice) => {\r\n let res = await putWithAuth(`customers/${data.customerID}`, {\r\n customerID: data.customerID,\r\n customerShortName: data.customerShortName,\r\n customerCompanyName: data.customerCompanyName,\r\n customerAddress1: data.customerAddress1,\r\n customerAddress2: data.customerAddress2,\r\n customerCity: data.customerCity,\r\n customerCounty: data.customerCounty,\r\n customerPostCode: data.customerPostCode,\r\n // customerCountryCode: data.customerCountryCode,\r\n customerTelephone: data.customerTelephone,\r\n customerEmail: data.customerEmail,\r\n customerWebSite: data.customerWebSite,\r\n // customerActive: data.customerActive,\r\n customerStatusID: tempOptions.customerStatusIDValue?.id,\r\n customerAccountManagerID: tempOptions.customerAccountManagerName?.id,\r\n // customerOperationsManagerID: data.customerOperationsManagerID,\r\n customerOperationsManagerName: data.customerOperationsManagerName,\r\n customerOperationsManagerPhone: data.customerOperationsManagerPhone,\r\n customerOperationsManagerEmail: data.customerOperationsManagerEmail,\r\n customerFinanceDirectorName: data.customerFinanceDirectorName,\r\n customerFinanceDirectorPhone: data.customerFinanceDirectorPhone,\r\n customerFinanceDirectorEmail: data.customerFinanceDirectorEmail,\r\n // customerCurrencyID: tempOptions.customerCurrencyIDValue?.id,\r\n customerISOWeekStartDay: tempOptions.ISODaysValue?.id,\r\n customerSendEmailNotifications: data.customerSendEmailNotifications || false,\r\n // customerSendVehicleNotification: data.customerSendVehicleNotification || false,\r\n // customerVehicleNotificationEmail: data.customerVehicleNotificationEmail,\r\n customerSendDefectEmail: data.customerSendDefectEmail || false,\r\n customerDefectEmail: data.customerDefectEmail,\r\n customerSendBreakdownEmail: data.customerSendBreakdownEmail || false,\r\n customerBreakdownEmail: data.customerBreakdownEmail,\r\n customerSendFailedDailyCheck: data.customerSendFailedDailyCheck || false,\r\n customerFailedDailyCheckEmail: data.customerFailedDailyCheckEmail,\r\n // ccheduleCompletionReminder: data.ccheduleCompletionReminder,\r\n sendScheduleConfirmation: data.sendScheduleConfirmation || false,\r\n customerScheduleConfirmationEmail: data.customerScheduleConfirmationEmail,\r\n customerSendScheduleCompletion: data.customerSendScheduleCompletion || false,\r\n customerScheduleCompletionEmail: data.customerScheduleCompletionEmail,\r\n customerSendVOREmail: data.customerSendVOREmail || false,\r\n customerVOREmail: data.customerVOREmail,\r\n customerSendQueryResponseReceived: data.customerSendQueryResponseReceived || false,\r\n customerQueryResponseReceivedEmail: data.customerQueryResponseReceivedEmail,\r\n customerSendJobApprovalRequired: data.customerSendJobApprovalRequired || false,\r\n customerJobApprovalRequiredEmail: data.customerJobApprovalRequiredEmail,\r\n // customerVORMobileNumbers: data.customerVORMobileNumbers,\r\n // customerVORHours: data.customerVORHours,\r\n // oLicenseWarningInterval: data.oLicenseWarningInterval,\r\n // oLicenseWarningFollowupInterval: data.oLicenseWarningFollowupInterval,\r\n customerAutoApprovalLimit: data.customerAutoApprovalLimit,\r\n customerRechargeMarkup: data.customerRechargeMarkup,\r\n customerInspectionSheetHeadingBackgroundColour: data.customerInspectionSheetHeadingBackgroundColour,\r\n customerInspectionSheetHeadingTextColour: data.customerInspectionSheetHeadingTextColour,\r\n // autoApproveDays: data.autoApproveDays,\r\n // overdueQueriesDays: data.overdueQueriesDays,\r\n // autoApproveQueryDays: data.autoApproveQueryDays,\r\n //autoApproveOrderAckNo: data.autoApproveOrderAckNo,\r\n // customerAllowedDayRange: data.customerAllowedDayRange,\r\n // customerDisplayDefectsMonths: data.customerDisplayDefectsMonths,\r\n customerHandlingDefects: data.customerHandlingDefects || false,\r\n handlingOLicense: data.handlingOLicense || false,\r\n // autoCreateMileageBasedService: data.autoCreateMileageBasedService,\r\n customerEarnedRecognition: data.customerEarnedRecognition || false,\r\n customerERStartDate: data.customerERStartDate,\r\n customerLogo: data.customerLogo,\r\n customerLicenceCheckAccountCode: data.customerLicenceCheckAccountCode,\r\n customerCountryCode: data.customerCountryCode,\r\n customerInspectionEventID: tempOptions.customerInspectionEventIDValue?.id,\r\n customerPaymentDays: tempOptions.customerPaymentDaysValue?.id,\r\n customerAccountCode: data.customerAccountCode,\r\n customerOverdueReminderEmail: data.customerOverdueReminderEmail,\r\n customerSendOverdueReminderEmail: data.customerSendOverdueReminderEmail,\r\n customerSendInvoiceToDepot: invoice.customerSendInvoiceToDepot,\r\n customerUseAddressAsInvoiceAddress: invoice.customerUseAddressAsInvoiceAddress,\r\n customerInvoiceAddress1: invoice.customerInvoiceAddress1,\r\n customerInvoiceAddress2: invoice.customerInvoiceAddress2,\r\n customerInvoiceAddressCity: invoice.customerInvoiceAddressCity,\r\n customerInvoiceAddressCounty: invoice.customerInvoiceAddressCounty,\r\n customerInvoiceAddressPostCode: invoice.customerInvoiceAddressPostCode,\r\n customerInvoiceAddressCountryCode: invoice.customerInvoiceAddressCountryCode,\r\n customerInvoiceEmailAddress: invoice.customerInvoiceEmailAddress,\r\n customerEmailInvoices: invoice.customerEmailInvoices,\r\n customerTableHeaderBackgroundColour: data.customerTableHeaderBackgroundColour,\r\n customerTableHeaderColour: data.customerTableHeaderColour,\r\n customerOddRowBackgroundColour: data.customerOddRowBackgroundColour,\r\n customerOddRowColour: data.customerOddRowColour,\r\n customerEvenRowBackgroundColour: data.customerEvenRowBackgroundColour,\r\n customerEvenRowColour: data.customerEvenRowColour,\r\n customerLabourRate: data.customerLabourRate,\r\n customerOutOfHoursLabourRate: data.customerOutOfHoursLabourRate,\r\n customerVORHours: data.customerVORHours,\r\n customerVORTimed: data.customerVORTimed\r\n });\r\n return res;\r\n};\r\n\r\nexport const getCustomerDropDown = async (Id) => {\r\n let res = await getWithAuth(`Customers/CustomersscreenDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const postImportMileage = async (data) => {\r\n let res = await postWithAuth(`OdometerReadings/ImportMileageData`, data);\r\n return res;\r\n};\r\n\r\nexport const postImportJourney = async (data) => {\r\n let res = await postWithAuth(`Journeys/ImportJourneyData`, data);\r\n return res;\r\n};\r\n\r\nexport const postImportDepot = async (CustomerID, FileData) => {\r\n let res = await postWithAuth(`Depots/ImportDepotData/${CustomerID}`, FileData);\r\n return res;\r\n};\r\n\r\nexport const postImportServiceAgent = async (CustomerID, FileData) => {\r\n let res = await postWithAuth(`ServiceAgents/ImportServiceAgentData/${CustomerID}`, FileData);\r\n return res;\r\n};\r\n\r\nexport const postImportFuel = async (data) => {\r\n let res = await postWithAuth(`FuelPurchases/ImportFuelPurchases`, data);\r\n return res;\r\n};\r\n\r\nexport const getVORVehiclesByType = async (Id, start, end, vehicleCategoryID, makeID) => {\r\n let res = await getWithAuth(\r\n `Customers/VORVehiclesByType?id=${Id || ''}&StartDate=${start}&EndDate=${end}&vehicleCategoryID=${vehicleCategoryID}&makeID=${makeID}`\r\n );\r\n return res;\r\n};\r\nexport const getTop10VORVehiclesByOccurance = async (Id) => {\r\n let res = await getWithAuth(`Customers/Top10VORVehiclesByOccurance?id=${Id && Id}`);\r\n return res;\r\n};\r\nexport const getTop10VORVehiclesByDays = async (Id) => {\r\n let res = await getWithAuth(`Customers/Top10VORVehiclesByDays?id=${Id && Id}`);\r\n return res;\r\n};\r\n","import InputText from \"./index\";\r\nimport { MandatoryField } from \"./MandatoryField\";\r\n\r\nexport const PositiveInput = (props) => {\r\n const checkPrevention = (event) => {\r\n if (/[^0-9]/.test(event.key)) {\r\n event.preventDefault();\r\n }\r\n };\r\n return \r\n
\r\n );\r\n};\r\n\r\nexport default ColorPicker;\r\n","import React, { useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormControlLabel, FormHelperText, InputLabel, Radio, RadioGroup, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, SelectBox, BreadCrumbs, MandatoryField, SimpleField, DatePicker, SingleSelect } from '../../../../Core/Controls';\r\nimport { PositiveInput } from '../../../../Core/Controls/Inputs/PositiveInput';\r\nimport { CustomerProvider, CustomerScreenContext } from './CustomerProvider';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport '../controllerStyle.scss';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport { Tooltip } from '@material-ui/core';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Postcode } from '../../../../Core/Controls';\r\nimport ColorPicker from '../../../../Core/Controls/ColorPicker';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Customers', active: true },\r\n { name: 'Add/Update Customer', active: true }\r\n];\r\n\r\nconst modelgridStyle = {\r\n gridContainer: { height: '600px' },\r\n formatterImageContainer: { width: '100%', textAlign: 'center' },\r\n formatterImage: { width: 120, maxHeight: 40, backgroundSize: 'cover' },\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst FlaggedBox = (props) => {\r\n useEffect(() => {\r\n !props.chkValue && props.resetInput(props.txtName);\r\n }, [props.chkValue]);\r\n return (\r\n <>\r\n \r\n \r\n
\r\n {state.showPicker ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {!props.customerID ? \r\n \r\n {/* */}\r\n \r\n \r\n {state.errors.customerShortName} \r\n \r\n \r\n {state.errors.customerCompanyName} \r\n \r\n \r\n {state.errors.customerAccountCode} \r\n \r\n\r\n \r\n \r\n Status\r\n \r\n {state.errors.customerStatusID} \r\n \r\n \r\n \r\n Country Code\r\n \r\n {state.errors.countryCode} \r\n \r\n\r\n \r\n {state.errors.customerAddress1} \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n {/* {state.errors.customerPostCode} */}\r\n \r\n \r\n {state.errors.customerTelephone} \r\n \r\n \r\n {state.errors.customerEmail} \r\n \r\n \r\n \r\n \r\n Account Manager \r\n {state.errors.aCManager} \r\n \r\n \r\n \r\n \r\n Earned Recognition Start 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 Invoice Details\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {' '}\r\n \r\n {invoiceFields.errors.customerDefectEmail} */}\r\n \r\n \r\n \r\n \r\n {invoiceFields.errors.customerAddress1} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Country Code\r\n \r\n {state.errors.countryCode} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n Contact Details\r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n {state.errors.customerOperationsManagerPhone} \r\n \r\n \r\n {state.errors.customerOperationsManagerEmail} \r\n \r\n \r\n \r\n \r\n {state.errors.customerFinanceDirectorPhone} \r\n \r\n \r\n {state.errors.customerFinanceDirectorEmail} \r\n \r\n \r\n {/* */}\r\n \r\n \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 \r\n \r\n \r\n \r\n \r\n \r\n Payment Terms \r\n \r\n \r\n Order Approval Limit \r\n {state.errors.customerAutoApprovalLimit} \r\n \r\n \r\n Recharge Markup % \r\n \r\n \r\n ISO Week Start Day \r\n \r\n \r\n Schedule Event \r\n \r\n \r\n {state.errors.customerLabourRate} \r\n \r\n \r\n {state.errors.customerOutOfHoursLabourRate} \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n {/* */}\r\n \r\n Notifications\r\n \r\n
\r\n\r\n \r\n \r\n \r\n {state.errors.customerDefectEmail} \r\n \r\n \r\n {state.errors.customerBreakdownEmail} \r\n \r\n \r\n {state.errors.customerVOREmail} \r\n \r\n \r\n {state.errors.customerFailedDailyCheckEmail} \r\n \r\n \r\n {state.errors.customerScheduleConfirmationEmail} \r\n \r\n \r\n {state.errors.customerScheduleCompletionEmail} \r\n \r\n \r\n {state.errors.customerQueryResponseReceivedEmail} \r\n \r\n \r\n {state.errors.customerJobApprovalRequiredEmail} \r\n \r\n \r\n {state.errors.customerOverdueReminderEmail} \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 Details\r\n \r\n
\r\n\r\n\r\n \r\n \r\n Inspection Sheet Heading Colour\r\n \r\n \r\n Background \r\n onColorChange(m, 'customerInspectionSheetHeadingBackgroundColour')}\r\n />\r\n \r\n \r\n Text \r\n onColorChange(m, 'customerInspectionSheetHeadingTextColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Table Header Colour\r\n \r\n \r\n Background \r\n onColorChange(m, 'customerTableHeaderBackgroundColour')}\r\n />\r\n \r\n \r\n Text \r\n onColorChange(m, 'customerTableHeaderColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Odd Row Colour\r\n \r\n \r\n Background \r\n onColorChange(m, 'customerOddRowBackgroundColour')}\r\n />\r\n \r\n \r\n Text \r\n onColorChange(m, 'customerOddRowColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Even Row Colour\r\n \r\n \r\n Background \r\n onColorChange(m, 'customerEvenRowBackgroundColour')}\r\n />\r\n \r\n \r\n Text \r\n onColorChange(m, 'customerEvenRowColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Customer Logo\r\n \r\n {state.customerLogo && (\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {checkhaveAccess?.CanUpdateCustomers && (\r\n \r\n \r\n {props.customerID ? 'Save' : 'Add'}\r\n \r\n \r\n )}\r\n \r\n \r\n Cancel\r\n \r\n \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\n\r\n
\r\n
\r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { getCustomerById } from '../../../../Core/Services/InternalUser/ControllerService/customerService';\r\nimport { FromLoader } from '../../../../Core/Loader/formLoader';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { formatters } from '../../../../Core/Controls';\r\n\r\nfunction CustomerDetails(props) {\r\n const [state, setState] = useState({\r\n customerShortName: null,\r\n customerAddress1: null,\r\n customerAddress2: null,\r\n customerCounty: null,\r\n customerCity: null,\r\n customerPostCode: null,\r\n customerTelephone: null,\r\n customerEmail: null,\r\n loader: false\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.customerID) {\r\n let res = await getCustomerById(props.customerID);\r\n const data = res.data.list[0];\r\n setState((st) => ({\r\n ...st,\r\n customerShortName: data.customerShortName,\r\n customerCompanyName: data.customerCompanyName,\r\n customerAddress1: data.customerAddress1,\r\n customerAddress2: data.customerAddress2,\r\n customerCity: data.customerCity,\r\n customerCounty: data.customerCounty,\r\n customerPostCode: data.customerPostCode,\r\n customerTelephone: data.customerTelephone,\r\n customerEmail: data.customerEmail,\r\n loader: true\r\n }));\r\n }\r\n }, []);\r\n\r\n return (\r\n state.loader ? (\r\n \r\n
\r\n )\r\n );\r\n}\r\n\r\nexport default CustomerDetails;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllCustomer } from '../../../../Core/Services/InternalUser/ControllerService/customerService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport AddEditCustomer from './addCustomer';\r\nimport '../../../commonStyle.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport MsgAllCustomersModal from './MsgAllCustomersModal';\r\nimport { Modal } from '@material-ui/core';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport ChatBubble from '@material-ui/icons/ChatBubble';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport ReactDOM from 'react-dom';\r\nimport CustomerDetails from '../DetailsModal/customerDetails.jsx';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: '7%',\r\n addFileUploaderIcon: true\r\n },\r\n { key: 'customerCompanyName', name: 'Name', width: '15%' },\r\n {\r\n key: 'vehicles',\r\n name: 'Vehicles',\r\n // headerRenderer: formatters.ColumnHeaderAlignRight,\r\n formatter: formatters.ColumnTextAlignRight,\r\n width: '5%'\r\n },\r\n {\r\n key: 'breakdowns',\r\n name: 'Breakdowns',\r\n // headerRenderer: formatters.ColumnHeaderAlignRight,\r\n formatter: formatters.ColumnTextAlignRight,\r\n width: '7%'\r\n },\r\n {\r\n key: 'defects',\r\n name: 'Defects',\r\n // headerRenderer: formatters.ColumnHeaderAlignRight,\r\n formatter: formatters.ColumnTextAlignRight,\r\n width: '4%'\r\n },\r\n // { key: 'customerCity', name: 'City' },\r\n // { key: 'customerPostCode', name: 'Post Code' },\r\n {\r\n key: 'customerEmail',\r\n name: 'Email',\r\n width: '20%'\r\n },\r\n { key: 'customerTelephone', name: 'Phone', width: '10%' },\r\n {\r\n key: 'customerAddress',\r\n name: 'Address',\r\n formatter: (data) => formatters.addressFormatter(data.row?.customerAddress1, data.row?.customerCity, data.row?.customerPostCode)\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Customers', path: '/', active: true }\r\n];\r\n\r\nconst CustomerScreen = (props) => {\r\n const { showToastError } = useToast();\r\n let history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showMsgModal: false,\r\n showLoader: true,\r\n customerList: [],\r\n customerID: null\r\n });\r\n\r\n const pullCustomerAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n // useEffect(async () => {\r\n // pullCustomerAndUpdateState();\r\n // }, []);\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true\r\n // customerID: record.id\r\n }));\r\n };\r\n\r\n const onMsgClick = () => {\r\n setState((st) => ({\r\n ...st,\r\n showMsgModal: true\r\n }));\r\n };\r\n\r\n const closeModals = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false,\r\n showMsgModal: false\r\n }));\r\n res && pullCustomerAndUpdateState();\r\n };\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/editcustomer/${val.customerId}/${val.customerCompanyName}`\r\n });\r\n };\r\n\r\n const dataFormatter = (val, row) => {\r\n return (\r\n {formatters.mailFormatter(row.customerEmail)}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showCustomerModal: false\r\n }));\r\n };\r\n\r\n const renderPhone = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = {formatters.phoneNumberFormatter(row.customerTelephone)}
;\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.key === 'action');\r\n let emailCol = tempCols.find((element) => element.key === 'customerEmail');\r\n let phoneCol = tempCols.find((element) => element.key === 'customerTelephone');\r\n let customerNameCol = tempCols.find((element) => element.key === 'customerCompanyName');\r\n if (phoneCol) {\r\n phoneCol.formatter = renderPhone;\r\n }\r\n if (emailCol) {\r\n emailCol.formatter = renderEmail;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (customerNameCol) {\r\n customerNameCol.formatter = renderCustomerName;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n {state.showMsgModal ? (\r\n closeModals(true)} maxWidth=\"lg\">\r\n closeModals(true)} />\r\n \r\n ) : null}\r\n\r\n {state.show ? (\r\n closeModals(true)} />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default CustomerScreen;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from \"../../../Basic/HttpService\";\r\n\r\nexport const getAllDepots = async (custID) => {\r\n let res = await getWithAuth(`depots?CustomerID=${custID}`);\r\n return res;\r\n};\r\n\r\nexport const getDepots = async () => {\r\n let res = await getWithAuth(`depots`);\r\n return res;\r\n};\r\n\r\nexport const getDepotById = async (Id) => {\r\n let res = await getWithAuth(`depots/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const getDropdown = async () => {\r\n let res = await getWithAuth(`depots/DepotsDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const addDepot = async (data) => {\r\n let res = await postWithAuth(\"depots\", data);\r\n return res;\r\n};\r\n\r\nexport const updateDepot = async (data, id) => {\r\n let res = await putWithAuth(`depots/${id}`, data);\r\n return res;\r\n};\r\n","import { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { addDepot, updateDepot, getDepotById, getDropdown } from '../../../../Core/Services/InternalUser/ControllerService/depotsService';\r\nimport React, { createContext, useEffect, useState, useCallback } from 'react';\r\nimport { validatePostCode } from '../../../../Core/Basic/StaticService';\r\nimport { isNull } from 'lodash';\r\n\r\nexport const VehicleScreenContext = createContext();\r\nlet invoiceInfo = {\r\n depotUseAddressAsInvoiceAddress: false,\r\n depotInvoiceAddress1: '',\r\n depotInvoiceAddress2: '',\r\n depotInvoiceAddressCity: '',\r\n depotInvoiceAddressCounty: '',\r\n depotInvoiceAddressPostCode: '',\r\n depotInvoiceAddressCountryCode: 'GB',\r\n depotInvoiceEmailAddress: '',\r\n depotEmailInvoices: false\r\n};\r\nexport const VehicleProvider = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [depotFields, setDepotFields] = useState({\r\n name: '',\r\n address1: '',\r\n address2: '',\r\n depotTown: '',\r\n depotCounty: '',\r\n depotCountyCode: '',\r\n depotEmail: '',\r\n depotTelephone: '',\r\n depotPostCode: '',\r\n depotNotInUse: true,\r\n depotCustomersRef: '',\r\n serviceAgentID: '',\r\n firstDayofWeek: null,\r\n scheduleBookingModeList: [],\r\n depotVORMobileNumbers: '',\r\n depotContact: '',\r\n depotServiceAgentID: '',\r\n depotAgentSecondaryAgentID: '',\r\n serviceAgentsList: [],\r\n errors: {}\r\n });\r\n\r\n const [scheduleFields, setScheduleFields] = useState({\r\n errors: {},\r\n depotID: null,\r\n mergeSchedules: true,\r\n displayISOWeek: true,\r\n addPaperworkReceived: true,\r\n trafficStyleColourCoding: true,\r\n MergeRange: '',\r\n depotDefectNotificationEmail: '',\r\n sunday: false,\r\n monday: true,\r\n tuesday: false,\r\n wednesday: false,\r\n thursday: false,\r\n friday: false,\r\n saturday: false,\r\n depotAdditionalPlanningEmails: '',\r\n cPCHolderEmail: '',\r\n cPCHolderName: '',\r\n secondaryEmail: '',\r\n depotSecondaryContact: '',\r\n depotPCNEmail: '',\r\n depotAccountName: '',\r\n depotAccountEmail: '',\r\n depotThirdPartyPlannerEmailAddress: '',\r\n depotBreakdownNotificationEmail: '',\r\n depotTimedVehicleStatusUpdateEmail: '',\r\n depotSchedulePlannerEmail: '',\r\n depotNotes: '',\r\n scheduleBookingModeList: [],\r\n depotScheduleBookingMode: ''\r\n });\r\n\r\n const [invoiceFields, setInvoiceFields] = useState({\r\n ...invoiceInfo,\r\n errors: {}\r\n });\r\n useEffect(async () => {\r\n let res = await getDropdown();\r\n const scheduleBookingModeList = res.data.scheduleBookingModes.map((item) => ({\r\n id: item.scheduleBookingModeCode,\r\n name: item.scheduleBookingModeDescription\r\n }));\r\n setDepotFields((st) => ({\r\n ...st,\r\n scheduleBookingModeList: scheduleBookingModeList,\r\n serviceAgentsList: res.data.serviceAgents\r\n }));\r\n if (props.depotID) {\r\n let res = await getDepotById(props.depotID);\r\n const data = res.data.details[0];\r\n setDepotFields((st) => ({\r\n ...st,\r\n name: data.depotName,\r\n address1: data.depotAddress1,\r\n address2: data.depotAddress2,\r\n depotCounty: data.depotCounty,\r\n depotTown: data.depotTown,\r\n depotCountyCode: data.depotCountryCode,\r\n depotEmail: data.depotEmail,\r\n depotCustomersRef: data.depotCustomersRef,\r\n scheduleBookingModeID: data.scheduleBookingModeID,\r\n depotPostCode: data.depotPostCode,\r\n depotTelephone: data.depotTelephone,\r\n depotContact: data.depotContact,\r\n depotNotInUse: data.depotNotInUse,\r\n depotCustomerID: data.depotCustomerID,\r\n firstDayofWeek: data.depotFirstDayofWeek,\r\n depotVORMobileNumbers: data.depotVORMobileNumbers,\r\n depotServiceAgentID: data.depotPrimaryAgentID,\r\n depotAgentSecondaryAgentID: data.depotAgentSecondaryAgentID\r\n }));\r\n setScheduleFields((st) => ({\r\n ...st,\r\n depotID: data.depotID,\r\n depotCustomerID: data.depotCustomerID,\r\n scheduleBookingModeID: data.scheduleBookingModeID,\r\n MergeSchedules: data.depotPlannerMergeSchedules,\r\n displayISOWeek: data.depotPlannerDisplayISOWeek,\r\n addPaperworkReceived: data.depotPlannerAddPaperworkReceived,\r\n trafficStyleColourCoding: data.depotPlannerTrafficStyleColourCoding,\r\n mergeRange: data.depotPlannerMergeRange,\r\n sunday: data.depotBookingPreferenceSunday,\r\n depotDefectNotificationEmail: data.depotDefectNotificationEmail,\r\n monday: data.depotBookingPreferenceMonday,\r\n tuesday: data.depotBookingPreferenceTuesday,\r\n wednesday: data.depotBookingPreferenceWednesday,\r\n thursday: data.depotBookingPreferenceThursday,\r\n friday: data.depotBookingPreferenceFriday,\r\n saturday: data.depotBookingPreferenceSaturday,\r\n depotAdditionalPlanningEmails: data.depotAdditionalPlanningEmails,\r\n cPCHolderEmail: data.depotCPCHolderEmail,\r\n cPCHolderName: data.depotCPCHolderName,\r\n secondaryEmail: data.depotSecondaryEmail,\r\n depotSecondaryContact: data.depotSecondaryContact,\r\n depotPCNEmail: data.depotPCNEmail,\r\n depotAccountName: data.depotAccountName,\r\n depotAccountEmail: data.depotAccountEmail,\r\n depotContactMobile: data.depotContactMobile,\r\n depotThirdPartyPlannerEmailAddress: data.depotThirdPartyPlannerEmailAddress,\r\n depotScheduleBookingMode: data.depotScheduleBookingMode,\r\n depotBreakdownNotificationEmail: data.depotBreakdownNotificationEmail,\r\n depotTimedVehicleStatusUpdateEmail: data.depotTimedVehicleStatusUpdateEmail,\r\n depotSchedulePlannerEmail: data.depotSchedulePlannerEmail,\r\n depotNotes: data.depotNotes\r\n }));\r\n setInvoiceFields((dt) => ({\r\n ...dt,\r\n depotUseAddressAsInvoiceAddress: data.depotUseAddressAsInvoiceAddress,\r\n depotInvoiceAddress1: data.depotInvoiceAddress1,\r\n depotInvoiceAddress2: data.depotInvoiceAddress2,\r\n depotInvoiceAddressCity: data.depotInvoiceAddressCity,\r\n depotInvoiceAddressCounty: data.depotInvoiceAddressCounty,\r\n depotInvoiceAddressPostCode: data.depotInvoiceAddressPostCode,\r\n depotInvoiceAddressCountryCode: data.depotInvoiceAddressCountryCode,\r\n depotInvoiceEmailAddress: data.depotInvoiceEmailAddress,\r\n depotEmailInvoices: data.depotEmailInvoices\r\n }));\r\n }\r\n }, []);\r\n\r\n const setVal = (s) => {\r\n setInvoiceFields((st) => ({\r\n ...st,\r\n depotInvoiceAddress1: s.addressLine1,\r\n depotInvoiceAddress2: s.addressLine2,\r\n depotInvoiceAddressCity: s.town,\r\n depotInvoiceAddressCounty: s.county,\r\n depotInvoiceAddressPostCode: s.postCode\r\n }));\r\n };\r\n const invoiceFieldsChange = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n setInvoiceFields((st) => ({ ...st, ...invoiceInfo, [name]: true }));\r\n } else if (value === 'false' && type?.toLowerCase() === 'radio') {\r\n setInvoiceFields((st) => ({ ...st, [name]: false }));\r\n } else {\r\n setInvoiceFields((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n const invoiceCheckBox = (e) => {\r\n const { name, checked } = e.target;\r\n setInvoiceFields((st) => ({ ...st, [name]: checked }));\r\n };\r\n\r\n const resetInput = (name) => {\r\n setInvoiceFields((st) => ({ ...st, [name]: '' }));\r\n };\r\n const scheduleDetailsChange = (e) => {\r\n const { name, value } = e.target;\r\n setScheduleFields((st) => ({ ...st, [name]: value }));\r\n };\r\n const handledepotFields = (e) => {\r\n const { name, value } = e.target;\r\n setDepotFields((st) => ({ ...st, [name]: value }));\r\n };\r\n const handledepotCheckbox = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setDepotFields((st) => {\r\n const nst = { ...st, [name]: checked };\r\n return nst;\r\n });\r\n }, []);\r\n const handleCheckbox = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setScheduleFields((st) => {\r\n const nst = { ...st, [name]: checked };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleActive = (val) => {\r\n setDepotFields((field) => ({\r\n ...field,\r\n depotNotInUse: val\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { name, address1, address2, depotCounty } = depotFields;\r\n const { depotInvoiceEmailAddress, depotEmailInvoices } = invoiceFields;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!/[^\\s]/.test(name)) {\r\n errors.name = 'Depot Name is required.';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(address1)) {\r\n errors.address1 = 'Depot Address1 is required.';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(depotCounty)) {\r\n errors.depotCounty = 'Depot county is required.';\r\n formIsValid = false;\r\n }\r\n\r\n // if (!validatePostCode(depotPostCode)) {\r\n // errors.depotPostCode = `Please fill valid post code, \"Ex: BB11AA\"`;\r\n // formIsValid = false;\r\n // }\r\n if (depotEmailInvoices && (!/[^\\s]/.test(depotInvoiceEmailAddress) || isNull(depotInvoiceEmailAddress))) {\r\n errors.depotInvoiceEmailAddress = 'Email can not be empty for checked flag';\r\n formIsValid = false;\r\n }\r\n setDepotFields((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const depotData = {\r\n depotID: scheduleFields.depotID,\r\n depotCustomerID: props.customerID,\r\n depotName: depotFields.name,\r\n depotAddress1: depotFields.address1,\r\n depotAddress2: depotFields.address2,\r\n depotCounty: depotFields.depotCounty,\r\n depotTown: depotFields.depotTown,\r\n depotCountryCode: depotFields.depotCountyCode,\r\n depotEmail: depotFields.depotEmail,\r\n depotCustomersRef: depotFields.depotCustomersRef,\r\n depotPostCode: depotFields.depotPostCode,\r\n depotTelephone: depotFields.depotTelephone,\r\n depotContact: depotFields.depotContact,\r\n depotNotInUse: depotFields.depotNotInUse,\r\n depotPrimaryAgentID: depotFields.depotServiceAgentID,\r\n depotAgentSecondaryAgentID: depotFields.depotAgentSecondaryAgentID,\r\n depotVORMobileNumbers: depotFields.depotVORMobileNumbers,\r\n depotPlannerMergeSchedules: scheduleFields.mergeSchedules,\r\n depotPlannerDisplayISOWeek: scheduleFields.displayISOWeek,\r\n depotPlannerAddPaperworkReceived: scheduleFields.addPaperworkReceived,\r\n depotPlannerTrafficStyleColourCoding: scheduleFields.trafficStyleColourCoding,\r\n depotPlannerMergeRange: scheduleFields.mergeRange,\r\n depotBookingPreferenceSunday: scheduleFields.sunday,\r\n depotDefectNotificationEmail: scheduleFields.depotDefectNotificationEmail,\r\n depotBookingPreferenceMonday: scheduleFields.monday,\r\n depotBookingPreferenceTuesday: scheduleFields.tuesday,\r\n depotBookingPreferenceWednesday: scheduleFields.wednesday,\r\n depotBookingPreferenceThursday: scheduleFields.thursday,\r\n depotBookingPreferenceFriday: scheduleFields.friday,\r\n depotBookingPreferenceSaturday: scheduleFields.saturday,\r\n depotAdditionalPlanningEmails: scheduleFields.depotAdditionalPlanningEmails,\r\n depotCPCHolderEmail: scheduleFields.cPCHolderEmail,\r\n depotCPCHolderName: scheduleFields.cPCHolderName,\r\n depotSecondaryEmail: scheduleFields.secondaryEmail,\r\n depotSecondaryContact: scheduleFields.depotSecondaryContact,\r\n depotPCNEmail: scheduleFields.depotPCNEmail,\r\n depotAccountName: scheduleFields.depotAccountName,\r\n depotContactMobile: scheduleFields.depotContactMobile,\r\n depotAccountEmail: scheduleFields.depotAccountEmail,\r\n depotThirdPartyPlannerEmailAddress: scheduleFields.depotThirdPartyPlannerEmailAddress,\r\n depotScheduleBookingMode: scheduleFields.depotScheduleBookingMode,\r\n depotBreakdownNotificationEmail: scheduleFields.depotBreakdownNotificationEmail,\r\n depotTimedVehicleStatusUpdateEmail: scheduleFields.depotTimedVehicleStatusUpdateEmail,\r\n depotVehicleStatusUpdateEmail: scheduleFields.depotVehicleStatusUpdateEmail,\r\n depotSchedulePlannerEmail: scheduleFields.depotSchedulePlannerEmail,\r\n depotfirstDayofWeek: scheduleFields.depotFirstDayofWeek,\r\n depotNotes: scheduleFields.depotNotes,\r\n depotUseAddressAsInvoiceAddress: invoiceFields.depotUseAddressAsInvoiceAddress,\r\n depotInvoiceAddress1: invoiceFields.depotInvoiceAddress1 || '',\r\n depotInvoiceAddress2: invoiceFields.depotInvoiceAddress2 || '',\r\n depotInvoiceAddressCity: invoiceFields.depotInvoiceAddressCity || '',\r\n depotInvoiceAddressCounty: invoiceFields.depotInvoiceAddressCounty || '',\r\n depotInvoiceAddressPostCode: invoiceFields.depotInvoiceAddressPostCode || '',\r\n depotInvoiceAddressCountryCode: invoiceFields.depotInvoiceAddressCountryCode || '',\r\n depotInvoiceEmailAddress: invoiceFields.depotInvoiceEmailAddress || '',\r\n depotEmailInvoices: invoiceFields.depotEmailInvoices\r\n };\r\n\r\n let res;\r\n if (props.depotID) {\r\n res = await updateDepot(depotData, props.depotID);\r\n } else {\r\n res = await addDepot(depotData);\r\n }\r\n if (res.success) {\r\n showToastSuccess('Depots saved successfully');\r\n props.onFormClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n const closeModal = () => {\r\n props.onFormClose(false);\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {scheduleFields.depotID ? 'Save' : 'Add'}\r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n \r\n {state.show ? (\r\n handleAdd(null)}\r\n getUrl={`depots?CustomerID=${props.customerID}`}\r\n columns={columns}\r\n idFieldName=\"depotID\"\r\n fileUploaderConfigName=\"DepotScreen\"\r\n dataConverter={(res) => ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default DepotsScreen;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllVehicleCheckSection = async () => {\r\n let res = await getWithAuth(`VehicleCheckSection`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleCheckSectionById = async (id) => {\r\n let res = await getWithAuth(`VehicleCheckSection/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVehicleCheckSectionData = async (data) => {\r\n let res = await postWithAuth(`VehicleCheckSection`, data);\r\n return res;\r\n};\r\n\r\nexport const getAllVehicleCheckSectionDropDown = async () => {\r\n let res = await getWithAuth(`VehicleCategories`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { SecondaryCheckbox, InputText, SecondaryButton, SelectBox, MandatoryField } from '../../../../Core/Controls';\r\nimport {\r\n getVehicleCheckSectionById,\r\n postVehicleCheckSectionData,\r\n getAllVehicleCheckSectionDropDown\r\n} from '../../../../Core/Services/InternalUser/vehicleCheckSection';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\n\r\nconst CheckSectionModal = (props) => {\r\n const [state, setState] = useState({\r\n inspectionSheetSectionID: null,\r\n inspectionSheetSectionDescription: '',\r\n inspectionSheetSectionPosition: '',\r\n inspectionSheetSectionActive: true,\r\n vehicleCategoryDescription: '',\r\n errors: {},\r\n categoryList: []\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.checkSectionID) {\r\n let res = await getVehicleCheckSectionById(props.checkSectionID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n inspectionSheetSectionID: res.data.inspectionSheetSectionID,\r\n inspectionSheetSectionDescription: res.data.inspectionSheetSectionDescription,\r\n inspectionSheetSectionPosition: res.data.inspectionSheetSectionPosition,\r\n vehicleCategoryDescription: res.data.inspectionSheetSectionVehicleCategoryID,\r\n inspectionSheetSectionActive: res.data.inspectionSheetSectionActive\r\n }));\r\n }\r\n }\r\n\r\n let res = await getAllVehicleCheckSectionDropDown();\r\n setState((state) => ({\r\n ...state,\r\n categoryList: res.data.list.map((item) => ({\r\n id: item.vehicleCategoryID,\r\n name: item.vehicleCategoryDescription\r\n }))\r\n }));\r\n }, []);\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((state) => ({ ...state, [name]: value }));\r\n };\r\n\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { inspectionSheetSectionDescription, inspectionSheetSectionPosition, vehicleCategoryDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(inspectionSheetSectionDescription)) {\r\n errors.inspectionSheetSectionDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(inspectionSheetSectionPosition)) {\r\n errors.inspectionSheetSectionPosition = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(vehicleCategoryDescription)) {\r\n errors.vehicleCategoryDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const checkSectionData = {\r\n inspectionSheetSectionID: state.inspectionSheetSectionID,\r\n inspectionSheetSectionPosition: state.inspectionSheetSectionPosition,\r\n inspectionSheetSectionDescription: state.inspectionSheetSectionDescription,\r\n inspectionSheetSectionActive: state.inspectionSheetSectionActive,\r\n vehicleCategoryDescription: state.vehicleCategoryDescription,\r\n inspectionSheetSectionVehicleCategoryID: state.vehicleCategoryDescription\r\n };\r\n let res = await postVehicleCheckSectionData(checkSectionData);\r\n if (res.success) {\r\n showToastSuccess('Vehicle Check section added successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleButton(data.row)} toolTipTitle=\"Edit Vehicle Check Section\" />\r\n
\r\n );\r\n };\r\n const handleButton = (params) => {\r\n setState((state) => ({ ...state, modalToggle: true, userID: params.inspectionSheetSectionID }));\r\n };\r\n\r\n const closeDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullData();\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const title = state.userID ? 'Update Vehicle Check Section' : 'Add Vehicle Check Section';\r\n\r\n return (\r\n \r\n closeDialog(false)}>\r\n closeDialog(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CheckSection;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllFilterCustomers = async () => {\r\n let res = await getWithAuth(`UserFilterCustomers`);\r\n return res;\r\n};\r\n\r\nexport const postFilterCustomers = async (data) => {\r\n let res = await postWithAuth(`UserFilterCustomers`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState, useCallback, useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryCheckbox, SecondaryButton, CustomChip, SimpleField } from '../../../Core/Controls';\r\nimport { getAllFilterCustomers, postFilterCustomers } from '../../../Core/Services/InternalUser/customerFilterList';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { CircularProgress } from '@material-ui/core';\r\nimport HighlightOffIcon from '@material-ui/icons/HighlightOff';\r\nimport DoneAllIcon from '@material-ui/icons/DoneAll';\r\nimport { AppContext } from '../../../Core/App/PageLevel/AppContextProvider';\r\n\r\nfunction CustomerList(props) {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { dashBoardDataReload } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n custList: [],\r\n errors: {},\r\n showLoader: true,\r\n setBtn: ''\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAllFilterCustomers();\r\n res.data.customers.forEach(function (n) {\r\n let chekExist = res?.data?.filterCustomers?.find((l) => l.userFilterCustomerId == n.id);\r\n if (chekExist) {\r\n n.active = true;\r\n } else n.active = false;\r\n });\r\n setState((st) => ({\r\n ...st,\r\n custList: res?.data?.customers,\r\n showLoader: false\r\n }));\r\n }, []);\r\n\r\n const handleCheckbox = useCallback((i) => (e) => {\r\n const { name, checked } = e.target;\r\n let changedArray = [...state.custList];\r\n let objIndex = state.custList.findIndex((x) => x.id == i);\r\n changedArray[objIndex][name] = checked;\r\n setState((state) => {\r\n const nst = { ...state, custList: changedArray, setBtn: '' };\r\n return nst;\r\n });\r\n });\r\n\r\n const setCustCheck = useCallback((val) => {\r\n let newCust = state.custList.map((c) => ({ ...c, active: val }));\r\n setState((state) => {\r\n const nst = { ...state, custList: newCust, setBtn: val ? 'check' : 'uncheck' };\r\n return nst;\r\n });\r\n });\r\n\r\n const handelSubmit = useCallback(async (val) => {\r\n let data = { customerIds: null };\r\n if (val) {\r\n data = { customerIds: state.custList.filter((x) => x.active).map((x) => x.id) };\r\n }\r\n let res = await postFilterCustomers(data);\r\n if (res.success) {\r\n // showToastSuccess(res.message);\r\n props.onClose(true);\r\n dashBoardDataReload();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n });\r\n return (\r\n \r\n \r\n Set Dashboard Layout\r\n \r\n
\r\n\r\n\r\n Theme Colour\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 {state.displayStyles.map((m, i) => {\r\n let Icon = buttonIcons[m.id];\r\n return (\r\n handleBtn(m.id)}\r\n >\r\n
\r\n \r\n\r\n
\r\n
\r\n - \r\n {state?.themes.map((m, i) => {\r\n return (\r\n
- \r\n
\r\n \r\n{state?.themeID === m.id &&\r\n} \r\n );\r\n })}\r\n
\r\n
\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n \r\n \r\n {m?.numberIcon ? {m?.numberIcon}% :
\r\n \r\n \r\n {' '}\r\n {`£${Total.toLocaleString('en-US')}`}\r\n ({m?.title})\r\n
\r\n ) : m.button ? (\r\n {m?.title}
\r\n ) : (\r\n {m?.title}
\r\n )}\r\n {m?.subTittle}\r\n \r\n \r\n {item.customerCompanyName}
;\r\n });\r\n }\r\n setState((st) => ({\r\n ...st,\r\n tilesData: cards[0],\r\n filteredCustomerList: filteredList,\r\n isFilterList: filteredList?.length > 0 ? true : false\r\n }));\r\n }\r\n };\r\n\r\n const pullTheme = async () => {\r\n let dashRes = await getAllDashboardWidgets('dashboard');\r\n setState((st) => ({\r\n ...st,\r\n widgetList: dashRes.data.displayStyles\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n await getDashBoardData();\r\n pullTheme();\r\n }, []);\r\n\r\n useEffect(async () => {\r\n if (props.new) {\r\n window.location.reload();\r\n }\r\n }, [props.new]);\r\n\r\n useEffect(async () => {\r\n await pullDashboardData();\r\n }, [commonState]);\r\n\r\n useEffect(async () => {\r\n if (portalSettings.portalSettingDashboardRefreshTime > 0) {\r\n const intervalId = await setInterval(() => {\r\n getDashBoardData();\r\n }, portalSettings.portalSettingDashboardRefreshTime * 1000);\r\n return () => clearInterval(intervalId);\r\n }\r\n }, [portalSettings.portalSettingDashboardRefreshTime]);\r\n\r\n const showFilterModal = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showFilter: false\r\n }));\r\n val && pullDashboardData();\r\n };\r\n\r\n const handleFilterModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showFilter: true\r\n }));\r\n };\r\n const handleFullScreenModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showDashboardFullScreen: true\r\n }));\r\n };\r\n const closeFullScreenModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showDashboardFullScreen: false\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n {state.showFilter && (\r\n showFilterModal(false)} maxWidth=\"md\">\r\n \r\n )}\r\n\r\n \r\n
\r\n {state.showDashboardFullScreen ? (\r\n \r\n \r\n \r\n \r\n {[...state.filteredCustomerList]}
: 'Filters'} arrow>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\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 InternalDashboard;\r\n","import { FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst DriverTypeDialog = (props) => {\r\n const [state, setState] = useState({ id: null, value: \"\", isError: false });\r\n const { driverTypeID, driverTypeDescription } = props.data.selectedRowData;\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n setState((st) => ({\r\n ...st,\r\n id: driverTypeID,\r\n value: driverTypeDescription,\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n if (/[^\\s]/.test(state.value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.data.isAdd ? props.addRowData(state.value) : props.updateRowData(state);\r\n props.onClose();\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isError: true,\r\n }));\r\n }\r\n };\r\n return (\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={getUrl}\r\n btnTitle=\"Add Driver Type\"\r\n onBtnClick={addBtnClicked}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default DriverType;\r\n","import { FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst BookingStatusDialog = (props) => {\r\n const [state, setState] = useState({ id: null, value: \"\", isError: false });\r\n const { bookingStatusID, bookingStatusDescription } = props.data.selectedRowData;\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n setState((st) => ({\r\n ...st,\r\n id: bookingStatusID,\r\n value: bookingStatusDescription,\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n if (/[^\\s]/.test(state.value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.saveData(state);\r\n props.onClose();\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isError: true,\r\n }));\r\n }\r\n };\r\n return (\r\n <>\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Booking Status\"\r\n onBtnClick={addBtnClicked}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default BookingStatus;\r\n","import { FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst BookingStatusDialog = (props) => {\r\n const [state, setState] = useState({ id: null, value: \"\", isError: false });\r\n const { bookingDateDelayReasonID, bookingDateDelayReasonDescription } = props.data.selectedRowData;\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n setState((st) => ({\r\n ...st,\r\n id: bookingDateDelayReasonID,\r\n value: bookingDateDelayReasonDescription,\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n if (/[^\\s]/.test(state.value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.saveData(state);\r\n props.onClose();\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isError: true,\r\n }));\r\n }\r\n };\r\n return (\r\n <>\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Booking Delay Reason\"\r\n onBtnClick={addBtnClicked}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default BookingDelayReason;\r\n","import { FormHelperText, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { InputText, SecondaryButton, SecondaryCheckbox, MandatoryField } from '../../../../Core/Controls';\r\nimport '../../../commonStyle.scss';\r\n\r\nconst CostCenterDialog = (props) => {\r\n const [state, setState] = useState({\r\n id: null,\r\n value: '',\r\n isChecked: true,\r\n isError: false\r\n });\r\n\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n const { costCentreID, costCentreDescription, costCentreActive, btnLoader } = props.data.selectedRowData;\r\n setState((st) => ({\r\n ...st,\r\n id: costCentreID,\r\n value: costCentreDescription,\r\n isChecked: costCentreActive,\r\n btnLoader: btnLoader\r\n }));\r\n } else {\r\n const { btnLoader } = props.data.selectedRowData;\r\n setState((st) => ({\r\n ...st,\r\n btnLoader: btnLoader\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n if (/[^\\s]/.test(state.value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.saveData(state);\r\n props.onClose();\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isError: true\r\n }));\r\n }\r\n };\r\n return (\r\n <>\r\n \r\n {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n title: 'Edit Cost Centre',\r\n // selectedRowData: row,\r\n selectedRowData: RowData,\r\n isAdd: false\r\n }));\r\n }}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n if (checkhaveAccess?.CanUpdateCustomerCostCentres) {\r\n tempCols.splice(0, 0, { key: 'action', name: 'Action', width: 80, formatter: renderEdit });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const saveData = async (outData) => {\r\n setBtnLoader(true);\r\n let response = await postCostCenter({\r\n costCentreCustomerID: props.customerID,\r\n costCentreID: outData.id || null,\r\n costCentreDescription: outData.value,\r\n costCentreActive: outData?.isChecked\r\n });\r\n if (response) {\r\n response.success\r\n ? showToastSuccess(response.message || 'Cost centre updated successfully')\r\n : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n setBtnLoader(false);\r\n pullApiData();\r\n };\r\n const addBtnClicked = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n title: 'Add Cost Centre',\r\n isAdd: true,\r\n selectedRowData: {}\r\n }));\r\n };\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false\r\n }));\r\n };\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CostCenter;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllServiceAgentFacilities = async () => {\r\n let res = await getWithAuth(`ServiceAgentFacilities`);\r\n return res;\r\n};\r\n\r\nexport const getServiceAgentFacilitiesById = async (id) => {\r\n let res = await getWithAuth(`ServiceAgentFacilities/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postServiceAgentFacilitiesData = async (data) => {\r\n let res = await postWithAuth(`ServiceAgentFacilities`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getServiceAgentFacilitiesById, postServiceAgentFacilitiesData } from '../../../../Core/Services/InternalUser/serviceAgentFacilitiesService';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction ServiceAgentFacilitiesModal(props) {\r\n const [state, setState] = useState({\r\n serviceAgentFacilityID: null,\r\n serviceAgentFacilityName: '',\r\n serviceAgentFacilityActive: true,\r\n errors: {},\r\n serviceAgentFacilityAddInMapFilter: false\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.serviceAgentFacilityID) {\r\n let res = await getServiceAgentFacilitiesById(props.serviceAgentFacilityID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n serviceAgentFacilityID: res.data.serviceAgentFacilityID,\r\n serviceAgentFacilityName: res.data.serviceAgentFacilityName,\r\n serviceAgentFacilityActive: res.data.serviceAgentFacilityActive,\r\n serviceAgentFacilityAddInMapFilter: res.data.serviceAgentFacilityAddInMapFilter\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { serviceAgentFacilityName } = state;\r\n\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!serviceAgentFacilityName.trim()) {\r\n errors.serviceAgentFacilityName = 'Facility Name is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const ServiceAgentData = {\r\n serviceAgentFacilityID: state.serviceAgentFacilityID,\r\n serviceAgentFacilityName: state.serviceAgentFacilityName,\r\n serviceAgentFacilityActive: state.serviceAgentFacilityActive,\r\n serviceAgentFacilityAddInMapFilter: state.serviceAgentFacilityAddInMapFilter\r\n };\r\n let res = await postServiceAgentFacilitiesData(ServiceAgentData);\r\n if (res.success) {\r\n showToastSuccess('ServiceAgentFacilities Updated successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n serviceAgentUpdateHandler(row)} toolTipTitle=\"Edit Service Agent Facility\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const title = state.serviceAgentFacilityID ? 'Update Service Agent Facility' : 'Add Service Agent Facility';\r\n\r\n const closeServiceAgentModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullServiceAgent();\r\n };\r\n\r\n const urlState = 'ServiceAgentFacilities';\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Service Agent Facility\"\r\n onBtnClick={() => serviceAgentUpdateHandler(null)}\r\n />\r\n\r\n {state.open ? (\r\n closeServiceAgentModal(false)} maxWidth=\"md\">\r\n closeServiceAgentModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default ServiceAgentFacilities;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllVehicle = async (filterID) => {\r\n if (filterID === ':' || filterID === undefined || filterID === null) filterID = '';\r\n let res = await getWithAuth(`vehicles?mode=${filterID}`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleById = async (Id) => {\r\n let res = await getWithAuth(`vehicles/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleScreenDropdowns = async () => {\r\n let res = await getWithAuth(`Vehicles/screenDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const getCustomersListDropdowns = async () => {\r\n let res = await getWithAuth(`schedules/Customers_List`);\r\n return res;\r\n};\r\n\r\nexport const getSchedulePlannerDropdowns = async (custId) => {\r\n let res = await getWithAuth(`schedules/SchedulePlanner_Dropdown?CustomerID=${custId}`);\r\n return res;\r\n};\r\n\r\nexport const addVehicle = async (data) => {\r\n let res = await postWithAuth('vehicles', data);\r\n return res;\r\n};\r\n\r\nexport const getRegBasedData = async (data) => {\r\n let res = await getWithAuth(`Vehicles/DVLA/${data}`);\r\n return res;\r\n};\r\n\r\nexport const getTitleData = async (id) => {\r\n let res = await getWithAuth(`Vehicles/VehicleGetTitleData/${id}`);\r\n return res;\r\n};\r\nexport const getSchedulePlannerData = async (fromDate, toDate, customerID, depotsID, serviceAgentID, endUser, fileType, endUserWildCard = '') => {\r\n let res = await getWithAuth(\r\n `Schedules/SchedulePlanner?startDate=${fromDate}&endDate=${toDate}&custId=${customerID}&depot=${depotsID}&AgentID=${serviceAgentID}&endUser=${\r\n endUser || ''\r\n }&Filetype=${fileType}&endUserWildCard=${endUserWildCard}`,\r\n {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n }\r\n );\r\n\r\n return res;\r\n};\r\n\r\nexport const archiveVehicle = async (vehicleID, date) => {\r\n let res = await postWithAuth('vehicles/archive', {\r\n VehicleID: vehicleID,\r\n\r\n Date: date\r\n });\r\n\r\n return res;\r\n};\r\n\r\nexport const unArchiveVehicle = async (vehicleID, date) => {\r\n let res = await postWithAuth('vehicles/unarchive', {\r\n VehicleID: vehicleID,\r\n\r\n Date: date\r\n });\r\n\r\n return res;\r\n};\r\nexport const postSetVehicleMOTandTax = async (data) => {\r\n let res = await postWithAuth(`Vehicles/SetVehicleMOTTAxDate`, data);\r\n return res;\r\n};\r\nexport const getVehicleMOTandTax = async (id, regno) => {\r\n let res = await getWithAuth(`Vehicles/GetVehicleMOTTAxDate/${regno}/${id}`);\r\n return res;\r\n};","import { createContext, useEffect, useState } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport {\r\n addVehicle,\r\n getVehicleById,\r\n getVehicleScreenDropdowns,\r\n getRegBasedData\r\n} from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { find } from 'lodash';\r\n\r\nimport { formatters } from '../../../../Core/Controls';\r\n\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\n\r\nexport const VehicleScreenContext = createContext();\r\n\r\nexport const VehicleProvider = (props) => {\r\n let history = useHistory();\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [state, setState] = useState({\r\n customerAutoApprovalLimit: '',\r\n vehicleFuelType: '',\r\n errors: {},\r\n VehicleID: null,\r\n regNumber: '',\r\n customerID: '',\r\n customerName: '',\r\n customerList: [],\r\n depotsID: '',\r\n depotName: '',\r\n depotsList: [],\r\n modelID: '',\r\n modelList: [],\r\n ModelAsPerMake: [],\r\n vehicleAsPerCategoryList: [],\r\n depotWithCustList: [],\r\n makeID: '',\r\n makeList: [],\r\n wheelPlan: '',\r\n vehicleTypeID: '',\r\n vehicleTypeList: [],\r\n vehicleTypeDescription: '',\r\n vehicleCategoryID: '',\r\n vehicleCategoryDescription: '',\r\n vehicleCategoryList: [],\r\n capacity: '',\r\n co2Emission: '',\r\n fuelType: '',\r\n costCentreID: '',\r\n costCentreList: [],\r\n ownershipTypeID: '',\r\n ownershipTypeList: [],\r\n chassisNumber: '',\r\n vehiclePrimaryServiceAgentID: '',\r\n vehiclePrimaryServiceAgentIDList: [],\r\n vehicleEndUserID: '',\r\n vehicleEndUserIDList: [],\r\n fuelTypeList: [],\r\n vehicleSecondaryServiceAgentID: null\r\n });\r\n\r\n const [otherFields, setOtherFields] = useState({\r\n errors: {},\r\n assetNumber: '',\r\n fleetNumber: '',\r\n ministryNumber: '',\r\n description: '',\r\n colour: '',\r\n MPG: '',\r\n P11DValue: '',\r\n radioCode: '',\r\n vehicleTankCapacity: '',\r\n vehicleTelematicsIMEI: '',\r\n vehicleNextInspectionDate: '',\r\n vehicleNextServiceDateDue: '',\r\n vehicleNextServiceMileage: '',\r\n vehicleCheckFrequency: '',\r\n vehicleMaintenanceRef: '',\r\n primaryAgent: '',\r\n vehicleLatestMileage: 'N/A',\r\n vehicleLastMileageDate: 'N/A',\r\n displayBatteryLevel: 'N',\r\n vehicleBatteryLevelDate: 'N/A',\r\n vehicleLevelOfCharge: '',\r\n vehicleStateOfCharge: '',\r\n vehicleServiceScheduleID: '',\r\n vehicleDOTScheduleID: ''\r\n });\r\n\r\n const [jobFields, setJobFields] = useState({\r\n vehicleV5CRegistrationUptoDate: false,\r\n jobAdminFee: '',\r\n odometerUnitCode: '',\r\n odometerUnitCodeList: [],\r\n cabTypeID: '',\r\n cabTypeList: [],\r\n vehicleSuspensionTypeID: '',\r\n suspensionList: [],\r\n vehicleBodyTypeID: '',\r\n vehicleBodyTypeList: [],\r\n vehicleConfigurationTypeID: '',\r\n configurationTypeList: [],\r\n vehicleRFLResponsible: false,\r\n euro4Compliant: false,\r\n RDE2Compliant: false,\r\n shuntVehicle: false,\r\n vehicleCoveredByFleetInsurance: false,\r\n vehicleIsSORN: false,\r\n vehicleMaintenanceRef: '',\r\n hireSupplierID: '',\r\n hireSupplierList: [],\r\n hireHistoryID: '',\r\n hireHistoryList: [],\r\n vehicleMaintenanceProviderID: '',\r\n vehicleMaintenanceProviderList: [],\r\n vehicleLatestMileage: '',\r\n vehicleAnnualMileage: '',\r\n vehicleTaxAmount: ''\r\n });\r\n\r\n const [dateFields, setDateFields] = useState({\r\n dateOfReg1: '',\r\n fleetDate: '',\r\n dateOfReg: '',\r\n motExpiry: '',\r\n motExpiry1: '',\r\n taxDue: '',\r\n insuranceRenewalDate: '',\r\n vehicleRMStartDate: '',\r\n vehicleVOREndDate: '',\r\n vehicleRMEndDate: '',\r\n vehicleRMStartDate: ''\r\n });\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n makeIDValue: null,\r\n modelIDValue: null,\r\n fuelTypeValue: null,\r\n vehiclePrimaryServiceAgentIDValue: null,\r\n vehicleEndUserIDValue: null,\r\n vehicleSecondaryServiceAgentIDValue: null,\r\n vehicleCategoryIDValue: null,\r\n vehicleTypeIDValue: null,\r\n costCentreIDValue: null,\r\n ownershipTypeIDValue: null,\r\n odometerUnitCodeValue: null,\r\n cabTypeIDValue: null,\r\n vehicleMaintenanceProviderIDValue: null,\r\n vehicleSuspensionTypeIDValue: null,\r\n vehicleBodyTypeIDValue: null,\r\n vehicleConfigurationTypeIDValue: null,\r\n vehicleServiceScheduleIDValue: null,\r\n vehicleDOTScheduleIDValue: null\r\n });\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n\r\n const pullMileageData = async (VehicleID) => {\r\n if (VehicleID) {\r\n let res = await getVehicleById(VehicleID);\r\n const data = res.data?.details[0];\r\n\r\n setOtherFields((st) => ({\r\n ...st,\r\n vehicleLatestMileage: data.vehicleLatestMileage || 'N/A',\r\n vehicleLastMileageDate: data.vehicleLastMileageDate ? moment(data.vehicleLastMileageDate).format('DD/MM/YYYY') : 'N/A',\r\n displayBatteryLevel: data.displayBatteryLevel,\r\n vehicleBatteryLevelDate: formatters.DateFormatter(data.vehicleBatteryLevelDate),\r\n vehicleLevelOfCharge: data.vehicleLevelOfCharge,\r\n vehicleStateOfCharge: data.vehicleStateOfCharge\r\n }));\r\n }\r\n };\r\n const getVehicleDataById = async () => {\r\n let res = await getVehicleById(props.VehicleID);\r\n const data = res.data.details[0];\r\n if (data) {\r\n setState((st) => ({\r\n ...st,\r\n VehicleID: data.vehicleID,\r\n regNumber: data.vehicleRegNumber,\r\n customerID: data.vehicleCustomerID,\r\n depotsID: data.vehicleDepotID,\r\n modelID: data.vehicleModel,\r\n makeID: data.vehicleMake,\r\n wheelPlan: data.vehicleWheelPlan,\r\n vehicleTypeID: data.vehicleTypeID,\r\n vehicleCategoryID: data.vehicleCategoryID,\r\n customerName: data.customer,\r\n depotName: data.depotName,\r\n driver: data.driver,\r\n vehicleDriverID: data.vehicleDriverID,\r\n vehicleCategoryDescription: data.vehicleCategoryDescription,\r\n vehicleTypeDescription: data.vehicleTypeDescription,\r\n capacity: data.vehicleEngineCapacity,\r\n co2Emission: data.vehicleCO2Emission,\r\n fuelType: data.vehicleFuelTypeID,\r\n vehicleFuelType: data.vehicleFuelType,\r\n costCentreID: data.vehicleCostCentreID,\r\n ownershipTypeID: data.vehicleOwnershipTypeID,\r\n chassisNumber: data.vehicleChassisNumber,\r\n vehiclePrimaryServiceAgentID: data.vehiclePrimaryServiceAgentID,\r\n vehicleEndUserID: data.vehicleEndUserID,\r\n endUserName: data.endUserName || '',\r\n vehicleSecondaryServiceAgentID: data.vehicleSecondaryServiceAgentID,\r\n vehicleDirectVisionStandardRating: data.vehicleDirectVisionStandardRating,\r\n fileCount: data.fileCount\r\n }));\r\n setOtherFields((st) => ({\r\n ...st,\r\n assetNumber: data.vehicleAssetNumber,\r\n fleetNumber: data.vehicleFleetNumber,\r\n ministryNumber: data.vehicleMinistryNumber,\r\n description: data?.vehicleDescription,\r\n colour: data.vehicleColour,\r\n MPG: data.vehicleMPG,\r\n P11DValue: data.vehicleP11DValue,\r\n vehicleNextServiceMileage: data.vehicleNextServiceMileage,\r\n vehicleCheckFrequency: data.vehicleCheckFrequency,\r\n vehicleMaintenanceRef: data.vehicleMaintenanceRef,\r\n primaryAgent: data.primaryAgent,\r\n vehicleLatestMileage: data.vehicleLatestMileage,\r\n vehicleLastMileageDate: data.vehicleLastMileageDate ? moment(data.vehicleLastMileageDate).format('DD/MM/YYYY') : 'N/A',\r\n displayBatteryLevel: data.displayBatteryLevel,\r\n vehicleBatteryLevelDate: formatters.DateFormatter(data.vehicleBatteryLevelDate),\r\n vehicleLevelOfCharge: data.vehicleLevelOfCharge,\r\n vehicleStateOfCharge: data.vehicleStateOfCharge,\r\n service: data.service,\r\n schedule: data.schedule\r\n }));\r\n setJobFields((st) => ({\r\n ...st,\r\n radioCode: data.vehicleRadioCode,\r\n vehicleTankCapacity: data.vehicleTankCapacity,\r\n vehicleTelematicsIMEI: data.vehicleTelematicsIMEI,\r\n vehicleV5CRegistrationUptoDate: data.vehicleV5CRegistrationUptoDate,\r\n jobAdminFee: data.vehicleJobAdminFee,\r\n odometerUnitCode: data.vehicleOdometerUnitCode,\r\n cabTypeID: data.vehicleCabTypeID,\r\n vehicleSuspensionTypeID: data.vehicleSuspensionTypeID,\r\n vehicleLatestMileage: data.vehicleLatestMileage,\r\n vehicleBodyTypeID: data.vehicleBodyTypeID,\r\n vehicleConfigurationTypeID: data.vehicleConfigurationTypeID,\r\n vehicleRFLResponsible: data.vehicleRFLResponsible,\r\n vehicleMaintenanceRef: data.vehicleMaintenanceRef,\r\n hireSupplierID: data.vehicleHireSupplierID,\r\n hireHistoryID: data.vehicleHireHistoryID,\r\n vehicleMaintenanceProviderID: data.vehicleMaintenanceProviderID,\r\n vehicleAnnualMileage: data.vehicleAnnualMileage,\r\n vehicleTaxAmount: data.vehicleTaxAmount,\r\n vorVehicleID: data.vorVehicleID,\r\n vehicleServiceScheduleID: data.vehicleServiceScheduleID,\r\n vehicleDOTScheduleID: data.vehicleDOTScheduleID,\r\n vehicleActive: data.vehicleActive\r\n }));\r\n\r\n setDateFields((st) => ({\r\n ...st,\r\n dateOfReg: formatters.DateFormatter(data.vehicleDateOfRegistration),\r\n dateOfReg1: formatters.YearFormatter(data.vehicleDateOfRegistration),\r\n fleetDate: formatters.DateFormatter(data.vehicleFleetDate),\r\n vehicleNextInspectionDate: formatters.DateFormatter(data.vehicleNextInspectionDate),\r\n vehicleNextServiceDateDue: formatters.DateFormatter(data.vehicleNextServiceDateDue),\r\n vehicleNextServiceDateDueDisplay: data.vehicleNextServiceDateDue,\r\n motExpiry: formatters.DateFormatter(data.vehicleMOTExpiry),\r\n motExpiry1: formatters.YearFormatter(data.vehicleMOTExpiry),\r\n taxDue: formatters.DateFormatter(data.vehicleTaxDue),\r\n insuranceRenewalDate: formatters.DateFormatter(data.vehicleInsuranceRenewalDate),\r\n euro4Compliant: data.vehicleEuro4Compliant,\r\n RDE2Compliant: data.vehicleRDE2Compliant,\r\n shuntVehicle: data.vehicleShuntVehicle,\r\n vehicleRMEndDate: formatters.DateFormatter(data.vehicleRMEndDate),\r\n vehicleRMStartDate: formatters.DateFormatter(data.vehicleRMStartDate),\r\n vehicleCoveredByFleetInsurance: data.vehicleCoveredByFleetInsurance,\r\n vehicleIsSORN: data.vehicleIsSORN,\r\n activeRecallCount: data.activeRecallCount,\r\n vehicleNextServiceMileage: data.vehicleNextServiceMileage,\r\n vehicleID: data.vehicleID,\r\n serviceAgentID: data.serviceAgentID,\r\n vehicleServiceScheduleID: data.vehicleServiceScheduleID,\r\n vehicleDOTScheduleID: data.vehicleDOTScheduleID\r\n }));\r\n } else {\r\n showToastError('Vehicle details not found');\r\n history.push(`/controller/Vehicles`);\r\n }\r\n };\r\n useEffect(async () => {\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n depotsList: res.data.depots,\r\n modelList: res.data.models.map((w) => ({\r\n ...w,\r\n id: w.name,\r\n name: w.name\r\n })),\r\n vehicleTypeList: res.data.vehicleTypes,\r\n makeList: res.data.makes.map((w) => ({\r\n id: w.name,\r\n name: w.name,\r\n makeId: w.id\r\n })),\r\n costCentreList: res.data.costCentres,\r\n ownershipTypeList: res.data.vehicleOwnershipTypes,\r\n vehicleCategoryList: res.data.vehicleCategories,\r\n vehiclePrimaryServiceAgentIDList: res.data.serviceAgents,\r\n vehicleEndUserIDList: res.data.endUsers,\r\n fuelTypeList: res.data.fuelTypes\r\n }));\r\n setJobFields((st) => ({\r\n ...st,\r\n cabTypeList: res.data.cabTypes,\r\n odometerUnitCodeList: res.data.vehicleOdometerUnits,\r\n suspensionList: res.data.suspensionTypes,\r\n vehicleBodyTypeList: res.data.bodyTypes,\r\n configurationTypeList: res.data.configurationTypes,\r\n hireSupplierList: res.data.vehicleHireReasons,\r\n hireHistoryList: res.data.vehicleHireTypes,\r\n vehicleMaintenanceProviderList: res.data.maintenanceProviders,\r\n scheduleEvents: res.data.scheduleEvents,\r\n scheduleInspection: res.data.scheduleInspection || []\r\n }));\r\n\r\n if (props.VehicleID) {\r\n getVehicleDataById();\r\n } else {\r\n setDateFields((st) => ({\r\n ...st,\r\n fleetDate: new Date().toISOString().slice(0, 10)\r\n }));\r\n }\r\n\r\n if (props.customerID) {\r\n setState((st) => ({\r\n ...st,\r\n customerID: props.customerID\r\n }));\r\n }\r\n }, [props.VehicleID, props.vorID, props.customerID]);\r\n\r\n useEffect(async () => {\r\n let ModelListAsPerMake = [];\r\n if (tempOptions.makeIDValue) {\r\n var item = state.makeList.find((item) => item.id === tempOptions.makeIDValue.id);\r\n if (item) {\r\n state.modelList.filter((obj) => {\r\n if (item.makeId === obj.modelMakeID) {\r\n ModelListAsPerMake.push(obj);\r\n }\r\n });\r\n }\r\n setState((st) => ({ ...st, ModelAsPerMake: ModelListAsPerMake }));\r\n }\r\n let vehicleType = [];\r\n if (tempOptions.vehicleCategoryIDValue) {\r\n state.vehicleTypeList.filter((obj) => {\r\n if (tempOptions.vehicleCategoryIDValue.id === obj.vehicleTypeCategoryID) {\r\n vehicleType.push(obj);\r\n }\r\n });\r\n setState((st) => ({ ...st, vehicleAsPerCategoryList: vehicleType }));\r\n }\r\n let Depots = [];\r\n // if (state.customerID) {\r\n // state.depotsList.filter((obj) => {\r\n // if (state.customerID === obj.depotCustomerID) {\r\n // Depots.push(obj);\r\n // }\r\n // });\r\n // setState((st) => ({ ...st, depotWithCustList: Depots }));\r\n // }\r\n\r\n if (isCustomer) {\r\n setState((st) => ({ ...st, depotWithCustList: state.depotsList }));\r\n } else {\r\n if (tempOptions.customerIDValue) {\r\n state.depotsList.filter((obj) => {\r\n if (tempOptions.customerIDValue.id === obj.depotCustomerID) {\r\n Depots.push(obj);\r\n }\r\n });\r\n setState((st) => ({ ...st, depotWithCustList: Depots }));\r\n }\r\n }\r\n }, [tempOptions.vehicleCategoryIDValue, tempOptions.makeIDValue, tempOptions.customerIDValue, isCustomer, state.depotsList]);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID) {\r\n newSt.customerIDValue = state.customerList.find(({ id }) => id === +state.customerID);\r\n }\r\n if (state.depotsID) {\r\n newSt.depotsIDValue = state.depotsList.find(({ id }) => id === state.depotsID);\r\n }\r\n if (state.makeID) {\r\n newSt.makeIDValue = state.makeList.find(({ id }) => id === state.makeID);\r\n }\r\n if (state.modelID) {\r\n newSt.modelIDValue = state.modelList.find(({ id }) => id === state.modelID);\r\n }\r\n if (state.fuelType) {\r\n newSt.fuelTypeValue = state.fuelTypeList.find(({ id }) => id === state.fuelType);\r\n }\r\n if (state.vehiclePrimaryServiceAgentID) {\r\n newSt.vehiclePrimaryServiceAgentIDValue = state.vehiclePrimaryServiceAgentIDList.find(({ id }) => id === state.vehiclePrimaryServiceAgentID);\r\n }\r\n if (state.vehicleSecondaryServiceAgentID) {\r\n newSt.vehicleSecondaryServiceAgentIDValue = state.vehiclePrimaryServiceAgentIDList.find(({ id }) => id === state.vehicleSecondaryServiceAgentID);\r\n }\r\n if (state.vehicleEndUserID) {\r\n newSt.vehicleEndUserIDValue = state.vehicleEndUserIDList.find(({ id }) => id === state.vehicleEndUserID);\r\n }\r\n if (state.vehicleCategoryID) {\r\n newSt.vehicleCategoryIDValue = state.vehicleCategoryList.find(({ id }) => id === state.vehicleCategoryID);\r\n }\r\n if (state.vehicleTypeID) {\r\n newSt.vehicleTypeIDValue = state.vehicleTypeList.find(({ id }) => id === state.vehicleTypeID);\r\n }\r\n if (state.costCentreID) {\r\n newSt.costCentreIDValue = state.costCentreList.find(({ id }) => id === state.costCentreID);\r\n }\r\n if (state.ownershipTypeID) {\r\n newSt.ownershipTypeIDValue = state.ownershipTypeList.find(({ id }) => id === state.ownershipTypeID);\r\n }\r\n\r\n if (jobFields.odometerUnitCode) {\r\n newSt.odometerUnitCodeValue = jobFields.odometerUnitCodeList.find(({ id }) => id === jobFields.odometerUnitCode);\r\n }\r\n\r\n if (jobFields.cabTypeID) {\r\n newSt.cabTypeIDValue = jobFields.cabTypeList.find(({ id }) => id === jobFields.cabTypeID);\r\n }\r\n\r\n if (jobFields.vehicleMaintenanceProviderID) {\r\n newSt.vehicleMaintenanceProviderIDValue = jobFields.vehicleMaintenanceProviderList.find(({ id }) => id === jobFields.vehicleMaintenanceProviderID);\r\n }\r\n\r\n if (jobFields.vehicleSuspensionTypeID) {\r\n newSt.vehicleSuspensionTypeIDValue = jobFields.suspensionList.find(({ id }) => id === jobFields.vehicleSuspensionTypeID);\r\n }\r\n\r\n if (jobFields.vehicleBodyTypeID) {\r\n newSt.vehicleBodyTypeIDValue = jobFields.vehicleBodyTypeList.find(({ id }) => id === jobFields.vehicleBodyTypeID);\r\n }\r\n\r\n if (jobFields.vehicleConfigurationTypeID) {\r\n newSt.vehicleConfigurationTypeIDValue = jobFields.configurationTypeList.find(({ id }) => id === jobFields.vehicleConfigurationTypeID);\r\n }\r\n if (jobFields.vehicleServiceScheduleID) {\r\n newSt.vehicleServiceScheduleIDValue = jobFields.scheduleEvents.find(({ id }) => id === jobFields.vehicleServiceScheduleID);\r\n }\r\n if (jobFields.vehicleDOTScheduleID) {\r\n newSt.vehicleDOTScheduleIDValue = jobFields.scheduleInspection.find(({ id }) => id === jobFields.vehicleDOTScheduleID);\r\n }\r\n\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.customerID,\r\n state.depotsID,\r\n state.makeID,\r\n state.modelID,\r\n state.fuelType,\r\n state.vehiclePrimaryServiceAgentID,\r\n state.vehicleSecondaryServiceAgentID,\r\n state.vehicleCategoryID,\r\n state.vehicleTypeID,\r\n state.costCentreID,\r\n state.ownershipTypeID,\r\n state.vehicleEndUserID,\r\n jobFields.odometerUnitCode,\r\n jobFields.cabTypeID,\r\n jobFields.vehicleMaintenanceProviderID,\r\n jobFields.vehicleSuspensionTypeID,\r\n jobFields.vehicleBodyTypeID,\r\n jobFields.vehicleConfigurationTypeID,\r\n jobFields.vehicleDOTScheduleID\r\n ]);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n // setTempOptions((st) => ({ ...st, [nm]: val }));\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n if (nm === 'makeIDValue') {\r\n newSt.modelIDValue = null;\r\n }\r\n if (nm === 'vehicleCategoryIDValue') {\r\n newSt.vehicleTypeIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleTabPress = (e) => {\r\n if (e.keyCode == 9) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n pullRegBasedData(e.target.value);\r\n }\r\n };\r\n const fetchIdFromList = (list, name) => {\r\n return name ? find(list, (m) => m.name?.toLowerCase() === name.toLowerCase())?.id : null;\r\n };\r\n const pullRegBasedData = async (value) => {\r\n let res = await getRegBasedData(value.toUpperCase());\r\n if (res.success) {\r\n const data = res?.data?.mot;\r\n if (res?.data?.message) {\r\n showToastError(res?.data?.message);\r\n } else {\r\n setOtherFields((st) => ({\r\n ...st,\r\n colour: data.colour\r\n }));\r\n setDateFields((st) => ({\r\n ...st,\r\n dateOfReg: formatters.DateFormatter(data.registrationDate),\r\n taxDue: formatters.DateFormatter(data.taxDueDate),\r\n motExpiry: formatters.DateFormatter(data.motExpiryDate)\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n regNumber: data.registrationNumber,\r\n customerID: data.vehicleCustomerId,\r\n makeID: formatters.capitalize(data.make),\r\n modelID: formatters.capitalize(data.model),\r\n wheelPlan: data.wheelplan,\r\n capacity: data.engineCapacity,\r\n co2Emission: data.co2Emissions,\r\n fuelType: fetchIdFromList(st.fuelTypeList, data?.fuelType),\r\n vehicleTypeID: fetchIdFromList(st.vehicleTypeList, data?.vehicleType),\r\n vehicleCategoryID: fetchIdFromList(st.vehicleCategoryList, data?.vehicleCategory)\r\n }));\r\n }\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n const dateFieldsChange = (e) => {\r\n const { name, value } = e.target;\r\n setDateFields((st) => ({ ...st, [name]: value }));\r\n };\r\n const jobFieldsChange = (e) => {\r\n const { name, value } = e.target;\r\n setJobFields((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const otherFieldsChange = (e) => {\r\n const { name, value } = e.target;\r\n setOtherFields((st) => ({ ...st, [name]: value }));\r\n };\r\n const validations = () => {\r\n const { regNumber } = state;\r\n const { customerIDValue, depotsIDValue, vehiclePrimaryServiceAgentIDValue, vehicleCategoryIDValue, vehicleTypeIDValue } = tempOptions;\r\n let formIsValid = true;\r\n let errors = {};\r\n let errors2 = {};\r\n if (!vehicleTypeIDValue) {\r\n errors.vehicleTypeID = 'The Vehicle Type field is required';\r\n formIsValid = false;\r\n }\r\n if (!vehicleCategoryIDValue) {\r\n errors.vehicleCategoryID = 'The Category field is required';\r\n formIsValid = false;\r\n }\r\n if (!depotsIDValue) {\r\n errors.depotsID = 'The depot field is required';\r\n formIsValid = false;\r\n }\r\n if (!customerIDValue && !isCustomer) {\r\n errors.customerID = 'The Customer field is required';\r\n formIsValid = false;\r\n }\r\n if (!regNumber) {\r\n errors.regNumber = 'Reg Number is required';\r\n formIsValid = false;\r\n }\r\n if (!vehiclePrimaryServiceAgentIDValue) {\r\n errors.vehiclePrimaryServiceAgentID = 'Primary service agent is required';\r\n formIsValid = false;\r\n }\r\n if (!dateFields.fleetDate) {\r\n errors2.fleetDate = 'Fleet Date is required';\r\n formIsValid = false;\r\n }\r\n // if (!dateFields.vehicleNextInspectionDate) {\r\n // errors2.vehicleNextInspectionDate = 'Next inspection date is required';\r\n // formIsValid = false;\r\n // }\r\n // if (!dateFields.vehicleNextServiceDateDue) {\r\n // errors2.vehicleNextServiceDateDue = 'First service due Date is required';\r\n // formIsValid = false;\r\n // }\r\n if (!dateFields.dateOfReg) {\r\n errors2.dateOfReg = 'Date of reg is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n setOtherFields((st) => ({ ...st, errors: errors2 }));\r\n\r\n return formIsValid;\r\n };\r\n\r\n const showRatingModal = (name, value) => {\r\n setState((st) => ({ ...st, showRating: true, vehicleDirectVisionStandardRating: value }));\r\n };\r\n\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setJobFields((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n const handleClick = (name, value) => {\r\n setJobFields((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const formData = {\r\n VehicleID: state.VehicleID,\r\n vehicleRegNumber: state.regNumber,\r\n vehicleCustomerId: isCustomer ? null : tempOptions.customerIDValue?.id,\r\n vehicleDepotID: tempOptions.depotsIDValue?.id,\r\n vehicleModel: tempOptions.modelIDValue?.id,\r\n vehicleMake: tempOptions.makeIDValue?.id,\r\n vehicleWheelPlan: state.wheelPlan,\r\n vehicleTypeID: tempOptions.vehicleTypeIDValue?.id,\r\n vehicleCategoryID: tempOptions.vehicleCategoryIDValue?.id,\r\n vehicleEngineCapacity: state.capacity,\r\n vehicleCO2Emission: state.co2Emission,\r\n vehicleChassisNumber: state.chassisNumber,\r\n vehicleFuelTypeID: tempOptions.fuelTypeValue?.id,\r\n vehicleCostCentreID: tempOptions.costCentreIDValue?.id,\r\n vehicleOwnershipTypeID: tempOptions.ownershipTypeIDValue?.id,\r\n vehiclePrimaryServiceAgentID: tempOptions.vehiclePrimaryServiceAgentIDValue?.id,\r\n vehicleEndUserID: tempOptions.vehicleEndUserIDValue?.id || null,\r\n vehicleSecondaryServiceAgentID: tempOptions.vehicleSecondaryServiceAgentIDValue?.id,\r\n vehicleDirectVisionStandardRating: state.vehicleDirectVisionStandardRating,\r\n vehicleServiceScheduleID: tempOptions.vehicleServiceScheduleIDValue?.id,\r\n vehicleDOTScheduleID: tempOptions.vehicleDOTScheduleIDValue?.id,\r\n vehicleAssetNumber: otherFields.assetNumber,\r\n vehicleFleetNumber: otherFields.fleetNumber,\r\n vehicleMinistryNumber: otherFields.ministryNumber,\r\n vehicleDescription: otherFields.description,\r\n vehicleColour: otherFields.colour,\r\n vehicleMPG: otherFields.MPG,\r\n vehicleP11DValue: otherFields.P11DValue,\r\n vehicleNextServiceMileage: otherFields.vehicleNextServiceMileage,\r\n vehicleCheckFrequency: otherFields.vehicleCheckFrequency,\r\n\r\n vehicleRadioCode: jobFields.radioCode,\r\n vehicleTankCapacity: jobFields.vehicleTankCapacity,\r\n vehicleTelematicsIMEI: jobFields.vehicleTelematicsIMEI,\r\n vehicleV5CRegistrationUptoDate: jobFields.vehicleV5CRegistrationUptoDate,\r\n vehicleJobAdminFee: jobFields.jobAdminFee,\r\n vehicleOdometerUnitCode: tempOptions.odometerUnitCodeValue?.id,\r\n vehicleCabTypeID: tempOptions.cabTypeIDValue?.id,\r\n vehicleSuspensionTypeID: tempOptions.vehicleSuspensionTypeIDValue?.id,\r\n vehicleBodyTypeID: tempOptions.vehicleBodyTypeIDValue?.id,\r\n vehicleConfigurationTypeID: tempOptions.vehicleConfigurationTypeIDValue?.id,\r\n vehicleRFLResponsible: jobFields.vehicleRFLResponsible,\r\n vehicleMaintenanceRef: jobFields.vehicleMaintenanceRef,\r\n vehicleHireSupplierID: jobFields.hireSupplierID,\r\n vehicleHireHistoryID: jobFields.hireHistoryID,\r\n vehicleMaintenanceProviderID: tempOptions.vehicleMaintenanceProviderIDValue?.id,\r\n vehicleLatestMileage: jobFields.vehicleLatestMileage,\r\n vehicleAnnualMileage: jobFields.vehicleAnnualMileage,\r\n vehicleTaxAmount: jobFields.vehicleTaxAmount,\r\n\r\n vehicleFleetDate: dateFields.fleetDate,\r\n vehicleNextInspectionDate: dateFields.vehicleNextInspectionDate,\r\n vehicleNextServiceDateDue: dateFields.vehicleNextServiceDateDue,\r\n vehicleInsuranceRenewalDate: dateFields.insuranceRenewalDate,\r\n vehicleEuro4Compliant: dateFields.euro4Compliant,\r\n vehicleRDE2Compliant: dateFields.RDE2Compliant,\r\n vehicleShuntVehicle: dateFields.shuntVehicle,\r\n vehicleRMEndDate: dateFields.vehicleRMEndDate,\r\n vehicleRMStartDate: dateFields.vehicleRMStartDate,\r\n vehicleCoveredByFleetInsurance: dateFields.vehicleCoveredByFleetInsurance,\r\n vehicleIsSORN: dateFields.vehicleIsSORN,\r\n vehicleDateOfRegistration: dateFields.dateOfReg,\r\n vehicleMOTExpiry: dateFields.motExpiry,\r\n vehicleTaxDue: dateFields.taxDue\r\n };\r\n setBtnLoader(true);\r\n let res = await addVehicle(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onFormSubmit(true);\r\n !state.VehicleID && history.push(`/controller/editVehicle/${res.data.vehicleID}`);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n */}\r\n
*/}\r\n \r\n {!checkToshowBreadCrumbs ? \r\n \r\n \r\n\r\n {!isCustomer && (\r\n \r\n \r\n Customer\r\n \r\n {/* {state.errors.customerID} \r\n \r\n )}\r\n \r\n \r\n Depot\r\n \r\n {/* {state.errors.depotsID} \r\n \r\n \r\n End User \r\n \r\n \r\n Make \r\n {/* \r\n \r\n Model \r\n {/* \r\n \r\n Fuel Type \r\n {/* \r\n \r\n \r\n Primary Service Agent\r\n \r\n {/* {state.errors.vehiclePrimaryServiceAgentID} \r\n \r\n \r\n Secondary Service Agent \r\n {/* \r\n \r\n \r\n Vehicle Category\r\n \r\n {/* {state.errors.vehicleCategoryID} \r\n \r\n \r\n \r\n Vehicle Type\r\n \r\n {/* {state.errors.vehicleTypeID} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Cost Centre \r\n {/* {state.errors.costCentreID} \r\n \r\n \r\n Ownership Type \r\n {/* {state.errors.ownershipTypeID} \r\n \r\n \r\n \r\n {/* \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 props.onFormSubmit(false)} fullWidth className=\"submit_btn\">\r\n Cancel\r\n \r\n \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 ServiceAgentDetails;\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, CustomColorButton, DatePicker, DateTimePicker, SelectBox, SingleSelect, formatters } from '../../../../Core/Controls';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport './defect.scss';\r\nimport moment from 'moment';\r\nimport { getAllScheduleDropdowns } from '../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport {\r\n postAgentArrivalTime,\r\n postTechnicianSignOff,\r\n postVehicalRecoveredTime,\r\n postAdministratorSignOff,\r\n postWorkinProgress\r\n} from '../../../../Core/Services/InternalUser/Maintenance/DefectBreackDownStepper/DefectBreackDownStepper';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { ChipWithoutLable } from '../../../../Core/Controls/Inputs/DatePicker';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport ServiceAgentDetails from '../../Controllers/DetailsModal/serviceAgent';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport HourglassEmptyIcon from '@material-ui/icons/HourglassEmpty';\r\n\r\nconst ServiceAgentArrivedDate = (props) => {\r\n const [state, setState] = useState({\r\n // arrivedDate: props.isDateMandatoey ? moment().format('YYYY-MM-DDTHH:mm') : '',\r\n arrivedDate: '',\r\n errors: {},\r\n serviceAgentID: props.jobData.jobServiceAgentID,\r\n serviceAgentIDValue: null,\r\n eTA: props.jobData?.vehicleJobProgressDateETA || ''\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let newSt = {};\r\n let res = await getAllScheduleDropdowns(props.userData.defectVehicleID || props.userData.vehicleID);\r\n if (state.serviceAgentID && res.data.serviceAgents.length > 0) {\r\n newSt.serviceAgentIDValue = res.data.serviceAgents.find(({ id }) => id === state.serviceAgentID);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentsList: res.data.serviceAgents,\r\n ...newSt\r\n }));\r\n }, []);\r\n\r\n const dateFieldsChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const validations = () => {\r\n const { serviceAgentIDValue } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!serviceAgentIDValue && props.fromPage === 'serviceAgent') {\r\n errors.serviceAgentIDValue = ' This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const SubmitHandler = async (isValue) => {\r\n let FormData;\r\n if (validations()) {\r\n if (props.fromPage === 'serviceAgent') {\r\n FormData = {\r\n defectID: props.defectID,\r\n jobID: props.jobData.vehicleJobProgressJobID,\r\n arrivedDate: state.arrivedDate,\r\n serviceAgentID: state.serviceAgentIDValue?.id,\r\n eTA: state.eTA || ''\r\n };\r\n let res = await postAgentArrivalTime(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Service agent arrived added successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n if (props.fromPage === 'workInProgress') {\r\n FormData = {\r\n defectID: props.defectID,\r\n jobID: props.jobData.vehicleJobProgressJobID,\r\n vehicleJobProgressDateWorkInProgress: state.arrivedDate,\r\n status: isValue\r\n };\r\n let res = await postWorkinProgress(FormData);\r\n if (res.success) {\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n if (props.fromPage === 'vehicleArrived') {\r\n FormData = {\r\n defectID: props.defectID,\r\n jobID: props.jobData.vehicleJobProgressJobID,\r\n defectDateVehicleRecovered: state.arrivedDate,\r\n defectLocation: state.defectLocation\r\n };\r\n let res = await postVehicalRecoveredTime(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Vehicle arrived added successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const closeServiceAgentModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showSaModal: false\r\n }));\r\n };\r\n\r\n const handleShowServiceAgentModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showSaModal: true\r\n }));\r\n };\r\n\r\n const sATitle = props.jobData?.vehicleJobProgressDateAgentAssigned ? 'Set Arrived Date' : 'Assign Service Agent';\r\n const { vehicleJobProgressStatusCode, vehicleJobProgressDateWorkInProgress, recoveryRequired } = props.jobData;\r\n let WorkInTitle = vehicleJobProgressStatusCode == 'WP' ? 'Work Completed Date' : vehicleJobProgressStatusCode == 'AR' ? 'Work Started Date' : 'Date';\r\n let showDateNdBtn = !recoveryRequired && vehicleJobProgressStatusCode == 'WP';\r\n return (\r\n \r\n \r\n Technician Signature\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n\r\n \r\n {!state.isDisabled && (\r\n \r\n \r\n )}\r\n
\r\n\r\n {state.imgtechniciansign ? (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n\r\n \r\n {/* \r\n {!state.isDisabled && (\r\n \r\n \r\n )}\r\n
\r\n\r\n {state.imgadministartorsign ? (\r\n */}\r\n \r\n Administrator Signature\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n {/*
*/}\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n\r\n \r\n \r\n {!isDriver && checkhaveAccess?.CanViewJobs ? (\r\n windowWidth < 1641 ? (\r\n <>\r\n
\r\n \r\n \r\n {label.value}\r\n \r\n
\r\n \r\n {label.AgentName ? `${label.AgentName}` : label.title}\r\n {/* {!label.value && label.isBtn ? (\r\n {\r\n popUpHandler(label.title);\r\n }}\r\n disabled={activeStep === i ? false : true}\r\n >\r\n {label.isBtn}\r\n \r\n ) : null} */}\r\n
\r\n \r\n
\r\n
\r\n );\r\n };\r\n return (\r\n \r\n {props.note.note}\r\n
\r\n \r\n {props.note.createdBy} @ {moment(props.note.dateCreated).format('LLL')}\r\n
\r\n \r\n \r\n ))}\r\n \r\n )}\r\n {state.showSAList && (\r\n
\r\n
\r\n );\r\n };\r\n return (\r\n <>\r\n \r\n {props.note.vorLogComment}\r\n
\r\n \r\n {props.note.userName} @ {moment(props.note.createdOn).format('LLL')}\r\n
\r\n \r\n \r\n ))}\r\n
\r\n
\r\n )\r\n );\r\n}\r\n\r\nexport default DepotDetails;\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Divider, FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { addUpdateNote, getNoteById, getNotesStickButtons, getAllNotes } from '../../../../Core/Services/InternalUser/ControllerService/noteService';\r\nimport { DialogTitle } from '@material-ui/core';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport moment from 'moment';\r\nimport { InputText, SecondaryButton, DateTimePicker, DataGrid, formatters, SecondaryCheckbox, SimpleField, CustomChip } from '../../../../Core/Controls';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\n\r\nconst notecolumns = [\r\n { key: 'dateCreated', name: 'Created', width: 160, formatter: formatters.Date_DDMMMYYYY_HHMM },\r\n { key: 'createdBy', name: 'Created By', width: 130 },\r\n { key: 'note', name: 'Notes' }\r\n];\r\n\r\nconst FlaggedBox = (props) => {\r\n return (\r\n <>\r\n \r\n \r\n {note}\r\n
\r\n {moment(rd).format('LLL')}
\r\n \r\n {createdBy} @ {moment(dateCreated).format('LLL')}\r\n {dateClosed && closedBy && ` (Closed by: ${closedBy} @ ${moment(dateClosed).format('LLL')} )`}\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst BreakDownEditDetails = (props) => {\r\n const data = props.data;\r\n const history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({ errors: {} });\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { userRoles } = useLoginInfo();\r\n const isDriver = userRoles.includes('driver');\r\n const isCustomer = userRoles.includes('customer');\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const isInternal = userRoles.includes('internal');\r\n\r\n const pullNotes = async () => {\r\n let res = await getAllNotes('Defects', props.NoteVehicleID, props.NoteDriverID, props.NoteServiceAgID, props.customerID, props.JobID, data.defectID);\r\n if (res.success) {\r\n setState((st) => ({ ...st, NoteList: res.data.list }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n if (data.defectID) {\r\n pullNotes();\r\n }\r\n }, [data.defectID, data.isRefresh]);\r\n\r\n const closeNoteModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false,\r\n showDefectBreakNotes: false\r\n }));\r\n res && pullNotes();\r\n };\r\n\r\n const addNotes = (show) => {\r\n setState((st) => ({\r\n ...st,\r\n [show]: true\r\n }));\r\n };\r\n\r\n const closeVORModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showVORPopup: false\r\n }));\r\n res && props.pullBreackdownById();\r\n };\r\n const showVorModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showVORPopup: true\r\n }));\r\n };\r\n const showModalHandler = (screenName) => {\r\n setModalState((st) => ({\r\n ...st,\r\n [screenName]: true\r\n }));\r\n };\r\n\r\n function isValYesNo(val) {\r\n return val ? 'Yes' : 'No';\r\n }\r\n\r\n const handleClose = () => {\r\n setModalState((st) => ({\r\n ...st,\r\n depotModal: false\r\n }));\r\n };\r\n\r\n const [modalState, setModalState] = useState({\r\n depotModal: false\r\n });\r\n\r\n const renderBold = (toRender, modalName) => {\r\n return toRender ? (\r\n
handleRowClick(modalName)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {toRender}\r\n
\r\n ) : (\r\n ''\r\n );\r\n };\r\n\r\n const handleRowClick = (toTurnOn) => {\r\n setModalState((st) => ({\r\n ...st,\r\n [toTurnOn]: true\r\n }));\r\n };\r\n\r\n const closeDeleteDefectModal = (res) => {\r\n setModalState((st) => ({\r\n ...st,\r\n showJobDeleteModal: false\r\n }));\r\n if (res) {\r\n history.push({\r\n pathname: `/maintenance/breakdowns/:all`,\r\n search: '',\r\n state: ''\r\n });\r\n }\r\n };\r\n\r\n const closetModal = (res) => {\r\n setModalState({ showJobStepperScreen: false });\r\n res && props.pullBreackdownById();\r\n };\r\n\r\n const handleDefetcBreakDownReporting = (val) => {\r\n history.push({\r\n pathname: `/maintenance/breakdown/reporting/${data.customerID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {modalState.depotModal ? (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {data.vorVehicleID && !isDriver && (\r\n
\r\n \r\n closetModal(false)} maxWidth=\"sm\">\r\n \r\n ) : null}\r\n {state.showVor ? (\r\n closeAddPopUp(false)}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n closetModal(false)} title={'Customer Details'} maxWidth=\"sm\" fullWidth>\r\n closetModal(false)} />\r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n closetModal(false)} title={'Depot Details'} maxWidth=\"sm\" fullWidth>\r\n closetModal(false)} />\r\n \r\n ) : null}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default BreakDownDetails;\r\n","import { Grid } from '@material-ui/core';\r\nimport React from 'react';\r\n\r\nimport car_repair_amberLogo from '../../../../Marker/car_repair_amber.png';\r\nimport car_repair_redLogo from '../../../../Marker/car_repair_red.png';\r\nimport car_repair_greenLogo from '../../../../Marker/car_repair_green.png';\r\n\r\nconst Mapheader = () => {\r\n return (\r\n \r\n \r\n \r\n {data.defectRegNumber} \r\n \r\n \r\n \r\n {data.make}/{data.model}\r\n \r\n \r\n handleShowDetails('showCustomerModal')} style={{ cursor: 'pointer' }}>\r\n {data.customer} \r\n \r\n handleShowDetails('showDepotModal')} style={{ cursor: 'pointer' }}>\r\n {data.reportingDepot} \r\n \r\n {/* \r\n {data.defectNumberGenerated && !props.isAddJobBtnShow ? (\r\n */}\r\n \r\n
\r\n {state.show ? (\r\n \r\n Reg Number \r\n
\r\n \r\n Make/Model \r\n
\r\n \r\n Customer \r\n
\r\n \r\n Depot \r\n
\r\n \r\n {!isDriver && !isCustomer && (\r\n
\r\n ) : null}\r\n \r\n {props.frompage === 'Breakdown' && state.defectNumberGenerated ? (\r\n props.onClose()}\r\n />\r\n ) : null}\r\n {/* {state.defectNumberGenerated && !props.isAddJobBtnShow ? (\r\n closetModal(false)} maxWidth=\"sm\">\r\n \r\n ) : null}\r\n {state.showMap ? (\r\n \r\n {state.vehicleJobProgress?.map((a, 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 Breakdown Type? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n Reporting Depot\r\n \r\n {/* {state.errors.reportingDepot} \r\n \r\n \r\n \r\n {\r\n handleShowLocation(state.defectID);\r\n }}\r\n icon={RoomIcon}\r\n />\r\n \r\n )\r\n }}\r\n />\r\n\r\n {/* {state.errors.breakDownLocation} */}\r\n \r\n \r\n \r\n \r\n \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 Category\r\n \r\n {state.errors.defectFaultTypes} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Call Out Required \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Urgent Call Out \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Put On VOR \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Replacement vehicle Required? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Passengers Involved? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.errors.numberOfPassenger} \r\n \r\n \r\n \r\n \r\n Accident Damage? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Police On Scene? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vehicle Loaded? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Load Type\r\n \r\n {/* \r\n , falultVal:''\r\n \r\n \r\n \r\n Mobility Requested? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Mobility Used? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n PG9 Issued? \r\n \r\n \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.breakDownID ? 'Save' : 'Add'}\r\n \r\n \r\n \r\n Cancel \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default AddBreaddownModal;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllDefects = async () => {\r\n let res = await getWithAuth(`VehicleDefects`);\r\n return res;\r\n};\r\n\r\nexport const getAllVehicleDefects = async (id) => {\r\n let res = await getWithAuth(`VehicleDefects?VehicleID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getAllCustomerDefects = async (id) => {\r\n let res = await getWithAuth(`VehicleDefects?customerID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleBreakdownDropdowns = async (id) => {\r\n let res = await getWithAuth(`VehicleBreakdowns/screenDropDowns?VehicleID=${id}`);\r\n return res;\r\n};\r\nexport const getDefectDropdowns = async () => {\r\n let res = await getWithAuth(`VehicleBreakdowns/screenDropDowns`);\r\n return res;\r\n};\r\nexport const postDefect = async (data) => {\r\n let res = await postWithAuth(`VehicleDefects`, data);\r\n return res;\r\n};\r\n\r\nexport const getDefectById = async (id) => {\r\n let res = await getWithAuth(`VehicleDefects/${id}`);\r\n return res;\r\n};\r\nexport const getDefectFaultType = async (custId, startDate, endDate, vehicleCategoryID, makeID) => {\r\n let res = await getWithAuth(\r\n `VehicleDefects/VehicleDefectByFaultType?ID=${custId}&startDate=${startDate}&endDate=${endDate}&vehicleCategoryID=${vehicleCategoryID}&makeID=${makeID}`\r\n );\r\n return res;\r\n};\r\nexport const getBreakDownFaultType = async (custId, startDate, endDate, vehicleCategoryID, makeID) => {\r\n let res = await getWithAuth(\r\n `VehicleBreakdowns/VehicleBreakdownByFaultType?ID=${custId}&startDate=${startDate}&endDate=${endDate}&vehicleCategoryID=${vehicleCategoryID}&makeID=${makeID}`\r\n );\r\n return res;\r\n};\r\n","import { createContext, useCallback, useEffect, useState } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { getDefectById, getVehicleBreakdownDropdowns, postDefect, getDefectDropdowns } from '../../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { formatters } from '../../../../Core/Controls';\r\nimport { getAllNotes } from '../../../../Core/Services/InternalUser/ControllerService/noteService';\r\n\r\nexport const DefectsScreenContext = createContext();\r\n\r\nconst trimmedHost = window.location.host.includes('localhost') ? 'localhost' : window.location.host;\r\n\r\nexport const DefectsProvider = (props) => {\r\n let history = useHistory();\r\n // const { DefectID, VehicleID } = props?.match?.params ;\r\n let DefectID = null;\r\n let VehicleID = null;\r\n\r\n if (props?.match?.params.DefectID) {\r\n DefectID = props.match.params.DefectID;\r\n }\r\n if (props?.match?.params.VehicleID) {\r\n VehicleID = props.match.params.VehicleID;\r\n }\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [defectFields, setDefectFields] = useState({\r\n errors: {},\r\n customerName: '',\r\n depotName: '',\r\n vehicleLoadTypesList: [],\r\n depotsList: [],\r\n vehicleID: null,\r\n defectTypeCode: 'DD',\r\n defectNumberGenerated: '',\r\n defectRegNumber: '',\r\n defectID: '',\r\n defectVehicleID: '',\r\n defectReportingDepotID: '',\r\n defectLocation: '',\r\n defectCustomerDefectNumber: '',\r\n defectMileage: '',\r\n defectContactName: '',\r\n defectContactNumber: '',\r\n defectDriverName: '',\r\n defectDriverTelephone: '',\r\n defectDescription: '',\r\n preferredServiceAgent: '',\r\n defectAuthorisedBy: '',\r\n defectNumberOfPassengers: '',\r\n defectInsuranceReference: '',\r\n domainName: '',\r\n defectVehicleLoadTypeID: 1,\r\n defectPG9Issued: '',\r\n vehicleJobProgress: [],\r\n vorVehicleID: null,\r\n isRefresh: '',\r\n isReload: true,\r\n faultTypes: [],\r\n defectFaultTypes: []\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n modules: []\r\n });\r\n\r\n const [userSettings, setUserSettings] = useState({\r\n defectAlreadyBooked: false,\r\n defectAlreadyCompleted: false,\r\n defectCallOutRequired: false,\r\n defectUrgentCallOut: false,\r\n defectVOR: false,\r\n defectPassengersInvolved: false,\r\n defectAccidentDamage: false,\r\n defectReplacementVehicle: false,\r\n defectVehicleLoaded: false,\r\n defectPG9Issued: false,\r\n defectPoliceOnScene: false,\r\n defectMobilityRequested: false,\r\n defectMobilityUsed: false,\r\n defectAdvisedDontDrive: false\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.VehicleID || VehicleID) {\r\n let res1 = await getVehicleBreakdownDropdowns(props.VehicleID || VehicleID);\r\n setDefectFields((st) => ({\r\n ...st,\r\n vehicleLoadTypesList: res1.data.vehicleLoadTypes,\r\n depotsList: res1.data.depots,\r\n vehicleID: props.VehicleID || VehicleID,\r\n jobProgressStatusList: res1.data.jobProgressStatus,\r\n faultTypes: res1.data.faultTypes\r\n }));\r\n }\r\n\r\n if (props.defectID || DefectID) {\r\n pullDefectByID();\r\n // pullNotes();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n pullNotes();\r\n }, [defectFields.isRefresh]);\r\n\r\n const pullNotes = async () => {\r\n if (props.NoteVehicleID || props.NoteDriverID || props.NoteServiceAgID || props.customerID || props.JobID || props.defectID || DefectID) {\r\n let res = await getAllNotes(\r\n 'Defects',\r\n props.NoteVehicleID,\r\n props.NoteDriverID,\r\n props.NoteServiceAgID,\r\n props.customerID,\r\n props.JobID,\r\n props.defectID || DefectID\r\n );\r\n if (res.success) {\r\n setDefectFields((st) => ({ ...st, NoteList: res.data.list }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n const pullDefectByID = async () => {\r\n let res = await getDefectById(props.defectID || DefectID);\r\n if (res.success) {\r\n const data = res.data.details[0];\r\n let vehicleJobProgressDates = res.data.vehicleJobProgressDates;\r\n if (data) {\r\n setDefectFields((defectFields) => ({\r\n ...defectFields,\r\n defectNumberGenerated: data.defectNumberGenerated,\r\n defectRegNumber: data.defectRegNumber,\r\n defectID: data.defectID,\r\n defectTypeCode: data.defectTypeCode,\r\n defectVehicleID: data.defectVehicleID,\r\n defectReportingDepotID: data.defectReportingDepotID,\r\n defectLocation: data.defectLocation,\r\n defectCustomerDefectNumber: data.defectCustomerDefectNumber,\r\n defectContactName: data.defectContactName,\r\n defectContactNumber: data.defectContactNumber,\r\n defectDriverName: data.defectDriverName,\r\n defectDriverTelephone: data.defectDriverTelephone,\r\n defectDescription: data.defectDescription,\r\n preferredServiceAgent: data.preferredServiceAgent,\r\n defectAuthorisedBy: data.defectAuthorisedBy,\r\n defectNumberOfPassengers: data.defectNumberOfPassengers,\r\n defectInsuranceReference: data.defectInsuranceReference,\r\n domainName: data.domainName,\r\n defectVehicleLoadTypeID: data.defectVehicleLoadTypeID,\r\n defectPoliceOnScene: data.defectPoliceOnScene,\r\n defectAdvisedDontDrive: data.defectAdvisedDontDrive,\r\n defectMobilityRequested: data.defectMobilityRequested,\r\n defectMobilityUsed: data.defectMobilityUsed,\r\n defectResolvedNotes: data.defectResolvedNotes,\r\n defectResolvedSignature: data.defectResolvedSignature,\r\n vorVehicleID: data.vorVehicleID,\r\n model: data.model,\r\n make: data.make,\r\n customer: data.customer,\r\n reportingDepot: data.reportingDepot,\r\n defectMileage: data.defectMileage,\r\n defectPreferredServiceAgent: data.defectPreferredServiceAgent,\r\n homeDepotID: data.homeDepotID,\r\n customerID: data.customerID,\r\n defectFaultTypes: res.data.faultIds,\r\n //\r\n vehicleJobProgress: vehicleJobProgressDates,\r\n defectDateCreated: formatters.DateTimeFormatter(data.defectDateCreated),\r\n defectDateCallOutArrived: formatters.DateTimeFormatter(data.defectDateCallOutArrived),\r\n defectDateVehicleRecovered: formatters.DateTimeFormatter(data.defectDateVehicleRecovered),\r\n defectDateResolved: formatters.DateTimeFormatter(data.defectDateResolved),\r\n defectDateSignOff: formatters.DateTimeFormatter(data.defectDateSignOff),\r\n fileCount: data.fileCount,\r\n isRefresh: new Date(),\r\n isReload: false\r\n }));\r\n setUserSettings((st) => ({\r\n ...st,\r\n defectAlreadyBooked: data.defectAlreadyBooked,\r\n defectAlreadyCompleted: data.defectAlreadyCompleted,\r\n defectCallOutRequired: data.defectCallOutRequired,\r\n defectUrgentCallOut: data.defectUrgentCallOut,\r\n defectVOR: data.defectVOR,\r\n defectPassengersInvolved: data.defectPassengersInvolved,\r\n defectAccidentDamage: data.defectAccidentDamage,\r\n defectReplacementVehicle: data.defectReplacementVehicle,\r\n defectVehicleLoaded: data.defectVehicleLoaded,\r\n defectPG9Issued: data.defectPG9Issued,\r\n vehicleLoadTypeDescription: data.vehicleLoadTypeDescription\r\n }));\r\n } else {\r\n setDefectFields((defectFields) => ({\r\n ...defectFields,\r\n isReload: false\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 setUserSettings((st) => ({ ...st, [name]: true }));\r\n } else if (value === 'false' && type.toLowerCase() === 'radio') {\r\n setUserSettings((st) => ({ ...st, [name]: false }));\r\n } else {\r\n setDefectFields((st) => ({ ...st, [name]: value }));\r\n }\r\n }, []);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setDefectFields((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const selectHandler = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setDefectFields((defectFields) => ({ ...defectFields, [name]: checked }));\r\n }, []);\r\n\r\n const handleClick = useCallback((name, value) => {\r\n setDefectFields((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (defectFields.defectFaultTypes) {\r\n const selectedFaultTypes = defectFields.faultTypes.filter((w) => defectFields.defectFaultTypes.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({\r\n ...st,\r\n modules: selectedFaultTypes\r\n }));\r\n }\r\n }, [defectFields.defectFaultTypes, defectFields.faultTypes]);\r\n\r\n const ModuleChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, modules: value }));\r\n setDefectFields((st) => {\r\n const nst = { ...st, defectFaultTypes: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const {\r\n defectReportingDepotID,\r\n defectLocation,\r\n defectCustomerDefectNumber,\r\n defectContactName,\r\n defectContactNumber,\r\n defectDriverName,\r\n defectDriverTelephone,\r\n defectDescription,\r\n defectAuthorisedBy,\r\n defectVehicleLoadTypeID,\r\n defectReportingDepotIDValue\r\n } = defectFields;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!defectReportingDepotIDValue) {\r\n errors.defectReportingDepotID = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!defectLocation) {\r\n errors.defectLocation = 'This field is required';\r\n formIsValid = false;\r\n }\r\n // if (!defectCustomerDefectNumber) {\r\n // errors.defectCustomerDefectNumber = 'This field is required';\r\n // formIsValid = false;\r\n // }\r\n if (!defectContactName) {\r\n errors.defectContactName = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!defectContactNumber) {\r\n errors.defectContactNumber = 'This field is required';\r\n formIsValid = false;\r\n }\r\n // if (!defectDriverName) {\r\n // errors.defectDriverName = 'This field is required';\r\n // formIsValid = false;\r\n // }\r\n // if (!defectDriverTelephone) {\r\n // errors.defectDriverTelephone = 'This field is required';\r\n // formIsValid = false;\r\n // }\r\n if (!defectDescription) {\r\n errors.defectDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (!defectAuthorisedBy) {\r\n errors.defectAuthorisedBy = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!defectVehicleLoadTypeID) {\r\n errors.defectVehicleLoadTypeID = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setDefectFields((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const FormData = {\r\n defectID: defectFields.defectID,\r\n defectTypeCode: defectFields.defectTypeCode,\r\n defectVehicleID: defectFields.vehicleID,\r\n defectReportingDepotID: defectFields.defectReportingDepotIDValue?.id,\r\n defectLocation: defectFields.defectLocation,\r\n defectCustomerDefectNumber: defectFields.defectCustomerDefectNumber,\r\n defectContactName: defectFields.defectContactName,\r\n defectContactNumber: defectFields.defectContactNumber,\r\n defectDriverName: defectFields.defectDriverName,\r\n defectDriverTelephone: defectFields.defectDriverTelephone,\r\n defectDescription: defectFields.defectDescription,\r\n defectAuthorisedBy: defectFields.defectAuthorisedBy,\r\n preferredServiceAgent: defectFields.preferredServiceAgent,\r\n defectAlreadyBooked: userSettings.defectAlreadyBooked,\r\n defectAlreadyCompleted: userSettings.defectAlreadyCompleted,\r\n defectCallOutRequired: userSettings.defectCallOutRequired,\r\n defectUrgentCallOut: userSettings.defectUrgentCallOut,\r\n defectVOR: userSettings.defectVOR,\r\n defectPassengersInvolved: userSettings.defectPassengersInvolved,\r\n defectNumberOfPassengers: defectFields.defectNumberOfPassengers,\r\n defectAccidentDamage: userSettings.defectAccidentDamage,\r\n defectInsuranceReference: defectFields.defectInsuranceReference,\r\n domainName: trimmedHost,\r\n defectReplacementVehicle: userSettings.defectReplacementVehicle,\r\n defectVehicleLoaded: userSettings.defectVehicleLoaded,\r\n defectVehicleLoadTypeID: defectFields.defectVehicleLoadTypeIDValue?.id,\r\n defectPG9Issued: userSettings.defectPG9Issued,\r\n defectPoliceOnScene: userSettings.defectPoliceOnScene,\r\n defectAdvisedDontDrive: userSettings.defectAdvisedDontDrive,\r\n defectMobilityRequested: userSettings.defectMobilityRequested,\r\n defectMobilityUsed: userSettings.defectMobilityUsed,\r\n defectMileage: defectFields.defectMileage,\r\n faultIds: selectedData.modules.map(({ id }) => id)\r\n };\r\n setBtnLoader(true);\r\n let res = await postDefect(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Defect number ${res.data.defectNumber} generated successfully`);\r\n history.push(`/maintenance/defect/edit/${res.data.defectID}/${props.VehicleID}`);\r\n // props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n console.log(defectFields, 'defectFields');\r\n console.log(selectedData, 'selectedData');\r\n return (\r\n \r\n \r\n Add Job\r\n \r\n
\r\n ) : null} */}\r\n {state.showJob ? (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {data.vorVehicleID &&
\r\n \r\n closetModal(false)} maxWidth=\"sm\">\r\n \r\n ) : null}\r\n {state.showVor ? (\r\n closeAddPopUp(false)}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n closetModal(false)} title={'Customer Details'} maxWidth=\"sm\" fullWidth>\r\n closetModal(false)} />\r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n closetModal(false)} title={'Depot Details'} maxWidth=\"sm\" fullWidth>\r\n closetModal(false)} />\r\n \r\n ) : null}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DefectDetails;\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormControlLabel, FormHelperText, InputLabel } from '@material-ui/core';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { InputText, SecondaryButton, MandatoryField, SimpleField, Accordion, SingleSelect, Multiselect } from '../../../../Core/Controls';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { SelectBox } from '../../../../Core/Controls';\r\nimport { DefectsProvider as StateProvider, DefectsScreenContext } from './DefectsProvider';\r\nimport DefectDetails from './defectDetail';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport JobStepperScreen from '../BreackdownDefectStepper/addJobStepper';\r\nimport CustomizedSteppers from '../BreackdownDefectStepper/defectBreackDownStepper';\r\n\r\nconst AddEditDefectModal = (props) => {\r\n const { defectFields, userSettings, submitHandler, inputChange, pullDefectByID, singleSelectChange, btnLoader, ModuleChange, selectedData } =\r\n useContext(DefectsScreenContext);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {data.defectRegNumber}\r\n \r\n \r\n \r\n \r\n {data.make}/{data.model}\r\n \r\n \r\n handleShowDetails('showCustomerModal')} style={{ cursor: 'pointer' }}>\r\n {data.customer} \r\n \r\n handleShowDetails('showDepotModal')} style={{ cursor: 'pointer' }}>\r\n {data.reportingDepot} \r\n \r\n {/* \r\n {data.defectNumberGenerated && !props.isAddJobBtnShow ? (\r\n */}\r\n \r\n
\r\n {state.show ? (\r\n \r\n Reg Number \r\n
\r\n \r\n Make/Model \r\n
\r\n \r\n Customer \r\n
\r\n \r\n Depot \r\n
\r\n \r\n {!isDriver && !isCustomer && (\r\n
\r\n ) : null}\r\n \r\n {props.fromPage === 'Defects' && defectFields.defectNumberGenerated ? (\r\n \r\n {defectFields.vehicleJobProgress.map((a, index) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n Reporting Depot\r\n \r\n {/* {defectFields.errors.defectReportingDepotID} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {defectFields.errors.preferredServiceAgent} \r\n \r\n \r\n \r\n Fault Category\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Already Booked? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Already Completed? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Call Out Required \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Urgent Call Out \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Put On VOR \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Advised Don't Drive? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Passenger Involved? \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {defectFields.errors.defectNumberOfPassengers} \r\n \r\n\r\n \r\n \r\n \r\n Accident Damage? \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {defectFields.errors.defectInsuranceReference} \r\n \r\n \r\n \r\n \r\n Replacement vehicle Required? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vehicle Loaded? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Load Type\r\n \r\n {/* {defectFields.errors.defectVehicleLoadTypeID} \r\n \r\n \r\n \r\n \r\n Police On Scene? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Mobility Requested? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Mobility Used? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n PG9 Issued? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {!defectFields.defectID ? (\r\n \r\n \r\n Add\r\n \r\n \r\n ) : (\r\n \r\n {\r\n alert('Update Pending');\r\n }}\r\n >\r\n Save\r\n \r\n \r\n )}\r\n \r\n Cancel \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n \r\n {state.stickyList.length > 0 &&\r\n state.stickyList.map((q, index = 1) => {\r\n return (\r\n \r\n {q.title}\r\n
\r\n {q.description}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n};\r\n\r\nexport default StickyNotes;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getJobDetailsById = async (Id) => {\r\n let res = await getWithAuth(`VehicleJob/${Id}`);\r\n return res;\r\n};\r\nexport const getAllJobDropDowns = async (Id) => {\r\n let res = await getWithAuth(`VehicleJob/Dropdowns?VehicleID=${Id}`);\r\n return res;\r\n};\r\nexport const postJobDetails = async (data) => {\r\n let res = await postWithAuth('VehicleJob', data);\r\n return res;\r\n};\r\nexport const getJobHistory = async (id) => {\r\n let res = await getWithAuth(`VehicleJob/VehicleJobHistory/${id}`);\r\n return res;\r\n};\r\nexport const getUpcomingEvents = async (id) => {\r\n let res = await getWithAuth(`VehicleJob/VehicleUncompletedSchedules/${id}`);\r\n return res;\r\n};\r\n\r\nexport const mergeJobToMaster = async (data) => {\r\n let res = await postWithAuth(`schedules/SchedulesAddToJob`, data);\r\n return res;\r\n};\r\nexport const setCompletionDate = async (data) => {\r\n let res = await postWithAuth(`VehicleJob/VehicleJobsCompleteJob`, data);\r\n return res;\r\n};\r\nexport const setBookingDate = async (data) => {\r\n let res = await postWithAuth(`VehicleJob/ChangeBookingDate`, data);\r\n return res;\r\n};\r\n\r\nexport const getJobRequiredDocuments = async (id) => {\r\n let res = await getWithAuth(`VehicleJob/GetJobRequiredDocuments/${id}`);\r\n return res;\r\n};\r\nexport const getJobRequireScheduledDocuments = async (id) => {\r\n let res = await getWithAuth(`Schedules/GetScheduleRequiredDocuments/${id}`);\r\n return res;\r\n};\r\n\r\nexport const setVehicleArrive = async (data) => {\r\n let res = await postWithAuth(`VehicleJob/VehicleArrived`, data);\r\n return res;\r\n};\r\n","import React from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport { TableBody, Table, TableCell, TableContainer, TableRow } from '@material-ui/core';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.common.white,\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '4px',\r\n height: '40px'\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 title: {\r\n color: '#f50057',\r\n marginLeft: 2,\r\n marginTop: 0,\r\n marginBottom: 0\r\n },\r\n cellValue: {\r\n fontSize: '0.800rem'\r\n },\r\n label: {\r\n position: 'fixed',\r\n top: 0\r\n }\r\n});\r\n\r\nexport default function CustomizedTables(props) {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {q.description}\r\n
{props.tableHeader}
\r\n \r\n\r\n \r\n \r\n \r\n {props.tableHeader}\r\n \r\n \r\n \r\n {state.showScheduleAdd ? (\r\n handlePopup('showScheduleAdd', false)}\r\n title=\"Add Schedule\"\r\n maxWidth=\"sm\"\r\n // name=\"addEdit\"\r\n >\r\n handlePopup('showScheduleAdd', false)}\r\n />\r\n \r\n ) : null}\r\n {state.showExpiryModal ? (\r\n handlePopup('showExpiryModal', false)} title=\"DVLA MOT & Tax Dates\" maxWidth=\"sm\">\r\n handlePopup('showExpiryModal', false)}\r\n vehicleId={dateFields.vehicleID}\r\n onFormSubmit={closeModal}\r\n regNo={props.regNo}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleDetails;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getDriverList = async (id) => {\r\n let res = await getWithAuth(`VehicleDriverHistory/GetDetails?VehicleID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getDriverHistoryList = async (id) => {\r\n let res = await getWithAuth(`VehicleDriverHistory?VehicleID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const postDriverMilege = async (data) => {\r\n let res = await postWithAuth(`VehicleDriverHistory`, data);\r\n return res;\r\n};\r\n\r\nexport const postDriverCheckIn = async (data) => {\r\n let res = await postWithAuth(`DriverCheckIn`, data);\r\n return res;\r\n};\r\n\r\nexport const postDriverCheckOut = async (data) => {\r\n let res = await postWithAuth(`DriverCheckIn/VehicleDriverCheckOut`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Table, TableBody, TableContainer, TableRow, Paper, TableCell, Typography, FormHelperText, InputLabel } from '@material-ui/core';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport { Link } from 'react-router-dom';\r\nimport { InputText, SecondaryButton, SelectBox, CustomChip, MandatoryField, DatePicker } from '../../../../../Core/Controls';\r\nimport { postDriverMilege, getDriverList } from '../../../../../Core/Services/InternalUser/Vehicle/driverInfoService';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\n\r\nconst gridStyle = {\r\n title: {\r\n color: '#f50057'\r\n },\r\n header: {\r\n border: '1px solid rgba(0,0,0,0.2)'\r\n },\r\n tbHead: {\r\n padding: '5px 0px 6px 8px'\r\n },\r\n tbContent: {\r\n margin: '8px 0px 14px 0px;'\r\n }\r\n};\r\n\r\nexport default function DriverVehicleModal(props) {\r\n const [state, setState] = useState({\r\n customerID: null,\r\n driverList: [],\r\n vehicleDriverHistoryID: null,\r\n historyList: null,\r\n vehicleDriverHistoryDriverID: null\r\n });\r\n const [error, setError] = useState({});\r\n\r\n useEffect(async () => {\r\n if (props.vehicleID) {\r\n let res = await getDriverList(props.vehicleID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n historyList: res.data.vehicleDriverHistory[0]?.vehicleDriverHistoryID,\r\n driverList: res.data.details.map((m) => ({\r\n id: m.driverID,\r\n name: m.driver\r\n }))\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const validate = () => {\r\n let errors = {};\r\n let isValid = true;\r\n\r\n if (!state.vehicleDriverHistoryDriverID) {\r\n errors.driver = 'Driver is Required';\r\n isValid = false;\r\n }\r\n if (!state.date) {\r\n errors.date = 'Date Change is required';\r\n isValid = false;\r\n }\r\n if (!state.mileage) {\r\n errors.mileage = 'Mileage is required';\r\n isValid = false;\r\n }\r\n setError(errors);\r\n return isValid;\r\n };\r\n\r\n const inputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handelSubmit = async () => {\r\n if (validate()) {\r\n let data = {\r\n vehicleDriverHistoryID: state.historyList ? state.historyList : null,\r\n vehicleDriverHistoryVehicleID: props.vehicleID,\r\n vehicleDriverHistoryDriverID: state.vehicleDriverHistoryDriverID,\r\n vehicleDriverHistoryDateAssigned: state.date,\r\n vehicleDriverHistoryMileageAssigned: state.mileage\r\n };\r\n let submutRes = await postDriverMilege(data);\r\n if (submutRes.success) {\r\n showToastSuccess('Vehicle Driver Added Successfully');\r\n props.onClose();\r\n } else {\r\n showToastError(submutRes.message);\r\n // props.onClose();\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 Driver\r\n \r\n {error.driver} \r\n \r\n \r\n \r\n Date of Change\r\n \r\n {error.date} \r\n \r\n \r\n \r\n \r\n If this driver is assigned to another vehicle, they will be removed from that vehicle \r\n \r\n \r\n Link Driver \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Table, TableBody, TableContainer, TableRow, Paper, TableCell, Typography, TableHead, CircularProgress } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport { Link } from 'react-router-dom';\r\nimport { getDriverHistoryList } from '../../../../../Core/Services/InternalUser/Vehicle/driverInfoService';\r\n\r\nexport default function DriverHistory(props) {\r\n const [state, setState] = useState({\r\n rows: [],\r\n showLoader: true\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.vehicleID) {\r\n let res = await getDriverHistoryList(props.vehicleID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: res.data.drivers,\r\n showLoader: false\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n {state.showLoader ? (\r\n \r\n \r\n
\r\n {state.rows?.length <= 0 && \r\n )}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { Table, TableBody, TableContainer, TableRow, Paper, TableCell, Typography, TableHead } from '@material-ui/core';\r\nimport moment from 'moment';\r\n\r\n// import { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport LocalOfferIcon from '@material-ui/icons/LocalOffer';\r\nimport { Link } from 'react-router-dom';\r\nimport { CustomChip } from '../../../../../Core/Controls';\r\nimport DriverVehicleModal from './manageDriver';\r\nimport DriverHistory from './driverHistory';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\n\r\nconst gridStyle = {\r\n title: {\r\n color: '#f50057'\r\n },\r\n header: {\r\n borderBottom: '1px solid rgba(0,0,0,0.2)'\r\n },\r\n tbHead: {\r\n padding: '5px 0px 6px 8px'\r\n },\r\n tbContent: {\r\n margin: '8px 0px 14px 0px;'\r\n }\r\n};\r\n\r\nexport const DriverInfo = (props) => {\r\n const [state, setState] = useState({\r\n showHistory: false,\r\n showManageDriver: false,\r\n driverList: []\r\n });\r\n\r\n const openModal = (params) => {\r\n setState((st) => ({\r\n ...st,\r\n [params]: !st[params]\r\n }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n ) : (\r\n No History found
}\r\n \r\n {state.showHistory && (\r\n openModal('showHistory')} maxWidth=\"sm\">\r\n \r\n )}\r\n {state.showManageDriver && (\r\n openModal('showManageDriver')} maxWidth=\"sm\">\r\n openModal('showManageDriver')} />\r\n \r\n )}\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 { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getDriverVehicleCheck = async (id) => {\r\n let res = await getWithAuth(`DriverDailyCheck/List?VehicleID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getvehiclecheckchecksById = async (id) => {\r\n let res = await getWithAuth(`DriverDailyCheck/AddScreenDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const getEditDriverChekssById = async (id) => {\r\n let res = await getWithAuth(`DriverDailyCheck/EditScreenDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postvehiclecheckchecksData = async (data) => {\r\n let res = await postWithAuth(`DriverDailyCheck`, data);\r\n return res;\r\n};\r\nexport const PostImage = async (data) => {\r\n let res = await postWithAuth(`VehicleDailyCheckPhoto`, data);\r\n return res;\r\n};\r\nexport const getImageByID = async (id) => {\r\n let res = await getWithAuth(`VehicleDailyCheckPhoto/${id}`);\r\n return res;\r\n};\r\n\r\nexport const DeleteImageByID = async (id) => {\r\n let res = await postWithAuth(`VehicleInspectionsPhoto/Delete/${id}`);\r\n};\r\n","import React from 'react';\r\n// import { s3URL } from './../../Constants/constants';\r\nconst selfBgCss = {\r\n backgroundSize: 'cover',\r\n backgroundRepeat: 'no-repeat',\r\n backgroundPosition: 'center',\r\n filter: 'blur(8px)',\r\n opacity: '0.5',\r\n height: '100%',\r\n width: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0\r\n};\r\nconst ImageCard = ({ avtar, selfBg }) => {\r\n if (avtar) {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Driver\r\n \r\n \r\n\r\n \r\n {/* \r\n \r\n
\r\n \r\n openModal('showManageDriver')}\r\n />\r\n openModal('showHistory')}\r\n />\r\n
\r\n \r\n {/* {selfBg && } */}\r\n 
\r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\nexport default ImageCard;\r\n","import React, { useState, useEffect } from 'react';\r\nimport ImageUploading from 'react-images-uploading';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport './imageModal.scss';\r\n\r\nimport {\r\n Grid,\r\n Paper,\r\n InputLabel,\r\n TableContainer,\r\n Table,\r\n TableHead,\r\n TableBody,\r\n TableRow,\r\n TableCell,\r\n Button,\r\n Typography,\r\n Tooltip,\r\n CircularProgress,\r\n FormHelperText,\r\n Badge\r\n} from '@material-ui/core';\r\nimport BackupIcon from '@material-ui/icons/Backup';\r\nimport { SecondaryButton, PrimaryButton, MandatoryField } from '../../../../../Core/Controls';\r\nimport ImageCard from './imageCard';\r\nimport IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport DeleteSweepIcon from '@material-ui/icons/DeleteSweep';\r\nimport { useWindowSize } from '../../../../../Core/Hooks/useWindowSize';\r\n\r\nconst ImageModal = (props) => {\r\n const [windowWidth, windowHeight] = useWindowSize();\r\n\r\n useEffect(() => {\r\n if (props.images?.length == 0) {\r\n setImage();\r\n }\r\n }, [props.images]);\r\n\r\n const [image, setImage] = useState();\r\n\r\n const scrollNext = (id) => {\r\n document.getElementById('slider-scroll').scrollBy({ left: 100, top: 0, behavior: 'smooth' });\r\n // smoothscroll.polyfill();\r\n };\r\n\r\n const scrollPrev = (id) => {\r\n document.getElementById('slider-scroll').scrollBy({ left: -100, top: 0, behavior: 'smooth' });\r\n // smoothscroll.polyfill();\r\n };\r\n\r\n const setCurrentImage = (image) => {\r\n setImage(image);\r\n };\r\n\r\n const TitleComp = (props) => (\r\n \r\n
\r\n );\r\n\r\n return (\r\n // Upload Image {props.inspectionDesc}
\r\n {/* \r\n \r\n \r\n \r\n
*/}\r\n \r\n // \r\n \r\n {({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove }) => {\r\n return (\r\n \r\n // \r\n //
\r\n );\r\n};\r\n\r\nexport default ImageModal;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport {\r\n FailButton,\r\n InputText,\r\n MandatoryField,\r\n NAButton,\r\n PassButton,\r\n SecondaryButton,\r\n SelectBox,\r\n MButton,\r\n UploadWithBadge\r\n} from '../../../../../Core/Controls';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Grid,\r\n Paper,\r\n InputLabel,\r\n TableContainer,\r\n Table,\r\n TableHead,\r\n TableBody,\r\n TableRow,\r\n TableCell,\r\n Button,\r\n Typography,\r\n Tooltip,\r\n CircularProgress,\r\n FormHelperText,\r\n Badge\r\n} from '@material-ui/core';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport '../../controllerStyle.scss';\r\nimport { getVehicleById } from '../../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { getvehiclecheckchecksById, postvehiclecheckchecksData } from '../../../../../Core/Services/InternalUser/Vehicle/driverVehicle';\r\nimport moment from 'moment';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { getTitleData } from '../../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { BreadCrumbs } from '../../../../../Core/Controls';\r\nimport ImageModal from './imageModal';\r\nimport { useWindowSize } from '../../../../../Core/Hooks/useWindowSize';\r\nimport { DeleteImageByID } from '../../../../../Core/Services/InternalUser/Vehicle/driverVehicle';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 16,\r\n padding: '8px 20px',\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '8px 20px'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: '#F5F5F5'\r\n }\r\n }\r\n}))(TableRow);\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n fontSize: '25px',\r\n color: '#f50057',\r\n fontWeight: 600,\r\n paddingLeft: 9\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 sign: {\r\n border: '1px solid grey',\r\n height: 240\r\n }\r\n}));\r\n\r\nconst CheckButtons = {\r\n 1: PassButton,\r\n 2: FailButton,\r\n 3: NAButton,\r\n 5: MButton,\r\n 6: UploadWithBadge\r\n};\r\n\r\nconst DriverDailyChecks = (props) => {\r\n const [width, height] = useWindowSize();\r\n const maxNumber = 69;\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { displayName } = useLoginInfo();\r\n const classes = useStyles();\r\n const [state, setState] = useState({\r\n vehicleID: props.VehicleID,\r\n date: moment().format('DD-MM-YYYY'),\r\n vehicleDailyCheckDateStarted: moment().format('YYYY-MM-DD HH:mm:ss'),\r\n vehicleDailyCheckCheckTypeID: 1,\r\n vehicleDailyCheckStatusId: null,\r\n vehicleDailyCheckDateExpire: null,\r\n vehicleDailyCheckDriverComment: '',\r\n vehicleDailyCheckDriverId: null,\r\n vehicleDailyCheckId: null,\r\n selectAll: false,\r\n signAvailable: AppStorage.getSignature() === 'absent' ? false : true,\r\n vehicleDailyCheckCheckerName: displayName,\r\n desc: '',\r\n imageUpload: []\r\n });\r\n\r\n const { userRoles } = useLoginInfo();\r\n // const isDriver = userRoles.includes('driver');\r\n\r\n useEffect(async () => {\r\n if (props.VehicleID) {\r\n let res2 = await getVehicleById(props.VehicleID);\r\n if (res2.success) {\r\n const data = res2.data;\r\n setState((st) => ({\r\n ...st,\r\n regNumber: data.vehicleRegNumber,\r\n modelID: data.vehicleModel,\r\n makeID: data.vehicleMake\r\n }));\r\n }\r\n let res = await getvehiclecheckchecksById(props.VehicleID);\r\n if (res.success) {\r\n const reportedUser = res.data.reportedUser.map((x) => ({\r\n id: x.id,\r\n name: x.name\r\n }));\r\n const checkType = res.data.dailyCheckTypes.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n }));\r\n const checkQueList = res.data.driverDailyCheckCheckSections;\r\n const checkOptions = res.data.driverDailyCheckOptions;\r\n\r\n setState((st) => ({\r\n ...st,\r\n checklist: checkQueList,\r\n checkOptions: checkOptions,\r\n checkType: checkType,\r\n reportedUser: reportedUser\r\n }));\r\n }\r\n }\r\n pullDetails();\r\n }, []);\r\n\r\n const pullDetails = async () => {\r\n let res = await getTitleData(props.VehicleID);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n setState((st) => ({\r\n ...st,\r\n desc: data?.vehicleDescription\r\n // vorID: data?.vorVehicleID,\r\n // loader: false,\r\n // regNumber: data?.vehicleDescription.split('-')[0].trim()\r\n }));\r\n }\r\n };\r\n\r\n const handleButton = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n vehicleDailyCheckCheckTypeID: id\r\n }));\r\n };\r\n\r\n const signCanvas = useRef({});\r\n const clear = () => {\r\n if (state.imgtechniciansign) {\r\n setState((st) => ({\r\n ...st,\r\n imgtechniciansign: false,\r\n techniciansign: null\r\n }));\r\n } else {\r\n signCanvas.current.clear();\r\n }\r\n };\r\n\r\n const GetTechnicianSign = () => {\r\n let fields = state.fields;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n techniciansign: signCanvas.current.toDataURL(),\r\n fields: fields\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleInputs = (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 checkAll = (passId) => (e) => {\r\n const c = e.target.checked;\r\n setState((st) => {\r\n const newSt = { ...st };\r\n newSt.selectAll = true;\r\n newSt.checklist.map((x) => {\r\n x.vehicleDailyCheckResultsVehicleDailyCheckOptionId = c ? passId : undefined;\r\n });\r\n\r\n newSt.checklist = [...newSt.checklist];\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleButtonChange = (buttonVal, checkId) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === checkId);\r\n changedArray[objIndex].vehicleDailyCheckResultsVehicleDailyCheckOptionId = buttonVal;\r\n let val = changedArray.filter((c) => c.vehicleDailyCheckResultsVehicleDailyCheckOptionId !== 1).length === 0;\r\n setState((st) => ({ ...st, checklist: changedArray, selectAll: val }));\r\n };\r\n\r\n const handleNote = (id) => (e) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === id);\r\n changedArray[objIndex][e.target.name] = e.target.value;\r\n setState((st) => ({ ...st, checklist: changedArray }));\r\n };\r\n\r\n const useDefaultSig = () => {\r\n setState((st) => ({ ...st, imgtechniciansign: true, techniciansign: AppStorage.getSignature() }));\r\n };\r\n\r\n const validations = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!state.vehicleDailyCheckReportedUserID) {\r\n errors.vehicleDailyCheckReportedUserID = 'Reported User is required';\r\n formIsValid = false;\r\n }\r\n if (!state.vehicleDailyCheckMileage) {\r\n errors.vehicleDailyCheckMileage = `Odometer Reading  is required`;\r\n formIsValid = false;\r\n }\r\n if (!state.vehicleDailyCheckDriverName) {\r\n errors.vehicleDailyCheckDriverName = 'Driver Name is required';\r\n formIsValid = false;\r\n }\r\n if (!state.techniciansign) {\r\n errors.techniciansign = 'Driver/Checker Signature is required';\r\n formIsValid = false;\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 handleSubmit = async () => {\r\n let driverDailyCheckResultsVM = state.checklist.map((m) => ({\r\n vehicleDailyCheckSectionID: m.dailyCheckSectionID ? m.dailyCheckSectionID : null,\r\n vehicleDailyCheckResultsVehicleDailyCheckOptionId: m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n ? m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n : null,\r\n vehicleDailyCheckResultsNotes: m.vehicleDailyCheckResultsNotes ? m.vehicleDailyCheckResultsNotes : null,\r\n vehicleDailyCheckResultsAssesementNotes: m.vehicleDailyCheckResultsAssesementNotes ? m.vehicleDailyCheckResultsAssesementNotes : null,\r\n vehicleDailyCheckResultsDefectID: m.vehicleDailyCheckResultsDefectID ? m.vehicleDailyCheckResultsDefectID : null,\r\n vehicleDailyCheckResultsStatusId: m.vehicleDailyCheckResultsStatusId ? m.vehicleDailyCheckResultsStatusId : null\r\n }));\r\n if (validations()) {\r\n let formData = {\r\n vehicleID: state.vehicleID,\r\n vehicleDailyCheckId: state.vehicleDailyCheckId,\r\n vehicleDailyCheckStatusId: state.vehicleDailyCheckStatusId,\r\n vehicleDailyCheckCheckTypeID: state.vehicleDailyCheckCheckTypeID,\r\n vehicleDailyCheckDateStarted: state.vehicleDailyCheckDateStarted,\r\n vehicleDailyCheckDateExpire: state.vehicleDailyCheckDateExpire,\r\n vehicleDailyCheckReportedUserID: state.vehicleDailyCheckReportedUserID,\r\n vehicleDailyCheckDriverName: state.vehicleDailyCheckDriverName,\r\n vehicleDailyCheckDriverId: state.vehicleDailyCheckDriverId,\r\n vehicleDailyCheckMileage: state.vehicleDailyCheckMileage,\r\n vehicleDailyCheckDriverComment: state.vehicleDailyCheckDriverComment,\r\n vehicleDailyCheckCheckerName: state.vehicleDailyCheckCheckerName,\r\n driverDailyCheckResultsVM: driverDailyCheckResultsVM,\r\n vehicleDailyCheckCreatorSignature: state.techniciansign,\r\n driverDailyCheckPhotoVM: state.imageUpload\r\n };\r\n let res = await postvehiclecheckchecksData(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n const sumbitImage = () => {\r\n if (state.selectedImages.length > 0) {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === state.checkSectionId);\r\n changedArray[objIndex].basicCount = changedArray[objIndex].images.length;\r\n showToastSuccess('image Uploaded successfully');\r\n setState((st) => ({\r\n ...st,\r\n show: false,\r\n checklist: changedArray\r\n }));\r\n showToastSuccess('Images Uploaded successfully');\r\n }\r\n // setState((st) => ({ ...st, show: false }));\r\n };\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: `Vehicles`, onClick: props.onClose, path: '/', active: true },\r\n { name: `Add Checks`, path: '/', active: true }\r\n ];\r\n\r\n const imageHanlder = (checkSectionId) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === checkSectionId);\r\n setState((st) => ({ ...st, show: true, checkSectionId: checkSectionId, selectedImages: changedArray[objIndex].images || [] }));\r\n };\r\n\r\n const onImageChange = (imageList, addUpdateIndex) => {\r\n let changedArray = [...state.checklist];\r\n let FilterimagesList;\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === state.checkSectionId);\r\n\r\n if (`${objIndex}`) {\r\n FilterimagesList = imageList.map((m) => (m.data_url ? m.data_url : m));\r\n changedArray[objIndex].images = FilterimagesList;\r\n }\r\n\r\n let tempArray = [...state.imageUpload];\r\n tempArray.push({ inspectionSheetCheckCheckID: state.checkSectionId, inspectionSheetCheckPhotos: FilterimagesList });\r\n\r\n setState((st) => ({ ...st, checklist: changedArray, selectedImages: FilterimagesList, imageUpload: tempArray }));\r\n };\r\n\r\n return (\r\n \r\n {props.disabled ? null : (\r\n
\r\n \r\n );\r\n }}\r\n \r\n \r\n \r\n
\r\n )}\r\n {imageList.length > 0 ? (\r\n \r\n No image found \r\n
\r\n )}\r\n \r\n
\r\n {props.disabled ? null : (\r\n \r\n {imageList.map((im, i) => (\r\n \r\n {props.disabled ? null : (\r\n \r\n onImageRemove(i)} style={{ fill: '#f44336', cursor: 'pointer' }} />\r\n \r\n )}\r\n ![]()
setCurrentImage(im)} src={im} />\r\n \r\n ))}\r\n
\r\n \r\n scrollPrev()}>\r\n
\r\n \r\n Submit \r\n
\r\n )}\r\n \r\n {!props.VehicleID && \r\n {/* Disabled fields........... */}\r\n {/* {isDriver ? (\r\n \r\n {state.desc?.toUpperCase() || ''} \r\n \r\n ) : null} */}\r\n\r\n {/* Checks quetion table.......... */}\r\n \r\n \r\n \r\n {/* Check Type */}\r\n {/* {state.desc?.toUpperCase() || ''} */}\r\n\r\n {state.checkType.map((m) => {\r\n return (\r\n handleButton(m.id)}\r\n >\r\n {m.name}\r\n \r\n );\r\n })}\r\n \r\n {state.date}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Driver/Checker Signature\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n {state.imgtechniciansign ? (\r\n \r\n 
\r\n
\r\n ) : (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {state.show ? (\r\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 AddBatteryLevels;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getEndUserByID = async (Id) => {\r\n let res = await getWithAuth(`endusers/${Id}`);\r\n return res;\r\n};\r\nexport const getEndUserById = async (Id) => {\r\n let res = await getWithAuth(`endusers/CustomerID=${Id}`);\r\n return res;\r\n};\r\n\r\nexport const postEndUser = async (data) => {\r\n let res = await postWithAuth('endusers', data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { getServiceAgentById } from '../../../../Core/Services/InternalUser/ServiceAgent/serviceAgentService';\r\nimport { formatters } from '../../../../Core/Controls';\r\nimport { getEndUserByID } from '../../../../Core/Services/InternalUser/ControllerService/endUserService';\r\nimport { CircularProgress } from '@material-ui/core';\r\n\r\nfunction EndUserDetails(props) {\r\n const [state, setState] = useState({\r\n endUserID: '',\r\n endUserCustomerID: '',\r\n endUserName: '',\r\n endUserAddress1: '',\r\n endUserAddress2: '',\r\n endUserTown: '',\r\n endUserCounty: '',\r\n endUserCountryCode: '',\r\n endUserPostCode: '',\r\n endUserContactName: '',\r\n endUserContactPhone: '',\r\n endUserContactEmail: ''\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.endUserID) {\r\n let res = await getEndUserByID(props.endUserID);\r\n if (res.success) {\r\n const data = res.data.list[0];\r\n setState((st) => ({\r\n ...st,\r\n endUserID: data.endUserID,\r\n endUserCustomerID: data.endUserCustomerID,\r\n endUserName: data.endUserName,\r\n endUserAddress1: data.endUserAddress1,\r\n endUserAddress2: data.endUserAddress2,\r\n endUserTown: data.endUserTown,\r\n endUserCounty: data.endUserCounty,\r\n endUserCountryCode: data.endUserCountryCode,\r\n endUserPostCode: data.endUserPostCode,\r\n endUserContactName: data.endUserContactName,\r\n endUserContactPhone: data.endUserContactPhone,\r\n endUserContactEmail: data.endUserContactEmail,\r\n loader: true\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n return (\r\n state.loader ? (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Battery Level\r\n \r\n \r\n\r\n \r\n \r\n Latest Battery Levels {vehicleLevelOfCharge || 0}% (level of charge) / {vehicleStateOfCharge || 0}% (state of\r\n charge)\r\n {vehicleBatteryLevelDate != 'N/A' ? (\r\n vehicleBatteryLevelDate ? (\r\n on {moment(vehicleBatteryLevelDate).format('DD/MM/YYYY')} \r\n ) : (\r\n 'Data not recorded'\r\n )\r\n ) : (\r\n ' Data not recorded'\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 EndUserDetails;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { getServiceAgentById } from '../../../../Core/Services/InternalUser/ServiceAgent/serviceAgentService';\r\nimport { formatters } from '../../../../Core/Controls';\r\nimport { CircularProgress } from '@material-ui/core';\r\nimport { InputLabel } from '@material-ui/core';\r\nimport { SecondaryButton } from '../../../../Core/Controls';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { DatePicker } from '../../../../Core/Controls';\r\nimport moment from 'moment/moment';\r\nimport { PortableWifiOffSharp } from '@material-ui/icons';\r\nimport { archiveVehicle, unArchiveVehicle } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\n\r\nfunction ArchiveVehicleModal(props) {\r\n const { showToastError, showToastSuccess } = useToast();\r\n\r\n const [state, setState] = useState({\r\n date: moment().format('YYYY-MM-DD'),\r\n VehicleID: props.VehicleID,\r\n VehicleActive: props.VehicleActive,\r\n\r\n errors: {}\r\n });\r\n\r\n useEffect(async () => {}, []);\r\n\r\n const inputChange = (e) => {\r\n const { name, value, type } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validations = () => {\r\n const { date } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!date || date == '') {\r\n errors.date = 'Date is required';\r\n formIsValid = false;\r\n }\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n if (validations()) {\r\n const { date, VehicleID, VehicleActive } = state;\r\n\r\n let res = {};\r\n\r\n if (VehicleActive) {\r\n res = await archiveVehicle(VehicleID, date);\r\n } else {\r\n res = await unArchiveVehicle(VehicleID, date);\r\n }\r\n\r\n if (res?.success) {\r\n showToastSuccess(res?.data?.message);\r\n props.onClose(res);\r\n } else {\r\n showToastError(res?.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Upcoming Events\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\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 VehicleDashBoard = (props) => {\r\n const { otherFields, pullMileageData, state, dateFields, jobFields, getVehicleDataById } = useContext(VehicleScreenContext);\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 handleClose = () => {\r\n setModalState((st) => ({\r\n ...st,\r\n customerModal: false,\r\n depotModal: false,\r\n serviceAgentModal: false,\r\n endUserModal: false\r\n }));\r\n };\r\n\r\n const [modalState, setModalState] = useState({\r\n customerModal: false,\r\n depotModal: false,\r\n serviceAgentModal: false,\r\n endUserModal: false\r\n });\r\n\r\n const renderBold = (toRender, modalName) => {\r\n return toRender ? (\r\n \r\n
\r\n {props.showEdit && (\r\n <>\r\n \r\n \r\n \r\n \r\n Mileage Log\r\n \r\n \r\n\r\n \r\n \r\n \r\n Latest Mileage {formatters.numberThousandsSeparator(props.otherFields.vehicleLatestMileage)}\r\n {props.otherFields.vehicleLastMileageDate != 'N/A' ? (\r\n on {props.otherFields.vehicleLastMileageDate}\r\n ) : null}\r\n \r\n \r\n \r\n props.changeIndex(9)} />\r\n \r\n \r\n \r\n
\r\n handleRowClick(modalName)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {toRender}\r\n
\r\n ) : (\r\n ''\r\n );\r\n };\r\n\r\n const handleRowClick = (toTurnOn) => {\r\n setModalState((st) => ({\r\n ...st,\r\n [toTurnOn]: true\r\n }));\r\n };\r\n\r\n const tableData = [\r\n {\r\n name1: 'Make/Model',\r\n value1: `${state.makeID} / ${state.modelID}`,\r\n name2: 'Customer',\r\n value2: renderBold(state.customerName, 'customerModal'),\r\n name3: 'Depot',\r\n value3: renderBold(state.depotName, 'depotModal')\r\n },\r\n {\r\n name1: 'Vehicle Type',\r\n value1: `${state.vehicleTypeDescription || ''}`,\r\n name2: 'Vehicle Category',\r\n value2: `${state.vehicleCategoryDescription || ''}`,\r\n name3: 'Colour',\r\n value3: `${otherFields.colour || ''}`\r\n },\r\n {\r\n name1: 'Contract Number',\r\n value1: `${otherFields.vehicleMaintenanceRef || ''}`,\r\n name2: 'Fuel Type',\r\n value2: `${state.vehicleFuelType}`,\r\n name3: 'Chassis Number',\r\n value3: `${state.chassisNumber || ''}`\r\n },\r\n {\r\n name1: 'Asset Number',\r\n value1: `${otherFields.assetNumber || ''}`,\r\n name2: 'Fleet Number',\r\n value2: `${otherFields.fleetNumber || ''}`,\r\n name3: 'Ministry Number',\r\n value3: `${otherFields.ministryNumber || ''}`\r\n },\r\n {\r\n name1: 'Engine Capacity',\r\n value1: `${state.capacity || ''}`,\r\n name2: 'CO2 Emission',\r\n value2: `${state.co2Emission || ''}`,\r\n name3: 'Vehicle Check Frequency',\r\n value3: `${otherFields.vehicleCheckFrequency || ''}`\r\n },\r\n {\r\n name1: 'Date Of Reg',\r\n value1: `${dateFields.dateOfReg1}`,\r\n name2: 'MOT Expiry',\r\n value2: `${dateFields.motExpiry1}`,\r\n name3: 'Inspection Schedule',\r\n value3: `${otherFields.schedule || ''}`\r\n },\r\n {\r\n name1: 'Primary Service Agent',\r\n value1: renderBold(otherFields.primaryAgent, 'serviceAgentModal'),\r\n name2: 'End User',\r\n value2: renderBold(state.endUserName, 'endUserModal'),\r\n name3: 'Next Service',\r\n value3: `${\r\n dateFields.vehicleNextServiceDateDueDisplay && otherFields.vehicleNextServiceMileage\r\n ? otherFields.service +\r\n ' on ' +\r\n formatters.YearFormatter(dateFields.vehicleNextServiceDateDueDisplay) +\r\n '(' +\r\n otherFields.vehicleNextServiceMileage +\r\n ')'\r\n : otherFields.service || ''\r\n }`\r\n }\r\n ];\r\n\r\n const [data, setData] = useState({\r\n show: false,\r\n VehicleID: null,\r\n showBreakDownPopup: false,\r\n showDetails: true,\r\n showVORPopup: false,\r\n upcomingEventsList: [],\r\n open: false,\r\n showCheck: false,\r\n\r\n showArchivePopup: false\r\n });\r\n\r\n const pullData = async () => {\r\n if (props.VehicleID) {\r\n setData((st) => ({\r\n ...st,\r\n VehicleID: props.VehicleID\r\n }));\r\n let res = await getUpcomingEvents(props.VehicleID);\r\n if (res.success) {\r\n setData((st) => ({ ...st, upcomingEventsList: res.data.vehicleUncompletedSchedulesList }));\r\n } else {\r\n setData((st) => ({ ...st, upcomingEventsList: [] }));\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullData();\r\n }, [data.show, data.showBreakDownPopup, data.showDefectPopup, props.VehicleID]);\r\n\r\n const prepareData = () => ({\r\n show: false,\r\n showDetails: false,\r\n showBreakDownPopup: false,\r\n showDefectPopup: false,\r\n showArchivePopup: false\r\n });\r\n\r\n const handleAdd = (id, name) => {\r\n setData((st) => ({ ...prepareData(), [name]: true, VehicleID: id }));\r\n };\r\n\r\n const handleAddPopUp = (id, name) => {\r\n setData((st) => ({ ...st, [name]: true, VehicleID: id }));\r\n };\r\n\r\n const closeAddPopUp = (flag, name) => {\r\n setData((st) => ({ ...st, showVORPopup: false }));\r\n flag && getVehicleDataById();\r\n flag && props.pullDetails();\r\n };\r\n\r\n const closeModal = (res) => {\r\n setData((st) => ({\r\n ...st,\r\n show: false,\r\n showBreakDownPopup: false,\r\n showDefectPopup: false,\r\n showDetails: true,\r\n showCheck: false,\r\n showArchivePopup: false\r\n }));\r\n res && props.pullDetails();\r\n res && getVehicleDataById();\r\n };\r\n const showBtn = data.showBreakDownPopup || data.showDefectPopup || data.show;\r\n let { isReadOnlyUser } = useLoginInfo();\r\n\r\n const Header = () => {\r\n return !isReadOnlyUser && !showBtn ? (\r\n \r\n \r\n {jobFields?.vehicleActive && (\r\n <>\r\n {checkhaveAccess?.CanUpdateVehicles && (\r\n handleAdd(data.VehicleID, 'show')} />\r\n )}\r\n {jobFields.vorVehicleID ? null : (\r\n <>\r\n {checkhaveAccess?.CanAddVOR ? (\r\n handleAddPopUp(data.VehicleID, 'showVORPopup')}\r\n />\r\n ) : null}\r\n \r\n )}\r\n {checkhaveAccess?.CanAddDailyChecks && (\r\n handleAdd(data.VehicleID, 'showCheck')}\r\n />\r\n )}\r\n {checkhaveAccess?.CanAddBreakdowns && (\r\n handleAdd(data.VehicleID, 'showBreakDownPopup')}\r\n />\r\n )}\r\n {checkhaveAccess?.CanAddDefects && (\r\n handleAdd(data.VehicleID, 'showDefectPopup')}\r\n />\r\n )}\r\n \r\n )}\r\n handleAddPopUp(data.VehicleID, 'showArchivePopup')}\r\n />\r\n
\r\n \r\n \r\n {jobFields?.vehicleActive && (\r\n <>\r\n handleAdd(data.VehicleID, 'show')} />\r\n {jobFields.vorVehicleID ? null : (\r\n <>\r\n {checkhaveAccess?.CanAddVOR ? (\r\n handleAddPopUp(data.VehicleID, 'showVORPopup')}\r\n />\r\n ) : null}\r\n \r\n )}\r\n {checkhaveAccess?.CanAddDailyChecks && (\r\n handleAdd(data.VehicleID, 'showCheck')}\r\n />\r\n )}\r\n {checkhaveAccess?.CanAddBreakdowns && (\r\n handleAdd(data.VehicleID, 'showBreakDownPopup')}\r\n />\r\n )}\r\n {checkhaveAccess?.CanAddDefects && (\r\n handleAdd(data.VehicleID, 'showDefectPopup')}\r\n />\r\n )}\r\n \r\n )}\r\n handleAddPopUp(data.VehicleID, 'showArchivePopup')}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n return (\r\n <>\r\n {modalState.customerModal ? (\r\n \r\n \r\n \r\n \r\n Key Dates\r\n \r\n \r\n \r\n
\r\n \r\n {!(data.show || data.showBreakDownPopup || data.showDefectPopup || data.showCheck) && (\r\n \r\n \r\n \r\n {!showBtn && (\r\n \r\n \r\n {data.showDetails && \r\n \r\n \r\n {jobFields?.vehicleActive && (\r\n <>\r\n {otherFields.displayBatteryLevel == 'Y' && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {!showBtn && (\r\n \r\n \r\n \r\n \r\n \r\n {!showBtn && \r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n\r\n {/* {!(data.show || data.showBreakDownPopup || data.showDefectPopup || data.showCheck) && (\r\n \r\n {!showBtn && (\r\n \r\n \r\n {data.showDetails && \r\n \r\n \r\n {jobFields?.vehicleActive && (\r\n <>\r\n {otherFields.displayBatteryLevel == 'Y' && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n \r\n {!showBtn && (\r\n \r\n \r\n \r\n \r\n \r\n {!showBtn && \r\n \r\n \r\n )}\r\n \r\n )} */}\r\n\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\n \r\n {data.show ? closeModal()} /> : null}\r\n {data.showDefectPopup ? closeModal()} /> : null}\r\n {data.showCheck ? closeModal()} /> : null}\r\n {data.showArchivePopup ? (\r\n closeAddPopUp(false)}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n
\r\n \r\n {\r\n <>\r\n handleAdd(row.noteId)} toolTipTitle=\"Edit Note\" />\r\n {!isReadOnlyUser && handleDelete(row.noteId)} toolTipTitle=\"Delete Note\" />}\r\n \r\n }\r\n
\r\n );\r\n };\r\n console.log(state.userBasePermi, 'userBasePermi');\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n if (checkhaveAccess?.CanViewNotes && state.userBasePermi) {\r\n tempCols.splice(0, 0, {\r\n key: 'action',\r\n name: 'Action',\r\n width: '5%',\r\n formatter: dataFormatter\r\n });\r\n }\r\n return tempCols;\r\n }, [state.userBasePermi]);\r\n const gridBtnTitle = `Add ${props.frompage === 'ServiceAgents' ? 'Service Agent' : props.frompage} Notes`;\r\n return (\r\n \r\n ({\r\n records: res.data.notelist,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle={state.userBasePermi ? gridBtnTitle : ''}\r\n onBtnClick={() => handleAdd(null)}\r\n />\r\n {state.show ? (\r\n closeNoteModal(false)} maxWidth=\"sm\">\r\n closeNoteModal(true)} {...props} />\r\n \r\n ) : null}\r\n {state.showDelete ? (\r\n closeNoteModal(false)} maxWidth=\"sm\">\r\n closeNoteModal(true)} onFormSubmit={() => handleDeleteSubmit()} {...props} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n \r\n \r\n {note}\r\n
\r\n \r\n {moment(rd).format('LLL')}\r\n
\r\n \r\n {createdBy} @ {moment(dateCreated).format('LLL')}\r\n {(dateClosed || closedBy) && ` (Closed by: ${closedBy} @ ${moment(dateClosed).format('LLL')} )`}\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst DefectEditDetails = (props) => {\r\n const { defectFields, userSettings, submitHandler, DefectID, pullDefectByID, pullNotes, setDefectFields } = useContext(DefectsScreenContext);\r\n const [state, setState] = useState({});\r\n const { userRoles } = useLoginInfo();\r\n const isDriver = userRoles.includes('driver');\r\n const isCustomer = userRoles.includes('customer');\r\n const isInternal = userRoles.includes('internal');\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const closeNoteModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false,\r\n showDefectBreakNotes: false\r\n }));\r\n res && pullNotes();\r\n };\r\n\r\n const closeVORModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showVORPopup: false,\r\n showJobStepperScreen: false\r\n }));\r\n // res && props.pullDetails();\r\n res && pullDefectByID();\r\n };\r\n\r\n const closeDeleteDefectModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showJobDeleteModal: false\r\n }));\r\n if (res) {\r\n history.push({\r\n pathname: `/maintenance/defects`,\r\n search: '',\r\n state: ''\r\n });\r\n }\r\n };\r\n\r\n const addNotes = (show) => {\r\n setState((st) => ({\r\n ...st,\r\n [show]: true\r\n }));\r\n };\r\n\r\n const showModalHandler = (screenName) => {\r\n setState((st) => ({\r\n ...st,\r\n [screenName]: true\r\n }));\r\n };\r\n function isValYesNo(val) {\r\n return val ? 'Yes' : 'No';\r\n }\r\n\r\n const handleColse = () => {\r\n setDefectFields((st) => ({ ...st, defectNumberGenerated: false }));\r\n props.onClose();\r\n };\r\n\r\n const handleDefetcBreakDownReporting = (val) => {\r\n history.push({\r\n pathname: `/maintenance/defect/reporting/${defectFields.customerID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n let currentNoteID = defectFields?.NoteList ? defectFields?.NoteList[0]?.noteID : null;\r\n let newNoteID = defectFields?.NoteList?.find((o) => o.closedBy !== null)?.noteID;\r\n return (\r\n
\r\n {defectFields.isReload ? (\r\n \r\n {defectFields.vehicleJobProgress.map((a, index) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n {/* \r\n \r\n \r\n Defect Details\r\n \r\n \r\n \r\n \r\n \r\n \r\n {!defectFields.vorVehicleID && (\r\n \r\n \r\n )}\r\n \r\n */}\r\n \r\n \r\n \r\n Defect Details\r\n \r\n \r\n \r\n \r\n {!defectFields.vorVehicleID && !isDriver && !isCustomer && !isServiceAgent && (\r\n showModalHandler('showVORPopup')}\r\n style={{ fontWeight: 'bold', marginRight: 10 }}\r\n />\r\n )}\r\n {!isDriver && !isCustomer && !isServiceAgent && (\r\n <>\r\n {defectFields.defectNumberGenerated && !props.isAddJobBtnShow ? (\r\n showModalHandler('showJobStepperScreen')}\r\n style={{ fontWeight: 'bold', marginRight: 10 }}\r\n />\r\n ) : null}\r\n showModalHandler('showJobDeleteModal')}\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {/* Defect Details */}\r\n \r\n {defectFields.defectDescription?.toUpperCase() || 'N\\\\A'}\r\n \r\n \r\n \r\n \r\n Reporting Depot \r\n {defectFields.reportingDepot || 'N\\\\A'} \r\n \r\n \r\n Customer Defect Number \r\n {defectFields.defectCustomerDefectNumber || 'N\\\\A'} \r\n \r\n \r\n Vehicle Location \r\n {defectFields.defectLocation || 'N\\\\A'} \r\n \r\n \r\n \r\n \r\n Mileage \r\n {defectFields.defectMileage || 'N\\\\A'} \r\n \r\n \r\n Reported By \r\n {defectFields.defectContactName || 'N\\\\A'} \r\n \r\n \r\n Reported Phone \r\n \r\n {formatters.phoneNumberFormatter(defectFields.defectContactNumber) || 'N\\\\A'}\r\n \r\n \r\n \r\n \r\n \r\n Driver Name \r\n {defectFields.defectDriverName || 'N\\\\A'} \r\n \r\n \r\n Driver Phone \r\n \r\n {formatters.phoneNumberFormatter(defectFields.defectDriverTelephone) || 'N\\\\A'}\r\n \r\n \r\n\r\n \r\n Authorised By \r\n {defectFields.defectAuthorisedBy || 'N\\\\A'} \r\n \r\n \r\n \r\n \r\n Preferred Service Agent \r\n {defectFields.defectPreferredServiceAgent || 'N\\\\A'} \r\n \r\n \r\n Already Booked? \r\n {isValYesNo(userSettings.defectAlreadyBooked)} \r\n \r\n \r\n Already Completed? \r\n {isValYesNo(userSettings.defectAlreadyCompleted)} \r\n \r\n \r\n \r\n \r\n Call Out Required \r\n {isValYesNo(userSettings.defectCallOutRequired)} \r\n \r\n \r\n Urgent Call Out \r\n {isValYesNo(userSettings.defectUrgentCallOut)} \r\n \r\n \r\n Put On VOR \r\n {isValYesNo(userSettings.defectVOR)} \r\n \r\n \r\n \r\n \r\n Advised Don't Drive? \r\n {isValYesNo(userSettings.defectAdvisedDontDrive)} \r\n \r\n \r\n Passenger Involved? \r\n {isValYesNo(userSettings.defectPassengersInvolved)} \r\n \r\n \r\n Number Of Passenger \r\n {defectFields.defectNumberOfPassengers || 'N\\\\A'} \r\n \r\n \r\n \r\n \r\n Accident Damage? \r\n {isValYesNo(userSettings.defectAccidentDamage)} \r\n \r\n \r\n Insurance Reference \r\n {defectFields.defectInsuranceReference || 'N\\\\A'} \r\n \r\n \r\n Replacement vehicle Required? \r\n {isValYesNo(userSettings.defectReplacementVehicle)} \r\n \r\n \r\n \r\n \r\n Vehicle Loaded? \r\n {isValYesNo(userSettings.defectVehicleLoaded)} \r\n \r\n \r\n Load Type \r\n {userSettings.vehicleLoadTypeDescription} \r\n \r\n \r\n Police On Scene? \r\n {isValYesNo(userSettings.defectPoliceOnScene)} \r\n \r\n \r\n \r\n \r\n Mobility Requested? \r\n {isValYesNo(userSettings.defectMobilityRequested)} \r\n \r\n \r\n Mobility Used? \r\n {isValYesNo(userSettings.defectMobilityUsed)} \r\n \r\n \r\n PG9 Issued? \r\n {isValYesNo(userSettings.defectPG9Issued)} \r\n \r\n \r\n \r\n \r\n\r\n {!isServiceAgent && (\r\n \r\n \r\n \r\n \r\n Job Progress\r\n \r\n \r\n \r\n {/* addNotes('show')}\r\n style={{ fontWeight: 'bold', marginRight: 10 }}\r\n />\r\n )}\r\n {isInternal && checkhaveAccess?.CanViewNotes && (\r\n addNotes('showDefectBreakNotes')}\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n \r\n \r\n {/* \r\n */}\r\n \r\n {defectFields.NoteList?.map((n, i) => (\r\n <>\r\n closeNoteModal(true)}\r\n noteRefsGuidID={defectFields.defectID}\r\n defectID={defectFields.defectID}\r\n />\r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n {state.show ? (\r\n closeNoteModal(false)}\r\n onFormSubmit={closeNoteModal}\r\n reportedBy={defectFields.defectContactName}\r\n reportedPhone={defectFields.defectContactNumber}\r\n />\r\n ) : null}\r\n {state.showDefectBreakNotes ? (\r\n closeNoteModal(false)}\r\n onFormSubmit={closeNoteModal}\r\n reportedBy={defectFields.defectContactName}\r\n reportedPhone={defectFields.defectContactNumber}\r\n />\r\n ) : null}\r\n {state.showVORPopup ? (\r\n closeVORModal(false)} maxWidth=\"lg\" overflow=\"auto\">\r\n \r\n ) : null}\r\n {state.showJobDeleteModal ? (\r\n closeDeleteDefectModal(false)} title={'Delete Job'} maxWidth=\"sm\" fullWidth>\r\n \r\n ) : null}\r\n {state.showJobStepperScreen ? (\r\n closeVORModal(false)} maxWidth=\"sm\">\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.defectRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.serviceAgentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.defectVehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n let agentNameCol = tempCols.find((element) => element.key === 'serviceAgentName');\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (!props.VehicleID) {\r\n if (!props.isCust) {\r\n tempCols.splice(1, 0, { key: 'customer', name: 'Customer Name', width: '8%', formatter: renderCustomerName });\r\n }\r\n\r\n tempCols.splice(!props.isCust ? 1 : 2, 0, { key: 'defectRegNumber', name: 'Reg Number', width: '8%', formatter: renderRegNumberEdit });\r\n }\r\n // if (window.innerWidth > 600) {\r\n // tempCols.splice(\r\n // 6,\r\n // 0,\r\n // { key: 'defectDriverName', name: 'Driver Name', width: 110 },\r\n // { key: 'defectDriverTelephone', name: 'Driver Phone', width: 120 }\r\n // );\r\n // // tempCols.splice(1, 0, { key: 'defectType', name: 'Defect Type', width: 130 });\r\n // }\r\n return tempCols;\r\n }, []);\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCrumbs = [...baseCrumbs];\r\n if (state.modalEditDetail) {\r\n tempCrumbs.splice(3, 0, { name: `Defect Number ${state.defectNumberGenerated} [${formatters.DateTimeFormatter(state.defectDate)}]`, active: true });\r\n }\r\n return tempCrumbs;\r\n }, [state.modalToggle]);\r\n\r\n const handleUpdate = (data, vehicleId, modalName) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (data) {\r\n newSt.defectID = data.defectID;\r\n newSt.rowVehicleID = data.defectVehicleID;\r\n newSt.defectNumberGenerated = data.defectNumberGenerated;\r\n newSt.defectDate = data.defectDate;\r\n }\r\n if (vehicleId) {\r\n newSt.rowVehicleID = vehicleId;\r\n }\r\n newSt[modalName] = true;\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const closeModalHandler = (res, modalName) => {\r\n setState((state) => ({ ...state, [modalName]: false, show: false, filterVal: false }));\r\n res && pullDefects();\r\n };\r\n\r\n let urlForcondition = `VehicleDefects${props.VehicleID ? `?VehicleID=${props.VehicleID}` : ''}${props.customerID ? `?customerID=${props.customerID}` : ''}`;\r\n\r\n const gridBtnTitle = state.show || (props.VehicleID && checkhaveAccess.CanAddDefects) ? 'Add Defect' : null;\r\n const isPage = !!(props.VehicleID || props.customerID);\r\n return (\r\n \r\n {state.modalToggle ? (\r\n closeModalHandler(true, 'modalToggle')}\r\n fromPage={state.fromPage}\r\n />\r\n ) : state.modalEditDetail ? (\r\n closeModalHandler(true, 'modalEditDetail')}\r\n // fromPage={state.fromPage}\r\n // pullDetails={props.pullDetails}\r\n />\r\n ) : (\r\n <>\r\n {!isPage && (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={urlForcondition}\r\n btnTitle={gridBtnTitle}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"DefectScreen\"\r\n onBtnClick={() => handleUpdate(null, state.filterVehicleID, 'modalToggle')}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default DefectsScreen;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DataGrid, EditButton, formatters, InputText, SimpleField } from '../../../../Core/Controls';\r\nimport { getVechicleIDByRegNO } from '../../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport AddBreaddownModal from './AddBreakdown';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\nimport ServiceAgentDetails from '../../Controllers/DetailsModal/serviceAgent';\r\nimport CustomerDetails from '../../Controllers/DetailsModal/customerDetails';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Breakdowns', path: '/maintenance/breakdowns/:all', active: true }\r\n];\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: '7%'\r\n },\r\n { key: 'defectDescription', name: 'Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: '8%' },\r\n // { key: 'defectDriverName', name: 'Driver Name', width: 160 },\r\n // { key: 'defectDriverTelephone', name: 'Driver Phone', width: 120 },\r\n // { key: 'serviceAgentName', name: 'Service Agent', width: '10%' },\r\n { key: 'status', name: 'Status', width: '15%' }\r\n // { key: 'defectType', name: 'Defect Type', width: 160 }\r\n];\r\n\r\nconst BreakDownDashboard = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n let history = useHistory();\r\n const [state, setState] = useState({\r\n breakdownList: [],\r\n loader: true,\r\n modalToggle: false,\r\n breakID: null,\r\n rowVehicleID: null,\r\n show: false,\r\n filterVal: ''\r\n });\r\n\r\n const { userRoles } = useLoginInfo();\r\n const isDriver = userRoles.includes('driver');\r\n\r\n const handleBreakDown = (params, VehicleID, modalName) => {\r\n setState((st) => ({\r\n ...st,\r\n modalName: modalName,\r\n modalToggle: true,\r\n breakID: params,\r\n rowVehicleID: VehicleID\r\n }));\r\n };\r\n const closeModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: false,\r\n show: false,\r\n filterVal: ''\r\n }));\r\n res && pullBreakDownAndUpdateState();\r\n };\r\n\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n const getRegNumberVal = (setRegNumber) => {\r\n // setState((st) => ({\r\n // ...st,\r\n // filterVal: setRegNumber\r\n // }));\r\n };\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n } else {\r\n newSt.show = false;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n }\r\n\r\n pullBreakDownAndUpdateState();\r\n }, [props.VehicleID, state.filterVal]);\r\n\r\n const pullBreakDownAndUpdateState = async () => {\r\n let defecttypecode = '';\r\n if (props.VehicleID) {\r\n defecttypecode = '';\r\n }\r\n if (props?.match?.params?.all == 'typebo') {\r\n defecttypecode = 'bo';\r\n }\r\n if (props?.match?.params?.all == 'typebr') {\r\n defecttypecode = 'br';\r\n }\r\n if (props?.match?.params?.all == ':all') {\r\n defecttypecode = '';\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date(),\r\n defecttypecode: defecttypecode\r\n }));\r\n };\r\n\r\n let urlForcondition = `VehicleBreakdowns/?${props.VehicleID ? `VehicleID=${props.VehicleID}` : ''}defecttypecode=${state.defecttypecode}`;\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n state: 'breakdown'\r\n });\r\n };\r\n\r\n const handleEditBreakdown = (val) => {\r\n history.push({\r\n pathname: `/maintenance/breakdowns/Edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.defectRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.serviceAgentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n let agentNameCol = tempCols.find((element) => element.key === 'serviceAgentName');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n if (!props.VehicleID) {\r\n tempCols.splice(1, 0, { key: 'customer', name: 'Customer Name', width: '10%', formatter: renderCustomerName });\r\n tempCols.splice(2, 0, { key: 'defectRegNumber', name: 'Reg Number', width: '8%', formatter: renderRegNumberEdit });\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n const gridBtnTitle = state.show || (props.VehicleID && checkhaveAccess?.CanAddBreakdowns) ? 'Add Breakdown' : null;\r\n\r\n return (\r\n \r\n {state.modalToggle ? (\r\n <>\r\n
\r\n closeModal(true)}\r\n breakDownID={state.breakID}\r\n modalName={state.modalName}\r\n frompage={props.frompage || 'Breakdown'}\r\n />\r\n \r\n ) : (\r\n <>\r\n {props.frompage !== 'Vehicles' ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"BreakdownScreen\"\r\n getUrl={urlForcondition}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleBreakDown(null, state.filterVehicleID, 'Add')}\r\n isReload={state.isReload}\r\n getRegNumberVal={getRegNumberVal}\r\n />\r\n \r\n )}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default BreakDownDashboard;\r\n","import { FormHelperText, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport moment from 'moment';\r\nimport { DatePicker, InputText, NoButton, SecondaryButton, SelectBox, YesButton, SingleSelect } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../../../commonStyle.scss';\r\nimport { getAllScheduleEvents, getAllScheduleDropdowns } from '../../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport { getSchedulesById, postSchedule } from '../../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\n\r\nconst ScheduleAddEdit = (props) => {\r\n console.log(props, 'props');\r\n const [state, setState] = useState({\r\n vehicleID: null,\r\n scheduleID: null,\r\n scheduleEventID: props.vehicleServiceScheduleID || '',\r\n scheduleDateDue: props.vehicleNextServiceDateDue || '',\r\n scheduleEndDate: '',\r\n scheduleMilesDue: props.vehicleNextServiceMileage || '',\r\n scheduleFirstEvent: '',\r\n dropList: [],\r\n serviceAgentsList: [],\r\n scheduleEventName: '',\r\n scheduleServiceAgentIDValue: null\r\n });\r\n\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const pullDropList = async () => {\r\n let res = await getAllScheduleDropdowns(props.vehicleId);\r\n setState((st) => ({\r\n ...st,\r\n dropList: res.data.scheduleEvents,\r\n serviceAgentsList: res.data.serviceAgents\r\n }));\r\n };\r\n\r\n const pullSchedule = async () => {\r\n let res = await getSchedulesById(props.scheduleId);\r\n let temp = res.data;\r\n setState((st) => ({\r\n ...st,\r\n scheduleID: temp.scheduleID || null,\r\n vehicleID: temp.vehicleID || '',\r\n scheduleEventID: temp.scheduleEventID || '',\r\n scheduleDateDue: temp.scheduleDateDue || '',\r\n scheduleMilesDue: temp.scheduleMilesDue || '',\r\n scheduleFirstEvent: temp.scheduleFirstEvent || '',\r\n scheduleServiceAgentID: temp.scheduleServiceAgentID || '',\r\n scheduleEventName: temp.scheduleEventName,\r\n scheduleEndDate: temp.scheduleEndDate || ''\r\n }));\r\n };\r\n useEffect(() => {\r\n pullDropList();\r\n if (!props.isAdd) {\r\n pullSchedule();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n\r\n if (state.scheduleServiceAgentID && state.serviceAgentsList.length > 0) {\r\n newSt.scheduleServiceAgentIDValue = state.serviceAgentsList.find(({ id }) => id === state.scheduleServiceAgentID);\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.scheduleServiceAgentID, state.serviceAgentsList]);\r\n\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n if (!/[^\\s]/.test(state.scheduleEventID)) {\r\n err.scheduleEventID = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleServiceAgentID)) {\r\n err.scheduleServiceAgentID = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleDateDue)) {\r\n err.scheduleDateDue = true;\r\n noErrors = false;\r\n }\r\n\r\n let temp = state.scheduleMilesDue;\r\n\r\n if (+temp < 0) {\r\n err.scheduleMilesDueN = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n\r\n const handleData = async () => {\r\n if (validate()) {\r\n let response = await postSchedule({\r\n scheduleID: state.scheduleID || null,\r\n vehicleID: state.vehicleID || props.vehicleId,\r\n scheduleEventID: state.scheduleEventID || null,\r\n scheduleDateDue: state.scheduleDateDue || '',\r\n scheduleMilesDue: +state.scheduleMilesDue || null,\r\n // scheduleFirstEvent: state.scheduleFirstEvent || false,\r\n scheduleServiceAgentID: state.scheduleServiceAgentIDValue?.id,\r\n scheduleEndDate: state.scheduleEndDate\r\n });\r\n if (response) {\r\n response.success ? showToastSuccess('Vehicle Schedule updated successfully') : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n props.onClose();\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const yesNoClicked = (ev) => {\r\n if (ev.target.innerText == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleFirstEvent: true\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n scheduleFirstEvent: false\r\n }));\r\n }\r\n };\r\n return (\r\n <>\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
\r\n );\r\n };\r\n\r\n return (\r\n \r\n {props.note.scheduleNoteDescription}\r\n
\r\n \r\n {props.note.scheduleNoteCreatedBy} @ {moment(props.note.scheduleNoteDateCreated).format('LLL')}\r\n
\r\n \r\n \r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n {errors.noteText ? 'Note is empty!' : null} \r\n \r\n\r\n {/* \r\n */}\r\n\r\n \r\n {state.rows?.map((n, i) => (\r\n <>\r\n
\r\n \r\n ))}\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ScheduleNotes;\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport moment from 'moment';\r\nimport { DatePicker, InputText, NoButton, SecondaryButton, SelectBox, TimePicker, YesButton } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../../../commonStyle.scss';\r\nimport './scheduleVehicleStyle.scss';\r\nimport {\r\n getScheduleRequestBookingById,\r\n getAllDropDowns,\r\n postScheduleRequestBooking\r\n} from '../../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\n\r\nconst ScheduleBookingStatus = (props) => {\r\n const [state, setState] = useState({\r\n scheduleDateDue: '',\r\n scheduleID: null,\r\n scheduleNightBooking: null,\r\n scheduleRequestedBookingDate: '',\r\n scheduleRequestedBookingTimeSlot: '',\r\n dropList: [],\r\n showLocationBox: false,\r\n scheduleCollectionLocation: '',\r\n scheduleDeliveryLocation: ''\r\n });\r\n const [errors, setErrors] = useState([]);\r\n const { showToastSuccess, showToastError } = useToast();\r\n const pullBookingData = async () => {\r\n let DataList = await getAllDropDowns();\r\n setState((st) => ({\r\n ...st,\r\n dropList: DataList.data\r\n }));\r\n let res = await getScheduleRequestBookingById(props.scheduleId);\r\n let bookingData = res.data;\r\n setState((st) => ({\r\n ...st,\r\n vehicleID: bookingData.vehicleID || null,\r\n scheduleCollectAfter: bookingData.scheduleCollectAfter,\r\n scheduleCollectionAndDeliverID: bookingData.scheduleCollectionAndDeliverID,\r\n scheduleDateDue: bookingData.scheduleDateDue || '',\r\n scheduleDeliverBefore: bookingData.scheduleDeliverBefore,\r\n scheduleEventID: bookingData.scheduleEventID,\r\n scheduleEventName: bookingData.scheduleEventName,\r\n scheduleID: bookingData.scheduleID,\r\n scheduleNightBooking: bookingData.scheduleNightBooking,\r\n scheduleRequestedBookingDate: bookingData.scheduleRequestedBookingDate,\r\n scheduleRequestedBookingTimeSlot: bookingData.scheduleRequestedBookingTimeSlot,\r\n scheduleCollectionLocation: bookingData.scheduleCollectionLocation || '',\r\n scheduleDeliveryLocation: bookingData.scheduleDeliveryLocation || ''\r\n }));\r\n };\r\n useEffect(() => {\r\n pullBookingData();\r\n }, []);\r\n\r\n const checkNull = (param) => {\r\n if (/[^\\s]/.test(param)) {\r\n return param;\r\n } else {\r\n return null;\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const errors = [];\r\n let noErrors = true;\r\n if (state.showLocationBox) {\r\n if (!/[^\\s]/.test(state.scheduleCollectionLocation)) {\r\n errors.scheduleCollectionLocation = 'Collection Location Required';\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleDeliveryLocation)) {\r\n errors.scheduleDeliveryLocation = 'Delivery Location Required';\r\n noErrors = false;\r\n }\r\n setErrors(errors);\r\n return noErrors;\r\n } else {\r\n return true;\r\n }\r\n };\r\n\r\n const handleData = async (ev) => {\r\n if (validations()) {\r\n let response = await postScheduleRequestBooking({\r\n vehicleID: props.vehicleId,\r\n scheduleEventID: state.scheduleEventID,\r\n scheduleID: state.scheduleID,\r\n scheduleCollectionAndDeliverID: state.scheduleCollectionAndDeliverID,\r\n scheduleEventName: state.scheduleEventName,\r\n scheduleDateDue: state.scheduleDateDue,\r\n scheduleRequestedBookingDate: checkNull(state.scheduleRequestedBookingDate),\r\n scheduleRequestedBookingTimeSlot: checkNull(state.scheduleRequestedBookingTimeSlot),\r\n scheduleCollectAfter: checkNull(state.scheduleCollectAfter),\r\n scheduleDeliverBefore: checkNull(state.scheduleDeliverBefore),\r\n scheduleNightBooking: state.scheduleNightBooking,\r\n scheduleCollectionLocation: state.showLocationBox ? state.scheduleCollectionLocation : null,\r\n scheduleDeliveryLocation: state.showLocationBox ? state.scheduleDeliveryLocation : null\r\n });\r\n if (response) {\r\n response.success ? showToastSuccess('Request Booking Updated Successfully') : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n props.onClose(true);\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n const yesNoChanged = (ev) => {\r\n if (ev.target.innerText == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: true\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: false\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (state.scheduleCollectionAndDeliverID === 3 || state.scheduleCollectionAndDeliverID === 4 || state.scheduleCollectionAndDeliverID === 5) {\r\n setState((st) => ({ ...st, showLocationBox: true }));\r\n } else {\r\n setState((st) => ({ ...st, showLocationBox: false }));\r\n }\r\n }, [state.scheduleCollectionAndDeliverID]);\r\n return (\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n Event \r\n {state.scheduleEventName} \r\n \r\n \r\n Date Due \r\n {state.scheduleDateDue ? moment(state.scheduleDateDue).format('DD/MM/YYYY') : 'No Date Assigned'} \r\n \r\n \r\n
\r\n\r\n\r\n \r\n Requested Booking Date \r\n \r\n \r\n Requested Booking Time Slot \r\n \r\n \r\n Is Night Booking? \r\n \r\n \r\n \r\n Collection And Delivery \r\n \r\n \r\n Deliver Before \r\n \r\n \r\n Collect After \r\n \r\n {state.showLocationBox && (\r\n <>\r\n \r\n \r\n Collection Location\r\n \r\n {errors.scheduleCollectionLocation} \r\n \r\n \r\n \r\n Pickup Location\r\n \r\n {errors.scheduleDeliveryLocation} \r\n \r\n \r\n )}\r\n\r\n \r\n Save \r\n \r\n \r\n props.onClose(false)}>Cancel \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ScheduleBookingStatus;\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport moment from 'moment';\r\nimport { DatePicker, InputText, NoButton, SecondaryButton, SelectBox, YesButton } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../../../commonStyle.scss';\r\nimport './scheduleVehicleStyle.scss';\r\nimport {\r\n getScheduleBookingSectionById,\r\n getAllDropDowns,\r\n postScheduleBookingSection,\r\n getScheduleRequestBookingById\r\n} from '../../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\n\r\nlet domainName = window.location.host;\r\nlet trimedhost = domainName.includes('localhost') ? 'localhost' : domainName;\r\nconst ScheduleBookingSection = (props) => {\r\n const [state, setState] = useState({\r\n scheduleBookingDate: '',\r\n scheduleDateDue: '',\r\n scheduleEventName: '',\r\n scheduleID: null,\r\n schedulePrepDate: '',\r\n scheduleServiceAgentID: '',\r\n dropList: []\r\n });\r\n const [requestBookingData, setRequestBookingData] = useState({\r\n scheduleRequestedBookingDate: 'N/A',\r\n scheduleRequestedBookingTimeSlot: 'N/A',\r\n scheduleNightBooking: 'N/A',\r\n scheduleCollectionAndDeliverID: null,\r\n scheduleCollectionAndDeliver: 'N/A',\r\n scheduleDeliverBefore: 'N/A',\r\n scheduleCollectAfter: 'N/A'\r\n });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const formatTime = (value) => {\r\n let formattedTime = value ? moment(value, 'HH:mm:ss').format('hh:mm A') : 'N/A';\r\n return formattedTime;\r\n };\r\n\r\n const pullRequestBookingData = async () => {\r\n let res = await getScheduleRequestBookingById(props.scheduleId);\r\n let bookingData = res.data;\r\n setRequestBookingData((st) => ({\r\n ...st,\r\n scheduleCollectAfter: formatTime(bookingData.scheduleCollectAfter),\r\n scheduleCollectionAndDeliverID: bookingData.scheduleCollectionAndDeliverID || null,\r\n scheduleDeliverBefore: formatTime(bookingData.scheduleDeliverBefore),\r\n scheduleNightBooking: bookingData.scheduleNightBooking ? 'Yes' : bookingData.scheduleNightBooking === null ? 'N/A' : 'No',\r\n scheduleRequestedBookingDate: bookingData.scheduleRequestedBookingDate\r\n ? moment(bookingData.scheduleRequestedBookingDate).format('DD/MM/YYYY')\r\n : 'N/A',\r\n scheduleRequestedBookingTimeSlot: formatTime(bookingData.scheduleRequestedBookingTimeSlot)\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n scheduleBookingDate: bookingData.scheduleRequestedBookingDate || ''\r\n }));\r\n };\r\n\r\n const pullBookingData = async () => {\r\n let DataList = await getAllDropDowns();\r\n setState((st) => ({\r\n ...st,\r\n dropList: DataList.data\r\n }));\r\n let res = await getScheduleBookingSectionById(props.scheduleId);\r\n let bookingData = res.data;\r\n setState((st) => ({\r\n ...st,\r\n vehicleID: bookingData.vehicleID || null,\r\n // scheduleBookingDate: bookingData.scheduleBookingDate || bookingData.scheduleRequestedBookingDate || '',\r\n scheduleDateDue: moment(bookingData.scheduleDateDue).format('DD/MM/YYYY') || '',\r\n scheduleEventName: bookingData.scheduleEventName,\r\n scheduleID: bookingData.scheduleID,\r\n schedulePrepDate: bookingData.schedulePrepDate || '',\r\n scheduleServiceAgentID: bookingData.scheduleServiceAgentID || ''\r\n }));\r\n };\r\n useEffect(() => {\r\n pullBookingData();\r\n pullRequestBookingData();\r\n }, []);\r\n useEffect(() => {\r\n let collName = state.dropList.collectionAndDelivery?.filter((x) => x.id == requestBookingData.scheduleCollectionAndDeliverID).map((z) => z.name)[0];\r\n setRequestBookingData((st) => ({\r\n ...st,\r\n scheduleCollectionAndDeliver: collName || 'N/A'\r\n }));\r\n }, [state.dropList, requestBookingData.scheduleCollectionAndDeliverID]);\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n // if (!/[^\\s]/.test(state.schedulePrepDate)) {\r\n // err.schedulePrepDate = true;\r\n // noErrors = false;\r\n // }\r\n if (!/[^\\s]/.test(state.scheduleServiceAgentID)) {\r\n err.scheduleServiceAgentID = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleBookingDate)) {\r\n err.scheduleBookingDate = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n const checkNull = (param) => {\r\n if (/[^\\s]/.test(param)) {\r\n return param;\r\n } else {\r\n return null;\r\n }\r\n };\r\n const handleData = async (ev) => {\r\n if (validate()) {\r\n let response = await postScheduleBookingSection({\r\n vehicleID: props.vehicleId,\r\n scheduleID: state.scheduleID,\r\n scheduleBookingDate: checkNull(state.scheduleBookingDate),\r\n scheduleServiceAgentsID: state.scheduleServiceAgentID,\r\n domainName: trimedhost,\r\n schedulePrepDate: checkNull(state.schedulePrepDate)\r\n });\r\n if (response) {\r\n response.success ? showToastSuccess('Job Booked Successfully') : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n props.onClose(true);\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n const yesNoChanged = (ev) => {\r\n if (ev.target.innerText == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: true\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: false\r\n }));\r\n }\r\n };\r\n return (\r\n \r\n\r\n
\r\n \r\n \r\n Event \r\n {state.scheduleEventName} \r\n \r\n \r\n Date Due \r\n {state.scheduleDateDue || 'No Date Assigned'} \r\n \r\n \r\n \r\n Requested Booking Date \r\n {requestBookingData.scheduleRequestedBookingDate} \r\n \r\n \r\n Requested Booking Time Slot \r\n {requestBookingData.scheduleRequestedBookingTimeSlot} \r\n \r\n \r\n Is Night Booking? \r\n {requestBookingData.scheduleNightBooking} \r\n \r\n \r\n Collection And Delivery \r\n {requestBookingData.scheduleCollectionAndDeliver} \r\n \r\n \r\n Deliver Before \r\n {requestBookingData.scheduleDeliverBefore} \r\n \r\n \r\n Collect After \r\n {requestBookingData.scheduleCollectAfter} \r\n \r\n \r\n \r\n
\r\n\r\n \r\n Booking Date \r\n {errors.scheduleBookingDate ? 'This field is required' : null} \r\n \r\n \r\n Prep Date \r\n {errors.schedulePrepDate ? 'This field is required' : null} \r\n \r\n \r\n Service Agent \r\n {errors.scheduleServiceAgentID ? 'This field is required' : null} \r\n \r\n \r\n Book Job \r\n \r\n \r\n props.onClose(false)}>Cancel \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ScheduleBookingSection;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getChecksAddTabByID = memoize(async (id) => {\r\n let res = await getWithAuth(`VehicleInspection/AddScreenDetails/${id}`);\r\n return res;\r\n});\r\n\r\nexport const postChecksData = async (data) => {\r\n let res = await postWithAuth(`VehicleInspection`, data);\r\n return res;\r\n};\r\n\r\nexport const getChecksEditByID = async (id) => {\r\n let res = await getWithAuth(`VehicleInspection/EditScreenDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const getChecks = async (id) => {\r\n let res = await getWithAuth(`VehicleInspection/list`);\r\n return res;\r\n};\r\n\r\nexport const getSingleChecks = async (id) => {\r\n let res = await getWithAuth(`VehicleInspection/DefectDetails?ResultID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const postSingleChecksData = async (data) => {\r\n let res = await postWithAuth(`VehicleInspection/DefectDetails `, data);\r\n return res;\r\n};\r\n\r\nexport const PostImage = async (data) => {\r\n let res = await postWithAuth(`VehicleInspectionsPhoto`, data);\r\n return res;\r\n};\r\nexport const getImageByID = async (id) => {\r\n let res = await getWithAuth(`VehicleInspectionsPhoto/${id}`);\r\n return res;\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 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 Grid from '@material-ui/core/Grid';\r\nimport { SimpleField, SecondaryCheckbox, InputText } from '../../../../../Core/Controls';\r\nimport { InputLabel, Typography, FormHelperText } 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: '-17px'\r\n },\r\n ax2OS2: {\r\n marginTop: '8px'\r\n },\r\n ax2NS: { marginTop: '150px' },\r\n ax2Break: { marginBottom: '5px' },\r\n axBreakHeading: { textAlign: 'center' }\r\n};\r\n\r\nconst Axel = (props) => {\r\n const { handleInputs, state, classes } = props;\r\n\r\n return (\r\n <>\r\n \r\n
AXLE 1
\r\nAXLE 2
\r\nAXLE 3
\r\nAXLE 4
\r\n\r\n {state.loader ? (\r\n \r\n {props.frompage ? (\r\n \r\n \r\n {state.vehicleInfo?.toUpperCase() || ''}\r\n \r\n \r\n ) : null}\r\n \r\n \r\n {state.date}\r\n \r\n \r\n \r\n \r\n \r\n = 960 ? 'space-evenly' : 'flex-start'}>\r\n {state.buttonList?.map((k) => {\r\n const Comp = CheckButtons[k.inspectionSheetCheckOptionCode];\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.buttonList?.map((k) => {\r\n const Comp = CheckButtons[k.inspectionSheetCheckOptionCode];\r\n return (\r\n \r\n {/* \r\n \r\n \r\n \r\n {k.inspectionSheetCheckOptionDescription}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {state.checksList?.map((m) => (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {m.inspectionSheetSectionDescription}
\r\nTyres Checks
\r\nBrake Performance
\r\n \r\n\r\n Road Test (Brake Temperature Assessment)\r\n
\r\n \r\nVehicle Inspector Sign-off
\r\n\r\n \r\n Signature{' '}\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n\r\n {state.imgtechniciansign ? (\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n Tyres Checks
\r\nAXLE 1
\r\nAXLE 2
\r\nAXLE 3
\r\nAXLE 4
\r\n\r\n \r\n Technician Signature\r\n {!state.isDisabled && state.signAvailable && (\r\n \r\n \r\n )}\r\n \r\n\r\n \r\n {!state.isDisabled && (\r\n \r\n \r\n )}\r\n
\r\n\r\n {state.imgtechniciansign ? (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n\r\n \r\n {!state.load ? (\r\n \r\n {props.frompage ? (\r\n \r\n \r\n {state.vehicleInfo?.toUpperCase() || ''}\r\n \r\n \r\n ) : null}\r\n \r\n \r\n {state.date}\r\n \r\n \r\n \r\n {widths >= 960 ? null : \r\n \r\n = 960 ? 'space-evenly' : 'flex-start'}>\r\n {state.buttonList?.map((k, i) => {\r\n const Comp = CheckButtons[k.inspectionSheetCheckOptionCode];\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.buttonList?.map((k, i) => {\r\n const Comp = CheckButtons[k.inspectionSheetCheckOptionCode];\r\n return (\r\n \r\n {/* \r\n \r\n \r\n \r\n {k.inspectionSheetCheckOptionDescription}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n {state.vehicleDailyChecks.map((m, i) => (\r\n \r\n \r\n \r\n
\r\n Result
}\r\n {m.name}
\r\nBrake Performance
\r\n \r\n\r\n Road Test (Brake Temperature Assessment)\r\n
\r\n \r\nVehicle Inspector Sign Off
\r\n\r\n Signature \r\n
\r\n \r\n 
\r\n
\r\n ) : (\r\n \r\n No Signature Found \r\n
\r\n )}\r\n \r\n Sign Off
\r\n\r\n \r\n Signature\r\n {state.signAvailable && state.vehicleInspectionStatusID !== 2 ? (\r\n \r\n \r\n ) : null}\r\n \r\n {state.showbtn ? (\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n\r\n {state.vehicleInspectionStatusID === 2 ? (\r\n \r\n {state.vehicleInspectionSignedOffSignature ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {/* Checks Table */}\r\n\r\n {isModal.actionTaken ? (\r\n \r\n \r\n \r\n Event \r\n {state.scheduleEventName} \r\n \r\n \r\n Date Due \r\n {state.scheduleDateDue || 'No Date Assigned'} \r\n \r\n \r\n \r\n Requested Booking Date \r\n {requestBookingData.scheduleRequestedBookingDate} \r\n \r\n \r\n Requested Booking Time Slot \r\n {requestBookingData.scheduleRequestedBookingTimeSlot} \r\n \r\n \r\n Is Night Booking? \r\n {requestBookingData.scheduleNightBooking} \r\n \r\n \r\n Collection And Delivery \r\n {requestBookingData.scheduleCollectionAndDeliver} \r\n \r\n \r\n Deliver Before \r\n {requestBookingData.scheduleDeliverBefore} \r\n \r\n \r\n Collect After \r\n {requestBookingData.scheduleCollectAfter} \r\n \r\n \r\n \r\n
\r\n\r\n \r\n Service Agent \r\n {errors.serviceAgentID ? 'This field is required' : null} \r\n \r\n \r\n New Booking Date \r\n {errors.bookingDate ? 'This field is required' : null} \r\n \r\n \r\n \r\n Select Reason\r\n \r\n {errors.bookingReasonID} \r\n \r\n \r\n \r\n \r\n Change Booking Date \r\n \r\n \r\n props.onClose(false)}>Cancel \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ScheduleRevise;\r\n","import { Grid } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport FileUploaderButton from '../../../Core/Controls/GenericFileUploader';\r\nimport { getJobRequireScheduledDocuments } from '../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\n\r\nconst RequiredDocumentsModal = (props) => {\r\n const [jobdocument, setJobDocument] = useState({\r\n list: [],\r\n refresherFlag: ''\r\n });\r\n useEffect(async () => {\r\n if (props.rowData.scheduleID) {\r\n let res = await getJobRequireScheduledDocuments(props.rowData.scheduleID);\r\n setJobDocument((jobdocument) => ({ ...jobdocument, list: res.data.list }));\r\n }\r\n }, [props.rowData.scheduleID, jobdocument.refresherFlag]);\r\n\r\n const dataReload = () => {\r\n setJobDocument((jobdocument) => ({ ...jobdocument, refresherFlag: new Date() }));\r\n props?.onFormSubmit && props?.onFormSubmit(true);\r\n };\r\n\r\n return (\r\n \r\n
\r\n {m.docName}\r\n \r\n
\r\n No Required Documents Found...
\r\n )}\r\n\r\n {/* {row?.displayNotes === 'Y' && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )} */}\r\n {/* {row?.displayEditVehicleSchedule === 'Y' && checkhaveAccess?.CanUpdateSchedules && (\r\n \r\n {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n selectedRowData: row,\r\n isAdd: false\r\n }));\r\n }}\r\n />\r\n \r\n )} */}\r\n {/* {row?.displayReviseSchedule === 'Y' && (\r\n {\r\n checkButton(row, 'revise');\r\n }}\r\n toolTipTitle=\"Change Booking Date\"\r\n />\r\n )} */}\r\n {row?.scheduleBookingStatusID == 5 && (\r\n {\r\n checkButton(row, 'showRequiredDocumentsModal');\r\n }}\r\n toolTipTitle=\"Required Documents\"\r\n />\r\n )}\r\n\r\n {row?.displayJobDetails === 'Y' && checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)}\r\n />\r\n )}\r\n\r\n {/* {row?.displayCompleteSchedule === 'Y' && (\r\n {\r\n checkButton(row, 'complete');\r\n }}\r\n toolTipTitle=\"Complete schedule\"\r\n />\r\n )} */}\r\n\r\n {/* {row?.displayBookingRequest === 'Y' && (\r\n {\r\n checkButton(row, 'status');\r\n }}\r\n toolTipTitle=\"Update Booking Request\"\r\n />\r\n )} */}\r\n\r\n {/* {row?.displayBookJob === 'Y' && (\r\n {\r\n checkButton(row, 'section');\r\n }}\r\n toolTipTitle=\"Book Job\"\r\n />\r\n )} */}\r\n\r\n {row?.displayAddInspectionCheck === 'Y' && checkhaveAccess?.CanAddInspections && (\r\n {\r\n handleCheck(row, 'Ad');\r\n }}\r\n toolTipTitle=\"Add Inspection Check\"\r\n />\r\n )}\r\n\r\n {row?.displayEditInspectionCheck === 'Y' && (\r\n {\r\n handleCheck(row, 'Ed');\r\n }}\r\n toolTipTitle=\"Edit Inspection Check\"\r\n />\r\n )}\r\n\r\n {row?.displayDeleteSchedules === 'Y' && checkhaveAccess?.CanDeleteSchedules && (\r\n {\r\n setState((st) => ({\r\n ...st,\r\n showDelete: true,\r\n data: row\r\n }));\r\n }}\r\n toolTipTitle=\"Delete future uncompleted schedules\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const dateFormatter = (date) => {\r\n return date ? moment(date).format('DD/MM/YYYY') : '--:--';\r\n };\r\n const getRenderValue = (val, row) => {\r\n if (val === 'scheduleEventName') {\r\n return (\r\n checkButton(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\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 actionCol = tempCols.find((e) => e.key === 'action');\r\n let dateDueCol = tempCols.find((e) => e.key === 'scheduleDateDue');\r\n let scheduleEventNameCol = tempCols.find((e) => e.key === 'scheduleEventName');\r\n let scheduleRequestedDatecol = tempCols.find((e) => e.key === 'scheduleRequestedBookingDate');\r\n let bookingDateCol = tempCols.find((e) => e.key === 'bookingDate');\r\n let scheduleCompletionDateCol = tempCols.find((e) => e.key === 'scheduleCompletionDate');\r\n if (scheduleCompletionDateCol) scheduleCompletionDateCol.formatter = BasicColFormate('scheduleCompletionDate');\r\n if (bookingDateCol) bookingDateCol.formatter = BasicColFormate('bookingDate');\r\n if (scheduleRequestedDatecol) scheduleRequestedDatecol.formatter = BasicColFormate('scheduleRequestedBookingDate');\r\n if (scheduleEventNameCol) scheduleEventNameCol.formatter = BasicColFormate('scheduleEventName');\r\n let agentCol = tempCols.find((element) => element.key === 'agentName');\r\n if (agentCol) {\r\n agentCol.formatter = renderAgentName;\r\n }\r\n if (dateDueCol) {\r\n dateDueCol.formatter = dueDateFormatter;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const addBtnClicked = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n isAdd: true,\r\n selectedRowData: {}\r\n }));\r\n };\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n selectedRowData: {}\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n res && pullApiData();\r\n };\r\n\r\n const checkButton = (ev, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: ev\r\n }));\r\n // pullApiData();\r\n };\r\n\r\n let getUrl = `Schedules?vehicleId=${props.scheduleVehicleID}`;\r\n let addBtnTitle = isCustomer ? '' : 'Add Vehicle Schedule';\r\n\r\n return (\r\n \r\n {state.showChecks ? (\r\n ({\r\n records: res.data.schedules,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n downloadBtnName={`${reg}_Schedule`}\r\n />\r\n )}\r\n {state.open ? (\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.isAdd ? `Add Schedule (${reg})` : `Edit Schedule (${reg})`}\r\n maxWidth=\"sm\"\r\n name=\"addEdit\"\r\n >\r\n {state.isAdd ? (\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n ) : (\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n )}\r\n \r\n ) : null}\r\n {openDialog.notes ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.status ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.section ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.complete ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.revise ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.showRequiredDocumentsModal ? (\r\n closeTheDialog(false)} title={'Required Documents'} maxWidth=\"sm\" fullWidth>\r\n \r\n ) : null}\r\n {state.showDelete ? (\r\n setState((st) => ({ ...st, showDelete: false }))} maxWidth=\"sm\">\r\n \r\n \r\n \r\n \r\n Date Due:{formatters.DateFormatter(state.data?.scheduleDateDue)}\r\n \r\n \r\n \r\n \r\n Event Name:{state.data?.scheduleEventName}\r\n \r\n \r\n \r\n Are you sure you want to delete this record? \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n setState((st) => ({ ...st, showDelete: false }))} fullWidth className=\"submit_btn\">\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n {openDialog.showSaModal ? (\r\n closeTheDialog(false)} title={'Service Agent Details'}>\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ScheduleVehicle;\r\n\r\n//Please Ignore\r\n{\r\n /* \r\n */\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText } from '@material-ui/core';\r\nimport { SingleSelect, SecondaryButton, SelectBox, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { getAllJobDropDowns } from '../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport { postJobData } from '../../../../Core/Services/InternalUser/JOB/jobService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../controllerStyle.scss';\r\n\r\nfunction JobScreenModal(props) {\r\n const [state, setState] = useState({\r\n errors: {},\r\n description: '',\r\n customerOrderNo: '',\r\n serviceAgentList: [],\r\n jobDepotList: [],\r\n jobAuthorityRef: ''\r\n });\r\n\r\n \r\n const [tempOptions, setTempOptions] = useState({\r\n jobDepotID: null,\r\n serviceAgentID: null\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let res = await getAllJobDropDowns(props.VehicleID);\r\n setState((state) => ({\r\n ...state,\r\n jobDepotList: res.data.depots,\r\n serviceAgentList: res.data.serviceAgents,\r\n vehicleId: props.VehicleID\r\n }));\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { serviceAgentID, jobDepotID, description } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(description)) {\r\n errors.description = 'Description is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(serviceAgentID)) {\r\n errors.serviceAgentID = ' Service Agent is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(jobDepotID)) {\r\n errors.jobDepotID = ' Job Depot is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const data = {\r\n vehicleID: props.VehicleID,\r\n description: state.description,\r\n jobCustomerOrderNo: state.customerOrderNo,\r\n jobServiceAgentID: tempOptions.serviceAgentID?.id,\r\n jobDepotID: tempOptions.jobDepotID?.id,\r\n jobAuthorityRef: state.jobAuthorityRef\r\n };\r\n props.onClose(true);\r\n let res = await postJobData(data);\r\n if (res.success) {\r\n showToastSuccess('Job added sucessfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nconst JobQueryModal = (props) => {\r\n const [state, setState] = useState({\r\n jobQueryMessage: '',\r\n jobQueryClosed: false,\r\n showLoader: true,\r\n rows: []\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n const pullJobQueryList = async () => {\r\n let res = await getAllJobQueryList(props.jobQueryJobID);\r\n setState((st) => ({\r\n ...st,\r\n rows: [...(res.data?.list || [])],\r\n showLoader: false\r\n }));\r\n };\r\n useEffect(() => {\r\n pullJobQueryList();\r\n }, []);\r\n\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n if (!/[^\\s]/.test(state.jobQueryMessage)) {\r\n err.jobQueryMessage = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\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 handleData = async () => {\r\n if (validate()) {\r\n let response = '';\r\n if (props.title == 'Reply Customer') {\r\n response = await postJobQueryModal({\r\n jobQueryJobID: props.jobQueryJobID,\r\n jobQueryMessage: state.jobQueryMessage,\r\n customerMessage: true\r\n });\r\n } else {\r\n response = await postJobQueryModal({\r\n jobQueryJobID: props.jobQueryJobID,\r\n jobQueryMessage: state.jobQueryMessage\r\n });\r\n }\r\n if (response) {\r\n response.success ? showToastSuccess('Job query saved successfully') : showToastError(response.message || 'Something went wrong');\r\n pullJobQueryList();\r\n props.onClose(true);\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n }\r\n };\r\n\r\n const inputChange = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n\r\n return (\r\n {props.note.message}
\r\n \r\n {props.note.name} @ {moment(props.note.dateCreated).format('LLL')}\r\n
\r\n \r\n \r\n {props.title && (\r\n \r\n \r\n Message\r\n \r\n {errors.jobQueryMessage ? 'Message is empty!' : null} \r\n \r\n )}\r\n {props.title == 'Reply Query' && (\r\n \r\n Close Query \r\n \r\n \r\n handleClick('jobQueryClosed', true)}\r\n />\r\n \r\n \r\n handleClick('jobQueryClosed', false)}\r\n />\r\n \r\n \r\n \r\n )}\r\n \r\n {state.rows.length > 0 ? (\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default JobQueryModal;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllVehicleJob, getAllJob, getAllCustomerJob } from '../../../../Core/Services/InternalUser/JOB/jobService';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport JobScreenModal from './JobScreenModal';\r\nimport { Link } from 'react-router-dom';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport JobQueryModal from './JobStatusBtn/JobQuery';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport ReactDOM from 'react-dom';\r\nimport DepotDetails from '../DetailsModal/depotDetails';\r\nimport CustomerDetails from '../DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../DetailsModal/serviceAgent';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY, width: 100 },\r\n { key: 'agentOrderNo', name: 'Job Ref', width: 150 },\r\n { key: 'vehicleJobStatus', name: 'Job Status', width: 110 },\r\n { key: 'jobDescription', name: 'Job Description' },\r\n { key: 'serviceAgentName', name: 'Service Agent', width: 200 },\r\n { key: 'depotName', name: 'Depots', width: 100 },\r\n {\r\n key: 'partsTotal',\r\n name: 'Parts',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 110\r\n },\r\n {\r\n key: 'labourTotal',\r\n name: 'Labour',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 110\r\n },\r\n {\r\n key: 'orderTotal',\r\n name: 'Total',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 80\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Jobs', active: true },\r\n { name: 'All Jobs', active: true }\r\n];\r\n\r\nfunction JobScreen(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const history = useHistory();\r\n let getUrl = `VehicleJob/${props.VehicleID ? `?VehicleID=${props.VehicleID}` : ''}${props.customerID ? `?customerID=${props.customerID}` : ''}`;\r\n const [state, setState] = useState({\r\n jobList: [],\r\n loader: true,\r\n open: false\r\n });\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n useEffect(async () => {\r\n pullJobList();\r\n }, [props.VehicleID]);\r\n\r\n const pullJobList = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const jobHandler = (params) => {\r\n setState((state) => ({ ...state, open: true }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${props.VehicleID ? props.VehicleID : val?.vehicleID}`,\r\n search: '',\r\n state: { position: 'jobs', vorVehicleID: val.vorVehicleID }\r\n });\r\n };\r\n\r\n const handleShowQueries = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: true, jobID: val?.jobID }));\r\n };\r\n\r\n const closeTheDialog = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: false, jobID: '' }));\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n \r\n {props.title}\r\n \r\n
\r\n )}\r\n {props.title && (\r\n \r\n {state.rows?.map((n, i) => (\r\n
\r\n ) : (\r\n No data found
\r\n )}\r\n \r\n handleShowQueries(row)}\r\n />\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.serviceAgentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n let agentNameCol = newColumn.find((element) => element.key === 'serviceAgentName');\r\n let depotNameCol = newColumn.find((element) => element.key === 'depotName');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n if (!props.VehicleID) {\r\n newColumn.splice(3, 0, { key: 'vehicleRegNumber', name: 'Reg Number', width: 110, formatter: renderRegNumberEdit });\r\n }\r\n if (!props.customerID && !isCustomer && !props.VehicleID) {\r\n newColumn.splice(5, 0, { key: 'customerCompanyName', name: 'Customer', formatter: renderCustomerName, width: 150 });\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullJobList();\r\n };\r\n const gridBtnTitle = !props.VehicleID ? '' : isCustomer ? '' : 'Add Job';\r\n const page = props.VehicleID ? true : props.customerID ? true : false;\r\n return (\r\n \r\n {state.open && (\r\n closeModal(false)} title=\"Add Job\" maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n )}\r\n {!page && closeTheDialog(false)}>\r\n \r\n )}\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n />\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default JobScreen;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getJourney = async (Id) => {\r\n let res = await getWithAuth(`Journeys?VehicleID=${Id}&Active=true`);\r\n return res;\r\n};\r\n\r\nexport const getJourneyById = async (Id) => {\r\n let res = await getWithAuth(`Journeys/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const postJourney = async (data) => {\r\n let res = await postWithAuth(`Journeys`, data);\r\n return res;\r\n};\r\n\r\nexport const journeyDropDown = async () => {\r\n let res = await getWithAuth(`Journeys/screenDropdowns`);\r\n return res;\r\n};\r\n\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { getJourneyById, postJourney, journeyDropDown } from '../../../../../Core/Services/InternalUser/ControllerService/journeyService';\r\nimport { SelectBox, DateTimePicker, InputText, SecondaryButton, MandatoryField } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\n\r\nimport moment from 'moment';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst JourneysAddEditModal = (props) => {\r\n const [state, setState] = useState({\r\n journeyActive: true,\r\n journeyDriverID: null,\r\n journeyID: null,\r\n journeyVehicleID: props.VehicleID,\r\n journeyEndLocationCoordinates: null,\r\n journeyStartLocationCoordinates: null,\r\n journeyEndOdometerReading: null,\r\n errors: {},\r\n driversList: [],\r\n typeList: [],\r\n date: moment().format('YYYY-MM-DDTHH:mm')\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.journeyID) {\r\n let res = await getJourneyById(props.journeyID);\r\n let data = res.data;\r\n setState((st) => ({\r\n ...st,\r\n journeyID: data.journeyID,\r\n journeyVehicleID: data.journeyVehicleID,\r\n journeyDriverID: data.journeyDriverID,\r\n journeyTypeID: data.journeyTypeID,\r\n journeyDateStarted: moment(data.journeyDateStarted).format('YYYY-MM-DDTHH:mm'),\r\n journeyDateEnded: moment(data.journeyDateEnded).format('YYYY-MM-DDTHH:mm'),\r\n journeyStartOdometerReading: data.journeyStartOdometerReading,\r\n journeyEndOdometerReading: data.journeyEndOdometerReading,\r\n journeyStartLocation: data.journeyStartLocation,\r\n journeyStartLocationCoordinates: data.journeyStartLocationCoordinates,\r\n journeyEndLocation: data.journeyEndLocation,\r\n journeyEndLocationCoordinates: data.journeyEndLocationCoordinates,\r\n journeyActive: data.journeyActive,\r\n journeyNote: data.journeyNote\r\n }));\r\n }\r\n let dropDownRes = await journeyDropDown();\r\n if (dropDownRes.success) {\r\n const driversList = dropDownRes.data.drivers.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n }));\r\n const typeList = dropDownRes.data.journeyTypes.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n }));\r\n\r\n setState((st) => ({ ...st, driversList: driversList, typeList: typeList }));\r\n }\r\n }, []);\r\n\r\n const handleInputs = (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 validations = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!state.journeyDriverID) {\r\n errors.journeyDriverID = 'Driver is required';\r\n formIsValid = false;\r\n }\r\n if (!state.journeyTypeID) {\r\n errors.journeyTypeID = 'Journey Type is required ';\r\n formIsValid = false;\r\n }\r\n if (!state.journeyDateStarted) {\r\n errors.journeyDateStarted = `Start date is required`;\r\n formIsValid = false;\r\n }\r\n if (!state.journeyDateEnded) {\r\n errors.journeyDateEnded = 'End date is required';\r\n formIsValid = false;\r\n }\r\n if (!state.journeyStartOdometerReading) {\r\n errors.journeyStartOdometerReading = 'Start Odometer is required';\r\n formIsValid = false;\r\n }\r\n if (!state.journeyEndOdometerReading) {\r\n errors.journeyEndOdometerReading = 'End Odometer is required';\r\n formIsValid = false;\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 duration = moment(state.journeyDateEnded).diff(state.journeyDateStarted, 'minute');\r\n var Hours = Math.floor(duration / 60);\r\n var minutes = duration % 60;\r\n const setDuration = state.journeyDateEnded && duration > 0 ? `${Hours}:${minutes}` : duration < 0 ? 'End time must be later than the start time' : null;\r\n\r\n const distance = state.journeyEndOdometerReading ? state.journeyEndOdometerReading - state.journeyStartOdometerReading : null;\r\n\r\n const HandleSubmit = async () => {\r\n if (validations()) {\r\n let journeyData = {\r\n journeyID: state.journeyID,\r\n journeyVehicleID: state.journeyVehicleID,\r\n journeyTypeID: state.journeyTypeID,\r\n journeyDriverID: state.journeyDriverID,\r\n journeyDateStarted: state.journeyDateStarted,\r\n journeyDateEnded: state.journeyDateEnded,\r\n journeyStartOdometerReading: state.journeyStartOdometerReading,\r\n journeyEndOdometerReading: state.journeyEndOdometerReading,\r\n journeyStartLocation: state.journeyStartLocation,\r\n journeyStartLocationCoordinates: state.journeyStartLocationCoordinates,\r\n journeyEndLocation: state.journeyEndLocation,\r\n journeyEndLocationCoordinates: state.journeyEndLocationCoordinates,\r\n journeyActive: state.journeyActive,\r\n journeyNote: state.journeyNote\r\n };\r\n\r\n let res = await postJourney(journeyData);\r\n if (res.success) {\r\n showToastSuccess('Journey added successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n return (\r\n \r\n handleAddEdit(row)} />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = editFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n let getUrl = `Journeys?VehicleID=${props.VehicleID}&Active=true`;\r\n\r\n return (\r\n \r\n {state.show ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n btnTitle={checkhaveAccess?.CanUpdateVehicleJourneys ? 'Add Journey' : ''}\r\n onBtnClick={() => handleAddEdit(null)}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\nexport default VehicleJourneys;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getAllFuelPurchase = async (id) => {\r\n let res = await getWithAuth(`FuelPurchases?VehicleID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getFuelPurchaseById = async (vehicleid, Id) => {\r\n // let res = await getWithAuth(`FuelPurchases?VehicleID=${vehicleid}/${Id}`);\r\n\r\n let res = await getWithAuth(`FuelPurchases/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const getFuelPurchaseScreenDropdowns = memoize(async () => {\r\n let res = await getWithAuth(`FuelPurchases/screenDropdowns`);\r\n return res;\r\n});\r\n\r\nexport const addFuelPurchase = async (data) => {\r\n let res = await postWithAuth('FuelPurchases', data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState, useMemo, createContext, useCallback } from 'react';\r\nimport {\r\n getAllFuelPurchase,\r\n getFuelPurchaseById,\r\n getFuelPurchaseScreenDropdowns,\r\n addFuelPurchase\r\n} from '../../../../Core/Services/InternalUser/ControllerService/fuelPurchaseService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport moment from 'moment';\r\n\r\nexport const FuelPurchaseScreenContext = createContext();\r\n\r\nexport const FuelPurchaseProvider = (props) => {\r\n const { showToastError, showToastSuccess } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n fuelPurchaseActive: false,\r\n FuelPurchaseList: [],\r\n purchaseDate: '',\r\n paymentMethodList: [],\r\n fuelID: null,\r\n liters: '',\r\n mileage: '',\r\n errors: {},\r\n cost: '',\r\n paymentMethod: '',\r\n notes: ''\r\n });\r\n\r\n const pullFuelPurchaseAndUpdateState = async () => {\r\n let res1 = await getFuelPurchaseScreenDropdowns();\r\n if (res1) {\r\n setState((st) => ({ ...st, showLoader: false, paymentMethodList: res1.data.fuelPaymentMethods }));\r\n }\r\n };\r\n\r\n const handleCheckbox = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.fuelID) {\r\n let res = await getFuelPurchaseById(props.VehicleID, props.fuelID);\r\n const data = res.data;\r\n setState((st) => ({\r\n ...st,\r\n fuelID: data.fuelPurchaseID,\r\n fuelPurchaseActive: data.fuelPurchaseActive,\r\n mileage: data.fuelPurchaseOdometer,\r\n liters: data.fuelPurchaseLitres,\r\n cost: data.fuelPurchaseCost,\r\n paymentMethod: data.fuelPurchasePaymentMethodID,\r\n notes: data.fuelPurchaseNotes,\r\n fuelPurchaseActive: data.fuelPurchaseActive,\r\n fuelPurchaseVehicleID: data.fuelPurchaseVehicleID,\r\n fuelPurchaseDriverID: data.fuelPurchaseDriverID,\r\n purchaseDate: data.fuelPurchaseDate\r\n }));\r\n }\r\n pullFuelPurchaseAndUpdateState();\r\n }, []);\r\n\r\n const validations = () => {\r\n const { liters, cost, paymentMethod, purchaseDate } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!/[^\\s]/.test(liters)) {\r\n errors.liters = 'The litres field is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(cost)) {\r\n errors.cost = 'The cost field is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(paymentMethod)) {\r\n errors.paymentMethod = 'The payment method field is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(purchaseDate)) {\r\n errors.purchaseDate = 'The purchase date is required';\r\n formIsValid = false;\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 formData;\r\n formData = {\r\n fuelPurchaseID: state.fuelID,\r\n fuelPurchaseLitres: state.liters,\r\n fuelPurchaseOdometer: state.mileage,\r\n fuelPurchaseCost: state.cost,\r\n fuelPurchasePaymentMethodID: state.paymentMethod,\r\n fuelPurchaseNotes: state.notes,\r\n fuelPurchaseActive: state.fuelPurchaseActive,\r\n fuelPurchaseVehicleID: props.VehicleID,\r\n fuelPurchaseDriverID: null,\r\n fuelPurchaseDate: state.purchaseDate\r\n };\r\n let res = await addFuelPurchase(formData);\r\n if (res.success) {\r\n showToastSuccess('Fuel Purchase Saved Successfully!');\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const dateFieldsChange = (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 handleAdd(row.fuelPurchaseID)} toolTipTitle=\"Edit Fuel\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n const gridBtnTitle = `Add Fuel`;\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle={checkhaveAccess?.CanUpdateVehicleFuelRecords ? gridBtnTitle : ''}\r\n onBtnClick={() => handleAdd(null)}\r\n />\r\n {state.show && (\r\n closeFuelPurchasesModal(false)} maxWidth=\"sm\">\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default FuelPurchaseDashboard;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { FailButton, InputText, NAButton, PassButton, SecondaryButton, SelectBox, MButton, Accordion, UploadWithBadge } from '../../../../../Core/Controls';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Grid,\r\n Paper,\r\n InputLabel,\r\n TableContainer,\r\n Table,\r\n TableHead,\r\n TableBody,\r\n TableRow,\r\n TableCell,\r\n Typography,\r\n Tooltip,\r\n CircularProgress,\r\n FormHelperText,\r\n Badge,\r\n Hidden\r\n} from '@material-ui/core';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport SignaturePad from 'react-signature-canvas';\r\n\r\nimport '../../controllerStyle.scss';\r\nimport { getEditDriverChekssById, postvehiclecheckchecksData, PostImage, getImageByID } from '../../../../../Core/Services/InternalUser/Vehicle/driverVehicle';\r\nimport moment from 'moment';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../controllerStyle.scss';\r\nimport ImageModal from './imageModal';\r\nimport _ from 'lodash';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 16,\r\n padding: '8px 20px',\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '8px 20px'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: '#F5F5F5'\r\n }\r\n }\r\n}))(TableRow);\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n fontSize: '25px',\r\n color: '#f50057',\r\n fontWeight: 600,\r\n paddingLeft: 9\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 sign: {\r\n border: '1px solid grey',\r\n height: 180\r\n }\r\n}));\r\n\r\nconst CheckButtons = {\r\n 1: PassButton,\r\n 2: FailButton,\r\n 3: NAButton,\r\n 5: MButton\r\n};\r\n\r\nconst statusObj = { 1: 'Unreviewed', 2: 'Satisfactory', 3: 'Safety Item Defect', 4: 'Repair Required', 5: 'Monitor' };\r\n\r\nconst EditDriverDailyChecks = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { displayName } = useLoginInfo();\r\n const classes = useStyles();\r\n const [state, setState] = useState({\r\n vehicleID: props.VehicleID,\r\n vehicleDailyCheckCheckTypeID: 1,\r\n vehicleDailyCheckStatusId: null,\r\n vehicleDailyCheckDateExpire: null,\r\n vehicleDailyCheckDriverComment: '',\r\n vehicleDailyCheckDriverId: null,\r\n vehicleDailyCheckId: props.chekcsID,\r\n selectAll: false,\r\n flag: false,\r\n vehicleDailyCheckCheckerName: displayName,\r\n submitArray: []\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.chekcsID) {\r\n let res = await getEditDriverChekssById(props.chekcsID);\r\n if (res.success) {\r\n res.data.driverDailyChecks.map((x) => {\r\n setState((st) => ({\r\n ...st,\r\n regNumber: x.vehicleRegNumber,\r\n modelID: x.vehicleModel,\r\n makeID: x.vehicleMake,\r\n vehicleID: x.vehicleID,\r\n vehicleDailyCheckId: props.chekcsID,\r\n vehicleDailyCheckStatusId: x.vehicleDailyCheckStatusId,\r\n vehicleDailyCheckCheckTypeID: x.vehicleDailyCheckCheckTypeID,\r\n date: moment(x.vehicleDailyCheckDateStarted).format('YYYY-MM-DD hh:mm'),\r\n vehicleDailyCheckDateExpire: x.vehicleDailyCheckDateExpire,\r\n vehicleDailyCheckReportedUserID: x.vehicleDailyCheckReportedUserID,\r\n vehicleDailyCheckDriverName: x.vehicleDailyCheckDriverName,\r\n vehicleDailyCheckDriverId: x.vehicleDailyCheckDriverId,\r\n vehicleDailyCheckMileage: x.vehicleDailyCheckMileage,\r\n vehicleDailyCheckDriverComment: x.vehicleDailyCheckDriverComment,\r\n vehicleDailyCheckCheckerName: x.vehicleDailyCheckCheckerName,\r\n driverDailyCheckResultsVM: x.driverDailyCheckResultsVM,\r\n imgtechniciansign: x.vehicleDailyCheckCreatorSignature,\r\n signImg: x.vehicleDailyCheckCompletedBySignature,\r\n vehicleDailyCheckReviewerComment: x.vehicleDailyCheckReviewerComment\r\n }));\r\n });\r\n const checkStatus = res.data.vehicleDailyCheckResultStatus.map((x) => ({\r\n id: x.id,\r\n name: x.name\r\n }));\r\n const reportedUser = res.data.reportedUser.map((x) => ({\r\n id: x.id,\r\n name: x.name\r\n }));\r\n const checkType = res.data.dailyCheckTypes.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n }));\r\n const checkQueList = res.data.driverDailyCheckResult;\r\n const checkOptions = res.data.driverDailyCheckOptions;\r\n\r\n setState((st) => ({\r\n ...st,\r\n checklist: checkQueList,\r\n checkOptions: checkOptions,\r\n checkType: checkType,\r\n reportedUser: reportedUser,\r\n checkStatus: checkStatus\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const signCanvas = useRef({});\r\n\r\n const clear = () => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (state.flag) {\r\n newSt.flag = false;\r\n newSt.vehicleDailyCheckCompletedBySignature = null;\r\n } else {\r\n newSt.vehicleDailyCheckCompletedBySignature = null;\r\n signCanvas.current.clear();\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const GetTechnicianSign = () => {\r\n let fields = state.fields;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n vehicleDailyCheckCompletedBySignature: signCanvas.current.toDataURL(),\r\n fields: fields\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleInputs = (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 handleStatus = (id) => (e) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.vehicleDailyCheckSectionID === id);\r\n changedArray[objIndex][e.target.name] = e.target.value;\r\n setState((st) => ({ ...st, checklist: changedArray }));\r\n };\r\n\r\n const setCommonStatus = (e) => {\r\n let changedArray = [...state.checklist].map((p) => {\r\n return {\r\n ...p,\r\n vehicleDailyCheckResultsStatusId: e.target.value\r\n };\r\n });\r\n setState((st) => ({ ...st, checklist: changedArray }));\r\n };\r\n\r\n const validations = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n let changedArray = [...state.checklist].map((p) => {\r\n if (p.vehicleDailyCheckResultsStatusId == 1) {\r\n formIsValid = false;\r\n return {\r\n ...p,\r\n statusError: 'Please Select Status'\r\n };\r\n } else {\r\n return {\r\n ...p,\r\n statusError: ''\r\n };\r\n }\r\n });\r\n\r\n if (!state.vehicleDailyCheckReviewerComment) {\r\n errors.vehicleDailyCheckReviewerComment = 'Reviewer comment is required';\r\n formIsValid = false;\r\n }\r\n if (!state.signImg) {\r\n if (!state.vehicleDailyCheckCompletedBySignature) {\r\n errors.vehicleDailyCheckCompletedBySignature = 'Signature is required';\r\n formIsValid = false;\r\n }\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n errors: errors,\r\n checklist: changedArray\r\n }));\r\n return formIsValid;\r\n };\r\n const handleNote = (id) => (e) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.vehicleDailyCheckSectionID === id);\r\n changedArray[objIndex][e.target.name] = e.target.value;\r\n setState((st) => ({ ...st, checklist: changedArray }));\r\n };\r\n\r\n const useDefaultSig = () => {\r\n setState((st) => ({ ...st, flag: true, vehicleDailyCheckCompletedBySignature: AppStorage.getSignature() }));\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let driverDailyCheckResultsVM = state.checklist.map((m) => ({\r\n vehicleDailyCheckSectionID: m.vehicleDailyCheckSectionID,\r\n vehicleDailyCheckResultsVehicleDailyCheckOptionId: m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n ? m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n : null,\r\n vehicleDailyCheckResultsNotes: m.vehicleDailyCheckResultsNotes ? m.vehicleDailyCheckResultsNotes : null,\r\n vehicleDailyCheckResultsAssesementNotes: m.vehicleDailyCheckResultsAssesementNotes ? m.vehicleDailyCheckResultsAssesementNotes : null,\r\n vehicleDailyCheckResultsDefectID: m.vehicleDailyCheckResultsDefectID ? m.vehicleDailyCheckResultsDefectID : null,\r\n vehicleDailyCheckResultsStatusId: m.vehicleDailyCheckResultsStatusId\r\n }));\r\n if (validations()) {\r\n let formData = {\r\n vehicleID: state.vehicleID,\r\n vehicleDailyCheckId: state.vehicleDailyCheckId,\r\n vehicleDailyCheckStatusId: state.vehicleDailyCheckStatusId,\r\n vehicleDailyCheckCheckTypeID: state.vehicleDailyCheckCheckTypeID,\r\n vehicleDailyCheckDateStarted: state.date,\r\n vehicleDailyCheckDateExpire: state.vehicleDailyCheckDateExpire,\r\n vehicleDailyCheckReportedUserID: state.vehicleDailyCheckReportedUserID,\r\n vehicleDailyCheckDriverName: state.vehicleDailyCheckDriverName,\r\n vehicleDailyCheckDriverId: state.vehicleDailyCheckDriverId,\r\n vehicleDailyCheckMileage: state.vehicleDailyCheckMileage,\r\n vehicleDailyCheckDriverComment: state.vehicleDailyCheckDriverComment,\r\n vehicleDailyCheckCheckerName: state.vehicleDailyCheckCheckerName,\r\n driverDailyCheckResultsVM: driverDailyCheckResultsVM,\r\n vehicleDailyCheckCreatorSignature: state.imgtechniciansign,\r\n vehicleDailyCheckCompletedBySignature: state.vehicleDailyCheckCompletedBySignature,\r\n vehicleDailyCheckReviewerComment: state.vehicleDailyCheckReviewerComment\r\n };\r\n let res = await postvehiclecheckchecksData(formData);\r\n if (res.success) {\r\n showToastSuccess('Driver Daily checks updated successfully ');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n //Images Handler .....\r\n\r\n const imageHandler = async (driverDailyCheckResultID, checkDescription) => {\r\n let res = await getImageByID(driverDailyCheckResultID);\r\n if (res.data.list.length == 0) {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.vehicleDailyCheckResultId === driverDailyCheckResultID);\r\n setState((st) => ({\r\n ...st,\r\n showImageModal: true,\r\n driverDailyCheckResultID: driverDailyCheckResultID,\r\n selectedImages: changedArray[objIndex].images || [],\r\n checkDescription: checkDescription\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showImageModal: true,\r\n driverDailyCheckResultID: driverDailyCheckResultID,\r\n selectedImages: res.data.list.map((k) => k.vehicleDailyCheckPhotoObject),\r\n checkDescription: checkDescription\r\n }));\r\n }\r\n };\r\n\r\n const onImageChange = (imageList, addUpdateIndex) => {\r\n let changedArray = [...state.checklist];\r\n let FilterimagesList;\r\n let objIndex = state.checklist.findIndex((x) => x.vehicleDailyCheckResultId === state.driverDailyCheckResultID);\r\n\r\n if (`${objIndex}`) {\r\n FilterimagesList = imageList.map((m) => (m.data_url ? m.data_url : m));\r\n changedArray[objIndex].image = FilterimagesList;\r\n }\r\n let uniqueImages = FilterimagesList.filter((g) => {\r\n let isImage = state.selectedImages.find((w) => w == g);\r\n if (!isImage) {\r\n return g;\r\n }\r\n });\r\n setState((st) => ({ ...st, checklist: changedArray, selectedImages: FilterimagesList, submitArray: [...state.submitArray, ...uniqueImages] }));\r\n };\r\n\r\n const sumbitImage = async () => {\r\n let tempArray = [...state.submitArray];\r\n\r\n let data = {\r\n VehicleDailyCheckPhotoID: null,\r\n VehicleDailyCheckPhotoResultID: state.driverDailyCheckResultID,\r\n VehicleDailyCheckPhotoObject: tempArray\r\n };\r\n let res = await PostImage(data);\r\n if (res.success) {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.vehicleDailyCheckResultId === state.driverDailyCheckResultID);\r\n changedArray[objIndex].basicCount = changedArray[objIndex].image.length;\r\n showToastSuccess('image Uploaded successfully');\r\n setState((st) => ({\r\n ...st,\r\n showImageModal: false,\r\n checklist: changedArray\r\n }));\r\n }\r\n };\r\n\r\n return (\r\n \r\n {state.checkType ? (\r\n \r\n {/* Disabled fields........... */}\r\n \r\n \r\n \r\n \r\n Reg Number. \r\n {state.regNumber} \r\n \r\n \r\n Make/Model \r\n \r\n {state.makeID} \r\n {state.modelID}\r\n \r\n \r\n \r\n Date \r\n {state.date} \r\n \r\n \r\n Check Type \r\n {state.checkType.map((m) => {\r\n if (state.vehicleDailyCheckCheckTypeID === m.id) {\r\n return {m.name} ;\r\n }\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n Driver Name \r\n {state.vehicleDailyCheckDriverName} \r\n \r\n \r\n Checker Name \r\n {state.vehicleDailyCheckCheckerName} \r\n \r\n \r\n Defect Reported to \r\n {state.reportedUser.map((x) => {\r\n if (x.id === state.vehicleDailyCheckReportedUserID) {\r\n return {x.name} ;\r\n }\r\n })}\r\n \r\n \r\n Odometer Reading \r\n {state.vehicleDailyCheckMileage} \r\n \r\n \r\n \r\n \r\n\r\n {/* Checks quetion table.......... */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Result Legend{' '}\r\n \r\n {state.checkOptions.map((m) => {\r\n const Comp = CheckButtons[m.vehicleDailyCheckOptionId];\r\n return (\r\n \r\n \r\n \r\n \r\n {m.vehicleDailyCheckOptionDescription[0]} \r\n \r\n \r\n {m.vehicleDailyCheckOptionDescription} \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/*driver details...................*/}\r\n \r\n \r\n \r\n Reviewer comments/notes \r\n {state.errors?.vehicleDailyCheckReviewerComment} \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n Driver/Checker Signature \r\n
\r\n {state.imgtechniciansign ? (\r\n \r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n Signature\r\n {!state.signImg ? (\r\n \r\n \r\n ) : null}\r\n \r\n\r\n \r\n {!state.signImg ? (\r\n \r\n \r\n ) : null}\r\n
\r\n {state.signImg ? (\r\n \r\n 
\r\n
\r\n ) : state.flag ? (\r\n \r\n 
\r\n
\r\n ) : (\r\n \r\n {\r\n GetTechnicianSign();\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {state.showImageModal ? (\r\n // \r\n editChecksScreen(row)} toolTipTitle=\"Edit Check\" />\r\n
\r\n );\r\n };\r\n\r\n const onClose = () => {\r\n setChecks((st) => ({\r\n ...st,\r\n addChecksShow: false\r\n }));\r\n pullChecksData();\r\n };\r\n\r\n const handleAddChecks = () => {\r\n setChecks((st) => ({\r\n ...st,\r\n addChecksShow: true\r\n }));\r\n };\r\n\r\n const editClose = () => {\r\n setChecks((st) => ({\r\n ...st,\r\n editChecksShow: false\r\n }));\r\n pullChecksData();\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n return (\r\n \r\n {checks.editChecksShow ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={checks.isReload}\r\n onBtnClick={handleAddChecks}\r\n btnTitle=\"Add Check\"\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DriverDailyChecksGrid;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getVehicleMessages = async (id) => {\r\n let res = await getWithAuth(`VehicleMessages?VehicleID=${id}`);\r\n return res;\r\n};\r\nexport const postMessage = async (data) => {\r\n let res = await postWithAuth(`VehicleMessages/SendMessage`, data);\r\n return res;\r\n};\r\n","import { Grid, Paper, Button, OutlinedInput, InputAdornment, IconButton } from '@material-ui/core';\r\nimport React, { useEffect, useState, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport moment from 'moment';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { getVehicleMessages, postMessage } from '../../../../../Core/Services/InternalUser/Vehicle/messageService';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n paper: {\r\n width: '40%',\r\n marginLeft: 'auto',\r\n margin: 10,\r\n backgroundColor: '#fef0d2',\r\n padding: 20\r\n },\r\n outgoning: {\r\n width: '40%',\r\n margin: 10,\r\n backgroundColor: '#a7ebf3',\r\n padding: 20\r\n },\r\n empty: {\r\n textAlign: 'center',\r\n margin: 10,\r\n padding: 20\r\n },\r\n customScroll: {\r\n overflow: 'auto',\r\n '&::-webkit-scrollbar': {\r\n width: '0.1em'\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: '#1976d2',\r\n opacity: 5,\r\n outline: '1px solid slategrey'\r\n }\r\n },\r\n activeBorder: {\r\n borderLeft: '7px solid #1976d2 '\r\n }\r\n}));\r\n\r\nconst borderStyle = {\r\n br: {\r\n borderRight: '5px solid #ffae00'\r\n },\r\n bl: {\r\n borderLeft: '5px solid #1976d2'\r\n }\r\n};\r\n\r\nconst DefaultMesaage = (props) => {\r\n const { displayName } = useLoginInfo();\r\n const [state, setState] = useState({\r\n message: null,\r\n customerName: null,\r\n messageList: [],\r\n showLoader: true\r\n });\r\n\r\n const AlwaysScrollToBottom = () => {\r\n const elementRef = useRef();\r\n useEffect(() => elementRef.current.scrollIntoView());\r\n return ;\r\n };\r\n\r\n const getMessages = async () => {\r\n if (props.VehicleID) {\r\n let res = await getVehicleMessages(props.VehicleID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n messageList: res.data.list.sort((a, b) => (a.sdate > b.sdate ? 1 : b.sdate > a.sdate ? -1 : 0)),\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n };\r\n useEffect(async () => {\r\n getMessages();\r\n }, []);\r\n\r\n function handleEnter(e) {\r\n if (e.key === 'Enter' || e.key === 'NumpadEnter') {\r\n submitMessage();\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 isValid = true;\r\n if (!state.message) {\r\n isValid = false;\r\n }\r\n if (!/[^\\s]/.test(state.message)) {\r\n isValid = false;\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 ID: props.VehicleID,\r\n message: state.message\r\n };\r\n\r\n let res = await postMessage(data);\r\n if (res.success) {\r\n getMessages();\r\n setState((st) => ({\r\n ...st,\r\n message: ''\r\n }));\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 \r\n {state.showLoader ? (\r\n \r\n
\r\n ) : (\r\n \r\n {state.messageList.length !== 0 ? (\r\n <>\r\n {state.messageList.map((m, i) => {\r\n let classText = m.name === displayName ? classes.outgoning : classes.paper;\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 {m.notes} \r\n
\r\n \r\n \r\n {m.name} @ {moment(m.sdate).format('MMM Do YYYY, h:mm a')}\r\n \r\n
\r\n\r\n {m.rdate && (\r\n \r\n seen {moment(m.rdate).format('MMM Do YYYY, h:mm a')}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n There are no messages sent/received \r\n
\r\n \r\n {moment().format('MMM Do YYYY, h:mm a')}\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={getUrl}\r\n btnTitle={checkhaveAccess?.CanUpdateVehicleMileages ? 'Add Entry' : ''}\r\n onBtnClick={addBtnClicked}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default MileageLog;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getAllDriver = async () => {\r\n let res = await getWithAuth('drivers');\r\n return res;\r\n};\r\n\r\nexport const getDataById = async (Id) => {\r\n let res = await getWithAuth(`drivers/${Id}`);\r\n return res;\r\n};\r\nexport const getDriverById = async (Id) => {\r\n let res = await getWithAuth(`drivers/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const getDriverScreenDropdowns = memoize(async () => {\r\n let res = await getWithAuth(`drivers/screenDropdowns`);\r\n return res;\r\n});\r\n\r\nexport const addDriver = async (data) => {\r\n let res = await postWithAuth('drivers', data);\r\n return res;\r\n};\r\n\r\nexport const updateDriver = async (id, data) => {\r\n let res = await putWithAuth(`drivers/${id}`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllDriver } from '../../../../Core/Services/InternalUser/ControllerService/driverService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport { getAllVor, getVorByVehicle } from '../../../../Core/Services/InternalUser/VOR/addEditVor';\r\nimport AddVor from './AddEditVor';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport Switch from '@material-ui/core/Switch';\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nimport '../../../commonStyle.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\n\r\nimport DepotDetails from '../DetailsModal/depotDetails';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\nimport CustomerDetails from '../DetailsModal/customerDetails';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport moment from 'moment';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 70\r\n },\r\n\r\n { key: 'vorVehicleDateStarted', name: 'Start Date', width: '9%', formatter: formatters.Date_DDMMMYYYY_HHMM },\r\n { key: 'vorVehicleLocation', name: 'Location' },\r\n { key: 'vorTypeDescription', name: 'Type', width: '9%' },\r\n { key: 'vorTypeDetailDescription', name: 'Reason', width: '9%' },\r\n { key: 'vehicleCategoryDescription', name: 'Sub Category', width: '8%' },\r\n { key: 'lastUpdateDate', name: 'Date/Time Last Update', width: '10%', formatter: formatters.Date_DDMMMYYYY_HHMM },\r\n { key: 'lastUpdate', name: 'Last Update', width: '10%' }\r\n];\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'VOR', active: true }\r\n];\r\n\r\nconst VorScreen = (props) => {\r\n const { showToastError } = useToast();\r\n const FromDash = props.location?.query?.FromDash;\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n VorList: [],\r\n DriverID: null,\r\n checkedA: true,\r\n filterFlag: FromDash ? true : false,\r\n activeOrInactive: FromDash ? true : false,\r\n vorFlag: FromDash ? true : '',\r\n isReload: null,\r\n getUrl: props.VehicleID\r\n ? `VORVehicles?VehicleID=${props.VehicleID}`\r\n : `VORVehicles?active=${FromDash ? true : ''}&StartDate=${props.location.startDate ? props.location.startDate : ''}&EndDate=${\r\n props.location.endDate ? props.location.endDate : ''\r\n }&CustomerId=${props.location.customerID ? props.location.customerID : ''}&Make=${props.location.make ? props.location.make : ''}&Model=${\r\n props.location.model ? props.location.model : ''\r\n }`\r\n });\r\n\r\n // long? CustomerId, string Make,string Model\r\n\r\n let history = useHistory();\r\n\r\n const handleChange = (event) => {\r\n const { name, checked } = event.target;\r\n let tempSt = {};\r\n if (name === 'filterFlag') {\r\n tempSt = {\r\n filterFlag: checked,\r\n activeOrInactive: checked ? true : false,\r\n vorFlag: checked ? true : ''\r\n };\r\n } else if (name === 'activeOrInactive') {\r\n tempSt = {\r\n activeOrInactive: checked,\r\n vorFlag: checked\r\n };\r\n }\r\n\r\n setState((st) => ({ ...st, ...tempSt, getUrl: `VORVehicles?active=${tempSt.vorFlag}` }));\r\n };\r\n\r\n const handleAdd = (data) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n vorVehicleID: data.vorVehicleID,\r\n regNo: data.vehicleRegNumber,\r\n VehicleID: data.vorVehicleVehicleID\r\n }));\r\n };\r\n\r\n const closeVorModal = (res) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n newSt.show = false;\r\n\r\n return newSt;\r\n });\r\n // res && pullAllVor();\r\n };\r\n const handleEditDefect = (val) => {\r\n if (val.defectTypeCode == 'DD') {\r\n history.push({\r\n pathname: `/maintenance/defect/edit/${val?.defectID}/${val?.vorVehicleVehicleID}`,\r\n state: 'Edit'\r\n });\r\n } else {\r\n history.push({\r\n pathname: `/maintenance/breakdowns/edit/${val?.defectID}/${val?.vorVehicleVehicleID}`,\r\n state: 'Edit'\r\n });\r\n }\r\n };\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${val?.vorVehicleVehicleID}`,\r\n search: '',\r\n state: 'jobs'\r\n });\r\n };\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n handleAdd(row)} />\r\n {row.defectID && (\r\n handleUpdate(row, null, 'modalEditDetail')}\r\n onClick={() => handleEditDefect(row)}\r\n toolTipTitle=\"Edit Defect\"\r\n />\r\n )}\r\n {checkhaveAccess?.CanViewJobs && row.jobID && (\r\n handleEditClick(row)} />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vorVehicleVehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (state.activeOrInactive) {\r\n tempCols.splice(2, 0, { key: 'vorVehicleEstimatedEndDate', name: 'Estimated Completion', width: '10%', formatter: formatters.Date_DDMMYYYY });\r\n } else {\r\n tempCols.splice(2, 0, { key: 'vorVehicleDateEnded', name: 'End Date', width: '10%', formatter: formatters.Date_DDMMMYYYY_HHMM });\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (!props.VehicleID) {\r\n tempCols.splice(1, 0, { key: 'vehicleRegNumber', name: 'Reg Number', width: 90, formatter: renderRegNumberEdit });\r\n tempCols.splice(7, 0, { key: 'customerCompanyName', name: 'Customer', formatter: renderCustomerName });\r\n tempCols.splice(8, 0, { key: 'depotName', name: 'Depot', width: '10%', formatter: renderDepotName });\r\n }\r\n\r\n return tempCols;\r\n }, [state.activeOrInactive]);\r\n\r\n const onRowDataBound = (e, $row, id, record) => {\r\n $row.css('background-color', `white`);\r\n const lastUpdateDate = moment(record.lastUpdateDate).format('MM/DD/YYYY');\r\n const daysPast = moment().diff(lastUpdateDate, 'days');\r\n if (daysPast > 1) {\r\n $row.css('background-color', 'orange');\r\n }\r\n };\r\n\r\n return (\r\n \r\n {state.show ? (\r\n // closeVorModal(false)} maxWidth=\"lg\" overflow=\"auto\">\r\n \r\n ) : null}\r\n {!props.VehicleID && \r\n \r\n Filter : Off \r\n \r\n \r\n On \r\n \r\n \r\n Inactive \r\n \r\n \r\n Active \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 onRowDataBound={(e, $row, id, record) => onRowDataBound(e, $row, id, record)}\r\n columns={columns}\r\n getUrl={state.getUrl}\r\n btnTitle=\"\"\r\n onBtnClick={handleAdd}\r\n isReload={state.isReload}\r\n filterVal={props?.location?.state || {}}\r\n />\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default VorScreen;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getVehicleInvoice = async (vehicleID, status) => {\r\n let res = '';\r\n if (status) {\r\n res = await getWithAuth(`Invoices?VehicleID=${vehicleID}&Status=${status}`);\r\n } else {\r\n res = await getWithAuth(`Invoices?VehicleID=${vehicleID}`);\r\n }\r\n return res;\r\n};\r\n\r\nexport const getJobInvoice = async (JobID) => {\r\n let res = await getWithAuth(`Invoices?JobID=${JobID}`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleInvoiceById = async (id) => {\r\n let res = await getWithAuth(`Invoices/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postgetVehicleInvoiceData = async (data) => {\r\n let res = await postWithAuth(`Invoices`, data);\r\n return res;\r\n};\r\n\r\nexport const invoiceScreenDropdowns = async () => {\r\n let res = await getWithAuth(`Invoices/screenDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const invoiceSearchOrderNo = async (val) => {\r\n let res = await getWithAuth(`VehicleJob/SearchOrderNo/${val}`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport {\r\n SecondaryButton,\r\n SelectBox,\r\n SingleSelect,\r\n MandatoryField,\r\n SimpleField,\r\n DatePicker,\r\n PrimaryButton,\r\n formatters,\r\n DeleteButton\r\n} from '../../../Core/Controls';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport '../Controllers/controllerStyle.scss';\r\nimport { useLoginInfo } from '../../..//Core/Hooks/useLoginInfo';\r\n\r\nimport {\r\n postgetVehicleInvoiceData,\r\n invoiceScreenDropdowns,\r\n getVehicleInvoiceById,\r\n invoiceSearchOrderNo\r\n} from '../../../Core/Services/InternalUser/invoicesService';\r\nimport { Tooltip } from '@material-ui/core';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\n\r\nfunction InvoiceModalScreen(props) {\r\n const { userRoles } = useLoginInfo();\r\n const isCustomer = userRoles.includes('customer');\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [state, setState] = useState({\r\n errors: {},\r\n orderNumberList: [],\r\n purchaseInvoiceStatusIDList: [],\r\n invoiceItemTypes: [],\r\n invoiceAgentList: [],\r\n purchaseInvoiceVehicleID: props.VehicleID || null,\r\n purchaseInvoiceID: null,\r\n purchaseInvoiceAgentID: props.ServiceAgentID || null,\r\n purchaseInvoiceDate: '',\r\n purchaseInvoiceJobDate: '',\r\n purchaseInvoiceAgentName: '',\r\n purchaseInvoiceNumber: null,\r\n purchaseInvoiceJobID: null,\r\n purchaseInvoiceNominalCode: '',\r\n purchaseInvoiceStatusID: null,\r\n purchaseInvoiceDateDue: null,\r\n purchaseInvoiceOrderNumber: '',\r\n purchaseInvoiceDatePaid: '',\r\n tempInputList: []\r\n });\r\n\r\n const [inputList, setInputList] = useState([\r\n {\r\n purchaseInvoiceItemID: null,\r\n purchaseInvoiceItemQuantity: '',\r\n purchaseInvoiceItemTypeID: '',\r\n purchaseInvoiceItemDescription: '',\r\n purchaseInvoiceItemNet: '',\r\n purchaseInvoiceItemVAT: '',\r\n purchaseInvoiceItemTypeIDValue: null\r\n }\r\n ]);\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n purchaseInvoiceAgentIDValue: null,\r\n purchaseInvoiceStatusIDValue: null\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let res = await invoiceScreenDropdowns();\r\n let data = res.data;\r\n setState((state) => ({\r\n ...state,\r\n purchaseInvoiceStatusIDList: data.purchaseInvoiceStatus,\r\n invoiceItemTypes: data.invoiceItemTypes,\r\n invoiceAgentList: data.serviceAgents\r\n }));\r\n\r\n if (props.invoiceID) {\r\n let res = await getVehicleInvoiceById(props.invoiceID);\r\n let data = res?.data?.details[0];\r\n setState((st) => ({\r\n ...st,\r\n purchaseInvoiceAgentID: data.purchaseInvoiceAgentID,\r\n purchaseInvoiceAgentName: data.purchaseInvoiceAgentName,\r\n purchaseInvoiceDate: formatters.DateFormatter(data.purchaseInvoiceDate),\r\n purchaseInvoiceDateDue: formatters.DateFormatter(data.purchaseInvoiceDateDue),\r\n purchaseInvoiceDatePaid: formatters.DateFormatter(data.purchaseInvoiceDatePaid),\r\n purchaseInvoiceID: data.purchaseInvoiceID,\r\n purchaseInvoiceJobDate: data.purchaseInvoiceJobDate,\r\n purchaseInvoiceJobID: data.purchaseInvoiceJobID,\r\n purchaseInvoiceNominalCode: data.purchaseInvoiceNominalCode,\r\n purchaseInvoiceNumber: data.purchaseInvoiceNumber,\r\n purchaseInvoiceOrderNumber: data.orderNo,\r\n purchaseInvoiceStatusID: data.purchaseInvoiceStatusID,\r\n purchaseInvoiceVehicleID: data.purchaseInvoiceVehicleID,\r\n tempInputList: res?.data?.purchaseInvoiceItems\r\n }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n getOrderNo();\r\n }, [state.purchaseInvoiceOrderNumber]);\r\n\r\n useEffect(() => {\r\n if (state.invoiceItemTypes) {\r\n if (state.tempInputList.length > 0) {\r\n setInputList(\r\n state.tempInputList.map((o) => {\r\n o.purchaseInvoiceItemTypeIDValue = state.invoiceItemTypes.find(({ id }) => id == o.purchaseInvoiceItemTypeID);\r\n return o;\r\n })\r\n );\r\n } else {\r\n return {\r\n purchaseInvoiceItemID: null,\r\n purchaseInvoiceItemQuantity: '',\r\n purchaseInvoiceItemTypeID: '',\r\n purchaseInvoiceItemDescription: '',\r\n purchaseInvoiceItemNet: '',\r\n purchaseInvoiceItemVAT: '',\r\n purchaseInvoiceItemTypeIDValue: null\r\n };\r\n }\r\n }\r\n }, [state.invoiceItemTypes, state.tempInputList]);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n\r\n if (state.purchaseInvoiceAgentID && state.invoiceAgentList.length > 0) {\r\n newSt.purchaseInvoiceAgentIDValue = state.invoiceAgentList.find(({ id }) => id === state.purchaseInvoiceAgentID);\r\n }\r\n if (state.purchaseInvoiceStatusID && state.purchaseInvoiceStatusIDList.length > 0) {\r\n newSt.purchaseInvoiceStatusIDValue = state.purchaseInvoiceStatusIDList.find(({ id }) => id === state.purchaseInvoiceStatusID);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.purchaseInvoiceAgentID, state.purchaseInvoiceStatusID]);\r\n\r\n const getOrderNo = async () => {\r\n if (state.purchaseInvoiceOrderNumber?.length > 3) {\r\n let res = await invoiceSearchOrderNo(state.purchaseInvoiceOrderNumber);\r\n setState((state) => ({\r\n ...state,\r\n orderNumberList: res.data.list.map((row) => ({\r\n id: row.jobID,\r\n name: row.jobAgentOrderNo,\r\n ApproveOrderNo: row.jobApprovedOrderNo,\r\n jobDate: row.jobDate\r\n }))\r\n }));\r\n }\r\n };\r\n\r\n const setOrderNo = (e, val) => {\r\n setState((state) => ({\r\n ...state,\r\n purchaseInvoiceJobDate: val?.jobDate,\r\n purchaseInvoiceJobID: val?.id\r\n //ApproveOrderNo\r\n }));\r\n };\r\n\r\n const inputChange = (event, val) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const singleSelectInputChange = (nm, index) => (ev, val) => {\r\n const list = [...inputList];\r\n list[index][nm] = val;\r\n setInputList(list);\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 handleRemoveClick = (index) => {\r\n const list = [...inputList];\r\n list.splice(index, 1);\r\n setInputList(list);\r\n };\r\n\r\n const handleAddClick = () => {\r\n setInputList([\r\n ...inputList,\r\n {\r\n purchaseInvoiceItemID: null,\r\n purchaseInvoiceItemQuantity: '',\r\n purchaseInvoiceItemDescription: '',\r\n purchaseInvoiceItemTypeID: '',\r\n purchaseInvoiceItemNet: ''\r\n }\r\n ]);\r\n };\r\n\r\n const validations = () => {\r\n const { purchaseInvoiceStatusID, purchaseInvoiceDate, purchaseInvoiceDatePaid, purchaseInvoiceNumber, purchaseInvoiceAgentID } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n const list = [...inputList];\r\n let errors = {};\r\n if (!emptyStrigPattern.test(purchaseInvoiceDate)) {\r\n errors.purchaseInvoiceDate = 'Date of invoice is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(purchaseInvoiceNumber)) {\r\n errors.purchaseInvoiceNumber = 'Purchase invoice number is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(purchaseInvoiceAgentID)) {\r\n errors.purchaseInvoiceAgentID = 'Agent is required';\r\n formIsValid = false;\r\n }\r\n if (!tempOptions.purchaseInvoiceStatusIDValue) {\r\n errors.purchaseInvoiceStatusIDValue = 'status is required';\r\n formIsValid = false;\r\n }\r\n if (tempOptions?.purchaseInvoiceStatusIDValue?.id == 'P') {\r\n if (!emptyStrigPattern.test(purchaseInvoiceDatePaid)) {\r\n errors.purchaseInvoiceDatePaid = 'Paid date is required';\r\n formIsValid = false;\r\n }\r\n }\r\n if (list[0]['purchaseInvoiceItemDescription'] === '') {\r\n formIsValid = false;\r\n errors['purchaseInvoiceItemDescription'] = 'Description cannot be empty';\r\n }\r\n if (list[0]['purchaseInvoiceItemQuantity'] === '') {\r\n formIsValid = false;\r\n errors['purchaseInvoiceItemQuantity'] = 'Quantity cannot be empty';\r\n }\r\n if (list[0]['purchaseInvoiceItemNet'] === '') {\r\n formIsValid = false;\r\n errors['purchaseInvoiceItemNet'] = 'Net cannot be empty';\r\n }\r\n if (list[0]['purchaseInvoiceItemNet'] === '') {\r\n formIsValid = false;\r\n errors['purchaseInvoiceItemNet'] = 'Net cannot be empty';\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const data = {\r\n purchaseInvoiceID: state.purchaseInvoiceID,\r\n purchaseInvoiceStatusID: tempOptions.purchaseInvoiceStatusIDValue?.id,\r\n purchaseInvoiceVehicleID: state.purchaseInvoiceVehicleID,\r\n purchaseInvoiceDate: state.purchaseInvoiceDate,\r\n purchaseInvoiceDateDue: state.purchaseInvoiceDateDue,\r\n purchaseInvoiceAgentID: tempOptions.purchaseInvoiceAgentIDValue?.id,\r\n purchaseInvoiceNumber: state.purchaseInvoiceNumber,\r\n purchaseInvoiceJobDate: state.purchaseInvoiceJobDate,\r\n purchaseInvoiceDatePaid: state.purchaseInvoiceDatePaid,\r\n purchaseInvoiceJobID: state.purchaseInvoiceJobID,\r\n purchaseInvoiceNominalCode: state.purchaseInvoiceNominalCode,\r\n purchaseInvoiceItems: inputList.map((o) => {\r\n if (o.purchaseInvoiceItemTypeIDValue) {\r\n o.purchaseInvoiceItemTypeID = o.purchaseInvoiceItemTypeIDValue?.id;\r\n delete o.purchaseInvoiceItemTypeIDValue;\r\n }\r\n return o;\r\n })\r\n };\r\n setBtnLoader(true);\r\n let res = await postgetVehicleInvoiceData(data);\r\n if (res.success) {\r\n showToastSuccess('Invoice saved successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n \r\n {jobDetails?.jobOrderNo || ''}({jobDetails?.jobAgentOrderNo})\r\n \r\n \r\n ) : (\r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n )}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n {/* \r\n Order Type \r\n Test Ask \r\n */}\r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n \r\n {getMakeModel}\r\n \r\n \r\n {/* \r\n Job Status \r\n {jobDetails.vehicleJobStatus} \r\n */}\r\n \r\n {' '}\r\n \r\n {/* \r\n Reg Number \r\n {jobDetails.jobRegNumber} \r\n \r\n \r\n Make \r\n {jobDetails.vehicleMake} \r\n \r\n \r\n Model \r\n {jobDetails.vehicleModel} \r\n */}\r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default JobDetail;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport InvoiceModalScreen from './addEditInvoice';\r\nimport { EditButton, BreadCrumbs, DataGrid, formatters } from '../../../Core/Controls';\r\nimport '../../commonStyle.scss';\r\nimport { getVehicleInvoice, getJobInvoice } from '../../../Core/Services/InternalUser/invoicesService';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport JobDetail from '../Controllers/JOBS/JOBItems/JobDetails';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Invoice', active: true }\r\n];\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n { key: 'invoiceDate', name: 'Invoice Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'dateDue', name: 'Due Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'datePaid', name: 'Date Paid', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'invoiceNumber', name: 'Number' },\r\n { key: 'status', name: 'Status' },\r\n { key: 'supplier', name: 'Supplier' },\r\n { key: 'vat', name: 'VAT' },\r\n { key: 'net', name: 'NET' }\r\n];\r\n\r\nconst InvoiceScreen = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n invoiceID: null,\r\n invoiceList: [],\r\n showLoader: true,\r\n VehicleID: props.VehicleID || null,\r\n ServiceAgentID: props.ServiceAgentID || null,\r\n isReload: null\r\n });\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n\r\n useEffect(async () => {\r\n let getUrl;\r\n if (props.fromPage === 'job') {\r\n getUrl = `Invoices${props.JobID ? `?JobID=${props.JobID}` : ''}`;\r\n } else {\r\n if (props.VehicleID) {\r\n getUrl = `Invoices${props.VehicleID ? `?VehicleID=${props.VehicleID}` : ''}`;\r\n } else {\r\n getUrl = `Invoices?status=${props.statusCode}`;\r\n }\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n getUrl: getUrl\r\n }));\r\n // pullInvoiceData();\r\n }, []);\r\n\r\n const pullInvoiceData = async () => {\r\n // let res = {};\r\n // if (props.fromPage === 'job') {\r\n // res = await getJobInvoice(props.JobID, null);\r\n // } else {\r\n // if (props.VehicleID) {\r\n // res = await getVehicleInvoice(props.VehicleID, null);\r\n // } else {\r\n // res = await getVehicleInvoice();\r\n // }\r\n // }\r\n // setState((st) => ({\r\n // ...st,\r\n // invoiceList: res.data?.list,\r\n // showLoader: false\r\n // }));\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const actionButton = (data, row) => {\r\n return (\r\n \r\n Total \r\n \r\n £{jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n \r\n handleInvoiceUpdate(row)} toolTipTitle=\"Edit Invoice\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const title = `${props.fromPage === 'job' ? '' : isCustomer ? '' : 'Add Invoice'}`;\r\n\r\n const handleInvoiceUpdate = (params) => {\r\n setState((state) => ({ ...state, modalToggle: true, invoiceID: params?.invoiceID }));\r\n };\r\n\r\n const closeAddDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullInvoiceData();\r\n };\r\n\r\n return (\r\n \r\n {state.modalToggle ? (\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={state.getUrl}\r\n btnTitle={title}\r\n onBtnClick={handleInvoiceUpdate}\r\n idFieldName=\"invoiceID\"\r\n fileUploaderConfigName=\"Invoice\"\r\n isReload={state.isReload}\r\n offset={props.fromPage === 'job' ? 410 : 350}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default InvoiceScreen;\r\n","import { getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllVehicleSchedules = async (filterID, custId, depotId, year, serviceAgentID) => {\r\n if (filterID === ':') filterID = '';\r\n let res = await getWithAuth(\r\n `Schedules?mode=${filterID}&CustomerID=${custId || ''}&DepotID=${depotId || ''}&Year=${year || ''}&ServiceAgentID=${serviceAgentID || ''}`\r\n );\r\n return res;\r\n};\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport VpnKeyIcon from '@material-ui/icons/VpnKey';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\nimport { CustomIconButton, PrimaryButton, SecondaryButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { Link } from 'react-router-dom';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport { EditButton, formatters, BreadCrumbs, DatePicker, SpeedDials, SelectBox, SingleSelect } from '../../../Core/Controls';\r\n// import ScheduleSpeedDials from '../../../Core/Controls/SpeedDial/scheduleSpeedDial';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport DialogBox from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleAdd';\r\nimport EditSchedule from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleEdit';\r\nimport ScheduleNotes from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport ScheduleBookingStatus from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingStatus';\r\nimport ScheduleBookingSection from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingSection';\r\nimport CompleteScheduleModal from '../../InternalUser/Schedule/completeSchedule';\r\nimport DataGrid from '../../../Core/Controls/Grid/index';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport AutorenewIcon from '@material-ui/icons/Autorenew';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport AspectRatioIcon from '@material-ui/icons/AspectRatio';\r\nimport { InputLabel, FormHelperText, MenuItem, TextField } from '@material-ui/core';\r\n\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { getScheduleVehicleById } from '../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\n\r\nimport moment from 'moment';\r\n\r\n// import './allSchedulesStyle.scss';\r\n\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nimport { getAllVehicleSchedules } from '../../../Core/Services/InternalUser/Maintenance/scheduleService';\r\nimport {\r\n getCustomersListDropdowns,\r\n getSchedulePlannerData,\r\n getSchedulePlannerDropdowns,\r\n getVehicleScreenDropdowns\r\n} from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\n\r\nconst useStyles = makeStyles({\r\n yearInput: {\r\n '& .MuiOutlinedInput-inputMarginDense': {\r\n paddingTop: '4.1px',\r\n paddingBottom: '4.1px',\r\n color: 'white'\r\n }\r\n },\r\n root: {\r\n minWidth: 275,\r\n border: ' 1px solid black',\r\n height: '100%'\r\n },\r\n bullet: {\r\n display: 'inline-block',\r\n margin: '0 2px',\r\n transform: 'scale(0.8)'\r\n },\r\n title: {\r\n fontSize: 14\r\n },\r\n pos: {\r\n marginBottom: 12\r\n },\r\n cardContent: (props) => {\r\n let cardContentHeight = props.fromTab ? Math.max(120, (window.innerHeight - 170) / 4 - 60) : Math.max(120, (window.innerHeight - 80) / 4 - 60);\r\n return {\r\n height: cardContentHeight,\r\n overflowY: 'auto',\r\n '&::-webkit-scrollbar': {\r\n width: '0.3em'\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: '#1976d2',\r\n opacity: 5,\r\n outline: '1px solid slategrey'\r\n }\r\n };\r\n }\r\n});\r\n\r\nconst YEARS = () => {\r\n const years = [];\r\n const d = new Date();\r\n let startYear = d.getFullYear() - 7;\r\n let endYear = d.getFullYear() + 7;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ name: startYear, id: startYear });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst ScheduleDashboard = (props) => {\r\n const classes = useStyles(props);\r\n const [state, setState] = useState({\r\n scheduleEventNames: [],\r\n sortedScheduleEvent: [],\r\n uniqueYear: [],\r\n showLoader: true,\r\n customerID: null,\r\n depotsID: null,\r\n customerList: [],\r\n depotWithCustList: [],\r\n serviceAgentsList: [],\r\n isDisabled: false,\r\n scheduleCustomerIDValue: '',\r\n scheduleDepotsIDValue: '',\r\n scheduleServiceAgentIDValue: ''\r\n });\r\n const [openDialog, setOpenDialog] = useState({});\r\n const { userRoles } = useLoginInfo();\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const pos = isServiceAgent ? 's' : 'm';\r\n\r\n useEffect(async () => {\r\n pullApiData();\r\n }, [state.scheduleCustomerIDValue?.id, state.scheduleDepotsIDValue?.id, state.scheduleServiceAgentIDValue?.id]);\r\n\r\n // useEffect(async () => {\r\n // let res = await getVehicleScreenDropdowns();\r\n // setState((st) => ({\r\n // ...st,\r\n // customerList: res.data.customers,\r\n // depotsList: res.data.depots,\r\n // serviceAgentsList: res.data.serviceAgents\r\n // }));\r\n // }, []);\r\n\r\n useEffect(async () => {\r\n let resCust = await getCustomersListDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: resCust.data.customer.table\r\n }));\r\n }, []);\r\n\r\n const pullApiData = async (year = moment().format('YYYY')) => {\r\n let tempSortedScheduleEvent = [\r\n { month: 'January', events: [] },\r\n { month: 'February', events: [] },\r\n { month: 'March', events: [] },\r\n { month: 'April', events: [] },\r\n { month: 'May', events: [] },\r\n { month: 'June', events: [] },\r\n { month: 'July', events: [] },\r\n { month: 'August', events: [] },\r\n { month: 'September', events: [] },\r\n { month: 'October', events: [] },\r\n { month: 'November', events: [] },\r\n { month: 'December', events: [] }\r\n ];\r\n\r\n let res = props.fromTab\r\n ? await getScheduleVehicleById(\r\n props.scheduleVehicleID,\r\n state.scheduleCustomerIDValue?.id,\r\n state.scheduleDepotsIDValue?.id,\r\n year,\r\n state.scheduleServiceAgentIDValue?.id || ''\r\n )\r\n : await getAllVehicleSchedules(\r\n '',\r\n state.scheduleCustomerIDValue?.id,\r\n state.scheduleDepotsIDValue?.id,\r\n year,\r\n state.scheduleServiceAgentIDValue?.id || ''\r\n );\r\n\r\n const uniquescheduleEventNames = [...new Set(res.data?.schedules.map((item) => item.scheduleEventName))].map((w) => {\r\n return { name: w, icon: 'VpnKeyIcon' };\r\n });\r\n\r\n const uniqueYear = YEARS();\r\n\r\n res.data?.schedules\r\n // .filter((s) => moment(s.scheduleDateDue).format('YYYY') == year)\r\n .forEach((item) => {\r\n let objIndex = tempSortedScheduleEvent.findIndex((x) => x.month == moment(item.scheduleDateDue).format('MMMM'));\r\n if (objIndex + 1) {\r\n tempSortedScheduleEvent[objIndex].events.push(item);\r\n }\r\n });\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventNames: uniquescheduleEventNames,\r\n sortedScheduleEvent: tempSortedScheduleEvent,\r\n uniqueYear: uniqueYear,\r\n selectedYear: year,\r\n showLoader: false,\r\n gridShow: false\r\n }));\r\n };\r\n\r\n // useEffect(async () => {\r\n // let Depots = [];\r\n // if (state.customerID) {\r\n // state.depotsList.filter((obj) => {\r\n // if (state.customerID === obj.depotCustomerID) {\r\n // Depots.push(obj);\r\n // }\r\n // });\r\n // setState((st) => ({ ...st, depotWithCustList: Depots, depotsID: '' }));\r\n // } else {\r\n // setState((st) => ({ ...st, depotWithCustList: [], depotsID: '' }));\r\n // }\r\n // }, [state.customerID, state.depotsList]);\r\n\r\n useEffect(async () => {\r\n let Depots = [];\r\n let endUsers = [];\r\n let serviceAgents = [];\r\n if (state.scheduleCustomerIDValue?.id) {\r\n let resCust = await getSchedulePlannerDropdowns(state.scheduleCustomerIDValue?.id);\r\n Depots = resCust.data.depots;\r\n endUsers = resCust.data.endUsers;\r\n serviceAgents = resCust.data.serviceAgents;\r\n setState((st) => ({\r\n ...st,\r\n depotWithCustList: Depots,\r\n scheduleDepotsIDValue: '',\r\n endUserWithCustList: endUsers,\r\n serviceAgentsList: serviceAgents\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n depotWithCustList: [],\r\n scheduleDepotsIDValue: '',\r\n endUserWithCustList: endUsers,\r\n scheduleEndUserIDValue: '',\r\n serviceAgentsList: serviceAgents,\r\n scheduleServiceAgentIDValue: ''\r\n }));\r\n }\r\n }, [state.scheduleCustomerIDValue?.id]);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st, [name]: value };\r\n newSt.isDisabled = newSt.customerID || false;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleInputChange2 = (e) => {\r\n if (e.target.value == '') {\r\n pullApiData();\r\n } else pullApiData(e.target.value);\r\n };\r\n\r\n const checkButton = (j, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: j,\r\n scheduleVehicleID: j.scheduleVehicleID\r\n }));\r\n };\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n selectedRowData: {}\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n pullApiData();\r\n };\r\n\r\n const handleClick = (data, month) => {\r\n setState((st) => ({\r\n ...st,\r\n RowData: data,\r\n selectedMonth: month,\r\n gridShow: true\r\n }));\r\n };\r\n\r\n const closeGrid = () => {\r\n setState((st) => ({\r\n ...st,\r\n gridShow: false\r\n }));\r\n };\r\n\r\n const dueDateFormatter = (data) => {\r\n let textColor = formatters.getScheduleColour(data.scheduleCompletionDate, data.scheduleDateDue, data.dayRange);\r\n\r\n return {data.scheduleEventName};\r\n };\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const renderEdit = (j, param) => {\r\n return (\r\n \r\n {!isServiceAgent && j?.scheduleBookingStatus != 'Completed' && (\r\n \r\n \r\n {state.showLoader ? (\r\n \r\n
\r\n ) : (\r\n \r\n {props.fromTab ? null : (\r\n <>\r\n {dueDateFormatter(j)}\r\n ({j.vehicleRegNumber})\r\n \r\n )}\r\n {renderEdit(j)}\r\n
\r\n \r\n There are no schedules\r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Start date\r\n \r\n {state.errors.contractStartDate} \r\n \r\n \r\n Contract Term (Months) \r\n \r\n \r\n End date \r\n \r\n \r\n Extended Date \r\n \r\n \r\n Contract mileage \r\n \r\n \r\n Access Mileage (p/mile) \r\n \r\n \r\n Purchase Date \r\n {' '}\r\n \r\n Purchase Price \r\n \r\n \r\n Contract type \r\n \r\n \r\n Duration Type \r\n \r\n \r\n Contract Status \r\n \r\n \r\n Nominal Code \r\n \r\n \r\n P11D Value \r\n \r\n \r\n Initial mileage \r\n \r\n \r\n Anticipated annual mileage \r\n \r\n \r\n Anticipated renewal date \r\n \r\n \r\n \r\n Contract Funding\r\n \r\n
\r\n\r\n \r\n Agreement type \r\n \r\n \r\n Agreement ref number \r\n \r\n \r\n Funding company name \r\n \r\n \r\n Funding company telephone \r\n \r\n \r\n Initial payment \r\n \r\n \r\n Monthly payment \r\n \r\n \r\n Final payment \r\n \r\n \r\n \r\n Contract resell value\r\n \r\n {state.errors.contractReSellValue} \r\n \r\n \r\n Broker \r\n \r\n \r\n Total cost of funding \r\n \r\n \r\n \r\n Contract Costing\r\n \r\n
\r\n\r\n \r\n \r\n \r\n Inclusive of Maintenance? \r\n \r\n \r\n \r\n {' '}\r\n Maintenance cost\r\n \r\n {state.errors.contractMaintenanceCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of R&M? \r\n \r\n \r\n \r\n {' '}\r\n R&M cost\r\n \r\n {state.errors.contractRAndMCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of Substitude? \r\n \r\n \r\n \r\n {' '}\r\n Substitude cost\r\n \r\n {state.errors.contractSubstituteCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of Breakdown? \r\n \r\n \r\n \r\n Breakdown cost\r\n \r\n {state.errors.contractBreakdownCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of Inspections? \r\n \r\n \r\n \r\n Inspections cost\r\n \r\n {state.errors.contractInspectionsCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of Tyre? \r\n \r\n \r\n \r\n Tyre Cost\r\n \r\n {state.errors.contractTyresCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of Tachograph? \r\n \r\n \r\n \r\n Tachograph cost\r\n \r\n {state.errors.contractTachographCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of RFL? \r\n \r\n \r\n \r\n RFL cost\r\n \r\n {state.errors.contractRFLCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Inclusive of AncEquipment? \r\n \r\n \r\n \r\n AncEquipment cost\r\n \r\n {state.errors.contractAncEquipmentCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {'\\u{2800}'} \r\n {'\\u{2800}'} */}\r\n \r\n \r\n \r\n Admin cost\r\n \r\n {state.errors.contractAdminCost} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Maintenance Contract\r\n \r\n
\r\n\r\n \r\n R&M Start Date \r\n \r\n \r\n R&M End Date \r\n \r\n \r\n Maintainance provider \r\n \r\n \r\n \r\n \r\n \r\n Contract Tyre\r\n \r\n
\r\n\r\n \r\n Tyre supplier \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n {props.vehicleContractID ? 'Update' : 'Submit'}\r\n \r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \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\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 ContractDash;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const postRecalls = async (data) => {\r\n let res = await postWithAuth(`recalls `, data);\r\n return res;\r\n};\r\n\r\nexport const getRecallByID = async (id) => {\r\n let res = await getWithAuth(`recalls/${id}`);\r\n return res;\r\n};\r\n\r\nexport const getRecallLogByID = async (id) => {\r\n let res = await getWithAuth(`recalls/RecallLog?RecallID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const postRecallLog = async (data) => {\r\n let res = await postWithAuth(`recalls/RecallLog`, data);\r\n return res;\r\n};\r\n\r\nexport const postRecallBookedStep = async (data) => {\r\n let res = await postWithAuth(`recalls/AssignAgent`, data);\r\n return res;\r\n};\r\n\r\nexport const postRecallOnsiteAndWorkedShop = async (data) => {\r\n let res = await postWithAuth(`recalls/AddOnSiteWorkShop`, data);\r\n return res;\r\n};\r\n\r\nexport const postRecallCompleted = async (data) => {\r\n let res = await postWithAuth(`recalls/RecallComplete`, data);\r\n return res;\r\n};\r\n","import React, { createContext, useEffect, useState } from 'react';\r\nimport { getRecallByID } from '../../../../../Core/Services/InternalUser/Vehicle/vehicleRecallService';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { postRecalls, postRecallLog, getRecallLogByID } from '../../../../../Core/Services/InternalUser/Vehicle/vehicleRecallService';\r\nimport { formatters } from '../../../../../Core/Controls';\r\n\r\nexport const RecallScreenContext = createContext();\r\n\r\nexport const RecallProvider = (props) => {\r\n const [state, setState] = useState({\r\n recallVehicleID: props.VehicleID,\r\n showNote: false,\r\n showEdit: false,\r\n showLoader: true,\r\n error: {},\r\n isReload: null\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const validation = () => {\r\n let error = {};\r\n let isValid = true;\r\n const { recallNumber, recallDate, recallDescription, recallExpiryDate } = state;\r\n if (!recallNumber) {\r\n error.recallNumber = 'Recall number is required';\r\n isValid = false;\r\n }\r\n if (!recallDate) {\r\n error.recallDate = 'Recall date is required';\r\n isValid = false;\r\n }\r\n if (!recallDescription) {\r\n error.recallDescription = 'Description number is required';\r\n isValid = false;\r\n }\r\n if (!recallExpiryDate) {\r\n error.recallExpiryDate = 'ExpiryDate number is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n error\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async (fromScreen) => {\r\n if (validation()) {\r\n let data = {\r\n recallID: state.recallID || null,\r\n recallVehicleID: state.recallVehicleID || null,\r\n recallNumber: state.recallNumber || null,\r\n recallDate: state.recallDate || null,\r\n recallExpiryDate: state.recallExpiryDate || null,\r\n recallDescription: state.recallDescription || null\r\n };\r\n\r\n let res = await postRecalls(data);\r\n if (res.success) {\r\n showToastSuccess('Vehicle Recall added successfully');\r\n if (state.recallID) {\r\n handleEditForm();\r\n } else {\r\n props.onClose(fromScreen, res?.data?.recallID, true);\r\n }\r\n } else {\r\n showToastError('Vehicle Recall Not added');\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props.reCallId) {\r\n getRecallDetails();\r\n pullrecallLog();\r\n }\r\n }, [state.isReload]);\r\n\r\n const isRefreshDetails = () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const getRecallDetails = async () => {\r\n let res = await getRecallByID(props.reCallId);\r\n const data = res.data?.list[0];\r\n setState((st) => ({\r\n ...st,\r\n recallID: data.recallID || null,\r\n recallVehicleID: data.recallVehicleID || null,\r\n recallNumber: data.recallNumber || null,\r\n recallDate: formatters.DateFormatter(data.recallDate),\r\n recallExpiryDate: formatters.DateFormatter(data.recallExpiryDate),\r\n recallDescription: data.recallDescription || null,\r\n recallDateCreated: data.recallDateCreated || null,\r\n serviceAgent: data.serviceAgent,\r\n recallStatusID: data.recallStatusID,\r\n recallDateBooked: data.recallDateBooked,\r\n recallDateOnSite: data.recallDateOnSite,\r\n recallDateWorkshop: data.recallDateWorkshop,\r\n recallDateCompleted: data.recallDateCompleted,\r\n fileCount: data.fileCount\r\n }));\r\n };\r\n const inputChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const handleNote = () => {\r\n setState((st) => ({ ...st, showNote: !st.showNote, recallLogNotes: '', error: {} }));\r\n };\r\n\r\n const logvalidation = () => {\r\n let error = {};\r\n let isValid = true;\r\n if (!state.recallLogNotes) {\r\n error.recallLogNotes = 'Log note is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n error: error\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handleSubmitLog = async () => {\r\n if (logvalidation()) {\r\n let data = {\r\n recallID: state.recallID,\r\n recallLogNotes: state.recallLogNotes\r\n };\r\n let res = await postRecallLog(data);\r\n if (res.success) {\r\n if (res.success) {\r\n showToastSuccess('Vehicle Recall Log added successfully');\r\n handleNote();\r\n pullrecallLog();\r\n } else {\r\n showToastError('Vehicle Recall Log Not added');\r\n }\r\n }\r\n }\r\n };\r\n\r\n const pullrecallLog = async () => {\r\n if (props.reCallId) {\r\n let res = await getRecallLogByID(props.reCallId);\r\n setState((st) => ({ ...st, logList: res.data?.list, showLoader: false }));\r\n }\r\n };\r\n\r\n const handleEditForm = () => {\r\n setState((st) => ({ ...st, showEdit: !st.showEdit }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Contract Details\r\n \r\n \r\n\r\n \r\n {!isCustomer && (\r\n \r\n \r\n
\r\n \r\n {!show && (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n Recall Number\r\n \r\n {state.error.recallNumber} \r\n \r\n \r\n \r\n Recall Date\r\n \r\n {state.error.recallDate} \r\n \r\n \r\n \r\n Expiry Date\r\n \r\n {state.error.recallExpiryDate} \r\n \r\n \r\n \r\n Description\r\n \r\n {state.error.recallDescription} \r\n \r\n\r\n \r\n handleSubmit('add')}>\r\n Submit\r\n \r\n \r\n \r\n Cancel \r\n \r\n \r\n
\r\n );\r\n};\r\nconst Screen = (props) => {\r\n return (\r\n \r\n \r\n popUpHandler(s.title) : ''}>\r\n \r\n \r\n ))}\r\n \r\n {step.serviceDate ? (\r\n closeServiceAgentModal(false)} maxWidth=\"xs\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useContext } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { CustomChip, DatePicker, InputText, SimpleField, DataGrid, SecondaryButton, formatters } from '../../../../../Core/Controls';\r\nimport FileUploaderButton from '../../../../../Core/Controls/GenericFileUploader';\r\nimport { RecallProvider as StateProvider, RecallScreenContext } from './reCallProvider';\r\nimport CustomizedRecallSteppers from './RecallStepper/recallStepper';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport { Widgets } from '@material-ui/icons';\r\nimport moment from 'moment';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n inputContainer: {\r\n padding: '5px',\r\n marginBottom: '5px',\r\n '& .MuiOutlinedInput-input': {\r\n padding: '4px 4px'\r\n }\r\n },\r\n textAreaContainer: {\r\n padding: '5px',\r\n marginBottom: '5px',\r\n height: '400px'\r\n }\r\n}));\r\n\r\nconst JobSingleNote = props => {\r\n return \r\n \r\n {s.value}\r\n \r\n
\r\n {s.AgentName ? `${s.AgentName}` : s.title}
\r\n \r\n
\r\n}\r\n\r\nconst columns = [\r\n {\r\n key: 'recallLogDateCreated',\r\n name: 'Date',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n {\r\n key: 'notes',\r\n name: 'Log'\r\n },\r\n {\r\n key: 'createdBy',\r\n name: 'Created By',\r\n width: 170\r\n }\r\n];\r\n\r\nconst RecallDashboard = (props) => {\r\n const classes = useStyles();\r\n\r\n const { state, inputChange, handleNote, handleSubmitLog, handleEditForm, handleSubmit, isRefreshDetails } = useContext(RecallScreenContext);\r\n\r\n return (\r\n {props.note.notes}
\r\n \r\n {props.note.createdBy} @ {moment(props.note.recallLogDateCreated).format(\"LLL\")}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Recall Details\r\n \r\n \r\n \r\n \r\n {!state.showEdit ? (\r\n handleSubmit('edit')}\r\n style={{ fontWeight: 'bold', height: '29px', marginRight: 10 }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Recall Number \r\n {state.showEdit ? (\r\n {state.recallNumber} \r\n )}\r\n \r\n \r\n Recall Date \r\n {state.showEdit ? (\r\n {formatters.DateOnlyFormatter(state.recallDate)} \r\n )}\r\n \r\n \r\n Expiry Date \r\n {state.showEdit ? (\r\n {formatters.DateOnlyFormatter(state.recallExpiryDate)} \r\n )}\r\n \r\n \r\n \r\n \r\n Description \r\n {state.showEdit ? (\r\n \r\n {state.recallDescription}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Recall Logs\r\n \r\n \r\n \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.showNote ? (\r\n \r\n \r\n \r\n \r\n Log\r\n \r\n {state.error.recallLogNotes} \r\n \r\n \r\n Submit \r\n \r\n \r\n Cancel \r\n \r\n \r\n \r\n ) : null}\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 setState((st) => ({\r\n ...st,\r\n reCallId: row.recallID,\r\n showDetails: true\r\n }))\r\n }\r\n toolTipTitle=\"Edit Recall\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n const onClose = (fromScreen, recallID) => {\r\n setState((st) => ({\r\n ...st,\r\n showRecall: false,\r\n showDetails: fromScreen === 'add' ? true : false,\r\n reCallId: recallID\r\n }));\r\n pullChecksData();\r\n };\r\n\r\n const handleAdd = () => {\r\n setState((st) => ({\r\n ...st,\r\n showRecall: true\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n let loadUrl = `recalls?VehicleID=${props.VehicleID}`;\r\n return (\r\n \r\n {state.showRecall ? (\r\n \r\n \r\n ) : null}\r\n\r\n {state.showDetails ? (\r\n // \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n btnTitle={`${checkhaveAccess?.CanUpdateVehicleRecalls ? 'Add Recall' : ''}`}\r\n onBtnClick={handleAdd}\r\n isReload={state.isReload}\r\n getUrl={loadUrl}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleRecalls;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport '../../commonStyle.scss';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport JobDetail from '../Controllers/JOBS/JOBItems/JobDetails';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nlet final = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Invoices', active: true }\r\n];\r\nconst getCrumbs = (code) => {\r\n let newColumn = [...final];\r\n if (code === 'p') {\r\n newColumn.splice(3, 0, { name: 'Sales-Paid', active: true });\r\n } else if (code === 'u') {\r\n newColumn.splice(3, 0, { name: 'Sales-Unpaid', active: true });\r\n } else {\r\n newColumn.splice(2, 0, { name: 'Paid', active: true });\r\n }\r\n return newColumn;\r\n};\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n { key: 'ino', name: 'Number' },\r\n { key: 'idate', name: 'Invoice Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'dd', name: 'Due Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'total', name: 'Total', formatter: formatters.NumberWithPound, align: 'right' },\r\n { key: 'c', name: 'Customer' }\r\n];\r\n\r\nconst SalesInvoiceScreen = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n invoiceID: null,\r\n VehicleID: props.VehicleID || null,\r\n ServiceAgentID: props.ServiceAgentID || null,\r\n isReload: null\r\n });\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n const crumbs = getCrumbs(props.statusCode);\r\n const history = useHistory();\r\n\r\n useEffect(async () => {\r\n let getUrl;\r\n if (props.fromPage === 'job') {\r\n getUrl = `Invoices/SalesInvoiceByStatus${props.JobID ? `?JobID=${props.JobID}` : ''}`;\r\n } else {\r\n if (props.VehicleID) {\r\n getUrl = `Invoices/SalesInvoiceByStatus${props.VehicleID ? `?VehicleID=${props.VehicleID}` : ''}`;\r\n } else {\r\n getUrl = `Invoices/SalesInvoiceByStatus?status=${props.statusCode}`;\r\n }\r\n }\r\n setState((st) => ({\r\n ...st,\r\n getUrl: getUrl\r\n }));\r\n }, []);\r\n\r\n const pullInvoiceData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const actionButton = (data, row) => {\r\n return (\r\n \r\n handleInvoiceUpdate(row)} toolTipTitle=\"Edit Invoice\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n if (!props.VehicleID || props.JobID) {\r\n tempCols.splice(5, 0, { key: 'regno', name: 'Reg No', width: '20%' });\r\n }\r\n if (props.statusCode != 'u') {\r\n tempCols.splice(4, 0, { key: 'dp', name: 'Date Paid', formatter: formatters.Date_DDMMYYYY });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleInvoiceUpdate = (val) => {\r\n history.push({\r\n pathname: `/update_sales_invoice/${val.invoiceID}`,\r\n search: ''\r\n });\r\n };\r\n return (\r\n \r\n <>\r\n {!props.VehicleID && ({\r\n records: res.data.list.map((m) => ({ ...m, total: m.vat + m.net })),\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={state.getUrl}\r\n idFieldName=\"invoiceID\"\r\n fileUploaderConfigName=\"SalesInvoice\"\r\n isReload={state.isReload}\r\n offset={props.fromPage === 'job' ? 410 : 350}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SalesInvoiceScreen;\r\n","import React, { useEffect } from 'react';\r\nimport { TabView, CustomChip } from '../../../../Core/Controls';\r\nimport VehicleDashBoard from './vehicleDash';\r\nimport NoteDashboard from './../Notes/index';\r\nimport DefectScreen from '../../Maintenance/Defects/defectScreen';\r\nimport BreakDownDashboard from '../../Maintenance/BreakDown/breakDownDashboard';\r\nimport ScheduleDashboard from './ScheduleVehicle/scheduleVehicle';\r\nimport JobScreen from '../JOBS/JobScreen';\r\nimport VehicleJourneys from './VehicleJourneys';\r\nimport FuelPurchaseDashboard from './../FuelPurchaseTab';\r\nimport DriverDailyChecksGrid from './DriverDailyChecks';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DefaultMesaage from './Message/index';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport MileageLog from '../MileageLog/mileageLog';\r\nimport { useState } from 'react';\r\nimport VorScreen from '../VOR/VorIndex';\r\nimport { getTitleData } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useLoader } from '../../../../Core/Hooks/useLoader';\r\nimport AddVor from '../VOR/AddEditVor';\r\nimport InvoiceScreen from '../../Invoices';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport ScheduleCalender from '../../../ServiceAgent/Schedules/ScheduleDashboard';\r\nimport ContractDash from '../Vehicles/Contract/index';\r\nimport VehicleRecalls from './VehicleRecall/index';\r\nimport SalesInvoiceScreen from '../../Invoices/salesInvoice';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\n\r\nexport default function EditVehicle(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { userRoles } = useLoginInfo();\r\n const isCustomer = userRoles.includes('customer');\r\n const id = props.match.params.id;\r\n const serviceAgentid = props.match.params.serviceAgentid;\r\n\r\n const { showLoader, hideLoader } = useLoader();\r\n\r\n const [tabIndex, setTabIndex] = useState(undefined);\r\n const [state, setState] = useState({\r\n desc: '',\r\n vorID: null,\r\n loader: true,\r\n regNumber: '',\r\n vehiclePrimaryServiceAgentID: null,\r\n vehicleContractID: null\r\n });\r\n const selectTabIndex = (index) => {\r\n var d = new Date();\r\n var n = d.getTime();\r\n setState((st) => ({ ...st, timeDependency: n }));\r\n setTabIndex(index);\r\n };\r\n\r\n const pullDetails = async () => {\r\n showLoader();\r\n let res = await getTitleData(id);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n setState((st) => ({\r\n ...st,\r\n desc: data?.vehicleDescription,\r\n vorID: data?.vorVehicleID,\r\n loader: false,\r\n vehicleContractID: data.vehicleContractID,\r\n regNumber: data?.vehicleDescription.split('-')[0].trim(),\r\n vehiclePrimaryServiceAgentID: data?.vehiclePrimaryServiceAgentID\r\n }));\r\n hideLoader();\r\n } else {\r\n hideLoader();\r\n }\r\n };\r\n\r\n const closeAddPopUp = (flag, name) => {\r\n setState((st) => ({ ...st, showVORPopup: false }));\r\n flag && pullDetails();\r\n };\r\n\r\n const handleAddPopUp = () => {\r\n setState((st) => ({ ...st, showVORPopup: true }));\r\n };\r\n\r\n const tabs = [\r\n {\r\n label: 'Dashboard',\r\n body: Estimates Screen
\r\n // },\r\n\r\n {\r\n label: 'Jobs',\r\n body: (\r\n <>\r\n\r\n \r\n \r\n {state.desc?.toUpperCase() || ''} \r\n \r\n {state.vorID && (\r\n \r\n handleAddPopUp(data.VehicleID, 'showVORPopup')} className=\"btn-m\" /> */}\r\n \r\n )}\r\n \r\n closeAddPopUp(false)}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n
\r\n );\r\n}\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllVehicle } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { AddButton, EditButton, DataGrid, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport AddEditVehicle from './addEditVehicle';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport EditVehicle from './editVehicle';\r\nimport { Link } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport '../../../commonStyle.scss';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport ReactDOM from 'react-dom';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport CustomerDetails from '../DetailsModal/customerDetails';\r\nimport DepotDetails from '../DetailsModal/depotDetails';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nimport Switch from '@material-ui/core/Switch';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 80,\r\n\r\n addFileUploaderIcon: true\r\n },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 90 },\r\n { key: 'vehicleMakeModel', name: 'Vehicle Description', width: 220 },\r\n {\r\n key: 'vehicleDateOfRegistration',\r\n name: 'Date Of Reg',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n },\r\n {\r\n key: 'vehicleMOTExpiry',\r\n name: 'MOT Expiry',\r\n formatter: formatters.dueDateFormatter,\r\n width: 90\r\n },\r\n {\r\n key: 'vehicleTaxDue',\r\n name: 'Tax Due',\r\n formatter: formatters.dueDateFormatter,\r\n width: 90\r\n },\r\n { key: 'mileage', name: 'Mileage', width: 90 },\r\n { key: 'driver', name: 'Driver', width: 90 },\r\n { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'endUser', name: 'End User' }\r\n];\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', path: '/controller/Vehicles/:all', active: true }\r\n];\r\n\r\nconst VehicleScreen = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { showToastError } = useToast();\r\n const [state, setState] = useState({\r\n show: false,\r\n showEditPopup: false,\r\n showLoader: true,\r\n vehicleList: [],\r\n VehicleID: null,\r\n isReload: null,\r\n\r\n activeToggle: true\r\n });\r\n\r\n let history = useHistory();\r\n\r\n const pullVehicleAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let url = props.location.pathname;\r\n let urlIndex = url.lastIndexOf('/') + 1;\r\n let filterID = '';\r\n if (url[urlIndex] === ':' || url[urlIndex] === undefined || url[urlIndex] === null) {\r\n filterID = '';\r\n } else {\r\n filterID = url[urlIndex];\r\n }\r\n setState((st) => ({\r\n ...st,\r\n filterID: filterID\r\n }));\r\n }, [props.location.pathname]);\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n VehicleID: record?.vehicleID\r\n }));\r\n };\r\n\r\n const closeVehicleModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullVehicleAndUpdateState();\r\n };\r\n\r\n const closeByBredCrumb = () => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const dataFormatter = (id, val) => {\r\n return (\r\n \r\n {state.show ? (\r\n closeVehicleModal(true)} crumbClose={closeByBredCrumb} />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n onBtnClick={handleAdd}\r\n btnTitle={`${checkhaveAccess?.CanUpdateVehicles ? 'Add Vehicle' : ''}`}\r\n />\r\n \r\n )}\r\n {state.showEditPopup ? \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default VehicleScreen;\r\n","import { FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst BookingStatusDialog = (props) => {\r\n const [state, setState] = useState({ id: null, value: \"\", isError: false });\r\n const { collectionAndDeliverID, collectionAndDeliverDescription } = props.data.selectedRowData;\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n setState((st) => ({\r\n ...st,\r\n id: collectionAndDeliverID,\r\n value: collectionAndDeliverDescription,\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n if (/[^\\s]/.test(state.value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.saveData(state);\r\n props.onClose();\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isError: true,\r\n }));\r\n }\r\n };\r\n return (\r\n <>\r\n \r\n
\r\n \r\n Archived\r\n
\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Collection And Delivery\"\r\n onBtnClick={addBtnClicked}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default BookingDelayReason;\r\n","import { FormHelperText, Grid, InputLabel } from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { InputText, SecondaryButton, SecondaryCheckbox, MandatoryField } from \"../../../../Core/Controls\";\r\nimport \"../../../commonStyle.scss\";\r\n\r\nconst EventDocumentsDialog = (props) => {\r\n const [state, setState] = useState({\r\n eventDocName: \"\",\r\n eventDocRequiredInDays: \"\",\r\n });\r\n const [errors, setErrors] = useState({});\r\n\r\n useEffect(() => {\r\n if (!props.data.isAdd) {\r\n let temp = props.data.selectedRowData;\r\n setState((st) => ({\r\n ...st,\r\n eventDocID: temp.eventDocID,\r\n eventDocName: temp.eventDocName,\r\n eventDocRequiredInDays: temp.eventDocRequiredInDays,\r\n eventDocChase: temp.eventDocChase,\r\n eventDocLegal: temp.eventDocLegal,\r\n }));\r\n }\r\n }, []);\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n\r\n if (!/[^\\s]/.test(state.eventDocName)) {\r\n err.eventDocName = true;\r\n noErrors = false;\r\n }\r\n let temp = state.eventDocRequiredInDays;\r\n if (!/[^\\s]/.test(temp)) {\r\n err.eventDocRequiredInDays = true;\r\n noErrors = false;\r\n } else if (+temp < 0) {\r\n err.eventDocRequiredInDaysN = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n const handleData = () => {\r\n if (validate()) {\r\n props.saveData(state);\r\n props.onClose();\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.type === \"checkbox\" ? temp.checked : temp.value,\r\n }));\r\n setErrors({});\r\n };\r\n const checkPrevention = (event) => {\r\n if (/[^0-9]/.test(event.key)) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Event Document\"\r\n onBtnClick={() => addBtnClicked(null)}\r\n />\r\n {state.open ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default EventDocuments;\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllVehicleTypes = async () => {\r\n let res = await getWithAuth(`vehicletypes`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleTypesById = async (id) => {\r\n let res = await getWithAuth(`vehicletypes/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVehicleTypesData = async (data) => {\r\n let res = await postWithAuth(`vehicletypes`, data);\r\n return res;\r\n};\r\n\r\nexport const getVehicleTypesDropDown = async () => {\r\n let res = await getWithAuth(`vehicletypes/Dropdowns`);\r\n return res;\r\n};\r\n","import { postWithAuth, getWithAuth } from \"../../Basic/HttpService\";\r\n\r\nexport const getAllVehicleCategories = async () => {\r\n let res = await getWithAuth(`VehicleCategories`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleCategoriesById = async (id) => {\r\n let res = await getWithAuth(`VehicleCategories/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVehicleCategoriesData = async (data) => {\r\n let res = await postWithAuth(`VehicleCategories`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText } from '@material-ui/core';\r\nimport { SecondaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getVehicleTypesById, postVehicleTypesData } from '../../../../Core/Services/InternalUser/vehicleTypeService';\r\nimport { SecondaryCheckbox, SelectBox } from '../../../../Core/Controls';\r\nimport { getAllVehicleCategories } from '../../../../Core/Services/InternalUser/vehicleCategoryService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction VehicleTypeModal(props) {\r\n const [state, setState] = useState({\r\n vehicleTypeID: null,\r\n vehicleTypeDescription: '',\r\n vehicleTypeCategoryID: '',\r\n vehicleTypeList: [],\r\n vehicleTypeActive: true,\r\n VehicleTypeRFLApplicable: true,\r\n VehicleTypeInsuranceApplicable: true,\r\n VehicleTypeMOTApplicable: true,\r\n VehicleTypeFuelCardApplicable: true,\r\n vehicleTypeMileageApplicable:false,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.vehicleTypeID) {\r\n let res = await getVehicleTypesById(props.vehicleTypeID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n vehicleTypeID: res.data.vehicleTypeID,\r\n vehicleTypeDescription: res.data.vehicleTypeDescription,\r\n vehicleTypeCategoryID: res.data.vehicleTypeCategoryID,\r\n vehicleTypeActive: res.data.vehicleTypeActive,\r\n VehicleTypeRFLApplicable: res.data.vehicleTypeRFLApplicable,\r\n VehicleTypeInsuranceApplicable: res.data.vehicleTypeInsuranceApplicable,\r\n VehicleTypeMOTApplicable: res.data.vehicleTypeMOTApplicable,\r\n VehicleTypeFuelCardApplicable: res.data.vehicleTypeFuelCardApplicable,\r\n vehicleTypeMileageApplicable:res.data.vehicleTypeMileageApplicable\r\n }));\r\n }\r\n }\r\n let vehicleCategory = await getAllVehicleCategories();\r\n if (vehicleCategory.success) {\r\n const vehiclename = vehicleCategory.data?.list?.map((item) => ({\r\n id: item.vehicleCategoryID,\r\n name: item.vehicleCategoryDescription\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n vehicleTypeList: vehiclename\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { vehicleTypeDescription, vehicleTypeCategoryID } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(vehicleTypeDescription)) {\r\n errors.vehicleTypeDescription = 'Vehicle Type Description is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(vehicleTypeCategoryID)) {\r\n errors.vehicleTypeCategoryID = 'Vehicle Category is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const vehicleData = {\r\n vehicleTypeID: state.vehicleTypeID,\r\n vehicleTypeDescription: state.vehicleTypeDescription,\r\n vehicleTypeCategoryID: state.vehicleTypeCategoryID,\r\n vehicleTypeActive: state.vehicleTypeActive,\r\n VehicleTypeRFLApplicable: state.VehicleTypeRFLApplicable,\r\n VehicleTypeInsuranceApplicable: state.VehicleTypeInsuranceApplicable,\r\n VehicleTypeMOTApplicable: state.VehicleTypeMOTApplicable,\r\n VehicleTypeFuelCardApplicable: state.VehicleTypeFuelCardApplicable,\r\n vehicleTypeMileageApplicable:state.vehicleTypeMileageApplicable\r\n };\r\n let res = await postVehicleTypesData(vehicleData);\r\n if (res.success) {\r\n showToastSuccess('VehicleType Updated sucessfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleVehicleType(row.vehicleTypeID)} toolTipTitle=\"Edit Vehicle Type\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.vehicleTypeID ? 'Update Vehicle Types' : 'Add Vehicle Types';\r\n\r\n const closeVehicleModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullVehicleType();\r\n };\r\n\r\n return (\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={'vehicletypes'}\r\n btnTitle=\"Add Vehicle Type\"\r\n onBtnClick={() => handleVehicleType(null)}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n closeVehicleModal(false)} maxWidth=\"md\">\r\n closeVehicleModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default VehicleType;\r\n","import { createContext, useEffect, useState, useCallback } from 'react';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport {\r\n getServiceAgentById,\r\n postServiceAgentData,\r\n getServiceAgentFacilities,\r\n getServiceAgentsDropDown\r\n} from '../../../Core/Services/InternalUser/ServiceAgent/serviceAgentService';\r\nimport moment from 'moment';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { emailValidation } from '../../../Core/Basic/StaticService';\r\nimport { isNull } from 'lodash';\r\nimport { formatters } from '../../../Core/Controls';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\n\r\nexport const ServiceAgentScreenContext = createContext();\r\n\r\nexport const ServiceAgentProvider = (props) => {\r\n let history = useHistory();\r\n const { userRoles } = useLoginInfo();\r\n const isAdmin = userRoles.includes('admin');\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const { showToastSuccess, showToastError } = useToast();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n errors: {},\r\n serviceAgentID: '',\r\n serviceAgentName: '',\r\n serviceAgentAddress1: '',\r\n serviceAgentAddress2: '',\r\n serviceAgentCounty: '',\r\n serviceAgentCity: '',\r\n serviceAgentPostCode: '',\r\n serviceAgentPhone: '',\r\n serviceAgentFax: '',\r\n serviceAgentEmail: '',\r\n serviceAgentWebSite: '',\r\n serviceAgentStartDate: '',\r\n serviceAgentMaintenanceContractRef: '',\r\n serviceAgentAccountCentreID: '',\r\n serviceAgentOrderEmail: '',\r\n serviceAgentCurrencyID: '',\r\n serviceAgentLabourRate: '',\r\n serviceAgentOutOfHoursLabourRate: '',\r\n serviceAgentOrderConfirmationName: '',\r\n serviceAgentOrderConfirmationPhone: '',\r\n serviceAgentSendOrderConfirmation: false,\r\n serviceAgentOrderConfirmationEmail: '',\r\n serviceAgentBookingName: '',\r\n serviceAgentBookingPhone: '',\r\n serviceAgentSendBookingEmail: false,\r\n serviceAgentBookingEmail: '',\r\n serviceAgentSendJobUpdateEmail: false,\r\n serviceAgentJobUpdateEmail: '',\r\n serviceAgentSendQueryResponseReceived: false,\r\n serviceAgentQueryResponseReceivedEmail: '',\r\n serviceAgentSendJobApprovalReceived: false,\r\n serviceAgentobApprovalReceivedEmail: '',\r\n serviceAgentNominalCode: '',\r\n serviceAgentServiceManagerName: '',\r\n serviceAgentServiceManagerPhone: '',\r\n serviceAgentServiceManagerEmail: '',\r\n handlingDefects: false,\r\n serviceAgentActive: true,\r\n hasInspectionSheetControl: false,\r\n serviceAgentOpenMonday: true,\r\n serviceAgentMondayOpeningTime: '',\r\n serviceAgentMondayClosingTime: '',\r\n serviceAgentOpenTuesday: true,\r\n serviceAgentTuesdayOpeningTime: '',\r\n serviceAgentTuesdayClosingTime: '',\r\n serviceAgentOpenWednesday: true,\r\n serviceAgentWednesdayOpeningTime: '',\r\n serviceAgentWednesdayClosingTime: '',\r\n serviceAgentOpenThursday: true,\r\n serviceAgentThursdayOpeningTime: '',\r\n serviceAgentThursdayClosingTime: '',\r\n serviceAgentOpenFriday: true,\r\n serviceAgentFridayOpeningTime: '',\r\n serviceAgentFridayClosingTime: '',\r\n serviceAgentOpenSaturday: true,\r\n serviceAgentSaturdayOpeningTime: '',\r\n serviceAgentSaturdayClosingTime: '',\r\n serviceAgentOpenSunday: true,\r\n serviceAgentSundayOpeningTime: '',\r\n serviceAgentSundayClosingTime: '',\r\n serviceAgentOpenBankHoliday: true,\r\n serviceAgentBankHolidayOpeningTime: '',\r\n serviceAgentBankHolidayClosingTime: '',\r\n serviceAgentFacilitieslist: [],\r\n serviceAgentFacilities: [],\r\n serviceAgentFacilitiId: [],\r\n isDisable: false,\r\n serviceAgentCurrencyIDList: [],\r\n serviceAgentCurrencyIDValue: null,\r\n serviceAgentPaymentDays: null,\r\n serviceAgentPaymentDaysValue: null,\r\n serviceAgentPaymentDaysList: [\r\n { name: '30 Days', id: 30 },\r\n { name: '45 Days', id: 45 },\r\n { name: '60 Days', id: 60 },\r\n { name: '90 Days', id: 90 }\r\n ]\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n modules: []\r\n });\r\n\r\n function pad(d) {\r\n return d < 10 ? '0' + d.toFixed(2).replace('.', ':') : d.toFixed(2).replace('.', ':');\r\n }\r\n\r\n function padValue(val) {\r\n if (val) {\r\n return pad(val);\r\n }\r\n return '';\r\n }\r\n\r\n useEffect(async () => {\r\n if (props.serviceAgentID) {\r\n let res = await getServiceAgentById(props.serviceAgentID);\r\n const data = res.data.details[0];\r\n const facilitiesData = res.data;\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentID: data.serviceAgentID,\r\n serviceAgentName: data.serviceAgentName,\r\n serviceAgentAddress1: data.serviceAgentAddress1,\r\n serviceAgentAddress2: data.serviceAgentAddress2,\r\n serviceAgentCounty: data.serviceAgentCounty,\r\n serviceAgentCity: data.serviceAgentCity,\r\n serviceAgentPostCode: data.serviceAgentPostCode,\r\n serviceAgentPhone: data.serviceAgentPhone,\r\n serviceAgentFax: data.serviceAgentFax,\r\n serviceAgentEmail: data.serviceAgentEmail,\r\n serviceAgentWebSite: data.serviceAgentWebSite,\r\n serviceAgentStartDate: formatters.DateFormatter(data.serviceAgentStartDate),\r\n serviceAgentMaintenanceContractRef: data.serviceAgentMaintenanceContractRef,\r\n serviceAgentAccountCentreID: data.serviceAgentAccountCentreID,\r\n serviceAgentOrderEmail: data.serviceAgentOrderEmail,\r\n serviceAgentCurrencyID: data.serviceAgentCurrencyID,\r\n serviceAgentLabourRate: data.serviceAgentLabourRate,\r\n serviceAgentOutOfHoursLabourRate: data.serviceAgentOutOfHoursLabourRate,\r\n serviceAgentOrderConfirmationName: data.serviceAgentOrderConfirmationName,\r\n serviceAgentOrderConfirmationPhone: data.serviceAgentOrderConfirmationPhone,\r\n serviceAgentSendOrderConfirmation: data.serviceAgentSendOrderConfirmation,\r\n serviceAgentOrderConfirmationEmail: data.serviceAgentOrderConfirmationEmail,\r\n serviceAgentBookingName: data.serviceAgentBookingName,\r\n serviceAgentBookingPhone: data.serviceAgentBookingPhone,\r\n serviceAgentSendBookingEmail: data.serviceAgentSendBookingEmail,\r\n serviceAgentBookingEmail: data.serviceAgentBookingEmail,\r\n serviceAgentSendJobUpdateEmail: data.serviceAgentSendJobUpdateEmail,\r\n serviceAgentJobUpdateEmail: data.serviceAgentJobUpdateEmail,\r\n serviceAgentSendQueryResponseReceived: data.serviceAgentSendQueryResponseReceived,\r\n serviceAgentQueryResponseReceivedEmail: data.serviceAgentQueryResponseReceivedEmail,\r\n serviceAgentSendJobApprovalReceived: data.serviceAgentSendJobApprovalReceived,\r\n serviceAgentobApprovalReceivedEmail: data.serviceAgentobApprovalReceivedEmail,\r\n serviceAgentNominalCode: data.serviceAgentNominalCode,\r\n serviceAgentServiceManagerName: data.serviceAgentServiceManagerName,\r\n serviceAgentServiceManagerPhone: data.serviceAgentServiceManagerPhone,\r\n serviceAgentServiceManagerEmail: data.serviceAgentServiceManagerEmail,\r\n handlingDefects: data.handlingDefects,\r\n serviceAgentActive: data.serviceAgentActive,\r\n hasInspectionSheetControl: data.hasInspectionSheetControl,\r\n serviceAgentRating: data.serviceAgentRating,\r\n serviceAgentFacilitiId: facilitiesData.serviceAgentFacilities,\r\n\r\n serviceAgentOpenMonday: data.serviceAgentOpenMonday,\r\n serviceAgentMondayOpeningTime: padValue(data.serviceAgentMondayOpeningTime),\r\n serviceAgentMondayClosingTime: padValue(data.serviceAgentMondayClosingTime),\r\n serviceAgentOpenTuesday: data.serviceAgentOpenTuesday,\r\n serviceAgentTuesdayOpeningTime: padValue(data.serviceAgentTuesdayOpeningTime),\r\n serviceAgentTuesdayClosingTime: padValue(data.serviceAgentTuesdayClosingTime),\r\n serviceAgentOpenWednesday: data.serviceAgentOpenWednesday,\r\n serviceAgentWednesdayOpeningTime: padValue(data.serviceAgentWednesdayOpeningTime),\r\n serviceAgentWednesdayClosingTime: padValue(data.serviceAgentWednesdayClosingTime),\r\n serviceAgentOpenThursday: data.serviceAgentOpenThursday,\r\n serviceAgentThursdayOpeningTime: padValue(data.serviceAgentThursdayOpeningTime),\r\n serviceAgentThursdayClosingTime: padValue(data.serviceAgentThursdayClosingTime),\r\n serviceAgentOpenFriday: data.serviceAgentOpenFriday,\r\n serviceAgentFridayOpeningTime: padValue(data.serviceAgentFridayOpeningTime),\r\n serviceAgentFridayClosingTime: padValue(data.serviceAgentFridayClosingTime),\r\n serviceAgentOpenSaturday: data.serviceAgentOpenSaturday,\r\n serviceAgentSaturdayOpeningTime: padValue(data.serviceAgentSaturdayOpeningTime),\r\n serviceAgentSaturdayClosingTime: padValue(data.serviceAgentSaturdayClosingTime),\r\n serviceAgentOpenSunday: data.serviceAgentOpenSunday,\r\n serviceAgentSundayOpeningTime: padValue(data.serviceAgentSundayOpeningTime),\r\n serviceAgentSundayClosingTime: padValue(data.serviceAgentSundayClosingTime),\r\n serviceAgentOpenBankHoliday: data.serviceAgentOpenBankHoliday,\r\n serviceAgentBankHolidayOpeningTime: padValue(data.serviceAgentBankHolidayOpeningTime),\r\n serviceAgentBankHolidayClosingTime: padValue(data.serviceAgentBankHolidayClosingTime),\r\n serviceAgentPaymentDays: data.serviceAgentPaymentDays,\r\n serviceAgentAccountCode: data.serviceAgentAccountCode,\r\n\r\n //\r\n isDisable: !checkhaveAccess?.CanUpdateServiceAgents\r\n }));\r\n }\r\n\r\n let dropDownlist = await getServiceAgentsDropDown();\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentFacilitieslist: dropDownlist.data.serviceAgentFacilities,\r\n serviceAgentCurrencyIDList: dropDownlist.data.currencies\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (state.serviceAgentFacilitiId) {\r\n const selectedServiceAgent = state.serviceAgentFacilitieslist.filter((w) => state.serviceAgentFacilitiId.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({\r\n ...st,\r\n modules: selectedServiceAgent\r\n }));\r\n }\r\n }, [state.serviceAgentFacilitiId, state.serviceAgentFacilitieslist]);\r\n\r\n useEffect(() => {\r\n let serviceAgentCurrencyIDValue = null;\r\n let serviceAgentPaymentDaysValue = null;\r\n if (state.serviceAgentPaymentDays) {\r\n serviceAgentPaymentDaysValue = state.serviceAgentPaymentDaysList.find(({ id }) => id === state.serviceAgentPaymentDays);\r\n }\r\n if (state.serviceAgentCurrencyID && state.serviceAgentCurrencyIDList.length > 0) {\r\n serviceAgentCurrencyIDValue = state.serviceAgentCurrencyIDList.find(({ id }) => id === state.serviceAgentCurrencyID);\r\n } else {\r\n serviceAgentCurrencyIDValue = state.serviceAgentCurrencyIDList[0];\r\n }\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentCurrencyIDValue: serviceAgentCurrencyIDValue,\r\n serviceAgentPaymentDaysValue: serviceAgentPaymentDaysValue\r\n }));\r\n }, [state.serviceAgentCurrencyID, state.serviceAgentCurrencyIDList]);\r\n\r\n const checkNull = (param) => {\r\n if (/[^\\s]/.test(param)) {\r\n return param;\r\n } else {\r\n return null;\r\n }\r\n };\r\n const resetInput = (name) => {\r\n setState((st) => ({ ...st, [name]: '' }));\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 singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const setAllTime = (isOpenClose) => {\r\n if (isOpenClose === 'open') {\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentTuesdayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentWednesdayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentThursdayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentFridayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentSaturdayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentSundayOpeningTime: state.serviceAgentMondayOpeningTime,\r\n serviceAgentBankHolidayOpeningTime: state.serviceAgentMondayOpeningTime\r\n }));\r\n }\r\n if (isOpenClose === 'close') {\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentTuesdayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentWednesdayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentThursdayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentFridayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentSaturdayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentSundayClosingTime: state.serviceAgentMondayClosingTime,\r\n serviceAgentBankHolidayClosingTime: state.serviceAgentMondayClosingTime\r\n }));\r\n }\r\n };\r\n\r\n const ModuleChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, modules: value }));\r\n setState((st) => {\r\n const nst = { ...st, serviceAgentFacilitiId: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const selectHandler = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => ({ ...state, [name]: checked }));\r\n };\r\n\r\n const setVal = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n serviceAgentAddress1: s.addressLine1,\r\n serviceAgentAddress2: s.addressLine2,\r\n serviceAgentCity: s.town,\r\n serviceAgentCounty: s.county,\r\n serviceAgentPostCode: s.postCode\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const {\r\n serviceAgentAddress1,\r\n serviceAgentCity,\r\n serviceAgentPostCode,\r\n serviceAgentCurrencyIDValue,\r\n serviceAgentEmail,\r\n serviceAgentName,\r\n serviceAgentSendJobApprovalReceived,\r\n serviceAgentobApprovalReceivedEmail,\r\n serviceAgentSendQueryResponseReceived,\r\n serviceAgentQueryResponseReceivedEmail,\r\n serviceAgentSendOrderConfirmation,\r\n serviceAgentOrderConfirmationEmail,\r\n serviceAgentSendBookingEmail,\r\n serviceAgentBookingEmail,\r\n serviceAgentSendJobUpdateEmail,\r\n serviceAgentJobUpdateEmail,\r\n serviceAgentServiceManagerEmail\r\n } = state;\r\n const re =\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 let formIsValid = true;\r\n let errors = {};\r\n if (!emailValidation(serviceAgentEmail)) {\r\n errors.serviceAgentEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n } else if (!re.test(serviceAgentEmail)) {\r\n errors.serviceAgentEmail = \"Emai must be contain '@'\";\r\n formIsValid = false;\r\n }\r\n if (!serviceAgentAddress1) {\r\n errors.serviceAgentAddress1 = 'Address1 is required';\r\n formIsValid = false;\r\n }\r\n if (!serviceAgentCity) {\r\n errors.serviceAgentCity = 'City is required';\r\n formIsValid = false;\r\n }\r\n if (!serviceAgentPostCode) {\r\n errors.serviceAgentPostCode = 'Post Code is required';\r\n formIsValid = false;\r\n }\r\n if (!serviceAgentCurrencyIDValue) {\r\n errors.serviceAgentCurrencyIDValue = 'Currency is required';\r\n formIsValid = false;\r\n }\r\n if (!serviceAgentName) {\r\n errors.serviceAgentName = 'Name is required';\r\n formIsValid = false;\r\n }\r\n if (!emailValidation(serviceAgentServiceManagerEmail) && /[^\\s]/.test(serviceAgentServiceManagerEmail) && !isNull(serviceAgentServiceManagerEmail)) {\r\n errors.serviceAgentServiceManagerEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n\r\n if (serviceAgentSendJobApprovalReceived && !emailValidation(serviceAgentobApprovalReceivedEmail) && !isNull(serviceAgentobApprovalReceivedEmail)) {\r\n errors.serviceAgentobApprovalReceivedEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (serviceAgentSendOrderConfirmation && !emailValidation(serviceAgentOrderConfirmationEmail) && !isNull(serviceAgentOrderConfirmationEmail)) {\r\n errors.serviceAgentOrderConfirmationEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n\r\n if (serviceAgentSendBookingEmail && !emailValidation(serviceAgentBookingEmail) && !isNull(serviceAgentBookingEmail)) {\r\n errors.serviceAgentBookingEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (serviceAgentSendJobUpdateEmail && !emailValidation(serviceAgentJobUpdateEmail) && !isNull(serviceAgentJobUpdateEmail)) {\r\n errors.serviceAgentJobUpdateEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (\r\n serviceAgentSendQueryResponseReceived &&\r\n !emailValidation(serviceAgentQueryResponseReceivedEmail) &&\r\n !isNull(serviceAgentQueryResponseReceivedEmail)\r\n ) {\r\n errors.serviceAgentQueryResponseReceivedEmail = 'Please Enter a valid 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 submitHandler = async () => {\r\n if (validations()) {\r\n const formData = {\r\n serviceAgentID: state.serviceAgentID,\r\n serviceAgentName: state.serviceAgentName,\r\n serviceAgentAddress1: state.serviceAgentAddress1,\r\n serviceAgentAddress2: state.serviceAgentAddress2,\r\n serviceAgentCounty: state.serviceAgentCounty, //state change kar\r\n serviceAgentCity: state.serviceAgentCity,\r\n serviceAgentPostCode: state.serviceAgentPostCode,\r\n serviceAgentPhone: state.serviceAgentPhone,\r\n serviceAgentFax: state.serviceAgentFax,\r\n serviceAgentEmail: state.serviceAgentEmail,\r\n serviceAgentWebSite: state.serviceAgentWebSite,\r\n serviceAgentStartDate: state.serviceAgentStartDate,\r\n serviceAgentMaintenanceContractRef: state.serviceAgentMaintenanceContractRef,\r\n serviceAgentAccountCentreID: state.serviceAgentAccountCentreID,\r\n serviceAgentOrderEmail: state.serviceAgentOrderEmail,\r\n serviceAgentCurrencyID: state.serviceAgentCurrencyIDValue?.id,\r\n serviceAgentLabourRate: state.serviceAgentLabourRate,\r\n serviceAgentOutOfHoursLabourRate: state.serviceAgentOutOfHoursLabourRate,\r\n serviceAgentOrderConfirmationName: state.serviceAgentOrderConfirmationName,\r\n serviceAgentOrderConfirmationPhone: state.serviceAgentOrderConfirmationPhone,\r\n serviceAgentSendOrderConfirmation: state.serviceAgentSendOrderConfirmation,\r\n serviceAgentOrderConfirmationEmail: state.serviceAgentOrderConfirmationEmail,\r\n serviceAgentBookingName: state.serviceAgentBookingName,\r\n serviceAgentBookingPhone: state.serviceAgentBookingPhone,\r\n serviceAgentSendBookingEmail: state.serviceAgentSendBookingEmail,\r\n serviceAgentBookingEmail: state.serviceAgentBookingEmail,\r\n serviceAgentSendJobUpdateEmail: state.serviceAgentSendJobUpdateEmail,\r\n serviceAgentJobUpdateEmail: state.serviceAgentJobUpdateEmail,\r\n serviceAgentSendQueryResponseReceived: state.serviceAgentSendQueryResponseReceived,\r\n serviceAgentQueryResponseReceivedEmail: state.serviceAgentQueryResponseReceivedEmail,\r\n serviceAgentSendJobApprovalReceived: state.serviceAgentSendJobApprovalReceived,\r\n serviceAgentobApprovalReceivedEmail: state.serviceAgentobApprovalReceivedEmail,\r\n serviceAgentNominalCode: state.serviceAgentNominalCode,\r\n serviceAgentServiceManagerName: state.serviceAgentServiceManagerName,\r\n serviceAgentServiceManagerPhone: state.serviceAgentServiceManagerPhone,\r\n serviceAgentServiceManagerEmail: state.serviceAgentServiceManagerEmail,\r\n handlingDefects: state.handlingDefects,\r\n serviceAgentActive: state.serviceAgentActive,\r\n hasInspectionSheetControl: state.hasInspectionSheetControl,\r\n serviceAgentPaymentDays: state.serviceAgentPaymentDaysValue?.id,\r\n serviceAgentAccountCode: state.serviceAgentAccountCode,\r\n serviceAgentFacilities: state.serviceAgentFacilitiId,\r\n\r\n serviceAgentOpenMonday: state.serviceAgentOpenMonday,\r\n serviceAgentMondayOpeningTime: state.serviceAgentMondayOpeningTime ? state.serviceAgentMondayOpeningTime.replace(':', '.') : '',\r\n serviceAgentMondayClosingTime: state.serviceAgentMondayClosingTime ? state.serviceAgentMondayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenTuesday: state.serviceAgentOpenTuesday,\r\n serviceAgentTuesdayOpeningTime: state.serviceAgentTuesdayOpeningTime ? state.serviceAgentTuesdayOpeningTime.replace(':', '.') : '',\r\n serviceAgentTuesdayClosingTime: state.serviceAgentTuesdayClosingTime ? state.serviceAgentTuesdayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenWednesday: state.serviceAgentOpenWednesday,\r\n serviceAgentWednesdayOpeningTime: state.serviceAgentWednesdayOpeningTime ? state.serviceAgentWednesdayOpeningTime.replace(':', '.') : '',\r\n serviceAgentWednesdayClosingTime: state.serviceAgentWednesdayClosingTime ? state.serviceAgentWednesdayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenThursday: state.serviceAgentOpenThursday,\r\n serviceAgentThursdayOpeningTime: state.serviceAgentThursdayOpeningTime ? state.serviceAgentThursdayOpeningTime.replace(':', '.') : '',\r\n serviceAgentThursdayClosingTime: state.serviceAgentThursdayClosingTime ? state.serviceAgentThursdayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenFriday: state.serviceAgentOpenFriday,\r\n serviceAgentFridayOpeningTime: state.serviceAgentFridayOpeningTime ? state.serviceAgentFridayOpeningTime.replace(':', '.') : '',\r\n serviceAgentFridayClosingTime: state.serviceAgentFridayClosingTime ? state.serviceAgentFridayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenSaturday: state.serviceAgentOpenSaturday,\r\n serviceAgentSaturdayOpeningTime: state.serviceAgentSaturdayOpeningTime ? state.serviceAgentSaturdayOpeningTime.replace(':', '.') : '',\r\n serviceAgentSaturdayClosingTime: state.serviceAgentSaturdayClosingTime ? state.serviceAgentSaturdayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenSunday: state.serviceAgentOpenSunday,\r\n serviceAgentSundayOpeningTime: state.serviceAgentSundayOpeningTime ? state.serviceAgentSundayOpeningTime.replace(':', '.') : '',\r\n serviceAgentSundayClosingTime: state.serviceAgentSundayClosingTime ? state.serviceAgentSundayClosingTime.replace(':', '.') : '',\r\n serviceAgentOpenBankHoliday: state.serviceAgentOpenBankHoliday,\r\n serviceAgentBankHolidayOpeningTime: state.serviceAgentBankHolidayOpeningTime ? state.serviceAgentBankHolidayOpeningTime.replace(':', '.') : '',\r\n serviceAgentBankHolidayClosingTime: state.serviceAgentBankHolidayClosingTime ? state.serviceAgentBankHolidayClosingTime.replace(':', '.') : ''\r\n };\r\n setBtnLoader(true);\r\n let res = await postServiceAgentData(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onFormSubmit(true);\r\n history.push(`/serviceagent`);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n return (\r\n \r\n
\r\n
\r\n
\r\n handleEditClick(row)} />\r\n
\r\n );\r\n };\r\n\r\n const renderRating = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n rowSelctedValues(row)} style={{ cursor: 'pointer', color: '#f50057' }}>\r\n {row.serviceAgentAddress}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderPhone = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = {formatters.phoneNumberFormatter(row.serviceAgentPhone)}
;\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 ratingCol = tempCols.find((element) => element.key === 'serviceAgentRating');\r\n let agentAddressCol = tempCols.find((element) => element.key === 'serviceAgentAddress');\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n let phoneCol = tempCols.find((element) => element.key === 'serviceAgentPhone');\r\n\r\n if (phoneCol) {\r\n phoneCol.formatter = renderPhone;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (ratingCol) {\r\n ratingCol.formatter = renderRating;\r\n }\r\n if (agentAddressCol) {\r\n agentAddressCol.formatter = renderAgentAddress;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const rowSelctedValues = (row) => {\r\n setState((st) => ({\r\n ...st,\r\n gooleSearchValue: row.serviceAgentName,\r\n showGoogleValue: true\r\n }));\r\n };\r\n\r\n const closeGoogleSerach = () => {\r\n setState((st) => ({\r\n ...st,\r\n showGoogleValue: false,\r\n showMap: false\r\n }));\r\n };\r\n\r\n const pullAllServiceAgent = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleAdd = () => {\r\n setState((st) => ({\r\n ...st,\r\n show: true\r\n }));\r\n };\r\n\r\n const closeServiceAgentModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullAllServiceAgent();\r\n };\r\n\r\n const handleUpdateLocation = (location) => {\r\n setState((st) => ({ ...st, breakDownLocation: location, showMap: false }));\r\n };\r\n\r\n const handleShowLocation = (id) => {\r\n setState((st) => ({ ...st, showMap: true }));\r\n\r\n // history.push(`/controller/getagentLocation/${state.breakDownLocation}`);\r\n };\r\n\r\n const showRatingModal = (data) => (name, value) => {\r\n setState((st) => ({\r\n ...st,\r\n showRating: true,\r\n selectedRatingValue: value,\r\n serviceAgentID: data.serviceAgentID\r\n }));\r\n };\r\n\r\n const closeRatingModal = (value) => {\r\n setState((st) => ({\r\n ...st,\r\n showRating: false\r\n }));\r\n value && pullAllServiceAgent();\r\n };\r\n\r\n const ratingSubmit = async (value) => {\r\n let ratingData = {\r\n serviceAgentID: state.serviceAgentID,\r\n serviceAgentRating: state.selectedRatingValue\r\n };\r\n let res = await postServiceAgentRating(ratingData);\r\n if (res.success) {\r\n showToastSuccess(res.data.message);\r\n closeRatingModal(true);\r\n } else {\r\n showToastError(res.data.message);\r\n }\r\n };\r\n\r\n const reGenrateMap = async () => {\r\n let res = await getMapNewData();\r\n if (res.data.success) {\r\n showToastSuccess(res.data.message);\r\n } else {\r\n showToastError(res.data.message);\r\n }\r\n };\r\n\r\n let getUrl = `ServiceAgents`;\r\n const title = state.subCategoryId ? 'Update Service Agent' : 'Add Service Agent';\r\n const btnTitle = checkhaveAccess?.CanUpdateServiceAgents ? 'Add Service Agent' : null;\r\n const mapBtnTitle = !isAdmin ? 'Map' : null;\r\n return (\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 {state.show ? (\r\n // closeServiceAgentModal(false)} overflow=\"auto\" maxWidth=\"lg\">\r\n closeServiceAgentModal(true)} />\r\n ) : !state.showGoogleValue ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n btnTitle={btnTitle}\r\n onBtnClick={handleAdd}\r\n isReload={state.isReload}\r\n idFieldName=\"serviceAgentID\"\r\n fileUploaderConfigName=\"ServiceAgentScreen\"\r\n // mapBtnToolTipTitle={mapBtnTitle}\r\n // mapBtnIcon={RoomIcon}\r\n // mapBtnLabel={mapBtnTitle}\r\n // onMapBtnClick={handleShowLocation}\r\n />\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n )}\r\n {state.showMap ? (\r\n closeRatingModal(false)} maxWidth=\"sm\">\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ServiceAgent;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { EditButton, SimpleRating } from '../../../Core/Controls';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { ServiceAgentProvider as StateProvider, ServiceAgentScreenContext } from './ServiceAgentProvider';\r\nimport AddEditServiceAgent from './addEditServiceAgent';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { Button } from '@material-ui/core';\r\nimport './serviceAgent.scss';\r\nimport StickyNotes from '../Controllers/Notes/stickyNotes';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport { CustomChip, formatters } from '../../../Core/Controls';\r\nimport FileUploaderButton from '../../../Core/Controls/GenericFileUploader';\r\n\r\nexport const ServiceAgentDashboard = (props) => {\r\n const { state, selectedData } = useContext(ServiceAgentScreenContext);\r\n\r\n const [data, setData] = useState({\r\n show: false,\r\n serviceAgentID: null\r\n });\r\n\r\n useEffect(() => {\r\n if (props.serviceAgentID) {\r\n setData((st) => ({\r\n ...st,\r\n serviceAgentID: props.serviceAgentID\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleAdd = (record) => {\r\n setData((st) => ({\r\n ...st,\r\n show: true,\r\n serviceAgentID: record\r\n }));\r\n };\r\n\r\n const closeVehicleModal = () => {\r\n setData((st) => ({\r\n ...st,\r\n show: !data.show\r\n }));\r\n };\r\n\r\n const isNullCheck = (val) => {\r\n if (val) {\r\n return val;\r\n }\r\n return 'N/A';\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n {data.show ? (\r\n \r\n \r\n \r\n \r\n \r\n Service Agent Details\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {isNullCheck(state.serviceAgentName)} \r\n \r\n \r\n \r\n {`\r\n ${state.serviceAgentAddress1 ? state.serviceAgentAddress1 : ''}\r\n ${state.serviceAgentAddress2 ? state.serviceAgentAddress2 : ''}\r\n ${state.serviceAgentCity ? state.serviceAgentCity : ''}\r\n ${state.serviceAgentPostCode ? state.serviceAgentPostCode : ''}`}\r\n \r\n \r\n \r\n {isNullCheck(state.serviceAgentLabourRate)} \r\n {/* {state.serviceAgentLabourRate} */}\r\n \r\n \r\n \r\n \r\n {isNullCheck(state.serviceAgentOutOfHoursLabourRate)} \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.serviceAgentPhone)} \r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.serviceAgentEmail)} \r\n \r\n \r\n {isNullCheck(state.serviceAgentServiceManagerName)} \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.serviceAgentServiceManagerPhone)} \r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.serviceAgentServiceManagerEmail)} \r\n \r\n \r\n {isNullCheck(state.serviceAgentOrderConfirmationName)} \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.serviceAgentOrderConfirmationPhone)} \r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.serviceAgentOrderConfirmationEmail)} \r\n \r\n \r\n {selectedData.modules.map((p) => `${p.name}`).join(', ')} \r\n \r\n \r\n \r\n\r\n
\r\n\r\n\r\n \r\n \r\n Opening Times\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Monday\r\n \r\n \r\n \r\n {state.serviceAgentOpenMonday ? \r\n \r\n \r\n {state.serviceAgentMondayOpeningTime} \r\n \r\n \r\n {state.serviceAgentMondayClosingTime} \r\n \r\n \r\n \r\n \r\n Tuesday\r\n \r\n \r\n \r\n {state.serviceAgentOpenTuesday ? \r\n \r\n \r\n {state.serviceAgentTuesdayOpeningTime} \r\n \r\n \r\n {state.serviceAgentTuesdayClosingTime} \r\n \r\n \r\n \r\n \r\n Wednesday\r\n \r\n \r\n \r\n {state.serviceAgentOpenWednesday ? \r\n \r\n \r\n {state.serviceAgentWednesdayOpeningTime} \r\n \r\n \r\n {state.serviceAgentWednesdayClosingTime} \r\n \r\n \r\n \r\n \r\n Thursday\r\n \r\n \r\n \r\n {state.serviceAgentOpenThursday ? \r\n \r\n \r\n {state.serviceAgentThursdayOpeningTime} \r\n \r\n \r\n {state.serviceAgentThursdayClosingTime} \r\n \r\n \r\n \r\n \r\n Friday\r\n \r\n \r\n \r\n {state.serviceAgentOpenFriday ? \r\n \r\n \r\n {state.serviceAgentFridayOpeningTime} \r\n \r\n \r\n {state.serviceAgentFridayClosingTime} \r\n \r\n \r\n \r\n \r\n Saturday\r\n \r\n \r\n \r\n {state.serviceAgentOpenSaturday ? \r\n \r\n \r\n {state.serviceAgentSaturdayOpeningTime} \r\n \r\n \r\n {state.serviceAgentSaturdayClosingTime} \r\n \r\n \r\n \r\n \r\n Sunday\r\n \r\n \r\n \r\n {state.serviceAgentOpenSunday ? \r\n \r\n \r\n {state.serviceAgentSundayOpeningTime} \r\n \r\n \r\n {state.serviceAgentSundayClosingTime} \r\n \r\n \r\n \r\n \r\n Bank Holiday\r\n \r\n \r\n \r\n {state.serviceAgentOpenBankHoliday ? \r\n \r\n \r\n {state.serviceAgentBankHolidayOpeningTime} \r\n \r\n \r\n {state.serviceAgentBankHolidayClosingTime} \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n \r\n handleAdd(data.serviceAgentID)}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n ) : null}\r\n
\r\n \r\n Name \r\n
\r\n \r\n Address \r\n
\r\n \r\n Labour Rate \r\n
\r\n \r\n Out Of Hour Labour Rate \r\n
\r\n \r\n Phone \r\n
\r\n \r\n E-mail \r\n
\r\n \r\n Service Manager Name \r\n
\r\n \r\n Service Manager Phone \r\n
\r\n \r\n Service Manager Email \r\n
\r\n \r\n Order Confirmation \r\n
\r\n \r\n Order Confirmation Phone \r\n
\r\n \r\n Order Confirmation Email \r\n
\r\n \r\n Service Agent Facilities \r\n
\r\n \r\n\r\n
\r\n
\r\n Open \r\n
\r\n \r\n Opening Time \r\n
\r\n \r\n Closing Time \r\n
\r\n \r\n
\r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/mileageimportsample.070679a6.xlsx\";","import React, { useState } from 'react';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport { Grid, Paper, TableContainer, Table, TableBody, TableRow, TableCell } from '@material-ui/core';\r\nimport { postImportMileage } from '../../../../../Core/Services/InternalUser/ControllerService/customerService';\r\nimport { SecondaryButton } from '../../../../../Core/Controls';\r\nimport { InputLabel, Typography } from '@material-ui/core';\r\nimport { FormHelperText } from '@material-ui/core';\r\nimport downloadFile from '../../../../../Template/mileageimportsample.xlsx';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { DataGrid } from '../../../../../Core/Controls';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 16,\r\n padding: '8px 20px',\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '8px 20px'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: '#F5F5F5'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n fontSize: '25px',\r\n color: '#f50057',\r\n fontWeight: 600,\r\n paddingLeft: 9\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}));\r\n\r\nconst columns = [\r\n { key: 'registration', name: 'Reg No.', width: '15%' },\r\n\r\n {\r\n key: 'depot',\r\n name: 'Depot',\r\n width: '8%'\r\n },\r\n { key: 'date', name: 'Date', width: '20%' },\r\n { key: 'mileage', name: 'Mileage', width: '10%' },\r\n { key: 'result', name: 'Result', flex: 1 }\r\n];\r\n\r\nconst ImportMileage = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n file: '',\r\n rows: [],\r\n showTable: false\r\n });\r\n const classes = useStyles();\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const onFileSelect = (e) => {\r\n const { files } = e.target;\r\n if (files.length) {\r\n setState((st) => ({ ...st, fileName: files[0].name, selectedFile: files[0] }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { file } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!file) {\r\n errors.file = 'File is required';\r\n formIsValid = false;\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 (state.fileName && state.selectedFile) {\r\n setState((st) => ({ ...st, uploading: true }));\r\n const data = new FormData();\r\n // const data={postedFiles:state.selectedFile}\r\n data.append(state.fileName, state.selectedFile);\r\n let res = await postImportMileage(data);\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows: res.data.res }));\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {!props.showLoader ? (\r\n props.onClose(true, true)} fullWidth className=\"submit_btn\">\r\n Cancel\r\n \r\n
\r\n );\r\n};\r\n","import { Grid, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState, useMemo } from 'react';\r\nimport { TabView, DataGrid, formatters } from '../../../../../Core/Controls';\r\nimport { getTop10VORVehiclesByOccurance, getTop10VORVehiclesByDays } from '../../../../../Core/Services/InternalUser/ControllerService/customerService';\r\n\r\nconst columns = [\r\n { key: 'reg', name: 'Reg No' },\r\n { key: 'make', name: 'Make' },\r\n { key: 'total', name: 'Total' }\r\n];\r\n\r\nconst VorReportingTab = (props) => {\r\n const [data, setData] = useState({\r\n showLoader1: true,\r\n showLoader2: true,\r\n vehiclesByOccurance: [],\r\n vehiclesByDay: []\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.customerID) {\r\n let res = await getTop10VORVehiclesByOccurance(props.customerID);\r\n if (res.success) {\r\n setData((st) => ({ ...st, vehiclesByOccurance: res?.data?.list || [], showLoader1: false }));\r\n }\r\n let res1 = await getTop10VORVehiclesByDays(props.customerID);\r\n if (res1.success) {\r\n setData((st) => ({ ...st, vehiclesByDay: res1?.data?.list || [], showLoader2: false }));\r\n }\r\n }\r\n }, []);\r\n\r\n const tempTab = [\r\n {\r\n label: 'VOR Vehicle By Occurance',\r\n body: (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n
\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: 'VOR Vehicle By Days',\r\n body: (\r\n \r\n
\r\n )\r\n }\r\n ];\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\nexport default VorReportingTab;\r\n","export default __webpack_public_path__ + \"static/media/depotimportsample.9aad7f5d.xlsx\";","import React, { useState } from 'react';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport { Grid, Paper, TableContainer, Table, TableBody, TableRow, TableCell } from '@material-ui/core';\r\nimport { postImportDepot } from '../../../../../Core/Services/InternalUser/ControllerService/customerService';\r\nimport { SecondaryButton, formatters } from '../../../../../Core/Controls';\r\nimport { InputLabel, Typography } from '@material-ui/core';\r\nimport { FormHelperText } from '@material-ui/core';\r\nimport downloadFile from '../../../../../Template/depotimportsample.xlsx';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { DataGrid } from '../../../../../Core/Controls';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 16,\r\n padding: '8px 20px',\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '8px 20px'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: '#F5F5F5'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n fontSize: '25px',\r\n color: '#f50057',\r\n fontWeight: 600,\r\n paddingLeft: 9\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}));\r\n\r\nconst columns = [\r\n { key: 'registration', name: 'Reg No.', width: '10%' },\r\n { key: 'depot', name: 'Depot', width: '40%' },\r\n { key: 'date', name: 'Date', width: '10%', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'result', name: 'Result', width: '40%' }\r\n];\r\n\r\nconst ImportDepot = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n file: '',\r\n rows: [],\r\n showTable: false\r\n });\r\n\r\n const classes = useStyles();\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const onFileSelect = (e) => {\r\n const { files } = e.target;\r\n if (files.length) {\r\n setState((st) => ({ ...st, fileName: files[0].name, selectedFile: files[0] }));\r\n }\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (state.fileName && state.selectedFile) {\r\n setState((st) => ({ ...st, uploading: true }));\r\n const data = new FormData();\r\n data.append(state.fileName, state.selectedFile);\r\n let res = await postImportDepot(props.customerID, data);\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows: res.data.res }));\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {data.show ? (\r\n closeCustomerModal(false)} maxWidth=\"sm\" overflow=\"auto\">\r\n \r\n ) : null}\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\n Customer Profile\r\n \r\n \r\n \r\n \r\n \r\n {!state.isLoader ? (\r\n <>\r\n \r\n \r\n \r\n {state.customerShortName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.customerCompanyName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.formatWithComma(state.customerAddress1) +\r\n formatters.formatWithComma(state.customerAddress2) +\r\n formatters.formatWithComma(state.customerCity) +\r\n formatters.formatWithComma(state.customerCounty) +\r\n formatters.formatWithComma(state.customerPostCode)}\r\n \r\n \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.customerTelephone)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.customerEmail)}\r\n \r\n \r\n \r\n \r\n {state.customerWebSite || 'N/A'}\r\n \r\n \r\n \r\n \r\n {listNames.accountManagaerName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.customerEarnedRecognition ? 'Yes' : 'No' || 'N/A'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {(state.customerERStartDate && moment(state.customerERStartDate).format('DD/MM/YYYY')) || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.customerOperationsManagerName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.customerOperationsManagerPhone)}\r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.customerOperationsManagerEmail)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.customerFinanceDirectorName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.customerFinanceDirectorPhone)}\r\n \r\n \r\n \r\n \r\n {formatters.mailFormatter(state.customerFinanceDirectorEmail)}\r\n \r\n \r\n {/* \r\n \r\n {state.autoApproveOrderAckNo ? 'Yes' : 'No' || 'N/A'}\r\n \r\n */}\r\n \r\n \r\n \r\n \r\n {state.customerHandlingDefects ? 'Yes' : 'No' || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.handlingOLicense ? 'Yes' : 'No' || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.customerHandlingDefects ? 'Yes' : 'No' || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.customerAutoApprovalLimit || 'N/A'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.autoApproveQueryDays ? 'Yes' : 'No' || 'N/A'}\r\n \r\n \r\n \r\n \r\n {state.overdueQueriesDays || 'N/A'}\r\n \r\n \r\n \r\n \r\n {listNames.currency || 'N/A'}\r\n \r\n \r\n \r\n \r\n {listNames.isoStartDate || 'N/A'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.customerLicenceCheckAccountCode || 'N/A'}\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n {licence.showTopUp ? (\r\n \r\n {!data.show ? (\r\n <>\r\n handleAdd(data.CustomerID, 'show')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n {isAdmin && (\r\n <>\r\n {licence.show ? (\r\n addLicenceChecks(data.CustomerID)}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold', color: !licence.checkBtn ? 'red' : 'green' }}\r\n />\r\n ) : (\r\n \r\n handleTopup(data.CustomerID)}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n \r\n )}\r\n \r\n )}\r\n\r\n {checkhaveAccess?.CanImportDepots && (\r\n handleAdd(data.CustomerID, 'showDepot')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n {checkhaveAccess?.CanImportServiceAgents && (\r\n handleAdd(data.CustomerID, 'showServiceAgent')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n {checkhaveAccess?.CanImportMileages && (\r\n handleAdd(data.CustomerID, 'showMileage')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n {checkhaveAccess?.CanImportJourneys && (\r\n handleAdd(data.CustomerID, 'showJourney')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n {checkhaveAccess?.CanImportFuelPurchases && (\r\n handleAdd(data.CustomerID, 'showFuel')}\r\n className=\"btn-m\"\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n )}\r\n \r\n ) : null}\r\n
\r\n \r\n Short Name \r\n
\r\n \r\n Name \r\n
\r\n \r\n Address \r\n
\r\n \r\n Phone \r\n
\r\n \r\n Email \r\n
\r\n \r\n Website \r\n
\r\n \r\n Account Manager \r\n
\r\n \r\n Earned Recognition? \r\n
\r\n \r\n Earned Recognition Start Date \r\n
\r\n \r\n Operation Manager Name \r\n
\r\n \r\n Operation Manager Phone \r\n
\r\n \r\n Operation Manager Email \r\n
\r\n \r\n Finance Director Name \r\n
\r\n \r\n Finance Director Phone \r\n
\r\n \r\n Finance Director Email \r\n
\r\n \r\n Auto Approve Order Number \r\n
\r\n \r\n Handling Breakdowns \r\n
\r\n \r\n Handling Olicense \r\n
\r\n \r\n Handling Defects \r\n
\r\n \r\n Order Approval Limit \r\n
\r\n \r\n Auto Approve Query Days \r\n
\r\n \r\n Overdue Queries Days \r\n
\r\n \r\n Currency \r\n
\r\n \r\n ISO Week Start Date \r\n
\r\n \r\n Licence Check Account Code \r\n
\r\n \r\n
\r\n )}\r\n \r\n {state.show ? (\r\n closeVehicleModal(true)} customerID={props.customerID} />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustVehicleScreen;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { DataGrid, EditButton, formatters } from '../../../../../Core/Controls';\r\nimport { getCustomerBreakdowns } from '../../../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport AddBreaddownModal from '../../../Maintenance/BreakDown/AddBreakdown';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../../../Core/Controls/GijgoGrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 145, addFileUploaderIcon: true },\r\n {\r\n key: 'defectDate',\r\n name: 'Date',\r\n formatter: formatters.Date_DDMMYYYY\r\n },\r\n { key: 'defectRegNumber', name: 'Registration' },\r\n { key: 'defectLocation', name: 'Location' },\r\n // { key: 'defectDriverName', name: 'Driver Name' },\r\n // { key: 'defectDriverTelephone', name: 'Driver Number' },\r\n { key: 'defectContactName', name: 'Reported By' },\r\n { key: 'defectContactNumber', name: 'Reported Phone' },\r\n { key: 'defectJobStatusDescription', name: 'Status' },\r\n { key: 'defectType', name: 'Defect Type' }\r\n];\r\n\r\nconst BreakDownDashboard = (props) => {\r\n const [state, setState] = useState({\r\n breakdownList: [],\r\n loader: true,\r\n modalToggle: false,\r\n breakID: null,\r\n rowVehicleID: null\r\n });\r\n let history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const handleBreakDown = (params, VehicleID) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: true,\r\n breakID: params,\r\n rowVehicleID: VehicleID\r\n }));\r\n };\r\n const closeModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: false\r\n }));\r\n res && pullBreakDownAndUpdateState();\r\n };\r\n\r\n useEffect(async () => {\r\n pullBreakDownAndUpdateState();\r\n }, []);\r\n\r\n const pullBreakDownAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n\r\n state: 'breakdown'\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n <>\r\n \r\n {state.modalToggle ? (\r\n closeModal(true)} breakDownID={state.breakID} />\r\n ) : (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"BreakdownScreen\"\r\n getUrl={`VehicleBreakdowns?customerID=${props.customerID}`}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleBreakDown(null)}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default BreakDownDashboard;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const fleetInsuranceList = async (id) => {\r\n let res = await getWithAuth(`FleetInsurances?CustomerID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getFleetInsurancesByID = async (id) => {\r\n let res = await getWithAuth(`FleetInsurances/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postFleetInsurances = async (data) => {\r\n let res = await postWithAuth(`FleetInsurances`, data);\r\n return res;\r\n};\r\n","import React, { useState, useCallback, useEffect } from 'react';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { InputLabel, Grid, Typography, RadioGroup, Radio, FormControlLabel, FormHelperText } from '@material-ui/core';\r\nimport { MandatoryField, SelectBox, SimpleField, DatePicker, SecondaryButton, formatters } from '../../../../../Core/Controls';\r\nimport { getFleetInsurancesByID, postFleetInsurances } from '../../../../../Core/Services/InternalUser/fleetInsurance';\r\nimport { FromLoader } from '../../../../../Core/Loader/formLoader';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\nconst AddFleetInsurance = (props) => {\r\n const [state, setState] = useState({\r\n fleetInsuranceCustomerID: props.customerID,\r\n fleetInsuranceId: props.fleetInsuranceId,\r\n fleetInsurancePremiumFrequency: null,\r\n fleetInsuranceUseBusiness: false,\r\n fleetInsuranceDriversAgency: false,\r\n fleetInsuranceUseSDP: false,\r\n fleetInsuranceUseCarriage: false,\r\n errors: {},\r\n showLoader: props.fleetInsuranceId ? true : false\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const handleInput = useCallback((e) => {\r\n const { name, value, type } = e.target;\r\n setState((st) => {\r\n let state = { ...st };\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n state[name] = true;\r\n } else if (value === 'false' && type.toLowerCase() === 'radio') {\r\n state[name] = false;\r\n } else {\r\n state[name] = value;\r\n }\r\n\r\n return state;\r\n });\r\n }, []);\r\n\r\n let premiumFrequency = [\r\n {\r\n id: 'A',\r\n name: 'Annual'\r\n },\r\n {\r\n id: 'M',\r\n name: 'Monthly'\r\n }\r\n ];\r\n\r\n useEffect(async () => {\r\n if (props.fleetInsuranceId) {\r\n let res = await getFleetInsurancesByID(props.fleetInsuranceId);\r\n if (res.success) {\r\n let data = res.data?.list[0];\r\n setState((st) => ({\r\n ...st,\r\n fleetInsuranceId: data.fleetInsuranceId,\r\n fleetInsuranceCustomerID: data.fleetInsuranceCustomerID,\r\n fleetInsuranceInsurerName: data.fleetInsuranceInsurerName,\r\n fleetInsuranceInsurerContactName: data.fleetInsuranceInsurerContactName,\r\n fleetInsuranceInsurerTelephone: data.fleetInsuranceInsurerTelephone,\r\n fleetInsuranceInsurerEmail: data.fleetInsuranceInsurerEmail,\r\n fleetInsurancePolicyNumber: data.fleetInsurancePolicyNumber,\r\n fleetInsuranceBrokerName: data.fleetInsuranceBrokerName,\r\n fleetInsuranceBrokerContactName: data.fleetInsuranceBrokerContactName,\r\n fleetInsuranceBrokerTelephone: data.fleetInsuranceBrokerTelephone,\r\n fleetInsuranceBrokerEmail: data.fleetInsuranceBrokerEmail,\r\n fleetInsuranceStartDate: formatters.DateFormatter(data.fleetInsuranceStartDate),\r\n fleetInsuranceExpiryDate: formatters.DateFormatter(data.fleetInsuranceExpiryDate),\r\n fleetInsuranceReviewFrom: formatters.DateFormatter(data.fleetInsuranceReviewFrom),\r\n fleetInsurancePremium: data.fleetInsurancePremium,\r\n fleetInsuranceBusinessType: data.fleetInsuranceBusinessType,\r\n fleetInsuranceBusinessEstablished: data.fleetInsuranceBusinessEstablished,\r\n fleetInsuranceUseSDP: data.fleetInsuranceUseSDP,\r\n fleetInsuranceUseBusiness: data.fleetInsuranceUseBusiness,\r\n fleetInsuranceUseCarriage: data.fleetInsuranceUseCarriage,\r\n fleetInsuranceUseOther: data.fleetInsuranceUseOther,\r\n fleetInsuranceExcessAccidentDamage: data.fleetInsuranceExcessAccidentDamage,\r\n fleetInsuranceExcessFireAndTheft: data.fleetInsuranceExcessFireAndTheft,\r\n fleetInsuranceExcessWindcreen: data.fleetInsuranceExcessWindcreen,\r\n fleetInsuranceDriversUnder25: data.fleetInsuranceDriversUnder25,\r\n fleetInsuranceDrivers25to29: data.fleetInsuranceDrivers25to29,\r\n fleetInsuranceDrivers30orOver: data.fleetInsuranceDrivers30orOver,\r\n fleetInsuranceDriversAgency: data.fleetInsuranceDriversAgency,\r\n fleetInsuranceNotes: data.fleetInsuranceNotes,\r\n fleetInsuranceMIDUpdatedBy: data.fleetInsuranceMIDUpdatedBy,\r\n fleetInsurancePremiumFrequency: data.fleetInsurancePremiumFrequency,\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const validation = () => {\r\n const { fleetInsuranceInsurerName, fleetInsurancePolicyNumber, fleetInsuranceExpiryDate, fleetInsurancePremiumFrequency } = state;\r\n let errors = {};\r\n let isValid = true;\r\n if (!fleetInsuranceInsurerName) {\r\n errors.fleetInsuranceInsurerName = 'Insurer Name is required';\r\n isValid = false;\r\n }\r\n if (!fleetInsurancePolicyNumber) {\r\n errors.fleetInsurancePolicyNumber = 'Policy Number is required';\r\n isValid = false;\r\n }\r\n if (!fleetInsuranceExpiryDate) {\r\n errors.fleetInsuranceExpiryDate = 'Renew Date is required';\r\n isValid = false;\r\n }\r\n if (!fleetInsurancePremiumFrequency) {\r\n errors.fleetInsurancePremiumFrequency = 'Premium Frequency is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\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 fleetInsuranceId: state.fleetInsuranceId || null,\r\n fleetInsuranceCustomerID: state.fleetInsuranceCustomerID || null,\r\n fleetInsuranceInsurerName: state.fleetInsuranceInsurerName || null,\r\n fleetInsuranceInsurerContactName: state.fleetInsuranceInsurerContactName || null,\r\n fleetInsuranceInsurerTelephone: state.fleetInsuranceInsurerTelephone || null,\r\n fleetInsuranceInsurerEmail: state.fleetInsuranceInsurerEmail || null,\r\n fleetInsurancePolicyNumber: state.fleetInsurancePolicyNumber || null,\r\n fleetInsuranceBrokerName: state.fleetInsuranceBrokerName || null,\r\n fleetInsuranceBrokerContactName: state.fleetInsuranceBrokerContactName || null,\r\n fleetInsuranceBrokerTelephone: state.fleetInsuranceBrokerTelephone || null,\r\n fleetInsuranceBrokerEmail: state.fleetInsuranceBrokerEmail || null,\r\n fleetInsuranceStartDate: formatters.DateFormatter(state.fleetInsuranceStartDate) || null,\r\n fleetInsuranceExpiryDate: formatters.DateFormatter(state.fleetInsuranceExpiryDate) || null,\r\n fleetInsuranceReviewFrom: formatters.DateFormatter(state.fleetInsuranceReviewFrom) || null,\r\n fleetInsurancePremium: state.fleetInsurancePremium || null,\r\n fleetInsuranceBusinessType: state.fleetInsuranceBusinessType || null,\r\n fleetInsuranceBusinessEstablished: state.fleetInsuranceBusinessEstablished || null,\r\n fleetInsuranceUseSDP: state.fleetInsuranceUseSDP,\r\n fleetInsuranceUseBusiness: state.fleetInsuranceUseBusiness,\r\n fleetInsuranceUseCarriage: state.fleetInsuranceUseCarriage,\r\n fleetInsuranceUseOther: state.fleetInsuranceUseOther || null,\r\n fleetInsuranceExcessAccidentDamage: state.fleetInsuranceExcessAccidentDamage || null,\r\n fleetInsuranceExcessFireAndTheft: state.fleetInsuranceExcessFireAndTheft || null,\r\n fleetInsuranceExcessWindcreen: state.fleetInsuranceExcessWindcreen || null,\r\n fleetInsuranceDriversUnder25: state.fleetInsuranceDriversUnder25 || null,\r\n fleetInsuranceDrivers25to29: state.fleetInsuranceDrivers25to29 || null,\r\n fleetInsuranceDrivers30orOver: state.fleetInsuranceDrivers30orOver || null,\r\n fleetInsuranceDriversAgency: state.fleetInsuranceDriversAgency,\r\n fleetInsuranceNotes: state.fleetInsuranceNotes || null,\r\n fleetInsuranceMIDUpdatedBy: state.fleetInsuranceMIDUpdatedBy || null,\r\n fleetInsurancePremiumFrequency: state.fleetInsurancePremiumFrequency || null\r\n };\r\n\r\n let res = await postFleetInsurances(data);\r\n if (res.success) {\r\n showToastSuccess('Fleet Insurance added successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(true);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {state.showLoader ? (\r\n \r\n \r\n \r\n \r\n Insurer & Policy Details{' '}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n Policy Start Date \r\n \r\n \r\n Renewal Date * \r\n {state.errors.fleetInsuranceExpiryDate} \r\n \r\n \r\n Review From Date \r\n \r\n \r\n \r\n \r\n \r\n Premium Frequency\r\n \r\n {state.errors.fleetInsurancePremiumFrequency} \r\n \r\n \r\n \r\n \r\n \r\n Broker Details\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Driver Details{' '}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n Are Agency Drivers Employed?\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Proposer Details{' '}\r\n \r\n
\r\n \r\n \r\n \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 Use\r\n \r\n
\r\n \r\n \r\n Social Domestic and Pleasure \r\n \r\n \r\n \r\n Business Class 3 / Carriage of Own Goods \r\n \r\n \r\n \r\n Carriage of Goods for Hire & Reward \r\n \r\n \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 Cancel\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default AddFleetInsurance;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport AddFleetInsurance from './addfleetInsurance';\r\nimport { DataGrid, EditButton, formatters } from '../../../../../Core/Controls';\r\nimport { fleetInsuranceList } from '../../../../../Core/Services/InternalUser/fleetInsurance';\r\nimport GijgoGrid from '../../../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: '5%'\r\n },\r\n { key: 'fleetInsuranceInsurerName', name: 'Name' },\r\n { key: 'fleetInsuranceInsurerTelephone', name: 'Phone' },\r\n { key: 'fleetInsurancePolicyNumber', name: 'Policy Number' },\r\n { key: 'fleetInsuranceStartDate', name: 'Period From', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'fleetInsuranceExpiryDate', name: 'Period To', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'fleetInsuranceBusinessEstablished', name: 'Vehicle Years' },\r\n { key: 'fleetInsuranceBrokerName', name: 'Broker ' },\r\n { key: 'fleetInsuranceBrokerTelephone', name: 'Broker Phone' }\r\n];\r\n\r\nconst FleetInsurance = (props) => {\r\n const [state, setState] = useState({\r\n showDialog: false,\r\n resList: [],\r\n isReload: null\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n handleDialog(row.fleetInsuranceId)} />\r\n
\r\n );\r\n };\r\n\r\n const pullListData = async () => {\r\n // let res = await fleetInsuranceList(props.customerID);\r\n setState((st) => ({\r\n ...st,\r\n // resList: res.data.list\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleDialog = (data) => {\r\n setState((st) => ({\r\n ...st,\r\n showDialog: true,\r\n fleetInsuranceId: data\r\n }));\r\n };\r\n\r\n const closeDialog = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showDialog: false\r\n }));\r\n res && pullListData();\r\n };\r\n const gridBtnTitle = 'Add Insurance';\r\n\r\n let getUrl = `FleetInsurances?CustomerID=${props.customerID}`;\r\n\r\n return (\r\n \r\n {state.showDialog ? (\r\n handleDialog(null)}\r\n // rows={state.resList}\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={getUrl}\r\n btnTitle={`${checkhaveAccess?.CanUpdateCustomerFleetInsurance ? gridBtnTitle : ''}`}\r\n onBtnClick={() => handleDialog(null)}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default FleetInsurance;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { Postcode, SimpleField, SelectBox, SecondaryButton, MandatoryField } from '../../../../../Core/Controls';\r\nimport { postEndUser, getEndUserByID } from '../../../../../Core/Services/InternalUser/ControllerService/endUserService';\r\n\r\nconst AddEditEndUser = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const [state, setState] = useState({\r\n endUserCountryCode: 'GB',\r\n endUserID: null,\r\n endUserCustomerID: props.customerID,\r\n errors: {}\r\n });\r\n const setVal = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n endUserAddress1: s.addressLine1,\r\n endUserAddress2: s.addressLine2,\r\n endUserTown: s.town,\r\n endUserCounty: s.county,\r\n endUserPostCode: s.postCode\r\n }));\r\n };\r\n\r\n const countryList = [\r\n { id: 'GB', name: 'GB' },\r\n { id: 'IE', name: 'IE' }\r\n ];\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n useEffect(async () => {\r\n if (props.endUserId) {\r\n let res = await getEndUserByID(props.endUserId);\r\n let data = res.data.list[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n endUserID: data.endUserID || null,\r\n endUserCustomerID: data.endUserCustomerID || null,\r\n endUserName: data.endUserName || null,\r\n endUserAddress1: data.endUserAddress1 || null,\r\n endUserAddress2: data.endUserAddress2 || null,\r\n endUserTown: data.endUserTown || null,\r\n endUserCounty: data.endUserCounty || null,\r\n endUserCountryCode: data.endUserCountryCode || null,\r\n endUserPostCode: data.endUserPostCode || null,\r\n endUserContactName: data.endUserContactName || null,\r\n endUserContactPhone: data.endUserContactPhone || null,\r\n endUserContactEmail: data.endUserContactEmail || null\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n let validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n let { endUserName } = state;\r\n if (!endUserName) {\r\n errors.endUserName = 'Name is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors\r\n }));\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n setBtnLoader(true);\r\n let data = {\r\n endUserID: state.endUserID || null,\r\n endUserCustomerID: state.endUserCustomerID || null,\r\n endUserName: state.endUserName || null,\r\n endUserAddress1: state.endUserAddress1 || null,\r\n endUserAddress2: state.endUserAddress2 || null,\r\n endUserTown: state.endUserTown || null,\r\n endUserCounty: state.endUserCounty || null,\r\n endUserCountryCode: state.endUserCountryCode || null,\r\n endUserPostCode: state.endUserPostCode || null,\r\n endUserContactName: state.endUserContactName || null,\r\n endUserContactPhone: state.endUserContactPhone || null,\r\n endUserContactEmail: state.endUserContactEmail || null\r\n };\r\n let res = await postEndUser(data);\r\n if (res.success) {\r\n showToastSuccess(`End User ${props.endUserId ? `Updated` : `Added`} Successfully`);\r\n props.onClose();\r\n } else {\r\n showToastError(`Fail to ${props.endUserId ? `Updated` : `Added`} End User`);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleModal(row, false)} toolTipTitle=\"Edit Report Catalogue\" />\r\n
\r\n );\r\n };\r\n\r\n const renderEmail = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = {formatters.mailFormatter(row.endUserContactEmail)}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderPhone = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = {formatters.phoneNumberFormatter(row.endUserContactPhone)}
;\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.key === 'action');\r\n let emailCol = tempCols.find((element) => element.key === 'endUserContactEmail');\r\n let phoneCol = tempCols.find((element) => element.key === 'endUserContactPhone');\r\n\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (emailCol) {\r\n emailCol.formatter = renderEmail;\r\n }\r\n if (phoneCol) {\r\n phoneCol.formatter = renderPhone;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const getUrl = `endusers?CustomerID=${props.customerID}`;\r\n return (\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={getUrl}\r\n btnTitle=\"Add Item\"\r\n onBtnClick={() => handleModal(null, false)}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.showModal ? (\r\n handleModal(null, false)} maxWidth=\"lg\">\r\n handleModal(null, true)} endUserId={state.endUserId} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default EndUser;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getFaultTypesByID = async (Id) => {\r\n let res = await getWithAuth(`faultTypes/${Id}`);\r\n return res;\r\n};\r\nexport const getFaultTypesById = async (Id) => {\r\n let res = await getWithAuth(`faultTypes/CustomerID=${Id}`);\r\n return res;\r\n};\r\n\r\nexport const postFaultTypes = async (data) => {\r\n let res = await postWithAuth('faultTypes', data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { SecondaryButton, MandatoryField } from '../../../../../Core/Controls';\r\nimport { postFaultTypes, getFaultTypesByID } from '../../../../../Core/Services/InternalUser/ControllerService/faultTypeService';\r\n\r\nconst AddEditFaultTypes = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const [state, setState] = useState({\r\n faultTypeID: null,\r\n faultTypeCustomerID: props.customerID,\r\n errors: {}\r\n });\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n useEffect(async () => {\r\n if (props.faultTypeID) {\r\n let res = await getFaultTypesByID(props.faultTypeID);\r\n let data = res.data.list[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n faultTypeID: data.faultTypeID || null,\r\n faultTypeCustomerID: data.faultTypeCustomerID || null,\r\n faultTypeDescription: data.faultTypeDescription || null\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n let validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n let { faultTypeDescription } = state;\r\n if (!faultTypeDescription) {\r\n errors.faultTypeDescription = 'Description is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors\r\n }));\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n setBtnLoader(true);\r\n let data = {\r\n faultTypeID: state.faultTypeID || null,\r\n faultTypeCustomerID: state.faultTypeCustomerID || null,\r\n faultTypeDescription: state.faultTypeDescription || null\r\n };\r\n let res = await postFaultTypes(data);\r\n if (res.success) {\r\n showToastSuccess(`Fault Type ${props.faultTypeID ? `Updated` : `Added`} Successfully`);\r\n props.onClose();\r\n } else {\r\n showToastError(`Fail to ${props.faultTypeID ? `Updated` : `Added`} Fault Type`);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleModal(row, false)} toolTipTitle=\"Edit Fault Type\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const getUrl = `FaultTypes?CustomerID=${props.customerID}`;\r\n return (\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={getUrl}\r\n btnTitle=\"Add Fault Type\"\r\n onBtnClick={() => handleModal(null, false)}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.showModal ? (\r\n handleModal(null, false)} maxWidth=\"lg\">\r\n handleModal(null, true)} faultTypeID={state.faultTypeID} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default FaultTypes;\r\n","import { Card, Grid, Tooltip, Typography } from '@material-ui/core';\r\nimport './vorReporting.scss';\r\n\r\nexport const RenderReportingByFilter = (props) => {\r\n return (\r\n \r\n {/* */}\r\n
\r\n {/* */}\r\n \r\n \r\n props.handleEditRegClick(option, props.label) : ''}\r\n style={{ cursor: props.handleEditRegClick ? 'pointer' : 'default' }}\r\n >\r\n
\r\n {option.sum ? option.sum : 0}
\r\n {option.val ? option.val : `${'\\u{2800}'}`}\r\n {props.noRow}
\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 {option.total}
\r\n {option.val}\r\n \r\n
\r\n );\r\n};\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\nimport moment from 'moment';\r\nimport _ from 'lodash';\r\n\r\nconst downloadFileWithExt = async (res, fileExt) => {\r\n if (res) {\r\n const url = window.URL.createObjectURL(new Blob([res.data]));\r\n const link = document.getElementById('tempDownloadPDFLink') || document.createElement('a');\r\n link.id = 'tempDownloadPDFLink';\r\n link.href = url;\r\n link.setAttribute('download', `Report${moment().format('DD-MMM-YYYY HH:mm')}.${fileExt}`);\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n return true;\r\n }\r\n};\r\n\r\nexport const GetVORReportingExcelFile = async (params) => {\r\n let res = await getWithAuth(\r\n `VORVehicles/GetExcelFile?startDate=${params.fromDate}&endDate=${params.toDate}&Id=${params.customerID}&vehicleCategoryID=${params.vehicleCategoryID}&makeID=${params.makeID}`,\r\n {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n }\r\n );\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\nexport const GetDefectReportingExcelFile = async (params) => {\r\n let res = await getWithAuth(`VehicleDefects/GetDefectExcelFile?startDate=${params.fromDate}&endDate=${params.toDate}&Id=${params.customerID}`, {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n });\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\nexport const GetBreakdownReportingExcelFile = async (params) => {\r\n let res = await getWithAuth(`VehicleBreakdowns/GetBreakdownExcelFile?startDate=${params.fromDate}&endDate=${params.toDate}&Id=${params.customerID}`, {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n });\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\nexport const GetJobReportingExcelFile = async (params) => {\r\n let res = await getWithAuth(`VehicleJob/GetJobExcelFile?startDate=${params.fromDate}&endDate=${params.toDate}&Id=${params.customerID}`, {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n });\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\n\r\nexport const GetSchedulesExcelFile = async (params) => {\r\n let res = await getWithAuth(\r\n `Schedules/DownLoadExcelFile?status=${params.status}\r\n &mode=${params.mode}\r\n &startDate=${params.startDate}\r\n &endDate=${params.endDate}`,\r\n {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n }\r\n );\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\n\r\nexport const GetOutstandingDocSchedulesExcelFile = async (params) => {\r\n let temp = '';\r\n\r\n if (!_.isEmpty(params.filterValues)) {\r\n for (const property in params.filterValues) {\r\n temp = temp + `&${property}=${params.filterValues[property]}`;\r\n }\r\n }\r\n let res = await getWithAuth(`Schedules/OutstandingScheduleDoc/DownLoadExcelFile?received=${params.received}${temp}`, {\r\n responseType: 'blob',\r\n returnOrgRes: true\r\n });\r\n downloadFileWithExt(res, params.fileExt);\r\n};\r\n","import React, { useEffect, useState, useCallback, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Card, Typography, ButtonGroup, Button } from '@material-ui/core';\r\nimport { SingleSelect, DatePicker, formatters, BreadCrumbs, SecondaryButton } from '../../../Core/Controls';\r\nimport { getVehicleScreenDropdowns } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport '../Controllers/controllerStyle.scss';\r\nimport { getVORVehiclesByType } from '../../../Core/Services/InternalUser/ControllerService/customerService';\r\nimport moment from 'moment';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport './vorReporting.scss';\r\nimport RenderReporting from './RenderReportingDesign';\r\nimport { RenderReportingByFilter } from './RenderReportingDesign';\r\nimport { ReportingBarChart } from '../../../Core/Controls/Charts/index';\r\nimport { GetVORReportingExcelFile } from '../../../Core/Services/InternalUser/excelDownload';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\nimport AddVor from '../Controllers/VOR/AddEditVor';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport FaultTypes from './../Controllers/Customers/FaultTypes/index';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'VOR Reporting', active: true }\r\n];\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n border: '2px solid #f5f5f5',\r\n Opacity: 0.9,\r\n minWidth: 120,\r\n borderRadius: 10,\r\n boxShadow: 'none',\r\n background: '#8080800d',\r\n height: '100%',\r\n width: '100%'\r\n }\r\n}));\r\n\r\nconst baseColumns = [\r\n // { key: 'action', name: 'Action', width: 100 },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 120 },\r\n { key: 'vorVehicleDateStarted', name: 'Start Date', width: '13%', formatter: formatters.Date_DDMMMYYYY_HHMM },\r\n { key: 'vorVehicleDateEnded', name: 'End Date', width: '13%', formatter: formatters.Date_DDMMMYYYY_HHMM },\r\n { key: 'vorDays', name: 'VOR Days', width: '20%' },\r\n { key: 'vorTypeDescription', name: 'Type', width: '10%' },\r\n { key: 'vorTypeDetailDescription', name: 'Reason' },\r\n { key: 'vehicleCategoryDescription', name: 'Sub Category', width: '10%' },\r\n { key: 'depotName', name: 'Depot', width: '10%' }\r\n];\r\n\r\nlet startDate = moment().startOf('month').format('YYYY-MM-DD');\r\nlet endDate = moment().format('YYYY-MM-DD');\r\nfunction VorReportingModal(props) {\r\n let history = useHistory();\r\n const [state, setState] = useState({\r\n customerList: [],\r\n errors: {},\r\n depotWithCustList: [],\r\n depotsList: [],\r\n customerID: +props?.match?.params.id || props.customerID || null,\r\n depotsID: null,\r\n startDate: startDate,\r\n endDate: endDate,\r\n VehicleByType: [],\r\n VorList: [],\r\n NumberOfDepot: [],\r\n sumOfAllDepot: 0,\r\n setTop5ID: 1,\r\n setBarData: 4,\r\n top5Days: 1,\r\n setBarVal: 1,\r\n set_type: 6,\r\n show: false,\r\n vehicleCategoryList: [],\r\n vehicleDepotsList: [],\r\n byReg: [],\r\n depot: [],\r\n faultType: [],\r\n make: [],\r\n model: [],\r\n reason: [],\r\n type: [],\r\n TypeIsReload: null,\r\n reasonList: [],\r\n FaultTypes: [],\r\n makeList: [],\r\n vehicleCategoryListdropdown: []\r\n });\r\n\r\n const handleEditRegClick = (val, cond) => {\r\n switch (cond) {\r\n case 'Vehicles':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n state: { vehicleRegNumber: val.reg },\r\n startDate: state.startDate,\r\n endDate: state.endDate,\r\n customerID: val.customer\r\n });\r\n break;\r\n case 'Models':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n // state: { customerCompanyName: val.customer, vehicleRegNumber: val.reg },\r\n startDate: state.startDate,\r\n endDate: state.endDate,\r\n customerID: val.customer,\r\n model: val.model\r\n });\r\n break;\r\n case 'Makes':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n // state: { customerCompanyName: val.customer, vehicleRegNumber: val.reg },\r\n startDate: state.startDate,\r\n endDate: state.endDate,\r\n customerID: val.customer,\r\n make: val.make\r\n });\r\n break;\r\n case 'Category':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n state: { vorTypeDescription: val.vorType },\r\n startDate: state.startDate,\r\n endDate: state.endDate,\r\n customerID: val.customer\r\n });\r\n break;\r\n case 'Depots':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n state: { depotName: val.name },\r\n startDate: state.startDate,\r\n endDate: state.endDate,\r\n customerID: val.customer\r\n });\r\n break;\r\n case 'reg':\r\n history.push({\r\n pathname: `/controller/vor`,\r\n state: val,\r\n startDate: state.startDate,\r\n endDate: state.endDate\r\n });\r\n break;\r\n }\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {list.length > 0 ? (\r\n \r\n \r\n \r\n {\r\n props.handleEditRegClick(entry, props.setval);\r\n }}\r\n style={{ cursor: 'pointer' }}\r\n />\r\n );\r\n } else {\r\n return | ;\r\n }\r\n })}\r\n \r\n ) : (\r\n \r\n {\r\n // handleDetailpopUp(entry, ' Depots');\r\n // }}\r\n style={{ cursor: 'pointer' }}\r\n />\r\n ))}\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 Records Found
\r\n closeVorModal(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const classes = useStyles();\r\n\r\n const handleReports = (val) => {\r\n setState((st) => ({ ...st, top5Days: val }));\r\n };\r\n\r\n const handleBarChart = (val) => {\r\n setState((st) => ({ ...st, setBarVal: val }));\r\n };\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n vehicleCategoryIDValue: null,\r\n makeIDValue: null\r\n });\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n let getURl = () => {\r\n return `VORVehicles?startDate=${state.startDate}&endDate=${state.endDate}&CustomerId=${tempOptions.customerIDValue?.id || ''}&vehicleCategoryID=${\r\n tempOptions.vehicleCategoryIDValue?.id || ''\r\n }&makeID=${tempOptions.makeIDValue?.id || ''}`;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...baseColumns];\r\n let actionCol = newColumn.find((item) => item.key === 'vehicleRegNumber');\r\n if (actionCol) {\r\n actionCol.formatter = renderRegNumberEdit;\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const title = state.navigationMenuID ? 'Update Menu Items' : 'Add Menu Items';\r\n\r\n useEffect(async () => {\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n depotsList: res.data.depots,\r\n makeList: res.data.makes || [],\r\n vehicleCategoryListdropdown: res.data.vehicleCategories || []\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID && state.customerList?.length > 0) {\r\n newSt.customerIDValue = state.customerList.find(({ id }) => id === +state.customerID);\r\n } else {\r\n newSt.customerIDValue = state.customerList[0];\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.customerID, state.customerList]);\r\n\r\n //bar Data Days/Occurrence handler\r\n\r\n useEffect(() => {\r\n let vehicleCategoryList = [];\r\n let vehicleDepotsList = [];\r\n let reasonList = [];\r\n let FaultTypes = [];\r\n switch (state.setBarVal) {\r\n case 1:\r\n vehicleCategoryList =\r\n state.type &&\r\n state.type.map((m) => ({\r\n ...m,\r\n name: m.vorType,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n vehicleDepotsList =\r\n state.depot &&\r\n state.depot.map((m) => ({\r\n ...m,\r\n name: m.depot,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n reasonList =\r\n state.reason &&\r\n state.reason.map((m) => ({\r\n ...m,\r\n name: m.vorTypeDetailDescription,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n FaultTypes =\r\n state.faultType &&\r\n state.faultType.map((m) => ({\r\n ...m,\r\n name: m.faultTypeDescription,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n break;\r\n case 2:\r\n vehicleCategoryList =\r\n state.type &&\r\n state.type.map((m) => ({\r\n ...m,\r\n name: m.vorType,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n vehicleDepotsList =\r\n state.depot &&\r\n state.depot.map((m) => ({\r\n ...m,\r\n name: m.depot,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n reasonList =\r\n state.reason &&\r\n state.reason.map((m) => ({\r\n ...m,\r\n name: m.vorTypeDetailDescription,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n FaultTypes =\r\n state.faultType &&\r\n state.faultType.map((m) => ({\r\n ...m,\r\n name: m.faultTypeDescription,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n break;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n vehicleCategoryList: vehicleCategoryList,\r\n vehicleDepotsList: vehicleDepotsList,\r\n reasonList: reasonList,\r\n FaultTypes: FaultTypes\r\n }));\r\n }, [state.setBarVal, state.TypeIsReload]);\r\n\r\n //Top 5 Days/Occurrence handler\r\n\r\n useEffect(() => {\r\n let top5Reg = [];\r\n let top5Makes = [];\r\n let top5models = [];\r\n switch (state.top5Days) {\r\n case 1:\r\n top5Reg = state.byReg && state.byReg.map((m) => ({ ...m, val: m.reg, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n top5Makes = state.make && state.make?.map((m) => ({ ...m, val: m.make, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n top5models = state.model && state.model?.map((m) => ({ ...m, val: m.model, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n break;\r\n\r\n case 2:\r\n top5Reg = state.byReg && state.byReg.map((m) => ({ ...m, val: m.reg, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n top5Makes = state.make && state.make?.map((m) => ({ ...m, val: m.make, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n top5models = state.model && state.model?.map((m) => ({ ...m, val: m.model, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n\r\n break;\r\n }\r\n setState((st) => ({ ...st, top5Reg: top5Reg, top5Makes: top5Makes, top5models: top5models }));\r\n }, [state.top5Days, state.TypeIsReload]);\r\n\r\n useEffect(async () => {\r\n if (state.customerList?.length > 0) {\r\n let res = await getVORVehiclesByType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n let newSt = {};\r\n let data = res?.data;\r\n if (res.success) {\r\n newSt.TypeIsReload = new Date();\r\n newSt.byReg = data.byReg;\r\n newSt.depot = data.depot;\r\n newSt.faultType = data.faultType;\r\n newSt.make = data.make;\r\n newSt.model = data.model;\r\n newSt.reason = data.reason;\r\n newSt.type = data.type;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt,\r\n url: getURl()\r\n }));\r\n }\r\n }, [state.startDate, state.endDate, tempOptions.customerIDValue, tempOptions.makeIDValue, tempOptions.vehicleCategoryIDValue]);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n if (val) {\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setTempOptions((st) => ({ ...st, [nm]: null }));\r\n }\r\n };\r\n useEffect(() => {\r\n const uniquescheduleEventNames = [...new Set(state.VorList.map((item) => item.depotName))];\r\n let Depot = uniquescheduleEventNames.map((m) => {\r\n let a = state.VorList.filter(function (val) {\r\n return val.depotName === m;\r\n }).length;\r\n return { name: m || 'No Depot Found', ['Total Days']: a, customer: tempOptions.customerIDValue.name };\r\n });\r\n let sumOfAllDepot = 0;\r\n let totalCount = [...Depot].forEach(function (item) {\r\n sumOfAllDepot += item.total;\r\n });\r\n setState((st) => ({ ...st, NumberOfDepot: Depot, sumOfAllDepot: sumOfAllDepot }));\r\n }, [state.VorList]);\r\n\r\n const convertData = (res) => {\r\n setState((st) => ({ ...st, VorList: res.data.list }));\r\n return {\r\n records: res.data.list,\r\n total: res.data.total\r\n };\r\n };\r\n const handleStatus = (val) => {\r\n setState((st) => ({ ...st, setTop5ID: val }));\r\n };\r\n\r\n const handleBar = (val) => {\r\n setState((st) => ({ ...st, setBarData: val }));\r\n };\r\n\r\n let settop5List = {\r\n 1: state.top5Reg,\r\n 2: state.top5models,\r\n 3: state.top5Makes,\r\n 4: state.vehicleCategoryList,\r\n 5: state.vehicleDepotsList,\r\n 6: state.reasonList,\r\n 7: state.FaultTypes\r\n };\r\n let label = {\r\n 1: 'Vehicles',\r\n 2: 'Models',\r\n 3: 'Makes',\r\n 4: 'By Category',\r\n 5: 'By Depot',\r\n 6: 'By Reason',\r\n 7: 'By Fault Type'\r\n };\r\n\r\n const closeVorModal = (val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.show = !st.show;\r\n newSt.vorVehicleID = val.vorVehicleID || '';\r\n newSt.VehicleID = val.vorVehicleVehicleID || '';\r\n newSt.regNo = val.vehicleRegNumber;\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n {props.fromTab ? '' : \r\n \r\n \r\n \r\n Customer\r\n \r\n {state.errors.customerID} \r\n \r\n \r\n Start Date \r\n \r\n \r\n End Date \r\n \r\n \r\n \r\n Vehicle Category\r\n \r\n {state.errors.vehicleCategoryID} \r\n \r\n \r\n Make \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \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.url && (\r\n convertData(res)}\r\n columns={columns}\r\n getUrl={state.url}\r\n isReload={state.isReload}\r\n showDownload={true}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={() =>\r\n GetVORReportingExcelFile({\r\n fromDate: state.startDate,\r\n toDate: state.endDate,\r\n customerID: tempOptions.customerIDValue?.id || '',\r\n vehicleCategoryID: tempOptions.vehicleCategoryIDValue?.id || '',\r\n makeID: tempOptions.makeIDValue?.id || '',\r\n fileExt: 'xlsx'\r\n })\r\n }\r\n />\r\n )}\r\n \r\n \r\n {state.show ? (\r\n // \r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default VorReportingModal;\r\n","import { Card, FormHelperText, Grid, InputLabel, Tooltip, Typography, ButtonGroup, Button } from '@material-ui/core';\r\nimport React, { useCallback, useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DatePicker, formatters, SingleSelect } from '../../../../Core/Controls';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport moment from 'moment';\r\nimport { getVehicleScreenDropdowns } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { getBreakDownFaultType, getDefectFaultType } from '../../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport '../../VorReporting/vorReporting.scss';\r\nimport { RenderReportingByFilter } from '../../VorReporting/RenderReportingDesign';\r\nimport { ReportingBarChart } from './../../../../Core/Controls/Charts/index';\r\nimport { GetBreakdownReportingExcelFile, GetDefectReportingExcelFile } from '../../../../Core/Services/InternalUser/excelDownload';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reporting', active: true }\r\n];\r\n\r\nconst crumdsPath = (val) => {\r\n if (val == 'defect') {\r\n return '/maintenance/defects';\r\n }\r\n if (val == 'breakdown') {\r\n return '/maintenance/breakdowns/:all';\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n border: '2px solid #f5f5f5',\r\n Opacity: 0.9,\r\n minWidth: 120,\r\n borderRadius: 10,\r\n boxShadow: 'none',\r\n background: '#8080800d',\r\n height: '100%',\r\n width: '100%'\r\n }\r\n}));\r\n\r\nconst baseColumns = [\r\n // { key: 'action', name: 'Action', width: 100 },\r\n {\r\n key: 'regNo',\r\n name: 'Reg Number',\r\n width: 120\r\n },\r\n { key: 'defectNo', name: 'Defect No', width: 120 },\r\n { key: 'defectDate', name: 'Start Date', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n { key: 'defectDesc', name: 'Description' },\r\n { key: 'customer', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'faultTypes', name: 'Fault Types', filterable: 'no', sortable: false }\r\n];\r\n\r\nfunction capitalizeFirstLetter(string) {\r\n return string.charAt(0).toUpperCase() + string.slice(1);\r\n}\r\n\r\nlet startDate = moment().startOf('month').format('YYYY-MM-DD');\r\nlet endDate = moment().format('YYYY-MM-DD');\r\n\r\nconst BreakdownDefectReporting = (props) => {\r\n const classes = useStyles();\r\n let history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n customerList: [],\r\n errors: {},\r\n depotWithCustList: [],\r\n depotsList: [],\r\n customerID: +props?.match?.params.id || props.customerID || null,\r\n depotsID: null,\r\n startDate: startDate,\r\n endDate: endDate,\r\n fromScreen: window.location.pathname.includes('defect') ? 'defect' : 'breakdown',\r\n VehicleByType: [],\r\n VorList: [],\r\n NumberOfDepot: [],\r\n sumOfAllDepot: 0,\r\n url: '',\r\n vorByReg: [],\r\n top5Make: [],\r\n top5Model: [],\r\n setTop5ID: 1,\r\n setBarData: 4,\r\n depot: [],\r\n barValues: 4,\r\n makeList: [],\r\n vehicleCategoryListdropdown: []\r\n });\r\n\r\n const handleReports = (val) => {\r\n setState((st) => ({ ...st, setTop5ID: val }));\r\n };\r\n\r\n const handleBarChart = (val) => {\r\n setState((st) => ({ ...st, setBarData: val }));\r\n };\r\n\r\n const handleBar = (val) => {\r\n setState((st) => ({ ...st, barValues: val }));\r\n };\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n vehicleCategoryIDValue: null,\r\n makeIDValue: null\r\n });\r\n\r\n const Crumbs = useMemo(() => {\r\n const tempCols = [...crumbs];\r\n tempCols.splice(1, 0, { name: `${capitalizeFirstLetter(state.fromScreen)}`, path: crumdsPath(state.fromScreen) });\r\n return tempCols;\r\n }, [state.fromScreen]);\r\n\r\n useEffect(async () => {\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n depotsList: res.data.depots,\r\n makeList: res.data.makes || [],\r\n vehicleCategoryListdropdown: res.data.vehicleCategories || []\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID && state.customerList.length > 0) {\r\n newSt.customerIDValue = state.customerList.find(({ id }) => id === +state.customerID);\r\n } else {\r\n newSt.customerIDValue = state.customerList[0];\r\n }\r\n\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.customerID, state.customerList]);\r\n\r\n let getURl = () => {\r\n if (state.fromScreen == 'defect') {\r\n return `VehicleDefects/ByStartEndDate?startDate=${state.startDate}&endDate=${state.endDate}&CustomerId=${\r\n tempOptions.customerIDValue?.id || ''\r\n }&vehicleCategoryID=${tempOptions.vehicleCategoryIDValue?.id || ''}&makeID=${tempOptions.makeIDValue?.id || ''}`;\r\n }\r\n if (state.fromScreen == 'breakdown') {\r\n return `VehicleBreakdowns/ByStartEndDate?startDate=${state.startDate}&endDate=${state.endDate}&CustomerId=${\r\n tempOptions.customerIDValue?.id || ''\r\n }&vehicleCategoryID=${tempOptions.vehicleCategoryIDValue?.id || ''}&makeID=${tempOptions.makeIDValue?.id || ''}`;\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n let res = {};\r\n if (state.customerList.length > 0 && tempOptions.customerIDValue?.id) {\r\n let newst = {};\r\n if (state.fromScreen == 'defect') {\r\n res = await getDefectFaultType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n }\r\n if (state.fromScreen == 'breakdown') {\r\n res = await getBreakDownFaultType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n }\r\n if (res.success) {\r\n newst.VehicleByType = res.data?.list ? res.data?.list?.map((m) => ({ ...m, name: m.faultType, ['Total Days']: m.total })) : [];\r\n newst.depot = res.data?.depot?.map((m) => ({ ...m, name: m.depot, ['Total Days']: m.total })) || [];\r\n newst.vorByReg = res.data?.byReg ? res.data?.byReg?.map((m) => ({ ...m, val: m.reg, sum: m.total })) : [];\r\n newst.top5Make = res.data?.top5Make ? res.data?.top5Make?.map((m) => ({ ...m, val: m.make, sum: m.total })) : [];\r\n newst.top5Model = res.data?.top5Model ? res.data?.top5Model?.map((m) => ({ ...m, val: m.model, sum: m.total })) : [];\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newst,\r\n url: getURl()\r\n }));\r\n }\r\n }, [state.startDate, state.endDate, tempOptions.customerIDValue, tempOptions.makeIDValue, tempOptions.vehicleCategoryIDValue]);\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n if (val) {\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setTempOptions((st) => ({ ...st, [nm]: null }));\r\n }\r\n };\r\n\r\n const convertData = (res) => {\r\n setState((st) => ({ ...st, VorList: res.data.list }));\r\n return {\r\n records: res.data.list,\r\n total: res.data.total\r\n };\r\n };\r\n\r\n let settop5List = {\r\n 1: state.vorByReg,\r\n 2: state.top5Model,\r\n 3: state.top5Make,\r\n 4: state.VehicleByType,\r\n 5: state.depot\r\n };\r\n let label = {\r\n 1: 'Vehicles (Occurrence)',\r\n 2: 'Models (Occurrence)',\r\n 3: 'Makes (Occurrence)',\r\n 4: 'By Fault Type (Occurrence)',\r\n 5: 'By Depot (Occurrence)'\r\n };\r\n const renderVehicleReg = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n Top 5 {label[state.setTop5ID]} \r\n \r\n handleReports(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Days\r\n \r\n handleReports(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Occurrence\r\n \r\n \r\n
\r\n \r\n \r\n handleStatus(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Vehicles\r\n \r\n handleStatus(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Models\r\n \r\n handleStatus(3)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n Makes\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n {label[state.setBarData]}\r\n \r\n \r\n handleBarChart(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Days\r\n \r\n handleBarChart(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Occurrence\r\n \r\n \r\n
\r\n \r\n \r\n handleBar(4)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Category\r\n \r\n handleBar(5)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Depot\r\n \r\n handleBar(6)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Reason\r\n \r\n handleBar(7)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Fault Type\r\n \r\n \r\n
\r\n gotoDefectEditScreen(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.defectNo}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const tempCol = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'regNo');\r\n let agentNameCol = tempCols.find((element) => element.key === 'defectNo');\r\n if (actionCol) {\r\n actionCol.formatter = renderVehicleReg;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = rendeDefectNo;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n {props.fromTab ? '' : \r\n \r\n \r\n \r\n Customer\r\n \r\n {state.errors.customerID} \r\n \r\n \r\n Start Date \r\n \r\n \r\n End Date \r\n \r\n \r\n \r\n Vehicle Category\r\n \r\n {state.errors.vehicleCategoryID} \r\n \r\n \r\n Make \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \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.url && (\r\n convertData(res)}\r\n columns={tempCol}\r\n getUrl={state.url}\r\n showDownload={true}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={() => {\r\n let params = {\r\n fromDate: state.startDate,\r\n toDate: state.endDate,\r\n customerID: tempOptions.customerIDValue?.id || '',\r\n fileExt: 'xlsx'\r\n };\r\n state.fromScreen == 'defect' ? GetDefectReportingExcelFile(params) : GetBreakdownReportingExcelFile(params);\r\n }}\r\n />\r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BreakdownDefectReporting;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getjobByType = async (start, end, Id) => {\r\n let res = await getWithAuth(`customers/GetCustomerJobSpend?custid=${Id || ''}&startDate=${start}&endDate=${end}`);\r\n // let res = await getWithAuth(`customers/GetCustomerJobSpend?startDate=2020-03-01&endDate=2022-06-28&custId=2`);\r\n return res;\r\n};\r\n","import React, { useCallback, useEffect } from 'react';\r\nimport { BreadCrumbs, DatePicker, DateTimePicker, formatters, SingleSelect } from '../../../../Core/Controls';\r\nimport { Card, Grid, InputLabel, Typography, CircularProgress } from '@material-ui/core';\r\nimport { PureComponent } from 'react';\r\nimport { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Label, ComposedChart } from 'recharts';\r\nimport { PieChart, Pie, Sector, LabelList } from 'recharts';\r\nimport './jobReport.scss';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { useState } from 'react';\r\nimport moment from 'moment';\r\nimport { getjobByType } from '../../../../Core/Services/InternalUser/jobReportingService';\r\nimport { getVehicleScreenDropdowns } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { GetJobReportingExcelFile } from '../../../../Core/Services/InternalUser/excelDownload';\r\n\r\nconst Crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Job Reporting', active: true }\r\n];\r\n\r\nconst COLORS = [\r\n '#0074D9',\r\n '#FF4136',\r\n '#2ECC40',\r\n '#FF851B',\r\n '#7FDBFF',\r\n '#B10DC9',\r\n '#FFDC00',\r\n '#001f3f',\r\n '#39CCCC',\r\n '#01FF70',\r\n '#85144b',\r\n '#F012BE',\r\n '#3D9970',\r\n '#111111',\r\n '#AAAAAA'\r\n];\r\n\r\nconst barColors = {\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: '#001f3f',\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 columns = [\r\n { key: 'depot', name: 'Depots', width: '10%' },\r\n { key: 'reg', name: 'Reg No.', width: '10%' },\r\n { key: 'orderNo', name: 'Order No.', width: '10%' },\r\n { key: 'jobDate', name: 'Job Date', width: '13%', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'bookedDate', name: 'Booked Date', width: '13%', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'approvedDate', name: 'Approved Date', width: '15%', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'description', name: 'Description', width: '10%' },\r\n { key: 'jobType', name: 'Job Type', width: '10%' },\r\n { key: 'part', name: 'Part', width: '10%', formatter: formatters.NumberWithPound },\r\n { key: 'labour', name: 'Labour', width: '10%', formatter: formatters.NumberWithPound },\r\n { key: 'total', name: 'Total', width: '10%', formatter: formatters.NumberWithPound }\r\n];\r\n\r\nlet startDate = moment().startOf('month').format('YYYY-MM-DD');\r\nlet endDate = moment().format('YYYY-MM-DD');\r\n\r\nconst JobReportScreen = (props) => {\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n deoptList: [],\r\n jobTypeList: [],\r\n monthYearList: [],\r\n vmrsDescriptionList: [],\r\n url: `vehicleJob/GetCustomerSpend?startDate=${startDate}&endDate=${endDate}`,\r\n checkCondition: false,\r\n showDetailsPopup: false\r\n });\r\n\r\n const [value, setValue] = useState({\r\n name: '',\r\n value: '',\r\n heading: ''\r\n });\r\n\r\n const handleDetailpopUp = (params, heading) => {\r\n setState((st) => ({ ...st, showDetailsPopup: !st.showDetailsPopup }));\r\n setValue((st) => ({ ...st, name: params.name || '', value: params.Total || '', heading: heading || '' }));\r\n };\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null\r\n });\r\n\r\n let getURl = () => {\r\n return `vehicleJob/GetCustomerSpend?startDate=${state.startDate}&endDate=${state.endDate}&custId=${tempOptions.customerIDValue?.id || ''}`;\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n if (val) {\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setTempOptions((st) => ({ ...st, [nm]: null }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n let isCustSelected;\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers\r\n }));\r\n\r\n if (props.customerID && props.fromTab) {\r\n isCustSelected = res.data.customers.find((p) => props.customerID == p.id);\r\n } else if (isCustomer) {\r\n isCustSelected = res.data.customers[0];\r\n }\r\n setTempOptions((st) => ({ ...st, customerIDValue: isCustSelected }));\r\n }, []);\r\n\r\n useEffect(async () => {\r\n let res = await getjobByType(state.startDate, state.endDate, tempOptions.customerIDValue?.id || '');\r\n if (res.success) {\r\n let deoptList = [...res?.data?.depot].map((m, i) => ({\r\n name: m.depot,\r\n Total: m.jobTotal\r\n }));\r\n let vmrsDescriptionList = [...res?.data?.vmrsDescription].map((m, i) => ({\r\n name: m.vmrsDescription,\r\n Total: m.jobTotal\r\n }));\r\n\r\n let jobTypeList = [...res?.data?.jobType].map((m) => ({\r\n name: m.jobType,\r\n Total: m.jobTotal\r\n }));\r\n\r\n let monthYearList = [...res?.data?.monthYear].map((m) => ({\r\n name: m.monthYear,\r\n Total: m.jobTotal\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n deoptList: deoptList,\r\n jobTypeList: jobTypeList,\r\n monthYearList: monthYearList,\r\n vmrsDescriptionList: vmrsDescriptionList,\r\n checkCondition: jobTypeList.length > 0 ? true : false,\r\n url: getURl()\r\n }));\r\n }\r\n getURl();\r\n }, [tempOptions.customerIDValue, state.startDate, state.endDate]);\r\n\r\n const convertData = (res) => {\r\n setState((st) => ({ ...st, VorList: res.data.list }));\r\n return {\r\n records: res.data.list,\r\n total: res.data.total\r\n };\r\n };\r\n\r\n const renderCustomizedLabel = (props) => {\r\n const { x, y, width, height, value } = props;\r\n const radius = 10;\r\n\r\n return (\r\n \r\n Top 5 {label[state.setTop5ID]}\r\n
\r\n \r\n \r\n handleReports(1)}\r\n >\r\n Vehicles\r\n \r\n handleReports(2)}\r\n >\r\n Models\r\n \r\n handleReports(3)}\r\n >\r\n {' '}\r\n Makes\r\n \r\n \r\n
\r\n \r\n By Category (Occurance)\r\n
\r\n \r\n {label[state.barValues]}\r\n
\r\n \r\n \r\n handleBar(4)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Fault Type\r\n \r\n handleBar(5)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Depot\r\n \r\n \r\n
\r\n \r\n {props.fromTab ? '' : \r\n {!isCustomer && (\r\n \r\n \r\n Customer\r\n \r\n {state.errors.customerID} */}\r\n \r\n )}\r\n\r\n {tempOptions.customerIDValue ? (\r\n <>\r\n \r\n Start Date \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 No Records Found
\r\n\r\n Month Year \r\n \r\n {state.monthYearList.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n \r\n {state.monthYearList.length > 0 ? (\r\n \r\n \r\n \r\n {\r\n // handleDetailpopUp(entry, 'Month Year');\r\n // }}\r\n />\r\n \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 Records Found
\r\n\r\n
\r\n );\r\n })}\r\n \r\n {' '}\r\n \r\n
\r\n {m.name}
\r\n \r\n ({' '}\r\n {m.Total ? £{m.Total.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}) : <>£0.00}\r\n
\r\n \r\n {state.vmrsDescriptionList.length > 0 ? (\r\n \r\n \r\n \r\n {\r\n // handleDetailpopUp(entry, 'VMRS');\r\n // }}\r\n style={{ cursor: 'pointer' }}\r\n />\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 Records Found
\r\n\r\n Job Type \r\n \r\n {state.jobTypeList.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n \r\n \r\n {state.jobTypeList.length > 0 ? (\r\n \r\n \r\n \r\n {state.jobTypeList.map((entry, index) => (\r\n <>\r\n {\r\n // handleDetailpopUp(entry, ' Job Type');\r\n // }}\r\n />\r\n \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 Records Found
\r\n\r\n
\r\n );\r\n })}\r\n \r\n {' '}\r\n \r\n
\r\n {m.name}
\r\n \r\n (\r\n {m.Total ? £{m.Total.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}) : <>£0.00}\r\n )\r\n
\r\n \r\n \r\n Depots\r\n \r\n
\r\n \r\n {state.deoptList.length > 0 ? (\r\n \r\n \r\n \r\n {\r\n // handleDetailpopUp(entry, ' Depots');\r\n // }}\r\n style={{ cursor: 'pointer' }}\r\n />\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 Records Found
\r\n\r\n
\r\n ) : (\r\n Select customer to view report data
\r\n\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n Name :{value.name}\r\n \r\n \r\n Total :{value.value}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllvehiclecheckchecks = async () => {\r\n let res = await getWithAuth(`vehiclecheckchecks`);\r\n return res;\r\n};\r\n\r\nexport const getvehiclecheckchecksById = async (id) => {\r\n let res = await getWithAuth(`vehiclecheckchecks/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postvehiclecheckchecksData = async (data) => {\r\n let res = await postWithAuth(`vehiclecheckchecks`, data);\r\n return res;\r\n};\r\nexport const getVehicleCategory = async (data) => {\r\n let res = await getWithAuth(`VehicleCategories`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleCheckSection = async (data) => {\r\n let res = await getWithAuth(`vehiclechecksection`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { SelectBox, InputText, SecondaryButton, SecondaryCheckbox, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { getvehiclecheckchecksById, getVehicleCheckSection, postvehiclecheckchecksData } from '../../../../Core/Services/InternalUser/Vehicle/vehicleChecks';\r\nimport { FormControlLabel, FormHelperText, InputLabel } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nconst VehicleCheckCheckMdal = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [state, setState] = useState({\r\n inspectionSheetCheckID: null,\r\n inspectionSheetCheckDescription: '',\r\n inspectionSheetSectionID: props.addID,\r\n inspectionSheetCheckPosition: '',\r\n inspectionSheetCheckLegalRequirement: false,\r\n inspectionSheetCheckActive: true,\r\n inspectionSheetIMReference: '',\r\n dropdownList: [],\r\n errors: {}\r\n });\r\n useEffect(async () => {\r\n if (props.checkUserID) {\r\n let res = await getvehiclecheckchecksById(props.checkUserID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n inspectionSheetCheckID: res.data.inspectionSheetCheckID,\r\n inspectionSheetSectionID: res.data.inspectionSheetCheckSectionID,\r\n inspectionSheetCheckDescription: res.data.inspectionSheetCheckDescription,\r\n inspectionSheetCheckPosition: res.data.inspectionSheetCheckPosition,\r\n inspectionSheetIMReference: res.data.inspectionSheetIMReference,\r\n inspectionSheetCheckLegalRequirement: res.data.inspectionSheetCheckLegalRequirement,\r\n inspectionSheetCheckActive: res.data.inspectionSheetCheckActive\r\n }));\r\n }\r\n }\r\n\r\n let dropDownRes = await getVehicleCheckSection();\r\n const listss = dropDownRes.data.map((dropDownData) => ({\r\n id: dropDownData.inspectionSheetSectionID,\r\n name: dropDownData.inspectionSheetSectionDescription\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n dropdownList: listss\r\n }));\r\n }, []);\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((state) => ({ ...state, [name]: value }));\r\n };\r\n\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { inspectionSheetCheckDescription, inspectionSheetCheckPosition } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!inspectionSheetCheckDescription) {\r\n errors.inspectionSheetCheckDescription = 'Description is required';\r\n formIsValid = false;\r\n }\r\n if (!inspectionSheetCheckPosition) {\r\n errors.inspectionSheetCheckPosition = 'Position is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n let formData = {\r\n inspectionSheetCheckID: state.inspectionSheetCheckID,\r\n inspectionSheetCheckSectionID: state.inspectionSheetSectionID,\r\n inspectionSheetCheckDescription: state.inspectionSheetCheckDescription,\r\n inspectionSheetIMReference: state.inspectionSheetIMReference,\r\n inspectionSheetCheckPosition: state.inspectionSheetCheckPosition,\r\n inspectionSheetCheckLegalRequirement: state.inspectionSheetCheckLegalRequirement,\r\n inspectionSheetCheckActive: state.inspectionSheetCheckActive\r\n };\r\n let res = await postvehiclecheckchecksData(formData);\r\n if (res.success) {\r\n showToastSuccess('Vehicle Check Checks Added Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n {state.modalToggle ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { getAllvehiclecheckchecks, getVehicleCategory, getVehicleCheckSection } from '../../../../Core/Services/InternalUser/Vehicle/vehicleChecks';\r\nimport { BreadCrumbs, Accordion, TabView } from '../../../../Core/Controls';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { BasicTable } from './tableCheckcheck';\r\nimport { Button, Grid } from '@material-ui/core';\r\nimport CheckSectionModal from '../CheckSection/checkSectionModal';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport './vehicleStyle.scss';\r\nimport { CustomIconButton, SecondaryButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicle Checks', active: true },\r\n { name: 'Inspection Checks', active: true }\r\n];\r\n\r\nconst VehicleCheckCheck = (props) => {\r\n const [state, setState] = useState({\r\n checkList: [],\r\n VehicleCategoryList: [],\r\n accOpen: false,\r\n tabs: [],\r\n accHeading: [],\r\n modalToggle: false,\r\n expandCollapsedAt: null\r\n });\r\n\r\n useEffect(async () => {\r\n pullcheckData();\r\n }, []);\r\n\r\n const pullcheckData = async () => {\r\n let pros = [];\r\n pros.push(getVehicleCategory(), getVehicleCheckSection());\r\n let responses = await Promise.all(pros);\r\n // accordion data.....\r\n const accHeading = responses[1].data.map((m) => ({\r\n id: m.inspectionSheetSectionVehicleCategoryID,\r\n heading: m.inspectionSheetSectionDescription,\r\n addid: m.inspectionSheetSectionID\r\n }));\r\n // Tabs data....\r\n const tabs = responses[0].data.list.map((item) => ({\r\n id: item.vehicleCategoryID,\r\n label: item.vehicleCategoryDescription,\r\n accData: accHeading.filter((data) => data.id === item.vehicleCategoryID)\r\n }));\r\n\r\n setState((st) => ({\r\n ...st,\r\n accHeading,\r\n tabs\r\n }));\r\n };\r\n\r\n const closeDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullcheckData();\r\n };\r\n\r\n const handleExpand = (value) => {\r\n setState((state) => ({\r\n ...state,\r\n expandCollapsedAt: new Date(),\r\n accOpen: value\r\n }));\r\n };\r\n const addCheckSections = () => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: true\r\n }));\r\n };\r\n\r\n const title = 'Add Check Section';\r\n\r\n const checkChecks = state.tabs.map((tab) => {\r\n const heading = tab.accData.map((o) => o.heading);\r\n const filterAccordion = tab.accData.filter((o, index) => !heading.includes(o.heading, index + 1));\r\n return {\r\n label: tab.label,\r\n body: (\r\n \r\n \r\n \r\n addCheckSections()}>\r\n \r\n \r\n \r\n {filterAccordion.map((ad) => (\r\n \r\n \r\n
\r\n )\r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n\r\n {state.modalToggle ? (\r\n closeDialog(false)}>\r\n closeDialog(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleCheckCheck;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { DataGrid, formatters } from '../../../../../Core/Controls';\r\nimport { getJobHistory } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\n\r\nconst columns = [\r\n { key: 'dateStarted', name: 'Date', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n { key: 'startedBy', name: 'Name' },\r\n { key: 'status', name: 'Status' }\r\n];\r\n\r\nconst JobHistory = (props) => {\r\n const { showToastError } = useToast();\r\n const [state, setState] = useState({\r\n showLoader: true,\r\n jobHistoryList: []\r\n });\r\n\r\n const pullHistoryAndUpdateState = async () => {\r\n let res = await getJobHistory(props.jobID);\r\n if (res.success) {\r\n setState((st) => ({ ...st, showLoader: false, jobHistoryList: res.data.jobHistoryList }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullHistoryAndUpdateState();\r\n }, [props.refreshDependancy]);\r\n\r\n return (\r\n \r\n {\r\n handleExpand(true);\r\n }}\r\n size=\"small\"\r\n color=\"secondary\"\r\n style={{ textTransform: 'capitalize' }}\r\n >\r\n  Expand All\r\n \r\n {\r\n handleExpand(false);\r\n }}\r\n size=\"small\"\r\n color=\"secondary\"\r\n style={{ marginLeft: 2, textTransform: 'capitalize' }}\r\n >\r\n  Collapse All\r\n \r\n
\r\n \r\n
\r\n\r\n {state.modalToggle ? (\r\n
\r\n
\r\n );\r\n};\r\nexport default JobHistory;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { DataGrid, EditButton, formatters } from '../../../../../Core/Controls';\r\nimport { getUpcomingEvents, mergeJobToMaster } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport { CustomIconButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport LockIcon from '@material-ui/icons/Lock';\r\nimport { Grid } from '@material-ui/core';\r\nimport MergeTypeIcon from '@material-ui/icons/MergeType';\r\n\r\nconst UpcomingEvents = (props) => {\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\nexport default UpcomingEvents;\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { InputText, SecondaryButton, MandatoryField, formatters } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../controllerStyle.scss';\r\nimport { UpdateJobStatus, JobsApproveJob, JobsConfirmJob } from '../../../../../Core/Services/InternalUser/JOB/jobQueryService';\r\n\r\nconst JobEstimateModal = (props) => {\r\n const [state, setState] = useState({\r\n jobQueryMessage: '',\r\n jobQueryClosed: 1,\r\n jobEstimatedCost: null,\r\n showLoader: true,\r\n errors: {}\r\n });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n if (props.title == 'Revise Estimate' && !state.jobQueryMessage) {\r\n err.jobQueryMessage = 'This field is requried';\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n\r\n const handleData = async (isAccept) => {\r\n let data = {\r\n jobID: props.jobQueryJobID,\r\n notes: state.jobQueryMessage,\r\n requestEstimate: false,\r\n markInProgress: false\r\n };\r\n let res = '';\r\n if (props.title == 'Submit Estimate') {\r\n data.jobEstimate = 1;\r\n res = await UpdateJobStatus(data);\r\n } else if (props.title == 'Revise Estimate') {\r\n if (validate()) {\r\n data.estimateRevised = true;\r\n res = await UpdateJobStatus(data);\r\n } else {\r\n return;\r\n }\r\n } else if (props.title == 'Set In Progress') {\r\n data.markInProgress = true;\r\n res = await UpdateJobStatus(data);\r\n } else if (props.title == 'Accept Estimate') {\r\n if (isAccept == '1') {\r\n data.acceptEstimate = isAccept;\r\n res = await UpdateJobStatus(data);\r\n } else {\r\n props.onClose(false);\r\n return;\r\n }\r\n } else if (props.title == 'Approve Order') {\r\n if (isAccept == '1') {\r\n errors.approvOrder = 'Approve Order is required';\r\n data.jobApprovedOrderNo = state.approvOrder;\r\n data.approved = true;\r\n state.approvOrder ? (res = await JobsApproveJob(data)) : setState((state) => ({ ...state, errors: errors }));\r\n } else {\r\n // errors.jobQueryMessage = 'Message is required';\r\n // data.approved = true;\r\n // state.jobQueryMessage ? (res = await JobsApproveJob(data)) : setState((state) => ({ ...state, errors: errors }));\r\n props.onClose(false);\r\n return;\r\n }\r\n } else if (props.title == 'Send for customer approval') {\r\n if (isAccept == '1') {\r\n res = await JobsConfirmJob({ id: props.jobQueryJobID });\r\n props.onClose(true);\r\n } else {\r\n props.onClose(false);\r\n }\r\n return;\r\n } else if (props.title == 'Send To Customer') {\r\n data.passToCustomer = true;\r\n res = await UpdateJobStatus(data);\r\n } else {\r\n alert('This Functionality is pending');\r\n }\r\n if (res.success) {\r\n showToastSuccess('Job saved sucessfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n const inputChange = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n props.onYes()} />\r\n \r\n \r\n props.onClose(false)} />\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default SubmitWarnngModal;\r\n","import React, { useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { SecondaryButton, PrimaryButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport JobEstimateModal from './JobEstimate';\r\nimport JobQueryModal from './JobQuery';\r\nimport AcceptEstimateModal from './AcceptEstimateModal';\r\nimport SubmitWarnngModal from './SubmitWarning';\r\nimport DeleteJobModal from '../deleteJobModal';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { CustomChip } from '../../../../../Core/Controls';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\n\r\nconst CancelButton = (props) => {\r\n return (\r\n // \r\n \r\n \r\n \r\n \r\n Service Agent \r\n {jobDetails?.serviceAgentName} \r\n \r\n \r\n Job Depot \r\n {jobDetails.depotName} \r\n \r\n \r\n Customer Order No \r\n {jobDetails.jobCustomerOrderNo} \r\n \r\n \r\n Estimated Cost \r\n {jobDetails.jobEstimatedCost} \r\n \r\n \r\n Proforma Invoice Net \r\n {jobDetails.jobProformaInvNet} \r\n \r\n \r\n Order Limit \r\n {jobDetails.jobLimit} \r\n \r\n \r\n Authority Reference \r\n {jobDetails.jobAuthorityRef} \r\n \r\n \r\n Mileage Date \r\n {jobDetails.jobMileageDate} \r\n \r\n \r\n Mileage \r\n {jobDetails.jobMileage} \r\n \r\n \r\n Approved By \r\n {jobDetails.approvedBy} \r\n \r\n \r\n Approved Date \r\n {jobDetails.jobApprovedDate} \r\n \r\n \r\n Approved Order No \r\n {jobDetails.jobApprovedOrderNo} \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default JobDetailsInfo;\r\n","import { postWithAuth, getWithAuth } from '../../../Basic/HttpService';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getAllJobItems = async (id) => {\r\n let res = await getWithAuth(`VehicleJobItems?VehicleJobID=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getJobItemById = async (id) => {\r\n let res = await getWithAuth(`VehicleJobItems/${id}`);\r\n return res;\r\n};\r\n\r\nexport const getJobItemsDropDown = memoize(async () => {\r\n let res = await getWithAuth(`VehicleJobItems/Dropdowns`);\r\n return res;\r\n});\r\n\r\nexport const postJobItem = async (data) => {\r\n let res = await postWithAuth(`VehicleJobItems`, data);\r\n return res;\r\n};\r\nexport const createInvoice = async (data) => {\r\n let res = await postWithAuth(`Invoices/InvoiceAddFromApprovedItems`, data);\r\n return res;\r\n};\r\n\r\nexport const salesInvoice = async (data) => {\r\n let res = await postWithAuth(`Invoices/SalesInvoiceAddFromApprovedItems`, data);\r\n return res;\r\n};\r\n\r\nexport const getSalesDropdown = async (id) => {\r\n let res = await getWithAuth(`Invoices/SalesInvoiceScreenDropdowns?id=${id}`);\r\n return res;\r\n};\r\n\r\nexport const getPastJobByVMRSCategoryNSubCategory = async (jobId, VehicleId, VMRSCatId, VMRSSubCatId) => {\r\n let res = await getWithAuth(\r\n `VehicleJobItems/GetPastJobsByVMRSCategorySubCategory/${jobId}?VehicleID=${VehicleId}&VMRSCategoryID=${VMRSCatId}&VMRSSubCategoryID=${VMRSSubCatId}`\r\n );\r\n return res;\r\n};\r\n\r\nexport const GetPurchaseInvoice = async (id) => {\r\n let res = await getWithAuth(`Invoices/GetPurchaseInvoiceLines?id=${id}`);\r\n\r\n return res;\r\n};\r\n\r\nexport const GetSalesInvoice = async (id) => {\r\n let res = await getWithAuth(`Invoices/GetSalesInvoiceLines?id=${id}`);\r\n\r\n return res;\r\n};\r\n\r\nexport const SalesInvoiceAddHeaderLabourPart = async (data) => {\r\n let res = await postWithAuth(`Invoices/SalesInvoiceAddHeaderLabourPart`, data);\r\n\r\n return res;\r\n};\r\nexport const GetVehicleSalesInvoice = async (id) => {\r\n let res = await getWithAuth(`Invoices/VehicleSalesInvoice?id=${id}`);\r\n return res;\r\n};\r\nexport const UpdateVehicleSalesInvoice = async (data) => {\r\n let res = await postWithAuth(`Invoices/UpdateVehicleSalesInvoice`, data);\r\n\r\n return res;\r\n};\r\nexport const PostInternalVehicleJobsItem = async (data) => {\r\n let res = await postWithAuth(`VehicleJobItems/InternalVehicleJobsItem`, data);\r\n return res;\r\n};\r\nexport const VehicleSalesInvoiceGenratePdf = async (data) => {\r\n let res = await getWithAuth(`Invoices/VehicleSalesInvoiceGenratePdf?Id=${data}`, { Id: data });\r\n return res;\r\n};\r\n","import { FormHelperText, Grid, Typography, InputLabel } from '@material-ui/core';\r\nimport React, { useEffect, useState, useMemo } from 'react';\r\nimport { formatters } from '../../../../../Core/Controls';\r\nimport '../../../../commonStyle.scss';\r\nimport '../../controllerStyle.scss';\r\nimport { getPastJobByVMRSCategoryNSubCategory } from '../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport DataGrid from '../../../../../Core/Controls/Grid';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst PastJobs = (props) => {\r\n const [state, setState] = useState({ pastJobs: [] });\r\n\r\n useEffect(async () => {\r\n if (props.vehicleID && props.jobId && props.VMRSCategoryID && props.VMRSSubCategoryID) {\r\n let res = await getPastJobByVMRSCategoryNSubCategory(props.jobId, props.vehicleID, props.VMRSCategoryID, props.VMRSSubCategoryID);\r\n let data = res.data?.details;\r\n if (data) {\r\n setState((st) => ({\r\n ...st,\r\n pastJobs: data\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleEditClick = (row) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${row?.jobID}/${props.vehicleID}`,\r\n state: 'jobs'\r\n });\r\n };\r\n const columns = [\r\n { key: 'jobDate', name: 'Date', width: 110, formatter: formatters.Date_DDMMMYYYY },\r\n {\r\n key: 'orderNo',\r\n name: 'Job Ref',\r\n width: 91,\r\n formatter: (params) => {\r\n return (\r\n \r\n \r\n {params.row.orderNo}\r\n \r\n
\r\n );\r\n }\r\n },\r\n { key: 'labourLine', name: 'Description' },\r\n {\r\n key: 'labour',\r\n name: 'Labour',\r\n width: 94,\r\n formatter: formatters.NumberWithPound,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n { key: 'parts', name: 'Parts', width: 100, formatter: formatters.NumberWithPound, headerRenderer: formatters.ColumnHeaderAlignRight },\r\n { key: 'agent', name: 'Agent' }\r\n ];\r\n return (\r\n {data.row.vehicleJobPartDiscount || 0 + '%'}
,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'getTotal',\r\n name: 'Total',\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n }\r\n];\r\n\r\nfunction AddJobItemModal(props) {\r\n const [state, setState] = useState({\r\n setBackup: [],\r\n jobItemID: null,\r\n labourDescription: '',\r\n jobItemStatusID: null,\r\n JobItemCostTypeID: null,\r\n jobItemStatus: [],\r\n labourHours: '',\r\n labourRate: '',\r\n labourDiscount: 0,\r\n labourTotal: '',\r\n workCategory: '',\r\n costCategory: '',\r\n partNumber: '',\r\n partQuantity: null,\r\n partUnitPrice: null,\r\n partDescription: '',\r\n partsDiscount: '',\r\n partsTotal: '',\r\n workList: [],\r\n costCategories: [],\r\n rows: [],\r\n errors: {},\r\n readOnly: false,\r\n showPastJob: false,\r\n costCategoryValue: null,\r\n jobItemStatusIDValue: null,\r\n jobItemCostTypeIDValue: null,\r\n workCategoryValue: null,\r\n showCancelConfirmModal: false\r\n });\r\n const { userRoles } = useLoginInfo();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const isCustomer = userRoles.includes('customer');\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const handleUpdatePart = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n id: params.id,\r\n partNumber: params.vehicleJobPartNumber,\r\n partQuantity: params.vehicleJobPartQuantity,\r\n partsDiscount: params.vehicleJobPartDiscount,\r\n partUnitPrice: params.vehicleJobPartUnitPrice,\r\n partDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n partId: params.id,\r\n isUpdate: true\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDeletePart = (params) => {\r\n const id = params.id;\r\n const newList = state.rows.filter((item) => item.id !== id);\r\n let newPartToSetIsDelete = {\r\n id: params.id,\r\n partId: params.id,\r\n vehicleJobPartNumber: params.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: params.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: params.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: params.vehicleJobPartUnitPrice,\r\n vehicleJobPartDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n isDeleted: true\r\n };\r\n newList.push(newPartToSetIsDelete);\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n rows: newList\r\n };\r\n return nst;\r\n });\r\n };\r\n let checkStatus =\r\n (props.Status === 'AA' || props.Status === 'JP' || props.Status === 'JQ' || props.Status === 'EA' || props.Status === 'EU') &&\r\n !props.isCustomer &&\r\n checkhaveAccess?.CanUpdateJobs; //hide if role is customer\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n \r\n handleUpdatePart(data.row)} />\r\n {checkhaveAccess?.CanDeleteJobLines && handleDeletePart(data.row)} toolTipTitle=\"Delete Job Item\" />}\r\n
\r\n );\r\n };\r\n\r\n const CalculateTotal = (data) => {\r\n const { vehicleJobPartQuantity, vehicleJobPartUnitPrice, vehicleJobPartDiscount } = data.row;\r\n const total = (vehicleJobPartUnitPrice * vehicleJobPartQuantity * (100 - vehicleJobPartDiscount || 0)) / 100;\r\n return £{total.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol2 = newColumn.find((item) => item.key === 'getTotal');\r\n if (checkStatus) {\r\n newColumn.splice(0, 0, { key: 'action', name: 'Action', formatter: ActionButtons, width: '5%' });\r\n }\r\n if (actionCol2) {\r\n actionCol2.formatter = CalculateTotal;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n setState((st) => ({ ...st, islabourRateSet: props.islabourRateSet, labourRate: props.labourRate }));\r\n let res1 = await getJobItemsDropDown();\r\n if (res1.success) {\r\n const category = res1.data.vmrsCategory.map((item) => ({\r\n id: item.catid + ',' + item.subcatid,\r\n name: item.subcatname\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n workList: category,\r\n costCategories: res1.data.costCategories,\r\n jobItemStatus: res1.data.jobItemStatus,\r\n costTypeList: res1.data.costType\r\n }));\r\n }\r\n if (props.jobItemID) {\r\n let partList = [];\r\n let res = await getJobItemById(props.jobItemID);\r\n if (isCustomer) {\r\n partList = res.data.vehicleJobPartsDetails.map((item, index) => ({\r\n ...item,\r\n vehicleJobPartDiscount: item.vehicleJobPartCustomerDiscount,\r\n vehicleJobPartQuantity: item.vehicleJobPartCustomerQuantity,\r\n vehicleJobPartUnitPrice: item.vehicleJobPartCustomerUnitPrice,\r\n id: index + 1,\r\n isDeleted: false\r\n }));\r\n } else {\r\n partList = res.data.vehicleJobPartsDetails.map((item, index) => ({\r\n ...item,\r\n id: index + 1,\r\n isDeleted: false\r\n }));\r\n }\r\n const info = res.data.vehicleJobitemdetails[0];\r\n if (res.success) {\r\n // setState((state) => ({\r\n // ...state,\r\n // jobItemID: info.jobItemID,\r\n // labourDescription: info.jobItemDescription,\r\n // labourHours: info.jobItemLabourHours,\r\n // labourRate: info.jobItemLabHourRate,\r\n // labourDiscount: info.jobItemLabourDiscount,\r\n // labourTotal: info.labourTotal,\r\n // jobItemJobID: info.jobItemJobID,\r\n // jobItemStatusID: info.jobItemStatusID,\r\n // jobItemCostTypeID: info.jobItemCostTypeID,\r\n // workCategory: info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID, //state.workList?.find(({ id }) => id === info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID)?.name,\r\n // jobItemVMRSCategoryID: info.jobItemVMRSCategoryID,\r\n // jobItemVMRSSubCategoryID: info.jobItemVMRSSubCategoryID,\r\n // costCategory: info.jobItemCostCategoryID,\r\n // rows: partList,\r\n // readOnly: info.allowUpdate == 'Y' ? false : true,\r\n // allowUpdate: info.allowUpdate\r\n // }));\r\n let newSt = {};\r\n newSt.jobItemID = info.jobItemID;\r\n newSt.labourDescription = info.jobItemDescription;\r\n newSt.jobItemJobID = info.jobItemJobID;\r\n newSt.jobItemStatusID = info.jobItemStatusID;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n newSt.workCategory = info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID;\r\n newSt.jobItemVMRSCategoryID = info.jobItemVMRSCategoryID;\r\n newSt.jobItemVMRSSubCategoryID = info.jobItemVMRSSubCategoryID;\r\n newSt.costCategory = info.jobItemCostCategoryID;\r\n newSt.rows = partList;\r\n newSt.readOnly = info.allowUpdate == 'Y' ? false : true;\r\n newSt.allowUpdate = info.allowUpdat;\r\n newSt.labourTotal = info.labourTotal;\r\n if (isCustomer) {\r\n newSt.labourHours = info.jobItemCustomerLabourHours;\r\n newSt.labourRate = info.jobItemCustomerLabHourRate;\r\n newSt.labourDiscount = info.jobItemCustomerLabourDiscount;\r\n newSt.jobItemCostTypeID = info.jobItemCustomerLabourCost;\r\n } else {\r\n newSt.labourHours = info.jobItemLabourHours;\r\n newSt.labourRate = info.jobItemLabHourRate;\r\n newSt.labourDiscount = info.jobItemLabourDiscount;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n }\r\n setState((state) => ({\r\n ...state,\r\n ...newSt\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.workCategory && state.workList.length > 0) {\r\n newSt.workCategoryValue = state.workList?.find(({ id }) => id === state.workCategory);\r\n }\r\n if (state.costCategory && state.costCategories.length > 0) {\r\n newSt.costCategoryValue = state.costCategories?.find(({ id }) => id === state.costCategory);\r\n }\r\n\r\n if (state.jobItemStatusID && state.jobItemStatus.length > 0) {\r\n newSt.jobItemStatusIDValue = state.jobItemStatus?.find(({ id }) => id === state.jobItemStatusID);\r\n }\r\n if (state.jobItemCostTypeID && state.costTypeList.length > 0) {\r\n newSt.jobItemCostTypeIDValue = state.costTypeList?.find(({ id }) => id === state.jobItemCostTypeID);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.workCategory,\r\n state.workList,\r\n state.costCategory,\r\n state.costCategories,\r\n state.jobItemStatusID,\r\n state.jobItemStatus,\r\n state.costTypeList,\r\n state.jobItemCostTypeID\r\n ]);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n // let temparr = [];\r\n // temparr.push(name);\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n setBackup: [...state.setBackup, name]\r\n }));\r\n };\r\n\r\n const caltotal = (state.partUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n const total = caltotal.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\r\n const total1 = (state.labourRate * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n\r\n const WorkCategoryChange = (nm) => (e, val) => {\r\n if (nm === 'workCategoryValue') {\r\n const cat = val?.id?.split(',');\r\n if (cat?.length) {\r\n setState((state) => ({\r\n ...state,\r\n jobItemVMRSCategoryID: cat[0],\r\n jobItemVMRSSubCategoryID: cat[1],\r\n // workCategory: val.name\r\n [nm]: val\r\n }));\r\n }\r\n } else {\r\n setState((state) => ({\r\n ...state,\r\n [nm]: val\r\n }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { labourDescription, workCategoryValue, labourRate, jobItemStatusID, labourHours, jobItemCostTypeIDValue } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(labourDescription)) {\r\n errors.labourDescription = 'Description is required';\r\n formIsValid = false;\r\n }\r\n if (!workCategoryValue) {\r\n errors.workCategory = 'Work Category is required';\r\n formIsValid = false;\r\n }\r\n if (!state.costCategoryValue) {\r\n errors.costCategory = 'Cost Category is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(labourRate)) {\r\n errors.labourRate = 'Rate is required';\r\n formIsValid = false;\r\n }\r\n if (!isServiceAgent && !state.jobItemStatusIDValue) {\r\n errors.jobItemStatusID = 'Status is required';\r\n formIsValid = false;\r\n }\r\n if (!jobItemCostTypeIDValue) {\r\n errors.jobItemCostTypeIDValue = 'Cost Type is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (!labourHours) {\r\n errors.labourHours = 'Hours is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitSendForApproval = async (val) => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const PartsVM = state.rows\r\n .filter((data) => data.isDeleted != true)\r\n .map((row) => ({\r\n vehicleJobPartNumber: row.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: row.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: row.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: row.vehicleJobPartUnitPrice,\r\n vehicleJobPartDescription: row.vehicleJobPartDescription\r\n }));\r\n const data = {\r\n jobItemDescription: state.labourDescription,\r\n jobItemLabourHours: state.labourHours,\r\n jobItemLabHourRate: state.labourRate,\r\n jobItemLabourDiscount: state.labourDiscount || 0,\r\n jobItemID: state.jobItemID,\r\n jobItemVMRSCategoryID: state.jobItemVMRSCategoryID,\r\n jobItemVMRSSubCategoryID: state.jobItemVMRSSubCategoryID,\r\n jobItemJobID: props.jobItemJobID,\r\n jobItemCostCategoryID: state.costCategoryValue?.id,\r\n vehicleJobPartsVM: PartsVM,\r\n jobItemStatusID: state.jobItemStatusIDValue?.id,\r\n jobItemCostTypeID: state.jobItemCostTypeIDValue?.id,\r\n sendForApproval: 0\r\n };\r\n let res = await postJobItem(data);\r\n if (res.success) {\r\n showToastSuccess('Job item saved successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const addPartToLocally = () => {\r\n if (state.partDescription === '') {\r\n showToastError('Description is required');\r\n }\r\n if (state.partNumber === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partQuantity === null || state.partQuantity === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partUnitPrice === null || state.partUnitPrice === '') {\r\n showToastError('Price is required');\r\n } else {\r\n let newPartToAdd = {\r\n vehicleJobPartNumber: state.partNumber,\r\n vehicleJobPartQuantity: state.partQuantity,\r\n vehicleJobPartDiscount: state.partsDiscount,\r\n vehicleJobPartUnitPrice: state.partUnitPrice,\r\n vehicleJobPartDescription: state.partDescription,\r\n isDeleted: false,\r\n partsTotal: total\r\n };\r\n setState((st) => ({\r\n ...st,\r\n rows: state.rows.filter((item) => item.id !== state.partId)\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 partNumber: '',\r\n partQuantity: '',\r\n partsDiscount: '',\r\n partUnitPrice: '',\r\n partDescription: '',\r\n partsTotal: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n }\r\n };\r\n const closeTheDialog = () => {\r\n setState((st) => ({ ...st, showPastJob: false }));\r\n };\r\n\r\n const handleClose = () => {\r\n props.onClose(false);\r\n };\r\n\r\n const handleOpen = () => {\r\n setState((st) => ({ ...st, showCancelConfirmModal: !st.showCancelConfirmModal }));\r\n };\r\n\r\n let setbtn = state.setBackup.length > 0 ? handleOpen : handleClose;\r\n return (\r\n \r\n {state.showPastJob && (\r\n \r\n \r\n )}\r\n\r\n \r\n {checkStatus && (\r\n \r\n \r\n Save\r\n \r\n \r\n )}\r\n \r\n {\r\n // props.onClose(false);\r\n // }\r\n }\r\n >\r\n Cancel\r\n \r\n \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 £{total1?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} \r\n \r\n \r\n \r\n \r\n {(state.workCategory || !isServiceAgent) && (\r\n \r\n {'\\u{2800}'} \r\n {\r\n setState((st) => ({ ...st, showPastJob: true }));\r\n }}\r\n icon={SearchIcon}\r\n />\r\n \r\n )}\r\n {state.errors.workCategory} \r\n \r\n \r\n {state.errors.costCategory} \r\n \r\n {!isServiceAgent && (\r\n <>\r\n \r\n {state.errors.jobItemCostTypeIDValue} \r\n \r\n \r\n {state.errors.jobItemStatusID} \r\n \r\n \r\n )}\r\n \r\n {checkStatus && (\r\n <>\r\n \r\n \r\n \r\n \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.partId ? 'Update' : 'Add'}\r\n \r\n \r\n \r\n \r\n )}\r\n {state.showCancelConfirmModal ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default AddJobItemModal;\r\n","import React, { useState } from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport { SecondaryButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport JobEstimateModal from '../../JobStatusBtn/JobEstimate';\r\nimport JobQueryModal from '../../JobStatusBtn/JobQuery';\r\nimport SubmitWarnngModal from '../../JobStatusBtn/SubmitWarning';\r\nimport { CustomChip } from '../../../../../../Core/Controls';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport AcceptEstimateModal from '../../JobStatusBtn/AcceptEstimateModal';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\n\r\nconst CancelButton = (props) => {\r\n return \r\n item.isDeleted !== true)}\r\n isRowHovered={true}\r\n loadingData={state.loader}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\nexport default SalesLines;\r\n","import { postWithAuth, getWithAuth } from \"../../../Basic/HttpService\";\r\n\r\nexport const getAllRetorqueTypes = async () => {\r\n let res = await getWithAuth(`Retorquereasons`);\r\n return res;\r\n};\r\n\r\nexport const getRetorqueById = async (id) => {\r\n let res = await getWithAuth(`Retorquereasons/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postRetorqueData = async (data) => {\r\n let res = await postWithAuth(`Retorquereasons`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { InputLabel, FormHelperText } from \"@material-ui/core\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../Core/Controls\";\r\nimport { getRetorqueById, postRetorqueData } from \"../../../Core/Services/InternalUser/VOR/retorqueReasonsService\";\r\nimport { useToast } from \"../../../Core/Hooks/useToast\";\r\nimport \"../../commonStyle.scss\";\r\n\r\nfunction RetorqueReasonsModal(props) {\r\n const [state, setState] = useState({\r\n retorqueReasonID: null,\r\n retorqueReasonDescription: \"\",\r\n errors: {},\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.retorqueReasonID) {\r\n let res = await getRetorqueById(props.retorqueReasonID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n retorqueReasonID: res.data.retorqueReasonID,\r\n retorqueReasonDescription: res.data.retorqueReasonDescription,\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { retorqueReasonDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(retorqueReasonDescription)) {\r\n errors.retorqueReasonDescription = \"Retorque Reason is required\";\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const retorqueData = {\r\n retorqueReasonID: state.retorqueReasonID,\r\n retorqueReasonDescription: state.retorqueReasonDescription,\r\n };\r\n let res = await postRetorqueData(retorqueData);\r\n if (res.success) {\r\n showToastSuccess(\"Retorque Reason Updated sucessfully\");\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n retorqueHandler(row)} toolTipTitle=\"Edit Retorque Reason\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.retorqueReasonID ? 'Update Retorque Reason' : 'Add Retorque Reason';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullRetorquereasons();\r\n };\r\n\r\n return (\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={'Retorquereasons'}\r\n btnTitle=\"Add Retorque Reason\"\r\n onBtnClick={() => retorqueHandler(null)}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default RetorqueReasons;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography, Divider } from '@material-ui/core';\r\nimport {\r\n SecondaryButton,\r\n SelectBox,\r\n formatters,\r\n MandatoryField,\r\n SingleSelect,\r\n SimpleField,\r\n DatePicker,\r\n SecondaryCheckbox\r\n} from '../../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../../Core/Hooks/useToast';\r\nimport '../../../../../commonStyle.scss';\r\nimport { GetSalesInvoice, SalesInvoiceAddHeaderLabourPart } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport moment from 'moment';\r\nimport { some } from 'lodash';\r\n//import './jobstyle.scss';\r\nimport { useWindowSize } from '../../../../../../Core/Hooks/useWindowSize';\r\nimport SalesLines from './sellerLines';\r\nimport RetorqueReasons from '../../../../../VOR/RetorqueReasonsScreen/RetorqueReasons';\r\nfunction AddJobItemModal(props) {\r\n const [width, height] = useWindowSize();\r\n const [state, setState] = useState({\r\n invoiceLines: [],\r\n vatRate: [],\r\n vehicleDetails: [],\r\n partsDetails: [],\r\n purchaseInvoiceDate: moment().format('YYYY-DD-MM'),\r\n purchaseInvoiceDateDue: '',\r\n purchaseInvoiceDate: '',\r\n purchaseNominalCode: '',\r\n errors: {},\r\n vatRate: null\r\n });\r\n const { userRoles } = useLoginInfo();\r\n\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let res1 = await GetSalesInvoice(props.scheduleJobID);\r\n if (res1.success) {\r\n setState((st) => ({\r\n ...st,\r\n vatRate: res1.data.vatRate,\r\n vehicleDetails: res1.data?.vehicleDetails || [],\r\n invoiceLines: res1.data.invoiceLines.map((m) => ({ ...m, invoiceItemVATRateID: null, invoiceItemVAT: null, isSelected: true })) || [],\r\n partsDetails: res1.data.partsDetails.map((m) => ({ ...m, invoiceItemVATRateID: null, invoiceItemVAT: null, isSelected: true }))\r\n }));\r\n }\r\n }, []);\r\n\r\n const inputChange = (e) => {\r\n const { name, value, type } = e.target;\r\n if (name === 'purchaseInvoiceDate') {\r\n let dueDate = moment(value).add(state.vehicleDetails[0]?.paymentDays, 'd');\r\n setState((st) => ({ ...st, [name]: value, purchaseInvoiceDateDue: moment(dueDate).format('YYYY-MM-DD') }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n const percentage = (num, per) => {\r\n return (num / 100) * per;\r\n };\r\n const getFixedDigit = (val) => {\r\n return val ? val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,') : 0;\r\n };\r\n const onInvoiceItemChange = (ev, val) => {\r\n if (val) {\r\n\r\n let invoiceLines = state.invoiceLines.map((x) => ({\r\n ...x,\r\n invoiceItemVAT: getFixedDigit(percentage(x.labourExVAT, val.vatRatePercent)),\r\n invoiceItemVATRateID: val\r\n }));\r\n let changedArray = state.partsDetails.map((x) => ({\r\n ...x,\r\n invoiceItemVAT: getFixedDigit(percentage(x.total, val.vatRatePercent)),\r\n invoiceItemVATRateID: val\r\n }));\r\n setState((state) => {\r\n const nst = { ...state, partsDetails: changedArray, invoiceLines: invoiceLines };\r\n return nst;\r\n });\r\n }\r\n };\r\n\r\n const invoiceLinesCheckField = (num, i) => (e, val) => {\r\n const { name, checked, type, value } = e.target;\r\n let changedArray = [...state.invoiceLines];\r\n let objIndex = state.invoiceLines.findIndex((x) => x.itemID == i);\r\n if (type?.toLowerCase() === 'text' || type.toLowerCase() === 'number') {\r\n changedArray[objIndex][name] = value;\r\n if (name == 'labourHours' || name == 'labourRate' || name == 'labourDiscount') {\r\n let data = changedArray[objIndex];\r\n const total1 = (data['labourHours'] * data['labourRate'] * (100 - data['labourDiscount'] || 0)) / 100;\r\n data['labourExVAT'] = getFixedDigit(total1);\r\n }\r\n } else if (val) {\r\n changedArray[objIndex]['invoiceItemVATRateID'] = val;\r\n changedArray[objIndex]['invoiceItemVAT'] = getFixedDigit(percentage(num, val.vatRatePercent));\r\n }\r\n setState((state) => {\r\n const nst = { ...state, invoiceLines: changedArray };\r\n return nst;\r\n });\r\n };\r\n\r\n const invoiceLinesCheckBox = (i) => (e) => {\r\n const { name, checked } = e.target;\r\n let changedArray = [...state.invoiceLines];\r\n let objIndex = state.invoiceLines.findIndex((x) => x.itemID == i);\r\n changedArray[objIndex][name] = checked;\r\n setState((state) => {\r\n const nst = { ...state, invoiceLines: changedArray };\r\n return nst;\r\n });\r\n };\r\n const PartSelectChange = (num, id) => (ev, val) => {\r\n let changedArray = [...state.partsDetails];\r\n let objIndex = state.partsDetails.findIndex((x) => x.partID == id);\r\n if (val) {\r\n let calPercentage = percentage(num, val.vatRatePercent);\r\n changedArray[objIndex]['invoiceItemVATRateID'] = val;\r\n changedArray[objIndex]['invoiceItemVAT'] = getFixedDigit(calPercentage);\r\n setState((state) => {\r\n const nst = { ...state, partsDetails: changedArray };\r\n return nst;\r\n });\r\n }\r\n };\r\n\r\n const handleFields = (i) => (e) => {\r\n const { name, value, checked, type } = e.target;\r\n let changedArray = [...state.partsDetails];\r\n let objIndex = state.partsDetails.findIndex((x) => x.partID == i);\r\n if (type.toLowerCase() === 'text' || type.toLowerCase() === 'number') {\r\n changedArray[objIndex][name] = value;\r\n if (name == 'qty' || name == 'unitPrice' || name == 'discount') {\r\n let data = changedArray[objIndex];\r\n const total1 = (data['qty'] * data['unitPrice'] * (100 - data['discount'] || 0)) / 100;\r\n data['total'] = getFixedDigit(total1);\r\n }\r\n } else {\r\n changedArray[objIndex][name] = checked;\r\n }\r\n\r\n setState((state) => {\r\n const nst = { ...state, partsDetails: changedArray };\r\n return nst;\r\n });\r\n };\r\n\r\n const validation = () => {\r\n const { purchaseInvoiceDate, purchaseInvoiceDateDue, invoiceLines, partsDetails } = state;\r\n let errors = {};\r\n let isValid = true;\r\n if (!purchaseInvoiceDate) {\r\n errors.purchaseInvoiceDate = 'Date is required';\r\n isValid = false;\r\n }\r\n if (!purchaseInvoiceDateDue) {\r\n errors.purchaseInvoiceDateDue = 'Due Date is required';\r\n isValid = false;\r\n }\r\n\r\n let data = invoiceLines.map((r) => {\r\n if (r.isSelected && r.invoiceItemVATRateID == null) {\r\n isValid = false;\r\n return { ...r, vatIdError: true };\r\n } else {\r\n return { ...r, vatIdError: false };\r\n }\r\n });\r\n\r\n let part = partsDetails.map((r) => {\r\n if (r.isSelected && r.invoiceItemVATRateID == null) {\r\n isValid = false;\r\n return { ...r, vatIdError: true };\r\n } else {\r\n return { ...r, vatIdError: false };\r\n }\r\n });\r\n setState((st) => ({\r\n ...st,\r\n errors: errors,\r\n invoiceLines: data,\r\n partsDetails: part\r\n }));\r\n return isValid;\r\n };\r\n const handelSubmit = async () => {\r\n if (validation()) {\r\n let salesLabourItems = state.invoiceLines\r\n .filter((m) => m.isSelected)\r\n .map((m) => ({\r\n jobItemID: m.itemID,\r\n labourVATRateID: m.invoiceItemVATRateID?.id,\r\n labourHours: m.labourHours,\r\n labourRate: m.labourRate,\r\n labourDescription: m.labourDescription,\r\n labourDiscount: m.labourDiscount,\r\n labourVATPercent: m.invoiceItemVATRateID?.vatRatePercent,\r\n labourVATAmount: m.invoiceItemVAT,\r\n labourCost: m.labourExVAT\r\n }));\r\n let salesPartsItems = state.partsDetails\r\n .filter((m) => m.isSelected)\r\n .map((m) => ({\r\n jobItemID: m.jobItemID,\r\n partNumber: m.partNumber,\r\n partDescription: m.partDescription,\r\n partQuantity: m.qty,\r\n partUnitPrice: m.unitPrice,\r\n partDiscount: m.discount,\r\n partVATRateID: m.invoiceItemVATRateID?.id,\r\n partVATPercent: m.invoiceItemVATRateID?.vatRatePercent,\r\n partVATAmount: m.invoiceItemVAT\r\n }));\r\n let formData = {\r\n salesLabourItems: salesLabourItems,\r\n salesPartsItems: salesPartsItems,\r\n // salesInvoiceNumber: state.purchaseInvoiceNumber,\r\n salesInvoiceDate: state.purchaseInvoiceDate,\r\n salesInvoiceDateDue: state.purchaseInvoiceDateDue,\r\n salesInvoiceJobID: props.scheduleJobID\r\n };\r\n let res = await SalesInvoiceAddHeaderLabourPart(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default AddJobItemModal;\r\n","import React, { useState } from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport { SecondaryButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport JobEstimateModal from '../../JobStatusBtn/JobEstimate';\r\nimport JobQueryModal from '../../JobStatusBtn/JobQuery';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { CustomChip } from '../../../../../../Core/Controls';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\n\r\nconst CancelButton = (props) => {\r\n return \r\n \r\n \r\n \r\n \r\n Reg Number \r\n {state.vehicleDetails[0]?.regNumber || 'N/A'} \r\n \r\n \r\n Order No \r\n {state.vehicleDetails[0]?.orderRef || 'N/A'} \r\n \r\n \r\n Customer \r\n {state.vehicleDetails[0]?.customer || 'N/A'} \r\n \r\n \r\n Booked Date \r\n {formatters.DateOnlyFormatter(state.vehicleDetails[0]?.bookedDate)} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Date\r\n \r\n {state.errors.purchaseInvoiceDate} \r\n \r\n \r\n \r\n Due Date\r\n \r\n {state.errors.purchaseInvoiceDateDue} \r\n \r\n \r\n {'\\u{2800}'} \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\n \r\n \r\n \r\n Invoice Date\r\n \r\n {state.errors.purchaseInvoiceDate} \r\n \r\n \r\n \r\n Due Date\r\n \r\n {state.errors.purchaseInvoiceDateDue} \r\n \r\n \r\n \r\n \r\n Clicking the OK button below will create invoice for following lines \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Ok\r\n \r\n \r\n \r\n props.onClose(false)}>Cancel \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default PurchaseInvoice;\r\n","import React, { useContext, useState, useRef, useCallback, useEffect } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, SecondaryCheckbox, DatePicker } from '../../../../../Core/Controls';\r\nimport SignaturePad from 'react-signature-canvas';\r\n// import './defect.scss';\r\nimport { CustomIconButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport { postTechnicianSignOff } from '../../../../../Core/Services/InternalUser/Maintenance/DefectBreackDownStepper/DefectBreackDownStepper';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { Tooltip } from '@material-ui/core';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { setCompletionDate } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\n\r\nconst SignOff = (props) => {\r\n const [state, setState] = useState({\r\n signedOffByName: props.displayName,\r\n errors: {},\r\n signAvailable: AppStorage.getSignature() === 'absent' ? false : true\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n const signCanvas = useRef({});\r\n const { isLoggedIn, displayName, lastLogin, userRoles } = useLoginInfo();\r\n const isInternalUser = userRoles.includes('internal');\r\n\r\n // useEffect(() => {\r\n // if (props.jobData.vehicleJobProgressTechnicianSignOffSignature) {\r\n // setState((st) => ({\r\n // ...st,\r\n // isDisabled: true,\r\n // imgtechniciansign: true,\r\n // signOffSignature : props.jobData.vehicleJobProgressTechnicianSignOffSignature,\r\n // signOffNotes : props.jobData.vehicleJobProgressSignOffNotes\r\n // }));\r\n // }\r\n // }, []);\r\n\r\n const clear = () => {\r\n if (state.imgtechniciansign) {\r\n setState((st) => ({\r\n ...st,\r\n imgtechniciansign: false,\r\n signOffSignature: null\r\n }));\r\n } else {\r\n signCanvas.current.clear();\r\n setState((st) => ({\r\n ...st,\r\n signOffSignature: null\r\n }));\r\n }\r\n };\r\n\r\n const GetTechnicianSign = () => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n signOffSignature: signCanvas.current.toDataURL()\r\n };\r\n return nst;\r\n });\r\n };\r\n const InputChangeHandler = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const validations = () => {\r\n const { signOffNotes, signedOffByName, signOffSignature } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!signOffNotes) {\r\n errors.signOffNotes = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!signedOffByName) {\r\n errors.signedOffByName = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!signOffSignature) {\r\n errors.signOffSignature = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const SubmitHandler = async () => {\r\n if (validations()) {\r\n let FormData = {\r\n jobID: props.jobID,\r\n jobCompletionDate: props.jobCompletionDate,\r\n signOffNotes: state.signOffNotes,\r\n signedOffByName: state.signedOffByName,\r\n signOffSignature: state.signOffSignature\r\n };\r\n let res = await setCompletionDate(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Technician sign off added successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n const useDefaultSig = () => {\r\n setState((st) => ({ ...st, imgtechniciansign: true, signOffSignature: AppStorage.getSignature() }));\r\n };\r\n\r\n return (\r\n \r\n \r\n Technician Signature\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n\r\n \r\n {!state.isDisabled && (\r\n \r\n \r\n )}\r\n
\r\n\r\n {state.imgtechniciansign ? (\r\n \r\n {\r\n GetTechnicianSign();\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 {/*
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { FormHelperText, Grid, IconButton, InputLabel, Tooltip } from '@material-ui/core';\r\nimport { DateTimePicker, MandatoryField, SecondaryButton, SecondaryCheckbox, SelectBox } from '../../../../../Core/Controls';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport ConfirmationModal from '../../../../../Core/Modal/ConfirmationModal';\r\nimport { postAgentArrivalTime } from '../../../../../Core/Services/InternalUser/Maintenance/DefectBreackDownStepper/DefectBreackDownStepper';\r\nimport { setBookingDate, setCompletionDate, setVehicleArrive } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport UpdateIcon from '@material-ui/icons/Update';\r\nimport SignOff from './jobCompletionModal';\r\nimport moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { getAllDelayReason } from '../../../../../Core/Services/InternalUser/bookingDelayReason';\r\nimport { usePortalSettings } from '../../../../../Core/Hooks/usePortalSettings';\r\nimport JobStepperScreen from './jobHeaderDateStepper';\r\nimport { Stepper } from '@material-ui/core/Stepper';\r\nimport CalendarTodayIcon from '@material-ui/icons/CalendarToday';\r\n\r\nconst JobItemHeaderDates = (props) => {\r\n const portalSettings = usePortalSettings();\r\n const { isLoggedIn, displayName, lastLogin, userRoles } = useLoginInfo();\r\n\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const isCustomer = userRoles.includes('customer');\r\n const isinternal = userRoles.includes('internal');\r\n\r\n const [state, setState] = useState({\r\n vehicleArrivalDateCheck: false,\r\n jobCompleteDateCheck: false,\r\n bookingDateCheck: false,\r\n bookingDate: '',\r\n arrivedDate: '',\r\n jobCompletionDate: '',\r\n isjobCompletionDate: false,\r\n isarrivedDate: false,\r\n errors: {}\r\n });\r\n\r\n useEffect(async () => {\r\n setState((st) => ({\r\n ...st,\r\n bookingDate: props.jobDetails.bookingDate ? moment(props.jobDetails.bookingDate).format('YYYY-MM-DDTHH:mm') : '',\r\n isbookingDate: props.jobDetails.jobStatusID === 'JD' || props.jobDetails.jobStatusID === 'JP' ? true : false,\r\n arrivedDate: props.jobDetails.vehicleArrived ? moment(props.jobDetails.vehicleArrived).format('YYYY-MM-DDTHH:mm') : '',\r\n isarrivedDate: props.jobDetails.vehicleArrived ? true : false,\r\n jobCompletionDate: props.jobDetails.completionDate ? moment(props.jobDetails.completionDate).format('YYYY-MM-DDTHH:mm') : '',\r\n isjobCompletionDate: props.jobDetails.completionDate ? true : false,\r\n isReadOnly: isServiceAgent || isinternal ? false : true\r\n }));\r\n }, [props.jobDetails]);\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const dateFieldsChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const handleClick = (dateFlowName) => {\r\n // const { name, checked } = e.target;\r\n let errors = {};\r\n if (dateFlowName == 'vehicleArrivalDateCheck') {\r\n if (!state.arrivedDate) {\r\n errors.arrivedDate = 'Please set Arrival Date & Time';\r\n setState((state) => ({ ...state, errors: errors }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n [dateFlowName]: true,\r\n confirmModalTitle: 'Set Arrival Time',\r\n confirmModalText: `Please click the confirm button to set the vehicle arrival date & time`,\r\n errors: errors\r\n }));\r\n }\r\n } else if (dateFlowName == 'jobCompleteDateCheck') {\r\n if (!state.jobCompletionDate) {\r\n errors.jobCompletionDate = 'Please set Completion Date & Time';\r\n setState((state) => ({ ...state, errors: errors }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n [dateFlowName]: true,\r\n confirmModalTitle: 'Job Complete Date',\r\n confirmModalText: `Please click the confirm button to mark job as completed`,\r\n errors: errors\r\n }));\r\n }\r\n } else if (dateFlowName == 'bookingDateCheck') {\r\n if (!state.bookingDate) {\r\n errors.bookingDate = 'Please set Booking Date & Time';\r\n setState((state) => ({ ...state, errors: errors }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n [dateFlowName]: true,\r\n errors: errors\r\n }));\r\n }\r\n }\r\n };\r\n const handleConfirmPopup = (res) => {\r\n res && props.refreshScreen();\r\n setState((st) => ({\r\n ...st,\r\n vehicleArrivalDateCheck: false,\r\n jobCompleteDateCheck: false,\r\n bookingDateCheck: false\r\n }));\r\n };\r\n\r\n const submitData = async () => {\r\n let FormData;\r\n if (state.vehicleArrivalDateCheck) {\r\n FormData = {\r\n jobID: props.jobID,\r\n arrivedDate: state.arrivedDate,\r\n serviceAgentID: props.jobDetails.jobServiceAgentID\r\n };\r\n\r\n let res = await setVehicleArrive(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Arrival date set successfully`);\r\n handleConfirmPopup(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n // if (state.jobCompleteDateCheck) {\r\n // FormData = {\r\n // jobID: props.jobID,\r\n // jobCompleteDateCheck: state.jobCompleteDateCheck\r\n // };\r\n // let res = await setCompletionDate(FormData);\r\n // if (res.success) {\r\n // showToastSuccess(`added successfully`);\r\n // handleConfirmPopup();\r\n // } else {\r\n // showToastError(res.message);\r\n // }\r\n // }\r\n };\r\n\r\n // const StepperList = [\r\n // {\r\n // name: 'Booking Date',\r\n // icon: CalendarTodayIcon\r\n // },\r\n // {\r\n // name: 'Vehicle Arrival Date',\r\n // icon: CalendarTodayIcon\r\n // },\r\n // {\r\n // name: 'Job Complete Date',\r\n // icon: CalendarTodayIcon\r\n // }\r\n // ];\r\n\r\n return (\r\n //date .........\r\n \r\n {/* {activeStep === steps.length ? (\r\n
*/}\r\n \r\n All steps completed - you're finished \r\n \r\n
\r\n ) : (\r\n \r\n {getStepContent(activeStep)} \r\n
\r\n )} \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n );\r\n};\r\nconst JobQueriesScreen = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {}\r\n });\r\n useEffect(async () => {\r\n pullApiData();\r\n }, [props.refreshDependancy]);\r\n\r\n const pullApiData = async () => {\r\n let res = await getAllJobQueryList(props.JobID);\r\n setState((st) => ({\r\n ...st,\r\n showLoader: false,\r\n list: res.data.list\r\n }));\r\n };\r\n\r\n return (\r\n \r\n {message}\r\n
\r\n \r\n {dateReplied ? moment(dateReplied).format('LLL') : '-'}\r\n
\r\n \r\n {name} @ {dateCreated ? moment(dateCreated).format('LLL') : '-'}\r\n
\r\n \r\n
\r\n
\r\n {/* {props.JobID && \r\n \r\n \r\n Job Queries\r\n \r\n \r\n \r\n )}\r\n\r\n \r\n {state.list?.map((n, i) => (\r\n
\r\n );\r\n};\r\n\r\nexport default JobQueriesScreen;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllJobItems, createInvoice } from '../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { getJobDetailsById, getJobRequiredDocuments } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\n\r\nimport DataGrid from '../../../../../Core/Controls/Grid';\r\nimport { AddButton, CustomChip, DateTimePicker, EditButton, formatters, PrimaryCheckbox } from '../../../../../Core/Controls';\r\nimport AddLabourModal from './addJobItem';\r\nimport '../../../../commonStyle.scss';\r\nimport '../../Notes/NotesandSticky.scss';\r\nimport JobDetail from './JobDetails';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, IconButton, InputLabel, Tooltip, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, DatePicker, MandatoryField, SecondaryCheckbox } from '../../../../../Core/Controls';\r\nimport { Table, TableBody, TableRow, TableCell, TableHead } from '@material-ui/core';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { some } from 'lodash';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport { useHistory } from 'react-router-dom';\r\nimport StatusBasedButton from '../JobDetails/ServiceAgent/statusBtn';\r\nimport SellerInvoiceModal from './JobInvoiceLines/sellerInvoice';\r\nimport CustStatusBasedButton from '../JobDetails/Customer/statusBtn';\r\nimport moment from 'moment';\r\nimport PurchaseInvoice from './JobInvoiceLines/purchaseInvoice';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport JobItemHeaderDates from './jobItemHeaderDates';\r\nimport FileUploaderButton from '../../../../../Core/Controls/GenericFileUploader';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport JobQueriesScreen from '../jobQueriesScreen';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport UpdateIcon from '@material-ui/icons/Update';\r\n\r\nimport UpcomingEvents from '../../Vehicles/ScheduleVehicle/upcomingEvents';\r\nimport { CustomIconButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\n// Assigned AA, Estimate EP, JP In Progress -> Amber\r\n// Unassigned AU, Job Query JQ, FR Awaiting Cost Review, JD Job Deleted, JR Job Rejected -> Red\r\n// Costs Approved CA, JC Job Completed, JA Job Accepted -> Green\r\n\r\nconst alertBoxColorCode = {\r\n AA: 'warning',\r\n EP: 'warning',\r\n JP: 'warning',\r\n AU: 'error',\r\n JQ: 'error',\r\n FR: 'error',\r\n JD: 'error',\r\n JR: 'error',\r\n CA: 'success',\r\n JC: 'success',\r\n JA: 'success'\r\n};\r\n\r\nfunction JobItemsScreen(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { userRoles } = useLoginInfo();\r\n const isCustomer = userRoles.includes('customer');\r\n const [state, setState] = useState({\r\n jobItemsList: [],\r\n loader: true,\r\n open: false,\r\n jobStatusID: '',\r\n showInvoice: false,\r\n refresherFlag: new Date(),\r\n allApprovedJob: [],\r\n errors: {},\r\n showOk: true,\r\n showSellerBtn: true,\r\n showSellerInvoice: false,\r\n showCreate: false\r\n });\r\n const history = useHistory();\r\n\r\n const dataReload = () => {\r\n setState((state) => ({ ...state, refresherFlag: new Date() }));\r\n };\r\n\r\n const base_columns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 130\r\n },\r\n {\r\n key: 'jobItemDescription',\r\n name: 'Description',\r\n width: '40%',\r\n formatter: (params) => {\r\n return (\r\n \r\n btnHandler(data.row)} />\r\n
\r\n );\r\n };\r\n\r\n let checkStatus = jobDetails.jobStatusID === 'AA' || jobDetails.jobStatusID === 'JP' || jobDetails.jobStatusID === 'JQ';\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n actionCol.headerRenderer = () => {\r\n if (checkStatus) {\r\n return (\r\n \r\n {/* closeModal(false)} title=\"Create Sales Invoice\" maxWidth=\"lg\" fullScreen>\r\n \r\n )}\r\n {state.showInvoice && (\r\n closeModal(false)} title=\"Create Purchase Invoice\" maxWidth=\"md\">\r\n \r\n )}\r\n {state.open ? (\r\n
\r\n );\r\n}\r\nexport default JobItemsScreen;\r\n","import { FormHelperText, Grid, Typography, InputLabel } from '@material-ui/core';\r\nimport React, { useEffect, useState, useMemo } from 'react';\r\nimport { DatePicker, SelectBox, formatters, TabView, SimpleField, SingleSelect } from '../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport '../../../../commonStyle.scss';\r\nimport './scheduleVehicleStyle.scss';\r\nimport '../../controllerStyle.scss';\r\nimport moment from 'moment';\r\nimport { getJobDetailsById, getAllJobDropDowns, postJobDetails } from '../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport JobHistory from './jobHistory';\r\nimport UpcomingEvents from './upcomingEvents';\r\nimport StickyNotes from '../../Notes/stickyNotes';\r\nimport { useLoginInfo } from '../../../../../Core/Hooks/useLoginInfo';\r\nimport StatusBasedButton from '../../JOBS/JobStatusBtn/statusBasedButtons';\r\nimport { useHistory } from 'react-router-dom';\r\nimport JobDetailsInfo from './showJobDetailsInfo';\r\nimport JobItemsScreen from '../../JOBS/JOBItems/JobItemsScreen';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport FileUploaderButton from '../../../../../Core/Controls/GenericFileUploader';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst JobBookedDetail = (props) => {\r\n let getAccessParam = AppStorage.getAllowAcces();\r\n\r\n const [jobDetails, setJobDetails] = useState({\r\n jobDepotID: '',\r\n jobTypeID: '',\r\n mileageRequired: false,\r\n jobServiceAgentID: '',\r\n vehicleMake: '',\r\n vehicleModel: '',\r\n jobRegNumber: ''\r\n });\r\n const [jobDropDowns, setJobDropDowns] = useState({ serviceAgents: [], depots: [], jobTypes: [] });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n const history = useHistory();\r\n const [tempOptions, setTempOptions] = useState({\r\n jobServiceAgentIDValue: null,\r\n jobDepotIDValue: null,\r\n jobTypeIDValue: null\r\n });\r\n const pullJobDropDowns = async () => {\r\n let res = await getAllJobDropDowns(props.vehicleID);\r\n return res.data;\r\n };\r\n const { userRoles } = useLoginInfo();\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n\r\n const PullData = async () => {\r\n let res = await getJobDetailsById(props.scheduleJobID);\r\n let res1 = res.data.list;\r\n let data = res1?.length > 0 ? res.data.list[0] : res.data.list;\r\n if (data) {\r\n setJobDetails((st) => ({\r\n ...st,\r\n jobID: data.jobID,\r\n jobAgentOrderNo: data.jobAgentOrderNo,\r\n jobOrderDate: formatters.DateOnlyFormatter(data.jobDate),\r\n jobOrderTotal: data.orderTotal,\r\n jobCustomerOrderNo: data.jobCustomerOrderNo || '',\r\n jobEstimatedCost: data.jobEstimatedCost || '',\r\n jobProformaInvNet: data.jobProformaInvNet || '',\r\n jobLimit: data.jobLimit || '',\r\n jobAuthorityRef: data.jobAuthorityRef || '',\r\n jobMileageDate: data.jobMileageDate || '',\r\n jobMileage: data.jobMileage || '',\r\n jobDepotID: data.jobDepotID || '',\r\n jobTypeID: data.jobTypeID || '',\r\n jobServiceAgentID: data.jobServiceAgentID || '',\r\n jobVehicleID: data.jobVehicleID,\r\n jobRegNumber: data.jobRegNumber,\r\n vehicleMake: data.vehicleMake,\r\n vehicleModel: data.vehicleModel,\r\n vehicleJobStatus: data.vehicleJobStatus,\r\n jobStatusID: data.jobStatusID,\r\n jobApprovedDate: formatters.DateFormatter(data.jobApprovedDate),\r\n approvedBy: data.approvedBy,\r\n jobApprovedOrderNo: data.jobApprovedOrderNo,\r\n jobApproved: data.jobApproved,\r\n serviceAgentName: data.serviceAgentName,\r\n depotName: data.depotName,\r\n mileageRequired: data.mileageRequired,\r\n customerName: data.customerCompanyName,\r\n refreshDependancy: new Date(),\r\n jobDescription: data.jobDescription,\r\n fileCount: data.fileCount\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n PullData();\r\n let dropDowns = await pullJobDropDowns();\r\n setJobDropDowns(dropDowns);\r\n }, []);\r\n\r\n const refreshScreen = (res) => {\r\n res && setJobDetails((st) => ({ ...st, refreshDependancy: new Date() }));\r\n res && PullData();\r\n };\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n\r\n if (jobDetails.jobServiceAgentID && jobDropDowns.serviceAgents?.length > 0) {\r\n newSt.jobServiceAgentIDValue = jobDropDowns.serviceAgents.find(({ id }) => id === jobDetails.jobServiceAgentID);\r\n }\r\n if (jobDetails.jobDepotID && jobDropDowns.depots?.length > 0) {\r\n newSt.jobDepotIDValue = jobDropDowns.depots.find(({ id }) => id === jobDetails.jobDepotID);\r\n }\r\n if (jobDetails.jobTypeID && jobDropDowns.jobTypes?.length > 0) {\r\n newSt.jobTypeIDValue = jobDropDowns.jobTypes.find(({ id }) => id === jobDetails.jobTypeID);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [jobDetails.jobServiceAgentID, jobDetails.jobDepotID, jobDropDowns.depots, jobDetails.jobTypeID, jobDropDowns.jobTypes, jobDropDowns.serviceAgents]);\r\n\r\n const tempTab = [\r\n {\r\n label: 'Upcoming Events',\r\n body: \r\n \r\n \r\n \r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n {jobDetails?.jobOrderNo || ''} \r\n \r\n ) : null}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n {jobDetails.jobRegNumber} {getMakeModel}\r\n \r\n \r\n {/* \r\n Job Status \r\n {jobDetails.vehicleJobStatus} \r\n */}\r\n \r\n Total */}\r\n \r\n \r\n \r\n \r\n \r\n 0 ? 6 : 12} md={jobdocument.list.length > 0 ? 7 : 12} style={{ marginTop: 3 }}>\r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {jobdocument.list.length > 0 && (\r\n \r\n \r\n {jobdocument.list.map((m) => {\r\n return (\r\n \r\n {false ? (\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n {state.showSellerInvoice && (\r\n \r\n Total \r\n \r\n £\r\n {isCustomer\r\n ? jobDetails.jobCustomerOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d0})+(?!\\d))/g, '$1,')\r\n : jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n {/* \r\n {m.docName}{' '}\r\n \r\n
\r\n ) : (\r\n \r\n {m.docName}\r\n \r\n
\r\n )}\r\n \r\n {isServiceAgent && (\r\n \r\n \r\n )}\r\n {isCustomer && (\r\n \r\n \r\n )}\r\n\r\n {jobDetails.jobStatusID == 'CA' && isInternal && (\r\n \r\n \r\n createInvoiceHandler('showInvoice')}\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n \r\n \r\n createInvoiceHandler('showSellerInvoice')}\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n createInvoiceHandler('showInvoice')}\r\n // onSecondBtnClick={() => createInvoiceHandler('showSellerInvoice')}\r\n height={475}\r\n // offset={270}\r\n />\r\n \r\n \r\n \r\n \r\n {state.showUpComingEvents ? (\r\n closeModal(false)} maxWidth=\"md\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n \r\n {getMakeModel}\r\n \r\n \r\n \r\n Job Status \r\n {jobDetails.vehicleJobStatus} \r\n \r\n \r\n Total \r\n \r\n £{jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$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 Job Details\r\n \r\n refreshScreen(true)}\r\n />\r\n \r\n \r\n \r\n \r\n {jobDetails.vehicleJobStatus && (\r\n \r\n \r\n\r\n \r\n {jobDetails.jobStatusID == 'JC' && jobDetails.jobApproved ? (\r\n \r\n \r\n \r\n Service Agent\r\n \r\n {errors.jobServiceAgentID ? 'This field is required' : null} \r\n \r\n\r\n \r\n \r\n Job Type\r\n \r\n {errors.jobTypeID ? 'This field is required' : null} \r\n \r\n \r\n \r\n Job Depot\r\n \r\n {errors.jobDepotID ? 'This field is required' : null} \r\n \r\n \r\n {errors.jobLimit ? 'This value can not be negative' : null} \r\n \r\n \r\n Job Mileage Date \r\n {errors.jobMileageDate ? 'This value can not be negative' : null} \r\n \r\n\r\n \r\n {errors.jobMileage ? 'This value can not be negative' : null} \r\n \r\n \r\n )}\r\n \r\n {jobDetails.vehicleJobStatus && (\r\n \r\n {/*
\r\n\r\n */}\r\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 JobBookedDetail;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../Core/Controls/Grid/index';\r\nimport { EditButton, formatters, BreadCrumbs, DatePicker, SecondaryCheckbox } from '../../../Core/Controls';\r\nimport DialogBox from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleEdit';\r\nimport ScheduleNotes from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport ScheduleBookingStatus from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingStatus';\r\nimport ScheduleBookingSection from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingSection';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport '../../commonStyle.scss';\r\nimport '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport ConfirmationModal from '../../../Core/Modal/ConfirmationModal';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { getAllVehicleSchedules } from '../../../Core/Services/InternalUser/Maintenance/scheduleService';\r\nimport { deleteFutureUnCompletedSchedules } from '../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport ReactDOM from 'react-dom';\r\nimport { CustomIconButton, PrimaryButton, SecondaryButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport './allSchedulesStyle.scss';\r\nimport { Button, Grid, InputLabel } from '@material-ui/core';\r\nimport Menu from '@material-ui/core/Menu';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport CompleteScheduleModal from '../../InternalUser/Schedule/completeSchedule';\r\nimport { NavigateBeforeSharp } from '@material-ui/icons';\r\nimport moment from 'moment';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport SyncIcon from '@material-ui/icons/Sync';\r\nimport ScheduleRevise from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleRevise';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CustomerDetails from '../../InternalUser/Controllers/DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../../InternalUser/Controllers/DetailsModal/serviceAgent';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nimport DateRangeIcon from '@material-ui/icons/DateRange';\r\nimport PostAddIcon from '@material-ui/icons/PostAdd';\r\nimport RequiredDocumentsModal from './requiredDocumentsModal';\r\nimport EventNoteIcon from '@material-ui/icons/EventNote';\r\nimport { GetSchedulesExcelFile } from '../../../Core/Services/InternalUser/excelDownload';\r\nimport DepotDetails from '../../InternalUser/Controllers/DetailsModal/depotDetails';\r\n\r\nconst crumbsServiceAgent = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Schedules', active: true }\r\n];\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Schedules', path: '/', active: true }\r\n];\r\n// Date Due, Event, Booking Date, Completion Date, Agent, Status\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 140, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 110 },\r\n { key: 'scheduleEventName', name: 'Event', width: 130 },\r\n { key: 'dueDateISOWeek', name: 'ISO Week', width: 90 },\r\n { key: 'scheduleDateDue', name: 'Due', width: 90 },\r\n { key: 'scheduleRequestedBookingDate', name: 'Requested', width: 90 },\r\n { key: 'bookingDate', name: 'Booked', width: 110 },\r\n { key: 'scheduleCompletionDate', name: 'Completed', width: 140 },\r\n { key: 'customerCompanyName', name: 'Customer', width: 140 },\r\n { key: 'depotName', name: 'Depot', width: 140 },\r\n { key: 'agentName', name: 'Agent' },\r\n { key: 'scheduleBookingStatus', name: 'Status', width: 180 }\r\n];\r\nconst modelgridStyle = {\r\n styleCol: {\r\n cursor: 'pointer',\r\n fontStyle: 'italic',\r\n textDecorationLine: 'underline'\r\n },\r\n NoneCondition: {}\r\n};\r\nconst AllVehicleSchedules = (props) => {\r\n // const startOfMonth = moment().startOf('month').format('YYYY-MM-DD');\r\n // const endOfMonth = moment().endOf('month').format('YYYY-MM-DD');\r\n let getAccessParam = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n rows: [],\r\n isAdd: true,\r\n filteredRows: [],\r\n finalData: [],\r\n showDelete: false,\r\n fromDate: '', //startOfMonth,\r\n toDate: '', //endOfMonth,\r\n isDeleteFuture: false\r\n });\r\n // const [dateRange, setDateRange] = useState({ fromDate: startOfMonth, toDate: endOfMonth });\r\n const [anchorEl, setAnchorEl] = useState(null);\r\n let history = useHistory();\r\n\r\n const { userRoles } = useLoginInfo();\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const pos = isServiceAgent ? 's' : 'm';\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [openDialog, setOpenDialog] = useState({});\r\n\r\n useEffect(async () => {\r\n let fromDate = '';\r\n let toDate = '';\r\n let url = props.location.pathname;\r\n let urlIndex = url.lastIndexOf('/') + 1;\r\n let filterID = '';\r\n if (url[urlIndex] === ':' || url[urlIndex] === undefined || url[urlIndex] === null) {\r\n filterID = '';\r\n fromDate = moment().startOf('month').format('YYYY-MM-DD');\r\n toDate = moment().endOf('month').format('YYYY-MM-DD');\r\n } else {\r\n filterID = url[urlIndex];\r\n }\r\n setState((st) => ({\r\n ...st,\r\n filterID: filterID,\r\n fromDate: fromDate,\r\n toDate: toDate\r\n }));\r\n pullApiData();\r\n }, [props.location.pathname]);\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n // let res = await getAllVehicleSchedules(url[urlIndex]);\r\n // setState((st) => ({\r\n // ...st,\r\n // rows: [...(res.data.schedules || [])],\r\n // finalData: [...(res.data.schedules || [])],\r\n // showLoader: false\r\n // }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${val?.scheduleJobID}/${val?.scheduleVehicleID}`,\r\n search: '',\r\n state: pos\r\n });\r\n };\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\r\n \r\n
\r\n {/* {row?.displayNotes === 'Y' && getAccessParam['CanUpdateScheduleNotes'] && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )} */}\r\n\r\n {/* {row?.displayEditVehicleSchedule === 'Y' && getAccessParam['CanUpdateSchedules'] && (\r\n \r\n {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n selectedRowData: row,\r\n isAdd: false\r\n }));\r\n }}\r\n />\r\n \r\n )} */}\r\n {/* {row?.displayReviseSchedule === 'Y' && (\r\n {\r\n checkButton(row, 'revise');\r\n }}\r\n toolTipTitle=\"Change Booking Date\"\r\n />\r\n )} */}\r\n {row?.scheduleBookingStatusID == 5 && getAccessParam['CanViewDocuments'] && (\r\n {\r\n checkButton(row, 'showRequiredDocumentsModal');\r\n }}\r\n toolTipTitle=\"Required Documents\"\r\n />\r\n )}\r\n {/* {row?.displayBookingRequest === 'Y' && (\r\n {\r\n checkButton(row, 'status');\r\n }}\r\n toolTipTitle=\"Update Booking Request\"\r\n />\r\n )} */}\r\n {/* \r\n {row?.displayBookJob === 'Y' && (\r\n {\r\n checkButton(row, 'section');\r\n }}\r\n toolTipTitle=\"Book Job\"\r\n />\r\n )} */}\r\n\r\n {row?.displayJobDetails === 'Y' && getAccessParam?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}\r\n {/* {row?.displayCompleteSchedule === 'Y' && (\r\n {\r\n checkButton(row, 'complete');\r\n }}\r\n toolTipTitle=\"Complete Schedule\"\r\n />\r\n )} */}\r\n\r\n {row?.displayDeleteSchedules === 'Y' && getAccessParam['CanDeleteSchedules'] && (\r\n {\r\n setState((st) => ({ ...st, showDelete: true, data: row }));\r\n }}\r\n toolTipTitle=\"Delete future uncompleted schedules\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const dateFormatter = (date) => {\r\n return date ? moment(date).format('DD/MM/YYYY') : '--:--';\r\n };\r\n\r\n const deleteFutureUnComSchedules = async () => {\r\n let data = {\r\n scheduleVehicleID: state.data.scheduleVehicleID,\r\n scheduleEventID: state.data.scheduleEventID,\r\n isDeleteFuture: state.isDeleteFuture,\r\n scheduleID: state.data.scheduleID\r\n };\r\n let res = await deleteFutureUnCompletedSchedules(data);\r\n if (res.success) {\r\n showToastSuccess('Record deleted successfully');\r\n setState((st) => ({ ...st, showDelete: false }));\r\n pullApiData();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n const dueDateFormatter = ({ row, column }) => {\r\n const spn = document.createElement('span');\r\n let textColor = formatters.getScheduleColour(row.scheduleCompletionDate, row.scheduleDateDue, row.dayRange);\r\n const dueDate = row.scheduleDateDue;\r\n let show = row?.displayEditVehicleSchedule === 'Y' && getAccessParam['CanUpdateSchedules'];\r\n const HandeClick = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n selectedRowData: row,\r\n isAdd: false\r\n }));\r\n };\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleCloseModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false,\r\n showRequiredDocumentsModal: false,\r\n showDepotModal: false\r\n }));\r\n res && pullApiData();\r\n };\r\n const getRenderValue = (val, row) => {\r\n if (val === 'scheduleEventName') {\r\n return (\r\n \r\n \r\n \r\n \r\n From \r\n To \r\n {\r\n setState((st) => ({ ...st, fromDate: startOfMonth, toDate: endOfMonth }));\r\n }}\r\n size=\"large\"\r\n style={{ marginTop: '10px' }}\r\n >\r\n Current Month\r\n \r\n */}\r\n \r\n {\r\n setState((st) => ({ ...st, fromDate: '', toDate: '' }));\r\n }}\r\n size=\"large\"\r\n style={{ marginTop: '10px' }}\r\n >\r\n Reset\r\n \r\n \r\n \r\n \r\n\r\n {/* ({\r\n records: res.data.schedules,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={state.getUrl}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={() =>\r\n GetSchedulesExcelFile({\r\n status: props.status || '',\r\n mode: state.filterID || '',\r\n startDate: state.fromDate || '',\r\n endDate: state.toDate || '',\r\n fileExt: 'xlsx'\r\n })\r\n }\r\n />\r\n {state.open ? (\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.isAdd ? 'Add Schedule' : 'Edit Schedule'}\r\n maxWidth=\"sm\"\r\n name=\"addEdit\"\r\n >\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n \r\n ) : null}\r\n {openDialog.notes ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.status ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.section ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.complete ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.revise ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {state.showDelete ? (\r\n setState((st) => ({ ...st, showDelete: false }))} maxWidth=\"sm\">\r\n \r\n \r\n \r\n \r\n Date Due:{formatters.DateFormatter(state.data?.scheduleDateDue)}\r\n \r\n \r\n \r\n \r\n Event Name:{state.data?.scheduleEventName}\r\n \r\n \r\n \r\n Are you sure you want to delete this record? \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n setState((st) => ({ ...st, showDelete: false }))} fullWidth className=\"submit_btn\">\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n {state.showSaModal ? (\r\n handleCloseModal(false)} title={'Service Agent Details'}>\r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n handleCloseModal(false)} title={'Customer Details'}>\r\n \r\n ) : null}\r\n {openDialog.showRequiredDocumentsModal ? (\r\n closeTheDialog(false)} title={'Required Documents'} maxWidth=\"sm\" fullWidth>\r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n handleCloseModal(false)} title={'Depot Details'}>\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default AllVehicleSchedules;\r\n\r\n//Ignore This\r\n// (\r\n// \r\n// \r\n \r\n {' '}\r\n {!isCustomer && null}\r\n \r\n \r\n {state.showLoader ? (\r\n \r\n
\r\n ) : (\r\n \r\n {state.messageList?.length !== 0 ? (\r\n <>\r\n {state.messageList?.map((m, i) => {\r\n let classText = m.name === displayName ? classes.outgoning : classes.paper;\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 {m.notes} \r\n
\r\n \r\n \r\n {m.name} @ {moment(m.sdate).format('MMM Do YYYY, h:mm a')}\r\n \r\n
\r\n\r\n {m.rdate && (\r\n \r\n seen {moment(m.rdate).format('MMM Do YYYY, h:mm a')}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n There are no messages sent/received \r\n
\r\n \r\n {moment().format('MMM Do YYYY, h:mm a')}\r\n
\r\n \r\n {state.NoteList?.map((n, i) => (\r\n \r\n \r\n \r\n \r\n ))}\r\n
\r\n ) : (\r\n \r\n No Records Found\r\n
\r\n )}\r\n \r\n ) : null}\r\n \r\n \r\n \r\n New Reminder Notes \r\n {state.errors.jobUpdateNotes} \r\n \r\n \r\n Reminder Start Date & Time \r\n {state.errors.jobUpdateReminderDate} \r\n \r\n \r\n {state.errors.noteSendSMSNumber} \r\n \r\n \r\n \r\n \r\n \r\n Create New Reminder\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddJobUpdateNotes;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { getAllJobUpdateNotesList } from '../../../../../../Core/Services/InternalUser/JOB/jobQueryService';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport AddEditJobsNotes from './addUpdateJobNotes';\r\nimport { CustomChip } from '../../../../../../Core/Controls';\r\nimport { Add } from '@material-ui/icons';\r\nimport AddJobUpdateNotes from './addJobNotes';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\n\r\nexport const JobSingleNote = (props) => {\r\n const { id, name, jobUpdateDateCreated, notes, notesResult, jobUpdateDateClosed, jobUpdateClosedUserID } = props.note;\r\n const [stateNotes, setNotsState] = useState({ show: false });\r\n let checkIsClosed = jobUpdateDateClosed || jobUpdateClosedUserID;\r\n const closeModal = (res) => {\r\n setNotsState({ show: false });\r\n res && props.onFormSubmit(true);\r\n };\r\n\r\n const showModal = () => {\r\n if (!checkIsClosed) {\r\n setNotsState({ show: true });\r\n }\r\n };\r\n return (\r\n <>\r\n {stateNotes.show ? (\r\n \r\n \r\n {notes}\r\n
\r\n {notesResult ? notesResult : ''}
\r\n \r\n {name} @ {jobUpdateDateCreated ? moment(jobUpdateDateCreated).format('LLL') : '-'}\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nconst JobUpdtaeNotes = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n showAddJobUpdateNotes: false\r\n });\r\n useEffect(async () => {\r\n pullApiData();\r\n }, [props.refreshDependancy]);\r\n\r\n const pullApiData = async () => {\r\n let res = await getAllJobUpdateNotesList(props.jobID);\r\n setState((st) => ({\r\n ...st,\r\n showLoader: false,\r\n list: res.data.notelist\r\n }));\r\n };\r\n const callonFormsubmit = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddJobUpdateNotes: false\r\n }));\r\n res && pullApiData();\r\n };\r\n const handelModal = (name, val) => {\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n return (\r\n
\r\n \r\n handelModal('showAddJobUpdateNotes', true)} />\r\n
\r\n {state.list?.map((n, i) => (\r\n handelModal('showAddJobUpdateNotes', false)} title={'Next Progress Reminder'} maxWidth=\"sm\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default JobUpdtaeNotes;\r\n","import { FormHelperText, Grid, Typography, InputLabel, RadioGroup, FormControlLabel, Radio } from '@material-ui/core';\r\nimport React, { useEffect, useState, useMemo, useCallback } from 'react';\r\nimport { DatePicker, YesButton, NoButton, formatters, TabView, SimpleField, SingleSelect } from '../../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../../Core/Hooks/useToast';\r\nimport '../../../../../commonStyle.scss';\r\nimport '../../../Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss';\r\nimport '../../../controllerStyle.scss';\r\nimport '../../../Notes/NotesandSticky.scss';\r\nimport moment from 'moment';\r\nimport { getJobDetailsById, getAllJobDropDowns, postJobDetails } from '../../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport JobHistory from '../../../Vehicles/ScheduleVehicle/jobHistory';\r\nimport UpcomingEvents from '../../../Vehicles/ScheduleVehicle/upcomingEvents';\r\nimport StickyNotes from '../../../Notes/stickyNotes';\r\nimport { useHistory } from 'react-router-dom';\r\nimport JobDetailsInfo from '../../../Vehicles/ScheduleVehicle/showJobDetailsInfo';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport FileUploaderButton from '../../../../../../Core/Controls/GenericFileUploader';\r\nimport InternalstatusBasedButton from './statusBtn';\r\nimport JobQueriesScreen from '../../jobQueriesScreen';\r\nimport { ChipWithoutLable, CustomChip } from '../../../../../../Core/Controls/Inputs/DatePicker';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport AddVor from '../../../VOR/AddEditVor';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport ServiceAgentDetails from '../../../DetailsModal/serviceAgent';\r\nimport JobUpdtaeNotes from './jobUpdateNotes';\r\n\r\nconst alertBoxColorCode = {\r\n AA: 'warning',\r\n EP: 'warning',\r\n JP: 'warning',\r\n AU: 'error',\r\n JQ: 'error',\r\n FR: 'error',\r\n JD: 'error',\r\n JR: 'error',\r\n CA: 'success',\r\n JC: 'success',\r\n JA: 'success'\r\n};\r\n\r\nconst InternalJobDetail = (props) => {\r\n const [jobDetails, setJobDetails] = useState({\r\n jobDepotID: '',\r\n jobTypeID: '',\r\n mileageRequired: false,\r\n jobServiceAgentID: '',\r\n vehicleMake: '',\r\n vehicleModel: '',\r\n jobRegNumber: '',\r\n jobOutOfHours: false,\r\n showSaModal: false\r\n });\r\n const [jobDropDowns, setJobDropDowns] = useState({ serviceAgents: [], depots: [], jobTypes: [] });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n const history = useHistory();\r\n const [tempOptions, setTempOptions] = useState({\r\n jobServiceAgentIDValue: null,\r\n jobDepotIDValue: null,\r\n jobTypeIDValue: null\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { userRoles } = useLoginInfo();\r\n const isDriver = userRoles.includes('driver');\r\n const isCustomer = userRoles.includes('customer');\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const pullJobDropDowns = async () => {\r\n let res = await getAllJobDropDowns(props.vehicleID);\r\n return res.data;\r\n };\r\n\r\n const PullData = async () => {\r\n let res = await getJobDetailsById(props.scheduleJobID);\r\n let res1 = res.data.list;\r\n let data = res1?.length > 0 ? res.data.list[0] : res.data.list;\r\n if (data) {\r\n setJobDetails((st) => ({\r\n ...st,\r\n jobID: data.jobID,\r\n jobAgentOrderNo: data.jobAgentOrderNo,\r\n jobOrderDate: formatters.DateOnlyFormatter(data.jobDate),\r\n jobOrderTotal: data.orderTotal,\r\n jobCustomerOrderNo: data.jobCustomerOrderNo || '',\r\n jobEstimatedCost: data.jobEstimatedCost || '',\r\n jobProformaInvNet: data.jobProformaInvNet || '',\r\n jobLimit: data.jobLimit || '',\r\n jobAuthorityRef: data.jobAuthorityRef || '',\r\n jobMileageDate: data.jobMileageDate || '',\r\n jobOutOfHours: data.jobOutOfHours || false,\r\n jobMileage: data.jobMileage || '',\r\n jobDepotID: data.jobDepotID || '',\r\n jobTypeID: data.jobTypeID || '',\r\n jobServiceAgentID: data.jobServiceAgentID || '',\r\n jobVehicleID: data.jobVehicleID,\r\n jobRegNumber: data.jobRegNumber,\r\n vehicleMake: data.vehicleMake,\r\n vehicleModel: data.vehicleModel,\r\n vehicleJobStatus: data.vehicleJobStatus,\r\n jobStatusID: data.jobStatusID,\r\n jobApprovedDate: formatters.DateFormatter(data.jobApprovedDate),\r\n approvedBy: data.approvedBy,\r\n jobApprovedOrderNo: data.jobApprovedOrderNo,\r\n jobApproved: data.jobApproved,\r\n serviceAgentName: data.serviceAgentName,\r\n depotName: data.depotName,\r\n mileageRequired: data.mileageRequired,\r\n customerName: data.customerCompanyName,\r\n refreshDependancy: new Date(),\r\n jobDescription: data.jobDescription,\r\n fileCount: data.fileCount,\r\n jobOrderNo: data.jobOrderNo,\r\n jobInCustomerQuery: data.jobInCustomerQuery,\r\n jobInAgentQuery: data.jobInAgentQuery,\r\n defectTypeCode: data.defectTypeCode,\r\n jobDefectID: data.jobDefectID,\r\n vorVehicleID: data.vorVehicleID,\r\n jobIsEstimate: data.jobIsEstimate,\r\n isEditableFields:\r\n data.jobStatusID == 'AU' ||\r\n data.jobStatusID == 'AA' ||\r\n data.jobStatusID == 'JP' ||\r\n data.jobStatusID == 'ER' ||\r\n data.jobStatusID == 'JQ' ||\r\n data.jobStatusID == 'IQ' ||\r\n data.jobStatusID == 'AR' ||\r\n data.jobStatusID == 'EA'\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n PullData();\r\n let dropDowns = await pullJobDropDowns();\r\n setJobDropDowns(dropDowns);\r\n }, []);\r\n\r\n const refreshScreen = (res) => {\r\n res && setJobDetails((st) => ({ ...st, refreshDependancy: new Date() }));\r\n res && PullData();\r\n };\r\n\r\n const showVorModal = (res) => {\r\n setJobDetails((st) => ({\r\n ...st,\r\n [res]: true\r\n }));\r\n };\r\n\r\n const closeVORModal = (res) => {\r\n setJobDetails((st) => ({\r\n ...st,\r\n showVORPopup: false,\r\n showSaModal: false\r\n }));\r\n res && refreshScreen(true);\r\n };\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n\r\n if (jobDetails.jobServiceAgentID && jobDropDowns.serviceAgents?.length > 0) {\r\n newSt.jobServiceAgentIDValue = jobDropDowns.serviceAgents.find(({ id }) => id === jobDetails.jobServiceAgentID);\r\n }\r\n if (jobDetails.jobDepotID && jobDropDowns.depots?.length > 0) {\r\n newSt.jobDepotIDValue = jobDropDowns.depots.find(({ id }) => id === jobDetails.jobDepotID);\r\n }\r\n if (jobDetails.jobTypeID && jobDropDowns.jobTypes?.length > 0) {\r\n newSt.jobTypeIDValue = jobDropDowns.jobTypes.find(({ id }) => id === jobDetails.jobTypeID);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [jobDetails.jobServiceAgentID, jobDetails.jobDepotID, jobDropDowns?.depots, jobDetails?.jobTypeID, jobDropDowns?.jobTypes, jobDropDowns?.serviceAgents]);\r\n const tempTab = [\r\n {\r\n label: 'Update Notes',\r\n body: (\r\n \r\n {state.list?.map((n, i) => (\r\n
\r\n \r\n \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n \r\n {jobDetails?.jobOrderNo || ''}({jobDetails?.jobAgentOrderNo})\r\n \r\n \r\n ) : (\r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n )}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n \r\n {getMakeModel}\r\n \r\n \r\n {/* \r\n Job Status \r\n {jobDetails.vehicleJobStatus} \r\n */}\r\n \r\n {' '}\r\n \r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Job Details\r\n \r\n refreshScreen(true)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n {jobDetails.jobDefectID && (\r\n \r\n \r\n )}\r\n {!jobDetails.vorVehicleID && !isDriver && !isCustomer && !isServiceAgent && (\r\n showVorModal('showVORPopup')}\r\n />\r\n )}\r\n \r\n {jobDetails.vehicleJobStatus && (\r\n \r\n \r\n \r\n \r\n\r\n \r\n {jobDetails.jobStatusID == 'JC' && jobDetails.jobApproved ? (\r\n \r\n {!jobDetails.isEditableFields ? (\r\n \r\n \r\n ) : (\r\n \r\n {errors.jobServiceAgentID ? 'This field is required' : null} \r\n \r\n )}\r\n \r\n {errors.jobTypeID ? 'This field is required' : null} \r\n \r\n \r\n {errors.jobDepotID ? 'This field is required' : null} \r\n \r\n \r\n {errors.jobLimit ? 'This value can not be negative' : null} \r\n \r\n \r\n {/* Job Mileage Date */}\r\n {errors.jobMileageDate ? 'This value can not be negative' : null} \r\n \r\n\r\n \r\n {errors.jobMileage ? 'This value can not be negative' : null} \r\n \r\n \r\n \r\n \r\n \r\n \r\n Out Of Hours? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n {jobDetails.vehicleJobStatus && (\r\n \r\n {/*
\r\n\r\n */}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {jobDetails.showSaModal ? (\r\n closeVORModal(false)} title={'Service Agent Details'}>\r\n closeVORModal(false)} />\r\n \r\n ) : null}\r\n {jobDetails.showVORPopup ? (\r\n closeVORModal(false)} maxWidth=\"lg\" overflow=\"auto\">\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default InternalJobDetail;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, EditButton, DeleteButton, formatters, MandatoryField, SingleSelect, SimpleField } from '../../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../../Core/Hooks/useToast';\r\nimport '../../../../../commonStyle.scss';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { getJobItemById, getJobItemsDropDown, PostInternalVehicleJobsItem } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport PastJobs from './../../JOBItems/getPastJobBy';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport ConfirmationModal from '../../../../../../Core/Modal/ConfirmationModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\nimport _ from 'lodash';\r\nconst base_columns = [\r\n {\r\n key: 'vehicleJobPartNumber',\r\n name: 'Part Number',\r\n width: '10%'\r\n },\r\n {\r\n key: 'vehicleJobPartDescription',\r\n name: 'Part Description',\r\n width: '23%'\r\n },\r\n {\r\n key: 'vehicleJobPartQuantity',\r\n name: 'Quantity',\r\n width: '8%',\r\n formatter: formatters.ColumnTextAlignRight,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartUnitPrice',\r\n name: 'Unit Price',\r\n width: '17%',\r\n formatter: formatters.NumberWithPound,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartCustomerUnitPrice',\r\n name: 'Customer Unit Price',\r\n width: '17%',\r\n formatter: formatters.NumberWithPound,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartDiscount',\r\n name: 'Discount',\r\n width: '5%',\r\n formatter: (data) => \r\n Total \r\n \r\n £{jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n showVorModal('showSaModal')}>\r\n \r\n Service Agent\r\n \r\n
\r\n {tempOptions.jobServiceAgentIDValue?.name}
\r\n \r\n
{data.row.vehicleJobPartDiscount || 0 + '%'}
,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'getCustTotal',\r\n name: 'Customer Total',\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'getTotal',\r\n name: 'Total',\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n }\r\n];\r\nconst getTwoFixed = (val) => {\r\n return val ? val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,') : 0;\r\n};\r\nfunction AddJobItemModal(props) {\r\n const [state, setState] = useState({\r\n setBackup: [],\r\n jobItemID: null,\r\n labourDescription: '',\r\n jobItemStatusID: null,\r\n JobItemCostTypeID: null,\r\n jobItemStatus: [],\r\n labourHours: '',\r\n labourRate: '',\r\n labourDiscount: 0,\r\n workCategory: '',\r\n costCategory: '',\r\n partNumber: '',\r\n partQuantity: null,\r\n partUnitPrice: null,\r\n vehicleJobPartCustomerUnitPrice: null,\r\n partDescription: '',\r\n partsDiscount: '',\r\n partsTotal: '',\r\n workList: [],\r\n costCategories: [],\r\n rows: [],\r\n errors: {},\r\n readOnly: false,\r\n showPastJob: false,\r\n costCategoryValue: null,\r\n jobItemStatusIDValue: null,\r\n jobItemCostTypeIDValue: null,\r\n workCategoryValue: null,\r\n showCancelConfirmModal: false,\r\n jobItemCustomerLabourTotal: 0,\r\n jobItemCustomerPartsPrice: 0\r\n });\r\n const { userRoles } = useLoginInfo();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const handleUpdatePart = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n id: params.id,\r\n partNumber: params.vehicleJobPartNumber,\r\n partQuantity: params.vehicleJobPartQuantity,\r\n partsDiscount: params.vehicleJobPartDiscount,\r\n partUnitPrice: params.vehicleJobPartUnitPrice,\r\n vehicleJobPartCustomerUnitPrice: params.vehicleJobPartCustomerUnitPrice,\r\n jobItemCustomerPartsPrice: getTwoFixed(\r\n (params.vehicleJobPartCustomerUnitPrice * params.vehicleJobPartCustomerQuantity * (100 - params.vehicleJobPartCustomerDiscount || 0)) / 100\r\n ),\r\n partDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n partId: params.id,\r\n isUpdate: true\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDeletePart = (params) => {\r\n const id = params.id;\r\n const newList = state.rows.filter((item) => item.id !== id);\r\n let newPartToSetIsDelete = {\r\n id: params.id,\r\n partId: params.id,\r\n vehicleJobPartNumber: params.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: params.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: params.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: params.vehicleJobPartUnitPrice,\r\n vehicleJobPartCustomerUnitPrice: params.vehicleJobPartCustomerUnitPrice,\r\n vehicleJobPartDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n isDeleted: true\r\n };\r\n newList.push(newPartToSetIsDelete);\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n rows: newList\r\n };\r\n return nst;\r\n });\r\n };\r\n let checkStatus = ['AA', 'JP', 'JQ', 'EA', 'EU'].includes(props.Status) && checkhaveAccess?.CanUpdateJobs;\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n \r\n handleUpdatePart(data.row)} />\r\n {checkhaveAccess?.CanDeleteJobLines && handleDeletePart(data.row)} toolTipTitle=\"Delete Job Item\" />}\r\n
\r\n );\r\n };\r\n\r\n const CalculateTotal = (data) => {\r\n const { vehicleJobPartQuantity, vehicleJobPartUnitPrice, vehicleJobPartDiscount } = data.row;\r\n const total = (vehicleJobPartUnitPrice * vehicleJobPartQuantity * (100 - vehicleJobPartDiscount || 0)) / 100;\r\n return £{getTwoFixed(total)}
;\r\n };\r\n const CalculateCutomerTotal = (data) => {\r\n const { vehicleJobPartCustomerUnitPrice, vehicleJobPartQuantity, vehicleJobPartDiscount } = data.row;\r\n let customerTotal = (vehicleJobPartCustomerUnitPrice * vehicleJobPartQuantity * (100 - vehicleJobPartDiscount || 0)) / 100;\r\n return £{getTwoFixed(customerTotal)}
;\r\n };\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol2 = newColumn.find((item) => item.key === 'getTotal');\r\n let custTotalCol = newColumn.find((item) => item.key === 'getCustTotal');\r\n if (checkStatus) {\r\n newColumn.splice(0, 0, { key: 'action', name: 'Action', formatter: ActionButtons, width: '5%' });\r\n }\r\n if (actionCol2) {\r\n actionCol2.formatter = CalculateTotal;\r\n }\r\n if (custTotalCol) {\r\n custTotalCol.formatter = CalculateCutomerTotal;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n setState((st) => ({ ...st, islabourRateSet: props.islabourRateSet, labourRate: props.labourRate, markup: props.markup }));\r\n let res1 = await getJobItemsDropDown();\r\n if (res1.success) {\r\n const category = res1.data.vmrsCategory.map((item) => ({\r\n id: item.catid + ',' + item.subcatid,\r\n name: item.subcatname\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n workList: category,\r\n costCategories: res1.data.costCategories,\r\n jobItemStatus: res1.data.jobItemStatus,\r\n costTypeList: res1.data.costType\r\n }));\r\n }\r\n if (props.jobItemID) {\r\n let partList = [];\r\n let res = await getJobItemById(props.jobItemID);\r\n partList = res.data.vehicleJobPartsDetails.map((item, index) => ({\r\n ...item,\r\n id: index + 1,\r\n isDeleted: false\r\n }));\r\n const info = res.data.vehicleJobitemdetails[0];\r\n if (res.success) {\r\n let newSt = {};\r\n newSt.jobItemID = info.jobItemID;\r\n newSt.labourDescription = info.jobItemDescription;\r\n newSt.jobItemJobID = info.jobItemJobID;\r\n newSt.jobItemStatusID = info.jobItemStatusID;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n newSt.workCategory = info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID;\r\n newSt.jobItemVMRSCategoryID = info.jobItemVMRSCategoryID;\r\n newSt.jobItemVMRSSubCategoryID = info.jobItemVMRSSubCategoryID;\r\n newSt.costCategory = info.jobItemCostCategoryID;\r\n newSt.rows = partList;\r\n newSt.readOnly = info.allowUpdate == 'Y' ? false : true;\r\n newSt.allowUpdate = info.allowUpdat;\r\n newSt.labourHours = info.jobItemLabourHours;\r\n newSt.labourRate = info.jobItemLabHourRate;\r\n newSt.jobItemCustomerLabHourRate = info.jobItemCustomerLabHourRate;\r\n newSt.jobItemCustomerLabourTotal = getTwoFixed(info.jobItemCustomerLabourCost);\r\n newSt.labourDiscount = info.jobItemLabourDiscount;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n setState((state) => ({\r\n ...state,\r\n ...newSt\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.workCategory && state.workList.length > 0) {\r\n newSt.workCategoryValue = state.workList?.find(({ id }) => id === state.workCategory);\r\n }\r\n if (state.costCategory && state.costCategories.length > 0) {\r\n newSt.costCategoryValue = state.costCategories?.find(({ id }) => id === state.costCategory);\r\n }\r\n\r\n if (state.jobItemStatusID && state.jobItemStatus.length > 0) {\r\n newSt.jobItemStatusIDValue = state.jobItemStatus?.find(({ id }) => id === state.jobItemStatusID);\r\n }\r\n if (state.jobItemCostTypeID && state.costTypeList.length > 0) {\r\n newSt.jobItemCostTypeIDValue = state.costTypeList?.find(({ id }) => id === state.jobItemCostTypeID);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.workCategory,\r\n state.workList,\r\n state.costCategory,\r\n state.costCategories,\r\n state.jobItemStatusID,\r\n state.jobItemStatus,\r\n state.costTypeList,\r\n state.jobItemCostTypeID\r\n ]);\r\n\r\n const caltotal = (state.partUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n const total = getTwoFixed(caltotal);\r\n\r\n const calLabourTotal = (state.labourRate * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n let newSt = {};\r\n newSt[name] = value;\r\n newSt.setBackup = name;\r\n if (name === 'labourRate') {\r\n let val = value * (1 + state.markup / 100);\r\n newSt.jobItemCustomerLabHourRate = getTwoFixed(val);\r\n const custLabourTotal = (val * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n newSt.jobItemCustomerLabourTotal = getTwoFixed(custLabourTotal);\r\n }\r\n if (name === 'partUnitPrice') {\r\n let customerUnitPrice = value * (1 + state.markup / 100);\r\n newSt.vehicleJobPartCustomerUnitPrice = getTwoFixed(customerUnitPrice);\r\n const calCustTotal = (customerUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n let customerPartsPriceTotal = getTwoFixed(calCustTotal);\r\n newSt.jobItemCustomerPartsPrice = customerPartsPriceTotal;\r\n }\r\n if (name === 'vehicleJobPartCustomerUnitPrice') {\r\n const calCustTotal = (value * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n let customerPartsPriceTotal = getTwoFixed(calCustTotal);\r\n newSt.jobItemCustomerPartsPrice = customerPartsPriceTotal;\r\n }\r\n if (name === 'jobItemCustomerLabHourRate') {\r\n const custLabourTotal = (value * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n newSt.jobItemCustomerLabourTotal = getTwoFixed(custLabourTotal);\r\n }\r\n if (name === 'labourDiscount') {\r\n const custLabourTotal = (state.jobItemCustomerLabHourRate * state.labourHours * (100 - value || 0)) / 100;\r\n newSt.jobItemCustomerLabourTotal = getTwoFixed(custLabourTotal);\r\n }\r\n if (name === 'labourHours') {\r\n const custLabourTotal = (state.jobItemCustomerLabHourRate * value * (100 - state.labourDiscount || 0)) / 100;\r\n newSt.jobItemCustomerLabourTotal = getTwoFixed(custLabourTotal);\r\n }\r\n if (name === 'partsDiscount') {\r\n const calCustTotal = (state.vehicleJobPartCustomerUnitPrice * state.partQuantity * (100 - value || 0)) / 100;\r\n let customerPartsPriceTotal = getTwoFixed(calCustTotal);\r\n newSt.jobItemCustomerPartsPrice = customerPartsPriceTotal;\r\n }\r\n if (name === 'partQuantity') {\r\n const calCustTotal = (state.vehicleJobPartCustomerUnitPrice * value * (100 - state.partsDiscount || 0)) / 100;\r\n let customerPartsPriceTotal = getTwoFixed(calCustTotal);\r\n newSt.jobItemCustomerPartsPrice = customerPartsPriceTotal;\r\n }\r\n setState((state) => ({\r\n ...state,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const WorkCategoryChange = (nm) => (e, val) => {\r\n if (nm === 'workCategoryValue') {\r\n const cat = val?.id?.split(',');\r\n if (cat?.length) {\r\n setState((state) => ({\r\n ...state,\r\n jobItemVMRSCategoryID: cat[0],\r\n jobItemVMRSSubCategoryID: cat[1],\r\n [nm]: val\r\n }));\r\n }\r\n } else {\r\n setState((state) => ({\r\n ...state,\r\n [nm]: val\r\n }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { labourDescription, workCategoryValue, labourRate, jobItemStatusID, labourHours, jobItemCostTypeIDValue } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(labourDescription)) {\r\n errors.labourDescription = 'Description is required';\r\n formIsValid = false;\r\n }\r\n if (!workCategoryValue) {\r\n errors.workCategory = 'Work Category is required';\r\n formIsValid = false;\r\n }\r\n if (!state.costCategoryValue) {\r\n errors.costCategory = 'Cost Category is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(labourRate)) {\r\n errors.labourRate = 'Rate is required';\r\n formIsValid = false;\r\n }\r\n if (!state.jobItemStatusIDValue) {\r\n errors.jobItemStatusID = 'Status is required';\r\n formIsValid = false;\r\n }\r\n if (!jobItemCostTypeIDValue) {\r\n errors.jobItemCostTypeIDValue = 'Cost Type is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (!labourHours) {\r\n errors.labourHours = 'Hours is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitSendForApproval = async (val) => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const PartsVM = state.rows\r\n .filter((data) => data.isDeleted != true)\r\n .map((row) => ({\r\n vehicleJobPartNumber: row.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: row.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: row.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: row.vehicleJobPartUnitPrice,\r\n vehicleJobCustomerUnitPrice: row.vehicleJobPartCustomerUnitPrice,\r\n vehicleJobPartDescription: row.vehicleJobPartDescription\r\n }));\r\n const data = {\r\n jobItemDescription: state.labourDescription,\r\n jobItemLabourHours: state.labourHours,\r\n jobItemLabHourRate: state.labourRate,\r\n jobItemCustomerLabHourRate: state.jobItemCustomerLabHourRate,\r\n jobItemLabourDiscount: state.labourDiscount || 0,\r\n jobItemID: state.jobItemID,\r\n jobItemVMRSCategoryID: state.jobItemVMRSCategoryID,\r\n jobItemVMRSSubCategoryID: state.jobItemVMRSSubCategoryID,\r\n jobItemJobID: props.jobItemJobID,\r\n jobItemCostCategoryID: state.costCategoryValue?.id,\r\n vehicleJobPartsVM: PartsVM,\r\n jobItemStatusID: state.jobItemStatusIDValue?.id,\r\n jobItemCostTypeID: state.jobItemCostTypeIDValue?.id,\r\n sendForApproval: 0\r\n };\r\n let res = await PostInternalVehicleJobsItem(data);\r\n if (res.success) {\r\n showToastSuccess('Job item saved successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const addPartToLocally = () => {\r\n if (state.partDescription === '') {\r\n showToastError('Description is required');\r\n }\r\n if (state.partNumber === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partQuantity === null || state.partQuantity === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partUnitPrice === null || state.partUnitPrice === '') {\r\n showToastError('Price is required');\r\n } else {\r\n let newPartToAdd = {\r\n vehicleJobPartNumber: state.partNumber,\r\n vehicleJobPartQuantity: state.partQuantity,\r\n vehicleJobPartDiscount: state.partsDiscount,\r\n vehicleJobPartUnitPrice: state.partUnitPrice,\r\n vehicleJobPartCustomerUnitPrice: state.vehicleJobPartCustomerUnitPrice,\r\n vehicleJobPartDescription: state.partDescription,\r\n isDeleted: false,\r\n partsTotal: getTwoFixed((state.partUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100)\r\n };\r\n setState((st) => ({\r\n ...st,\r\n rows: state.rows.filter((item) => item.id !== state.partId)\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 partNumber: '',\r\n partQuantity: '',\r\n partsDiscount: '',\r\n partUnitPrice: '',\r\n vehicleJobPartCustomerUnitPrice: '',\r\n partDescription: '',\r\n partsTotal: '',\r\n isUpdate: false,\r\n partId: undefined,\r\n jobItemCustomerPartsPrice: 0\r\n };\r\n });\r\n }\r\n };\r\n const closeTheDialog = () => {\r\n setState((st) => ({ ...st, showPastJob: false }));\r\n };\r\n\r\n const handleClose = () => {\r\n props.onClose(false);\r\n };\r\n\r\n const handleOpen = () => {\r\n setState((st) => ({ ...st, showCancelConfirmModal: !st.showCancelConfirmModal }));\r\n };\r\n\r\n let setbtn = state.setBackup.length > 0 ? handleOpen : handleClose;\r\n return (\r\n \r\n {state.showPastJob && (\r\n \r\n \r\n )}\r\n\r\n \r\n {checkStatus && (\r\n \r\n \r\n Save\r\n \r\n \r\n )}\r\n \r\n {\r\n // props.onClose(false);\r\n // }\r\n }\r\n >\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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 Total\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.workCategory && (\r\n \r\n {'\\u{2800}'} \r\n {\r\n setState((st) => ({ ...st, showPastJob: true }));\r\n }}\r\n icon={SearchIcon}\r\n />\r\n \r\n )}\r\n {state.errors.workCategory} \r\n \r\n \r\n {state.errors.costCategory} \r\n \r\n \r\n {state.errors.jobItemCostTypeIDValue} \r\n \r\n \r\n {state.errors.jobItemStatusID} \r\n \r\n \r\n {checkStatus && (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \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.partId ? 'Update' : 'Add'}\r\n \r\n \r\n \r\n \r\n )}\r\n {state.showCancelConfirmModal ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default AddJobItemModal;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllJobItems } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { getJobDetailsById, getJobRequiredDocuments } from '../../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { AddButton, CustomChip, EditButton, formatters } from '../../../../../../Core/Controls';\r\nimport AddLabourModal from './addJobItem';\r\nimport '../../../../../commonStyle.scss';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { some } from 'lodash';\r\nimport { useHistory } from 'react-router-dom';\r\nimport SellerInvoiceModal from '../../JOBItems/JobInvoiceLines/sellerInvoice';\r\nimport PurchaseInvoice from '../../JOBItems/JobInvoiceLines/purchaseInvoice';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport JobItemHeaderDates from './../../JOBItems/jobItemHeaderDates';\r\nimport FileUploaderButton from '../../../../../../Core/Controls/GenericFileUploader';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport JobQueriesScreen from '../../jobQueriesScreen';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport UpdateIcon from '@material-ui/icons/Update';\r\nimport _ from 'lodash';\r\nimport UpcomingEvents from '../../../Vehicles/ScheduleVehicle/upcomingEvents';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\n\r\nconst alertBoxColorCode = {\r\n AA: 'warning',\r\n EP: 'warning',\r\n JP: 'warning',\r\n AU: 'error',\r\n JQ: 'error',\r\n FR: 'error',\r\n JD: 'error',\r\n JR: 'error',\r\n CA: 'success',\r\n JC: 'success',\r\n JA: 'success'\r\n};\r\n\r\nfunction InternalJobItem(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n jobItemsList: [],\r\n loader: true,\r\n open: false,\r\n jobStatusID: '',\r\n showInvoice: false,\r\n refresherFlag: new Date(),\r\n errors: {},\r\n showOk: true,\r\n showSellerBtn: true,\r\n showSellerInvoice: false,\r\n showCreate: false\r\n });\r\n const history = useHistory();\r\n\r\n const dataReload = () => {\r\n setState((state) => ({ ...state, refresherFlag: new Date() }));\r\n };\r\n\r\n const base_columns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 60\r\n },\r\n {\r\n key: 'jobItemDescription',\r\n name: 'Description',\r\n formatter: (params) => {\r\n return (\r\n \r\n £{state.jobItemCustomerLabourTotal || 0}\r\n
\r\n \r\n \r\n Total\r\n \r\n
\r\n £{calLabourTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
\r\n \r\n \r\n Customer Total\r\n \r\n
\r\n \r\n £{state.jobItemCustomerPartsPrice || 0}\r\n
\r\n \r\n \r\n Total\r\n \r\n
\r\n £{total}
\r\n \r\n item.isDeleted !== true)}\r\n isRowHovered={true}\r\n loadingData={state.loader}\r\n />\r\n
\r\n \r\n
\r\n );\r\n },\r\n cellClass: 'react-data-grid-cell-line-height'\r\n },\r\n { key: 'jobItemPartsprice', name: 'Parts', formatter: formatters.NumberWithPound, headerRenderer: formatters.ColumnHeaderAlignRight, width: 90 },\r\n { key: 'totalLabour', name: 'Labour', formatter: formatters.NumberWithPound, headerRenderer: formatters.ColumnHeaderAlignRight, width: 90 },\r\n { key: 'total', name: 'Total', formatter: formatters.NumberWithPound, headerRenderer: formatters.ColumnHeaderAlignRight, width: 90 },\r\n { key: 'custTotal', name: 'Cust Total', formatter: formatters.NumberWithPound, headerRenderer: formatters.ColumnHeaderAlignRight, width: 90 }\r\n // { key: 'jobItemStatusDescription', name: 'Status' }\r\n ];\r\n\r\n useEffect(async () => {\r\n pullJobDetails();\r\n pullJobItems();\r\n }, [state.refresherFlag]);\r\n\r\n const [jobDetails, setJobDetails] = useState({\r\n jobDescription: '',\r\n jobDepotID: '',\r\n jobServiceAgentID: '',\r\n vehicleMake: '',\r\n vehicleModel: '',\r\n jobRegNumber: '',\r\n refreshDependancy: ''\r\n });\r\n\r\n const [jobdocument, setJobDocument] = useState({\r\n list: []\r\n });\r\n\r\n const pullJobDetails = async () => {\r\n let res = await getJobDetailsById(props.scheduleJobID);\r\n let res1 = res.data.list;\r\n let data = res1?.length > 0 ? res.data?.list[0] : res.data?.list;\r\n if (data) {\r\n setJobDetails((st) => ({\r\n ...st,\r\n jobID: data.jobID,\r\n jobAgentOrderNo: data.jobAgentOrderNo,\r\n jobOrderDate: formatters.DateOnlyFormatter(data.jobDate),\r\n jobOrderTotal: data.orderTotal,\r\n jobEstimatedCost: data.jobEstimatedCost || '',\r\n jobServiceAgentID: data.jobServiceAgentID || '',\r\n jobVehicleID: data.jobVehicleID,\r\n jobRegNumber: data.jobRegNumber,\r\n vehicleMake: data.vehicleMake,\r\n vehicleModel: data.vehicleModel,\r\n vehicleJobStatus: data.vehicleJobStatus,\r\n jobStatusID: data.jobStatusID,\r\n jobApprovedOrderNo: data.jobApprovedOrderNo,\r\n mileageRequired: data.mileageRequired,\r\n customerName: data.customerCompanyName,\r\n jobDescription: data.jobDescription,\r\n bookingDate: data.bookingDate,\r\n completionDate: data.completionDate,\r\n vehicleArrived: data.vehicleArrived,\r\n jobMileageDate: data.jobMileageDate || '',\r\n jobMileage: data.jobMileage || '',\r\n refreshDependancy: new Date(),\r\n jobCustomerOrderTotal: data.jobCustomerOrderTotal || 0,\r\n jobOrderNo: data.jobOrderNo,\r\n jobIsEstimate: data.jobIsEstimate,\r\n islabourRateSet: data.labourRate == 0 ? false : true,\r\n labourRate: data.labourRate,\r\n jobInAgentQuery: data.jobInAgentQuery,\r\n markup: data.markup\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n if (jobDetails.jobID) {\r\n let res = await getJobRequiredDocuments(jobDetails.jobID);\r\n setJobDocument((state) => ({ ...state, list: res.data.list }));\r\n }\r\n }, [jobDetails.jobID]);\r\n\r\n const pullJobItems = async () => {\r\n let res = await getAllJobItems(props.scheduleJobID);\r\n let res2 = res.data.vehicleJobItems.map((m) => {\r\n let customerLabour = m.jobItemLabHourRate * (1 + state.markup / 100);\r\n let Labour = (m.jobItemLabHourRate * m.jobItemLabourHours * (100 - m.jobItemLabourDiscount)) / 100;\r\n return {\r\n custTotal: m.jobItemCustomerLabourCost + m.jobItemCustomerPartsPrice,\r\n totalLabour: Labour,\r\n total: Labour + m.jobItemPartsprice,\r\n ...m\r\n };\r\n });\r\n\r\n setState((state) => {\r\n const nst = { ...state };\r\n nst.jobItemsList = res2;\r\n nst.loader = false;\r\n nst.checkApprovedJob = some(res.data.vehicleJobItems, (r) => r.jobItemStatusID == 'A');\r\n return nst;\r\n });\r\n };\r\n\r\n const btnHandler = (params) => {\r\n setState((state) => ({ ...state, open: true, jobItemID: params.jobItemID, vehicleID: params.vehicleID, vehicleRegNumber: params.vehicleRegNumber }));\r\n };\r\n\r\n const createInvoiceHandler = (name) => {\r\n setState((state) => ({ ...state, [name]: true }));\r\n };\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n {params.row.jobItemDescription}
\r\n {params.row.vmrs}
\r\n \r\n btnHandler(data.row)} />\r\n
\r\n );\r\n };\r\n\r\n let checkStatus = ['AA', 'JP', 'JQ', 'EA', 'EU'].includes(jobDetails.jobStatusID);\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n actionCol.headerRenderer = () => {\r\n if (checkStatus) {\r\n return (\r\n \r\n closeModal(false)} title=\"Create Sales Invoice\" maxWidth=\"lg\" fullScreen>\r\n \r\n )}\r\n {state.showInvoice && (\r\n closeModal(false)} title=\"Create Purchase Invoice\" maxWidth=\"md\">\r\n \r\n )}\r\n {state.open ? (\r\n
\r\n );\r\n}\r\nexport default InternalJobItem;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, EditButton, DeleteButton, formatters, MandatoryField, SingleSelect, SimpleField } from '../../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../../Core/Hooks/useToast';\r\nimport '../../../../../commonStyle.scss';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { getJobItemById, getJobItemsDropDown, postJobItem } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport PastJobs from './../../JOBItems/getPastJobBy';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport ConfirmationModal from '../../../../../../Core/Modal/ConfirmationModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n {\r\n key: 'vehicleJobPartNumber',\r\n name: 'Part Number',\r\n width: '10%'\r\n },\r\n {\r\n key: 'vehicleJobPartDescription',\r\n name: 'Part Description',\r\n width: '23%'\r\n },\r\n {\r\n key: 'vehicleJobPartQuantity',\r\n name: 'Quantity',\r\n width: '8%',\r\n formatter: formatters.ColumnTextAlignRight,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartUnitPrice',\r\n name: 'Unit Price',\r\n width: '17%',\r\n formatter: formatters.NumberWithPound,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartDiscount',\r\n name: 'Discount',\r\n width: '5%',\r\n formatter: (data) => \r\n \r\n \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n \r\n {jobDetails?.jobOrderNo || ''}({jobDetails?.jobAgentOrderNo})\r\n \r\n \r\n ) : (\r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n )}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n {' '}\r\n {getMakeModel}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0 ? 6 : 12} md={jobdocument.list.length > 0 ? 7 : 12} style={{ marginTop: 3 }}>\r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {jobdocument.list.length > 0 && (\r\n \r\n \r\n {jobdocument.list.map((m) => {\r\n return (\r\n \r\n {false ? (\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n {state.showSellerInvoice && (\r\n \r\n Total \r\n \r\n £{jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n \r\n {m.docName}{' '}\r\n \r\n
\r\n ) : (\r\n \r\n {m.docName}\r\n \r\n
\r\n )}\r\n \r\n {jobDetails.jobStatusID == 'CA' && (\r\n \r\n \r\n createInvoiceHandler('showInvoice')}\r\n style={{ fontWeight: 'bold' }}\r\n />\r\n \r\n \r\n createInvoiceHandler('showSellerInvoice')}\r\n style={{ fontWeight: 'bold' }}\r\n />\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.showUpComingEvents ? (\r\n closeModal(false)} maxWidth=\"md\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n )}\r\n {data.row.vehicleJobPartDiscount || 0 + '%'}
,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'getTotal',\r\n name: 'Total',\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n }\r\n];\r\n\r\nfunction AddJobItemModal(props) {\r\n const [state, setState] = useState({\r\n setBackup: [],\r\n jobItemID: null,\r\n labourDescription: '',\r\n jobItemStatusID: null,\r\n JobItemCostTypeID: null,\r\n jobItemStatus: [],\r\n labourHours: '',\r\n labourRate: '',\r\n labourDiscount: 0,\r\n workCategory: '',\r\n costCategory: '',\r\n partNumber: '',\r\n partQuantity: null,\r\n partUnitPrice: null,\r\n partDescription: '',\r\n partsDiscount: '',\r\n partsTotal: '',\r\n workList: [],\r\n costCategories: [],\r\n rows: [],\r\n errors: {},\r\n readOnly: false,\r\n showPastJob: false,\r\n costCategoryValue: null,\r\n jobItemStatusIDValue: null,\r\n jobItemCostTypeIDValue: null,\r\n workCategoryValue: null,\r\n showCancelConfirmModal: false\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const handleUpdatePart = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n id: params.id,\r\n partNumber: params.vehicleJobPartNumber,\r\n partQuantity: params.vehicleJobPartQuantity,\r\n partsDiscount: params.vehicleJobPartDiscount,\r\n partUnitPrice: params.vehicleJobPartUnitPrice,\r\n partDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n partId: params.id,\r\n isUpdate: true\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDeletePart = (params) => {\r\n const id = params.id;\r\n const newList = state.rows.filter((item) => item.id !== id);\r\n let newPartToSetIsDelete = {\r\n id: params.id,\r\n partId: params.id,\r\n vehicleJobPartNumber: params.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: params.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: params.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: params.vehicleJobPartUnitPrice,\r\n vehicleJobPartDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n isDeleted: true\r\n };\r\n newList.push(newPartToSetIsDelete);\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n rows: newList\r\n };\r\n return nst;\r\n });\r\n };\r\n let checkStatus = !props.isCustomer && ['AA', 'JP', 'JQ', 'EA', 'EU'].includes(props.status) && checkhaveAccess?.CanUpdateJobs; //hide if role is customer\r\n\r\n //hide if role is customer\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n \r\n handleUpdatePart(data.row)} />\r\n {checkhaveAccess?.CanDeleteJobLines && handleDeletePart(data.row)} toolTipTitle=\"Delete Job Item\" />}\r\n
\r\n );\r\n };\r\n\r\n const CalculateTotal = (data) => {\r\n const { vehicleJobPartQuantity, vehicleJobPartUnitPrice, vehicleJobPartDiscount } = data.row;\r\n const total = (vehicleJobPartUnitPrice * vehicleJobPartQuantity * (100 - vehicleJobPartDiscount || 0)) / 100;\r\n return £{total.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol2 = newColumn.find((item) => item.key === 'getTotal');\r\n if (checkStatus) {\r\n newColumn.splice(0, 0, { key: 'action', name: 'Action', formatter: ActionButtons, width: '5%' });\r\n }\r\n if (actionCol2) {\r\n actionCol2.formatter = CalculateTotal;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n setState((st) => ({ ...st, islabourRateSet: props.islabourRateSet, labourRate: props.labourRate, markup: props.markup }));\r\n let res1 = await getJobItemsDropDown();\r\n if (res1.success) {\r\n const category = res1.data.vmrsCategory.map((item) => ({\r\n id: item.catid + ',' + item.subcatid,\r\n name: item.subcatname\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n workList: category,\r\n costCategories: res1.data.costCategories,\r\n jobItemStatus: res1.data.jobItemStatus,\r\n costTypeList: res1.data.costType\r\n }));\r\n }\r\n if (props.jobItemID) {\r\n let partList = [];\r\n let res = await getJobItemById(props.jobItemID);\r\n partList = res.data.vehicleJobPartsDetails.map((item, index) => ({\r\n ...item,\r\n vehicleJobPartDiscount: item.vehicleJobPartCustomerDiscount,\r\n vehicleJobPartQuantity: item.vehicleJobPartCustomerQuantity,\r\n vehicleJobPartUnitPrice: item.vehicleJobPartCustomerUnitPrice,\r\n id: index + 1,\r\n isDeleted: false\r\n }));\r\n\r\n const info = res.data.vehicleJobitemdetails[0];\r\n if (res.success) {\r\n let newSt = {};\r\n newSt.jobItemID = info.jobItemID;\r\n newSt.labourDescription = info.jobItemDescription;\r\n newSt.jobItemJobID = info.jobItemJobID;\r\n newSt.jobItemStatusID = info.jobItemStatusID;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n newSt.workCategory = info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID;\r\n newSt.jobItemVMRSCategoryID = info.jobItemVMRSCategoryID;\r\n newSt.jobItemVMRSSubCategoryID = info.jobItemVMRSSubCategoryID;\r\n newSt.costCategory = info.jobItemCostCategoryID;\r\n newSt.rows = partList;\r\n newSt.readOnly = info.allowUpdate == 'Y' ? false : true;\r\n newSt.allowUpdate = info.allowUpdat;\r\n newSt.labourHours = info.jobItemCustomerLabourHours;\r\n newSt.labourRate = info.jobItemCustomerLabHourRate;\r\n newSt.labourDiscount = info.jobItemCustomerLabourDiscount;\r\n newSt.jobItemCostTypeID = info.jobItemCustomerLabourCost;\r\n setState((state) => ({\r\n ...state,\r\n ...newSt\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.workCategory && state.workList.length > 0) {\r\n newSt.workCategoryValue = state.workList?.find(({ id }) => id === state.workCategory);\r\n }\r\n if (state.costCategory && state.costCategories.length > 0) {\r\n newSt.costCategoryValue = state.costCategories?.find(({ id }) => id === state.costCategory);\r\n }\r\n\r\n if (state.jobItemStatusID && state.jobItemStatus.length > 0) {\r\n newSt.jobItemStatusIDValue = state.jobItemStatus?.find(({ id }) => id === state.jobItemStatusID);\r\n }\r\n if (state.jobItemCostTypeID && state.costTypeList.length > 0) {\r\n newSt.jobItemCostTypeIDValue = state.costTypeList?.find(({ id }) => id === state.jobItemCostTypeID);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.workCategory,\r\n state.workList,\r\n state.costCategory,\r\n state.costCategories,\r\n state.jobItemStatusID,\r\n state.jobItemStatus,\r\n state.costTypeList,\r\n state.jobItemCostTypeID\r\n ]);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n setBackup: [...state.setBackup, name]\r\n }));\r\n };\r\n let customerUnitPrice = state.partUnitPrice * (1 + state.markup / 100);\r\n const calCustTotal = (customerUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n let customerTotal = calCustTotal.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\r\n\r\n let customerLabour = state.labourRate * (1 + state.markup / 100);\r\n const total1 = (customerLabour * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n\r\n const WorkCategoryChange = (nm) => (e, val) => {\r\n if (nm === 'workCategoryValue') {\r\n const cat = val?.id?.split(',');\r\n if (cat?.length) {\r\n setState((state) => ({\r\n ...state,\r\n jobItemVMRSCategoryID: cat[0],\r\n jobItemVMRSSubCategoryID: cat[1],\r\n [nm]: val\r\n }));\r\n }\r\n } else {\r\n setState((state) => ({\r\n ...state,\r\n [nm]: val\r\n }));\r\n }\r\n };\r\n\r\n const closeTheDialog = () => {\r\n setState((st) => ({ ...st, showPastJob: false }));\r\n };\r\n\r\n const handleClose = () => {\r\n props.onClose(false);\r\n };\r\n\r\n const handleOpen = () => {\r\n setState((st) => ({ ...st, showCancelConfirmModal: !st.showCancelConfirmModal }));\r\n };\r\n\r\n let setbtn = state.setBackup.length > 0 ? handleOpen : handleClose;\r\n return (\r\n \r\n {state.showPastJob && (\r\n \r\n \r\n )}\r\n\r\n \r\n {checkStatus && (\r\n \r\n \r\n Save\r\n \r\n \r\n )}\r\n \r\n {\r\n // props.onClose(false);\r\n // }\r\n }\r\n >\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n \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.workCategory && (\r\n \r\n {'\\u{2800}'} \r\n {\r\n setState((st) => ({ ...st, showPastJob: true }));\r\n }}\r\n icon={SearchIcon}\r\n />\r\n \r\n )}\r\n {state.errors.workCategory} \r\n \r\n \r\n {state.errors.costCategory} \r\n \r\n \r\n {state.errors.jobItemCostTypeIDValue} \r\n \r\n \r\n {state.errors.jobItemStatusID} \r\n \r\n \r\n {checkStatus && (\r\n <>\r\n \r\n \r\n \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.partId ? 'Update' : 'Add'} \r\n \r\n \r\n \r\n )}\r\n {state.showCancelConfirmModal ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default AddJobItemModal;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllJobItems } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { getJobDetailsById, getJobRequiredDocuments } from '../../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { AddButton, EditButton, formatters } from '../../../../../../Core/Controls';\r\nimport AddLabourModal from './addJobItem';\r\nimport '../../../../../commonStyle.scss';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { some } from 'lodash';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CustStatusBasedButton from './statusBtn';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport JobItemHeaderDates from './../../JOBItems/jobItemHeaderDates';\r\nimport FileUploaderButton from '../../../../../../Core/Controls/GenericFileUploader';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport JobQueriesScreen from '../../jobQueriesScreen';\r\nimport UpdateIcon from '@material-ui/icons/Update';\r\nimport UpcomingEvents from '../../../Vehicles/ScheduleVehicle/upcomingEvents';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\n\r\nconst alertBoxColorCode = {\r\n AA: 'warning',\r\n EP: 'warning',\r\n JP: 'warning',\r\n AU: 'error',\r\n JQ: 'error',\r\n FR: 'error',\r\n JD: 'error',\r\n JR: 'error',\r\n CA: 'success',\r\n JC: 'success',\r\n JA: 'success'\r\n};\r\n\r\nfunction JobItemsScreen(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { userRoles } = useLoginInfo();\r\n const [state, setState] = useState({\r\n jobItemsList: [],\r\n loader: true,\r\n open: false,\r\n jobStatusID: '',\r\n refresherFlag: new Date(),\r\n errors: {},\r\n showOk: true,\r\n showSellerBtn: true,\r\n showCreate: false\r\n });\r\n const history = useHistory();\r\n\r\n const dataReload = () => {\r\n setState((state) => ({ ...state, refresherFlag: new Date() }));\r\n };\r\n\r\n const base_columns = [\r\n {\r\n key: 'jobItemDescription',\r\n name: 'Description',\r\n formatter: (params) => {\r\n return (\r\n \r\n \r\n Total\r\n \r\n
\r\n £{total1?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
\r\n \r\n item.isDeleted !== true)}\r\n isRowHovered={true}\r\n loadingData={state.loader}\r\n />\r\n
\r\n \r\n btnHandler(data.row)} />\r\n
\r\n );\r\n };\r\n\r\n let checkStatus = ['AA', 'JP', 'JQ'].includes(jobDetails?.jobStatusID);\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n\r\n if (checkhaveAccess?.CanUpdateJobs) {\r\n newColumn.splice(0, 0, {\r\n key: 'action',\r\n name: 'Action',\r\n width: 60,\r\n formatter: ActionButtons,\r\n headerRenderer: () => {\r\n if (checkStatus) {\r\n return (\r\n \r\n
\r\n );\r\n}\r\nexport default JobItemsScreen;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, EditButton, DeleteButton, formatters, MandatoryField, SingleSelect, SimpleField } from '../../../../../../Core/Controls';\r\nimport { useToast } from '../../../../../../Core/Hooks/useToast';\r\nimport '../../../../../commonStyle.scss';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { getJobItemById, getJobItemsDropDown, postJobItem } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport PastJobs from './../../JOBItems/getPastJobBy';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport { useLoginInfo } from '../../../../../../Core/Hooks/useLoginInfo';\r\nimport ConfirmationModal from '../../../../../../Core/Modal/ConfirmationModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n {\r\n key: 'vehicleJobPartNumber',\r\n name: 'Part Number',\r\n width: '10%'\r\n },\r\n {\r\n key: 'vehicleJobPartDescription',\r\n name: 'Part Description',\r\n width: '23%'\r\n },\r\n {\r\n key: 'vehicleJobPartQuantity',\r\n name: 'Quantity',\r\n width: '8%',\r\n formatter: formatters.ColumnTextAlignRight,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartUnitPrice',\r\n name: 'Unit Price',\r\n width: '17%',\r\n formatter: formatters.NumberWithPound,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'vehicleJobPartDiscount',\r\n name: 'Discount',\r\n width: '5%',\r\n formatter: (data) => \r\n \r\n \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n \r\n {jobDetails?.jobOrderNo || ''}({jobDetails?.jobAgentOrderNo})\r\n \r\n \r\n ) : (\r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n )}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n \r\n {getMakeModel}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0 ? 6 : 12} md={jobdocument.list.length > 0 ? 7 : 12} style={{ marginTop: 3 }}>\r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {jobdocument.list.length > 0 && (\r\n \r\n \r\n {jobdocument.list.map((m) => {\r\n return (\r\n \r\n {false ? (\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n {state.open ? (\r\n \r\n Total \r\n \r\n £{jobDetails.jobCustomerOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d0})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n \r\n {m.docName}{' '}\r\n \r\n
\r\n ) : (\r\n \r\n {m.docName}\r\n \r\n
\r\n )}\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.showUpComingEvents ? (\r\n closeModal(false)} maxWidth=\"md\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n )}\r\n {data.row.vehicleJobPartDiscount || 0 + '%'}
,\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n },\r\n {\r\n key: 'getTotal',\r\n name: 'Total',\r\n headerRenderer: formatters.ColumnHeaderAlignRight\r\n }\r\n];\r\n\r\nfunction AddJobItemModal(props) {\r\n const [state, setState] = useState({\r\n setBackup: [],\r\n jobItemID: null,\r\n labourDescription: '',\r\n jobItemStatusID: null,\r\n JobItemCostTypeID: null,\r\n jobItemStatus: [],\r\n labourHours: '',\r\n labourRate: '',\r\n labourDiscount: 0,\r\n workCategory: '',\r\n costCategory: '',\r\n partNumber: '',\r\n partQuantity: null,\r\n partUnitPrice: null,\r\n partDescription: '',\r\n partsDiscount: '',\r\n partsTotal: '',\r\n workList: [],\r\n costCategories: [],\r\n rows: [],\r\n errors: {},\r\n readOnly: false,\r\n showPastJob: false,\r\n costCategoryValue: null,\r\n jobItemStatusIDValue: null,\r\n jobItemCostTypeIDValue: null,\r\n workCategoryValue: null,\r\n showCancelConfirmModal: false\r\n });\r\n const { userRoles } = useLoginInfo();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const handleUpdatePart = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n id: params.id,\r\n partNumber: params.vehicleJobPartNumber,\r\n partQuantity: params.vehicleJobPartQuantity,\r\n partsDiscount: params.vehicleJobPartDiscount,\r\n partUnitPrice: params.vehicleJobPartUnitPrice,\r\n partDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n partId: params.id,\r\n isUpdate: true\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDeletePart = (params) => {\r\n const id = params.id;\r\n const newList = state.rows.filter((item) => item.id !== id);\r\n let newPartToSetIsDelete = {\r\n id: params.id,\r\n partId: params.id,\r\n vehicleJobPartNumber: params.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: params.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: params.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: params.vehicleJobPartUnitPrice,\r\n vehicleJobPartDescription: params.vehicleJobPartDescription,\r\n partsTotal: params.partsTotal,\r\n isDeleted: true\r\n };\r\n newList.push(newPartToSetIsDelete);\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n rows: newList\r\n };\r\n return nst;\r\n });\r\n };\r\n let checkStatus = ['AA', 'JP', 'JQ', 'EA', 'EU'].includes(props.Status) && checkhaveAccess?.CanUpdateJobs; //hide if role is customer\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n \r\n handleUpdatePart(data.row)} />\r\n {checkhaveAccess?.CanDeleteJobLines && handleDeletePart(data.row)} toolTipTitle=\"Delete Job Item\" />}\r\n
\r\n );\r\n };\r\n\r\n const CalculateTotal = (data) => {\r\n const { vehicleJobPartQuantity, vehicleJobPartUnitPrice, vehicleJobPartDiscount } = data.row;\r\n const total = (vehicleJobPartUnitPrice * vehicleJobPartQuantity * (100 - vehicleJobPartDiscount || 0)) / 100;\r\n return £{total.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol2 = newColumn.find((item) => item.key === 'getTotal');\r\n if (checkStatus) {\r\n newColumn.splice(0, 0, { key: 'action', name: 'Action', formatter: ActionButtons, width: '5%' });\r\n }\r\n if (actionCol2) {\r\n actionCol2.formatter = CalculateTotal;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n setState((st) => ({ ...st, islabourRateSet: props.islabourRateSet, labourRate: props.labourRate }));\r\n let res1 = await getJobItemsDropDown();\r\n if (res1.success) {\r\n const category = res1.data.vmrsCategory.map((item) => ({\r\n id: item.catid + ',' + item.subcatid,\r\n name: item.subcatname\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n workList: category,\r\n costCategories: res1.data.costCategories,\r\n jobItemStatus: res1.data.jobItemStatus,\r\n costTypeList: res1.data.costType\r\n }));\r\n }\r\n if (props.jobItemID) {\r\n let partList = [];\r\n let res = await getJobItemById(props.jobItemID);\r\n partList = res.data.vehicleJobPartsDetails.map((item, index) => ({\r\n ...item,\r\n id: index + 1,\r\n isDeleted: false\r\n }));\r\n const info = res.data.vehicleJobitemdetails[0];\r\n if (res.success) {\r\n let newSt = {};\r\n newSt.jobItemID = info.jobItemID;\r\n newSt.labourDescription = info.jobItemDescription;\r\n newSt.jobItemJobID = info.jobItemJobID;\r\n newSt.jobItemStatusID = info.jobItemStatusID;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n newSt.workCategory = info.jobItemVMRSCategoryID + ',' + info.jobItemVMRSSubCategoryID;\r\n newSt.jobItemVMRSCategoryID = info.jobItemVMRSCategoryID;\r\n newSt.jobItemVMRSSubCategoryID = info.jobItemVMRSSubCategoryID;\r\n newSt.costCategory = info.jobItemCostCategoryID;\r\n newSt.rows = partList;\r\n newSt.readOnly = info.allowUpdate == 'Y' ? false : true;\r\n newSt.allowUpdate = info.allowUpdat;\r\n newSt.labourHours = info.jobItemLabourHours;\r\n newSt.labourRate = info.jobItemLabHourRate;\r\n newSt.labourDiscount = info.jobItemLabourDiscount;\r\n newSt.jobItemCostTypeID = info.jobItemCostTypeID;\r\n setState((state) => ({\r\n ...state,\r\n ...newSt\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.workCategory && state.workList.length > 0) {\r\n newSt.workCategoryValue = state.workList?.find(({ id }) => id === state.workCategory);\r\n }\r\n if (state.costCategory && state.costCategories.length > 0) {\r\n newSt.costCategoryValue = state.costCategories?.find(({ id }) => id === state.costCategory);\r\n }\r\n\r\n if (state.jobItemStatusID && state.jobItemStatus.length > 0) {\r\n newSt.jobItemStatusIDValue = state.jobItemStatus?.find(({ id }) => id === state.jobItemStatusID);\r\n }\r\n if (state.jobItemCostTypeID && state.costTypeList.length > 0) {\r\n newSt.jobItemCostTypeIDValue = state.costTypeList?.find(({ id }) => id === state.jobItemCostTypeID);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.workCategory,\r\n state.workList,\r\n state.costCategory,\r\n state.costCategories,\r\n state.jobItemStatusID,\r\n state.jobItemStatus,\r\n state.costTypeList,\r\n state.jobItemCostTypeID\r\n ]);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n // let temparr = [];\r\n // temparr.push(name);\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n setBackup: [...state.setBackup, name]\r\n }));\r\n };\r\n\r\n const caltotal = (state.partUnitPrice * state.partQuantity * (100 - state.partsDiscount || 0)) / 100;\r\n const total = caltotal.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\r\n const total1 = (state.labourRate * state.labourHours * (100 - state.labourDiscount || 0)) / 100;\r\n\r\n const WorkCategoryChange = (nm) => (e, val) => {\r\n if (nm === 'workCategoryValue') {\r\n const cat = val?.id?.split(',');\r\n if (cat?.length) {\r\n setState((state) => ({\r\n ...state,\r\n jobItemVMRSCategoryID: cat[0],\r\n jobItemVMRSSubCategoryID: cat[1],\r\n [nm]: val\r\n }));\r\n }\r\n } else {\r\n setState((state) => ({\r\n ...state,\r\n [nm]: val\r\n }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { labourDescription, workCategoryValue, labourRate, jobItemStatusID, labourHours, jobItemCostTypeIDValue } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(labourDescription)) {\r\n errors.labourDescription = 'Description is required';\r\n formIsValid = false;\r\n }\r\n if (!workCategoryValue) {\r\n errors.workCategory = 'Work Category is required';\r\n formIsValid = false;\r\n }\r\n if (!state.costCategoryValue) {\r\n errors.costCategory = 'Cost Category is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(labourRate)) {\r\n errors.labourRate = 'Rate is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (!labourHours) {\r\n errors.labourHours = 'Hours is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitSendForApproval = async (val) => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const PartsVM = state.rows\r\n .filter((data) => data.isDeleted != true)\r\n .map((row) => ({\r\n vehicleJobPartNumber: row.vehicleJobPartNumber,\r\n vehicleJobPartQuantity: row.vehicleJobPartQuantity,\r\n vehicleJobPartDiscount: row.vehicleJobPartDiscount,\r\n vehicleJobPartUnitPrice: row.vehicleJobPartUnitPrice,\r\n vehicleJobPartDescription: row.vehicleJobPartDescription\r\n }));\r\n const data = {\r\n jobItemDescription: state.labourDescription,\r\n jobItemLabourHours: state.labourHours,\r\n jobItemLabHourRate: state.labourRate,\r\n jobItemLabourDiscount: state.labourDiscount || 0,\r\n jobItemID: state.jobItemID,\r\n jobItemVMRSCategoryID: state.jobItemVMRSCategoryID,\r\n jobItemVMRSSubCategoryID: state.jobItemVMRSSubCategoryID,\r\n jobItemJobID: props.jobItemJobID,\r\n jobItemCostCategoryID: state.costCategoryValue?.id,\r\n vehicleJobPartsVM: PartsVM,\r\n jobItemStatusID: state.jobItemStatusIDValue?.id,\r\n jobItemCostTypeID: state.jobItemCostTypeIDValue?.id,\r\n sendForApproval: 0\r\n };\r\n let res = await postJobItem(data);\r\n if (res.success) {\r\n showToastSuccess('Job item saved successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const addPartToLocally = () => {\r\n if (state.partDescription === '') {\r\n showToastError('Description is required');\r\n }\r\n if (state.partNumber === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partQuantity === null || state.partQuantity === '') {\r\n showToastError('Quantity is required');\r\n }\r\n if (state.partUnitPrice === null || state.partUnitPrice === '') {\r\n showToastError('Price is required');\r\n } else {\r\n let newPartToAdd = {\r\n vehicleJobPartNumber: state.partNumber,\r\n vehicleJobPartQuantity: state.partQuantity,\r\n vehicleJobPartDiscount: state.partsDiscount,\r\n vehicleJobPartUnitPrice: state.partUnitPrice,\r\n vehicleJobPartDescription: state.partDescription,\r\n isDeleted: false,\r\n partsTotal: total\r\n };\r\n setState((st) => ({\r\n ...st,\r\n rows: state.rows.filter((item) => item.id !== state.partId)\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 partNumber: '',\r\n partQuantity: '',\r\n partsDiscount: '',\r\n partUnitPrice: '',\r\n partDescription: '',\r\n partsTotal: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n }\r\n };\r\n const closeTheDialog = () => {\r\n setState((st) => ({ ...st, showPastJob: false }));\r\n };\r\n\r\n const handleClose = () => {\r\n props.onClose(false);\r\n };\r\n\r\n const handleOpen = () => {\r\n setState((st) => ({ ...st, showCancelConfirmModal: !st.showCancelConfirmModal }));\r\n };\r\n\r\n let setbtn = state.setBackup.length > 0 ? handleOpen : handleClose;\r\n return (\r\n \r\n {state.showPastJob && (\r\n \r\n \r\n )}\r\n\r\n \r\n {checkStatus && (\r\n \r\n \r\n Save\r\n \r\n \r\n )}\r\n \r\n {\r\n // props.onClose(false);\r\n // }\r\n }\r\n >\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n \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.workCategory && (\r\n \r\n {'\\u{2800}'} \r\n {\r\n setState((st) => ({ ...st, showPastJob: true }));\r\n }}\r\n icon={SearchIcon}\r\n />\r\n \r\n )}\r\n {state.errors.workCategory} \r\n \r\n \r\n {state.errors.costCategory} \r\n \r\n \r\n {checkStatus && (\r\n <>\r\n \r\n \r\n \r\n \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.partId ? 'Update' : 'Add'}\r\n \r\n \r\n \r\n \r\n )}\r\n {state.showCancelConfirmModal ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default AddJobItemModal;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllJobItems } from '../../../../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { getJobDetailsById, getJobRequiredDocuments } from '../../../../../../Core/Services/InternalUser/ControllerService/jobDetailsService';\r\nimport DataGrid from '../../../../../../Core/Controls/Grid';\r\nimport { AddButton, EditButton, formatters } from '../../../../../../Core/Controls';\r\nimport AddLabourModal from './addJobItem';\r\nimport '../../../../../commonStyle.scss';\r\nimport DialogComp from '../../../../../../Core/Dialog/DialogComp';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, Typography } from '@material-ui/core';\r\nimport { _, some } from 'lodash';\r\nimport { useHistory } from 'react-router-dom';\r\nimport StatusBasedButton from './statusBtn';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport JobItemHeaderDates from './../../JOBItems/jobItemHeaderDates';\r\nimport FileUploaderButton from '../../../../../../Core/Controls/GenericFileUploader';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport JobQueriesScreen from '../../jobQueriesScreen';\r\nimport UpdateIcon from '@material-ui/icons/Update';\r\nimport UpcomingEvents from '../../../Vehicles/ScheduleVehicle/upcomingEvents';\r\nimport { CustomIconButton } from '../../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { AppStorage } from '../../../../../../Core/Basic/storage-service';\r\n\r\nconst alertBoxColorCode = {\r\n AA: 'warning',\r\n EP: 'warning',\r\n JP: 'warning',\r\n AU: 'error',\r\n JQ: 'error',\r\n FR: 'error',\r\n JD: 'error',\r\n JR: 'error',\r\n CA: 'success',\r\n JC: 'success',\r\n JA: 'success'\r\n};\r\n\r\nfunction AgentJobItemsScreen(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n jobItemsList: [],\r\n loader: true,\r\n open: false,\r\n jobStatusID: '',\r\n refresherFlag: new Date(),\r\n allApprovedJob: [],\r\n errors: {},\r\n showOk: true,\r\n showSellerBtn: true,\r\n showCreate: false\r\n });\r\n const history = useHistory();\r\n\r\n const dataReload = () => {\r\n setState((state) => ({ ...state, refresherFlag: new Date() }));\r\n };\r\n\r\n const base_columns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 60\r\n },\r\n {\r\n key: 'jobItemDescription',\r\n name: 'Description',\r\n formatter: (params) => {\r\n return (\r\n \r\n \r\n Total\r\n \r\n
\r\n £{total1?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}
\r\n \r\n item.isDeleted !== true)}\r\n isRowHovered={true}\r\n loadingData={state.loader}\r\n />\r\n
\r\n \r\n btnHandler(data.row)} />\r\n
\r\n );\r\n };\r\n\r\n let checkStatus = ['AA', 'JP', 'JQ', 'EA', 'EU'].includes(jobDetails?.jobStatusID);\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n actionCol.headerRenderer = () => {\r\n if (checkStatus) {\r\n return (\r\n \r\n {/*
\r\n );\r\n}\r\n\r\nexport default AgentJobItemsScreen;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { BreadCrumbs, CustomChip, TabView } from '../../../../Core/Controls';\r\nimport JobBookingDetail from '../Vehicles/ScheduleVehicle/scheduleJobDetail';\r\nimport JobItems from './JOBItems/JobItemsScreen';\r\nimport JobNotes from '../../Controllers/Notes/index';\r\nimport JobDetail from './JOBItems/JobDetails';\r\nimport '../controllerStyle.scss';\r\nimport JobMessages from './JOBItems/JobMessages';\r\nimport InvoiceScreen from '../../Invoices';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport InternalJobDetail from './JobDetails/Internal';\r\nimport SalesInvoiceScreen from '../../Invoices/salesInvoice';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport AddVor from '../VOR/AddEditVor';\r\nimport { useHistory } from 'react-router-dom';\r\nimport InternalJobItem from './JobDetails/Internal/jobItemscreen';\r\nimport CustomerJobItemScreen from './JobDetails/Customer/jobItemscreen';\r\nimport AgentJobItemsScreen from './JobDetails/ServiceAgent/jobItemscreen';\r\nfunction JobTabScreen(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const history = useHistory();\r\n const id = props.match.params.id;\r\n const vehicleID = props.match.params?.vehicleID;\r\n const tabIndex = props.match?.params?.tabIndex;\r\n\r\n let { state } = props.location;\r\n const [index, setIndex] = useState(undefined);\r\n const [value, setValue] = useState({});\r\n const [modalData, setModalData] = useState({});\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Jobs', active: true }\r\n ];\r\n const { userRoles } = useLoginInfo();\r\n\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n\r\n const isCustomer = userRoles.includes('customer');\r\n const isinternal = userRoles.includes('internal');\r\n\r\n useEffect(() => {\r\n if (props.match?.params?.tabIndex) {\r\n var d = new Date();\r\n var n = d.getTime();\r\n setValue((st) => ({ ...st, timeDependency: n }));\r\n setIndex(+props.match?.params?.tabIndex || undefined);\r\n }\r\n }, [props.match?.params?.tabIndex]);\r\n\r\n const tabs = [\r\n ...(isinternal\r\n ? [\r\n ...(checkhaveAccess?.CanViewJobs\r\n ? [\r\n {\r\n label: 'Job Details',\r\n body: \r\n \r\n \r\n \r\n {jobDetails?.jobOrderNo ? (\r\n \r\n Final Order No \r\n \r\n {jobDetails?.jobOrderNo || ''}({jobDetails?.jobAgentOrderNo})\r\n \r\n \r\n ) : (\r\n \r\n Job Reference \r\n {jobDetails?.jobAgentOrderNo || ''} \r\n \r\n )}\r\n \r\n Order Date \r\n {jobDetails.jobOrderDate} \r\n \r\n \r\n Customer \r\n {jobDetails.customerName} \r\n \r\n \r\n Vehicle Detail \r\n \r\n \r\n {jobDetails.jobRegNumber}\r\n {' '}\r\n {getMakeModel}\r\n \r\n \r\n {/* \r\n Job Status \r\n {jobDetails.vehicleJobStatus} \r\n */}\r\n \r\n Total */}\r\n \r\n \r\n \r\n \r\n \r\n 0 ? 6 : 12} md={jobdocument.list.length > 0 ? 7 : 12} style={{ marginTop: 3 }}>\r\n \r\n \r\n \r\n Status\r\n {jobDetails.vehicleJobStatus}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {jobdocument.list.length > 0 && (\r\n \r\n \r\n {jobdocument.list.map((m) => {\r\n return (\r\n \r\n {false ? (\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n {state.open ? (\r\n \r\n Total \r\n \r\n £{jobDetails.jobOrderTotal?.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}\r\n \r\n
\r\n {/* \r\n {m.docName}{' '}\r\n \r\n
\r\n ) : (\r\n \r\n {m.docName}\r\n \r\n
\r\n )}\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.showUpComingEvents ? (\r\n closeModal(false)} maxWidth=\"md\" fullWidth>\r\n \r\n ) : null}\r\n
\r\n )}\r\n \r\n closeAddPopUp(false)}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n
\r\n );\r\n}\r\n\r\nexport default JobTabScreen;\r\n","import { createContext, useEffect, useState, useCallback } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { addDriver, updateDriver, getDriverById, getDriverScreenDropdowns } from '../../../../Core/Services/InternalUser/ControllerService/driverService';\r\nimport { formatters } from '../../../../Core/Controls';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\n\r\nimport { isNull } from 'lodash';\r\nimport { validatePostCode } from '../../../../Core/Basic/StaticService';\r\nexport const DriverScreenContext = createContext();\r\n\r\nexport const DriverProvider = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const [state, setState] = useState({\r\n driverDefectManager: '',\r\n driverLicenseCheckFrequency: '',\r\n driverLicenceTypeID: '',\r\n driverFuelCardProvider: '',\r\n driverFuelCardNumber: '',\r\n driverFuelCardPIN: '',\r\n driverLicenseNumber: '',\r\n errors: {},\r\n driverID: null,\r\n customerID: null,\r\n depotsID: '',\r\n driverTypeID: '',\r\n costCentreID: null,\r\n firstName: '',\r\n licenseTypeID: null,\r\n payrollNumber: null,\r\n middleName: '',\r\n firstName: '',\r\n lastName: '',\r\n jobTitle: '',\r\n dateOfBirth: '',\r\n dateOfBirth1: '',\r\n address1: '',\r\n address2: '',\r\n town: '',\r\n county: '',\r\n postCode: '',\r\n telePhone: '',\r\n driverMobile: '',\r\n driverReceiveEmailNotification: false,\r\n driverLoginEnabled: false\r\n });\r\n\r\n const [optionsState, setOptionState] = useState({\r\n customerList: [],\r\n depotWithCustList: [],\r\n costCentreList: [],\r\n depotsList: [],\r\n licenseTypeList: [],\r\n driverTypeList: [],\r\n genderList: [],\r\n licenceList: [],\r\n driverLicenceTypesList: [],\r\n fuelCardProvidersList: [],\r\n driverFuelCardNumberList: [],\r\n defectManagerList: []\r\n });\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n driverTypeIDValue: null,\r\n costCentreIDValue: null,\r\n licenseTypeIDValue: null,\r\n genderValue: null,\r\n driverDefectManagerValue: null,\r\n driverLicenseCheckFrequencyValue: null,\r\n driverFuelCardProviderValue: null\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getDriverScreenDropdowns();\r\n setOptionState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n costCentreList: res.data.costCentres,\r\n depotsList: res.data.depots,\r\n licenseTypeList: res.data.driverLicenceTypes,\r\n driverTypeList: res.data.driverTypes,\r\n genderList: res.data.genders,\r\n licenceList: res.data.licenceCheckFrequency,\r\n\r\n driverLicenceTypesList: res.data.driverLicenceTypes,\r\n fuelCardProvidersList: res.data.fuelCardProviders,\r\n driverFuelCardNumberList: res.data.driverFuelCardNumber,\r\n defectManagerList: res.data.defectManager\r\n }));\r\n\r\n if (props.driverID) {\r\n let res = await getDriverById(props.driverID);\r\n const data = res.data;\r\n setState((st) => ({\r\n ...st,\r\n customer: data.customer,\r\n address1: data.driverAddress1,\r\n address2: data.driverAddress2,\r\n address3: data.driverAddress3,\r\n driverCostCentreDescription: data.driverCostCentreDescription,\r\n customerID: data.driverCustomerID,\r\n depotsID: data.driverDepotID,\r\n driverDepotName: data.driverDepotName,\r\n jobTitle: data.driverJobTitle,\r\n gender: data.driverGenderID,\r\n\r\n //new\r\n driverLicenseCheckFrequency: data.driverLicenseCheckFrequency,\r\n driverFuelCardProvider: data.driverFuelCarProvider,\r\n driverDefectManager: data.driverDefectManager,\r\n driverFuelCardNumber: data.driverFuelCardNumber,\r\n driverFuelCardPIN: data.driverFuelCardPIN,\r\n driverLicenseNumber: data.driverLicenseNumber,\r\n //end\r\n\r\n costCentreID: data.driverCostCentreID,\r\n driverLicenceDescription: data.driverLicenceDescription,\r\n licenseTypeID: data.driverLicenceTypeID,\r\n lastName: data.driverLastName,\r\n middleName: data.driverMiddleName,\r\n dateOfBirth: formatters.DateFormatter(data.driverDateOfBirth),\r\n dateOfBirth1: formatters.YearFormatter(data.driverDateOfBirth),\r\n driverID: data.driverID,\r\n firstName: data.driverFirstName,\r\n driverPayrollNumber: data.driverPayrollNumber,\r\n postCode: data.driverPostCode,\r\n town: data.driverTown,\r\n county: data.driverCounty,\r\n driverLoginEnabled: data.driverLoginEnabled,\r\n driverMobile: data.driverMobile,\r\n driverReceiveEmailNotification: data.driverReceiveEmailNotification,\r\n telePhone: data.driverTelephone,\r\n driverTypeID: data.driverTypeID,\r\n licenceCheckFrequencyDescription: data.licenceCheckFrequencyDescription,\r\n fuelCardProviderName: data.fuelCardProviderName,\r\n fileCount: data.fileCount\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID) {\r\n newSt.customerIDValue = optionsState.customerList.find(({ id }) => id === state.customerID);\r\n }\r\n if (state.depotsID) {\r\n newSt.depotsIDValue = optionsState.depotsList.find(({ id }) => id === state.depotsID);\r\n }\r\n if (state.driverTypeID) {\r\n newSt.driverTypeIDValue = optionsState.driverTypeList.find(({ id }) => id === state.driverTypeID);\r\n }\r\n if (state.costCentreID) {\r\n newSt.costCentreIDValue = optionsState.costCentreList.find(({ id }) => id === state.costCentreID);\r\n }\r\n if (state.licenseTypeID) {\r\n newSt.licenseTypeIDValue = optionsState.licenseTypeList.find(({ id }) => id === state.licenseTypeID);\r\n }\r\n if (state.gender) {\r\n newSt.genderValue = optionsState.genderList.find(({ id }) => id === state.gender);\r\n }\r\n if (state.driverDefectManager) {\r\n newSt.driverDefectManagerValue = optionsState.defectManagerList.find(({ id }) => id === state.driverDefectManager);\r\n }\r\n if (state.driverLicenseCheckFrequency) {\r\n newSt.driverLicenseCheckFrequencyValue = optionsState.licenceList.find(({ id }) => id === state.driverLicenseCheckFrequency);\r\n }\r\n if (state.driverFuelCardProvider) {\r\n newSt.driverFuelCardProviderValue = optionsState.fuelCardProvidersList.find(({ id }) => id === state.driverFuelCardProvider);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [\r\n state.customerID,\r\n state.depotsID,\r\n state.driverTypeID,\r\n state.costCentreID,\r\n state.licenseTypeID,\r\n state.gender,\r\n state.driverDefectManager,\r\n state.driverLicenseCheckFrequency,\r\n state.driverFuelCardProvider\r\n ]);\r\n\r\n useEffect(async () => {\r\n let Depots = [];\r\n if (isCustomer) {\r\n setOptionState((st) => ({ ...st, depotWithCustList: optionsState.depotsList }));\r\n } else {\r\n if (tempOptions.customerIDValue) {\r\n optionsState.depotsList.filter((obj) => {\r\n if (tempOptions.customerIDValue.id === obj.depotCustomerID) {\r\n Depots.push(obj);\r\n }\r\n });\r\n setOptionState((st) => ({ ...st, depotWithCustList: Depots }));\r\n // setTempOptions((st) => ({ ...st, depotsIDValue: null }));\r\n }\r\n }\r\n }, [tempOptions.customerIDValue, isCustomer, optionsState.depotsList]);\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n });\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const handleCheckbox = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n });\r\n\r\n const setVal = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n address1: s.addressLine1,\r\n address2: s.addressLine2,\r\n town: s.town,\r\n county: s.county,\r\n postCode: s.postCode\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { customerID, costCentreID, licenseTypeID, firstName, depotsID, driverTypeID, dateOfBirth, postCode } = state;\r\n\r\n const {\r\n customerIDValue,\r\n depotsIDValue,\r\n driverTypeIDValue,\r\n costCentreIDValue,\r\n licenseTypeIDValue,\r\n genderValue,\r\n driverDefectManagerValue,\r\n driverLicenseCheckFrequencyValue,\r\n driverFuelCardProviderValue\r\n } = tempOptions;\r\n\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!validatePostCode(postCode) && /[^\\s]/.test(postCode) && !isNull(postCode)) {\r\n errors.postCode = `Please fill valid post code, \"Ex: BB11AA\"`;\r\n formIsValid = false;\r\n }\r\n if (!costCentreIDValue) {\r\n errors.costCentreID = 'Cost centre is required.';\r\n formIsValid = false;\r\n }\r\n if (!depotsIDValue) {\r\n errors.depotsID = 'Depots is required.';\r\n formIsValid = false;\r\n }\r\n if (!dateOfBirth) {\r\n errors.dateOfBirth = 'Driver Date of birth is required.';\r\n formIsValid = false;\r\n }\r\n if (!driverTypeIDValue) {\r\n errors.driverTypeID = 'Driver type is required.';\r\n formIsValid = false;\r\n }\r\n if (!customerIDValue && !isCustomer) {\r\n errors.customerID = 'Customer is required.';\r\n formIsValid = false;\r\n }\r\n if (!licenseTypeIDValue) {\r\n errors.licenseTypeID = 'License type is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(firstName)) {\r\n errors.firstName = 'First name is required';\r\n formIsValid = false;\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 formData = {\r\n driverID: state.driverID,\r\n driverCustomerID: isCustomer ? null : tempOptions.customerIDValue?.id,\r\n driverDepotID: tempOptions.depotsIDValue?.id,\r\n driverTypeID: tempOptions.driverTypeIDValue?.id,\r\n driverGenderID: tempOptions.genderValue?.id,\r\n driverJobTitle: state.jobTitle,\r\n driverCostCentreID: tempOptions.costCentreIDValue?.id,\r\n driverFirstName: state.firstName,\r\n driverLicenceTypeID: tempOptions.licenseTypeIDValue?.id,\r\n driverMobile: state.driverMobile,\r\n driverReceiveEmailNotification: state.driverReceiveEmailNotification,\r\n driverLoginEnabled: state.driverLoginEnabled,\r\n driverTelephone: state.telePhone,\r\n driverLastName: state.lastName,\r\n driverMiddleName: state.middleName,\r\n driverDateOfBirth: state.dateOfBirth,\r\n driverAddress1: state.address1,\r\n driverAddress2: state.address2,\r\n driverAddress3: state.address3,\r\n driverTown: state.town,\r\n driverCounty: state.county,\r\n driverPostCode: state.postCode,\r\n driverPayrollNumber: state.driverPayrollNumber,\r\n driverLicenseCheckFrequency: tempOptions.driverLicenseCheckFrequencyValue?.id,\r\n driverFuelCarProvider: tempOptions.driverFuelCardProviderValue?.id,\r\n driverDefectManager: tempOptions.driverDefectManagerValue?.id,\r\n driverFuelCardNumber: state.driverFuelCardNumber,\r\n driverFuelCardPIN: state.driverFuelCardPIN,\r\n driverLicenseNumber: state.driverLicenseNumber\r\n };\r\n setBtnLoader(true);\r\n let res;\r\n if (props.driverID) {\r\n res = await updateDriver(props.driverID, formData);\r\n } else {\r\n res = await addDriver(formData);\r\n }\r\n if (res.success) {\r\n showToastSuccess('Driver added successfully');\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {isinternal && state?.vorVehicleID && (\r\n
\r\n {/* \r\n \r\n
*/}\r\n \r\n {!state.driverID ? \r\n {!isCustomer && (\r\n \r\n \r\n Customer\r\n \r\n {state.errors.customerID} \r\n \r\n )}\r\n \r\n \r\n Depot\r\n \r\n {state.errors.depotsID} \r\n \r\n \r\n \r\n Driver Type\r\n \r\n {state.errors.driverTypeID} \r\n \r\n \r\n \r\n Cost Centre\r\n \r\n {state.errors.costCentreID} \r\n \r\n \r\n \r\n License Type\r\n \r\n {state.errors.licenseTypeID} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Gender \r\n \r\n \r\n Defect Manager \r\n \r\n \r\n Licence Check Frequency \r\n \r\n \r\n Fuel Card Provider \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.postCode} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Date Of Birth\r\n \r\n {state.errors.dateOfBirth} \r\n \r\n \r\n \r\n {isCustomer && \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 Cancel\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.driverDepotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const dataFormatter = (val, row) => {\r\n return (\r\n \r\n {state.show ? (\r\n ({\r\n records: res.data.drivers,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default DriverScreen;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { DriverProvider as StateProvider, DriverScreenContext } from './DriverProvider';\r\nimport AddEditDriver from './addEditDriver';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport '../controllerStyle.scss';\r\nimport StickyNotes from './../Notes/stickyNotes';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport { CustomChip } from '../../../../Core/Controls';\r\nimport FileUploaderButton from '../../../../Core/Controls/GenericFileUploader';\r\nimport { formatters } from '../../../../Core/Controls';\r\n\r\nexport const DriverDashBoard = (props) => {\r\n const { state } = useContext(DriverScreenContext);\r\n\r\n const [data, setData] = useState({\r\n show: false,\r\n DriverID: null\r\n });\r\n\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n\r\n useEffect(() => {\r\n if (props.driverID) {\r\n setData((st) => ({\r\n ...st,\r\n DriverID: props.driverID\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleAdd = (record) => {\r\n setData((st) => ({\r\n ...st,\r\n show: true,\r\n DriverID: record\r\n }));\r\n };\r\n\r\n const closeDriverModal = () => {\r\n setData((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n };\r\n\r\n return (\r\n \r\n {data.show ? (\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 Driver Details\r\n \r\n \r\n \r\n \r\n \r\n \r\n {!isCustomer && (\r\n \r\n {state.customer || 'N/A'} \r\n \r\n )}\r\n \r\n {state.driverDepotName || 'N/A'} \r\n \r\n \r\n {state.driverCostCentreDescription || 'N/A'} \r\n \r\n \r\n \r\n \r\n {state.driverLicenceDescription || 'N/A'} \r\n \r\n \r\n {state.firstName || 'N/A'} \r\n \r\n \r\n {state.middleName || 'N/A'} \r\n \r\n \r\n \r\n \r\n {state.lastName || 'N/A'} \r\n \r\n \r\n {state.address1 || 'N/A'} \r\n \r\n \r\n {state.address2 || 'N/A'} \r\n \r\n \r\n \r\n \r\n {state.town || 'N/A'} \r\n {' '}\r\n \r\n {state.county || 'N/A'} \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.telephone)} \r\n \r\n \r\n \r\n \r\n {formatters.phoneNumberFormatter(state.driverMobile)} \r\n \r\n \r\n {state.dateOfBirth1 || 'N/A'} \r\n \r\n \r\n {state.driverPayrollNumber || 'N/A'} \r\n \r\n \r\n \r\n \r\n {state.licenceCheckFrequencyDescription || 'N/A'} \r\n \r\n \r\n {state.fuelCardProviderName || 'N/A'} \r\n \r\n \r\n {state.driverFuelCardNumber || 'N/A'} \r\n \r\n \r\n \r\n \r\n {state.driverFuelCardPIN || 'N/A'} \r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n handleAdd(data.DriverID)}\r\n toolTipTitle=\"Edit Driver\"\r\n style={{ fontWeight: 'bold' }}\r\n >\r\n )}\r\n
\r\n \r\n Customer \r\n
\r\n \r\n Depot Name \r\n
\r\n \r\n Cost Centre \r\n
\r\n \r\n Licence Type \r\n
\r\n \r\n First name \r\n
\r\n \r\n Middle Name \r\n
\r\n \r\n Last Name \r\n
\r\n \r\n Address1 \r\n
\r\n \r\n Address2 \r\n
\r\n \r\n Town \r\n
\r\n \r\n County \r\n
\r\n \r\n Telephone Number \r\n
\r\n \r\n Mobile Number \r\n
\r\n \r\n Date of Birth \r\n
\r\n \r\n Payroll Number \r\n
\r\n \r\n Licence Check Frequency \r\n
\r\n \r\n Fuel Card Provider \r\n
\r\n \r\n Fuel Card Number \r\n
\r\n \r\n Fuel Card PIN \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n Date of check\r\n \r\n {errors.licenceCheckDateChecked} \r\n \r\n\r\n \r\n \r\n Licence number\r\n \r\n {errors.licenceCheckLicenceNumber} \r\n \r\n \r\n Issue number \r\n \r\n \r\n Short term licence \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n Date Expiry check \r\n */}\r\n \r\n Date of birth \r\n \r\n {/* \r\n \r\n Driver name\r\n \r\n */}\r\n \r\n Address \r\n \r\n\r\n \r\n \r\n Licence expiry date\r\n \r\n {errors.licenceCheckLicenceExpiryDate} \r\n \r\n \r\n \r\n Photocard expiry date\r\n \r\n {errors.licenceCheckPhotoExpiryDate} \r\n \r\n \r\n \r\n Current effective points{' '}\r\n \r\n {errors.licenceCheckPoints} \r\n \r\n \r\n Risk level \r\n \r\n {/* \r\n */}\r\n \r\n \r\n Licence category\r\n \r\n {/* {errors.licenceCheckCategoriesAllowed} \r\n \r\n \r\n \r\n Please indicate which categories this driver holds on their driving licence.The categories listed here are the ones currently used by\r\n the DVLA The resources below may assist you\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {btnCondition} \r\n \r\n \r\n props.onClose(false)}>Cancel \r\n \r\n \r\n {/* Add Conviction */}\r\n {state.licenceCheckID && (\r\n <>\r\n handleConvictionModal(null)}\r\n offset={600}\r\n />\r\n\r\n {state.show ? (\r\n \r\n \r\n ) : null}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { AddButton, DataGrid, EditButton, formatters, DeleteButton } from '../../../../Core/Controls';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport '../../../commonStyle.scss';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport { AddEditLicence } from './AddLicenceChecks';\r\nimport { getLicenceCheckList } from '../../../../Core/Services/InternalUser/licenceCheckService';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 80\r\n },\r\n { key: 'licenceCheckDateChecked', name: 'Date of Check', formatter: formatters.Date_DDMMYY },\r\n { key: 'licenceCheckLicenceExpiryDate', name: 'Date expires', formatter: formatters.Date_DDMMYY },\r\n { key: 'licenceCheckPoints', name: 'Points (at time) ' },\r\n { key: 'licenceCheckPhotoExpiryDate', name: 'Photocard Expiry', formatter: formatters.Date_DDMMYY },\r\n { key: 'licenceCheckLicenceExpiryDate', name: 'License Expiry', formatter: formatters.Date_DDMMYY },\r\n { key: 'licenceCheckRiskLevel', name: 'Risk Level' }\r\n];\r\n\r\nexport const LicenceChecks = (props) => {\r\n const [state, setState] = useState({ show: false, list: [], licenceCheckID: null, isReload: '' });\r\n\r\n const gridBtnTitle = 'Add Licence Checks ';\r\n\r\n const pullListData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const rederEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n licenceCheckID: val,\r\n show: !st.show\r\n }));\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n - \r\n
- \r\n \r\n Description of driving licence categories\r\n \r\n \r\n
- \r\n \r\n Compare old and new driving licence categories\r\n \r\n \r\n
- \r\n \r\n Vehides you can drive tool\r\n \r\n \r\n
\r\n
\r\n
\r\n );\r\n}\r\n","import {\r\n postWithAuth,\r\n getWithAuth,\r\n putWithAuth,\r\n} from \"../../Basic/HttpService\";\r\n\r\nexport const getAllScheduleEvents = async () => {\r\n let res = await getWithAuth(`ScheduleEvents`);\r\n return res;\r\n};\r\nexport const getScheduleEventsById = async (ID) => {\r\n let res = await getWithAuth(`ScheduleEvents/${ID}`);\r\n return res;\r\n};\r\nexport const getAllDropdowns = async () => {\r\n let res = await getWithAuth(`ScheduleEvents/screenDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const postScheduleEvents = async (data) => {\r\n let res = await postWithAuth(`ScheduleEvents`, data);\r\n return res;\r\n};\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { Multiselect, SecondaryButton, SelectBox, MandatoryField, SimpleField, YesButton, NoButton } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\nimport { getAllDropdowns, postScheduleEvents, getScheduleEventsById } from '../../../../Core/Services/InternalUser/scheduleEventsService';\r\n\r\nconst firstEventList = [\r\n { id: 1, name: 'Date From First Registration' },\r\n { id: 2, name: 'Date From Initial Certificate' }\r\n];\r\n\r\nconst nextEventList = [\r\n { id: 1, name: 'Fixed Interval' },\r\n { id: 2, name: 'Date From Last Event' }\r\n];\r\n\r\nconst ScheduleEventDialog = (props) => {\r\n const [selectedData, setSelectedData] = useState({\r\n multi: []\r\n });\r\n const [state, setState] = useState({\r\n scheduleEventName: '',\r\n scheduleEventInterval: '',\r\n scheduleEventTimeToFirst: '',\r\n scheduleEventMilesDue: '',\r\n scheduleEventFirstEvent: '',\r\n scheduleEventNextEvent: '',\r\n scheduleEventDayRange: '',\r\n vmrsCategory: '',\r\n vmrsSubCategory: '',\r\n nominalCode: null,\r\n scheduleEventInternalType: '',\r\n eventDocsIds: null,\r\n dropList: [],\r\n scheduleEventIntervalPeriodCode: '',\r\n scheduleEventDisplayInspectionLink: false,\r\n scheduleEventDisplayResult: false,\r\n allowedDayRangeList: []\r\n });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const pullDropList = async () => {\r\n let res = await getAllDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n dropList: res.data\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n if (!props.data.isAdd) {\r\n let res = await getScheduleEventsById(props.data.selectedRowData.scheduleEventID);\r\n let temp = res.data;\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventID: temp.scheduleEventID,\r\n scheduleEventName: temp.scheduleEventName,\r\n scheduleEventInterval: temp.scheduleEventInterval,\r\n scheduleEventTimeToFirst: temp.scheduleEventTimeToFirst,\r\n scheduleEventMilesDue: temp.scheduleEventMilesDue,\r\n scheduleEventFirstEvent: temp.scheduleEventFirstEvent,\r\n scheduleEventNextEvent: temp.scheduleEventNextEvent,\r\n scheduleEventDayRange: temp.scheduleEventDayRange,\r\n vmrsCategory: temp.vmrsCategory,\r\n vmrsSubCategory: temp.vmrsSubCategory,\r\n nominalCode: temp.nominalCode,\r\n scheduleEventInternalType: temp.scheduleEventInternalType,\r\n eventDocsIds: temp.eventDocsIds || [],\r\n scheduleEventIntervalPeriodCode: temp.scheduleEventIntervalPeriodCode,\r\n scheduleEventDisplayInspectionLink: temp.scheduleEventDisplayInspectionLink,\r\n scheduleEventDisplayResult: temp.scheduleEventDisplayResult,\r\n scheduleEventReminderInterval: temp.scheduleEventReminderInterval,\r\n scheduleEventReminderMilesDue: temp.scheduleEventReminderMilesDue,\r\n scheduleEventReminderPeriodCode: temp.scheduleEventReminderPeriodCode,\r\n scheduleEventCreateNewEvent: temp.scheduleEventCreateNewEvent\r\n }));\r\n }\r\n pullDropList();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (state.eventDocsIds) {\r\n const a = state.eventDocsIds.map((i) => Number(i));\r\n const selectedModule = state.dropList.eventDocs?.filter((w) => a.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({ ...st, multi: selectedModule }));\r\n }\r\n }, [state.dropList.eventDocs, state.eventDocsIds]);\r\n\r\n useEffect(() => {\r\n if (state.vmrsCategory) {\r\n const subModule = state.dropList.vmrsSubCategory?.filter((x) => x.vmrsCategory == state.vmrsCategory);\r\n setState((st) => ({\r\n ...st,\r\n vmrsSubCategoryList: subModule\r\n }));\r\n }\r\n }, [state.dropList.vmrsSubCategory, state.vmrsCategory]);\r\n\r\n useEffect(() => {\r\n const subModule = state.dropList.allowedDayRange?.map((x) => {\r\n return { id: x.allowedDayRangeID, name: x.allowedDayRangeDescription };\r\n });\r\n setState((st) => ({\r\n ...st,\r\n allowedDayRangeList: subModule || []\r\n }));\r\n }, [state.dropList.allowedDayRange]);\r\n\r\n const multiChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, multi: value }));\r\n setState((st) => {\r\n const nst = { ...st, eventDocsIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n const validate = () => {\r\n let noErrors = true;\r\n let err = {};\r\n if (!/[^\\s]/.test(state.scheduleEventName)) {\r\n err.scheduleEventName = true;\r\n noErrors = false;\r\n }\r\n\r\n if (+state.scheduleEventTimeToFirst < 0) {\r\n err.scheduleEventTimeToFirstN = true;\r\n noErrors = false;\r\n } else if (!/[^\\s]/.test(state.scheduleEventTimeToFirst)) {\r\n err.scheduleEventTimeToFirst = true;\r\n noErrors = false;\r\n }\r\n\r\n if (!/[^\\s]/.test(state.scheduleEventDayRange)) {\r\n err.scheduleEventDayRange = true;\r\n noErrors = false;\r\n }\r\n\r\n if (!(/[^\\s]/.test(state.scheduleEventInterval) || /[^\\s]/.test(state.scheduleEventMilesDue))) {\r\n err.bothNeeded = true;\r\n noErrors = false;\r\n } else {\r\n if (+state.scheduleEventInterval < 0) {\r\n err.scheduleEventIntervalN = true;\r\n noErrors = false;\r\n }\r\n if (+state.scheduleEventMilesDue < 0) {\r\n err.scheduleEventMilesDueN = true;\r\n noErrors = false;\r\n }\r\n }\r\n if (!/[^\\s]/.test(state.scheduleEventFirstEvent)) {\r\n err.scheduleEventFirstEvent = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleEventNextEvent)) {\r\n err.scheduleEventNextEvent = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.vmrsCategory)) {\r\n err.vmrsCategory = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.vmrsSubCategory)) {\r\n err.vmrsSubCategory = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleEventInternalType)) {\r\n err.scheduleEventInternalType = true;\r\n noErrors = false;\r\n }\r\n if (!/[^\\s]/.test(state.scheduleEventIntervalPeriodCode)) {\r\n err.scheduleEventIntervalPeriodCode = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n\r\n const handleData = async () => {\r\n validate();\r\n if (validate()) {\r\n setBtnLoader(true);\r\n let response = await postScheduleEvents({\r\n scheduleEventID: state.scheduleEventID || null,\r\n scheduleEventTimeToFirst: +state.scheduleEventTimeToFirst,\r\n scheduleEventInterval: +state.scheduleEventInterval,\r\n scheduleEventMilesDue: +state.scheduleEventMilesDue,\r\n scheduleEventInternalType: state.scheduleEventInternalType,\r\n scheduleEventFirstEvent: state.scheduleEventFirstEvent || null,\r\n scheduleEventName: state.scheduleEventName,\r\n scheduleEventNextEvent: state.scheduleEventNextEvent || null,\r\n vmrsCategory: state.vmrsCategory || null,\r\n vmrsSubCategory: state.vmrsSubCategory || null,\r\n // nominalCode: state.nominalCode || '',\r\n scheduleEventDayRange: +state.scheduleEventDayRange,\r\n eventDocsIds: state.eventDocsIds?.length > 0 ? state.eventDocsIds : null,\r\n scheduleEventIntervalPeriodCode: state.scheduleEventIntervalPeriodCode,\r\n scheduleEventDisplayInspectionLink: state.scheduleEventDisplayInspectionLink,\r\n scheduleEventDisplayResult: state.scheduleEventDisplayResult,\r\n\r\n scheduleEventReminderInterval: state.scheduleEventReminderInterval,\r\n scheduleEventReminderMilesDue: state.scheduleEventReminderMilesDue,\r\n scheduleEventReminderPeriodCode: state.scheduleEventReminderPeriodCode,\r\n scheduleEventCreateNewEvent: state.scheduleEventCreateNewEvent\r\n });\r\n if (response) {\r\n response.success\r\n ? showToastSuccess(props.data.isAdd ? 'Schedule Events added successfully' : 'Schedule Events updated successfully')\r\n : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n setBtnLoader(false);\r\n props.onClose();\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n\r\n const yesNoClicked = (val) => (ev) => {\r\n let temp = ev.target;\r\n if (val === 1) {\r\n if (temp.innerHTML.toUpperCase() == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventDisplayInspectionLink: true\r\n }));\r\n } else if (temp.innerHTML.toUpperCase() == 'NO') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventDisplayInspectionLink: false\r\n }));\r\n }\r\n }\r\n if (val === 2) {\r\n if (temp.innerHTML.toUpperCase() == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventDisplayResult: true\r\n }));\r\n } else if (temp.innerHTML.toUpperCase() == 'NO') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventDisplayResult: false\r\n }));\r\n }\r\n }\r\n if (val === 3) {\r\n if (temp.innerHTML.toUpperCase() == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventCreateNewEvent: true\r\n }));\r\n } else if (temp.innerHTML.toUpperCase() == 'NO') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleEventCreateNewEvent: false\r\n }));\r\n }\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Schedule Events\"\r\n onBtnClick={addBtnClicked}\r\n />\r\n {state.open ? (\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.isAdd ? 'Add Schedule Event' : 'Edit Schedule Event'}\r\n maxWidth=\"lg\"\r\n overflow=\"auto\"\r\n >\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ScheduleEvent;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, PrimaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getVehicleCategoriesById, postVehicleCategoriesData } from '../../../../Core/Services/InternalUser/vehicleCategoryService';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport ImageUploading from 'react-images-uploading';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport '../../.././commonStyle.scss';\r\nimport { Button, Tooltip } from '@material-ui/core';\r\nimport BackupIcon from '@material-ui/icons/Backup';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\n\r\nconst styles = {\r\n uplodbtn: {\r\n color: 'blue',\r\n cursor: 'pointer'\r\n },\r\n removebtn: {\r\n color: 'red',\r\n cursor: 'pointer'\r\n }\r\n};\r\n\r\nfunction VehicleCategoryModal(props) {\r\n const [state, setState] = useState({\r\n vehicleCategoryID: null,\r\n vehicleCategoryDescription: '',\r\n vehicleCategoryActive: true,\r\n errors: {},\r\n showBox: false,\r\n FilterimageList: []\r\n });\r\n const handleImagesBox = () => {\r\n setState((st) => ({\r\n ...st,\r\n showBox: !st.showBox\r\n }));\r\n };\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [images, setImages] = useState([]);\r\n const maxNumber = 69;\r\n\r\n const onChange = (imageList, addUpdateIndex) => {\r\n // data for submit\r\n setImages(imageList);\r\n let FilterimagesList = imageList.map((m) => (m.data_url ? m.data_url : m));\r\n setState((m) => ({\r\n ...m,\r\n FilterimageList: FilterimagesList\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n if (props.vehicleCategoryID) {\r\n let res = await getVehicleCategoriesById(props.vehicleCategoryID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n vehicleCategoryID: res.data.vehicleCategoryID,\r\n vehicleCategoryDescription: res.data.vehicleCategoryDescription,\r\n vehicleCategoryActive: res.data.vehicleCategoryActive\r\n }));\r\n\r\n setImages(res.data.vehicleCategoryImages);\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { vehicleCategoryDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(vehicleCategoryDescription)) {\r\n errors.vehicleCategoryDescription = 'Vehicle Category Description is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const ServiceAgentData = {\r\n vehicleCategoryID: state.vehicleCategoryID,\r\n vehicleCategoryDescription: state.vehicleCategoryDescription,\r\n vehicleCategoryActive: state.vehicleCategoryActive,\r\n vehicleCategoryImages: state.FilterimageList\r\n };\r\n\r\n let res = await postVehicleCategoriesData(ServiceAgentData);\r\n if (res.success) {\r\n showToastSuccess('Vehicle Category Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove }) => (\r\n // write your building UI\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {imageList.map((image, index) => (\r\n \r\n 
\r\n \r\n ))}\r\n \r\n
\r\n )}\r\n \r\n {/* \r\n onImageUpdate(index)}\r\n style={styles.uplodbtn}\r\n />\r\n */}\r\n onImageRemove(index)}>\r\n Remove\r\n \r\n\r\n {/* \r\n onImageRemove(index)}\r\n style={styles.removebtn}\r\n />\r\n */}\r\n
\r\n \r\n vehicleCategoryHandler(row)} toolTipTitle=\"Edit vehicle Category\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.vehicleCategoryID ? 'Update Vehicle Category' : 'Add Vehicle Category';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullVehicleCategory();\r\n };\r\n\r\n return (\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={'VehicleCategories'}\r\n btnTitle=\"Add Vehicle Category\"\r\n onBtnClick={() => vehicleCategoryHandler(null)}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default VehicleCategory;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllVehicleJob, getAllJob } from '../../../../../Core/Services/InternalUser/JOB/jobService';\r\nimport DataGrid from '../../../../../Core/Controls/Grid';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../../Core/Controls';\r\n// import JobScreenModal from './JobScreenModal';\r\nimport { Link } from 'react-router-dom';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport GijgoGrid from '../../../../../Core/Controls/GijgoGrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'jobAgentOrderNo', name: 'Job Ref' },\r\n { key: 'serviceAgentName', name: 'Service Agent' },\r\n { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depots' },\r\n { key: 'jobPartsTotal', name: 'Parts', formatter: formatters.NumberWithPound, align: 'right' },\r\n { key: 'jobLabourTotal', name: 'Labour', formatter: formatters.NumberWithPound, align: 'right' },\r\n { key: 'jobOrderTotal', name: 'Total', formatter: formatters.NumberWithPound, align: 'right' }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Unassigned Jobs', active: true }\r\n];\r\n\r\nfunction UnassignedJob(props) {\r\n const history = useHistory();\r\n const [state, setState] = useState({\r\n jobList: [],\r\n loader: true,\r\n open: false\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n useEffect(async () => {\r\n pullJobList();\r\n }, []);\r\n const pullJobList = async () => {\r\n // let res = await getAllJob();\r\n // let data = res.data.vehicleJobDetails.filter((unassign) => unassign.jobStatusID == 'AU');\r\n setState((st) => ({\r\n ...st,\r\n // jobList: data,\r\n loader: false\r\n }));\r\n };\r\n const jobHandler = (params) => {\r\n setState((state) => ({ ...state, open: true }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${props.VehicleID ? props.VehicleID : val?.vehicleID}`,\r\n search: '',\r\n state: 'jobs'\r\n });\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullJobList();\r\n };\r\n const gridBtnTitle = !props.VehicleID ? '' : 'Add Job';\r\n const getUrl = 'VehicleJob?jobStatusID=AU';\r\n return (\r\n \r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n />\r\n \r\n
\r\n );\r\n}\r\nexport default UnassignedJob;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllFuelTypes = async () => {\r\n let res = await getWithAuth(`FuelTypes`);\r\n return res;\r\n};\r\n\r\nexport const getFuelTypesById = async (id) => {\r\n let res = await getWithAuth(`FuelTypes/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postFuelTypesData = async (data) => {\r\n let res = await postWithAuth(`FuelTypes`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { getFuelTypesById, postFuelTypesData } from '../../../../Core/Services/InternalUser/fuelTypeService';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\nimport { YesButton, NoButton } from '../../../../Core/Controls';\r\n\r\nfunction FuelTypesModal(props) {\r\n const [state, setState] = useState({\r\n fuelTypeID: null,\r\n fuelTypeDescription: '',\r\n fuelTypeDisplayBatteryLevel: false,\r\n fuelTypeActive: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n useEffect(async () => {\r\n if (props.fuelTypeID) {\r\n let res = await getFuelTypesById(props.fuelTypeID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n fuelTypeID: res.data.fuelTypeID,\r\n fuelTypeDescription: res.data.fuelTypeDescription,\r\n fuelTypeDisplayBatteryLevel: res.data.fuelTypeDisplayBatteryLevel,\r\n fuelTypeActive: res.data.fuelTypeActive\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\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 const validations = () => {\r\n const { fuelTypeDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(fuelTypeDescription)) {\r\n errors.fuelTypeDescription = 'Fuel Type Description is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const AllData = {\r\n fuelTypeID: state.fuelTypeID,\r\n fuelTypeDescription: state.fuelTypeDescription,\r\n fuelTypeDisplayBatteryLevel: state.fuelTypeDisplayBatteryLevel,\r\n fuelTypeActive: state.fuelTypeActive\r\n };\r\n let res = await postFuelTypesData(AllData);\r\n if (res.success) {\r\n showToastSuccess('Fuel Types Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n submitHandler(row)} toolTipTitle=\"Edit Fuel Types\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.fuelTypeID ? 'Update Fuel Types' : 'Add Fuel Types';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullAllData();\r\n };\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Fuel Type\"\r\n onBtnClick={() => submitHandler(null)}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default FuelTypes;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid/index';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport '../../../commonStyle.scss';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport EditNotes from '../Notes/addEditNotes';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { getAllJobReminders } from '../../../../Core/Services/InternalUser/ControllerService/jobReminderService';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport ServiceAgentDetails from '../DetailsModal/serviceAgent.jsx';\r\nimport CustomerDetails from '../DetailsModal/customerDetails.jsx';\r\nimport DepotDetails from '../DetailsModal/depotDetails.jsx';\r\nimport ReactDOM from 'react-dom';\r\nimport AddEditJobsNotes from '../../Controllers/Notes/addEditNotes';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', active: true },\r\n { name: 'Job Notes', active: true }\r\n];\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 80 },\r\n { key: 'actionDate', name: 'Date', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 163 },\r\n // { key: 'notes', name: 'Note' },\r\n // { key: 'title', name: 'Title' },\r\n { key: 'rem', name: 'Reminder Information', width: 400 },\r\n { key: 'orderNo', name: 'Job Ref', width: 100 },\r\n { key: 'regNumber', name: 'Reg Number', width: 120 },\r\n { key: 'jobDescription', name: 'Job Description', width: 150 },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'customer', name: 'Customer' },\r\n { key: 'agentName', name: 'Service Agent' },\r\n { key: 'userName', name: 'User' }\r\n];\r\n\r\nconst JobReminder = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isReload: null\r\n });\r\n useEffect(async () => {\r\n pullApiData();\r\n }, []);\r\n\r\n const pullApiData = async () => {\r\n // let res = await getAllJobReminders();\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date(),\r\n showLoader: false\r\n }));\r\n };\r\n\r\n const concatNoteTitle = (param) => {\r\n return `${param.row.title} [${param.row.notes}]`;\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${val.jobID}/${val.vehicleID}`,\r\n search: '',\r\n state: 'jobrem'\r\n });\r\n };\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\r\n \r\n Edit Note{' '}\r\n \r\n {state.selectedRowData.orderNo} {state.selectedRowData.regNumber}\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n const handelRowCick = (row, name) => {\r\n // let res = await getAllJobReminders();\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'bold', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'bold', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'bold', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNumber}\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 actionCol = tempCols.find((e) => e.key === 'action');\r\n let noteTitle = tempCols.find((e) => e.key === 'rem');\r\n let agentNameCol = tempCols.find((element) => element.key === 'agentName');\r\n let customerNameCol = tempCols.find((element) => element.key === 'customer');\r\n let depotNameCol = tempCols.find((element) => element.key === 'depotName');\r\n let regNumberCol = tempCols.find((element) => element.key === 'regNumber');\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (noteTitle) {\r\n noteTitle.formatter = concatNoteTitle;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (customerNameCol) {\r\n customerNameCol.formatter = renderCustomerName;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const handleNotesClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n let getUrl = `VehicleJob/JobReminders`;\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n />\r\n\r\n {state.open ? (\r\n \r\n handleNotesClose(false)}\r\n NoteID={state.selectedRowData.jobNotesID}\r\n JobID={state.selectedRowData.jobID}\r\n frompage=\"Jobs\"\r\n onFormSubmit={handleNotesClose}\r\n titleModal={dialogTitle()}\r\n />\r\n \r\n ) : null}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default JobReminder;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { EditButton, formatters, BreadCrumbs, DataGrid } from '../../../Core/Controls';\r\nimport ScheduleNotes from '../Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport ScheduleBookingStatus from '../Controllers/Vehicles/ScheduleVehicle/scheduleBookingStatus'; //'./scheduleBookingStatus';\r\nimport ScheduleBookingSection from '../Controllers/Vehicles/ScheduleVehicle/scheduleBookingSection';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\nimport CompleteScheduleModal from './completeSchedule';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport '../../commonStyle.scss';\r\nimport '../Controllers/Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss';\r\nimport { getScheduleByStatus } from '../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { Link } from 'react-router-dom';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport VehicleDailyChecks from '../Controllers/Vehicles/VehicleDailyChecks/vehicleDailyChecks';\r\nimport EditVehicleDailyChecks from '../Controllers/Vehicles/VehicleDailyChecks/editVehicleDailyCheck';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\nimport CustomerDetails from '../Controllers/DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../Controllers/DetailsModal/serviceAgent';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nimport { GetSchedulesExcelFile } from '../../../Core/Services/InternalUser/excelDownload';\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 190, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 110 },\r\n {\r\n key: 'scheduleDateDue',\r\n name: 'Due',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n // {\r\n // key: 'scheduleRequestedBookingDate',\r\n // name: 'Booked Date',\r\n // formatter: formatters.Date_DDMMYYYY,\r\n // width: 120\r\n // },\r\n\r\n { key: 'dueDateISOWeek', name: 'ISO Week', width: 90 },\r\n { key: 'scheduleEventName', name: 'Event' },\r\n {\r\n key: 'agentName',\r\n name: 'Agent'\r\n },\r\n { key: 'customerCompanyName', name: 'Customer', width: 200 }\r\n];\r\nconst InternalUserSchedule = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isAdd: true,\r\n showChecks: false,\r\n showEditChecks: false,\r\n showBred: true,\r\n isReload: null\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const history = useHistory();\r\n const [openDialog, setOpenDialog] = useState({});\r\n const getCrumbs = () => {\r\n let temp = {};\r\n let crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Schedules', active: true }\r\n ];\r\n if (props.status == '1') {\r\n temp = { name: 'Bookings Requsted', active: true };\r\n } else if (props.status == '2') {\r\n temp = { name: 'Accepted by Agents', active: true };\r\n } else if (props.status == '3') {\r\n temp = { name: 'Bookings Rejected', active: true };\r\n } else if (props.status == '5') {\r\n temp = { name: 'Confirmed Bookings', active: true };\r\n }\r\n crumbs.push(temp);\r\n return crumbs;\r\n };\r\n let screenName = getCrumbs();\r\n\r\n useEffect(async () => {\r\n pullApiData();\r\n }, []);\r\n\r\n const handleCheck = (row, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (val === 'Ad') {\r\n newSt.showChecks = true;\r\n newSt.selectedRowData = row;\r\n newSt.showBred = false;\r\n }\r\n if (val === 'Ed') {\r\n newSt.showEditChecks = true;\r\n newSt.selectedRowData = row;\r\n newSt.showBred = false;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const pullApiData = async () => {\r\n // let res = await getScheduleByStatus(props.status);\r\n // setState((st) => ({\r\n // ...st,\r\n // rows: [...(res.data.schedules || [])],\r\n // showLoader: false\r\n // }));\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.scheduleJobID}/${val?.scheduleVehicleID}`,\r\n search: '',\r\n state: 'jobs'\r\n });\r\n };\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\r\n \r\n {row?.displayNotes === 'Y' && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )}\r\n\r\n {row?.displayBookingRequest === 'Y' && (\r\n {\r\n checkButton(row, 'status');\r\n }}\r\n toolTipTitle=\"Update Booking Request\"\r\n />\r\n )}\r\n\r\n {row?.displayBookJob === 'Y' && (\r\n {\r\n checkButton(row, 'section');\r\n }}\r\n toolTipTitle=\"Book Job\"\r\n />\r\n )}\r\n\r\n {row?.displayJobDetails === 'Y' && checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)}\r\n />\r\n )}\r\n\r\n {row?.displayCompleteSchedule === 'Y' && (\r\n {\r\n checkButton(row, 'complete');\r\n }}\r\n toolTipTitle=\"Complete Schedule\"\r\n />\r\n )}\r\n\r\n {row?.displayAddInspectionCheck === 'Y' && (\r\n {\r\n handleCheck(row, 'Ad');\r\n }}\r\n toolTipTitle=\"Add Inspection Check\"\r\n />\r\n )}\r\n\r\n {row?.displayEditInspectionCheck === 'Y' && (\r\n {\r\n handleCheck(row, 'Ed');\r\n }}\r\n toolTipTitle=\"Edit Inspection Check\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.scheduleVehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleModalClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n let regNumberCol = tempCols.find((element) => element.key === 'vehicleRegNumber');\r\n let agentCol = tempCols.find((element) => element.key === 'agentName');\r\n let custCol = tempCols.find((element) => element.key === 'customerCompanyName');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (agentCol) {\r\n agentCol.formatter = renderAgentName;\r\n }\r\n if (custCol) {\r\n custCol.formatter = renderCustomerName;\r\n }\r\n if (props.status == '1' || props.status == '2' || props.status == '3') {\r\n tempCols.splice(3, 0, {\r\n key: 'scheduleRequestedBookingDate',\r\n name: 'Date Requested',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 120\r\n });\r\n } else {\r\n tempCols.splice(3, 0, {\r\n key: 'bookingDate',\r\n name: 'Booked Date',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 110\r\n });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showChecks: false,\r\n showEditChecks: false,\r\n selectedRowData: {},\r\n showBred: true\r\n }));\r\n res && pullApiData();\r\n };\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n res && pullApiData();\r\n };\r\n\r\n const checkButton = (row, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row\r\n }));\r\n };\r\n\r\n let getUrl = `Schedules?vehicleId=&status=${props.status}`;\r\n\r\n return (\r\n \r\n {state.showBred ? handleClose(true)}\r\n frompage={true}\r\n />\r\n ) : state.showEditChecks ? (\r\n handleClose(true)} frompage={true} />\r\n ) : (\r\n // ({\r\n records: res.data.schedules,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={() =>\r\n GetSchedulesExcelFile({\r\n status: props.status || '',\r\n mode: state?.filterID || '',\r\n startDate: state?.fromDate || '',\r\n endDate: state?.toDate || '',\r\n fileExt: 'xlsx'\r\n })\r\n }\r\n />\r\n )}\r\n {openDialog.complete ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.notes ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.status ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n {openDialog.section ? (\r\n closeTheDialog(false)}>\r\n \r\n ) : null}\r\n\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default InternalUserSchedule;\r\n","import { createContext, useEffect, useState, useCallback } from 'react';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { addDepot, updateDepot, getDepotById, getDropdown } from '../../../../../Core/Services/InternalUser/ControllerService/depotsService';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { SelectBox, SecondaryButton, SecondaryCheckbox, BreadCrumbs, MandatoryField, SimpleField, YesButton, NoButton } from '../../../../../Core/Controls';\r\nimport { emailValidation, validatePostCode, validatePostCodeWothCountryCode } from '../../../../../Core/Basic/StaticService';\r\nimport { isNull } from 'lodash';\r\nimport Paper from '@material-ui/core/Paper';\r\n\r\nexport const DepotScreenContext = createContext();\r\n\r\nlet invoiceInfo = {\r\n depotUseAddressAsInvoiceAddress: false,\r\n depotInvoiceAddress1: '',\r\n depotInvoiceAddress2: '',\r\n depotInvoiceAddressCity: '',\r\n depotInvoiceAddressCounty: '',\r\n depotInvoiceAddressPostCode: '',\r\n depotInvoiceAddressCountryCode: 'GB',\r\n depotInvoiceEmailAddress: '',\r\n depotEmailInvoices: false\r\n};\r\n\r\nexport const DepotProvider = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const [depotFields, setDepotFields] = useState({\r\n name: '',\r\n address1: '',\r\n address2: '',\r\n depotTown: '',\r\n depotCounty: '',\r\n depotCountryCode: '',\r\n depotEmail: '',\r\n depotTelephone: '',\r\n depotPostCode: '',\r\n depotNotInUse: true,\r\n depotCustomersRef: '',\r\n serviceAgentID: '',\r\n firstDayofWeek: '',\r\n scheduleBookingModeList: [],\r\n depotVORMobileNumbers: '',\r\n depotContact: '',\r\n depotServiceAgentID: '',\r\n depotAgentSecondaryAgentID: '',\r\n serviceAgentsList: [],\r\n errors: {},\r\n customerList: [],\r\n depotID: null,\r\n depotCustomerID: '',\r\n mergeSchedules: true,\r\n displayISOWeek: true,\r\n addPaperworkReceived: true,\r\n trafficStyleColourCoding: true,\r\n mergeRange: '',\r\n sunday: false,\r\n monday: true,\r\n tuesday: false,\r\n wednesday: false,\r\n thursday: false,\r\n friday: false,\r\n saturday: false,\r\n depotAdditionalPlanningEmails: '',\r\n cPCHolderEmail: '',\r\n cPCHolderName: '',\r\n secondaryEmail: '',\r\n depotSecondaryContact: '',\r\n depotPCNEmail: '',\r\n depotAccountName: '',\r\n depotAccountEmail: '',\r\n depotThirdPartyPlannerEmailAddress: '',\r\n depotBreakdownNotificationEmail: '',\r\n depotTimedVehicleStatusUpdateEmail: '',\r\n depotSchedulePlannerEmail: '',\r\n depotDefectNotificationEmail: '',\r\n depotNotes: '',\r\n depotScheduleBookingMode: '',\r\n depotIsSendJobApprovalRequired: false,\r\n depotIsOrderConfirmation: false,\r\n depotIsBookingEmail: false,\r\n depotIsJobUpdateEmail: false,\r\n depotIsSendQueryResponseReceived: false,\r\n depotIsSendBreakdownEmail: false,\r\n depotIsSendDefectEmail: false\r\n });\r\n\r\n const [invoiceFields, setInvoiceFields] = useState({\r\n ...invoiceInfo,\r\n errors: {}\r\n });\r\n\r\n const [optionsState, setOptionState] = useState({\r\n scheduleBookingModeList: [],\r\n serviceAgentsList: [],\r\n customerList: []\r\n });\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n depotServiceAgentValue: null,\r\n depotAgentSecondaryAgentValue: null,\r\n depotCustomerValue: null,\r\n depotScheduleBookingModeValue: null\r\n });\r\n\r\n const setVal = (s) => {\r\n setDepotFields((st) => ({\r\n ...st,\r\n address1: s.addressLine1,\r\n address2: s.addressLine2,\r\n depotTown: s.town,\r\n depotCounty: s.county,\r\n depotPostCode: s.postCode\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getDropdown();\r\n const scheduleBookingModeList = res.data.scheduleBookingModes.map((item) => ({\r\n id: item.scheduleBookingModeCode,\r\n name: item.scheduleBookingModeDescription\r\n }));\r\n const List = res.data.customers.map((item) => ({\r\n id: item.customerID,\r\n name: item.customerCompanyName\r\n }));\r\n setOptionState((st) => ({\r\n ...st,\r\n scheduleBookingModeList: scheduleBookingModeList,\r\n serviceAgentsList: res.data.serviceAgents,\r\n customerList: List\r\n }));\r\n if (props.depotID) {\r\n let res = await getDepotById(props.depotID);\r\n const data = res.data.details[0];\r\n setDepotFields((st) => ({\r\n ...st,\r\n name: data.depotName,\r\n address1: data.depotAddress1,\r\n address2: data.depotAddress2,\r\n depotCounty: data.depotCounty,\r\n depotTown: data.depotTown,\r\n depotCountryCode: data.depotCountryCode,\r\n depotEmail: data.depotEmail,\r\n depotCustomersRef: data.depotCustomersRef,\r\n scheduleBookingModeID: data.scheduleBookingModeID,\r\n depotPostCode: data.depotPostCode,\r\n depotTelephone: data.depotTelephone,\r\n depotContact: data.depotContact,\r\n depotNotInUse: data.depotNotInUse,\r\n firstDayofWeek: data.depotFirstDayofWeek,\r\n depotVORMobileNumbers: data.depotVORMobileNumbers,\r\n depotServiceAgentID: data.depotPrimaryAgentID,\r\n depotAgentSecondaryAgentID: data.depotAgentSecondaryAgentID,\r\n depotID: data.depotID,\r\n depotCustomerID: data.depotCustomerID,\r\n scheduleBookingModeID: data.scheduleBookingModeID,\r\n MergeSchedules: data.depotPlannerMergeSchedules,\r\n displayISOWeek: data.depotPlannerDisplayISOWeek,\r\n addPaperworkReceived: data.depotPlannerAddPaperworkReceived,\r\n trafficStyleColourCoding: data.depotPlannerTrafficStyleColourCoding,\r\n mergeRange: data.depotPlannerMergeRange,\r\n sunday: data.depotBookingPreferenceSunday,\r\n monday: data.depotBookingPreferenceMonday,\r\n tuesday: data.depotBookingPreferenceTuesday,\r\n wednesday: data.depotBookingPreferenceWednesday,\r\n thursday: data.depotBookingPreferenceThursday,\r\n friday: data.depotBookingPreferenceFriday,\r\n saturday: data.depotBookingPreferenceSaturday,\r\n depotAdditionalPlanningEmails: data.depotAdditionalPlanningEmails,\r\n cPCHolderEmail: data.depotCPCHolderEmail,\r\n cPCHolderName: data.depotCPCHolderName,\r\n secondaryEmail: data.depotSecondaryEmail,\r\n depotSecondaryContact: data.depotSecondaryContact,\r\n depotPCNEmail: data.depotPCNEmail,\r\n depotAccountName: data.depotAccountName,\r\n depotAccountEmail: data.depotAccountEmail,\r\n depotContactMobile: data.depotContactMobile,\r\n depotThirdPartyPlannerEmailAddress: data.depotThirdPartyPlannerEmailAddress,\r\n depotScheduleBookingMode: data.depotScheduleBookingMode,\r\n depotBreakdownNotificationEmail: data.depotBreakdownNotificationEmail,\r\n depotTimedVehicleStatusUpdateEmail: data.depotTimedVehicleStatusUpdateEmail,\r\n depotSchedulePlannerEmail: data.depotSchedulePlannerEmail,\r\n depotDefectNotificationEmail: data.depotDefectNotificationEmail,\r\n depotNotes: data.depotNotes,\r\n depotVehicleStatusUpdateEmail: data.depotVehicleStatusUpdateEmail,\r\n depotIsSendJobApprovalRequired: data.depotIsSendJobApprovalRequired,\r\n depotSendJobApprovalRequiredEmail: data.depotSendJobApprovalRequiredEmail,\r\n depotIsOrderConfirmation: data.depotIsOrderConfirmation,\r\n depotOrderConfirmationEmail: data.depotOrderConfirmationEmail,\r\n depotIsBookingEmail: data.depotIsBookingEmail,\r\n depotBookingEmail: data.depotBookingEmail,\r\n depotIsJobUpdateEmail: data.depotIsJobUpdateEmail,\r\n depotJobUpdateEmail: data.depotJobUpdateEmail,\r\n depotIsSendQueryResponseReceived: data.depotIsSendQueryResponseReceived,\r\n depotSendQueryResponseReceivedEmail: data.depotSendQueryResponseReceivedEmail,\r\n depotIsSendBreakdownEmail: data.depotIsSendBreakdownEmail,\r\n depotBreakdownNotificationEmail: data.depotBreakdownNotificationEmail,\r\n depotIsSendDefectEmail: data.depotIsSendDefectEmail,\r\n depotDefectNotificationEmail: data.depotDefectNotificationEmail,\r\n customer: data.customer,\r\n fileCount: data.fileCount\r\n }));\r\n setInvoiceFields((dt) => ({\r\n ...dt,\r\n depotUseAddressAsInvoiceAddress: data.depotUseAddressAsInvoiceAddress,\r\n depotInvoiceAddress1: data.depotInvoiceAddress1,\r\n depotInvoiceAddress2: data.depotInvoiceAddress2,\r\n depotInvoiceAddressCity: data.depotInvoiceAddressCity,\r\n depotInvoiceAddressCounty: data.depotInvoiceAddressCounty,\r\n depotInvoiceAddressPostCode: data.depotInvoiceAddressPostCode,\r\n depotInvoiceAddressCountryCode: data.depotInvoiceAddressCountryCode,\r\n depotInvoiceEmailAddress: data.depotInvoiceEmailAddress,\r\n depotEmailInvoices: data.depotEmailInvoices\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let depotServiceAgentValue = null;\r\n let depotAgentSecondaryAgentValue = null;\r\n let depotCustomerValue = null;\r\n let depotScheduleBookingModeValue = null;\r\n\r\n if (depotFields.depotServiceAgentID) {\r\n depotServiceAgentValue = optionsState.serviceAgentsList.find(({ id }) => id === depotFields.depotServiceAgentID);\r\n }\r\n if (depotFields.depotAgentSecondaryAgentID) {\r\n depotAgentSecondaryAgentValue = optionsState.serviceAgentsList.find(({ id }) => id === depotFields.depotAgentSecondaryAgentID);\r\n }\r\n if (depotFields.depotCustomerID) {\r\n depotCustomerValue = optionsState.customerList.find(({ id }) => id === depotFields.depotCustomerID);\r\n }\r\n if (depotFields.depotScheduleBookingMode) {\r\n depotScheduleBookingModeValue = optionsState.scheduleBookingModeList.find(({ id }) => id === depotFields.depotScheduleBookingMode);\r\n }\r\n\r\n setTempOptions((st) => ({\r\n ...st,\r\n depotCustomerValue: depotCustomerValue,\r\n depotServiceAgentValue: depotServiceAgentValue,\r\n depotAgentSecondaryAgentValue: depotAgentSecondaryAgentValue,\r\n depotScheduleBookingModeValue: depotScheduleBookingModeValue\r\n }));\r\n }, [depotFields.depotServiceAgentID, depotFields.depotAgentSecondaryAgentID, depotFields.depotCustomerID, depotFields.scheduleBookingModeID]);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const handledepotFields = (e) => {\r\n const { name, value } = e.target;\r\n setDepotFields((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const handleActive = (val) => {\r\n setDepotFields((field) => ({\r\n ...field,\r\n depotNotInUse: val\r\n }));\r\n };\r\n\r\n const handleCheckbox = useCallback((e) => {\r\n const { name, checked } = e.target;\r\n setDepotFields((st) => {\r\n const nst = { ...st, [name]: checked };\r\n return nst;\r\n });\r\n }, []);\r\n const resetInput = (name) => {\r\n setDepotFields((st) => ({ ...st, [name]: '' }));\r\n };\r\n\r\n const setInvoiceVal = (s) => {\r\n setInvoiceFields((st) => ({\r\n ...st,\r\n depotInvoiceAddress1: s.addressLine1,\r\n depotInvoiceAddress2: s.addressLine2,\r\n depotInvoiceAddressCity: s.town,\r\n depotInvoiceAddressCounty: s.county,\r\n depotInvoiceAddressPostCode: s.postCode\r\n }));\r\n };\r\n const invoiceFieldsChange = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n setInvoiceFields((st) => ({ ...st, ...invoiceInfo, [name]: true }));\r\n } else if (value === 'false' && type?.toLowerCase() === 'radio') {\r\n setInvoiceFields((st) => ({ ...st, [name]: false }));\r\n } else {\r\n setInvoiceFields((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n const invoiceCheckBox = (e) => {\r\n const { name, checked } = e.target;\r\n setInvoiceFields((st) => ({ ...st, [name]: checked }));\r\n };\r\n\r\n const resetInvoiceInput = (name) => {\r\n setInvoiceFields((st) => ({ ...st, [name]: '' }));\r\n };\r\n\r\n const validations = () => {\r\n const {\r\n name,\r\n address1,\r\n address2,\r\n depotCounty,\r\n depotTown,\r\n depotPostCode,\r\n depotCountryCode,\r\n depotServiceAgentID,\r\n depotAgentSecondaryAgentID,\r\n depotEmail,\r\n depotTelephone,\r\n depotContact,\r\n depotVehicleStatusUpdateEmail,\r\n depotIsSendJobApprovalRequired,\r\n depotSendJobApprovalRequiredEmail,\r\n depotIsOrderConfirmation,\r\n depotOrderConfirmationEmail,\r\n depotIsBookingEmail,\r\n depotBookingEmail,\r\n depotIsJobUpdateEmail,\r\n depotJobUpdateEmail,\r\n depotIsSendQueryResponseReceived,\r\n depotSendQueryResponseReceivedEmail,\r\n depotIsSendBreakdownEmail,\r\n depotBreakdownNotificationEmail,\r\n depotIsSendDefectEmail,\r\n depotDefectNotificationEmail\r\n } = depotFields;\r\n const { depotCustomerValue, depotServiceAgentValue, depotAgentSecondaryAgentValue, depotScheduleBookingModeValue } = tempOptions;\r\n const { depotInvoiceEmailAddress, depotEmailInvoices } = invoiceFields;\r\n\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!/[^\\s]/.test(name)) {\r\n errors.name = 'Depot Name is required.';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(address1)) {\r\n errors.address1 = 'Depot Address1 is required.';\r\n formIsValid = false;\r\n }\r\n if (!depotServiceAgentValue) {\r\n errors.depotServiceAgentID = 'Primary Service Agent is required.';\r\n formIsValid = false;\r\n }\r\n if (!depotAgentSecondaryAgentValue) {\r\n errors.depotAgentSecondaryAgentID = 'Secondary Service Agent is required.';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(depotCounty)) {\r\n errors.depotCounty = 'Depot county is required.';\r\n formIsValid = false;\r\n }\r\n if (!depotCountryCode) {\r\n errors.depotCountryCode = 'Country code is required.';\r\n formIsValid = false;\r\n }\r\n if (depotFields.depotCountryCode === 'GB') {\r\n if (depotCountryCode && !validatePostCodeWothCountryCode(depotCountryCode, depotPostCode)) {\r\n errors.depotPostCode = `Please fill valid post code`;\r\n formIsValid = false;\r\n }\r\n }\r\n if (!depotCustomerValue) {\r\n errors.depotCustomerID = 'Customer is required.';\r\n formIsValid = false;\r\n }\r\n if (depotIsSendJobApprovalRequired && !emailValidation(depotSendJobApprovalRequiredEmail) && !isNull(depotSendJobApprovalRequiredEmail)) {\r\n errors.depotSendJobApprovalRequiredEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotIsOrderConfirmation && !emailValidation(depotOrderConfirmationEmail) && !isNull(depotOrderConfirmationEmail)) {\r\n errors.depotOrderConfirmationEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n\r\n if (depotIsBookingEmail && !emailValidation(depotBookingEmail) && !isNull(depotBookingEmail)) {\r\n errors.depotBookingEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotIsJobUpdateEmail && !emailValidation(depotJobUpdateEmail) && !isNull(depotJobUpdateEmail)) {\r\n errors.depotJobUpdateEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotIsSendQueryResponseReceived && !emailValidation(depotSendQueryResponseReceivedEmail) && !isNull(depotSendQueryResponseReceivedEmail)) {\r\n errors.depotSendQueryResponseReceivedEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotIsSendBreakdownEmail && !emailValidation(depotBreakdownNotificationEmail) && !isNull(depotBreakdownNotificationEmail)) {\r\n errors.depotBreakdownNotificationEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotIsSendDefectEmail && !emailValidation(depotDefectNotificationEmail) && !isNull(depotDefectNotificationEmail)) {\r\n errors.depotDefectNotificationEmail = 'Please Enter a valid Email ID';\r\n formIsValid = false;\r\n }\r\n if (depotEmailInvoices && (!/[^\\s]/.test(depotInvoiceEmailAddress) || isNull(depotInvoiceEmailAddress))) {\r\n errors.depotInvoiceEmailAddress = 'Email can not be empty for checked flag';\r\n formIsValid = false;\r\n }\r\n setDepotFields((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const depotData = {\r\n depotID: depotFields.depotID,\r\n depotCustomerID: tempOptions.depotCustomerValue?.id, //depotFields.depotCustomerID,\r\n depotName: depotFields.name,\r\n depotAddress1: depotFields.address1,\r\n depotAddress2: depotFields.address2,\r\n depotCounty: depotFields.depotCounty,\r\n depotTown: depotFields.depotTown,\r\n depotCountryCode: depotFields.depotCountryCode,\r\n depotEmail: depotFields.depotEmail,\r\n depotCustomersRef: depotFields.depotCustomersRef,\r\n depotPostCode: depotFields.depotPostCode,\r\n depotTelephone: depotFields.depotTelephone,\r\n depotContact: depotFields.depotContact,\r\n depotNotInUse: depotFields.depotNotInUse,\r\n depotPrimaryAgentID: tempOptions.depotServiceAgentValue?.id, //depotFields.depotServiceAgentID,\r\n depotAgentSecondaryAgentID: tempOptions.depotAgentSecondaryAgentValue?.id, //depotFields.depotAgentSecondaryAgentID,\r\n depotVORMobileNumbers: depotFields.depotVORMobileNumbers,\r\n depotPlannerMergeSchedules: depotFields.mergeSchedules,\r\n depotPlannerDisplayISOWeek: depotFields.displayISOWeek,\r\n depotPlannerAddPaperworkReceived: depotFields.addPaperworkReceived,\r\n depotPlannerTrafficStyleColourCoding: depotFields.trafficStyleColourCoding,\r\n depotPlannerMergeRange: depotFields.mergeRange,\r\n depotBookingPreferenceSunday: depotFields.sunday,\r\n depotBookingPreferenceMonday: depotFields.monday,\r\n depotBookingPreferenceTuesday: depotFields.tuesday,\r\n depotBookingPreferenceWednesday: depotFields.wednesday,\r\n depotBookingPreferenceThursday: depotFields.thursday,\r\n depotBookingPreferenceFriday: depotFields.friday,\r\n depotBookingPreferenceSaturday: depotFields.saturday,\r\n depotAdditionalPlanningEmails: depotFields.depotAdditionalPlanningEmails,\r\n depotCPCHolderEmail: depotFields.cPCHolderEmail,\r\n depotCPCHolderName: depotFields.cPCHolderName,\r\n depotSecondaryEmail: depotFields.secondaryEmail,\r\n depotSecondaryContact: depotFields.depotSecondaryContact,\r\n depotPCNEmail: depotFields.depotPCNEmail,\r\n depotAccountName: depotFields.depotAccountName,\r\n depotContactMobile: depotFields.depotContactMobile,\r\n depotAccountEmail: depotFields.depotAccountEmail,\r\n depotThirdPartyPlannerEmailAddress: depotFields.depotThirdPartyPlannerEmailAddress,\r\n depotScheduleBookingMode: tempOptions.depotScheduleBookingModeValue?.id, //depotFields.depotScheduleBookingMode,\r\n depotBreakdownNotificationEmail: depotFields.depotBreakdownNotificationEmail,\r\n depotTimedVehicleStatusUpdateEmail: depotFields.depotTimedVehicleStatusUpdateEmail,\r\n depotVehicleStatusUpdateEmail: depotFields.depotVehicleStatusUpdateEmail,\r\n depotSchedulePlannerEmail: depotFields.depotSchedulePlannerEmail,\r\n depotDefectNotificationEmail: depotFields.depotDefectNotificationEmail,\r\n depotfirstDayofWeek: depotFields.depotFirstDayofWeek,\r\n depotNotes: depotFields.depotNotes,\r\n depotIsSendJobApprovalRequired: depotFields.depotIsSendJobApprovalRequired,\r\n depotSendJobApprovalRequiredEmail: depotFields.depotSendJobApprovalRequiredEmail,\r\n depotIsOrderConfirmation: depotFields.depotIsOrderConfirmation,\r\n depotOrderConfirmationEmail: depotFields.depotOrderConfirmationEmail,\r\n depotIsBookingEmail: depotFields.depotIsBookingEmail,\r\n depotBookingEmail: depotFields.depotBookingEmail,\r\n depotIsJobUpdateEmail: depotFields.depotIsJobUpdateEmail,\r\n depotJobUpdateEmail: depotFields.depotJobUpdateEmail,\r\n depotIsSendQueryResponseReceived: depotFields.depotIsSendQueryResponseReceived,\r\n depotSendQueryResponseReceivedEmail: depotFields.depotSendQueryResponseReceivedEmail,\r\n depotIsSendBreakdownEmail: depotFields.depotIsSendBreakdownEmail,\r\n depotBreakdownNotificationEmail: depotFields.depotBreakdownNotificationEmail,\r\n depotIsSendDefectEmail: depotFields.depotIsSendDefectEmail,\r\n depotDefectNotificationEmail: depotFields.depotDefectNotificationEmail,\r\n depotUseAddressAsInvoiceAddress: invoiceFields.depotUseAddressAsInvoiceAddress,\r\n depotInvoiceAddress1: invoiceFields.depotInvoiceAddress1 || '',\r\n depotInvoiceAddress2: invoiceFields.depotInvoiceAddress2 || '',\r\n depotInvoiceAddressCity: invoiceFields.depotInvoiceAddressCity || '',\r\n depotInvoiceAddressCounty: invoiceFields.depotInvoiceAddressCounty || '',\r\n depotInvoiceAddressPostCode: invoiceFields.depotInvoiceAddressPostCode || '',\r\n depotInvoiceAddressCountryCode: invoiceFields.depotInvoiceAddressCountryCode || '',\r\n depotInvoiceEmailAddress: invoiceFields.depotInvoiceEmailAddress || '',\r\n depotEmailInvoices: invoiceFields.depotEmailInvoices\r\n };\r\n setBtnLoader(true);\r\n let res;\r\n if (props.depotID) {\r\n res = await updateDepot(depotData, props.depotID);\r\n } else {\r\n res = await addDepot(depotData);\r\n }\r\n if (res.success) {\r\n showToastSuccess('Depots saved successfully');\r\n props.onFormClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n return (\r\n \r\n {!props.depotID &&
\r\n\r\n \r\n {/* */}\r\n \r\n \r\n \r\n Customers\r\n \r\n {depotFields.errors.depotCustomerID} \r\n \r\n \r\n {depotFields.errors.name} */}\r\n \r\n \r\n \r\n Country Code\r\n \r\n {depotFields.errors.depotCountryCode} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {depotFields.errors.depotPostCode} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Primary Service Agent\r\n \r\n {depotFields.errors.depotServiceAgentID} \r\n \r\n \r\n \r\n Secondary Service Agent\r\n \r\n {depotFields.errors.depotAgentSecondaryAgentID} \r\n \r\n \r\n First Day of Week \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Schedule Planner Options\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Max Schedule Merge Range \r\n \r\n \r\n \r\n {/* \r\n */}\r\n \r\n Schedule Booking Mode \r\n \r\n \r\n Third Party Planner Email Address \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Booking Preference\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Contact Details\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Notification Details\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n {depotFields.errors.depotOrderConfirmationEmail} \r\n \r\n \r\n {depotFields.errors.depotBookingEmail} \r\n \r\n \r\n {depotFields.errors.depotSendJobApprovalRequiredEmail} \r\n \r\n \r\n {depotFields.errors.depotJobUpdateEmail} \r\n \r\n \r\n {depotFields.errors.depotSendQueryResponseReceivedEmail} \r\n \r\n \r\n {depotFields.errors.depotBreakdownNotificationEmail} \r\n \r\n \r\n {depotFields.errors.depotDefectNotificationEmail} \r\n \r\n \r\n {depotFields.errors.depotOverdueReminderEmail} \r\n \r\n {/* \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n VOR Mobile Number \r\n \r\n \r\n \r\n \r\n Active\r\n \r\n
\r\n \r\n \r\n {/* \r\n handleActive(true)}> \r\n \r\n \r\n handleActive(false)}> \r\n */}\r\n \r\n \r\n handleActive(true)}> \r\n \r\n \r\n handleActive(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 props.onFormClose()}>\r\n Cancel\r\n \r\n \r\n \r\n \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\n
\r\n handleAddPopUp(null, 'showDepotScreen')}\r\n // disabled={!getAccessParam['CanUpdateDepots']}\r\n />\r\n
\r\n \r\n handleAdd(row)} toolTipTitle=\"Edit Department\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const title = state.data ? 'Update Department' : 'Add Department';\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullData();\r\n };\r\n\r\n return (\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={`Departments?DeportID=${props.depotID} `}\r\n onBtnClick={() => handleAdd(null)}\r\n btnTitle={getAccessParam['CanUpdateDepotDepartments'] ? title : ''}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} departmentID={state.departmentID} depotID={props.depotID} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default Department;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useToast } from '../../../../../Core/Hooks/useToast';\r\nimport { getDepots } from '../../../../../Core/Services/InternalUser/ControllerService/depotsService';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../../../Core/Controls';\r\nimport AddEditDepots from './addEditDepots';\r\nimport EditDepot from './editDashboard';\r\nimport '../../../../commonStyle.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../../../Core/Controls/GijgoGrid';\r\nimport ReactDOM from 'react-dom';\r\nimport DialogComp from '../../../../../Core/Dialog/DialogComp';\r\nimport CustomerDetails from '../../DetailsModal/customerDetails';\r\nimport { AppStorage } from '../../../../../Core/Basic/storage-service';\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n { key: 'depotName', name: 'Name' },\r\n { key: 'customer', name: 'Customer', width: 180 },\r\n // { key: 'depotAddress2', name: 'Address2' },\r\n // { key: 'depotTown', name: 'Town' },\r\n // { key: 'depotCounty', name: 'County' },\r\n // { key: 'depotCountryCode', name: 'Code', width: '4%' },\r\n { key: 'depotEmail', name: 'Email', width: 250 },\r\n {\r\n key: 'depotAddress',\r\n name: 'Address'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n // { name: 'Vehicles', active: true },\r\n { name: 'Depots', active: true }\r\n];\r\n\r\nconst VehicleDepots = (props) => {\r\n const { showToastError } = useToast();\r\n let getAccessParam = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n depotsList: [],\r\n depotID: null,\r\n isReload: null\r\n });\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n depotID: record\r\n }));\r\n };\r\n\r\n const pullDepotsAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n // useEffect(async () => {\r\n // pullDepotsAndUpdateState();\r\n // }, []);\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/Depots/${val.depotID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n {formatters.mailFormatter(row.depotEmail)}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showCustomerModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n let emailCol = tempCols.find((element) => element.key === 'depotEmail');\r\n let customerNameCol = tempCols.find((element) => element.key === 'customer');\r\n if (emailCol) {\r\n emailCol.formatter = renderEmail;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (customerNameCol) {\r\n customerNameCol.formatter = renderCustomerName;\r\n }\r\n // if (window.innerWidth > 600) {\r\n // tempCols.splice(\r\n // 3,\r\n // 0,\r\n // { key: 'depotAddress1', name: 'Address1' },\r\n // { key: 'depotAddress2', name: 'Address2' },\r\n // { key: 'depotTown', name: 'Town' },\r\n // { key: 'depotCounty', name: 'County' },\r\n // { key: 'depotCountryCode', name: 'Code', width: '4%' }\r\n // );\r\n // }\r\n return tempCols;\r\n }, []);\r\n\r\n let getUrl = `depots`;\r\n\r\n return (\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={getUrl}\r\n onBtnClick={() => handleAdd(null)}\r\n btnTitle={getAccessParam['CanUpdateDepots'] ? 'Add Depots' : ''}\r\n isReload={state.isReload}\r\n idFieldName=\"depotID\"\r\n fileUploaderConfigName=\"DepotScreen\"\r\n />\r\n \r\n )}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleDepots;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, MandatoryField, SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { getDefectTypesId, postDefectTypesData } from '../../../../Core/Services/InternalUser/defectTypeService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction DefectTypeModal(props) {\r\n const [state, setState] = useState({\r\n defectTypeID: null,\r\n defectTypeCode: '',\r\n defectTypeDescription: '',\r\n defectEmailDocument: true,\r\n IsAdd: true,\r\n errors: {}\r\n });\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.data) {\r\n const data = props.data;\r\n setState((state) => ({\r\n ...state,\r\n defectTypeCode: data.defectTypeCode,\r\n defectTypeDescription: data.defectTypeDescription,\r\n defectEmailDocument: data.defectEmailDocument,\r\n code: data.defectTypeCode,\r\n IsAdd: data.IsAdd\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { defectTypeDescription, defectTypeCode } = state; //[A-Z]{2}\r\n let pattern = /[A-Z]{2}/;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!defectTypeDescription) {\r\n errors.defectTypeDescription = ' Defect Types Description is required';\r\n formIsValid = false;\r\n }\r\n if (!pattern.test(defectTypeCode)) {\r\n errors.defectTypeCode = ' Defect Types Code Should be less then 2 Charecter';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const defectTypeData = {\r\n defectTypeCode: state.defectTypeCode,\r\n defectTypeDescription: state.defectTypeDescription,\r\n defectEmailDocument: state.defectEmailDocument,\r\n IsAdd: state.code ? false : true\r\n };\r\n let res = await postDefectTypesData(defectTypeData);\r\n if (res.success) {\r\n showToastSuccess('Defect Types Updated sucessfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n submitHandler(row)} toolTipTitle=\"Edit Defect Type\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.data ? 'Update Defect Type' : 'Add Defect Type';\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullData();\r\n };\r\n\r\n return (\r\n \r\n submitHandler(null)}\r\n paginate\r\n offset={210}\r\n /> */}\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Defect Type\"\r\n onBtnClick={() => submitHandler(null)}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"sm\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default DefectType;\r\n","import { FormHelperText, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useState } from 'react';\r\nimport { DatePicker, formatters, SecondaryButton } from '../../../../Core/Controls';\r\nimport '../../../commonStyle.scss';\r\nimport { postScheduleReceived } from '../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport { useEffect } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\n\r\nconst ScheduleSetReceivedModal = (props) => {\r\n const [state, setState] = useState({\r\n dateReceived: ''\r\n });\r\n const [error, setError] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const validate = () => {\r\n let errors = {};\r\n let isValid = true;\r\n const { dateReceived } = state;\r\n if (!/[^\\s]/.test(dateReceived)) {\r\n errors.dateReceived = 'Received date is required';\r\n isValid = false;\r\n }\r\n setError(errors);\r\n return isValid;\r\n };\r\n\r\n const handleData = async () => {\r\n if (validate()) {\r\n let res = await postScheduleReceived({\r\n dateReceived: state.dateReceived,\r\n scheduleDocID: props?.val?.scheduleDocID\r\n });\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n props.onFormSubmit(true);\r\n }\r\n };\r\n\r\n const inputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n return (\r\n <>\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agent}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depot}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleClose = (res) => {\r\n let newst = {};\r\n newst.open = false;\r\n newst.showSaModal = false;\r\n newst.showCustomerModal = false;\r\n newst.showDepotModal = false;\r\n newst.showSetReceived = false;\r\n if (res) newst.isReload = new Date();\r\n setState((st) => ({\r\n ...st,\r\n ...newst\r\n }));\r\n //isReload\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let regNumberCol = tempCols.find((element) => element.key === 'regNumber');\r\n let agentCol = tempCols.find((element) => element.key === 'agent');\r\n let customerCol = tempCols.find((element) => element.key === 'customer');\r\n let depotCol = tempCols.find((element) => element.key === 'depot');\r\n if (checkhaveAccess?.CanViewJobs || checkhaveAccess?.CanUploadScheduleDocuments) {\r\n tempCols.splice(0, 0, {\r\n key: 'action',\r\n name: 'Action',\r\n width: 120,\r\n addFileUploaderIcon: true,\r\n formatter: dataFormatter\r\n });\r\n }\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (agentCol) {\r\n agentCol.formatter = renderAgentName;\r\n }\r\n if (customerCol) {\r\n customerCol.formatter = renderCustomerName;\r\n }\r\n if (depotCol) {\r\n depotCol.formatter = renderDepotName;\r\n }\r\n return tempCols;\r\n }, [state.recordType]);\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 let idFieldName = state.recordType == true ? 'scheduleID' : 'scheduleDocID';\r\n let fileUploaderConfigName = 'ScheduleDocumentsRequired';\r\n\r\n return (\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 isReload={state.isReload}\r\n fileUploaderModalClose={true}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={(params) =>\r\n GetOutstandingDocSchedulesExcelFile({\r\n received: state.recordType,\r\n fileExt: 'xlsx',\r\n filterValues: params || {}\r\n })\r\n }\r\n />\r\n \r\n\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showSetReceived ? (\r\n handleClose(false)} title={`Set Received (${state.data?.regNumber})`}>\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default OutStandingDocuments;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid/index';\r\nimport { getAllJob } from '../../../../Core/Services/InternalUser/JOB/jobService';\r\nimport { BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { Link } from 'react-router-dom';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport JobQueryModal from './JobStatusBtn/JobQuery';\r\nimport ReactDOM from 'react-dom';\r\nimport CustomerDetails from '../DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../DetailsModal/serviceAgent';\r\nimport DepotDetails from '../DetailsModal/depotDetails';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: '120', addFileUploaderIcon: true },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY, width: 100 },\r\n // { key: 'agentOrderNo', name: 'Job Ref', width: 145 },\r\n { key: 'vehicleRegNumber', name: 'Reg No', width: 100 },\r\n { key: 'jobDescription', name: 'Job Description', width: 150 },\r\n { key: 'partsTotal', name: 'Parts', formatter: formatters.NumberWithPound, align: 'right', width: 110 },\r\n { key: 'labourTotal', name: 'Labour', formatter: formatters.NumberWithPound, align: 'right', width: 110 },\r\n { key: 'orderTotal', name: 'Total', formatter: formatters.NumberWithPound, align: 'right', width: 110 },\r\n { key: 'serviceAgentName', name: 'Service Agent', width: 200 },\r\n // { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depots', width: 200 }\r\n];\r\n\r\nconst getCrumbs = (code) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Jobs', active: true }\r\n ];\r\n if (code == 'AR') {\r\n temp = { name: 'Awaiting Approvals', active: true };\r\n } else if (code == 'DD') {\r\n temp = { name: 'Driver Defects', active: true };\r\n } else if (code == 'EP') {\r\n temp = { name: 'Estimates Pending', active: true };\r\n } else if (code == 'ER') {\r\n temp = { name: 'Estimates Revised', active: true };\r\n } else if (code == 'CQ') {\r\n temp = { name: 'Customer Query', active: true };\r\n } else if (code == 'JQ') {\r\n temp = { name: 'Query Job', active: true };\r\n } else if (code == 'FR') {\r\n temp = { name: 'Awating Review', active: true };\r\n } else if (code == 'AQ') {\r\n temp = { name: 'Agent Query', active: true };\r\n } else if (code == 'QJ') {\r\n temp = { name: 'Jobs In Query', active: true };\r\n } else if (code == 'AU') {\r\n temp = { name: 'Jobs Unassigned', active: true };\r\n } else if (code == 'CA') {\r\n temp = { name: 'Approved', active: true };\r\n } else if (code == 'EC') {\r\n temp = { name: 'Estimate Under Customer Review', active: true };\r\n } else if (code == 'EA') {\r\n temp = { name: 'Estimates Accepted', active: true };\r\n } else if (code == 'EQ') {\r\n temp = { name: 'Estimates Queried', active: true };\r\n } else {\r\n temp = { name: 'Open Jobs', active: true };\r\n }\r\n final.push(temp);\r\n return final;\r\n};\r\n\r\nconst InternalUserJobsScreen = (props) => {\r\n const [state, setState] = useState({ showLoader: true, open: false, rows: [], isReload: null });\r\n const history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date(),\r\n showLoader: false\r\n }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${val?.vehicleID}`,\r\n search: '',\r\n state: 'jobs'\r\n });\r\n };\r\n\r\n const handleShowQueries = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: true, jobID: val?.jobID }));\r\n };\r\n\r\n const closeTheDialog = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: false, jobID: '' }));\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n {/* */}\r\n handleShowQueries(row)}\r\n />\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}\r\n {/* */}\r\n
\r\n );\r\n };\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.serviceAgentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customerCompanyName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n const renderjobDate = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = {row.bookingDate ? row.bookingDate : row.jobDate}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n let actionjobDateCol = newColumn.find((item) => item.key === 'jobDate');\r\n let agentNameCol = newColumn.find((element) => element.key === 'serviceAgentName');\r\n let depotNameCol = newColumn.find((element) => element.key === 'depotName');\r\n let regNumberCol = newColumn.find((element) => element.key === 'vehicleRegNumber');\r\n if (actionjobDateCol || true) {\r\n actionjobDateCol.formatter = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {row.bookingDate ? formatters.YearFormatter(row.bookingDate) : formatters.YearFormatter(row.jobDate)}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n }\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (!isCustomer) {\r\n newColumn.splice(7, 0, { key: 'customerCompanyName', name: 'Customer', formatter: renderCustomerName, width: 150 });\r\n }\r\n if (isCustomer || props.screenCode == 'AR') {\r\n newColumn.splice(3, 0, { key: 'jobOrderNo', name: 'Order No', width: 145 });\r\n } else {\r\n newColumn.splice(3, 0, { key: 'agentOrderNo', name: 'Job Ref', width: 145 });\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n // if (props.screenCode == 'EP') {\r\n // newColumn.splice(3, 0, {\r\n // key: 'jobEstimatedCost',\r\n // name: 'Estimate',\r\n // formatter: formatters.ColumnTextAlignRight,\r\n // headerRenderer: formatters.ColumnHeaderAlignRight\r\n // });\r\n // newColumn.splice(7, 2);\r\n // }\r\n return newColumn;\r\n }, [state]);\r\n\r\n const crumbs = getCrumbs(props.screenCode);\r\n let getUrl = `VehicleJob/?jobstatusid=${props.screenCode ? props.screenCode : ''}`;\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n idFieldName={`${checkhaveAccess?.CanViewJobs && checkhaveAccess?.CanViewDocuments ? 'jobID' : null}`}\r\n fileUploaderConfigName={`${checkhaveAccess?.CanViewJobs && checkhaveAccess?.CanViewDocuments ? 'JobScreen' : null}`}\r\n />\r\n {state.showJobQuery && (\r\n \r\n \r\n )}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default InternalUserJobsScreen;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllCostCategories = async () => {\r\n let res = await getWithAuth(`CostCategories`);\r\n return res;\r\n};\r\n\r\nexport const getCostCategoriesById = async (id) => {\r\n let res = await getWithAuth(`CostCategories/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postCostCategoriesData = async (data) => {\r\n let res = await postWithAuth(`CostCategories`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { getCostCategoriesById, postCostCategoriesData } from '../../../../Core/Services/InternalUser/costCategoriesService';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction CostCategoriesModal(props) {\r\n const [state, setState] = useState({\r\n costCategoryID: null,\r\n costCategory: '',\r\n costCategoryLedgerCode: '',\r\n active: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.costCategoryID) {\r\n let res = await getCostCategoriesById(props.costCategoryID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n costCategoryID: res.data.list[0].costCategoryID,\r\n costCategory: res.data.list[0].costCategory,\r\n costCategoryLedgerCode: res.data.list[0].costCategoryLedgerCode,\r\n active: res.data.list[0].active,\r\n code: res.data.list[0].costCategoryID\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n const validations = () => {\r\n const { costCategory } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(costCategory)) {\r\n errors.costCategory = 'Cost Category is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const AllData = {\r\n costCategoryID: state.costCategoryID,\r\n costCategory: state.costCategory,\r\n costCategoryLedgerCode: state.costCategoryLedgerCode,\r\n active: state.active\r\n };\r\n let res = await postCostCategoriesData(AllData);\r\n if (res.success) {\r\n showToastSuccess('Cost Categories Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n submitHandler(row)} toolTipTitle=\"Edit Cost Category\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.costCategoryID ? 'Update Cost Categories' : 'Add Cost Categories';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullAllData();\r\n };\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Cost Category\"\r\n onBtnClick={() => submitHandler(null)}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"sm\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nexport default CostCategories;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getCostTypes = async () => {\r\n let res = await getWithAuth(`CostTypes`);\r\n return res;\r\n};\r\n\r\nexport const getCostTypesById = async (id) => {\r\n let res = await getWithAuth(`CostTypes/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postCostTypesData = async (data) => {\r\n let res = await postWithAuth(`CostTypes`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { getCostTypesById, postCostTypesData } from '../../../../Core/Services/InternalUser/costTypeService';\r\nimport { SecondaryCheckbox } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../.././commonStyle.scss';\r\n\r\nfunction CostTypesModal(props) {\r\n const [state, setState] = useState({\r\n costTypeCode: '',\r\n costTypeDescription: '',\r\n costTypeActive: true,\r\n costTypeRechargeToCustomer: true,\r\n costTypePaySupplier: true,\r\n IsAdd: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n \r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n useEffect(async () => {\r\n if (props.data) {\r\n let res = await getCostTypesById(props.data.costTypeCode);\r\n const data = res.data?.list[0];\r\n setState((state) => ({\r\n ...state,\r\n\r\n costTypeCode: data.costTypeCode,\r\n costTypeDescription: data.costTypeDescription,\r\n costTypeActive: data.costTypeActive,\r\n costTypeRechargeToCustomer: data.costTypeRechargeToCustomer,\r\n costTypePaySupplier: data.costTypePaySupplier,\r\n code: data.costTypeCode,\r\n IsAdd: data.IsAdd\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { costTypeDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(costTypeDescription)) {\r\n errors.costTypeDescription = 'Cost Type Description is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const AllData = {\r\n costTypeCode: state.costTypeCode,\r\n costTypeDescription: state.costTypeDescription,\r\n costTypeActive: state.costTypeActive,\r\n costTypeRechargeToCustomer: state.costTypeRechargeToCustomer,\r\n costTypePaySupplier: state.costTypePaySupplier,\r\n isAdd: state.code ? false : true\r\n };\r\n setBtnLoader(true);\r\n let res = await postCostTypesData(AllData);\r\n if (res.success) {\r\n showToastSuccess('Cost Type Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n submitHandler(row)} toolTipTitle=\"Edit Fuel Types\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.data ? 'Update Cost Type' : 'Add Cost Type';\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false, data: null }));\r\n res && pullAllData();\r\n };\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Cost Type\"\r\n onBtnClick={() => submitHandler(null)}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"sm\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default CostTypes;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { FailButton, InputText, MandatoryField, NAButton, PassButton, SecondaryButton, SelectBox, MButton } from '../../../Core/Controls';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport {\r\n Grid,\r\n Paper,\r\n InputLabel,\r\n TableContainer,\r\n Table,\r\n TableHead,\r\n TableBody,\r\n TableRow,\r\n TableCell,\r\n Button,\r\n Typography,\r\n Tooltip,\r\n CircularProgress,\r\n FormHelperText,\r\n Badge\r\n} from '@material-ui/core';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport { getVehicleById } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { getvehiclecheckchecksById, postvehiclecheckchecksData } from '../../../Core/Services/InternalUser/Vehicle/driverVehicle';\r\nimport moment from 'moment';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { getTitleData } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 16,\r\n padding: '8px 20px',\r\n color: '#f50057'\r\n },\r\n body: {\r\n fontSize: 14,\r\n padding: '8px 20px'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: '#F5F5F5'\r\n }\r\n }\r\n}))(TableRow);\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n fontSize: '25px',\r\n color: '#f50057',\r\n fontWeight: 600,\r\n paddingLeft: 9\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 },\r\n sign: {\r\n border: '1px solid grey',\r\n height: 240\r\n }\r\n}));\r\n\r\nconst CheckButtons = {\r\n 1: PassButton,\r\n 2: FailButton,\r\n 3: NAButton,\r\n 5: MButton\r\n};\r\n\r\nconst DriverChecks = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const { displayName } = useLoginInfo();\r\n const classes = useStyles();\r\n const [state, setState] = useState({\r\n checklist: [],\r\n checkType: [],\r\n checkOptions: [],\r\n vehicleID: props.filterVehicleID,\r\n date: moment().format('DD-MM-YYYY'),\r\n vehicleDailyCheckCheckTypeID: 1,\r\n vehicleDailyCheckStatusId: null,\r\n vehicleDailyCheckDateExpire: null,\r\n vehicleDailyCheckDriverComment: '',\r\n vehicleDailyCheckDriverId: null,\r\n vehicleDailyCheckId: null,\r\n selectAll: false,\r\n signAvailable: AppStorage.getSignature() === 'absent' ? false : true,\r\n vehicleDailyCheckCheckerName: displayName,\r\n vehicleDailyCheckDriverName: displayName,\r\n desc: ''\r\n });\r\n\r\n const { userRoles } = useLoginInfo();\r\n const isDriver = userRoles.includes('driver');\r\n\r\n useEffect(async () => {\r\n if (props.filterVehicleID) {\r\n let res2 = await getVehicleById(props.filterVehicleID);\r\n if (res2.success) {\r\n const data = res2.data;\r\n setState((st) => ({\r\n ...st,\r\n regNumber: data.vehicleRegNumber,\r\n modelID: data.vehicleModel,\r\n makeID: data.vehicleMake\r\n }));\r\n }\r\n let res = await getvehiclecheckchecksById(props.filterVehicleID);\r\n if (res.success) {\r\n const reportedUser = res.data.reportedUser.map((x) => ({\r\n id: x.id,\r\n name: x.name\r\n }));\r\n const checkType = res.data.dailyCheckTypes.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n }));\r\n const checkQueList = res.data.driverDailyCheckCheckSections;\r\n const checkOptions = res.data.driverDailyCheckOptions;\r\n\r\n setState((st) => ({\r\n ...st,\r\n checklist: checkQueList,\r\n checkOptions: checkOptions,\r\n checkType: checkType,\r\n reportedUser: reportedUser\r\n }));\r\n }\r\n }\r\n pullDetails();\r\n }, []);\r\n\r\n const pullDetails = async () => {\r\n let res = await getTitleData(props.filterVehicleID);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n setState((st) => ({\r\n ...st,\r\n desc: data?.vehicleDescription\r\n // vorID: data?.vorVehicleID,\r\n // loader: false,\r\n // regNumber: data?.vehicleDescription.split('-')[0].trim()\r\n }));\r\n }\r\n };\r\n\r\n const handleButton = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n vehicleDailyCheckCheckTypeID: id\r\n }));\r\n };\r\n\r\n const signCanvas = useRef({});\r\n const clear = () => {\r\n if (state.imgtechniciansign) {\r\n setState((st) => ({\r\n ...st,\r\n imgtechniciansign: false,\r\n techniciansign: null\r\n }));\r\n } else {\r\n signCanvas.current.clear();\r\n }\r\n };\r\n\r\n const GetTechnicianSign = () => {\r\n let fields = state.fields;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n techniciansign: signCanvas.current.toDataURL(),\r\n fields: fields\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleInputs = (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 checkAll = (passId) => (e) => {\r\n const c = e.target.checked;\r\n setState((st) => {\r\n const newSt = { ...st };\r\n newSt.selectAll = true;\r\n newSt.checklist.map((x) => {\r\n x.vehicleDailyCheckResultsVehicleDailyCheckOptionId = c ? passId : undefined;\r\n });\r\n\r\n newSt.checklist = [...newSt.checklist];\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleButtonChange = (buttonVal, checkId) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === checkId);\r\n changedArray[objIndex].vehicleDailyCheckResultsVehicleDailyCheckOptionId = buttonVal;\r\n let val = changedArray.filter((c) => c.vehicleDailyCheckResultsVehicleDailyCheckOptionId !== 1).length === 0;\r\n setState((st) => ({ ...st, checklist: changedArray, selectAll: val }));\r\n };\r\n\r\n const handleNote = (id) => (e) => {\r\n let changedArray = [...state.checklist];\r\n let objIndex = state.checklist.findIndex((x) => x.dailyCheckSectionID === id);\r\n changedArray[objIndex][e.target.name] = e.target.value;\r\n setState((st) => ({ ...st, checklist: changedArray }));\r\n };\r\n\r\n const useDefaultSig = () => {\r\n setState((st) => ({ ...st, imgtechniciansign: true, techniciansign: AppStorage.getSignature() }));\r\n };\r\n\r\n const validations = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n // if (!state.vehicleDailyCheckReportedUserID) {\r\n // errors.vehicleDailyCheckReportedUserID = 'Reported User is required';\r\n // formIsValid = false;\r\n // }\r\n if (!state.vehicleDailyCheckMileage) {\r\n errors.vehicleDailyCheckMileage = `Odometer Reading  is required`;\r\n formIsValid = false;\r\n }\r\n if (!state.vehicleDailyCheckDriverName) {\r\n errors.vehicleDailyCheckDriverName = 'Driver Name is required';\r\n formIsValid = false;\r\n }\r\n if (!state.techniciansign) {\r\n errors.techniciansign = 'Driver/Checker Signature is required';\r\n formIsValid = false;\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 handleSubmit = async () => {\r\n let driverDailyCheckResultsVM = state.checklist.map((m) => ({\r\n vehicleDailyCheckSectionID: m.dailyCheckSectionID ? m.dailyCheckSectionID : null,\r\n vehicleDailyCheckResultsVehicleDailyCheckOptionId: m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n ? m.vehicleDailyCheckResultsVehicleDailyCheckOptionId\r\n : null,\r\n vehicleDailyCheckResultsNotes: m.vehicleDailyCheckResultsNotes ? m.vehicleDailyCheckResultsNotes : null,\r\n vehicleDailyCheckResultsAssesementNotes: m.vehicleDailyCheckResultsAssesementNotes ? m.vehicleDailyCheckResultsAssesementNotes : null,\r\n vehicleDailyCheckResultsDefectID: m.vehicleDailyCheckResultsDefectID ? m.vehicleDailyCheckResultsDefectID : null,\r\n vehicleDailyCheckResultsStatusId: m.vehicleDailyCheckResultsStatusId ? m.vehicleDailyCheckResultsStatusId : null\r\n }));\r\n if (validations()) {\r\n let formData = {\r\n vehicleID: state.vehicleID,\r\n vehicleDailyCheckId: state.vehicleDailyCheckId,\r\n vehicleDailyCheckStatusId: state.vehicleDailyCheckStatusId,\r\n vehicleDailyCheckCheckTypeID: state.vehicleDailyCheckCheckTypeID,\r\n vehicleDailyCheckDateStarted: state.date,\r\n vehicleDailyCheckDateExpire: state.vehicleDailyCheckDateExpire,\r\n vehicleDailyCheckReportedUserID: state.vehicleDailyCheckReportedUserID,\r\n vehicleDailyCheckDriverName: state.vehicleDailyCheckDriverName,\r\n vehicleDailyCheckDriverId: state.vehicleDailyCheckDriverId,\r\n vehicleDailyCheckMileage: state.vehicleDailyCheckMileage,\r\n vehicleDailyCheckDriverComment: state.vehicleDailyCheckDriverComment,\r\n vehicleDailyCheckCheckerName: state.vehicleDailyCheckCheckerName,\r\n driverDailyCheckResultsVM: driverDailyCheckResultsVM,\r\n vehicleDailyCheckCreatorSignature: state.techniciansign\r\n };\r\n let res = await postvehiclecheckchecksData(formData);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {props.fromPage != 'checkIn' && (\r\n \r\n {state.desc?.toUpperCase() || ''}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n {/*driver details...................*/}\r\n \r\n \r\n \r\n \r\n Defect Reported to * \r\n {state.errors?.vehicleDailyCheckReportedUserID} */}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Checker Name \r\n \r\n \r\n\r\n \r\n \r\n {state.errors?.techniciansign} \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n {state.desc ? (\r\n \r\n \r\n \r\n \r\n Check Type\r\n {state.checkType.map((m) => {\r\n return (\r\n handleButton(m.id)}\r\n >\r\n {m.name}\r\n \r\n );\r\n })}\r\n \r\n {state.date}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Driver/Checker Signature\r\n {state.signAvailable ? (\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n {state.imgtechniciansign ? (\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {\r\n GetTechnicianSign();\r\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 DriverChecks;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport EditDriverDailyChecks from '../../../Components/InternalUser/Controllers/Vehicles/DriverDailyChecks/editDriverChecks'; //'./editDriverChecks';\r\nimport { BreadCrumbs, formatters, EditButton } from '../../../Core/Controls';\r\nimport '../../../Components/commonStyle.scss';\r\nimport { DataGrid } from '../../../Core/Controls';\r\nimport { getChecksByQuery } from '../../../Core/Services/InternalUser/DailyChecksInternalUser/dailyChecksInternalUserService';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { getVechicleIDByRegNO } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport DriverChecks from '../../../Components/Driver/Maintenance/driverCheck';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CustomerDetails from '../Controllers/DetailsModal/customerDetails';\r\nimport DepotDetails from '../Controllers/DetailsModal/depotDetails';\r\nimport ReactDOM from 'react-dom';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 80 },\r\n { key: 'checked', name: 'Checked', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n { key: 'regNumber', name: 'Reg Number', width: 90 },\r\n { key: 'result', name: 'Result', width: 55 },\r\n // { key: 'checkType', name: 'Check Type' },\r\n { key: 'status', name: 'Status' },\r\n { key: 'driverName', name: 'Driver Name' },\r\n // { key: 'mileage', name: 'Mileage' },\r\n { key: 'checkerName', name: 'Checker Name' },\r\n { key: 'checkerComment', name: 'Checker Comment', width: 220 },\r\n { key: 'customer', name: 'Customer', width: 100 },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'displayName', name: 'Created By' }\r\n].map((x) => {\r\n return { ...x, resizable: true };\r\n});\r\n\r\nconst DailyCheckInternalUser = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n title: '',\r\n btnFlag: '',\r\n rows: [],\r\n editChecksShow: false,\r\n show: false,\r\n showAddCheck: false,\r\n filterVal: ''\r\n });\r\n\r\n let history = useHistory();\r\n\r\n useEffect(async () => {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.regNumber = state.filterVal;\r\n } else {\r\n newSt.show = false;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n pullApiData();\r\n }, [state.filterVal]);\r\n\r\n const editChecksScreen = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n editChecksShow: true,\r\n checksID: id.checkID\r\n }));\r\n };\r\n\r\n const editClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n editChecksShow: false,\r\n showAddCheck: false,\r\n show: false,\r\n filterVal: ''\r\n }));\r\n pullApiData();\r\n };\r\n\r\n const actionButton = (data, row) => {\r\n return (\r\n \r\n editChecksScreen(row)} toolTipTitle=\"Edit Check\" />\r\n
\r\n );\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n let customerNameCol = tempCols.find((element) => element.key === 'customer');\r\n let depotNameCol = tempCols.find((element) => element.key === 'depotName');\r\n let regNumberCol = tempCols.find((element) => element.key === 'regNumber');\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (customerNameCol) {\r\n customerNameCol.formatter = renderCustomerName;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const addCheck = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddCheck: true\r\n }));\r\n };\r\n\r\n let dataUrl = `DriverDailyCheck/VehicleDailyChecksList?Result=${props.resultCode}&Status=${props.statusCode}`;\r\n\r\n const crumbs = useMemo(() => {\r\n return [\r\n { name: 'Home', path: '/' },\r\n { name: 'Daily Checks', active: true },\r\n { name: props.fromPage, active: true, onClick: editClose }\r\n ];\r\n }, [props.fromPage]);\r\n\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n useEffect(async () => {}, []);\r\n\r\n const gridBtnTitle = state.show ? 'Add Checks' : '';\r\n\r\n return (\r\n \r\n {state.showAddCheck ? (\r\n
\r\n );\r\n};\r\n\r\nexport default DailyCheckInternalUser;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllEmailTemplates = async () => {\r\n let res = await getWithAuth(`EmailTemplates`);\r\n return res;\r\n};\r\n\r\nexport const getEmailTemplatesById = async (id) => {\r\n let res = await getWithAuth(`EmailTemplates/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postEmailTemplatesData = async (data) => {\r\n let res = await postWithAuth(`EmailTemplates`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryCheckbox, SecondaryButton, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { getEmailTemplatesById, postEmailTemplatesData } from '../../../../Core/Services/InternalUser/emailTemplateService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\n\r\nfunction EmailTemplatesModal(props) {\r\n const [state, setState] = useState({\r\n code: '',\r\n subject: '',\r\n body: '',\r\n mode: 'A',\r\n active: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.data) {\r\n const data = props.data;\r\n setState((state) => ({\r\n ...state,\r\n code: data.code,\r\n subject: data.subject,\r\n body: data.body,\r\n mode: 'U',\r\n active: data.active,\r\n code1: data.code\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { code } = state;\r\n let emptyStrigPattern = RegExp('^[A-Z]{0,2}[0-9]{0,2}$');\r\n // /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!code) {\r\n errors.code = `Email Template code is required.`;\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const emailTemplatesData = {\r\n emailTemplateCode: state.code,\r\n emailTemplateSubject: state.subject,\r\n emailTemplateBody: state.body,\r\n mode: state.mode,\r\n emailTemplateActive: state.active == 'Yes' ? true : false\r\n };\r\n let res = await postEmailTemplatesData(emailTemplatesData);\r\n if (res.success) {\r\n showToastSuccess('Email Templates Updated sucessfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n {props.role === 'DriveRole' ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={dataUrl}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={addCheck}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\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 submitHandler(row)} toolTipTitle=\"Edit Email Templates\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.data ? 'Update Email Templates' : 'Add Email Templates';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false, data: null }));\r\n res && pullEmailTemplates();\r\n };\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Email Template\"\r\n onBtnClick={() => submitHandler(null)}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"sm\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default EmailTemplates;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getCustomerMessages = async (value) => {\r\n let res = await getWithAuth(`CustomerMessages?CustomerID=${value}`);\r\n return res;\r\n};\r\n\r\nexport const getCustomerMessagesList = async () => {\r\n let res = await getWithAuth(`CustomerMessages/GetCustomerList`);\r\n return res;\r\n};\r\n\r\nexport const postMessage = async (data) => {\r\n let res = await postWithAuth(`CustomerMessages/SendMessage`, data);\r\n return res;\r\n};\r\n\r\n// public class CustomerMessagesVM\r\n// {\r\n// public long? CustomerID { get; set; }\r\n// public string Message { get; set; }\r\n// }\r\n\r\n// api/CustomerMessages?CustomerID={value}=> get\r\n\r\n// don't pass if customer is null\r\n\r\n// api/CustomerMessages/GetCustomerList=> get\r\n\r\n// api/CustomerMessages/SendMessage=> post with above object\r\n","import { Grid, Paper, Button, OutlinedInput, InputAdornment, IconButton } from '@material-ui/core';\r\nimport React, { useEffect, useState, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport List from '@material-ui/core/List';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { SimpleField, BreadCrumbs } from '../../../Core/Controls';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport moment from 'moment';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport { getCustomerMessages, getCustomerMessagesList, postMessage } from '../../../Core/Services/InternalUser/Message/message';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n paper: {\r\n width: '40%',\r\n marginLeft: 'auto',\r\n margin: 10,\r\n backgroundColor: '#fef0d2',\r\n padding: 20\r\n },\r\n outgoning: {\r\n width: '40%',\r\n margin: 10,\r\n backgroundColor: '#a7ebf3',\r\n padding: 20\r\n },\r\n empty: {\r\n textAlign: 'center',\r\n margin: 10,\r\n padding: 20\r\n },\r\n customScroll: {\r\n // height: '200px',\r\n overflow: 'auto',\r\n '&::-webkit-scrollbar': {\r\n width: '0.1em'\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: '#1976d2',\r\n opacity: 5,\r\n outline: '1px solid slategrey'\r\n }\r\n },\r\n activeBorder: {\r\n borderLeft: '7px solid #1976d2 '\r\n }\r\n}));\r\n\r\nconst borderStyle = {\r\n br: {\r\n borderRight: '5px solid #ffae00'\r\n },\r\n bl: {\r\n borderLeft: '5px solid #1976d2'\r\n }\r\n};\r\n\r\nconst customerList = {\r\n width: '100%',\r\n height: 'calc(100vh - 280px)'\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Message', active: true }\r\n];\r\n\r\nconst InternalUserChatting = () => {\r\n const { displayName } = useLoginInfo();\r\n const isCustomer = useLoginInfo().userRoles.includes('customer');\r\n const [state, setState] = useState({\r\n message: null,\r\n custList: [],\r\n customerID: '',\r\n customerName: null,\r\n messageList: [],\r\n sendMessage: false,\r\n showLoader: true,\r\n filterCustList: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getCustomerMessagesList();\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (!isCustomer) {\r\n newSt.custList = res.data.list;\r\n newSt.filterCustList = res.data.list;\r\n newSt.customerID = res.data.list[0]?.customerID;\r\n }\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n const AlwaysScrollToBottom = () => {\r\n const elementRef = useRef();\r\n useEffect(() => elementRef.current.scrollIntoView());\r\n return ;\r\n };\r\n\r\n const getMessages = async () => {\r\n let res = await getCustomerMessages(state.customerID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n messageList: res.data.list.sort((a, b) => (a.sdate > b.sdate ? 1 : b.sdate > a.sdate ? -1 : 0)),\r\n showLoader: false\r\n }));\r\n }\r\n };\r\n useEffect(async () => {\r\n getMessages();\r\n }, [state.customerID]);\r\n\r\n const onFilterChange = (e) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.filterCustList = st.custList.filter((m) => m.customer.toLowerCase().includes(e.target.value));\r\n return newSt;\r\n });\r\n };\r\n\r\n const getMessage = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n customerID: id,\r\n showLoader: true\r\n }));\r\n };\r\n\r\n function handleEnter(e) {\r\n if (e.key === 'Enter' || e.key === 'NumpadEnter') {\r\n submitMessage();\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 isValid = true;\r\n if (!state.message) {\r\n isValid = false;\r\n }\r\n if (!/[^\\s]/.test(state.message)) {\r\n isValid = false;\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 customerID: state.customerID,\r\n message: state.message\r\n };\r\n\r\n let res = await postMessage(data);\r\n if (res.success) {\r\n getMessages();\r\n setState((st) => ({\r\n ...st,\r\n message: ''\r\n }));\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 {!isCustomer && (\r\n \r\n \r\n Customers\r\n \r\n\r\n \r\n \r\n {state.showLoader ? (\r\n \r\n
\r\n ) : (\r\n - \r\n {state.filterCustList.map((item, index) => {\r\n const labelId = `checkbox-list-secondary-label-${item.customerID}`;\r\n return (\r\n
\r\n {state.messageList.length !== 0 ? (\r\n <>\r\n {state.messageList.map((m, i) => {\r\n let classText = m.name === displayName ? classes.outgoning : classes.paper;\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 {m.notes} \r\n
\r\n \r\n \r\n {m.name} @ {moment(m.sdate).format('MMM Do YYYY, h:mm a')}\r\n \r\n
\r\n\r\n {m.rdate && (\r\n \r\n seen {moment(m.rdate).format('MMM Do YYYY, h:mm a')}\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n There are no messages sent/received \r\n
\r\n \r\n {moment().format('MMM Do YYYY, h:mm a')}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n {step.show ? (\r\n closeModal(false)} overflow=\"auto\" maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n {step.statusShow ? (\r\n closeModal(false)} overflow=\"auto\" maxWidth=\"sm\">\r\n closeModal(true)} leadLostReasonsList={props.leadLostReasonsList} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n","import React, { useContext, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, BreadCrumbs, MandatoryField, SimpleField, Multiselect, SingleSelect } from '../../../Core/Controls';\r\nimport { EnquiriesProvider, EnquiriesScreenContext } from './EnquirieProvider';\r\nimport EnquiryStepper from './EnquiryStepper/EnquiryStepper';\r\nimport { Postcode } from '../../../Core/Controls';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Enquiries', path: '/Enquiries' },\r\n { name: 'Add New Enquiry', active: true }\r\n];\r\n\r\nconst AddEnquiries = (props) => {\r\n const { state, handleSubmit, inputChange, pullEnquiryByID, pullNotes, setVal, singleSelectChange, optionsState, tempOptions, typeOfVehicleChange } =\r\n useContext(EnquiriesScreenContext);\r\n const [data, setData] = useState({});\r\n\r\n const history = useHistory();\r\n\r\n const closeNoteModal = (res) => {\r\n setData((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullEnquiryByID();\r\n res && pullNotes();\r\n };\r\n return (\r\n \r\n \r\n {label.value}\r\n \r\n
\r\n \r\n {label.title}\r\n {!label.value && label.isBtn ? (\r\n {\r\n popUpHandler(label.title);\r\n }}\r\n disabled={activeStep === i ? false : true}\r\n >\r\n {label.isBtn}\r\n \r\n ) : null}\r\n
\r\n \r\n {!props.customerID ? \r\n \r\n \r\n \r\n \r\n \r\n Company Details\r\n \r\n
\r\n\r\n \r\n {state.errors.leadCompanyName} \r\n \r\n \r\n \r\n \r\n {state.errors.leadAddress1} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Main Contact\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Fleet Info\r\n \r\n
\r\n\r\n \r\n \r\n \r\n Type Of Business \r\n {state.errors.leadTypeOfBusiness} \r\n \r\n \r\n Type of Vehicles \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Additional Information\r\n \r\n
\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Lead Contact\r\n \r\n
\r\n\r\n \r\n \r\n \r\n Branch \r\n {state.errors.leadReferrerBranchID} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.leadID ? 'Update' : 'Add'} \r\n \r\n \r\n {\r\n // props.history.push(`Enquiries`);\r\n history.goBack();\r\n }}\r\n >\r\n Cancel\r\n \r\n \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\n handleEnquiriesUpdate(row?.leadID)} toolTipTitle=\"Edit Enquiries\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleEnquiriesUpdate = (params) => {\r\n history.push(`edit/${params}?${setEnquiry[props.id]}`);\r\n };\r\n\r\n const handleEnquiriesAdd = () => {\r\n history.push(`add/0`);\r\n };\r\n\r\n const closeAddDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullEnquiriesData();\r\n };\r\n\r\n let getUrl = `Leads?LeadStatusID=${props.id}`;\r\n\r\n return (\r\n \r\n {state.modalToggle ? (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n fileUploaderConfigName=\"Enquiries\"\r\n idFieldName=\"EnquiriesID\"\r\n btnTitle={'Add Enquiry'}\r\n onBtnClick={handleEnquiriesAdd}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default EnquiriesScreen;\r\n","import React, { useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { InputText, SecondaryButton } from '../../../Core/Controls';\r\nimport { addLeadNotes } from '../../../Core/Services/InternalUser/ControllerService/EnquiriService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\n\r\nconst AddEditLeadNotes = (props) => {\r\n const [state, setState] = useState({\r\n leadNoteID: props.leadNoteID || null,\r\n leadNoteLeadID: props.leadNoteLeadID || null,\r\n leadNoteDescription: ''\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const handleSubmit = async () => {\r\n const data = {\r\n leadNoteID: state.leadNoteID,\r\n leadNoteLeadID: state.leadNoteLeadID,\r\n leadNoteDescription: state.leadNoteDescription\r\n };\r\n let res = await addLeadNotes(data);\r\n if (res.success) {\r\n showToastSuccess('Note saved successfully');\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Enquiry Details\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Company Name \r\n {state.leadCompanyName || 'N\\\\A'} \r\n \r\n \r\n Address \r\n \r\n {formatters.addressFormatter(state.leadAddress1, state.leadAddress2, state.leadCity, state.leadPostcode)}\r\n \r\n \r\n \r\n \r\n \r\n Contact Name \r\n {state.leadMainContactName || 'N\\\\A'} \r\n \r\n \r\n Email \r\n {formatters.mailFormatter(state.leadMainContactEmail)} \r\n \r\n \r\n Phone Number \r\n {formatters.phoneNumberFormatter(state.leadMainContactPhone)} \r\n \r\n \r\n \r\n \r\n Fleet Size \r\n {state.leadFleetSize || 'N\\\\A'} \r\n \r\n \r\n Type Of Vehicles \r\n \r\n {state?.leadSelectedVehicleTypes?.map((m) => {\r\n return m?.leadVehicleTypeDescription + ' ';\r\n }) || 'N\\\\A'}\r\n \r\n \r\n \r\n \r\n \r\n Referrer Name \r\n {null || 'N\\\\A'} \r\n \r\n \r\n Referrer Email \r\n {formatters.mailFormatter(state.leadReferrerEmail)} \r\n \r\n \r\n Branch Name \r\n {state.branchName || 'N\\\\A'} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Enquiry Notes\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {data.show ? (\r\n closeNoteModal(false)} maxWidth=\"md\">\r\n closeNoteModal(true)} {...props} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nconst Screen = (props) => {\r\n return (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.customer}\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((e) => e.key === 'action');\r\n let agentNameCol = tempCols.find((element) => element.key === 'agentName');\r\n let customerNameCol = tempCols.find((element) => element.key === 'customer');\r\n let depotNameCol = tempCols.find((element) => element.key === 'depotName');\r\n let regNumberCol = tempCols.find((element) => element.key === 'regNumber');\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (customerNameCol) {\r\n customerNameCol.formatter = renderCustomerName;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false,\r\n showJobNotes: false\r\n }));\r\n };\r\n\r\n const handleNotesClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showJobNotes: false\r\n }));\r\n res && pullApiData();\r\n };\r\n let crumbs = getCrumbs(props.id);\r\n let getUrl = `VehicleJob/JobTracking?DefectTypeCode=${props.id || ''}&all=${state.filterFlag}`;\r\n\r\n const handleChange = (event) => {\r\n const { name, checked } = event.target;\r\n let tempSt = {};\r\n if (name === 'filterFlag') {\r\n tempSt = {\r\n filterFlag: checked\r\n };\r\n }\r\n\r\n setState((st) => ({ ...st, ...tempSt }));\r\n };\r\n\r\n return (\r\n \r\n \r\n Filter : Due \r\n \r\n \r\n All \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n />\r\n {state.open ? (\r\n handleNotesClose(false)}\r\n NoteID={state.selectedRowData.noteID}\r\n defectID={state.selectedRowData.defectID}\r\n noteRefsGuidID={state.selectedRowData.defectID}\r\n frompage=\"Defects\"\r\n onFormSubmit={handleNotesClose}\r\n titleModal={dialogTitle()}\r\n notesTitle=\"Defects\"\r\n agentName={state.selectedRowData.agentName}\r\n agentNameID={state.selectedRowData.jobServiceAgentID}\r\n />\r\n ) : null}\r\n {state.showJobNotes ? (\r\n handleNotesClose(false)}\r\n jobID={state.selectedRowData.jobID}\r\n onFormSubmit={handleNotesClose}\r\n />\r\n ) : null}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default JobTracking;\r\n","import { FormHelperText, Grid, InputLabel } from '@material-ui/core';\r\nimport moment from 'moment';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { DatePicker, SecondaryButton, SelectBox, SingleSelect } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport {\r\n getCustomersListDropdowns,\r\n getSchedulePlannerData,\r\n getSchedulePlannerDropdowns,\r\n getVehicleScreenDropdowns\r\n} from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\n\r\nconst startOfMonth = moment().startOf('month').format('YYYY-MM-DD');\r\nconst endOfMonth = moment().endOf('month').format('YYYY-MM-DD');\r\n\r\nconst SchedulePlannerScreen = () => {\r\n const [state, setState] = useState({\r\n customerList: [],\r\n depotWithCustList: [],\r\n endUserWithCustList: [],\r\n serviceAgentsWithCustList: [],\r\n pdfData: '',\r\n fromDate: startOfMonth,\r\n toDate: endOfMonth,\r\n depotsID: '',\r\n customerID: '',\r\n scheduleEndUserIDValue: '',\r\n scheduleDepotsIDValue: '',\r\n scheduleCustomerIDValue: '',\r\n scheduleServiceAgentIDValue: '',\r\n isDisabled: false,\r\n endUserWildCard: ''\r\n });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n let resCust = await getCustomersListDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: resCust.data.customer.table\r\n }));\r\n }, []);\r\n\r\n useEffect(async () => {\r\n let Depots = [];\r\n let endUsers = [];\r\n let serviceAgents = [];\r\n if (state.scheduleCustomerIDValue?.id) {\r\n let resCust = await getSchedulePlannerDropdowns(state.scheduleCustomerIDValue?.id);\r\n Depots = resCust.data.depots;\r\n endUsers = resCust.data.endUsers;\r\n serviceAgents = resCust.data.serviceAgents;\r\n setState((st) => ({\r\n ...st,\r\n depotWithCustList: Depots,\r\n scheduleDepotsIDValue: '',\r\n endUserWithCustList: endUsers,\r\n serviceAgentsWithCustList: serviceAgents\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n depotWithCustList: [],\r\n scheduleDepotsIDValue: '',\r\n endUserWithCustList: endUsers,\r\n scheduleEndUserIDValue: '',\r\n serviceAgentsWithCustList: serviceAgents,\r\n scheduleServiceAgentIDValue: ''\r\n }));\r\n }\r\n }, [state.scheduleCustomerIDValue?.id]);\r\n\r\n const downloadPdf = async (fileType) => {\r\n let res = await getSchedulePlannerData(\r\n state.fromDate,\r\n state.toDate,\r\n state.scheduleCustomerIDValue?.id || '',\r\n state.scheduleDepotsIDValue?.id || '',\r\n state.scheduleServiceAgentIDValue?.id || '',\r\n state.scheduleEndUserIDValue?.id || '',\r\n fileType,\r\n state.endUserWildCard\r\n );\r\n if (res) {\r\n const url = window.URL.createObjectURL(new Blob([res.data]));\r\n const link = document.getElementById('tempDownloadPDFLink') || document.createElement('a');\r\n link.id = 'tempDownloadPDFLink';\r\n link.href = url;\r\n link.setAttribute('download', `SchedulePlanner${moment().format('DD-MMM-YYYY HH:mm')}.${fileType}`);\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n return true;\r\n }\r\n };\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st, [name]: value };\r\n // newSt.isDisabled = newSt.customerID || false;\r\n return newSt;\r\n });\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (nm == 'scheduleEndUserIDValue' && typeof val != 'object') {\r\n newSt.endUserWildCard = val;\r\n } else {\r\n newSt[nm] = val;\r\n }\r\n newSt.isDisabled = newSt.scheduleCustomerIDValue || false;\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Customer\r\n \r\n \r\n \r\n Select Depots \r\n \r\n \r\n Service Agent \r\n \r\n \r\n End User \r\n \r\n \r\n From \r\n \r\n \r\n To \r\n \r\n \r\n \r\n \r\n \r\n downloadPdf('pdf')} disabled={!state.isDisabled}>\r\n Get Schedule planner PDF\r\n \r\n \r\n \r\n downloadPdf('xlsx')} disabled={!state.isDisabled}>\r\n Get Schedule planner Excel\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n Get Schedule planner\r\n \r\n \r\n */}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SchedulePlannerScreen;\r\n","export const PULLINSPECTIONAPIDATA = \"PULLINSPECTIONAPIDATA\";\r\nexport const HANDELCHECK = \"HANDELCHECK\";\r\nexport const HANDELCLOSE = \"HANDELCLOSE\";","import { PULLINSPECTIONAPIDATA, HANDELCHECK, HANDELCLOSE } from '../../../Action/actionName';\r\nexport const initState = {\r\n open: false,\r\n selectedRowData: {},\r\n isAdd: true,\r\n showBred: true,\r\n isReload: null\r\n};\r\nexport let reducer = function (state, action) {\r\n switch (action.type) {\r\n case PULLINSPECTIONAPIDATA:\r\n return { ...state, isReload: new Date() };\r\n case HANDELCHECK:\r\n return { ...state, showEditChecks: true, selectedRowData: action.payload, showBred: false };\r\n case HANDELCLOSE:\r\n return { ...state, showEditChecks: false, selectedRowData: {}, showBred: true };\r\n default:\r\n return {state };\r\n }\r\n};\r\n","import { useReducer, useMemo, useEffect } from 'react';\r\nimport { formatters, BreadCrumbs } from '../../../Core/Controls';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { reducer, initState } from './inspectionReducer';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { HANDELCLOSE, PULLINSPECTIONAPIDATA, HANDELCHECK } from '../../../Action/actionName';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport EditVehicleDailyChecks from '../Controllers/Vehicles/VehicleDailyChecks/editVehicleDailyCheck';\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 60, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 110 },\r\n { key: 'scheduleEventName', name: 'Event', width: 130 },\r\n { key: 'dueDateISOWeek', name: 'ISO Week', width: 90 },\r\n {\r\n key: 'scheduleDateDue',\r\n name: 'Due',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n },\r\n {\r\n key: 'bookingDate',\r\n name: 'Booked',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 110\r\n },\r\n { key: 'customer', name: 'Customer', width: 140 },\r\n { key: 'depot', name: 'Depot', width: 140 },\r\n {\r\n key: 'agent',\r\n name: 'Agent',\r\n width: 150\r\n }\r\n];\r\nexport default function VehicleInspection(props) {\r\n const [state, dispatch] = useReducer(reducer, initState);\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\r\n \r\n {\r\n dispatch({ type: HANDELCHECK, payload: row });\r\n }}\r\n toolTipTitle=\"Edit Inspection Check\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const getCrumbs = () => {\r\n let temp = {};\r\n let crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Inspections', active: true }\r\n ];\r\n if (props.status == '1') {\r\n temp = { name: 'Repair Required', active: true };\r\n } else if (props.status == '2') {\r\n temp = { name: ' Repair In Progress', active: true };\r\n } else if (props.status == '3') {\r\n temp = { name: 'Awaiting Sign Off', active: true };\r\n } else if (props.status == '4') {\r\n temp = { name: 'Signed Off', active: true };\r\n }\r\n crumbs.push(temp);\r\n return crumbs;\r\n };\r\n\r\n return (\r\n \r\n {state.showBred ? dispatch({ type: HANDELCLOSE })} frompage={true} />\r\n ) : (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={`VehicleInspection/GetInspections?status=${props.status}`}\r\n />\r\n )}\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport JobScreenModal from '../Controllers/JOBS/JobScreenModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport JobQueryModal from '../Controllers/JOBS/JobStatusBtn/JobQuery';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport ReactDOM from 'react-dom';\r\nimport DepotDetails from '../Controllers/DetailsModal/depotDetails';\r\nimport CustomerDetails from '../Controllers/DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../Controllers/DetailsModal/serviceAgent';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n // { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY, width: 115 },\r\n { key: 'orderNo', name: 'Order No', width: 100 },\r\n { key: 'agentName', name: 'Service Agent', width: 150 },\r\n { key: 'depotName', name: 'Depot' },\r\n {\r\n key: 'partsTotal',\r\n name: 'Parts',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 110\r\n },\r\n {\r\n key: 'labourTotal',\r\n name: 'Labour',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 110\r\n },\r\n {\r\n key: 'orderTotal',\r\n name: 'Total',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 110\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Deleted Records', active: true },\r\n { name: 'Deleted Jobs', active: true }\r\n];\r\n\r\nfunction DeletedJobs(props) {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const history = useHistory();\r\n let getUrl = `VehicleJob/DeletedJob`;\r\n const [state, setState] = useState({\r\n jobList: [],\r\n loader: true,\r\n open: false\r\n });\r\n useEffect(async () => {\r\n pullJobList();\r\n }, []);\r\n\r\n const pullJobList = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const jobHandler = (params) => {\r\n setState((state) => ({ ...state, open: true }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${val?.vehicleID}`,\r\n search: '',\r\n state: 'jobs'\r\n });\r\n };\r\n\r\n const handleShowQueries = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: true, jobID: val?.jobID }));\r\n };\r\n\r\n const closeTheDialog = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: false, jobID: '' }));\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n handleShowQueries(row)}\r\n />\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNo}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderDepotName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showDepotModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.depotName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderCustomerName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showCustomerModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.cn}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n let agentNameCol = newColumn.find((element) => element.key === 'agentName');\r\n let depotNameCol = newColumn.find((element) => element.key === 'depotName');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n if (depotNameCol) {\r\n depotNameCol.formatter = renderDepotName;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = renderAgentName;\r\n }\r\n newColumn.splice(3, 0, { key: 'RegNo', name: 'Reg Number', width: 110, formatter: renderRegNumberEdit });\r\n\r\n newColumn.splice(5, 0, { key: 'cn', name: 'Customer', formatter: renderCustomerName });\r\n\r\n return newColumn;\r\n }, []);\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullJobList();\r\n };\r\n const gridBtnTitle = 'Add Job';\r\n return (\r\n \r\n {state.open && (\r\n closeModal(false)} title=\"Add Job\" maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n )}\r\n closeTheDialog(false)}>\r\n \r\n )}\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n />\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showCustomerModal ? (\r\n \r\n \r\n ) : null}\r\n {state.showDepotModal ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default DeletedJobs;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport AddEditDefectModal from '../Maintenance/Defects/addEditDefectScreen';\r\nimport { getVechicleIDByRegNO } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport { BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DefectEditDetails from '../Maintenance/Defects/DefectEditDetails';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CustomerDetails from '../Controllers/DetailsModal/customerDetails';\r\nimport ServiceAgentDetails from '../Controllers/DetailsModal/serviceAgent';\r\nimport ReactDOM from 'react-dom';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Deleted Records', active: true },\r\n { name: 'Deleted Defects', path: '/', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'defecteNo',\r\n name: 'Defect No',\r\n headerRenderer: formatters.ColumnHeaderAlignLeft,\r\n formatter: formatters.ColumnTextAlignLeft,\r\n width: '6%'\r\n },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: '7%'\r\n },\r\n\r\n { key: 'description', name: 'Details' },\r\n { key: 'contactName', name: 'Reported By', width: '8%' },\r\n { key: 'status', name: 'Status', width: '15%' }\r\n];\r\n\r\nconst DeletedDefect = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n rowVehicleID: null,\r\n defectID: null,\r\n List: [],\r\n showLoader: true,\r\n fromPage: 'Defects',\r\n show: false,\r\n filterVal: ''\r\n });\r\n let history = useHistory();\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n } else {\r\n newSt.show = false;\r\n }\r\n\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n }\r\n if (props.frompage === 'Vehicles') {\r\n setState((st) => ({\r\n ...st,\r\n fromPage: props.frompage\r\n }));\r\n }\r\n pullDefects();\r\n }, [props.VehicleID, state.filterVal]);\r\n\r\n const pullDefects = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.defectVehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.regNo}\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 tempCols.splice(!props.isCust ? 1 : 2, 0, { key: 'regNo', name: 'Reg Number', width: '8%', formatter: renderRegNumberEdit });\r\n return tempCols;\r\n }, []);\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCrumbs = [...baseCrumbs];\r\n if (state.modalEditDetail) {\r\n tempCrumbs.splice(3, 0, { name: `Defect Number ${state.defecteNo} [${formatters.DateTimeFormatter(state.defectDate)}]`, active: true });\r\n }\r\n return tempCrumbs;\r\n }, [state.modalToggle]);\r\n\r\n const gridBtnTitle = state.show || props.VehicleID ? 'Add Defect' : null;\r\n const isPage = !!(props.VehicleID || props.customerID);\r\n return (\r\n \r\n <>\r\n {!isPage && (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={'VehicleDefects/DeletedDefect'}\r\n btnTitle={gridBtnTitle}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"DefectScreen\"\r\n isReload={state.isReload}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DeletedDefect;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getCompanyDetails = async () => {\r\n let res = await getWithAuth(`companys`);\r\n return res;\r\n};\r\n\r\nexport const postCompanyDetails = async (data) => {\r\n let res = await postWithAuth(`companys`, data);\r\n return res;\r\n};\r\n","import { createContext, useCallback, useEffect, useState } from 'react';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { getCompanyDetails, postCompanyDetails } from '../../../Core/Services/InternalUser/companyService';\r\n\r\nexport const CompanyScreenContext = createContext();\r\n\r\nconst countryList = [\r\n { id: 'GB', name: 'GB' },\r\n { id: 'IE', name: 'IE' }\r\n];\r\n\r\nexport const CompanyProvider = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n errors: {},\r\n companyID: null,\r\n companyName: '',\r\n companyRegistrationNumber: '',\r\n companyVATNumber: '',\r\n companyLogo: '',\r\n companyEmail: '',\r\n companyPhone: '',\r\n companyWebsite: '',\r\n companyAddress1: '',\r\n companyAddress2: '',\r\n companyCity: '',\r\n companyCounty: '',\r\n companyPostCode: '',\r\n companyCountryCode: 'GB',\r\n companyRegisteredAddressSameAsCompanyAddress: false,\r\n companyRegisteredAddress1: '',\r\n companyRegisteredAddress2: '',\r\n companyRegisteredCity: '',\r\n companyRegisteredPostCode: '',\r\n companyRegisteredCounty: '',\r\n companyBankAccountName: '',\r\n companyRegisteredCountryCode: 'GB',\r\n companyBankSortCode: '',\r\n companyBankAccountNumber: '',\r\n companyBankName: ''\r\n });\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n useEffect(async () => {\r\n pullCustomerdata();\r\n }, []);\r\n\r\n const pullCustomerdata = async () => {\r\n let res = await getCompanyDetails();\r\n\r\n if (res.data?.list) {\r\n const data = res.data?.list[0];\r\n setState((st) => ({\r\n ...st,\r\n companyID: data.companyID,\r\n companyName: data.companyName,\r\n companyRegistrationNumber: data.companyRegistrationNumber,\r\n companyVATNumber: data.companyVATNumber,\r\n companyLogo: data.companyLogo,\r\n companyEmail: data.companyEmail,\r\n companyPhone: data.companyPhone,\r\n companyWebsite: data.companyWebsite,\r\n companyAddress1: data.companyAddress1,\r\n companyAddress2: data.companyAddress2,\r\n companyCity: data.companyCity,\r\n companyCounty: data.companyCounty,\r\n companyPostCode: data.companyPostCode,\r\n companyCountryCode: data.companyCountryCode,\r\n companyRegisteredAddressSameAsCompanyAddress: data.companyRegisteredAddressSameAsCompanyAddress,\r\n companyRegisteredAddress1: data.companyRegisteredAddress1,\r\n companyRegisteredAddress2: data.companyRegisteredAddress2,\r\n companyRegisteredCity: data.companyRegisteredCity,\r\n companyRegisteredPostCode: data.companyRegisteredPostCode,\r\n companyRegisteredCounty: data.companyRegisteredCounty,\r\n companyBankAccountName: data.companyBankAccountName,\r\n companyRegisteredCountryCode: data.companyRegisteredCountryCode,\r\n companyBankSortCode: data.companyBankSortCode,\r\n companyBankAccountNumber: data.companyBankAccountNumber,\r\n companyBankName: data.companyBankName\r\n }));\r\n }\r\n };\r\n\r\n const setVal = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n companyAddress1: s.addressLine1,\r\n companyAddress2: s.addressLine2,\r\n companyCity: s.town,\r\n companyCounty: s.county,\r\n companyPostCode: s.postCode\r\n }));\r\n };\r\n const setValRegistered = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n companyRegisteredAddress1: s.addressLine1,\r\n companyRegisteredAddress2: s.addressLine2,\r\n companyRegisteredCity: s.town,\r\n companyRegisteredCounty: s.county,\r\n companyRegisteredPostCode: s.postCode\r\n }));\r\n };\r\n const inputChange = useCallback((e) => {\r\n const { name, value, type } = e.target;\r\n let newSt = {};\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n newSt[name] = true;\r\n newSt.companyRegisteredAddress1 = '';\r\n newSt.companyRegisteredAddress2 = '';\r\n newSt.companyRegisteredCity = '';\r\n newSt.companyRegisteredCounty = '';\r\n newSt.companyRegisteredPostCode = '';\r\n newSt.companyRegisteredCountryCode = '';\r\n } else if (value === 'false' && type.toLowerCase() === 'radio') {\r\n newSt[name] = false;\r\n } else {\r\n newSt[name] = value;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, []);\r\n\r\n const clearImage = () => {\r\n if (state.companyLogo) {\r\n setState((st) => ({ ...st, companyLogo: null }));\r\n }\r\n };\r\n\r\n let imagehandler = (event) => {\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n const { result } = e.target;\r\n setState((st) => ({ ...st, companyLogo: result }));\r\n };\r\n reader.readAsDataURL(event.target.files[0]);\r\n };\r\n\r\n const validations = () => {\r\n const { companyName, companyEmail, companyRegistrationNumber, companyPhone, companyWebsite } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n let urlRegex = /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/;\r\n if (!/[^\\s]/.test(companyName)) {\r\n errors.companyName = 'Company Name is required';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(companyEmail)) {\r\n errors.companyEmail = 'Customer Email is required';\r\n formIsValid = false;\r\n }\r\n let phoneReg = /^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$/;\r\n if (companyPhone && !phoneReg.test(companyPhone)) {\r\n errors.companyPhone = 'Invalid Phone Number';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(companyRegistrationNumber)) {\r\n errors.companyRegistrationNumber = 'Registration Number is required';\r\n formIsValid = false;\r\n }\r\n if (companyWebsite && !urlRegex.test(companyWebsite)) {\r\n errors.companyWebsite = 'Invalid Url';\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 setBtnLoader(true);\r\n let data = {\r\n companyID: state.companyID,\r\n companyName: state.companyName,\r\n companyRegistrationNumber: state.companyRegistrationNumber,\r\n companyVATNumber: state.companyVATNumber,\r\n companyLogo: state.companyLogo,\r\n companyEmail: state.companyEmail,\r\n companyPhone: state.companyPhone,\r\n companyWebsite: state.companyWebsite,\r\n companyAddress1: state.companyAddress1,\r\n companyAddress2: state.companyAddress2,\r\n companyCity: state.companyCity,\r\n companyCounty: state.companyCounty,\r\n companyPostCode: state.companyPostCode,\r\n companyCountryCode: state.companyCountryCode,\r\n companyRegisteredAddressSameAsCompanyAddress: state.companyRegisteredAddressSameAsCompanyAddress,\r\n companyRegisteredAddress1: state.companyRegisteredAddress1,\r\n companyRegisteredAddress2: state.companyRegisteredAddress2,\r\n companyRegisteredCity: state.companyRegisteredCity,\r\n companyRegisteredPostCode: state.companyRegisteredPostCode,\r\n companyRegisteredCounty: state.companyRegisteredCounty,\r\n companyBankAccountName: state.companyBankAccountName,\r\n companyRegisteredCountryCode: state.companyRegisteredCountryCode,\r\n companyBankSortCode: state.companyBankSortCode,\r\n companyBankAccountNumber: state.companyBankAccountNumber,\r\n companyBankName: state.companyBankName\r\n };\r\n let res = await postCompanyDetails(data);\r\n if (res.success) {\r\n showToastSuccess('Data saved successfully');\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Company Details\r\n \r\n
\r\n\r\n \r\n {state.errors.companyName} \r\n \r\n \r\n {state.errors.companyRegistrationNumber} \r\n \r\n \r\n \r\n \r\n Country Code \r\n {state.errors.countryCode} \r\n \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.companyPhone} \r\n \r\n \r\n {state.errors.companyEmail} \r\n \r\n \r\n {state.errors.companyWebsite} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Registered Address\r\n \r\n
\r\n\r\n \r\n \r\n \r\n Country Code \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Bank Details\r\n \r\n
\r\n\r\n \r\n {state.errors.companyBankName} \r\n \r\n \r\n \r\n \r\n {state.errors.companyBankSortCode} \r\n \r\n \r\n {state.errors.companyBankAccountNumber} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Company Logo\r\n \r\n
\r\n\r\n \r\n \r\n Company Logo\r\n \r\n {state.companyLogo && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \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.companyID ? 'Save' : 'Add'}\r\n \r\n \r\n }\r\n \r\n history.push('/')}>\r\n Cancel\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst CompanyDetail = (props) => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
closeVorModal(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const classes = useStyles();\r\n\r\n const handleReports = (val) => {\r\n setState((st) => ({ ...st, top5Days: val }));\r\n };\r\n\r\n const handleBarChart = (val) => {\r\n setState((st) => ({ ...st, setBarVal: val }));\r\n };\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n vehicleCategoryIDValue: null,\r\n makeIDValue: null\r\n });\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n // let getURl = () => {\r\n // return `VORVehicles?startDate=${state.startDate}&endDate=${state.endDate}&CustomerId=${tempOptions.customerIDValue?.id || ''}`;\r\n // };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...baseColumns];\r\n let actionCol = newColumn.find((item) => item.key === 'vehicleRegNumber');\r\n if (actionCol) {\r\n actionCol.formatter = renderRegNumberEdit;\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const title = state.navigationMenuID ? 'Update Menu Items' : 'Add Menu Items';\r\n\r\n useEffect(async () => {\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n depotsList: res.data.depots,\r\n makeList: res.data.makes || [],\r\n vehicleCategoryListdropdown: res.data.vehicleCategories || []\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID && state.customerList?.length > 0) {\r\n newSt.customerIDValue = state.customerList.find(({ id }) => id === +state.customerID);\r\n } else {\r\n newSt.customerIDValue = state.customerList[0];\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.customerID, state.customerList]);\r\n\r\n useEffect(() => {\r\n let vehicleCategoryList = [];\r\n let vehicleDepotsList = [];\r\n let reasonList = [];\r\n let FaultTypes = [];\r\n switch (state.setBarVal) {\r\n case 1:\r\n vehicleCategoryList =\r\n state.type &&\r\n state.type.map((m) => ({\r\n ...m,\r\n name: m.vorType,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n vehicleDepotsList =\r\n state.depot &&\r\n state.depot.map((m) => ({\r\n ...m,\r\n name: m.depot,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n reasonList =\r\n state.reason &&\r\n state.reason.map((m) => ({\r\n ...m,\r\n name: m.vorTypeDetailDescription,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n FaultTypes =\r\n state.faultType &&\r\n state.faultType.map((m) => ({\r\n ...m,\r\n name: m.faultTypeDescription,\r\n ['Total Days']: m.totalDays,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n break;\r\n case 2:\r\n vehicleCategoryList =\r\n state.type &&\r\n state.type.map((m) => ({\r\n ...m,\r\n name: m.vorType,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n vehicleDepotsList =\r\n state.depot &&\r\n state.depot.map((m) => ({\r\n ...m,\r\n name: m.depot,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n reasonList =\r\n state.reason &&\r\n state.reason.map((m) => ({\r\n ...m,\r\n name: m.vorTypeDetailDescription,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n FaultTypes =\r\n state.faultType &&\r\n state.faultType.map((m) => ({\r\n ...m,\r\n name: m.faultTypeDescription,\r\n ['Total Days']: m.total,\r\n customer: tempOptions.customerIDValue.id\r\n }));\r\n break;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n vehicleCategoryList: vehicleCategoryList,\r\n vehicleDepotsList: vehicleDepotsList,\r\n reasonList: reasonList,\r\n FaultTypes: FaultTypes\r\n }));\r\n }, [state.setBarVal, state.TypeIsReload]);\r\n\r\n //Top 5 Days/occurance handler\r\n\r\n useEffect(() => {\r\n let top5Reg = [];\r\n let top5Makes = [];\r\n let top5models = [];\r\n switch (state.top5Days) {\r\n case 1:\r\n top5Reg = state.byReg && state.byReg.map((m) => ({ ...m, val: m.reg, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n top5Makes = state.make && state.make?.map((m) => ({ ...m, val: m.make, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n top5models = state.model && state.model?.map((m) => ({ ...m, val: m.model, sum: m.totalDays, customer: tempOptions.customerIDValue.id }));\r\n break;\r\n\r\n case 2:\r\n top5Reg = state.byReg && state.byReg.map((m) => ({ ...m, val: m.reg, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n top5Makes = state.make && state.make?.map((m) => ({ ...m, val: m.make, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n top5models = state.model && state.model?.map((m) => ({ ...m, val: m.model, sum: m.total, customer: tempOptions.customerIDValue.id }));\r\n\r\n break;\r\n }\r\n setState((st) => ({ ...st, top5Reg: top5Reg, top5Makes: top5Makes, top5models: top5models }));\r\n }, [state.top5Days, state.TypeIsReload]);\r\n\r\n useEffect(async () => {\r\n if (state.customerList?.length > 0) {\r\n let res = await getVORVehiclesByType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n let newSt = {};\r\n let data = res?.data;\r\n if (res.success) {\r\n newSt.TypeIsReload = new Date();\r\n newSt.byReg = data.byReg;\r\n newSt.depot = data.depot;\r\n newSt.faultType = data.faultType;\r\n newSt.make = data.make;\r\n newSt.model = data.model;\r\n newSt.reason = data.reason;\r\n newSt.type = data.type;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt,\r\n url: getURl()\r\n }));\r\n }\r\n }, [state.startDate, state.endDate, tempOptions.customerIDValue, tempOptions.makeIDValue, tempOptions.vehicleCategoryIDValue]);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n if (val) {\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setTempOptions((st) => ({ ...st, [nm]: null }));\r\n }\r\n };\r\n useEffect(() => {\r\n const uniquescheduleEventNames = [...new Set(state.VorList.map((item) => item.depotName))];\r\n let Depot = uniquescheduleEventNames.map((m) => {\r\n let a = state.VorList.filter(function (val) {\r\n return val.depotName === m;\r\n }).length;\r\n return { name: m || 'No Depot Found', ['Total Days']: a, customer: tempOptions.customerIDValue.name };\r\n });\r\n let sumOfAllDepot = 0;\r\n let totalCount = [...Depot].forEach(function (item) {\r\n sumOfAllDepot += item.total;\r\n });\r\n setState((st) => ({ ...st, NumberOfDepot: Depot, sumOfAllDepot: sumOfAllDepot }));\r\n }, [state.VorList]);\r\n\r\n const convertData = (res) => {\r\n setState((st) => ({ ...st, VorList: res.data.list }));\r\n return {\r\n records: res.data.list,\r\n total: res.data.total\r\n };\r\n };\r\n const handleStatus = (val) => {\r\n setState((st) => ({ ...st, setTop5ID: val }));\r\n };\r\n\r\n const handleBar = (val) => {\r\n setState((st) => ({ ...st, setBarData: val }));\r\n };\r\n\r\n let settop5List = {\r\n 1: state.top5Reg,\r\n 2: state.top5models,\r\n 3: state.top5Makes,\r\n 4: state.vehicleCategoryList,\r\n 5: state.vehicleDepotsList,\r\n 6: state.reasonList,\r\n 7: state.FaultTypes\r\n };\r\n let label = {\r\n 1: 'Vehicles',\r\n 2: 'Models',\r\n 3: 'Makes',\r\n 4: 'By Category',\r\n 5: 'By Depot',\r\n 6: 'By Reason',\r\n 7: 'By Fault Type'\r\n };\r\n\r\n const closeVorModal = (val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.show = !st.show;\r\n newSt.vorVehicleID = val.vorVehicleID || '';\r\n newSt.VehicleID = val.vorVehicleVehicleID || '';\r\n newSt.regNo = val.vehicleRegNumber;\r\n return newSt;\r\n });\r\n };\r\n let getURl = () => {\r\n return `VORVehicles?startDate=${state.startDate}&endDate=${state.endDate}&vehicleCategoryID=${tempOptions.vehicleCategoryIDValue?.id || ''}&makeID=${\r\n tempOptions.makeIDValue?.id || ''\r\n }`;\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n Start Date \r\n \r\n \r\n End Date \r\n \r\n \r\n \r\n Vehicle Category\r\n \r\n {state.errors.vehicleCategoryID} \r\n \r\n \r\n Make \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \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.url && (\r\n convertData(res)}\r\n columns={columns}\r\n getUrl={state.url}\r\n isReload={state.isReload}\r\n showDownload={true}\r\n downloadBtnName=\"Download xlsx\"\r\n downloadCustomUrl={() =>\r\n GetVORReportingExcelFile({\r\n fromDate: state.startDate,\r\n toDate: state.endDate,\r\n customerID: tempOptions.customerIDValue?.id || '',\r\n vehicleCategoryID: tempOptions.vehicleCategoryIDValue?.id || '',\r\n makeID: tempOptions.makeIDValue?.id || '',\r\n fileExt: 'xlsx'\r\n })\r\n }\r\n />\r\n )}\r\n \r\n \r\n {state.show ? (\r\n // \r\n \r\n ) : null}\r\n
\r\n // \r\n Top 5 {label[state.setTop5ID]} \r\n \r\n handleReports(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Days\r\n \r\n handleReports(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Occurance\r\n \r\n \r\n
\r\n \r\n \r\n handleStatus(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Vehicles\r\n \r\n handleStatus(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Models\r\n \r\n handleStatus(3)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n Makes\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n {label[state.setBarData]}\r\n \r\n \r\n handleBarChart(1)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Days\r\n \r\n handleBarChart(2)}\r\n style={{ fontSize: 10 }}\r\n >\r\n Occurance\r\n \r\n \r\n
\r\n \r\n \r\n handleBar(4)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Category\r\n \r\n handleBar(5)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Depot\r\n \r\n handleBar(6)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Reason\r\n \r\n handleBar(7)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Fault Type\r\n \r\n \r\n
\r\n \r\n // \r\n // \r\n // \r\n // Start Date \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.url && (\r\n // convertData(res)}\r\n // columns={columns}\r\n // getUrl={state.url}\r\n // isReload={state.isReload}\r\n // showDownload={true}\r\n // downloadBtnName=\"VOR\"\r\n // />\r\n // )}\r\n // \r\n // \r\n //
\r\n );\r\n}\r\n\r\nexport default CustomerVORReporting;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../Basic/HttpService';\r\nimport { memoize } from 'lodash';\r\n\r\nexport const getUserPermissionsFromID = async (id) => {\r\n let res = await getWithAuth(`/api/userpermissions?userid=${id}`);\r\n return res;\r\n};\r\nexport const setUserPermissions = async (data) => {\r\n let res = await postWithAuth(`/api/userpermissions`, data);\r\n return res;\r\n};\r\n\r\nexport const getAllUsers = async () => {\r\n let res = await getWithAuth('/users');\r\n return res;\r\n};\r\n\r\nexport const getUserById = async (Id) => {\r\n let res = await getWithAuth(`/users/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const getAssignPermission = async (id) => {\r\n let res = await getWithAuth(`/GetPermissionMenus/${id}`);\r\n return res;\r\n};\r\n\r\nexport const savePermissionMenu = async (userId, data) => {\r\n let res = await postWithAuth(`/SavePermissionsMenus`, {\r\n PermissionMenuIds: data,\r\n UserId: userId\r\n });\r\n return res;\r\n};\r\n\r\nconst checkArray = (data) => {\r\n let x = typeof data;\r\n return x === 'number' ? [data] : data;\r\n};\r\n\r\nexport const Adduser = async (data) => {\r\n let res = await postWithAuth('/register', {\r\n displayName: data.name,\r\n userInitials: data.userInitials,\r\n password: data.password,\r\n confirmPassword: data.confirm,\r\n phoneNo: data.phone,\r\n isActive: data.isActive,\r\n isLocked: data.isLocked,\r\n email: data.email,\r\n userRole: data.userType,\r\n branchIds: data.branchIds,\r\n isAllBranch: data.allbranch,\r\n customerIds: checkArray(data.customerIds), //data.customerIds === [] ? [] : [data.customerIds],\r\n moduleIds: data.moduleIds,\r\n depotsIds: checkArray(data.depotIds),\r\n isReadOnly: data.isReadOnly,\r\n serviceAgentIds: data.serviceAgentId,\r\n driverId: data.driverId\r\n });\r\n return res;\r\n};\r\n\r\nexport const UpdateUser = async (data) => {\r\n let res = await putWithAuth(`/users/${data.userID}`, {\r\n ...(data.isUpdateEmail && { password: data.password }),\r\n displayName: data.name,\r\n userInitials: data.userInitials,\r\n phoneNo: data.phone,\r\n isActive: data.isActive,\r\n isLocked: data.isLocked,\r\n email: data.email,\r\n userRole: data.userType,\r\n branchIds: data.branchIds,\r\n isAllBranch: data.allbranch,\r\n customerIds: checkArray(data.customerIds), //data.customerIds ? [data.customerIds] : [],\r\n moduleIds: data.moduleIds,\r\n depotsIds: checkArray(data.depotIds),\r\n isalldepots: data.alldepots,\r\n isReadOnly: data.isReadOnly,\r\n serviceAgentIds: data.serviceAgentId,\r\n driverId: data.driverId\r\n });\r\n return res;\r\n};\r\n\r\nexport const getUserDropdown = memoize(async () => {\r\n let res = await getWithAuth('/usersScreenDropdowns');\r\n return res;\r\n});\r\n\r\nexport const getDriverBasedOnCustndDepot = async (cust, depot) => {\r\n let res = await getWithAuth(`Drivers/ListBycustomerNDepot?CustomerID=${cust}&DepotID=${depot}`);\r\n return res;\r\n};\r\n\r\nexport const ResetPassByAdmin = async (userId, newpassword, confirm) => {\r\n let res = await postWithAuth(`/overwritePassword/${userId}`, {\r\n newPassword: newpassword,\r\n confirmPassword: confirm\r\n });\r\n return res;\r\n};\r\n","import React, { createContext, useEffect, useState } from 'react';\r\nimport { Adduser, UpdateUser, getUserById, getDriverBasedOnCustndDepot } from '../../../Core/Services/Admin/userService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { validatePassword, emailValidation, singleEmailValidation } from '../../../Core/Basic/StaticService';\r\nimport { getUserDropdown } from '../../../Core/Services/Admin/userService';\r\n\r\nexport const UserScreenContext = createContext();\r\n\r\nexport const UserProvider = (props) => {\r\n const { showToastSuccess, showToastError, showToastWarning } = useToast();\r\n\r\n const [state, setState] = useState({\r\n userType: '',\r\n email: '',\r\n name: '',\r\n userInitials: '',\r\n phone: '',\r\n password: '',\r\n confirm: '',\r\n allbranch: false,\r\n alldepots: false,\r\n isActive: true,\r\n isLocked: false,\r\n branchIds: [],\r\n moduleIds: [],\r\n customerIds: [],\r\n depotIds: [],\r\n matchDepoCustId: [],\r\n serviceAgentId: [],\r\n rows: [],\r\n errors: {},\r\n isUpdateEmail: false,\r\n userID: '',\r\n isReadOnly: false,\r\n driverList: [],\r\n driverId: null\r\n });\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const handleValidation = () => {\r\n let errors = {};\r\n let formIsValid = true;\r\n if (!/[^\\s]/.test(state.name)) {\r\n formIsValid = false;\r\n errors['name'] = 'User name cannot be empty';\r\n }\r\n if (!/[^\\s]/.test(state.userInitials)) {\r\n formIsValid = false;\r\n errors['userInitials'] = 'User initials cannot be empty';\r\n }\r\n if (!singleEmailValidation(state.email)) {\r\n formIsValid = false;\r\n errors['email'] = 'Please Enter Valid Email';\r\n }\r\n if (!/[^\\s]/.test(state.password)) {\r\n formIsValid = false;\r\n errors['password'] = 'Password field cannot be empty';\r\n }\r\n if (!/[^\\s]/.test(state.confirm)) {\r\n formIsValid = false;\r\n errors['confirm'] = 'Confirm Password field cannot be empty';\r\n }\r\n if (!state.userType) {\r\n formIsValid = false;\r\n errors['userType'] = 'User Type 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 updateValidation = () => {\r\n let errors = {};\r\n let formIsValid = true;\r\n if (!/[^\\s]/.test(state.name)) {\r\n formIsValid = false;\r\n errors['name'] = 'User name cannot be empty';\r\n }\r\n if (!/[^\\s]/.test(state.userInitials)) {\r\n formIsValid = false;\r\n errors['userInitials'] = 'User initials cannot be empty';\r\n }\r\n if (!singleEmailValidation(state.email)) {\r\n formIsValid = false;\r\n errors['email'] = 'Please Enter Valid Email';\r\n }\r\n if (!state.userType) {\r\n formIsValid = false;\r\n errors['userType'] = 'User Type cannot be empty';\r\n }\r\n if (state.isUpdateEmail && !/[^\\s]/.test(state.password)) {\r\n formIsValid = false;\r\n errors['password'] = 'Password field cannot be empty';\r\n }\r\n if (state.isUpdateEmail && !/[^\\s]/.test(state.confirm)) {\r\n formIsValid = false;\r\n errors['confirm'] = 'Confirm Password field 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\r\n const [masterData, setMasterData] = useState({\r\n branchs: [],\r\n modules: [],\r\n customer: [],\r\n depot: [],\r\n serviceAgentList: []\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n branchs: [],\r\n modules: [],\r\n depots: [],\r\n serviceAgent: []\r\n });\r\n\r\n const updateState = (update) => {\r\n setState((st) => ({ ...st, ...update }));\r\n };\r\n\r\n const onSelectCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n if (checked) {\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n if (name === 'allbranch') {\r\n nst.branch = [...masterData.branchs.map((c) => c.id)];\r\n } else if (name === 'alldepots') {\r\n nst.depotIds = [...state.matchDepoCustId.map((c) => c.id)];\r\n } else {\r\n nst[name] = checked;\r\n }\r\n return nst;\r\n });\r\n } else {\r\n setState((st) => {\r\n const nst = { ...st, [name]: checked };\r\n return nst;\r\n });\r\n }\r\n };\r\n\r\n const Updateuser = async (e) => {\r\n if (updateValidation()) {\r\n if (state.isUpdateEmail && state.password !== state.confirm) {\r\n showToastWarning('Password and Confirm Password should match.');\r\n } else {\r\n setBtnLoader(true);\r\n let res = await UpdateUser(state);\r\n if (res.success) {\r\n showToastSuccess('User updated successfully');\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n if (handleValidation()) {\r\n if (!validatePassword(state.password)) {\r\n showToastWarning('Password should be complex with 8 char minimum.');\r\n } else if (state.password !== state.confirm) {\r\n showToastWarning('Password and Confirm Password should match.');\r\n } else {\r\n setBtnLoader(true);\r\n let res = await Adduser(state);\r\n if (res.success) {\r\n showToastSuccess('User added successfully');\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n }\r\n };\r\n\r\n const ModuleChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, modules: value }));\r\n setState((st) => {\r\n const nst = { ...st, moduleIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const BranchChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, branchs: value }));\r\n setState((st) => {\r\n const nst = { ...st, branchIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const ServiceChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, serviceAgent: value }));\r\n setState((st) => {\r\n const nst = { ...st, serviceAgentId: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n const DepotChange = (e, value) => {\r\n setSelectedData((st) => ({ ...st, depots: value }));\r\n setState((st) => {\r\n const nst = { ...st, depotIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClose = (res) => {\r\n props.onFormSubmit(res);\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 useEffect(async () => {\r\n let newMatchDepoCustId = [];\r\n if (state.customerIds) {\r\n masterData.depot.filter((obj) => {\r\n if (state.customerIds === obj.customerId) {\r\n newMatchDepoCustId.push(obj);\r\n }\r\n });\r\n setState((st) => ({ ...st, matchDepoCustId: newMatchDepoCustId }));\r\n }\r\n }, [state.customerIds]);\r\n\r\n useEffect(() => {\r\n if (props.userID) {\r\n const selectedModule = masterData.modules.filter((w) => state.moduleIds.indexOf(w.id) > -1);\r\n const selectedBranch = masterData.branchs.filter((w) => state.branchIds.indexOf(w.id) > -1);\r\n // const selectedDepots = masterData.depot.filter((w) => state.depotIds.indexOf(w.id) > -1);\r\n const selectedServiceAgent = masterData.serviceAgentList.filter((w) => state.serviceAgentId.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({\r\n ...st,\r\n modules: selectedModule,\r\n branchs: selectedBranch,\r\n // depots: selectedDepots,\r\n serviceAgent: selectedServiceAgent\r\n }));\r\n if (masterData.branchs.length > 0 && masterData.branchs.length === selectedBranch.length) {\r\n setState((st) => ({ ...st, allbranch: true }));\r\n }\r\n }\r\n }, [\r\n // state.depotIds,\r\n state.branchIds,\r\n state.moduleIds,\r\n masterData.branchs,\r\n masterData.modules,\r\n masterData.depot,\r\n state.serviceAgentId,\r\n masterData.serviceAgentList\r\n ]);\r\n\r\n useEffect(async () => {\r\n let result = await getUserDropdown();\r\n if (result.success) {\r\n const customers = result.data.customers.map((w) => ({\r\n id: w.customerID,\r\n name: w.customerCompanyName\r\n }));\r\n const modules = result.data.modules.map((w) => ({\r\n id: w.moduleID,\r\n name: w.moduleName\r\n }));\r\n const depots = result.data.depots.map((w) => ({\r\n id: w.depotID,\r\n name: w.depotName,\r\n customerId: w.depotCustomerID\r\n }));\r\n setMasterData((st) => ({\r\n ...st,\r\n branchs: result.data.branches.map((w) => ({\r\n id: w.branchID,\r\n name: w.branchShortName\r\n }))\r\n }));\r\n setMasterData((st) => ({ ...st, customer: customers, modules: modules, depot: depots, serviceAgentList: result.data.serviceAgents }));\r\n }\r\n if (props.userID) {\r\n let res = await getUserById(props.userID);\r\n setState((st) => ({\r\n ...st,\r\n userID: res.data.id,\r\n name: res.data.displayName,\r\n userInitials: res.data.userInitials,\r\n phone: res.data.phoneNo,\r\n email: res.data.email,\r\n userType: res.data.userRole,\r\n isActive: res.data.isActive,\r\n isLocked: res.data.isLocked,\r\n branchIds: res.data.branchIds,\r\n moduleIds: res.data.moduleIds,\r\n customerIds: res.data.customerIds[0],\r\n isReadOnly: res.data.isReadOnly,\r\n depotIds: res.data.depotsIds[0],\r\n canOverrideMandatorySteps: res.data.canOverrideMandatorySteps,\r\n serviceAgentId: res.data.serviceAgentIds,\r\n driverId: res.data.driverId\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(async () => {\r\n let res = await getDriverBasedOnCustndDepot(state.customerIds, state.depotIds);\r\n if (res.success) {\r\n if (res.data?.list) {\r\n const driver = res?.data?.list.map((w) => ({\r\n id: w.driverID,\r\n name: w.driver\r\n }));\r\n setState((st) => ({ ...st, driverList: driver || [] }));\r\n }\r\n }\r\n }, [state.customerIds, state.depotIds]);\r\n return (\r\n \r\n Branches \r\n
\r\n ) : null} */}\r\n {/* internal user-end*/}\r\n {/* service Agent user-end*/}\r\n {state.userType === 'serviceagent' || state.userType === 'technician' ? (\r\n \r\n Service Agent \r\n
\r\n ) : null}\r\n {/* service Agent user-end*/}\r\n {state.userType === 'customer' || state.userType === 'driver' ? (\r\n \r\n Customers \r\n Depots \r\n {/* Driver \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 handleAdd(data.row, 'show')} toolTipTitle=\"Edit User\" />\r\n \r\n handleAdd(data.row, 'showAsgPermi')}\r\n />\r\n \r\n \r\n handleAdd(data.row, 'showPassReset')} />\r\n \r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n if (window.innerWidth > 770) {\r\n tempCols.splice(2, 0, { key: 'phoneNo', name: 'Phone No.', width: 140 });\r\n }\r\n if (window.innerWidth > 415) {\r\n tempCols.splice(3, 0, { key: 'email', name: 'Email', width: 290 });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n handleAdd(null, 'show')}\r\n paginate\r\n rowPerPage={15}\r\n offset={210}\r\n />\r\n {state.show ? closeUserModal(false)} maxWidth=\"sm\" fullWidth>\r\n \r\n ) : null}\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default UserScreen;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllBranch = async () => {\r\n let res = await getWithAuth('branches');\r\n return res;\r\n};\r\n\r\nexport const getBranchById = async (Id) => {\r\n let res = await getWithAuth(`branches/${Id}`);\r\n return res;\r\n};\r\nexport const addBranches = async (data) => {\r\n let res = await postWithAuth('branches', {\r\n address1: data.address1,\r\n address2: data.address2,\r\n address3: data.address3,\r\n branchCode: data.branchCode,\r\n branchFax: data.fax,\r\n country: data.country,\r\n county: data.county,\r\n id: data.branchID,\r\n name: data.branchName,\r\n phone: data.phone,\r\n postcode: data.postcode,\r\n shortName: data.shortName,\r\n town: data.town\r\n });\r\n return res;\r\n};\r\nexport const updateBranches = async (data) => {\r\n let res = await putWithAuth(`branches/${data.branchID}`, {\r\n address1: data.address1,\r\n address2: data.address2,\r\n address3: data.address3,\r\n branchCode: data.branchCode,\r\n branchFax: data.fax,\r\n country: data.country,\r\n county: data.county,\r\n id: data.branchID,\r\n name: data.branchName,\r\n phone: data.phone,\r\n postcode: data.postcode,\r\n shortName: data.shortName,\r\n town: data.town\r\n });\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, MandatoryField, SimpleField } from '../../../Core/Controls';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { addBranches, updateBranches } from '../../../Core/Services/Admin/branchService';\r\nimport { isNull } from 'lodash';\r\nimport { validatePostCode } from '../../../Core/Basic/StaticService';\r\nimport { Postcode } from '../../../Core/Controls/index';\r\nimport { getBranchById } from '../../../Core/Services/Admin/branchService';\r\n\r\nconst AddEditBranch = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n errors: {},\r\n shortName: '',\r\n branchCode: '',\r\n branchName: '',\r\n branchID: null,\r\n fax: null,\r\n address2: '',\r\n address1: '',\r\n address3: '',\r\n town: '',\r\n country: '',\r\n county: '',\r\n postcode: '',\r\n phone: ''\r\n });\r\n\r\n useEffect(async () => {\r\n if (props.branchData?.branchID) {\r\n let res = await getBranchById(props.branchData.branchID);\r\n if (res.success) {\r\n const data = res.data;\r\n setState((st) => ({\r\n ...st,\r\n branchID: data.id,\r\n shortName: data.shortName,\r\n branchCode: data.branchCode,\r\n branchName: data.name,\r\n address1: data.address1,\r\n address2: data.address2,\r\n address3: data.address3,\r\n town: data.town,\r\n county: data.county,\r\n country: data.country,\r\n phone: data.phone,\r\n fax: data.branchFax,\r\n postcode: data.postcode\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const setVal = (s) => {\r\n setState((st) => ({\r\n ...st,\r\n address1: s.addressLine1,\r\n address2: s.addressLine2,\r\n town: s.town,\r\n county: s.county,\r\n postcode: s.postCode\r\n }));\r\n };\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validations = () => {\r\n const { branchCode, shortName, branchName, fax, postcode } = state;\r\n let faxRegEx = /^\\+?[0-9]{11,}$/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!branchName) {\r\n errors.branchName = 'Branch Name is required';\r\n formIsValid = false;\r\n }\r\n if (!validatePostCode(postcode) && /[^\\s]/.test(postcode) && !isNull(postcode)) {\r\n errors.postCode = `Please fill valid post code, \"Ex: BB11AA\"`;\r\n formIsValid = false;\r\n }\r\n if (!branchCode) {\r\n errors.branchCode = 'Branch Code is required';\r\n formIsValid = false;\r\n }\r\n if (!shortName) {\r\n errors.shortName = 'Short Name is required.';\r\n formIsValid = false;\r\n }\r\n if (!/[^\\s]/.test(fax) && !faxRegEx.test(fax)) {\r\n errors.fax = 'Please fill correct data.';\r\n formIsValid = false;\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 res;\r\n if (props.branchData.id) {\r\n res = await updateBranches(state);\r\n } else {\r\n res = await addBranches(state);\r\n }\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onFormSubmit(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleAdd(row)} toolTipTitle=\"Edit Branch\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const title = state.branchData ? 'Update Branch' : 'Add Branch';\r\n const getUrl = `branches`;\r\n return (\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={getUrl}\r\n btnTitle=\"Add Branch\"\r\n onBtnClick={handleAdd}\r\n isReload={state.isReload}\r\n />\r\n {state.show ? (\r\n closeBranchModal(false)} maxWidth=\"lg\" overflow=\"auto\">\r\n closeBranchModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default BranchScreen;\r\n","import React, { useEffect, useState } from 'react';\r\nimport 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 { getAllAdminDash } from '../../../Core/Services/Admin/AdminDashboardService';\r\nimport GroupRoundedIcon from '@material-ui/icons/GroupRounded';\r\nimport EventRoundedIcon from '@material-ui/icons/EventRounded';\r\nimport HealingRoundedIcon from '@material-ui/icons/HealingRounded';\r\nimport NotificationsActiveRoundedIcon from '@material-ui/icons/NotificationsActiveRounded';\r\nimport PeopleAltRoundedIcon from '@material-ui/icons/PeopleAltRounded';\r\nimport BuildRoundedIcon from '@material-ui/icons/BuildRounded';\r\nimport BlurOnRoundedIcon from '@material-ui/icons/BlurOnRounded';\r\nimport GavelRoundedIcon from '@material-ui/icons/GavelRounded';\r\nimport LinearScaleRoundedIcon from '@material-ui/icons/LinearScaleRounded';\r\nimport { Link } from 'react-router-dom';\r\nimport '../AdminDash.scss';\r\n\r\nconst AdminDashboard = () => {\r\n const [state, setState] = useState({\r\n rows_new: [],\r\n tilesData: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAllAdminDash();\r\n const cards = res.data.dashboard;\r\n setState((st) => ({\r\n ...st,\r\n tilesData: cards[0]\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 {state.tilesData.activeUsers || 0} \r\n Active Users \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.eventDocuments || 0} \r\n Event Documents \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.inspectionSheetChecks || 0} \r\n Inspection Sheet Checks \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.inspectionSheetSections || 0} \r\n Inspection Sheet Sections \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.maintenanceProviders || 0} \r\n Maintenance Providers \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.makes || 0} \r\n Makes \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.models || 0} \r\n Models \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.totalUsers || 0} \r\n Total Users \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.vehicleTypes || 0} \r\n Vehicle Types \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AdminDashboard;\r\n\r\n//to={`/serviceagent/defects`}\r\n//style={{ backgroundColor: \"green\" }}\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllVehicleDailyChecks = async () => {\r\n let res = await getWithAuth(`DailyCheckSections`);\r\n return res;\r\n};\r\n\r\nexport const getVehicleDailyCheckById = async (id) => {\r\n let res = await getWithAuth(`DailyCheckSections/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVehicleDailyChecks = async (data) => {\r\n let res = await postWithAuth(`DailyCheckSections`, data);\r\n return res;\r\n};\r\n\r\nexport const getAllVehicleCheckSectionDropDown = async () => {\r\n let res = await getWithAuth(`VehicleCategories`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { SecondaryCheckbox, InputText, SecondaryButton, SelectBox, MandatoryField } from '../../../../Core/Controls';\r\nimport {\r\n getVehicleDailyCheckById,\r\n postVehicleDailyChecks,\r\n getAllVehicleCheckSectionDropDown\r\n} from '../../../../Core/Services/InternalUser/vehicleDailyChecksAdminService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\nimport { MandatoryPositiveInput } from '../../../../Core/Controls/Inputs/PositiveInput';\r\n\r\nconst CheckSectionModal = (props) => {\r\n const [state, setState] = useState({\r\n dailyCheckSectionID: null,\r\n dailyCheckSectionDescription: '',\r\n dailyCheckSectionPosition: '',\r\n dailyCheckSectionActive: true,\r\n vehicleCategoryDescription: '',\r\n dailyCheckSectionLegalRequirement: false,\r\n errors: {},\r\n categoryList: []\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n //Previous Code using async await\r\n\r\n // useEffect(async () => {\r\n // if (props.checkSectionID) {\r\n // let res = await getVehicleDailyCheckById(props.checkSectionID);\r\n // if (res.success) {\r\n // setState((state) => ({\r\n // ...state,\r\n // dailyCheckSectionID: res.data.dailyCheckSectionID,\r\n // dailyCheckSectionDescription: res.data.dailyCheckSectionDescription,\r\n // dailyCheckSectionPosition: res.data.dailyCheckSectionPosition,\r\n // vehicleCategoryDescription: res.data.dailyCheckSectionVehicleCategoryID,\r\n // dailyCheckSectionActive: res.data.dailyCheckSectionActive,\r\n // dailyCheckSectionLegalRequirement: res.data.dailyCheckSectionLegalRequirement\r\n // }));\r\n // }\r\n // }\r\n\r\n // let res = await getAllVehicleCheckSectionDropDown();\r\n // setState((state) => ({\r\n // ...state,\r\n // categoryList: res.data.map((item) => ({\r\n // id: item.vehicleCategoryID,\r\n // name: item.vehicleCategoryDescription\r\n // }))\r\n // }));\r\n // }, []);\r\n\r\n //New Code using Promise.all\r\n\r\n useEffect(() => {\r\n let res = props.checkSectionID && getVehicleDailyCheckById(props.checkSectionID);\r\n let resDrop = getAllVehicleCheckSectionDropDown();\r\n\r\n Promise.all([res, resDrop]).then((value) => {\r\n let [res, ...resDrop] = value;\r\n resDrop = resDrop[0];\r\n if (props.checkSectionID) {\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n dailyCheckSectionID: res.data.dailyCheckSectionID,\r\n dailyCheckSectionDescription: res.data.dailyCheckSectionDescription,\r\n dailyCheckSectionPosition: res.data.dailyCheckSectionPosition,\r\n vehicleCategoryDescription: res.data.dailyCheckSectionVehicleCategoryID,\r\n dailyCheckSectionActive: res.data.dailyCheckSectionActive,\r\n dailyCheckSectionLegalRequirement: res.data.dailyCheckSectionLegalRequirement\r\n }));\r\n }\r\n }\r\n\r\n setState((state) => ({\r\n ...state,\r\n categoryList: resDrop.data.list.map((item) => ({\r\n id: item.vehicleCategoryID,\r\n name: item.vehicleCategoryDescription\r\n }))\r\n }));\r\n });\r\n }, []);\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((state) => ({ ...state, [name]: value }));\r\n };\r\n\r\n const handleCheckbox = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => {\r\n const nst = { ...state, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { dailyCheckSectionDescription, dailyCheckSectionPosition, vehicleCategoryDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(dailyCheckSectionDescription)) {\r\n errors.dailyCheckSectionDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(dailyCheckSectionPosition)) {\r\n errors.dailyCheckSectionPosition = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!emptyStrigPattern.test(vehicleCategoryDescription)) {\r\n errors.vehicleCategoryDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const checkSectionData = {\r\n dailyCheckSectionID: state.dailyCheckSectionID,\r\n dailyCheckSectionPosition: state.dailyCheckSectionPosition,\r\n dailyCheckSectionDescription: state.dailyCheckSectionDescription,\r\n dailyCheckSectionActive: state.dailyCheckSectionActive,\r\n dailyCheckSectionLegalRequirement: state.dailyCheckSectionLegalRequirement,\r\n // vehicleCategoryDescription: state.vehicleCategoryDescription,\r\n dailyCheckSectionVehicleCategoryID: state.vehicleCategoryDescription\r\n };\r\n let res = await postVehicleDailyChecks(checkSectionData);\r\n if (res.success) {\r\n if (props.checkSectionID) {\r\n showToastSuccess('Vehicle Daily Check updated successfully');\r\n } else {\r\n showToastSuccess('Vehicle Daily Check added successfully');\r\n }\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {\r\n handleButton(data.row);\r\n }}\r\n toolTipTitle=\"Edit Vehicle Daily Check\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n const handleButton = (params) => {\r\n setState((state) => ({ ...state, modalToggle: true, userID: params.dailyCheckSectionID }));\r\n };\r\n\r\n const closeDialog = (res) => {\r\n setState((state) => ({ ...state, modalToggle: false }));\r\n res && pullData();\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const title = state.userID ? 'Update Daily Check' : 'Add Daily Check';\r\n\r\n return (\r\n \r\n closeDialog(false)}>\r\n closeDialog(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleDailyChecksAdmin;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { BreadCrumbs, TabView } from '../../../../Core/Controls';\r\nimport { getVehicleCategory } from '../../../../Core/Services/InternalUser/Vehicle/vehicleChecks';\r\nimport VehicleDailyChecksAdmin from './vehicleDailyChecksAdmin';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicle Checks', active: true },\r\n { name: 'Daily Checks', active: true }\r\n];\r\n\r\nconst VehicleDailyChecksTab = () => {\r\n const [state, setState] = useState({\r\n checkList: []\r\n });\r\n\r\n useEffect(async () => {\r\n let CheckRes = await getVehicleCategory();\r\n setState(() => ({\r\n checkList: CheckRes?.data.list\r\n }));\r\n }, []);\r\n\r\n const heading = state.checkList?.map((o) => o.vehicleCategoryDescription);\r\n const filterTab = state.checkList?.filter((o, index) => !heading.includes(o.vehicleCategoryDescription, index + 1));\r\n const checkChecks = filterTab?.map((tab) => {\r\n return {\r\n label: tab.vehicleCategoryDescription,\r\n body: (\r\n \r\n
\r\n )\r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleDailyChecksTab;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllReportCatalogues = async () => {\r\n let res = await getWithAuth('reportcatalogue');\r\n return res;\r\n};\r\n\r\nexport const getAllDropdowns = async () => {\r\n let res = await getWithAuth(`reportcatalogue/screenDropdowns`);\r\n return res;\r\n};\r\n\r\nexport const getReportCataloguesById = async (Id) => {\r\n let res = await getWithAuth(`reportcatalogue/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const addReportCatalogues = async (data) => {\r\n let res = await postWithAuth('reportcatalogue', data);\r\n return res;\r\n};\r\n","import { InputLabel } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport { DataGrid, EditButton, MandatoryField, Multiselect, SecondaryButton, formatters, SelectBox, SecondaryCheckbox } from '../../../Core/Controls';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { getAllDropdowns, addReportCatalogues, getReportCataloguesById } from '../../../Core/Services/Admin/reportCatalogueService';\r\nimport { FormHelperText } from '@material-ui/core';\r\nimport '../../InternalUser/Controllers/controllerStyle.scss';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: '5%'\r\n },\r\n {\r\n key: 'reportCatalogueColumnDisplayName',\r\n name: 'Column Name'\r\n },\r\n {\r\n key: 'reportCatalogueColumnDatabaseName',\r\n name: 'Database Column'\r\n },\r\n {\r\n key: 'reportCatalogueColumnFieldType',\r\n name: 'Field Type'\r\n },\r\n {\r\n key: 'reportCatalogueColumnSelectionType',\r\n name: 'Selection Type'\r\n },\r\n {\r\n key: 'reportCatalogueColumnLength',\r\n name: 'Field Length'\r\n },\r\n {\r\n key: 'reportCatalogueColumnMandatory',\r\n name: 'Field Required',\r\n formatter: formatters.YesNo\r\n }\r\n];\r\n\r\nconst AddEditReportCatalogue = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n errors: {},\r\n reportsList: [],\r\n reportCatalogueName: '',\r\n tablesToUseList: '',\r\n reportCatalogueSQL: '',\r\n reportCatalogueColumnDisplayName: '',\r\n reportCatalogueColumnDatabaseName: '',\r\n reportCatalogueColumnFieldType: '',\r\n reportCatalogueColumnSelectionType: '',\r\n reportCatalogueColumnLength: '',\r\n reportCatalogueColumnMandatory: true,\r\n reportCatalogueColumnMandatoryList: [],\r\n reportCatalogueColumnSelectionTypesList: [],\r\n reportCatalogueColumnFieldTypesList: [],\r\n catlogId: null,\r\n reportCatalogueID: null,\r\n tablesListIds: []\r\n });\r\n\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getAllDropdowns();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n reportCatalogueColumnMandatoryList: [],\r\n reportCatalogueColumnSelectionTypesList: res.data.reportCatalogueSelectionTypes,\r\n reportCatalogueColumnFieldTypesList: res.data.reportCatalogueFieldTypes\r\n }));\r\n }\r\n if (props.reportCatalogueID) {\r\n let res = await getReportCataloguesById(props.reportCatalogueID);\r\n let data = res.data;\r\n setState((st) => ({\r\n ...st,\r\n reportsList: data?.reportCatalogueColumns?.map((m, i) => ({ ...m, id: i + 1 })) || [],\r\n\r\n tablesToUseList: res.data.reportCatalogueTables[0]?.reportCatalogueTableName,\r\n reportCatalogueID: res.data.reportCatalogues[0]?.reportCatalogueID,\r\n reportCatalogueName: res.data.reportCatalogues[0]?.reportCatalogueName,\r\n reportCatalogueSQL: res.data.reportCatalogues[0]?.reportCatalogueSQL\r\n }));\r\n }\r\n }, []);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validations = (val) => {\r\n const {\r\n reportCatalogueName,\r\n tablesToUseList,\r\n reportCatalogueSQL,\r\n reportCatalogueColumnDisplayName,\r\n reportCatalogueColumnDatabaseName,\r\n reportCatalogueColumnFieldType,\r\n reportCatalogueColumnSelectionType,\r\n reportCatalogueColumnLength\r\n } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!val) {\r\n if (!reportCatalogueName) {\r\n errors.reportCatalogueName = 'Report Catalogue Name is required';\r\n formIsValid = false;\r\n }\r\n if (!tablesToUseList) {\r\n errors.tablesToUseList = 'Tables To Use is required';\r\n formIsValid = false;\r\n }\r\n if (!reportCatalogueSQL) {\r\n errors.reportCatalogueSQL = 'reportCatalogueSQL is required.';\r\n formIsValid = false;\r\n }\r\n }\r\n if (val) {\r\n if (!reportCatalogueColumnDisplayName) {\r\n errors.reportCatalogueColumnDisplayName = 'Column Name is required.';\r\n formIsValid = false;\r\n }\r\n if (!reportCatalogueColumnDatabaseName) {\r\n errors.reportCatalogueColumnDatabaseName = 'Database Column is required.';\r\n formIsValid = false;\r\n }\r\n if (!reportCatalogueColumnFieldType) {\r\n errors.reportCatalogueColumnFieldType = 'Field Type is required.';\r\n formIsValid = false;\r\n }\r\n if (!reportCatalogueColumnSelectionType) {\r\n errors.reportCatalogueColumnSelectionType = 'Selection Type is required.';\r\n formIsValid = false;\r\n }\r\n if (!reportCatalogueColumnLength) {\r\n errors.reportCatalogueColumnLength = 'Field Length 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(false)) {\r\n const data = {\r\n reportCatalogueID: state.reportCatalogueID,\r\n reportCatalogueName: state.reportCatalogueName,\r\n reportCatalogueSQL: state.reportCatalogueSQL,\r\n reportCatalogueColumnsVM: state.reportsList.map((m) => ({\r\n reportCatalogueColumnDisplayName: m.reportCatalogueColumnDisplayName,\r\n reportCatalogueColumnDatabaseName: m.reportCatalogueColumnDatabaseName,\r\n reportCatalogueColumnFieldType: m.reportCatalogueColumnFieldType,\r\n reportCatalogueColumnSelectionType: m.reportCatalogueColumnSelectionType,\r\n reportCatalogueColumnLength: m.reportCatalogueColumnLength,\r\n reportCatalogueColumnMandatory: m.reportCatalogueColumnMandatory\r\n })),\r\n reportCatalogueTablesVM: [\r\n {\r\n reportCatalogueTableName: state.tablesToUseList\r\n }\r\n ]\r\n };\r\n setBtnLoader(true);\r\n let res = await addReportCatalogues(data);\r\n if (res.success) {\r\n showToastSuccess(res.message);\r\n props.onClose(true);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const onSelectCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: checked };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleAdd = () => {\r\n if (validations(true)) {\r\n let newPartToAdd = {\r\n reportCatalogueColumnDisplayName: state.reportCatalogueColumnDisplayName,\r\n reportCatalogueColumnDatabaseName: state.reportCatalogueColumnDatabaseName,\r\n reportCatalogueColumnFieldType: state.reportCatalogueColumnFieldType,\r\n reportCatalogueColumnSelectionType: state.reportCatalogueColumnSelectionType,\r\n reportCatalogueColumnLength: state.reportCatalogueColumnLength,\r\n reportCatalogueColumnMandatory: state.reportCatalogueColumnMandatory\r\n };\r\n setState((st) => ({\r\n ...st,\r\n reportsList: state.reportsList.filter((item) => item.id !== state.catlogId)\r\n }));\r\n setState((st) => {\r\n newPartToAdd.id = st.reportsList.length === 0 ? 1 : Math.max(...st.reportsList.map((c) => c.id)) + 1;\r\n return {\r\n ...st,\r\n reportsList: [...st.reportsList, newPartToAdd],\r\n reportCatalogueColumnDisplayName: '',\r\n reportCatalogueColumnDatabaseName: '',\r\n reportCatalogueColumnFieldType: '',\r\n reportCatalogueColumnSelectionType: '',\r\n reportCatalogueColumnLength: '',\r\n reportCatalogueColumnMandatory: true,\r\n isUpdate: false,\r\n catlogId: undefined\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleUpdatePart = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n id: params.id,\r\n reportCatalogueColumnDisplayName: params.reportCatalogueColumnDisplayName,\r\n reportCatalogueColumnDatabaseName: params.reportCatalogueColumnDatabaseName,\r\n reportCatalogueColumnFieldType: params.reportCatalogueColumnFieldType,\r\n reportCatalogueColumnSelectionType: params.reportCatalogueColumnSelectionType,\r\n reportCatalogueColumnLength: params.reportCatalogueColumnLength,\r\n reportCatalogueColumnMandatory: params.reportCatalogueColumnMandatory,\r\n catlogId: params.id,\r\n isUpdate: true\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handelClose = () => {\r\n props.onClose(false);\r\n };\r\n\r\n const dataFormatter = (data) => {\r\n return (\r\n \r\n handleUpdatePart(data.row)} toolTipTitle=\"Edit Report\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\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 \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 \r\n \r\n \r\n \r\n \r\n Field Type\r\n \r\n {state.errors.reportCatalogueColumnFieldType} \r\n \r\n \r\n \r\n Selection Type\r\n \r\n {state.errors.reportCatalogueColumnSelectionType} \r\n \r\n \r\n \r\n \r\n \r\n \r\n {'\\u{2800}'} \r\n \r\n {state.catlogId ? 'Update' : 'ADD'}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddEditReportCatalogue;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport '../../commonStyle.scss';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport AddEditReportCatalogue from './addEditReportCatalogue';\r\n\r\nimport { getAllReportCatalogues } from '../../../Core/Services/Admin/reportCatalogueService';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 80\r\n },\r\n {\r\n name: 'Name',\r\n key: 'name'\r\n },\r\n {\r\n key: 'dateCreated',\r\n name: 'Creation Date',\r\n formatter: formatters.Date_DDMMMYYYY_HHMM\r\n },\r\n {\r\n key: 'createdBy',\r\n name: 'Created By'\r\n },\r\n {\r\n key: 'dateUpdated',\r\n name: 'Updated Date',\r\n formatter: formatters.Date_DDMMMYYYY_HHMM\r\n },\r\n {\r\n key: 'updatedBy',\r\n name: 'Updated By'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Report Catalogues', path: '/', active: true }\r\n];\r\n\r\nconst ReportCataloguesScreen = (props) => {\r\n const { showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n\r\n reportCataloguesList: [],\r\n reportCataloguesData: null,\r\n reportCatalogueID: null,\r\n isReload: null\r\n });\r\n\r\n const pullReportCataloguesAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n reportCatalogueID: record\r\n }));\r\n };\r\n\r\n const closeReportCataloguesModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false,\r\n showAsgPermi: false\r\n }));\r\n res && pullReportCataloguesAndUpdateState();\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n handleAdd(row.reportCatalogueID)} toolTipTitle=\"Edit Report Catalogue\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const Crumbs = useMemo(() => {\r\n const tempCols = [...crumbs];\r\n let actionCol = tempCols.find((element) => element.name === 'Report Catalogues');\r\n if (actionCol) {\r\n actionCol.onClick = closeReportCataloguesModal();\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const title = state.reportCataloguesData ? 'Update Report Catalogue' : 'Add Report Catalogue';\r\n let getUrl = `reportcatalogue`;\r\n return (\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={getUrl}\r\n btnTitle=\"Add Report Catalogue\"\r\n onBtnClick={() => handleAdd(null)}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\nexport default ReportCataloguesScreen;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllMenuItems = async (id) => {\r\n let res = await getWithAuth(`NavigationMenu?roleID=${id}`); //\r\n return res;\r\n};\r\n\r\nexport const roleBaseTab = async () => {\r\n let res = await getWithAuth(`NavigationMenu/RoleBasedMenu`);\r\n return res;\r\n};\r\nexport const getMenuTab = async () => {\r\n let res = await getWithAuth(`NavigationMenu/getroles`);\r\n return res;\r\n};\r\nexport const getMenuItemsById = async (id) => {\r\n let res = await getWithAuth(`NavigationMenu/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postMenuItems = async (data) => {\r\n let res = await postWithAuth(`NavigationMenu`, data);\r\n return res;\r\n};\r\n\r\nexport const getMenuItemsDropdown = async (id, menuid) => {\r\n let res = '';\r\n if (menuid) {\r\n res = await getWithAuth(`NavigationMenu/screenDropdowns?roleID=${id}&menuID=${menuid}`);\r\n } else {\r\n res = await getWithAuth(`NavigationMenu/screenDropdowns?roleID=${id}`);\r\n }\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, MenuItem, TextField } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, MandatoryField, SelectBox, YesButton, NoButton, SimpleField, SingleSelect } from '../../../Core/Controls';\r\nimport { getMenuItemsById, postMenuItems, getMenuItemsDropdown } from '../../../Core/Services/InternalUser/menuItemService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport '../../commonStyle.scss';\r\n\r\nfunction MenuModal(props) {\r\n const [state, setState] = useState({\r\n navigationMenuID: null,\r\n leftNavigationMenuURL: '',\r\n leftNavigationMenuComponent: '',\r\n leftNavigationMenuAuthType: '',\r\n navigationMenuSequence: '',\r\n iconIDValue: null,\r\n leftNavigationMenuIconName: '',\r\n menuIconList: [],\r\n navigationMenuRoleID: null,\r\n menuRoleList: [],\r\n screenList: [],\r\n flatScreenList: [],\r\n navigationMenuParentMenuID: null,\r\n parentMenuList: [],\r\n navigationMenuLabel: '',\r\n navigationMenuActive: true,\r\n navigationScreenID: null,\r\n errors: {}\r\n });\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n navigationMenuIconIDValue: null\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.tabID) {\r\n setState((st) => ({ ...st, navigationMenuRoleID: props.tabID }));\r\n }\r\n let dropDwonData = await getMenuItemsDropdown(props.tabID, props.navigationMenuID);\r\n if (dropDwonData.success) {\r\n const parent_MenuList = dropDwonData.data.navigationMenus.map((item) => ({\r\n id: item.navigationMenuID,\r\n name: item.navigationMenuLabel\r\n }));\r\n const screen_List = dropDwonData.data.screens.map((item) => ({\r\n id: item.id,\r\n name: item.name\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n menuIconList: dropDwonData.data.icons,\r\n menuRoleList: dropDwonData.data.roles,\r\n parentMenuList: parent_MenuList,\r\n screenList: screen_List,\r\n flatScreenList: dropDwonData.data.screens\r\n }));\r\n }\r\n if (props.navigationMenuID) {\r\n let res = await getMenuItemsById(props.navigationMenuID);\r\n let data = res.data.list[0];\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n navigationMenuID: data.navigationMenuID,\r\n navigationMenuRoleID: data.navigationMenuRoleID,\r\n leftNavigationMenuURL: data.leftNavigationMenuURL,\r\n leftNavigationMenuComponent: data.leftNavigationMenuComponent,\r\n leftNavigationMenuAuthType: data.leftNavigationMenuAuthType,\r\n navigationMenuSequence: data.navigationMenuSequence,\r\n navigationMenuLabel: data.navigationMenuLabel,\r\n iconIDValue: data.navigationMenuIconID,\r\n navigationMenuActive: data.navigationMenuActive,\r\n leftNavigationMenuIconName: data.leftNavigationMenuIconName,\r\n navigationMenuParentMenuID: data.navigationMenuParentMenuID,\r\n navigationScreenID: data.navigationScreenID\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let MenuId = null;\r\n if (state.iconIDValue) {\r\n MenuId = state.menuIconList.find(({ id }) => id === +state.iconIDValue);\r\n }\r\n setTempOptions((st) => ({\r\n ...st,\r\n navigationMenuIconIDValue: MenuId\r\n }));\r\n }, [state.iconIDValue]);\r\n\r\n const abcd = async (value) => {\r\n let obj = state.flatScreenList.find((x) => x.id === value);\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst.navigationMenuLabel = obj?.name;\r\n nst.navigationMenuIconID = obj?.screenIconID;\r\n return nst;\r\n });\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setTempOptions((st) => ({ ...st, [nm]: val }));\r\n };\r\n\r\n const handleInputChange2 = (event) => {\r\n const { name, value } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = value;\r\n nst.navigationMenuLabel = '';\r\n nst.navigationMenuIconID = '';\r\n\r\n return nst;\r\n });\r\n abcd(value);\r\n };\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = value;\r\n\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 const validations = () => {\r\n const { navigationMenuLabel } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(navigationMenuLabel)) {\r\n errors.navigationMenuLabel = ' This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const data = {\r\n navigationMenuID: state.navigationMenuID,\r\n navigationMenuRoleID: state.navigationMenuRoleID,\r\n navigationMenuSequence: state.navigationMenuSequence,\r\n navigationMenuLabel: state.navigationMenuLabel,\r\n navigationMenuIconID: tempOptions.navigationMenuIconIDValue?.id,\r\n navigationMenuActive: state.navigationMenuActive,\r\n navigationMenuParentMenuID: state.navigationMenuParentMenuID,\r\n navigationScreenID: state.navigationScreenID\r\n };\r\n let res = await postMenuItems(data);\r\n if (res.success) {\r\n showToastSuccess('Menu Item Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n submitHandler(row.navigationMenuID)} toolTipTitle=\"Edit Items\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n }, []);\r\n\r\n const title = state.navigationMenuID ? 'Update Menu Items' : 'Add Menu Items';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullMenuItems();\r\n };\r\n\r\n let getUrl = `NavigationMenu?roleID=${props.tabID}`;\r\n\r\n return (\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={getUrl}\r\n btnTitle=\"Add Item\"\r\n onBtnClick={() => submitHandler(null)}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default Menu;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { BreadCrumbs, TabView } from '../../../Core/Controls';\r\nimport { getMenuTab } from '../../../Core/Services/InternalUser/menuItemService';\r\nimport MenuItems from './Menu';\r\n\r\nfunction MenuTab(props) {\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Navigation', active: true },\r\n { name: 'Menu Items', active: true }\r\n ];\r\n const [state, setState] = useState({ leftNavigationMenuTabs: [] });\r\n\r\n useEffect(async () => {\r\n let res = await getMenuTab();\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n leftNavigationMenuTabs: res.data.roles\r\n }));\r\n }\r\n }, []);\r\n const tabs = state.leftNavigationMenuTabs.map((m) => ({\r\n label: m.name,\r\n body: \r\n
\r\n );\r\n}\r\n\r\nexport default MenuTab;\r\n","import { postWithAuth, getWithAuth } from \"../../../Basic/HttpService\";\r\n\r\nexport const getAllRetorqueposition = async () => {\r\n let res = await getWithAuth(`Retorquepositions`);\r\n return res;\r\n};\r\n\r\nexport const getRetorquepositionId = async (id) => {\r\n let res = await getWithAuth(`Retorquepositions/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postRetorquepositionData = async (data) => {\r\n let res = await postWithAuth(`Retorquepositions`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, MenuItem, TextField } from '@material-ui/core';\r\nimport { InputText, SecondaryButton, MandatoryField, SelectBox, YesButton, NoButton } from '../../../Core/Controls';\r\nimport { getRetorquepositionId, postRetorquepositionData } from '../../../Core/Services/InternalUser/VOR/retorquePositionsService';\r\nimport AcUnitIcon from '@material-ui/icons/AcUnit';\r\nimport AirlineSeatReclineExtraIcon from '@material-ui/icons/AirlineSeatReclineExtra';\r\nimport ApartmentIcon from '@material-ui/icons/Apartment';\r\nimport AllInclusiveIcon from '@material-ui/icons/AllInclusive';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport '../../commonStyle.scss';\r\n\r\nfunction AddEditModal(props) {\r\n const [state, setState] = useState({\r\n retorquePositionID: null,\r\n url: '',\r\n component: '',\r\n authType: '',\r\n parentMenuID: '',\r\n parentMenuList: [],\r\n menuItemID: '',\r\n menuItemList: [],\r\n lable: '',\r\n isActive: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.retorquePositionID) {\r\n let res = await getRetorquepositionId(props.retorquePositionID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n retorquePositionID: res.data.retorquePositionID,\r\n parentMenuID: res.data.parentMenuID,\r\n url: res.data.url,\r\n component: res.data.component,\r\n authType: res.data.authType,\r\n lable: res.data.lable\r\n }));\r\n const parentMenu = Data.map((item) => ({\r\n id: item.parentMenuID,\r\n name: item.parentMenuName\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n parentMenuList: parentMenu\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n const handleClick = (name, value) => {\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validations = () => {\r\n const { lable } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(lable)) {\r\n errors.lable = ' This field is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const retorquepositionData = {\r\n retorquePositionID: state.retorquePositionID,\r\n url: state.url,\r\n component: state.component,\r\n authType: state.authType,\r\n lable: state.lable.length,\r\n parentMenuID: state.parentMenuID\r\n };\r\n props.onClose(true);\r\n // let res = await postRetorquepositionData(retorquepositionData);\r\n // if (res.success) {\r\n // showToastSuccess('Retorque Position Updated sucessfully');\r\n // props.onClose(true);\r\n // } else {\r\n // showToastError(res.message);\r\n // }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Â
\r\n {state.open ? (\r\n \r\n \r\n {/* \r\n  Edit\r\n */}\r\n
\r\n {state.open ? (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default TreeViewTab;\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const addPortalSettings = async (data) => {\r\n let res = await postWithAuth('PortalSetting', data);\r\n return res;\r\n};\r\n\r\nexport const getPortalSettings = async () => {\r\n let res = await getWithAuth(`PortalSetting`);\r\n return res;\r\n};\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport {\r\n EditButton,\r\n BreadCrumbs,\r\n MandatoryField,\r\n Multiselect,\r\n SimpleField,\r\n SecondaryButton,\r\n formatters,\r\n SelectBox,\r\n SecondaryCheckbox,\r\n YesButton,\r\n NoButton\r\n} from '../../../Core/Controls';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport '../../commonStyle.scss';\r\nimport { SketchPicker } from 'react-color';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { InputLabel, Typography } from '@material-ui/core';\r\nimport { getPortalSettings, addPortalSettings } from '../../../Core/Services/Admin/Settings';\r\nimport { useHistory } from 'react-router-dom';\r\nimport '../../commonStyle.scss';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Settings', path: '/', active: true }\r\n];\r\n\r\nconst Settings = (props) => {\r\n const { showToastError, showToastSuccess } = useToast();\r\n\r\n const [state, setState] = useState({\r\n Title: '',\r\n CallUs: '',\r\n OpeningTimes: '',\r\n EmailUs: '',\r\n Technician: '',\r\n SignOff: '',\r\n CustomerSignOff: '',\r\n Driver: '',\r\n DefectManager: '',\r\n HeaderTextColorCode: '',\r\n HeaderBackgroundColorCode: '',\r\n MenubarTextColorCode: '',\r\n MenubarBackgroundColorCode: '',\r\n productLogo: '',\r\n labelLogo: '',\r\n bannerLogo: '',\r\n navigationMenuActive: '',\r\n refreshTime: '',\r\n bannerImage: '',\r\n documentsLogo: '',\r\n Id: ''\r\n });\r\n\r\n const history = useHistory();\r\n\r\n const pullSettingsAndUpdateState = async () => {\r\n let res = await getPortalSettings();\r\n\r\n const data = res.data.details[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n Id: data.portalSettingId,\r\n Title: data.portalSettingTitle,\r\n CallUs: data.portalSettingCallUs,\r\n OpeningTimes: data.portalSettingOpeningTime,\r\n EmailUs: data.portalSettingEmailUs,\r\n Technician: data.portalSettingTechnicianDeclaration,\r\n SignOff: data.portalSettingSignOffManagerDeclaration,\r\n Driver: data.portalSettingDriverDeclaration,\r\n DefectManager: data.portalSettingDefectManagerDeclaration,\r\n CustomerSignOff: data.portalSettingSignOffCustomerDeclaration,\r\n HeaderTextColorCode: data.portalHeaderTextColour,\r\n HeaderBackgroundColorCode: data.portalHeaderBackgroundColour,\r\n MenubarTextColorCode: data.portalMenuBarTextColour,\r\n MenubarBackgroundColorCode: data.portalMenuBarBackgroundColour,\r\n navigationMenuActive: data.portalSettingDisplayTopNavCounters,\r\n refreshTime: data.portalSettingDashboardRefreshTime,\r\n productLogo: data.portalSettingMainLogo,\r\n bannerLogo: data.portalSettingBanner,\r\n labelLogo: data.portalSettingAdditionalLogo,\r\n bannerImage: data.portalSettingBannerImage,\r\n documentsLogo: data.portalSettingDocumentsLogo\r\n }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n let handleImage = (bannerLogo) => (event) => {\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n const { result } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [bannerLogo]: result\r\n }));\r\n };\r\n reader.readAsDataURL(event.target.files[0]);\r\n };\r\n\r\n const clearImage = (name) => (e) => {\r\n setState((st) => ({ ...st, [name]: null }));\r\n };\r\n\r\n const modelgridStyle = {\r\n formatterImageContainer: { width: '100%', textAlign: 'left' },\r\n formatterImageProductContainer: { maxHeight: 50, maxHeight: 173, width: '100%', textAlign: 'left', backgroundColor: state.MenubarBackgroundColorCode },\r\n // formatterImage: { width: '40%', maxHeight: 60, backgroundSize: 'cover' },\r\n formatterImage: { width: 120, maxHeight: 60, backgroundSize: 'cover' }\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 handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const handleSubmit = async () => {\r\n const data = {\r\n portalSettingId: state.Id,\r\n portalSettingCallUs: state.CallUs,\r\n portalSettingOpeningTime: state.OpeningTimes,\r\n portalSettingEmailUs: state.EmailUs,\r\n portalSettingTitle: state.Title,\r\n portalHeaderBackgroundColour: state.HeaderBackgroundColorCode,\r\n portalHeaderTextColour: state.HeaderTextColorCode,\r\n portalMenuBarBackgroundColour: state.MenubarBackgroundColorCode,\r\n portalMenuBarTextColour: state.MenubarTextColorCode,\r\n portalSettingBannerImage: state.bannerImage,\r\n portalSettingTechnicianDeclaration: state.Technician,\r\n portalSettingSignOffManagerDeclaration: state.SignOff,\r\n portalSettingDriverDeclaration: state.Driver,\r\n portalSettingDefectManagerDeclaration: state.DefectManager,\r\n portalSettingSignOffCustomerDeclaration: state.CustomerSignOff,\r\n portalSettingDisplayTopNavCounters: state.navigationMenuActive,\r\n portalSettingMainLogo: state.productLogo,\r\n portalSettingBanner: state.bannerLogo,\r\n portalSettingAdditionalLogo: state.labelLogo,\r\n portalSettingDocumentsLogo: state.documentsLogo,\r\n portalSettingDashboardRefreshTime: state.refreshTime\r\n };\r\n\r\n let res = await addPortalSettings(data);\r\n if (res.success) {\r\n showToastSuccess('Porting setting saved successfully');\r\n history.goBack();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullSettingsAndUpdateState();\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 Declarations\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Colours\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 \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 \r\n \r\n White Label Logo \r\n {state.labelLogo ? (\r\n Remove Logo \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {'\\u{2800}'} \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 \r\n \r\n \r\n Documents Logo\r\n \r\n {state.documentsLogo ? (\r\n Remove Logo \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 Settings\r\n \r\n
\r\n \r\n \r\n \r\n Display Top Navigation Counter?\r\n \r\n \r\n handleClick('navigationMenuActive', true)}\r\n />\r\n \r\n \r\n handleClick('navigationMenuActive', false)}\r\n />\r\n \r\n \r\n \r\n \r\n {'\\u{2800}'} \r\n {props.customerID ? 'Save' : 'Save'} \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Settings;\r\n","import { postWithAuth, getWithAuth } from \"../../../Basic/HttpService\";\r\n\r\nexport const getAllVorTypes = async () => {\r\n let res = await getWithAuth(`vortypes`);\r\n return res;\r\n};\r\n\r\nexport const getVorById = async (id) => {\r\n let res = await getWithAuth(`vortypes/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postVorData = async (data) => {\r\n let res = await postWithAuth(`vortypes`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { InputLabel, FormHelperText } from \"@material-ui/core\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../Core/Controls\";\r\nimport { getVorById, postVorData } from \"../../../Core/Services/InternalUser/VOR/vorTypesService\";\r\nimport { useToast } from \"../../../Core/Hooks/useToast\";\r\nimport \"../../commonStyle.scss\";\r\n\r\nfunction VorModal(props) {\r\n const [state, setState] = useState({\r\n vorTypeID: null,\r\n vorTypeDescription: \"\",\r\n errors: {},\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.vorTypeID) {\r\n let res = await getVorById(props.vorTypeID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n vorTypeID: res.data.vorTypeID,\r\n vorTypeDescription: res.data.vorTypeDescription,\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { vorTypeDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(vorTypeDescription)) {\r\n errors.vorTypeDescription = \" Vor Type is required\";\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const vorData = {\r\n vorTypeID: state.vorTypeID,\r\n vorTypeDescription: state.vorTypeDescription,\r\n };\r\n let res = await postVorData(vorData);\r\n if (res.success) {\r\n showToastSuccess(\"VOR Type Updated sucessfully\");\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
{ props.closeType(false, null); props.closeSubCat(false, null); }} style={{ cursor: 'pointer' }}>\r\n VOR Types ({props.focusedRow.vorTypeDescription})\r\n
,\r\n },\r\n {\r\n name:\r\n props.closeSubCat(false, null)} style={{ cursor: 'pointer' }} >\r\n VOR Reasons ({props.focusedRow.vorTypeDetailDescription})\r\n
,\r\n },\r\n { name: 'VOR Sub Categories', active: true },\r\n ];\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\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={`VORSubCategories?VORSubCategoryCategoryId=${props.focusedRow.vorTypeDetailID}`}\r\n btnTitle=\"Add VOR Type Detail\"\r\n onBtnClick={addBtnClicked}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.open && (\r\n <>\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.selectedRowData == null ? 'Add VOR Sub Category' : 'Edit VOR Sub Category'}\r\n maxWidth=\"md\"\r\n >\r\n
\r\n );\r\n}\r\nexport default VorSubCat;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../Core/Controls/Grid/index';\r\nimport { AddButton, EditButton, BreadCrumbs } from '../../../Core/Controls';\r\nimport DialogBox from './vorTypeDetailDialog';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport '../../commonStyle.scss';\r\nimport { Assignment } from '@material-ui/icons';\r\nimport { IconButton } from '@material-ui/core';\r\nimport VorSubCat from '../VORSubCatScreen/VorSubCat';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: '7%' },\r\n { key: 'vorTypeDescription', name: 'VOR Type', width: '30%' },\r\n { key: 'vorTypeDetailDescription', name: 'Description' }\r\n];\r\nconst VORTypeDetail = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isAdd: true,\r\n\r\n showSubCat: false,\r\n });\r\n\r\n const subCatHandler = (va, x) => {\r\n setState((st) => ({ ...st, showSubCat: va, focusedRow: x }))\r\n }\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', active: true },\r\n {\r\n name:\r\n props.closeType(false, null)} style={{ cursor: 'pointer' }}>\r\n VOR Types ({props.vorTypeDescription})\r\n
,\r\n },\r\n { name: 'VOR Reasons', active: true },\r\n ];\r\n\r\n useEffect(async () => {\r\n pullApiData();\r\n }, []);\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const renderEdit = (ev, row) => {\r\n return (\r\n \r\n {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n selectedRowData: row,\r\n isAdd: false\r\n }));\r\n }}\r\n />\r\n subCatHandler(true, row)}\r\n toolTipTitle=\"VOR Sub Categories\"\r\n />\r\n
\r\n );\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const addBtnClicked = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n isAdd: true,\r\n selectedRowData: {}\r\n }));\r\n };\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n return (\r\n state.showSubCat ?\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={`vortypedetails${'?vorTypeDescription=' + props.vorTypeDescription}`}\r\n btnTitle=\"Add VOR Type Detail\"\r\n onBtnClick={addBtnClicked}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.isAdd ? 'Add VOR Type Detail' : 'Edit VOR Type Detail'}\r\n maxWidth=\"md\"\r\n >\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default VORTypeDetail;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllVorTypes } from '../../../Core/Services/InternalUser/VOR/vorTypesService';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport VorTypeModal from './VorTypeModal';\r\nimport { BreadCrumbs, AddButton, EditButton } from '../../../Core/Controls';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport '../../commonStyle.scss';\r\nimport VORTypeDetail from '../VORTypeDetailScreen/vorTypeDetail'\r\nimport { Assignment } from '@material-ui/icons';\r\nimport { IconButton, Tooltip } from '@material-ui/core';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', active: true },\r\n { name: 'VOR Types', active: true }\r\n];\r\n\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'vorTypeDescription', name: 'Description' }\r\n];\r\n\r\nfunction Vor(props) {\r\n const [state, setState] = useState({\r\n vorList: [],\r\n loader: true,\r\n open: false\r\n });\r\n\r\n useEffect(async () => {\r\n pullVorType();\r\n }, []);\r\n\r\n const pullVorType = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const vorHandler = (params) => {\r\n setState((state) => ({ ...state, open: true, vorTypeID: params?.vorTypeID }));\r\n };\r\n\r\n const reasonHandler = (va, x) => {\r\n setState((st) => ({ ...st, showReasons: va, focusedDescription: x?.vorTypeDescription }))\r\n }\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n vorHandler(row)}\r\n toolTipTitle=\"Edit VOR Type\"\r\n />\r\n reasonHandler(true, row)}\r\n toolTipTitle=\"VOR Reasons\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.vorTypeID ? 'Update VOR Type' : 'Add VOR Type';\r\n\r\n const closeVorModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullVorType();\r\n };\r\n\r\n return (\r\n state.showReasons ?\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={'vortypes'}\r\n btnTitle=\"Add VOR Type\"\r\n onBtnClick={() => {\r\n vorHandler(null);\r\n }}\r\n isReload={state.isReload}\r\n />\r\n\r\n {state.open ? (\r\n closeVorModal(false)} maxWidth=\"md\">\r\n closeVorModal(true)} />\r\n \r\n ) : null}\r\n
\r\n \r\n );\r\n}\r\nexport default Vor;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { InputLabel, FormHelperText } from \"@material-ui/core\";\r\nimport { InputText, SecondaryButton, MandatoryField } from \"../../../Core/Controls\";\r\nimport { getRetorquepositionId, postRetorquepositionData } from \"../../../Core/Services/InternalUser/VOR/retorquePositionsService\";\r\nimport { useToast } from \"../../../Core/Hooks/useToast\";\r\nimport \"../../commonStyle.scss\";\r\n\r\nfunction RetorquePositionsModal(props) {\r\n const [state, setState] = useState({\r\n retorquePositionID: null,\r\n retorquePositionDescription: \"\",\r\n errors: {},\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.retorquePositionID) {\r\n let res = await getRetorquepositionId(props.retorquePositionID);\r\n if (res.success) {\r\n setState((state) => ({\r\n ...state,\r\n retorquePositionID: res.data.retorquePositionID,\r\n retorquePositionDescription: res.data.retorquePositionDescription,\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setState((state) => ({\r\n ...state,\r\n [name]: value,\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { retorquePositionDescription } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(retorquePositionDescription)) {\r\n errors.retorquePositionDescription = \" Retorque Position is required\";\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const retorquepositionData = {\r\n retorquePositionID: state.retorquePositionID,\r\n retorquePositionDescription: state.retorquePositionDescription,\r\n };\r\n let res = await postRetorquepositionData(retorquepositionData);\r\n if (res.success) {\r\n showToastSuccess(\"Retorque Position Updated sucessfully\");\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n retorquePositionHandler(row)} toolTipTitle=\"Edit Retorque Position\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.retorquePositionID ? 'Update Retorque Position' : 'Add Retorque Position';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullRetorquePositions();\r\n };\r\n\r\n return (\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={'Retorquepositions'}\r\n btnTitle=\"Add Retorque Position\"\r\n onBtnClick={() => retorquePositionHandler(null)}\r\n isReload={state.isReload}\r\n />\r\n {state.open ? (\r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default RetorquePositions;\r\n","import React, { useState, useEffect, useMemo } from \"react\";\r\nimport { getAllWorkshopresources } from \"../../../Core/Services/InternalUser/VOR/workshopResourcesService\";\r\nimport DataGrid from \"../../../Core/Controls/Grid\";\r\nimport DialogComp from \"../../../Core/Dialog/DialogComp\";\r\nimport WorkshopResourcesModal from \"./WorkshopResourcesModal\";\r\nimport { formatters } from \"../../../Core/Controls\";\r\nimport { BreadCrumbs, AddButton, EditButton } from \"../../../Core/Controls\";\r\nimport \"../../commonStyle.scss\";\r\n\r\nconst crumbs = [\r\n { name: \"Home\", path: \"/\" },\r\n { name: \"VOR\", path: \"/\" },\r\n { name: \"Workshop Resources \", active: true },\r\n];\r\n\r\nconst base_columns = [\r\n { key: \"action\", name: \"Action\", width: \"5%\" },\r\n { key: \"workshopResourceName\", name: \"Resource Name\" },\r\n { key: \"worktshopResourceActive\", name: \"Is Active ?\", formatter: formatters.YesNo },\r\n];\r\n\r\nfunction WorkshopResources(props) {\r\n const [state, setState] = useState({\r\n WorkshopResourcesList: [],\r\n loader: true,\r\n open: false,\r\n });\r\n\r\n useEffect(async () => {\r\n pullWorkshopResources();\r\n }, []);\r\n\r\n const pullWorkshopResources = async () => {\r\n let res = await getAllWorkshopresources();\r\n setState((state) => ({\r\n ...state,\r\n WorkshopResourcesList: res.data,\r\n loader: false,\r\n }));\r\n };\r\n\r\n const workshopResourcesHandler = (params) => {\r\n setState((state) => ({ ...state, open: true, workshopResourceID: params.workshopResourceID }));\r\n };\r\n\r\n const ActionButtons = (data) => {\r\n return (\r\n \r\n workshopResourcesHandler(data.row)} />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === \"action\");\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n return newColumn;\r\n });\r\n\r\n const title = state.workshopResourceID ? \"Update Workshop Resource\" : \"Add Workshop Resource\";\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullWorkshopResources();\r\n };\r\n\r\n return (\r\n \r\n closeModal(false)} maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default WorkshopResources;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport { SecondaryButton, formatters, SingleSelect, DatePicker, BreadCrumbs } from '../../../Core/Controls';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport '../../commonStyle.scss';\r\nimport { GetVehicleSalesInvoice, UpdateVehicleSalesInvoice, VehicleSalesInvoiceGenratePdf } from '../../../Core/Services/InternalUser/JOB/jobItemsService';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport moment from 'moment';\r\nimport { some } from 'lodash';\r\nimport { Table, TableBody, TableContainer, Paper } from '@material-ui/core';\r\nimport { StyledTableCell, StyledTableRow } from '../../../Core/Controls/Table/StyledCell&Row';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PictureAsPdfIcon from '@material-ui/icons/PictureAsPdf';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\n\r\nlet crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Invoices', active: true },\r\n { name: 'Update Sales Invoice', active: true }\r\n];\r\n\r\nfunction UpdateSalesInvoice(props) {\r\n const [state, setState] = useState({\r\n vatRate: [],\r\n vehicleDetails: [],\r\n dateDue: moment().format('YYYY-DD-MM'),\r\n datePaid: null,\r\n status: '',\r\n errors: {},\r\n statusValue: null,\r\n invoiceLines: [],\r\n partsDetails: []\r\n });\r\n const { userRoles } = useLoginInfo();\r\n const history = useHistory();\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n const isCustomer = userRoles.includes('customer');\r\n\r\n useEffect(async () => {\r\n let res1 = await GetVehicleSalesInvoice(props.match?.params?.id);\r\n if (res1.success) {\r\n setState((st) => ({\r\n ...st,\r\n vatRate: res1.data.vatRate,\r\n vehicleDetails: res1.data?.vehicleDetails || [],\r\n invoiceLines: res1.data.invoiceLines,\r\n partsDetails: res1.data.partsDetails,\r\n dateDue: formatters.DateFormatter(res1.data?.vehicleDetails[0]?.invoiceDue),\r\n datePaid: formatters.DateFormatter(res1.data?.vehicleDetails[0]?.invoiceDatePaid),\r\n statusList: res1.data.statusList,\r\n status: res1.data?.vehicleDetails[0]?.vehicleSalesInvoiceStatusID\r\n }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n let getStatus;\r\n if (state.status) {\r\n getStatus = state.statusList.find(({ id }) => id === state.status);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n statusValue: getStatus\r\n }));\r\n }, [state.status]);\r\n\r\n const inputChange = (e) => {\r\n const { name, value, type } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validation = () => {\r\n const { dateDue, datePaid } = state;\r\n let errors = {};\r\n let isValid = true;\r\n\r\n if (!dateDue) {\r\n errors.dateDue = 'Date is required';\r\n isValid = false;\r\n }\r\n if (!datePaid) {\r\n errors.datePaid = 'Date Paid is required';\r\n isValid = false;\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n return isValid;\r\n };\r\n\r\n const handelSubmit = async () => {\r\n if (validation()) {\r\n let formData = {\r\n dateDue: state.dateDue,\r\n datePaid: state.datePaid,\r\n status: state.statusValue?.id,\r\n invoiceID: props.match?.params?.id\r\n };\r\n let res = await UpdateVehicleSalesInvoice(formData);\r\n if (res.success) {\r\n showToastSuccess('Invoice Updated Successfully');\r\n history.goBack();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n }\r\n };\r\n const GeneratePdfInvoice = async () => {\r\n let res = await VehicleSalesInvoiceGenratePdf(props.match?.params?.id);\r\n if (res.success) {\r\n showToastSuccess('Invoice PDF Generated Successfully');\r\n history.goBack();\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => ({ ...st, [nm]: val }));\r\n };\r\n const valFormater = (val) => {\r\n return £{formatters.ToFixedDigit(val)};\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Reg Number \r\n {state.vehicleDetails[0]?.regNumber || 'N/A'} \r\n \r\n \r\n \r\n Invoice Number \r\n {state.vehicleDetails[0]?.invoiceNumber || 'N/A'} \r\n \r\n \r\n {'\\u{2800}'} \r\n \r\n \r\n \r\n Customer \r\n {state.vehicleDetails[0]?.customer || 'N/A'} \r\n \r\n \r\n Invoice Date \r\n {formatters.DateOnlyFormatter(state.vehicleDetails[0]?.invoiceDate)} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Date Due\r\n \r\n {state.errors.dateDue} \r\n \r\n \r\n \r\n Invoice Date Paid\r\n \r\n {state.errors.datePaid} \r\n \r\n \r\n Status \r\n \r\n {!isCustomer && (\r\n \r\n {'\\u{2800}'} \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\n );\r\n}\r\n\r\nexport default UpdateSalesInvoice;\r\n","import { postWithAuth, getWithAuth } from \"../../../Basic/HttpService\";\r\n\r\nexport const getAllMaintenanceProvider = async () => {\r\n let res = await getWithAuth(`MaintenanceProvider`);\r\n return res;\r\n};\r\n\r\nexport const getMaintenanceProviderById = async (id) => {\r\n let res = await getWithAuth(`MaintenanceProvider/${id}`);\r\n return res;\r\n};\r\n\r\nexport const postMaintenanceProviderData = async (data) => {\r\n let res = await postWithAuth(`MaintenanceProvider`, data);\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { FormHelperText, InputLabel, FormControlLabel } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton, SecondaryCheckbox, DatePicker, MandatoryField, SimpleField } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport moment from 'moment';\r\nimport { validatePostCode, emailValidation } from '../../../../Core/Basic/StaticService';\r\nimport { getMaintenanceProviderById, postMaintenanceProviderData } from '../../../../Core/Services/InternalUser/ServiceAgent/maintenanceProvider';\r\n\r\nconst AddMaintenanceProvider = (props) => {\r\n const [state, setState] = useState({\r\n maintenanceProviderID: null,\r\n maintenanceProviderIncludesRFL: false,\r\n maintenanceProviderIncludesRM: false,\r\n maintenanceProviderIncludesTyres: false,\r\n maintenanceProviderIncludesCranes: false,\r\n maintenanceProviderIncludesFridges: false,\r\n maintenanceProviderIncludesTailLifts: false,\r\n maintenanceProviderIncludesOther: false,\r\n maintenanceProviderIncludesActive: true,\r\n errors: {}\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n useEffect(async () => {\r\n if (props.providerID) {\r\n let res = await getMaintenanceProviderById(props.providerID);\r\n let data = res.data;\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n maintenanceProviderID: data.maintenanceProviderID,\r\n maintenanceProviderName: data.maintenanceProviderName,\r\n maintenanceProviderAddress1: data.maintenanceProviderAddress1,\r\n maintenanceProviderAddress2: data.maintenanceProviderAddress2,\r\n maintenanceProviderCity: data.maintenanceProviderCity,\r\n maintenanceProviderPostCode: data.maintenanceProviderPostCode,\r\n maintenanceProviderCounty: data.maintenanceProviderCounty,\r\n maintenanceProviderCountryCode: data.maintenanceProviderCountryCode,\r\n maintenanceProviderPhone: data.maintenanceProviderPhone,\r\n maintenanceProviderFax: data.maintenanceProviderFax,\r\n maintenanceProviderEmail: data.maintenanceProviderEmail,\r\n maintenanceProviderWebsite: data.maintenanceProviderWebsite,\r\n maintenanceProviderContactName: data.maintenanceProviderContactName,\r\n maintenanceProviderContactPhone: data.maintenanceProviderContactPhone,\r\n maintenanceProviderContractRef: data.maintenanceProviderContractRef,\r\n maintenanceProviderContractStartDate: data.maintenanceProviderContractStartDate\r\n ? moment(data.maintenanceProviderContractStartDate).format('YYYY-MM-DD')\r\n : null,\r\n maintenanceProviderContractEndDate: data.maintenanceProviderContractEndDate\r\n ? moment(data.maintenanceProviderContractEndDate).format('YYYY-MM-DD')\r\n : null,\r\n maintenanceProviderIncludesRFL: data.maintenanceProviderIncludesRFL,\r\n maintenanceProviderIncludesRM: data.maintenanceProviderIncludesRM,\r\n maintenanceProviderIncludesTyres: data.maintenanceProviderIncludesTyres,\r\n maintenanceProviderIncludesCranes: data.maintenanceProviderIncludesCranes,\r\n maintenanceProviderIncludesFridges: data.maintenanceProviderIncludesFridges,\r\n maintenanceProviderIncludesTailLifts: data.maintenanceProviderIncludesTailLifts,\r\n maintenanceProviderIncludesOther: data.maintenanceProviderIncludesOther,\r\n maintenanceProviderIncludesActive: data.maintenanceProviderIncludesActive\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const inputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const selectHandler = (e) => {\r\n const { name, checked } = e.target;\r\n setState((state) => ({ ...state, [name]: checked }));\r\n };\r\n\r\n const validations = () => {\r\n const { maintenanceProviderName, maintenanceProviderAddress1, maintenanceProviderCity, maintenanceProviderPostCode, maintenanceProviderEmail } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!maintenanceProviderName) {\r\n errors.maintenanceProviderName = 'Name is required';\r\n formIsValid = false;\r\n }\r\n if (!maintenanceProviderAddress1) {\r\n errors.maintenanceProviderAddress1 = 'Address is required';\r\n formIsValid = false;\r\n }\r\n if (!maintenanceProviderCity) {\r\n errors.maintenanceProviderCity = 'City is required';\r\n formIsValid = false;\r\n }\r\n if (!validatePostCode(maintenanceProviderPostCode)) {\r\n errors.maintenanceProviderPostCode = `Please fill valid post code, \"Ex: BB11AA\"`;\r\n formIsValid = false;\r\n }\r\n if (!maintenanceProviderPostCode) {\r\n errors.maintenanceProviderPostCode = 'Post Code is required';\r\n formIsValid = false;\r\n }\r\n if (!emailValidation(maintenanceProviderEmail)) {\r\n errors.maintenanceProviderEmail = 'Please Enter Valid Email';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n const ProviderData = {\r\n maintenanceProviderID: state.maintenanceProviderID,\r\n maintenanceProviderName: state.maintenanceProviderName,\r\n maintenanceProviderAddress1: state.maintenanceProviderAddress1,\r\n maintenanceProviderAddress2: state.maintenanceProviderAddress2,\r\n maintenanceProviderCity: state.maintenanceProviderCity,\r\n maintenanceProviderPostCode: state.maintenanceProviderPostCode,\r\n maintenanceProviderCounty: state.maintenanceProviderCounty,\r\n maintenanceProviderCountryCode: state.maintenanceProviderCountryCode,\r\n maintenanceProviderPhone: state.maintenanceProviderPhone,\r\n maintenanceProviderFax: state.maintenanceProviderFax,\r\n maintenanceProviderEmail: state.maintenanceProviderEmail,\r\n maintenanceProviderWebsite: state.maintenanceProviderWebsite,\r\n maintenanceProviderContactName: state.maintenanceProviderContactName,\r\n maintenanceProviderContactPhone: state.maintenanceProviderContactPhone,\r\n maintenanceProviderContractRef: state.maintenanceProviderContractRef,\r\n maintenanceProviderContractStartDate: state.maintenanceProviderContractStartDate,\r\n maintenanceProviderContractEndDate: state.maintenanceProviderContractEndDate,\r\n maintenanceProviderIncludesRFL: state.maintenanceProviderIncludesRFL,\r\n maintenanceProviderIncludesRM: state.maintenanceProviderIncludesRM,\r\n maintenanceProviderIncludesTyres: state.maintenanceProviderIncludesTyres,\r\n maintenanceProviderIncludesCranes: state.maintenanceProviderIncludesCranes,\r\n maintenanceProviderIncludesFridges: state.maintenanceProviderIncludesFridges,\r\n maintenanceProviderIncludesTailLifts: state.maintenanceProviderIncludesTailLifts,\r\n maintenanceProviderIncludesOther: state.maintenanceProviderIncludesOther,\r\n maintenanceProviderIncludesActive: state.maintenanceProviderIncludesActive\r\n };\r\n let res = await postMaintenanceProviderData(ProviderData);\r\n if (res.success) {\r\n showToastSuccess('Maintenance Provider added successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(res.message);\r\n // props.onClose(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n// {formatters.formatWithComma(data.row?.maintenanceProviderAddress1)}\r\n// {formatters.formatWithComma(data.row?.maintenanceProviderAddress2)}\r\n// {formatters.formatWithComma(data.row?.maintenanceProviderCity)}\r\n// {formatters.formatWithComma(data.row?.maintenanceProviderCounty)}\r\n// {data.row?.maintenanceProviderPostcode}\r\n//
\r\n// );\r\n// };\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'maintenanceProviderName', name: 'Name' },\r\n // { key: 'maintenanceProviderCounty', name: 'County', width: '10%' },\r\n { key: 'maintenanceProviderEmail', name: 'Email', width: '15%' },\r\n { key: 'maintenanceProviderContactName', name: 'Contact Name', width: '10%' },\r\n {\r\n key: 'maintenanceProviderContactPhone',\r\n name: 'Contact Phone',\r\n headerRenderer: formatters.ColumnHeaderAlignLeft,\r\n formatter: formatters.ColumnTextAlignleft,\r\n width: '8%'\r\n },\r\n { key: 'maintenanceProviderContractStartDate', name: 'Start Date', formatter: formatters.Date_DDMMYYYY, width: '6%' },\r\n { key: 'maintenanceProviderContractEndDate', name: 'End Date', formatter: formatters.Date_DDMMYYYY, width: '6%' },\r\n {\r\n key: 'address',\r\n name: 'Address',\r\n // formatter: (data) =>\r\n // formatters.addressFormatter(\r\n // data.row?.maintenanceProviderAddress1,\r\n // data.row?.maintenanceProviderAddress2,\r\n // data.row?.maintenanceProviderCity,\r\n // data.row?.maintenanceProviderCounty,\r\n // data.row?.maintenanceProviderPostCode\r\n // ),\r\n width: '30%'\r\n }\r\n];\r\n\r\nconst MaintenanceProvider = () => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n providerList: [],\r\n showLoader: true\r\n });\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n handleProvider(row.maintenanceProviderID)} />\r\n
\r\n );\r\n };\r\n\r\n useEffect(async () => {\r\n pulldata();\r\n }, []);\r\n\r\n const pulldata = async () => {\r\n // let res = await getAllMaintenanceProvider();\r\n // if (res.success) {\r\n // setState((st) => ({\r\n // ...st,\r\n // providerList: res.data.list,\r\n // showLoader: false\r\n // }));\r\n // }\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n const handleProvider = (params) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: true,\r\n providerID: params\r\n }));\r\n };\r\n\r\n const closeProviderModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: false\r\n }));\r\n pulldata();\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n const gridBtnTitle = 'Add Provider';\r\n let getUrl = `MaintenanceProvider`;\r\n return (\r\n \r\n
\r\n handleProvider(null)}\r\n // paginate\r\n // offset={210}\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={getUrl}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleProvider(null)}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default MaintenanceProvider;\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport '../../../commonStyle.scss';\r\nimport {\r\n getVehicleBreakdownDropdowns,\r\n postVehicleBreakdown,\r\n getVehicleBreakdownsbyID,\r\n getBreakDownDropDown\r\n} from '../../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport CustomizedSteppers from '../BreackdownDefectStepper/defectBreackDownStepper';\r\nimport { formatters } from '../../../../Core/Controls';\r\nimport BreakDownEditDetails from './BreakDownEditDetails';\r\nimport BreakDownDetails from './BreakDownDetails';\r\nimport { FromLoader } from '../../../../Core/Loader/formLoader';\r\n\r\nlet domainName = window.location.host;\r\nconst trimedhost = domainName.includes('localhost') ? 'localhost' : domainName;\r\n\r\nconst EditBreakdownLink = (props) => {\r\n const { BreakDownID, VehicleID } = props.match.params;\r\n\r\n const [state, setState] = useState({\r\n defectID: null,\r\n breakDownType: 'BR',\r\n driverName: '',\r\n driverPhone: null,\r\n breakDownLocation: '',\r\n problemReported: '',\r\n replacementvehicleRequired: false,\r\n defectPG9Issued: false,\r\n mobilityUsed: 0,\r\n mobilityRequested: 0,\r\n reportingDepot: null,\r\n callOutRequired: false,\r\n defectVOR: false,\r\n policeOnScene: 0,\r\n passengersInvolved: false,\r\n accDamage: false,\r\n vehicleLoaded: false,\r\n urgentCallOut: false,\r\n policeOnScene: false,\r\n mobilityRequested: false,\r\n mobilityUsed: false,\r\n vehicleLoadTypesList: [],\r\n depotsList: [],\r\n vehicleJobProgress: [],\r\n errors: {},\r\n showJob: false,\r\n loadType: 1,\r\n showMap: false,\r\n loadTypeValue: '',\r\n isRefresh: '',\r\n isLoader: true\r\n // showMessage: false\r\n });\r\n\r\n const pullBreackdownById = async () => {\r\n let res = await getVehicleBreakdownsbyID(BreakDownID);\r\n let data = res.data.details[0];\r\n\r\n let vehicleJobProgressDates = res.data.vehicleJobProgressDates;\r\n if (data) {\r\n setState((st) => ({\r\n ...st,\r\n defectID: data?.defectID,\r\n vehicleID: data?.defectVehicleID,\r\n breakDownType: data?.defectTypeCode,\r\n mileage: data?.defectMileage,\r\n reportingDepot: data?.defectReportingDepotID,\r\n breakDownLocation: data?.defectLocation,\r\n reportedPhone: data?.defectContactNumber,\r\n reportedBy: data?.defectContactName,\r\n driverName: data?.defectDriverName,\r\n driverPhone: data?.defectDriverTelephone,\r\n problemReported: data?.defectDescription,\r\n callOutRequired: data?.defectCallOutRequired,\r\n urgentCallOut: data?.defectUrgentCallOut,\r\n putOnVOR: data?.defectVOR,\r\n policeOnScene: data?.defectPoliceOnScene,\r\n passengersInvolved: data?.defectPassengersInvolved,\r\n numberOfPassenger: data?.defectNumberOfPassengers,\r\n accDamage: data?.defectAccidentDamage,\r\n iNSREF: data?.defectInsuranceReference,\r\n replacementvehicleRequired: data?.defectReplacementVehicle,\r\n domainName: data?.domainName,\r\n vehicleLoaded: data?.defectVehicleLoaded,\r\n loadType: data?.defectVehicleLoadTypeID,\r\n mobilityRequested: data?.defectMobilityRequested,\r\n mobilityUsed: data?.defectMobilityUsed,\r\n PG9Issued: data?.defectPG9Issued,\r\n defectNumberGenerated: data?.defectNumberGenerated,\r\n defectResolvedNotes: data?.defectResolvedNotes,\r\n reportingDepotName: data?.reportingDepot,\r\n vehicleLoadTypeDescription: data?.vehicleLoadTypeDescription,\r\n defectRegNumber: data?.defectRegNumber,\r\n customer: data?.customer,\r\n reportingDepot: data?.reportingDepot,\r\n make: data?.make,\r\n model: data?.model,\r\n vorVehicleID: data?.vorVehicleID,\r\n customerID: data.customerID,\r\n homeDepotID: data.homeDepotID,\r\n defectReportingDepotID: data.defectReportingDepotID,\r\n //\r\n vehicleJobProgress: vehicleJobProgressDates,\r\n defectDateCreated: formatters.DateTimeFormatter(data?.defectDateCreated),\r\n defectDateCallOutArrived: formatters.DateTimeFormatter(data?.defectDateCallOutArrived),\r\n defectDateVehicleRecovered: formatters.DateTimeFormatter(data?.defectDateVehicleRecovered),\r\n defectDateResolved: formatters.DateTimeFormatter(data?.defectDateResolved),\r\n defectDateSignOff: formatters.DateTimeFormatter(data?.defectDateSignOff),\r\n fileCount: data?.fileCount,\r\n isRefresh: new Date(),\r\n isLoader: false\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n isLoader: false,\r\n showMessage: true\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n if (BreakDownID) {\r\n pullBreackdownById();\r\n }\r\n if (VehicleID) {\r\n let res = await getVehicleBreakdownDropdowns(VehicleID || props.VehicleID);\r\n setState((st) => ({\r\n ...st,\r\n vehicleLoadTypesList: res.data.vehicleLoadTypes,\r\n loadTypeValue: res.data.vehicleLoadTypes[0],\r\n depotsList: res.data.depots,\r\n vehicleID: props.VehicleID || VehicleID,\r\n domainName: trimedhost\r\n }));\r\n } else {\r\n let res = await getBreakDownDropDown();\r\n setState((st) => ({\r\n ...st,\r\n vehicleLoadTypesList: res.data.vehicleLoadTypes,\r\n loadTypeValue: res.data.vehicleLoadTypes[0],\r\n depotsList: res.data.depots,\r\n domainName: trimedhost\r\n }));\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {/* {state.showMessage ? (\r\n props.onClose()}\r\n />\r\n \r\n {state.vehicleJobProgress?.map((a, 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\nexport default EditBreakdownLink;\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 { getAllServiceAgentDash } from '../../../Core/Services/ServiceAgent/ServiceAgent';\r\nimport LocalTaxiRoundedIcon from '@material-ui/icons/LocalTaxiRounded';\r\nimport BuildRoundedIcon from '@material-ui/icons/BuildRounded';\r\nimport LocalShippingRoundedIcon from '@material-ui/icons/LocalShippingRounded';\r\nimport WorkRoundedIcon from '@material-ui/icons/WorkRounded';\r\nimport ExploreRoundedIcon from '@material-ui/icons/ExploreRounded';\r\nimport PermDataSettingIcon from '@material-ui/icons/PermDataSetting';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport AccountTreeIcon from '@material-ui/icons/AccountTree';\r\nimport AirportShuttleIcon from '@material-ui/icons/AirportShuttle';\r\nimport { Link } from 'react-router-dom';\r\nimport '../ServiceCommon.scss';\r\n\r\nconst ServiceAgentDash = () => {\r\n const [state, setState] = useState({\r\n rows_new: [],\r\n tilesData: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAllServiceAgentDash();\r\n const cards = res.data.dashboard;\r\n setState((st) => ({\r\n ...st,\r\n tilesData: cards\r\n }));\r\n }, []);\r\n\r\n return (\r\n No data available
\r\n ) :*/}\r\n {state.isLoader ? (\r\n\r\n \r\n \r\n {state.tilesData.map((option, index) => (\r\n \r\n \r\n {option.title == 'Awaiting Approvals' ? (\r\n \r\n \r\n {option.cnt} \r\n {option.title} \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ServiceAgentDash;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport { getAllDefects, getAllVehicleDefects } from '../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Defects', path: '/', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: '8%'\r\n },\r\n { key: 'defectNumberGenerated', name: 'Defect No', width: '6%' },\r\n { key: 'defectDescription', name: 'Defect Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: '8%' },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: '13%' }\r\n];\r\n\r\nconst DefetctStatusGrid = (props) => {\r\n const [state, setState] = useState({ modalToggle: false, defectID: null, List: [], showLoader: true, fromPage: 'Defects' });\r\n\r\n useEffect(async () => {\r\n if (props.frompage === 'Vehicles') {\r\n setState((st) => ({\r\n ...st,\r\n fromPage: props.frompage\r\n }));\r\n }\r\n pullDefects();\r\n }, []);\r\n\r\n const pullDefects = async () => {\r\n if (props.VehicleID) {\r\n let res2 = await getAllVehicleDefects(props.VehicleID);\r\n setState((st) => ({\r\n ...st,\r\n List: [...res2.data.list],\r\n showLoader: false\r\n }));\r\n } else {\r\n let res = await getAllDefects();\r\n setState((st) => ({\r\n ...st,\r\n List: [...res.data.list],\r\n showLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n if (!props.VehicleID) {\r\n tempCols.splice(1, 0, { key: 'defectRegNumber', name: 'Reg Number', width: '8%' });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DefetctStatusGrid;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DataGrid, EditButton, formatters } from '../../../Core/Controls';\r\nimport { getVehicleBreakdowns, getAllVehicleBreakdowns } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport AddBreaddownModal from '../../InternalUser/Maintenance/BreakDown/AddBreakdown';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { Link } from 'react-router-dom';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n {\r\n key: 'defectDate',\r\n name: 'Date',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n },\r\n { key: 'defectLocation', name: 'Location', width: 250 },\r\n { key: 'defectContactName', name: 'Reported By', width: 170 },\r\n { key: 'defectContactNumber', name: 'Reported Phone', width: 200 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 350 },\r\n { key: 'defectTypeCode', name: 'Code', width: 80 }\r\n];\r\n\r\nlet crubsSet = {\r\n ':all': 'All Breakdowns',\r\n typebo: 'BreakDown Onside',\r\n typebr: 'BreakDown Roadside'\r\n};\r\n\r\nconst ServiceAgentBreakdown = (props) => {\r\n let history = useHistory();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Breakdowns', active: true },\r\n { name: crubsSet[props?.match?.params?.all], active: true }\r\n ];\r\n const [state, setState] = useState({\r\n breakdownList: [],\r\n loader: true,\r\n modalToggle: false,\r\n breakID: null,\r\n rowVehicleID: null\r\n });\r\n\r\n const handleBreakDown = (params, VehicleID, modalName) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: true,\r\n breakID: params,\r\n rowVehicleID: VehicleID,\r\n modalName: modalName\r\n }));\r\n };\r\n const closeModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: false\r\n }));\r\n res && pullBreakDownAndUpdateState();\r\n };\r\n\r\n useEffect(async () => {\r\n pullBreakDownAndUpdateState();\r\n }, [props.match]);\r\n\r\n const pullBreakDownAndUpdateState = async () => {\r\n let defecttypecode = '';\r\n if (props.VehicleID) {\r\n defecttypecode = '';\r\n }\r\n if (props?.match?.params?.all == 'typebo') {\r\n defecttypecode = 'bo';\r\n }\r\n if (props?.match?.params?.all == 'typebr') {\r\n defecttypecode = 'br';\r\n }\r\n if (props?.match?.params?.all == ':all') {\r\n defecttypecode = '';\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date(),\r\n defecttypecode: defecttypecode\r\n }));\r\n };\r\n\r\n let urlForcondition = `VehicleBreakdowns/?${props.VehicleID ? `VehicleID=${props.VehicleID}` : ''}defecttypecode=${state.defecttypecode}`;\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n state: 'breakdown'\r\n });\r\n };\r\n\r\n const handleEditBreakdown = (val) => {\r\n history.push({\r\n pathname: `/maintenance/breakdowns/Edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n {props.frompage !== 'Vehicles' ?
\r\n closeModal(true)}\r\n breakDownID={state.breakID}\r\n isAddJobBtnShow={true}\r\n modalName={state.modalName}\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 idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"BreakdownScreen\"\r\n getUrl={urlForcondition}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleBreakDown(null, null, 'Add')}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default ServiceAgentBreakdown;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllBookingSchedule = async (id) => {\r\n let res = await getWithAuth(`ServiceAgentSchedules?VehicleID=&Status=${id}`);\r\n return res;\r\n};\r\n\r\nexport const postServiceAgentBookingRequest = async (data) => {\r\n let res = await postWithAuth(`ServiceAgentSchedules/SetScheduleBookingRequest`, data);\r\n return res;\r\n};\r\n// https://devapi.fleet247.co.uk/api/ServiceAgentSchedules?VehicleID=&Status=2\r\n","import { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React, { useEffect, useState } from 'react';\r\nimport moment from 'moment';\r\nimport { DatePicker, InputText, NoButton, SecondaryButton, SelectBox, YesButton, MandatoryField } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport '../../../commonStyle.scss';\r\nimport '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss'; //'./scheduleVehicleStyle.scss';\r\nimport {\r\n getScheduleBookingSectionById,\r\n getAllDropDowns,\r\n postScheduleBookingSection,\r\n getScheduleRequestBookingById\r\n} from '../../../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport { getAllBookingSchedule, postServiceAgentBookingRequest } from '../../../../Core/Services/ServiceAgent/Schedule/BookingReq';\r\n\r\nlet domainName = window.location.host;\r\nlet trimedhost = domainName.includes('localhost') ? 'localhost' : domainName;\r\nconst ServiceAgentScheduleBookingSection = (props) => {\r\n const [state, setState] = useState({\r\n scheduleBookingDate: '',\r\n scheduleDateDue: '',\r\n scheduleEventName: '',\r\n scheduleID: null,\r\n schedulePrepDate: '',\r\n scheduleServiceAgentsID: '',\r\n comment: '',\r\n dropList: []\r\n });\r\n const [requestBookingData, setRequestBookingData] = useState({\r\n scheduleRequestedBookingDate: 'N/A',\r\n scheduleRequestedBookingTimeSlot: 'N/A',\r\n scheduleNightBooking: 'N/A',\r\n scheduleCollectionAndDeliverID: null,\r\n scheduleCollectionAndDeliver: 'N/A',\r\n scheduleDeliverBefore: 'N/A',\r\n scheduleCollectAfter: 'N/A'\r\n });\r\n const [errors, setErrors] = useState({});\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const formatTime = (value) => {\r\n let formattedTime = value ? moment(value, 'HH:mm:ss').format('hh:mm A') : 'N/A';\r\n return formattedTime;\r\n };\r\n\r\n const pullRequestBookingData = async () => {\r\n let res = await getScheduleRequestBookingById(props.scheduleId);\r\n let bookingData = res.data;\r\n setRequestBookingData((st) => ({\r\n ...st,\r\n scheduleCollectAfter: formatTime(bookingData.scheduleCollectAfter),\r\n scheduleCollectionAndDeliverID: bookingData.scheduleCollectionAndDeliverID || null,\r\n scheduleDeliverBefore: formatTime(bookingData.scheduleDeliverBefore),\r\n scheduleNightBooking: bookingData.scheduleNightBooking ? 'Yes' : bookingData.scheduleNightBooking === null ? 'N/A' : 'No',\r\n scheduleRequestedBookingDate: bookingData.scheduleRequestedBookingDate\r\n ? moment(bookingData.scheduleRequestedBookingDate).format('DD/MM/YYYY')\r\n : 'N/A',\r\n scheduleRequestedBookingTimeSlot: formatTime(bookingData.scheduleRequestedBookingTimeSlot)\r\n }));\r\n };\r\n\r\n const pullBookingData = async () => {\r\n let DataList = await getAllDropDowns();\r\n setState((st) => ({\r\n ...st,\r\n dropList: DataList.data\r\n }));\r\n let res = await getScheduleBookingSectionById(props.scheduleId);\r\n let bookingData = res.data;\r\n setState((st) => ({\r\n ...st,\r\n vehicleID: bookingData.vehicleID || null,\r\n scheduleBookingDate: bookingData.scheduleBookingDate || '',\r\n scheduleDateDue: moment(bookingData.scheduleDateDue).format('DD/MM/YYYY') || '',\r\n scheduleEventName: bookingData.scheduleEventName,\r\n scheduleID: bookingData.scheduleID,\r\n schedulePrepDate: bookingData.schedulePrepDate || '',\r\n scheduleServiceAgentsID: bookingData.scheduleServiceAgentsID || ''\r\n }));\r\n };\r\n useEffect(() => {\r\n pullBookingData();\r\n pullRequestBookingData();\r\n }, []);\r\n useEffect(() => {\r\n let collName = state.dropList.collectionAndDelivery?.filter((x) => x.id == requestBookingData.scheduleCollectionAndDeliverID).map((z) => z.name)[0];\r\n setRequestBookingData((st) => ({\r\n ...st,\r\n scheduleCollectionAndDeliver: collName || 'N/A'\r\n }));\r\n }, [state.dropList, requestBookingData.scheduleCollectionAndDeliverID]);\r\n\r\n const validate = (checkFlag) => {\r\n let noErrors = true;\r\n let err = {};\r\n if (!checkFlag && !/[^\\s]/.test(state.comment)) {\r\n err.comment = true;\r\n noErrors = false;\r\n }\r\n setErrors(err);\r\n return noErrors;\r\n };\r\n const checkNull = (param) => {\r\n if (/[^\\s]/.test(param)) {\r\n return param;\r\n } else {\r\n return null;\r\n }\r\n };\r\n\r\n const handleData = async (checkFlag) => {\r\n if (validate(checkFlag)) {\r\n let response = await postServiceAgentBookingRequest({\r\n comment: state.comment,\r\n isAcceptByServiceAgent: checkFlag,\r\n scheduleID: state.scheduleID\r\n // domainName: trimedhost,\r\n });\r\n if (response) {\r\n response.success ? showToastSuccess('Booking acceptance saved successfully') : showToastError(response.message || 'Something went wrong');\r\n } else {\r\n showToastError('Something went wrong');\r\n }\r\n props.onClose(true);\r\n }\r\n };\r\n const valueChanged = (ev) => {\r\n let temp = ev.target;\r\n setState((st) => ({\r\n ...st,\r\n [temp.name]: temp.value\r\n }));\r\n setErrors({});\r\n };\r\n const yesNoChanged = (ev) => {\r\n if (ev.target.innerText == 'YES') {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: true\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n scheduleNightBooking: false\r\n }));\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Event \r\n {state.scheduleEventName} \r\n \r\n \r\n Date Due \r\n {state.scheduleDateDue || 'No Date Assigned'} \r\n \r\n \r\n \r\n Requested Booking Date \r\n {requestBookingData.scheduleRequestedBookingDate} \r\n \r\n \r\n Requested Booking Time Slot \r\n {requestBookingData.scheduleRequestedBookingTimeSlot} \r\n \r\n \r\n Is Night Booking? \r\n {requestBookingData.scheduleNightBooking} \r\n \r\n \r\n Collection And Delivery \r\n {requestBookingData.scheduleCollectionAndDeliver} \r\n \r\n \r\n Deliver Before \r\n {requestBookingData.scheduleDeliverBefore} \r\n \r\n \r\n Collect After \r\n {requestBookingData.scheduleCollectAfter} \r\n \r\n \r\n \r\n
\r\n\r\n \r\n {errors.comment ? 'This field is required' : null} \r\n \r\n \r\n handleData(1)}>Accept \r\n \r\n \r\n handleData(0)}>Reject \r\n \r\n \r\n Cancel \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ServiceAgentScheduleBookingSection;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport { getAllBookingSchedule } from '../../../../Core/Services/ServiceAgent/Schedule/BookingReq';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport ServiceAgentScheduleBookingSection from '../BookingRequest/BookingSection';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\nimport ScheduleNotes from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst crumbs = [{ name: 'Home', path: '/' }, { name: 'Schedule' }, { name: 'Booking Requests', path: '/', active: true }];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 100, addFileUploaderIcon: true },\r\n { key: 'scheduleRequestedBookingDate', name: 'Requested', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleDateDue', name: 'Due', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleRequestedBookingTimeSlot', name: 'Time Slot' },\r\n { key: 'scheduleEventName', name: 'Event' },\r\n { key: 'scheduleNightBooking', name: 'Night Booking' },\r\n { key: 'scheduleDeliverBefore', name: 'Deliver Before' },\r\n { key: 'scheduleCollectAfter', name: 'Collect After' },\r\n { key: 'vehicleRegNumber', name: 'Reg Number' },\r\n { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' }\r\n];\r\n\r\nconst BookingRequests = (props) => {\r\n const [state, setState] = useState({ modalToggle: false, rowVehicleID: null, defectID: null, List: [], showLoader: true, isReload: null });\r\n const [openDialog, setOpenDialog] = useState({});\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n useEffect(async () => {\r\n pullAllBookingSchedule();\r\n }, []);\r\n\r\n const pullAllBookingSchedule = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const checkButton = (ev, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: ev,\r\n scheduleVehicleID: ev.scheduleVehicleID\r\n }));\r\n };\r\n\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n res && pullAllBookingSchedule();\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n \r\n
\r\n {row?.displayNotes === 'Y' && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )}\r\n {row?.displayBookingRequest === 'Y' && (\r\n {\r\n checkButton(row, 'section');\r\n }}\r\n toolTipTitle=\"Booking Details\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n let getUrl = `ServiceAgentSchedules?VehicleID=&Status=${1}`;\r\n\r\n return (\r\n \r\n {!props.VehicleID && ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n isReload={state.isReload}\r\n idFieldName={`${checkhaveAccess?.CanUploadScheduleDocuments ? 'scheduleID' : null}`}\r\n fileUploaderConfigName={`${checkhaveAccess?.CanUploadScheduleDocuments ? 'ScheduleDocumentsRequired' : null}`}\r\n downloadBtnName=\"Booking Requests\"\r\n />\r\n )}\r\n {openDialog.section ? (\r\n \r\n closeTheDialog(true)}\r\n />\r\n \r\n ) : null}\r\n {openDialog.notes ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default BookingRequests;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport { getAllBookingSchedule } from '../../../../Core/Services/ServiceAgent/Schedule/BookingReq';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport { Link } from 'react-router-dom';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport VehicleDailyChecks from '../../../InternalUser/Controllers/Vehicles/VehicleDailyChecks/vehicleDailyChecks';\r\nimport EditVehicleDailyChecks from '../../../InternalUser/Controllers/Vehicles/VehicleDailyChecks/editVehicleDailyCheck';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\n// import ServiceAgentScheduleBookingSection from '../BookingRequest/BookingSection';\r\n// import CompleteScheduleModal from './CompleteSchedule';\r\nimport CompleteScheduleModal from '../../../InternalUser/Schedule/completeSchedule';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport ScheduleNotes from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport '../../../commonStyle.scss';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst crumbs = [{ name: 'Home', path: '/' }, { name: 'Schedule' }, { name: 'Confirmed Bookings', path: '/', active: true }];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 140, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number' },\r\n { key: 'bookedDate', name: 'Booking', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleDateDue', name: 'Due', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleEventName', name: 'Event' },\r\n { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' }\r\n];\r\n\r\nconst ConfirmedBookings = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n rowVehicleID: null,\r\n defectID: null,\r\n List: [],\r\n showLoader: true,\r\n showChecks: false,\r\n showEditChecks: false,\r\n selectedRowData: {},\r\n isReload: null\r\n });\r\n const [openDialog, setOpenDialog] = useState({});\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n useEffect(async () => {\r\n pullAllBookingSchedule();\r\n }, []);\r\n\r\n const pullAllBookingSchedule = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n const handleCheck = (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (val === 'Ad') {\r\n newSt.showChecks = true;\r\n newSt.selectedRowData = ev;\r\n }\r\n if (val === 'Ed') {\r\n newSt.showEditChecks = true;\r\n newSt.selectedRowData = ev;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const checkButton = (ev, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: ev,\r\n scheduleVehicleID: ev.scheduleVehicleID\r\n }));\r\n };\r\n\r\n const closeTheDialog = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showChecks: false,\r\n showEditChecks: false\r\n }));\r\n setOpenDialog({});\r\n res && pullAllBookingSchedule();\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n Update popup
\r\n ) : (\r\n\r\n {/* \r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )}\r\n {/* {row?.displayCompleteSchedule === 'Y' && ( */}\r\n {\r\n checkButton(row, 'complete');\r\n }}\r\n // onClick={() => {\r\n // alert('Functionality Pending');\r\n // }}\r\n toolTipTitle=\"Complete Schedule\"\r\n />\r\n {/* )} */}\r\n {row?.displayAddInspectionCheck === 'Y' && (\r\n {\r\n handleCheck(row, 'Ad');\r\n }}\r\n toolTipTitle=\"Add Inspection Check\"\r\n />\r\n )}\r\n {row?.displayEditInspectionCheck === 'Y' && (\r\n {\r\n handleCheck(row, 'Ed');\r\n }}\r\n toolTipTitle=\"Edit Inspection Check\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n let getUrl = `ServiceAgentSchedules?VehicleID=&Status=${5}`;\r\n\r\n return (\r\n \r\n {!props.VehicleID && ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n // btnTitle={gridBtnTitle}\r\n // onBtnClick={jobHandler}\r\n isReload={state.isReload}\r\n idFieldName={`${checkhaveAccess?.CanUploadScheduleDocuments ? 'scheduleID' : null}`}\r\n fileUploaderConfigName={`${checkhaveAccess?.CanUploadScheduleDocuments ? 'ScheduleDocumentsRequired' : null}`}\r\n downloadBtnName=\"Confirmed Bookings\"\r\n />\r\n )}\r\n {/* {openDialog.section ? (\r\n \r\n \r\n ) : null} */}\r\n {openDialog.notes ? (\r\n \r\n \r\n ) : null}\r\n {openDialog.complete ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ConfirmedBookings;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\n// import AddEditDefectModal from './ServiceAgentAddEditDefect'; //'./addEditDefectScreen';\r\nimport AddEditDefectModal from '../../InternalUser/Maintenance/Defects/addEditDefectScreen'; //'./addEditDefectScreen';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport { getAllDefects } from '../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { Link } from 'react-router-dom';\r\nimport DefectEditDetails from '../../InternalUser/Maintenance/Defects/DefectEditDetails';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Defects', path: '/', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n { key: 'defectNumberGenerated', name: 'Defect No', width: 80 },\r\n { key: 'defectDescription', name: 'Defect Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: 150 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 200 }\r\n];\r\n\r\nconst ServiceAgentDefectsScreen = (props) => {\r\n let history = useHistory();\r\n const [state, setState] = useState({ modalToggle: false, rowVehicleID: null, defectID: null, List: [], showLoader: true, fromPage: 'Defects' });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n useEffect(async () => {\r\n if (props.frompage === 'Vehicles') {\r\n setState((st) => ({\r\n ...st,\r\n fromPage: props.frompage\r\n }));\r\n }\r\n pullDefects();\r\n }, []);\r\n\r\n const pullDefects = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n state: 'defects'\r\n });\r\n };\r\n\r\n const handleEditDefect = (val) => {\r\n props.history.push({\r\n pathname: `/maintenance/defect/edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n Update popup
\r\n ) : state.showChecks ? (\r\n\r\n {!state.defectID && closeModalHandler(true, 'modalToggle')}\r\n fromPage={state.fromPage}\r\n isAddJobBtnShow={true}\r\n />\r\n ) : state.modalEditDetail ? (\r\n closeModalHandler(true, 'modalEditDetail')}\r\n fromPage={state.fromPage}\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=\"VehicleDefects\"\r\n btnTitle={gridBtnTitle}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"DefectScreen\"\r\n onBtnClick={() => handleUpdate(null, state.filterVehicleID, 'modalToggle')}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default ServiceAgentDefectsScreen;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport { getAllBookingSchedule } from '../../../../Core/Services/ServiceAgent/Schedule/BookingReq';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport { Link } from 'react-router-dom';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\n// import ScheduleNotes from '../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\n// import ServiceAgentScheduleBookingSection from './BookingSection';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport ScheduleNotes from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport '../../../commonStyle.scss';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst baseColumns = [\r\n // { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n // { key: 'vehicleRegNumber', name: 'Reg Number' },\r\n // { key: 'ScheduleRequestedBookingDate', name: 'Booking Date', formatter: formatters.Date_DDMMYYYY },\r\n // { key: 'scheduleDateDue', name: 'Date Due', formatter: formatters.Date_DDMMYYYY },\r\n // { key: 'scheduleEventName', name: 'Event' },\r\n // { key: 'customerCompanyName', name: 'Customer' },\r\n // { key: 'depotName', name: 'Depot' }\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n { key: 'scheduleRequestedBookingDate', name: 'Requested', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleDateDue', name: 'Due', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'scheduleRequestedBookingTimeSlot', name: 'Time Slot' },\r\n { key: 'scheduleEventName', name: 'Event' },\r\n { key: 'scheduleNightBooking', name: 'Night Booking' },\r\n { key: 'scheduleDeliverBefore', name: 'Deliver Before' },\r\n { key: 'scheduleCollectAfter', name: 'Collect After' },\r\n { key: 'vehicleRegNumber', name: 'Reg Number' },\r\n { key: 'customerCompanyName', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' }\r\n];\r\n\r\nconst AcceptRejectByAgent = (props) => {\r\n const [state, setState] = useState({ modalToggle: false, rowVehicleID: null, defectID: null, List: [], showLoader: true, isReload: null });\r\n const [openDialog, setOpenDialog] = useState({});\r\n const isDirectLink = window.location.pathname.includes('bookingaccepted') ? 2 : 3;\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Schedule' },\r\n { name: isDirectLink == 2 ? 'Booking Accepted' : 'Booking Rejected', path: '/', active: true }\r\n ];\r\n\r\n useEffect(async () => {\r\n pullAllBookingSchedule();\r\n }, [isDirectLink]);\r\n\r\n const pullAllBookingSchedule = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const checkButton = (ev, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: ev,\r\n scheduleVehicleID: ev.scheduleVehicleID\r\n }));\r\n };\r\n\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n res && pullAllBookingSchedule();\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n \r\n {row?.displayNotes === 'Y' && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n let getUrl = `ServiceAgentSchedules?VehicleID=&Status=${isDirectLink}`;\r\n return (\r\n \r\n {!props.VehicleID && ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={getUrl}\r\n // btnTitle={gridBtnTitle}\r\n // onBtnClick={jobHandler}\r\n isReload={state.isReload}\r\n idFieldName=\"scheduleID\"\r\n fileUploaderConfigName=\"ScheduleDocumentsRequired\"\r\n downloadBtnName={isDirectLink == 2 ? 'Booking Accepted' : 'Booking Rejected'}\r\n />\r\n )}\r\n {openDialog.notes ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default AcceptRejectByAgent;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../Core/Controls/Grid/index';\r\nimport { getJobsByScreenCode } from '../../../Core/Services/ServiceAgent/serviceAgentJobsService';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport JobQueryModal from '../../InternalUser/Controllers/JOBS/JobStatusBtn/JobQuery';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY, width: 120 },\r\n { key: 'agentOrderNo', name: 'Job Ref', width: 140 },\r\n { key: 'vehicleRegNumber', name: 'Reg No', width: 120 },\r\n { key: 'jobDescription', name: 'Job Description' },\r\n // { key: 'serviceAgentName', name: 'Service Agent' },\r\n // { key: 'depotName', name: 'Depots' },\r\n {\r\n key: 'partsTotal',\r\n name: 'Parts',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 100\r\n },\r\n {\r\n key: 'labourTotal',\r\n name: 'Labour',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 100\r\n },\r\n {\r\n key: 'orderTotal',\r\n name: 'Total',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right',\r\n width: 120\r\n },\r\n { key: 'customerCompanyName', name: 'Customer', width: 180 }\r\n];\r\n\r\nconst getCrumbs = (code, isServiceAgent) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '/' },\r\n { name: code == 'ER' ? 'Estimates' : 'Jobs', active: true }\r\n ];\r\n if (code == 'PP' || code == 'AR' || code == 'FR') {\r\n temp = { name: 'Awaiting Approvals', active: true };\r\n } else if (code == 'BO') {\r\n temp = { name: 'Breakdown Onsite', active: true };\r\n } else if (code == 'BR') {\r\n temp = { name: 'Breakdown Roadside', active: true };\r\n } else if (code == 'DD') {\r\n temp = { name: 'Driver Defects', active: true };\r\n } else if (code == 'EP') {\r\n temp = { name: `${isServiceAgent ? 'Estimates Pending' : 'Awaiting Approval'}`, active: true };\r\n } else if (code == 'ER') {\r\n temp = { name: 'Estimate Revised', active: true };\r\n } else if (code == 'SD') {\r\n temp = { name: 'Schedule Defects', active: true };\r\n } else if (code == 'EC') {\r\n temp = { name: 'Estimate Under Customer Review', active: true };\r\n } else if (code == 'QJ' || code == 'JQ') {\r\n temp = { name: 'Queried Jobs', active: true };\r\n } else if (code == 'EA') {\r\n temp = { name: 'Estimates Accepted', active: true };\r\n } else if (code == 'EQ') {\r\n temp = { name: 'Estimates Queried', active: true };\r\n } else if (code == 'CA') {\r\n temp = { name: 'Approved', active: true };\r\n } else {\r\n temp = { name: 'Open Jobs', active: true };\r\n }\r\n final.push(temp);\r\n return final;\r\n};\r\nconst CommonJobsScreen = (props) => {\r\n const [state, setState] = useState({ showLoader: true, open: false, rows: [], isReload: null });\r\n const history = useHistory();\r\n const { userRoles } = useLoginInfo();\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n\r\n useEffect(async () => {\r\n pullApiData();\r\n }, []);\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n history.push({\r\n pathname: `/controller/jobTabScreen/${val?.jobID}/${val?.jobVehicleID}`\r\n });\r\n };\r\n\r\n const handleShowQueries = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: true, jobID: val?.jobID }));\r\n };\r\n\r\n const closeTheDialog = (val) => {\r\n setState((state) => ({ ...state, showJobQuery: false, jobID: '' }));\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n Update popup
\r\n ) : (\r\n\r\n handleShowQueries(row)}\r\n />\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} toolTipTitle=\"Edit Job\" />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n let actionjobDateCol = newColumn.find((item) => item.key === 'jobDate');\r\n if (actionjobDateCol || true) {\r\n actionjobDateCol.formatter = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {row.bookingDate ? formatters.YearFormatter(row.bookingDate) : formatters.YearFormatter(row.jobDate)}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n }\r\n // if (!isServiceAgent) {\r\n // newColumn.splice(1, 0, { key: 'serviceAgentName', name: 'Service Agent' });\r\n // }\r\n return newColumn;\r\n }, []);\r\n\r\n const crumbs = getCrumbs(props.screenCode, isServiceAgent);\r\n\r\n const jobHandler = () => {\r\n alert('hello');\r\n };\r\n\r\n const closeModal = () => {\r\n setState((st) => ({ ...st, open: false }));\r\n };\r\n let getUrl = `ServiceAgentJobs?JobStatusID=${props.screenCode}`;\r\n return (\r\n \r\n ({\r\n records: res.data.schedules,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n idFieldName={`${checkhaveAccess?.CanUploadJobDocuments ? 'jobID' : null}`}\r\n fileUploaderConfigName={`${checkhaveAccess?.CanUploadJobDocuments ? 'JobScreen' : null}`}\r\n getUrl={getUrl}\r\n // btnTitle={gridBtnTitle}\r\n onBtnClick={jobHandler}\r\n isReload={state.isReload}\r\n />\r\n {state.showJobQuery && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default CommonJobsScreen;\r\n","import { postWithAuth, getWithAuth, putWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getAllReports = async () => {\r\n let res = await getWithAuth('UserReports');\r\n return res;\r\n};\r\n\r\nexport const getAllDropdowns = async () => {\r\n let res = await getWithAuth(`UserReports/ReportsDetailsDropDown`);\r\n return res;\r\n};\r\n\r\nexport const getReportsById = async (Id) => {\r\n let res = await getWithAuth(`UserReports/ReportsDetailsGetDetails/${Id}`);\r\n return res;\r\n};\r\n\r\nexport const ReportsDetailsSave = async (data) => {\r\n let res = await postWithAuth('UserReports/ReportsDetailsSave', data);\r\n return res;\r\n};\r\n\r\nexport const ReportsColumnsGetDetails = async (id) => {\r\n let res = await getWithAuth(`UserReports/UserReportsColumnsGetDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const ReportsColumnsSave = async (data) => {\r\n let res = await postWithAuth('UserReports/UserReportsColumnsSave', data);\r\n return res;\r\n};\r\n\r\nexport const ReportSelectionsGetDetails = async (id) => {\r\n let res = await getWithAuth(`UserReports/UserReportSelectionsGetDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const ReportSelectionsSave = async (data) => {\r\n let res = await postWithAuth(`UserReports/UserReportSelectionsSave`, data);\r\n return res;\r\n};\r\n\r\nexport const UserReportSequenceSave = async (data) => {\r\n let res = await postWithAuth(`UserReports/UserReportSequenceSave`, data);\r\n return res;\r\n};\r\n\r\nexport const GetReportSequence = async (id) => {\r\n let res = await getWithAuth(`UserReports/UserReportSequenceGetDetails/${id}`);\r\n return res;\r\n};\r\n\r\nexport const ReportCombinedSave = async (data) => {\r\n let res = await postWithAuth(`UserReports/UserReportCombinedSave`, data);\r\n return res;\r\n};\r\n\r\nexport const GetFilterdReport = async (id) => {\r\n let res = await getWithAuth(`UserReports/GetReportList/${id}`);\r\n return res;\r\n};\r\nexport const GetReportExcelDFile = async (id) => {\r\n let res = await getWithAuth(`UserReports/GetExcelReport/${id}`,{ responseType: 'blob', returnOrgRes: true });\r\n return res;\r\n};\r\n","import Step from '@material-ui/core/Step';\r\nimport StepConnector from '@material-ui/core/StepConnector';\r\nimport StepLabel from '@material-ui/core/StepLabel';\r\nimport Stepper from '@material-ui/core/Stepper';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport CreateIcon from '@material-ui/icons/Create';\r\nimport ReportIcon from '@material-ui/icons/Report';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport ViewWeekIcon from '@material-ui/icons/ViewWeek';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nconst useQontoStepIconStyles = makeStyles({\r\n root: {\r\n color: '#eaeaf0',\r\n display: 'flex',\r\n height: 22,\r\n alignItems: 'center',\r\n },\r\n active: {\r\n color: '#784af4',\r\n },\r\n circle: {\r\n width: 8,\r\n height: 8,\r\n borderRadius: '50%',\r\n backgroundColor: 'currentColor',\r\n },\r\n completed: {\r\n color: '#784af4',\r\n zIndex: 1,\r\n fontSize: 18,\r\n },\r\n});\r\n\r\nfunction QontoStepIcon(props) {\r\n const classes = useQontoStepIconStyles();\r\n const { active } = props;\r\n\r\n return (\r\n \r\n \r\n {label} \r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import { createContext, useEffect, useState } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport {\r\n getAllDropdowns,\r\n ReportsDetailsSave,\r\n getReportsById,\r\n ReportsColumnsGetDetails,\r\n ReportsColumnsSave,\r\n ReportSelectionsGetDetails,\r\n ReportSelectionsSave,\r\n UserReportSequenceSave,\r\n GetReportSequence,\r\n ReportCombinedSave\r\n} from '../../../../Core/Services/InternalUser/ReportsService';\r\n\r\nexport const ReportsScreenContext = createContext();\r\n\r\nexport const ReportsProvider = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n activeStep: 0,\r\n userReportName: '',\r\n errors: {},\r\n userReportSendEmail: false,\r\n operator: [\r\n { id: '=', name: '=' },\r\n { id: '>', name: '>' },\r\n { id: '>=', name: '>=' },\r\n { id: '<', name: '<' },\r\n { id: '<=', name: '<=' }\r\n ],\r\n schedule: [],\r\n reportCatalogue: [],\r\n userReportID: null,\r\n selectionList: [],\r\n columnList: [],\r\n allColumnsList: [],\r\n userColumnId: null,\r\n selectedColumns: [],\r\n rows: [],\r\n showLoader: true,\r\n sequenceReportCatID: null,\r\n selectiondetails: [],\r\n sequenceColumList: [],\r\n sequenceList: [\r\n { id: 'asc', name: 'Ascending' },\r\n { id: 'desc', name: 'Descending' }\r\n ],\r\n getCol: false,\r\n sequenceVM: [],\r\n userReportSequenceOrder: '',\r\n sequenceReportCatID: null,\r\n saveReportFlag: false,\r\n AllsequenceColumList: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAllDropdowns();\r\n let data = res.data;\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n // operator: [],\r\n reportCatalogue: data.reportCatalogues.map((m) => ({ id: m.reportCatalogueID, name: m.reportCatalogueName })),\r\n schedule: data.reportSchedules.map((m) => ({ id: m.reportScheduleID, name: m.reportScheduleTitle }))\r\n }));\r\n } else {\r\n showToastError(res.messages);\r\n }\r\n if (props.userReportID) {\r\n let res = await getReportsById(props.userReportID);\r\n let data = res?.data?.details[0];\r\n setState((st) => ({\r\n ...st,\r\n userReportUserID: data?.userReportUserID,\r\n userReportID: data?.userReportID,\r\n userReportName: data?.userReportName,\r\n userReportScheduleID: data?.userReportScheduleID,\r\n userReportSendEmail: data?.userReportSendEmail,\r\n userReportCatalogueID: data?.userReportCatalogueID\r\n }));\r\n getDetailsSelections(props.userReportID);\r\n getColumnsDetails(props.userReportID);\r\n }\r\n }, []);\r\n\r\n const getColumnsDetails = async (val) => {\r\n let res = await ReportsColumnsGetDetails(val);\r\n const data = res.data?.reportCatalogueColumns?.map((w) => ({\r\n id: w.reportCatalogueColumnID,\r\n name: w.reportCatalogueColumnDisplayName\r\n }));\r\n if (res.success) {\r\n setState((m) => ({\r\n ...m,\r\n columnList: data,\r\n allColumnsList: res.data?.reportCatalogueColumns,\r\n rows: res.data?.details?.map((m) => ({ ...m, reportCatalogueColumnID: m.userReportCatalogueColumnID })) || [],\r\n selectedColumns: res.data?.details?.map((w) => w.userReportCatalogueColumnID) || [],\r\n getCol: true\r\n }));\r\n }\r\n };\r\n\r\n const getFilteredRows = (id) => {\r\n let filteredRows = [...state.rows];\r\n let isAvi = state.selectedColumns.find((q) => q == id);\r\n if (!isAvi) {\r\n let temp = [...new Set([...state.selectedColumns, id])];\r\n let tuka = state.allColumnsList?.filter((i) => i.reportCatalogueColumnID == id);\r\n filteredRows = [...filteredRows, ...tuka];\r\n setState((st) => ({ ...st, rows: filteredRows, selectedColumns: temp, showLoader: false }));\r\n }\r\n };\r\n\r\n const handleDelete = (id) => {\r\n const newList = state.rows.filter((item) => item.reportCatalogueColumnID !== id);\r\n const newSelectedColumns = state.selectedColumns.filter((item) => item !== id);\r\n setState((st) => ({ ...st, rows: newList, selectedColumns: newSelectedColumns }));\r\n };\r\n\r\n const inputChange = (e) => {\r\n const { name, value, checked, type } = e.target;\r\n if (name == 'userColumnId' && value) {\r\n getFilteredRows(value);\r\n } else if (type?.toLowerCase() === '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 reportInputChange = (e) => {\r\n const { name, value, checked, type } = e.target;\r\n if (type?.toLowerCase() === 'checkbox') {\r\n setState((st) => ({ ...st, [name]: checked, saveReportFlag: true }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value, saveReportFlag: true }));\r\n }\r\n };\r\n\r\n const handleSubmit = async () => {\r\n const selectionList = state.selectionList.map((m) => ({\r\n userReportCatalogueColumnID: m?.reportCatalogueColumnID,\r\n userReportSelectionOperator: m?.userReportSelectionOperator,\r\n userReportFromValue: m?.userReportFromValue,\r\n userReportToValue: m?.userReportToValue\r\n }));\r\n\r\n const combinedData = {\r\n userReportID: state.userReportID,\r\n userReportCatalogueID: state.userReportCatalogueID,\r\n userReportName: state.userReportName,\r\n userReportScheduleID: state.userReportScheduleID,\r\n userReportSendEmail: state.userReportSendEmail,\r\n userReportColumns: state.selectedColumns,\r\n userReportSelectionsVM: selectionList.filter((o) => {\r\n if (o.userReportSelectionOperator) return o;\r\n }),\r\n userReportSequenceReportCatalogueColumnID: state.sequenceVM?.map((m) => ({\r\n userReportSequenceReportCatalogueColumnID: m.userReportSequenceReportCatalogueColumnID,\r\n userReportSequenceOrder: m.userReportSequenceOrder\r\n }))\r\n };\r\n\r\n let res = await ReportCombinedSave(combinedData);\r\n if (res.success) {\r\n showToastSuccess('Data Saved Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError('Something went Wrong');\r\n }\r\n };\r\n\r\n const handlePreviousStep = (step) => {\r\n if (state.activeStep + step < 0 || state.activeStep + step > 3) return;\r\n setState((st) => ({\r\n ...st,\r\n activeStep: state.activeStep + step\r\n }));\r\n };\r\n\r\n const handleNextSteps = async (step) => {\r\n if (state.activeStep == 2) {\r\n if (validation()) {\r\n setState((st) => ({\r\n ...st,\r\n activeStep: state.activeStep + step\r\n }));\r\n }\r\n } else {\r\n if (state.activeStep + step < 0 || state.activeStep + step > 3) return;\r\n setState((st) => ({\r\n ...st,\r\n activeStep: state.activeStep + step\r\n }));\r\n }\r\n if (state.activeStep == 0 && state.saveReportFlag) {\r\n handelSaveReportDetails();\r\n }\r\n };\r\n\r\n const handelSaveReportDetails = async () => {\r\n const data = {\r\n userReportID: state.userReportID,\r\n userReportCatalogueID: state.userReportCatalogueID,\r\n userReportName: state.userReportName,\r\n userReportScheduleID: state.userReportScheduleID,\r\n userReportSendEmail: state.userReportSendEmail\r\n };\r\n let res = await ReportsDetailsSave(data);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n userReportID: res.data?.userReportID,\r\n saveReportFlag: false\r\n }));\r\n getDetailsSelections(res.data.userReportID);\r\n getColumnsDetails(res.data.userReportID);\r\n showToastSuccess('Columns Saved SuccessFully');\r\n } else {\r\n showToastError(res.messages);\r\n }\r\n };\r\n\r\n const getSequenceById = async (val) => {\r\n let res = await GetReportSequence(val);\r\n if (res.success) {\r\n const temp = res?.data?.reportCatalogueColumns;\r\n const val = res?.data?.details;\r\n\r\n setState((st) => ({\r\n ...st,\r\n sequenceVM: val || [],\r\n AllsequenceColumList: temp\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const results = state.AllsequenceColumList.filter(\r\n ({ reportCatalogueColumnID: id1 }) => !state.sequenceVM?.some(({ userReportSequenceReportCatalogueColumnID: id2 }) => id2 === id1)\r\n );\r\n const data = results.map((w) => ({\r\n id: w.reportCatalogueColumnID,\r\n name: w.reportCatalogueColumnDisplayName\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n sequenceColumList: data\r\n }));\r\n }, [state.sequenceVM]);\r\n\r\n const deleteSequence = (data) => {\r\n const newList = state.sequenceVM?.filter((item) => item.userReportSequenceReportCatalogueColumnID !== data.userReportSequenceReportCatalogueColumnID);\r\n setState((st) => ({ ...st, sequenceVM: newList }));\r\n };\r\n\r\n const validation = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n let checkOpCondition = state.selectionList.map((m) => {\r\n if (m.userReportSelectionOperator == '=') {\r\n if (!/[^\\s]/.test(m.userReportFromValue) || !m.userReportFromValue) {\r\n errors[`fromError${m.reportCatalogueColumnID}`] = 'From value is required';\r\n formIsValid = false;\r\n }\r\n // if (!/[^\\s]/.test(m.userReportToValue) || !m.userReportToValue) {\r\n // errors[`toError${m.reportCatalogueColumnID}`] = 'To value is required';\r\n // formIsValid = false;\r\n // }\r\n }\r\n if (m.userReportSelectionOperator == '>' || m.userReportSelectionOperator == '>=') {\r\n if (!m.userReportFromValue) {\r\n errors[`fromError${m.reportCatalogueColumnID}`] = 'From value is required';\r\n formIsValid = false;\r\n }\r\n }\r\n if (m.userReportSelectionOperator == '<' || m.userReportSelectionOperator == '<=') {\r\n if (!m.userReportToValue) {\r\n errors[`toError${m.reportCatalogueColumnID}`] = 'To value is required';\r\n formIsValid = false;\r\n }\r\n }\r\n if (!m.userReportSelectionOperator) {\r\n if (m.userReportFromValue || m.userReportFromValue) {\r\n errors[`toOprator${m.reportCatalogueColumnID}`] = 'Oprator value is required';\r\n formIsValid = false;\r\n }\r\n }\r\n return m;\r\n });\r\n setState((st) => ({\r\n ...st,\r\n selectionList: checkOpCondition,\r\n errors: errors\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n const getDetailsSelections = async (val) => {\r\n let res = await ReportSelectionsGetDetails(val);\r\n if (res.success) {\r\n const temp = res?.data?.reportCatalogueColumns;\r\n const val = res?.data?.details;\r\n let selectionDetailsList = [];\r\n for (let i = 0; i < temp.length; i++) {\r\n selectionDetailsList.push({\r\n ...temp[i],\r\n ...val?.find((itmInner) => itmInner.userReportCatalogueColumnID === temp[i].reportCatalogueColumnID)\r\n });\r\n }\r\n setState((st) => ({\r\n ...st,\r\n selectionList: selectionDetailsList\r\n }));\r\n }\r\n };\r\n\r\n const seqValidations = () => {\r\n const { sequenceReportCatID, userReportSequenceOrder } = state;\r\n let emptyStrigPattern = /[^\\s]/;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!emptyStrigPattern.test(sequenceReportCatID)) {\r\n errors.sequenceReportCatID = 'Column is required';\r\n formIsValid = false;\r\n }\r\n // if (!emptyStrigPattern.test(userReportSequenceOrder)) {\r\n // errors.userReportSequenceOrder = ' Order is required';\r\n // formIsValid = false;\r\n // }\r\n if (!userReportSequenceOrder) {\r\n errors.userReportSequenceOrder = ' Order is required';\r\n formIsValid = false;\r\n }\r\n setState((state) => ({ ...state, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handelAddSequence = () => {\r\n if (seqValidations()) {\r\n let colname = state.allColumnsList?.find(\r\n (itmInner) => itmInner.reportCatalogueColumnID == state.sequenceReportCatID\r\n ).reportCatalogueColumnDisplayName;\r\n const data = {\r\n reportCatalogueColumnDisplayName: colname,\r\n userReportSequenceReportCatalogueColumnID: state.sequenceReportCatID,\r\n userReportSequenceOrder: state.userReportSequenceOrder,\r\n seqDescription: state.userReportSequenceOrder === 'asc' ? 'Ascending' : 'Descending'\r\n };\r\n let temp = [...state.sequenceVM, data];\r\n setState((st) => ({ ...st, sequenceVM: temp, sequenceReportCatID: '', userReportSequenceOrder: null }));\r\n }\r\n };\r\n\r\n const selectionOnChange = (id) => (e) => {\r\n const { name, value } = e.target;\r\n let temp = [...state.selectionList];\r\n let objIndex = state.selectionList.findIndex((x) => x.reportCatalogueColumnID === id);\r\n temp[objIndex][`${name}`] = value;\r\n const op = temp[objIndex]['userReportSelectionOperator'];\r\n if (op == '>' || op == '>=') {\r\n temp[objIndex][`userReportToValue`] = '';\r\n }\r\n if (op == '<' || op == '<=') {\r\n temp[objIndex][`userReportFromValue`] = '';\r\n }\r\n setState((st) => ({ ...st, selectionList: temp }));\r\n };\r\n\r\n useEffect(() => {\r\n if (state.activeStep === 3) {\r\n getSequenceById(state.userReportID);\r\n }\r\n }, [state.activeStep]);\r\n\r\n return (\r\n \r\n handleDelete(data.row.reportCatalogueColumnID)} toolTipTitle=\"Delete Job Item\" />\r\n
\r\n );\r\n };\r\n\r\n const dataFormatterSequenceColumn = (data) => {\r\n return (\r\n \r\n deleteSequence(data.row)} toolTipTitle=\"Delete Job Item\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, [state.selectedColumns]);\r\n\r\n const sequenceColumn = useMemo(() => {\r\n const tempCols = [...baseSequenceColumn];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatterSequenceColumn;\r\n }\r\n return tempCols;\r\n }, [state.sequenceVM]);\r\n\r\n function getStepContent() {\r\n switch (state.activeStep) {\r\n case 0:\r\n return (\r\n <>\r\n {state.errors[`toOprator${m.reportCatalogueColumnID}`]}
\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=\"UserReports\"\r\n btnTitle=\"Add Report\"\r\n onBtnClick={() => handleAdd(null)}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default ReportsListScreen;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport '../../../../Components/commonStyle.scss';\r\nimport { BreadCrumbs, CustomChip, DataGrid, EditButton, formatters, SecondaryButton } from '../../../../Core/Controls';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { GetFilterdReport, GetReportExcelDFile } from '../../../../Core/Services/InternalUser/ReportsService';\r\nimport moment from 'moment';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reports', path: '/', active: true },\r\n { name: 'Reports List', path: '/reports/reportlist/' }\r\n];\r\n\r\nconst FilteredReportsListScreen = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [state, setState] = useState({\r\n column: [],\r\n rows: [],\r\n showLoader: true\r\n });\r\n const pullReportsAndUpdateState = async () => {\r\n let res = await GetFilterdReport(props.match.params.id);\r\n\r\n if (res.success) {\r\n let colData = res.data.columns?.map((m) => ({\r\n key: m.reportCatalogueColumnDatabaseName.charAt(0).toLowerCase() + m.reportCatalogueColumnDatabaseName.slice(1),\r\n name: m.reportCatalogueColumnDisplayName\r\n // type: m.reportCatalogueColumnFieldType,\r\n // formatter: m.reportCatalogueColumnFieldType === 'D' ? formatters.Date_DDMMYY : null\r\n }));\r\n\r\n setState((st) => ({\r\n ...st,\r\n column: colData || [],\r\n rows: res.data.rows || [],\r\n showLoader: false\r\n }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullReportsAndUpdateState();\r\n }, [props.match.params.id]);\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCrumbs = [...baseCrumbs];\r\n tempCrumbs.push({ name: `${props.match.params.name}`, path: '/', active: true });\r\n return tempCrumbs;\r\n }, [props.match.params.name]);\r\n\r\n const downloadPdf = async () => {\r\n let res = await GetReportExcelDFile(props.match.params.id);\r\n if (res) {\r\n const url = window.URL.createObjectURL(new Blob([res.data]));\r\n const link = document.getElementById('tempDownloadPDFLink') || document.createElement('a');\r\n link.id = 'tempDownloadPDFLink';\r\n link.href = url;\r\n link.setAttribute('download', `Report${moment().format('DD-MMM-YYYY HH:mm')}.xlsx`);\r\n document.body.appendChild(link);\r\n link.click();\r\n link.remove();\r\n return true;\r\n }\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {state.rows.length > 0 && (\r\n \r\n \r\n )}\r\n \r\n handleAdd(null)}\r\n paginate\r\n offset={230}\r\n />\r\n
\r\n );\r\n};\r\nexport default FilteredReportsListScreen;\r\n","import React, { useEffect, useState } from 'react';\r\nimport 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 { getAllCustomerDashboard } from '../../../Core/Services/Customer/customerDashService';\r\nimport { Link } from 'react-router-dom';\r\nimport LocalTaxiRoundedIcon from '@material-ui/icons/LocalTaxiRounded';\r\n\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport CreditCardIcon from '@material-ui/icons/CreditCard';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';\r\nimport FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DirectionsCarIcon from '@material-ui/icons/DirectionsCar';\r\nimport '../CustomerDash.scss';\r\nimport ReactSpeedometer from 'react-d3-speedometer';\r\nimport ChatBubbleIcon from '@material-ui/icons/ChatBubble';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DashboardCard from '../../InternalUser/Dashboard/dashboardCard';\r\nimport { getAllDashboardWidgets } from '../../../Core/Services/dasboardWidgetsService';\r\nimport { FromLoader } from '../../../Core/Loader/formLoader';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport ErrorIcon from '@material-ui/icons/Error';\r\nimport { SecondaryButton } from '../../../Core/Controls';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport { Switch } from '@material-ui/core';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n width: '90%'\r\n }\r\n});\r\n\r\nlet gridStyle = {\r\n 1: 12,\r\n 2: 6,\r\n 3: 3\r\n};\r\n\r\nlet redColor = '#ff4757';\r\nlet redShadowColor = 'rgb(255 32 54 / 53%)';\r\nlet yellowColor = '#ffc312';\r\nlet yellowShadowColor = 'rgba(255, 236, 30, 0.75)';\r\nlet purpleColor = '#7d38df';\r\nlet purpleShadowColor = 'rgba(200, 61, 255, 0.596)';\r\nlet greenColor = '#009432';\r\nlet greenShadowColor = 'rgba(0, 148, 50, 0.53)';\r\nlet blueColor = '#1127ee';\r\nlet blueShadowColor = '#909bf7';\r\n\r\nconst CustomerDashobard = () => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n rows_new: [],\r\n tilesData: [],\r\n widgetList: [],\r\n showFilter: false\r\n });\r\n\r\n const [checked, setChecked] = useState({});\r\n\r\n const [widgets, setWidgets] = useState({});\r\n let DowntimeDash = [\r\n {\r\n Icon: LocalTaxiRoundedIcon,\r\n numberIcon: state.tilesData.breakdownPercent,\r\n title: state.tilesData.breakdowns || 0,\r\n subTittle: 'Breakdown',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: checkhaveAccess?.CanViewBreakdowns ? '/maintenance/breakdowns/:all' : ''\r\n },\r\n {\r\n Icon: LocalTaxiRoundedIcon,\r\n numberIcon: state.tilesData.defectPercent,\r\n title: state.tilesData.defects || 0,\r\n subTittle: 'Defects',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: checkhaveAccess?.CanViewDefects ? '/maintenance/defects' : ''\r\n },\r\n {\r\n Icon: LocalTaxiRoundedIcon,\r\n numberIcon: state.tilesData.vorPercent,\r\n title: state.tilesData.vor || 0,\r\n subTittle: 'VOR',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: checkhaveAccess?.CanViewVOR ? {\r\n pathname: '/controller/vor',\r\n query: { FromDash: true }\r\n }:''\r\n }\r\n ];\r\n\r\n let MaintananceEvent = [\r\n {\r\n id: 5,\r\n Icon: LocalTaxiRoundedIcon,\r\n title: state.tilesData.serviceCount || 0,\r\n subTittle: 'Services',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/maintenance/schedules/S'\r\n },\r\n {\r\n id: 6,\r\n Icon: DirectionsCarIcon,\r\n title: state.tilesData.motCount || 0,\r\n subTittle: 'MOTs',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/maintenance/schedules/M'\r\n },\r\n {\r\n id: 7,\r\n Icon: BuildIcon,\r\n title: state.tilesData.inspectionCount || 0,\r\n subTittle: 'Inspections',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: '/maintenance/schedules/I'\r\n },\r\n {\r\n id: 8,\r\n Icon: FormatListBulletedIcon,\r\n title: state.tilesData.otherCount || 0,\r\n subTittle: 'Others',\r\n background: purpleColor,\r\n showDowBackground: purpleShadowColor,\r\n path: '/maintenance/schedules/O'\r\n }\r\n ];\r\n\r\n let FleetDash = [\r\n {\r\n Icon: AttachMoneyIcon,\r\n\r\n title: state.tilesData.taxCount || 0,\r\n subTittle: 'Tax',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/controller/Vehicles/T'\r\n },\r\n {\r\n Icon: CreditCardIcon,\r\n\r\n title: state.tilesData.insuranceCount || 0,\r\n subTittle: 'Insurance',\r\n background: purpleColor,\r\n showDowBackground: purpleShadowColor,\r\n path: '/controller/Vehicles/I'\r\n },\r\n {\r\n Icon: CheckIcon,\r\n\r\n title: state.tilesData.complianceCount || 0,\r\n subTittle: 'Compliance',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/schedule/outstandingdocuments'\r\n }\r\n ];\r\n\r\n let FleetSchedule = [\r\n {\r\n Icon: ErrorIcon,\r\n title: state.tilesData.bookingsRequested || 0,\r\n subTittle: 'Bookings Requested',\r\n background: yellowColor,\r\n showDowBackground: yellowShadowColor,\r\n path: '/schedule/bookingsrequsted'\r\n },\r\n {\r\n Icon: CheckIcon,\r\n title: state.tilesData.bookingsAccepted || 0,\r\n subTittle: 'Bookings Accepted',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/schedule/acceptedbyagents'\r\n },\r\n\r\n {\r\n Icon: ClearIcon,\r\n\r\n title: state.tilesData.bookingsRejected || 0,\r\n subTittle: 'Bookings Rejected',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: '/schedule/bookingsrejected'\r\n },\r\n {\r\n Icon: BuildIcon,\r\n title: state.tilesData.bookingsConfirmed || 0,\r\n subTittle: 'Bookings Confirmed',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: '/schedule/confirmedbookings'\r\n }\r\n ];\r\n\r\n let DriverCheck = [\r\n {\r\n Icon: ClearIcon,\r\n title: state.tilesData.dailyChecksFailed || 0,\r\n subTittle: 'Failed',\r\n background: redColor,\r\n showDowBackground: redShadowColor,\r\n path: '/customerDailyChecks/failed'\r\n },\r\n {\r\n Icon: ErrorIcon,\r\n title: state.tilesData.dailyChecksMonitored || 0,\r\n subTittle: 'Monitor',\r\n background: yellowColor,\r\n showDowBackground: yellowShadowColor,\r\n path: '/customerDailyChecks/monitor'\r\n },\r\n\r\n {\r\n Icon: CheckIcon,\r\n\r\n title: state.tilesData.dailyChecksPassed || 0,\r\n subTittle: 'Passed',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/customerDailyChecks/passed'\r\n },\r\n {\r\n Icon: BuildIcon,\r\n title: state.tilesData.dailyChecksUnreviewed || 0,\r\n subTittle: 'Unreviewed',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/customerDailyChecks/unreviwed'\r\n }\r\n ];\r\n\r\n let Jobs = [\r\n {\r\n Icon: CheckIcon,\r\n total: state.tilesData.jobsApprovedTotal || 0,\r\n title: state.tilesData.jobsApproved || 0,\r\n subTittle: 'Approved',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/serviceagent/CA'\r\n },\r\n {\r\n Icon: CheckIcon,\r\n total: state.tilesData.jobsInQueryTotal || 0,\r\n title: state.tilesData.jobsInQuery || 0,\r\n subTittle: 'In Query',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/serviceagent/CQ'\r\n },\r\n {\r\n Icon: CheckIcon,\r\n title: state.tilesData.jobsAwaitingApprovals || 0,\r\n total: state.tilesData.jobsAwaitingApprovalTotal || 0,\r\n subTittle: 'Awaiting Approvals',\r\n background: greenColor,\r\n showDowBackground: greenShadowColor,\r\n path: '/serviceagent/AR'\r\n }\r\n ];\r\n let ReportList = [\r\n {\r\n button: true,\r\n Icon: DashboardIcon,\r\n background: blueColor,\r\n showDowBackground: blueShadowColor,\r\n title: 'VOR',\r\n subTittle: ' Reporting',\r\n\r\n path: '/controller/VorReporting/'\r\n },\r\n {\r\n button: true,\r\n Icon: DashboardIcon,\r\n background: blueColor,\r\n showDowBackground: blueShadowColor,\r\n title: 'Defect',\r\n subTittle: 'Reporting',\r\n path: '/maintenance/defect/reporting/'\r\n },\r\n {\r\n button: true,\r\n Icon: DashboardIcon,\r\n background: blueColor,\r\n showDowBackground: blueShadowColor,\r\n title: 'Breakdown',\r\n subTittle: 'Reporting ',\r\n path: '/maintenance/breakdown/reporting/'\r\n }\r\n // {\r\n // button: true,\r\n // Icon: DashboardIcon,\r\n // background: blueColor,\r\n // showDowBackground: blueShadowColor,\r\n // title: 'Job',\r\n // subTittle: ' Reporting ',\r\n // path: '/job/job_Reporting'\r\n // }\r\n ];\r\n\r\n let setList = {\r\n 9: DowntimeDash,\r\n 10: MaintananceEvent,\r\n 14: FleetDash,\r\n 11: FleetSchedule,\r\n 12: Jobs,\r\n 13: DriverCheck,\r\n 16: ReportList\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getAllCustomerDashboard();\r\n const cards = res.data.filterdCustomer;\r\n pullDashboardData();\r\n setState((st) => ({\r\n ...st,\r\n tilesData: cards[0]\r\n }));\r\n }, []);\r\n\r\n const pullDashboardData = async () => {\r\n let dashRes = await getAllDashboardWidgets('customerdashboard');\r\n setState((st) => ({\r\n ...st,\r\n widgetList: dashRes?.data.displayStyles\r\n }));\r\n };\r\n\r\n function isNullCheck(val) {\r\n if (val) {\r\n return val;\r\n }\r\n return '0';\r\n }\r\n\r\n const handleFilter = () => {\r\n setState((st) => ({\r\n ...st,\r\n showFilter: !st.showFilter\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n var b = localStorage.getItem('_dashboard_');\r\n let val = JSON.parse(b);\r\n if (val) {\r\n setWidgets((st) => ({\r\n ...st,\r\n Grid_1: val?.gridObj.Grid_1,\r\n Grid_2: val?.gridObj.Grid_2,\r\n Grid_3: val?.gridObj.Grid_3,\r\n buttonID: val?.buttonID || 1\r\n }));\r\n }\r\n }, []);\r\n\r\n const PopUpCust = () => {\r\n const handleChange = (e) => {\r\n const { name, checked } = e.target;\r\n\r\n setChecked((st) => ({\r\n ...st,\r\n [name]: checked\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n {/* \r\n Widget Filter \r\n */}\r\n {state.widgetList?.length > 0 ? (\r\n state.widgetList.map((m, i) => {\r\n let gs = gridStyle[m.displayStyleID];\r\n let list = setList[m.widgetUsedID];\r\n return (\r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n {state.showFilter ? (\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CustomerDashobard;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllDriver } from '../../../Core/Services/InternalUser/ControllerService/driverService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport AddEditDriver from '../../InternalUser/Controllers/Driver/addEditDriver';\r\nimport '../../commonStyle.scss';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../Core/Basic/storage-service';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: '4%'\r\n },\r\n { key: 'driverFirstName', name: 'Name', width: '18%' },\r\n { key: 'driverDepotName', name: 'Depot Name', width: '18%' },\r\n {\r\n key: 'driverAddress1',\r\n name: 'Address',\r\n formatter: (data) => formatters.addressFormatter(data.row?.driveAddress1, data.row?.driveAddress2, data.row?.driverTown, data.row?.driverCounty)\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Drivers', active: true }\r\n];\r\n\r\nconst CustomerDriverScreen = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const { showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n DriverList: [],\r\n DriverID: null\r\n });\r\n\r\n const pullDriverAndUpdateState = async () => {\r\n setState((st) => ({ ...st, isReload: new Date() }));\r\n };\r\n\r\n useEffect(async () => {\r\n pullDriverAndUpdateState();\r\n }, []);\r\n\r\n const handleAdd = () => {\r\n setState((st) => ({\r\n ...st,\r\n show: true\r\n }));\r\n };\r\n\r\n const closeDriverModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullDriverAndUpdateState();\r\n };\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/editdriver/${val.driverID}/${val.driverFirstName}`,\r\n name: val.driverName\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return \r\n
\r\n )}\r\n \r\n {state.show ? (\r\n ({\r\n records: res.data.drivers,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n onBtnClick={handleAdd}\r\n btnTitle={checkhaveAccess?.CanAddDrivers ? 'Add Driver' : null}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustomerDriverScreen;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DataGrid, EditButton, formatters } from '../../../../Core/Controls';\r\nimport { getVechicleIDByRegNO } from '../../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport AddBreaddownModal from '../../../InternalUser/Maintenance/BreakDown/AddBreakdown'; //\"./AddBreakdown\";\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { Link } from 'react-router-dom';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\n// import { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst baseCrumbs = [{ name: 'Home', path: '/' }, { name: 'Maintenance' }, { name: 'Breakdowns', active: true }];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 110\r\n },\r\n { key: 'defectNumberGenerated', name: 'Defect No', width: 100 },\r\n { key: 'defectDescription', name: 'Defect Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: 150 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 200 },\r\n { key: 'defectType', name: 'DefectType', width: 150 }\r\n];\r\n\r\nconst CustomerBreakDownDashboard = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const [state, setState] = useState({\r\n breakdownList: [],\r\n loader: true,\r\n modalToggle: false,\r\n breakID: null,\r\n rowVehicleID: null,\r\n filterVal: '',\r\n show: false,\r\n filterVehicleID: null\r\n });\r\n\r\n const handleBreakDown = (params, VehicleID, modalName) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: true,\r\n breakID: params,\r\n rowVehicleID: VehicleID,\r\n modalName: modalName\r\n }));\r\n };\r\n\r\n const closeModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n filterVal: '',\r\n modalToggle: false,\r\n show: false,\r\n breakID: null,\r\n rowVehicleID: null\r\n }));\r\n res && pullBreakDownAndUpdateState();\r\n };\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.isReload = new Date();\r\n } else {\r\n newSt.show = false;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n\r\n // pullBreakDownAndUpdateState();\r\n }\r\n }, [state.filterVal, props.match]);\r\n\r\n useEffect(() => {\r\n pullBreakDownAndUpdateState();\r\n }, []);\r\n\r\n const pullBreakDownAndUpdateState = async () => {\r\n let defecttypecode = '';\r\n if (props.VehicleID) {\r\n defecttypecode = '';\r\n }\r\n if (props?.match?.params?.all == 'typebo') {\r\n defecttypecode = 'bo';\r\n }\r\n if (props?.match?.params?.all == 'typebr') {\r\n defecttypecode = 'br';\r\n }\r\n if (props?.match?.params?.all == ':all') {\r\n defecttypecode = '';\r\n }\r\n setState((st) => ({ ...st, defecttypecode: defecttypecode }));\r\n };\r\n\r\n let urlForcondition = `VehicleBreakdowns/?${props.VehicleID ? `VehicleID=${props.VehicleID}` : ''}defecttypecode=${state.defecttypecode}`;\r\n\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n state: 'breakdown'\r\n });\r\n };\r\n\r\n const handleEditBreakdown = (val) => {\r\n props.history.push({\r\n pathname: `/maintenance/breakdowns/Edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n {props.frompage !== 'Vehicles' ? (\r\n
\r\n closeModal(true)}\r\n breakDownID={state.breakID}\r\n isAddJobBtnShow={true}\r\n modalName={state.modalName}\r\n />\r\n \r\n ) : (\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleBreakDown(null, state.filterVehicleID, 'Add')}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"BreakdownScreen\"\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default CustomerBreakDownDashboard;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport AddEditDefectModal from '../../../InternalUser/Maintenance/Defects/addEditDefectScreen';\r\nimport { getVechicleIDByRegNO } from '../../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport DefectEditDetails from '../../../InternalUser/Maintenance/Defects/DefectEditDetails';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Defects', path: '/', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 120, addFileUploaderIcon: true },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 110\r\n },\r\n { key: 'defectNumberGenerated', name: 'Defect No', width: 90 },\r\n { key: 'defectDescription', name: 'Defect Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: 150 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 200 },\r\n { key: 'defectType', name: 'DefectType', width: 150 }\r\n];\r\n\r\nconst CustomerDefectsScreen = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n rowVehicleID: null,\r\n defectID: null,\r\n List: [],\r\n showLoader: true,\r\n fromPage: 'Defects',\r\n filterVal: '',\r\n filterVehicleID: null\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n useEffect(async () => {\r\n if (props.frompage === 'Vehicles') {\r\n setState((st) => ({\r\n ...st,\r\n fromPage: props.frompage\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.isReload = new Date();\r\n } else {\r\n newSt.show = false;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n }\r\n }, [state.filterVal]);\r\n\r\n const pullDefects = async () => {\r\n setState((st) => ({ ...st, isReload: new Date() }));\r\n };\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${val?.defectJobID}/${val?.defectVehicleID}`,\r\n state: 'defects'\r\n });\r\n };\r\n const handleEditDefect = (val) => {\r\n props.history.push({\r\n pathname: `/maintenance/defect/edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n \r\n
\r\n ) : null}\r\n {state.modalToggle ? (\r\n <>\r\n \r\n
\r\n \r\n {!state.breakID || !state.rowVehicleID ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n handleUpdate(row.defectID, row.defectVehicleID, 'modalEditDetail')}\r\n onClick={() => handleEditDefect(row)}\r\n />\r\n {/* handleUpdate(row.defectID, row.defectVehicleID, 'modalEditDetail')} /> */}\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)}\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n let urlForcondition = `VehicleDefects${props.VehicleID ? `?VehicleID=${props.VehicleID}` : ''}`;\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (!props.VehicleID) {\r\n tempCols.splice(1, 0, { key: 'defectRegNumber', name: 'Reg Number', width: 110 });\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleUpdate = (defectID, VehicleID, modalName) => {\r\n setState((state) => ({ ...state, defectID: defectID, rowVehicleID: VehicleID, [modalName]: true }));\r\n };\r\n\r\n const closeModalHandler = (res, modalName) => {\r\n setState((state) => ({ ...state, [modalName]: false }));\r\n res && pullDefects();\r\n };\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCols = [...baseCrumbs];\r\n let actionCol = tempCols.find((element) => element.name === 'Defects');\r\n if (actionCol) {\r\n actionCol.onClick = closeModalHandler;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n const gridBtnTitle = !state.show && !props.VehicleID ? '' : 'Add Defect';\r\n\r\n return (\r\n \r\n {state.modalToggle ? (\r\n closeModalHandler(true, 'modalToggle')}\r\n fromPage={state.fromPage}\r\n isAddJobBtnShow={true}\r\n />\r\n ) : state.modalEditDetail ? (\r\n closeModalHandler(true, 'modalEditDetail')}\r\n fromPage={state.fromPage}\r\n />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleUpdate(null, state.filterVehicleID, 'modalToggle')}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"DefectScreen\"\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default CustomerDefectsScreen;\r\n","import { getWithAuth } from '../../../Basic/HttpService';\r\n\r\nexport const getAllVehicleCheckDaily = async () => {\r\n let res = await getWithAuth(`VehicleDailyCheck/list`);\r\n return res;\r\n};\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport { getAllVehicleCheckDaily } from '../../../../Core/Services/InternalUser/Maintenance/VehicleCheckDaily';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst crumbs = [{ name: 'Home', path: '/' }, { name: 'Maintenance' }, { name: 'Vehicle Checks', path: '/', active: true }];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 110, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number' },\r\n { key: 'vehicleDailyCheckDateCheck', name: 'Date of check', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'vehicleDailyCheckResult', name: 'Result' },\r\n { key: 'vehicleDailyCheckMileage', name: 'mileage ' },\r\n { key: 'vehicleDailyCheckDriverComment', name: 'Driver comments' }\r\n];\r\n\r\nconst CustomerVehicleCheckDaily = (props) => {\r\n const [state, setState] = useState({ modalToggle: false, rowVehicleID: null, defectID: null, List: [], showLoader: true });\r\n\r\n useEffect(async () => {\r\n pullDefects();\r\n }, []);\r\n\r\n const pullDefects = async () => {\r\n let res = await getAllVehicleCheckDaily();\r\n if (props.frompage === 'Vehicles') {\r\n setState((st) => ({\r\n ...st,\r\n List: res.data.list,\r\n showLoader: false,\r\n fromPage: props.frompage\r\n }));\r\n }\r\n };\r\n\r\n const renderEdit = (data) => {\r\n return (\r\n \r\n
\r\n {/* {!props.VehicleID && {!props.VehicleID &&
\r\n \r\n \r\n \r\n
\r\n \r\n alert('Update Pending')} />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n {!props.VehicleID &&
\r\n );\r\n};\r\n\r\nexport default CustomerVehicleCheckDaily;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport DataGrid from '../../../../Core/Controls/Grid/index';\r\nimport { EditButton, formatters, BreadCrumbs } from '../../../../Core/Controls';\r\nimport DialogBox from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleEdit';\r\nimport ScheduleNotes from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleNotes';\r\nimport ScheduleBookingStatus from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingStatus';\r\nimport ScheduleBookingSection from '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleBookingSection';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport NoteIcon from '@material-ui/icons/Note';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport '../../../commonStyle.scss';\r\nimport '../../../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss';\r\nimport { Link, useHistory } from 'react-router-dom';\r\nimport { useLoginInfo } from '../../../../Core/Hooks/useLoginInfo';\r\n\r\nimport { getAllVehicleSchedules } from '../../../../Core/Services/InternalUser/Maintenance/scheduleService';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport moment from 'moment';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\nimport ReactDOM from 'react-dom';\r\nimport ServiceAgentDetails from '../../../InternalUser/Controllers/DetailsModal/serviceAgent';\r\nimport PostAddIcon from '@material-ui/icons/PostAdd';\r\nimport RequiredDocumentsModal from '../../../ServiceAgent/Schedules/requiredDocumentsModal';\r\n\r\nconst crumbsServiceAgent = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Schedules', active: true }\r\n];\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n // { name: \"Maintenance\", path: \"/\", active: true },\r\n { name: 'Schedules', active: true }\r\n];\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 105, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 120 },\r\n { key: 'scheduleEventName', name: 'Event', width: 140 },\r\n {\r\n key: 'scheduleDateDue',\r\n name: 'Due',\r\n width: 100\r\n },\r\n {\r\n key: 'scheduleRequestedBookingDate',\r\n name: 'Requested',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n // width: 150\r\n },\r\n {\r\n key: 'bookingDate',\r\n name: 'Booked',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 120\r\n },\r\n // {\r\n // key: 'schedulePrepDate',\r\n // name: 'Prep Date',\r\n // formatter: formatters.Date_DDMMYYYY\r\n // },\r\n {\r\n key: 'scheduleCompletionDate',\r\n name: 'Completed',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 140\r\n },\r\n { key: 'depotName', name: 'Depot' },\r\n {\r\n key: 'agentName',\r\n name: 'Agent'\r\n },\r\n { key: 'scheduleBookingStatus', name: 'Status' }\r\n];\r\n\r\nconst CustomerAllVehicleSchedules = (props) => {\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isAdd: true,\r\n isReload: null\r\n });\r\n\r\n const { userRoles } = useLoginInfo();\r\n let history = useHistory();\r\n const isServiceAgent = userRoles.includes('serviceagent');\r\n const pos = isServiceAgent ? 's' : 'm';\r\n\r\n const [openDialog, setOpenDialog] = useState({});\r\n useEffect(async () => {\r\n pullApiData();\r\n }, [props.match.params?.all]);\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n // let res = await getAllVehicleSchedules(props.match.params?.all);\r\n // setState((st) => ({\r\n // ...st,\r\n // rows: [...(res.data.schedules || [])],\r\n // showLoader: false\r\n // }));\r\n };\r\n\r\n const handleEditRegClick = (val) => {\r\n history.push({\r\n pathname: `/controller/editVehicle/${val.scheduleVehicleID}`,\r\n search: '',\r\n state: { fileCount: val.fileCount }\r\n });\r\n };\r\n const renderEdit = (ev, row) => {\r\n return (\r\n Update popup
\r\n ) : (\r\n\r\n {row?.scheduleBookingStatusID == 5 && checkhaveAccess?.CanViewDocuments && (\r\n {\r\n checkButton(row, 'showRequiredDocumentsModal');\r\n }}\r\n toolTipTitle=\"Required Documents\"\r\n />\r\n )}\r\n {row?.displayNotes === 'Y' && (\r\n {\r\n checkButton(row, 'notes');\r\n }}\r\n toolTipTitle=\"Notes\"\r\n />\r\n )}\r\n\r\n {row?.displayBookingRequest === 'Y' && (\r\n {\r\n checkButton(row, 'status');\r\n }}\r\n toolTipTitle=\"Update Booking Request\"\r\n />\r\n )}\r\n
\r\n );\r\n };\r\n\r\n const dateFormatter = (date) => {\r\n return date ? moment(date).format('DD/MM/YYYY') : '--:--';\r\n };\r\n\r\n const handelRowCick = (row, name) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n [name]: true\r\n }));\r\n };\r\n\r\n const renderRegNumberEdit = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handleEditRegClick(row)}>\r\n {row.vehicleRegNumber}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const renderAgentName = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n handelRowCick(row, 'showSaModal')} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.agentName}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const dueDateFormatter = ({ row, column }) => {\r\n let textColor = 'black';\r\n let textWight = '';\r\n const dueDate = row.scheduleDateDue;\r\n const completionDate = row.scheduleCompletionDate;\r\n\r\n const dtDueIn = moment(dueDate);\r\n const daysPast = moment().diff(dtDueIn, 'days');\r\n\r\n if (!completionDate && daysPast > 0) {\r\n textColor = 'red';\r\n textWight = 'bold';\r\n }\r\n return `${dateFormatter(dueDate)}
`;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n let dateDueCol = tempCols.find((e) => e.key === 'scheduleDateDue');\r\n let regNumberCol = tempCols.find((element) => element.key === 'vehicleRegNumber');\r\n let agentCol = tempCols.find((element) => element.key === 'agentName');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n if (dateDueCol) {\r\n dateDueCol.formatter = dueDateFormatter;\r\n }\r\n if (regNumberCol) {\r\n regNumberCol.formatter = renderRegNumberEdit;\r\n }\r\n if (agentCol) {\r\n agentCol.formatter = renderAgentName;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const crumbsMaintenance = useMemo(() => {\r\n const tempCrums = [...baseCrumbs];\r\n if (props.match.params?.all === 'M') {\r\n tempCrums.push({ name: 'MOTs' });\r\n } else if (props.match.params?.all === 'I') {\r\n tempCrums.push({ name: 'Overdue Inspections' });\r\n } else if (props.match.params?.all === 'S') {\r\n tempCrums.push({ name: 'Overdue Services' });\r\n } else if (props.match.params?.all === 'O') {\r\n tempCrums.push({ name: 'Overdue Other Schedules' });\r\n } else {\r\n tempCrums.push({ name: 'All Schedules', active: true });\r\n }\r\n return tempCrums;\r\n }, [props.match.params?.all]);\r\n\r\n const addBtnClicked = () => {\r\n setState((st) => ({\r\n ...st,\r\n open: true,\r\n isAdd: true,\r\n selectedRowData: {}\r\n }));\r\n };\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n selectedRowData: {}\r\n }));\r\n res && pullApiData();\r\n };\r\n const closeTheDialog = (res) => {\r\n setOpenDialog({});\r\n res && pullApiData();\r\n };\r\n\r\n const checkButton = (row, label) => {\r\n setOpenDialog({ [label]: true });\r\n setState((st) => ({\r\n ...st,\r\n selectedRowData: row,\r\n scheduleVehicleID: row.scheduleVehicleID\r\n }));\r\n };\r\n\r\n // const handleCloseModal = () => {\r\n // setState((st) => ({\r\n // ...st,\r\n // showSaModal: false\r\n // }));\r\n // };\r\n\r\n const handleCloseModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showSaModal: false,\r\n showCustomerModal: false,\r\n showDepotModal: false\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n let getUrl = `Schedules?mode=${props.match.params?.all}`;\r\n\r\n return (\r\n \r\n ({\r\n records: res.data.schedules,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n getUrl={getUrl}\r\n downloadBtnName=\"All Schedules\"\r\n />\r\n\r\n {state.open ? (\r\n {\r\n handleClose(false);\r\n }}\r\n title={state.isAdd ? 'Add Schedule' : 'Edit Schedule'}\r\n maxWidth=\"sm\"\r\n name=\"addEdit\"\r\n >\r\n {\r\n handleClose(true);\r\n }}\r\n />\r\n \r\n ) : null}\r\n {openDialog.notes ? (\r\n \r\n \r\n ) : null}\r\n {openDialog.status ? (\r\n \r\n \r\n ) : null}\r\n {openDialog.section ? (\r\n \r\n \r\n ) : null}\r\n {state.showSaModal ? (\r\n \r\n \r\n ) : null}\r\n {openDialog.showRequiredDocumentsModal ? (\r\n closeTheDialog(false)} title={'Required Documents'} maxWidth=\"sm\" fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CustomerAllVehicleSchedules;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllVehicle } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport AddEditVehicle from '../../InternalUser/Controllers/Vehicles/addEditVehicle';\r\nimport EditVehicle from '../../InternalUser/Controllers/Vehicles/editVehicle';\r\n\r\nimport '../../commonStyle.scss';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 90,\r\n addFileUploaderIcon: true\r\n },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 110 },\r\n { key: 'vehicleMakeModel', name: 'Make/Model' },\r\n {\r\n key: 'vehicleDateOfRegistration',\r\n name: 'Date Of Reg',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 110\r\n },\r\n {\r\n key: 'vehicleMOTExpiry',\r\n name: 'MOT Expiry',\r\n formatter: formatters.dueDateFormatter,\r\n width: 110\r\n },\r\n {\r\n key: 'vehicleTaxDue',\r\n name: 'Tax Due',\r\n formatter: formatters.dueDateFormatter,\r\n width: 110\r\n }\r\n];\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', active: true }\r\n];\r\n\r\nconst CustomerVehicleScreen = (props) => {\r\n const { showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showEditPopup: false,\r\n showLoader: true,\r\n vehicleList: [],\r\n VehicleID: null,\r\n id: props.match.params?.all\r\n });\r\n\r\n const pullVehicleAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n pullVehicleAndUpdateState();\r\n }, [props.match.params?.all]);\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true\r\n // VehicleID: record.vehicleID\r\n }));\r\n };\r\n\r\n const closeVehicleModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullVehicleAndUpdateState();\r\n };\r\n const handleEditClick = (val) => {\r\n props.history.push({\r\n pathname: `/controller/editVehicle/${val.vehicleID}/${val.vehicleRegNumber}`\r\n });\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n handleEditClick(row)} />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCrums = [...baseCrumbs];\r\n if (props.match.params?.all === 'T') {\r\n tempCrums.push({ name: 'Tax Due' });\r\n }\r\n if (props.match.params?.all === 'I') {\r\n tempCrums.push({ name: 'Insurance' });\r\n }\r\n return tempCrums;\r\n }, [props.match.params?.all]);\r\n\r\n const title = state.VehicleID ? 'Update Vehicle' : 'Add Vehicle';\r\n\r\n return (\r\n \r\n {state.show ? (\r\n closeVehicleModal(true)} />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n btnTitle=\"Add Vehicle\"\r\n onBtnClick={handleAdd}\r\n idFieldName=\"vehicleID\"\r\n fileUploaderConfigName=\"VehicleScreen\"\r\n />\r\n \r\n )}\r\n {state.showEditPopup ?
\r\n );\r\n};\r\nexport default CustomerVehicleScreen;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { getAllVehicleJob, getAllJob } from '../../../../Core/Services/InternalUser/JOB/jobService';\r\nimport DataGrid from '../../../../Core/Controls/Grid';\r\nimport DialogComp from '../../../../Core/Dialog/DialogComp';\r\nimport { BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport JobScreenModal from '../../../InternalUser/Controllers/JOBS/JobScreenModal';\r\nimport { Link } from 'react-router-dom';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { AppStorage } from '../../../../Core/Basic/storage-service';\r\n\r\nconst base_columns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'jobDate', name: 'Date', formatter: formatters.Date_DDMMYYYY },\r\n { key: 'jobAgentOrderNo', name: 'Job Ref' },\r\n { key: 'jobDescription', name: 'Job Description' },\r\n // { key: 'serviceAgentName', name: 'Service Agent' },\r\n { key: 'depotName', name: 'Depots' },\r\n {\r\n key: 'jobPartsTotal',\r\n name: 'Parts',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right'\r\n },\r\n {\r\n key: 'jobLabourTotal',\r\n name: 'Labour',\r\n formatter: formatters.NumberWithPound,\r\n align: 'right'\r\n },\r\n { key: 'jobOrderTotal', name: 'Total', formatter: formatters.NumberWithPound, align: 'right' }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Jobs', active: true },\r\n { name: 'All Jobs', active: true }\r\n];\r\n\r\nfunction CustomerJobScreen(props) {\r\n const [state, setState] = useState({\r\n jobList: [],\r\n loader: true,\r\n open: false,\r\n isReload: null\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const pullJobList = async () => {\r\n setState((state) => ({\r\n ...state,\r\n isReload: new Date(),\r\n loader: false\r\n }));\r\n };\r\n\r\n const jobHandler = (params) => {\r\n setState((state) => ({ ...state, open: true }));\r\n };\r\n\r\n const handleEditClick = (row) => {\r\n props.history.push({\r\n pathname: `/controller/jobTabScreen/${row?.jobID}/${props.VehicleID ? props.VehicleID : row?.jobVehicleID}`,\r\n state: 'jobs'\r\n });\r\n };\r\n\r\n const ActionButtons = (data, row) => {\r\n return (\r\n \r\n {/* */}\r\n {checkhaveAccess?.CanViewJobs && (\r\n handleEditClick(row)} />\r\n )}{' '}\r\n {/* */}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let newColumn = [...base_columns];\r\n let actionCol = newColumn.find((item) => item.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = ActionButtons;\r\n }\r\n if (!props.VehicleID) {\r\n newColumn.splice(3, 0, { key: 'jobRegNumber', name: 'Registration' });\r\n }\r\n return newColumn;\r\n });\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false }));\r\n res && pullJobList();\r\n };\r\n\r\n const gridBtnTitle = !props.VehicleID ? '' : 'Add Job';\r\n\r\n return (\r\n \r\n {state.open ? (\r\n closeModal(false)} title=\"Add Job\" maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : (\r\n <>\r\n {!props.VehicleID && ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n}\r\nexport default CustomerJobScreen;\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { addDepot, updateDepot, getDepotById, getDropdown } from '../../../../Core/Services/InternalUser/ControllerService/depotsService';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, Typography } from '@material-ui/core';\r\nimport { SelectBox, SecondaryButton, SecondaryCheckbox, BreadCrumbs, MandatoryField, SimpleField, YesButton, NoButton } from '../../../../Core/Controls';\r\nimport { emailValidation, validatePostCode } from '../../../../Core/Basic/StaticService';\r\nimport { isNull } from 'lodash';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { Postcode } from '../../../../Core/Controls';\r\nimport '../../../InternalUser/Controllers/controllerStyle.scss';\r\n\r\nconst FlaggedBox = (props) => {\r\n useEffect(() => {\r\n !props.chkValue && props.resetInput(props.txtName);\r\n }, [props.chkValue]);\r\n return (\r\n <>\r\n \r\n {/*
\r\n\r\n \r\n {/* */}\r\n \r\n {/* \r\n \r\n Customers\r\n \r\n {depotFields.errors.depotCustomerID} \r\n */}\r\n \r\n {depotFields.errors.name} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n VOR Mobile Numbers \r\n \r\n \r\n Primary Service Agent \r\n {depotFields.errors.depotServiceAgentID} \r\n \r\n \r\n Secondary Service Agent \r\n {depotFields.errors.depotAgentSecondaryAgentID} \r\n \r\n \r\n First Day of Week \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Schedule Planner Options\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Max Schedule Merge Range \r\n \r\n \r\n \r\n \r\n Schedule Booking Mode \r\n \r\n \r\n Third Party Planner Email Address \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Booking Preference\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Contact Details\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n Notification Update\r\n \r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {depotFields.errors.depotOverdueReminderEmail} \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n Active\r\n \r\n
\r\n \r\n {/* \r\n Active \r\n */}\r\n \r\n handleActive(true)}> \r\n \r\n \r\n handleActive(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 props.onFormClose()}>\r\n Cancel\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ScheduleDetails;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\nimport { getDepots } from '../../../../Core/Services/InternalUser/ControllerService/depotsService';\r\nimport { EditButton, DataGrid, BreadCrumbs, formatters } from '../../../../Core/Controls';\r\nimport AddEditDepots from './addEditDepots';\r\nimport '../../../commonStyle.scss';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n { key: 'depotName', name: 'Name' },\r\n {\r\n key: 'depotAddress',\r\n name: 'Address'\r\n },\r\n\r\n { key: 'depotCountryCode', name: 'Code', width: 80 },\r\n { key: 'depotEmail', name: 'Email', width: 250 }\r\n];\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n\r\n { name: 'Depots', active: true }\r\n];\r\n\r\nconst CustomerDepots = (props) => {\r\n const { showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showLoader: true,\r\n depotsList: [],\r\n depotID: null,\r\n isReload: null\r\n });\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n depotID: record\r\n }));\r\n };\r\n\r\n const pullDepotsAndUpdateState = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n pullDepotsAndUpdateState();\r\n }, []);\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \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={getUrl}\r\n onBtnClick={() => handleAdd(null)}\r\n btnTitle=\"Add Depot\"\r\n isReload={state.isReload}\r\n idFieldName=\"depotID\"\r\n fileUploaderConfigName=\"DepotScreen\"\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default CustomerDepots;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport EditDriverDailyChecks from '../../../Components/InternalUser/Controllers/Vehicles/DriverDailyChecks/editDriverChecks'; //'./editDriverChecks';\r\nimport { BreadCrumbs, formatters, EditButton } from '../../../Core/Controls';\r\nimport '../../../Components/commonStyle.scss';\r\nimport { DataGrid } from '../../../Core/Controls';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { getChecksByQuery } from '../../../Core/Services/InternalUser/DailyChecksInternalUser/dailyChecksInternalUserService';\r\n\r\nconst basecolumns = [\r\n // { key: 'action', name: 'Action', width: 80 },\r\n // { key: 'checked', name: 'Checked', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n // { key: 'result', name: 'Result', width: 55 },\r\n // { key: 'checkType', name: 'Check Type' },\r\n // { key: 'status', name: 'Status' },\r\n // { key: 'regNumber', name: 'Reg Number', width: 110 },\r\n // // { key: 'customer', name: 'Customer', width: 200 },\r\n // { key: 'checkerName', name: 'Checker Name', width: 140 },\r\n // { key: 'driverName', name: 'Driver Name', width: 140 },\r\n // { key: 'mileage', name: 'Mileage', width: 110 },\r\n // { key: 'driverComment', name: 'Driver Comment', width: 150 },\r\n // { key: 'checkerComment', name: 'Checker Comment', width: 150 },\r\n // { key: 'displayName', name: 'Created By' }\r\n\r\n { key: 'action', name: 'Action', width: 80 },\r\n { key: 'checked', name: 'Checked', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n { key: 'regNumber', name: 'Reg Number', width: 90 },\r\n { key: 'result', name: 'Result', width: 55 },\r\n // { key: 'checkType', name: 'Check Type' },\r\n { key: 'status', name: 'Status' },\r\n { key: 'driverName', name: 'Driver Name' },\r\n // { key: 'mileage', name: 'Mileage' },\r\n { key: 'checkerName', name: 'Checker Name' },\r\n { key: 'checkerComment', name: 'Checker Comment', width: 220 },\r\n { key: 'customer', name: 'Customer', width: 100 },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'displayName', name: 'Created By' }\r\n];\r\n\r\nconst DailyChecksCustomer = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n title: '',\r\n btnFlag: '',\r\n rows: []\r\n });\r\n\r\n const pullApiData = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const editChecksScreen = (id) => {\r\n // alert('Edit screen is pending');\r\n setState((st) => ({\r\n ...st,\r\n editChecksShow: true,\r\n checksID: id.checkID\r\n }));\r\n };\r\n const editClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n editChecksShow: false\r\n }));\r\n pullApiData();\r\n };\r\n\r\n const actionButton = (data, row) => {\r\n return (\r\n \r\n editChecksScreen(row)} toolTipTitle=\"Edit Check\" />\r\n
\r\n );\r\n };\r\n const crumbs = useMemo(() => {\r\n return [\r\n { name: 'Home', path: '/' },\r\n { name: 'Daily Checks', active: true },\r\n { name: props.fromPage, active: true }\r\n ];\r\n }, [props.fromPage]);\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n let dataUrl = `DriverDailyCheck/VehicleDailyChecksList?Result=${props.resultCode}&Status=${props.statusCode}`;\r\n return (\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={dataUrl}\r\n // btnTitle={gridBtnTitle}\r\n // onBtnClick={addCheck}\r\n isReload={state.isReload}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DailyChecksCustomer;\r\n","import { Card, FormHelperText, Grid, InputLabel, Tooltip, Typography, ButtonGroup, Button } from '@material-ui/core';\r\nimport React, { useCallback, useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DatePicker, formatters, SingleSelect } from '../../../../Core/Controls';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport moment from 'moment';\r\nimport { getVehicleScreenDropdowns } from '../../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { getBreakDownFaultType, getDefectFaultType } from '../../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport '../../VorReporting/vorReporting.scss';\r\nimport { RenderReportingByFilter } from '../../VorReporting/RenderReportingDesign';\r\nimport { ReportingBarChart } from './../../../../Core/Controls/Charts/index';\r\nimport { GetBreakdownReportingExcelFile, GetDefectReportingExcelFile } from '../../../../Core/Services/InternalUser/excelDownload';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reporting', active: true }\r\n];\r\n\r\nconst crumdsPath = (val) => {\r\n if (val == 'defect') {\r\n return '/maintenance/defects';\r\n }\r\n if (val == 'breakdown') {\r\n return '/maintenance/breakdowns/:all';\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n border: '2px solid #f5f5f5',\r\n Opacity: 0.9,\r\n minWidth: 120,\r\n borderRadius: 10,\r\n boxShadow: 'none',\r\n background: '#8080800d',\r\n height: '100%',\r\n width: '100%'\r\n }\r\n}));\r\n\r\nconst baseColumns = [\r\n // { key: 'action', name: 'Action', width: 100 },\r\n { key: 'regNo', name: 'Reg Number', width: 120 },\r\n { key: 'defectNo', name: 'Defect No', width: 120 },\r\n { key: 'defectDate', name: 'Start Date', formatter: formatters.Date_DDMMMYYYY_HHMM, width: 150 },\r\n { key: 'defectDesc', name: 'Description' },\r\n { key: 'customer', name: 'Customer' },\r\n { key: 'depotName', name: 'Depot' },\r\n { key: 'faultTypes', name: 'Fault Types', filterable: 'no', sortable: false }\r\n];\r\n\r\nfunction capitalizeFirstLetter(string) {\r\n return string.charAt(0).toUpperCase() + string.slice(1);\r\n}\r\n\r\nlet startDate = moment().startOf('month').format('YYYY-MM-DD');\r\nlet endDate = moment().format('YYYY-MM-DD');\r\n\r\nconst CustomerBreakDownDefectReporting = (props) => {\r\n const classes = useStyles();\r\n let history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n customerList: [],\r\n errors: {},\r\n depotWithCustList: [],\r\n depotsList: [],\r\n customerID: +props?.match?.params.id || props.customerID || null,\r\n depotsID: null,\r\n startDate: startDate,\r\n endDate: endDate,\r\n fromScreen: window.location.pathname.includes('defect') ? 'defect' : 'breakdown',\r\n VehicleByType: [],\r\n VorList: [],\r\n NumberOfDepot: [],\r\n sumOfAllDepot: 0,\r\n url: '',\r\n vorByReg: [],\r\n top5Make: [],\r\n top5Model: [],\r\n setTop5ID: 1,\r\n setBarData: 4,\r\n depot: [],\r\n barValues: 4,\r\n makeList: [],\r\n vehicleCategoryListdropdown: []\r\n });\r\n\r\n const handleReports = (val) => {\r\n setState((st) => ({ ...st, setTop5ID: val }));\r\n };\r\n\r\n const handleBarChart = (val) => {\r\n setState((st) => ({ ...st, setBarData: val }));\r\n };\r\n\r\n const [tempOptions, setTempOptions] = useState({\r\n customerIDValue: null,\r\n depotsIDValue: null,\r\n makeIDValue: null,\r\n vehicleCategoryIDValue: null\r\n });\r\n\r\n const Crumbs = useMemo(() => {\r\n const tempCols = [...crumbs];\r\n tempCols.splice(1, 0, { name: `${capitalizeFirstLetter(state.fromScreen)}`, path: crumdsPath(state.fromScreen) });\r\n return tempCols;\r\n }, [state.fromScreen]);\r\n\r\n useEffect(async () => {\r\n let res = await getVehicleScreenDropdowns();\r\n setState((st) => ({\r\n ...st,\r\n customerList: res.data.customers,\r\n depotsList: res.data.depots,\r\n makeList: res.data.makes || [],\r\n vehicleCategoryListdropdown: res.data.vehicleCategories || []\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let newSt = {};\r\n if (state.customerID && state.customerList.length > 0) {\r\n newSt.customerIDValue = state.customerList.find(({ id }) => id === +state.customerID);\r\n } else {\r\n newSt.customerIDValue = state.customerList[0];\r\n }\r\n\r\n setTempOptions((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n }, [state.customerID, state.customerList]);\r\n\r\n useEffect(async () => {\r\n let res = {};\r\n\r\n if (state.customerList.length > 0 && tempOptions.customerIDValue?.id) {\r\n let newst = {};\r\n if (state.fromScreen == 'defect') {\r\n res = await getDefectFaultType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n }\r\n if (state.fromScreen == 'breakdown') {\r\n res = await getBreakDownFaultType(\r\n tempOptions.customerIDValue?.id || '',\r\n state.startDate,\r\n state.endDate,\r\n tempOptions.vehicleCategoryIDValue?.id || '',\r\n tempOptions.makeIDValue?.id || ''\r\n );\r\n }\r\n if (res.success) {\r\n newst.VehicleByType = res.data?.list?.map((m) => ({ ...m, name: m.faultType, ['Total Days']: m.total })) || [];\r\n newst.depot = res.data?.depot?.map((m) => ({ ...m, name: m.depot, ['Total Days']: m.total })) || [];\r\n newst.vorByReg = res.data?.byReg?.map((m) => ({ ...m, sum: m.total, val: m.reg })) || [];\r\n newst.top5Make = res.data?.top5Make?.map((m) => ({ ...m, sum: m.total, val: m.make })) || [];\r\n newst.top5Model = res.data?.top5Model?.map((m) => ({ ...m, sum: m.total, val: m.model })) || [];\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newst,\r\n url: getURl()\r\n }));\r\n }\r\n }, [state.startDate, state.endDate, tempOptions.customerIDValue, tempOptions.makeIDValue, tempOptions.vehicleCategoryIDValue]);\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n if (val) {\r\n setTempOptions((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n if (nm === 'customerIDValue') {\r\n newSt.depotsIDValue = null;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setTempOptions((st) => ({ ...st, [nm]: null }));\r\n }\r\n };\r\n\r\n const handleBar = (val) => {\r\n setState((st) => ({ ...st, barValues: val }));\r\n };\r\n\r\n const convertData = (res) => {\r\n setState((st) => ({ ...st, VorList: res.data.list }));\r\n return {\r\n records: res.data.list,\r\n total: res.data.total\r\n };\r\n };\r\n\r\n let settop5List = {\r\n 1: state.vorByReg,\r\n 2: state.top5Model,\r\n 3: state.top5Make,\r\n 4: state.VehicleByType,\r\n 5: state.depot\r\n };\r\n let label = {\r\n 1: 'Vehicles (Occurrence)',\r\n 2: 'Models (Occurrence)',\r\n 3: 'Makes (Occurrence)',\r\n 4: 'By Fault Type (Occurrence)',\r\n 5: 'By Depot (Occurrence)'\r\n };\r\n\r\n let getURl = () => {\r\n if (state.fromScreen == 'defect') {\r\n return `VehicleDefects/ByStartEndDate?startDate=${state.startDate}&endDate=${state.endDate}&vehicleCategoryID=${\r\n tempOptions.vehicleCategoryIDValue?.id || ''\r\n }&makeID=${tempOptions.makeIDValue?.id || ''}`;\r\n }\r\n if (state.fromScreen == 'breakdown') {\r\n return `VehicleBreakdowns/ByStartEndDate?startDate=${state.startDate}&endDate=${state.endDate}&vehicleCategoryID=${\r\n tempOptions.vehicleCategoryIDValue?.id || ''\r\n }&makeID=${tempOptions.makeIDValue?.id || ''}`;\r\n }\r\n };\r\n const renderVehicleReg = ({ row, col }, grid) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n gotoDefectEditScreen(row)} style={{ cursor: 'pointer', color: 'black', fontWeight: 'bold' }}>\r\n {row.defectNo}\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const tempCol = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'regNo');\r\n let agentNameCol = tempCols.find((element) => element.key === 'defectNo');\r\n if (actionCol) {\r\n actionCol.formatter = renderVehicleReg;\r\n }\r\n if (agentNameCol) {\r\n agentNameCol.formatter = rendeDefectNo;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n return (\r\n \r\n \r\n \r\n Start Date \r\n \r\n \r\n End Date \r\n \r\n \r\n \r\n Vehicle Category\r\n \r\n {state.errors.vehicleCategoryID} \r\n \r\n \r\n Make \r\n \r\n \r\n \r\n \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.VehicleByType.length > 0 ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n \r\n {state.url && (\r\n convertData(res)} columns={tempCol} getUrl={state.url} showDownload={true} downloadBtnName=\"VOR\" />\r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CustomerBreakDownDefectReporting;\r\n","import React, { useEffect, useState } from 'react';\r\nimport 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 { getAllDriverDash } from '../../../Core/Services/Driver/driverDashboard';\r\nimport GroupRoundedIcon from '@material-ui/icons/GroupRounded';\r\nimport LocalShippingRoundedIcon from '@material-ui/icons/LocalShippingRounded';\r\nimport BuildRoundedIcon from '@material-ui/icons/BuildRounded';\r\nimport HealingRoundedIcon from '@material-ui/icons/HealingRounded';\r\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\r\nimport CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\n\r\nimport { Link } from 'react-router-dom';\r\nimport '../../InternalUser/InternalDash.scss';\r\n\r\nconst AdminDashboard = () => {\r\n const [state, setState] = useState({\r\n rows_new: [],\r\n tilesData: []\r\n });\r\n\r\n const checkOut = 'Check Out';\r\n const checkIn = 'Check In';\r\n const driverCheck = 'Driver Check';\r\n\r\n useEffect(async () => {\r\n let res = await getAllDriverDash();\r\n const cards = res.data.dashboard;\r\n setState((st) => ({\r\n ...st,\r\n tilesData: cards[0]\r\n }));\r\n }, []);\r\n\r\n return (\r\n \r\n Top 5 {label[state.setTop5ID]}\r\n
\r\n \r\n \r\n handleReports(1)}\r\n >\r\n Vehicles\r\n \r\n handleReports(2)}\r\n >\r\n Models\r\n \r\n handleReports(3)}\r\n >\r\n {' '}\r\n Makes\r\n \r\n \r\n
\r\n \r\n {label[state.barValues]}\r\n
\r\n \r\n \r\n handleBar(4)}\r\n style={{ fontSize: 10 }}\r\n >\r\n By Fault Type\r\n \r\n handleBar(5)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {' '}\r\n By Depot\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.breakdownOnsite || 0} \r\n Breakdowns Onsite \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.breakdownRoadside || 0} \r\n Breakdowns Roadside \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.driverDefect || 0} \r\n Driver Defect \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.driverCheck || 0} \r\n Driver Check \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.tilesData.failedChecks || 0} \r\n Failed Check \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n {state.tilesData.checkIn || 0} \r\n Check In \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n {state.tilesData.checkedInCount || 0} \r\n Check Out \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AdminDashboard;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { getAllVehicle } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { EditButton, DataGrid, formatters, BreadCrumbs } from '../../../Core/Controls';\r\nimport DriverDailyChecks from '../../InternalUser/Controllers/Vehicles/DriverDailyChecks/driverDailyChecks';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { Button } from '@material-ui/core';\r\n\r\n// import '../../commonStyle.scss';\r\n\r\nconst baseColumns = [\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n width: 30,\r\n addFileUploaderIcon: true\r\n },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 50 },\r\n { key: 'vehicleMakeModel', name: 'Vehicle Description', width: 200 },\r\n {\r\n key: 'vehicleDateOfRegistration',\r\n name: 'Date Of Reg',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n {\r\n key: 'vehicleMOTExpiry',\r\n name: 'MOT Expiry',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n {\r\n key: 'vehicleTaxDue',\r\n name: 'Tax Due',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n // { key: 'customerCompanyName', name: 'Customer', width: 100 },\r\n { key: 'depotName', name: 'Depot', width: 100 }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Vehicles', path: '/controller/Vehicles', active: true }\r\n];\r\n\r\nconst DriverVehicleScreen = (props) => {\r\n const { showToastError } = useToast();\r\n\r\n const [state, setState] = useState({\r\n show: false,\r\n showEditPopup: false,\r\n showLoader: true,\r\n vehicleList: [],\r\n VehicleID: null\r\n });\r\n\r\n const pullVehicleAndUpdateState = async () => {\r\n let res = await getAllVehicle();\r\n if (res.success) {\r\n setState((st) => ({ ...st, showLoader: false, vehicleList: res.data.vehicles }));\r\n }\r\n if (!res.success) {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullVehicleAndUpdateState();\r\n }, []);\r\n\r\n const handleAdd = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n VehicleID: record.vehicleID\r\n }));\r\n };\r\n\r\n const closeVehicleModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullVehicleAndUpdateState();\r\n };\r\n\r\n const dataFormatter = (data, row) => {\r\n // const val = data.row;\r\n return (\r\n \r\n {/* */}\r\n handleAdd(row)}\r\n />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n const title = state.VehicleID ? 'Update Vehicle' : 'Add Vehicle';\r\n return (\r\n \r\n {state.show ? (\r\n closeVehicleModal(true)} onClose={closeVehicleModal} />\r\n ) : (\r\n <>\r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\nexport default DriverVehicleScreen;\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel, FormControlLabel } from '@material-ui/core';\r\nimport { SecondaryButton, DatePicker, MandatoryField, formatters } from '../../../Core/Controls';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { postVehicleBreakdown, getVehicleBreakdownsbyID } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport RoomIcon from '@material-ui/icons/Room';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport DialogComp from '../../../Core/Dialog/DialogComp';\r\nimport GetAgentLocation from '../../InternalUser/Maintenance/BreakDown/getLocations';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\nimport moment from 'moment';\r\nimport CustomizedSteppers from '../../InternalUser/Maintenance/BreackdownDefectStepper/defectBreackDownStepper';\r\nimport BreakDownEditDetails from '../../InternalUser/Maintenance/BreakDown/BreakDownEditDetails';\r\nimport BreakDownDetails from '../../InternalUser/Maintenance/BreakDown/BreakDownDetails';\r\nimport Mapheader from '../../InternalUser/Maintenance/BreakDown/locationHeaderComp';\r\n\r\nlet domainName = window.location.host;\r\nconst trimedhost = domainName.includes('localhost') ? 'localhost' : domainName;\r\n\r\nconst AddBreaddownModal = (props) => {\r\n const { displayName } = useLoginInfo();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n let history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n reportedBy: displayName,\r\n reg: props.regNumber,\r\n dateOfReg: moment().format('YYYY-DD-MM'),\r\n defectID: null,\r\n breakDownType: 'BR',\r\n driverName: displayName,\r\n driverPhone: null,\r\n breakDownLocation: '',\r\n problemReported: '',\r\n replacementvehicleRequired: false,\r\n defectPG9Issued: false,\r\n mobilityUsed: 0,\r\n mobilityRequested: 0,\r\n reportingDepot: null,\r\n callOutRequired: false,\r\n defectVOR: false,\r\n policeOnScene: 0,\r\n passengersInvolved: false,\r\n accDamage: false,\r\n vehicleLoaded: false,\r\n urgentCallOut: false,\r\n policeOnScene: false,\r\n mobilityRequested: false,\r\n mobilityUsed: false,\r\n errors: {},\r\n showJob: false,\r\n loadType: 1,\r\n showMap: false,\r\n vehicleID: props.VehicleID,\r\n desc: null\r\n });\r\n\r\n useEffect(async () => {\r\n setState((st) => ({\r\n ...st,\r\n domainName: trimedhost\r\n // breakDownType: props.breakdownType\r\n }));\r\n pullBreackdownById();\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 validations = () => {\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!state.breakDownLocation) {\r\n errors.breakDownLocation = 'Location is required';\r\n formIsValid = false;\r\n }\r\n if (!state.reportedBy) {\r\n errors.reportedBy = 'Reported By field is required';\r\n formIsValid = false;\r\n }\r\n if (!state.reportedPhone) {\r\n errors.reportedPhone = 'Reported phone field is required';\r\n formIsValid = false;\r\n }\r\n if (!state.problemReported) {\r\n errors.problemReported = 'Problem reported field is required';\r\n formIsValid = false;\r\n }\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n let res = await postVehicleBreakdown(state);\r\n if (res.success) {\r\n showToastSuccess(`Breakdown number ${res.data.defectNumber} generated successfully`);\r\n history.push(`/maintenance/breakdowns/Edit/${res.data.defectID}/${props.VehicleID}`);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n const pullBreackdownById = async () => {\r\n if (props.breakDownID) {\r\n let res = await getVehicleBreakdownsbyID(props.breakDownID);\r\n\r\n let data = res.data.details[0];\r\n let vehicleJobProgressDates = res.data.vehicleJobProgressDates;\r\n setState((st) => ({\r\n ...st,\r\n defectID: data.defectID,\r\n vehicleID: data.defectVehicleID,\r\n breakDownType: data.defectTypeCode,\r\n mileage: data.defectMileage,\r\n reportingDepot: data.defectReportingDepotID,\r\n breakDownLocation: data.defectLocation,\r\n reportedPhone: data.defectContactNumber,\r\n reportedBy: data.defectContactName,\r\n driverName: data.defectDriverName,\r\n driverPhone: data.defectDriverTelephone,\r\n problemReported: data.defectDescription,\r\n callOutRequired: data.defectCallOutRequired,\r\n urgentCallOut: data.defectUrgentCallOut,\r\n putOnVOR: data.defectVOR,\r\n policeOnScene: data.defectPoliceOnScene,\r\n passengersInvolved: data.defectPassengersInvolved,\r\n numberOfPassenger: data.defectNumberOfPassengers,\r\n accDamage: data.defectAccidentDamage,\r\n iNSREF: data.defectInsuranceReference,\r\n replacementvehicleRequired: data.defectReplacementVehicle,\r\n domainName: data.domainName,\r\n vehicleLoaded: data.defectVehicleLoaded,\r\n loadType: data.defectVehicleLoadTypeID,\r\n mobilityRequested: data.defectMobilityRequested,\r\n mobilityUsed: data.defectMobilityUsed,\r\n PG9Issued: data.defectPG9Issued,\r\n defectNumberGenerated: data.defectNumberGenerated,\r\n defectResolvedNotes: data.defectResolvedNotes,\r\n reportingDepotName: data.reportingDepot,\r\n vehicleLoadTypeDescription: data.vehicleLoadTypeDescription,\r\n defectRegNumber: data.defectRegNumber,\r\n customer: data.customer,\r\n reportingDepot: data.reportingDepot,\r\n make: data.make,\r\n model: data.model,\r\n vorVehicleID: data.vorVehicleID,\r\n vehicleJobProgress: vehicleJobProgressDates,\r\n defectDateCreated: formatters.DateTimeFormatter(data.defectDateCreated),\r\n defectDateCallOutArrived: formatters.DateTimeFormatter(data.defectDateCallOutArrived),\r\n defectDateVehicleRecovered: formatters.DateTimeFormatter(data.defectDateVehicleRecovered),\r\n defectDateResolved: formatters.DateTimeFormatter(data.defectDateResolved),\r\n defectDateSignOff: formatters.DateTimeFormatter(data.defectDateSignOff),\r\n fileCount: data.fileCount\r\n }));\r\n }\r\n };\r\n\r\n const handleShowLocation = () => {\r\n setState((st) => ({ ...st, showMap: true }));\r\n };\r\n const closetModal = (res) => {\r\n setState((st) => ({ ...st, showJob: false, showMap: false }));\r\n };\r\n\r\n const handleUpdateLocation = (location) => {\r\n setState((st) => ({ ...st, breakDownLocation: location, showMap: false }));\r\n };\r\n\r\n return (\r\n \r\n {state.showMap ? (\r\n \r\n \r\n \r\n \r\n Breakdown Type? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n Breakdown Date\r\n \r\n {state.errors.dateOfReg} \r\n */}\r\n {/* \r\n \r\n \r\n Breakdown Type? \r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n {\r\n handleShowLocation(state.defectID);\r\n }}\r\n icon={RoomIcon}\r\n />\r\n \r\n )\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Add\r\n \r\n \r\n \r\n Cancel \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddBreaddownModal;\r\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport { SecondaryButton, MandatoryField, SimpleField, YesButton, NoButton, DatePicker } from '../../../Core/Controls';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { postDefect } from '../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport { useToast } from '../../../Core/Hooks/useToast';\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport { useLoginInfo } from '../../../Core/Hooks/useLoginInfo';\r\n\r\nconst AddEditDefectModal = (props) => {\r\n const { displayName } = useLoginInfo();\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n\r\n const [defectFields, setDefectFields] = useState({\r\n errors: {},\r\n defectContactName: displayName,\r\n defectDriverName: displayName,\r\n customerName: '',\r\n depotName: '',\r\n vehicleLoadTypesList: [],\r\n depotsList: [],\r\n vehicleID: null,\r\n defectTypeCode: 'DD',\r\n workshopBooking: false,\r\n defectNumberGenerated: '',\r\n defectRegNumber: props.regNumber,\r\n defectID: '',\r\n defectVehicleID: props.filterVehicleID,\r\n defectReportingDepotID: '',\r\n defectLocation: '',\r\n defectCustomerDefectNumber: '',\r\n dateOfReg: moment().format('YYYY-DD-MM')\r\n });\r\n\r\n const { showToastSuccess, showToastError } = useToast();\r\n\r\n let history = useHistory();\r\n\r\n const handleActive = (val) => {\r\n setDefectFields((field) => ({\r\n ...field,\r\n workshopBooking: val\r\n }));\r\n };\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value } = e.target;\r\n setDefectFields((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const trimmedHost = window.location.host.includes('localhost') ? 'localhost' : window.location.host;\r\n\r\n const validations = () => {\r\n const { dateOfReg, defectLocation, defectContactName, defectContactNumber, defectDescription } = defectFields;\r\n let formIsValid = true;\r\n let errors = {};\r\n if (!defectDescription) {\r\n errors.defectDescription = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!defectLocation) {\r\n errors.defectLocation = 'This field is required';\r\n formIsValid = false;\r\n }\r\n if (!defectContactName) {\r\n errors.defectContactName = 'This field is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (!defectContactNumber) {\r\n errors.defectContactNumber = 'This field is required';\r\n formIsValid = false;\r\n }\r\n setDefectFields((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const submitHandler = async () => {\r\n if (validations()) {\r\n setBtnLoader(true);\r\n const FormData = {\r\n workshopBooking: defectFields.workshopBooking || null,\r\n defectID: defectFields.defectID || null,\r\n defectTypeCode: defectFields.defectTypeCode || null,\r\n defectVehicleID: props.filterVehicleID || null,\r\n defectReportingDepotID: defectFields.defectReportingDepotIDValue?.id || null,\r\n defectLocation: defectFields.defectLocation || null,\r\n defectCustomerDefectNumber: defectFields.defectCustomerDefectNumber || null,\r\n defectContactName: defectFields.defectContactName || null,\r\n defectContactNumber: defectFields.defectContactNumber || null,\r\n defectDriverName: defectFields.defectDriverName || null,\r\n defectDriverTelephone: defectFields.defectDriverTelephone || null,\r\n defectDescription: defectFields.defectDescription || null,\r\n defectAuthorisedBy: defectFields.defectAuthorisedBy || null,\r\n preferredServiceAgent: defectFields.preferredServiceAgent || null,\r\n defectAlreadyBooked: defectFields.defectAlreadyBooked || false,\r\n defectAlreadyCompleted: defectFields.defectAlreadyCompleted || false,\r\n defectCallOutRequired: defectFields.defectCallOutRequired || false,\r\n defectUrgentCallOut: defectFields.defectUrgentCallOut || false,\r\n defectVOR: defectFields.defectVOR || false,\r\n defectPassengersInvolved: defectFields.defectPassengersInvolved || false,\r\n defectNumberOfPassengers: defectFields.defectNumberOfPassengers || null,\r\n defectAccidentDamage: defectFields.defectAccidentDamage || false,\r\n defectInsuranceReference: defectFields.defectInsuranceReference || null,\r\n domainName: trimmedHost || null,\r\n defectReplacementVehicle: defectFields.defectReplacementVehicle || false,\r\n defectVehicleLoaded: defectFields.defectVehicleLoaded || false,\r\n defectVehicleLoadTypeID: defectFields.defectVehicleLoadTypeIDValue?.id || null,\r\n defectPG9Issued: defectFields.defectPG9Issued || false,\r\n defectPoliceOnScene: defectFields.defectPoliceOnScene || false,\r\n defectAdvisedDontDrive: defectFields.defectAdvisedDontDrive || false,\r\n defectMobilityRequested: defectFields.defectMobilityRequested || false,\r\n defectMobilityUsed: defectFields.defectMobilityUsed || false,\r\n defectMileage: defectFields.defectMileage\r\n };\r\n\r\n let res = await postDefect(FormData);\r\n if (res.success) {\r\n showToastSuccess(`Defect number ${res.data.defectNumber} generated successfully`);\r\n history.push(`/maintenance/defect/edit/${res.data.defectID}/${props.filterVehicleID}`);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n setBtnLoader(false);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n {state.isCheckIn ? (\r\n <>\r\n \r\n \r\n Date of Change\r\n \r\n {error.date} \r\n \r\n \r\n \r\n \r\n \r\n \r\n If this driver is assigned to another vehicle, they will be removed from that vehicle \r\n \r\n\r\n \r\n Check In \r\n \r\n \r\n ) : (\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputText, BreadCrumbs, SecondaryButton, formatters } from '../../../Core/Controls';\r\nimport { getVechicleIDByRegNO } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { CustomChip } from '../../../Core/Controls/Inputs/DatePicker';\r\nimport AddBreaddownModal from '../Maintenance/addBreakdown';\r\nimport AddEditDefectModal from '../Maintenance/addDefect';\r\nimport DriverChecks from '../Maintenance/driverCheck';\r\nimport Box from '@material-ui/core/Box';\r\nimport { getTitleData } from '../../../Core/Services/InternalUser/ControllerService/vehicleService';\r\n\r\nimport { Table, TableBody, TableContainer, TableRow, Paper, TableCell, Typography, TableHead, InputLabel } from '@material-ui/core';\r\nimport { NavigateBeforeSharp } from '@material-ui/icons';\r\nimport DriverVehicleModal from '../Maintenance/checkIn';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nconst gridStyle = {\r\n title: {\r\n color: '#f50057'\r\n },\r\n header: {\r\n border: '1px solid rgba(0,0,0,0.2)'\r\n },\r\n tbHead: {\r\n padding: '5px 0px 6px 8px'\r\n },\r\n tbContent: {\r\n margin: '8px 0px 14px 0px;'\r\n }\r\n};\r\n\r\nconst DriverDash = (props) => {\r\n const [show, setShow] = useState(false);\r\n const [state, setState] = useState({ isVehicle: false, regNumber: '', vehicleMakeModel: '' });\r\n let screenName = props.match.params.screenName.charAt(0).toUpperCase() + props.match.params.screenName.slice(1); // Caps First Letter\r\n\r\n const crumbs = show\r\n ? [\r\n { name: 'Home', path: '/' },\r\n { name: `${screenName}`, path: '/', active: true },\r\n { name: `${'Add ' + screenName}`, path: '/', active: true }\r\n ]\r\n : [\r\n { name: 'Home', path: '/' },\r\n { name: `${screenName}`, path: '/', active: true }\r\n ];\r\n\r\n const getVehicleByRegNo = async (e) => {\r\n const { name, value } = e.target;\r\n if (value.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(value);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.isVehicle = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.vehicleMakeModel = resBrekDown.data?.list[0].vehicleMakeModel;\r\n newSt.regNumber = value;\r\n } else {\r\n newSt.isVehicle = false;\r\n newSt.filterVehicleID = '';\r\n newSt.regNumber = '';\r\n newSt.vehicleMakeModel = '';\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, isVehicle: false, regNumber: null }));\r\n }\r\n };\r\n\r\n // Pull details\r\n useEffect(async () => {\r\n let res = await getTitleData(state.filterVehicleID);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n setState((st) => ({\r\n ...st,\r\n desc: data?.vehicleDescription\r\n }));\r\n }\r\n }, [state.isVehicle]);\r\n\r\n const onBtnClick = () => {\r\n setShow(true);\r\n };\r\n const onClose = () => {\r\n setShow(false);\r\n setState((st) => ({ ...st, isVehicle: false, regNumber: null, vehicleMakeModel: null }));\r\n };\r\n\r\n const onCheckInSucc = (mileage) => {\r\n // setState((st) => ({ ...st, isVehicle: false }));\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\nexport default DriverDash;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { BreadCrumbs, DataGrid, EditButton, formatters } from '../../../Core/Controls';\r\nimport { getVehicleBreakdowns, getAllVehicleBreakdowns, getVechicleIDByRegNO } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport AddBreaddownModal from './addBreakdown';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst tempCrumb = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Breakdowns', path: '/', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 80, addFileUploaderIcon: true },\r\n // { key: 'customer', name: 'Customer Name', width: '10%' },\r\n { key: 'defectRegNumber', name: 'Reg Number', width: 100 },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n },\r\n { key: 'defectDescription', name: 'Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: 100 },\r\n { key: 'serviceAgentName', name: 'Service Agent', width: 180 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 200 }\r\n];\r\n\r\nconst DriverBreakDownDashboard = (props) => {\r\n let history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n breakdownList: [],\r\n loader: true,\r\n modalToggle: false,\r\n breakID: null,\r\n rowVehicleID: null,\r\n show: false,\r\n filterVal: ''\r\n });\r\n\r\n const handleBreakDown = (params, VehicleID, modalName) => {\r\n setState((st) => ({\r\n ...st,\r\n modalName: modalName,\r\n modalToggle: true,\r\n breakID: params,\r\n rowVehicleID: VehicleID\r\n }));\r\n };\r\n const closeModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n modalToggle: false,\r\n filterVal: '',\r\n filterVehicleID: null,\r\n breakID: null,\r\n modalName: ''\r\n }));\r\n res && pullBreakDownAndUpdateState();\r\n };\r\n\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n pullBreakDownAndUpdateState();\r\n }, []);\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = true;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.isReload = new Date();\r\n } else {\r\n newSt.show = false;\r\n }\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n }\r\n }, [state.filterVal]);\r\n\r\n const pullBreakDownAndUpdateState = async () => {\r\n let defecttypecode = '';\r\n if (props.VehicleID) {\r\n defecttypecode = '';\r\n }\r\n if (props?.match?.params?.all == 'typebo') {\r\n defecttypecode = 'bo';\r\n }\r\n if (props?.match?.params?.all == 'typebr') {\r\n defecttypecode = 'br';\r\n }\r\n if (props?.match?.params?.all == ':all') {\r\n defecttypecode = '';\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n defecttypecode: defecttypecode\r\n }));\r\n };\r\n\r\n const handleEditBreakdown = (val) => {\r\n history.push({\r\n pathname: `/maintenance/breakdowns/Edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n let urlForcondition = `VehicleBreakdowns/?${props.VehicleID ? `VehicleID=${props.VehicleID}` : ''}defecttypecode=${state.defecttypecode}`;\r\n\r\n const dataFormatter = (data, row) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {show ? state.desc?.toUpperCase() || '' : screenName}\r\n \r\n \r\n \r\n
\r\n \r\n {state.modalName === 'Edit' ? null : (\r\n
\r\n closeModal(true)}\r\n modalName={state.modalName}\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 idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"BreakdownScreen\"\r\n getUrl={urlForcondition}\r\n btnTitle={gridBtnTitle}\r\n onBtnClick={() => handleBreakDown(null, state.filterVehicleID, 'Add')}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DriverBreakDownDashboard;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport AddEditDefectModal from './addDefect';\r\nimport DataGrid from '../../../Core/Controls/Grid';\r\nimport { getAllDefects } from '../../../Core/Services/InternalUser/Maintenance/DefectsService';\r\nimport { getVechicleIDByRegNO } from '../../../Core/Services/InternalUser/ServiceAgent/breakdownService';\r\nimport { EditButton, BreadCrumbs, formatters } from '../../../Core/Controls';\r\nimport DefectEditDetails from '../../InternalUser/Maintenance/Defects/DefectEditDetails';\r\nimport GijgoGrid from '../../../Core/Controls/GijgoGrid';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport { CustomIconButton } from '../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\n\r\nconst modalgridStyle = {\r\n formatterEditBtn: { textAlign: 'center' }\r\n};\r\n\r\nconst baseCrumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Maintenance', active: true },\r\n { name: 'Defects', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n { key: 'action', name: 'Action', width: 100, addFileUploaderIcon: true },\r\n // { key: 'customer', name: 'Customer Name', width: '10%' },\r\n { key: 'defectRegNumber', name: 'Reg Number', width: 100 },\r\n {\r\n key: 'defectNumberGenerated',\r\n name: 'Defect No',\r\n headerRenderer: formatters.ColumnHeaderAlignLeft,\r\n formatter: formatters.ColumnTextAlignLeft,\r\n width: 80\r\n },\r\n {\r\n key: 'defectDate',\r\n name: 'Date ',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 90\r\n },\r\n\r\n { key: 'defectDescription', name: 'Details' },\r\n { key: 'defectContactName', name: 'Reported By', width: '15%' },\r\n // { key: 'defectDriverName', name: 'Driver Name', width: 110 },\r\n // { key: 'defectDriverTelephone', name: 'Driver Phone', width: 120 },\r\n { key: 'serviceAgentName', name: 'Service Agent', width: 150 },\r\n { key: 'defectJobStatusDescription', name: 'Status', width: 180 }\r\n // { key: 'defectType', name: 'Defect Type', width: 130 }\r\n];\r\n\r\nconst DriverDefectsScreen = (props) => {\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n rowVehicleID: null,\r\n defectID: null,\r\n List: [],\r\n showLoader: true,\r\n fromPage: 'Defects',\r\n show: false,\r\n filterVal: ''\r\n });\r\n\r\n useEffect(async () => {\r\n if (!props.VehicleID) {\r\n if (state.filterVal.length > 4) {\r\n let resBrekDown = await getVechicleIDByRegNO(state.filterVal);\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (resBrekDown.data?.list) {\r\n newSt.show = resBrekDown.success;\r\n newSt.filterVehicleID = resBrekDown.data?.list[0].vehicleID;\r\n newSt.isReload = new Date();\r\n } else {\r\n newSt.show = false;\r\n }\r\n\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => ({ ...st, show: false }));\r\n }\r\n }\r\n // pullDefects();\r\n }, [state.filterVal]);\r\n\r\n const pullDefects = async () => {\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEditDefect = (val) => {\r\n props.history.push({\r\n pathname: `/maintenance/defect/edit/${val?.defectID}/${val?.defectVehicleID}`,\r\n state: 'Edit'\r\n });\r\n };\r\n\r\n const renderEdit = (data, row) => {\r\n return (\r\n \r\n
\r\n )}\r\n {state.modalToggle ? (\r\n <>\r\n \r\n
\r\n \r\n {state.modalName === 'Add' ? null : (\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n handleEditDefect(row)}\r\n // onClick={() => handleUpdate(row, null, 'modalEditDetail')}\r\n />\r\n {/* handleUpdate(row, null, 'modalEditDetail')} /> */}\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const closeByGridByBredcrumb = () => {\r\n setState((state) => ({ ...state, modalToggle: false, modalEditDetail: false }));\r\n };\r\n\r\n const crumbs = useMemo(() => {\r\n const tempCrumbs = [...baseCrumbs];\r\n let actionCol = baseCrumbs.find((element) => element.name === 'Defects');\r\n if (actionCol) {\r\n actionCol.onClick = closeByGridByBredcrumb;\r\n }\r\n if (state.modalEditDetail) {\r\n tempCrumbs.splice(3, 0, {\r\n name: `Defect Number ${state.defectNumberGenerated} [${formatters.DateTimeFormatter(state.defectDate)}]`,\r\n active: true\r\n });\r\n }\r\n return tempCrumbs;\r\n }, [state.modalToggle]);\r\n\r\n const handleUpdate = (data, vehicleId, modalName) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (data) {\r\n newSt.defectID = data.defectID;\r\n newSt.rowVehicleID = data.defectVehicleID;\r\n newSt.defectNumberGenerated = data.defectNumberGenerated;\r\n newSt.defectDate = data.defectDate;\r\n }\r\n if (vehicleId) {\r\n newSt.rowVehicleID = vehicleId;\r\n }\r\n newSt[modalName] = true;\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const closeModalHandler = (res, modalName) => {\r\n setState((state) => ({ ...state, [modalName]: false, filterVal: '' }));\r\n res && pullDefects();\r\n };\r\n\r\n const inputChange = (e) => {\r\n const value = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n filterVal: value\r\n }));\r\n };\r\n\r\n const gridBtnTitle = state.show ? 'Add Defect' : null;\r\n return (\r\n \r\n <>\r\n {!state.modalEditDetail ? (\r\n closeModalHandler(true, 'modalToggle')}\r\n />\r\n \r\n ) : state.modalEditDetail ? (\r\n closeModalHandler(true, 'modalEditDetail')}\r\n fromPage={state.fromPage}\r\n pullDetails={props.pullDetails}\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=\"VehicleDefects\"\r\n btnTitle={gridBtnTitle}\r\n idFieldName=\"defectID\"\r\n fileUploaderConfigName=\"DefectScreen\"\r\n onBtnClick={() => handleUpdate(null, state.filterVehicleID, 'modalToggle')}\r\n isReload={state.isReload}\r\n />\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DriverDefectsScreen;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport GijgoGrid from '../../../../Core/Controls/GijgoGrid';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\nimport { FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport { DatePicker, InputText, MandatoryField, SecondaryButton } from '../../../../Core/Controls';\r\nimport { postDriverCheckOut } from '../../../../Core/Services/InternalUser/Vehicle/driverInfoService';\r\nimport { useToast } from '../../../../Core/Hooks/useToast';\r\n\r\nconst VehicleCheckOut = (props) => {\r\n const { showToastSuccess, showToastError } = useToast();\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isReload: null\r\n });\r\n const [error, setError] = useState({});\r\n\r\n useEffect(async () => {}, []);\r\n\r\n const inputChange = (event) => {\r\n const { name, value, checked } = event.target;\r\n\r\n setState((state) => ({\r\n ...state,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const validate = () => {\r\n let errors = {};\r\n let isValid = true;\r\n if (!state.date) {\r\n errors.date = 'Date Change is required';\r\n isValid = false;\r\n }\r\n\r\n setError(errors);\r\n return isValid;\r\n };\r\n\r\n const handelSubmit = async () => {\r\n if (validate()) {\r\n let data = {\r\n vehicleDriverHistoryID: props.data.vehicleDriverHistoryID,\r\n vehicleID: props.data.vehicleID,\r\n dateCheckOut: state.date,\r\n mileageCheckOut: state.mileage\r\n };\r\n\r\n let submutRes = await postDriverCheckOut(data);\r\n if (submutRes.success) {\r\n showToastSuccess('Vehicle Check Out Successfully');\r\n props.onClose(true);\r\n } else {\r\n showToastError(submutRes.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n ) : null}\r\n \r\n\r\n {state.modalToggle ? (\r\n <>\r\n \r\n
\r\n \r\n {!state.modalToggle ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {/* */}\r\n \r\n setState((st) => ({\r\n ...st,\r\n show: true,\r\n selectedRowData: row\r\n }))\r\n }\r\n />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = dataFormatter;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const closeCheckOutModal = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n show: false\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n return (\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={`Drivers/GetDriverVehicles`}\r\n // btnTitle={gridBtnTitle}\r\n // onBtnClick={() => handleBreakDown(null, null, 'Add')}\r\n isReload={state.isReload}\r\n />\r\n {state.show ? (\r\n closeCheckOutModal(false)} maxWidth=\"md\">\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CheckOutScreen;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { formatters, BreadCrumbs, DataGrid } from '../../Core/Controls';\r\nimport '../commonStyle.scss';\r\nimport '../InternalUser/Controllers/Vehicles/ScheduleVehicle/scheduleVehicleStyle.scss';\r\nimport { getScheduleByStatus } from '../../Core/Services/InternalUser/ControllerService/scheduleVehicleService';\r\nimport { CustomIconButton } from '../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport VehicleDailyChecks from '../InternalUser/Controllers/Vehicles/VehicleDailyChecks/vehicleDailyChecks';\r\nimport EditVehicleDailyChecks from '../InternalUser/Controllers/Vehicles/VehicleDailyChecks/editVehicleDailyCheck';\r\nimport { AppStorage } from '../../Core/Basic/storage-service';\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: 110, addFileUploaderIcon: true },\r\n { key: 'vehicleRegNumber', name: 'Reg Number', width: 120 },\r\n {\r\n key: 'scheduleDateDue',\r\n name: 'Due',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 100\r\n },\r\n {\r\n key: 'scheduleRequestedBookingDate',\r\n name: 'Booked',\r\n formatter: formatters.Date_DDMMYYYY,\r\n width: 120\r\n },\r\n\r\n { key: 'dueDateISOWeek', name: 'ISO Week', width: 100 },\r\n { key: 'scheduleEventName', name: 'Event' },\r\n {\r\n key: 'agentName',\r\n name: 'Agent'\r\n },\r\n { key: 'scheduleBookingStatus', name: 'Status', width: 200 }\r\n];\r\nconst TechnicianSchedule = (props) => {\r\n const [state, setState] = useState({\r\n open: false,\r\n showLoader: true,\r\n selectedRowData: {},\r\n isAdd: true,\r\n showChecks: false,\r\n showEditChecks: false\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n\r\n const getCrumbs = () => {\r\n return [\r\n { name: 'Home', path: '/' },\r\n { name: 'Confirmed Bookings', active: true }\r\n ];\r\n };\r\n useEffect(async () => {\r\n pullApiData();\r\n }, []);\r\n\r\n const handleCheck = (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.selectedRowData = ev.row;\r\n if (val === 'Ad') {\r\n newSt.showChecks = true;\r\n }\r\n if (val === 'Ed') {\r\n newSt.showEditChecks = true;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const pullApiData = async () => {\r\n let res = await getScheduleByStatus(props.status);\r\n\r\n setState((st) => ({\r\n ...st,\r\n rows: [...(res.data.schedules || [])],\r\n showLoader: false\r\n }));\r\n };\r\n const renderEdit = (ev, param) => {\r\n return (\r\n \r\n {ev.row?.vehicleInspectionID ? null : ev.row?.displayCheck ? (\r\n {\r\n handleCheck(ev, 'Ad');\r\n }}\r\n toolTipTitle=\"Add Inspection Check\"\r\n />\r\n ) : null}\r\n {ev.row?.vehicleInspectionID ? (\r\n {\r\n handleCheck(ev, 'Ed');\r\n }}\r\n toolTipTitle=\"Edit Inspection Check\"\r\n />\r\n ) : null}\r\n
\r\n );\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = renderEdit;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n open: false,\r\n showChecks: false,\r\n showEditChecks: false,\r\n selectedRowData: {}\r\n }));\r\n res && pullApiData();\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TechnicianSchedule;\r\n","import React, { useEffect, useState } from 'react';\r\nimport 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 GroupRoundedIcon from '@material-ui/icons/GroupRounded';\r\nimport LocalShippingRoundedIcon from '@material-ui/icons/LocalShippingRounded';\r\nimport BuildRoundedIcon from '@material-ui/icons/BuildRounded';\r\nimport HealingRoundedIcon from '@material-ui/icons/HealingRounded';\r\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\r\nimport CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';\r\nimport LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';\r\nimport CallMissedIcon from '@material-ui/icons/CallMissed';\r\n\r\nimport { Link } from 'react-router-dom';\r\nimport '../../InternalUser/InternalDash.scss';\r\n\r\nconst LeadDashboard = () => {\r\n const [state, setState] = useState({\r\n rows_new: [],\r\n tilesData: []\r\n });\r\n\r\n const driverCheck = 'Driver Check';\r\n\r\n useEffect(async () => {}, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 10 \r\n New Enquires \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 10 \r\n Live Enquires \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 10 \r\n Lost Enquires \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 10 \r\n Successful Enquires \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LeadDashboard;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { EditButton, BreadCrumbs, DataGrid, formatters, SecondaryButton } from '../../../Core/Controls';\r\nimport { getAllEnquiry } from '../../../Core/Services/InternalUser/ControllerService/EnquiriService';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nlet obj = {\r\n 1: 'New Enquiries',\r\n 2: 'Live Enquiries',\r\n 3: 'Successful Enquiries',\r\n 4: 'Lost Enquiries'\r\n};\r\nconst setEnquiry = { 1: 'new_enquiry', 2: 'live_enquiry', 3: 'successful_enquiry', 4: 'lost_enquiry' };\r\n\r\nconst basecolumns = [\r\n { key: 'action', name: 'Action', width: '5%' },\r\n { key: 'leadCompanyName', name: 'Company Name' },\r\n { key: 'leadMainContactName', name: 'Contact Name' },\r\n { key: 'leadMainContactPhone', name: 'Contact Phone' },\r\n { key: 'leadMainContactEmail', name: 'Contact Email' },\r\n { key: 'leadCity', name: 'City' },\r\n { key: 'leadReferrerName', name: 'Referrer Name' }\r\n];\r\n\r\nconst LeadEnquiriesScreen = (props) => {\r\n let history = useHistory();\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: obj[props.id], active: true }\r\n ];\r\n\r\n const [state, setState] = useState({\r\n modalToggle: false,\r\n EnquiriesID: null,\r\n enquiriesList: [],\r\n showLoader: true\r\n });\r\n\r\n useEffect(async () => {\r\n pullEnquiriesData();\r\n }, []);\r\n\r\n const pullEnquiriesData = async () => {\r\n let res = {};\r\n res = await getAllEnquiry();\r\n setState((st) => ({\r\n ...st,\r\n enquiriesList: res.data?.list?.filter((m) => {\r\n if (m.leadStatusID == props.id) {\r\n return m;\r\n }\r\n }),\r\n showLoader: false\r\n }));\r\n };\r\n\r\n const actionButton = (data) => {\r\n return (\r\n \r\n handleEnquiriesUpdate(data?.row?.leadID)} toolTipTitle=\"Edit Enquiries\" />\r\n
\r\n );\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...basecolumns];\r\n let actionCol = tempCols.find((e) => e.key === 'action');\r\n if (actionCol) {\r\n actionCol.formatter = actionButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n const handleEnquiriesUpdate = (params) => {\r\n history.push(`/Enquiries/edit/${params}?${setEnquiry[props.id]}`);\r\n };\r\n\r\n const handleEnquiriesAdd = () => {\r\n history.push(`/Enquiries/add/0`);\r\n };\r\n\r\n return (\r\n \r\n <>\r\n {!props.VehicleID &&
\r\n );\r\n};\r\n\r\nexport default LeadEnquiriesScreen;\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 { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n exact: 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: 'Home',\r\n path: '/',\r\n exact: true,\r\n component: Components.SharedHome,\r\n authType: TypeOfAuth.Both\r\n },\r\n {\r\n label: 'Login',\r\n path: '/login',\r\n exact: true,\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: Components.ResetPassword,\r\n authType: TypeOfAuth.NonAuth\r\n }\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport LinkIcon from '@material-ui/icons/Link';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport PeopleAltIcon from '@material-ui/icons/PeopleAlt';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport AirlineSeatReclineExtraIcon from '@material-ui/icons/AirlineSeatReclineExtra';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport GavelIcon from '@material-ui/icons/Gavel';\r\nimport LocalTaxiIcon from '@material-ui/icons/LocalTaxi';\r\nimport VerifiedUserIcon from '@material-ui/icons/VerifiedUser';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport GrainIcon from '@material-ui/icons/Grain';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport MailOutlineRoundedIcon from '@material-ui/icons/MailOutlineRounded';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport MapIcon from '@material-ui/icons/Map';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';\r\n\r\nexport default [\r\n {\r\n label: 'Dashboard',\r\n path: '/',\r\n exact: true,\r\n component: Components.AdminDashboard,\r\n authType: TypeOfAuth.Both,\r\n icon: \r\n
\r\n );\r\n}\r\n","import * as Components from '../../../../Components';\r\nimport { TypeOfAuth } from '../menu-auth-type';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport GavelIcon from '@material-ui/icons/Gavel';\r\nimport HealingIcon from '@material-ui/icons/Healing';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport ScheduleIcon from '@material-ui/icons/Schedule';\r\nimport ExploreRoundedIcon from '@material-ui/icons/ExploreRounded';\r\n\r\nexport default [\r\n {\r\n label: 'Dashboard',\r\n path: '/',\r\n exact: true,\r\n component: Components.ServiceAgentDash,\r\n authType: TypeOfAuth.Both,\r\n icon: \r\n \r\n 1200 ? () => '' : handleDrawerClose}\r\n >\r\n props.opneDrawer()}\r\n className=\"sidebar-icon\"\r\n style={{ color: `${portalSettings.portalMenuBarTextColour}` }}\r\n >\r\n {subOption.leftNavigationMenuIconName}\r\n \r\n {subOption.navigationMenuLabel} \r\n \r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n handleClick(subOption.navigationMenuLabel)} title={subOption.navigationMenuLabel}>\r\n props.opneDrawer()}\r\n className=\"sidebar-icon\"\r\n style={{ color: `${portalSettings.portalMenuBarTextColour}` }}\r\n >\r\n {subOption.leftNavigationMenuIconName}\r\n \r\n {subOption.navigationMenuLabel} \r\n \r\n {state[subOption.navigationMenuLabel] ? (\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 {isLoggedIn && (\r\n \r\n \r\n \r\n \r\n {isLoggedIn\r\n ? currentMenus\r\n .filter((m) => m.hidden)\r\n .map((m, i) => {\r\n return \r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport { getAllAdminDash } from './../Services/Admin/AdminDashboardService';\r\nimport { getAllServiceAgentDash } from './../Services/ServiceAgent/ServiceAgent';\r\nimport { getAllInternalDash } from './../Services/InternalUser/InternalDashService';\r\nimport { getAllCustomerDashboard } from './../Services/Customer/customerDashService';\r\nimport { getAllDriverDash } from './../Services/Driver/driverDashboard';\r\nimport { Link } from 'react-router-dom';\r\nimport { useLoginInfo } from '../Hooks/useLoginInfo';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport PeopleAltIcon from '@material-ui/icons/PeopleAlt';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport HealingIcon from '@material-ui/icons/Healing';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport LocalTaxiIcon from '@material-ui/icons/LocalTaxi';\r\nimport { useWindowSize } from '../Hooks/useWindowSize';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport { MenuItem, MenuList, Popover } from '@material-ui/core';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\nimport { AppContext } from './PageLevel/AppContextProvider';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\n// import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport { AppStorage } from '../Basic/storage-service';\r\n\r\nlet DashNotification = (props) => {\r\n let getAccessParam = AppStorage.getAllowAcces();\r\n const { userRoles } = useLoginInfo();\r\n // disabled={!getAccessParam['CanDeleteSchedules']}\r\n const [state, setState] = useState({\r\n data: [],\r\n deletedMenu: [\r\n {\r\n link: '/Deleted_jobs',\r\n title: 'Deleted Jobs',\r\n icons: \r\n 
\r\n \r\n {theme.direction === 'rtl' ? \r\n
\r\n - {handler(myMenus, false)}
\r\n \r\n \r\n {!isLoggedIn && (\r\n \r\n \r\n \r\n )}\r\n {isLoggedIn && (\r\n
\r\n )}\r\n {isLoggedIn ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n )}\r\n {!isLoggedIn && (\r\n \r\n {portalSettings.portalSettingAdditionalLogo && (\r\n 
\r\n )}\r\n
\r\n \r\n
\r\n {state.show && (\r\n \r\n
\r\n \r\n {itemArray.map((c, i) => (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {portalSettings.portalSettingDisplayTopNavCounters ? (\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 \r\n
\r\n ) : null}\r\n \r\n {displayName}\r\n
\r\n \r\n
\r\n */}\r\n \r\n Loading...
}>\r\n \r\n {\r\n setShow(false);\r\n if (onClick) return onClick(e);\r\n }}\r\n {...rest}\r\n />\r\n {rest.children}\r\n
\r\n {rest.children}
{' '}\r\n \r\n
*/}\r\n \r\n \r\n {rest.btnName || 'Yes'}\r\n \r\n
\r\n \r\n \r\n {rest.btnName || 'No'}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Fail = (props) => {\r\n const { toolTipTitle, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst NABtn = (props) => {\r\n const { toolTipTitle, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nconst MBtn = (props) => {\r\n const { toolTipTitle, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst RBtn = (props) => {\r\n const { toolTipTitle, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst UploadBtn = (props) => {\r\n const { toolTipTitle, ...rest } = 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 UploadWithBadge = (props) => {\r\n const { toolTipTitle, count, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const CheckCustomdBtn = (props) => {\r\n const { toolTipTitle, btnLabel, btn, btnID, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport const PassButton = memo(Pass);\r\nexport const FailButton = memo(Fail);\r\nexport const NAButton = memo(NABtn);\r\nexport const MButton = memo(MBtn);\r\nexport const RButton = memo(RBtn);\r\nexport const UploadButton = memo(UploadBtn);\r\n// export const passAllbutton = memo(PassAll);\r\n","import React, { useEffect, useState, useCallback } from 'react';\r\nimport { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';\r\nimport Geocode from 'react-geocode';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { CustomIconButton } from '../../../../Core/Controls/Inputs/Buttons/ButtonModal';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { InputText, SecondaryButton } from '../../../../Core/Controls';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport { Typography } from '@material-ui/core';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\n\r\nimport serviceLogo from '../../../../Marker/Service.png';\r\nimport recoveryLogo from '../../../../Marker/Recovery.png';\r\nimport closestLogo from '../../../../Marker/Closest.png';\r\n\r\nimport car_repair_amberLogo from '../../../../Marker/car_repair_amber.png';\r\nimport car_repair_redLogo from '../../../../Marker/car_repair_red.png';\r\nimport car_repair_greenLogo from '../../../../Marker/car_repair_green.png';\r\n\r\nimport locationLogo from '../../../../Marker/car_pin.png';\r\nimport hgvLogo from '../../../../Marker/hgv_pin.png';\r\nimport vanLogo from '../../../../Marker/van_pin.png';\r\nimport trailerLogo from '../../../../Marker/trailer_pin.png';\r\nimport busLogo from '../../../../Marker/bus_pin.png';\r\nimport redLogo from '../../../../Marker/redIcon.png';\r\n\r\nlet tempObj = {\r\n hgv: hgvLogo,\r\n van: vanLogo,\r\n trailer: trailerLogo,\r\n psv: busLogo,\r\n car: locationLogo\r\n};\r\n\r\nGeocode.setApiKey('AIzaSyBSxrpmSFBsDNgb_hQLFlw5tDixvNBGSt0');\r\nGeocode.setLanguage('en');\r\nGeocode.setLocationType('ROOFTOP');\r\nGeocode.enableDebug();\r\n\r\nconst GetAgentLocation2 = (props) => {\r\n let vehcileCategoriesLogo = '';\r\n\r\n if (props.vehcileCategories && tempObj[props.vehcileCategories.toLowerCase()]) {\r\n vehcileCategoriesLogo = tempObj[props.vehcileCategories.toLowerCase()];\r\n } else {\r\n vehcileCategoriesLogo = tempObj['car'];\r\n }\r\n\r\n const google = window.google;\r\n const [state, setState] = useState({\r\n mapLocation: [],\r\n FilterList: [],\r\n tempFilterList: [],\r\n filterRecoveryAgent: [],\r\n serviceagent: true,\r\n recoveryAgent: false,\r\n location: props.location,\r\n isOpen: false,\r\n activeMarker: {},\r\n showingInfoWindow: false,\r\n currentLat: 53.15296,\r\n currentLang: -2.11704,\r\n arr_facilities: [],\r\n facilitiId: [],\r\n zoom: props.location ? 12 : 6\r\n });\r\n\r\n const initMap = () => {\r\n let isLastEventIsClicked = false;\r\n const map = new google.maps.Map(document.getElementById('map'), {\r\n zoom: state.zoom,\r\n center: { lat: state.currentLat, lng: state.currentLang }\r\n });\r\n\r\n const infoWindow = new google.maps.InfoWindow({\r\n content: '',\r\n disableAutoPan: true\r\n });\r\n\r\n infoWindow.addListener('closeclick', () => {\r\n isLastEventIsClicked = false;\r\n });\r\n\r\n let markers = state.tempFilterList.map((position, i) => {\r\n const label = '';\r\n let locatinAddress = `${position[2]},${position[3]}\\n${position[4]},${position[5]}(${position[6]})`;\r\n const contentString =\r\n '' +\r\n `
';\r\n\r\n const marker = new google.maps.Marker({\r\n position: { lat: +position[8], lng: +position[9] },\r\n label,\r\n icon: { url: position[11], size: { width: 40, height: 80 }, anchor: { x: 15, y: 50 }, scaledSize: { width: 25, height: 45 } }\r\n });\r\n\r\n marker.addListener('click', () => {\r\n isLastEventIsClicked = true;\r\n infoWindow.setContent(contentString);\r\n infoWindow.open(map, marker);\r\n });\r\n\r\n marker.addListener('mouseover', function () {\r\n if (!isLastEventIsClicked) {\r\n infoWindow.setContent(contentString);\r\n infoWindow.open(map, marker);\r\n }\r\n });\r\n\r\n marker.addListener('mouseout', function () {\r\n if (!isLastEventIsClicked) {\r\n infoWindow.close();\r\n }\r\n });\r\n\r\n return marker;\r\n });\r\n\r\n markers.push(\r\n new google.maps.Marker({\r\n position: { lat: state.currentLat, lng: state.currentLang },\r\n label: '',\r\n icon: { url: vehcileCategoriesLogo, size: { width: 50, height: 100 }, anchor: { x: 15, y: 50 }, scaledSize: { width: 40, height: 55 } }\r\n })\r\n );\r\n new MarkerClusterer({ markers, map });\r\n };\r\n\r\n useEffect(() => {\r\n let urls = ['/agent_facilities.json', '/latlang.json'];\r\n Promise.all(urls.map((url) => fetch(url).then((resp) => resp.text()))).then((texts) => {\r\n setState((st) => ({\r\n ...st,\r\n arr_facilities: eval(texts[0]),\r\n mapLocation: eval(texts[1])\r\n }));\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetchCurrentLocation();\r\n }, [state.mapLocation]);\r\n\r\n useEffect(() => {\r\n initMap();\r\n }, [state.tempFilterList]);\r\n\r\n function deg2rad(deg) {\r\n return deg * (Math.PI / 180);\r\n }\r\n\r\n const fetchCurrentLocation = () => {\r\n let FilterList = [];\r\n const tempArray = [...state.mapLocation];\r\n Geocode.fromAddress(state.location || 'CA81UR').then(\r\n (response) => {\r\n if (response) {\r\n const { lat, lng } = response.results[0].geometry.location;\r\n tempArray.forEach((l, i) => {\r\n // var R = 6371; // Radius of the earth in km\r\n var R = 3958; // Radius of the earth in miles\r\n var dLat = deg2rad(l[8] - lat);\r\n var dLon = deg2rad(l[9] - lng);\r\n var a =\r\n Math.sin(dLat / 2) * Math.sin(dLat / 2) +\r\n Math.cos(deg2rad(lat)) * Math.cos(deg2rad(l[8])) * Math.sin(dLon / 2) * Math.sin(dLon / 2);\r\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n var d = R * c; // Distance in miles\r\n if (d < 10) {\r\n l.splice(11, 0, car_repair_greenLogo);\r\n } else if (d > 10 && d < 20) {\r\n l.splice(11, 0, car_repair_amberLogo);\r\n } else {\r\n l.splice(11, 0, car_repair_redLogo);\r\n }\r\n if (d < 1000) {\r\n FilterList.push(l);\r\n }\r\n });\r\n setState((st) => ({ ...st, FilterList: FilterList, tempFilterList: FilterList, currentLat: lat, currentLang: lng }));\r\n }\r\n },\r\n (error) => {\r\n console.error(error);\r\n }\r\n );\r\n };\r\n\r\n const inputChange = (id) => (e) => {\r\n const { name, checked } = e.target;\r\n let tempServiceFacList = [...state.facilitiId];\r\n let tempFilterList = [];\r\n if (checked) {\r\n tempServiceFacList.push(id);\r\n } else {\r\n let tempIndex = tempServiceFacList.findIndex((q) => q == id);\r\n tempServiceFacList.splice(tempIndex, 1);\r\n }\r\n if (tempServiceFacList.length > 0) {\r\n state.FilterList.forEach(function (n) {\r\n let chekExist = tempServiceFacList.find((l) => l == n[10]?.split(',').find((p) => l == p));\r\n if (chekExist) {\r\n tempFilterList.push(n);\r\n }\r\n });\r\n } else tempFilterList = [...state.FilterList];\r\n setState((st) => ({ ...st, [name]: checked, facilitiId: tempServiceFacList, tempFilterList: tempFilterList }));\r\n };\r\n\r\n const handleChange = useCallback((e) => {\r\n const { name, value, type } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n }, []);\r\n\r\n const handleEnter = (e) => {\r\n if (e.key === 'Enter') {\r\n fetchCurrentLocation();\r\n setState((st) => ({ ...st, zoom: 12 }));\r\n }\r\n };\r\n\r\n const getLocation = () => {\r\n props.updateLocation(state.location);\r\n };\r\n\r\n const searchHandle = () => {\r\n fetchCurrentLocation();\r\n setState((st) => ({ ...st, zoom: 12 }));\r\n };\r\n\r\n return (\r\n \r\n
` +\r\n `${position[1]}
\r\n\r\n
` +\r\n '\r\n Address:- ${locatinAddress}\r\n
\r\nTel:- ${position[7]}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.updateLocation && (\r\n \r\n Submit \r\n \r\n )}\r\n \r\n\r\n \r\n Service Agent Facilities \r\n {state.arr_facilities.map((f) => {\r\n return (\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default GetAgentLocation2;\r\n","import { useEffect, useState } from \"react\";\r\nimport { AppStorage } from \"../Basic/storage-service\";\r\n\r\nexport const useLoginInfo = () => {\r\n let [ state, setState ] = useState( {\r\n // isLoggedIn: false,\r\n // isReadOnlyUser: false,\r\n // token: '',\r\n // displayName: '',\r\n // lastLogin: null,\r\n // userRoles: [],\r\n isLoggedIn: AppStorage.isLoggedIn(),\r\n token: AppStorage.getToken(),\r\n displayName: AppStorage.getName(),\r\n isReadOnlyUser: AppStorage.isReadOnlyUser(),\r\n lastLogin: AppStorage.getLastLogin(),\r\n userRoles: AppStorage.getUserRoles(),\r\n } );\r\n useEffect( () => {\r\n setState( {\r\n isLoggedIn: AppStorage.isLoggedIn(),\r\n token: AppStorage.getToken(),\r\n displayName: AppStorage.getName(),\r\n isReadOnlyUser: AppStorage.isReadOnlyUser(),\r\n lastLogin: AppStorage.getLastLogin(),\r\n userRoles: AppStorage.getUserRoles(),\r\n } )\r\n }, [ AppStorage.loginInfoUpdatedAt() ] );\r\n\r\n return state;\r\n}","import { getWithAuth, postWithAuth } from '../Basic/HttpService';\r\nimport { AppStorage } from '../Basic/storage-service';\r\n\r\nexport const getUploaderConfig = async () => {\r\n let res = await getWithAuth('FileUploader');\r\n if (res.success) {\r\n AppStorage.saveFileUploaderConfig(res.data);\r\n }\r\n};\r\n\r\nexport const getFilesForConfig = async (configId, recordId, docIDPassed = false) => {\r\n if (docIDPassed == undefined || docIDPassed == null) {\r\n docIDPassed = false;\r\n }\r\n let res = await getWithAuth(`FileUploader/${configId}/${recordId}?docIDPassed=${docIDPassed}`);\r\n return res;\r\n};\r\n\r\nexport const uploadFileUsignUploaderConfig = async (configId, recordId, formData, docIDPassed) => {\r\n if (docIDPassed == undefined || docIDPassed == null) {\r\n docIDPassed = false;\r\n }\r\n let res = await postWithAuth(`FileUploader/${configId}/${recordId}?docIDPassed=${docIDPassed}`, formData);\r\n return res;\r\n};\r\n\r\nexport const updateName = async (configId, recordId, uniqueFileName, newName) => {\r\n let res = await postWithAuth(`FileUploader/rename`, {\r\n configId,\r\n recordId,\r\n uniqueFileName,\r\n newName\r\n });\r\n return res;\r\n};\r\n\r\nexport const deleteUploadedFile = async (configId, recordId, uniqueFileName) => {\r\n let res = await postWithAuth(`FileUploader/delete`, {\r\n configId,\r\n recordId,\r\n uniqueFileName\r\n });\r\n return res;\r\n};\r\n\r\nexport const downloadUploadedFile = async (configId, recordId, uniqueFileName, fileNameFull, docIDPassed) => {\r\n if (docIDPassed == undefined || docIDPassed == null) {\r\n docIDPassed = false;\r\n }\r\n let res = await postWithAuth(\r\n `FileUploader/download`,\r\n {\r\n configId,\r\n recordId,\r\n uniqueFileName,\r\n docIDPassed\r\n },\r\n { responseType: 'blob', returnOrgRes: true }\r\n );\r\n\r\n if (res.status === 200) {\r\n const url = window.URL.createObjectURL(new Blob([res.data]));\r\n const link = document.getElementById('tempDownloadLink') || document.createElement('a');\r\n link.id = 'tempDownloadLink';\r\n link.href = url;\r\n link.setAttribute('download', fileNameFull);\r\n document.body.appendChild(link);\r\n link.click();\r\n return true;\r\n }\r\n return false;\r\n};\r\n","import moment from 'moment';\r\nimport { SortableHeaderCell } from 'react-data-grid';\r\nconst styles = { link: { textDecoration: 'none', color: '#f50057' } };\r\nconst formatters = {\r\n YesNo: (params) => {\r\n const field = params.column.key;\r\n return params.row[field] ? 'Yes' : 'No';\r\n },\r\n Date_DDMMYYYY: (params) => {\r\n const field = params.column.key;\r\n const val = params.row[field];\r\n return val ? moment(val).format('DD/MM/YYYY') : '--:--';\r\n },\r\n Date_DDMMYY: (params) => {\r\n const field = params.column.key;\r\n const val = params.row[field];\r\n return val ? moment(val).format('DD/MM/YY') : '--:--';\r\n },\r\n Date_DDMMMYYYY: (params) => {\r\n const field = params.column.key;\r\n const val = params.row[field];\r\n return val ? moment(val).format('DD-MMM-YYYY') : '-';\r\n },\r\n Date_DDMMMYYYY_HHMM: (params) => {\r\n const field = params.column.key;\r\n const val = params.row[field];\r\n return val ? moment(val).format('DD-MMM-YYYY HH:mm') : '-';\r\n },\r\n DateFormatter: (params) => {\r\n return params ? moment(params).format('YYYY-MM-DD') : '';\r\n },\r\n DateOnlyFormatter: (params) => {\r\n return params ? moment(params).format('DD-MMM-YYYY') : '-';\r\n },\r\n YearFormatter: (params) => {\r\n return params ? moment(params).format('DD/MM/YYYY') : '--:--';\r\n },\r\n DateTimeFormatter: (params) => {\r\n return params ? moment(params).format('DD-MMM-YYYY HH:mm') : null;\r\n },\r\n NumberWithPound: (params, grid) => {\r\n const field = params.column.key;\r\n const val = +params.row[field];\r\n if (grid.isGijgo) {\r\n return `Loading...
\r\n £${val ? val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,') : '0.00'}
`;\r\n } else {\r\n return (\r\n ${val}
`;\r\n } else {\r\n return {val}
;\r\n }\r\n },\r\n\r\n ColumnHeaderAlignRight: (params) => {\r\n const val = params.column.name;\r\n return (\r\n {val}
\r\n ${formatters.YearFormatter(val)}
`;\r\n } else {\r\n return {formatters.YearFormatter(val)}
;\r\n }\r\n },\r\n addressFormatter: (...values) => {\r\n return values\r\n .map((x) => x?.trim())\r\n .filter((x) => x)\r\n .join(', ');\r\n },\r\n phoneNumberFormatter: (data) => {\r\n return data ? (\r\n \r\n {data}\r\n \r\n ) : (\r\n 'N\\\\A'\r\n );\r\n },\r\n mailFormatter: (data) => {\r\n return data ? (\r\n \r\n {data}\r\n \r\n ) : (\r\n 'N\\\\A'\r\n );\r\n },\r\n ToFixedDigit: (val) => {\r\n return {val ? <>{val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')} : <>0.00};\r\n },\r\n numberThousandsSeparator: (val) => {\r\n return val.toLocaleString('en-US', { maximumFractionDigits: 2 });\r\n //val.toString().replace(/\\B(? {\r\n dateCompleted = dateCompleted ? dateCompleted : moment().format();\r\n let isSameWeek = moment(dateCompleted).isSame(scheduleDateDue, 'week');\r\n let isSameMonth = moment(dateCompleted).isSame(scheduleDateDue, 'month');\r\n if (scheduleDateDue < dateCompleted) {\r\n if ((dayRange == 1 && scheduleDateDue < dateCompleted) || (dayRange == 2 && !isSameWeek) || (dayRange == 3 && !isSameMonth)) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n },\r\n getScheduleColour: (dateCompleted, scheduleDateDue, dayRange) => {\r\n let isOverDueSchedule = formatters.isOverDueSchedule(dateCompleted, scheduleDateDue, dayRange);\r\n // dateCompleted = dateCompleted ? dateCompleted : moment().format();\r\n if (dateCompleted && !isOverDueSchedule) {\r\n return 'green';\r\n } else if (isOverDueSchedule) {\r\n return 'red';\r\n } else {\r\n return 'black';\r\n }\r\n }\r\n};\r\nexport default formatters;\r\n","import InputText from './index';\r\nimport { InputLabel, FormHelperText, Typography } from '@material-ui/core';\r\nimport './inputStyle.scss';\r\n\r\nexport function MandatoryField(props) {\r\n const { inputLabel, isDisabled, ...rest } = props;\r\n return isDisabled ? (\r\n \r\n \r\n {inputLabel}\r\n \r\n
\r\n ) : (\r\n <>\r\n {props.value || 'N/A'}
\r\n \r\n \r\n {inputLabel}\r\n \r\n
\r\n ) : (\r\n <>\r\n {props.value || 'N/A'}
\r\n \r\n {props.loadingData ? (\r\n
\r\n );\r\n};\r\n\r\nconst useStyles = makeStyles((theme) => {\r\n return {\r\n gridContainer: {\r\n marginTop: 8,\r\n '& .empty-row': {\r\n marginTop: theme.spacing(1),\r\n textAlign: 'center'\r\n },\r\n '& .grid-filter': {\r\n position: 'relative',\r\n display: 'inline-block',\r\n marginBottom: 8,\r\n width: '100%',\r\n '& > label': {\r\n position: 'absolute',\r\n right: 10,\r\n top: 8,\r\n zIndex: -99,\r\n color: '#d3d3d3'\r\n }\r\n }\r\n }\r\n };\r\n});\r\n\r\nlet searchTimer;\r\nlet defaultRowHeight = 45;\r\nlet defautltRowHeaderHeight = 45;\r\nconst DataGrid = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n columns: [],\r\n filteredRows: [],\r\n filterText: '',\r\n rowHeight: defaultRowHeight,\r\n headerRowHeight: defautltRowHeaderHeight,\r\n pagedIndex: 1,\r\n pagedData: [],\r\n rowPerPage: props.rowPerPage || 10\r\n });\r\n const [sortColumns, setSortColumns] = useState([]);\r\n const [finalRow, setFinalRow] = useState([]);\r\n const classes = useStyles();\r\n\r\n useEffect(() => {\r\n const rows = props.rows || [];\r\n const rowHeight = props.rowHeight || defaultRowHeight;\r\n const headerRowHeight = props.headerRowHeight || defautltRowHeaderHeight;\r\n setState((st) => ({ ...st, rows: rows, rowHeight: rowHeight, headerRowHeight: headerRowHeight }));\r\n }, [props.rows, props.rowHeight, props.headerRowHeight]);\r\n\r\n useEffect(() => {\r\n let cols = props.columns.map((c) => ({ ...c }));\r\n if (cols.length > 0 && props.idFieldName && props.fileUploaderConfigName && isValidConfig(props.fileUploaderConfigName)) {\r\n const actionCol = cols.find((c) => c.addFileUploaderIcon);\r\n if (actionCol) {\r\n const prevFor = actionCol.formatter;\r\n var newFormatter = (params) => {\r\n return (\r\n \r\n
\r\n ) : (\r\n No Data Found.
\r\n )}\r\n \r\n \r\n {prevFor(params)} \r\n \r\n {\r\n \r\n \r\n
\r\n );\r\n };\r\n actionCol.formatter = newFormatter;\r\n } else {\r\n cols.push({\r\n name: '',\r\n width: 70,\r\n formatter: (params) => (\r\n \r\n \r\n {props.enableSearch && (\r\n \r\n \r\n )}\r\n {!isReadOnlyUser && (\r\n \r\n {props.btnTitle && (\r\n \r\n \r\n \r\n \r\n )}\r\n {props.secondBtnTitle && (\r\n \r\n \r\n \r\n \r\n )}\r\n {props.mapBtnToolTipTitle && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n EmptyRowsRenderer(props)}\r\n rowHeight={state.rowHeight}\r\n headerRowHeight={state.headerRowHeight}\r\n className=\"custom-scroll\"\r\n style={gridStyle}\r\n defaultColumnOptions={{\r\n sortable: true,\r\n resizable: true\r\n }}\r\n sortColumns={sortColumns}\r\n onSortColumnsChange={setSortColumns}\r\n onRowClick={props.onRowClick || null}\r\n />\r\n {props.paginate ? (\r\n \r\n Page No: {state.pagedData.length > 0 ? state.pagedIndex : '0'}\r\n Rows Per Page: \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default DataGrid;\r\n","import React, { useState } from 'react';\r\nimport { IconButton, makeStyles } from '@material-ui/core';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport { Visibility, VisibilityOff } from '@material-ui/icons';\r\nimport { useLoginInfo } from '../../Hooks/useLoginInfo';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n showIcon: {\r\n padding: 0,\r\n marginRight: 0\r\n }\r\n}));\r\n\r\nlet PasswordField = (props) => {\r\n const { forceEditable, ...rest } = props;\r\n let classes = useStyles();\r\n let [showPass, setShowPass] = useState(false);\r\n let { isReadOnlyUser } = useLoginInfo();\r\n forceEditable && (isReadOnlyUser = false);\r\n\r\n let setShowPassword = () => {\r\n setShowPass((st) => !st);\r\n };\r\n return (\r\n \r\n
\r\n \r\n {crumb.active ? (\r\n crumb.onClick ? (\r\n \r\n {crumb.name}\r\n \r\n ) : (\r\n \r\n {crumb.name}\r\n \r\n )\r\n ) : (\r\n \r\n {crumb.name}\r\n \r\n )}\r\n
\r\n );\r\n })\r\n : null}\r\n \r\n {selectedTabIndex === index && {children} }\r\n
\r\n );\r\n}\r\n\r\nexport default function TabComponent(props) {\r\n const [state, setState] = React.useState({\r\n selectedIndex: undefined,\r\n tabList: []\r\n });\r\n useEffect(() => {\r\n setState((st) => ({ ...st, selectedIndex: props.selectedIndex }));\r\n }, [props.selectedIndex, props.timeDependency]);\r\n useEffect(() => {\r\n if (props.tabList) {\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst.tabList = [...props.tabList];\r\n if (nst.selectedIndex !== undefined) {\r\n if (nst.selectedIndex >= nst.tabList.length) {\r\n nst.selectedIndex = nst.tabList - 1;\r\n }\r\n } else if (nst.tabList.length) {\r\n nst.selectedIndex = 0;\r\n } else {\r\n nst.selectedIndex = undefined;\r\n }\r\n return nst;\r\n });\r\n }\r\n }, [props.tabList, state.selectedIndex]);\r\n\r\n const handleChange = (event, newValue) => {\r\n setState((st) => ({ ...st, selectedIndex: newValue }));\r\n };\r\n\r\n return (\r\n \r\n \r\n {state.tabList.map((m, i) => {\r\n let { tabId, panelId } = getTabAndPanelId(props.id, i);\r\n return \r\n {m.body}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n}\r\n","import { makeStyles } from '@material-ui/core/styles';\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { useEffect, useState } from 'react';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n boxShadow: (props) => `2px 5px 5px 0px ${props.color ? 'darkgrey' : 'lightgrey'}`,\r\n border: (props) => `1px solid ${props.color ? theme.palette[props.color].dark : 'lightgrey'}`,\r\n borderRadius: 5,\r\n marginBottom: 10,\r\n overflow: 'hidden',\r\n\r\n '&::before': {\r\n backgroundColor: 'transparent'\r\n }\r\n },\r\n\r\n heading: {\r\n background: (props) => (props.color ? theme.palette[props.color].dark : ''),\r\n color: (props) => (props.color ? theme.palette[props.color].contrastText : ''),\r\n fontSize: theme.typography.pxToRem(15),\r\n fontWeight: theme.typography.fontWeightRegular,\r\n borderBottom: (props) => `1px solid ${props.color ? theme.palette[props.color].dark : 'lightgrey'}`,\r\n\r\n '& .MuiIconButton-edgeEnd': {\r\n color: 'inherit'\r\n }\r\n }\r\n}));\r\n\r\nconst AccordionComponent = (props) => {\r\n const classes = useStyles(props);\r\n const [expand, setExpand] = useState({ open: false });\r\n useEffect(() => {\r\n setExpand((st) => ({ ...st, open: props.Expand }));\r\n }, [props.Expand, props.changedAt]);\r\n const handleChange = (event, isExpanded) => {\r\n setExpand((st) => ({ ...st, open: isExpanded }));\r\n };\r\n return (\r\n \r\n \r\n {inputLabel}\r\n \r\n
\r\n ) : (\r\n <>\r\n {inputLabel && (\r\n {props.value ? props.value?.name : 'N/A'}
\r\n \r\n
\r\n );\r\n}\r\n","import { postWithAuth, getWithAuth } from '../../Basic/HttpService';\r\n\r\nexport const getPostCodeDetails = async (val) => {\r\n let res = await getWithAuth(`Address/${val}`);\r\n return res;\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { MandatoryField } from '../index';\r\nimport RoomIcon from '@material-ui/icons/Room';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { getPostCodeDetails } from '../../Services/InternalUser/postCodeService';\r\nimport { CircularProgress, Grid, List, ListItem, ListItemText } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n ul: {\r\n padding: 5\r\n },\r\n listSection: {\r\n backgroundColor: 'inherit'\r\n },\r\n customScroll: {\r\n width: '25.5%',\r\n boxShadow: '1px 1px 1px 1px #9E9E9E',\r\n backgroundColor: theme.palette.background.paper,\r\n position: 'absolute',\r\n overflow: 'auto',\r\n maxHeight: 300,\r\n zIndex: 10,\r\n height: 'auto',\r\n overflow: 'auto',\r\n '&::-webkit-scrollbar': {\r\n width: '0.1em'\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: '#1976d2',\r\n opacity: 5,\r\n outline: '1px solid slategrey'\r\n }\r\n }\r\n}));\r\n\r\nexport const Postcode = (props) => {\r\n const classes = useStyles();\r\n const [show, setShow] = useState(false);\r\n const { name, value, onChange, errors, setVal } = props;\r\n const [postCodeList, setpostCodeList] = useState([]);\r\n const [code, setCode] = useState(null);\r\n const [loader, setloader] = useState(true);\r\n\r\n useEffect(async () => {\r\n if (code) {\r\n PostCodeValue();\r\n }\r\n }, [code]);\r\n\r\n const PostCodeValue = async () => {\r\n let TrimCode = code?.replace(/\\s/g, '');\r\n let res = await getPostCodeDetails(TrimCode);\r\n if (res.success) {\r\n setpostCodeList(res.data);\r\n setloader(false);\r\n } else {\r\n setpostCodeList([]);\r\n setloader(false);\r\n }\r\n };\r\n\r\n const getVal = (x) => {\r\n let FilterVal = [...postCodeList];\r\n let value = FilterVal.find((m) => {\r\n return m.addressLine1 === x;\r\n });\r\n setVal(value);\r\n setShow(!show);\r\n };\r\n\r\n const hideList = () => {\r\n setShow(false);\r\n };\r\n\r\n const showList = () => {\r\n setpostCodeList([]);\r\n setCode(props.value);\r\n setShow(true);\r\n setloader(true);\r\n PostCodeValue();\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 postCodeList.length === 0 && (\r\n - \r\n
\r\n
\r\n {loader ? (\r\n \r\n No Address Found\r\n
\r\n \r\n - \r\n {postCodeList.map((item, index) => (\r\n
\r\n {getAccessValue(`${configName}`) ?
\r\n );\r\n };\r\n\r\n const modifyCurrentFileName = (e) => {\r\n const { value } = e.target;\r\n setState((st) => ({ ...st, fileToAction: { ...st.fileToAction, fileName: value } }));\r\n };\r\n\r\n const updateFileToServer = async () => {\r\n let res = await updateName(getConfigIdFromName(configName), recordId, state.fileToAction.uniqFileName, state.fileToAction.fileName,docIDPassed);\r\n if (res.success) {\r\n // showToastSuccess(res.message);\r\n setState((st) => ({ ...st, inEdit: false, fileToAction: undefined }));\r\n getFiles(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n const confirmDelete = async () => {\r\n let res = await deleteUploadedFile(getConfigIdFromName(configName), recordId, state.fileToAction.uniqFileName);\r\n if (res.success) {\r\n // showToastSuccess(res.message);\r\n setState((st) => ({ ...st, inDelete: false, fileToAction: undefined }));\r\n getFiles(true);\r\n } else {\r\n showToastError(res.message);\r\n }\r\n };\r\n\r\n const downloadFile = (row) => async (e) => {\r\n let success = await downloadUploadedFile(getConfigIdFromName(configName), recordId, row.UniqueFileName, `${row.FileName}${row.FileExt}`,docIDPassed);\r\n if (success) {\r\n getFiles(true);\r\n } else {\r\n showToastError(`Something went wrong, can't download file.`);\r\n }\r\n };\r\n\r\n const gridColumns = useMemo(() => {\r\n const cols = [...basicColumns];\r\n if (!isReadOnlyUser) {\r\n cols.push({\r\n name: '',\r\n width: 90,\r\n formatter: actionButtons\r\n });\r\n }\r\n const fn = cols.find((c) => c.key === 'FileName');\r\n if (fn) {\r\n fn.formatter = (params) => {\r\n return (\r\n \r\n {params.row.FileName}\r\n \r\n );\r\n };\r\n }\r\n return cols;\r\n }, [isReadOnlyUser]);\r\n\r\n return (\r\n \r\n {!isReadOnlyUser && (\r\n \r\n \r\n \r\n \r\n \r\n \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.inDelete && (\r\n \r\n \r\n Are you sure you want to delete?\r\n \r\n \r\n No, Close\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default UploaderModal;\r\n","import { useEffect, useState } from 'react';\r\nimport { Badge, IconButton, Tooltip } from '@material-ui/core';\r\nimport { PermMedia } from '@material-ui/icons';\r\nimport DialogComp from '../../Dialog/DialogComp';\r\nimport UploaderModal from './UploaderModal';\r\nimport { CustomIconButton } from '../Inputs/Buttons/ButtonModal';\r\nimport { Link } from 'react-router-dom';\r\nimport '../Inputs/Buttons/ButtonModal.scss';\r\nimport { useLoginInfo } from '../../Hooks/useLoginInfo';\r\nimport { useToast } from '../../Hooks/useToast';\r\nimport { AppStorage } from '../../Basic/storage-service';\r\n\r\nconst FileUploaderButton = ({ fileCount, recordId, fileUploaderConfigName, ut, uli, gridRelaod, fileUploaderModalClose,docIDPassed }) => {\r\n const [state, setState] = useState({\r\n showUploader: false,\r\n recordId,\r\n fileCount: `${fileCount || 0}`,\r\n configName: fileUploaderConfigName\r\n });\r\n let checkhaveAccess = AppStorage.getAllowAcces();\r\n useEffect(() => {\r\n if (fileCount) {\r\n setState((st) => ({\r\n fileCount: fileCount || 0\r\n }));\r\n }\r\n }, [fileCount]);\r\n\r\n const hideFileUploader = (res) => {\r\n setState((st) => ({ ...st, showUploader: false }));\r\n res && gridRelaod();\r\n };\r\n\r\n const showFileUploader = () => {\r\n setState((st) => ({ ...st, showUploader: true }));\r\n };\r\n\r\n return (\r\n <>\r\n {/* \r\n
\r\n \r\n {inputLabel}\r\n \r\n
\r\n ) : (\r\n <>\r\n {inputLabel && (\r\n {state.date || 'N/A'}
\r\n