{buildLeftPane()}
\r\n \r\n {buildRightPane()}\r\n {\r\n onClose();\r\n setSelectedItem(null);\r\n }}\r\n >\r\n
\r\n \r\n\r\n {buildAddNewItemDialog()}\r\n {buildConfirmDeleteDialog()}\r\n {buildErrorDialog()}\r\n \r\n );\r\n}\r\n\r\nDocuments.propTypes = {\r\n open: PropTypes.bool.isRequired,\r\n companyId: PropTypes.string.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onSelect: PropTypes.func,\r\n pickOnly: PropTypes.bool,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CircularProgress, Backdrop, makeStyles } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n backdrop: {\r\n zIndex: 10,\r\n },\r\n}));\r\n\r\nexport function LoadingOverlay(props) {\r\n const classes = useStyles();\r\n return (\r\n - {drawerOptions}
{Notifications.map((e, i) => buildNotification(e, i))}
;\r\n }\r\n\r\n function buildNotification(notif, index) {\r\n const isLastIndex = index === Notifications.length - 1;\r\n const { title, message, created } = notif;\r\n return (\r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n {message}\r\n \r\n \r\n {moment.utc(created).local().format('D MMMM YYYY')}\r\n \r\n \r\n {!isLastIndex ?
\r\n );\r\n }\r\n\r\n return (\r\n \r\n {\r\n setShowFeedbackScreen(false);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n setRedirectUrl('/')} className={classes.desktopButton}>\r\n \r\n \r\n \r\n setRedirectUrl('/Fleet')} className={classes.desktopButton}>\r\n \r\n \r\n \r\n setRedirectUrl('/Users')} className={classes.desktopButton}>\r\n \r\n \r\n {role.includes(Role.Admin) ? (\r\n <>\r\n \r\n setRedirectUrl('/Company')} className={classes.desktopButton}>\r\n \r\n \r\n \r\n setRedirectUrl('/Compliance')} className={classes.desktopButton}>\r\n \r\n \r\n \r\n ) : null}\r\n {role.includes(Role.Admin) || companyRole === CompanyRole.Owner ? (\r\n <>\r\n {' '}\r\n \r\n setShowDocs(true)} className={classes.desktopButton}>\r\n \r\n \r\n \r\n setShowPushNotif(true)} className={classes.desktopButton}>\r\n \r\n \r\n \r\n ) : null}\r\n {role.includes(Role.Admin) ? (\r\n \r\n \r\n \r\n \r\n ) : null}\r\n \r\n \r\n {props.children} \r\n {hasCompany() ? (\r\n <>\r\n setShowDocs(false)} companyId={props.LogIn.companyId} />\r\n {\r\n setShowPushNotif(false);\r\n }}\r\n companyId={props.LogIn.companyId}\r\n />\r\n \r\n ) : null}\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n LogIn: state.Authentication,\r\n Notifications: state.Notifications,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n AddNotif: item => dispatch(AddNotif(item)),\r\n AddNotifs: items => dispatch(AddNotifs(items)),\r\n MarkAsRead: id => dispatch(MarkAsRead(id)),\r\n MarkAllAsRead: () => dispatch(MarkAllAsRead()),\r\n ClearAllNotifs: () => dispatch(ClearAll()),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NavMenu);\r\n\r\nNavMenu.propTypes = {\r\n container: PropTypes.object,\r\n children: PropTypes.any,\r\n LogIn: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n AddNotif: PropTypes.func,\r\n AddNotifs: PropTypes.func,\r\n MarkAsRead: PropTypes.func,\r\n MarkAllAsRead: PropTypes.func,\r\n Notifications: PropTypes.array,\r\n ClearAllNotifs: PropTypes.func,\r\n};\r\n","export const AddNotif = item => ({\r\n type: 'ADD_NOTIF',\r\n item,\r\n});\r\n\r\nexport const AddNotifs = items => ({\r\n type: 'ADD_NOTIFS',\r\n items,\r\n});\r\n\r\nexport const MarkAsRead = id => ({\r\n type: 'MARK_AS_READ',\r\n id,\r\n});\r\n\r\nexport const MarkAllAsRead = () => ({\r\n type: 'MARK_ALL_AS_READ',\r\n});\r\n\r\nexport const ClearAll = () => ({\r\n type: 'CLEAR_ALL_NOTIFS',\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { Button, CardHeader, CardContent, CardActions, Card, Divider } from '@material-ui/core';\r\nimport { connect } from 'react-redux';\r\nimport UserController from '../../controllers/UserController';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n position: 'fixed',\r\n top: 74,\r\n zIndex: 25,\r\n right: 10,\r\n width: 400,\r\n [theme.breakpoints.down('xs')]: {\r\n width: 'calc(100% - 20px)',\r\n top: 66,\r\n },\r\n },\r\n}));\r\n\r\nfunction MOTD(props) {\r\n const [hidden, setHidden] = React.useState(true);\r\n const [message, setMessage] = React.useState('');\r\n const classes = useStyles();\r\n\r\n React.useState(() => {\r\n if (!props.LogIn.isAuthenticated) {\r\n return;\r\n }\r\n UserController.getMOTD().then(response => {\r\n if (response.hasError || isNullOrUndefined(response.data) || response.data.length === 0) {\r\n return;\r\n }\r\n setMessage(response.data);\r\n setHidden(false);\r\n });\r\n }, [props]);\r\n\r\n function markAsSeen() {\r\n setHidden(true);\r\n UserController.seenMOTD();\r\n }\r\n\r\n return !hidden ? (\r\n \r\n {buildNotificationTray()}\r\n {buildProfileOptions()}\r\n
\r\n \r\n \r\n {children} \r\n
\r\n );\r\n}\r\n\r\nAuthLayout.propTypes = {\r\n heroImage: PropTypes.string.isRequired,\r\n children: PropTypes.any,\r\n};\r\n","import React from 'react';\r\nimport SentiniLogo from '../../images/fathom-final.png';\r\nimport BridgeImage from '../../images/bridge.png';\r\nimport PropTypes from 'prop-types';\r\nimport UserController from '../../controllers/UserController';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { makeStyles, TextField, Button, Grid, Container, FormControlLabel, Checkbox, Link, Typography } from '@material-ui/core';\r\nimport { isNullOrUndefined, checkPassword } from '../../helpers/Utils';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { LogIn } from '../../stores/Actions/Authentication';\r\nimport { AuthLayout } from '../../components/Auth/AuthLayout';\r\nimport { CompanyRole, Role, ShipRole, versionNum } from '../../helpers/Constants';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n formRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n logo: {\r\n marginBottom: 32,\r\n maxWidth: 300,\r\n },\r\n checkbox: {\r\n textAlign: 'center',\r\n },\r\n}));\r\n\r\nfunction Login(props) {\r\n const [userName, setUserName] = React.useState('');\r\n const [password, setPassword] = React.useState('');\r\n const [rememberMe, setRememberMe] = React.useState(false);\r\n const [twoFactorTokenRequired, setTwoFactorTokenRequired] = React.useState(false);\r\n const [twoFactorToken, setTwoFactorToken] = React.useState('');\r\n const [passwordResetRequired, setPasswordResetRequired] = React.useState(false);\r\n const [passwordReset, setPasswordReset] = React.useState('');\r\n const [passwordResetConfirmation, setPasswordResetConfirmation] = React.useState(null);\r\n const [passwordRequirements, setPasswordRequirements] = React.useState(null);\r\n const [passwordErrors, setPasswordErrors] = React.useState([]);\r\n const [submitting, setSubmitting] = React.useState(false);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warningText, setWarningText] = React.useState(null);\r\n const classes = useStyles();\r\n\r\n // initialise\r\n React.useEffect(() => {\r\n async function init() {\r\n const pwordReqResponse = await UserController.getPasswordRequirements();\r\n if (!pwordReqResponse.hasError) {\r\n setPasswordRequirements(pwordReqResponse.data);\r\n } else {\r\n setWarningText('Failed to fetch password requirements');\r\n }\r\n }\r\n init();\r\n }, []);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (isNullOrUndefined(redirectUrl)) {\r\n return;\r\n }\r\n props.PushHistory(redirectUrl);\r\n }, [redirectUrl, props]);\r\n\r\n async function handleSubmit(event) {\r\n event.preventDefault();\r\n setSubmitting(true);\r\n setWarningText(null);\r\n\r\n const response = passwordResetRequired\r\n ? await UserController.loginWithPasswordReset(userName, password, rememberMe, twoFactorToken, passwordReset, passwordResetConfirmation)\r\n : await UserController.login(userName, password, rememberMe, twoFactorToken);\r\n if (!response.hasError) {\r\n const { userName, role, companyId, companyRole, shipRoles, id } = response.data;\r\n login(id, userName, role, companyId, companyRole, shipRoles);\r\n } else {\r\n if (response.data?.response?.data === 'TwoFactorRequired') {\r\n setTwoFactorTokenRequired(true);\r\n } else if (response.data?.response?.data === 'PasswordResetRequired') {\r\n setPasswordResetRequired(true);\r\n } else {\r\n setWarningText(response.data);\r\n }\r\n setSubmitting(false);\r\n }\r\n }\r\n\r\n function handleInput(event) {\r\n const { name, value, checked } = event.target;\r\n switch (name) {\r\n case 'userName':\r\n setUserName(value);\r\n break;\r\n case 'password':\r\n setPassword(value);\r\n break;\r\n case 'twoFactorToken':\r\n setTwoFactorToken(value);\r\n break;\r\n case 'newPassword':\r\n setPasswordReset(value);\r\n break;\r\n case 'newPasswordConfirmation':\r\n setPasswordResetConfirmation(value);\r\n break;\r\n case 'rememberMe':\r\n setRememberMe(checked);\r\n break;\r\n default:\r\n return;\r\n }\r\n }\r\n\r\n function login(id, userName, role, companyId, companyRole, shipRoles) {\r\n if (!role.includes(Role.Admin) && companyRole === CompanyRole.CrewMember && !shipRoles.includes(ShipRole.Owner) && !shipRoles.includes(ShipRole.Captain)) {\r\n setRedirectUrl('/Logout?redirect=NoAccess');\r\n } else {\r\n props.LogIn({\r\n id,\r\n userName,\r\n role,\r\n isLoggingIn: false,\r\n isAuthenticated: true,\r\n companyId,\r\n companyRole,\r\n shipRoles,\r\n });\r\n setRedirectUrl('/');\r\n }\r\n }\r\n\r\n async function checkPasswordIsValid() {\r\n setPasswordErrors(checkPassword(passwordRequirements, password));\r\n }\r\n\r\n function buildPasswordErrors() {\r\n if (passwordErrors.length === 0) {\r\n return null;\r\n }\r\n return passwordErrors.map((e, i) => (\r\n \r\n
\r\n Upload a TSV to get started \r\n \r\n
\r\n );\r\n\r\n const userTable =\r\n users.length === 0 ? (\r\n <>\r\n ) : (\r\n \r\n (e.key === 'Enter' ? handleFilterUsers(e) : null)}\r\n onBlur={handleFilterUsers}\r\n name=\"ship\"\r\n fullWidth\r\n />\r\n
\r\n handleFilterUsers()}>\r\n
\r\n \r\n (e.key === 'Enter' ? handleFilterUsers(e) : null)}\r\n onBlur={handleFilterUsers}\r\n name=\"name\"\r\n fullWidth\r\n />\r\n
\r\n handleFilterUsers()}>\r\n
\r\n \r\n e.id === userGroupId)?.name ?? 'Not Set'} />\r\n {ships.map((e, i) => (\r\n
\r\n \r\n }\r\n >\r\n {buildMenuItems(user)}\r\n \r\n \r\n setAssessmentUserRef(null)}\r\n isMe={Auth?.userName === assessmentUserRef?.userName}\r\n user={assessmentUserRef}\r\n companyId={Auth.companyId}\r\n userCompanyRole={Auth.companyRole}\r\n />\r\n loadUsers()}\r\n onClose={() => setAddEditUserRef(null)}\r\n isMe={Auth?.userName === addEditUserRef?.userName}\r\n isUserAdmin={userIsAdmin}\r\n user={addEditUserRef}\r\n companyId={Auth.companyId}\r\n userCompanyRole={Auth.companyRole}\r\n />\r\n setRestPeriodUserRef(null)} user={restPeriodUserRef} companyId={Auth.companyId} />\r\n setShowMassRestPeriodExport(null)} companyId={Auth.companyId} />\r\n setShowUploadTsv(false)} onSave={loadUsers} userCompanyRole={Auth.companyRole} companyId={Auth.companyId} isUserAdmin={userIsAdmin} />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n UsersStore: state.Users,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n setUsers: items => dispatch(setUsers(items)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Users);\r\n\r\nUsers.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n UsersStore: PropTypes.object,\r\n setUsers: PropTypes.func,\r\n};\r\n","export const setUsers = items => ({\r\n type: 'SET_USERS',\r\n items,\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport UserController from '../../controllers/UserController';\r\nimport moment from 'moment';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { Link } from 'react-router-dom';\r\nimport { Button, Grid, Container, Typography, ListItemAvatar, Avatar, ListItemText, ListItem, List, Card } from '@material-ui/core';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { LoadingOverlay } from '../../components/Common/LoadingOverlay';\r\nimport AccessTimeIcon from '@material-ui/icons/AccessTime';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport WorkIcon from '@material-ui/icons/Work';\r\nimport PersonIcon from '@material-ui/icons/Person';\r\n\r\nfunction Profile(props) {\r\n const [userName, setUserName] = React.useState(null);\r\n const [email, setEmail] = React.useState(null);\r\n const [appRoles, setAppRoles] = React.useState([]);\r\n const [companyRoles, setCompanyRoles] = React.useState([]);\r\n const [shipRoles, setShipRoles] = React.useState([]);\r\n const [warningText, setWarningText] = React.useState(null);\r\n const [hideEmailButton, setHideEmailButton] = React.useState(false);\r\n const [emailConfirmed, setEmailConfirmed] = React.useState(false);\r\n const [hasTwoFactorAuth, setHasTwoFactorAuth] = React.useState(false);\r\n const [joined, setJoined] = React.useState('');\r\n const [emailConfirmationSent, setEmailConfirmationSent] = React.useState(false);\r\n const [loading, setLoading] = React.useState(true);\r\n\r\n // initialise\r\n React.useEffect(() => {\r\n async function init() {\r\n if (!props.Auth.isAuthenticated) {\r\n props.PushHistory('/Login');\r\n return;\r\n }\r\n const cachedInfoResponse = await UserController.fetchCachedUserData();\r\n if (!cachedInfoResponse.hasError) {\r\n const { companyRole, shipRoles } = cachedInfoResponse.data;\r\n setCompanyRoles(!isNullOrUndefined(companyRole) ? [companyRole] : []);\r\n setShipRoles(shipRoles);\r\n }\r\n console.log(cachedInfoResponse);\r\n const userInfoResponse = await UserController.getUserInfo();\r\n if (!userInfoResponse.hasError) {\r\n const { userName, email, emailConfirmed, joined, hasTwoFactor } = userInfoResponse.data;\r\n setUserName(userName);\r\n setEmail(email);\r\n setEmailConfirmed(emailConfirmed);\r\n setJoined(joined);\r\n setHasTwoFactorAuth(hasTwoFactor);\r\n setAppRoles(props.Auth.role);\r\n } else {\r\n setWarningText(userInfoResponse.data);\r\n }\r\n setLoading(false);\r\n }\r\n init();\r\n }, [props]);\r\n\r\n async function requestNewEmailConfirmation() {\r\n setHideEmailButton(true);\r\n setWarningText(null);\r\n const response = await UserController.requestEmailConfirmation();\r\n if (!response.hasError) {\r\n setEmailConfirmed(false);\r\n setEmailConfirmationSent(true);\r\n } else {\r\n setEmailConfirmed(false);\r\n setHideEmailButton(false);\r\n setWarningText(response.data);\r\n }\r\n }\r\n\r\n function getRoleName(role) {\r\n switch (role) {\r\n case 'UserInpersinator':\r\n return 'UserImpersonator';\r\n default:\r\n return role;\r\n }\r\n }\r\n\r\n function buildListItem(icon, primary, secondary = null) {\r\n return (\r\n - \r\n {buildListItem(
\r\n
\r\n \r\n \r\n {item.name}\r\n \r\n \r\n \r\n {item.data}\r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {singleColumn && trendingUp ?
\r\n {singleColumn ? null : (\r\n \r\n
\r\n )}\r\n \r\n )
\r\n
\r\n \r\n \r\n \r\n
\r\n {name}\r\n
\r\n \r\n {name}\r\n
\r\n \r\n
\r\n {(avgCorrectAnswers * 100).toFixed(2)}%\r\n
\r\n \r\n {(avgCorrectAnswers * 100).toFixed(2)}%\r\n
setRedirectUrl(`/?userId=${userId}&userName=${userName}&assessmentId=${id}&assessmentName=${name}`)}>\r\n
\r\n \r\n \r\n
\r\n {name}\r\n
\r\n \r\n {name}\r\n
\r\n \r\n
\r\n {(averageScore * 100).toFixed(2)}%\r\n
\r\n \r\n {(averageScore * 100).toFixed(2)}%\r\n
\r\n \r\n
\r\n {lastAttempt ? moment.utc(lastAttempt).local().format('DD.MM.YYYY') : 'N/A'}\r\n
\r\n \r\n {lastAttempt ? moment.utc(lastAttempt).local().format('DD.MM.YYYY') : 'N/A'}\r\n
\r\n \r\n
\r\n {totalAttempts}\r\n
\r\n \r\n {totalAttempts}\r\n
{!correct ?
\r\n \r\n
\r\n \r\n ) : null}\r\n {userAnswer}\r\n
\r\n
\r\n {correctAnswer}\r\n
\r\n \r\n \r\n {buildPageTitle()}\r\n \r\n \r\n \r\n {!isAssessment ? (\r\n \r\n {buildTopRow()}\r\n \r\n ) : null}\r\n \r\n {buildGraphs()}\r\n \r\n {isAssessment ? (\r\n \r\n {buildAssessmentAttempts()}\r\n \r\n ) : null}\r\n \r\n {buildList()}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n DashboardStore: state.Dashboard,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n setCompanyCompliance: items => dispatch(setCompanyCompliance(items)),\r\n setShipCompliance: items => dispatch(setShipCompliance(items)),\r\n setUserCompliance: items => dispatch(setUserCompliance(items)),\r\n setAssessmentCompliance: items => dispatch(setAssessmentCompliance(items)),\r\n setShipUsers: items => dispatch(setShipUsers(items)),\r\n setUserGroups: items => dispatch(setUserGroups(items)),\r\n setShips: items => dispatch(setShips(items)),\r\n clearStore: () => dispatch(clearStore()),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Dashboard);\r\n\r\nDashboard.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n DashboardStore: PropTypes.object,\r\n location: PropTypes.object,\r\n setCompanyCompliance: PropTypes.func,\r\n setShipCompliance: PropTypes.func,\r\n setUserCompliance: PropTypes.func,\r\n setAssessmentCompliance: PropTypes.func,\r\n setShipUsers: PropTypes.func,\r\n setUserGroups: PropTypes.func,\r\n setShips: PropTypes.func,\r\n clearStore: PropTypes.func,\r\n};\r\n","export const setCompanyCompliance = items => ({\r\n type: 'SET_COMPANY_COMPLIANCE',\r\n items,\r\n});\r\n\r\nexport const setShipCompliance = items => ({\r\n type: 'SET_SHIP_COMPLIANCE',\r\n items,\r\n});\r\n\r\nexport const setUserCompliance = items => ({\r\n type: 'SET_USER_COMPLIANCE',\r\n items,\r\n});\r\n\r\nexport const setAssessmentCompliance = items => ({\r\n type: 'SET_ASSESSMENT_COMPLIANCE',\r\n items,\r\n});\r\n\r\nexport const setShips = items => ({\r\n type: 'SET_SHIPS',\r\n items,\r\n});\r\n\r\nexport const setShipUsers = items => ({\r\n type: 'SET_SHIP_USERS',\r\n items,\r\n});\r\n\r\nexport const setUserGroups = items => ({\r\n type: 'SET_USER_GROUPS',\r\n items,\r\n});\r\n\r\nexport const clearStore = () => ({\r\n type: 'INITIALISE_STORE',\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles, Card, CardContent, Typography, IconButton, Popover } from '@material-ui/core';\r\nimport { MoreVert } from '@material-ui/icons';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n height: 56,\r\n },\r\n content: {\r\n position: 'relative',\r\n height: '100%',\r\n padding: 0 + ' !important',\r\n '& .MuiTypography-root': {\r\n padding: 12,\r\n width: 'calc(100% - 48px)',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n position: 'absolute',\r\n },\r\n },\r\n popover: {\r\n '& .MuiPopover-paper': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n '& .MuiButton-root': {\r\n textTransform: 'none',\r\n minWidth: 120,\r\n },\r\n '& .MuiButton-label': {\r\n justifyContent: 'flex-start',\r\n fontWeight: 400,\r\n },\r\n },\r\n iconBtn: {\r\n position: 'absolute',\r\n right: 0,\r\n top: 4,\r\n },\r\n}));\r\n\r\nexport function SearchCardMini(props) {\r\n const { title, children } = props;\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const classes = useStyles();\r\n\r\n const handleClick = event => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const open = Boolean(anchorEl);\r\n const id = open ? 'search-item-popover' : undefined;\r\n\r\n return (\r\n <>\r\n \r\n setAddEditRef(null)}\r\n onError={setWarning}\r\n onDone={handleUpdateUserGroups}\r\n userGroup={addEditRef}\r\n companyId={Auth.companyId}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UsersGroups);\r\n\r\nUsersGroups.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n};\r\n","import React from 'react';\r\nimport NoImage from '../../images/no-img.png';\r\nimport PropTypes from 'prop-types';\r\nimport ShipController from '../../controllers/ShipController';\r\nimport { Grid, Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button, FormControl, InputLabel, FilledInput } from '@material-ui/core';\r\nimport { clearUploadUrls, getUploadUrls, readUploadUrls } from '../../helpers/UploadReader';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { ItemImage } from '../../components/Common/ItemImage';\r\n\r\nexport function FleetAddEdit(props) {\r\n const { ship, open, onClose, onError, onDone, companyId } = props;\r\n const [name, setName] = React.useState('');\r\n const [imo, setImo] = React.useState('');\r\n const [portOfRegistry, setPortOfRegistry] = React.useState('');\r\n const [image, setImage] = React.useState('');\r\n const [removeImage, setRemoveImage] = React.useState(false);\r\n const [, updateState] = React.useState();\r\n\r\n const forceUpdate = React.useCallback(() => {\r\n updateState({});\r\n }, []);\r\n\r\n const shipExists = () => !isNullOrUndefined(ship?.id);\r\n\r\n // update fields with current ship info\r\n React.useEffect(() => {\r\n setName(ship?.name ?? '');\r\n setImo(ship?.imo ?? '');\r\n setPortOfRegistry(ship?.portOfRegistry ?? '');\r\n setImage(ship?.logoPath ?? '');\r\n }, [ship]);\r\n\r\n function getImage() {\r\n return getUploadUrls()[0] ?? (image === '' ? NoImage : image);\r\n }\r\n\r\n async function handleSave(event) {\r\n event.preventDefault();\r\n onError(null);\r\n const response = !shipExists()\r\n ? await ShipController.addShip(companyId, name, imo, portOfRegistry, image)\r\n : await ShipController.updateShip(companyId, ship.id, name, imo, portOfRegistry, removeImage, image);\r\n if (response.hasError) {\r\n onError(response.data);\r\n } else {\r\n onDone(response.data);\r\n }\r\n onClose();\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name, files } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setName(value);\r\n break;\r\n case 'imo':\r\n setImo(value);\r\n break;\r\n case 'portOfRegistry':\r\n setPortOfRegistry(value);\r\n break;\r\n case 'image':\r\n clearUploadUrls();\r\n if (!isNullOrUndefined(files[0])) {\r\n setImage(files[0]);\r\n setRemoveImage(false);\r\n readUploadUrls([files[0]], forceUpdate);\r\n } else {\r\n setImage('');\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function handleClearImage() {\r\n clearUploadUrls();\r\n setImage('');\r\n setRemoveImage(true);\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nFleetAddEdit.propTypes = {\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onError: PropTypes.func.isRequired,\r\n onDone: PropTypes.func.isRequired,\r\n companyId: PropTypes.string.isRequired,\r\n ship: PropTypes.object,\r\n};\r\n","export const setShips = items => ({\r\n type: 'SET_SHIPS',\r\n items,\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport queryString from 'query-string';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { Add } from '@material-ui/icons';\r\nimport { makeStyles, Grid, Button, TextField, Dialog, DialogContent, DialogActions, DialogTitle, Typography, CircularProgress } from '@material-ui/core';\r\nimport { isEmpty, isNullOrUndefined, updateQueryString } from '../../helpers/Utils';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { SearchCard } from '../../components/Common/SearchCard';\r\nimport { FleetAddEdit } from './FleetAddEdit';\r\nimport { clearUploadUrls } from '../../helpers/UploadReader';\r\nimport { CompanyRole, ShipRole } from '../../helpers/Constants';\r\nimport ShipController from '../../controllers/ShipController';\r\nimport { Skeleton } from '../../components/Common/Skeleton';\r\nimport { setShips } from '../../stores/Actions/Fleet';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n wrapper: {\r\n padding: '16px 32px',\r\n\r\n '& .skeleton': {\r\n margin: 0,\r\n },\r\n\r\n [theme.breakpoints.down('xs')]: {\r\n padding: 16,\r\n },\r\n },\r\n topArea: {\r\n paddingBottom: 8,\r\n '& .MuiButtonBase-root': {\r\n height: '100%',\r\n },\r\n },\r\n}));\r\n\r\nfunction Fleet(props) {\r\n const { Auth, PushHistory, FleetStore, setShips } = props;\r\n const { ships } = FleetStore;\r\n\r\n const { name: nameQuery } = queryString.parse(window.location.search);\r\n const [nameSearch, setNameSearch] = React.useState(nameQuery ?? '');\r\n const [deleteRef, setDeleteRef] = React.useState(null);\r\n const [addEditRef, setAddEditRef] = React.useState(null);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warning, setWarning] = React.useState(null);\r\n const [loading, setLoading] = React.useState(true);\r\n const classes = useStyles();\r\n\r\n const userIsCaptain = Auth.shipRoles.includes(ShipRole.Captain) && Auth.companyRole !== CompanyRole.Owner;\r\n\r\n const loadShips = React.useCallback(async () => {\r\n setLoading(true);\r\n const response = await ShipController.getShips(Auth.companyId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n const prevShips = ships;\r\n\r\n response.data = response.data.map(e => {\r\n const prevShip = prevShips.find(el => el.id === e.id);\r\n\r\n if (prevShip) {\r\n const { logoPath } = prevShip;\r\n if (Object.keys(prevShip).includes('logoPath')) {\r\n return { ...e, logoPath };\r\n }\r\n }\r\n return e;\r\n });\r\n\r\n setShips(response.data);\r\n\r\n for (let i = 0; i < response.data.length; i++) {\r\n const imgResponse = await ShipController.getShipLogo(Auth.companyId, response.data[i].id);\r\n if (imgResponse.hasError) {\r\n continue;\r\n }\r\n response.data[i].logoPath = imgResponse.data;\r\n }\r\n setShips(response.data);\r\n }\r\n setLoading(false);\r\n }, [Auth]);\r\n\r\n // init & auth check\r\n React.useEffect(() => {\r\n // ensure user is signed in\r\n const { isAuthenticated, isLoggingIn } = Auth;\r\n if (!isAuthenticated && !isLoggingIn) {\r\n setRedirectUrl('/Login');\r\n }\r\n // fetch ships for initial render\r\n async function init() {\r\n await loadShips();\r\n }\r\n init();\r\n }, [Auth, loadShips]);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (!isNullOrUndefined(redirectUrl)) {\r\n PushHistory(redirectUrl);\r\n }\r\n }, [redirectUrl, PushHistory]);\r\n\r\n function generateQueryString(name) {\r\n let output = '';\r\n if (name.trim().length > 0) {\r\n output += `name=${name}`;\r\n }\r\n return output;\r\n }\r\n\r\n async function handleUpdateShip(ship) {\r\n const { id } = ship;\r\n const imgResponse = await ShipController.getShipLogo(Auth.companyId, id);\r\n if (!imgResponse.hasError) {\r\n ship.logoPath = imgResponse.data;\r\n }\r\n\r\n const exists = ships.some(e => e.id === id);\r\n if (exists) {\r\n setShips(ships.map(e => (e.id === id ? ship : e)));\r\n } else {\r\n setShips([...ships, ship]);\r\n }\r\n }\r\n\r\n async function handleDeleteShip() {\r\n setLoading(true);\r\n setWarning(null);\r\n const { id } = deleteRef;\r\n const response = await ShipController.deleteShip(Auth.companyId, id);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setShips(ships.filter(e => e.id !== id));\r\n }\r\n setDeleteRef(null);\r\n setLoading(false);\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setNameSearch(value);\r\n updateQueryString(generateQueryString(value));\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function buildTopArea() {\r\n return (\r\n \r\n {buildTopArea()}\r\n {buildShips()}\r\n {buildConfirmDelete()}\r\n {\r\n setAddEditRef(null);\r\n clearUploadUrls();\r\n }}\r\n onError={setWarning}\r\n onDone={handleUpdateShip}\r\n ship={addEditRef}\r\n companyId={Auth.companyId}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n FleetStore: state.Fleet,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n setShips: items => dispatch(setShips(items)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Fleet);\r\n\r\nFleet.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n FleetStore: PropTypes.object,\r\n setShips: PropTypes.func,\r\n};\r\n","// import 'date-fns';\r\nimport React from 'react';\r\nimport NoImage from '../../images/no-img.png';\r\nimport PropTypes from 'prop-types';\r\nimport CompanyController from '../../controllers/CompanyController';\r\nimport { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';\r\nimport { Grid, Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button, FormControl, InputLabel, FilledInput } from '@material-ui/core';\r\nimport { clearUploadUrls, getUploadUrls, readUploadUrls } from '../../helpers/UploadReader';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { ItemImage } from '../../components/Common/ItemImage';\r\nimport MomentUtils from '@date-io/moment';\r\nimport moment from 'moment';\r\n\r\nexport function CompanyAddEdit(props) {\r\n const { company, open, onClose, onError, onDone, companyId } = props;\r\n const [scoreFrom, setScoreFrom] = React.useState(null);\r\n const [inputValue, setInputValue] = React.useState(null);\r\n\r\n const [name, setName] = React.useState('');\r\n const [image, setImage] = React.useState('');\r\n const [, updateState] = React.useState();\r\n const isEditing = Object.keys(company ?? {}).length !== 0;\r\n\r\n const forceUpdate = React.useCallback(() => {\r\n updateState({});\r\n }, []);\r\n\r\n // update fields with current company info\r\n React.useEffect(() => {\r\n setName(company?.name ?? '');\r\n setImage(company?.logoPath ?? '');\r\n setScoreFrom(company?.scoreFrom);\r\n }, [company]);\r\n\r\n function getImage() {\r\n return getUploadUrls()[0] ?? (image === '' ? NoImage : image);\r\n }\r\n\r\n async function handleSave(event) {\r\n event.preventDefault();\r\n onError(null);\r\n const response = isNullOrUndefined(company?.id)\r\n ? await CompanyController.addCompany(companyId, name, image)\r\n : await CompanyController.updateCompany(company.id, name, image, moment(scoreFrom).toISOString());\r\n if (response.hasError) {\r\n onError(response.data);\r\n } else {\r\n onDone(response.data);\r\n }\r\n onClose();\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name, files } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setName(value);\r\n break;\r\n case 'image':\r\n clearUploadUrls();\r\n if (!isNullOrUndefined(files[0])) {\r\n setImage(files[0]);\r\n readUploadUrls([files[0]], forceUpdate);\r\n } else {\r\n setImage('');\r\n }\r\n break;\r\n case 'scoreFrom':\r\n setScoreFrom(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const onDateChange = (date, value) => {\r\n setScoreFrom(date);\r\n setInputValue(value);\r\n };\r\n\r\n function handleClearImage() {\r\n clearUploadUrls();\r\n setImage('');\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nCompanyAddEdit.propTypes = {\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onError: PropTypes.func.isRequired,\r\n onDone: PropTypes.func.isRequired,\r\n companyId: PropTypes.string.isRequired,\r\n company: PropTypes.object,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport queryString from 'query-string';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { LogIn } from '../../stores/Actions/Authentication';\r\nimport { Add } from '@material-ui/icons';\r\nimport { makeStyles, Grid, Button, TextField } from '@material-ui/core';\r\nimport { isNullOrUndefined, updateQueryString } from '../../helpers/Utils';\r\nimport { LoadingOverlay } from '../../components/Common/LoadingOverlay';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { SearchCard } from '../../components/Common/SearchCard';\r\nimport { CompanyAddEdit } from './CompanyAddEdit';\r\nimport { clearUploadUrls } from '../../helpers/UploadReader';\r\nimport CompanyController from '../../controllers/CompanyController';\r\nimport { updateCompanyId } from '../../controllers/UserController';\r\nimport { clearStore } from '../../stores/Actions/Dashboard';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n wrapper: {\r\n padding: '16px 32px',\r\n [theme.breakpoints.down('xs')]: {\r\n padding: 16,\r\n },\r\n },\r\n topArea: {\r\n paddingBottom: 8,\r\n '& .MuiButtonBase-root': {\r\n height: '100%',\r\n },\r\n },\r\n}));\r\n\r\nfunction Company(props) {\r\n const { Auth, PushHistory, LogIn, clearStore } = props;\r\n const { name: nameQuery } = queryString.parse(window.location.search);\r\n const [companies, setCompanies] = React.useState([]);\r\n const [nameSearch, setNameSearch] = React.useState(nameQuery ?? '');\r\n // const [deleteRef, setDeleteRef] = React.useState(null);\r\n const [addEditRef, setAddEditRef] = React.useState(null);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warning, setWarning] = React.useState(null);\r\n const [loading, setLoading] = React.useState(true);\r\n const classes = useStyles();\r\n\r\n const loadCompanies = React.useCallback(async () => {\r\n setLoading(true);\r\n const response = await CompanyController.getCompanies(Auth.companyId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n for (let i = 0; i < response.data.length; i++) {\r\n const imgResponse = await CompanyController.getCompanyLogo(response.data[i].id);\r\n if (imgResponse.hasError) {\r\n continue;\r\n }\r\n response.data[i].logoPath = imgResponse.data;\r\n }\r\n setCompanies(response.data);\r\n }\r\n setLoading(false);\r\n }, [Auth]);\r\n\r\n // init & auth check\r\n React.useEffect(() => {\r\n // ensure user is signed in\r\n const { isAuthenticated, isLoggingIn } = Auth;\r\n if (!isAuthenticated && !isLoggingIn) {\r\n setRedirectUrl('/Login');\r\n }\r\n // fetch companies for inital render\r\n async function init() {\r\n await loadCompanies();\r\n }\r\n init();\r\n }, [Auth, loadCompanies]);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (!isNullOrUndefined(redirectUrl)) {\r\n PushHistory(redirectUrl);\r\n }\r\n }, [redirectUrl, PushHistory]);\r\n\r\n function generateQueryString(name) {\r\n let output = '';\r\n if (name.trim().length > 0) {\r\n output += `name=${name}`;\r\n }\r\n return output;\r\n }\r\n\r\n async function handleUpdateCompany(company) {\r\n const { id } = company;\r\n const imgResponse = await CompanyController.getCompanyLogo(id);\r\n if (!imgResponse.hasError) {\r\n company.logoPath = imgResponse.data;\r\n }\r\n\r\n const exists = companies.some(e => e.id === id);\r\n if (exists) {\r\n setCompanies(companies.map(e => (e.id === id ? company : e)));\r\n } else {\r\n setCompanies([...companies, company]);\r\n }\r\n }\r\n\r\n async function handleCompanySwitch(company) {\r\n setLoading(true);\r\n const { id } = company;\r\n const switchResponse = await CompanyController.switchCompany(id);\r\n if (switchResponse.hasError) {\r\n setWarning(switchResponse.data);\r\n setLoading(false);\r\n return;\r\n }\r\n\r\n await updateCompanyId(id);\r\n\r\n clearStore();\r\n\r\n LogIn({ ...Auth, companyId: id });\r\n }\r\n\r\n async function handleViewCompanyResults(company) {\r\n await handleCompanySwitch(company);\r\n setRedirectUrl(`/`);\r\n }\r\n\r\n // async function handleDeleteCompany() {\r\n // setLoading(true);\r\n // setWarning(null);\r\n // const { id } = deleteRef;\r\n // const response = await CompanyController.deleteCompany(Auth.companyId, id);\r\n // if (response.hasError) {\r\n // setWarning(response.data);\r\n // } else {\r\n // setCompanies(companies.filter(e => e.id !== id));\r\n // }\r\n // setDeleteRef(null);\r\n // setLoading(false);\r\n // }\r\n\r\n function handleInput(event) {\r\n const { value, name } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setNameSearch(value);\r\n updateQueryString(generateQueryString(value));\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function buildTopArea() {\r\n return (\r\n \r\n {\r\n setAddEditRef(null);\r\n clearUploadUrls();\r\n }}\r\n onError={setWarning}\r\n onDone={handleUpdateCompany}\r\n company={addEditRef}\r\n companyId={Auth.companyId}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n LogIn: data => dispatch(LogIn(data)),\r\n clearStore: () => dispatch(clearStore()),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Company);\r\n\r\nCompany.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n LogIn: PropTypes.func,\r\n clearStore: PropTypes.func,\r\n};\r\n","import Axios from 'axios';\r\nimport UserController from './UserController';\r\nimport { APIRoute, APIPath } from '../helpers/Constants';\r\nimport { flattenFormContent, generateResponse } from '../helpers/Utils';\r\n\r\nconst QuestionController = {\r\n getCategories,\r\n addCategories,\r\n editCategories,\r\n removeCategories,\r\n addCategory,\r\n getQuestions,\r\n getAllQuestions,\r\n getQuestion,\r\n addQuestion,\r\n editQuestion,\r\n archiveQuestion,\r\n deleteQuestion,\r\n importFromExcel,\r\n};\r\n\r\nasync function getCategories(companyId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.get(APIRoute + APIPath.GET_QUESTION_CATEGORIES(companyId), userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function addCategories(companyId, name) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.post(APIRoute + APIPath.ADD_QUESTION_CATEGORIES(companyId), { name }, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function editCategories(companyId, id, name) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.post(APIRoute + APIPath.EDIT_QUESTION_CATEGORIES(companyId), { id, name }, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function removeCategories(companyId, id) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.post(APIRoute + APIPath.REMOVE_QUESTION_CATEGORIES(companyId, id), null, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function addCategory(companyId, name) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n const categoryModel = { name };\r\n return Axios.post(APIRoute + APIPath.ADD_QUESTION_CATEGORY(companyId), categoryModel, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function getQuestions(companyId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.get(APIRoute + APIPath.GET_COMPANY_QUESTIONS(companyId), userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function getAllQuestions(companyId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.get(APIRoute + APIPath.GET_ALL_QUESTIONS(companyId), userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function getQuestion(companyId, questionId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.get(APIRoute + APIPath.GET_QUESTION(companyId, questionId), userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function addQuestion(companyId, title, description, type, frequency, serverity, answers, questionAnswerImages, questionCatagoryIds, documentationItems, shipIds, allowNFC) {\r\n const userHeaders = await UserController.getUserHeaders('multipart/form-data');\r\n const formData = new FormData();\r\n formData.append('Title', title);\r\n formData.append('Description', description);\r\n formData.append('Type', type);\r\n formData.append('Frequency', frequency);\r\n formData.append('Severity', serverity);\r\n formData.append('AllowNFC', allowNFC);\r\n questionAnswerImages.forEach((e, index) => {\r\n formData.append(`QuestionAnswerImages`, e, index);\r\n });\r\n questionCatagoryIds.forEach((e, index) => {\r\n formData.append(`QuestionCatagoryIds[${index}]`, e);\r\n });\r\n answers.forEach((e, index) => {\r\n flattenFormContent('Answers', formData, e, index);\r\n });\r\n documentationItems.forEach((e, index) => {\r\n flattenFormContent('DocumentationItems', formData, e, index);\r\n });\r\n shipIds.forEach((e, index) => {\r\n formData.append(`ShipIds[${index}]`, e);\r\n });\r\n return Axios.post(APIRoute + APIPath.ADD_QUESTION(companyId), formData, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function editQuestion(id, companyId, title, description, frequency, serverity, answers, questionAnswerImages, questionCatagoryIds, documentationItems, shipIds, allowNFC) {\r\n const userHeaders = await UserController.getUserHeaders('multipart/form-data');\r\n const formData = new FormData();\r\n formData.append('Id', id);\r\n formData.append('Title', title);\r\n formData.append('Description', description);\r\n formData.append('Frequency', frequency);\r\n formData.append('Severity', serverity);\r\n formData.append('AllowNFC', allowNFC);\r\n questionAnswerImages.forEach((e, index) => {\r\n formData.append(`QuestionAnswerImages`, e, index);\r\n });\r\n questionCatagoryIds.forEach((e, index) => {\r\n formData.append(`QuestionCatagoryIds[${index}]`, e);\r\n });\r\n answers.forEach((e, index) => {\r\n flattenFormContent('Answers', formData, e, index);\r\n });\r\n documentationItems.forEach((e, index) => {\r\n flattenFormContent('DocumentationItems', formData, e, index);\r\n });\r\n shipIds.forEach((e, index) => {\r\n formData.append(`ShipIds[${index}]`, e);\r\n });\r\n return Axios.post(APIRoute + APIPath.EDIT_QUESTION(companyId), formData, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function archiveQuestion(companyId, questionId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.post(APIRoute + APIPath.ARCHIVE_QUESTION(companyId, questionId), null, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function deleteQuestion(companyId, questionId) {\r\n const userHeaders = await UserController.getUserHeaders();\r\n return Axios.post(APIRoute + APIPath.DELETE_QUESTION(companyId, questionId), null, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nasync function importFromExcel(companyId, file, shipIds) {\r\n const userHeaders = await UserController.getUserHeaders('multipart/form-data');\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n shipIds.forEach((e, index) => {\r\n formData.append(`ShipIds[${index}]`, e);\r\n });\r\n return Axios.post(APIRoute + APIPath.IMPORT_FROM_EXCEL(companyId), formData, userHeaders)\r\n .then(async response => {\r\n return generateResponse(false, response.data, response);\r\n })\r\n .catch(reason => {\r\n return generateResponse(true, reason);\r\n });\r\n}\r\n\r\nexport default QuestionController;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport QuestionController from '../../controllers/QuestionController';\r\nimport {\r\n Grid,\r\n Dialog,\r\n DialogTitle,\r\n DialogContent,\r\n TextField,\r\n DialogActions,\r\n Button,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n Slider,\r\n makeStyles,\r\n IconButton,\r\n Chip,\r\n CircularProgress,\r\n FormControlLabel,\r\n Checkbox,\r\n FilledInput,\r\n Avatar,\r\n} from '@material-ui/core';\r\nimport { DarkMenuItem } from '../../components/Common/DarkMenuItem';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { Add, Clear, Delete, Done, Remove } from '@material-ui/icons';\r\nimport { Colours } from '../../helpers/Colours';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { Autocomplete } from '@material-ui/lab';\r\nimport { Documents } from '../Documents/Documents';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n slider: {\r\n paddingTop: 30,\r\n },\r\n answerRow: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '& .answer': {\r\n flexGrow: 1,\r\n },\r\n '& .toggle-correct': {\r\n backgroundColor: Colours.red,\r\n color: Colours.white,\r\n marginLeft: 16,\r\n '&.active': {\r\n backgroundColor: Colours.green,\r\n },\r\n '&:hover': {\r\n backgroundColor: Colours.darkRed,\r\n '&.active': {\r\n backgroundColor: Colours.darkGreen,\r\n },\r\n },\r\n },\r\n },\r\n addRemoveWrapper: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n selectArea: {\r\n '& .MuiInputBase-root': {\r\n paddingTop: 23,\r\n paddingBottom: 4,\r\n },\r\n },\r\n chip: {\r\n marginRight: 2,\r\n marginBottom: 2,\r\n },\r\n loading: {\r\n maxHeight: '60vh',\r\n height: 512,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n questionsContainer: {\r\n position: 'relative',\r\n },\r\n imageAnswer: {\r\n backgroundSize: 'cover',\r\n backgroundPosition: 'center',\r\n },\r\n imageAnswerWrapper: {\r\n width: '100%',\r\n },\r\n}));\r\n\r\nconst defaultAnswer = isCorrect => ({\r\n title: '',\r\n description: '',\r\n imageUrl: '',\r\n isCorrect,\r\n});\r\n\r\nexport function ComplianceAddEditQuestion(props) {\r\n const { question, open, onClose, onDone, companyId, categoriesArray, shipsArray } = props;\r\n const [categoryOptions, setCategoryOptions] = React.useState([]);\r\n const [questionCategories, setQuestionCategories] = React.useState([]);\r\n const [selectedShips, setSelectedShips] = React.useState([]);\r\n const [selectedDocs, setSelectedDocs] = React.useState([]);\r\n const [content, setContent] = React.useState('');\r\n const [questionNote, setQuestionNote] = React.useState('');\r\n const [severity, setSeverity] = React.useState(50);\r\n const [startSeverity, setStartSeverity] = React.useState(50);\r\n const [frequency, setFrequency] = React.useState(100);\r\n const [startFrequency, setStartFrequency] = React.useState(100);\r\n const [answers, setAnswers] = React.useState([defaultAnswer(false), defaultAnswer(true)]);\r\n const [answerImages, setAnswerImages] = React.useState([]);\r\n const [allowNFC, setAllowNFC] = React.useState(false);\r\n const [showPickDocument, setShowPickDocument] = React.useState(false);\r\n const [showAddCategory, setShowAddCategory] = React.useState(false);\r\n const [categoryName, setCategoryName] = React.useState('');\r\n const [selectPageId, setSelectPageId] = React.useState(null);\r\n const [pageNumber, setPageNumber] = React.useState(0);\r\n const [warning, setWarning] = React.useState(null);\r\n const [saving, setSaving] = React.useState(false);\r\n const [loading, setLoading] = React.useState(false);\r\n const classes = useStyles();\r\n\r\n const questionExists = () => !isNullOrUndefined(question?.id);\r\n\r\n const loadQuestion = React.useCallback(async () => {\r\n if (question?.id !== null && question?.id !== undefined) {\r\n const response = await QuestionController.getQuestion(companyId, question.id);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n const { title, frequency, serverity, answers, category, documentItems, ships, allowNFC, description } = response.data;\r\n const categoryIds = category.map(e => e.id);\r\n setContent(title);\r\n setSelectedDocs(documentItems);\r\n setQuestionCategories(categoriesArray.filter(e => categoryIds.includes(e.id)));\r\n setSelectedShips(ships.map(e => e.id));\r\n setCategoryOptions(categoriesArray);\r\n setQuestionNote(description);\r\n setSeverity(serverity);\r\n setStartSeverity(serverity);\r\n setFrequency(frequency);\r\n setStartFrequency(frequency);\r\n setAnswers(answers);\r\n setAllowNFC(allowNFC);\r\n }\r\n } else {\r\n setContent('');\r\n setSelectedDocs([]);\r\n setQuestionCategories([]);\r\n setSelectedShips([]);\r\n setSeverity(50);\r\n setStartSeverity(50);\r\n setFrequency(100);\r\n setStartFrequency(100);\r\n setCategoryOptions(categoriesArray);\r\n setAnswers([defaultAnswer(false), defaultAnswer(true)]);\r\n setAllowNFC(false);\r\n }\r\n setAnswerImages([]);\r\n }, [categoriesArray, question, companyId]);\r\n\r\n // update fields with current question info\r\n React.useEffect(() => {\r\n async function init() {\r\n if (open) {\r\n await loadQuestion();\r\n }\r\n }\r\n setLoading(true);\r\n init().then(() => setLoading(false));\r\n }, [open, loadQuestion]);\r\n\r\n // update selected page number\r\n React.useEffect(() => {\r\n if (isNullOrUndefined(selectPageId)) {\r\n setPageNumber(0);\r\n } else {\r\n setPageNumber(selectedDocs.find(e => e.id === selectPageId).pageNum);\r\n }\r\n }, [selectPageId, selectedDocs]);\r\n\r\n async function handleSave(event) {\r\n event.preventDefault();\r\n setSaving(true);\r\n\r\n const response = questionExists()\r\n ? await QuestionController.editQuestion(\r\n question.id,\r\n companyId,\r\n content,\r\n questionNote,\r\n frequency,\r\n severity,\r\n answers,\r\n answerImages,\r\n questionCategories.map(e => e.id),\r\n selectedDocs.map(e => ({ documentId: e.id, pageNum: e.pageNum })),\r\n selectedShips,\r\n allowNFC\r\n )\r\n : await QuestionController.addQuestion(\r\n companyId,\r\n content,\r\n questionNote,\r\n 1,\r\n frequency,\r\n severity,\r\n answers,\r\n answerImages,\r\n questionCategories.map(e => e.id),\r\n selectedDocs.map(e => ({ documentId: e.id, pageNum: e.pageNum })),\r\n selectedShips,\r\n allowNFC\r\n );\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n onDone(response.data);\r\n }\r\n\r\n setSaving(false);\r\n onClose();\r\n }\r\n\r\n async function handleAddCategory(event) {\r\n event.preventDefault();\r\n setSaving(true);\r\n\r\n const response = await QuestionController.addCategory(companyId, categoryName);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setCategoryOptions([...categoryOptions, response.data]);\r\n }\r\n\r\n setShowAddCategory(false);\r\n setSaving(false);\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name } = event.target;\r\n switch (name) {\r\n case 'content':\r\n setContent(value);\r\n break;\r\n case 'questionNote':\r\n setQuestionNote(value);\r\n break;\r\n case 'categoryName':\r\n setCategoryName(value);\r\n break;\r\n case 'pageNumber':\r\n if (value.length !== 0 && (isNaN(parseInt(value)) || parseInt(value) < 0)) {\r\n break;\r\n }\r\n setPageNumber(value.length === 0 ? '' : parseInt(value));\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function handleSelectCategory(value) {\r\n if (value.includes('')) {\r\n setQuestionCategories([]);\r\n } else if (value.includes('new')) {\r\n setShowAddCategory(true);\r\n setCategoryName('');\r\n } else {\r\n setQuestionCategories(value);\r\n }\r\n }\r\n\r\n function handleUpdatePageNum(event) {\r\n event.preventDefault();\r\n setSelectedDocs(selectedDocs.map(e => (e.id === selectPageId ? { ...e, pageNum: pageNumber } : e)));\r\n setSelectPageId(null);\r\n setPageNumber(0);\r\n }\r\n\r\n function handleAddAnswer() {\r\n const newAnswers = [...answers, defaultAnswer(false)];\r\n setAnswers(newAnswers);\r\n }\r\n\r\n function handleRemoveAnswer() {\r\n if (answers.length === 1) {\r\n return;\r\n }\r\n const newAnswers = [...answers];\r\n newAnswers.pop();\r\n setAnswers(newAnswers);\r\n }\r\n\r\n function handleChangeCorrectAnswer(index) {\r\n setAnswers(answers.map((e, i) => ({ ...e, isCorrect: i === index })));\r\n }\r\n\r\n function handleChangeAnswerTitle(index, newTitle) {\r\n setAnswers(answers.map((e, i) => ({ ...e, title: i === index ? newTitle : e.title })));\r\n }\r\n\r\n function handleChangeAnswerImage(index, event) {\r\n const { files } = event.target;\r\n const newImageIndex = answerImages.length;\r\n const noEntry = index >= newImageIndex;\r\n if (files.length > 0) {\r\n if (noEntry) {\r\n setAnswerImages([...answerImages, files[0]]);\r\n setAnswers(answers.map((e, i) => (i === index ? { ...e, imageIndex: newImageIndex } : e)));\r\n } else {\r\n setAnswerImages(answerImages.map((e, i) => (i === index ? files[0] : e)));\r\n setAnswers(answers.map((e, i) => (i === index ? { ...e, imageIndex: newImageIndex } : e)));\r\n }\r\n }\r\n }\r\n\r\n function handleDeleteAnswerImage(index) {\r\n setAnswers(answers.map((e, i) => (i === index ? { ...e, imageUrl: null } : e)));\r\n }\r\n\r\n function buildAddCategoryDialog() {\r\n return (\r\n \r\n );\r\n }\r\n\r\n function buildSelectPageDialog() {\r\n return (\r\n \r\n );\r\n }\r\n\r\n function buildErrorDialog() {\r\n return (\r\n \r\n );\r\n }\r\n\r\n function buildDialogContent() {\r\n return (\r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n \r\n\r\n {buildSelectPageDialog()}\r\n {buildAddCategoryDialog()}\r\n {buildErrorDialog()}\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {leftTitle}\r\n \r\n \r\n {leftSubtitle}\r\n \r\n
\r\n \r\n
\r\n {leftChildren}
\r\n \r\n
\r\n \r\n \r\n {rightTitle}\r\n \r\n \r\n {rightSubtitle}\r\n \r\n
\r\n \r\n
\r\n {rightChildren?.length > 0 ? rightChildren : {emptyRightMessage} }
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n function buildPageOne() {\r\n // ships\r\n const totalSelectedShips = shipSelections.filter(e => e.selected).length;\r\n const totalUnselectedShips = shipSelections.filter(e => !e.selected).length;\r\n const selectedShips = shipSelections.filter(filterShip).filter(e => e.selected);\r\n const unselectedShips = shipSelections.filter(filterShip).filter(e => !e.selected);\r\n\r\n return (\r\n <>\r\n \r\n {repeatSelect !== 'Never' ? (\r\n
\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n Ends:
\r\n \r\n
\r\n Starts On:
\r\n \r\n
\r\n Ends On:
\r\n \r\n \r\n {errorText}\r\n \r\n
\r\n \r\n {!isBaseline ? handleChangeAssessmentLevelPosition(assessmentLevel?.levelIndex, -1)}> : null}\r\n {complianceTestLevels.length - 1 !== assessmentLevel?.levelIndex ? (\r\n handleChangeAssessmentLevelPosition(assessmentLevel?.levelIndex, 1)}> \r\n ) : null}\r\n
\r\n \r\n {'Repeat '}\r\n handleAssessmentLevelCronInputs(e, assessmentLevel?.levelIndex)}\r\n value={testLevelCrons?.find(e => e.levelIndex === assessmentLevel?.levelIndex)?.repeatSelect}\r\n className=\"dropdownPicker\"\r\n disableUnderline\r\n >\r\n \r\n \r\n \r\n \r\n {' on '}\r\n {buildAssessmentLevelRepeatPatten(assessmentLevel?.levelIndex)}\r\n
\r\n \r\n {title} \r\n \r\n Asks {totalQuestions} question{totalQuestions > 1 ? 's' : ''} per assessment\r\n \r\n
\r\n \r\n {getUniqueCategories().map(e => (\r\n
\r\n \r\n
\r\n \r\n \r\n Assigned Crew\r\n \r\n {userCount} \r\n
\r\n \r\n \r\n Assigned Ships\r\n \r\n {shipCount} \r\n
\r\n \r\n \r\n Next Due\r\n \r\n {getNextDueDate()} \r\n
\r\n \r\n {isArchived ? (\r\n \r\n Archived\r\n \r\n ) : null}\r\n \r\n Q{id}\r\n \r\n {title} \r\n
\r\n \r\n {categories.map(e => (\r\n
\r\n {!isNullOrUndefined(children) ? (\r\n \r\n \r\n \r\n Selected Ship \r\n \r\n {selectedShip === null ? You must select a ship before adding new compliance data : null}\r\n \r\n \r\n\r\n setAddEditQuestionRef(null)}\r\n onDone={handleAddQuestion}\r\n categoriesArray={questionCategories}\r\n question={addEditQuestionRef}\r\n shipsArray={ships}\r\n />\r\n\r\n setAddEditAssessmentRef(null)}\r\n onDone={handleAddEditAssessment}\r\n assessment={addEditAssessmentRef}\r\n categoriesArray={questionCategories}\r\n categories={categories}\r\n questionsArray={questions.map(e => ({ ...e, checked: false, selected: false }))}\r\n usersArray={users.map(e => ({ ...e, checked: false, selected: false }))}\r\n userGroupsArray={userGroups.map(e => ({ ...e, checked: false, selected: false }))}\r\n shipsArray={ships.map(e => ({ ...e, checked: false, selected: false }))}\r\n />\r\n\r\n {buildArchiveQuestionDialog()}\r\n {buildDuplicateAssessmentDialog()}\r\n {buildExcelDialog()}\r\n {\r\n setShowQuestionExport(false);\r\n }}\r\n open={showQuestionExport}\r\n questions={questions}\r\n assessments={assessments}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Compliance);\r\n\r\nCompliance.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Grid, Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from '@material-ui/core';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport QuestionController from '../../controllers/QuestionController';\r\n\r\nexport default function CategorysAddEdit(props) {\r\n const { category, open, onClose, onError, onDone, companyId } = props;\r\n const [name, setName] = React.useState('');\r\n\r\n const categoryExists = () => !isNullOrUndefined(category?.id);\r\n\r\n // update fields with current user group info\r\n React.useEffect(() => {\r\n setName(category?.name ?? '');\r\n }, [category]);\r\n\r\n async function handleSave(event) {\r\n event.preventDefault();\r\n onError(null);\r\n const response = categoryExists() ? await QuestionController.editCategories(companyId, category.id, name) : await QuestionController.addCategories(companyId, name);\r\n if (response.hasError) {\r\n onError(response.data);\r\n } else {\r\n onDone(response.data);\r\n }\r\n onClose();\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setName(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nCategorysAddEdit.propTypes = {\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onError: PropTypes.func.isRequired,\r\n onDone: PropTypes.func.isRequired,\r\n companyId: PropTypes.string.isRequired,\r\n category: PropTypes.object,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport QuestionController from '../../controllers/QuestionController';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { Add } from '@material-ui/icons';\r\nimport { makeStyles, Grid, Button, TextField, Dialog, DialogContent, DialogActions, DialogTitle } from '@material-ui/core';\r\nimport { SearchCardMini } from '../../components/Common/SearchCardMini';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { LoadingOverlay } from '../../components/Common/LoadingOverlay';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport ComplianceCategoryAddEdit from './ComplianceCategoryAddEdit.js';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n wrapper: {\r\n padding: '16px 32px',\r\n [theme.breakpoints.down('xs')]: {\r\n padding: 16,\r\n },\r\n },\r\n topArea: {\r\n paddingBottom: 8,\r\n '& .MuiButtonBase-root': {\r\n height: '100%',\r\n },\r\n },\r\n}));\r\n\r\nfunction ComplianceCategory(props) {\r\n const { Auth, PushHistory } = props;\r\n const [category, setCategory] = React.useState([]);\r\n const [nameSearch, setNameSearch] = React.useState('');\r\n const [deleteRef, setDeleteRef] = React.useState(null);\r\n const [addEditRef, setAddEditRef] = React.useState(null);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warning, setWarning] = React.useState(null);\r\n const [loading, setLoading] = React.useState(true);\r\n const classes = useStyles();\r\n\r\n const loadCategory = React.useCallback(async () => {\r\n setLoading(true);\r\n const response = await QuestionController.getCategories(Auth.companyId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setCategory(response.data);\r\n }\r\n setLoading(false);\r\n }, [Auth]);\r\n\r\n // init & auth check\r\n React.useEffect(() => {\r\n // ensure user is signed in\r\n const { isAuthenticated, isLoggingIn } = Auth;\r\n if (!isAuthenticated && !isLoggingIn) {\r\n setRedirectUrl('/Login');\r\n }\r\n // fetch user groups for inital render\r\n async function init() {\r\n await loadCategory();\r\n }\r\n init();\r\n }, [Auth, loadCategory]);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (!isNullOrUndefined(redirectUrl)) {\r\n PushHistory(redirectUrl);\r\n }\r\n }, [redirectUrl, PushHistory]);\r\n\r\n function handleUpdateCategory(edited) {\r\n const { id } = edited;\r\n const exists = !isNullOrUndefined(category.filter(e => e.id === id)[0]);\r\n if (exists) {\r\n setCategory(category.map(e => (e.id === id ? edited : e)));\r\n } else {\r\n setCategory([...category, edited]);\r\n }\r\n }\r\n\r\n async function handleDeleteCategory() {\r\n setLoading(true);\r\n setWarning(null);\r\n const { id } = deleteRef;\r\n const response = await QuestionController.removeCategories(Auth.companyId, id);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setCategory(category.filter(e => e.id !== id));\r\n }\r\n setDeleteRef(null);\r\n setLoading(false);\r\n }\r\n\r\n function handleInput(event) {\r\n const { value, name } = event.target;\r\n switch (name) {\r\n case 'name':\r\n setNameSearch(value);\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n function buildTopArea() {\r\n return (\r\n \r\n
\r\n ) : null}\r\n\r\n \r\n
\r\n {buildAssessmentPane()}
\r\n \r\n setAddEditRef(null)}\r\n onError={setWarning}\r\n onDone={handleUpdateCategory}\r\n category={addEditRef}\r\n companyId={Auth.companyId}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ComplianceCategory);\r\n\r\nComplianceCategory.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n};\r\n","import React from 'react';\r\nimport SentiniLogo from '../../images/fathom-final.png';\r\nimport BridgeImage from '../../images/bridge.png';\r\nimport AppStore from '../../images/app-store.png';\r\nimport GooglePlay from '../../images/google-play.png';\r\nimport PropTypes from 'prop-types';\r\nimport queryString from 'query-string';\r\nimport UserController from '../../controllers/UserController';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { TextField, Button, Grid, Container, FormControlLabel, Checkbox, makeStyles, Typography } from '@material-ui/core';\r\nimport { checkPassword } from '../../helpers/Utils';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport { LogIn } from '../../stores/Actions/Authentication';\r\nimport { AuthLayout } from '../../components/Auth/AuthLayout';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n formRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n logo: {\r\n marginBottom: 32,\r\n maxWidth: 300,\r\n },\r\n storeLink: {\r\n display: 'inline-block',\r\n width: '50%',\r\n '& img': {\r\n WebkitBoxShadow: '0px 0px 2px 0px rgba(0,0,0,0.6)',\r\n boxShadow: '0px 0px 2px 0px rgba(0,0,0,0.6)',\r\n borderRadius: 12,\r\n maxWidth: 160,\r\n margin: 6,\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n width: '100%',\r\n },\r\n },\r\n}));\r\n\r\nfunction Register(props) {\r\n const { userName, token } = queryString.parse(props.location.search);\r\n const [password, setPassword] = React.useState('');\r\n const [passwordConfirmation, setPasswordConfirmation] = React.useState('');\r\n const [acceptsTerms, setAcceptsTerms] = React.useState(false);\r\n const [passwordRequirements, setPasswordRequirements] = React.useState(null);\r\n const [passwordErrors, setPasswordErrors] = React.useState([]);\r\n const [submitting, setSubmitting] = React.useState(false);\r\n const [warningText, setWarningText] = React.useState(null);\r\n const [completeRegistration, setCompleteRegistration] = React.useState(false);\r\n const classes = useStyles();\r\n\r\n // initialise\r\n React.useEffect(() => {\r\n async function init() {\r\n const pwordReqResponse = await UserController.getPasswordRequirements();\r\n if (!pwordReqResponse.hasError) {\r\n setPasswordRequirements(pwordReqResponse.data);\r\n } else {\r\n setWarningText('Failed to fetch password requirements');\r\n }\r\n }\r\n init();\r\n }, []);\r\n\r\n async function handleSubmit(event) {\r\n event.preventDefault();\r\n setSubmitting(true);\r\n setWarningText(null);\r\n\r\n if (!acceptsTerms) {\r\n setWarningText('You must confirm you have read and agree to the Terms of Service and Privacy Policy');\r\n setSubmitting(false);\r\n return;\r\n }\r\n\r\n if (password !== passwordConfirmation) {\r\n setWarningText('Password and confirmation do not match');\r\n setSubmitting(false);\r\n return;\r\n }\r\n\r\n const response = await UserController.registerMagicLink(userName, token, password, false);\r\n if (!response.hasError) {\r\n setCompleteRegistration(true);\r\n } else {\r\n setWarningText(response.data);\r\n setSubmitting(false);\r\n }\r\n }\r\n\r\n function handleInput(event) {\r\n const { name, value, checked } = event.target;\r\n switch (name) {\r\n case 'password':\r\n setPassword(value);\r\n break;\r\n case 'passwordConfirmation':\r\n setPasswordConfirmation(value);\r\n break;\r\n case 'acceptsTerms':\r\n setAcceptsTerms(checked);\r\n break;\r\n default:\r\n return;\r\n }\r\n }\r\n\r\n async function checkPasswordIsValid() {\r\n setPasswordErrors(checkPassword(passwordRequirements, password));\r\n }\r\n\r\n function buildPasswordErrors() {\r\n if (passwordErrors.length === 0) {\r\n return null;\r\n }\r\n return passwordErrors.map((e, i) => (\r\n \r\n
- \r\n {answers.map(e => (\r\n
- {e.title} \r\n ))}\r\n
\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(QuestionsPlainText);\r\n\r\nQuestionsPlainText.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { Box, Collapse, Divider, IconButton, makeStyles, TableCell, TableRow, Typography } from '@material-ui/core';\r\nimport { isNullOrUndefined } from '../../helpers/Utils';\r\nimport { Add, Remove } from '@material-ui/icons';\r\nimport { Colours } from '../../helpers/Colours';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n tableRow: {\r\n '& > *': {\r\n borderBottom: 'none',\r\n },\r\n '&.open': {\r\n backgroundColor: Colours.archived,\r\n },\r\n },\r\n}));\r\n\r\nfunction OverviewTableItem({ mainCells, mainCellLength, childTitle, childContent }) {\r\n const [open, setOpen] = React.useState(false);\r\n const classes = useStyles();\r\n\r\n return (\r\n - {questions.map(buildQuestionItem)}
\r\n \r\n \r\n \r\n {buildTableHead()}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(OverviewQuestions);\r\n\r\nOverviewQuestions.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n location: PropTypes.object,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport queryString from 'query-string';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { makeStyles, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@material-ui/core';\r\nimport { descendingComparator, isNullOrUndefined, scoreToPercentage } from '../../helpers/Utils';\r\nimport { LoadingOverlay } from '../../components/Common/LoadingOverlay';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport ComplianceController from '../../controllers/ComplianceController';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n wrapper: {\r\n maxHeight: '100vh',\r\n },\r\n table: {\r\n maxHeight: '100vh',\r\n '& th': {\r\n fontWeight: 'bold',\r\n },\r\n },\r\n}));\r\n\r\nfunction OverviewAssessments(props) {\r\n const { Auth, PushHistory } = props;\r\n const { shipId } = queryString.parse(props.location.search);\r\n const [assessments, setAssessments] = React.useState([]);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warning, setWarning] = React.useState(null);\r\n const [loading, setLoading] = React.useState(true);\r\n //Sorting\r\n const [orderRow, setOrderRow] = React.useState('totalAnswered');\r\n const [orderDirection, setOrderDirection] = React.useState('desc');\r\n\r\n const classes = useStyles();\r\n\r\n const loadAssessmentOverview = React.useCallback(async () => {\r\n const response = await ComplianceController.getAssessmentOverview(Auth.companyId, shipId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setAssessments(response.data);\r\n }\r\n }, [Auth, shipId]);\r\n\r\n // init & auth check\r\n React.useEffect(() => {\r\n // ensure user is signed in\r\n const { isAuthenticated, isLoggingIn } = Auth;\r\n if (!isAuthenticated && !isLoggingIn) {\r\n setRedirectUrl('/Login');\r\n }\r\n // fetch ships for inital render\r\n async function init() {\r\n await loadAssessmentOverview();\r\n }\r\n setLoading(true);\r\n init().then(() => setLoading(false));\r\n }, [Auth, loadAssessmentOverview]);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (!isNullOrUndefined(redirectUrl)) {\r\n PushHistory(redirectUrl);\r\n }\r\n }, [redirectUrl, PushHistory]);\r\n\r\n const handelSortChange = React.useCallback(\r\n newSort => {\r\n if (newSort === orderRow) {\r\n if (orderDirection === 'desc') {\r\n setOrderDirection('asc');\r\n } else {\r\n setOrderDirection('desc');\r\n }\r\n return;\r\n }\r\n setOrderRow(newSort);\r\n setOrderDirection('desc');\r\n },\r\n [orderRow, orderDirection, setOrderDirection, setOrderRow]\r\n );\r\n\r\n function buildTableHead() {\r\n return (\r\n \r\n \r\n \r\n \r\n {buildTableHead()}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(OverviewAssessments);\r\n\r\nOverviewAssessments.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n location: PropTypes.object,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport queryString from 'query-string';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'connected-react-router';\r\nimport { makeStyles, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@material-ui/core';\r\nimport { descendingComparator, isNullOrUndefined, scoreToPercentage } from '../../helpers/Utils';\r\nimport { LoadingOverlay } from '../../components/Common/LoadingOverlay';\r\nimport { Alert } from '../../components/Common/Alert';\r\nimport ComplianceController from '../../controllers/ComplianceController';\r\nimport UserGroupController from '../../controllers/UserGroupController';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n wrapper: {\r\n maxHeight: '100vh',\r\n },\r\n table: {\r\n maxHeight: '100vh',\r\n '& th': {\r\n fontWeight: 'bold',\r\n },\r\n },\r\n}));\r\n\r\nfunction OverviewUserGroups(props) {\r\n const { Auth, PushHistory } = props;\r\n const { shipId } = queryString.parse(props.location.search);\r\n const [userGroupStats, setUserGroupStats] = React.useState([]);\r\n const [userGroups, setUserGroups] = React.useState([]);\r\n const [redirectUrl, setRedirectUrl] = React.useState(null);\r\n const [warning, setWarning] = React.useState(null);\r\n const [loading, setLoading] = React.useState(true);\r\n //Sorting\r\n const [orderRow, setOrderRow] = React.useState('totalAnswered');\r\n const [orderDirection, setOrderDirection] = React.useState('desc');\r\n const classes = useStyles();\r\n\r\n const loadUserGroupOverview = React.useCallback(async () => {\r\n const response = await ComplianceController.getUserGroupsOverview(Auth.companyId, shipId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setUserGroupStats(response.data);\r\n }\r\n }, [Auth, shipId]);\r\n\r\n const loadUserGroups = React.useCallback(async () => {\r\n const response = await UserGroupController.getUserGroups(Auth.companyId);\r\n if (response.hasError) {\r\n setWarning(response.data);\r\n } else {\r\n setUserGroups(response.data);\r\n }\r\n }, [Auth]);\r\n\r\n // init & auth check\r\n React.useEffect(() => {\r\n // ensure user is signed in\r\n const { isAuthenticated, isLoggingIn } = Auth;\r\n if (!isAuthenticated && !isLoggingIn) {\r\n setRedirectUrl('/Login');\r\n }\r\n // fetch ships for inital render\r\n async function init() {\r\n await Promise.all([loadUserGroupOverview(), loadUserGroups()]);\r\n }\r\n setLoading(true);\r\n init().then(() => setLoading(false));\r\n }, [Auth, loadUserGroupOverview, loadUserGroups]);\r\n\r\n // redirect\r\n React.useEffect(() => {\r\n if (!isNullOrUndefined(redirectUrl)) {\r\n PushHistory(redirectUrl);\r\n }\r\n }, [redirectUrl, PushHistory]);\r\n\r\n const handelSortChange = React.useCallback(\r\n newSort => {\r\n if (newSort === orderRow) {\r\n if (orderDirection === 'desc') {\r\n setOrderDirection('asc');\r\n } else {\r\n setOrderDirection('desc');\r\n }\r\n return;\r\n }\r\n setOrderRow(newSort);\r\n setOrderDirection('desc');\r\n },\r\n [orderRow, orderDirection, setOrderDirection, setOrderRow]\r\n );\r\n\r\n function getComparator(order, orderBy) {\r\n switch (orderBy) {\r\n case 'title':\r\n return order === 'desc' ? (a, b) => titleDescendingComparator(a, b) : (a, b) => -titleDescendingComparator(a, b);\r\n default:\r\n return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);\r\n }\r\n }\r\n\r\n function titleDescendingComparator(a, b) {\r\n const aComp = userGroups.find(e => e.id === a.title)?.name ?? 'No Name';\r\n const bComp = userGroups.find(e => e.id === b.title)?.name ?? 'No Name';\r\n if (bComp < aComp) {\r\n return -1;\r\n }\r\n if (bComp > aComp) {\r\n return 1;\r\n }\r\n return 0;\r\n }\r\n\r\n function buildTableHead() {\r\n return (\r\n \r\n \r\n \r\n \r\n {buildTableHead()}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n Auth: state.Authentication,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n PushHistory: data => dispatch(push(data)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(OverviewUserGroups);\r\n\r\nOverviewUserGroups.propTypes = {\r\n Auth: PropTypes.object,\r\n PushHistory: PropTypes.func,\r\n location: PropTypes.object,\r\n};\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport UserController from '../controllers/UserController';\r\nimport { connect } from 'react-redux';\r\nimport { Route, Switch } from 'react-router';\r\nimport { Layout } from '../domain/Layout/Layout';\r\nimport { LogIn, LogOut } from '../stores/Actions/Authentication';\r\nimport { IndexedDB } from '../helpers/IndexedDB';\r\nimport { isNullOrUndefined } from '../helpers/Utils';\r\nimport { PrivateRoute } from '../components/Common/PrivateRoute';\r\nimport { Role } from '../helpers/Constants';\r\n\r\n// Pages\r\nimport Login from '../domain/Auth/Login';\r\nimport Logout from '../domain/Auth/Logout';\r\nimport FileManager from '../domain/User/FileManager';\r\nimport Users from '../domain/Users/Users';\r\nimport Profile from '../domain/User/Profile';\r\nimport PasswordChange from '../domain/User/PasswordChange';\r\nimport EmailConfirm from '../domain/User/EmailConfirm';\r\nimport EmailChange from '../domain/User/EmailChange';\r\nimport EmailChangeConfirm from '../domain/User/EmailChangeConfirm';\r\nimport PasswordForgot from '../domain/User/PasswordForgot';\r\nimport PasswordReset from '../domain/User/PasswordReset';\r\nimport TwoFactorManager from '../domain/User/TwoFactorManager';\r\nimport TwoFactorVerify from '../domain/User/TwoFactorVerify';\r\nimport NotFound from '../domain/Error/NotFound';\r\nimport NotificationList from '../domain/User/NotificationList';\r\nimport Dashboard from '../domain/Dashboard/Dashboard';\r\nimport UsersGroups from '../domain/Users/UsersGroups';\r\nimport Fleet from '../domain/Fleet/Fleet';\r\nimport Company from '../domain/Company/Company';\r\nimport Compliance from '../domain/Compliance/Compliance';\r\nimport ComplianceCategory from '../domain/Compliance/ComplianceCategory';\r\nimport Register from '../domain/Auth/Register';\r\nimport NoAccess from '../domain/Auth/NoAccess';\r\nimport QuestionsPlainText from '../domain/Compliance/QuestionsPlainText';\r\nimport OverviewQuestions from '../domain/Dashboard/OverviewQuestions';\r\nimport OverviewAssessments from '../domain/Dashboard/OverviewAssessments';\r\nimport OverviewUserGroups from '../domain/Dashboard/OverviewUserGroups';\r\n\r\nclass App extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.initTokenStore(props);\r\n }\r\n\r\n initTokenStore = async props => {\r\n // initialise local data store\r\n const init = await IndexedDB.init();\r\n if (init.hasError) {\r\n console.warn(init.data);\r\n return;\r\n }\r\n // check if existing token is valid\r\n if (await UserController.hasTokenExpired()) {\r\n props.LogOut();\r\n return;\r\n }\r\n // check for existing token\r\n const userData = await UserController.fetchCachedUserData();\r\n if (userData.hasError) {\r\n console.warn(userData.data);\r\n props.LogOut();\r\n return;\r\n }\r\n // save cached data if any\r\n const { userName, role, companyId, companyRole, shipRoles, id } = userData.data;\r\n if (!isNullOrUndefined(userName)) {\r\n props.LogIn({\r\n userName,\r\n role,\r\n isLoggingIn: false,\r\n isAuthenticated: true,\r\n companyId,\r\n companyRole,\r\n shipRoles,\r\n id,\r\n });\r\n } else {\r\n props.LogOut();\r\n }\r\n };\r\n\r\n render() {\r\n if (this.props.Auth.isLoggingIn) {\r\n return ;\r\n }\r\n return (\r\n