\r\n {value === index && (\r\n \r\n {children}
\r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nTabPanel.propTypes = {\r\n children: PropTypes.node,\r\n index: PropTypes.any.isRequired,\r\n value: PropTypes.any.isRequired\r\n};\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `vertical-tab-${index}`,\r\n 'aria-controls': `vertical-tabpanel-${index}`\r\n };\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n height: 'calc(100vh - 200px)',\r\n padding: '0px 0px 0px 0px'\r\n // display: 'flex'\r\n },\r\n tabs: {\r\n borderRight: `1px solid ${theme.palette.divider}`,\r\n minWidth: 250\r\n // background: '#e9eaea',\r\n // boxShadow: ' rgba(0, 0, 0, 0.24) 1px 0px 1px 0px'\r\n },\r\n panal: {\r\n padding: '0px'\r\n // boxShadow: ' rgba(0, 0, 0, 0.24) 0px 3px 8px'\r\n },\r\n tab: {\r\n fontSize: 12,\r\n height: 12\r\n }\r\n}));\r\n\r\nconst UserProfile = () => {\r\n const {\r\n loggedIn,\r\n userRoles,\r\n displayName,\r\n lastLogin,\r\n showToast,\r\n portalSettings,\r\n showModal,\r\n showTopNavAndMenu,\r\n hideShowTopNav,\r\n isTopNav,\r\n tempMenus,\r\n reportingMenus\r\n } = useContext(AppContext);\r\n const [width, height] = useWindowSize();\r\n let isAdmin = userRoles.includes('admin');\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState(0);\r\n const isTwoFA_flag = AppStorage.getTwoFactorEnabled();\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n const postSignData = async (sign, id, defaultInternalDashboard, appbarLocation) => {\r\n const data = {\r\n signature: sign,\r\n AppbarLocation: appbarLocation,\r\n defaultInternalDashboard: defaultInternalDashboard\r\n };\r\n console.log('from leftbar ');\r\n\r\n let resSign = await postSignature(data);\r\n let resStatus = id && (await postSignatureStatus(id));\r\n if (resSign) {\r\n if (resSign?.success) {\r\n AppStorage.setSignature(sign);\r\n AppStorage.setUserGridColumnAppbarLocation(appbarLocation);\r\n localStorage.setItem('_defaultInternalDashboard_', defaultInternalDashboard);\r\n\r\n showToast('User Settings Updated Successfully!');\r\n } else {\r\n showToast(resSign?.message || 'Something went wrong!');\r\n }\r\n }\r\n };\r\n\r\n let tabs = [\r\n ...(!isAdmin\r\n ? [\r\n {\r\n label: 'My Settings',\r\n body: (\r\n \r\n
= 1280 ? 10 : 30,\r\n boxShadow: width >= 1280 ? 'none' : ' rgba(0, 0, 0, 0.24) 0px 3px 8px'\r\n }}\r\n >\r\n \r\n \r\n
= 1280 ? 'none' : ' rgba(0, 0, 0, 0.24) 0px 3px 8px'\r\n }}\r\n >\r\n \r\n = 1280 ? 'flex' : 'block' }}>\r\n = 1280 ? 'vertical' : 'horizontal'}\r\n variant=\"scrollable\"\r\n value={value}\r\n onChange={handleChange}\r\n aria-label=\"vertical tabs example\"\r\n className={classes.tabs}\r\n indicatorColor=\"secondary\"\r\n textColor=\"secondary\"\r\n >\r\n {tabs.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n\r\n {tabs.map((m, i) => {\r\n return (\r\n \r\n {m.body}\r\n \r\n );\r\n })}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default UserProfile;\r\n","export default __webpack_public_path__ + \"static/media/User.d459394a.svg\";","export default __webpack_public_path__ + \"static/media/Vehicle.dadc1d67.svg\";","import React from 'react';\r\n\r\nlet ByteImage = function (props) {\r\n let ref = props.imgRef;\r\n let newProp = {\r\n ...props,\r\n className: `${props.className || ''} byte-image`,\r\n src: props.src && `data:image/png;base64,${props.src}`\r\n };\r\n delete newProp.imgRef;\r\n\r\n return ![]()
;\r\n};\r\n\r\nexport default ByteImage;\r\n","import React from 'react'\r\n\r\nlet ByteImage = function (props) {\r\n let ref = props.imgRef;\r\n let newProp = {\r\n ...props,\r\n className: `${props.className || ''} byte-image`,\r\n src: props.src && `data:image/png;base64,${props.src}`\r\n }\r\n delete newProp.imgRef;\r\n\r\n return ![]()
\r\n};\r\n\r\nexport default ByteImage;","import React, { useState, useRef, useEffect } from 'react';\r\nimport './SignPad.scss';\r\nimport SignatureCanvas from 'react-signature-canvas';\r\nimport ByteImage from '../ByteImage/ByteImage';\r\nimport { PrimaryButton, SecondaryButton } from '../FormInput';\r\nimport { AppStorage } from '../Service/storage-service';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\n\r\nfunction getInitState(props = {}) {\r\n return {\r\n showSubmitButton: props.showSubmitButton === undefined ? true : !!props.showSubmitButton,\r\n showClearButton: props.showClearButton === undefined ? true : !!props.showClearButton,\r\n showClearAllButton: !!props.showClearAllButton,\r\n imageFromCanvas: null,\r\n drawn: props.isDrawnImage,\r\n anyStroke: false\r\n };\r\n}\r\n\r\nexport let SignPad = function (props) {\r\n let signPad = useRef(null);\r\n let bgImage = useRef(null);\r\n let [state, setState] = useState(getInitState(props));\r\n\r\n const useDefaultSig = () => {\r\n signPad.current.clear();\r\n let userSign = AppStorage.getSignature();\r\n if (userSign) {\r\n let img = signPad.current.fromDataURL(AppStorage.getSignature());\r\n signPad.current.fromDataURL(AppStorage.getSignature());\r\n\r\n setState((st) => ({\r\n ...st,\r\n imageFromCanvas: img\r\n }));\r\n if (props.onDone) {\r\n console.log('on Donmessssssssssssssss');\r\n props.onDone(userSign.split(',')[1], true);\r\n } else {\r\n console.log('Image captured.');\r\n }\r\n } else {\r\n console.error();\r\n }\r\n };\r\n\r\n function clearCanvas() {\r\n signPad.current.clear();\r\n setState((st) => ({ ...st, anyStroke: false }));\r\n if (props.dontRemoveBgOnClear) {\r\n setCanvasBackgroundImage();\r\n } else {\r\n setState((st) => ({ ...st, drawn: false }));\r\n }\r\n props.onClear && props.onClear();\r\n }\r\n\r\n function clearAllCanvas() {\r\n setState((st) => ({ ...st, drawn: false }));\r\n bgImage.current.src = `data:image/png;base64,${props.orgBgImage}`;\r\n setTimeout(() => {\r\n clearCanvas();\r\n }, 500);\r\n }\r\n\r\n function setSignImage() {\r\n let img = signPad.current.toDataURL('image/png');\r\n console.log(img, 'split col');\r\n setState((st) => ({\r\n ...st,\r\n imageFromCanvas: img\r\n }));\r\n\r\n if (props.handleclose) {\r\n props.handleclose();\r\n }\r\n if (props.onDone) {\r\n props.onDone(img.split(',')[1], state.drawn || state.anyStroke);\r\n } else {\r\n console.log('Image captured.');\r\n }\r\n }\r\n\r\n function setCanvasBackgroundImage() {\r\n let cnvs = signPad.current.getCanvas();\r\n\r\n if (bgImage.current) {\r\n if (props.resizeCanvasAsImage) {\r\n let ratioImg = { h: bgImage.current.height, w: bgImage.current.width };\r\n let ratioWindow = { h: window.innerHeight, w: Math.min(540, window.innerWidth - 60) };\r\n let newRatio;\r\n if (ratioImg.h / ratioImg.w > ratioWindow.h / ratioWindow.w) {\r\n newRatio = { h: ratioWindow.h, w: (ratioWindow.h * ratioImg.w) / ratioImg.h };\r\n } else {\r\n newRatio = { h: (ratioImg.h * ratioWindow.w) / ratioImg.w, w: ratioWindow.w };\r\n }\r\n\r\n cnvs.height = newRatio.h;\r\n cnvs.width = newRatio.w;\r\n cnvs.style.height = 'auto';\r\n cnvs.style.width = 'auto';\r\n let cntx = cnvs.getContext('2d');\r\n cntx.drawImage(bgImage.current, 0, 0, cnvs.width, cnvs.height);\r\n } else {\r\n signPad.current.fromDataURL(bgImage.current.src);\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setCanvasBackgroundImage();\r\n }, [props.bgImage]);\r\n\r\n function start() {\r\n setState((st) => ({ ...st, anyStroke: true }));\r\n }\r\n\r\n function endDrawing() {\r\n props.submitOnDrawingEnd && setSignImage();\r\n }\r\n\r\n return (\r\n \r\n
\r\n {props.bgImage &&
}\r\n
\r\n {props.readOnly && }\r\n \r\n {state.showSubmitButton && (\r\n
\r\n {props.submitButtonText || 'Ok'}\r\n \r\n )}\r\n {state.showClearButton && !props.showCrossClearBtn && (\r\n
\r\n Clear\r\n \r\n )}\r\n {state.showClearAllButton && (\r\n
\r\n Clear All\r\n \r\n )}\r\n
\r\n {!props.onDone &&
{state.imageFromCanvas &&
}
}\r\n
\r\n
{localState.loadingData && 
} \r\n )\r\n }}\r\n title={config.tooltip}\r\n name={controlName}\r\n onChange={pullAndSync}\r\n value={controlValue}\r\n autoComplete={controlName}\r\n />\r\n {localState.searched && (\r\n \r\n \r\n \r\n <>\r\n {localState.items.length > 0 ? (\r\n localState.items.map((item, i) => (\r\n
handleCodePull(item)} className=\"SuggestUi\">\r\n {item.firstName && {item.firstName}} \r\n {item.firstName && item.postCode && {item.postCode}} \r\n {{item.addressLine1}}\r\n
\r\n ))\r\n ) : (\r\n
\r\n No Record Found\r\n
\r\n )}\r\n \r\n
\r\n {localState.showModal ? (\r\n
\r\n {localState.selectedImage && (\r\n \r\n \r\n
\r\n )}\r\n \r\n ) : null}\r\n \r\n {localState.images.map((img, i) => (\r\n \r\n \r\n selectImage(img)}\r\n src={img.imgSrc || img.orgImgSrc}\r\n title={img.faceName}\r\n />\r\n {img.imgSrc && (\r\n undoChanges(i)}\r\n style={{\r\n position: 'absolute',\r\n right: '3px',\r\n top: '4px',\r\n fontSize: '22px',\r\n border: '1px solid lightslategrey',\r\n padding: '0px 5px'\r\n }}\r\n >\r\n ↶\r\n \r\n // undoChanges(i)} >\r\n // ↶\r\n // \r\n )}\r\n \r\n selectImage(img)}\r\n src={img.imgSrc || img.orgImgSrc}\r\n title={img.faceName}\r\n style={{\r\n height: 250,\r\n width: 350,\r\n margin: 10,\r\n border: '1px dotted rgba(0,0,0,0.4) '\r\n }}\r\n />\r\n {img.imgSrc && (\r\n undoChanges(i)}>\r\n ↶\r\n \r\n )}\r\n
\r\n ))} */}\r\n \r\n );\r\n};\r\n\r\nexport default VehFaceComponent;\r\n","export default __webpack_public_path__ + \"static/media/bullet.64745812.svg\";","import React, { useState } from 'react';\r\n\r\nimport loadingImg from './bullet.svg';\r\nimport lensIcon from './Search.png';\r\nimport { get as _get, has as _has } from 'lodash';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\n\r\nimport { Grid, IconButton, Input, InputAdornment } from '@material-ui/core';\r\nimport { TextBox } from '../../../FormInput';\r\nimport { CustomIconButton } from '../../../FormInput/AppButton';\r\nimport { getApiData } from '../../../Service/apprisal-service';\r\n\r\nlet DataPuller = function ({ config, state, onFieldChange, otherConfig, screenState, autoFocus, pullPatchData, readOnly }) {\r\n let controlName = config.screenColumnJsonName;\r\n let controlValue = `${state[controlName] || ''}`;\r\n\r\n let [localState, setLocalState] = useState({\r\n loadingData: false\r\n });\r\n\r\n const pullDataFromServer = async () => {\r\n if (config.screenColumnControlValueApiEndPoint) {\r\n let actualUrl = config.screenColumnControlValueApiEndPoint;\r\n var templates = actualUrl.match(/{[\\w.]+}/g);\r\n let toReplace = {};\r\n templates.forEach((pattern) => {\r\n pattern = pattern.trim();\r\n switch (pattern) {\r\n case '{controlValue}':\r\n toReplace[pattern] = controlValue;\r\n break;\r\n default:\r\n let pth = pattern.match(/[\\w.]+/g)[0];\r\n if (_has(screenState, pth)) {\r\n toReplace[pattern] = _get(screenState, pth);\r\n }\r\n }\r\n });\r\n\r\n Object.keys(toReplace).forEach((key) => {\r\n actualUrl = actualUrl.replace(new RegExp(key, 'g'), toReplace[key]);\r\n });\r\n\r\n let res = await getApiData(actualUrl);\r\n if (res.success) {\r\n pullPatchData(controlName, res?.data?.mot);\r\n // setLocalState((st) => ({ ...st, loadingData: true }));\r\n } else {\r\n setLocalState((st) => ({ ...st, loadingData: false }));\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {localState.loadingData ? (\r\n \r\n ) : (\r\n false : pullDataFromServer}\r\n disabled={readOnly}\r\n style={{ cursor: readOnly ? 'none' : 'pointer' }}\r\n />\r\n )}\r\n \r\n )\r\n }}\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default DataPuller;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\n// import ModalPopup from '../../Modal/ModalPopup';\r\nimport ByteImage from '../../ByteImage/ByteImage';\r\nimport { SignPad } from '../../../SignaturePad/SignPad';\r\nimport DialogComp from '../../Dialog/DialogComp';\r\nimport { PrimaryButton, SecondaryButton } from '../../../FormInput';\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Button from '@material-ui/core/Button';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n '& > *': {\r\n margin: theme.spacing(1)\r\n }\r\n }\r\n}));\r\n\r\nlet VehiclePhotoUploader = function ({ config, state, onFieldChange, readOnly, autoFocus }) {\r\n const classes = useStyles();\r\n let controlName = config.screenColumnJsonName;\r\n let title = config.tooltip;\r\n let fileRef = useRef(null);\r\n let [localState, setLocalState] = useState([]);\r\n let [showImageModal, setShowImageModal] = useState(false);\r\n\r\n useEffect(() => {\r\n state[controlName] && setLocalState(state[controlName].map((c) => c.imgSrc));\r\n }, [state[controlName]]);\r\n\r\n function updateParentState(newArray) {\r\n onFieldChange({ target: { name: controlName, value: newArray.map((src, i) => ({ index: i, imgSrc: src })) } });\r\n }\r\n\r\n function fileSelected() {\r\n let input = fileRef.current;\r\n if (input.files && input.files[0]) {\r\n let allBase64Imgs = [];\r\n let fileCount = input.files.length;\r\n let fileReadCount = 0;\r\n for (let i = 0; i < fileCount; i++) {\r\n var reader = new FileReader();\r\n reader.onload = function (e) {\r\n fileReadCount += 1;\r\n let base64String = e.target.result;\r\n allBase64Imgs.push(base64String.split(',')[1]);\r\n fileCount === fileReadCount && updateParentState([...localState, ...allBase64Imgs]);\r\n };\r\n reader.readAsDataURL(input.files[i]);\r\n }\r\n input.value = '';\r\n }\r\n }\r\n\r\n function removeImage(index) {\r\n let newArray = [...localState];\r\n newArray.splice(index, 1);\r\n updateParentState(newArray);\r\n }\r\n\r\n function selectImage(image) {\r\n setShowImageModal(image);\r\n }\r\n\r\n function modalClose() {\r\n setShowImageModal(false);\r\n }\r\n\r\n return (\r\n \r\n {/*
*/}\r\n\r\n {showImageModal && (\r\n
\r\n \r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n {!hidden && (\r\n \r\n )}\r\n
\r\n // \r\n // {!hidden && }\r\n // {/* {localState.signed && (\r\n // \r\n // Clear\r\n // \r\n // )} */}\r\n //
\r\n );\r\n};\r\n\r\nexport default UserSignature;\r\n","import React, { useState, useEffect } from 'react';\r\nimport SliderCheckbox from './Child Controls/_Checkbox';\r\nimport { DatePicker, DateTimePicker, SelectBox, TextBox } from '../../FormInput';\r\nimport { Checkbox, FormControlLabel, FormLabel, Grid, Switch } from '@material-ui/core';\r\nimport './Form.scss';\r\nimport { CheckBox } from '@material-ui/icons';\r\nimport VehFaceComponent from './Child Controls/Veh-faces.component';\r\nimport { IosSwitch } from '../../FormInput/AppCheckbox';\r\nimport { calculateReadonly, getApiData, getFormGlobalConfig } from '../../Service/apprisal-service';\r\nimport DataPuller from './Child Controls/DataPuller';\r\nimport VehiclePhotoUploader from './Child Controls/VehiclePhotoUploader';\r\n// import UserSignature from './Child Controls/UserSignature';\r\nimport moment from 'moment';\r\nimport UserSignature from './Child Controls/UserSignature';\r\nimport AutoSuggest from './Child Controls/AutoSuggest';\r\n\r\nlet FormControl = function ({ config, state, onFieldChange, screenState, autoFocus, pullPatchData, onSignatureUpdate, pullDropDownList }) {\r\n let controlName = config.screenColumnJsonName;\r\n let controlValue = state[controlName] || '';\r\n let min = config.screenColumnMinValue;\r\n let max = config.screenColumnMaxValue;\r\n let otherConfig = getFormGlobalConfig();\r\n let req = config.screenColumnRequired;\r\n let readOnly = calculateReadonly(config, otherConfig);\r\n let hidden = otherConfig.editMode ? config.editHidden : config.hidden;\r\n let title = config.screenColumnTooltip;\r\n let minMaxString = '';\r\n\r\n if (min || max) {\r\n minMaxString = '(';\r\n if (min) {\r\n minMaxString += `min: ${min}`;\r\n }\r\n if (max) {\r\n minMaxString += minMaxString.length > 1 ? ', ' : '';\r\n minMaxString += `max: ${max}`;\r\n }\r\n minMaxString += ')';\r\n }\r\n\r\n let [localState, setLocalState] = useState({\r\n selectOptions: []\r\n });\r\n\r\n useEffect(async () => {\r\n if (config.screenColumnControlType.toLowerCase() === 'select') {\r\n if (config.screenColumnControlValueApiEndPoint) {\r\n let res = await getApiData(config.screenColumnControlValueApiEndPoint);\r\n if (res.success) {\r\n setLocalState((st) => ({\r\n ...st,\r\n selectOptions: res?.data?.list\r\n }));\r\n }\r\n if (controlName === 'colourId' || controlName === 'vehicleTypeId') {\r\n pullDropDownList(controlName, res?.data?.list);\r\n }\r\n // });\r\n } else if (config.apiEndPointData) {\r\n setLocalState((st) => ({ ...st, selectOptions: config.apiEndPointData }));\r\n }\r\n }\r\n }, []);\r\n\r\n let liClass = [`li-${config.screenColumnControlType?.toLowerCase()}`];\r\n hidden && liClass.push('d-none');\r\n config.sectionCssClasses && liClass.push(config.sectionCssClasses);\r\n !hidden && req && liClass.push('child-required');\r\n\r\n function onLocalControlChange(e) {\r\n onFieldChange(e, config);\r\n }\r\n function onsignControl(val) {\r\n onSignatureUpdate(val, config);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {config.screenColumnLabel}\r\n {minMaxString && {minMaxString}}\r\n \r\n \r\n\r\n {config.screenColumnControlType.toLowerCase() === 'textbox' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'email' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'number' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'money' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'password' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'textarea' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'select' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'datetime' && (\r\n \r\n )}\r\n\r\n {config.screenColumnControlType.toLowerCase() === 'date' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'checkbox' && (\r\n \r\n \r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'autosuggest' && (\r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'data-puller' && (\r\n \r\n )}\r\n {config?.screenColumnControlType?.toLowerCase() === 'damage-faces' && (\r\n \r\n \r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'photo-uploader' && (\r\n \r\n \r\n \r\n )}\r\n {config.screenColumnControlType.toLowerCase() === 'sign-pad' && (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default FormControl;\r\n","import React, { useState, useEffect } from 'react';\r\nimport FormControl from './FormControl';\r\nimport './Form.scss';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport { calculateReadonly, getFormGlobalConfig } from '../../Service/apprisal-service';\r\n\r\nfunction isValueSet(value) {\r\n return !(value === '' || value === undefined || value === null);\r\n}\r\n\r\nfunction isOutOfRange(config, value) {\r\n let result = false;\r\n // reached here mean field is not required. And if value set, any has some min / max set then test\r\n if (isValueSet(value) && (config.min || config.max)) {\r\n let min = config.min;\r\n let max = config.max;\r\n switch (config.controlType.toLowerCase()) {\r\n case 'textbox':\r\n case 'autosuggest':\r\n case 'email':\r\n case 'password':\r\n case 'textarea':\r\n if (min) {\r\n result = result || min > value.length;\r\n }\r\n if (max) {\r\n result = result || max < value.length;\r\n }\r\n break;\r\n case 'number':\r\n case 'money':\r\n if (min) {\r\n result = result || +min > +value;\r\n }\r\n if (max) {\r\n result = result || +max < +value;\r\n }\r\n break;\r\n case 'date':\r\n value = ''; //formatDateTimeToDate(value);\r\n if (min) {\r\n min = 0; //stringDayToDate(min);\r\n result = result || min.startOf('day') > value.startOf('day');\r\n }\r\n if (max) {\r\n max = 0; //stringDayToDate(max);\r\n result = result || max.startOf('day') < value.startOf('day');\r\n }\r\n break;\r\n case 'damage-faces':\r\n case 'photo-uploader':\r\n if (min) {\r\n result = result || +min > value.length;\r\n }\r\n if (max) {\r\n result = result || +max < value.length;\r\n }\r\n break;\r\n }\r\n }\r\n return result;\r\n}\r\n\r\nlet FormComponent = function ({ formName, formRef, fieldSet, screenState, setScreenState, heading, formErrors, setFormErrors }) {\r\n // let [formErrors, setFormErrors] = useState([]);\r\n\r\n function updateStateFromForm(e, config) {\r\n let fieldValue = e?.target?.value;\r\n let fieldName = e?.target?.name;\r\n let fieldCheck = e?.target?.checked;\r\n let fieldFormName = formName;\r\n\r\n setScreenState((st) => {\r\n let newSt = { ...st };\r\n\r\n if (config.screenColumnControlType === 'checkbox') {\r\n newSt[fieldFormName] = { ...newSt[fieldFormName], [fieldName]: fieldCheck };\r\n } else if (config.screenColumnControlType === 'sign-pad') {\r\n newSt[fieldFormName] = { ...newSt[fieldFormName], e };\r\n } else {\r\n newSt[fieldFormName] = { ...newSt[fieldFormName], [fieldName]: fieldValue };\r\n }\r\n return newSt;\r\n });\r\n }\r\n function updateSignatureForm(e, config) {\r\n let fieldFormName = formName;\r\n\r\n setScreenState((st) => {\r\n let newSt = { ...st };\r\n\r\n if (config.screenColumnControlType === 'sign-pad') {\r\n newSt[fieldFormName] = { ...newSt[fieldFormName], ...e };\r\n }\r\n return newSt;\r\n });\r\n }\r\n\r\n const pullPatchData = (name, data) => {\r\n let fieldFormName = formName;\r\n setScreenState((st) => {\r\n let newSt = { ...st };\r\n if (name === 'regNo') {\r\n newSt[fieldFormName] = {\r\n ...newSt[fieldFormName],\r\n regNo: data.registrationNumber,\r\n regDate: data.registrationDate,\r\n motDueDate: data.motExpiryDate,\r\n make: data.make,\r\n model: data.model,\r\n vehicleTypeId: screenState.vehicleTypeIdList.find((o) => o.name == data.vehicleType)?.id,\r\n colourId: screenState.colourIdList.find((o) => o.name == data.colour)?.id,\r\n vehicleBody: data.wheelplan,\r\n rflExpiryDate: data.taxDueDate,\r\n fueltype: data.fuelType,\r\n engine: data.engineCapacity\r\n // appraisalDate: '2023-11-24T15:54:28',\r\n // estimatedArrivalDate: null,\r\n // extras: null,\r\n // mileage: 1,\r\n // noOfOwners: null,\r\n // tailLift: null,\r\n // type: null,\r\n // variant: null,\r\n // vehicleTypeId: 1,\r\n // weight: null\r\n };\r\n } else {\r\n newSt[fieldFormName] = {\r\n ...newSt[fieldFormName],\r\n ...data\r\n };\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const pullDropDownList = (name, list) => {\r\n setScreenState((st) => ({ ...st, [`${name}List`]: list || [] }));\r\n };\r\n\r\n let getparseFunction = (string) => {\r\n if (string != null) {\r\n let a = string;\r\n let jsonObject = {};\r\n\r\n try {\r\n jsonObject = JSON.parse(a);\r\n } catch (error) {\r\n console.error('Error parsing JSON:', error);\r\n }\r\n\r\n return jsonObject;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n // const validateForm = () => {\r\n //return true if its in readonly all mode -> edit page for completed appraisal.\r\n // if (allReadonly) {\r\n // return true;\r\n // }\r\n let err = [];\r\n fieldSet.forEach((config) => {\r\n let node = screenState[formName];\r\n let label = config.screenColumnLabel;\r\n let field = config.screenColumnJsonName;\r\n let value = node[field];\r\n let req = config.screenColumnRequired;\r\n if (req && !value) {\r\n err.push(`${label}`);\r\n }\r\n });\r\n setFormErrors(err);\r\n }, [fieldSet, formName, screenState]);\r\n\r\n let focusFieldFound = false;\r\n\r\n let { editMode, allReadonly } = getFormGlobalConfig();\r\n\r\n let shouldBeAutoFocus = (fieldConfig) => {\r\n if (allReadonly || focusFieldFound) {\r\n return false;\r\n }\r\n if (['hidden', 'divider', 'new-row', 'empty-col'].indexOf(fieldConfig.screenColumnControlType.toLowerCase()) === -1) {\r\n let otherConfig = getFormGlobalConfig();\r\n let readonly = calculateReadonly(fieldConfig, otherConfig);\r\n let hidden = otherConfig.editMode ? fieldConfig.editHidden : fieldConfig.hidden;\r\n if (!readonly && !hidden) {\r\n focusFieldFound = true;\r\n return true;\r\n }\r\n }\r\n return false;\r\n };\r\n return (\r\n \r\n {heading}\r\n
\r\n
\r\n\r\n \r\n {fieldSet.map((f) => {\r\n let screenSizeHandler = getparseFunction(f.screenColumnFieldSectionCssClasses);\r\n\r\n return (\r\n <>\r\n {f.screenColumnControlType !== 'divider' ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n {f.screenColumnLabel}\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 FormComponent;\r\n","import React, { useEffect, useReducer, useState } from 'react';\r\nimport { reducer, initState } from '../../Components/Reducer/action';\r\nimport './ScreenStep.scss';\r\nimport { Button, Grid } from '@material-ui/core';\r\nimport { SecondaryButton } from '../FormInput';\r\nimport { DragHandle } from '@material-ui/icons';\r\nimport DialogComp from '../Controls/Dialog/DialogComp';\r\nimport { Alert, AlertTitle } from '@material-ui/lab';\r\n\r\nlet ScreenSteps = function (props) {\r\n let [state, setState] = useState({ currentIndex: 0, lastIndex: 0, showErros: false });\r\n let Comp;\r\n\r\n useEffect(() => {\r\n setState((st) => ({ ...st, steps: props.steps }));\r\n }, [props.steps]);\r\n\r\n const nextSubmit = () => {\r\n if (props.formErrors.length == 0) {\r\n setState((st) => ({ ...st, currentIndex: st.currentIndex + 1 }));\r\n } else {\r\n setState((st) => ({ ...st, showErros: true }));\r\n }\r\n };\r\n const tabsubmit = (index) => {\r\n if (index < state.currentIndex) {\r\n setState((st) => ({ ...st, currentIndex: index }));\r\n }\r\n };\r\n const previewSubmit = () => {\r\n setState((st) => ({ ...st, currentIndex: st.currentIndex - 1 }));\r\n };\r\n\r\n function closePopupModal() {\r\n setState((st) => ({ ...st, showErros: false }));\r\n }\r\n\r\n const handleSubmit = () => {\r\n if (props.formErrors.length == 0) {\r\n props.onFinalSubmit();\r\n } else {\r\n setState((st) => ({ ...st, showErros: true }));\r\n }\r\n };\r\n\r\n // function submitFormIfAny() {\r\n // closePopupModal();\r\n // props.onFinalSubmit && props.onFinalSubmit();\r\n // }\r\n Comp = state.currentIndex > -1 ? props.steps[state?.currentIndex]?.component : ;\r\n return (\r\n \r\n {Comp}\r\n {state.showErros ? (\r\n
\r\n {props.formErrors.map((k) => (\r\n \r\n {k} This field is required\r\n \r\n ))}\r\n \r\n ) : null}\r\n
\r\n
\r\n \r\n \r\n Previous\r\n \r\n \r\n {state.currentIndex !== 6 ? (\r\n \r\n \r\n Next\r\n \r\n \r\n ) : (\r\n \r\n \r\n Save\r\n \r\n \r\n )}\r\n \r\n\r\n
\r\n {state.steps?.map((st, i) => (\r\n
tabsubmit(i)}\r\n >\r\n {st.icon && 
}\r\n {st.label || ''}\r\n \r\n ))}\r\n \r\n
\r\n
\r\n {localState.loaded ? (\r\n
\r\n \r\n
\r\n ) : (\r\n
\r\n \r\n {localState?.fields && (\r\n \r\n )}\r\n {!appraisalRecordId &&\r\n screenNumber == 1 &&\r\n screenState.customerDetails.customerId &&\r\n screenState.customerDetails.customerId > 0 &&\r\n screenState.vehicleAppraisalDetails.appraisalStatusId !== 3 ? (\r\n \r\n {' '}\r\n \r\n {' '}\r\n Insert as New\r\n \r\n \r\n ) : null}\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default CreateAppraisal;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNq8VotxgzAMhV4GYIO6E9QjhAmSERgh3YBOkHQCukG6AdmAdALSCWADV+qJnKLKxqa56s5wGMvP+j05d85l/y0rfOR5Hq0AhyzgZdnUGfTHBH16JAisb92tHBP1s4cF3rHi2yTvoFmKLoRRw7Bifud02Yp1FtdGu5cAO7ZhQwdoXVj2CE7rJ+koB/ygCuA9pJGg+c+Dspfc2c1E5ALjBOMLxjPFOBjXnJWHz72158StjDHTWQc8tIuNqapIMRtorscDCt1GKqYkEpea/TMMVE0WkXBDLCh3b68oWQU4dDDdvbQQXXcUm1U03/N4ErDzWaS4GQ1ZS9DekwQFs3yYgBVQJ0C3vvLBpasQlSGRs/0wbhivN3hvZsrq7Jk3Vx/7qtpnlSK9sNQEyu5K+KOvjYG1ZyKDkBjBPD6yGLmlhpJG8mvFyqiNpTziYafwt/lFg6SA/XHqGif4V/IEEa3tEUYlrHkn/al2X2CPw1yd2hCNKSFoYmMdAtWSoFoI3C1hJNkvCw+oRo+T2Hu0tg8Yn+x7o1xhbloh7P8018SHOzfxLngxo6tkKeoWs/E1olaxng/U5PlcGXsxs0T+NjJhKrFuT/rFn++9ngbfZQmSfO8l90vKPGWJslpw2S4ZY42UzUnyLcAAl/Qq9hKDgcUAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAdCAYAAADl208VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmpJREFUeNrcWIFxwjAMdDgGgAkaJmhGgA3CBnQDmKAwAdcJKBPQTpBsQDZIOgFskErcm3PdJLYChFLd6UKCZfuttyQ7KMtS/Su5ByAac0w6uAWW/o0nHtFjTboNguAd35b0eCVdkS49+mDgM1LXAnD/RV+vmGCeGU3u6NmWwXDfEY3Bdhn9TgHo2XNBEg8wCv0WJzeVMjmQxp4emqE9y17TjJ45aeLyjGHrI+PT9mkBSEvomFCoVxlgWDb4NufJOuyXwvmcAAUICmZkWNWM8QQun11MFJo08H6P1+mJCkoxGPbsAnw/kH3QYJ8bVGOKT0DZ5gBne8iDQqbM67wDWv1oB8+U8NoGe8THOzPviC0BBKONtZ/ChrYx7xVNN+wLTcG4LhhZeyeXhO1ei2i8AAUUKLGua0gU+QAtR7DZ4S/+FtaxwIpqW3EyknjIoo6WWDBe7Pg/txgwkGBpBQjG+7YDC/boUuqcqiiXetqHFm04An0i+qUtAeVWn0NBEleX5iGXsAfXWPWwhXc2bWq5Kg/dSgp4f0WrXlRRmEsky+NHYbDKugSkjCQ5MqmEfLS/sF+OnGlPdS8DVAymRNfq/B6AVEUOst9fUBYNQb0/D6jxXKPPTqDl9NEBHR3vDwdoZhWta4nxtY7gBTSsq9GEQYML2hR9RV0DynBWOaL8Sa4QtaoiYWeUW+mcguebz8a/FV/7RlKSSuIIwRmy9y96VlUKDcC/BLRvfy9nVNsHfVDDuf4grcUa7g/GwjldBGjsuBmKHgpQxTWV+JrLuoNILN1Jz1jnarvm8sW3k4G+TMS+SSVnmGtfBX8LMAAzjQpiwKuXmgAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAThJREFUeNrsV4sNgjAUtIYBHIERcIOygY7ABjKBYRIcgQ1gA9gANwAnqK+xkGdtKZWiTfSSixZbe7n38UkYYxsfsN14gichhJCRAApkK5P67cgMNMCYPCw7AntXQgK8gMQ9wctOLCvF/gQ0NCKMBezne3MnSnjVIGJQac0UZ0M2jRzYTnxOh7u3lqIj6RE1HMkE3ToCqPlzce4A7KbcQHfUJkdshejQKi4LkRDqNDQT4Em8R2G4wPqK+lOlSf63Q6NCKX0fxW4YXFkUmlqqhNAi2UudkMAyBNzuWLw/A284BDOQaSvNwpFOUb7v9K1yabLGQ1ddiGzJb03iSIS2gubmSI4b1O8MRn8hfyGmCU0xFqZoYlsDY0sg0uDFpE2964uhj6RyZzc5En0zNMWnQvHScX35y3kXYAAwLKH2oG9n0wAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVhJREFUeNrUVoERgjAMBM4BcAPdACeQDXQDdQNH0AnUDdxAnUCdQDeADXCD+rmLd9xJ25TSQ3OXC7Yhb9rkSayUivqQJOpJBhKnOI6N+zi1EcwcmkKP8C+tJ0kONrW8v1HfMrfG9AHGXq6a5WGL6XvHuWZ91Fdx3UIDPxvWXtCttWAlfWyqary/hFnwz5JAJVXtDWzqlp8kkP8EJsaC7qDFp3+d7sKVQBjwpCGPXBI3ccwwpQzxWDA3ex2XKGPYrHakJkklcUXATPoVByZ71YAW0oQSR4YiRhpDD22p0vV7TIw0rGUz1bheQrdT7ptx0qIYqXiypuvAybxCZuydbVvgTLN+Dw08NWXMJJN1Tpm6GevzbeY+r2wxB46FpbtfYrWKx1uSfSd9LLjfqAa6QnUfux4EUgu7TQg0RHE1DXclZ0mgT2kg55kL/muYGf+JO/bObWautwADABB6ZojsX7soAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABaUlEQVRYR8WXTU7DMBCF32OBOA6IMxSpSKw5ArvehS1H6JJNEYeA88CCQRNlrCF1G9sZh6yayvH35flvQvzzxTX5InIN4FOZJAd2dwEHvRnhWwAHkwgVEBGZJGpQ+3tL8s2kNIUwAYNbn07mnuTB3ackVCZEIANXyAeAAW6v7ySGJELmQCl8KhEyCRvglszyBCLgzUMQBW8SiIQ3Cfh1LiLZ2e4m3NGYT3fe5mUYAW9OIAreJBAJrxaIhlcJ9IAXCxTA7ZxPO1xpnTG7CnrCZxNw8OybuWKj+s0toZMJrAE/mcBa8KzAmvAjARF5APAKoNuYnz0LXMl0S1JLqnRFTLjc0kyTUET09w+AOwDvAJJEL/ifIfDnvIhsTGKU0o+J5qV2blPyCWhNf0FyqO2dhN52gacEROQZwC5T02ubJ5IvpVtrbbshgTH+bwCXroMrkl+1Hda29wL67J7kY20nS9rPHkZLOi959hdJEzYwR6qULQAAAABJRU5ErkJggg==\"","import { get, post, put } from './http-calls';\r\n\r\nexport const addReportingCodes = async (id, description) => {\r\n let res = await post(\r\n `/api/ReportingCodes`,\r\n {\r\n ReportingCode: id,\r\n ReportCodeDescription: description,\r\n Mode: 'A'\r\n },\r\n { useAuthToken: true }\r\n );\r\n return res;\r\n};\r\n\r\nexport const updateReportingCodes = async (id, description) => {\r\n let res = await post(\r\n `/api/ReportingCodes`,\r\n {\r\n ReportingCode: id,\r\n ReportCodeDescription: description,\r\n Mode: 'U'\r\n },\r\n { useAuthToken: true }\r\n );\r\n return res;\r\n};\r\n\r\nexport const getReportingCodes = async () => {\r\n let res = await get('/api/ReportingCodes', { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getDepartmentCodes = async () => {\r\n let res = await get('/api/ReportingDepartmentCodes', { useAuthToken: true });\r\n return res;\r\n};\r\nexport const getDepartmentCodeByCode = async (id) => {\r\n let res = await get(`/api/ReportingDepartmentCodes/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const addDepartmentCode = async (data) => {\r\n let res = await post(`/api/ReportingDepartmentCodes`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const updateDepartmentCode = async (data) => {\r\n let res = await post(`/api/ReportingDepartmentCodes`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox, DialogContents, DialogTitles, Dialogs, SecondaryButton, DialogsActions } from '../../../Core/FormInput';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Box from '@material-ui/core/Box';\r\nimport '../User Management/UserManagement.css';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { addReportingCodes, updateReportingCodes } from '../../../Core/Service/ReportingCodes-service';\r\n\r\nconst AddReportingCodesModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n id: '',\r\n reportCodeDescription: '',\r\n errors: {},\r\n fields: {}\r\n });\r\n\r\n const ReportingCodeDetails = props.ReportingCodesDetails;\r\n\r\n useEffect(async () => {\r\n const ReportingCodeData = ReportingCodeDetails;\r\n if (ReportingCodeDetails) {\r\n setState((st) => ({\r\n ...st,\r\n id: ReportingCodeData.id,\r\n reportCodeDescription: ReportingCodeData.reportCodeDescription\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: name === 'id' ? value.slice(0, 2) : value\r\n }));\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (handleValidation()) {\r\n if (ReportingCodeDetails) {\r\n let res = await updateReportingCodes(state.id, state.reportCodeDescription);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n } else {\r\n let res = await addReportingCodes(state.id, state.reportCodeDescription);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n }\r\n }\r\n };\r\n\r\n const handleValidation = () => {\r\n let { id, reportCodeDescription } = state;\r\n let errors = {};\r\n let formIsValid = true;\r\n\r\n if(id == null || id == '') {\r\n formIsValid = false;\r\n errors[\"id\"] = \"code cannot be empty\";\r\n }\r\n\r\n if(reportCodeDescription == null || reportCodeDescription == '') {\r\n formIsValid = false;\r\n errors[\"reportCodeDescription\"] = \"description cannot be empty\";\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {ReportingCodeDetails ? Update Reporting Code : Add Reporting 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 Reporting Code\r\n \r\n \r\n {state.errors['id']}\r\n \r\n \r\n \r\n Report Code Description\r\n \r\n \r\n {state.errors['reportCodeDescription']}\r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default AddReportingCodesModal;","import { IconButton } from '@material-ui/core';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport AddReportingCodesModal from './AddUpdateModal';\r\nimport { getReportingCodes } from '../../../Core/Service/ReportingCodes-service';\r\n\r\nconst ReportingCodes = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n ReportingCodesDetails: [],\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullReportingCodesAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n ReportingCodesDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'id', //reportingCode\r\n headerName: 'Reporting Code',\r\n width: 200\r\n },\r\n {\r\n field: 'reportCodeDescription',\r\n headerName: 'Report Code Description',\r\n flex: 1\r\n }\r\n ];\r\n\r\n const pullReportingCodesAndUpdateState = async () => {\r\n let result = await getReportingCodes();\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.list.map((w) => ({\r\n ...w,\r\n id: w.reportingCode,\r\n reportCodeDescription: w.reportCodeDescription\r\n })),\r\n show: false,\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n ReportingCodesDetails: null\r\n };\r\n });\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Reporting Codes Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullReportingCodesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Reporting Code\r\n \r\n
\r\n {state.show ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Reporting Codes\r\n \r\n \r\n
\r\n
No Reporting Codes Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullDepartmentCodesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Department Code\r\n \r\n
\r\n {state.show ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Department Codes\r\n \r\n \r\n
\r\n
\r\n >\" aria-label=\"breadcrumb\" style={{ marginTop: '25px', marginLeft: '5px' }}>\r\n \r\n Home\r\n \r\n \r\n Operators\r\n \r\n \r\n\r\n \r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data[0]?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default Operators;\r\n","import { get, post } from './http-calls';\r\n\r\n\r\nexport const getCashAccountCategories = async () => {\r\n let res = await get('CashAccount/CashAccountCategories', { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const setCashAccountCategories = async (data) => {\r\n let res = await post(`CashAccount/CashAccountCategories`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getCashAccountTypes = async () => {\r\n let res = await get('CashAccount/CashAccountTypes', { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const setCashAccountTypes = async (data) => {\r\n let res = await post(`CashAccount/CashAccountTypes`, data, { useAuthToken: true });\r\n return res;\r\n};","import { FormLabel, Grid } from '@material-ui/core';\r\nimport React, { useState } from 'react';\r\nimport { DialogContents, DialogsActions, SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { useEffect } from 'react';\r\nimport { setCashAccountCategories } from '../../../../Core/Service/CashAccount-service';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { useContext } from 'react';\r\n\r\n\r\nconst AddEditCashAccountCategories = (props) => {\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n cashAccountCategoryDescription: '',\r\n cashAccountCategoryId: null,\r\n });\r\n\r\n useEffect(() => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n cashAccountCategoryId: props?.focusedRow?.id ? props?.focusedRow?.id : null,\r\n cashAccountCategoryDescription: props?.focusedRow?.cashAccountCategoryDescription ? props?.focusedRow?.cashAccountCategoryDescription : null\r\n };\r\n });\r\n }, [props.focusedRow])\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return {\r\n ...st,\r\n [name]: value\r\n };\r\n });\r\n }\r\n\r\n const handleSubmit = async () => {\r\n const data = {\r\n cashAccountCategoryDescription: state.cashAccountCategoryDescription,\r\n cashAccountCategoryId: state.cashAccountCategoryId ? state.cashAccountCategoryId : null\r\n }\r\n const res = await setCashAccountCategories(data)\r\n\r\n if (res.success) {\r\n showToast('Succesfully Updated Cash Account Category')\r\n props.onClose(true);\r\n } else {\r\n showToast('Failed to Update Cash Account Category')\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditCashAccountCategories;\r\n","import { Breadcrumbs, IconButton, Link, Typography } from '@material-ui/core';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport DataGridComp from '../../../../Core/Grid';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\nimport AddEditCashAccountCategories from './AddEdit';\r\nimport { getCashAccountCategories } from '../../../../Core/Service/CashAccount-service';\r\n\r\nconst CashAccountCategories = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n\r\n focusedRow: null,\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleAdd(true, params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 200,\r\n hide: true\r\n },\r\n {\r\n field: 'cashAccountCategoryDescription',\r\n headerName: 'Description',\r\n flex: 1\r\n }\r\n ];\r\n\r\n useEffect(async () => {\r\n pullCashAccountCategoriesAndUpdateState()\r\n }, []);\r\n\r\n const pullCashAccountCategoriesAndUpdateState = async () => {\r\n const res = await getCashAccountCategories()\r\n if (res.success) {\r\n\r\n const rows = res.data.map((e) => {\r\n return {\r\n id: e.cashAccountCategoryID,\r\n cashAccountCategoryDescription: e.cashAccountCategoryDescription\r\n }\r\n });\r\n\r\n setState((st) => {\r\n return {\r\n ...st,\r\n rows: rows\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleAdd = (va, data) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: va,\r\n focusedRow: data?.value?.row ? data.value.row : null \r\n };\r\n });\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Cash Account Categories Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, focusedRow: null }));\r\n refreshGrid && pullCashAccountCategoriesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n handleAdd(true, null)} className=\"btnadd\">\r\n Add Cash Account Category\r\n \r\n
\r\n {state.show ?\r\n
handleAdd(false, null)} maxWidth=\"sm\">\r\n \r\n \r\n : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Cash Categories\r\n \r\n \r\n\r\n
\r\n
\r\n \r\n \r\n Category\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n \r\n \r\n Account Codes\r\n \r\n \r\n \r\n \r\n \r\n Sort Order\r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditCashAccountTypes;\r\n","import { Breadcrumbs, IconButton, Link, Typography } from '@material-ui/core';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport DataGridComp from '../../../../Core/Grid';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\nimport AddEditCashAccountTypes from './AddEdit';\r\nimport { getCashAccountTypes } from '../../../../Core/Service/CashAccount-service';\r\n\r\nconst CashAccountTypes = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n\r\n focusedRow: null\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleAdd(true, params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 200,\r\n hide: true\r\n },\r\n\r\n {\r\n field: 'cashAccountCategoryDescription',\r\n headerName: 'Category',\r\n flex: 1\r\n },\r\n {\r\n field: 'cashAccountTypeCategoryID',\r\n headerName: 'Category ID',\r\n flex: 1,\r\n hide: true\r\n },\r\n {\r\n field: 'cashAccountTypeDescription',\r\n headerName: 'Description',\r\n flex: 1\r\n },\r\n {\r\n field: 'cashAccountTypeAccountCodes',\r\n headerName: 'Account Codes',\r\n flex: 1\r\n },\r\n {\r\n field: 'cashAccountTypeSortOrder',\r\n headerName: 'Sort Order',\r\n flex: 1\r\n }\r\n ];\r\n\r\n useEffect(async () => {\r\n pullCashAccountTypesAndUpdateState();\r\n }, []);\r\n\r\n const pullCashAccountTypesAndUpdateState = async () => {\r\n const res = await getCashAccountTypes();\r\n if (res.success) {\r\n const rows = res.data.map((e) => {\r\n return {\r\n id: e.cashAccountTypeID,\r\n cashAccountTypeCategoryID: e.cashAccountTypeCategoryID,\r\n cashAccountTypeDescription: e.cashAccountTypeDescription,\r\n cashAccountTypeAccountCodes: e.cashAccountTypeAccountCodes,\r\n cashAccountTypeSortOrder: e.cashAccountTypeSortOrder,\r\n cashAccountCategoryDescription: e.cashAccountCategoryDescription\r\n };\r\n });\r\n\r\n setState((st) => {\r\n return {\r\n ...st,\r\n rows: rows\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleAdd = (va, data) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: va,\r\n focusedRow: data?.value?.row ? data.value.row : null\r\n };\r\n });\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Cash Account Types Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, focusedRow: null }));\r\n refreshGrid && pullCashAccountTypesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n handleAdd(true, null)} className=\"btnadd\">\r\n Add Cash Account Type\r\n \r\n
\r\n {state.show ? (\r\n
handleAdd(false, null)} maxWidth=\"sm\">\r\n \r\n \r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Cash Types\r\n \r\n \r\n\r\n
\r\n
\r\n {crumb.active ? (\r\n {crumb.name}\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 );\r\n};\r\n\r\nexport default BreadCrumbs;\r\n","import {get, post } from './http-calls';\r\n\r\nexport const addPortalSettings = async (data) => {\r\n let res = await post('PortalSetting', data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getPortalSettings = async() => {\r\n let res = await get(`PortalSetting`, { useAuthToken: true });\r\n return res;\r\n};","import React, { useState } from 'react';\r\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\r\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\r\n\r\nexport const CustomeEditor = (props) => {\r\n return ;\r\n};\r\n\r\nexport default CustomeEditor;\r\n","import { get, post } from './http-calls';\r\n\r\nexport const getCommunicatorVehicleStatus = async () => {\r\n let res = await get('/api/communicatorvehcile', { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const setCommunicatorVehicleStatus = async (VehicleStatusCode, VehicleStatusSMSText, VehicleStatusSendSMSUpdate) => {\r\n let res = await post(\r\n `/api/communicatorvehcile`,\r\n {\r\n VehicleStatusCode: VehicleStatusCode,\r\n VehicleStatusSMSText: VehicleStatusSMSText,\r\n VehicleStatusSendSMSUpdate: VehicleStatusSendSMSUpdate\r\n },\r\n { useAuthToken: true }\r\n );\r\n return res;\r\n};\r\n\r\nexport const getCommunicatorBranches = async () => {\r\n let res = await get('/api/communicatorbranch', { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getCommunicatorBranch = async (id) => {\r\n let res = await get(`/api/communicatorbranch/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const setCommunicatorBranch = async (\r\n branchID,\r\n branchOverdueEmail,\r\n branchTechnicalAssistanceEmail,\r\n branchPartStatusEmail,\r\n branchWorkshopDiaryEmail,\r\n branchFeedbackEmailAddress,\r\n branchUrgentActionEmailAddress,\r\n branchJobApprovedEmail,\r\n branchCollectionStatusEmail,\r\n branchCashCustomerMessage\r\n) => {\r\n let res = await post(\r\n `/api/communicatorbranch`,\r\n {\r\n branchID: branchID,\r\n branchOverdueEmail: branchOverdueEmail,\r\n branchTechnicalAssistanceEmail: branchTechnicalAssistanceEmail,\r\n branchPartStatusEmail: branchPartStatusEmail,\r\n branchWorkshopDiaryEmail: branchWorkshopDiaryEmail,\r\n branchFeedbackEmailAddress: branchFeedbackEmailAddress,\r\n branchUrgentActionEmailAddress: branchUrgentActionEmailAddress,\r\n branchJobApprovedEmail: branchJobApprovedEmail,\r\n branchCollectionStatusEmail: branchCollectionStatusEmail,\r\n branchCashCustomerMessage: branchCashCustomerMessage\r\n },\r\n { useAuthToken: true }\r\n );\r\n return res;\r\n};\r\n\r\nexport const getCalendarBookings = async (branchId, month, year) => {\r\n let res = await get(`/api/CommunicatorBranch/GetBookingsByBranchMonthYear?BranchID=${branchId}&Month=${month}&Year=${year}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\n// <---------Admin---------->\r\n\r\nexport const getBranchParametersScreenDropdown = async () => {\r\n let res = await get(`BranchParameters/ScreenDropdown`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const GetApprovedDetails = async (HeaderId) => {\r\n let res = await get(`VehicleStatus/GetApprovedDetails?HeaderId=${HeaderId}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getBranchParametersById = async (BranchID) => {\r\n let res = await get(`BranchParameters/${BranchID}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBranchParameters = async (data) => {\r\n let res = await post(`BranchParameters`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getAdminDropDown = async () => {\r\n let res = await get(`CustomerGroups/ScreenDropDown`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getNotificationGroupsById = async (id) => {\r\n let res = await get(`CustomerGroups/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postNotificationGroups = async (data) => {\r\n let res = await post(`CustomerGroups`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getCommunicatorSmsStatus = async (id) => {\r\n let res = await get(`VehicleStatus/GetVehicleSMSStatus`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postCommunicatorSms = async (data) => {\r\n let res = await post(`VehicleStatus/UpdateVehicleSMSStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const postCommunicatorAddActionLog = async (data) => {\r\n let res = await post(`Communicators/LogAddUpdate`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getActionLogByID = async (id) => {\r\n let res = await get(`Communicators/Log/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getStatusDropdown = async (CurrentStatus) => {\r\n let res = await get(`VehicleStatus/ScreenDropDown?CurrentStatus=${CurrentStatus}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postVehicleStatus = async (data) => {\r\n let res = await post(`VehicleStatus/update`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getVehicleStatusID = async (id) => {\r\n let res = await get(`VehicleStatus?HeaderRecordID=${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getActionLogHistory = async (id) => {\r\n let res = await get(`Communicators/GetLogHistory/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postActionLogEmailLog = async (data) => {\r\n let res = await post(`Communicators/EmailActionLog`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postMakeVisibleToCustome = async (data) => {\r\n let res = await post(`Communicators/MakeVisibleToCustomer`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const postJobProgressSetVehicleArrivedStatus = async (data) => {\r\n let res = await post(`vehiclestatus/JobProgressSetVehicleArrivedStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressSetReBookingStatus = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressSetReBookingStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressInWorkshop = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressInWorkshop`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressWaitingSubWork = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressWaitingSubWorkVM`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressAWaitingPart = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressAWaitingPart`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressAwaitingAuthority = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressAwaitingAuthority`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressWorkCompleted = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressWorkCompleted`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressChekedOut = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressChekedOut`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressApprovedByCustomer = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressApprovedByCustomer`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressAWaitingQC = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressAWaitingQC`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressSetCollectedStatus = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressSetCollectedStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressCustomerInformed = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressCustomerInformed`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postUpdateVehicleStatusToRebooked = async (data) => {\r\n let res = await post(`VehicleStatus/UpdateVehicleStatusToRebooked `, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postJobProgressOtherStatus = async (data) => {\r\n let res = await post(`VehicleStatus/JobProgressOtherStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBookingRequested = async (data) => {\r\n let res = await post(`CommunicatorBookingRequest/BookingRequested`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getCommunicatorBookingRequestScreenDropDown = (wipNo) => {\r\n let res = get(`CommunicatorBookingRequest/ScreenDropDown`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getBookingRequest = (id) => {\r\n let res = get(`CommunicatorBookingRequest/BookingRequest/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBookingReSchedule = async (data) => {\r\n let res = await post(`CommunicatorBookingRequest/BookingReSchedule`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const postBookingCancel = async (data) => {\r\n let res = await post(`CommunicatorBookingRequest/BookingCancel`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const postBookingAccept = async (data) => {\r\n let res = await post(`CommunicatorBookingRequest/BookingAccept`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBookingRequestStatus = async (data) => {\r\n let res = await post(`CommunicatorBookingRequest/UpdateBookingRequestStatus`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const getCommunicatorsDropdown = async () => {\r\n let res = await get('Communicators/ScreenDropdown', { useAuthToken: true });\r\n return res;\r\n};\r\nexport const getCommunicatorDropdownList = async () => {\r\n return (await getCommunicatorsDropdown()).data;\r\n};\r\n","import {get, post } from './http-calls';\r\n\r\nexport const addVideoCategory = async(VideoCategoryID, VideoCategoryDescription, VideoCategoryActive, RoleID) => {\r\n let res = await post(`VideoCategories`, {\r\n VideoCategoryID: VideoCategoryID,\r\n VideoCategoryDescription: VideoCategoryDescription,\r\n VideoCategoryActive: VideoCategoryActive,\r\n RoleID: RoleID,\r\n }, { useAuthToken: true });\r\n return res;\r\n}\r\n\r\nexport const getVideoCategories = async () => {\r\n let res = await get(`VideoCategories`, \r\n { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getVideoCategory = async (VideoCategoryID) => {\r\n let res = await get(`VideoCategories/GetDetails?Id=${VideoCategoryID}`, \r\n { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getRoles = async () => {\r\n let res = await get(`VideoCategories/GetDetails`, \r\n { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const addVideo = async(VideoID, VideoTitle, VideoURL, VideoCategoryID, VideoActive, VideoThumbnail ) => {\r\n let res = await post(`Videos`, {\r\n VideoID: VideoID,\r\n VideoTitle: VideoTitle,\r\n VideoURL: VideoURL,\r\n VideoCategoryID: VideoCategoryID,\r\n VideoActive: VideoActive,\r\n VideoThumbnail: VideoThumbnail,\r\n }, { useAuthToken: true });\r\n return res;\r\n}\r\n\r\nexport const getVideos = async () => {\r\n let res = await get(`Videos?Active=true`, \r\n { useAuthToken: true });\r\n return res;\r\n};\r\n","import { IconButton, Typography } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport React, { useContext, useEffect, useState } from \"react\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { DialogContents, Dialogs } from \"../../../Core/FormInput\";\r\nimport { Breadcrumbs } from \"@material-ui/core\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nconst VideosModal = (props) => {\r\n const videoDetails = props.videoDetails;\r\n\r\n const handleClose = () => {\r\n props.closeFunc();\r\n };\r\n\r\n const getLink = (URL) => {\r\n if (!URL.includes(\"youtube.com\")) {\r\n return URL;\r\n }\r\n if (URL.includes(\"youtube.com\") && !URL.includes(\"/embed/\")) {\r\n return \"https://www.youtube.com/embed/\" + URL.split(\"?v=\")[1]\r\n }\r\n return URL;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Videos\r\n \r\n \r\n {videoDetails.videoTitle}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.show ? (\r\n <>\r\n
\r\n \r\n ) : (\r\n <>\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Videos\r\n \r\n \r\n {state.showLoader && (\r\n
\r\n Loading Videos\r\n \r\n )}\r\n
\r\n {state.videoCategories.map((videoCat) => {\r\n return (\r\n <>\r\n \r\n \r\n {videoCat.description}\r\n \r\n \r\n\r\n {videoCat.videos.length > 0 ? (\r\n videoCat.videos.map((video) => {\r\n return (\r\n
handleVideoClick(video)}\r\n >\r\n \r\n {video.videoTitle}\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n There are no videos to display for this category.\r\n \r\n )}\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, { useContext, useState, useEffect } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport AppContext from '../../../App/AppContext';\r\nimport Autocomplete from '@material-ui/lab/Autocomplete';\r\nimport {\r\n TextBox,\r\n PasswordBox,\r\n SecondaryButton,\r\n PrimaryCheckbox,\r\n DialogContents,\r\n DialogTitles,\r\n DialogsActions,\r\n Dialogs,\r\n SecondaryCheckbox,\r\n Multiselect,\r\n MultiselectWithoutCheckbox,\r\n YesNoButton,\r\n SelectBox\r\n} from '../../../Core/FormInput';\r\nimport { getWorkflows } from '../../../Core/Service/workflow-service';\r\nimport { getBranches } from '../../../Core/Service/branches-service';\r\nimport { getCustomer } from '../../../Core/Service/customer-services';\r\nimport { Adduser, UpdateUser, getUser, getScreenDropdown, getCustomerScreenDropdown } from '../../../Core/Service/admin-service';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { Checkbox, IconButton } from '@material-ui/core';\r\nimport Box from '@material-ui/core/Box';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport UserModules from './userModules';\r\n\r\nconst AddUserModal = (props) => {\r\n const { hideModal, showToast, portalSettings, userRoles } = useContext(AppContext);\r\n const [masterData, setMasterData] = useState({\r\n workflows: []\r\n });\r\n\r\n const [brancheData, setbrancheData] = useState({\r\n branches: []\r\n });\r\n\r\n const [processData, setprocessData] = useState({\r\n processes: []\r\n });\r\n\r\n const [moduleData, setmoduleData] = useState({\r\n modules: [\r\n { name: 'eWIP', id: 'eWIP' },\r\n { name: 'Reporting', id: 'Reporting' },\r\n { name: 'Communicator', id: 'Communicator' }\r\n ]\r\n });\r\n\r\n const [franchiseData, setFranchisesData] = useState({\r\n franchises: []\r\n });\r\n\r\n const [customerData, setcustomerData] = useState({\r\n customers: []\r\n });\r\n\r\n const [custmerGroup, setCustomerGroup] = useState([]);\r\n\r\n const [appraisalVehicleOption, setAppraisalVehicleOption] = useState([]);\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n customers: [],\r\n workflows: [],\r\n branches: [],\r\n processes: [],\r\n modules: [],\r\n franchises: [],\r\n appraisalVehicles: []\r\n });\r\n\r\n const [state, setState] = useState({\r\n userType: '',\r\n email: '',\r\n name: '',\r\n phone: '',\r\n password: '',\r\n confirm: '',\r\n enableChange: false,\r\n allbranch: false,\r\n allprocess: false,\r\n allcust: false,\r\n allworkflow: false,\r\n isActive: true,\r\n isLocked: false,\r\n customer: [],\r\n workflow: [],\r\n branches: [],\r\n processes: [],\r\n appraisalVehicle: [],\r\n doc_id: '',\r\n canOverrideMandatorySteps: false,\r\n canAssignJobsToAuditor: false,\r\n canReturnJobsFromLastWorkflow: false,\r\n canDeleteDocuments: false,\r\n canResetPassword: false,\r\n canAssignTechnician: false,\r\n canAssignJobPriority: false,\r\n franchises: [],\r\n isAgedMeasure: false,\r\n isDOC: false,\r\n isKPIs: false,\r\n isParts: false,\r\n isSales: false,\r\n isService: false,\r\n isWorkShop: false,\r\n eWIPAllowed: false,\r\n specialEquipmentAllowed: false,\r\n canAmendToDoList: false,\r\n canAmendTechWriteUp: false,\r\n canAmendJobNotes: false,\r\n autoLoadDocuments: false,\r\n canSetCustomerRating: false,\r\n eReportingAllowed: false,\r\n eCommunicatorAllowed: false,\r\n eInvoiceAllowed: false,\r\n canAccessAppraisalPortal: false,\r\n isBudgetDashboard: false,\r\n userCustomerGroupID: null,\r\n sendEmailFromOwnEmail: false,\r\n canAccessBudget: false,\r\n defaultInternalDashboard: null,\r\n twoFactorEnabled: false,\r\n canSignOffTechWriteup: false,\r\n canAccessSalesPerformance: false,\r\n appraisalRoleID: ''\r\n });\r\n\r\n const user = props.users;\r\n\r\n useEffect(() => {\r\n if (user) {\r\n const selectedfranchises = franchiseData.franchises.filter((w) => state.franchises.indexOf(w.id) > -1);\r\n const selectedCust = customerData.customers.filter((w) => state.customer.indexOf(w.id) > -1);\r\n const selectedWorkflows = masterData.workflows.filter((w) => state.workflow.indexOf(w.id) > -1);\r\n const selectedBranches = brancheData.branches.filter((w) => state.branches.indexOf(w.id) > -1);\r\n const selectedProcesses = processData.processes.filter((w) => state.processes.indexOf(w.id) > -1);\r\n const selectedAppraisalVehicle = appraisalVehicleOption.filter((w) => state.appraisalVehicle.indexOf(w.id) > -1);\r\n console.log(appraisalVehicleOption, 'appraisalVehicleOption');\r\n setSelectedData((st) => ({\r\n ...st,\r\n customers: selectedCust,\r\n workflows: selectedWorkflows,\r\n branches: selectedBranches,\r\n processes: selectedProcesses,\r\n franchises: selectedfranchises,\r\n appraisalVehicles: selectedAppraisalVehicle\r\n }));\r\n\r\n if (customerData.customers.length > 0 && customerData.customers === selectedCust.length) {\r\n setState((st) => ({ ...st, allcust: true }));\r\n }\r\n\r\n if (masterData.workflows.length > 0 && masterData.workflows.length === selectedWorkflows.length) {\r\n setState((st) => ({ ...st, allworkflow: true }));\r\n }\r\n\r\n if (brancheData.branches.length > 0 && brancheData.branches.length === selectedBranches.length) {\r\n setState((st) => ({ ...st, allbranch: true }));\r\n }\r\n\r\n if (processData.processes.length > 0 && processData.processes.length === selectedProcesses.length) {\r\n setState((st) => ({ ...st, allprocess: true }));\r\n }\r\n }\r\n }, [\r\n state.franchises,\r\n state.branches,\r\n state.processes,\r\n state.workflow,\r\n state.customer,\r\n masterData.workflows,\r\n brancheData.branches,\r\n processData.processes,\r\n customerData.customers,\r\n franchiseData.franchises,\r\n state.appraisalVehicle,\r\n appraisalVehicleOption\r\n ]);\r\n\r\n function updateDashboardList(portalSettings) {\r\n const updatedList = [];\r\n if (portalSettings.portalSettingeWIPEnabled) {\r\n updatedList.push({ id: 1, name: 'eWIP' });\r\n }\r\n if (portalSettings.portalSettingReportingEnabled) {\r\n updatedList.push({ id: 2, name: 'Reporting' });\r\n }\r\n if (portalSettings.portalSettingInvoiceEnabled) {\r\n updatedList.push({ id: 3, name: 'Invoices' });\r\n }\r\n if (portalSettings.portalSettingCommunicatorEnabled) {\r\n updatedList.push({ id: 4, name: 'Communicator' });\r\n }\r\n setState((st) => ({ ...st, DashboardList: updatedList }));\r\n }\r\n\r\n useEffect(async () => {\r\n let resCust = await getCustomerScreenDropdown();\r\n\r\n if (resCust.success) {\r\n const customers = resCust?.data?.customers;\r\n\r\n setcustomerData((st) => ({ ...st, customers }));\r\n }\r\n let respo = await getScreenDropdown();\r\n if (respo.success) {\r\n const workflows = respo?.data?.workflows;\r\n // .filter((w) => !w.isTechnicianWorkflow)\r\n // .map((w) => ({\r\n // ...w\r\n // }));\r\n const customerGroup = respo?.data?.customerGroups;\r\n const branches = respo?.data?.branches;\r\n const processes = respo?.data?.processes;\r\n const updatedAppraiserRoles = respo?.data?.appraiserRoles.filter((role) => role.name !== 'Customer');\r\n const appraisalVehicleOption = respo?.data?.appraiserVehicles || [];\r\n setMasterData((st) => ({ ...st, workflows }));\r\n setbrancheData((st) => ({ ...st, branches }));\r\n setprocessData((st) => ({ ...st, processes }));\r\n setFranchisesData((st) => ({ ...st, franchises: respo?.data?.franchiseCode }));\r\n setCustomerGroup(customerGroup);\r\n setState((st) => ({ ...st, appraiserRoleList: updatedAppraiserRoles }));\r\n setAppraisalVehicleOption(appraisalVehicleOption);\r\n }\r\n updateDashboardList(portalSettings);\r\n if (user) {\r\n let result = await getUser(user.id);\r\n const updatedUser = result.data;\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n franchises: updatedUser.franchisesCode,\r\n doc_id: updatedUser.id,\r\n name: updatedUser.displayName,\r\n phone: updatedUser.phoneNo,\r\n email: updatedUser.email,\r\n userType: updatedUser.userRole,\r\n isActive: updatedUser.isActive,\r\n isLocked: updatedUser.isLocked,\r\n enableChange: true,\r\n workflow: updatedUser.workflowIds,\r\n branches: updatedUser.branchIds,\r\n processes: updatedUser.processIds,\r\n customer: updatedUser.customerIds,\r\n appraisalVehicle: updatedUser.appraisalVehicleIDs || [],\r\n canOverrideMandatorySteps: updatedUser.canOverrideMandatorySteps,\r\n canAssignJobsToAuditor: updatedUser.canAssignJobsToAuditor,\r\n canReturnJobsFromLastWorkflow: updatedUser.canReturnJobsFromLastWorkflow,\r\n canDeleteDocuments: updatedUser.canDeleteDocuments,\r\n canResetPassword: updatedUser.canResetPassword,\r\n canAssignJobPriority: updatedUser.canAssignJobPriority,\r\n canAssignTechnician: updatedUser.canAssignTechnician,\r\n canSetCustomerRating: updatedUser.canSetCustomerRating,\r\n isAgedMeasure: updatedUser.isAgedMeasure,\r\n isDOC: updatedUser.isDOC,\r\n isKPIs: updatedUser.isKPIs,\r\n isParts: updatedUser.isParts,\r\n isSales: updatedUser.isSales,\r\n isService: updatedUser.isService,\r\n isWorkShop: updatedUser.isWorkShop,\r\n eWIPAllowed: updatedUser.eWIPAllowed,\r\n specialEquipmentAllowed: updatedUser.specialEquipmentAllowed,\r\n canAmendToDoList: updatedUser.canAmendToDoList,\r\n canAmendTechWriteUp: updatedUser.canAmendTechWriteUp,\r\n canAmendJobNotes: updatedUser.canAmendJobNotes,\r\n autoLoadDocuments: updatedUser.autoLoadDocuments,\r\n eReportingAllowed: updatedUser.eReportingAllowed,\r\n eCommunicatorAllowed: updatedUser.eCommunicatorAllowed,\r\n eInvoiceAllowed: updatedUser.eInvoiceAllowed,\r\n canAccessAppraisalPortal: updatedUser.canAccessAppraisalPortal,\r\n isBudgetDashboard: updatedUser.isBudgetDashboard,\r\n userCustomerGroupID: updatedUser.userCustomerGroupID,\r\n sendEmailFromOwnEmail: updatedUser.sendEmailFromOwnEmail,\r\n canAccessBudget: updatedUser.canAccessBudget,\r\n defaultInternalDashboard: updatedUser.defaultInternalDashboard,\r\n twoFactorEnabled: updatedUser.twoFactorEnabled,\r\n canSignOffTechWriteup: updatedUser.canSignOffTechWriteup,\r\n canAccessSalesPerformance: updatedUser.canAccessSalesPerformance,\r\n appraisalRoleID: updatedUser.appraisalRoleID\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n let commonData = {\r\n id: state.doc_id || null,\r\n displayName: state.name,\r\n email: state.email,\r\n phone: state.phone,\r\n isLocked: state.isLocked,\r\n isActive: state.isActive,\r\n twoFactorEnabled: state.twoFactorEnabled,\r\n userRole: state.userType,\r\n sendEmailFromOwnEmail: state.sendEmailFromOwnEmail,\r\n processIds: state.processes\r\n };\r\n\r\n let nicolReportDefaultFlag = {\r\n canAccessBranchOverview: false,\r\n canAccessSalesProfitAndLoss: false,\r\n canAccessAfterSalesProfitAndLoss: false,\r\n canAccessProfitAndLossDetail: false,\r\n canAccessUsedStockValuation: false,\r\n canAccessUsedVehicleStock: false,\r\n canAccessAgedVehicleStock: false,\r\n canAccessOveragePriorityList: false,\r\n canAccessSalesReporting: false\r\n };\r\n\r\n let customData = {\r\n admin: {\r\n ...commonData,\r\n branchIds: [],\r\n customerIds: [],\r\n workflowIds: [],\r\n canOverrideMandatorySteps: false,\r\n canAssignJobsToAuditor: false,\r\n canReturnJobsFromLastWorkflow: false,\r\n canResetPassword: false,\r\n canAssignJobPriority: false,\r\n canAssignTechnician: false,\r\n canDeleteDocuments: false,\r\n canSetCustomerRating: false,\r\n specialEquipmentAllowed: false,\r\n canAmendToDoList: false,\r\n canAmendTechWriteUp: false,\r\n canAmendJobNotes: false,\r\n autoLoadDocuments: false,\r\n canSignOffTechWriteup: false,\r\n isAgedMeasure: false,\r\n isDOC: false,\r\n isKPIs: false,\r\n isParts: false,\r\n isSales: false,\r\n isService: false,\r\n isWorkShop: false,\r\n franchisesCode: [],\r\n eWIPAllowed: false,\r\n eReportingAllowed: false,\r\n eCommunicatorAllowed: false,\r\n eInvoiceAllowed: false,\r\n isBudgetDashboard: false, //state.isBudgetDashboard,\r\n userCustomerGroupID: null,\r\n canAccessBudget: false,\r\n canAccessSalesPerformance: false,\r\n canAccessAppraisalPortal: state.canAccessAppraisalPortal,\r\n appraisalVehicleIDs: []\r\n },\r\n auditor: {\r\n ...commonData,\r\n branchIds: [],\r\n customerIds: [],\r\n workflowIds: [],\r\n canOverrideMandatorySteps: false,\r\n canAssignJobsToAuditor: false,\r\n canReturnJobsFromLastWorkflow: false,\r\n canResetPassword: false,\r\n canAssignJobPriority: false,\r\n canAssignTechnician: false,\r\n canDeleteDocuments: false,\r\n canSetCustomerRating: false,\r\n specialEquipmentAllowed: false,\r\n canAmendToDoList: false,\r\n canAmendTechWriteUp: false,\r\n canAmendJobNotes: false,\r\n autoLoadDocuments: false,\r\n isAgedMeasure: false,\r\n isDOC: false,\r\n isKPIs: false,\r\n isParts: false,\r\n isSales: false,\r\n isService: false,\r\n isWorkShop: false,\r\n franchisesCode: state.franchises,\r\n eWIPAllowed: false,\r\n eReportingAllowed: false,\r\n eCommunicatorAllowed: false,\r\n eInvoiceAllowed: false,\r\n isBudgetDashboard: false, //state.isBudgetDashboard,\r\n userCustomerGroupID: null,\r\n canAccessBudget: false,\r\n canSignOffTechWriteup: false,\r\n canAccessSalesPerformance: false,\r\n canAccessAppraisalPortal: false,\r\n appraisalVehicleIDs: []\r\n },\r\n customer: {\r\n ...commonData,\r\n branchIds: [],\r\n customerIds: state.customer,\r\n workflowIds: state.workflow,\r\n canOverrideMandatorySteps: state.canOverrideMandatorySteps,\r\n canAssignJobsToAuditor: state.canAssignJobsToAuditor,\r\n canReturnJobsFromLastWorkflow: state.canReturnJobsFromLastWorkflow,\r\n canResetPassword: state.canResetPassword,\r\n canAssignJobPriority: false,\r\n canAssignTechnician: false,\r\n canSetCustomerRating: false,\r\n specialEquipmentAllowed: false,\r\n canAmendToDoList: false,\r\n canAmendTechWriteUp: false,\r\n canAmendJobNotes: false,\r\n autoLoadDocuments: false,\r\n canDeleteDocuments: state.canDeleteDocuments,\r\n isAgedMeasure: false,\r\n isDOC: false,\r\n isKPIs: false,\r\n isParts: false,\r\n isSales: false,\r\n isService: false,\r\n isWorkShop: false,\r\n franchisesCode: state.franchises,\r\n eWIPAllowed: state.eWIPAllowed,\r\n eReportingAllowed: false,\r\n eCommunicatorAllowed: state.eCommunicatorAllowed,\r\n eInvoiceAllowed: state.eInvoiceAllowed,\r\n isBudgetDashboard: false, //state.isBudgetDashboard,\r\n userCustomerGroupID: state.userCustomerGroupID,\r\n canAccessBudget: false,\r\n defaultInternalDashboard: state.defaultInternalDashboard,\r\n canSignOffTechWriteup: false,\r\n canAccessSalesPerformance: false,\r\n canAccessAppraisalPortal: state.canAccessAppraisalPortal,\r\n appraisalRoleID: portalSettings.portalSettingsAppraisalEnabled ? 'fa3db6d0-9335-4d47-8849-524f81b2e4df' : '',\r\n appraisalVehicleIDs: state.appraisalVehicle\r\n },\r\n internal: {\r\n ...commonData,\r\n branchIds: state.branches,\r\n customerIds: [],\r\n workflowIds: state.workflow,\r\n canOverrideMandatorySteps: state.canOverrideMandatorySteps,\r\n canAssignJobsToAuditor: state.canAssignJobsToAuditor,\r\n canReturnJobsFromLastWorkflow: state.canReturnJobsFromLastWorkflow,\r\n canResetPassword: state.canResetPassword,\r\n canAssignJobPriority: state.canAssignJobPriority,\r\n canAssignTechnician: state.canAssignTechnician,\r\n canDeleteDocuments: state.canDeleteDocuments,\r\n canSetCustomerRating: state.canSetCustomerRating,\r\n isAgedMeasure: state.isAgedMeasure,\r\n isDOC: state.isDOC,\r\n isKPIs: state.isKPIs,\r\n isParts: state.isParts,\r\n isSales: state.isSales,\r\n isService: state.isService,\r\n isWorkShop: state.isWorkShop,\r\n franchisesCode: state.franchises,\r\n eWIPAllowed: state.eWIPAllowed,\r\n specialEquipmentAllowed: state.specialEquipmentAllowed,\r\n canAmendToDoList: state.canAmendToDoList,\r\n canAmendTechWriteUp: state.canAmendTechWriteUp,\r\n canAmendJobNotes: state.canAmendJobNotes,\r\n autoLoadDocuments: state.autoLoadDocuments,\r\n eReportingAllowed: state.eReportingAllowed,\r\n eCommunicatorAllowed: state.eCommunicatorAllowed,\r\n eInvoiceAllowed: state.eInvoiceAllowed,\r\n isBudgetDashboard: false, //state.isBudgetDashboard,\r\n userCustomerGroupID: state.userCustomerGroupID,\r\n canAccessBudget: state.canAccessBudget,\r\n defaultInternalDashboard: state.defaultInternalDashboard,\r\n canSignOffTechWriteup: state.canSignOffTechWriteup,\r\n canAccessSalesPerformance: state.canAccessSalesPerformance,\r\n canAccessAppraisalPortal: state.canAccessAppraisalPortal,\r\n appraisalRoleID: state.appraisalRoleID,\r\n appraisalVehicleIDs: state.appraisalVehicle\r\n },\r\n technician: {\r\n ...commonData,\r\n branchIds: state.branches,\r\n customerIds: [],\r\n workflowIds: state.workflow,\r\n canOverrideMandatorySteps: state.canOverrideMandatorySteps,\r\n canAssignJobsToAuditor: false,\r\n canReturnJobsFromLastWorkflow: state.canReturnJobsFromLastWorkflow,\r\n canResetPassword: false,\r\n canAssignJobPriority: state.canAssignJobPriority,\r\n canSetCustomerRating: state.canSetCustomerRating,\r\n canAmendToDoList: state.canAmendToDoList,\r\n canAmendTechWriteUp: state.canAmendTechWriteUp,\r\n canAmendJobNotes: state.canAmendJobNotes,\r\n autoLoadDocuments: false,\r\n specialEquipmentAllowed: false,\r\n canAssignTechnician: state.canAssignTechnician,\r\n canDeleteDocuments: state.canDeleteDocuments,\r\n isAgedMeasure: state.isAgedMeasure,\r\n isDOC: state.isDOC,\r\n isKPIs: state.isKPIs,\r\n isParts: state.isParts,\r\n isSales: state.isSales,\r\n isService: state.isService,\r\n isWorkShop: state.isWorkShop,\r\n franchisesCode: state.franchises,\r\n eWIPAllowed: true,\r\n eReportingAllowed: state.eReportingAllowed,\r\n eCommunicatorAllowed: false,\r\n eInvoiceAllowed: false,\r\n isBudgetDashboard: false, //state.isBudgetDashboard,\r\n userCustomerGroupID: null,\r\n canAccessBudget: state.canAccessBudget,\r\n canAccessSalesPerformance: state.canAccessSalesPerformance,\r\n canSignOffTechWriteup: state.canSignOffTechWriteup,\r\n canAccessAppraisalPortal: state.canAccessAppraisalPortal,\r\n appraisalVehicleIDs: []\r\n }\r\n };\r\n\r\n let data = {\r\n ...commonData,\r\n ...customData[`${state.userType}`],\r\n ...nicolReportDefaultFlag\r\n };\r\n let res = {};\r\n if (state.doc_id) {\r\n res = await UpdateUser(data);\r\n } else {\r\n data = { ...data, password: state.password, confirmPassword: state.confirm };\r\n res = await Adduser(data);\r\n }\r\n if (!res.success) {\r\n console.error(res);\r\n showToast(\r\n <>\r\n {Array.isArray(res.messages) ? (\r\n res.messages.map((msg, i) => {\r\n return {msg}
;\r\n })\r\n ) : (\r\n {res.message}
\r\n )}\r\n \r\n );\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n showToast(res.message);\r\n }\r\n };\r\n\r\n const AutoBrChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, branches: value }));\r\n setState((st) => {\r\n const nst = { ...st, branches: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoPrChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, processes: value }));\r\n setState((st) => {\r\n const nst = { ...st, processes: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n // const AutoModuleChange = (event, value) => {\r\n // setSelectedData((st) => ({ ...st, modules: value }));\r\n // setState((st) => {\r\n // const nst = { ...st, modules: value.map((c) => c.id) };\r\n // return nst;\r\n // });\r\n // };\r\n\r\n const AutoFranchiseChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, franchises: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchises: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoCustChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, customers: value }));\r\n setState((st) => {\r\n const nst = { ...st, customer: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoWorkChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, workflows: value }));\r\n setState((st) => {\r\n const nst = { ...st, workflow: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoAppraisalVehiclechange = (event, value) => {\r\n console.log(value, 'value appraisalVehicles');\r\n setSelectedData((st) => ({ ...st, appraisalVehicles: value }));\r\n setState((st) => {\r\n const nst = { ...st, appraisalVehicle: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n console.log(selectedData.appraisalVehicles);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n if (name == 'userType') {\r\n nst.branches = [];\r\n nst.workflow = [];\r\n nst.allworkflow = false;\r\n }\r\n if (!user) {\r\n nst.enableChange = nst.password && nst.email && nst.name && nst.password === nst.confirm;\r\n }\r\n return nst;\r\n });\r\n };\r\n\r\n const handleCheckbox = (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.branches = [...brancheData.branches.map((c) => c.id)];\r\n } else if (name == 'allprocess') {\r\n nst.processes = [...processData.processes.map((c) => c.id)];\r\n } else if (name == 'allcust') {\r\n nst.customer = [...customerData.customers.map((c) => c.id)];\r\n } else if (name == 'allworkflow') {\r\n nst.workflow = [...masterData.workflows.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 // setSelectedData((st) => {\r\n // const nst = { ...st };\r\n // if (name == 'allbranch') {\r\n // nst.branches = [];\r\n // } else if (name == 'allprocess') {\r\n // nst.processes = [];\r\n // } else if (name == 'allcust') {\r\n // nst.customers = [];\r\n // } else if (name == 'allworkflow') {\r\n // nst.workflows = [];\r\n // } else {\r\n // return false;\r\n // }\r\n // return nst;\r\n // });\r\n }\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n {user ? Update User : Add User}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!user ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n \r\n }\r\n label=\"Send Email From Own Email?\"\r\n />\r\n \r\n \r\n \r\n User Type\r\n \r\n \r\n } label=\"Admin\" />\r\n } label=\"Customer\" />\r\n } label=\"Internal User\" />\r\n {portalSettings.portalSettingeWIPEnabled && (\r\n <>\r\n } label=\"Auditor\" />\r\n } label=\"Technician\" />\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {state.userType == 'technician' || state.userType == 'internal' ? (\r\n \r\n \r\n }\r\n label=\"All Branches\"\r\n />\r\n \r\n \r\n {!state.allbranch ? (\r\n \r\n ) : null}\r\n \r\n \r\n ) : null}\r\n {state.userType != 'admin' ? (\r\n \r\n \r\n \r\n ) : null}\r\n\r\n \r\n {state.userType == 'customer' ? (\r\n \r\n \r\n }\r\n label=\"All Customer\"\r\n />\r\n \r\n \r\n {!state.allcust ? (\r\n \r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n {(state.userType == 'customer' || state.userType == 'internal' || state.userType == 'technician') && (\r\n \r\n \r\n \r\n Select Dashboard\r\n \r\n \r\n \r\n {/* */}\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=\"Is Active?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Is Locked?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Reset 2FA\"\r\n />\r\n \r\n \r\n \r\n \r\n {!user ? (\r\n \r\n Submit\r\n \r\n ) : (\r\n \r\n Update\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddUserModal;\r\n","import React, { useEffect, useContext, useState, useMemo } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport './UserManagement.css';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Adduser from './AddUser';\r\nimport { getAllUsers } from '../../../Core/Service/admin-service';\r\nimport SetPassByAdminModal from './SetPassByAdmin';\r\nimport LockIcon from '@material-ui/icons/Lock';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport { Link } from 'react-router-dom';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport { some } from 'lodash';\r\nimport { useWindowSize } from '../../../Core/Controls/ScreenResolution';\r\n\r\nlet searchTimer;\r\n\r\nconst UserManagement = (props) => {\r\n const { loggedIn, showModal, showToast } = useContext(AppContext);\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n const [state, setState] = useState({\r\n show: false,\r\n showAddUserModal: false,\r\n rows_new: [],\r\n users: [],\r\n filterText: '',\r\n filteredRows: []\r\n });\r\n\r\n const pullUserAndUpdateState = async () => {\r\n let res = await getAllUsers();\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows_new: [...res.data] }));\r\n }\r\n if (!res.success) {\r\n showToast(res.message);\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n if (loggedIn) {\r\n pullUserAndUpdateState();\r\n } else {\r\n props.history.push('/login');\r\n }\r\n }, []);\r\n const handelUpdateUser = (props) => {\r\n const user = props && props.value.row;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n users: user\r\n };\r\n return nst;\r\n });\r\n };\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullUserAndUpdateState();\r\n };\r\n const closeResetModal = (val) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showResetModal: val\r\n };\r\n return nst;\r\n });\r\n };\r\n const handelResetPass = (props) => {\r\n const user = props.value.row;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showResetModal: true,\r\n users: user\r\n };\r\n return nst;\r\n });\r\n };\r\n const handleAdduserModel = () => {\r\n handelUpdateUser();\r\n };\r\n const Arrow = (props) => {\r\n return (\r\n <>\r\n \r\n handelUpdateUser(props)}>\r\n \r\n \r\n \r\n \r\n handelResetPass(props)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const baseColumns = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n\r\n renderCell: (params) => \r\n },\r\n { field: 'displayName', headerName: 'Name', flex: 0.6 },\r\n // { field: 'phoneNo', headerName: 'Phone Number', flex: 0.6 },\r\n {\r\n field: 'email',\r\n headerName: 'Email',\r\n flex: 1\r\n }\r\n // {\r\n // field: 'userRole',\r\n // headerName: 'User Type',\r\n // flex: 0.4\r\n // },\r\n // {\r\n // field: 'isActive',\r\n // headerName: 'Is Active',\r\n // flex: 0.5,\r\n // valueGetter: (params) => (params.value ? 'Yes' : 'No')\r\n // }\r\n ];\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No user available
\r\n \r\n );\r\n }\r\n const setFilterText = (e) => {\r\n const vl = e.target.value;\r\n setState((st) => ({ ...st, filterText: vl }));\r\n searchTimer && clearTimeout(searchTimer);\r\n searchTimer = setTimeout(() => {\r\n setFilteredRow();\r\n }, 500);\r\n };\r\n\r\n const setFilteredRow = () => {\r\n setState((st) => {\r\n const newSt = { ...st };\r\n const { rows_new, filterText } = newSt;\r\n let filterd = [];\r\n filterd = [...rows_new];\r\n if (filterText.trim().length > 0) {\r\n filterText\r\n .trim()\r\n .split(' ')\r\n .map((t) => t.trim().toLowerCase())\r\n .forEach((src) => {\r\n filterd = filterd.filter((rw) => some(rw, (vl) => `${vl}`.toLowerCase().includes(src)));\r\n });\r\n }\r\n newSt.filteredRows = filterd;\r\n return newSt;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n setFilteredRow();\r\n }, [state.rows_new]);\r\n\r\n const column_new = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n tempCols.splice(5, 0, {\r\n field: 'userRole',\r\n headerName: 'User Type',\r\n flex: 0.4\r\n });\r\n if (WindowWidths > 750) {\r\n tempCols.splice(6, 0, { field: 'isLocked', headerName: 'Is Locked?', flex: 0.5, valueGetter: (params) => (params.value ? 'Yes' : 'No') });\r\n tempCols.splice(7, 0, {\r\n field: 'isActive',\r\n headerName: 'Is Active?',\r\n flex: 0.5,\r\n valueGetter: (params) => (params.value ? 'Yes' : 'No')\r\n });\r\n }\r\n return tempCols;\r\n }, [WindowWidths]);\r\n\r\n return (\r\n \r\n
\r\n \r\n Add user\r\n \r\n
\r\n {state.show ?
: null}\r\n {state.showResetModal ?
: null}\r\n
>\" aria-label=\"breadcrumb\" style={{ fontSize: '0.85rem' }}>\r\n \r\n Home\r\n \r\n \r\n Users\r\n \r\n \r\n
\r\n
\r\n {/* table start*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* table end*/}\r\n \r\n
\r\n
\r\n Register\r\n \r\n
\r\n
No workflow available
\r\n \r\n );\r\n }\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n\r\n refreshGrid && pullWorkflowAndUpdateState();\r\n };\r\n return (\r\n \r\n
\r\n \r\n Add workflow\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showDel ?
: null}\r\n\r\n
\r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Workflows\r\n \r\n \r\n\r\n
\r\n\r\n {!state.processes && (\r\n
\r\n \r\n
\r\n )}\r\n
No defect reported categories available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullDefectReportedCatagoriesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Defect Reported Category\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Defect Reported Catagories\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n Add OCR Document\r\n \r\n
\r\n {state.show ?
: null}\r\n
\r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n OCR Documents\r\n \r\n \r\n
\r\n\r\n {!state.processes && (\r\n
\r\n \r\n
\r\n )}\r\n
No defect reported categories available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullDefectActionedCatagoriesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Defect Actioned Category\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Defect Actioned Catagories\r\n \r\n \r\n
\r\n
No Battery Manufacturers Logged
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullBatteryManufacturersAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Battery Manufacturer\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Battery Manufacturer\r\n \r\n \r\n
\r\n
No record found, for this workflow
\r\n \r\n );\r\n }\r\n const handleAdd = (params) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n workflowId: workflowID,\r\n WorkflowStepDetails: null\r\n };\r\n });\r\n };\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullWorkflowStepsAndUpdateState();\r\n };\r\n\r\n return (\r\n <>\r\n {state.show ? (\r\n \r\n ) : null}\r\n \r\n Add Workflow Step\r\n \r\n >\" aria-label=\"breadcrumb\" style={{ margin: '14px', fontSize: '0.85rem' }}>\r\n \r\n Home\r\n \r\n \r\n Workflow\r\n \r\n \r\n {' '}\r\n Workflow Steps\r\n \r\n \r\n {state.WorkflowName}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default WorkflowSteps;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport AppContext from \"../../../../App/AppContext\";\r\nimport {\r\n SecondaryButton,\r\n DefaultButton,\r\n TextBox,\r\n DialogContents,\r\n DialogTitles,\r\n Dialogs,\r\n DialogsActions,\r\n} from \"./../../../../Core/FormInput/index\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport \"./../../User Management/UserManagement.css\";\r\nimport {\r\n addOCRDocToProcess,\r\n} from \"./../../../../Core/Service/OcrDocuments-service\";\r\nimport { getBranches } from \"../../../../Core/Service/branches-service\";\r\n\r\nconst AddOCRDocToProcess = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const OCRDocToProcess = props.OCRDocToProcessList;\r\n const ocrDocId = props.ocrDocId;\r\n const [state, setState] = useState({\r\n InputLocation: \"\",\r\n OutputLocation: \"\",\r\n BranchID:null,\r\n OCRDocToProcessID: null,\r\n branches: [],\r\n IsDeleted: false,\r\n });\r\n useEffect(async () => {\r\n let res1 = await getBranches();\r\n if (res1.success) {\r\n const branches = res1.data.map((w) => ({\r\n id: w.id,\r\n name: w.branchShortName,\r\n }));\r\n setState((st) => ({ ...st, branches }));\r\n }\r\n if (OCRDocToProcess && OCRDocToProcess.id) {\r\n setState((st) => ({\r\n ...st,\r\n OCRDocToProcessID: OCRDocToProcess.id,\r\n InputLocation: OCRDocToProcess.inputLocation,\r\n OutputLocation: OCRDocToProcess.outputLocation,\r\n BranchID: OCRDocToProcess.branchID,\r\n IsDeleted:OCRDocToProcess.IsDeleted,\r\n }));\r\n }\r\n }, []);\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handelSubmit = async () => {\r\n let res = await addOCRDocToProcess(\r\n ocrDocId,\r\n state.OCRDocToProcessID,\r\n state.InputLocation,\r\n state.OutputLocation,\r\n state.BranchID,\r\n state.IsDeleted,\r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n return (\r\n \r\n \r\n \r\n {state.OCRDocToProcessID ? (\r\n Update OCR Document To Process\r\n ) : (\r\n Add OCR Document To Process\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Input Location\r\n \r\n \r\n \r\n Output Location\r\n \r\n \r\n \r\n Branch\r\n \r\n {state.branches.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddOCRDocToProcess;\r\n","import { IconButton, Typography } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport React, { useContext, useEffect, useState } from \"react\";\r\nimport AppContext from \"../../../../App/AppContext\";\r\nimport { DefaultButton, DialogContents, Dialogs, DialogsActions, DialogTitles, SecondaryButton, TextBox } from \"./../../../../Core/FormInput/index\";\r\nimport \"./../../User Management/UserManagement.css\";\r\nimport { getOCRDocumentFieldToProcess, getOCRDocumentFieldToProcessDropdown, addUpdateDocumentFieldToProcess } from \"../../../../Core/Service/OcrDocuments-service\";\r\nimport { Tooltip } from \"@material-ui/core\";\r\nimport RemoveCircleIcon from \"@material-ui/icons/RemoveCircle\";\r\nimport AddBoxIcon from \"@material-ui/icons/AddBox\";\r\n\r\nconst DocumentFieldToProcess = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n id: null,\r\n enabled: true,\r\n ocrDocumentFieldId: null,\r\n documentsList: [],\r\n errors: [],\r\n });\r\n\r\n const splitByList = [\r\n {\r\n displayName: `${'\\u00A0'}`,\r\n description: \" \"\r\n },\r\n {\r\n displayName: '_',\r\n description: '_'\r\n }\r\n ];\r\n\r\n const [inputList, setInputList] = useState([]);\r\n\r\n const handleInputChange = (e, index) => {\r\n const { name, value } = e.target;\r\n const list = [...inputList];\r\n\r\n list[index][name] = value;\r\n\r\n if (name === \"splitBy\" && value === \" \") {\r\n list[index].splitIndex = 1;\r\n }\r\n if (name === \"splitIndex\") {\r\n if (value > 9) {\r\n list[index].splitIndex = 9;\r\n }\r\n if (value < 1) {\r\n list[index].splitIndex = 1;\r\n }\r\n }\r\n\r\n setInputList(list);\r\n };\r\n const handleRemoveClick = (index) => {\r\n const list = [...inputList];\r\n list.splice(index, 1);\r\n setInputList(list);\r\n };\r\n const handleAddClick = () => {\r\n setInputList([\r\n ...inputList,\r\n {\r\n splitBy: ' ',\r\n splitIndex: 1,\r\n }\r\n ]);\r\n };\r\n\r\n useEffect(async () => {\r\n pulldata();\r\n pullDropdown();\r\n }, []);\r\n\r\n useEffect(() => {\r\n /* Called and Updated when scriptOnFileName state is set/changed. \r\n Do not modify that state unless this needs to be re-called */\r\n\r\n if (state?.scriptOnFileName) {\r\n /* convert the retrieved data into parsable JSON */\r\n const str = state.scriptOnFileName\r\n .replaceAll(\"'\", '\"')\r\n .replaceAll(\"]\", \"\")\r\n .replaceAll(\"[\", \"\")\r\n .replaceAll(\"method\", '\"method\"')\r\n .replaceAll(\"splitBy\", '\"splitBy\"')\r\n .replaceAll(\"parts\", '\"splitIndex\"')\r\n .replaceAll(\"by\", '\"splitBy\"');\r\n\r\n /* Parse JSON */\r\n const dataArr = JSON.parse(`[${str}]`);\r\n\r\n /* Remove un-needed field in JSON */\r\n dataArr.map((obj) => {\r\n delete obj.method;\r\n })\r\n\r\n /* Add JSON Objects to InputList (which adds visible rows) */\r\n setInputList([\r\n ...dataArr,\r\n ]);\r\n }\r\n }, [state?.scriptOnFileName]);\r\n\r\n const handleValidation = () => {\r\n let errors = {};\r\n let formIsValid = true;\r\n\r\n if (!state.ocrDocumentFieldId) {\r\n formIsValid = false;\r\n errors[\"ocrDocumentFieldId\"] = \"Document Field cannot be empty\";\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n errors: errors,\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n const pullDropdown = async () => {\r\n let resDropdown = await getOCRDocumentFieldToProcessDropdown(props.OCRDocToProcessList.id)\r\n\r\n if(resDropdown.success) {\r\n setState((st) => ({\r\n ...st,\r\n documentsList: resDropdown.data,\r\n }));\r\n }\r\n }\r\n\r\n const pulldata = async () => {\r\n let res = await getOCRDocumentFieldToProcess(props.OCRDocToProcessList.id);\r\n\r\n const data = res?.data[0];\r\n\r\n if (data.id) {\r\n setState((st) => ({\r\n ...st,\r\n id: data.id,\r\n enabled: !data.isDeleted,\r\n ocrDocumentFieldId: data.ocrDocumentFieldId,\r\n scriptOnFileName: data.scriptOnFileName,\r\n }));\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const handleSubmit = async () => {\r\n // Below is the format that is expected\r\n /* XENTRY [{method:'split',splitBy:'_',parts:[6]},{method:'split',splitBy:'_',parts:[7]},{method:'split',splitBy:'_',parts:[9]}] */\r\n /* OTHER [{method:'split',by:' ',parts:[1]}] */\r\n\r\n /* Re-Create the script string in format that is expected */\r\n let script = \"[\";\r\n inputList.map((x, i) => {\r\n script += `{method:'split',${inputList.length == 1 ? \"by\" : \"splitBy\"}:'${x.splitBy}',parts:[${x.splitIndex}]}` + ((i + 1) != inputList.length ? \",\" : \"]\");\r\n })\r\n\r\n const data = {\r\n Id: state.id ? state.id : null,\r\n OcrDocumentToProcessId: props.OCRDocToProcessList.id,\r\n OcrDocumentFieldId: state.ocrDocumentFieldId,\r\n IsDeleted: !state.enabled,\r\n ScriptOnFileName: script === \"[\" ? \"\" : script\r\n }\r\n\r\n if (handleValidation()) {\r\n let res = await addUpdateDocumentFieldToProcess(data);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n handleClose()\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n Update OCR Document Field\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Document Field\r\n \r\n {state.documentsList?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n {state.errors[\"ocrDocumentFieldId\"]}\r\n \r\n \r\n\r\n {inputList.length == 0 && (\r\n \r\n \r\n Add split data using the + icon\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {inputList.map((x, i) => (\r\n <>\r\n \r\n \r\n handleRemoveClick(i)} className=\"rightButton\">\r\n \r\n \r\n \r\n {inputList.length - 1 === i && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n\r\n \r\n Split By\r\n handleInputChange(e, i)}\r\n variant=\"outlined\"\r\n >\r\n {splitByList?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n Split Index\r\n handleInputChange(e, i)}\r\n type=\"number\"\r\n value={x.splitIndex}\r\n />\r\n \r\n \r\n ))}\r\n\r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n \r\n handleClick(\"enabled\", true)\r\n }\r\n >\r\n Yes\r\n \r\n \r\n \r\n \r\n handleClick(\"enabled\", false)\r\n }\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DocumentFieldToProcess;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport { getOcrDocumentToProcess, getOcrDocuments } from './../../../../Core/Service/OcrDocuments-service';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { SecondaryButton } from '../../../../Core/FormInput/index';\r\nimport AddOCRDocToProcess from './AddUpdateModal';\r\nimport DataGridComp from '../../../../Core/Grid';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport DocumentFieldToProcess from './DocumentFieldModal';\r\n\r\nconst OcrDocumentToProcess = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n showDocumentFieldModal: false,\r\n branches: [],\r\n OCRName: ''\r\n });\r\n const { showToast } = useContext(AppContext);\r\n const ocrDocId = props.match.params.ocrDocId;\r\n const name = props.match.params.name;\r\n\r\n useEffect(async () => {\r\n pullOCRDocToprocessAndUpdateState();\r\n }, []);\r\n\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'inputLocation',\r\n headerName: 'Input Location',\r\n flex: 1\r\n },\r\n {\r\n field: 'outputLocation',\r\n headerName: 'Output Location',\r\n flex: 1\r\n },\r\n {\r\n field: 'branch',\r\n headerName: 'Branch',\r\n flex: 0.6\r\n }\r\n ];\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n handleDocumentFieldModal(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const pullOCRDocToprocessAndUpdateState = async () => {\r\n let result = await getOcrDocumentToProcess(ocrDocId);\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data,\r\n show: false\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n OCRDocToProcessList: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleDocumentFieldModal = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showDocumentFieldModal: true,\r\n OCRDocToProcessList: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n OCRDocToProcessList: []\r\n };\r\n });\r\n };\r\n\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDocumentFieldModal: false }));\r\n refreshGrid && pullOCRDocToprocessAndUpdateState();\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No OCR Document To process available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add OCR Document Process\r\n \r\n
\r\n\r\n {state.show ?
: null}\r\n {state.showDocumentFieldModal ?
: null}\r\n\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n OCR Documents\r\n \r\n \r\n OCR Document To Process\r\n \r\n \r\n {name}\r\n \r\n \r\n
\r\n
No OCR Document Field available
\r\n \r\n );\r\n }\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullOcrDocumentFieldAndUpdateState();\r\n };\r\n return (\r\n \r\n
\r\n \r\n Add OCR Document Field\r\n \r\n
\r\n {state.show ?
: null}\r\n\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n OCR Documents\r\n \r\n \r\n OCR Document Field\r\n \r\n \r\n {state.OCRName}\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { FormHelperText, IconButton, InputLabel, Tooltip } from '@material-ui/core';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport Box from '@material-ui/core/Box';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { MenuItem } from '@material-ui/core';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport AppContext from '../../../App/AppContext';\r\nimport {\r\n TextBox,\r\n DialogContents,\r\n DialogTitles,\r\n Dialogs,\r\n SecondaryButton,\r\n DialogsActions,\r\n DefaultButton,\r\n SingelSelect,\r\n SelectBox\r\n} from '../../../Core/FormInput';\r\nimport { addWebForm, getWebFormsById } from './../../../Core/Service/webForm-service';\r\nimport { getWorkflows, getWorkflowsByProcessID } from '../../../Core/Service/workflow-service';\r\nimport { getByWorkflowIdAndHeaderId } from '../../../Core/Service/returnReason-service';\r\nimport CircularIndeterminate from '../../internal/ReportsScreens/ReportsScreens/BudgetCore/loader';\r\nimport { getProcesses } from '../../../Core/Service/process-service';\r\n\r\nconst AddWebFormModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n name: '',\r\n buttonLabel: '',\r\n url: '',\r\n description: '',\r\n errors: {},\r\n fields: {},\r\n nextWorkFlow: null,\r\n workFlowList: [],\r\n navigateToDashboard: false,\r\n webformSettingVMList: [],\r\n apiWebformSettingVMList: [],\r\n editableWorkflowVal: {},\r\n nextWorkflowVal: {},\r\n returnReasonVal: {},\r\n showLoader: true,\r\n processID: props.processID\r\n });\r\n\r\n const { WebFormId, WebFormDetails } = props;\r\n\r\n useEffect(() => {\r\n const fetchData = async () => {\r\n const res = await getWorkflowsByProcessID(props.processID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n workFlowList: res.data.map((q) => ({ id: q.id, name: q.workflowName }))\r\n }));\r\n }\r\n\r\n if (WebFormId) {\r\n const res = await getWebFormsById(WebFormId);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n name: res.data.list[0].name,\r\n url: res.data.list[0].webFormRelativeUrl,\r\n buttonLabel: res.data.list[0].webFormButtonLabel,\r\n description: res.data.list[0].nonFunctionalDescription,\r\n nextWorkFlow: res.data.list[0].webformEditableWorkflowID,\r\n navigateToDashboard: res.data.list[0].navigateToDashboardOnSubmit,\r\n processID: res.data.list[0].processID,\r\n apiWebformSettingVMList:\r\n res.data.webformSettingVM.length > 0\r\n ? res.data.webformSettingVM.map((q) => ({ ...q, isDelete: 0 }))\r\n : [{ id: null, editableWorkflowID: '', nextWorkflowID: '', isDelete: 0 }]\r\n }));\r\n }\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n webformSettingVMList: [{ id: null, editableWorkflowID: '', nextWorkflowID: '', isDelete: 0 }],\r\n showLoader: false\r\n }));\r\n }\r\n };\r\n\r\n fetchData();\r\n }, [WebFormId]);\r\n\r\n useEffect(() => {\r\n const fetchData = async () => {\r\n const tempList = [...state.apiWebformSettingVMList];\r\n const tempWorkFlowList = [...state.workFlowList];\r\n\r\n if (tempList.length > 0) {\r\n await Promise.all(\r\n tempList.map(async (q) => {\r\n if (q.editableWorkflowID) {\r\n q.editableWorkflowVal = tempWorkFlowList.find((r) => r.id === q.editableWorkflowID);\r\n const result = await getByWorkflowIdAndHeaderId(q.editableWorkflowID);\r\n q.returnReasonList = result.data.returnReasons.map((q) => ({ id: q.returnReasonID, name: q.returnReasonDescription }));\r\n }\r\n if (q.nextWorkflowID) {\r\n q.nextWorkflowVal = tempWorkFlowList.find((r) => r.id === q.nextWorkflowID);\r\n }\r\n if (q.returnReasonID) {\r\n q.returnReasonVal = q.returnReasonList.find((r) => r.id === q.returnReasonID);\r\n }\r\n })\r\n );\r\n\r\n setState((prevState) => ({ ...prevState, webformSettingVMList: tempList, showLoader: false }));\r\n }\r\n };\r\n\r\n fetchData();\r\n }, [state.apiWebformSettingVMList]);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n let fields = state.fields;\r\n fields[name] = value;\r\n setState((prevState) => ({\r\n ...prevState,\r\n [name]: value,\r\n fields: fields\r\n }));\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((prevState) => ({\r\n ...prevState,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const handleValidation = () => {\r\n let fields = state.fields;\r\n let errors = {};\r\n let formIsValid = true;\r\n let tempWebformSettingVMList = [...state.webformSettingVMList];\r\n tempWebformSettingVMList.forEach((q) => {\r\n if (!q.editableWorkflowVal?.id) {\r\n q.editableWorkflowValError = 'Please Select Editable Workflow';\r\n formIsValid = false;\r\n } else {\r\n q.editableWorkflowValError = '';\r\n formIsValid = true;\r\n }\r\n if (!q.nextWorkflowVal?.id) {\r\n q.nextWorkflowValError = 'Please Select Next Workflow';\r\n formIsValid = false;\r\n } else {\r\n q.nextWorkflowValError = '';\r\n formIsValid = true;\r\n }\r\n });\r\n\r\n if (!state.name) {\r\n formIsValid = false;\r\n errors['name'] = 'Name cannot be empty';\r\n }\r\n if (!state.url) {\r\n formIsValid = false;\r\n errors['url'] = 'Url cannot be empty';\r\n }\r\n if (!state.buttonLabel) {\r\n formIsValid = false;\r\n errors['buttonLabel'] = 'Button label cannot be empty';\r\n }\r\n\r\n setState((prevState) => ({\r\n ...prevState,\r\n errors: errors\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n const handelSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (handleValidation()) {\r\n let data = {\r\n Id: WebFormId,\r\n Name: state.name,\r\n WebFormRelativeUrl: state.url,\r\n WebFormButtonLabel: state.buttonLabel,\r\n NonFunctionalDescription: state.description,\r\n NavigateToDashboardOnSubmit: state.navigateToDashboard,\r\n processID: state.processID,\r\n // webformEditableWorkflowID: null,\r\n webformSettingVM: state.webformSettingVMList.map((q) => ({\r\n editableWorkflowID: q?.editableWorkflowVal?.id || '',\r\n id: q.id || null,\r\n nextWorkflowID: q?.nextWorkflowVal?.id || '',\r\n returnReasonID: q?.returnReasonVal?.id || '',\r\n isDelete: q.isDelete\r\n }))\r\n };\r\n\r\n let res = await addWebForm(data);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n }\r\n };\r\n\r\n const handleRemoveClick = (index) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n\r\n let findIndex = [...st.webformSettingVMList].findIndex((n, i) => i === index);\r\n\r\n if (findIndex) {\r\n st.webformSettingVMList[findIndex].isDelete = 1;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleAddClick = () => {\r\n setState((prevState) => ({\r\n ...prevState,\r\n webformSettingVMList: [\r\n ...state.webformSettingVMList,\r\n {\r\n id: null,\r\n editableWorkflowID: '',\r\n nextWorkflowID: '',\r\n isDelete: 0\r\n }\r\n ]\r\n }));\r\n };\r\n\r\n const singleSelectChange = (nm, index) => async (ev, val) => {\r\n const { webformSettingVMList } = state;\r\n const tempWebformSettingVMList = [...webformSettingVMList];\r\n tempWebformSettingVMList[index] = {\r\n ...tempWebformSettingVMList[index],\r\n [nm]: val\r\n };\r\n\r\n if (nm === 'editableWorkflowVal') {\r\n tempWebformSettingVMList[index].returnReasonVal = {};\r\n if (val?.id) {\r\n const result = await getByWorkflowIdAndHeaderId(val.id);\r\n tempWebformSettingVMList[index].returnReasonList = result.data.returnReasons.map((q) => ({\r\n id: q.returnReasonID,\r\n name: q.returnReasonDescription\r\n }));\r\n }\r\n }\r\n\r\n setState((prevState) => ({\r\n ...prevState,\r\n webformSettingVMList: tempWebformSettingVMList\r\n }));\r\n };\r\n\r\n const { webformSettingVMList, workFlowList } = state;\r\n\r\n return (\r\n \r\n \r\n {props.WebFormId ? Update Web Form : Add Web Form}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.showLoader ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n Name\r\n \r\n \r\n {state.errors['name']}\r\n \r\n \r\n \r\n URL\r\n \r\n \r\n {state.errors['url']}\r\n \r\n \r\n \r\n Button Label\r\n \r\n \r\n {state.errors['buttonLabel']}\r\n \r\n\r\n \r\n \r\n \r\n \r\n Workflow Settings\r\n \r\n \r\n \r\n \r\n \r\n {webformSettingVMList.map((webForm, i) => {\r\n return (\r\n !webForm.isDelete && (\r\n \r\n \r\n \r\n Editable in Workflow\r\n \r\n \r\n {webForm.editableWorkflowValError}\r\n \r\n \r\n \r\n Next Workflow\r\n \r\n \r\n {webForm.nextWorkflowValError}\r\n \r\n \r\n Return Reason\r\n {webformSettingVMList.length !== 1 && (\r\n \r\n handleRemoveClick(i)} className=\"rightButton\">\r\n \r\n \r\n \r\n )}\r\n {webformSettingVMList.length - 1 === i && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n )\r\n );\r\n })}\r\n \r\n \r\n Description\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Navigate to dashboard?\r\n \r\n \r\n \r\n handleClick('navigateToDashboard', true)}\r\n >\r\n Yes\r\n \r\n \r\n \r\n handleClick('navigateToDashboard', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddWebFormModal;\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton, PrimaryButton } from '../../../Core/FormInput';\r\nimport Box from '@material-ui/core/Box';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { IconButton } from '@material-ui/core';\r\nimport { DeleteWebForm } from './../../../Core/Service/webForm-service';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst DeleteWebFormModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n WebFormName: ''\r\n });\r\n const WebFormId = props.WebFormId;\r\n const name = props.WebFormDetails.name;\r\n useEffect(async () => {\r\n setState((st) => {\r\n const nst = { ...st, WebFormName: name };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handleDelete = async () => {\r\n let res = await DeleteWebForm(WebFormId);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DeleteWebFormModal;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport { getWebForms } from '../../../Core/Service/workflowList-service';\r\nimport AddWebFormModal from './AddWebFormModal';\r\nimport DeleteWebFormModal from './DeleteWebForm';\r\nimport DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';\r\nimport DataGridComp from '../../../Core/Grid';\r\n\r\nconst WebForm = (props) => {\r\n console.log(props, 'propssssssssss');\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n WebFormId: null,\r\n WebFormDetails: [],\r\n showDel: false\r\n });\r\n const { process } = props;\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullWebFormAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n const WebForm_id = params.value.row.id;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n WebFormId: WebForm_id,\r\n WebFormDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n const handleDeleteWebForm = (params) => {\r\n const WebForm_id = params.value.row.id;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showDel: true,\r\n WebFormId: WebForm_id,\r\n WebFormDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n handleDeleteWebForm(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 110,\r\n\r\n renderCell: (params) => \r\n },\r\n { field: 'name', headerName: 'Name', flex: 0.5 },\r\n {\r\n field: 'webFormRelativeUrl',\r\n headerName: 'URL',\r\n flex: 0.5\r\n },\r\n { field: 'processName', headerName: 'Process', flex: 0.8 },\r\n {\r\n field: 'webFormButtonLabel',\r\n headerName: 'Button Label',\r\n flex: 0.4\r\n },\r\n {\r\n field: 'nonFunctionalDescription',\r\n headerName: 'Description',\r\n flex: 1\r\n }\r\n ];\r\n\r\n const pullWebFormAndUpdateState = async () => {\r\n let result = await getWebForms(process.processID);\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.list\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullWebFormAndUpdateState();\r\n };\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n WebFormId: null,\r\n WebFormDetails: null\r\n };\r\n });\r\n };\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Web Form available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Web Form\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showDel ?
: null}\r\n
\r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Web Forms\r\n \r\n \r\n
\r\n\r\n {!state.processes && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n \r\n {props.handleSubmit && (\r\n \r\n \r\n Agree\r\n \r\n \r\n )}\r\n {props.handleCancel && (\r\n \r\n \r\n Cancel\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n","import { CircularProgress, FormLabel, Grid, InputLabel, TextField } from '@material-ui/core';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport React, { useEffect, useState } from 'react';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport { SelectBox, SingelSelect } from '../../../Core/FormInput';\r\nimport { getReportsDropdowns, GetShiftCalender, GetShiftCalenderScreenDropdowns } from '../../../Core/Service/reportService';\r\nimport { AddHolidays, getHolidaysList, getHolidaysScreenDropdown } from '../../../Core/Service/admin-service';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport ConfirmationModal from '../../../Core/Controls/Dialog/ConfirmationModal';\r\nimport { useContext } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { t } from 'i18next';\r\n\r\nfunction padLeft(nr, n, str) {\r\n return Array(n - String(nr).length + 1).join(str || '0') + nr;\r\n}\r\nconst months = moment.months();\r\n\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Workshop', active: true },\r\n { name: 'Holiday Calendar', active: true }\r\n];\r\n\r\nconst colorConfig = {\r\n 0: { color: '#dc3545', name: 'Dormant' },\r\n 3: { color: '#28a745', name: 'Active' },\r\n 2: { color: '#E829E8', name: 'PM commence' },\r\n 1: { color: '#33FFFF', name: 'AM continue' }\r\n};\r\n\r\nconst HolidayCalenderComp = () => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n data: {},\r\n branchList: [],\r\n shiftList: [],\r\n yearList: [],\r\n branchID: { id: '', name: '' },\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n showLoader: true\r\n });\r\n const [calender, setCalender] = useState([]);\r\n\r\n const pullDataNSetCalendar = async () => {\r\n setState((st) => ({ ...st, showLoader: true }));\r\n const res = await getHolidaysList(state.yearCode.id);\r\n let apiHolidaysList = res.data;\r\n\r\n let localDaysCounter = 0;\r\n\r\n var finalCalendar = [];\r\n\r\n months.forEach((month, monthIndex) => {\r\n var tempMonthData = [];\r\n\r\n const weekStartDate = moment([state.yearCode.id, monthIndex]).clone().startOf('month').startOf('isoWeek');\r\n const monthStartDate = moment([state.yearCode.id, monthIndex]).clone().startOf('month').subtract(1, 'd');\r\n\r\n const endDate = moment([state.yearCode.id, monthIndex]).clone().endOf('month');\r\n\r\n const day = weekStartDate.clone().subtract(1, 'day');\r\n\r\n while (day.isBefore(endDate, 'day')) {\r\n tempMonthData.push(\r\n Array(7)\r\n .fill(0)\r\n .map(() => {\r\n day.add(1, 'day');\r\n if (day.isAfter(monthStartDate, 'day') && day.isSameOrBefore(endDate, 'day')) {\r\n localDaysCounter += 1;\r\n let isTempDateObj = apiHolidaysList.find((p) => moment(p.date).format('DD-MMM-YYYY') == day.clone().format('DD-MMM-YYYY'));\r\n\r\n return {\r\n day: day.clone().format('DD'),\r\n fullDate: day.clone().format('DD-MMM-YYYY'),\r\n workingDay: isTempDateObj?.workingDay === 'Y' ? 'Y' : 'N'\r\n };\r\n } else {\r\n return null;\r\n }\r\n })\r\n );\r\n }\r\n if (tempMonthData.length <= 5) {\r\n tempMonthData.push(\r\n Array(7)\r\n .fill(0)\r\n .map(() => {\r\n return null;\r\n })\r\n );\r\n }\r\n finalCalendar.push({ monthName: month, monthData: tempMonthData });\r\n });\r\n\r\n setState((st) => ({ ...st, showLoader: false }));\r\n setCalender(finalCalendar);\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getHolidaysScreenDropdown();\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.yearList = res.data.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n });\r\n\r\n return newSt;\r\n });\r\n }, []);\r\n\r\n useEffect(async () => {\r\n pullDataNSetCalendar();\r\n }, [state.yearCode?.id]);\r\n\r\n const hideConfirmationModal = () => {\r\n setState((st) => ({ ...st, showWarning: false }));\r\n };\r\n\r\n const submitFunction = async (selectedData) => {\r\n if (selectedData == null) {\r\n return false;\r\n }\r\n let data = { Date: selectedData.fullDate, WorkingDay: selectedData.workingDay === 'Y' ? 'N' : 'Y' };\r\n let res = await AddHolidays(data);\r\n if (res.success) {\r\n pullDataNSetCalendar();\r\n showToast(`Set ${selectedData.workingDay === 'Y' ? 'Holiday' : 'Workday'} for ${moment(selectedData.fullDate).format('DD/MM/YYYY')}`);\r\n setState((st) => {\r\n const nst = { ...st };\r\n // nst.showWarning = false;\r\n nst.selectedData = {};\r\n return nst;\r\n });\r\n }\r\n };\r\n\r\n // const selectedDateConfirmationModal = (selectedData) => {\r\n // setState((st) => {\r\n // const nst = { ...st };\r\n // nst.showWarning = true;\r\n // nst.selectedData = selectedData;\r\n // nst.modalMsg = `Set ${selectedData.workingDay === 'Y' ? 'Workday' : 'Holiday'} for ${moment(selectedData.fullDate).format('DD/MM/YYYY')}`;\r\n // return nst;\r\n // });\r\n // };\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n
\r\n \r\n \r\n {calender.map((a, i) => (\r\n \r\n \r\n \r\n | \r\n \r\n {a.monthName}\r\n \r\n | \r\n
\r\n \r\n | Mon | \r\n Tue | \r\n Wed | \r\n Thu | \r\n Fri | \r\n Sat | \r\n Sun | \r\n
\r\n {a.monthData.map((p) => (\r\n \r\n {p.map((q) => (\r\n selectedDateConfirmationModal(q)}\r\n onClick={() => submitFunction(q)}\r\n >\r\n {q !== null ? q.day : ''}\r\n \r\n ))}\r\n
\r\n ))}\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n )}\r\n {state.showWarning ? (\r\n
\r\n \r\n \r\n ) : null}\r\n
\r\n Background Colour\r\n
\r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n backgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n
\r\n \r\n \r\n \r\n Text Colour\r\n
\r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n textColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n
\r\n \r\n \r\n } label=\"Active?\" />\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddReturnReasonModal;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { SecondaryButton } from '../../../../Core/FormInput/index';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport { getByWorkflowIdAndHeaderId } from '../../../../Core/Service/returnReason-service';\r\nimport AddReturnReasonModal from './AddReturnReasonModal';\r\nimport { getWorkflows } from '../../../../Core/Service/workflow-service';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport DataGridComp from '../../../../Core/Grid';\r\n\r\nconst useStyles = (props) =>\r\n makeStyles((thems) => {\r\n return {\r\n ...props\r\n };\r\n });\r\n\r\nconst ReturnReason = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n ReturnReasonId: null,\r\n ReturnReasonDetails: [],\r\n workflowList: []\r\n });\r\n const { showToast } = useContext(AppContext);\r\n const WorkflowID = props.match.params.workflowId;\r\n const WorkflowName = decodeURIComponent(props.match.params.WorkflowName);\r\n\r\n useEffect(async () => {\r\n pullReturnReasonAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n const ReturnReason_id = params.value.row.id;\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n ReturnReasonId: ReturnReason_id,\r\n ReturnReasonDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n var colorCodeObj = {};\r\n state.rows.forEach((c) => {\r\n colorCodeObj[[c.id]] = {\r\n background: c.returnReasonColourCode,\r\n color: c.returnReasonTextColourCode\r\n };\r\n });\r\n const classes = useStyles(colorCodeObj)();\r\n\r\n const getClass = (params) => {\r\n if (params.row.returnReasonColourCode) {\r\n return classes[params.row.id];\r\n }\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'returnReasonDescription',\r\n headerName: 'Reason',\r\n flex: 1\r\n },\r\n {\r\n field: 'returnReasonNextWorkflowName',\r\n headerName: 'Next Workflow',\r\n flex: 1\r\n // valueGetter: (params) =>\r\n // state.workflowList\r\n // .filter((m) => params.value == m.id)\r\n // .map((res) => {\r\n // return res.workflowName;\r\n // }),\r\n },\r\n {\r\n field: 'uniqIdentifier',\r\n headerName: 'Unique Identifier',\r\n flex: 1\r\n }\r\n // {\r\n // field: 'returnReasonColourCode',\r\n // headerName: 'Background Colour',\r\n // flex: 1\r\n // },\r\n // {\r\n // field: 'returnReasonTextColourCode',\r\n // headerName: 'Text Colour',\r\n // flex: 1\r\n // }\r\n ].map((c) => ({ ...c, cellClassName: getClass }));\r\n\r\n const pullReturnReasonAndUpdateState = async () => {\r\n let result = await getByWorkflowIdAndHeaderId(WorkflowID);\r\n let result1 = await getWorkflows();\r\n if (result.success && result1.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data?.returnReasons.map((el) => ({\r\n ...el,\r\n id: el?.returnReasonID,\r\n returnReasonNextWorkflowName: result1?.data.find((x) => x.id === el?.returnReasonNextWorkflowID)?.workflowName\r\n })),\r\n show: false,\r\n showDel: false,\r\n workflowList: result1.data\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n ReturnReasonId: null,\r\n ReturnReasonDetails: null\r\n };\r\n });\r\n };\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Return Reason data available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Return Reason\r\n \r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Workflow\r\n \r\n \r\n {WorkflowName}\r\n \r\n \r\n Return Reasons\r\n \r\n \r\n {state.show ? (\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n }\r\n onClose={handleClose}\r\n onOpen={handleOpen}\r\n open={open}\r\n direction={direction}\r\n color=\"secondary\"\r\n >\r\n {actions.map((m) => (\r\n \r\n ))}\r\n \r\n
\r\n
\r\n {/*
\r\n handleAdd('show')} className=\"btnadd\">\r\n Add Standard Technician Write Up\r\n \r\n
*/}\r\n\r\n {/*
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Standard Technician Write-Up\r\n \r\n */}\r\n {/*
*/}\r\n {/* \r\n \r\n \r\n \r\n \r\n Action\r\n Title\r\n Complaint\r\n Cause\r\n Cure\r\n \r\n \r\n\r\n \r\n {state.rows.map((row, index) => {\r\n return (\r\n \r\n {}\r\n {row.title}\r\n {row.complaint}\r\n {row.cause}\r\n {row.cure}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n */}\r\n\r\n \r\n \r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Standard Technician Write-Up\r\n \r\n \r\n \r\n \r\n handleAdd('show')} style={{}}>\r\n Add Standard Technician Write Up\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Action\r\n \r\n Title\r\n Complaint\r\n Cause\r\n Cure\r\n \r\n \r\n\r\n \r\n {state.filterTableData.map((row, index) => {\r\n return (\r\n \r\n {}\r\n {row.title}\r\n {row.complaint}\r\n {row.cause}\r\n {row.cure}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {state.show ? : null}\r\n {state.showDel ? (\r\n \r\n ) : null}\r\n \r\n );\r\n};\r\nexport default StandardTechWriteUp;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport {\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogTitle,\r\n} from \"@material-ui/core\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { SecondaryButton, PrimaryButton } from \"../../../Core/FormInput\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport { DeleteStandardWriteUp } from \"../../../Core/Service/techWriteUp-service\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst DeleteStandardWriteUpModal = (props) => {\r\n const { hideModal,showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n StandardWriteUpName: \"\",\r\n });\r\n const StandardWriteUpID = props.StandardWriteUpID;\r\n const name = props.StandardWriteUpDetails;\r\n useEffect(async () => {\r\n setState((st) => {\r\n const nst = { ...st, StandardWriteUpName: name };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handleDelete = async () => {\r\n let res = await DeleteStandardWriteUp(StandardWriteUpID);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DeleteStandardWriteUpModal;\r\n","import {get, post} from './http-calls';\r\n\r\nexport const getFailureCodes = async ()=>{\r\n let res = await get('/failurecodes', { useAuthToken: true });\r\n return res;\r\n}\r\nexport const addFailureNotes = async (id, name) => {\r\n let res = await post(`failurecodes`, {\r\n FailureCode:id,\r\n FailureDescription: name,\r\n }, { useAuthToken: true });\r\n return res;\r\n}\r\nexport const DeleteFailureNotes = async (id) => {\r\n let res = await post(`WebForms/DeleteWebForms/${id}`, {\r\n Id: id,\r\n },{ useAuthToken: true });\r\n return res;\r\n}","import React, { useContext, useState, useEffect } from \"react\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport {\r\n TextBox,\r\n DialogContents,\r\n DialogTitles,\r\n Dialogs,\r\n SecondaryButton,\r\n DialogsActions,\r\n} from \"../../../Core/FormInput\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport \"../User Management/UserManagement.css\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport { addFailureNotes } from \"../../../Core/Service/failureCode-service\";\r\nconst AddFailureNoteModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n failureCode: null,\r\n description: \"\",\r\n errors: {},\r\n fields: {},\r\n });\r\n const FailureNotesDetails = props.FailureNotesDetails;\r\n\r\n useEffect(async () => {\r\n const FailureNotesData = FailureNotesDetails;\r\n if (FailureNotesDetails) {\r\n setState((st) => ({\r\n ...st,\r\n description: FailureNotesData.name,\r\n failureCode: FailureNotesData.id,\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n let fields = state.fields;\r\n fields[name] = value;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value, fields: fields };\r\n return nst;\r\n });\r\n };\r\n\r\n const handelSubmit = async (e) => {\r\n e.preventDefault();\r\n if (handleValidation()) {\r\n let res = await addFailureNotes(\r\n state.failureCode,\r\n state.description, \r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n }\r\n };\r\n const handleValidation = () => {\r\n let fields = state.fields;\r\n let errors = {};\r\n let formIsValid = true;\r\n if (!state.description) {\r\n formIsValid = false;\r\n errors[\"description\"] = \"Description 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 return (\r\n \r\n \r\n \r\n {state.failureCode ? (\r\n Update Failure Note\r\n ) : (\r\n Add Failure Note\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n {state.errors[\"description\"]}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddFailureNoteModal;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport {\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogTitle,\r\n} from \"@material-ui/core\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { SecondaryButton, PrimaryButton } from \"../../../Core/FormInput\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport { DeleteFailureNotes } from \"../../../Core/Service/failureCode-service\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst DeleteFailureNotesModal = (props) => {\r\n const { hideModal,showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n FailureNotesName: \"\",\r\n });\r\n const FailureNotesId = props.FailureNotesDetails.id;\r\n const name = props.FailureNotesDetails.name;\r\n useEffect(async () => {\r\n setState((st) => {\r\n const nst = { ...st, FailureNotesName: name };\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n const handleDelete = async () => {\r\n let res = await DeleteFailureNotes(FailureNotesId);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default DeleteFailureNotesModal;\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { SecondaryButton } from \"../../../Core/FormInput/index\";\r\nimport { DataGrid, GridOverlay } from \"@material-ui/data-grid\";\r\nimport EditOutlinedIcon from \"@material-ui/icons/EditOutlined\";\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\nimport AppContext from \"../../../App/AppContext\";\r\nimport { Link } from \"react-router-dom\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Breadcrumbs from \"@material-ui/core/Breadcrumbs\";\r\nimport AddFailureNoteModal from \"./AddUpdateModal\";\r\nimport { getFailureCodes } from \"../../../Core/Service/failureCode-service\";\r\nimport DeleteFailureNotesModal from \"./DeleteFailureNotes\";\r\nimport DeleteOutlineIcon from \"@material-ui/icons/DeleteOutline\";\r\nimport DataGridComp from \"../../../Core/Grid\";\r\n\r\nconst FailureNotes = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n showDel: false,\r\n FailureNotesDetails: [],\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullFailureNotesAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n FailureNotesDetails: params.value.row,\r\n };\r\n return nst;\r\n });\r\n };\r\n const handleDeleteWebForm = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n showDel: true,\r\n FailureNotesDetails: params.value.row,\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n handleDeleteWebForm(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n const column_new = [\r\n {\r\n field: \"id\",\r\n headerName: \"ID\",\r\n width: 3,\r\n sortable: false,\r\n hide: true,\r\n },\r\n {\r\n field: \"\",\r\n headerName: \"Action\",\r\n sortable: false,\r\n width: 110,\r\n\r\n renderCell: (params) => ,\r\n },\r\n { field: \"name\", headerName: \"Description\", flex: 2 },\r\n ];\r\n\r\n const pullFailureNotesAndUpdateState = async () => {\r\n let result = await getFailureCodes();\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.map((w) => ({\r\n id: w.failureCode,\r\n name: w.failureDescription,\r\n })),\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullFailureNotesAndUpdateState();\r\n };\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n FailureNotesDetails: null,\r\n };\r\n });\r\n };\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Failure Notes available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Failure Notes\r\n \r\n
\r\n {state.show ?
: null}\r\n {state.showDel ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Failure Notes\r\n \r\n \r\n
\r\n
No parts available
\r\n \r\n );\r\n }\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n Workflow Steps List Option\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n List Name - {state.listName}\r\n \r\n\r\n \r\n Option Name\r\n \r\n \r\n\r\n \r\n Background Colour
\r\n \r\n setState((state) => ({\r\n ...state,\r\n backgroundColour: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n Text Colour
\r\n \r\n setState((state) => ({\r\n ...state,\r\n foregroundColour: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n \r\n Update\r\n \r\n \r\n \r\n\r\n \r\n item.MarkForDelete !== true)}\r\n disableColumnMenu={true}\r\n showColumnRightBorder={true}\r\n pageSize={100}\r\n />\r\n No Workflow Step List Option available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Workflow Steps List\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showOption ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Workflow Steps List\r\n \r\n \r\n
\r\n
No Work Accomplished Code available
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n Add Work Accomplished Code\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n {state.showDel ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Work Accomplished Code\r\n \r\n \r\n
\r\n
\r\n
\r\n {state.showLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n Branch \r\n
\r\n
\r\n \r\n {`${props.branchCode} - ${state.branchName}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {inputList.map((item, i) => (\r\n \r\n 
\r\n \r\n handleRemoveClick(i)}>\r\n Remove\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n {props.vehicleCategoryID ? 'Update' : 'Add'}\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {MonthShortNameList.map((p) => {\r\n return {p};\r\n })}\r\n \r\n Total\r\n \r\n \r\n \r\n \r\n \r\n \r\n Retail Units\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetRetail${p}`, state.rows[`salesTargetRetail${p}`])};\r\n })}\r\n {state.totals.salesTargetRetailTotal}\r\n \r\n \r\n \r\n Motab Units\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetMotab${p}`, state.rows[`salesTargetMotab${p}`])};\r\n })}\r\n {state.totals.salesTargetMotabTotal}\r\n \r\n \r\n \r\n Vehicle Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTarget${p}`, state.rows[`salesTarget${p}`])};\r\n })}\r\n {state.totals.salesTargetTotal}\r\n \r\n \r\n \r\n Vehicle Cost Of Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetCost${p}`, state.rows[`salesTargetCost${p}`])};\r\n })}\r\n {state.totals.salesTargetCostTotal}\r\n \r\n \r\n \r\n Vehicle Gross Profit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Vehicle Gross Profit %\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfitPercentage${p}`]};\r\n })}\r\n \r\n \r\n \r\n Vehicle Profit Per Unit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`vehicleGrossProfitPerUnit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetAccessory${p}`, state.rows[`salesTargetAccessory${p}`])};\r\n })}\r\n {state.totals.salesTargetAccessoryTotal}\r\n \r\n \r\n \r\n Accessory Cost Of Sales\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetAccessoryCost${p}`, state.rows[`salesTargetAccessoryCost${p}`])};\r\n })}\r\n {state.totals.salesTargetAccessoryCostTotal}\r\n \r\n \r\n \r\n Accessory Gross Profit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfit${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Gross Profit %\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfitPercentage${p}`]};\r\n })}\r\n \r\n \r\n \r\n Accessory Profit Per Unit\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {state.totals[`accessoryGrossProfitPerUnit${p}`]};\r\n })}\r\n \r\n \r\n \r\n PDI costs\r\n \r\n {MonthShortNameList.map((p) => {\r\n return {InputWrapper(`salesTargetPDICost${p}`, state.rows[`salesTargetPDICost${p}`])};\r\n })}\r\n {state.totals.salesTargetPDICostTotal}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SalesTargetScreen;\r\n","import { Checkbox, FormControlLabel, FormLabel, Grid, TextField } from '@material-ui/core';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useContext, useMemo, useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../Core/Controls/Tabs';\r\nimport { SecondaryButton, TextBox } from '../../../Core/FormInput';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport '../commonStyle.scss';\r\nimport {\r\n AddExpenseCategory,\r\n AddOtherIncomeCategory,\r\n getBudgetDropDown,\r\n getBudgetExpenses,\r\n getBudgetOtherIncomes,\r\n getSalesTargets,\r\n postBudgetExpenceData,\r\n postSetOtherIncomes\r\n} from '../../../Core/Service/branch-screen-service';\r\nimport SalesTargetScreen from './SalesTargetScreen';\r\nimport AppContext from '../../../App/AppContext';\r\n\r\nfunction CustomNoRowsOverlay() {\r\n return (\r\n \r\n No parts available
\r\n \r\n );\r\n}\r\n\r\nconst MonthShortNameList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\n\r\nconst ExpenseOtherIncomeComp = (props) => {\r\n const [state, setState] = useState({ rows: [], isActive: false, category: '', columnTotal: {} });\r\n const { showToast } = useContext(AppContext);\r\n\r\n const pullExpenseBudgetGridData = async () => {\r\n let res = await getBudgetExpenses(props.yearCode?.id, props.data.departmentID, props.branchCode);\r\n let temp = res.data.list.table.map((o) => {\r\n return { ...o, id: o.expenseCategoryID };\r\n });\r\n setState((st) => {\r\n return { ...st, rows: temp || [] };\r\n });\r\n };\r\n\r\n const pullOtherIncomesBudgetGridData = async () => {\r\n let res = await getBudgetOtherIncomes(props.yearCode?.id, props.data.departmentID, props.branchCode);\r\n let temp = res.data.list.table.map((o) => {\r\n return { ...o, id: o.otherIncomeCategoryID };\r\n });\r\n setState((st) => {\r\n return { ...st, rows: temp || [] };\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (props.fromPage == 'expense') {\r\n pullExpenseBudgetGridData();\r\n } else if (props.fromPage == 'otherIncome') {\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }, [props.yearCode?.id]);\r\n\r\n useEffect(() => {\r\n if (state.rows.length > 0) {\r\n let tempRows = [...state.rows];\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let tempObj = {};\r\n let grandTotal = 0;\r\n MonthShortNameList.forEach((r) => {\r\n let total = 0;\r\n tempRows.forEach((q) => {\r\n total += +q[`${frmpPage}${r}`];\r\n });\r\n tempObj[`${frmpPage}${r}`] = total;\r\n grandTotal += tempObj[`${frmpPage}${r}`];\r\n });\r\n tempObj.grandTotal = grandTotal;\r\n setState((st) => {\r\n return { ...st, columnTotal: tempObj };\r\n });\r\n }\r\n }, [state.rows]);\r\n\r\n const column = [\r\n {\r\n field: `${props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : ''}CategoryName`,\r\n headerName: 'Category',\r\n width: 300\r\n },\r\n ...MonthShortNameList.map((p) => {\r\n return {\r\n field: `${props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : ''}${p}`,\r\n headerName: `${p}`,\r\n align: 'right',\r\n renderCell: (params) => {\r\n if (params.row.id != 'Columntotal') {\r\n return (\r\n \r\n );\r\n }\r\n },\r\n flex: 1\r\n };\r\n })\r\n ];\r\n\r\n const new_columns = useMemo(() => {\r\n let tempCols = [...column];\r\n tempCols.push({\r\n field: ``,\r\n headerName: 'Total',\r\n flex: 1,\r\n align: 'right',\r\n renderCell: (params) => {\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let total = 0;\r\n MonthShortNameList.forEach((o) => {\r\n total += +params.row[`${frmpPage}${o}`];\r\n });\r\n return <>{total};\r\n }\r\n });\r\n\r\n return tempCols;\r\n }, [state.rows]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n };\r\n\r\n const changeQantity = (id, des, name) => (e) => {\r\n let changedArray = [...state.rows];\r\n let objIndex = state.rows.findIndex((x) => x.id === id);\r\n changedArray[objIndex][name] = e.target.value;\r\n setState((st) => ({\r\n ...st,\r\n rows: changedArray\r\n }));\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let res = {};\r\n let fromPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n let data = {\r\n branchID: props.branchCode,\r\n year: props.yearCode?.id,\r\n expenseVM: state.rows.map((q) => {\r\n return {\r\n [`${fromPage}CategoryID`]: q[`${fromPage}CategoryID`],\r\n [`${fromPage}Jan`]: q[`${fromPage}Jan`],\r\n [`${fromPage}Feb`]: q[`${fromPage}Feb`],\r\n [`${fromPage}Mar`]: q[`${fromPage}Mar`],\r\n [`${fromPage}Apr`]: q[`${fromPage}Apr`],\r\n [`${fromPage}May`]: q[`${fromPage}May`],\r\n [`${fromPage}Jun`]: q[`${fromPage}Jun`],\r\n [`${fromPage}Jul`]: q[`${fromPage}Jul`],\r\n [`${fromPage}Aug`]: q[`${fromPage}Aug`],\r\n [`${fromPage}Sep`]: q[`${fromPage}Sep`],\r\n [`${fromPage}Oct`]: q[`${fromPage}Oct`],\r\n [`${fromPage}Nov`]: q[`${fromPage}Nov`],\r\n [`${fromPage}Dec`]: q[`${fromPage}Dec`]\r\n };\r\n })\r\n };\r\n\r\n if (props.fromPage == 'expense') {\r\n res = await postBudgetExpenceData(data);\r\n if (res.success) {\r\n showToast('Expense Target Save Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n } else if (props.fromPage == 'otherIncome') {\r\n res = await postSetOtherIncomes(data);\r\n if (res.success) {\r\n showToast('Other Income Target Save Successfully');\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }\r\n };\r\n\r\n const handleCategorySubmit = async () => {\r\n let res = {};\r\n let data = {\r\n branchID: props.branchCode,\r\n departmentID: props.data.departmentID,\r\n categoryName: state.category,\r\n categoryIncludeInProfit: state.isActive\r\n };\r\n\r\n if (props.fromPage == 'expense') {\r\n res = await AddExpenseCategory(data);\r\n if (res.success) {\r\n showToast('Expense Category Added Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n } else if (props.fromPage == 'otherIncome') {\r\n res = await AddOtherIncomeCategory(data);\r\n if (res.success) {\r\n showToast('Other Income Category Added Successfully');\r\n pullOtherIncomesBudgetGridData();\r\n }\r\n }\r\n };\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const TableFooter = () => {\r\n let frmpPage = props.fromPage == 'expense' ? 'expense' : props.fromPage == 'otherIncome' ? 'otherIncome' : '';\r\n return (\r\n \r\n \r\n Total\r\n \r\n {state.columnTotal &&\r\n MonthShortNameList.map((u) => {\r\n return (\r\n \r\n {state.columnTotal[`${frmpPage}${u}`]}
\r\n \r\n );\r\n })}\r\n \r\n {state.columnTotal?.grandTotal}
\r\n \r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {(props.fromPage == 'expense' || props.fromPage == 'otherIncome') && (\r\n \r\n \r\n {/* Category */}\r\n \r\n \r\n \r\n }\r\n label=\"Include in Profit/Loss?\"\r\n />\r\n \r\n \r\n \r\n Add\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n\r\n \r\n TableFooter()}\r\n minWidth={1250}\r\n />\r\n \r\n \r\n );\r\n};\r\n\r\nconst DepartmentDetailsComp = (props) => {\r\n const insideTabs = [\r\n ...(props.data.includeSales\r\n ? [{ label: 'Sales', body: }]\r\n : []),\r\n ...(props.data.includeExpenses\r\n ? [\r\n {\r\n label: 'Expense',\r\n body: \r\n }\r\n ]\r\n : []),\r\n ...(props.data.includeExpenses\r\n ? [\r\n {\r\n label: 'Other Income',\r\n body: \r\n }\r\n ]\r\n : [])\r\n ];\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst BranchTargetScreen = (props) => {\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n salesDepartments: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getBudgetDropDown();\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear = res.data.budgetYear.map((o) => {\r\n return { description: `${o.budgetYear}`, id: `${o.budgetYear}` };\r\n });\r\n newSt.salesDepartments = res.data.salesDepartments;\r\n\r\n return newSt;\r\n });\r\n }, []);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.salesDepartments.map((q) => {\r\n return { label: `${q.name}`, body: };\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default BranchTargetScreen;\r\n","import { Grid, FormLabel, Typography, InputLabel, FormHelperText, FormControlLabel, Checkbox } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { DatePicker, SecondaryButton, SingelSelect, TextBox } from '../../../Core/FormInput';\r\nimport { getBranchCodes, getReportingTypeList, setBranchCodes } from '../../../Core/Service/branch-screen-service';\r\nimport TabComponent from '../../../Core/Controls/Tabs';\r\n\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport moment from 'moment';\r\n\r\n// const ReportingTypeList = [\r\n// { id: 'C', name: 'Cash' },\r\n// { id: 'CO', name: 'Consumables' },\r\n// { id: 'MV', name: 'MobiloVan' },\r\n// { id: 'RM', name: 'RandM' },\r\n// { id: 'W', name: 'Warranty' },\r\n// { id: 'R', name: 'Rectification' },\r\n// { id: 'SW', name: 'Service Warranty Write Off' },\r\n// { id: 'PW', name: 'Parts Warranty Write Off' }\r\n// ];\r\n\r\nconst UpdateBranchCodesModal = (props) => {\r\n const [state, setState] = useState({\r\n BranchInvoiceEmail: '',\r\n BranchContractBranchName: '',\r\n BranchRandMCodes: '',\r\n BranchWarrantyCodes: '',\r\n BranchCashCodes: '',\r\n BranchRectificationAccountCode: '',\r\n BranchServiceWarrantyWriteOffAccountCode: '',\r\n BranchPartsWarrantyWriteOffAccountCode: '',\r\n BranchConsumablesAccountCode: '',\r\n BranchMobiloVanAccountCode: '',\r\n BranchExcludeLabourCode: '',\r\n ReportingTypeList: [],\r\n branchIncludeInEWIP: false,\r\n branchIncludeInReporting: false,\r\n branchIncludeInInvoicePortal: false,\r\n branchSeteWIPWorkflowID: false,\r\n excludeBranch: false,\r\n branchWorkflowChangeNotificationEmail: '',\r\n branchReturnReasonNotificationEmail: ''\r\n });\r\n\r\n const [reportingVM, setReportingVM] = useState([{ codeID: null, codeType: {}, code: '', isDeleted: 0 }]);\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const handleSubmit = async () => {\r\n const data = {\r\n BranchID: props.branchID,\r\n BranchInvoiceEmail: state.BranchInvoiceEmail ? state.BranchInvoiceEmail : '',\r\n BranchContractBranchName: state.BranchContractBranchName ? state.BranchContractBranchName : '',\r\n BranchShortCode: state.branchShortCode || '',\r\n BranchShortName: state.branchShortName || '',\r\n BranchName: state.branchName || '',\r\n BranchIncludeInEWIP: state.branchIncludeInEWIP,\r\n BranchIncludeInReporting: state.branchIncludeInReporting,\r\n BranchIncludeInInvoicePortal: state.branchIncludeInInvoicePortal,\r\n BranchSeteWIPWorkflowID: state.branchSeteWIPWorkflowID,\r\n BranchGoLiveDate: state.branchGoLiveDate,\r\n ExcludeBranch: state.excludeBranch,\r\n branchWorkflowChangeNotificationEmail: state.branchWorkflowChangeNotificationEmail,\r\n branchReturnReasonNotificationEmail: state.branchReturnReasonNotificationEmail,\r\n // BranchRandMCodes: state.BranchRandMCodes ? state.BranchRandMCodes : '',\r\n // BranchWarrantyCodes: state.BranchWarrantyCodes ? state.BranchWarrantyCodes : '',\r\n // BranchCashCodes: state.BranchCashCodes ? state.BranchCashCodes : '',\r\n // BranchRectificationAccountCode: state.BranchRectificationAccountCode ? state.BranchRectificationAccountCode : '',\r\n // BranchServiceWarrantyWriteOffAccountCode: state.BranchServiceWarrantyWriteOffAccountCode ? state.BranchServiceWarrantyWriteOffAccountCode : '',\r\n // BranchPartsWarrantyWriteOffAccountCode: state.BranchPartsWarrantyWriteOffAccountCode ? state.BranchPartsWarrantyWriteOffAccountCode : '',\r\n // BranchConsumablesAccountCode: state.BranchConsumablesAccountCode ? state.BranchConsumablesAccountCode : '',\r\n // BranchMobiloVanAccountCode: state.BranchMobiloVanAccountCode ? state.BranchMobiloVanAccountCode : '',\r\n BranchExcludeLabourCode: state.BranchExcludeLabourCode ? state.BranchExcludeLabourCode : '',\r\n ReportingCodes: reportingVM.map((k) => {\r\n return {\r\n ...k,\r\n codeID: k.codeID ? k.codeID : null,\r\n code: k.code ? k.code : '',\r\n codeType: k.codeType.id\r\n };\r\n })\r\n };\r\n let res = await setBranchCodes(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('Branch Codes updated successfully');\r\n props.onClose();\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getReportingTypeList();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n ReportingTypeList: res.data.reportingCode\r\n }));\r\n }\r\n }, []);\r\n\r\n const pullAndUpdateState = async () => {\r\n let res = await getBranchCodes(props.branchID);\r\n if (res.success) {\r\n const data = res.data.dt[0];\r\n console.log(res.data, 'res.data');\r\n const ReportData = res.data.reportingCodes;\r\n setState((st) => ({\r\n ...st,\r\n BranchInvoiceEmail: data.branchInvoiceEmail,\r\n BranchContractBranchName: data.branchContractBranchName,\r\n branchShortCode: data.branchShortCode,\r\n branchShortName: data.branchShortName,\r\n branchName: data.branchName,\r\n branchIncludeInEWIP: data.branchIncludeInEWIP,\r\n branchIncludeInReporting: data.branchIncludeInReporting,\r\n branchIncludeInInvoicePortal: data.branchIncludeInInvoicePortal,\r\n branchSeteWIPWorkflowID: data.branchSeteWIPWorkflowID,\r\n branchGoLiveDate: moment(data.branchGoLiveDate).format('YYYY-MM-DD'), // data.branchGoLiveDate,\r\n excludeBranch: data.excludeBranch,\r\n branchWorkflowChangeNotificationEmail: data.branchWorkflowChangeNotificationEmail,\r\n branchReturnReasonNotificationEmail: data.branchReturnReasonNotificationEmail,\r\n // BranchRandMCodes: data.branchRandMCodes,\r\n // BranchWarrantyCodes: data.branchWarrantyCodes,\r\n // BranchCashCodes: data.branchCashCodes,\r\n // BranchRectificationAccountCode: data.branchRectificationAccountCode,\r\n // BranchServiceWarrantyWriteOffAccountCode: data.branchServiceWarrantyWriteOffAccountCode,\r\n // BranchPartsWarrantyWriteOffAccountCode: data.branchPartsWarrantyWriteOffAccountCode,\r\n // BranchConsumablesAccountCode: data.branchConsumablesAccountCode,\r\n // BranchMobiloVanAccountCode: data.branchMobiloVanAccountCode,\r\n BranchExcludeLabourCode: data.branchExcludeLabourCode\r\n }));\r\n setReportingVM(\r\n !ReportData?.length\r\n ? [\r\n {\r\n codeID: null,\r\n codeType: {},\r\n code: '',\r\n isDeleted: 0\r\n }\r\n ]\r\n : ReportData.map((k) => {\r\n return {\r\n ...k,\r\n codeID: k.codeID ? k.codeID : null,\r\n code: k.code ? k.code : '',\r\n codeType: state.ReportingTypeList.find((n) => n.id === k.codeType),\r\n isDeleted: 0\r\n };\r\n })\r\n );\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (state.ReportingTypeList.length > 0) {\r\n pullAndUpdateState();\r\n }\r\n }, [state.ReportingTypeList]);\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n };\r\n\r\n const addTimeRow = () => {\r\n setReportingVM((st) => [\r\n ...st,\r\n {\r\n codeID: null,\r\n codeType: {},\r\n code: '',\r\n isDeleted: 0\r\n }\r\n ]);\r\n };\r\n\r\n const removeTimeRow = (indx) => {\r\n setReportingVM((st) => {\r\n const newSt = [...st];\r\n newSt.splice(indx, 1);\r\n return newSt;\r\n });\r\n };\r\n\r\n const singleSelectChange = (index) => (ev, val) => {\r\n setReportingVM((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex.codeType = val;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const handlepart = (index) => (e) => {\r\n let { name, value } = e.target;\r\n setReportingVM((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex[name] = value;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n const handleDel = (index) => () => {\r\n setReportingVM((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex.isDeleted = 1;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n console.log(state, 'excludeBranch');\r\n\r\n const tabs = [\r\n {\r\n label: 'Detail',\r\n body: (\r\n \r\n {' '}\r\n \r\n \r\n Invoice Email\r\n \r\n \r\n \r\n Contract Branch Name\r\n \r\n \r\n \r\n Workflow Email\r\n \r\n \r\n \r\n Return Reason Email\r\n \r\n \r\n \r\n Invoiced Hours exclude labour code\r\n \r\n \r\n \r\n Branch Short Code\r\n \r\n \r\n \r\n Branch Name\r\n \r\n \r\n \r\n Branch Short Name\r\n \r\n \r\n \r\n Branch Go Live Date\r\n \r\n \r\n \r\n \r\n }\r\n label=\"Include In EWIP?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Include In Invoice Portal?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Include In Reporting?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Set eWIP WorkflowID?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Exclude Branch?\"\r\n />\r\n \r\n \r\n
\r\n )\r\n },\r\n {\r\n label: 'Reporting',\r\n body: (\r\n \r\n
\r\n {reportingVM.map((row, index) => {\r\n return (\r\n !row.isDeleted && (\r\n \r\n \r\n Reporting Type\r\n\r\n \r\n \r\n \r\n Code\r\n \r\n \r\n \r\n \r\n {index !== 0 && (\r\n
{\r\n // removeTimeRow(index);\r\n // }}\r\n onClick={handleDel(index)}\r\n />\r\n )}\r\n \r\n {index === 0 && (\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Save\r\n \r\n \r\n {/* \r\n \r\n Invoice Email\r\n \r\n \r\n \r\n Contract Branch Name\r\n \r\n \r\n \r\n RandM Codes\r\n \r\n \r\n \r\n Warranty Codes\r\n \r\n \r\n \r\n Cash Codes\r\n \r\n \r\n \r\n Rectification Account Code\r\n \r\n \r\n \r\n Service Warranty Write Off Account Code\r\n \r\n \r\n \r\n Parts Warranty Write Off Account Code\r\n \r\n \r\n \r\n Consumables Account Code\r\n \r\n \r\n \r\n Mobilo Van Account Code\r\n \r\n \r\n \r\n Invoiced Hours exclude labour code\r\n \r\n \r\n\r\n \r\n \r\n Note: Codes can be comma seperated i.e (1233,5232)\r\n \r\n \r\n \r\n */}\r\n
\r\n );\r\n};\r\nexport default UpdateBranchCodesModal;\r\n","import React, { useState, useEffect, useContext } from 'react';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport BranchModal from './BranchModal';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb/index';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { IconButton } from '@material-ui/core';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport { getAllBranch } from '../../../Core/Service/branch-screen-service';\r\nimport '../commonStyle.scss';\r\nimport BranchTargetScreen from './BranchTarget';\r\nimport AppContext from '../../../App/AppContext';\r\nimport TrackChangesIcon from '@material-ui/icons/TrackChanges';\r\nimport { Backup, Link } from '@material-ui/icons';\r\nimport UpdateBranchCodesModal from './BranchCodeModal';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Branch', active: true }\r\n];\r\nconst styles = {\r\n gridImage: { width: 60, height: 'auto', backgroundSize: 'cover', marginTop: '5%' },\r\n gridImageContainer: { width: '100%', textAlign: 'center' }\r\n};\r\n\r\nfunction Braches(props) {\r\n let config = window._ENV_;\r\n let checkSite = window.location.host.includes('Nicol') ? true : false;\r\n\r\n const [state, setState] = useState({\r\n branchList: [],\r\n branchName: null,\r\n branchCode: '',\r\n id: null,\r\n loader: true,\r\n open: false\r\n });\r\n\r\n const { portalSettings, userRoles } = useContext(AppContext);\r\n const isInternal = userRoles.includes('internal');\r\n\r\n const stampRender = (data) => {\r\n let isBase64Image = data.row.branchStampImage.includes('base64');\r\n return (\r\n \r\n {data.row.branchStampImage ? (\r\n
\r\n ) : null}\r\n
\r\n {!isInternal && (\r\n \r\n btnHandler(params.value.row)}>\r\n {/* */}\r\n \r\n \r\n \r\n )}\r\n {portalSettings.portalSettingReportingEnabled && checkSite && (\r\n //Show this button to only Nicol site\r\n \r\n targetBtnHandler(params.value.row)}>\r\n \r\n \r\n \r\n )}\r\n \r\n codesBtnHandler(params.value.row)}>\r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const columns = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 100,\r\n renderCell: (params) => \r\n },\r\n { field: 'branchName', headerName: 'Branch Name', flex: 2 }\r\n // { field: 'branchStampImage', headerName: 'Stamps', flex: 2, renderCell: stampRender }\r\n ];\r\n\r\n const title = state.id ? 'Upload Stamps' : 'Add Stamps';\r\n\r\n const closeModal = (res) => {\r\n setState((state) => ({ ...state, open: false, openTargetModal: false, openCodeModal: false }));\r\n res && pullData();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {state.open ? (\r\n closeModal(false)} fullWidth maxWidth=\"md\">\r\n closeModal(true)} />\r\n \r\n ) : null}\r\n {state.openTargetModal ? (\r\n closeModal(false)} fullWidth maxWidth=\"xl\" fullScreen>\r\n \r\n \r\n ) : null}\r\n {state.openCodeModal ? (\r\n closeModal(false)} maxWidth=\"md\" fullWidth>\r\n closeModal(false)} />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\nexport default Braches;\r\n","import {get, post, put } from './http-calls';\r\n\r\nexport const addBatteryResults = async(id, description) => {\r\n let res = await post(`/api/BatteryTestResults`, {\r\n BatteryTestResultCode: id,\r\n BatteryTestResultName: description,\r\n Mode: \"A\",\r\n }, { useAuthToken: true });\r\n return res;\r\n}\r\n\r\nexport const updateBatteryResults = async(id, description) => {\r\n let res = await post(`/api/BatteryTestResults`, {\r\n BatteryTestResultCode: id,\r\n BatteryTestResultName: description,\r\n Mode: \"U\",\r\n }, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getBatteryResults = async() => {\r\n let res = await get('/api/BatteryTestResults', { useAuthToken: true });\r\n return res;\r\n}","import React, { useContext, useState, useEffect } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox, DialogContents, DialogTitles, Dialogs, SecondaryButton, DialogsActions } from '../../../Core/FormInput';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Box from '@material-ui/core/Box';\r\nimport '../User Management/UserManagement.css';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { addBatteryResults, updateBatteryResults } from '../../../Core/Service/BatteryResults-service';\r\n\r\nconst AddBatteryResultsModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n id: '',\r\n description: '',\r\n errors: {},\r\n fields: {}\r\n });\r\n\r\n const BatteryResultDetails = props.BatteryResultsDetails;\r\n\r\n useEffect(async () => {\r\n const BatteryResultData = BatteryResultDetails;\r\n if (BatteryResultDetails) {\r\n setState((st) => ({\r\n ...st,\r\n id: BatteryResultData.id,\r\n description: BatteryResultData.batteryTestResultName\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n let fields = state.fields;\r\n fields[name] = value;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value, fields: fields };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (handleValidation()) {\r\n if (BatteryResultDetails) {\r\n let res = await updateBatteryResults(state.id, state.description);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n } else {\r\n let res = await addBatteryResults(state.id, state.description);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n showToast(res.message);\r\n }\r\n }\r\n };\r\n\r\n const handleValidation = () => {\r\n let fields = state.fields;\r\n let errors = {};\r\n let formIsValid = true;\r\n if (!state.description) {\r\n formIsValid = false;\r\n errors['description'] = 'Battery Result Name cannot be empty';\r\n }\r\n if (state.description.length > 50) {\r\n formIsValid = false;\r\n errors['description'] = 'description cannot be larger than 50 character';\r\n }\r\n if (!state.id) {\r\n formIsValid = false;\r\n errors['id'] = 'Battery Result Code cannot be empty';\r\n }\r\n if (state.id.length > 1) {\r\n formIsValid = false;\r\n errors['id'] = 'ID cannot be larger than one character';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n return formIsValid;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {BatteryResultDetails ? Update Battery Results : Add Battery Result}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Battery Result Code\r\n \r\n \r\n {state.errors['id']}\r\n \r\n \r\n \r\n Battery Result Name\r\n \r\n \r\n {state.errors['description']}\r\n \r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddBatteryResultsModal;\r\n","import { IconButton } from '@material-ui/core';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { GridOverlay } from '@material-ui/data-grid';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { SecondaryButton } from '../../../Core/FormInput/index';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport AddBatteryResultsModal from './AddUpdateModal';\r\nimport { getBatteryResults } from '../../../Core/Service/BatteryResults-service';\r\n\r\nconst BatteryResults = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n BatteryResultsDetails: [],\r\n showDel: false\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n pullBatteryResultsAndUpdateState();\r\n }, []);\r\n\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n BatteryResultsDetails: params.value.row\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const Arrow = (params) => {\r\n return (\r\n <>\r\n \r\n handleUpdate(params)}>\r\n \r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: (params) => \r\n },\r\n {\r\n field: 'id', //batteryTestResultCode\r\n headerName: 'Battery Result Code',\r\n width: 200\r\n },\r\n {\r\n field: 'batteryTestResultName',\r\n headerName: 'Battery Result Name',\r\n flex: 1\r\n }\r\n ];\r\n\r\n const pullBatteryResultsAndUpdateState = async () => {\r\n let result = await getBatteryResults();\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n rows: result.data.list.map((w) => ({\r\n ...w,\r\n id: w.batteryTestResultCode,\r\n batteryTestResultName: w.batteryTestResultName\r\n })),\r\n show: false,\r\n showDel: false\r\n }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const handleAdd = (props) => {\r\n setState((st) => {\r\n return {\r\n ...st,\r\n show: true,\r\n BatteryResultsDetails: null\r\n };\r\n });\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No Battery Results Available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false }));\r\n refreshGrid && pullBatteryResultsAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Battery Result\r\n \r\n
\r\n {state.show ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Battery Results\r\n \r\n \r\n
\r\n
No Video available
\r\n \r\n );\r\n }\r\n\r\n const modalClosed = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false }));\r\n refreshGrid && pullVideosAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Add Video\r\n \r\n
\r\n {state.show ?
: null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Video Categories\r\n \r\n \r\n {VideoCategoryDetails.videoCategoryDescription}\r\n \r\n \r\n {state.showLoader &&
Loading Videos}\r\n
\r\n
No Video Categories available
\r\n \r\n );\r\n }\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => ({ ...st, show: false, showDel: false, VideoCategoryDetails: null, }));\r\n refreshGrid && pullVideoCategoriesAndUpdateState();\r\n };\r\n\r\n return (\r\n \r\n {\r\n state.showVideoList ?
:\r\n <>\r\n
\r\n \r\n Add Video Category\r\n \r\n
\r\n {state.show ? (\r\n
\r\n ) : null}\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Video Categories\r\n \r\n \r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n \r\n Hide Work Accomplished and Failure Reasons?\r\n \r\n handleClick('hideWorkAccomplishedAndFailureReasons', true)}\r\n onNoClick={() => handleClick('hideWorkAccomplishedAndFailureReasons', false)}\r\n />\r\n \r\n \r\n \r\n Show workflow steps as buttons?\r\n \r\n handleClick('workflowStepOptionsAsButtonGroup', true)}\r\n onNoClick={() => handleClick('workflowStepOptionsAsButtonGroup', false)}\r\n />\r\n \r\n \r\n \r\n Display Part Stock Status?\r\n \r\n handleClick('portalSettingDisplayPartStockStatus', true)}\r\n onNoClick={() => handleClick('portalSettingDisplayPartStockStatus', false)}\r\n />\r\n \r\n \r\n \r\n Workflow - unassigned technician job\r\n \r\n \r\n \r\n \r\n \r\n Grid Refresh Time (seconds)\r\n \r\n \r\n \r\n Tech Writeup Height\r\n \r\n \r\n \r\n \r\n \r\n Show Reg In Customer Rating Box?\r\n \r\n handleClick('showRegNumberInCustomerRatingBox', true)}\r\n onNoClick={() => handleClick('showRegNumberInCustomerRatingBox', false)}\r\n />\r\n \r\n \r\n \r\n Save New Document Versioning?\r\n \r\n handleClick('portalSettingSaveNewDoc', true)}\r\n onNoClick={() => handleClick('portalSettingSaveNewDoc', false)}\r\n />\r\n \r\n \r\n \r\n Show Tech Write Up Save Button?\r\n \r\n handleClick('portalSettingsShowTechWriteUpSaveBtn', true)}\r\n onNoClick={() => handleClick('portalSettingsShowTechWriteUpSaveBtn', false)}\r\n />\r\n \r\n \r\n \r\n Show Tech Write Up Submit Button?\r\n \r\n handleClick('portalSettingDisplaySubmitbutton', true)}\r\n onNoClick={() => handleClick('portalSettingDisplaySubmitbutton', false)}\r\n />\r\n \r\n \r\n \r\n Diagnostic Charges\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Quality Control\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n User Grid Columns\r\n \r\n
\r\n \r\n \r\n \r\n Action\r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n \r\n Model\r\n \r\n \r\n \r\n Customer Name\r\n \r\n \r\n \r\n Date Due In\r\n \r\n \r\n \r\n Date Due Out\r\n \r\n \r\n \r\n Return Reason\r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n Job Description\r\n \r\n \r\n \r\n Account\r\n \r\n \r\n \r\n Created By\r\n \r\n \r\n \r\n Assigned Date\r\n \r\n \r\n \r\n Time Taken\r\n \r\n \r\n \r\n Status\r\n \r\n \r\n \r\n Assigned Days\r\n \r\n \r\n \r\n Chassis Number\r\n \r\n \r\n \r\n Owning Operator\r\n \r\n \r\n \r\n Assigned User\r\n \r\n \r\n \r\n Customer Waiting\r\n \r\n \r\n \r\n Loan Vehicle\r\n \r\n \r\n \r\n WIP Age\r\n \r\n \r\n {/* \r\n Job Assigned User\r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n Workflow Button Visibility\r\n \r\n
\r\n \r\n \r\n \r\n Customer\r\n \r\n \r\n \r\n }\r\n label=\"Show Notes Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show History Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Save Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Save & Complete Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Return Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return History Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show All Documents Button?\"\r\n />\r\n \r\n\r\n \r\n \r\n Auditor\r\n \r\n \r\n \r\n }\r\n label=\"Show Notes Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show History Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Save Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Save & Complete Button?\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Return Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show Return History Button?\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Show All Documents Button?\"\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst CommunicatorModule = (props) => {\r\n const { state, OnColorSelect } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n High Priority Job Colour\r\n \r\n \r\n \r\n OnColorSelect(updatedColor, 'portalHighPriorityJobColour')}\r\n />\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst Settings = (props) => {\r\n const [state, setState] = useState({\r\n Title: '',\r\n CallUs: '',\r\n OpeningTimes: '',\r\n EmailUs: '',\r\n Diag: '',\r\n Qual: '',\r\n HeaderTextColorCode: '',\r\n HeaderBackgroundColorCode: '',\r\n MenubarTextColorCode: '',\r\n MenubarBackgroundColorCode: '',\r\n portalSettingTechnicianDeclaration: null,\r\n portalHighPriorityJobColour: '',\r\n productLogo: '',\r\n labelLogo: '',\r\n bannerLogo: '',\r\n navigationMenuActive: '',\r\n bannerImage: '',\r\n Id: '',\r\n workflowStepOptionsAsButtonGroup: false,\r\n hideWorkAccomplishedAndFailureReasons: false,\r\n portalSettingUnassignedTechnicianJobWorkflowID: null,\r\n isReload: new Date(),\r\n portalSettingSaveNewDoc: true,\r\n // portalSettingeWIPEnabled: false,\r\n // portalSettingReportingEnabled: false,\r\n portalSettingsShowTechWriteUpSaveBtn: false,\r\n portalSettingDisplaySubmitbutton: false\r\n });\r\n const { showToast, portalSettings } = useContext(AppContext);\r\n\r\n const history = useHistory();\r\n\r\n const OnColorSelect = (updatedColor, name) => {\r\n setState((state) => ({\r\n ...state,\r\n [name]: updatedColor.hex\r\n }));\r\n };\r\n const pullSettingsAndUpdateState = async () => {\r\n let res = await getPortalSettings();\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 Diag: data.portalSettingDiagnosticCharges || '',\r\n Qual: data.portalSettingQCMessage || '',\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 workflowStepOptionsAsButtonGroup: data.workflowStepOptionsAsButtonGroup,\r\n hideWorkAccomplishedAndFailureReasons: data.hideWorkAccomplishedAndFailureReasons || false,\r\n portalSettingSaveNewDoc: data.portalSettingSaveNewDoc,\r\n productLogo: data.portalSettingMainLogo,\r\n bannerLogo: data.portalSettingBanner,\r\n labelLogo: data.portalSettingAdditionalLogo,\r\n bannerImage: data.portalSettingBannerImage,\r\n portalSettingTechnicianDeclaration: data.portalSettingTechnicianDeclaration,\r\n portalSettingGridRefreshTime: data.portalSettingGridRefreshTime,\r\n portalSettingTechnWriteupHeight: data.portalSettingTechnWriteupHeight,\r\n portalSettingDisplayPartStockStatus: data.portalSettingDisplayPartStockStatus,\r\n\r\n portalSettingGridActionLabel: data.portalSettingGridActionLabel,\r\n portalSettingGridWIPNoLabel: data.portalSettingGridWIPNoLabel,\r\n portalSettingGridVehicleRegLabel: data.portalSettingGridVehicleRegLabel,\r\n portalSettingGridModelLabel: data.portalSettingGridModelLabel,\r\n portalSettingGridCustomerNameLabel: data.portalSettingGridCustomerNameLabel,\r\n portalSettingGridDateDueInLabel: data.portalSettingGridDateDueInLabel,\r\n portalSettingGridDateDueOutLabel: data.portalSettingGridDateDueOutLabel,\r\n portalSettingGridReturnReasonLabel: data.portalSettingGridReturnReasonLabel,\r\n portalSettingGridBranchLabel: data.portalSettingGridBranchLabel,\r\n portalSettingGridFranchiseLabel: data.portalSettingGridFranchiseLabel,\r\n portalSettingGridJobDescriptionLabel: data.portalSettingGridJobDescriptionLabel,\r\n portalSettingGridAccountLabel: data.portalSettingGridAccountLabel,\r\n portalSettingGridCreatedByLabel: data.portalSettingGridCreatedByLabel,\r\n portalSettingGridAssignedDateLabel: data.portalSettingGridAssignedDateLabel,\r\n portalSettingGridTimeTakenLabel: data.portalSettingGridTimeTakenLabel,\r\n portalSettingGridStatusLabel: data.portalSettingGridStatusLabel,\r\n portalSettingGridAssignedDaysLabel: data.portalSettingGridAssignedDaysLabel,\r\n portalSettingGridChassisNumberLabel: data.portalSettingGridChassisNumberLabel,\r\n portalSettingGridOwningOperatorLabel: data.portalSettingGridOwningOperatorLabel,\r\n // portalSettingGridJobAssignedUserLabel: data.portalSettingGridJobAssignedUserLabel,\r\n portalSettingUnassignedTechnicianJobWorkflowID: data.portalSettingUnassignedTechnicianJobWorkflowID,\r\n portalSettingGridCustomerWaitingLabel: data.portalSettingGridCustomerWaitingLabel,\r\n portalSettingGridCourtesyCarReqLabel: data.portalSettingGridCourtesyCarReqLabel,\r\n portalSettingGridJobAssignedUserLabel: data.portalSettingGridJobAssignedUserLabel,\r\n portalSettingTimeOut: data.portalSettingTimeOut,\r\n // portalSettingeWIPEnabled: data.portalSettingeWIPEnabled,\r\n // portalSettingReportingEnabled: data.portalSettingReportingEnabled\r\n portalSettingSpecialEquipmentEnabled: data.portalSettingSpecialEquipmentEnabled,\r\n showRegNumberInCustomerRatingBox: data.showRegNumberInCustomerRatingBox,\r\n portalHighPriorityJobColour: data.portalHighPriorityJobColour || '',\r\n canCustomerViewNotesButton: data.canCustomerViewNotesButton,\r\n canCustomerViewHistoryButton: data.canCustomerViewHistoryButton,\r\n canCustomerViewSaveButton: data.canCustomerViewSaveButton,\r\n canCustomerViewSaveAndCompleteButton: data.canCustomerViewSaveAndCompleteButton,\r\n canCustomerViewReturnButton: data.canCustomerViewReturnButton,\r\n canCustomerViewReturnReasonHistoryButton: data.canCustomerViewReturnReasonHistoryButton,\r\n canCustomerViewAllDocumentsButton: data.canCustomerViewAllDocumentsButton,\r\n canAuditorViewNotesButton: data.canAuditorViewNotesButton,\r\n canAuditorViewHistoryButton: data.canAuditorViewHistoryButton,\r\n canAuditorViewSaveButton: data.canAuditorViewSaveButton,\r\n canAuditorViewSaveAndCompleteButton: data.canAuditorViewSaveAndCompleteButton,\r\n canAuditorViewReturnButton: data.canAuditorViewReturnButton,\r\n canAuditorViewReturnReasonHistoryButton: data.canAuditorViewReturnReasonHistoryButton,\r\n canAuditorViewAllDocumentsButton: data.canAuditorViewAllDocumentsButton,\r\n isReload: new Date(),\r\n portalSettingsShowTechWriteUpSaveBtn: data.portalSettingsShowTechWriteUpSaveBtn,\r\n portalSettingDisplaySubmitbutton: data.portalSettingDisplaySubmitbutton,\r\n portalSettingGridWIPAgeLabel: data.portalSettingGridWIPAgeLabel\r\n }));\r\n }\r\n if (!res.success) {\r\n console.log(res.message);\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 // 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.portalSettingTechnicianDeclaration,\r\n PortalSettingQCMessage: state.Qual,\r\n PortalSettingDisplayTopNavCounters: state.navigationMenuActive,\r\n workflowStepOptionsAsButtonGroup: state.workflowStepOptionsAsButtonGroup,\r\n hideWorkAccomplishedAndFailureReasons: state.hideWorkAccomplishedAndFailureReasons,\r\n portalSettingSaveNewDoc: state.portalSettingSaveNewDoc,\r\n PortalSettingMainLogo: state.productLogo,\r\n PortalSettingBanner: state.bannerLogo,\r\n PortalSettingAdditionalLogo: state.labelLogo,\r\n PortalSettingDiagnosticCharges: state.Diag,\r\n portalSettingGridRefreshTime: state.portalSettingGridRefreshTime,\r\n portalSettingTechnWriteupHeight: state.portalSettingTechnWriteupHeight,\r\n portalSettingDisplayPartStockStatus: state.portalSettingDisplayPartStockStatus,\r\n portalHighPriorityJobColour: state.portalHighPriorityJobColour,\r\n portalSettingGridActionLabel: state.portalSettingGridActionLabel || '',\r\n portalSettingGridWIPNoLabel: state.portalSettingGridWIPNoLabel || '',\r\n portalSettingGridVehicleRegLabel: state.portalSettingGridVehicleRegLabel || '',\r\n portalSettingGridModelLabel: state.portalSettingGridModelLabel || '',\r\n portalSettingGridCustomerNameLabel: state.portalSettingGridCustomerNameLabel || '',\r\n portalSettingGridDateDueInLabel: state.portalSettingGridDateDueInLabel || '',\r\n portalSettingGridDateDueOutLabel: state.portalSettingGridDateDueOutLabel || '',\r\n portalSettingGridReturnReasonLabel: state.portalSettingGridReturnReasonLabel || '',\r\n portalSettingGridBranchLabel: state.portalSettingGridBranchLabel || '',\r\n portalSettingGridFranchiseLabel: state.portalSettingGridFranchiseLabel || '',\r\n portalSettingGridJobDescriptionLabel: state.portalSettingGridJobDescriptionLabel || '',\r\n portalSettingGridAccountLabel: state.portalSettingGridAccountLabel || '',\r\n portalSettingGridCreatedByLabel: state.portalSettingGridCreatedByLabel || '',\r\n portalSettingGridAssignedDateLabel: state.portalSettingGridAssignedDateLabel || '',\r\n portalSettingGridTimeTakenLabel: state.portalSettingGridTimeTakenLabel || '',\r\n portalSettingGridStatusLabel: state.portalSettingGridStatusLabel || '',\r\n portalSettingGridAssignedDaysLabel: state.portalSettingGridAssignedDaysLabel || '',\r\n portalSettingGridChassisNumberLabel: state.portalSettingGridChassisNumberLabel || '',\r\n portalSettingGridOwningOperatorLabel: state.portalSettingGridOwningOperatorLabel || '',\r\n portalSettingGridJobAssignedUserLabel: state.portalSettingGridJobAssignedUserLabel || '',\r\n portalSettingUnassignedTechnicianJobWorkflowID: state.portalSettingUnassignedTechnicianJobWorkflowID || '',\r\n portalSettingGridCustomerWaitingLabel: state.portalSettingGridCustomerWaitingLabel || '',\r\n portalSettingGridCourtesyCarReqLabel: state.portalSettingGridCourtesyCarReqLabel || '',\r\n portalSettingGridWIPAgeLabel: state.portalSettingGridWIPAgeLabel || '',\r\n // portalSettingGridJobAssignedUserLabel: state.portalSettingGridJobAssignedUserLabel || '',\r\n portalSettingTimeOut: state.portalSettingTimeOut || '',\r\n\r\n // portalSettingeWIPEnabled: state.portalSettingeWIPEnabled,\r\n // portalSettingReportingEnabled: state.portalSettingReportingEnabled\r\n portalSettingSpecialEquipmentEnabled: state.portalSettingSpecialEquipmentEnabled,\r\n showRegNumberInCustomerRatingBox: state.showRegNumberInCustomerRatingBox,\r\n\r\n canCustomerViewNotesButton: state.canCustomerViewNotesButton || false,\r\n canCustomerViewHistoryButton: state.canCustomerViewHistoryButton || false,\r\n canCustomerViewSaveButton: state.canCustomerViewSaveButton || false,\r\n canCustomerViewSaveAndCompleteButton: state.canCustomerViewSaveAndCompleteButton || false,\r\n canCustomerViewReturnButton: state.canCustomerViewReturnButton || false,\r\n canCustomerViewReturnReasonHistoryButton: state.canCustomerViewReturnReasonHistoryButton || false,\r\n canCustomerViewAllDocumentsButton: state.canCustomerViewAllDocumentsButton || false,\r\n canAuditorViewNotesButton: state.canAuditorViewNotesButton || false,\r\n canAuditorViewHistoryButton: state.canAuditorViewHistoryButton || false,\r\n canAuditorViewSaveButton: state.canAuditorViewSaveButton || false,\r\n canAuditorViewSaveAndCompleteButton: state.canAuditorViewSaveAndCompleteButton || false,\r\n canAuditorViewReturnButton: state.canAuditorViewReturnButton || false,\r\n canAuditorViewReturnReasonHistoryButton: state.canAuditorViewReturnReasonHistoryButton || false,\r\n canAuditorViewAllDocumentsButton: state.canAuditorViewAllDocumentsButton || false,\r\n portalSettingsShowTechWriteUpSaveBtn: state.portalSettingsShowTechWriteUpSaveBtn || false,\r\n portalSettingDisplaySubmitbutton: state.portalSettingDisplaySubmitbutton || false\r\n };\r\n\r\n let res = await addPortalSettings(data);\r\n if (res.success) {\r\n showToast('Portal setting saved successfully');\r\n props.history.push('/');\r\n } else {\r\n showToast(res.message);\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullSettingsAndUpdateState();\r\n let result1 = await getWorkflows();\r\n setState((st) => ({\r\n ...st,\r\n workFlowList: result1.data.map((m) => ({ id: m.id, name: m.workflowName }))\r\n }));\r\n }, []);\r\n\r\n const handleCkeditorstate = (name) => (event, editor) => {\r\n const data = editor.getData();\r\n setState((st) => ({ ...st, [name]: data }));\r\n };\r\n\r\n const handleCheckbox = (e, a) => {\r\n setState((st) => ({ ...st, [e.target.name]: a }));\r\n };\r\n\r\n const tabs = [\r\n ...(portalSettings.portalSettingeWIPEnabled\r\n ? [\r\n {\r\n label: 'eWIP',\r\n body: (\r\n \r\n )\r\n }\r\n ]\r\n : []),\r\n // ...(portalSettings.portalSettingReportingEnabled\r\n // ? [\r\n // {\r\n // label: 'Reporting',\r\n // body: <>\r\n // }\r\n // ]\r\n // : null)\r\n ...(!portalSettings.portalSettingCommunicatorEnabled\r\n ? [\r\n {\r\n label: 'Communicator',\r\n body: \r\n }\r\n ]\r\n : [])\r\n ];\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n Portal Title\r\n \r\n \r\n \r\n Call Us\r\n \r\n \r\n \r\n Opening Times\r\n \r\n \r\n \r\n Email Us\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Colors\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Header Text\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n HeaderTextColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Header Background\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n HeaderBackgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Menu bar Text\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n MenubarTextColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n\r\n \r\n \r\n \r\n Menu bar Background\r\n \r\n \r\n \r\n \r\n setState((state) => ({\r\n ...state,\r\n MenubarBackgroundColorCode: updatedColor.hex\r\n }))\r\n }\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Logos\r\n \r\n
\r\n \r\n \r\n Product Logo\r\n {state.productLogo ? (\r\n Remove Logo\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {'\\u{2800}'}\r\n {state.productLogo ? (\r\n \r\n ) : (\r\n Using default logo
\r\n )}\r\n \r\n \r\n \r\n Banner Image\r\n \r\n {state.bannerLogo ? (\r\n Remove Logo\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {'\\u{2800}'}\r\n {state.bannerLogo ? (\r\n \r\n ) : (\r\n Using default image
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n Settings\r\n \r\n
\r\n \r\n \r\n {/* \r\n \r\n Display Top Navigation Counter?\r\n \r\n handleClick('navigationMenuActive', true)}\r\n onNoClick={() => handleClick('navigationMenuActive', false)}\r\n />\r\n */}\r\n \r\n \r\n Session Timeout In Minutes\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 {\r\n props.history.push('/');\r\n }}\r\n >\r\n Cancel\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n File\r\n \r\n (typeof option === 'string' ? option : option.fileName)}\r\n renderInput={(params) => }\r\n />\r\n \r\n {state.errors[\"file\"]}\r\n \r\n \r\n \r\n Category\r\n \r\n \r\n {state.errors[\"category\"]}\r\n \r\n \r\n \r\n Key\r\n \r\n \r\n {state.errors[\"key\"]}\r\n \r\n \r\n \r\n Text\r\n \r\n \r\n {state.errors[\"text\"]}\r\n \r\n \r\n\r\n \r\n \r\n Translation Literals\r\n \r\n
\r\n \r\n\r\n \r\n Polish\r\n \r\n \r\n \r\n Romanian\r\n \r\n \r\n \r\n Hindi\r\n \r\n \r\n\r\n \r\n handleSubmit()}\r\n disabled={state.disableSubmit}\r\n >\r\n {state.editMode ? \"Save\" : \"Add\"}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {state.branchInvoice.map((m) => {\r\n return (\r\n <>\r\n \r\n {m.departmentDescription}\r\n \r\n \r\n \r\n Invoice Response Email\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditBranchScreen;\r\n","import React, { useMemo } from 'react';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from './../../internal/ReportsScreens/GijgoForReportsScreen/index';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport EditBranchScreen from './editBranch';\r\nimport { useState } from 'react';\r\nimport DialogComp from './../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n { field: 'shortName', sortable: false, title: `Short Name`, width: 150 },\r\n\r\n { field: 'name', sortable: false, title: `Branch` },\r\n { field: 'address1', sortable: false, title: `Address` },\r\n {\r\n field: 'town',\r\n sortable: false,\r\n title: `Town`,\r\n width: 150\r\n },\r\n\r\n { field: 'country', sortable: false, title: `County`, width: 120 }\r\n];\r\n\r\nconst baseUrl = 'Branches/GetAllBranches';\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Invoices', active: true },\r\n { name: `Branch`, active: true }\r\n];\r\n\r\nconst BranchesScreen = () => {\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n branchID: val.branchID\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const randerSortCol = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {record.shortName} ({record.branchCode})\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n let colSortName = col.find((m) => m.field === 'shortName');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n if (colSortName) {\r\n colSortName.renderer = randerSortCol;\r\n }\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n return (\r\n \r\n {state.showModal ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n ({\r\n records: res.data.list,\r\n records: res?.data?.list.map((p) => ({ ...p }))\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n // isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default BranchesScreen;\r\n","import { get, post } from './http-calls';\r\n\r\nexport let addInvoiceCustomer = async (data) => {\r\n let res = await post(`Customers/Add`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let editInvoiceCustomer = async (data) => {\r\n let res = await post(`Customers/Update`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let editInvoiceCustomerNote = async (data) => {\r\n let res = await post(`Customers/UpdateNote`, data, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let addBranchStatusEmails = async (data) => {\r\n let res = await post(`BranchStatusEmails`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport let editBranchStatusEmails = async (data) => {\r\n let res = await post(`BranchStatusEmails/update`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport let getInvoiceCustomerById = async (custId) => {\r\n let data = await get(`Customers?Id=${custId}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchStatusEmailsById = async (InvoiceStatusId, BranchID) => {\r\n let data = await get(`BranchStatusEmails/GetById?InvoiceStatusId=${InvoiceStatusId}&BranchID=${BranchID}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let deleteBranchStatusEmailsById = async (InvoiceStatusId, BranchID) => {\r\n let data = await post(`BranchStatusEmails/Delete?InvoiceStatusId=${InvoiceStatusId}&BranchID=${BranchID}`, {}, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchStatusEmailsDropdown = async () => {\r\n let data = await get(`BranchStatusEmails/ScreenDropDown`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getBranchInvoiceStatusDropdown = async (id) => {\r\n let data = await get(`Branches/GetBranchInvoiceStatus?BranchID=${id}`, { useAuthToken: true });\r\n return data;\r\n};\r\nexport let getDashboardForInvoice = async (data) => {\r\n let res = await get(`Invoices/Dashboard`, { useAuthToken: true });\r\n return res;\r\n};\r\nexport let getInvoicesEmailed = async (id) => {\r\n let data = await get(`Invoices/InvoicesEmailed/${id}`, { useAuthToken: true });\r\n return data;\r\n};\r\n","export let validatePostCode = (postCode) => {\r\n // const pattern = /(^[A-Z]{1,2}[0-9]{1,2})([0-9][A-Z]{2}$)/i;\r\n const pattern =\r\n /([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9][A-Za-z]?))))\\s?[0-9][A-Za-z]{2})/gm;\r\n return pattern.test(postCode);\r\n};\r\n\r\nexport let emailValidation = (emailValidation) => {\r\n const pattern =\r\n /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n\r\n if (!emailValidation || emailValidation == null) return false;\r\n\r\n if (emailValidation.includes(',')) {\r\n let multiEmailTest = true;\r\n emailValidation.split(',').map((email) => {\r\n if (!pattern.test(email)) multiEmailTest = false;\r\n });\r\n return multiEmailTest;\r\n } else {\r\n return pattern.test(emailValidation);\r\n }\r\n};\r\n\r\nexport let singleEmailValidation = (emailValidation) => {\r\n const pattern =\r\n /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return pattern.test(emailValidation);\r\n};\r\n","import { Checkbox, FormControlLabel, FormLabel, Grid, InputLabel, TextField } from '@material-ui/core';\r\nimport React, { useEffect, useState, useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton, SelectBox, TextBox } from '../../../../Core/FormInput';\r\nimport {\r\n addBranchStatusEmails,\r\n editBranchStatusEmails,\r\n getBranchInvoiceStatusDropdown,\r\n getBranchStatusEmailsById,\r\n getBranchStatusEmailsDropdown\r\n} from '../../../../Core/Service/InvoiceScreen-service';\r\nimport { singleEmailValidation } from '../../../../Core/Service/StaticService';\r\n\r\nconst EditBranchStatusEmail = (props) => {\r\n const [state, setState] = useState({\r\n branchInvoice: [],\r\n branchID: props.branchID,\r\n errors: {},\r\n resData: {},\r\n branchName: '',\r\n invoiceStatus: '',\r\n email: '',\r\n emailContext: '',\r\n isActive: false,\r\n branchList: [],\r\n invoiceStatusList: []\r\n });\r\n\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const pullData = async () => {\r\n let res = await getBranchStatusEmailsById(props.InvoiceStatusId, props.BranchID);\r\n setState((st) => ({\r\n ...st,\r\n branchName: res.data?.list?.table[0]?.branchName,\r\n invoiceStatus: res.data?.list?.table[0]?.invoiceStatus,\r\n email: res.data?.list?.table[0]?.email,\r\n emailContext: res.data?.list?.table[0]?.emailContext,\r\n isActive: res.data?.list?.table[0]?.isActive || false\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let dropDownRes = await getBranchStatusEmailsDropdown();\r\n setState((st) => ({\r\n ...st,\r\n branchList: dropDownRes.data.branchList,\r\n invoiceStatusList: dropDownRes.data.invoiceStatusList\r\n }));\r\n if (props.InvoiceStatusId && props.BranchID) {\r\n pullData();\r\n }\r\n }, [props.InvoiceStatusId, props.BranchID]);\r\n\r\n // useEffect(async () => {\r\n // if (state.branchID) {\r\n // let dropDownRes = await getBranchInvoiceStatusDropdown(state.branchID);\r\n // console.log(dropDownRes, 'dropDownRes');\r\n // }\r\n // }, [state.branchID]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[name] = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { email } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!singleEmailValidation(email)) {\r\n errors.email = 'Invalid Email Id';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n let data = {\r\n branchID: props.BranchID || state.branchID,\r\n invoiceStatusId: props.InvoiceStatusId || state.invoiceStatusId,\r\n isActive: state.isActive,\r\n email: state.email,\r\n emailContext: state.emailContext\r\n };\r\n if (props.InvoiceStatusId && props.BranchID) {\r\n let res = await editBranchStatusEmails(data);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n } else {\r\n let res = await addBranchStatusEmails(data);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n return (\r\n \r\n \r\n {props.InvoiceStatusId && props.BranchID ? (\r\n \r\n \r\n {`Branch Name`}\r\n \r\n \r\n {`${state.branchName}`}\r\n \r\n \r\n ) : (\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {props.InvoiceStatusId && props.BranchID ? (\r\n \r\n \r\n {`Invoice Status`}\r\n \r\n \r\n {`${state.invoiceStatus}`}\r\n \r\n \r\n ) : (\r\n \r\n \r\n Status\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n Email\r\n \r\n {state.errors['email']}\r\n \r\n \r\n Email Body\r\n \r\n {state.errors['emailContext']}\r\n \r\n {props.InvoiceStatusId && props.BranchID && (\r\n \r\n } label=\"Active?\" />\r\n \r\n )}\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default EditBranchStatusEmail;\r\n","import React, { useContext, useMemo } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\n\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n\r\nimport { useState } from 'react';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditBranchStatusEmail from './editBranchStatusEmail';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport DeleteForeverIcon from '@material-ui/icons/DeleteForever';\r\nimport ConfirmationModal from '../../../../Core/Controls/Dialog/ConfirmationModal';\r\nimport { deleteBranchStatusEmailsById } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport AppContext from '../../../../App/AppContext';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 90, filterable: false },\r\n { field: 'branchName', sortable: false, title: `Branch` },\r\n { field: 'invoiceStatus', sortable: false, title: `Status` },\r\n { field: 'email', sortable: false, title: `Email` },\r\n {\r\n field: 'emailAllow',\r\n sortable: false,\r\n title: `isActive`,\r\n width: 150\r\n }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Invoices', active: true },\r\n { name: `Branch Status Emails`, active: true }\r\n];\r\n\r\nconst baseUrl = 'BranchStatusEmails';\r\n\r\nconst BranchStatusEmail = () => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n branchID: val?.branchID,\r\n invoiceStatusId: val?.invoiceStatusId\r\n }));\r\n };\r\n const handleDelete = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showConfirmModal: true,\r\n branchID: val?.branchID,\r\n invoiceStatusId: val?.invoiceStatusId\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleEdit(record)}\r\n toolTipTitle=\"Edit Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n handleDelete(record)}\r\n toolTipTitle=\"Edit Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showModal = false;\r\n newSt.branchID = '';\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const deleteStatusEmailHandler = async () => {\r\n let res = await deleteBranchStatusEmailsById(state.invoiceStatusId, state.branchID);\r\n if (res.success) {\r\n showToast(`${res.message}`);\r\n confirmationModalClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n const confirmationModalClose = (flag) => {\r\n let newSt = {};\r\n newSt.showConfirmModal = false;\r\n newSt.branchID = '';\r\n if (flag) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n return (\r\n \r\n {state.showModal ? (\r\n
handleClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showConfirmModal ? (\r\n
confirmationModalClose(false)} maxWidth=\"sm\">\r\n confirmationModalClose(false)}\r\n />\r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n \r\n handleEdit()}\r\n toolTipTitle=\"Add Branch Status Emails\"\r\n >\r\n \r\n \r\n \r\n \r\n
({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n // isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch Parameters\r\n \r\n \r\n \r\n \r\n {/* \r\n Branch Parameters\r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Update\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n Branch Parameters\r\n \r\n \r\n \r\n */}\r\n \r\n \r\n Booking Email Received request\r\n \r\n \r\n \r\n Cash Customer Message\r\n \r\n \r\n\r\n \r\n \r\n \r\n Overdue Reminder Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Job Approved Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Awaiting Parts Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n High Priority Jobs Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n Feedback Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n Technical Assistance Required Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Workshop Vehicles Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Awaiting Collection Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n VOR Status Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Site Vehicle Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BranchParametersScreen;\r\n","import { Button, ButtonGroup, FormHelperText, Grid, InputLabel, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { Multiselect, SecondaryButton, SelectBox, TextBox } from '../../../../Core/FormInput';\r\nimport { getAdminDropDown, getNotificationGroupsById, postNotificationGroups } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { MultiselectWithoutCheckbox } from '../../../../Core/FormInput/MultiSelect';\r\nimport { useContext } from 'react';\r\nimport AppContext from './../../../../App/AppContext';\r\nimport { FormatColorResetRounded } from '@material-ui/icons';\r\n\r\nconst AddCustomerGroups = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n customerList: [],\r\n customerGroupSiteVehiclesOnly: false,\r\n sendSMSUpdates: false,\r\n sendEmailNotifaction: false,\r\n customerGroupList: [],\r\n frequencyList: [],\r\n frequency: '',\r\n errors: {},\r\n ocrDocumentsList: [],\r\n ocrDocumentSelectIDs: []\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n customerGroups: [],\r\n ocrDocuments: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAdminDropDown();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n frequencyList: res.data.frequency,\r\n customerGroupList: res.data.customerGroupList,\r\n ocrDocumentsList: res.data?.ocrDocuments\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.customerGroupID) {\r\n pullDataById(props.customerGroupID);\r\n }\r\n }, []);\r\n\r\n const pullDataById = async (val) => {\r\n let res = await getNotificationGroupsById(val);\r\n if (res.success) {\r\n let data = res.data.list[0];\r\n let customerSelectIDs = res.data.customerSelectIDs;\r\n let ocrDocumentSelectIDs = res.data.ocrDocumentSelectIDs;\r\n setState((st) => ({\r\n ...st,\r\n customerGroupEmail: data.customerGroupEmail,\r\n customerGroupID: data.customerGroupID,\r\n customerGroupName: data.customerGroupName,\r\n customerGroupSiteVehiclesOnly: data.customerGroupSiteVehiclesOnly,\r\n feedbackEmailAddress: data.feedbackEmailAddress,\r\n frequency: data.frequency,\r\n sendEmailNotifaction: data.sendEmailNotifaction,\r\n sendSMSUpdates: data.sendSMSUpdates,\r\n sMSNumber: data.smsNumber,\r\n vORTimer: data.vorTimer,\r\n customerSelectIDs: customerSelectIDs,\r\n ocrDocumentSelectIDs: ocrDocumentSelectIDs\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (state.customerSelectIDs && state.customerGroupList.length > 0) {\r\n setSelectedData((st) => ({\r\n ...st,\r\n customerGroups: state.customerGroupList.filter((w) => state.customerSelectIDs.indexOf(w.id) > -1)\r\n }));\r\n }\r\n }, [state.customerSelectIDs, state.customerGroupList]);\r\n\r\n useEffect(() => {\r\n if (state.ocrDocumentSelectIDs && state.ocrDocumentsList.length > 0) {\r\n setSelectedData((st) => ({\r\n ...st,\r\n ocrDocuments: state.ocrDocumentsList.filter((w) => state.ocrDocumentSelectIDs.indexOf(w.id) > -1)\r\n }));\r\n }\r\n }, [state.ocrDocumentSelectIDs, state.ocrDocumentsList]);\r\n\r\n const handleYesNo = (name, val) => {\r\n setState((st) => ({ ...st, [name]: val }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const AutoWorkAccomplish = (event, value) => {\r\n setSelectedData((st) => ({\r\n ...st,\r\n customerGroups: value\r\n }));\r\n setState((st) => {\r\n const nst = { ...st, customerSelectIDs: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const AutoOcrDocuments = (event, value) => {\r\n setSelectedData((st) => ({\r\n ...st,\r\n ocrDocuments: value\r\n }));\r\n setState((st) => {\r\n const nst = { ...st, ocrDocumentSelectIDs: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n const validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n\r\n let { customerGroupName, customerGroupEmail } = state;\r\n\r\n if (!customerGroupName) {\r\n isValid = false;\r\n errors.name = 'Notification Group is required';\r\n }\r\n if (!customerGroupEmail) {\r\n isValid = false;\r\n errors.email = 'Emails is required';\r\n }\r\n if (selectedData.customerGroups.length == 0) {\r\n isValid = false;\r\n errors.customer = 'Customers is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handlesubmit = async () => {\r\n if (validation()) {\r\n let data = {\r\n customerGroupID: props.customerGroupID || null,\r\n customerGroupName: state.customerGroupName || '',\r\n customerGroupEmail: state.customerGroupEmail || '',\r\n customerGroupSiteVehiclesOnly: state.customerGroupSiteVehiclesOnly || false,\r\n sendEmailNotifaction: state.sendEmailNotifaction || false,\r\n vORTimer: state.vORTimer || '',\r\n frequency: state.frequency || '',\r\n feedbackEmailAddress: state.feedbackEmailAddress || '',\r\n sendSMSUpdates: state.sendSMSUpdates || false,\r\n sMSNumber: state.sMSNumber || '',\r\n customerSelectIDs: state.customerSelectIDs || [],\r\n ocrDocumentSelectIDs: state.ocrDocumentSelectIDs || []\r\n };\r\n\r\n let res = await postNotificationGroups(data);\r\n if (res.success) {\r\n showToast(`Customer Group ${props.customerGroupID ? 'Updated' : 'Added'} successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Customer Group Failed to ${props.customerGroupID ? 'Update' : 'Add'}`);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Notification Group\r\n \r\n \r\n {state.errors.name}\r\n \r\n \r\n \r\n Email Updates\r\n \r\n \r\n \r\n Send Notification?\r\n
\r\n \r\n handleYesNo('sendEmailNotifaction', true)}\r\n >\r\n Yes\r\n \r\n handleYesNo('sendEmailNotifaction', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n\r\n \r\n Site Vehicles Only?\r\n
\r\n \r\n handleYesNo('customerGroupSiteVehiclesOnly', true)}\r\n >\r\n Yes\r\n \r\n handleYesNo('customerGroupSiteVehiclesOnly', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n Frequency\r\n \r\n \r\n \r\n VOR Alert (Hours)\r\n \r\n \r\n \r\n \r\n Emails\r\n \r\n \r\n {state.errors.email}\r\n \r\n \r\n Feedback Email \r\n \r\n \r\n \r\n \r\n \r\n \r\n SMS Updates\r\n \r\n\r\n \r\n \r\n Send SMS Updates?\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Mobile\r\n \r\n \r\n \r\n \r\n Customers\r\n \r\n \r\n {state.errors.customer}\r\n \r\n \r\n \r\n Documents\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.customerGroupID ? 'Update' : 'Submit'}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddCustomerGroups;\r\n","import { Container, FormLabel, Grid, Typography, InputLabel, ButtonGroup, Button } from '@material-ui/core';\r\nimport React from 'react';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\n\r\nimport { getCommunicatorSmsStatus, postCommunicatorSms } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect, useMemo } from 'react';\r\nimport { useState } from 'react';\r\nimport { useContext } from 'react';\r\n// import AppContext from '../../../../App/AppContext';\r\n// import BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton, SquareButton } from './../../../../Core/FormInput/AppButton';\r\nimport SelectBox from './../../../../Core/FormInput/SelectBox';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\n// import { Typography } from '@material-ui/core/Typography';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddCustomerGroups from './addCustomergroup';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\n\r\nconst baseColumns = [\r\n { title: 'Action', field: 'action', width: '5%', filterable: false },\r\n { title: 'Group Name', field: 'customerGroupName', width: '15%', sortable: true },\r\n\r\n {\r\n title: 'Group Email',\r\n field: 'customerGroupEmail',\r\n width: '75%',\r\n sortable: true\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Communicator', active: true },\r\n { name: 'Notifications Groups', active: true }\r\n];\r\n\r\nconst baseUrl = `CustomerGroups`;\r\n\r\nconst AdminVehicleNotification = () => {\r\n const [state, setState] = useState({\r\n showAddCustGroup: false\r\n });\r\n\r\n const handleAddCust = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddCustGroup: true,\r\n customerGroupID: val.customerGroupID,\r\n customerGroupName: val.customerGroupName,\r\n customerGroupEmail: val.customerGroupEmail\r\n }));\r\n };\r\n\r\n const handleClose = (res) => () => {\r\n setState((st) => ({\r\n ...st,\r\n showAddCustGroup: false,\r\n isReload: res ? new Date() : ''\r\n }));\r\n };\r\n\r\n const handleEdit = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleAddCust(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let tempColumn = [...baseColumns];\r\n\r\n let actionCol = tempColumn.find((m) => m.field === 'action');\r\n if (actionCol) {\r\n actionCol.renderer = handleEdit;\r\n }\r\n return tempColumn;\r\n }, []);\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n + Add Customer Group\r\n \r\n\r\n \r\n ({\r\n records: res.data?.list,\r\n total: res.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
\r\n\r\n {state.showAddCustGroup ? (\r\n
\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Status\r\n \r\n \r\n Include In Site Vehicles\r\n \r\n \r\n Include In VOR Vehicles\r\n \r\n \r\n Send Text\r\n \r\n \r\n SMS Text\r\n \r\n \r\n Action\r\n \r\n \r\n \r\n \r\n {state.showLoader ? null : state.updateSmsList.length > 0 ? (\r\n state.updateSmsList.map((m) => (\r\n \r\n \r\n {m.vehicleStatusDescription}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {m.smsTextMessage ? {m.smsTextMessage} : null} */}\r\n \r\n \r\n handleSubmit(m)} disabled={(!m.smsText && m.sendSMSUpdate) || !m.validation}>\r\n Update\r\n \r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n \r\n \r\n No Data Available
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Ticker Message\r\n \r\n \r\n {state.messages}\r\n \r\n \r\n \r\n {props.id ? 'Update' : 'Submit'}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddEditTicker;\r\n","import React, { useContext } from 'react';\r\nimport DataGridComp from '../../../Core/Grid';\r\nimport { getTickers, getTickerDelete } from '../../../Core/Service/KPI_message-service';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\nimport AddEditTicker from './addEditTicker';\r\nimport { Grid, Tooltip } from '@material-ui/core';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\nimport AppContext from '../../../App/AppContext';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\n\r\nconst KipMessages = () => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n tickerList: [],\r\n showAddUpdate: false\r\n });\r\n\r\n const handleAddUpdate = (val) => {\r\n setState((st) => ({ ...st, showAddUpdate: true, id: val.id }));\r\n };\r\n\r\n const closeAddUpdate = (res) => {\r\n setState((st) => ({ ...st, showAddUpdate: false, id: '' }));\r\n res && pulldata();\r\n };\r\n\r\n const handledelete = async (val) => {\r\n let data = { id: val.id };\r\n let res = await getTickerDelete(val.id, data);\r\n if (res.success) {\r\n showToast(`Ticker Message Deleted successfully`);\r\n pulldata();\r\n } else {\r\n showToast(`Ticker Message Failed to Delete`);\r\n }\r\n };\r\n\r\n const handleEdit = (val) => {\r\n return (\r\n \r\n \r\n \r\n handleAddUpdate(val.row)} />\r\n \r\n \r\n \r\n \r\n handledelete(val.row)} />\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n headerName: 'Action',\r\n sortable: false,\r\n width: 120,\r\n renderCell: handleEdit\r\n },\r\n {\r\n field: 'id',\r\n headerName: 'TICKER ID',\r\n width: 120,\r\n sortable: false,\r\n renderCell: (params) => {\r\n {params}
;\r\n }\r\n },\r\n {\r\n field: 'message',\r\n headerName: 'TICKER MESSAGE',\r\n flex: 1,\r\n renderCell: (params) => {\r\n {params}
;\r\n }\r\n }\r\n ];\r\n const pulldata = async () => {\r\n let res = await getTickers();\r\n if (res.success) {\r\n setState((st) => ({ ...st, tickerList: res.data.list }));\r\n }\r\n };\r\n useEffect(() => {\r\n pulldata();\r\n }, []);\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Ticker Messages', active: true }\r\n ];\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n + Add Ticker Message\r\n \r\n \r\n \r\n
\r\n {state.showAddUpdate ? (\r\n
closeAddUpdate(false)} title={!state.id ? `Add Ticker Message` : 'Update Ticker Message'} fullWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n Result List Description\r\n \r\n \r\n {state.errors['QCResultListDescription']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default EditResultList;\r\n","import { FormLabel, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useContext, useState } from 'react';\r\nimport { SketchPicker } from 'react-color';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { CustomColorPicker, DefaultButton, SecondaryButton, TextBox, YesNoButton } from '../../../../Core/FormInput';\r\nimport { addUpdateResultListOption } from '../../../../Core/Service/qc-service';\r\n\r\nconst EditResultOption = (props) => {\r\n const [state, setState] = useState({\r\n QCResultOptionID: props?.focusedRow?.qcResultOptionID ? props?.focusedRow?.qcResultOptionID : null,\r\n QCResultOptionDescription: props?.focusedRow?.qcResultOptionDescription ? props?.focusedRow?.qcResultOptionDescription : '',\r\n QCResultOptionActive: props?.focusedRow?.qcResultOptionActive ? props?.focusedRow?.qcResultOptionActive : true,\r\n QCResultOptionBackgroundColour: props?.focusedRow?.qcResultOptionBackgroundColour ? props?.focusedRow?.qcResultOptionBackgroundColour : '#ff0000',\r\n QCResultOptionForegroundColour: props?.focusedRow?.qcResultOptionForegroundColour ? props?.focusedRow?.qcResultOptionForegroundColour : '#ff0000',\r\n QCResultOptionDefectRequired: props.focusedRow?.qcResultOptionDefectRequired || false,\r\n QCResultOptionIsFailed: props.focusedRow?.qcResultOptionIsFailed || false,\r\n\r\n errors: []\r\n });\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const onColorChange = (updatedColor, name) => {\r\n if (updatedColor) {\r\n setState((state) => ({\r\n ...state,\r\n [name]: updatedColor?.hex\r\n }));\r\n }\r\n };\r\n\r\n const validations = () => {\r\n const { QCResultOptionDescription } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (QCResultOptionDescription == null || QCResultOptionDescription == '') {\r\n errors.QCResultOptionDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n QCResultOptionID: state.QCResultOptionID ? state.QCResultOptionID : null,\r\n QCResultOptionDescription: state.QCResultOptionDescription,\r\n QCResultOptionActive: state.QCResultOptionActive ? state.QCResultOptionActive : true,\r\n QCResultOptionListID: props.QCResultListID,\r\n QCResultOptionBackgroundColour: state.QCResultOptionBackgroundColour ? state.QCResultOptionBackgroundColour : '',\r\n QCResultOptionForegroundColour: state.QCResultOptionForegroundColour ? state.QCResultOptionForegroundColour : '',\r\n QCResultOptionDefectRequired: state.QCResultOptionDefectRequired,\r\n QCResultOptionIsFailed: state.QCResultOptionIsFailed\r\n };\r\n let res = await addUpdateResultListOption(data);\r\n if (!res.success) {\r\n console.error(res);\r\n props.onClose(false);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('QC Results List option updated successfully');\r\n props.onClose(true);\r\n }\r\n }\r\n };\r\n\r\n const handleClick = (compon, val) => {\r\n setState((st) => ({\r\n ...st,\r\n [compon]: val\r\n }));\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Results List Option Description\r\n \r\n \r\n {state.errors['QCResultOptionDescription']}\r\n \r\n\r\n \r\n Background Colour\r\n onColorChange(m, 'QCResultOptionBackgroundColour')}\r\n />\r\n \r\n \r\n Foreground Colour\r\n onColorChange(m, 'QCResultOptionForegroundColour')}\r\n />\r\n \r\n \r\n \r\n \r\n Is Required?\r\n \r\n \r\n handleClick('QCResultOptionDefectRequired', true)}\r\n onNoClick={() => handleClick('QCResultOptionDefectRequired', false)}\r\n />\r\n \r\n \r\n \r\n \r\n Is Failed?\r\n \r\n \r\n handleClick('QCResultOptionIsFailed', true)}\r\n onNoClick={() => handleClick('QCResultOptionIsFailed', false)}\r\n />\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n handleClick('QCResultOptionActive', true)}\r\n onNoClick={() => handleClick('QCResultOptionActive', false)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default EditResultOption;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditResultOption from './editResultOption';\r\n\r\nconst ResultListOptions = (props) => {\r\n const [state, setState] = useState({\r\n QCResultListID: props.QCResultListID,\r\n showAddEdit: false,\r\n\r\n focusedRow: null\r\n });\r\n\r\n useEffect(async () => {}, []);\r\n\r\n const handelColseModal = (val) => {\r\n console.log(val, 'valllllllllll');\r\n let newSt = {};\r\n if (val) newSt.isReload = new Date();\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: false,\r\n ...newSt\r\n }));\r\n };\r\n const handleAddEditModal = (val, row) => {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: true,\r\n focusedRow: row\r\n }));\r\n };\r\n const baseUrl = `QC/Options/${state.QCResultListID}`;\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '3%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcResultOptionID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcResultOptionDescription',\r\n title: `Description`,\r\n width: '30%'\r\n },\r\n {\r\n field: 'qcResultOptionBackgroundColour',\r\n title: `Foreground`,\r\n width: '15%'\r\n },\r\n {\r\n field: 'qcResultOptionForegroundColour',\r\n title: `Background`,\r\n width: '15%'\r\n },\r\n {\r\n field: 'qcResultOptionActive',\r\n title: `Active`,\r\n width: '10%'\r\n }\r\n ];\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Results List Options`, active: true }\r\n ];\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEditModal(true, record);\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n handleAddEditModal(true, null)} className=\"btnadd\">\r\n Add Results List Option\r\n \r\n \r\n \r\n\r\n \r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n handelColseModal(false)}\r\n fullWidth\r\n height=\"460px\"\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default ResultListOptions;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit, List } from '@material-ui/icons';\r\nimport React, { useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport EditResultList from './editResultList';\r\nimport ResultListOptions from './resultListOptions';\r\n\r\nconst QCResultsList = () => {\r\n const [state, setState] = useState({\r\n showAddEdit: false,\r\n showOptions: false,\r\n\r\n focusedRow: null\r\n });\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '10%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcResultListID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcResultListDescription',\r\n title: `Description`,\r\n width: '90%'\r\n },\r\n ];\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Results Lists`, active: true }\r\n ];\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n {\r\n handleOptions()\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n
\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n const handleOptions = () => {\r\n setState((st) => ({\r\n ...st,\r\n showOptions: true\r\n }))\r\n }\r\n\r\n const baseUrl = 'QC/Lists';\r\n\r\n return (\r\n \r\n {state.showOptions ?\r\n <>\r\n \r\n \r\n :\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Results List\r\n \r\n \r\n \r\n\r\n \r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n handleAddEdit(false)} fullWidth>\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n }\r\n
\r\n );\r\n}\r\nexport default QCResultsList;\r\n","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { DefaultButton, SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addUpdateQCItem, getDropdown } from '../../../../Core/Service/qc-service';\r\n\r\nconst AddEditItem = (props) => {\r\n const [state, setState] = useState({\r\n QCItemID: props.focusedRow?.qcItemID ? props.focusedRow?.qcItemID : null,\r\n QCItemVehicleTypeID: props.QCItemVehicleTypeID,\r\n QCItemTitle: props.focusedRow?.qcItemTitle ? props.focusedRow?.qcItemTitle : '',\r\n QCItemSequence: props.focusedRow?.qcItemSequence ? props.focusedRow?.qcItemSequence : 0,\r\n QCItemActive: props.focusedRow?.qcItemActive ? props.focusedRow?.qcItemActive : true,\r\n QCItemResultListID: props.focusedRow?.qcItemResultListID ? props.focusedRow?.qcItemResultListID : null,\r\n\r\n QCItemResultLists: [],\r\n errors: []\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { QCItemID, QCItemVehicleTypeID, QCItemTitle, QCItemSequence, QCItemActive, QCItemResultListID } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (QCItemTitle == null || QCItemTitle == '') {\r\n errors.QCItemTitle = 'QC Item Title field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n QCItemID: state.QCItemID || null,\r\n QCItemVehicleTypeID: state.QCItemVehicleTypeID,\r\n QCItemTitle: state.QCItemTitle,\r\n QCItemSequence: state.QCItemSequence,\r\n QCItemActive: state.QCItemActive,\r\n QCItemResultListID: state.QCItemResultListID\r\n };\r\n let res = await addUpdateQCItem(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('QC Item updated successfully');\r\n props.onClose();\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClick = (compon, val) => {\r\n setState((st) => ({\r\n ...st,\r\n [compon]: val\r\n }));\r\n };\r\n\r\n const pullDropdown = async () => {\r\n let result = await getDropdown();\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n QCItemResultLists: result.data,\r\n QCItemResultListID: st.QCItemResultListID ? st.QCItemResultListID : result.data[0].qcResultListID\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullDropdown();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n QC Item Title\r\n \r\n \r\n {state.errors['QCItemTitle']}\r\n \r\n\r\n \r\n Sequence\r\n \r\n \r\n\r\n \r\n QC Result List\r\n \r\n {state.QCItemResultLists?.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n handleClick('QCItemActive', true)}\r\n >\r\n Yes\r\n \r\n \r\n \r\n handleClick('QCItemActive', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditItem;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport { getFranchiseHeaders } from '../../../../Core/Service/qc-service';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport AddEditItem from './AddEditItem';\r\n\r\nconst QCItems = () => {\r\n const [state, setState] = useState({\r\n franchiseHeaders: [],\r\n\r\n focusedFranchise: {},\r\n focusedQCItemID: null,\r\n showAddEdit: false\r\n });\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'QC', active: true },\r\n { name: `Items`, active: true }\r\n ];\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '3%',\r\n filterable: false\r\n },\r\n {\r\n field: 'qcItemID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'qcItemTitle',\r\n title: `Title`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcResultListDescription',\r\n title: `List`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcItemSequence',\r\n title: `Sequence`,\r\n width: '22%'\r\n },\r\n {\r\n field: 'qcItemActive',\r\n title: `Active`,\r\n width: '22%'\r\n },\r\n ];\r\n\r\n const pullFranchiseHeaders = async () => {\r\n let result = await getFranchiseHeaders();\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n franchiseHeaders: result.data,\r\n focusedFranchise: result.data[0]\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullFranchiseHeaders();\r\n }, []);\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n let baseUrl = `qc/Items/${state.focusedFranchise.letterIdentifier}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add QC Item\r\n \r\n \r\n \r\n\r\n
\r\n {state.franchiseHeaders.map((franchise) => {\r\n return (\r\n \r\n setState((st) => ({ ...st, focusedFranchise: franchise }))}\r\n >\r\n {franchise.franchiseName}\r\n \r\n \r\n )\r\n })}\r\n \r\n\r\n {state.focusedFranchise ?\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n : null}\r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n \r\n ) : null}\r\n \r\n ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticFault;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { getDiagnosticFaultByID, postDiagnosticFaults } from '../../../../Core/Service/diagnosticFaults-service';\r\nimport { Grid, InputLabel, Typography, FormLabel } from '@material-ui/core';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport {\r\n getDiagnosticEngineFaultsByID,\r\n getDiagnosticLocationsByID,\r\n getDiagnosticNoiseApparentsByID,\r\n postDiagnosticEngineFaults,\r\n postDiagnosticLocations,\r\n postDiagnosticNoiseApparents\r\n} from '../../../../Core/Service/diagnosticFaults-service';\r\n\r\nconst DiagnosticCommonModal = (props) => {\r\n const [state, setState] = useState({\r\n name: '',\r\n id: props.id,\r\n errors: {}\r\n });\r\n\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n let res = {};\r\n if (props.id) {\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n res = await getDiagnosticEngineFaultsByID(props.id);\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n res = await getDiagnosticNoiseApparentsByID(props.id);\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n res = await getDiagnosticLocationsByID(props.id);\r\n } else {\r\n res = {};\r\n }\r\n if (res.success) {\r\n let data = res.data?.list?.table[0];\r\n setState((st) => ({\r\n ...st,\r\n name: data.name,\r\n id: data.id\r\n }));\r\n }\r\n }\r\n }, []);\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n\r\n const validation = () => {\r\n let errors = {};\r\n let isValid = true;\r\n\r\n let { name } = state;\r\n\r\n if (!name) {\r\n isValid = false;\r\n errors.name = 'Name is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n errors: errors\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n let res = {};\r\n let data = {\r\n id: state.id,\r\n name: state.name\r\n };\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n res = await postDiagnosticEngineFaults(data);\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n res = await postDiagnosticNoiseApparents(data);\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n res = await postDiagnosticLocations(data);\r\n } else {\r\n res = {};\r\n }\r\n if (res.success) {\r\n showToast(`${props.screenSortName} ${state.id ? 'Updated' : 'Added'} Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Name\r\n \r\n \r\n {state.errors?.name}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticCommonModal;\r\n","import React, { useMemo } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen/index';\r\nimport { Grid, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n// import DiagnosticFaultsModal from '../DiagnosticFaultsModal';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { useEffect } from 'react';\r\nimport DiagnosticCommonModal from './addEditModal';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n { field: 'name', sortable: false, title: `Name` }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Diagnostic Sheets', active: true },\r\n { name: `${path}`, active: true }\r\n];\r\n\r\nconst DiagnosticEngineFaults = (props) => {\r\n const [state, setState] = useState({\r\n showModal: false\r\n });\r\n\r\n useEffect(() => {\r\n let url = '';\r\n if (props.screenName == 'Diagnostic Engine Faults') {\r\n url = 'DiagnosticEngineFaults';\r\n } else if (props.screenName == 'Diagnostic Noise Apparents') {\r\n url = 'DiagnosticNoiseApparents';\r\n } else if (props.screenName == 'Diagnostic Locations') {\r\n url = 'DiagnosticLocations';\r\n } else {\r\n url = '';\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n url: url,\r\n screenSortName: props.screenName.substr(props.screenName.indexOf(' ') + 1)\r\n }));\r\n }, [props.screenName]);\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n id: val?.id\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n + Add {`${state.screenSortName}`}\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={state.url}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default DiagnosticEngineFaults;\r\n","import { get, post, put } from './http-calls';\r\n\r\nexport const addUpdateVorType = async (data) => {\r\n let res = await post(`VOR/VORTypes`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const addUpdateVorReason = async (data) => {\r\n let res = await post(`VOR/VORReasons`, data, { useAuthToken: true });\r\n return res;\r\n};","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport { DefaultButton } from '../../../Core/FormInput';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { addUpdateVorType } from '../../../Core/Service/vor-service';\r\n\r\nconst AddEditVorType = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n\r\n vorTypeDescription: props.focusedRow?.vorTypeDescription ? props.focusedRow.vorTypeDescription : '',\r\n vorTypeCode: props.focusedRow?.vorTypeCode ? props.focusedRow.vorTypeCode : '',\r\n vorTypeID: props.focusedRow?.vorTypeID ? props.focusedRow.vorTypeID : null\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }));\r\n };\r\n\r\n const validations = () => {\r\n const { vorTypeDescription, vorTypeCode } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (vorTypeDescription == null || vorTypeDescription == '') {\r\n errors.vorTypeDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n if (vorTypeCode == null || vorTypeCode == '') {\r\n errors.vorTypeCode = 'Code field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n vorTypeDescription: state.vorTypeDescription,\r\n vorTypeCode: state.vorTypeCode,\r\n vorTypeID: state.vorTypeID\r\n };\r\n let res = await addUpdateVorType(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast('Error occured.');\r\n } else {\r\n showToast('Vor type updated successfully');\r\n props.onClose();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n {state.errors['vorTypeDescription']}\r\n \r\n\r\n \r\n \r\n Code\r\n \r\n \r\n {state.errors['vorTypeCode']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nexport default AddEditVorType;\r\n","import { FormLabel, Grid, MenuItem } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport { DefaultButton } from '../../../Core/FormInput';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { addUpdateVorReason, addUpdateVorType } from '../../../Core/Service/vor-service';\r\n\r\nconst AddEditVorReason = (props) => {\r\n const [state, setState] = useState({\r\n errors: {},\r\n\r\n vorReasonDescription: props.focusedRow?.vorReasonDescription ? props.focusedRow.vorReasonDescription : '',\r\n vorReasonID: props.focusedRow?.vorReasonID ? props.focusedRow.vorReasonID : null\r\n });\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const handleFieldChange = (e) => {\r\n const name = e.target.name;\r\n const val = e.target.value;\r\n\r\n setState((st) => ({\r\n ...st,\r\n [name]: val\r\n }))\r\n }\r\n\r\n const validations = () => {\r\n const {\r\n vorReasonDescription\r\n } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (vorReasonDescription == null || vorReasonDescription == '') {\r\n errors.vorReasonDescription = 'Description field is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n const data = {\r\n vorReasonDescription: state.vorReasonDescription,\r\n VORReasonTypeID: props.VORReasonTypeID,\r\n vorReasonID: state.vorReasonID,\r\n }\r\n let res = await addUpdateVorReason(data);\r\n if (!res.success) {\r\n console.error(res);\r\n showToast(\"Error occured.\")\r\n } else {\r\n showToast(\"Vor reason updated successfully\")\r\n props.onClose()\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Description\r\n \r\n {state.errors['vorReasonDescription']}\r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default AddEditVorReason;\r\n","import { Grid } from '@material-ui/core';\r\nimport { Edit } from '@material-ui/icons';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../Core/FormInput';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport AddEditVorReason from './AddEditVorReason';\r\n\r\nconst VorReasons = (props) => {\r\n const [state, setState] = useState({\r\n showAddEdit: false\r\n });\r\n\r\n const crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'VOR', active: true },\r\n { name: `VOR Reasons`, active: true },\r\n { name: `${props.focusedRow.vorTypeDescription}`, active: true }\r\n ];\r\n\r\n const baseColumns = [\r\n {\r\n field: 'action',\r\n sortable: false,\r\n title: `Action`,\r\n width: '5%',\r\n filterable: false\r\n },\r\n {\r\n field: 'vorReasonID',\r\n title: `ID`,\r\n hidden: true\r\n },\r\n {\r\n field: 'vorReasonDescription',\r\n title: `Description`,\r\n },\r\n ];\r\n\r\n useEffect(() => {\r\n\r\n }, []);\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n handleAddEdit(true)\r\n setState((st) => ({\r\n ...st,\r\n focusedRow: record\r\n }))\r\n }}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const handleAddEdit = (val) => {\r\n if (val) {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n isReload: false\r\n }))\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n showAddEdit: val,\r\n focusedRow: null,\r\n isReload: true\r\n }))\r\n }\r\n }\r\n\r\n let baseUrl = `VOR/VORReasons/${props.focusedRow.vorTypeID}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Vor Reason\r\n \r\n \r\n \r\n\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n \r\n {state.showVorReasons ?\r\n <>\r\n
\r\n \r\n :\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n handleAddEdit(true)}\r\n className=\"btnadd\"\r\n >\r\n Add Vor Type\r\n \r\n \r\n \r\n\r\n
\r\n \r\n ({\r\n records: res?.data,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n\r\n {state.showAddEdit ? (\r\n
handleAddEdit(false)}\r\n fullWidth\r\n >\r\n handleAddEdit(false)} />\r\n \r\n ) : null}\r\n }\r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n Subject\r\n \r\n \r\n \r\n Body\r\n
\r\n\r\n \r\n \r\n \r\n } label=\"Send Email?\" />\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddUpdateBookingStatus;\r\n","import { Grid } from '@material-ui/core';\r\nimport React, { useMemo, useState } from 'react';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../../internal/ReportsScreens/GijgoForReportsScreen';\r\n\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddUpdateBookingStatus from './addUpdateBooking';\r\nimport DialogComp from './../../../../Core/Modal/dialogModal';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: ``, width: 70, filterable: false },\r\n\r\n { field: 'description', sortable: false, title: `Description` },\r\n { field: 'subject', sortable: false, title: `Subject`, width: 200 },\r\n\r\n { field: 'body', sortable: false, title: `Body` },\r\n {\r\n field: 'email',\r\n sortable: false,\r\n title: `Email`,\r\n width: 150,\r\n renderer: (val) => {\r\n return val ? 'Yes' : 'No';\r\n }\r\n }\r\n];\r\n\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '' },\r\n { name: 'Communicator', active: true },\r\n { name: `Booking Request Status`, active: true }\r\n];\r\n\r\nconst BookingRequestStatus = () => {\r\n const [state, setState] = useState({\r\n showModal: false,\r\n isReload: ''\r\n });\r\n\r\n const handleClose = (res) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: false,\r\n isReload: res ? new Date() : ''\r\n }));\r\n };\r\n\r\n const handleEdit = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n reqID: val.id,\r\n data: val\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n\r\n return col;\r\n }, []);\r\n const baseUrl = 'CommunicatorBookingRequest/GetBookingRequestStatus';\r\n return (\r\n \r\n
({\r\n records: res.data.list.table\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n // isReload={state.isReload}\r\n isShowTotal={false}\r\n // hidePagination={true}\r\n isReload={state.isReload}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n {state.showModal ? (\r\n handleClose(false)}>\r\n handleClose(true)} reqID={state.reqID} data={state.data} />\r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n + Add Dynamic Form\r\n \r\n \r\n \r\n
({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={url}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n />\r\n {state.showModal ? : null}\r\n {state.deleteModal ? : null}\r\n \r\n \r\n
\r\n )}\r\n {state.dynamicFormFieldTextImage && (\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n + Add Dynamic Form Field\r\n \r\n \r\n \r\n
handleData(res)} columns={column} getUrl={url} isReload={state.isReload} isShowTotal={false} />\r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false\r\n }))\r\n }\r\n fullWidth\r\n overflow=\"auto\"\r\n >\r\n \r\n \r\n ) : null}\r\n \r\n = 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(mtdProfit, mtdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(mtdProfit, mtdBudget) >= 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n {props.isElectric ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n {props.hideProfit ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {mtdProfit || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {mtdBudget || 0}\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {mtdUnit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {mtdBudgetunit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n )}\r\n \r\n )}\r\n {/* */}\r\n \r\n \r\n \r\n YTD\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdProfit, ytdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdProfit, ytdBudget) >= 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n {props.isElectric ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n {props.hideProfit ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {ytdProfit || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {ytdBudget || 0}\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {ytdUnit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {ytdBudgetunit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n )}\r\n \r\n )}\r\n {/* */}\r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport const VehicleCardNew = (props) => {\r\n const { mtdProfit, mtdBudget, mtdUnit, mtdBudgetunit, label, ytdProfit, ytdBudget, ytdUnit, ytdBudgetunit, actUnit, budgUnit } = props;\r\n\r\n return (\r\n \r\n \r\n {label}\r\n \r\n \r\n \r\n MTD\r\n \r\n \r\n \r\n = 50 && setPercentage(mtdUnit, mtdBudgetunit) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdUnit, mtdBudgetunit) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(mtdUnit, mtdBudgetunit) < 50\r\n ? '#D92641'\r\n : setPercentage(mtdUnit, mtdBudgetunit) >= 50 && setPercentage(mtdUnit, mtdBudgetunit) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdUnit, mtdBudgetunit) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n <>\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {mtdUnit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {mtdBudgetunit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n\r\n {/* */}\r\n \r\n \r\n \r\n YTD\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdUnit, ytdBudgetunit) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdUnit, ytdBudgetunit) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdUnit, ytdBudgetunit) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdUnit, ytdBudgetunit) >= 50 && setPercentage(ytdUnit, ytdBudgetunit) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdUnit, ytdBudgetunit) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n {props.isElectric ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {formatters.ThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n {props.hideProfit ? (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {ytdProfit || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {ytdBudget || 0}\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n ACTUAL
\r\n \r\n {' '}\r\n {ytdUnit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {ytdBudgetunit || 0}/{formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n )}\r\n \r\n )}\r\n {/* */}\r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import { CircularProgress, Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, withStyles } from '@material-ui/core';\r\nimport React, { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport { getReportingInternalHighLevelDashboard } from '../../../../Core/Service/ReportScreens-service';\r\nimport './miniStyle.scss';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { buildStyles, CircularProgressbar } from 'react-circular-progressbar';\r\nimport { VehicleCard, VehicleCardNew } from './ministyleComp';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n padding: '0px 10px 0px 0px',\r\n border: 'none',\r\n textAlign: 'center'\r\n },\r\n body: {\r\n border: 'none',\r\n padding: '10px 0px',\r\n textAlign: 'center'\r\n }\r\n}))(TableCell);\r\n\r\nconst MiniViewReportingDashboard = (props) => {\r\n const [state, setState] = useState({ data: {}, parts: [], isLoader: true, sales: {} });\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n const history = useHistory();\r\n const handleRedirect = () => {\r\n let link = '/RepotingTab';\r\n history.push({\r\n pathname: link\r\n });\r\n };\r\n const handleRedirectCal = () => {\r\n let link = '/Services/InvoicedhoursCalender';\r\n history.push({\r\n pathname: link\r\n });\r\n };\r\n const handleRedirectPart = () => {\r\n let link = '/Services/Parts_Calender';\r\n history.push({\r\n pathname: link\r\n });\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getReportingInternalHighLevelDashboard();\r\n setState((st) => ({\r\n ...st,\r\n data: res.data.data[0],\r\n sales: res.data.sales[0],\r\n parts: res.data.parts || [],\r\n isLoader: false\r\n }));\r\n }, []);\r\n\r\n const redirectTOVehicleDetails = (label, type) => {\r\n let searchQuery = `?&label=${label}&type=${type}`;\r\n let link = '/sales_newRegistration';\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n const redirectTOVehicleOrderIntek = (label, type) => {\r\n let searchQuery = `?&label=${label}&type=${type}`;\r\n let link = '/sales_orderIntek';\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n const redirectTOVehicleUsedInvoice = (label, type) => {\r\n let searchQuery = `?&label=${label}&type=${type}`;\r\n let link = '/sales_usedInvoice';\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n const redirectTOVehiclEVTarget = (label, type) => {\r\n let searchQuery = `?&label=${label}`;\r\n let link = '/sales_EvTarget';\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n console.log(WindowWidths, 'WindowWidths');\r\n\r\n return (\r\n \r\n {state.isLoader ? (\r\n \r\n ) : (\r\n 1910 ? 0 : WindowWidths < 1280 ? 0 : 10 }}\r\n >\r\n \r\n \r\n After Sales (MTD)\r\n \r\n\r\n \r\n = 1280 ? 'space-between' : 'flext-start'}\r\n // style={{ padding: '15px 0px 15px 0px' }}\r\n className={WindowWidths > 1280 ? 'detailDashmainCard1' : ''}\r\n >\r\n handleRedirect()}>\r\n \r\n \r\n SOLD (TODAY)\r\n \r\n \r\n \r\n = 50 &&\r\n state.data.todaySoldHoursProgress < state.data.todaySoldHoursProgress\r\n ? '#ff9f00'\r\n : state.data.todaySoldHoursProgress >= state.data.todaySoldHoursProgress\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n state.data.todaySoldHoursProgress < 50\r\n ? '#D92641'\r\n : state.data.todaySoldHoursProgress >= 50 &&\r\n state.data.todaySoldHoursProgress < state.data.todaySoldHoursProgress\r\n ? '#ff9f00'\r\n : state.data.todaySoldHoursProgress >= state.data.todaySoldHoursProgress\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n {state.data.todaySoldHours\r\n ? formatters.ThousandSeparatorWithoutZero(state.data?.todaySoldHours)\r\n : 'N/A'}\r\n \r\n \r\n Hours\r\n
\r\n \r\n \r\n \r\n = 50 &&\r\n state.data.todaySoldAmountProgress < state.data.todaySoldAmountProgress\r\n ? '#ff9f00'\r\n : state.data.todaySoldAmountProgress >= state.data.todaySoldAmountProgress\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n state.data.todaySoldAmountProgress < 50\r\n ? '#D92641'\r\n : state.data.todaySoldAmountProgress >= 50 &&\r\n state.data.todaySoldAmountProgress < state.data.todaySoldAmountProgress\r\n ? '#ff9f00'\r\n : state.data.todaySoldAmountProgress >= state.data.todaySoldAmountProgress\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n {state.data.todaySoldAmount\r\n ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.todaySoldAmount)\r\n : 'N/A'}\r\n \r\n \r\n Value\r\n
\r\n \r\n \r\n \r\n handleRedirect()}\r\n >\r\n \r\n \r\n \r\n SOLD (MTD)\r\n handleRedirectCal()} />\r\n \r\n \r\n \r\n \r\n = 50 &&\r\n state.data.soldHoursProgress < state.data.soldHoursProgress\r\n ? '#ff9f00'\r\n : state.data.soldHoursProgress >= state.data.soldHoursProgress\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n state.data.soldHoursProgress < 50\r\n ? '#D92641'\r\n : state.data.soldHoursProgress >= 50 &&\r\n state.data.soldHoursProgress < state.data.soldHoursProgress\r\n ? '#ff9f00'\r\n : state.data.soldHoursProgress >= state.data.soldHoursProgress\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n {state.data.soldHours ? formatters.ThousandSeparatorWithoutZero(state.data?.soldHours) : 'N/A'}\r\n \r\n \r\n Hours\r\n
\r\n \r\n \r\n \r\n = 50 &&\r\n state.data.soldAmountProgress < state.data.soldAmountProgress\r\n ? '#ff9f00'\r\n : state.data.soldAmountProgress >= state.data.soldAmountProgress\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n state.data.soldAmountProgress < 50\r\n ? '#D92641'\r\n : state.data.soldAmountProgress >= 50 &&\r\n state.data.soldAmountProgress < state.data.soldAmountProgress\r\n ? '#ff9f00'\r\n : state.data.soldAmountProgress >= state.data.soldAmountProgress\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n {state.data.soldAmount\r\n ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.soldAmount)\r\n : 'N/A'}\r\n \r\n \r\n Value\r\n
\r\n \r\n \r\n \r\n handleRedirect()}>\r\n \r\n \r\n LABOUR\r\n \r\n \r\n \r\n
\r\n \r\n {state.data.warrantyHours ? formatters.ThousandSeparatorWithoutZero(state.data?.warrantyHours) : 'N/A'}\r\n {' '}\r\n /{' '}\r\n \r\n {state.data.warrantyAmount\r\n ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.warrantyAmount)\r\n : 'N/A'}\r\n \r\n
\r\n\r\n
\r\n Warranty\r\n (Hours/Value)\r\n \r\n
\r\n
\r\n \r\n {state.data.rmHours ? formatters.ThousandSeparatorWithoutZero(state.data?.rmHours) : 'N/A'}\r\n {' '}\r\n /{' '}\r\n \r\n {state.data.rmAmount ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.rmAmount) : 'N/A'}\r\n \r\n
\r\n
\r\n {' '}\r\n R&M\r\n (Hours/Value)\r\n \r\n
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(item.partsAmount)}
\r\n
{item.partsDepartment}\r\n
\r\n
\r\n \r\n {state.data.wipHours ? formatters.ThousandSeparatorWithoutZero(state.data?.wipHours) : 'N/A'}\r\n {' '}\r\n /{' '}\r\n \r\n {state.data.wipAmount ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.wipAmount) : 'N/A'}\r\n \r\n
\r\n
\r\n
\r\n {' '}\r\n \r\n {state.data.surchargeQuantity\r\n ? formatters.ThousandSeparatorWithoutZero(state.data?.surchargeQuantity)\r\n : 'N/A'}\r\n {' '}\r\n /{' '}\r\n \r\n {state.data.surchargeAmount\r\n ? formatters.CurrencyThousandSeparatorWithoutZero(state.data?.surchargeAmount)\r\n : 'N/A'}\r\n \r\n
\r\n
CUSTOMER THROUGHPUT
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n {state.data.uniqueCustomers\r\n ? formatters.ThousandSeparatorWithoutZero(state.data?.uniqueCustomers)\r\n : 'N/A'}\r\n \r\n
\r\n
\r\n
\r\n \r\n {state.data.technicianBudget\r\n ? formatters.ThousandSeparatorWithoutZero(state.data?.technicianBudget)\r\n : 'N/A'}\r\n {' '}\r\n /{' '}\r\n state.data?.technicianWorking ? 'red' : 'green' }}>\r\n {state.data.technicianWorking\r\n ? formatters.ThousandSeparatorWithoutZero(state.data?.technicianWorking)\r\n : 'N/A'}\r\n \r\n
\r\n
\r\n {/*
*/}\r\n \r\n \r\n Vehicle Sales\r\n \r\n\r\n \r\n 1280 ? 'detailDashmainCard1' : ''}\r\n >\r\n {/* \r\n \r\n MTD\r\n \r\n */}\r\n \r\n 1280 ? 0 : 1}\r\n spacing={1}\r\n >\r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleDetails('VAN REGISTRATIONS', 1)}\r\n // onClick={() => redirectTOVehicleDetails('VAN REGISTRATIONS / PROFIT', 1)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleUsedInvoice('VAN USED INVOICE', 1)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4} xl={2}>\r\n \r\n \r\n ORDER INTAKE\r\n \r\n {/* \r\n 1280 ? 50 : 35 }}>\r\n */}\r\n\r\n \r\n \r\n MTD\r\n \r\n \r\n YTD\r\n \r\n \r\n \r\n 1280 ? 45 : 35 }}>\r\n \r\n\r\n \r\n \r\n VAN\r\n \r\n \r\n VAN\r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n {state?.sales?.vanOrdersUnits || 0}\r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n {state?.sales?.ytdVanOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n TRUCK\r\n \r\n \r\n TRUCK\r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n {state?.sales?.truckOrdersUnits || 0}\r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n {state?.sales?.ytdTruckOrdersUnits || 0}\r\n \r\n \r\n \r\n 1280 ? 45 : 35 }}>\r\n \r\n\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n MTD
\r\n \r\n \r\n YTD
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n \r\n Van
\r\n \r\n \r\n \r\n {state?.sales?.vanOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n {state?.sales?.ytdVanOrdersUnits || 0}\r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n \r\n Truck
\r\n \r\n \r\n \r\n {state?.sales?.truckOrdersUnits || 0}\r\n \r\n \r\n \r\n {' '}\r\n \r\n {state?.sales?.ytdTruckOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n */}\r\n\r\n {/* \r\n \r\n MTD\r\n \r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n \r\n VAN ORDER INTAKE\r\n \r\n \r\n \r\n {state?.sales?.vanOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n \r\n TRUCK ORDER INTAKE\r\n \r\n \r\n \r\n {state?.sales?.truckOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n YTD\r\n \r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n \r\n VAN ORDER INTAKE\r\n \r\n \r\n \r\n {state?.sales?.ytdVanOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n \r\n TRUCK ORDER INTAKE\r\n \r\n \r\n \r\n {state?.sales?.ytdTruckOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n // onClick={() => redirectTOVehicleDetails('TRUCK REGISTRATIONS / PROFIT', 2)}\r\n onClick={() => redirectTOVehicleDetails('TRUCK REGISTRATIONS', 2)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleUsedInvoice('TRUCK USED INVOICE', 2)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehiclEVTarget('EV TARGET')}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n 1280 ? 'detailDashmainCard1' : ''}>\r\n \r\n \r\n YTD\r\n \r\n \r\n \r\n 1280 ? 0 : 1}>\r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleDetails('VAN REGISTRATIONS / PROFIT', 1)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleUsedInvoice('VAN USED INVOICE', 1)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4} xl={2}>\r\n \r\n redirectTOVehicleOrderIntek('VAN ORDER INTAKE', 1)}>\r\n \r\n VAN ORDER INTAKE\r\n \r\n \r\n {state?.sales?.ytdVanOrdersUnits || 0}\r\n \r\n \r\n \r\n redirectTOVehicleOrderIntek('TRUCK ORDER INTAKE', 2)}>\r\n \r\n TRUCK ORDER INTAKE\r\n \r\n \r\n {state?.sales?.ytdTruckOrdersUnits || 0}\r\n \r\n \r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleDetails('TRUCK REGISTRATIONS / PROFIT', 2)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehicleUsedInvoice('TRUCK USED INVOICE', 2)}\r\n >\r\n \r\n \r\n 1660 ? 2 : 4}\r\n xl={2}\r\n onClick={() => redirectTOVehiclEVTarget('EV TARGET')}\r\n >\r\n \r\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 MiniViewReportingDashboard;\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { SecondaryButton, TextBox, DefaultButton } from '../../../Core/FormInput/index';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { postReportingAgedMeasures, getReportingAgedMeasuresID } from '../../../Core/Service/admin-Invoice_Branch-service';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { FormHelperText } from '@material-ui/core';\r\n\r\nconst AddAgeMeasured = (props) => {\r\n const { showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n id: props.AddAgeMeasuredID || null,\r\n description: '',\r\n excludeAreaCodes: '',\r\n url: '',\r\n isActive: false,\r\n menuLabel: '',\r\n sequence: null,\r\n includeAreaCodes: '',\r\n errors: {}\r\n });\r\n\r\n useEffect(() => {\r\n if (props.AddAgeMeasuredID) {\r\n pullData();\r\n }\r\n }, []);\r\n\r\n const validation = () => {\r\n let isValid = true;\r\n let error = {};\r\n const { sequence } = state;\r\n if (!sequence) {\r\n error.sequence = 'Sequence is Required';\r\n isValid = false;\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n errors: error\r\n }));\r\n\r\n return isValid;\r\n };\r\n\r\n const pullData = async () => {\r\n let res = await getReportingAgedMeasuresID(props.AddAgeMeasuredID);\r\n\r\n let data = res.data.table[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n id: data.id,\r\n description: data.description || '',\r\n excludeAreaCodes: data.excludeAreaCodes || '',\r\n uRL: data.url || '',\r\n isActive: data.isActive || false,\r\n menuLabel: data.menuLabel || '',\r\n sequence: data.sequence || null,\r\n includeAreaCodes: data.includeAreaCodes || ''\r\n }));\r\n }\r\n };\r\n\r\n const handelSubmit = async (flag) => {\r\n if (validation()) {\r\n let data = {\r\n id: state.id,\r\n description: state.description,\r\n excludeAreaCodes: state.excludeAreaCodes || '',\r\n url: state.uRL,\r\n isActive: state.isActive,\r\n menuLabel: state.menuLabel,\r\n sequence: state.sequence,\r\n includeAreaCodes: state.includeAreaCodes || ''\r\n };\r\n let res = await postReportingAgedMeasures(data);\r\n if (res.success) {\r\n showToast(`Reporting Aged Measures ${props.AddAgeMeasuredID ? 'Updated' : 'Added'} Successfully`);\r\n props.onClose();\r\n } else {\r\n showToast(`Reporting Aged Measures Failed to add`);\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n MenuLabel\r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n URL\r\n \r\n \r\n \r\n Exclude Area Codes\r\n \r\n \r\n \r\n Include Area Codes\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Is Active?\r\n \r\n \r\n \r\n handleClick('isActive', true)}\r\n >\r\n Yes\r\n \r\n \r\n \r\n handleClick('isActive', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Sequence\r\n \r\n \r\n {state.errors.sequence}\r\n \r\n \r\n handelSubmit(false)}>\r\n Submit\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddAgeMeasured;\r\n","import { Grid } from '@material-ui/core';\r\nimport React, { useMemo } from 'react';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from './../../../internal/ReportsScreens/GijgoForReportsScreen/index';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { NoteAdd } from '@material-ui/icons';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { SecondaryButton, SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport AddAgeMeasured from '../addEditAgeMeasured';\r\nimport moment from 'moment/moment';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { Tooltip, IconButton } from '@material-ui/core';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: `Action`, width: 20, filterable: false, align: 'left' },\r\n {\r\n field: 'menuLabel',\r\n title: `Menu Label`,\r\n width: 90\r\n },\r\n {\r\n field: 'description',\r\n title: `Description`,\r\n width: 100\r\n },\r\n {\r\n field: 'url',\r\n title: `Path`,\r\n width: 200\r\n },\r\n\r\n {\r\n field: 'excludeAreaCodes',\r\n title: `Area Codes`,\r\n width: 80\r\n },\r\n {\r\n field: 'sequence',\r\n title: `Sequence`,\r\n width: 35\r\n },\r\n {\r\n field: 'isActive',\r\n title: `Is Active`,\r\n width: 30,\r\n align: 'center'\r\n }\r\n];\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reporting', active: true },\r\n { name: `Age Measured`, active: true }\r\n];\r\n\r\nconst AdminReportingAgeMeasured = (props) => {\r\n const [state, setState] = useState({ showModal: false, addAgeMeasuredID: null });\r\n\r\n const addButton = (gridRef, valueList) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n addAgeMeasuredID: null\r\n }))\r\n }\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: true,\r\n addAgeMeasuredID: record.id\r\n }))\r\n }\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let branchCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (branchCol) {\r\n branchCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, [props.MeasureID]);\r\n\r\n const handleEdit = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showEditModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleNote = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showNoteModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleEditClose = (res) => {\r\n let newSt = {};\r\n newSt.showEditModal = false;\r\n newSt.showNoteModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const baseUrl = `ReportingAgedMeasures`;\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 records: res?.data?.rows,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n AddBtn={addButton}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n {state.showModal ? (\r\n
handleClose(false)} fullWidth>\r\n handleClose(true)} AddAgeMeasuredID={state.addAgeMeasuredID} />\r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n TOP 10 {label}\r\n \r\n \r\n \r\n \r\n \r\n {col.map((n) => {\r\n return {n};\r\n })}\r\n \r\n \r\n \r\n {rows.map((row) => (\r\n reDirectTO(label, row)} style={{ cursor: 'pointer' }}>\r\n \r\n {row.name}\r\n \r\n {row.value}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const ByWorkFlow = (props) => {\r\n const classes = useStyles();\r\n\r\n const reDirectTO = (row) => {\r\n let searchQuery = `?rrId=${row.rrId || ''}&startDate=${props.start || ''}&endDate=${props.end || ''}&cwWorkflowId=${\r\n row.workflowId || ''\r\n }&SelectedUserId=${row.userId || ''}&rrName=${row.reason || ''}&cwWorkflowName=${row.workflow || ''}&SelectedUserName=${row.name || ''}&BranchID=${\r\n row.branchID || ''\r\n }&BranchName=${row.branch || ''}`;\r\n const win = window.open(`/internal/dashboard/ReturnReasonList${searchQuery}`, '_blank');\r\n win.focus();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n WorkFlow\r\n Return reason \r\n count\r\n \r\n \r\n \r\n {props.workflowReturnReasons.map((row, i) => (\r\n reDirectTO(row)} style={{ cursor: 'pointer' }}>\r\n \r\n {row.workflow}\r\n \r\n {row.reason}\r\n {row.total}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport const AllReaturnReason = (props) => {\r\n const classes = useStyles();\r\n\r\n const redirectTo = (data) => {\r\n const win = window.open(`/Job/${data.hid}/${data.wid}`, '_blank');\r\n win.focus();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Branch\r\n Return Reasons\r\n User \r\n From Workflow\r\n To Workflow\r\n Customer\r\n Wip No\r\n Date Due\r\n Reg no\r\n Make/Model \r\n \r\n \r\n \r\n {props.allReturnReasons.map((row, i) => (\r\n redirectTo(row)} style={{ cursor: 'pointer' }}>\r\n \r\n {row.br}\r\n \r\n {row.rr}\r\n {row.u}\r\n {row.cw}\r\n {row.nw}\r\n {row.c}\r\n {row.wn}\r\n {moment(row.dd).format('DD/MM/YYYY')}\r\n {row.reg}\r\n {row.mm}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport const ByBranch = (props) => {\r\n const classes = useStyles();\r\n\r\n const reDirectTO = (row) => {\r\n let searchQuery = `?rrId=${row.rrId || ''}&startDate=${props.start || ''}&endDate=${props.end || ''}&cwWorkflowId=${\r\n row.workflowId || ''\r\n }&SelectedUserId=${row.userId || ''}&rrName=${row.reason || ''}&cwWorkflowName=${row.workflow || ''}&SelectedUserName=${row.name || ''}&BranchID=${\r\n row.branchID || ''\r\n }&BranchName=${row.branch || ''}`;\r\n const win = window.open(`/internal/dashboard/ReturnReasonList${searchQuery}`, '_blank');\r\n win.focus();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Branch\r\n User \r\n Reason\r\n Total\r\n \r\n \r\n \r\n {props.branchReturnReasons.map((row, i) => (\r\n reDirectTO(row)} style={{ cursor: 'pointer' }}>\r\n \r\n {row.branch}\r\n \r\n {row.name}\r\n {row.reason}\r\n {row.total}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport { AllReaturnReason, ByBranch, ByWorkFlow } from './ReturnReasonTable';\r\n\r\nfunction TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n \r\n {value === index && (\r\n \r\n {children}\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nTabPanel.propTypes = {\r\n children: PropTypes.node,\r\n index: PropTypes.any.isRequired,\r\n value: PropTypes.any.isRequired\r\n};\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `scrollable-auto-tab-${index}`,\r\n 'aria-controls': `scrollable-auto-tabpanel-${index}`\r\n };\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n width: '100%',\r\n backgroundColor: theme.palette.background.paper\r\n }\r\n}));\r\n\r\nexport default function ReaturnReasonTabs(props) {\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState(0);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n FilterdParamsValues={{ cw: cwWorkflowName, u: SelectedUserName, rr: rrName, br: BranchNameParam }}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\nexport default ReturnReasonReportsList;\r\n","import { get, post } from './http-calls';\r\n\r\nexport const UpdateUserDetailsFranchise = async (operatorID, FranchiseVM, isUsedSalesExec, isNewSalesExec) => {\r\n let res = await post(\r\n `UserDetailsFranchise`,\r\n {\r\n operatorID: operatorID,\r\n FranchiseVM: FranchiseVM,\r\n isUsedSalesExec: isUsedSalesExec,\r\n isNewSalesExec: isNewSalesExec\r\n },\r\n { useAuthToken: true }\r\n );\r\n return res;\r\n};\r\n\r\nexport const getUserDetailsFranchise = async (operatorID) => {\r\n let res = await get(`UserDetailsFranchise/GetDetails?Id=${operatorID}`, { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { TextBox, SecondaryButton, Multiselect, YesNoButton } from '../../../../../Core/FormInput';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport { UpdateUserDetailsFranchise, getUserDetailsFranchise } from '../../../../../Core/Service/userDetails-service';\r\nimport AppContext from '../../../../../App/AppContext';\r\n\r\nconst SalesExecModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n id: '',\r\n userName: '',\r\n videoCategoryActive: true,\r\n roleIDs: [],\r\n errors: {},\r\n fields: {},\r\n isUsedSalesExec: false,\r\n isNewSalesExec: false\r\n });\r\n\r\n const [roleData, setRoleData] = useState({\r\n roles: []\r\n });\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n roles: []\r\n });\r\n\r\n const AutoRoleChange = (event, value) => {\r\n setSelectedData((st) => ({ ...st, roles: value }));\r\n setState((st) => {\r\n const nst = { ...st, roleIDs: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const data = props.data;\r\n\r\n useEffect(async () => {\r\n if (data.operatorID) {\r\n let res = await getUserDetailsFranchise(data.operatorID);\r\n if (res.success) {\r\n const roles = res.data.franchiseList;\r\n setRoleData((st) => ({ ...st, roles }));\r\n setState((st) => ({\r\n ...st,\r\n id: res.data.details[0].operatorID,\r\n userName: res.data.details[0].userName,\r\n isUsedSalesExec: res.data.details[0].isUsedSalesExec,\r\n isNewSalesExec: res.data.details[0].isNewSalesExec\r\n }));\r\n }\r\n }\r\n }, []);\r\n useEffect(() => {\r\n if (props.data) {\r\n const rolesToAdd = [];\r\n props.data.letterIdentifier\r\n .replace(/ /g, '')\r\n .split(',')\r\n .map((role) => {\r\n roleData.roles.map((r) => {\r\n console.log(r);\r\n console.log(role);\r\n console.log(r.name == role, 'r.name==role');\r\n\r\n if (r.name.replace(/ /g, '').toLowerCase() == role.replace(/ /g, '').toLowerCase()) {\r\n rolesToAdd.push(r.id);\r\n }\r\n });\r\n setState((st) => ({\r\n ...st,\r\n roleIDs: rolesToAdd\r\n }));\r\n });\r\n }\r\n }, [roleData.roles]);\r\n\r\n useEffect(() => {\r\n if (props.data) {\r\n const a = state.roleIDs.map((i) => i);\r\n const selectedModule = roleData.roles?.filter((w) => state.roleIDs.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({ ...st, roles: selectedModule }));\r\n }\r\n }, [roleData.roles, state.roleIDs]);\r\n\r\n const handleClose = () => {\r\n props.onFormSubmit(false);\r\n hideModal();\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n let fields = state.fields;\r\n fields[name] = value;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value, fields: fields };\r\n return nst;\r\n });\r\n };\r\n\r\n const handelSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n let res = await UpdateUserDetailsFranchise(state.id, state.roleIDs, state.isUsedSalesExec, state.isNewSalesExec);\r\n if (!res.success) {\r\n console.error(res);\r\n } else {\r\n hideModal();\r\n props.onFormSubmit(true);\r\n }\r\n };\r\n\r\n const handleClick = (name, value) => {\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Name\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Is New Sales Exec?\r\n \r\n handleClick('isNewSalesExec', true)}\r\n onNoClick={() => handleClick('isNewSalesExec', false)}\r\n />\r\n \r\n \r\n \r\n Is Used Sales Exec?\r\n \r\n handleClick('isUsedSalesExec', true)}\r\n onNoClick={() => handleClick('isUsedSalesExec', false)}\r\n />\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SalesExecModal;\r\n","import { Grid, IconButton } from '@material-ui/core';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport React, { useMemo, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport SalesExecModal from './SalesExecModal';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { SquareButton } from '../../../../../Core/FormInput/AppButton';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n\r\nconst baseColumns = [\r\n {\r\n field: 'action',\r\n title: 'Action',\r\n sortable: false,\r\n width: 100\r\n },\r\n {\r\n field: 'userName',\r\n title: 'Name',\r\n width: 200\r\n },\r\n {\r\n field: 'letterIdentifier',\r\n title: 'Franchise',\r\n flex: 1,\r\n sortable: false,\r\n filterable: false\r\n },\r\n {\r\n field: 'isUsedSalesExec',\r\n title: 'Used Sales Exec',\r\n width: 200,\r\n filterable: false\r\n },\r\n {\r\n field: 'isNewSalesExec',\r\n title: 'New Sales Exec',\r\n width: 200,\r\n filterable: false\r\n }\r\n];\r\n\r\nconst SalesExec = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n data: null,\r\n showDel: false\r\n });\r\n\r\n const handleUpdate = (params) => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n show: true,\r\n data: params\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n const closeUpdateUser = (refreshGrid) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.data = null;\r\n newSt.show = null;\r\n if (refreshGrid) {\r\n newSt.isReload = new Date();\r\n }\r\n return newSt;\r\n });\r\n };\r\n const baseUrl = `UserDetailsFranchise`;\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleUpdate(record)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = editButton;\r\n }\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {state.show ? (\r\n closeUpdateUser(false)} maxWidth=\"sm\" height=\"400px\" width=\"300px\">\r\n closeUpdateUser(true)} data={state.data} />\r\n \r\n ) : null}\r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Sales Exec\r\n \r\n \r\n \r\n ({\r\n records: res.data?.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n hideFilterRow={false}\r\n isReload={state.isReload}\r\n />\r\n \r\n
\r\n
\r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n AddBtn={addButton}\r\n />\r\n \r\n \r\n {state.showModal ? (\r\n handleClose(false)}\r\n fullWidth\r\n >\r\n handleClose(true)} screenColumnID={state.screenColumnID} screenID={props.data.screenId} />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default CreateAppraislColumnsList;\r\n","import Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { getAppraisalPageStesps } from '../../../../Core/Service/appraisalScreensColumns-service';\r\nimport TabView from '../../../../Core//Controls/Tabs';\r\nimport { CircularProgress } from '@material-ui/core';\r\nimport CreateAppraislColumnsList from './CreateAppraislColumnsList';\r\nconst AppraisalScreensColumns = (props) => {\r\n const [state, setState] = useState({\r\n rows: [],\r\n show: false,\r\n showDel: false,\r\n Steps: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getAppraisalPageStesps('Create Appraisal');\r\n if (res.success) {\r\n setState((st) => ({ ...st, Steps: res?.data?.pageSteps || [] }));\r\n }\r\n }, []);\r\n\r\n const tabs = useMemo(() => {\r\n let arr = [];\r\n\r\n state.Steps?.map((s) => {\r\n const toPush = {\r\n label: s.screenHeading,\r\n body: \r\n };\r\n arr.push(toPush);\r\n });\r\n\r\n return arr;\r\n }, [state.Steps]);\r\n\r\n return (\r\n \r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n Appraisal\r\n \r\n \r\n Create Appraisal Screens Columns\r\n \r\n \r\n
\r\n\r\n {!state.Steps && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Available Jobs\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {cards.map((option) => (\r\n \r\n \r\n \r\n \r\n
{option.name} \r\n
{option.count}
\r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n {props.match.params.name}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {state.isShowScrollArrow && (\r\n
scrollPrev()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n {state.buttons.map((btn) => {\r\n if (btn.id == mainWorkflowButtonId) {\r\n return (\r\n
buttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n if (btn.id === state.selectedId && state.showHighlightedButton) {\r\n if (color === 'secondary') {\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n } else {\r\n return (\r\n
wfbuttonClicked(btn)}>\r\n {btn.label}\r\n \r\n );\r\n }\r\n })}\r\n
\r\n {state.isShowScrollArrow && (\r\n
scrollNext()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n {/* \r\n Key No: {' '}\r\n */}\r\n \r\n \r\n \r\n \r\n Log Message (\r\n {' '}\r\n Visible to customer?)\r\n \r\n \r\n {state.newlogTextmessage}\r\n \r\n \r\n \r\n Reminder Action Date & Time\r\n \r\n \r\n {state.logActionTimeMessage}\r\n \r\n\r\n \r\n \r\n \r\n High Priority\r\n \r\n \r\n {state.errors.isHighPriorityEmail}\r\n \r\n\r\n \r\n \r\n \r\n Customer Email\r\n \r\n \r\n {state.errors.isUpdateCustomerEmail}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.isPhoneNo}\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n closeHistoryModal(false)}\r\n // hideAddActionBtn={true}\r\n />\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddEditActionLog;\r\n","import React, { useReducer, useState } from 'react';\r\nimport { Checkbox, FormControlLabel, Grid, InputLabel } from '@material-ui/core';\r\nimport { reducer, initState } from '../../../Reducer/action';\r\nimport { SecondaryButton, TextBox, YesNoButton } from '../../../../Core/FormInput/index';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport LogHistory from './logHistory';\r\nimport { postActionLogEmailLog } from '../../../../Core/Service/communicator-service';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { useContext } from 'react';\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: '100%'\r\n }\r\n});\r\n\r\nconst EmailActionLog = (props) => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n const classes = useStyles();\r\n const { onClose } = props;\r\n // const [state, dispatch] = useReducer(reducer, initState);\r\n const [state, setState] = useState({\r\n email: '',\r\n msg: '',\r\n createActionLog: false,\r\n showExternally: false,\r\n wIPNo: props.wip,\r\n headerRecordID: props.headerRecordID,\r\n message: ''\r\n });\r\n\r\n const validation = () => {\r\n let isValid = true;\r\n const emailRegex = /\\S+@\\S+\\.\\S+/;\r\n let message = '';\r\n\r\n if (!state.email) {\r\n isValid = false;\r\n message = 'Email is required';\r\n }\r\n if (!emailRegex.test(state.email)) {\r\n isValid = false;\r\n message = 'Please enter a valid email!';\r\n }\r\n\r\n setState((st) => ({ ...st, message: message }));\r\n\r\n return isValid;\r\n };\r\n\r\n const handleEmail = async () => {\r\n if (validation()) {\r\n let data = {\r\n email: state.email,\r\n msg: state.msg,\r\n createActionLog: state.createActionLog,\r\n showExternally: state.showExternally,\r\n wIPNo: state.wip,\r\n headerRecordID: state.headerRecordID\r\n };\r\n let res = await postActionLogEmailLog(data);\r\n if (res.success) {\r\n showToast(`Email Sent Successfully`);\r\n onClose();\r\n }\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n if (type === 'checkbox') {\r\n nst[name] = checked;\r\n } else {\r\n nst[name] = value;\r\n }\r\n return nst;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n \r\n Key No: {props.keyNo} {' '}\r\n \r\n \r\n \r\n \r\n Email\r\n \r\n \r\n \r\n {state.message}\r\n \r\n \r\n \r\n \r\n {' '}\r\n Message\r\n \r\n \r\n \r\n\r\n \r\n }\r\n label=\"Create Action\"\r\n labelPlacement=\"endt\"\r\n />\r\n \r\n \r\n }\r\n label=\"Show Externally\"\r\n labelPlacement=\"end\"\r\n />\r\n \r\n \r\n \r\n Send Email\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EmailActionLog;\r\n","import React, { useReducer } from 'react';\r\nimport { Grid, Typography, InputLabel, RadioGroup, FormControlLabel, Radio, Checkbox, DialogTitle, Chip, Avatar, FormHelperText } from '@material-ui/core';\r\nimport { reducer, initState } from '../../../Reducer/action';\r\nimport { SecondaryButton, TextBox, YesNoButton } from '../../../../Core/FormInput/index';\r\nimport { useState, useCallback } from 'react';\r\nimport CommonGijgoGrid from '../../../../Core/Controls/GijgoGrid/index';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport LogHistory from './logHistory';\r\nimport { postCommunicatorAddActionLog, getActionLogByID } from '../../../../Core/Service/communicator-service';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport { useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport EmailActionLog from './emailActionLog';\r\n\r\nconst EditActionLog = (props) => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n const [show, setShow] = useState({\r\n history: false,\r\n actionEmail: false\r\n });\r\n\r\n const [state, setState] = useState({\r\n logVisibleToCustomer: false,\r\n logHighPriority: false,\r\n isCustomerUpdate: false,\r\n isUpdateSms: false,\r\n newisCustomerUpdate: false,\r\n newisUpdateSms: false,\r\n errors: {},\r\n resultDateAndTime: moment().format('YYYY-MM-DD HH:MM')\r\n });\r\n\r\n const handleCheck = (e) => {\r\n const { name, checked } = e.target;\r\n setState((st) => ({ ...st, [name]: checked }));\r\n if (state.logHighPriority) {\r\n setState((st) => ({ ...st, newisHighPriorityEmail: state.highPriorityEmail }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getActionLogByID(props.id);\r\n let data = res.data.list[0];\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n logActionTime: data.logActionTime,\r\n logActioned: data.logActioned,\r\n logCreatedUserID: data.logCreatedUserID,\r\n logDateCreated: data.logDateCreated,\r\n logHeaderRecordID: data.logHeaderRecordID,\r\n logHighPriority: data.logHighPriority,\r\n logID: data.logID,\r\n logText: data.logText,\r\n logVisibleToCustomer: data.logVisibleToCustomer,\r\n highPriorityEmail: data.highPriorityEmail,\r\n newisHighPriorityEmail: data.logHighPriority ? data.highPriorityEmail : ''\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleHistory = () => {\r\n setShow((st) => ({\r\n ...st,\r\n history: true\r\n }));\r\n };\r\n const handleEmailActionLog = () => {\r\n setShow((st) => ({\r\n ...st,\r\n actionEmail: true\r\n }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n const validation = () => {\r\n let { logResultText } = state;\r\n let message = '';\r\n let isValid = true;\r\n let errors = {};\r\n if (!logResultText) {\r\n isValid = false;\r\n message = 'Log Result is required';\r\n }\r\n if (state.isUpdateSms && !state.isPhoneNo) {\r\n isValid = false;\r\n errors.isPhoneNo = 'SMS is required';\r\n }\r\n if (state.isCustomerUpdate && !state.isUpdateCustomerEmail) {\r\n isValid = false;\r\n errors.isUpdateCustomerEmail = 'Email is required';\r\n }\r\n setState((st) => ({ ...st, message: message, errors: errors }));\r\n return isValid;\r\n };\r\n\r\n const Newvalidation = () => {\r\n let { newlogText, newlogActionTime } = state;\r\n let logActionTimeMessage = '';\r\n let newlogTextmessage = '';\r\n let errors = {};\r\n let isValid = true;\r\n if (!newlogText) {\r\n isValid = false;\r\n newlogTextmessage = 'Log Message is required';\r\n }\r\n if (!newlogActionTime) {\r\n isValid = false;\r\n logActionTimeMessage = 'Reminder Action Date & Time is required';\r\n }\r\n if (state.newisUpdateSms && !state.newisPhoneNo) {\r\n isValid = false;\r\n errors.newisPhoneNo = 'SMS is required';\r\n }\r\n if (state.newisCustomerUpdate && !state.newisUpdateCustomerEmail) {\r\n isValid = false;\r\n errors.newisUpdateCustomerEmail = 'Email is required';\r\n }\r\n if (state.newlogHighPriority && !state.newisHighPriorityEmail) {\r\n isValid = false;\r\n errors.newisHighPriorityEmail = 'Email is required';\r\n }\r\n setState((st) => ({ ...st, newlogTextmessage: newlogTextmessage, logActionTimeMessage: logActionTimeMessage, errors: errors }));\r\n return isValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validation()) {\r\n let data = {\r\n logID: props.id,\r\n logHeaderRecordID: props.headerRecordID,\r\n logText: state.logText,\r\n logActionTime: state.logActionTime,\r\n logResultText: state.logResultText,\r\n logVisibleToCustomer: state.logVisibleToCustomer,\r\n logHighPriority: state.logHighPriority,\r\n isPhoneNo: state.isPhoneNo || '',\r\n isUpdateCustomerEmail: state.isUpdateCustomerEmail || '',\r\n isHighPriorityEmail: state.isHighPriorityEmail || ''\r\n };\r\n\r\n let res = await postCommunicatorAddActionLog(data);\r\n if (res.success) {\r\n showToast(`Action Log Closed Successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Failed to close Action Log`);\r\n }\r\n }\r\n };\r\n\r\n const handleNewSubmit = async () => {\r\n if (Newvalidation()) {\r\n let data = {\r\n logID: null,\r\n logHeaderRecordID: props.headerRecordID,\r\n logText: state.newlogText,\r\n logActionTime: state.newlogActionTime,\r\n logResultText: state.logResultText || '',\r\n logVisibleToCustomer: state.logVisibleToCustomer,\r\n logHighPriority: state.logHighPriority,\r\n isPhoneNo: state.newisPhoneNo || '',\r\n isUpdateCustomerEmail: state.newisUpdateCustomerEmail || '',\r\n isHighPriorityEmail: state.newisHighPriorityEmail || ''\r\n };\r\n\r\n let res = await postCommunicatorAddActionLog(data);\r\n if (res.success) {\r\n handleSubmit();\r\n showToast(`New Action Log Added Successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`Falied to Action Log`);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Update Action Log\r\n {/* \r\n \r\n \r\n }\r\n label=\"History\"\r\n onClick={handleHistory}\r\n /> */}\r\n \r\n \r\n \r\n }\r\n label=\"Email Action Log\"\r\n onClick={handleEmailActionLog}\r\n />\r\n \r\n \r\n }\r\n onClose={() => props.onClose(false)}\r\n fullWidth\r\n maxWidth=\"lg\"\r\n >\r\n \r\n \r\n \r\n WIP No: {props.wip} Reg. No: {props.reg}{' '}\r\n \r\n Key No: {props.keyNo}{' '}\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n Action Log Message ( @ {moment(state.logActionTime).format('LLL')} ) \r\n \r\n
\r\n \r\n {state.logText}\r\n \r\n \r\n \r\n \r\n {' '}\r\n Result\r\n \r\n
\r\n\r\n \r\n {state.message}\r\n \r\n\r\n \r\n \r\n {' '}\r\n Result Completion Date & Time\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Email Customer\r\n \r\n \r\n {state.errors.isUpdateCustomerEmail}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.isPhoneNo}\r\n \r\n\r\n \r\n \r\n Close Action Log\r\n \r\n \r\n \r\n\r\n \r\n \r\n Next Action Log\r\n \r\n \r\n \r\n Log Message (\r\n \r\n Visible to customer?)\r\n \r\n \r\n {state.newlogTextmessage}\r\n \r\n \r\n \r\n {' '}\r\n Reminder Action Date & Time\r\n \r\n \r\n {state.logActionTimeMessage}\r\n \r\n \r\n \r\n \r\n Phone Number\r\n \r\n \r\n {state.errors.newisPhoneNo}\r\n \r\n\r\n \r\n \r\n \r\n High Priority\r\n \r\n \r\n {state.errors.newisHighPriorityEmail}\r\n \r\n\r\n \r\n \r\n \r\n Email Customer\r\n \r\n \r\n {state.errors.newisUpdateCustomerEmail}\r\n \r\n\r\n \r\n \r\n Close & Create New Action Log\r\n \r\n \r\n \r\n \r\n
\r\n {/* {show.history ? ( */}\r\n {\r\n setShow((st) => ({\r\n ...st,\r\n history: false\r\n }));\r\n }}\r\n />\r\n {/* ) : null} */}\r\n {show.actionEmail ? (\r\n {\r\n setShow((st) => ({\r\n ...st,\r\n actionEmail: false\r\n }));\r\n }}\r\n maxWidth=\"md\"\r\n >\r\n {\r\n setShow((st) => ({\r\n ...st,\r\n actionEmail: false\r\n }));\r\n }}\r\n />\r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default EditActionLog;\r\n","import moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { getActionLogHistory } from '../../../../Core/Service/communicator-service';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport { Avatar, Chip, DialogTitle } from '@material-ui/core';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport AddEditActionLog from './addEditActionLog';\r\nimport EditActionLog from './editActionLog';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\n\r\nconst LogHistory = (props) => {\r\n const [state, setState] = useState({\r\n messaegList: [],\r\n actionLog: false,\r\n editActionLog: false\r\n });\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n useEffect(async () => {\r\n let res = await getActionLogHistory(props.headerRecordID);\r\n if (res.success) {\r\n setState((st) => ({ ...st, messaegList: res?.data?.list }));\r\n }\r\n }, []);\r\n\r\n const handleActionLog = () => {\r\n setState((st) => ({\r\n ...st,\r\n actionLog: !st.actionLog\r\n }));\r\n };\r\n\r\n const handleEditActionLog = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n editActionLog: true,\r\n headerRecordID: props.headerRecordID,\r\n id: val.logID,\r\n closeId: val.logID\r\n }));\r\n // props.onClose();\r\n };\r\n\r\n const handleClose = () => {\r\n setState((st) => ({\r\n ...st,\r\n editActionLog: false\r\n }));\r\n };\r\n\r\n return (\r\n <>\r\n {props.showDialog ? (\r\n \r\n \r\n Action Log History\r\n {!props.hideAddActionBtn && (\r\n \r\n \r\n \r\n }\r\n label=\"Add New Log\"\r\n onClick={handleActionLog}\r\n />\r\n )}\r\n \r\n \r\n }\r\n onClose={() => props.onClose(false)}\r\n fullScreen={WindowWidths < 1260 ? true : false}\r\n maxWidth=\"md\"\r\n fullWidth\r\n >\r\n \r\n {/*
\r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n
\r\n
*/}\r\n {state.messaegList.length > 0 ? (\r\n
\r\n {state.messaegList.map((m) => (\r\n
\r\n
\r\n {m.logText}{' '}\r\n {m.logActioned ? null : (\r\n
\r\n \r\n \r\n }\r\n size=\"small\"\r\n label=\"Close\"\r\n onClose={() => props.onClose(false)}\r\n onClick={() => handleEditActionLog(m)}\r\n />\r\n )}\r\n \r\n\r\n
\r\n {m.logResultText} \r\n \r\n {moment(m.logActionTime).format('LLL')} ( Created by : {m.createdBy} @ {moment(m.logDateCreated).format('LLL')}{' '}\r\n )\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n ) : (\r\n
\r\n
No Log Available
\r\n
\r\n )}\r\n
\r\n {/*
\r\n WIP No: {props.wip} Reg. No: {props.reg}\r\n
\r\n
*/}\r\n {state.messaegList.length > 0 ? (\r\n
\r\n {state.messaegList.map((m) => (\r\n
\r\n
\r\n {m.logText}{' '}\r\n {props.hideClose && (\r\n <>\r\n {m.logActioned ? null : (\r\n
\r\n \r\n \r\n }\r\n size=\"small\"\r\n label=\"Close\"\r\n onClose={() => props.onClose(false)}\r\n onClick={() => handleEditActionLog(m)}\r\n />\r\n )}\r\n \r\n )}\r\n \r\n\r\n
\r\n {m.logResultText} \r\n \r\n {moment(m.logActionTime).format('LLL')} ( Created by : {m.createdBy} @ {moment(m.logDateCreated).format('LLL')} )\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n ) : (\r\n
\r\n
No Log Available
\r\n
\r\n )}\r\n
\r\n \r\n Priority Number\r\n \r\n \r\n \r\n handelSubmit('submit')} disabled={state.isSetDisabled}>\r\n Set\r\n \r\n \r\n \r\n handelSubmit('reset')}>\r\n Reset\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default JobPriorityModal;\r\n","import { FormLabel, Grid } from '@material-ui/core';\r\nimport React, { useEffect } from 'react';\r\nimport { useContext } from 'react';\r\nimport { useState } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { GreenButton, SecondaryButton, TextBox } from '../../../Core/FormInput';\r\nimport { postCustomerRating, getCustomerRating } from '../../../Core/Service/workflow-service';\r\n// import { SelectBox } from '';\r\nimport SelectBox from './../../../Core/FormInput/SelectBox';\r\nimport StarIcon from '@material-ui/icons/Star';\r\n\r\nconst CustomerRating = (props) => {\r\n const [state, setState] = useState({ customerRatingIcon: null });\r\n const { hideTopNavAndMenu, showToast, portalSettings } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n if (props.jobId) {\r\n let res = await getCustomerRating(props.jobId);\r\n if (res?.success) {\r\n let data = res?.data?.table[0];\r\n setState((st) => ({\r\n ...st,\r\n headerRecordID: data.headerRecordID,\r\n customerRatingIcon: data.customerRatingIcon || null,\r\n customerRatingNotes: data.customerRatingNotes || '',\r\n enteredRegNo: data.enteredRegNo || '',\r\n s24ChassisNumber: data.s24ChassisNumber || '',\r\n registration: data.registration,\r\n wipNo: data.wipNumber\r\n }));\r\n }\r\n }\r\n }, []);\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n // nst.isSetDisabled = nst.jobPriority ? false : true;\r\n return nst;\r\n });\r\n };\r\n\r\n const ratingList = [\r\n {\r\n id: 1,\r\n name: (\r\n <>\r\n Gold\r\n \r\n )\r\n },\r\n {\r\n id: 2,\r\n name: (\r\n <>\r\n Silver\r\n \r\n )\r\n },\r\n {\r\n id: 3,\r\n name: (\r\n <>\r\n Bronze\r\n \r\n )\r\n }\r\n ];\r\n\r\n const handelSubmit = async () => {\r\n let data = {\r\n headerRecordID: props.jobId,\r\n customerRatingIcon: state.customerRatingIcon,\r\n customerRatingNotes: state.customerRatingNotes,\r\n enteredRegNo: state.enteredRegNo,\r\n s24ChassisNumber: state.s24ChassisNumber\r\n };\r\n const res = await postCustomerRating(data);\r\n if (res.success) {\r\n showToast(res.data.list.table[0].msg);\r\n props.handleCancel(true);\r\n }\r\n if (!res.success) {\r\n console.error(res);\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n WIP No: {state.wipNo} {state.registration}\r\n \r\n \r\n Reg No: {state.registration}\r\n \r\n
\r\n {portalSettings.showRegNumberInCustomerRatingBox && (\r\n <>\r\n \r\n S24 Chassis Number\r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n Customer Rating Icon\r\n \r\n \r\n \r\n \r\n Notes\r\n \r\n \r\n \r\n handelSubmit('reset')}>\r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CustomerRating;\r\n","import { CircularProgress, Grid, InputLabel } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport { getMotHistory } from '../../../../Core/Service/ReportScreens-service';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport Alert from '@material-ui/lab/Alert';\r\nimport ErrorIcon from '@material-ui/icons/Error';\r\nimport './motHistory.scss';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\n\r\nvar dateInPast = function (firstDate) {\r\n if (firstDate && new Date(firstDate).setHours(0, 0, 0, 0) <= new Date().setHours(0, 0, 0, 0)) {\r\n return true;\r\n }\r\n return false;\r\n};\r\n\r\nconst MotHistoryScreen = (props) => {\r\n const [state, setState] = useState({\r\n dvla: null,\r\n lcvMot: null,\r\n hgvMOT: null,\r\n errors: {},\r\n isResponse: false,\r\n isLoader: false,\r\n make: '',\r\n model: ''\r\n });\r\n const pullMotHistory = async (regNo, FranchiseCode) => {\r\n if (props.regNo || regNo) {\r\n setState((st) => ({\r\n ...st,\r\n isResponse: false,\r\n isLoader: true\r\n }));\r\n const res = await getMotHistory(regNo || props.regNo, props.FranchiseCode || '');\r\n setState((st) => ({\r\n ...st,\r\n dvla: res.data.dvla.response,\r\n lcvMot: res.data.lcvMot.response,\r\n hgvMOT: res.data.hgvMOT.response,\r\n isMotExpiryDate: dateInPast(res.data.dvla?.response?.motExpiryDate),\r\n isAnnualTestExpiryDate: dateInPast(res.data.hgvMOT?.response?.annualTestExpiryDate),\r\n isResponse: true,\r\n isLoader: false,\r\n model: res?.data?.dvla?.response?.model\r\n ? res?.data?.dvla?.response?.model\r\n : res?.data?.lcvMot?.response?.model\r\n ? res?.data?.lcvMot?.response?.model\r\n : res?.data?.hgvMOT?.response?.model\r\n }));\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n dvla: null,\r\n lcvMot: null,\r\n hgvMOT: null,\r\n isMotExpiryDate: null,\r\n isAnnualTestExpiryDate: null,\r\n isResponse: false,\r\n isLoader: false\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n pullMotHistory();\r\n }, [props.regNo, props.FranchiseCode]);\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[name] = value.toUpperCase();\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleSubmit = () => {\r\n pullMotHistory(state.regNumber, '');\r\n };\r\n\r\n return (\r\n \r\n {!props.hideSeachText && (\r\n
\r\n \r\n Reg Number\r\n \r\n {state.errors['regNumber']}\r\n \r\n \r\n \r\n GO\r\n \r\n \r\n \r\n )}\r\n {state.isResponse ? (\r\n
\r\n \r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n {state.dvla.registrationNumber}\r\n \r\n \r\n \r\n \r\n Make/Model\r\n \r\n \r\n {`${state.dvla.make} (${state.model})`}\r\n \r\n \r\n {state.lcvMot && (\r\n \r\n \r\n {state.lcvMot.motTests ? 'MOT Valid Until' : 'MOT Due Date'}\r\n \r\n \r\n \r\n {state.lcvMot.motTests\r\n ? formatters.YearFormatter(state.lcvMot.motTests[0].expiryDate)\r\n : formatters.YearFormatter(state.lcvMot.motTestDueDate)}\r\n \r\n \r\n \r\n )}\r\n {state.hgvMOT && (\r\n \r\n {state.hgvMOT?.annualTestExpiryDate != null && (\r\n \r\n \r\n MOT Valid Until\r\n \r\n \r\n {formatters.YearFormatter(state.hgvMOT?.annualTestExpiryDate)}\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n Tax Status\r\n \r\n \r\n {state.dvla.taxStatus}\r\n \r\n \r\n\r\n {state.dvla.taxDueDate != null && (\r\n \r\n \r\n Tax Due\r\n \r\n \r\n {formatters.YearFormatter(state.dvla.taxDueDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n {state.lcvMot != null ? (\r\n <>\r\n {state.isMotExpiryDate && (\r\n \r\n This Vehicle's MOT has expired
\r\n You can fined up to £1000 for Driving without a valid MOT
\r\n \r\n This vehicle may be MOT exempt, for more information refer to\r\n \r\n MOT exemption guidance\r\n \r\n
\r\n \r\n )}\r\n \r\n {/* \r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n {state.lcvMot.registration}\r\n \r\n \r\n \r\n \r\n Make/Model\r\n \r\n \r\n {`${state.lcvMot.make} (${state.lcvMot.model})`}\r\n \r\n \r\n \r\n \r\n {state.lcvMot.motTests ? 'MOT Valid Until' : 'MOT Due Date'}\r\n \r\n \r\n \r\n {state.lcvMot.motTests\r\n ? formatters.YearFormatter(state.lcvMot.motTests[0].expiryDate)\r\n : formatters.YearFormatter(state.lcvMot.motTestDueDate)}\r\n \r\n \r\n \r\n \r\n \r\n Tax Status\r\n \r\n \r\n {state.dvla.taxStatus}\r\n \r\n \r\n\r\n {state.dvla.taxDueDate != null && (\r\n \r\n \r\n Tax Due\r\n \r\n \r\n {formatters.YearFormatter(state.dvla.taxDueDate)}\r\n \r\n \r\n )}\r\n \r\n */}\r\n \r\n {state.lcvMot.motTests != null ? (\r\n <>\r\n {state.lcvMot.motTests.map((q, i) => {\r\n return (\r\n \r\n \r\n {`Test Date: ${formatters.YearFormatter(q.completedDate)}`}\r\n \r\n \r\n \r\n \r\n \r\n | Result | \r\n Test No. | \r\n Mileage | \r\n Expiry Date | \r\n
\r\n \r\n \r\n \r\n {q.testResult == 'PASSED' ? (\r\n | \r\n \r\n \r\n \r\n \r\n Pass\r\n \r\n | \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Fail\r\n \r\n | \r\n )}\r\n {q.motTestNumber} | \r\n {q.odometerValue} | \r\n {q.expiryDate != null ? formatters.YearFormatter(q.expiryDate) : ''} | \r\n
\r\n \r\n
\r\n \r\n\r\n {q.rfrAndComments != null && (\r\n <>\r\n {q.rfrAndComments.map((m) => {\r\n return (\r\n \r\n {m.type == 'ADVISORY' ? (\r\n }\r\n >\r\n {m.text}\r\n \r\n ) : m.type == 'PRS' ||\r\n m.type == 'FAILED' ||\r\n // m.type == 'MAJOR' ||\r\n // m.type == 'MINOR' ||\r\n q.testResult == 'FAILED' ? (\r\n }>\r\n {m.text}\r\n \r\n ) : (\r\n }>\r\n {m.text}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n <>\r\n \r\n }>\r\n MOT records not available\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n ) : state.hgvMOT != null ? (\r\n <>\r\n {state.isAnnualTestExpiryDate && (\r\n
\r\n This Vehicle's annual test has expired
\r\n
\r\n \r\n If the vehicle has been tested recently, it can take up to 10 working day for DVSA to update records\r\n
\r\n
\r\n \r\n This vehicle may be MOT exempt, for more information refer to\r\n \r\n MOT exemption guidance\r\n \r\n
\r\n \r\n )}\r\n {/*
\r\n \r\n \r\n \r\n \r\n \r\n Reg No\r\n \r\n \r\n {state.hgvMOT.registration}\r\n \r\n \r\n \r\n \r\n Make/Model\r\n \r\n \r\n {`${state.hgvMOT.make} (${state.hgvMOT.model})`}\r\n \r\n \r\n\r\n {state.hgvMOT.annualTestExpiryDate != null && (\r\n \r\n \r\n MOT Valid Until\r\n \r\n \r\n {formatters.YearFormatter(state.hgvMOT.annualTestExpiryDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Tax Status\r\n \r\n \r\n {state.dvla.taxStatus}\r\n \r\n \r\n {state.dvla.taxDueDate != null && (\r\n \r\n \r\n Tax Due\r\n \r\n \r\n {formatters.YearFormatter(state.dvla.taxDueDate)}\r\n \r\n \r\n )}\r\n \r\n \r\n */}\r\n\r\n \r\n {state.hgvMOT.annualTests != null ? (\r\n <>\r\n {state.hgvMOT.annualTests.map((q, i) => {\r\n return (\r\n \r\n \r\n {`Test Date: ${formatters.YearFormatter(q.testDate)}`}\r\n \r\n \r\n \r\n \r\n \r\n | Result | \r\n Test No. | \r\n Expiry Date | \r\n Location | \r\n
\r\n \r\n \r\n \r\n {q.testResult == 'PASSED' ? (\r\n | \r\n \r\n \r\n \r\n \r\n Pass\r\n \r\n | \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Fail\r\n \r\n | \r\n )}\r\n {q.testCertificateNumber} | \r\n {q.expiryDate != null ? formatters.YearFormatter(q.expiryDate) : ''} | \r\n {q.location} | \r\n
\r\n \r\n
\r\n \r\n\r\n {q.defects != null ? (\r\n <>\r\n {q.defects.map((m) => {\r\n return (\r\n \r\n {m.severityDescription.toUpperCase() == 'ADVISORY' ? (\r\n }\r\n >\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n ) : m.severityDescription.toUpperCase() == 'FAIL' ? (\r\n }\r\n >\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n ) : (\r\n }>\r\n {`${m.failureReason}-${m.severityDescription}`}\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : q.testResult == 'PASSED' ? (\r\n <>\r\n \r\n }>\r\n {`Passed MOT with no advisories`}\r\n \r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n \r\n \r\n }>\r\n No MOT with no advisories\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ) : (\r\n \r\n }>\r\n Resource not found\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n {state.isLoader ? : null}\r\n \r\n )}\r\n \r\n
\r\n {AppStorage.getCanAmendJobNotes() && (\r\n <>\r\n
handleEditNote(true, props.note)} style={{ padding: '0px' }}>\r\n \r\n \r\n
handleDeleteNote(true, props.note)} style={{ marginRight: '5px' }}>\r\n \r\n \r\n \r\n )}\r\n
{props.note.msg}
\r\n
\r\n
\r\n {props.note.by} @ {moment(props.note.at).format('LLL')}\r\n
\r\n
\r\n \r\n WIP No: {state.wip} Reg No: {state.reg}\r\n \r\n
\r\n );\r\n };\r\n const handleChanges = (event, value) => {\r\n setState((st) => {\r\n const nst = { ...st, groupIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const 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 return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {state.fromReports != 'No' && (\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n {state.currentWorkflowId && !_.isEmpty(state.tempObj) && (\r\n \r\n )}\r\n
\r\n {state.showFilter ? (\r\n
closeDialog(false)} overflow=\"auto\" fullWidth>\r\n \r\n {/* */}\r\n \r\n ) : null}\r\n {state.showTechAssign ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showJobPriority ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showCustomerRating ? (\r\n
closeTechAssignDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.jobNotes ? (\r\n
handleJobNotes([], false)}\r\n onNotesAdded={() => {\r\n console.log('');\r\n }}\r\n />\r\n ) : null}\r\n {state.displayCustomerMessage ? (\r\n closeTechAssignDialog(false)} fullWidth>\r\n \r\n {state.customerMessage}\r\n \r\n \r\n ) : null}\r\n {state.logHistory ? (\r\n {\r\n setState((st) => ({\r\n ...st,\r\n logHistory: false\r\n }));\r\n }}\r\n />\r\n ) : null}\r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))}\r\n maxWidth=\"md\"\r\n fullWidth\r\n overflow={'auto'}\r\n height=\"680px\"\r\n >\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n | Order Number | \r\n Sale Price | \r\n Cost Price | \r\n Disc O/A | \r\n Bonuses | \r\n Subsidy | \r\n CPI | \r\n Finance | \r\n PDI | \r\n DFA Sale | \r\n DFA Cost | \r\n Intro Comm | \r\n Finance Company | \r\n Shipment Number | \r\n
\r\n \r\n \r\n | {ord} | \r\n £{sale} | \r\n £{cost} | \r\n £{discOval} | \r\n £{bonuses} | \r\n £{subsidy} | \r\n £{cpi} | \r\n £{finance} | \r\n £{pdi} | \r\n £{dfaSale} | \r\n £{dfaCost} | \r\n £{introCom} | \r\n {fcompany} | \r\n {ship} | \r\n
\r\n
\r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n {/* ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={state.baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false} \r\n /> */}\r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={state.baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n // downloadName={'New Vehicle Profit Report'}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default NewSalesListView;\r\n","import React, { useMemo } from 'react';\r\n// import { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport { Button, Grid, IconButton, Typography } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n// import DiagnosticFaultsModal from './DiagnosticFaultsModal';\r\nimport { useState } from 'react';\r\nimport ReportGijgoGrid from '../../ReportsScreens/GijgoForReportsScreen';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\n// import formatters from '../../../Core/Grid/inputFormatter';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport { BasicButtonGroup } from '../../../../Core/ButtonGroup';\r\nimport { getWorkflowsByProcessID } from '../../../../Core/Service/workflow-service';\r\nimport { useEffect } from 'react';\r\nimport NestedGijgoGrid from './nestedGijgoGrid';\r\nimport './usedSalesStyle.scss';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { getStockbookList } from '../../../../Core/Service/apprisal-service';\r\nimport { useHistory } from 'react-router-dom';\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: `Action`, width: 50 },\r\n { field: 'vsb', sortable: false, title: `Stock No`, width: 100 },\r\n { title: 'Sold By', field: 'sp', width: 200, sortable: true },\r\n { title: 'Customer', field: 'cust', width: 280, sortable: true },\r\n { title: 'Branch', field: 'loc', width: 120, sortable: true },\r\n {\r\n title: 'Reg Number',\r\n field: 'reg',\r\n width: 150,\r\n sortable: true\r\n },\r\n { title: 'Model', field: 'model', width: 90, sortable: true }\r\n // {\r\n // title: 'Invoice Date',\r\n // field: 'id',\r\n // width: 90,\r\n // sortable: true,\r\n // type: 'date',\r\n // format: 'dd-mmm-yyyy',\r\n // cssClass: 'text-center',\r\n // renderer: function (value, record) {\r\n // if (record.id != null) {\r\n // let date = new Date(record.id);\r\n // return date.getDate() + '-' + monthNames[date.getMonth()] + '-' + date.getFullYear();\r\n // }\r\n // return '';\r\n // }\r\n // },\r\n // {\r\n // title: 'Total Sale',\r\n // field: 'ts',\r\n // width: 90,\r\n // sortable: true,\r\n // renderer: function (value, record) {\r\n // return '£' + addCommas(record.ts) + '';\r\n // },\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Total Cost',\r\n // field: 'tc',\r\n // width: 70,\r\n // sortable: true,\r\n // renderer: function (value, record) {\r\n // return '£' + addCommas(record.tc) + '';\r\n // },\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Gross Profit',\r\n // field: 'gp',\r\n // width: 70,\r\n // sortable: true,\r\n // renderer: function (value, record) {\r\n // return '£' + addCommas(record.gp) + '';\r\n // },\r\n // align: 'right'\r\n // }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return `\r\n
\r\n \r\n \r\n | \r\n Order Number | \r\n Sale Price | \r\n Cost Price | \r\n Disc O/A | \r\n Bonuses | \r\n Subsidy | \r\n CPI | \r\n Finance | \r\n PDI | \r\n DFA Sale | \r\n DFA Cost | \r\n Intro Comm | \r\n Finance Company | \r\n Shipment Number | \r\n
\r\n \r\n \r\n | \r\n {ord} | \r\n £{sale} | \r\n £{cost} | \r\n £{discOval} | \r\n £{bonuses} | \r\n £{subsidy} | \r\n £{cpi} | \r\n £{finance} | \r\n £{pdi} | \r\n £{dfaSale} | \r\n £{dfaCost} | \r\n £{introCom} | \r\n {fcompany} | \r\n {ship} | \r\n
\r\n
\r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n {/* ({\r\n records: res.data.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={state.baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false} \r\n /> */}\r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={column}\r\n getUrl={state.baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n // downloadName={'Used Vehicle Report'}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default UsedSalesListView;\r\n","import _, { find, remove, some, values } from 'lodash';\r\nimport React, { createContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../../App/AppContext';\r\nimport { useContext } from 'react';\r\nimport { getNewStockData, getWorkflowNewUsedJobStep, getWorkflowsByProcessID } from '../../../../../Core/Service/workflow-service';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport { getWorkflowListsAndOps } from '../../../../../Core/Service/workflowList-service';\r\nimport { getNewStockDocumentOcrDocumentHistoryForJob, getOcrDocumentHistoryForJob } from '../../../../../Core/Service/workflowJobDocument-service';\r\nimport { saveNewStockDataWorkflowData } from '../../../../../Core/Service/workflowData-service';\r\nimport { getBranchById } from '../../../../../Core/Service/branch-screen-service';\r\nimport { saveNewStockJobDocumentsStamps, saveNewStockJobDocumentsStampsV2 } from '../../../../../Core/Service/workflowJobsDocumentStamp-service';\r\nimport moment from 'moment';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\n\r\nexport const ScreenContext = createContext();\r\n\r\nexport const MarkingType = {\r\n Stamp: 1,\r\n Check: 2,\r\n Cross: 3,\r\n Calendar: 4,\r\n Sign: 5,\r\n Text: 6,\r\n NA: 7,\r\n FreeDrawing: 8\r\n};\r\n\r\nexport const FixedImage = {\r\n Check: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAOpJREFUOE9j/Prr63/uNm4GcsCt7FsMjAwNDP/J0QzTQ7IBmyM2M/iu8IXbSZIBD/IfMMgLyDPMOTOHIXVrKtgQog2AaQZramAE6STegJXBKxnCdMIgGpA0E+eCfwwM/xsh4czdzM3w7d83lDBH8cL/+v8MjI1Qt0GVgcRA4M+/PwyszawYEQY3gOkfE8Pfxr9gBZIdkgwvfr5ggGkGOxXNYKzRiKzhzfc3DCKcIhB/49CMNQyQDYHbQooBIE3EOJ1gSoQZgs/5BKNRmVeZ4e7nu3izCtEpEZcpjI8/PP4vO0GWrAy5M2YnAwDQEVzuLW10/AAAAABJRU5ErkJggg==',\r\n Cross: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAKFJREFUOE+1U8kNgDAMcxgB8eHHQuzABvxYgg8jMBoLsAJGhRZBFBDl6CdSFLu2lQhJommAtkXUq2ug6yCsKqLvo7DbcFlCCPAZekX9RDBNQJIchVk9U4EbFPH6fKV36aoiti0EgA4nEO/65xloEgN8HeIrglcW9uAg2+r5HM5D1J4dSVSIN9fzg00sCmIYbv6nxvIcspxzlgHjGEeSpgtmBnmGSrnWchiJAAAAAElFTkSuQmCC',\r\n // NA: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAcNJREFUOE/tlL1rVFEQxc8ZliWxtNt379tgpwhqqWilEhsLlYA2dgEL104LCxU//oOAK9oKgtikEgTRQiRNmggxxSs278576wcoWChLsnfksdmQ9aPaLXO7KeZ3z5wzDDHhxwnzsAsc39FtD9M0uU7amzzvLlfYZtNdNoufQ+i+2qpvmuF7CMWjqvY+aZEIIZSLO2VsA71PemYsp6d/Hc6ybz/StLEEyHIIxdUt4BoZz6+vdz/OzDQOxCirZvZJtfQA+kPoCJBk3QyPVYsrO4He+0MAnqnqwarROfdAxE6Z4YgIz+Z58fqfQICLJOZIO2Nm94cK09TdI2l5rncA0HuXiWDBDLMAyxB0/j9AqXw5GqOdJPmTtLfVyM65VZIXVfWDc+6YCN6TNgvIiRjjtampPY0sy3oVdGRkQFr1ev35xkZvpcoFwENA2mR8kefF/qohTf0CYK3RfbBzw3D+Aqrqk2YzOW3GKt02ya9mJiEUtwHUnHNKWlu1vDv4oLEUo3SKorj0h0I/X6vFd51OuTZYC39BpP+l35cbJG+p6or3fq+IzW1u2suyLMMg/eR4jLJPVZ+OAMdf6QFh9ziM7+TEPfwN4xzRFTcNfGsAAAAASUVORK5CYII=`\r\n NA: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAUCAYAAAB4d5a9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAShJREFUeNrsVLGKAkEMfZ5go2Bpp72FvYV/oH9gb2GvYONuoaC1gpWdYK9gr39gaWdpp51Wc/cIuczCyHHCXnM+CJkkm7ydvGUz+byLAAyRHuLMF4lDyvjAH+BN8jrJZALsdsBgkMzRfKzXyRx7aLXaExZ+XWr7vftGtWo5mj5Tr0u915O407Ge2cye8+3puhaLcL7bFb/dim82xR+PQKv1C004oNGwAT6YY/18BopFi1croFwO9wRJ+n3x02ky327LYL2FvjlzqkfwNiFNeB6NbNeqyWbj3PUa1lDh13/UZD4HbjeLKxVbjcZcKbUoFMTYoyv0kc3lokgDXvnxkP3Sn05AqSSD7nc5j8fA5SIEjJdLqRPsITn94WAk7x/kPyaJU+aIPwUYAIMN3CpVOzsAAAAAAElFTkSuQmCC`\r\n};\r\n\r\nexport const WorkFlowNewUsedProvider = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamProcessId = params.get('ProcessId') || '';\r\n\r\n const { showToast } = useContext(AppContext);\r\n\r\n const [widths] = useWindowSize();\r\n const tabView = widths < 1260 ? true : false;\r\n const tabSize = widths;\r\n\r\n const [screenState, setScreenState] = useState({\r\n allFilled: false,\r\n isReadonly: true,\r\n showNotesModal: false,\r\n showHistoryModal: false,\r\n showReturnReasonModal: false,\r\n showOcrDocHistory: false,\r\n documentRotateBy: 0,\r\n zoomFactor: 1,\r\n showMailModal: false,\r\n docInfoToMail: undefined,\r\n showAllDocModal: false,\r\n showWarning: false,\r\n showReturnReasonHistoryModal: false,\r\n showBarCode: false,\r\n showCustomerNotes: false,\r\n showHeaderDetails: false\r\n });\r\n\r\n const [state, setState] = useState({\r\n tabView: tabView ? true : false,\r\n selectedWorkflowId: +props.match.params.workflowId,\r\n selectedStockID: +props.match.params.stockID,\r\n selectedProcessId: ParamProcessId || props.ProcessId,\r\n workflows: [],\r\n workflowSteps: [],\r\n workflowStepsList: [],\r\n imagesFromUrl: [],\r\n isSelectedFilePdf: false,\r\n loadingDoc: false,\r\n currentVisibleDocName: undefined,\r\n hasSubmitedForm: false,\r\n selectedDocHistory: []\r\n });\r\n\r\n const [workflowData, setWorkflowData] = useState({\r\n currentChanges: {},\r\n fullMergedWorkflowData: {},\r\n tempMergedData: {},\r\n workflowDocs: [],\r\n jobBasicDetail: {},\r\n hasSomethingToSave: false,\r\n hasNotes: false\r\n });\r\n\r\n const [stampImages, setStampImages] = useState({\r\n loading: false,\r\n loaded: false,\r\n images: []\r\n });\r\n\r\n const [markingState, setMarkingState] = useState({\r\n markingType: null,\r\n isStart: false,\r\n isContinue: false,\r\n needModal: false,\r\n stamps: [],\r\n\r\n //below are for v2\r\n haveAnySelected: false,\r\n fabricCanvasData: {},\r\n base64FromFabric: {}\r\n });\r\n const [btnLoader, setBtnLoader] = useState({ btn1: false, btn2: false });\r\n\r\n let history = useHistory();\r\n\r\n const getListOptionById = (id) => {\r\n const list = state.workflowStepsList.filter((l) => l.id === id);\r\n return list && list.length === 1 ? list[0].listOptions : [];\r\n };\r\n\r\n const startMarkingMode = () => {\r\n setMarkingState((st) => ({ ...st, isStart: true, markingType: null }));\r\n };\r\n\r\n const stopMarkingMode = () => {\r\n setMarkingState((st) => {\r\n let newSt = { ...st };\r\n newSt.isStart = false;\r\n\r\n if (props.canUseNewStamp) {\r\n newSt.markingType = null;\r\n newSt.haveAnySelected = false;\r\n newSt.fabricCanvasData = {};\r\n newSt.base64FromFabric = {};\r\n } else {\r\n remove(newSt.stamps, (el) => el.isNew);\r\n newSt.stamps = [...newSt.stamps];\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const saveCanvasDataForPageNo = (pageNo, fullJson, base64Data, haveAnySelected) => {\r\n setMarkingState((st) => {\r\n let newSt = { ...st };\r\n newSt.markingType = newSt.isContinue ? newSt.markingType : null;\r\n newSt.fabricCanvasData = { ...newSt.fabricCanvasData, [pageNo]: fullJson };\r\n newSt.base64FromFabric = { ...newSt.base64FromFabric, [pageNo]: base64Data };\r\n newSt.haveAnySelected = haveAnySelected;\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const saveStampData = async () => {\r\n if (props.canUseNewStamp) {\r\n const canvasofPages = { ...markingState.base64FromFabric };\r\n let res = await saveNewStockJobDocumentsStampsV2(state.selectedStockID, state.selectedOcrDocId, state.selectedOcrDocName, canvasofPages);\r\n if (res.success) {\r\n stopMarkingMode();\r\n }\r\n return res;\r\n } else {\r\n const stampObj = { allStamps: markingState.stamps.map((c) => _.omit(c, 'isNew')) };\r\n let res = await saveNewStockJobDocumentsStamps(state.selectedStockID, state.selectedOcrDocId, state.selectedOcrDocName, stampObj);\r\n if (res.success) {\r\n setLoadedStamps(stampObj.allStamps);\r\n }\r\n return res;\r\n }\r\n };\r\n\r\n const updateState = (update) => {\r\n setState((st) => ({\r\n ...st,\r\n ...update\r\n }));\r\n };\r\n\r\n const addDocumentImagesData = (ocrDocId, docName, imgBase64Src) => {\r\n setState((st) => {\r\n const imagesFromUrl = [...st.imagesFromUrl];\r\n imagesFromUrl.push(imgBase64Src);\r\n return {\r\n ...st,\r\n selectedOcrDocId: ocrDocId,\r\n selectedOcrDocName: docName,\r\n imagesFromUrl\r\n };\r\n });\r\n };\r\n\r\n const hasAnythingToSave = () => {\r\n return values(markingState.fabricCanvasData).some((o) => o.objects.length);\r\n };\r\n\r\n const showMail = (docInfoToMail) => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showMailModal: true,\r\n docInfoToMail\r\n }));\r\n };\r\n\r\n const hideMail = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showMailModal: false,\r\n docInfoToMail: undefined\r\n }));\r\n };\r\n\r\n const showNotes = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showNotesModal: true\r\n }));\r\n };\r\n\r\n const hideNotesModal = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showNotesModal: false\r\n }));\r\n };\r\n\r\n const notesAdded = () => {\r\n setWorkflowData((st) => ({\r\n ...st,\r\n hasNotes: true\r\n }));\r\n };\r\n\r\n const showHistory = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showHistoryModal: true\r\n }));\r\n };\r\n\r\n const showReturnReason = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showReturnReasonModal: true\r\n }));\r\n };\r\n const hideReturnReason = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showReturnReasonModal: false\r\n }));\r\n };\r\n const showReturnReasonHistory = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showReturnReasonHistoryModal: true\r\n }));\r\n };\r\n\r\n const showAllDoc = () => {\r\n pullWorkflowDataAndSet();\r\n setScreenState((st) => ({\r\n ...st,\r\n showAllDocModal: true\r\n }));\r\n };\r\n const hideAllDoc = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showAllDocModal: false\r\n }));\r\n };\r\n\r\n const showDownload = (docInfoToMail) => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showDownloadModal: true,\r\n docInfoToMail\r\n }));\r\n };\r\n const hideDownload = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showDownloadModal: false,\r\n docInfoToMail: undefined\r\n }));\r\n };\r\n const hasPrev = (pageNo) => {\r\n return pageNo > 0;\r\n };\r\n\r\n const hasNext = (pageNo) => {\r\n let total = state.imagesFromUrl.length;\r\n return pageNo < total - 1;\r\n };\r\n\r\n const removeStamp = (stampId) => () => {\r\n setMarkingState((st) => {\r\n let newSt = { ...st };\r\n remove(newSt.stamps, (el) => el.id === stampId);\r\n newSt.stamps = [...newSt.stamps];\r\n return newSt;\r\n });\r\n };\r\n\r\n const addNewStamp = (newStamp, heightWidth) => {\r\n setMarkingState((st) => {\r\n let newSt = { ...st };\r\n newSt.markingType = newSt.isContinue ? newSt.markingType : null;\r\n newSt.stamps = [...newSt.stamps];\r\n const last = { ...newStamp, id: moment().valueOf(), isNew: true, info: { ...newStamp.info, ...heightWidth } };\r\n newSt.stamps.push(last);\r\n return newSt;\r\n });\r\n };\r\n\r\n const pullWorkflowDataAndSet = async (val = null) => {\r\n // val is true when we want to move workflow on submit\r\n getNewStockData(state.selectedStockID).then((res) => {\r\n if (res.success) {\r\n setWorkflowData((st) => ({\r\n ...st,\r\n currentChanges: {},\r\n fullMergedWorkflowData: res.data.workflowData,\r\n tempMergedData: {\r\n ...res.data.workflowData\r\n },\r\n workflowDocs: res.data.documents,\r\n jobBasicDetail: res.data.jobBasicDetail[0],\r\n hasNotes: res.data.hasNotes,\r\n hasSomethingToSave: false\r\n }));\r\n\r\n // if (isTechnician) {\r\n // //state.technicianJobId\r\n // history.push(\r\n // `/Job/${res.data.jobBasicDetail?.jobId}/${res.data.jobBasicDetail?.workflowID}/${state.technicianJobId}?ProcessId=${ParamProcessId}`\r\n // );\r\n // } else\r\n\r\n if (res.data.jobBasicDetail[0]?.workflowID && val) {\r\n console.log('opo');\r\n // history.push(`/Job/${res.data.jobBasicDetail?.jobId}/${res.data.jobBasicDetail?.workflowID}?ProcessId=${ParamProcessId}`);\r\n history.push(`/NewJob/${res.data.jobBasicDetail[0]?.newStockID}/${res.data.jobBasicDetail[0]?.workflowID}?ProcessId=${ParamProcessId}`);\r\n }\r\n }\r\n });\r\n };\r\n\r\n const tryToSaveWorkflowData = async (markComplete) => {\r\n markComplete == false ? setBtnLoader((st) => ({ ...st, btn1: true })) : setBtnLoader((st) => ({ ...st, btn2: true }));\r\n let res = await saveNewStockDataWorkflowData(\r\n state.selectedStockID,\r\n {\r\n done: markComplete,\r\n workflowData: workflowData.currentChanges,\r\n workflowId: state.selectedWorkflowId\r\n },\r\n state.technicianJobId\r\n );\r\n if (res.success) {\r\n pullWorkflowDataAndSet(true);\r\n //setWorkflowData(dt=>({...dt, currentChanges:{}, hasSomethingToSave: false}));\r\n markComplete && pullWorkflowSteps();\r\n markComplete == false ? setBtnLoader((st) => ({ ...st, btn1: false })) : setBtnLoader((st) => ({ ...st, btn2: false }));\r\n }\r\n return res;\r\n };\r\n\r\n const showOcrDocHistoryModal = () => {\r\n console.log('opopo');\r\n setScreenState((st) => ({\r\n ...st,\r\n showOcrDocHistory: true,\r\n showAllDocModal: false\r\n }));\r\n };\r\n\r\n const getDocumentHistory = (selectedStockID, ocrDocId) => {\r\n return getNewStockDocumentOcrDocumentHistoryForJob(selectedStockID, ocrDocId);\r\n };\r\n\r\n const getDocumentFromOcrDocId = (docId) => {\r\n return find(workflowData.workflowDocs, {\r\n ocrDocId: docId\r\n });\r\n };\r\n\r\n const hideReturnReasonHistory = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showReturnReasonHistoryModal: false\r\n }));\r\n };\r\n\r\n const hideHistoryModal = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showHistoryModal: false\r\n }));\r\n };\r\n\r\n const rotateDoc = (explicit = undefined) => {\r\n if (explicit === undefined) {\r\n setScreenState((st) => ({\r\n ...st,\r\n documentRotateBy: (st.documentRotateBy + 90) % 360\r\n }));\r\n } else {\r\n setScreenState((st) => ({\r\n ...st,\r\n documentRotateBy: explicit\r\n }));\r\n }\r\n };\r\n\r\n const setLoadedStamps = (stampData) => {\r\n setMarkingState((st) => ({ ...st, stamps: stampData || [], markingType: null }));\r\n };\r\n\r\n const dropDownValueSelected = (o) => {\r\n setWorkflowData((dt) => {\r\n const newSt = {\r\n ...dt\r\n };\r\n newSt.currentChanges = {\r\n ...newSt.currentChanges,\r\n ...o\r\n };\r\n newSt.tempMergedData = {\r\n ...newSt.tempMergedData,\r\n ...o\r\n };\r\n newSt.hasSomethingToSave = !_(newSt.currentChanges)\r\n .omitBy((a, b) => (newSt.fullMergedWorkflowData[b] || '') === a)\r\n .isEmpty();\r\n return newSt;\r\n });\r\n };\r\n\r\n const pullWorkflowSteps = () => {\r\n getWorkflowNewUsedJobStep(state.selectedWorkflowId, state.selectedStockID, true).then((res) => {\r\n if (res.success) {\r\n updateState({\r\n workflowSteps: res.data.steps\r\n });\r\n }\r\n });\r\n };\r\n\r\n const updateStampInfo = (stampId, info) => {\r\n setMarkingState((st) => {\r\n let newSt = { ...st };\r\n let stamp = st.stamps.find((s) => s.id === stampId);\r\n if (stamp) {\r\n stamp.info = { ...stamp.info, ...info };\r\n }\r\n newSt.stamps = [...newSt.stamps];\r\n return newSt;\r\n });\r\n };\r\n\r\n const markingTypeSelection = (e, typ) => {\r\n let other;\r\n switch (typ) {\r\n case MarkingType.Stamp:\r\n if (!stampImages.loading && !stampImages.loaded) {\r\n setStampImages((st) => ({ ...st, loading: true }));\r\n getBranchById(workflowData?.jobBasicDetail?.branchID).then((res) => {\r\n const imgs = res.data.stampImages.map((x) => ({ id: x.branchStampID, src: x.branchStampImage }));\r\n setStampImages((st) => ({ ...st, loading: false, loaded: true, images: imgs }));\r\n });\r\n }\r\n other = { isContinue: false, needModal: true };\r\n break;\r\n case MarkingType.Sign:\r\n case MarkingType.Text:\r\n other = { isContinue: false, needModal: true };\r\n break;\r\n case MarkingType.Check:\r\n case MarkingType.Cross:\r\n case MarkingType.NA:\r\n other = { isContinue: true, needModal: false };\r\n break;\r\n case MarkingType.Calendar:\r\n other = { isContinue: false, needModal: false };\r\n break;\r\n case MarkingType.FreeDrawing:\r\n other = { isContinue: true, needModal: false };\r\n break;\r\n default:\r\n other = { markingType: null, isContinue: false, needModal: false };\r\n break;\r\n }\r\n setMarkingState((st) => ({ ...st, ...other, markingType: typ }));\r\n };\r\n\r\n const setDocumentWithOcrDocId = (ocrDocId, docName) => {\r\n const doc = getDocumentFromOcrDocId(ocrDocId);\r\n if (doc) {\r\n doc.docName = docName;\r\n setWorkflowData((st) => ({\r\n ...st,\r\n workflowDocs: [...st.workflowDocs]\r\n }));\r\n } else {\r\n setWorkflowData((st) => ({\r\n ...st,\r\n workflowDocs: [\r\n ...st.workflowDocs,\r\n {\r\n ocrDocId,\r\n docName\r\n }\r\n ]\r\n }));\r\n }\r\n };\r\n\r\n const hideOcrDocHistoryModal = () => {\r\n setScreenState((st) => ({\r\n ...st,\r\n showOcrDocHistory: false\r\n }));\r\n pullWorkflowDataAndSet();\r\n };\r\n\r\n useEffect(() => {\r\n let fulFormFilled = true;\r\n state.workflowSteps\r\n .filter((s) => s.isRequired)\r\n .forEach((s) => {\r\n fulFormFilled = fulFormFilled && !!workflowData.tempMergedData[s.jsonPropertyName];\r\n return fulFormFilled;\r\n });\r\n let isReadonlyWorkflow = !some(state.workflowSteps, (s) => s.isEditable);\r\n setScreenState((st) => ({\r\n ...st,\r\n allFilled: fulFormFilled,\r\n isReadonly: isReadonlyWorkflow\r\n }));\r\n }, [workflowData.tempMergedData, state.workflowSteps]);\r\n\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n selectedStockID: +props.match?.params?.stockID,\r\n selectedWorkflowId: +props.match?.params?.workflowId,\r\n technicianJobId: props.match?.params?.technicianJobId || null,\r\n isTechReadonly: props.match?.params?.isTechReadonly,\r\n fromPage: props.match?.params?.frompage || ''\r\n }));\r\n }, [props.match?.params]);\r\n\r\n useEffect(() => {\r\n getWorkflowsByProcessID(state.selectedProcessId).then((res) => {\r\n if (res.success) {\r\n const buttons = res.data.map((w) => ({\r\n id: w.id,\r\n label: w.workflowName,\r\n isSelected: w.id === state.selectedWorkflowId\r\n }));\r\n updateState({\r\n workflows: buttons\r\n });\r\n }\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n pullWorkflowDataAndSet();\r\n }, [state.selectedStockID]);\r\n\r\n useEffect(() => {\r\n if (state.selectedWorkflowId) {\r\n getWorkflowListsAndOps(state.selectedWorkflowId).then((res) => {\r\n if (res.success) {\r\n updateState({\r\n workflowStepsList: res.data\r\n });\r\n }\r\n });\r\n }\r\n }, [state.selectedWorkflowId]);\r\n\r\n useEffect(() => {\r\n pullWorkflowSteps();\r\n }, [state.selectedStockID, state.selectedWorkflowId]);\r\n\r\n return (\r\n \r\n {props.children}\r\n \r\n );\r\n};\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport { PrimaryButton, SecondaryButton, TextBox } from '../../../../../Core/FormInput';\r\nimport { getStockJobNotes, addStockJobNotes, updateStockJobNotes } from '../../../../../Core/Service/jobNotes-service';\r\nimport moment from 'moment';\r\nimport { Delete, Edit } from '@material-ui/icons';\r\nimport { IconButton, Typography } from '@material-ui/core';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\n\r\nconst NotesModal = (props) => {\r\n const [state, setState] = useState({\r\n loading: false,\r\n notes: [],\r\n newNote: '',\r\n\r\n selectedID: 0,\r\n editMode: false,\r\n showDeleteConfirm: false\r\n });\r\n const [btnLoader, setBtnLoader] = useState(false);\r\n const [delBtnLoader, setDelBtnLoader] = useState(false);\r\n\r\n const JobSingleNote = (props) => {\r\n return (\r\n \r\n
\r\n {AppStorage.getCanAmendJobNotes() && (\r\n <>\r\n
handleEditNote(true, props.note)} style={{ padding: '0px' }}>\r\n \r\n \r\n
handleDeleteNote(true, props.note)} style={{ marginRight: '5px' }}>\r\n \r\n \r\n \r\n )}\r\n
{props.note.msg}
\r\n
\r\n
\r\n {props.note.by} @ {moment(props.note.at).format('LLL')}\r\n
\r\n
\r\n | {item.workflowName} | \r\n {item.createdBy} | \r\n {moment(item.createdAt).format('LLL')} | \r\n {item.movedBy} | \r\n {item.movedAt && moment(item.movedAt).format('LLL')} | \r\n
\r\n );\r\n};\r\n\r\nconst HistoryTable = ({ rec, loading }) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n | Workflow | \r\n Started By | \r\n Started At | \r\n Completed By | \r\n Completed At | \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {rec.map((r, i) => (\r\n \r\n ))}\r\n {rec.length === 0 && (\r\n \r\n | {loading ? 'Loading...' : 'No record found.'} | \r\n
\r\n )}\r\n \r\n
\r\n
\r\n | {item.returnDate && moment(item.returnDate).format('LLL')} | \r\n {item.returnReason} | \r\n {item.returnedBy} | \r\n \r\n {item.currentWorkFlow} => {item.returnedWorkFlow}\r\n | \r\n
\r\n );\r\n};\r\n\r\nconst HistoryTable = ({ rec, loading }) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n | Return Date | \r\n Return Reason | \r\n Returned By | \r\n Workflow Movement | \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {rec.map((r, i) => (\r\n \r\n ))}\r\n {rec.length === 0 && (\r\n \r\n | {loading ? 'Loading...' : 'No record found.'} | \r\n
\r\n )}\r\n \r\n
\r\n
\r\n | {item.ocrDocName} | \r\n {moment(item.createdAt).format('LLL')} | \r\n {item.createdBy} | \r\n \r\n \r\n \r\n showDoc(item)}\r\n disabled={isLoadingDoc}\r\n >\r\n {isLoadingDoc && currentVisibleDocName === item?.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 docAction(item)}>\r\n \r\n \r\n \r\n \r\n downlaodOCRDocHandler(item, false)}>\r\n \r\n \r\n \r\n | \r\n
\r\n );\r\n};\r\n\r\nconst DocTable = ({ rec, showDoc, HandelMailDocument, DownloadOcrDocument, currentVisibleDocName, isLoadingDoc }) => {\r\n return (\r\n <>\r\n {/* \r\n \r\n \r\n | Document | \r\n Created At | \r\n Created By | \r\n Action | \r\n
\r\n \r\n
*/}\r\n \r\n
\r\n \r\n \r\n | Document | \r\n Created At | \r\n Created By | \r\n Action | \r\n
\r\n \r\n \r\n {rec.map((r, i) => (\r\n \r\n ))}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {step.stepLabel}\r\n {step.isRequired && *}\r\n
\r\n
{getDocumentAction()}
\r\n
\r\n
\r\n {step.isTextboxType ? (\r\n
onDropdownChange({ [step.jsonPropertyName]: e.target.value })}\r\n />\r\n ) : (\r\n ops && (\r\n \r\n )\r\n )}\r\n {step.webFormTypeId && (\r\n \r\n )}\r\n {step.dynamicFormID && (\r\n \r\n )}\r\n \r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumsold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumtaken) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumeff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcost) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumprofit) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(summarginPerc) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumrecRate) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, fn: state.fn?.id || '' },\r\n primaryKey: 'opno',\r\n dataSource: [],\r\n\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`,\r\n // headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n // success: opGridOnSuccessFunc\r\n // },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n\r\n setDataSource(opGrid, `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`);\r\n opGrid.reload();\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, opno) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, opno: opno, fn: state.fn?.id || '' },\r\n primaryKey: 'id',\r\n dataSource: [],\r\n\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}`,\r\n // headers: {\r\n // Authorization: `Bearer ${token}`,\r\n // domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n // },\r\n // success: onSuccessWipFunc\r\n // },\r\n columns: NewWipcolumns,\r\n pager: { limit: 10 }\r\n });\r\n setTimeout(() => {\r\n setDataSource(wipsGrid, `${ExpBaseURL}/api/services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}`);\r\n wipsGrid.reload();\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullInvoiceHours();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.BranchList, state.fn]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/DailyInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&fn=${state?.fn?.id}${\r\n getUrl.includes('?') ? '&' : '?'\r\n }fileType=excel`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'InvoicedHours');\r\n };\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n Select Franchise\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumIdleHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumProductiveHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumNonProductiveHours) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n headerFilter: false,\r\n primaryKey: 'rc',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: nominalColumns,\r\n detailTemplate: ''\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, rc) {\r\n console.log(rc, 'ressss');\r\n techGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, res: rc },\r\n headerFilter: false,\r\n primaryKey: 'rn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechFun\r\n },\r\n columns: techCol\r\n });\r\n });\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/IdleTimeAnalysis${getUrl.includes('?') ? '&' : '?'}fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'IdelTimeAnalysis');\r\n };\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list.map((p) => {\r\n console.log(p, 'p');\r\n return {\r\n ...p,\r\n totalAmount: p.currentMonthTotal + p.oneMonthTotal + p.twoMonthsTotal + p.threeMonthsTotal + p.fourMonthsAndOverTotal\r\n };\r\n }),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AgedMeasuresDashBoard;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\nconst baseColumns = [\r\n { field: 'branch', sortable: false, title: `Branch`, width: 180, filterable: false },\r\n {\r\n field: 'currentProvision',\r\n title: `Current Provision`,\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'provisionRequired',\r\n sortable: true,\r\n title: `Provision Required`,\r\n width: 130,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'provisionDifference',\r\n sortable: true,\r\n title: `Provision Difference`,\r\n width: 140,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n { field: 'totalAmount', sortable: true, title: `Total`, width: 120, showColumnTotal: true, align: 'right', filterable: false, isCurrency: true },\r\n { field: 'currentMonthTotal', sortable: true, title: `Current`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n {\r\n field: 'oneMonthTotal',\r\n sortable: true,\r\n title: `1 Month`,\r\n width: 150,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false\r\n },\r\n { field: 'twoMonthsTotal', sortable: true, title: `2 Months`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n { field: 'threeMonthsTotal', sortable: true, title: `3 Months`, width: 120, showColumnTotal: true, align: 'right', filterable: false },\r\n {\r\n field: 'fourMonthsAndOverTotal',\r\n sortable: true,\r\n title: '4+ Months',\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false\r\n },\r\n {\r\n field: 'unallocatedItemsTotal',\r\n title: 'Unallocated',\r\n width: 120,\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n }\r\n];\r\n// const crumbs = (path) => [\r\n// { name: 'Home', path: '/' },\r\n// { name: 'Aged Measures', path: '/AgedMeasures' },\r\n// { name: `${path}`, active: true }\r\n// ];\r\n\r\nconst crumbs = (val, menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Reports', path: '/ReportsDashboard' });\r\n }\r\n if (val) {\r\n list.push({ name: 'Aged Measures', path: '/AgedMeasures' }, { name: val, active: true });\r\n }\r\n return list;\r\n};\r\n\r\nconst GetAllBranchByAgedMeasures = (props) => {\r\n const history = useHistory();\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Measuredesc = decodeURIComponent(params.get('measuredesc') || '');\r\n let MeasureID = params.get('MeasureID') || '';\r\n\r\n const redirectToScreens = (value, record, MeasureID, field) => {\r\n let searchQuery = `?branchID=${record.branchID}&bn=${\r\n record.branch\r\n }&measuredesc=${Measuredesc}&MeasureID=${MeasureID}&fromPage=${'Aged Measures'}&month=${field.month == 0 ? 0 : field.month || ''}&unallocated=${\r\n field.unallocated || ''\r\n }`;\r\n if (MeasureID == '1') {\r\n history.push({\r\n pathname: '/sales/AgedMeasuresWorkingProgress',\r\n search: searchQuery\r\n });\r\n } else if (MeasureID == '17') {\r\n history.push({\r\n pathname: '/sales/AgedMeasuresWorkingProgress',\r\n search: `${searchQuery}&DepartmentDes=${record.department}&departmentCode=${record.departmentCode}`\r\n });\r\n } else if (MeasureID == '2') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n search: searchQuery\r\n });\r\n } else if (MeasureID == '6' || MeasureID == '21') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n search: `${searchQuery}&departmentCode=${record.departmentCode}&isGroupingById=prSentTo`\r\n });\r\n } else if (MeasureID == '3' || MeasureID == '4' || MeasureID == '5' || MeasureID == '7') {\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n search: `${searchQuery}&departmentCode=${record.departmentCode || ''}`\r\n });\r\n } else return false;\r\n };\r\n\r\n const editButton = (field) => (value, record) => {\r\n let isClickable = record?.accessAllowed?.trim() === 'Y';\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, MeasureID, field) : ''}\r\n style={{ cursor: isClickable ? 'pointer' : '' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const monthsActionHandler = (field) => (value, record) => {\r\n let isClickable = record?.accessAllowed?.trim() === 'Y';\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, MeasureID, field) : ''}\r\n style={{ cursor: isClickable ? 'pointer' : '' }}\r\n >\r\n {addCommas(value)}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n // const totalAmountWrapper = (value, record) => {\r\n // const spn = document.createElement('span');\r\n // const lnk = (\r\n // \r\n // {addCommas(record.currentMonthTotal + record.oneMonthTotal + record.twoMonthsTotal + record.threeMonthsTotal + record.fourMonthsAndOverTotal)}\r\n // \r\n // );\r\n // ReactDOM.render(lnk, spn);\r\n // return spn;\r\n // };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let branchCol = tempCols.find((element) => element.field === 'branch');\r\n // let totalAmount = tempCols.find((element) => element.field === 'totalAmount');\r\n let currentMonthTotalCol = tempCols.find((element) => element.field === 'currentMonthTotal');\r\n let oneMonthTotalCol = tempCols.find((element) => element.field === 'oneMonthTotal');\r\n let twoMonthTotalCol = tempCols.find((element) => element.field === 'twoMonthsTotal');\r\n let threeMonthTotalCol = tempCols.find((element) => element.field === 'threeMonthsTotal');\r\n let fourPlusMonthTotalCol = tempCols.find((element) => element.field === 'fourMonthsAndOverTotal');\r\n let unallocatedTotalCol = tempCols.find((element) => element.field === 'unallocatedItemsTotal');\r\n if (branchCol) {\r\n branchCol.renderer = editButton({});\r\n }\r\n // if (totalAmount) {\r\n // totalAmount.renderer = totalAmountWrapper;\r\n // }\r\n if (currentMonthTotalCol) {\r\n currentMonthTotalCol.renderer = monthsActionHandler({ month: 0, toolTipLabel: 'currentMonthCount' });\r\n }\r\n if (oneMonthTotalCol) {\r\n oneMonthTotalCol.renderer = monthsActionHandler({ month: 1, toolTipLabel: 'oneMonthCount' });\r\n }\r\n if (twoMonthTotalCol) {\r\n twoMonthTotalCol.renderer = monthsActionHandler({ month: 2, toolTipLabel: 'twoMonthsCount' });\r\n }\r\n if (threeMonthTotalCol) {\r\n threeMonthTotalCol.renderer = monthsActionHandler({ month: 3, toolTipLabel: 'threeMonthsCount' });\r\n }\r\n if (fourPlusMonthTotalCol) {\r\n fourPlusMonthTotalCol.renderer = monthsActionHandler({ month: 4, toolTipLabel: 'fourMonthsAndOverCount' });\r\n }\r\n if (unallocatedTotalCol) {\r\n unallocatedTotalCol.renderer = monthsActionHandler({ unallocated: 1, toolTipLabel: 'unallocatedItemsCount' });\r\n }\r\n return tempCols;\r\n }, [MeasureID]);\r\n\r\n const baseUrl = `AgedMeasures/GetAllBranchByAgedMeasures?MeasureID=${MeasureID}`;\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list.map((p) => {\r\n return {\r\n ...p,\r\n totalAmount: p.currentMonthTotal + p.oneMonthTotal + p.twoMonthsTotal + p.threeMonthsTotal + p.fourMonthsAndOverTotal\r\n };\r\n }),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n // hidePagination={true}\r\n hideFilterRow={true}\r\n downloadName={Measuredesc || 'Aged Measures'}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetAllBranchByAgedMeasures;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { AppStorage } from '../../../../../../Core/Service/storage-service';\r\nimport formatters from '../../../../../../Core/Grid/inputFormatter';\r\n\r\nconst getCrumbs = (menuPermissionCounter, ParamMeasureID, ParamMeasuredesc, ParamBranchName, ParamMonth, ParamUnallocated) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '' }\r\n // { name: 'Aged Measures', active: true }\r\n ];\r\n if (menuPermissionCounter !== 1) {\r\n final.push({ name: 'Reports', path: '/ReportsDashboard' });\r\n }\r\n final.push({ name: 'Aged Measures', path: '/AgedMeasures' });\r\n\r\n if (ParamMeasureID == '2') {\r\n temp = { name: `${ParamMeasuredesc}`, path: `/AgedMeasures/DirtyUnits?measuredesc=${ParamMeasuredesc}&MeasureID=${ParamMeasureID}` };\r\n } else {\r\n temp = { name: `${ParamMeasuredesc}`, active: true };\r\n }\r\n final = [...final, { ...temp }];\r\n if (ParamBranchName) {\r\n temp = {\r\n name: `${ParamBranchName} ${ParamMonth > 0 ? `(${ParamMonth} ${ParamMonth == 1 ? 'Month' : 'Months'})` : ''} ${\r\n ParamUnallocated > 0 ? `(Unallocated)` : ''\r\n }`,\r\n active: true\r\n };\r\n }\r\n final = [...final, { ...temp }];\r\n return final;\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Part Number', field: 'pnp', width: 110, sortable: true },\r\n { title: 'Description', field: 'pd', width: 150, sortable: true },\r\n { title: 'Quantity', field: 'qty', width: 50, sortable: true, align: 'right' },\r\n {\r\n title: 'Surcharge',\r\n field: 'sv',\r\n width: 100,\r\n sortable: true,\r\n isCurrency: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Sale Surcharge',\r\n field: 'ssv',\r\n width: 100,\r\n sortable: true,\r\n isCurrency: true,\r\n align: 'right'\r\n },\r\n { title: 'Location', field: 'bl', width: 90, sortable: true },\r\n // {\r\n // title: 'Last Purchased',\r\n // field: 'dlp',\r\n // width: 90,\r\n // sortable: true,\r\n // renderer: formatters.MonthShortFormatter\r\n // },\r\n {\r\n title: 'Date Last Moved',\r\n field: 'dlm',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Last Sold',\r\n field: 'dls',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Last Returned',\r\n field: 'dlb',\r\n width: 90,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n { title: 'Months', field: 'am', width: 60, sortable: true, align: 'right' },\r\n { title: 'Days', field: 'ad', width: 60, sortable: true, align: 'right' }\r\n // { title: 'Branch', field: 'bn', width: 100, sortable: true }\r\n];\r\n\r\nconst GetAgedMeasuresDirtyUnits = (props) => {\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamMeasureID = params.get('MeasureID') || '';\r\n let ParamMeasuredesc = decodeURIComponent(params.get('measuredesc') || '');\r\n let ParamMonth = params.get('month') || '';\r\n let ParamBranchName = params.get('bn') || '';\r\n let ParamBranchId = params.get('branchID') || params.get('branchId') || '';\r\n let ParamUnallocated = params.get('unallocated') || '';\r\n if (ParamMeasureID !== '2') {\r\n baseColumns.push({ title: 'Branch', field: 'bn', width: 100, sortable: true });\r\n }\r\n\r\n const baseUrl = `AgedMeasures/GetAgedMeasuresDirtyUnits?BranchID=${ParamBranchId}&mont=${ParamMonth}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetAgedMeasuresDirtyUnits;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport moment from 'moment';\r\nimport { PrimaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addReportingNotes, getReportingNotes } from '../../../../Core/Service/ReportScreens-service';\r\nimport './reportingNotes.scss';\r\nconst JobSingleNote = (props) => {\r\n return (\r\n \r\n
{props.note.reportingAccountQueryNotes}
\r\n
\r\n {props.note.userName} @ {moment(props.note.reportingAccountQueryCreated).format('LLL')}\r\n
\r\n
\r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n {state.showLoader ? (\r\n \r\n \r\n
\r\n \r\n | Invoice Name | \r\n Stockbook Number | \r\n Order Date | \r\n Reg Date | \r\n
\r\n \r\n | {iname} | \r\n {sn} | \r\n {od} | \r\n {rd} | \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n detailTemplate={detailTemplate}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n FilterdParamsValues={{ mc: ParamMc }}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default GetUsedAndNewVehicleDebt;\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, Hidden, Collapse } from '@material-ui/core';\r\nimport { Multiselect, SecondaryButton, DatePicker } from '../../../../Core/FormInput';\r\nimport NestedGijgoGrid from '../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport { getReportsDropdowns } from '../../../../Core/Service/reportService';\r\nimport FilterListIcon from '@material-ui/icons/FilterList';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst baseColumns = [\r\n { title: 'Type', field: 'moi_type', width: 40, sortable: true },\r\n { title: 'Sales Type', field: 'salestypedesc', width: 55, sortable: true },\r\n { title: 'Branch', field: 'branchdesc', width: 110, sortable: true },\r\n { title: 'Date', field: 'solddate', width: 59, sortable: true },\r\n { title: 'Name', field: 'name', width: 90, sortable: true },\r\n { title: 'Make', field: 'modelofinterestmanu', width: 80, sortable: true },\r\n { title: 'Model', field: 'modelofinterestmodel', width: 130, sortable: true },\r\n { title: 'Reg No', field: 'regNo', width: 55, sortable: true },\r\n // { title: 'Profit', field: 'ownedbydesc', width: 80, sortable: true },// need to add this column\r\n { title: 'Media', field: 'mediasourcelabel', width: 70, sortable: true },\r\n {\r\n title: 'Cash/Finance',\r\n field: 'isfinanced',\r\n width: 60,\r\n sortable: true\r\n },\r\n { title: 'Sales Exec', field: 'ownedbydesc', width: 70, sortable: true }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return `\r\n
\r\n \r\n | Id | \r\n Monthly Payment | \r\n Deposit | \r\n Mileage | \r\n Description | \r\n PX Reg | \r\n PX DOR | \r\n PX Condition | \r\n PX Offer | \r\n Settlement | \r\n
\r\n \r\n | {enquiry_id} | \r\n {approxmonthlypayment} | \r\n {deposit} | \r\n {Mileage} | \r\n {px_description} | \r\n {partExchange} | \r\n {px_dor} | \r\n {px_condition} | \r\n {px_offered} | \r\n {px_settlement} | \r\n
\r\n
\r\n
{partExchange} | \r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Enquiry', path: '/', active: true }\r\n];\r\n\r\nconst EnquirieList = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n\r\n let startDate = moment().startOf('month').format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n moiType: '',\r\n isReload: null,\r\n franchiseIds: [],\r\n bnIds: [],\r\n branchList: [],\r\n franchise: []\r\n });\r\n\r\n const [checked, setChecked] = React.useState(false);\r\n\r\n const handleChange = () => {\r\n setChecked((prev) => !prev);\r\n };\r\n\r\n const [selectedData, setSelectedData] = useState({\r\n brnIds: [],\r\n fnIds: []\r\n });\r\n useEffect(async () => {\r\n let DropDownRes = await getReportsDropdowns();\r\n if (DropDownRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: DropDownRes.data.branch,\r\n franchise: DropDownRes.data.franchiseCode\r\n }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n startDate: params.get('start') || startDate,\r\n endDate: params.get('end') || endDate,\r\n moiType: params.get('type') || '',\r\n franchiseIds: props.location?.state?.fnCode,\r\n bnIds: props.location?.state?.bn\r\n }));\r\n }, [window.location.search]);\r\n\r\n useEffect(() => {\r\n if (state.branchList.lenght > 0 || state.franchise.length > 0) {\r\n const selectedfranchises = state.franchise.filter((w) => props.location?.state?.fnCode?.indexOf(w.id) > -1);\r\n const selectedCust = state.branchList.filter((w) => props.location?.state?.bn?.indexOf(w.id) > -1);\r\n setSelectedData((st) => ({\r\n ...st,\r\n brnIds: selectedCust,\r\n fnIds: selectedfranchises\r\n }));\r\n }\r\n }, [props.location?.state, state.branchList, state.franchise]);\r\n\r\n const fieldChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n const handleChanges = (e, value) => {\r\n setSelectedData((st) => ({ ...st, brnIds: value }));\r\n setState((st) => {\r\n const nst = { ...st, bnIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangesfranch = (e, value) => {\r\n setSelectedData((st) => ({ ...st, fnIds: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchiseIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n let FranchiseCode = `FranchiseCode=${state.franchiseIds.join('&FranchiseCode=')}`;\r\n let BranchID = state.bnIds.length > 0 ? `BranchID=${state.bnIds.join('&BranchID=')}` : '';\r\n const RenderFinance = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {record.isfinanced}({record.financeterm})\r\n
\r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let isFinancedCol = tempCols.find((element) => element.field === 'isfinanced');\r\n if (isFinancedCol) {\r\n isFinancedCol.renderer = RenderFinance();\r\n }\r\n return tempCols;\r\n }, []);\r\n const baseUrl = `AgedMeasures/GetEnquirieList?moi_type=${state.moiType}&StartDate=${state.startDate}&EndDate=${state.endDate}&${FranchiseCode}&${BranchID}`;\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Filters\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
| \r\n ))}\r\n \r\n \r\n \r\n {/* */}\r\n \r\n 600 ? 'block' : 'none' }} className=\"custom-scroll\">\r\n {props.data.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n
\r\n {' '}\r\n
\r\n
{m.name}
\r\n
({m.total})
\r\n
\r\n
\r\n );\r\n })}\r\n
\r\n
\r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n Select Franchise\r\n \r\n \r\n \r\n \r\n \r\n {state.showLoader ? (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.total)}
\r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n Total\r\n {formatters.ThousandSeparatorWithoutZero(state?.totalsoldbyBranch)}
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Sold Hours (Month)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Idle Time ( Total : {formatters.ToFixedSeparator(state.totalTotalIdle)} )\r\n {/* Idle Time ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n {state.idleHours.map((k, i) => (\r\n \r\n \r\n {k.name}\r\n {formatters.ToFixedSeparator(k.total)}
\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Parts\r\n {/* ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n\r\n {state.filterPartList?.length > 0 ? (\r\n state.filterPartList?.map((k, i) => (\r\n \r\n \r\n {k.bn}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.saleValue)}
\r\n Value\r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.grossProfit)}
\r\n Profit\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n No Record Found
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n = 6 ? 12 : 6}>\r\n \r\n \r\n \r\n \r\n Technician Efficiency\r\n {/* ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n {state.techEff.length > 0 ? (\r\n state.techEff.map((k, i) => (\r\n = 6 ? 1 : 2} className=\"Cursor\">\r\n \r\n {k.name}\r\n {k.total}%
\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n No Record Found
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n = 6 ? 12 : 6}>\r\n \r\n \r\n \r\n \r\n Work In Progress Clocked Hours ( Total : {formatters.ToFixedSeparator(state.totalWipHours)} )\r\n {/* ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n {state.WipHour.length > 0 ? (\r\n state.WipHour.map((k, i) => (\r\n = 6 ? 1 : 2} className=\"Cursor\">\r\n \r\n {k.name}\r\n {formatters.ToFixedSeparator(k.total)}
\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n No Record Found
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n = 6 ? 12 : 6}>\r\n \r\n \r\n \r\n \r\n Service Warranty Write off\r\n {/* ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n {state?.servicecWarrenty.length > 0 ? (\r\n state?.servicecWarrenty?.map((k, i) => (\r\n = 6 ? 1 : 2} className=\"Cursor\">\r\n \r\n {k.name}\r\n {formatters.ThousandSeparatorWithoutZero(k.total)}
\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n No Record Found
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n = 6 ? 12 : 6}>\r\n \r\n \r\n \r\n \r\n Part Warranty Write off\r\n {/* ( Total : {Math.round(state.totalTotalIdle)} ) */}\r\n \r\n \r\n {state?.partWarrenty?.length > 0 ? (\r\n state?.partWarrenty?.map((k, i) => (\r\n = 6 ? 1 : 2} className=\"Cursor\">\r\n \r\n {k.name}\r\n {formatters.ThousandSeparatorWithoutZero(k.total)}
\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n \r\n No Record Found
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n \r\n \r\n Work In Progress Clocked Hours\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n {/* \r\n \r\n \r\n \r\n \r\n Service Warranty Write off\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Part Warranty Write off\r\n \r\n\r\n \r\n
\r\n \r\n \r\n */}\r\n \r\n )}\r\n {/* \r\n \r\n \r\n \r\n \r\n Sold Hours By Month Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sold Hours By Branch\r\n \r\n \r\n
\r\n \r\n \r\n */}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ServiceDashboard;\r\n","import { Checkbox, FormControlLabel, FormLabel, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useContext } from 'react';\r\nimport { useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addInvoiceCustomer } from '../../../../Core/Service/InvoiceScreen-service';\r\n\r\nconst InvoiceCustomersAddScreen = () => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const [state, setState] = useState({\r\n errors: {},\r\n customerCode: '',\r\n name: '',\r\n address1: '',\r\n address2: '',\r\n address3: '',\r\n postcode: '',\r\n contactName: '',\r\n contactPhone: '',\r\n invoiceEmail: '',\r\n sendInvoiceByEmail: false,\r\n shortName: '',\r\n address4: '',\r\n address5: ''\r\n });\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n\r\n newSt[name] = value;\r\n\r\n return newSt;\r\n });\r\n };\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const validations = (mode) => {\r\n const { name } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!name) {\r\n errors.name = 'Customer Name is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n let data = {\r\n Id: state.id,\r\n customerCode: state.customerCode,\r\n name: state.name,\r\n address1: state.address1,\r\n address2: state.address2,\r\n address3: state.address3,\r\n postcode: state.postcode,\r\n contactName: state.contactName,\r\n contactPhone: state.contactPhone,\r\n invoiceEmail: state.invoiceEmail,\r\n sendInvoiceByEmail: state.sendInvoiceByEmail,\r\n shortName: state.shortName,\r\n address4: state.address4,\r\n address5: state.address5\r\n };\r\n let res = await addInvoiceCustomer(data);\r\n if (res.success) {\r\n showToast(`Customer added with Id ${res.customerId}`);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Short Name\r\n \r\n {state.errors['shortName']}\r\n \r\n \r\n Account Code\r\n \r\n {state.errors['customerCode']}\r\n \r\n \r\n Name\r\n \r\n {state.errors['name']}\r\n \r\n \r\n Address 1\r\n \r\n {state.errors['address1']}\r\n \r\n \r\n Address 2\r\n \r\n {state.errors['address2']}\r\n \r\n \r\n Address 3\r\n \r\n {state.errors['address3']}\r\n \r\n \r\n Address 4\r\n \r\n {state.errors['address4']}\r\n \r\n \r\n Address 5\r\n \r\n {state.errors['address5']}\r\n \r\n \r\n Postcode\r\n \r\n {state.errors['postcode']}\r\n \r\n \r\n Phone\r\n \r\n {state.errors['Reason']}\r\n \r\n\r\n \r\n Contact Name\r\n \r\n {state.errors['contactName']}\r\n \r\n \r\n Contact Phone\r\n \r\n {state.errors['contactPhone']}\r\n \r\n\r\n \r\n Invoice Email\r\n \r\n {state.errors['invoiceEmail']}\r\n \r\n \r\n }\r\n label=\"Send Invoice by email?\"\r\n />\r\n \r\n \r\n \r\n Add\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default InvoiceCustomersAddScreen;\r\n","import { Checkbox, FormControlLabel, Grid, InputLabel } from '@material-ui/core';\r\nimport React, { useContext, useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { SecondaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { editInvoiceCustomer, getInvoiceCustomerById } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport { isNull } from 'lodash';\r\nimport { emailValidation } from '../../../../Core/Service/StaticService';\r\n\r\nconst InvoiceCustomersEditScreen = (props) => {\r\n const [state, setState] = useState({ errors: {}, custData: {}, invoiceEmail: '', customerInvoiceEmailSubject: '', sendInvoiceByEmail: false });\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n let res = await getInvoiceCustomerById(props.customerId);\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst.custData = res.data.table[0];\r\n nst.sendInvoiceByEmail = res.data.table[0].sendInvoiceByEmail;\r\n nst.invoiceEmail = res.data.table[0].invoiceEmail;\r\n nst.customerInvoiceEmailSubject = res.data.table[0].customerInvoiceEmailSubject;\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleCheckbox = (event) => {\r\n const { name, checked } = event.target;\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst[name] = checked;\r\n return nst;\r\n });\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let newSt = { ...st };\r\n\r\n newSt[name] = value;\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const validations = () => {\r\n const { invoiceEmail, customerInvoiceEmailSubject } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!emailValidation(invoiceEmail)) {\r\n errors.invoiceEmail = 'Invalid Email Id';\r\n formIsValid = false;\r\n }\r\n if (customerInvoiceEmailSubject == null || customerInvoiceEmailSubject == '') {\r\n errors.customerInvoiceEmailSubject = 'Email Subject cannot be empty';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n let data = {\r\n id: props.customerId,\r\n invoiceEmail: state.invoiceEmail,\r\n customerInvoiceEmailSubject: state.customerInvoiceEmailSubject,\r\n sendInvoiceByEmail: state.sendInvoiceByEmail\r\n };\r\n\r\n let res = await editInvoiceCustomer(data);\r\n if (res.success) {\r\n showToast(`Customer Updated Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {`Name`}\r\n \r\n \r\n {`${state.custData.customerSName}(${state.custData.customerCode})`}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Address\r\n \r\n \r\n {`${state.custData.addressLine1} ${state.custData.addressLine2} ${state.custData.addressLine3} ${state.custData.addressLine4} ${state.custData.addressLine5}`}\r\n \r\n \r\n \r\n\r\n \r\n }\r\n label=\"Send Invoice by email?\"\r\n />\r\n \r\n \r\n \r\n Invoice Email {`(Please use comma to separate multiple email addresses)`}\r\n \r\n\r\n \r\n {state.errors['invoiceEmail']}\r\n \r\n \r\n \r\n Email Subject {`(Tags as placeholders: {invoicereferencenumber} {branchname} {customername})`}\r\n \r\n\r\n \r\n {state.errors['customerInvoiceEmailSubject']}\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default InvoiceCustomersEditScreen;","import { Grid, Typography } from '@material-ui/core';\r\nimport React, { useContext, useEffect, useState } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport CustomeEditor from '../../../../Core/CkEditor';\r\nimport { SecondaryButton } from '../../../../Core/FormInput';\r\nimport { getInvoiceCustomerById, editInvoiceCustomerNote } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport './style.scss'\r\n\r\nconst InvoiceCustomersNoteScreen = (props) => {\r\n const [state, setState] = useState({ errors: {}, custData: {}, customerInternalNotes: '' });\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n useEffect(async () => {\r\n let res = await getInvoiceCustomerById(props.customerId);\r\n setState((st) => {\r\n const nst = { ...st };\r\n nst.custData = res.data.table[0];\r\n nst.customerInternalNotes = res.data.table[0].customerInternalNotes ? res.data.table[0].customerInternalNotes : \"\";\r\n return nst;\r\n });\r\n }, []);\r\n\r\n const handleSubmit = async () => {\r\n let data = {\r\n id: props.customerId,\r\n customerInternalNotes: state.customerInternalNotes\r\n };\r\n\r\n let res = await editInvoiceCustomerNote(data);\r\n if (res.success) {\r\n showToast(`Customer Updated Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n\r\n const handleCkeditorstate = (name) => (event, editor) => {\r\n const data = editor.getData();\r\n setState((st) => ({ ...st, [name]: data }));\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {`Name`}\r\n \r\n \r\n {`${state.custData.customerSName}(${state.custData.customerCode})`}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Address\r\n \r\n \r\n {`${state.custData.addressLine1} ${state.custData.addressLine2} ${state.custData.addressLine3} ${state.custData.addressLine4} ${state.custData.addressLine5}`}\r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n Customer Notes\r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default InvoiceCustomersNoteScreen;","import { Grid } from '@material-ui/core';\r\nimport React, { useMemo } from 'react';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../ReportsScreens/GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport { NoteAdd } from '@material-ui/icons';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { SecondaryButton, SquareButton } from '../../../../Core/FormInput/AppButton';\r\nimport InvoiceCustomersAddScreen from './addScreen';\r\nimport { useState } from 'react';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport InvoiceCustomersEditScreen from './editScreen';\r\nimport InvoiceCustomersNoteScreen from './noteScreen';\r\nimport { getCustomerExcelFile } from '../../../../Core/Service/customer-services';\r\nimport moment from 'moment/moment';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { Tooltip, IconButton } from '@material-ui/core';\r\n\r\nconst baseColumns = [\r\n { field: 'action', sortable: false, title: `Action`, width: 30, filterable: false },\r\n {\r\n field: 'name',\r\n title: `Customer Name`,\r\n width: 120\r\n },\r\n {\r\n field: 'customerCode',\r\n title: `Code`,\r\n width: 40\r\n },\r\n {\r\n field: 'invoiceEmail',\r\n title: `Invoice Email`,\r\n width: 120\r\n },\r\n {\r\n field: 'address1',\r\n title: `Address`,\r\n width: 120\r\n },\r\n {\r\n field: 'town',\r\n title: `Town`,\r\n width: 80\r\n },\r\n {\r\n field: 'contactName',\r\n title: `Contact Name`,\r\n width: 100\r\n }\r\n];\r\nconst crumbs = (path) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Invoices', active: true },\r\n { name: `Customers`, active: true }\r\n];\r\n\r\nconst InvoiceCustomersListScreen = (props) => {\r\n const [state, setState] = useState({ showModal: false });\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleEdit(record)}\r\n >\r\n \r\n \r\n \r\n \r\n handleNote(record)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let branchCol = tempCols.find((element) => element.field === 'action');\r\n\r\n if (branchCol) {\r\n branchCol.renderer = editButton({});\r\n }\r\n\r\n return tempCols;\r\n }, [props.MeasureID]);\r\n\r\n const handleEdit = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showEditModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleNote = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showNoteModal: true,\r\n custId: record.customerId\r\n }));\r\n };\r\n\r\n const handleEditClose = (res) => {\r\n let newSt = {};\r\n newSt.showEditModal = false;\r\n newSt.showNoteModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setState((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const downloadCSVWrapper = async () => {\r\n getCustomerExcelFile();\r\n };\r\n\r\n const baseUrl = `Customers/CustomerList`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: true\r\n }))\r\n }\r\n startIcon={}\r\n >\r\n Add Customer\r\n \r\n */}\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n // records: res?.data?.list.map((p) => ({ ...p })),\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n // isShowTotal={true}\r\n // hidePagination={true}\r\n // hideFilterRow={true}\r\n />\r\n \r\n \r\n\r\n {state.showModal ? (\r\n
handleClose(false)} fullWidth>\r\n handleClose(true)} />\r\n \r\n ) : null}\r\n {state.showEditModal ? (\r\n
handleEditClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.showNoteModal ? (\r\n
handleEditClose(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n
\r\n {/* \r\n \r\n Send Email\r\n \r\n */}\r\n \r\n \r\n \r\n Send Email\r\n \r\n \r\n \r\n {state.error.email}\r\n \r\n \r\n {/* Email */}\r\n \r\n {state.error.invoiceMessageText}\r\n \r\n \r\n SubmitMessage(false)}>\r\n send\r\n \r\n \r\n \r\n SubmitMessage(true)}>\r\n Close Message\r\n \r\n \r\n \r\n {state.messageList.length > 0 ? (\r\n \r\n {state.messageList.map((m) => (\r\n
\r\n
{m.invoiceMessageText}
\r\n\r\n
\r\n \r\n From User: {m.invoiceMessageFromUser} @ {moment(m.invoiceMessageDateSent).format('LLL')} {' '}\r\n {m.invoiceMessageReplyUser\r\n ? `( Reply by :\r\n ${m.invoiceMessageReplyUser ? m.invoiceMessageReplyUser : ''} @\r\n ${m.invoiceMessageDateReplied ? moment(m.invoiceMessageDateReplied).format('LLL') : ''} )`\r\n : ''}\r\n \r\n
\r\n
\r\n ))}\r\n
\r\n
No Messages Available
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Invoice Number\r\n \r\n \r\n \r\n WIP Number\r\n \r\n \r\n \r\n Invoice Net\r\n \r\n \r\n \r\n Invoice Gross Value\r\n \r\n \r\n \r\n Post Date\r\n \r\n \r\n \r\n \r\n Status\r\n \r\n \r\n \r\n \r\n Customer\r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Close Window\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n alert('Functionallity is pending')}>\r\n Upload\r\n \r\n */}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditInvoice;\r\n","import React from 'react';\r\nimport { Grid, InputLabel, Checkbox, FormHelperText } from '@material-ui/core';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport { SecondaryButton } from './../../../../Core/FormInput/AppButton';\r\nimport { Alert } from '@material-ui/lab';\r\nimport { getsendInvoice } from '../../../../Core/Service/internal_Invoice-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { postMulitpleInvoices } from './../../../../Core/Service/internal_Invoice-service';\r\nimport AppContext from './../../../../App/AppContext';\r\nimport { useContext } from 'react';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\n\r\nconst SendInvoices = (props) => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n showAlert: false,\r\n error: {}\r\n });\r\n\r\n useEffect(async () => {\r\n setState((st) => ({\r\n ...st,\r\n multiInvoiceFileName: props.multiInvoiceFileName,\r\n multiInvoiceId: props.multiInvoiceId,\r\n multiInvoiceNo: props.multiInvoiceNo,\r\n multiInvoicePDFId: props.multiInvoicePDFId,\r\n sendInvoiceContent: AppStorage.getSendMultiInovicesemailContent(),\r\n sendInvoiceEmail: ''\r\n }));\r\n }, []);\r\n\r\n const handleFieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n let Validation = () => {\r\n let isValid = true;\r\n let error = {};\r\n if (!state.sendInvoiceContent) {\r\n isValid = false;\r\n error.sendInvoiceContent = 'Email Message is required';\r\n }\r\n setState((st) => ({\r\n ...st,\r\n error: error\r\n }));\r\n return isValid;\r\n };\r\n\r\n const SubmitMessage = async () => {\r\n if (Validation()) {\r\n let data = {\r\n multiInvoiceId: state.multiInvoiceId,\r\n multiInvoiceNo: state.multiInvoiceNo,\r\n sendInvoiceContent: state.sendInvoiceContent,\r\n sendInvoiceEmail: state.sendInvoiceEmail,\r\n multiInvoiceFileName: state.multiInvoiceFileName,\r\n multiInvoicePDFId: state.multiInvoicePDFId\r\n };\r\n let res = await postMulitpleInvoices(data);\r\n if (res.success) {\r\n showToast(`Invoice Message Send Successfully`);\r\n props.onClose(true);\r\n } else {\r\n console.error();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {state.showAlert ? (\r\n
\r\n \r\n \r\n Please Select some Invoices No to Send the Invoice.\r\n \r\n \r\n \r\n ) : (\r\n
\r\n \r\n Invoice Numbers:\r\n
\r\n \r\n \r\n {state.multiInvoiceNo}\r\n No Invoices Emailed
\r\n \r\n );\r\n }\r\n\r\n const column_new = [\r\n {\r\n field: 'invoicePDFID',\r\n headerName: 'id',\r\n hide: true\r\n },\r\n {\r\n field: 'dateSent',\r\n headerName: 'Date Sent',\r\n flex: 0.9,\r\n renderCell: (params) => formatters.DateFormatter(params.value)\r\n },\r\n {\r\n field: 'sentBy',\r\n headerName: 'Sent By',\r\n flex: 2\r\n },\r\n {\r\n field: 'emailAddress',\r\n headerName: 'Email Address',\r\n flex: 3\r\n }\r\n ];\r\n\r\n return (\r\n \r\n {state?.rows?.length == 0 ? (\r\n No Emails Sent\r\n ) : (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default InvoicesEmailed;\r\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\r\nimport ReportGijgoGrid from './../../ReportsScreens/GijgoForReportsScreen/index';\r\nimport formatters from './../../../../Core/Grid/inputFormatter';\r\nimport { SquareButton } from '../../../../Core/FormInput/AppButton';\r\n// import { EditIcon } from '@material-ui/icons/Edit';\r\nimport { Grid } from '@material-ui/core';\r\nimport ReactDOM from 'react-dom';\r\nimport MessageIcon from '@material-ui/icons/Message';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport GetAppIcon from '@material-ui/icons/GetApp';\r\n// import {getInvoicePdf} from ''\r\nimport { getInvoicePdf, sendInvoice } from './../../../../Core/Service/internal_Invoice-service';\r\nimport InvoiceMessage from './invoiceMessage';\r\nimport DialogComp from './../../../../Core/Controls/Dialog/DialogComp';\r\nimport EditInvoice from './editInvoice';\r\nimport SendInvoices from './sendInvoices';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nimport { History } from '@material-ui/icons';\r\nimport InvoicesEmailed from './InvoicesEmailed';\r\n\r\nvar $ = window.$;\r\n\r\nconst baseCol = [\r\n { title: 'Action', sortable: true, field: 'action', width: 126, filterable: false },\r\n { title: 'Invoice No', field: 'invoiceCreditNo001', width: 95, sortable: true },\r\n {\r\n title: 'Net',\r\n field: 'netValue',\r\n width: 100,\r\n align: 'right',\r\n isCurrency: true,\r\n filterable: true,\r\n sortable: true,\r\n cssClass: 'text-right'\r\n },\r\n {\r\n title: 'Gross',\r\n field: 'grossValue',\r\n isCurrency: true,\r\n align: 'right',\r\n width: 100,\r\n filterable: true,\r\n sortable: true\r\n },\r\n {\r\n title: 'Status',\r\n field: 'invoiceStatus',\r\n width: 150,\r\n filterable: true,\r\n sortable: true\r\n },\r\n { title: 'Date', field: 'postingDate', width: 100, sortable: true, cssClass: 'text-right', renderer: formatters.YearFormatter },\r\n { title: 'WIP No', field: 'wipNumber', width: 90, sortable: true },\r\n { title: 'Branch', field: 'branchName', width: 200, sortable: true },\r\n { title: 'Customer', field: 'customerName', width: 280, sortable: true }\r\n];\r\n\r\nconst crumbsList = {\r\n 1: 'Invoices Outstanding',\r\n 2: 'Invoices Queried',\r\n 3: 'Invoices Paid',\r\n '-1': 'Messages Received',\r\n '-2': 'Messages Sent'\r\n};\r\n\r\nconst getCrumbs = (val, menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Invoices', path: '/invoice/dashboard' });\r\n }\r\n if (val) {\r\n list.push({ name: crumbsList[val], active: true });\r\n } else {\r\n list.push({ name: 'All Invoices', active: true });\r\n }\r\n return list;\r\n};\r\n\r\nconst InvoiceScreens = (props) => {\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n const { userRoles } = useContext(AppContext);\r\n const isCustomer = userRoles.includes('customer');\r\n const [state, setState] = useState({\r\n showInvoiceMessage: false,\r\n showEditInvoice: false,\r\n showSendInvoice: false,\r\n invoiceIDList: [],\r\n multiInvoiceFileName: '',\r\n multiInvoiceId: '',\r\n multiInvoiceNo: '',\r\n multiInvoicePDFId: ''\r\n });\r\n\r\n const onButtonClick = async (val) => {\r\n let res = await getInvoicePdf(val.invoiceFileName);\r\n const url = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf; charset=utf-8' }));\r\n let alink = document.createElement('a');\r\n alink.href = url;\r\n alink.download = `${val.invoiceCreditNo001}`;\r\n alink.click();\r\n alink.target = '_parent';\r\n alink.remove();\r\n };\r\n\r\n const handleMessage = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showInvoiceMessage: true,\r\n invoice: val\r\n }));\r\n };\r\n\r\n const handleEditInvoice = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n showEditInvoice: true,\r\n invoiceID: val.invoiceId,\r\n invoiceNo: val.invoiceCreditNo001\r\n }));\r\n };\r\n\r\n const handleEmailsSent = (record) => {\r\n setState((st) => ({\r\n ...st,\r\n showEmailsSent: true,\r\n focusedPDFID: record?.invoicePDFID\r\n }));\r\n };\r\n\r\n const actioncolFields = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n handleMessage(record)}\r\n >\r\n \r\n \r\n \r\n \r\n handleEditInvoice(record)}\r\n >\r\n \r\n \r\n \r\n \r\n onButtonClick(record)}\r\n >\r\n \r\n \r\n \r\n \r\n handleEmailsSent(record)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const getVal = async (gridRef, recList) => {\r\n var val = [];\r\n $(`${gridRef} tbody :checkbox:checked`).each(function (i) {\r\n val[i] = $(this).val();\r\n });\r\n\r\n let newList = val.map((m, i) => {\r\n let getValues = m - 1;\r\n return recList[getValues];\r\n });\r\n const setValues = (params) => {\r\n return newList\r\n .filter((k) => {\r\n if (k[params] !== null || k[params] !== undefined) {\r\n return k[params];\r\n }\r\n })\r\n .map((j) => {\r\n return j[params];\r\n });\r\n };\r\n setState((st) => ({\r\n ...st,\r\n showSendInvoice: true,\r\n invoiceID: val.invoiceId,\r\n invoiceIDList: newList,\r\n multiInvoiceFileName: setValues('invoiceFileName').toString(),\r\n multiInvoiceId: setValues('invoiceId').toString(),\r\n multiInvoiceNo: setValues('invoiceCreditNo001').toString(),\r\n multiInvoicePDFId: setValues('invoicePDFID').toString()\r\n }));\r\n };\r\n\r\n const mailButton = (gridRef, valueList) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n getVal(gridRef, valueList)}\r\n >\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const column = useMemo(() => {\r\n let newCol = [...baseCol];\r\n let actionCol = newCol.find((n) => n.field === 'action');\r\n if (actionCol) {\r\n actionCol.renderer = actioncolFields;\r\n }\r\n return newCol;\r\n }, []);\r\n\r\n let baseUrl = '';\r\n if (isCustomer) {\r\n baseUrl = `Invoices/GetCustomerUserInvoiceList?invoiceStatusID=${props.status || ''}`;\r\n } else {\r\n baseUrl = `Invoices?invoiceStatusID=${props.status || ''}`;\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={column}\r\n selectionType=\"multiple\"\r\n selectionMethod=\"checkbox\"\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n hideFilterRow={false}\r\n showCheckboxColFilterBtn={mailButton}\r\n downloadName={crumbsList[+props.status] || 'All Invoices'}\r\n />\r\n {state.showEmailsSent ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showEmailsSent: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n \r\n ) : null}\r\n {state.showInvoiceMessage ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showInvoiceMessage: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showInvoiceMessage: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoice={state.invoice}\r\n />\r\n \r\n ) : null}\r\n {state.showEditInvoice ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showEditInvoice: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showEditInvoice: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoiceID={state.invoiceID}\r\n invoiceNo={state.invoiceNo}\r\n />\r\n \r\n ) : null}\r\n {state.showSendInvoice ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showSendInvoice: false\r\n }))\r\n }\r\n fullWidth\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n showSendInvoice: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n invoiceIDList={state.invoiceIDList}\r\n multiInvoiceFileName={state.multiInvoiceFileName}\r\n multiInvoiceId={state.multiInvoiceId}\r\n multiInvoiceNo={state.multiInvoiceNo}\r\n multiInvoicePDFId={state.multiInvoicePDFId}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default InvoiceScreens;\r\n","import React, { useEffect, useContext, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AppContext from '../../App/AppContext';\r\nimport { Link, useHistory } from 'react-router-dom';\r\nimport { Avatar, Card, CardContent, Typography, Container, makeStyles, Tooltip, Hidden } from '@material-ui/core';\r\nimport '../Auditor/Dashboard/dashboard.scss';\r\nimport { getDashboardForInvoice } from '../../Core/Service/InvoiceScreen-service';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport PeopleIcon from '@material-ui/icons/People';\r\nimport { getCustomerDashboard } from '../../Core/Service/customer-services';\r\nimport { getCommunicatorDash } from '../../Core/Service/CustUserCommunicator/communicator-service';\r\nimport { AppStorage } from './../../Core/Service/storage-service';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport TimerIcon from '@material-ui/icons/Timer';\r\nimport CalendarTodayIcon from '@material-ui/icons/CalendarToday';\r\nimport DateRangeIcon from '@material-ui/icons/DateRange';\r\nimport MessageIcon from '@material-ui/icons/Message';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AnnouncementIcon from '@material-ui/icons/Announcement';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport TelegramIcon from '@material-ui/icons/Telegram';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport DoneAllIcon from '@material-ui/icons/DoneAll';\r\nimport LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';\r\nimport ShoppingCartIcon from '@material-ui/icons/ShoppingCart';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport EventAvailableIcon from '@material-ui/icons/EventAvailable';\r\nimport DialogComp from '../../Core/Modal/dialogModal';\r\nimport BookingRequestedModal from './bookingRequested/bookingRequestedModal';\r\nimport { SecondaryButton } from '../../Core/FormInput';\r\nimport CancelPresentationIcon from '@material-ui/icons/CancelPresentation';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport ScheduleIcon from '@material-ui/icons/Schedule';\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n border: '2px solid rgb(90 114 123 / 20%)',\r\n Opacity: 0.9,\r\n minWidth: 345,\r\n borderRadius: 15,\r\n boxShadow: 'rgb(90 114 123 / 11%) 0px 7px 30px 0px',\r\n paddingBottom: 20\r\n },\r\n\r\n avatar: {\r\n height: 40,\r\n width: 40\r\n }\r\n}));\r\n\r\nexport const RenderTiles = (props) => {\r\n const classes = useStyles();\r\n const { cards, label } = props;\r\n let history = useHistory();\r\n\r\n let onChange = (val, logID) => {\r\n let tempUrlObj = { state: logID ? logID : '' };\r\n if (val.pathname) {\r\n tempUrlObj = { ...val, ...tempUrlObj };\r\n } else {\r\n tempUrlObj = { pathname: val, ...tempUrlObj };\r\n }\r\n history.push(tempUrlObj);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {props.label}\r\n \r\n \r\n {cards?.map((m, i) => {\r\n let Icons = m.icon;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n {Icons}\r\n \r\n {m?.name}
\r\n\r\n {m?.count}\r\n \r\n
\r\n {Icons}\r\n \r\n {m?.name}
\r\n\r\n {m?.count}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n );\r\n};\r\nconst CustCommonDash = (props) => {\r\n const portalSettings = AppStorage.getPortalSetting();\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n const [state, setState] = useState({\r\n InvoiceData: [],\r\n eWIPData: [],\r\n communicatorData: [],\r\n isReload: null\r\n });\r\n const { showToast, userRoles } = useContext(AppContext);\r\n const isCustomer = userRoles.includes('customer');\r\n const isInternal = userRoles.includes('internal');\r\n\r\n useEffect(async () => {\r\n if (AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled) {\r\n let res2 = await getCustomerDashboard();\r\n if (res2.success) {\r\n setState((st) => ({ ...st, eWIPData: res2.data }));\r\n }\r\n if (!res2.success) {\r\n showToast(res2.message);\r\n }\r\n }\r\n\r\n if (AppStorage.getInvoiceAllowed()) {\r\n let res = await getDashboardForInvoice();\r\n if (res.success) {\r\n setState((st) => ({ ...st, InvoiceData: res.data.list[0] }));\r\n } else {\r\n showToast(res.message);\r\n }\r\n }\r\n\r\n if (AppStorage.getCommunicatorAllowed()) {\r\n let communicator = await getCommunicatorDash();\r\n if (communicator.success) {\r\n setState((st) => ({ ...st, communicatorData: communicator.data?.list[0] }));\r\n }\r\n if (!communicator.success) {\r\n showToast(communicator.message);\r\n }\r\n }\r\n }, [state.isReload]);\r\n\r\n const bookingReqShowModal = () => {\r\n setState((st) => ({ ...st, isBookingRequesteModal: true }));\r\n };\r\n\r\n const closeModal = (val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isBookingRequesteModal = false;\r\n if (val) {\r\n newSt.isReload = new Date();\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const InvoiceMember = [\r\n {\r\n id: 1,\r\n name: 'All Invoices',\r\n color: '#1abc9c',\r\n count: state.InvoiceData.allInvoices || 0,\r\n icon: ,\r\n url: '/invoice/allInvoices'\r\n },\r\n {\r\n id: 2,\r\n name: 'Invoices Outstanding',\r\n color: '#e74c3c',\r\n count: state.InvoiceData.unPaidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Outstanding'\r\n },\r\n {\r\n id: 3,\r\n name: 'Invoices Queried',\r\n color: '#ff9f00',\r\n count: state.InvoiceData.queriedCount || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Queried'\r\n },\r\n {\r\n id: 4,\r\n name: 'Invoices Paid',\r\n color: '#1abc9c',\r\n count: state.InvoiceData.paidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Paid'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Sent',\r\n color: '#95a5a6',\r\n count: state.InvoiceData.messagesSent || 0,\r\n icon: ,\r\n url: '/invoice/messagesSent'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Received',\r\n color: '#9b6bcc',\r\n count: state.InvoiceData.messagesReceived || 0,\r\n icon: ,\r\n url: '/invoice/messagesReceived'\r\n }\r\n // {\r\n // id: 5,\r\n // name: 'Total Customer',\r\n // color: '#2ecc71',\r\n // count: state.InvoiceData.customerCount || 0,\r\n // icon: ,\r\n // url: '/invoice/Customers'\r\n // }\r\n ];\r\n const eWIPDataMember = [\r\n {\r\n id: 1,\r\n name: 'Current Month',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.eWIPData.currentMonth,\r\n url: '/Customer/Current Month/1'\r\n },\r\n {\r\n id: 2,\r\n name: 'Current Year',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.eWIPData.currentYear,\r\n url: '/Customer/Current Year/2'\r\n },\r\n {\r\n id: 3,\r\n name: 'Last Year',\r\n color: '#dc3545',\r\n icon: ,\r\n count: state.eWIPData.preYear,\r\n url: '/Customer/Last Year/3'\r\n },\r\n {\r\n id: 4,\r\n name: 'Total',\r\n color: '#868e96',\r\n icon: ,\r\n count: state.eWIPData.total,\r\n url: '/Customer/Total/4'\r\n }\r\n ];\r\n\r\n const CommunicatorMember = [\r\n {\r\n id: 1,\r\n name: 'Awaiting Authority',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.awaitingAuthorityCount,\r\n url: isInternal ? { pathname: '/SiteVehicles', search: `?status=AUTH` } : '/AwaitingAuthority'\r\n },\r\n // {\r\n // id: 2,\r\n // name: 'Site Vehicles',\r\n // color: '#2ecc71',\r\n // icon: ,\r\n // count: state.communicatorData.siteVehiclesCount,\r\n // url: '/SiteVehicles'\r\n // },\r\n // {\r\n // id: 10,\r\n // name: 'Bookings',\r\n // color: '#3498db',\r\n // icon: ,\r\n // count: state.communicatorData.bookingCount,\r\n // url: { pathname: '/SiteVehicles', search: `?status=BOOKED` }\r\n // },\r\n {\r\n id: 17,\r\n name: 'Work Completed',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.communicatorData.workCompletedCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=WC` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 18,\r\n name: ' Awaiting Collection',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.communicatorData.awaitingCollectionCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=ACOLLECTION` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 3,\r\n name: 'VOR Vehicles',\r\n color: '#dc3545',\r\n icon: ,\r\n count: state.communicatorData.vorVehiclesCount,\r\n url: '/VORVehicles'\r\n }\r\n ];\r\n\r\n let permissionCounterCustList = [\r\n {\r\n id: 1,\r\n name: 'VOR Vehicles',\r\n color: '#dc3545',\r\n icon: ,\r\n count: state.communicatorData.vorVehiclesCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=VOR` }\r\n },\r\n // {\r\n // id: 4,\r\n // name: 'Awaiting Full Order',\r\n // color: '#dc3545',\r\n // icon: ,\r\n // count: state.communicatorData.awaitingFullOrderNumberCount,\r\n // url: { pathname: '/SiteVehicles', search: `?status=AFON` }\r\n // },\r\n // {\r\n // id: 13,\r\n // name: 'Site Vehicles',\r\n // color: '#3498db',\r\n // icon: ,\r\n // count: state.communicatorData.siteVehiclesCount,\r\n // url: { pathname: '/SiteVehicles', search: `?status=S` }\r\n // },\r\n {\r\n id: 17,\r\n name: 'Work Completed',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.communicatorData.workCompletedCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=WC` }\r\n },\r\n {\r\n id: 18,\r\n name: ' Awaiting Collection',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.communicatorData.awaitingCollectionCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=ACOLLECTION` }\r\n }\r\n ];\r\n\r\n const CommunicatorBookingsSec = [\r\n {\r\n id: 10,\r\n name: 'Bookings',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingCount,\r\n url: { pathname: '/SiteVehicles', search: `?status=BOOKED` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 10,\r\n name: isInternal ? 'Request Received' : 'Request Sent',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingRequestCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=1` },\r\n isShowCustomer: true\r\n },\r\n\r\n ...(!isInternal\r\n ? [\r\n {\r\n id: 10,\r\n name: 'Re-Schedule Received',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingReScheduleReceivedSentCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=2` }\r\n },\r\n {\r\n id: 10,\r\n name: 'Re-Schedule Sent',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingReScheduleSentCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=3` },\r\n isShowCustomer: true\r\n }\r\n ]\r\n : [\r\n {\r\n id: 10,\r\n name: 'Re-Schedule Sent',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingReScheduleSentCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=2` }\r\n },\r\n\r\n {\r\n id: 10,\r\n name: 'Re-Schedule Received',\r\n color: '#3498db',\r\n icon: ,\r\n count: state.communicatorData.bookingReScheduleReceivedSentCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=3` },\r\n isShowCustomer: true\r\n }\r\n ]),\r\n\r\n {\r\n id: 10,\r\n name: 'Booking Confirmed',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: state.communicatorData.bookingConfirmedCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=4` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 10,\r\n name: 'Booking Cancelled',\r\n color: '#dc3545',\r\n icon: ,\r\n count: state.communicatorData.bookingCancelCount,\r\n url: { pathname: '/BookingsRequesteList', search: `?status=5` },\r\n isShowCustomer: true\r\n }\r\n ];\r\n\r\n const CommunicatorHeaderComp = () => {\r\n return (\r\n \r\n Bookings\r\n
\r\n Request Booking\r\n
\r\n
\r\n \r\n {AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled ? (\r\n \r\n \r\n \r\n ) : null}\r\n {AppStorage.getInvoiceAllowed() && (\r\n \r\n \r\n \r\n )}\r\n {AppStorage.getCommunicatorAllowed() && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n {state.isBookingRequesteModal && (\r\n // closeModal(false)} maxWidth=\"md\" fullWidth overflow=\"auto\">\r\n \r\n // \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustCommonDash;\r\n","import React, { useEffect, useContext, useState } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport { Avatar, Card, CardContent, Typography, Container } from '@material-ui/core';\r\nimport '../../../Auditor/Dashboard/dashboard.scss';\r\nimport { getDashboardForInvoice } from '../../../../Core/Service/InvoiceScreen-service';\r\nimport EmailIcon from '@material-ui/icons/Email';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport PeopleIcon from '@material-ui/icons/People';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AnnouncementIcon from '@material-ui/icons/Announcement';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport TelegramIcon from '@material-ui/icons/Telegram';\r\nimport { RenderTiles } from '../../../customer/CustCommonDash';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nconst InvoicesDashboard = (props) => {\r\n const [state, setState] = useState({\r\n rows_new: []\r\n });\r\n const { showToast, userRoles } = useContext(AppContext);\r\n let isCustomer = userRoles[0] === 'customer';\r\n\r\n useEffect(async () => {\r\n let res = await getDashboardForInvoice();\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows_new: res.data.list[0] }));\r\n } else {\r\n showToast(res.message);\r\n }\r\n }, []);\r\n const cards = [\r\n {\r\n id: 1,\r\n name: 'All Invoices',\r\n color: '#1abc9c',\r\n count: state.rows_new.allInvoices || 0,\r\n icon: ,\r\n url: '/invoice/allInvoices'\r\n },\r\n {\r\n id: 2,\r\n name: 'Invoices Outstanding',\r\n color: '#2ecc71',\r\n count: state.rows_new.unPaidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Outstanding'\r\n },\r\n {\r\n id: 3,\r\n name: 'Invoices Queried',\r\n color: '#e74c3c',\r\n count: state.rows_new.queriedCount || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Queried'\r\n },\r\n {\r\n id: 4,\r\n name: 'Invoices Paid',\r\n color: '#3498db',\r\n count: state.rows_new.paidInvoices || 0,\r\n icon: ,\r\n url: '/invoice/Invoice_Paid'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Sent',\r\n color: '#95a5a6',\r\n count: state.rows_new.messagesSent || 0,\r\n icon: ,\r\n url: '/invoice/messagesSent'\r\n },\r\n {\r\n id: 5,\r\n name: 'Messages Received',\r\n color: '#9b6bcc',\r\n count: state.rows_new.messagesReceived || 0,\r\n icon: ,\r\n url: '/invoice/messagesReceived'\r\n }\r\n ];\r\n\r\n if (!isCustomer) {\r\n cards.push({\r\n id: 5,\r\n name: 'Total Customer',\r\n color: '#2ecc71',\r\n count: state.rows_new.customerCount || 0,\r\n icon: ,\r\n url: '/invoice/Customers'\r\n });\r\n }\r\n\r\n return (\r\n // \r\n //
\r\n // \r\n // {cards.map((option) => (\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // {option.icon ? option.icon : £}\r\n // \r\n // \r\n // \r\n // \r\n // {option.count}\r\n // \r\n // \r\n // {option.name}\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // ))}\r\n // \r\n // \r\n //
\r\n \r\n {AppStorage.getInvoiceAllowed() && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n};\r\nexport default InvoicesDashboard;\r\n","import React from 'react';\r\nimport './budgetCommon.scss';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\n\r\nexport const FilterBtn = (props) => {\r\n const { active, children, ...rest } = props;\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const FilterBtnWithIcon = (props) => {\r\n const { active, children, ...rest } = props;\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const BudgetSendBtn = (props) => {\r\n return (\r\n <>\r\n \r\n {' '}\r\n {' '}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const SmallBudgetSendBtn = (props) => {\r\n return (\r\n <>\r\n \r\n {' '}\r\n {' '}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const LinkedButton = (props) => {\r\n return (\r\n <>\r\n \r\n {props.children}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const SmallLinkedButton = (props) => {\r\n return (\r\n <>\r\n \r\n {props.children}\r\n
\r\n \r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport './wipHours.scss';\r\nimport { Grid, Typography } from '@material-ui/core';\r\n\r\nconst GraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 12,\r\n border: '1px solid #f9f9f9',\r\n padding: 4,\r\n backgroundColor: '#E31C48',\r\n textAlign: 'center',\r\n color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 12,\r\n border: '1px solid #f9f9f9',\r\n padding: 4,\r\n backgroundColor: 'white',\r\n border: '1px solid rgba(0,0,0,0.03)',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyGraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 14,\r\n // border: '1px solid #f9f9f9',\r\n padding: 6,\r\n backgroundColor: '#f9f9f9',\r\n textAlign: 'center',\r\n color: '#f9f9f9'\r\n },\r\n body: {\r\n fontSize: 14,\r\n border: '1px solid #f9f9f9',\r\n padding: 6,\r\n backgroundColor: 'white',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n },\r\n container: {\r\n // maxHeight: 200\r\n }\r\n});\r\n\r\nexport const WipGraphTable = (props) => {\r\n const [state, setState] = useState({\r\n index: 0\r\n });\r\n\r\n const handleIndex = (index) => {\r\n setState((st) => ({ ...st, index: index }));\r\n };\r\n const temp = [];\r\n const newtemp = [];\r\n\r\n props.data.forEach((q) => {\r\n let date = newtemp.findIndex((t) => t.date == q.date);\r\n if (date > -1) {\r\n newtemp[date]['monthTotal'] += q.hours;\r\n } else {\r\n newtemp.push({\r\n date: q.date,\r\n monthTotal: q.hours\r\n });\r\n }\r\n });\r\n props.data.forEach((q) => {\r\n let isIDExist = temp.findIndex((t) => t.branchID == q.branchID);\r\n if (isIDExist > -1) {\r\n temp[isIDExist].data.push({ date: q.date, hours: q.hours });\r\n } else {\r\n temp.push({\r\n branchID: q.branchID,\r\n branch: q.branch,\r\n data: [{ date: q.date, hours: q.hours }]\r\n });\r\n }\r\n });\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n branch\r\n {temp[0]?.data.map((m, i) => {\r\n return (\r\n <>\r\n {m.date}\r\n {/* Hours */}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Total\r\n \r\n {newtemp?.map((m, index) => {\r\n return (\r\n <>\r\n \r\n {m.monthTotal}\r\n \r\n \r\n );\r\n })}\r\n \r\n {temp?.map((m, index) => {\r\n return (\r\n handleIndex(index)}>\r\n \r\n {m.branch}\r\n \r\n\r\n {m?.data.map((n, i) => {\r\n return (\r\n <>\r\n {/* \r\n {n.date}\r\n */}\r\n \r\n {n.hours}\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\n// export const WipTiles = (props) => {\r\n// const temp = [];\r\n// props.data.forEach((q) => {\r\n// let isIDExist = temp.findIndex((t) => t.branchID == q.branchID);\r\n// if (isIDExist > -1) {\r\n// temp[isIDExist].data.push({ date: q.date, hours: q.hours });\r\n// } else {\r\n// temp.push({\r\n// branchID: q.branchID,\r\n// branch: q.branch,\r\n// data: [{ date: q.date, hours: q.hours }]\r\n// });\r\n// }\r\n// });\r\n\r\n// return (\r\n// \r\n// {temp.map((m, i) => {\r\n// return (\r\n// \r\n// \r\n// {m.branch}\r\n// \r\n// \r\n// \r\n// {m.data.map((n) => {\r\n// return (\r\n// <>\r\n// \r\n// {n.date}\r\n// {n.hours}\r\n// \r\n// \r\n// );\r\n// })}\r\n// \r\n// \r\n// \r\n// );\r\n// })}\r\n//
\r\n// );\r\n// };\r\n","import { Typography } from '@material-ui/core';\r\n// import { color } from 'html2canvas/dist/types/css/types/color';\r\nimport React, { PureComponent } from 'react';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\nimport { WipGraphTable, WipTiles } from './wipTable';\r\n\r\nconst COLORS = {\r\n 0: '#0074D9',\r\n 1: '#FF4136',\r\n 2: '#2ECC40',\r\n 3: '#FF851B',\r\n 4: '#7FDBFF',\r\n 5: '#B10DC9',\r\n 6: '#FFDC00',\r\n 7: '#C33C9A',\r\n 8: '#39CCCC',\r\n 9: '#01FF70',\r\n 10: '#85144b',\r\n 11: '#F012BE',\r\n 12: '#3D9970',\r\n 13: '#111111',\r\n 14: '#AAAAAA'\r\n};\r\n\r\nclass CustomizedLabel extends PureComponent {\r\n render() {\r\n const { x, y, stroke, value } = this.props;\r\n\r\n return (\r\n \r\n {value}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const WIPLineCharts = (props) => {\r\n return (\r\n <>\r\n \r\n {props.label}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.tempData && }\r\n {props?.keys ? (\r\n props.keys.map((m, i) => {\r\n return ;\r\n })\r\n ) : (\r\n } />\r\n )}\r\n \r\n \r\n {props.showTable ? : null}\r\n \r\n );\r\n};\r\n","import { Box, CircularProgress, Grid, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport './ReportingScreensStyle.scss';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList, Legend, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';\r\nimport { RenderTiles } from '../../customer/CustCommonDash';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport GraphicEqIcon from '@material-ui/icons/GraphicEq';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport TimerIcon from '@material-ui/icons/Timer';\r\nimport { WIPLineCharts } from './WIpHours/WipLineChart';\r\n\r\nimport LinearProgress from '@material-ui/core/LinearProgress';\r\nimport moment from 'moment';\r\nimport { CircularProgressbar, buildStyles } from 'react-circular-progressbar';\r\n\r\nconst BorderLinearProgress = withStyles((theme) => ({\r\n root: {\r\n height: 10,\r\n borderRadius: 5\r\n },\r\n colorPrimary: {\r\n backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700]\r\n },\r\n bar: {\r\n borderRadius: 5,\r\n\r\n backgroundColor: (props) => {\r\n let bgColor = props.value < 50 ? 'red' : props.value >= 50 && props.value < 75 ? '#FFBF00' : 'green';\r\n\r\n return bgColor;\r\n }\r\n }\r\n}))(LinearProgress);\r\n\r\nfunction LinearProgressWithLabel(props) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {`${Math.round(props.remainingValue)}`}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction isFiniteCheck(str) {\r\n return isFinite(str) ? str.toFixed(2) : '0.00';\r\n}\r\nfunction getRound(val) {\r\n return Math.round(val);\r\n}\r\nvar colorCombi = {\r\n 0: { succ: '#abeaab', fail: '#e58f87' },\r\n 1: { succ: '#188f18', fail: '#792222' }\r\n};\r\n\r\nconst COLORS = {\r\n 0: '#0074D9',\r\n 1: '#FF4136',\r\n 2: '#2ECC40',\r\n 3: '#FF851B',\r\n 4: '#7FDBFF',\r\n 5: '#B10DC9',\r\n 6: '#FFDC00',\r\n 7: '#C33C9A',\r\n 8: '#39CCCC',\r\n 9: '#01FF70',\r\n 10: '#85144b',\r\n 11: '#F012BE',\r\n 12: '#3D9970',\r\n 13: '#111111',\r\n 14: '#AAAAAA'\r\n};\r\n\r\nconst setPercentage = (profit, budget) => {\r\n if (!profit) {\r\n return 0;\r\n } else {\r\n if (budget == null || budget == 0) {\r\n return 100;\r\n } else {\r\n let value = (+profit / +budget) * 100;\r\n\r\n return Math.round(value) <= 100 ? Math.round(value) : 100;\r\n }\r\n }\r\n};\r\n\r\nconst minMaxYAxisCal = (dataMin, dataMax) => {\r\n // return [dataMin, dataMax];\r\n const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax));\r\n // if (dataMax < 0) {\r\n // dataMin = dataMin + dataMin / 10;\r\n // dataMax = 0 - dataMin / 10;\r\n // }\r\n // else {\r\n // dataMin = dataMin + dataMin / 10;\r\n // dataMax = dataMax + dataMax / 5;\r\n // }\r\n\r\n return [-absMax - absMax / 6, absMax + absMax / 6];\r\n};\r\n\r\nconst CustomTooltip = ({ active, payload, label, formatter }) => {\r\n if (active && payload && payload.length) {\r\n return (\r\n \r\n
{label}
\r\n
\r\n {payload[0].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[0].value) : +payload[0].value}\r\n
\r\n
\r\n
{label}
\r\n
\r\n {payload[0].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[0].value) : +payload[0].value}\r\n
\r\n
\r\n {payload[1].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[1].value) : +payload[1].value}\r\n
\r\n
\r\n
{BudgetMTD || 0}
\r\n
{BudgetYTD || 0}
\r\n \r\n \r\n \r\n\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n Franchise\r\n MTD\r\n YTD\r\n {/* MTD Budget\r\n YTD Budget */}\r\n \r\n \r\n \r\n {row.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.franchiseName}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.mtdTotal)}\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdTotal)}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const StockCard = (props) => {\r\n const { row, label } = props;\r\n\r\n return (\r\n \r\n \r\n {row.map((n) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n \r\n \r\n \r\n Current Stock Value\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.currentStockTotal)}\r\n \r\n \r\n\r\n \r\n Average Stock Value\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.currentStockTotal / n.currentStockCount)}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 0 - 30 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total0to30)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count0to30)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 31 -60 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total31to60)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count31to60)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 61 - 90 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total61to90)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count61to90)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 91 - 120 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total91to120)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count91to120)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 121 - 150 DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total121to150)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count121to150)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 150+ DAYS\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.total150Plus)}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.count150Plus)}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nlet configIndex = [\r\n { name: 'MTD Hours', keyName: 'mtdSold' },\r\n { name: 'Hours Taken', keyName: 'mtdTaken' },\r\n { name: 'Available Hours', keyName: 'ytdAvailable' },\r\n { name: 'YTD Hours', keyName: 'ytdSold' },\r\n { name: 'YTD Taken', keyName: 'ytdTaken' }\r\n];\r\nlet configIndex2 = [\r\n { name: 'MTD Sold', keyName: 'mtdSale' },\r\n { name: 'YTD Sold', keyName: 'ytdSale' }\r\n];\r\n\r\nexport const AfterSaleCombined = (props) => {\r\n const classes = useStyles();\r\n const { row, label } = props;\r\n const history = useHistory();\r\n\r\n props.list.forEach((o, i) => {\r\n configIndex.forEach((p) => {\r\n p[`${o.bn}`] = o[p.keyName];\r\n });\r\n configIndex2.forEach((p) => {\r\n p[`${o.bn}`] = o[p.keyName];\r\n });\r\n });\r\n\r\n const GoToDailyInvoicedHours = (params) => {\r\n let searchQuery = `startDateType=${params?.startDateType || ''}&branchID=${params?.branchId || ''}`;\r\n history.push({\r\n pathname: `/Services/InvoicedHours`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n {props.isHoursSoldBudgetData ? (\r\n <>\r\n \r\n \r\n \r\n Sold Hours\r\n \r\n MTD\r\n\r\n GoToDailyInvoicedHours({ startDateType: 'mtd' })}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(props.sold)}\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(props.MTDTotalBudget) || 0}\r\n
\r\n \r\n
\r\n YTD\r\n GoToDailyInvoicedHours({ startDateType: 'ytd' })}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(props.YTDsold)}\r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(props.YTDTotalBudget) || 0}\r\n
\r\n
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.mtdBudget) || 0}\r\n
\r\n
\r\n YTD\r\n GoToDailyInvoicedHours({ startDateType: 'ytd' })}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.YTDsale)}\r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.ytdBudget) || 0}\r\n
\r\n
| \r\n ))}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* Dummy */}\r\n \r\n \r\n \r\n \r\n value} />\r\n \r\n \r\n \r\n\r\n {props.list.map((p, i) => {\r\n return (\r\n \r\n {props.list.map((entry, index) => (\r\n | \r\n ))}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Bridge the Gap \r\n \r\n \r\n\r\n \r\n \r\n \r\n MTD Hours\r\n \r\n \r\n MTD Sold\r\n \r\n {/* Hours Taken */}\r\n Available Hours\r\n Recovery Rate\r\n {/* MTD Cost */}\r\n YTD Hours\r\n YTD Sold\r\n {/* YTD Taken */}\r\n {/* YTD Cost */}\r\n \r\n \r\n \r\n {props?.list.map((n, i) => {\r\n return (\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.bn}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.mtdSold)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n n.monthHoursBudgetDiff > 0\r\n ? formatters.ThousandSeparatorWithoutZero(n.monthHoursBudgetDiff)\r\n : formatters.ThousandSeparatorWithoutZero(n.monthHoursBudgetDiff)\r\n // formatters.ThousandSeparatorWithoutZero(n.invoicingHours)\r\n }\r\n \r\n \r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdSale)} */}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdSale)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {n.monthInvoicingPoundDiff > 0\r\n ? `+${formatters.CurrencyThousandSeparatorWithoutZero(n.monthInvoicingPoundDiff)}`\r\n : formatters.CurrencyThousandSeparatorWithoutZero(n.monthInvoicingPoundDiff)}\r\n \r\n \r\n \r\n {/* GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'mtd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.mtdTaken)}\r\n */}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.ytdAvailable)}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.recRateTable)}\r\n \r\n\r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdSold)}\r\n \r\n GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdSale)}\r\n \r\n {/* GoToDailyInvoicedHours({ branchId: n.branchID, startDateType: 'ytd' })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(n.ytdTaken)}\r\n */}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Invoicing Hours\r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => getRound(value)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'ThousandSeparatorWithoutZero' })}\r\n />\r\n\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Invoicing\r\n (£'s)\r\n \r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => getRound(value)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'ThousandSeparatorWithoutZero' })}\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n Recovery Rate\r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => value.toFixed(2)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'ThousandSeparatorWithoutZero' })}\r\n position=\"top\"\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Efficiency\r\n (Sold/Taken hrs)\r\n \r\n \r\n \r\n \r\n \r\n minMaxYAxisCal(dataMin, dataMax)}\r\n tickFormatter={(value) => getRound(value)}\r\n />\r\n } />\r\n\r\n \r\n\r\n \r\n renderCustomizedLabel({ ...props, formatter: 'PercentageFormatter' })}\r\n />\r\n {props.list.map((entry, index) => (\r\n GoToDailyInvoicedHours({ branchId: entry.branchID })}\r\n />\r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n No records found\r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleBranchCardPart = (props) => {\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `desc=Total&code=MT&startDateType=${params?.startDateType || ''}&branchID=${params?.branchId || ''}&dc=${params?.dc || ''}`;\r\n history.push({\r\n pathname: 'Total',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const classes = useStyles();\r\n const { row, label } = props;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n {props.isPartData ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n Group Sales\r\n \r\n \r\n \r\n \r\n {props.partsCalculatedList.map((item, i) => {\r\n return (\r\n <>\r\n {!item.d && (\r\n \r\n \r\n = 50 &&\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100) <\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100)\r\n ? '#ff9f00'\r\n : getRound((item.mtdSaleValue / item.mtdBudget) * 100) >=\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100)\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100) < 50\r\n ? '#D92641'\r\n : getRound((item.mtdSaleValue / item.mtdBudget) * 100) >= 50 &&\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100) <\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100)\r\n ? '#ff9f00'\r\n : getRound((item.mtdSaleValue / item.mtdBudget) * 100) >=\r\n getRound((item.mtdSaleValue / item.mtdBudget) * 100)\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n )}\r\n \r\n MTD {item.d}\r\n\r\n onRedirect({ startDateType: 'mtd', dc: item.dc })}\r\n style={{\r\n fontSize: 20,\r\n fontWeight: '600',\r\n cursor: 'pointer',\r\n textAlign: 'left'\r\n }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.mtdSaleValue)}\r\n {/* {!item.d ? (\r\n \r\n ({getRound((item.mtdSaleValue / item.mtdBudget) * 100)}%)\r\n \r\n ) : null} */}\r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.mtdBudget) || 0}\r\n
\r\n
\r\n = 50 &&\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100) <\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100)\r\n ? '#ff9f00'\r\n : getRound((item.ytdSaleValue / item.ytdBudget) * 100) >=\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100)\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100) < 50\r\n ? '#D92641'\r\n : getRound((item.ytdSaleValue / item.ytdBudget) * 100) >= 50 &&\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100) <\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100)\r\n ? '#ff9f00'\r\n : getRound((item.ytdSaleValue / item.ytdBudget) * 100) >=\r\n getRound((item.ytdSaleValue / item.ytdBudget) * 100)\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n )}\r\n \r\n YTD {item.d}\r\n\r\n onRedirect({ startDateType: 'ytd', dc: item.dc })}\r\n style={{\r\n fontSize: 20,\r\n fontWeight: '600',\r\n cursor: 'pointer',\r\n textAlign: 'left'\r\n }}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.ytdSaleValue)}\r\n {/* {!item.d ? (\r\n \r\n ({getRound((item.ytdSaleValue / item.ytdBudget) * 100)}%)\r\n \r\n ) : null} */}\r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(item.ytdBudget) || 0}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {props.uniqueBranchList.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.bn}\r\n
\r\n MTD / YTD\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {props.list.map((itm, i) => {\r\n return (\r\n \r\n onRedirect({ dc: itm.dc })}>\r\n {itm.d}\r\n \r\n \r\n \r\n \r\n Required\r\n \r\n \r\n Accomplished\r\n \r\n \r\n \r\n {itm.data.map((dataItme, dataItmIndex) => {\r\n return (\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.mtdBudget)} /{' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.ytdBudget)}\r\n \r\n \r\n \r\n onRedirect({\r\n startDateType: 'mtd',\r\n dc: itm.dc,\r\n branchId: dataItme.branchID\r\n })\r\n }\r\n style={{ cursor: 'pointer' }}\r\n className={\r\n dataItme.mtdSaleValue < dataItme.mtdBudget\r\n ? 'customChipRed'\r\n : 'customChip'\r\n }\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.mtdSaleValue)}\r\n \r\n {' / '}\r\n \r\n onRedirect({\r\n startDateType: 'ytd',\r\n dc: itm.dc,\r\n branchId: dataItme.branchID\r\n })\r\n }\r\n style={{ cursor: 'pointer' }}\r\n className={\r\n dataItme.ytdSaleValue < dataItme.ytdBudget\r\n ? 'customChipRed'\r\n : 'customChip'\r\n }\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(dataItme.ytdSaleValue)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n No records found\r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleSupercharge = (props) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `?branchID=${params.branchId}&bn=${\r\n params.branch\r\n }&measuredesc=${'Surcharges'}&MeasureID=${2}&fromPage=${'Aged Measures'}&month=${''}&unallocated=${''}`;\r\n history.push({\r\n pathname: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const { row, label } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n {label}\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n {label}\r\n \r\n \r\n Qty\r\n Surcharge\r\n \r\n \r\n {props.list.length > 0 ? (\r\n \r\n {props.list.map((n, i) => {\r\n return (\r\n \r\n onRedirect({ branchId: n.branchID, branch: n.bsn })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.branch}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(n.qty)}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.surchargevalue)}\r\n \r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n \r\n \r\n \r\n No records 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\nexport const AfterSaleJobsDetails = (props) => {\r\n const classes = useStyles();\r\n\r\n let communicatorDashList = [\r\n {\r\n id: 1,\r\n name: 'VOR Vehicles',\r\n color: '#dc3545',\r\n icon: ,\r\n count: props.partsVOR?.vor || 'N/A',\r\n url: { pathname: '/SiteVehicles', search: `?status=VOR` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Part Back Order, ETA > 72 hrs',\r\n color: '#dc3545',\r\n count: props.partsVOR?.partsBackOrder || 'N/A',\r\n icon: ,\r\n url: { pathname: '/SiteVehicles', search: `?status=PB` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Awaiting Collection',\r\n color: '#2ecc71',\r\n icon: ,\r\n count: props.partsVOR?.awaitingCollection || 'N/A',\r\n url: { pathname: '/SiteVehicles', search: `?status=ACOLLECTION` },\r\n isShowCustomer: true\r\n },\r\n {\r\n id: 1,\r\n name: 'Awaiting Authority',\r\n color: '#3498db',\r\n icon: ,\r\n count: props.partsVOR?.awaitingAuthority || 'N/A',\r\n url: { pathname: '/SiteVehicles', search: `?status=AUTH` },\r\n isShowCustomer: true\r\n }\r\n ];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.label}\r\n \r\n \r\n \r\n \r\n
\r\n {/* \r\n \r\n {props.label}\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const AfterSaleYtdMtdSection = (props) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n\r\n const onRedirect = (params) => {\r\n let searchQuery = `branchID=${params?.branchId || ''}&bn=${params.branch}&MeasureID=1&measuredesc=Work In Progress`;\r\n history.push({\r\n pathname: `/sales/AgedMeasuresWorkingProgress`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const { row, label } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n {label}\r\n */}\r\n \r\n \r\n Group WIP MTD\r\n \r\n {props.dailyWIPsUniqueDateList?.length > 0 ? (\r\n <>\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.dailyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {moment(n).format('DD/MM')}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {/* ************************************* */}\r\n {props.dailyWIPsUniqueBranches.map((item) => {\r\n // Extract the item code and ID from the item string\r\n const [branchShortCode, branchID] = item\r\n .replace(/[\\(\\)]/g, '') // Remove parentheses\r\n .split(' '); // Split into code and ID\r\n return (\r\n \r\n onRedirect({ branchId: branchID, branch: branchShortCode })}\r\n >\r\n {branchShortCode}\r\n \r\n {props.dailyWIPsUniqueDateList.map((date) => {\r\n const matchingEntry = props.dailyWIPs.find(\r\n (m) =>\r\n m.branchShortCode === branchShortCode &&\r\n m.branchID === Number(branchID) &&\r\n m.date === date\r\n );\r\n const hours = matchingEntry ? matchingEntry.hours : 0;\r\n return {hours};\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n Total\r\n \r\n {props.dailyWIPsUniqueDateList.map((date) => (\r\n \r\n {/* {props?.columnTotals[date] || 0} */}\r\n {formatters.ThousandSeparatorWithoutZero(props?.columnTotals[date] || 0)}\r\n \r\n ))}\r\n \r\n {/* *********** */}\r\n\r\n {/* {props.dailyWIPsCombinedList.map((n, i) => {\r\n return (\r\n \r\n onRedirect({ branchId: n.branchID, branch: n.branchShortCode })}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {n.branchShortCode}\r\n \r\n {n.data.map((q) => {\r\n return (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(q.hours)}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })} */}\r\n \r\n
\r\n \r\n \r\n \r\n ) : (\r\n \r\n No Record Found\r\n \r\n )}\r\n \r\n \r\n \r\n Group WIP Monthly\r\n \r\n {props.monthlyWIPsUniqueDateList.length > 0 ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.monthlyWIPsUniqueDateList.map((n, i) => {\r\n return (\r\n \r\n \r\n {moment(n).format('MMM-YY')}\r\n
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {props.MonthlyWIPsUniqueBranches.map((item) => {\r\n // Extract the item code and ID from the item string\r\n const [branchShortCode, branchID] = item\r\n .replace(/[\\(\\)]/g, '') // Remove parentheses\r\n .split(' '); // Split into code and ID\r\n return (\r\n \r\n onRedirect({ branchId: branchID, branch: branchShortCode })}\r\n >\r\n {branchShortCode}\r\n \r\n {props.monthlyWIPsUniqueDateList.map((date) => {\r\n const matchingEntry = props.monthlyWIPs.find(\r\n (m) =>\r\n m.branchShortCode === branchShortCode &&\r\n m.branchID === Number(branchID) &&\r\n m.date === date\r\n );\r\n const hours = matchingEntry ? matchingEntry.hours : 0;\r\n return (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(hours)}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n Total\r\n \r\n {props.monthlyWIPsUniqueDateList.map((date) => (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(props?.monthlyWIPscolumnTotals[date] || 0)}\r\n \r\n ))}\r\n \r\n {/* *********** */}\r\n \r\n
\r\n \r\n \r\n \r\n ) : (\r\n \r\n No Record Found\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, FormLabel, IconButton } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SingelSelect, TextBox } from '../../../../../Core/FormInput';\r\nimport { ExpBaseURL } from '../../../../../Core/Service/http-calls';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport GetWIPHeader from '../../GetWIPDetails';\r\nimport DialogComp from '../../../../../Core/Controls/Dialog/DialogComp';\r\nimport { getAgedMeasuresViewDocument } from '../../../../../Core/Service/ReportScreens-service';\r\nimport ViewPdfModal from '../../../../../Core/Modal/PdfViweModal';\r\nimport ReactDOM from 'react-dom';\r\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\r\nimport { GetExcelFileFromEndpoint } from '../../../../../Core/Service/reportService';\r\nimport AppContext from '../../../../../App/AppContext';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport { useContext } from 'react';\r\nimport { GetBranchDeportmentScreenDropdowns } from '../../../../../Core/Service/reportService';\r\n\r\nconst baseColumns = [\r\n { field: 'bn', title: `Branch`, width: 180 },\r\n { field: 'sold', title: `Credited Hours`, width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'taken', title: `Taken Hours`, width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n { field: 'sale', title: `Credit`, width: 150, align: 'right', renderer: formatters.CurrencyThousandSeparator, filterable: false, sortable: false },\r\n { field: 'cost', title: `Cost`, width: 120, align: 'right', renderer: formatters.CurrencyThousandSeparator, filterable: false, sortable: false }\r\n // { field: 'marginPerc', title: 'Margin %', width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.ToFixedSeparator },\r\n // { field: 'recRate', title: 'Rec Rate ', width: 120, align: 'right', filterable: false, sortable: false, renderer: formatters.CurrencyThousandSeparator }\r\n];\r\n\r\nvar opColumns = [\r\n { title: 'Operator', field: 'opName', width: 90, sortable: true },\r\n { title: 'Credited Hours', field: 'sold', width: 70, sortable: true, align: 'right' },\r\n { title: 'Taken', field: 'taken', width: 70, sortable: true, align: 'right' },\r\n { title: 'Credit', field: 'sale', width: 80, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Cost', field: 'cost', width: 80, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' }\r\n // { title: 'Margin %', field: 'marginPerc', width: 60, sortable: true, align: 'right' },\r\n // { title: 'Rec Rate ', renderer: formatters.CurrencyThousandSeparator, field: 'recRate', width: 60, sortable: true, align: 'right' }\r\n];\r\n\r\nconst wipColumns = [\r\n { title: 'WIP', field: 'wipNumber', width: 70, sortable: true },\r\n { title: 'Invoice No', field: 'invoiceNumber', width: 70, sortable: true },\r\n { title: 'Customer', field: 'customersName', width: 130, sortable: true },\r\n { title: 'Credited Hours', field: 'sold', width: 70, sortable: true, align: 'right' },\r\n { title: 'Taken', field: 'taken', width: 70, sortable: true, align: 'right' },\r\n { title: 'Credit', field: 'sale', width: 60, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' },\r\n { title: 'Cost', field: 'cost', width: 70, sortable: true, renderer: formatters.CurrencyThousandSeparator, align: 'right' }\r\n // { title: 'Margin %', field: 'marginPerc', width: 70, sortable: true, align: 'right' },\r\n // { title: 'Rec Rate ', field: 'recRate', width: 70, sortable: true, align: 'right', renderer: formatters.CurrencyThousandSeparator }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Services', active: true },\r\n { name: 'Credit Hours', active: true }\r\n];\r\nvar mainGrid, opGrid, wipsGrid;\r\nvar $ = window.$;\r\n\r\nconst CreditsHours = (props) => {\r\n const { showToast } = useContext(AppContext);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamStartDateType = params.get('startDateType') || '';\r\n let ParamBranchID = params.get('branchID') || '';\r\n\r\n let dateType = ParamStartDateType == 'ytd' ? 'year' : 'month';\r\n let startDate = moment().startOf(`${dateType}`).format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n BranchList: [],\r\n branchID: null\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await GetBranchDeportmentScreenDropdowns();\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.BranchList = res.data?.branchList || [];\r\n if (ParamBranchID) {\r\n newSt.branchID = res.data?.branchList.find((r) => r.id == ParamBranchID);\r\n }\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n const fieldChange = (e) => {\r\n let { name, value } = e.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n };\r\n\r\n let token = AppStorage.getToken();\r\n\r\n // const mainGridOnSuccessFunc = function (response) {\r\n // var obj = {\r\n // records: response.data.list,\r\n // total: response.data.total\r\n // };\r\n // mainGrid.render(obj);\r\n // };\r\n\r\n // const opGridOnSuccessFunc = function (response) {\r\n // var obj = {\r\n // records: response.data.list,\r\n // total: response.data.total\r\n // };\r\n // opGrid.render(obj);\r\n // };\r\n // const onSuccessWipFunc = function (response) {\r\n // var obj = {\r\n // records: response.data.list,\r\n // total: response.data.total\r\n // };\r\n // wipsGrid.render(obj);\r\n // };\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showWIPDetails: true, wipNumber: record.wipNumber, company: record.company }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const documentHandler = async (record) => {\r\n let res = await getAgedMeasuresViewDocument(record.invoiceFileName);\r\n if (res) {\r\n setState((st) => ({ ...st, showPdfModal: true, pdfFileData: res }));\r\n } else {\r\n console.error(res.message);\r\n }\r\n };\r\n\r\n const docEditButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n let isFile = record.invoiceFileName;\r\n const lnk = (\r\n documentHandler(record) : ''}>\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const NewWipcolumns = useMemo(() => {\r\n const tempCols = [...wipColumns];\r\n let wipNumberCol = tempCols.find((element) => element.field === 'wipNumber');\r\n let ViewDocCol = tempCols.find((element) => element.field === 'invoiceNumber');\r\n if (ViewDocCol) {\r\n ViewDocCol.renderer = docEditButton;\r\n }\r\n if (wipNumberCol) {\r\n wipNumberCol.renderer = editButton({});\r\n }\r\n return tempCols;\r\n });\r\n let getUrl = `${ExpBaseURL}/api/services/ReportingGetCreditHours?StartDate=${state.startDate}&EndDate=${state.endDate}&branchID=${\r\n state.branchID?.id || ''\r\n }`;\r\n\r\n const setDataSource = (gridInstance, getUrl) => {\r\n const onSuccessFunc = function (response) {\r\n gridInstance.render({\r\n records: response.data.list,\r\n total: response?.data?.total\r\n });\r\n };\r\n\r\n gridInstance.data().dataSource = {\r\n url: `${getUrl}`,\r\n\r\n // data: { StartDate: state.startDate, EndDate: state.endDate },\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n success: onSuccessFunc\r\n };\r\n };\r\n\r\n const pullInvoiceHours = async () => {\r\n window.$(`#tb_InvoicedHours`).grid('destroy', true, true);\r\n\r\n mainGrid = $('#tb_InvoicedHours').grid({\r\n primaryKey: 'branchID',\r\n dataSource: [],\r\n detailTemplate: '',\r\n columns: baseColumns,\r\n pager: { limit: 15 }\r\n });\r\n\r\n setTimeout(() => {\r\n setDataSource(mainGrid, getUrl);\r\n mainGrid.reload();\r\n });\r\n\r\n mainGrid.on('dataBound', function (e, records, totalRecords) {\r\n var recordsCount = records.length;\r\n var sumsold = 0,\r\n sumtaken = 0,\r\n sumeff = 0,\r\n sumsale = 0,\r\n sumcost = 0,\r\n sumprofit = 0,\r\n summarginPerc = 0,\r\n sumrecRate = 0,\r\n $tfoot;\r\n $.each(records, function () {\r\n sumsold += parseFloat(this.sold);\r\n sumtaken += parseFloat(this.taken);\r\n sumeff += parseFloat(this.eff);\r\n sumsale += parseFloat(this.sale);\r\n sumcost += parseFloat(this.cost);\r\n sumprofit += parseFloat(this.profit);\r\n summarginPerc += parseFloat(this.marginPerc);\r\n sumrecRate += parseFloat(this.recRate);\r\n });\r\n sumeff = parseFloat((sumsold / sumtaken) * 100);\r\n summarginPerc = parseFloat(summarginPerc / recordsCount);\r\n sumrecRate = parseFloat(sumrecRate / recordsCount);\r\n $tfoot = mainGrid.children('tfoot');\r\n $tfoot.children('tr[data-role=\"TotalAmount\"]').remove();\r\n $tfoot.children('tr[data-role=\"pager\"]').remove();\r\n $tfoot.prepend(\r\n ' | Total | ' +\r\n formatters.ToFixedSeparator(sumsold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumtaken) +\r\n // ' | ' +\r\n // formatters.ToFixedSeparator(sumeff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcost) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n primaryKey: 'opno',\r\n dataSource: [],\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n\r\n setDataSource(opGrid, `${ExpBaseURL}/api/services/ReportingGetCreditHours?StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`);\r\n opGrid.reload();\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, opno) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, opno: opno },\r\n primaryKey: 'id',\r\n dataSource: [],\r\n columns: NewWipcolumns,\r\n pager: { limit: 10 }\r\n });\r\n setTimeout(() => {\r\n setDataSource(wipsGrid, `${ExpBaseURL}/api/services/ReportingGetCreditHours?StartDate=${state.startDate}&EndDate=${state.endDate}`);\r\n wipsGrid.reload();\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullInvoiceHours();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.BranchList]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/ReportingGetCreditHours?StartDate=${state.startDate}&EndDate=${state.endDate}${\r\n getUrl.includes('?') ? '&' : '?'\r\n }fileType=excel`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'InvoicedHours');\r\n };\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
| | | Total | ' +\r\n formatters.CurrencyThousandSeparator(sumCurrent) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumBroughtForward) +\r\n ' | |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n var record = mainGrid.getById(branchID);\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, ac: record.ac },\r\n headerFilter: true,\r\n primaryKey: 'dn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/ServiceNominalsList`,\r\n headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n data: { Type: props.type, StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessOperatorFunc\r\n },\r\n columns: nominalColumns\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n setDataSource(mainGrid, getUrl);\r\n mainGrid.reload();\r\n };\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n let downloadURL = `services/ServiceNominalsList?Type=${props.type}&fileType=excel`;\r\n await GetExcelFileFromEndpoint(downloadURL, screenName[props.type]);\r\n };\r\n\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumSold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumTaken) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumEff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumSale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumCost) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumProfit) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumMarginPerc) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumRecRate) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n // headerFilter: true,\r\n primaryKey: 'code',\r\n dataSource: [],\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/services/TechEfficiency`,\r\n // headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n // data: { StartDate: state.startDate, EndDate: state.endDate },\r\n // success: onSuccessOperatorFunc\r\n // },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n\r\n setDataSource(opGrid, `${ExpBaseURL}/api/services/TechEfficiency`);\r\n opGrid.reload();\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, code) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, code: code },\r\n primaryKey: 'id',\r\n dataSource: [],\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/services/TechEfficiency`,\r\n // headers: {\r\n // Authorization: `Bearer ${token}`,\r\n // domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n // },\r\n // data: { StartDate: state.startDate, EndDate: state.endDate },\r\n // success: onSuccessWipFunc\r\n // },\r\n columns: columns,\r\n pager: { limit: 10 }\r\n });\r\n setDataSource(wipsGrid, `${ExpBaseURL}/api/services/TechEfficiency`);\r\n wipsGrid.reload();\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, code) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n setDataSource(mainGrid, `${ExpBaseURL}/api/services/TechEfficiency`);\r\n mainGrid.reload();\r\n };\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n let downloadURL = `services/TechEfficiency?fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}&fn=${state?.fn?.id}`;\r\n await GetExcelFileFromEndpoint(downloadURL, 'TechEfficiency');\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type, state.fn]);\r\n return (\r\n \r\n
\r\n
\r\n {state.showWIPDetails && (\r\n setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Franchise\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
| Total | ' +\r\n formatters.CurrencyThousandSeparator(sumgrossProfit) +\r\n ' | ' +\r\n '' +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsaleValue) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcostValue) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumretailPrice) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsurchargeValue) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { BranchID: branchID },\r\n primaryKey: 'opno',\r\n dataSource: [],\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`,\r\n // headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n // success: opGridOnSuccessFunc\r\n // },\r\n columns: opColumns,\r\n pager: { limit: 10 },\r\n detailTemplate: ''\r\n });\r\n setDataSource(\r\n opGrid,\r\n `${ExpBaseURL}/api/Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B`\r\n );\r\n opGrid.reload();\r\n\r\n opGrid.on('dataBound', function (e, records, totalRecords) {});\r\n opGrid.on('detailExpand', function (e, $detailWrapper, opno) {\r\n wipsGrid = $detailWrapper.find('table').grid({\r\n params: { BranchID: branchID, opno: opno },\r\n primaryKey: 'id',\r\n\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n success: onSuccessWipFunc\r\n },\r\n columns: WipRendererNColumns\r\n });\r\n });\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n setDataSource(mainGrid, getUrl);\r\n mainGrid.reload();\r\n };\r\n\r\n const editButton = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showWIPDetails: true, wipNumber: record.wn, company: record.co }))} style={{ cursor: 'pointer' }}>\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const WipRendererNColumns = useMemo(() => {\r\n const tempCols = [...wipColumns];\r\n let wipNumberCol = tempCols.find((element) => element.field === 'wn');\r\n if (wipNumberCol) {\r\n wipNumberCol.renderer = editButton({});\r\n }\r\n return tempCols;\r\n });\r\n\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullPartsSalesList();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.departmentCode, state.BranchList]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n\r\n const data = mainGrid.data().params;\r\n let downloadURL = `Parts/PartsSales?dc=${state.departmentCode?.id || ''}&StartDate=${state.startDate}&EndDate=${state.endDate}&fileType=excel`;\r\n\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, ParamMeasuredesc);\r\n };\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n Select Department\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
{tilte[state.buttonID]}
*/}\r\n {/* {state.newVehicle.map((m) => {\r\n return (\r\n <>\r\n \r\n {m.branch || 'N / A'}
\r\n\r\n \r\n \r\n \r\n \r\n New Vehicle
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'new') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Used Vehicle
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'used') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Registrations
\r\n \r\n {m.data.map((n) => {\r\n if (n.type === 'reg') {\r\n return (\r\n \r\n \r\n \r\n {n.franchiseName || 'N/A'}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.mtdTotal)}\r\n
\r\n MTD
\r\n \r\n\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(n.ytdTotal)}\r\n
\r\n YTD
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n })} */}\r\n \r\n \r\n {/* \r\n \r\n RedirectToDash('/AgedMeasures')}\r\n >\r\n \r\n
\r\n
Aged Measures
\r\n
\r\n
\r\n
Service Dashboard
\r\n
\r\n
\r\n
Sales Dashboard v1
\r\n
\r\n
\r\n
Sales Dashboard V2
\r\n
\r\n \r\n props.handleRemoveClick(i)}>\r\n Remove\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DiagnosticSheetsImageComponent;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionOne = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 1: Engine/Transmission
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n\r\n \r\n \r\n \r\n Engine fault:\r\n \r\n \r\n \r\n {state.enginefault.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Warning light:\r\n \r\n \r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetEngineTransmissionWarningLight', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetEngineTransmissionWarningLight', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionOne;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionTwo = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 2: Noise/Vibration
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n\r\n \r\n \r\n \r\n Noise apparent:\r\n \r\n \r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetIsNoiseApparent', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetIsNoiseApparent', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n {/* {state.diagnosticSheetIsNoiseApparent && ( */}\r\n \r\n \r\n {state.noiseApparent.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n {/* )} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Location:\r\n \r\n \r\n \r\n {state.location.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Type of noise:\r\n \r\n \r\n \r\n {state.typeOfNoise.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Other (specify)`}:\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Images`}:\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRemoveClick(i, 'diagnosticSheetNoiseVibrationImg')}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionTwo;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionThree = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 3: Water Leaks
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Has the vehicle had any body repairs:\r\n \r\n \r\n \r\n handleYesNo('diagnosticSheetWaterLeaksehadAnyBodyRepairs', true)}\r\n >\r\n Yes\r\n \r\n\r\n handleYesNo('diagnosticSheetWaterLeaksehadAnyBodyRepairs', false)}\r\n >\r\n No\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`*If Yes, what repair was carried out:`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vehicle position:\r\n \r\n \r\n \r\n {state.vehiclePosition.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Occurs:\r\n \r\n \r\n \r\n {state.occurs.map((c) => {\r\n return (\r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Water:\r\n \r\n \r\n \r\n {state.water.map((c) => {\r\n return (\r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Images`}:\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRemoveClick(i, 'diagnosticSheetWaterLeakImg')}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionThree;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst SectionFour = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n Section 4: Electronics, Controls and Audio
\r\n \r\n
\r\n \r\n \r\n Description of concern\r\n \r\n \r\n \r\n \r\n \r\n Malfunction:\r\n \r\n \r\n \r\n {state.malfunction.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`Other (specify)`}:\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SectionFour;\r\n","import { Button, ButtonGroup, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, Tooltip } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { SecondaryCheckbox, TextBox } from '../../../../Core/FormInput';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport DiagnosticSheetsImageComponent from '../imageSlider';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginTop: 15\r\n },\r\n table: {\r\n minWidth: '100%'\r\n },\r\n\r\n title: {\r\n color: '#f50057',\r\n marginLeft: 8,\r\n marginTop: 8,\r\n marginBottom: 8\r\n },\r\n loader: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginTop: 300\r\n },\r\n paper: {\r\n padding: '7px 16px 16px 16px',\r\n // color: theme.palette.text.secondary,\r\n border: '1px solid rgba(0,0,0,0.2)',\r\n width: '100%'\r\n // boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'\r\n },\r\n axelTitles: {\r\n textAlign: 'center',\r\n color: '#f50057',\r\n width: '100%'\r\n },\r\n headings: {\r\n color: '#f50057',\r\n margin: 0\r\n // marginLeft: -4,\r\n // marginBottom: 20\r\n }\r\n}));\r\n\r\nconst GeneralSection = (props) => {\r\n const { state, handleFieldChange, handleCheckbox, handleYesNo, upload, handleRemoveClick } = props;\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n General
\r\n \r\n \r\n \r\n Model : \r\n\r\n \r\n \r\n \r\n {state.models?.map((btn, i) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n Fault codes\r\n \r\n \r\n \r\n Can the customer resolve the issue in any way, e.g. switching the engine off and on?\r\n \r\n \r\n \r\n \r\n {state.modelItemList?.map((p) => {\r\n return (\r\n \r\n }\r\n label={p.name}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n Fault:\r\n \r\n \r\n \r\n \r\n {state.generalFualts?.map((p) => {\r\n return } label={p.name} />;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Engine condition:\r\n \r\n \r\n \r\n {state.engineCondition?.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Weather related:\r\n \r\n \r\n \r\n {state.weatherRelated?.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Driving condition:\r\n \r\n \r\n \r\n {state.drivingCondition?.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Road conditions:\r\n \r\n \r\n \r\n {state.roadCondition?.map((c) => {\r\n return (\r\n \r\n \r\n }\r\n label={`${c.name}`}\r\n />\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Speed:\r\n \r\n \r\n \r\n \r\n MPH\r\n \r\n \r\n \r\n RPM\r\n \r\n \r\n \r\n \r\n }\r\n label=\"All speeds\"\r\n />\r\n \r\n \r\n \r\n \r\n Gear\r\n \r\n \r\n\r\n \r\n {state.gear?.map((p) => {\r\n return } label={p.name} />;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {/* */}\r\n \r\n Customer Details
\r\n \r\n {/*
*/}\r\n \r\n \r\n Cutomer Name\r\n
\r\n \r\n {state.headerData.customerName}\r\n \r\n \r\n \r\n Wip number\r\n
\r\n \r\n {state.headerData.wipNumber}\r\n \r\n \r\n \r\n Registration number\r\n
\r\n \r\n {state.headerData.registration}\r\n \r\n \r\n \r\n Repeat repair\r\n
\r\n \r\n {state.headerData.repeatRepair == 'N' ? 'No' : 'Yes'}\r\n \r\n \r\n {state.reportedTakenBy && (\r\n \r\n Report taken by\r\n
\r\n \r\n {state.reportedTakenBy}\r\n \r\n \r\n )}\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {btnLoader ? 'Saving' : 'Submit'}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n downloadName={'Account Queries Sales exec'}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AccountQueriesbySalesexec;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel, Breadcrumbs } from '@material-ui/core';\r\nimport { TextBox } from './../../../../../Core/FormInput';\r\n// import NestedGijgoGrid from './../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport { Link } from 'react-router-dom';\r\n// import BreadCrumbs from './../../../../Core/Controls/Breadcrumb';\r\nimport NestedGijgoGrid from './../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useState } from 'react';\r\nimport MotHistoryScreen from '../../MotHistoryScreen';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport ReactDOM from 'react-dom';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nvar monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 70, sortable: true },\r\n { title: 'Comm Number', field: 'cn', width: 90, sortable: true },\r\n { title: 'Reg Number', field: 'rn', width: 80, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Model',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Stock Days',\r\n field: 'd',\r\n width: 60,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Type',\r\n field: 'mac',\r\n width: 50,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Customer',\r\n field: 'cust',\r\n width: 100,\r\n sortable: true\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'sp',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Profit',\r\n field: 'latestProfitValue',\r\n width: 120,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Cost',\r\n field: 'cost',\r\n width: 120,\r\n sortable: true,\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n },\r\n align: 'right'\r\n },\r\n {\r\n title: 'Order Date',\r\n field: 'od',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Est Date',\r\n field: 'estimDeliveryDate',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return `| Vehicle Description | Notes | Est Profit |
|---|
\r\n | {vd} | {n} | £{estimatedProfit} |
`;\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Sales Work In Progress', active: true }\r\n];\r\n\r\nconst SalesWorkinProgress = (props) => {\r\n const [state, setState] = useState({ showMotHistory: false });\r\n\r\n const regNumberRendrer = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showMotHistory: true, regNo: record?.rn, FranchiseCode: record?.f }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let regNumberCol = tempCols.find((element) => element.field === 'rn');\r\n if (regNumberCol) {\r\n regNumberCol.renderer = regNumberRendrer({});\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const baseUrl = `Sales/NewVehicleOrdersWIP`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n downloadName={'Sales Work In Progress'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SalesWorkinProgress;\r\n","import React from 'react';\r\nimport moment from 'moment';\r\nimport { Grid, InputLabel } from '@material-ui/core';\r\nimport { SingelSelect, TextBox } from '../../../../../Core/FormInput';\r\nimport { Link } from 'react-router-dom';\r\nimport NestedGijgoGrid from '../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\nimport { getSalesVehicleDropdown } from '../../../../../Core/Service/salesDasboard-service';\r\nimport { useMemo } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport JobNotesModal from '../../../dashboard/NewSalesDashboard/WorkFlow/JobNotes';\r\n\r\nconst baseColumns = [\r\n { title: 'SBN', field: 'sn', width: 50, sortable: true },\r\n // { title: 'Comm Number', field: 'cn', width: 70, sortable: true },\r\n { title: 'Reg Number', field: 'rn', width: 80, sortable: true },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 170\r\n },\r\n\r\n {\r\n title: 'Sold By',\r\n field: 'sp',\r\n width: 100,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Profit',\r\n field: 'latestProfitValue',\r\n renderer: formatters.CurrencyThousandSeparator,\r\n width: 85,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n // {\r\n // title: 'Progress',\r\n // field: 'pd',\r\n // width: 80,\r\n // sortable: true,\r\n // isDropDown: true,\r\n // listIdFromAPIResponse: 'progressCodes',\r\n // dropDownValueField: 'id',\r\n // dropDownLableField: 'name'\r\n // },\r\n\r\n {\r\n title: 'Customer',\r\n field: 'cust',\r\n width: 130,\r\n sortable: true\r\n },\r\n {\r\n title: 'Reg Date',\r\n field: 'regDate',\r\n width: 80,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Invoice',\r\n field: 'invoice',\r\n width: 80\r\n },\r\n\r\n {\r\n title: 'Invoice Date',\r\n field: 'id',\r\n width: 80,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n {\r\n title: 'Stock Days',\r\n field: 'd',\r\n width: 80,\r\n sortable: true,\r\n // renderer: formatters.MonthShortFormatter,\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Order Type',\r\n field: 'ot',\r\n width: 100\r\n },\r\n // {\r\n // title: 'Model',\r\n // field: 'rmac',\r\n // width: 70,\r\n // sortable: true,\r\n // isDropDown: false\r\n // // listIdFromAPIResponse: 'modelRecords',\r\n // // dropDownValueField: 'name',\r\n // // dropDownLableField: 'name'\r\n // },\r\n\r\n // {\r\n // title: 'Franchise',\r\n // field: 'f',\r\n // width: 80,\r\n // sortable: true,\r\n // isDropDown: false\r\n // // listIdFromAPIResponse: 'modelAnalysisCodes',\r\n // // dropDownValueField: 'name',\r\n // // dropDownLableField: 'name'\r\n // },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 70,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Status',\r\n field: 'accStatus',\r\n width: 80\r\n }\r\n\r\n // {\r\n // title: 'Cost',\r\n // field: 'cost',\r\n // renderer: formatters.CurrencyThousandSeparator,\r\n // width: 70,\r\n // sortable: true,\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Order Date',\r\n // field: 'od',\r\n // width: 70,\r\n // sortable: true,\r\n // renderer: formatters.MonthShortFormatter,\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Build Date',\r\n // field: 'bd',\r\n // width: 70,\r\n // sortable: true,\r\n // renderer: formatters.MonthShortFormatter,\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Cons Date',\r\n // field: 'cd',\r\n // width: 90,\r\n // sortable: true,\r\n // renderer: formatters.MonthShortFormatter,\r\n // align: 'right'\r\n // },\r\n // {\r\n // title: 'Est Date',\r\n // field: 'EstimDeliveryDate',\r\n // renderer: formatters.MonthShortFormatter,\r\n // width: 70,\r\n // sortable: true,\r\n // align: 'right'\r\n // }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return (\r\n \"\" +\r\n \"\" +\r\n \"| Franchise | \" +\r\n \"Comm Number | \" +\r\n \"Order Date | \" +\r\n \"Build Date | \" +\r\n \"Cons Date | \" +\r\n \"Est Date | \" +\r\n \"Est Profit |
\" +\r\n '| {f} | {cn} | {od} | {bd} | {cd} | {edd} | £{estimatedProfit} |
'\r\n );\r\n};\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Registration Report', active: true }\r\n];\r\n\r\n// let startDate = ;\r\n\r\nconst RegistrationReports = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let typeID = params.get('type') || '';\r\n let modelID = params.get('model') || '';\r\n let startDateParams = params.get('startDate') || '';\r\n let endDateParams = params.get('endDate') || '';\r\n let isElectric = params.get('isElectric') || '';\r\n const [state, setState] = useState({\r\n EndDate: endDateParams || moment().format('YYYY-MM-DD'),\r\n StartDate: startDateParams || moment().startOf('month').format('YYYY-MM-DD'),\r\n categoriesId: typeID ? (typeID === '1' ? { id: 1, name: 'VAN' } : { id: 2, name: 'TRUCK' }) : {},\r\n modelAnalysisCodeId: {},\r\n categoriesList: [],\r\n modelAnalysisCodeList: [],\r\n filterAnalysiscodelist: [],\r\n handleVehicleNotes: false,\r\n records: {}\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 useEffect(async () => {\r\n let res = await getSalesVehicleDropdown();\r\n\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.categoriesList = res.data?.category || [];\r\n newSt.modelAnalysisCodeList = res.data?.modelAnalysisCode || [];\r\n // if (PramCategoryType) {\r\n // newSt.categoriesId = res.data?.category.find((r) => r.id == PramCategoryType);\r\n // }\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n useEffect(async () => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (JSON.stringify(state.categoriesId) !== '{}') {\r\n newSt.filterAnalysiscodelist = state.modelAnalysisCodeList.filter((k) => k.cid === state.categoriesId?.id);\r\n } else {\r\n newSt.filterAnalysiscodelist = [...st.modelAnalysisCodeList];\r\n }\r\n return newSt;\r\n });\r\n }, [state.categoriesId, state.modelAnalysisCodeList]);\r\n\r\n useEffect(async () => {\r\n if (modelID) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.modelAnalysisCodeId = state.modelAnalysisCodeList.find((k) => k.id === modelID) || {};\r\n return newSt;\r\n });\r\n }\r\n }, [modelID, state.modelAnalysisCodeList]);\r\n\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n const baseUrl = `Sales/RegistrationReport?StartDate=${state.StartDate}&EndDate=${state.EndDate}&VehicleCategoryID=${state.categoriesId?.id || ''}&rmac=${\r\n state.modelAnalysisCodeId?.id || ''\r\n } &isElectric=${isElectric}`;\r\n\r\n const HandelNotesModal = (value = {}) => {\r\n setState((st) => ({\r\n ...st,\r\n handleVehicleNotes: !st.handleVehicleNotes,\r\n records: { sn: value.sn, vd: value.vd },\r\n selectedStockID: value?.newStockID || null\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n HandelNotesModal(record)}\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n let StockCol = tempCols.find((k) => k.field === 'sn');\r\n if (StockCol) {\r\n StockCol.renderer = editButton;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n Vehicle Categories\r\n \r\n \r\n \r\n Model\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n detailTemplate={detailTemplate}\r\n downloadName={'Registration Report'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default RegistrationReports;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport moment from 'moment';\r\nimport { PrimaryButton, TextBox } from '../../../../Core/FormInput';\r\nimport { addReportingWIPLogs, getReportingWIPLogs } from '../../../../Core/Service/ReportScreens-service';\r\nimport '../ReportingNotesScreen/reportingNotes.scss';\r\n\r\nconst JobSingleNote = (props) => {\r\n return (\r\n \r\n
{props.note.notes}
\r\n
\r\n {props.note.userName} @ {moment(props.note.created).format('LLL')}\r\n
\r\n
\r\n \r\n \r\n {state.showWIPDetails && (\r\n setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))}\r\n maxWidth=\"md\"\r\n fullWidth\r\n overflow={'auto'}\r\n >\r\n \r\n \r\n )}\r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n downloadName=\"Aged Measures Workin Progress\"\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showNotesModal && }\r\n
\r\n );\r\n};\r\n\r\nexport default AgedMeasuresWorkingProgress;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\nconst baseColumns = [\r\n { field: 'salesExec', sortable: false, title: `Sales Exec`, filterable: false },\r\n {\r\n field: 'totalAmount',\r\n title: 'Total',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true\r\n },\r\n {\r\n field: 'sevenDays',\r\n title: '7 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'fourteenDays',\r\n title: '8-14 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'twentyOneDays',\r\n title: '15-21 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n },\r\n {\r\n field: 'overTwentyOneDays',\r\n title: 'Over 21 Days',\r\n showColumnTotal: true,\r\n align: 'right',\r\n filterable: false,\r\n sortable: false\r\n }\r\n];\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Vehicle Aged Debt By Salesexec', active: true }\r\n];\r\nconst VehicleAgedDebtBySalesexec = (props) => {\r\n const history = useHistory();\r\n const redirectToScreens = (value, record, MeasureID, field) => {\r\n let searchQuery = `?SalesExecCode=${record.salesExecCode}&AgeDays=${field.AgeDays}&salesExec=${record.salesExec}`;\r\n history.push({\r\n pathname: '/sales/ViewDebtDetailsSalesexec',\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const monthsActionHandler = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n redirectToScreens(value, record, props.MeasureID, field)}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {field.AgeDays ? addCommas(value) : value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n let salesExecCol = tempCols.find((element) => element.field === 'salesExec');\r\n let sevenDaysCol = tempCols.find((element) => element.field === 'sevenDays');\r\n let fourteenDaysCol = tempCols.find((element) => element.field === 'fourteenDays');\r\n let twentyOneDaysCol = tempCols.find((element) => element.field === 'twentyOneDays');\r\n let overTwentyOneDaysCol = tempCols.find((element) => element.field === 'overTwentyOneDays');\r\n\r\n if (salesExecCol) {\r\n salesExecCol.renderer = monthsActionHandler({ AgeDays: '' });\r\n }\r\n if (sevenDaysCol) {\r\n sevenDaysCol.renderer = monthsActionHandler({ AgeDays: 7 });\r\n }\r\n if (fourteenDaysCol) {\r\n fourteenDaysCol.renderer = monthsActionHandler({ AgeDays: 14 });\r\n }\r\n if (twentyOneDaysCol) {\r\n twentyOneDaysCol.renderer = monthsActionHandler({ AgeDays: 21 });\r\n }\r\n if (overTwentyOneDaysCol) {\r\n overTwentyOneDaysCol.renderer = monthsActionHandler({ AgeDays: 22 });\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n\r\n const baseUrl = `Sales/VehicleDebt`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={false}\r\n hideFilterRow={true}\r\n downloadName=\"Vehicle Aged Debt By Salesexec\"\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleAgedDebtBySalesexec;\r\n","import React, { useMemo, useState } from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\nimport JobNotesModal from '../../../dashboard/NewSalesDashboard/WorkFlow/JobNotes';\r\n\r\nconst baseColumns = [\r\n { title: 'Stock No', field: 'sn', width: 80, sortable: true },\r\n { title: 'Status', field: 's', width: 60, sortable: true },\r\n {\r\n title: 'Progress',\r\n field: 'pd',\r\n width: 80,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'progressCodes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name',\r\n sortable: true\r\n },\r\n {\r\n title: 'Model Code',\r\n field: 'mc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Comm Number',\r\n field: 'cn',\r\n width: 100,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Cons Date',\r\n field: 'cd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Build Date',\r\n field: 'bd',\r\n width: 90,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Days',\r\n field: 'd',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'bn',\r\n width: 150,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Notes',\r\n field: 'n',\r\n width: 150,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Loc',\r\n field: 'rsc',\r\n width: 90,\r\n sortable: true\r\n // renderer: function (value, record) {\r\n // return addCommas(value);\r\n // }\r\n },\r\n {\r\n title: 'Vehicle Group',\r\n field: 'mac',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelAnalysisCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'New Vehicle Stock (Excluding WIP)', active: true }\r\n];\r\n\r\nconst VehicleStocksExWip = (props) => {\r\n const [state, setState] = useState({\r\n handleVehicleNotes: false,\r\n records: {}\r\n });\r\n\r\n const HandelNotesModal = (value = {}) => {\r\n setState((st) => ({\r\n ...st,\r\n handleVehicleNotes: !st.handleVehicleNotes,\r\n records: { sn: value.sn, vd: value.vd },\r\n selectedStockID: value?.newStockID || null\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n HandelNotesModal(record)}\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let columns = [...baseColumns];\r\n let StockCol = columns.find((k) => k.field === 'sn');\r\n\r\n if (StockCol) {\r\n StockCol.renderer = editButton;\r\n }\r\n\r\n return columns;\r\n }, []);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Prampd = params.get('pd') || '';\r\n let PramMC = params.get('mc') || '';\r\n let PramMAC = params.get('mac') || '';\r\n const baseUrl = `Sales/SalesVehicleStock`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ pd: Prampd, mc: PramMC, mac: PramMAC }}\r\n downloadName={'New Vehicle Stock'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleStocksExWip;\r\n","import React, { useMemo, useState } from 'react';\r\nimport { Grid, InputLabel } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\nimport { SelectBox, SingelSelect, TextBox } from '../../../../../Core/FormInput';\r\nimport moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { getSalesVehicleDropdown } from '../../../../../Core/Service/salesDasboard-service';\r\nimport ReactDOM from 'react-dom';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport { getFinanceList } from '../../../../../Core/Service/SalesPerformance-service';\r\nimport JobNotesModal from '../../../dashboard/NewSalesDashboard/WorkFlow/JobNotes';\r\nconst baseColumns = [\r\n { title: 'SBN', field: 'sn', width: 80, sortable: true },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Sold By',\r\n field: 'sp',\r\n width: 130,\r\n sortable: true\r\n },\r\n {\r\n title: 'Customer',\r\n field: 'cust',\r\n width: 130,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Order Date',\r\n field: 'od',\r\n width: 130,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n\r\n // {\r\n // title: 'Comm Number',\r\n // field: 'cn',\r\n // width: 110,\r\n // sortable: true\r\n // },\r\n {\r\n title: 'FRD',\r\n field: 'edd',\r\n width: 100,\r\n sortable: true,\r\n renderer: formatters.MonthShortFormatter\r\n },\r\n\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 100,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Days',\r\n field: 'd',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Notes',\r\n field: 'n',\r\n width: 150,\r\n sortable: true\r\n },\r\n {\r\n title: 'Latest Loc',\r\n field: 'rsc',\r\n width: 90,\r\n sortable: true\r\n // renderer: function (value, record) {\r\n // return addCommas(value);\r\n // }\r\n },\r\n // {\r\n // title: 'Vehicle Group',\r\n // field: 'mac',\r\n // width: 100,\r\n // sortable: true,\r\n // isDropDown: true,\r\n // listIdFromAPIResponse: 'modelAnalysisCodes',\r\n // dropDownValueField: 'name',\r\n // dropDownLableField: 'name'\r\n // },\r\n // {\r\n // title: 'Model',\r\n // field: 'rmac',\r\n // width: 90,\r\n // sortable: true,\r\n // isDropDown: true,\r\n // listIdFromAPIResponse: 'modelRecords',\r\n // dropDownValueField: 'name',\r\n // dropDownLableField: 'name'\r\n // },\r\n {\r\n title: 'Order Type',\r\n field: 'ot',\r\n width: 90\r\n },\r\n { title: 'Status', field: 's', width: 100, sortable: true }\r\n\r\n // {\r\n // title: 'Progress',\r\n // field: 'pd',\r\n // width: 80,\r\n // sortable: true,\r\n // isDropDown: true,\r\n // listIdFromAPIResponse: 'progressCodes',\r\n // dropDownValueField: 'id',\r\n // dropDownLableField: 'name'\r\n // }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'New Vehicle Orders', active: true }\r\n];\r\n\r\nconst detailTemplate = () => {\r\n return (\r\n \"\" +\r\n \"\" +\r\n // \"| Order Date | \" +\r\n \"Progress | \" +\r\n \"Comm Number | \" +\r\n \"Build Date | \" +\r\n \"Cons Date | \" +\r\n // \"Est Date | \" +\r\n // \"Est Profit |
\" +\r\n '| {pd} | {cn} | {bd} | {cd} |
'\r\n );\r\n};\r\n\r\nconst VehicleNewOrder = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramMC = params.get('mc') || '';\r\n let PramCategoryType = params.get('CategoryType') || '';\r\n let startDateParams = params.get('startDate') || '';\r\n let endDateParams = params.get('endDate') || '';\r\n let typeID = params.get('type') || '';\r\n let modelID = params.get('model') || '';\r\n let isElectric = params.get('isElectric') || '';\r\n\r\n const [state, setState] = useState({\r\n categoriesList: [],\r\n // categoriesId: {},\r\n modelAnalysisCodeList: [],\r\n categoriesId: typeID ? (typeID === '1' ? { id: 1, name: 'VAN' } : { id: 2, name: 'TRUCK' }) : {},\r\n modelAnalysisCodeId: {},\r\n // modelAnalysisCodeId: {},\r\n EndDate: endDateParams || moment().format('YYYY-MM-DD'),\r\n StartDate: startDateParams || moment().startOf('month').format('YYYY-MM-DD'),\r\n handleVehicleNotes: false,\r\n records: {},\r\n fn: null,\r\n FranchiseList: []\r\n });\r\n\r\n const HandelNotesModal = (value = {}) => {\r\n setState((st) => ({\r\n ...st,\r\n handleVehicleNotes: !st.handleVehicleNotes,\r\n records: { sn: value.sn, vd: value.vd },\r\n selectedStockID: value.newStockID || null\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n HandelNotesModal(record)}\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n // useEffect(async () => {\r\n // let res = await getSalesVehicleDropdown();\r\n // if (res.success) {\r\n // setState((st) => {\r\n // let newSt = { ...st };\r\n // newSt.categoriesList = res.data?.category || [];\r\n // newSt.modelAnalysisCodeList = res.data?.modelAnalysisCode || [];\r\n // if (PramCategoryType) {\r\n // newSt.categoriesId = res.data?.category.find((r) => r.id == PramCategoryType);\r\n // }\r\n // return newSt;\r\n // });\r\n // }\r\n // }, []);\r\n\r\n useEffect(async () => {\r\n let pros = [];\r\n pros.push(getSalesVehicleDropdown(), getFinanceList());\r\n let responses = await Promise.all(pros);\r\n if (responses[0].success && responses[1].success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.categoriesList = responses[0].data?.category || [];\r\n newSt.modelAnalysisCodeList = responses[0].data?.modelAnalysisCode || [];\r\n if (PramCategoryType) {\r\n newSt.categoriesId = responses[0].data?.category.find((r) => r.id == PramCategoryType);\r\n }\r\n newSt.FranchiseList =\r\n responses[1].data.map((m) => ({\r\n id: m.letterIdentifier,\r\n name: m.franchiseName\r\n })) || [];\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n useEffect(async () => {\r\n if (modelID) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.modelAnalysisCodeId = state.modelAnalysisCodeList.find((k) => k.id === modelID) || {};\r\n\r\n return newSt;\r\n });\r\n }\r\n }, [modelID, state.modelAnalysisCodeList]);\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 singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n useEffect(async () => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (JSON.stringify(state.categoriesId) !== '{}') {\r\n newSt.filterAnalysiscodelist = state.modelAnalysisCodeList.filter((k) => k.cid === state.categoriesId?.id);\r\n } else {\r\n newSt.filterAnalysiscodelist = [...st.modelAnalysisCodeList];\r\n }\r\n return newSt;\r\n });\r\n }, [state.categoriesId, state.modelAnalysisCodeList]);\r\n\r\n const baseUrl = `Sales/NewVehicleOrders?StartDate=${state.StartDate}&EndDate=${state.EndDate}&VehicleCategoryID=${state.categoriesId?.id || ''}&rmac=${\r\n state.modelAnalysisCodeId?.id || ''\r\n }&fn=${state.fn?.id || ''}`;\r\n\r\n const columns = useMemo(() => {\r\n let columns = [...baseColumns];\r\n let StockCol = columns.find((k) => k.field === 'sn');\r\n\r\n if (StockCol) {\r\n StockCol.renderer = editButton;\r\n }\r\n\r\n return columns;\r\n }, []);\r\n\r\n // &isElectric=${isElectric ? isElectric : false}`;\r\n return (\r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n Vehicle Categories\r\n \r\n \r\n \r\n Model\r\n \r\n \r\n \r\n Select Franchise\r\n \r\n \r\n \r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n\r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n detailTemplate={detailTemplate}\r\n displayPagination={true}\r\n FilterdParamsValues={{ mc: PramMC }}\r\n downloadName={'New Vehicle Orders'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default VehicleNewOrder;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel, Breadcrumbs } from '@material-ui/core';\r\nimport { TextBox } from './../../../../../Core/FormInput';\r\nimport { Link } from 'react-router-dom';\r\nimport NestedGijgoGrid from './../../../../../Core/Controls/GijgoGrid/nestedGijgoGrid';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport CommonGijgoGrid from './../../../../../Core/Controls/GijgoGrid/index';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport { useState } from 'react';\r\nimport MotHistoryScreen from '../../MotHistoryScreen';\r\nimport ReactDOM from 'react-dom';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\nimport { VehicleNotes } from '../VehicleNotes';\r\nimport UsedNotesModal from '../../../dashboard/UsedSalesDashboard/WorkFlow/JobNotes';\r\nvar monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n { title: 'Reg Number', field: 'rn', width: 100, sortable: true },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n width: 250,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n { title: 'VSB No', field: 'sn', width: 80, sortable: true },\r\n {\r\n title: 'Invoice Date',\r\n field: 'ivd',\r\n width: 100,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'In Stock',\r\n field: 'isd',\r\n width: 120,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'RegDate',\r\n field: 'rd',\r\n width: 120,\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n title: 'Mileage',\r\n field: 'm',\r\n width: 80,\r\n\r\n sortable: true\r\n },\r\n { title: 'Status', field: 'acs', width: 50, sortable: true },\r\n { title: 'Q', field: 'qv', width: 40, sortable: true },\r\n\r\n {\r\n title: 'VAT Price',\r\n field: 'va',\r\n width: 120,\r\n align: 'right',\r\n sortable: true,\r\n\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n\r\n {\r\n title: 'Recon',\r\n field: 'rc',\r\n width: 90,\r\n sortable: true\r\n },\r\n {\r\n title: 'Age',\r\n field: 'age',\r\n width: 90,\r\n sortable: true\r\n },\r\n\r\n {\r\n title: 'Model Code',\r\n field: 'mdc',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'modelRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Franchise',\r\n field: 'fn',\r\n width: 70,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'franchiseRecords',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Selling Branch',\r\n width: 70,\r\n sortable: true,\r\n field: 'bn',\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Used Vehicle Stock', active: true }\r\n];\r\n\r\nconst UsedVehicleStock = (props) => {\r\n const [state, setState] = useState({ showMotHistory: false, handleVehicleNotes: false, records: {} });\r\n\r\n const regNumberRendrer = (field) => (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showMotHistory: true, regNo: record?.rn, FranchiseCode: record?.franchiseCode }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const HandelNotesModal = (value = {}) => {\r\n setState((st) => ({\r\n ...st,\r\n handleVehicleNotes: !st.handleVehicleNotes,\r\n records: { sn: value.sn, vd: value.vd },\r\n selectedStockID: value?.usedStockID || null\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n HandelNotesModal(record)}\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n\r\n let regNumberCol = tempCols.find((element) => element.field === 'rn');\r\n let StockCol = tempCols.find((k) => k.field === 'sn');\r\n\r\n if (regNumberCol) {\r\n regNumberCol.renderer = regNumberRendrer({});\r\n }\r\n\r\n if (StockCol) {\r\n StockCol.renderer = editButton;\r\n }\r\n\r\n return tempCols;\r\n }, []);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramFN = params.get('fn') || '';\r\n let PramBN = params.get('bn') || '';\r\n let PramMDC = params.get('mdc') || '';\r\n\r\n const baseUrl = `Sales/UsedVehicleStock`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ fn: PramFN, bn: PramBN, mdc: PramMDC }}\r\n downloadName=\"Used Vehicle Stock\"\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default UsedVehicleStock;\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport BreadCrumbs from './../../../../../Core/Controls/Breadcrumb/index';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport { getReportsSalesDropdownsResolveData } from '../../../../../Core/Service/reportService';\r\n\r\nlet addCommas = (val) => {\r\n return val ? `£${val.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')}` : '£0.00';\r\n};\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Department',\r\n field: 'dd',\r\n width: 90,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'departmentCodes',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'WIP No.',\r\n field: 'wn',\r\n width: 100,\r\n sortable: true,\r\n\r\n cssClass: 'text-center'\r\n },\r\n {\r\n title: 'Raised',\r\n field: 'r',\r\n width: 100,\r\n sortable: true,\r\n // align: 'center',\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n { title: 'Account', field: 'ac', width: 100, sortable: true },\r\n {\r\n title: 'Phone No.',\r\n field: 'ph',\r\n width: 100,\r\n sortable: true\r\n // align: 'center',\r\n // renderer: function (value, record) {\r\n // return formatters.MonthShortFormatter(value);\r\n // }\r\n },\r\n {\r\n title: 'Part Total',\r\n field: 'pt',\r\n width: 90,\r\n sortable: true,\r\n // align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Labour Total',\r\n field: 'lt',\r\n width: 90,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n {\r\n title: 'Total',\r\n field: 't',\r\n width: 90,\r\n sortable: true,\r\n align: 'right',\r\n renderer: function (value, record) {\r\n return addCommas(value);\r\n }\r\n },\r\n\r\n {\r\n title: 'Address',\r\n field: 'addr',\r\n width: 200,\r\n sortable: true,\r\n align: 'center'\r\n },\r\n {\r\n title: 'Code',\r\n field: 'mdc',\r\n width: 90,\r\n sortable: true,\r\n align: 'right'\r\n },\r\n {\r\n title: 'Franchise',\r\n field: 'fc',\r\n width: 100,\r\n align: 'right',\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'franchiseRecords',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n {\r\n title: 'Branch',\r\n field: 'bn',\r\n width: 100,\r\n align: 'center',\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'branchList',\r\n dropDownValueField: 'name',\r\n dropDownLableField: 'name'\r\n },\r\n { title: 'D', field: 'qv', width: 50, align: 'center', sortable: true }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Sales', active: true },\r\n { name: 'Sales Contingency Debt', active: true }\r\n];\r\n\r\nconst SalesContingencyDebt = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let PramFN = params.get('fn') || '';\r\n let PramBN = params.get('bn') || '';\r\n let PramDD = params.get('dd') || '';\r\n const baseUrl = `Sales/SalesContingencyDebt`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ fn: PramFN, bn: PramBN, dd: PramDD }}\r\n downloadName={'Sales Contingency Debt'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SalesContingencyDebt;\r\n","import React, { useMemo } from 'react';\r\nimport { moment } from 'moment';\r\nimport { Grid, FormLabel } from '@material-ui/core';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\n\r\nconst baseColumns = [\r\n {\r\n field: 'ac',\r\n title: 'Account',\r\n filterable: false,\r\n sortable: false,\r\n width: 90\r\n // isCurrency: true\r\n },\r\n {\r\n field: 'cr',\r\n title: 'Reference',\r\n filterable: false,\r\n sortable: false,\r\n width: 180\r\n },\r\n {\r\n field: 'rn',\r\n title: 'Reg No',\r\n filterable: false,\r\n sortable: false,\r\n width: 100\r\n },\r\n {\r\n field: 'rd',\r\n title: 'Reg Date',\r\n filterable: false,\r\n sortable: false,\r\n width: 100,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n }\r\n },\r\n {\r\n field: 'iname',\r\n title: 'Invoice Name',\r\n filterable: false,\r\n sortable: false,\r\n width: 250\r\n },\r\n {\r\n field: 'cn',\r\n title: 'Customer Name',\r\n filterable: false,\r\n sortable: false,\r\n width: 200\r\n },\r\n {\r\n field: 'bal',\r\n title: 'Balance',\r\n showColumnTotal: true,\r\n filterable: false,\r\n sortable: false,\r\n isCurrency: true,\r\n width: 120,\r\n align: 'right'\r\n },\r\n {\r\n field: 'id',\r\n title: 'Invoice Date',\r\n filterable: false,\r\n sortable: false,\r\n renderer: function (value, record) {\r\n return formatters.MonthShortFormatter(value);\r\n },\r\n width: 120\r\n },\r\n {\r\n field: 'age',\r\n title: 'Age',\r\n filterable: false,\r\n sortable: false,\r\n width: 60\r\n },\r\n {\r\n field: 'loc',\r\n title: 'Sold By',\r\n filterable: false,\r\n sortable: false,\r\n width: 100\r\n },\r\n {\r\n field: 'comm',\r\n title: 'Comm Number',\r\n filterable: false,\r\n sortable: false,\r\n width: 140\r\n },\r\n {\r\n field: 'sbn',\r\n title: 'Stockbook Number',\r\n filterable: false,\r\n sortable: false,\r\n width: 180\r\n },\r\n {\r\n field: 'dn',\r\n title: 'Invoice No',\r\n filterable: false,\r\n sortable: false,\r\n width: 120\r\n }\r\n];\r\n\r\nconst getCrumbs = (ParamsalesExec, ParamSalesExecCode, ParamAgeDays) => {\r\n let temp = {};\r\n let final = [\r\n { name: 'Home', path: '' },\r\n { name: `Vehicle Aged Debt By Salesexec`, path: '/sales/VehicleAgedDebtBySalesexec' }\r\n ];\r\n if (ParamsalesExec || ParamSalesExecCode || ParamAgeDays) {\r\n temp = {\r\n name: `${ParamsalesExec ? ParamsalesExec : ''} ${\r\n ParamAgeDays == '7'\r\n ? '(7 Days)'\r\n : ParamAgeDays == '14'\r\n ? '(8-14 Days)'\r\n : ParamAgeDays == '21'\r\n ? '(15-21 Days)'\r\n : ParamAgeDays == '22'\r\n ? '(Over 21 Days)'\r\n : ''\r\n }`,\r\n active: true\r\n };\r\n final = [...final, { ...temp }];\r\n }\r\n\r\n return final;\r\n};\r\n\r\nconst ViewDebtDetailsSalesexec = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamsalesExec = params.get('salesExec') || '';\r\n let ParamSalesExecCode = params.get('SalesExecCode') || '';\r\n let ParamAgeDays = params.get('AgeDays') || '';\r\n const baseUrl = `Sales/VehicleDebt?SalesExecCode=${ParamSalesExecCode}&AgeDays=${ParamAgeDays}`;\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={baseColumns}\r\n getUrl={baseUrl}\r\n isShowTotal={true}\r\n hidePagination={true}\r\n hideFilterRow={true}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ViewDebtDetailsSalesexec;\r\n","import { Grid, Typography } from '@material-ui/core';\r\nimport { CircularProgressbar, buildStyles } from 'react-circular-progressbar';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\n\r\nconst setPercentage = (profit, budget) => {\r\n if (!profit) {\r\n return 0;\r\n } else {\r\n if (budget == null || budget == 0) {\r\n return 100;\r\n } else {\r\n let value = (+profit / +budget) * 100;\r\n\r\n return Math.round(value) <= 100 ? Math.round(value) : 100;\r\n }\r\n }\r\n};\r\n\r\nexport const UsedSalesCard = (props) => {\r\n const history = useHistory();\r\n\r\n const onRedirect = (url, searchQuery) => {\r\n history.push({\r\n pathname: url,\r\n search: searchQuery\r\n });\r\n };\r\n const { mtdProfit, mtdBudget, label, ytdProfit, ytdBudget, id } = props;\r\n\r\n return (\r\n \r\n \r\n {label}\r\n
\r\n \r\n onRedirect('/sales/UsedVehicleProfitReport', `?CategoryType=${id}`)}\r\n >\r\n \r\n MTD\r\n \r\n \r\n \r\n = 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(mtdProfit, mtdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(mtdProfit, mtdBudget) >= 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n ACTUAL
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n \r\n onRedirect(\r\n '/sales/UsedVehicleProfitReport',\r\n `?CategoryType=${id}&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment().endOf('year').format('YYYY-MM-DD')}`\r\n )\r\n }\r\n >\r\n \r\n YTD\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdProfit, ytdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdProfit, ytdBudget) >= 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n \r\n \r\n ACTUAL
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n BUDGET
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport const UsedstockCard = (props) => {\r\n const { mtdProfit, mtdBudget, label, ytdProfit, ytdBudget } = props;\r\n\r\n return (\r\n \r\n \r\n {label}\r\n
\r\n \r\n \r\n \r\n Used Stock Units\r\n \r\n \r\n \r\n = 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(mtdProfit, mtdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(mtdProfit, mtdBudget) >= 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n Current Month
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n (Prior Month)
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Used Stock Value\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdProfit, ytdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdProfit, ytdBudget) >= 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n \r\n \r\n Current Month
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n (Prior Month)
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Avg / vehicle\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdProfit, ytdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdProfit, ytdBudget) >= 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n \r\n \r\n Current Month
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n (Prior Month)
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport const OutstandingContCard = (props) => {\r\n const { mtdProfit, mtdBudget, label, ytdProfit, ytdBudget } = props;\r\n\r\n return (\r\n \r\n \r\n {label}\r\n
\r\n \r\n \r\n \r\n Used Stock Units\r\n \r\n \r\n \r\n = 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(mtdProfit, mtdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(mtdProfit, mtdBudget) >= 50 && setPercentage(mtdProfit, mtdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(mtdProfit, mtdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n Current Month
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n (Prior Month)
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(mtdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Used Stock Value\r\n \r\n \r\n \r\n = 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(ytdProfit, ytdBudget) < 50\r\n ? '#D92641'\r\n : setPercentage(ytdProfit, ytdBudget) >= 50 && setPercentage(ytdProfit, ytdBudget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(ytdProfit, ytdBudget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: 'lightgrey',\r\n // strokeLinecap: '',\r\n textSize: '27px'\r\n })}\r\n strokeWidth={8}\r\n />\r\n
\r\n \r\n \r\n \r\n Current Month
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdProfit) || 0}\r\n
\r\n \r\n\r\n \r\n (Prior Month)
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(ytdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import { CircularProgress, Grid, Paper, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport './WeeklyFlashReport.scss';\r\nimport PublicIcon from '@material-ui/icons/Public';\r\nimport moment from 'moment';\r\nimport { useEffect } from 'react';\r\nimport { getWeeklyFlashReport } from '../../../../../Core/Service/ReportScreens-service';\r\nimport { useState } from 'react';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { CircularProgressbar, buildStyles } from 'react-circular-progressbar';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { OutstandingContCard, UsedSalesCard, UsedstockCard } from './SalesComm';\r\nimport InvoicedSaleProjection from '../InvoicedSaleProjection';\r\n\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reporting', active: true },\r\n { name: 'DOC', active: true }\r\n];\r\n\r\nlet ids = {\r\n ['MAXUS']: 3,\r\n ['TRUCK']: 2,\r\n ['VAN']: 1\r\n};\r\n\r\nconst setPercentage = (profit, budget) => {\r\n if (!+profit) {\r\n return 0;\r\n } else {\r\n if (budget == null || budget == 0) {\r\n return 100;\r\n } else {\r\n let value = (+profit / +budget) * 100;\r\n\r\n return Math.round(value);\r\n }\r\n }\r\n};\r\n\r\nlet styleTD = ({ children }) => {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nlet NewVanSale = [\r\n {\r\n name: 'Jan',\r\n Bt: 127,\r\n AWt: 142,\r\n Bytd: 127,\r\n AWytd: 142\r\n },\r\n {\r\n name: 'Feb',\r\n Bt: 139,\r\n AWt: 175,\r\n Bytd: 266,\r\n AWytd: 317\r\n },\r\n {\r\n name: 'Mar',\r\n Bt: 318,\r\n AWt: 282,\r\n Bytd: 584,\r\n AWytd: 599\r\n },\r\n {\r\n name: 'Apr',\r\n Bt: 243,\r\n AWt: 154,\r\n Bytd: 827,\r\n AWytd: 753\r\n },\r\n {\r\n name: 'May',\r\n Bt: 157,\r\n AWt: 65,\r\n Bytd: 984,\r\n AWytd: 818\r\n },\r\n {\r\n name: 'Jun',\r\n Bt: 192,\r\n AWt: 63,\r\n Bytd: 1176,\r\n AWytd: 881\r\n },\r\n {\r\n name: 'Jul',\r\n Bt: 192,\r\n AWt: 63,\r\n Bytd: 1176,\r\n AWytd: 881\r\n },\r\n {\r\n name: 'Aug',\r\n Bt: 105,\r\n AWt: 38,\r\n Bytd: 1439,\r\n AWytd: 994\r\n },\r\n {\r\n name: 'Sep',\r\n Bt: 332,\r\n AWt: 37,\r\n Bytd: 1771,\r\n AWytd: 1031\r\n },\r\n {\r\n name: 'Oct',\r\n Bt: 276,\r\n AWt: 37,\r\n Bytd: 2047,\r\n AWytd: 1058\r\n },\r\n {\r\n name: 'Nov',\r\n Bt: 172,\r\n AWt: 37,\r\n Bytd: 2219,\r\n AWytd: 1105\r\n },\r\n {\r\n name: 'Dec',\r\n Bt: 281,\r\n AWt: 463,\r\n Bytd: 2500,\r\n AWytd: 1568\r\n }\r\n];\r\n\r\nlet NewTruckSale = [\r\n {\r\n name: 'Jan',\r\n Bt: 31,\r\n AWt: 21,\r\n Bytd: 33,\r\n AWytd: 21\r\n },\r\n {\r\n name: 'Feb',\r\n Bt: 22,\r\n AWt: 65,\r\n Bytd: 53,\r\n AWytd: 86\r\n },\r\n {\r\n name: 'Mar',\r\n Bt: 65,\r\n AWt: 56,\r\n Bytd: 118,\r\n AWytd: 142\r\n },\r\n {\r\n name: 'Apr',\r\n Bt: 68,\r\n AWt: 52,\r\n Bytd: 186,\r\n AWytd: 194\r\n },\r\n {\r\n name: 'May',\r\n Bt: 52,\r\n AWt: 22,\r\n Bytd: 236,\r\n AWytd: 216\r\n },\r\n {\r\n name: 'Jun',\r\n Bt: 55,\r\n AWt: 21,\r\n Bytd: 293,\r\n AWytd: 237\r\n },\r\n {\r\n name: 'Jul',\r\n Bt: 51,\r\n AWt: 29,\r\n Bytd: 344,\r\n AWytd: 266\r\n },\r\n {\r\n name: 'Aug',\r\n Bt: 51,\r\n AWt: 7,\r\n Bytd: 395,\r\n AWytd: 273\r\n },\r\n {\r\n name: 'Sep',\r\n Bt: 115,\r\n AWt: 78,\r\n Bytd: 510,\r\n AWytd: 351\r\n },\r\n {\r\n name: 'Oct',\r\n Bt: 60,\r\n AWt: 76,\r\n Bytd: 570,\r\n AWytd: 427\r\n },\r\n {\r\n name: 'Nov',\r\n Bt: 48,\r\n AWt: 7,\r\n Bytd: 619,\r\n AWytd: 434\r\n },\r\n {\r\n name: 'Dec',\r\n Bt: 31,\r\n AWt: 3,\r\n Bytd: 650,\r\n AWytd: 437\r\n }\r\n];\r\n\r\nlet NewMaxusSale = [\r\n {\r\n name: 'Jan',\r\n Bt: 68,\r\n AWt: 44,\r\n Bytd: 68,\r\n AWytd: 44\r\n },\r\n {\r\n name: 'Feb',\r\n Bt: 70,\r\n AWt: 17,\r\n Bytd: 118,\r\n AWytd: 68\r\n },\r\n {\r\n name: 'Mar',\r\n Bt: 125,\r\n AWt: 30,\r\n Bytd: 268,\r\n AWytd: 91\r\n },\r\n {\r\n name: 'Apr',\r\n Bt: 121,\r\n AWt: 15,\r\n Bytd: 384,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'May',\r\n Bt: 94,\r\n AWt: 0,\r\n Bytd: 478,\r\n AWytd: 306\r\n },\r\n {\r\n name: 'Jun',\r\n Bt: 84,\r\n AWt: 0,\r\n Bytd: 562,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Jul',\r\n Bt: 92,\r\n AWt: 0,\r\n Bytd: 745,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Aug',\r\n Bt: 91,\r\n AWt: 0,\r\n Bytd: 745,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Sep',\r\n Bt: 139,\r\n AWt: 0,\r\n Bytd: 882,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Oct',\r\n Bt: 115,\r\n AWt: 0,\r\n Bytd: 997,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Nov',\r\n Bt: 117,\r\n AWt: 0,\r\n Bytd: 1114,\r\n AWytd: 106\r\n },\r\n {\r\n name: 'Dec',\r\n Bt: 86,\r\n AWt: 0,\r\n Bytd: 1200,\r\n AWytd: 106\r\n }\r\n];\r\n\r\nlet currentYear = moment().year();\r\n\r\nconst WeeklyFlashReport = (props) => {\r\n const [state, setState] = useState({ tableData: {}, isLoader: true, PartsData: [], salesData: [], usedSaleData: [] });\r\n const [width, height] = useWindowSize();\r\n const history = useHistory();\r\n\r\n const onRedirect = (url, searchQuery) => {\r\n history.push({\r\n pathname: url,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n let mtdSaleProfit = [\r\n {\r\n redirect: '/sales/NewVehicleProfitReport',\r\n query: '?CategoryType=2',\r\n label: 'New Truck',\r\n Budget: state.salesData[1]?.invoiceMTDBudget,\r\n Actual: state.salesData[1]?.invoiceMTDProfit,\r\n Variance: state.salesData[1]?.invoiceMTDProfit - state.salesData[1]?.invoiceMTDBudget\r\n },\r\n {\r\n redirect: '/sales/NewVehicleProfitReport',\r\n query: '?CategoryType=1',\r\n label: 'New Van',\r\n Budget: state.salesData[2]?.invoiceMTDBudget,\r\n Actual: state.salesData[2]?.invoiceMTDProfit,\r\n Variance: state.salesData[2]?.invoiceMTDProfit - state.salesData[2]?.invoiceMTDBudget\r\n },\r\n {\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: '?CategoryType=1',\r\n label: 'Used Van',\r\n Budget: state.tableData?.mtdSalesGrossMarginUsedVanBudget,\r\n Actual: state.tableData?.mtdSalesGrossMarginUsedVanActual,\r\n Variance: state.tableData?.mtdSalesGrossMarginUsedVanVariance\r\n },\r\n {\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: '?CategoryType=2',\r\n label: 'Used Truck',\r\n Budget: state.tableData?.mtdSalesGrossMarginUsedTruckBudget,\r\n Actual: state.tableData?.mtdSalesGrossMarginUsedTruckActual,\r\n Variance: state.tableData?.mtdSalesGrossMarginUsedTruckVariance\r\n },\r\n {\r\n label: 'Total',\r\n Budget: state.tableData?.mtdSalesGrossMarginTotalBudget,\r\n Actual: state.tableData?.mtdSalesGrossMarginTotalActual,\r\n Variance: state.tableData?.mtdSalesGrossMarginTotalVariance\r\n }\r\n ];\r\n\r\n let slabValueConfig = [\r\n {\r\n title: 'Vehicle Debtors',\r\n searchQuery: `?&measuredesc=${'Vehicle Debt'}&MeasureID=${9}`,\r\n reDirectUrl: '/AgedMeasures/VehicleDebt',\r\n data: [\r\n {\r\n slabName: 'Current',\r\n unit: state.tableData?.vehicleDebtorsCountCurrent,\r\n perc: state.tableData?.vehicleDebtorsAmountCurrentPerc,\r\n value: state.tableData?.vehicleDebtorsAmountCurrent\r\n },\r\n {\r\n slabName: '30 Days',\r\n unit: state.tableData?.vehicleDebtorsCount30daygreater,\r\n perc: state.tableData?.vehicleDebtorsCount30daygreaterPerc,\r\n value: state.tableData?.vehicleDebtorsAmount30daygreater\r\n },\r\n {\r\n slabName: '60 Days',\r\n unit: state.tableData?.vehicleDebtorsCount60daygreater,\r\n perc: state.tableData?.vehicleDebtorsCount60daygreaterPerc,\r\n value: state.tableData?.vehicleDebtorsAmount60daygreater\r\n },\r\n {\r\n slabName: '90 Days',\r\n unit: state.tableData?.vehicleDebtorsCount90daygreater,\r\n perc: state.tableData?.vehicleDebtorsCount90daygreaterPerc,\r\n value: state.tableData?.vehicleDebtorsAmount90daygreater\r\n },\r\n {\r\n slabName: 'Total',\r\n unit: state.tableData?.vehicleDebtorsTotalCount,\r\n perc: state.tableData?.vehicleDebtorsTotalperc,\r\n value: state.tableData?.vehicleDebtorsTotalAmount\r\n }\r\n ],\r\n\r\n headerClassName: 'g-bg-pink'\r\n },\r\n {\r\n title: 'Aged WIP',\r\n searchQuery: `?&measuredesc=${'Work In Progress'}&MeasureID=${1}`,\r\n reDirectUrl: '/AgedMeasures/WorkInProgress',\r\n data: [\r\n {\r\n slabName: 'Current',\r\n unit: state.tableData?.agedWIPCurrentCount,\r\n perc: state.tableData?.agedWIPCurrentperc,\r\n value: state.tableData?.agedWIPAmountCurrent\r\n },\r\n {\r\n slabName: '30 Days',\r\n unit: state.tableData?.agedWIP30daysgreaterCount,\r\n perc: state.tableData?.agedWIP30daysgreaterperc,\r\n value: state.tableData?.agedWIP30daysgreaterAmount\r\n },\r\n {\r\n slabName: '60 Days',\r\n unit: state.tableData?.agedWIP60daysgreaterCount,\r\n perc: state.tableData?.agedWIP60daysgreaterperc,\r\n value: state.tableData?.agedWIP60daysgreaterAmount\r\n },\r\n {\r\n slabName: '90 Days',\r\n unit: state.tableData?.agedWIP90daysgreaterCount,\r\n perc: state.tableData?.agedWIP90daysgreaterperc,\r\n value: state.tableData?.agedWIP90daysgreaterAmount\r\n },\r\n {\r\n slabName: 'Total',\r\n unit: state.tableData?.agedWIPTotalCount,\r\n perc: state.tableData?.agedWIPTotalperc,\r\n value: state.tableData?.agedWIPTotalAmount\r\n }\r\n ],\r\n headerClassName: 'g-bg-bluegray'\r\n },\r\n {\r\n title: 'Cash Sales',\r\n searchQuery: `?&measuredesc=${'Cash'}&MeasureID=${5}`,\r\n reDirectUrl: '/AgedMeasures/Cash',\r\n data: [\r\n {\r\n slabName: 'Current',\r\n unit: state.tableData?.cashSalesCurrentCount,\r\n perc: state.tableData?.cashSalesCurrentperc,\r\n value: state.tableData?.cashSalesCurrentAmount\r\n },\r\n {\r\n slabName: '30 Days',\r\n unit: state.tableData?.cashSales30daygreaterCount,\r\n perc: state.tableData?.cashSales30daygreaterperc,\r\n value: state.tableData?.cashSales30daygreaterAmount\r\n },\r\n {\r\n slabName: '60 Days',\r\n unit: state.tableData?.cashSales60daygreaterCount,\r\n perc: state.tableData?.cashSales60daygreaterperc,\r\n value: state.tableData?.cashSales60daygreaterAmount\r\n },\r\n {\r\n slabName: '90 Days',\r\n unit: state.tableData?.cashSales90daygreaterCount,\r\n perc: state.tableData?.cashSales90daygreaterperc,\r\n value: state.tableData?.cashSales90daygreaterAmount\r\n },\r\n {\r\n slabName: 'Total',\r\n unit: state.tableData?.cashSalesTotalCount,\r\n perc: state.tableData?.cashSalesTotalperc,\r\n value: state.tableData?.cashSalesTotalAmount\r\n }\r\n ],\r\n headerClassName: 'g-bg-skype'\r\n },\r\n {\r\n title: 'Queries',\r\n searchQuery: `?&measuredesc=${'Account Queries'}&MeasureID=${6}`,\r\n reDirectUrl: '/AgedMeasures/AccountQueries',\r\n data: [\r\n {\r\n slabName: 'Current',\r\n unit: state.tableData?.queriesCurrentCount,\r\n perc: state.tableData?.queriesCurrentperc,\r\n value: state.tableData?.queriesCurrentAmount\r\n },\r\n {\r\n slabName: '30 Days',\r\n unit: state.tableData?.queries30daygreaterCount,\r\n perc: state.tableData?.queries30daygreaterperc,\r\n value: state.tableData?.queries30daygreaterAmount\r\n },\r\n {\r\n slabName: '60 Days',\r\n unit: state.tableData?.queries60daygreaterCount,\r\n perc: state.tableData?.queries60daygreaterperc,\r\n value: state.tableData?.queries60daygreaterAmount\r\n },\r\n {\r\n slabName: '90 Days',\r\n unit: state.tableData?.queries90daygreaterCount,\r\n perc: state.tableData?.queries90daygreaterperc,\r\n value: state.tableData?.queries90daygreaterAmount\r\n },\r\n {\r\n slabName: 'Total',\r\n unit: state.tableData?.queriesTotalCount,\r\n perc: state.tableData?.queriesTotalperc,\r\n value: state.tableData?.queriesTotalAmount\r\n }\r\n ],\r\n headerClassName: 'g-bg-cyan'\r\n }\r\n ];\r\n\r\n let TruckUsedSale = [\r\n {\r\n label: 'MTD',\r\n Actual: '',\r\n Budget: '',\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: `?CategoryType=2`\r\n },\r\n {\r\n label: 'YTD',\r\n Budget: '',\r\n Actual: '',\r\n\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: `?CategoryType=2&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment().endOf('year').format('YYYY-MM-DD')}`\r\n }\r\n ];\r\n\r\n let vanUsedSale = [\r\n {\r\n label: 'MTD',\r\n Actual: '',\r\n Budget: '',\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: `?CategoryType=1`\r\n },\r\n {\r\n label: 'YTD',\r\n Actual: '',\r\n Budget: '',\r\n redirect: '/sales/UsedVehicleProfitReport',\r\n query: `?CategoryType=1&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment().endOf('year').format('YYYY-MM-DD')}`\r\n }\r\n ];\r\n\r\n let usedTruckStock = [\r\n {\r\n Actual: formatters.ThousandSeparatorWithoutZero(''),\r\n Budget: formatters.ThousandSeparatorWithoutZero('')\r\n },\r\n {\r\n Actual: formatters.CurrencyThousandSeparatorWithoutZero(''),\r\n Budget: formatters.CurrencyThousandSeparatorWithoutZero('')\r\n },\r\n {\r\n Actual: formatters.CurrencyThousandSeparatorWithoutZero(''),\r\n Budget: formatters.CurrencyThousandSeparatorWithoutZero('')\r\n }\r\n ];\r\n\r\n let usedVanStock = [\r\n {\r\n Actual: formatters.ThousandSeparatorWithoutZero(''),\r\n Budget: formatters.ThousandSeparatorWithoutZero('')\r\n },\r\n {\r\n Actual: formatters.CurrencyThousandSeparatorWithoutZero(''),\r\n Budget: formatters.CurrencyThousandSeparatorWithoutZero('')\r\n },\r\n {\r\n Actual: formatters.CurrencyThousandSeparatorWithoutZero(''),\r\n Budget: formatters.CurrencyThousandSeparatorWithoutZero('')\r\n }\r\n ];\r\n\r\n const pullTableData = async () => {\r\n let res = await getWeeklyFlashReport();\r\n setState((st) => ({\r\n ...st,\r\n tableData: res.data?.afterSales[0],\r\n PartsData: res.data?.partSales,\r\n totalPart: res.data?.partSales.reduce(\r\n (total, k) => {\r\n total.partsAmount += k.partsAmount;\r\n total.mtdBudget += k.mtdBudget;\r\n return total;\r\n },\r\n { partsAmount: 0, mtdBudget: 0 }\r\n ),\r\n salesData: res.data?.sales || [],\r\n usedSaleData: res.data?.usedSales,\r\n isLoader: false\r\n }));\r\n };\r\n\r\n useEffect(() => {\r\n pullTableData();\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {state.isLoader ? (\r\n
\r\n \r\n \r\n \r\n \r\n ) : (\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
MTD Sales Profit\r\n
\r\n
\r\n
1280 ? 'space-around' : 'flex-start'} alignItems=\"center\">\r\n {mtdSaleProfit.map((o, i) => {\r\n return (\r\n onRedirect(o.redirect, o.query)}\r\n item\r\n container\r\n xs={12}\r\n sm={6}\r\n md={3}\r\n lg={2}\r\n xl\r\n justifyContent={'space-around'}\r\n alignItems=\"center\"\r\n key={`saleprofit${i}`}\r\n style={{\r\n borderRight: width > 598 && mtdSaleProfit.length - 1 != i && '1px solid rgba(0,0,0,0.1)'\r\n }}\r\n >\r\n \r\n {o.label}\r\n \r\n \r\n \r\n = 50 && setPercentage(o.Actual, o.Budget) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.Actual, o.Budget) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(o.Actual, o.Budget) < 50\r\n ? '#D92641'\r\n : setPercentage(o.Actual, o.Budget) >= 50 && setPercentage(o.Actual, o.Budget) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.Actual, o.Budget) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n Actual\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.Actual)}\r\n \r\n\r\n Budget \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.Budget)}\r\n \r\n Variance \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.Variance)}\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
New Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | \r\n MTD | \r\n YTD | \r\n {currentYear} | \r\n Orders | \r\n {/* {currentYear} | */}\r\n {/* % of | */}\r\n {currentYear + 1} | \r\n
\r\n \r\n | | \r\n Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n \r\n Total Volume ( % Budget Achieved)\r\n | \r\n Budget Volume | \r\n MTD | \r\n YTD | \r\n WIP | \r\n {/* Budget Achieved | */}\r\n WIP | \r\n
\r\n \r\n \r\n {state.salesData.map((data, index) => {\r\n let catId = ids[data.category];\r\n return (\r\n \r\n | {data.category} | \r\n onRedirect('/sales/NewVehicleProfitReport', `?CategoryType=${catId}`)}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceMTD)}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceMTDBudget)} | \r\n \r\n onRedirect(\r\n '/sales/NewVehicleProfitReport',\r\n `?CategoryType=${catId}&start=${moment()\r\n .startOf('year')\r\n .format('YYYY-MM-DD')}&end=${moment().endOf('year').format('YYYY-MM-DD')}`\r\n )\r\n }\r\n style={{\r\n color: data.invoiceYTD ? (data.invoiceYTD <= data.invoiceYTDBudget ? 'red' : 'green') : 'red'\r\n }}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceYTD)}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceYTDBudget)} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=${catId}`)}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceYear)}{' '}\r\n ({formatters.ThousandSeparatorWithoutZero(data.invoiceBudgetAchieved)})\r\n \r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceYearBudget)} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=${catId}`)}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.orderMTD)}\r\n \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=${catId}&startDate=${moment()\r\n .startOf('year')\r\n .format('YYYY-MM-DD')}&endDate=${moment().endOf('year').format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.orderYTD)}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(data.orderWIP)} | \r\n {/* onRedirect('/sales/VehicleNewOrder', `?CategoryType=${catId}`)}\r\n className=\"pointerHover\"\r\n style={{\r\n color: data.invoiceYearProfit\r\n ? data.invoiceYearProfit <= data.invoiceYearBudget\r\n ? 'red'\r\n : 'green'\r\n : 'red'\r\n }}\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(data.invoiceYearProfit)}{' '}\r\n ({formatters.ThousandSeparatorWithoutZero(data.orderBudgetAchieved)})\r\n */}\r\n {/* {formatters.ThousandSeparatorWithoutZero(data.invoiceYearBudget)} | */}\r\n {/* {formatters.ThousandSeparatorWithoutZero(data.orderBudgetAchieved)} | */}\r\n {formatters.ThousandSeparatorWithoutZero(data.orderWIPNextYear)} | \r\n
\r\n );\r\n })}\r\n {/* \r\n | Van | \r\n onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/NewVehicleProfitReport',\r\n `?CategoryType=&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', '?CategoryType=')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', '?CategoryType=2')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
\r\n \r\n | Maxus | \r\n onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=2')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/NewVehicleProfitReport',\r\n `?CategoryType=2&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', '?CategoryType=2')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=2&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', '?CategoryType=2')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
*/}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Van Sale Projection - Invoiced Sales/ Wip v Budget\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Truck Sale Projection - Invoiced Sales/ Wip v Budget\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Maxus Sale Projection - Invoiced Sales/ Wip v Budget\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=1')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/NewVehicleProfitReport',\r\n `?CategoryType=1&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=1`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=1&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=1`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Maxus Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=3')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=3&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=3`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=3&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=3`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=1')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/NewVehicleProfitReport',\r\n `?CategoryType=1&start=${moment().startOf('year').format('YYYY-MM-DD')}&end=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=1`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=1&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=1`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
New Maxus Van Sales\r\n
\r\n
\r\n
\r\n \r\n \r\n | MTD | \r\n YTD | \r\n Orders | \r\n {currentYear} | \r\n {currentYear} | \r\n % of | \r\n {currentYear + 1} | \r\n
\r\n \r\n | Invoiced | \r\n Budget | \r\n Invoiced | \r\n Budget | \r\n MTD | \r\n YTD | \r\n WIP | \r\n Total Volume | \r\n Budget Volume | \r\n Budget Achieved | \r\n WIP | \r\n
\r\n \r\n \r\n \r\n | onRedirect('/sales/NewVehicleProfitReport', '?CategoryType=3')} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=3&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=3`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n \r\n onRedirect(\r\n '/sales/VehicleNewOrder',\r\n `?CategoryType=3&startDate=${moment().startOf('year').format('YYYY-MM-DD')}&endDate=${moment()\r\n .endOf('year')\r\n .format('YYYY-MM-DD')}`\r\n )\r\n }\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n onRedirect('/sales/VehicleNewOrder', `?CategoryType=3`)} className=\"pointerHover\">\r\n {formatters.ThousandSeparatorWithoutZero('')}\r\n | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n {formatters.ThousandSeparatorWithoutZero('')} | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
Used Sales\r\n
\r\n
\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
Aftersales\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n Parts MTD\r\n \r\n \r\n\r\n {state?.PartsData?.map((k, i) => {\r\n return (\r\n \r\n {k.partsDepartment}\r\n \r\n Actual
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.partsAmount) || 0}\r\n Budget
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.mtdBudget) || 0}\r\n
\r\n \r\n \r\n );\r\n })}\r\n\r\n onRedirect('/TradeCentre?desc=TradeCentre=c')}>\r\n Total\r\n \r\n Actual
\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalPart.partsAmount) || 0}\r\n \r\n \r\n\r\n \r\n Budget
\r\n \r\n {' '}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalPart.mtdBudget) || 0}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n | Service Productivity | \r\n Opening WIP Hours | \r\n Current WIP Hours | \r\n Hours Sold | \r\n Attended Hours | \r\n Booked Hours | \r\n Productivity % | \r\n
\r\n \r\n \r\n \r\n | \r\n onRedirect('/RepotingTab')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceProductivityOpenWIP)}\r\n \r\n onRedirect('/RepotingTab')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceProductivityCurrentWIP)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceProductivityHoursSold)}\r\n \r\n\r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {' '}\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceMtdAttendedHr)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {' '}\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceMtdBookedHr)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceProductivityProdHours)}\r\n \r\n
\r\n \r\n | % of Budget Achieved | \r\n onRedirect('/RepotingTab')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(\r\n state.tableData?.serviceProductivityOpenWIPAchieved\r\n )}\r\n \r\n onRedirect('/RepotingTab')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(\r\n state.tableData?.serviceProductivityCurrentWIPAchieved\r\n )}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceHoursSoldBudgetAchieved)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {' '}\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceMtdAttendedHrBudget)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {' '}\r\n {formatters.ThousandSeparatorWithoutZero(state.tableData?.serviceMtdBookedHrBudget)}\r\n \r\n onRedirect('/Services/InvoicedHours')}\r\n className=\"pointerHover\"\r\n >\r\n {formatters.ThousandSeparatorWithoutZero(\r\n state.tableData?.serviceProductivityBudgetAchieved\r\n )}\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n | Outstanding Cont. | \r\n Current Month | \r\n (Prior Month) | \r\n
\r\n \r\n\r\n \r\n \r\n | Impacting on cash flow | \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n state.tableData?.outstandingContCurrentWkImpactingcashflow\r\n )}\r\n | \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n state.tableData?.outstandingContPriorWeekImpactingcashflow\r\n )}\r\n | \r\n
\r\n \r\n | Pending Registrations | \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n state.tableData?.outstandingContCurrentWkPendingRegistrations\r\n )}\r\n | \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n state.tableData?.outstandingContPriorWeekPendingRegistrations\r\n )}\r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
{p.title}\r\n
\r\n
\r\n onRedirect(p.reDirectUrl, p.searchQuery)}\r\n >\r\n {p.data.map((q) => {\r\n return (\r\n \r\n \r\n \r\n {q.slabName}\r\n {`(${q.unit ? q.unit : 0})`}\r\n \r\n \r\n {q.value ? formatters.CurrencyThousandSeparatorWithoutZero(q.value) : 0}\r\n \r\n \r\n {q.perc ? parseFloat(q.perc).toFixed(2) : 0}%\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n
\r\n {data.length > 0 ? (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {data.map((k, i) => {\r\n return (\r\n \r\n {k.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
Budget Total
\r\n
\r\n
\r\n
\r\n
Actual/Wip Total
\r\n
\r\n
\r\n
\r\n
Budget YTD
\r\n
\r\n
\r\n
\r\n
Actual/Wip YTD
\r\n
\r\n \r\n \r\n \r\n ) : (\r\n
\r\n No Record Found\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n Invoicing (Hrs)\r\n Invoicing (£'s)\r\n Recovery Rate\r\n WIP\r\n EOM Forecast (£)\r\n \r\n \r\n \r\n \r\n Location\r\n \r\n \r\n \r\n Inv (MTD)\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Inv (MTD)\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Recovery Rate\r\n \r\n \r\n Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Pre Books\r\n \r\n \r\n 0 to 30\r\n \r\n \r\n 30+\r\n \r\n \r\n Wip Days\r\n \r\n \r\n Hours in WIP\r\n \r\n \r\n Parts Value in WIP (£)\r\n \r\n \r\n Avg Labour Hours value\r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Projection\r\n \r\n \r\n Invoice Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { blue } from '@material-ui/core/colors';\r\nimport { border } from '@material-ui/system';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white\r\n }\r\n}))(TableCell);\r\n\r\nconst LightGreyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#d3d3d3',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst SkyblueCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n borderBottom: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid',\r\n padding: 6,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst CellWithoutPadding = withStyles((theme) => ({\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: 0,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst LightSkyBlue = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#95D9FA',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\nconst LightYellowCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#CDE272',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst GraphCell = withStyles((theme) => ({\r\n head: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: 0,\r\n backgroundColor: 'white',\r\n textAlign: 'center',\r\n color: theme.palette.common.black\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid black',\r\n padding: '2px 6px',\r\n backgroundColor: 'white',\r\n // textAlign: 'center',\r\n color: theme.palette.common.black\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n // root: {\r\n // '&:nth-of-type(odd)': {\r\n // backgroundColor: theme.palette.action.hover\r\n // }\r\n // }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n }\r\n});\r\n\r\nexport const TargetTableOne = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n EOM Productive Hours Forecast\r\n \r\n Revised Invoicing Target to reduce WIP\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Daily Productive Hrs Actual\r\n \r\n \r\n Projected ME Hours (Actual)\r\n \r\n \r\n Efficiency\r\n \r\n\r\n \r\n Live Forecast Target\r\n \r\n \r\n \r\n \r\n \r\n \r\n EOM Re-Fcast Budget 5% Stretch\r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP Reduction\r\n \r\n \r\n Revised Monthly Invoicing Target\r\n \r\n \r\n Revised Daily Invoicing Targets\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableTwo = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Location\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n Graphs\r\n Ide\r\n \r\n \r\n\r\n \r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Totals\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Previous Week\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableThree = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Location\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n Graphs\r\n \r\n \r\n \r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Group (MTD)\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Daily Invoicing\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableFour = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n To Do\r\n {/* */}\r\n \r\n \r\n \r\n \r\n Actual\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n {/* \r\n Actual\r\n \r\n */}\r\n \r\n Budget\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n 0\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TargetTableFive = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Inv Variance\r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n \r\n \r\n \r\n \r\n Revised Target\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Budget\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const GraphTable = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Mon\r\n Tue\r\n Wed\r\n Thu\r\n Fri\r\n \r\n \r\n \r\n \r\n \r\n 30+\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n 0 to 30\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n {' '}\r\n Pre Books\r\n \r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { blue } from '@material-ui/core/colors';\r\nimport { border } from '@material-ui/system';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n fontSize: 11,\r\n border: '1px solid ',\r\n padding: 0,\r\n backgroundColor: '#29308C',\r\n color: theme.palette.common.white\r\n }\r\n}))(TableCell);\r\n\r\nconst SkyblueCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#1ECBE1',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst EmptyCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.black,\r\n padding: 6,\r\n // border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n },\r\n body: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n // border: '1px solid black',\r\n fontSize: 11,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst WipCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#34B5C4',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\nconst EomCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: '#E54CDF',\r\n color: theme.palette.common.white,\r\n padding: 6,\r\n border: '1px solid black',\r\n fontSize: 14,\r\n textAlign: 'center'\r\n // borderRight: '3px solid white'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n // root: {\r\n // '&:nth-of-type(odd)': {\r\n // backgroundColor: theme.palette.action.hover\r\n // }\r\n // }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n }\r\n});\r\n\r\nexport default function BudgetTableTwo() {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Attended Hours\r\n Productive Hours\r\n Efficiency (Sold/Taken hrs)\r\n Utilisation (Productive/Attended)\r\n Non Prod\r\n Productivity (Sold/Attended)\r\n EOM Forecast (£)\r\n \r\n \r\n \r\n \r\n Location\r\n \r\n \r\n \r\n Attended MTD\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Productive MTD\r\n \r\n \r\n Re-Fcast (MTD)\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Efficiency\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n {/* */}\r\n\r\n \r\n \r\n \r\n Utilisation\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Productivity\r\n \r\n \r\n KPI Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n \r\n Invoice Projection\r\n \r\n \r\n Invoice Re-Fcast\r\n \r\n \r\n Variance\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { Container, Grid, Typography } from '@material-ui/core';\r\nimport BudgetTableOne from './dashTableOne';\r\nimport './budgetStyle.scss';\r\nimport { BudgetGraph, WipGraph, WipGraphtwo } from './budgetGraph';\r\nimport BudgetTableTwo from './dasbordTabletwo';\r\nimport { TargetTableOne, TargetTableTwo, TargetTableThree, TargetTableFour, TargetTableFive } from './targetTabels';\r\nimport { lightGreen } from '@material-ui/core/colors';\r\n\r\nconst BudgetDashboard = () => {\r\n return (\r\n \r\n
\r\n \r\n Dec
\r\n \r\n \r\n Current position Report
\r\n \r\n \r\n 12/13/22
\r\n \r\n \r\n {/* Current position Report
*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n Variance on Budget Graph
\r\n \r\n \r\n Wip
\r\n \r\n \r\n Forecast
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n Target Calculations
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Hours in WIP This Week\r\n \r\n \r\n \r\n \r\n \r\n Invoicing\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n I confirm that the repairs detailed above have been carried out to my satisfaction and that my vehicle has been maintained\r\n in accordance with manufacturer guidelines.\r\n
I accept that if it is subsequently established that the vehicle has not been maintained in accordance with MobiloVan\r\n terms and conditions that I will be liable for the cost of this service\r\n
\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n Agreed Para A or B as above\r\n \r\n {!isAuditor && (\r\n \r\n \r\n \r\n Operator Signature\r\n {state.operatorSignedByName && ({` ${state.operatorSignedByName}`})}\r\n \r\n }\r\n sign={getField('opSignature')}\r\n name=\"service24OperatorSignature\"\r\n clearSig={() => clearSign('service24OperatorSignature')}\r\n />\r\n \r\n \r\n \r\n \r\n Technician Signature\r\n {state.technicianName && ({` ${state.technicianName}`})}\r\n \r\n }\r\n sign={getField('techSignature')}\r\n name=\"service24TechnicianSignature\"\r\n clearSig={() => clearSign('service24TechnicianSignature')}\r\n />\r\n {state.errors?.service24TechnicianSignatureErrorMsg}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n The Dealer does not exclude liability for death or personal injury arising from its negligence or breach of strict statutory liablitity\r\n
\r\n \r\n *Note to Dealer staff: incase of Para B. the vehicle and key are NOT to be handed over to the customer, It must be clear that the\r\n operator takes them from the counter/van against your wishes.\r\n \r\n \r\n \r\n \r\n );\r\n});\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { FormLabel, Grid, makeStyles } from '@material-ui/core';\r\nimport { TextBoxShrink } from '../../../../Core/FormInput';\r\nimport { get } from 'lodash';\r\nimport { CustomeSignPad } from '../../../../Core/SignaturePad';\r\nimport AppContext from '../../../../App/AppContext';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n signFormControl: {\r\n border: '1px solid rgba(0, 0, 0, 0.23)',\r\n borderRadius: 4,\r\n '& > label': {\r\n background: 'white',\r\n padding: '0px 5px'\r\n },\r\n '& > canvas': {\r\n width: '100%'\r\n }\r\n },\r\n clearSign: {\r\n position: 'absolute',\r\n bottom: 10,\r\n right: 10\r\n }\r\n}));\r\n\r\nexport const DriverDetails = React.memo((props) => {\r\n const classes = useStyles();\r\n // const [hasSign, setHasSign] = useState(true);\r\n const { state, setState } = props; //useContext(JobSheetContext);\r\n // let canvasRef;\r\n const { userRoles } = useContext(AppContext);\r\n const isAuditor = userRoles.includes('auditor');\r\n\r\n const setField = (e) => {\r\n const { name, type, value, valueAsNumber, checked } = e.target;\r\n if (type === 'number') {\r\n setState((st) => ({ ...st, [name]: valueAsNumber }));\r\n } else if (type === 'checkbox') {\r\n setState((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n\r\n const getField = (name) => {\r\n return get(state, name);\r\n };\r\n\r\n // const setSign = () => {\r\n // const service24DriverSignature = canvasRef.toDataURL();\r\n // console.log(service24DriverSignature);\r\n // setState((st) => ({ ...st, service24DriverSignature }));\r\n // };\r\n const GetTechnicianSign = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n ...val\r\n }));\r\n };\r\n const clearSign = () => {\r\n // canvasRef.clear();\r\n setState((st) => ({ ...st, service24DriverSignature: undefined }));\r\n };\r\n\r\n // useEffect(() => {\r\n // setHasSign(state.service24DriverSignature);\r\n // }, [canvasRef, state.service24DriverSignature]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!isAuditor && \r\n \r\n Signature\r\n {state.service24DriverDateSigned && (\r\n ({`On Behalf of customer:${state.driverName} ${state.service24DriverDateSigned}`})\r\n )}\r\n \r\n }\r\n sign={getField('driverSignature')}\r\n name=\"service24DriverSignature\"\r\n clearSig={clearSign}\r\n />\r\n }\r\n \r\n );\r\n});\r\n","import React from 'react';\r\nimport { Grid } from '@material-ui/core';\r\nimport { TextBoxShrink } from '../../../../Core/FormInput';\r\nimport { get } from 'lodash';\r\n\r\nexport const BasicFooter = React.memo((props) => {\r\n const { state, setState } = props;\r\n const setField = (e) => {\r\n const { name, type, value, valueAsNumber, checked } = e.target;\r\n if (type === 'number') {\r\n setState((st) => ({ ...st, [name]: valueAsNumber }));\r\n } else if (type === 'checkbox') {\r\n setState((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n const getField = (name) => {\r\n return get(state, name);\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n});\r\n","import { get, post } from './http-calls';\r\nimport { nicoleDownloadFileWithExt } from './ReportScreens-service';\r\n\r\nexport const getService24ByID = async (id) => {\r\n let res = await get(`Service24Jobs/GetDetails/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getService24Dropdowns = async () => {\r\n let res = await get(`Service24Jobs/Dropdowns`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postService24 = async (data) => {\r\n let res = await post(`Service24Jobs`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const getService24PDF = async (jobID, fileName) => {\r\n let res = await get(`Service24Jobs/GetService24PDF?Id=${jobID}`, { responseType: 'blob', returnOrgRes: true, useAuthToken: true });\r\n nicoleDownloadFileWithExt(res, 'pdf', fileName);\r\n};\r\n\r\nexport const searchJobByBranchAndText = async (branchID, searchText) => {\r\n let res = await get(`Service24Jobs/SearchWipByBranch/${branchID}/${searchText}`, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const postLinkWips = async (data) => {\r\n let res = await post(`Service24Jobs/LinkWips`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import { get, post, put } from './http-calls';\r\n\r\nexport const getBtteryTestDetails = async (id, technicianJobId) => {\r\n let res = await get(`BatteryTests/${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n\r\nexport const postBtteryTestDetails = async (data) => {\r\n let res = await post('BatteryTests', data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useContext, useMemo, useEffect, useState, useRef } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport { TextBox, SecondaryButton, DialogContents, AppButtonGroup } from '../../../Core/FormInput';\r\nimport { IconButton } from '@material-ui/core';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport '../../technician/technician-app/TechnicianStyle.scss';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport { Backup, Mail, Visibility } from '@material-ui/icons';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { getBtteryTestDetails, postBtteryTestDetails } from '../../../Core/Service/batteryTest-service';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { FormHelperText, InputLabel } from '@material-ui/core';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\n\r\nconst SecondaryBatteryModal = ({ state, fieldChange, handel, styles }) => {\r\n return (\r\n <>\r\n \r\n \r\n Battery Manufacturer\r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestManufacturerID}\r\n \r\n \r\n \r\n Barcode (Mode Designation)\r\n \r\n {state.secondaryErrors.batteryTestBarcode}\r\n \r\n \r\n Capacity\r\n Ah\r\n }}\r\n />\r\n {state.secondaryErrors.batteryTestCapacity}\r\n \r\n\r\n \r\n Cold Test Current\r\n \r\n {state.secondaryErrors.batteryTestColdTestCurrent}\r\n \r\n\r\n \r\n MB Part Number\r\n \r\n {state.secondaryErrors.batteryTestMBPartNumber}\r\n \r\n \r\n \r\n \r\n Production Date (on negative terminal)\r\n \r\n \r\n \r\n {/* \r\n Weeks \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestProductionWeek}\r\n \r\n \r\n \r\n
\r\n Visual Inspection\r\n \r\n
\r\n \r\n \r\n \r\n External signs of leaks\r\n \r\n \r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestLeak}\r\n \r\n \r\n \r\n If yes, where is the leak:\r\n \r\n \r\n {state.secondaryErrors.batteryTestLeakPosition}\r\n \r\n \r\n
\r\n
\r\n Midronics Test\r\n \r\n
\r\n \r\n \r\n \r\n Result\r\n \r\n \r\n\r\n \r\n \r\n \r\n {state.secondaryErrors.batteryTestMidtronicsTestResult}\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: true\r\n }))\r\n }\r\n >\r\n Secondary Battery\r\n \r\n */}\r\n \r\n \r\n
\r\n {/* \r\n Midronics Test\r\n */}\r\n \r\n \r\n Test Code\r\n \r\n {state.secondaryErrors.batteryTestTestCode}\r\n \r\n \r\n Damage Code\r\n \r\n {state.secondaryErrors.batteryTestDamageCode}\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SecondaryBatteryModal;\r\n","import {\r\n Dialog,\r\n DialogContent,\r\n DialogTitle,\r\n Divider,\r\n FormControlLabel,\r\n Grid,\r\n IconButton,\r\n InputLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography,\r\n withStyles\r\n} from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { DescriptionIcon } from '@material-ui/icons/Description';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport SecondaryBatteryModal from './../../technician/BatteryTest/SecondaryBatteryModal';\r\nimport { SecondaryButton } from './../../../Core/FormInput/AppButton';\r\nimport moment, { relativeTimeRounding } from 'moment';\r\nimport { FieldWrappper } from '../../../Core/FieldWrapper';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n // color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: theme.palette.action.hover\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: 700\r\n }\r\n});\r\n\r\nconst PartDialog = (props) => {\r\n const { part, setPart, control } = props;\r\n\r\n const classes = useStyles();\r\n\r\n const addPartsRow = () => {\r\n setPart((st) => [\r\n ...st,\r\n {\r\n service24PartID: null,\r\n service24PartNumber: '',\r\n service24PartDescription: '',\r\n service24PartQuantity: 0,\r\n service24PartPrice: null\r\n }\r\n ]);\r\n };\r\n\r\n const removePartAt = (indx) => {\r\n setPart((st) => {\r\n const newSt = [...st];\r\n newSt.splice(indx, 1);\r\n return newSt;\r\n });\r\n };\r\n\r\n const handlepart = (index) => (e) => {\r\n let { name, value } = e.target;\r\n setPart((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex[name] = value;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const totalRepair = moment(control.service24RepairEndTime).diff(control.service24RepairStartTime, 'minute');\r\n let repairHours = Math.floor(totalRepair / 60);\r\n let repairMinutes = totalRepair % 60;\r\n const TotalRepairTime = control.service24RepairEndTime && totalRepair > 0 ? `${repairHours} hours ${repairMinutes} minutes` : totalRepair < 0 ? '' : null;\r\n\r\n const Traveltimestart = moment(control.service24RepairStartTime).diff(control.service24DrivingStartTime, 'minute');\r\n const TraveltimeEnd = moment(control.service24DrivingEndTime).diff(control.service24RepairEndTime, 'minute');\r\n\r\n let TravelDiff = Traveltimestart + TraveltimeEnd;\r\n let travelHours = Math.floor(TravelDiff / 60);\r\n let travelMinutes = TravelDiff % 60;\r\n\r\n const TotalTravelTime = control.service24DrivingEndTime && TravelDiff > 0 ? `${travelHours} hours ${travelMinutes} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TechTime = totalRepair + TravelDiff;\r\n\r\n let techHH = Math.floor(TechTime / 60);\r\n let techMM = TechTime % 60;\r\n\r\n const TotaltechTime = TotalTravelTime && TechTime > 0 ? `${techHH} hours ${techMM} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TotalMileage = control.service24DrivingEndTime && control.service24DrivingFinishMileage - control.service24DrivingStartMileage;\r\n\r\n return (\r\n \r\n
\r\n {part.map((row, index) => {\r\n return (\r\n \r\n \r\n \r\n {index !== 0 && (\r\n
{\r\n removePartAt(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === part.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n
\r\n {index !== 0 && (\r\n
{\r\n removeTimeRow(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === service24.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default ServiceTime;\r\n","import {\r\n Dialog,\r\n DialogContent,\r\n DialogTitle,\r\n Divider,\r\n FormControlLabel,\r\n Grid,\r\n IconButton,\r\n InputLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n Typography,\r\n withStyles\r\n} from '@material-ui/core';\r\nimport { Close } from '@material-ui/icons';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { DescriptionIcon } from '@material-ui/icons/Description';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport SecondaryBatteryModal from '../../../technician/BatteryTest/SecondaryBatteryModal';\r\nimport { SecondaryButton } from '../../../../Core/FormInput/AppButton';\r\nimport moment, { relativeTimeRounding } from 'moment';\r\nimport { FieldWrappper } from '../../../../Core/FieldWrapper';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n // color: theme.palette.common.white\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:nth-of-type(even)': {\r\n backgroundColor: theme.palette.action.hover\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: 700\r\n }\r\n});\r\n\r\nconst WorkRequestedModal = (props) => {\r\n const { work, setWork, control } = props;\r\n\r\n const classes = useStyles();\r\n\r\n const addWorkRow = () => {\r\n setWork((st) => [\r\n ...st,\r\n {\r\n service24WorkID: null,\r\n service24WorkRequested: '',\r\n service24WorkReason: '',\r\n service24WorkAction: '',\r\n service24WorkTimeTaken: null\r\n }\r\n ]);\r\n };\r\n\r\n const removeWorkAt = (indx) => {\r\n setWork((st) => {\r\n const newSt = [...st];\r\n newSt.splice(indx, 1);\r\n return newSt;\r\n });\r\n };\r\n\r\n const handlwork = (index) => (e) => {\r\n let { name, value } = e.target;\r\n setWork((st) => {\r\n let newSt = [...st];\r\n let findIndex = [...st].find((n, i) => i === index);\r\n if (findIndex) {\r\n findIndex[name] = value;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n const totalRepair = moment(control.service24RepairEndTime).diff(control.service24RepairStartTime, 'minute');\r\n let repairHours = Math.floor(totalRepair / 60);\r\n let repairMinutes = totalRepair % 60;\r\n const TotalRepairTime = control.service24RepairEndTime && totalRepair > 0 ? `${repairHours} hours ${repairMinutes} minutes` : totalRepair < 0 ? '' : null;\r\n\r\n const Traveltimestart = moment(control.service24RepairStartTime).diff(control.service24DrivingStartTime, 'minute');\r\n const TraveltimeEnd = moment(control.service24DrivingEndTime).diff(control.service24RepairEndTime, 'minute');\r\n\r\n let TravelDiff = Traveltimestart + TraveltimeEnd;\r\n let travelHours = Math.floor(TravelDiff / 60);\r\n let travelMinutes = TravelDiff % 60;\r\n\r\n const TotalTravelTime = control.service24DrivingEndTime && TravelDiff > 0 ? `${travelHours} hours ${travelMinutes} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TechTime = totalRepair + TravelDiff;\r\n\r\n let techHH = Math.floor(TechTime / 60);\r\n let techMM = TechTime % 60;\r\n\r\n const TotaltechTime = TotalTravelTime && TechTime > 0 ? `${techHH} hours ${techMM} minutes` : TravelDiff < 0 ? '' : null;\r\n\r\n const TotalMileage = control.service24DrivingEndTime && control.service24DrivingFinishMileage - control.service24DrivingStartMileage;\r\n\r\n return (\r\n \r\n
\r\n {work.map((row, index) => {\r\n return (\r\n \r\n \r\n \r\n {index !== 0 && (\r\n
{\r\n removeWorkAt(index);\r\n }}\r\n />\r\n )}\r\n \r\n {index === work.length - 1 && (\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n
{branchShortName}
\r\n\r\n \r\n \r\n\r\n setAmountToAllHandler(index, branchID)}\r\n />\r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n {/* \r\n \r\n \r\n Save\r\n \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {MonthShortNameList.map((p) => {\r\n return {p};\r\n })}\r\n \r\n Total\r\n \r\n \r\n \r\n \r\n {state.calculatedRows.map((q, index) => {\r\n if (!q.branchID) {\r\n return (\r\n \r\n Group Total\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n {formatters.ToFixedSeparator(q[`reportingBudget${p}Total`])}\r\n );\r\n })}\r\n \r\n {formatters.ToFixedSeparator(q.reportingBudgetTotalTotal)}\r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n {ModelColumnFormatter(index, q.branchShortName, q.branchID, q.setAmountToAll)}\r\n\r\n {/* {q.branchShortName} */}\r\n \r\n {InputWrapper('reportingBudgetJan', q.reportingBudgetJan, q.branchID)}\r\n {InputWrapper('reportingBudgetFeb', q.reportingBudgetFeb, q.branchID)}\r\n {InputWrapper('reportingBudgetMar', q.reportingBudgetMar, q.branchID)}\r\n {InputWrapper('reportingBudgetApr', q.reportingBudgetApr, q.branchID)}\r\n {InputWrapper('reportingBudgetMay', q.reportingBudgetMay, q.branchID)}\r\n {InputWrapper('reportingBudgetJun', q.reportingBudgetJun, q.branchID)}\r\n {InputWrapper('reportingBudgetJul', q.reportingBudgetJul, q.branchID)}\r\n {InputWrapper('reportingBudgetAug', q.reportingBudgetAug, q.branchID)}\r\n {InputWrapper('reportingBudgetSep', q.reportingBudgetSep, q.branchID)}\r\n {InputWrapper('reportingBudgetOct', q.reportingBudgetOct, q.branchID)}\r\n {InputWrapper('reportingBudgetNov', q.reportingBudgetNov, q.branchID)}\r\n {InputWrapper('reportingBudgetDec', q.reportingBudgetDec, q.branchID)}\r\n {formatters.ToFixedSeparator(q.totals) || 0}\r\n \r\n );\r\n }\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ReportingBudgetTable;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport ReportingBudgetTable from './budgetTable';\r\nimport { getReportingBudgetScreenDropDown } from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\n\r\nconst crumbs = (measuredesc) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Bugdet', active: true }\r\n];\r\n\r\nconst ReportingBudget = (props) => {\r\n const childFunc = useRef(null);\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamSelectedIndex = +params.get('tabIndex') || '';\r\n\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n budgetType: [],\r\n isValueChange: false,\r\n selectedIndex: ParamSelectedIndex || '0'\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getReportingBudgetScreenDropDown();\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear = res.data.year.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n });\r\n newSt.budgetType = res.data.type || [];\r\n\r\n return newSt;\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n setState((st) => ({ ...st, selectedIndex: ParamSelectedIndex }));\r\n }, [ParamSelectedIndex, state.budgetType]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.budgetType.map((q) => {\r\n return {\r\n label: `${q.name}`,\r\n body: \r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n childFunc.current()} disabled={!state.isValueChange}>\r\n Save\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n /\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let tempModelTypeList = [...modelTypeList];\r\n\r\n let data = [];\r\n tempModelTypeList.forEach((f) => {\r\n let tempData = f.data\r\n .filter((j) => j.isChanged)\r\n .map(({ expenseCategoryName, isChanged, ...q }) => ({\r\n reportingVehicleTargetUnits: q.vu,\r\n reportingVehicleTargetAmount: q.vt,\r\n reportingVehicleTargetCode: q.code,\r\n reportingVehicleTargetTypeID: +q.typeID,\r\n reportingVehicleTargetDate: q.td,\r\n reportingVehicleTargetID: q.id\r\n }));\r\n data = [...data, ...tempData];\r\n });\r\n\r\n let filterPostData = {\r\n TargetType: props.vehicleType,\r\n VehicleTargets: data\r\n };\r\n\r\n let res = await addReportingVehicleBudget(filterPostData);\r\n if (res.success) {\r\n showToast('Save Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n };\r\n\r\n const setAmountToAllOnChamge = (index, code) => (e) => {\r\n let tempList = [...modelTypeList];\r\n let objIndex = tempList.findIndex((x) => x.code == code);\r\n\r\n tempList[objIndex][e.target.name] = +e.target.value;\r\n setModelTypeList(tempList);\r\n };\r\n const setAmountToAllHandler = (index, code) => {\r\n let tempList = [...modelTypeList];\r\n let objIndex = tempList.findIndex((x) => x.code == code);\r\n tempList[objIndex].data.forEach((o) => {\r\n o.vt = o.vu * tempList[objIndex].setAmountToAll;\r\n });\r\n setModelTypeList(tempList);\r\n };\r\n\r\n const ModelColumnFormatter = (index, code, name, setAmountToAll) => {\r\n return (\r\n <>\r\n {name}
\r\n\r\n \r\n \r\n\r\n setAmountToAllHandler(index, code)}\r\n />\r\n
\r\n \r\n );\r\n };\r\n\r\n useEffect(() => {\r\n props.childFunc.current = handleSubmit;\r\n }, [modelTypeList]);\r\n\r\n return (\r\n \r\n {showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Model\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {p}
\r\n Unit / Amount
\r\n \r\n );\r\n })}\r\n \r\n Total
\r\n Unit / Amount
\r\n \r\n \r\n \r\n \r\n {!state.isRecords ? (\r\n \r\n \r\n No Records\r\n \r\n \r\n ) : (\r\n <>\r\n {calculatedExpenseList.map((t, index) => {\r\n return (\r\n <>\r\n {!t.code ? (\r\n \r\n \r\n {t.name}\r\n \r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(t.data[`modelType${p}VuTotal`])}\r\n
\r\n
/
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n t.data[`modelType${p}VtTotal`]\r\n )}\r\n
\r\n
\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default NewUsedReportingBudgetTable;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport ReportingBudgetTable from './budgetTable';\r\nimport { getNewUsedVehicleReportingBudgetScreenDropDown, getReportingBudgetScreenDropDown } from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\nimport NewUsedReportingBudgetTable from './budgetTable';\r\n\r\nconst crumbs = (vehicleType) => [\r\n { name: 'Home', path: '/' },\r\n { name: vehicleType == 'N' ? 'New Vehicle Budget' : 'Used Vehicle Budget', active: true }\r\n];\r\n\r\nconst NewUsedReportingBudget = (props) => {\r\n const childFunc = useRef(null);\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n vehicleTypeCode: {},\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n targetType: [],\r\n modelList: [],\r\n vehicleCategories: [],\r\n isValueChange: false,\r\n isRecord: true\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getNewUsedVehicleReportingBudgetScreenDropDown(props.vehicleType);\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear =\r\n res.data.year.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleCategories =\r\n res.data.vehicleCategories.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleTypeCode = newSt.vehicleCategories[0] || {};\r\n newSt.targetType = res.data.targetType || [];\r\n newSt.modelList = res.data.model || [];\r\n newSt.isRecord = true;\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isRecord = false;\r\n return newSt;\r\n });\r\n }\r\n }, [state.yearCode]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.targetType.map((q) => {\r\n return {\r\n label: `${q.name}`,\r\n body: (\r\n \r\n )\r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n Vehicle Type \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n childFunc.current()} disabled={!state.isValueChange}>\r\n Save\r\n \r\n \r\n \r\n {state.isRecord ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n Something Went Wrong\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let tempModelTypeList = [...modelTypeList];\r\n\r\n let data = [];\r\n tempModelTypeList.forEach((f) => {\r\n let tempData = f.data\r\n .filter((j) => j.isChanged)\r\n .map(({ expenseCategoryName, isChanged, ...q }) => ({\r\n reportingSalesCategoryTargetID: q.id,\r\n reportingSalesCategoryTargetTypeID: q.ttid,\r\n reportingSalesCategoryTargetDate: q.td,\r\n reportingSalesCategoryTargetUnit: q.vu,\r\n reportingSalesCategoryTargetOperatorID: q.opid,\r\n reportingSalesTargetCategoryID: +props.selectedCategories.id\r\n }));\r\n data = [...data, ...tempData];\r\n });\r\n\r\n let filterPostData = {\r\n TargetType: props.vehicleType,\r\n SalesCategoryTargets: data\r\n };\r\n\r\n let res = await addSalesCategoryTargetBudget(filterPostData);\r\n if (res.success) {\r\n showToast('Save Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n props.childFunc.current = handleSubmit;\r\n }, [modelTypeList]);\r\n\r\n const setAmountToAllOnChamge = (index, opid) => (e) => {\r\n let tempList = [...modelTypeList];\r\n let objIndex = tempList.findIndex((x) => x.opid == opid);\r\n tempList[objIndex][e.target.name] = +e.target.value;\r\n setModelTypeList(tempList);\r\n };\r\n const setAmountToAllHandler = (index, opid) => {\r\n let tempList = [...modelTypeList];\r\n let objIndex = tempList.findIndex((x) => x.opid == opid);\r\n tempList[objIndex].data.forEach((o) => {\r\n o.vu = tempList[objIndex].setAmountToAll;\r\n o.isChanged = true;\r\n });\r\n setModelTypeList(tempList);\r\n setState((st) => {\r\n return { ...st, isRecords: true, isChangeTrig: true };\r\n });\r\n };\r\n const ModelColumnFormatter = (index, opid, name, setAmountToAll) => {\r\n return (\r\n <>\r\n {name}
\r\n\r\n \r\n \r\n\r\n setAmountToAllHandler(index, opid)}\r\n />\r\n
\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n {showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Operator Sales Exec\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {p}
\r\n {/* Unit
*/}\r\n \r\n );\r\n })}\r\n \r\n Total
\r\n {/* Unit
*/}\r\n \r\n \r\n \r\n \r\n {!state.isRecords ? (\r\n \r\n \r\n No Records\r\n \r\n \r\n ) : (\r\n <>\r\n {calculatedExpenseList.map((t, index) => {\r\n return (\r\n <>\r\n {!t.opid ? (\r\n \r\n \r\n {t.name}\r\n \r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(t.data[`modelType${p}VuTotal`])}\r\n \r\n );\r\n })}\r\n\r\n \r\n {formatters.ThousandSeparatorWithoutZero(t.data.modelTypeVuTotalTotal)}\r\n \r\n \r\n ) : (\r\n \r\n {/* \r\n {t.name}\r\n */}\r\n \r\n {ModelColumnFormatter(index, t.opid, t.name, t.setAmountToAll)}\r\n \r\n {t.data.map((p, i) => {\r\n return {InputWrapper(i, t.opid, p.vu, p.vt)};\r\n })}\r\n\r\n \r\n {formatters.ThousandSeparatorWithoutZero(t.allVuAmount)}\r\n \r\n \r\n )}\r\n \r\n );\r\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 NewUsedReportingBudgetTable;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport ReportingBudgetTable from '../NewUsedVehicle/budgetTable';\r\nimport {\r\n getNewUsedSalesCategoryudgetOperatorDetailsDropDown,\r\n getNewUsedSalesCategoryudgetScreenDropDown\r\n} from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\nimport NewUsedReportingBudgetTable from './budgetTable';\r\n\r\nconst crumbs = (vehicleType) => [\r\n { name: 'Home', path: '/' },\r\n { name: vehicleType == 'N' ? 'New Sales Exec Targets' : 'Used Sales Exec Targets', active: true }\r\n];\r\n\r\nconst NewUsedSalesCategoryBudget = (props) => {\r\n const childFunc = useRef(null);\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n vehicleTypeCode: {},\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n targetType: [],\r\n modelList: [],\r\n vehicleCategories: [],\r\n isValueChange: false,\r\n isRecord: true\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getNewUsedSalesCategoryudgetScreenDropDown(props.vehicleType);\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear =\r\n res.data.year.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleCategories =\r\n res.data.vehicleCategory.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleTypeCode = newSt.vehicleCategories[0] || {};\r\n newSt.targetType = res.data.category || [];\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n return newSt;\r\n });\r\n }\r\n }, [state.yearCode]);\r\n\r\n useEffect(async () => {\r\n if (state?.vehicleTypeCode?.id) {\r\n let res = await getNewUsedSalesCategoryudgetOperatorDetailsDropDown(props.vehicleType, state?.vehicleTypeCode?.id);\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.modelList = res.data.operaterDetail.map((q) => ({ ...q, opid: q.id })) || [];\r\n newSt.isRecord = true;\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isRecord = false;\r\n return newSt;\r\n });\r\n }\r\n }\r\n }, [state.yearCode, props.vehicleType, state.vehicleTypeCode]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.targetType.map((q) => {\r\n return {\r\n label: `${q.name}`,\r\n body: (\r\n \r\n )\r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n Vehicle Type \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n childFunc.current()} disabled={!state.isValueChange}>\r\n Save\r\n \r\n \r\n \r\n {state.isRecord ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n Something Went Wrong\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {vehicleObj.year}\r\n \r\n \r\n {vehicleObj.name}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Target\r\n \r\n \r\n {vehicleObj.unit}\r\n \r\n \r\n {formatters.CurrencyThousandSeparator(vehicleObj.profit)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Seles Exec\r\n Units\r\n Profit\r\n \r\n \r\n \r\n \r\n {state.map((row, index) => {\r\n return (\r\n !row.isDeleted && (\r\n <>\r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!HandleRow() && index === 0 && (\r\n
\r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n targetSubmit(state)} disabled={valid.showError}>\r\n Submit\r\n \r\n \r\n \r\n {valid.showError ? (\r\n \r\n \r\n \r\n {valid.errorMessage}\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 handleVehicle({\r\n name: vehicleName,\r\n unit: TargetUnits,\r\n profit: TargetAmount,\r\n year: `${MonthShortNameList[index]} ${props.yearCode.id}`,\r\n yearCode: props.yearCode.id,\r\n index: index,\r\n targetNewUsed: props.vehicleType,\r\n typeID: typeID,\r\n code: code,\r\n id: id\r\n })\r\n }\r\n />\r\n \r\n
\r\n
{name}
\r\n\r\n \r\n \r\n\r\n setAmountToAllHandler(index, code)}\r\n />\r\n
\r\n \r\n );\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let tempModelTypeList = [...modelTypeList];\r\n let salesPostList = [...saleTarget];\r\n let data = [];\r\n tempModelTypeList.forEach((f) => {\r\n let tempData = f.data.map(({ ...q }) => ({\r\n reportingVehicleInternalTargetID: q.id,\r\n reportingVehicleInternalTargetTypeID: +q.typeID,\r\n reportingVehicleInternalTargetCode: q.code,\r\n reportingVehicleInternalTargetDate: q.td,\r\n reportingVehicleInternalTargetUnits: q.vu,\r\n reportingVehicleInternalTargetAmount: q.vt\r\n }));\r\n data = [...data, ...tempData];\r\n });\r\n\r\n let filterPostData = {\r\n salesTarget: salesPostList,\r\n vehicleTargets: data,\r\n TargetType: props.vehicleType\r\n };\r\n\r\n let res = await addReportingVehicleInternalBudget(filterPostData);\r\n if (res.success) {\r\n showToast('Save Successfully');\r\n pullExpenseBudgetGridData();\r\n setSaleTarget([]);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n props.childFunc.current = handleSubmit;\r\n }, [modelTypeList, saleTarget]);\r\n\r\n return (\r\n \r\n {showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n Model\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {p}
\r\n Unit / Amount
\r\n \r\n );\r\n })}\r\n \r\n Total
\r\n Unit / Amount
\r\n \r\n \r\n \r\n \r\n {!state.isRecords ? (\r\n \r\n \r\n No Records\r\n \r\n \r\n ) : (\r\n <>\r\n {calculatedExpenseList.map((t, index) => {\r\n return (\r\n <>\r\n {!t.code ? (\r\n \r\n \r\n {t.name}\r\n \r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(t.data[`modelType${p}VuTotal`])}\r\n
\r\n
/
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(\r\n t.data[`modelType${p}VtTotal`]\r\n )}\r\n
\r\n
\r\n \r\n \r\n )}\r\n\r\n {state.showVehicleModal ? (\r\n \r\n setState((st) => {\r\n return { ...st, showVehicleModal: false };\r\n })\r\n }\r\n >\r\n \r\n \r\n ) : null}\r\n {state.showVehicleMessage ? (\r\n \r\n setState((st) => {\r\n return { ...st, showVehicleMessage: false };\r\n })\r\n }\r\n >\r\n {' '}\r\n Please Fill The Unit/Amount Fields\r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default NewUsedReportingBudgetTable;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport ReportingBudgetTable from './salesTargetTable';\r\nimport {\r\n getNewUsedVehicleReportingBudgetScreenDropDown,\r\n getNewUsedVehicleReportingInternalBudgetScreenDropDown,\r\n getReportingBudgetScreenDropDown\r\n} from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\nimport NewUsedReportingBudgetTable from './salesTargetTable';\r\n\r\nconst crumbs = (vehicleType) => [\r\n { name: 'Home', path: '/' },\r\n { name: vehicleType == 'N' ? 'New Vehicle Internal Budget' : 'Used Vehicle Internal Budget', active: true }\r\n];\r\n\r\nconst NewUsedReportingInternalBudget = (props) => {\r\n const childFunc = useRef(null);\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n vehicleTypeCode: {},\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n targetType: [],\r\n modelList: [],\r\n vehicleCategories: [],\r\n isValueChange: false,\r\n isRecord: true,\r\n operaterDetail: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getNewUsedVehicleReportingInternalBudgetScreenDropDown(props.vehicleType);\r\n if (res.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.budgetYear =\r\n res.data.year.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleCategories =\r\n res.data.vehicleCategories.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.operaterDetail =\r\n res.data.operaterDetail.map((o) => {\r\n return { description: `${o.name}`, id: `${o.id}` };\r\n }) || [];\r\n newSt.vehicleTypeCode = newSt.vehicleCategories[0] || {};\r\n newSt.targetType = res.data.targetType || [];\r\n newSt.modelList = res.data.model || [];\r\n newSt.isRecord = true;\r\n return newSt;\r\n });\r\n } else {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isRecord = false;\r\n return newSt;\r\n });\r\n }\r\n }, [state.yearCode]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const tabs = state.targetType.map((q) => {\r\n return {\r\n label: `${q.name}`,\r\n body: (\r\n \r\n )\r\n };\r\n });\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Select Year \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n Vehicle Type \r\n \r\n \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n childFunc.current()}\r\n // disabled={!state.isValueChange}\r\n >\r\n Save\r\n \r\n \r\n \r\n {state.isRecord ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n Something Went Wrong\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let tempModelTypeList = [...modelTypeList];\r\n\r\n let data = [];\r\n tempModelTypeList.forEach((f) => {\r\n let tempData = f.data\r\n .filter((j) => j.isChanged)\r\n .map(({ expenseCategoryName, isChanged, ...q }) => ({\r\n FPInterestRateInterestRate: q.ir,\r\n FPInterestRateProviderID: q.providerID,\r\n FPInterestRateDate: q.td,\r\n FPInterestRateID: q.id\r\n }));\r\n data = [...data, ...tempData];\r\n });\r\n\r\n let filterPostData = {\r\n FPIntrestTargets: data\r\n };\r\n\r\n let res = await addupdateFPInterestRates(filterPostData);\r\n if (res.success) {\r\n showToast('Save Successfully');\r\n pullExpenseBudgetGridData();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n props.childFunc.current = handleSubmit;\r\n }, [modelTypeList]);\r\n\r\n return (\r\n \r\n {showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Finance Company\r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {p}
\r\n \r\n );\r\n })}\r\n {/* \r\n Total
\r\n */}\r\n \r\n \r\n \r\n {!state.isRecords ? (\r\n \r\n \r\n No Records\r\n \r\n \r\n ) : (\r\n <>\r\n {calculatedExpenseList.map((t) => {\r\n return (\r\n <>\r\n {!t.providerID ? (\r\n \r\n \r\n\r\n \r\n {t.name}\r\n \r\n {MonthShortNameList.map((p) => {\r\n return (\r\n \r\n {formatters.ThousandSeparatorWithoutZero(t.data[`modelType${p}IRTotal`])}\r\n \r\n );\r\n })}\r\n\r\n \r\n {formatters.ThousandSeparatorWithoutZero(t.data.modelTypeIRTotalTotal)}\r\n \r\n \r\n ) : (\r\n \r\n \r\n props.handleModelOpen(t.providerID)}\r\n />\r\n \r\n\r\n \r\n {t.name}\r\n \r\n\r\n {t.data.map((p, i) => {\r\n return {InputWrapper(i, t.providerID, p.ir)};\r\n })}\r\n\r\n {/* \r\n {formatters.ThousandSeparatorWithoutZero(t.allIRAmount)}\r\n */}\r\n \r\n )}\r\n \r\n );\r\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 NewUsedReportingBudgetTable;\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport { addupdateFinanceProvidersModel, getFPProviderModelById } from '../../../../../Core/Service/ReportScreens-service';\r\nimport { FormLabel, Grid } from '@material-ui/core';\r\nimport { SecondaryButton, TextBox } from '../../../../../Core/FormInput';\r\nimport AppContext from '../../../../../App/AppContext';\r\n\r\nconst AddEdirModelModal = (props) => {\r\n const [state, setState] = useState({ errors: {} });\r\n const { hideModal, showToast } = useContext(AppContext);\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 pullData = async () => {\r\n let result = await getFPProviderModelById(props.selectedModelId);\r\n\r\n if (result.success) {\r\n setState((st) => ({\r\n ...st,\r\n name: result.data[0].name,\r\n freeDays: result.data[0].freeDays\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props.selectedModelId) {\r\n pullData();\r\n }\r\n }, []);\r\n\r\n const validations = () => {\r\n const { name } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (name == null || name == '') {\r\n errors.name = 'Name is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n if (validations()) {\r\n let data = {\r\n name: state.name,\r\n freeDays: state.freeDays,\r\n ID: props.selectedModelId\r\n };\r\n let res = await addupdateFinanceProvidersModel(data);\r\n if (res.success) {\r\n showToast(`Model added successfully`);\r\n props.onClose(true);\r\n } else {\r\n showToast(`${res.message}`);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n Name\r\n \r\n {state.errors['name']}\r\n \r\n \r\n Free Days\r\n \r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AddEdirModelModal;\r\n","import { FormLabel, Grid, TextField } from '@material-ui/core';\r\n\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport React, { useState } from 'react';\r\nimport { useEffect } from 'react';\r\nimport TabComponent from '../../../../../Core/Controls/Tabs';\r\nimport { getFPProviderList, getReportingBudgetScreenDropDown } from '../../../../../Core/Service/ReportScreens-service';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SecondaryButton } from '../../../../../Core/FormInput';\r\nimport { useRef } from 'react';\r\nimport FPIntrestRateProviderTable from './FPTable';\r\nimport DialogComp from '../../../../../Core/Modal/dialogModal';\r\nimport AddEdirModelModal from './AddEditModelModal';\r\n\r\nconst crumbs = (vehicleType) => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reports', active: true },\r\n { name: 'Finance Provider Intrest Rate', active: true }\r\n];\r\n\r\nconst FPIntrestRateProvider = (props) => {\r\n const childFunc = useRef(null);\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: props.branchCode || '',\r\n branchName: props.branchName || '',\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n vehicleTypeCode: {},\r\n currentMonthDays: [],\r\n customerList: [],\r\n customerCode: {},\r\n filterData: [],\r\n budgetYear: [],\r\n targetType: [],\r\n modelList: [],\r\n vehicleCategories: [],\r\n isValueChange: false,\r\n isRecord: true,\r\n isReload: null,\r\n selectedModelId: null\r\n });\r\n\r\n useEffect(() => {\r\n const fetchData = async () => {\r\n try {\r\n const [yearRes, providerRes] = await Promise.all([getReportingBudgetScreenDropDown(), getFPProviderList()]);\r\n\r\n if (yearRes.data && yearRes.data.year) {\r\n setState((prevState) => ({\r\n ...prevState,\r\n budgetYear: yearRes.data.year.map((o) => ({\r\n description: o.name.toString(),\r\n id: o.id.toString()\r\n }))\r\n }));\r\n }\r\n\r\n if (providerRes.success && providerRes.data) {\r\n setState((prevState) => ({\r\n ...prevState,\r\n modelList: providerRes.data.map((o) => ({\r\n name: o.financeProviderName,\r\n providerID: o.financeProviderID.toString()\r\n })),\r\n isRecord: true\r\n }));\r\n }\r\n } catch (error) {\r\n // Handle errors here\r\n }\r\n };\r\n\r\n fetchData();\r\n }, [state.yearCode, state.isReload]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleActionTriggerCheck = (value) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.isValueChange = value;\r\n return newSt;\r\n });\r\n };\r\n\r\n const handleModelOpen = (id) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.openModelModal = true;\r\n newSt.selectedModelId = id || null;\r\n return newSt;\r\n });\r\n };\r\n\r\n const closeModal = (isUpdateFlag) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.openModelModal = false;\r\n if (isUpdateFlag) newSt.isReload = new Date();\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n console.log(state);\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 Select Year \r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n handleModelOpen(null)} className=\"setFullWidth\">\r\n Add Finance Provider\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n childFunc.current()} disabled={!state.isValueChange}>\r\n Save\r\n \r\n \r\n \r\n {state.isRecord ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n Something Went Wrong\r\n \r\n \r\n )}\r\n \r\n \r\n {state.openModelModal ? (\r\n
closeModal(false)} maxWidth=\"sm\" fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n = 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(profit, budget) < 50\r\n ? '#D92641'\r\n : setPercentage(profit, budget) >= 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n {/* */}\r\n\r\n \r\n \r\n {props.dept}\r\n
\r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n {showLink ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n\r\n
\r\n {value || 0}\r\n
\r\n
{label || 'N/A'}
\r\n
\r\n BUDGET\r\n
\r\n
\r\n {profitVal || 0}\r\n \r\n {icon === 'down' ? : }\r\n \r\n \r\n
{branchName}
\r\n
props.onRedirectFun(branchID)} />\r\n \r\n = 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(profit, budget) < 50\r\n ? '#D92641'\r\n : setPercentage(profit, budget) >= 50 && setPercentage(profit, budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(profit, budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px',\r\n dominantBaseline: 'central'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n
Retail Units
\r\n
{formatters.ThousandSeparatorWithoutZero(retailsUnits)}
\r\n
\r\n
{props.selectedFilterBtnId == 'New' ? 'Motability Units' : 'Trade Units'}
\r\n
\r\n {props.selectedFilterBtnId == 'New'\r\n ? formatters.ThousandSeparatorWithoutZero(motabilityUnits)\r\n : formatters.ThousandSeparatorWithoutZero(tradeUnits)}\r\n
\r\n
\r\n
New Units
\r\n
{formatters.ThousandSeparatorWithoutZero(newUnits)}
\r\n
\r\n
Used Units
\r\n
{formatters.ThousandSeparatorWithoutZero(usedUnits)}
\r\n
\r\n
{props.label}
\r\n
\r\n
\r\n = 50 && value < 75 ? '#ff9f00' : value >= 75 ? '#569101' : '#D92641',\r\n pathColor: value < 50 ? '#D92641' : value >= 50 && value < 75 ? '#ff9f00' : value >= 75 ? '#569101' : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(profit)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(budget)}
\r\n
\r\n
\r\n \r\n {label || 'N/A'}
\r\n \r\n \r\n {value || 0}
\r\n \r\n \r\n BUDGET
\r\n \r\n\r\n \r\n \r\n {profitVal || 0}\r\n \r\n {!up ? : }\r\n \r\n \r\n
\r\n \r\n {label || 'N/A'}
\r\n \r\n \r\n \r\n
\r\n {value || 0}\r\n \r\n {showBudget ? !up ? : : null}\r\n \r\n \r\n
Total Profit
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.profit)}
\r\n
\r\n
Budget Variance
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.variance)}
\r\n
\r\n
Total Budget
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.budget)}
\r\n
\r\n {data.ppu ? (\r\n <>\r\n
Total PPU
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data?.ppu)}
\r\n \r\n ) : (\r\n <>\r\n
\r\n
\r\n \r\n )}\r\n
\r\n = 50 && setPercentage(data?.profit, data?.budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(data?.profit, data?.budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(data?.profit, data?.budget) < 50\r\n ? '#D92641'\r\n : setPercentage(data?.profit, data?.budget) >= 50 && setPercentage(data?.profit, data?.budget) < 75\r\n ? '#ff9f00'\r\n : setPercentage(data?.profit, data?.budget) >= 75\r\n ? '#569101'\r\n : '#D92641',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const UsedStocksCard = (props) => {\r\n const { CurrentStockValue, AverageStockValue, PreviousYearAverage } = props;\r\n const handleRedirect = (link, branchID) => {\r\n let searchQuery = `?isTrue=${true}`;\r\n let array = [];\r\n if (branchID) {\r\n array.push(branchID);\r\n }\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: array }));\r\n props.history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {props.branch}
\r\n \r\n \r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
{props.branch}
\r\n \r\n \r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n handleRedirect(props.stockLink, props.branchID)}>\r\n STOCK LIST \r\n \r\n\r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n
\r\n \r\n \r\n \r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {props.branch}
\r\n \r\n \r\n \r\n\r\n \r\n \r\n {showStock && (\r\n \r\n handleRedirect(props.stockLink, props.branchID)}\r\n >\r\n STOCK LIST\r\n {/* */}\r\n \r\n \r\n )}\r\n\r\n {showOverage && (\r\n \r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE\r\n {/* */}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n
\r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
\r\n
\r\n
{props.Units}
\r\n
UNITS
\r\n
\r\n\r\n {/*
\r\n {props.branch}
\r\n \r\n
\r\n \r\n
Current Stock Value
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(CurrentStockValue)}
\r\n
\r\n\r\n
\r\n \r\n handleRedirect(props.stockLink, props.branchID)}\r\n >\r\n STOCK\r\n \r\n \r\n \r\n \r\n\r\n handleRedirect(props.priorityLink, props.branchID)} style={{ padding: '1px 10px' }}>\r\n OVERAGE\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
Average Stock Value
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(AverageStockValue)}\r\n
\r\n
\r\n
Previous Year Average
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(PreviousYearAverage)}\r\n
\r\n
*/}\r\n \r\n
\r\n //
{m.valuationDate1}
\r\n //
{formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue1)}
\r\n // {list.length - 1 == index ? (\r\n //
\r\n // ) : (\r\n //
= 0 ? '#569101' : '#E51A54', padding: 0 }}\r\n // >\r\n // {parseFloat(m.getCalculatedvalue).toFixed(2)}% \r\n // {m.getCalculatedvalue >= 0 ? (\r\n // \r\n // ) : (\r\n // \r\n // )}\r\n // {data.branch}
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n \r\n \r\n \r\n \r\n handleRedirect(props.stockLink, props.branchID)}>\r\n STOCK LIST \r\n \r\n \r\n \r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total CAP Clean\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Total Variance \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n \r\n {!true ? : }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Avg DIS
\r\n \r\n {data.avgDis}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Stock Turn
\r\n \r\n {data.stockTurn}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* \r\n \r\n \r\n
{data.branch}
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n
\r\n handleRedirect(props.stockLink, props.branchID)}\r\n >\r\n STOCK LIST \r\n \r\n\r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
Total CAP Clean
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n
\r\n
\r\n
Total Variance
\r\n
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n
\r\n {!true ? : }\r\n \r\n
\r\n
\r\n
Avg DIS
\r\n
\r\n {data.avgDis}\r\n
\r\n
\r\n
Stock Turn
\r\n
\r\n {data.stockTurn}\r\n
\r\n
\r\n
\r\n {list.map((m) => {\r\n if (m.branchID === props.branchID) {\r\n return (\r\n \r\n \r\n
{m.valuationDays1}
\r\n
{`${m.totalCount1} (${m.percent1}%)`}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue1)}\r\n
\r\n
\r\n
\r\n \r\n {list.map((m) => {\r\n if (m.branchID === props.branchID) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n 0 - 30 DAYS\r\n \r\n {`${m.totalCount0to30} (${m.totalPerc0to30}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue0to30)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 31 -60 DAYS\r\n \r\n {`${m.totalCount31to60} (${m.totalPerc31to60}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue31to60)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 61 - 90 DAYS\r\n \r\n {`${m.totalCount61to90} (${m.totalPerc61to90}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue61to90)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 91 - 120 DAYS\r\n \r\n {`${m.totalCount91to120} (${m.totalPerc91to120}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue91to120)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 121 - 150 DAYS\r\n \r\n {`${m.totalCount121to150} (${m.totalPerc121to150}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue121to150)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 150+ DAYS\r\n \r\n {`${m.totalCount150Plus} (${m.totalPerc150Plus}%)`}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.stockValue150Plus)}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n //
\r\n );\r\n};\r\n\r\nexport const AgedStockCardMobileView = (props) => {\r\n const { data, showOverage, showStock } = props;\r\n let stockTurnColor = data.stockTurn <= 5 ? 'red' : data.stockTurn < 10 ? '#FFBF00' : '#569101';\r\n const handleRedirect = (link, branchID) => {\r\n let array = [];\r\n if (branchID) {\r\n array.push(branchID);\r\n }\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: array }));\r\n props.history.push({\r\n pathname: link\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n {data.branchShortName}
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n \r\n \r\n \r\n {showStock && (\r\n \r\n handleRedirect(props.stockLink, props.branchID)}>\r\n STOCK LIST\r\n {/* */}\r\n \r\n \r\n )}\r\n {showOverage && (\r\n \r\n handleRedirect(props.priorityLink, props.branchID)}>\r\n OVERAGE\r\n {/* */}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total CAP Clean\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Total Variance \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n \r\n {!true ? : }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Avg DIS
\r\n \r\n {data.avgDis}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Stock Turn
\r\n \r\n {data.stockTurn}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
{props.units}
\r\n
UNITS
\r\n
\r\n
{data.branch}
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.total)}
\r\n
\r\n
Total CAP Clean
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(data.totalCapClean)}\r\n
\r\n
\r\n
Total Variance
\r\n
\r\n
{formatters.CurrencyThousandSeparatorWithoutZero(data.totalVariance)}\r\n
\r\n {!true ? : }\r\n \r\n
\r\n
\r\n
Avg DIS
\r\n
\r\n {data.avgDis}\r\n
\r\n
\r\n
Stock Turn
\r\n
\r\n {data.stockTurn}\r\n
\r\n
\r\n
\r\n \r\n {label || 'N/A'}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(value) || 0}\r\n \r\n\r\n \r\n \r\n
{subLabelOne}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.newProfit)}\r\n
\r\n
\r\n
{subLabelTwo}
\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(props.newPpu)}\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n CURRENT\r\n \r\n \r\n PRIOR YEAR\r\n \r\n \r\n DIFFERENCE\r\n \r\n \r\n \r\n \r\n {props.data?.map((row) => (\r\n \r\n \r\n {row.description}\r\n \r\n \r\n {row.current}\r\n \r\n \r\n {row.priorYear}\r\n \r\n \r\n {row.diff || 0} \r\n {false ? : }\r\n \r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import { Avatar, ButtonGroup } from '@material-ui/core';\r\nimport { Button, Collapse, FormLabel, Grid, Hidden, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\n\r\nimport { useState } from 'react';\r\n// import { ProfitTable } from './profitlossTable';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\r\n\r\nimport { getReportsDropdowns, getProfitLossbyID } from '../../../../../Core/Service/reportService';\r\nimport { FilterListIcon } from '@material-ui/icons/FilterList';\r\nimport { BudgetSendBtn, FilterBtn, LinkedButton, SmallLinkedButton } from '../BudgetCore/budgetButton';\r\nimport { ProfitLossCards, UsedStocksCard, UsedStocksCardMobileView, UsedStocksCardTWO } from '../BudgetCore/budgetCardsUi_v2';\r\nimport ViewComfyIcon from '@material-ui/icons/ViewComfy';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport { PandLLineChart } from '../BudgetCore/p&ldetailsChart';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Label } from 'recharts';\r\n\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CircularIndeterminate from '../BudgetCore/loader';\r\n\r\nimport { getUsedStockValuation } from '../../../../../Core/Service/ReportScreens-service';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\n\r\nlet filterBtnList = [\r\n { label: 'COMBINED', id: 'C' },\r\n { label: 'RETAIL', id: 'R' },\r\n { label: 'TRADE', id: 'T' }\r\n];\r\n\r\nconst crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Used Stock', active: true },\r\n { name: 'Used Stock Valuation', active: true }\r\n];\r\n\r\nconst UsedStockValuation = () => {\r\n const [state, setState] = useState({\r\n branches: [],\r\n tableRow: [],\r\n branchList: [],\r\n franchise: [],\r\n groupIds: [],\r\n franchiseIds: [],\r\n showTable: true,\r\n gpStock: {},\r\n mainData: [],\r\n selectedFilterBtn: filterBtnList[0].id,\r\n showLoader: true\r\n });\r\n\r\n const portalSettings = AppStorage.getPortalSetting();\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n const portalNicolJson = JSON.parse(localStorage.getItem('NicoleFilterData'));\r\n\r\n const history = useHistory();\r\n\r\n const [temp, tempOption] = useState();\r\n\r\n const [table, setTable] = useState(false);\r\n\r\n const handleinput = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n useEffect(async () => {\r\n let DropDownRes = await getReportsDropdowns();\r\n if (DropDownRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: DropDownRes.data.branch,\r\n franchise: DropDownRes.data.franchiseCode\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleTable = () => {\r\n setTable(!table);\r\n };\r\n\r\n useEffect(async () => {\r\n let combineData = [];\r\n let res = await getUsedStockValuation(state.selectedFilterBtn);\r\n if (res.success) {\r\n if (res?.data?.mainData != null && res?.data?.mainData.length > 0) {\r\n combineData = res?.data?.mainData.map((p) => {\r\n let weeklyDataByIdList = res?.data?.weeklyData?.filter((q) => q.branchID == p.branchID);\r\n p.weeklyDataList = [...(weeklyDataByIdList?.length > 0 ? weeklyDataByIdList : [])].sort(\r\n (a, b) => moment(b.valuationDate1).format('YYYYMMDD') - moment(a.valuationDate1).format('YYYYMMDD')\r\n );\r\n p.weeklyDataList = p.weeklyDataList.map((m, index) => ({\r\n ...m,\r\n getCalculatedvalue: ((m.stockValue1 - p.weeklyDataList[index + 1]?.stockValue1) / p.weeklyDataList[index + 1]?.stockValue1) * 100\r\n }));\r\n return p;\r\n });\r\n }\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n gpStock: res?.data?.gpStock[0],\r\n gpValueData: res?.data?.gpValue,\r\n mainData: combineData || [],\r\n showLoader: false\r\n }));\r\n }, [state.startDate, state.endDate, state.franchiseIds, state.groupIds, state.selectedFilterBtn]);\r\n\r\n const handleChanges = (event, value) => {\r\n tempOption((st) => ({ ...st, groupVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, groupIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangesfranch = (event, value) => {\r\n tempOption((st) => ({ ...st, franchiseVal: value }));\r\n setState((st) => {\r\n const nst = { ...st, franchiseIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n\r\n const [checked, setChecked] = useState(false);\r\n\r\n const handleChange = () => {\r\n setChecked((prev) => !prev);\r\n };\r\n\r\n const filterBtnChange = (id) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedFilterBtn: id\r\n }));\r\n };\r\n\r\n const handleRedirect = (link) => {\r\n let searchQuery = `?isTrue=${true}`;\r\n history.push({\r\n pathname: link,\r\n search: searchQuery\r\n });\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: [] }));\r\n };\r\n\r\n return (\r\n \r\n {/*
*/}\r\n {state.showLoader ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n\r\n {/* \r\n {filterBtnList.map((p) => {\r\n return (\r\n \r\n filterBtnChange(p.id)}>\r\n {p.label}\r\n \r\n \r\n );\r\n })}\r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n GROUP STOCK
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{state.gpStock.totalUnitStock}
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.avgSIV)}\r\n
\r\n
Average SIV
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.previousYearAvg)}\r\n
\r\n
Previous Year Average
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(state.gpStock.totalUnitStock)}\r\n
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n = 600 ? 10 : 0 }}>\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n = 600 ? 10 : 0 }}>\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.avgSIV)}\r\n
\r\n
Average SIV
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.gpStock.previousYearAvg)}\r\n
\r\n
Previous Year Average
\r\n
GROUP STOCK VALUE (YR)
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* {state.mainData.map((p) => {\r\n return (\r\n <>}\r\n \r\n \r\n \r\n \r\n \r\n
{p.units}
\r\n
Units
\r\n
{p.branch}
*/}\r\n \r\n {WindowWidths >= 600 && (\r\n \r\n \r\n \r\n
{p.units}
\r\n
Units
\r\n
\r\n
\r\n \r\n \r\n \r\n {stableSort(props.list, getComparator(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n return (\r\n \r\n \r\n {row.stockNO}\r\n \r\n \r\n {row.regNo}\r\n \r\n \r\n {row.make}\r\n \r\n \r\n {row.model}\r\n \r\n \r\n {formatters.YearFormatter(row.dor)}\r\n \r\n \r\n {row.dayInStock}\r\n \r\n \r\n {row.mileage}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.standInValue)}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.capClean)}\r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(row.capClean - row.standInValue)}\r\n {!true ? : }\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n
\r\n {/* */}\r\n {stockData.showLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {WindowWidths > 1024 ? <> DOWNLOAD CSV : ''}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n SELECT BRANCH\r\n \r\n \r\n \r\n \r\n \r\n VEHICLE PROFILE\r\n \r\n \r\n \r\n \r\n {/*
*/}\r\n \r\n\r\n \r\n \r\n GROUP STOCK VALUE (YR)
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {stockData?.mainData?.map((p) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
{p.units}
\r\n
Units
\r\n
\r\n
{p.units}
\r\n
Units
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default UsedStock;\r\n","import { Avatar, ButtonGroup } from '@material-ui/core';\r\nimport { Button, Collapse, FormLabel, Grid, Hidden, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport { Multiselect, TextBox, DatePicker } from '../../../../../Core/FormInput';\r\n\r\nimport { useState } from 'react';\r\n// import { ProfitTable } from './profitlossTable';\r\nimport { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\r\n\r\nimport { FilterListIcon } from '@material-ui/icons/FilterList';\r\nimport { BudgetSendBtn, FilterBtn, LinkedButton, SmallLinkedButton } from '../BudgetCore/budgetButton';\r\nimport {\r\n AgedStockCard,\r\n AgedStockCardMobileView,\r\n AgedStocksCardTWO,\r\n AgedStocksDayRangeCard,\r\n ProfitLossCards,\r\n UsedStocksCard,\r\n UsedStocksCardTWO\r\n} from '../BudgetCore/budgetCardsUi_v2';\r\nimport ViewComfyIcon from '@material-ui/icons/ViewComfy';\r\nimport CallMadeIcon from '@material-ui/icons/CallMade';\r\nimport EventIcon from '@material-ui/icons/Event';\r\nimport { PandLLineChart } from '../BudgetCore/p&ldetailsChart';\r\nimport { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\n// import UsedStocksTable from './usedStockTable';\r\n\r\nimport ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';\r\n\r\nimport ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';\r\nimport { getAgedStockValuation } from '../../../../../Core/Service/ReportScreens-service';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useHistory } from 'react-router-dom';\r\nimport CircularIndeterminate from '../BudgetCore/loader';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\n\r\nconst crumbs = () => [\r\n { name: 'Home', path: '/' },\r\n { name: 'Used Stock', active: true },\r\n { name: 'Aged Vehicle Stock', active: true }\r\n];\r\n\r\nconst AgedStocks = () => {\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n const portalSettings = AppStorage.getPortalSetting();\r\n\r\n const history = useHistory();\r\n const portalNicolJson = JSON.parse(localStorage.getItem('NicoleFilterData'));\r\n const [state, setState] = useState({ avgVehicle: [], mainData: [], vehilceSplitByDays: [], showLoader: true });\r\n\r\n useEffect(async () => {\r\n let res = await getAgedStockValuation();\r\n if (res.success) {\r\n let groupStock = res.data.gpStock[0];\r\n setState((st) => ({\r\n ...st,\r\n avgSIV: groupStock.avgSIV,\r\n totalCAPValue: groupStock.totalCAPValue,\r\n totalStockValue: groupStock.totalStockValue,\r\n totalUnitStock: groupStock.totalUnitStock,\r\n avgVehicle: res.data.avgVehicle || [],\r\n totalVariance: groupStock.totalCAPValue - groupStock.totalStockValue,\r\n mainData: res.data.mainData || [],\r\n vehilceSplitByDays: res.data.vehilceSplitByDays || [],\r\n showLoader: false\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleRedirect = (link) => {\r\n localStorage.setItem('NicoleFilterData', JSON.stringify({ ...portalNicolJson, groupIds: [] }));\r\n history.push({\r\n pathname: link\r\n });\r\n };\r\n\r\n let barColor = {\r\n 1: '#569101',\r\n 2: '#FFBF00',\r\n 3: 'red'\r\n };\r\n\r\n return (\r\n \r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n GROUP STOCK
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{state.totalUnitStock || 0}
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalCAPValue)}\r\n
\r\n
Total CAP Clean
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
{formatters.CurrencyThousandSeparatorWithoutZero(Math.abs(state.totalVariance))}\r\n
\r\n {state.totalVariance < 0 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
Total Variance
\r\n \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.ThousandSeparatorWithoutZero(state.totalUnitStock || 0)}\r\n
\r\n
Total Units in Stock
\r\n
\r\n \r\n
\r\n \r\n \r\n = 600 ? 10 : 0 }}>\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalStockValue)}\r\n
\r\n
Total Stock Value
\r\n
\r\n \r\n
\r\n \r\n \r\n = 600 ? 10 : 0 }}>\r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(state.totalCAPValue)}\r\n
\r\n
Total CAP Clean
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
{formatters.CurrencyThousandSeparatorWithoutZero(Math.abs(state.totalVariance))}\r\n
\r\n {state.totalVariance < 0 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
Total Variance
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleRedirect('/usedStock')}>\r\n STOCK LIST \r\n \r\n \r\n \r\n handleRedirect('/overagePriority')}>\r\n OVERAGE \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n
AVERAGE VEHICLE AGE PER SITE
{' '}\r\n
\r\n \r\n {/* */}\r\n \r\n \r\n \r\n {/* */}\r\n {state.avgVehicle.map((entry, index) => {\r\n let colorCode;\r\n if (entry.count <= 50) {\r\n colorCode = 1;\r\n } else if (entry.count >= 50 && entry.count < 150) {\r\n colorCode = 2;\r\n } else if (entry.count >= 150) {\r\n colorCode = 3;\r\n }\r\n return (\r\n {\r\n // handleDetailpopUp(entry, 'VMRS');\r\n // }}\r\n />\r\n );\r\n })}\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n\r\n {state.mainData.map((m) => {\r\n return (\r\n <>\r\n {/*
\r\n \r\n \r\n \r\n
{m.units}
\r\n
Units
\r\n
\r\n
{m.units}
\r\n
Units
\r\n
\r\n {/*
*/}\r\n {state.showLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {WindowWidths > 1024 ? <> DOWNLOAD CSV : ''}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n SELECT BRANCH\r\n \r\n \r\n \r\n \r\n\r\n \r\n {state.gpStock.map((p) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n {p.label}
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
{p.totalUnits}
\r\n
Total Units
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(p.standInValue)}\r\n
\r\n
Stand In Value (SIV)
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(p.totalCAPClean)}\r\n
\r\n
Total CAP Clean
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {formatters.CurrencyThousandSeparatorWithoutZero(Math.abs(p.totalVariance))}\r\n
\r\n
Total Variance
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Budget\r\n \r\n \r\n \r\n Actuals\r\n \r\n \r\n \r\n MTD VARIANCE\r\n \r\n \r\n \r\n RUN RATE PROJECTION\r\n \r\n \r\n \r\n BALANCE TO HIT BUDGET\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total month\r\n \r\n \r\n Month to date 5 days\r\n \r\n \r\n Daily rate\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n Month to date 5 days\r\n \r\n \r\n Daily rate\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n Month to date 5 days\r\n \r\n \r\n Month to date 5 days\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Full month at run rate\r\n \r\n \r\n Full month budget\r\n \r\n \r\n Full month last year\r\n \r\n \r\n Variance to budget\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n Based on MTD Actual\r\n \r\n \r\n Daily rate required\r\n \r\n \r\n Run rate improvement required\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n £\r\n \r\n \r\n %\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n £\r\n \r\n \r\n £\r\n \r\n \r\n %\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Knowsley Van\r\n \r\n Workshop\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n Counter\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n Total\r\n \r\n \r\n \r\n 145,320\r\n \r\n \r\n 36,330\r\n \r\n \r\n 7,266\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n 35,962\r\n \r\n \r\n 7,192\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Total month */}\r\n \r\n (368)\r\n \r\n \r\n -1.0%\r\n \r\n {/* Daily rate */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n 143,850\r\n \r\n \r\n 145,320\r\n \r\n \r\n 176,567\r\n \r\n \r\n (1,470)\r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n 109,358\r\n \r\n \r\n 7,291\r\n \r\n \r\n 1.4%\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {/* \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n Total Parts Sales Counter/Workshop \r\n \r\n \r\n December 2022\r\n \r\n \r\n \r\n Working Days : 05\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n KVN\r\n KNT\r\n Dee\r\n TRA\r\n STO\r\n \r\n Total Group\r\n Difference\r\n \r\n \r\n \r\n \r\n Parts sales Counter\r\n Need\r\n showSummenry()}>\r\n £43,486\r\n \r\n \r\n £37,730\r\n \r\n \r\n £26,871\r\n \r\n \r\n £66,130\r\n \r\n \r\n £56,593\r\n \r\n \r\n \r\n £230,820\r\n \r\n \r\n \r\n\r\n \r\n Parts sales Counter\r\n Done\r\n \r\n £42,825\r\n \r\n \r\n £95,194\r\n \r\n \r\n £31,742\r\n \r\n \r\n £45,054\r\n \r\n \r\n £42,820\r\n \r\n \r\n \r\n £257,634\r\n \r\n £26,824\r\n \r\n\r\n \r\n Parts sales Workshop\r\n Need\r\n \r\n £36,330\r\n \r\n \r\n £47,732\r\n \r\n \r\n £51,754\r\n \r\n \r\n £57,981\r\n \r\n \r\n £58,307\r\n \r\n \r\n \r\n £252,104\r\n \r\n \r\n \r\n\r\n \r\n Parts sales Workshop\r\n Done\r\n \r\n £35,962\r\n \r\n \r\n £28,726\r\n \r\n \r\n £24,417\r\n \r\n \r\n £42,862\r\n \r\n \r\n £48,248\r\n \r\n \r\n \r\n £180,216\r\n \r\n \r\n -£71,887\r\n \r\n \r\n \r\n Profit \r\n Need\r\n \r\n £15,000\r\n \r\n \r\n £17,093\r\n \r\n \r\n £15,003\r\n \r\n \r\n £23,023\r\n \r\n \r\n £23,023\r\n \r\n \r\n \r\n £22,176\r\n \r\n \r\n \r\n \r\n Profit \r\n Done\r\n \r\n £14,989\r\n \r\n \r\n £18,775\r\n \r\n \r\n £12,002\r\n \r\n \r\n £18,615\r\n \r\n \r\n £18,558\r\n \r\n \r\n \r\n £82,938\r\n \r\n \r\n -£9,356\r\n \r\n \r\n \r\n Profit % \r\n \r\n \r\n 19.02%\r\n \r\n \r\n 15.15%\r\n \r\n \r\n 21.37%\r\n \r\n \r\n 21.17%\r\n \r\n \r\n 20.38%\r\n \r\n \r\n \r\n 18.94%\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumIdleHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumProductiveHours) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumNonProductiveHours) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID },\r\n headerFilter: false,\r\n primaryKey: 'ic',\r\n dataSource: [],\r\n // dataSource: {\r\n // url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n // headers: { Authorization: `Bearer ${token}`, domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host },\r\n // data: { StartDate: state.startDate, EndDate: state.endDate },\r\n // success: onSuccessOperatorFunc\r\n // },\r\n columns: IdelCol,\r\n detailTemplate: ''\r\n });\r\n\r\n setTimeout(() => {\r\n setDataSource(opGrid, getUrl);\r\n opGrid.reload();\r\n });\r\n\r\n opGrid.on('detailExpand', function (e, $detailWrapper, ic) {\r\n techGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, IdleCode: ic },\r\n headerFilter: false,\r\n primaryKey: 'rc',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechFun\r\n },\r\n columns: nominalColumns,\r\n detailTemplate: ''\r\n });\r\n techGrid.on('detailExpand', function (e, $detailWrapper, rc) {\r\n techDetailsGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, IdleCode: ic, res: rc },\r\n headerFilter: false,\r\n primaryKey: 'rn',\r\n dataSource: {\r\n url: `${ExpBaseURL}/api/services/IdleTimeAnalysis?Mode=R`,\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n domainName: window.location.host.includes('localhost') ? 'localhost' : window.location.host\r\n },\r\n data: { StartDate: state.startDate, EndDate: state.endDate },\r\n success: onSuccessTechDetailsFun\r\n },\r\n columns: techDetailsColumns\r\n });\r\n });\r\n });\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n PullSalesNominalData();\r\n }, [state.startDate, state.endDate, props.type]);\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/IdleTimeAnalysis${getUrl.includes('?') ? '&' : '?'}fileType=excel&StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'IdelTimeAnalysis');\r\n };\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {label}\r\n \r\n \r\n Budgeted / Working\r\n \r\n \r\n {props.list.length > 0 ? (\r\n \r\n {props.list.map((n, i) => {\r\n return (\r\n \r\n \r\n {n.bn}\r\n \r\n \r\n onRedirect({ branchId: n.branchID, branch: n.bn, index: 10 })}\r\n >\r\n {n.techniciansBudget ? formatters.ThousandSeparatorWithoutZero(n.techniciansBudget) : 'N/A'}\r\n {' '}\r\n /{' '}\r\n onRedirect({ branchId: n.branchID, branch: n.bn, index: 11 })}\r\n style={{\r\n cursor: 'pointer',\r\n color: n.techniciansBudget > n.techniciansWorking ? 'red' : 'green'\r\n }}\r\n >\r\n {n.techniciansWorking ? formatters.ThousandSeparatorWithoutZero(n.techniciansWorking) : 'N/A'}\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 \r\n \r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport { Container, Grid, Avatar, Typography, Button, ButtonGroup, CircularProgress } from '@material-ui/core';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { getReprtingAfterSaleDashboard } from '../../../Core/Service/ReportScreens-service';\r\nimport './ReportingScreensStyle.scss';\r\nimport {\r\n AfterSaleBranchCard,\r\n AfterSaleBranchCardPart,\r\n AfterSaleCombined,\r\n AfterSaleJobsDetails,\r\n AfterSaleSupercharge,\r\n AfterSaleYtdMtdSection\r\n} from './saleDashboardCard';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\nimport moment from 'moment';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { TechnicianBudgetTable } from './TechnicianBudgetTable';\r\nimport _ from 'lodash';\r\n// import { Typography from '@material-ui/core/Typography';\r\nfunction isFiniteCheck(str) {\r\n return isFinite(str) ? str.toFixed(2) : '0.00';\r\n}\r\nfunction roundMtdValues(arr) {\r\n return arr.map((item) => ({\r\n ...item,\r\n mtdSold: parseFloat(item.mtdSold?.toFixed(2)),\r\n mtdTaken: parseFloat(item.mtdTaken?.toFixed(2)),\r\n mtdAvailable: parseFloat(item.mtdAvailable?.toFixed(2)),\r\n mtdSale: parseFloat(item.mtdSale?.toFixed(2)),\r\n mtdCost: parseFloat(item.mtdCost?.toFixed(2)),\r\n ytdSold: parseFloat(item.ytdSold?.toFixed(2)),\r\n ytdTaken: parseFloat(item.ytdTaken?.toFixed(2)),\r\n ytdAvailable: parseFloat(item.ytdAvailable?.toFixed(2)),\r\n ytdSale: parseFloat(item.ytdSale?.toFixed(2)),\r\n ytdCost: parseFloat(item.ytdCost?.toFixed(2)),\r\n mtdBudget: parseFloat(item.mtdBudget?.toFixed(2)),\r\n mtdHoursBudget: parseFloat(item.mtdHoursBudget?.toFixed(2)),\r\n monthBudget: parseFloat(item.monthBudget?.toFixed(2)),\r\n monthHoursBudget: parseFloat(item.monthHoursBudget?.toFixed(2)),\r\n ytdBudget: parseFloat(item.ytdBudget?.toFixed(2)),\r\n ytdHoursBudget: parseFloat(item.ytdHoursBudget?.toFixed(2)),\r\n mtdRecoveryRateBudget: parseFloat(item.mtdRecoveryRateBudget?.toFixed(2)),\r\n ytdRecoveryRateBudget: parseFloat(item.ytdRecoveryRateBudget?.toFixed(2)),\r\n mtdEfficiencyBudget: parseFloat(item.mtdEfficiencyBudget?.toFixed(2)),\r\n ytdEfficiencyBudget: parseFloat(item.ytdEfficiencyBudget?.toFixed(2)),\r\n mtdUtilisationBudget: parseFloat(item.mtdUtilisationBudget?.toFixed(2)),\r\n ytdUtilisationBudget: parseFloat(item.ytdUtilisationBudget?.toFixed(2)),\r\n techniciansBudget: parseFloat(item.techniciansBudget?.toFixed(2)),\r\n techniciansWorking: parseFloat(item.techniciansWorking?.toFixed(2))\r\n }));\r\n}\r\n\r\nconst AfterSaleReportingDashboard = () => {\r\n const { showToast, showModal } = useContext(AppContext);\r\n\r\n const history = useHistory();\r\n const portalSettings = AppStorage.getPortalSetting();\r\n\r\n const isCommunicatorAllowed = AppStorage.getCommunicatorAllowed() && portalSettings.portalSettingCommunicatorEnabled;\r\n const RedirectToDash = (val) => {\r\n history.push({\r\n pathname: val\r\n });\r\n };\r\n\r\n const [state, setState] = useState({\r\n TotalSold: 0,\r\n TotalTaken: 0,\r\n TotalSale: 0,\r\n TotalCost: 0,\r\n YTDTotalSold: 0,\r\n YTDTotalTaken: 0,\r\n YTDTotalSale: 0,\r\n YTDTotalCost: 0,\r\n soldHoursArr: [],\r\n partsArr: [],\r\n mtdGrossProfit: 0,\r\n ytdGrossProfit: 0,\r\n mtdSaleValueCountP: 0,\r\n ytdSaleValueCountP: 0,\r\n mtdSaleValueCountWC: 0,\r\n ytdSaleValueCountWC: 0,\r\n showLoader: true,\r\n isRecordAvalaible: false,\r\n isHoursSoldBudgetData: false,\r\n technicianBudget: []\r\n // soldHoursArr: [],\r\n });\r\n\r\n const [partsData, setPartsData] = useState({\r\n partsCalculatedList: [],\r\n partsArr: [],\r\n uniqueBranchList: [],\r\n graphData: [],\r\n showLoader: true,\r\n isPartData: false\r\n });\r\n\r\n const [surchargesData, setSurchargesData] = useState({ surchargesArr: [] });\r\n const [ytdMtdData, setYtdMtdData] = useState({ monthlyWIPsUniqueDateList: [], isSurchargesData: false });\r\n\r\n useEffect(async () => {\r\n let res = await getReprtingAfterSaleDashboard();\r\n\r\n if (res.success) {\r\n let hoursSoldBudgetList = roundMtdValues(res.data?.hoursSoldBudgetList) || [];\r\n let partsVOR = res.data?.partsVOR[0];\r\n let parts = res.data?.parts || [];\r\n let surcharges = res.data?.surcharges || [];\r\n let monthlyWIPs = res.data?.monthlyWIPs || [];\r\n let dailyWIPs = res.data?.dailyWIPs || [];\r\n\r\n if (monthlyWIPs.length > 0) {\r\n let monthlyWIPsUniqueDateList = [];\r\n\r\n monthlyWIPs.forEach((p) => {\r\n monthlyWIPsUniqueDateList.push({ date: p.date, name: moment(p.date).format('MMM-YY'), Total: 0 });\r\n });\r\n monthlyWIPsUniqueDateList = [...new Map(monthlyWIPsUniqueDateList.map((item) => [item['date'], item])).values()];\r\n monthlyWIPs.forEach((p) => {\r\n let objIndex = monthlyWIPsUniqueDateList.findIndex((q) => q.date === p.date);\r\n\r\n if (objIndex > -1) {\r\n monthlyWIPsUniqueDateList[objIndex].Total += p.hours;\r\n }\r\n });\r\n\r\n let monthlyWIPsUniqueBranchList = [];\r\n let monthlyWIPsGrapgData = [];\r\n let sortedMonthlyWIPsGrapgData = [];\r\n\r\n [...monthlyWIPs].forEach((q) => {\r\n monthlyWIPsUniqueBranchList.push(q.branchShortCode);\r\n\r\n let isIDExist = monthlyWIPsGrapgData.findIndex((t) => t.date == moment(q.date).format('MMM-YY'));\r\n if (isIDExist > -1) {\r\n monthlyWIPsGrapgData[isIDExist][q.branchShortCode] = q.hours;\r\n monthlyWIPsGrapgData[isIDExist].Total += q.hours;\r\n } else {\r\n monthlyWIPsGrapgData.push({\r\n formatDate: q.date,\r\n date: moment(q.date).format('MMM-YY'),\r\n [q.branchShortCode]: q.hours,\r\n Total: 0 + +q.hours\r\n });\r\n }\r\n });\r\n\r\n sortedMonthlyWIPsGrapgData = monthlyWIPsGrapgData.sort((a, b) => new Date(a.formatDate) - new Date(b.formatDate));\r\n\r\n // console.log(sortedMonthlyWIPsGrapgData, 'monthlyWIPsGrapgData');\r\n monthlyWIPsUniqueBranchList = [...new Set(monthlyWIPsUniqueBranchList)];\r\n monthlyWIPsUniqueBranchList.push('Total');\r\n\r\n const uniqueMonthlyDates = _.sortBy([...new Set(monthlyWIPs.map((item) => item.date))], (date) => new Date(date));\r\n // Extract uniqueMonthly branches from the monthlyWIPs\r\n const uniqueMonthlyBranches = [...new Set(monthlyWIPs.map((item) => `${item.branchShortCode} (${item.branchID})`))];\r\n\r\n // Initialize an object to store the column totals\r\n const monthlyWIPscolumnTotals = {};\r\n\r\n // Calculate column totals\r\n uniqueMonthlyDates.forEach((date) => {\r\n monthlyWIPscolumnTotals[date] = monthlyWIPs.filter((item) => item.date === date).reduce((total, item) => total + item.hours, 0);\r\n });\r\n\r\n let dailyWIPsCombinedList = [];\r\n let dailyWIPsUniqueDateList = [];\r\n\r\n [...dailyWIPs].forEach((p) => {\r\n dailyWIPsUniqueDateList.push({ date: p.date, name: moment(p.date).format('DD/MM'), Total: 0 });\r\n let objIndex = dailyWIPsCombinedList.findIndex((q) => q.branchID === p.branchID);\r\n if (objIndex > -1) {\r\n dailyWIPsCombinedList[objIndex].data.push({ ...p });\r\n } else {\r\n dailyWIPsCombinedList.push({\r\n branchID: p.branchID,\r\n branchShortCode: p.branchShortCode,\r\n data: [{ ...p }]\r\n });\r\n }\r\n });\r\n dailyWIPsUniqueDateList = [...new Map(dailyWIPsUniqueDateList.map((item) => [item['date'], item])).values()];\r\n\r\n dailyWIPs.forEach((p) => {\r\n let objIndex = dailyWIPsUniqueDateList.findIndex((q) => q.date === p.date);\r\n\r\n if (objIndex > -1) {\r\n dailyWIPsUniqueDateList[objIndex].Total += p.hours;\r\n }\r\n });\r\n let dailyWIPsUniqueBranchList = [];\r\n let dailyWIPsGrapgData = [];\r\n\r\n [...dailyWIPs].forEach((q) => {\r\n dailyWIPsUniqueBranchList.push(q.branchShortCode);\r\n\r\n let isIDExist = dailyWIPsGrapgData.findIndex((t) => t.date == moment(q.date).format('DD/MM/YY'));\r\n if (isIDExist > -1) {\r\n dailyWIPsGrapgData[isIDExist][q.branchShortCode] = q.hours;\r\n // dailyWIPsGrapgData[isIDExist].Total += q.hours;\r\n } else {\r\n dailyWIPsGrapgData.push({\r\n date: moment(q.date).format('DD/MM/YY'),\r\n [q.branchShortCode]: q.hours\r\n // Total: 0 + +q.hours\r\n });\r\n }\r\n });\r\n dailyWIPsUniqueBranchList = [...new Set(dailyWIPsUniqueBranchList)];\r\n\r\n const uniqueDates = [...new Set(dailyWIPs.map((item) => item.date))];\r\n\r\n // Extract unique branches from the dailyWIPs\r\n const uniqueBranches = [...new Set(dailyWIPs.map((item) => `${item.branchShortCode} (${item.branchID})`))];\r\n\r\n // Initialize an object to store the column totals\r\n const columnTotals = {};\r\n\r\n // Calculate column totals\r\n uniqueDates.forEach((date) => {\r\n columnTotals[date] = dailyWIPs.filter((item) => item.date === date).reduce((total, item) => total + item.hours, 0);\r\n });\r\n\r\n setYtdMtdData((pt) => ({\r\n ...pt,\r\n dailyWIPsUniqueBranches: uniqueBranches,\r\n dailyWIPscolumnTotals: columnTotals,\r\n monthlyWIPsUniqueDateList: uniqueMonthlyDates || [],\r\n monthlyWIPscolumnTotals: monthlyWIPscolumnTotals,\r\n dailyWIPs: dailyWIPs || [],\r\n dailyWIPsUniqueDateList: uniqueDates || [],\r\n monthlyWIPsGrapgData: sortedMonthlyWIPsGrapgData || [],\r\n monthlyWIPsUniqueBranchList: monthlyWIPsUniqueBranchList || [],\r\n dailyWIPsGrapgData: dailyWIPsGrapgData || [],\r\n dailyWIPsUniqueBranchList: dailyWIPsUniqueBranchList || [],\r\n monthlyWIPs: monthlyWIPs || [],\r\n MonthlyWIPsUniqueBranches: uniqueMonthlyBranches || []\r\n }));\r\n }\r\n\r\n if (hoursSoldBudgetList.length > 0) {\r\n let TotalSold = 0;\r\n let TotalTaken = 0;\r\n let TotalSale = 0;\r\n let TotalCost = 0;\r\n let YTDTotalSold = 0;\r\n let YTDTotalTaken = 0;\r\n let YTDTotalSale = 0;\r\n let YTDTotalCost = 0;\r\n let MTDTotalBudget = 0;\r\n let YTDTotalBudget = 0;\r\n let mtdBudget = 0;\r\n let ytdBudget = 0;\r\n let totalCount = [...hoursSoldBudgetList].forEach(function (item) {\r\n TotalSold += item.mtdSold;\r\n TotalTaken += item.mtdTaken;\r\n TotalSale += item.mtdSale;\r\n TotalCost += item.mtdCost;\r\n YTDTotalSold += item.ytdSold;\r\n YTDTotalTaken += item.ytdTaken;\r\n YTDTotalSale += item.ytdSale;\r\n YTDTotalCost += item.ytdCost;\r\n MTDTotalBudget += item.mtdHoursBudget;\r\n YTDTotalBudget += item.ytdHoursBudget;\r\n mtdBudget += item.mtdBudget;\r\n ytdBudget += item.ytdBudget;\r\n // graphYAxis += item.mtdSold -item.mtdBudget;\r\n });\r\n\r\n var soldHoursArr = hoursSoldBudgetList.reduce((acc, obj) => {\r\n var index = acc.find((item) => item.bn === obj.bn);\r\n if (index) {\r\n index.mtdSold += obj.mtdSold;\r\n index.mtdTaken += obj.mtdTaken;\r\n index.mtdSale += obj.mtdSale;\r\n index.mtdCost += obj.mtdCost;\r\n index.ytdSold += obj.ytdSold;\r\n index.ytdTaken += obj.ytdTaken;\r\n index.ytdSale += obj.ytdSale;\r\n index.ytdCost += obj.ytdCost;\r\n\r\n return acc;\r\n }\r\n acc.push({ ...obj });\r\n return acc;\r\n }, []);\r\n console.log(soldHoursArr, 'soldHoursArr');\r\n soldHoursArr = soldHoursArr.map((p, i) => {\r\n let recRateTable = p.mtdSale / p.mtdSold;\r\n let cal = p.mtdSold - p.mtdHoursBudget;\r\n let invPound = p.mtdSale - p.mtdBudget;\r\n let rec = p.mtdSale / p.mtdSold - p.mtdRecoveryRateBudget;\r\n let eff = (p.mtdSold / p.mtdTaken) * 100 - p.mtdEfficiencyBudget;\r\n let monthInvoicingPoundDiff = p.mtdSale - p.monthBudget;\r\n let monthInvoicingPoundPercentage = (p.mtdSale / p.monthBudget) * 100 > 100 ? 100 : (p.mtdSale / p.monthBudget) * 100;\r\n let monthHoursBudgetDiff = p.mtdSold - p.monthHoursBudget;\r\n let monthHoursBudgetPercentage = (p.mtdSold / p.monthHoursBudget) * 100 > 100 ? 100 : (p.mtdSold / p.monthHoursBudget) * 100;\r\n return {\r\n ...p,\r\n recRateTable: Math.round(recRateTable),\r\n invoicingHours: Math.round(cal),\r\n RecoveryRate: Math.round(rec),\r\n invoicingPound: Math.round(invPound),\r\n efficiencyBud: Math.round(eff),\r\n monthHoursBudgetPercentage: Math.round(monthHoursBudgetPercentage),\r\n monthHoursBudgetDiff: Math.round(monthHoursBudgetDiff),\r\n monthInvoicingPoundPercentage: Math.round(monthInvoicingPoundPercentage),\r\n monthInvoicingPoundDiff: Math.round(monthInvoicingPoundDiff)\r\n };\r\n });\r\n\r\n setState((st) => ({\r\n ...st,\r\n TotalSold: TotalSold,\r\n TotalTaken: TotalTaken,\r\n TotalSale: TotalSale,\r\n TotalCost: TotalCost,\r\n YTDTotalSold: YTDTotalSold,\r\n YTDTotalTaken: YTDTotalTaken,\r\n YTDTotalSale: YTDTotalSale,\r\n YTDTotalCost: YTDTotalCost,\r\n soldHoursArr: soldHoursArr,\r\n MTDTotalBudget: MTDTotalBudget,\r\n YTDTotalBudget: YTDTotalBudget,\r\n mtdBudget: mtdBudget,\r\n ytdBudget: ytdBudget,\r\n partsVOR: partsVOR,\r\n isHoursSoldBudgetData: hoursSoldBudgetList.length > 0 ? true : false,\r\n technicianBudget: hoursSoldBudgetList || []\r\n }));\r\n }\r\n if (parts.length > 0) {\r\n let partsCalculatedList = parts.reduce((acc, obj) => {\r\n var index = acc.find((item) => item.dc === obj.dc);\r\n if (index) {\r\n index.mtdSaleValue += +obj.mtdSaleValue;\r\n index.ytdSaleValue += +obj.ytdSaleValue;\r\n index.mtdGrossProfit += obj.mtdGrossProfit;\r\n index.ytdGrossProfit += obj.ytdGrossProfit;\r\n index.mtdBudget += obj.mtdBudget;\r\n index.ytdBudget += obj.ytdBudget;\r\n index.mtdgpp += obj.mtdgpp;\r\n index.ytdgpp += obj.ytdgpp;\r\n return acc;\r\n }\r\n acc.push({ ...obj });\r\n return acc;\r\n }, []);\r\n\r\n let pratRowCount = parts.length;\r\n let totalCountObj = {\r\n dc: '',\r\n d: '',\r\n mtdSaleValue: 0,\r\n ytdSaleValue: 0,\r\n mtdGrossProfit: 0,\r\n ytdGrossProfit: 0,\r\n mtdBudget: 0,\r\n ytdBudget: 0,\r\n mtdgpp: 0,\r\n ytdgpp: 0\r\n };\r\n\r\n partsCalculatedList.forEach((p) => {\r\n totalCountObj.mtdSaleValue += p.mtdSaleValue;\r\n totalCountObj.ytdSaleValue += p.ytdSaleValue;\r\n totalCountObj.mtdGrossProfit += p.mtdGrossProfit;\r\n totalCountObj.ytdGrossProfit += p.ytdGrossProfit;\r\n totalCountObj.mtdBudget += p.mtdBudget;\r\n totalCountObj.ytdBudget += p.ytdBudget;\r\n totalCountObj.mtdgpp += p.mtdgpp;\r\n totalCountObj.ytdgpp += p.ytdgpp;\r\n });\r\n totalCountObj.mtdgpp = totalCountObj.mtdgpp / pratRowCount;\r\n totalCountObj.ytdgpp = totalCountObj.ytdgpp / pratRowCount;\r\n partsCalculatedList.unshift(totalCountObj);\r\n\r\n let partsTableCalculatedList = [];\r\n let uniqueBranchList = [];\r\n\r\n parts.forEach((p) => {\r\n uniqueBranchList.push({ bn: p.bn, branchID: p.branchID });\r\n let objIndex = partsTableCalculatedList.findIndex((q) => q.dc === p.dc);\r\n if (objIndex > -1) {\r\n partsTableCalculatedList[objIndex].data.push({ ...p });\r\n } else {\r\n partsTableCalculatedList.push({\r\n d: p.d,\r\n dc: p.dc,\r\n data: [{ ...p }]\r\n });\r\n }\r\n });\r\n uniqueBranchList = [...new Map(uniqueBranchList.map((item) => [item['branchID'], item])).values()];\r\n\r\n let graphData = {\r\n uniqueKeys: [],\r\n list: []\r\n };\r\n parts.forEach((p) => {\r\n graphData.uniqueKeys.push({ code: p.dc, name: p.d });\r\n let objIndex = graphData.list.findIndex((q) => q.branchID === p.branchID);\r\n if (objIndex > -1) {\r\n graphData.list[objIndex][`${p.dc}`] = +isFiniteCheck(p.mtdSaleValue - p.mtdBudget);\r\n } else {\r\n graphData.list.push({\r\n branchID: p.branchID,\r\n bn: p.bn,\r\n [`${p.dc}`]: +isFiniteCheck(p.mtdSaleValue - p.mtdBudget)\r\n });\r\n }\r\n });\r\n graphData.uniqueKeys = [...new Map(graphData.uniqueKeys.map((item) => [item['code'], item])).values()];\r\n\r\n setPartsData((pt) => ({\r\n ...pt,\r\n partsCalculatedList: partsCalculatedList || [],\r\n partsArr: partsTableCalculatedList || [],\r\n uniqueBranchList: uniqueBranchList || [],\r\n graphData: graphData || [],\r\n isPartData: true\r\n }));\r\n } else {\r\n setPartsData((pt) => ({\r\n ...pt,\r\n isPartData: false\r\n }));\r\n }\r\n if (surcharges.length > 0) {\r\n setSurchargesData((sr) => ({\r\n ...sr,\r\n surchargesArr: surcharges,\r\n isSurchargesData: true\r\n }));\r\n } else {\r\n setSurchargesData((sr) => ({\r\n ...sr,\r\n isSurchargesData: false\r\n }));\r\n }\r\n setState((sr) => ({\r\n ...sr,\r\n showLoader: false,\r\n isRecordAvalaible: true\r\n }));\r\n } else {\r\n showToast(res.message);\r\n setState((sr) => ({\r\n ...sr,\r\n showLoader: false,\r\n isRecordAvalaible: false\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 \r\n {state.isRecordAvalaible ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n {isCommunicatorAllowed && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ) : (\r\n \r\n Something Went Wrong\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default AfterSaleReportingDashboard;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabContext from '@material-ui/lab/TabContext';\r\nimport TabList from '@material-ui/lab/TabList';\r\nimport TabPanel from '@material-ui/lab/TabPanel';\r\nimport ReportingDashboard from './reportingDashboard';\r\nimport AfterSaleReportingDashboard from './afterSaleDashboard';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n // backgroundColor: theme.palette.background.paper,\r\n // background:'red',\r\n height: 'calc(100vh - 115px)'\r\n }\r\n}));\r\n\r\nconst RepotingTab = () => {\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState('2');\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n SALES\r\n \r\n \r\n \r\n \r\n \r\n Invoiced Sales\r\n \r\n Units MTD\r\n \r\n \r\n Gross Margin MTD\r\n \r\n \r\n Average Margin Per Unit\r\n \r\n\r\n 2022\r\n \r\n \r\n \r\n \r\n \r\n \r\n Budget\r\n Actual\r\n Variance\r\n Budget\r\n Actual\r\n Variance\r\n Apr-MTD\r\n Mar-YTD\r\n Variance\r\n\r\n Full-Year\r\n \r\n \r\n \r\n \r\n Truck\r\n New\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n \r\n Used\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n Van\r\n New\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n \r\n Used\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n Maxus\r\n New\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n \r\n Used\r\n -\r\n -\r\n -\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 \r\n -\r\n \r\n -\r\n -\r\n -\r\n \r\n -\r\n \r\n -\r\n \r\n \r\n {/* \r\n \r\n \r\n Used\r\n \r\n */}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n AFTER SALES\r\n \r\n \r\n \r\n \r\n \r\n \r\n Parts\r\n \r\n \r\n MTD\r\n \r\n \r\n \r\n Service\r\n \r\n \r\n MTD\r\n \r\n \r\n \r\n Forecast\r\n \r\n \r\n MTD\r\n \r\n \r\n \r\n \r\n \r\n \r\n Budget\r\n Actual\r\n Variance\r\n % Achieved\r\n \r\n \r\n Budget\r\n Actual\r\n Variance\r\n \r\n \r\n Budget\r\n Actual\r\n Variance\r\n % Achieved\r\n \r\n \r\n \r\n \r\n Trade Sales\r\n {/* New */}\r\n -\r\n -\r\n -\r\n -\r\n \r\n Hours Sold\r\n -\r\n -\r\n -\r\n \r\n\r\n Labour Revenue\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n Workshop Sales\r\n {/* New */}\r\n -\r\n -\r\n -\r\n -\r\n \r\n WIP (opening)\r\n -\r\n -\r\n -\r\n \r\n\r\n Hours Sold\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n Total Sales\r\n {/* New */}\r\n -\r\n -\r\n -\r\n -\r\n \r\n Recovery Rate\r\n -\r\n -\r\n -\r\n \r\n\r\n Parts Gross Margin\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ADDITIONS FOR WEEKLY SUMMARY\r\n \r\n \r\n \r\n \r\n \r\n \r\n Orders\r\n \r\n Week\r\n MTD\r\n YTD\r\n \r\n \r\n Registrations\r\n \r\n MTD\r\n YTD\r\n \r\n \r\n\r\n \r\n \r\n Truck\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n\r\n Truck\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n Van\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n\r\n Van\r\n -\r\n -\r\n \r\n \r\n \r\n \r\n MAxus\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n\r\n MAxus\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n UNSOLD NEW VEHICLE STOCKS\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n TRUCK\r\n \r\n \r\n \r\n \r\n \r\n \r\n Model\r\n \r\n Physical\r\n On-Order\r\n Total\r\n \r\n \r\n\r\n \r\n \r\n Canter\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Total\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Updated\r\n \r\n \r\n \r\n \r\n \r\n \r\n Oldest 3 (Days)\r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Stock Value\r\n Value\r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n Value\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Sold Stock Wip\r\n -\r\n \r\n \r\n \r\n \r\n Total\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n MB VAN\r\n \r\n \r\n \r\n \r\n \r\n \r\n Model\r\n \r\n Physical\r\n On-Order\r\n Total\r\n \r\n \r\n\r\n \r\n \r\n Canter\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Total\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Updated\r\n \r\n \r\n \r\n \r\n \r\n \r\n Oldest 3 (Days)\r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Stock Value\r\n Value\r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n Value\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Sold Stock Wip\r\n -\r\n \r\n \r\n \r\n \r\n Total\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n MAXUS\r\n \r\n \r\n \r\n \r\n \r\n \r\n Model\r\n \r\n Physical\r\n On-Order\r\n Total\r\n \r\n \r\n\r\n \r\n \r\n Canter\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Total\r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Updated\r\n \r\n \r\n \r\n \r\n \r\n \r\n Oldest 3 (Days)\r\n \r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n -\r\n -\r\n -\r\n \r\n \r\n\r\n \r\n \r\n -\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Stock Value\r\n Value\r\n \r\n \r\n\r\n \r\n \r\n {/* New */}\r\n Value\r\n -\r\n \r\n \r\n\r\n \r\n \r\n Sold Stock Wip\r\n -\r\n \r\n \r\n \r\n \r\n Total\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n USED VEHICLE STOCKS\r\n \r\n \r\n \r\n \r\n \r\n \r\n No Units\r\n Value\r\n \r\n Oldest 5 (Days)\r\n \r\n \r\n \r\n\r\n \r\n \r\n Truck\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Van\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Maxus\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n -\r\n \r\n \r\n Total\r\n -\r\n -\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n />\r\n \r\n \r\n {/* {state.showModal ? (\r\n \r\n \r\n \r\n ) : null} */}\r\n {state.showModal ? : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ReportVehiclesServiceComponent;\r\n","import React, { useMemo, useState } from 'react';\r\nimport ReportGijgoGrid from '../GijgoForReportsScreen';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { Grid, InputLabel } from '@material-ui/core';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport moment from 'moment';\r\nimport ReactDOM from 'react-dom';\r\nimport { VehicleModalDetail } from './vehicleDetailsModal';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reports', path: '/ReportsDashboard' },\r\n { name: 'Vehicles', active: true },\r\n { name: 'MOT Due', active: true }\r\n];\r\n\r\nconst baseColumns = [\r\n {\r\n field: 'reg',\r\n title: 'Reg Number',\r\n width: 120,\r\n filterable: true,\r\n sortable: true\r\n },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n sortable: true,\r\n width: 130,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'fn',\r\n sortable: true,\r\n title: 'Franchise',\r\n width: 130,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'm',\r\n sortable: true,\r\n title: 'Model',\r\n width: 120,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'mot',\r\n sortable: true,\r\n title: 'MOT Date',\r\n width: 120,\r\n type: 'dateTime',\r\n renderer: function (value, record) {\r\n if (record.mot != null) {\r\n return moment(record.mot).format('DD-MMM-YYYY');\r\n }\r\n return '-';\r\n },\r\n filterable: true\r\n },\r\n\r\n {\r\n field: 'sc',\r\n title: 'Customer',\r\n width: 120,\r\n\r\n filterable: true,\r\n sortable: true\r\n }\r\n // {\r\n // field: 'vn',\r\n // title: 'Phone',\r\n // width: 120,\r\n\r\n // filterable: true,\r\n // sortable: true\r\n // }\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 ReportVehiclesMOTDueComponent = (props) => {\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n showModal: false,\r\n selectedData: {}\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 editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n {/* HandelSendMessage(record)} toolTipTitle=\"Add Action Log\"> */}\r\n \r\n setState((st) => ({\r\n ...st,\r\n selectedData: record || {},\r\n showModal: true\r\n }))\r\n }\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colRegNo = col.find((m) => m.field === 'reg');\r\n if (colRegNo) {\r\n colRegNo.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: !st.showModal\r\n }));\r\n };\r\n\r\n const baseUrl = `Vehicle/ReportingGetVehiceMOTDue?StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n />\r\n \r\n \r\n {state.showModal ? : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ReportVehiclesMOTDueComponent;\r\n","import React, { useMemo, useState } from 'react';\r\nimport ReportGijgoGrid from '../GijgoForReportsScreen';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport { Grid, InputLabel } from '@material-ui/core';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport moment from 'moment';\r\nimport ReactDOM from 'react-dom';\r\nimport { VehicleModalDetail } from './vehicleDetailsModal';\r\nimport DialogComp from '../../../../Core/Controls/Dialog/DialogComp';\r\n\r\nconst crumbs = (val, menuPermissionCounter) => {\r\n let list = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reports', path: '/ReportsDashboard' },\r\n { name: 'Vehicles', active: true },\r\n { name: 'Sefety Check Due', active: true }\r\n ];\r\n\r\n return list;\r\n};\r\n\r\nconst baseColumns = [\r\n {\r\n field: 'reg',\r\n title: 'Reg Number',\r\n width: 120,\r\n filterable: true,\r\n sortable: true\r\n },\r\n {\r\n title: 'Vehicle Description',\r\n field: 'vd',\r\n sortable: true,\r\n width: 130,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'fn',\r\n sortable: true,\r\n title: 'Franchise',\r\n width: 130,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'm',\r\n sortable: true,\r\n title: 'Model',\r\n width: 120,\r\n\r\n filterable: true\r\n },\r\n {\r\n field: 'scd',\r\n title: 'Safety Check',\r\n width: 120,\r\n type: 'dateTime',\r\n renderer: function (value, record) {\r\n if (record.scd != null) {\r\n return moment(record.scd).format('DD-MMM-YYYY');\r\n }\r\n return '-';\r\n },\r\n filterable: true,\r\n sortable: true\r\n },\r\n {\r\n field: 'sc',\r\n title: 'Customer',\r\n width: 120,\r\n\r\n filterable: true,\r\n sortable: true\r\n }\r\n // {\r\n // field: 'vn',\r\n // title: 'Phone',\r\n // width: 120,\r\n\r\n // filterable: true,\r\n // sortable: true\r\n // }\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 ReportVehiclesSafetyCheckDueComponent = (props) => {\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n showModal: false,\r\n selectedData: {}\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 editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n {/* HandelSendMessage(record)} toolTipTitle=\"Add Action Log\"> */}\r\n \r\n setState((st) => ({\r\n ...st,\r\n selectedData: record || {},\r\n showModal: true\r\n }))\r\n }\r\n >\r\n {value}\r\n \r\n {/* */}\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colRegNo = col.find((m) => m.field === 'reg');\r\n if (colRegNo) {\r\n colRegNo.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: !st.showModal\r\n }));\r\n };\r\n\r\n const baseUrl = `Vehicle/ReportingGetSafetyCheckDue?StartDate=${state.startDate}&EndDate=${state.endDate}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n />\r\n \r\n \r\n {/* {state.showModal ? (\r\n \r\n \r\n \r\n ) : null} */}\r\n {state.showModal ? : null}\r\n
\r\n );\r\n};\r\n\r\nexport default ReportVehiclesSafetyCheckDueComponent;\r\n","import { Grid } from '@material-ui/core';\r\nimport React, { useState } from 'react';\r\nimport DataGridComp from '../../../../Core/Grid';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\n\r\nconst VehicleDueDetailsList = (props) => {\r\n const [state, setState] = useState({\r\n rows: props.selectedVehicleDueList.map((p, i) => ({ ...p, id: i })) || []\r\n });\r\n\r\n const column_new = [\r\n {\r\n field: 'id',\r\n headerName: 'ID',\r\n width: 130,\r\n sortable: false,\r\n hide: true\r\n },\r\n\r\n { field: 'reg', sortable: false, headerName: 'Vehicle Reg', width: 140, align: 'center' },\r\n { field: 'dueType', sortable: false, headerName: 'Due Type', width: 120, align: 'center' },\r\n { field: 'vd', sortable: false, headerName: 'Vehicle Description', width: 250 },\r\n { field: 'fn', sortable: false, headerName: 'Franchise', width: 250 },\r\n { field: 'm', sortable: false, headerName: 'Model', width: 250 },\r\n { field: 'sc', sortable: false, headerName: 'Customer', width: 250 }\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\nexport default VehicleDueDetailsList;\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport {\r\n ButtonGroup,\r\n Grid,\r\n IconButton,\r\n LinearProgress,\r\n Tooltip,\r\n Badge,\r\n Card,\r\n CardHeader,\r\n CardContent,\r\n Typography,\r\n TextField,\r\n FormLabel,\r\n CircularProgress,\r\n Chip,\r\n Avatar\r\n} from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { TextBox } from '../../../../Core/FormInput';\r\nimport moment from 'moment';\r\n\r\nimport AspectRatioIcon from '@material-ui/icons/AspectRatio';\r\n\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { getReportingGetSafetyCheckDue, getReportingGetVehiceMOTDue, getReportingGetVehiceServices } from '../../../../Core/Service/ReportScreens-service';\r\nimport { VehicleModalDetail } from './vehicleDetailsModal';\r\nimport DialogComp from '../../../../Core/Modal/dialogModal';\r\nimport VehicleDueDetailsList from './VehicleDueDetailListModal';\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 height: '165px',\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 - 90);\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 cardRow: {\r\n padding: '3px',\r\n borderBottom: ' 1px dotted black',\r\n cursor: 'pointer',\r\n '&:nth-of-type(odd)': {\r\n background: '#E8E8E8'\r\n }\r\n },\r\n cardHeader: {\r\n height: '10px',\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n border: (props) => `1px solid ${props.portalMenuBarBackgroundColour}`,\r\n color: 'white',\r\n textAlign: 'left',\r\n padding: '10px !important'\r\n },\r\n loaderContainer: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n height: '100%',\r\n zIndex: 99,\r\n background: 'grey',\r\n opacity: '0.6'\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() - 10;\r\n let endYear = d.getFullYear() + 10;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ description: `${startYear}`, id: `${startYear}` });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst monthsList = formatters.constantMonthList();\r\n\r\nconst VehicleDueCheckCalendar = (props) => {\r\n const { portalSettings, showTopNavAndMenu, loggedIn, isTopNav, userRoles } = useContext(AppContext);\r\n const classes = useStyles({ ...props, ...portalSettings });\r\n const isCustomer = userRoles.includes('customer');\r\n const isInternal = userRoles.includes('internal');\r\n\r\n const [state, setState] = useState({\r\n filterList: [],\r\n branchList: [],\r\n branchCode: {},\r\n monthCode: monthsList[`${new Date().getMonth()}`],\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n dueTypeList: [\r\n { description: 'All', id: 'all' },\r\n { description: 'MOT', id: 'mot' },\r\n { description: 'Service', id: 'service' },\r\n { description: 'Safety', id: 'safety' }\r\n ],\r\n dueType: { description: 'All', id: 'all' },\r\n filterData: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = [];\r\n let startDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .startOf('month')\r\n .format('YYYY-MM-DD');\r\n let endDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .endOf('month')\r\n .format('YYYY-MM-DD');\r\n\r\n setState((st) => ({\r\n ...st,\r\n showLoader: true\r\n }));\r\n if (state.dueType.id === 'mot') {\r\n res = await getReportingGetVehiceMOTDue(startDate, endDate);\r\n setState((st) => ({\r\n ...st,\r\n allData: [...res.data.list].map((p) => ({ ...p, dueType: 'MOT' }))\r\n }));\r\n } else if (state.dueType.id === 'service') {\r\n res = await getReportingGetVehiceServices(startDate, endDate);\r\n setState((st) => ({\r\n ...st,\r\n allData: [...res.data.list].map((p) => ({ ...p, dueType: 'Service' }))\r\n }));\r\n } else if (state.dueType.id === 'safety') {\r\n res = await getReportingGetSafetyCheckDue(startDate, endDate);\r\n\r\n setState((st) => ({\r\n ...st,\r\n allData: [...res.data.list].map((p) => ({ ...p, dueType: 'Safety' }))\r\n }));\r\n } else {\r\n let pros = [];\r\n pros.push(\r\n getReportingGetVehiceMOTDue(startDate, endDate),\r\n getReportingGetVehiceServices(startDate, endDate),\r\n getReportingGetSafetyCheckDue(startDate, endDate)\r\n );\r\n let responses = await Promise.all(pros);\r\n if (responses[0].success && responses[1].success && responses[2].success) {\r\n setState((st) => ({\r\n ...st,\r\n allData: [\r\n ...responses[0].data.list.map((p) => ({ ...p, dueType: 'MOT' })),\r\n ...responses[1].data.list.map((p) => ({ ...p, dueType: 'Service' })),\r\n ...responses[2].data.list.map((p) => ({ ...p, dueType: 'Safety' }))\r\n ]\r\n }));\r\n }\r\n }\r\n }, [state.yearCode, state.monthCode, state.dueType]);\r\n\r\n useEffect(() => {\r\n let currentMonthDays = Array.from(Array(moment(`${state.yearCode.id}-${state.monthCode.id}`, 'YYYY-MM').daysInMonth()), (_, i) => {\r\n return {\r\n dayNo: i + 1,\r\n DayDate: moment([state.yearCode.id, state.monthCode.id - 1, i + 1]).format('DD-MM-YYYY'),\r\n events: []\r\n };\r\n });\r\n\r\n if (state.allData) {\r\n let tempCurrentMonthDays = [...currentMonthDays];\r\n\r\n state.allData.forEach((p) => {\r\n let compareDate = '';\r\n if (p.dueType === 'MOT') {\r\n compareDate = p.mot;\r\n } else if (p.dueType === 'Service') {\r\n compareDate = p.nsd;\r\n } else if (p.dueType === 'Safety') {\r\n compareDate = p.scd;\r\n }\r\n let index = tempCurrentMonthDays.findIndex((o) => o.DayDate == moment(compareDate).format('DD-MM-YYYY'));\r\n if (index > -1) {\r\n tempCurrentMonthDays[index].events.push({ ...p });\r\n }\r\n });\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.currentMonthDays = currentMonthDays;\r\n newSt.filterData = [...tempCurrentMonthDays];\r\n newSt.showLoader = false;\r\n return newSt;\r\n });\r\n }\r\n }, [state.allData]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const showDetailListModalHandler = (list, date) => {\r\n setState((st) => {\r\n return { ...st, showDetailListModal: true, selectedVehicleDueList: list, selectedVehicleDueListDate: date };\r\n });\r\n };\r\n\r\n const closeDetailModalHandler = (val) => {\r\n setState((st) => {\r\n return { ...st, showDetailModal: false, showDetailListModal: false };\r\n });\r\n };\r\n\r\n const handleModal = () => {\r\n setState((st) => ({\r\n ...st,\r\n showModal: !st.showModal\r\n }));\r\n };\r\n\r\n const handleOpenModal = (selectedValues) => {\r\n setState((st) => ({\r\n ...st,\r\n selectedData: selectedValues || {},\r\n showModal: true\r\n }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Select Month\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Year\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n {!isCustomer && (\r\n \r\n Due Check List\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n )}\r\n \r\n {state.showLoader && (\r\n \r\n \r\n \r\n )}\r\n \r\n {state.filterData.map((o, i) => {\r\n return (\r\n \r\n \r\n \r\n {o.events.length !== 0 && (\r\n \r\n \r\n showDetailListModalHandler(\r\n o.events,\r\n `${i + 1} ${state.monthCode.description} ${state.yearCode.description}`\r\n )\r\n }\r\n />\r\n \r\n )}\r\n \r\n }\r\n titleTypographyProps={{ variant: 'body1' }}\r\n title={`${i + 1} ${state.monthCode.description} ${state.yearCode.description}`}\r\n className={classes.cardHeader}\r\n >\r\n \r\n {o.events.length > 0 ? (\r\n o.events.map((k) => {\r\n return (\r\n handleOpenModal(k)}\r\n >\r\n {/* \r\n ⓘ\r\n */}\r\n\r\n \r\n \r\n {/* */}\r\n {k.dueType} - {k.reg} - {k.dc}\r\n {/* */}\r\n \r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n No bookings
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {state.uniqueDates.map((date) => {\r\n return {date};\r\n })}\r\n \r\n \r\n \r\n {state.CombinedList.length > 0 ? (\r\n state.CombinedList.map((row, i) => (\r\n \r\n \r\n {row.name}\r\n \r\n {row.data.map((k, i) => {\r\n let find = state.uniqueDates.findIndex((n) => n === k.monthYear);\r\n if (find > -1) {\r\n return (\r\n handeleDataClick(k)} style={{ cursor: 'pointer' }}>\r\n {k.days || '-'}\r\n {' / '}\r\n {k.hr || '-'}\r\n {' / '}\r\n {k.min || '-'}\r\n \r\n );\r\n } else {\r\n return -;\r\n }\r\n })}\r\n \r\n ))\r\n ) : (\r\n \r\n \r\n NO Record Found\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 { GetInternalWorkflowsAvgTimesDashboard } from '../../../../Core/Service/dashbordService';\r\nimport { DatePicker, MultipleSelectWithMoreOp, Multiselect } from '../../../../Core/FormInput';\r\nimport { Card, CircularProgress, FormLabel, Grid, InputLabel, makeStyles, withStyles } from '@material-ui/core';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport { Table, TableBody, TableContainer, TableHead, TableRow, Paper, TableCell } from '@material-ui/core';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\n\r\nimport moment from 'moment';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\nimport AvgTimeTable from './avgTimeTable';\r\nimport BreadCrumbs from '../../../../Core/Controls/Breadcrumb';\r\nimport CircularIndeterminate from '../../ReportsScreens/ReportsScreens/BudgetCore/loader';\r\nimport { GetBranchDeportmentScreenDropdowns } from '../../../../Core/Service/reportService';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.common.black,\r\n color: theme.palette.common.white\r\n },\r\n body: {\r\n border: 'none',\r\n fontSize: 14,\r\n padding: 9\r\n }\r\n}))(TableCell);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n background: '#f5f5f5',\r\n border: '2px solid #f5f5f5 ',\r\n Opacity: 0.9,\r\n minWidth: 110,\r\n padding: '5px 0px',\r\n margin: 3,\r\n borderRadius: 3,\r\n cursor: 'pointer'\r\n },\r\n cardworkflow: {\r\n textAlign: 'left',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n padding: '5px 20px'\r\n },\r\n table: {\r\n minWidth: 700\r\n }\r\n}));\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Reports', active: true },\r\n { name: 'Workflows Average Times', path: '/', active: true }\r\n];\r\nconst colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#8AE82D'];\r\nconst WorkflowAvgTimeDash = () => {\r\n let WorkFlowBtnElementscrollWidth = document.getElementById('WorkFlow-Btn');\r\n let startDate = moment().startOf('month').format('YYYY-MM-DD');\r\n let endDate = moment().format('YYYY-MM-DD');\r\n\r\n const classes = useStyles();\r\n const [WindowWidths] = useWindowSize();\r\n\r\n function scrollbarVisible(element) {\r\n return element?.scrollWidth > element?.clientWidth;\r\n }\r\n let history = useHistory();\r\n\r\n const [state, setState] = useState({\r\n startDate: startDate,\r\n endDate: endDate,\r\n workflowTopList: [],\r\n isShowScrollArrow: true,\r\n branchCard: [],\r\n branchList: [],\r\n tableList: [],\r\n uniqueBranchName: [],\r\n tableData: [],\r\n uniqueWorkflow: [],\r\n showLoader: true,\r\n groupIds: []\r\n });\r\n\r\n const [temp, tempOption] = useState({\r\n groupVal: []\r\n });\r\n\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n isShowScrollArrow: scrollbarVisible(WorkFlowBtnElementscrollWidth)\r\n }));\r\n }, [WindowWidths, WorkFlowBtnElementscrollWidth?.scrollWidth]);\r\n\r\n useEffect(async () => {\r\n let res = await GetBranchDeportmentScreenDropdowns();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: res.data?.branchList || []\r\n }));\r\n }\r\n }, []);\r\n\r\n const handleChanges = (event, value) => {\r\n tempOption((st) => ({ ...st, groupVal: value }));\r\n\r\n setState((st) => {\r\n const nst = { ...st, groupIds: value.map((c) => c.id) };\r\n return nst;\r\n });\r\n };\r\n const scrollNext = (id) => {\r\n document.getElementById('WorkFlow-Btn').scrollBy({ left: 100, top: 0, behavior: 'smooth' });\r\n };\r\n\r\n const scrollPrev = (id) => {\r\n document.getElementById('WorkFlow-Btn').scrollBy({ left: -100, top: 0, behavior: 'smooth' });\r\n };\r\n const GetWorkflowsAvgTimes = async () => {\r\n if ((state.startDate, state.endDate)) {\r\n // setState((st) => ({ ...st, showLoader: true }));\r\n let res = await GetInternalWorkflowsAvgTimesDashboard(state.startDate, state.endDate, state.groupIds);\r\n if (res.success) {\r\n let allData = [...res.data?.allData] || [];\r\n let allTableBranches = allData.map((n) => n.brShortName);\r\n let uniqueBranchName = [...new Set(allTableBranches)];\r\n let branchHistory = [...res.data?.branchHistory] || [];\r\n let workflowHistory = [...res.data?.workflowHistory] || [];\r\n\r\n if (branchHistory.length > 0) {\r\n let BrGraphData = [];\r\n [...branchHistory].forEach((q) => {\r\n let isIDExist = BrGraphData.findIndex((t) => t.name == q.name);\r\n if (isIDExist > -1) {\r\n BrGraphData[isIDExist][q.brShortName] = q.hr;\r\n } else {\r\n BrGraphData.push({\r\n name: q.name,\r\n [q.brShortName]: q.hr\r\n });\r\n }\r\n });\r\n\r\n const tableData = {};\r\n for (const item of [...res.data?.branchHistory]) {\r\n if (!tableData[item.name]) {\r\n tableData[item.name] = { id: item.wId };\r\n }\r\n tableData[item.name][`${item.brShortName}id`] = item.brId;\r\n tableData[item.name][item.brShortName] = (tableData[item.name][item.brShortName] || 0) + item.hr;\r\n }\r\n const uniqueWorkflow = Object.keys(tableData);\r\n\r\n console.log(tableData, 'tableData');\r\n setState((st) => ({\r\n ...st,\r\n branchCard: branchHistory || [],\r\n tableData: tableData || [],\r\n uniqueWorkflow: uniqueWorkflow || [],\r\n BrGraphData: BrGraphData || [],\r\n uniqueBranchName: uniqueBranchName || []\r\n }));\r\n }\r\n setState((st) => ({\r\n ...st,\r\n workflowTopList: workflowHistory || [],\r\n tableList: allData || [],\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n GetWorkflowsAvgTimes();\r\n }, [state.startDate, state.endDate, state.groupIds]);\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 const handelCardClick = (wID) => {\r\n localStorage.setItem('currentWorkflowId', wID);\r\n let brIds = `${state.groupIds.length > 0 ? `&BranchIds=${state.groupIds}` : ''}`;\r\n history.push(`/dashgrid?startDate=${state.startDate}&endDate=${state.endDate}&fromReports=Yes${brIds}`);\r\n };\r\n\r\n const handelBranchClick = (wr, br) => {\r\n // localStorage.setItem('FiltterParams', JSON.stringify({ branchShortName: br }));\r\n localStorage.setItem('currentWorkflowId', state.tableData[wr]['id']);\r\n history.push(`/dashgrid?startDate=${state.startDate}&endDate=${state.endDate}&fromReports=Yes&BranchIds=${state.groupIds}`);\r\n };\r\n return (\r\n \r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.isShowScrollArrow && (\r\n
scrollPrev()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n {state.workflowTopList.map((m, i) => {\r\n return (\r\n
\r\n
{\r\n handelCardClick(m.wId);\r\n }}\r\n >\r\n \r\n
{m?.name}
\r\n
Days\r\n
{m?.days}
\r\n
Hours\r\n
{m?.hr}
\r\n
Minutes\r\n
{m?.min}
\r\n
\r\n );\r\n })}\r\n
\r\n {state.isShowScrollArrow && (\r\n
scrollNext()} className=\"ScrollArrow-Container\">\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {state.uniqueWorkflow.map((workflow) => {\r\n return {workflow};\r\n })}\r\n \r\n \r\n \r\n {state.uniqueBranchName.length > 0 ? (\r\n state.uniqueBranchName.map((br, i) => (\r\n \r\n \r\n {br}\r\n \r\n {state?.uniqueWorkflow.length > 0 &&\r\n state?.uniqueWorkflow.map((wr) => {\r\n return (\r\n handelBranchClick(wr, br)}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n \r\n {state.tableData[wr][br] || 0}\r\n \r\n \r\n );\r\n })}\r\n \r\n ))\r\n ) : (\r\n \r\n \r\n NO Record Found\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n
\r\n
\r\n \r\n \r\n {/* \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Shift\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n */}\r\n\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Shift\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {Object.keys(colorConfig).map(function (key, i) {\r\n return (\r\n \r\n {colorConfig[key].name}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {calender.length > 0 ? (\r\n \r\n {calender.map((a, i) => (\r\n \r\n \r\n \r\n | \r\n \r\n {a.monthName}\r\n \r\n | \r\n
\r\n \r\n | Mon | \r\n Tue | \r\n Wed | \r\n Thu | \r\n Fri | \r\n Sat | \r\n Sun | \r\n
\r\n {a.monthData.map((p) => (\r\n \r\n {p.map((q) => (\r\n \r\n {q !== null ? q.day : ''}\r\n \r\n ))}\r\n
\r\n ))}\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n
\r\n \r\n {state.screenMsg}\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {state.reasonForXvail.map((q) => {\r\n return (\r\n \r\n {q.description}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {state.dayHoursList.map((p) => {\r\n return (\r\n \r\n \r\n {p.time}\r\n \r\n
\r\n
\r\n \r\n \r\n {/* \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Resource\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n */}\r\n \r\n \r\n Branch\r\n \r\n \r\n \r\n \r\n \r\n Resource\r\n \r\n \r\n \r\n \r\n \r\n Year\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.reasonForXvail.map((j) => {\r\n return (\r\n \r\n {j.description}
\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {calender.length > 0 ? (\r\n \r\n {calender.map((a, i) => (\r\n \r\n \r\n \r\n | \r\n \r\n {a.monthName}\r\n \r\n | \r\n
\r\n \r\n | Mon | \r\n Tue | \r\n Wed | \r\n Thu | \r\n Fri | \r\n Sat | \r\n Sun | \r\n
\r\n {a.monthData.map((p) => (\r\n \r\n {p.map((q) => (\r\n showDayDataModal(q) : () => false}\r\n >\r\n {q !== null ? q.day : ''}\r\n \r\n ))}\r\n
\r\n ))}\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n
\r\n \r\n {state.screenMsg}\r\n \r\n \r\n )}\r\n \r\n \r\n {state.showDayDataModal && (\r\n
\r\n \r\n \r\n )}\r\n
\r\n | \r\n onJobSelect(e.target.checked, job.headerRecordID)}\r\n />\r\n | \r\n {job.wipNumber} | \r\n {job.registration} | \r\n {job.customerName} | \r\n {job.dateDueIn ? moment(job.dateDueIn).format('LLL') : ' - '} | \r\n {job.workflow} | \r\n
\r\n );\r\n};\r\n\r\nconst MatchingJobsTable = ({ jobs, loading, onJobSelect }) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n | \r\n WIP | \r\n Reg. | \r\n Customer | \r\n Due In | \r\n Workflow | \r\n
\r\n \r\n \r\n {jobs.map((j, i) => (\r\n \r\n ))}\r\n {jobs.length === 0 && (\r\n \r\n | {loading ? 'Loading...' : 'No record found.'} | \r\n
\r\n )}\r\n \r\n
\r\n
\r\n \r\n WIP No: {state.wip} Reg No: {state.reg}\r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.getUrl && !_.isEmpty(state.tempObj) && (\r\n \r\n )}\r\n \r\n \r\n {state.showFilter ? (\r\n
closeDialog(false)} overflow=\"auto\" fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.jobNotes ? (\r\n
handleJobNotes([], false)}\r\n onNotesAdded={() => {\r\n setState((st) => {\r\n const newSt = { ...st };\r\n newSt.isReload = new Date();\r\n return newSt;\r\n });\r\n }}\r\n />\r\n ) : null}\r\n \r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {state.ScreenLabel}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n YTD-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / ({m.janUnit})\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / ({m.febUnit})\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / ({m.marUnit})\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / ({m.aprUnit})\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / ({m.mayUnit})\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / ({m.junUnit})\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / ({m.julUnit})\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / ({m.augUnit})\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / ({m.sepUnit})\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / ({m.octUnit})\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / ({m.novUnit})\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / ({m.decUnit})\r\n \r\n handleRedirect(11, m.ac)}>\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.ytdProfit)} / ({m.ytdUnit})\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / ({m.janUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / ({m.febUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / ({m.marUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / ({m.aprUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / ({m.mayUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / ({m.junUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / ({m.julUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / ({m.augUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / ({m.sepUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / ({m.octUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / ({m.novUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / ({m.decUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.ytdProfit)} / ({m.ytdUnit})\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n \r\n {n.name} : {n.value}\r\n \r\n {/* {n.value} */}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {state.ScreenLabel}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n YTD-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)}{' '} */}\r\n {m.janUnit}\r\n
\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)}{' '} */}\r\n {m.febUnit}\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)}{' '} */}\r\n {m.marUnit}\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)}{' '} */}\r\n {m.aprUnit}\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)}{' '} */}\r\n {m.mayUnit}\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)}{' '} */}\r\n {m.junUnit}\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)}{' '} */}\r\n {m.julUnit}\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)}{' '} */}\r\n {m.augUnit}\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)}{' '} */}\r\n {m.sepUnit}\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)}{' '} */}\r\n {m.octUnit}\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)}{' '} */}\r\n {m.novUnit}\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)}{' '} */}\r\n {m.decUnit}\r\n \r\n handleRedirect(11, m.ac)}>\r\n {m.ytdUnit}\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)}{' '} */}\r\n {m.janUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)}{' '} */}\r\n {m.febUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)}{' '} */}\r\n {m.marUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)}{' '} */}\r\n {m.aprUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)}{' '} */}\r\n {m.mayUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)}{' '} */}\r\n {m.junUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)}{' '} */}\r\n {m.julUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)}{' '} */}\r\n {m.augUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)}{' '} */}\r\n {m.sepUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)}{' '} */}\r\n {m.octUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)}{' '} */}\r\n {m.novUnit}\r\n \r\n \r\n \r\n \r\n {/* {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)}{' '} */}\r\n {m.decUnit}\r\n \r\n \r\n \r\n \r\n {m.ytdUnit}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name}\r\n : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {state.ScreenLabel}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state?.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n YTD-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)}{' '}\r\n ({m.janUnit})\r\n
\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)}{' '}\r\n ({m.febUnit})\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)}{' '}\r\n ({m.marUnit})\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)}{' '}\r\n ({m.aprUnit})\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)}{' '}\r\n ({m.mayUnit})\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)}{' '}\r\n ({m.junUnit})\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)}{' '}\r\n ({m.julUnit})\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)}{' '}\r\n ({m.augUnit})\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)}{' '}\r\n ({m.sepUnit})\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)}{' '}\r\n ({m.octUnit})\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)}{' '}\r\n ({m.novUnit})\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)}{' '}\r\n ({m.decUnit})\r\n \r\n handleRedirect(11, m.ac)}>\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.ytdProfit)} / ({m.ytdUnit})\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)}{' '}\r\n ({m.janUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)}{' '}\r\n ({m.febUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)}{' '}\r\n ({m.marUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)}{' '}\r\n ({m.aprUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)}{' '}\r\n ({m.mayUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)}{' '}\r\n ({m.junUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)}{' '}\r\n ({m.julUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)}{' '}\r\n ({m.augUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)}{' '}\r\n ({m.sepUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)}{' '}\r\n ({m.octUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)}{' '}\r\n ({m.novUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)}{' '}\r\n ({m.decUnit})\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.ytdProfit)} / ({m.ytdUnit})\r\n \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.fllteredList.length > 0 ? ( */}\r\n
\r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {state.ScreenLabel}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n OP\r\n \r\n \r\n \r\n EV TARGET\r\n \r\n \r\n \r\n handleRedirect(1)}>\r\n \r\n Q1\r\n \r\n {state?.opList?.q1}\r\n \r\n \r\n \r\n \r\n \r\n {state?.bugetList?.q1}\r\n \r\n handleRedirect(2)}>\r\n \r\n Q2\r\n \r\n {state?.opList?.q2}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {state?.bugetList?.q2}\r\n \r\n handleRedirect(3)}>\r\n \r\n Q3\r\n \r\n {state?.opList?.q3}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {state?.bugetList?.q3}\r\n \r\n handleRedirect(4)}>\r\n \r\n Q4\r\n \r\n {state?.opList?.q4}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {state?.bugetList?.q4}\r\n \r\n\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {state.TotalOP}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {state.Totalbudget}\r\n
\r\n \r\n \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.showSearchModal ? (\r\n <>\r\n {state.selectedBranchID != null ? (\r\n
handelSearchWIPModal(false, {})}\r\n onClickingLink={LinkJobWithWIPs}\r\n data={state.data}\r\n />\r\n ) : (\r\n handelSearchWIPModal(false, {})}>\r\n handelSearchWIPModal(false, {})} onUpdate={() => handelAddUpdate()} />\r\n \r\n )}\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isReload={state.isReload}\r\n AddBtn={addButton}\r\n />\r\n \r\n \r\n
\r\n \r\n//
\r\n// \r\n// = 600 ? 20 : 0,\r\n// fontWeight: 600,\r\n// fontSize: width >= 600 ? 24 : 18\r\n// }}\r\n// >\r\n// {'ORDER TAKE'}\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Kerridge\r\n// Quarter 1\r\n// \r\n// Citan\r\n// \r\n// \r\n// Vito\r\n// \r\n// \r\n// Sprinter\r\n// \r\n// \r\n// Chassis\r\n// \r\n// \r\n// eCitan\r\n// \r\n// \r\n// eVito Van\r\n// \r\n// \r\n// eVito Tourer\r\n// \r\n// \r\n// eSprinter\r\n// \r\n// \r\n// Q1 Total\r\n// \r\n// %\r\n// eVan %\r\n// \r\n// Quarter 1{' '}\r\n// \r\n// \r\n// 2023\r\n// \r\n// Registrations\r\n// Activation\r\n// Total Margin\r\n// PPU\r\n// 2023 WIP\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// August 13, 2023\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// T\r\n// F\r\n// %\r\n// eVan %\r\n// WIP \r\n// Orders\r\n// T\r\n// F\r\n// Variance\r\n// WIP \r\n// Orders\r\n// YTD\r\n// \r\n// YTD\r\n// YTD\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// arl-115\r\n// Abigail Rickell\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Total\r\n// 0\r\n// 0\r\n// 3\r\n// 3\r\n// 0\r\n// 0\r\n// 4\r\n// 4\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 0\r\n// 1\r\n// 7\r\n// 8 \r\n// 114%\r\n// \r\n// 0 \r\n// 6\r\n// 9\r\n// 11\r\n// 122%\r\n// 1 \r\n// 6\r\n// 10\r\n// \r\n// £17,620\r\n// £1,762\r\n// 1\r\n// \r\n// \r\n//
\r\n// \r\n// \r\n// \r\n//
\r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {'ORDER TAKE '}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {'REGISTRATION'}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n } aria-controls=\"panel1a-content\" id=\"panel1a-header\">\r\n {label}\r\n \r\n {children}\r\n \r\n //
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n
\r\n \r\n \r\n \r\n \r\n ORDER TAKE\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.dayOrdersUnits)}\r\n \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.dayOrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n MTD\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.mtdOrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.mtdOrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n YTD \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.ytdOrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.ytdOrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n QTR-1\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q1OrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q1OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n QTR-2\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q2OrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q2OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n QTR-3\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q3OrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q3OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={4} className=\"Cursor\" onClick={handleOrderTakeRedirect}>\r\n \r\n QTR-4\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q4OrdersUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q4OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n = 1633 ? 'space-between' : 'flex-start'}>\r\n {/* */}\r\n \r\n \r\n \r\n DAY\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.dayOrdersUnits)}\r\n \r\n \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.dayOrdersProfit, true)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n MTD\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.mtdOrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.mtdOrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n YTD \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.ytdOrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.ytdOrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n QTR-1\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q1OrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q1OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n QTR-2\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q2OrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q2OrdersProfit)})\r\n {' '}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n QTR-3\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q3OrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q3OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n QTR-4\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q4OrdersUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q4OrdersProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {/* */}\r\n \r\n \r\n )}\r\n\r\n {/* */}\r\n {/* //Stocking Cost Estimate */}\r\n \r\n \r\n {/* //REGISTRATIONS */}\r\n \r\n \r\n \r\n \r\n \r\n REGISTRATIONS\r\n \r\n \r\n \r\n\r\n \r\n 380 ? 6 : 12}\r\n sm={6}\r\n onClick={() => handleRegistrationRedirect(`Q${moment().quarter()}`)}\r\n className=\"CursorHov\"\r\n >\r\n \r\n MTD\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.mtdRegistrationsUnits)}\r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.mtdRegistrationsProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12}\r\n sm={6}\r\n onClick={() => handleRegistrationRedirect(`Q${moment().quarter()}`)}\r\n className=\"CursorHov\"\r\n >\r\n \r\n YTD \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.ytdRegistrationsUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.ytdRegistrationsProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleRegistrationRedirect('Q1')} className=\"CursorHov\">\r\n \r\n QTR-Q1\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q1RegistrationsUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q1RegistrationsAmount)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleRegistrationRedirect('Q2')} className=\"CursorHov\">\r\n \r\n QTR-Q2\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q2RegistrationsUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q2RegistrationsAmount)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleRegistrationRedirect('Q3')} className=\"CursorHov\">\r\n \r\n QTR-Q3\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q3RegistrationsUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q3RegistrationsAmount)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleRegistrationRedirect('Q4')} className=\"CursorHov\">\r\n \r\n QTR-Q4\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q4RegistrationsUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q4RegistrationsAmount)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {/* //INVOICED */}\r\n \r\n \r\n \r\n \r\n \r\n INVOICED\r\n \r\n \r\n \r\n\r\n \r\n 380 ? 6 : 12}\r\n sm={6}\r\n onClick={() => handleInvoicedRedirect(`Q${moment().quarter()}`)}\r\n className=\"CursorHov\"\r\n >\r\n \r\n MTD\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.mtdInvoicingUnits)}\r\n \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.mtdInvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12}\r\n sm={6}\r\n onClick={() => handleInvoicedRedirect(`Q${moment().quarter()}`)}\r\n className=\"CursorHov\"\r\n >\r\n \r\n YTD \r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.ytdInvoicingUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.ytdInvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n {/* *********\r\n ************\r\n *******************\r\n ******************\r\n ****************\r\n ********************\r\n *******************\r\n ***************\r\n ************* */}\r\n 380 ? 6 : 12} sm={6} onClick={() => handleInvoicedRedirect('Q1')} className=\"CursorHov\">\r\n \r\n QTR-Q1\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q1InvoicingUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q1InvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleInvoicedRedirect('Q2')} className=\"CursorHov\">\r\n \r\n QTR-Q2\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q2InvoicingUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q2InvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleInvoicedRedirect('Q3')} className=\"CursorHov\">\r\n \r\n QTR-Q3\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q3InvoicingUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q3InvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n 380 ? 6 : 12} sm={6} onClick={() => handleInvoicedRedirect('Q4')} className=\"CursorHov\">\r\n \r\n QTR-Q4\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.q4InvoicingUnits)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(dashobj.q4InvoicingProfit)})\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n Forecast\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Registration\r\n \r\n \r\n \r\n \r\n {moment().format('YYYY')}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.forecastRegCompleteUnit)}\r\n
\r\n \r\n \r\n \r\n \r\n {+moment().format('YYYY') + 1}\r\n \r\n {formatters.ThousandSeparatorWithoutZero(dashobj.forecastRegFutureUnit)}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Financial\r\n \r\n \r\n \r\n \r\n {moment().format('YYYY')}\r\n {formatters.ThousandSeparatorWithoutZero(dashobj.forecastfinancialMTD)}
\r\n \r\n \r\n \r\n \r\n {+moment().format('YYYY') + 1}\r\n {formatters.ThousandSeparatorWithoutZero(dashobj.forecastfinancialYtd)}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n LEAGUE TABLE\r\n \r\n \r\n \r\n\r\n \r\n Name\r\n \r\n MTD\r\n \r\n \r\n YTD\r\n \r\n \r\n Q1\r\n \r\n \r\n Q2\r\n \r\n \r\n Q3\r\n \r\n \r\n Q4\r\n \r\n \r\n Points\r\n \r\n \r\n \r\n\r\n \r\n {state.league.map((k) => {\r\n return (\r\n HandelLeagueClick(k)} className=\"CursorHov\" hover>\r\n {k.name}\r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.mtdunit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.mtdProfit)})\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.ytdunit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.ytdProfit)})\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.q1Unit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.q1Profit)})\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.q2Unit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.q2Profit)})\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.q3Unit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.q3Profit)})\r\n \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(k.q4Unit)} \r\n \r\n ({formatters.CurrencyThousandSeparatorWithoutZero(k.q4Profit)})\r\n \r\n \r\n \r\n {k.p}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n LEAGUE TABLE\r\n \r\n {state.league.map((k) => (\r\n \r\n HandelLeagueClick()}\r\n >\r\n \r\n MTD : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.mtdProfit)} / {k.mtdunit}\r\n \r\n \r\n \r\n YTD : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.ytdProfit)} / {k.ytdunit}\r\n \r\n \r\n \r\n Q1 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.q1Profit)} / {k.q1Unit}\r\n \r\n \r\n \r\n Q2 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.q2Profit)} / {k.q2Unit}\r\n \r\n \r\n \r\n Q3 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.q3Profit)} / {k.q3Unit}\r\n \r\n \r\n \r\n Q4 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.q4Profit)} / {k.q4Unit}\r\n \r\n \r\n \r\n Points : \r\n {k.p}\r\n \r\n \r\n {/* \r\n
\r\n MTD : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.mtdProfit)} / {k.mtdunit}\r\n \r\n
\r\n
\r\n YTD : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.ytdProfit)} / {k.ytdunit}\r\n \r\n
\r\n
\r\n Q1 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.q1Profit)} / {k.q1Unit}\r\n \r\n
\r\n
\r\n Q2 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(+k.q2Profit)} / {k.q2Unit}\r\n \r\n
\r\n
\r\n Q3 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.q3Profit)} / {k.q3Unit}\r\n \r\n
\r\n
\r\n Q4 : \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.q4Profit)} / {k.q4Unit}\r\n \r\n
\r\n
\r\n Points : \r\n {k.p}\r\n
\r\n
\r\n
\r\n {/* */}\r\n \r\n {menuList.map((k) => (\r\n \r\n ))}\r\n \r\n {menuList.map((k) => (\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 League Table Points\r\n \r\n \r\n \r\n ({\r\n records: res.data?.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n // hideFilterRow={true}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n {state.showModal ? (\r\n \r\n setState((st) => ({\r\n ...st,\r\n showModal: false,\r\n record: {}\r\n }))\r\n }\r\n >\r\n \r\n setState((st) => ({\r\n ...st,\r\n record: {},\r\n showModal: false,\r\n isReload: new Date()\r\n }))\r\n }\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\n\r\nexport default LeagueTableScreen;\r\n","import React from 'react';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\n// import './salesDashboardSetting.scss';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useEffect } from 'react';\r\nimport { getFinanceList, getLeagueTableByData, getNewStockbyID, getUsedStockabyID } from '../../../../../Core/Service/SalesPerformance-service';\r\nimport { CircularProgress, Grid, InputLabel, Tab } from '@material-ui/core';\r\nimport { TabContext, TabList, TabPanel } from '@material-ui/lab';\r\nimport moment from 'moment';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SelectBox } from '../../../../../Core/FormInput';\r\nimport { react } from '@babel/types';\r\nimport { forEach } from 'lodash';\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n minWidth: 400,\r\n background: 'white',\r\n border: '2px solid white'\r\n },\r\n root: {\r\n flexGrow: 1\r\n // backgroundColor: theme.palette.background.paper\r\n }\r\n});\r\n\r\nconst year = new Date().getFullYear();\r\nconst years = Array.from(new Array(10), (val, index) => year - index);\r\nlet YearList = years.map((m) => ({\r\n name: m,\r\n id: m\r\n}));\r\n\r\nlet newMonth = ['jan', 'feb', 'mar', 'apr', 'may', 'june', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];\r\n\r\nlet Months = [\r\n {\r\n name: 'Q1',\r\n list: [\r\n { id: 0, month: 'jan', name: 'January' },\r\n { id: 1, month: 'feb', name: 'February' },\r\n { id: 2, month: 'mar', name: 'March' }\r\n ]\r\n },\r\n {\r\n name: 'Q2',\r\n list: [\r\n { id: 3, month: 'apr', name: 'April' },\r\n { id: 4, month: 'may', name: 'May' },\r\n { id: 5, month: 'june', name: 'June' }\r\n ]\r\n },\r\n {\r\n name: 'Q3',\r\n list: [\r\n { id: 6, month: 'jul', name: 'July' },\r\n { id: 7, month: 'aug', name: 'August' },\r\n { id: 8, month: 'sep', name: 'September' }\r\n ]\r\n },\r\n\r\n {\r\n name: 'Q4',\r\n list: [\r\n { id: 9, month: 'oct', name: 'October' },\r\n { id: 10, month: 'nov', name: 'November' },\r\n { id: 11, month: 'dec', name: 'December' }\r\n ]\r\n }\r\n];\r\n\r\nconst ManiHederCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: (props) => (props.getMonth === props.id ? 'green' : 'grey'),\r\n fontSize: 14,\r\n borderRight: '1px solid White',\r\n color: theme.palette.common.white,\r\n // color: theme.palette.common.white,\r\n padding: '5px'\r\n },\r\n body: {\r\n backgroundColor: 'lightgrey',\r\n fontSize: 14,\r\n borderRight: '1px solid white',\r\n color: theme.palette.common.black,\r\n padding: '5px'\r\n }\r\n}))(TableCell);\r\n\r\nconst BodyCell = withStyles((theme) => ({\r\n body: {\r\n fontSize: 12,\r\n fontWeight: 500,\r\n borderRight: '1px solid rgba(0,0,0,0.3)',\r\n padding: '3px 5px',\r\n fontWeight: 900\r\n }\r\n}))(TableCell);\r\nconst BlankCell = withStyles((theme) => ({\r\n body: {\r\n border: 'none',\r\n borderRight: '1px solid rgba(0,0,0,0.3)',\r\n padding: '3px 5px'\r\n }\r\n}))(TableCell);\r\n\r\nconst TotalCell = withStyles((theme) => ({\r\n body: {\r\n background: 'black',\r\n color: 'white',\r\n fontSize: 12,\r\n fontWeight: 500,\r\n borderRight: '1px solid white',\r\n padding: '5px 5px',\r\n fontWeight: 900\r\n }\r\n}))(TableCell);\r\n\r\nconst RenderMonth = (props) => {\r\n let { list, Actual, Forcost, Target, Variance, WIP, totalProfit, demo, fleet, order, uc, retail } = props;\r\n let TotalMonth = list.reduce((a, b) => {\r\n var index = a.find((item) => item);\r\n if (index) {\r\n index[Actual] += b[Actual];\r\n index[Forcost] += b[Forcost];\r\n index[Target] += b[Target];\r\n index[Variance] += b[Variance];\r\n index[WIP] += b[WIP];\r\n index[totalProfit] += b[totalProfit];\r\n index[demo] += b[demo];\r\n index[fleet] += b[fleet];\r\n index[order] += b[order];\r\n index[uc] += b[uc];\r\n index[retail] += b[retail];\r\n\r\n return a;\r\n }\r\n a.push({ ...b });\r\n return a;\r\n }, []);\r\n\r\n const getMonth = moment().month();\r\n const classes = useStyles();\r\n let Header = ['', 'Target', 'Actual', 'WIP', 'Forecast', 'Variance'];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.length == 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n list?.map((o, i) => (\r\n \r\n {o.md}\r\n {formatters.ThousandSeparatorWithoutZero(o[Target])}\r\n {formatters.ThousandSeparatorWithoutZero(o[Actual])}\r\n {formatters.ThousandSeparatorWithoutZero(o[WIP])}\r\n {formatters.ThousandSeparatorWithoutZero(o[Forcost])}\r\n\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o[Variance])}\r\n \r\n \r\n ))\r\n )}\r\n \r\n \r\n {TotalMonth.map((t) => (\r\n \r\n Total\r\n {formatters.ThousandSeparatorWithoutZero(t[Target]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[Actual]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[WIP]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[Forcost]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[Variance]) || 0}\r\n \r\n ))}\r\n \r\n {list?.length > 0 && (\r\n \r\n \r\n Total profit\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][totalProfit]) || 0}\r\n \r\n \r\n Profit per unit \r\n \r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][totalProfit] / TotalMonth[0][Actual]) || 0}\r\n \r\n \r\n \r\n Total orders \r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][order]) || 0}\r\n \r\n \r\n Unique Customer\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][uc]) || 0}\r\n Profit\r\n \r\n \r\n Fleet\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][fleet])}\r\n {Math.round((TotalMonth[0][fleet] / TotalMonth[0][Actual]) * 100) || 0}%\r\n \r\n \r\n Retail\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][retail])}\r\n {Math.round((TotalMonth[0][retail] / TotalMonth[0][Actual]) * 100) || 0}%\r\n \r\n \r\n Demo\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0][demo])}\r\n {Math.round((TotalMonth[0][demo] / TotalMonth[0][Actual]) * 100) || 0}%\r\n \r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\nconst RenderQuater = (props) => {\r\n const { list, m1, m2, m3 } = props;\r\n let Arr = [];\r\n let TotalList = list.forEach((q) => {\r\n Arr.push({\r\n totalTarget: q[`${m1}Target`] + q[`${m2}Target`] + q[`${m3}Target`],\r\n totalActual: q[`${m1}WIP`] + q[`${m2}WIP`] + q[`${m3}WIP`],\r\n totalWIP: q[`${m1}WIP`] + q[`${m2}WIP`] + q[`${m3}WIP`],\r\n totalForcost: q[`${m1}Forcost`] + q[`${m2}Forcost`] + q[`${m3}Forcost`],\r\n totalVariance: q[`${m1}Variance`] + q[`${m2}Variance`] + q[`${m3}Variance`],\r\n totalActualProfit: q[`${m1}ActualProfit`] + q[`${m2}ActualProfit`] + q[`${m3}ActualProfit`],\r\n totalOrders: q[`${m1}Orders`] + q[`${m2}Orders`] + q[`${m3}Orders`],\r\n totalUniqueCustomers: q[`${m1}UniqueCustomers`] + q[`${m2}UniqueCustomers`] + q[`${m3}UniqueCustomers`],\r\n totalfleet: q[`${m1}Fleet`] + q[`${m2}Fleet`] + q[`${m3}Fleet`],\r\n totalRetail: q[`${m1}Retail`] + q[`${m2}Retail`] + q[`${m3}Retail`],\r\n totalDemo: q[`${m1}Demo`] + q[`${m2}Demo`] + q[`${m3}Demo`],\r\n md: q.md\r\n });\r\n });\r\n\r\n let TotalMonth = Arr.reduce((a, b) => {\r\n var index = a.find((item) => item);\r\n if (index) {\r\n index.totalTarget += b.totalTarget;\r\n index.totalActual += b.totalActual;\r\n index.totalWIP += b.totalWIP;\r\n index.totalVariance += b.totalVariance;\r\n index.totalForcost += b.totalForcost;\r\n index.totalActualProfit += b.totalActualProfit;\r\n index.totalOrders += b.totalOrders;\r\n index.totalUniqueCustomers += b.totalUniqueCustomers;\r\n index.totalfleet += b.totalfleet;\r\n index.totalRetail += b.totalRetail;\r\n index.totalDemo += b.totalDemo;\r\n\r\n return a;\r\n }\r\n a.push({ ...b });\r\n return a;\r\n }, []);\r\n\r\n const getMonth = moment().month();\r\n const classes = useStyles();\r\n let Header = ['', 'Target', 'Actual', 'WIP', 'Forecast', 'Variance'];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.lenght > 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n Arr?.map((o, i) => (\r\n \r\n {o.md}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalTarget) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalActual) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalWIP) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalForcost) || 0}\r\n\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o.totalVariance)}\r\n \r\n \r\n ))\r\n )}\r\n \r\n \r\n {list?.length > 0 &&\r\n TotalMonth?.map((t) => (\r\n \r\n Total\r\n {formatters.ThousandSeparatorWithoutZero(t.totalTarget)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalActual)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalWIP)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalForcost)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalVariance)}\r\n \r\n ))}\r\n \r\n {TotalMonth?.length > 0 && (\r\n \r\n \r\n Total profit\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(TotalMonth[0]['totalActualProfit']) || 0}\r\n \r\n \r\n Profit per unit \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(TotalMonth[0]['totalActualProfit'] / TotalMonth[0]['totalActual']) || 0}\r\n \r\n \r\n \r\n Total orders \r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0]['totalOrders']) || 0}\r\n \r\n \r\n Unique Customer\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0]['totalUniqueCustomers']) || 0}\r\n Profit\r\n \r\n \r\n Fleet\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0]['totalfleet'])}\r\n {Math.round((TotalMonth[0]['totalfleet'] / TotalMonth[0]['totalActual']) * 100) || 0}%\r\n \r\n \r\n Retail\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0]['totalRetail'])}\r\n {Math.round((TotalMonth[0]['totalRetail'] / TotalMonth[0]['totalActual']) * 100) || 0}%\r\n \r\n \r\n Demo\r\n \r\n {formatters.ThousandSeparatorWithoutZero(TotalMonth[0]['totalDemo'])}\r\n {Math.round((TotalMonth[0]['totalDemo'] / TotalMonth[0]['totalActual']) * 100) || 0}%\r\n \r\n \r\n )}{' '}\r\n
\r\n \r\n );\r\n};\r\nexport default function LeagueDetailScreen(props) {\r\n const currentYear = moment().year();\r\n // const getCourter = `Q${moment().quarter()}`;\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let name = params.get('name') || '';\r\n let salesExecID = params.get('id') || '';\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'League Table', active: true },\r\n { name: name, active: true }\r\n ];\r\n\r\n const { list } = props;\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = React.useState('Q1');\r\n const [state, setState] = React.useState({\r\n sortedList: [],\r\n isLoader: true,\r\n year: currentYear,\r\n FranchiseList: [],\r\n fn: null\r\n });\r\n\r\n useEffect(async () => {\r\n let monthRange = value == 'ytd' ? null : value;\r\n let res = await getLeagueTableByData(monthRange, state.year, salesExecID || '', state.fn);\r\n if (res.success) {\r\n let sortedList = res?.data?.list.reduce((a, b) => {\r\n var index = a.find((item) => item.mad === b.mad);\r\n if (index) {\r\n index.marchOrders = 0;\r\n if (value === 'Q1') {\r\n index.janActual += b.janActual;\r\n index.janForcost += b.janForcost;\r\n index.janTarget += b.janTarget;\r\n index.janVariance += b.janVariance;\r\n index.janWIP += b.janWIP;\r\n index.janActualProfit += b.janActualProfit;\r\n index.janDemo += b.janDemo;\r\n index.janFleet += b.janFleet;\r\n index.janOrders += b.janOrders;\r\n index.janRetail += b.janRetail;\r\n index.janUniqueCustomers += b.janUniqueCustomers;\r\n index.febActual += b.febActual;\r\n index.febForcost += b.febForcost;\r\n index.febTarget += b.febTarget;\r\n index.febVariance += b.febVariance;\r\n index.febWIP += b.febWIP;\r\n index.febActualProfit += b.febActualProfit;\r\n index.febDemo += b.febDemo;\r\n index.febFleet += b.febFleet;\r\n index.febOrders += b.febOrders;\r\n index.febRetail += b.febRetail;\r\n index.febUniqueCustomers += b.febUniqueCustomers;\r\n index.marchActual += b.marchActual;\r\n index.marchForcost += b.marchForcost;\r\n index.marchTarget += b.marchTarget;\r\n index.marchVariance += b.marchVariance;\r\n index.marchWIP += b.marchWIP;\r\n index.marchActualProfit += b.marchActualProfit;\r\n index.marDemo += b.marDemo;\r\n index.marFleet += b.marFleet;\r\n index.marOrders += +b.marOrders;\r\n index.marRetail += b.marRetail;\r\n index.marUniqueCustomers += b.marUniqueCustomers;\r\n }\r\n if (value === 'Q2') {\r\n index.aprActual += b.aprActual;\r\n index.aprForcost += b.aprForcost;\r\n index.aprTarget += b.aprTarget;\r\n index.aprVariance += b.aprVariance;\r\n index.aprWIP += b.aprWIP;\r\n index.mayActual += b.mayActual;\r\n index.mayForcost += b.mayForcost;\r\n index.mayTarget += b.mayTarget;\r\n index.mayVariance += b.mayVariance;\r\n index.mayWIP += b.mayWIP;\r\n index.juneActual += b.juneActual;\r\n index.juneForcost += b.juneForcost;\r\n index.juneTarget += b.juneTarget;\r\n index.juneVariance += b.juneVariance;\r\n index.juneWIP += b.juneWIP;\r\n index.aprActualProfit += b.aprActualProfit;\r\n index.aprDemo += b.aprDemo;\r\n index.aprFleet += b.aprFleet;\r\n index.aprOrders += b.aprOrders;\r\n index.aprRetail += b.aprRetail;\r\n index.aprUniqueCustomers += b.mayUniqueCustomers;\r\n index.mayActualProfit += b.mayActualProfit;\r\n index.mayDemo += b.mayDemo;\r\n index.mayFleet += b.mayFleet;\r\n index.mayOrders += b.mayOrders;\r\n index.mayRetail += b.mayRetail;\r\n index.mayUniqueCustomers += b.mayUniqueCustomers;\r\n index.juneActualProfit += b.juneActualProfit;\r\n index.juneDemo += b.juneDemo;\r\n index.juneFleet += b.juneFleet;\r\n index.juneOrders += b.juneOrders;\r\n index.juneRetail += b.juneRetail;\r\n index.juneUniqueCustomers += b.juneUniqueCustomers;\r\n }\r\n if (value === 'Q3') {\r\n index.julActual += b.julActual;\r\n index.julForcost += b.julForcost;\r\n index.julTarget += b.julTarget;\r\n index.julVariance += b.julVariance;\r\n index.julWIP += b.julWIP;\r\n index.augActual += b.augActual;\r\n index.augForcost += b.augForcost;\r\n index.augTarget += b.augTarget;\r\n index.augVariance += b.augVariance;\r\n index.augWIP += b.augWIP;\r\n index.sepActual += b.sepActual;\r\n index.sepForcost += b.sepForcost;\r\n index.sepTarget += b.sepTarget;\r\n index.sepVariance += b.sepVariance;\r\n index.sepWIP += b.sepWIP;\r\n index.julActualProfit += b.julActualProfit;\r\n index.julDemo += b.julDemo;\r\n index.julFleet += b.julFleet;\r\n index.julOrders += b.julOrders;\r\n index.julRetail += b.julRetail;\r\n index.julUniqueCustomers += b.julUniqueCustomers;\r\n index.augActualProfit += b.augActualProfit;\r\n index.augDemo += b.augDemo;\r\n index.augFleet += b.augFleet;\r\n index.augOrders += b.augOrders;\r\n index.augRetail += b.augRetail;\r\n index.augUniqueCustomers += b.augUniqueCustomers;\r\n index.sepActualProfit += b.sepActualProfit;\r\n index.sepDemo += b.sepDemo;\r\n index.sepFleet += b.sepFleet;\r\n index.sepOrders += b.sepOrders;\r\n index.sepRetail += b.sepRetail;\r\n index.sepUniqueCustomers += b.sepUniqueCustomers;\r\n }\r\n if (value === 'Q4') {\r\n index.octActual += b.octActual;\r\n index.octForcost += b.octForcost;\r\n index.octTarget += b.octTarget;\r\n index.octVariance += b.octVariance;\r\n index.octWIP += b.octWIP;\r\n index.novActual += b.novActual;\r\n index.novForcost += b.novForcost;\r\n index.novTarget += b.novTarget;\r\n index.novVariance += b.novVariance;\r\n index.novWIP += b.novWIP;\r\n index.decActual += b.decActual;\r\n index.decForcost += b.decForcost;\r\n index.decTarget += b.decTarget;\r\n index.decVariance += b.decVariance;\r\n index.decWIP += b.decWIP;\r\n index.octActualProfit += b.octActualProfit;\r\n index.octDemo += b.octDemo;\r\n index.octFleet += b.octFleet;\r\n index.octOrders += b.octOrders;\r\n index.octRetail += b.octRetail;\r\n index.octUniqueCustomers += b.octUniqueCustomers;\r\n index.novActualProfit += b.novActualProfit;\r\n index.novDemo += b.novDemo;\r\n index.novFleet += b.novFleet;\r\n index.novOrders += b.novOrders;\r\n index.novRetail += b.novRetail;\r\n index.novUniqueCustomers += b.novUniqueCustomers;\r\n index.decActualProfit += b.decActualProfit;\r\n index.decDemo += b.decDemo;\r\n index.decFleet += b.decFleet;\r\n index.decOrders += b.decOrders;\r\n index.decRetail += b.decRetail;\r\n index.decUniqueCustomers += b.decUniqueCustomers;\r\n }\r\n\r\n if (value === 'ytd') {\r\n index.ytdActual += b.ytdActual;\r\n index.ytdForcost += b.ytdForcost;\r\n index.ytdTarget += b.ytdTarget;\r\n index.ytdVariance += b.ytdVariance;\r\n index.ytdWIP += b.ytdWIP;\r\n index.ytdActualProfit += b.ytdActualProfit;\r\n index.ytdDemo += b.ytdDemo;\r\n index.ytdFleet += b.ytdFleet;\r\n index.ytdOrders += b.ytdOrders;\r\n index.ytdRetail += b.ytdRetail;\r\n index.ytdUniqueCustomers += b.ytdUniqueCustomers;\r\n }\r\n // if (value === 'Q1')\r\n // if (value === 'Q2')\r\n // if (value === 'Q3') {\r\n\r\n // if (value === 'Q4') {\r\n // }\r\n // // newMonth.map((k) => {\r\n // index[`${k}Actual`] += b[`${k}Actual`];\r\n // index[`${k}Forcost`] += b[`${k}Actual`];\r\n // index[`${k}Target`] += b[`${k}Actual`];\r\n // index[`${k}Variance`] += b[`${k}Actual`];\r\n // index[`${k}WIP`] += b[`${k}Actual`];\r\n // });\r\n return a;\r\n }\r\n a.push({ ...b });\r\n return a;\r\n }, []);\r\n setState((st) => ({\r\n ...st,\r\n sortedList: sortedList,\r\n isLoader: false\r\n }));\r\n }\r\n\r\n // let sortedMonth = Months.filter((j) => j.name === value);\r\n }, [value, state.year, state.fn]);\r\n\r\n const handleChange = (event, newValue) => {\r\n setState((st) => ({\r\n ...st,\r\n isLoader: true\r\n }));\r\n setValue(newValue);\r\n };\r\n const handleSelect = (event) => {\r\n const { name, value } = event.target;\r\n setState((st) => ({\r\n ...st,\r\n [name]: value\r\n }));\r\n };\r\n\r\n useEffect(async () => {\r\n let response = await getFinanceList();\r\n if (response.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt.FranchiseList =\r\n response.data.map((m) => ({\r\n id: m.letterIdentifier,\r\n name: m.franchiseName\r\n })) || [];\r\n return newSt;\r\n });\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n {' '}\r\n \r\n \r\n \r\n
Year:
\r\n
\r\n {' '}\r\n \r\n
\r\n
\r\n
Franchise:
\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <>\r\n {state.isLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.length == 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n list?.map((o, i) => (\r\n \r\n {o.ad}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(o[profit])}\r\n {formatters.ThousandSeparatorWithoutZero(o[unit])}\r\n \r\n ))\r\n )}\r\n \r\n \r\n {TotalMonth.map((t) => (\r\n \r\n Total\r\n {formatters.CurrencyThousandSeparatorWithoutZero(t[profit]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[unit]) || 0}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nconst RenderQuater = (props) => {\r\n const { list, m1, m2, m3 } = props;\r\n let Arr = [];\r\n let TotalList = list.forEach((q) => {\r\n Arr.push({\r\n totalProfit: q[`${m1}Profit`] + q[`${m2}Profit`] + q[`${m3}Profit`],\r\n totalUnit: q[`${m1}Unit`] + q[`${m2}Unit`] + q[`${m3}Unit`],\r\n ad: q.ad\r\n });\r\n });\r\n\r\n let TotalMonth = Arr.reduce((a, b) => {\r\n var index = a.find((item) => item);\r\n if (index) {\r\n index.totalProfit += b.totalProfit;\r\n index.totalUnit += b.totalUnit;\r\n\r\n return a;\r\n }\r\n a.push({ ...b });\r\n return a;\r\n }, []);\r\n\r\n const getMonth = moment().month();\r\n const classes = useStyles();\r\n let Header = ['', 'Profit', 'Unit'];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.lenght > 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n Arr?.map((o, i) => (\r\n \r\n {o.ad}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.totalProfit) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalUnit) || 0}\r\n \r\n ))\r\n )}\r\n \r\n \r\n {list?.length > 0 &&\r\n TotalMonth?.map((t) => (\r\n \r\n Total\r\n {formatters.CurrencyThousandSeparatorWithoutZero(t.totalProfit)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalUnit)}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default function RegistrationQuaterTable(props) {\r\n const [width, height] = useWindowSize();\r\n // const currentYear = moment().year();\r\n // // const getCourter = `Q${moment().quarter()}`;\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Qtr = params.get('Qtr') || '';\r\n\r\n const { list } = props;\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = React.useState(Qtr ? Qtr : 'Q1');\r\n const [state, setState] = React.useState({\r\n sortedList: [],\r\n isLoader: true,\r\n // year: currentYear,\r\n FranchiseList: [],\r\n fn: null,\r\n GrapgData: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getSalesNewRegistration(1);\r\n if (res.success) {\r\n let sortedList = res?.data?.list.reduce((acc, obj) => {\r\n var index = acc.find((item) => item.ad === obj.ad);\r\n if (index) {\r\n index.janProfit += obj.janProfit;\r\n index.febProfit += obj.febProfit;\r\n index.marProfit += obj.marProfit;\r\n index.aprProfit += obj.aprProfit;\r\n index.mayProfit += obj.mayProfit;\r\n index.junProfit += obj.junProfit;\r\n index.julProfit += obj.julProfit;\r\n index.augProfit += obj.augProfit;\r\n index.sepProfit += obj.sepProfit;\r\n index.octProfit += obj.octProfit;\r\n index.novProfit += obj.novProfit;\r\n index.decProfit += obj.decProfit;\r\n index.janUnit += obj.janUnit;\r\n index.febUnit += obj.febUnit;\r\n index.marUnit += obj.marUnit;\r\n index.aprUnit += obj.aprUnit;\r\n index.mayUnit += obj.mayUnit;\r\n index.junUnit += obj.junUnit;\r\n index.julUnit += obj.julUnit;\r\n index.augUnit += obj.augUnit;\r\n index.sepUnit += obj.sepUnit;\r\n index.octUnit += obj.octUnit;\r\n index.novUnit += obj.novUnit;\r\n index.decUnit += obj.decUnit;\r\n return acc;\r\n }\r\n acc.push({ ...obj });\r\n return acc;\r\n }, []);\r\n\r\n setState((st) => ({ ...st, sortedList: sortedList, isLoader: false }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let GrapgData = [];\r\n DateList.forEach((n) => {\r\n state.sortedList.forEach((k) => {\r\n let index = GrapgData.findIndex((m) => n.name === m.name);\r\n if (index > -1) {\r\n GrapgData[index][k.ad] = k[`${n.val}Profit`];\r\n } else {\r\n GrapgData.push({\r\n name: n.name,\r\n [k.ad]: k[`${n.val}Profit`]\r\n });\r\n }\r\n });\r\n });\r\n\r\n setState((st) => ({ ...st, GrapgData: GrapgData || [] }));\r\n }, [state.sortedList]);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {'REGISTRATION'}\r\n \r\n \r\n
\r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.sortedList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n {/*
\r\n {' '}\r\n */}\r\n {/*
\r\n \r\n
Year:
\r\n
\r\n {' '}\r\n \r\n
\r\n
*/}\r\n {/*
\r\n \r\n
Franchise:
\r\n
\r\n \r\n
\r\n
*/}\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.isLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n\r\n {/* \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n )}\r\n \r\n \r\n
\r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.length == 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n list?.map((o, i) => (\r\n \r\n {o.ad}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(o[profit])}\r\n {formatters.ThousandSeparatorWithoutZero(o[unit])}\r\n \r\n ))\r\n )}\r\n \r\n \r\n {TotalMonth.map((t) => (\r\n \r\n Total\r\n {formatters.CurrencyThousandSeparatorWithoutZero(t[profit]) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(t[unit]) || 0}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nconst RenderQuater = (props) => {\r\n const { list, m1, m2, m3 } = props;\r\n let Arr = [];\r\n let TotalList = list.forEach((q) => {\r\n Arr.push({\r\n totalProfit: q[`${m1}Profit`] + q[`${m2}Profit`] + q[`${m3}Profit`],\r\n totalUnit: q[`${m1}Unit`] + q[`${m2}Unit`] + q[`${m3}Unit`],\r\n ad: q.ad\r\n });\r\n });\r\n\r\n let TotalMonth = Arr.reduce((a, b) => {\r\n var index = a.find((item) => item);\r\n if (index) {\r\n index.totalProfit += b.totalProfit;\r\n index.totalUnit += b.totalUnit;\r\n\r\n return a;\r\n }\r\n a.push({ ...b });\r\n return a;\r\n }, []);\r\n\r\n const getMonth = moment().month();\r\n const classes = useStyles();\r\n let Header = ['', 'Profit', 'Unit'];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {props.name}\r\n \r\n \r\n \r\n \r\n \r\n {Header?.map((m) => (\r\n \r\n {m}\r\n \r\n ))}\r\n \r\n {list?.lenght > 0 ? (\r\n \r\n \r\n No Record Found\r\n \r\n \r\n ) : (\r\n Arr?.map((o, i) => (\r\n \r\n {o.ad}\r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.totalProfit) || 0}\r\n {formatters.ThousandSeparatorWithoutZero(o.totalUnit) || 0}\r\n \r\n ))\r\n )}\r\n \r\n \r\n {list?.length > 0 &&\r\n TotalMonth?.map((t) => (\r\n \r\n Total\r\n {formatters.CurrencyThousandSeparatorWithoutZero(t.totalProfit)}\r\n {formatters.ThousandSeparatorWithoutZero(t.totalUnit)}\r\n \r\n ))}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default function InvoiceQuaterTable(props) {\r\n const [width, height] = useWindowSize();\r\n // const currentYear = moment().year();\r\n // // const getCourter = `Q${moment().quarter()}`;\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let Qtr = params.get('Qtr') || '';\r\n\r\n const { list } = props;\r\n const classes = useStyles();\r\n\r\n const [value, setValue] = React.useState(Qtr ? Qtr : 'Q1');\r\n const [state, setState] = React.useState({\r\n sortedList: [],\r\n isLoader: true,\r\n // year: currentYear,\r\n FranchiseList: [],\r\n fn: null,\r\n GrapgData: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await getSaleUsedInvoice(1);\r\n if (res.success) {\r\n let sortedList = res?.data?.list.reduce((acc, obj) => {\r\n var index = acc.find((item) => item.ad === obj.ad);\r\n if (index) {\r\n index.janProfit += obj.janProfit;\r\n index.febProfit += obj.febProfit;\r\n index.marProfit += obj.marProfit;\r\n index.aprProfit += obj.aprProfit;\r\n index.mayProfit += obj.mayProfit;\r\n index.junProfit += obj.junProfit;\r\n index.julProfit += obj.julProfit;\r\n index.augProfit += obj.augProfit;\r\n index.sepProfit += obj.sepProfit;\r\n index.octProfit += obj.octProfit;\r\n index.novProfit += obj.novProfit;\r\n index.decProfit += obj.decProfit;\r\n index.janUnit += obj.janUnit;\r\n index.febUnit += obj.febUnit;\r\n index.marUnit += obj.marUnit;\r\n index.aprUnit += obj.aprUnit;\r\n index.mayUnit += obj.mayUnit;\r\n index.junUnit += obj.junUnit;\r\n index.julUnit += obj.julUnit;\r\n index.augUnit += obj.augUnit;\r\n index.sepUnit += obj.sepUnit;\r\n index.octUnit += obj.octUnit;\r\n index.novUnit += obj.novUnit;\r\n index.decUnit += obj.decUnit;\r\n return acc;\r\n }\r\n acc.push({ ...obj });\r\n return acc;\r\n }, []);\r\n\r\n setState((st) => ({ ...st, sortedList: sortedList, isLoader: false }));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n let GrapgData = [];\r\n DateList.forEach((n) => {\r\n state.sortedList.forEach((k) => {\r\n let index = GrapgData.findIndex((m) => n.name === m.name);\r\n if (index > -1) {\r\n GrapgData[index][k.ad] = k[`${n.val}Profit`];\r\n } else {\r\n GrapgData.push({\r\n name: n.name,\r\n [k.ad]: k[`${n.val}Profit`]\r\n });\r\n }\r\n });\r\n });\r\n\r\n setState((st) => ({ ...st, GrapgData: GrapgData || [] }));\r\n }, [state.sortedList]);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {'INVOICED'}\r\n \r\n \r\n
\r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.sortedList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n {/*
\r\n {' '}\r\n */}\r\n {/*
\r\n \r\n
Year:
\r\n
\r\n {' '}\r\n \r\n
\r\n
*/}\r\n {/*
\r\n \r\n
Franchise:
\r\n
\r\n \r\n
\r\n
*/}\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.isLoader ? (\r\n \r\n ) : (\r\n <>\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n {' '}\r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n\r\n {/* \r\n {' '}\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n )}\r\n \r\n \r\n
\r\n {list.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n
\r\n \r\n STOCKING COST ESTIMATE\r\n \r\n
{list?.costEstimate?.avgDayInStock}
\r\n
{list?.costEstimate?.intrestInacurred_Stock}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Interest incurred (Order Take) \r\n {list?.costEstimate?.intrestInacurred_OrderTAke}
\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.id === 1 ? 'NEW' : 'USED'} STOCK\r\n \r\n PROFIT\r\n \r\n \r\n STATUS\r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n 1-60 Days \r\n \r\n \r\n 61-90 Days \r\n \r\n \r\n 91-120 Days \r\n \r\n \r\n 121-150 Days \r\n \r\n \r\n 150+ Days \r\n \r\n \r\n Reserved \r\n \r\n \r\n Unsold \r\n \r\n \r\n Ordered\r\n \r\n \r\n Consigned\r\n \r\n \r\n Fully Paid \r\n \r\n \r\n \r\n \r\n {list?.stock.map((k, i) => (\r\n \r\n \r\n {k.fn}
\r\n \r\n handleStock(k.franchise, props.id, 1)} className=\"CursorHov\">\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.totalCount0to60)} / \r\n {k.totalUnit0to60}\r\n
\r\n \r\n handleStock(k.franchise, props.id, 2)} className=\"CursorHov\">\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.totalCount61to90)} / \r\n {k.totalUnit61to90}\r\n
\r\n \r\n handleStock(k.franchise, props.id, 3)} className=\"CursorHov\">\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.totalCount91to120)} / \r\n {k.totalUnit91to120}\r\n
\r\n \r\n handleStock(k.franchise, props.id, 4)} className=\"CursorHov\">\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.totalCount121to150)} / \r\n {k.totalUnit121to150}\r\n
\r\n \r\n handleStock(k.franchise, props.id, 5)} className=\"CursorHov\">\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.totalCount150Plus)} / \r\n {k.totalUnit150Plus}\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.reservedProfit)} / \r\n {k.reservedUnits}\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.unsoldProfit || 0)} / \r\n {k.unsoldUnit || 0}\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.orderedProfit)} / \r\n {k.orderedUnits || 0}\r\n
\r\n \r\n \r\n {' '}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.consignedProfit)} /\r\n {k.consignedUnits || 0}\r\n
\r\n \r\n \r\n {' '}\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k.finishedProfit)} / \r\n {k.finishedUnits || 0}\r\n
\r\n \r\n \r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Franchise\r\n \r\n {state.selectedTableLabel} \r\n \r\n \r\n \r\n \r\n {list?.stock.map((k, i) => (\r\n \r\n \r\n {k.fn}
\r\n \r\n state.setValueForStock <= 5 && handleStock(k.franchise, props.id, state.setValueForStock)}\r\n className=\"CursorHov\"\r\n >\r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(k[state.selectedProfit])} / \r\n {k.totalUnit0to60}\r\n
\r\n \r\n \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 } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabContext from '@material-ui/lab/TabContext';\r\nimport TabList from '@material-ui/lab/TabList';\r\nimport TabPanel from '@material-ui/lab/TabPanel';\r\nimport StockTable from './stockTable';\r\nimport { getNewStockbyID, getUsedStockabyID } from '../../../../../Core/Service/SalesPerformance-service';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1\r\n // backgroundColor: theme.palette.background.paper\r\n }\r\n}));\r\n\r\nconst SalesStockDashboard = () => {\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState(1);\r\n\r\n const [newStock, setNewStock] = React.useState({ showLoader: true, costEstimate: {}, stock: [] });\r\n const [usedStock, setUsedStock] = React.useState({ showLoader: true, costEstimate: {}, stock: [] });\r\n\r\n const pullstockData = async (val) => {\r\n if (val == 1) {\r\n let newStockRes = await getNewStockbyID(1);\r\n if (newStockRes.success) {\r\n setNewStock((st) => ({\r\n stock: newStockRes?.data.newStock,\r\n costEstimate: newStockRes?.data?.costEstimate[0],\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n if (val == 2) {\r\n let usedStockRes = await getUsedStockabyID(1);\r\n if (usedStockRes.success) {\r\n setUsedStock((st) => ({\r\n stock: usedStockRes?.data.usedStock,\r\n costEstimate: usedStockRes?.data?.costEstimate[0],\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n };\r\n useEffect(async () => {\r\n pullstockData(value);\r\n }, [value]);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
| Total | ' +\r\n formatters.ToFixedSeparator(sumsold) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumtaken) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumeff) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumsale) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumcost) +\r\n ' | ' +\r\n formatters.CurrencyThousandSeparator(sumprofit) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(summarginPerc) +\r\n ' | ' +\r\n formatters.ToFixedSeparator(sumrecRate) +\r\n ' |
|---|
'\r\n );\r\n });\r\n mainGrid.on('detailExpand', function (e, $detailWrapper, branchID) {\r\n opGrid = $detailWrapper.find('table').grid({\r\n params: { branchID: branchID, fn: state.fn?.id || '' },\r\n primaryKey: 'opno',\r\n dataSource: [],\r\n columns: wipColumns,\r\n pager: { limit: 10 }\r\n });\r\n\r\n setDataSource(\r\n opGrid,\r\n `${ExpBaseURL}/api/services/ReportingGetUnInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&Mode=B&AllData=Y`\r\n );\r\n opGrid.reload();\r\n\r\n opGrid.on('detailCollapse', function (e, $detailWrapper, opno) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n });\r\n mainGrid.on('detailCollapse', function (e, $detailWrapper, id) {\r\n $detailWrapper.find('table').grid('destroy', true, true);\r\n });\r\n mainGrid.reload();\r\n };\r\n useEffect(() => {\r\n if (state.BranchList.length > 0) {\r\n pullInvoiceHours();\r\n }\r\n }, [state.startDate, state.endDate, state.branchID, state.BranchList, state.fn]);\r\n\r\n const downloadCSVWrapper = async () => {\r\n showToast('Collating Data... This may take a while.');\r\n const data = mainGrid.data().params;\r\n let downloadURL = `services/ReportingGetUnInvoicedHours?StartDate=${state.startDate}&EndDate=${state.endDate}&fn=${state?.fn?.id}${\r\n getUrl.includes('?') ? '&' : '?'\r\n }fileType=excel`;\r\n for (let key in data) {\r\n if (data.hasOwnProperty(key)) {\r\n const value = data[key];\r\n downloadURL += `&${key}=${value}`;\r\n }\r\n }\r\n await GetExcelFileFromEndpoint(downloadURL, 'InvoicedHours');\r\n };\r\n const singleSelectChange = (nm) => (ev, val) => {\r\n setState((st) => {\r\n let newSt = { ...st, [nm]: val };\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {state.showWIPDetails && (\r\n
setState((st) => ({ ...st, showWIPDetails: false }))} maxWidth=\"xl\" fullWidth>\r\n \r\n \r\n )}\r\n {state.showPdfModal ? (\r\n
setState((st) => ({ ...st, showPdfModal: false }))} fullWidth>\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n Start Date\r\n \r\n \r\n \r\n End Date\r\n \r\n \r\n \r\n \r\n Select Branch\r\n \r\n \r\n \r\n \r\n \r\n Select Franchise\r\n \r\n \r\n \r\n \r\n \r\n \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 Notes -{state.records.sn}
\r\n
\r\n {state.records.rn} {state.records.vd}\r\n
\r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ fn: Pramfranchise, bn: PramBN, mdc: PramMDC }}\r\n downloadName=\"Used Vehicle Stock\"\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.showMotHistory && (\r\n setState((st) => ({ ...st, showMotHistory: false }))} maxWidth=\"md\" fullWidth overflow={'auto'}>\r\n \r\n \r\n )}\r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SalesPerformanceUsedStock;\r\n","import { CircularProgress, Grid, Typography, makeStyles, withStyles } from '@material-ui/core';\r\nimport React, { useEffect } from 'react';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';\r\nimport { useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { getSalesNewRegistration } from '../../../../../Core/Service/groupDashboard-services';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport { useLocation } from 'react-router-dom/cjs/react-router-dom';\r\nimport moment from 'moment';\r\nimport { useWindowSize } from '../../../../../Core/Controls/ScreenResolution';\r\nimport { registration } from '../../../..';\r\n\r\nconst COLORS = {\r\n 0: '#0074D9',\r\n 1: '#FF4136',\r\n 2: '#2ECC40',\r\n 3: '#FF851B',\r\n 4: '#7FDBFF',\r\n 5: '#B10DC9',\r\n 6: '#FFDC00',\r\n 7: '#C33C9A',\r\n 8: '#39CCCC',\r\n 9: '#01FF70',\r\n 10: '#85144b',\r\n 11: '#F012BE',\r\n 12: '#3D9970',\r\n 13: '#111111',\r\n 14: '#AAAAAA'\r\n};\r\n\r\nconst CustomTooltip = ({ active, payload, label }) => {\r\n if (active && payload && payload.length) {\r\n return (\r\n \r\n
\r\n {`${label}`}\r\n
\r\n {/*
{getIntroOfPage(label)}
*/}\r\n {payload.map((n, i) => {\r\n return (\r\n
\r\n {n.name} : {formatters.CurrencyThousandSeparatorWithoutZero(n.value)}\r\n
\r\n );\r\n })}\r\n
\r\n {state.showLoader ? (\r\n
\r\n \r\n \r\n ) : (\r\n \r\n \r\n = 600 ? 20 : 0,\r\n fontWeight: 600,\r\n fontSize: width >= 600 ? 24 : 18\r\n }}\r\n >\r\n {'INVOICED'}\r\n \r\n \r\n \r\n \r\n = 600 ? 10 : -10,\r\n bottom: 5\r\n }}\r\n // margin={{\r\n // top: 5,\r\n // right: 20,\r\n // left: 10,\r\n // bottom: 5\r\n // }}\r\n >\r\n \r\n = 600 ? 12 : 10 }} />\r\n = 600 ? 12 : 10 }} />\r\n } />\r\n {/* */}\r\n \r\n {state.fllteredList.map((n, i) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Jan-23\r\n Feb-23\r\n Mar-23\r\n Apr-23\r\n May-23\r\n Jun-23\r\n Jul-23\r\n Aug-23\r\n Sep-23\r\n Oct-23\r\n Nov-23\r\n Dec-23\r\n \r\n \r\n \r\n {state.fllteredList.length > 0 ? (\r\n state.fllteredList.map((m, i) => {\r\n return (\r\n \r\n handleRedirect('year', m.ac)}>\r\n {m.ad}\r\n \r\n handleRedirect(0, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n handleRedirect(1, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n handleRedirect(2, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n handleRedirect(3, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n handleRedirect(4, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n handleRedirect(5, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n handleRedirect(6, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n handleRedirect(7, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n handleRedirect(8, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n handleRedirect(9, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n handleRedirect(10, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n handleRedirect(11, m.ac)}\r\n >\r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\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 {state.totalList?.map((m, i) => {\r\n return (\r\n \r\n \r\n \r\n Total\r\n
\r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.janProfit)} / {m.janUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.febProfit)} / {m.febUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.marProfit)} / {m.marUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.aprProfit)} / {m.aprUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.mayProfit)} / {m.mayUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.junProfit)} / {m.junUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.julProfit)} / {m.julUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.augProfit)} / {m.augUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.sepProfit)} / {m.sepUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.octProfit)} / {m.octUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.novProfit)} / {m.novUnit}\r\n \r\n \r\n \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(m.decProfit)} / {m.decUnit}\r\n \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 Notes -{state.records.sn}
\r\n
{state.records.vd}
\r\n
\r\n \r\n \r\n \r\n ({\r\n records: res?.data?.list,\r\n total: res?.data?.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n displayPagination={true}\r\n FilterdParamsValues={{ pd: Prampd, mc: PramMC, mac: PramMAC }}\r\n downloadName={'New Vehicle Stock'}\r\n dropDownListProvider={getReportsSalesDropdownsResolveData}\r\n />\r\n \r\n \r\n {state.handleVehicleNotes && (\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SalesPerformanceNewStock;\r\n","import React, { useContext, useMemo, useState, useEffect } from 'react';\r\nimport { Grid, Select, IconButton, Dialog } from '@material-ui/core'; // Removed unnecessary imports\r\nimport { useHistory } from 'react-router-dom';\r\nimport ReactDOM from 'react-dom';\r\nimport { AppStorage } from '../../../../../Core/Service/storage-service';\r\n\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { SquareButton } from '../../../../../Core/FormInput/AppButton';\r\nimport { postCategoryData, postFinanceProviders, postStockingCharges } from '../../../../../Core/Service/SalesPerformance-service';\r\nimport AppContext from '../../../../../App/AppContext';\r\nimport { getFPProviderDropdownList, getFPProviderList } from '../../../../../Core/Service/ReportScreens-service';\r\n\r\nimport ReportGijgoGrid from '../../GijgoForReportsScreen';\r\nimport BreadCrumbs from '../../../../../Core/Controls/Breadcrumb';\r\nimport { SelectBox } from '../../../../../Core/FormInput';\r\n\r\nconst baseColumns = [\r\n { field: 'letterIdentifier', title: 'Letter', align: 'center', filterable: true, sortable: false, width: 100 },\r\n { field: 'franchiseName', title: 'Franchise Name', filterable: true },\r\n { field: 'financeProviderID', title: 'Finance Provider', align: 'left', filterable: false, sortable: false, width: 600 },\r\n { field: 'vehicleCategoryID', title: 'Category', align: 'left', filterable: false, sortable: false, width: 600 }\r\n];\r\n\r\nconst crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Franchise', active: true }\r\n];\r\n\r\nconst FranchiseScreen = (props) => {\r\n const { showToast } = useContext(AppContext);\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n const history = useHistory();\r\n const [state, setState] = useState({\r\n showModal: false,\r\n stockObj: {},\r\n isReload: false,\r\n providerList: []\r\n });\r\n\r\n const [providerList, setProviderList] = useState({\r\n fpList: [],\r\n categoryList: []\r\n });\r\n\r\n useEffect(() => {\r\n async function fetchData() {\r\n let res = await getFPProviderDropdownList();\r\n if (res.success) {\r\n setProviderList((st) => ({\r\n ...st,\r\n isReload: new Date(),\r\n fpList:\r\n res.data.fp.map((m) => ({\r\n id: m.id,\r\n name: m.name\r\n })) || [],\r\n categoryList:\r\n res.data.category.map((m) => ({\r\n id: m.categoryID,\r\n name: m.name\r\n })) || []\r\n }));\r\n }\r\n }\r\n fetchData();\r\n }, []);\r\n\r\n const HandleFpSaveData = (value, record) => async (e) => {\r\n let data = {\r\n ID: e.target.value,\r\n letterIdentifier: record.letterIdentifier\r\n };\r\n\r\n let res = await postFinanceProviders(data);\r\n if (res.success) {\r\n showToast('Finance Provider Added Successfully');\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const HandleCategorySaveData = (value, record) => async (e) => {\r\n let data = {\r\n vehicleCategoryID: e.target.value,\r\n letterIdentifier: record.letterIdentifier\r\n };\r\n\r\n let res = await postCategoryData(data);\r\n if (res.success) {\r\n showToast('Category Added Successfully');\r\n }\r\n\r\n setState((st) => ({\r\n ...st,\r\n isReload: new Date()\r\n }));\r\n };\r\n\r\n const fpColumnComp = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const categoryColumnComp = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n let actionCol = tempCols.find((element) => element.field === 'financeProviderID');\r\n\r\n if (actionCol) {\r\n actionCol.renderer = fpColumnComp;\r\n }\r\n\r\n let categoryActionCol = tempCols.find((element) => element.field === 'vehicleCategoryID');\r\n\r\n if (categoryActionCol) {\r\n categoryActionCol.renderer = categoryColumnComp;\r\n }\r\n\r\n return tempCols;\r\n }, [providerList]);\r\n\r\n const baseUrl = 'FinanceProviders/Franchise';\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ({\r\n records: res.data,\r\n total: res?.data?.length\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n hideFilterRow={false}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FranchiseScreen;\r\n","import { get, post } from './http-calls';\r\n\r\nexport const getTechnicianAssignedJobs = async (id, branch) => {\r\n let res = await get(`TechnicianAssigned?Id=${id}&branchShortName=${branch}`, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const GetTechBranchList = async (id, branch) => {\r\n let res = await get(`TechnicianAssigned/BranchList`, { useAuthToken: true });\r\n return res;\r\n};\r\nexport const GetTechByBranchID = async (id) => {\r\n let res = await get(`TechnicianAssigned/GetTechnicianByBranchID?Id=${id}`, { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport {\r\n Grid,\r\n TextField,\r\n FormLabel,\r\n CircularProgress,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper,\r\n IconButton\r\n} from '@material-ui/core';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { getTechnicianAssignedJobs, GetTechBranchList, GetTechByBranchID } from '../../Service/technicianAssignedService';\r\nimport { withStyles, makeStyles } from '@material-ui/core/styles';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\nimport AssignTech from '../../../Components/internal/assign-technician/assignTechnModal';\r\nimport DialogComp from '../../Controls/Dialog/DialogComp';\r\n\r\nconst useStyles = makeStyles({\r\n table: {\r\n width: '100%'\r\n }\r\n});\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'rgba(0,0,0,0.9)',\r\n color: theme.palette.common.white,\r\n fontSize: 15,\r\n padding: '5px 10px'\r\n },\r\n body: {\r\n fontSize: 12,\r\n padding: '3px 5px',\r\n borderBottom: '1px solid rgba(0,0,0,0.1)'\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableHeaderCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: 'white',\r\n color: theme.palette.common.black,\r\n fontSize: 10,\r\n padding: '1px 8px',\r\n borderBottom: '1px solid rgba(0,0,0,0.1)'\r\n // borderRight: '0.5px solid rgba(0,0,0,0.09) '\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 TechnicianCalender = (props) => {\r\n const history = useHistory();\r\n const classes = useStyles();\r\n\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n let ParamTid = params.get('tid') || '';\r\n let ParamBnm = params.get('bnm') || '';\r\n\r\n const [state, setState] = useState({\r\n filterData: [],\r\n branchList: [],\r\n branchValue: {},\r\n branchValueID: null,\r\n branchValueName: '',\r\n TechnicianList: [],\r\n filterData: [],\r\n showTechAssign: false,\r\n technicianID: '',\r\n technicianName: '',\r\n technician: {},\r\n TechnicianRow: [],\r\n newFilterData: [],\r\n showLoader: true\r\n });\r\n\r\n const handleBtnClcik = (val) => {\r\n history.push(`/Job/${val.headerRecordID}/${val.workflowID}`);\r\n };\r\n\r\n const handleAssignmentBtnClick = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n jobId: val.headerRecordID,\r\n showTechAssign: true\r\n }));\r\n };\r\n const closeTechAssignDialog = (res) => {\r\n setState((st) => ({ ...st, showTechAssign: false }));\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await GetTechBranchList();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n branchList: res.data?.map((k) => ({\r\n description: k.name,\r\n id: k.id\r\n }))\r\n }));\r\n }\r\n }, []);\r\n\r\n useEffect(async () => {\r\n if (state.branchValueID) {\r\n let res = await GetTechByBranchID(state.branchValueID);\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n TechnicianList: res.data.map((k) => ({\r\n description: k.name,\r\n id: k.id\r\n })),\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n }, [state.branchValueID]);\r\n\r\n useEffect(async () => {\r\n if (state.branchValueName) {\r\n let res = await getTechnicianAssignedJobs(ParamTid, state.branchValueName);\r\n if (res.success) {\r\n let TechnecianRows = [...res.data.rows];\r\n setState((st) => ({\r\n ...st,\r\n TechnicianRow: TechnecianRows,\r\n showLoader: false\r\n }));\r\n }\r\n }\r\n }, [state.branchValueName]);\r\n\r\n useEffect(async () => {\r\n if (state.branchList.length > 0) {\r\n let brachObj = state.branchList.find((k) => k.description == ParamBnm);\r\n setState((st) => ({\r\n ...st,\r\n branchValue: brachObj,\r\n branchValueID: brachObj.id,\r\n branchValueName: brachObj.description\r\n }));\r\n }\r\n }, [ParamBnm, state.branchList]);\r\n\r\n useEffect(async () => {\r\n let filterData = [];\r\n\r\n state?.TechnicianList.forEach((m) => {\r\n let index = state?.TechnicianRow.filter((n) => m.description == n.userName);\r\n if (index) {\r\n filterData.push({ Technician: m.description, data: [...index] });\r\n } else {\r\n filterData.push({ Technician: m.description, data: [] });\r\n }\r\n });\r\n\r\n setState((st) => ({\r\n ...st,\r\n showLoader: false,\r\n filterData: filterData\r\n }));\r\n }, [state.TechnicianRow, state.TechnicianList]);\r\n\r\n useEffect(async () => {\r\n let newFilterData = [];\r\n if (state.technicianName) {\r\n newFilterData = state.filterData.filter((n) => state.technicianName == n.Technician);\r\n }\r\n setState((st) => ({\r\n ...st,\r\n newFilterData: newFilterData,\r\n showLoader: false\r\n }));\r\n }, [state.technicianName]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n newSt.showLoader = true;\r\n if (fieldName == 'technician') {\r\n newSt.technicianID = val.id;\r\n newSt.technicianName = val.description;\r\n }\r\n if (fieldName == 'branchValue') {\r\n newSt.branchValueID = val.id;\r\n newSt.branchValueName = val.description;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n let list = state.technicianName ? state.newFilterData : state.filterData;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Branch\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Technician\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n {state.showLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n {list.map((k) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {k.Technician}\r\n \r\n \r\n Action\r\n WIP No.\r\n REG No.\r\n Job Description\r\n \r\n \r\n \r\n {k.data.map((j) => {\r\n return (\r\n \r\n \r\n \r\n \r\n handleBtnClcik(j)}>\r\n \r\n \r\n \r\n \r\n {j.workflowID == 8 && (\r\n // \r\n handleAssignmentBtnClick(j)}\r\n >\r\n \r\n \r\n // \r\n )}\r\n \r\n \r\n \r\n \r\n {j.wipNumber}\r\n \r\n \r\n {j.registration}\r\n \r\n \r\n {j.serviceText}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res.data?.list,\r\n total: res.data.total\r\n })}\r\n columns={columns}\r\n getUrl={baseUrl}\r\n isShowTotal={false}\r\n hidePagination={false}\r\n hideFilterRow={false}\r\n isReload={state.isReload}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FinanceCustomer;\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport {\r\n ButtonGroup,\r\n Grid,\r\n IconButton,\r\n LinearProgress,\r\n Tooltip,\r\n Badge,\r\n Card,\r\n CardHeader,\r\n CardContent,\r\n Typography,\r\n TextField,\r\n FormLabel,\r\n CircularProgress,\r\n Chip,\r\n Avatar\r\n} from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport moment from 'moment';\r\n\r\nimport AspectRatioIcon from '@material-ui/icons/AspectRatio';\r\n\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport AppContext from '../../../App/AppContext';\r\nimport {\r\n getInvoiceBranch,\r\n getInvoicedHoursCalender,\r\n getReportingGetSafetyCheckDue,\r\n getReportingGetVehiceMOTDue,\r\n getReportingGetVehiceServices\r\n} from '../../../Core/Service/ReportScreens-service';\r\n// import { VehicleModalDetail } from './vehicleDetailsModal';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\nimport { CircularProgressbar, buildStyles } from 'react-circular-progressbar';\r\nimport { useWindowSize } from '../../../Core/Controls/ScreenResolution';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\nimport { GetBranchAndFranchiesDropdowns, GetBranchDeportmentScreenDropdowns } from '../../../Core/Service/reportService';\r\nimport { getFinanceList } from '../../../Core/Service/SalesPerformance-service';\r\n// import VehicleDueDetailsList from './VehicleDueDetailListModal';\r\n\r\nconst setPercentage = (profit, budget) => {\r\n if (!profit) {\r\n return 0;\r\n } else {\r\n if (budget == null || budget == 0) {\r\n return 100;\r\n } else {\r\n let value = (+profit / +budget) * 100;\r\n\r\n return Math.round(value);\r\n // <= 100 ? Math.round(value) : 100;\r\n }\r\n }\r\n};\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 '&:hover': {\r\n background: 'rgba(0,0,0,0.01)'\r\n },\r\n minWidth: 'auto',\r\n cursor: 'pointer',\r\n height: '135px',\r\n border: ' 1px solid rgba(0,0,0,0.1)',\r\n borderRadius: 12,\r\n minWidth: 250\r\n\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 - 90);\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 cardRow: {\r\n padding: '3px',\r\n borderBottom: ' 1px dotted black',\r\n cursor: 'pointer',\r\n '&:nth-of-type(odd)': {\r\n background: '#E8E8E8'\r\n }\r\n },\r\n cardHeader: {\r\n height: '10px',\r\n // backgroundColor: (props) => console.log(props, 'ssssssss'),\r\n // border: (props) => `1px solid ${props.portalMenuBarBackgroundColour}`,\r\n // color: 'white',\r\n textAlign: 'left',\r\n padding: '10px !important'\r\n },\r\n loaderContainer: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n height: '100%',\r\n zIndex: 99,\r\n background: 'grey',\r\n opacity: '0.6'\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() - 10;\r\n let endYear = d.getFullYear() + 10;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ description: `${startYear}`, id: `${startYear}` });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst monthsList = formatters.constantMonthList();\r\n\r\nconst InvoiceHoursCalendar = (props) => {\r\n const history = useHistory();\r\n const { portalSettings, showTopNavAndMenu, loggedIn, isTopNav, userRoles } = useContext(AppContext);\r\n const classes = useStyles({ ...props, ...portalSettings });\r\n const isCustomer = userRoles.includes('customer');\r\n const isInternal = userRoles.includes('internal');\r\n const [width, height] = useWindowSize();\r\n const [state, setState] = useState({\r\n branchList: [],\r\n frenchiseList: [],\r\n branchCode: {},\r\n monthCode: monthsList[`${new Date().getMonth()}`],\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n filterData: [],\r\n holidays: [],\r\n branchID: null,\r\n frenchID: null,\r\n branchIDObj: {},\r\n frenchiseListObj: {},\r\n filterList: [],\r\n dailybudget: []\r\n });\r\n\r\n useEffect(async () => {\r\n let res = await GetBranchAndFranchiesDropdowns();\r\n // let res = await GetBranchDeportmentScreenDropdowns();\r\n // let res2 = await getFinanceList();\r\n setState((st) => ({\r\n ...st,\r\n\r\n branchList: res.data.branchList.map((n) => ({\r\n description: n.name,\r\n id: n.id\r\n })),\r\n frenchiseList: res.data.franchise.map((n) => ({\r\n description: n.name,\r\n id: n.id\r\n }))\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let tempArr = [];\r\n let HolidaysList = [...state.holidays];\r\n let dataList = [...state.dailybudget];\r\n dataList.forEach((j) => {\r\n let findList = HolidaysList.find((h) => j.dateEditted === h.date);\r\n if (findList) {\r\n findList.actualSale = j.actualSale;\r\n findList.actualSold = j.actualSold;\r\n }\r\n });\r\n\r\n setState((st) => ({\r\n ...st,\r\n filterList: HolidaysList,\r\n showLoader: false\r\n }));\r\n }, [state.holidays, state.dailybudget]);\r\n\r\n useEffect(async () => {\r\n let startDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .startOf('month')\r\n .format('YYYY-MM-DD');\r\n let endDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .endOf('month')\r\n .format('YYYY-MM-DD');\r\n\r\n setState((st) => ({ ...st, showLoader: true }));\r\n\r\n // if (state.branchID) {\r\n let newRes = await getInvoicedHoursCalender(startDate, endDate, state.branchID, state.frenchID);\r\n setState((st) => ({ ...st, budget: newRes?.data?.budget, dailybudget: newRes?.data?.dailybudget, holidays: newRes?.data?.holidays }));\r\n // }\r\n }, [state.yearCode, state.monthCode, state.branchID, state.frenchID]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n // newSt.showLoader = true;\r\n if (fieldName === 'branchIDObj') {\r\n newSt.branchID = val?.id;\r\n }\r\n if (fieldName === 'frenchiseListObj') {\r\n newSt.frenchID = val?.id;\r\n }\r\n\r\n return newSt;\r\n });\r\n };\r\n\r\n const GoToDailyInvoicedHours = (params) => {\r\n let searchQuery = `selectedDate=${moment(params).format('YYYY-MM-DD')}&branchID=${state.branchID || ''}&fn=${state.frenchID || ''}`;\r\n history.push({\r\n pathname: `/Services/InvoicedHours`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Select Month\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Year\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n\r\n \r\n Branch\r\n {\r\n if (!option) {\r\n return '';\r\n }\r\n return typeof option === 'string' ? option : option.description || '';\r\n }}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Franchise\r\n {\r\n if (!option) {\r\n return '';\r\n }\r\n return typeof option === 'string' ? option : option.description || '';\r\n }}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n {state.showLoader && (\r\n \r\n \r\n \r\n )}\r\n \r\n {state?.holidays?.map((o, i) => {\r\n return (\r\n <>\r\n {width <= 1660 ? (\r\n \r\n GoToDailyInvoicedHours(o.date)}>\r\n \r\n \r\n \r\n \r\n \r\n = 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 50\r\n ? '#D92641'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n Hours\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o.actualSold)}\r\n \r\n\r\n Value \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.actualSale)}\r\n \r\n
\r\n \r\n = 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 50\r\n ? '#D92641'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n Hours\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o.actualSold)}\r\n \r\n\r\n Value \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.actualSale)}\r\n \r\n
\r\n \r\n \r\n \r\n \r\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 InvoiceHoursCalendar;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\n// import './appraisal.scss';\r\nimport ReportGijgoGrid from '../ReportsScreens/GijgoForReportsScreen';\r\nimport { getAppraisalDropdown, getAppraisalDropdownsResolveData } from '../../../Core/Service/apprisal-service';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport ReactDOM from 'react-dom';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport { Grid, Tooltip } from '@material-ui/core';\r\nimport { SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\n// import ReactDOM from 'react-dom';\r\n\r\nconst baseColumns = [\r\n { title: 'Action', field: 'action', width: 100, sortable: true, align: 'left' },\r\n { title: 'Ref', field: 'recordId', width: 100, sortable: true },\r\n { title: 'Reg No', field: 'regNo', width: 120, sortable: true },\r\n {\r\n title: 'Type',\r\n field: 'vehicleTypeId',\r\n width: 130,\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'vehicleTypes',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name'\r\n },\r\n { title: 'Make', field: 'make', width: 200, sortable: true },\r\n { title: 'Value', field: 'expectedValue', width: 150, sortable: true },\r\n { title: 'Mileage', field: 'mileage', sortable: true },\r\n { title: 'Date', field: 'appraisalDate', sortable: true, width: 200, renderer: formatters.DateTimeFormatter },\r\n { title: 'Submitted By', field: 'displayName', sortable: true }\r\n];\r\n\r\nconst AppraisalDashboard = (props) => {\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n const screenName = params.get('screen');\r\n const screenId = params.get('id');\r\n\r\n const crumbs = [\r\n { name: 'Home', path: '/' },\r\n { name: 'Appraisal', path: '/Appraisal_Dashboard' },\r\n { name: screenName, active: true }\r\n ];\r\n const history = useHistory();\r\n const baseUrl = `Appraisal?${screenId ? `appraisalStatusID=${screenId}` : 'appraisalStatusID='}`;\r\n const randerVehicleType = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = {record.vehicleTypeName}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const randerVehicleStatus = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = {record.statusDescription}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const randerRef = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = {value}
;\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const renderActionCol = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n {\r\n const searchQuery = `?appraisalId=${record?.recordId}&Vehid=${record?.vehicleTypeId}`;\r\n history.push({\r\n pathname: `/Appraisal_createAppraisal`,\r\n search: searchQuery\r\n });\r\n }}\r\n >\r\n {/* */}\r\n \r\n {/* */}\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n const columns = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n const typeCol = tempCols.find((j) => j.field === 'vehicleTypeId');\r\n const refCol = tempCols.find((j) => j.field === 'recordId');\r\n const ActionCol = tempCols.find((j) => j.field === 'action');\r\n if (ActionCol) {\r\n ActionCol.renderer = renderActionCol;\r\n }\r\n if (typeCol) {\r\n typeCol.renderer = randerVehicleType;\r\n }\r\n if (refCol) {\r\n refCol.renderer = randerRef;\r\n }\r\n !props.id &&\r\n tempCols.push({\r\n title: 'Status',\r\n field: 'appraisalStatusID',\r\n sortable: true,\r\n isDropDown: true,\r\n listIdFromAPIResponse: 'status',\r\n dropDownValueField: 'id',\r\n dropDownLableField: 'name',\r\n renderer: randerVehicleStatus\r\n });\r\n let temp2 = tempCols.map((c) => {\r\n let obj = {};\r\n if (c.title !== 'Action') {\r\n obj.events = {\r\n style: { cursor: 'pointer' },\r\n click: function (e) {\r\n const searchQuery = `?appraisalId=${e?.data?.record?.recordId}&Vehid=${e?.data?.record?.vehicleTypeId}`;\r\n history.push({\r\n pathname: `/Appraisal_createAppraisal`,\r\n search: searchQuery\r\n });\r\n }\r\n };\r\n }\r\n\r\n return {\r\n ...c,\r\n ...obj\r\n };\r\n });\r\n\r\n return temp2;\r\n }, []);\r\n\r\n const addButton = (gridRef, valueList) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n history.push({\r\n pathname: `/Appraisal_createAppraisal`\r\n })\r\n }\r\n >\r\n {/* */}\r\n \r\n {/* */}\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n 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={baseUrl}\r\n AddBtn={addButton}\r\n dropDownListProvider={getAppraisalDropdownsResolveData}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default AppraisalDashboard;\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport {\r\n ButtonGroup,\r\n Grid,\r\n IconButton,\r\n LinearProgress,\r\n Tooltip,\r\n Badge,\r\n Card,\r\n CardHeader,\r\n CardContent,\r\n Typography,\r\n TextField,\r\n FormLabel,\r\n CircularProgress,\r\n Chip,\r\n Avatar\r\n} from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { TextBox } from '../../../Core/FormInput';\r\nimport moment from 'moment';\r\n\r\nimport AspectRatioIcon from '@material-ui/icons/AspectRatio';\r\n\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport AppContext from '../../../App/AppContext';\r\nimport {\r\n getInvoiceBranch,\r\n getInvoicedHoursCalender,\r\n getPartsCalender,\r\n getReportingGetSafetyCheckDue,\r\n getReportingGetVehiceMOTDue,\r\n getReportingGetVehiceServices\r\n} from '../../../Core/Service/ReportScreens-service';\r\n// import { VehicleModalDetail } from './vehicleDetailsModal';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\nimport { CircularProgressbar, buildStyles } from 'react-circular-progressbar';\r\nimport { useWindowSize } from '../../../Core/Controls/ScreenResolution';\r\nimport { first } from 'lodash';\r\n// import VehicleDueDetailsList from './VehicleDueDetailListModal';\r\n\r\nconst setPercentage = (profit, budget) => {\r\n if (!profit) {\r\n return 0;\r\n } else {\r\n if (budget == null || budget == 0) {\r\n return 100;\r\n } else {\r\n let value = (+profit / +budget) * 100;\r\n\r\n return Math.round(value) <= 100 ? Math.round(value) : 100;\r\n }\r\n }\r\n};\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: 'auto',\r\n height: '135px',\r\n border: ' 1px solid rgba(0,0,0,0.1)',\r\n borderRadius: 12,\r\n minWidth: 250\r\n\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 - 90);\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 cardRow: {\r\n padding: '3px',\r\n borderBottom: ' 1px dotted black',\r\n cursor: 'pointer',\r\n '&:nth-of-type(odd)': {\r\n background: '#E8E8E8'\r\n }\r\n },\r\n cardHeader: {\r\n height: '10px',\r\n // backgroundColor: (props) => console.log(props, 'ssssssss'),\r\n // border: (props) => `1px solid ${props.portalMenuBarBackgroundColour}`,\r\n // color: 'white',\r\n textAlign: 'left',\r\n padding: '10px !important'\r\n },\r\n loaderContainer: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n height: '100%',\r\n zIndex: 99,\r\n background: 'grey',\r\n opacity: '0.6'\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() - 10;\r\n let endYear = d.getFullYear() + 10;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ description: `${startYear}`, id: `${startYear}` });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst monthsList = formatters.constantMonthList();\r\n\r\nconst PartsCalender = (props) => {\r\n const { portalSettings, showTopNavAndMenu, loggedIn, isTopNav, userRoles } = useContext(AppContext);\r\n const classes = useStyles({ ...props, ...portalSettings });\r\n const isCustomer = userRoles.includes('customer');\r\n const isInternal = userRoles.includes('internal');\r\n const [width, height] = useWindowSize();\r\n const [state, setState] = useState({\r\n branchList: [],\r\n branchCode: {},\r\n monthCode: monthsList[`${new Date().getMonth()}`],\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` },\r\n currentMonthDays: [],\r\n filterData: [],\r\n holidays: [],\r\n branchID: null,\r\n branchIDObj: {},\r\n filterList: [],\r\n dailybudget: []\r\n });\r\n\r\n console.log(state);\r\n\r\n useEffect(async () => {\r\n console.log('UseEffect_1');\r\n let res = await getInvoiceBranch();\r\n setState((st) => ({\r\n ...st,\r\n branchList: res.data.map((n) => ({\r\n description: n.branchName,\r\n id: n.branchID\r\n })),\r\n branchID: res.data[0].branchID,\r\n branchIDObj: {\r\n description: res.data[0].branchName,\r\n id: res.data[0].branchID\r\n }\r\n }));\r\n }, []);\r\n\r\n useEffect(() => {\r\n let HolidaysList = [...state.holidays];\r\n let dataList = [...state.dailybudget];\r\n dataList.forEach((j) => {\r\n let findList = HolidaysList.find((h) => j.dateEditted === h.date);\r\n if (findList) {\r\n findList.actualSale = j.actualSale;\r\n findList.actualSold = j.actualSold;\r\n }\r\n });\r\n\r\n setState((st) => ({\r\n ...st,\r\n filterList: HolidaysList,\r\n showLoader: false\r\n }));\r\n }, [state.holidays, state.dailybudget]);\r\n\r\n useEffect(async () => {\r\n let startDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .startOf('month')\r\n .format('YYYY-MM-DD');\r\n let endDate = moment([state.yearCode.id, state.monthCode.id - 1])\r\n .endOf('month')\r\n .format('YYYY-MM-DD');\r\n\r\n setState((st) => ({ ...st, showLoader: true }));\r\n\r\n if (state.branchID) {\r\n let newRes = await getPartsCalender(startDate, endDate, state.branchID);\r\n setState((st) => ({ ...st, budget: newRes?.data?.budget, dailybudget: newRes?.data?.dailybudget, holidays: newRes?.data?.holidays }));\r\n }\r\n }, [state.yearCode, state.monthCode, state.branchID]);\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n newSt.showLoader = true;\r\n if (fieldName === 'branchIDObj') {\r\n newSt.branchID = val.id;\r\n }\r\n return newSt;\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n Select Month\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Year\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n\r\n \r\n Branch\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n {state.showLoader && (\r\n \r\n \r\n \r\n )}\r\n \r\n {state?.holidays?.map((o, i) => {\r\n return (\r\n <>\r\n {width <= 1660 ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n = 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 50\r\n ? '#D92641'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n Hours\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o.actualSold)}\r\n \r\n\r\n Value \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.actualSale)}\r\n \r\n
\r\n \r\n = 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n pathColor:\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 50\r\n ? '#D92641'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 50 &&\r\n setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) < 80\r\n ? '#ff9f00'\r\n : setPercentage(o.actualSold, state.budget[0].dailyBudgetHours) >= 80\r\n ? '#569101'\r\n : '#D92641',\r\n trailColor: '#d6d6d6',\r\n textSize: '27px'\r\n })}\r\n />\r\n
\r\n \r\n\r\n \r\n \r\n \r\n Hours\r\n \r\n {formatters.ThousandSeparatorWithoutZero(o.actualSold)}\r\n \r\n\r\n Value \r\n \r\n {formatters.CurrencyThousandSeparatorWithoutZero(o.actualSale)}\r\n \r\n
\r\n \r\n \r\n \r\n \r\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 PartsCalender;\r\n","import { Button, Grid, IconButton, InputLabel } from '@material-ui/core';\r\nimport { Dashboard } from '@material-ui/icons';\r\nimport React, { useEffect, useState } from 'react';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport './ApprisalStyle.scss';\r\nimport { useHistory } from 'react-router-dom/cjs/react-router-dom.min';\r\nimport { getAppraisalDashboard, getStockbookList } from '../../../Core/Service/apprisal-service';\r\nimport AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { TextBox } from '../../../Core/FormInput';\r\n\r\nlet DashboardList = [\r\n {\r\n name: 'Awaiting Approval',\r\n count: 0,\r\n valueFieldName: 'awaitingApproval',\r\n id: 1\r\n },\r\n {\r\n name: 'Awaiting Review',\r\n count: 0,\r\n valueFieldName: 'awaitingReview',\r\n id: 2\r\n },\r\n {\r\n name: 'Under Review',\r\n count: 0,\r\n valueFieldName: 'underReview',\r\n id: 4\r\n }\r\n];\r\n\r\nconst ApprisalMaindashboard = () => {\r\n const history = useHistory();\r\n const [state, setState] = useState({ list: [], totalApprCount: 0, showMoadal: false, stockNo: '', List: [] });\r\n\r\n useEffect(async () => {\r\n let res = await getAppraisalDashboard();\r\n console.log(res, 'res');\r\n let total = 0;\r\n DashboardList.forEach((a) => {\r\n total += res.data.list[0][a.valueFieldName];\r\n });\r\n\r\n setState((st) => ({ ...st, list: res.data.list[0], totalApprCount: total }));\r\n }, []);\r\n\r\n const handleScreenRedirect = (obj) => {\r\n let query = `?screen=${obj.name}${obj.id ? `&id=${obj.id}` : ''}`;\r\n history.push({\r\n pathname: '/appraisal_Details',\r\n search: query\r\n });\r\n };\r\n\r\n const handleStockbook = () => {\r\n setState((st) => ({\r\n ...st,\r\n showMoadal: !st.showMoadal\r\n }));\r\n };\r\n\r\n const handleSearchStock = async () => {\r\n const searchQuery = `?stockId=${state.stockNo}`;\r\n history.push({\r\n pathname: `/Appraisal_createAppraisal`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const handleChange = (e) => {\r\n setState((st) => ({\r\n ...st,\r\n stockNo: e.target.value\r\n }));\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n history.push({\r\n pathname: `/Appraisal_createAppraisal`\r\n });\r\n }}\r\n >\r\n \r\n Create Appraisal
\r\n \r\n
\r\n \r\n
\r\n
Create Appraisal From Stock Book
\r\n
\r\n
handleScreenRedirect(b)}>\r\n
{state.list[b.valueFieldName] || 0}
\r\n
{b.name}
\r\n
{state.totalApprCount || 0}
\r\n All
\r\n \r\n \r\n \r\n \r\n \r\n {state.showMoadal ? (\r\n \r\n \r\n \r\n {/* Stock No */}\r\n \r\n \r\n \r\n 5 ? false : true}\r\n color=\"primary\"\r\n variant=\"contained\"\r\n style={{ marginTop: 8 }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default ApprisalMaindashboard;\r\n","import React, { useEffect, useState, useContext, useMemo } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport { Link } from 'react-router-dom';\r\nimport { EvenSpaceButtonGroup } from '../../../Core/ButtonGroup';\r\nimport './TechnicianApp_screen.css';\r\nimport moment from 'moment';\r\nimport { getTechnicianJobs } from '../../../Core/Service/technician-service';\r\nimport { IconButton, Tooltip } from '@material-ui/core';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\nimport { find } from 'lodash';\r\nimport { getWorkflows } from '../../../Core/Service/workflow-service';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport './TechnicianApp_screen.css';\r\n\r\nconst GridInfo = (props) => {\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n\r\n const handleClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const open = Boolean(anchorEl);\r\n const id = open ? 'simple-popover' : undefined;\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n {props?.filterReturnReasone.map((m) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n T\r\n \r\n \r\n \r\n \r\n {m.returnReason || 'Due date'}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default GridInfo;\r\n","import React, { useEffect, useState, useContext, useMemo } from 'react';\r\nimport AppContext from '../../../App/AppContext';\r\nimport { DataGrid, GridOverlay } from '@material-ui/data-grid';\r\nimport { Link } from 'react-router-dom';\r\nimport { BasicButtonGroup, EvenSpaceButtonGroup } from '../../../Core/ButtonGroup';\r\nimport './TechnicianApp_screen.css';\r\nimport moment from 'moment';\r\nimport { getTechnicianJobs } from '../../../Core/Service/technician-service';\r\nimport { IconButton, Tooltip } from '@material-ui/core';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\nimport { find } from 'lodash';\r\nimport { getWorkflows } from '../../../Core/Service/workflow-service';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport TechnicianGijgoGrid from './Grid';\r\nimport ReactDOM from 'react-dom';\r\nimport GridFilterModal from '../../internal/dashboard/FilterModal';\r\nimport { getGridFilterList, postGridFilterList } from '../../../Core/Service/workflow-service';\r\nimport FilterListIcon from '@material-ui/icons/FilterList';\r\nimport DialogComp from '../../../Core/Modal/dialogModal';\r\nimport GridInfo from './GridInfo';\r\nimport { getAllowedWorkflow } from '../../../Core/Service/workflow-service';\r\nimport MotHistoryScreen from '../../internal/ReportsScreens/MotHistoryScreen';\r\nimport ReportIcon from '@material-ui/icons/Report';\r\nimport StarIcon from '@material-ui/icons/Star';\r\nimport CustomerRating from '../../internal/dashboard/customerRating';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\nimport FilterModalMainTabComponent from '../../internal/dashboard/FilterModalMainTabComp';\r\n\r\nlet currentTechnicianId;\r\n\r\nconst useStyles = (props) =>\r\n makeStyles((thems) => {\r\n return {\r\n ...props\r\n };\r\n });\r\n\r\nconst isFalseValue = (val) => {\r\n if (val == false) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n};\r\n\r\nconst technicianJobBucket = [\r\n { id: 1, label: 'Jobs Assigned To You' },\r\n { id: 3, label: 'Jobs Assigned To Others' }\r\n // { id: 2, label: \"All other Jobs\" },\r\n];\r\n\r\nlet config = {\r\n // act: {\r\n // from: '',\r\n // to: '',\r\n // getSequence: 'actionSequence',\r\n // postSequence: 'actionSequence'\r\n // },\r\n wipNumber: {\r\n from: 'displayWIPNo',\r\n to: 'userGridColumnDisplayWIPNo',\r\n getSequence: 'wipNoSequence',\r\n postSequence: 'WIPNoSequence'\r\n },\r\n registration: {\r\n from: 'displayVehicleReg',\r\n to: 'userGridColumnDisplayVehicleReg',\r\n getSequence: 'vehicleRegSequence',\r\n postSequence: 'VehicleRegSequence'\r\n },\r\n makeModel: {\r\n from: 'displayModel',\r\n to: 'userGridColumnDisplayModel',\r\n getSequence: 'modelSequence',\r\n postSequence: 'modelSequence'\r\n },\r\n customerName: {\r\n from: 'displayCustomer',\r\n to: 'userGridColumnDisplayCustomer',\r\n getSequence: 'customerSequence',\r\n postSequence: 'customerSequence'\r\n },\r\n dateDueIn: {\r\n from: 'displayDateDueIn',\r\n to: 'userGridColumnDisplayDateDueIn',\r\n getSequence: 'dateDueInSequence',\r\n postSequence: 'dateDueInSequence'\r\n },\r\n dateDueOut: {\r\n from: 'displayDateDueOut',\r\n to: 'userGridColumnDisplayDateDueOut',\r\n getSequence: 'dateDueOutSequence',\r\n postSequence: 'dateDueOutSequence'\r\n },\r\n returnReason: {\r\n from: 'displayReturnReason',\r\n to: 'userGridColumnDisplayReturnReason',\r\n getSequence: 'returnReasonSequence',\r\n postSequence: 'returnReasonSequence'\r\n },\r\n branchShortName: {\r\n from: 'displayBranch',\r\n to: 'userGridColumnDisplayBranch',\r\n getSequence: 'branchSequence',\r\n postSequence: 'branchSequence'\r\n },\r\n franchiseName: {\r\n from: 'displayFranchise',\r\n to: 'userGridColumnDisplayFranchise',\r\n getSequence: 'franchiseSequence',\r\n postSequence: 'franchiseSequence'\r\n },\r\n st: {\r\n from: 'displayJobDescription',\r\n to: 'userGridColumnDisplayJobDescription',\r\n getSequence: 'jobDescriptionSequence',\r\n postSequence: 'jobDescriptionSequence'\r\n },\r\n accountNo: {\r\n from: 'displayAccount',\r\n to: 'userGridColumnDisplayAccount',\r\n getSequence: 'accountSequence',\r\n postSequence: 'accountSequence'\r\n },\r\n createdBy: {\r\n from: 'displayCreatedBy',\r\n to: 'userGridColumnDisplayCreatedBy',\r\n getSequence: 'createdBySequence',\r\n postSequence: 'createdBySequence'\r\n },\r\n assigned: {\r\n from: 'displayAssignedDate',\r\n to: 'userGridColumnDisplayAssignedDate',\r\n getSequence: 'assignedDateSequence',\r\n postSequence: 'assignedDateSequence'\r\n },\r\n taken: {\r\n from: 'displayTimeTaken',\r\n to: 'userGridColumnDisplayTimeTaken',\r\n getSequence: 'timeTakenSequence',\r\n postSequence: 'timeTakenSequence'\r\n },\r\n status: {\r\n from: 'displayStatus',\r\n to: 'UserGridColumnDisplayStatus',\r\n getSequence: 'statusSequence',\r\n postSequence: 'statusSequence'\r\n },\r\n assignedDays: {\r\n from: 'displayAssignedDays',\r\n to: 'UserGridColumnDisplayAssignedDays',\r\n getSequence: 'assignedDaysSequence',\r\n postSequence: 'assignedDaysSequence'\r\n },\r\n owningOperator: {\r\n from: 'displayOwningOperator',\r\n to: 'UserGridDisplayColumnOwningOperator',\r\n getSequence: 'owningOperatorSequence',\r\n postSequence: 'owningOperatorSequence'\r\n },\r\n jobAssignedUser: {\r\n from: 'displayJobAssignedUser',\r\n to: 'UserGridColumnDisplayJobAssignedUser',\r\n getSequence: 'jobAssignedUserSequence',\r\n postSequence: 'jobAssignedUserSequence'\r\n },\r\n chassisNumber: {\r\n from: 'displayChassisNumber',\r\n to: 'UserGridColumnDisplayChassisNumber',\r\n getSequence: 'chassisNumberSequence',\r\n postSequence: 'chassisNumberSequence'\r\n },\r\n\r\n courtesyCarReq: {\r\n from: 'displayCourtesyCarReq',\r\n to: 'UserGridColumnDisplayCourtesyCarReq',\r\n getSequence: 'courtesyCarReqSequence',\r\n postSequence: 'courtesyCarReqSequence'\r\n },\r\n customerWaiting: {\r\n from: 'displayCustomerWaiting',\r\n to: 'UserGridColumnDisplayCustomerWaiting',\r\n getSequence: 'customerWaitingSequence',\r\n postSequence: 'customerWaitingSequence'\r\n }\r\n};\r\n\r\nconst TechnicianApp = (props) => {\r\n const [state, setState] = useState({\r\n technicianWorkflowId: undefined,\r\n rows: [],\r\n totalRec: 0,\r\n id: null,\r\n btnid: null,\r\n currentTechnicianId: null,\r\n tempObj: {},\r\n filterList: [],\r\n displayPagination: true,\r\n filterReturnReasone: [],\r\n technicianJobBucket: []\r\n });\r\n const { portalSettings, getUserPreference, isAppReaload } = useContext(AppContext);\r\n const canSetCustomerRating = AppStorage.getCanSetCustomerRating();\r\n\r\n let checkCurrentId = state.currentTechnicianId == 1 || state.currentTechnicianId == 3;\r\n let getURL = checkCurrentId ? `TechnicianJobs/${state.currentTechnicianId}` : `WorkflowJobs/GetWorkflow/${state.currentTechnicianId}`;\r\n\r\n const pullAndUpdateState = async () => {\r\n getWorkflows().then((res) => {\r\n if (res.success) {\r\n const wf = find(res.data, (w) => w.isTechnicianWorkflow);\r\n if (wf) {\r\n setState((st) => ({\r\n ...st,\r\n technicianWorkflowId: wf.id\r\n }));\r\n }\r\n }\r\n });\r\n };\r\n\r\n const pullGridFilterList = async () => {\r\n let data = getUserPreference();\r\n if (data) {\r\n setState((st) => ({\r\n ...st,\r\n appbarLocation: data.details[0].appbarLocation || 'T',\r\n languageCode: data.details[0].languageCode,\r\n languageData: data.languages,\r\n tempObj: data.details[0] || {},\r\n displayPagination: isFalseValue(data.details[0]?.displayPagination)\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullAndUpdateState();\r\n let res = await getAllowedWorkflow();\r\n let data = res?.data?.list?.table;\r\n const buttons = res?.data?.list?.table.map((w) => ({\r\n id: w.id,\r\n label: w.label,\r\n displayJobPriorityButton: w.displayJobPriorityButton == 'Y' ? true : false,\r\n displayCustomerRatingButton: w.displayCustomerRatingButton == 'Y' ? true : false\r\n }));\r\n setState((st) => ({\r\n ...st,\r\n technicianJobBucket: [{ id: 1, label: 'Jobs Assigned To You' }, { id: 3, label: 'Jobs Assigned To Others' }, ...buttons]\r\n }));\r\n }, []);\r\n const ratingList = {\r\n 1: ,\r\n 2: ,\r\n 3: \r\n };\r\n const custerRating = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n jobId: val.headerRecordID,\r\n workFlowData: val,\r\n showCustomerRating: true\r\n }));\r\n };\r\n const handleCustmer = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n customerMessage: val,\r\n displayCustomerMessage: true\r\n }));\r\n };\r\n const handleBtnClcik = (m) => {\r\n props.history.push(\r\n `/Job/${m.headerRecordID}/${checkCurrentId ? state.technicianWorkflowId : state.currentTechnicianId}/${m.technicianJobID}/${m.ownJob}`\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n if (isAppReaload) {\r\n pullGridFilterList();\r\n }\r\n }, [isAppReaload]);\r\n\r\n const editButton = (id, val) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n {state.technicianWorkflowId && (\r\n handleBtnClcik(val)}>\r\n \r\n \r\n )}\r\n \r\n \r\n {canSetCustomerRating ? (\r\n <>\r\n {val.customerRatingIcon ? (\r\n \r\n custerRating(val)}>\r\n {ratingList[val.customerRatingIcon]}\r\n \r\n \r\n ) : (\r\n \r\n custerRating(val)}>\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n state.displayCustomerRatingButton && (\r\n \r\n handleCustmer(val.customerRatingNotes)}>\r\n {ratingList[val.customerRatingIcon]}\r\n \r\n \r\n )\r\n )}\r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const regNumberRendrer = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n setState((st) => ({ ...st, showMotHistory: true, regNo: record?.registration, FranchiseCode: record?.f }))}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n {value}\r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column_new = [\r\n {\r\n field: '',\r\n title: 'Action',\r\n sortable: false,\r\n filterable: false,\r\n renderer: editButton,\r\n width: 80\r\n },\r\n {\r\n field: 'wipNumber',\r\n title: `${portalSettings.portalSettingGridWIPNoLabel || 'WIP No'}`,\r\n sortable: true,\r\n width: 70\r\n },\r\n {\r\n field: 'registration',\r\n title: `${portalSettings.portalSettingGridVehicleRegLabel || 'Vehicle Reg'}`,\r\n renderer: regNumberRendrer,\r\n sortable: true,\r\n width: 90\r\n },\r\n {\r\n field: 'makeModel',\r\n title: `${portalSettings.portalSettingGridModelLabel || 'Model'}`,\r\n sortable: true,\r\n width: 200\r\n },\r\n {\r\n field: 'customerName',\r\n title: `${portalSettings.portalSettingGridCustomerNameLabel || 'Customer Name'}`,\r\n sortable: true,\r\n width: 200\r\n },\r\n {\r\n field: 'dateDueIn',\r\n title: `${portalSettings.portalSettingGridDateDueInLabel || 'Date Due In'}`,\r\n sortable: true,\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueIn != null) {\r\n return moment(record.dateDueIn).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '';\r\n }\r\n },\r\n {\r\n field: 'dateDueOut',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridDateDueOutLabel || 'Date Due Out'}`,\r\n // type: 'date',\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueOut != null) {\r\n return moment(record.dateDueOut).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '';\r\n }\r\n },\r\n {\r\n field: 'returnReason',\r\n title: `${portalSettings.portalSettingGridReturnReasonLabel || 'Return Reason'}`,\r\n sortable: true,\r\n width: 190\r\n },\r\n {\r\n field: 'chassisNumber',\r\n title: `${portalSettings.portalSettingGridChassisNumberLabel || 'Chassis Number'}`,\r\n sortable: true,\r\n width: 200\r\n },\r\n {\r\n field: 'branchShortName',\r\n title: `${portalSettings.portalSettingGridBranchLabel || 'Branch'}`,\r\n sortable: true,\r\n width: 120\r\n },\r\n { field: 'franchiseName', sortable: true, title: `${portalSettings.portalSettingGridFranchiseLabel || 'Franchise'}`, width: 160 },\r\n { field: 'st', sortable: true, title: `${portalSettings.portalSettingGridJobDescriptionLabel || 'Job Description'}`, width: 170 },\r\n { field: 'accountNo', sortable: true, title: `${portalSettings.portalSettingGridAccountLabel || 'Account'}`, width: 80 },\r\n {\r\n field: 'userName',\r\n title: 'Technician',\r\n sortable: true,\r\n width: 180\r\n },\r\n {\r\n field: 'assigned',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridAssignedDateLabel || 'Assigned Date'}`,\r\n width: 120,\r\n renderer: function (value, record) {\r\n if (record.assigned != null) {\r\n return moment(record.assigned).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '';\r\n }\r\n },\r\n {\r\n field: 'taken',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridTimeTakenLabel || 'Time Taken'}`,\r\n width: 100\r\n },\r\n {\r\n field: 'status',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridStatusLabel || 'Status'}`,\r\n width: 100\r\n },\r\n {\r\n field: 'assignedDays',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridAssignedDaysLabel || 'Assigned Days'}`,\r\n width: 100\r\n },\r\n {\r\n field: 'owningOperator',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridOwningOperatorLabel || 'Owning Operator'}`,\r\n width: 100\r\n },\r\n {\r\n field: 'courtesyCarReq',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridCourtesyCarReqLabel || 'Loan Vehicle'}`,\r\n width: 140\r\n },\r\n {\r\n field: 'customerWaiting',\r\n sortable: true,\r\n title: `${portalSettings.portalSettingGridCustomerWaitingLabel || 'Customer Waiting'}`,\r\n width: 140\r\n }\r\n ]\r\n .map((c) => {\r\n let obj = {};\r\n if (Object.keys(state.tempObj).length > 0 && !c.isShow) {\r\n obj.sequenceNo = state.tempObj[config[c.field]?.getSequence] || 9999999;\r\n if (c.title !== 'Action') {\r\n obj.hidden = !state.tempObj[config[c.field]?.from];\r\n }\r\n } else {\r\n obj.hidden = false;\r\n }\r\n if (c.title !== 'Action' && c.field !== 'registration' && c.field !== 'chassisNumber') {\r\n obj.events = {\r\n click: function (e) {\r\n if (checkCurrentId) {\r\n props.history.push(\r\n `/Job/${e.data.record.headerRecordID}/${checkCurrentId ? state.technicianWorkflowId : state.currentTechnicianId}/${\r\n e.data.record.technicianJobID\r\n }/${e.data.record.ownJob}?ProcessId=${e.data.record.pid}`\r\n );\r\n } else {\r\n props.history.push(`/Job/${e.data.record.headerRecordID}/${e.data.record.workflowID}?ProcessId=${e.data.record.pid}`);\r\n }\r\n }\r\n };\r\n }\r\n if (c.title == 'Action') {\r\n obj.sequenceNo = -1;\r\n }\r\n return {\r\n ...c,\r\n ...obj,\r\n headerCssClass: 'gridHeader'\r\n };\r\n })\r\n .sort((a, b) => {\r\n return a.sequenceNo - b.sequenceNo;\r\n });\r\n\r\n if (state.currentTechnicianId == 1) {\r\n let isTechnicianIndex = column_new.findIndex((q) => q.field == 'userName');\r\n column_new.splice(isTechnicianIndex, 1);\r\n }\r\n\r\n const buttonClicked = async (btn) => {\r\n setState((st) => ({\r\n ...st,\r\n currentTechnicianId: btn.id,\r\n currentWorkflowLabel: btn.label,\r\n displayCustomerRatingButton: btn.displayCustomerRatingButton || false\r\n }));\r\n };\r\n\r\n const closeDialog = (res) => {\r\n setState((st) => ({ ...st, showFilter: false, displayCustomerMessage: false, showCustomerRating: false }));\r\n\r\n res && pullGridFilterList();\r\n };\r\n\r\n const handleOpen = () => {\r\n let tempArr = [...column_new]\r\n .map((q) => {\r\n return {\r\n field: q.field,\r\n title: q.title,\r\n hidden: !q.hidden,\r\n fieldName: config[q.field]?.to,\r\n postSequenceFieldName: config[q.field]?.postSequence\r\n };\r\n })\r\n .filter((p) => (!p.isShow && p.title != 'Action' ? p : null));\r\n // tempArr.push({\r\n // field: 'pagination',\r\n // title: 'Pagination',\r\n // hidden: state.displayPagination,\r\n // fieldName: 'UserGridColumnDisplayPagination'\r\n // });\r\n setState((st) => ({ ...st, showFilter: true, filterList: tempArr }));\r\n };\r\n\r\n const getfilterReturnReasone = (returnReasonelist) => {\r\n const uniqueReturnReasonelist = [...new Map(returnReasonelist.map((item) => [item['returnReason'], item])).values()];\r\n setState((st) => ({ ...st, filterReturnReasone: uniqueReturnReasonelist }));\r\n };\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {state.currentTechnicianId && state.technicianWorkflowId && (\r\n
\r\n \r\n
\r\n )}\r\n {state.showFilter ? (\r\n
closeDialog(false)} fullWidth>\r\n \r\n {/* */}\r\n \r\n ) : null}\r\n {state.showMotHistory && (\r\n
setState((st) => ({ ...st, showMotHistory: false }))}\r\n maxWidth=\"md\"\r\n fullWidth\r\n overflow={'auto'}\r\n height=\"480px\"\r\n >\r\n \r\n \r\n )}\r\n {state.showCustomerRating ? (\r\n closeDialog(false)} fullWidth>\r\n \r\n \r\n ) : null}\r\n {state.displayCustomerMessage ? (\r\n closeDialog(false)} fullWidth>\r\n \r\n {state.customerMessage}\r\n \r\n \r\n ) : null}\r\n \r\n Diagnostic Road Test\r\n \r\n \r\n Mileage In\r\n \r\n \r\n \r\n Mileage Out\r\n \r\n \r\n \r\n Time In\r\n \r\n \r\n \r\n Time Out\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n }\r\n label=\"Smoke Test Performed\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Service Indicator Reset\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Radio Code Reset\"\r\n />\r\n \r\n \r\n \r\n }\r\n label=\"Time Clock Reset\"\r\n />\r\n \r\n \r\n \r\n Technician {hideBrace ? ({`${state.technicianName || ''} ${state.technicianDateSigned}`}) : ' Signature'}\r\n \r\n }\r\n sign={state.imgtechniciansign}\r\n name=\"techniciansign\"\r\n // hideBtn={!isTechnician}\r\n hideBtn={!ShowSubmit ? !(isTechnician && !state.isTechReadonly) : true}\r\n clearSig={clearSig}\r\n />\r\n {state.errors['techniciansign']}\r\n \r\n\r\n {state.imgteamleadersign && (\r\n \r\n \r\n Workshop Controller\r\n {hideBrace2 ? ({`${state.teamLeaderName || ''} ${state.teamLeaderDateSigned}`}) : ' Signature'}\r\n \r\n }\r\n sign={state.imgteamleadersign}\r\n name=\"teamleadersign\"\r\n hideBtn={true}\r\n />\r\n \r\n )}\r\n {/* {!state.isTechReadonly && ( */}\r\n \r\n {!ShowSubmit\r\n ? !state.imgteamleadersign &&\r\n isTechnician &&\r\n !state.isTechReadonly && (\r\n \r\n {portalSettings.portalSettingsShowTechWriteUpSaveBtn && (\r\n \r\n {'\\u{2800}'}\r\n \r\n Save\r\n \r\n \r\n )}\r\n {portalSettings.portalSettingDisplaySubmitbutton && (\r\n \r\n {'\\u{2800}'}\r\n \r\n Submit\r\n \r\n \r\n )}\r\n \r\n )\r\n : null}\r\n \r\n {/* )} */}\r\n \r\n {state.showConfirmModal ? (\r\n \r\n handleSubmit('S')}\r\n handleCancel={hideConfirmationModal}\r\n />\r\n \r\n ) : null}\r\n {state.showSaveConfirmModal ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {state.showGrid ? : null}\r\n \r\n {!fromStep && (\r\n >\" aria-label=\"breadcrumb\">\r\n \r\n Technician App\r\n \r\n \r\n Technician Write-up\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n Registration Number: {state.registration}\r\n \r\n WIP No: {state.wipNumber}\r\n \r\n \r\n Customer: {state.customerName}\r\n \r\n \r\n Zoom\r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n {state.technicians.map((m) => (\r\n \r\n TechBtnClick(m.technicianJobID)}\r\n >\r\n {m.technician}\r\n \r\n
\r\n ))}\r\n\r\n {TabBody()}\r\n \r\n )}\r\n \r\n \r\n
\r\n {!params.row.partReqQuantity && *}\r\n \r\n
\r\n );\r\n }\r\n },\r\n {\r\n field: 'partReqPartNumber',\r\n headerName: 'Part Number',\r\n width: 160,\r\n renderCell: (params) => {\r\n return (\r\n \r\n );\r\n }\r\n },\r\n { field: 'issueStatus', headerName: 'Issue Status', width: 230 },\r\n {\r\n field: '',\r\n headerName: '',\r\n width: 140,\r\n sortable: false,\r\n renderCell: (params) => (\r\n = 0 ? 'pointer' : ''}` }}>\r\n 0 || 0}\r\n count={params.row.photosUploaded || 0}\r\n onClick={() =>\r\n params.row.photosUploaded >= 0 &&\r\n setState((st) => ({ ...st, partId: params.row.id, desc: params.row.partReqPartDescription, showImage: true }))\r\n }\r\n />\r\n setShowInfo(params.row)} />\r\n
\r\n )\r\n }\r\n ];\r\n const isTechnician = userRoles.includes('technician');\r\n const isAuditor = userRoles.includes('auditor');\r\n\r\n const new_columns = useMemo(() => {\r\n const tempCols = [...columns];\r\n if (state.checkIssued) {\r\n tempCols.splice(0, 2, { field: 'qnIssued', headerName: 'Issued', width: 140 });\r\n }\r\n return tempCols;\r\n }, [columns]);\r\n\r\n const technicianJobId = props.match.params?.technicianJobId;\r\n\r\n useEffect(async () => {\r\n setState((st) => ({\r\n ...st,\r\n technicianJobID: technicianJobId\r\n }));\r\n getScreenDropdown();\r\n }, [technicianJobId]);\r\n\r\n const TechBtnClick = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n technicianJobID: val.technicianJobID,\r\n createdUserID: val.createdUserID,\r\n ownUser: val.ownUser == 'Y'\r\n }));\r\n pullWorkflowAndUpdateState(val.createdUserID);\r\n };\r\n const getScreenDropdown = async () => {\r\n let result = await getScreenDropdownPartReqID(Id, state.createdUserID, 'R');\r\n setState((st) => {\r\n const nst = { ...st };\r\n // nst.stockList = ops1;\r\n // nst.statusList = ops;\r\n nst.wipDetails = result.data.wipDetails[0];\r\n nst.createdUserList = result.data.technician;\r\n if (st.createdUserID == null) {\r\n nst.createdUserID = result.data.technician[0]?.createdUserID;\r\n nst.technicianJobID = result.data.technician[0]?.technicianJobID;\r\n nst.createdUserID = result.data.technician[0]?.createdUserID;\r\n nst.ownUser = result.data.technician[0]?.ownUser == 'Y';\r\n }\r\n pullWorkflowAndUpdateState(result.data.technician[0]?.createdUserID);\r\n return nst;\r\n });\r\n };\r\n const pullWorkflowAndUpdateState = async (createdUserID) => {\r\n let result = await getPartReqs(Id, createdUserID, 'R', state.technicianJobID);\r\n const Result = result.data?.partReqs?.map((row) => ({\r\n id: row.partReqID,\r\n partReqPartDescription: row.partReqPartDescription,\r\n partReqQuantity: row.partReqQuantity,\r\n isDeleted: false,\r\n disabled: row.issuerSignature && row.approverSignature,\r\n isApproved: row.isApproved,\r\n qnIssued: row.partReqIssuedQuantity,\r\n requestor: row.requestor,\r\n approver: row.approver,\r\n partReqStatusDescription: row.partReqStatusDescription,\r\n issuer: row.issuer,\r\n issueStatus: row.issueStatus,\r\n requestorSignature: row.requestorSignature,\r\n issuerSignature: row.issuerSignature,\r\n approverSignature: row.approverSignature,\r\n partReqId: row.partReqID,\r\n requestedTime: row.requestedTime,\r\n issuedTime: row.issuedTime,\r\n approvedTime: row.approvedTime,\r\n photosUploaded: row.photosUploaded,\r\n isFitted: row.isFitted,\r\n partReqPartNumber: row.partReqPartNumber,\r\n Photos: [],\r\n oldPhoto: []\r\n }));\r\n if (result.success) {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n // if (st.createdUserID == null) {\r\n // newSt.createdUserID = result.data.technician[0]?.createdUserID;\r\n // newSt.technicianJobID = result.data.technician[0]?.technicianJobID;\r\n // newSt.createdUserID = result.data.technician[0]?.createdUserID;\r\n // newSt.ownUser = result.data.technician[0]?.ownUser == 'Y';\r\n // }\r\n newSt.rows = Result;\r\n // newSt.createdUserList = result.data?.technician;\r\n // newSt.wipDetails = result.data?.wipDetails[0];\r\n newSt.checkIssued = some(result.data.partReqs, (r) => r.qnIssued);\r\n\r\n return newSt;\r\n });\r\n // setState((st) => ({\r\n // ...st,\r\n // rows: Result,\r\n // createdUserList: result.data?.technician,\r\n // wipDetails: result.data?.wipDetails[0],\r\n // checkIssued: some(result.data.partReqs, (r) => r.qnIssued)\r\n // //createdUserID: result.data.technician[0]?.createdUserID\r\n // // partRequstorSignature: result.data.partReqs[0]?.partRequstorSignature\r\n // }));\r\n }\r\n if (!result.success) {\r\n showToast(result.message);\r\n }\r\n };\r\n\r\n const addPartToLocally = () => {\r\n if (state.quantity === null) {\r\n showToast('Quantity is required');\r\n } else {\r\n let newPartToAdd = {\r\n partReqPartDescription: state.part,\r\n partReqQuantity: state.quantity,\r\n qnIssued: '-',\r\n isDeleted: +state.quantity === 0,\r\n ...(state.partId && { partReqId: state.partId || null })\r\n };\r\n setState((st) => ({\r\n ...st,\r\n rows: state.rows.filter((item) => item.id !== state.partId)\r\n }));\r\n setState((st) => {\r\n newPartToAdd.id = st.rows.length === 0 ? 1 : Math.max(...st.rows.map((c) => c.id)) + 1;\r\n return {\r\n ...st,\r\n rows: [...st.rows, newPartToAdd],\r\n part: '',\r\n quantity: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n }\r\n };\r\n\r\n const validations = (mode) => {\r\n const { partRequstorSignature } = state;\r\n let formIsValid = true;\r\n let errors = {};\r\n\r\n if (!partRequstorSignature) {\r\n errors.partRequstorSignature = 'Technician signature is required';\r\n formIsValid = false;\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return formIsValid;\r\n };\r\n\r\n const handelAddPartToServer = async (mode) => {\r\n if (isTechnician) {\r\n if (state.rows?.length > 0) {\r\n addPart(mode);\r\n } else {\r\n showToast('Please add least one part');\r\n }\r\n } else {\r\n addPart(mode);\r\n }\r\n };\r\n const addPart = async (mode) => {\r\n mode == 'save' ? setBtnLoader((st) => ({ ...st, btn2: true })) : setBtnLoader((st) => ({ ...st, btn1: true }));\r\n const data = {\r\n partRequstorSignature: state.partRequstorSignature,\r\n partReqsAddVM: state.rows.map((c) => ({\r\n partReqQuantity: c.partReqQuantity,\r\n partReqPartDescription: c.partReqPartDescription,\r\n isDeleted: c.isDeleted,\r\n partReqId: c.partReqId,\r\n isFitted: c.isFitted,\r\n partReqPartNumber: c.partReqPartNumber\r\n })),\r\n mode: mode\r\n };\r\n let res1 = await postPhotosByPartReqID(state.rows);\r\n let res = await requestPartReq(Id, data, state.createdUserID, state.technicianJobID);\r\n if (!res.success) {\r\n console.error(res);\r\n }\r\n showToast(res.message);\r\n if (res.success && fromStep) {\r\n mode == 'save' ? setBtnLoader((st) => ({ ...st, btn2: false })) : setBtnLoader((st) => ({ ...st, btn1: false }));\r\n setTimeout(() => {\r\n window.top.postMessage({ type: navigateToDashboard ? 'navigate-dashboard' : 'close-modal' }, '*');\r\n }, 1000);\r\n }\r\n };\r\n\r\n const showConfirmationModal = () => {\r\n if (validations()) {\r\n setState((st) => ({ ...st, showConfirmModal: true }));\r\n }\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n return { ...st, [name]: value };\r\n });\r\n };\r\n\r\n const signChange = (e) => {\r\n setState((st) => {\r\n return { ...st, ...e };\r\n });\r\n };\r\n\r\n const clearSig = (val) => {\r\n setState((st) => ({\r\n ...st,\r\n partRequstorSignature: null\r\n }));\r\n };\r\n\r\n function CustomNoRowsOverlay() {\r\n return (\r\n \r\n No parts available
\r\n \r\n );\r\n }\r\n\r\n const gridheight = `calc(100vh - ${isTechnician ? '348px' : '274px'})`;\r\n\r\n const inputFile = useRef(null);\r\n\r\n const upload = async (e) => {\r\n const files = Array.from(e.target.files);\r\n\r\n files.map((file) => {\r\n const reader = new FileReader();\r\n reader.readAsText(file);\r\n\r\n reader.onload = () => {\r\n const res = reader.result.split('\\n');\r\n res.splice(0, 1);\r\n\r\n res.map((row) => {\r\n const parts = row.split('|');\r\n\r\n const partDesc = parts[0] + ' - ' + parts[1] + ' - ' + parts[5];\r\n const quantity = parts[2];\r\n\r\n if (row == '' || quantity == '') return;\r\n\r\n let newPartToAdd = {\r\n partReqPartDescription: partDesc,\r\n partReqQuantity: quantity % 1 == 0 ? Math.trunc(quantity) : quantity,\r\n qnIssued: '-'\r\n };\r\n\r\n setState((st) => {\r\n newPartToAdd.id = st.rows.length === 0 ? 1 : Math.max(...st.rows.map((c) => c.id)) + 1;\r\n return {\r\n ...st,\r\n rows: [...st.rows, newPartToAdd],\r\n part: '',\r\n quantity: '',\r\n isUpdate: false,\r\n partId: undefined\r\n };\r\n });\r\n });\r\n };\r\n\r\n reader.onerror = () => {\r\n console.log('Error reading .xfr File');\r\n };\r\n });\r\n };\r\n\r\n const makeEmptyPhotos = (name) => {\r\n let changedArray = [...state.rows];\r\n let objIndex = state.rows.findIndex((x) => x.partReqId === state.partId);\r\n changedArray[objIndex][name] = [];\r\n setState((st) => ({ ...st, rows: changedArray }));\r\n };\r\n const setPhotos = (name) => {\r\n setState((st) => ({ ...st, name }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n {!fromStep && (\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Technician App\r\n \r\n \r\n Part Requisitions\r\n \r\n \r\n )}\r\n
\r\n \r\n {state.createdUserList.map((m) => (\r\n \r\n \r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n {data.showInfo && setData((st) => ({ ...st, showInfo: false }))} />}\r\n {state.showImage && (\r\n onImagemodalClose(false)} fullWidth maxWidth=\"lg\">\r\n pullWorkflowAndUpdateState()}\r\n desc={state.desc}\r\n onClose={onImagemodalClose}\r\n onImageChange={setPhotos}\r\n rows={state.rows}\r\n />\r\n \r\n )}\r\n {state.imgPreview ? (\r\n setImgPreview(false)} fullWidth maxWidth=\"md\">\r\n \r\n
{state.sigDate}
\r\n
\r\n
\r\n
\r\n \r\n \r\n Reg. No: {state.headerRecords.registration} WIP No: {state.headerRecords.wipNumber}\r\n \r\n \r\n {/* {state.technicians.map((m) => (\r\n \r\n \r\n
\r\n ))} */}\r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n Sign\r\n \r\n \r\n Defect\r\n \r\n \r\n Required before MOT test?\r\n \r\n \r\n Serviceable\r\n \r\n \r\n Action\r\n \r\n \r\n Created By\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n {inputList.map((x, i) => {\r\n return (\r\n \r\n \r\n handleCheck(e, i)}\r\n value={x?.checkDefectCreatedUserSignature}\r\n name=\"checkDefectCreatedUserSignature\"\r\n />\r\n }\r\n />\r\n \r\n \r\n handleInputChange(e, i)}\r\n disabled={!state.flag}\r\n placeholder=\"Defect Description\"\r\n />\r\n {state.errors['defectDescription']}\r\n \r\n \r\n handleCheck(e, i)}\r\n value={x?.isRequiredBeforeMOTTest}\r\n name=\"isRequiredBeforeMOTTest\"\r\n />\r\n }\r\n />\r\n \r\n \r\n {' '}\r\n {state.defectReportedCategories && (\r\n handleBtn(e, i, 'defectReportedCategoryID')}\r\n options={state.defectReportedCategories}\r\n disabled={!state.flag}\r\n valuePropertyName=\"defectReportedCategoryID\"\r\n textPropertyName=\"defectReportedCategoryDescription\"\r\n />\r\n )}\r\n {x.err_desc}\r\n \r\n \r\n {state.defectActionedCategories && (\r\n handleBtn(e, i, 'defectActionedCategoryID')}\r\n options={state.defectActionedCategories}\r\n valuePropertyName=\"defectActionedCategoryID\"\r\n textPropertyName=\"defectActionedCategoryDescription\"\r\n />\r\n )}\r\n \r\n {/* */}\r\n\r\n \r\n \r\n \r\n \r\n {\r\n showModal(x.defectCreatedUserSignature);\r\n }}\r\n style={{ cursor: 'pointer', marginTop: 10 }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n {x.createdUser}\r\n \r\n \r\n \r\n \r\n \r\n {state.flag && isTechnician && (\r\n \r\n
\r\n docAction(x, i)}\r\n toolTipTitle=\"Upload Documents\"\r\n style={{ color: 'red', margin: '-8px 0px -8px 0px', padding: 1 }}\r\n />\r\n \r\n {inputList.length !== 1 && (\r\n
\r\n handleRemoveClick(i)}\r\n // className=\"rightButton\"\r\n style={{\r\n margin: '-16px 0px -17px 0px',\r\n padding: 1\r\n }}\r\n >\r\n \r\n \r\n \r\n )}\r\n {inputList.length - 1 === i && (\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n Technician Signature \r\n {(state.defectDateCreated || state.createdUser) && (\r\n {/* ( {`${state.createdUser || ' '} ${state.defectDateCreated}`} ) */}\r\n )}\r\n {!state.imgtechniciansign && (\r\n \r\n )}\r\n \r\n {!state.imgtechniciansign && (\r\n \r\n )}\r\n \r\n {state.imgtechniciansign ? (\r\n \r\n ) : (\r\n <>\r\n {\r\n GetTechnicianSign();\r\n }}\r\n canvasProps={{\r\n className: 'signatureCanvas'\r\n }}\r\n />\r\n {state.errors.sign}\r\n \r\n )}\r\n {/* {state.errors['techniciansign']} */}\r\n \r\n {state.flag && isTechnician && (\r\n <>\r\n \r\n handleSubmit('save')}>\r\n Save\r\n \r\n \r\n \r\n handleSubmit('submit')}>\r\n Sign-Off\r\n \r\n \r\n\r\n \r\n history.goBack()}>\r\n Cancel\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n {state.showSignature ? (\r\n
\r\n \r\n \r\n ) : null}\r\n\r\n {state.showDoc && (\r\n
\r\n )}\r\n
\r\n
\r\n \r\n \r\n Axel: {props.title}\r\n \r\n \r\n {props.logoValue ? (\r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
{props.logoValue &&
}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {isLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n Reg No: {state.headerRecords?.registration} WIP No: {state.headerRecords?.wipNumber}\r\n \r\n \r\n \r\n Date\r\n \r\n \r\n \r\n {state.DatendSign['brakeReportDate']}\r\n \r\n \r\n {inputList.map((x, i) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Axle Position\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n NEARSIDE\r\n \r\n \r\n \r\n Brake Pad Wear\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Thickness\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Limit\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n Reason for renewal\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n {x.brakeReportItemNearSidePhoto ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n OFFSIDE\r\n \r\n \r\n \r\n Brake Pad Wear\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Thickness\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n Disc Limit\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n \r\n Reason for renewal \r\n {inputList.length !== 1 && state.showAdd && (\r\n handleRemoveClick(i)}\r\n toolTipTitle=\"Remove Row\"\r\n />\r\n )}\r\n {inputList.length - 1 === i && state.showAdd && (\r\n \r\n )}\r\n handleInputChange(e, i)}\r\n />\r\n \r\n \r\n \r\n {x.brakeReportItemOffSidePhoto ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {state.errors && i == 0 && {Object.values(state.errors)[0]}}\r\n \r\n \r\n ))}\r\n\r\n \r\n \r\n {'\\u{2800}'}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Warranty / R&M and many other companies require brake pad measurements in MM, please be sure to put readings\r\n down.\r\n \r\n \r\n Also, the wear level & wear limit of the discs should always be filled in when replacing. This is always in MM.\r\n \r\n \r\n
\r\n \r\n {!isAuditor && (\r\n \r\n \r\n \r\n {state.DatendSign['techniciansign']}\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 {state.showLogo &&
}\r\n
\r\n
\r\n {state.showCircularLoader ? (\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n Registration Number: {state.headerRecordsInfo.registration}\r\n WIP No: {state.headerRecordsInfo.wipNumber}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Date\r\n \r\n \r\n {state.errors['batteryTestDate']}\r\n \r\n \r\n \r\n Odometer Reading\r\n \r\n \r\n {state.errors['batteryTestOdometerReading']}\r\n \r\n \r\n Odometer Reading Unit\r\n \r\n {state.odometerUnitsVM?.length > 0 &&\r\n state.odometerUnitsVM.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: false\r\n }))\r\n }\r\n >\r\n Primary Battery\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {!state.open ? (\r\n <>\r\n \r\n \r\n Battery Manufacturer\r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestManufacturerID}\r\n \r\n \r\n\r\n \r\n Barcode (Mode Designation)\r\n \r\n {/* {state.errors['batteryTestBarcode']} */}\r\n \r\n \r\n Capacity\r\n Ah\r\n }}\r\n />\r\n {state.errors['batteryTestCapacity']}\r\n \r\n\r\n \r\n Cold Test Current\r\n \r\n {state.errors['batteryTestColdTestCurrent']}\r\n \r\n\r\n \r\n MB Part Number\r\n \r\n {state.errors['batteryTestMBPartNumber']}\r\n \r\n \r\n \r\n \r\n Production Date (on negative terminal)\r\n \r\n \r\n \r\n {/* \r\n Weeks \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestProductionWeek}\r\n \r\n \r\n \r\n
\r\n Visual Inspection\r\n \r\n
\r\n \r\n \r\n \r\n External signs of leaks\r\n \r\n \r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestLeak}\r\n \r\n \r\n \r\n If yes, where is the leak:\r\n \r\n \r\n {state.primaryErrors.batteryTestLeakPosition}\r\n \r\n \r\n
\r\n
\r\n Midronics Test\r\n \r\n
\r\n \r\n \r\n \r\n Result\r\n \r\n \r\n\r\n \r\n \r\n \r\n {state.primaryErrors.batteryTestMidtronicsTestResult}\r\n {/* \r\n \r\n setState((st) => ({\r\n ...st,\r\n open: true\r\n }))\r\n }\r\n >\r\n Secondary Battery\r\n \r\n */}\r\n \r\n \r\n
\r\n {/* \r\n Midronics Test\r\n */}\r\n \r\n \r\n Test Code\r\n \r\n {state.errors['batteryTestTestCode']}\r\n \r\n \r\n Damage Code\r\n \r\n {state.errors['batteryTestDamageCode']}\r\n \r\n \r\n
\r\n \r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {!isAuditor && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {!state.open ? (\r\n \r\n \r\n Receipt\r\n \r\n\r\n \r\n {state.list[0]?.batteryTestPrintoutImage && (\r\n \r\n \r\n clearImage(1)} />\r\n \r\n \r\n )}\r\n \r\n {state.list[0]?.batteryTestPrintoutImage ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n No Receipt Found
\r\n \r\n \r\n \r\n \r\n
\r\n No Receipt Found
\r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n {state.primaryErrors.batteryTestPrintoutImage}\r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\nexport default BatteryTest;\r\n","import { get, post } from './http-calls';\r\n\r\nexport const getTyreCheckByID = async (headerID, id) => {\r\n let res;\r\n if (id) {\r\n res = await get(`TyreConditions?HeaderRecordID=${headerID}&TyreConditionID=${id}`, { useAuthToken: true });\r\n } else {\r\n res = await get(`TyreConditions?HeaderRecordID=${headerID}`, { useAuthToken: true });\r\n }\r\n return res;\r\n};\r\n\r\nexport const postTyreCheck = async (data) => {\r\n let res = await post(`TyreConditions`, data, { useAuthToken: true });\r\n return res;\r\n};\r\n","import { createContext, useCallback, useEffect, useState, useRef, useContext } from 'react';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel, Typography, FormControlLabel, Radio, RadioGroup } from '@material-ui/core';\r\nimport { getTyreCheckByID, postTyreCheck } from '../../../../Core/Service/tyreCheckService';\r\nimport { AppStorage } from '../../../../Core/Service/storage-service';\r\nimport moment from 'moment';\r\nimport formatters from '../../../../Core/Grid/inputFormatter';\r\n\r\nexport const TyreChecksContaxt = createContext();\r\n\r\nexport const TyreCheckProvider = (props) => {\r\n const { hideModal, showToast, hideTopNavAndMenu, userRoles } = useContext(AppContext);\r\n const urlParams = new URLSearchParams(props.location.search.toLowerCase());\r\n const navigateToDashboard = urlParams.get('navigate') === 'true';\r\n const fromStep = urlParams.get('fromstep') === 'true';\r\n const [inputList, setInputList] = useState([{ tyreConditionDefectDescription: '' }]);\r\n const [state, setState] = useState({\r\n editTyreAxlesVM: [],\r\n tyreAxlesVM: [],\r\n remainingAxle: [],\r\n tyreConditionHeaderRecordID: props.match.params.jobId || null,\r\n tyreConditionID: null,\r\n errors: {}\r\n });\r\n\r\n const signCanvas = useRef({});\r\n\r\n const GetTechnicianSign = () => {\r\n setState((st) => {\r\n const nst = {\r\n ...st,\r\n techniciansign: signCanvas.current.toDataURL()\r\n };\r\n return nst;\r\n });\r\n };\r\n\r\n useEffect(async () => {\r\n let res = await getTyreCheckByID(state.tyreConditionHeaderRecordID, state.tyreConditionID);\r\n if (res.success) {\r\n let data = res.data.details[0];\r\n let defectsData = res.data.tyreConditionDefects;\r\n // let getAxle = [];\r\n // if (res.data.tyreAxles) {\r\n // let IsAxel1 = res.data.tyreAxles.find((x) => x.axleNumber === 1);\r\n // let IsAxel2 = res.data.tyreAxles.find((x) => x.axleNumber === 2);\r\n // let IsAxel3 = res.data.tyreAxles.find((x) => x.axleNumber === 3);\r\n // let IsAxel4 = res.data.tyreAxles.find((x) => x.axleNumber === 4);\r\n // if (!IsAxel1) {\r\n // IsAxel1 = { axleNumber: 1 };\r\n // }\r\n // if (!IsAxel2) {\r\n // IsAxel2 = { axleNumber: 2 };\r\n // }\r\n // if (!IsAxel3) {\r\n // IsAxel3 = { axleNumber: 3 };\r\n // }\r\n // if (!IsAxel4) {\r\n // IsAxel4 = { axleNumber: 4 };\r\n // }\r\n // getAxle = [IsAxel1, IsAxel2, IsAxel3, IsAxel4];\r\n // }\r\n\r\n // let remainingAxle = [...getAxle];\r\n // remainingAxle.shift();\r\n\r\n if (data.tyreConditionID) {\r\n setState((st) => ({\r\n ...st,\r\n registration: data.registration,\r\n wipNumber: data.wipNumber,\r\n customerName: data.customerName,\r\n tyreConditionID: data.tyreConditionID,\r\n tyreConditionHeaderRecordID: data.tyreConditionHeaderRecordID,\r\n tyreConditionFrontTyreSize: data.tyreConditionFrontTyreSize,\r\n tyreConditionRearTyreSize: data.tyreConditionRearTyreSize,\r\n tyreConditionDateOfTachoGraph: formatters.DateFormatter(data?.tyreConditionDateOfTachoGraph),\r\n tyreConditionWindscreenCondition: data.tyreConditionWindscreenCondition,\r\n tyreConditionWindscreenConditionDescription: data.tyreConditionWindscreenConditionDescription,\r\n techniciansign: data.tyreConditionTechnicianSignature,\r\n imgtechniciansign: data.tyreConditionTechnicianSignature,\r\n maxTreadDepth: data.maxTreadDepth,\r\n minTreadDepth: data.minTreadDepth,\r\n treadDepthRed: data.treadDepthRed,\r\n maxTyrePressure: data.maxTyrePressure,\r\n minTyrePressure: data.minTyrePressure,\r\n tyrePressureRed: data.tyrePressureRed,\r\n tyreAxlesVM: [...res.data.tyreAxles]\r\n }));\r\n\r\n setInputList(!defectsData.length ? [{ tyreConditionDefectDescription: '' }] : defectsData);\r\n } else {\r\n setState((st) => ({\r\n ...st,\r\n registration: data.registration,\r\n wipNumber: data.wipNumber,\r\n customerName: data.customerName,\r\n maxTreadDepth: data.maxTreadDepth,\r\n minTreadDepth: data.minTreadDepth,\r\n treadDepthRed: data.treadDepthRed,\r\n maxTyrePressure: data.maxTyrePressure,\r\n minTyrePressure: data.minTyrePressure,\r\n tyrePressureRed: data.tyrePressureRed\r\n }));\r\n }\r\n }\r\n }, [state.tyreConditionID]);\r\n\r\n const clear = () => {\r\n if (state.imgtechniciansign) {\r\n setState((st) => ({\r\n ...st,\r\n imgtechniciansign: null,\r\n techniciansign: null\r\n }));\r\n } else {\r\n signCanvas.current.clear();\r\n }\r\n };\r\n\r\n const useDefaultSig = () => {\r\n let userSign = AppStorage.getSignature();\r\n if (userSign) {\r\n signCanvas.current.fromDataURL(AppStorage.getSignature());\r\n setState((st) => ({ ...st, techniciansign: AppStorage.getSignature() }));\r\n } else {\r\n showToast('User signature not found');\r\n }\r\n };\r\n\r\n const handleInputChange = (e, index) => {\r\n const { name, value } = e.target;\r\n const list = [...inputList];\r\n list[index][name] = value;\r\n setInputList(list);\r\n };\r\n\r\n const handleAddClick = () => {\r\n setInputList([...inputList, { tyreConditionDefectDescription: '' }]);\r\n };\r\n const handleRemoveClick = (index) => {\r\n const list = [...inputList];\r\n list.splice(index, 1);\r\n setInputList(list);\r\n };\r\n\r\n const YesNoRadio = (props) => {\r\n return (\r\n \r\n \r\n } label=\"Yes\" />\r\n } label=\"No\" />\r\n \r\n
\r\n );\r\n };\r\n\r\n const inputChange = useCallback((e) => {\r\n const { name, value, type } = e.target;\r\n if (value === 'true' && type.toLowerCase() === 'radio') {\r\n setState((st) => ({ ...st, [name]: true }));\r\n } else if (value === 'false' && type.toLowerCase() === 'radio') {\r\n setState((st) => ({ ...st, [name]: false }));\r\n } else {\r\n setState((st) => ({ ...st, [name]: value }));\r\n }\r\n }, []);\r\n\r\n const handleInputs = (axelNo) => (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n let ax = st.tyreAxlesVM.find((a) => a.axleNumber === axelNo);\r\n if (!ax) {\r\n ax = { axleNumber: axelNo };\r\n st.tyreAxlesVM.push(ax);\r\n }\r\n ax[name] = value;\r\n\r\n return { ...st, tyreAxlesVM: [...st.tyreAxlesVM] };\r\n });\r\n };\r\n\r\n const handleSliderChange = (axelNo, nameID) => (event, newValue) => {\r\n setState((st) => {\r\n let ax = st.tyreAxlesVM.find((a) => a.axleNumber === axelNo);\r\n if (!ax) {\r\n ax = { axleNumber: axelNo };\r\n st.tyreAxlesVM.push(ax);\r\n }\r\n ax[nameID] = newValue;\r\n return { ...st, tyreAxlesVM: [...st.tyreAxlesVM] };\r\n });\r\n };\r\n\r\n const Validations = () => {\r\n let fromValid = true;\r\n let errors = {};\r\n if (!state.tyreConditionWindscreenCondition) {\r\n if (!state.tyreConditionWindscreenConditionDescription) {\r\n errors.message = 'Description is required';\r\n fromValid = false;\r\n }\r\n }\r\n\r\n setState((st) => ({ ...st, errors: errors }));\r\n return fromValid;\r\n };\r\n\r\n const handleSubmit = async () => {\r\n let finalAxle = state.tyreAxlesVM.map((ax) => ({\r\n axleNumber: +ax.axleNumber || null,\r\n nsBrakeLineRemaining: +ax.nsBrakeLineRemaining || null,\r\n osBrakeLineRemaining: +ax.osBrakeLineRemaining || null,\r\n nsTreadDepth: +ax.nsTreadDepth || null,\r\n osTreadDepth: +ax.osTreadDepth || null,\r\n nsFrontTreadDepth: +ax.nsFrontTreadDepth || null,\r\n osFrontTreadDepth: +ax.osFrontTreadDepth || null,\r\n nsTyrePressure: +ax.nsTyrePressure || null,\r\n osTyrePressure: +ax.osTyrePressure || null,\r\n nsFrontTyrePressure: +ax.nsFrontTyrePressure || null,\r\n osFrontTyrePressure: +ax.osFrontTyrePressure || null,\r\n nsBrakeTemperatureAxle: +ax.nsBrakeTemperatureAxle || null,\r\n osBrakeTemperatureAxle: +ax.osBrakeTemperatureAxle || null\r\n }));\r\n\r\n if (Validations()) {\r\n let data = {\r\n tyreConditionID: state.tyreConditionID || null,\r\n tyreConditionHeaderRecordID: state.tyreConditionHeaderRecordID || null,\r\n tyreConditionFrontTyreSize: state.tyreConditionFrontTyreSize || null,\r\n tyreConditionRearTyreSize: state.tyreConditionRearTyreSize || null,\r\n tyreConditionDateOfTachoGraph: state.tyreConditionDateOfTachoGraph || null,\r\n tyreConditionWindscreenCondition: state.tyreConditionWindscreenCondition,\r\n tyreConditionWindscreenConditionDescription: state.tyreConditionWindscreenConditionDescription || null,\r\n tyreConditionTechnicianSignature: state.techniciansign || null,\r\n tyreAxlesVM: finalAxle,\r\n tyreConditionDefectsVM: inputList\r\n };\r\n\r\n let res = await postTyreCheck(data);\r\n if (res.success) {\r\n showToast(res.message);\r\n if (fromStep) {\r\n setTimeout(() => {\r\n window.top.postMessage({ type: navigateToDashboard ? 'navigate-dashboard' : 'close-modal' }, '*');\r\n }, 1000);\r\n }\r\n }\r\n if (res.errors) {\r\n for (const [key, value] of Object.entries(res?.errors)) {\r\n showToast(`${key}: ${value}`);\r\n }\r\n } else {\r\n showToast(res.message);\r\n }\r\n }\r\n };\r\n return (\r\n \r\n {props.children}\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport singleAxel from './VehicleDiagrams/images1.png';\r\nimport doubleAxelOne from './VehicleDiagrams/axImage01.png';\r\nimport doubleAxelTwo from './VehicleDiagrams/azImage02.png';\r\nimport doubleAxelThree from './VehicleDiagrams/axImage03.png';\r\nimport { TextBox, SecondaryButton, CustomButton, AppButtonGroup } from '../../../../Core/FormInput';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { InputLabel } from '@material-ui/core';\r\nimport { Slider } from '@material-ui/core';\r\nimport { withStyles } from '@material-ui/styles';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\n\r\nconst input_style = {\r\n axOS: {\r\n marginTop: '45px'\r\n },\r\n axOS2: {\r\n marginTop: '152px'\r\n },\r\n ax2OS: {\r\n marginTop: '-18px'\r\n },\r\n ax2OS2: {\r\n marginTop: '0px'\r\n },\r\n ax2NS: { marginTop: '135px' },\r\n ax2Break: { marginBottom: '5px' },\r\n axBreakHeading: { textAlign: 'center' }\r\n};\r\n\r\nconst slide_style = {\r\n axOS: {\r\n marginTop: '39px'\r\n // display: 'flex'\r\n },\r\n axOS2: {\r\n marginTop: '160px'\r\n // display: 'flex'\r\n },\r\n ax2OS: {\r\n marginTop: '-18px'\r\n },\r\n ax2OS2: {\r\n marginTop: '8px'\r\n },\r\n ax2NS: { marginTop: '180px' },\r\n ax2Break: { marginBottom: '5px' },\r\n axBreakHeading: { textAlign: 'center' }\r\n};\r\n\r\nconst PrettoSlider = withStyles({\r\n root: {\r\n color: '#52af77',\r\n height: 8,\r\n padding: '0px !important'\r\n },\r\n thumb: {\r\n height: 20,\r\n width: 20,\r\n backgroundColor: '#fff',\r\n border: '2px solid currentColor',\r\n marginTop: -7,\r\n marginLeft: -7\r\n // '&:focus, &:hover, &$active': {\r\n // boxShadow: 'inherit'\r\n // }\r\n },\r\n active: {},\r\n valueLabel: {\r\n left: 'calc(-50% + 4px)'\r\n },\r\n track: {\r\n height: 8,\r\n borderRadius: 4\r\n },\r\n rail: {\r\n height: 8,\r\n borderRadius: 4\r\n }\r\n})(Slider);\r\n\r\nfunction valuetext(value) {\r\n return {value}
;\r\n}\r\n\r\nconst SliderCommonComponent = (props) => {\r\n return (\r\n <>\r\n \r\n
{props.labelName}
\r\n
props.limitColorValue ? 'green' : 'red' }}>\r\n {' '}\r\n {props.inputValue || 0}\r\n
\r\n
AXLE 1
\r\n \r\n \r\n \r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\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 CustomAxle = (props) => {\r\n const { state, axNO } = props;\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n let ax = state.tyreAxlesVM?.find((m) => m.axleNumber === axNO);\r\n return (\r\n \r\n {props.axleTitle}
\r\n \r\n \r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n 
\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n )}\r\n\r\n 
\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n <>\r\n {' '}\r\n \r\n \r\n \r\n )}\r\n\r\n 
\r\n \r\n \r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {WindowWidths > toggleCompMinSize ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\n// export const EditAxle = (props) => {\r\n// const { state } = props;\r\n// return (\r\n// \r\n// AXLE{state.axleNumber}
\r\n// \r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// Depth*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Brakelining*\r\n// \r\n// \r\n// \r\n// \r\n// Brakelining*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// Pressure*\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// {/* */}\r\n// \r\n// );\r\n// };\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAAFMCAYAAADyaO89AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABL/SURBVHhe7Z09kBTV14fv7rog6mKtYIELVkG0lAEmEGECkSSQkUAGAURigolQ/xITIYEIAiGCBCJI0AQSjCABEijLAotyqZVlsQTkS+TlufRZ7vY7Hz1npmfY6d9T1TXdPf1573PPPf2xswMvXxEynj17Fm7fvh0ePXqUzRHiDe+//35YunRp/IQZeaampsLk5GR48eJF/EKIeixevDiMjY29lgdpGIQoyujoaBiYnp5+SVclRKsMKuIIL4MkyUJ4GMw+hWgZySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcDFy5cmXmfZ5ucv369XDjxo1sKsRH/MuWLYuf7fDgwYNw4MCBMDExEQ4dOhRGRkayb97Ad5cuXcqmOrfvqtFVeai0EydOhLNnz8ZKrsX4+HjYunVr2Lx5czanNc6cORP27dsXNm3aFPbv35/NfQ2yItbly5ezObNBnjVr1oRdu3ZJpAJ0rds6efJk2LJlS/ysJw5QwVT+xo0bo2ytcvTo0fiJPCnnz58P27dvrysOsD/ERsB+gOjKOZd1Pl2RhwqlxZs0tO49e/aEU6dOhXPnzsXPY8eOxQq3Fk9FIlvatTUDMViPbaxduzab+3pbBw8ejPunGyOyXLx4MbyKunFg/3Rx/RZtKA8rkzIoXR7EOXLkSByn4qgkRKFroouiwvhEKLoZkwiobFpO0ZO3FoYcKXSVtg2k3blz56xciP2vX78+HkM/UZY0RqnycPAmDiAGldQIZEKiVKC9e/fG8UawL7ocyEtg0Qth8t1ZPzOn5UnFobXTwotChLDoQOhNr45qYd+nXZ9h3WUabWpBks76q1atyuZ0BvbP1SXHaMfSDcqWp7SrLQrpiy++iONUJrlNq6RdHpWav3pKsQT7xx9/nJXvwO7du8OFCxfiOMfRrdyGbpRomE/S2T+NKX9FWSuhr3W8+YuJtHyZz375tEhMo00bLuPbtm3LpvyUFnnSSOHNJdIuxiq/FpYUUoh5cSCNJFRQsyjWLjQchOWq0WTg2EwCjrXWFeWGDRuyscbkZUrh3Gh0Jg7QbTNtQ6OybIXS5EmvklrprlIoJOtqqJB6Ib9eomyQnKcVt2PHjplL2LTyOgVXllZB7JsrOyIDA+N2nOwbyQyW5eqvWV5I7sh2apUrAvI9g0EjtHkMpASdoDR50krxygNpK6tV0cyzVlYvwiEghZZui4hgrb+T90LYrh0PlZbmbsA4XRaiAI2Mq8GUZrkZsEyt5ZhHOaRlwXnbPIZ26iOl1IS5E6QF9Pfff2djb2iUKKfwHS2fvClfeKlI7UaiVMJ6kRD4zs6tU91It+mKPA8fPszG2oPnT3nq3VGuB8vZzUmiQtpCEYco1M4VkeU4CNpIZosQwDrt7LNXlCZPmqT+8ccf2VjrpLlTPkxT6FQ4lVQrUW4E69B1WB5gFc328t1IK1jkyh9rLVK52o14vaA0edKuIRWgFShQa5FsL18hzRLlohABEMiwnKUdGkUdIz2fWl3y206p8ljh0Kd7wnIaAfJ5CmI1S5SB/ZIXNWvZVHZ+H+1Q5HzTZRYuXJiNzR1KkwdxLA+hkNK7zUWgstNEMh9d0iuaRq2cqMeleXpJXA+TPR/hWsGOpUi0TZcpEqneNkpNmLmLaRXBqxitdAc8z7JoUUsQ67KKJsrNIgH7sspspyItCqbbq0X6Peukws4VkUqVh0JIIwZCNItAFGp6mz6/DeDdHJbju6KJMss3gi7SBNtQ8E5vLdJHDo3OlYZk+8s/pkjlqXf/CfEayZnSrOF4GXpVMf/Lxkth9erVYWBgYEYGPik4KvPp06fxF8kYZz6X3YcPHw63bt2Ky1KI+Zt7YMtwqd0sT2HbFvHoBm/evBnmzZsXC5R9//LLL/Fdn59//jkuQxRo5w4sx8q2r127Fo+R/XPlaZGF7zj+48ePx2mO/9tvv43jBrckTp8+HX/mD0EWLVo0c/XK+qz7zTffhPnz58dl2DYCMp1CtOf7e/fuxQbBcjS8q1evduThb9deQ6Xi7N3iIlCJ3NDLi8P63MwD7tXkv8+DlESyIrDPeu89twrnSuUZbJMhPf9G+2NdtmHk16e7ZjrdByJyD8tIHywDyyMfn5Qdn+1QeuQxVq5cGXMgWhUnUEsiTubLL7+MLZ+uqtbJUVgIQeHlw30tkItWRrQBWmEeKpFjIwLkW6+XdevWzTpXIgDjwP44P86z3v6I2KxP5GE9W5/zYd2vvvoqzvvpp5+yNV6fG98ZyER0te6N5ZnHMmy/XXr21xNWqFagFEqzKAL2CKFI1KmH7Rc5bSgbayye/ZlARcsoj5U1+/WWWS16Jo8HCoGCpPV0o8JFY+aUPOLtotRLddHfSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYSbweHh4WxUiNYYXLFiRTYqRGsMLliwICxfvjybFKIYS5YsefNvIh8/fhxfXnr+/Hn8UohaDA4Oxv8zyr+KnPUPamF6ejr+y0hJJFKQ5uOPP47SDA0NxXn/Tx6DF4dsqBp//vlnofOmED/55JNsqj/hHElt7GW6lLryVJnffvut0L8Hp0A78S7wXEX3eYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIIN5JHuJE8wo3kqcHLly/Df//9F54/fx6HZ8+excGm+Y5lqo7kSfj333/DxMREePDgQRxHkFQSm+Y7JHr69GkcqsrAq8JQE3oFwty8eTNGmFYZGxuLQ9WQPK+YnJwMt2/fzqZ8LFmyJHz66afZVDWovDx0UwydYPHixWHFihXZVP9T6Zzn/v37HRMHpqam2o5gc4nKykOiW0ZF0wX+9ddf2VR/U1l57ty540qOi0Di/eLFi2yqf6mkPHQvDGWBOJ3sDt9WKilPNyqW7qvf7wFVTh7u55TVXeW5d+9eNtafVE6eblYo0aefc59KyUNFlpnr5GF///zzTzbVf1RKHrqsbtNNWbtNpeTpxf2Xfr7nUyl5etGF0HX161WX5OkCjx8/zsb6i8rI08vEVZFnjtPLS+Z+veKqjDzdujFYJSqV8/SKfhVX8gg3kke4kTxdYN68edlYf1EZeXpZge+880421l9Ini6gyDPHmT9/fhgaGsqmust7772XjfUXlcp5elWJkqcPGBkZyca6x4IFC3oW8cpG8pTMwoULs7H+o3LydDsKLFq0KBvrPyolD/A35d2Cq6x+zXdA8pRIv/9yRuXkodvqRldC1OGHD/qZyskDRISyc58q/F5PJeXhhmGZlUti3u9RByopD5D7lHHpTndVld/oqaw8QCV3+rkTvw5GZKsClZaHSh4fH++YQMg4OjqaTfU/+k3CV/DXDTdu3HC/LkryTcSpQp6TInky+OsKfnqFHydoBfImIk5VuqoUyZODKPTrr7+GJ0+eZHNqMzAwEB96fvbZZ9mc6lHpnKcWRBCkGB4ejm8A0iUNDg7ODMzjOwamq4zkqQORBTmQB2FsYB7fCckj2kDyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7iRPMKN5BFuJI9wI3mEG8kj3Ege4UbyCDeSR7gZePmKbDw8evQoPH78ODx8+DC8ePEim1s9njx5Uuj8h4aGwrvvvptN9R+c3wcffBAWLlwY5s2bl819Q5Tn2bNn4fbt21EeIWoxOjoalixZMkuigbt3776cnJysdKQRxSASLV++PHz44YdxenBiYkLiiELgye+//x6mp6fjtBJm0TJ37twJpDqSR7QMEYgcWfIIF1xcSR7hRvIIN5JHuJE8wo3kEW4kj3AjeYQbySPcSB7hRvIINwNXrlyZeRmsE5w/fz48ePAgmwph1apVYXx8PJuqD0/3L126lE3NZtmyZWHNmjXZVH3YxpYtW8LIyEg4d+5cNvcNHNeZM2fCjRs3sjkhjI2NxePjOBkXxem4PNu3bw+XL1/Opl5z6tSppgJRqfv27cumZrNp06awf//+bKo+tm+WZZ2UI0eOhJMnT84SOw+C7tmzp5DsooRua9u2bbHi0la8e/fuhpUGa9euDVu3bp0VYahE5rHNZhB1TNp8lDpw4EA4evTozDGwXZZhIEoZrH/9+vVsam7DOX/++eexUZZFx+VZv359bPlpBVKxCNQIZKPVHzt2LJvzeltFIwGRBfLiUnhEHGA7dGdEQvbDcPHixTiv37osyrxsupYw06qtgsvAok4+Sp09ezZ+EmEOHTpUUxLmpRGoH+gLeagUqzC6jnpJcTsQXSgsIks+SllyzPxG0UWRp3W6Ik+a7H799dcdPzGLLrVyo2a5lsG63333Xcy9OoVd3Z04cSIOXInWO3dyLRpWOtQiv0x65Wiw36Ln3Q4dv9oy9u7dGyuVFk1OQdSxbosoQN5RDxI92LlzZ9i1a1ccrweVsXHjxigp+8l3P3xnFdat3Ib9cf7WleYhL+O80mNJjxOs3PJY2RjklpYnWn6HOLYtyiMtE8sjO0HXch5EsCSa1sLVQCcwISmUvDiwefPmbOz1pXyZVx/AuXGvycShoSALx2ey0Kg4llQWlkkvMurBcvmu2WDfDOl2TSQbOhmRuhZ5gAOnYO3kat2PgVYij7XYeveS8vsEjomKYt+d7KbYh0mByCToeSGIDNZwakVgu1dVL/IYdt5p5DFYn+0AXXHagDpJ1yIPWIEaFGJaqa3SKFE22CeFa60eWAexd+zYESuB6NXOcRjpdugaakUS7ltZgyBKkAfNVboqD1DJ1ucSFWgh3lDaKFFOsVaMRESbvEjkYxwHldkO1lWx/VoR1UAgw+5BzUW6Lg9QeFa4VJ7n/g/rUVlEFvKJIhAJ6CpTkQy2147IrGdRp14UNDhmW6ZdYXtJT+QBoo9FAFofl7Kt0CxRbkYqkh0HArR6HEYqQTN5IN3nXKVn8lguYhVP19FKK7Quoshzr0ZQiWnC2YtIMFcF6pk8QMWl+U+RB6hQJFEGRCBCmWj14DjajQS2Plj31Yh0P57I+TbQU3mAvMMSSAqdS/xmFE2UuWtLRCtyb8cq01uRyGPrFpHHIlyRLu5tpefyANHHCvHChQvxsx5UTKuJcrPKTF9g27BhQ/z0YOfA8TXaJ9/b/vKX8xbBWN8bBbvFWyEPcP+nSKv3JMqNKoLvDh48GMfZXq17M0VJb2jWu4POcaTRNR89eaPRqBcxm90fS8ulTAGHXp3w/7LxjsDBXr16NUYQO8EVK1aEp0+fhsWLF8fpWnDCq1evnumSgIrM3wGmotkHV0qNtgd0DRwHyx8/fnwmIjAwn6u8w4cPh3v37sXlybnWrVsXxz0QNQYGBuJ+bt26Fc/FKpLfsyHCff/99/E74A56PtKtXLkynD59Oi5/7dq1+DNuDLY+b1ty7GyXeUDE43cD58+fH6f55HyBffG9NZKpqalYzp2gK6+hGvUeIaSkD1DzjydoiRQe22j0YNWgkJu9hAZUBPtJb961Q3oOtWi2P6Srl/uxLt08T9TThpYvE6JTrRuQCN7osUcrdDzy0Noxn4PMD7TqZtGCaEOkYBtEnVQ2Wg4tCCGaSQi0Yp7rWFdg+2b7HA/b4Psffvihre4qD9uy50kWDaj0ovtjOSLSzZs347ESYTheujjWJXLwi7V2HgycaxrFKGuioK3PubM+EduOqV1KezDaaZCG51AUenpfRvSOOSOPePt4a662xNxD8gg3kke4kTzCjeQRbiSPcCN5hBvJI9xIHuFieHhY8ggf/OM2ySNaBnE++uijMNjsKbcQKfiCPBD/x+jdu3fjS0LPnz+PM4XIMzg4GJYuXTrrlZqZ/27MOx+8I3L//n39o1oRQZgFCxbEtxTppvgfo28I4f8ASDBINVxhzpAAAAAASUVORK5CYIJDuOCuiXTflQlEgNf1Rf65lgnjP96oBJmQm0juoX3WnVgX0dCfi3lBBXJ52YEP9pvX8cqoCQSe/mlbMiK80v5S3k1JpuQ5E2hOkC8hKkEmtw+ICOnuxeWCk+8qj5jpaGxM7G+PTnTHM6MqEMK5N9Rv1/lIPs1IupHnfIBMyEtcNEJPySXZhYIkNxuTbdLbq5Pd8cyoCgRMNFi/3pRx4bbl2NXMJXkG+M5sQkBkr4TSXCgfanO4RTOWGXWBwKrVa5IX0IyV5NCM5JI8A/SykCDn0zxCqEJArwd0n8ieR7nPeJP68ciYEAg8rKOQO5kYA3L3r1KRb/IMsuUa3vtHiIqF4CJht06mMw1NYFvu/ebZqbfV2zs+mrYxIxBq/fO6+XK9k0wUkjxnasa6TpwYNuBZKN5mcPfOi116Pxipdtyjo68XN4aDSJxOQrev2UCnIGhKJlAuBwMZ7rMPhGWikOQZTV7iftMHprcEodCsYewG40AA8koG2xCB3D4hiuK7vfmU6+U5AbAtfwVw6+OzGB/zro/9fXLjxmFd/1Tn1X1nrEfnf3Z9rOua/WIS2COtuL3gb4bwTM99D/ylznlW2yWpQZfejQshInifRMSJwAVH8vyaZ+AuHU/qz+ImZDYgz3M6AhbafDnMhdei4sE2h8uNvOcD41AYSkiFf5+962M/N+ueq5MeQBgMkromFJUEI+0OrO+27X9Ss1ACfSLx1MmT5k60HzwRWFdfl/XeFu4PfXzwoHmK0X9PCLUaOQZyJu9AYDpwUnHCBvS2cYcb95m84ILgCcUNmzapWbNm2aWFg3tvf3Lb7Safw/0oXDi8YsK25lw311SIO1eutGuMpLW11Ry7y8vc+sj3nv2HfzSSd3Z06mWJ6IP3cB8Nt0+Au8fnngZ12/7BvX+R9dznirsXFkgECgqEY9zlRvRBtCikJuFk4hkhTLgBWYzamA2Xf+W7Lewr8jPkh406N8rlqUw/aA2COM5AH6oPCjOmoyVqnj27oJNJiocTaMz0wnIBtQhNEuUZO4wrgcjYgwIRERSIiKBARAQFIgWBnz4AFIgUxJQpU8wrBSIF8Qf1iZ+5qphoQxEhuYKffcJAIqj4/pXF/9soUt603HC9LWmBrm5uStpESDb8vpgc6KYb5yeTIkLSAXlmNzXZuQTDfvISP/2EH58jxAvy5OuuvUbNmD7dLrnIiB/dxW8g4Od8Tp35vfrq66+TP+tDwgWkmapbpUjD98xzP+k6WyMEIiQfOA5EBCj1/3XS1DEJssPQAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAB3CAYAAAA+V8PaAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMTowNzoxOSAyMTozMToxMInKaXsAAA0fSURBVHhe7Z0/jA1fFMdnn1iR9SeWtWKziVDQoKERDRUNFQ0aGrpV7EZDfkFFQ0WxOho0NFQ0S0OzNET8D4mEyLJikY2fz905m/Nm59+d9968ffvOJ5mYN//u3Hu+99xzZ8aejr//CCJMTEwEY2Njwc+fP91itB/z5s0LOjs7g6VLlwZdXV1uXagSze/fv4OPHz8G3759C7cYxhS9vb1ugWnR4FHevn3rhGMYceBt1q5dOyUahPLixYtgcnIy3G0Y8SCcCiuvXr0ywRi5wMFUvn79akOS4UXl06dP4aph5KNiXsbwxcU0huGDicbwxkRjeGOiMbwx0RjemGgMb0w0hjdzUjTfv38Pnj17Fjx//jzcYtSTjtHR0Rnf0zQajHrr1q3g8ePHVYZdvXp1sH79+mDHjh3B1q1bw63+DAwMBPfv3w/OnDkT7NmzJ9w6BWVfvXrVlc1nIEC5ixcvni6X30YypYoGg126dCm4du1auCUZDHflyhVvAyKE3bt3u/Pu3LkTbp2Ccimf+0jj6NGjwbFjx8JfrQl1vHfvXtDX1xds2bIl3Fof5v1rnP/C9YaCMQ8dOhQ8fPgw3DIlDHo33oX1FStWTPd+Ki3i8vE6586dc96L6+7cuTPcGjjPdvbsWfdyFq+ya9cudwwNSvkLFiyo8jz63FbkwYMHwYkTJ9x6vetSiqfBGEeOHJk2CoaiJ8f1AI7BG9y+fTvcEgSDg4PBwYMHw1/p4GW4Bl5GeynZzrYkD0a5ly9fdkMaQ1srQ4ejAzWiLqUEwlowuH6MluQyMSaV1BU9f/58rqAWb0I5XFuLQscviDVOMLBkyZJwrfX58OFDuFZ/Gi4aMSQwHOSNFeghQ0ND4a+pYScL8U579+51/wq6ARmKkkgSUysibd4IGj487d+/f9pLRIeMPMiwAsPDw4nxDcckBcAI99SpU279woULTrxlIDM16i/Bt8zSosJmf7RjROMyILhlZqihc3FdoB34jwHHjx9361zjwIEDbh/gTdM6Th4aKhoxJDBkMCz5QoxBrAFps5qTJ086TxN3DMMTQyQgqiKzMl8kpkgieh+6rYS4ukjcpZHOqOuZRFE7aBo6PPGATUiKYbLQ5yXFNfRS6X3RHgxcQ66DcfB+iIz1RoBRRTCUe/r0aWcoFgJ6DCz3IXUSEWUN39QPbxnXnngQvApDu3gerstvWeLO86WhotFGlh7liz4vSTS4bISDK04qh8Ba9nEsXomejeEYQuolIHq7eEbuByFgaBEuM0G2YdTokMR+DJsGdeC6ccbnmgxV1FVEw3EysWDJG1OmUdprhHqIJgl5nhPnZQSug7GiRkGIzM4QUD28jwgGdCCv4V7kEQIie/TokVtvFUoTzfj4eLhWHOk9GozOIj0wDY6ht42MjLh/EZC+Jt6HmAAPUBREAPTwNMFr8UYD29lOQ0Wjn3sUfW6gh6Q40TC0QJZb13AdjtcCEgPjaeSavmgvFTd8aLSg6jU0lkVDRaOndknxSBZpz1iyAuC8ICCJM0CGO198jS/CqcWzNYOGi0YMgXGLNI523dFnNHkC4LxwvgxvRY0Y5wnTaDWxCA0VjQwDQAPxkM0Heq485dVGFfIEwECQu3nz5kxP4Gv0KD5DDu0hoqm13LJpeCDMLEEahecXeV04DaofVEWnij4BsJAVV8kQWvSJKfUU4WQFt3rGtFM99dUCmq2eqOGioRHF4CKErCkmwuI4ERhGjAa6RQLgtBkcXktmPkVFA+L1qCvDZxJM8wGR6KCZ3yKctDiwaIxYD0r5nmbTpk1BR0eHMwqNyZBDpX/9+uX2840L2xHTjRs33HcvIhhEx7MP3QPZR6NzHjMfvS8OBMH1nzx54n5TLjM7zn/9+rUr8+LFi24f5eW5ZhII7u7du648vh1avnx5sGHDhnDvlJgoS74rOnz48Iz3S58/fw6ePn063QY6lqONeK8kAgftzQWpMwtC5nshzqXj8N1SLZT65R4VQQBUJA8MO3EGlBeQ7OeRehbENGKANCiHWVQtngYoS3tKrss1qTfbpP5J79KSzuc3C785V3sr9tMWrIN+Z8c2Fs6lU1y/fn36uCKUKhrgxqkMPUUaRSMNQGMmPesQEeR9Y018wVCBd4tz65TJMCfvheoBwqCT6E9DBOqVVj/gHC0cgXOkI23fvj3cOoX+ioDyeUUhEwngHMrVb72LULpoNBiQyhGgMlxQYZa0XoDYaEyOi34CkYdobxeRNhLKY6GsrPpFkTYC7lOfy3bZByIYjS67XvVsqmiKQCPy9pw4wKfxjfrRcqIxmk/Dp9zG3MNEY3hjojG8MdEY3phoDG9MNIY3JhrDmwopWgzDh0qtbzyN9sOJZv78+eFPw8jGDU9r1qxxmcQMIwscTFWSsDdv3gR//vxxOw0jCoJZt27dzHSEZGUhnY9hCJVKJejp6XFf/DEiVYlGQDx8coj3Yb1dyOtlacR2GM4XLlzokp52d3dX1TdWNO2KfEOcRX9/f7Bs2bLwV/thD/cMb0w0hjcmGsMbE43hjYnG8MZEY3hjojG8MdEY3phoDG9MNIY3ia8Rfvz4EYyNjbl3T7yDagfyvnviPQzvn+Y6nZ2dblm0aFHVa5MZokEg/IdxRGMYAuLp7e114qkSDZ9EIJjJyclwi2FUw+cR06IhcwcfYRlGFm5gJm55//6922AYWTjR8LWeDUlGXip4Gfu80/ChYrMkw5dKuzyDMepHxWIZwxd7jWB4Y6IxvDHRGN6YaAxvTDSGNx3v3r3726yHe/yJdslZoP9cO3+OnSUp238eePHKn8Pnuvw5/OhfN2c7eQt0rgT+TDzlkjUl7k/G+8I9kIEXdJ7MVqcposFg5GuS9DJJ0MhkGymSn1IytZAoA4Np8mSDQTwk7KjF0AMDA9PJwkiEQYaXuUDpwxM5h8iiQmoZMRpeAOOwaI9AT8XwNH6agePg+iD5rwXJzi/XQxwIC6OyLuCBimb4jcP3/mczpXoahiISXAlJKWwQC9lW8AasAwbVGW3TkEwtnENuIwEhkPEfkjwJxuUYyh0eHq55iJyLw1NpnoYGlKRWwLCDCKKCARqX3s9+aWgMLkmvspAEq1Evo/NtJw099czswvWpg67HXKA00WivkZRRLYo0uhiSWCRP/ksSY3FONIGYlI9Q04w4lwzcCEoZnjAWcQxgEN/kXohA3DwGR0hJSBq+uACYYQePlXUP3C8LQ1gRz8O5UXHvjOSnkpzigt7PuZLHXMRfyzBZb0oRDR6C4BMwJAb1gcZDdNLIIyMjicaUVIXEMjqwBYQn6fmK3EdeZOamicZHcp/C4OCgEw73qJOaCqQQHBoaCn81l3n/AtP/JiYmwp+Ngeyw0kAMS75/u5hMr2S1lWcq27ZtC/r6+ty6ht578+ZNJ5a44Y+UhyIaejL3xDOZIt4kDe6Nr/dB6o1A9T1zL/Dlyxf3uS11pJ34vW/fPieqjRs3uvPpLGTPhdngcUqJabQbjvb+vOg4Q8QTRQQRDYAFhjbtXTge4zBsESTrnl8LiBDRpsVt3IfObouIuT+GTTwKnoXztcfMeq5VFqWKppYAU3omxDUcBqfhJQZIgmEJY0RFyMwOATE81Es8PiAMLSKB3zpBfDPuLUrpD/eKwv/yS0O8DIKJNnwUZm/0YAQUFZh4H7leWaTds/bOJH1tNqWKppZeos+N81hJz2aSwEgyRIyOjjoB6evqp8ZGNaWIRveUosLRcUxUNATAXJdydFk+ICDiCYl5EIwI0aimFNHoiL+oIWQaioeIziCyAmAf9LQ2KeBud0oRjZ6xFJkBIDQ5J+4pb54AGAHwPirrVURWPGSUJBqJHwDj532HBIhC3lhDdBor18oKgCkXb5UV4GbFTkaJgTBuX4wg37NkgQHxDmJIZj1RQ8qwVY+hCbSo4l6mGiWKBi+gn0PgPZja6qFHQCSISj5RADxV1MtwLvt9AmCOl/M03AMzJu25ZtP7ntlE6V/uYSztPQTExILxoiJKeu/CdfA0ed4jcRzHa6RM0PeDN6vlcwauhfiIoySY5lp4LnmwiHCJxVgEhMoS/VJR3zvn0kG4TtGZYq2U5mkEKi2PyrVREAqNrQUjb7TjBMOxNCZGTwuABRoYYYlIQMrUguEYHvzpe/OFt9QMc3r2RRlsk7ffeFotGOC3jt/i4Docx2OGZtGUb4Q1GJ7G5Y8qCRgs+ilBFHljjZHxND5QnoiFcnlFwRPnrDLzIteOA/FSBvWOg31RD4K4tQCBNqpF2LXQdNEUBfc+Pj4+w3sYjadlRWM0j9JjGqP1MdEY3phoDG9MNIY3JhrDGxON4U2lHZKSG/WlQpZ3w/Chor/yN4w8uOGpq6sr/GkY2bhAuL+/3yW+Mow8ONHwX0hXrlzpNhhGFtNT7p6eHpc5zDDSIJSZkY6Q/4z+8uXL3PkcjfaAnJ2rVq2qziwXhW9V+GSChBvtkj8hb0ehAdslBuSRDN6lu7s7rHMQ/A8C7fjjcQKGRQAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAABRCAYAAADvoiXxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dzLqhpBFIXh8o6CgigIguBM8f1fRkQcCIqgHEG8XxJXUwYjHjjb2NVx7/VBky4dZNB/qsqOdurXlaO/DIdDt16v/eh7+XzedbtdP7Ij7f8k+jFGQ2KMhsQYDYkxGhJjNCTGaEiM0ZAYoyExRkNijIbEGA2JMRoSYzQkxmhIjNGQGKN5At9Lu1wu7ng8RsfhcIiO2xjvWf7uGqO5czqd3GQycavVKjpHGPdx3MZ4D/Hs9/vosIZf9/QQymg0imYUqWazGR1WMJqr2WzmxuOxH72m0Wi4VqvlR7qZjwbLEY53qNfrrt1u+5Fepvc0X19fbwsG5vP5P89Yn8BsNNjAxnGBsdQtl0s/0slsNNPp9KVN709gQ30+n/1IH5PRYBnBERcE885l739jMpoQFxTLlNZ7OOaiwf2YuJalR4vFwp/pYi6akBcSs43GvY2paHAB49zLPMLft9ls/EgPU9FgaQotZKShmIomifsnGu/ZmIomiaUCS5S2T1GMJoDtduvPdDATTZIbUs40HyrJj77aPkGZiSbUDT0LTO1pkqItWEZDYoyGxBhNAHjesCZmoknywmWzWX+mA6MJgDPNhyoUCi6TyfhRWKVSyZ/pYGpPk9TFYzQfrFwu+7NwisViYjNcXBhNzCqVij/Tw1w0of/V12o1f6aHqWgAv7kOBZ+atO1ngNHESOuTJMxFg+UpxJKBWQYPBNDIXDSAGSDuvY3m59WYjAY3+uK8qNhwa51lwGQ0gL1NHB/BsSxpf0aN2WgAF/fd/y+Ep2FhJtPMdDS4uJ1O523hIMJqtepHevGZe1f4tUC/33/5a5nYVGOG0byPucdoPPxaAY8gwY/2JbAvwgyjfUm6x2geYNYZDAZut9v5V55LpVLRf0b2ej3/ih2m9zTPYMZADLlcLvrGHZaedDr958BreA8HxhYxmm9gJkEUiAah3A68hvcsYzQkxmhIjNGQGKMhMUZDYoyGxBgNiTEaEmM0JMZoSIzRkBijITFGQ2KMhsQYDYkxGhJjNCTGaEiM0ZAYoyEh534Dro8Yg7Uu3YAAAAAASUVORK5CYIJVNxErAAAAAElFTkSuQmCCgg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAB0CAYAAAC4w7F0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMTowNzoxOSAyMTozMToxMInKaXsAAAwxSURBVHhe7Z09jE1NGMfH3ayP+AqRSNiNr8JWNHQat6KhokFlC9vZYmmQN6uj0VHQ0VDR6GioaJaGgkiERLJIfETYyPv6zT3PvnPH+Zi55957zt19fsnJ3vM1M2fmP888M2f2zJJ//2Acfv/+bWZnZ823b9/M9+/fk6PKYmXlypVm/fr1Zt26dckRY9pE8+XLF/P27VsrHEVxWbp0qdm+fbv9Oy+aDx8+2E1RshgaGjIjIyMt0dAcvX//PjmlKNkgnMavX7/UwijB4Lo0EIz6MEoMDZxfRYmhoVZGiaWR/FWUYFQ0SjQqGiUaFY0SjYpGiUZFo0SjolGiUdEo0aholGiWzMzMtE3C6gVPnz417969S/aMGRsbMzt37kz2snn58qV58eJFstfO3r17zaZNm5K9bK5du2bu3r1rpqamTLPZTI7+z5MnT2w8vOVfvXq1PUbaSGNI+CFcvXrV5sGxY8dS0zBo9EU058+fN/fu3Uv2Wly/ft0WfB5kNoWexvT0tDl8+HCylw5COHjwoC38+/fvJ0dbIJTTp0/nTglBPGfOnDF79uxJjsSDYC9cuGB/I0rSIeIcVPrSPFG4hw4daqu5ZOTXr1+TvXS4j9rpFhq/OVYkOEB0QNwuCObkyZPzgqEQCZfNLVCuwxKVgWmzQtHzDgp9sTSCbzkopBs3biR72YjFgBALJXAP91K7XcHKcQRy5cqVNlEChYt1fPjwoTl16pSZmJhIzsQjYdE8EQ6CH3QqdYTJSLEG3YZmAWHs37+/TTAPHjyYtzBZTQ9i6lYTIsJ89OjRghAMVCIaMlIKEstTtglIQ3wo3++hyREQVBau0JR2KhENJpvaJ7V5cnJyvvZ3A8LCilHwecLI8zEQG852md4OlcHdXMEC6XTPu3lA2m7evGktMRvn60JlzRM9E/EVyCB6Mt0iywGGNWvWJL+MLZQsEBzCCRkaSAMBjI+Pt21+fKTTPX/p0iWbF/zdt2+fuXz5srXEbJw/evRoVytXp1Tq09DGSztPLSSzykKm48CC3zSBK6Rbt25ZJ7UXBYHocKLTfCYBK+b6XNKrI13cJ/njnie9VVOpaABrI5lCZvnjObHg6CIc3wEWaBJxgAXiozdFLcYSdFNAPFte75A00kyLkImbtHMPG+lko/cn19DsVt1UVS4aCpEMEv8Ga1Om4BAepFkZgdp78eLFNlFRi2kOEBC13fc/+gV5kWadpCmHqtImVC4aoPCk9lPTKDT+xkJmshFengMM1FxqMOLxr6U2Y3l6NRyQR5p1BF/gVVIL0QCFKP4NlqYT/0YcTddvKYJraSJmZmbsX9fx7dVwwKBTG9EA1kYKDV8jr3fjU+QAh4DFuX37dltT4I5gKy1qJRpwx28osFBTXOQAx0CvR8Tbi57VoFM70VDgCAcQAeM3If5NiAMM+EtsRZQV3kKmdqIBeg/SRFDTiwb+YhxgnFy2IgsiQlXx/E0tRQPuwFhRAXfiAOdBfAgLOh0RXsjUVjRAM1VU0yngrJeTechbcB96S9J84VsdP37c/lb+py/zaWg6KCRqrzi2NCNYEgpaHN80uJ4xE8GfTyMz4whPfKE8du/enfxqgShFmMTl+k+M4ZSxXlhAwhRRS/PJczebzcx8YUurAJJ2wiEMriOcflPZdE8hZFIVTq6M2/jXy4QqBEMmFiGTq/KcawoFwUjz2AmkibSlgRAJPy9f/Ilj4Aue9OW9pugVlUwsd0EAfuakQUHzLR33esKlKWGfTI6Bmk3BMnFdBLR582brw5QRi0CYDAOkQTzEkZcvWBDfAmOVXDi/YC1Nr0BIFAx+hzqs/WOgRaNUQ617T0o9UdEo0aholGhUNEo0KholGhWNEk2DpVkUJYbGxo0bk5+KEkZj1apVdiEoRQnF+jRbt241w8PD9oCi5MEKc/OLhLGED6vK6RKEShYbNmywL4f/WsPy06dPdv2nubm55Iiy2MF9wffFlYG/RCPwBacfP35Y8SyWlVo+f/6c/MqHTGQtx4UMK8jhsqxdu/avZ80UzWLk2bNnya98RkdH21aPXWzo4J4SjYpGiUZFo0SjolGiUdEo0aholGhUNEo0KholmtTBPUaAGR1lRJh3UouF0PduK1asMI3Gwq9vPCevDtzP6EKbaBDL7Oys3XSRd0XgNQLvnmQUfF40WJTXr18vKsuixME7N6bRWNGoYJRQli9f3hIN/wSvglFCaeDwqmCUGBpMuFKUGBpqZZRYdHBPiUZFo0SjolGiUdEo0aholGhUNEo0Kholmp5+3ZPv9LqLbIV+9zbkG7xF8J1gFuLgg9TumpUCcfBdXv6ykTY+K8u/nY6NjSVXKWn0VDTycWgXVo9LK0SXvK99h36lm3iJ3/+SOQJhmUFZ6icNhJMlNsWYoYmJiX+S312H2vvz50+zbNkyKwR4/vy5Pb5r1y67n4X8KyiFzKg19xw4cMBaqqIPTRMXi5hS+OfOnUuOtjhx4sT8CnSEuW3bNrvx++PHj/Y4cfJ7ISymwfred+7c6eqz9NSnoSCorawD4MKKcSKiNLiP9Z6wKCIQan7oAhdZi7m7K9Vh8fg0PssPEg9//1hdMzU1Zc8vBMhjKkC3qcQR5kFoPnrxQECzBP5KJrK2AEJEzIjTp2hxj0Eir2KWoe+iEcvBA3VjxX8fhEHYWCaaJ4Fjkomuj+OTJqRBJWuxjrL0XTQ0C9L7iV0RN4SQtSzzLBxCw3nuZjNFfIiZZpONnmGWFWBCHD1O2aQ5dSE89xq2tPCy4ihLXxbUIPHSG5qenrZNAM2TPBT+RJZzK70gWSMpDzKYBcUoeH8pHzIapxA4jx/jWqJewPNhTcXx9pEempsOWb9KSOstpvVKyVepKJK3bjg+aetJhVKJT0NiXQGErohbRN5aljQ7YuHITDLWXz+pm0gcIhjixsq6a3Nyjmtca0IHQM5nQQUjrKyKJnnpNrXkubuVoRLRABkTsyJuEWSUFFBW04RQJcOIk2UMqdms8IaJ7yZS2wFLwYZVkV4hNZ1ClWeXgkbwRVaQ+wiLLQ0sN+GL70ZY7LtbGeFUJhpwax0mV7rKnRCymDvH/QKh0PCtxsfHrYC6YX3EGQf3GV1IgxQ61/bS6nWbSkUD7oq4jKN0WuNDF3MnLmoa4qFW+wIS61OmuXR9mLz0IHBpQrL8njpSuWjINIQjmTc5OTlfS0PBJ2BDAHndaRdqP80VAsKcu34Q8ZdpLiX9+ByuKH14Zjmf1kuqK5WLBshc8W+o4bEFVnYxd+IXAYl4aS47tTZyn4SVhzizZSxbv6mFaIDeABtQ60IH/sjsIgc4FGq9iBdkZFlppzaiAQpMzDU+Staa1S4hDjBgjfzubRpuN1Y+ttwpIc2sXBNilepCrURDxuGgSgZibYrMNs4zFFkZxILlyJqnI7ii8j+xEYr0lhBEUfolPlesIHlQx2arVqIBrIV0RcmwPMuACCgY7gl1gIsKQfwjwvQLMhRXwHmvSehmS3p80YvVzLNWLG5fBbUTDeDQin+Th4xtxDjACC2tW0/hMcgnhdSpUw1YGrE2NLNpwicesZIIxI9P3raTrrTxK56B4YEQCMOtLO7vTuj5uydqGgUlziq1lwxtNpvzGZsFPog4o2Sq++qBTJf3WSEjnAjC9ZEw/2JJCMut0X5cnUB47qgwltCNj/yg8KRJ9q0a53iPlnY/ecJGOuWZOMc1WCzJCwQrHQoRJvchYrenGEtPZ+6RwLNnz5o3b94kR4xhRhyz9wDh5EFtk8wlU9zr8U04R0YdOXIkOZoNC4SQWVLLmA1IgbDJMTKRgs4ano+BsEgvYRMveSCFzT7xU2mwIswc9GG2I8//+PFjG4Z7P2nGEktF4Dz5yjniFStFuNzPOa6Re1mCh1mQnYqmp5aGhGY5nqETxHlITLF/vbwN9ucAF8E9FBpTEEgfG7WQjULuNCPzIE4KTOa34GCT5iLrCHKvpJdJ71gMSacbLnDet1oIi/tBKl+Z5+zL1IhuQ0ZSQ8mgEN9H6S4DKRqlWmrZe1LqjYpGiUZFo0SjolGiUdEo0aholGhUNEo0KholmgaLditKDA1eXilKDFY0am2UGGzztGXLlmRXUfIZHh5uOcJMoB4ZGbEHFSULBLNjx4725QiZGPTq1SszNzeXHFGUFswBGh0d/ePKDJn/ADUrZQ9Ndj+cAAAAAElFTkSuQmCC\"","import React, { useEffect, useContext } from 'react';\r\nimport { TyreChecksContaxt, TyreCheckProvider } from './tyreChecksProvider';\r\nimport AddBoxIcon from '@material-ui/icons/AddBox';\r\nimport RemoveCircleIcon from '@material-ui/icons/RemoveCircle';\r\nimport { TextBox, SecondaryButton, CustomButton, AppButtonGroup } from '../../../../Core/FormInput';\r\nimport AppContext from '../../../../App/AppContext';\r\nimport { Button, CircularProgress, DialogContent, Grid, Tooltip, FormLabel, IconButton, InputLabel, Typography } from '@material-ui/core';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport SignaturePad from 'react-signature-canvas';\r\nimport { SingleAxle, CustomAxle, EditAxle } from './tyreAxle';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport { useWindowSize } from '../../../../Core/Controls/ScreenResolution';\r\n\r\nconst TyreChecks = () => {\r\n const {\r\n state,\r\n fromStep,\r\n inputList,\r\n handleAddClick,\r\n handleRemoveClick,\r\n handleInputChange,\r\n handleSliderChange,\r\n useDefaultSig,\r\n signCanvas,\r\n GetTechnicianSign,\r\n clear,\r\n YesNoRadio,\r\n handleInputs,\r\n inputChange,\r\n handleSubmit\r\n } = useContext(TyreChecksContaxt);\r\n const { hideModal, showToast, hideTopNavAndMenu } = useContext(AppContext);\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n\r\n useEffect(() => {\r\n fromStep && hideTopNavAndMenu();\r\n }, []);\r\n const history = useHistory();\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {' '}\r\n Registration Number: {state.registration}\r\n \r\n \r\n {' '}\r\n WIP No: {state.wipNumber}\r\n \r\n \r\n Company : \r\n {state.customerName}\r\n \r\n \r\n \r\n \r\n {/* \r\n Size and Type of Tyre\r\n */}\r\n \r\n Size & Type of Tyre (Front)\r\n \r\n \r\n \r\n Size & Type of Tyre (Rear)\r\n \r\n \r\n \r\n Date of Tachograph (Last Callibration)\r\n \r\n \r\n \r\n Windscreen Condition Okay?\r\n \r\n \r\n \r\n \r\n \r\n \r\n {state.errors?.message}\r\n \r\n \r\n \r\n \r\n \r\n 1280 ? () => handleInputs(1) : (nameID) => handleSliderChange(1, nameID)} state={state} axNO={1} />\r\n 1280 ? () => handleInputs(2) : (nameID) => handleSliderChange(2, nameID)}\r\n axNO={2}\r\n state={state}\r\n tabIndexMultiplyer={20}\r\n />\r\n 1280 ? () => handleInputs(3) : (nameID) => handleSliderChange(3, nameID)}\r\n axNO={3}\r\n state={state}\r\n tabIndexMultiplyer={30}\r\n />\r\n 1280 ? () => handleInputs(4) : (nameID) => handleSliderChange(4, nameID)}\r\n axNO={4}\r\n state={state}\r\n tabIndexMultiplyer={40}\r\n />\r\n \r\n \r\n {inputList?.map((x, i) => (\r\n \r\n \r\n Defect\r\n handleInputChange(e, i)}\r\n InputProps={{\r\n tabIndex: '60',\r\n endAdornment: (\r\n \r\n <>\r\n {inputList.length !== 1 && (\r\n handleRemoveClick(i)}\r\n />\r\n )}\r\n {inputList.length - 1 === i && (\r\n \r\n )}\r\n \r\n \r\n )\r\n }}\r\n />\r\n \r\n \r\n ))}\r\n \r\n\r\n \r\n \r\n Technician Signature \r\n {!state.imgtechniciansign && }\r\n \r\n {!state.imgtechniciansign && }\r\n \r\n {state.imgtechniciansign ? (\r\n \r\n ) : (\r\n <>\r\n {\r\n GetTechnicianSign();\r\n }}\r\n canvasProps={{\r\n className: 'signatureCanvas'\r\n }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n Submit\r\n \r\n \r\n \r\n history.goBack()}>\r\n Cancel\r\n \r\n \r\n \r\n \r\n
\r\n
{label}
\r\n
\r\n {payload[0].name}: \r\n {formatter ? formatters[`${formatter}`](+payload[0].value) : +payload[0].value}\r\n
\r\n
\r\n
\r\n \r\n \r\n {!props.currency ? : £}\r\n \r\n \r\n \r\n {props.val}
\r\n {props.title}
\r\n \r\n \r\n
\r\n {props?.data?.map((m, i) => {\r\n let color = COLORS[i];\r\n return (\r\n
\r\n
\r\n {' '}\r\n
\r\n
{m.name}
\r\n
\r\n ({formatters.CurrencyThousandSeparatorWithoutZero(m.value)})\r\n
\r\n
\r\n
\r\n );\r\n })}\r\n
\r\n \r\n \r\n {props.t1 ? 'VehicleType' : 'Salesperson'}\r\n Sold\r\n \r\n \r\n \r\n {props?.rows?.length > 0 ? (\r\n props?.rows?.map((row) => (\r\n \r\n \r\n {row.name}\r\n \r\n {row.value}\r\n \r\n ))\r\n ) : (\r\n \r\n No record found\r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { Grid, Avatar, Typography, Paper, CircularProgress, Card, ButtonGroup, Button, Hidden } from '@material-ui/core';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport { DashboardTemplets, SalesBarChart, SalesLineChart, SalesTable, SalePieChart } from './dashboardTemplates';\r\nimport ReactSpeedometer from 'react-d3-speedometer';\r\nimport { getsalesDashBoard, getUsedVehicle, getNewVehicle, getVehicleContingency, getOrderVehicle } from './../../../../../Core/Service/salesDasboard-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport formatters from '../../../../../Core/Grid/inputFormatter';\r\nimport './salesDashboardStyle.scss';\r\n// import { CircularProgress } from '@material-ui/core/CircularProgress';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n margin: 3,\r\n border: '2px solid #f5f5f5 ',\r\n Opacity: 0.9,\r\n minWidth: 120,\r\n padding: '5px 0px',\r\n background: '#f5f5f5',\r\n borderRadius: 10\r\n },\r\n rootWithutBackColorNBorder: {\r\n width: '100%',\r\n margin: 3,\r\n // border: '2px solid #f5f5f5 ',\r\n Opacity: 0.9,\r\n minWidth: 120,\r\n padding: '5px 0px'\r\n // background: '#f5f5f5',\r\n // borderRadius: 10\r\n }\r\n}));\r\n\r\nconst SalesList = [\r\n { id: 'salesperson', name: 'Salesperson' },\r\n { id: 'byModel', name: 'By Model' },\r\n { id: 'byStatus', name: 'By Status' },\r\n { id: 'vehicleType', name: 'Vehicle Type' },\r\n { id: 'vehicleCount', name: 'Vehicle Count' }\r\n];\r\n\r\nconst VehicleList = [\r\n { id: 'vehicleCount', name: 'Vehicle Count' },\r\n { id: 'vehicleValue', name: 'Vehicle Value' }\r\n];\r\n\r\nconst SalesDashboard = () => {\r\n const classes = useStyles();\r\n\r\n const [state, setState] = useState({\r\n usedVehicleFrenchise: [],\r\n usedVehicleBranch: [],\r\n usedVehicleModelCode: [],\r\n newVehicleStatus: [],\r\n newVehicleModel: [],\r\n newVehicleModelCode: [],\r\n contBranch: [],\r\n contDepartment: [],\r\n contFranchise: [],\r\n orderYear: [],\r\n orderMonth: [],\r\n orderCount: [],\r\n vehicleType_Sold: [],\r\n salePerson_Sold: [],\r\n UsedLoader: true,\r\n NewOrderLoader: true,\r\n NewLoader: true,\r\n ContiLoader: true,\r\n selectedNewVehicleListType: 'salesperson',\r\n selectedUsedVehicleListType: 'vehicleCount'\r\n });\r\n\r\n const pullOrderData = async () => {\r\n let res = await getOrderVehicle();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n orderYear: res.data?.table.map((m) => ({\r\n name: m.orderYear,\r\n val: m.sold\r\n })),\r\n orderMonth: res.data?.table1.map((m) => ({\r\n name: m.orderMonthName,\r\n val: m.sold\r\n })),\r\n orderCount: res.data?.table3.map((m) => ({\r\n name: m.modelDescription,\r\n total: m.vehicleCount\r\n })),\r\n vehicleType_Sold: res.data?.table2.map((m) => ({\r\n name: m.modelAnalysisCode,\r\n value: m.vehicleCount\r\n })),\r\n salePerson_Sold: res.data?.table4.map((m) => ({\r\n name: m.salesperson,\r\n value: m.totalSold\r\n })),\r\n\r\n vehiclesOrdered: res.data?.table5[0]?.sold || 0,\r\n spedoMeterMaxValue: res.data?.table5[0]?.vehicleTarget,\r\n spedoMeterActualValue: res.data?.table5[0]?.sold,\r\n spedoMeterPercentageValue: (res.data?.table5[0]?.sold / res.data?.table5[0]?.vehicleTarget) * 100,\r\n progress: 100,\r\n NewOrderLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullUsedVehicleData = async () => {\r\n let usedVehicleRes = await getUsedVehicle();\r\n\r\n if (usedVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n usedVehicleFrenchise: usedVehicleRes.data?.table.map((m) => ({\r\n name: m.franchiseName,\r\n total: m.numberOfVehicles,\r\n value: m.totalValue\r\n })),\r\n usedVehicleBranch: usedVehicleRes.data?.table1.map((m) => ({\r\n name: m.branchShortName,\r\n total: m.numberOfVehicles,\r\n value: m.totalValue\r\n })),\r\n usedVehicleModelCode: usedVehicleRes.data?.table2.map((m) => ({\r\n name: m.modelCode,\r\n value: m.numberOfVehicles,\r\n totalvalue: m.totalValue\r\n })),\r\n\r\n totalUsedVehicleCount: usedVehicleRes.data?.table3[0]?.totalVehicleCount,\r\n progress: 25,\r\n UsedLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullNewVehicleData = async () => {\r\n let newVehicleRes = await getNewVehicle();\r\n if (newVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n newVehicleStatus: newVehicleRes.data?.table.map((m) => ({\r\n name: m.statusDescription,\r\n value: m.vehicleCount\r\n })),\r\n newVehicleModel: newVehicleRes.data?.table1.map((m) => ({\r\n name: m.modelAnalysisCode,\r\n value: m.vehicleCount\r\n })),\r\n newVehicleModelCode: newVehicleRes.data?.table2.map((m) => ({\r\n name: m.modelDescription,\r\n value: m.vehicleCount\r\n })),\r\n totalNewVehicleCount: newVehicleRes.data?.table3[0]?.totalVehicleCount,\r\n progress: 50,\r\n\r\n NewLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullcontingencyData = async () => {\r\n let res = await getVehicleContingency();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n contBranch: res.data?.table.map((m) => ({\r\n name: m.branchShortName,\r\n total: m.total\r\n })),\r\n contDepartment: res.data?.table1.map((m) => ({\r\n name: m.departmentDescription,\r\n total: m.total\r\n })),\r\n contFranchise: res.data?.table2.map((m) => ({\r\n name: m.franchiseName,\r\n total: m.total\r\n })),\r\n\r\n contTotalCount: `£${res.data?.table3[0]?.total}`,\r\n progress: 75,\r\n ContiLoader: false\r\n }));\r\n }\r\n };\r\n const history = useHistory();\r\n\r\n useEffect(async () => {\r\n pullUsedVehicleData();\r\n pullNewVehicleData();\r\n pullcontingencyData();\r\n pullOrderData();\r\n }, []);\r\n const GotoNewVehicleOrder = (val) => {\r\n console.log(val, 'val');\r\n let searchQuery = `?mc=${val}`;\r\n history.push({\r\n pathname: `/sales/VehicleNewOrder`,\r\n search: searchQuery\r\n });\r\n };\r\n const GoToUsedVehicleOrder = (name) => (val) => {\r\n let searchQuery = `?${name}=${val}`;\r\n history.push({\r\n pathname: `/sales/UsedVehicleStock`,\r\n search: searchQuery\r\n });\r\n };\r\n const GoToUsedVehicleOrderChartList = (paramValue, name) => (e) => {\r\n let searchQuery = `?${paramValue}=${name}`;\r\n history.push({\r\n pathname: `/sales/UsedVehicleStock`,\r\n search: searchQuery\r\n });\r\n };\r\n const GoToNewVehicleStockExcludingWIP = (name, url) => (val) => {\r\n ///sales/SalesContingencyDebt\r\n let searchQuery = `?${name}=${val}`;\r\n history.push({\r\n pathname: `/sales/${url}`,\r\n search: searchQuery\r\n });\r\n };\r\n\r\n const onNewVehicleCardSelectHandle = (name, url, val) => (e) => {\r\n if (url) {\r\n let searchQuery = `?${name}=${val}`;\r\n history.push({\r\n pathname: `/sales/${url}`,\r\n search: searchQuery\r\n });\r\n }\r\n };\r\n\r\n const handleBar = (storeStateName, val) => {\r\n if (storeStateName._reactName === 'onChange') {\r\n const { name, value } = storeStateName.target;\r\n setState((st) => ({ ...st, [name]: value }));\r\n } else {\r\n setState((st) => ({ ...st, [`${storeStateName}`]: val }));\r\n }\r\n };\r\n\r\n console.log(state, 'state');\r\n\r\n let newVehicleChartConfig = {\r\n salesperson: { paramName: '', url: '' },\r\n vehicleType: { paramName: '', url: '' },\r\n byStatus: { paramName: 'pd', url: 'NewVehicleStockExcludingWIP' },\r\n byModel: { paramName: 'mac', url: 'NewVehicleStockExcludingWIP' },\r\n vehicleCount: { paramName: 'mc', url: 'NewVehicleStockExcludingWIP' }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n New Vehicle Order\r\n \r\n \r\n {state.NewOrderLoader ? (\r\n \r\n \r\n \r\n New Vehicle Order Year\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n New Vehicle Order Month\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n New Vehicle Order Count\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {SalesList.map((n) => {\r\n return (\r\n handleBar('selectedNewVehicleListType', n.id)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {n.name}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {SalesList.map((n) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {false ? (\r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n [\r\n ...(state.selectedNewVehicleListType === 'salesperson'\r\n ? state.salePerson_Sold\r\n : state.selectedNewVehicleListType === 'vehicleType'\r\n ? state.vehicleType_Sold\r\n : state.selectedNewVehicleListType === 'byStatus'\r\n ? state.newVehicleStatus\r\n : state.selectedNewVehicleListType === 'byModel'\r\n ? state.newVehicleModelCode\r\n : state.selectedNewVehicleListType === 'vehicleCount'\r\n ? state.newVehicleModel\r\n : [])\r\n ].map((g) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {g.name}\r\n \r\n \r\n {g.value || 0}\r\n \r\n \r\n Vehicle by Franchise\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n Vehicle by Branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {VehicleList.map((n) => {\r\n return (\r\n handleBar('selectedUsedVehicleListType', n.id)}\r\n style={{ fontSize: 10 }}\r\n >\r\n {n.name}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {VehicleList.map((n) => {\r\n return ;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {false ? (\r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n [...state.usedVehicleModelCode].map((g) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {g.name}\r\n \r\n \r\n {state.selectedUsedVehicleListType === 'vehicleCount'\r\n ? g.value\r\n : formatters.CurrencyThousandSeparator(g.totalvalue) || 0}\r\n \r\n \r\n Sales branch total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Departments total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Franchise total\r\n \r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SalesDashboard;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport TabContext from '@material-ui/lab/TabContext';\r\nimport TabList from '@material-ui/lab/TabList';\r\nimport TabPanel from '@material-ui/lab/TabPanel';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper\r\n }\r\n}));\r\n\r\nexport const CustomTab = (props) => {\r\n const { TabScreen1, TabScreen2, TabScreen3 } = props;\r\n const classes = useStyles();\r\n const [value, setValue] = React.useState('1');\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n \r\n Vehicle Count By Status\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Count By Model Analysis Code\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle Count By Model\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nconst TabScreen2 = (props) => {\r\n return (\r\n \r\n \r\n \r\n \r\n Vehicle By Franchise\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By Franchise\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle By Branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By branch\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Vehicle By Model Codes\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Total Value By Model Codes\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nconst TabScreen3 = (props) => {\r\n return (\r\n \r\n \r\n \r\n \r\n Sales Branches Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Department Total\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Franchise Total\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst SalesDashboard = () => {\r\n const [state, setState] = useState({\r\n usedVehicleFrenchise: [],\r\n usedVehicleBranch: [],\r\n usedVehicleModelCode: [],\r\n newVehicleStatus: [],\r\n newVehicleModel: [],\r\n newVehicleModelCode: [],\r\n contBranch: [],\r\n contDepartment: [],\r\n contFranchise: [],\r\n showLoader: true\r\n });\r\n const pullUsedVehicleData = async () => {\r\n let usedVehicleRes = await getUsedVehicle();\r\n\r\n if (usedVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n usedVehicleFrenchise: usedVehicleRes.data?.table.map((m) => ({\r\n name: m?.franchiseName,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n usedVehicleBranch: usedVehicleRes.data?.table1.map((m) => ({\r\n name: m?.branchShortName,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n usedVehicleModelCode: usedVehicleRes.data?.table2.map((m) => ({\r\n name: m?.modelCode,\r\n total: m?.numberOfVehicles,\r\n totalvalue: m?.totalValue\r\n })),\r\n totalUsedVehicleCount: usedVehicleRes.data?.table3[0].totalVehicleCount\r\n }));\r\n }\r\n };\r\n\r\n const pullNewVehicleData = async () => {\r\n let newVehicleRes = await getNewVehicle();\r\n if (newVehicleRes.success) {\r\n setState((st) => ({\r\n ...st,\r\n newVehicleStatus: newVehicleRes.data?.table.map((m) => ({\r\n name: m?.statusDescription,\r\n total: m?.vehicleCount\r\n })),\r\n newVehicleModel: newVehicleRes.data?.table1.map((m) => ({\r\n name: m?.modelAnalysisCode,\r\n total: m?.vehicleCount\r\n })),\r\n newVehicleModelCode: newVehicleRes.data?.table2.map((m) => ({\r\n name: m?.modelDescription,\r\n total: m?.vehicleCount\r\n })),\r\n totalNewVehicleCount: newVehicleRes.data?.table3[0].totalVehicleCount,\r\n showLoader: false\r\n }));\r\n }\r\n };\r\n\r\n const pullcontingencyData = async () => {\r\n let res = await getVehicleContingency();\r\n if (res.success) {\r\n setState((st) => ({\r\n ...st,\r\n contBranch: res.data?.table.map((m) => ({\r\n name: m?.branchShortName,\r\n total: m?.total\r\n })),\r\n contDepartment: res.data?.table1.map((m) => ({\r\n name: m?.departmentDescription,\r\n total: m?.total\r\n })),\r\n contFranchise: res.data?.table2.map((m) => ({\r\n name: m?.franchiseName,\r\n total: m?.total\r\n })),\r\n\r\n contTotalCount: `£${res.data?.table3[0].total}`\r\n }));\r\n }\r\n };\r\n\r\n useEffect(async () => {\r\n pullUsedVehicleData();\r\n pullNewVehicleData();\r\n pullcontingencyData();\r\n // pullOrderData();\r\n }, []);\r\n\r\n return (\r\n \r\n {state.showLoader ? (\r\n
\r\n ) : (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n TabScreen1(state)} TabScreen2={() => TabScreen2(state)} TabScreen3={() => TabScreen3(state)} />\r\n \r\n \r\n )}\r\n
\r\n
\r\n \r\n \r\n \r\n Reg No: {state.headerRecords?.registration} WIP No: {state.headerRecords?.wipNumber}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Repair Required\r\n \r\n \r\n Authorised\r\n \r\n \r\n Actioned\r\n \r\n Comments\r\n \r\n \r\n \r\n \r\n {inputList.map((x, i) => {\r\n return (\r\n \r\n \r\n {x.isDisabled ? (\r\n {x.handoverSheetRepairRequired}
\r\n ) : (\r\n handleInputChange(e, i)}\r\n disabled={x.isDisabled}\r\n />\r\n )}\r\n {x.createdBy && (\r\n {`Created By ${x.createdBy}-${moment(x.dateCreated).format(\r\n 'LLL'\r\n )}`}\r\n )}\r\n {x.errorHandoverSheetRepairRequired && (\r\n \r\n {x.errorHandoverSheetRepairRequired}\r\n \r\n )}\r\n \r\n \r\n {x.authorisedBy ? (\r\n \r\n {x.authorisedBy}\r\n {moment(x.dateAuthorised).format('DD-MMM-YY')}\r\n
\r\n ) : (\r\n // handleCheckbox(e, i)}\r\n // name=\"handoverSheetAuthorised\"\r\n // disabled={x.isDisabled}\r\n // />\r\n \r\n buttonClick('handoverSheetAuthorised', 1, i)}\r\n variant={x.handoverSheetAuthorised == 1 && 'contained'}\r\n >\r\n Yes\r\n \r\n buttonClick('handoverSheetAuthorised', 0, i)}\r\n variant={x.handoverSheetAuthorised == 0 && 'contained'}\r\n >\r\n No\r\n \r\n \r\n )}\r\n \r\n \r\n {x.actionedBy ? (\r\n \r\n {x.actionedBy}\r\n {moment(x.dateActioned).format('DD-MMM-YY')}\r\n
\r\n ) : (\r\n // handleCheckbox(e, i)}\r\n // name=\"handoverSheetActioned\"\r\n // // disabled={!x.handoverSheetAuthorised || x.isDisabled}\r\n // disabled={x.isDisabled ? x.isDisabled : !x.handoverSheetAuthorised}\r\n // />\r\n\r\n \r\n buttonClick('handoverSheetActioned', 1, i)}\r\n variant={x.handoverSheetActioned == 1 && 'contained'}\r\n >\r\n Yes\r\n \r\n buttonClick('handoverSheetActioned', 0, i)}\r\n variant={x.handoverSheetActioned == 0 && 'contained'}\r\n >\r\n No\r\n \r\n \r\n )}\r\n \r\n \r\n {x.isDisabled ? (\r\n {x.handoverSheetActionComment}
\r\n ) : (\r\n handleInputChange(e, i)}\r\n disabled={x.isDisabled}\r\n />\r\n )}\r\n \r\n \r\n {inputList.length !== 1 && state.showAdd && !x.isDisabled && (\r\n handleRemoveClick(i)}\r\n toolTipTitle=\"Remove Row\"\r\n />\r\n )}\r\n {i === 0 && state.showAdd && }\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n Save\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Daily Lift Check List\r\n \r\n \r\n \r\n \r\n \r\n It is important that before a lift is used in the workshop the technician inspects the lift\r\n to ensure it is in good working order. This checklist helps to ensure the correct areas are checked.\r\n If you answer no to any of the following questions, please report the defect to your supervisor or\r\n Workshop Controller immediately and ensure there is a sign which confirms the lift is 'out of use' until fixed.\r\n \r\n \r\n \r\n\r\n \r\n * Required\r\n \r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n 1. Name\r\n \r\n \r\n \r\n {state.errors[\"name\"]}\r\n \r\n \r\n\r\n \r\n \r\n 2. Is the frame structurally sound?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"frameStructurallySound\"]}\r\n \r\n \r\n\r\n \r\n \r\n 3. Have you checked to make sure the lifting capacity of the lift is rated higher than the weight of the vehicle you are intending to lift?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedWeight\"]}\r\n \r\n \r\n\r\n \r\n \r\n 4. Have you located the stop control?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"locatedStopControl\"]}\r\n \r\n \r\n\r\n \r\n \r\n 5. Have you checked the lifting arms and are they functioning correctly?\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedLiftingArms\"]}\r\n \r\n \r\n\r\n \r\n \r\n 6. Please confirm that you have checked the condition of the pads\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedPads\"]}\r\n \r\n \r\n\r\n \r\n \r\n 7. Confirm that you have checked pillar lift locks have been activated before moving under vehicle\r\n \r\n
\r\n \r\n } label=\"Yes\" />\r\n
\r\n } label=\"No\" />\r\n \r\n \r\n {state.errors[\"checkedPillarLiftLocks\"]}\r\n \r\n \r\n\r\n \r\n \r\n 8. Confirm that you have used chocks. If not available, inform the workshop controller to locate some before the lift is used.\r\n \r\n
\r\n \r\n } label=\"Yes, and in use\" />\r\n
\r\n } label=\"None available - discussed with workshop controller\" />\r\n \r\n \r\n {state.errors[\"chocksUsed\"]}\r\n \r\n \r\n\r\n \r\n \r\n 9. Use this space to make any comments/issues following your lift check.\r\n \r\n \r\n \r\n\r\n \r\n Save\r\n \r\n \r\n
\r\n
>\" aria-label=\"breadcrumb\">\r\n \r\n Home\r\n \r\n \r\n {props.match.params.name}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
No user available
\r\n \r\n );\r\n }\r\n const setFilterText = (e) => {\r\n const vl = e.target.value;\r\n setState((st) => ({ ...st, filterText: vl }));\r\n searchTimer && clearTimeout(searchTimer);\r\n searchTimer = setTimeout(() => {\r\n setFilteredRow();\r\n }, 500);\r\n };\r\n\r\n const setFilteredRow = () => {\r\n setState((st) => {\r\n const newSt = { ...st };\r\n const { rows_new, filterText } = newSt;\r\n let filterd = [];\r\n filterd = [...rows_new];\r\n if (filterText.trim().length > 0) {\r\n filterText\r\n .trim()\r\n .split(' ')\r\n .map((t) => t.trim().toLowerCase())\r\n .forEach((src) => {\r\n filterd = filterd.filter((rw) => some(rw, (vl) => `${vl}`.toLowerCase().includes(src)));\r\n });\r\n }\r\n newSt.filteredRows = filterd;\r\n return newSt;\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n setFilteredRow();\r\n }, [state.rows_new]);\r\n\r\n const column_new = useMemo(() => {\r\n const tempCols = [...baseColumns];\r\n tempCols.splice(5, 0, {\r\n field: 'userRole',\r\n headerName: 'User Type',\r\n flex: 0.4\r\n });\r\n if (WindowWidths > 750) {\r\n tempCols.splice(6, 0, { field: 'isLocked', headerName: 'Is Locked?', flex: 0.5, valueGetter: (params) => (params.value ? 'Yes' : 'No') });\r\n tempCols.splice(7, 0, {\r\n field: 'isActive',\r\n headerName: 'Is Active?',\r\n flex: 0.5,\r\n valueGetter: (params) => (params.value ? 'Yes' : 'No')\r\n });\r\n }\r\n return tempCols;\r\n }, [WindowWidths]);\r\n\r\n return (\r\n \r\n {state.showResetModal ?
: null}\r\n
>\" aria-label=\"breadcrumb\" style={{ fontSize: '0.85rem' }}>\r\n \r\n Home\r\n \r\n \r\n Reset Password\r\n \r\n \r\n
\r\n
\r\n {/* table start*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* table end*/}\r\n \r\n
\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n setRowStyleOnCondition={true}\r\n setRowStyleFunction={rowDataStyle}\r\n setColStyleOnCondition={true}\r\n setColStyleFunction={colDataStyle}\r\n />\r\n \r\n \r\n\r\n {show.showSendMessageModal ? (\r\n handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default CustSiteVehicles;\r\n","import { useMemo, useState } from 'react';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { FormLabel, Grid, TextField, Tooltip } from '@material-ui/core';\r\nimport SendMessageModal from './sendMessageModal';\r\nimport moment from 'moment';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport ReactDOM from 'react-dom';\r\nimport { CustomIconButton, SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport BookingsScreen from '../../internal/Communicator/Bookings';\r\nimport { SlideToggle } from '../../../Core/FormInput';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport formatters from '../../../Core/Grid/inputFormatter';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\n\r\nconst years = () => {\r\n const years = [];\r\n const d = new Date();\r\n let startYear = d.getFullYear() - 10;\r\n let endYear = d.getFullYear() + 10;\r\n\r\n while (endYear - startYear >= 0) {\r\n years.push({ description: `${startYear}`, id: `${startYear}` });\r\n startYear = startYear + 1;\r\n }\r\n return years;\r\n};\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Action',\r\n field: 'action',\r\n width: 70,\r\n filterable: false\r\n },\r\n { field: 'wipNumber', sortable: true, title: `${'WIP No'}`, width: 70 },\r\n { field: 'registration', sortable: true, title: `${'Vehicle Reg'}`, width: 90 },\r\n { field: 'st', sortable: true, title: `${'Job Description'}`, width: 170 },\r\n { field: 'makeModel', sortable: true, title: `${'Model'}`, width: 200 },\r\n {\r\n field: 'dateDueIn',\r\n sortable: true,\r\n title: `${'Due Date In'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueIn != null) {\r\n return moment(record.dateDueIn).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n {\r\n field: 'dateDueOut',\r\n sortable: true,\r\n title: `${'Date Due Out'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueOut != null) {\r\n return moment(record.dateDueOut).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n { field: 'branchShortName', sortable: true, title: `${'Branch'}`, width: 120 },\r\n {\r\n field: 'status',\r\n sortable: true,\r\n title: `${'Status'}`,\r\n width: 100\r\n }\r\n];\r\n\r\nconst screenName = {\r\n S: 'Site Vehicles',\r\n V: 'VOR Vehicles',\r\n W: 'Workshop Vehicles'\r\n};\r\n// const crumbs = (val) => {\r\n// return [\r\n// { name: 'Home', path: '/' },\r\n// { name: 'Communicator', path: '/communicator_dash' },\r\n// { name: 'Bookings', active: true }\r\n// ];\r\n// };\r\n\r\nconst crumbs = (menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Communicator', path: '/communicator_dash' });\r\n }\r\n list.push({ name: 'Bookings', active: true });\r\n return list;\r\n};\r\n\r\nconst CustBookings = (props) => {\r\n const monthsList = formatters.constantMonthList();\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n\r\n const [show, setShow] = useState({\r\n showSendMessageModal: false,\r\n isGrid: true,\r\n monthCode: monthsList[`${new Date().getMonth()}`],\r\n yearCode: { description: `${new Date().getFullYear()}`, id: `${new Date().getFullYear()}` }\r\n });\r\n\r\n const HandelSendMessage = (val) => {\r\n setShow((st) => ({\r\n ...st,\r\n showSendMessageModal: true,\r\n headerRecordID: val.headerRecordID,\r\n reg: val.registration,\r\n wip: val.wipNumber\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n HandelSendMessage(record)} toolTipTitle=\"Add Action Log\">\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showSendMessageModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setShow((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const handleInput = (e) => {\r\n const { name, value, type, checked } = e.target;\r\n if (type === 'checkbox') {\r\n setShow((st) => ({ ...st, [name]: checked }));\r\n } else {\r\n setShow((st) => ({ ...st, [name]: value }));\r\n }\r\n };\r\n\r\n const handleAutoChange = (fieldName) => (e, val) => {\r\n setShow((st) => {\r\n let newSt = { ...st };\r\n newSt[fieldName] = val;\r\n return newSt;\r\n });\r\n };\r\n\r\n const getUrl = `CustUserCommunicator/Booking?Month=${show.monthCode.id}&Year=${show.yearCode.id}`;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n {show.isGrid ? (\r\n \r\n \r\n \r\n Select Month\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n Select Year\r\n (typeof option === 'string' ? option : option.description)}\r\n renderInput={(params) => }\r\n />\r\n \r\n \r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n />\r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n {show.showSendMessageModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n Approval Order Number\r\n \r\n \r\n {state.error.customerOrderReference}\r\n \r\n \r\n \r\n {state.error.customerSignature}\r\n \r\n \r\n \r\n Approve\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ApproveJobModal;\r\n","import { useMemo, useState } from 'react';\r\nimport DialogComp from '../../../Core/Controls/Dialog/DialogComp';\r\nimport { Grid } from '@material-ui/core';\r\nimport SendMessageModal from './sendMessageModal';\r\nimport ApproveJobModal from './approveJobModal';\r\nimport moment from 'moment';\r\nimport BreadCrumbs from '../../../Core/Controls/Breadcrumb';\r\nimport ReactDOM from 'react-dom';\r\nimport { CustomIconButton, SquareButton } from '../../../Core/FormInput/AppButton';\r\nimport ReportGijgoGrid from '../../internal/ReportsScreens/GijgoForReportsScreen';\r\nimport ListAltIcon from '@material-ui/icons/ListAlt';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\r\nimport DoneOutlineIcon from '@material-ui/icons/DoneOutline';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport { AppStorage } from '../../../Core/Service/storage-service';\r\n\r\nconst baseColumns = [\r\n {\r\n title: 'Action',\r\n field: 'action',\r\n width: 70,\r\n filterable: false\r\n },\r\n { field: 'wipNumber', sortable: true, title: `${'WIP No'}`, width: 70 },\r\n { field: 'registration', sortable: true, title: `${'Vehicle Reg'}`, width: 90 },\r\n { field: 'st', sortable: true, title: `${'Job Description'}`, width: 170 },\r\n { field: 'makeModel', sortable: true, title: `${'Model'}`, width: 200 },\r\n {\r\n field: 'dateDueIn',\r\n sortable: true,\r\n title: `${'Due Date In'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueIn != null) {\r\n return moment(record.dateDueIn).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n {\r\n field: 'dateDueOut',\r\n sortable: true,\r\n title: `${'Date Due Out'}`,\r\n type: 'dateTime',\r\n width: 135,\r\n renderer: function (value, record) {\r\n if (record.dateDueOut != null) {\r\n return moment(record.dateDueOut).format('DD-MMM-YYYY HH:mm');\r\n }\r\n return '-';\r\n }\r\n },\r\n { field: 'branchShortName', sortable: true, title: `${'Branch'}`, width: 120 },\r\n {\r\n field: 'status',\r\n sortable: true,\r\n title: `${'Status'}`,\r\n width: 100\r\n }\r\n];\r\n\r\nconst crumbs = (menuPermissionCounter) => {\r\n let list = [{ name: 'Home', path: '/' }];\r\n\r\n if (menuPermissionCounter !== 1) {\r\n list.push({ name: 'Communicator', path: '/communicator_dash' });\r\n }\r\n\r\n list.push({ name: 'Awaiting Authority', active: true });\r\n\r\n return list;\r\n};\r\n\r\nconst CustAwaitingAuthority = (props) => {\r\n let menuPermissionCounter = AppStorage.menuPermissionCounter();\r\n\r\n const [show, setShow] = useState({\r\n showSendMessageModal: false,\r\n awaitingAuthModal: false\r\n });\r\n\r\n const HandelSendMessage = (name, val) => {\r\n setShow((st) => ({\r\n ...st,\r\n [name]: true,\r\n headerRecordID: val.headerRecordID,\r\n reg: val.registration,\r\n wip: val.wipNumber\r\n }));\r\n };\r\n\r\n const editButton = (value, record) => {\r\n const spn = document.createElement('span');\r\n const lnk = (\r\n \r\n \r\n HandelSendMessage('showSendMessageModal', record)} toolTipTitle=\"Send Message\">\r\n \r\n \r\n \r\n \r\n HandelSendMessage('awaitingAuthModal', record)} toolTipTitle=\"Approve Job\">\r\n \r\n \r\n \r\n \r\n );\r\n ReactDOM.render(lnk, spn);\r\n return spn;\r\n };\r\n\r\n const column = useMemo(() => {\r\n let col = [...baseColumns];\r\n let colAction = col.find((m) => m.field === 'action');\r\n if (colAction) {\r\n colAction.renderer = editButton;\r\n }\r\n return col;\r\n }, []);\r\n\r\n const handleClose = (res) => {\r\n let newSt = {};\r\n newSt.showSendMessageModal = false;\r\n newSt.awaitingAuthModal = false;\r\n if (res) {\r\n newSt.isReload = new Date();\r\n }\r\n setShow((st) => ({\r\n ...st,\r\n ...newSt\r\n }));\r\n };\r\n\r\n const getUrl = `CustUserCommunicator/AwaitingAuthority`;\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n ({\r\n records: res.data.list,\r\n total: res.data.total\r\n })}\r\n columns={column}\r\n getUrl={getUrl}\r\n displayPagination={true}\r\n isReload={show.isReload}\r\n />\r\n \r\n \r\n\r\n {show.showSendMessageModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"lg\">\r\n \r\n \r\n ) : null}\r\n {show.awaitingAuthModal ? (\r\n
handleClose(false)} fullWidth maxWidth=\"sm\">\r\n \r\n \r\n ) : null}\r\n
\r\n {/* Bookings */}\r\n
\r\n Request Booking\r\n
\r\n
\r\n \r\n {AppStorage.getCommunicatorAllowed() && (\r\n <>\r\n {isCustomer ? (\r\n <>\r\n \r\n p.isShowCustomer\r\n )}\r\n />\r\n \r\n \r\n p.isShowCustomer)} label={CommunicatorHeaderComp()} />\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n {state.isBookingRequesteModal && (\r\n // closeModal(false)} maxWidth=\"md\" fullWidth overflow=\"auto\">\r\n \r\n // \r\n )}\r\n
\r\n );\r\n};\r\nexport default CustCommunicatorDash;\r\n","export const TypeOfAuth = {\r\n NonAuth: 0,\r\n Auth: 1,\r\n Both: 2,\r\n};","import * as Components from \"./../../../../Components\";\r\nimport PasswordReset from \"../../../Modal/PasswordReset\"\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [{\r\n label: \"Home\",\r\n path: \"/\",\r\n exact: true,\r\n component: Components.home,\r\n authType: TypeOfAuth.NonAuth,\r\n}, {\r\n label: \"Login\",\r\n path: \"/login\",\r\n hidden: true,\r\n component: Components.login,\r\n authType: TypeOfAuth.NonAuth,\r\n}\r\n, {\r\n label: \"Reset Password\",\r\n path: \"/ResetPassword/:id\",\r\n hidden: true,\r\n component: PasswordReset,\r\n authType: TypeOfAuth.NonAuth,\r\n}\r\n];","import React, { useContext, useState } from \"react\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport AppContext from \"../../App/AppContext\";\r\nimport { PasswordBox, SecondaryButton, PrimaryButton } from \"./../FormInput\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { SetUserPassword } from \"../Service/changePassword-service\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport \"./model.css\";\r\n\r\nconst ResetPasswordModal = (props) => {\r\n const { hideModal, showToast } = useContext(AppContext);\r\n const [state, setState] = useState({\r\n new: \"\",\r\n confirm: \"\",\r\n enableChange: false,\r\n });\r\n\r\n const handleClose = () => {\r\n // hideModal();\r\n props.history.push(\"/\");\r\n };\r\n\r\n const fieldChange = (e) => {\r\n const { name, value } = e.target;\r\n setState((st) => {\r\n const nst = { ...st, [name]: value };\r\n nst.enableChange =\r\n nst.new &&\r\n nst.confirm &&\r\n nst.new === nst.confirm;\r\n return nst;\r\n });\r\n };\r\n\r\n const handleChangePassword = async (e) => {\r\n e.preventDefault();\r\n if (state.new && state.confirm) {\r\n const res = await SetUserPassword(\r\n state.new,\r\n state.confirm,\r\n props.match.params.id,\r\n window.location.search.substring(1)\r\n );\r\n if (!res.success) {\r\n console.error(res);\r\n // showToast(res.messages);\r\n }\r\n else\r\n {\r\n showToast(res.message);\r\n props.history.push(\"/\");\r\n }\r\n \r\n } else {\r\n showToast(\"New password and confirm password is required.\");\r\n }\r\n hideModal();\r\n };\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default ResetPasswordModal;\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport { Navbar } from './../../Navbar';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport LabelImportantIcon from '@material-ui/icons/LabelImportant';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\n\r\nexport default [\r\n {\r\n label: 'Home',\r\n path: '/',\r\n exact: true,\r\n component: Components.home,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Branches',\r\n path: '/branches',\r\n exact: true,\r\n component: Components.Braches,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Users',\r\n path: '/users',\r\n component: Components.userManagement,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'eWIP',\r\n authType: TypeOfAuth.Both,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Workflows',\r\n path: '/workflow',\r\n component: Components.workflow,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Web Forms',\r\n path: '/webform',\r\n component: Components.WebForm,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'OCR Documents',\r\n path: '/ocrdocuments',\r\n component: Components.ocrDocuments,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Sheets',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n { label: 'Faults', path: '/diagnostic_faults', component: Components.DiagnosticFaults, authType: TypeOfAuth.Auth },\r\n {\r\n label: 'Engine Faults',\r\n path: '/diagnosticEngineFaults',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Noise Apparents',\r\n path: '/diagnosticNoiseApparents',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Locations',\r\n path: '/diagnosticLocations',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Lists',\r\n path: '/',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n {\r\n label: 'Failure Notes',\r\n path: '/Lists/failurenotes',\r\n exact: true,\r\n component: Components.FailureNotes,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Std Tech Write-ups',\r\n path: '/standard-write-up',\r\n component: Components.StandardTechWriteUp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work Accomplished Codes',\r\n path: '/Lists/workaccomplishedcode',\r\n exact: true,\r\n component: Components.WorkAccomplishedCode,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Steps List',\r\n path: '/Lists/workflowttepslist',\r\n exact: true,\r\n component: Components.WorkflowStepsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Results',\r\n path: '/Lists/BatteryResults',\r\n exact: true,\r\n component: Components.BatteryResults,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect Reported Categories',\r\n path: '/defect-reported-categories',\r\n component: Components.DefectReportedCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect Actioned Category',\r\n path: '/DefectActionCategories',\r\n component: Components.DefectActionedCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Manufacturers',\r\n path: '/Lists/BatteryManufacturers',\r\n exact: true,\r\n component: Components.BatteryManufacturers,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Video Categories',\r\n path: '/Lists/VideoCategories',\r\n exact: true,\r\n component: Components.VideoCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'VOR Types',\r\n exact: true,\r\n path: '/Communicator/vortypes',\r\n component: Components.VorTypes,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Operators',\r\n exact: true,\r\n path: '/operators',\r\n component: Components.Operators,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'QC',\r\n path: '/',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n {\r\n label: 'Results Lists',\r\n path: '/results-lists',\r\n component: Components.QCResultsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Items',\r\n path: '/items',\r\n component: Components.QCItems,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Documents',\r\n path: '/',\r\n authType: TypeOfAuth.Both,\r\n children: [\r\n {\r\n label: 'Re-Process Documents',\r\n path: '/reprocessdocuments',\r\n exact: true,\r\n component: Components.DocumentsReprocess,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Translations',\r\n path: '/Translations',\r\n exact: true,\r\n component: Components.Translations,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Dynamic Forms',\r\n path: '/DynamicFormsList',\r\n component: Components.DynamicFormsList,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Branch Parameters',\r\n exact: true,\r\n path: '/Communicator/BranchParameters',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Booking Request Status',\r\n exact: true,\r\n path: '/Communicator/BookingRequestStatus',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Notifications Groups',\r\n exact: true,\r\n path: '/Communicator/setVehicleNotification',\r\n component: Components.AdminVehicleNotification,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Status Update',\r\n exact: true,\r\n path: '/Communicator/smsstatusupdate',\r\n component: Components.SMSStatusUpdate,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Reporting',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n path: '/report/ageMeasured',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash Account Categories',\r\n exact: true,\r\n path: '/reporting/CashAccountCategories',\r\n component: Components.CashAccountCategories,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash Account Types',\r\n exact: true,\r\n path: '/reporting/CashAccountTypes',\r\n component: Components.CashAccountTypes,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Holiday',\r\n path: '/HolidayCalenderComp',\r\n icon: ,\r\n exact: true,\r\n component: Components.HolidayCalenderComp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Reporting Codes',\r\n path: '/Reporting/ReportingCodes',\r\n exact: true,\r\n component: Components.ReportingCodes,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Department Codes',\r\n path: '/Reporting/DepartmentCodes',\r\n exact: true,\r\n component: Components.DepartmentCodes,\r\n authType: TypeOfAuth.Auth\r\n }\r\n //\r\n // {\r\n // label: 'Branches',\r\n // exact: true,\r\n // path: '/invoice/Branches',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n // {\r\n // label: 'Branch Status Email',\r\n // exact: true,\r\n // path: '/invoice/BranchStatusEmail',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Branches',\r\n exact: true,\r\n path: '/invoice/Branches',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Branch Status Email',\r\n exact: true,\r\n path: '/invoice/BranchStatusEmail',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Appraisal',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Create Appraisal Screen Columns',\r\n exact: true,\r\n path: '/Appraisal/Create_Appraisal_Screens_Columns',\r\n component: Components.AppraisalScreensColumns,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'OCR Documents To Process',\r\n path: '/ocrdocumentstoprocess/:name/:ocrDocId',\r\n hidden: true,\r\n exact: true,\r\n component: Components.OcrDocumentToProcess,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'OCR Documents Field',\r\n path: '/ocrdocumentsfield/:ocrDocId',\r\n hidden: true,\r\n exact: true,\r\n component: Components.OcrDocumentField,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Settings',\r\n path: '/Settings',\r\n icon: ,\r\n exact: true,\r\n component: Components.Settings,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Ticker Messages',\r\n path: '/ticker_Messages',\r\n icon: ,\r\n exact: true,\r\n component: Components.KipMessages,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'Workflow Steps List Option',\r\n path: '/workflowstplistops/:listID',\r\n component: Components.WorkflowStepsListOptions,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true,\r\n exact: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Steps',\r\n hidden: true,\r\n exact: true,\r\n path: '/steps/:workflowId',\r\n component: Components.workflowSteps,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Return Reason',\r\n hidden: true,\r\n exact: true,\r\n path: '/returnreason/:WorkflowName/:workflowId',\r\n component: Components.ReturnReason,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Dynamic Form Fields',\r\n hidden: true,\r\n exact: true,\r\n path: '/DynamicForm/:DynamicFormID',\r\n component: Components.DynamicFormFields,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\n\r\nexport default [\r\n {\r\n label: 'Dashboard',\r\n path: '/',\r\n exact: true,\r\n component: Components.CustCommonDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/cust_dashboard',\r\n exact: true,\r\n component: Components.CustDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Customers',\r\n // exact: true,\r\n // path: '/invoice/Customers',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Customer',\r\n path: '/Customer/:name/:id',\r\n exact: true,\r\n hidden: true,\r\n component: Components.JobDetails,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Job',\r\n hidden: true,\r\n exact: true,\r\n path: '/job/:jobId/:workflowId',\r\n component: (props) => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Awaiting Authority',\r\n path: '/AwaitingAuthority',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.CustAwaitingAuthority,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.CustBookings,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Appraisal',\r\n exact: true,\r\n path: '/Appraisal_Dashboard',\r\n component: Components.ApprisalMaindashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'All Appraisal',\r\n icon: ,\r\n exact: true,\r\n hidden: true,\r\n path: '/appraisal_Details',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Container from '@material-ui/core/Container';\r\nimport React, { useEffect, useContext, useState } from 'react';\r\nimport AppContext from '../../App/AppContext';\r\nimport { Link } from 'react-router-dom';\r\nimport { getCustomerDashboard } from '../../Core/Service/customer-services';\r\nimport './dashboard.scss';\r\nimport { RenderTiles } from './CustCommonDash';\r\nimport { AppStorage } from '../../Core/Service/storage-service';\r\n\r\nexport default function Album() {\r\n const portalSettings = AppStorage.getPortalSetting();\r\n const [state, setState] = useState({\r\n rows_new: []\r\n });\r\n const { showToast } = useContext(AppContext);\r\n useEffect(async () => {\r\n let res = await getCustomerDashboard();\r\n if (res.success) {\r\n setState((st) => ({ ...st, rows_new: res.data }));\r\n }\r\n if (!res.success) {\r\n showToast(res.message);\r\n }\r\n }, []);\r\n const cards = [\r\n {\r\n id: 1,\r\n name: 'Current Month',\r\n color: '#3498db',\r\n count: state.rows_new.currentMonth,\r\n url: '/Customer/Current Month/1'\r\n },\r\n {\r\n id: 2,\r\n name: 'Current Year',\r\n color: '#2ecc71',\r\n count: state.rows_new.currentYear,\r\n url: '/Customer/Current Year/2'\r\n },\r\n {\r\n id: 3,\r\n name: 'Last Year',\r\n color: '#dc3545',\r\n count: state.rows_new.preYear,\r\n url: '/Customer/Last Year/3'\r\n },\r\n {\r\n id: 4,\r\n name: 'Total',\r\n color: '#868e96',\r\n count: state.rows_new.total,\r\n url: '/Customer/Total/4'\r\n }\r\n ];\r\n return (\r\n // \r\n // \r\n // \r\n // {cards.map((option) => (\r\n // \r\n // \r\n // \r\n // \r\n // {option.name}\r\n // {option.count}\r\n // \r\n // \r\n // \r\n // \r\n // ))}\r\n // \r\n // \r\n //
\r\n \r\n \r\n {AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled && (\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport AirplayIcon from '@material-ui/icons/Airplay';\r\nimport Dashboard from './../../../../Components/internal/dashboard/dashboard';\r\nimport AssessmentIcon from '@material-ui/icons/Assessment';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport BubbleChartIcon from '@material-ui/icons/BubbleChart';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport EmojiEventsIcon from '@material-ui/icons/EmojiEvents';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport SmsIcon from '@material-ui/icons/Sms';\r\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport FolderSpecialIcon from '@material-ui/icons/FolderSpecial';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BookIcon from '@material-ui/icons/Book';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nexport default [\r\n // {\r\n // label: 'Home',\r\n // path: '/',\r\n // exact: true,\r\n // component: Components.Dashbord,\r\n // authType: TypeOfAuth.Auth,\r\n // hidden: true,\r\n // icon: \r\n // },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Home',\r\n path: '/eWIPDashboard',\r\n exact: true,\r\n component: Components.EWIPDashboardTabComponent,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n icon: ,\r\n authType: TypeOfAuth.Auth,\r\n dontFlatListChildren: true,\r\n isDynamicChildren: 'eWipDashboard',\r\n children: [\r\n // {\r\n // label: 'Service Advisor',\r\n // path: '/dashboard/sa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Awaiting Arrival',\r\n // path: '/dashboard/aa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Workshop Control',\r\n // path: '/dashboard/wc',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Parts Advisor',\r\n // path: '/dashboard/pa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Technician App',\r\n // path: '/dashboard/ta',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Back Office',\r\n // path: '/dashboard/bo',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // }\r\n ]\r\n },\r\n\r\n // {\r\n // label: 'QC Jobs',\r\n // // hidden: true,\r\n // icon: ,\r\n // exact: true,\r\n // path: '/qc_jobs',\r\n // component: Components.QCJobsDashboard,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Reports ',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n // {\r\n // label: 'Workflows Average Times',\r\n // path: '/internal/dashboard/WorkflowAvgTimeDash',\r\n // exact: false,\r\n // component: Components.WorkflowAvgTimeDash,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Return Reasons',\r\n path: '/internal/dashboard/ReturnReasonList',\r\n exact: false,\r\n component: Components.ReturnReasonReportsList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Return Reason Dashboard',\r\n path: '/internal/dashboard/ReturnReasonDashboard',\r\n exact: false,\r\n component: Components.ReturnReasonDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflows Average Times',\r\n path: '/internal/dashboard/WorkflowAvgTimeDash',\r\n exact: false,\r\n component: Components.WorkflowAvgTimeDash,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'QC Jobs',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/qc_jobs',\r\n component: Components.QCJobsDashboard,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Archived Jobs',\r\n path: '/archivedjobs',\r\n exact: true,\r\n component: Components.ArchivedJobs,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'After Sales Old Jobs',\r\n path: '/AfterSalesOldJobs',\r\n exact: true,\r\n component: Components.AfterSalesOldJobs,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Others',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Documents',\r\n path: '/viewwipdocuments',\r\n exact: true,\r\n component: Components.WIPDocumentsViewer,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service24 Jobs',\r\n path: '/service24jobs',\r\n exact: true,\r\n component: Components.Service24Jobs,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'All Jobs',\r\n path: '/Service24Jobs/AllJobs',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => {\r\n return ;\r\n }\r\n },\r\n {\r\n label: 'Unallocated Jobs',\r\n path: '/Service24Jobs/UnallocatedJobs',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => {\r\n return ;\r\n }\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Special Equipments',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/Lists/SpecialEquipment/Dash',\r\n exact: false,\r\n component: Components.SpecialEquipmentDash,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipments',\r\n path: '/Lists/SpecialEquipment',\r\n exact: false,\r\n component: Components.SpecialEquipment,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Dashboard Detail',\r\n path: '/dashgrid',\r\n exact: true,\r\n component: Components.dashboard,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Parts Dashboard Detail',\r\n path: '/PartsByCreator',\r\n exact: true,\r\n component: Components.PartsByCreatorListComponent,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'New Sales List',\r\n path: '/NewSalesListView',\r\n exact: true,\r\n component: Components.NewSalesListView,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Used Sales List',\r\n path: '/UsedSalesListView',\r\n exact: true,\r\n component: Components.UsedSalesListView,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Open Action Log',\r\n path: '/Openactionlog',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.OpenActionLog,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Workshop Vehicles',\r\n path: '/WorkshopVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Check In - WSL not set',\r\n path: '/CheckInWSLNotSet',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.BookingsScreen,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'Parts Calender',\r\n // exact: true,\r\n // path: '/Services/Parts_Calender',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n {\r\n label: 'Reports',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Group Dashboard',\r\n exact: true,\r\n path: '/ReportsDashboard',\r\n component: Components.MiniViewReportingDashboard,\r\n // component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Detail Dashboard',\r\n exact: true,\r\n path: '/RepotingTab',\r\n component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'DOC',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n path: '/Docs/WeeklyFlashReport',\r\n component: () => \r\n },\r\n {\r\n label: 'Budget Dashboard',\r\n exact: true,\r\n path: '/budget',\r\n component: Components.BudgetScreen,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Profit & Loss',\r\n exact: true,\r\n path: '/profitloss',\r\n component: Components.ProfitLoss,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/AgedMeasures',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueries',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries By Department',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueriesByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Branch',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Branch',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Company',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Company',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash',\r\n exact: true,\r\n path: '/AgedMeasures/Cash',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash By Department',\r\n exact: true,\r\n path: '/AgedMeasures/CashByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Surcharges',\r\n exact: true,\r\n path: '/AgedMeasures/DirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/NewMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'R&M',\r\n exact: true,\r\n path: '/AgedMeasures/R&M',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/UsedMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Non-franchise Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedNon-franchiseStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Debt',\r\n exact: true,\r\n path: '/AgedMeasures/VehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Warranty',\r\n exact: true,\r\n path: '/AgedMeasures/Warranty',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgress',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress by Departement',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgressbyDepartement',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'New Services',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: ,\r\n // children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/budget_dashboard',\r\n // component: Components.BudgetDashboard,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'Vehicle',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Service Due',\r\n exact: true,\r\n path: '/vehicle/serviceDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'MOT Due',\r\n exact: true,\r\n path: '/vehicle/MOTDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Safety Check Due',\r\n exact: true,\r\n path: '/vehicle/safetyCheckDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Vehicle Due Calendar',\r\n exact: true,\r\n path: '/vehicle/VehicleDueCalendar',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Used Stock',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Used Stock Valuation',\r\n exact: true,\r\n path: '/UsedStockValuation',\r\n component: Components.UsedStockValuation,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/usedStock',\r\n component: Components.UsedStock,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Aged Vehicle Stock',\r\n exact: true,\r\n path: '/agedStocks',\r\n component: Components.AgedStocks,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Overage Priority List',\r\n exact: true,\r\n path: '/overagePriority',\r\n component: Components.OveragePriority,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales Performance',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/salesDashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Sales Stock',\r\n exact: true,\r\n path: '/SalesStockDashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/sales/dashboard',\r\n component: Components.SalesDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n // {\r\n // label: 'Sales Dashboard V2',\r\n // exact: true,\r\n // path: '/sales/dashboardtwo',\r\n // component: Components.SalesDashboardTwo,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n\r\n {\r\n label: 'New Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/NewVehicleProfitReport',\r\n component: Components.NewVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/UsedVehicleProfitReport',\r\n component: Components.UsedVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries by Salesexec',\r\n exact: true,\r\n path: '/sales/AccountQueriesbySalesexec',\r\n component: Components.AccountQueriesbySalesexec,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Measures Work - Progress',\r\n exact: true,\r\n path: '/sales/AgedMeasuresWorkingProgress',\r\n component: Components.AgedMeasuresWorkingProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Work In Progress',\r\n exact: true,\r\n path: '/sales/SalesWorkInProgress',\r\n component: Components.SalesWorkinProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Registration Reports',\r\n exact: true,\r\n path: '/sales/RegistrationReports',\r\n component: Components.RegistrationReports,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Stock (Excluding WIP)',\r\n exact: true,\r\n path: '/sales/NewVehicleStockExcludingWIP',\r\n component: Components.VehicleStocksExWip,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Orders',\r\n exact: true,\r\n path: '/sales/VehicleNewOrder',\r\n component: Components.VehicleNewOrder,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Outstanding Invoices',\r\n exact: true,\r\n path: '/sales/OutstandingInvoices',\r\n component: Components.OutstandingInvoices,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Contingency Debt',\r\n exact: true,\r\n path: '/sales/SalesContingencyDebt',\r\n component: Components.SalesContingencyDebt,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/sales/UsedVehicleStock',\r\n component: Components.UsedVehicleStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Aged Debt By Salesexec',\r\n exact: true,\r\n path: '/sales/VehicleAgedDebtBySalesexec',\r\n component: Components.VehicleAgedDebtBySalesexec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Services',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/service/dashboard',\r\n component: Components.ServiceDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Consumables',\r\n exact: true,\r\n path: '/Services/Consumables',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysis',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis-Reason',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysisReason',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours',\r\n exact: true,\r\n path: '/Services/InvoicedHours',\r\n component: Components.InvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Uninvoiced Hours',\r\n exact: true,\r\n path: '/Services/UninvoicedHours',\r\n component: Components.UninvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Credit Hours',\r\n exact: true,\r\n path: '/Services/CreditsHours',\r\n component: Components.CreditsHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Mobilovan',\r\n exact: true,\r\n path: '/Services/Mobilovan',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'NPW Rectification',\r\n exact: true,\r\n path: '/Services/NPWRectification',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Parts Warranty Write Off',\r\n exact: true,\r\n path: '/Services/PartsWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service Warranty Write Off',\r\n exact: true,\r\n path: '/Services/ServiceWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Technician Efficiency',\r\n exact: true,\r\n path: '/Services/Efficiency',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours Calender',\r\n exact: true,\r\n path: '/Services/InvoicedhoursCalender',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/parts/dashboard',\r\n // component: Components.HeadLinesDashboard\r\n // },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n path: '/parts/PartsSales/P',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'Trade Centre',\r\n exact: true,\r\n path: '/parts/PartsSales/B',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n path: '/parts/PartsSales/w',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Car Express',\r\n exact: true,\r\n path: '/parts/PartsSales/f',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Total',\r\n exact: true,\r\n path: '/parts/PartsSales/A',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used',\r\n exact: true,\r\n path: '/parts/PartsSales/U',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Shift Calendar',\r\n exact: true,\r\n path: '/ShiftCalendar',\r\n component: Components.ShiftCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Resource Calendar',\r\n exact: true,\r\n path: '/ResourceCalendar',\r\n component: Components.ResourceCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'WIP Hours',\r\n // exact: true,\r\n // path: '/wipHours',\r\n // component: Components.WipHours,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n // {\r\n // label: 'Sales2',\r\n // authType: TypeOfAuth.Auth,\r\n // children: [\r\n // {\r\n // label: 'Sales Dashboard',\r\n // exact: true,\r\n // path: '/salesDashboard',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n // {\r\n // label: 'Stocking Charges',\r\n // exact: true,\r\n // path: '/stockingCharges',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'Settings',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Branch Settings',\r\n path: '/branch_Codes',\r\n exact: true,\r\n component: Components.Braches,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Sales Performance ',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'New Sales Exec Targets',\r\n exact: true,\r\n path: '/NewSalesCategoryBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Sales Exec Targets',\r\n exact: true,\r\n path: '/UsedVehicleReportingBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'New Vehicle Internal Budget',\r\n exact: true,\r\n path: '/NewVehicleReportingInternalBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Vehicle Internal Budget',\r\n exact: true,\r\n path: '/UsedVehicleReportingInternalBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Finance Provider Intrest Rate',\r\n expect: true,\r\n path: '/FP_IntrestRate_Provider',\r\n component: Components.FPIntrestRateProvider,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Finance Penetration Accounts',\r\n exact: true,\r\n path: '/Supplier',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'League Table Points',\r\n exact: true,\r\n path: '/league_table_points',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Franchises',\r\n exact: true,\r\n path: '/franchise',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Sales Exec',\r\n path: '/Lists/SalesExec',\r\n exact: true,\r\n component: Components.SalesExec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Budget',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'After Sales Vehicle Budget',\r\n exact: true,\r\n path: '/ReportingBudget',\r\n component: Components.ReportingBudget,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'New Vehicle Budget',\r\n exact: true,\r\n path: '/NewVehicleReportingBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Vehicle Budget',\r\n exact: true,\r\n path: '/UsedSalesCategoryBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Appraisal',\r\n exact: true,\r\n path: '/Appraisal_Dashboard',\r\n icon: ,\r\n component: Components.ApprisalMaindashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'MOT HISTORY',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/MotHistoryAndRoadTax',\r\n component: Components.MotHistoryScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresDirtyUnits',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'ViewDebtDetailsSalesexec',\r\n exact: true,\r\n path: '/sales/ViewDebtDetailsSalesexec',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresRanMWarrantyCashGen',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetUsedAndNewVehicleDebt',\r\n exact: true,\r\n path: '/AgedMeasures/GetUsedAndNewVehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'EnquirieList',\r\n exact: true,\r\n path: '/AgedMeasures/EnquirieList',\r\n component: Components.EnquirieList,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Workflow Job',\r\n path: '/job/:jobId/:workflowId',\r\n component: (props) => ,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Workflow Job',\r\n path: '/NewJob/:stockID/:workflowId',\r\n component: (props) => ,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Workflow Job',\r\n path: '/UsedJob/:stockID/:workflowId',\r\n component: (props) => ,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Dashboard Detail',\r\n path: '/techDashgrid',\r\n exact: true,\r\n component: Components.TechDashboardGrid,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'HistoryModal',\r\n path: '/SpecialEquipmentHistoryModal',\r\n hidden: true,\r\n component: Components.SpecialEquipmentHistoryModal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'VanDetails',\r\n path: '/sales_newRegistration',\r\n hidden: true,\r\n component: Components.SalesNewRegistration,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Order Intek',\r\n path: '/sales_orderIntek',\r\n hidden: true,\r\n component: Components.VehicleSalesOrderIntake,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Invoice',\r\n path: '/sales_usedInvoice',\r\n hidden: true,\r\n component: Components.VehicleSalesUsedInvoice,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Ev_target',\r\n path: '/sales_EvTarget',\r\n hidden: true,\r\n component: Components.VehicleSalesEvTarget,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Authentication',\r\n path: '/auth',\r\n hidden: true,\r\n component: Components.AuthenticationScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Authentication Verification',\r\n path: '/key',\r\n hidden: true,\r\n component: Components.TwoAuthDiasbledScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'User Profile',\r\n path: '/profile',\r\n hidden: true,\r\n component: Components.UserProfile,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Performance Registration',\r\n path: '/salesPefromance/Registration',\r\n hidden: true,\r\n component: Components.RegistrationQuaterTable,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Performance invoiced',\r\n path: '/salesPefromance/invoiced',\r\n hidden: true,\r\n component: Components.InvoiceQuaterTable,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Performance Order Take',\r\n path: '/salesPefromance/orderTake',\r\n hidden: true,\r\n component: Components.OrderTakeScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Performance Used Stock',\r\n path: '/salesPefromance/usedStock',\r\n hidden: true,\r\n component: Components.SalesPerformanceUsedStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Performance New Stock',\r\n path: '/salesPefromance/newStock',\r\n hidden: true,\r\n component: Components.SalesPerformanceNewStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service 24',\r\n hidden: true,\r\n exact: true,\r\n path: '/addupdate/service24/:HeaderRecordID?/:service24JobID',\r\n component: Components.Service24Modal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'League Detail',\r\n exact: true,\r\n hidden: true,\r\n path: '/league_Detail',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Technician Calender',\r\n exact: true,\r\n hidden: true,\r\n path: '/TechnicianCalender',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n // {\r\n // label: 'Appraisal Customer Details',\r\n // exact: true,\r\n // hidden: true,\r\n // path: '/Appraisal_Cust_Details',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n // {\r\n // label: 'Appraisal Create Enquiry',\r\n // exact: true,\r\n // hidden: true,\r\n // path: '/Appraisal_createEnquiry',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n {\r\n label: 'Create APP',\r\n exact: true,\r\n hidden: true,\r\n path: '/Appraisal_createAppraisal',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Appraisal',\r\n icon: ,\r\n exact: true,\r\n hidden: true,\r\n path: '/appraisal_Details',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Trade Centre',\r\n icon: ,\r\n exact: true,\r\n hidden: true,\r\n path: '/TradeCentre?desc=TradeCentre=c',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n icon: ,\r\n exact: true,\r\n hidden: true,\r\n path: '/Workshop?desc=Workshop&code=W',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'All Parts ',\r\n icon: ,\r\n exact: true,\r\n hidden: true,\r\n path: '/Total?desc=Total&code=MT',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n\r\n // {\r\n // label: 'Awaiting Approval',\r\n // icon: ,\r\n // exact: true,\r\n // path: '/Awaiting Approval?screen=Awaiting Approval&Id=1',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n // {\r\n // label: 'Awaiting Review',\r\n // icon: ,\r\n // exact: true,\r\n // path: '/Awaiting Review?screen=Awaiting Review&Id=2',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n // {\r\n // label: 'Appraisal Completed',\r\n // icon: ,\r\n // exact: true,\r\n // path: '/Appraisal Completed?screen=Appraisal Completed&Id=3',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n // {\r\n // label: 'Under Review',\r\n // icon: ,\r\n // exact: true,\r\n // path: '/Under Review?screen=Under Review&Id=4',\r\n // component: () => ,\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.AuditorDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Auditor',\r\n path: '/Auditor/:name/:id',\r\n exact: true,\r\n hidden: true,\r\n component: Components.AuditorJobDetails,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Job',\r\n hidden: true,\r\n exact: true,\r\n path: '/job/:jobId/:workflowId',\r\n component: (props) => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport AirplayIcon from '@material-ui/icons/Airplay';\r\nimport Dashboard from './../../../../Components/internal/dashboard/dashboard';\r\nimport AssessmentIcon from '@material-ui/icons/Assessment';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport BubbleChartIcon from '@material-ui/icons/BubbleChart';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport EmojiEventsIcon from '@material-ui/icons/EmojiEvents';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport SmsIcon from '@material-ui/icons/Sms';\r\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport FolderSpecialIcon from '@material-ui/icons/FolderSpecial';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BookIcon from '@material-ui/icons/Book';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\n\r\nexport default [\r\n {\r\n label: 'Technician App',\r\n path: '/',\r\n exact: true,\r\n component: Components.technicianApp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workflow Job',\r\n hidden: true,\r\n exact: true,\r\n path: '/job/:jobId/:workflowId/:technicianJobId?/:isTechReadonly?',\r\n component: (props) => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Authentication',\r\n path: '/auth',\r\n hidden: true,\r\n component: Components.AuthenticationScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Authentication Verification',\r\n path: '/key',\r\n hidden: true,\r\n component: Components.TwoAuthDiasbledScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'User Profile',\r\n path: '/profile',\r\n hidden: true,\r\n component: Components.UserProfile,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Reports',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Group Dashboard',\r\n exact: true,\r\n path: '/ReportsDashboard',\r\n component: Components.MiniViewReportingDashboard,\r\n // component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Detail Dashboard',\r\n exact: true,\r\n path: '/RepotingTab',\r\n component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'DOC',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n path: '/Docs/WeeklyFlashReport',\r\n component: () => \r\n },\r\n {\r\n label: 'Budget Dashboard',\r\n exact: true,\r\n path: '/budget',\r\n component: Components.BudgetScreen,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Profit & Loss',\r\n exact: true,\r\n path: '/profitloss',\r\n component: Components.ProfitLoss,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/AgedMeasures',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueries',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries By Department',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueriesByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Branch',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Branch',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Company',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Company',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash',\r\n exact: true,\r\n path: '/AgedMeasures/Cash',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash By Department',\r\n exact: true,\r\n path: '/AgedMeasures/CashByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Surcharges',\r\n exact: true,\r\n path: '/AgedMeasures/DirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/NewMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'R&M',\r\n exact: true,\r\n path: '/AgedMeasures/R&M',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/UsedMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Non-franchise Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedNon-franchiseStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Debt',\r\n exact: true,\r\n path: '/AgedMeasures/VehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Warranty',\r\n exact: true,\r\n path: '/AgedMeasures/Warranty',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgress',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress by Departement',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgressbyDepartement',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'New Services',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: ,\r\n // children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/budget_dashboard',\r\n // component: Components.BudgetDashboard,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'Vehicle',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Service Due',\r\n exact: true,\r\n path: '/vehicle/serviceDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'MOT Due',\r\n exact: true,\r\n path: '/vehicle/MOTDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Safety Check Due',\r\n exact: true,\r\n path: '/vehicle/safetyCheckDue',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Vehicle Due Calendar',\r\n exact: true,\r\n path: '/vehicle/VehicleDueCalendar',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Used Stock',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Used Stock Valuation',\r\n exact: true,\r\n path: '/UsedStockValuation',\r\n component: Components.UsedStockValuation,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/usedStock',\r\n component: Components.UsedStock,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Aged Vehicle Stock',\r\n exact: true,\r\n path: '/agedStocks',\r\n component: Components.AgedStocks,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Overage Priority List',\r\n exact: true,\r\n path: '/overagePriority',\r\n component: Components.OveragePriority,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales Performance',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/salesDashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Sales Stock',\r\n exact: true,\r\n path: '/SalesStockDashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/sales/dashboard',\r\n component: Components.SalesDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n // {\r\n // label: 'Sales Dashboard V2',\r\n // exact: true,\r\n // path: '/sales/dashboardtwo',\r\n // component: Components.SalesDashboardTwo,\r\n // authType: TypeOfAuth.Auth\r\n // },\r\n\r\n {\r\n label: 'New Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/NewVehicleProfitReport',\r\n component: Components.NewVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/UsedVehicleProfitReport',\r\n component: Components.UsedVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries by Salesexec',\r\n exact: true,\r\n path: '/sales/AccountQueriesbySalesexec',\r\n component: Components.AccountQueriesbySalesexec,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Measures Work - Progress',\r\n exact: true,\r\n path: '/sales/AgedMeasuresWorkingProgress',\r\n component: Components.AgedMeasuresWorkingProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Work In Progress',\r\n exact: true,\r\n path: '/sales/SalesWorkInProgress',\r\n component: Components.SalesWorkinProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Registration Reports',\r\n exact: true,\r\n path: '/sales/RegistrationReports',\r\n component: Components.RegistrationReports,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Stock (Excluding WIP)',\r\n exact: true,\r\n path: '/sales/NewVehicleStockExcludingWIP',\r\n component: Components.VehicleStocksExWip,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Orders',\r\n exact: true,\r\n path: '/sales/VehicleNewOrder',\r\n component: Components.VehicleNewOrder,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Outstanding Invoices',\r\n exact: true,\r\n path: '/sales/OutstandingInvoices',\r\n component: Components.OutstandingInvoices,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Contingency Debt',\r\n exact: true,\r\n path: '/sales/SalesContingencyDebt',\r\n component: Components.SalesContingencyDebt,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/sales/UsedVehicleStock',\r\n component: Components.UsedVehicleStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Aged Debt By Salesexec',\r\n exact: true,\r\n path: '/sales/VehicleAgedDebtBySalesexec',\r\n component: Components.VehicleAgedDebtBySalesexec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Services',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/service/dashboard',\r\n component: Components.ServiceDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Consumables',\r\n exact: true,\r\n path: '/Services/Consumables',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysis',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis-Reason',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysisReason',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours',\r\n exact: true,\r\n path: '/Services/InvoicedHours',\r\n component: Components.InvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Credit Hours',\r\n exact: true,\r\n path: '/Services/CreditsHours',\r\n component: Components.CreditsHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Mobilovan',\r\n exact: true,\r\n path: '/Services/Mobilovan',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'NPW Rectification',\r\n exact: true,\r\n path: '/Services/NPWRectification',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Parts Warranty Write Off',\r\n exact: true,\r\n path: '/Services/PartsWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service Warranty Write Off',\r\n exact: true,\r\n path: '/Services/ServiceWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Technician Efficiency',\r\n exact: true,\r\n path: '/Services/Efficiency',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours Calender',\r\n exact: true,\r\n path: '/Services/InvoicedhoursCalender',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/parts/dashboard',\r\n // component: Components.HeadLinesDashboard\r\n // },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n path: '/parts/PartsSales/P',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'Trade Centre',\r\n exact: true,\r\n path: '/parts/PartsSales/B',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n path: '/parts/PartsSales/w',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Car Express',\r\n exact: true,\r\n path: '/parts/PartsSales/f',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Total',\r\n exact: true,\r\n path: '/parts/PartsSales/A',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used',\r\n exact: true,\r\n path: '/parts/PartsSales/U',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Shift Calendar',\r\n exact: true,\r\n path: '/ShiftCalendar',\r\n component: Components.ShiftCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Resource Calendar',\r\n exact: true,\r\n path: '/ResourceCalendar',\r\n component: Components.ResourceCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'WIP Hours',\r\n // exact: true,\r\n // path: '/wipHours',\r\n // component: Components.WipHours,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n // {\r\n // label: 'Sales2',\r\n // authType: TypeOfAuth.Auth,\r\n // children: [\r\n // {\r\n // label: 'Sales Dashboard',\r\n // exact: true,\r\n // path: '/salesDashboard',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n // {\r\n // label: 'Stocking Charges',\r\n // exact: true,\r\n // path: '/stockingCharges',\r\n // component: () => ,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'Settings',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Branch Settings',\r\n path: '/branch_Codes',\r\n exact: true,\r\n component: Components.Braches,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Sales Performance ',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'New Sales Exec Targets',\r\n exact: true,\r\n path: '/NewSalesCategoryBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Sales Exec Targets',\r\n exact: true,\r\n path: '/UsedVehicleReportingBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'New Vehicle Internal Budget',\r\n exact: true,\r\n path: '/NewVehicleReportingInternalBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Vehicle Internal Budget',\r\n exact: true,\r\n path: '/UsedVehicleReportingInternalBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Finance Provider Intrest Rate',\r\n expect: true,\r\n path: '/FP_IntrestRate_Provider',\r\n component: Components.FPIntrestRateProvider,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Finance Penetration Accounts',\r\n exact: true,\r\n path: '/Supplier',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'League Table Points',\r\n exact: true,\r\n path: '/league_table_points',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Franchises',\r\n exact: true,\r\n path: '/franchise',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Sales Exec',\r\n path: '/Lists/SalesExec',\r\n exact: true,\r\n component: Components.SalesExec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n\r\n {\r\n label: 'Budget',\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'After Sales Vehicle Budget',\r\n exact: true,\r\n path: '/ReportingBudget',\r\n component: Components.ReportingBudget,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'New Vehicle Budget',\r\n exact: true,\r\n path: '/NewVehicleReportingBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Used Vehicle Budget',\r\n exact: true,\r\n path: '/UsedSalesCategoryBudget',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n];\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\n\r\nexport default [\r\n {\r\n label: 'Technician Write-Up',\r\n hidden: true,\r\n exact: true,\r\n path: '/technicianwriteup/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.TechWriteUp,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partrequisitions/:jobId/:technicianJobId?/:isTechReadonly?', // Technician App\r\n component: Components.PartRequisitionsModal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partreq-approve/:jobId/:technicianJobId?/:isTechReadonly?', // Workshop controller\r\n component: Components.ApprovePartRequisitions,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Part Requisitions',\r\n hidden: true,\r\n exact: true,\r\n path: '/partreq-qty-issue/:jobId/:technicianJobId?/:isTechReadonly?', // Part Advisor\r\n component: Components.PartRequisitionsIssueQty,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Quality Control',\r\n hidden: true,\r\n exact: true,\r\n path: '/qc/:jobId',\r\n component: Components.QualityControlSheet,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Customer Consultation',\r\n hidden: true,\r\n exact: true,\r\n path: '/customerconsultation/:jobId',\r\n component: Components.CustomerConsultation,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipment',\r\n hidden: true,\r\n exact: true,\r\n path: '/specialequipment/:jobId',\r\n component: Components.SpecialEquipmentWebForm,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Lift Check List',\r\n hidden: true,\r\n exact: true,\r\n path: '/liftchecklist/:jobId',\r\n component: Components.LiftCheckList,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Write-Up',\r\n hidden: true,\r\n exact: true,\r\n path: '/techwriteupadvisor/:jobId/:technicianJobId?',\r\n component: Components.TechWrite_Up,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Assign Technician',\r\n hidden: true,\r\n exact: true,\r\n path: '/assign-technician/:jobId',\r\n component: Components.AssignTechnician,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Battery Test',\r\n hidden: true,\r\n exact: true,\r\n path: '/batterytest/:jobId',\r\n component: Components.BatteryTest,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defect',\r\n hidden: true,\r\n exact: true,\r\n path: '/defectsworkshopcontroller/:jobId/:isReadOnly?',\r\n component: Components.DefectWC,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Defects',\r\n hidden: true,\r\n exact: true,\r\n path: '/defects/:jobId',\r\n component: Components.AddDefects,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Break Disc Pad Wear Evaluation',\r\n hidden: true,\r\n exact: true,\r\n path: '/brakediscpadwear/:jobId/:technicianJobId?/:isTechReadonly?',\r\n component: Components.BrakeDiscPadWear,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Charges',\r\n hidden: true,\r\n exact: true,\r\n path: '/diagnosticcharges/:jobId',\r\n component: Components.DiagnosticCharge,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tyre Check',\r\n hidden: true,\r\n exact: true,\r\n path: '/tyrecheck/:jobId',\r\n component: Components.TyreChecks,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service 24',\r\n hidden: true,\r\n exact: true,\r\n path: '/technican/service24/:HeaderRecordID',\r\n component: Components.Service24Modal,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Diagnostic Sheet',\r\n hidden: true,\r\n // icon: ,\r\n exact: true,\r\n path: '/diagnosticSheet/:jobId',\r\n component: Components.DiagnosticSheets,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Hand Over Sheet',\r\n hidden: true,\r\n exact: true,\r\n path: '/handOverSheetScreen/:jobId',\r\n component: Components.HandOverSheetScreen,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","export default __webpack_public_path__ + \"static/media/tree.1d45ee2e.png\";","import { Card, Grid, Typography, Box } from '@material-ui/core';\r\nimport React, { useEffect, useState, useLayoutEffect } from 'react';\r\nimport TreeImg from '../../Core/Header/tree.png';\r\nimport { useWindowSize } from '../../Core/Controls/ScreenResolution';\r\n\r\nconst TreesGrid = (props) => {\r\n const [state, setState] = useState({\r\n val: null,\r\n styleObj: { float: 'left', padding: 10 }\r\n });\r\n\r\n const Card = () => {\r\n return (\r\n \r\n 
\r\n \r\n );\r\n };\r\n const [widths, heights] = useWindowSize();\r\n let resolution = 947 - heights;\r\n let screen = 750 - resolution;\r\n\r\n useEffect(() => {\r\n setState((st) => ({\r\n ...st,\r\n val: props.match?.params.count || null\r\n }));\r\n\r\n setState((st) => {\r\n let newSt = { ...st };\r\n let obj = { float: 'right', padding: 5 };\r\n let count = props.match?.params.count;\r\n if (count <= 30) {\r\n obj.width = 180;\r\n obj.height = 230;\r\n }\r\n if (count > 30 && count <= 100) {\r\n obj.width = 100;\r\n obj.height = 120;\r\n }\r\n if (count >= 100 && count <= 200) {\r\n obj.width = 77;\r\n obj.height = 84;\r\n }\r\n if (count >= 200 && count <= 300) {\r\n obj.width = 58;\r\n obj.height = 60;\r\n }\r\n if (count >= 300 && count <= 475) {\r\n obj.width = 45;\r\n obj.height = 50;\r\n }\r\n if (count >= 475 && count <= 880) {\r\n obj.width = 35;\r\n obj.height = 30;\r\n }\r\n if (count > 880) {\r\n obj.width = 20;\r\n obj.height = 30;\r\n }\r\n newSt.styleObj = obj;\r\n return newSt;\r\n });\r\n }, [props.match?.params.count]);\r\n\r\n var arr = [];\r\n var elements = [];\r\n for (var i = 0; i < state.val; i++) {\r\n elements.push();\r\n }\r\n\r\n const count = state.val <= 1 ? 'tree' : 'trees';\r\n\r\n return (\r\n \r\n {elements.length !== 0 ? (\r\n <>\r\n
\r\n {elements}\r\n \r\n\r\n \r\n
\r\n You have saved {state.val} {count}\r\n \r\n \r\n ) : (\r\n \r\n
\r\n
\r\n You are on your way to help environment by reducing printed papers\r\n \r\n
\r\n \r\n \r\n {subOption.label}\r\n \r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n handleClick(subOption.label)} title={subOption.label}>\r\n {subOption.label}\r\n \r\n {state[subOption.label] ? : }\r\n \r\n \r\n \r\n {handler(subOption.children, true)}\r\n \r\n
\r\n );\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n {handler(\r\n props.currentMenus.filter((m) => !m.hidden),\r\n false\r\n )}\r\n
\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { getTickers } from './../Service/KPI_message-service';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\n\r\nexport const TickerDisplayMessage = () => {\r\n const [screenWidth, screenHeight] = useWindowSize();\r\n const [message, setMessage] = useState('');\r\n useEffect(async () => {\r\n let res = await getTickers();\r\n if (res.success) {\r\n let array = [];\r\n res.data.list.forEach((m) => {\r\n array.push(`${m.message}`);\r\n array.push();\r\n });\r\n\r\n let newstring = array.join(` 💠`);\r\n setMessage(newstring);\r\n }\r\n }, []);\r\n\r\n return (\r\n 1050 ? 390 : screenWidth > 960 ? 300 : screenWidth > 895 ? 220 : screenWidth > 850 ? 170 : 100,\r\n display: screenWidth > 775 ? 'block' : 'none',\r\n marginTop: 8,\r\n font: 'message-box',\r\n fontSize: '15px'\r\n }}\r\n >\r\n {message && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n","import * as Components from './../../../../Components';\r\nimport { TypeOfAuth } from './../menu-auth-type';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport ArchiveIcon from '@material-ui/icons/Archive';\r\nimport VideoLibraryIcon from '@material-ui/icons/VideoLibrary';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport AirplayIcon from '@material-ui/icons/Airplay';\r\nimport Dashboard from './../../../../Components/internal/dashboard/dashboard';\r\nimport AssessmentIcon from '@material-ui/icons/Assessment';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport ReceiptIcon from '@material-ui/icons/Receipt';\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport BubbleChartIcon from '@material-ui/icons/BubbleChart';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\nimport EuroIcon from '@material-ui/icons/Euro';\r\nimport DescriptionIcon from '@material-ui/icons/Description';\r\nimport EmojiEventsIcon from '@material-ui/icons/EmojiEvents';\r\nimport SpeedIcon from '@material-ui/icons/Speed';\r\nimport WebIcon from '@material-ui/icons/Web';\r\nimport BuildIcon from '@material-ui/icons/Build';\r\nimport DragIndicatorIcon from '@material-ui/icons/DragIndicator';\r\nimport SendIcon from '@material-ui/icons/Send';\r\nimport SmsIcon from '@material-ui/icons/Sms';\r\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\r\nimport LiveHelpIcon from '@material-ui/icons/LiveHelp';\r\nimport AssignmentIndIcon from '@material-ui/icons/AssignmentInd';\r\nimport FolderSpecialIcon from '@material-ui/icons/FolderSpecial';\r\nimport BookmarksIcon from '@material-ui/icons/Bookmarks';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport BookIcon from '@material-ui/icons/Book';\r\nimport EmojiTransportationIcon from '@material-ui/icons/EmojiTransportation';\r\nimport DepartureBoardIcon from '@material-ui/icons/DepartureBoard';\r\nimport DriveEtaIcon from '@material-ui/icons/DriveEta';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\r\nimport PaymentIcon from '@material-ui/icons/Payment';\r\nimport RemoveFromQueueIcon from '@material-ui/icons/RemoveFromQueue';\r\nimport RateReviewIcon from '@material-ui/icons/RateReview';\r\nimport SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nexport default [\r\n // {\r\n // label: 'Home',\r\n // path: '/',\r\n // exact: true,\r\n // component: Components.Dashbord,\r\n // authType: TypeOfAuth.Auth,\r\n // hidden: true,\r\n // icon: \r\n // },\r\n {\r\n label: 'eWIP',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Home',\r\n path: '/eWIPDashboard',\r\n exact: true,\r\n component: Components.Dashbord,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n icon: ,\r\n authType: TypeOfAuth.Auth,\r\n dontFlatListChildren: true,\r\n isDynamicChildren: 'eWipDashboard',\r\n children: [\r\n // {\r\n // label: 'Service Advisor',\r\n // path: '/dashboard/sa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Awaiting Arrival',\r\n // path: '/dashboard/aa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Workshop Control',\r\n // path: '/dashboard/wc',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Parts Advisor',\r\n // path: '/dashboard/pa',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Technician App',\r\n // path: '/dashboard/ta',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // },\r\n // {\r\n // label: 'Back Office',\r\n // path: '/dashboard/bo',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // component: () => {\r\n // return ;\r\n // }\r\n // }\r\n ]\r\n },\r\n {\r\n label: 'Special Equipments',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/Lists/SpecialEquipment/Dash',\r\n exact: false,\r\n component: Components.SpecialEquipmentDash,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Special Equipments',\r\n path: '/Lists/SpecialEquipment',\r\n exact: false,\r\n component: Components.SpecialEquipment,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Archived Jobs',\r\n path: '/archivedjobs',\r\n exact: true,\r\n component: Components.ArchivedJobs,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'QC Jobs',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/qc_jobs',\r\n component: Components.QCJobsDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Videos',\r\n path: '/Lists/Videos',\r\n exact: true,\r\n component: Components.Videos,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Dashboard Detail',\r\n path: '/dashgrid',\r\n exact: true,\r\n component: Components.dashboard,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n\r\n {\r\n label: 'Communicator',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n path: '/communicator_dash',\r\n exact: true,\r\n component: Components.CustCommunicatorDash,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Open Action Log',\r\n path: '/Openactionlog',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.OpenActionLog,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Site Vehicles',\r\n path: '/SiteVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'VOR Vehicles',\r\n path: '/VORVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Workshop Vehicles',\r\n path: '/WorkshopVehicles',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Check In - WSL not set',\r\n path: '/CheckInWSLNotSet',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Jobs Approved',\r\n path: '/JobsApproved',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: \r\n },\r\n {\r\n label: 'Bookings',\r\n path: '/bookings',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: Components.BookingsScreen,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Reports',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/ReportsDashboard',\r\n component: Components.RepotingTab,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n\r\n {\r\n label: 'Budget Dashboard',\r\n exact: true,\r\n path: '/budget',\r\n component: Components.BudgetScreen,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Profit & Loss',\r\n exact: true,\r\n path: '/profitloss',\r\n component: Components.ProfitLoss,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Aged Measures',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/AgedMeasures',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueries',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries By Department',\r\n exact: true,\r\n path: '/AgedMeasures/AccountQueriesByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Branch',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Branch',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Debt - Company',\r\n exact: true,\r\n path: '/AgedMeasures/AgedDebt-Company',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash',\r\n exact: true,\r\n path: '/AgedMeasures/Cash',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Cash By Department',\r\n exact: true,\r\n path: '/AgedMeasures/CashByDepartment',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Surcharges',\r\n exact: true,\r\n path: '/AgedMeasures/DirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/NewMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/NewVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'R & M',\r\n exact: true,\r\n path: '/AgedMeasures/R&M',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Fuso Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedFusoStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Maxus Vans',\r\n exact: true,\r\n path: '/AgedMeasures/UsedMaxusVans',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Non-franchise Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedNon-franchiseStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Truck Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedTruckStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Van Stock',\r\n exact: true,\r\n path: '/AgedMeasures/UsedVanStock',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Debt',\r\n exact: true,\r\n path: '/AgedMeasures/VehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Warranty',\r\n exact: true,\r\n path: '/AgedMeasures/Warranty',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgress',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Work In Progress by Departement',\r\n exact: true,\r\n path: '/AgedMeasures/WorkInProgressbyDepartement',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'New Services',\r\n // exact: true,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: ,\r\n // children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/budget_dashboard',\r\n // component: Components.BudgetDashboard,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // }\r\n // ]\r\n // },\r\n {\r\n label: 'DOC',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Weekly Flash Report',\r\n exact: true,\r\n path: '/Docs/WeeklyFlashReport',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Used Stock',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Used Stock Valuation',\r\n exact: true,\r\n path: '/UsedStockValuation',\r\n component: Components.UsedStockValuation,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/usedStock',\r\n component: Components.UsedStock,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Aged Vehicle Stock',\r\n exact: true,\r\n path: '/agedStocks',\r\n component: Components.AgedStocks,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n },\r\n {\r\n label: 'Overage Priority List',\r\n exact: true,\r\n path: '/overagePriority',\r\n component: Components.OveragePriority,\r\n authType: TypeOfAuth.Auth\r\n // icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Sales',\r\n children: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Sales Dashboard',\r\n exact: true,\r\n path: '/sales/dashboard',\r\n component: Components.SalesDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Dashboard V2',\r\n exact: true,\r\n path: '/sales/dashboardtwo',\r\n component: Components.SalesDashboardTwo,\r\n authType: TypeOfAuth.Auth\r\n },\r\n\r\n {\r\n label: 'New Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/NewVehicleProfitReport',\r\n component: Components.NewVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Profit Report',\r\n exact: true,\r\n path: '/sales/UsedVehicleProfitReport',\r\n component: Components.UsedVehicleProfitReport,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Account Queries by Salesexec',\r\n exact: true,\r\n path: '/sales/AccountQueriesbySalesexec',\r\n component: Components.AccountQueriesbySalesexec,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Aged Measures Work - Progress',\r\n exact: true,\r\n path: '/sales/AgedMeasuresWorkingProgress',\r\n component: Components.AgedMeasuresWorkingProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Work In Progress',\r\n exact: true,\r\n path: '/sales/SalesWorkInProgress',\r\n component: Components.SalesWorkinProgress,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Registration Reports',\r\n exact: true,\r\n path: '/sales/RegistrationReports',\r\n component: Components.RegistrationReports,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Stock (Excluding WIP)',\r\n exact: true,\r\n path: '/sales/NewVehicleStockExcludingWIP',\r\n component: Components.VehicleStocksExWip,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'New Vehicle Order',\r\n exact: true,\r\n path: '/sales/VehicleNewOrder',\r\n component: Components.VehicleNewOrder,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Outstanding Invoices',\r\n exact: true,\r\n path: '/sales/OutstandingInvoices',\r\n component: Components.OutstandingInvoices,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Sales Contingency Debt',\r\n exact: true,\r\n path: '/sales/SalesContingencyDebt',\r\n component: Components.SalesContingencyDebt,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used Vehicle Stock',\r\n exact: true,\r\n path: '/sales/UsedVehicleStock',\r\n component: Components.UsedVehicleStock,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Vehicle Aged Debt By Salesexec',\r\n exact: true,\r\n path: '/sales/VehicleAgedDebtBySalesexec',\r\n component: Components.VehicleAgedDebtBySalesexec,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Services',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/service/dashboard',\r\n component: Components.ServiceDashboard,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Consumables',\r\n exact: true,\r\n path: '/Services/Consumables',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysis',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Idle Time Analysis-Reason',\r\n exact: true,\r\n path: '/Services/IdleTimeAnalysisReason',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Invoiced Hours',\r\n exact: true,\r\n path: '/Services/InvoicedHours',\r\n component: Components.InvoicedHours,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Mobilovan',\r\n exact: true,\r\n path: '/Services/Mobilovan',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'NPW Rectification',\r\n exact: true,\r\n path: '/Services/NPWRectification',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Parts Warranty Write Off',\r\n exact: true,\r\n path: '/Services/PartsWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Service Warranty Write Off',\r\n exact: true,\r\n path: '/Services/ServiceWarrantyWriteOff',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Technician Efficiency',\r\n exact: true,\r\n path: '/Services/Efficiency',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n // {\r\n // label: 'Dashboard',\r\n // exact: true,\r\n // path: '/parts/dashboard',\r\n // component: Components.HeadLinesDashboard\r\n // },\r\n {\r\n label: 'Parts',\r\n exact: true,\r\n path: '/parts/PartsSales/P',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Trade Centre',\r\n exact: true,\r\n path: '/parts/PartsSales/B',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n path: '/parts/PartsSales/w',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Car Express',\r\n exact: true,\r\n path: '/parts/PartsSales/f',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Total',\r\n exact: true,\r\n path: '/parts/PartsSales/A',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Used',\r\n exact: true,\r\n path: '/parts/PartsSales/U',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth\r\n }\r\n ]\r\n },\r\n {\r\n label: 'Workshop',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Shift Calendar',\r\n exact: true,\r\n path: '/ShiftCalendar',\r\n component: Components.ShiftCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Resource Calendar',\r\n exact: true,\r\n path: '/ResourceCalendar',\r\n component: Components.ResourceCalenderComp,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n // {\r\n // label: 'WIP Hours',\r\n // exact: true,\r\n // path: '/wipHours',\r\n // component: Components.WipHours,\r\n // authType: TypeOfAuth.Auth,\r\n // icon: \r\n // },\r\n {\r\n label: 'Budget',\r\n exact: true,\r\n path: '/ReportingBudget',\r\n component: Components.ReportingBudget,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'Invoices',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n icon: ,\r\n children: [\r\n {\r\n label: 'Dashboard',\r\n exact: true,\r\n path: '/invoice/dashboard',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Customers',\r\n exact: true,\r\n path: '/invoice/Customers',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'All Invoices',\r\n exact: true,\r\n path: '/invoice/allInvoices',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Outstanding',\r\n exact: true,\r\n path: '/invoice/Invoice_Outstanding',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Paid',\r\n exact: true,\r\n path: '/invoice/Invoice_Paid',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Invoices Queried',\r\n exact: true,\r\n path: '/invoice/Invoice_Queried',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Sent',\r\n exact: true,\r\n path: '/invoice/messagesSent',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n },\r\n {\r\n label: 'Messages Received',\r\n exact: true,\r\n path: '/invoice/messagesReceived',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n icon: \r\n }\r\n ]\r\n },\r\n {\r\n label: 'MOT HISTORY',\r\n // hidden: true,\r\n icon: ,\r\n exact: true,\r\n path: '/MotHistoryAndRoadTax',\r\n component: Components.MotHistoryScreen,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'BookingsList',\r\n path: '/BookingsRequesteList',\r\n exact: true,\r\n authType: TypeOfAuth.Auth,\r\n component: () => ,\r\n icon: ,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresDirtyUnits',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresDirtyUnits',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'ViewDebtDetailsSalesexec',\r\n exact: true,\r\n path: '/sales/ViewDebtDetailsSalesexec',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetAgedMeasuresRanMWarrantyCashGen',\r\n exact: true,\r\n path: '/AgedMeasures/GetAgedMeasuresRanMWarrantyCashGen',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'GetUsedAndNewVehicleDebt',\r\n exact: true,\r\n path: '/AgedMeasures/GetUsedAndNewVehicleDebt',\r\n component: () => ,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'EnquirieList',\r\n exact: true,\r\n path: '/AgedMeasures/EnquirieList',\r\n component: Components.EnquirieList,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Workflow Job',\r\n path: '/job/:jobId/:workflowId',\r\n component: (props) => ,\r\n hidden: true,\r\n exact: true,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'Tech Dashboard Detail',\r\n path: '/techDashgrid',\r\n exact: true,\r\n component: Components.TechDashboardGrid,\r\n authType: TypeOfAuth.Auth,\r\n hidden: true\r\n },\r\n {\r\n label: 'Logout',\r\n path: '/logout',\r\n hidden: true,\r\n component: Components.logout,\r\n authType: TypeOfAuth.Auth\r\n },\r\n {\r\n label: 'HistoryModal',\r\n path: '/SpecialEquipmentHistoryModal',\r\n hidden: true,\r\n component: Components.SpecialEquipmentHistoryModal,\r\n authType: TypeOfAuth.Auth\r\n }\r\n];\r\n","import React, { useContext, useMemo, useEffect } from 'react';\r\nimport { AppBar, Toolbar, Button, useScrollTrigger, Slide, MenuItem, MenuList, Paper, Divider, Collapse } from '@material-ui/core';\r\nimport { makeStyles, fade } from '@material-ui/core/styles';\r\nimport { Link, NavLink } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport _ from 'lodash';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport { SecondaryButton, CustomButton } from '../FormInput';\r\nimport VpnKeyIcon from '@material-ui/icons/VpnKey';\r\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp';\r\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport { getMenuForRole } from './_menu';\r\nimport AppContext from '../../App/AppContext';\r\nimport { AppStorage } from '../Service/storage-service';\r\nimport MySignature, { UserSignatureReminder } from '../Modal/SignatureModal';\r\nimport { postSignature, postSignatureStatus } from '../Service/login-service';\r\nimport InputBase from '@material-ui/core/InputBase';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport moment from 'moment';\r\nimport Popper from '@material-ui/core/Popper';\r\nimport Fade from '@material-ui/core/Fade';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { getDataByEwipNo } from '../Service/common-service';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport TemporaryDrawer from './Drawer';\r\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\r\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\nimport { WorkflowDash, PartSales, UserProfile, AppraisalDashboard } from '../../Components';\r\nimport { Label } from 'recharts';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport { TickerDisplayMessage } from './ticker';\r\nimport { TableContainer } from '@material-ui/core';\r\nimport { Table } from '@material-ui/core';\r\nimport { TableHead } from '@material-ui/core';\r\nimport { TableBody } from '@material-ui/core';\r\nimport { TableRow } from '@material-ui/core';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { TableCell } from '@material-ui/core';\r\nimport formatters from '../Grid/inputFormatter';\r\nimport InternalMenusToConvertDynamic from '../Root/menu/roles-menu/reportingMenu';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport DialogComp from '../Modal/dialogModal';\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:hover': {\r\n backgroundColor: theme.palette.action.hover,\r\n cursor: 'pointer'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n table: {\r\n width: 800\r\n },\r\n root: {\r\n flexGrow: 0\r\n },\r\n title: {\r\n flexGrow: 1,\r\n fontSize: '15px'\r\n },\r\n linknav: {\r\n textDecoration: 'none',\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n fontSize: '15px'\r\n },\r\n labelBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n textTransform: 'none',\r\n textDecoration: 'none',\r\n fontSize: '15px'\r\n },\r\n logoutBtn: {\r\n display: 'inline-flex',\r\n VerticalAlign: 'text-bottom',\r\n BoxSizing: 'inherit',\r\n textAlign: 'center',\r\n alignItems: 'center',\r\n textDecoration: 'none',\r\n cursor: 'pointer',\r\n marginLeft: 1\r\n },\r\n app_toolbar: {\r\n height: '45px',\r\n minHeight: '45px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n padding: '0px 10px'\r\n },\r\n search: {\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: fade(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: fade(theme.palette.common.white, 0.25)\r\n },\r\n marginRight: theme.spacing(2),\r\n marginLeft: 0,\r\n marginTop: (props) => (props.WindowWidths < 750 ? 9 : props.WindowWidths < 1500 ? 9 : 5),\r\n width: '200px !important',\r\n maxHeight: '30px',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(3),\r\n width: 'auto'\r\n }\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 0.9),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n },\r\n inputRoot: {\r\n color: 'inherit'\r\n },\r\n inputInput: {\r\n padding: '5px 8px 8px 0px', //theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(2.5)}px)`,\r\n transition: theme.transitions.create('width'),\r\n width: '100%',\r\n [theme.breakpoints.up('md')]: {\r\n width: '20ch'\r\n }\r\n },\r\n drawerPaper: {\r\n top: '60px',\r\n '&::-webkit-scrollbar': {\r\n width: '0.4em'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n backgroundColor: 'rgba(0,0,0,.1)',\r\n outline: '1px solid slategrey'\r\n }\r\n }\r\n}));\r\n\r\nfunction HideOnScroll(props) {\r\n const { children } = props;\r\n const trigger = useScrollTrigger();\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nconst AppbarComponent = (props) => {\r\n const [state, setState] = React.useState({ open2: null, WorkflowJobs: [], left: false, openSetting: false, open3: null });\r\n const {\r\n loggedIn,\r\n userRoles,\r\n displayName,\r\n lastLogin,\r\n showToast,\r\n portalSettings,\r\n showModal,\r\n showTopNavAndMenu,\r\n hideShowTopNav,\r\n isTopNav,\r\n tempMenus,\r\n reportingMenus,\r\n appraisalMenu\r\n } = useContext(AppContext);\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n let tempPortalSettings = { ...portalSettings };\r\n tempPortalSettings.WindowWidths = WindowWidths;\r\n const classes = useStyles(tempPortalSettings);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [anchorEl2, setAnchorEl2] = React.useState(null);\r\n const [anchorEl3, setAnchorEl3] = React.useState(null);\r\n const [anchorEl4, setAnchorEl4] = React.useState(null);\r\n const [openSign, setOpenSign] = React.useState(false);\r\n const [openSignRem, setOpenSignRem] = React.useState(false);\r\n const [searchAnchorEl, setSearchAnchorEl] = React.useState(null);\r\n let history = useHistory();\r\n const isCommunicatorAllowed = AppStorage.getCommunicatorAllowed();\r\n const isInvoiceAllowed = AppStorage.getInvoiceAllowed();\r\n const isReportingAllowed = AppStorage.getReportingAllowed();\r\n const isWIPAllowed = AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled;\r\n let menuPermissionCounter = isCommunicatorAllowed + isInvoiceAllowed + isReportingAllowed + isWIPAllowed;\r\n const isReportingAgedMeasureAllowed = AppStorage.getReportingAgedMeasureAllowed();\r\n const isReportingPartsAllowed = AppStorage.getReportingPartsAllowed();\r\n\r\n useEffect(() => {\r\n if (loggedIn && AppStorage.getSignNotifiedStatus() === 0 && AppStorage.getSignatureStatus() != 1 && AppStorage.getSignatureStatus() != 2) {\r\n setOpenSignRem(true);\r\n AppStorage.setSignNotifiedStatus('set');\r\n }\r\n }, []);\r\n let isAdmin = userRoles.includes('admin');\r\n const isTechnician = userRoles.includes('technician');\r\n const getWipDataById = async (wipNo) => {\r\n const res = await getDataByEwipNo(wipNo);\r\n if (res.success) {\r\n setState((st) => ({ ...st, WorkflowJobs: res.data.jobsDetails }));\r\n } else {\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n }\r\n };\r\n\r\n const handleChange = (event) => {\r\n if (event.target.value.length > 4) {\r\n getWipDataById(event.target.value);\r\n setSearchAnchorEl(event.currentTarget);\r\n } else {\r\n setSearchAnchorEl(null);\r\n }\r\n };\r\n\r\n const handleClick = (item) => (e) => {\r\n setState((st) => ({ ...st, [item]: !st[item], id2: item }));\r\n setAnchorEl2(e.currentTarget);\r\n };\r\n\r\n const handleCollaps = (item) => (e) => {\r\n setState((st) => ({ ...st, [item]: !st[item], id2: item }));\r\n setAnchorEl3(e.currentTarget);\r\n };\r\n\r\n const handleClose = (item, coll) => {\r\n setState((st) => ({ ...st, [item]: null }));\r\n if (!coll) {\r\n setAnchorEl2(null);\r\n } else {\r\n setAnchorEl3(null);\r\n }\r\n };\r\n\r\n const handleCollaps2 = (item) => (e) => {\r\n setState((st) => ({ ...st, [item]: !st[item] }));\r\n setAnchorEl4(e.currentTarget);\r\n };\r\n\r\n const CloseChildPopver = (item, coll, item2, item3) => {\r\n setState((st) => ({ ...st, [item]: null, [item2]: null, [item3]: null }));\r\n if (!coll) {\r\n setAnchorEl3(null);\r\n setAnchorEl2(null);\r\n } else {\r\n setAnchorEl4(null);\r\n }\r\n };\r\n\r\n const handleCloseSearch = (data) => {\r\n localStorage.setItem('currentWorkflowId', data.workFlowID);\r\n\r\n history.push(`/Job/${data.headerRecordID}/${data.workFlowID}`);\r\n setSearchAnchorEl(null);\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n };\r\n\r\n const open = Boolean(anchorEl);\r\n const open2 = Boolean(anchorEl2);\r\n const open3 = Boolean(anchorEl3);\r\n\r\n const id = open ? 'simple-popover' : undefined;\r\n const handlePopupClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handlePopupClose = () => {\r\n setAnchorEl(null);\r\n };\r\n const showPasswordChangeModal = (e) => {\r\n e.preventDefault();\r\n showModal('PasswordChange');\r\n };\r\n const Logout = () => {\r\n window.top.postMessage({ type: 'trigger-logout' }, '*');\r\n history.push(`/`);\r\n };\r\n const currentMenus = useMemo(() => {\r\n let menus = getMenuForRole(userRoles, loggedIn);\r\n\r\n if (isWIPAllowed) {\r\n let dashMenus = [];\r\n if (tempMenus.menus.length > 0) {\r\n dashMenus = tempMenus.menus.map((x) => {\r\n return {\r\n label: `${x.label}`,\r\n path: `/dashboard/${x.id}?workFlowId=${x.id}&workFlowName=${x.label}`,\r\n exact: true,\r\n authType: 1,\r\n component: () => {\r\n return ;\r\n }\r\n };\r\n });\r\n }\r\n if (menuPermissionCounter == 1) {\r\n let isDash = menus.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[isDash].children = dashMenus;\r\n }\r\n } else {\r\n let iseWIPMenu = menus.findIndex((p) => p.label === 'eWIP');\r\n let isDash = menus[iseWIPMenu]?.children.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[iseWIPMenu].children[isDash].children = dashMenus;\r\n }\r\n }\r\n }\r\n if (isReportingAllowed) {\r\n let ReportsIndex = InternalMenusToConvertDynamic.findIndex((m) => m.label == 'Reports');\r\n let findAgedMeasureMenuIndex = InternalMenusToConvertDynamic[ReportsIndex]?.children?.findIndex((m) => m.label == 'Aged Measures');\r\n let tempAgedMeasureChildren = InternalMenusToConvertDynamic[ReportsIndex]?.children[findAgedMeasureMenuIndex]?.children;\r\n const agedMeasureMenus = [];\r\n const PartsMenus = [];\r\n if (reportingMenus?.menus?.length > 0) {\r\n let menusFromAPI = reportingMenus.menus;\r\n if (tempAgedMeasureChildren?.length > 0) {\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n for (let i = 0; i < tempAgedMeasureChildren?.length; i++) {\r\n if (tempAgedMeasureChildren[i].label === menusFromAPI[j].label) {\r\n agedMeasureMenus.push({\r\n ...tempAgedMeasureChildren[i],\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j]?.menuLabel || menusFromAPI[j]?.label || ''\r\n });\r\n }\r\n }\r\n }\r\n }\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n if (menusFromAPI[j].parentMenu == 'Part') {\r\n PartsMenus.push({\r\n exact: true,\r\n authType: 1,\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j]?.menuLabel || menusFromAPI[j]?.label || '',\r\n component: () => {\r\n return ;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu > -1) {\r\n if (isReportingAgedMeasureAllowed || isReportingPartsAllowed) {\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu >= 0) {\r\n let agedMeasuresIndex = menus[isReportingMenu]?.children.findIndex((p) => p.label === 'Aged Measures');\r\n let partsIndex = menus[isReportingMenu]?.children.findIndex((p) => p.label === 'Parts');\r\n if (isReportingAgedMeasureAllowed && agedMeasuresIndex >= 0) {\r\n menus[isReportingMenu].children[agedMeasuresIndex].children = agedMeasureMenus.length > 0 ? agedMeasureMenus : [];\r\n }\r\n if (isReportingPartsAllowed && partsIndex >= 0) {\r\n menus[isReportingMenu].children[partsIndex].children = PartsMenus.length > 0 ? PartsMenus : [];\r\n }\r\n }\r\n }\r\n }\r\n // if (appraisalMenu.menus.length > 0) {\r\n // let aprrmenusFromAPI = appraisalMenu.menus;\r\n // for (let j = 0; j < aprrmenusFromAPI.length; j++) {\r\n // if (aprrmenusFromAPI[j].parentMenu == 'Appraisal') {\r\n // AppraisalMenus.push({\r\n // exact: true,\r\n // authType: 1,\r\n // path: aprrmenusFromAPI[j].path,\r\n // label: aprrmenusFromAPI[j]?.menuLabel || aprrmenusFromAPI[j]?.label || '',\r\n // component: () => {\r\n // return ;\r\n // }\r\n // });\r\n // }\r\n // }\r\n // }\r\n // let isAppraisalMenu = menus.findIndex((p) => p.label === 'Appraisal');\r\n // menus[isAppraisalMenu].children = AppraisalMenus.length > 0 ? AppraisalMenus : [];\r\n // console.log(menus);\r\n }\r\n return menus;\r\n }, [loggedIn, tempMenus, reportingMenus, appraisalMenu]);\r\n\r\n const closeSign = () => {\r\n setOpenSign(!openSign);\r\n };\r\n const closeSignRem = () => {\r\n setOpenSignRem(false);\r\n };\r\n\r\n const postSignData = async (sign, id, defaultInternalDashboard, appbarLocation) => {\r\n const data = {\r\n signature: sign,\r\n AppbarLocation: appbarLocation,\r\n defaultInternalDashboard: defaultInternalDashboard\r\n };\r\n console.log('from appbar ');\r\n let resSign = await postSignature(data);\r\n let resStatus = id && (await postSignatureStatus(id));\r\n if (resSign) {\r\n if (resSign?.success) {\r\n AppStorage.setSignature(sign);\r\n AppStorage.setUserGridColumnAppbarLocation(appbarLocation);\r\n\r\n localStorage.setItem('_defaultInternalDashboard_', defaultInternalDashboard);\r\n showToast('User Settings Updated Successfully!');\r\n } else {\r\n showToast(resSign?.message || 'Something went wrong!');\r\n }\r\n }\r\n };\r\n\r\n const toggleDrawer = (anchor, open) => (event) => {\r\n if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {\r\n return;\r\n }\r\n setState({ ...state, [anchor]: open });\r\n };\r\n\r\n const handler = (children, isFiltered) => {\r\n const sortChildren = (items) => items.sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase()));\r\n\r\n let currentNav = isFiltered ? _.orderBy(children, [(c) => c.label.toLowerCase()], ['asc']) : children;\r\n return currentNav.map((m, index) => {\r\n if (!m.children) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n
handleClose(m.label)}\r\n anchorOrigin={{\r\n vertical: 'bottom',\r\n horizontal: 'center'\r\n }}\r\n transformOrigin={{\r\n vertical: 'top',\r\n horizontal: 'center'\r\n }}\r\n >\r\n \r\n handleClose(m.label)}>\r\n \r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {WindowWidths < 1620 && loggedIn ? (\r\n
\r\n \r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {handler(\r\n currentMenus.filter((m) => !m.hidden),\r\n false\r\n )}\r\n
\r\n )}\r\n {loggedIn && !isAdmin && isWIPAllowed && !isTechnician && (\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n Customer Name\r\n \r\n \r\n Workflow\r\n \r\n \r\n Return Reason\r\n \r\n \r\n Branch\r\n \r\n \r\n Due Date In\r\n \r\n \r\n \r\n \r\n {/* {console.log(state.WorkflowJobs)} */}\r\n {state.WorkflowJobs.map((w, index) => {\r\n return (\r\n handleCloseSearch(w)}>\r\n \r\n {w.wipNumber}
\r\n \r\n \r\n {w.regNumber}
\r\n \r\n \r\n {w.customer}
\r\n \r\n \r\n {w.workflow}
\r\n \r\n \r\n {w.returnReason}
\r\n \r\n \r\n {w.branch}
\r\n \r\n \r\n {formatters.DateTimeFormatter(w.dateDueIn)}
\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n
\r\n {loggedIn ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n {isTopNav ? (\r\n hideShowTopNav(false)}\r\n toolTipTitle=\"Hide Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n ) : (\r\n hideShowTopNav(true)}\r\n toolTipTitle=\"Show Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n )}\r\n
\r\n
\r\n {displayName}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {/* {!isAdmin && (\r\n \r\n )}\r\n */}\r\n \r\n \r\n \r\n \r\n ) : (\r\n
\r\n
Login\r\n \r\n )}\r\n
\r\n {openSign && (\r\n
setOpenSign(false)} fullWidth maxWidth=\"md\">\r\n \r\n \r\n )}\r\n {!isAdmin && openSignRem &&
}\r\n\r\n
\r\n \r\n \r\n\r\n {state.openSetting ? (\r\n setState((st) => ({ ...st, openSetting: false }))} fullWidth maxWidth=\"xl\">\r\n \r\n \r\n ) : null}\r\n \r\n {/* {renderRoutes(currentMenus)} */}\r\n \r\n {currentMenus.map((m, i) => {\r\n return m.children ? (\r\n m.children.map((a) => {\r\n let aChildpath = [];\r\n if (a.path) {\r\n aChildpath = a.path?.split('?');\r\n }\r\n return a.children ? (\r\n a.children.map((b) => {\r\n let bChildpath = [];\r\n if (b.path) {\r\n bChildpath = b.path?.split('?');\r\n }\r\n\r\n return b.children ? (\r\n b.children.map((c) => {\r\n let cChildpath = [];\r\n if (c.path) {\r\n cChildpath = c.path?.split('?');\r\n }\r\n\r\n return ;\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/tree.1d45ee2e.png\";","import { get, post } from './http-calls';\r\nimport { memoize } from 'lodash';\r\nexport const getSavePaperData = async () => {\r\n let res = await get('Jobdocuments/DocumentsProcessed', { useAuthToken: true });\r\n return res;\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport TreeImg from './assests/tree.png';\r\nimport { getSavePaperData } from '../../Core/Service/saveTree-service';\r\n\r\nconst TreeImgLogo = () => {\r\n const [state, setState] = useState({\r\n val: 0,\r\n treeCount: 0\r\n });\r\n useEffect(async () => {\r\n if (state.val == 0) {\r\n let res = await getSavePaperData();\r\n let ResData = res.data?.documents[0]?.documentsProcessed;\r\n saveTrees(ResData);\r\n }\r\n }, [state.val]);\r\n\r\n const saveTrees = (values) => {\r\n setState((st) => {\r\n let newSt = { ...st };\r\n if (values >= 12000) {\r\n let treeVal = values / 12000;\r\n let newVal = Math.round(treeVal);\r\n newSt.treeCount = newVal;\r\n } else {\r\n newSt.treeCount = 0;\r\n }\r\n return newSt;\r\n });\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default TreeImgLogo;\r\n","import React, { useContext, useMemo } from 'react';\r\nimport clsx from 'clsx';\r\nimport { makeStyles, useTheme, fade } from '@material-ui/core/styles';\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport List from '@material-ui/core/List';\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport { Link, NavLink, Route, Switch, useHistory } from 'react-router-dom';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport ExpandMore from '@material-ui/icons/ExpandMore';\r\nimport { Collapse, Fade, Grid, InputBase, MenuItem, MenuList, Paper, Popover, Popper } from '@material-ui/core';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\nimport AppContext from '../../App/AppContext';\r\nimport { getMenuForRole } from './_menu';\r\nimport { WorkflowDash, PartSales, UserProfile, AppraisalDashboard } from '../../Components';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { getDataByEwipNo } from '../Service/common-service';\r\nimport moment from 'moment';\r\nimport { CustomButton, SecondaryButton } from '../FormInput';\r\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\r\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\r\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp';\r\nimport BorderColorIcon from '@material-ui/icons/BorderColor';\r\nimport VpnKeyIcon from '@material-ui/icons/VpnKey';\r\nimport MySignature, { UserSignatureReminder } from '../Modal/SignatureModal';\r\nimport { postSignature, postSignatureStatus } from '../Service/login-service';\r\nimport { AppStorage } from '../Service/storage-service';\r\nimport { TypeOfAuth } from './menu/menu-auth-type';\r\nimport LoyaltyIcon from '@material-ui/icons/Loyalty';\r\nimport { TickerDisplayMessage } from './ticker';\r\nimport { TableContainer } from '@material-ui/core';\r\nimport { Table } from '@material-ui/core';\r\nimport { TableHead } from '@material-ui/core';\r\nimport { TableBody } from '@material-ui/core';\r\nimport { TableRow } from '@material-ui/core';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { TableCell } from '@material-ui/core';\r\nimport formatters from '../Grid/inputFormatter';\r\nimport InternalMenusToConvertDynamic from '../Root/menu/roles-menu/reportingMenu';\r\nimport DialogComp from '../Controls/Dialog/DialogComp';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\n\r\nconst renderRoutes = (menus) => {\r\n return menus.map((menu) => {\r\n const { label, exact, path, component, children } = menu;\r\n const ParentPathSegments = path ? path.split('?') : [];\r\n\r\n if (children) {\r\n return children.map((child) => {\r\n const { path: childPath, component: childComponent, exact: childExact } = child;\r\n const childPathSegments = childPath ? childPath.split('?') : [];\r\n\r\n if (child.children) {\r\n return renderRoutes(child.children);\r\n }\r\n\r\n return ;\r\n });\r\n } else {\r\n return ;\r\n }\r\n });\r\n};\r\n\r\nconst drawerWidth = 240;\r\n\r\nconst StyledTableCell = withStyles((theme) => ({\r\n head: {\r\n backgroundColor: theme.palette.action.hover\r\n },\r\n body: {\r\n fontSize: 14\r\n }\r\n}))(TableCell);\r\n\r\nconst StyledTableRow = withStyles((theme) => ({\r\n root: {\r\n '&:hover': {\r\n backgroundColor: theme.palette.action.hover,\r\n cursor: 'pointer'\r\n }\r\n }\r\n}))(TableRow);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n table: {\r\n maxWidth: 800\r\n },\r\n root: {\r\n display: 'flex'\r\n },\r\n appBar: {\r\n top: '60px',\r\n height: '45px',\r\n zIndex: theme.zIndex.drawer + 1,\r\n transition: theme.transitions.create(['width', 'margin'], {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen\r\n })\r\n },\r\n appBarShift: {\r\n marginLeft: drawerWidth,\r\n width: `calc(100% - ${drawerWidth}px)`,\r\n transition: theme.transitions.create(['width', 'margin'], {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.enteringScreen\r\n })\r\n },\r\n menuButton: {\r\n marginRight: 36\r\n },\r\n hide: {\r\n display: 'none'\r\n },\r\n drawer: {\r\n width: drawerWidth,\r\n flexShrink: 0,\r\n whiteSpace: 'nowrap'\r\n },\r\n drawerOpen: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n width: drawerWidth,\r\n transition: theme.transitions.create('width', {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.enteringScreen\r\n })\r\n },\r\n drawerClose: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n transition: theme.transitions.create('width', {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen\r\n }),\r\n overflowX: 'hidden',\r\n width: theme.spacing(0) + 1,\r\n [theme.breakpoints.up('sm')]: {\r\n width: theme.spacing(7) + 1\r\n }\r\n },\r\n toolbar: {\r\n [theme.breakpoints.up('sm')]: {\r\n width: theme.spacing(7) + 1\r\n },\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n padding: theme.spacing(0, 1),\r\n // necessary for content to be below app bar\r\n ...theme.mixins.toolbar\r\n },\r\n app_toolbar: {\r\n height: '45px',\r\n minHeight: '45px',\r\n display: 'flex',\r\n // justifyContent: 'space-between',\r\n padding: '0px 10px'\r\n },\r\n content: {\r\n flexGrow: 1,\r\n // padding: theme.spacing(3)\r\n overflow: 'auto',\r\n height: 'calc(100vh - 60px)'\r\n },\r\n drawerPaper: {\r\n top: '60px',\r\n '&::-webkit-scrollbar': {\r\n width: '0.4em'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n backgroundColor: 'rgba(0,0,0,.1)',\r\n outline: '1px solid slategrey'\r\n }\r\n },\r\n\r\n labelBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n textTransform: 'none',\r\n textDecoration: 'none',\r\n fontSize: '15px'\r\n },\r\n menuIcon: {\r\n minWidth: '40px'\r\n },\r\n logoutBtn: {\r\n display: 'inline-flex',\r\n VerticalAlign: 'text-bottom',\r\n BoxSizing: 'inherit',\r\n textAlign: 'center',\r\n alignItems: 'center',\r\n textDecoration: 'none',\r\n cursor: 'pointer',\r\n marginLeft: 1\r\n },\r\n search: {\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: fade(theme.palette.common.white, 0.15),\r\n '&:hover': {\r\n backgroundColor: fade(theme.palette.common.white, 0.25)\r\n },\r\n marginRight: theme.spacing(2),\r\n marginLeft: 0,\r\n marginTop: (props) => (props.WindowWidths > 750 ? 4 : 0),\r\n width: '200px !important',\r\n maxHeight: '30px',\r\n [theme.breakpoints.up('sm')]: {\r\n marginLeft: theme.spacing(3),\r\n width: 'auto'\r\n }\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 0.9),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n },\r\n inputRoot: {\r\n color: 'inherit'\r\n },\r\n inputInput: {\r\n padding: '5px 8px 8px 0px', //theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(2.5)}px)`,\r\n transition: theme.transitions.create('width'),\r\n width: '100%',\r\n [theme.breakpoints.up('md')]: {\r\n width: '20ch'\r\n }\r\n },\r\n linknav: {\r\n backgroundColor: (props) => `${props.portalMenuBarBackgroundColour}`,\r\n textDecoration: 'none',\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n fontSize: '15px'\r\n },\r\n activeLink: {\r\n '& .MuiTypography-root': {\r\n color: '#f50057 !important'\r\n }\r\n },\r\n itemText: {\r\n color: (props) => `${props.portalMenuBarTextColour}`,\r\n '& span, & svg': {\r\n fontSize: '0.83rem',\r\n color: (props) => `${props.portalMenuBarTextColour}`\r\n }\r\n },\r\n ChevronRightIconBtn: {\r\n color: (props) => `${props.portalMenuBarTextColour}`\r\n }\r\n}));\r\n\r\nexport default function MiniDrawer(props) {\r\n const {\r\n loggedIn,\r\n userRoles,\r\n displayName,\r\n lastLogin,\r\n showToast,\r\n portalSettings,\r\n showModal,\r\n showTopNavAndMenu,\r\n hideShowTopNav,\r\n reportingMenus,\r\n tempMenus,\r\n appraisalMenu\r\n } = useContext(AppContext);\r\n\r\n const classes = useStyles(portalSettings);\r\n\r\n const theme = useTheme();\r\n const [screenWidth, screenHeight] = useWindowSize();\r\n const [open, setOpen] = React.useState((localStorage.getItem('_sideBarIsOpen_') || '').toUpperCase() === 'TRUE' || false);\r\n const [state, setState] = React.useState({\r\n isError404: false,\r\n WorkflowJobs: []\r\n });\r\n const [searchAnchorEl, setSearchAnchorEl] = React.useState(null);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [openSign, setOpenSign] = React.useState(false);\r\n const isCommunicatorAllowed = AppStorage.getCommunicatorAllowed();\r\n const isInvoiceAllowed = AppStorage.getInvoiceAllowed();\r\n const isReportingAllowed = AppStorage.getReportingAllowed();\r\n const isWIPAllowed = AppStorage.getWIPAllowed() && portalSettings.portalSettingeWIPEnabled;\r\n let menuPermissionCounter = isCommunicatorAllowed + isInvoiceAllowed + isReportingAllowed + isWIPAllowed;\r\n let history = useHistory();\r\n const isReportingAgedMeasureAllowed = AppStorage.getReportingAgedMeasureAllowed();\r\n const isReportingPartsAllowed = AppStorage.getReportingPartsAllowed();\r\n\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n let isAdmin = userRoles.includes('admin');\r\n const isInternal = userRoles.includes('internal');\r\n const isTechnician = userRoles.includes('technician');\r\n const currentMenus = useMemo(() => {\r\n let menus = getMenuForRole(userRoles, loggedIn);\r\n // if (menuPermissionCounter > 1) {\r\n // let firstmenu = menus.find((p) => p.children.length > 0);\r\n // setState((st) => ({ ...st, [`${firstmenu.label}`]: true }));\r\n // }\r\n\r\n if (isWIPAllowed) {\r\n let dashMenus = [];\r\n if (tempMenus.menus.length > 0) {\r\n dashMenus = tempMenus.menus.map((x) => {\r\n return {\r\n label: `${x.label}`,\r\n path: `/dashboard/${x.id}?workFlowId=${x.id}&workFlowName=${x.label}`,\r\n exact: true,\r\n authType: 1,\r\n component: () => {\r\n return ;\r\n }\r\n };\r\n });\r\n }\r\n if (menuPermissionCounter == 1) {\r\n let isDash = menus.findIndex((p) => p.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus.menus.length > 0 && isDash >= 0) {\r\n menus[isDash].children = dashMenus;\r\n }\r\n } else {\r\n let iseWIPMenu = menus.findIndex((p) => p.label === 'eWIP');\r\n let isDash = menus[iseWIPMenu]?.children?.findIndex((p) => p?.isDynamicChildren === 'eWipDashboard');\r\n if (tempMenus?.menus?.length > 0 && isDash >= 0) {\r\n menus[iseWIPMenu].children[isDash].children = dashMenus;\r\n }\r\n }\r\n }\r\n if (isReportingAllowed) {\r\n let ReportsIndex = InternalMenusToConvertDynamic.findIndex((m) => m.label == 'Reports');\r\n let findAgedMeasureMenuIndex = InternalMenusToConvertDynamic[ReportsIndex]?.children?.findIndex((m) => m.label == 'Aged Measures');\r\n let tempAgedMeasureChildren = InternalMenusToConvertDynamic[ReportsIndex]?.children[findAgedMeasureMenuIndex]?.children;\r\n const agedMeasureMenus = [];\r\n const PartsMenus = [];\r\n const AppraisalMenus = [];\r\n\r\n if (reportingMenus.menus.length > 0) {\r\n let menusFromAPI = reportingMenus.menus;\r\n if (tempAgedMeasureChildren?.length > 0) {\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n for (let i = 0; i < tempAgedMeasureChildren?.length; i++) {\r\n if (tempAgedMeasureChildren[i].label === menusFromAPI[j].label) {\r\n agedMeasureMenus.push({\r\n ...tempAgedMeasureChildren[i],\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel\r\n });\r\n }\r\n }\r\n }\r\n }\r\n for (let j = 0; j < menusFromAPI.length; j++) {\r\n if (menusFromAPI[j].parentMenu == 'Part') {\r\n PartsMenus.push({\r\n exact: true,\r\n authType: 1,\r\n path: menusFromAPI[j].path,\r\n label: menusFromAPI[j].menuLabel,\r\n component: () => {\r\n return ;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu > -1) {\r\n if (isReportingAgedMeasureAllowed || isReportingPartsAllowed) {\r\n let isReportingMenu = menus.findIndex((p) => p.label === 'Reports');\r\n if (isReportingMenu >= 0) {\r\n let agedMeasuresIndex = menus[isReportingMenu]?.children.findIndex((p) => p.label === 'Aged Measures');\r\n let partsIndex = menus[isReportingMenu]?.children.findIndex((p) => p.label === 'Parts');\r\n if (isReportingAgedMeasureAllowed && agedMeasuresIndex >= 0) {\r\n menus[isReportingMenu].children[agedMeasuresIndex].children = agedMeasureMenus.length > 0 ? agedMeasureMenus : [];\r\n }\r\n if (isReportingPartsAllowed && partsIndex >= 0) {\r\n menus[isReportingMenu].children[partsIndex].children = PartsMenus.length > 0 ? PartsMenus : [];\r\n }\r\n }\r\n }\r\n }\r\n\r\n // if (appraisalMenu.menus.length > 0) {\r\n // let aprrmenusFromAPI = appraisalMenu.menus;\r\n // for (let j = 0; j < aprrmenusFromAPI.length; j++) {\r\n // if (aprrmenusFromAPI[j].parentMenu == 'Appraisal') {\r\n // AppraisalMenus.push({\r\n // exact: true,\r\n // authType: 1,\r\n // path: aprrmenusFromAPI[j].path,\r\n // label: aprrmenusFromAPI[j]?.menuLabel || aprrmenusFromAPI[j]?.label || '',\r\n // component: () => {\r\n // return ;\r\n // }\r\n // });\r\n // }\r\n // }\r\n // }\r\n // let isAppraisalMenu = menus.findIndex((p) => p.label === 'Appraisal');\r\n // menus[isAppraisalMenu].children = AppraisalMenus.length > 0 ? AppraisalMenus : [];\r\n }\r\n return menus;\r\n }, [loggedIn, tempMenus, reportingMenus]);\r\n\r\n const handleDrawerOpen = (isFlag) => {\r\n if (isFlag == true) {\r\n localStorage.setItem('_sideBarIsOpen_', true);\r\n }\r\n setOpen(true);\r\n };\r\n\r\n const handleDrawerClose = (isFlag) => {\r\n if (isFlag == true) {\r\n localStorage.setItem('_sideBarIsOpen_', false);\r\n }\r\n\r\n setOpen(false);\r\n };\r\n\r\n const handleClick = (item) => {\r\n setState((st) => ({ ...st, [item]: !st[item] }));\r\n handleDrawerOpen();\r\n };\r\n\r\n const getWipDataById = async (wipNo) => {\r\n const res = await getDataByEwipNo(wipNo);\r\n if (res.success) {\r\n setState((st) => ({ ...st, WorkflowJobs: res.data.jobsDetails }));\r\n }\r\n };\r\n\r\n const handleChange = (event) => {\r\n if (event.target.value.length > 4) {\r\n getWipDataById(event.target.value);\r\n setSearchAnchorEl(event.currentTarget);\r\n } else {\r\n setSearchAnchorEl(null);\r\n }\r\n };\r\n\r\n const handleCloseSearch = (data) => {\r\n localStorage.setItem('currentWorkflowId', data.workFlowID);\r\n history.push(`/Job/${data.headerRecordID}/${data.workFlowID}`);\r\n setSearchAnchorEl(null);\r\n setState((st) => ({ ...st, WorkflowJobs: [] }));\r\n };\r\n\r\n const handler = (children, isFiltered, isIcon) => {\r\n let currentNav = children;\r\n // isFiltered ? _.orderBy(children, [(c) => c.navigationMenuLabel.toLowerCase()], ['asc']) : children;\r\n return currentNav?.map((subOption, index) => {\r\n if (!subOption.children) {\r\n return (\r\n \r\n
\r\n 1200 ? handleDrawerOpen : !open ? handleDrawerOpen : handleDrawerClose}\r\n >\r\n {isIcon ? (\r\n \r\n {subOption.icon}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {!open && !isIcon ? : ''}\r\n {subOption.label}\r\n \r\n \r\n
\r\n
handleClick(subOption.label)} title={subOption.label}>\r\n {isIcon ? (\r\n \r\n {subOption.icon}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {!open && !isIcon ? : ''}\r\n {subOption.label}\r\n \r\n {state[subOption.label] ? : }\r\n \r\n \r\n
\r\n {handler(subOption.children, true, false)}\r\n \r\n
\r\n {showTopNavAndMenu && (\r\n
\r\n \r\n \r\n \r\n {loggedIn && (\r\n handleDrawerOpen(true)}\r\n edge=\"start\"\r\n style={{ padding: '0px', marginLeft: '7px' }}\r\n className={clsx(classes.menuButton, {\r\n [classes.hide]: open\r\n })}\r\n >\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {loggedIn && !isAdmin && isWIPAllowed && !isTechnician && (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n WIP No\r\n \r\n \r\n Vehicle Reg\r\n \r\n \r\n Customer Name\r\n \r\n \r\n Workflow\r\n \r\n \r\n Return Reason\r\n \r\n \r\n Branch\r\n \r\n \r\n Due Date In\r\n \r\n \r\n \r\n \r\n {state.WorkflowJobs.map((w, index) => {\r\n return (\r\n handleCloseSearch(w)}>\r\n \r\n {w.wipNumber}
\r\n \r\n \r\n {w.regNumber}
\r\n \r\n \r\n {w.customer}
\r\n \r\n \r\n {w.workflow}
\r\n \r\n \r\n {w.returnReason}
\r\n \r\n \r\n {w.branch}
\r\n \r\n \r\n {formatters.DateTimeFormatter(w.dateDueIn)}
\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {loggedIn ? (\r\n
\r\n {/*
\r\n {isTopNav ? (\r\n hideShowTopNav(false)}\r\n toolTipTitle=\"Hide Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n ) : (\r\n hideShowTopNav(true)}\r\n toolTipTitle=\"Show Portal Info\"\r\n IconColor=\"white\"\r\n />\r\n )}\r\n
*/}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {displayName}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {!isAdmin && (\r\n \r\n )}\r\n */}\r\n setState((st) => ({ ...st, openSetting: true }))}\r\n className={classes.labelBtn}\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
Login\r\n \r\n )}\r\n
\r\n handleDrawerClose(true)} className={classes.ChevronRightIconBtn}>\r\n {theme.direction === 'rtl' ? : }\r\n \r\n
\r\n \r\n \r\n {handler(\r\n currentMenus.filter((m) => !m.hidden),\r\n false,\r\n true\r\n )}\r\n
\r\n \r\n )}\r\n \r\n {showTopNavAndMenu && }\r\n {/* 775 ? 'none' : 'block',\r\n marginTop: -15\r\n // backgroundColor: portalSettings.portalMenuBarBackgroundColour,\r\n // color: portalSettings.portalMenuBarTextColour\r\n }}\r\n >\r\n \r\n */}\r\n\r\n {/* {renderRoutes(currentMenus)} */}\r\n \r\n {currentMenus.map((m, i) => {\r\n return m.children ? (\r\n m.children.map((a) => {\r\n let aChildpath = [];\r\n if (a.path) {\r\n aChildpath = a.path?.split('?');\r\n }\r\n return a.children ? (\r\n a.children.map((b) => {\r\n let bChildpath = [];\r\n if (b.path) {\r\n bChildpath = b.path?.split('?');\r\n }\r\n\r\n return b.children ? (\r\n b.children.map((c) => {\r\n let cChildpath = [];\r\n if (c.path) {\r\n cChildpath = c.path?.split('?');\r\n }\r\n\r\n return ;\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })\r\n ) : (\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n SESSION TIMEOUT\r\n
\r\n
\r\n Your session is about to timeout in {counter} seconds\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default IdleTimeOutHandler;\r\n","import { PhoneIphone, AccessTime, Email } from '@material-ui/icons';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport { BrowserRouter, NavLink } from 'react-router-dom';\r\nimport AppContext from '../../App/AppContext';\r\nimport { Navbar } from '../Root/Navbar';\r\nimport TreeImgLogo from '../../Components/_shared/treeImgesLogo';\r\nimport { useWindowSize } from '../Controls/ScreenResolution';\r\nimport MiniDrawer from '../Root/LeftDrawer';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport IdleTimeOutHandler from '../Root/sessionClose';\r\nimport { AppStorage } from '../Service/storage-service';\r\n// import { useWindowSize } from '../../../Core/Controls/ScreenResolution';\r\n\r\nexport let Header = (props) => {\r\n const { portalSettings, showTopNavAndMenu, loggedIn, isTopNav, getUserPreference } = useContext(AppContext);\r\n const [WindowWidths, WindowHeights] = useWindowSize();\r\n const [menuType, setMenuType] = useState('T');\r\n const img = !!portalSettings.portalSettingMainLogo ? portalSettings.portalSettingMainLogo : `${process.env.PUBLIC_URL}/${portalSettings.portalSettingLogo}`;\r\n const [isActive, setIsActive] = useState(true);\r\n const [isLogout, setLogout] = useState(false);\r\n\r\n const navBarPreferences = () => {\r\n if (localStorage.getItem('_AppbarLocation_') && localStorage.getItem('_AppbarLocation_') != 'undefined') {\r\n return localStorage.getItem('_AppbarLocation_');\r\n } else {\r\n return portalSettings.portalSettingMenuType;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setMenuType(navBarPreferences());\r\n }, [localStorage.getItem('_AppbarLocation_')]);\r\n\r\n const handleLogout = () => {\r\n AppStorage.performLogout();\r\n window.location = '/';\r\n };\r\n\r\n return (\r\n \r\n {AppStorage.isLoggedIn() ? (\r\n {\r\n setIsActive(true);\r\n }}\r\n onIdle={() => {\r\n setIsActive(false);\r\n }}\r\n onLogout={() => {\r\n setLogout(true);\r\n }}\r\n Logout={handleLogout}\r\n />\r\n ) : null}\r\n \r\n {showTopNavAndMenu && (\r\n
\r\n \r\n 
\r\n \r\n {[\r\n { text: 'Call US', value: portalSettings.portalSettingCallUs, icon: PhoneIphone, link: 'tel:' + portalSettings.callUs },\r\n { text: 'Opening Time', value: portalSettings.portalSettingOpeningTime, icon: AccessTime },\r\n {\r\n text: 'Email US',\r\n value: portalSettings.portalSettingEmailUs,\r\n icon: Email,\r\n link: 'mailto:' + portalSettings.portalSettingEmailUs + '?subject=eWIP Query',\r\n isDynamicDisplay: true\r\n }\r\n ].map((c, i) => (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
750 ? 30 : 0 }}>\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","import React, { useLayoutEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport langLabel from '../../../Lang.Labels.json';\r\n\r\nexport const Customi18 = () => {\r\n const { t, i18n } = useTranslation();\r\n // const setLanguage = (langCode) => {\r\n // i18n.changeLanguage(langCode || 'en');\r\n // };\r\n\r\n return { t, i18n, langLabel };\r\n};\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import i18n from 'i18next';\r\nimport Backend from 'i18next-http-backend';\r\nimport LanguageDetector from 'i18next-browser-languagedetector';\r\nimport { initReactI18next } from 'react-i18next';\r\n// import temp from '/locales/en/common.json';\r\n\r\nlet lngs = ['en', 'pl'];\r\n// array will have exact name of files inside public/locales/[lang code]\r\nlet localesFiles = ['common', 'navbar'];\r\n\r\n// resource will be populated by above arrays - lang and locales files.\r\nconst resources = {};\r\n\r\nlngs.forEach((lng) => {\r\n resources[lng] = {};\r\n Promise.all(\r\n localesFiles.map((fileName) => {\r\n return fetch(`/locales/${lng}/${fileName}.json`)\r\n .then((resp) => resp.json())\r\n .then((resJson) => [fileName, resJson]);\r\n })\r\n ).then((fileNameJsonList) => {\r\n fileNameJsonList.forEach((nmRes) => {\r\n let resJson = nmRes[1];\r\n let tempObj = {};\r\n Object.keys(resJson).forEach((k) => {\r\n tempObj[k.replace(/\\s+/, '')] = resJson[k];\r\n });\r\n resources[lng][nmRes[0]] = tempObj;\r\n });\r\n });\r\n});\r\n\r\ni18n\r\n // load translation using http -> see /public/locales\r\n // learn more: https://github.com/i18next/i18next-http-backend\r\n .use(Backend)\r\n // detect user language\r\n // learn more: https://github.com/i18next/i18next-browser-languageDetector\r\n .use(LanguageDetector)\r\n // pass the i18n instance to react-i18next.\r\n .use(initReactI18next)\r\n // init i18next\r\n // for all options read: https://www.i18next.com/overview/configuration-options\r\n .init({\r\n resources,\r\n\r\n // Set default namespace\r\n // defaultNS: 'common',\r\n\r\n lng: 'en',\r\n // debug: true,\r\n // whitelist: Languages,\r\n interpolation: {\r\n escapeValue: false // not needed for react as it escapes by default\r\n }\r\n });\r\n\r\nexport default i18n;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './App/index.css';\r\nimport App from './App/App.jsx';\r\nimport reportWebVitals from './App/reportWebVitals';\r\nimport './App/i18n';\r\nimport PackageJson from '../package.json';\r\nimport { AppStorage } from './Core/Service/storage-service';\r\nimport { createTheme, ThemeProvider } from '@material-ui/core';\r\n\r\nconst theme = createTheme({\r\n typography: {\r\n fontFamily: 'Montserrat, Arial'\r\n }\r\n});\r\nconst DevApp = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst ProdApp = () => {\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nwindow._ENV_ = Object.assign(window._ENV_ || {}, { app_version: PackageJson.version });\r\nconsole.log(window._ENV_, 'window._ENV_');\r\nconsole.log('is Logged In', AppStorage.isLoggedIn());\r\nif (AppStorage.isLoggedIn() && window._ENV_.app_version !== AppStorage.getLoggedInUIVersion()) {\r\n AppStorage.performLogout();\r\n}\r\n\r\nReactDOM.render(process.env.NODE_ENV === 'production' ? : , document.getElementById('root'));\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}