\n {file.name}\n
\n\n {file.name}\n
\n\n \n \n \n setOpenSearch(true)}\n value={search.value}\n onChange={onSearch}\n placeholder=\"Search cases\"\n aria-describedby=\"outlined-weight-helper-text\"\n inputProps={{\n 'aria-label': 'weight',\n }}\n labelWidth={0}\n />\n {loading && setOpenSearch(false)}\n position=\"absolute\"\n width=\"calc(100vw + 14%)\"\n height=\"116.1vh\"\n style={{ top: -20, left: -282, zIndex: 1 }}\n />\n setOpenSearch(false)} />\n \n ) : null}\n \n \n {\n resetNotificationsCount();\n history.push('/notifications');\n }}\n >\n \n \n \n {myUser && myUser.role === 'admin' && (\n <>\n {\n setActive('/settings');\n history.push('/settings');\n }}\n />\n \n )}\n {\n history.push('/profile');\n setActive('/profile');\n }}\n style={{ cursor: 'pointer' }}\n >\n {myUser?.photo ? (\n \n {myUser?.firstName} {myUser?.lastName}\n \n \n \n \n \n \n \n .logo})
\n \n\n \n \n removeAuth()}>\n \n Logout\n \n \n )}\n \n \n \n {open ? (\n \n \n )}\n \n \n \n \n {children}\n \n \n
\n );\n}\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Card, Checkbox, FormControlLabel, Button, Typography, ClickAwayListener, withStyles } from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport CheckIcon from '@material-ui/icons/Check';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(() => ({\n dropdownCard: {\n position: 'absolute',\n top: '100%',\n left: 0,\n zIndex: 9999,\n marginTop: 4,\n width: 250,\n maxHeight: 420,\n overflowY: 'auto',\n padding: '8px 12px',\n boxSizing: 'border-box',\n scrollbarWidth: 'thin',\n scrollbarColor: '#888 transparent',\n },\n}));\n\nconst PermissionsDropdown = ({\n id,\n value,\n onChange,\n options,\n outlined,\n dataTestId,\n withColors = null,\n allowPlaceHolder = true,\n showDefaultValue = true,\n placeholderText,\n disabled,\n hidePlaceholderWhenSelectedValue,\n multiple = false,\n setRolesPermissions,\n module,\n role,\n}) => {\n const classes = useStyles();\n const anchorRef = useRef(null);\n const hiddenInputRef = useRef(null);\n\n const getWrapperStyle = () => {\n if (outlined === 'bordeless') {\n return {\n cursor: disabled ? 'not-allowed' : 'pointer',\n border: 'none',\n borderRadius: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '0 8px',\n backgroundColor: disabled ? '#f0f0f0' : '#fff',\n fontSize: 13,\n color: '#333',\n textTransform: 'capitalize',\n boxSizing: 'border-box',\n };\n }\n\n return {\n cursor: disabled ? 'not-allowed' : 'pointer',\n border: '1px solid rgba(0,0,0,0.23)',\n borderRadius: 4,\n width: '100%',\n height: 40,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '7px 26px 7px 12px',\n backgroundColor: disabled ? '#f0f0f0' : '#fff',\n fontSize: 13,\n color: '#333',\n textTransform: 'capitalize',\n boxSizing: 'border-box',\n };\n };\n /* eslint-disable react-hooks/rules-of-hooks */\n if (multiple) {\n const [open, setOpen] = useState(false);\n\n const initialSelected = Array.isArray(value) ? value : [];\n const [selectedValues, setSelectedValues] = useState(initialSelected);\n\n useEffect(() => {\n if (Array.isArray(options?.obj) && Array.isArray(selectedValues) && selectedValues.length > 0) {\n const disabledSelectedOptions = selectedValues.filter((val) => {\n const option = options.obj.find((opt) => opt.value === val);\n return option && option.disabled;\n });\n\n if (disabledSelectedOptions.length > 0) {\n const newSelection = selectedValues.filter((val) => !disabledSelectedOptions.includes(val));\n setSelectedValues(newSelection);\n\n if (setRolesPermissions && role && module) {\n setRolesPermissions((prev) => ({\n ...prev,\n [role]: {\n ...prev[role],\n [module]: newSelection,\n },\n }));\n }\n }\n }\n }, [options, selectedValues, setRolesPermissions, role, module]);\n\n useEffect(() => {\n if (!hiddenInputRef.current) return;\n const strValue = JSON.stringify(selectedValues);\n hiddenInputRef.current.value = strValue;\n const event = new Event('input', { bubbles: true });\n hiddenInputRef.current.dispatchEvent(event);\n }, [selectedValues]);\n\n const handleToggle = () => {\n if (!disabled) setOpen((prev) => !prev);\n };\n\n const handleClickAway = (event) => {\n if (anchorRef.current && !anchorRef.current.contains(event.target)) {\n setOpen(false);\n }\n };\n\n const handleSelectAll = (checked) => {\n if (checked && Array.isArray(options?.obj)) {\n const enabledValues = options.obj.filter((o) => !o.disabled).map((o) => o.value);\n\n setSelectedValues(enabledValues);\n setRolesPermissions((prev) => {\n return {\n ...prev,\n [role]: {\n ...prev[role],\n [module]: [...enabledValues],\n },\n };\n });\n } else {\n setSelectedValues([]);\n setRolesPermissions((prev) => {\n return {\n ...prev,\n [role]: {\n ...prev[role],\n [module]: [],\n },\n };\n });\n }\n };\n\n const handleOptionChange = (val) => {\n const option = options.obj.find((o) => o.value === val);\n if (option.disabled) return;\n\n if (selectedValues.includes(val)) {\n setSelectedValues(selectedValues.filter((v) => v !== val));\n setRolesPermissions((prev) => {\n return {\n ...prev,\n [role]: {\n ...prev[role],\n [module]: prev[role][module].filter((value) => value !== val),\n },\n };\n });\n } else {\n setSelectedValues([...selectedValues, val]);\n setRolesPermissions((prev) => {\n return {\n ...prev,\n [role]: {\n ...prev[role],\n [module]: [...prev[role][module], val],\n },\n };\n });\n }\n };\n\n const displayText = selectedValues.length === 0 ? '-' : selectedValues.join(', ');\n\n const allSelected =\n Array.isArray(options?.obj) &&\n options.obj.filter((o) => !o.disabled).length ===\n selectedValues.filter((v) => !options.obj.find((o) => o.value === v)?.disabled).length &&\n options.obj.some((o) => !o.disabled);\n\n const textSliced = displayText.length > 40;\n return (\n - \n {keys\n ?.filter((t) => !t.includes('usage' || 'permissions'))\n .filter((module) => {\n if (permissions[module] !== 0) {\n return module;\n }\n })\n .map((module, i) => {\n const icon = onRenderModuleIcon(module);\n if (!icon) return null;\n\n if (module === 'dashboard') {\n return (\n
\n \n \n
\n ) : (\n \n \n \n \n {Array.isArray(options?.obj) && options.obj.length > 0 && (\n handleSelectAll(e.target.checked)}\n />\n }\n label={Select all }\n style={{ marginLeft: 0 }}\n />\n )}\n {Array.isArray(options?.obj) &&\n options.obj.map((option, index) => (\n handleOptionChange(option.value)}\n disabled={option?.disabled}\n />\n }\n label={\n \n {option?.text}\n \n }\n style={{\n marginLeft: 0,\n paddingLeft: '20px',\n opacity: option.disabled ? 0.5 : 1,\n }}\n />\n ))}\n \n \n )}\n
\n );\n }\n\n const [open, setOpen] = useState(false);\n const [singleValue, setSingleValue] = useState(value);\n\n useEffect(() => {\n if (!hiddenInputRef.current) return;\n hiddenInputRef.current.value = singleValue;\n const event = new Event('input', { bubbles: true });\n hiddenInputRef.current.dispatchEvent(event);\n }, [singleValue]);\n\n const handleToggle = () => {\n if (!disabled) setOpen((prev) => !prev);\n };\n\n const handleClickAway = (event) => {\n if (anchorRef.current && !anchorRef.current.contains(event.target)) {\n setOpen(false);\n }\n };\n\n const singleOptions = Array.isArray(options) ? options.map((o) => ({ value: o, text: o })) : options?.obj || [];\n\n let displayText = '-';\n\n if ((singleValue === null || singleValue === undefined || singleValue === '') && allowPlaceHolder) {\n displayText = placeholderText || '-';\n } else {\n const found = singleOptions.find((opt) => String(opt.value) === String(singleValue));\n displayText = found?.text || '-';\n }\n\n if (hidePlaceholderWhenSelectedValue && singleValue !== null && singleValue !== undefined && singleValue !== '') {\n const found = singleOptions.find((opt) => String(opt.value) === String(singleValue));\n displayText = found?.text || '-';\n }\n\n const handleSelectOption = (val) => {\n setSingleValue(val);\n setOpen(false);\n onChange({ target: { value: val } });\n };\n\n return (\n \n {displayText.slice(0, 40) + (textSliced ? '...' : '')}\n
\n {open && !disabled && (\n \n setOpen(false)}\n style={{\n marginTop: 8,\n textTransform: 'none',\n fontSize: 13,\n padding: '4px 12px',\n }}\n >\n Done\n \n
\n \n \n\n \n \n {singleOptions.map((option, index) => {\n const isSelected = String(option.value) === String(singleValue);\n return (\n handleSelectOption(option.value)}\n >\n {option.text} \n {isSelected &&
\n );\n })}\n \n \n )}\n \n );\n};\n\nexport default PermissionsDropdown;\n","import React, { useContext, useEffect, useState } from 'react';\nimport {\n Box,\n Button,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle,\n Typography,\n TextField,\n Paper,\n makeStyles,\n Select,\n MenuItem,\n FormControl,\n InputLabel,\n Divider,\n RadioGroup,\n FormControlLabel,\n Radio,\n IconButton,\n} from '@material-ui/core';\nimport { toast } from '../../components/Notification';\nimport DashButton from '../../components/DashButton';\nimport { Context } from '../../Context';\nimport useOrganization from '../../hooks/useOrganization';\nimport { onUpdateOrganization, createNewPermission, deletePermission } from '../../services/unarmed';\nimport TrashIcon from '../../assets/trash.png';\nimport PermissionsDropdown from '../../components/PermissionsDropdown';\n\nconst useStyles = makeStyles(() => ({\n button: {\n background: '#1F63FF',\n textTransform: 'capitalize',\n color: '#fff',\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 14,\n },\n marginTop: 10,\n marginBottom: 10,\n },\n container: {\n padding: 20,\n width: '100%',\n },\n dialog: {\n minWidth: '750px',\n minHeight: '650px',\n },\n sectionTitle: {\n fontSize: 14,\n marginBottom: 10,\n fontWeight: 'bold',\n },\n roleRow: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: 8,\n },\n radio: {\n color: '#A9A9A9',\n '&.Mui-checked': {\n color: '#1F63FF',\n },\n },\n headerCell: {\n position: 'relative',\n '&:hover $trashIconButton': {\n opacity: 1,\n },\n },\n trashIconButton: {\n opacity: 0,\n transition: 'opacity 0.3s ease',\n position: 'absolute',\n right: '10px',\n top: '50%',\n transform: 'translateY(-50%)',\n padding: 0,\n color: '#000',\n },\n trashIconImage: {\n width: '12px',\n height: '12px',\n filter: 'grayscale(100%)',\n opacity: 0.6,\n },\n}));\n\nexport const permissionsOptionsForCases = [\n { value: 0, text: 'Disabled' },\n { value: 1, text: 'Read Only' },\n { value: 2, text: 'Write Access' },\n];\n\nconst permissionsOptions = [\n { value: 0, text: 'Disabled' },\n { value: 2, text: 'Write Access' },\n];\n\nconst permissionsOptionsForTwoOptions = [\n { value: 0, text: 'Disable' },\n { value: 2, text: 'Enable' },\n];\n\nconst Permissions = () => {\n const classes = useStyles();\n const { organization } = useOrganization();\n const [loading, setLoading] = useState('idle');\n const { setOrganization, setActive } = useContext(Context);\n const [modules, setModules] = useState([]);\n const [rolesPermissions, setRolesPermissions] = useState({});\n const [copyRoleSetting, setCopyRoleSetting] = useState('');\n const [roleName, setRoleName] = useState('');\n const [roles, setRoles] = useState([]);\n const [formTypesOptions, setFormTypesOptions] = useState([]);\n const [createdRoles, setCreatedRoles] = useState([]);\n const [permissions, setPermissions] = useState(\n modules.reduce((acc, module) => {\n acc[module] = { disable: false, readOnly: false, write: false };\n return acc;\n }, {})\n );\n const [roleMapping, setRoleMapping] = useState({});\n const [isModalOpen, setModalOpen] = useState(false);\n const underlineColor = '#4285F4';\n const handleOpenModal = () => setModalOpen(true);\n const handleCloseModal = () => {\n setModalOpen(false);\n setCopyRoleSetting('');\n setRoleName('');\n\n setPermissions(\n modules.reduce((acc, module) => {\n acc[module] = 0;\n return acc;\n }, {})\n );\n\n setRolesPermissions((prev) => ({\n ...prev,\n newRole: {},\n }));\n };\n\n const formatRoleName = (roleName) =>\n roleName\n .replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/_/g, ' ')\n .replace(/\\b\\w/g, (char) => char.toUpperCase());\n\n useEffect(() => {\n setActive('/permissions');\n\n if (organization) {\n const normalizedPermissions = {};\n const mapping = {};\n\n Object.keys(organization.permissions).forEach((role) => {\n normalizedPermissions[role] = organization.permissions[role];\n mapping[formatRoleName(role)] = role;\n });\n setRolesPermissions(normalizedPermissions);\n setRoleMapping(mapping);\n setRoles(Object.keys(mapping));\n setCreatedRoles(Object.keys(normalizedPermissions));\n }\n }, [organization, setActive]);\n\n const handleCreateRole = () => {\n const formattedRoleName = toCamelCase(roleName);\n const fullPermissionValue = { ...defaultPermissions, ...permissions };\n\n const payload = {\n permissionKey: formattedRoleName,\n permissionValue: fullPermissionValue,\n };\n\n createNewPermission(payload)\n .then((response) => {\n toast.success(`${roleName} role created successfully!`);\n setRolesPermissions((prev) => ({\n ...prev,\n [payload.permissionKey]: payload.permissionValue,\n }));\n setCreatedRoles((prev) => [...prev, payload.permissionKey]);\n setRoles((prev) => [...prev, roleName]);\n handleCloseModal();\n })\n .catch((error) => {\n toast.error(error.response?.data?.message || 'Failed to create role');\n });\n };\n\n const toCamelCase = (str) =>\n str\n .toLowerCase()\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase()))\n .replace(/\\s+/g, '');\n\n const defaultPermissions = {\n dashboard: 0,\n cases: 0,\n allegations: 0,\n officers: 0,\n users: 0,\n usage: 0,\n import: 0,\n activity: 0,\n data: 0,\n insights: 0,\n forms: 0,\n projects: 0,\n contacts: 0,\n formData: 0,\n permissions: 0,\n canDeleteNotesCases: 0,\n canDeleteNotesContacts: 0,\n canDeleteNotesOfficers: 0,\n canDeleteNotesProjects: 0,\n mergeOfficers: 0,\n };\n\n const readOnlyModules = ['cases', 'formData'];\n\n const handleDeletePermission = (role) => {\n const formatRole = toCamelCase(role);\n\n deletePermission({ permissionKey: formatRole })\n .then(() => {\n setRolesPermissions((prev) => {\n const updatedRoles = { ...prev };\n delete updatedRoles[formatRole];\n return updatedRoles;\n });\n const indexToRemove = roles.findIndex((role1) => role1 === formatRole);\n const newRoles = [...roles];\n newRoles.splice(indexToRemove, 1);\n setRoles(newRoles);\n toast.success(`${role} permission deleted successfully!`);\n })\n .catch((error) => {\n console.error('Error deleting permission:', error);\n toast.error(error.response?.data?.message || 'Failed to delete permission');\n });\n };\n\n const handlePermissionChange = (module, level) => {\n setPermissions((prevPermissions) => ({\n ...prevPermissions,\n [module]: level,\n }));\n };\n\n const modulesWithMarginLeft = [\n 'formData',\n 'seeOnlyAssigned',\n 'seeOnlyTypes',\n 'canDeleteNotesCases',\n 'canDeleteNotesContacts',\n 'canDeleteNotesOfficers',\n 'canDeleteNotesProjects',\n 'mergeOfficers',\n ];\n\n const dualPermissionsModules = [\n 'canDeleteNotesCases',\n 'canDeleteNotesContacts',\n 'canDeleteNotesOfficers',\n 'canDeleteNotesProjects',\n 'mergeOfficers',\n ];\n\n const multiChoiceFormTypeModule = ['seeOnlyTypes', 'seeOnlyAssigned'];\n\n const modulesLabels = {\n formData: 'Edit case details',\n seeOnlyAssigned: 'See Only Assigned',\n seeOnlyTypes: 'See Only Types',\n canDeleteNotesCases: 'Can Delete Notes',\n canDeleteNotesContacts: 'Can Delete Notes',\n canDeleteNotesOfficers: 'Can Delete Notes',\n canDeleteNotesProjects: 'Can Delete Notes',\n mergeOfficers: 'Merge Officers',\n };\n\n const formTypeDefault = {\n COMPLAINT: 'Complaint',\n COMPLIMENT: 'Compliment',\n RECOMMENDATION: 'Recommendation',\n REVIEW: 'Review',\n };\n\n useEffect(() => {\n if (organization) {\n const formTypes = organization.formTypes.map((formType) => {\n if (formTypeDefault[formType]) {\n return {\n value: formType,\n text: formTypeDefault[formType],\n };\n }\n return {\n value: formType[0],\n text: formType[1],\n };\n });\n\n setFormTypesOptions(formTypes);\n }\n }, [organization]);\n\n useEffect(() => {\n if (organization) {\n const dashboardModules = {\n ...organization?.features?.dashboard,\n formData: { enabled: true },\n seeOnlyTypes: { enabled: true },\n seeOnlyAssigned: { enabled: true },\n canDeleteNotesCases: { enabled: true },\n canDeleteNotesContacts: { enabled: true },\n canDeleteNotesOfficers: { enabled: true },\n canDeleteNotesProjects: { enabled: true },\n mergeOfficers: { enabled: true },\n };\n const modulesKeys = [\n 'dashboard',\n 'cases',\n 'formData',\n 'seeOnlyTypes',\n 'seeOnlyAssigned',\n 'canDeleteNotesCases',\n 'contacts',\n 'canDeleteNotesContacts',\n 'allegations',\n 'officers',\n 'canDeleteNotesOfficers',\n 'mergeOfficers',\n 'projects',\n 'canDeleteNotesProjects',\n 'data',\n 'insights',\n 'users',\n 'forms',\n 'permissions',\n 'import',\n 'activity',\n ];\n\n const permissionModules = [];\n\n for (const key of modulesKeys) {\n if (dashboardModules[key]?.enabled) {\n permissionModules.push(key);\n }\n }\n\n setModules(permissionModules.slice());\n }\n }, [organization]);\n\n const onChangeSelectHandler = (e, role, module) => {\n const newValue = e && e.target && e.target.value !== undefined ? e.target.value : e;\n setRolesPermissions((prev) => ({\n ...prev,\n [role]: {\n ...prev[role],\n [module]: parseInt(newValue, 10),\n },\n }));\n };\n\n const onSavePermissions = () => {\n const data = { permissions: rolesPermissions };\n setLoading('pending');\n\n onUpdateOrganization(organization?._id, data)\n .then((res) => {\n toast.success('Permissions updated successfully');\n setLoading('resolved');\n setOrganization(res.data);\n })\n .catch((err) => {\n toast.error(err.response.data.message || 'Failed to update permissions');\n setLoading('rejected');\n });\n };\n\n const handleCopyRoleSettings = (selectedRole) => {\n if (selectedRole) {\n const normalizedRole = selectedRole.toLowerCase();\n const selectedRolePermissions = rolesPermissions[normalizedRole] || {};\n\n setPermissions(\n modules.reduce((acc, module) => {\n acc[module] = selectedRolePermissions[module] || 0;\n return acc;\n }, {})\n );\n } else {\n setPermissions(\n modules.reduce((acc, module) => {\n acc[module] = 0;\n return acc;\n }, {})\n );\n }\n };\n\n const minWidth = 166.705 * Object.keys(rolesPermissions).length;\n\n const getPermissionsOptions = (module) => {\n if (module === 'formData') {\n return permissionsOptionsForCases;\n }\n if (dualPermissionsModules.includes(module)) {\n return permissionsOptionsForTwoOptions;\n }\n\n if (multiChoiceFormTypeModule.includes(module)) {\n return formTypesOptions;\n }\n return permissionsOptions;\n };\n\n const getModifiedOptionsForSeeOnlyAssigned = (role) => {\n if (!role || !rolesPermissions[role]) return formTypesOptions;\n\n const selectedTypesOptions = Array.isArray(rolesPermissions[role]['seeOnlyTypes'])\n ? rolesPermissions[role]['seeOnlyTypes']\n : [];\n\n return formTypesOptions.map((option) => ({\n ...option,\n disabled: !selectedTypesOptions.includes(option.value),\n }));\n };\n\n const getOptionsForDropdown = (module, role) => {\n if (module === 'seeOnlyAssigned') {\n return { obj: getModifiedOptionsForSeeOnlyAssigned(role) };\n }\n\n return { obj: getPermissionsOptions(module) };\n };\n\n const isMultiOptions = (module) => {\n if (multiChoiceFormTypeModule.includes(module)) {\n return true;\n }\n return false;\n };\n\n return (\n \n {displayText}\n
\n\n {open && !disabled && (\n \n {logs.map((log) => {\n let renderLog = null;\n\n if (log?.type === 'CONTACT_COMMENT_OR_ATTACHMENT_ADDED') {\n const comment = log?.data?.comment;\n const files = log?.data?.files;\n\n const hasFiles = files.length > 0;\n const hasComment = !!comment;\n const hasBoth = hasFiles && hasComment;\n renderLog = (\n <>\n
\n\n {files.map((file, index) => {\n const showPreview = !file?.archivedDate;\n return (\n <>\n \n \n {showPreview ? (\n {file.name} \n \n \n \n )}\n \n );\n }\n\n if (log?.type === 'CONTACT_CREATED') {\n renderLog = (\n <>\n
\n before:\n
\n
\n\n {renderLog} \n \n );\n })}\n
\n );\n};\n\nContactHistory.propTypes = {\n id: PropTypes.number,\n};\n\nexport default ContactHistory;\n","/* eslint-disable no-nested-ternary */\nimport { Box, makeStyles, Typography, Tooltip } from '@material-ui/core';\nimport React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Link, useHistory } from 'react-router-dom';\nimport moment from 'moment';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { downloadImage } from '../../utils/libs';\nimport { LogCaseChange, PreviewImg } from '../../components/Log';\nimport { permissionsOptionsForCases } from '../Permissions/Permissions';\nimport TimeLineItem from './TimeLineItem';\nimport { validateIsoDate } from '../../utils';\nimport LogIcon from '../../components/LogIcon';\nimport HTMLContent from '../../components/HTMLContent';\nimport CaseTaskUpdateItem from './CaseTaskUpdateItem';\nimport CarouselModal from '../../components/CarouselModal';\nimport Tag from '../../components/Tag';\nimport { contactFieldsNames, parseChangeValue } from '../Contacts/ContactHistory';\nimport Tags from '../../components/Tags';\nimport TimeLineItemNotes from './TimeLineItemNotes';\n\nconst CasesInfoText = ({ casesInfo = [] }) => {\n const casesList = casesInfo?.map((caseInfo) => caseInfo?.entityId || caseInfo.code)?.slice(0, 2);\n const casesLength = casesInfo?.length;\n\n if (casesLength > 2) {\n return (\n <>\n {casesList.join(',')} and {casesLength - 2} more\n \n );\n }\n\n return {casesList.join(',')};\n};\n\nCasesInfoText.propTypes = {\n casesInfo: PropTypes.array,\n};\n\nconst ProjectsInfoText = ({ projectsInfo = [] }) => {\n const projectsList = projectsInfo?.map((projectInfo) => projectInfo?.entityId)?.slice(0, 2);\n const projectsLength = projectsInfo?.length;\n\n if (projectsLength > 2) {\n return (\n <>\n {projectsList.join(',')} and {projectsLength - 2} more\n \n );\n }\n\n return {projectsList.join(',')};\n};\n\nProjectsInfoText.propTypes = {\n casesInfo: PropTypes.array,\n};\n\nconst useStyles = makeStyles((theme) => ({\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n imgModal: {\n objectFit: 'contain',\n maxWidth: 600,\n maxHeight: 400,\n },\n title: {\n fontSize: 16,\n fontWeight: '500',\n textTransform: 'capitalize',\n marginBottom: 22,\n },\n itemsContainer: {\n width: '100%',\n background: '#fff',\n borderRadius: 5,\n boxShadow: '0 3px 6px #00000005',\n padding: '20px 40px',\n },\n texxt: {\n fontSize: 14,\n },\n link: {\n display: 'flex',\n position: 'absolute',\n top: 10,\n right: 80,\n cursor: 'pointer',\n padding: 13,\n zIndex: 999999,\n borderRadius: '50%',\n background: '#494949',\n },\n emphasis: {\n color: '#4b7bff',\n fontWeight: '600',\n },\n}));\n\nconst UserInfo = ({ user }) => (user?.email ? {user?.email} : 'A user');\n\nUserInfo.propTypes = {\n user: PropTypes.shape({\n email: PropTypes.string.isRequired,\n }),\n};\n\nconst getUserInitials = (user) => {\n if (!user) {\n return '';\n }\n\n return user?.firstName?.[0] || '' + user?.lastName?.[0] || '';\n};\n\nconst stripHTML = (str) => {\n if (!str) return '';\n return str.replace(/<\\/?[^>]+(>|$)/g, '');\n};\n\nconst TimeLine = ({ items = [], title }) => {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n const [filesSelected, setFilesSelected] = React.useState({ files: [], selectedFileIndex: 0 });\n const [loadingOpenFiles, setLoadingOpenFiles] = React.useState([]);\n const history = useHistory();\n\n const convertValueToHTML = (value) => {\n if (Array.isArray(value)) {\n if (value.length) {\n return {value.join(', ')};\n } else {\n return 'an empty value';\n }\n }\n if (typeof value === 'boolean') {\n return {value ? 'Yes' : 'No'};\n }\n if (value === undefined || value === null || value === '') {\n return 'an empty value';\n }\n return value;\n };\n\n const handleOpen = (filesOp) => {\n setOpen(true);\n const filesToOpen = filesOp.filter((flop) => flop.mimetype.includes('image') || flop.mimetype.includes('video'));\n setFilesSelected({ files: filesToOpen, selectedFileIndex: 0 });\n setLoadingOpenFiles(\n filesToOpen.map(() => ({\n loading: false,\n }))\n );\n };\n\n const handleClickEvents = (fl, files) => ({\n onDownload: () => downloadImage(fl.download_url, fl.name),\n onClick: () => handleOpen(files),\n });\n\n const stripHTML = (str) => {\n if (!str) return '';\n const plainText = str.replace(/<\\/?[^>]+(>|$)/g, '');\n return plainText.length\n };\n\n const getActionLabel = (key) => {\n if (key === 'startDateTime') {\n return 'Start Date Time';\n }\n if (key === 'endDateTime') {\n return 'End Date Time';\n }\n\n if (key === 'notes') {\n return 'Notes';\n }\n\n if (key === 'description') {\n return 'Description';\n }\n if (key === 'status') {\n return 'Status';\n }\n if (key === 'submittedDate') {\n return 'Submitted Date';\n }\n if (key === 'responseDate') {\n return 'Response Date';\n }\n if (key === 'bradyList') {\n return 'Brady list';\n }\n if (key === 'firstName') {\n return 'First name';\n }\n if (key === 'lastName') {\n return 'Last name';\n }\n if (key === 'email') {\n return 'Email';\n }\n if (key === 'raceEthnicity') {\n return 'Race/Ethnicity';\n }\n if (key === 'race') {\n return 'Race';\n }\n if (key === 'ethnicity') {\n return 'Ethnicity';\n }\n if (key === 'gender') {\n return 'Gender';\n }\n if (key === 'phoneNumber') {\n return 'Phone number';\n }\n if (key === 'photo') {\n return 'a profile picture';\n }\n };\n\n const getStatusTitle = (status) => {\n if (status) {\n return status;\n }\n };\n\n const renderText = (item) => {\n const currentTime = moment();\n\n const getDate = () =>\n `${moment(item.createdAt).format('MM/DD/YYYY')} at ${moment(item.createdAt).format('hh:mm A')}`;\n\n const getTooltipDate = () => {\n if (moment(item.createdAt).format('MM-DD-YYYY') === currentTime.format('MM-DD-YYYY')) {\n return `${moment(item.createdAt).fromNow()}`;\n }\n const days = currentTime.endOf('day').diff(moment(item.createdAt).endOf('day'), 'days');\n return `${days} Day${days === 1 ? '' : 's'} ago`;\n };\n\n const user = item?.data?.user;\n\n if (item.type === 'ADHOC_REPORT_CREATED') {\n return (\n \n
\n {change.oldValue ? (\n <>\n
\n );\n })}\n \n ) : (\n <>\n \n before:\n
\n
\n
\n
\n
\n before:\n
\n
\n
\n
\n
\n {hasFiles ? (\n\n {files?.map((fl, i) => (\n \n \n ) : null}\n
\n \n );\n }\n\n if (item.type === 'PROJECT_NOTE_TAGS_ADDED') {\n return (\n \n
\n {hasFiles ? (\n
\n
\n
\n {item?.data?.changes?.length > 0 ? (\n <>\n {item?.data?.changes\n // ?.filter((change) => change?.newValue)\n ?.map((change) => (\n
\n \n changed {change?.fieldName}
\n ))}\n \n ) : (\n <>Without changes\n )}\n \n
\n
\n
\n
\n
- \n {showColumns.map((column) => (\n
- \n {hideColumns.map((column) => (\n
\n
\n );\n};\n\nexport default Login;\n","import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { Page, Text, View, Image, Document, StyleSheet, PDFViewer, Font } from '@react-pdf/renderer';\nimport { Box } from '@material-ui/core';\nimport moment, { version } from 'moment';\nimport { useTranslation } from 'react-i18next';\nimport { useParams, useLocation } from 'react-router-dom';\n\nimport useTrackForm from '../../hooks/useTrackForm';\nimport LoadingScreen from '../../components/LoadingScreen';\nimport { getAboutUsValue } from './AditionalDetails';\nimport useOrganization from '../../hooks/useOrganization';\nimport formatTxt from '../../utils/formatText';\nimport { getDemographicsLabel, getTypeText } from './FormTypeJson';\nimport { formatPhoneNumber, checkValueType } from '../../utils';\n\nfunction useQuery() {\n const { search } = useLocation();\n\n return React.useMemo(() => new URLSearchParams(search), [search]);\n}\n\nFont.register({\n family: 'Roboto',\n src: 'https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-regular-webfont.ttf',\n});\nFont.register({\n family: 'Roboto-bold',\n src: 'https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-bold-webfont.ttf',\n});\n\n// Create styles\nconst styles = StyleSheet.create({\n body: {\n paddingTop: 35,\n paddingBottom: 65,\n height: '100%',\n paddingHorizontal: 35,\n backgroundColor: '#fff',\n },\n title: {\n fontSize: 11,\n textAlign: 'left',\n },\n titleDisplayName: {\n fontSize: 14,\n fontWeight: 'bold',\n textAlign: 'left',\n },\n tag: {\n padding: 10,\n fontSize: 10,\n width: '100px',\n textAlign: 'center',\n backgroundColor: '#EDEEEF',\n textTransform: 'uppercase',\n borderRadius: 5,\n },\n author: {\n fontSize: 10,\n textAlign: 'left',\n color: '#585858',\n },\n subtitle: {\n fontSize: 18,\n },\n text: {\n margin: 12,\n fontSize: 14,\n textAlign: 'justify',\n },\n image: {\n marginVertical: 15,\n marginHorizontal: 100,\n },\n header: {\n fontSize: 12,\n marginBottom: 20,\n textAlign: 'center',\n color: '#fff',\n },\n pageNumber: {\n position: 'absolute',\n fontSize: 12,\n bottom: 30,\n left: 0,\n right: 0,\n textAlign: 'center',\n color: 'grey',\n },\n box: {\n display: 'flex',\n justifyContent: 'space-between',\n flexDirection: 'row',\n alignItems: 'center',\n },\n section: {\n width: '100%',\n marginTop: 20,\n backgroundColor: '#fff',\n borderBottom: '1px solid #ccc',\n borderBottomWidth: 1,\n borderRight: '1px solid #ccc',\n borderRightWidth: 1,\n borderLeft: '1px solid #ccc',\n borderLeftWidth: 1,\n },\n boxSection: {\n borderBottom: '1px solid #ccc',\n borderBottomWidth: 1,\n borderRight: '1px solid #ccc',\n borderRightWidth: 1,\n borderLeft: '1px solid #ccc',\n borderLeftWidth: 1,\n },\n sectionName: {\n fontSize: 12,\n fontWeight: '500',\n color: '#4b7bff',\n },\n link: {\n color: '#4b7bff',\n marginBottom: 10,\n fontSize: 11,\n },\n label: {\n fontSize: 8,\n color: '#585858',\n },\n value: {\n fontSize: 10,\n marginTop: 5,\n fontFamily: 'Roboto',\n },\n description: {\n fontSize: 11,\n marginTop: 7,\n height: '100%',\n },\n viewValue: {\n flexGrow: 1,\n },\n logo: {\n width: 80,\n height: 50,\n objectFit: 'contain',\n marginBottom: 20,\n },\n sectionText: {\n fontWeight: 'bold',\n textAlign: 'center',\n fontSize: 11,\n backgroundColor: 'black',\n color: 'white',\n padding: '5px 10px',\n },\n sectionInput: {\n display: 'flex',\n flexDirection: 'row',\n borderBottom: '1px solid #ccc',\n borderBottomWidth: 1,\n },\n subSection: {\n border: 1,\n borderColor: '#ccc',\n borderTopWidth: 0,\n backgroundColor: '#f2f2f2',\n padding: '5px 10px',\n },\n\n sectionItem: {\n width: '50%',\n padding: '5px 10px',\n\n // borderRight: '1px solid #ccc',\n // borderRightWidth: 1,\n // borderLeft: '1px solid #ccc',\n // borderLeftWidth: 1,\n },\n sectionItemRight: {\n width: '50%',\n padding: '5px 10px',\n\n // borderLeft: '1px solid #ccc',\n // borderLeftWidth: 1,\n },\n sectionItemFull: {\n width: '100%',\n paddingTop: 5,\n paddingBottom: 5,\n paddingHorizontal: 10,\n\n // borderRight: '1px solid #ccc',\n // borderRightWidth: 1,\n // borderLeft: '1px solid #ccc',\n // borderLeftWidth: 1,\n },\n checkBox: {\n width: 10,\n height: 10,\n border: 1,\n borderColor: '#585858',\n marginRight: 5,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n filled: {\n width: 5,\n height: 5,\n backgroundColor: '#585858',\n },\n titles: {\n width: '100%',\n fontWeight: '500',\n fontSize: 14,\n textAlign: 'center',\n marginTop: 10,\n },\n subTitle: {\n width: '100%',\n fontWeight: '400',\n fontSize: 11.5,\n marginLeft: 10,\n marginTop: 10,\n },\n sectionTitle: {\n fontSize: 11.5,\n fontWeight: '700',\n color: '#222',\n },\n componentGeneral: {\n borderBottom: '1px solid #ccc',\n borderBottomWidth: 1,\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n});\n\n// Create Document Component\nconst CasePdf = () => {\n const [loading, setLoading] = useState(true);\n const { id } = useParams();\n const { form } = useTrackForm(id);\n const query = useQuery();\n const { organization } = useOrganization();\n const counter = useRef(null);\n const { t } = useTranslation();\n\n useEffect(() => {\n counter.current = 0;\n }, []);\n\n setTimeout(function () {\n setLoading(false);\n }, 2000);\n\n // const onPrintNumber = (number, type, altNumber) => {\n // if (form?.type === type || form?.originalType === type) {\n // counter.current = number;\n // return number;\n // }\n // counter.current = altNumber;\n // return altNumber;\n // };\n\n const getParentLabel = (component, text) => (\n - \n {showColumns.map((column) => (\n
- \n {hideColumns.map((column) => (\n
{getStatusTitle(row)}
\n\n {row?.statusLog && moment(row?.statusLog?.[row?.status]?.datetime).format('MMMM DD, hh:mm a')}\n
\n\n Are you sure you want to delete? \n \n Cases will be archived for 7 years before being permanently deleted.\n \n \n setOpenModal(false)}>\n CANCEL\n \n \n {loadingDeleteCase ? \n \n
\n \n Continue with import? \n \n We found {errorsFormatted().length} errors. Please note: Sivil cannot import rows with\n errors. Please select cancel to fix errors or import to proceed.\n \n\n \n \n \n \n
\n were found\n \n ) : (\n <>\n No data with the name \"{noDataFoundText}\"
were found\n \n )}\n
| \n {column.name}\n | \n ))}\n
|---|
\n Create Form \n \n Please enter the name and description of the form in the fields below.\n \n \n \n \n {' '}\n Name *\n \n }\n style={{ width: '100%' }}\n value={name.value}\n onChange={name.onChange}\n inputProps={{\n 'data-testid': 'create-form-input-name',\n }}\n />\n \n \n \n {' '}\n Display Name *\n \n }\n style={{ width: '100%' }}\n value={formName.value}\n onChange={formName.onChange}\n inputProps={{\n 'data-testid': 'create-form-input-display-name',\n }}\n />\n \n \n \n {' '}\n Description *\n \n }\n style={{ width: '100%' }}\n value={description.value}\n onChange={description.onChange}\n inputProps={{\n 'data-testid': 'create-form-input-description',\n }}\n />\n \n This description will be visible on the portal when the form is published.\n \n \n \n
\n\n \n \n Type *\n \n \n \n {formTypes.map((_type, index) => (\n \n {Array.isArray(_type) ? _type[1] : _type}\n \n ))}\n \n {type.error}\n \n \n
\n\n setOpen(false)}\n >\n CANCEL\n \n \n {loading ? \n
\n );\n}\n\nCreateForm.propTypes = {\n refreshCallback: PropTypes.func.isRequired,\n setOpen: PropTypes.func.isRequired,\n formTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n","import { Box, Typography, Button, CircularProgress, makeStyles } from '@material-ui/core';\n\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { toast } from '../../components/Notification';\nimport { deleteFormTypes } from '../../services/unarmed';\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n padding: 20,\n },\n title: {\n marginTop: 50,\n },\n button: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n marginRight: 10,\n color: '#fff',\n height: 36,\n width: 30,\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n '&:disabled': {\n background: '#1f63ff61',\n color: '#fff',\n },\n },\n button2: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n color: '#fff',\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 14,\n },\n },\n buttonOutlined: {\n letterSpacing: '1px',\n fontSize: 13,\n fontWeight: '500',\n marginRight: 10,\n width: 'fit-content',\n alignSelf: 'flex-end',\n border: '1px solid transparent',\n color: '#4b7bff',\n '&:hover': {\n background: 'transparent',\n border: '1px solid transparent',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n },\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: '#fff',\n boxShadow: theme.shadows[5],\n padding: 30,\n maxWidth: 600,\n minWidth: 400,\n outline: 0,\n },\n}));\n\n/**\n * DeleteForms component to confirm and delete selected form types.\n *\n * @component\n * @example\n * const selected = [1, 2, 3];\n * const setOpen = (open) => {};\n * const setSelected = (selected) => {};\n * const refreshCallBack = () => {};\n * return (\n * \n
\n
\n Are you sure you want to delete? \n This action can’t be undone! \n \n setOpen(false)}\n >\n CANCEL\n \n \n {loading ? \n
\n );\n}\n\nDeleteForms.propTypes = {\n selected: PropTypes.arrayOf(PropTypes.number).isRequired,\n setOpen: PropTypes.func.isRequired,\n setSelected: PropTypes.func.isRequired,\n refreshCallBack: PropTypes.func.isRequired,\n};\n","import React, { useState } from 'react';\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz';\nimport {\n Box,\n Button,\n CircularProgress,\n ListItemIcon,\n MenuItem,\n Typography,\n} from '@material-ui/core';\nimport FilterNoneIcon from '@material-ui/icons/FilterNone';\nimport PopperPortal from '../../components/PopperPortal';\nimport { createFormTypes } from '../../services/unarmed';\nimport { toast } from '../../components/Notification';\n\nexport default function RenderTableOptions({ id, refreshCallBack }) {\n const [open, setOpen] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const onDuplicate = async () => {\n setLoading(true);\n try {\n await createFormTypes({ copyFrom: id });\n await refreshCallBack();\n setOpen(false);\n setLoading(false);\n toast.success('Form Type was successfully duplicated');\n } catch (error) {\n setLoading(false);\n toast.success('Something went wrong when duplicate form type');\n }\n };\n\n return (\n \n \n Are you sure you want to {status[index] ? 'unpublish' : 'publish'} this form?\n \n {!status[index] && (\n \n There can only be one \"{row?.typeDisplayText || row?.type?.toLowerCase()}{' '}\n type\" public at the same time\n \n )}\n \n setOpen(false)}\n >\n CANCEL\n \n \n {loading ? \n
\n \n \n Are you sure you want to update portal status?\n \n \n setOpen(false)}\n >\n CANCEL\n \n \n {loading ? \n
\n \n Sort Forms \n \n Arrange the forms in the order you would like them to be shown on the Portal\n \n \n \n \n \n CANCEL\n \n handleOnSaveSortForms(liveForms)}\n disabled={loading}\n >\n {loading ? \n
\n );\n};\n\n// PropTypes validation\nSortForms.propTypes = {\n defaultLiveForms: PropTypes.array.isRequired,\n onClose: PropTypes.func.isRequired,\n onSaved: PropTypes.func.isRequired,\n};\n\nexport default SortForms;\n","/* eslint-disable no-nested-ternary */\nimport {\n Box,\n Checkbox,\n makeStyles,\n TableCell,\n TableRow,\n Typography,\n Fade,\n Backdrop,\n Modal,\n Tooltip,\n} from '@material-ui/core';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { toast } from '../../components/Notification';\nimport { useHistory } from 'react-router-dom';\n\nimport EnhancedTable from '../../components/Table';\nimport UpgradeModal from '../../components/UpgradeModal';\nimport useOrganization from '../../hooks/useOrganization';\nimport { getAvailableFormType, getFormTypes } from '../../services/unarmed';\nimport DashButton from '../../components/DashButton';\nimport CreateForm from './CreateForm';\nimport DeleteForms from './DeleteForms';\nimport RenderTableOptions from './RenderTableOptions';\nimport UpdateStatusFormPopup from './UpdateStatusFormPopup';\nimport UpdateStatusFormPortal from './UpdateStatusFormPortal';\nimport formatTxt from '../../utils/formatText';\nimport SortForms from './SortForms';\nimport { sortOrderForms } from '../../utils';\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n padding: 20,\n },\n title: {\n marginTop: 50,\n },\n button: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n marginRight: 10,\n color: '#fff',\n height: 36,\n width: 30,\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n '&:disabled': {\n background: '#1f63ff61',\n color: '#fff',\n },\n },\n button2: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n color: '#fff',\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 14,\n },\n },\n buttonOutlined: {\n letterSpacing: '1px',\n fontSize: 13,\n fontWeight: '500',\n marginRight: 10,\n width: 'fit-content',\n alignSelf: 'flex-end',\n border: '1px solid transparent',\n color: '#4b7bff',\n '&:hover': {\n background: 'transparent',\n border: '1px solid transparent',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n },\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: '#fff',\n boxShadow: theme.shadows[5],\n padding: 30,\n maxWidth: 600,\n minWidth: 400,\n outline: 0,\n },\n}));\n\nconst columns = ['Name', 'Display Name', 'Type', 'Created By', 'Created Date', 'Status', 'Portal Status', 'Actions'];\n\nconst Forms = () => {\n const classes = useStyles();\n const [forms, setForms] = useState([]);\n const [loading, setLoading] = useState(false);\n const [page, setPage] = useState(1);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n const [selected, setSelected] = React.useState([]);\n const [checked, setChecked] = useState(false);\n const { organization } = useOrganization();\n const [status, setStatus] = useState([]);\n const [availableFormDashboard, setAvailableFormDashboard] = useState([]);\n const [open, setOpenModal] = useState(false);\n const [openCreate, setOpenCreate] = useState(false);\n const isSelected = (name) => selected.indexOf(name) !== -1;\n const history = useHistory();\n const [sortBy, setSortBy] = useState('createdAt');\n const [sort, setSort] = useState('asc');\n const [showOpenSortForms, setShowOpenSortForms] = useState(false);\n const [availableFormsTypes, setAvailableFormTypes] = useState([]);\n\n const onGetAvailableFormsTypes = useCallback(async () => {\n try {\n const { data } = await getAvailableFormType(organization?._id);\n setAvailableFormTypes(sortOrderForms(data));\n } catch (error) {\n toast.error(error.message);\n }\n }, [organization]);\n\n const onUpdatePortalStatusCallBack = (index, value) => {\n const statusCopy = [...availableFormDashboard];\n statusCopy[index] = value;\n setAvailableFormDashboard(statusCopy);\n onGetAvailableFormsTypes();\n };\n\n const onGetFormTypes = () => {\n setLoading(true);\n getFormTypes(page, rowsPerPage, sort, sortBy)\n .then(({ data, headers }) => {\n setForms({ data, headers });\n const stats = data.map((dt) => dt?.published);\n const dashboardForm = data.map((dt) => dt?.portalStatus);\n setAvailableFormDashboard(dashboardForm);\n setStatus(stats);\n setLoading(false);\n })\n .catch((err) => {\n console.log(err);\n setLoading(false);\n });\n };\n\n useEffect(() => {\n onGetFormTypes();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [page, rowsPerPage, sortBy, sort]);\n\n useEffect(() => {\n if (organization) {\n onGetAvailableFormsTypes();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [organization]);\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value));\n setPage(1);\n };\n\n const goToCaseDetails = (e, row, handleClick) => {\n const go = handleClick(e, row._id);\n if (go) {\n history.push(`/form/${row._id}`);\n }\n };\n\n const handleOnClickSortForms = () => {\n setShowOpenSortForms(true);\n };\n\n function toTitleCase(str) {\n return str.replace(\n /\\w\\S*/g,\n text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()\n );\n }\n\n const renderRow = (row, index, handleClick) => {\n const isItemSelected = isSelected(row._id);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n \n {IconComponent ? (\n
\n {getStatusTitle(row)}
\n\n {row?.statusLog && moment(row?.statusLog?.[row?.status]?.datetime).format('MMMM DD, hh:mm a')}\n
\n\n Select Form \n \n Please select a form to fill from dashboard.\n \n \n \n {formTypes?.map((form) => (\n \n \n \n \n \n
\n \n 0\n ? field?.value.join(', ')\n : 'N/A'\n : typeof field?.value === 'boolean'\n ? field?.value\n ? 'Yes'\n : 'No'\n : field?.value || 'N/A'\n }\n />\n
\n );\n })}\n \n \n setOpen(false)} />\n \n {\n if (fl.length > 0) {\n uploadOnLoad(fl[fl.length - 1]);\n }\n }}\n filesLimit={3}\n dropzoneText=\"Click or drag and drop an image here\"\n showPreviewsInDropzone={false}\n Icon={() =>
\n \n \n {tabs.map((tab, i) => (\n
\n );\n}\n","import { Avatar, Box, makeStyles, TableCell, TableRow, Typography } from '@material-ui/core';\nimport React, { useEffect, useState, useContext } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport AccountCircleIcon from '@material-ui/icons/AccountCircle';\nimport moment from 'moment';\nimport { Context } from '../../Context';\nimport useOrganization from '../../hooks/useOrganization';\nimport EnhancedTable from '../../components/Table';\nimport formatTxt from '../../utils/formatText';\nimport { transformStatus } from '../../utils';\nimport { getCivilianCases } from '../../services/unarmed';\n\nconst columns = ['Type', 'Tracking Number', 'Created Date', 'Name', 'Assigned To', 'Status'];\n\nconst getStatusTitle = (row) => {\n const currentStatus = row?.availableStatuses?.filter((status) => status.status === row?.status);\n return transformStatus(currentStatus[0]?.status);\n};\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n padding: 20,\n },\n title: {\n marginTop: 50,\n },\n button: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n marginRight: 10,\n color: '#fff',\n height: 36,\n width: 30,\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n '&:disabled': {\n background: '#1f63ff61',\n color: '#fff',\n },\n },\n button2: {\n background: ' #1F63FF',\n textTransform: 'capitalize',\n color: '#fff',\n '&:hover': {\n background: '#1F63FF',\n },\n '& .MuiButton-label': {\n fontSize: 14,\n },\n },\n buttonOutlined: {\n letterSpacing: '1px',\n fontSize: 13,\n fontWeight: '500',\n marginRight: 10,\n width: 'fit-content',\n alignSelf: 'flex-end',\n border: '1px solid transparent',\n color: '#4b7bff',\n '&:hover': {\n background: 'transparent',\n border: '1px solid transparent',\n },\n '& .MuiButton-label': {\n fontSize: 13,\n },\n },\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: '#fff',\n boxShadow: theme.shadows[5],\n padding: 30,\n maxWidth: 600,\n outline: 0,\n },\n}));\n\nexport default function OfficerCases({ uniqueFieldId, officerBadgeNumber }) {\n const classes = useStyles();\n const { myUser } = useContext(Context);\n const { organization } = useOrganization();\n const [page, setPage] = useState(1);\n const [rowsPerPage, setRowsPerPage] = useState(10);\n const [sortBy, setSortBy] = useState('createdAt');\n const [sort, setSort] = useState('desc');\n const [forms, setForms] = useState([]);\n const [loading, setLoading] = useState(false);\n const [filteredCaseCount, setFilteredCaseCount] = useState(0);\n\n const history = useHistory();\n\n useEffect(() => {\n const getFormsCivilians = async () => {\n try {\n setLoading(true);\n const { data, headers } = await getCivilianCases({\n token: '',\n page,\n limit: rowsPerPage,\n sortBy,\n sort,\n isFiltering: true,\n type: '',\n from: null,\n to: null,\n code: '',\n status: '',\n name: '',\n assignedTo: '',\n uniqueFieldId,\n badgeNumber: '',\n transferredOnly: false,\n });\n\n setForms({ data, headers });\n } catch (error) {\n console.log(error.message);\n } finally {\n setLoading(false);\n }\n };\n\n if (uniqueFieldId?.value) {\n getFormsCivilians();\n }\n }, [page, rowsPerPage, sortBy, sort, uniqueFieldId]);\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value));\n setPage(1);\n };\n\n const goToCaseDetails = (e, row, handleClick) => {\n history.push(`/case/${row.code}`);\n };\n const renderRow = (row, index, handleClick) => (\n {getStatusTitle(row)}
\n\n {row?.statusLog && moment(row?.statusLog?.[row?.status]?.datetime).format('MMMM DD, hh:mm a')}\n
\n\n \n \n {showPreview ? (\n {file.name} \n \n
\n );\n })}\n \n
\n
\n \n \n {showPreview ? (\n {file.name} \n \n
\n );\n })}\n \n \n New Officer Information\n \n
\n \n \n
\n \n
\n \n
\n \n
\n {Object.entries(officerData.customFields).map(([key, value]) => (\n \n
\n UNIQUE IDENTIFIER
\n\n
\n {officerData.uniqueFieldId.value || 'N/A'}
\n\n
\n ))}\n \n
\n {key.replace(/([A-Z])/g, ' $1').toUpperCase()}
\n\n
\n {value === true ? 'Yes' : value === false ? 'No' : value === null ? 'N/A' : value}
\n\n
\n \n\n \n
\n \n
\n \n {Object.entries(countItems).map(([key, value]) => (\n
\n \n
\n ))}\n \n
\n {key.replace(/([A-Z])/g, ' $1').toUpperCase()}
\n\n
\n \n {value} {key.charAt(0).toUpperCase() + key.slice(1)}\n
\n\n \n setOpen(false)} />\n \n {\n if (fl.length > 0) {\n uploadOnLoad(fl[fl.length - 1]);\n }\n }}\n filesLimit={3}\n dropzoneText=\"Click or drag and drop an image here\"\n showPreviewsInDropzone={false}\n Icon={() =>
\n {error.toString()}
;\n }\n\n if (!resultSet) {\n return ;\n }\n\n if (chartType === 'Number') {\n return (\n Loading
}\n \n\n \n 
\n {params.group.replace('-', '')} \n \n {params.children} \n
\n )}\n renderTags={(tagValue, getTagProps) => {\n const validTags = tagValue.filter((option) => formatChildrenString(option) !== null);\n const visibleTags = showAll || showAlltag ? validTags : validTags.slice(0, 2);\n\n return (\n <>\n {visibleTags.map((option, index) => (\n \n
\n );\n};\n\nconst LineChartRenderer = ({ resultSet, chartLabelNumber }) => {\n const datasets = useDeepCompareMemo(\n () =>\n resultSet.series().map((s, index) => ({\n label: s.title,\n data: s.series.map((r) => r.value),\n borderColor: COLORS_SERIES[index],\n pointRadius: 1,\n tension: 0.1,\n pointHoverRadius: 1,\n borderWidth: 2,\n fill: false,\n })),\n [resultSet]\n );\n const data = {\n labels: resultSet.categories().map((c) => c.x),\n datasets,\n };\n\n const lineOptions = {\n ...commonOptions,\n plugins: {\n ...commonOptions.plugins,\n datalabels: {\n ...commonOptions.plugins.datalabels,\n align: 'top',\n offset: 0,\n display: chartLabelNumber,\n },\n },\n };\n\n return (\n \n
\n );\n};\n\nconst BarChartRenderer = ({ resultSet, pivotConfig, chartLabelNumber }) => {\n const datasets = useDeepCompareMemo(\n () =>\n resultSet.series().map((s, index) => ({\n label: s.title,\n data: s.series.map((r) => r.value),\n backgroundColor: COLORS_SERIES[index],\n fill: false,\n })),\n [resultSet]\n );\n const data = {\n labels: resultSet.categories().map((c) => c.x),\n datasets,\n };\n const options = {\n ...commonOptions,\n scales: {\n x: {\n ...commonOptions.scales.x,\n stacked: !(pivotConfig.x || []).includes('measures'),\n },\n },\n plugins: {\n ...commonOptions.plugins,\n datalabels: {\n ...commonOptions.plugins.datalabels,\n anchor: 'end',\n align: 'top',\n display: chartLabelNumber,\n },\n },\n };\n return {error.toString()}
;\n }\n\n if (!resultSet) {\n return ;\n }\n\n if (chartType === 'Number') {\n return (\n \n
\n );\n }\n\n if (chartType === 'Table') {\n return (\n \n {loading ? (\n \n ) : filteredDashboards.length > 0 ? (\n filteredDashboards.map((dashboard) => (\n \n ))\n ) : (\n \n )}\n
\n\n \n {resultSet && (\n
\n \n {dashboardReports.length > 0 ? (\n \n {/* \n {dashboardReports.map((report, index) => {\n return (\n {\n e.dataTransfer.setData('text/plain', index);\n }}\n onDragOver={(e) => {\n e.preventDefault();\n }}\n onDrop={async (e) => {\n e.preventDefault();\n const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));\n const newReports = [...dashboardReports];\n const temp = newReports[draggedIndex];\n newReports[draggedIndex] = newReports[index];\n newReports[index] = temp;\n const reportsWithPosition = newReports.map((report, idx) => ({\n ...report,\n position: idx,\n }));\n\n reportsWithPosition.forEach(async (dashboardR) => {\n await updateDashboardReportSize(dashboardR.i, {\n position: dashboardR.position,\n });\n });\n\n setDashboardReports(reportsWithPosition);\n }}\n >\n {report.content}\n \n );\n })}\n \n \n ) : (\n
\n No reports available
\n )}\n\n {loading ? (\n \n ) : filteredReports.length > 0 ? (\n filteredReports.map((report) => (\n \n ))\n ) : (\n \n )}\n
\n \n \n \n Help? See our{' '}\n \n Documentation\n \n \n
\n\n