\r\n \r\n \r\n
\r\n - \r\n
- \r\n {userContext && userContext.hasFullPermissions &&
\r\n \r\n \r\n
\r\n );\r\n}\r\n","import {createContext} from 'react';\r\n\r\nexport const ReloadContext = createContext({})","import { useContext, useEffect, useState } from 'react';\r\n\r\nimport { UserContext } from 'src/contexts/UserContext';\r\n\r\nlet defaultPermissions = {\r\n isAdmin: false,\r\n hasFullPermissions: false,\r\n canManageUsers: false,\r\n canReadUsers: false,\r\n canManageCustomerAccounts: false,\r\n canReadCustomerAccounts: false,\r\n canManageVendorAccounts: false,\r\n canReadVendorAccounts: false,\r\n canManageExternalApplications: false,\r\n canReadExternalApplications: false,\r\n canReadFiles: false,\r\n canManageShipmentBookings: false,\r\n canReadShipmentBookings: false,\r\n canManageSuppliers: false,\r\n canReadSuppliers: false,\r\n};\r\n\r\nconst usePermissions = () => {\r\n const [userContext] = useContext(UserContext);\r\n const [permissions, setPermissions] = useState(defaultPermissions);\r\n\r\n useEffect(() => {\r\n if (userContext) {\r\n let permissions = {\r\n isAdmin: userContext.isAdmin,\r\n hasFullPermissions: userContext.hasFullPermissions,\r\n canManageUsers: userContext.permissions?.canManageUsers,\r\n canReadUsers: userContext.permissions?.canReadUsers,\r\n canManageCustomerAccounts: userContext.permissions?.canManageCustomerAccounts,\r\n canReadCustomerAccounts: userContext.permissions?.canReadCustomerAccounts,\r\n canManageVendorAccounts: userContext.permissions?.canManageVendorAccounts,\r\n canReadVendorAccounts: userContext.permissions?.canReadVendorAccounts,\r\n canManageExternalApplications: userContext.permissions?.canManageExternalApplications,\r\n canReadExternalApplications: userContext.permissions?.canReadExternalApplications,\r\n canReadFiles: userContext.permissions?.canReadFiles,\r\n canManageShipmentBookings: userContext.permissions?.canManageShipmentBookings,\r\n canReadShipmentBookings: userContext.permissions?.canReadShipmentBookings,\r\n canManageSuppliers: userContext.permissions?.canManageSuppliers,\r\n canReadSuppliers: userContext.permissions?.canReadSuppliers,\r\n };\r\n\r\n setPermissions(permissions);\r\n } else {\r\n setPermissions(defaultPermissions);\r\n }\r\n }, [userContext]);\r\n\r\n return permissions;\r\n};\r\n\r\nexport default usePermissions;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { FormControl, InputBase, ListSubheader, MenuItem, Select, makeStyles, withStyles } from '@material-ui/core';\r\n\r\nimport useAccounts from 'src/hooks/useAccounts';\r\nimport AccountType from 'src/models/AccountType';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {},\r\n label: {\r\n paddingRight: theme.spacing(1),\r\n },\r\n select: {\r\n fontFamily: theme.font.menu,\r\n },\r\n listSubheader: {\r\n lineHeight: '30px',\r\n paddingTop: theme.spacing(1),\r\n borderBottom: '1px solid #e1e1e1',\r\n },\r\n}));\r\n\r\nconst CustomInput = withStyles((theme) => ({\r\n input: {\r\n borderRadius: 4,\r\n position: 'relative',\r\n padding: theme.spacing(1),\r\n paddingRight: '26px',\r\n backgroundColor: 'rgba(0,0,0,0.05)',\r\n backdropFilter: 'blur(4px)',\r\n '&:focus': {\r\n borderRadius: 4,\r\n },\r\n },\r\n}))(InputBase);\r\n\r\nexport default function AccountsSelection() {\r\n const classes = useStyles();\r\n const { accountId, accounts, setCurrentAccount } = useAccounts();\r\n const [selectData, setSelectData] = useState({\r\n customers: [],\r\n vendors: [],\r\n });\r\n\r\n useEffect(() => {\r\n console.log(accounts);\r\n if (accounts) {\r\n let customers = accounts.filter((x) => x.accountTypeName == AccountType.Customer);\r\n let vendors = accounts.filter((x) => x.accountTypeName == AccountType.Vendor);\r\n setSelectData({\r\n customers: customers,\r\n vendors: vendors,\r\n });\r\n }\r\n }, [accounts]);\r\n\r\n if (selectData.customers.length > 1 || selectData.vendors.length > 1) {\r\n return (\r\n <>\r\n Account:\r\n - \r\n {props.messages.map((item, i) => {\r\n return (\r\n
\r\n {isComponentVisible && (\r\n
\r\n setIsComponentVisible(true)}>\r\n
\r\n )}\r\n \r\n \r\n {userContext && userContext.id ? \r\n \r\n {\r\n history.push('/profile');\r\n }}\r\n >\r\n \r\n \r\n {\r\n history.push('/account-profile');\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n ![](\"src/../images/iconSmallFickleTitle.png\")
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- \r\n {hasFullPermissions &&
\r\n
\r\n );\r\n}\r\n","import clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useMemo } from 'react';\r\n\r\nimport { makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n height: (props) => (props.size == 'small' ? 65 : 150),\r\n width: '100%',\r\n marginBottom: '20px',\r\n overflow: 'hidden',\r\n position: 'relative',\r\n backgroundColor: theme.palette.topRedBar.backgroundColor,\r\n },\r\n logoImg: {\r\n //filter: theme.palette.topRedBar.logoImgFilter,\r\n },\r\n logoContainer: {\r\n position: 'absolute',\r\n top: (props) => (props.size == 'small' ? 9 : 85),\r\n },\r\n left: {\r\n left: '25px',\r\n },\r\n right: {\r\n right: '25px',\r\n },\r\n}));\r\n\r\nfunction TopRedBar(props) {\r\n const { size = 'default', darkMode, logoPosition = 'right' } = props;\r\n const classes = useStyles({ size: size });\r\n\r\n const logoImageUrl = useMemo(() => {\r\n if (darkMode != undefined) {\r\n return darkMode ? '/images/VERUS-LOGO-TOP-dark.png' : '/images/VERUS-LOGO-TOP.png';\r\n } else {\r\n return parseInt(localStorage.getItem('theme')) === 1 ? '/images/VERUS-LOGO-TOP.png' : '/images/VERUS-LOGO-TOP-dark.png';\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default TopRedBar;\r\n\r\nTopRedBar.propTypes = {\r\n size: PropTypes.oneOf(['small', 'default']),\r\n darkMode: PropTypes.bool,\r\n logoPosition: PropTypes.oneOf(['left', 'right']),\r\n};\r\n","import clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\n\r\nimport Container from '@material-ui/core/Container';\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\n\r\nimport { darkTheme } from 'src/themes/darkTheme';\r\nimport { lightThemeAdmin } from 'src/themes/lightTheme';\r\n\r\nimport ApplicationMenus from './ApplicationMenus';\r\nimport TopRedBar from './TopRedBar';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n '& h6': {\r\n fontWeight: 600,\r\n },\r\n },\r\n appBarSpacer: theme.mixins.toolbar,\r\n content: {\r\n flexGrow: 1,\r\n height: '100vh',\r\n overflowY: 'auto',\r\n },\r\n container: {\r\n paddingBottom: theme.spacing(4),\r\n paddingLeft: theme.spacing(4),\r\n paddingRight: theme.spacing(4),\r\n // maxWidth: '1600px',\r\n },\r\n paper: {\r\n width: '100%',\r\n padding: '50px',\r\n marginBottom: theme.spacing(2),\r\n paddingBottom: theme.spacing(2),\r\n },\r\n nonePaper: {\r\n padding: 0,\r\n boxShadow: 'none',\r\n background: 'none',\r\n transition: 'none',\r\n },\r\n childrenGridContainer: {\r\n position: 'relative',\r\n },\r\n}));\r\n\r\nfunction EntityListFrame(props) {\r\n const classes = useStyles();\r\n const { inPaper = true, showApplicationMenus = true } = props;\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {showApplicationMenus && \r\n \r\n \r\n \r\n {props.children}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {index > 0 ?
: ''}\r\n {link.text}\r\n
\r\n );\r\n }),\r\n { key: block.key }\r\n );\r\n } else if (Components[block.component] === 'TextList') {\r\n return React.createElement(\r\n () => (\r\n <>\r\n {block.texts.map((text, index) => {\r\n return (\r\n : ''}\r\n {link.text}\r\n
\r\n {index > 0 ?
: ''}\r\n {text.text}\r\n
\r\n );\r\n })}\r\n \r\n ),\r\n { key: block.key }\r\n );\r\n } else if (Components[block.component] === 'Checkbox') {\r\n return React.createElement(\r\n () => (\r\n <>\r\n : ''}\r\n {text.text}\r\n
\r\n
\r\n \r\n ),\r\n { key: block.key }\r\n );\r\n } else if (typeof Components[block.component] !== 'undefined') {\r\n return React.createElement(Components[block.component], {\r\n key: block.key,\r\n block: block,\r\n });\r\n }\r\n return block.text;\r\n}\r\n\r\nconst useTagCellStyles = makeStyles((theme) => ({\r\n tagContainer: {\r\n maxWidth: 555,\r\n overflowWrap: 'break-word',\r\n lineHeight: '30px',\r\n margin: 0,\r\n },\r\n tag: {\r\n whiteSpace: 'nowrap',\r\n padding: 5,\r\n paddingLeft: 7,\r\n paddingRight: 7,\r\n backgroundColor: theme.table.tag.color,\r\n color: 'white',\r\n borderRadius: 16,\r\n margin: 2,\r\n },\r\n}));\r\n\r\nfunction TagsCell(props) {\r\n const classes = useTagCellStyles();\r\n const { block } = props;\r\n return (\r\n \r\n {block.texts.map((text, index) => {\r\n return (\r\n \r\n {text.text}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nimport { Toolbar, Typography, makeStyles } from '@material-ui/core';\r\nimport AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';\r\n\r\nimport MenuFont from 'src/components/Typography/MenuFont';\r\nimport MyButton from 'src/wrappers/Button';\r\n\r\nconst useToolbarStyles = makeStyles((theme) => ({\r\n root: {\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n justifyContent: 'flex-end',\r\n marginBottom: theme.spacing(1),\r\n },\r\n addButton: {\r\n marginRight: 0,\r\n },\r\n title: {\r\n flex: '1 1 100%',\r\n fontWeight: 'bold',\r\n },\r\n}));\r\n\r\nconst TableToolbar = (props) => {\r\n const classes = useToolbarStyles();\r\n const { title, handleAdd } = props;\r\n\r\n return (\r\n{model.accountName && model.accountName + ': '}Features Setting
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withRouter(FeaturesSettingEntry);\r\n","import clsx from 'clsx';\r\nimport React, { useContext, useEffect, useReducer } from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport { useHistory } from 'react-router';\r\n\r\nimport { Card, CardActions, CardContent, Divider, Grid, TextField, Typography } from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nimport { ReloadContext } from 'src/contexts/ReloadContext';\r\nimport useCatchAPIError from 'src/hooks/useCatchAPIError';\r\nimport useGlobalLoadingBar from 'src/hooks/useGlobalLoadingBar';\r\nimport useGlobalSnackBar from 'src/hooks/useGlobalSnackBar';\r\nimport formErrorFactory from 'src/services/formError.factory';\r\nimport vendorAccountApiService from 'src/services/vendorAccount.api.service';\r\nimport Button from 'src/wrappers/Button';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n buttonRight: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n buttons: {\r\n marginTop: theme.spacing(2),\r\n },\r\n card: {\r\n boxShadow: '0px 7px 8px -4px rgb(0 0 0 / 20%), 0px 12px 17px 2px rgb(0 0 0 / 14%), 0px 5px 22px 4px rgb(0 0 0 / 12%)',\r\n padding: theme.spacing(3),\r\n },\r\n cardActions: {\r\n justifyContent: 'flex-end',\r\n },\r\n newSection: {\r\n paddingTop: '40px !important',\r\n paddingBottom: '0px !important',\r\n },\r\n}));\r\n\r\nconst vendorAccountEntryReducer = (state, action) => {\r\n switch (action.type) {\r\n case 'field': {\r\n return {\r\n ...state,\r\n [action.fieldName]: action.payload,\r\n };\r\n }\r\n case 'loadExistingData': {\r\n return {\r\n ...state,\r\n ...action.payload,\r\n errors: [],\r\n isEdit: true,\r\n isSubmitting: false,\r\n isSubmitted: false,\r\n };\r\n }\r\n case 'submit': {\r\n return {\r\n ...state,\r\n errors: [],\r\n isSubmitting: true,\r\n };\r\n }\r\n case 'success': {\r\n return {\r\n ...state,\r\n isSubmitting: false,\r\n isSubmitted: true,\r\n };\r\n }\r\n case 'error': {\r\n return {\r\n ...state,\r\n errors: action.payload,\r\n isSubmitting: false,\r\n isSubmitted: false,\r\n };\r\n }\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nconst vendorEntryInitialState = {\r\n accountId: '',\r\n company: '',\r\n vendorNumbers: '',\r\n contactEmail: '',\r\n username: '',\r\n firstName: '',\r\n lastName: '',\r\n phoneNumber: '',\r\n errors: [],\r\n isEdit: false,\r\n isSubmitting: false,\r\n isSubmitted: false,\r\n};\r\n\r\nconst VendorAccountEntry = ({ vendorAccountId, ...props }) => {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n const [, setReloadContext] = useContext(ReloadContext);\r\n const { startProgress, stopProgress } = useGlobalLoadingBar();\r\n const { showSuccessSnackBar } = useGlobalSnackBar();\r\n const { catchApiError } = useCatchAPIError();\r\n\r\n const [state, dispatch] = useReducer(vendorAccountEntryReducer, vendorEntryInitialState);\r\n const { accountId, company, vendorNumbers, username, firstName, lastName, phoneNumber, contactEmail, errors, isEdit, isSubmitting } = state;\r\n\r\n useEffect(() => {\r\n const fetchData = async (accountId) => {\r\n try {\r\n startProgress();\r\n let accountResult = await vendorAccountApiService.getVendorAccount(accountId);\r\n dispatch({\r\n type: 'loadExistingData',\r\n payload: {\r\n accountId: accountId,\r\n company: accountResult.data.name,\r\n vendorNumbers: accountResult.data.vendorNumbers,\r\n contactEmail: accountResult.data.contactEmail,\r\n },\r\n });\r\n stopProgress();\r\n } catch (err) {\r\n catchApiError(err);\r\n }\r\n };\r\n\r\n if (vendorAccountId) {\r\n fetchData(vendorAccountId);\r\n }\r\n }, [vendorAccountId]);\r\n\r\n const handleSubmit = (event) => {\r\n //internal functions\r\n const handleSubmitResult = (apiResult, successMessage, onSuccess) => {\r\n stopProgress();\r\n if (apiResult.errors && apiResult.errors.length > 0) {\r\n let { errors } = formErrorFactory.createErrors(apiResult.errors);\r\n dispatch({\r\n type: 'error',\r\n payload: errors,\r\n });\r\n } else {\r\n dispatch({ type: 'success' });\r\n setReloadContext(new Date());\r\n showSuccessSnackBar(successMessage);\r\n if (onSuccess) {\r\n onSuccess();\r\n }\r\n }\r\n };\r\n\r\n //Submitting\r\n startProgress();\r\n event.preventDefault();\r\n dispatch({ type: 'submit' });\r\n const formData = new FormData();\r\n\r\n if (!isEdit) {\r\n vendorAccountApiService\r\n .createVendorAccount(formData, {\r\n headers: { 'Content-Type': 'multipart/form-data' },\r\n params: {\r\n name: company,\r\n contactEmail: contactEmail,\r\n firstName: firstName,\r\n lastName: lastName,\r\n phoneNumber: phoneNumber,\r\n vendorNumbers: vendorNumbers,\r\n username: username,\r\n },\r\n })\r\n .then((result) => {\r\n handleSubmitResult(result, `The Vendor was created successfully`, () => {\r\n history.replace(`/accounts/vendor/${result.data}/edit`);\r\n });\r\n })\r\n .catch((err) => {\r\n catchApiError(err, () => {\r\n dispatch({\r\n type: 'error',\r\n payload: [],\r\n });\r\n });\r\n });\r\n } else {\r\n vendorAccountApiService\r\n .updateVendorAccount(formData, {\r\n headers: { 'Content-Type': 'multipart/form-data' },\r\n params: {\r\n id: accountId,\r\n name: company,\r\n contactEmail: contactEmail,\r\n vendorNumbers: vendorNumbers,\r\n },\r\n })\r\n .then((result) => {\r\n handleSubmitResult(result, `The Vendor was updated successfully`);\r\n })\r\n .catch((err) => {\r\n catchApiError(err, () => {\r\n dispatch({\r\n type: 'error',\r\n payload: [],\r\n });\r\n });\r\n });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n );\r\n};\r\n\r\nexport default withRouter(VendorAccountEntry);\r\n","import React from 'react';\r\nimport { useParams } from 'react-router';\r\n\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport Suppliers from './Suppliers';\r\nimport VendorAccountEntry from './VendorAccountEntry';\r\n\r\nexport default function VendorAccountEntryContainer(props) {\r\n let { id } = useParams();\r\n return (\r\n{children}
;\r\n}\r\n\r\nTitleFont.propTypes = {\r\n children: PropTypes.node,\r\n};\r\n","import { useLocation } from 'react-router';\r\n\r\nexport default function useQuery() {\r\n return new URLSearchParams(useLocation().search);\r\n}\r\n","import React, { useState } from 'react';\r\nimport { useHistory, useLocation } from 'react-router';\r\n\r\nimport useQuery from './useQuery';\r\n\r\nconst useFilterQuery = () => {\r\n const location = useLocation();\r\n const query = useQuery();\r\n const history = useHistory();\r\n const [queryString, setQueryString] = useState(location.search ? location.search.slice(1) : '');\r\n\r\n let supplierId = query.get('supId');\r\n let dateBasedOn = query.get('b');\r\n let startPeriod = query.get('from');\r\n let endPeriod = query.get('to');\r\n let freeText = query.get('s');\r\n let specialSearchTitle = query.get('sst');\r\n let portOriginCode = query.get('pOri');\r\n let portDestinationCode = query.get('pDest');\r\n let trans = query.get('trans');\r\n let mode = query.get('mode');\r\n let companyId = query.get('cId');\r\n\r\n let filterQuery = {\r\n supplierId: supplierId,\r\n dateBasedOn: dateBasedOn,\r\n startPeriod: startPeriod,\r\n endPeriod: endPeriod,\r\n freeText: freeText,\r\n specialSearchTitle: specialSearchTitle,\r\n portOriginCode: portOriginCode,\r\n portDestinationCode: portDestinationCode,\r\n trans: trans,\r\n mode: mode,\r\n companyId: companyId,\r\n };\r\n\r\n function updateAddressUrl(filter, includeFreeTextSearch = true) {\r\n let pathName = history.location.pathname;\r\n var queryString = getQueryStrings(filter, includeFreeTextSearch);\r\n setQueryString(queryString);\r\n if (queryString) {\r\n queryString = '?' + queryString;\r\n }\r\n window.history.replaceState(null, null, pathName + queryString);\r\n }\r\n\r\n function getQueryStrings(filter, includeFreeTextSearch = true) {\r\n var searches = [];\r\n if (includeFreeTextSearch && filter.freeText) {\r\n searches.push('s=' + filter.freeText);\r\n }\r\n if (filter.startPeriod) {\r\n searches.push('from=' + filter.startPeriod);\r\n }\r\n if (filter.endPeriod) {\r\n searches.push('to=' + filter.endPeriod);\r\n }\r\n if (filter.supplierId) {\r\n searches.push('supId=' + filter.supplierId);\r\n }\r\n if (filter.dateBasedOn) {\r\n searches.push('b=' + filter.dateBasedOn);\r\n }\r\n if (filter.companyId) {\r\n searches.push('cId=' + filter.companyId);\r\n }\r\n var queryString = searches.map((item) => item).join('&');\r\n\r\n return queryString;\r\n }\r\n\r\n return { filterQuery, queryString, updateAddressUrl };\r\n};\r\n\r\nexport default useFilterQuery;\r\n","import { useRef } from 'react';\r\n\r\nexport default function useDelayChangedText(onDelayValueChange, onValueChange) {\r\n const textRef = useRef();\r\n const timerRef = useRef();\r\n\r\n const startDelayChange = () => {\r\n if (timerRef.current) {\r\n clearTimeout(timerRef.current);\r\n }\r\n timerRef.current = setTimeout(() => {\r\n triggerDelayValueChange();\r\n }, 500);\r\n };\r\n\r\n const triggerDelayValueChange = () => {\r\n if (timerRef.current) {\r\n clearTimeout(timerRef.current);\r\n }\r\n if (onDelayValueChange) {\r\n onDelayValueChange(textRef.current);\r\n }\r\n };\r\n\r\n const handleValueTextChange = (e) => {\r\n let text = e.target.value;\r\n textRef.current = text;\r\n onValueChange(e.target.value);\r\n startDelayChange();\r\n };\r\n\r\n const handleOnKeyPress = (event) => {\r\n if (event.key === 'Enter') {\r\n triggerDelayValueChange();\r\n }\r\n };\r\n\r\n return { handleValueTextChange, handleOnKeyPress };\r\n}\r\n","import React, { useRef } from 'react';\r\n\r\nimport { TextField } from '@material-ui/core';\r\n\r\nimport useDelayChangedText from 'src/hooks/useDelayChangedText';\r\n\r\nexport default function DelayChangedTextField2(props) {\r\n const { onDelayValueChange, onValueChange, value, ...remains } = props;\r\n\r\n const { handleValueTextChange, handleOnKeyPress } = useDelayChangedText(onDelayValueChange, onValueChange);\r\n \r\n return \r\n Filter:{' '}\r\n \r\n {state.specialSearch?.title}
\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCard.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n chart: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n whiteColor\r\n} from \"../../material-dashboard-react\";\r\n\r\nconst cardHeaderStyle = {\r\n cardHeader: {\r\n padding: \"0.75rem 1.25rem\",\r\n marginBottom: \"0\",\r\n borderBottom: \"none\",\r\n background: \"transparent\",\r\n zIndex: \"3 !important\",\r\n \"&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n margin: \"0 15px\",\r\n padding: \"0\",\r\n position: \"relative\",\r\n color: whiteColor\r\n },\r\n \"&:first-child\": {\r\n borderRadius: \"calc(.25rem - 1px) calc(.25rem - 1px) 0 0\"\r\n },\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n \"&:not($cardHeaderIcon)\": {\r\n borderRadius: \"3px\",\r\n marginTop: \"-20px\",\r\n padding: \"15px\"\r\n }\r\n },\r\n \"&$cardHeaderStats svg\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n textAlign: \"center\",\r\n width: \"36px\",\r\n height: \"36px\",\r\n margin: \"10px 10px 4px\"\r\n },\r\n \"&$cardHeaderStats i,&$cardHeaderStats .material-icons\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n width: \"56px\",\r\n height: \"56px\",\r\n textAlign: \"center\",\r\n overflow: \"unset\",\r\n marginBottom: \"1px\"\r\n },\r\n \"&$cardHeaderStats$cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n }\r\n },\r\n cardHeaderPlain: {\r\n marginLeft: \"0px !important\",\r\n marginRight: \"0px !important\"\r\n },\r\n cardHeaderStats: {\r\n \"& $cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n },\r\n \"& h1,& h2,& h3,& h4,& h5,& h6\": {\r\n margin: \"0 !important\"\r\n }\r\n },\r\n cardHeaderIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n background: \"transparent\",\r\n boxShadow: \"none\"\r\n },\r\n \"& i,& .material-icons\": {\r\n width: \"33px\",\r\n height: \"33px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\"\r\n },\r\n \"& svg\": {\r\n width: \"24px\",\r\n height: \"24px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\",\r\n margin: \"5px 4px 0px\"\r\n }\r\n },\r\n warningCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...warningCardHeader\r\n }\r\n },\r\n successCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...successCardHeader\r\n }\r\n },\r\n dangerCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...dangerCardHeader\r\n }\r\n },\r\n infoCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...infoCardHeader\r\n }\r\n },\r\n primaryCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...primaryCardHeader\r\n }\r\n },\r\n roseCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...roseCardHeader\r\n }\r\n }\r\n};\r\n\r\nexport default cardHeaderStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"../../assets/jss/material-dashboard-react/components/cardHeaderStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardHeader(props) {\r\n const classes = useStyles();\r\n const { className, children, color, plain, stats, icon, ...rest } = props;\r\n const cardHeaderClasses = classNames({\r\n [classes.cardHeader]: true,\r\n [classes[color + \"CardHeader\"]]: color,\r\n [classes.cardHeaderPlain]: plain,\r\n [classes.cardHeaderStats]: stats,\r\n [classes.cardHeaderIcon]: icon,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardHeader.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n plain: PropTypes.bool,\r\n stats: PropTypes.bool,\r\n icon: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","const cardBodyStyle = {\r\n cardBody: {\r\n padding: \"0.9375rem 20px\",\r\n flex: \"1 1 auto\",\r\n WebkitBoxFlex: \"1\",\r\n position: \"relative\"\r\n },\r\n cardBodyPlain: {\r\n paddingLeft: \"5px\",\r\n paddingRight: \"5px\"\r\n },\r\n cardBodyProfile: {\r\n marginTop: \"15px\"\r\n }\r\n};\r\n\r\nexport default cardBodyStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"../../assets/jss/material-dashboard-react/components/cardBodyStyle.js\"\r\n// assets/jss/material-dashboard-react\r\n// \"../../assets/jss/material-dashboard-react/components/cardBodyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardBody(props) {\r\n const classes = useStyles();\r\n const { className, children, plain, profile, ...rest } = props;\r\n const cardBodyClasses = classNames({\r\n [classes.cardBody]: true,\r\n [classes.cardBodyPlain]: plain,\r\n [classes.cardBodyProfile]: profile,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardBody.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function ContentFont(props) {\r\n const { children } = props;\r\n return {children}
;\r\n}\r\n\r\nContentFont.propTypes = {\r\n children: PropTypes.node,\r\n};\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n float: 'right',\r\n '& img': {\r\n right: 10,\r\n width: 19,\r\n bottom: 26,\r\n position: 'absolute',\r\n },\r\n },\r\n}));\r\n\r\nexport default function ChartLogo(props) {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n ![](\"../../../images/iconSmallFickle.png\" "\\"Fickle")
\r\n \r\n
\r\n );\r\n}\r\n","import clsx from 'clsx';\r\nimport React from 'react';\r\n\r\nimport { Box } from '@material-ui/core';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n position: 'absolute',\r\n width: '100%',\r\n width: '-moz-available',\r\n width: '-webkit-fill-available',\r\n width: 'fill-available',\r\n height: '100%',\r\n height: '-moz-available',\r\n height: '-webkit-fill-available',\r\n height: 'fill-available',\r\n backgroundColor: 'rgb(255,255,255,0.7)',\r\n borderRadius: 6,\r\n zIndex: 100,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n progressSmall: {\r\n width: '20px !important',\r\n height: '20px !important',\r\n },\r\n progressBig: {\r\n width: '60px !important',\r\n height: '60px !important',\r\n },\r\n text: {\r\n marginTop: theme.spacing(2),\r\n },\r\n}));\r\n\r\nexport default function LoadingOverlay(props) {\r\n const classes = useStyles();\r\n const { IsLoading, Size, className, text } = props;\r\n\r\n if (IsLoading === undefined) {\r\n return ;\r\n } else if (IsLoading === true) {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n } else {\r\n return <>;\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nfunction ChartNoData(props) {\r\n const { text = 'No Data on Specific Period', ...rest } = props;\r\n\r\n return (\r\n \r\n {text} }\r\n
\r\n \r\n {text}\r\n
\r\n );\r\n}\r\n\r\nChartNoData.propTypes = {\r\n text: PropTypes.string,\r\n};\r\n\r\nexport default ChartNoData;\r\n","import React, { useLayoutEffect, useEffect, useCallback } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '../../Card/Card.js';\r\nimport CardHeader from '../../Card/CardHeader.js';\r\nimport apiService from '../../../services/api.service';\r\nimport { useHistory } from 'react-router';\r\nimport CardBody from '../../Card/CardBody';\r\nimport { useState } from 'react';\r\nimport helpService from '../../../services/help.service';\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport * as am4charts from '@amcharts/amcharts4/charts';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport { lightTheme } from '../../../themes/lightTheme';\r\nimport '../../../util/extensions';\r\nimport ContentFont from '../../Typography/ContentFont';\r\nimport ChartLogo from '../../parts/ChartLogo';\r\nimport LoadingOverlay from '../../parts/LoadingOverlay';\r\nimport { Link } from 'react-router-dom';\r\nimport { format } from 'react-string-format';\r\nimport ChartNoData from '../../parts/ChartNoData.js';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n chart: {\r\n position: 'relative',\r\n height: '500px',\r\n marginTop: '20px',\r\n marginBottom: '0px',\r\n },\r\n}));\r\n\r\nfunction AirFreightKGSPerSupplierChart(props) {\r\n const classes = useStyles();\r\n const [chartDataInput, setChartDataInput] = useState([]);\r\n const { FilterComponentData, baseQueryString } = props;\r\n const [scaleSet, setScaleSet] = useState(1);\r\n const [dataLength, setDataLength] = useState(0);\r\n const labelLimit = 5;\r\n const scaleWidth = 40;\r\n const [showNoData, setShowNoData] = useState(false);\r\n const [IsLoading, setIsLoading] = useState();\r\n\r\n const history = useHistory();\r\n\r\n function hasChartData() {\r\n if (chartDataInput && chartDataInput.length > 0) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n function getDetailsPageUrl(supplierfullname) {\r\n if (supplierfullname) {\r\n return format('/shipments?trans=AIR&s={0}&{1}&sst={2}', supplierfullname, baseQueryString, 'Air Freight');\r\n } else {\r\n return format('/shipments?trans=AIR&{0}&sst={1}', baseQueryString, 'Air Freight');\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n if (FilterComponentData.accountId && FilterComponentData.start && FilterComponentData.end) {\r\n setIsLoading(true);\r\n apiService\r\n .getAirFreightKgsPerSupplier(\r\n FilterComponentData.accountId,\r\n FilterComponentData.dateBasedOn,\r\n FilterComponentData.start,\r\n FilterComponentData.end,\r\n FilterComponentData.suppliers\r\n )\r\n .then((result) => {\r\n if (!isCancelled) {\r\n if (result.data.airFreightKGSPerSupplierReportItems != '' && result.data.airFreightKGSPerSupplierReportItems.length > 0) {\r\n setDataLength(result.data.airFreightKGSPerSupplierReportItems.length);\r\n if (result.data.airFreightKGSPerSupplierReportItems.length > scaleWidth) {\r\n setScaleSet((scaleWidth / result.data.airFreightKGSPerSupplierReportItems.length).toFixed(1));\r\n } else {\r\n setScaleSet(1);\r\n }\r\n setShowNoData(false);\r\n } else {\r\n setDataLength(0);\r\n setScaleSet(1);\r\n setShowNoData(true);\r\n }\r\n\r\n setChartDataInput(result.data.airFreightKGSPerSupplierReportItems);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch((err) => {\r\n if (err.response && err.response.status === 401) history.push('/login');\r\n });\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [FilterComponentData, history]);\r\n\r\n useLayoutEffect(() => {\r\n var chart;\r\n if (hasChartData()) {\r\n var colorList = [];\r\n for (var i = 0; i < lightTheme.chart.colors.length; i++) {\r\n colorList.push(am4core.color(lightTheme.chart.colors[i]));\r\n }\r\n\r\n chart = am4core.create('AirFreightKGSPeriodSupplierChart', am4charts.XYChart);\r\n chart.scrollbarX = new am4core.Scrollbar();\r\n chart.scrollbarX.visible = scaleSet < 1;\r\n chart.scrollbarX.end = scaleSet;\r\n\r\n chart.colors.list = colorList;\r\n\r\n chart.data = prepareStuff(chartDataInput);\r\n chart.logo.disabled = true;\r\n\r\n // Create axes\r\n let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n categoryAxis.title.numberFormatter.numberFormat = '#,###.## Kg';\r\n categoryAxis.dataFields.category = 'supplier';\r\n categoryAxis.renderer.grid.template.location = 0;\r\n categoryAxis.renderer.minGridDistance = 30;\r\n if (dataLength > labelLimit) {\r\n categoryAxis.renderer.labels.template.horizontalCenter = 'right';\r\n categoryAxis.renderer.labels.template.verticalCenter = 'middle';\r\n categoryAxis.fontSize = 11;\r\n } else categoryAxis.fontSize = 14;\r\n\r\n categoryAxis.renderer.labels.template.rotation = dataLength < labelLimit ? 0 : 315;\r\n\r\n categoryAxis.renderer.minHeight = 110;\r\n\r\n let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n valueAxis.renderer.minWidth = 50;\r\n\r\n // Create series\r\n let series = chart.series.push(new am4charts.ColumnSeries());\r\n series.sequencedInterpolation = true;\r\n series.dataFields.valueY = 'weight';\r\n series.dataFields.categoryX = 'supplier';\r\n series.tooltipText = '{supplierfullname}: [bold]{valueY}[/]';\r\n series.columns.template.strokeWidth = 0;\r\n series.tooltip.pointerOrientation = 'vertical';\r\n series.columns.template.column.fillOpacity = 0.8;\r\n series.columns.template.url = getDetailsPageUrl('{supplierfullname}');\r\n\r\n // on hover, make corner radiuses bigger\r\n let hoverState = series.columns.template.column.states.create('hover');\r\n hoverState.properties.cornerRadiusTopLeft = 5;\r\n hoverState.properties.cornerRadiusTopRight = 5;\r\n hoverState.properties.fillOpacity = 1;\r\n\r\n series.columns.template.adapter.add('fill', function (fill, target) {\r\n return chart.colors.getIndex(target.dataItem.index);\r\n });\r\n\r\n // Cursor\r\n chart.cursor = new am4charts.XYCursor();\r\n }\r\n return () => {\r\n if (chart) chart.dispose();\r\n };\r\n }, [chartDataInput, showNoData]);\r\n\r\n const prepareStuff = (data) => {\r\n var tempArray = [];\r\n data.forEach((item) => {\r\n let itemObj = {\r\n supplier: dataLength < labelLimit ? item.supplier : helpService.truncateString(item.supplier, 15),\r\n supplierfullname: item.supplier, // item.supplier,\r\n weight: item.weight,\r\n };\r\n tempArray.push(itemObj);\r\n });\r\n\r\n return tempArray;\r\n };\r\n\r\n return (\r\n Air Freight KGS Per Supplier
\r\n \r\nAverage Transit Time Per Port Pair
\r\n \r\nFreight Spending
\r\n \r\nCubic Measurement Per Supplier
\r\n \r\nFreight, Destination and Customs Disbursement Charges
\r\nCustoms and Duty Value Per Supplier
\r\n \r\nFreight Spending
\r\n \r\nIncoterm Per Port-Pair
\r\n \r\nJobs & Incoterms Per Country
\r\nJob Types Per Supplier
\r\n \r\nJob Types
\r\nLCL Volume Per Port-Pair
\r\n \r\nOrder Delays
\r\n \r\nShipment Delays
\r\n \r\nTEU Per Port-Pair
\r\n \r\n\r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardFooter.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n stats: PropTypes.bool,\r\n chart: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n grayColor\r\n} from \"../../material-dashboard-react\";\r\n\r\nconst cardIconStyle = {\r\n cardIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n borderRadius: \"3px\",\r\n backgroundColor: grayColor[0],\r\n padding: \"15px\",\r\n marginTop: \"-20px\",\r\n marginRight: \"15px\",\r\n float: \"left\"\r\n }\r\n },\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader\r\n};\r\n\r\nexport default cardIconStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"../../assets/jss/material-dashboard-react/components/cardIconStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardIcon(props) {\r\n const classes = useStyles();\r\n const { className, children, color, ...rest } = props;\r\n const cardIconClasses = classNames({\r\n [classes.cardIcon]: true,\r\n [classes[color + \"CardHeader\"]]: color,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardIcon.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport HourglassFullIcon from '@material-ui/icons/HourglassFull';\r\n\r\nimport Card from '../../../components//Card/Card.js';\r\nimport CardFooter from '../../../components//Card/CardFooter.js';\r\nimport CardHeader from '../../../components//Card/CardHeader.js';\r\nimport CardIcon from '../../../components//Card/CardIcon.js';\r\nimport apiService from '../../../services/api.service';\r\nimport helperService from '../../../services/help.service';\r\nimport TitleFont from '../../Typography/TitleFont.js';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardTitle: {\r\n color: 'rgba(0, 0, 0, 0.87)',\r\n fontSize: '1.5rem',\r\n },\r\n cardCategory: {\r\n color: 'rgba(0, 0, 0, 0.87)',\r\n '& a': {\r\n color: 'rgba(0, 0, 0, 0.87)',\r\n },\r\n },\r\n}));\r\n\r\nfunction TotalCBMCard(props) {\r\n const classes = useStyles();\r\n const { FilterComponentData, baseQueryString } = props;\r\n const history = useHistory();\r\n const [totalCBM, setTotalCBM] = useState();\r\n\r\n function getDetailsPageUrl() {\r\n return '/shipments?' + baseQueryString;\r\n }\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n if (FilterComponentData.accountId && FilterComponentData.start && FilterComponentData.end) {\r\n apiService\r\n .getTotalCbmReport(\r\n FilterComponentData.accountId,\r\n FilterComponentData.dateBasedOn,\r\n FilterComponentData.start,\r\n FilterComponentData.end,\r\n FilterComponentData.suppliers\r\n )\r\n .then((result) => {\r\n if (!isCancelled) {\r\n setTotalCBM(result.data.count);\r\n }\r\n })\r\n .catch((err) => {\r\n console.log('error: ', err);\r\n if (!isCancelled) {\r\n setTotalCBM(null);\r\n }\r\n if (err.response && err.response.status === 401) history.push('/login');\r\n });\r\n } else {\r\n setTotalCBM(null);\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [FilterComponentData, history]);\r\n\r\n return (\r\n \r\n Total Volume\r\n
\r\n\r\n {totalCBM ? helperService.thousands_separators(totalCBM) : '-'}{' '}\r\n \r\n m3\r\n \r\n
\r\n\r\n {' '}\r\n
\r\n \r\n Total Disbursement\r\n
\r\n$ {totalSpent ? helperService.thousands_separators(totalSpent) : '-'}
\r\n\r\n Total FCL TEU\r\n
\r\n{totalFCLTEU ? helperService.thousands_separators(totalFCLTEU) : '-'}
\r\n\r\n Total Shipments\r\n
\r\n{totalShipments ? helperService.thousands_separators(totalShipments) : '-'}
\r\n\r\n {' '}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Origin \r\n \r\n \r\n Destination \r\n \r\n \r\n
\r\n \r\n Volume Per Country
\r\nWeight Per Port-Pair
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {filterComponentData && (\r\n <>\r\n {filterComponentData.start ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {customerAccountFeatures.enabledCommercialInvoices && (\r\n \r\n \r\n )}\r\n \r\n \r\n {chartBoxSizes.CustomCharges && (\r\n \r\n \r\n )}\r\n {chartBoxSizes.CASAFreightSpendsPieChart && (\r\n \r\n \r\n )}\r\n {chartBoxSizes.FreightSpendsPieChart && (\r\n \r\n \r\n )}\r\n {chartBoxSizes.JobTypes && (\r\n \r\n \r\n )}\r\n {chartBoxSizes.ShipmentDelay && (\r\n \r\n \r\n )}\r\n {chartBoxSizes.OrderDelay && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {customerAccountFeatures.enabledCommercialInvoices && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n Please select start and end month. \r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {headCell.label}\r\n {tooltip ? (\r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n {orderBy === headCell.id ? {order === 'desc' ? 'sorted descending' : 'sorted ascending'} : null}\r\n \r\n \r\n );\r\n })}\r\n {props.rowActionComponent && \r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n );\r\n}\r\n","import clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\n\r\nimport { Grid, makeStyles } from '@material-ui/core';\r\n\r\nimport useCustomerAccountFeatures from 'src/hooks/useCustomerAccountFeatures';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n featureDisabledMessage: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n messageArea: {\r\n paddingBottom: '48px !important',\r\n },\r\n}));\r\n\r\nexport default function FeatureDisabledMessage(props) {\r\n const { title = 'Sorry.', message = 'This feature is not enabled for you. Please contact an administrator.' } = props;\r\n const classes = useStyles();\r\n const { featuresLoaded } = useCustomerAccountFeatures();\r\n return (\r\n <>\r\n {featuresLoaded && (\r\n {title}
\r\nCommercial Invoice Value Per Supplier
\r\nShipments Spends
\r\nExceptions
\r\nPort Pair Data
\r\n{title}
\r\n{valueText}
\r\n{title}
\r\n\r\n Show/Hide values above bullets: Click on a bullet.\r\n \r\n )}\r\n \r\n }\r\n >\r\n
\r\n
\r\n {title}
\r\n {caption && <>({caption})}\r\n\r\n {productCode}: {productName}\r\n
\r\n\r\nProducts
\r\n\r\n
\r\n Shipment Details
\r\nShipment Spends
\r\nShipments
\r\nSpend Per Supplier
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default TabsContainer;\r\n","import * as am4core from '@amcharts/amcharts4/core';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\nimport am4themes_material from '@amcharts/amcharts4/themes/material';\r\nimport React from 'react';\r\n\r\nimport Grid from '@material-ui/core/Grid';\r\n\r\nimport useCustomerAccountFeatures from '../../hooks/useCustomerAccountFeatures';\r\nimport EntityListFrame from '../layouts/EntityListFrame';\r\nimport FeatureDisabledMessage from '../parts/FeatureDisabledMessage';\r\nimport SentReceivedChart from './EDIReport/SentReceivedChart';\r\nimport TabsContainer from './EDIReport/TabsContainer';\r\n\r\nam4core.useTheme(am4themes_material);\r\nam4core.addLicense('255064348');\r\nam4core.useTheme(am4themes_animated);\r\n\r\nfunction EDIReport(props) {\r\n const { enabledEDIReport } = useCustomerAccountFeatures();\r\n\r\n return (\r\n \r\n
\r\n )}\r\n Description:
\r\n{selectedEndpointOnDialog.description}
\r\nURL:
\r\n{selectedEndpointOnDialog.url}
\r\nParameters:
\r\n{selectedEndpointOnDialog.parameters}
\r\nResult:
\r\n{selectedEndpointOnDialog.result}
\r\n\r\n \r\n {item.description}\r\n \r\n
\r\n \r\n \r\n {\r\n setErrorAlertOpen(false);\r\n }}\r\n >\r\n {\r\n setErrorAlertOpen(false);\r\n }}\r\n severity=\"error\"\r\n >\r\n {alertErrorMessage}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ![\"background\"](\"/images/VERUS-LOGO-WHITE3.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {props.children}\r\n \r\n \r\n \r\n ![](\"src/../images/Fickle-Black.webp\")
\r\n \r\n Copyright © 2023 Fickle Tech.\r\n \r\n \r\n \r\n
\r\n \r\n 404
\r\nPage not found
\r\nThe page your are looking for may have been moved or deleted.
\r\n\r\n {shipmentTracking.orderProductItems.map((orderProductItem, index) => {\r\n return (\r\n \r\n {orderProductItem.lineNumber}: \r\n {orderProductItem.productCode}\r\n \r\n );\r\n })}\r\n
\r\n )}\r\nSearch not found
\r\n )}\r\n\r\n
\r\n \r\n {shipmentTrackingModel && (\r\n <>\r\n {shipmentTrackingModel.originFullname}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Last updated: {moment(lastUpdatedDateText, 'DDMMYYYY').fromNow() + ' ' + `(${lastUpdatedDateText})`} \r\n
\r\n );\r\n}\r\n\r\nTabsContainer.propTypes = {\r\n width: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']).isRequired,\r\n};\r\n\r\nexport default withWidth()(TabsContainer);\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { useParams } from 'react-router';\r\n\r\nimport { Box, Paper } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport useCatchAPIError from 'src/hooks/useCatchAPIError';\r\nimport accountApiService from 'src/services/account.api.service';\r\nimport publicShipmentTrackingApiService from 'src/services/publicShipmentTracking.api.service';\r\n\r\nimport PublicPageFrame from '../layouts/PublicPageFrame';\r\nimport PageNotFound from '../parts/PageNotFound';\r\nimport Map from './PublicTrackAndTrace/Map';\r\nimport Milestones from './PublicTrackAndTrace/MileStones';\r\nimport SearchBox from './PublicTrackAndTrace/SearchBox';\r\nimport TabsContainer from './PublicTrackAndTrace/TabsContainer';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n mapAndMilestonePaper: {\r\n borderRadius: 8,\r\n borderTopLeftRadius: 0,\r\n borderBottomLeftRadius: 0,\r\n height: 590,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n },\r\n informationBox: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n // '& span': {\r\n // backgroundColor: 'antiquewhite',\r\n // paddingLeft: 3,\r\n // paddingRight: 3,\r\n // borderRadius: 5,\r\n // },\r\n },\r\n}));\r\n\r\nfunction PublicTrackAndTrace(props) {\r\n const classes = useStyles();\r\n let { accountAlias } = useParams();\r\n\r\n const [accountId, setAccountId] = useState();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [featureEnabled, setFeatureEnabled] = useState(false);\r\n const [shipmentTrackingId, setShipmentTrackingId] = useState();\r\n const [shipmentTrackingModel, setShipmentTrackingModel] = useState();\r\n const [ready, setReady] = useState(false);\r\n const { catchApiError } = useCatchAPIError();\r\n\r\n useEffect(()=>{\r\n \r\n })\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n\r\n let initialize = async () => {\r\n try {\r\n let accountIdResult = await accountApiService.getAccountIdByAlias(accountAlias);\r\n if (accountIdResult.data) {\r\n let accountId = accountIdResult.data;\r\n let featureEnabledResult = await publicShipmentTrackingApiService.hasPublicTrackAndTraceEnabled(accountId);\r\n if (!isCancelled) {\r\n setAccountId(accountId);\r\n setFeatureEnabled(featureEnabledResult.data);\r\n }\r\n }\r\n } catch (err) {\r\n setAccountId(undefined);\r\n setFeatureEnabled(undefined);\r\n catchApiError(err);\r\n } finally {\r\n setReady(true);\r\n }\r\n };\r\n\r\n if (accountAlias) {\r\n initialize();\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [accountAlias]);\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n\r\n if (accountId && shipmentTrackingId) {\r\n setIsLoading(true);\r\n publicShipmentTrackingApiService\r\n .getPublicShipmentTrackingById(accountId, shipmentTrackingId)\r\n .then((result) => {\r\n if (!isCancelled) {\r\n setShipmentTrackingModel(result.data);\r\n }\r\n setIsLoading(false);\r\n })\r\n .catch(catchApiError);\r\n } else {\r\n setShipmentTrackingModel(undefined);\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [accountId, shipmentTrackingId]);\r\n\r\n const handleSelectedShipmentTrackingId = (shipmentTrackingId) => {\r\n setShipmentTrackingId(shipmentTrackingId);\r\n };\r\n\r\n return (\r\n \r\n Filter:{' '}\r\n \r\n {state.specialSearch?.title}
\r\n {title}
\r\nOrder Number: {orderNumber}
\r\nShipments Status
\r\nPurchase Orders
\r\n\r\n
\r\n Purchase Order Lines
\r\nOrder Lines Milestones
\r\nOrder Lines Spends
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FocusShipmentCheckbox;\r\n","import React, { useEffect, useLayoutEffect, useState } from 'react';\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport * as am4maps from '@amcharts/amcharts4/maps';\r\nimport am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow';\r\nimport { lightTheme } from '../../../themes/lightTheme';\r\nimport apiService from '../../../services/api.service';\r\nimport { useHistory } from 'react-router';\r\nimport moment from 'moment';\r\nimport { Box, makeStyles } from '@material-ui/core';\r\n\r\nvar targetSVG =\r\n 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n position: 'relative',\r\n },\r\n map: {\r\n width: '100%',\r\n flexGrow: 1,\r\n borderBottomRightRadius: 8,\r\n },\r\n tips: {\r\n position: 'absolute',\r\n color: '#666',\r\n fontSize: '0.75rem',\r\n left: 5,\r\n bottom: 5,\r\n },\r\n}));\r\n\r\nexport default function Map(props) {\r\n const { shipmentTrackingModel } = props;\r\n const [vesselPosition, setVesselPosition] = useState(null);\r\n const history = useHistory();\r\n const classes = useStyles();\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n\r\n if (shipmentTrackingModel && shipmentTrackingModel.shipmentTrackingId) {\r\n setVesselPosition(null);\r\n apiService\r\n .getVesselPositionByShipmentTrackingId(shipmentTrackingModel.shipmentTrackingId)\r\n .then((result) => {\r\n if (!isCancelled && result.data) {\r\n setVesselPosition(result.data);\r\n }\r\n })\r\n .catch((err) => {\r\n if (err.response && err.response.status === 401) history.push('/login');\r\n });\r\n } else {\r\n setVesselPosition(null);\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [shipmentTrackingModel]);\r\n\r\n useLayoutEffect(() => {\r\n let chart = am4core.create('TrackAndTraceMap', am4maps.MapChart);\r\n\r\n if (shipmentTrackingModel && shipmentTrackingModel.ports) {\r\n var colorList = [];\r\n for (var i = 0; i < lightTheme.chart.colors.length; i++) {\r\n colorList.push(am4core.color(lightTheme.chart.colors[i]));\r\n }\r\n\r\n chart.logo.disabled = true;\r\n var title = chart.titles.create();\r\n title.textAlign = 'middle';\r\n\r\n // Set map definition\r\n chart.geodata = am4geodata_worldLow;\r\n\r\n // Set projection\r\n chart.projection = new am4maps.projections.Miller();\r\n\r\n // Create map polygon series\r\n var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());\r\n polygonSeries.exclude = ['AQ'];\r\n polygonSeries.useGeodata = true;\r\n polygonSeries.nonScalingStroke = true;\r\n polygonSeries.strokeWidth = 0.5;\r\n polygonSeries.calculateVisualCenter = true;\r\n\r\n let blinkPort = prepareBlinkDestinationPort(shipmentTrackingModel.ports);\r\n if (blinkPort && blinkPort.length > 0) {\r\n var blinkImageSeries = chart.series.push(new am4maps.MapImageSeries());\r\n var blinkTemplate = blinkImageSeries.mapImages.template;\r\n blinkTemplate.nonScaling = true;\r\n blinkTemplate.propertyFields.latitude = 'latitude';\r\n blinkTemplate.propertyFields.longitude = 'longitude';\r\n blinkTemplate.propertyFields.fill = 'color';\r\n blinkImageSeries.data = blinkPort;\r\n\r\n var portBlink = blinkImageSeries.mapImages.template.createChild(am4core.Circle);\r\n portBlink.radius = 3;\r\n portBlink.propertyFields.fill = 'color';\r\n\r\n portBlink.events.on('inited', function (event) {\r\n animateBullet(event.target);\r\n });\r\n }\r\n\r\n var imageSeries = chart.series.push(new am4maps.MapImageSeries());\r\n var imageTemplate = imageSeries.mapImages.template;\r\n imageTemplate.nonScaling = true;\r\n imageTemplate.tooltipText = '{title}';\r\n\r\n var marker = imageTemplate.createChild(am4core.Sprite);\r\n marker.path = targetSVG;\r\n marker.horizontalCenter = 'middle';\r\n marker.verticalCenter = 'middle';\r\n marker.scale = 1;\r\n\r\n imageTemplate.propertyFields.latitude = 'latitude';\r\n imageTemplate.propertyFields.longitude = 'longitude';\r\n imageTemplate.propertyFields.fill = 'color';\r\n imageSeries.data = prepareChartData(shipmentTrackingModel.ports);\r\n\r\n // Add lines\r\n var lineSeries = chart.series.push(new am4maps.MapLineSeries());\r\n lineSeries.dataFields.multiGeoLine = 'multiGeoLine';\r\n let geoLineColor = am4core.color(lightTheme.shipmentTracking.map.geoLineColor);\r\n\r\n var lineTemplate = lineSeries.mapLines.template;\r\n lineTemplate.nonScalingStroke = true;\r\n lineTemplate.arrow.nonScaling = true;\r\n lineTemplate.arrow.width = 4;\r\n lineTemplate.arrow.height = 6;\r\n lineTemplate.stroke = geoLineColor;\r\n lineTemplate.fill = geoLineColor;\r\n lineTemplate.line.strokeOpacity = 0.4;\r\n lineSeries.data = prepareGeoLineChartData(shipmentTrackingModel.ports);\r\n\r\n //Vessel\r\n if (vesselPosition) {\r\n var vesselImageSeries = chart.series.push(new am4maps.MapImageSeries());\r\n var vesselImageTemplate = vesselImageSeries.mapImages.template;\r\n vesselImageTemplate.nonScaling = true;\r\n vesselImageTemplate.tooltipText = `[bold]Status:[/] {status}\r\n [bold]Updated:[/] {timestampText}`;\r\n vesselImageTemplate.propertyFields.latitude = 'latitude';\r\n vesselImageTemplate.propertyFields.longitude = 'longitude';\r\n vesselImageTemplate.propertyFields.fill = 'color';\r\n vesselImageSeries.data = prepareVesselChartData(vesselPosition);\r\n\r\n var vesselImage = vesselImageTemplate.createChild(am4core.Image);\r\n vesselImage.propertyFields.href = 'imageURL';\r\n vesselImage.width = 20;\r\n vesselImage.height = 20;\r\n vesselImage.horizontalCenter = 'middle';\r\n vesselImage.verticalCenter = 'middle';\r\n vesselImage.moveTo(undefined, vesselPosition.headingDeg);\r\n\r\n var circleBlink = vesselImageSeries.mapImages.template.createChild(am4core.Circle);\r\n circleBlink.radius = 3;\r\n circleBlink.propertyFields.fill = 'color';\r\n\r\n circleBlink.events.on('inited', function (event) {\r\n animateBullet(event.target);\r\n });\r\n }\r\n\r\n function animateBullet(circle) {\r\n var animation = circle.animate(\r\n [\r\n { property: 'scale', from: 1, to: 6 },\r\n { property: 'opacity', from: 1, to: 0 },\r\n ],\r\n 1000,\r\n am4core.ease.circleOut\r\n );\r\n animation.events.on('animationended', function (event) {\r\n animateBullet(event.target.object);\r\n });\r\n }\r\n }\r\n\r\n return () => {\r\n chart.dispose();\r\n };\r\n }, [shipmentTrackingModel, vesselPosition]);\r\n\r\n function prepareChartData(ports) {\r\n let originColor = am4core.color(lightTheme.shipmentTracking.map.originColor);\r\n let destinationColor = am4core.color(lightTheme.shipmentTracking.map.destinationColor);\r\n var transhipmentColors = [];\r\n for (var i = 0; i < lightTheme.shipmentTracking.map.transhipmentColors.length; i++) {\r\n transhipmentColors.push(am4core.color(lightTheme.shipmentTracking.map.transhipmentColors[i]));\r\n }\r\n\r\n let portsAsChartData = ports.map((port, index) => {\r\n let color;\r\n if (port.order == 1) {\r\n color = originColor;\r\n } else if (port.order == ports.length) {\r\n color = destinationColor;\r\n } else {\r\n color = transhipmentColors[index % transhipmentColors.length];\r\n }\r\n\r\n let blink = false;\r\n //Arrival\r\n if (port.order == ports.length && shipmentTrackingModel.currentMilestoneStep == 2) {\r\n blink = true;\r\n }\r\n\r\n return {\r\n svgPath: targetSVG,\r\n title: port.fullName,\r\n latitude: port.lat,\r\n longitude: port.long,\r\n scale: 0.5,\r\n color: color,\r\n blink: blink,\r\n };\r\n });\r\n\r\n return portsAsChartData;\r\n }\r\n\r\n function prepareVesselChartData(vesselPosition) {\r\n let timestamp = moment(vesselPosition.timestamp);\r\n return [\r\n {\r\n latitude: parseFloat(vesselPosition.lat),\r\n longitude: parseFloat(vesselPosition.lon),\r\n imageURL: '/images/boat.png',\r\n color: am4core.color(lightTheme.shipmentTracking.map.vessel),\r\n status: vesselPosition.status,\r\n timestampText: timestamp.fromNow(),\r\n speed: vesselPosition.speed,\r\n },\r\n ];\r\n }\r\n\r\n function prepareGeoLineChartData(ports) {\r\n let geoLines = [];\r\n for (let i = 1; i < ports.length; i++) {\r\n let origin = ports[i - 1];\r\n let destination = ports[i];\r\n let geoLine = {\r\n multiGeoLine: [\r\n [\r\n { latitude: origin.lat, longitude: origin.long },\r\n { latitude: destination.lat, longitude: destination.long },\r\n ],\r\n ],\r\n };\r\n geoLines.push(geoLine);\r\n }\r\n return geoLines;\r\n }\r\n\r\n function prepareBlinkDestinationPort(ports) {\r\n let destinationColor = am4core.color(lightTheme.shipmentTracking.map.destinationColor);\r\n\r\n if (shipmentTrackingModel.currentMilestoneStep == 2) {\r\n let destinationPort = ports[ports.length - 1];\r\n return [\r\n {\r\n latitude: destinationPort.lat,\r\n longitude: destinationPort.long,\r\n color: destinationColor,\r\n },\r\n ];\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n return (\r\n \r\n {shipmentTracking.orderProductItems.map((orderProductItem, index) => {\r\n return (\r\n \r\n {orderProductItem.lineNumber}: \r\n {orderProductItem.productCode}\r\n \r\n );\r\n })}\r\n
\r\n )}\r\nSearch not found
\r\n )}\r\n\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default SubscribeButton;\r\n","import clsx from 'clsx';\r\nimport fileDownload from 'js-file-download';\r\nimport React, { useState } from 'react';\r\nimport { useHistory } from 'react-router';\r\n\r\nimport { Box, Grid, makeStyles } from '@material-ui/core';\r\nimport DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';\r\n\r\nimport apiService from '../../../services/api.service';\r\nimport LoadingOverlay from '../../parts/LoadingOverlay';\r\n\r\nconst useDocumentsItemStyles = makeStyles((theme) => ({\r\n root: {\r\n padding: theme.spacing(0.5),\r\n },\r\n overlayContainer: {\r\n position: 'relative',\r\n },\r\n documentRow: {\r\n paddingTop: theme.spacing(1),\r\n paddingBottom: theme.spacing(1),\r\n fontSize: '0.875rem',\r\n '& a': {\r\n color: theme.palette.shipmentTracking.documents.fontColor,\r\n },\r\n },\r\n documentIcon: {\r\n fontSize: '1rem',\r\n marginTop: -3,\r\n },\r\n hr: {\r\n marginBottom: 0,\r\n marginTop: 0,\r\n },\r\n}));\r\n\r\nfunction DocumentsItem(props) {\r\n const classes = useDocumentsItemStyles();\r\n const history = useHistory();\r\n const { shipmentNumber, model, index } = props;\r\n const [isDownloading, setIsDownloading] = useState(false);\r\n\r\n const handleDownloadLinkClicked = (event, shipmentTrackingDocumentId, filename) => {\r\n setIsDownloading(true);\r\n event.preventDefault();\r\n\r\n apiService\r\n .downloadShipmentTrackingDocumentById(shipmentNumber, shipmentTrackingDocumentId)\r\n .then((res) => {\r\n fileDownload(res, filename);\r\n setIsDownloading(false);\r\n })\r\n .catch((err) => {\r\n console.log('error: ', err);\r\n if (err.response && err.response.status === 401) history.push('/login');\r\n\r\n setIsDownloading(false);\r\n });\r\n };\r\n\r\n return (\r\n \r\n
Order Number: {orderNumber}
\r\n\r\n {shipmentTrackingModel && (\r\n <>\r\n {shipmentTrackingModel.originFullname}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Last updated: {moment(lastUpdatedDateText, 'DDMMYYYY').fromNow() + ' ' + `(${lastUpdatedDateText})`} \r\n
\r\n );\r\n}\r\n\r\nTabsContainer.propTypes = {\r\n width: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']).isRequired,\r\n};\r\n\r\nexport default withWidth()(TabsContainer);\r\n","import * as am4core from '@amcharts/amcharts4/core';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\nimport am4themes_material from '@amcharts/amcharts4/themes/material';\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nimport { Paper } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport EntityListFrame from 'src/components/layouts/EntityListFrame';\r\nimport FeatureDisabledMessage from 'src/components/parts/FeatureDisabledMessage';\r\nimport useAccounts from 'src/hooks/useAccounts';\r\nimport useCatchAPIError from 'src/hooks/useCatchAPIError';\r\nimport useCustomerAccountFeatures from 'src/hooks/useCustomerAccountFeatures';\r\nimport apiService from 'src/services/api.service';\r\n\r\nimport FocusShipmentCheckbox from './TrackAndTrace/FocusShipmentCheckbox';\r\nimport Map from './TrackAndTrace/Map';\r\nimport Milestones from './TrackAndTrace/MileStones';\r\nimport SearchBox from './TrackAndTrace/SearchBox';\r\nimport SubscribeButton from './TrackAndTrace/SubscribeButton';\r\nimport TabsContainer from './TrackAndTrace/TabsContainer';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n mapAndMilestonePaper: {\r\n borderRadius: 8,\r\n borderTopLeftRadius: 0,\r\n borderBottomLeftRadius: 0,\r\n height: 590,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n },\r\n subscribeButton: {\r\n padding: theme.spacing(0.5),\r\n position: 'absolute',\r\n right: 0,\r\n },\r\n focusCheckbox: {\r\n padding: theme.spacing(0.5),\r\n position: 'absolute',\r\n right: 0,\r\n top: 40,\r\n },\r\n}));\r\n\r\nam4core.useTheme(am4themes_material);\r\nam4core.addLicense('255064348');\r\nam4core.useTheme(am4themes_animated);\r\n\r\nfunction TrackAndTrace(props) {\r\n const classes = useStyles();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [shipmentTrackingId, setShipmentTrackingId] = useState();\r\n const [shipmentTrackingModel, setShipmentTrackingModel] = useState();\r\n const { catchApiError } = useCatchAPIError();\r\n const { enabledTrackAndTrace } = useCustomerAccountFeatures();\r\n const { accountId } = useAccounts();\r\n\r\n useEffect(() => {\r\n setShipmentTrackingId(undefined);\r\n }, [accountId]);\r\n\r\n useEffect(() => {\r\n let isCancelled = false;\r\n\r\n if (accountId && shipmentTrackingId) {\r\n setIsLoading(true);\r\n apiService\r\n .getShipmentTrackingById(accountId, shipmentTrackingId)\r\n .then((result) => {\r\n if (!isCancelled) {\r\n setShipmentTrackingModel(result.data);\r\n }\r\n setIsLoading(false);\r\n })\r\n .catch(catchApiError);\r\n } else {\r\n setShipmentTrackingModel(undefined);\r\n }\r\n\r\n return () => {\r\n isCancelled = true;\r\n };\r\n }, [accountId, shipmentTrackingId]);\r\n\r\n const handleSelectedShipmentTrackingId = (shipmentTrackingId) => {\r\n setShipmentTrackingId(shipmentTrackingId);\r\n };\r\n\r\n return (\r\n {noChartDataText}
\r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {TitleLinkUrl ? (\r\n \r\n
\r\n {Title}
\r\n \r\n ) : (\r\n{Title}
\r\n )}\r\n {totalAmountText}\r\n| {date.formatDate(\"${dateFormatTooltip}\")}: | \r\n${mainValuePropertyName} {valueChange} ({valueChangePercentage}%)\r\n | \r\n
|---|---|
| {compareDate.formatDate(\"${dateFormatTooltip}\")}: | \r\n${compareValuePropertyName} | \r\n
| {date.formatDate(\"${dateFormatTooltip}\")}: | \r\n${mainValuePropertyName} {valueChange} ({valueChangePercentage}%)\r\n | \r\n
|---|
{noChartDataText}
\r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {TitleLinkUrl ? (\r\n \r\n
\r\n {Title}
\r\n \r\n ) : (\r\n{Title}
\r\n )}\r\n {subTitle && subTitle.label && (\r\n <>\r\n \r\n {subTitle.label} {TooltipValueFormat ? format(TooltipValueFormat, subTitle.valueText) : subTitle.valueText}\r\n \r\n \r\n {subTitle.valueChange} ({subTitle.valueChangePercentage}%)\r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {!filterComponentData ||\r\n !filterComponentData.comparePeriodFilter ||\r\n (!filterComponentData.comparePeriodFilter.enabledCompare && (\r\n
\r\n );\r\n}\r\n\r\nexport default TabsContainer;\r\n","import * as am4core from '@amcharts/amcharts4/core';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\nimport am4themes_material from '@amcharts/amcharts4/themes/material';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport LoadingBar from 'react-top-loading-bar';\r\n\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Container from '@material-ui/core/Container';\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\n\r\nimport GridContainer from 'src/components/Grid/GridContainer.js';\r\nimport GridItem from 'src/components/Grid/GridItem';\r\nimport useCustomerAccountFeatures from 'src/hooks/useCustomerAccountFeatures.js';\r\nimport apiService from 'src/services/api.service';\r\nimport PDFModule from 'src/services/pdf.service';\r\nimport { darkTheme } from 'src/themes/darkTheme';\r\nimport { lightThemeAdmin } from 'src/themes/lightTheme';\r\n\r\nimport ApplicationMenus from '../layouts/ApplicationMenus';\r\nimport TopRedBar from '../layouts/TopRedBar';\r\nimport FeatureDisabledMessage from '../parts/FeatureDisabledMessage';\r\nimport TrendsFilters from './Trends/FilterControls/TrendsFilters';\r\nimport TabsContainer from './Trends/TabsContainer';\r\n\r\nam4core.useTheme(am4themes_material);\r\nam4core.addLicense('255064348');\r\nam4core.useTheme(am4themes_animated);\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n },\r\n content: {\r\n flexGrow: 1,\r\n height: '100vh',\r\n overflowY: 'auto',\r\n backgroundColor: (props) => props.adminTheme.palette.trendsOverTime.mainBackgroundColor,\r\n },\r\n container: {\r\n paddingBottom: theme.spacing(4),\r\n maxWidth: '1600px',\r\n },\r\n pdfButton: {\r\n marginTop: '10px',\r\n },\r\n backdrop: {\r\n zIndex: theme.zIndex.drawer + 1,\r\n },\r\n}));\r\n\r\nfunction Trends(props) {\r\n let theme = parseInt(localStorage.getItem('theme')) === 1 ? lightThemeAdmin : darkTheme;\r\n const themeProps = { adminTheme: theme };\r\n const classes = useStyles(themeProps);\r\n const progressRef = useRef(null);\r\n const [filterComponentData, setFilterComponentData] = useState(true);\r\n const [openBackdrop, setOpenBackdrop] = React.useState(false);\r\n const [baseQueryString, setBaseQueryString] = React.useState();\r\n const [accountId, setAccountId] = useState();\r\n const [trendOverTimeSettings, setTrendOverTimeSettings] = useState();\r\n const { enabledTrendsOverTime } = useCustomerAccountFeatures();\r\n\r\n const generatePdf = () => {\r\n setOpenBackdrop(true);\r\n am4core.unuseTheme(am4themes_animated);\r\n const element = document.querySelector('#dashboardPrint');\r\n const options = {\r\n filename: 'Trends-' + new Date().toDateString() + '.pdf',\r\n excludeClassNames: ['exclude'],\r\n company: filterComponentData.companyName,\r\n period: filterComponentData.periodName,\r\n suppliers: filterComponentData.suppliers ? filterComponentData.supplierName : 'ALL',\r\n };\r\n\r\n return PDFModule(element, options, () => {\r\n am4core.useTheme(am4themes_animated);\r\n setOpenBackdrop(false);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (filterComponentData && filterComponentData.accountId) {\r\n setAccountId(filterComponentData.accountId);\r\n }\r\n }, [filterComponentData]);\r\n\r\n useEffect(() => {\r\n const loadSettings = async () => {\r\n let result = await apiService.getTrendOverTimeSettings(accountId);\r\n setTrendOverTimeSettings(result.data);\r\n };\r\n\r\n setTrendOverTimeSettings(undefined);\r\n if (accountId) {\r\n loadSettings();\r\n }\r\n }, [accountId]);\r\n\r\n return (\r\n <>\r\n \r\n {\r\n setShowTrendLine(!showTrendLine);\r\n }}\r\n control={ {\r\n setShowAvgLine(!showAvgLine);\r\n }}\r\n control={
\r\n ))}\r\n \r\n \r\n \r\n {enabledTrendsOverTime ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {snackbarError}\r\n \r\n \r\n \r\n \r\n Your profile was updated!\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default UserProfileMain;\r\n","import React, { useState, useContext, useRef } from 'react';\r\nimport { Grid, Divider, TextField, Card, CardContent, CardActions, Snackbar } from '@material-ui/core';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport LoadingBar from 'react-top-loading-bar';\r\nimport { useHistory } from 'react-router';\r\nimport apiService from '../../../services/api.service';\r\nimport { UserContext } from '../../../contexts/UserContext';\r\nimport clsx from 'clsx';\r\nimport Button from '../../../wrappers/Button';\r\nimport Alert from '../../../wrappers/Alert';\r\nimport { darkTheme } from '../../../themes/darkTheme';\r\nimport { lightThemeAdmin } from '../../../themes/lightTheme';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n buttonRight: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n buttons: {\r\n marginTop: theme.spacing(2),\r\n },\r\n alert: {\r\n marginTop: '-8px',\r\n marginBottom: theme.spacing(2),\r\n },\r\n card: {\r\n boxShadow: '0px 7px 8px -4px rgb(0 0 0 / 20%), 0px 12px 17px 2px rgb(0 0 0 / 14%), 0px 5px 22px 4px rgb(0 0 0 / 12%)',\r\n padding: theme.spacing(3),\r\n },\r\n cardActions: {\r\n justifyContent: 'flex-end',\r\n },\r\n}));\r\n\r\nfunction ChangePassword(props) {\r\n let theme = parseInt(localStorage.getItem('theme')) === 1 ? lightThemeAdmin : darkTheme;\r\n const [password, setPassword] = useState();\r\n const [oldPassword, setOldPassword] = useState();\r\n const [confirmPassword, setConfirmPassword] = useState();\r\n const [displayPasswordError, setDisplayPasswordError] = useState('');\r\n const [displayConfirmPasswordError, setDisplayConfirmPasswordError] = useState('');\r\n const [displayOldPasswordError, setDisplayOldPasswordError] = useState('');\r\n const history = useHistory();\r\n const progressRef = useRef(null);\r\n const classes = useStyles();\r\n const [snackbar, setSnackbar] = useState({\r\n open: false,\r\n isSuccess: false,\r\n message: '',\r\n });\r\n\r\n const handleSubmit = (event) => {\r\n event.preventDefault();\r\n cleanErrors();\r\n let error = false;\r\n\r\n if (!oldPassword || oldPassword.trim() === '') {\r\n setDisplayOldPasswordError('Old password is a required field');\r\n error = true;\r\n }\r\n\r\n if (!password || password.trim() === '') {\r\n setDisplayPasswordError('Password is a required field');\r\n error = true;\r\n }\r\n if (!confirmPassword || confirmPassword.trim() === '') {\r\n setDisplayConfirmPasswordError('Confirm password is a reuqired field');\r\n error = true;\r\n }\r\n\r\n if (!error) {\r\n if (password.trim() !== confirmPassword.trim()) {\r\n setDisplayConfirmPasswordError('Password and Confirm password does not match');\r\n error = true;\r\n }\r\n }\r\n\r\n if (!error) {\r\n progressRef.current.continuousStart();\r\n apiService\r\n .changePassword(oldPassword, password, confirmPassword)\r\n .then((result) => {\r\n if (result.errors && result.errors.length > 0) {\r\n for (let error of result.errors) {\r\n if (error.propertyName === 'OldPassword') setDisplayOldPasswordError(error.errorMessage);\r\n else if (error.propertyName === 'NewPassword') setDisplayPasswordError(error.errorMessage);\r\n else if (error.propertyName === 'ConfirmPassword') setDisplayConfirmPasswordError(error.errorMessage);\r\n }\r\n } else {\r\n setSnackbar({\r\n open: true,\r\n isSuccess: true,\r\n message: `Your password changed successfully`,\r\n });\r\n }\r\n\r\n progressRef.current.complete();\r\n })\r\n .catch((err) => {\r\n console.log('error: ', err);\r\n if (progressRef && progressRef.current) progressRef.current.complete();\r\n if (err.response && err.response.status === 401) history.push('/login');\r\n });\r\n }\r\n };\r\n\r\n const cleanErrors = () => {\r\n setDisplayOldPasswordError('');\r\n setDisplayPasswordError('');\r\n setDisplayConfirmPasswordError('');\r\n };\r\n\r\n const handleSnackbarClose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n let snackbartemp = { ...snackbar };\r\n snackbartemp.open = false;\r\n setSnackbar(snackbartemp);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {snackbarError}\r\n \r\n \r\n \r\n \r\n The user was successfully {isEdit() ? 'updated' : 'created'}\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default UserEntry;\r\n","import moment from 'moment';\r\nimport React, { useContext, useEffect } from 'react';\r\nimport { useHistory } from 'react-router';\r\n\r\nimport DeleteDialog from 'src/components/parts/DeleteDialog';\r\nimport EntityTable from 'src/components/parts/EntityTable';\r\nimport { ReloadContext } from 'src/contexts/ReloadContext';\r\nimport { UserContext } from 'src/contexts/UserContext';\r\nimport useCatchAPIError from 'src/hooks/useCatchAPIError';\r\nimport useGlobalLoadingBar from 'src/hooks/useGlobalLoadingBar';\r\nimport useGlobalSnackBar from 'src/hooks/useGlobalSnackBar';\r\nimport apiService from 'src/services/api.service';\r\nimport formErrorFactory from 'src/services/formError.factory';\r\n\r\nconst headCells = [\r\n {\r\n id: 'AccountNames',\r\n numeric: false,\r\n disablePadding: true,\r\n label: 'Account',\r\n },\r\n {\r\n id: 'AccountTypeNames',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Type',\r\n },\r\n {\r\n id: 'UserTypeName',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Role',\r\n },\r\n {\r\n id: 'Firstname',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'First Name',\r\n },\r\n {\r\n id: 'Lastname',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Last Name',\r\n },\r\n { id: 'Email', numeric: false, disablePadding: false, label: 'Email' },\r\n {\r\n id: 'AvatarExtension',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Avatar',\r\n },\r\n];\r\n\r\nfunction Users(props) {\r\n const [order, setOrder] = React.useState('asc');\r\n const [orderBy, setOrderBy] = React.useState('');\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\r\n const [rows, setRows] = React.useState('');\r\n const [freeTextSearch, setFreeTextSearch] = React.useState('');\r\n const [totalNumberOfRows, setTotalNumberOfRows] = React.useState(0);\r\n const [pendingDeleteAction, setPendingDeleteAction] = React.useState({\r\n show: false,\r\n id: '0',\r\n });\r\n const [dummyCounter, setDummyCounter] = React.useState(0);\r\n const [reloadContext] = useContext(ReloadContext);\r\n const [userContext, setUserContext] = useContext(UserContext);\r\n const history = useHistory();\r\n\r\n const { startProgress, stopProgress } = useGlobalLoadingBar();\r\n const { showSuccessSnackBar, showErrorSnackBar } = useGlobalSnackBar();\r\n const { catchApiError } = useCatchAPIError();\r\n\r\n useEffect(() => {\r\n startProgress();\r\n apiService\r\n .getUsers(page + 1, rowsPerPage, order, orderBy, freeTextSearch)\r\n .then((result) => {\r\n stopProgress();\r\n setRows(createTableListData(result.data.list));\r\n setTotalNumberOfRows(result.data.totalItems);\r\n })\r\n .catch(catchApiError);\r\n }, [history, order, orderBy, rowsPerPage, page, dummyCounter, reloadContext, freeTextSearch]);\r\n\r\n const createTableListData = (items) => {\r\n let newArray = [];\r\n items.map((item) => {\r\n newArray.push([\r\n item.appId,\r\n item.accountNames,\r\n item.accountTypeNames,\r\n item.userTypeName,\r\n item.firstname,\r\n item.lastname,\r\n item.username,\r\n {\r\n avatar: item.avatarExtension\r\n ? `\\\\dynamic\\\\user\\\\images\\\\` + item.appId + '.' + item.avatarExtension + '?v=' + moment().format('YYYMMDDss')\r\n : '\\\\dynamic\\\\user\\\\images\\\\' + item.appId,\r\n },\r\n ]);\r\n });\r\n return newArray;\r\n };\r\n\r\n const handleDeleteRequest = (event) => {\r\n if (userContext.isAdmin && userContext.permissions.canManageUsers) {\r\n setPendingDeleteAction({ show: true, id: event.currentTarget.dataset.tag });\r\n } else {\r\n showErrorSnackBar(\"you don't have permission to delete users\");\r\n }\r\n };\r\n\r\n const handleDelete = (id) => {\r\n apiService\r\n .deleteUser(id)\r\n .then((result) => {\r\n if (result.errors && result.errors.length > 0) {\r\n var errorString = formErrorFactory.createErrorText(result.errors);\r\n showErrorSnackBar(errorString);\r\n } else {\r\n setDummyCounter(dummyCounter + 1);\r\n showSuccessSnackBar('User was deleted successfully');\r\n }\r\n })\r\n .catch(catchApiError);\r\n };\r\n\r\n const handleAdd = () => {\r\n if (userContext.isAdmin && userContext.permissions.canManageUsers) {\r\n history.push('/users/add');\r\n } else {\r\n showErrorSnackBar(\"you don't have permission to add users\");\r\n }\r\n };\r\n\r\n const handleEdit = (event) => {\r\n if (userContext.isAdmin && userContext.permissions.canManageUsers) {\r\n history.push('/users/' + event.currentTarget.dataset.tag + '/edit');\r\n } else {\r\n showErrorSnackBar(\"you don't have permission to modify users\");\r\n }\r\n };\r\n\r\n const handleRequestSort = (sortOrder, property) => {\r\n setOrder(sortOrder);\r\n setOrderBy(property);\r\n };\r\n\r\n const handleChangePage = (newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (newValue) => {\r\n setRowsPerPage(newValue);\r\n setPage(0);\r\n };\r\n\r\n const handleFilterChanged = (filter) => {\r\n setFreeTextSearch(filter.freeText);\r\n };\r\n\r\n return (\r\n <>\r\n {rows && (\r\n \r\n \r\n {title}\r\n \r\n {caption && {caption}}\r\n
\r\n );\r\n};\r\n","import moment from 'moment';\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nimport { Box, makeStyles } from '@material-ui/core';\r\n\r\nimport { StatusBox } from './components/StatusBox';\r\nimport useShipmentBookingEntry from './hooks/useShipmentBookingEntry';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n slashBox: {\r\n margin: '0 16px',\r\n marginTop: 3,\r\n },\r\n slash: {\r\n boxSizing: 'border-box',\r\n position: 'relative',\r\n display: 'block',\r\n transform: 'rotate(15deg) scale(var(--ggs,1))',\r\n width: 3,\r\n height: 48,\r\n background: 'currentColor',\r\n borderRadius: 3,\r\n },\r\n}));\r\n\r\nexport const StatesSection = (props) => {\r\n const [statusBoxes, setStatusBoxes] = useState();\r\n\r\n const { states } = useShipmentBookingEntry();\r\n\r\n useEffect(() => {\r\n if (states) {\r\n let viewModels = states.map((x) => {\r\n let caption = null;\r\n if (x.date) {\r\n var momentDate = moment(x.date);\r\n caption = momentDate.isValid() ? `date: ${momentDate.format('l')}` : null;\r\n }\r\n\r\n return { title: x.status, caption: caption };\r\n });\r\n\r\n setStatusBoxes(viewModels);\r\n } else {\r\n setStatusBoxes(null);\r\n }\r\n }, [states]);\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {statusBoxes &&\r\n statusBoxes.map((x, index) => {\r\n let hasNext = statusBoxes.length - 1 > index;\r\n return (\r\n <>\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n};\r\n","import clsx from 'clsx';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\nimport { useHistory, useParams } from 'react-router';\r\n\r\nimport { Box, Divider, Grid, makeStyles } from '@material-ui/core';\r\nimport DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';\r\nimport SaveAltOutlinedIcon from '@material-ui/icons/SaveAltOutlined';\r\n\r\nimport ConfirmDialog from 'src/components/parts/ConfirmDialog';\r\nimport DeleteDialog from 'src/components/parts/DeleteDialog';\r\nimport LoadingOverlay from 'src/components/parts/LoadingOverlay';\r\nimport useAccounts from 'src/hooks/useAccounts';\r\nimport useQuery from 'src/hooks/useQuery';\r\nimport shipmentBookingStatus from 'src/models/ShipmentBookingStatus';\r\nimport MyButton from 'src/wrappers/Button';\r\n\r\nimport { AddressSelection } from './AddressSelection';\r\nimport { AttachedOrdersSection } from './AttachedOrdersSection/AttachedOrdersSection';\r\nimport { ImportantNoticeSection } from './ImportantNoticeSection';\r\nimport { ShippingDetailsEntrySection } from './ShippingDetailsEntrySection';\r\nimport { StatesSection } from './StatesSection';\r\nimport useShipmentBookingEntry from './hooks/useShipmentBookingEntry';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n divider: {\r\n width: '100%',\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(2),\r\n },\r\n buttonsBox: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n buttonRight: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n buttons: {\r\n marginTop: theme.spacing(2),\r\n },\r\n headerBox: {\r\n height: '100%',\r\n display: 'flex',\r\n },\r\n headerButton: {\r\n alignSelf: 'baseline',\r\n marginLeft: theme.spacing(2),\r\n },\r\n}));\r\n\r\nexport default function ShipmentBookingEntry(props) {\r\n const classes = useStyles();\r\n const history = useHistory();\r\n const [confirmDialogAction, setConfirmDialogAction] = useState({});\r\n const [discardDialogAction, setDiscardDialogAction] = useState({});\r\n\r\n let { id } = useParams();\r\n const query = useQuery();\r\n const { accountId } = useAccounts();\r\n const {\r\n messages,\r\n shipperSelectionItems,\r\n receiverSelectionItems,\r\n shipper,\r\n receiver,\r\n initialized,\r\n readOnly,\r\n bookingNumber,\r\n isSubmitting,\r\n states,\r\n setShipper,\r\n setReceiver,\r\n initialize,\r\n saveDraft,\r\n loadExistingData,\r\n submit,\r\n changeFormToEditMode,\r\n discardDraft,\r\n addPurchaseOrder,\r\n } = useShipmentBookingEntry();\r\n\r\n useEffect(() => {\r\n if (accountId) {\r\n console.log('ShipmentBookingEntry initialize', accountId, 'shipment booking id', id);\r\n initialize(accountId, id);\r\n }\r\n }, [accountId]);\r\n\r\n useEffect(() => {\r\n if (initialized) {\r\n if (id) {\r\n console.log('ShipmentBookingEntry loadExistingData', accountId, 'shipment booking id', id);\r\n loadExistingData(accountId, id);\r\n } else {\r\n let orderNumber = query.get('orderNumber');\r\n if (orderNumber) {\r\n addPurchaseOrder(orderNumber);\r\n }\r\n }\r\n }\r\n }, [initialized]);\r\n\r\n const getTitle = useMemo(() => {\r\n if (readOnly) {\r\n return `Booking Number: ${bookingNumber}`;\r\n } else {\r\n if (id) {\r\n if (bookingNumber) {\r\n return `Update Shipment Booking (${bookingNumber})`;\r\n } else {\r\n return 'Update Shipment Booking';\r\n }\r\n } else {\r\n return 'Create new Shipment Booking';\r\n }\r\n }\r\n }, [id, readOnly, bookingNumber]);\r\n\r\n const canDiscardDraft = useMemo(() => {\r\n if (states) {\r\n let hasDraft = states.findIndex((x) => x.status == shipmentBookingStatus.draft) > -1;\r\n let hasOtherStatus = states.findIndex((x) => x.status != shipmentBookingStatus.draft) > -1;\r\n\r\n return hasDraft && hasOtherStatus;\r\n }\r\n return false;\r\n }, [states]);\r\n\r\n const handleSubmitRequest = (event) => {\r\n setConfirmDialogAction({ show: true, referenceId: '' });\r\n };\r\n const handleDiscardRequest = (event) => {\r\n setDiscardDialogAction({ show: true, referenceId: '' });\r\n };\r\n\r\n return (\r\n <>\r\n {getTitle}
\r\n {readOnly && (\r\n\r\n \r\n \r\n \r\n \r\n ),\r\n }}\r\n onChange={this.onInputChange}\r\n />\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles, { name: \"DateRangePicker\" })(DateRangePicker);\r\n\r\nDateRangePicker.propTypes = {\r\n onChange: PropTypes.func,\r\n title: PropTypes.string,\r\n};\r\n","import clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\n\r\nimport { FormControl, Grid, InputLabel, MenuItem, Select, makeStyles } from '@material-ui/core';\r\n\r\nimport DateRangePicker from 'src/components/DateRangePicker';\r\nimport TitleFont from 'src/components/Typography/TitleFont';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n },\r\n formControl: {\r\n width: '100%',\r\n marginRight: theme.spacing(2),\r\n },\r\n select: {\r\n fontFamily: theme.font.menu,\r\n },\r\n}));\r\n\r\nconst DateFilterControl = (props) => {\r\n const { id, title, onChange } = props;\r\n const classes = useStyles();\r\n let labelId = id + '-label';\r\n\r\n const [dateFilter, setDateFilter] = useState({\r\n startDate: null,\r\n endDate: null,\r\n dateFilterOption: 0, //All: 0,Blank: 1, NotBlank: 2, Range: 3\r\n });\r\n\r\n const previousUpdated = useRef();\r\n const [updated, setUpdated] = useState();\r\n\r\n useEffect(() => {\r\n if (previousUpdated.current !== updated) {\r\n previousUpdated.current = updated;\r\n onChange && onChange(dateFilter);\r\n }\r\n }, [onChange, dateFilter, updated]);\r\n\r\n const handleOnDateRangeChanged = ({ fromDate, toDate }) => {\r\n console.log('handleOnDateRangeChanged');\r\n setDateFilter({\r\n ...dateFilter,\r\n startDate: fromDate,\r\n endDate: toDate,\r\n });\r\n if (fromDate && toDate) {\r\n setUpdated(new Date());\r\n }\r\n };\r\n\r\n const handleOnDateFilterOptionChanged = (event) => {\r\n const dateFilterOption = event.target.value;\r\n console.log('handleOnDateFilterOptionChanged', dateFilterOption);\r\n setDateFilter({\r\n dateFilterOption: dateFilterOption,\r\n startDate: null,\r\n endDate: null,\r\n });\r\n\r\n if (dateFilterOption !== 3) {\r\n setUpdated(new Date());\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n setFilterInputs((f) => ({\r\n ...f,\r\n freeTextSearch: text,\r\n }));\r\n }}\r\n onDelayValueChange={(text) => {\r\n handleOnFilterValueChanged('freeTextSearch', text);\r\n }}\r\n />\r\n \r\n \r\n \r\n {\r\n handleOnFilterValueChanged('eta', dateFilter);\r\n }}\r\n />\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SiteDeliveredContainersTableFilter;\r\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\r\nimport { CSVLink } from 'react-csv';\r\nimport { withRouter } from 'react-router';\r\n\r\nimport { Backdrop, CircularProgress, Divider } from '@material-ui/core';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport EntityListFrame from 'src/components/layouts/EntityListFrame';\r\nimport ColumnSelector from 'src/components/parts/ColumnSelector';\r\nimport DataContentTable from 'src/components/parts/DataContentTable';\r\nimport FeatureDisabledMessage from 'src/components/parts/FeatureDisabledMessage';\r\nimport useAccounts from 'src/hooks/useAccounts';\r\nimport useCatchAPIError from 'src/hooks/useCatchAPIError';\r\nimport useCustomerAccountFeatures from 'src/hooks/useCustomerAccountFeatures';\r\nimport useGlobalLoadingBar from 'src/hooks/useGlobalLoadingBar';\r\nimport apiService from 'src/services/api.service';\r\nimport csvTableService from 'src/services/csv.table.service';\r\nimport pdfTableService from 'src/services/pdf.table.service';\r\nimport tableService from 'src/services/table.service';\r\nimport ExportMenu from 'src/wrappers/ExportMenu';\r\n\r\nimport SiteDeliveredContainersTableFilter from './SiteDeliveredContainersTableFilter';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n titleArea: {\r\n marginBottom: '28px',\r\n paddingLeft: theme.spacing(1.5),\r\n paddingRight: theme.spacing(1.5),\r\n },\r\n ExportMenuContainer: {\r\n flexGrow: 0,\r\n },\r\n}));\r\n\r\nconst defaultHeadCells = [\r\n {\r\n id: 'Address',\r\n numeric: false,\r\n disablePadding: true,\r\n label: 'Address',\r\n },\r\n {\r\n id: 'City',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'City',\r\n },\r\n {\r\n id: 'State',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'State',\r\n },\r\n {\r\n id: 'CountryName',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Country',\r\n },\r\n {\r\n id: 'Postcode',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Postcode',\r\n },\r\n {\r\n id: 'ContainerType',\r\n numeric: false,\r\n disablePadding: false,\r\n label: 'Container Type',\r\n },\r\n {\r\n id: 'Total',\r\n numeric: true,\r\n disablePadding: false,\r\n label: 'Total',\r\n },\r\n];\r\n\r\nfunction SiteDeliveredContainersTable(props) {\r\n const classes = useStyles();\r\n const { accountId } = useAccounts();\r\n const [order, setOrder] = useState('asc');\r\n const [orderBy, setOrderBy] = useState('Address');\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n const [rows, setRows] = useState('');\r\n const [filter, setFilter] = useState({});\r\n const [totalNumberOfRows, setTotalNumberOfRows] = useState(0);\r\n const [downloadCsv, setDownloadCsv] = useState({ headers: [], data: [], filename: '' });\r\n const csvLinkEl = useRef();\r\n const [headCells, setHeadCells] = useState(defaultHeadCells);\r\n const [newHeadCells, setNewHeadCells] = useState([]);\r\n const [hiddenColumnNames, setHiddenColumnNames] = useState();\r\n const { enabledSiteDeliveredContainersFeature } = useCustomerAccountFeatures();\r\n const { catchApiError } = useCatchAPIError();\r\n const { startProgress, stopProgress } = useGlobalLoadingBar();\r\n const [destinations, setDestinations] = useState([]);\r\n\r\n const previousReload = useRef();\r\n const [reload, setReload] = useState(new Date());\r\n\r\n const [openBackdrop, setOpenBackdrop] = useState(false);\r\n\r\n const createReportFilter = useCallback(() => {\r\n if (accountId) {\r\n const reportFilter = {\r\n ...filter,\r\n accountId: accountId,\r\n skip: page * rowsPerPage,\r\n take: rowsPerPage,\r\n sortColumn: orderBy,\r\n sortDirection: order,\r\n };\r\n\r\n return reportFilter;\r\n } else {\r\n return undefined;\r\n }\r\n }, [filter, order, orderBy, page, rowsPerPage, accountId]);\r\n\r\n const createTableListData = useCallback((items) => {\r\n let newArray = [];\r\n\r\n if (items) {\r\n items.forEach((item, index) => {\r\n const rowData = {\r\n id: index,\r\n Address: item.address,\r\n City: item.city,\r\n State: item.state,\r\n CountryName: item.countryName,\r\n Postcode: item.postcode,\r\n ContainerType: item.containerType,\r\n Total: item.total,\r\n };\r\n\r\n newArray.push(rowData);\r\n });\r\n }\r\n\r\n return newArray;\r\n }, []);\r\n\r\n const handleOnFilterChange = useCallback((data) => {\r\n console.log('handleOnFilterChange');\r\n setPage(0);\r\n setFilter((f) => ({ ...f, ...data }));\r\n setReload(new Date());\r\n }, []);\r\n\r\n const handleRequestSort = useCallback((sortOrder, property) => {\r\n console.log('handleRequestSort');\r\n setOrder(sortOrder);\r\n setOrderBy(property);\r\n setReload(new Date());\r\n }, []);\r\n\r\n const handleChangePage = useCallback((newPage) => {\r\n console.log('handleChangePage');\r\n setPage(newPage);\r\n setReload(new Date());\r\n }, []);\r\n\r\n const handleChangeRowsPerPage = useCallback((newValue) => {\r\n console.log('handleChangeRowsPerPage');\r\n setPage(0);\r\n setRowsPerPage(newValue);\r\n setReload(new Date());\r\n }, []);\r\n\r\n const generatePdf = useCallback(() => {\r\n if (totalNumberOfRows > 0) {\r\n const reportFilter = createReportFilter();\r\n const filterForPdf = {\r\n ...reportFilter,\r\n skip: 0,\r\n take: totalNumberOfRows,\r\n };\r\n apiService\r\n .getSiteDeliveredContainersTableReport(filterForPdf)\r\n .then((result) => {\r\n stopProgress();\r\n pdfTableService.generateSiteDeliveredContainersPDF(\r\n result.data.items,\r\n 'Site Delivered Containers',\r\n 'Site-Delivered-Containers-Report',\r\n result.data.hiddenColumnNames\r\n );\r\n })\r\n .catch(catchApiError);\r\n }\r\n }, [catchApiError, createReportFilter, stopProgress, totalNumberOfRows]);\r\n\r\n const generateCSV = useCallback(() => {\r\n if (totalNumberOfRows > 0) {\r\n const reportFilter = createReportFilter();\r\n const filterForCsv = {\r\n ...reportFilter,\r\n skip: 0,\r\n take: totalNumberOfRows,\r\n };\r\n apiService\r\n .getSiteDeliveredContainersTableReport(filterForCsv)\r\n .then((result) => {\r\n stopProgress();\r\n var csvData = csvTableService.generateSiteDeliveredContainersCsvData(result.data.items, '', result.data.hiddenColumnNames);\r\n setDownloadCsv(csvData);\r\n csvLinkEl.current.link.click();\r\n })\r\n .catch(catchApiError);\r\n }\r\n }, [catchApiError, createReportFilter, stopProgress, totalNumberOfRows]);\r\n\r\n const handleColumnSelected = useCallback((headCells) => {\r\n setNewHeadCells(headCells);\r\n }, []);\r\n\r\n const handleBackdropClose = useCallback(() => {\r\n setOpenBackdrop(false);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const getData = (reportFilter) => {\r\n apiService\r\n .getSiteDeliveredContainersTableReport(reportFilter)\r\n .then((result) => {\r\n let contentRows = createTableListData(result.data.items);\r\n let filteredTable = tableService.filterHiddenTableColumns(defaultHeadCells, contentRows, result.data.hiddenColumnNames);\r\n setHeadCells(filteredTable.headCells);\r\n setRows(filteredTable.contentRows);\r\n setTotalNumberOfRows(result.data.count);\r\n setHiddenColumnNames(result.data.hiddenColumnNames);\r\n setDestinations(result.data.destinations);\r\n stopProgress();\r\n handleBackdropClose();\r\n })\r\n .catch(catchApiError);\r\n };\r\n\r\n const reportFilter = createReportFilter();\r\n if (reportFilter && previousReload.current !== reload) {\r\n console.log('getData')\r\n previousReload.current = reload;\r\n startProgress();\r\n getData(reportFilter);\r\n }\r\n }, [reload, createReportFilter, startProgress, catchApiError, createTableListData, stopProgress, handleBackdropClose]);\r\n\r\n return (\r\n <>\r\n Site Delivered Containers
\r\n{routes}
}\r\n \r\n \r\n \r\n Please check your email for further instructions\r\n \r\n \r\n \r\n ![\"email-sent\"](\"/images/email-sent.png\")
\r\n \r\n \r\n \r\n {\r\n e.preventDefault();\r\n history.push(\"/login\");\r\n }}\r\n variant=\"contained\"\r\n >\r\n Back to login page\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n };\r\n\r\n const ForgotPassform = (props) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n };\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useRef } from \"react\";\r\nimport { Grid, TextField } from \"@material-ui/core\";\r\nimport Button from '../../wrappers/Button';\r\nimport { useHistory } from \"react-router\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Container from \"@material-ui/core/Container\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport queryString from \"query-string\";\r\nimport apiService from \"../../services/api.service\";\r\nimport Collapse from \"@material-ui/core/Collapse\";\r\nimport Alert from \"@material-ui/lab/Alert\";\r\n\r\nexport default function ResetPassword({ match, location }) {\r\n const [password1, setPassword1] = useState(\"\");\r\n const [password2, setPassword2] = useState(\"\");\r\n const [successAlertOpen, setSuccessAlertOpen] = useState(true);\r\n const [errorAlertOpen, setErrorAlertOpen] = useState(true);\r\n const [alertErrorMessage, setAlertErrorMessage] = useState(true);\r\n const [actionResult, setActionResult] = useState(\"\");\r\n const [displayError, setDisplayError] = useState(false);\r\n const inputRef = useRef();\r\n const history = useHistory();\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n root: {\r\n // padding: theme.spacing(3, 2),\r\n height: \"90vh\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"center\",\r\n height: \"100vh\",\r\n minHeight: \"100%\" ,\r\n clear: \"both\" ,\r\n padding: \"0 0 310px 0\"\r\n },\r\n alert: {\r\n margin: theme.spacing(1),\r\n },\r\n title: {\r\n fontStyle: \"italic\",\r\n },\r\n buttons: {\r\n margin: theme.spacing(1),\r\n \r\n },\r\n mystyle :{\r\n background : \"#e1214c\"\r\n },\r\n propertyform : {\r\n background:\"rgb(255, 255, 255)\",\r\n padding: \"30px 0 20px 65px\",\r\n position: \"fixed\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\" ,\r\n width: \"600px\",\r\n maxWidth:\"650px\" \r\n },\r\n forminner:{\r\n margin:\"0 0 0 -45px\" ,\r\n padding :\"0 0 0 32px\"\r\n }\r\n }));\r\n\r\n const classes = useStyles();\r\n const parsedqs = queryString.parse(location.search);\r\n\r\n const handleSubmit = (event) => {\r\n event.preventDefault();\r\n if ((password1.length < 1 && password2.length < 1) || password1 !== password2) {\r\n setDisplayError(true);\r\n }\r\n else {\r\n setDisplayError(false);\r\n\r\n apiService.resetPassword(password1, parsedqs.email, parsedqs.code).then((result) => {\r\n console.log(\"success:\", result);\r\n setSuccessAlertOpen(true);\r\n setActionResult(\"success\");\r\n setTimeout(() => {\r\n history.push(\"/login\");\r\n }, 3000)\r\n })\r\n .catch((errors) => {\r\n setErrorAlertOpen(true);\r\n setActionResult(\"failed\");\r\n setAlertErrorMessage(errors.response.data.errors.map(x => x.errorMessage).toString());\r\n\r\n });\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {sentStatus ? \r\n
\r\n \r\n
\r\n );\r\n}\r\n","// confirmemail\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Container from \"@material-ui/core/Container\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Alert from \"@material-ui/lab/Alert\";\r\nimport queryString from \"query-string\";\r\nimport apiService from \"../../services/api.service\";\r\nimport { useHistory } from 'react-router'\r\n\r\nexport default function ConfirmEmail({ match, location }) {\r\n const [confirmResult, setConfirmResult] = useState(false);\r\n const parsedqs = queryString.parse(location.search);\r\n const history = useHistory();\r\n\r\n useEffect(() => {\r\n apiService.confirmEmail(parsedqs.email, parsedqs.code).then(() => {\r\n setConfirmResult(true);\r\n }).catch((error) => {\r\n setConfirmResult(false);\r\n })\r\n },[parsedqs.email, parsedqs.code])\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n },\r\n alert: {\r\n margin: theme.spacing(1),\r\n },\r\n }));\r\n\r\n const handleClick = (event) =>\r\n {\r\n history.push(\"/login\");\r\n }\r\n\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {confirmResult ? (\r\n \r\n Login\r\n }\r\n >\r\n Your email is confirm, go to the login page and login.\r\n \r\n ) : (\r\n \r\n The email confirmation failed, please contact support\r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Redirect, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom';\r\n\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport EntityListFrame from 'src/components/layouts/EntityListFrame';\r\nimport { ProtectedRoute } from 'src/protected.route';\r\n\r\nimport SetUserPassword from './SetPassword';\r\nimport UserEntry from './UserEntry';\r\nimport Users from './Users';\r\n\r\nexport function UsersContainer(props) {\r\n let match = useRouteMatch();\r\n let location = useLocation();\r\n const history = useHistory();\r\n const [showFrameAsPaper, setShowFrameAsPaper] = useState(false);\r\n\r\n useEffect(() => {\r\n if (location.pathname === '/users/add' || location.pathname.indexOf('edit') > -1 || location.pathname.indexOf('set-password') > -1) {\r\n setShowFrameAsPaper(false);\r\n } else {\r\n setShowFrameAsPaper(true);\r\n }\r\n }, [location]);\r\n\r\n return (\r\n <>\r\n