\r\n Yay! You have seen it all\r\n
\r\n }\r\n >\r\n {notifications?.notifications?.map((notification) => {\r\n returnLast
\r\n{label}
\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\n// update and return date time copy based on useDST value\r\nexport const getDateTimeWithDstAdjustment = (dateTimeFilter) => {\r\n const dateTimeFilterCopy = { ...dateTimeFilter };\r\n if (dateTimeFilterCopy?.useDst) {\r\n dateTimeFilterCopy.utcOffsetInMinutes += 60;\r\n }\r\n return dateTimeFilterCopy;\r\n};\r\n","import React, { useContext, useCallback, useState, useEffect, useMemo } from 'react';\r\n\r\nimport Card from '@mui/material/Card';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Button from '@mui/material/Button';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport TextField from '@mui/material/TextField';\r\nimport { IconCalendarTime, IconReload, IconDotsVertical, IconEdit, IconTrash, IconFilter, IconStar } from '@tabler/icons';\r\nimport CreateWidgetDialog from '../CreateWidgetDialog/CreateWidgetDialog';\r\nimport { DashboardStateActions, DashboardStateContext, DashboardStateDispatchContext } from '../context/DashboardStateContext';\r\nimport QueueFilterSelectionDialog from '../QueueFilterSelectionDialog/QueueFilterSelectionDialog';\r\nimport { useDispatch, useSelector } from 'store';\r\nimport DateRangePickerDialog from '../DateRangePickerDialog/DateRangePickerDialog';\r\nimport { useSnackbar } from 'notistack';\r\nimport { WidgetTypes, defaultDateRangeFormat } from '../constants';\r\nimport {\r\n deleteDashboardSuccess,\r\n loadQueueDashboardList,\r\n setDefaultQueueDashboardSuccess,\r\n updateDashboardName\r\n} from 'store/slices/queueDashboard';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { LoadingButton } from '@mui/lab';\r\nimport ConfirmationDialog from 'ui-component/ConfirmationDialog';\r\nimport { Tooltip } from '@mui/material';\r\nimport { getQueueDashboardRefreshDataEventObj } from '../Utils/queueDashboardUtils';\r\nimport { deleteQueueDashboard, saveUpdatedDashboard, setDashboardAsDefault } from '../Utils/queueDashboardApiCallsUtil';\r\nimport { useTheme } from '@emotion/react';\r\nimport moment from 'moment';\r\nimport useNavigationBlocker from 'hooks/useNavigationBlocker';\r\nimport { DiscardChangesConfirmationDlgMsg } from 'store/constant';\r\nimport { isEqual } from 'lodash';\r\n\r\n// Cooldown period (seconds) for the reload operation in title bar\r\nconst ReloadCooldownMaxTicks = 30;\r\n\r\nexport default function TitleBar() {\r\n const theme = useTheme();\r\n const [isQueueFilterSelectionDialogOpen, setIsQueueFilterSelectionDialogOpen] = useState(false);\r\n const [isEditDateRangeDialogOpen, setIsEditDateRangeDialogOpen] = useState(false);\r\n const [deleteValidationMsg, setDeleteValidationMsg] = useState(null);\r\n const [showDeleteConfirmationDlg, setShowDeleteConfirmationDlg] = useState(false);\r\n const { queueDashboards } = useSelector((state) => state.queueDashboard);\r\n const [error, setError] = useState('');\r\n const { enqueueSnackbar } = useSnackbar();\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [reloadCooldownTicks, setReloadCooldownTicks] = useState(0);\r\n const open = Boolean(anchorEl);\r\n\r\n const {\r\n isInEditMode,\r\n savingDashboard,\r\n dashboardId,\r\n dashboardName,\r\n queueIdsFilter,\r\n selectedQueueId,\r\n widgets,\r\n dateTimeFilter,\r\n isDefault,\r\n hasUnsavedChanges,\r\n dateTimeRange,\r\n dataSource\r\n } = useContext(DashboardStateContext);\r\n const [queueDashboardName, setQueueDashboardName] = useState(dashboardName);\r\n\r\n const { dispatchDashboardStateAction } = useContext(DashboardStateDispatchContext);\r\n const dispatch = useDispatch();\r\n const navigate = useNavigate();\r\n const [showDiscardChangesDialog, confirmNavigation, cancelNavigation] = useNavigationBlocker(hasUnsavedChanges);\r\n\r\n const handleReload = useCallback(\r\n (e) => {\r\n if (reloadCooldownTicks === 0) {\r\n // Dispatch the event to trigger refresh\r\n const event = getQueueDashboardRefreshDataEventObj();\r\n document.body.dispatchEvent(event);\r\n\r\n setReloadCooldownTicks(ReloadCooldownMaxTicks);\r\n }\r\n },\r\n [reloadCooldownTicks]\r\n );\r\n\r\n useEffect(() => {\r\n if (reloadCooldownTicks > 0) {\r\n // Tick down every one second\r\n const timeoutId = setTimeout(() => {\r\n setReloadCooldownTicks(reloadCooldownTicks - 1);\r\n }, 1000);\r\n\r\n return () => {\r\n clearTimeout(timeoutId);\r\n };\r\n }\r\n\r\n return () => {};\r\n }, [reloadCooldownTicks]);\r\n\r\n useEffect(() => {\r\n if (!queueDashboardName.trim()) {\r\n setError('Dashboard Name is required');\r\n } else if (queueDashboardName.length > 50) {\r\n setError('Dashboard name should not exceed 50 characters');\r\n } else if (queueDashboards.some((dashboard) => dashboard.name === queueDashboardName && dashboard.id !== dashboardId)) {\r\n setError('Dashboard Name already exists');\r\n } else {\r\n setError('');\r\n }\r\n }, [queueDashboardName, queueDashboards, dashboardId]);\r\n\r\n const handleMenuBtnClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = useCallback(() => {\r\n setAnchorEl(null);\r\n }, []);\r\n\r\n const switchToEditMode = useCallback(() => {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetDiscardFallbackData });\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetEditMode, payload: true });\r\n handleClose();\r\n }, [dispatchDashboardStateAction, handleClose]);\r\n\r\n const setAsDefault = useCallback(async () => {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetSavingDashboard, payload: true });\r\n try {\r\n const response = await setDashboardAsDefault(enqueueSnackbar, dashboardId);\r\n if (response) {\r\n enqueueSnackbar(`Successfully set the queue dashboard [${dashboardName}] as default`, { variant: 'success' });\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetDashboardAsDefault });\r\n dispatch(setDefaultQueueDashboardSuccess(dashboardId));\r\n handleClose();\r\n }\r\n } finally {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetSavingDashboard, payload: false });\r\n }\r\n }, [dispatchDashboardStateAction, dashboardId, dashboardName]);\r\n\r\n const saveEditModeChanges = async () => {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetSavingDashboard, payload: true });\r\n try {\r\n const savedDashboard = await saveUpdatedDashboard(enqueueSnackbar, dashboardId, {\r\n name: queueDashboardName,\r\n queueIdsFilter,\r\n selectedQueueId,\r\n dateTimeFilter,\r\n widgets: widgets.map((w) => {\r\n const { id, name, type, layout, metrics, config, ...rest } = w;\r\n return {\r\n id: id && typeof id === 'number' ? id : 0,\r\n name: type === WidgetTypes.QueueMetrics ? 'Queue Metrics' : name,\r\n type,\r\n layout: JSON.stringify(layout),\r\n metrics: metrics?.map((f, index) => {\r\n const { id, metric, calculationType, displayAs } = f;\r\n return {\r\n id: id && typeof id === 'number' ? id : 0,\r\n metric,\r\n calculationType,\r\n displayAs,\r\n displayOrder: index\r\n };\r\n }),\r\n config,\r\n ...rest\r\n };\r\n })\r\n });\r\n if (savedDashboard) {\r\n // Successful\r\n enqueueSnackbar(`Successfully saved changes for [${dashboardName}] queue dashboard`, { variant: 'success' });\r\n\r\n const oldDashboard = {\r\n id: dashboardId,\r\n name: dashboardName,\r\n dataSource,\r\n queueIdsFilter,\r\n selectedQueueId,\r\n isDefault,\r\n widgets,\r\n dateTimeFilter\r\n };\r\n\r\n // Order the widget metrics\r\n savedDashboard.widgets.forEach((widget) => {\r\n widget.metrics.sort((metric1, metric2) => metric1.displayOrder - metric2.displayOrder);\r\n });\r\n\r\n const newDashboard = {\r\n id: savedDashboard.id,\r\n name: savedDashboard.name,\r\n dataSource: savedDashboard.dataSource,\r\n queueIdsFilter: savedDashboard.queueIdsFilter,\r\n selectedQueueId: savedDashboard.selectedQueueId,\r\n isDefault: savedDashboard.isDefault,\r\n widgets: savedDashboard.widgets,\r\n dateTimeFilter: savedDashboard.dateTimeFilter\r\n };\r\n\r\n if (!isEqual(newDashboard, oldDashboard)) {\r\n // Set the updated dashboard\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SaveEditModeChanges, payload: savedDashboard });\r\n }\r\n\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetEditMode, payload: false });\r\n\r\n dispatch(\r\n updateDashboardName({\r\n id: dashboardId,\r\n name: queueDashboardName\r\n })\r\n );\r\n } else {\r\n enqueueSnackbar(`Failed to save changes for [${dashboardName}] queue dashboard`, { variant: 'error' });\r\n }\r\n } finally {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetSavingDashboard, payload: false });\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetHasUnsavedChanges, payload: false });\r\n }\r\n };\r\n\r\n const onDashboardDeleteClick = useCallback(() => {\r\n setDeleteValidationMsg(`Are you sure you want to delete [${dashboardName}] queue dashboard? This action cannot be undone`);\r\n setShowDeleteConfirmationDlg(true);\r\n }, [dashboardName]);\r\n\r\n const handleDashboardDelete = useCallback(\r\n async (deleteDashboard) => {\r\n // Close the Dialog and Menu list\r\n setShowDeleteConfirmationDlg(false);\r\n handleClose();\r\n if (deleteDashboard) {\r\n try {\r\n const response = await deleteQueueDashboard(dashboardId);\r\n const defaultDashboard = queueDashboards.find((dashboard) => dashboard.isDefault && dashboard.id !== dashboardId);\r\n const nextDashboard = defaultDashboard || queueDashboards.find((dashboard) => dashboard.id !== dashboardId);\r\n if (response) {\r\n dispatch(deleteDashboardSuccess(dashboardId));\r\n // Reload the dashboard list and navigate to the next dashboard\r\n dispatch(loadQueueDashboardList(enqueueSnackbar));\r\n navigate(`/dashboard/queue-dashboard/${nextDashboard?.id ?? 0}`);\r\n enqueueSnackbar(`Successfully deleted [${dashboardName}] queue dashboard`, { variant: 'success' });\r\n } else {\r\n enqueueSnackbar(`Failed to delete [${dashboardName}] queue dashboard`, { variant: 'success' });\r\n }\r\n } catch {\r\n enqueueSnackbar(`Failed to delete [${dashboardName}] queue dashboard`, { variant: 'success' });\r\n }\r\n }\r\n // Reset the delete message\r\n setDeleteValidationMsg(null);\r\n },\r\n [queueDashboards, dashboardId, dashboardName]\r\n );\r\n\r\n const discardEditModeChanges = useCallback(() => {\r\n dispatchDashboardStateAction({ type: DashboardStateActions.DiscardEditModeChanges });\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetEditMode, payload: false });\r\n dispatchDashboardStateAction({ type: DashboardStateActions.SetHasUnsavedChanges, payload: false });\r\n if (dashboardName !== queueDashboardName) {\r\n setQueueDashboardName(dashboardName);\r\n }\r\n }, [dispatchDashboardStateAction, dashboardName, queueDashboardName]);\r\n\r\n const toggleQueueFilterSelectionDialog = useCallback(() => {\r\n setIsQueueFilterSelectionDialogOpen((open) => !open);\r\n handleClose();\r\n }, [handleClose]);\r\n\r\n const toggleEditDateRangeDialogOpen = useCallback(() => {\r\n setIsEditDateRangeDialogOpen((open) => !open);\r\n handleClose();\r\n }, [handleClose]);\r\n\r\n const onUserNavigationCancel = useCallback(() => {\r\n cancelNavigation();\r\n }, []);\r\n\r\n const onUserNavigationConfirm = useCallback(() => {\r\n // Discard the changes before leaving the current page\r\n discardEditModeChanges();\r\n // Navigate to the intended page\r\n confirmNavigation();\r\n }, [discardEditModeChanges]);\r\n\r\n return (\r\n\r\n {dashboardName}\r\n
\r\n {isDefault &&\r\n {moment(dateTimeRange.start).format(defaultDateRangeFormat)} -{' '}\r\n {moment(dateTimeRange.end).format(defaultDateRangeFormat)}\r\n
\r\n )}\r\n\r\n {selectedQueue?.displayName}\r\n
\r\n \r\n\r\n Queues\r\n
\r\n {!isInEditMode &&\r\n (refreshing || loadingFilteredQueueSummary) &&\r\n getRefreshingWidgetDataAnimateIcon('queue-selector')}\r\n{item.displayName}
\r\n\r\n {item.serviceLevelPercent === 'NA' ? 'N/A' : item.serviceLevelPercent}\r\n {item.serviceLevelPercent !== 'NA' && '%'}\r\n
\r\nService Level
\r\n{item.totalCalls}
\r\nTotal Calls
\r\n\r\n Metric\r\n
\r\n\r\n Calculation\r\n
\r\n\r\n Display As\r\n
\r\n\r\n Agents\r\n
\r\n {!isInEditMode && refreshingQueueAndAgentMetrics && getRefreshingWidgetDataAnimateIcon(widget.id)}\r\n {isInEditMode && !savingDashboard &&\r\n {widget.name}\r\n
\r\n\r\n {widget.name}\r\n
\r\n\r\n {metricValue === 'NA' ? 'N/A' : metricValue ?? 0}\r\n {metricValue !== 'NA' && MetricCardConfig[metricName]?.suffix}\r\n
\r\n{displayAs || MetricCardConfig[metricName]?.label}
\r\n{error}
\r\n{`${label}`}
\r\n {payload.length < 5 ? (\r\n