\r\n {formatNumber(d.data[yKey])}\r\n \r\n \r\n ))\r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ResponsiveWrapper(TreeMap);\r\n","import React, { useEffect, useState, useMemo, useCallback } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { FormControl, MenuItem, Select } from '@material-ui/core';\r\nimport { getMonthYearRange } from 'helpers/emeaHelpers';\r\nimport moment from 'moment-timezone';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n formControl: {\r\n minWidth: 120,\r\n },\r\n select: {\r\n maxHeight: theme.spacing(4),\r\n \"& :focus\": {\r\n backgroundColor: \"transparent\"\r\n },\r\n '& .MuiSelect-icon': {\r\n color: 'inherit',\r\n },\r\n }\r\n}));\r\n\r\nconst EMEASelectMonthFilter = ({ dates = {}, onChange }) => {\r\n const classes = useStyles();\r\n\r\n const monthRange = useMemo(() => getMonthYearRange(dates), [dates.startTime, dates.endTime]);\r\n const [selected, setSelected] = useState(monthRange[0]?.month || \"\");\r\n\r\n useEffect(() => {\r\n if (monthRange.length > 0) {\r\n setSelected(monthRange[0].month);\r\n }\r\n }, [monthRange]);\r\n\r\n const updateDates = useCallback((value) => {\r\n const date = moment(value, \"MMM YYYY\");\r\n setSelected(value);\r\n onChange({\r\n startTime: date.startOf('month').format('YYYY-MM-DD'),\r\n endTime: date.endOf('month').format('YYYY-MM-DD')\r\n });\r\n });\r\n\r\n return (\r\n \r\n updateDates(e.target.value)}\r\n className={classes.select}\r\n >\r\n {monthRange.map((d, index) => (\r\n {d.month} \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default EMEASelectMonthFilter;\r\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardHeader, IconButton, Typography } from '@material-ui/core';\r\nimport { RefreshOutlined } from '@material-ui/icons';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { emeaSummaryService } from 'reduxLib/services/EmeaServices/emeaSummaryService';\r\nimport { boxShadow as defaultBoxShadow, chartsHeight } from 'helpers/styleHelpers';\r\nimport { useDeepCompareEffect } from 'react-use';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { formatLocaleNumber, getInitialDateobj } from 'helpers/emeaHelpers';\r\nimport { getDocumentDate } from \"configs/appConstants\";\r\nimport TrendLineChart from '../EMEA_Charts/TrendLineChart';\r\nimport DonutChart from '../EMEA_Charts/DonutChart';\r\nimport TreeMap from '../EMEA_Charts/TreeMap';\r\nimport EMEASelectMonthFilter from './EMEASelectMonthFilter';\r\nimport { useEMEAGlobalContext } from 'context/EMEAGlobalContext';\r\nimport useSetQuery from 'customHooks/useQuery';\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n height: \"auto\",\r\n minHeight: theme.spacing(25),\r\n borderRadius: theme.spacing(1),\r\n display: \"flex\",\r\n background: theme.palette.card.default,\r\n padding: theme.spacing(3),\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\"\r\n },\r\n title: {\r\n marginRight: \"auto\",\r\n paddingBottom: theme.spacing(2),\r\n fontSize: 18,\r\n textTransform: \"none\",\r\n },\r\n chartCard: {\r\n height: ({ height, legendGroup }) => legendGroup ? height + 35 : height,\r\n borderRadius: theme.spacing(3),\r\n boxShadow: ({ boxShadow }) => boxShadow,\r\n maxWidth: ({ maxWidth }) => maxWidth,\r\n minWidth: ({ minWidth }) => minWidth,\r\n },\r\n report: {\r\n display: 'flex',\r\n height: '60%',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n fontSize: 14,\r\n textDecoration: 'underline',\r\n color: theme.palette?.extra?.infoHighlight,\r\n cursor: 'pointer'\r\n }\r\n}));\r\n\r\nconst EMEAChartCard = ({\r\n subtype,\r\n title,\r\n chart,\r\n trendline,\r\n showTotal,\r\n unitOfTotal,\r\n yLabel,\r\n legend,\r\n excludedFilters = {},\r\n monthFilter,\r\n showMonthFilter=false,\r\n customDocDate = null,\r\n refresh=false,\r\n setRefresh,\r\n legendGroup,\r\n xKey=\"state\",\r\n testId, \r\n refreshIcon = true,\r\n ...rest\r\n}) => {\r\n const height = rest.height || chartsHeight;\r\n const classes = useStyles({\r\n boxShadow: rest.boxShadow || defaultBoxShadow,\r\n height,\r\n maxWidth: rest.maxWidth || 400,\r\n minWidth: rest.minWidth || 400,\r\n legendGroup,\r\n });\r\n\r\n const { t } = useTranslation();\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const history = useHistory();\r\n const [params] = useSetQuery();\r\n const [controller] = useState(() => new AbortController());\r\n const [docDate, setDocDate] = useState({});\r\n\r\n const { loading, data } = useSelector(({ emeaSummaries }) => emeaSummaries?.[subtype] || {});\r\n const [total, setTotal] = useState(0);\r\n const pageFromUrl = useMemo(() => location?.pathname.split('/')[4], [location?.pathname]);\r\n\r\n const currency = useMemo(() => localStorage.getItem(\"currency\") || \"USD\", [localStorage.getItem(\"currency\")]);\r\n\r\n const { locations, customers, sofcs, BU } = useEMEAGlobalContext();\r\n\r\n const documentDate = useMemo(() => {\r\n return getDocumentDate(pageFromUrl, params.documentDate)\r\n }, [params.documentDate, pageFromUrl]);\r\n\r\n useEffect(() => {\r\n if (data) {\r\n setTotal(data.reduce((a, b) => a + b.totalCount, 0));\r\n }\r\n }, [data]);\r\n\r\n const refreshChart = (newDocDate) => {\r\n if (!subtype) return;\r\n const docDateFromFilter = monthFilter ? (newDocDate || getInitialDateobj(documentDate)) : documentDate;\r\n setDocDate(docDateFromFilter);\r\n const payload = {\r\n region: \"EMEA\",\r\n subtype,\r\n businessUnits: BU,\r\n sites: locations,\r\n documentDate: docDateFromFilter,\r\n customerOrSalesOffice: [...customers, ...sofcs],\r\n currency,\r\n ...excludedFilters\r\n };\r\n\r\n dispatch(emeaSummaryService({ payload, controller }));\r\n }\r\n\r\n const openReportPage = () => {\r\n let regx = new RegExp(\"[^\\/]+$\", \"g\");\r\n let updatedPath = location.pathname;\r\n let pathname = updatedPath.replace(regx, \"customerServiceLevel\");\r\n\r\n history.push({\r\n ...location,\r\n pathname\r\n })\r\n }\r\n\r\n useDeepCompareEffect(() => {\r\n if (refresh && customDocDate) {\r\n refreshChart(customDocDate);\r\n setRefresh(false);\r\n }\r\n }, [refresh, customDocDate]);\r\n\r\n const refreshAction = () => {\r\n refreshChart(docDate);\r\n }\r\n\r\n useDeepCompareEffect(() => {\r\n if (!params.loadView) {\r\n refreshChart(customDocDate);\r\n }\r\n }, [subtype, locations, sofcs, documentDate, customers, BU, params.loadView, currency]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n controller.abort();\r\n };\r\n }, []);\r\n\r\n const chartProps = {\r\n ...rest,\r\n data: data || [],\r\n loading,\r\n height: height - 100,\r\n xKey,\r\n keys: rest.keys || [\"totalCount\"],\r\n yKey: \"totalCount\",\r\n themeType: \"light\",\r\n trendline,\r\n yLabel,\r\n subtype,\r\n legend,\r\n legendGroup,\r\n testId\r\n };\r\n\r\n return (\r\n \r\n \r\n {showMonthFilter && refreshAction()}>\r\n }\r\n \r\n }\r\n title={{t(title)} }\r\n subheader={\r\n showTotal && (\r\n \r\n {t(\"total_of\", { total: formatLocaleNumber(total) || 0, currency: unitOfTotal })}\r\n \r\n )\r\n }\r\n />\r\n {chart === \"trendline\" && {t('click_here_to_view_report')}
}\r\n \r\n );\r\n};\r\n\r\nexport default EMEAChartCard;\r\n","import React from \"react\";\r\nimport NextArrowIcon from \"../assets/images/next_arrow_dark.svg\";\r\nimport PreviousArrowIcon from \"../assets/images/prev_arrow_dark.svg\";\r\n\r\n\r\nexport const pwaSettings = {\r\n dots: false,\r\n infinite: false,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n prevArrow: \r\n {t(\"live_status_last_90days\")}}\r\n />\r\n {\r\n isMobile && <>\r\n \r\n {\r\n chartsData.map(d => {\r\n if (d.hideEnv) return null;\r\n return (\r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n \r\n }\r\n \r\n \r\n {\r\n !isMobile && <>\r\n \r\n {\r\n chartsData.map(d => { \r\n if (d.hideEnv) return null;\r\n return (\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n } \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default EMEAHome;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport { Button, Grid } from '@material-ui/core';\r\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\r\nimport Slider from \"react-slick\";\r\nimport EMEAChartCard from './EMEAChartCard';\r\nimport { boxShadow, chartsHeight as height } from 'helpers/styleHelpers';\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { pwaSettings } from 'configs/pwaConstants';\r\n\r\nexport const useStyles = makeStyles((theme) => ({\r\n root: {\r\n height: \"auto\",\r\n minHeight: theme.spacing(25),\r\n borderRadius: theme.spacing(1),\r\n background: theme.palette.card.default,\r\n },\r\n title: {\r\n marginRight: \"auto\",\r\n paddingBottom: theme.spacing(2),\r\n fontSize: theme.spacing(2),\r\n textTransform: \"none\",\r\n [theme.breakpoints.down('sm')]:{\r\n paddingBottom: 0,\r\n }\r\n },\r\n expand: {\r\n textTransform: \"capitalize\",\r\n textDecoration: 'none',\r\n border: 'none'\r\n },\r\n cardcontent: {\r\n paddingTop: 0,\r\n paddingBottom: 0\r\n },\r\n chartCard: {\r\n height: ({ height }) => height,\r\n borderRadius: theme.spacing(3),\r\n boxShadow: boxShadow\r\n },\r\n chartCard1: {\r\n width: `94vw`, \r\n borderRadius: theme.spacing(2),\r\n boxShadow: '0px 2px 4px 2px rgba(0,0,0,0.12)',\r\n marginBottom: theme.spacing(2)\r\n },\r\n chartCard2: {\r\n borderRadius: theme.spacing(2), \r\n marginBottom: theme.spacing(2)\r\n },\r\n item: {\r\n flexBasis: \"auto !important\",\r\n },\r\n cardactions: {\r\n justifyContent: \"center\"\r\n },\r\n grid: {\r\n display: \"flex\",\r\n justifyContent: \"center\"\r\n },\r\n slider: {\r\n margin: `0px ${theme.spacing(3)}px ${theme.spacing(1)}px`,\r\n \"& .slick-current\": {\r\n display: \"flex\",\r\n justifyContent: \"center\"\r\n }\r\n },\r\n mt2: {\r\n marginTop: theme.spacing(2)\r\n }\r\n}));\r\n\r\nexport default function EMEAKPIsWrapper() {\r\n const classes = useStyles({ height });\r\n const { t } = useTranslation();\r\n const setMultiParams = useMultiSetQuery();\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('sm'));\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n const [params] = useSetQuery();\r\n\r\n const [innerWidth] = useState(() => window.innerWidth - window.innerWidth/10 * 1.5)\r\n\r\n const [unit, setUnit] = useState(() => {\r\n return localStorage.getItem(\"currency\") || \"USD\";\r\n });\r\n\r\n useEffect(() => {\r\n setUnit(localStorage.getItem(\"currency\") || \"USD\");\r\n }, [params.currency]);\r\n\r\n const setDetails = ({ key, data, type }) => {\r\n let payload = data.state;\r\n const processVals = [\"<2\", \"2-10\", \">10\"];\r\n if (key === \"returnProcessingTimeBuckets\" && processVals.includes(payload)) {\r\n payload = `${processVals.indexOf(payload) + 1}`;\r\n }\r\n\r\n setMultiParams({\r\n emeaFilters: JSON.stringify({\r\n [key]: type === \"array\" ? [payload] : payload\r\n }),\r\n isHyperlink: true\r\n });\r\n }\r\n\r\n const handleExpandClick = () => {\r\n setExpanded(!expanded);\r\n };\r\n\r\n const tooltipEventTopReason = ({ data }) => {\r\n return `${data.totalCount} : ${data.totalCount2} ${unit}`\r\n }\r\n\r\n const chartsTop = [\r\n {\r\n title: \"reasons_for_returns_by_order\",\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_TOP_REASON\",\r\n chart: \"pie\",\r\n tooltipKey: \"stateDesc\",\r\n displayKey: \"stateDesc\",\r\n tooltipExclusion: [\"other\"],\r\n setDetails: (data) => {\r\n setDetails({ key: \"orderReasonCodeList\", data, type: \"array\" })\r\n },\r\n tooltipEvent: tooltipEventTopReason,\r\n testId: \"reason-returns-order-chart\"\r\n },\r\n {\r\n title: \"reasons_for_returns_by_quantity\",\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_MONTH_ORDER_QTY\",\r\n chart: \"trendline\",\r\n trendline: true,\r\n yLabel: t('number_of_cases'),\r\n showTotal: true,\r\n testId: \"reason-returns-qty-chart\"\r\n },\r\n {\r\n title: \"return_orders_by_value\",\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_MONTH_ORDER_VALUE\",\r\n chart: \"trendline\",\r\n trendline: true,\r\n showTotal: true,\r\n unitOfTotal: unit,\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n testId: \"return-orders-value-chart\"\r\n }\r\n ];\r\n\r\n const chartsBottom = [\r\n {\r\n title: t(\"processing_time_days\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_PROCESSING_TIME\",\r\n chart: \"trendline\",\r\n yLabel: t('order_count'),\r\n colorPalette: \"set4\",\r\n legend: true,\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"stateDesc\",\r\n colorBy: \"xKey\",\r\n showXAxisLabel: false,\r\n setDetails: (data) => {\r\n setDetails({ key: \"returnProcessingTimeBuckets\", data, type: \"array\" })\r\n },\r\n testId: \"processing-time-chart\"\r\n },\r\n {\r\n title: t(\"top_five_customers\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_CUSTOMER_ORDER_VALUE\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n colorPalette: \"set5\",\r\n legend: true,\r\n colorBy: \"xKey\",\r\n showXAxisLabel: false,\r\n setDetails: (data) => {\r\n setDetails({ key: \"corporateCustomerName\", data, type: \"text\" })\r\n },\r\n testId: \"top-five-customers-chart\"\r\n },\r\n {\r\n title: t(\"top_five_materials\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_RETURN_MATERIAL_ORDER_VALUE\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n colorPalette: \"set6\",\r\n legend: true,\r\n colorBy: \"xKey\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"state\",\r\n showXAxisLabel: false,\r\n setDetails: (data) => {\r\n setDetails({ key: \"materialNumberList\", data, type: \"array\" })\r\n },\r\n testId: \"top-five-materials-chart\"\r\n }\r\n ];\r\n\r\n return (\r\n \r\n {t(\"live_status_text\")}}\r\n />\r\n {\r\n isMobile && <>\r\n \r\n {\r\n [...chartsTop, ...chartsBottom].map(d => {\r\n return (\r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n \r\n }\r\n {\r\n !isMobile && <>\r\n \r\n \r\n {\r\n chartsTop.map(d => {\r\n return (\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n \r\n \r\n {\r\n chartsBottom.map(d => {\r\n return (\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\r\nimport Link from '@material-ui/core/Link';\r\nimport NavigateNextIcon from '@material-ui/icons/NavigateNext';\r\nimport { useLocation, useHistory } from 'react-router-dom'\r\nimport { Typography } from '@material-ui/core';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport qs from \"query-string\";\r\nimport { excludedUrlParam } from 'configs/appConstants';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n background: theme.palette.card.default,\r\n padding: theme.spacing(1),\r\n marginBottom: theme.spacing(3),\r\n borderRadius: theme.spacing(1),\r\n paddingLeft: theme.spacing(2)\r\n },\r\n link: {\r\n cursor: \"pointer\"\r\n },\r\n label: {\r\n textTransform: \"capitalize\"\r\n }\r\n}));\r\n\r\nconst EMEABreadcrumb = ( props ) => {\r\n const {\r\n pageName,\r\n detailsPageName,\r\n routerDetailsPageName,\r\n hasDetailsPage\r\n } = props;\r\n const classes = useStyles();\r\n const location = useLocation();\r\n const history = useHistory();\r\n const { t } = useTranslation();\r\n const gotoHome = (e) => {\r\n e.preventDefault();\r\n const queryParams = qs.parse(location.search)\r\n const regx = new RegExp(\"[^\\/]+$\", \"g\");\r\n\r\n let pathName = location.pathname;\r\n let excludedUrlValue = location?.pathname.split('/')[5];\r\n pathName = excludedUrlParam.includes(excludedUrlValue) ? location?.pathname.replace(`/${excludedUrlValue}`, \"\") : pathName;\r\n\r\n history.replace({\r\n ...location,\r\n pathname: pathName.replace(regx, \"home\"),\r\n search: qs.stringify({\r\n ...queryParams,\r\n viewid: undefined,\r\n documentDate: undefined,\r\n emeaFilters: undefined,\r\n loadView: true\r\n })\r\n })\r\n }\r\n\r\n const handleLinkClick = () => {\r\n let updatedPath = location.pathname;\r\n updatedPath = updatedPath.replace(`/${routerDetailsPageName}`, \"\");\r\n history.push({\r\n ...location,\r\n pathname: updatedPath\r\n })\r\n }\r\n\r\n return (\r\n {t(pageName)} \r\n }\r\n\r\n {\r\n detailsPageName && {t(detailsPageName)} \r\n }\r\n \r\n \r\n )\r\n}\r\n\r\nexport default EMEABreadcrumb;","import { emeaViewsConstants } from \"reduxLib/constants\";\r\nimport fetch from \"../serviceHelpers\";\r\nimport { endpoints } from \"helpers\";\r\n\r\nexport const resetEMEAViews = ({ tableName }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.RESET_VIEWS,\r\n tableName\r\n });\r\n}\r\n\r\nexport const resetEMEAStatus = () => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.RESET_STATUS,\r\n });\r\n}\r\n\r\n\r\nexport const resetEMEAViewStatus = ({ tableName }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.RESET_EMEA_STATUS,\r\n tableName\r\n });\r\n}\r\n\r\nexport const getAllEMEAViews = ({ tableName, controller }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.VIEWS_LOADING,\r\n payload: true,\r\n tableName\r\n });\r\n\r\n return fetch(`${endpoints.emea.getviews}?appName=${tableName}`, {\r\n method: \"GET\",\r\n signal: controller?.signal\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n return d.json()\r\n }\r\n throw \"views_loading_failed\"\r\n })\r\n .then(d => {\r\n const viewsData = d.layouts?.filter(e => e.tableName === tableName)[0] || {};\r\n const views = (viewsData.privateViews || [])\r\n .map(e => ({ ...e, isFav: e.id === viewsData.favViewID }));\r\n dispatch({\r\n type: emeaViewsConstants.GET_ALL_VIEWS_SUCCESS,\r\n status: {\r\n status: \"success\",\r\n show: false,\r\n message: \"views_loaded_successfully\"\r\n },\r\n payload: { views },\r\n tableName,\r\n });\r\n })\r\n .catch((e) => {\r\n dispatch({\r\n type: emeaViewsConstants.GET_ALL_VIEWS_FAILED,\r\n status: {\r\n status: \"error\",\r\n message: e,\r\n show: false,\r\n },\r\n tableName,\r\n payload: { views: [], activeView: {} }\r\n });\r\n });\r\n}\r\n\r\nexport const getEMEAView = ({ viewid, tableName }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.VIEW_LOADING,\r\n payload: true,\r\n tableName\r\n });\r\n\r\n return fetch(`${endpoints.emea.getview}?tableName=${tableName}&viewID=${viewid}`, {\r\n method: \"GET\",\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n return d.json();\r\n }\r\n throw \"Error\";\r\n })\r\n .then(d => {\r\n dispatch({\r\n type: emeaViewsConstants.GET_VIEW_SUCCESS,\r\n status: {\r\n show: false,\r\n status: \"success\",\r\n message: \"get_view_success\"\r\n },\r\n tableName,\r\n payload: d\r\n });\r\n\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: emeaViewsConstants.GET_VIEW_FAILED,\r\n status: {\r\n show: false,\r\n status: \"error\",\r\n message: \"get_view_failed\"\r\n },\r\n tableName,\r\n payload: {}\r\n });\r\n })\r\n}\r\n\r\nexport const updateEMEAView = ({ view, tableName, updateType = \"update\" }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.VIEW_LOADING,\r\n payload: true,\r\n tableName\r\n });\r\n\r\n return fetch(`${endpoints.emea.updateviews}?tableName=${tableName}`, {\r\n method: \"PUT\",\r\n body: {\r\n ...view,\r\n tableName\r\n },\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n dispatch({\r\n type: emeaViewsConstants.INSERT_UPDATE_VIEW_SUCCESS,\r\n status: {\r\n show: true,\r\n status: \"success\",\r\n message: \"view_created_updated_success\"\r\n },\r\n tableName,\r\n updateType,\r\n payload: view\r\n });\r\n } else {\r\n throw \"Error\";\r\n }\r\n })\r\n .catch((e) => {\r\n dispatch({\r\n type: emeaViewsConstants.INSERT_UPDATE_VIEW_FAILED,\r\n status: {\r\n show: true,\r\n status: \"error\",\r\n message: \"view_creation_updation_failed\"\r\n },\r\n tableName,\r\n updateType,\r\n payload: {}\r\n });\r\n })\r\n}\r\n\r\nexport const deleteEMEAView = ({ viewid, tableName }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.VIEW_LOADING,\r\n payload: true,\r\n tableName\r\n });\r\n\r\n return fetch(`${endpoints.emea.deleteviews}?tableName=${tableName}&viewID=${viewid}`, {\r\n method: \"DELETE\",\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n dispatch({\r\n type: emeaViewsConstants.DELETE_VIEW_SUCCESS,\r\n status: {\r\n status: \"success\",\r\n show: true,\r\n message: \"view_deleted_success\"\r\n },\r\n tableName,\r\n payload: viewid\r\n });\r\n } else {\r\n throw \"Error\";\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: emeaViewsConstants.DELETE_VIEW_FAILED,\r\n status: {\r\n status: \"error\",\r\n show: true,\r\n message: \"view_deleted_failed\"\r\n },\r\n tableName,\r\n payload: null\r\n });\r\n })\r\n}\r\n\r\nexport const favUnfavEMEAView = ({ viewid, tableName, isFav, method }) => dispatch => {\r\n dispatch({\r\n type: emeaViewsConstants.VIEW_LOADING,\r\n payload: true,\r\n tableName\r\n });\r\n\r\n return fetch(`${endpoints.emea.favView}?tableName=${tableName}`, {\r\n method: \"PUT\",\r\n body: {\r\n id: method === \"fav\" ? viewid: \"\",\r\n tableName: tableName\r\n }\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n dispatch({\r\n type: emeaViewsConstants.FAV_UNFAV_VIEW_SUCCESS,\r\n status: {\r\n status: \"success\",\r\n show: true,\r\n message: \"view_fav_unfav_success\"\r\n },\r\n tableName,\r\n isFav,\r\n payload: viewid\r\n });\r\n } else {\r\n throw \"Error\"\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: emeaViewsConstants.FAV_UNFAV_VIEW_FAILED,\r\n status: {\r\n status: \"error\",\r\n show: true,\r\n message: \"view_fav_unfav_failed\"\r\n },\r\n tableName,\r\n payload: null\r\n });\r\n });\r\n}\r\n\r\n\r\n","import React from 'react'\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { makeStyles, withStyles } from \"@material-ui/core/styles\";\r\nimport Card from \"@material-ui/core/Card\";\r\nimport FormGroup from \"@material-ui/core/FormGroup\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport ListItemSecondaryAction from \"@material-ui/core/ListItemSecondaryAction\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport { StyledTextField, StyledButton } from \"components/common/FilterViewsMenu\";\r\nimport NotFavoriteIcon from 'assets/images/not_favorite.svg';\r\nimport FavoriteIcon from 'assets/images/favorite.svg';\r\nimport DeleteIcon from 'assets/images/delete_dark.svg';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { generateFilterLayoutTemplate } from 'helpers';\r\nimport { deleteEMEAView, favUnfavEMEAView, updateEMEAView } from 'reduxLib/services/EmeaServices/emeaViewsServices';\r\nimport { viewTableNames } from 'configs/appConstants';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n viewsGrid: {\r\n position: 'absolute',\r\n right: theme.spacing(3.5),\r\n flexGrow: 1,\r\n zIndex: 100,\r\n maxHeight: theme.spacing(70),\r\n width: theme.spacing(50),\r\n textAlign: 'left',\r\n padding: theme.spacing(2),\r\n marginTop: theme.spacing(1),\r\n overflowY: 'auto',\r\n overflowX: 'hidden',\r\n border: `1px solid ${theme.palette?.card?.border}`,\r\n },\r\n addViewText: {\r\n backgroundColor: theme.palette?.background?.drawer,\r\n width: '70%',\r\n marginRight: theme.spacing(1),\r\n },\r\n addViewButton: {\r\n width: '25%',\r\n borderRadius: theme.spacing(1),\r\n border: `1px solid ${theme.palette?.border}`,\r\n backgroundColor: theme.palette?.white\r\n },\r\n label: {\r\n marginBottom: theme.spacing(1),\r\n paddingTop: theme.spacing(.5),\r\n }\r\n}));\r\n\r\nconst StyledListItem = withStyles((theme) => ({\r\n root: {\r\n '&:focus': {\r\n backgroundColor: theme.palette.secondary.base,\r\n }\r\n }\r\n}))(MenuItem);\r\n\r\nconst EmeaViews = ({ open, defaultColumns, tableName }) => {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const dispatch = useDispatch();\r\n const [{ viewid }] = useSetQuery();\r\n const multiSetQuery = useMultiSetQuery();\r\n\r\n const [viewName, setViewName] = React.useState(\"\");\r\n const { views } = useSelector(({ emeaViews: { views } }) => ({ views }));\r\n\r\n const addView = (e) => {\r\n e.preventDefault();\r\n\r\n const template = generateFilterLayoutTemplate({\r\n viewName,\r\n filters: {},\r\n columns: defaultColumns.columnOrder\r\n });\r\n dispatch(updateEMEAView({\r\n view: template,\r\n tableName: viewTableNames[tableName],\r\n updateType: \"new\"\r\n }));\r\n setViewName(\"\");\r\n multiSetQuery({\r\n viewid: template.id,\r\n updateFilters: true\r\n })\r\n }\r\n\r\n const changeView = (view) => {\r\n multiSetQuery({\r\n viewid: view.id,\r\n updateFilters: true\r\n })\r\n }\r\n\r\n const favView = (view) => {\r\n dispatch(favUnfavEMEAView({\r\n viewid: view.id,\r\n tableName: viewTableNames[tableName],\r\n isFav: !view.isFav,\r\n method: view.isFav ? \"unfav\": \"fav\"\r\n }));\r\n }\r\n\r\n const deleteView = (view) => {\r\n dispatch(deleteEMEAView({\r\n viewid: view.id,\r\n tableName: viewTableNames[tableName]\r\n }));\r\n }\r\n\r\n return (\r\n \r\n {(open === true) &&\r\n
\r\n \r\n {/* { isEmpty(views) ? \r\n null : */}\r\n {views?.map(view => {\r\n return (\r\n changeView(view)}\r\n selected={viewid === view.id}\r\n >\r\n \r\n favView(view)} >\r\n \r\n deleteView(view)} >\r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n }\r\n
\r\n \r\n {title && \r\n {title} \r\n }\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n refreshTable(tableRef)} \r\n disabled={loading}\r\n >\r\n \r\n {!isMobile && {t('refresh')} }\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {!isMobile && {t('export')} }\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {!isMobile && {t('views')} }\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {!isMobile && {t('filters')} }\r\n \r\n \r\n \r\n\r\n \r\n )\r\n}\r\nexport default EmeaTableActionsWrapper;","import React, { isValidElement, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useDeepCompareEffect } from \"react-use\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport useSetQuery, { useMultiSetQuery } from \"customHooks/useQuery\";\r\nimport { getData } from \"components/common/FIlterChips\";\r\nimport KCChip from \"components/common/Chip\";\r\nimport HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded';\r\nimport { saveFilters } from \"reduxLib/services\";\r\nimport { createFilterObjFromPayload } from \"helpers/emeaHelpers\";\r\nimport SaveOutlinedIcon from '@material-ui/icons/SaveOutlined'\r\nimport FilterViewIcon from \"assets/images/new_view.svg\";\r\nimport DeleteIcon from 'assets/images/delete_dark.svg';\r\nimport {\r\n deleteEMEAView, getEMEAView,\r\n resetEMEAStatus,\r\n resetEMEAViews,\r\n updateEMEAView\r\n} from \"reduxLib/services/EmeaServices/emeaViewsServices\";\r\nimport { isEmpty } from \"lodash\";\r\nimport { Button, FormGroup, LinearProgress, TextField } from \"@material-ui/core\";\r\nimport { defaultDocumentDate, viewTableNames } from \"configs/appConstants\";\r\nimport { useEffect } from \"react\";\r\nimport { generateFilterLayoutTemplate, getFilterArgs } from \"helpers\";\r\nimport Snack from \"components/common/Helpers/Snack\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n border: `1px solid ${theme.palette.border}`,\r\n padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(2.5)}px`,\r\n borderRadius: theme.spacing(3),\r\n background: theme.palette.primary.main,\r\n minHeight: 130,\r\n position: \"relative\",\r\n margin: `${theme.spacing(2)}px 0px`,\r\n [theme.breakpoints.down('sm')]: {\r\n paddingLeft: theme.spacing(2),\r\n }\r\n },\r\n progress: {\r\n backgroundColor: theme.palette?.legendColors?.greyLight,\r\n width: \"98%\",\r\n position: \"absolute\",\r\n height: '2px',\r\n borderRadius: \"50%\",\r\n top: -3\r\n },\r\n textlink: {\r\n color: theme.palette.text.primary,\r\n cursor: 'pointer'\r\n },\r\n chip: {\r\n border: `1px solid ${theme.palette.primary.contrastText}`,\r\n height: 35,\r\n backgroundColor: theme.palette.chip?.tableChips,\r\n margin: theme.spacing(0.5),\r\n padding: theme.spacing(1),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginBottom: theme.spacing(1)\r\n }\r\n },\r\n viewActions: {\r\n textAlign: 'center',\r\n margin: `${theme.spacing(1)}px 0px`,\r\n [theme.breakpoints.up('md')]: {\r\n borderLeft: `2px solid ${theme.palette.primary?.pressed}`,\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n borderTop: `2px solid ${theme.palette.primary?.pressed}`,\r\n }\r\n },\r\n icon: {\r\n color: theme.palette?.text?.primary\r\n },\r\n saveButton: {\r\n backgroundColor: theme.palette?.primary.contrastText,\r\n color: theme.palette.white,\r\n '&.MuiButton-contained:hover': {\r\n backgroundColor: theme.palette?.background.primaryBase\r\n },\r\n borderRadius: 0,\r\n },\r\n cancelButton: {\r\n color: \"inherit\",\r\n borderTopLeftRadius: 0,\r\n borderBottomLeftRadius: 0\r\n },\r\n addText: {\r\n border: `1px solid ${theme.palette?.background.secondaryBase}`,\r\n borderRadius: theme.spacing(0.5),\r\n borderTopRightRadius: 0,\r\n borderBottomRightRadius: 0,\r\n borderRight: \"none\",\r\n '& .MuiOutlinedInput-notchedOutline, & .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: 'transparent'\r\n }\r\n }\r\n}));\r\n\r\nexport const EMEAFilterChips = ({ type, deleteChip, remappedFilters }) => {\r\n const classes = useStyles();\r\n\r\n const { t } = useTranslation();\r\n const [chipsdata, setChipsData] = useState([]);\r\n\r\n useDeepCompareEffect(() => {\r\n let tempChipData = [];\r\n Object.keys(remappedFilters).map((key) => {\r\n const d = remappedFilters[key];\r\n if (d?.type === \"checkbox\" || d?.type === \"checkboxradio\" || d?.type === \"ordercheckbox\") {\r\n d.data.map(item => {\r\n tempChipData.push({ ...d, ...item, type: \"checkbox\", parent: type, key, data: item.checked });\r\n return item;\r\n })\r\n } else tempChipData.push({ ...d, parent: type, key });\r\n return key;\r\n });\r\n setChipsData(tempChipData)\r\n }, [remappedFilters]);\r\n\r\n\r\n return \r\n {\r\n chipsdata.filter(d => d.data)\r\n .map((data, index) => {\r\n const chipdata = getData({\r\n ...data,\r\n name: t(data?.name)\r\n }, []);\r\n return ((data.data && chipdata.label) ?
\r\n}\r\n\r\nconst EmeaFilterBox = ({\r\n tableName, type, filterBody,\r\n columns, clearAllFilters\r\n}) => {\r\n const { t } = useTranslation();\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const [newView, setNewView] = useState({ open: false });\r\n const [params, setParams] = useSetQuery();\r\n const setMultiQuery = useMultiSetQuery();\r\n const [remappedFilters, setRemappedFilters] = useState({});\r\n const { activeView, viewLoading, loading, views, status } = useSelector(\r\n ({ emeaViews: { activeView, viewLoading, loading, views, status } }) =>\r\n ({ activeView, viewLoading, loading, views, status })\r\n );\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: \"error\",\r\n message: null\r\n });\r\n\r\n const viewApplied = !isEmpty(activeView);\r\n\r\n const generateURLFilters = (activeViewFilters) => {\r\n const args = getFilterArgs(activeViewFilters);\r\n if(args.deliveryBlocked?.length === 1) {\r\n args.deliveryBlocked = args.deliveryBlocked[0]\r\n }\r\n return args;\r\n }\r\n\r\n useEffect(() => {\r\n if (status.message && status.show) {\r\n setSnack({\r\n open: true,\r\n severity: status.status,\r\n message: t(status.message)\r\n });\r\n dispatch(resetEMEAStatus())\r\n }\r\n }, [status]);\r\n\r\n useDeepCompareEffect(() => {\r\n const remappedObject = createFilterObjFromPayload({\r\n filterPaylod: params?.emeaFilters,\r\n filterBody,\r\n });\r\n setRemappedFilters(remappedObject);\r\n dispatch(saveFilters({\r\n filter: {\r\n ...filterBody,\r\n ...remappedObject\r\n }, type, subtype: tableName\r\n }));\r\n }, [params?.emeaFilters]);\r\n\r\n useDeepCompareEffect(() => {\r\n if (!viewLoading && views?.length >= 0 && params.loadView) {\r\n const found = views.filter(d => d.isFav)[0] || {};\r\n if (found.id) {\r\n setMultiQuery({\r\n documentDate: JSON.stringify(defaultDocumentDate),\r\n viewid: found.id,\r\n }); \r\n } else {\r\n setMultiQuery({\r\n documentDate: JSON.stringify(defaultDocumentDate),\r\n emeaFilters: \"{}\",\r\n updateFilters: undefined,\r\n loadView: undefined,\r\n viewid: undefined\r\n });\r\n }\r\n }\r\n }, [params.loadView, views, viewLoading]);\r\n\r\n useEffect(() => {\r\n if (params.viewid && activeView.id !== params.viewid) {\r\n dispatch(getEMEAView({\r\n viewid: params.viewid,\r\n tableName: viewTableNames[tableName]\r\n }));\r\n }\r\n\r\n if (params.viewid && activeView.id === params.viewid && (params.updateFilters || params.loadView)) {\r\n setMultiQuery({\r\n updateFilters: undefined,\r\n loadView: undefined,\r\n emeaFilters: JSON.stringify(generateURLFilters(activeView.filters))\r\n });\r\n }\r\n }, [params.viewid, activeView.id, params.updateFilters, params.loadView]);\r\n\r\n const checkFiltersLength = () => { };\r\n\r\n const deleteChip = (chip) => {\r\n const updatedobject = () => {\r\n if (chip.key === \"deliveryBlocked\") {\r\n return undefined\r\n }\r\n return params.emeaFilters?.[chip.key]?.filter(d => d !== chip.value);\r\n }\r\n setParams({\r\n key: \"emeaFilters\",\r\n value: {\r\n ...params.emeaFilters,\r\n [chip.key]: chip.type === \"checkbox\" ? updatedobject() : undefined\r\n }\r\n });\r\n }\r\n\r\n const addView = (e) => {\r\n e.preventDefault();\r\n\r\n const template = generateFilterLayoutTemplate({\r\n viewName: newView.name,\r\n filters: remappedFilters,\r\n columns: columns\r\n });\r\n dispatch(updateEMEAView({\r\n view: template,\r\n tableName: viewTableNames[tableName],\r\n updateType: \"new\"\r\n }));\r\n setMultiQuery({\r\n viewid: template.id,\r\n updateFilters: true\r\n });\r\n setNewView({ open: false })\r\n }\r\n\r\n const resetTableFilters = () => {\r\n setMultiQuery({\r\n emeaFilters: JSON.stringify(generateURLFilters(activeView.filters))\r\n });\r\n }\r\n\r\n const saveView = () => {\r\n dispatch(updateEMEAView({\r\n view: {\r\n ...activeView,\r\n filters: remappedFilters,\r\n columns: columns,\r\n }, tableName: viewTableNames[tableName]\r\n }))\r\n }\r\n\r\n const deleteView = () => {\r\n dispatch(deleteEMEAView({\r\n viewid: activeView.id,\r\n tableName: viewTableNames[tableName]\r\n }));\r\n setMultiQuery({\r\n viewid: undefined,\r\n emeaFilters: \"{}\"\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(resetEMEAViews({\r\n tableName: viewTableNames[tableName]\r\n }));\r\n };\r\n }, []);\r\n\r\n const handleClose = () => {\r\n setSnack({ \r\n open: false \r\n })\r\n }\r\n\r\n return (\r\n \r\n {\r\n (viewLoading || loading) &&\r\n handleClose()} />\r\n \r\n \r\n \r\n \r\n \r\n {viewApplied && \r\n }\r\n \r\n \r\n {\r\n !newView.open && <>\r\n {\r\n viewApplied &&\r\n \r\n {activeView.name} \r\n \r\n }\r\n \r\n setNewView({ open: true })} >\r\n \r\n {t('new_view')} \r\n \r\n {\r\n viewApplied &&\r\n <>\r\n \r\n \r\n \r\n {t('save')} \r\n \r\n \r\n \r\n \r\n {t('delete')} \r\n \r\n \r\n }\r\n \r\n }\r\n {newView.open &&\r\n \r\n \r\n \r\n }\r\n \r\n \r\n )\r\n}\r\n\r\nexport default EmeaFilterBox;","import { emeaTableConstants } from \"reduxLib/constants/EMEA/emeaTableConstants\";\r\nimport fetch from \"../serviceHelpers\";\r\nimport get from \"lodash/get\";\r\n\r\nexport const getEmeaTableData = variables => dispatch => {\r\n\r\n const { fetchEndPoint, tablebody, page, pageSize } = get(variables, \"body\", {});\r\n\r\n dispatch({\r\n type: emeaTableConstants.EMEA_TABLE_LOADING,\r\n payload: true,\r\n variables\r\n });\r\n const url = `${fetchEndPoint}?pageSize=${pageSize}&pageNum=${page + 1}`;\r\n\r\n return fetch(url, {\r\n method: \"POST\",\r\n body: tablebody,\r\n signal: variables?.controller?.signal\r\n })\r\n .then((d) => {\r\n if (d.status === 200) {\r\n return d.json();\r\n } else if (d.status === 401) {\r\n throw \"emea_restricted\";\r\n } else {\r\n throw \"emea_failed_to_fetch_table_records\";\r\n }\r\n })\r\n .then(d => {\r\n dispatch({\r\n type: emeaTableConstants.EMEA_TABLE_SUCCESS,\r\n payload: d,\r\n status: {},\r\n variables\r\n });\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: emeaTableConstants.EMEA_TABLE_FAILED,\r\n variables,\r\n payload: {},\r\n status: {\r\n status: \"error\",\r\n message: err || \"emea_failed_to_fetch_table_records\"\r\n },\r\n });\r\n })\r\n}\r\n","import { useState } from \"react\";\r\nimport useSetQuery from \"./useQuery\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { generateFilterPayload } from \"helpers/emeaHelpers\";\r\n// import { generateFilterPayload as generateFilterPayloadLao } from \"helpers/laoHelpers\";\r\nimport { isEmpty } from \"lodash\";\r\nimport { useEMEAGlobalContext } from \"context/EMEAGlobalContext\";\r\nimport { useLAOGlobalContext } from \"context/LAOGlobalContext\";\r\nimport { useDeepCompareEffect } from \"react-use\";\r\n\r\nexport const useRefreshTable = ({\r\n fetchEndPoint,\r\n tableName,\r\n type,\r\n controller,\r\n getTableData,\r\n tableBody,\r\n setPage: setParentPageSize\r\n}) => {\r\n const {\r\n locations,\r\n customers,\r\n sofcs,\r\n BU,\r\n documentDate\r\n } = useEMEAGlobalContext();\r\n\r\n const dispatch = useDispatch();\r\n const [params] = useSetQuery();\r\n const [pageParams, setPageParams] = useState({ page: 0, pageSize: 15 });\r\n\r\n const tableFilters = params.emeaFilters;\r\n\r\n const refreshTable = ({ pageSize, page }) => {\r\n const updatedSitesFilter = isEmpty(tableFilters?.originSites) ? { ...tableFilters, originSites: locations } : tableFilters;\r\n const updatedDocDateFilter = tableName === \"invoiceSummary\" ? \r\n { ...tableFilters, documentDate: isEmpty(tableFilters?.documentDateFilter) ? tableBody?.documentDateFilter : tableFilters?.documentDateFilter } : {};\r\n\r\n const reqBody = {\r\n controller,\r\n body: {\r\n fetchEndPoint,\r\n tablebody: {\r\n ...tableBody,\r\n ...updatedSitesFilter,\r\n documentDate,\r\n businessUnits: BU,\r\n customerOrSalesOffice: [...customers, ...sofcs],\r\n ...updatedDocDateFilter\r\n },\r\n pageSize,\r\n page,\r\n tableName,\r\n type\r\n },\r\n language: localStorage.getItem('i18nextLng')\r\n }\r\n dispatch(getTableData(reqBody));\r\n }\r\n\r\n useDeepCompareEffect(() => {\r\n if (!params.loadView) {\r\n refreshTable({ ...pageParams, page: 0 });\r\n setParentPageSize(0);\r\n }\r\n }, [tableFilters, documentDate, BU, customers, sofcs, locations, params.loadView]);\r\n\r\n const updatePageParams = ({ page, pageSize }) => {\r\n setPageParams({ page, pageSize });\r\n refreshTable({ page, pageSize });\r\n }\r\n\r\n return [updatePageParams, refreshTable]\r\n}\r\n\r\nexport const useRefreshTableLAO = ({\r\n fetchEndPoint,\r\n tableName,\r\n type,\r\n controller,\r\n getTableData,\r\n subType,\r\n defaultFilters,\r\n setPage: setParentPageSize\r\n}) => {\r\n const {\r\n locations,\r\n BU,\r\n language\r\n } = useLAOGlobalContext();\r\n\r\n const tableBody = {\r\n region: 'LAO',\r\n searchType: subType,\r\n ...(generateFilterPayload(defaultFilters)),\r\n };\r\n\r\n const dispatch = useDispatch();\r\n const [params] = useSetQuery();\r\n const [pageParams, setPageParams] = useState({ page: 0, pageSize: 15 });\r\n\r\n const tableFilters = params.laoFilters;\r\n const sites = subType === 'EXPORT_ORDER_DETAILS' ? 'originSites' : 'destSites'\r\n\r\n const refreshTable = ({ pageSize, page }) => {\r\n const updatedFilters = isEmpty(tableFilters?.originSites) ? { ...tableFilters, [sites]: locations } : tableFilters;\r\n\r\n const reqBody = {\r\n controller,\r\n body: {\r\n fetchEndPoint,\r\n tablebody: {\r\n ...tableBody,\r\n ...updatedFilters,\r\n businessUnits: BU\r\n },\r\n pageSize,\r\n page,\r\n tableName,\r\n type\r\n },\r\n language: localStorage.getItem('i18nextLng')\r\n }\r\n dispatch(getTableData(reqBody));\r\n }\r\n\r\n useDeepCompareEffect(() => {\r\n if (!params.loadView) {\r\n refreshTable({ ...pageParams, page: 0 });\r\n setParentPageSize(0);\r\n }\r\n }, [tableFilters, BU, locations, params.loadView, language]);\r\n\r\n const updatePageParams = ({ page, pageSize }) => {\r\n setPageParams({ page, pageSize });\r\n refreshTable({ page, pageSize });\r\n }\r\n\r\n return [updatePageParams, refreshTable]\r\n}\r\n\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDeepCompareEffect } from 'react-use';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useSelector } from \"react-redux\";\r\nimport MaterialTable from 'material-table'\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport TablePagination from \"@material-ui/core/TablePagination\";\r\nimport LinearProgress from '@material-ui/core/LinearProgress';\r\nimport TablePaginationActions from \"components/common/Table/TablePaginationActions\";\r\nimport EmeaTableActionsWrapper from './EmeaTableActionsWrapper';\r\nimport EmeaFilterBox from './EmeaFilterBox';\r\nimport { lightTableOptions } from 'helpers/tableStyleOverride';\r\nimport { getEmeaTableData } from 'reduxLib/services/EmeaServices/emeaTableServices';\r\nimport { tableStyles } from 'theme';\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport useSetQuery from 'customHooks/useQuery';\r\nimport useScrollInfo from 'theme/layouts/ScrollHelper';\r\nimport { useRefreshTable } from 'customHooks/useTableQuery';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport differenceBy from 'lodash/differenceBy'\r\nimport Snack from \"components/common/Helpers/Snack\";\r\nimport { generateFilterPayload } from \"helpers/emeaHelpers\";\r\n\r\nconst useStylesTable = makeStyles(tableStyles);\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n '& .MuiTablePagination-selectIcon': {\r\n color: \"inherit\"\r\n }\r\n },\r\n spacer: {\r\n flex: \"1 1 auto\"\r\n },\r\n progress: {\r\n backgroundColor: theme.palette?.text?.primary\r\n },\r\n noData: {\r\n textAlign: 'left',\r\n position: 'relative',\r\n paddingLeft: `${theme.spacing(2.5)}%`\r\n }\r\n}));\r\n\r\nconst EmeaTable = (props) => {\r\n const {\r\n tableName,\r\n tableRef,\r\n columns,\r\n defaultColumns,\r\n subType,\r\n orderType,\r\n orderBy,\r\n fetchEndPoint,\r\n filterBody,\r\n filterType,\r\n filterExclusionArray,\r\n searchText,\r\n fixedColumn\r\n } = props;\r\n const classes = useStyles();\r\n const tableClasses = useStylesTable();\r\n const { t } = useTranslation();\r\n const [params, setParams] = useSetQuery();\r\n\r\n const type = 'emea';\r\n\r\n const emeaTableData = useSelector(({ emeaTable }) => emeaTable?.[type]?.[tableName] || {});\r\n const { activeView } = useSelector(({ emeaViews: { activeView } }) => ({ activeView }));\r\n\r\n const { data, status, loading } = emeaTableData;\r\n\r\n const [controller] = useState(() => new AbortController());\r\n const [columnsOrder, setcolumnsOrder] = useState([]);\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(15);\r\n const [tableData, setTableData] = useState({});\r\n const { items, totalRecords } = tableData;\r\n const [, setRef, ref] = useScrollInfo();\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: \"error\",\r\n message: null\r\n });\r\n \r\n const tableBody = {\r\n region: 'EMEA',\r\n searchType: subType,\r\n orderType: orderType,\r\n orderBy: orderBy,\r\n ...(generateFilterPayload(filterBody)),\r\n };\r\n const [updatePageParams, refreshTable] = useRefreshTable({\r\n fetchEndPoint,\r\n tableName,\r\n type,\r\n controller,\r\n tableBody,\r\n setPage,\r\n getTableData: getEmeaTableData\r\n });\r\n\r\n const executeScroll = () => {\r\n return ref?.current?.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (status?.status === \"error\") {\r\n setSnack({\r\n open: true,\r\n severity: status.status,\r\n message: t(status.message)\r\n });\r\n }\r\n }, [status])\r\n\r\n useEffect(() => {\r\n if (params.isHyperlink) {\r\n executeScroll();\r\n setParams({ key: \"isHyperlink\", value: undefined })\r\n }\r\n }, [params.isHyperlink]);\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n updatePageParams({ pageSize: rowsPerPage, page: newPage });\r\n };\r\n\r\n const handleChangeRowsPerPage = (e) => {\r\n const pageSize = parseInt(e.target.value, 10)\r\n setRowsPerPage(pageSize);\r\n setPage(0);\r\n updatePageParams({ pageSize: pageSize, page: 0 });\r\n };\r\n\r\n const updateColumns = (columns) => {\r\n setcolumnsOrder(columns);\r\n }\r\n\r\n const clearAllFilters = () => {\r\n setParams({ key: \"emeaFilters\", value: {} })\r\n };\r\n\r\n useDeepCompareEffect(() => {\r\n if (!isEmpty(activeView.columns)) {\r\n const actualColumns = defaultColumns.columnOrder;\r\n let temp = {};\r\n actualColumns.map(d => {\r\n temp[d.field] = d;\r\n });\r\n let viewColumnObject = activeView.columns;\r\n viewColumnObject = viewColumnObject.map(d => {\r\n return {\r\n ...d,\r\n ...(temp[d.field]),\r\n title: t(d.title),\r\n }\r\n })\r\n const newDiffColumns = differenceBy(defaultColumns.columnOrder, activeView.columns, 'field');\r\n\r\n if (newDiffColumns.length) {\r\n const translated = newDiffColumns.map(item => {\r\n return {\r\n ...item,\r\n title: t(item.title)\r\n }\r\n });\r\n viewColumnObject = [...viewColumnObject, ...translated];\r\n }\r\n setcolumnsOrder(viewColumnObject);\r\n }\r\n }, [activeView.columns]);\r\n\r\n useDeepCompareEffect(() => {\r\n const finalColumns = columns.columnOrder;\r\n let temp = {};\r\n columns.columnOrder.map(d => {\r\n temp[d.field] = d;\r\n });\r\n let translated = finalColumns?.map(item => {\r\n return {\r\n ...temp[item.field],\r\n ...item,\r\n title: t(item.title),\r\n }\r\n });\r\n setcolumnsOrder(translated);\r\n }, [localStorage.getItem('i18nextLng'), columns.columnOrder]);\r\n\r\n\r\n useDeepCompareEffect(() => {\r\n const tempData = data?.items?.map(d => {\r\n return {\r\n ...d,\r\n ...columns.columnConfiguration(d)\r\n }\r\n }) || [];\r\n setTableData({ ...(data || {}), items: tempData });\r\n }, [data])\r\n\r\n useEffect(() => {\r\n return () => {\r\n controller.abort();\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n refreshTable({ pageSize: rowsPerPage, page })}\r\n filterType={filterType}\r\n type={type}\r\n subtype={tableName}\r\n filterExclusionArray={filterExclusionArray}\r\n searchText={t(searchText)}\r\n columns={columnsOrder}\r\n totalRecords={totalRecords}\r\n fetchEndPoint={fetchEndPoint}\r\n columnsAction={updateColumns}\r\n clearAllFilters={clearAllFilters}\r\n defaultColumns={defaultColumns}\r\n />\r\n
\r\n setSnack({ open: false })} />\r\n \r\n \r\n {\r\n loading ?\r\n t(\"please_wait_while_the_data_is_loading\") :\r\n t(\"no_records_to_display\")\r\n }\r\n \r\n }\r\n }}\r\n tableRef={tableRef}\r\n components={{\r\n Container: props_ => `${from}-${to} ${t('of')} ${count} ${t('records')}`}\r\n SelectProps={{ 'data-testid': 'rowsPerPageSelect', SelectDisplayProps: { 'data-testid': \"rowsOption\" } }}\r\n data-testid=\"pagination\"\r\n />)\r\n }}\r\n columns={cloneDeep([fixedColumn].concat(columnsOrder))}\r\n data={items}\r\n options={{ ...lightTableOptions, selection: false, pageSize: rowsPerPage }}\r\n />\r\n \r\n \r\n );\r\n\r\n}\r\n\r\nexport default EmeaTable;","import React, { useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { emeaEditCommentService, resetComments } from 'reduxLib/services/EmeaServices/emeaEditCommentService';\r\nimport Snack from 'components/common/Helpers/Snack';\r\nimport isEqual from 'lodash/isEqual';\r\nimport EditIcon from 'assets/images/edit-dark.svg';\r\nimport SaveIcon from 'assets/images/save-dark.svg';\r\nimport SaveDisabledIcon from 'assets/images/save-disabled.svg';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n comment: {\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n icon: {\r\n cursor: 'pointer',\r\n padding: `0px ${theme.spacing(.5)}px`\r\n },\r\n disabledIcon: {\r\n padding: `0px ${theme.spacing(.5)}px`\r\n },\r\n value: {\r\n whiteSpace: 'pre-line'\r\n }\r\n}));\r\n\r\nconst EmeaTableComments = ({ id, value, rowId, siteNum }) => {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const dispatch = useDispatch();\r\n\r\n const { edit_comment_loading, edit_comment_status, edit_comment_error } = useSelector(({ emeaTableComment }) => emeaTableComment);\r\n\r\n const [edit, setEdit] = useState(false);\r\n const [comment, setComment] = useState(value);\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: null,\r\n message: null\r\n });\r\n\r\n const handleSaveComment = () => {\r\n const body = {\r\n region: 'EMEA',\r\n itemRowId: rowId,\r\n userComment: comment,\r\n originSiteNum: siteNum\r\n }\r\n dispatch(emeaEditCommentService(body));\r\n setEdit(false);\r\n }\r\n\r\n const handleClose = (event, reason) => {\r\n setSnack({\r\n ...snack,\r\n open: false\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if(!edit_comment_loading && edit_comment_error) {\r\n setSnack({\r\n ...snack,\r\n open: true,\r\n severity: edit_comment_status === 'success' ? \"success\" : \"error\",\r\n message: t(edit_comment_error)\r\n });\r\n setEdit(false);\r\n dispatch(resetComments());\r\n }\r\n }, [edit_comment_loading, edit_comment_status, edit_comment_error])\r\n\r\n return (\r\n \r\n {edit ?
setComment(e.target.value)} data-testid=\"edit-input\" />\r\n :
{ value || \"-\" } \r\n }\r\n
setEdit(!edit)} data-testid=\"edit-comment\" />\r\n {isEqual(comment, value) ?
\r\n :
handleSaveComment()} data-testid=\"save-comment\" />\r\n }\r\n
\r\n
\r\n { rowData?.emeaOrderStatusHealth === '10000' ?
: null} \r\n
\r\n {/* {t('product_details')} */}\r\n \r\n \r\n new Promise((resolve, reject) => {\r\n fetch(fetchEndpoint, {\r\n method: \"post\",\r\n body: { ...tablePayload, [rowIDKey]: rowIDValue }\r\n })\r\n .then(response => {\r\n return response?.json() || {};\r\n }) \r\n .then(result => {\r\n setLoader(false);\r\n resolve({\r\n data: result?.items\r\n })\r\n })\r\n .catch(e => {\r\n setLoader(false);\r\n resolve({\r\n data: []\r\n })\r\n })\r\n })\r\n }\r\n />\r\n \r\n \r\n )\r\n\r\n}\r\n\r\nexport default EmeaDetailsTable;","import React from 'react';\r\nimport CustomCellRender from \"components/common/CustomCellRender\";\r\n\r\nexport const emeaOrderEntryByProductDetailsColumns = {\r\n columnOrder: [\r\n {\r\n title: 'product_hierarchy', field: \"productHierarchyDesc\",\r\n render: rowData => {\r\n return \r\n { t('order_entry_summary_by_customer') } \r\n \r\n `${from}-${to} ${t('of')} ${count} ${t('records')}`}\r\n SelectProps={{ 'data-testid': 'selectRowsPerPage', SelectDisplayProps: { 'data-testid': \"rowsSelect\" } }}\r\n />)\r\n }}\r\n data={tableData?.items}\r\n detailPanel={[\r\n rowData => ({\r\n render: rowData_ => ( \r\n setSnack({ open: false })} />\r\n \r\n )\r\n }\r\n \r\nexport default EmeaOrderEntryTableByCustomer;","import React from 'react'\r\nimport { stack } from 'd3'\r\nimport D3Tooltip from \"./D3Tooltip\";\r\nimport { formatLocaleNumber } from 'helpers/emeaHelpers';\r\n\r\nconst Dots = (props) => {\r\n const { \r\n scales, data,\r\n xAccessor, \r\n keys,\r\n xKey, \r\n id,\r\n themeType = \"dark\",\r\n formatRequired = false,\r\n } = props\r\n const { xScale, yScale } = scales\r\n const stacked = stack().keys(keys);\r\n const stackedData = stacked(data);\r\n\r\n const renderDot = (item, key, index, i) => {\r\n\r\n let x = xScale(xAccessor(item.data));\r\n let y = yScale(item[1]);;\r\n let width = xScale.bandwidth();\r\n let height = yScale(item[0]) - yScale(item[1]);;\r\n\r\n const tooltipValue = item[1] - item[0];\r\n\r\n return (\r\n \r\n {\r\n height && width ?\r\n \r\n {item.data[xKey]} : {formatLocaleNumber(Math.floor(tooltipValue), formatRequired)}\r\n \r\n }\r\n >\r\n \r\n );\r\n }\r\n\r\n const renderDotSeries = (type2) => {\r\n return stackedData.map(item => {\r\n const { key, index } = item\r\n const data1 = Array.from(item)\r\n return data1.map((d, i) => {\r\n return renderDot(d, key, index, i);\r\n })\r\n });\r\n }\r\n\r\n return (\r\n \r\n {renderDotSeries()}\r\n \r\n )\r\n}\r\n\r\nexport default Dots;","import React, { useEffect, useRef } from 'react';\r\nimport { axisLeft, axisBottom } from 'd3-axis';\r\nimport { select } from 'd3-selection';\r\n\r\nconst gridlinesXY = ({ scale, size, orientation }) =>\r\n (orientation === \"left\" ? axisLeft : axisBottom)(scale).tickSize(size).tickFormat('');\r\n\r\nconst Grids = ({ margins, svgDimensions, xScale, yScale }) => {\r\n const xRef = useRef();\r\n const yRef = useRef();\r\n\r\n const width = svgDimensions.width - margins.left - margins.right;\r\n const height = svgDimensions.height - margins.bottom - margins.top;\r\n\r\n const renderGrids = () => {\r\n const nodeX = xRef.current;\r\n const nodeY = yRef.current;\r\n select(nodeX).call(gridlinesXY({ scale: xScale, size: height, orientation: \"bottom\" }))\r\n .style(\"stroke-dasharray\", \"5 5\")\r\n .style(\"opacity\", \".2\");\r\n\r\n select(nodeY).call(gridlinesXY({ scale: yScale, size: -width, orientation: \"left\" }))\r\n .style(\"stroke-dasharray\", \"5 5\")\r\n .style(\"opacity\", \".2\");\r\n }\r\n\r\n useEffect(() => {\r\n renderGrids();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n );\r\n\r\n}\r\n\r\nexport default Grids;\r\n","import React, { useEffect, useState } from 'react'\r\nimport { useTranslation } from \"react-i18next\"\r\nimport { scaleBand, scaleLinear, max, sum } from 'd3'\r\nimport ResponsiveWrapper from 'components/charts/ResponsiveWrapper';\r\nimport Axes from 'components/D3Charts/Axes';\r\nimport TrendLine from 'components/D3Charts/TrendLine';\r\nimport Dots from 'components/D3Charts/Dots';\r\nimport Grids from 'components/D3Charts/Grids';\r\n\r\nconst LineChart = (props) => {\r\n const { t } = useTranslation();\r\n const [data, setData] = useState([]);\r\n const {\r\n xKey, yKey, height, loading,\r\n themeType, yLabel, legend,\r\n xLabel, viewDetails, showXAxisLabel,\r\n ...rest\r\n } = props;\r\n const keys = [yKey];\r\n const [total, setTotal] = useState(() => data.reduce((a, b) => a + b[yKey], 0));\r\n\r\n useEffect(() => {\r\n setData(rest.data?.map(d => ({ ...d, total: d[yKey] })))\r\n setTotal(rest.data?.reduce((a, b) => a + b[yKey], 0))\r\n }, [rest.data]);\r\n\r\n const margins = { top: 10, left: 80, right: 30, bottom: 80 };\r\n\r\n const svgRootDimensions = {\r\n width: rest.parentWidth,\r\n height: height - (legend ? 50 : 0) - (viewDetails ? 10 : 0)\r\n }\r\n\r\n let scaleX = scaleBand()\r\n .padding(0.4)\r\n .paddingInner(0.3)\r\n .domain(data.map(d => d[xKey]))\r\n .range([margins.left, svgRootDimensions.width - margins.right])\r\n\r\n let scaleY = scaleLinear()\r\n .domain([0, max(data, d => sum(keys, k => +d[k]))])\r\n .nice()\r\n .range([svgRootDimensions.height - margins.bottom, margins.top]);\r\n\r\n const accessorX = d => d[xKey];\r\n const centerPosition = [svgRootDimensions.width / 2, svgRootDimensions.height / 2];\r\n\r\n const LoadingText = () => {\r\n const text = loading ? \"loading\" : \"no_data_found\"\r\n return (\r\n \r\n {t(text)} \r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n {\r\n\r\n (!total || loading) ? \r\n }\r\n\r\n \r\n \r\n \r\n
\r\n {chart === \"trendline\" &&
\r\n )\r\n}\r\n\r\nexport default EMEAInnerChartCard;","import React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDeepCompareEffect } from 'react-use';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Button from '@material-ui/core/Button';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport ExpandLess from '@material-ui/icons/ExpandLess';\r\nimport RefreshOutlinedIcon from '@material-ui/icons/RefreshOutlined';\r\nimport { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';\r\nimport DateFnsUtils from '@date-io/date-fns';\r\nimport moment from \"moment-timezone\";\r\nimport { emeaSummaryService } from 'reduxLib/services/EmeaServices/emeaSummaryService';\r\nimport { boxShadow, chartsHeight as height } from 'helpers/styleHelpers';\r\nimport { useEMEAGlobalContext } from 'context/EMEAGlobalContext';\r\nimport LineChart from '../EMEA_Charts/LineChart';\r\nimport useSetQuery from 'customHooks/useQuery';\r\nimport EMEAInnerChartCard from './EMEAInnerChartCard';\r\nimport { formatLocaleNumber } from 'helpers/emeaHelpers';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n title: {\r\n marginRight: \"auto\",\r\n paddingBottom: theme.spacing(2),\r\n fontSize: 18,\r\n textTransform: \"none\",\r\n },\r\n chartCard: {\r\n height: \"auto\",\r\n borderRadius: theme.spacing(3),\r\n padding: 0,\r\n boxShadow: boxShadow,\r\n width: `90vw`\r\n },\r\n viewmore: {\r\n cursor: \"pointer\",\r\n margin: theme.spacing(2),\r\n marginBottom: theme.spacing(.5),\r\n color: theme.palette.link?.primary,\r\n textTransform: \"none\"\r\n },\r\n padZero: {\r\n padding: 0,\r\n paddingBottom: theme.spacing(1)\r\n },\r\n total: {\r\n marginRight: theme.spacing(0.5),\r\n textTransform: \"uppercase\"\r\n },\r\n listTitle: {\r\n padding: 0,\r\n '&:before': {\r\n content: \"'• ' \",\r\n display: \"inline-block\",\r\n textDecoration: \"none\",\r\n paddingRight: theme.spacing(1)\r\n },\r\n },\r\n select: {\r\n border: '1px solid black',\r\n borderRadius: 5,\r\n padding: theme.spacing(1),\r\n margin: theme.spacing(1),\r\n marginLeft: theme.spacing(3),\r\n },\r\n menuPaper: {\r\n maxHeight: 300\r\n }\r\n}));\r\n\r\n\r\nconst EMEAChartCardLarge = ({\r\n subtype, title, chart,\r\n trendline, excludedFilters = {},\r\n innerChartProps, colorParams, textParams, \r\n currency, unit, ...rest\r\n}) => {\r\n const { t } = useTranslation();\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n const [{ loadView }] = useSetQuery();\r\n\r\n const [controller] = useState(() => new AbortController());\r\n const [expanded, setExpanded] = useState(false);\r\n const [refresh, setRefresh] = useState(false);\r\n const { loading, data } = useSelector(({ emeaSummaries }) => emeaSummaries?.[subtype] || {});\r\n const [total, setTotal] = useState(() => data?.reduce((a, b) => a + b.totalCount, 0));\r\n\r\n const {\r\n locations,\r\n customers = [],\r\n sofcs = [],\r\n BU,\r\n documentDate\r\n } = useEMEAGlobalContext();\r\n\r\n const [singleDocumentDate, setSingleDocDate] = useState(() => documentDate?.endTime);\r\n\r\n const refreshLineChart = () => {\r\n\r\n if (loadView) return null;\r\n\r\n const payload = {\r\n region: \"EMEA\",\r\n subtype,\r\n businessUnits: BU,\r\n sites: locations,\r\n documentDate,\r\n customerOrSalesOffice: [...customers, ...sofcs],\r\n currency: localStorage.getItem(\"currency\") || \"USD\",\r\n orderType: \"ORDER_ENTRY\",\r\n ...excludedFilters,\r\n fillDates: true\r\n }\r\n dispatch(emeaSummaryService({ payload, controller }));\r\n }\r\n\r\n useDeepCompareEffect(() => {\r\n refreshLineChart();\r\n }, [subtype, locations, sofcs, documentDate, customers, BU, localStorage.getItem(\"currency\"), refresh]);\r\n\r\n useEffect(() => {\r\n setSingleDocDate(documentDate?.endTime);\r\n }, [documentDate]);\r\n\r\n useDeepCompareEffect(() => {\r\n setTotal(data?.reduce((a, b) => a + b.totalCount, 0));\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n controller.abort();\r\n }\r\n }, []);\r\n\r\n const handleExpandClick = () => {\r\n setExpanded((e) => !e)\r\n }\r\n\r\n const handleDateChange = (e) => {\r\n setSingleDocDate(moment(e).format(\"YYYY-MM-DD\"));\r\n }\r\n\r\n const chartProps = {\r\n ...rest,\r\n data: data || [],\r\n loading,\r\n height: height - 100,\r\n xKey: \"stateDesc\",\r\n keys: [\"totalCount\"],\r\n yKey: \"totalCount\",\r\n themeType: \"light\",\r\n trendline,\r\n subtype,\r\n dx: \"-11%\"\r\n }\r\n\r\n return (\r\n \r\n \r\n {!loading && {t(\"total\")}: {currency} {formatLocaleNumber(total) || 0} {unit} }\r\n setRefresh(!refresh)}>\r\n \r\n \r\n }\r\n title={{t(title)} }\r\n />\r\n \r\n \r\n \r\n \r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default EMEAChartCardLarge;","import React, { useEffect } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport EMEABreadcrumb from \"components/EMEA/EMEA_Common/EMEABreadcrumb\";\r\nimport useSetQuery, { useMultiSetQuery } from \"customHooks/useQuery\";\r\nimport { defaultOrderEntryDate } from \"configs/appConstants\";\r\nimport EmeaOrderEntryTableByCustomer from \"components/EMEA/EmeaOrderEntryTableByCustomer\";\r\nimport { endpoints } from 'helpers';\r\nimport { chartsHeight as height } from 'helpers/styleHelpers';\r\nimport EMEAChartCardLarge from \"components/EMEA/EMEA_Common/EMEAChartCardLarge\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n height: \"auto\",\r\n minHeight: theme.spacing(25),\r\n borderRadius: theme.spacing(1),\r\n background: theme.palette.card.default,\r\n },\r\n title: {\r\n marginRight: \"auto\",\r\n paddingBottom: theme.spacing(2),\r\n fontSize: theme.spacing(2),\r\n textTransform: \"uppercase\",\r\n },\r\n listTitle: {\r\n fontSize: theme.spacing(1.8)\r\n },\r\n cardContent: {\r\n marginBottom: 0,\r\n paddingTop: 0\r\n },\r\n cardheader: {\r\n marginBottom: 0,\r\n paddingBottom: 0\r\n }\r\n}));\r\n\r\nconst EMEAOrderEntry = () => {\r\n const classes = useStyles({ height });\r\n const { t } = useTranslation();\r\n const setMultiQuery = useMultiSetQuery();\r\n const [params] = useSetQuery();\r\n\r\n const currency = localStorage.getItem(\"currency\") || \"USD\";\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('md'));\r\n\r\n useEffect(() => {\r\n if (params.loadView) {\r\n setMultiQuery({\r\n documentDate: JSON.stringify(\r\n params.loadView ? defaultOrderEntryDate : params.documentDate\r\n ),\r\n loadView: undefined\r\n });\r\n }\r\n }, [params.loadView, params.documentDate]);\r\n\r\n const xLabel = `${t(\"date\")}`;\r\n\r\n const chartsList = [\r\n {\r\n title: t(\"by_value\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_DATE_ORDER_VALUE\",\r\n currency,\r\n innerChartProps: {\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_MATERIAL_GROUP_ORDER_VALUE\",\r\n xLabel: t('material_hierarchy'),\r\n xKey: \"stateDesc\",\r\n yLabel: `${t('order_value')} (${currency})`,\r\n },\r\n showXAxisLabel: !isMobile,\r\n colorParams: { colorBy: \"xKey\", colorPalette: \"set7\" },\r\n textParams: { viewMore: t(\"view_more_by_material_group\") },\r\n yLabel: `${t('order_value')} (${currency})`,\r\n xLabel\r\n },\r\n {\r\n title: t(\"by_quantity\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_DATE_ORDER_QTY\",\r\n colorParams: { colorBy: \"xKey\", colorPalette: \"set7\" },\r\n showXAxisLabel: !isMobile,\r\n innerChartProps: {\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_MATERIAL_GROUP_ORDER_QTY\",\r\n xLabel: t('material_hierarchy'),\r\n xKey: \"stateDesc\",\r\n yLabel: t('cases')\r\n },\r\n yLabel: t('cases'),\r\n textParams: { viewMore: t(\"view_more_by_material_group\") },\r\n xLabel,\r\n unit: \"CS\"\r\n },\r\n {\r\n title: t(\"by_orders\"),\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_DATE_ORDER_COUNT\",\r\n showXAxisLabel: !isMobile,\r\n innerChartProps: {\r\n subtype: \"SUBTYPE_EMEA_ORDER_ENTRY_ENTRY_METHOD_ORDER_COUNT\",\r\n xKey: \"stateDesc\",\r\n xLabel: t('entry_method'),\r\n yLabel: `${t('order_count')}`,\r\n },\r\n colorParams: { colorBy: \"xKey\", colorPalette: \"set8\" },\r\n yLabel: `${t('order_count')}`,\r\n xLabel,\r\n textParams: { viewMore: t(\"view_more_by_entry_method\") },\r\n unit: \"ORDERS\"\r\n }\r\n ];\r\n\r\n\r\n return (\r\n <>\r\n \r\n {t(\"order_entry_representations\")}}\r\n />\r\n {t(\"daily_order_entry\")}}\r\n />\r\n \r\n \r\n {\r\n chartsList.map(d => {\r\n return (\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default EMEAOrderEntry;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useTheme } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport Slider from \"react-slick\";\r\nimport EMEAChartCard from './EMEA_Common/EMEAChartCard';\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { useStyles } from './EMEA_Common/EMEAKPIsWrapper';\r\nimport { pwaSettings } from 'configs/pwaConstants';\r\n\r\nexport default function EMEAOpenOrdersKPIs() {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const setMultiParams = useMultiSetQuery();\r\n const theme = useTheme();\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('sm'));\r\n const [params] = useSetQuery();\r\n\r\n const [innerWidth, setInnerWidth] = useState(0);\r\n const [unit, setUnit] = useState(() => localStorage.getItem(\"currency\") || \"USD\");\r\n\r\n let resizeWindow = () => {\r\n setInnerWidth(window.innerWidth - window.innerWidth/10 * 1.5);\r\n };\r\n\r\n useEffect(() => {\r\n setUnit(localStorage.getItem(\"currency\") || \"USD\");\r\n }, [params.currency]);\r\n\r\n const setDetailsTreemap = useCallback((filters) => {\r\n setMultiParams({\r\n emeaFilters: JSON.stringify(filters),\r\n isHyperlink: true\r\n });\r\n }, [params]);\r\n\r\n const setDetails = useCallback(({ key, data, type }) => {\r\n let payload = data.state;\r\n\r\n setMultiParams({\r\n emeaFilters: JSON.stringify({\r\n [key]: type === \"array\" ? [payload] : payload\r\n }),\r\n isHyperlink: true\r\n });\r\n }, [params]);\r\n\r\n const additionalFilters = {\r\n orderType: \"ORDER_ENTRY\"\r\n }\r\n\r\n const chartsTop = [\r\n {\r\n title: t(\"actual_and_expected_invoice_date_by_value\"),\r\n subtype: \"SUBTYPE_EMEA_OPEN_ORDERS_ACTUAL_AND_EXPECTED_INVOICE\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n colorBy: \"xKey\",\r\n colorPalette: \"set9\",\r\n trendline: true,\r\n showTotal: true,\r\n xAxisTitle: \"Invoice Date\",\r\n unitOfTotal: unit,\r\n defaultColor: \"\",\r\n legend: false,\r\n xKey: \"stateDesc\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"state\",\r\n showXAxisLabel: false,\r\n maxWidth: 920,\r\n minWidth: 920,\r\n trendLineKey: \"totalCount2\",\r\n tredlineStyle: \"dashed\",\r\n showBarLabel: false,\r\n monthFilter: true,\r\n showMonthFilter: true,\r\n legendType: \"custom\",\r\n legendGroup: true,\r\n tooltipOptions: {\r\n showTotal: false\r\n },\r\n legendGroupItems: [\r\n { type: 'circle', color: theme.palette.set9[0], label: t('actual_invoice'), key: \"totalCount\" },\r\n { type: 'dottedLine', color: \"\", label: t('expected_invoice'), key: \"totalCount2\" },\r\n ]\r\n }\r\n ];\r\n\r\n const chartsBottom = [\r\n {\r\n title: t(\"open_orders_distribution_product_structure_by_value\"),\r\n subtype: \"SUBTYPE_EMEA_OPEN_ORDERS_PRODUCT_STRUCTURE\",\r\n chart: \"treemap\",\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n colorPalette: \"set6\",\r\n legend: true,\r\n colorBy: \"xKey\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"state\",\r\n showXAxisLabel: false,\r\n maxWidth: 500,\r\n minWidth: 500,\r\n xKey: \"state\",\r\n yKey: \"totalCount\",\r\n setDetails: (data) => {\r\n setDetailsTreemap({\r\n materialHierarchyDesc: data,\r\n itemStatusBucketList: [\"INVOICED\", \"UNDER_CREDIT_ANALYSIS\", \"DELIVERY_BLOCK\", \"DELIVERY\", \"TRANSPORTATION_PLAN\"]\r\n })\r\n }\r\n },\r\n {\r\n title: t(\"order_status_req_del_date_rdd_by_value\"),\r\n subtype: \"SUBTYPE_EMEA_OPEN_ORDERS_RDD_STATUS\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: unit }),\r\n colorPalette: \"set11\",\r\n legend: true,\r\n unitOfTotal: unit,\r\n showTotal: true,\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"stateDesc\",\r\n colorBy: \"xKey\",\r\n xKey: \"stateDesc\",\r\n showXAxisLabel: false,\r\n setDetails: (data) => {\r\n setDetails({ key: \"reqDelDateBucketList\", data, type: \"array\" })\r\n }\r\n }\r\n ];\r\n\r\n useEffect(() => {\r\n resizeWindow();\r\n window.addEventListener(\"resize\", resizeWindow);\r\n return () => window.removeEventListener(\"resize\", resizeWindow);\r\n }, []);\r\n\r\n return (\r\n \r\n {t(\"live_status_text\")}}\r\n />\r\n {\r\n isMobile && \r\n {\r\n [...chartsTop, ...chartsBottom].map(d => {\r\n return (\r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n }\r\n {\r\n !isMobile && <>\r\n \r\n \r\n {chartsTop.map((d) => (\r\n \r\n \r\n ))\r\n }\r\n \r\n \r\n \r\n \r\n {chartsBottom.map((d) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n }\r\n \r\n );\r\n}\r\n\r\n","import React from 'react';\r\nimport moment from \"moment-timezone\";\r\nimport CustomCellRender from \"components/common/CustomCellRender\";\r\nimport EmeaSalesDocHyperlink from 'components/EMEA/EmeaSalesDocHyperlink';\r\nimport AlertIcon from 'assets/images/alert-circle.svg';\r\n\r\nconst statusBucket = {\r\n A: \"Not Yet Processed\",\r\n B: \"Partially Processed\",\r\n C: \"Completely Processed\"\r\n}\r\n\r\nexport const emeaOpenOrdersFixedColumn = {\r\n title: '', \r\n field: \"itemStatusHealth\",\r\n render: rowData => {\r\n return \r\n { rowData?.itemStatusHealth === '10000' ?
: null} \r\n
\r\n \r\n \r\n {t('open_orders')} - \r\n {t('by_status')} \r\n \r\n \r\n \r\n {\r\n isInvoiced ? t(\"goto_order_status\") : t(\"goto_invoiced_openorders_gap\")\r\n }\r\n \r\n \r\n \r\n {!isMobile ? \r\n \r\n {statusData.map((item, index) =>\r\n <>\r\n \r\n \r\n { status_loading ? \"...\" : findStatusObject(status_data, item.state) } \r\n \r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: item.state, type: \"array\" })\r\n }}\r\n > \r\n { item.name } \r\n \r\n \r\n {(index === 4) ? \r\n { status_loading ? \"...\" : totalStatus } \r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: \"TOTAL\", type: \"\" })\r\n }}\r\n > \r\n {t('total')}\r\n \r\n \r\n \r\n \r\n { status_loading ? \"...\" : findStatusObject(status_data, rejectedData.state) } \r\n \r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: rejectedData.state, type: \"array\" })\r\n }}\r\n > \r\n { rejectedData.name } \r\n \r\n \r\n :\r\n \r\n \r\n \r\n {statusData.map((d) =>\r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: d.state, type: \"array\" })\r\n }}\r\n >\r\n { d.name } \r\n \r\n { status_loading ? \"...\" : findStatusObject(status_data, d.state) } \r\n \r\n \r\n )}\r\n \r\n \r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: \"TOTAL\", type: \"\" })\r\n }}\r\n >\r\n \r\n { status_loading ? \"...\" : totalStatus } \r\n \r\n { t('total_invoice')} + {t('open') } \r\n \r\n \r\n \r\n \r\n {\r\n setHyperlinkFilters({ key: \"itemStatusBucketList\", data: rejectedData.state, type: \"array\" })\r\n }}\r\n >\r\n { rejectedData.name } \r\n \r\n { status_loading ? \"...\" : findStatusObject(status_data, rejectedData.state) } \r\n \r\n \r\n \r\n \r\n }\r\n \r\n {isInvoiced ? null :\r\n \r\n \r\n { today_status_loading ? \"...\" : findStatusObject(today_status_data, 'DELIVERIES_CREATED_TODAY') } \r\n {t('deliveries_created_today')} \r\n \r\n \r\n { today_status_loading ? \"...\" : findStatusObject(today_status_data, 'DELIVERIES_CREATED_TODAY_BLOCKED') } \r\n {t('deliveries_created_today')} - {t('blocked')} \r\n \r\n \r\n { today_status_loading ? \"...\" : findStatusObject(today_status_data, 'NIV_ORDERS_CREATED_TODAYS') } \r\n {t('niv_order_created_today')} \r\n \r\n \r\n { today_status_loading ? \"...\" : findStatusObject(today_status_data, 'NIV_ORDERS_CREATED_TODAYS_BLOCKED') } \r\n {t('niv_order_created_today')} - {t('blocked')} \r\n \r\n \r\n { today_status_loading ? \"...\" : findStatusObject(today_status_data, 'INVOICES_CREATED_TODAY') } \r\n {t('niv_invoices_today')} \r\n \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {t(\"invoiced_openand_gap_country_code\")} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport EMEAOpenOrdersInvoiceKPIs from \"components/EMEA/EMEAOpenOrdersInvoiceKPIs\";\r\nimport EMEAOpenOrdersStatus from \"components/EMEA/EMEAOpenOrdersStatus\";\r\n\r\n\r\nconst EMEAOpenOrdersInvoice = () => {\r\n\r\n return (\r\n <>\r\n \r\n {title} \r\n \r\n \r\n \r\n \r\n {tableHeadTitle1} \r\n {tableHeadTitle2} \r\n \r\n \r\n \r\n {kpi_loading ? \r\n {t('please_wait_while_the_data_is_loading')}
\r\n : kpi_error ?\r\n {t(kpi_error)}
\r\n : (kpi_data?.length === 0) ?\r\n {t('no_data_found')}
\r\n : kpi_data.map((row) => (\r\n \r\n \r\n setHyperlinkFilters({ key: hyperlinkKey, data: row[keyName], type: hyperlinkType })} data-testid={row[keyName]}> \r\n {row[keyName]} \r\n \r\n \r\n {formatLocaleNumber(row?.totalCount)} {row?.currency} \r\n \r\n ))}\r\n \r\n {tableFooter == 'true' && (\r\n \r\n \r\n {t('total')} \r\n {formatLocaleNumber(total)} {localStorage.getItem(\"currency\") || \"USD\"} \r\n \r\n \r\n \r\n )} \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nexport default EmeaTopMaterialSKUTable;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { useStyles } from './EMEA_Common/EMEAKPIsWrapper';\r\nimport EMEAInnerChartCard from './EMEA_Common/EMEAInnerChartCard';\r\n\r\nexport default function EMEARejectionReasonsChart() {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const setMultiParamsRR = useMultiSetQuery();\r\n // const theme = useTheme();\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('sm'));\r\n const [params] = useSetQuery();\r\n\r\n const [innerWidthRR, setInnerWidthRR] = useState(() => window.innerWidth - window.innerWidth / 10 * 1.5);\r\n const [unitRR, setUnit] = useState(() => localStorage.getItem(\"currency\") || \"USD\");\r\n\r\n let resizeWindow = () => {\r\n setInnerWidthRR(window.innerWidth - window.innerWidth / 10 * 1.5);\r\n };\r\n\r\n const setDetailsRR = useCallback(({ key, data, type }) => {\r\n let payload = data.state;\r\n setMultiParamsRR({\r\n emeaFilters: JSON.stringify({\r\n [key]: type === \"array\" ? [payload] : payload\r\n }),\r\n isHyperlink: true\r\n });\r\n }, [params]);\r\n\r\n const additionalFiltersRR = {\r\n orderType: \"ORDER_ENTRY\"\r\n }\r\n\r\n const chartsTopRR = [\r\n {\r\n subtype: \"SUBTYPE_EMEA_ORDER_REJECTION_REASON_CODE\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: unitRR }),\r\n colorBy: \"xKey\",\r\n colorPalette: \"set9\",\r\n trendline: false,\r\n showTotal: true,\r\n unitOfTotal: unitRR,\r\n defaultColor: \"\",\r\n legend: false,\r\n xKey: \"stateDesc\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"rejectedPer\",\r\n showXAxisLabel: !isMobile,\r\n // maxWidth: 920,\r\n // minWidth: 920,\r\n showBarLabel: false,\r\n tooltipOptions: {\r\n showTotal: false\r\n },\r\n keys: [\"totalCount\", \"stateDesc\", \"rejectedPer\"],\r\n keyLabelMaps: {\r\n stateDesc: t('stateDesc'),\r\n rejectedPer: t('rejectedPer'),\r\n totalCount: t('totalCount'),\r\n },\r\n setDetails: (data) => {\r\n setDetailsRR({\r\n key: \"itemReasonCodeList\",\r\n data,\r\n type: 'array'\r\n })\r\n },\r\n tooltipExclusion: [\"other than top 14\"],\r\n isHyperlinkTooltip: true\r\n }\r\n ];\r\n\r\n useEffect(() => {\r\n setUnit(localStorage.getItem(\"currency\") || \"USD\");\r\n }, [params.currency]);\r\n\r\n useEffect(() => {\r\n resizeWindow();\r\n window.addEventListener(\"resize\", resizeWindow);\r\n return () => window.removeEventListener(\"resize\", resizeWindow);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {\r\n \r\n isMobile && [...chartsTopRR].map(d => {\r\n return (\r\n
\r\n {t(\"rejection_reasons\")}} />\r\n \r\n )\r\n })\r\n }\r\n {\r\n !isMobile && <>\r\n
\r\n \r\n {chartsTopRR.map((d) => (\r\n \r\n {t(\"rejection_reasons\")}} />\r\n \r\n \r\n ))\r\n }\r\n \r\n
\r\n \r\n }\r\n
\r\n {blocks.map(item =>\r\n \r\n \r\n {t('open_follow_up')} \r\n {` - ${item.title}`} \r\n \r\n \r\n \r\n {item.value} \r\n {item.title} \r\n \r\n \r\n {item.percent} % \r\n {item.title} % \r\n \r\n \r\n {item.expand && \r\n setExpandRejections(!expandRejections)} className={classes.linkText} data-testid=\"expand-button\">\r\n {expandRejections ? t('collapse') : t('expand')} {t('order_rejections')}\r\n {expandRejections ? \r\n }\r\n \r\n )}\r\n \r\n {expandRejections && \r\n {t('live_status_text')} - {t('rejections')} \r\n \r\n }\r\n \r\n )\r\n\r\n}\r\n\r\nexport default EMEAOpenFollowUp;","import React from 'react';\r\nimport moment from \"moment-timezone\";\r\nimport CustomCellRender from \"components/common/CustomCellRender\";\r\nimport EmeaSalesDocHyperlink from 'components/EMEA/EmeaSalesDocHyperlink';\r\nimport AlertIcon from 'assets/images/alert-circle.svg';\r\n\r\nconst statusBucket = {\r\n A: \"Not Yet Processed\",\r\n B: \"Partially Processed\",\r\n C: \"Completely Processed\"\r\n}\r\nexport const emeaOrderCutsAndRejectionsFixedColumn = {\r\n title: '',\r\n field: \"itemStatusHealth\",\r\n render: rowData => {\r\n return \r\n {rowData?.itemStatusHealth === '10000' ?
: null}\r\n
\r\n \r\n {t('invoices')} \r\n \r\n {t(\"go_to_invoice_details\")}\r\n \r\n \r\n {blocks.map(item =>\r\n \r\n \r\n {item.totalCountMtd} {item.currency} \r\n {t('invoiced_mtd')} - {item.month} \r\n \r\n \r\n {item.totalCountToday} {item.currency} \r\n {t('invoiced_today')} \r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default EMEAInvoiceStatus;","import React, { useState, useEffect, useCallback } from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useSelector } from 'react-redux';\r\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport Slider from \"react-slick\";\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport EMEAChartCard from './EMEA_Common/EMEAChartCard';\r\nimport EMEAInnerChartCard from './EMEA_Common/EMEAInnerChartCard';\r\nimport { useStyles } from './EMEA_Common/EMEAKPIsWrapper';\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { formatLocaleNumber } from 'helpers/emeaHelpers';\r\nimport EmeaTopMaterialSKUTable from './EmeaTopMaterialSKUTable';\r\nimport { pwaSettings } from 'configs/pwaConstants';\r\n\r\nconst useInvoiceStyles = makeStyles((theme) => ({\r\n root: {\r\n backgroundColor: theme.palette.white,\r\n borderRadius: theme.spacing(2),\r\n padding: theme.spacing(2.5),\r\n boxShadow: 'rgba(0, 0, 0, 0.12) 0px 12px 20px',\r\n marginTop: theme.spacing(0),\r\n height: theme.spacing(40),\r\n flexBasis: '75%',\r\n marginRight: theme.spacing(1.5)\r\n },\r\n noData: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n height: '12vw',\r\n maxHeight: theme.spacing(15.25),\r\n },\r\n tableContainer: {\r\n marginTop: theme.spacing(1.5),\r\n marginBottom: theme.spacing(1),\r\n height: theme.spacing(32.25),\r\n maxHeight: theme.spacing(32.25)\r\n },\r\n hyperLink: {\r\n width: 'fit-content',\r\n textDecoration: 'underline',\r\n cursor: 'pointer',\r\n color: theme.palette?.link?.primary\r\n }\r\n}));\r\n\r\n\r\nexport default function EMEAInvoiceKPIs() {\r\n const classes = useStyles();\r\n const classesInvoice = useInvoiceStyles();\r\n const { t } = useTranslation();\r\n const [params] = useSetQuery();\r\n const setMultiParams = useMultiSetQuery();\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('sm'));\r\n const [innerWidth, setInnerWidth] = useState(0);\r\n\r\n const [currUnit, setCurrUnit] = useState(() => localStorage.getItem(\"currency\") || \"USD\");\r\n const { data } = useSelector(({ emeaSummaries }) => emeaSummaries?.[\"SUBTYPE_EMEA_INVOICES_PER_DAY\"] || {});\r\n const [invoicesTotal, setInvoicesTotal] = useState(0);\r\n // const [innerWidth] = useState(() => window.innerWidth - window.innerWidth/10 * 1.5)\r\n // const [innerHeight] = useState(() => window.innerHeight - window.innerHeight/2)\r\n\r\n const tableTop5CustomersStyles = {\r\n root: classesInvoice.root,\r\n noData: classesInvoice.noData,\r\n tableContainer: classesInvoice.tableContainer,\r\n hyperLink: classesInvoice.hyperLink\r\n }\r\n\r\n const additionalFilter = {\r\n orderType: \"ORDER_ENTRY\"\r\n }\r\n\r\n const setTreemapDetails = useCallback((filters) => {\r\n setMultiParams({\r\n emeaFilters: JSON.stringify(filters),\r\n isHyperlink: true\r\n });\r\n }, [params]);\r\n\r\n const setDetails = useCallback(({ key, data }) => {\r\n let payload = data.state;\r\n\r\n setMultiParams({\r\n emeaFilters: JSON.stringify({\r\n [key]: [payload]\r\n }),\r\n isHyperlink: true\r\n });\r\n }, [params]);\r\n\r\n const tooltipEventPlantReason = ({ data }) => {\r\n return `${data?.stateDesc} : ${formatLocaleNumber(data?.totalCount)} ${currUnit}`\r\n }\r\n\r\n let resizeWindowInvoiceKPI = () => {\r\n setInnerWidth(window.innerWidth - window.innerWidth/10 * 1.5);\r\n};\r\n\r\n const chartsLarge = [\r\n {\r\n title: `${t(\"invoices_per_day\")} - ${t(\"cases_niv\")}`,\r\n subtype: \"SUBTYPE_EMEA_INVOICES_PER_DAY\",\r\n chart: \"trendline\",\r\n yLabel: t('order_value_currency', { currency: currUnit }),\r\n colorBy: \"xKey\",\r\n colorPalette: \"set12\",\r\n trendline: false,\r\n showTotal: false,\r\n unitOfTotal: currUnit,\r\n defaultColor: \"\",\r\n legend: false,\r\n xKey: \"state\",\r\n displayKey: \"state\",\r\n tooltipKey: \"totalCount\",\r\n showXAxisLabel: false,\r\n // maxWidth: 920,\r\n minWidth: 920,\r\n showBarLabel: false,\r\n tooltipOptions: {\r\n showTotal: true\r\n },\r\n totalCount: invoicesTotal\r\n // setDetails: (data) => {\r\n // setDetailsRR({\r\n // key: \"itemReasonCodeList\",\r\n // data,\r\n // type: 'array'\r\n // })\r\n // },\r\n // isHyperlinkTooltip: true\r\n },\r\n {\r\n title: `${t(\"invoices_distribution\")} - ${t(\"product_structure\")}`,\r\n subtype: \"SUBTYPE_EMEA_INVOICES_TOP_FIVE_PRODUCT_STRUCTURE\",\r\n chart: \"treemap\",\r\n yLabel: t('order_value_currency', { currency: currUnit }),\r\n legend: true,\r\n colorBy: \"xKey\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"stateDesc\",\r\n showXAxisLabel: false,\r\n xKey: \"stateDesc\",\r\n yKey: \"totalCount\",\r\n totalCount: false,\r\n updateDesc: false,\r\n setDetails: (data) => {\r\n setTreemapDetails({\r\n materialHierarchyDesc: data\r\n })\r\n }\r\n },\r\n {\r\n title: `${t(\"invoices_distribution\")} - ${t(\"sales_structure\")}`,\r\n subtype: \"SUBTYPE_EMEA_INVOICES_BY_COUNTRY_ID\",\r\n chart: \"treemap\",\r\n yLabel: t('order_value_currency', { currency: currUnit }),\r\n legend: true,\r\n colorBy: \"xKey\",\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"state\",\r\n showXAxisLabel: false,\r\n xKey: \"state\",\r\n yKey: \"totalCount\",\r\n totalCount: false,\r\n setDetails: (data) => {\r\n setTreemapDetails({\r\n countryIdList: [data],\r\n })\r\n }\r\n }\r\n ]\r\n\r\n const charts = [{\r\n title: \"top_five_invoices_per_plant\",\r\n subtype: \"SUBTYPE_EMEA_INVOICES_TOP_FIVE_PLANT\",\r\n chart: \"pie\",\r\n tooltipKey: \"state\",\r\n displayKey: \"stateDesc\",\r\n tooltipExclusion: [\"other\"],\r\n setDetails: (data) => {\r\n setDetails({ key: \"originSites\", data })\r\n },\r\n tooltipEvent: tooltipEventPlantReason,\r\n testId: \"top-invoices-per-plant-chart\",\r\n refreshIcon: false\r\n }]\r\n\r\n useEffect(() => {\r\n setCurrUnit(localStorage.getItem(\"currency\") || \"USD\");\r\n }, [params.currency]);\r\n\r\n useEffect(() => {\r\n if (data) {\r\n setInvoicesTotal(data.reduce((a, b) => a + b.totalCount, 0));\r\n }\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n resizeWindowInvoiceKPI();\r\n window.addEventListener(\"resize\", resizeWindowInvoiceKPI);\r\n return () => window.removeEventListener(\"resize\", resizeWindowInvoiceKPI);\r\n}, []);\r\n\r\n return (\r\n \r\n {t(\"live_status_text\")} - {t(\"invoicing_information\")} }\r\n />\r\n {\r\n isMobile && <>\r\n \r\n {\r\n [...chartsLarge, ...charts].map(d => {\r\n return (\r\n d.chart !== 'pie'\r\n ?\r\n \r\n \r\n :\r\n \r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n \r\n \r\n \r\n }\r\n {\r\n !isMobile && \r\n \r\n {\r\n chartsLarge.map((d) => (\r\n \r\n \r\n {d.title} }\r\n subheader={d.totalCount ? \r\n {t(\"total_of\", { total: formatLocaleNumber(d.totalCount), currency: currUnit })}\r\n : null}\r\n />\r\n \r\n \r\n ))\r\n }\r\n \r\n \r\n {charts.map((d) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n }\r\n \r\n )\r\n\r\n} ","import React from 'react';\r\nimport moment from \"moment-timezone\";\r\nimport CustomCellRender from \"components/common/CustomCellRender\";\r\nimport EmeaSalesDocHyperlink from 'components/EMEA/EmeaSalesDocHyperlink';\r\n\r\nconst statusBucket = {\r\n A: \"Not Yet Processed\",\r\n B: \"Partially Processed\",\r\n C: \"Completely Processed\"\r\n}\r\n\r\nexport const emeaInvoiceSummaryColumns = {\r\n columnOrder: [\r\n {\r\n title: 'sales_document', field: \"salesDocument\",\r\n render: rowData => {\r\n return \r\n {title} \r\n \r\n \r\n \r\n \r\n {columnHeaders.map((element) => \r\n { t(element.header) } \r\n )}\r\n \r\n \r\n \r\n {loading ?\r\n {t('please_wait_while_the_data_is_loading')}
\r\n : error ?\r\n {t(error)}
\r\n : (kpiData?.length === 0) ?\r\n {t('no_data_found')}
\r\n : kpiData.map((rowObj, index) => (\r\n \r\n {columnHeaders.map((item) =>\r\n {(rowObj?.[item.apiKey]) === undefined ? \"-\" : rowObj[item.apiKey]} {[item.suffix]} \r\n )}\r\n \r\n ))}\r\n \r\n {footer && \r\n \r\n {columnHeaders.map((item) =>\r\n {(kpiTotals[0]?.[item.apiKey]) === undefined ? \"-\" : kpiTotals[0][item.apiKey]} {[item.suffix]} \r\n )}\r\n \r\n }\r\n
\r\n \r\n \r\n )\r\n\r\n}\r\n\r\nexport default EmeaCustomTable;","export const emeaInvoiceSummaryDetailsColumns = [\r\n { header: \"country\", apiKey: \"stateDescCustom\" },\r\n { header: \"forecast\", apiKey: \"forecastVal\" },\r\n { header: \"invoiced\", apiKey: \"invoicedVal\" },\r\n { header: \"percent_invoiced_vs_forecast\", apiKey: \"invoicePer\", suffix: '%' },\r\n { header: \"total_open_orders\", apiKey: \"openOrdersVal\" },\r\n { header: \"percent_open_orders_vs_forecast\", apiKey: \"openPer\", suffix: '%' },\r\n { header: \"blocked_orders\", apiKey: \"blockedOrdersVal\" },\r\n { header: \"pending_credit_release\", apiKey: \"pendingCreditReleaseVal\" },\r\n { header: \"gap_percent\", apiKey: \"gapPer\", suffix: '%' }\r\n]","import React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport Slider from \"react-slick\";\r\nimport { useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Button from '@material-ui/core/Button';\r\nimport EMEABreadcrumb from 'components/EMEA/EMEA_Common/EMEABreadcrumb';\r\nimport EMEAChartCard from 'components/EMEA/EMEA_Common/EMEAChartCard';\r\nimport EmeaCustomTable from 'components/EMEA/EMEA_Common/EmeaCustomTable';\r\nimport { useStyles } from 'components/EMEA/EMEAInvoiceStatus';\r\nimport { emeaInvoiceSummaryDetailsColumns } from \"reduxLib/constdata/EMEA/emeaInvoiceSummaryDetailsColumns\";\r\nimport { pwaSettings } from 'configs/pwaConstants';\r\n\r\nconst EMEAInvoiceSummaryInvoicesDetails = () => {\r\n\r\n const { t } = useTranslation();\r\n const location = useLocation();\r\n const history = useHistory();\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('md'));\r\n const [chartWidth, setChartWidth] = useState(() => window.innerWidth - window.innerWidth / 10 * 1.5);\r\n\r\n let resizeWindow = () => {\r\n setChartWidth(window.innerWidth - window.innerWidth / 10 * 1.5);\r\n };\r\n\r\n const additionalFilters = {\r\n orderType: \"ORDER_ENTRY\"\r\n }\r\n\r\n const handleLinkClick = () => {\r\n let updatedPath = location.pathname;\r\n updatedPath = updatedPath.replace(\"/invoiceDetails\", \"\");\r\n history.push({\r\n ...location,\r\n pathname: updatedPath\r\n })\r\n }\r\n\r\n const chartInvoiceDetails = {\r\n subtype: \"SUBTYPE_EMEA_INVOICES_DETAILS_INVOICED_OPEN_GAP\",\r\n colorPalette: \"set10\",\r\n legend: false,\r\n colorBy: \"yKey\",\r\n customTooltipKey: \"state\",\r\n xKey: \"stateDescCustom\",\r\n showMonthFilter: false,\r\n axisSuffix: \"%\",\r\n barSuffix: \"%\",\r\n maxWidth: chartWidth,\r\n minWidth: chartWidth,\r\n legendGroup: true,\r\n monthFilter: true,\r\n keys: [\"invoicePer\", \"openPer\", \"gapPer\"],\r\n keyLabelMaps: {\r\n invoicePer: t('invoiced'),\r\n openPer: t('not_invoiced'),\r\n gapPer: t('gap'),\r\n },\r\n chart: \"trendline\",\r\n decimals: 2,\r\n // refresh,\r\n // setRefresh,\r\n showEllipsis: true,\r\n showXAxisLabel: !isMobile,\r\n showBarLabel: !isMobile,\r\n testId: \"invoice-details-open-gap-chart\",\r\n refreshIcon: false,\r\n displayKey: \"stateDesc\",\r\n tooltipKey: \"state\",\r\n legendGroupItems: [\r\n { type: 'square', color: theme.palette.set10[0], label: t('invoiced'), key: \"invoicePer\" },\r\n { type: 'square', color: theme.palette.set10[1], label: t('not_invoiced'), key: \"openPer\" },\r\n { type: 'square', color: theme.palette.set10[2], label: t('gap'), key: \"gapPer\" },\r\n ],\r\n }\r\n\r\n useEffect(() => {\r\n resizeWindow();\r\n window.addEventListener(\"resize\", resizeWindow);\r\n return () => window.removeEventListener(\"resize\", resizeWindow);\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {t(\"goto_invoices\")}\r\n \r\n \r\n {\r\n isMobile ? \r\n
\r\n \r\n
\r\n \r\n :\r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default EMEACustServiceLevel;","import React, { useEffect, useState } from 'react'\r\nimport { useTranslation } from \"react-i18next\"\r\nimport { scaleBand, scaleLinear, scaleOrdinal, max, sum } from 'd3'\r\nimport { laoChartColorPanel } from 'helpers/styleHelpers';\r\nimport ResponsiveWrapper from 'components/charts/ResponsiveWrapper';\r\nimport Axes from 'components/D3Charts/Axes';\r\nimport Bars from 'components/D3Charts/Bars';\r\n\r\nconst ExportVolumeChart = (props) => {\r\n const { t } = useTranslation();\r\n const {\r\n xKey, yKey, height, loading,\r\n themeType, yLabel,\r\n legend, showXAxisLabel, displayKey, setDetails, ...rest\r\n } = props;\r\n const [data, setData] = useState([]);\r\n const [totalSum, setTotalSum] = useState(() => data.reduce((a, b) => a + b[yKey], 0));\r\n const keys = [yKey];\r\n\r\n const colorPanel = laoChartColorPanel;\r\n\r\n useEffect(() => {\r\n setData(rest.data.map(d => ({ ...d, total: d[yKey] })))\r\n setTotalSum(rest.data.reduce((a, b) => a + b[yKey], 0))\r\n }, [rest.data]);\r\n\r\n const elementMargins = { top: 40, left: 80, right: 30, bottom: 30 };\r\n\r\n const svgBoundaries = {\r\n width: rest.parentWidth,\r\n height: height\r\n }\r\n\r\n let xScale = scaleBand()\r\n .padding(0.4)\r\n .paddingInner(0.3)\r\n .domain(data.map(d => d[xKey]))\r\n .range([elementMargins.left, svgBoundaries.width - elementMargins.right])\r\n\r\n let yScale = scaleLinear()\r\n .domain([0, max(data, d => sum(keys, k => +d[k]))])\r\n .nice()\r\n .range([svgBoundaries.height - elementMargins.bottom, elementMargins.top]);\r\n\r\n const xAccess = d => d[xKey];\r\n const centerPos = [svgBoundaries.width / 2, svgBoundaries.height / 2];\r\n\r\n const colors = scaleOrdinal().domain(keys).range(colorPanel);\r\n\r\n const NoDataText = () => {\r\n const text = loading ? \"loading\" : \"no_data_found\"\r\n return (\r\n \r\n \r\n {t(text)}\r\n \r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n {\r\n\r\n (!totalSum || loading) ? \r\n }\r\n \r\n
\r\n \r\n \r\n \r\n setChartTypes({ type: 'export', subtype: \"daily\" })}>{isMobileLao ? t('exportOrderMobile') : t('exportVolume')} \r\n \r\n \r\n setChartTypes({ type: 'import', subtype: \"daily\" })}>{isMobileLao ? t('importOrderMobile') : t('importVolume')} \r\n \r\n \r\n \r\n \r\n \r\n setChartTypes({ subtype: 'daily' })}\r\n inputProps={{ 'data-testid': 'radio_daily' }}\r\n />\r\n {t('daily')}\r\n \r\n \r\n \r\n \r\n setChartTypes({ subtype: 'weekly' })}\r\n inputProps={{ 'data-testid': 'radio_weekly' }}\r\n />\r\n {t('weekly')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n laoChartsData?.loading\r\n ?\r\n
\r\n \r\n {t(\"please_wait\")}\r\n \r\n
\r\n :\r\n < ExportVolumeChart {...chartProps} setDetails={setDetails} />\r\n }\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default LAOVolumeChart;\r\n","import laoChartConstants from \"reduxLib/constants/LAO/laoChartConstants\";\r\nimport fetch from \"../serviceHelpers\";\r\nimport { endpoints } from \"helpers\";\r\n\r\n\r\nexport const laoGetCharts = variables => dispatch => {\r\n const { subtype, body } = variables;\r\n\r\n dispatch({\r\n type: laoChartConstants.LAO_CHARTS_LOADING,\r\n payload: true,\r\n subtype: subtype,\r\n });\r\n\r\n return fetch(endpoints.lao.summary, {\r\n method: \"POST\",\r\n body: {\r\n ...body,\r\n region: \"LAO\",\r\n subtype\r\n },\r\n signal: variables.controller.signal\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n return d.json();\r\n } else {\r\n throw \"lao_charts_fetch_failed\";\r\n }\r\n })\r\n .then(d => {\r\n dispatch({\r\n type: laoChartConstants.LAO_GET_EXPORT_CHART_SUCCESS,\r\n payload: d[subtype],\r\n subtype,\r\n status: { status: \"success\", message: \"lao_charts_loaded_successfully\" }\r\n });\r\n })\r\n .catch(err => {\r\n if (err?.name === \"AbortError\") {\r\n return;\r\n }\r\n dispatch({\r\n type: laoChartConstants.LAO_GET_EXPORT_CHART_FAILED,\r\n payload: [],\r\n subtype,\r\n status: { status: \"error\", message: \"lao_charts_fetch_failed\" }\r\n });\r\n });\r\n}\r\n","import React from 'react';\r\nimport moment from \"moment-timezone\";\r\nimport CustomCellRender from \"components/common/CustomCellRender\";\r\n\r\nexport const laoOrderDetailsColumns = {\r\n columnOrder: [\r\n {\r\n title: 'order_#', field: \"orderNum\",\r\n render: rowData => {\r\n return \r\n {(open === true) &&\r\n
\r\n \r\n {viewsLAO?.map(v => {\r\n return (\r\n changeView(v)}\r\n selected={viewid === v.id}\r\n >\r\n \r\n favView(v)} >\r\n \r\n deleteView(v)} >\r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n }\r\n
\r\n \r\n \r\n {searchText} \r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n refreshTableLao(tableRef)} \r\n disabled={loadingLao}\r\n >\r\n \r\n {!isMobileLao && {t('refresh')} } \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!isMobileLao && {t('export')} }\r\n {exportOpen ? (\r\n \r\n \r\n {t('export_view')}\r\n {t(\"with_managed_columns_and_filters_applied\")} \r\n \r\n
\r\n \r\n {t('with_product_details')} \r\n exportTable(true)} />
\r\n \r\n {t('without_product_details')} \r\n exportTable(false)} />
\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {!isMobileLao && {t('views')} }\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {!isMobileLao && {t('filters')} }\r\n \r\n \r\n \r\n\r\n \r\n )\r\n}\r\nexport default LaoTableActionsWrapper;","import React, { isValidElement, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useDeepCompareEffect } from \"react-use\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport { useEffect } from \"react\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport useSetQuery, { useMultiSetQuery } from \"customHooks/useQuery\";\r\nimport { laoViewTableNames } from \"configs/appConstants\";\r\nimport { getData } from \"components/common/FIlterChips\";\r\nimport KCChip from \"components/common/Chip\";\r\nimport HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded';\r\nimport {\r\n deleteLAOView, getLAOView,\r\n resetLAOStatus,\r\n resetLAOViews,\r\n updateLAOView\r\n} from \"reduxLib/services/LaoServices/laoViewsServices\";\r\nimport { saveFilters } from \"reduxLib/services\";\r\nimport { createFilterObjFromPayload } from \"helpers/emeaHelpers\";\r\nimport SaveOutlinedIcon from '@material-ui/icons/SaveOutlined';\r\nimport DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';\r\nimport FilterViewIcon from \"assets/images/table-view.svg\";\r\nimport {laoFilterBox} from 'theme';\r\nimport { isEmpty } from \"lodash\";\r\nimport { Button, FormGroup, LinearProgress, TextField } from \"@material-ui/core\";\r\nimport { generateFilterLayoutTemplate, getFilterArgs } from \"helpers\";\r\nimport Snack from \"components/common/Helpers/Snack\";\r\n\r\nconst useStyles = makeStyles(laoFilterBox);\r\n\r\nexport const LaoFilterChips = ({ type, laoDeleteChip, laoRemappedFilters }) => {\r\n const classes = useStyles();\r\n\r\n const { t } = useTranslation();\r\n const [laoChipsdata, setLaoChipsData] = useState([]);\r\n\r\n useDeepCompareEffect(() => {\r\n let tempChipData = [];\r\n Object.keys(laoRemappedFilters).map((key) => {\r\n const d = laoRemappedFilters[key];\r\n if (d?.type === \"checkbox\" || d?.type === \"checkboxradio\" || d?.type === \"ordercheckbox\") {\r\n d.data.map(item => {\r\n tempChipData.push({ ...d, ...item, type: \"checkbox\", parent: type, key, data: item.checked });\r\n return item;\r\n })\r\n } else tempChipData.push({ ...d, parent: type, key });\r\n return key;\r\n });\r\n setLaoChipsData(tempChipData)\r\n }, [laoRemappedFilters]);\r\n\r\n return \r\n {\r\n laoChipsdata.filter(d => d.data)\r\n .map((data, index) => {\r\n const chipdata = getData({\r\n ...data,\r\n name: t(data?.name)\r\n }, []);\r\n return ((data.data && chipdata.label) ?
\r\n}\r\n\r\nconst LaoFilterBox = ({\r\n tableName, type, filterBody,\r\n columns, clearAllFilters\r\n}) => {\r\n const { t } = useTranslation();\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n\r\n const [laoNewView, setLaoNewView] = useState({ open: false });\r\n const [params, setParams] = useSetQuery();\r\n const setMultiQuery = useMultiSetQuery();\r\n const [laoRemappedFilters, setLaoRemappedFilters] = useState({});\r\n const { activeView, viewLoading, loading, views, status } = useSelector(\r\n ({ laoViews: { activeView, viewLoading, loading, views, status } }) =>\r\n ({ activeView, viewLoading, loading, views, status })\r\n );\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: \"error\",\r\n message: null\r\n });\r\n\r\n const laoViewApplied = !isEmpty(activeView);\r\n\r\n const generateLaoURLFilters = (activeViewFilters) => {\r\n const args = getFilterArgs(activeViewFilters);\r\n return args;\r\n }\r\n\r\n useEffect(() => {\r\n if (status.message && status.show) {\r\n setSnack({\r\n open: true,\r\n severity: status.status,\r\n message: t(status.message)\r\n });\r\n dispatch(resetLAOStatus())\r\n }\r\n }, [status]);\r\n\r\n useDeepCompareEffect(() => {\r\n const remappedObject = createFilterObjFromPayload({\r\n filterPaylod: params?.laoFilters,\r\n filterBody,\r\n });\r\n setLaoRemappedFilters(remappedObject);\r\n dispatch(saveFilters({\r\n filter: {\r\n ...filterBody,\r\n ...remappedObject\r\n }, type, subtype: tableName\r\n }));\r\n }, [params?.laoFilters, tableName]); // Store is reset as per url whenever filters or tabs are changed\r\n\r\n useDeepCompareEffect(() => {\r\n if (!viewLoading && views?.length >= 0 && params.loadView) {\r\n const defaultParams = {\r\n chartType: params?.chartType ? params.chartType : \"export_daily\",\r\n tableType: params?.tableType ? params.tableType : \"exportOrderDetails\"\r\n }\r\n const found = views.filter(d => d.isFav)[0] || {};\r\n if (found.id) {\r\n setMultiQuery({\r\n viewid: found.id,\r\n ...defaultParams\r\n }); \r\n } else {\r\n setMultiQuery({\r\n laoFilters: \"{}\",\r\n updateFilters: undefined,\r\n loadView: undefined,\r\n viewid: undefined,\r\n ...defaultParams\r\n });\r\n }\r\n }\r\n }, [params.loadView, views, viewLoading]);\r\n\r\n useEffect(() => {\r\n if (params.viewid && activeView.id !== params.viewid) {\r\n dispatch(getLAOView({\r\n viewid: params.viewid,\r\n tableName: laoViewTableNames[tableName]\r\n }));\r\n }\r\n\r\n if (params.viewid && activeView.id === params.viewid && (params.updateFilters || params.loadView)) {\r\n setMultiQuery({\r\n updateFilters: undefined,\r\n loadView: undefined,\r\n laoFilters: JSON.stringify(generateLaoURLFilters(activeView.filters))\r\n });\r\n }\r\n }, [params.viewid, activeView.id, params.updateFilters, params.loadView]);\r\n\r\n const deleteChip = (chip) => {\r\n const updatedobject = () => {\r\n return params.laoFilters?.[chip.key]?.filter(d => d !== chip.value);\r\n }\r\n setParams({\r\n key: \"laoFilters\",\r\n value: {\r\n ...params.laoFilters,\r\n [chip.key]: chip.type === \"checkbox\" ? updatedobject() : undefined\r\n }\r\n });\r\n }\r\n\r\n const laoAddView = (e) => {\r\n e.preventDefault();\r\n\r\n const template = generateFilterLayoutTemplate({\r\n viewName: laoNewView.name,\r\n filters: laoRemappedFilters,\r\n columns: columns\r\n });\r\n dispatch(updateLAOView({\r\n view: template,\r\n tableName: laoViewTableNames[tableName],\r\n updateType: \"new\"\r\n }));\r\n setMultiQuery({\r\n viewid: template.id,\r\n updateFilters: true\r\n });\r\n setLaoNewView({ open: false })\r\n }\r\n\r\n const resetTableFilters = () => {\r\n setMultiQuery({\r\n laoFilters: JSON.stringify(generateLaoURLFilters(activeView.filters))\r\n });\r\n }\r\n\r\n const laoSaveView = () => {\r\n dispatch(updateLAOView({\r\n view: {\r\n ...activeView,\r\n filters: laoRemappedFilters,\r\n columns: columns,\r\n }, tableName: laoViewTableNames[tableName]\r\n }))\r\n }\r\n\r\n const laoDeleteView = () => {\r\n dispatch(deleteLAOView({\r\n viewid: activeView.id,\r\n tableName: laoViewTableNames[tableName]\r\n }));\r\n setMultiQuery({\r\n viewid: undefined,\r\n laoFilters: \"{}\"\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(resetLAOViews({\r\n tableName: laoViewTableNames[tableName]\r\n }));\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n {\r\n (viewLoading || loading) &&\r\n setSnack({ open: false })} />\r\n \r\n \r\n \r\n \r\n \r\n {laoViewApplied && \r\n }\r\n \r\n \r\n {\r\n !laoNewView.open && <>\r\n {\r\n laoViewApplied &&\r\n \r\n {activeView.name} \r\n \r\n }\r\n \r\n setLaoNewView({ open: true })} >\r\n \r\n {t('new_view')} \r\n \r\n {\r\n laoViewApplied &&\r\n <>\r\n \r\n \r\n \r\n {t('save')} \r\n \r\n \r\n \r\n \r\n {t('delete')} \r\n \r\n \r\n }\r\n \r\n }\r\n {laoNewView.open &&\r\n \r\n \r\n \r\n }\r\n \r\n \r\n )\r\n}\r\n\r\nexport default LaoFilterBox;","import { laoTableConstants } from \"reduxLib/constants/LAO/laoTableConstants\";\r\nimport fetch from \"../serviceHelpers\";\r\nimport get from \"lodash/get\";\r\n\r\nexport const getLaoTableData = dataVariables => async dispatch => {\r\n const { fetchEndPoint, tablebody, page, pageSize } = get(dataVariables, \"body\", {});\r\n\r\n dispatch({\r\n type: laoTableConstants.LAO_TABLE_LOADING,\r\n payload: true,\r\n dataVariables\r\n });\r\n const tableUrl = `${fetchEndPoint}?pageSize=${pageSize}&pageNum=${page + 1}`;\r\n\r\n return fetch(tableUrl, {\r\n method: \"POST\",\r\n body: tablebody,\r\n signal: dataVariables?.controller?.signal\r\n })\r\n .then(async (response) => {\r\n if (response.status === 200) {\r\n return response.json();\r\n } else if (response.status === 401) {\r\n throw \"lao_restricted\";\r\n } else {\r\n let d = await response.json();\r\n if(d?.exceptionCode === 'ct_exec_43') {\r\n throw d?.exceptionDesc;\r\n } else {\r\n throw \"lao_sites_failed\";\r\n } \r\n }\r\n })\r\n .then(response => {\r\n dispatch({\r\n type: laoTableConstants.LAO_TABLE_SUCCESS,\r\n payload: response,\r\n status: {},\r\n dataVariables\r\n });\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: laoTableConstants.LAO_TABLE_FAILED,\r\n dataVariables,\r\n payload: {},\r\n status: {\r\n status: \"error\",\r\n message: err || \"lao_sites_failed\"\r\n },\r\n });\r\n })\r\n}\r\n","import React from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport MaterialTable from 'material-table';\r\nimport { Grid, Box, Typography, makeStyles } from \"@material-ui/core\"\r\nimport { appTheme, itemDetailsStyles } from 'theme';\r\nimport useTranslateHook from \"i18n/useTranslateHook\";\r\n\r\nconst useStyles = makeStyles(itemDetailsStyles)\r\n\r\nlet options = {\r\n headerStyle: {\r\n backgroundColor: appTheme?.palette.menu.base,\r\n color: appTheme?.palette.white,\r\n fontSize: \"14px\",\r\n whiteSpace: 'nowrap',\r\n textTransform: \"uppercase\",\r\n },\r\n loadingType: \"linear\",\r\n draggable: false,\r\n sorting: false,\r\n search: false,\r\n paging: false,\r\n pageSize: 5,\r\n showTitle: false,\r\n showFirstLastPageButtons: true,\r\n pagination: false,\r\n toolbar: false,\r\n maxBodyHeight: \"30vh\"\r\n}\r\n\r\nexport const DetailsTable = ({ data, columns }) => {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n\r\n\r\n return (\r\n \r\n \r\n {t('product_details')}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default DetailsTable;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDeepCompareEffect } from 'react-use';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useSelector } from \"react-redux\";\r\nimport MaterialTable from 'material-table'\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport TablePagination from \"@material-ui/core/TablePagination\";\r\nimport LinearProgress from '@material-ui/core/LinearProgress';\r\nimport TablePaginationActions from \"components/common/Table/TablePaginationActions\";\r\nimport { laoTableOptions } from 'helpers/tableStyleOverride';\r\nimport { tableStyles } from 'theme';\r\nimport useScrollInfo from 'theme/layouts/ScrollHelper';\r\nimport useSetQuery from 'customHooks/useQuery';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport differenceBy from 'lodash/differenceBy'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport LaoTableActionsWrapper from './LaoTableActionsWrapper';\r\nimport LaoFilterBox from './LaoFilterBox';\r\nimport { laoExpandDetailsColumns } from 'reduxLib/constdata/LAO/laoOrderDetailsColumns';\r\nimport { getLaoTableData } from 'reduxLib/services/LaoServices/laoTableServices';\r\nimport { useRefreshTableLAO } from 'customHooks/useTableQuery';\r\nimport Snack from \"components/common/Helpers/Snack\";\r\nimport DetailsTable from 'components/common/Table/DetailsTable';\r\nimport { laoImportOrderDetailsFilters, laoOrderDetailsFilters } from 'reduxLib/constdata/filters';\r\nimport { laoImportExpandDetailsColumns } from 'reduxLib/constdata/LAO/laoImportOrderDetailsColumns';\r\n\r\nconst useStylesTable = makeStyles(tableStyles);\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n '& .MuiTablePagination-selectIcon': {\r\n color: \"inherit\"\r\n },\r\n '& .MuiTableFooter-root': {\r\n backgroundColor: theme.palette.secondary.base\r\n },\r\n width: '100%', \r\n '& .MuiTableCell-body': {\r\n backgroundColor: theme.palette.primary.base\r\n } \r\n },\r\n spacer: {\r\n flex: \"1 1 auto\"\r\n },\r\n progress: {\r\n backgroundColor: theme.palette?.text?.primary\r\n },\r\n noData: {\r\n textAlign: 'center',\r\n position: 'relative',\r\n },\r\n laoTable: {\r\n marginTop: theme.spacing(3),\r\n '& div::-webkit-scrollbar': {\r\n height: `${theme.spacing(1.5)}px !important`,\r\n width: `${theme.spacing(1.5)}px !important`,\r\n },\r\n '& div::-webkit-scrollbar-track': {\r\n border: `5px solid ${theme.palette.primary.base}`,\r\n borderRadius: 0,\r\n background: theme.palette.secondary.base\r\n },\r\n '& div::-webkit-scrollbar-thumb': {\r\n background: theme.palette.secondary.base\r\n },\r\n '& .MuiPaper-root': {\r\n backgroundColor: 'transparent',\r\n },\r\n '& .MuiPaper-root > div': {\r\n borderTopLeftRadius: theme.spacing(3),\r\n }\r\n }\r\n}));\r\n\r\nconst LaoTable = (props) => {\r\n const {\r\n tableRef,\r\n columns,\r\n tableName,\r\n subType,\r\n filterExclusionArray,\r\n searchText,\r\n filterType,\r\n fetchEndPoint\r\n } = props;\r\n const classes = useStyles();\r\n const tableClasses = useStylesTable();\r\n const { t } = useTranslation();\r\n const [paramsLao, setParamsLao] = useSetQuery();\r\n\r\n const type = 'lao';\r\n\r\n const laoTableData = useSelector(({ laoTable }) => laoTable?.[type]?.[tableName] || {});\r\n const { activeView } = useSelector(({ laoViews: { activeView } }) => ({ activeView }));\r\n\r\n const { data, status, loading } = laoTableData;\r\n\r\n\r\n const [columnsOrderLao, setcolumnsOrderLao] = useState([]);\r\n const [unTranslateColumn, setUnTranslateColumn] = useState([]);\r\n const [controller] = useState(() => new AbortController());\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(10);\r\n const [tableData, setTableData] = useState({});\r\n const { items, totalRecords } = tableData;\r\n const [, setRef, ref] = useScrollInfo();\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: \"error\",\r\n message: null\r\n });\r\n const [updatePageParamsLao, refreshTableLao] = useRefreshTableLAO({\r\n fetchEndPoint,\r\n tableName,\r\n type,\r\n controller,\r\n subType,\r\n defaultFilters: tableName === \"importOrderDetails\" ? laoImportOrderDetailsFilters : laoOrderDetailsFilters,\r\n setPage,\r\n getTableData: getLaoTableData,\r\n region: 'LAO'\r\n });\r\n\r\n const executeScrollLao = () => {\r\n return ref?.current?.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (status?.status === \"error\") {\r\n setSnack({\r\n open: true,\r\n severity: status.status,\r\n message: t(status.message)\r\n });\r\n }\r\n }, [status])\r\n\r\n useEffect(() => {\r\n if (paramsLao.isHyperlink) {\r\n executeScrollLao();\r\n setParamsLao({ key: \"isHyperlink\", value: undefined })\r\n }\r\n }, [paramsLao.isHyperlink]);\r\n\r\n\r\n const handleChangePageLao = (event, newPage) => {\r\n setPage(newPage);\r\n updatePageParamsLao({ pageSize: rowsPerPage, page: newPage });\r\n };\r\n\r\n const handleChangeRowsPerPageLao = (e) => {\r\n const pageSize = parseInt(e.target.value, 10)\r\n setRowsPerPage(pageSize);\r\n setPage(0);\r\n updatePageParamsLao({ pageSize: pageSize, page: 0 });\r\n };\r\n\r\n const updateColumnsLao = (columns) => {\r\n let col = columns.map(d => {\r\n return {\r\n ...d,\r\n title: t(d.title)\r\n }\r\n })\r\n setcolumnsOrderLao(col);\r\n setUnTranslateColumn(columns);\r\n }\r\n\r\n const clearAllFiltersLao = () => {\r\n setParamsLao({ key: \"laoFilters\", value: {} })\r\n };\r\n\r\n useDeepCompareEffect(() => {\r\n if (!isEmpty(activeView.columns)) {\r\n const actualColumns = columns.columnOrder;\r\n let temp = {};\r\n actualColumns.map(d => {\r\n temp[d.field] = d;\r\n });\r\n let viewColumnObject = activeView.columns;\r\n let unTranslateActualObject = viewColumnObject.map(d => {\r\n return {\r\n ...d,\r\n // ...(temp[d.field]),\r\n }\r\n })\r\n viewColumnObject = viewColumnObject.map(d => {\r\n return {\r\n ...d,\r\n // ...(temp[d.field]),\r\n title: t(d.title),\r\n }\r\n })\r\n const newDifferenceColumns = isEmpty(activeView.columns) ? [] : differenceBy(columns.columnOrder, activeView.columns, 'field');\r\n\r\n if (newDifferenceColumns.length) {\r\n const translatedColumns = newDifferenceColumns.map(item => {\r\n return {\r\n ...item,\r\n title: t(item.title)\r\n }\r\n });\r\n viewColumnObject = [...viewColumnObject, ...translatedColumns];\r\n }\r\n setUnTranslateColumn([...unTranslateActualObject, ...newDifferenceColumns])\r\n setcolumnsOrderLao(viewColumnObject);\r\n } else {\r\n /** This condition will be excecuted when there is no view created and user tries to change Language or delete view */\r\n let translatedColumns = columns.columnOrder.map(d=> {\r\n return {\r\n ...d,\r\n title: t(d.title)\r\n }\r\n })\r\n setcolumnsOrderLao(translatedColumns);\r\n setUnTranslateColumn(columns.columnOrder);\r\n }\r\n }, [activeView.columns, localStorage.getItem('i18nextLng')]);\r\n\r\n useDeepCompareEffect(() => {\r\n /** This is called when user switches between Export Order Details and Import Order Details Tabs */\r\n const finalColumnsList = columns.columnOrder;\r\n let tempObj = {};\r\n columns.columnOrder.map(d => {\r\n tempObj[d.field] = d;\r\n });\r\n let translatedColumns = finalColumnsList?.map(item => {\r\n return {\r\n ...tempObj[item.field],\r\n ...item,\r\n title: t(item.title),\r\n }\r\n });\r\n setUnTranslateColumn(finalColumnsList);\r\n setcolumnsOrderLao(translatedColumns);\r\n }, [columns.columnOrder]);\r\n\r\n useDeepCompareEffect(() => {\r\n const tempTableData = data?.orders?.map(d => {\r\n return {\r\n ...d,\r\n ...columns.columnConfiguration(d)\r\n }\r\n }) || [];\r\n setTableData({ ...(data || {}), items: tempTableData });\r\n }, [data])\r\n\r\n useEffect(() => {\r\n return () => {\r\n controller.abort();\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n refreshTableLao({ pageSize: rowsPerPage, page })}\r\n filterType={filterType}\r\n type={type}\r\n subtype={tableName}\r\n filterExclusionArray={filterExclusionArray}\r\n searchText={searchText}\r\n columns={unTranslateColumn}\r\n totalRecords={totalRecords}\r\n fetchEndPoint={fetchEndPoint}\r\n columnsAction={updateColumnsLao}\r\n clearAllFilters={clearAllFiltersLao}\r\n />\r\n
\r\n setSnack({ open: false })} />\r\n \r\n \r\n {\r\n loading ?\r\n t(\"please_wait_while_the_data_is_loading\") :\r\n t(\"no_records_to_display\")\r\n }\r\n \r\n }\r\n }}\r\n tableRef={tableRef}\r\n components={{\r\n Container: props_ => `${from}-${to} ${t('of')} ${count} ${t('records')}`}\r\n SelectProps={{ 'data-testid': 'rowsPerPageSelect', SelectDisplayProps: { 'data-testid': \"rowsOption\" } }}\r\n data-testid=\"pagination\"\r\n />)\r\n }}\r\n columns={cloneDeep(columnsOrderLao)}\r\n data={items}\r\n options={{ ...laoTableOptions, selection: false, pageSize: rowsPerPage }}\r\n detailPanel={\r\n [\r\n () => ({\r\n render: rowData_ => \r\n \r\n );\r\n}\r\n\r\nexport default LaoTable;","import React, { createRef, useState, useEffect } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { laoOrderDetailsColumns } from \"reduxLib/constdata/LAO/laoOrderDetailsColumns\";\r\nimport { laoImportOrderDetailsColumns } from \"reduxLib/constdata/LAO/laoImportOrderDetailsColumns\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport LaoTable from \"components/LAO/LaoTable\";\r\nimport { endpoints } from 'helpers';\r\nimport { Grid } from \"@material-ui/core\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport { laoSearchType } from \"configs/appConstants\";\r\nimport useSetQuery, { useMultiSetQuery } from 'customHooks/useQuery';\r\nimport { getAllLAOViews, resetLAOViews } from 'reduxLib/services/LaoServices/laoViewsServices';\r\nimport { laoViewTableNames } from 'configs/appConstants';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n tableContainer: {\r\n background: theme.palette.primary.base,\r\n borderRadius: theme.spacing(1.5),\r\n padding: `${theme.spacing(3)}px ${theme.spacing(8)}px ${theme.spacing(3)}px ${theme.spacing(8)}px`,\r\n marginTop: theme.spacing(7),\r\n [theme.breakpoints.down('sm')]: {\r\n padding: '0px',\r\n marginTop: theme.spacing(6),\r\n }\r\n },\r\n active: {\r\n opacity: \"100%\",\r\n cursor: 'pointer' \r\n },\r\n faded: {\r\n opacity: \"30%\",\r\n cursor: 'pointer'\r\n },\r\n volume: {\r\n display: 'flex',\r\n marginTop: theme.spacing(2),\r\n [theme.breakpoints.down('sm')]: {\r\n justifyContent: 'space-evenly'\r\n }\r\n },\r\n }));\r\n\r\nconst LaoOrderDetails = () => {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const tableRef = createRef();\r\n const dispatch = useDispatch();\r\n const [controller] = useState(() => new AbortController());\r\n const [{tableType}, setParams] = useSetQuery();\r\n const setMultiQuery = useMultiSetQuery();\r\n const [activeOrder, setActiveOrder] = useState(\"export\");\r\n const isMobileLao = useMediaQuery(useTheme().breakpoints.down('xs'));\r\n\r\n const setTableType = (values) => {\r\n setActiveOrder(values);\r\n setMultiQuery({\r\n tableType: values === 'export' ? \"exportOrderDetails\" : \"importOrderDetails\",\r\n viewid: undefined,\r\n loadView: true\r\n });\r\n dispatch(resetLAOViews({\r\n tableName: laoViewTableNames[values === 'export' ? \"exportOrderDetails\" : \"importOrderDetails\"]\r\n }, controller));\r\n dispatch(getAllLAOViews({\r\n tableName: laoViewTableNames[values === 'export' ? \"exportOrderDetails\" : \"importOrderDetails\"]\r\n }, controller));\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n setTableType('export')}>{isMobileLao ? t('exportOrderMobile') : t('exportOrder')} \r\n \r\n \r\n setTableType('import')}>{isMobileLao ? t('importOrderMobile'): t('importOrder')} \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default LaoOrderDetails;","import LAOVolumeChart from 'components/LAO/LaoVolumeChart';\r\nimport LaoOrderDetails from './LaoOrderDetails';\r\nimport React from 'react';\r\n\r\nconst LaoHome = () => {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default LaoHome","import React from 'react';\r\nimport Box from '@material-ui/core/Box';\r\nimport { Link } from 'react-router-dom';\r\n\r\nexport default function PageNotFound() {\r\n return (\r\n \r\n
\r\n \r\n
Page Not Found \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n return {\r\n return {\r\n return {\r\n return {\r\n return {\r\n const {\r\n match: { params: pageparams }\r\n } = props;\r\n\r\n const { page } = pageparams;\r\n return {\r\n return {\r\n return {\r\n return {\r\n return \r\n \r\n );\r\n}\r\n\r\nexport default withRouter(Routes);","import React from 'react';\r\nimport { createBrowserHistory } from 'history';\r\nimport { ThemeProvider, CssBaseline } from '@material-ui/core';\r\nimport { Provider } from 'react-redux';\r\nimport { Router } from 'react-router-dom';\r\nimport configureStore from './store'; //Store Configuration\r\nimport Routes from './theme/Routes';\r\nimport './assets/scss/index.scss';\r\nimport { appTheme, appLightTheme } from '../src/theme';\r\nimport ThemeContext from 'context/ThemeContext';\r\n\r\nconst store = configureStore();\r\nconst browserHistory = createBrowserHistory();\r\n\r\nconst App = () => {\r\n const [theme, setTheme] = React.useState(appTheme);\r\n const themeType = React.useMemo(() => ({\r\n theme, setTheme, light: appLightTheme, dark: appTheme\r\n }), [theme, setTheme, appLightTheme, appTheme]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://cra.link/PWA\r\nimport { version } from \"lib/version\";\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)\r\n);\r\n\r\nexport function register(config) {\r\n console.log(`${version}`)\r\n if ('serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js?v=${version}`;\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n console.log(\"LocalService Worker\")\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://cra.link/PWA'\r\n );\r\n })\r\n\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then((registration) => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch((error) => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n })\r\n .then((response) => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then((registration) => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log('No internet connection found. App is running in offline mode.');\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready\r\n .then((registration) => {\r\n registration.unregister();\r\n })\r\n .catch((error) => {\r\n console.error(error.message);\r\n });\r\n }\r\n}\r\n","export default {\r\n onUpdate: registration => {\r\n if(registration) {\r\n registration.unregister().then(() => {\r\n window.location.reload()\r\n })\r\n }\r\n },\r\n}","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './assets/css/index.css';\r\nimport App from './App';\r\nimport * as serviceWorkerRegistration from './theme/serviceWorkerRegistration';\r\nimport swConfig from \"./workers/swConfig\";\r\n\r\nReactDOM.render(\r\n
\r\n { t('loading_text') } \r\n \r\n )\r\n}\r\n\r\nexport default LoadingPage;","import moment from \"moment-timezone\";\r\n\r\nexport const KCRegions = [\"NA\", \"EMEA\", \"LAO\"];\r\n\r\n// export const withLAORegion = [\"NA\", \"EMEA\", \"LAO\"];\r\n\r\nexport const businessUnits = [\"CONSUMER\", \"PROFESSIONAL\"];\r\n\r\nexport const viewByCuso = [\"Customer\", \"Sales Office\"];\r\n\r\nexport const emeaCustSeparator = '||';\r\n\r\nexport const salesOrgsbyBU = [\r\n {\r\n bu: businessUnits[1],\r\n salesOrgs: [{ value: \"2821\", region: \"Canada\" }, { value: \"2811\", region: \"US\" }],\r\n },\r\n {\r\n bu: businessUnits[0],\r\n salesOrgs: [{ value: \"2820\", region: \"Canada\" }, { value: \"2810\", region: \"US\" }],\r\n }\r\n]\r\nexport const viewByConstants = {\r\n locations: {\r\n name: \"shortName\",\r\n id: \"siteNum\",\r\n type: \"type\"\r\n },\r\n customer: {\r\n name: \"salesOffice\",\r\n id: \"salesOffice\",\r\n type: \"selectionType\",\r\n },\r\n\r\n}\r\n\r\nexport const freqMappings = {\r\n EVERY_15_MINS: \"Every 15 mins\",\r\n EVERY_30_MINS: \"Every 30 mins\",\r\n EVERY_60_MINS: \"Every 1 hour\",\r\n CUSTOM: \"Custom\"\r\n}\r\n\r\nexport const distributionChannel = [{ value: \"80\", name: \"domestic\" }, { value: \"90\", name: \"international\" }]\r\n\r\nexport const osmLoadingInstructions = {\r\n D_DOWN_STACKING: \"D Down Stacking\",\r\n L_LOAD_LEVELING: \"L Load Leveling\",\r\n P_PACKED_LOADING: \"P Packed Loading\",\r\n R_ROTATE_TO_FILL_TAIL_GAP: \"R Rotate To Fill Tail Gap\",\r\n S_STAGGERED_LOAD: \"S Staggered Load\"\r\n}\r\n\r\nexport const osmDiagramType = {\r\n CSR_CONVENTIONAL_STACK: 'CSR Conventional Stack Routine',\r\n // DIY_ORDER_LEBEL: 'DIY Order Label Routine', \r\n FSR_FAILE_SAFE: 'FSR Fail-Safe Routine',\r\n MFS_MODIFIED_FAIL_SAFE: 'MFS Modified Fail-Safe Routine'\r\n}\r\n\r\nexport const osmPrintTypes = {\r\n LSR: 'OSM_SUBTYPE_REPRINT_LSR',\r\n UCL: 'OSM_SUBTYPE_PRINT_UCC_LABEL',\r\n ADDR: 'OSM_SUBTYPE_PRINT_ADDR_LABEL'\r\n}\r\n\r\nexport const osmPrintModes = {\r\n stack: \"PRINT_PER_STACK_MODS\",\r\n case: \"PRINT_PER_CASE\"\r\n}\r\n\r\nexport const osmFilterExclusionArray = [\"searchStringList\", \"matAvailDateCustom\", \"warehouseReadyDateTimeOriginTZCustom\", \"requestedDeliveryDateCustom\", \"loadStartDateTimeOriginTZCustom\"];\r\n\r\nexport const kpiShortNames = {\r\n LOAD_DIAGRAM_SUBMISSION_PENDING: \"ld_pending\",\r\n LOAD_DIAGRAM_SUBMITTED: \"ld_submitted\",\r\n UCC_LABEL_PRINTED: \"print_ucl\",\r\n ADDRESS_LABEL_PRINTED: \"print_addr_label\",\r\n DOWNLOADED_TO_WMS: \"download_to_wms\",\r\n LOADING_STARTED: \"loading_started\",\r\n LOADING_ENDED: \"loading_ended\",\r\n SHIPMENT_COMPLETION: \"shipment_compl\",\r\n SHIPMENT_START: \"shipment_start\",\r\n SHIPMENT_END: \"shipment_end\"\r\n}\r\n\r\nexport const defaultDocumentDate = {\r\n startTime: moment().subtract(90, \"days\").format(\"YYYY-MM-DD\"),\r\n endTime: moment().format(\"YYYY-MM-DD\"),\r\n}\r\n\r\nexport const generateDefaultDocDate = (months = 3) => ({\r\n startTime: moment().subtract(months*30, \"days\").format(\"YYYY-MM-DD\"),\r\n endTime: moment().format(\"YYYY-MM-DD\"),\r\n});\r\n\r\nexport const todayDocumentDate = {\r\n startTime: moment().format(\"YYYY-MM-DD\"),\r\n endTime: moment().format(\"YYYY-MM-DD\")\r\n}\r\n\r\nexport const defaultOrderEntryDate = {\r\n startTime: moment().subtract(30, \"days\").format(\"YYYY-MM-DD\"),\r\n endTime: moment().format(\"YYYY-MM-DD\"),\r\n}\r\n\r\nexport const getDocumentDate = (pageFromUrl, documentDate={}) => {\r\n if(pageFromUrl === 'orderEntry' || pageFromUrl === 'openOrders')\r\n return { ...defaultOrderEntryDate, ...documentDate };\r\n\r\n return { ...defaultDocumentDate, ...documentDate };\r\n}\r\n\r\nexport const viewTableNames = {\r\n \"custReturns\": \"EMEA_CUST_RETURNS\",\r\n \"openOrders\": \"EMEA_OPEN_ORDERS\",\r\n \"cutsAndRejections\": \"EMEA_ORDER_CUTS_AND_REJECTIONS\",\r\n \"invoiceSummary\": \"EMEA_INVOICE_SUMMARY\"\r\n}\r\n\r\nexport const laoViewTableNames = {\r\n \"exportOrderDetails\": \"LAO_EXPORTS_ORDER_DETAILS\",\r\n \"importOrderDetails\": \"LAO_IMPORTS_ORDER_DETAILS\"\r\n}\r\n\r\nexport const laoSearchType = {\r\n \"exportOrderDetails\": \"EXPORT_ORDER_DETAILS\",\r\n \"importOrderDetails\": \"IMPORT_ORDER_DETAILS\"\r\n}\r\n\r\nexport const excludedUrlParam = [\"invoiced\", \"invoiceDetails\"];\r\n\r\nexport const emeaCountryCodes = {\r\n AD: \"Andorra\",\r\n AE: \"United Arab Emirates\",\r\n AF: \"Afghanistan\",\r\n AL: \"Albania\",\r\n AM: \"Armenia\",\r\n AO: \"Angola\",\r\n AQ: \"Antarctica\",\r\n AT: \"Austria\",\r\n AX: \"Åland Islands\",\r\n AZ: \"Azerbaijan\",\r\n BA: \"Bosnia and Herzegovina\",\r\n BE: \"Belgium\",\r\n BF: \"Burkina Faso\",\r\n BG: \"Bulgaria\",\r\n BH: \"Bahrain\",\r\n BI: \"Burundi\",\r\n BJ: \"Benin\",\r\n BL: \"Saint Barthélemy\",\r\n BV: \"Bouvet Island\",\r\n BW: \"Botswana\",\r\n BY: \"Belarus\",\r\n CD: \"The Democratic Republic of the Congo\",\r\n CF: \"Central African Republic\",\r\n CG: \"Congo\",\r\n CH: \"Switzerland\",\r\n CI: \"Côte d'Ivoire\",\r\n CK: \"Cook Islands\",\r\n CM: \"Cameroon\",\r\n CV: \"Cabo Verde\",\r\n CW: \"Curaçao\",\r\n CY: \"Cyprus\",\r\n CZ: \"Czechia\",\r\n DE: \"Germany\",\r\n DJ: \"Djibouti\",\r\n DK: \"Denmark\",\r\n DZ: \"Algeria\",\r\n EE: \"Estonia\",\r\n EG: \"Egypt\",\r\n EH: \"Western Sahara\",\r\n ER: \"Eritrea\",\r\n ES: \"Spain\",\r\n ET: \"Ethiopia\",\r\n FI: \"Finland\",\r\n FO: \"Faroe Islands\",\r\n FR: \"France\",\r\n GA: \"Gabon\",\r\n GB: \"United Kingdom of Great Britain and Northern Island\",\r\n GE: \"Georgia\",\r\n GF: \"French Guiana\",\r\n GG: \"Guernsey\",\r\n GH: \"Ghana\",\r\n GI: \"Gibralta\",\r\n GL: \"Greenland\",\r\n GM: \"Gambia\",\r\n GN: \"Guinea\",\r\n GP: \"Guadeloupe\",\r\n GQ: \"Equatorial Guinea\",\r\n GR: \"Greece\",\r\n GW: \"Guinea-Bissau\",\r\n HM: \"Heard Island and McDonald Islands\",\r\n HR: \"Croatia\",\r\n HU: \"Hungary\",\r\n IE: \"Ireland\",\r\n IL: \"Israel\",\r\n IM: \"Isle of Man\",\r\n IQ: \"Iraq\",\r\n IR: \"Iran\",\r\n IS: \"Iceland\",\r\n IT: \"Italy\",\r\n IC: \"Canary Island\",\r\n JE: \"Jersey\",\r\n JO: \"Jordan\",\r\n KE: \"Kenya\",\r\n KG: \"Kyrgyzstan\",\r\n KM: \"Comoros\",\r\n KW: \"Kuwait\",\r\n KZ: \"Kazakhstan\",\r\n LB: \"Lebanon\",\r\n LI: \"Liechtenstein\",\r\n LR: \"Liberia\",\r\n LS: \"Lesotho\",\r\n LT: \"Lithuania\",\r\n LU: \"Luxembourg\",\r\n LV: \"Latvia\",\r\n LY: \"Libya\",\r\n MA: \"Morocco\",\r\n MC: \"Monaco\",\r\n MD: \"Moldova\",\r\n ME: \"Montenegro\",\r\n MF: \"Collectivity of Saint Martin\",\r\n MG: \"Madagascar\",\r\n MK: \"North Macedonia\",\r\n ML: \"Mali\",\r\n MQ: \"Martinique\",\r\n MR: \"Mauritania\",\r\n MT: \"Malta\",\r\n MU: \"Mauritius\",\r\n MW: \"Malawi\",\r\n MZ: \"Mozambique\",\r\n NA: \"Namibia\",\r\n NC: \"New Caledonia\",\r\n NE: \"Niger\",\r\n NG: \"Nigeria\",\r\n NL: \"Netherlands\",\r\n NO: \"Norway\",\r\n OM: \"Oman\",\r\n PF: \"French Polynesia\",\r\n PL: \"Poland\",\r\n PM: \"Saint Pierre and Miquelon\",\r\n PS: \"State of Palestine\",\r\n PT: \"Portugal\",\r\n QA: \"Qatar\",\r\n RE: \"Réunion\",\r\n RO: \"Romania\",\r\n RS: \"Serbia\",\r\n RU: \"Russian Federation\",\r\n RW: \"Rwanda\",\r\n SA: \"Saudi Arabia\",\r\n SC: \"Seychelles\",\r\n SD: \"Sudan\",\r\n SE: \"Sweden\",\r\n SH: \"Saint Helena, Ascension and Tristan da Cunha\",\r\n SI: \"Slovenia\",\r\n SK: \"Slovakia\",\r\n SL: \"Sierra Leone\",\r\n SM: \"San Marino\",\r\n SN: \"Senegal\",\r\n SO: \"Somalia\",\r\n SS: \"South Sudan\",\r\n ST: \"Sao Tome and Principe\",\r\n SX: \"Sint Maarten\",\r\n SY: \"Syrian Arab Republic\",\r\n SZ: \"Swaziland\",\r\n TD: \"Chad\",\r\n TF: \"French Southern Territories\",\r\n TG: \"Togo\",\r\n TJ: \"Tajikistan\",\r\n TM: \"Turkmenistan\",\r\n TN: \"Tunisia\",\r\n TR: \"Turkey\",\r\n TZ: \"Tanzania\",\r\n UA: \"Ukraine\",\r\n UG: \"Uganda\",\r\n UZ: \"Uzbekistan\",\r\n VA: \"Holy See\",\r\n WF: \"Wallis and Futuna\",\r\n YE: \"Yemen\",\r\n YT: \"Mayotte\",\r\n ZA: \"South Africa\",\r\n ZM: \"Zambia\",\r\n ZW: \"Zimbabwe\"\r\n}\r\n","import React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\n\r\n\r\nconst KCCheckBox = withStyles(theme => ({\r\n root: {\r\n color: theme?.palette.primary.contrastText,\r\n '&$checked': {\r\n color: theme?.palette.primary.contrastText,\r\n },\r\n },\r\n checked: {},\r\n}))((props) => \r\n \r\n \r\n {t(\"select_language\")}\r\n \r\n {regionLanguageMap[region].map((item) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n );\r\n}\r\n","export default {\r\n LOCATION_FETCH_SUCCESS: 'LOCATION_FETCH_SUCCESS',\r\n LOCATION_FETCH_FAILED: 'LOCATION_FETCH_FAILED',\r\n PERFORMANCE_FETCH_SUCCESS: 'PERFORMANCE_FETCH_SUCCESS',\r\n PERFORMANCE_FETCH_FAILED: 'PERFORMANCE_FETCH_FAILED',\r\n PEFRORMANCE_LOADING: 'PEFRORMANCE_LOADING',\r\n LOADING: 'LOCATIONS_LOADING',\r\n CUSTOMER_FETCH_SUCCESS:\"CUSTOMER_FETCH_SUCCESS\",\r\n CUSTOMER_FETCH_FAILED: \"CUSTOMER_FETCH_FAILED\",\r\n SALESOFC_FETCH_SUCCESS:\"SALESOFC_FETCH_SUCCESS\",\r\n SALESOFC_FETCH_FAILED: \"SALESOFC_FETCH_FAILED\"\r\n}","export default {\r\n GET_FAVS_SUCCESS: \"GET_FAVS_SUCCESS\",\r\n GET_FAVS_FAILED: \"GET_FAVS_FAILED\",\r\n LOADING: \"LOADING\",\r\n MARK_FAV_SUCCESS: \"MARK_FAV_SUCCESS\",\r\n MARK_UNFAV_SUCCESS: \"MARK_UNFAV_SUCCESS\",\r\n MARK_FAV_FAILED: \"MARK_FAV_FAILED\",\r\n MARK_UNFAV_FAILED: \"MARK_UNFAV_FAILED\",\r\n RESET_FAV_UNFAV_MARKING: \"RESET_FAV_UNFAV_MARKING\",\r\n MARK_LOADING: \"MARK_LOADING\",\r\n ADD_BUSINESS_UNIT_SUCCESS: \"ADD_BUSINESS_UNIT_SUCCESS\",\r\n ADD_BUSINESS_UNIT_FAILED: \"ADD_BUSINESS_UNIT_FAILED\",\r\n ADD_BUSINESS_UNIT_LOADING: \"ADD_BUSINESS_UNIT_LOADING\",\r\n SET_BUSINESS_UNIT_LOCAL: \"SET_BUSINESS_UNIT_LOCAL\",\r\n GET_FAV_CUSO: \"GET_FAV_CUSO\",\r\n FAV_CUSO_LOADING: \"FAV_CUSO_LOADING\",\r\n FAV_CUSO_SUCCESS: \"FAV_CUSO_SUCCESS\",\r\n FAV_CUSO_FAILED: \"FAV_CUSO_FAILED\"\r\n}","export default {\r\n ADD_ITEM_SUCCESS: 'ADD_ITEM_SUCCESS',\r\n REMOVE_ITEM_SUCCESS: 'REMOVE_ITEM_SUCCESS',\r\n ADD_CUSO_MULTIPLE_SUCCESS: \"ADD_CUSO_MULTIPLE_SUCCESS\",\r\n ADD_CUSO_SUCCESS:\"ADD_CUSO_SUCCESS\",\r\n REMOVE_CUSO_SUCCESS:\"REMOVE_CUSO_SUCCESS\",\r\n CLEAR_CUSO:\"CLEAR_CUSO\",\r\n ADD_SG_SUCCESS:\"ADD_SG_SUCCESS\",\r\n REMOVE_SG_SUCCESS:\"REMOVE_SG_SUCCESS\",\r\n ADD_ITEM_MULTIPLE_SUCCESS: 'ADD_ITEM_MULTIPLE_SUCCESS',\r\n CLEAR_ALL: 'CLEAR_ITEMS',\r\n REMOVE_FAV_ITEMS: 'REMOVE_FAV_ITEMS',\r\n REMOVE_FAV_CUSO: 'REMOVE_FAV_CUSO',\r\n CLEAR_SELECTED: 'CLEAR_SELECTED',\r\n CHANGE_TAB: 'CHANGE_TAB',\r\n ADD_CUSTOMER_MULTIPLE_SUCCESS: 'ADD_CUSTOMER_MULTIPLE_SUCCESS',\r\n JOIN_FAVS_AND_SELECTIONS_CUSO: \"JOIN_FAVS_AND_SELECTIONS_CUSO\",\r\n SET_ONLOAD_SELECTIONS: \"SET_ONLOAD_SELECTIONS\",\r\n SET_BLOCKONTABCHANGE:\"SET_BLOCKONTABCHANGE\",\r\n SET_LOAD_FALSE: \"SET_LOAD_FALSE\",\r\n UPDATE_LOCATIONS: \"UPDATE_LOCATIONS\"\r\n}","export default {\r\n ADD_TOKEN: 'ADD_TOKEN',\r\n REMOVE_TOKEN: 'REMOVE_TOKEN',\r\n ADD_USER_DETAILS: 'ADD_USER_DETAILS',\r\n REMOVE_USER_DETAILS: \"REMOVE_USER_DETAILS\"\r\n}","export default {\r\n SHOW_HIDE_FAVOURITES: \"SHOW_HIDE_FAVOURITES\",\r\n CHANGE_THEME: \"CHANGE_THEME\",\r\n SET_FILTERS: \"SET_FILTERS\",\r\n UNSET_FILTERS: \"UNSET_FILTERS\",\r\n RESET_FILTERS: \"RESET_FILTERS\",\r\n SAVE_COLUMN_STATE: \"SAVE_COLUMN_STATE\",\r\n RESET_COLUMN_STATE: \"RESET_COLUMN_STATE\",\r\n SET_VIEW_BY: \"SET_VIEW_BY\",\r\n SET_TABLE_BODY: \"SET_TABLE_BODY\"\r\n}\r\n","export default {\r\n CHART_DATA_FETCH_SUCCESS: 'CHART_DATA_FETCH_SUCCESS',\r\n CHART_DATA_FETCH_FAILED: 'CHART_DATA_FETCH_FAILED',\r\n LOADING: 'CHART_LOADING',\r\n GUARDRAIL_DATA_FETCH_SUCCESS: 'GUARDRAIL_DATA_FETCH_SUCCESS',\r\n GUARDRAIL_DATA_FETCH_FAILED: 'GUARDRAIL_DATA_FETCH_FAILED',\r\n GUARDRAIL_LOADING: 'GUARDRAIL_LOADING'\r\n}","export default {\r\n DOWNLOAD_SUCCESS: 'DOWNLOAD_SUCCESS',\r\n DOWNLOAD_FAILURE: 'DOWNLOAD_FAILURE',\r\n DOWNLOAD_RESET: 'DOWNLOAD_RESET',\r\n LOADING: 'DOWNLOADING'\r\n}","export default {\r\n PROFILE_FETCH_SUCCESS: 'PROFILE_FETCH_SUCCESS',\r\n PROFILE_FETCH_FAILED: 'PROFILE_FETCH_FAILED',\r\n LOADING: 'PROFILE_LOADING',\r\n PROFILE_SAVE_SUCCESS: 'PROFILE_SAVE_SUCCESS',\r\n PROFILE_SAVE_FAILED: 'PROFILE_SAVE_FAILED',\r\n PROFILE_CREATE_FILTER_LAYOUT:'PROFILE_CREATE_FILTER_LAYOUT',\r\n PROFILE_SET_CURRENT_VIEW:'PROFILE_SET_CURRENT_VIEW',\r\n PROFILE_MARKFAV_FAILED:\"PROFILE_MARKFAV_FAILED\",\r\n PROFILE_MARKFAV_SUCCESS:\"PROFILE_MARKFAV_SUCCESS\",\r\n SET_FIRST_LOAD: \"SET_FIRST_LOAD\",\r\n FETCH_STATUS: \"FETCH_STATUS\"\r\n}","export default {\r\n SHIPMENT_STOPS_DATA_FETCH_SUCCESS: 'SHIPMENT_STOPS_DATA_FETCH_SUCCESS',\r\n SHIPMENT_TRACKING_DATA_FETCH_SUCCESS: 'SHIPMENT_TRACKING_DATA_FETCH_SUCCESS',\r\n SHIPMENT_STOPS_DATA_FETCH_FAILED: 'SHIPMENT_STOPS_DATA_FETCH_FAILED',\r\n SHIPMENT_TRACKING_DATA_FETCH_FAILED: 'SHIPMENT_TRACKING_DATA_FETCH_FAILED',\r\n SHIPMENT_LOADING: 'SHIPMENT_LOADING',\r\n STOPS_DETAILS: 'STOPS_DETAILS',\r\n TRACKING_DETAILS: 'TRACKING_DETAILS'\r\n}","export default {\r\n SUBMIT_FEEDBACK_LOADING: \"SUBMIT_FEEDBACK_LOADING\",\r\n SUBMIT_FEEDBACK_STATUS: \"SUBMIT_FEEDBACK_STATUS\",\r\n RESET_SUBMIT_FEEDBACK_STATUS: \"RESET_SUBMIT_FEEDBACK_STATUS\"\r\n}\r\n","export default {\r\n TABLE_DATA_FETCH_SUCCESS: \"TABLE_DATA_FETCH_SUCCESS\",\r\n TABLE_DATA_FETCH_FAILURE: \"TABLE_DATA_FETCH_FAILURE\",\r\n LOADING: \"TABLE_DATA_LOADING\"\r\n}","export default {\r\n UPDATE_CST_RANK: 'UPDATE_CST_RANK',\r\n UPDATE_FAILED: 'UPDATE_FAILED',\r\n UPDATE_LOADING: 'UPDATE_LOADING',\r\n UPDATE_REPORT_URL: 'UPDATE_REPORT_URL'\r\n}","export default {\r\n GUARDRAILS_FETCH_SUCCESS: 'GUARDRAILS_FETCH_SUCCESS',\r\n GUARDRAILS_FETCH_FAILED: 'GUARDRAILS_FETCH_FAILED',\r\n GUARDRAILS_FETCH_LOADING: 'GUARDRAILS_FETCH_LOADING',\r\n GUARDRAILS_UPDATE_LOADING: \"GUARDRAILS_UPDATE_LOADING\",\r\n GUARDRAILS_UPDATE_FAILED: \"GUARDRAILS_UPDATE_FAILED\",\r\n GUARDRAILS_UPDATE_SUCCESS: \"GUARDRAILS_UPDATE_SUCCESS\",\r\n GUARDRAILS_REQUEST_ACCESS_SUCCESS: \"GUARDRAILS_REQUEST_ACCESS_SUCCESS\",\r\n GUARDRAILS_REQUEST_ACCESS_FAILED: \"GUARDRAILS_REQUEST_ACCESS_FAILED\",\r\n GUARDRAILS_GET_REQUESTS_SUCCESS: \"GUARDRAILS_GET_REQUESTS_SUCCESS\",\r\n GUARDRAILS_GET_REQUESTS_FAILED: \"GUARDRAILS_GET_REQUESTS_FAILED\",\r\n GUARDRAILS_APPROVE_DECLINE_REQUEST_SUCCESS: \"GUARDRAILS_APPROVE_DECLINE_REQUEST_SUCCESS\",\r\n GUARDRAILS_APPROVE_DECLINE_REQUEST_FAILED: \"GUARDRAILS_APPROVE_DECLINE_REQUEST_FAILED\",\r\n GUARDRAILS_REQUEST_LOADING: \"GUARDRAILS_REQUEST_LOADING\",\r\n GUARDRAILS_RESET_REQUEST_ACCESSS: \"GUARDRAILS_RESET_REQUEST_ACCESSS\"\r\n}","export default {\r\n LOADING: \"STOCK_CONSTRAINT_LOADING\",\r\n\r\n //Shipment#\r\n FETCH_SHIPMENT_LIST_SUCCESS: \"FETCH_SHIPMENT_LIST_SUCCESS\",\r\n SHIPMENT_LIST_FAILED: \"SHIPMENT_LIST_FAILED\",\r\n\r\n SEARCH_SHIPMENT_SUCCESS: \"SEARCH_SHIPMENT_SUCCESS\",\r\n SEARCH_SHIPMENT_FAILED: \"SEARCH_SHIPMENT_FAILED\",\r\n\r\n FETCH_RECOMENDATIONS_SUCCESS: \"FETCH_RECOMENDATIONS_SUCCESS\",\r\n RECOMENDATIONS_FAILED: \"RECOMENDATIONS_FAILED\",\r\n\r\n //Material#\r\n FETCH_MATERIALS_SUCCESS: \"FETCH_MATERIALS_SUCCESS\",\r\n MATERIALS_FAILED: \"MATERIALS_FAILED\",\r\n\r\n FETCH_MATERIALS_OUTBOUND_SUCCESS: \"FETCH_MATERIALS_OUTBOUND_SUCCESS\",\r\n MATERIALS_OUTBOUND_FAILED: \"MATERIALS_OUTBOUND_FAILED\",\r\n\r\n FETCH_MATERIALS_INBOUND_SUCCESS: \"FETCH_MATERIALS_INBOUND_SUCCESS\",\r\n MATERIALS_INBOUND_FAILED: \"MATERIALS_INBOUND_FAILED\",\r\n}","export default {\r\n LOADING: 'SELF_ALERTING_LOADING',\r\n LOAD_COMPARISION_METADATA: 'LOAD_COMPARISION_METADATA',\r\n GET_SAVED_ALERTS: \"GET_SAVED_ALERTS\",\r\n SAVE_SLEF_ALERTING_FILTERS: \"SAVE_SLEF_ALERTING_FILTERS\",\r\n SF_ADD_CUSO_SUCCESS: \"SF_ADD_CUSO_SUCCESS\",\r\n SF_REMOVE_CUSO_SUCCESS: \"SF_REMOVE_CUSO_SUCCESS\",\r\n SF_CLEAR_CUSO: \"SF_CLEAR_CUSO\",\r\n SF_REMOVE_SG_SUCCESS: \"SF_REMOVE_SG_SUCCESS\",\r\n SF_ADD_SG_SUCCESS: \"SF_ADD_SG_SUCCESS\",\r\n SAVE_ALERT_SUCCESS: \"SAVE_ALERT_SUCCESS\",\r\n ALERTS_LOADING: \"ALERTS_LOADING\",\r\n SAVE_ALERT_FAILED: \"SAVE_ALERT_FAILED\",\r\n DELETE_SELF_ALERT: \"DELETE_SELF_ALERT\",\r\n SF_ADD_CUSO_MULTIPLE_SUCCESS: \"SF_ADD_CUSO_MULTIPLE_SUCCESS\",\r\n RESET_SELF_ALERT_STATE: \"RESET_SELF_ALERT_STATE\",\r\n SAVE_ALERT_LOADER: \"SAVE_ALERT_LOADER\"\r\n}","export default {\r\n TRAILER_DIMENSION_LOADING: \"TRAILER_DIMENSION_LOADING\",\r\n TRAILER_DIMENSION_SUCCESS: \"TRAILER_DIMENSION_SUCCESS\",\r\n TRAILER_DIMENSION_FAILED: \"TRAILER_DIMENSION_FAILED\",\r\n RESET_TRAILER_DIMENSION: \"RESET_TRAILER_DIMENSION\",\r\n\r\n LOAD_DIAGRAM_LOADING: \"LOAD_DIAGRAM_LOADING\",\r\n LOAD_DIAGRAM_SUCCESS: \"LOAD_DIAGRAM_SUCCESS\",\r\n LOAD_DIAGRAM_FAILED: \"LOAD_DIAGRAM_FAILED\",\r\n RESET_SUBMIT_LOAD_DIAGRAM: \"RESET_SUBMIT_LOAD_DIAGRAM\",\r\n\r\n PRECHECK_LD_LOADING: \"PRECHECK_LD_LOADING\",\r\n PRECHECK_LD_SUCCESS: \"PRECHECK_LD_SUCCESS\",\r\n PRECHECK_LD_FAILED: \"PRECHECK_LD_FAILED\",\r\n RESET_PRECHECK_LD: \"RESET_PRECHECK_LD\",\r\n\r\n SEND_TO_WMS_LOADING: \"SEND_TO_WMS_LOADING\",\r\n SEND_TO_WMS_SUCCESS: \"SEND_TO_WMS_SUCCESS\",\r\n SEND_TO_WMS_FAILED: \"SEND_TO_WMS_FAILED\",\r\n RESET_SEND_TO_WMS: \"RESET_SEND_TO_WMS\",\r\n\r\n DELIVERY_COMMENT_LOADING: \"DELIVERY_COMMENT_LOADING\",\r\n DELIVERY_COMMENT_SUCCESS: \"DELIVERY_COMMENT_SUCCESS\",\r\n DELIVERY_COMMENT_FAILED: \"DELIVERY_COMMENT_FAILED\",\r\n RESET_DELIVERY_COMMENT: \"RESET_DELIVERY_COMMENT\"\r\n}","export default {\r\n OSM_LOADING: 'OSM_LOADING',\r\n FETCH_OSM_VIEWS_SUCCESS: 'FETCH_OSM_VIEWS_SUCCESS',\r\n FETCH_OSM_VIEWS_FAILED: 'FETCH_OSM_VIEWS_FAILED',\r\n GET_OSM_VIEW_SUCCESS: 'GET_OSM_VIEW_SUCCESS',\r\n GET_OSM_VIEW_FAILED: 'GET_OSM_VIEW_FAILED',\r\n DELETE_OSM_VIEW_SUCCESS: 'DELETE_OSM_VIEW_SUCCESS',\r\n DELETE_OSM_VIEW_FAILED: 'DELETE_OSM_VIEW_FAILED',\r\n UPDATE_OSM_VIEW_SUCCESS: 'UPDATE_OSM_VIEW_SUCCESS',\r\n UPDATE_OSM_VIEW_FAILED: 'UPDATE_OSM_VIEW_FAILED',\r\n ACTIVATE_OSM_TAB: 'ACTIVATE_OSM_TAB',\r\n HIDE_OSM_VIEW: 'HIDE_OSM_VIEW',\r\n SHOW_ALL_HIDE_ALL_OSM_VIEWS: 'SHOW_ALL_HIDE_ALL_OSM_VIEWS',\r\n FAV_OSM_VIEW_SUCCESS: 'FAV_OSM_VIEW_SUCCESS',\r\n FAV_OSM_VIEW_FAILED: 'FAV_OSM_VIEW_FAILED',\r\n UPDATE_VIEW_ORDER_SUCCESS: 'UPDATE_VIEW_ORDER_SUCCESS',\r\n UPDATE_VIEW_ORDER_FAILED: 'UPDATE_VIEW_ORDER_FAILED',\r\n RESET_OSM_STATUS: \"RESET_OSM_STATUS\"\r\n }","export default {\r\n OSM_SITES_FETCH_SUCCESS: 'OSM_SITES_FETCH_SUCCESS',\r\n OSM_SITES_FETCH_FAILED: 'OSM_SITES_FETCH_FAILED',\r\n OSM_SITES_LOADING: 'OSM_SITES_LOADING',\r\n\r\n OSM_MAP_REGIONS: 'OSM_MAP_REGIONS',\r\n OSM_MAP_COUNTRIES: 'OSM_MAP_COUNTRIES',\r\n OSM_MAP_SITES: 'OSM_MAP_SITES',\r\n\r\n OSM_CURRENT_REGIONS: 'OSM_CURRENT_REGIONS',\r\n OSM_CURRENT_COUNTRIES: 'OSM_CURRENT_COUNTRIES',\r\n OSM_CURRENT_SITES: 'OSM_CURRENT_SITES',\r\n OSM_CURRENT_BUSINESS: 'OSM_CURRENT_BUSINESS',\r\n\r\n}","export default {\r\n OSM_VIEW_LSR_SUCCESS: 'OSM_VIEW_LSR_SUCCESS',\r\n OSM_VIEW_LSR_FAILED: 'OSM_VIEW_LSR_FAILED',\r\n OSM_VIEW_LSR_LOADING: 'OSM_VIEW_LSR_LOADING',\r\n\r\n OSM_VIEW_STACK_DETAILS_SUCCESS: 'OSM_VIEW_STACK_DETAILS_SUCCESS',\r\n OSM_VIEW_STACK_DETAILS_FAILED: 'OSM_VIEW_STACK_DETAILS_FAILED',\r\n OSM_VIEW_STACK_DETAILS_LOADING: 'OSM_VIEW_STACK_DETAILS_LOADING',\r\n\r\n OSM_LD_DOWNLOAD_LOADING: 'OSM_LD_DOWNLOAD_LOADING',\r\n OSM_LD_DOWNLOAD_SUCCESS: 'OSM_LD_DOWNLOAD_SUCCESS',\r\n OSM_LD_DOWNLOAD_FAILED: 'OSM_LD_DOWNLOAD_FAILED',\r\n OSM_LD_DOWNLOAD_RESET: \"OSM_LD_DOWNLOAD_RESET\"\r\n}","import { chartsConstants } from \"../constants\";\r\nimport fetch from \"./serviceHelpers\";\r\nimport { endpoints } from \"helpers\";\r\n// import { mockGuardrailsDetails } from \"components/dummydata/mock\";\r\n\r\nconst getChartsService = variables => dispatch => {\r\n dispatch({\r\n type: chartsConstants.LOADING,\r\n payload: true,\r\n variables\r\n });\r\n const { body, } = variables;\r\n\r\n return fetch(endpoints.charts, {\r\n method: \"POST\",\r\n body: body,\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n return d.json()\r\n }\r\n dispatch({\r\n type: chartsConstants.LOADING,\r\n payload: false,\r\n variables\r\n });\r\n dispatch({\r\n type: chartsConstants.CHART_DATA_FETCH_FAILED,\r\n payload: null,\r\n error: {},\r\n variables\r\n });\r\n })\r\n .then(d => {\r\n dispatch({\r\n type: chartsConstants.CHART_DATA_FETCH_SUCCESS,\r\n payload: d,\r\n variables\r\n\r\n });\r\n dispatch({\r\n type: chartsConstants.LOADING,\r\n payload: false,\r\n variables\r\n })\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: chartsConstants.LOADING,\r\n payload: false,\r\n variables\r\n });\r\n dispatch({\r\n type: chartsConstants.CHART_DATA_FETCH_FAILED,\r\n payload: [],\r\n error: err,\r\n variables\r\n });\r\n })\r\n}\r\n\r\nconst getGuardrailsService = (variables, type) => dispatch => {\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_LOADING,\r\n payload: true,\r\n variables\r\n });\r\n const { body } = variables;\r\n const endpoint = type === \"inbound\" ? \r\n endpoints.guardrails.siteInboundData :\r\n endpoints.guardrails.siteData;\r\n\r\n return fetch(`${endpoint}?siteNum=${body.siteNum}`, {\r\n method: \"GET\",\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n return d.json()\r\n }\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_LOADING,\r\n payload: false,\r\n variables\r\n });\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_DATA_FETCH_FAILED,\r\n payload: null,\r\n error: {},\r\n variables\r\n });\r\n })\r\n .then(d => {\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_DATA_FETCH_SUCCESS,\r\n payload: d,\r\n variables\r\n\r\n });\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_LOADING,\r\n payload: false,\r\n variables\r\n })\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_LOADING,\r\n payload: false,\r\n variables\r\n });\r\n dispatch({\r\n type: chartsConstants.GUARDRAIL_DATA_FETCH_FAILED,\r\n payload: [],\r\n error: err,\r\n variables\r\n });\r\n })\r\n}\r\n\r\nexport { getChartsService, getGuardrailsService };","const { REACT_APP_ENV, REACT_APP_API_BASE_PATH, REACT_APP_GMAPS_KEY, REACT_APP_OKTA_CLIENT_ID, REACT_APP_OKTA_ISSUER, REACT_APP_CONFIG } = process.env;\r\n\r\nconst config = {\r\n env: REACT_APP_ENV || \"local\",\r\n api_base_path: REACT_APP_API_BASE_PATH ,\r\n app_config_string: REACT_APP_CONFIG, \r\n maps: {\r\n key: REACT_APP_GMAPS_KEY || null\r\n },\r\n okta: {\r\n CLIENT_ID: REACT_APP_OKTA_CLIENT_ID,\r\n ISSUER: REACT_APP_OKTA_ISSUER\r\n }\r\n};\r\n\r\n\r\nexport default config;","module.exports = __webpack_public_path__ + \"static/media/table-view.4f1498a3.svg\";","\r\nimport { osmConstants } from \"../constants\"\r\nimport { endpoints, sortOrder } from \"helpers\";\r\nimport fetch from \"./serviceHelpers\";\r\n\r\nconst getOSMViews = () => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(`${endpoints.osm.getviews}?appName=OSM`, {\r\n method: \"GET\",\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n const layout = d?.layouts?.[0];\r\n let views = [\r\n ...layout?.privateViews,\r\n ...layout?.publicViews?.map(view => ({ ...view, public: true }))\r\n ];\r\n views = sortOrder({\r\n data: views,\r\n order: layout?.viewOrder?.map(d => d.id),\r\n key: \"id\"\r\n }).map((d, i) => {\r\n return {\r\n ...(layout?.viewOrder?.[i]),\r\n ...d,\r\n isFav: layout.viewDetail.id === d.id\r\n }\r\n });\r\n\r\n dispatch({\r\n type: osmConstants.FETCH_OSM_VIEWS_SUCCESS,\r\n payload: {\r\n views,\r\n viewOrder: layout.viewOrder,\r\n active: layout?.viewDetail,\r\n loading: false\r\n }\r\n });\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.FETCH_OSM_VIEWS_FAILED,\r\n payload: {\r\n loading: false\r\n }\r\n });\r\n })\r\n}\r\n\r\nconst getOSMView = (viewid) => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n return fetch(`${endpoints.osm.getview}?tableName=OSM&viewID=${viewid}`, {\r\n method: \"GET\",\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: osmConstants.GET_OSM_VIEW_SUCCESS,\r\n payload: {\r\n loading: false,\r\n active: d\r\n }\r\n });\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.GET_OSM_VIEW_FAILED,\r\n payload: {\r\n loading: false,\r\n active: null\r\n }\r\n });\r\n })\r\n}\r\n\r\nconst hideOSMView = (viewid, hide) => dispatch => {\r\n dispatch({\r\n type: osmConstants.HIDE_OSM_VIEW,\r\n payload: viewid,\r\n hide\r\n });\r\n}\r\n\r\nconst showHideAllOSMViews = (showall = true) => dispatch => {\r\n dispatch({\r\n type: osmConstants.SHOW_ALL_HIDE_ALL_OSM_VIEWS,\r\n payload: showall,\r\n });\r\n}\r\n\r\nconst activateOSMView = (view) => dispatch => {\r\n dispatch({\r\n type: osmConstants.ACTIVATE_OSM_TAB,\r\n payload: view\r\n });\r\n}\r\n\r\nconst updatedOSMView = (view) => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n return fetch(`${endpoints.osm.updateviews}?tableName=OSM`, {\r\n method: \"PUT\",\r\n body: {\r\n ...view,\r\n tableName: \"OSM\"\r\n },\r\n })\r\n .then(d => {\r\n if (d?.status === 200) {\r\n dispatch({\r\n type: osmConstants.UPDATE_OSM_VIEW_SUCCESS,\r\n payload: {\r\n view,\r\n status: {\r\n status: \"success\",\r\n message: \"View Created/Updated Successfully\"\r\n }\r\n }\r\n });\r\n } else {\r\n dispatch({\r\n type: osmConstants.UPDATE_OSM_VIEW_FAILED,\r\n payload: {\r\n view: null,\r\n status: {\r\n status: \"error\",\r\n message: \"View Creation/Updatation Failed\"\r\n }\r\n }\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.UPDATE_OSM_VIEW_FAILED,\r\n payload: {\r\n view: null,\r\n status: {\r\n status: \"error\",\r\n message: \"View Update Failed\"\r\n }\r\n }\r\n });\r\n })\r\n}\r\n\r\nconst favoriteOSMView = (viewid) => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n return fetch(`${endpoints.osm.favView}?tableName=OSM`, {\r\n method: \"PUT\",\r\n body: {\r\n id: viewid,\r\n tableName: \"OSM\"\r\n },\r\n })\r\n .then(d => {\r\n if (d?.status === 200) {\r\n dispatch({\r\n type: osmConstants.FAV_OSM_VIEW_SUCCESS,\r\n payload: viewid\r\n });\r\n } else {\r\n dispatch({\r\n type: osmConstants.FAV_OSM_VIEW_FAILED,\r\n payload: null\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.FAV_OSM_VIEW_FAILED,\r\n payload: null\r\n });\r\n })\r\n}\r\n\r\nconst deleteOSMView = (viewid) => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n return fetch(`${endpoints.osm.deleteviews}?tableName=OSM&viewID=${viewid}`, {\r\n method: \"DELETE\",\r\n })\r\n .then(d => {\r\n if (d?.status === 200) {\r\n dispatch({\r\n type: osmConstants.DELETE_OSM_VIEW_SUCCESS,\r\n payload: {\r\n id: viewid,\r\n status: {\r\n status: \"success\",\r\n message: \"View Deleted Successfully\"\r\n }\r\n }\r\n });\r\n } else {\r\n dispatch({\r\n type: osmConstants.DELETE_OSM_VIEW_FAILED,\r\n payload: {\r\n id: null,\r\n status: {\r\n status: \"error\",\r\n message: \"View Deletion Failed\"\r\n }\r\n }\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.DELETE_OSM_VIEW_FAILED,\r\n payload: {\r\n id: null,\r\n status: {\r\n status: \"error\",\r\n message: \"View Deletion Failed\"\r\n }\r\n }\r\n });\r\n })\r\n}\r\n\r\nconst updateOSMViewOrder = (views) => dispatch => {\r\n dispatch({\r\n type: osmConstants.OSM_LOADING,\r\n payload: true\r\n });\r\n return fetch(`${endpoints.osm.viewOrder}?tableName=OSM`, {\r\n method: \"PUT\",\r\n body: views\r\n })\r\n .then(d => {\r\n if (d?.status === 200) {\r\n dispatch({\r\n type: osmConstants.UPDATE_VIEW_ORDER_SUCCESS,\r\n payload: {\r\n views,\r\n status: {\r\n status: \"success\",\r\n message: \"View Created/Updated Successfully\"\r\n }\r\n }\r\n });\r\n } else {\r\n dispatch({\r\n type: osmConstants.UPDATE_VIEW_ORDER_FAILED,\r\n payload: {\r\n views,\r\n status: {\r\n status: \"error\",\r\n message: \"View Create/Update Failed\"\r\n }\r\n }\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: osmConstants.UPDATE_VIEW_ORDER_FAILED,\r\n payload: {\r\n views,\r\n status: {\r\n status: \"error\",\r\n message: \"View Update Failed\"\r\n }\r\n }\r\n });\r\n })\r\n}\r\n\r\nconst resetViewStatus = () => dispatch => {\r\n dispatch({\r\n type: osmConstants.RESET_OSM_STATUS,\r\n payload: null\r\n });\r\n}\r\n\r\nexport {\r\n getOSMViews,\r\n getOSMView,\r\n updatedOSMView,\r\n deleteOSMView,\r\n activateOSMView,\r\n hideOSMView,\r\n showHideAllOSMViews,\r\n favoriteOSMView,\r\n updateOSMViewOrder,\r\n resetViewStatus\r\n}\r\n","import React from \"react\";\r\nimport {\r\n useLocation,\r\n useHistory,\r\n generatePath,\r\n useRouteMatch,\r\n useParams\r\n} from \"react-router-dom\";\r\nimport qs from 'query-string';\r\nimport { isJsonParsable } from \"helpers\";\r\nimport { businessUnits } from \"configs/appConstants\";\r\nimport { isEmpty } from \"lodash\";\r\n\r\nexport const useQuery = () => {\r\n const { search } = useLocation();\r\n return React.useMemo(() => new URLSearchParams(search), [search]);\r\n}\r\n\r\nconst useSetQuery = () => {\r\n const location = useLocation();\r\n const history = useHistory();\r\n const match = useRouteMatch();\r\n const { tab } = useParams();\r\n const queryParams = qs.parse(location.search);\r\n const parsedParams = {};\r\n\r\n Object.keys(queryParams).map(d => {\r\n parsedParams[d] = isJsonParsable(queryParams[d]) || queryParams[d];\r\n if (d === \"BU\") {\r\n parsedParams[d] = isJsonParsable(queryParams[d]) || businessUnits\r\n }\r\n return d;\r\n })\r\n\r\n const setParams = ({ key, value }, customTab) => {\r\n history.push({\r\n ...location,\r\n pathname: generatePath(match.path, { tab: customTab || tab }),\r\n search: qs.stringify({\r\n ...queryParams,\r\n [key]: typeof value === \"object\" ? JSON.stringify(value) : value\r\n })\r\n });\r\n }\r\n\r\n return [parsedParams, setParams];\r\n}\r\n\r\nexport const useViewBy = () => {\r\n const location = useLocation();\r\n const [parsedParams] = useSetQuery();\r\n const match = useRouteMatch();\r\n const history = useHistory();\r\n const queryParams = qs.parse(location.search);\r\n\r\n const setViewBy = (viewby) => {\r\n let options = parsedParams[viewby === \"Sofc\" ? \"sofcNSG\" : viewby] || [];\r\n let newtab = options.length > 1 ? \"myselections\" : options.length === 1 ? options[0] : \"network\";\r\n\r\n history.push({\r\n ...location,\r\n pathname: generatePath(match.path, { tab: newtab }),\r\n search: qs.stringify({\r\n ...queryParams,\r\n viewby: viewby || \"sites\"\r\n })\r\n });\r\n }\r\n return setViewBy;\r\n}\r\n\r\nexport const useMultiSetQuery = () => {\r\n const location = useLocation();\r\n const history = useHistory();\r\n\r\n const queryParams = qs.parse(location.search);\r\n\r\n const setMultiParams = (params, pathname=undefined) => {\r\n history.push({\r\n ...location,\r\n pathname: pathname || location.pathname,\r\n search: qs.stringify({\r\n ...queryParams,\r\n ...params\r\n })\r\n });\r\n }\r\n\r\n return setMultiParams;\r\n}\r\n\r\nexport const useUpdateTabWitOptions = () => {\r\n const location = useLocation();\r\n const match = useRouteMatch();\r\n const history = useHistory();\r\n\r\n // const [parsedParams] = useSetQuery();\r\n const queryParams = qs.parse(location.search);\r\n // const { tab } = useParams();\r\n // const { viewby } = parsedParams;\r\n\r\n // const generateTab = ({ value }) => {\r\n // if (value?.length === 1) {\r\n // return value[0];\r\n // } else if (value?.length === 0) {\r\n // return \"network\";\r\n // }\r\n // return \"network\";\r\n // }\r\n\r\n // const findActiveTab = (value, viewby) => {\r\n // switch (viewby) {\r\n // case \"sites\": {\r\n // return generateTab({ optionsKey: \"sites\", value });\r\n // }\r\n // case \"Cust\": {\r\n // return generateTab({ optionsKey: \"Cust\", value });\r\n // }\r\n // case \"Sofc\": {\r\n // return generateTab({ optionsKey: \"sofcNSG\", value });\r\n // }\r\n // default: {\r\n // return \"network\";\r\n // }\r\n // }\r\n // }\r\n\r\n const updateTabWitOptions = ({ key, value }, otherParams = {}, sites=[], cust=[], sofc=[]) => {\r\n let newtab = (isEmpty(sites) && isEmpty(cust) && isEmpty(sofc)) ? \"network\" : \"myselections\";\r\n // if (value?.length > 0) {\r\n // newtab = \"myselections\";\r\n // } else {\r\n // newtab = findActiveTab(value, viewby)\r\n // }\r\n \r\n history.push({\r\n ...location,\r\n pathname: generatePath(match.path, { tab: newtab }),\r\n search: qs.stringify({\r\n ...queryParams,\r\n [key]: typeof value === \"object\" ? JSON.stringify(value) : value,\r\n ...otherParams\r\n })\r\n });\r\n }\r\n\r\n return updateTabWitOptions;\r\n}\r\n\r\nexport default useSetQuery;","import { flatten } from \"lodash\";\r\nimport { downloadConstants } from \"../constants\";\r\nimport fetch from \"./serviceHelpers\";\r\n\r\n\r\nexport const downloadService = variables => async dispatch => {\r\n const { config, type, subtype, process, detailsProcess, detailsColumns, itemInfoRequired = false, osm = false, emea = false, lao = false } = variables;\r\n\r\n const { totalRecords, body, url, columns } = config || {};\r\n\r\n dispatch({\r\n type: downloadConstants.LOADING,\r\n payload: true,\r\n page: type,\r\n subtype,\r\n process,\r\n columns: columns || [],\r\n detailsProcess,\r\n detailsColumns\r\n });\r\n\r\n const pageSize = 1000;\r\n let totalPages = Math.ceil((totalRecords || 0) / pageSize);\r\n const allData = [];\r\n\r\n try {\r\n for (let i = 1; i <= totalPages; i++) {\r\n let endpoint = `${url}?pageSize=${pageSize}&pageNum=${i}`;\r\n const response = await fetch(endpoint, {\r\n method: \"post\",\r\n body: {\r\n ...body,\r\n itemInfoRequired\r\n }\r\n })\r\n const result = await response?.json();\r\n if (osm && response.ok && result?.shipments) {\r\n allData.push([...flatten(result?.shipments)]);\r\n } else if (emea && response.ok && result?.items) {\r\n allData.push([...flatten(result?.items)]);\r\n } else if (lao && response.ok && result?.orders) {\r\n let tempOrders = result?.orders?.map(d => {\r\n let obj = [];\r\n if (Object.keys(d)?.includes(\"orderItems\") && d.orderItems?.length > 0 && itemInfoRequired) {\r\n d.orderItems.map(orderItem => {\r\n obj.push({ ...d, ...orderItem })\r\n });\r\n } else {\r\n obj.push(d)\r\n }\r\n return obj;\r\n })\r\n allData.push([...flatten(tempOrders)]);\r\n } else if (response.ok && result?.orders) {\r\n let tempOrders = result?.orders?.map(d => {\r\n let obj = [];\r\n if (Object.keys(d)?.includes(\"orderItems\") && d.orderItems?.length > 0 && subtype !== \"transport\") {\r\n d.orderItems.map(orderItem => {\r\n obj.push({ ...d, ...orderItem })\r\n });\r\n } else {\r\n obj.push(d)\r\n }\r\n return obj;\r\n })\r\n allData.push([...flatten(tempOrders)]);\r\n } else {\r\n throw new Error({ message: \"Unable to download, Please try again\" })\r\n }\r\n }\r\n if (allData.length === totalPages) {\r\n let data = [];\r\n allData.map(item => {\r\n data = [...data, ...item];\r\n return item;\r\n });\r\n dispatch({\r\n type: downloadConstants.DOWNLOAD_SUCCESS,\r\n payload: data,\r\n page: type,\r\n subtype,\r\n itemInfoRequired\r\n });\r\n } else {\r\n throw new Error({ message: \"Unable to download, Please try again\" })\r\n }\r\n } catch (err) {\r\n dispatch({\r\n type: downloadConstants.DOWNLOAD_FAILURE,\r\n payload: null,\r\n page: type,\r\n subtype\r\n });\r\n }\r\n}\r\n\r\n\r\nexport const resetDownload = variables => dispatch => {\r\n const { type, subtype } = variables;\r\n dispatch({\r\n type: downloadConstants.DOWNLOAD_RESET,\r\n payload: {},\r\n page: type,\r\n subtype\r\n });\r\n}","import React from 'react';\r\nimport { generatePath, Link as RouterLink, useParams, useRouteMatch } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n AppBar, Toolbar, Box, Avatar,\r\n Badge, Typography, makeStyles, Button,\r\n IconButton\r\n} from '@material-ui/core';\r\nimport FeedbackIcon from '@material-ui/icons/Feedback';\r\nimport { withOktaAuth } from '@okta/okta-react';\r\nimport clsx from 'clsx';\r\nimport { get } from \"lodash\";\r\nimport { connect } from \"react-redux\";\r\nimport maestro_logo_dark from '../../assets/images/maestro_logo_dark.svg';\r\n// import new_logo_dark from '../../assets/images/new_logo_dark.svg';\r\nimport maestro_logo_light from '../../assets/images/maestro_logo_light.svg';\r\nimport LinearLoader from \"../../components/common/LinearLoader\";\r\nimport { addUser } from \"../../reduxLib/services\";\r\nimport AppDrawer from \"../../components/common/AppDrawer\";\r\nimport FeedBack from \"../../components/common/FeedBack\";\r\nimport TranslationDropDown from \"../../components/translation/TranslationDropDown\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport MoreIcon from '@material-ui/icons/MoreVert';\r\nimport MobileMenuProfile from './MobileMenuProfile';\r\nimport PersonAddIcon from '@material-ui/icons/PersonAdd';\r\nimport ReportOutlinedIcon from '@material-ui/icons/ReportOutlined';\r\nimport { useRouteContext } from 'context/RouteContext';\r\nimport { appbarStyles } from \"theme\";\r\n\r\nconst useStyles = makeStyles(appbarStyles);\r\n\r\nconst useStyles2 = makeStyles(theme => ({\r\n logo: {\r\n height: '62px',\r\n width: '326px',\r\n // margin: `${theme.spacing(1)}px 0px`,\r\n background: `url(${theme.type === \"dark\" ? maestro_logo_dark : maestro_logo_light}) no-repeat`,\r\n backgroundSize: '95%',\r\n [theme.breakpoints.down('sm')]: {\r\n height: '40px',\r\n width: '220px',\r\n }\r\n },\r\n}));\r\n\r\nconst Topbar = props => {\r\n const {\r\n loading, favsLoading,\r\n user, addUser, authService,\r\n stopfavload, buloading,\r\n setDetails, pageDetails,\r\n showHamburgerMenu,\r\n guardrailsRequests, isAdmin,\r\n stoploaders\r\n } = props;\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const { t } = useTranslation();\r\n const username = user ? `${user.given_name} ${user.family_name}` : \" \";\r\n const anchorRef = React.useRef(null);\r\n const region = 'NA';\r\n\r\n global.authService = authService;\r\n\r\n React.useEffect(() => {\r\n if (!user) {\r\n authService.getUser().then(d => addUser(d)).catch(err => addUser(null));\r\n } else {\r\n window.FS.identify(user.sub, {\r\n displayName: username\r\n });\r\n }\r\n }, [addUser, user, authService]);\r\n\r\n const [openFeedback, setOpenFeedback] = React.useState(false);\r\n const [openMobileMenu, setOpenMobileMenu] = React.useState(false);\r\n\r\n const match = useRouteMatch();\r\n const { mainPath } = useRouteContext();\r\n\r\n const alertspath = React.useMemo(() => {\r\n const { page, showtabsy, type, tabletype } = match.params;\r\n return `${generatePath(mainPath, {\r\n ...match.params,\r\n page: page || \"home\",\r\n type: type || \"network\",\r\n showtabsy: showtabsy|| \"locations\",\r\n })}/alerts`\r\n }, [match.params]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n showHamburgerMenu &&\r\n \r\n
\r\n \r\n {isAdmin &&
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n
\r\n \r\n {\r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n {\r\n `${username.split(\" \")[0].charAt(0)}${username.split(\" \")[1].charAt(0)}`\r\n } \r\n \r\n \r\n {username} \r\n \r\n
\r\n setOpenFeedback(!openFeedback)} >\r\n {t(\"feedback\")} \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {\r\n `${username.split(\" \")[0].charAt(0)}${username.split(\" \")[1].charAt(0)}`\r\n } \r\n \r\n \r\n \r\n
setOpenMobileMenu(!openMobileMenu)}\r\n aria-label=\"show more\"\r\n aria-haspopup=\"true\"\r\n color=\"primary\"\r\n ref={anchorRef}\r\n >\r\n \r\n \r\n
setOpenFeedback(!openFeedback)}\r\n username={username}\r\n anchorRef={anchorRef}\r\n region={region}\r\n />\r\n {!stoploaders && showHamburgerMenu && (loading || favsLoading || stopfavload || buloading) && \r\n \r\n {message}\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Snack;","import { getLocationsConstants } from \"../constants\";\r\nimport fetch from \"./serviceHelpers\";\r\nimport { endpoints } from \"helpers\";\r\nimport {salesOrgsbyBU, distributionChannel} from \"../../configs/appConstants\"\r\n\r\n\r\nexport const getLocationsService = () => dispatch => {\r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(endpoints.globalFilters.locations, {})\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: getLocationsConstants.LOCATION_FETCH_SUCCESS,\r\n payload: d\r\n });\r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: false\r\n })\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: false\r\n });\r\n dispatch({\r\n type: getLocationsConstants.LOCATION_FETCH_FAILED,\r\n payload: err\r\n });\r\n })\r\n}\r\n\r\nexport const getPerformanceMapService = variables => dispatch => {\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(endpoints.globalFilters.sitePerformance, {\r\n method: \"POST\",\r\n body: variables,\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: getLocationsConstants.PERFORMANCE_FETCH_SUCCESS,\r\n payload: d\r\n });\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: false\r\n })\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: false\r\n });\r\n dispatch({\r\n type: getLocationsConstants.PERFORMANCE_FETCH_FAILED,\r\n payload: []\r\n });\r\n })\r\n}\r\n\r\nexport const getCustomersService = variables => dispatch => {\r\n \r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(endpoints.globalFilters.customerSearch, {\r\n method: \"POST\",\r\n body: variables,\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n\r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: false\r\n })\r\n dispatch({\r\n type: getLocationsConstants.CUSTOMER_FETCH_SUCCESS,\r\n payload: d\r\n });\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: getLocationsConstants.LOADING,\r\n payload: false\r\n });\r\n dispatch({\r\n type: getLocationsConstants.CUSTOMER_FETCH_FAILED,\r\n payload: []\r\n });\r\n })\r\n}\r\n\r\nexport const getSalesOfficeService = () => dispatch => {\r\n\r\n //Fetching All sales offices on page load\r\n\r\n const body = {\r\n salesOrg: salesOrgsbyBU.reduce((allSalesOrgs, {salesOrgs}) => [...allSalesOrgs, ...salesOrgs.map(({value}) => value)],[]),\r\n distributionChannel:distributionChannel.map(({value}) => value),\r\n }\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(endpoints.globalFilters.saleOfficeSearch, {\r\n method: \"POST\",\r\n body\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: getLocationsConstants.SALESOFC_FETCH_SUCCESS,\r\n payload: d\r\n });\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: false\r\n })\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: getLocationsConstants.PEFRORMANCE_LOADING,\r\n payload: false\r\n });\r\n dispatch({\r\n type: getLocationsConstants.SALESOFC_FETCH_FAILED,\r\n payload: []\r\n });\r\n })\r\n}\r\n\r\n","import React from 'react';\r\nimport { makeStyles, Button } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n marginLeft: theme.spacing(2),\r\n marginRight: theme.spacing(2),\r\n // border: `1px solid ${theme.palette.border}`,\r\n textTransform: \"capitalize\",\r\n '&:hover, &:active': {\r\n backgroundColor: theme.palette?.primary?.active,\r\n border: `1px solid ${theme.palette?.chip?.borderActive}`\r\n }\r\n }\r\n}));\r\n\r\nconst KCButton = (props) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n {props.children} \r\n )\r\n};\r\n\r\nexport default KCButton;","module.exports = __webpack_public_path__ + \"static/media/maestro_logo_dark.7fa9ad58.svg\";","module.exports = __webpack_public_path__ + \"static/media/maestro_logo_light.a7fc037f.svg\";","module.exports = __webpack_public_path__ + \"static/media/home_dark.0b62adf1.svg\";","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Box, Typography, TextField, Drawer } from '@material-ui/core';\r\nimport { HighlightOff as CloseIcon, SentimentVeryDissatisfied as Unhappy, SentimentVerySatisfied as Happy } from '@material-ui/icons';\r\nimport KCButton from 'components/common/Button';\r\nimport clsx from \"clsx\";\r\nimport { saveFeedback, resetFeedback } from \"reduxLib/services\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport Snack from \"./Helpers/Snack\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nconst drawerWidth = 440;\r\nconst topSpacing = 10;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n drawerPaper: {\r\n width: drawerWidth,\r\n [theme.breakpoints.down('sm')]: {\r\n width: '100%',\r\n },\r\n background: theme.palette.secondary.base,\r\n borderLeft: `1px solid ${theme.palette.border} !important`\r\n },\r\n drawerContainer: {\r\n margin: theme.spacing(2),\r\n marginTop: theme.spacing(topSpacing),\r\n overflow: 'auto',\r\n height: '100%'\r\n },\r\n closeicon: {\r\n position: \"absolute\",\r\n right: theme.spacing(2),\r\n top: theme.spacing(topSpacing),\r\n cursor: \"pointer\",\r\n fontSize: theme.spacing(3),\r\n color: theme.palette.text.primary,\r\n '&:hover': {\r\n color: theme.palette.text.secondary\r\n }\r\n },\r\n icons: {\r\n paddingTop: theme.spacing(1),\r\n paddingBottom: theme.spacing(1),\r\n marginBottom: theme.spacing(1)\r\n },\r\n helpertext: {\r\n marginTop: theme.spacing(3),\r\n color: theme.palette.text.primary\r\n },\r\n textarea: {\r\n width: '100%',\r\n '& .MuiInputBase-input' : {\r\n color: theme.palette.text.primary\r\n }\r\n },\r\n submit: {\r\n bottom: 0,\r\n marginTop: theme.spacing(2),\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n color: theme.palette.text.primary,\r\n textTransform: 'capitalize',\r\n border: `1px solid ${theme.palette.text.primary}`,\r\n '&>.MuiButton-label': {\r\n pointerEvents: 'none'\r\n },\r\n '&:hover': {\r\n border: `1px solid ${theme.palette.text.secondary}`\r\n }\r\n },\r\n icon: {\r\n fontSize: theme.spacing(6),\r\n marginRight: theme.spacing(1),\r\n cursor: 'pointer',\r\n color: theme.palette.text.primary,\r\n '&:hover': {\r\n background: theme.palette.secondary.secondary,\r\n padding: theme.spacing(0.5),\r\n borderRadius: '50%',\r\n }\r\n },\r\n iconactive: {\r\n background: theme.palette.secondary.secondary,\r\n padding: theme.spacing(0.5),\r\n borderRadius: '50%'\r\n },\r\n smalltext: {\r\n fontSize: theme.spacing(1.3),\r\n color: theme.palette.text.primary\r\n },\r\n submiterror: {\r\n fontSize: theme.spacing(1.3),\r\n color: theme.palette.legendColors.criticalRed\r\n },\r\n heading: {\r\n fontSize: theme.spacing(2.5),\r\n color: theme.palette.text.primary\r\n }\r\n}));\r\n\r\n\r\nconst FeedBack = ({ openFeedback, openAction }) => {\r\n\r\n const classes = useStyles();\r\n const [state, setState] = React.useState(false);\r\n\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation();\r\n const { feedback_status, feedback_submit_loading: loading } = useSelector(({ feedbackform }) => feedbackform);\r\n\r\n const [values, setValues] = React.useState({\r\n happy: null,\r\n feedback: null,\r\n submitted: false\r\n });\r\n\r\n const [snack, setSnack] = React.useState({\r\n open: false,\r\n severity: \"info\",\r\n message: null\r\n })\r\n\r\n const handleClose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n setSnack({\r\n ...snack,\r\n open: false\r\n });\r\n };\r\n\r\n React.useEffect(() => {\r\n if (!loading && feedback_status) {\r\n setSnack({\r\n ...snack,\r\n open: true,\r\n severity: feedback_status === \"success\" ? \"info\" : \"error\",\r\n message: feedback_status === \"success\" ? t(\"feedback_sucessfully_posted\") : t(\"something_went_wrong_please_try_again\")\r\n });\r\n\r\n dispatch(resetFeedback());\r\n if (feedback_status === 'success') {\r\n setValues({\r\n happy: null,\r\n feedback: '',\r\n submitted: false\r\n });\r\n openAction(!state);\r\n }\r\n }\r\n }, [feedback_status, loading]);\r\n\r\n React.useEffect(() => {\r\n setState(openFeedback);\r\n }, [openFeedback]);\r\n\r\n const submitFeedback = (e) => {\r\n e.preventDefault();\r\n setValues({ ...values, submitted: true });\r\n if (values.happy === null) return null;\r\n if (values.happy !== null && values.feedback) {\r\n dispatch(saveFeedback({ isHappy: values.happy, feedbackMessage: values.feedback }));\r\n } else {\r\n dispatch(saveFeedback({ isHappy: values.happy }));\r\n }\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\n\r\nexport default FeedBack","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Popper from '@material-ui/core/Popper';\r\nimport MenuList from '@material-ui/core/MenuList';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Box from '@material-ui/core/Box';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport PublicIcon from '@material-ui/icons/Public';\r\nimport FeedbackIcon from '@material-ui/icons/Feedback';\r\nimport TranslationDropDown from \"../../components/translation/TranslationDropDown\";\r\nimport CurrencyDropDown from \"components/EMEA/CurrencyDropDown\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n popper: {\r\n display: 'flex',\r\n backgroundColor: theme.palette.extra?.mobileProfile,\r\n borderRight: 'none',\r\n top: theme.spacing(8),\r\n zIndex: 100\r\n },\r\n paper: {\r\n marginRight: theme.spacing(2),\r\n },\r\n center: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n padding: theme.spacing(2)\r\n },\r\n avatar: {\r\n background: 'transparent',\r\n border: `2px solid ${theme.palette.white}`,\r\n color: theme.palette.white,\r\n marginRight: theme.spacing(.5),\r\n },\r\n avatarText: {\r\n color: theme.palette.white,\r\n },\r\n common: {\r\n marginRight: theme.spacing(1.5),\r\n color: theme.palette.white\r\n }\r\n}));\r\n\r\nexport default function MenuListComposition(props) {\r\n const {\r\n anchorRef, open, setOpen,\r\n setOpenFeedback,\r\n username,\r\n region\r\n } = props;\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n\r\n\r\n function handleListKeyDown(event) {\r\n if (event.key === 'Tab') {\r\n event.preventDefault();\r\n setOpen(false);\r\n }\r\n }\r\n\r\n const prevOpen = React.useRef(open);\r\n React.useEffect(() => {\r\n if (prevOpen.current === true && open === false) {\r\n anchorRef.current.focus();\r\n }\r\n\r\n prevOpen.current = open;\r\n }, [open]);\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n","module.exports = __webpack_public_path__ + \"static/media/pricetag.c1f2e5ab.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc.ee0f7095.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill.e8acc6bd.svg\";","module.exports = __webpack_public_path__ + \"static/media/next_arrow_dark.1179ba03.svg\";","module.exports = __webpack_public_path__ + \"static/media/prev_arrow_dark.1d1622ef.svg\";","module.exports = __webpack_public_path__ + \"static/media/submit_simulation.60f0ad68.svg\";","module.exports = __webpack_public_path__ + \"static/media/dark-filter-icon.fe5333ee.svg\";","module.exports = __webpack_public_path__ + \"static/media/new_view.141549e7.svg\";","module.exports = __webpack_public_path__ + \"static/media/table-view-dark.a63562d3.svg\";","module.exports = __webpack_public_path__ + \"static/media/rotate-stack.b846a879.svg\";","const currencyMappings = [\r\n {\r\n symbol: \"AED\",\r\n name: \"UAE Dirham\"\r\n },\r\n {\r\n symbol: \"BHD\",\r\n name: \"Bahraini Dinar\"\r\n },\r\n {\r\n symbol: \"CHF\",\r\n name: \"Swiss Franc\"\r\n },\r\n {\r\n symbol: \"CZK\",\r\n name: \"Czech Koruna\"\r\n },\r\n {\r\n symbol: \"DKK\",\r\n name: \"Danish Krone\"\r\n },\r\n {\r\n symbol: \"EUR\",\r\n name: \"Euro\"\r\n },\r\n {\r\n symbol: \"GBP\",\r\n name: \"Pound Sterling\"\r\n },\r\n {\r\n symbol: \"HUF\",\r\n name: \"Hungarian Forint\"\r\n },\r\n {\r\n symbol: \"KES\",\r\n name: \"Kenyan Shillings\"\r\n },\r\n {\r\n symbol: \"KZT\",\r\n name: \"Kazakhstani Tenge\"\r\n },\r\n {\r\n symbol: \"MAD\",\r\n name: \"Moroccan Dirham\"\r\n },\r\n {\r\n symbol: \"NGN\",\r\n name: \"Nigerian Naira\"\r\n },\r\n {\r\n symbol: \"PLN\",\r\n name: \"Polish Zloty\"\r\n },\r\n {\r\n symbol: \"RUB\",\r\n name: \"Russian Ruble\"\r\n },\r\n {\r\n symbol: \"SAR\",\r\n name: \"Saudi Riyal\"\r\n },\r\n {\r\n symbol: \"UAH\",\r\n name: \"Ukrainian hryvnia\"\r\n },\r\n {\r\n symbol: \"USD\",\r\n name: \"US Dollar\"\r\n },\r\n {\r\n symbol: \"ZAR\",\r\n name: \"South African Rand\"\r\n }\r\n];\r\n\r\nexport default currencyMappings;","import React, {useState} from 'react';\r\nimport {\r\n OutlinedInput,\r\n MenuItem,\r\n FormControl,\r\n ListItemText,\r\n Select,\r\n Radio,\r\n} from '@material-ui/core';\r\nimport { useTranslation } from 'react-i18next';\r\nimport useSetQuery from \"customHooks/useQuery\";\r\nimport { useStyles, MenuProps } from 'components/translation/TranslationDropDown';\r\nimport currencyMappings from 'theme/currencies';\r\n\r\nexport default function CurrencyDropDown() {\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n const [,setParams] = useSetQuery();\r\n\r\n const [currency, setCurrency] = useState(() => {\r\n return localStorage.getItem(\"currency\") || \"USD\";\r\n });\r\n\r\n const handleChange = (e) => {\r\n setCurrency(e.target.value)\r\n localStorage.setItem(\"currency\", e.target.value);\r\n setParams({ key: \"currency\", value: e.target.value })\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {t(\"select_currency\")}\r\n \r\n {currencyMappings.map((item) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import { tableoptions } from \"./tableStyleOverride\"\r\nimport { endpoints } from \"../configs/endpoints\"\r\nimport * as _ from \"lodash\";\r\nimport { v4 as uuid } from 'uuid';\r\nimport { startCase, get, uniq, flatten, sortBy, isEmpty, isArray, isEqual, find, isObject } from \"lodash\";\r\nimport { appTheme } from \"../theme\";\r\nimport { performanceConstants } from \"components/common/PerformanceFilters\"\r\nimport moment from \"moment-timezone\";\r\n\r\n\r\n// const multiSearchKeys = [\r\n// 'searchStringList', \r\n// 'vendorNumberList', \r\n// 'vendorPlantList',\r\n// 'finalOrderDestinationIdList', \r\n// 'exportContainerIdList', \r\n// 'materialNumList', \r\n// 'orderOriginCountryList',\r\n// 'finalOrderDestinationCountryList',\r\n// 'exportBillOfLadingList',\r\n// 'materialTypeList',\r\n\r\n// // Import\r\n// 'orderDestinationIdList',\r\n// // 'importContainerIdList',\r\n// 'materialNumList',\r\n// 'importOrderOriginCountryList',\r\n// 'importOrderDestinationCountryList',\r\n// 'importBillOfLadingList',\r\n// 'importShipmentModeList',\r\n// 'importCustomsChannelList'\r\n// ]\r\n\r\n\r\nconst calcPercentage = (a, b) => {\r\n let percent = ((Number(a) - Number(b)) / Number(a) * 100);\r\n if (!isNaN(percent) && isFinite(percent)) {\r\n return parseFloat(percent.toFixed(0))\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nconst generateDefaultData = (columns) => {\r\n let defaultData = {};\r\n columns.map(d => {\r\n defaultData[d.field] = \"-\";\r\n });\r\n return defaultData;\r\n}\r\n\r\nconst msToHMS = (ms) => {\r\n if (!isNaN(ms)) {\r\n const seconds = ms / 1000;\r\n const hours = parseFloat(seconds / 3600).toFixed(2);\r\n return `${hours} Hours`;\r\n } else {\r\n return \"-\"\r\n }\r\n}\r\n\r\nconst refreshTable = (tableRef) => {\r\n tableRef.current && tableRef.current.onQueryChange();\r\n}\r\n\r\nexport const sortOrder = ({ order, key, data }) => {\r\n return _.sortBy(data, (obj) => {\r\n return _.indexOf(order, obj[key]);\r\n });\r\n}\r\n\r\nconst generateTablebody = (filters, sites = null) => {\r\n let tablebody = {};\r\n try {\r\n Object.keys(filters).map(key => {\r\n const filter = filters[key];\r\n const checkvalues = [];\r\n const generic = [\"text\", \"radio\", \"date\", \"sites\", \"checkboxradio\", \"ordercheckbox\", \"textcheck\", \"daterange\", \"customdaterange\", \"numrange\"];\r\n\r\n if (generic.includes(filter.type)) {\r\n tablebody[key] = filter.data;\r\n if (filter.type === \"sites\") {\r\n\r\n const sitesFromFilter = filter.data || []\r\n const sitesFromFavorites = sites || []\r\n let commonSites = []\r\n\r\n if (sitesFromFavorites.length > 0) {\r\n commonSites = sitesFromFilter?.filter((site) => sitesFromFavorites.includes(site))\r\n }\r\n const consolidateFilters = sitesFromFavorites.length > 0 ? commonSites.length > 0 ? commonSites : sitesFromFavorites : sitesFromFilter;\r\n\r\n tablebody[key] = consolidateFilters.length > 0 ? consolidateFilters : null\r\n\r\n }\r\n }\r\n if (filter.type === \"checkbox\" || filter.type === \"ordercheckbox\") {\r\n filter.data.map(d => {\r\n if (d.checked) {\r\n checkvalues.push(d.value);\r\n }\r\n });\r\n tablebody[key] = checkvalues;\r\n }\r\n\r\n if (filter.type === \"checkboxradio\") {\r\n const defaultValue = filter.defaultValue === null ? null : {}\r\n let crValue = defaultValue;\r\n filter.data.map(d => {\r\n if (d.checked) {\r\n crValue = d.value;\r\n }\r\n });\r\n tablebody[key] = crValue;\r\n }\r\n });\r\n }\r\n catch (e) {\r\n tablebody = {};\r\n }\r\n\r\n return tablebody || {};\r\n}\r\n\r\nconst formatToSentenceCase = (inputString) => {\r\n const regexFunction = (string) => { return string.replace(/[a-z]/i, function (letter) { return letter.toUpperCase(); }).trim() }\r\n const splitString = inputString.toLowerCase().split(\" \").map((string) => {\r\n if (string === 'dc') {\r\n return string.toUpperCase();\r\n } else {\r\n return string.split('-').map(regexFunction).join('-')\r\n }\r\n });\r\n return splitString.join(\" \");\r\n}\r\n\r\nconst generateFilterLayoutTemplate = ({ viewName, filters = {}, columns = [], additional = {} }) => {\r\n return {\r\n id: uuid(),\r\n name: viewName ? viewName : `Untitled View`,\r\n default: false,\r\n filters,\r\n columns,\r\n ...additional\r\n }\r\n}\r\n\r\nconst findActive = ({ views, active }, hiddenids, urlViewId) => {\r\n let recentHidden = {};\r\n const viewsActive = views?.filter(d => !d.hidden).map(d => d.id);\r\n \r\n if (viewsActive?.includes(urlViewId)) {\r\n return views?.filter(d => d.id === urlViewId)[0]\r\n }\r\n\r\n const viewsHidden = views?.filter((d, i) => {\r\n if(d?.recent) recentHidden = {\r\n ...d,\r\n pos: i\r\n };\r\n return !d.hidden\r\n });\r\n if (!hiddenids?.includes(active?.id)) return active;\r\n\r\n if(recentHidden?.id) {\r\n let nextActive = null;\r\n let x = views?.some((d, i) => {\r\n if (i > recentHidden?.pos && !d?.hidden) {\r\n nextActive = d;\r\n }\r\n return (i > recentHidden?.pos && !d?.hidden)\r\n });\r\n if (nextActive) return nextActive;\r\n else return viewsHidden[0]\r\n }\r\n return viewsHidden[0]\r\n }\r\n\r\nconst getStatusData = (data, key = \"hours\") => {\r\n\r\n if (data[key] > 3) {\r\n return {\r\n ...data,\r\n raw_status: performanceConstants.HEALTHY,\r\n status: performanceConstants.HEALTHY,\r\n color: `${appTheme.palette.legendColors.healthyGreen}`\r\n }\r\n } else if (data[key] > 0 && data[key] <= 3) {\r\n return {\r\n ...data,\r\n raw_status: performanceConstants.MONITOR,\r\n status: performanceConstants.MONITOR, color: `${appTheme?.palette?.legendColors.risk}`\r\n }\r\n } else if (data[key] < 0 && data[key] > -6) {\r\n return {\r\n ...data,\r\n raw_status: performanceConstants.BEHIND,\r\n status: performanceConstants.BEHIND,\r\n color: `${appTheme.palette.legendColors.pink}`\r\n }\r\n } else if (data[key] <= -6) {\r\n return {\r\n ...data,\r\n raw_status: performanceConstants.CRITICAL,\r\n status: performanceConstants.CRITICAL,\r\n color: `${appTheme.palette.legendColors.criticalRed}`\r\n }\r\n } else\r\n return {\r\n ...data,\r\n raw_status: performanceConstants.NODATA,\r\n status: performanceConstants.NODATA,\r\n color: `${appTheme.palette.legendColors.greyLight}`\r\n }\r\n}\r\n\r\n\r\nconst capitalizeWord = (value) => startCase(value?.toLowerCase())\r\n\r\nconst getId = (obj, type, showSG = true) => {\r\n const datatype = obj[type];\r\n\r\n if (datatype === \"DC\" || datatype === \"MILL\") {\r\n return obj.siteNum\r\n }\r\n if (datatype === \"SALES_OFFICE\") {\r\n return `${obj.selectionType}_${obj.salesOrg}_${obj.distributionChannel}_${obj.salesOffice}_${showSG ? obj.salesGroup || '' : ''}`\r\n }\r\n if (datatype === \"CUST\") {\r\n return `${obj.selectionType}_${obj.salesOrg}_${obj.distributionChannel}_${obj.customerName}`\r\n }\r\n}\r\n\r\nconst getTabsData = (data, viewbyValues) => {\r\n const { name, type } = viewbyValues;\r\n const items = [];\r\n const tempData = data?.forEach(d => {\r\n if (\"salesGroup\" in d) {\r\n return d.salesGroup?.map(item => {\r\n if (item) {\r\n items.push({\r\n ...d,\r\n customUniqObjectId: getId(d, type, false),\r\n custom: {\r\n name: `${d[name]}${d?.salesOrg && `(${d.salesOrg}) `}${item || ''}`,\r\n id: getId({ ...d, salesGroup: item }, type),\r\n salesGroup: d.salesGroup\r\n },\r\n salesGroup: [item]\r\n })\r\n }\r\n })\r\n } else {\r\n return items.push({\r\n ...d,\r\n customUniqObjectId: getId(d, type, false),\r\n custom: {\r\n name: !d.customerName ? `${d[name]}${d?.salesOrg ? `(${d.salesOrg})` : ''}` : `${d.customerName}${d?.salesOrg ? `(${d.salesOrg})` : ''}`,\r\n id: getId(d, type, false)\r\n }\r\n })\r\n }\r\n });\r\n return items;\r\n}\r\n\r\n\r\nconst generateHeader = ({ selections, type, showTabsBy, item }) => {\r\n\r\n let siteNums = [];\r\n let customerOrSalesOffice = [];\r\n\r\n if (type === \"network\") {\r\n return {};\r\n }\r\n\r\n if (type === \"mylocation\") {\r\n siteNums = selections?.locations?.map(d => d?.siteNum);\r\n customerOrSalesOffice = selections?.customer;\r\n } else {\r\n if (showTabsBy === \"customer\") {\r\n siteNums = selections?.locations?.map(d => d?.siteNum);\r\n customerOrSalesOffice = [item]?.map(d => {\r\n delete d?.custom;\r\n delete d?.customUniqObjectId;\r\n return d;\r\n });\r\n } else {\r\n siteNums = [item]?.map(d => d?.siteNum);\r\n customerOrSalesOffice = selections?.customer;\r\n }\r\n }\r\n\r\n siteNums = (siteNums?.length > 0 && siteNums[0]) ? siteNums : null;\r\n customerOrSalesOffice = (customerOrSalesOffice?.length > 0 && customerOrSalesOffice[0]) ? customerOrSalesOffice : null;\r\n\r\n return {\r\n siteNums,\r\n customerOrSalesOffice\r\n }\r\n}\r\n\r\nconst defaultShowTabsBy = (state) => {\r\n const { locations, customer } = { locations: get(state, \"items.items\", []), customer: [...(get(state, \"items.cuso.CUST\", [])), ...(get(state, \"items.cuso.SALES_OFFICE\", []))] }\r\n\r\n let showTabsBy = locations.length > 0 && customer.length > 0 ? \"customer\" : locations.length > 0 && customer.length === 0 ? \"locations\" : customer.length > 0 ? \"customer\" : \"locations\";\r\n\r\n let stateShowTabsBy = get(state, \"options.showTabsBy\", showTabsBy);\r\n\r\n if (!(locations.length > 0 && customer.length > 0)) {\r\n if (stateShowTabsBy === \"locations\" && locations.length === 0) {\r\n stateShowTabsBy = \"customer\"\r\n }\r\n\r\n if (stateShowTabsBy === \"customer\" && customer.length === 0) {\r\n stateShowTabsBy = \"locations\"\r\n }\r\n }\r\n\r\n return stateShowTabsBy;\r\n}\r\n\r\nconst mergeSalesGroups = (inputArray) => {\r\n\r\n const map = new Map(inputArray.map(({ customUniqObjectId, ...rest }) => [customUniqObjectId, { ...rest, salesGroup: [] }]));\r\n for (let { customUniqObjectId, salesGroup } of inputArray) {\r\n // map.get(customUniqObjectId).salesGroup.push(...[salesGroup].flat());\r\n map.get(customUniqObjectId).salesGroup.push(...flatten([salesGroup]));\r\n }\r\n\r\n let resultantArray = [...map.values()];\r\n\r\n resultantArray = resultantArray.map(d => {\r\n if (d?.salesGroup && d.salesGroup[0] === undefined && d.salesGroup.length === 1) {\r\n delete d?.salesGroup;\r\n } else {\r\n d.salesGroup = uniq(d?.salesGroup)\r\n }\r\n delete d.custom;\r\n delete d?.customUniqObjectId;\r\n return d\r\n });\r\n return resultantArray;\r\n}\r\n\r\nconst stringToArrayV2 = (input) => {\r\n if (isArray(input)) return input;\r\n const makeArray = input?.split(/,| |;/).filter(el => el !== '').map(item => item.trim()) || [];\r\n return isEmpty(makeArray) ? null : makeArray;\r\n}\r\n\r\nconst stringToArray = (input) => {\r\n // https://regex101.com/ -> To validate the regex\r\n if (isArray(input)) return input;\r\n const makeArray = input?.trim().split(/,| /).filter(item => item.match(/^[a-z0-9-_()\"\\/]+$/i)) || []\r\n return isEmpty(makeArray) ? null : makeArray\r\n}\r\n\r\nconst getUpdatedColumns = (viewColumns = [], defaultColumns = []) => {\r\n\r\n\r\n let viewFieldsObject = {};\r\n viewColumns.map(d => {\r\n viewFieldsObject[d.field] = d;\r\n });\r\n const viewFieldKeys = Object.keys(viewFieldsObject);\r\n let updatedColumns = [];\r\n let changedCols = [];\r\n\r\n defaultColumns.map(d => {\r\n if (viewFieldKeys.includes(d.field)) {\r\n updatedColumns.push(viewFieldsObject[d.field]);\r\n } else {\r\n changedCols.push({\r\n ...d,\r\n hidden: true\r\n });\r\n }\r\n });\r\n\r\n let sortedCollection = sortBy(updatedColumns, (item) => viewFieldKeys.indexOf(item.field));\r\n\r\n return [...sortedCollection, ...changedCols]\r\n}\r\n\r\nconst createHyperLinkFilterObject = ({ pageDetails, tableName, filterBody }) => {\r\n\r\n\r\n let preSetHealthFilter = {}\r\n\r\n const preSetStatusFilter = pageDetails?.filterParams?.args ? Object.keys(pageDetails.filterParams.args).reduce((res, key) => {\r\n return {\r\n ...res, [key]: {\r\n ...filterBody[key],\r\n data: isArray(filterBody[key]?.data) ? filterBody[key]?.data.map(filterOption => {\r\n return pageDetails.filterParams.args[key].includes(filterOption.value) ? { ...filterOption, checked: true } : filterOption\r\n }) : pageDetails.filterParams.args[key]\r\n }\r\n }\r\n }, {}) : {};\r\n\r\n if (tableName === 'orders') {\r\n\r\n preSetHealthFilter = pageDetails?.filterParams?.health ? {\r\n orderHealth: {\r\n ...filterBody.orderHealth,\r\n data: filterBody.orderHealth.data.map(status => { return status.value === pageDetails?.filterParams?.health ? { ...status, checked: true } : status })\r\n }\r\n } : {}\r\n\r\n var skipDefaultDateFilter = pageDetails?.filterParams?.args ? { matAvailDate: { ...filterBody.matAvailDate, data: null } } : {}\r\n\r\n var skipDefaultOrderTypeFilter = pageDetails?.filterParams?.args?.orderTypes ? {\r\n orderTypes: {\r\n ...filterBody.orderTypes,\r\n data: filterBody.orderTypes.data.map(type1 => {\r\n return pageDetails.filterParams.args.orderTypes.includes(type1.value) ? { ...type1, checked: true } : { ...type1, checked: false }\r\n })\r\n }\r\n } : {}\r\n\r\n }\r\n\r\n if (tableName === 'transport') {\r\n\r\n preSetHealthFilter = {\r\n orderExecutionHealth: {\r\n ...filterBody.orderExecutionHealth,\r\n data: filterBody.orderExecutionHealth.data.map(status => { return status.value === pageDetails?.filterParams?.health ? { ...status, checked: true } : status })\r\n }\r\n }\r\n skipDefaultDateFilter = pageDetails?.filterParams?.args ? { loadReadyDateTimeOriginTZ: { ...filterBody.loadReadyDateTimeOriginTZ, data: null } } : {}\r\n\r\n }\r\n\r\n if (tableName === 'distoutbound') {\r\n\r\n preSetHealthFilter = {\r\n orderExecutionHealth: {\r\n ...filterBody.orderExecutionHealth,\r\n data: filterBody.orderExecutionHealth.data.map(status => { return status.value === pageDetails?.filterParams?.health ? { ...status, checked: true } : status })\r\n }\r\n }\r\n\r\n }\r\n\r\n if (tableName === 'distinbound') {\r\n preSetHealthFilter = pageDetails?.filterParams?.health ? {\r\n inboundOrderExecutionHealth: {\r\n ...filterBody.inboundOrderExecutionHealth,\r\n data: filterBody.inboundOrderExecutionHealth.data.map(status => { return status.value === pageDetails?.filterParams?.health ? { ...status, checked: true } : status })\r\n }\r\n } : {}\r\n }\r\n\r\n return { fullObject: { ...preSetStatusFilter, ...preSetHealthFilter, ...skipDefaultDateFilter, ...skipDefaultOrderTypeFilter }, preSetStatusFilter }\r\n\r\n}\r\n\r\nconst searchKey = (key, d) => {\r\n key = key?.toLowerCase();\r\n return (d?.shortName?.toLowerCase().indexOf(key) > -1)\r\n || (d?.siteNum?.toLowerCase().indexOf(key) > -1)\r\n || (d?.alias?.toLowerCase().indexOf(key) > -1)\r\n}\r\n\r\nexport const processGuardRailData = (data = [], optionalName = false) => {\r\n const processed = [];\r\n data.map((d, i) => {\r\n let barname = `${moment(d.dateTime).format(\"MM/DD\")} ${moment(d.dateTime).format(\"ddd\")}`;\r\n\r\n if (d.today == \"Y\") {\r\n barname = `${barname} Today`\r\n }\r\n let values = {\r\n ...d,\r\n name: barname\r\n };\r\n\r\n const rowDataOrder = ['CONSUMER', 'PROFESSIONAL', 'ALL']\r\n\r\n rowDataOrder.forEach((value) => {\r\n const findBU = d?.orderDivisions?.filter(({ divisionName }) => divisionName === value)\r\n if (isEmpty(findBU)) {\r\n values[`${value}_guardrailValue`] = .0011\r\n values[`${value}_shipmentCount`] = .0011\r\n } else {\r\n values[`${value}_guardrailValue`] = findBU[0].guardrailValue + .0011\r\n values[`${value}_shipmentCount`] = findBU[0].shipmentCount + .0011\r\n }\r\n })\r\n processed.push(values);\r\n\r\n });\r\n return processed;\r\n}\r\n\r\nconst differenceInDates = (startDate, endDate) => {\r\n const sDate = new Date(startDate);\r\n const eDate = new Date(endDate);\r\n const oneDay = 1000 * 60 * 60 * 24;\r\n const diffInTime = eDate.getTime() - sDate.getTime();\r\n const diffInDays = Math.floor(diffInTime / oneDay);\r\n\r\n return diffInDays;\r\n}\r\n\r\nconst shouldRefreshRequest = (statePayload, requestPayload) => {\r\n const isPayloadEqual = isEqual(statePayload?.body, requestPayload?.body);\r\n const isRefresh = isEqual(statePayload?.refresh, requestPayload?.refresh);\r\n const isLanguageChanged = isEqual(statePayload?.language, requestPayload?.language);\r\n const isTimeout = moment(new Date()).diff(moment(statePayload?.reqtime), \"seconds\") > 300;\r\n const isPayloadEmpty = isEmpty(requestPayload?.body);\r\n\r\n return ((!isPayloadEqual || !isRefresh || isTimeout || !isLanguageChanged) && (!isPayloadEmpty && typeof requestPayload?.body === \"object\"))\r\n /*\r\n Conditions: \r\n Payloads of Saved and Cureent Request Should not be same\r\n If external refresh or hard refresh is happning\r\n is 5 min Timeout\r\n is Language Changed\r\n and Payload Should Not be empty when we are doing the requests\r\n */\r\n}\r\n\r\nconst isJsonParsable = string => {\r\n let parsed = null;\r\n try {\r\n parsed = JSON.parse(string);\r\n } catch (e) {\r\n return false;\r\n }\r\n return parsed;\r\n}\r\n\r\nconst getFilterArgs = (filters) => {\r\n if (!isEmpty(filters)) {\r\n let data = {}\r\n for (const [key, value] of Object.entries(filters)) {\r\n if (value?.data) {\r\n if (Array.isArray(value.data) && value.type !== \"sites\" && !value.stringToArray) {\r\n const mappedvals = value.data.filter(({ checked }) => checked).map(({ value }) => value);\r\n if (!isEmpty(mappedvals)) {\r\n data[key] = mappedvals\r\n }\r\n } else {\r\n data[key] = value.data;\r\n }\r\n }\r\n }\r\n return data;\r\n }\r\n return {}\r\n}\r\n\r\nconst createHyperLinkFilterObject2 = ({ pageDetails, tableName, filterBody, filterKeys = null }) => {\r\n\r\n let preSetHealthFilter = {}\r\n let skipDefaultDateFilter = {};\r\n let skipDefaultOrderTypeFilter = {};\r\n\r\n const preSetStatusFilter = pageDetails?.filterParams?.args ? Object.keys(pageDetails.filterParams.args).reduce((res, key) => {\r\n if (filterKeys && !filterKeys.includes(key)) return {\r\n ...res\r\n };\r\n return {\r\n ...res, [key]: {\r\n ...filterBody[key],\r\n data: isArray(filterBody[key]?.data) ? filterBody[key]?.data.map(filterOption => {\r\n if(isObject(filterOption.value)) {\r\n return find(pageDetails.filterParams.args[key], filterOption.value) ? { ...filterOption, checked: true } : filterOption\r\n }\r\n return pageDetails.filterParams.args[key]?.includes(filterOption.value) ? { ...filterOption, checked: true } : filterOption\r\n }) : pageDetails.filterParams.args[key]\r\n }\r\n }\r\n }, {}) : {};\r\n\r\n return { fullObject: { ...preSetStatusFilter, ...preSetHealthFilter, ...skipDefaultDateFilter, ...skipDefaultOrderTypeFilter }, preSetStatusFilter }\r\n\r\n}\r\n\r\nconst getHealth = (filterParams, topage) => {\r\n const health = {\r\n orders: \"orderHealth\",\r\n transport: \"orderExecutionHealth\",\r\n DIST_OUTBOUND_SHIPMENTS: \"orderExecutionHealth\",\r\n DIST_INBOUND_SHIPMENTS: \"inboundOrderExecutionHealth\",\r\n DIST: \"orderExecutionHealth\"\r\n }\r\n\r\n if (topage === \"distribution\") {\r\n return {\r\n [health[filterParams.state]]: [filterParams.health]\r\n };\r\n }\r\n\r\n if(!filterParams.health) return {\r\n [health[topage]]: undefined\r\n }\r\n \r\n return {\r\n [health[topage]]: [filterParams.health]\r\n };\r\n}\r\n\r\nconst getTabletype = (topage, filterParams) => {\r\n const tabtypes = {\r\n DIST_OUTBOUND_SHIPMENTS: 'outbound',\r\n DIST_INBOUND_SHIPMENTS: 'inbound',\r\n DIST: \"outbound\"\r\n }\r\n return topage === \"distribution\" ? tabtypes[filterParams?.state] || \"outbound\" : undefined\r\n}\r\n\r\nconst chartDataIdentifierForAPI = { \r\n network: 'NETWORK', \r\n order: 'ORDER', \r\n transPlan: 'TRANS_PLAN', \r\n transExec: 'TRANS_EXEC', \r\n dist: 'DIST', \r\n shipmentdetails: 'SHIPMENTDETAILS', \r\n analytics: 'ANALYTICS', \r\n stockConstraintReport: 'STOCKCONSTRAINTREPORT',\r\n osm: \"OSM\"\r\n}\r\nconst allowedPlaces = [\"network\", \"mylocation\"];\r\n\r\n\r\n\r\n\r\nexport const generateSelfAlertData = ({\r\n formdata,\r\n filterargs,\r\n criterias,\r\n customerOrSalesOffice\r\n}) => {\r\n let dateComparisons = criterias?.filter(d => d.field1 && d.field2)\r\n return {\r\n ...formdata,\r\n \"targetEndpoint\": {\r\n \"targetType\": \"REST\",\r\n \"restURL\": \"CONTROL_TOWER_SERVER_ORDER_SEARCH\", // CONTROL_TOWER_SERVER_ORDER_SEARCH\r\n \"restMethod\": \"POST\",\r\n \"restJsonObjectBody\": { /* name correction from restBody */\r\n \"region\": \"NA\",\r\n \"searchType\": \"HOME_PAGE\",\r\n ...filterargs,\r\n customerOrSalesOffice,\r\n \"dateComparisons\": dateComparisons\r\n },\r\n \"restHeaders\": { \"Content-Type\": \"application/json\" } /* change from list to object*/\r\n }\r\n }\r\n}\r\n\r\nexport const valiadateForm = (formdata, criterias) => {\r\n const emailEmpty = formdata?.actions?.[0].mailingList?.length === 0;\r\n const timeEmpty = formdata?.freqOfAlerts?.freqType === \"CUSTOM\" ? formdata?.freqOfAlerts?.customTimestamps?.length === 0 : false;\r\n\r\n const criteriasEmpty = criterias?.map(d => {\r\n const { field1, operation, field2 } = d;\r\n return (field1 && operation && field2);\r\n }).filter(d => d).length === criterias?.length;\r\n\r\n return (emailEmpty || timeEmpty || !criteriasEmpty)\r\n}\r\n\r\n\r\nexport const getFilterMappings = (filters) => {\r\n if (!isEmpty(filters)) {\r\n let data = {}\r\n for (const [key, value] of Object.entries(filters)) {\r\n if (value?.data) {\r\n if (Array.isArray(value.data) && value.type !== \"sites\" && !value.stringToArray) {\r\n const mappedvals = value.data.filter(({ checked }) => checked).map(({ name }) => name);\r\n if (!isEmpty(mappedvals)) {\r\n data[value.name] = mappedvals\r\n }\r\n } else {\r\n if (value.type === \"date\") {\r\n data[value.name] = `${value.data.startTime}, ${value.data.endTime}`\r\n } else {\r\n data[value.name] = value.data;\r\n }\r\n }\r\n }\r\n }\r\n return data;\r\n }\r\n return {}\r\n}\r\n\r\nexport const multiPresent = (base, source, key) => {\r\n const present = base.every(value => {\r\n return source?.indexOf(value) !== -1;\r\n });\r\n \r\n if(present) {\r\n return [...(source.filter(d => !base.includes(d))), key]\r\n } \r\n return source;\r\n}\r\n\r\nexport const reprocessSlefAlertFilters = (filters) => {\r\n \r\n const trans_processing_array = [\"TRANS_PLAN_PLANNED\", \"TRANS_PLAN_TENDERED\", \"TRANS_PLAN_TENDER_REJECTED\"];\r\n const order_blocked = [\"SO_BLOCKED_NON_TMS_PLANNED_IMMEDIATE_ACTION\",\r\n \"SO_BLOCKED_TMS_PLANNED_VISIBLE\",\r\n \"SO_BLOCKED_TMS_PLANNED_NOT_VISIBLE\",\r\n \"SO_BLOCKED_NON_TMS_PLANNED_PICKUP_NOT_SCHEDULED\",\r\n \"SO_BLOCKED_NON_TMS_PLANNED_PICKUP_MULTI_BLOCK\",\r\n \"SO_BACK_ORDER_BLOCKED\"\r\n ];\r\n\r\n const order_block_free = [\r\n \"SO_COMPLETELY_CONFIRMED_CUBE\", \r\n \"SO_NOT_COMPLETELY_CONFIRMED_CUBE\", \r\n \"SO_BACK_ORDER_BLOCK_FREE\"\r\n ];\r\n\r\n let orderExecutionBucket = filters?.orderExecutionBucket || [];\r\n let orderStatusBucket = filters?.orderStatusBucket || [];\r\n\r\n orderExecutionBucket = multiPresent(trans_processing_array, orderExecutionBucket, \"TRANS_PLAN_PROCESSING\");\r\n orderStatusBucket = multiPresent(order_blocked, orderStatusBucket, \"ORDER_BLOCKED\");\r\n orderStatusBucket = multiPresent(order_block_free, orderStatusBucket, \"ORDER_BLOCK_FREE\");\r\n\r\n let processed = {\r\n ...filters,\r\n orderExecutionBucket,\r\n orderStatusBucket\r\n }\r\n\r\n return processed\r\n}\r\n\r\nconst formatDate = (date) => {\r\n if (date) {\r\n return moment(date, \"YYYY-MM-DD\").format(\"DD-MMM-YYYY\");\r\n } else return null;\r\n}\r\n\r\nconst moveItem = (arr, fromIndex, toIndex) => {\r\n let itemRemoved = arr.splice(fromIndex, 1)\r\n arr.splice(toIndex, 0, itemRemoved[0])\r\n return arr\r\n}\r\n\r\nconst msToHrs = (ms) => {\r\n if (!isNaN(ms)) { \r\n let minutes = Math.floor((ms / (1000 * 60)) % 60);\r\n minutes = (minutes < 10) ? (\"0\" + minutes) : minutes;\r\n let hours = Math.floor((ms / (1000 * 60 * 60)) % 24);\r\n hours = (hours < 10) ? (\"0\" + hours) : hours;\r\n return hours + \":\" + minutes;\r\n } else {\r\n return \"-\"\r\n }\r\n}\r\n\r\nconst hideDetailColumns = (tableRef) => {\r\n if (tableRef?.current?.props?.data?.length > 0) {\r\n tableRef.current.props.data.map((d) => {\r\n if (d?.tableData?.showDetailPanel) {\r\n d.tableData.showDetailPanel = \"\";\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const isSubset = (parentArray, childArray) => {\r\n const resultArray = [];\r\n const subset = childArray.every(d => {\r\n const isIncludes = parentArray.includes(d);\r\n if(isIncludes) {\r\n resultArray.push(d)\r\n }\r\n return isIncludes;\r\n });\r\n\r\n return {subset, resultArray};\r\n}\r\n\r\nexport const getTextColorByBG = (bgColor) => {\r\n if (!bgColor) { \r\n return '#000'; \r\n }\r\n return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 3) ? '#000' : '#fff';\r\n}\r\n\r\nexport {\r\n getUpdatedColumns,\r\n formatToSentenceCase,\r\n generateTablebody,\r\n msToHMS,\r\n tableoptions,\r\n refreshTable,\r\n calcPercentage,\r\n generateDefaultData,\r\n endpoints,\r\n generateFilterLayoutTemplate,\r\n getStatusData,\r\n capitalizeWord,\r\n getId,\r\n getTabsData,\r\n generateHeader,\r\n defaultShowTabsBy,\r\n mergeSalesGroups,\r\n stringToArray,\r\n createHyperLinkFilterObject,\r\n searchKey,\r\n differenceInDates,\r\n shouldRefreshRequest,\r\n isJsonParsable,\r\n getFilterArgs,\r\n createHyperLinkFilterObject2,\r\n chartDataIdentifierForAPI,\r\n allowedPlaces,\r\n getHealth,\r\n getTabletype,\r\n formatDate,\r\n findActive,\r\n moveItem,\r\n msToHrs,\r\n hideDetailColumns,\r\n stringToArrayV2\r\n}","module.exports = __webpack_public_path__ + \"static/media/go_to.dfd1644c.svg\";","module.exports = __webpack_public_path__ + \"static/media/pallet.c84ae1a8.svg\";","export { default } from './Button';","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nmodule.exports = webpackEmptyContext;\nwebpackEmptyContext.id = 655;","module.exports = __webpack_public_path__ + \"static/media/gilroy.06c8bcd8.woff2\";","module.exports = __webpack_public_path__ + \"static/media/maestro-logo.c8dae6b5.svg\";","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport LinearProgress from '@material-ui/core/LinearProgress';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n top: 65, \r\n left: 0, right: 0,\r\n position: \"absolute\",\r\n },\r\n progress: {\r\n }\r\n}));\r\n\r\nconst LinearLoader = () => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default LinearLoader;","import React, { useState, useEffect } from 'react';\r\nimport { useThemeContext } from 'context/ThemeContext';\r\nimport {\r\n makeStyles,\r\n Drawer,\r\n IconButton,\r\n List,\r\n ListItem,\r\n ListItemIcon,\r\n ListItemText,\r\n ListSubheader,\r\n Typography,\r\n Collapse, useMediaQuery, useTheme\r\n} from '@material-ui/core';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport HomeIcon from '../../assets/images/home.svg';\r\nimport OrdersIcon from '../../assets/images/cart.svg';\r\nimport DistributionIcon from '../../assets/images/warehouse.svg';\r\nimport TransportIcon from '../../assets/images/truck.svg';\r\nimport OsmIcon from '../../assets/images/docc.svg';\r\nimport TutorialIcon from '../../assets/images/tutorial-icon.svg';\r\n// import StockConstraintReportIcon from '../../assets/images/report.svg';\r\nimport AnalyticsIcon from '../../assets/images/analytics.svg';\r\nimport { CTLink } from './CTLink';\r\nimport { chartDataIdentifierForAPI as chartDataIdentifierForAPI } from 'helpers/index';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport { ExpandLess, ExpandMore } from '@material-ui/icons';\r\nimport { intersection, isEmpty } from 'lodash';\r\nimport { useFeatureFlag } from 'configs/useFeatureFlag';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useHistory, generatePath, useParams } from 'react-router-dom';\r\nimport { useRouteContext } from 'context/RouteContext';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useDeepCompareEffect } from 'react-use';\r\nimport HomeDarkIcon from '../../assets/images/home_dark.svg';\r\nimport OrdersDarkIcon from '../../assets/images/cart_dark.svg';\r\nimport DistributionDarkIcon from '../../assets/images/warehouse_dark.svg';\r\nimport TransportDarkIcon from '../../assets/images/truck_dark.svg';\r\nimport OsmDarkIcon from '../../assets/images/docc_dark.svg';\r\nimport TutorialDarkIcon from '../../assets/images/tutorial_icon_dark.svg';\r\nimport AnalyticsDarkIcon from '../../assets/images/analytics_dark.svg';\r\n\r\nconst drawerWidth = 300;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n drawer: {\r\n flexShrink: 0\r\n },\r\n drawerPaper: {\r\n width: drawerWidth,\r\n backgroundColor: theme.palette.background.drawer,\r\n borderRight: 'none',\r\n top: theme.spacing(8)\r\n },\r\n drawerHeader: {\r\n padding: theme.spacing(0, 1),\r\n // necessary for content to be below app bar\r\n ...theme.mixins.toolbar\r\n },\r\n listHeader: {\r\n height: theme.spacing(4),\r\n float: 'right'\r\n },\r\n close: {\r\n color: theme.palette.text.primary,\r\n display: 'inline-flex',\r\n cursor: 'pointer'\r\n },\r\n closeIcon: {\r\n fontSize: 'medium',\r\n marginRight: theme.spacing(0.5),\r\n marginTop: theme.spacing(0.5)\r\n },\r\n listItems: {\r\n borderBottom: `1px solid ${theme.palette.text.primary}`,\r\n color: theme.palette.text.primary,\r\n '&.MuiListItem-root.Mui-selected' : {\r\n backgroundColor: theme.palette?.link?.default\r\n }\r\n },\r\n menuButton: {\r\n marginRight: theme.spacing(1),\r\n padding: theme.spacing(1)\r\n },\r\n menuButtonFocus: {\r\n background: theme.palette.primary.pressed,\r\n borderRadius: theme.spacing(0.5),\r\n marginRight: theme.spacing(1),\r\n padding: theme.spacing(1)\r\n },\r\n analyticsList: {\r\n background: theme.palette.chip?.backgroundDefault,\r\n },\r\n text: {\r\n color: theme.palette.text.primary\r\n }\r\n}));\r\n\r\nconst AppDrawer = ({ setDetails, pageDetails }) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n const params = useParams();\r\n const { theme } = useThemeContext();\r\n\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation();\r\n const { mainPath, analyticsPath } = useRouteContext();\r\n const [openDrawer, setDrawerOpen] = useState(false);\r\n const activePageMapping = {\r\n home: \"NETWORK\",\r\n orders: \"ORDER\",\r\n transport: \"TRANS_PLAN\",\r\n distribution: \"DIST\",\r\n osm: \"OSM\",\r\n }\r\n const activeMenu = intersection(\r\n Object.values(chartDataIdentifierForAPI),\r\n [activePageMapping[params?.page]]\r\n )[0];\r\n const [selectedIndex, setSelectedIndex] = useState(activeMenu);\r\n const [extend, setExtend] = React.useState(false);\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down('sm'));\r\n const analyticsReports = useFeatureFlag('analyticsReports');\r\n const showAnalyticsLink = useFeatureFlag('showAnalyticsLink')?.enabled;\r\n\r\n const privateURLs = [\r\n {\r\n name: t('osm_breadcrumb_text'),\r\n iconUrl: theme?.type === 'dark' ? OsmIcon : OsmDarkIcon,\r\n viewUrl: chartDataIdentifierForAPI.osm\r\n }\r\n ];\r\n\r\n const menuList = [\r\n {\r\n name: t('home'),\r\n iconUrl: theme?.type === 'dark' ? HomeIcon : HomeDarkIcon,\r\n viewUrl: chartDataIdentifierForAPI.network\r\n },\r\n {\r\n name: t('order_management_breadcrumb_text'),\r\n iconUrl: theme?.type === 'dark' ? OrdersIcon : OrdersDarkIcon,\r\n viewUrl: chartDataIdentifierForAPI.order\r\n },\r\n {\r\n name: t('distribution_breadcrumb_text'),\r\n iconUrl: theme?.type === 'dark' ? DistributionIcon : DistributionDarkIcon,\r\n viewUrl: chartDataIdentifierForAPI.dist\r\n },\r\n {\r\n name: t('transportation_breadcrumb_text'),\r\n iconUrl: theme?.type === 'dark' ? TransportIcon : TransportDarkIcon,\r\n viewUrl: chartDataIdentifierForAPI.transPlan\r\n },\r\n ...privateURLs,\r\n {\r\n name: t('tutorials_&_resources'),\r\n iconUrl: theme?.type === 'dark' ? TutorialIcon : TutorialDarkIcon,\r\n viewUrl: '',\r\n link: process.env.REACT_APP_GLOSSARY_URL\r\n },\r\n // Commenting SCR Link\r\n // {\r\n // name: t('stock_constraint_report_title'),\r\n // iconUrl: StockConstraintReportIcon,\r\n // viewUrl: chartDataIdentifierForAPI.stockConstraintReport\r\n // }\r\n ];\r\n\r\n const [analyticsList, updateAnalyticsList] = useState(analyticsReports.description || []);\r\n\r\n const collapseAll = () => {\r\n setExtend(false);\r\n const collapseLists = analyticsList?.map((d) =>\r\n d.open ? { ...d, open: false } : d\r\n );\r\n updateAnalyticsList(collapseLists);\r\n };\r\n\r\n const handleListItemClick = (category, reportUrl, analyticFolder) => {\r\n setSelectedIndex(category);\r\n if (Object.values(chartDataIdentifierForAPI).includes(category)) {\r\n collapseAll();\r\n }\r\n const pages = {\r\n NETWORK: \"home\",\r\n ORDER: \"orders\",\r\n DIST: \"distribution\",\r\n TRANS_PLAN: \"transport\",\r\n OSM: \"osm\"\r\n }\r\n if (reportUrl && !pages[category]) {\r\n dispatch({ type: 'UPDATE_REPORT_URL', payload: reportUrl })\r\n }\r\n if(category) {\r\n const path = pages[category]\r\n ? mainPath\r\n : `${analyticsPath}${analyticFolder.name}/${category}`\r\n const newpath = generatePath(\r\n path,\r\n {\r\n ...params,\r\n page: pages[category],\r\n // tabletype: category === 'DIST' && 'outbound' \r\n tabletype: pages[category] === \"distribution\" ? \"outbound\": undefined\r\n }\r\n );\r\n const updatedParamPath = `${newpath}?showDefault=true${ pages[category] === \"osm\" ? '&activity=reset&osmfilters={}&osmglobal={}': ''}`;\r\n history.push(updatedParamPath)\r\n // history.push(`${newpath}?showDefault=true`)\r\n setDrawerOpen(!openDrawer);\r\n }\r\n };\r\n\r\n const onAnalyticsClick = (analyticFolderIndex) => {\r\n const activeLists = analyticsList?.map((d, index) =>\r\n analyticFolderIndex == index ? { ...d, open: !d.open } : d\r\n );\r\n updateAnalyticsList(activeLists);\r\n };\r\n\r\n useEffect(() => {\r\n updateAnalyticsList(\r\n analyticsReports.description\r\n );\r\n }, [analyticsReports]);\r\n\r\n useEffect(() => {\r\n if (activeMenu && activeMenu !== chartDataIdentifierForAPI.analytics)\r\n setSelectedIndex(activeMenu);\r\n }, [activeMenu]);\r\n\r\n useDeepCompareEffect(() => {\r\n const { report, folder } = params;\r\n if (report) {\r\n setSelectedIndex(params.report);\r\n setExtend(true);\r\n const activeLists = analyticsList?.map((d, index) => {\r\n return d.name === folder ? { ...d, open: true } : d\r\n });\r\n if (!isEmpty(activeLists)) {\r\n updateAnalyticsList(activeLists);\r\n }\r\n }\r\n }, [params.report, params.folder, analyticsList])\r\n\r\n return (\r\n <>\r\n setDrawerOpen(!openDrawer)}\r\n edge=\"start\"\r\n className={openDrawer ? classes.menuButtonFocus : classes.menuButton}>\r\n \r\n setDrawerOpen(!openDrawer)}>\r\n \r\n { t(\"close_menu\") } \r\n \r\n \r\n }>\r\n\r\n {menuList &&\r\n menuList.map((menuItem, index) => (\r\n handleListItemClick(menuItem.viewUrl, false)}\r\n className={classes.listItems} key={index}\r\n selected={selectedIndex === menuItem.viewUrl}>\r\n {menuItem.viewUrl && (\r\n \r\n \r\n {' '}\r\n \r\n setDrawerOpen(!openDrawer)}>\r\n \r\n {' '}\r\n \r\n setExtend(!extend)}>\r\n \r\n {' '}\r\n \r\n \r\n {analyticsList?.map((analyticFolder, analyticFolderIndex) => (\r\n \r\n onAnalyticsClick(analyticFolderIndex)}>\r\n \r\n \r\n {analyticFolder?.reports?.map((report) => (\r\n \r\n handleListItemClick(\r\n report.reportName,\r\n report.reportUrl,\r\n analyticFolder\r\n )\r\n }>\r\n
\r\n \r\n
\r\n ))}\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default AppDrawer;\r\n","module.exports = __webpack_public_path__ + \"static/media/home.1c83fc7e.svg\";","module.exports = __webpack_public_path__ + \"static/media/cart.035c9f91.svg\";","module.exports = __webpack_public_path__ + \"static/media/warehouse.9d5392ef.svg\";","module.exports = __webpack_public_path__ + \"static/media/truck.5b9ce67d.svg\";","module.exports = __webpack_public_path__ + \"static/media/docc.41175107.svg\";","module.exports = __webpack_public_path__ + \"static/media/tutorial-icon.dc74c404.svg\";","module.exports = __webpack_public_path__ + \"static/media/analytics.e0211a2a.svg\";","module.exports = __webpack_public_path__ + \"static/media/cart_dark.d698b75e.svg\";","module.exports = __webpack_public_path__ + \"static/media/warehouse_dark.00754de8.svg\";","module.exports = __webpack_public_path__ + \"static/media/truck_dark.1ca69cfa.svg\";","module.exports = __webpack_public_path__ + \"static/media/docc_dark.55beac1e.svg\";","module.exports = __webpack_public_path__ + \"static/media/tutorial_icon_dark.76fa56a2.svg\";","module.exports = __webpack_public_path__ + \"static/media/analytics_dark.a1211b28.svg\";","module.exports = __webpack_public_path__ + \"static/media/greater_than_equal_to.316fa4ae.svg\";","module.exports = __webpack_public_path__ + \"static/media/less_than_equal_to.c3bd09c7.svg\";","import { colors } from '@material-ui/core';\r\n\r\nconst white = '#FFF'\r\nconst black = colors.grey[900];\r\n\r\nconst coloursDark = {\r\n background: '#131834',//background //filterbar\r\n\r\n primaryBase: '#1C2340', //bg4 //primaryBase //topbar\r\n primaryHover: \"#303751\",\r\n primarySelected: \"#2E354F\",\r\n primaryFocus: \"#373D57\",\r\n primaryPressed: \"#333953\",\r\n primaryDragged: \"#3B4472\", //add box shadow from figma when using\r\n\r\n secondaryBase: \"#465083\", //FormLightBase\r\n secondaryDark: \"#303862\", //FormDarkBase\r\n secondaryHover: \"#4D5788\", //FormLightHover\r\n secondarySelected: \"#57608E\", \r\n secondaryFocus:\"#5C6592\", //FormLightActive\r\n secondaryPressed: \"#555E8D\", //Secondary Dragged\r\n \r\n menuBase: \"#5C67A4\",\r\n \r\n cardBase: \"#272C4F\",\r\n cardHover: \"#303651\",\r\n cardFocus: \"#414760\",\r\n\r\n formDarkHover : \"#384068\",\r\n formDarkActive: \"#495075\",\r\n\r\n greyMedium : \"#939597\",\r\n greyLight: \"#CACACA\",\r\n poppyWhiskers: \"#CCD7DD\",\r\n\r\n healthy: \"#56B1FA\",\r\n unhealthy: \"#FF2972\",\r\n risk: \"#FFC654\", //Need attention\r\n\r\n consumer: \"#6C34CB\",\r\n professional: \"#AB87D2\",\r\n STO: \"#FFFADE\",\r\n \r\n healthyGreen: \"#00FF81\",\r\n accent: '#0091EA', //Accent\r\n lightCyanBlue:'#7EC7FC',\r\n midnightExpress:'#1c2340',\r\n silver: '#C4C4C4',\r\n \r\n malibu80:'#97dffc', //Also linkDefault from design\r\n ultramarine: '#10059F', //Link Hover\r\n breathtaking: '#58628f',\r\n periwinkleBlue: '#8CA0FF',\r\n evilEye: '#1306C1',\r\n tropicalNightBlue: \"#272E4A\",\r\n \r\n //ApprovedLegend colors\r\n malibu100:'#56b1FA', //Also linkActive //Healthy\r\n radicalRed:'#FA1A66',\r\n goldTainoi:'#FFC654',\r\n\r\n //Pie and Doughnut Colors\r\n frenchLilac:'#78578A',\r\n purpleMountain:'#9973B5',\r\n floralLavender:'#BA8FE0',\r\n lilac:'#CCA2C6',\r\n desertSand:'#E7C1B1',\r\n unbleachedSilk:\"#EFEDBD\",\r\n champagnePink:\"#F3DACE\",\r\n mistyRose:\"#F5E2DF\",\r\n cultured:\"#F6F4F4\",\r\n\r\n iron:'#D5D3D7', // From color palette 4\r\n chambray: '#384680',//kc_dark_border // ChipDefaultBorder\r\n democrat: '#00AEEF',\r\n darkToneInk: '#121212',\r\n \r\n //Error Message Colors\r\n coralRed100: '#b71c1c',\r\n coralRed60: '#e53935',\r\n coralRed40: '#ef5350',\r\n\r\n //Chart Colors New\r\n criticalRed: '#FF0000',\r\n pink: '#FF4081',\r\n\r\n greyBlue: '#7480BF',\r\n linkBlue: '#1a0dab',\r\n lightPurpleblue: \"#F0FAFF\",\r\n nightLife: '#28436D',\r\n paleBlue: '#EDF6F9',\r\n poloBlue: '#8993CD',\r\n lightGrey: 'rgba(0, 0, 0, 0.08)'\r\n};\r\n\r\nconst colorPanelEMEA = [\r\n \"#9375B1\", \"#B391DB\", \"#C5A4C4\", \"#E1C2B3\", \"#EFDBD0\",\"#EFEDC2\"\r\n];\r\n\r\nconst set1 = [\"#6EE7B7\", \"#FCD34D\", \"#ED9999\", \"#5C21B8\", \"#4700B3\"];\r\nconst set2 = [\"#4700B3\", \"#003E9C\", \"#2B7FFF\", \"#A66BFF\", \"#96C0FF\"];\r\nconst set3 = [\"#92400E\", \"#B45309\", \"#D97706\", \"#F59E0B\", \"#FBBF24\"];\r\nconst set4 = [\"#064E3B\", \"#FCD34D\", \"#0091EA\"];\r\nconst set5 = [\"#9375B1\", \"#F59E0B\", \"#064E3B\", \"#0091EA\", \"#EFDBD0\"];\r\nconst set6 = [\"#064E3B\", \"#F59E0B\", \"#0091EA\", \"#EFDBD0\", \"#9375B1\"];\r\nconst set7 = [\"#6C34CB\"];\r\nconst set8 = [\"#AB87D2\"];\r\nconst set9 = [\"#2B7FFF\"];\r\nconst set10 = [\"#56B1FA\", \"#9375B1\", \"#FFC654\"]\r\nconst set11 = [\"#A45E52\", \"#E8B0A6\", \"#377E87\", \"#0091EA\", \"#1C2340\"];\r\nconst set12 = ['#006557'];\r\nconst treemapColors = [\"#52B4C1\", \"#525C6B\", \"#A8ADB5\", \"#377E87\", \"#DA7D6D\", \r\n\"#A9E0E6\", \"#68AFE2\", \"#C8C47C\", \"#868D98\", \"#78C9B5\", \"#98CC89\", \"#D4D6DA\", \r\n\"#8DD6E5\", \"#387254\", \"#D8D486\", \"#C1BCFD\", \"#FCD34D\", \"#10B981\", \"#0C2041\", \"#FCD34D\"];\r\n\r\nconst dark = {\r\n type:'dark',\r\n colorPanelEMEA,\r\n set1,\r\n set2,\r\n set3,\r\n set4,\r\n set5,\r\n set6,\r\n set7,\r\n set8,\r\n set9,\r\n set10,\r\n set11,\r\n set12,\r\n treemapColors,\r\n primary: {\r\n contrastText: white,\r\n main: white,\r\n base:coloursDark.primaryBase,\r\n hover:coloursDark.secondarySelected,\r\n focus:coloursDark.primaryFocus,\r\n active: coloursDark.primaryHover,\r\n dragged: coloursDark.menuBase,\r\n pressed: coloursDark.formDarkHover,\r\n primaryBase: white\r\n },\r\n secondary: {\r\n dark: coloursDark.secondaryDark,\r\n base:coloursDark.secondaryBase,\r\n accent:coloursDark.accent,\r\n contrastText: white,\r\n secondary: coloursDark.background,\r\n main:coloursDark.accent,\r\n hover:coloursDark.secondaryHover,\r\n lightCyanBlue:coloursDark.lightCyanBlue,\r\n midnightExpress:coloursDark.midnightExpress,\r\n silver:coloursDark.silver,\r\n border: coloursDark.greyBlue,\r\n focus: coloursDark.secondaryFocus,\r\n pressed: coloursDark.darkToneInk\r\n },\r\n error: {\r\n contrastText: white,\r\n dark: coloursDark.coralRed100,\r\n main: coloursDark.coralRed60,\r\n light: coloursDark.coralRed40\r\n },\r\n text: {\r\n primary: white,\r\n secondary: coloursDark.greyMedium,\r\n link: coloursDark.malibu80,\r\n underline:coloursDark.cardBase,\r\n caption: coloursDark.secondaryBase,\r\n main: coloursDark.primaryBase,\r\n tertiarySubtitle: coloursDark.nightLife\r\n },\r\n form: {\r\n baseDark:coloursDark.secondaryDark,\r\n baseLight:coloursDark.secondaryBase\r\n },\r\n menu:{\r\n base:coloursDark.menuBase,\r\n active: coloursDark.primaryHover\r\n },\r\n card:{\r\n base:coloursDark.cardBase,\r\n default: coloursDark.primaryBase,\r\n border: black\r\n },\r\n chip:{\r\n borderActive:white,\r\n borderDefault:coloursDark.chambray,\r\n backgroundActive:coloursDark.menuBase,\r\n backgroundDefault:coloursDark.secondaryBase,\r\n tableChips: coloursDark.secondaryDark\r\n },\r\n link:{\r\n default:coloursDark.secondaryDark,\r\n hover:coloursDark.ultramarine,\r\n linkDefault: coloursDark.linkBlue,\r\n linkPrimary: coloursDark.evilEye\r\n },\r\n icon: coloursDark.malibu80,\r\n background: {\r\n default: coloursDark.background,\r\n paper: white,\r\n selected: coloursDark.secondaryDark,\r\n filters: coloursDark.secondaryDark,\r\n indicator: coloursDark.democrat,\r\n drawer: coloursDark.formDarkHover,\r\n secondaryBase: coloursDark.poloBlue,\r\n selectedView: coloursDark.lightGrey\r\n },\r\n divider: coloursDark.greyMedium, \r\n topbar: coloursDark.primaryBase,\r\n filterbar: coloursDark.background,\r\n black,\r\n white,\r\n chartColors: {\r\n healthy:coloursDark.healthy,\r\n risk:coloursDark.risk,\r\n unhealthy:coloursDark.unhealthy\r\n },\r\n legendColors: {\r\n healthy:coloursDark.healthy,\r\n risk:coloursDark.risk,\r\n unhealthy:coloursDark.unhealthy,\r\n healthyGreen: coloursDark.healthyGreen,\r\n criticalRed: coloursDark.criticalRed,\r\n pink: coloursDark.pink,\r\n greyLight: coloursDark.greyLight\r\n },\r\n chartColorsMulti: [coloursDark.frenchLilac, coloursDark.purpleMountain, coloursDark.floralLavender, coloursDark.lilac, coloursDark.desertSand, coloursDark.unbleachedSilk, coloursDark.champagnePink, coloursDark.mistyRose, coloursDark.cultured ],\r\n border: coloursDark.chambray,\r\n extra:{\r\n iron:coloursDark.iron,\r\n iconInactive: coloursDark.breathtaking,\r\n filterBorder: coloursDark.periwinkleBlue,\r\n filterTitle: coloursDark.secondaryBase,\r\n filterActions: coloursDark.midnightExpress,\r\n expandFilter: coloursDark.secondaryDark,\r\n scrollBar: coloursDark.poppyWhiskers,\r\n mobileProfile: coloursDark.secondaryBase\r\n },\r\n guardrailColors: {\r\n consumer:coloursDark.consumer,\r\n professional:coloursDark.professional,\r\n STO:coloursDark.STO\r\n },\r\n table: {\r\n scrollColor: coloursDark.greyMedium,\r\n scrollBorder: white,\r\n primaryBase: coloursDark.tropicalNightBlue\r\n },\r\n tooltip: {\r\n lightPurpleblue: coloursDark.lightPurpleblue,\r\n paleBlue: coloursDark.paleBlue\r\n },\r\n};\r\n\r\nconst colorsLight = {\r\n alucardsNight: '#050050',\r\n insigniaWhite: '#EBF1FB',\r\n berwickBerry: '#7285A6',\r\n aloneInTheDark: '#00006C',\r\n glass: '#BED2F3',\r\n brilliantWhite: '#E6F2FF',\r\n nightLife: '#28436D',\r\n blueMarguerite: \"#10069F\",\r\n lead: \"#212121\",\r\n irisBloom: '#5A659C',\r\n aliceBlue: '#F2F8FF',\r\n sweetEmily: '#C9CFE2',\r\n ultramarineBlue: '#3652FF',\r\n puffyCloud: '#D1DFF7',\r\n magnolia: '#FAF8FF',\r\n estateBlue: '#25395A',\r\n\r\n background: '#F2F2F2',\r\n titanWhite: '#EDEEFF',\r\n whiteSolid: '#F3F6F9',\r\n stoicWhite: \"#E0E5FD\",\r\n whiteLotion: '#FAFAFA',\r\n richBlue: '#5C67A4',\r\n midnightSea: \"#555E8D\",\r\n chambray: '#465083',\r\n paleCornflowerBlue: '#BCC4F2',\r\n frostedIris: \"#AFB5DA\",\r\n moodyBlue: '#7A85C6',\r\n glaucous: '#6B75B1',\r\n dodgerBlue: '#0091EA',\r\n groundWater: '#10059F',\r\n ravenNight: '#384068',\r\n larkspurBud: '#B6BFF0',\r\n purpleHeart: '#613DC1',\r\n corsicanPurple: '#7982B0',\r\n kickstartPurple: 'rgba(110, 126, 208, 0.07)',\r\n ghostWhite: '#F4F6FF',\r\n quartz: '#E7E6F8',\r\n blueWhale: '#1C2340',\r\n deepKoamaru: '#303862',\r\n cloudBreak: '#F5F3FF',\r\n paleGrey: '#FCFCFF',\r\n spanishGrey: '#939597',\r\n lightShadow: 'rgba(0, 0, 0, 0.26)',\r\n darkShadow: 'rgba(0, 0, 0, 0.50)',\r\n poloBlue: '#8993CD',\r\n carteBlanche: '#E9ECFF',\r\n greenEpiphany: '#80FFBA',\r\n bananaBread: '#FFD073',\r\n orangeAura: '#FF9482',\r\n red: '#FF0000',\r\n lightPurpleblue: \"#F0FAFF\",\r\n paleBlue: '#EDF6F9',\r\n firebrick: \"#BC2121\",\r\n blueBonnet: \"#1707E2\"\r\n}\r\n\r\nconst light = {\r\n type: 'light',\r\n colorPanelEMEA,\r\n set1,\r\n set2,\r\n set3,\r\n set4,\r\n set5,\r\n set6,\r\n set7,\r\n set8,\r\n set9,\r\n set10,\r\n set11,\r\n set12,\r\n white,\r\n black,\r\n treemapColors,\r\n background: {\r\n default: white,\r\n primaryBase: colorsLight.irisBloom,\r\n secondaryBase: colorsLight.poloBlue,\r\n selected: colorsLight.glass,\r\n baseLight: colorsLight.kickstartPurple,\r\n filters: colorsLight.ghostWhite,\r\n tertiaryBase: colorsLight.stoicWhite,\r\n quaternaryBase: colorsLight.whiteLotion,\r\n indicator: coloursDark.democrat,\r\n drawer: colorsLight.insigniaWhite\r\n },\r\n primary: {\r\n main: colorsLight.brilliantWhite,\r\n base: colorsLight.paleGrey,\r\n primaryBase: colorsLight.cloudBreak,\r\n secondaryBase: colorsLight.magnolia,\r\n contrastText: colorsLight.chambray,\r\n hover: colorsLight.quartz,\r\n active: colorsLight.frostedIris,\r\n dragged: coloursDark.primaryDragged,\r\n pressed: colorsLight.berwickBerry,\r\n button: colorsLight.blueMarguerite\r\n },\r\n secondary: {\r\n main: colorsLight.quartz,\r\n base: colorsLight.ghostWhite,\r\n secondary: colorsLight.paleCornflowerBlue,\r\n accent: colorsLight.purpleHeart,\r\n focus: colorsLight.titanWhite,\r\n border: colorsLight.chambray,\r\n dark: colorsLight.deepKoamaru,\r\n pressed: colorsLight.aloneInTheDark,\r\n button: colorsLight.puffyCloud\r\n },\r\n text: {\r\n main: white,\r\n primary: colorsLight.alucardsNight,\r\n secondary: colorsLight.deepKoamaru,\r\n link: colorsLight.nightLife,\r\n caption: colorsLight.chambray,\r\n error: colorsLight.red,\r\n subtitle: colorsLight.richBlue,\r\n secondarySubtitle: colorsLight.midnightSea,\r\n tertiarySubtitle: colorsLight.lead,\r\n unhealthy: colorsLight.firebrick,\r\n healthy: colorsLight.aloneInTheDark\r\n },\r\n chartColors: {\r\n healthy:coloursDark.healthy,\r\n risk:coloursDark.risk,\r\n unhealthy:coloursDark.unhealthy\r\n },\r\n chartColorsMulti: [coloursDark.frenchLilac, coloursDark.purpleMountain, coloursDark.floralLavender, coloursDark.lilac, coloursDark.desertSand, coloursDark.unbleachedSilk, coloursDark.champagnePink, coloursDark.mistyRose, coloursDark.cultured ],\r\n border: colorsLight.alucardsNight,\r\n link: {\r\n default: colorsLight.glass,\r\n active: colorsLight.purpleHeart,\r\n hover: colorsLight.larkspurBud,\r\n primary: colorsLight.ultramarineBlue\r\n },\r\n tooltip: {\r\n main: colorsLight.ravenNight,\r\n base: colorsLight.dodgerBlue,\r\n lightPurpleblue: colorsLight.lightPurpleblue,\r\n paleBlue: colorsLight.paleBlue\r\n },\r\n topbar: colorsLight.chambray,\r\n legendColors: {\r\n healthy: colorsLight.greenEpiphany,\r\n risk: colorsLight.bananaBread,\r\n unhealthy: colorsLight.orangeAura,\r\n healthyGreen: coloursDark.healthyGreen,\r\n criticalRed: coloursDark.criticalRed,\r\n pink: coloursDark.pink,\r\n greyLight: colorsLight.spanishGrey\r\n },\r\n menu:{\r\n base: colorsLight.glaucous,\r\n active: coloursDark.primaryHover\r\n },\r\n card:{\r\n base: white,\r\n default: colorsLight.brilliantWhite,\r\n header: colorsLight.whiteSolid,\r\n border: colorsLight.sweetEmily,\r\n miniCard: colorsLight.whiteSolid\r\n },\r\n table: {\r\n scrollColor: white,\r\n scrollBorder: colorsLight.spanishGrey,\r\n primaryBase: colorsLight.aliceBlue,\r\n secondaryBase: colorsLight.lightPurpleblue,\r\n footer: colorsLight.estateBlue,\r\n secondaryHeader: colorsLight.blueWhale\r\n },\r\n extra:{\r\n iron: colorsLight.chambray,\r\n iconInactive: white,\r\n info: colorsLight.groundWater,\r\n filterBorder: colorsLight.chambray,\r\n filterTitle: colorsLight.chambray,\r\n filterActions: colorsLight.quartz,\r\n expandFilter: colorsLight.ghostWhite,\r\n scrollBar: colorsLight.lead,\r\n mainShadow: colorsLight.lightShadow,\r\n primaryShadow: colorsLight.darkShadow,\r\n mobileProfile: colorsLight.midnightSea,\r\n infoHighlight: colorsLight.blueBonnet,\r\n listIcon: coloursDark.darkToneInk\r\n },\r\n chip:{\r\n backgroundDefault: white,\r\n borderActive: colorsLight.moodyBlue,\r\n tableChips: white\r\n },\r\n form: {\r\n baseLight: white\r\n }\r\n}\r\n\r\nexport { dark, light }","import {dark} from './palette';\r\nimport GilroyWoff2 from '../assets/fonts/gilroy.woff2';\r\n\r\nexport const gilroy = {\r\n fontFamily: 'Gilroy',\r\n fontStyle: 'normal',\r\n fontDisplay: 'swap',\r\n fontWeight: 300,\r\n src: `\r\n local('Gilroy'),\r\n local('Gilroy-Regular'),\r\n url(${GilroyWoff2}) format('woff2')\r\n `,\r\n unicodeRange:\r\n 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',\r\n};\r\n\r\nexport const fontFamilies = {\r\n gilroy: gilroy,\r\n};\r\n\r\n//500 is semibold\r\n\r\nexport const typography =(palette) => {\r\n return {\r\n fontFamily: \"'Gilroy', sans_serif\",\r\n h1: { //body large\r\n fontSize: '18px',\r\n '@media (min-width:600px)': {\r\n fontWeight: \"500\"\r\n }\r\n },\r\n h2: {\r\n fontWeight: 500,\r\n fontSize: '18px',\r\n textTransform: 'uppercase'\r\n },\r\n h3: {\r\n fontWeight: 500,\r\n fontSize: '16px',\r\n textTransform: 'uppercase',\r\n '@media (min-width:600px)': {\r\n fontWeight: \"500\"\r\n },\r\n '@media (max-width:600px)': {\r\n fontSize: '14px'\r\n }\r\n },\r\n h4: {\r\n fontWeight: 500,\r\n fontSize: '14px',\r\n textTransform: 'uppercase',\r\n '@media (max-width:600px)': {\r\n fontSize: '10px'\r\n }\r\n },\r\n h5: {\r\n fontWeight: 500,\r\n fontSize: '12px',\r\n textTransform: 'uppercase'\r\n },\r\n h6: { //body-base\r\n fontSize: '16px',\r\n '@media (min-width:600px)': {\r\n fontWeight: \"500\"\r\n },\r\n '@media (max-width:600px)': {\r\n fontSize: '12px'\r\n }\r\n },\r\n body1: { //body small\r\n fontSize: '14px',\r\n '@media (min-width:600px)': {\r\n fontWeight: \"500\"\r\n },\r\n '@media (max-width:600px)': {\r\n fontSize: '12px'\r\n }\r\n },\r\n body2: { //body xsmall\r\n fontSize: '12px',\r\n '@media (min-width:600px)': {\r\n fontWeight: \"500\"\r\n },\r\n '@media (max-width:600px)': {\r\n fontSize: '10px'\r\n }\r\n }, \r\n button: {\r\n fontWeight: 500,\r\n fontSize: '16px'\r\n },\r\n caption: {\r\n fontSize: '12px',\r\n textTransform: 'capitalize !important'\r\n },\r\n subtitle1: { //label\r\n color: palette.text.primary,\r\n fontSize: '14px',\r\n },\r\n subtitle2: { //Input\r\n fontSize: '16px',\r\n\r\n }\r\n // h6: { //Chart\r\n // fontSize: '12px',\r\n // textTransform: 'uppercase'\r\n // },\r\n // overline: {\r\n // color: palette.text.secondary,\r\n // fontSize: '11px',\r\n // fontWeight: 500,\r\n // textTransform: 'uppercase'\r\n // },\r\n }\r\n}\r\n\r\n\r\nexport const getTypography = (type) => {\r\n // if (type === \"light\") {\r\n // return typography(light)\r\n // } \r\n return typography(dark)\r\n}","import { createMuiTheme, fade } from '@material-ui/core';\r\nimport { dark, light } from './palette';\r\nimport { typography, gilroy } from './typography';\r\n\r\nconst colorPanel = dark;\r\nconst lightPanel = light;\r\n\r\nexport const appTheme = createMuiTheme({\r\n palette: colorPanel,\r\n typography,\r\n overrides: {\r\n MuiCssBaseline: {\r\n '@global': {\r\n '@font-face': [gilroy]\r\n },\r\n },\r\n MuiListItem: {\r\n root: {\r\n \"&$selected\": {\r\n backgroundColor: colorPanel.secondary.dark\r\n }\r\n }\r\n },\r\n MuiMenu: {\r\n list: {\r\n backgroundColor: colorPanel.form.baseLight\r\n }\r\n },\r\n MuiTextField: {\r\n root: {\r\n '& ::-webkit-calendar-picker-indicator': {\r\n filter: \"invert(1)\"\r\n }\r\n }\r\n }\r\n },\r\n type: colorPanel.type,\r\n zIndex: {\r\n appBar: 1200,\r\n drawer: 1100\r\n }\r\n});\r\n\r\nexport const appLightTheme = createMuiTheme({\r\n palette: lightPanel,\r\n typography,\r\n overrides: {\r\n MuiCssBaseline: {\r\n '@global': {\r\n '@font-face': [gilroy],\r\n '::-webkit-scrollbar-thumb' : {\r\n background: lightPanel.white,\r\n borderRadius: '10px',\r\n border: `2px solid ${lightPanel.table.scrollBorder}`\r\n }\r\n }\r\n },\r\n MuiSelect: {\r\n icon: {\r\n color: lightPanel.white\r\n }\r\n },\r\n MuiTextField: {\r\n root: {\r\n '& ::-webkit-calendar-picker-indicator': {\r\n filter: \"invert(0)\"\r\n }\r\n }\r\n }\r\n },\r\n type: lightPanel.type,\r\n zIndex: {\r\n appBar: 1200,\r\n drawer: 1100\r\n }\r\n});\r\n\r\nexport const testTheme = createMuiTheme({\r\n palette: colorPanel,\r\n typography,\r\n type: colorPanel.type,\r\n zIndex: {\r\n appBar: 1200,\r\n drawer: 1100\r\n }\r\n});\r\n\r\nexport const chartElementStyles = (theme => ({\r\n root: {\r\n height: theme.spacing(42),\r\n position: 'relative',\r\n [theme.breakpoints.down('sm')]: {\r\n marginBottom: theme.spacing(4)\r\n },\r\n },\r\n link: {\r\n color: colorPanel.secondary.accent,\r\n cursor: 'pointer',\r\n textDecoration: 'none'\r\n },\r\n spining: {\r\n pointerEvents: \"none\",\r\n height: '0.9em',\r\n animation: \"App-logo-spin infinite 1s linear !important\"\r\n },\r\n spin: {\r\n height: '0.9em',\r\n cursor: \"pointer\",\r\n },\r\n refreshIcon: {\r\n position: 'absolute',\r\n right: theme.spacing(2),\r\n top: '51%',\r\n transform: 'translateY(-50%)'\r\n\r\n },\r\n label: {\r\n color: theme.palette.menu.base\r\n },\r\n verticalDivider: {\r\n flexBasis: '2px',\r\n \"& hr\": {\r\n padding: 0,\r\n backgroundColor: 'transparent',\r\n borderLeft: `2px dashed ${theme.palette.divider}`,\r\n }\r\n },\r\n count: {\r\n fontSize: theme.spacing(6)\r\n },\r\n container: {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n transform: \"translateY(-35%)\",\r\n textAlign: \"center\",\r\n width: \"100%\",\r\n verticalDivider_solid: {\r\n flexBasis: '2px',\r\n \"& hr\": {\r\n padding: 0,\r\n backgroundColor: 'transparent',\r\n borderLeft: `2px solid ${theme.palette.divider}`,\r\n }\r\n },\r\n },\r\n hyperlink: {\r\n cursor: 'pointer',\r\n textDecoration: 'underline',\r\n letterSpacing: '1px',\r\n padding: theme.spacing(.4),\r\n '&:hover': {\r\n color: theme.palette.link.hover\r\n }\r\n },\r\n card: {\r\n backgroundColor: theme.palette.primary.base\r\n },\r\n pbZero: {\r\n paddingBottom: 0\r\n },\r\n ptZero: {\r\n paddingTop: 0\r\n },\r\n minHeight: {\r\n height: 'fit-content',\r\n minHeight: 336\r\n },\r\n notransform: {\r\n textTransform: \"none\"\r\n }\r\n}));\r\n\r\n\r\nexport const cardStyles = (theme) => ({\r\n root: {\r\n display: 'block',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n height: \"100%\",\r\n borderRadius: '6px',\r\n backgroundColor: theme.palette.card.default,\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n },\r\n addPadding: {\r\n paddingBottom: theme.spacing(2)\r\n },\r\n content: {\r\n paddingBottom: 0,\r\n padding: '12px 0px 0px',\r\n },\r\n title: {\r\n padding: theme.spacing(1.5),\r\n position: 'relative',\r\n textTransform: 'uppercase'\r\n\r\n },\r\n actions: {\r\n display: 'block',\r\n marginLeft: theme.spacing(1),\r\n bottom: theme.spacing(2),\r\n position: 'absolute',\r\n width: `${theme.spacing(12)}%`\r\n },\r\n divider: {\r\n padding: 0,\r\n height: '2.03px',\r\n marginLeft: -(theme.spacing(1)),\r\n marginRight: -(theme.spacing(1)),\r\n backgroundColor: theme.palette.secondary.base\r\n },\r\n innercard: {\r\n backgroundColor: theme.palette.card.base,\r\n paddingLeft: theme.spacing(1),\r\n paddingRight: theme.spacing(1),\r\n position: \"relative\"\r\n // marginTop: theme.spacing(0),\r\n // marginBottom: theme.spacing(0),\r\n }\r\n});\r\n\r\n\r\nexport const filterStyles = (theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n position: 'absolute',\r\n marginTop: 10,\r\n marginRight: theme.spacing(3),\r\n right: 0,\r\n zIndex: 100,\r\n width: 350,\r\n borderRadius: 0,\r\n backgroundColor: theme.palette.chip.backgroundDefault,\r\n height: '80vh',\r\n overflow: 'auto'\r\n },\r\n shifttab: {\r\n marginLeft: theme.spacing(1)\r\n },\r\n show: {\r\n display: 'block'\r\n },\r\n hide: {\r\n display: 'none'\r\n },\r\n container: {\r\n paddingRight: theme.spacing(2),\r\n paddingLeft: theme.spacing(2),\r\n },\r\n title: {\r\n position: \"sticky\",\r\n top: 0,\r\n zIndex: 999,\r\n backgroundColor: theme.palette.extra.filterTitle,\r\n fontFamily: 'Gilroy',\r\n padding: theme.spacing(2),\r\n color: theme.palette.white\r\n },\r\n serchSpace: {\r\n backgroundColor: theme.palette.chip?.tableChips,\r\n padding: theme.spacing(2),\r\n paddingTop: theme.spacing(3),\r\n paddingBottom: theme.spacing(3),\r\n },\r\n actions: {\r\n backgroundColor: theme.palette.extra.filterActions\r\n },\r\n subtitle: {\r\n fontFamily: 'Gilroy',\r\n fontSize: 12,\r\n fontWeight: 200,\r\n letterSpacing: 0.5,\r\n color: theme.palette.primary.contrastText\r\n },\r\n search: {\r\n position: 'relative',\r\n borderRadius: theme.shape.borderRadius,\r\n // backgroundColor: fade(theme.palette.common.white, 0.15),\r\n backgroundColor: theme.palette.extra.filterTitle,\r\n '&:hover': {\r\n // backgroundColor: fade(theme.palette.common.white, 0.25),\r\n backgroundColor: theme.palette.extra.filterTitle,\r\n },\r\n marginLeft: 0,\r\n height: 40,\r\n width: '100%',\r\n border: `1px solid #303862`,\r\n marginTop: 4,\r\n color: theme.palette.primary.contrastText\r\n\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 2),\r\n height: '100%',\r\n position: 'absolute',\r\n pointerEvents: 'none',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n inputRoot: {\r\n color: 'inherit',\r\n },\r\n inputInput: {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n transition: theme.transitions.create('width'),\r\n width: '100%',\r\n [theme.breakpoints.up('sm')]: {\r\n width: '12ch',\r\n '&:focus': {\r\n width: '20ch',\r\n },\r\n },\r\n },\r\n controls: {\r\n // height: 45,\r\n display: 'flex',\r\n alignContent: 'left',\r\n justifyContent: 'middle',\r\n cursor: 'pointer'\r\n },\r\n controlText: {\r\n color: theme.palette.extra.iron,\r\n fontSize: 14,\r\n letterSpacing: 0,\r\n textDecoration: 'underline',\r\n userSelect: \"none\",\r\n cursor: \"pointer\",\r\n },\r\n button: {\r\n cursor: 'pointer',\r\n userSelect: \"none\",\r\n },\r\n expandButton: {\r\n cursor: 'pointer',\r\n userSelect: \"none\",\r\n pointerEvents: 'none'\r\n },\r\n boxTitle: {\r\n fontFamily: \"Gilroy\",\r\n fontSize: 14,\r\n fontWeight: 300,\r\n letterSpacing: 0.58,\r\n textTransform: \"uppercase\"\r\n },\r\n openBox: {\r\n backgroundColor: theme.palette.background.filters,\r\n },\r\n closedBox: {\r\n backgroundColor: theme.palette.extra.expandFilter,\r\n },\r\n border: {\r\n borderBottom: `2px solid ${theme.palette.extra.filterBorder}`\r\n },\r\n contentBox: {\r\n height: \"100%\",\r\n padding: theme.spacing(2)\r\n },\r\n breakWord:{\r\n wordWrap: \"break-word\"\r\n },\r\n contentText: {\r\n fontFamily: \"Gilroy\",\r\n fontSize: 16,\r\n color: theme.palette.primary.contrastText\r\n },\r\n customerFilterRoot: {\r\n borderRight: `1px solid ${theme.palette.primary.contrastText}`,\r\n padding: `${theme.spacing(2)}px ${theme.spacing(2)}px !important`,\r\n marginTop: theme.spacing(2),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n borderRight: \"none\",\r\n padding: `${theme.spacing(0)}px ${theme.spacing(2)}px !important`,\r\n }\r\n },\r\n underline: {\r\n textDecoration: 'underline'\r\n },\r\n label: {\r\n textTransform: \"capitalize\"\r\n },\r\n accordian: {\r\n background: \"transparent !important\",\r\n boxShadow: \"none\",\r\n },\r\n accordianSummary: {\r\n minHeight: \"10px !important\",\r\n padding: 0,\r\n opacity: \"1 !important\",\r\n \"& > .Mui-expanded\": {\r\n margin: `0 !important`,\r\n }\r\n },\r\n accordianDetails: {\r\n display: \"block\",\r\n padding: 0,\r\n },\r\n modal: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n modalbody: {\r\n background: theme.palette.chip.backgroundDefault,\r\n boxShadow: theme.shadows[5],\r\n width: \"90%\",\r\n position: \"relative\",\r\n height: 500,\r\n maxHeight: '700px',\r\n overflow: \"auto\",\r\n padding: theme.spacing(2),\r\n '&:focus-visible': {\r\n outline: 'none'\r\n }\r\n },\r\n modalbutton: {\r\n padding: theme.spacing(2, 2, 1)\r\n },\r\n closeicon: {\r\n position: \"absolute\",\r\n right: theme.spacing(1),\r\n top: theme.spacing(1),\r\n zIndex: 1000\r\n },\r\n inputGroup: {\r\n color: theme.palette.primary.contrastText\r\n },\r\n customerBox: {\r\n padding: `8.5px ${theme.spacing(1)}px`,\r\n borderRadius: theme.spacing(0.5),\r\n backgroundColor: theme.palette.background.primaryBase,\r\n color: theme.palette.white,\r\n cursor: 'pointer',\r\n '&:hover' : {\r\n backgroundColor: theme.palette?.background?.secondaryBase\r\n }\r\n },\r\n checkbox: {\r\n display: 'grid',\r\n width: 310,\r\n maxHeight: 300,\r\n overflowX: \"auto\",\r\n // flexDirection: \"row\"\r\n }\r\n})\r\n\r\nexport const tableStyles = (theme) => ({\r\n root: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n padding: 0\r\n },\r\n },\r\n expand: {\r\n backgroundColor: theme.palette.card.base,\r\n padding: theme.spacing(4),\r\n width: \"70%\",\r\n },\r\n outline: {\r\n backgroundColor: theme.palette.card.base,\r\n },\r\n grid: {\r\n borderBotton: '1px solid red',\r\n padding: theme.spacing(1)\r\n },\r\n text: {\r\n textTransform: \"uppercase\",\r\n fontFamily: 'Gilroy',\r\n letterSpacing: '0.1em'\r\n\r\n },\r\n subtext: {\r\n marginTop: -3,\r\n fontSize: \"13px\",\r\n lineHeight: \"25px\",\r\n fontFamily: 'Gilroy',\r\n // paddingLeft: theme.spacing(3),\r\n letterSpacing: '0.03em'\r\n },\r\n location: {\r\n // width: \"250px\",\r\n height: '45px',\r\n flexGrow: 1,\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n border: `1px solid gray`,\r\n paddingTop: 15,\r\n textTransform: 'capitalize'\r\n },\r\n align: {\r\n display: 'flex',\r\n alignContent: 'left',\r\n justifyContent: 'middle',\r\n marginRight: theme.spacing(2),\r\n },\r\n filtericon: {\r\n border: '1px solid white',\r\n borderRadius: '50%',\r\n height: 30,\r\n width: 30,\r\n padding: 5\r\n },\r\n table: {\r\n width: '100%',\r\n marginTop: theme.spacing(2),\r\n '& div::-webkit-scrollbar': {\r\n height: `${theme.spacing(1.5)}px !important`,\r\n width: `${theme.spacing(1.5)}px !important`,\r\n\r\n },\r\n '& div::-webkit-scrollbar-track': {\r\n border: `5px solid ${theme.palette.primary.base}`,\r\n borderRadius: 0,\r\n background: theme.palette.divider\r\n },\r\n '& div::-webkit-scrollbar-thumb': {\r\n background: theme.palette.table.scrollColor,\r\n borderRadius: '10px',\r\n border: `2px solid ${theme.palette.table.scrollBorder}`\r\n },\r\n },\r\n etabutton: {\r\n cursor: \"pointer\",\r\n color: theme.palette.secondary.accent,\r\n \"&:hover\": {\r\n color: theme.palette.link.hover\r\n }\r\n },\r\n smallimage: {\r\n height: theme.spacing(2),\r\n width: theme.spacing(2),\r\n marginRight: theme.spacing(1),\r\n marginLeft: theme.spacing(1),\r\n },\r\n item: {\r\n paddingTop: `0px !important`\r\n },\r\n item1: {\r\n marginTop: theme.spacing(3),\r\n }\r\n})\r\n\r\nexport const viewStyles = ((theme) => ({\r\n marginTop: {\r\n marginTop: theme.spacing(1)\r\n },\r\n separator: {\r\n \"& >div\": {\r\n marginTop: theme.spacing(4),\r\n marginBottom: theme.spacing(4)\r\n }\r\n },\r\n hide: {\r\n visibility: 'hidden',\r\n display: 'none'\r\n },\r\n expand: {\r\n marginTop: theme.spacing(1),\r\n display: 'block',\r\n textTransform: \"capitalize\",\r\n },\r\n addPadding: {\r\n [theme.breakpoints.up('md')]: {\r\n padding: `0px ${theme.spacing(1)}px`\r\n },\r\n [theme.breakpoints.between('xs', 'md')]: {\r\n padding: `${theme.spacing(2)}px ${theme.spacing(1)}px`\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n padding: '0px'\r\n }\r\n },\r\n extendTitle: {\r\n marginTop: theme.spacing(2),\r\n padding: `0 ${theme.spacing(0)}px`,\r\n \"& >div\": {\r\n borderBottom: `2px solid ${theme.palette.secondary.accent}`\r\n },\r\n \"& >div:first-child\": {\r\n flexBasis: \"79.5%\",\r\n maxWidth: \"80%\"\r\n },\r\n \"& >div:nth-child(2)\": {\r\n flexBasis: \"19.5%\",\r\n maxWidth: \"20%\"\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n display: \"none\"\r\n },\r\n },\r\n modalBody: {\r\n overflow: \"auto\"\r\n },\r\n scrLinkbutton: {\r\n cursor: \"pointer\",\r\n color: theme.palette.secondary.lightCyanBlue,\r\n [theme.breakpoints.down('sm')]: {\r\n paddingLeft: theme.spacing(2),\r\n },\r\n fontSize: theme.spacing(2),\r\n // \"&:hover\": {\r\n // color: theme.palette.link.hover\r\n // }\r\n },\r\n arrowImg: {\r\n paddingLeft: theme.spacing(2)\r\n }\r\n}))\r\n\r\n\r\nexport const itemDetailsStyles = ((theme) => ({\r\n root: {\r\n },\r\n tablebody: {\r\n padding: theme.spacing(5),\r\n },\r\n title: {\r\n paddingBottom: theme.spacing(1)\r\n },\r\n table: {\r\n marginTop: theme.spacing(2),\r\n fontSize: \"14px\"\r\n }\r\n}));\r\n\r\nexport const selectStyles = theme => ({\r\n root: {\r\n \"& > div > ul\": {\r\n maxHeight: theme.spacing(50),\r\n overflow: \"auto\",\r\n '&::-webkit-scrollbar': {\r\n height: `${theme.spacing(1.5)}px !important`,\r\n width: `${theme.spacing(1.5)}px !important`,\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n border: `5px solid ${theme.palette.text.underline}`,\r\n borderRadius: 0,\r\n background: theme.palette.divider\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n background: theme.palette.divider,\r\n borderRadius: '10px',\r\n border: `2px solid ${theme.palette.white}`\r\n },\r\n }\r\n },\r\n button: {\r\n display: 'flex',\r\n border: `1px solid ${theme.palette.white}`,\r\n minWidth: 200,\r\n borderRadius: '4px',\r\n padding: theme.spacing(2),\r\n '& .MuiButton-label': {\r\n justifyContent: 'space-between'\r\n },\r\n cursor: 'pointer',\r\n textTransform: 'initial',\r\n [theme.breakpoints.down(\"sm\")]: {\r\n minWidth: \"auto\"\r\n }\r\n },\r\n lowercase: {\r\n textTransform: 'lowercase',\r\n },\r\n text: {\r\n pointerEvents: 'none',\r\n },\r\n textTransform: {\r\n pointerEvents: 'none',\r\n \"&:first-letter\": {\r\n textTransform: 'initial'\r\n },\r\n },\r\n business: {\r\n textAlign: 'left',\r\n minWidth: theme.spacing(20),\r\n height: theme.spacing(5),\r\n justifyContent: \"space-between\",\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n },\r\n capitalize: {\r\n textTransform: 'capitalize'\r\n },\r\n icon: {\r\n color: theme.palette.black,\r\n },\r\n menuList: {\r\n backgroundColor: theme.palette.white,\r\n color: theme.palette.black\r\n },\r\n menuItem: {\r\n '&:hover': {\r\n backgroundColor: \"rgba(0, 0, 0, 0.05)\",\r\n },\r\n '&:focus': {\r\n backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n '&:hover': {\r\n backgroundColor: \"rgba(0, 0, 0, 0.05)\",\r\n },\r\n },\r\n },\r\n popper: {\r\n width: 198,\r\n borderRadius: '50%',\r\n zIndex: 9\r\n },\r\n toplabel: {\r\n top: theme.spacing(1.5), //15\r\n width: \"fit-content\",\r\n zIndex: 100,\r\n color: theme.palette.white,\r\n border: `1px solid ${theme.palette.white}`,\r\n paddingLeft: theme.spacing(1),\r\n borderRadius: theme.spacing(0.6),\r\n paddingRight: theme.spacing(1),\r\n paddingBottom: theme.spacing(0.2),\r\n backgroundColor: theme.palette.secondary.base,\r\n position: 'absolute',\r\n marginLeft: theme.spacing(1),\r\n fontSize: 11,\r\n },\r\n})\r\n\r\n\r\nexport const mapStyles = theme => ({\r\n root: {\r\n },\r\n map: {\r\n height: (props) => {\r\n return `${props.parentHeight}px !important`;\r\n },\r\n width: (props) => {\r\n return `${props.parentWidth}px !important`;\r\n }\r\n },\r\n tooltip: {\r\n textAlign: 'left',\r\n paddingLeft: theme.spacing(1),\r\n },\r\n subtitle: {\r\n fontSize: 14,\r\n color: theme.palette.black,\r\n fontWeight: 500,\r\n },\r\n tooltipname: {\r\n fontSize: 16,\r\n marginBottom: 5,\r\n fontWeight: \"bold\",\r\n width: 'fit-content',\r\n color: theme.palette.black,\r\n cursor: 'pointer',\r\n textDecoration: 'underline'\r\n },\r\n legend: {\r\n minWidth: 400,\r\n textAlign: 'left',\r\n bottom: `${theme.spacing(1)}px !important`\r\n },\r\n circle: {\r\n borderRadius: '50%',\r\n width: 20,\r\n height: 20\r\n },\r\n redFill: {\r\n backgroundColor: theme.palette.legendColors.unhealthy\r\n },\r\n blueFill: {\r\n backgroundColor: theme.palette.legendColors.healthy\r\n },\r\n image: {\r\n width: 20\r\n },\r\n healthy: {\r\n borderLeft: `6px solid ${theme.palette.legendColors.healthyGreen}`,\r\n },\r\n critical: {\r\n borderLeft: `6px solid ${theme.palette.legendColors.criticalRed}`,\r\n },\r\n behind: {\r\n borderLeft: `6px solid ${theme.palette.legendColors.pink}`,\r\n },\r\n monitor: {\r\n borderLeft: `6px solid ${theme.palette.legendColors.risk}`,\r\n }\r\n});\r\n\r\nexport const shipmentStyles = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n width: '100%',\r\n backgroundColor: \"transparent\",\r\n },\r\n appbar: {\r\n background: \"transparent\",\r\n borderBottom: `1px solid ${theme.palette.white}`,\r\n },\r\n tab: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n flexBasis: \"50%\"\r\n }\r\n },\r\n tabName: {\r\n textAlign: \"center\",\r\n cursor: 'pointer',\r\n },\r\n shipmentNumber: {\r\n fontSize: theme.spacing(4),\r\n fontWeight: \"500\"\r\n },\r\n leftBox: {\r\n borderRight: `2px solid ${theme.palette.white}`,\r\n \"& > div\": {\r\n marginBottom: theme.spacing(4)\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n borderRight: 'none',\r\n \"& > div\": {\r\n marginBottom: theme.spacing(2)\r\n },\r\n }\r\n },\r\n container: {\r\n margin: `${theme.spacing(4)}px 0px`,\r\n [theme.breakpoints.down(\"sm\")]: {\r\n padding: `0px ${theme.spacing(3)}px`,\r\n }\r\n },\r\n tabPanel: {\r\n background: theme.palette.text.underline\r\n },\r\n stops: {\r\n background: theme.palette.secondary.dark,\r\n borderRadius: theme.spacing(.5),\r\n padding: `${theme.spacing(4)}px ${theme.spacing(2)}px`,\r\n margin: `${theme.spacing(2.5)}px 0px`,\r\n [theme.breakpoints.down(\"sm\")]: {\r\n padding: theme.spacing(2),\r\n width: \"100%\"\r\n }\r\n },\r\n component: {\r\n marginTop: theme.spacing(8)\r\n }\r\n})\r\n\r\nexport const tabsBarStyles = (theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n width: '100%',\r\n },\r\n appbar: {\r\n background: theme.palette.secondary.dark,\r\n paddingLeft: theme.spacing(5),\r\n paddingRight: theme.spacing(5),\r\n [theme.breakpoints.down('xs')]: {\r\n paddingRight: theme.spacing(2),\r\n paddingLeft: theme.spacing(2),\r\n },\r\n },\r\n tabpanel: {\r\n },\r\n tabName: {\r\n float: 'left',\r\n textAlign: \"left\",\r\n display: 'flex'\r\n },\r\n name: {\r\n textAlign: \"left\",\r\n color: theme.palette.whte,\r\n pointerEvents: 'none',\r\n whiteSpace: 'nowrap',\r\n display: 'inline-block',\r\n overflow: 'hidden',\r\n marginTop: theme.spacing(.25),\r\n textTransform: 'capitalize'\r\n },\r\n icon: {\r\n display: 'inline-block',\r\n paddingRight: 10,\r\n },\r\n addButton: {\r\n color: \"white\",\r\n cursor: 'pointer'\r\n },\r\n showTabs: {\r\n display: 'flex',\r\n borderLeft: `3px solid ${theme.palette.white}`,\r\n marginLeft: theme.spacing(2)\r\n },\r\n showSingleLocation: {\r\n display: 'flex',\r\n },\r\n customtab: {\r\n maxWidth: '100%'\r\n },\r\n hideTabs: {\r\n display: 'none'\r\n },\r\n viewmore: {\r\n borderRadius: '3px',\r\n border: `1px solid ${theme.palette.secondary.accent}`,\r\n padding: theme.spacing(.5),\r\n textTransform: 'capitalize'\r\n },\r\n})\r\n\r\nexport const performanceTableStyle = (theme) => ({\r\n main: {\r\n maxHeight: '550px',\r\n overflow: 'auto',\r\n '&::-webkit-scrollbar': {\r\n height: `${theme.spacing(1.5)}px !important`,\r\n width: `${theme.spacing(1.5)}px !important`,\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n border: `5px solid ${theme.palette.text.underline}`,\r\n borderRadius: 0,\r\n background: theme.palette.divider\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n background: theme.palette.divider,\r\n borderRadius: '10px',\r\n border: `2px solid ${theme.palette.white}`\r\n },\r\n },\r\n innerCard: {\r\n minHeight: props => theme.spacing(props.singleLocation ? 0 : 45),\r\n width: \"100%\",\r\n backgroundColor: theme.palette.card.base\r\n },\r\n title: {\r\n paddingTop: theme.spacing(2)\r\n },\r\n legends: {\r\n display: 'inline-flex',\r\n paddingTop: theme.spacing(0),\r\n paddingBottom: theme.spacing(1.25),\r\n flexFlow: `row nowrap`\r\n },\r\n sitecolumn: {\r\n paddingLeft: theme.spacing(1.5)\r\n },\r\n aheadcolumn: {\r\n paddingLeft: theme.spacing(0.5)\r\n },\r\n hourcolumn: {\r\n paddingRight: theme.spacing(1),\r\n textAlign: 'end'\r\n },\r\n icons: {\r\n marginLeft: 'auto',\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(3)\r\n\r\n }\r\n },\r\n nodata: {\r\n width: '75%'\r\n },\r\n link: {\r\n cursor: 'pointer',\r\n textDecoration: 'underline',\r\n \"&:hover\": {\r\n color: theme.palette.secondary.accent\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: theme.spacing(1.25),\r\n whiteSpace: \"nowrap\"\r\n }\r\n },\r\n filters: {\r\n width: theme.spacing(37.5),\r\n height: theme.spacing(50),\r\n backgroundColor: theme.palette.secondary.base,\r\n padding: theme.spacing(1.5),\r\n [theme.breakpoints.down('sm')]: {\r\n width: \"auto\",\r\n height: \"auto\",\r\n marginBottom: theme.spacing(2)\r\n }\r\n },\r\n tableBody: {\r\n marginBottom: theme.spacing(1.25),\r\n height: theme.spacing(2.75)\r\n },\r\n tableHeader: {\r\n marginBottom: theme.spacing(6)\r\n },\r\n aheadicon: {\r\n paddingLeft: theme.spacing(2.5)\r\n },\r\n behindicon: {\r\n paddingLeft: theme.spacing(2.25)\r\n },\r\n chart: {\r\n position: \"relative\",\r\n top: `-${theme.spacing(6)}px`,\r\n }\r\n})\r\n\r\n\r\nexport const filterbarStyles = (theme) => ({\r\n root: {\r\n paddingBottom: theme.spacing(2),\r\n marginTop: theme.spacing(9.5),\r\n paddingRight: theme.spacing(5),\r\n paddingLeft: theme.spacing(5),\r\n borderRadius: 0,\r\n backgroundColor: theme.palette.filterbar,\r\n borderBottom: `1px solid ${theme.palette.border}`,\r\n [theme.breakpoints.down('sm')]: {\r\n paddingRight: theme.spacing(2),\r\n paddingLeft: theme.spacing(2),\r\n },\r\n },\r\n dropdown: {\r\n position: 'absolute',\r\n top: 124,\r\n right: 1,\r\n left: 1,\r\n margin: 0,\r\n zIndex: 1,\r\n width: 'auto',\r\n height: '436px',\r\n padding: theme.spacing(1),\r\n },\r\n filter: {\r\n display: 'flex',\r\n alignContent: 'left',\r\n justifyContent: 'middle',\r\n marginRight: theme.spacing(2),\r\n },\r\n location: {\r\n width: theme.spacing(29),\r\n height: theme.spacing(5),\r\n flexGrow: 1,\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n border: `1px solid ${theme.palette.border}`,\r\n textTransform: 'capitalize',\r\n [theme.breakpoints.down(\"xs\")]: {\r\n minWidth: theme.spacing(16),\r\n maxWidth: theme.spacing(23),\r\n\r\n }\r\n },\r\n text: {\r\n marginRight: theme.spacing(2),\r\n },\r\n textHead: {\r\n marginRight: theme.spacing(2)\r\n },\r\n othertext: {\r\n marginRight: theme.spacing(1),\r\n\r\n },\r\n showfavs: {\r\n width: theme.spacing(20),\r\n marginLeft: 0,\r\n marginRight: 0,\r\n },\r\n // chipsBox: {\r\n // marginLeft: theme.spacing(2),\r\n // marginRight: theme.spacing(2),\r\n // },\r\n chip: {\r\n border: `1px solid ${theme.palette.border}`,\r\n backgroundColor: theme.palette.secondary.dark,\r\n margin: theme.spacing(0.5),\r\n },\r\n})\r\n\r\nexport const locationfilterlayoutStyles = (theme) => ({\r\n root: {\r\n margin: 0,\r\n width: 'auto',\r\n borderRadius: 0,\r\n zIndex: \"999\",\r\n '& div::-webkit-scrollbar': {\r\n height: `${theme.spacing(1.5)}px !important`,\r\n width: `${theme.spacing(1.5)}px !important`,\r\n\r\n },\r\n '& div::-webkit-scrollbar-track': {\r\n border: `5px solid ${theme.palette.secondary.base}`,\r\n borderRadius: 0,\r\n background: theme.palette.divider\r\n },\r\n '& div::-webkit-scrollbar-thumb': {\r\n background: theme.palette.divider,\r\n borderRadius: '10px',\r\n border: `2px solid ${theme.palette.white}`\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: `${theme.spacing(15.25)}px`,\r\n height: \"auto\"\r\n }\r\n },\r\n overflow: {\r\n height: theme.spacing(50),\r\n overflowX: 'auto',\r\n paddingTop: theme.spacing(2),\r\n paddingLeft: theme.spacing(2),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n height: \"auto\"\r\n }\r\n },\r\n overflowLocations: {\r\n maxHeight: theme.spacing(35),\r\n overflowX: 'auto',\r\n marginTop: theme.spacing(3),\r\n paddingBottom: theme.spacing(3),\r\n '&>div': {\r\n padding: `0px ${theme.spacing(4)}px`,\r\n },\r\n '& >div:not(:nth-child(3n))': {\r\n borderRight: '1px solid'\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n maxHeight: theme.spacing(40),\r\n '&>div': {\r\n padding: `0px ${theme.spacing(2)}px`,\r\n },\r\n '& >div:not(:nth-child(3n))': {\r\n borderRight: 'none'\r\n },\r\n '& >div:nth-child(odd)': {\r\n borderRight: '1px solid'\r\n },\r\n }\r\n },\r\n height: {\r\n height: theme.spacing(25),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n height: \"40vh\"\r\n }\r\n },\r\n favorites: {\r\n backgroundColor: theme.palette.secondary.base,\r\n height: theme.spacing(65),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n height: \"auto\"\r\n }\r\n },\r\n locations: {\r\n padding: theme.spacing(3),\r\n height: theme.spacing(65),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n height: \"auto\",\r\n padding: theme.spacing(2),\r\n paddingBottom: theme.spacing(11)\r\n }\r\n },\r\n actionButton: {\r\n textTransform: 'capitalize',\r\n position: 'absolute',\r\n bottom: theme.spacing(2.5),\r\n color: theme.palette.primary.contrastText,\r\n border: `1px solid ${theme.palette.primary.contrastText}`\r\n },\r\n actionButtonCUSO: {\r\n bottom: \"-56px\",\r\n '&:hover': {\r\n backgroundColor: theme.palette.primary.hover\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n bottom: `-${theme.spacing(12)}px`\r\n }\r\n },\r\n closeicon: {\r\n position: \"absolute\",\r\n right: 25,\r\n top: 25,\r\n cursor: \"pointer\"\r\n },\r\n formControl: {\r\n border: `white`,\r\n borderRadius: '5px'\r\n },\r\n input: {\r\n },\r\n textField: {\r\n color: theme.palette.primary.contrastText,\r\n marginLeft: theme.spacing(2),\r\n marginRight: theme.spacing(2),\r\n width: 200,\r\n },\r\n center: {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n textAlign: 'center',\r\n },\r\n cssLabel: {\r\n color: theme.palette.primary.contrastText\r\n },\r\n\r\n cssOutlinedInput: {\r\n color: theme.palette.primary.contrastText,\r\n '&$cssFocused $notchedOutline': {\r\n borderColor: `${theme.palette.primary.contrastText} !important`,\r\n }\r\n },\r\n insidefilter: {\r\n marginBottom: theme.spacing(1)\r\n },\r\n menuitem: {\r\n color: 'black'\r\n },\r\n notchedOutline: {\r\n color: theme.palette.primary.contrastText,\r\n\r\n borderWidth: '1px',\r\n borderColor: `${theme.palette.primary.contrastText} !important`\r\n },\r\n noresultContainer: {\r\n height: theme.spacing(10)\r\n },\r\n link: {\r\n color: theme.palette.secondary.accent\r\n },\r\n searchCountText: {\r\n color: theme.palette.legendColors.greyLight\r\n },\r\n searchBar: {\r\n position: \"absolute\",\r\n top: \"45%\",\r\n transform: \"translateY(-45%)\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n position: \"static\",\r\n marginTop: theme.spacing(3),\r\n minWidth: theme.spacing(18)\r\n }\r\n }\r\n})\r\n\r\nexport const searchFilterStyles = (theme) => ({\r\n root: {\r\n flexGrow: 1\r\n },\r\n search: {\r\n position: \"relative\",\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: theme.palette.chip.backgroundDefault,\r\n border: `1px solid ${theme.palette.primary.contrastText}`,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.secondary.hover\r\n },\r\n width: \"100%\",\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 2),\r\n height: \"100%\",\r\n position: \"absolute\",\r\n pointerEvents: \"none\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\"\r\n },\r\n inputRoot: {\r\n },\r\n inputInput: {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n },\r\n customInput1: {\r\n border: `1px solid`,\r\n borderRadius: theme.spacing(.5)\r\n }\r\n})\r\n\r\nexport const KCReactTabs = (theme) => ({\r\n tabs: {\r\n width: \"100%\",\r\n \"& .react-tabs__tab--selected[aria-selected='true']\": {\r\n background: \"transparent\",\r\n border: \"none\",\r\n color: theme.palette.primary.contrastText,\r\n borderBottom: `5px solid ${theme.palette.secondary.accent}`,\r\n }\r\n }\r\n})\r\n\r\nexport const mainLayoutStyles = theme => ({\r\n mainLayoutContainer: {\r\n paddingTop: theme.spacing(2),\r\n position: 'relative',\r\n height: '100%',\r\n [theme.breakpoints.up('xs')]: {\r\n marginRight: theme.spacing(0),\r\n marginLeft: theme.spacing(0),\r\n }\r\n },\r\n shiftContent: {},\r\n content: {\r\n height: '100%'\r\n },\r\n filter: {\r\n marginTop: '65px',\r\n height: 200\r\n },\r\n timerBox: {\r\n position: 'relative',\r\n },\r\n timer: {\r\n position: 'absolute',\r\n right: 20,\r\n fontSize: 13,\r\n color: 'gray',\r\n top: 0,\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: theme.spacing(2),\r\n textAlign: 'right',\r\n maxWidth: theme.spacing(12)\r\n }\r\n },\r\n padding: {\r\n padding: theme.spacing(3),\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(0),\r\n }\r\n }\r\n})\r\n\r\nexport const selfAlertingStyles = (theme) => ({\r\n root: {\r\n '& > *': {\r\n margin: theme.spacing(1),\r\n width: '25ch',\r\n },\r\n },\r\n buttongroup: {\r\n textAlign: \"center\",\r\n marginBottom: theme.spacing(2),\r\n '& > *': {\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n chip: {\r\n border: `1px solid ${theme.palette.border}`,\r\n backgroundColor: theme.palette.secondary.dark,\r\n margin: theme.spacing(0.5),\r\n },\r\n allcards: {\r\n marginTop: theme.spacing(8)\r\n },\r\n margintop: {\r\n marginTop: theme.spacing(2)\r\n },\r\n component: {\r\n paddingTop: theme.spacing(8)\r\n },\r\n title: {\r\n fontSize: 18,\r\n textTransform: \"uppercase\"\r\n },\r\n uppercase: {\r\n textTransform: \"uppercase\",\r\n fontSize: 14\r\n },\r\n divider: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1)\r\n },\r\n text: {\r\n maxWidth: 500\r\n },\r\n marginleft: {\r\n marginLeft: theme.spacing(1)\r\n },\r\n grid: {\r\n padding: theme.spacing(2)\r\n },\r\n formelement: {\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(2),\r\n },\r\n linearprogress: {\r\n height: 1\r\n },\r\n absolute: {\r\n flexGrow: 1,\r\n padding: theme.spacing(2),\r\n position: 'absolute',\r\n zIndex: 100,\r\n width: \"100%\",\r\n borderRadius: 0,\r\n maxHeight: 500,\r\n overflow: \"auto\",\r\n backgroundColor: theme.palette.secondary.base,\r\n }\r\n})\r\n\r\nexport const breadCrumbStyles = (theme) => ({\r\n root: {\r\n '& > * + *': {\r\n marginTop: theme.spacing(0),\r\n },\r\n },\r\n main: {\r\n marginTop: theme.spacing(1.5),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n paddingLeft: theme.spacing(2)\r\n }\r\n },\r\n backbutton: {\r\n textTransform: 'none !important',\r\n marginRight: theme.spacing(2),\r\n marginTop: theme.spacing(2),\r\n background: theme.palette.background.default,\r\n color: theme.palette.primary.main,\r\n '&:hover': {\r\n color: theme.palette.primary.main,\r\n background: theme.palette.background.default,\r\n }\r\n },\r\n link: {\r\n color: 'inherit',\r\n textDecoration: 'inherit'\r\n },\r\n activeLink: {\r\n color: theme.palette.white\r\n },\r\n activeLinkDark: {\r\n color: theme.palette.black\r\n },\r\n activeLinkLight: {\r\n color: theme.palette.text?.subtitle\r\n },\r\n doccLink: {\r\n color: theme.palette.text?.link\r\n }\r\n})\r\n\r\nexport const osmSelectStyles = (theme) => ({\r\n formControl: {\r\n padding: `${theme.spacing(0.5)}px 0px ${theme.spacing(0.5)}px ${theme.spacing(1)}px`,\r\n minWidth: 180,\r\n maxWidth: 300,\r\n borderRadius: theme.spacing(0.5),\r\n backgroundColor: theme.palette?.background?.primaryBase,\r\n '&:hover' : {\r\n backgroundColor: theme.palette?.background?.secondaryBase\r\n }\r\n },\r\n mutliSelect: {\r\n color: theme.palette?.white\r\n },\r\n menuItem: {\r\n '&.MuiListItem-root.Mui-selected' : {\r\n backgroundColor: theme.palette?.background?.selected\r\n },\r\n '&.MuiListItem-root:hover' : {\r\n backgroundColor: theme.palette?.background?.selected\r\n }\r\n },\r\n checkbox: {\r\n '&.MuiCheckbox-colorSecondary.Mui-checked': {\r\n color: theme.palette?.text?.caption\r\n }\r\n },\r\n menuTitles: {\r\n color: theme.palette?.text?.caption,\r\n textTransform: 'uppercase',\r\n padding: `0px ${theme.spacing(2)}px`\r\n }\r\n})\r\n\r\nexport const osmOrderDetailsStyles = ((theme) => ({\r\n tablebody: {\r\n padding: theme.spacing(1.5),\r\n backgroundColor: theme.palette?.secondary?.main\r\n },\r\n title: {\r\n paddingBottom: theme.spacing(1)\r\n },\r\n table: {\r\n marginTop: theme.spacing(1),\r\n fontSize: theme.spacing(1.75)\r\n }\r\n}));\r\n\r\nexport const osmProductDetailsStyles = ((theme) => ({\r\n tableBody: {\r\n padding: theme.spacing(1.5),\r\n backgroundColor: theme.palette?.primary?.primaryBase\r\n },\r\n tableTitle: {\r\n paddingBottom: theme.spacing(1)\r\n },\r\n detailsTable: {\r\n marginTop: theme.spacing(1),\r\n fontSize: theme.spacing(1.75)\r\n },\r\n lightTableBody: {\r\n padding: `${theme.spacing(1.5)}px ${theme.spacing(4)}px`,\r\n backgroundColor: theme.palette?.white\r\n }\r\n}));\r\n\r\nexport const osmTableActionsStyles = ((theme) => ({\r\n actions: {\r\n textAlign: 'center',\r\n display: 'block',\r\n border: `1px solid transparent`,\r\n width: 100,\r\n textTransform: 'capitalize',\r\n '&:hover, &:active' : {\r\n border: `1px solid ${theme.palette?.border}`,\r\n borderRadius: theme.spacing(1),\r\n backgroundColor: theme.palette?.link?.hover\r\n }\r\n }\r\n}));\r\n\r\nexport const osmLsrStyles = ((theme) => ({\r\n prevNavigator: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: theme.palette?.text.subtitle,\r\n cursor: 'pointer',\r\n [theme.breakpoints.down('sm')]: {\r\n paddingTop: theme.spacing(2),\r\n }\r\n },\r\n title: {\r\n marginTop: theme.spacing(2.5),\r\n color: theme.palette?.primary?.contrastText,\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(1),\r\n marginLeft: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: 12\r\n }\r\n },\r\n container: {\r\n backgroundColor: theme.palette?.primary?.main,\r\n borderRadius: theme.spacing(.75),\r\n color: theme.palette?.primary?.contrastText,\r\n padding: `${theme.spacing(1.25)}px ${theme.spacing(2.5)}px`,\r\n marginTop: theme.spacing(2),\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(1),\r\n marginLeft: theme.spacing(1),\r\n }\r\n },\r\n spacer: {\r\n padding: `${theme.spacing(.5)}px 0px`,\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(0)\r\n }\r\n },\r\n inlineCenter: {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n padding: `0px ${theme.spacing(1)}px`,\r\n [theme.breakpoints.down('sm')]: {\r\n marginBottom: theme.spacing(.5),\r\n }\r\n },\r\n textfield: {\r\n backgroundColor: theme.palette?.form?.baseLight,\r\n padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,\r\n marginLeft: theme.spacing(2),\r\n borderRadius: theme.spacing(.5),\r\n border: `1px solid ${theme.palette?.secondary?.focus}`,\r\n whiteSpace: 'pre-line',\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: 10,\r\n maxHeight: theme.spacing(7.5),\r\n overflowX: 'hidden',\r\n overflowY: 'auto'\r\n }\r\n },\r\n warning: {\r\n color: theme.palette?.text?.error,\r\n padding: `0px ${theme.spacing(2)}px`,\r\n marginTop: theme.spacing(1),\r\n display: 'flex',\r\n alignItems: 'flex-end'\r\n },\r\n subtitle: {\r\n fontSize: 13,\r\n fontStyle: 'italic',\r\n paddingLeft: theme.spacing(.25),\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: 9,\r\n }\r\n },\r\n dimensionTable: {\r\n width: '30%',\r\n paddingLeft: theme.spacing(1)\r\n },\r\n dimensionRow: {\r\n textAlign: 'left',\r\n width: '30%'\r\n },\r\n dimensionHeader: {\r\n textTransform: 'uppercase',\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: 10,\r\n }\r\n },\r\n dimensionCell: {\r\n width: 'fit-content',\r\n marginBottom: theme.spacing(.5),\r\n border: `1px solid ${theme.palette?.secondary?.focus}`,\r\n borderRadius: theme.spacing(.5),\r\n padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,\r\n backgroundColor: theme.palette?.form?.baseLight,\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: 10,\r\n }\r\n },\r\n noTableData: {\r\n width: '300%',\r\n textAlign: 'end',\r\n padding: `${theme.spacing(3)}px 0px`\r\n },\r\n tableDiv: {\r\n maxHeight: '66vh',\r\n overflow: 'auto'\r\n },\r\n topDiv: {\r\n display: 'inline-grid',\r\n justifyItems: 'center',\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n cursor: \"pointer\"\r\n },\r\n top: {\r\n textAlign: 'center',\r\n textDecoration: 'none',\r\n color: theme.palette?.text?.primary,\r\n '&:hover': {\r\n textDecoration: 'underline',\r\n color: theme.palette?.text?.primary\r\n },\r\n '&:active': {\r\n textDecoration: 'none',\r\n color: theme.palette?.text?.primary\r\n }\r\n },\r\n noInfo: {\r\n display: 'inline-flex',\r\n alignItems: 'flex-end',\r\n padding: `${theme.spacing(2.5)}px 0px`\r\n },\r\n stackTable: {\r\n '& div::-webkit-scrollbar': {\r\n height: `${theme.spacing(1)}px !important`,\r\n width: `${theme.spacing(1)}px !important`,\r\n },\r\n '& div::-webkit-scrollbar-track': {\r\n border: `3px solid ${theme.palette.primary.base}`,\r\n borderRadius: 0,\r\n background: theme.palette?.divider\r\n },\r\n '& div::-webkit-scrollbar-thumb': {\r\n background: theme.palette.table?.scrollColor,\r\n borderRadius: '10px',\r\n border: `1px solid ${theme.palette.table?.scrollBorder}`\r\n },\r\n },\r\n stacksBar: {\r\n borderBottom: `1px solid ${theme.palette?.text?.primary}`\r\n },\r\n tabStackDetails: {\r\n \"& .MuiTab-root\": {\r\n borderRadius: `${theme.spacing(1.25)}px ${theme.spacing(1.25)}px 0px 0px`\r\n },\r\n \"& .MuiTab-root.Mui-selected\": {\r\n backgroundColor: theme.palette?.secondary?.secondary\r\n },\r\n \"& .MuiTabs-indicator\": {\r\n display: 'none'\r\n },\r\n },\r\n rotateIcon: {\r\n paddingLeft: theme.spacing(1)\r\n },\r\n shipInfo: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n margin: `${theme.spacing(2)}px 0px`\r\n },\r\n toggleButton: {\r\n \"& .MuiToggleButton-root\": {\r\n color: theme.palette.text?.primary,\r\n backgroundColor: theme.palette.card?.base\r\n },\r\n \"& .MuiToggleButton-root.Mui-selected\": {\r\n color: theme.palette.text?.main,\r\n backgroundColor: theme.palette.primary?.contrastText\r\n }\r\n }\r\n}));\r\n\r\nexport const osmTrailerVisualStyles = ((theme) => ({\r\n main: {\r\n backgroundColor: theme.palette?.primary?.main\r\n },\r\n trailerGrid: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexDirection: 'column',\r\n paddingTop: theme.spacing(1.5),\r\n paddingBottom: theme.spacing(1.5),\r\n [theme.breakpoints.up('2500')]: {\r\n paddingLeft: '20%',\r\n paddingRight: '20%'\r\n },\r\n [theme.breakpoints.between('1650', '2500')]: {\r\n paddingLeft: '15%',\r\n paddingRight: '15%'\r\n },\r\n [theme.breakpoints.between('1400', '1650')]: {\r\n paddingLeft: '12%',\r\n paddingRight: '12%'\r\n },\r\n [theme.breakpoints.between('1280', '1400')]: {\r\n paddingLeft: '9%',\r\n paddingRight: '9%'\r\n },\r\n [theme.breakpoints.between('1140', '1280')]: {\r\n paddingLeft: '23%',\r\n paddingRight: '23%'\r\n },\r\n [theme.breakpoints.between('940', '1140')]: {\r\n paddingLeft: '15%',\r\n paddingRight: '15%'\r\n },\r\n [theme.breakpoints.between('800', '940')]: {\r\n paddingLeft: '10%',\r\n paddingRight: '10%'\r\n },\r\n [theme.breakpoints.down('800')]: {\r\n paddingLeft: '10%',\r\n paddingRight: '2%'\r\n }\r\n },\r\n infoGrid: {\r\n justifyContent: 'center',\r\n height: 'fit-content'\r\n },\r\n rowSpanGrid: {\r\n position: 'absolute',\r\n left: '10%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: 'auto',\r\n paddingTop: theme.spacing(3.5),\r\n [theme.breakpoints.between('1280', '1430')]: {\r\n left: '7%'\r\n },\r\n [theme.breakpoints.down('940')]: {\r\n left: '3%'\r\n },\r\n [theme.breakpoints.down('470')]: {\r\n left: 0\r\n }\r\n },\r\n rowSpan: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n height: theme.spacing(28.5),\r\n margin: `${theme.spacing(1)}px 0px`,\r\n color: theme.palette?.text?.secondarySubtitle,\r\n [theme.breakpoints.between('470', '720')]: {\r\n height: 145\r\n },\r\n [theme.breakpoints.down('600')]: {\r\n fontSize: 10\r\n },\r\n [theme.breakpoints.down('470')]: {\r\n height: 135\r\n }\r\n },\r\n trailerBody: {\r\n minHeight: 680,\r\n border: `2px solid ${theme.palette?.black}`,\r\n borderRadius: theme.spacing(1.25),\r\n backgroundColor: theme.palette?.white,\r\n flexWrap: 'nowrap'\r\n },\r\n trailerLayoutLeft: {\r\n flexDirection: 'column',\r\n alignItems: 'flex-end',\r\n height: 'fit-content'\r\n },\r\n trailerLayoutRight: {\r\n height: 'fit-content'\r\n },\r\n layoutTitle: {\r\n color: theme.palette?.tooltip?.main,\r\n textAlign: 'center',\r\n width: '100%'\r\n },\r\n package: {\r\n height: theme.spacing(28.5),\r\n width: theme.spacing(38.5),\r\n margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px ${theme.spacing(1)}px 0px`,\r\n padding: theme.spacing(2),\r\n alignContent: 'flex-start',\r\n transition: '.4s',\r\n backgroundColor: theme.palette?.background?.quaternaryBase,\r\n boxShadow: `0px 1px 2px 0px ${theme.palette?.extra?.mainShadow}`,\r\n backgroundSize: 'cover',\r\n overflow: 'auto',\r\n cursor: 'pointer',\r\n '&::-webkit-scrollbar': {\r\n width: theme.spacing(0.5)\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n border: 'none',\r\n background: theme.palette?.extra?.scrollBar\r\n },\r\n '&:hover': {\r\n transition: '.4s',\r\n boxShadow: `0px 4px 12px 0px ${theme.palette?.extra?.primaryShadow}`,\r\n },\r\n [theme.breakpoints.between('md', 'lg')]: {\r\n width: theme.spacing(34.5),\r\n margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px ${theme.spacing(1)}px ${theme.spacing(0.5)}px`\r\n },\r\n [theme.breakpoints.between('470', '720')]: {\r\n height: 145,\r\n width: 200,\r\n padding: theme.spacing(1)\r\n },\r\n [theme.breakpoints.down('470')]: {\r\n height: 135,\r\n width: 155,\r\n padding: theme.spacing(1)\r\n },\r\n },\r\n activePackage: {\r\n height: theme.spacing(28.5),\r\n width: theme.spacing(38.5),\r\n margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px ${theme.spacing(1)}px 0px`,\r\n padding: theme.spacing(2),\r\n alignContent: 'flex-start',\r\n transition: '.4s',\r\n backgroundColor: theme.palette?.background?.quaternaryBase,\r\n border: `1px solid ${theme.palette?.legendColors?.greyLight}`,\r\n boxShadow: `0px 4px 12px 0px ${theme.palette?.extra?.primaryShadow}`,\r\n backgroundSize: 'cover',\r\n overflow: 'auto',\r\n cursor: 'pointer',\r\n '&::-webkit-scrollbar': {\r\n width: theme.spacing(0.5)\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n border: 'none',\r\n background: theme.palette?.extra?.scrollBar\r\n },\r\n [theme.breakpoints.between('md', 'lg')]: {\r\n width: theme.spacing(34.5),\r\n margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px ${theme.spacing(1)}px ${theme.spacing(0.5)}px`,\r\n },\r\n [theme.breakpoints.between('470', '720')]: {\r\n height: 145,\r\n width: 200,\r\n padding: theme.spacing(1)\r\n },\r\n [theme.breakpoints.down('470')]: {\r\n height: 135,\r\n width: 155,\r\n padding: theme.spacing(1)\r\n },\r\n },\r\n packageInfo: {\r\n width: '100%',\r\n display: 'inline-flex',\r\n justifyContent: 'space-between',\r\n paddingBottom: theme.spacing(2)\r\n },\r\n packageInfo2: {\r\n padding: `${theme.spacing(.5)}px 0px`,\r\n textAlign: 'center',\r\n backgroundSize: 'cover'\r\n },\r\n cardRoot: {\r\n width: 500,\r\n border: `0.5px solid ${theme.palette?.legendColors?.greyLight}`,\r\n margin: `${theme.spacing(1.5)}px 0px`\r\n },\r\n cardHeader: {\r\n backgroundColor: theme.palette?.card?.header,\r\n borderBottom: `0.5px solid ${theme.palette?.legendColors?.greyLight}`\r\n },\r\n divider: {\r\n background: theme.palette?.legendColors?.greyLight,\r\n margin: `${theme.spacing(1)}px 0px`\r\n },\r\n legendGrid: {\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n padding: `0px ${theme.spacing(5)}px`,\r\n justifyContent: 'space-between',\r\n margin: `${theme.spacing(1)}px 0px`\r\n },\r\n legendGrid2: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n paddingLeft: theme.spacing(7)\r\n },\r\n primaryText: {\r\n color: theme.palette?.primary?.contrastText,\r\n marginRight: theme.spacing(1),\r\n display: 'inline-flex'\r\n },\r\n secondaryText: {\r\n color: theme.palette?.text?.secondary\r\n },\r\n compartmentGrid: {\r\n textAlign: 'center'\r\n },\r\n dimension: {\r\n color: theme.palette?.text?.secondary,\r\n marginTop: theme.spacing(1.5)\r\n },\r\n lightText: {\r\n color: theme.palette?.white\r\n },\r\n hazIcon: {\r\n paddingRight: theme.spacing(1)\r\n }\r\n}));\r\n\r\nexport const appbarStyles = ((theme) => ({\r\n root: {\r\n boxShadow: 'none',\r\n flexGrow: 1,\r\n },\r\n app: {\r\n backgroundColor: theme.palette.topbar,\r\n borderBottom: `1px solid ${theme.palette.border}`,\r\n paddingRight: theme.spacing(1),\r\n paddingLeft: theme.spacing(2),\r\n },\r\n grow: {\r\n flexGrow: 1\r\n },\r\n toolbar: {\r\n padding: 0\r\n },\r\n avatar: {\r\n border: `2px solid ${theme.palette.white}`,\r\n color: theme.palette.white,\r\n backgroundColor: theme.palette.topbar,\r\n },\r\n avatarText: {\r\n color: theme.palette.white,\r\n },\r\n username: {\r\n color: theme.palette.white,\r\n paddingLeft: theme.spacing(1)\r\n },\r\n switch: {\r\n paddingRight: theme.spacing(2),\r\n },\r\n sectionDesktop: {\r\n display: 'none',\r\n alignItems: \"center\",\r\n [theme.breakpoints.up('md')]: {\r\n display: 'flex',\r\n },\r\n },\r\n sectionMobile: {\r\n display: 'flex',\r\n alignItems: \"center\",\r\n [theme.breakpoints.up('md')]: {\r\n display: 'none',\r\n },\r\n },\r\n button: {\r\n height: theme.spacing(4.5),\r\n color: \"#fff\",\r\n transition: '.2s ease-in',\r\n background: 'transparent',\r\n '&:hover': {\r\n background: `${theme.palette.primary.pressed} !important`,\r\n borderColor: 'none',\r\n }\r\n },\r\n center: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n paddingRight: theme.spacing(1.5)\r\n },\r\n center2: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginRight: theme.spacing(1)\r\n }\r\n}))\r\n\r\nexport const laoViews = (theme => ({\r\n laoViewsGrid: {\r\n position: 'absolute',\r\n right: theme.spacing(4.5),\r\n flexGrow: 1,\r\n zIndex: 100,\r\n maxHeight: theme.spacing(70),\r\n width: theme.spacing(50),\r\n textAlign: 'left',\r\n padding: theme.spacing(2),\r\n marginTop: theme.spacing(1),\r\n overflowY: 'auto',\r\n overflowX: 'hidden',\r\n border: `1px solid ${theme.palette?.card?.border}`,\r\n [theme.breakpoints.down(\"xs\")]: {\r\n right: theme.spacing(0.5),\r\n width: theme.spacing(46.25),\r\n }\r\n },\r\n laoAddViewText: {\r\n backgroundColor: theme.palette?.background?.drawer,\r\n width: '70%',\r\n marginRight: theme.spacing(1),\r\n },\r\n laoAddViewButton: {\r\n width: '25%',\r\n borderRadius: theme.spacing(1),\r\n border: `1px solid ${theme.palette?.border}`,\r\n backgroundColor: theme.palette?.white,\r\n '&.MuiButton-contained.Mui-disabled': {\r\n color: 'rgba(0, 0, 0, 0.26)',\r\n backgroundColor: 'rgba(0, 0, 0, 0.12)'\r\n }\r\n },\r\n label: {\r\n marginBottom: theme.spacing(1),\r\n paddingTop: theme.spacing(.5),\r\n color: theme.palette?.black\r\n }\r\n}));\r\n\r\nexport const laoFilterBox = (theme => ({\r\n root: {\r\n border: `1px solid ${theme.palette.border}`,\r\n padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(2.5)}px`,\r\n borderRadius: theme.spacing(3),\r\n background: theme.palette.secondary.base,\r\n minHeight: 130,\r\n position: \"relative\",\r\n margin: `${theme.spacing(2)}px 0px`,\r\n [theme.breakpoints.down('sm')]: {\r\n paddingLeft: theme.spacing(2),\r\n }\r\n },\r\n progress: {\r\n backgroundColor: theme.palette?.legendColors?.greyLight,\r\n width: \"98%\",\r\n position: \"absolute\",\r\n height: '2px',\r\n borderRadius: \"50%\",\r\n top: -3\r\n },\r\n textlink: {\r\n color: theme.palette.text.primary,\r\n cursor: 'pointer'\r\n },\r\n laoChip: {\r\n border: `1px solid ${theme.palette.primary.contrastText}`,\r\n height: 35,\r\n backgroundColor: theme.palette.chip?.tableChips,\r\n margin: theme.spacing(0.5),\r\n padding: theme.spacing(1),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginBottom: theme.spacing(1)\r\n }\r\n },\r\n laoViewActions: {\r\n textAlign: 'center',\r\n margin: `${theme.spacing(1)}px 0px`,\r\n [theme.breakpoints.up('md')]: {\r\n borderLeft: `2px solid ${theme.palette.primary?.pressed}`,\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n borderTop: `2px solid ${theme.palette.primary?.pressed}`,\r\n }\r\n },\r\n saveIcon: {\r\n color: theme.palette?.text?.primary\r\n },\r\n laoSaveButton: {\r\n backgroundColor: theme.palette?.primary.active,\r\n color: theme.palette.white,\r\n '&.MuiButton-contained:hover': {\r\n backgroundColor: theme.palette?.background.primaryBase\r\n },\r\n borderRadius: 0,\r\n },\r\n laoCancelButton: {\r\n color: theme.palette?.text.greyMedium,\r\n borderTopLeftRadius: 0,\r\n borderBottomLeftRadius: 0\r\n },\r\n laoAddText: {\r\n border: `1px solid ${theme.palette?.background.secondaryBase}`,\r\n borderRadius: theme.spacing(0.5),\r\n borderTopRightRadius: 0,\r\n borderBottomRightRadius: 0,\r\n borderRight: \"none\",\r\n '& .MuiOutlinedInput-notchedOutline, & .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: 'transparent'\r\n }\r\n }\r\n}));","module.exports = __webpack_public_path__ + \"static/media/behind.4ae6fdf2.svg\";","module.exports = __webpack_public_path__ + \"static/media/critical.a0a104a7.svg\";","module.exports = __webpack_public_path__ + \"static/media/healthy.af3d8d63.svg\";","module.exports = __webpack_public_path__ + \"static/media/monitor.69449dbc.svg\";","module.exports = __webpack_public_path__ + \"static/media/nodata.9d0121f3.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc-healthy.35f3a0c2.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc-monitor.bb83c25e.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc-behind.1afa20c7.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc-critical.0df97354.svg\";","module.exports = __webpack_public_path__ + \"static/media/dc-nodata.d46f541b.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill-healthy.916682cd.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill-monitor.3acc7bd2.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill-behind.b4e80dcb.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill-critical.d0b9b04f.svg\";","module.exports = __webpack_public_path__ + \"static/media/mill-nodata.e559a665.svg\";","module.exports = __webpack_public_path__ + \"static/media/location.8a20b340.svg\";","module.exports = __webpack_public_path__ + \"static/media/table.4564a888.svg\";","module.exports = __webpack_public_path__ + \"static/media/status_red.fcdf9e48.svg\";","module.exports = __webpack_public_path__ + \"static/media/status_green.0e2d44bb.svg\";","module.exports = __webpack_public_path__ + \"static/media/status_yellow.b568ba56.svg\";","module.exports = __webpack_public_path__ + \"static/media/status_pink.bfd4503f.svg\";","module.exports = __webpack_public_path__ + \"static/media/status_grey.0cda15d0.svg\";","module.exports = __webpack_public_path__ + \"static/media/next-arrow.673bf86c.svg\";","module.exports = __webpack_public_path__ + \"static/media/prev-arrow.61da33b2.svg\";","module.exports = __webpack_public_path__ + \"static/media/active_carousel.9cdf17f4.svg\";","module.exports = __webpack_public_path__ + \"static/media/FavSvg.1bbde294.svg\";","module.exports = __webpack_public_path__ + \"static/media/map-not-found.e8d3bd70.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALoSURBVHgB3ZXPT9NgGMefdmtpu4FDxYMSGYuGeFBHwEQPBmNiTJQE9B8QLsaD02FCVDDZSATkoCD7A+TgyYNgwsVoTDgLYdGLB4Vh0JOGwui2duvq+9S1dv0xiTf5Jk3aPm+/n/Z9fhTgfxdVK5icXA7xvlIfUHQXaBAlq8OVx9IAWqaswav7tzpm/gkwllrs9QP1LCvlQqIowvZ2DorFoh7jOA54vg4a6uuhYU99plyGES+QK2BienlSKcrx9W/fQZJyUEssw0BrawtwbF1yMNY+8lfARGo5kc/nkqura6CSV9uJfD4fRFoPg8ALU4M32wesMdp6MT691KcocpV5S3MjNO0LuBpjTBBYUFUVVla/QkGW47i1ngCahoTVXOBZGLpzQT/sEDTH+9evndavEYJb6iN5w+JwAPDttzazYaWSSFQur8Drd59gPzG3QgxzjD9/sWSux3xJkvS78uwAmoKerWwW7Ho5/wFm5z+akI5os2k++uQN/PgpVa3fEDdJRVPnjGu/GaG0cD5fADchBHWl+zjEb3Tppm7m+leQcqZo6qQToFHRQkEGLxmQs2cinuYofYs1oyFtSXbT6INL+psbkIHhOd0c8zE52gsXz7fVfP4PQIMMNo1dGjmudp8wIaimSj4wL1imVnFcHWkuHCV2AAVpISg4AGOP38La+oYJsZobBWAVz3NQ1sprLl9QXtgbCjkAWC1WyMPhy57mKJxPpIrmHABW9c8EA4IYCAg1IYLAeJozZIsJIGMdfFWzaIK0uaKUZj9/WSGd6ZxD2NnH2g7AUnrdEaPJGDh6JAJ+hun3BKAepRan5IJ8ewVHhrqzYYfmETJReZ4duRs7lbTGXMf1eOp9sqSoCYQULaPDTbilzYcOAsP6n96Ldcbtcc8fDs4mkqAEGR9hHCHY5UYj4l4HScU1kqIICoJYorT+oVjnnJtPzV+mCaK0HnIaJsuj+k3SM2S0pEHTFvKkOJID7SLsWv0CETZToiVwUagAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/network.67953f7d.svg\";","module.exports = __webpack_public_path__ + \"static/media/globe.7751fc62.svg\";","import React from \"react\";\r\nimport { withOktaAuth } from '@okta/okta-react';\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport { batch, useDispatch } from \"react-redux\";\r\nimport { isEmpty } from \"lodash\";\r\nimport {\r\n setBusinessLocalAction,\r\n addItemsCuso,\r\n addItemsLocations,\r\n showhideFavourites,\r\n getLocationsService\r\n} from \"reduxLib/services\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useDeepCompareEffect } from \"react-use\";\r\nimport { isJsonParsable } from \"helpers\";\r\nimport LoadingPage from \"components/common/LoadingPage\";\r\n\r\nfunction useQuery() {\r\n const { search } = useLocation();\r\n return React.useMemo(() => {\r\n return new URLSearchParams(search.replace(\"search=?\", \"\"));\r\n }, [search]);\r\n}\r\n\r\nfunction RedirectManager(props) {\r\n const { authState, authService } = props;\r\n\r\n global.authService = authService;\r\n\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n\r\n const { locations } = useSelector(({ sites: { locations } }) => ({ locations }))\r\n\r\n let query = useQuery();\r\n\r\n useDeepCompareEffect(() => { \r\n const page = query.get(\"page\");\r\n if (authState.isAuthenticated && page === \"EMEA\") {\r\n const exclude = [\"page\", \"path\"];\r\n const params = [];\r\n query.forEach((_, key) => {\r\n if (exclude.includes(key)) return;\r\n params.push(\r\n query.get(key) ? `${key}=${encodeURIComponent(query.get(key))}` : undefined\r\n )\r\n });\r\n history.replace({\r\n pathname: query.get(\"path\") || \"/dashboard/EMEA/network/home\",\r\n search: params.filter(d=>d).join(\"&\")\r\n });\r\n } else if (authState.isAuthenticated && page === \"LAO\") {\r\n const exclude = [\"page\", \"path\"];\r\n const params = [];\r\n query.forEach((_, key) => {\r\n if (exclude.includes(key)) return;\r\n params.push(\r\n query.get(key) ? `${key}=${query.get(key)}` : undefined\r\n )\r\n });\r\n history.replace({\r\n pathname: query.get(\"path\") || \"/dashboard/LAO/network/home\",\r\n search: params.filter(d=>d).join(\"&\")\r\n });\r\n } else if (authState.isAuthenticated) {\r\n const global = isJsonParsable(query.get(\"global\")) || { bu: [], cuso: [], sites: [] }\r\n const isOSMPage = query.get(\"path\")?.search(\"\\/osm\\/\") > 0;\r\n\r\n const params = [\r\n query.get(\"search\"),\r\n query.get(\"isHyperlink\") ? `isHyperlink=${query.get(\"isHyperlink\")}` : undefined,\r\n query.get(\"viewid\") ? `viewid=${query.get(\"viewid\")}` : undefined,\r\n query.get(\"name\") ? `name=${query.get(\"name\")}` : undefined,\r\n query.get(\"hyperlinks\") ? `hyperlinks=${query.get(\"hyperlinks\")}` : undefined,\r\n query.get(\"evaluate\") ? `evaluate=${query.get(\"evaluate\")}` : undefined,\r\n // query.get(\"filters\") ? `filters=${query.get(\"filters\")}` : \"filters={}\",\r\n // query.get(\"global\") ? `global=${query.get(\"global\")}` : \"global={bu:[],cuso:[],sites:[]}\",\r\n isOSMPage ? undefined: query.get(\"filters\") ? `filters=${query.get(\"filters\")}` : \"filters={}\",\r\n query.get(\"osmfilters\") ? `osmfilters=${query.get(\"osmfilters\")}` : \"osmfilters={}\",\r\n query.get(\"osmglobal\") ? `osmglobal=${query.get(\"osmglobal\")}` : \"osmglobal={}\",\r\n query.get(\"activity\") ? `activity=${query.get(\"activity\")}` : undefined,\r\n query.get(\"page\") ? `page=${query.get(\"page\")}` : \"page=0\",\r\n query.get(\"pageSize\") ? `pageSize=${query.get(\"pageSize\")}` : \"pageSize=50\",\r\n query.get(\"shipment\") ? `shipment=${query.get(\"shipment\")}` : undefined,\r\n isOSMPage ? undefined: query.get(\"global\") ? `global=${query.get(\"global\")}` : \"global={bu:[],cuso:[],sites:[]}\",\r\n ].filter(d => d);\r\n\r\n const redirect = () => {\r\n history.replace({\r\n pathname: query.get(\"path\") || \"/dashboard/mylocation/locations/home\",\r\n search: params.join(\"&\")\r\n });\r\n }\r\n if (locations?.length === 0) {\r\n dispatch(getLocationsService());\r\n }\r\n if (!isEmpty(global)) {\r\n if (locations.length > 0) {\r\n const runBatch = async () => {\r\n await batch(() => {\r\n const CUSOpayload = !isEmpty(global?.cuso) ? global?.cuso.reduce((acc, item) => item.selectionType === \"CUST\" ?\r\n { ...acc, CUST: [...acc.CUST, item] } : { ...acc, SALES_OFFICE: [...acc.SALES_OFFICE, item] }, { CUST: [], SALES_OFFICE: [] }) : { CUST: [], SALES_OFFICE: [] }\r\n const sites = global?.sites?.length > 0 ? locations.filter(d => global.sites.includes(d.siteNum)) : []\r\n dispatch(showhideFavourites(false));\r\n dispatch(addItemsCuso(CUSOpayload));\r\n dispatch(addItemsLocations(sites))\r\n dispatch(setBusinessLocalAction(global?.bu));\r\n });\r\n\r\n }\r\n runBatch();\r\n redirect();\r\n }\r\n } else {\r\n redirect();\r\n }\r\n }\r\n }, [authState.isAuthenticated, locations])\r\n\r\n return (\r\n {`${t(\"authorized_countries\")}: ${countryList.join(', ')}`} \r\n }\r\n >\r\n \r\n \r\n \r\n {`${username.split(\" \")[0].charAt(0)}${username.split(\" \")[1].charAt(0)}`}\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n global.authService = authService;\r\n\r\n useEffect(() => {\r\n setCountryList(countries);\r\n }, [countries]);\r\n\r\n useEffect(() => {\r\n if (!user) {\r\n authService.getUser()\r\n .then(d => \r\n dispatch(addUser(d))\r\n )\r\n .catch(err => \r\n dispatch(addUser(null))\r\n );\r\n } else {\r\n window.FS.identify(user.sub, {\r\n displayName: username\r\n });\r\n }\r\n }, [user, authService]);\r\n\r\n return(\r\n \r\n
\r\n \r\n {region === 'EMEA' && \r\n \r\n
\r\n\r\n \r\n {region === 'LAO' && \r\n }\r\n {\r\n region === 'EMEA' && \r\n \r\n \r\n }\r\n \r\n { username } \r\n \r\n \r\n setOpenFeedback(!openFeedback)} >\r\n {t('feedback')} \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n setOpenMobileMenu(!openMobileMenu)} aria-label=\"show more\" aria-haspopup=\"true\" color=\"primary\" ref={anchorRef} >\r\n \r\n
\r\n\r\n \r\n \r\n\r\n
setOpenFeedback(!openFeedback)}\r\n username={username}\r\n anchorRef={anchorRef}\r\n region={region}\r\n countryList={countryList}\r\n />\r\n\r\n setDrawerOpen(!openDrawer)}\r\n edge=\"start\"\r\n className={openDrawer ? classes.menuButtonFocus : classes.menuButton}>\r\n \r\n \r\n setDrawerOpen(!openDrawer)}>\r\n {t(\"close_menu\")} \r\n \r\n
\r\n \r\n \r\n goToPage(\"home\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"returns\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"orderEntry\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"openOrders\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"orderCutsRejections\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"invoices\")}>\r\n \r\n \r\n \r\n \r\n goToPage(\"customerServiceLevel\")}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n )\r\n}\r\n\r\nexport default EmeaHamburger;","import React from \"react\";\r\n\r\nconst RouteContext = React.createContext({});\r\n\r\nexport const useRouteContext = () => React.useContext(RouteContext);\r\n\r\nexport default RouteContext;","module.exports = __webpack_public_path__ + \"static/media/hamburger.be70b0cc.svg\";","module.exports = __webpack_public_path__ + \"static/media/truck_returns.aeeea8c7.svg\";","module.exports = __webpack_public_path__ + \"static/media/emea-order-entry.dbad2fb7.svg\";","module.exports = __webpack_public_path__ + \"static/media/package.4f129b2f.svg\";","module.exports = __webpack_public_path__ + \"static/media/clipboard.7d9f037d.svg\";","module.exports = __webpack_public_path__ + \"static/media/cutsAndRejections.03ebe9f1.svg\";","module.exports = __webpack_public_path__ + \"static/media/invoices.b0540d21.svg\";","module.exports = __webpack_public_path__ + \"static/media/maestro_logo_light_mobile.8b878171.svg\";","module.exports = __webpack_public_path__ + \"static/media/edit-dark.5983602c.svg\";","module.exports = __webpack_public_path__ + \"static/media/save-dark.59a8780f.svg\";","module.exports = __webpack_public_path__ + \"static/media/save-disabled.71860307.svg\";","module.exports = __webpack_public_path__ + \"static/media/filter.00749a61.svg\";","import React, { useState, useEffect } from 'react';\r\nimport { useTranslation } from \"react-i18next\"\r\nimport { Typography, IconButton, makeStyles, Box, useMediaQuery, useTheme, InputBase, ClickAwayListener, Grid, CardHeader, CardContent, Paper } from '@material-ui/core';\r\nimport { isEmpty, isEqual } from 'lodash';\r\nimport { FilterList as FilterListIcon } from '@material-ui/icons';\r\nimport KCCheckBox from './Elements/KCCheckbox';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n position: 'relative',\r\n },\r\n dropdown: {\r\n position: 'absolute',\r\n zIndex: 100,\r\n borderRadius: '0 !important',\r\n width: 300,\r\n right: 0,\r\n [theme.breakpoints.down('sm')]: {\r\n right: -150,\r\n },\r\n justifyContent: 'left',\r\n textAlign: 'left',\r\n backgroundColor: theme.palette.secondary.dark,\r\n height: 'fit-content',\r\n textTransform: \"none\"\r\n },\r\n header: {\r\n backgroundColor: theme.palette.secondary.base,\r\n paddingBottom: theme.spacing(2),\r\n fontFamily: 'Gilroy',\r\n\r\n },\r\n active: {\r\n backgroundColor: theme.palette.secondary.dark,\r\n padding: theme.spacing(1)\r\n },\r\n inactive: {\r\n padding: theme.spacing(1)\r\n },\r\n legends: {\r\n display: 'inline-flex',\r\n paddingBottom: theme.spacing(1),\r\n paddingTop: theme.spacing(1),\r\n flexFlow: `row nowrap`,\r\n paddingRight: theme.spacing(2),\r\n border: `1px solid ${theme.palette.border}`,\r\n fontFamily: 'Gilroy',\r\n },\r\n icons: {\r\n marginLeft: 'auto',\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(3)\r\n }\r\n }\r\n}));\r\n\r\nexport const performanceConstants = {\r\n HEALTHY: 'healthy',\r\n MONITOR: 'monitor',\r\n BEHIND: 'behind',\r\n CRITICAL: 'critical',\r\n NODATA: 'no_data'\r\n}\r\n\r\nconst PerformanceFitlers = ({ data, setData, filters, updateFilters, ...rest }) => {\r\n\r\n const { open, handleClick, handleClickAway, perfData, search, searchKey } = rest;\r\n const isMobile = useMediaQuery(useTheme().breakpoints.down(\"sm\"));\r\n const classes = useStyles();\r\n const { t } = useTranslation();\r\n\r\n const filterData = (activeFilters) => {\r\n let appliedFilterValues = activeFilters.reduce((valueArray, item) =>\r\n (item.checked === true) ? [...valueArray, item.value] : [...valueArray], [])\r\n\r\n const filterdLocations = !isEmpty(appliedFilterValues) ? perfData.filter((site) => appliedFilterValues.includes(site.status)) : [];\r\n if (!isEqual(filterdLocations, data)) {\r\n if (search) {\r\n const filtereddata = filterdLocations.filter(d => {\r\n return searchKey(search, d)\r\n });\r\n if(!isEqual(filtereddata, data)) {\r\n setData(filtereddata)\r\n }\r\n } else {\r\n setData(filterdLocations)\r\n }\r\n }\r\n }\r\n\r\n const setfilter = (target) => {\r\n const activeFilters = filters.map((d) => target.value == d.value ? { ...d, checked: target.checked } : d);\r\n updateFilters(activeFilters);\r\n filterData(activeFilters)\r\n };\r\n\r\n useEffect(() => {\r\n filterData(filters);\r\n }, [data]);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n {!isMobile &&
{t('filters')} }\r\n {open ? (\r\n
\r\n \r\n {t('filter_by')}\r\n }\r\n />\r\n {filters.map((obj, index) => (\r\n \r\n {\r\n setfilter(e.target);\r\n }}\r\n value={obj.value}\r\n checked={obj.checked}\r\n />\r\n \r\n \r\n {obj.name}\r\n \r\n \r\n {obj.legend}\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n ) : null}\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default PerformanceFitlers;\r\n\r\n\r\n","import { makeStyles, Link } from '@material-ui/core';\r\nimport clsx from 'clsx';\r\nimport React from 'react';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n color: 'inherit',\r\n cursor:\"pointer\",\r\n textDecoration: 'none',\r\n '&:hover': {\r\n textDecoration: 'none'\r\n }\r\n },\r\n}));\r\nexport const CTLink = ({ children, className, href, target = '_self', title, variant, onClick }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n","export default {\r\n GET_ALL_VIEWS_SUCCESS: \"GET_ALL_VIEWS_SUCCESS\",\r\n GET_ALL_VIEWS_FAILED: \"GET_ALL_VIEWS_FAILED\",\r\n GET_VIEW_SUCCESS: \"GET_VIEW_SUCCESS\",\r\n GET_VIEW_FAILED: \"GET_VIEW_FAILED\",\r\n INSERT_UPDATE_VIEW_SUCCESS: \"INSERT_UPDATE_VIEW_SUCCESS\",\r\n INSERT_UPDATE_VIEW_FAILED: \"INSERT_UPDATE_VIEW_FAILED\",\r\n DELETE_VIEW_SUCCESS: \"DELETE_VIEW_SUCCESS\",\r\n DELETE_VIEW_FAILED: \"DELETE_VIEW_FAILED\",\r\n FAV_UNFAV_VIEW_SUCCESS: \"FAV_UNFAV_VIEW_SUCCESS\",\r\n FAV_UNFAV_VIEW_FAILED: \"FAV_UNFAV_VIEW_FAILED\",\r\n VIEWS_LOADING: \"VIEWS_LOADING\",\r\n VIEW_LOADING: \"VIEW_LOADING\",\r\n RESET_VIEWS: \"RESET_EMEA_VIEWS\",\r\n RESET_EMEA_STATUS: \"RESET_EMEA_STATUS\",\r\n RESET_STATUS: \"RESET_VIEW_API_STATUS\"\r\n}","export default {\r\n GET_ALL_VIEWS_SUCCESS: \"GET_ALL_VIEWS_SUCCESS\",\r\n GET_ALL_VIEWS_FAILED: \"GET_ALL_VIEWS_FAILED\",\r\n GET_VIEW_SUCCESS: \"GET_VIEW_SUCCESS\",\r\n GET_VIEW_FAILED: \"GET_VIEW_FAILED\",\r\n VIEWS_LOADING: \"VIEWS_LOADING\",\r\n VIEW_LOADING: \"VIEW_LOADING\",\r\n INSERT_UPDATE_VIEW_SUCCESS: \"INSERT_UPDATE_VIEW_SUCCESS\",\r\n INSERT_UPDATE_VIEW_FAILED: \"INSERT_UPDATE_VIEW_FAILED\",\r\n DELETE_VIEW_SUCCESS: \"DELETE_VIEW_SUCCESS\",\r\n DELETE_VIEW_FAILED: \"DELETE_VIEW_FAILED\",\r\n FAV_UNFAV_VIEW_SUCCESS: \"FAV_UNFAV_VIEW_SUCCESS\",\r\n FAV_UNFAV_VIEW_FAILED: \"FAV_UNFAV_VIEW_FAILED\",\r\n RESET_VIEWS: \"RESET_LAO_VIEWS\",\r\n RESET_LAO_STATUS: \"RESET_LAO_STATUS\",\r\n RESET_STATUS: \"RESET_VIEW_API_STATUS\"\r\n}","module.exports = __webpack_public_path__ + \"static/media/not_favorite.ebe39c4e.svg\";","import { selfAlertingConstants } from \"../constants\"\r\nimport { endpoints } from \"helpers\";\r\nimport fetch from \"./serviceHelpers\";\r\n\r\nexport const saveSelfAlertFilters = variables => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_SLEF_ALERTING_FILTERS,\r\n payload: variables\r\n })\r\n}\r\n\r\nexport const addItemsCusMultipleSF = variables => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_ADD_CUSO_MULTIPLE_SUCCESS,\r\n payload: variables\r\n })\r\n}\r\n\r\nexport const addItemCusoSF = variables => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_ADD_CUSO_SUCCESS,\r\n payload: variables.reducerObject\r\n })\r\n}\r\n\r\nexport const removeItemCusoSF = variables => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_REMOVE_CUSO_SUCCESS,\r\n payload: variables.reducerObject\r\n })\r\n}\r\n\r\nexport const addItemSalesGroupSF = ({ shortName, reducerObject }) => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_ADD_SG_SUCCESS,\r\n payload: { shortName, reducerObject }\r\n })\r\n}\r\n\r\nexport const removeItemSalesGroupSF = ({ shortName, reducerObject }) => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_REMOVE_SG_SUCCESS,\r\n payload: { shortName, reducerObject }\r\n })\r\n}\r\n\r\nexport const clearAllCusoSF = () => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SF_CLEAR_CUSO,\r\n payload: []\r\n });\r\n}\r\n\r\nexport const resetSavedState = () => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_SUCCESS,\r\n payload: {\r\n alert: {},\r\n status: null,\r\n message: null\r\n }\r\n });\r\n}\r\n\r\nexport const resetSelfAlertState = () => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.RESET_SELF_ALERT_STATE,\r\n payload: {}\r\n });\r\n}\r\n\r\nexport const loadSelfAlertingMetadata = () => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.LOADING,\r\n payload: true\r\n });\r\n\r\n return fetch(endpoints.selfalerting.metadata, {\r\n method: \"GET\",\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: selfAlertingConstants.LOAD_COMPARISION_METADATA,\r\n payload: {\r\n data: d,\r\n loading: false\r\n }\r\n });\r\n })\r\n .catch(err => {\r\n dispatch({\r\n type: selfAlertingConstants.LOAD_COMPARISION_METADATA,\r\n payload: {\r\n data: {},\r\n loading: false\r\n }\r\n });\r\n })\r\n}\r\n\r\nexport const loadAllAlerts = () => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.ALERTS_LOADING,\r\n payload: { loading: true }\r\n });\r\n\r\n return fetch(endpoints.selfalerting.alerts, {\r\n method: \"GET\",\r\n })\r\n .then(d => d.json())\r\n .then(d => {\r\n dispatch({\r\n type: selfAlertingConstants.GET_SAVED_ALERTS,\r\n payload: {\r\n data: d,\r\n loading: false\r\n }\r\n });\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: selfAlertingConstants.GET_SAVED_ALERTS,\r\n payload: {\r\n data: {},\r\n loading: false\r\n }\r\n });\r\n })\r\n}\r\n\r\nexport const deleteSelfAlert = variables => dispatch => {\r\n return fetch(`${endpoints.selfalerting.alerts}/${variables.alertId}`, {\r\n method: \"DELETE\",\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n dispatch({\r\n type: selfAlertingConstants.DELETE_SELF_ALERT,\r\n payload: variables\r\n });\r\n }\r\n }).catch(e => {\r\n dispatch({\r\n type: selfAlertingConstants.DELETE_SELF_ALERT,\r\n payload: {}\r\n });\r\n })\r\n\r\n}\r\n\r\nexport const saveAlertService = (variables) => dispatch => {\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_LOADER,\r\n payload: true\r\n });\r\n return fetch(endpoints.selfalerting.alerts, {\r\n method: \"PUT\",\r\n body: variables,\r\n })\r\n .then(d => {\r\n if (d.status === 200) {\r\n d.json()\r\n .then(response => {\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_SUCCESS,\r\n payload: {\r\n alert: {\r\n ...response,\r\n isEditableByCurrentUser: true\r\n },\r\n status: \"success\",\r\n message: \"Successfully Saved\"\r\n }\r\n });\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_LOADER,\r\n payload: false\r\n });\r\n })\r\n } else {\r\n throw new Error();\r\n }\r\n })\r\n .catch(() => {\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_FAILED,\r\n payload: {\r\n alert: undefined,\r\n status: \"error\",\r\n message: \"Failed to Save Alert\"\r\n }\r\n });\r\n dispatch({\r\n type: selfAlertingConstants.SAVE_ALERT_LOADER,\r\n payload: false\r\n });\r\n })\r\n}"],"sourceRoot":""}