);\n}\n\nexport const SplitPanelLeft = ({children, ...props}) => {\n const topRef = useRef();\n const {clientWidth, setClientWidth} = useContext(SplitPaneContext); \n\n useEffect(() => {\n if (!clientWidth) {\n setClientWidth(topRef.current.clientWidth / 2);\n return;\n }\n\n topRef.current.style.minWidth = clientWidth + 'px';\n topRef.current.style.maxWidth = clientWidth + 'px';\n }, [clientWidth, setClientWidth])\n\n return (\n
\n {children}\n \n );\n};\n\nexport const SplitPanelTop = ({children, ...props}) => {\n const topRef = useRef();\n const {clientHeight, setClientHeight} = useContext(SplitPaneContext);\n\n useEffect(() => {\n if (!clientHeight){\n setClientHeight(topRef.current.clientHeight);\n return;\n }\n\n topRef.current.style.minHeight = `${clientHeight}px`;\n topRef.current.style.maxHeight = `${clientHeight}px`;\n }, [clientHeight, setClientHeight])\n\n return (\n
\n {children}\n \n );\n};","import React, { useCallback, useContext } from \"react\";\nimport { Toolbar, Box, debounce } from \"@material-ui/core\";\nimport { ToolbarButton, useToolbarStyle } from \"../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faRefresh } from \"@fortawesome/free-solid-svg-icons\";\nimport { DeviceSearchContext, useDeviceContext } from \"./devices.main\";\nimport { QuickLookup } from \"../../controls/search.box\";\n\nexport const DevicesToolbar = (props) => {\n const {handleAdd, handleRefresh, ...other} = props;\n const cls = useToolbarStyle();\n const deviceCntx = useDeviceContext();\n const deviceSearchCntx = useContext(DeviceSearchContext);\n \n // const callAddRequest = useCallback(() => {\n // if (!deviceCntx) return;\n // if (deviceCntx.NewRequest && typeof deviceCntx.NewRequest === 'function'){\n // deviceCntx.NewRequest();\n // }\n // }, [deviceCntx]);\n\n const callRefreshList = useCallback(() => {\n if (!deviceCntx) return;\n if (deviceCntx.RefreshDeviceList && typeof deviceCntx.RefreshDeviceList === 'function'){\n deviceCntx.RefreshDeviceList();\n }\n }, [deviceCntx]);\n\n const handleSearch = debounce((val) => {\n deviceSearchCntx && deviceSearchCntx.setSearchValue(val || ' ');\n }, 800);\n\n return (\n
\n {/* }\n disabled={!deviceCntx?.isSelected}\n /> */}\n handleSearch(e.target.value)} \n />\n }\n />\n \n );\n}\n","import React, { \n Fragment, useState, useEffect, useCallback, createContext, useContext \n} from 'react';\nimport { WrapperPaper } from '../../controls/shared.components';\nimport { DevicesToolbar } from './devices.toolbar';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { DeviceSplitView } from './device.splitview';\n\nexport const Devices = props => {\n const { ...other } = props;\n const [showAlert, setShowAlert] = useState({\n open: false, severity: 'success', message: '',\n onSnackBarClose: () => {},\n });\n const dappCntx = useDappContext();\n\n const [searchValue, setSearchValue] = useState();\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Devices\", () => {});\n }, [dappCntx]);\n\n const handleError = useCallback(({message}) => {\n setShowAlert({\n ...showAlert, open: true, message: message, severity: \"error\",\n onSnackBarClose: {...showAlert, open: false, message: \"random\"}\n })\n }, [showAlert])\n\n return (\n
\n \n \n \n \n \n \n \n );\n};\n\nconst DeviceContext = createContext();\n\nconst DeviceContextProvider = ({children}) => {\n const [isSelected, setIsSelected] = useState(false);\n const [searchVal, setSearchVal] = useState();\n \n const NewRequest = undefined;\n\n const RefreshDeviceList = undefined;\n\n return (\n
\n {children}\n \n )\n}\n\nexport const useDeviceContext = () => useContext(DeviceContext);\n// this is device search context that holds the value that user types in\nexport const DeviceSearchContext = createContext();","import React, { Fragment, useState, useEffect, useCallback, useReducer, useContext } from 'react';\nimport { LinearWait, rowsperpage } from '../../controls/shared.components';\nimport { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, makeStyles, TablePagination, Tooltip, Typography } from '@material-ui/core';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faComputer, /*faCircleInfo*/ } from \"@fortawesome/free-solid-svg-icons\";\nimport { SelectedDeviceContext } from './device.splitview';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { DeviceSearchContext, useDeviceContext } from './devices.main';\n// import { Badge } from '@material-ui/core/Badge';\nimport { indigo } from '@material-ui/core/colors';\n\nconst initLoadParams = {\n GetTotal: true,\n PageSize: rowsperpage[0],\n PageNum: 1,\n PageToken: ' ',\n AscDesc: 'Asc',\n SortField: 'DeviceName',\n DeviceName: ' ',\n };\n \nconst initState = {page: 0, pageSize: rowsperpage[0], loading: true};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {...state, page: action.page};\n case \"pageSize\":\n return {...state, pageSize: action.pageSize};\n case \"pageToken\": {\n return {...state, pageToken: action.pageToken};\n }\n case \"deviceList\": {\n return {...state, deviceList: action.deviceList};\n }\n case \"loading\": {\n return {...state, loading: action.loading};\n }\n default:\n throw new Error();\n }\n}\n\nexport const DeviceList = (props) => {\n const {onError} = props;\n const [pagination, dispach] = useReducer(pageReducer, initState);\n const [xuser, setXuser] = useState(); \n const [apiparms, setApiparms] = useState();\n const dappCntx = useDappContext();\n const selectedDeviceCntx = useContext(SelectedDeviceContext);\n const deviceSearchCntx = useContext(DeviceSearchContext);\n const [bridgeName, setBridgeName] = useState();\n const cls = useListStyles();\n const {id} = useParams(); \n const deviceCntx = useDeviceContext();\n const history = useHistory();\n\n const devices = useDataFromBridge({ \n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgeName,\n });\n\n const handleSelect = useCallback(({record}) => {\n selectedDeviceCntx.setSelectedDevice(record);\n deviceCntx.setIsSelected(true);\n }, [deviceCntx, selectedDeviceCntx]);\n\n useEffect(() => {\n if (!!id || dappCntx.user?.user?.UserType === 'User'){\n setApiparms({...initLoadParams, ContactID: id || dappCntx.user?.user?.ContactID});\n setBridgeName(\"Devices by ContactID\");\n } else {\n setApiparms({...initLoadParams});\n setBridgeName(\"All Devices\");\n }\n }, [id, dappCntx])\n\n const handlePageSizeChange = useCallback((pageSize) => {\n dispach({type: \"loading\", loading: true});\n setApiparms({\n ...apiparms,\n PageSize: pageSize,\n PageNum: 1,\n PageToken: ' ' /*pagetoken*/,\n });\n },\n [apiparms],\n);\n\n const handlePageChange = useCallback((page) => {\n dispach({type: \"loading\", loading: true});\n setApiparms({ ...apiparms, PageNum: ++page, PageToken: ' ' /*pagetoken*/ });\n },\n [apiparms],\n);\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx])\n\n useEffect(() => {\n if (!devices) return;\n dispach({type: \"loading\", loading: false});\n\n if (!devices.success){\n onError({message: devices.data.Message || devices.data.message})\n }\n\n if (!!devices.data?.error) {\n onError({message: devices.data?.error?.message});\n return;\n }\n\n let list = devices.data.records.map((row, indx) => {\n return {...row, id: indx, \"Device ID\": (row[\"Device ID\"] === \"-1\" && (-900 -indx)) || row[\"Device ID\"]}\n });\n dispach({type: 'pageToken', pageToken: devices.data.metadata?.nextPageToken || initLoadParams.PageToken});\n dispach({type: 'deviceList', deviceList: list});\n\n // eslint-disable-next-line\n }, [devices]);\n\n useEffect(() => {\n if (!pagination.deviceList) return;\n handleSelect({record: pagination.deviceList[0]});\n // eslint-disable-next-line\n }, [pagination.deviceList]);\n\n const handleNewRequest = useCallback(() => { \n let selectedId = selectedDeviceCntx.selectedDevice && selectedDeviceCntx.selectedDevice[\"Device ID\"];\n selectedId &&\n history.push(`/servicerequest/add/${selectedId}?type=device`);\n }, [history, selectedDeviceCntx.selectedDevice]);\n\n const handleRefresh = useCallback(() => {\n dispach({type: \"loading\", loading: true});\n dispach({type: \"page\", page: 0});\n setApiparms({...apiparms, PageNum: 1, PageToken: \" \"});\n }, [apiparms]);\n\n useEffect(() => {\n if (!deviceCntx) return;\n if (!deviceCntx.NewRequest){\n deviceCntx.NewRequest = handleNewRequest;\n }\n if (!deviceCntx.RefreshDeviceList){\n deviceCntx.RefreshDeviceList = handleRefresh;\n }\n // eslint-disable-next-line\n }, [deviceCntx])\n\n useEffect(() => {\n if (!deviceSearchCntx) return;\n if (!apiparms || !apiparms?.PageSize) return;\n if (!deviceSearchCntx?.searchValue) return;\n dispach({type: \"loading\", loading: true});\n dispach({type: \"page\", page: 0});\n setApiparms({\n ...apiparms, \n DeviceName: deviceSearchCntx?.searchValue || ' ',\n PageNum: 1\n });\n //eslint-disable-next-line\n }, [deviceSearchCntx]);\n\n return (\n
\n \n {(pagination.loading && \n {pagination.deviceList?.map((dev, indx) => {\n return (\n handleSelect({ record: dev })}\n selected={dev[\"Device ID\"] === (selectedDeviceCntx?.selectedDevice && selectedDeviceCntx?.selectedDevice[\"Device ID\"])}\n >\n \n \n \n \n {dev['Device Name']}\n \n }\n secondary={dev['Device Type']}\n />\n \n \n \n {/* \n \n */}\n \n \n \n \n );\n })}\n
) || \n \n \n No Devices Found\n \n )}\n \n {\n dispach({type: \"pageSize\", pageSize: e.target.value});\n dispach({type: \"page\", page: 0});\n handlePageSizeChange(e.target.value);\n }}\n onPageChange={(e, page) => {\n dispach({type: \"page\", page: page});\n handlePageChange(page);\n }}\n />\n \n );\n}\n\nconst useListStyles = makeStyles(() => ({\n footer: {\n '& .MuiSvgIcon-root': {fontSize: \".7rem !important\"},\n '& .MuiTablePagination-caption': {fontSize: \".7rem !important\"},\n '& .MuiTablePagination-input': {fontSize: \".7rem !important\"},\n '& .MuiTablePagination-toolbar': {\n backgroundColor: '#55bff2', //'#7788BE',\n color: 'window',\n '& .MuiSelect-icon': {\n color: 'window',\n }\n },\n },\n listitem: {\n '& .MuiTypography-body2':{\n fontSize: \"0.775rem\",\n lineHeight: 1\n },\n '& .MuiTypography-body1':{\n fontSize: \"0.875rem\",\n lineHeight: 1\n },\n // '&:nth-child(2n)': {\n // backgroundColor: '#7788BE',\n // color: 'window',\n // }, \n },\n nodata: {\n display: \"flex\",\n textAlign: \"center\",\n width: \"inherit\",\n height: \"inherit\",\n margin: \"auto\",\n alignItems: \"center\",\n justifyContent: \"center\",\n }\n}));\n\n","import { CoreForm } from \"@kineticdata/react\";\nimport { Box, Typography } from \"@material-ui/core\";\nimport React, { useContext, useEffect, useReducer, } from \"react\";\nimport { KappFormLayout, KappPending, useDeviceViewStyle } from \"../../controls/shared.components\";\nimport { SelectedDeviceContext } from \"./device.splitview\";\n\nexport const DeviceViewForm = (props) => {\n const {onError} = props;\n const selectedDeviceCntx = useContext(SelectedDeviceContext);\n const [formParams, dispatch] = useReducer(paramsReducer, null);\n const cls = useDeviceViewStyle();\n\n useEffect(() => {\n if (!selectedDeviceCntx || !selectedDeviceCntx.selectedDevice) return;\n\n const getRightType = () => {\n let devid = String(selectedDeviceCntx.selectedDevice[\"Device ID\"]).trim();\n let kasid = String(selectedDeviceCntx.selectedDevice[\"Kaseya Machine Group ID\"]).trim();\n let cntid = String(selectedDeviceCntx.selectedDevice[\"NCentral Device ID\"]).trim();\n\n if (parseInt(devid) > 0)\n return {type: \"device\", id: selectedDeviceCntx.selectedDevice[\"Device ID\"]};\n\n if (kasid.length > 0 && kasid !== '-1')\n return {type: \"kaseya\", id: selectedDeviceCntx.selectedDevice[\"Kaseya Machine Group ID\"]}; \n \n if (cntid.length > 0 && cntid !== '-1')\n return {type: \"ncentral\", id: selectedDeviceCntx.selectedDevice[\"NCentral Device ID\"]};\n }\n\n dispatch(getRightType());\n\n }, [selectedDeviceCntx])\n\n return (\n
\n {(formParams &&\n \n ) || \n \n No Device Selected\n }\n \n );\n}\n\nconst paramsReducer = (state, action) => {\n switch (action.type) {\n case \"device\": {\n return {DeviceID: `${action.id}`}\n }\n case \"kaseya\": {\n return {KaseyaMachineGroupID: action.id}\n }\n case \"ncentral\": {\n return {NCentralDeviceID: action.id}\n }\n default: \n throw new Error(\"Invalid type/state for devices form\");\n }\n}\n","import React, { useState, createContext, useCallback } from \"react\";\nimport { SplitPane, SplitDivider, SplitPanelTop, SplitPanelLeft } from \"../../controls/splitpane/split.pane\";\nimport { Fab, makeStyles, Tooltip, Typography } from \"@material-ui/core\";\nimport { useSplitStyle } from \"../../controls/shared.components\";\nimport { DeviceList } from \"./device.list\";\nimport { DeviceViewForm } from \"./device.view\";\nimport { ServiceRequestByDevice } from \"../services requests/service.request.main\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faAdd } from \"@fortawesome/free-solid-svg-icons\";\nimport { useDeviceContext } from \"./devices.main\";\n\nexport const DeviceSplitView = (props) => {\n const {onError} = props;\n const [selectedDevice, setSelectedDevice] = useState();\n const cls = useSplitStyle();\n const fabCls = useFabStyles(); \n const deviceCntx = useDeviceContext();\n\n const callAddRequest = useCallback(() => {\n if (!deviceCntx) return;\n if (deviceCntx.NewRequest && typeof deviceCntx.NewRequest === 'function'){\n deviceCntx.NewRequest();\n }\n }, [deviceCntx]);\n\n return (\n
\n \n \n \n \n \n \n \n {/* \n \n \n \n \n */}\n \n \n \n \n );\n};\n\nexport const SelectedDeviceContext = createContext();\n\nconst useFabStyles = makeStyles((theme) => ({\n fab: {\n position: 'absolute',\n bottom: theme.spacing(14),\n right: theme.spacing(6),\n zIndex: theme.zIndex.drawer + 100,\n },\n }));\n","import React, { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { Calendar, momentLocalizer } from \"react-big-calendar\";\nimport moment from \"moment\";\nimport { Backdrop, CircularProgress } from \"@mui/material\";\n\nexport const DappCalendar = (props) => {\n const {data, loading, ...moreprops} = props; \n const localizer = momentLocalizer(moment);\n const [currentView, setCurrentView] = useState();\n const [eventData, setEventData] = useState([]);\n const [dateRange, setDateRange] = useState();\n\n useEffect(() => {\n if (!data) return;\n\n let evtData = data.filter(rsd => rsd?.RequestedStartDate.length > 0)\n .map(sr => {\n let stDt = new Date(sr.RequestedStartDate);\n stDt = new Date(stDt.getFullYear(), stDt.getMonth(), stDt.getDate(), \n stDt.getHours(), stDt.getMinutes(), 0);\n\n let etDt = new Date(sr?.RequestedEndDate || sr.RequestStartDate);\n let isEOD = !sr.RequestEndDate; \n etDt = new Date(etDt.getFullYear(), etDt.getMonth(), etDt.getDate(), \n (isEOD && 16) || etDt.getHours(), (isEOD && 0) ||etDt.getMinutes(), 0);\n\n return {\n id: sr.IncidentID,\n title: `${sr.IncidentNo} - ${sr.ShortDescription}`,\n start: stDt,\n end: etDt,\n desc: sr.Description\n }\n });\n console.log(`the data size we're using: ${evtData.length}`);\n setEventData(evtData)\n\n }, [data])\n\n const handleRangeChange = useCallback((view) => {\n if (currentView === 'month'){\n setDateRange({start: view.start, end: view.end});\n } \n if (currentView === \"week\"){\n setDateRange({start: view[0], end: view[view.length]});\n }\n }, [currentView]);\n\n const handleOnView = useCallback((view) => {\n setCurrentView(view); \n }, []);\n\n return (\n \n {(loading && \n );\n}\n\nconst DappBackDrop = (props) => {\n return (\n theme.zIndex.drawer + 1}} {...props}>\n \n \n );\n}\n\n","import { Autocomplete, TextField } from \"@mui/material\";\nimport React from \"react\";\nimport { useDialogStyles } from \"../../modals/dialog.style\";\n\n\nexport const AssigneeDropDown = (props) => {\n const {formValues, handleAutoCompleteChange, assigneeData} = props;\n const diagStyles = useDialogStyles();\n\n return (\n option?.UserName || ' '}\n onChange={handleAutoCompleteChange}\n value={(formValues?.assignedTo && (assigneeData?.find(x => x.UserID === formValues.assignedTo) || null)) || null}\n renderInput={(params) =>\n \n {children}\n \n ) \n}\n\nexport const useServiceRequestContext = () => useContext(ServiceRequestContext);\n\nconst initLoadParams = {\n GetTotal: true,\n // AscDesc: 'DESC',\n // SortField: 'IncidentID',\n assignedTo: ' ',\n Status: 'Open',\n CustomerContactID: ' ',\n IncidentNo: ' ',\n SearchValue: ' ',\n IsRequestScheduled: ' ',\n PriorityLevel: ' ',\n RequestedStartDate: ' ',\n RequestedStopDate: ' ',\n OpenDateStart: ' ',\n OpenDateStop: ' ',\n RequestPriority: ' ',\n RequestType: ' ',\n TSMDepartmentID: ' ',\n DepartmentID: ' ', \n ReAssignmentTemplateID: ' ',\n IsAssigneeSharedOperator: ' ', \n IsVIP: ' ',\n PageToken: ' ',\n // PageSize: 1,\n PageNum: 1,\n SubClientID: ' ',\n };\n \n\nconst deviceParams = {\n GetTotal: true,\n PageToken: ' ',\n SortField: \"IncidentID\",\n AscDesc: \"desc\",\n} ","import { \n Dialog, DialogActions, DialogContent, Grid, Typography, useMediaQuery, useTheme,\n MenuItem, FormControlLabel\n} from \"@mui/material\";\nimport React, {Fragment, useCallback, useEffect, useRef, useState} from \"react\";\nimport { useDialogStyles } from \"../../modals/dialog.style\";\nimport { FilterDate, FilterDef, FilterDialogTitle, FilterFieldDef, FilterOKCancelButtons } from \"./filter.components\";\nimport { useFilterStyles } from \"../../modals/filter.styles\";\nimport { AssigneeDropDown } from \"./assignee.dropdown\";\nimport { useDappContext } from \"../../../auth/dapp.context\";\nimport { useTicketsContext } from \"../../incidents/incident.provider\";\nimport { useDataFromBridge } from \"../../../controls/custom.hooks\";\nimport { DropDownField } from \"./drop.down\";\nimport { DappToolbarSwitch } from \"../../../controls/shared.components\";\nimport { LoadFilter } from \"../../incidents/filter/filter.load\";\nimport { SaveFilter } from \"../../incidents/filter/filter.save\";\nimport { KineticWebAPICall } from \"../../../apicalls/contact.api\";\nimport { INCIDENT_FILTER_WEBAPI_SAVE } from \"../../../controls/dapp.constants\";\nimport { useServiceRequestContext } from \"./filter.provider\";\n\n// const PriotityLevelValues = [\n// {\"PriorityValue\": \"Priority1\"},\n// {\"PriorityValue\": \"Priority2\"},\n// {\"PriorityValue\": \"Priority3\"},\n// {\"PriorityValue\": \"Priority4\"}\n// ];\n\nconst RequestTypeValues = [\n {\"RequestTypeValue\": \"To Do\"},\n {\"RequestTypeValue\": \"Continuous Process Improvement\"},\n {\"RequestTypeValue\": \"Emergency\"},\n {\"RequestTypeValue\": \"General Service\"},\n {\"RequestTypeValue\": \"Priority Scoring Improvement\"},\n {\"RequestTypeValue\": \"Project\"},\n {\"RequestTypeValue\": \"Remote Work\"},\n {\"RequestTypeValue\": \"Site Visit\"}\n]\n\nconst RequestPriorityValues = [\n {\"RequestPriorityValue\": \"HIGH\"},\n {\"RequestPriorityValue\": \"LOW\"},\n {\"RequestPriorityValue\": \"NORMAL\"}\n]\n\nconst filterMapping = [\n {oldField: \"rcbHDAssignedTo\", newField: \"assignedTo\"},\n {oldField: \"FilterStartDate\", newField: \"OpenDateStart\"},\n {oldField: \"FilterEndDate\", newField: \"OpenDateStop\"},\n {oldField: \"RequestedStartDate\", newField: \"RequestedStartDate\"},\n {oldField: \"RequestedEndDate\", newField: \"RequestedStopDate\"},\n {oldField: \"cbShowScheduledRequests\", newField: \"IsRequestScheduled\"},\n {oldField: \"rcbHDDepartment\", newField: \"TSMDepartmentID\"},\n {oldField: \"rcbHDResponsibleDepartment\", newField: \"ResponsibleDepartmentID\"},\n {oldField: \"rcbHDFilterStatus\", newField: \"Status\"},\n {oldField: \"rcbRequestType\", newField: \"RequestType\"},\n {oldField: \"rcbRequestPriority\", newField: \"RequestPriority\"},\n {oldField: \"rcbPriorityLevel\", newField: \"PriorityLevel\"},\n // {oldField: \"rcbRequestTarget\", newField: \"IncidentTarget\"},\n {oldField: \"chkSharedServiceRequests\", newField: \"IsAssigneeSharedOperator\"},\n {oldField: \"rcbSubClient\", newField: \"SubClientID\"},\n];\n\nconst subCLientParams = {\n AscDesc: \"desc\",\n GetTotal : true,\n PageNum: 1,\n PageSize: 1000,\n SortField: \"ContactID\",\n SubClientContact: true,\n IncludeInactive: false,\n IsPending: false,\n PageToken: ' ', \n SearchValue: ' ', \n}\n\nexport const TicketFilterDialog = (props) => {\n const {showDialog, handleClose, handleOkClick} = props;\n const theme = useTheme();\n const diagSize = useMediaQuery(theme.breakpoints.down('md'));\n // const [formValues, setFormValues] = useState({});\n const [showAssigneeLkp, setShowAssigneeLkp] = useState(false);\n const [assigneeData, setAssigneeData] = useState();\n const [xuser, setXuser] = useState();\n const [apivals, setapivals] = useState();\n const [assigneeBridge, setAssigneeBridge] = useState(); \n const [deptsData, setDeptsData] = useState();\n const [ticketDeptsBridge, setTicketDeptsBridge] = useState();\n const [showFilter, setShowFilter] = useState(false);\n const [showSave, setShowSave] = useState(false);\n const [formVals, setFormVals] = useState();\n const diagStyles = useDialogStyles();\n const filterStyles = useFilterStyles();\n const dappCntx = useDappContext();\n const srvcContx = useTicketsContext(); \n // const [subclientList, setSubclientList] = useState();\n \n const titleEl = useRef();\n\n const srvcCntx = useServiceRequestContext();\n\n useEffect(() => {\n if (!apivals){\n setapivals({random: 0});\n setAssigneeBridge('TicketAssignee');\n setTicketDeptsBridge('TicketDepartments');\n }\n }, [apivals]);\n\n const handleCloseFilter = useCallback(() => {\n setShowSave(false);\n }, []);\n\n const showMessage = useCallback((props) => {\n const {severity, message} = props;\n srvcContx.setShowAlert({...srvcContx.showAlert, \n open: true, severity: severity, message: message,\n onSnackbarClose: () => { \n srvcContx.setShowAlert({...srvcContx.showAlert, open: false, message: \"random\"})\n },\n });\n }, [srvcContx]);\n\n const handleSaveFilter = useCallback((f2s) => {\n try {\n KineticWebAPICall({\n user: xuser, data: {Filter: f2s}, url: INCIDENT_FILTER_WEBAPI_SAVE\n }).then((response) => {\n showMessage({severity: \"success\", message: \"Filter saved\"});\n srvcContx.setSavedFilter(f2s);\n setShowSave(false);\n }).catch((error) => {\n showMessage({severity: \"error\", message: `Save filter failed: ${error}`});\n })\n } catch (exp) {\n showMessage({severity: \"error\", message: `Save filter failed with: ${exp}`});\n }\n\n }, [xuser, showMessage, srvcCntx]);\n\n const onClearFilter = useCallback(() => {\n srvcContx.setSavedFilter(null);\n srvcCntx.setFormValues({...srvcCntx.formValues, ...srvcCntx.InitFilterValues});\n srvcContx.setFilter(f => srvcCntx.initLoadParams);\n setFormVals(f => srvcCntx.InitFilterValues);\n }, [srvcCntx, srvcContx]);\n\n const onLoadFilter = useCallback(() => {\n console.log(`this is where we're loading the filter`);\n setShowFilter(true);\n }, []);\n\n const onClose = useCallback(() => {\n if (handleClose && typeof handleClose === 'function'){\n handleClose();\n }\n }, [handleClose])\n\n useEffect(() => {\n if (!formVals){\n setFormVals({\n ...formVals, \n ...srvcCntx.filter, \n OpenDateStart: ' ', //new Date(new Date(new Date().setMonth(new Date().getMonth())).setDate(1)).toJSON().split(\"T\")[0],\n OpenDateStop: ' ', //new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toJSON().split(\"T\")[0],\n });\n }\n\n if (!!srvcCntx.formValues && JSON.stringify(srvcCntx.formValues) !== '{}') return; \n srvcCntx.setFormValues({...srvcCntx.formValues, ...(srvcCntx?.filter || srvcCntx.InitFilterValues)});\n // console.log(`saved filter values: ${JSON.stringify(srvcCntx.filter)}`);\n }, [srvcCntx, srvcCntx.formValues, formVals]);\n\n const handleChange = useCallback((e) => {\n setFormVals({...formVals, [`${e.target.id || e.target.name}`]: e.target.value});\n }, [srvcCntx, formVals]);\n\n const handleSubmitFilter = useCallback(() => {\n if (handleOkClick && typeof handleOkClick === 'function'){\n srvcCntx.setFormValues({...srvcCntx.formValues, ...formVals});\n srvcCntx.setFilter({...srvcCntx.filter, ...formVals});\n handleOkClick({filterValues: {...formVals}});\n }\n }, [handleOkClick, srvcCntx, formVals]);\n\n useEffect(() => {\n // if (!dappCntx.sharedOperator) return;\n setShowAssigneeLkp( \n (dappCntx?.user?.user?.UserType !== \"User\") \n // && (dappCntx.sharedOperator && Number(dappCntx.sharedOperator.IsHDSharedOperator) === -1) \n );\n }, [dappCntx]);\n\n const onAutoCompleteChange = useCallback((e, value) => {\n setFormVals({...formVals, assignedTo: value?.UserID || ' '});\n }, [srvcCntx, formVals]); \n\n useEffect(() => {\n if (!dappCntx?.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx])\n \n const assignees = useDataFromBridge({\n xUser: xuser, apiValues: apivals,\n bridgedResourceName: assigneeBridge,\n });\n \n useEffect(() => {\n if (!assignees ) return;\n let simplified = assignees?.data?.records?.map((option) => {\n return { UserID: option?.[\"Assignee ID\"],\n UserName: `${option?.[\"Assignee DisplayName\"]}`}\n });\n setAssigneeData(simplified);\n }, [assignees]); \n\n const handleCheckChange = useCallback((e) => {\n srvcCntx.setFormValues({ ...srvcCntx.formValues, [`${e.target.id || e.target.name}`]: e.target.checked});\n }, [srvcCntx]);\n\n const departments = useDataFromBridge({\n xUser: xuser, apiValues: apivals,\n bridgedResourceName: ticketDeptsBridge,\n });\n\n useEffect(() => {\n if (!departments) return;\n setDeptsData(departments?.data?.records);\n }, [departments]);\n\n const applyValues2Filter = useCallback(() => {\n let flds = [];\n Object.entries(srvcCntx.formValues).map((fld) => {\n let fieldName = filterMapping.find(fm => fm.newField === fld[0])?.oldField;\n\n if (fieldName){\n flds.push({\n ...FilterFieldDef, \n WebControlName: `${fieldName}`,\n WebControlValue: fld[1],\n }); \n } \n return fieldName;\n });\n return flds;\n }, [srvcCntx]);\n\n // const subclients = useDataFromBridge({\n // xUser: xuser, apiValues: subCLientParams,\n // bridgedResourceName: \"All Contacts\"\n // });\n\n // useEffect(() => {\n // if (!subclients) return;\n // setSubclientList(subclients?.data?.records.sort());\n // }, [subclients])\n \n const applyFilterValues = useCallback((fields) => {\n let newFields = {};\n fields.map(fld => {\n let fieldName = !!fld && filterMapping.find(fm => fm.oldField === fld.WebControlName)?.newField;\n\n if (fieldName && fld?.WebControlValue !== '-1'){\n newFields = {\n ...newFields, \n [`${fieldName}`]: (fld.WebControlValue === '' && ' ') || \n (fieldName.match(/Date/gi)?.length > 0 ? new Date(fld.WebControlValue).toJSON().split('T')[0] : fld.WebControlValue)\n }; \n }\n \n return fieldName;\n });\n srvcCntx.setFormValues({...srvcCntx.formValues, ...newFields});\n }, [srvcCntx]);\n\n const hideFilter = useCallback(() => {\n setShowFilter(false);\n }, []);\n\n const onSaveFilter = useCallback(() => {\n let flt = { \n ...((!!srvcContx.savedFilter && srvcContx.savedFilter) || FilterDef), \n SearchPage: \"Request Grid\",\n SearchType: \"Request\",\n CCWebUserID: dappCntx.user.user.CCWebUserID,\n PrimaryContactID: dappCntx.user.user.PrimaryContactID,\n Fields: applyValues2Filter()\n };\n srvcContx.setSavedFilter(flt);\n\n setShowSave(!showSave);\n }, [showSave, applyValues2Filter, dappCntx, srvcContx]);\n\n const handleApplyFilter = useCallback((filterRecord) => {\n srvcContx.setSavedFilter(filterRecord);\n applyFilterValues(JSON.parse(filterRecord.Fields));\n hideFilter();\n }, [hideFilter, applyFilterValues, srvcContx]);\n\n const handleClearFilter = useCallback(() => {\n srvcCntx.setFormValues({...srvcCntx.formValues, ...srvcCntx.initLoadParams});\n setFormVals({...formVals, ...srvcCntx.initLoadParams});\n if (handleOkClick && typeof handleOkClick === 'function'){\n handleOkClick({filterValues: srvcCntx.initLoadParams});\n }\n }, [handleOkClick, srvcCntx]);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n","import React, { Fragment, useState, useEffect, useCallback, useContext } from 'react';\nimport { rowsperpage, WrapperPaper } from '../../controls/shared.components';\nimport { ServicesToolbar } from './services.toolbar';\nimport { useGridStyles } from '../../controls/datagrid.striped';\nimport { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';\nimport { useServicesColumns, useServicesColumnsShort } from './services.hook';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\nimport { ModalSelection } from '../modals/modal.selection';\nimport { useDappContext } from '../../auth/dapp.context';\nimport clsx from 'clsx';\nimport { useHistory, useLocation, useParams } from 'react-router-dom';\nimport { SelectedDeviceContext } from '../devices/device.splitview';\nimport { utils, writeFileXLSX } from 'xlsx';\nimport swal from 'sweetalert';\nimport { EXPORTALERTMSG } from '../../controls/dapp.constants';\nimport { DappCalendar } from './services.calendar';\nimport { TicketFilterDialog } from './filter/filter.dialog';\nimport { useServiceRequestContext } from './filter/filter.provider';\nimport { getDataUniversalExportFromBrdige } from \"../../apicalls/universal.api\";\n\nexport const ServiceRequests = props => {\n const { contactOnly, ...other } = props;\n const [toolbarStats, setToolbarStats] = useState();\n const [ticketType, setTicketType] = useState();\n const [openModal, setOpenModal] = useState(false);\n const [refresh, setRefresh] = useState();\n const [exportData, setExportData] = useState(false);\n const dappCntx = useDappContext();\n const history = useHistory();\n const [calendarView, setCalendarView] = useState();\n const [showFilter, setShowFilter] = useState(false);\n const [resetPage, setResetPage] = useState(false);\n\n const srvcCntx = useServiceRequestContext();\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: \"error\", message: \"\", onSnackBarClose: () => {}\n });\n\n const showError = useCallback(({message}) => {\n setShowAlert({ ...showAlert,\n open: true, severity: \"error\", message: message,\n onSnackBarClose: () => setShowAlert({open: false, message: \"random\"}),\n })\n }, [showAlert]);\n\n const handleAdd = () => {\n setTicketType(\"servicerequest\");\n setOpenModal(true);\n }\n\n const handleModalClose = useCallback((props) => {\n const {ok, selection} = props;\n setOpenModal(false);\n if (!ok) return;\n let type = selection.type;\n let space = (type !== 'primaryContact' && ' ') || '';\n let field = `${type.charAt(0).toUpperCase()}${type.slice(1)}${space}ID`;\n let id = selection.record[`${field}`]\n history.push(`/${ticketType}/add/${id}?type=${type}`);\n }, [ticketType, history]);\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Service Requests\");\n }, [dappCntx]) \n\n const handleRefresh = () => setRefresh(true);\n const finishRefresh = () => setRefresh(false);\n\n const handleSearch = useCallback((value) => {\n // console.log(`we'll be searching for: `, value);\n setResetPage(true);\n srvcCntx.setFilter({...srvcCntx.filter, SearchValue: (value === '' ? ' ' : value)});\n setTimeout(() => setResetPage(false), 500);\n }, [srvcCntx]);\n\n const handleExport = useCallback(() => {\n setExportData(true);\n }, []);\n\n const handleExportComplete = useCallback(() => {\n setExportData(false);\n }, []);\n\n const handleView = useCallback((props) => {\n setCalendarView(props);\n }, []);\n\n const handleFilter = () => setShowFilter(true); \n\n const handleFilterClose = () => {\n setShowFilter(false);\n }\n\n const handleOkFilter = useCallback((props) => {\n srvcCntx.setFilter({...srvcCntx.filter, ...props.filterValues});\n setResetPage(true);\n setShowFilter(false);\n // setTimeout(() => setResetPage(false), 500);\n }, [srvcCntx]);\n\n const handleStatusChange = useCallback((props) => {\n setResetPage(true);\n srvcCntx.setFilter({...srvcCntx.filter, Status: props});\n setTimeout(() => setResetPage(false), 500);\n }, [srvcCntx]);\n\n return (\n \n {/* */}\n \n \n \n */}\n \n );\n};\n\nexport const ServiceRequestList = ({\n setToolbarStats, handleError, contactOnly, \n refresh, finishRefresh, \n short, exportData, onExportDataComplete, calendarView,\n filterValue, assignedToMe, resetPage\n}) => {\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState();\n // const [exportParams, setExportParams] = useState(undefined);\n const [griddata, setGridData] = useState([]);\n const [xuser, setXuser] = useState();\n const [bridgeName, setBridgeName] = useState();\n const [calendarData, setCalendarData] = useState(); \n const [calendarApiParams, setCalendarApiParams] = useState(undefined);\n const {id} = useParams();\n const selectedDeviceCntx = useContext(SelectedDeviceContext);\n const [totalRecs, setTotalRecs] = useState(0);\n const [exportedData, setExportedData] = useState([]);\n const [exportDataReady, setExportDataReady] = useState();\n const MAX_ROWS_4_EXPORT = 2000;\n\n const dappCntx = useDappContext();\n\n const srvcCntx = useServiceRequestContext();\n\n const handleDataLoadCallback = useCallback(() => {\n setLoading(true);\n setGridData([]);\n }, []);\n\n const srvcreqs = useDataFromBridge({ \n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgeName,\n callback: handleDataLoadCallback,\n });\n\n // const srvcreqs2export = useDataFromBridge({ \n // xUser: xuser, apiValues: exportParams,\n // bridgedResourceName: \"AllServiceRequestsExport\",\n // });\n\n const calendarRecs = useDataFromBridge({ \n xUser: xuser, apiValues: calendarApiParams,\n bridgedResourceName: \"Service Requests by ContactID\",\n callback: handleDataLoadCallback,\n });\n\n useEffect(() => {\n if (!calendarView) return;\n setCalendarApiParams({...apiparms, \n PageNum: 0, PageSize: 0, \n CustomerContactID: dappCntx.user?.user?.ContactID || ''\n });\n // eslint-disable-next-line\n }, [calendarView, dappCntx]);\n\n useEffect(() => {\n if (!id) return;\n if (!apiparms) return;\n let parms = { ...apiparms, CustomerContactID: id};\n if (JSON.stringify(parms) === JSON.stringify(apiparms)) return;\n // setLoading(true);\n setApiparms({...apiparms, ...parms}); \n }, [id, apiparms]);\n\n useEffect(() => {\n if (calendarView) return;\n // if (!apiparms || !!id) return;\n let parms = (apiparms && {\n ...apiparms, ...filterValue,\n CustomerContactID: (contactOnly && dappCntx.user?.user?.ContactID) || ' ',\n // Status: (filterValue?.Status === ' ' ? 'Open' : filterValue?.Status) || 'Open',\n Status: filterValue?.Status || 'Open',\n assignedTo: (assignedToMe && `C${dappCntx.user?.user?.CCWebUserID}`) || ((filterValue && filterValue?.assignedTo !== ' ') && filterValue.assignedTo) || ' ',\n CurrentUserID: (assignedToMe && dappCntx.user?.user?.CCWebUserID) || ' '\n }) || {\n ...srvcCntx.initLoadParams, ...filterValue,\n CustomerContactID: (contactOnly && dappCntx.user?.user?.ContactID) || ' ',\n AscDesc: filterValue?.AscDesc || 'DESC',\n SortField: filterValue?.SortField || 'IncidentID',\n Status: filterValue?.Status || 'Open',\n assignedTo: (assignedToMe && `C${dappCntx.user?.user?.CCWebUserID}`) || ' ',\n CurrentUserID: (assignedToMe && dappCntx.user?.user?.CCWebUserID) || ' '\n }\n \n setApiparms({\n ...parms, \n PageNum: (resetPage && parms.PageNum !== 1) ? 1 : parms.PageNum,\n PageSize: (srvcCntx?.filter?.PageSize || parms.PageSize) || 5,\n }); \n }, [contactOnly, dappCntx, calendarView, id, filterValue, assignedToMe, srvcCntx, resetPage]);\n\n useEffect(() => {\n if (calendarView) return;\n // let brgName = /*((id || contactOnly) && \"Service Requests by ContactID\") ||*/\"All Service Requests Filtered\";\n let brgName = \"Service Requests Simplified\";\n if (bridgeName === brgName) return;\n setBridgeName(brgName);\n }, [bridgeName, id, contactOnly, calendarView]);\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx]);\n\n useEffect(() => {\n if (!selectedDeviceCntx) return;\n setBridgeName(\"Service Requests by DeviceID\"); \n if (selectedDeviceCntx.selectedDevice){\n let deviceId = selectedDeviceCntx.selectedDevice[\"Device ID\"];\n if (!apiparms.DeviceID || apiparms.DeviceID !== deviceId){\n setApiparms({...apiparms, DeviceID: deviceId}); \n }\n }\n // eslint-disable-next-line \n }, [selectedDeviceCntx]);\n\n const handlePaginationChange = useCallback((model) => {\n srvcCntx.setFilter({...srvcCntx.filter, \n PageNum: (model?.page || 0) + 1,\n PageSize: model.pageSize,\n CustomerContactID: (contactOnly && dappCntx.user?.user?.ContactID) || ' ' \n });\n }, [srvcCntx]);\n\n const showError = useCallback(({message}) => {\n if (handleError && typeof handleError === 'function'){\n handleError({message: message});\n }\n }, [handleError]);\n\n useEffect(() => {\n if (!refresh) return;\n // setLoading(true);\n setGridData([]);\n setTimeout(() => {\n setApiparms({ ...apiparms, PageToken: 'random' });\n setApiparms({ ...apiparms, PageToken: ' ' });\n }, 800);\n finishRefresh();\n}, [refresh, apiparms, finishRefresh]);\n\n useEffect(() => {\n if (!srvcreqs) return;\n setGridData([]);\n\n if (srvcreqs.success && !srvcreqs.data){\n showError({message: \"No data\"});\n return;\n }\n\n if (!srvcreqs.success) {\n showError({message: srvcreqs.data.Message || srvcreqs.data.message});\n return;\n }\n\n if (srvcreqs?.data?.error){\n showError({message: `${srvcreqs.data.error.message} for bridge parameters: ${JSON.stringify(apiparms)}` })\n return;\n } \n\n setTotalRecs(srvcreqs?.data?.metadata?.count || 0);\n let data = srvcreqs.data;\n\n setToolbarStats({\n All: data.metadata.all, Calendar: data.metadata.calendar, \n General: data.metadata.general, OpenIncidents: data.metadata.openIncidents, \n Scheduled: data.metadata.scheduled, ToDo: data.metadata.toDo\n });\n\n let gridData = data.records.map((row, indx) => { return { ...row, id: indx }; }) ;\n setLoading(false);\n if (JSON.stringify(gridData) === JSON.stringify(griddata)) return;\n \n setGridData(gridData);\n // eslint-disable-next-line\n }, [srvcreqs, apiparms]);\n\n useEffect(() => {\n if (!calendarRecs) return;\n\n if (!calendarRecs.success && !calendarRecs.data)\n return;\n\n if (calendarRecs.success && !calendarRecs.data){\n showError({message: \"No data\"});\n return;\n }\n\n if (calendarRecs?.data?.error){\n showError({message: `${calendarRecs.data.error.message} for bridge parameters: ${JSON.stringify(calendarApiParams)}` })\n return;\n } \n\n let data = calendarRecs.data;\n\n setLoading(false);\n setCalendarData(data.records.map((row, indx) => { return { ...row, id: indx }; }) );\n // eslint-disable-next-line\n }, [calendarRecs, calendarApiParams]); \n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Service Requests\");\n }, [dappCntx]) \n\n const handleSortChange = useCallback((sortmodel) => {\n if (!sortmodel) return;\n if (!!sortmodel && sortmodel.length <= 0) return;\n if (apiparms.SortField === sortmodel[0].field && apiparms.AscDesc === sortmodel[0].sort) return;\n setApiparms({\n ...apiparms,\n SortField: sortmodel[0].field,\n AscDesc: sortmodel[0].sort,\n });\n }, [apiparms]);\n\n const exportAllRecords = async () => {\n setLoading(true);\n let pages = Math.round(totalRecs / MAX_ROWS_4_EXPORT);\n pages = (pages <= 0 ? 1 : pages);\n for (var i = 1; i <= pages; i++){\n let p = {\n xUser: xuser,\n apiValues: {...apiparms, PageNum: i, PageSize: MAX_ROWS_4_EXPORT},\n bridgedResourceName: \"AllServiceRequestsExport\",\n };\n await getDataUniversalExportFromBrdige(p)\n .then(response => {\n // console.log(`inside promise...: ${response?.records?.length}`);\n setExportedData((exportedData || []).push(...response?.records))\n })\n .catch(error => console.error(error?.response?.data));\n }\n setExportDataReady(exportedData); \n };\n\n useEffect(() => {\n if (!exportData) return;\n\n swal({\n title: \"Export Service Requests\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSG.replace('REPLACE-STRING', 'service requests'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && exportAllRecords();\n });\n\n if (onExportDataComplete && typeof onExportDataComplete === 'function') {\n onExportDataComplete();\n }\n }, [exportData, onExportDataComplete, apiparms, exportAllRecords]);\n\n useEffect(() => {\n if (!exportDataReady || exportDataReady.length === 0) return;\n\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `SERVICEREQUESTS_CMS_${stamp}.xlsx`;\n\n exportDataReady.map((value) => {\n var obj = Object.entries(value);\n obj.map((prop) => {\n if (prop[0].match(/date/ig)){\n var dtField = new Date((!prop[1] && new Date(0, 0, 1)) || prop[1]);\n if (dtField instanceof Date){\n value[prop[0]] = `${dtField.toLocaleDateString()} ${dtField.toLocaleTimeString()}`;\n }\n }\n return value;\n });\n return obj;\n });\n\n const ws = utils.json_to_sheet(exportDataReady);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, \"Service Requests\");\n setLoading(false);\n writeFileXLSX(wb, fileName);\n\n setExportedData([]);\n setExportDataReady([]);\n\n }, [exportDataReady]);\n\n return (\n \n {(calendarView &&\n \n );\n};\n\nconst ServiceRequestGrid = (props) => {\n const {\n griddata, loading, totalCount,\n onPaginationChange, contactOnly, short, embedStyle, resetPageNum,\n ...other\n } = props;\n\n // const [pagination, dispatch] = useReducer(pageReducer, {page: 0, pageSize: rowsperpage[0]});\n const gridClasses = useGridStyles();\n const history = useHistory();\n const location = useLocation();\n const apiRef = useGridApiRef();\n const [pageModel, setPageModel] = useState();\n\n useEffect(() => {\n if (!resetPageNum) return;\n if (pageModel.page === 0) return;\n setPageModel({page: 0, pageSize: pageModel.pageSize});\n }, [resetPageNum, pageModel]);\n\n const onPageChange = (model) => {\n setPageModel(model);\n if (!!onPaginationChange && typeof onPaginationChange === 'function')\n onPaginationChange(model)\n };\n\n const srvcColsShort = useServicesColumnsShort({\n handleEdit: ({ row }) => {\n history.push({pathname: `/servicerequest/edit/${row.IncidentID}`, state: {prevPath: location.pathname}});\n },\n handleView: ({ row }) => {\n history.push(`/servicerequest/view/${row.IncidentID}`);\n },\n handleDelete: ({ row }) => {\n alert(`placeholder for delete row with the Incident ID = ${row['IncidentID']}`);\n },\n handleContactView: ({row}) => {\n row?.ContactID && history.push(`/contacts/view/${row.ContactID}`);\n },\n })\n\n const srvcCols = useServicesColumns({ \n handleEdit: ({ row }) => {\n history.push({pathname: `/servicerequest/edit/${row.IncidentID}`, state: {prevPath: location.pathname}});\n },\n handleView: ({ row }) => {\n history.push(`/servicerequest/view/${row.IncidentID}`);\n },\n handleDelete: ({ row }) => {\n alert(`placeholder for delete row with the Incident ID = ${row['IncidentID']}`);\n },\n handleContactView: ({row}) => {\n row?.ContactID && history.push(`/contacts/view/${row.AssignedToContactID}`);\n },\n });\n\n useEffect(() => {\n const rowDoubleclicked = (params, event, details) => {\n history.push(`/servicerequest/view/${params.row.IncidentID}`);\n };\n\n return apiRef.current.subscribeEvent('rowDoubleClick', rowDoubleclicked);\n }, [apiRef]);\n\n return (\n \n \n );\n}\n\n// const pageReducer = (state, action) => {\n// switch (action.type) {\n// case \"page\": \n// return {...state, page: action.page}\n// case \"pageSize\": \n// return {...state, pageSize: action.pageSize}\n// default: \n// throw new Error();\n// }\n// }\n\n\nexport const ServiceRequestByDevice = ({handleError, deviceId, embedStyle}) => {\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState(undefined);\n const [griddata, setGridData] = useState([]);\n const [pageToken, setPageToken] = useState();\n const [xuser, setXuser] = useState();\n const bridgeName = \"Service Requests by DeviceID\";\n\n const dappCntx = useDappContext();\n\n const srvcCntx = useServiceRequestContext();\n\n const srvcreqs = useDataFromBridge({ \n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgeName,\n });\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx])\n\n useEffect(() => {\n if (!deviceId) return;\n setLoading(true);\n const contactID = dappCntx.user?.user?.UserType !== \"Administrator\" && dappCntx.user?.user?.ContactID\n setApiparms({...srvcCntx.deviceParams, DeviceID: deviceId, ContactID: contactID || '', PageNum: 1, PageSize: 10});\n }, [deviceId, dappCntx, srvcCntx]);\n\n const handlePageSizeChange = useCallback((pageSize) => {\n setLoading(true);\n setApiparms({ ...apiparms, PageSize: pageSize, PageNum: 1,\n PageToken: ' '});\n },\n [apiparms],\n );\n\n const handlePageChange = useCallback((page) => {\n setLoading(true);\n setPageToken(' ');\n setApiparms({ ...apiparms, PageToken: pageToken, PageNum: page + 1 });\n }, [apiparms, pageToken]);\n\n const showError = useCallback(({message}) => {\n if (handleError && typeof handleError === 'function'){\n handleError({message: message});\n }\n }, [handleError]);\n\n const handleSortChange = useCallback((sortmodel) => {\n if (!sortmodel) return;\n if (!!sortmodel && sortmodel.length <= 0) return;\n if (apiparms.SortField === sortmodel[0].field && apiparms.AscDesc === sortmodel[0].sort) return;\n setApiparms({\n ...apiparms,\n SortField: sortmodel[0].field,\n AscDesc: sortmodel[0].sort,\n });\n }, [apiparms]);\n\n useEffect(() => {\n if (!srvcreqs?.data || !deviceId) return;\n\n setLoading(false);\n if (!srvcreqs.success) {\n showError({message: (srvcreqs.data?.Message || srvcreqs.data?.message) || 'Something failed'});\n return;\n }\n\n if (srvcreqs.success && !srvcreqs.data){\n return;\n }\n\n if (srvcreqs?.data?.error){\n showError({message: `${srvcreqs.data.error.message} for bridge parameters: ${JSON.stringify(apiparms)}` })\n return;\n } \n\n // setPageToken(srvcreqs.data.metadata?.nextPageToken || srvcreqs.data.NextPage || initLoadParams.PageToken);\n\n let data = srvcreqs.data;\n\n setGridData(data.records.map((row, indx) => { return { ...row, id: indx }; }) );\n // eslint-disable-next-line\n }, [srvcreqs, apiparms]);\n\n return (\n ,\n });\n }, [teamRecord, iconCls])\n\n return (contact2show && contact2show?.fullName && \n ,\n });\n }, [teamRecord, iconCls])\n\n return (contact2show && contact2show?.fullName && \n ,\n });\n }, [teamRecord, iconCls])\n\n return (contact2show && contact2show?.fullName && \n \n \n \n \n {icon}\n \n \n \n {title}\n \n \n \n \n \n \n {(phone && \n \n \n \n \n \n \n \n {phone}\n \n \n ) || \n \n \n \n \n \n \n \n {cell}\n \n \n \n ) || \n \n \n \n )\n};","import React, { Fragment } from \"react\";\nimport { useEffect } from \"react\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { useDataFromBridge } from \"../../controls/custom.hooks\";\nimport { useState } from \"react\";\nimport { useCallback } from \"react\";\nimport { CustomerRepCard, ITConsultantCard, TechManagerCard } from \"./team.cards\";\nimport { Grid } from \"@material-ui/core\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\n\nexport const TeamList = ({onShowWhite, ...other}) => {\n const [xuser, setXuser] = useState(null);\n const [data2show, setData2Show] = useState([]);\n const [showAlert, setShowAlert] = useState({\n open: false, severity: \"error\", message: '',\n onSnackBarClose: () => {}\n });\n\n const dappCntx = useDappContext();\n\n const handleError = useCallback(({message}) => {\n setShowAlert({\n open: true, severity: \"error\", message: message,\n onSnackBarClose: () => {setShowAlert({open: false, message: \"random\"})},\n });\n }, [])\n\n const team = useDataFromBridge({\n xUser: xuser, apiValues: ' ',\n bridgedResourceName: \"DPTeam\",\n });\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx]);\n\n useEffect(() => {\n if (!team) return;\n let doShow = true;\n\n if (!team.success){\n handleError({message: team.data.Message || team.data.message});\n return;\n }\n \n doShow && setData2Show(team.data?.records?.map((row, indx) => { \n return {...row, id: indx}\n }));\n return () => {\n doShow = false;\n }\n // eslint-disable-next-line \n }, [team])\n\n return (\n \n {data2show && data2show?.[0]?.[\"CustSvcRepFullName\"] !== '' &&\n \n }\n \n \n \n \n \n );\n}\n","import { faArrowRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Card, CardActionArea, CardContent, Grid, Typography } from \"@material-ui/core\";\nimport React, { useState, useCallback } from \"react\";\n\nexport const CustomCardLeft = (props) => {\n const {id, title, description, onCardClick, icon, children, onShowWhite, ...other} = props;\n const [showWhite, setShowWhite] = useState(false);\n\n const handleMouseOver = useCallback((e) => {\n if (showWhite) return;\n setShowWhite(true);\n if (!!onShowWhite && typeof onShowWhite === 'function'){\n onShowWhite(id, true);\n }\n }, [showWhite, onShowWhite, id]);\n\n const handleMouseLeave = useCallback((e) => {\n if (!showWhite) return;\n setShowWhite(false);\n if (!!onShowWhite && typeof onShowWhite === 'function'){\n onShowWhite(id, false);\n }\n }, [showWhite, onShowWhite, id]);\n\n return (\n \n \n \n \n \n {icon} \n \n \n \n \n \n {title}\n \n \n \n \n \n \n {description} \n \n \n {children}\n \n \n \n \n \n \n \n )\n};\n\nexport const CustomCardTop = (props) => {\n const {id, title, description, onCardClick, icon, children, onShowWhite, ...other} = props;\n const [showWhite, setShowWhite] = useState(false);\n\n const handleMouseOver = useCallback((e) => {\n if (showWhite) return;\n setShowWhite(true);\n if (!!onShowWhite && typeof onShowWhite === 'function'){\n onShowWhite(id, true);\n }\n }, [showWhite, onShowWhite, id]);\n\n const handleMouseLeave = useCallback((e) => {\n if (!showWhite) return;\n setShowWhite(false);\n if (!!onShowWhite && typeof onShowWhite === 'function'){\n onShowWhite(id, false);\n }\n }, [showWhite, onShowWhite, id]);\n\n return (\n \n \n \n \n \n {icon} \n \n \n \n {title}\n \n \n \n \n \n \n {description} \n \n \n {children}\n \n \n \n \n \n )\n};\n","import { Grid } from \"@material-ui/core\";\nimport React, { useReducer } from \"react\";\nimport { Fragment } from \"react\";\nimport { CustomCardLeft, CustomCardTop } from \"./home.card\";\nimport { DappChatIcon, DappChatIconWhite, ManageServiceIcon, ManageServiceIconWhite, NewRequestIcon, NewRequestIconWhite, NewTicketIcon, NewTicketIconWhite, RemoteAccessIcon, RemoteAccessIconWhite, SinglePaneIcon, SinglePaneIconWhite } from \"../../images/dapp.icons\";\nimport { useHomeStyles } from \"./home.styles\";\nimport { useCardStyles } from \"../../controls/shared.components\";\nimport { useHistory } from \"react-router-dom/cjs/react-router-dom\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport clsx from \"clsx\";\n\nexport const HomeCards = (props) => {\n const { newIncident, newRequest, openRemote, openChat } = props;\n const [iconFlag, dispatch] = useReducer(iconFlagReducer, false);\n const homeClasses = useHomeStyles();\n const cls = useCardStyles()\n const history = useHistory();\n const dappCntx = useDappContext();\n\n const onShowWhite = (id, flag) => {\n dispatch({type: id, flag});\n }\n \n return (\n \n \n \n \n \n {(!dappCntx?.showChat && \n \n {(!dappCntx?.contactProfile?.IsContactCenterChatEnabled && (\n ) \n || \n {(!dappCntx?.showChat &&\n history.push('/jobs')}\n onShowWhite={onShowWhite}\n icon={(iconFlag.jobFlag && history.push('/jobs')}\n onShowWhite={onShowWhite}\n icon={(iconFlag.jobFlag && }\n \n {((dappCntx?.user?.user?.['UserType'] === 'Administrator' || !dappCntx?.showChat) &&\n \n {dappCntx?.user?.user?.['UserType'] === 'Administrator' && \n \n history.push(\"/reports/5cd25672-8481-4423-8d43-1adda13e07da\")}\n onShowWhite={onShowWhite}\n icon={(iconFlag.rptFlag && }\n \n )\n}\n\n\nconst iconFlagReducer = (state, action) => {\n switch (action.type) {\n case \"new-incident\": {\n return {incFlag: action.flag}; \n }\n case \"new-request\": {\n return {reqFlag: action.flag}; \n }\n case \"remote-control\": {\n return {remFlag: action.flag}; \n }\n case \"chat\": {\n return {chatFlag: action.flag};\n }\n case \"jobs\": {\n return {jobFlag: action.flag};\n }\n case \"report\": {\n return {rptFlag: action.flag};\n }\n case \"customer-rep\": {\n return {cstFlag: action.flag}\n }\n case \"it-consultant\": {\n return {itcFlag: action.flag}\n }\n case \"tech-manager\": {\n return {techFlag: action.flag}\n }\n default:\n return false;\n }\n }","import { Dialog, DialogContent, DialogTitle, IconButton, useMediaQuery, useTheme } from \"@material-ui/core\";\nimport { Close } from \"@material-ui/icons\";\nimport { CHATLINK } from \"../../controls/dapp.constants\";\nimport React from \"react\";\n\nexport const ChatModal = (props) => {\n const {open, handleClose, ...other} = props;\n const theme = useTheme();\n const screen = useMediaQuery(theme.breakpoints.down('sm'));\n\n return (\n \n \n Chat with Us\n \n \n \n \n \n \n )\n}","import { Alert, Snackbar } from \"@mui/material\";\nimport React, { Fragment, useState } from \"react\"\n\nexport const ApplicationBanner = (params) => {\n const { message } = params;\n const [open, setOpen] = useState(true);\n\n const handleClose = () => {\n setOpen(false);\n }\n\n return (\n \n {(message && message.length > 0 &&\n \n \n {message}\n \n ) || \n )\n}","import { Grid, Link, Paper, Tab, Tabs, Typography, makeStyles } from \"@material-ui/core\";\nimport React, { Fragment, useCallback, useState, useEffect } from \"react\";\nimport { useBigNumberStyles, useHomeStyles, useMyIncidentsStyles } from \"./home.styles\";\nimport { rowsperpage, useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { SearchProvider } from \"./search.provider\";\nimport { GlobalSearch } from \"./global.search\";\nimport { useTicketsContext } from \"../incidents/incident.provider\";\nimport { IncidentsList } from \"../incidents/incidents.list\";\nimport { TabContext, TabPanel } from \"@material-ui/lab\";\nimport { ServiceRequestList } from \"../services requests/service.request.main\";\nimport { TeamList } from \"../team/team.main\";\nimport { SlantedCornerBoxIcon } from \"../../images/dapp.icons\";\nimport { useHistory } from \"react-router-dom/cjs/react-router-dom\";\nimport { HomeCards } from \"./home.v2.cards\";\nimport { ModalSelection } from \"../modals/modal.selection\";\n// import { RemoteControlModal } from \"../modals/modal.remote\";\nimport { ChatModal } from \"../modals/modal.chat\";\nimport { useDataFromBridge } from \"../../controls/custom.hooks\";\nimport { REMOTECONTROL } from \"../../controls/dapp.constants\";\nimport clsx from \"clsx\";\nimport { useServiceRequestContext } from \"../services requests/filter/filter.provider\";\nimport { ApplicationBanner } from \"./banner.app\";\n\nexport const HomeV2 = (props) => {\n const {...other} = props;\n const dappCntx = useDappContext();\n const ticketCntx = useTicketsContext();\n const history = useHistory();\n\n const [ticketType, setTicketType] = useState();\n const [openModal, setOpenModal] = useState(false);\n const [showPrimary, setShowPrimary] = useState(false);\n const [srch, setSrch] = useState();\n const [openIncCount, setOpenIncCount] = useState(0);\n const [openReqCount, setOpenReqCount] = useState(0);\n const [requestsBridge, setRequestsBridge] = useState(\"Service Requests Simplified\");\n const [requestsParams, setRequestsParams] = useState();\n const [bannertMessage, setBannerMessage] = useState();\n\n // const [modalRemote, setModalRemote] = useState({open: false, handleClose: () => {}});\n const [chatModal, setChatModal] = useState({open: false, handleClose: () => {}});\n\n const homeClasses = useHomeStyles();\n const wrapperClasses = useWrappereStyles();\n const nbrs = useBigNumberStyles();\n\n const srvcCntx = useServiceRequestContext();\n\n const newIncident = () => {\n setTicketType(\"incident\");\n setShowPrimary(false);\n setOpenModal(true);\n }\n const newServiceRequest = () => {\n setTicketType(\"servicerequest\");\n setShowPrimary(true);\n setOpenModal(true);\n } \n\n useEffect(() => {\n if (!bannertMessage){\n // setBannerMessage(\"Attention: The CMS Portal will be undergoing maintenance the weekend of 2/28. Thank you for your patience and understanding!\");\n setBannerMessage(\"\");\n }\n }, [bannertMessage])\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Home\");\n // eslint-disable-next-line\n }, [dappCntx.title]);\n\n useEffect(() => {\n if (!dappCntx?.user) return;\n setSrch({\n ...ticketCntx?.srch, \n PageSize: rowsperpage[0],\n CustomerContactID: (dappCntx.user?.user.UserType === \"User\" && dappCntx.user?.user.ContactID) || ' ',\n Status: \"Open\",\n assignedTo: ' ',\n });\n }, [dappCntx, ticketCntx]);\n \n const getRightType = useCallback((deviceRecord) => {\n let devid = String(deviceRecord[\"Device ID\"]).trim();\n let kasid = String(deviceRecord[\"Kaseya Machine Group ID\"]).trim();\n let cntid = String(deviceRecord[\"NCentral Device ID\"]).trim();\n\n if (parseInt(devid) > 0)\n return {type: \"device\", id: deviceRecord[\"Device ID\"]};\n\n if (kasid.length > 0 && kasid !== '-1')\n return {type: \"kaseya\", id: deviceRecord[\"Kaseya Machine Group ID\"]}; \n\n if (cntid.length > 0 && cntid !== '-1')\n return {type: \"ncentral\", id: deviceRecord[\"NCentral Device ID\"]};\n }, []);\n\n const handleModalClose = useCallback((props) => {\n const {ok, selection} = props;\n setOpenModal(false);\n if (!ok) return;\n let type = selection.type;\n if (type !== 'primaryContact') {\n let field = `${type.charAt(0).toUpperCase()}${type.slice(1)} ID`;\n if (type !== 'contact'){\n let devType = getRightType(selection.record);\n history.push(`/${ticketType}/add/${devType.id}?type=${type}&devicetype=${devType.type}`);\n } else {\n let id = selection.record[`${field}`];\n history.push(`/${ticketType}/add/${id}?type=${type}`);\n }\n } else {\n let field = `${type.charAt(0).toUpperCase()}${type.slice(1)}ID`;\n let id = selection.record[`${field}`];\n history.push(`/${ticketType || 'servicerequest'}/add/${id}?type=${type}`);\n }\n\n }, [history, ticketType, getRightType]);\n\n // const showModalRemote = useCallback(() => {\n // setModalRemote({ ...modalRemote, open: true, handleClose: () => {\n // setModalRemote({...modalRemote, open: false, handleClose: () => {}});\n // }})\n // });\n\n const showModalRemote = () => window.open(REMOTECONTROL, \"_blank\");\n\n const showModalChat = useCallback(() => {\n setChatModal({...chatModal, open: true, handleClose: () => {\n setChatModal({...chatModal, open: false, handleClose: () => {}});\n }})\n }, [chatModal]);\n\n const incidents = useDataFromBridge({ \n xUser: dappCntx?.user?.user, \n apiValues: srch,\n bridgedResourceName: \"All Incidents Filtered\",\n });\n\n useEffect(() => {\n setRequestsBridge(\"Service Requests Simplified\");\n }, [dappCntx])\n\n useEffect(() => {\n if (!dappCntx?.user) return;\n setRequestsParams({\n ...srvcCntx.initLoadParams, \n CustomerContactID: (dappCntx.user?.user?.UserType === \"User\" && dappCntx.user.user.ContactID) || ' ',\n AscDesc: 'DESC',\n SortField: 'IncidentID',\n PageSize: 10,\n });\n }, [srvcCntx, dappCntx])\n\n const requests = useDataFromBridge({ \n xUser: dappCntx?.user?.user, \n apiValues: requestsParams,\n bridgedResourceName: requestsBridge,\n });\n\n useEffect(() => {\n if (!incidents) return;\n setOpenIncCount(incidents?.data?.metadata?.count || 0);\n }, [incidents]);\n\n useEffect(() => {\n if (!requests) return;\n setOpenReqCount(requests?.data?.metadata?.count || 0);\n }, [requests]);\n \n return (\n \n \n \n \n \n \n {dappCntx.user?.user?.[\"UserType\"] !== \"User\" && \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* */}\n \n \n \n )\n}\n\nconst useSearchStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: '3rem',\n color: \"window\",\n paddingTop: \"1.2rem\",\n },\n txtLine: {\n paddingBottom: \".5rem\",\n }\n\n}));\n\nconst GlobalSearchMain = () => {\n const stls = useSearchStyles();\n const dappCntx = useDappContext();\n\n return (\n \n \n {`Hello, ${dappCntx?.user?.user?.FirstName || ''}`}\n \n \n What would you like to do today?\n \n \n \n \n ) \n}\n\nexport const TicketTabs = (props) => {\n const [value, setValue] = useState(\"inc\");\n const stls = useMyIncidentsStyles();\n \n const handleTabChange = useCallback((event, newValue) => {\n setValue(newValue);\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n \n \n { }}\n handleError={() => { console.log(`some error happened here`) }}\n />\n \n \n \n \n { }}\n handleError={() => { console.log(`some error happened here`) }}\n />\n \n \n \n \n );\n}\n\nexport const BigNumberBoxes = (props) => {\n const {incidentsCount, requestCount} = props;\n const history = useHistory();\n const dappCntx = useDappContext();\n\n return (\n \n \n \n \n \n \n {incidentsCount}\n \n Open Incidents \n \n \n \n \n \n \n {requestCount}\n \n Open Service Requests \n \n \n \n \n )\n}\n","import React from \"react\";\nimport { Box, Button, Grid, Tooltip } from \"@material-ui/core\";\nimport { useDialogButtonStyles } from \"./shared.components\";\nimport { faCancel, faSave } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport const SaveCancelToolbarButtons = (props) => {\n const {handleSave, handleCancel} = props\n const btnCls = useDialogButtonStyles();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}","import React, { Fragment, useCallback, useState } from \"react\";\nimport { Toolbar, Box, FormGroup, FormControlLabel, makeStyles, Typography, debounce } from \"@material-ui/core\";\nimport { DappToolbarSwitch, ToolbarButton, useToolBarStyle, useToolbarStyle } from \"../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { \n faAdd, faRefresh, faHardDrive, faContactBook, faLockOpen, faListCheck, \n faUserCheck, faUserClock, faFileExcel, faSearch, faEdit, faEraser,\n faPersonCircleCheck,\n // , faQuestion, faGears\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { useHistory, useLocation, useParams } from \"react-router-dom\";\nimport { ToggleButton, ToggleButtonGroup } from \"@material-ui/lab\";\nimport { QuickLookup } from \"../../controls/search.box\";\nimport { SaveCancelToolbarButtons } from \"../../controls/savecancel.buttons\";\nimport { TicketsIcon } from \"../../images/dapp.icons\";\n\nexport const ContactToolbar = (props) => {\n const {\n subClientChanged, onRefresh, newContact, editContact, disableEdit,\n handleContactToggle, handleExport, handleFilter, handleSearchValueChange,\n handlePendingToggle,\n ...other\n } = props;\n const [subclient, setSubClient] = useState(false);\n const [pendingContact, setPendingContact] = useState(false);\n const cls = useToolbarStyle();\n\n const handleChange = useCallback((event) => {\n setSubClient(event.target.checked);\n if (!!subClientChanged && typeof subClientChanged === 'function'){\n subClientChanged({value: event.target.checked});\n }\n }, [subClientChanged]);\n\n const handlePendingChange = useCallback((event) => {\n setPendingContact(event.target.checked);\n if (!!handlePendingToggle && typeof handlePendingToggle === 'function'){\n handlePendingToggle({value: event.target.checked});\n }\n }, [handlePendingToggle])\n\n const handleSearch = debounce((val) => {\n if (handleSearchValueChange && typeof handleSearchValueChange === 'function'){\n handleSearchValueChange(val);\n }\n }, 800);\n\n return (\n \n }\n />\n }\n />\n \n handleSearch(e.target.value)} \n />\n \n {/* \n \n }\n label={`${(!subclient && \"No\") || ''} Sub Client`} \n />\n */}\n {/* \n \n }\n label={`${(!pendingContact && \"Not\") || ''} Pending`} \n />\n */}\n }\n />\n }\n />\n \n );\n}\n\nexport const ContactEditToolbar = (props) => { \n const {\n onShowDevices, onServiceRequests, \n onSurveys, onAccess, onPreferences, \n onSaveChanges, onCancelChanges, onDisable,\n onApprove, isPending,\n showDetail, type, userContact, loadError, onIncidents,\n ...other\n } = props;\n const cls = useToolbarStyle();\n const history = useHistory();\n const {id} = useParams();\n const location = useLocation();\n\n return (\n \n history.push(`/contacts/edit/${id}`)}\n tooltip=\"Edit Contact\"\n icon={}\n disabled={loadError}\n />\n }\n disabled={loadError}\n />\n }\n disabled={loadError}\n />\n }\n disabled={loadError}\n />\n }\n disabled={loadError}\n />\n }\n disabled={loadError}\n style={(isPending && {display: \"\"}) || {display: \"none\"}}\n />\n {/* }\n /> */}\n }\n disabled={loadError}\n /> */}\n {/* }\n /> */}\n \n );\n}\n\nexport const ContactsSwitchToolbar = ({handleSwitch, ...other}) => {\n const [selectedView, setSelectedView] = useState(\"contacts\");\n\n const tlbrCls = useToolBarStyle();\n const togglecls = useToggleStyles();\n\n const handleChangeToggle = useCallback((e) => {\n setSelectedView((e.currentTarget || e.target).value);\n handleSwitch((e.currentTarget || e.target).value);\n }, [handleSwitch]);\n\n return (\n \n \n \n Contacts\n \n \n Invite to CMS\n \n \n View Current CMS Invites\n \n \n \n )\n}\n\nconst useToggleStyles = makeStyles(() => ({\n dappTabs: {\n '& .MuiToggleButton-root': {\n color: \"window\",\n backgroundColor: \"#55bff2\",\n opacity: \"0.5\",\n },\n '& .Mui-selected': {\n opacity: \"1\",\n backgroundColor: \"#007dba\",\n },\n }\n }));\n","import React, { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { ContactToolbar } from \"./contacts.toolbar\";\nimport { useContactColumns, useSortMapper } from \"./columns.contacts\";\nimport { rowsperpage } from \"../../controls/shared.components\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\nimport { DataGridPro, useGridApiRef } from \"@mui/x-data-grid-pro\";\nimport { useGridStyles } from \"../../controls/datagrid.striped\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useDataFromBridge } from \"../../controls/custom.hooks\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport clsx from \"clsx\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { utils, writeFileXLSX } from \"xlsx\";\nimport swal from \"sweetalert\";\nimport { EXPORTALERTMSG } from \"../../controls/dapp.constants\";\n\nconst initLoadParams = {\n AscDesc: 'DESC',\n GetTotal: true,\n IncludeInactive: false,\n PageNum: 1,\n PageSize: 20,\n PageToken: ' ',\n SortField: 'ContactID',\n SubClientContact: false,\n SearchValue: ' ',\n IsPending: false,\n}\n\nconst bridgedResourceName = \"All Contacts\"\nconst exportBridge = \"AllContactsExport\"\n\nexport const Contacts = (props) => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState(initLoadParams);\n const [griddata, setGridData] = useState([]);\n const [pageNum, setPageNum] = useState(0);\n const [pageSize, setPageSize] = useState(20);\n const [selected, setSelected] = useState();\n const [exportParams, setExportParams] = useState(undefined);\n const gridClasses = useGridStyles();\n const dappCntx = useDappContext();\n const history = useHistory();\n const location = useLocation();\n const sortMapper = useSortMapper();\n\n const apiRef = useGridApiRef();\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: 'success', message: '',\n onSnackBarClose: () => {},\n });\n\n const contacts = useDataFromBridge({\n xUser: dappCntx.user?.user, apiValues: apiparms,\n bridgedResourceName: bridgedResourceName \n });\n\n const contacts2export = useDataFromBridge({\n xUser: dappCntx.user?.user, apiValues: exportParams,\n bridgedResourceName: exportBridge, \n });\n\n const handleEditContact = useCallback(({row}) => {\n history.push({pathname: `/contacts/edit/${row[\"Contact ID\"]}`, state: {prevPath: location.pathname}});\n }, [history, location]);\n \n const handleViewContact = ({row}) => history.push(`/contacts/view/${row[\"Contact ID\"]}`);\n\n const handleDeleteContact = useCallback(({row}) => {\n let msg = `Delete for ${row['Contact ID']} - ${row['Display Name']} is not implemented yet.`;\n setShowAlert({\n open: true, severity: \"warning\", message: msg,\n onSnackBarClose: () => setShowAlert({open: false, severity: \"error\", message: \"random\"}),\n });\n }, [])\n \n const contactColumns = useContactColumns({\n handleEdit: handleEditContact, \n handleDelete: handleDeleteContact,\n handleView: handleViewContact,\n });\n\n const handlePageChange = useCallback((model, details) => { \n setGridData([]);\n if (model.pageSize !== pageSize)\n model.page = 0;\n setPageNum(model.page);\n setPageSize(model.pageSize);\n setLoading(true);\n setApiparms({...apiparms, PageNum: model.page + 1, PageSize: model.pageSize/*, PageToken: pagetoken*/});\n }, [apiparms, pageSize]);\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n \n useEffect(() => {\n if (!contacts) return;\n let doShow = true;\n\n setLoading(false);\n if (!contacts.success) {\n showError({message: contacts.data.Message || contacts.data.message});\n return;\n }\n\n if (!!contacts.data?.error){\n showError({message: contacts.data?.error?.message});\n return;\n }\n \n // setPageToken(contacts.data.metadata?.nextPageToken || contacts.data.NextPage || initLoadParams.PageToken);\n doShow && setGridData((contacts.data.records || contacts.data.Data)?.map((row, indx) => { return {...row, id: indx}}));\n return () => doShow = false;\n // eslint-disable-next-line\n }, [contacts]);\n\n const handleSubClientChanged = useCallback(({value}) => {\n setLoading(true);\n setPageNum(0);\n setApiparms({...apiparms, PageNum: 1, PageToken: ' ', SubClientContact: value});\n }, [apiparms]);\n\n const handlePendingToggle = useCallback(({value}) => {\n setLoading(true);\n setPageNum(0);\n setApiparms({...apiparms, PageNum: 1, PageToken: ' ', IsPending: value});\n }, [apiparms]);\n\n const handleRefresh = useCallback(() => {\n setLoading(true);\n setGridData([]);\n setApiparms({...apiparms, PageToken: 'random'});\n setApiparms({...apiparms, PageToken: ' '});\n }, [apiparms]);\n\n const handleRowSelected = useCallback((event) => {\n setSelected(event.row);\n }, []);\n\n const handleNewContact = () => history.push(`/contacts/add`);\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Contacts\", () => {});\n }, [dappCntx]);\n\n const handleSortChange = useCallback((sort) => {\n if (!sort || sort?.length === 0) return;\n const fld = sortMapper.find(x => x.field === sort[0]?.field)?.sortBy;\n if (apiparms.SortField === fld && apiparms.AscDesc === sort[0]?.sort) {\n return;\n }\n setGridData([]);\n setLoading(true);\n\n setApiparms({...apiparms, AscDesc: `${sort[0]?.sort}`, SortField: `${fld}`});\n }, [apiparms, sortMapper]);\n\n const handleExport = useCallback(() => {\n swal({\n title: \"Export Contacts\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSG.replace('REPLACE-STRING', 'Contacts'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && setExportParams({\n ...apiparms,\n PageNum: 1,\n PageSize: 2000,\n });\n });\n }, [apiparms]);\n\n const handleSearchValueChange = useCallback((val) => {\n setGridData([]);\n setLoading(true);\n setApiparms({...apiparms, SearchValue: (!!val && val) || ' '})\n }, [apiparms])\n\n useEffect(() => {\n if (!contacts2export) return;\n if (!contacts2export?.data) return;\n\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `CONTACT_CMS_${stamp}.xlsx`;\n\n const ws = utils.json_to_sheet(contacts2export.data.records);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, \"Contacts\");\n writeFileXLSX(wb, fileName);\n\n }, [contacts2export])\n\n const handleFilter = useCallback(() => {\n console.log(`we'll be showing filter here`);\n }, []);\n\n return (\n \n \n \n \n );\n}\n\n","import React, {useMemo} from \"react\";\nimport { DappBooleanAsIcon } from \"../../controls/shared.components\";\nimport { Tooltip, IconButton, Link } from \"@material-ui/core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faEdit, faTruckMedical, /*faEraser*/ } from \"@fortawesome/free-solid-svg-icons\";\n\nexport const useSortMapper = () => {\n return useMemo(() => [\n {field: \"First Name\", sortBy: \"FirstName\"},\n {field: \"Last Name\", sortBy: \"LastName\"},\n {field: \"Email Address\", sortBy: \"EmailAddress\"},\n {field: \"Direct Phone\", sortBy: \"DirectPhone\"},\n {field: \"Mobile Phone\", sortBy: \"MobilePhone\"},\n {field: \"Title\", sortBy: \"Title\"},\n ], [])\n};\n\nexport const useContactColumns = (props) => {\nconst {handleEdit, handleView, /*handleDelete*/} = props;\nconst phoneRe = new RegExp(/^(\\d{3})(\\d{3})(\\d{3,})$/);\n\n const columns = useMemo(() => [\n {field: 'beginSpacer', headerName: ' ', width: 40, disableColumnMenu: true, sortable: false},\n {\n field: \"First Name\", headerName: \"First Name\", flex: .1, disableColumnMenu: true,\n resizable: true, \n renderCell: (params) => { return (\n \n \n )}\n },\n {\n field: \"Last Name\", headerName: \"Last Name\", flex: .1, disableColumnMenu: true, \n resizable: true,\n renderCell: (params) => { return (\n \n \n )}\n },\n {\n field: \"Email Address\", headerName: \"Email\", flex: .2, disableColumnMenu: true,\n resizable: true, sortable: false,\n }, \n // {\n // field: \"Primary\", headerName: \"Primary\", flex: 0.08,\n // disableColumnMenu: true, align: \"center\", sortable: false, headerAlign: \"center\",\n // renderCell: (params) => ,\n // },\n {\n field: \"Direct Phone\", headerName: \"Phone\", flex: .15, disableColumnMenu: true,\n resizable: true, sortable: false,\n valueFormatter: ((phone) => {\n return phone.value.replace(phoneRe, '($1) $2-$3');\n }),\n },\n {\n field: \"Mobile Phone\", headerName: \"Mobile\", flex: .15, disableColumnMenu: true,\n resizable: true, sortable: false,\n valueFormatter: ((phone) => {\n return phone.value.replace(phoneRe, `($1) $2-$3`)\n }),\n },\n {\n field: \"Title\", headerName: \"Title\", flex: .2, disableColumnMenu: true,\n resizable: true, sortable: false,\n },\n {\n field: \"Actions\", headerName: \" \", width: 80, disableColumnMenu: true, \n sortable: false, align: \"right\",\n renderCell: (params) => {\n return (\n \n \n handleEdit({row: params.row})} \n color=\"primary\" style={{fontSize: '.9rem'}}>\n \n \n \n );\n },\n },\n ], [handleEdit, handleView]);\n return columns;\n}","import { CoreForm } from \"@kineticdata/react\";\nimport { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from \"@material-ui/core\";\nimport { Close } from \"@material-ui/icons\";\nimport React, { useCallback, useRef } from \"react\";\nimport { KappFormLayout, KappPending, useDialogButtonStyles, useFormStyle, useTabStyles } from \"../../../controls/shared.components\";\n\nexport const CmsAccessModal = (props) => {\n const {UserID, open, handleClose, handleSave, handleError} = props;\n\n const tabcls = useTabStyles();\n const fmrcls = useFormStyle();\n const btnCls = useDialogButtonStyles();\n\n const kForm = useRef();\n\n const handleLoaded = useCallback((form) => {\n kForm.current = form;\n }, [kForm]);\n\n const handleSaveChanges = useCallback(() => {\n kForm.current.submitPage();\n handleClose();\n }, [kForm, handleClose]);\n\n return (\n \n \n \n CMS Access\n \n \n \n \n \n \n \n Update \n Cancel \n \n \n )\n}\n\nexport const CmsAccessForm = ({UserID, onSave, onError, onLoadComplete }) => {\n return (\n \n {(auth2view && \n \n \n \n {(auth2view && !loadError &&\n \n ) ||\n \n You're not authorized to view/edit this contact\n }\n \n \n \n \n \n );\n};\n\n","import React from \"react\";\nimport { \n Toolbar, Box, Divider, FormGroup, FormControlLabel\n , Typography, Grid\n} from \"@material-ui/core\";\nimport { DappToolbarSwitch, ToolbarButton, useToolbarStyle } from \"../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { \n faAdd, faRefresh, faBalanceScale, faClock, faShoppingCart,\n faListCheck,//, faFilePen\n faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\n\nexport const JobsToolbar = (props) => {\n const {handleAdd, handleRefresh, ...other} = props;\n const cls = useToolbarStyle();\n\n return (\n \n }\n />\n \n );\n}\n\nexport const SingleJobToobar = (props) => {\n const {\n handleJobBalances, handleJobReports, handleProducts, handleRefresh,\n handleManagedServices, /*handleFiles,*/ rowSelected, showAll, handleShowAll,\n } = props;\n const cls = useToolbarStyle();\n\n const promptMsg = \"Please, select a job record to view \"\n\n return (\n \n }\n tooltip={`${(!rowSelected?.row && promptMsg) || ''} ${'Balances'}`}\n disabled={!rowSelected?.row}\n />\n }\n tooltip={`${(!rowSelected?.row && promptMsg) || ''} ${\"Job Reports\"}`} \n disabled={!rowSelected?.row}\n />\n {/* \n }\n tooltip={`${(!rowSelected?.row && promptMsg) || ''} ${\"Products\"}`} \n disabled={!rowSelected?.row}\n /> */}\n {/* }\n tooltip={`${(!rowSelected?.row && promptMsg) || ''} ${\"Managed Services\"}`} \n disabled={!rowSelected?.row}\n /> */}\n }\n tooltip=\"Files\"\n disabled={!rowSelected}\n /> */}\n \n \n }\n label={(showAll && \"Show All Jobs\") || \"Active Only\"}\n />\n \n {/* \n */}\n }\n />\n \n );\n}\n\n\nexport const JobDetailsToolbar = (props) => {\n const {title1, title2, handleExport, showExport} = props;\n const cls = useToolbarStyle();\n\n return (\n \n \n \n \n \n Agreement #: {title1}\n \n \n \n \n {title2}\n \n \n \n \n {(showExport &&\n }\n />) || <>}\n \n )\n}","import axios from 'axios';\nimport { APP_API_URL, CMSAPIKEY } from '../controls/dapp.constants';\nimport { fetchBridgedResource } from '@kineticdata/react';\n\nexport const getJobs = (props) => {\n const { user, apiParams } = props;\n\n const instance = axios.create({\n cancelToken: axios.CancelToken.source().token,\n headers: { \n 'X-User': JSON.stringify(user),\n CmsApiKey:CMSAPIKEY\n },\n });\n\n const apiCall = async () => await instance.get( \n `${APP_API_URL}/job`, {params: { ...apiParams }});\n\n return apiCall();\n}\n\nexport const getJobsFromBridge = async (props) => {\n const { usr, apiparms} = props;\n\n if (!usr || !apiparms) return;\n\n const bridgeCofig = {\n kappSlug: 'customer-portal',\n formSlug: 'shared-resources',\n bridgedResourceName: 'All Jobs',\n values: {\n GetTotal: apiparms.GetTotal, \n PageToken: apiparms.PageToken || ' ',\n PageSize: apiparms.PageSize,\n PageNum: apiparms.PageNum,\n 'X-User': JSON.stringify(usr),\n },\n };\n\n const data = await fetchBridgedResource(bridgeCofig);\n console.log(`right after api call`, data);\n return data;\n}\n\n","import React, { Fragment, useEffect, useState, useMemo } from \"react\";\nimport { getJobs, getJobsFromBridge } from \"../../apicalls/jobs.api\";\nimport PropTypes from 'prop-types';\nimport { getDataFromBridge } from \"../../apicalls/kapp.bridge\";\nimport { DappBooleanAsIcon } from \"../../controls/shared.components\";\nimport { Tooltip, IconButton, Link } from \"@material-ui/core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faCircleInfo, faXmark } from \"@fortawesome/free-solid-svg-icons\";\n\nexport const useJobsData = (props) => {\n const { usr, apiparms } = props;\n const [jobs, setJobs] = useState(null);\n\n useEffect(() => {\n try {\n getJobs({ user: usr, apiParams: apiparms })\n .then(response => {\n setJobs({ success: true, data: response.data });\n })\n .catch(error => {\n console.error(`jobs api call failed with: ${error.toString()}`);\n setJobs({ success: false, data: error.response.data });\n });\n } catch (exp) {\n console.error(`jobs api call failed with: ${exp.Message}`);\n setJobs({\n success: false,\n data: `jobs api call failed with: ${exp.toString()}`,\n });\n }\n }, [apiparms, usr]);\n\n return jobs;\n}\n\nuseJobsData.PropTypes = {\n usr: PropTypes.object.isRequired,\n apiParams: PropTypes.object.isRequired,\n}\n\nexport const useJobsDataBridge = props => {\n const { usr, apiparms } = props;\n const [jobs, setJobs] = useState(null);\n \n useEffect(() => {\n try {\n getJobsFromBridge({ usr, apiparms })\n .then(response => {\n setJobs({\n success: !!response.records,\n data: response.error || response,\n });\n })\n .catch(error => {\n setJobs({ success: false, data: error.data });\n });\n } catch (exp) {\n setJobs({ success: false, data: exp.Message });\n }\n }, [usr, apiparms]);\n return jobs;\n };\n\nexport const useJobsDataFromUniversalBridge = props => {\n const { usr, apiparms } = props;\n const [jobs, setJobs] = useState(null);\n \n useEffect(() => {\n try {\n getDataFromBridge({ \n usr: usr, \n apiparms: apiparms, \n bridgedResourceName: 'All Jobs'\n })\n .then(response => {\n setJobs({ success: true, data: response });\n })\n .catch(error => {\n setJobs({ success: false, data: error.response.data });\n });\n } catch (exp) {\n setJobs({ success: false, data: exp.Message });\n }\n }, [usr, apiparms]);\n return jobs;\n };\n\n\nexport const useJobsColumns = ({handleViewSummary}) => {\n return useMemo(() => [\n {\n field: \"Job Num\", headerName: \"Agreement #\", flex: .5, disableColumnMenu: true,\n sortable: false,\n renderCell: (params) => {\n return (\n \n )\n }\n },\n {\n field: \"InternalShortDesc\", headerName: \"Summary\", flex: 2, disableColumnMenu: true,\n },\n {\n field: \"Job Status\", headerName: \"Status\", width: 160, disableColumnMenu: true,\n sortable: false,\n },\n // {\n // field: \"Is Fixed Job\", headerName: \"Fixed\", width: 120, disableColumnMenu: true, sortable: false,\n // align: \"center\", renderCell: (params) => \n // },\n {\n field: \"Actions\", headerName: \" \", width: 100, disableColumnMenu: true, sortable: false,\n // renderCell: (params) => {\n // return (\n // \n // \n // handleEdit({row: params.row})} \n // color=\"primary\" style={{fontSize: '.9rem'}}>\n // \n // \n // \n // handleDelete({row: params.row})} \n // color=\"secondary\" style={{fontSize: '.9rem'}}>\n // \n // \n // \n // );\n // },\n },\n ], [handleViewSummary]);\n}\n\nexport const useJobReportColumns = ({ handleView }) => {\n return useMemo(\n () => [\n {\n field: 'MemberName',\n headerName: 'Staff Name',\n flex: 0.3,\n disableColumnMenu: true,\n // renderCell: params => {\n // return (params.row?.['L Name'] && `${params.row['L Name']}, ${params.row['F Name']}`) || '';\n // },\n },\n {\n field: 'Activity Type',\n headerName: 'Type',\n headerAlign: \"center\",\n flex: .2,\n align: \"center\",\n disableColumnMenu: true,\n },\n {\n field: 'Rate Desc',\n headerName: 'Rate',\n flex: .4,\n disableColumnMenu: true,\n },\n {\n field: \"Invoice ID\",\n headerName: \"Invoiced\",\n flex: .2, align: \"center\",\n disableColumnMenu: true,\n renderCell: (params) => {\n return \n \n handleView({ row: params.row })}\n color=\"primary\"\n style={{ fontSize: '.9rem' }}\n >\n \n \n );\n },\n },\n ],\n [handleView],\n );\n};\n\nexport const useJobSortMapper = () => {\n return useMemo(() => [\n {field: \"Job Num\", sortBy: \"JobNum\"},\n ], []);\n}\n\nexport const useJobReportSortMapper = () => {\n return useMemo(() => [\n {field: \"Job Num\", sortBy: \"JobNum\"},\n {field: 'F Name', sortBy: \"LName\"},\n {field: \"Activity Type\", sortBy: \"ActivityType\"},\n {field: \"Rate Desc\", sortBy: \"RateDesc\"},\n ], []);\n}","import { CoreForm } from \"@kineticdata/react\";\nimport { Button, Dialog, DialogActions, DialogContent, Typography } from \"@material-ui/core\";\nimport React from \"react\";\nimport { DappDialogTitle, KappFormLayout, KappPending, useDialogButtonStyles, useFormStyle } from \"../../controls/shared.components\";\n\nexport const JobSummaryModal = (props) => {\n const {record, open, handleClose} = props;\n const cls = useFormStyle();\n const btnCls = useDialogButtonStyles();\n return (\n \n \n \n {/* \n {record?.[\"Job Num\"].length > 0 ? record?.[\"Job Num\"] : record?.[\"Job ID\"]}\n */}\n {/* \n {record?.[\"InternalShortDesc\"]}\n */}\n {record?.[\"Job ID\"] && \n \n \n Close\n \n \n \n )\n}\n\nexport const JobSummaryViewForm = ({jobid}) => {\n return (\n \n history.push(\"/jobs/add\")} \n handleRefresh={onRefresh}\n handleJobBalances={() => showJobDetails(`/jobs/balances/`)}\n handleJobReports={() => showJobDetails(`/jobs/jobreports/`)}\n handleProducts={() => showJobDetails(`/jobs/products/`)}\n handleManagedServices={() => showJobDetails(`/jobs/services/`)}\n handleFiles={() => showJobDetails(`/jobs/files/`)}\n showAll={showAll}\n handleShowAll={showAllJobs}\n />\n \n \n \n );\n};\n\nconst initState = {page: 0, pageSize: rowsperpage[0]};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {...state, page: action.page};\n case \"pageSize\":\n return {...state, pageSize: action.pageSize};\n default:\n throw new Error();\n }\n}\n","import React, { useEffect, useState, useMemo } from \"react\";\nimport { getDataUniversal } from \"../../apicalls/universal.api\";\nimport PropTypes from 'prop-types';\nimport { DappBooleanAsIcon } from \"../../controls/shared.components\";\n\nexport const useManagedServicesData = (props) => {\n const { usr, apiparms } = props;\n const [srvcreq, setSrvcReq] = useState(null);\n\n useEffect(() => {\n try{\n getDataUniversal({user: usr, apiparams: apiparms, cmstype: \"managedservice\"}).then((response) => {\n setSrvcReq(response.data);\n }).catch((error) => {\n console.error(`managed services api ${error.toString()}`);\n });\n } catch (exp) {\n console.error(`managed services api ${exp.toString()}`);\n }\n\n }, [apiparms, usr]);\n\n return srvcreq;\n}\n\nuseManagedServicesData.PropTypes = {\n usr: PropTypes.object.isRequired,\n apiParams: PropTypes.object.isRequired,\n}\n\nexport const useManagedColumns = () => {\n const priceFormatInfo = useMemo(() => new Intl.NumberFormat('en-US', {\n style: 'currency', currency: 'USD', minimumFractionDigits: 2\n }), []);\n \n const quantityFormatInfo = useMemo(() => new Intl.NumberFormat('en-US', {\n minimumFractionDigits: 2\n }), []); \n \n return useMemo(() => [\n {\n field: \"Spacer\", headerName: \" \", width: 40, disableColumnMenu: true, sortable: false,\n },\n {\n field: \"RateDesc\", headerName: \"Code\", width: 120, disableColumnMenu: true,\n sortable: true,\n },\n {\n field: \"Description\", headerName: \"Description\", flex: 1.8, disableColumnMenu: true,\n sortable: true,\n },\n {\n field: \"SellPrice\", headerName: \"Price\", flex: .4, disableColumnMenu: true,\n valueFormatter: (params) => { return priceFormatInfo.format(params.value); }, \n align: 'right', sortable: true, type: \"number\",\n },\n {\n field: \"Quantity\", headerName: \"Quantity\", flex: .4, disableColumnMenu: true,\n valueFormatter: (params) => {return quantityFormatInfo.format(params.value);}, \n align: \"right\", sortable: true, type: \"number\",\n },\n // {\n // field: \"OKtoInvoice\", headerName: \"OK To Invoice\", type: \"boolean\", width: 160, \n // disableColumnMenu: true, align: \"center\", sortable: false,\n // renderCell: (params) => { return }\n // },\n {\n field: \"Spacer2\", headerName: \" \", width: 20, disableColumnMenu: true, sortable: false,\n }\n ], [priceFormatInfo, quantityFormatInfo]);\n}","import React, { Fragment, useState, useEffect, useCallback, useReducer } from 'react';\nimport { rowsperpage, WrapperPaper } from '../../controls/shared.components';\nimport { useManagedColumns } from './managed.hooks';\nimport { DataGridPro } from '@mui/x-data-grid-pro';\nimport { useGridStyles } from '../../controls/datagrid.striped';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { useParams } from 'react-router-dom';\nimport { JobDetailsToolbar } from '../jobs/jobs.toolbar';\nimport clsx from \"clsx\";\nimport swal from 'sweetalert';\nimport { utils, writeFileXLSX } from 'xlsx';\nimport { EXPORTALERTMSG } from '../../controls/dapp.constants';\n\nconst initLoadParams = {\n AscDesc: 'desc',\n GetTotal: true,\n IncludeClosedJobManagedServices: false,\n OkToInvoiceOnly: true,\n PageSize: rowsperpage[0],\n PageNum: 1,\n PageToken: ' ',\n SortField: 'POServiceDetailID',\n};\n\nexport const ManagedServices = props => {\n const { ...other } = props;\n const [apiparms, setApiparms] = useState();\n const [paging, dispatch] = useReducer(pageReducer, {page: 0, pageSize: rowsperpage[0]});\n const [griddata, setGridData] = useState([]);\n const [xuser, setXuser] = useState();\n const [jobbyid, setJobbyid] = useState();\n const [bridgeName, setBridgeName] = useState();\n const [toolbarTitle, setToolbarTitle] = useState();\n const gridClasses = useGridStyles();\n const [exportParams, setExportParams] = useState();\n const [showAlert, setShowAlert] = useState({\n open: false, severity:\"error\", message: \"\",\n onSnackBarClose: () => {},\n });\n\n const { jobid } = useParams();\n\n const dappCntx = useDappContext();\n useEffect(() => {\n dappCntx.dappSubtitle(\"Managed Services\");\n }, [dappCntx])\n\n useEffect(() => {\n if (!dappCntx.user) return;\n dispatch({type: \"loading\", loading: true}); \n setXuser(dappCntx.user.user);\n if (jobid){\n setApiparms({...initLoadParams, JobID: jobid})\n setJobbyid({JobID: jobid});\n setBridgeName('Managed Service by ID');\n } else {\n setApiparms({...initLoadParams})\n setBridgeName('All Managed Services');\n setToolbarTitle([` All Jobs`, ``]); \n }\n }, [dappCntx, jobid])\n\n useEffect(() => {\n if (!dappCntx.currentRecord) return;\n let jobNum = \n setToolbarTitle([`${dappCntx.currentRecord[\"Job Num\"]}`, `${dappCntx.currentRecord?.InternalShortDesc || ''}`]);\n }, [dappCntx.currentRecord])\n\n const jobRecord = useDataFromBridge({\n xUser: xuser, apiValues: jobbyid,\n bridgedResourceName: \"Job by ID\"\n });\n\n useEffect(() => {\n if (dappCntx.currentRecord) return;\n if (!jobRecord?.data) return;\n dappCntx.currentRecord = jobRecord?.data.record;\n }, [dappCntx.currentRecord, jobRecord]);\n\n const managedsrvcs = useDataFromBridge({\n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgeName\n });\n\n const managedsrvcsExport = useDataFromBridge({\n xUser: xuser, apiValues: exportParams,\n bridgedResourceName: \"AllManagedServicesExport\"\n });\n\n const managedCols = useManagedColumns();\n\n const handlePaginationChange = useCallback((model, details) => {\n if (model.pageSize !== paging.pageSize)\n model.page = 0;\n\n dispatch({ type: \"page\", page: model.page });\n dispatch({ type: \"pageSize\", pageSize: model.pageSize });\n dispatch({ type: \"loading\", loading: true });\n setApiparms({\n ...apiparms,\n PageNum: model.page + 1,\n PageSize: model.pageSize,\n });\n }, [apiparms, paging]);\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, message: message, \n onSnackBarClose: () => { setShowAlert({...showAlert, open: false, message: \"random\"})},\n });\n }, [showAlert]);\n\n useEffect(() => {\n if (!managedsrvcs) return;\n\n dispatch({type: \"loading\", loading: false});\n if (!managedsrvcs.success) {\n showError({message: managedsrvcs.data.Message })\n return;\n }\n\n if (managedsrvcs.success && !managedsrvcs.data){\n showError({message: `No data returned from bridge call`});\n return;\n } else if (managedsrvcs.data.error) {\n showError({message: managedsrvcs.data.error.message});\n return;\n }\n\n // setPageToken(managedsrvcs.data.metadata?.nextPageToken || managedsrvcs.data.NextPage || '');\n let data = managedsrvcs.data.records || managedsrvcs.data.Data;\n setGridData(data.map((row, indx) => { return { ...row, id: indx };}),\n );\n // eslint-disable-next-line\n }, [managedsrvcs]);\n\n useEffect(() => {\n if (!managedsrvcsExport || !managedsrvcsExport?.data?.records) return;\n\n const createExcel = (exportData) => {\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `MANAGED_SERVICES_CMS_${stamp}.xlsx`;\n\n const ws = utils.json_to_sheet(exportData);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, `Services-${dappCntx.currentRecord[\"Job Num\"]}`);\n writeFileXLSX(wb, fileName);\n }\n createExcel(managedsrvcsExport?.data?.records);\n\n }, [managedsrvcsExport, dappCntx])\n\n const handleSortChange = useCallback((sortmodel) => {\n if (!sortmodel) return;\n if (!!sortmodel && sortmodel.length <= 0) return;\n if (apiparms.SortField === sortmodel[0].field && apiparms.AscDesc === sortmodel[0].sort) return;\n\n setGridData([]);\n dispatch({type: \"loading\", loading: true});\n \n setApiparms({\n ...apiparms, \n SortField: sortmodel[0].field,\n AscDesc: sortmodel[0].sort,\n });\n }, [apiparms]);\n\n const export2excel = useCallback(() => {\n swal({\n title: \"Export Manged Services List\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSG.replace('REPLACE-STRING', 'a List of Managed Services'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && setExportParams({\n ...apiparms,\n PageNum: 1,\n PageSize: 2000,\n });\n });\n }, [apiparms]);\n \n return (\n \n \n \n \n );\n};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {...state, page: action.page}\n case \"pageSize\": \n return {...state, pageSize: action.pageSize}\n case \"loading\": \n return {...state, loading: action.loading}\n default: \n throw new Error();\n }\n}\n","import React, { Fragment } from \"react\";\nimport { useEffect, useState, useMemo } from \"react\";\nimport { getDataUniversal } from \"../../apicalls/universal.api\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faFileInvoiceDollar } from \"@fortawesome/free-solid-svg-icons\";\nimport PropTypes from 'prop-types';\nimport { IconButton, Link, Tooltip } from \"@material-ui/core\";\n\nexport const useBalancesData = (props) => {\n const { usr, apiparms } = props;\n const [srvcreq, setSrvcReq] = useState(null);\n\n useEffect(() => {\n try{\n getDataUniversal({user: usr, apiparams: apiparms, cmstype: \"customerbalance\"}).then((response) => {\n setSrvcReq(response.data);\n }).catch((error) => {\n console.error(`managed services api ${error.toString()}`);\n });\n } catch (exp) {\n console.error(`managed services api ${exp.toString()}`);\n }\n\n }, [apiparms, usr]);\n\n return srvcreq;\n}\n\nuseBalancesData.PropTypes = {\n usr: PropTypes.object.isRequired,\n apiParams: PropTypes.object.isRequired,\n}\n\nexport const SortMapper = [\n {field: \"Transaction Number\", sortBy: \"TransNum\"},\n {field: \"Transaction Date\", sortBy: \"TransDate\"},\n {field: \"Job Number\", sortBy: \"JobNum\"}\n]\n\nexport const useBalancesColumns = ({handleViewDetails, handleViewTime}) => {\n const priceFormatInfo = useMemo(() => new Intl.NumberFormat('en-US', {\n style: 'currency', currency: 'USD', minimumFractionDigits: 2\n }), []);\n \n return useMemo(() => [\n {\n field: \"Spacer\", headerName: \" \", width: 40, disableColumnMenu: true, sortable: false,\n },\n {\n field: \"Transaction Number\", headerName: \"Invoice Num\", flex: 1, disableColumnMenu: true,\n sortable: false, \n renderCell: (params) => {\n const row = params.api.getRow(params.id);\n return (\n (row[\"Transaction Type\"] === \"INVOICE\" &&\n \n ) || {params.row[\"Transaction Number\"]} \n )\n }\n },\n {\n field: \"Include Time Activity\", headerName: \"Time Activity\", flex: 0.5, disableColumnMenu: true,\n sortable: false,\n renderCell: (params) => {\n return (\n ((Number(params.row?.[\"Include Time Activity\"]) === -1) &&\n \n ) || <>\n )\n }\n }, \n {\n field: \"Transaction Type\", headerName: \"Type\", flex: 0.5, disableColumnMenu: true,\n sortable: false,\n },\n {\n field: \"Transaction Date\", headerName: \"Date\", flex: 1, disableColumnMenu: true,\n sortable: false,\n renderCell: (params) => {\n const trDate = params.row['Transaction Date'];\n return trDate && `${new Date(trDate).toLocaleDateString()} ${new Date(trDate).toLocaleTimeString()}`;\n } \n },\n {\n field: \"Amount\", headerName: \"Total\", width: 160, headerAlign: \"right\", \n disableColumnMenu: true, align: \"right\", sortable: false,\n cellClassName: (params) => { \n return (\n (params.row[\"Transaction Type\"] === \"PAYMENT\" || params.row[\"Transaction Type\"] === \"CREDIT MEMO\") \n && \"cell-total-amount-negative\") || \"cell-total-amount\" \n },\n valueFormatter: (params) => { \n return priceFormatInfo.format((params.value < 0 && params.value * -1) || params.value); \n }\n },\n {\n field: \"Actions\", headerName: \" \", width: 40, disableColumnMenu: true,\n sortable: false,\n renderCell: (params) => {\n return (\n (params.row[\"Transaction Type\"] === \"INVOICE\" &&\n \n \n handleViewDetails({invoiceRecord: params.row})}>\n \n \n \n ) || <>\n );\n },\n },\n ], [priceFormatInfo, handleViewDetails, handleViewTime]);\n}","import React, { Fragment } from \"react\";\nimport { GridPagination } from \"@mui/x-data-grid\";\nimport { Typography, TextField } from \"@mui/material\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faDollarSign } from \"@fortawesome/free-solid-svg-icons\";\nimport { makeStyles } from \"@material-ui/core\";\n\nconst useFooterStyles = makeStyles((theme) => ({\n 'grid-pagination-footer': {\n flex: 1,\n },\n 'total-label': {\n marginRight: \"1rem !important\",\n },\n 'footer-total-wrapper': {\n flex: 0.18,\n display: \"flex\",\n marginRight: \"1rem !important\",\n '& .footer-total-field': {\n '& .dollar-sign': {\n color: \"window\",\n },\n '& .total-text-field': {\n textAlign: \"end\",\n color: \"window\",\n },\n },\n },\n}));\n\nexport const DappGridFooter = (props) => { \n const {total, ...other} = props;\n const stls = useFooterStyles();\n return (\n \n \n Total: \n \n \n \n );\n }\n ","import React, { Fragment, useState, useEffect, useCallback } from 'react';\nimport { rowsperpage, WrapperPaper } from '../../controls/shared.components';\nimport { SortMapper, useBalancesColumns } from './balances.hooks';\nimport { DataGridPro } from '@mui/x-data-grid-pro';\nimport { useGridStyles } from '../../controls/datagrid.striped';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { useReducer } from 'react';\nimport { JobDetailsToolbar } from '../jobs/jobs.toolbar';\nimport clsx from \"clsx\";\nimport { TextField, Typography } from '@mui/material';\nimport { makeStyles } from '@material-ui/core';\n// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n// import { faDollarSign } from '@fortawesome/free-solid-svg-icons';\nimport { DappGridFooter } from '../../controls/grid.footer';\nimport swal from 'sweetalert';\nimport { utils, writeFileXLSX } from 'xlsx';\nimport { EXPORTALERTMSG } from '../../controls/dapp.constants';\n\nconst initLoadParams = {\n AscDesc: 'desc',\n GetTotal: true, \n OrderBy: 'TransID',\n PageNum: ' ',\n asOfDate: ' ',\n PageSize: ' ',\n};\n\nconst bridgedResourceName = \"All Customer Balances\";\nconst bridgedResourceNameExport = \"AllCustomerBalancesExport\";\n\nexport const CustomerBalances = props => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState(initLoadParams);\n const [griddata, setGridData] = useState([]);\n const [toolbarTitle, setToolbarTitle] = useState();\n const [jobbyid, setJobbyid] = useState();\n const gridClasses = useGridStyles();\n const [asOfDate, setAsOfDate] = useState(new Date(new Date().getFullYear() - 1, 0, 1).toLocaleDateString());\n const [total, setTotal] = useState(0);\n const [balanceForward, setBalanceForward] = useState(0);\n const [showAlert, setShowAlert] = useState({\n open: false, message: '', severity: \"error\", \n onSnackBarClose: () => {},\n });\n \n const [exportParams, setExportParams] = useState();\n\n const [pagingState, dispatch] = useReducer(pageReducer, initState);\n const [xuser, setXuser] = useState();\n\n const { jobid } = useParams();\n const dappCntx = useDappContext();\n const history = useHistory();\n\n useEffect(() => {\n if(!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx, jobid, apiparms])\n\n useEffect(() => {\n setApiparms({\n ...initLoadParams, \n JobID: jobid,\n asOfDate: asOfDate,\n });\n setJobbyid({JobID: jobid}); \n }, [jobid, asOfDate])\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Customer Balances\");\n }, [dappCntx])\n\n useEffect(() => {\n if (!dappCntx.currentRecord) return;\n let jobNum = dappCntx.currentRecord[\"Job Num\"].length > 0 ? dappCntx.currentRecord[\"Job Num\"] : dappCntx.currentRecord[\"Job ID\"]\n setToolbarTitle([`${jobNum}`, `${dappCntx.currentRecord?.InternalShortDesc || ''}`]);\n }, [dappCntx.currentRecord])\n\n const jobRecord = useDataFromBridge({\n xUser: xuser, apiValues: jobbyid,\n bridgedResourceName: \"Job by ID\"\n });\n\n useEffect(() => {\n if (!jobRecord || !jobRecord?.data) return;\n dappCntx.setCurrentRecord(jobRecord?.data.record);\n }, [dappCntx, jobRecord]);\n\n const balances = useDataFromBridge({ \n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgedResourceName\n });\n\n const balancesExport = useDataFromBridge({ \n xUser: xuser, apiValues: exportParams,\n bridgedResourceName: bridgedResourceNameExport\n });\n\n const gridcols = useBalancesColumns({\n handleViewDetails: ({invoiceRecord}) => {\n dappCntx.setCurrentRecord(invoiceRecord);\n history.push(`/jobs/balances/details/${invoiceRecord[\"Transaction ID\"]}`);\n },\n handleViewTime: ({invoiceID}) => {\n history.push(`/jobs/jobreports/${jobbyid.JobID}/${invoiceID}`);\n }\n });\n\n const handlePaginationChange = useCallback((model, details) => {\n if (model.pageSize !== pagingState.pageSize)\n model.page = 0;\n\n dispatch({type: \"page\", page: model.page});\n dispatch({type: \"pageSize\", pageSize: model.pageSize});\n }, [pagingState],\n );\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n\n useEffect(() => {\n if (!balances || !balances?.data) return;\n\n setLoading(false);\n if (!balances.success) {\n showError({message: balances.data.Message || balances.data.message});\n return;\n } else if (balances.data.error) {\n showError({message: balances.data.error.message});\n return;\n }\n\n const balanceForward = balances.data.records.find(x => x[\"Transaction Type\"] === \"Balance Forward\");\n if (balanceForward){\n const indexOf = balances.data.records.indexOf(balanceForward);\n balances.data.records.splice(indexOf, 1);\n }\n setBalanceForward(balanceForward?.Amount || 0);\n\n const trxTotal = balances.data.records.find(x => x[\"Transaction Type\"] === \"Total\");\n if (trxTotal){\n const indexOftotal = balances.data.records.indexOf(trxTotal);\n balances.data.records.splice(indexOftotal, 1);\n }\n setTotal((balanceForward?.Amount || 0) + balances.data.records.reduce((tot, rec) => tot + (((rec[\"Transaction Type\"] !== \"INVOICE\" && 1) || -1) * parseFloat(rec.Amount, 2)), total));\n\n const data2show = balances.data.records.map((row, indx) => { \n return {...row, id: indx}\n }).sort((a, b) => { \n let frst = ((Number(a[\"InvoiceAppliedID\"]) < 0 && Number(a[\"Transaction ID\"])) || Number(a[\"InvoiceAppliedID\"]));\n let scnd = ((Number(b[\"InvoiceAppliedID\"]) < 0 && Number(b[\"Transaction ID\"])) || Number(b[\"InvoiceAppliedID\"]));\n return (frst - scnd); \n });\n\n setGridData(data2show);\n // eslint-disable-next-line\n }, [balances]);\n\n const handleSortChange = useCallback((props) => {\n if (!props) return;\n const fld = SortMapper.find(x => x.field === props[0]?.field)?.sortBy;\n if (apiparms.OrderBy === fld && apiparms.AscDesc === props[0]?.sort) {\n return;\n }\n setApiparms({...apiparms, AscDesc: `${props[0].sort}`, OrderBy: `${fld}`});\n }, [apiparms]);\n\n const handleAsOfDateChange = useCallback((e) => { \n setAsOfDate(e.target.value)\n setApiparms({...apiparms, asOfDate: e.target.value})\n }, [apiparms]);\n\n useEffect(() => {\n if (!balancesExport || !balancesExport.data?.records) return;\n\n const export2excel = (exportData) => {\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `INVOICES_CMS_${stamp}.xlsx`;\n \n const ws = utils.json_to_sheet(exportData);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, \"Invoices\");\n writeFileXLSX(wb, fileName);\n }\n export2excel(balancesExport?.data?.records);\n // eslint-disable-next-line\n }, [balancesExport]);\n\n const handleExport = useCallback(() => {\n swal({\n title: \"Export Invoices\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSG.replace('REPLACE-STRING', 'Inovices for this Job'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && setExportParams({...apiparms, PageNum: 1, PageSize: 2000});\n });\n }, [apiparms]);\n\n return (\n \n \n \n \n \n \n );\n};\n\n\nconst initState = {page: 0, pageSize: rowsperpage[0]};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {page: action.page};\n case \"pageSize\":\n return {pageSize: action.pageSize};\n default:\n throw new Error();\n }\n}\n\nconst useBalanceHeaderStyles = makeStyles((theme) => ({\n balanceHeader: {\n display: \"flex\", \n flexFlow: \"row\", \n margin: \"0.8rem !important\",\n '& .spacer': {\n flex: 0.5\n },\n '& .header-label': {\n flexWrap: \"wrap\", \n display: \"flex\", \n alignContent: \"center\", \n marginRight: \"1rem\",\n fontWeight: 600, \n color: \"#7788BE\", \n },\n '& .header-forward': {\n flex: 1, \n display: \"flex\", \n justifyContent: \"flex-end\",\n },\n },\n 'date-field': {\n color: \"#7788BE !important\",\n fontWeight: \"700 !important\",\n },\n \"total-field\": {\n color: \"#7788BE !important\",\n textAlign: \"end\",\n fontWeight: \"700 !important\",\n },\n}));\n\nconst BalanceHeader = (props) => {\n const {asOfDate, handleDateChange, /*balanceForward*/} = props;\n const stls = useBalanceHeaderStyles();\n return (\n \n \n \n As of Date: \n \n \n {/* \n Balance Forward: \n \n }}\n inputProps={{\n className: stls['total-field'],\n }}\n />\n */}\n \n )\n}","import { Toolbar, Box } from \"@material-ui/core\";\nimport React, { useCallback } from \"react\";\nimport { \n FileCopyOutlined as FileIcon, \n SettingsApplicationsOutlined as SettingIcon \n} from \"@material-ui/icons\";\nimport { ToolbarButton } from \"../../controls/shared.components\";\n\nexport const SurveyToolbar = (props) => {\n const {...other} = props;\n\n const onFileClick = useCallback((event) => {\n console.log(`clicked on ${event.target}`)\n }, [])\n\n return (\n \n console.log(`clicked on ${event.target}`)}\n tooltip=\"Survey Settings\"\n icon={ \n );\n}\n","import React, { useEffect, useState, useMemo } from \"react\";\nimport { getDataUniversal } from \"../../apicalls/universal.api\";\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\n\nexport const useSurveyData = (props) => {\n const { usr, apiparms } = props;\n const [surveys, setSurveys] = useState(null);\n\n useEffect(() => {\n try{\n getDataUniversal({user: usr, apiparams: apiparms, cmstype: \"survey\"}).then((response) => {\n setSurveys({success: true, data: response.data});\n }).catch((error) => {\n setSurveys({success: false, data: error.response.data});\n });\n } catch (exp) {\n setSurveys({success: false, data: `failed to reach api with: ${exp.message}`});\n }\n\n }, [apiparms, usr]);\n\n return surveys;\n}\n\nuseSurveyData.PropTypes = {\n usr: PropTypes.object.isRequired,\n apiParams: PropTypes.object.isRequired,\n}\n\nexport const useSurveyColumns = () => {\n // const priceFormatInfo = useMemo(() => new Intl.NumberFormat('en-US', {\n // style: 'currency', currency: 'USD', minimumFractionDigits: 2\n // }), []);\n \n // const quantityFormatInfo = useMemo(() => new Intl.NumberFormat('en-US', {\n // minimumFractionDigits: 2\n // }), []);\n \n return useMemo(() => [\n {\n field: \"Spacer\", headerName: \" \", width: 40, disableColumnMenu: true,\n },\n {\n field: \"DateSubmitted\", headerName: \"Submitted\", flex: .5, \n disableColumnMenu: true, type: \"date\"\n },\n {\n field: \"Source\", headerName: \"Source\", flex: 1, disableColumnMenu: true,\n },\n {\n field: \"SubmittedByContact\", headerName: \"Submitted By\", flex: 1, disableColumnMenu: true,\n },\n {\n field: \"IncidentID\", headerName: \"Incident #\", flex: 1, \n disableColumnMenu: true, align: \"center\",\n },\n {\n field: \"Response\", headerName: \"Response\", width: 160, disableColumnMenu: true,\n renderCell: (params) => (\n params.value > 0 \n ? \n Survey Charts will be shown here\n \n )\n}","import React, { Fragment, useState, useEffect, useCallback } from 'react';\nimport { rowsperpage, WrapperPaper } from '../../controls/shared.components';\nimport { SurveyToolbar } from './survey.toolbar';\nimport { useSurveyColumns } from './survey.hook';\nimport { DataGrid } from '@material-ui/data-grid';\nimport { TablePagination } from '@material-ui/core';\nimport { useGridStyles } from '../../controls/datagrid.striped';\nimport { SurveyCharts } from './survey.charts';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\n\nconst initLoadParams = {\n GetTotal: true,\n OrderBy: 'SurveyInvitationID DESC',\n // PageNum: 1,\n PageSize: rowsperpage[0],\n};\n\nexport const Surveys = props => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState(initLoadParams);\n const [griddata, setGridData] = useState([]);\n const [pageToken, setPageToken] = useState();\n const [xuser, setXuser] = useState();\n const gridClasses = useGridStyles();\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: 'success', message: '',\n onSnackBarClose: () => {},\n });\n\n const dappCntx = useDappContext();\n useEffect(() => dappCntx.dappSubtitle(\"Surveys\", () => {}), \n // eslint-disable-next-line\n [dappCntx.title]);\n\n const surveys = useDataFromBridge({usr: xuser, apiparms,});\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx])\n\n const gridColumns = useSurveyColumns();\n\n const handlePageSizeChange = useCallback(\n newSize => {\n console.log(`page size change to: ${newSize}`);\n setApiparms({ ...apiparms, PageSize: newSize, PageNum: 1 });\n },\n [apiparms],\n );\n\n const handlePageChange = useCallback(\n newPage => {\n console.log(`switching to new page: ${newPage}`);\n setApiparms({ ...apiparms, PageToken: pageToken });\n },\n [apiparms, pageToken],\n );\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n\n useEffect(() => {\n if (!surveys) return;\n\n setLoading(false);\n if (!surveys.success) {\n showError({message: surveys.data.Message});\n return;\n }\n\n setPageToken(surveys.data.NextPage);\n setGridData(\n surveys.data.Data.map((row, indx) => {\n return { ...row, id: indx };\n }),\n );\n // eslint-disable-next-line\n }, [surveys]);\n\n return (\n \n \n \n \n );\n};\n\n\n\n","import axios from 'axios';\nimport { headers, REPORT_API_URL } from '../controls/dapp.constants';\n\nexport const getReportEmbedToken = (props) => {\n const {reportId, dataSetId, userName, reportToken} = props;\n\n const apiCall = async () => await axios.get(\n `${REPORT_API_URL}/${reportId}`,\n {\n cancelToken: axios.CancelToken.source().token,\n withCredentials: false,\n headers: { ...headers, \n token: reportToken,\n dataset: dataSetId,\n username: userName\n }\n }\n );\n\n return apiCall();\n}\n","import { useState, useEffect } from 'react';\nimport { getReportEmbedToken } from '../../apicalls/report.api';\nimport { POWERBITOKEN } from '../../controls/dapp.constants';\n\nexport const useReportToken = props => {\n const { reportId, dataSetId, userName } = props;\n const [result, setResult] = useState({\n success: false,\n reportToken: null,\n errorMessage: '',\n });\n\n useEffect(() => {\n if (!reportId || !dataSetId || !userName){\n return;\n } \n try {\n getReportEmbedToken({\n reportId: reportId,\n dataSetId: dataSetId,\n userName: userName,\n reportToken: POWERBITOKEN,\n })\n .then(response => {\n setResult({\n success: true,\n reportToken: response.data,\n errorMessage: '',\n });\n })\n .catch(error => {\n setResult({\n success: false,\n reportToken: null,\n errorMessage: `API call to get report embed token has failed with ${error.message}`,\n });\n });\n } catch (ex) {\n setResult({\n success: false,\n reportToken: null,\n errorMessage: `Failed to get report embed token with: ${ex.Message}`,\n });\n }\n }, [reportId, dataSetId, userName]);\n\n return result;\n};\n","import React, {useState, useEffect} from \"react\";\nimport { Typography } from '@material-ui/core';\nimport { PowerBIEmbed } from \"powerbi-client-react\";\nimport { models } from 'powerbi-client';\nimport { useReportToken } from \"./token.hook\";\nimport { useLocation } from \"react-router\";\nimport { EMBEDURL as reportUrl, LIVEPOWERBI, LINKTIMEOUT } from \"../../controls/dapp.constants\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\n\n\nconst reportConfig = {\n type: 'report',\n tokenType: models.TokenType.Embed,\n embedUrl: reportUrl,\n id: undefined,\n accessToken: undefined,\n settings: {\n filterPaneEnabled: false,\n panes: {\n pageNavigation: {\n visible: true,\n position: models.PageNavigationPosition.Left\n }\n }\n }\n}\n\nconst reportLinks = [{\n pathname: \"/reports/5cd25672-8481-4423-8d43-1adda13e07da\", \n params: {\n EmbedReportId: '5cd25672-8481-4423-8d43-1adda13e07da',\n DatasetId: '5de85eb0-e078-4db2-9e26-6d84b5e56ae3',\n Username: 'ddxdemouser@dataprise.com',\n Name: 'Support Tickets',\n }\n},{\n pathname: \"/reports/4e3b7b07-a7e5-4146-87f9-d3ca2d8f03b3\", \n params: {\n EmbedReportId: '4e3b7b07-a7e5-4146-87f9-d3ca2d8f03b3',\n DatasetId: '6d070b50-20db-4f63-9634-0a5a1a573efc',\n Username: 'ddxdemouser@dataprise.com',\n Name: 'Infrastructure Management',\n }\n},{\n pathname: \"/reports/0d656542-aada-4d93-b95e-7d8d861e6340\", \n params: \n {\n EmbedReportId: '0d656542-aada-4d93-b95e-7d8d861e6340',\n DatasetId: 'a9499f4c-641a-4214-a660-60f0833c0961',\n Username: 'ddxdemouser@dataprise.com', \n Name: 'Cyber Security',\n }\n},{\n pathname: \"/reports/b1af8913-80d5-4f90-bc94-771a1511ed88\", \n params: \n {\n EmbedReportId: 'b1af8913-80d5-4f90-bc94-771a1511ed88',\n DatasetId: '505c6a9d-2480-4099-a40a-6300a89362ef',\n Username: 'ddxdemouser@dataprise.com', \n Name: 'Backup / Disaster Recovery',\n }\n}]\n\nconst defaultReportValue = {EmbedReportId: null, DatasetId: null, Username: null};\n\nexport const PowerBIEmbeddedReport = () => {\n const [repProp, setRepProp] = useState(defaultReportValue);\n // const [report, setReport] = useState();\n const dataFromLink = useLocation();\n const dappCntx = useDappContext();\n const liveReports = LIVEPOWERBI && LIVEPOWERBI === 'true';\n const linkTime = LINKTIMEOUT;\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: \"error\", message: \"\",\n onSnackBarClose: () => {},\n });\n\n const currRep = reportLinks.find((rep) => rep.pathname === dataFromLink.pathname);\n\n useEffect(() => {\n if (!dappCntx || !dappCntx.user) return;\n setRepProp({\n EmbedReportId: currRep.params.EmbedReportId,\n DatasetId: currRep.params.DatasetId,\n Username: (!liveReports && currRep.params.Username) || dappCntx?.user?.user.UserName,\n // Username: dappCntx?.user?.user.UserName,\n });\n dappCntx.dappSubtitle(currRep.params.Name, () => {});\n }, [dappCntx, currRep.params, liveReports])\n\n \n const [config, setConfig] = useState(undefined);\n\n const token = useReportToken({\n reportId: repProp.EmbedReportId,\n dataSetId: repProp.DatasetId,\n userName: repProp.Username,\n });\n\n const eventHandlersMap = new Map([\n ['loaded', () => {\n console.log('Report loaded...');\n }],\n ['rendered', () => {\n console.log('Report rendered...');\n }],\n ['error', (event) => {\n if (event){\n console.error(event.detail);\n }\n }]\n ]);\n\n useEffect(() => {\n if (!!config && !!config.id && config.id !== repProp.EmbedReportId) { \n setTimeout(() => {\n setConfig({...reportConfig, accessToken: null, id: repProp.EmbedReportId})\n }, linkTime || 500);\n } else {\n if (!token.success && token.errorMessage !== \"\"){\n setShowAlert({\n open: true, severity: \"error\", message: token.errorMessage,\n onSnackBarClose: () => setShowAlert({open: false, severity: \"error\", message: \"random\"}), \n })\n }\n !!token.reportToken &&\n setConfig({...reportConfig, accessToken: token.reportToken, id: repProp.EmbedReportId})\n }\n // eslint-disable-next-line\n }, [token, repProp, reportConfig]);\n\n return (\n \n {!!config && config.accessToken ?\n {\n // console.log(`Embedded object of type ${embed.embedtype} received`, config);\n // setReport(embed);\n }}\n /> : Loading Report...
}\n \n );\n}\n\nexport const PowerBIEmbeddedReport_Mod = () => {\n const dataFromLink = useLocation();\n\n const currRep = reportLinks.find((rep, idx) => rep.pathname === dataFromLink.pathname);\n const { EmbedReportId, DatasetId, Username} = currRep.params || defaultReportValue;\n\n const [report, setReport] = useState();\n const [config, setConfig] = useState(undefined);\n\n const token = useReportToken({\n reportId: EmbedReportId, \n dataSetId: DatasetId, \n userName: Username, \n });\n\n const eventHandlersMap = new Map([\n ['loaded', () => {\n console.log('Report loaded', JSON.stringify(report));\n }],\n ['rendered', () => {\n console.log('Report rendered', JSON.stringify(report));\n }],\n ['error', (event) => {\n if (event){\n console.error(event.detail);\n }\n }]\n ]);\n\n useEffect(() => {\n if (!!config && config.id !== EmbedReportId){\n setConfig(undefined);\n } else {\n setConfig({...reportConfig, accessToken: token, id: EmbedReportId})\n }\n // eslint-disable-next-line\n }, [token, EmbedReportId]);\n\n return (\n \n {!!config && config.accessToken ?\n {\n console.log(`Embedded object of type ${embed.embedtype} received`);\n setReport(embed);\n }}\n /> : <>}\n \n );\n}\n\n\n\n\n","import React from \"react\";\nimport { Toolbar, Divider, Box, Grid, Typography, MenuItem, FormLabel, Select, FormControl, debounce, Tooltip } from \"@material-ui/core\";\nimport { useToolbarStyle } from \"../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { \n faExclamation, faChartBar, faFolder, faAdd, faRefresh, faSearch, faEdit, faFileExcel, faStar,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { ToolbarButton } from \"../../controls/shared.components\";\nimport { useCallback, useState } from \"react\";\nimport { blue } from \"@material-ui/core/colors\";\nimport { useTicketsContext } from \"./incident.provider\";\nimport { SaveCancelToolbarButtons } from \"../../controls/savecancel.buttons\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { Fragment } from \"react\";\nimport { QuickLookup } from \"../../controls/search.box\";\nimport { useDappContext } from \"../../auth/dapp.context\";\n\nexport const IncidentEditToolbar = (props) => {\n const { \n handleActions, handleStats, handleFiles, isNew, title1, title2,\n handleSaveForm, handleCancelChanges, type, editEnabled,\n handleStatusUpdate,\n } = props;\n\n const cls = useToolbarStyle();\n const location = useLocation();\n const history = useHistory();\n const dappCntx = useDappContext();\n\n return (\n \n {(editEnabled &&\n history.push(location.pathname.replace(\"view\", \"edit\"))}\n tooltip=\"Edit Ticket\"\n icon={}\n />) || {\n handleActions(event);\n }}\n icon={}\n tooltip=\"Actions\"\n style={(isNew && {display: \"none\"}) || {display: \"\"}}\n />\n }\n tooltip=\"Stats\"\n style={{display: \"none\"}}\n />\n }\n tooltip=\"Files\"\n style={{display: \"none\"}}\n />\n {/* }\n tooltip=\"Request Status Update\"\n style={(((isNew || (parseInt(dappCntx?.currentRecord?.AssignedCCWebUserID || 0 ) > 0)) && {display: \"none\"})) || {display: ''}}\n /> */}\n \n \n \n \n {(!isNew && `Ticket #: ${title1}`) || 'New Ticket'}\n \n \n \n {(!isNew &&\n \n \n {title2}\n \n ) || <>}\n \n \n \n {(type === 'edit' && \n \n )\n} \n\nexport const IncidentToolbar = (props) => {\n const {\n onAdd, onRefresh, ticketType, \n handleStatusChange, handleDispositionChange,\n handleSearch, handleExport, ...other\n } = props;\n const [statusvalue, setStatusValue] = useState(\"Open\");\n const [dispositionValue, setDispositionValue] = useState(\" \");\n const cls = useToolbarStyle();\n const ticketsCntx = useTicketsContext();\n const dappCntx = useDappContext();\n\n const onStatusChange = useCallback((e) => {\n setStatusValue(e.target.value);\n if (!!handleStatusChange && typeof handleStatusChange === 'function'){\n handleStatusChange({status: e.target.value});\n }\n }, [handleStatusChange]);\n\n const onDispositionChange = useCallback((e) => {\n setDispositionValue(e.target.value);\n if (!!handleDispositionChange && typeof handleDispositionChange === 'function'){\n handleDispositionChange({disposition: e.target.value});\n }\n }, [handleDispositionChange]);\n\n const onFilter = useCallback(() => {\n ticketsCntx.openSearchDialog();\n }, [ticketsCntx]);\n\n const onSearchChange = debounce((val) => {\n if (handleSearch && typeof handleSearch === 'function'){\n handleSearch(val);\n }\n }, 800);\n\n return (\n \n \n \n \n Status \n \n \">(All) \n Open \n Closed \n Escalation \n {/* Paused */}\n On Hold \n \n \n \n {/* \n \n Disposition \n \n (None) \n Resolved \n Unresolved \n \n \n */}\n \n \n onSearchChange(e.target.value)} \n />\n ) || }\n />\n \n ) \n}","import React, { Fragment, useState, useCallback, useEffect, useRef } from \"react\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useFormStyle, WrapperPaper } from \"../../controls/shared.components\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { useHistory, useLocation, useParams, Prompt } from \"react-router-dom\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { IncidentEditToolbar } from \"./incidents.toolbar\";\nimport { Box, Grid, makeStyles, Toolbar, Typography } from \"@material-ui/core\";\nimport { IncidentStats } from \"./incident.stats\";\nimport { useDataFromBridge } from \"../../controls/custom.hooks\";\nimport { REQUEST_STATUS_UPDATE_WEBAPI_INC, SRVCREQROUTE } from \"../../controls/dapp.constants\";\nimport swal from \"sweetalert\";\nimport { cancelApiCall, requestStatusUpdate } from \"../../apicalls/contact.api\";\n\nexport const useAuthStyle = makeStyles(() => ({\n withAuth: {\n display: \"flex\",\n flex: \"1 1 auto\",\n alignItems: \"center\",\n width: \"100%\",\n '& .MuiTypography-root': {\n display: 'flex',\n flexFlow: \"column\",\n width: \"inherit\",\n alignItems: \"center\",\n }\n }\n}))\n\nexport const AddEditIncident = ({type}) => {\n const { id } = useParams();\n const history = useHistory();\n const location = useLocation();\n const cls = useFormStyle();\n const [ticketbyid, setTicketByID] = useState();\n const [toolbarTitle, setToolbarTitle] = useState();\n const [xuser, setXuser] = useState();\n const [auth2view, setAuth2View] = useState(true);\n const [editEnabled, setEditEnabled] = useState(false);\n const [ask2leave, setAsk2Leave] = useState(true);\n\n const [showMessage, setShowMessage] = useState({\n open: false, severity: \"error\", message: \"\",\n onSnackBarClose: () => {}, \n });\n\n const frm = useRef();\n\n const authCls = useAuthStyle();\n\n const dappCntx = useDappContext();\n\n useEffect(() => {\n dappCntx.dappSubtitle(`${(type === \"view\" && \"View\") || \"Edit\"} Incident`);\n }, [dappCntx, id, type]);\n\n const handleError = useCallback((e) => {\n console.error(`something failed on form`, e);\n let message;\n setShowMessage({ ...showMessage, \n open: true, message: message || message || `something failed on form`, severity: \"error\",\n onSnackBarClose: () => setShowMessage({ open: false, message: 'random'}),\n });\n }, [showMessage]);\n\n const handleSaveComplete = useCallback(() => {\n setShowMessage({ ...showMessage,\n open: true, message: \"Incident data has been successfully updated\",\n severity: \"success\", onSnackBarClose: () => setShowMessage({ open: false, message: 'random'})\n })\n console.log(`trying to get prior location`, history.state?.prevPath || location.state?.prevPath);\n setTimeout(() => { history.replace(location.state?.prevPath || \"/incidents\") }, 2500);\n }, [showMessage, history, location]);\n\n useEffect(() => {\n if (!dappCntx.currentRecord) return;\n setToolbarTitle([`${dappCntx.currentRecord[\"IncidentID\"]}`, `${dappCntx.currentRecord?.ShortDescription || ''}`]);\n }, [dappCntx.currentRecord])\n\n useEffect(() => {\n if (!dappCntx?.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx]);\n\n const ticket = useDataFromBridge({\n xUser: xuser, apiValues: ticketbyid,\n bridgedResourceName: \"Incident by ID\"\n });\n\n useEffect(() => {\n if (!id) return;\n setTicketByID({IncidentID: id});\n }, [id])\n \n useEffect(() => {\n if (!ticket?.data) return;\n\n if (!!ticket.data?.error) {\n handleError({message: ticket?.data?.error.message});\n setAuth2View(false);\n return;\n }\n\n if (ticket.data?.record?.CID !== dappCntx.user?.user?.CID){\n handleError({message: \"Not Authorized\"});\n setAuth2View(false);\n return;\n }\n\n dappCntx.setCurrentRecord(ticket?.data.record);\n if (dappCntx?.user?.user.UserType === \"User\" && ticket?.data?.record?.ContactID !== dappCntx?.user?.user.ContactID.toString()){\n setAuth2View(false);\n }\n // setEditEnabled(dappCntx?.user?.user?.UserType !== \"User\" && \n // (parseInt(Number(ticket?.data?.record?.ResponsibleDepartmentID)) === -1))\n setEditEnabled(dappCntx?.user?.user?.UserType !== \"User\")\n // eslint-disable-next-line\n }, [dappCntx, ticket]);\n\n useEffect(() => {\n if (!dappCntx?.currentRecord || dappCntx.currentRecord.IncidentID !== id) return;\n dappCntx.currentRecord.IncidentType !== \"Incident\" && history.replace(`${SRVCREQROUTE}${id}`);\n }, [dappCntx, id, history, showMessage, ticket]);\n\n const handleLoaded = useCallback((form) => {\n frm.current = form;\n }, [frm]); \n\n useEffect(() => {\n if (auth2view) return;\n setShowMessage({\n open: true, message: \"You're not authorized to view or edit this ticket\",\n severity: \"error\", \n })\n }, [auth2view]);\n\n const handleSave = useCallback(() => {\n swal({\n title: \"Save Changes?\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: `You're about to update ticket${dappCntx.currentRecord[\"IncidentNo\"]}`,\n },\n },\n icon: \"info\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && frm.current && frm.current.submitPage && typeof frm.current.submitPage === 'function' && \n frm.current.submitPage();\n setAsk2Leave(false);\n });\n }, [frm, dappCntx]);\n\n const handleCancel = useCallback(() => {\n swal({\n title: \"Are you sure?\",\n text: \"If you have unsaved changes, they will be lost.\",\n icon: \"warning\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n if (accepted){\n setAsk2Leave(false);\n history.goBack();\n } \n });\n }, [history]);\n\n const showError = useCallback((errMsg) => {\n swal({\n title: \"Error\",\n text: `Failed to request status update with: \n ${errMsg.message}`,\n icon: \"error\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n },\n dangerMode: true,\n })\n }, []);\n\n const handleStatusUpdate = useCallback(() => {\n // let btns = frm.current.find('.submit-button');\n // let stsBtn = btns.find(btn => btn.name === \"status-request-button\");\n swal({\n title: \"Request Status Update?\",\n text: \"This action will issue a request for status update on this ticket\",\n icon: \"warning\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n if (accepted){\n // !!stsBtn && stsBtn.click();\n try{\n requestStatusUpdate({\n user: dappCntx.user?.user, data: id,\n url: REQUEST_STATUS_UPDATE_WEBAPI_INC\n }).then((response) => {\n // showSuccess({message: `Contact is disabled for: ${response.data.runId}`});\n history.goBack();\n }).catch((error) => {\n showError({message: `${error.toString()}`});\n })\n } catch (ex) {\n showError({message: `${ex.toString()}`});\n }\n return () => {\n cancelApiCall();\n }\n } \n });\n }, [dappCntx, history, id, showError]);\n\n return (\n \n {(auth2view && \n history.push(`/incident/actions/${id}`)}\n handleStats={() => history.push(`/incident/stats/${id}`)}\n handleFiles={() => history.push(`/incident/files/${id}`)}\n handleSaveForm={handleSave}\n handleCancelChanges={handleCancel}\n handleStatusUpdate={handleStatusUpdate}\n title1={toolbarTitle?.[0]} title2={toolbarTitle?.[1]}\n type={type}\n editEnabled={editEnabled}\n />) || \n \n \n \n {(auth2view && \n ((type === \"view\" && \n \n You're not authorized to view/edit this ticket\n \n }\n \n \n {/* \n {(dappCntx?.user?.user.UserType !== \"User\" && \n */}\n \n \n \n );\n}\n\nconst FormLayout = ({ form, content}) => {\n return (\n \n
\n
{form?.name}
\n
\n {content}\n
\n
\n
Loading form...
);","import React, { Fragment, useState, useCallback, useEffect, useRef } from \"react\";\nimport { Box, Grid } from \"@material-ui/core\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useFormStyle, WrapperPaper } from \"../../controls/shared.components\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { useParams, useLocation, useHistory } from \"react-router-dom\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { IncidentEditToolbar } from \"./incidents.toolbar\";\nimport swal from \"sweetalert\";\nimport QueryString from \"qs\";\n\nexport const AddIncidentContactDevice = () => {\n const { id } = useParams();\n const location = useLocation();\n const [formLoadError, setFormLoadError] = useState(null);\n const [showMessage, setShowMessage] = useState({\n open: false, severity: \"error\", message: \"\",\n onSnackBarClose: () => {},\n });\n const [auth2view, setAuth2View] = useState(true);\n const cls = useFormStyle();\n const history = useHistory();\n const frm = useRef(); \n const [qsParms, setQsParms] = useState(); \n\n useEffect(() => {\n if (!!qsParms) return;\n setQsParms(QueryString.parse(location.search.replace('?', ''))); \n }, [location, qsParms]);\n\n const dappCntx = useDappContext();\n useEffect(() => {\n dappCntx.dappSubtitle(\"New Incident\", () => {});\n }, [dappCntx]);\n\n const handleError = useCallback((e) => {\n if (!!formLoadError) return;\n setShowMessage({ ...showMessage, \n open: true, message: `something failed on form`, severity: \"error\",\n onSnackBarClose: () => setShowMessage({ open: false, message: 'random'}),\n });\n setFormLoadError(e);\n }, [formLoadError, showMessage]);\n\n const handleSaveComplete = useCallback(() => {\n setShowMessage({ ...showMessage,\n open: true, message: \"Incident data has been successfully updated\",\n severity: \"success\", onSnackBarClose: () => setShowMessage({ open: false, message: 'random'})\n });\n setTimeout(() => { history.replace(\"/incidents\") }, 2500);\n }, [showMessage, history]);\n\n const handleSave = useCallback(() => {\n swal({\n title: \"Save Changes?\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: `You're about to create new ticket`,\n },\n },\n icon: \"info\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && frm.current && frm.current.submitPage && typeof frm.current.submitPage === 'function' &&\n frm.current.submitPage();\n });\n }, [frm]);\n\n const handleCancel = useCallback(() => {\n swal({\n title: \"Are you sure?\",\n text: \"If you have unsaved changes, they will be lost.\",\n icon: \"warning\",\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n if (accepted){\n history.goBack();\n } \n });\n }, [history]);\n\n const handleLoaded = useCallback((form) => {\n frm.current = form;\n }, [frm]);\n\n useEffect(() => {\n setAuth2View(!(dappCntx?.user?.user.UserType === \"User\" && dappCntx?.user?.user.ContactID.toString() !== id));\n }, [dappCntx, id]);\n\n useEffect(() => {\n if (auth2view) return;\n setShowMessage({\n open: true, message: \"You're not authorized to view or edit this ticket\",\n severity: \"error\", \n })\n }, [auth2view]);\n\n return (\n \n {}} \n handleFiles={() => {}} \n handleSaveForm={handleSave}\n handleCancelChanges={handleCancel}\n handleStatusUpdate={() => {}}\n type={\"edit\"}\n />\n \n \n \n \n \n \n \n \n \n );\n}\n\nconst FormLayout = ({ form, content}) => {\n return (\n \n
\n
{form?.name}
\n
\n {content}\n
\n
\n
Loading form...
);","import React, { Fragment, useState, useCallback, useRef } from \"react\";\nimport { Box, Grid, Toolbar, Typography } from \"@material-ui/core\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useFormStyle, WrapperPaper } from \"../../controls/shared.components\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { useParams, useLocation, useHistory, Prompt } from \"react-router-dom\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { useEffect } from \"react\";\n// import { ServiceRequestStats } from \"./service.request.stats\";\nimport { IncidentEditToolbar } from \"../incidents/incidents.toolbar\";\nimport { useDataFromBridge } from \"../../controls/custom.hooks\";\nimport swal from \"sweetalert\";\nimport { useAuthStyle } from \"../incidents/incidents.edit\";\nimport { \n cancelApiCall, requestStatusUpdate, //checkAnyFormSubmitStatus \n} from \"../../apicalls/contact.api\";\nimport { \n // NEW_CONTACT_STATUS_CHECK, \n REQUEST_STATUS_UPDATE_WEBAPI_REQ \n} from \"../../controls/dapp.constants\";\nimport QueryString from \"qs\";\nimport { LoadingProgress } from \"../Loading2\";\n\nexport const EditServiceRequest = ({type}) => {\n return (\n ${dappCntx.currentRecord[\"IncidentNo\"]}`) ||\n `You're about to create new ticket\n {(auth2view && \n history.push(`/servicerequest/actions/${id}`)}\n handleStats={() => {}}\n handleFiles={() => {}}\n title1={toolbarTitle?.[0]} title2={toolbarTitle?.[1]}\n handleSaveForm={handleSave} \n handleCancelChanges={handleCancel}\n handleStatusUpdate={handleStatusUpdate}\n type={(type.split(\"-\")[0] === \"update\" || type.startsWith(\"new\")) && \"edit\"}\n editEnabled={editEnabled} \n />) || \n \n \n \n {(values && auth2view && \n \n You're not authorized to view or edit this ticket\n } \n \n \n {/* \n {(dappCntx?.user?.user.UserType !== \"User\" &&\n */}\n \n \n */}\n \n );\n}\n\nconst FormLayout = ({ form, content}) => {\n return (\n \n
\n
{form?.name}
\n
\n {content}\n
\n
\n
Loading form...
);","import React, { Fragment, useCallback, useState, useEffect, } from \"react\";\nimport { Toolbar } from \"@material-ui/core\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useParams } from \"react-router-dom\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { DeviceSplitView } from \"./device.splitview\";\n\nexport const AddEditDevice = () => {\n const { id } = useParams();\n const dappCntx = useDappContext();\n\n const [showMessage, setShowMessage] = useState({\n open: false, severity:\"error\", message: \"\",\n onSnackBarClose: () => {}\n });\n\n const handleError = useCallback(({message}) => {\n setShowMessage({...showMessage, \n open: true, severity: \"error\", message: message,\n onSnackBarClose: () => setShowMessage({...showMessage, open: false, message: \"random\"}),\n }); \n }, [showMessage]);\n\n useEffect(() => {\n dappCntx.dappSubtitle(`${(!!id && 'Edit') || 'New'} Device`, () => {});\n // eslint-disable-next-line\n }, [dappCntx.title]);\n\n return (\n \n \n \n \n )\n};\n\n\n\n\n","import React, { Fragment, useCallback, useState, useEffect } from \"react\";\nimport { Toolbar } from \"@material-ui/core\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useParams } from \"react-router-dom\";\nimport { KappFormLayout, KappPending, WrapperPaper } from \"../../controls/shared.components\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { SingleJobToobar } from \"./jobs.toolbar\";\nimport { useHistory } from \"react-router-dom\";\n\nexport const AddEditJobs = () => {\n const { jobid } = useParams();\n const dappCntx = useDappContext();\n const history = useHistory();\n\n const [showMessage, setShowMessage] = useState({\n open: false, severity:\"error\", message: \"\",\n onSnackBarClose: () => {}\n });\n\n const handleSaveComplete = useCallback((params) => {\n console.log(`parameters coming from core form ::: `, params);\n setShowMessage({...showMessage, \n open: true,\n severity: 'success', message: 'Job is saved',\n onSnackBarClose: () => { setShowMessage({ ...showMessage, open: false, message: 'rnadom'})}\n });\n }, [showMessage]);\n\n const handleError = useCallback((props) => {\n console.log(`this is on error form event ::`, props);\n setShowMessage({...showMessage, open: true, }) \n }, [showMessage]);\n\n useEffect(() => {\n dappCntx.dappSubtitle(`${(!!jobid && 'Edit') || 'New'} Job`, () => {});\n // eslint-disable-next-line\n }, [dappCntx.title]);\n\n return (\n \n {(!!jobid && \n history.push(`/jobs/balances/${jobid}`)}\n handleJobReports={() => history.push(`/jobs/jobreports/${jobid}`)}\n handleProducts={() => history.push(`/jobs/products/${jobid}`)}\n handleManagedServices={() => history.push(`/jobs/services/${jobid}`)}\n handleFiles={() => history.push(`/jobs/files/${jobid}`)}\n />) || \n \n \n \n )\n};\n\nconst JobEditForm = (props) => {\n const {id, handleError, handleSaveComplete, formType} = props;\n\n const values = (id && { 'Job ID': `${id}` }) || '';\n console.log(`jobid is not supported by the form: ${JSON.stringify(values)}`);\n\n return (\n \n \n \n \n );\n}\n\nconst initState = {page: 0, pageSize: rowsperpage[0]};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {...state, page: action.page};\n case \"pageSize\":\n return {...state, pageSize: action.pageSize};\n case \"loading\": {\n return {...state, loading: action.loading};\n }\n default:\n throw new Error();\n }\n}","import React, { useMemo } from \"react\";\n// import { Tooltip, IconButton } from \"@material-ui/core\";\n// import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n// import { faCircleInfo } from \"@fortawesome/free-solid-svg-icons\";\nimport { CellTextWithToolTip } from \"../../controls/shared.components\";\n\nexport const useProductColumns = () => {\n return useMemo(\n () => [\n {\n field: 'Spacer',\n headerName: ' ',\n width: 40,\n disableColumnMenu: true,\n },\n {\n field: 'PONum',\n headerName: 'PO Number',\n width: 110,\n disableColumnMenu: true,\n },\n {\n field: 'JobNum',\n headerName: 'Job Number',\n width: 110,\n disableColumnMenu: true,\n },\n {\n field: 'PartNo',\n headerName: 'Part #',\n flex: 0.2,\n disableColumnMenu: true,\n renderCell: (params) => \n },\n {\n field: 'InternalShortDesc',\n headerName: 'Product', \n flex: 0.5,\n disableColumnMenu: true,\n renderCell: (params) => \n },\n {\n field: 'Description',\n headerName: 'Description',\n flex: 0.5,\n disableColumnMenu: true,\n renderCell: (params) => \n },\n {\n field: \"Status\",\n headerName: \"Status\",\n flex: .2,\n disableColumnMenu: true,\n },\n {\n field: \"DeliveredDate\",\n headerName: \"Delivered\",\n width: 130,\n disableColumnMenu: true,\n renderCell: params => new Date(params.value).toLocaleDateString(),\n },\n // {\n // field: 'Actions',\n // headerName: ' ',\n // width: 40,\n // disableColumnMenu: true,\n // renderCell: params => {\n // return (\n // \n // \n // handleView({ row: params.row })}\n // color=\"primary\"\n // style={{ fontSize: '.9rem' }}\n // >\n // \n // \n // );\n // },\n // },\n ],\n [],\n );\n };\n","import { CoreForm } from \"@kineticdata/react\";\nimport { Button, Dialog, DialogActions, DialogContent } from \"@material-ui/core\";\nimport React from \"react\";\nimport { DappDialogTitle, KappFormLayout, KappPending, useDialogButtonStyles, useFormStyle } from \"../../../controls/shared.components\";\n\nexport const JobReportModal = (props) => {\n const {record, open, handleClose} = props;\n const cls = useFormStyle();\n const btnCls = useDialogButtonStyles();\n return (\n \n \n \n \n Close \n \n \n )\n}\n\nconst JobReportViewForm = ({jobid}) => {\n return (\n \n \n \n \n );\n};\n\nconst initState = {page: 0, pageSize: rowsperpage[0]};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {...state, page: action.page};\n case \"pageSize\":\n return {...state, pageSize: action.pageSize};\n default:\n throw new Error();\n }\n}","import React from \"react\";\nimport { \n Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, TextField, \n} from \"@material-ui/core\";\nimport { indigo } from \"@material-ui/core/colors\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { DappDialogTitle, KappFormLayout, KappPending, useDialogButtonStyles, useFormStyle } from \"../../controls/shared.components\";\nimport { useEffect } from \"react\";\nimport { convertFromHTML, ContentState } from \"draft-js\";\nimport { useState } from \"react\";\n\nexport const ActionDetailModalTest = (props) => {\n const {actionrow, open, onCloseModal} = props;\n const [longDescription, setLongDescription] = useState();\n\n const btnCls = useDialogButtonStyles();\n\n useEffect(() => {\n if (!actionrow) return;\n const blocksFromHTML = convertFromHTML(actionrow['IncidentDescription']);\n const state = ContentState.createFromBlockArray(\n blocksFromHTML.contentBlocks,\n blocksFromHTML.entityMap\n );\n state && setLongDescription(state.getPlainText()); \n }, [actionrow]);\n\n return (\n \n \n Action for Incident #: {actionrow && actionrow['Incident ID']} {(actionrow?.Status && `(${actionrow.Status})`) || ''} \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {}}\n value={(actionrow && actionrow['Action Desc']) || ''}\n InputProps={{\n readOnly: true,\n }}\n /> \n \n \n \n \n \n \n \n \n \n Close\n \n \n \n )\n}\n\nexport const ActionDetailModal = (props) => {\n const {actionrow, open, onCloseModal} = props;\n const cls = useFormStyle();\n const btnCls = useDialogButtonStyles();\n\n return (\n \n \n \n \n \n Cancel\n \n \n \n )\n}\n\nexport const ViewActionForm = ({actionID}) => {\n return (\n \n }\n />\n \n \n \n \n {`Ticket #: ${title1}`}\n \n \n \n \n {title2}\n \n \n \n \n }\n /> \n }\n />\n \n );\n}\n","import React, { Fragment, useState, useCallback, useEffect, useRef } from \"react\";\nimport { CoreForm } from \"@kineticdata/react\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, Grid, Toolbar } from \"@material-ui/core\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { DappDialogTitle, KappFormLayout, KappPending, useDialogButtonStyles, useFormStyle, WrapperPaper } from \"../../controls/shared.components\";\n// import { useParams } from \"react-router-dom\";\n\nexport const NewAction = (props) => {\n const cls = useFormStyle();\n const [showMessage, setShowMessage] = useState({\n open: false, severity: \"error\", message: \"\", onSnackBarClose: () => {}\n });\n // const {id} = useParams();\n\n const kForm = useRef();\n\n const dappCntx = useDappContext();\n useEffect(() => {\n dappCntx.dappSubtitle(\"New Action\");\n }, [dappCntx])\n\n const closeAlert = useCallback(() => {\n setShowMessage({...showMessage, open: false, message: \"random\"});\n }, [showMessage]);\n\n const handleError = useCallback(() => {\n setShowMessage({ ...showMessage, \n open: true, message: `something failed on form`, severity: \"error\",\n onSnackBarClose: closeAlert,\n });\n }, [showMessage, closeAlert]);\n\n const handleSaveComplete = useCallback(() => {\n console.log(`something saved...`);\n setShowMessage({\n ...showMessage, open: true, message: \"Action is saved\",\n severity: \"success\", onSnackBarClose: closeAlert\n })\n }, [showMessage, closeAlert]); \n\n const handleLoaded = useCallback((form) => {\n kForm.current = form;\n }, [kForm]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport const NewActionForm = ({onSave, onError, incidentID, onLoaded}) => {\n return (\n \n \n \n \n \n \n Update \n Cancel \n \n \n )\n}","import React, { Fragment, useEffect, useState, useCallback } from 'react';\nimport { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { CustomAlert } from '../../alerts/alert.snackbar';\nimport { WrapperPaper } from '../../controls/shared.components';\nimport { useActionColumns } from './action.hook';\nimport { rowsperpage } from '../../controls/shared.components';\nimport { useDataFromBridge } from '../../controls/custom.hooks';\nimport { useDappContext } from '../../auth/dapp.context';\nimport { useGridStyles } from '../../controls/datagrid.striped';\nimport clsx from \"clsx\";\nimport { ActionDetailModal } from './action.detail';\nimport { ActionToolbar } from './action.toolbar';\nimport { NewActionModal } from './actions.new';\nimport { Toolbar, Typography } from '@material-ui/core';\nimport { utils, writeFileXLSX } from \"xlsx\";\nimport swal from \"sweetalert\";\nimport { EXPORTALERTMSG } from '../../controls/dapp.constants';\n\n// import { set_cptable } from 'xlsx';\n// import * as cptable from 'xlsx/dist/cpexcel.full.mjs';\n// set_cptable(cptable);\n\nconst initLoadParams = {\n IncidentID: 0,\n UserType: ' ',\n IsSharedOperator: 'false',\n GetTotal: true,\n SortField: 'ActionID',\n AscDesc: 'DESC',\n PageNum: 1,\n PageSize: rowsperpage[0],\n};\n\nconst bridgedResourceName = 'Actions by Incident ID';\n\nexport const ActionList = (props) => {\n const {...other} = props;\n const { id } = useParams();\n const [apiparms, setApiparms] = useState();\n const [exportParams, setExportParams] = useState();\n const [gridrows, setGridRows] = useState([]);\n const [loading, setLoading] = useState(true);\n const [xUser, setXuser] = useState(null);\n const [totalRows, setTotalRows] = useState();\n // const [pageToken, setPageToken] = useState(''); \n const [currentpage, setCurrentpage] = useState(0);\n const [pagesize, setPagesize] = useState();\n const [incidentParams, setIncidentParams] = useState();\n const [selectedIncident, setSelectedIncident] = useState();\n const [selectionModel, setSelectionModel] = useState([]);\n const [selectedRowIndex, setSelectedRowIndex] = useState();\n const [ticketbyid, setTicketByID] = useState();\n const [toolbarTitle, setToolbarTitle] = useState();\n const [doexport, setDoExport] = useState(false);\n const [showAlert, setShowAlert] = useState({\n open: false, severity: \"error\", message: \"\",\n onSnackBarClose: () => {}\n });\n\n const [auth2view, setAuth2View] = useState(true);\n\n const history = useHistory();\n\n const [newactionModal, setNewactionModal] = useState({\n open: false, \n onClose: () => {},\n onError: () => {},\n onSave: () => {},\n });\n\n const [showDetail, setShowDetail] = useState({});\n const dappCntx = useDappContext();\n const cls = useGridStyles();\n const gridApiRef = useGridApiRef();\n\n\n useEffect(() => {\n const rowDoubleclicked = (params, event, details) => {\n showActionDetail({row: params.row});\n };\n \n return gridApiRef.current.subscribeEvent('rowDoubleClick', rowDoubleclicked); \n }, [gridApiRef]);\n \n useEffect(() => {\n if (!dappCntx) return;\n dappCntx.dappSubtitle(\"Actions\");\n }, [dappCntx])\n\n const showActionDetail = useCallback(({row}) => {\n setShowDetail({\n ...showDetail, open: true, actionrow: row, \n onCloseModal: () => setShowDetail({ ...showDetail, open: false, actionrow: null}),\n });\n }, [showDetail]);\n\n const columns = useActionColumns({\n handleEdit: ({row}) => showActionDetail({row}),\n selectedRowIndex,\n handleContact: ({contactID}) => history.push(`/contacts/view/${contactID}`),\n userType: dappCntx?.user?.user.UserType,\n });\n\n const bridgecall = useDataFromBridge({ \n xUser: xUser, \n apiValues: apiparms,\n bridgedResourceName: bridgedResourceName\n });\n\n const getSingleIncident = useDataFromBridge({ \n xUser: xUser, apiValues: incidentParams,\n bridgedResourceName: \"Incident by ID\"\n });\n\n const getdata4exportcall = useDataFromBridge({\n xUser: xUser,\n apiValues: exportParams,\n bridgedResourceName: \"Actions by Incident ID Export\"\n });\n\n useEffect(() => {\n if (!id) return;\n setIncidentParams({IncidentID: id});\n }, [id]);\n\n useEffect(() => {\n if (!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n }, [dappCntx]);\n\n useEffect(() => {\n let changes = (apiparms && {...apiparms, \n IncidentID: id, \n // UserType: dappCntx?.user?.user?.UserType || ' ',\n PageNum: currentpage + 1,\n PageSize: pagesize || rowsperpage[0],\n }) || { ...initLoadParams,\n IncidentID: id, \n // UserType: dappCntx?.user?.user?.UserType || ' ',\n PageNum: currentpage + 1,\n PageSize: pagesize || rowsperpage[0],\n }\n\n if (JSON.stringify(changes) === JSON.stringify(apiparms)) return;\n setLoading(true);\n setGridRows([]);\n setApiparms(changes);\n }, [dappCntx, id, currentpage, pagesize, apiparms]);\n \n const handlePageChange = useCallback((model, details) => {\n if (model.pageSize !== pagesize)\n model.page = 0;\n setCurrentpage(model.page);\n setPagesize(model.pageSize); \n }, [pagesize]);\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n \n useEffect(() => {\n if (!bridgecall) return;\n\n setLoading(false);\n if (!bridgecall?.success) {\n showError({message: bridgecall?.data?.Message || bridgecall?.data?.message});\n return;\n }\n\n let recs = bridgecall?.data?.records?.map((row, indx) => {\n return { ...row, id: row[\"Action ID\"]};\n });\n\n setTotalRows(bridgecall?.data?.metadata?.count || 0)\n setGridRows(recs);\n\n }, [bridgecall, showError]);\n\n useEffect(() => {\n if (!getSingleIncident) return;\n setSelectedIncident(getSingleIncident.data.record);\n }, [getSingleIncident]);\n\n const handleRefresh = useCallback(() => {\n setLoading(true);\n setApiparms({...apiparms, UserType: ''});\n setApiparms({...apiparms, UserType: dappCntx.user.user.UserType});\n }, [apiparms, dappCntx])\n\n const newActionClose = useCallback(() => {\n setNewactionModal({...newactionModal, open: false});\n }, [newactionModal])\n\n const handleActionError = useCallback((props) => {\n setNewactionModal({...newactionModal, open: false, incidentID: null});\n showError({message: (props.message || \"Faile to Load new action form\")});\n }, [newactionModal, showError])\n\n const handleActionSave = useCallback((props) => {\n setNewactionModal({...newactionModal, open: false, incidentID: null});\n setShowAlert({\n open: true, severity: \"success\",\n message: \"New Action Created\",\n onSnackBarClose: () => {\n setShowAlert({open: false, message: \"random\"});\n }\n });\n setTimeout(() => handleRefresh(), 3000);\n }, [newactionModal, dappCntx]);\n\n const createActionModal = useCallback(() => {\n setNewactionModal({ ...newactionModal,\n open: true, handleClose: newActionClose,\n handleError: handleActionError,\n handleSave: handleActionSave,\n incidentID: selectedIncident.IncidentID,\n })\n }, [newactionModal, newActionClose, selectedIncident, handleActionError, handleActionSave]);\n\n const handleSelectionChange = useCallback((newSelection) => {\n let sel = new Set(selectionModel);\n let diff = [...newSelection].filter(x => !sel.has(x));\n let indx = newSelection.findIndex(x => x !== diff[0]);\n indx !== -1 && newSelection.splice(indx, 1);\n setSelectionModel((newSelection.length > 0 && newSelection) || selectionModel);\n setSelectedRowIndex(((newSelection.length > 0 && newSelection) || selectionModel)[0]);\n }, [selectionModel])\n\n useEffect(() => {\n if (!id) return;\n setTicketByID({IncidentID: id});\n }, [id]);\n\n useEffect(() => {\n if (!dappCntx.currentRecord) return;\n setToolbarTitle([`${dappCntx.currentRecord[\"IncidentID\"]}`, `${dappCntx.currentRecord?.ShortDescription || ''}`]);\n }, [dappCntx]);\n\n const ticket = useDataFromBridge({\n xUser: dappCntx.user?.user, apiValues: ticketbyid,\n bridgedResourceName: \"Incident by ID\"\n });\n \n useEffect(() => {\n if (!ticket?.data) return;\n dappCntx.setCurrentRecord(ticket?.data.record);\n if (dappCntx?.user?.user.UserType === \"User\" && ticket?.data?.record?.ContactID !== dappCntx?.user?.user.ContactID.toString()){\n setAuth2View(false);\n }\n }, [dappCntx, ticket]);\n\n useEffect(() => {\n if (auth2view) return;\n setShowAlert({\n open: true, message: \"You're not authorized to view/edit this ticket\",\n severity: \"error\",\n })\n }, [auth2view]);\n\n useEffect(() => {\n if (!doexport) return;\n\n swal({\n title: \"Export Incident Actions\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSG.replace('REPLACE-STRING', 'incident actions'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && setExportParams({\n ...apiparms,\n PageNum: 1,\n PageSize: 2000,\n });\n });\n\n setDoExport(!doexport); \n }, [doexport, apiparms]);\n\n useEffect(() => {\n if (!getdata4exportcall || !getdata4exportcall?.data) return;\n \n if (getdata4exportcall?.data?.error){\n showError({message: getdata4exportcall?.data?.error.message});\n return;\n }\n\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `${dappCntx?.currentRecord?.IncidentNo}_ACTIONS_CMS_${stamp}.xlsx`;\n\n const data4export = getdata4exportcall?.data?.records.map(x => {\n x[\"Action Desc\"] = x[\"Action Desc\"]?.replace(/<[^>]+>/g, '')?.replace(/(\\s{2,})/g, '');\n x.IncidentDescription = x.IncidentDescription?.replace(/<[^>]+>/g, '')?.replace(/(\\s{2,})/g, '');\n return x;\n });\n\n const ws = utils.json_to_sheet(data4export);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, \"ACTIONS\");\n writeFileXLSX(wb, fileName);\n }, [getdata4exportcall, dappCntx, showError]);\n\n return (\n \n {(auth2view &&\n setDoExport(true)}\n />) || \n {(auth2view &&\n \n You're not authorized to view or edit this ticket\n }\n \n \n );\n};\n\nconst ActionsGrid = (props) => {\n const { \n rows, columns, loading, total, apiRef,\n onPageChange, cls, onSelectionChange,\n ...other \n } = props;\n \n return (\n \n \n {\n handleEdit({event: event, row: params.row});\n event.preventDefault();\n }}>\n \n \n \n \n );\n },\n }\n ], [handleEdit, selectedRowIndex, handleContact, userType]);\n}","import React, { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\nimport { IncidentsList } from \"./incidents.list\";\nimport { useGridStyles } from \"../../controls/datagrid.striped\";\nimport { IncidentToolbar } from \"./incidents.toolbar\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { ModalSelection } from \"../modals/modal.selection\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { createRef } from \"react\";\n\nexport const Incidents = ({contactOnly}) => {\n const [openModal, setOpenModal] = useState(false);\n const [ticketType, setTicketType] = useState();\n const [showPrimary, setShowPrimary] = useState(false);\n const [refresh, setRefresh] = useState();\n const [incidentStatus, setIncidentStatus] = useState();\n const [dispositionValue, setDispositionValue] = useState();\n const [searchValue, setSearchValue] = useState();\n const [exportData, setExportData] = useState(false);\n const cls = useGridStyles();\n const history = useHistory();\n const location = useLocation();\n const dappCntx = useDappContext();\n const ref = createRef();\n\n const handleAdd = () => {\n setTicketType(\"incident\");\n setShowPrimary(false);\n setOpenModal(true);\n }\n\n useEffect(() => {\n if (!dappCntx) return;\n dappCntx.dappSubtitle(\"Incidents\");\n }, [dappCntx])\n\n const handleModalClose = useCallback((props) => {\n const {ok, selection} = props;\n setOpenModal(false);\n if (!ok) return;\n let type = selection.type;\n if (type !== 'primaryContact') {\n let field = `${type.charAt(0).toUpperCase()}${type.slice(1)} ID`;\n let id = selection.record[`${field}`];\n history.push(`/${ticketType}/add/${id}?type=${type}`, {prevPath: location.pathname});\n } else {\n let field = `${type.charAt(0).toUpperCase()}${type.slice(1)}ID`;\n let id = selection.record[`${field}`];\n history.push(`/${ticketType || 'servicerequest'}/add/${id}?type=${type}`, {prevPath: location.pathname});\n }\n }, [history, ticketType, location]);\n\n const handleRefresh = () => {\n setRefresh(true); \n }\n\n const finishRefresh = () => setRefresh(false);\n\n const handleStatusChange = ({status}) => setIncidentStatus(status);\n const handleDispositionChange = ({disposition}) => {\n setDispositionValue(disposition);\n }\n\n const handleSearch = useCallback((value) => {\n console.log(`we'll be searching for: `, value);\n setSearchValue(value);\n }, []);\n\n const handleExport = useCallback(() => {\n setExportData(true);\n }, []);\n\n const handleExportComplete = useCallback(() => {\n setExportData(false);\n }, []);\n\n return (\n \n \n \n \n \n );\n}","import { Toolbar, Typography } from \"@material-ui/core\";\nimport React, { Fragment } from \"react\";\nimport { useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { useDappContext } from \"../../auth/dapp.context\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\n\nexport const ContactAccess = () => {\n const {id} = useParams();\n const dappCntx = useDappContext();\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"CMS Access\");\n }, [dappCntx])\n\n return (\n \n \n \n Contact CMS Access placeholder for contact id: {id}\n \n \n \n );\n}","import { Toolbar, Typography } from \"@material-ui/core\";\nimport React, { Fragment } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { WrapperPaper } from \"../../controls/shared.components\";\n\nexport const ContactPreferences = () => {\n const {id} = useParams();\n\n return (\n \n \n \n Contact Preferences placeholder for contact id: {id}\n \n \n \n ) \n}","import React from \"react\";\nimport { Box, Grid, Toolbar, Typography } from \"@material-ui/core\";\nimport { ToolbarButton, useToolbarStyle } from \"../../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\n\nexport const DetailsToolbar = (props) => {\n const {title1, title2, handleExport} = props;\n const cls = useToolbarStyle();\n\n return (\n \n \n \n \n \n {title1}\n \n \n \n \n {title2}\n \n \n \n \n }\n />\n \n )\n}","import React, { Fragment, useState, useEffect, useCallback } from 'react';\nimport { rowsperpage, WrapperPaper } from '../../../controls/shared.components';\nimport { DataGridPro } from '@mui/x-data-grid-pro';\nimport { useGridStyles } from '../../../controls/datagrid.striped';\nimport { useDataFromBridge } from '../../../controls/custom.hooks';\nimport { CustomAlert } from '../../../alerts/alert.snackbar';\nimport { useDappContext } from '../../../auth/dapp.context';\nimport { useParams } from 'react-router-dom';\nimport { useReducer } from 'react';\nimport clsx from \"clsx\";\nimport { useInvoiceDetailsColumns } from './invoicedetails.hook';\nimport { DetailsToolbar } from './invoicedetails.toolbar';\nimport { DappGridFooter } from '../../../controls/grid.footer';\nimport swal from 'sweetalert';\nimport { utils, writeFileXLSX } from 'xlsx';\nimport { EXPORTALERTMSGSHORT } from '../../../controls/dapp.constants';\n\nconst bridgedResourceName = \"InvoiceDetails\";\n\nexport const InvoiceDetails = props => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState({});\n const [griddata, setGridData] = useState();\n const [toolbarTitle, setToolbarTitle] = useState();\n const gridClasses = useGridStyles();\n const [total, setTotal] = useState(0);\n const [showAlert, setShowAlert] = useState({\n open: false, message: '', severity: \"error\", \n onSnackBarClose: () => {},\n }); \n\n const [pagingState, dispatch] = useReducer(pageReducer, initState);\n const [xuser, setXuser] = useState();\n\n const { id } = useParams();\n const dappCntx = useDappContext();\n\n useEffect(() => {\n if(!dappCntx.user) return;\n setXuser(dappCntx.user.user);\n setApiparms({InvoiceID: id});\n }, [dappCntx, id])\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Invoice Details\");\n }, [dappCntx])\n\n useEffect(() => {\n if (!dappCntx.currentRecord) return;\n setToolbarTitle([`Inovice Num: ${dappCntx.currentRecord?.[\"Transaction Number\"]}`, `Agreement Number: ${dappCntx.currentRecord?.[\"Job Number\"] || ''}`]);\n }, [dappCntx.currentRecord])\n\n// this is when navigating directly to the link we need api call invoice by invoice ID\n// all this is just to show toolbar title what invoice number and for what job number\n // const invoiceRecord = useDataFromBridge({\n // xUser: xuser, apiValues: id,\n // bridgedResourceName: \"Invoice by ID\"\n // });\n\n // useEffect(() => {\n // if (dappCntx.currentRecord) return;\n // if (!invoiceRecord?.data) return;\n // dappCntx.currentRecord = invoiceRecord?.data.record;\n // }, [dappCntx.currentRecord, invoiceRecord]);\n\n const details = useDataFromBridge({ \n xUser: xuser, apiValues: apiparms,\n bridgedResourceName: bridgedResourceName\n });\n\n const gridcols = useInvoiceDetailsColumns();\n\n const handlePageChange = (model, details) => {\n if (model.pageSize !== pagingState.pageSize)\n model.page = 0;\n\n dispatch({type: \"page\", page: model.page});\n dispatch({type: \"pageSize\", pageSize: model.pageSize});\n }\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n\n useEffect(() => {\n if (!!griddata) return;\n\n if (!details) return;\n\n setLoading(false);\n if (!details.success) {\n showError({message: details.data.Message || details.data.message});\n return;\n } else if (details.data.error) {\n showError({message: details.data.error.message});\n return;\n }\n\n setGridData((details.data.records).map((row, indx) => { return {...row, id: indx}}));\n setTotal(details.data.records.reduce((tot, rec) => tot + parseFloat(rec.Price, 2) * parseFloat(rec.Quantity, 2), total));\n\n // eslint-disable-next-line\n }, [details]);\n\n const export2excel = useCallback(() => {\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n const fileName = `INVOICE_DETAILS_CMS_${dappCntx.currentRecord?.[\"Transaction Number\"]}_${stamp}.xlsx`;\n\n const ws = utils.json_to_sheet(details.data.records);\n const wb = utils.book_new();\n utils.book_append_sheet(wb, ws, `${dappCntx.currentRecord?.[\"Transaction Number\"]}` || \"Invoice Details\");\n writeFileXLSX(wb, fileName);\n }, [details, dappCntx]);\n\n const handleExport = useCallback(() => {\n swal({\n title: \"Export Invoice Details\",\n content: {\n element: \"span\",\n attributes: {\n innerHTML: EXPORTALERTMSGSHORT.replace('REPLACE-STRING', 'Invoice Details'),\n },\n },\n icon: undefined,\n closeOnClickOutside: false,\n closeOnEsc: false,\n buttons: {\n confirm: true,\n cancel: true,\n },\n dangerMode: false,\n }).then((accepted) => {\n accepted && export2excel();\n });\n }, [export2excel]);\n\n return (\n \n \n \n \n );\n};\n\nconst initState = {page: 0, pageSize: rowsperpage[0]};\n\nconst pageReducer = (state, action) => {\n switch (action.type) {\n case \"page\": \n return {page: action.page};\n case \"pageSize\":\n return {pageSize: action.pageSize};\n default:\n throw new Error();\n }\n}","import { useMemo } from \"react\";\n\nexport const useInvoiceDetailsColumns = (props) => {\n return useMemo(() => [\n {\n field: 'Spacer-1', headerName: ' ', disableColumnMenu: true, width: 50,\n },\n {\n field: \"Item\", headerName: \"Item\", disableColumnMenu: true, width: 240,\n },\n {\n field: \"Description\", headerName: \"Description\", disableColumnMenu: true, flex: 2,\n },\n {\n field: \"Quantity\", headerName: \"Qty\", width: \"120\", align: \"right\", disableColumnMenu: true,\n headerAlign: \"right\", type: \"number\",\n valueFormatter: (props) => {\n Number((isNaN(props.value) && 0) || props.value).toFixed(2)\n },\n },\n {\n field: \"Price\", headerName: \"Price\", width: \"160\", align: \"right\", disableColumnMenu: true,\n headerAlign: \"right\", type: \"number\",\n valueFormatter: (props) => `$${props.value}`,\n },\n {\n field: \"Total\", headerName: \"Total\", width: \"160\", align: \"right\", disableColumnMenu: true,\n headerAlign: \"right\", type: \"number\",\n valueFormatter: (props) => {\n let row = props.api.getRow(props.id);\n return `$${((Number((isNaN(row.Quantity) && 0) || row.Quantity)) * Number(row.Price)).toFixed(2)}`\n },\n },\n {\n field: 'Spacer-2', headerName: ' ', disableColumnMenu: true, width: 30,\n },\n ], []);\n}","import React, { Fragment, useState, useCallback, useEffect } from \"react\";\nimport { Typography, Paper, } from \"@material-ui/core\";\nimport { FormLayout, Pending, useFormStyle, useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { useHistory, useParams, useLocation } from \"react-router-dom\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { CoreForm } from \"@kineticdata/react\";\n\nexport const RegisterForm = () => {\n const [showError, setShowError] = useState({\n open: false, message: \"\",\n severity: \"success\", \n onSnackbarClose: () => {}\n });\n const wrapCls = useWrappereStyles();\n const history = useHistory();\n const frmCls = useFormStyle();\n const {gid} = useParams();\n const {search} = useLocation();\n const [formValue, setFormValue] = useState();\n const [formType, setFormType] = useState(\"user-registration\");\n\n const handleSaveComplete = () => history.replace(\"/\");\n const handleError = useCallback((parms) => {\n setShowError({...showError, open: true, severity: \"error\", message: JSON.stringify(parms),\n onSnackbarClose: () => setShowError({...showError, open: false, message: \"random\"})\n });\n }, [showError]);\n\n useEffect(() => {\n if (gid) {\n setFormValue(gid);\n setFormType(\"self-register\");\n return;\n }\n }, [gid]);\n\n useEffect(() => {\n if (search){\n search.split(\"?\")[1].split(\"&\").map((value, index) => \n (value.split(\"=\")[0] === \"IGID\") && setFormValue(value.split(\"=\")[1]));\n setFormType(\"user-registration-invite\");\n return;\n }\n }, [search]);\n\n return (\n \n \n \n \n \n \n \n \n )\n}","import React, { Fragment, useState, useCallback, useEffect } from \"react\";\nimport { Typography, Paper } from \"@material-ui/core\";\nimport { FormLayout, Pending, useFormStyle, useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useHistory, useLocation, useParams } from \"react-router-dom\";\nimport { CoreForm } from \"@kineticdata/react\";\n// import { LoadCanvasTemplateNoReload, loadCaptchaEnginge, validateCaptcha } from 'react-simple-captcha';\n\nexport const PasswordRetrieve = ({type}) => {\n const [formvalue, setFormValue] = useState();\n // const [userCaptcha, setUserCaptcha] = useState('');\n const wrapCls = useWrappereStyles();\n const history = useHistory();\n const [showError, setShowError] = useState({\n open: false, message: \"\",\n severity: \"success\", \n onSnackbarClose: () => {}\n });\n\n const frmCls = useFormStyle(); \n\n const {gid} = useParams();\n const {search} = useLocation();\n\n const handleSaveComplete = () => {\n // if (!validateCaptcha(userCaptcha, true)){\n // setShowError({...showError, open: false, severity: \"\", message: \"kslksdjf\"});\n // setShowError({...showError, open: true, severity: \"error\", message: \"Captcha mismatch\"});\n // return;\n // }\n history.replace(\"/\");\n }\n const handleError = useCallback((parms) => {\n setShowError({...showError, open: true, severity: \"error\", message: parms.toString(),\n onSnackbarClose: () => setShowError({...showError, open: false, message: \"random\"})\n });\n }, [showError]);\n\n useEffect(() => {\n // loadCaptchaEnginge(5);\n (gid && setFormValue(gid)) ||\n (search && search.split(\"?\")[1].split(\"&\").map((value, index) => \n (value.split(\"=\")[0] === \"VGID\") && setFormValue(value.split(\"=\")[1])\n ));\n }, [gid, search]);\n\n const handleUpdated = () => {\n console.log(`this is submit call`);\n };\n\n // const handleChnage = useCallback((ev) => {\n // setUserCaptcha(ev.target.value);\n // });\n \n return (\n \n \n \n \n \n {/* \n */}\n \n \n \n \n \n );\n}","import React, { createContext, useContext, useState } from \"react\";\n\nconst NavigationContext = createContext();\n\nexport const NavigationProvider = (props) => {\n const {children} = props;\n const [bodyParams, setBodyParams] = useState();\n\n const value = {\n bodyParams, setBodyParams\n };\n\n return (\n \n {children}\n \n )\n}\n\nexport const useNavigationContext = () => useContext(NavigationContext);\n\n","import React, { Fragment, useEffect, useState } from \"react\";\nimport { Paper, Typography } from \"@material-ui/core\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { useCallback } from \"react\";\nimport { CONTACTROUTE, INCIDENTROUTE, JOBROUTE, SRVCREQROUTE } from \"../../controls/dapp.constants\";\nimport { useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { useNavigationContext } from \"../../navigation/navigation.provider\";\n\nconst routeMapping = [\n {key: \"IncidentID\", route: INCIDENTROUTE},\n {key: \"ContactID\", route: CONTACTROUTE},\n {key: \"PID\", route: CONTACTROUTE},\n {key: \"ServiceRequestID\", route: SRVCREQROUTE},\n {key: \"JOBID\", route: JOBROUTE},\n {key: \"VGID\", route: \"/reset/\"}, \n {key: \"approved\", route: \"/pendingcontact\"},\n {key: \"approvercontactid\", route: \"/pendingcontact\"},\n {key: \"ac\", route: \"/pendingcontact\"},\n]\n\nexport const NomatchRedirects = () => {\n const [success, setSuccess] = useState(true);\n const location = useLocation();\n const history = useHistory();\n const wrapCls = useWrappereStyles();\n const [showRedirect, setShowRedirect] = useState(false);\n const [redirectTo, setRedirectTo] = useState(null)\n const navCntx = useNavigationContext();\n\n const tryRedirect = useCallback((keys) => {\n let check = keys.map(x => {\n return routeMapping.find(y => y.key === x.key);\n });\n check = check.filter(x => !!x && x)?.[0];\n setSuccess(!!check);\n\n if (!!check && !!check.route){\n setShowRedirect(false);\n setRedirectTo(`${check.route}${keys.find(x => x.key === check.key)?.value}`)\n } else {\n setSuccess(false);\n setShowRedirect(true);\n }\n }, []);\n\n const findMatchRoute = useCallback((arr) => {\n let rte = \"\";\n let cnt = 1;\n\n let x = arr.map(element => {\n if (!rte || rte !== element.route) {\n rte = element.route;\n cnt = 1;\n } else {\n ++cnt;\n } \n return { ...element, cnt }; \n });\n \n return x.reduce((prev, curr, indx, arr) => {\n return ((prev.cnt > curr.cnt && prev) || curr)\n }, {});\n\n }, []);\n\n const tryRedirectWithBody = useCallback((keys) => {\n let check = keys.map(x => {\n return routeMapping.find(y => y.key === x.key);\n }).filter(x => !!x && x);\n \n let redir2 = findMatchRoute(check);\n let route = redir2.route;\n let params = check.map(x => {\n return keys.find(y => y.key === x.key)\n }).map(x => {\n return {[`${x.key}`]: x.value};\n });\n let single = {};\n params.map(x => single = {...single, ...x});\n // console.log(route, single);\n if (!!route){\n setShowRedirect(false);\n navCntx.setBodyParams(single);\n setRedirectTo(`${route}`);\n } else {\n setSuccess(false);\n setShowRedirect(true);\n }\n }, [findMatchRoute, navCntx]);\n\n useEffect(() => {\n if (!redirectTo) return;\n history.replace(redirectTo);\n }, [history, redirectTo]);\n \n useEffect(() => {\n if (!location) return;\n var chk = location.search.replace('?', '').split('&').map(x => {\n let splt = x.split('=');\n return {key: splt[0], value: splt[1]}\n });\n let filtered = chk.filter(x => x?.value && x);\n // console.log(JSON.stringify(filtered)); \n if (filtered.length <= 0) return;\n \n if (filtered.length > 1){\n tryRedirectWithBody(filtered); \n } else {\n tryRedirect(filtered); \n } \n\n }, [location, tryRedirect, tryRedirectWithBody]);\n\n return (\n \n {(showRedirect && \n \n \n \n {(success && `URL ${location.search} is being redirected`) || `The URL ${location.search} has no match to redirect`}\n \n \n ) || null }\n \n \n \n )\n}\n\n","import React, { Fragment, useState, useCallback } from \"react\";\nimport { Typography, Paper } from \"@material-ui/core\";\nimport { FormLayout, Pending, useFormStyle, useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { useHistory } from \"react-router-dom\";\nimport { CoreForm } from \"@kineticdata/react\";\n\nexport const EmailPreferences = () => {\n const wrapCls = useWrappereStyles();\n const history = useHistory();\n const [showError, setShowError] = useState({\n open: false, message: \"\",\n severity: \"success\", \n onSnackbarClose: () => {}\n });\n\n const frmCls = useFormStyle(); \n \n const handleSaveComplete = () => history.replace(\"/\");\n const handleError = useCallback((parms) => {\n setShowError({...showError, open: true, severity: \"error\", message: parms.toString(),\n onSnackbarClose: () => setShowError({...showError, open: false, message: \"random\"})\n });\n }, [showError]);\n \n return (\n \n \n \n \n \n \n \n \n );\n}\n","import React from \"react\";\nimport { Box, debounce, Toolbar, Typography } from \"@material-ui/core\";\nimport { ToolbarButton, useToolBarStyle } from \"../../../controls/shared.components\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faRefresh, faIdCard, faRemove, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport { QuickLookup } from \"../../../controls/search.box\";\n\n\nexport const InviteToolbar = (props) => {\n const { \n handleInvite, disableInvite, disableDelete, onRefresh, handleSearch, handleExport,\n ...other\n } = props;\n\n const cls = useToolBarStyle();\n\n const onSearchChange = debounce((val) => {\n if (handleSearch && typeof handleSearch === 'function'){\n handleSearch(val);\n }\n }, 800);\n \n return (\n \n }\n />\n \n onSearchChange(e.target.value)} \n />\n \n }\n />\n }\n />\n \n )\n} \n\nexport const ViewInviteToolbar = (props) => {\n const { \n handleInvite, disableInvite, handleDelete, disableDelete, onRefresh, handleSearch,\n ...other\n } = props;\n\n const cls = useToolBarStyle();\n\n const onSearchChange = debounce((val) => {\n if (handleSearch && typeof handleSearch === 'function'){\n handleSearch(val);\n }\n }, 800);\n \n return (\n \n }\n />\n }\n handleClick={handleDelete}\n />\n \n onSearchChange(e.target.value)} \n />\n \n }\n />\n \n )\n} \n","import { FormControl, Link, MenuItem, Select } from \"@material-ui/core\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { useCallback } from \"react\";\nimport { DappBooleanAsIcon } from \"../../../controls/shared.components\";\n\nexport const useSortMapper = () => { \n return useMemo(() => [\n {field: \"First Name\", sortBy: \"FirstName\"},\n {field: \"Last Name\", sortBy: \"LastName\"}, \n {field: \"Email Address\", sortBy: \"EmailAddress\"},\n {field: \"User Type\", sortBy: \"UserType\"}\n ], []);\n}\n\nexport const useInviteColumns = (params) => {\n const {handleViewContact, handleTypeChange} = params;\n\n return useMemo(() => [\n {\n field: \"First Name\", headerName: \"First Name\", flex: 0.3, disableColumnMenu: true,\n resizable: true,\n renderCell: (params) => {\n return (\n {\n handleTypeChange({userType: userType, row: params.row});\n }}\n />\n )\n }\n },\n {\n field: \"Is Invited CMS\", headerName: \"Invited?\", width: 140, align: \"center\",\n headerAlign: \"center\", sortable: false, disableColumnMenu: true, resizable: false,\n renderCell: (params) => \n \n User \n Operator \n Administrator \n \n \n )\n}\n\nexport const useViewInviteColumns = (params) => {\n const {handleViewContact} = params;\n return useMemo(() => [\n {\n field: \"LastName\", headerName: \"Name\", flex: 0.3, disableColumnMenu: true,\n renderCell: (params) => {\n return (\n \n },\n ], [handleViewContact]);\n} \n","import React from \"react\";\nimport { useCallback } from \"react\";\nimport { \n Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography \n} from \"@material-ui/core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faWarning } from \"@fortawesome/free-solid-svg-icons\";\n\nexport const DappConfirm = (props) => {\n const {open, title, question, handleResult} = props;\n\n const handleCancel = useCallback(() => {\n if (handleResult && typeof handleResult === 'function')\n handleResult({accepted: false});\n }, [handleResult])\n\n const handleOk = useCallback(() => {\n if (handleResult && typeof handleResult === 'function')\n handleResult({accepted: true});\n }, [handleResult])\n\n return (\n \n {title} \n \n \n \n \n \n \n {question}\n \n \n \n \n \n OK \n Cancel \n \n \n )\n}","import React, { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { rowsperpage, WrapperPaper } from \"../../../controls/shared.components\";\nimport { DataGridPro } from \"@mui/x-data-grid-pro\";\nimport { useGridStyles } from \"../../../controls/datagrid.striped\";\nimport { CustomAlert } from \"../../../alerts/alert.snackbar\";\nimport { useDataFromBridge } from \"../../../controls/custom.hooks\";\nimport { useDappContext } from \"../../../auth/dapp.context\";\nimport clsx from \"clsx\";\n// import { useHistory, useLocation } from \"react-router-dom\";\nimport { ViewInviteToolbar } from \"./invite.toolbar\";\nimport { useViewInviteColumns } from \"./invite.hooks\";\nimport { DappConfirm } from \"../../modals/modal.confirmation\";\nimport { cancelApiCall, deleteInvites, sendInvites } from \"../../../apicalls/contact.api\";\n\nconst initLoadParams = {\n AscDesc: 'DESC',\n GetTotal: true,\n IncludeInactive: false,\n // PageNum: 1,\n // PageSize: rowsperpage[0],\n PageToken: ' ',\n OrderBy: 'CCWebInvitationID',\n SearchValue: ' ',\n }\n \nconst bridgedResourceName = \"Contacts2Invite\"\n \nexport const ViewInvites = (props) => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState();\n const [griddata, setGridData] = useState([]);\n const [pageNum, setPageNum] = useState(0);\n const [pageSize, setPageSize] = useState(rowsperpage[0]);\n const [selectedRows, setSelectedRows] = useState();\n const [pagetoken, setPageToken] = useState(' ');\n const gridClasses = useGridStyles();\n const dappCntx = useDappContext();\n\n const [showConfirmation, setShowConfirmation] = useState({\n open: false, title: '', question: '', handleRsult: () => {}\n });\n\n // const history = useHistory();\n // const location = useLocation();\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: 'success', message: '',\n onSnackBarClose: () => {},\n });\n\n const contacts = useDataFromBridge({\n xUser: dappCntx.user?.user, apiValues: apiparms,\n bridgedResourceName: bridgedResourceName \n });\n\n const contactColumns = useViewInviteColumns({\n handleViewContact: ({ContactID}) => console.log(`navigating to ${ContactID}`),\n });\n\n const handlePageChange = useCallback((model, details) => {\n setGridData([]);\n if (model.pageSize !== pageSize)\n model.page = 0;\n setPageNum(model.page);\n setPageSize(model.pageSize);\n setLoading(true);\n setApiparms({...(apiparms || initLoadParams), \n PageNum: model.page + 1, \n PageSize: model.pageSize, \n PageToken: pagetoken\n });\n }, [apiparms, pageSize, pagetoken]);\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n\n const showSuccess = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"success\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n \n useEffect(() => {\n if (!contacts) return;\n\n setLoading(false);\n if (!contacts.success) {\n showError({message: contacts.data.Message || contacts.data.message});\n return;\n }\n\n if (!!contacts.data?.error){\n showError({message: contacts.data?.error?.message});\n return;\n }\n \n setPageToken(contacts.data?.metadata?.nextPageToken);\n setGridData((contacts.data.records || contacts.data.Data).map((row, indx) => { return {...row, id: indx}}));\n // eslint-disable-next-line\n }, [contacts]);\n\n const handleRefresh = useCallback(() => {\n setLoading(true);\n setGridData([]);\n setTimeout(() => {\n setApiparms({...apiparms, PageToken: 'iuw823=='});\n setApiparms({...apiparms, PageToken: ' '});\n }, 1500);\n }, [apiparms]);\n\n const handleSelectionChange = useCallback((selection) => {\n setSelectedRows(selection.map(x => griddata.find(rec => x === rec.id)));\n }, [griddata]);\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Invite\");\n }, [dappCntx]);\n\n const handleSendInvite = useCallback(({accepted}) => {\n setShowConfirmation({...showConfirmation, \n open: false, title: 'random', \n question: 'lksd', handleResult: () => {}});\n \n if (!accepted) return;\n try{\n sendInvites({user: dappCntx.user?.user, data: selectedRows}).then((response) => {\n showSuccess({message: `Invitations sent successfully to ${selectedRows.length} contacts with runid: ${response.data.runId}`});\n handleRefresh();\n }).catch((error) => {\n showError({message: error.toString()});\n });\n } catch (ex) {\n showError(ex.toString());\n }\n return () => {\n cancelApiCall();\n }\n }, [showConfirmation, selectedRows, dappCntx, showSuccess, showError, handleRefresh]); \n\n const handleDeleteInvite = useCallback(({accepted}) => {\n setShowConfirmation({...showConfirmation, \n open: false, title: 'random', \n question: 'lksd', handleResult: () => {}});\n \n if (!accepted) return;\n const inviteIds = selectedRows.map(x => x.CCWebInvitationID);\n try{\n deleteInvites({user: dappCntx.user?.user, data: inviteIds}).then((response) => {\n showSuccess({message: `Invitations successfully deleted for: ${selectedRows.length} contacts with runId: ${response.data.runId}`});\n handleRefresh();\n }).catch((error) => {\n showError({message: `Failed to delete invites with: ${error.toString()}`});\n })\n } catch (ex) {\n showError({message: `Delete invites API call failed with: ${ex.toString()}`});\n }\n return () => {\n cancelApiCall();\n }\n }, [showConfirmation, handleRefresh, dappCntx, showSuccess, showError, selectedRows]);\n\n const handleInvite = useCallback(() => {\n setShowConfirmation({ ...showConfirmation, \n open: true,\n title: `Re-sending Invitation${(selectedRows.length > 1 && 's') || ''}`,\n question: `Are you sure you want to re-send invitations to ${selectedRows.length} contacts?`,\n handleResult: handleSendInvite,\n })\n }, [showConfirmation, selectedRows, handleSendInvite]);\n\n const handleDelete = useCallback(() => {\n setShowConfirmation({ ...showConfirmation, \n open: true,\n title: `Deleting Invitation${(selectedRows.length > 1 && 's') || ''}`,\n question: `Are you sure you want to delete invitations for ${selectedRows.length} contacts?`,\n handleResult: handleDeleteInvite\n })\n }, [showConfirmation, selectedRows, handleDeleteInvite])\n\n const handleSearchValueChange = useCallback((val) => {\n setGridData([]);\n setLoading(true);\n setApiparms({...apiparms, SearchValue: (!!val && val) || ' '})\n }, [apiparms])\n\n const handleSortChange = useCallback((sortmodel) => {\n if (!sortmodel) return;\n if (!!sortmodel && sortmodel.length <= 0) return;\n if (apiparms.OrderBy === sortmodel[0].field && apiparms.AscDesc === sortmodel[0].sort){\n return;\n }\n\n setGridData([]);\n setLoading(true);\n\n setApiparms({\n ...apiparms,\n OrderBy: sortmodel[0].field,\n AscDesc: sortmodel[0].sort,\n });\n }, [apiparms]);\n\n return (\n \n \n params.row[\"Is Invited CMS\"] !== '-1' && params.row[\"Is Active CMS\"] !== '-1'}\n rows={griddata}\n loading={loading}\n rowCount={contacts?.data?.metadata?.size || 0}\n // pageSizeOptions={rowsperpage}\n checkboxSelection \n disableSelectionOnClick\n onRowSelectionModelChange={handleSelectionChange}\n onPaginationModelChange={handlePageChange}\n sortingMode=\"server\"\n onSortModelChange={handleSortChange}\n pagination\n // initialState={{pagination: {\n // paginationModel: {\n // page: pageNum,\n // pageSize: pageSize\n // }\n // }}}\n />\n \n \n );\n}\n\n","import React, { Fragment, useCallback, useEffect, useState } from \"react\";\nimport { rowsperpage, WrapperPaper } from \"../../../controls/shared.components\";\nimport { DataGridPro, useGridApiRef } from \"@mui/x-data-grid-pro\";\n// import { TablePagination } from \"@material-ui/core\";\nimport { useGridStyles } from \"../../../controls/datagrid.striped\";\nimport { CustomAlert } from \"../../../alerts/alert.snackbar\";\nimport { useDataFromBridge } from \"../../../controls/custom.hooks\";\nimport { useDappContext } from \"../../../auth/dapp.context\";\nimport clsx from \"clsx\";\n// import { useHistory, useLocation } from \"react-router-dom\";\nimport { InviteToolbar } from \"./invite.toolbar\";\nimport { useInviteColumns, useSortMapper } from \"./invite.hooks\";\nimport { cancelApiCall, sendInvites } from \"../../../apicalls/contact.api\";\nimport { DappConfirm } from \"../../modals/modal.confirmation\";\n\nconst initLoadParams = {\n AscDesc: 'ASC',\n GetTotal: true,\n IncludeInactive: false,\n PageNum: 1,\n PageSize: 10,\n PageToken: ' ',\n SortField: 'LastName',\n SubClientContact: false,\n excludeCMSUser: true,\n SearchValue: ' ',\n }\n\nconst InvitationRecord = {\n FirstName: \"\",\n LastName: \"\",\n EmailAddress: \"\",\n UserType: \"\",\n PrimaryContactID: 0,\n ContactID: 0,\n} \n \nconst bridgedResourceName = \"All Invited Contacts\"\n \nexport const Contacts2Invite = (props) => {\n const { ...other } = props;\n const [loading, setLoading] = useState(true);\n const [apiparms, setApiparms] = useState(initLoadParams);\n const [griddata, setGridData] = useState([]);\n const [pageNum, setPageNum] = useState(0);\n const [pageSize, setPageSize] = useState(rowsperpage[0]);\n const [selectedRows, setSelectedRows] = useState();\n const gridClasses = useGridStyles();\n const dappCntx = useDappContext();\n const sortMapper = useSortMapper();\n\n const apiRef = useGridApiRef();\n\n const [showConfirmation, setShowConfirmation] = useState({\n open: false, title: '', question: '', handleResult: () => {}\n });\n\n // const history = useHistory();\n // const location = useLocation();\n\n const [showAlert, setShowAlert] = useState({\n open: false, severity: 'success', message: '',\n onSnackBarClose: () => {},\n });\n\n const contacts = useDataFromBridge({\n xUser: dappCntx.user?.user, apiValues: apiparms,\n bridgedResourceName: bridgedResourceName \n });\n\n const handleRowUserTypeChange = useCallback((props) => {\n const {userType, row} = props;\n let modified = griddata.slice();\n modified.find(x => x.id === row.id).UserType = userType;\n setGridData(modified);\n }, [griddata]);\n\n const contactColumns = useInviteColumns({\n handleViewContact: ({ContactID}) => console.log(`navigating to ${ContactID}`),\n handleTypeChange: (props) => handleRowUserTypeChange(props),\n });\n\n const handlePageChange = useCallback((model, details) => {\n setGridData([]);\n if (model.pageSize !== pageSize)\n model.page = 0;\n setPageNum(model.page);\n setPageSize(model.pageSize);\n setLoading(true);\n setApiparms({...apiparms, PageNum: model.page + 1, PageSize: model.pageSize});\n }, [apiparms, pageSize]);\n\n const showError = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"error\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n\n const showSuccess = useCallback(({message}) => {\n setShowAlert({...showAlert, open: true, \n severity: \"success\", message: message,\n onSnackBarClose: () => { setShowAlert({open: false, message: \"random\"})}\n });\n }, [showAlert])\n \n useEffect(() => {\n if (!contacts) return;\n let doShow = true;\n\n setLoading(false);\n if (!contacts.success) {\n showError({message: contacts.data.Message || contacts.data.message});\n return;\n }\n\n if (!!contacts.data?.error){\n showError({message: contacts.data?.error?.message});\n return;\n }\n \n doShow && setGridData((contacts.data.records || contacts.data.Data).map((row, indx) => { \n return {...row, id: indx, \"User Type\": row[\"User Type\"] === \"\" && \"User\"}\n }));\n\n return () => doShow = false;\n\n // eslint-disable-next-line\n }, [contacts]);\n\n const handleRefresh = useCallback(() => {\n setLoading(true);\n setGridData([]);\n setApiparms({...apiparms, PageToken: 'random'});\n setApiparms({...apiparms, PageToken: ' '});\n }, [apiparms]);\n\n const handleSelectionChange = useCallback((selection) => {\n setSelectedRows(selection.map(x => griddata.find(rec => x === rec.id)));\n }, [griddata]);\n\n const handleSearchValueChange = useCallback((val) => {\n setGridData([]);\n setLoading(true);\n setApiparms({...apiparms, SearchValue: (!!val && val) || ' '})\n }, [apiparms])\n\n useEffect(() => {\n dappCntx.dappSubtitle(\"Invite\");\n }, [dappCntx]);\n\n const handleResult = (props) => {\n const {success, message} = props;\n success && showSuccess({message: message});\n !success && showError({message: message});\n handleRefresh();\n }\n\n const handleSendInvite = useCallback(({accepted}) => {\n setShowConfirmation({...showConfirmation, \n open: false, title: 'random', \n question: 'lksd', handleResult: () => {}});\n \n if (!accepted) return;\n\n const inviteData = selectedRows.map(x => { return {...InvitationRecord, \n FirstName: x[\"First Name\"],\n LastName: x[\"Last Name\"],\n EmailAddress: x[\"Email Address\"],\n UserType: x[\"User Type\"],\n PrimaryContactID: x[\"Primary Contact ID\"],\n ContactID: x[\"Contact ID\"]\n }});\n\n try{\n sendInvites({user: dappCntx.user?.user, data: inviteData}).then((response) => {\n handleResult({data: response.data, success: true, \n message: `Invitations sent successfully to ${selectedRows.length} contacts with runid: ${response.data.runId}`\n });\n }).catch((error) => {\n handleResult({data: [], sucess: false, message: `Failed to send invites with: ${error.toString()}`});\n });\n } catch (exp){\n handleResult({data: [], success: false, message: `Failed to send invites with: ${exp.toString()}`});\n }\n return () => {\n cancelApiCall();\n }\n //eslint-disable-next-line \n }, [dappCntx, selectedRows]);\n \n const handleInvite = useCallback(() => {\n setShowConfirmation({ ...showConfirmation, \n open: true,\n title: `Sending Invitation${(selectedRows.length > 1 && 's') || ''}`,\n question: `Are you sure you want to send invitations to ${selectedRows.length} contacts?`,\n handleResult: handleSendInvite,\n })\n }, [showConfirmation, selectedRows, handleSendInvite]);\n\n const handleSortChange = useCallback((sortmodel) => {\n if (!sortmodel) return;\n if (!!sortmodel && sortmodel.length <= 0) return;\n\n const mapped = sortMapper.find(x => x.field === sortmodel[0].field);\n if (!mapped) return;\n\n if (apiparms.SortField === mapped.sortBy && apiparms.AscDesc === sortmodel[0].sort){\n return;\n }\n\n setGridData([]);\n setLoading(true);\n \n setApiparms({\n ...apiparms, \n SortField: mapped.sortBy,\n AscDesc: sortmodel[0].sort,\n });\n }, [apiparms, sortMapper]);\n\n const handleExport = useCallback(() => {\n const d = new Date();\n const stamp = `${d.getFullYear()}${d.getMonth()}${d.getDay()}-${d.getHours()}${d.getMinutes()}`;\n\n apiRef.current.exportDataAsCsv({\n fileName: `INVITES_CMS_${stamp}-pg(${pageNum + 1})-sz(${pageSize}).csv`\n });\n }, [pageNum, pageSize, apiRef]);\n\n return (\n \n \n params.row[\"Is Invited CMS\"] !== '-1' && params.row[\"Is Active CMS\"] !== '-1'}\n rows={griddata}\n loading={loading}\n apiRef={apiRef}\n rowCount={contacts?.data?.metadata?.count || 0}\n //pageSize={pageSize} \n // pageSizeOptions={rowsperpage}\n checkboxSelection \n disableSelectionOnClick\n onRowSelectionModelChange={handleSelectionChange}\n onPaginationModelChange={handlePageChange}\n sortingMode=\"server\"\n onSortModelChange={handleSortChange}\n pagination\n // initialState={{\n // pagination: {\n // paginationModel: {page: pageNum, pageSize: pageSize}\n // }\n // }}\n />\n \n \n );\n}\n\n","import React, { Fragment, useState, useCallback, useEffect } from \"react\";\nimport { Typography, Paper, } from \"@material-ui/core\";\nimport { FormLayout, Pending, useFormStyle, useWrappereStyles } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { useHistory, useLocation, useParams } from \"react-router-dom\";\nimport { CustomAlert } from \"../../alerts/alert.snackbar\";\nimport { CoreForm } from \"@kineticdata/react\";\n\nexport const RegisterVerifyForm = () => {\n const[formvalue, setFormValue] = useState();\n const [showError, setShowError] = useState({\n open: false, message: \"\",\n severity: \"success\", \n onSnackbarClose: () => {}\n });\n const wrapCls = useWrappereStyles();\n const history = useHistory();\n const frmCls = useFormStyle();\n const {gid} = useParams();\n const {search} = useLocation();\n\n const handleSaveComplete = () => history.replace(\"/\");\n const handleError = useCallback((parms) => {\n setShowError({...showError, open: true, severity: \"error\", message: parms.toString(),\n onSnackbarClose: () => setShowError({...showError, open: false, message: \"random\"})\n });\n }, [showError]);\n\n\n useEffect(() => {\n (gid && setFormValue(gid)) ||\n (search && search.split(\"?\")[1].split(\"&\").map((value, index) => \n (value.split(\"=\")[0] === \"VGID\") && setFormValue(value.split(\"=\")[1])\n ));\n }, [gid, search]);\n\n return (\n \n \n \n \n \n \n \n \n )\n}","import { Paper, Typography } from \"@material-ui/core\";\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFormStyle } from \"../../controls/shared.components\";\nimport { BottomInfo } from \"../bottom/bottom.info\";\nimport { useNavigationContext } from \"../../navigation/navigation.provider\";\nimport { CoreForm } from '@kineticdata/react';\nimport { useHistory } from \"react-router-dom\";\n\nexport const PendingContact = () => { \n const [message, setMessage] = useState('Invalid Parameters...');\n const frmCls = useFormStyle();\n const navCntx = useNavigationContext();\n const history = useHistory();\n\n const frm = useRef();\n\n useEffect(() => {\n if (!navCntx || !navCntx?.bodyParams) return;\n setMessage(\"Processing...\");\n }, [navCntx]);\n\n const handleError = useCallback((params) => {\n console.log(`form failure with: `, params);\n }, []);\n\n const handleSaveComplete = useCallback((params) => {\n setMessage(`Contact has been ::: ${(navCntx.bodyParams.approved === 'true' && 'Approved') || 'Disapproved'}`);\n setTimeout(() => {\n history.replace('/');\n }, 2000);\n }, [navCntx, history]);\n\n const handleLoaded = useCallback((kForm) => {\n if (!!frm.current) return;\n frm.current = kForm; \n setTimeout(() => {\n if (!navCntx?.bodyParams) return;\n console.log(`submitting page...`);\n kForm.submitPage();\n }, 2000); \n }, [frm, navCntx]);\n\n return (\n \n \n \n {message}\n \n handleLoaded(frm)}\n onError={handleError}\n onCompleted={handleSaveComplete}\n values={{\"Pending Contact Object\": JSON.stringify(navCntx?.bodyParams || {})}}\n components={{\n Pending: Pending,\n Layout: FormLayout,\n }}\n />\n \n \n \n \n \n \n )\n}\n\nconst FormLayout = ({ form, content}) => {\n return (\n \n
\n
{form?.name}
\n
\n {content}\n
\n
\n
Loading form...
);","import React, { useEffect, useState } from \"react\";\nimport { Switch, Route, Redirect } from \"react-router-dom\";\n// 'original' kapp components and routes\nimport { Profile } from \"../components/KAppComponents/Profile\";\nimport { Form } from \"../components/KAppComponents/Form\";\nimport { FormList } from \"../components/KAppComponents/FormList\";\nimport { KappList } from \"../components/KAppComponents/KappList\";\nimport { SubmissionList } from \"../components/KAppComponents/SubmissionList\";\nimport { NotFound } from \"../components/KAppComponents/NotFound\";\n// current login\nimport { DLogin } from \"../components/KAppComponents/Login\";\n// import { Home } from \"../components/home/home.main\";\nimport { HomeV2 } from \"../components/home/home.v2.main\";\nimport { Contacts } from \"../components/contacts/contact.main\";\nimport { AddEditContact } from \"../components/contacts/contact.edit\";\nimport { Devices } from \"../components/devices/devices.main\";\nimport { Jobs } from \"../components/jobs/jobs.main\";\nimport { ServiceRequests } from \"../components/services requests/service.request.main\";\nimport { ManagedServices } from \"../components/managed services/managed.services.main\";\nimport { CustomerBalances } from \"../components/balances/balances.main\";\nimport { Surveys } from \"../components/surveys/survey.main\";\nimport { PowerBIEmbeddedReport } from \"../components/reports/reports.main\";\nimport { AddEditIncident } from \"../components/incidents/incidents.edit\";\nimport { AddIncidentContactDevice } from \"../components/incidents/incidents.add\";\nimport { AddServiceRequest, EditServiceRequest } from \"../components/services requests/service.request.add\";\nimport { AddEditDevice } from \"../components/devices/device.edit\";\nimport { AddEditJobs } from \"../components/jobs/jobs.edit\";\nimport { ProductList } from \"../components/products/product.main\";\nimport { JobReportList } from \"../components/jobs/reports/job.report\";\nimport { ActionList } from \"../components/actions/actions.main\";\nimport { Incidents } from \"../components/incidents/incidents.main\";\nimport { ContactAccess } from \"../components/contacts/contact.access\";\nimport { ContactPreferences } from \"../components/contacts/contact.preferences\";\nimport { NewAction } from \"../components/actions/actions.new\";\nimport { useDappContext } from \"../auth/dapp.context\";\nimport { InvoiceDetails } from \"../components/balances/details/invoicedetails.main\";\nimport { RegisterForm } from \"../components/register/new.user\";\nimport { PasswordRetrieve } from \"../components/register/pass.retrieve\";\nimport { NomatchRedirects } from \"../components/oldlinks/links.redirect\";\nimport { EmailPreferences } from \"../components/register/email.pref\";\nimport { CONTACTROUTE, INCIDENTROUTE, JOBROUTE, SRVCREQROUTE } from \"../controls/dapp.constants\";\nimport { ViewInvites } from \"../components/contacts/invite/invite.view\";\nimport { Contacts2Invite } from \"../components/contacts/invite/invite.main\";\nimport { RegisterVerifyForm } from \"../components/register/register.verify\";\nimport { TicketsProvider } from \"../components/incidents/incident.provider\";\nimport { PendingContact } from \"../components/register/contact.pending\";\n// import { InvitationForm } from \"@kineticdata/react\";\n// import { SplitPanelTestLayout } from \"../components/tests/test.layout\";\n\n//TODO: File browser expiriments\n//import { DappFileManager } from \"../components/files/file.main\";\n\n// export const INCIDENTROUTE = \"/incident/edit/\";\n// export const SRVCREQROUTE = \"/servicerequest/edit\";\n// export const CONTACTROUTE = \"/contacts/edit/\";\n// export const JOBROUTE = \"/jobs/edit/\";\n\n\nexport const KAppRoutes = ({setBreadcrumbs, profile}) => {\n console.log(`trying to navigate to ${profile}`);\n return (\n \n ( (\n \n \n } exact/>\n } exact />\n \n );\n}\n\nexport const DAppRoutes = (props) => {\n const {loggedIn, setBreadcrumbs, profile, ...params} = props;\n const dappCntx = useDappContext();\n const [isadmin, setIsAdmin] = useState(false);\n \n useEffect(() => {\n if (!dappCntx?.user) return;\n setIsAdmin(dappCntx.user.user.UserType === \"Administrator\");\n }, [dappCntx])\n\n return loggedIn ? (\n \n } exact/>\n } exact/>}\n {isadmin && } exact/>\n } exact/>\n {/* \n \n {isadmin &&
}/>\n
}/>\n \n \n } />\n } exact/>\n } exact />\n\n {/* No match found for path
}/>\n \n ) : (\n \n } exact/>\n } exact/>\n \n \n \n \n )\n}\n\n\n","import React, { Fragment, useState } from 'react';\nimport axios from \"axios\";\nimport './App.css';\nimport { KineticLib, logout, } from '@kineticdata/react';\nimport { history } from './index';\nimport { WallySpinner } from './components/KAppComponents/Loading';\nimport { DLogin, LoginDialog } from './components/KAppComponents/Login';\n// import { Header } from './components/Header';\nimport * as TableComponents from './components/KAppComponents/TableComponents';\n// import { OriginalNav } from './navigation/kinetic.navigation';\nimport { TopNavBar } from './navigation/top.navbar';\nimport { LoadingProgress } from './components/Loading2';\nimport { /*KAppRoutes,*/ DAppRoutes } from './navigation/app.routes';\nimport { DappProvider } from './auth/dapp.context';\nimport { CMSAPIKEY } from './controls/dapp.constants';\nimport { useLocation } from 'react-router-dom';\nimport { useEffect } from 'react';\n\nimport { LicenseInfo} from '@mui/x-license-pro';\n// import { ChatScript, RemoveChatScript } from './components/bottom/chat.live';\nimport { NavigationProvider } from './navigation/navigation.provider';\nimport { TicketsProvider } from './components/incidents/incident.provider';\nimport { ServiceRequestProvider } from './components/services requests/filter/filter.provider';\n\nLicenseInfo.setLicenseKey('78b4c61b76aaf176232f22fbf082c61bTz04Nzc1NyxFPTE3NDM3NzkwNzUwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=');\n\nexport const appLogout = () => logout(() => { \n history.replace('/');\n});\n\n// use Wally for empty app\nexport const EmptyBodyRow = () => \n {({ initialized, loggedIn, loginProps, timedOut }) => (\n \n \n \n {(!initialized && \n \n \n \n \n \n \n\n {timedOut && (\n \n \n )}\n \n \n )}\n \n );\n};\n\naxios.interceptors.request.use((config) => {\n config.headers = {\n ...config.headers, \n CmsApiKey: CMSAPIKEY\n }\n return config;\n}, async (error) => {\n console.log(`something happens here...`);\n return Promise.reject(error);\n});\n","import 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Router } from 'react-router-dom';\nimport { createHashHistory } from 'history';\nimport { App } from './App';\nimport './index.css';\nimport 'react-big-calendar/lib/css/react-big-calendar.css';\nimport 'react-big-calendar/lib/addons/dragAndDrop/styles.css';\n\n// import { bundle } from \"react-kinetic-core\";\n// import { Alert } from \"reactstrap\";\n// import 'bootstrap/dist/css/bootstrap.css';\n\n// Asynchronously import the global dependencies that are used in the embedded\n// forms. Note that we deliberately do this as a const so that it should start\n// immediately without making the application wait but it will likely be ready\n// before users nagivate to the actual forms.\nconst globals = import('./globals');\n\nexport const history = createHashHistory();\n\nReactDOM.render(\n \n ,\n document.getElementById('root'),\n);\n\n\n","import React, { useState, useEffect } from \"react\";\nimport { \n ContentState, convertFromHTML, convertToRaw, EditorState, AtomicBlockUtils, SelectionState,\n} from \"draft-js\";\nimport { Editor } from 'react-draft-wysiwyg';\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';\nimport ReactDOM from 'react-dom';\nimport { bundle } from '@kineticdata/react';\nimport { useCallback } from \"react\";\nimport draftjsToHtml from \"draftjs-to-html\";\n\nexport const DappEditor = (props) => {\n const { rawContent, onChange } = props;\n const [editorState, setEditorState] = useState(() => {EditorState.createEmpty()});\n\n useEffect(() => {\n if (!rawContent) return;\n const fromHtml = convertFromHTML(rawContent);\n const contentState = ContentState.createFromBlockArray(\n fromHtml.contentBlocks,\n fromHtml.entityMap\n );\n\n let st = EditorState.createWithContent(contentState);\n\n contentState.getBlocksAsArray().forEach(block => {\n const blockKey = block.getKey();\n const entityKey = contentState.getBlockForKey(blockKey).getEntityAt(0);\n const hasImage = entityKey && contentState.getEntity(entityKey).getType() === 'IMAGE';\n if (hasImage){\n st = EditorState.acceptSelection(\n st, SelectionState.createEmpty(blockKey)\n );\n st = AtomicBlockUtils.insertAtomicBlock(st, entityKey, ' ');\n }\n });\n\n setEditorState(st);\n }, [rawContent]);\n\n const insertImage = (url) => {\n const contentState = editorState.getCurrentContent();\n const contentStateWithEntity = contentState.createEntity('IMAGE', 'IMMUTABLE', { src: url },);\n const entityKey = contentStateWithEntity.getLastCreatedEntityKey();\n const newEditorState = EditorState.set( editorState, { currentContent: contentStateWithEntity });\n return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');\n }; \n\n const handleChange = useCallback((e) => {\n setEditorState(e);\n if (!!onChange && typeof onChange === 'function'){\n const currContent = e.getCurrentContent(); \n let rawCnt = convertToRaw(currContent);\n onChange(draftjsToHtml(rawCnt));\n }\n }, [onChange]);\n\n const handlePastedFiles = (files) => {\n var file = files[0]; \n if (file.kind !== 'file' && file.type !== 'image/png') return;\n\n let reader = new FileReader();\n reader.onload = function(event){\n setEditorState(insertImage(event.target.result));\n }\n reader.readAsDataURL(file); \n } \n\n return (\n