\n \n {showSearch === true ? (\n options.customSearchRender ? (\n options.customSearchRender(searchText, this.handleSearch, this.hideSearch, options)\n ) : (\n
\n )\n ) : typeof title !== 'string' ? (\n title\n ) : (\n
\n \n {title}\n \n
\n )}\n
\n {!(options.search === false || options.search === 'false' || options.searchAlwaysOpen === true) && (\n
\n (this.searchButton = el)}\n classes={{ root: this.getActiveIcon(classes, 'search') }}\n disabled={options.search === 'disabled'}\n onClick={this.handleSearchIconClick}\n >\n \n )}\n {!(options.download === false || options.download === 'false') && (\n
\n \n \n )}\n {!(options.print === false || options.print === 'false') && (\n
\n this.props.tableRef()}>\n \n {({ handlePrint }) => (\n \n \n \n \n \n )}\n \n \n \n )}\n {!(options.viewColumns === false || options.viewColumns === 'false') && (\n
\n \n \n \n \n \n \n {selectedRows.data.length} {textLabels.text}\n \n
\n {options.customToolbarSelect ? (\n options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)\n ) : (\n \n \n \n \n )}\n \n );\n }\n}\n\nexport default withStyles(defaultToolbarSelectStyles, { name: 'MUIDataTableToolbarSelect' })(TableToolbarSelect);\n","/*\n * Default text labels.\n */\nconst getTextLabels = () => ({\n body: {\n noMatch: 'Sorry, no matching records found',\n toolTip: 'Sort'\n },\n pagination: {\n next: 'Next Page',\n previous: 'Previous Page',\n rowsPerPage: 'Rows per page:',\n displayRows: 'of',\n jumpToPage: 'Jump to Page:'\n },\n toolbar: {\n search: 'Search',\n downloadCsv: 'Download CSV',\n print: 'Print',\n viewColumns: 'View Columns',\n filterTable: 'Filter Table'\n },\n filter: {\n all: 'All',\n title: 'FILTERS',\n reset: 'RESET'\n },\n viewColumns: {\n title: 'Show Columns',\n titleAria: 'Show/Hide Table Columns'\n },\n selectedRows: {\n text: 'row(s) selected',\n delete: 'Delete',\n deleteAria: 'Delete Selected Rows'\n }\n});\n\nexport default getTextLabels;\n","/* eslint-disable */\nimport Paper from '@mui/material/Paper';\nimport { withStyles } from '@mui/styles';\nimport MuiTable from '@mui/material/Table';\nimport clsx from 'clsx';\nimport { assignInWith, cloneDeep, find, isEqual, isUndefined, merge } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport DefaultTableBody from './components/TableBody';\nimport DefaultTableFilter from './components/TableFilter';\nimport DefaultTableFilterList from './components/TableFilterList';\nimport DefaultTableFooter from './components/TableFooter';\nimport DefaultTableHead from './components/TableHead';\nimport DefaultTableResize from './components/TableResize';\nimport DefaultTableToolbar from './components/TableToolbar';\nimport DefaultTableToolbarSelect from './components/TableToolbarSelect';\nimport MuiTooltip from '@mui/material/Tooltip';\nimport getTextLabels from './textLabels';\nimport { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from './utils';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nconst defaultTableStyles = (theme) => ({\n root: {},\n paper: {},\n paperResponsiveScrollFullHeightFullWidth: {\n position: 'absolute'\n },\n tableRoot: {\n outline: 'none'\n },\n responsiveBase: {\n overflow: 'auto',\n '@media print': {\n height: 'auto !important'\n }\n },\n\n // deprecated, but continuing support through v3.x\n responsiveScroll: {\n overflow: 'auto',\n height: '100%'\n },\n // deprecated, but continuing support through v3.x\n responsiveScrollMaxHeight: {\n overflow: 'auto',\n height: '100%'\n },\n // deprecated, but continuing support through v3.x\n responsiveScrollFullHeight: {\n height: '100%'\n },\n // deprecated, but continuing support through v3.x\n responsiveStacked: {\n overflow: 'auto',\n [theme.breakpoints.down('sm')]: {\n overflow: 'hidden'\n }\n },\n // deprecated, but continuing support through v3.x\n responsiveStackedFullWidth: {},\n caption: {\n position: 'absolute',\n left: '-3000px'\n },\n\n liveAnnounce: {\n border: '0',\n clip: 'rect(0 0 0 0)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n width: '1px'\n },\n '@global': {\n '@media print': {\n '.datatables-noprint': {\n display: 'none'\n }\n }\n }\n});\n\nconst TABLE_LOAD = {\n INITIAL: 1,\n UPDATE: 2\n};\n\n// Populate this list with anything that might render in the toolbar to determine if we hide the toolbar\nconst TOOLBAR_ITEMS = ['title', 'filter', 'search', 'print', 'download', 'viewColumns', 'customToolbar'];\n\nconst hasToolbarItem = (options, title) => {\n options.title = title;\n\n return !isUndefined(find(TOOLBAR_ITEMS, (i) => options[i]));\n};\n\n// Select Toolbar Placement options\nconst STP = {\n REPLACE: 'replace',\n ABOVE: 'above',\n BELOW: 'below',\n NONE: 'none'\n};\n\nclass MUIDataTable extends React.Component {\n static propTypes = {\n /** Title of the table */\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n /** Data used to describe table */\n data: PropTypes.array.isRequired,\n /** Columns used to describe table */\n columns: PropTypes.PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.shape({\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n options: PropTypes.shape({\n display: PropTypes.oneOf(['true', 'false', 'excluded', 'always']),\n empty: PropTypes.bool,\n filter: PropTypes.bool,\n sort: PropTypes.bool,\n print: PropTypes.bool,\n searchable: PropTypes.bool,\n download: PropTypes.bool,\n viewColumns: PropTypes.bool,\n filterList: PropTypes.array,\n filterOptions: PropTypes.oneOfType([\n PropTypes.array,\n PropTypes.shape({\n names: PropTypes.array,\n logic: PropTypes.func,\n display: PropTypes.func\n })\n ]),\n filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),\n customHeadRender: PropTypes.func,\n customBodyRender: PropTypes.func,\n customBodyRenderLite: PropTypes.func,\n customHeadLabelRender: PropTypes.func,\n customFilterListOptions: PropTypes.oneOfType([\n PropTypes.shape({\n render: PropTypes.func,\n update: PropTypes.func\n })\n ]),\n customFilterListRender: PropTypes.func,\n setCellProps: PropTypes.func,\n setCellHeaderProps: PropTypes.func,\n sortThirdClickReset: PropTypes.bool,\n sortDescFirst: PropTypes.bool\n })\n })\n ])\n ).isRequired,\n /** Options used to describe table */\n options: PropTypes.shape({\n caseSensitive: PropTypes.bool,\n columnOrder: PropTypes.array,\n count: PropTypes.number,\n confirmFilters: PropTypes.bool,\n consoleWarnings: PropTypes.bool,\n customFilterDialogFooter: PropTypes.func,\n customFooter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),\n customRowRender: PropTypes.func,\n customSearch: PropTypes.func,\n customSearchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),\n customSort: PropTypes.func,\n customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),\n customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),\n draggableColumns: PropTypes.object,\n enableNestedDataAccess: PropTypes.string,\n expandableRows: PropTypes.bool,\n expandableRowsHeader: PropTypes.bool,\n expandableRowsOnClick: PropTypes.bool,\n disableToolbarSelect: PropTypes.bool,\n download: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),\n downloadOptions: PropTypes.shape({\n filename: PropTypes.string,\n separator: PropTypes.string,\n filterOptions: PropTypes.shape({\n useDisplayedColumnsOnly: PropTypes.bool,\n useDisplayedRowsOnly: PropTypes.bool\n })\n }),\n filter: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),\n filterArrayFullMatch: PropTypes.bool,\n filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),\n fixedHeader: PropTypes.bool,\n fixedSelectColumn: PropTypes.bool,\n getTextLabels: PropTypes.func,\n isRowExpandable: PropTypes.func,\n isRowSelectable: PropTypes.func,\n jumpToPage: PropTypes.bool,\n onDownload: PropTypes.func,\n onFilterChange: PropTypes.func,\n onFilterChipClose: PropTypes.func,\n onFilterConfirm: PropTypes.func,\n onFilterDialogOpen: PropTypes.func,\n onFilterDialogClose: PropTypes.func,\n onRowClick: PropTypes.func,\n onRowsExpand: PropTypes.func,\n onRowExpansionChange: PropTypes.func,\n onRowsSelect: PropTypes.func,\n onRowSelectionChange: PropTypes.func,\n onTableChange: PropTypes.func,\n onTableInit: PropTypes.func,\n page: PropTypes.number,\n pagination: PropTypes.bool,\n print: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),\n searchProps: PropTypes.object,\n selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['none', 'single', 'multiple'])]),\n selectableRowsHeader: PropTypes.bool,\n selectableRowsHideCheckboxes: PropTypes.bool,\n selectableRowsOnClick: PropTypes.bool,\n serverSide: PropTypes.bool,\n tableId: PropTypes.string,\n tableBodyHeight: PropTypes.string,\n tableBodyMaxHeight: PropTypes.string,\n renderExpandableRow: PropTypes.func,\n resizableColumns: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),\n responsive: PropTypes.oneOf(['standard', 'vertical', 'verticalAlways', 'simple']),\n rowHover: PropTypes.bool,\n rowsExpanded: PropTypes.array,\n rowsPerPage: PropTypes.number,\n rowsPerPageOptions: PropTypes.array,\n rowsSelected: PropTypes.array,\n search: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),\n searchOpen: PropTypes.bool,\n searchPlaceholder: PropTypes.string,\n searchText: PropTypes.string,\n setFilterChipProps: PropTypes.func,\n setRowProps: PropTypes.func,\n selectToolbarPlacement: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf([STP.REPLACE, STP.ABOVE, STP.BELOW, STP.NONE])\n ]),\n setTableProps: PropTypes.func,\n sort: PropTypes.bool,\n sortOrder: PropTypes.object,\n viewColumns: PropTypes.oneOf([true, false, 'true', 'false', 'disabled'])\n }),\n /** Pass and use className to style MUIDataTable as desired */\n className: PropTypes.string,\n components: PropTypes.objectOf(PropTypes.any)\n };\n\n static defaultProps = {\n title: '',\n options: {},\n data: [],\n columns: [],\n components: {\n TableBody: DefaultTableBody,\n TableFilter: DefaultTableFilter,\n TableFilterList: DefaultTableFilterList,\n TableFooter: DefaultTableFooter,\n TableHead: DefaultTableHead,\n TableResize: DefaultTableResize,\n TableToolbar: DefaultTableToolbar,\n TableToolbarSelect: DefaultTableToolbarSelect,\n Tooltip: MuiTooltip\n }\n };\n\n constructor(props) {\n super(props);\n this.tableRef = React.createRef();\n this.tableContent = React.createRef();\n this.draggableHeadCellRefs = {};\n this.resizeHeadCellRefs = {};\n this.timers = {};\n this.setHeadResizeable = () => {};\n this.updateDividers = () => {};\n\n let defaultState = {\n activeColumn: null,\n announceText: null,\n count: 0,\n columns: [],\n expandedRows: {\n data: [],\n lookup: {}\n },\n data: [],\n displayData: [],\n filterData: [],\n filterList: [],\n page: 0,\n previousSelectedRow: null,\n rowsPerPage: 10,\n searchProps: {},\n searchText: null,\n selectedRows: {\n data: [],\n lookup: {}\n },\n showResponsive: false,\n sortOrder: {}\n };\n\n this.mergeDefaultOptions(props);\n this.state = Object.assign(defaultState, this.getInitTableOptions());\n this.setTableData = this.setTableData.bind(this);\n\n this.setTableData(props, TABLE_LOAD.INITIAL, true, null, true);\n }\n\n componentDidMount() {\n this.setHeadResizeable(this.resizeHeadCellRefs, this.tableRef);\n\n // When we have a search, we must reset page to view it unless on serverSide since paging is handled by the user.\n if (this.props.options.searchText && !this.props.options.serverSide) this.setState({ page: 0 });\n\n this.setTableInit('tableInitialized');\n }\n\n componentDidUpdate(prevProps) {\n if (\n this.props.data !== prevProps.data ||\n this.props.columns !== prevProps.columns ||\n this.props.options !== prevProps.options\n ) {\n this.updateOptions(this.options, this.props);\n\n var didDataUpdate = this.props.data !== prevProps.data;\n if (this.props.data && prevProps.data) {\n didDataUpdate = didDataUpdate && this.props.data.length === prevProps.data.length;\n }\n\n this.setTableData(this.props, TABLE_LOAD.INITIAL, didDataUpdate, () => {\n this.setTableAction('propsUpdate');\n });\n }\n\n if (this.props.options.searchText !== prevProps.options.searchText && !this.props.options.serverSide) {\n // When we have a search, we must reset page to view it unless on serverSide since paging is handled by the user.\n this.setState({ page: 0 });\n }\n\n if (\n this.options.resizableColumns === true ||\n (this.options.resizableColumns && this.options.resizableColumns.enabled)\n ) {\n this.setHeadResizeable(this.resizeHeadCellRefs, this.tableRef);\n this.updateDividers();\n }\n }\n\n updateOptions(options, props) {\n // set backwards compatibility options\n if (props.options.disableToolbarSelect === true && props.options.selectToolbarPlacement === undefined) {\n // if deprecated option disableToolbarSelect is set and selectToolbarPlacement is default then use it\n props.options.selectToolbarPlacement = STP.NONE;\n }\n\n // provide default tableId when draggableColumns is enabled and no tableId has been passed as prop\n if (props.options.draggableColumns && props.options.draggableColumns.enabled === true && !props.options.tableId) {\n props.options.tableId = (Math.random() + '').replace(/\\./, '');\n }\n\n this.options = assignInWith(options, props.options, (objValue, srcValue, key) => {\n // Merge any default options that are objects, as they will be overwritten otherwise\n if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue);\n return;\n });\n\n this.handleOptionDeprecation(props);\n }\n\n getDefaultOptions = () => ({\n caseSensitive: false,\n consoleWarnings: true,\n disableToolbarSelect: false,\n download: true,\n downloadOptions: {\n filename: 'tableDownload.csv',\n separator: ','\n },\n draggableColumns: {\n enabled: false,\n transitionTime: 300\n },\n elevation: 4,\n enableNestedDataAccess: '',\n expandableRows: false,\n expandableRowsHeader: true,\n expandableRowsOnClick: false,\n filter: true,\n filterArrayFullMatch: true,\n filterType: 'dropdown',\n fixedHeader: true,\n fixedSelectColumn: true,\n pagination: true,\n print: true,\n resizableColumns: false,\n responsive: 'vertical',\n rowHover: true,\n //rowsPerPage: 10,\n rowsPerPageOptions: [10, 15, 100],\n search: true,\n selectableRows: 'multiple',\n selectableRowsHideCheckboxes: false,\n selectableRowsOnClick: false,\n selectableRowsHeader: true,\n serverSide: false,\n serverSideFilterList: null,\n setTableProps: () => ({}),\n sort: true,\n sortFilterList: true,\n tableBodyHeight: 'auto',\n tableBodyMaxHeight: null, // if set, it will override tableBodyHeight\n sortOrder: {},\n textLabels: getTextLabels(),\n viewColumns: true,\n selectToolbarPlacement: STP.REPLACE\n });\n\n warnDep = (msg, consoleWarnings) => {\n warnDeprecated(msg, this.options.consoleWarnings);\n };\n\n warnInfo = (msg, consoleWarnings) => {\n warnInfo(msg, this.options.consoleWarnings);\n };\n\n handleOptionDeprecation = (props) => {\n if (typeof this.options.selectableRows === 'boolean') {\n this.warnDep(\n 'Using a boolean for selectableRows has been deprecated. Please use string option: multiple | single | none'\n );\n this.options.selectableRows = this.options.selectableRows ? 'multiple' : 'none';\n }\n if (['standard', 'vertical', 'verticalAlways', 'simple'].indexOf(this.options.responsive) === -1) {\n if (\n [\n 'scrollMaxHeight',\n 'scrollFullHeight',\n 'stacked',\n 'stackedFullWidth',\n 'scrollFullHeightFullWidth',\n 'scroll'\n ].indexOf(this.options.responsive) !== -1\n ) {\n this.warnDep(\n this.options.responsive +\n ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n } else {\n this.warnInfo(\n this.options.responsive +\n ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n }\n if (this.options.onRowsSelect) {\n this.warnDep(\n 'onRowsSelect has been renamed onRowSelectionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n if (this.options.onRowsExpand) {\n this.warnDep(\n 'onRowsExpand has been renamed onRowExpansionChange. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n if (this.options.fixedHeaderOptions) {\n if (\n typeof this.options.fixedHeaderOptions.yAxis !== 'undefined' &&\n typeof this.options.fixedHeader === 'undefined'\n ) {\n this.options.fixedHeader = this.options.fixedHeaderOptions.yAxis;\n }\n if (\n typeof this.options.fixedHeaderOptions.xAxis !== 'undefined' &&\n typeof this.options.fixedSelectColumn === 'undefined'\n ) {\n this.options.fixedSelectColumn = this.options.fixedHeaderOptions.xAxis;\n }\n this.warnDep(\n 'fixedHeaderOptions will still work but has been deprecated in favor of fixedHeader and fixedSelectColumn. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n if (this.options.serverSideFilterList) {\n this.warnDep(\n 'serverSideFilterList will still work but has been deprecated in favor of the confirmFilters option. See this example for details: https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js More info here: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n\n props.columns.map((c) => {\n if (c.options && c.options.customFilterListRender) {\n this.warnDep(\n 'The customFilterListRender option has been deprecated. It is being replaced by customFilterListOptions.render (Specify customFilterListOptions: { render: Function } in column options.)'\n );\n }\n });\n\n if (this.options.disableToolbarSelect === true) {\n this.warnDep(\n 'disableToolbarSelect has been deprecated but will still work in version 3.x. It is being replaced by \"selectToolbarPlacement\"=\"none\". More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n\n // only give this warning message in newer browsers\n if (Object.values) {\n if (Object.values(STP).indexOf(this.options.selectToolbarPlacement) === -1) {\n this.warnDep(\n 'Invalid option value for selectToolbarPlacement. Please check the documentation: https://github.com/gregnb/mui-datatables#options'\n );\n }\n }\n };\n\n /*\n * React currently does not support deep merge for defaultProps. Objects are overwritten\n */\n mergeDefaultOptions(props) {\n const defaultOptions = this.getDefaultOptions();\n const theProps = Object.assign({}, props);\n theProps.options = theProps.options || {};\n\n this.updateOptions(defaultOptions, theProps);\n }\n\n validateOptions(options) {\n if (options.serverSide && options.onTableChange === undefined) {\n throw Error('onTableChange callback must be provided when using serverSide option');\n }\n if (options.expandableRows && options.renderExpandableRow === undefined) {\n throw Error('renderExpandableRow must be provided when using expandableRows option');\n }\n if (options.rowsSelected && Array.isArray(options.rowsSelected) && options.rowsSelected.some(isNaN)) {\n warnInfo('When using the rowsSelected option, must be provided an array of numbers only.');\n }\n }\n\n setTableAction = (action) => {\n if (typeof this.options.onTableChange === 'function') {\n this.options.onTableChange(action, this.state);\n }\n };\n\n setTableInit = (action) => {\n if (typeof this.options.onTableInit === 'function') {\n this.options.onTableInit(action, this.state);\n }\n };\n\n getInitTableOptions() {\n const optionNames = ['rowsPerPage', 'page', 'rowsSelected', 'rowsPerPageOptions'];\n const optState = optionNames.reduce((acc, cur) => {\n if (this.options[cur] !== undefined) {\n acc[cur] = this.options[cur];\n }\n return acc;\n }, {});\n\n this.validateOptions(optState);\n return optState;\n }\n\n setHeadCellRef = (index, pos, el) => {\n this.draggableHeadCellRefs[index] = el;\n this.resizeHeadCellRefs[pos] = el;\n };\n\n // must be arrow function on local field to refer to the correct instance when passed around\n // assigning it as arrow function in the JSX would cause hard to track re-render errors\n getTableContentRef = () => this.tableContent.current;\n\n /*\n * Build the source table data\n *\n * newColumns - columns from the options object.\n * prevColumns - columns object saved onto ths state.\n * newColumnOrder - columnOrder from the options object.\n * prevColumnOrder - columnOrder object saved onto the state.\n */\n\n buildColumns = (newColumns, prevColumns = [], newColumnOrder, prevColumnOrder = []) => {\n let columnData = [];\n let filterData = [];\n let filterList = [];\n let columnOrder = [];\n\n newColumns.forEach((column, colIndex) => {\n let columnOptions = {\n display: 'true',\n empty: false,\n filter: true,\n sort: true,\n print: true,\n searchable: true,\n download: true,\n viewColumns: true,\n sortCompare: null,\n sortThirdClickReset: false,\n sortDescFirst: false\n };\n\n columnOrder.push(colIndex);\n const options = { ...column.options };\n\n if (typeof column === 'object') {\n if (options) {\n if (options.display !== undefined) {\n options.display = options.display.toString();\n }\n\n if (options.sortDirection === null || options.sortDirection) {\n this.warnDep(\n 'The sortDirection column field has been deprecated. Please use the sortOrder option on the options object. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md'\n );\n }\n }\n\n // remember stored version of display if not overwritten\n if (\n typeof options.display === 'undefined' &&\n prevColumns[colIndex] &&\n prevColumns[colIndex].name === column.name &&\n prevColumns[colIndex].display\n ) {\n options.display = prevColumns[colIndex].display;\n }\n\n columnOptions = {\n name: column.name,\n label: column.label ? column.label : column.name,\n ...columnOptions,\n ...options\n };\n } else {\n // remember stored version of display if not overwritten\n if (prevColumns[colIndex] && prevColumns[colIndex].display) {\n options.display = prevColumns[colIndex].display;\n }\n\n columnOptions = { ...columnOptions, ...options, name: column, label: column };\n }\n\n columnData.push(columnOptions);\n\n filterData[colIndex] = [];\n filterList[colIndex] = [];\n });\n\n if (Array.isArray(newColumnOrder)) {\n columnOrder = newColumnOrder;\n } else if (\n Array.isArray(prevColumnOrder) &&\n Array.isArray(newColumns) &&\n Array.isArray(prevColumns) &&\n newColumns.length === prevColumns.length\n ) {\n columnOrder = prevColumnOrder;\n }\n\n return { columns: columnData, filterData, filterList, columnOrder };\n };\n\n transformData = (columns, data) => {\n const { enableNestedDataAccess } = this.options;\n const leaf = (obj, path) =>\n (enableNestedDataAccess ? path.split(enableNestedDataAccess) : path.split()).reduce(\n (value, el) => (value ? value[el] : undefined),\n obj\n );\n\n const transformedData = Array.isArray(data[0])\n ? data.map((row) => {\n let i = -1;\n\n return columns.map((col) => {\n if (!col.empty) i++;\n return col.empty ? undefined : row[i];\n });\n })\n : data.map((row) => columns.map((col) => leaf(row, col.name)));\n\n return transformedData;\n };\n\n setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {\n let tableData = [];\n let { columns, filterData, filterList, columnOrder } = this.buildColumns(\n props.columns,\n this.state.columns,\n this.options.columnOrder,\n this.state.columnOrder\n );\n\n let sortIndex = null;\n let sortDirection = 'none';\n let tableMeta;\n\n let sortOrder;\n if (this.options.sortOrder && this.options.sortOrder.direction && this.options.sortOrder.name) {\n sortOrder = Object.assign({}, this.options.sortOrder);\n } else {\n sortOrder = Object.assign({}, this.state.sortOrder);\n\n // if no sortOrder, check and see if there's a sortDirection on one of the columns (deprecation notice for this is given above)\n if (!sortOrder.direction) {\n props.columns.forEach((column, colIndex) => {\n if (column.options && (column.options.sortDirection === 'asc' || column.options.sortDirection === 'desc')) {\n sortOrder.name = column.name;\n sortOrder.sortDirection = column.sortDirection;\n }\n });\n }\n }\n\n const data = status === TABLE_LOAD.INITIAL ? this.transformData(columns, props.data) : props.data;\n let searchText = status === TABLE_LOAD.INITIAL ? this.options.searchText : null;\n\n if (typeof this.options.searchText === 'undefined' && typeof this.state.searchText !== 'undefined') {\n searchText = this.state.searchText;\n }\n\n let rowsPerPage = this.state.rowsPerPage;\n if (typeof this.options.rowsPerPage === 'number') {\n rowsPerPage = this.options.rowsPerPage;\n }\n\n let page = this.state.page;\n if (typeof this.options.page === 'number') {\n page = this.options.page;\n }\n\n columns.forEach((column, colIndex) => {\n for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {\n let value = status === TABLE_LOAD.INITIAL ? data[rowIndex][colIndex] : data[rowIndex].data[colIndex];\n\n if (typeof tableData[rowIndex] === 'undefined') {\n tableData.push({\n index: status === TABLE_LOAD.INITIAL ? rowIndex : data[rowIndex].index,\n data: status === TABLE_LOAD.INITIAL ? data[rowIndex] : data[rowIndex].data\n });\n }\n\n if (column.filter !== false) {\n if (typeof column.customBodyRender === 'function') {\n const rowData = tableData[rowIndex].data;\n tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state, tableData);\n const funcResult = column.customBodyRender(value, tableMeta);\n\n if (React.isValidElement(funcResult) && funcResult.props.value) {\n value = funcResult.props.value;\n } else if (typeof funcResult === 'string') {\n value = funcResult;\n }\n }\n\n if (typeof value === 'object' && !Array.isArray(value) && value !== null) {\n // it's extremely rare but possible to create an object without a toString method, ex: var x = Object.create(null);\n // so this check has to be made\n value = value.toString ? value.toString() : '';\n }\n\n if (filterData[colIndex].indexOf(value) < 0 && !Array.isArray(value)) {\n filterData[colIndex].push(value);\n } else if (Array.isArray(value)) {\n value.forEach((element) => {\n let elmVal;\n if ((typeof element === 'object' && element !== null) || typeof element === 'function') {\n elmVal = element.toString ? element.toString() : '';\n } else {\n elmVal = element;\n }\n\n if (filterData[colIndex].indexOf(elmVal) < 0) {\n filterData[colIndex].push(elmVal);\n }\n });\n }\n }\n }\n\n if (column.filterOptions) {\n if (Array.isArray(column.filterOptions)) {\n filterData[colIndex] = cloneDeep(column.filterOptions);\n this.warnDep(\n 'filterOptions must now be an object. see https://github.com/gregnb/mui-datatables/tree/master/examples/customize-filter example'\n );\n } else if (Array.isArray(column.filterOptions.names)) {\n filterData[colIndex] = cloneDeep(column.filterOptions.names);\n }\n }\n\n if (column.filterList) {\n filterList[colIndex] = cloneDeep(column.filterList);\n } else if (\n this.state.filterList &&\n this.state.filterList[colIndex] &&\n this.state.filterList[colIndex].length > 0\n ) {\n filterList[colIndex] = cloneDeep(this.state.filterList[colIndex]);\n }\n\n if (this.options.sortFilterList) {\n const comparator = getCollatorComparator();\n filterData[colIndex].sort(comparator);\n }\n\n if (column.name === sortOrder.name) {\n sortDirection = sortOrder.direction;\n sortIndex = colIndex;\n }\n });\n\n let selectedRowsData = {\n data: [],\n lookup: {}\n };\n\n let expandedRowsData = {\n data: [],\n lookup: {}\n };\n\n if (TABLE_LOAD.INITIAL) {\n // Multiple row selection customization\n if (this.options.rowsSelected && this.options.rowsSelected.length && this.options.selectableRows === 'multiple') {\n this.options.rowsSelected\n .filter((selectedRowIndex) => selectedRowIndex === 0 || (Number(selectedRowIndex) && selectedRowIndex > 0))\n .forEach((row) => {\n let rowPos = row;\n\n for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {\n if (this.state.displayData[cIndex].dataIndex === row) {\n rowPos = cIndex;\n break;\n }\n }\n\n selectedRowsData.data.push({ index: rowPos, dataIndex: row });\n selectedRowsData.lookup[row] = true;\n });\n\n // Single row selection customization\n } else if (\n this.options.rowsSelected &&\n this.options.rowsSelected.length === 1 &&\n this.options.selectableRows === 'single'\n ) {\n let rowPos = this.options.rowsSelected[0];\n\n for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {\n if (this.state.displayData[cIndex].dataIndex === this.options.rowsSelected[0]) {\n rowPos = cIndex;\n break;\n }\n }\n\n selectedRowsData.data.push({ index: rowPos, dataIndex: this.options.rowsSelected[0] });\n selectedRowsData.lookup[this.options.rowsSelected[0]] = true;\n } else if (\n this.options.rowsSelected &&\n this.options.rowsSelected.length > 1 &&\n this.options.selectableRows === 'single'\n ) {\n console.error(\n 'Multiple values provided for selectableRows, but selectableRows set to \"single\". Either supply only a single value or use \"multiple\".'\n );\n } else if (typeof this.options.rowsSelected === 'undefined' && dataUpdated === false) {\n if (this.state.selectedRows) {\n selectedRowsData = Object.assign({}, this.state.selectedRows);\n }\n }\n\n if (this.options.rowsExpanded && this.options.rowsExpanded.length && this.options.expandableRows) {\n this.options.rowsExpanded.forEach((row) => {\n let rowPos = row;\n\n for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {\n if (this.state.displayData[cIndex].dataIndex === row) {\n rowPos = cIndex;\n break;\n }\n }\n\n expandedRowsData.data.push({ index: rowPos, dataIndex: row });\n expandedRowsData.lookup[row] = true;\n });\n } else if (typeof this.options.rowsExpanded === 'undefined' && dataUpdated === false && this.state.expandedRows) {\n expandedRowsData = Object.assign({}, this.state.expandedRows);\n }\n }\n\n if (!this.options.serverSide && sortIndex !== null) {\n const sortedData = this.sortTable(tableData, sortIndex, sortDirection, columns[sortIndex].sortCompare);\n tableData = sortedData.data;\n }\n\n /* set source data and display Data set source set */\n let stateUpdates = {\n columns: columns,\n filterData: filterData,\n filterList: filterList,\n searchText: searchText,\n selectedRows: selectedRowsData,\n expandedRows: expandedRowsData,\n count: this.options.count,\n data: tableData,\n sortOrder: sortOrder,\n rowsPerPage,\n page,\n displayData: this.getDisplayData(columns, tableData, filterList, searchText, tableMeta, props),\n columnOrder\n };\n\n if (fromConstructor) {\n this.state = Object.assign({}, this.state, stateUpdates);\n } else {\n this.setState(stateUpdates, callback);\n }\n }\n\n /*\n * Build the table data used to display to the user (ie: after filter/search applied)\n */\n computeDisplayRow(\n columns,\n row,\n rowIndex,\n filterList,\n searchText,\n dataForTableMeta,\n options,\n props,\n currentTableData\n ) {\n let isFiltered = false;\n let isSearchFound = false;\n let displayRow = [];\n\n for (let index = 0; index < row.length; index++) {\n let columnDisplay = row[index];\n let columnValue = row[index];\n let column = columns[index];\n\n if (column.customBodyRenderLite) {\n displayRow.push(column.customBodyRenderLite);\n } else if (column.customBodyRender) {\n const tableMeta = this.getTableMeta(\n rowIndex,\n index,\n row,\n column,\n dataForTableMeta,\n {\n ...this.state,\n filterList: filterList,\n searchText: searchText\n },\n currentTableData\n );\n\n const funcResult = column.customBodyRender(\n columnValue,\n tableMeta,\n this.updateDataCol.bind(null, rowIndex, index)\n );\n columnDisplay = funcResult;\n\n /* drill down to get the value of a cell */\n columnValue =\n typeof funcResult === 'string' || !funcResult\n ? funcResult\n : funcResult.props && funcResult.props.value\n ? funcResult.props.value\n : columnValue;\n\n displayRow.push(columnDisplay);\n } else {\n displayRow.push(columnDisplay);\n }\n\n const columnVal = columnValue === null || columnValue === undefined ? '' : columnValue.toString();\n\n const filterVal = filterList[index];\n const caseSensitive = options.caseSensitive;\n const filterType = column.filterType || options.filterType;\n if (filterVal.length || filterType === 'custom') {\n if (column.filterOptions && column.filterOptions.logic) {\n if (column.filterOptions.logic(columnValue, filterVal, row)) isFiltered = true;\n } else if (filterType === 'textField' && !this.hasSearchText(columnVal, filterVal, caseSensitive)) {\n isFiltered = true;\n } else if (\n filterType !== 'textField' &&\n Array.isArray(columnValue) === false &&\n filterVal.indexOf(columnValue) < 0\n ) {\n isFiltered = true;\n } else if (filterType !== 'textField' && Array.isArray(columnValue)) {\n if (options.filterArrayFullMatch) {\n //true if every filterVal exists in columnVal, false otherwise\n const isFullMatch = filterVal.every((el) => {\n return columnValue.indexOf(el) >= 0;\n });\n //if it is not a fullMatch, filter row out\n if (!isFullMatch) {\n isFiltered = true;\n }\n } else {\n const isAnyMatch = filterVal.some((el) => {\n return columnValue.indexOf(el) >= 0;\n });\n //if no value matches, filter row out\n if (!isAnyMatch) {\n isFiltered = true;\n }\n }\n }\n }\n\n if (\n searchText &&\n column.display !== 'excluded' &&\n this.hasSearchText(columnVal, searchText, caseSensitive) &&\n column.display !== 'false' &&\n column.searchable\n ) {\n isSearchFound = true;\n }\n }\n\n const { customSearch } = props.options;\n\n if (searchText && customSearch) {\n const customSearchResult = customSearch(searchText, row, columns);\n if (typeof customSearchResult !== 'boolean') {\n console.error('customSearch must return a boolean');\n } else {\n isSearchFound = customSearchResult;\n }\n }\n\n if (options.serverSide) {\n if (customSearch) {\n console.warn('Server-side filtering is enabled, hence custom search will be ignored.');\n }\n\n return displayRow;\n }\n\n if (isFiltered || (searchText && !isSearchFound)) return null;\n else return displayRow;\n }\n\n hasSearchText = (toSearch, toFind, caseSensitive) => {\n let stack = toSearch.toString();\n let needle = toFind.toString();\n\n if (!caseSensitive) {\n needle = needle.toLowerCase();\n stack = stack.toLowerCase();\n }\n\n return stack.indexOf(needle) >= 0;\n };\n\n updateDataCol = (row, index, value) => {\n this.setState((prevState) => {\n let changedData = cloneDeep(prevState.data);\n let filterData = cloneDeep(prevState.filterData);\n\n const tableMeta = this.getTableMeta(\n row,\n index,\n row,\n prevState.columns[index],\n prevState.data,\n prevState,\n prevState.data\n );\n const funcResult = prevState.columns[index].customBodyRender(value, tableMeta);\n\n const filterValue =\n React.isValidElement(funcResult) && funcResult.props.value\n ? funcResult.props.value\n : prevState['data'][row][index];\n\n const prevFilterIndex = filterData[index].indexOf(filterValue);\n filterData[index].splice(prevFilterIndex, 1, filterValue);\n\n changedData[row].data[index] = value;\n\n if (this.options.sortFilterList) {\n const comparator = getCollatorComparator();\n filterData[index].sort(comparator);\n }\n\n return {\n data: changedData,\n filterData: filterData,\n displayData: this.getDisplayData(\n prevState.columns,\n changedData,\n prevState.filterList,\n prevState.searchText,\n null,\n this.props\n )\n };\n });\n };\n\n getTableMeta = (rowIndex, colIndex, rowData, columnData, tableData, curState, currentTableData) => {\n const { columns, data, displayData, filterData, ...tableState } = curState;\n\n return {\n rowIndex: rowIndex,\n columnIndex: colIndex,\n columnData: columnData,\n rowData: rowData,\n tableData: tableData,\n tableState: tableState,\n currentTableData: currentTableData\n };\n };\n\n getDisplayData(columns, data, filterList, searchText, tableMeta, props) {\n let newRows = [];\n const dataForTableMeta = tableMeta ? tableMeta.tableData : props.data;\n\n for (let index = 0; index < data.length; index++) {\n const value = data[index].data;\n const displayRow = this.computeDisplayRow(\n columns,\n value,\n index,\n filterList,\n searchText,\n dataForTableMeta,\n this.options,\n props,\n data\n );\n\n if (displayRow) {\n newRows.push({\n data: displayRow,\n dataIndex: data[index].index\n });\n }\n }\n return newRows;\n }\n\n toggleViewColumn = (index) => {\n this.setState(\n (prevState) => {\n const columns = cloneDeep(prevState.columns);\n columns[index].display = columns[index].display === 'true' ? 'false' : 'true';\n return {\n columns: columns\n };\n },\n () => {\n this.setTableAction('viewColumnsChange');\n var cb = this.options.onViewColumnsChange || this.options.onColumnViewChange;\n\n if (cb) {\n cb(this.state.columns[index].name, this.state.columns[index].display === 'true' ? 'add' : 'remove');\n }\n }\n );\n };\n\n updateColumns = (newColumns) => {\n this.setState(\n (prevState) => {\n return {\n columns: newColumns\n };\n },\n () => {\n this.setTableAction('viewColumnsChange');\n var cb = this.options.onViewColumnsChange || this.options.onColumnViewChange;\n\n if (cb) {\n cb(null, 'update', newColumns);\n }\n }\n );\n };\n\n getSortDirectionLabel(sortOrder) {\n switch (sortOrder.direction) {\n case 'asc':\n return 'ascending';\n case 'desc':\n return 'descending';\n case 'none':\n return 'none';\n default:\n return '';\n }\n }\n\n getTableProps() {\n const { classes } = this.props;\n const tableProps = this.options.setTableProps() || {};\n\n tableProps.className = clsx(classes.tableRoot, tableProps.className);\n\n return tableProps;\n }\n\n toggleSortColumn = (index) => {\n this.setState(\n (prevState) => {\n let columns = cloneDeep(prevState.columns);\n let data = prevState.data;\n let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default\n\n let sequenceOrder = ['asc', 'desc'];\n if (columns[index].sortDescFirst) {\n sequenceOrder = ['desc', 'asc'];\n }\n if (columns[index].sortThirdClickReset) {\n sequenceOrder.push('none');\n }\n\n if (columns[index].name === this.state.sortOrder.name) {\n let pos = sequenceOrder.indexOf(this.state.sortOrder.direction);\n if (pos !== -1) {\n pos++;\n if (pos >= sequenceOrder.length) pos = 0;\n newOrder = sequenceOrder[pos];\n }\n }\n\n const newSortOrder = {\n name: columns[index].name,\n direction: newOrder\n };\n\n const orderLabel = this.getSortDirectionLabel(newSortOrder);\n const announceText = `Table now sorted by ${columns[index].name} : ${orderLabel}`;\n\n let newState = {\n columns: columns,\n announceText: announceText,\n activeColumn: index\n };\n\n if (this.options.serverSide) {\n newState = {\n ...newState,\n data: prevState.data,\n displayData: prevState.displayData,\n selectedRows: prevState.selectedRows,\n sortOrder: newSortOrder\n };\n } else {\n const sortedData = this.sortTable(data, index, newOrder, columns[index].sortCompare);\n\n newState = {\n ...newState,\n data: sortedData.data,\n displayData: this.getDisplayData(\n columns,\n sortedData.data,\n prevState.filterList,\n prevState.searchText,\n null,\n this.props\n ),\n selectedRows: sortedData.selectedRows,\n sortOrder: newSortOrder,\n previousSelectedRow: null\n };\n }\n\n return newState;\n },\n () => {\n this.setTableAction('sort');\n\n if (this.options.onColumnSortChange) {\n this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);\n }\n }\n );\n };\n\n changeRowsPerPage = (rows) => {\n const rowCount = this.options.count || this.state.displayData.length;\n\n this.setState(\n () => ({\n rowsPerPage: rows,\n page: getPageValue(rowCount, rows, this.state.page)\n }),\n () => {\n this.setTableAction('changeRowsPerPage');\n\n if (this.options.onChangeRowsPerPage) {\n this.options.onChangeRowsPerPage(this.state.rowsPerPage);\n }\n }\n );\n };\n\n changePage = (page) => {\n this.setState(\n () => ({\n page: page\n }),\n () => {\n this.setTableAction('changePage');\n if (this.options.onChangePage) {\n this.options.onChangePage(this.state.page);\n }\n }\n );\n };\n\n searchClose = () => {\n this.setState(\n (prevState) => ({\n searchText: null,\n displayData: this.options.serverSide\n ? prevState.displayData\n : this.getDisplayData(prevState.columns, prevState.data, prevState.filterList, null, null, this.props)\n }),\n () => {\n this.setTableAction('search');\n if (this.options.onSearchChange) {\n this.options.onSearchChange(this.state.searchText);\n }\n }\n );\n };\n\n searchTextUpdate = (text) => {\n this.setState(\n (prevState) => ({\n searchText: text && text.length ? text : null,\n page: 0,\n displayData: this.options.serverSide\n ? prevState.displayData\n : this.getDisplayData(prevState.columns, prevState.data, prevState.filterList, text, null, this.props)\n }),\n () => {\n this.setTableAction('search');\n if (this.options.onSearchChange) {\n this.options.onSearchChange(this.state.searchText);\n }\n }\n );\n };\n\n resetFilters = () => {\n this.setState(\n (prevState) => {\n const filterList = prevState.columns.map(() => []);\n\n return {\n filterList: filterList,\n displayData: this.options.serverSide\n ? prevState.displayData\n : this.getDisplayData(prevState.columns, prevState.data, filterList, prevState.searchText, null, this.props)\n };\n },\n () => {\n this.setTableAction('resetFilters');\n if (this.options.onFilterChange) {\n this.options.onFilterChange(null, this.state.filterList, 'reset', null);\n }\n }\n );\n };\n\n updateFilterByType = (filterList, index, value, type, customUpdate) => {\n const filterPos = filterList[index].findIndex((filter) => isEqual(filter, value));\n\n switch (type) {\n case 'checkbox':\n filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);\n break;\n case 'chip':\n filterPos >= 0 ? filterList[index].splice(filterPos, 1) : filterList[index].push(value);\n break;\n case 'multiselect':\n filterList[index] = value === '' ? [] : value;\n break;\n case 'dropdown':\n filterList[index] = value;\n break;\n case 'custom':\n if (customUpdate) {\n filterList = customUpdate(filterList, filterPos, index);\n } else {\n filterList[index] = value;\n }\n break;\n default:\n filterList[index] = filterPos >= 0 || value === '' ? [] : [value];\n }\n };\n\n filterUpdate = (index, value, column, type, customUpdate, next) => {\n this.setState(\n (prevState) => {\n const filterList = cloneDeep(prevState.filterList);\n this.updateFilterByType(filterList, index, value, type, customUpdate);\n\n return {\n page: 0,\n filterList: filterList,\n displayData: this.options.serverSide\n ? prevState.displayData\n : this.getDisplayData(\n prevState.columns,\n prevState.data,\n filterList,\n prevState.searchText,\n null,\n this.props\n ),\n previousSelectedRow: null\n };\n },\n () => {\n this.setTableAction('filterChange');\n if (this.options.onFilterChange) {\n this.options.onFilterChange(column, this.state.filterList, type, index, this.state.displayData);\n }\n next && next(this.state.filterList);\n }\n );\n };\n\n // Collapses or expands all expanded rows\n toggleAllExpandableRows = () => {\n let expandedRowsData = [...this.state.expandedRows.data];\n const { isRowExpandable } = this.options;\n let affecttedRows = [];\n\n if (expandedRowsData.length > 0) {\n // collapse all\n for (let ii = expandedRowsData.length - 1; ii >= 0; ii--) {\n let item = expandedRowsData[ii];\n if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {\n affecttedRows.push(expandedRowsData.splice(ii, 1));\n }\n }\n } else {\n // expand all\n for (let ii = 0; ii < this.state.data.length; ii++) {\n let item = this.state.data[ii];\n if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {\n if (this.state.expandedRows.lookup[item.index] !== true) {\n let newItem = {\n index: ii,\n dataIndex: item.index\n };\n expandedRowsData.push(newItem);\n affecttedRows.push(newItem);\n }\n }\n }\n }\n\n this.setState(\n {\n expandedRows: {\n lookup: buildMap(expandedRowsData),\n data: expandedRowsData\n }\n },\n () => {\n this.setTableAction('expandRow');\n if (this.options.onRowExpansionChange) {\n this.options.onRowExpansionChange(\n affecttedRows,\n this.state.expandedRows.data,\n this.state.expandedRows.data.map((item) => item.dataIndex)\n );\n }\n }\n );\n };\n\n areAllRowsExpanded = () => {\n return this.state.expandedRows.data.length === this.state.data.length;\n };\n\n updateColumnOrder = (columnOrder, columnIndex, newPosition) => {\n this.setState(\n (prevState) => {\n return {\n columnOrder\n };\n },\n () => {\n this.setTableAction('columnOrderChange');\n if (this.options.onColumnOrderChange) {\n this.options.onColumnOrderChange(this.state.columnOrder, columnIndex, newPosition);\n }\n }\n );\n };\n\n selectRowDelete = () => {\n const { selectedRows, data, filterList } = this.state;\n\n const selectedMap = buildMap(selectedRows.data);\n const cleanRows = data.filter(({ index }) => !selectedMap[index]);\n\n if (this.options.onRowsDelete) {\n if (\n this.options.onRowsDelete(\n selectedRows,\n cleanRows.map((ii) => ii.data)\n ) === false\n )\n return;\n }\n\n this.setTableData(\n {\n columns: this.props.columns,\n data: cleanRows,\n options: {\n filterList: filterList\n }\n },\n TABLE_LOAD.UPDATE,\n true,\n () => {\n this.setTableAction('rowDelete');\n }\n );\n };\n\n toggleExpandRow = (row) => {\n const { dataIndex } = row;\n const { isRowExpandable } = this.options;\n let { expandedRows } = this.state;\n const expandedRowsData = [...expandedRows.data];\n let shouldCollapseExpandedRow = false;\n let hasRemovedRow = false;\n let removedRow = [];\n\n for (var cIndex = 0; cIndex < expandedRowsData.length; cIndex++) {\n if (expandedRowsData[cIndex].dataIndex === dataIndex) {\n shouldCollapseExpandedRow = true;\n break;\n }\n }\n\n if (shouldCollapseExpandedRow) {\n if ((isRowExpandable && isRowExpandable(dataIndex, expandedRows)) || !isRowExpandable) {\n removedRow = expandedRowsData.splice(cIndex, 1);\n hasRemovedRow = true;\n }\n } else {\n if (isRowExpandable && isRowExpandable(dataIndex, expandedRows)) expandedRowsData.push(row);\n else if (!isRowExpandable) expandedRowsData.push(row);\n }\n\n this.setState(\n {\n curExpandedRows: hasRemovedRow ? removedRow : [row],\n expandedRows: {\n lookup: buildMap(expandedRowsData),\n data: expandedRowsData\n }\n },\n () => {\n this.setTableAction('rowExpansionChange');\n if (this.options.onRowExpansionChange || this.options.onRowsExpand) {\n let expandCallback = this.options.onRowExpansionChange || this.options.onRowsExpand;\n expandCallback(this.state.curExpandedRows, this.state.expandedRows.data);\n }\n }\n );\n };\n\n selectRowUpdate = (type, value, shiftAdjacentRows = []) => {\n // safety check\n const { selectableRows } = this.options;\n if (selectableRows === 'none') {\n return;\n }\n\n if (type === 'head') {\n const { isRowSelectable } = this.options;\n this.setState(\n (prevState) => {\n const { displayData, selectedRows: prevSelectedRows } = prevState;\n const selectedRowsLen = prevState.selectedRows.data.length;\n let isDeselect =\n selectedRowsLen === displayData.length || (selectedRowsLen < displayData.length && selectedRowsLen > 0);\n\n let selectedRows = displayData.reduce((arr, d, i) => {\n const selected = isRowSelectable ? isRowSelectable(displayData[i].dataIndex, prevSelectedRows) : true;\n selected && arr.push({ index: i, dataIndex: displayData[i].dataIndex });\n return arr;\n }, []);\n\n let newRows = [...selectedRows];\n let selectedMap = buildMap(newRows);\n\n // if the select toolbar is disabled, the rules are a little different\n if (this.options.selectToolbarPlacement === STP.NONE) {\n if (selectedRowsLen > displayData.length) {\n isDeselect = true;\n } else {\n for (let ii = 0; ii < displayData.length; ii++) {\n if (!selectedMap[displayData[ii].dataIndex]) {\n isDeselect = true;\n }\n }\n }\n }\n\n if (isDeselect) {\n newRows = prevState.selectedRows.data.filter(({ dataIndex }) => !selectedMap[dataIndex]);\n selectedMap = buildMap(newRows);\n }\n\n return {\n curSelectedRows: newRows,\n selectedRows: {\n data: newRows,\n lookup: selectedMap\n },\n previousSelectedRow: null\n };\n },\n () => {\n this.setTableAction('rowSelectionChange');\n if (this.options.onRowSelectionChange) {\n this.options.onRowSelectionChange(\n this.state.curSelectedRows,\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n } else if (this.options.onRowsSelect) {\n this.options.onRowsSelect(\n this.state.curSelectedRows,\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n }\n }\n );\n } else if (type === 'cell') {\n this.setState(\n (prevState) => {\n const { dataIndex } = value;\n let selectedRows = [...prevState.selectedRows.data];\n let rowPos = -1;\n\n for (let cIndex = 0; cIndex < selectedRows.length; cIndex++) {\n if (selectedRows[cIndex].dataIndex === dataIndex) {\n rowPos = cIndex;\n break;\n }\n }\n\n if (rowPos >= 0) {\n selectedRows.splice(rowPos, 1);\n\n // handle rows affected by shift+click\n if (shiftAdjacentRows.length > 0) {\n let shiftAdjacentMap = buildMap(shiftAdjacentRows);\n for (let cIndex = selectedRows.length - 1; cIndex >= 0; cIndex--) {\n if (shiftAdjacentMap[selectedRows[cIndex].dataIndex]) {\n selectedRows.splice(cIndex, 1);\n }\n }\n }\n } else if (selectableRows === 'single') {\n selectedRows = [value];\n } else {\n // multiple\n selectedRows.push(value);\n\n // handle rows affected by shift+click\n if (shiftAdjacentRows.length > 0) {\n let selectedMap = buildMap(selectedRows);\n shiftAdjacentRows.forEach((aRow) => {\n if (!selectedMap[aRow.dataIndex]) {\n selectedRows.push(aRow);\n }\n });\n }\n }\n\n return {\n selectedRows: {\n lookup: buildMap(selectedRows),\n data: selectedRows\n },\n previousSelectedRow: value\n };\n },\n () => {\n this.setTableAction('rowSelectionChange');\n if (this.options.onRowSelectionChange) {\n this.options.onRowSelectionChange(\n [value],\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n } else if (this.options.onRowsSelect) {\n this.options.onRowsSelect(\n [value],\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n }\n }\n );\n } else if (type === 'custom') {\n const { displayData } = this.state;\n\n const data = value.map((row) => ({ index: row, dataIndex: displayData[row].dataIndex }));\n const lookup = buildMap(data);\n\n this.setState(\n {\n selectedRows: { data, lookup },\n previousSelectedRow: null\n },\n () => {\n this.setTableAction('rowSelectionChange');\n if (this.options.onRowSelectionChange) {\n this.options.onRowSelectionChange(\n this.state.selectedRows.data,\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n } else if (this.options.onRowsSelect) {\n this.options.onRowsSelect(\n this.state.selectedRows.data,\n this.state.selectedRows.data,\n this.state.selectedRows.data.map((item) => item.dataIndex)\n );\n }\n }\n );\n }\n };\n\n sortTable(data, col, order, columnSortCompare = null) {\n let hasCustomTableSort = this.options.customSort && !columnSortCompare;\n let meta = { selectedRows: this.state.selectedRows }; // meta for customSort\n let dataSrc = hasCustomTableSort\n ? this.options.customSort(data, col, order || (this.options.sortDescFirst ? 'desc' : 'asc'), meta)\n : data;\n\n // reset the order by index\n let noSortData;\n if (order === 'none') {\n noSortData = data.reduce((r, i) => {\n r[i.index] = i;\n return r;\n }, []);\n }\n\n let sortedData = dataSrc.map((row, sIndex) => ({\n data: row.data[col],\n rowData: row.data,\n position: sIndex,\n rowSelected: this.state.selectedRows.lookup[row.index] ? true : false\n }));\n\n if (!hasCustomTableSort) {\n const sortFn = columnSortCompare || sortCompare;\n sortedData.sort(sortFn(order));\n }\n\n let tableData = [];\n let selectedRows = [];\n\n for (let i = 0; i < sortedData.length; i++) {\n const row = sortedData[i];\n tableData.push(dataSrc[row.position]);\n if (row.rowSelected) {\n selectedRows.push({ index: i, dataIndex: dataSrc[row.position].index });\n }\n }\n\n return {\n data: order === 'none' ? noSortData : tableData,\n selectedRows: {\n lookup: buildMap(selectedRows),\n data: selectedRows\n }\n };\n }\n\n render() {\n const {\n classes,\n className,\n title,\n components: {\n TableBody,\n TableFilterList,\n TableFooter,\n TableHead,\n TableResize,\n TableToolbar,\n TableToolbarSelect,\n DragDropBackend = HTML5Backend\n }\n } = this.props;\n const {\n announceText,\n activeColumn,\n data,\n displayData,\n columns,\n page,\n filterData,\n filterList,\n selectedRows,\n previousSelectedRow,\n expandedRows,\n searchText,\n sortOrder,\n serverSideFilterList,\n columnOrder\n } = this.state;\n\n const TableBodyComponent = TableBody || DefaultTableBody;\n const TableFilterListComponent = TableFilterList || DefaultTableFilterList;\n const TableFooterComponent = TableFooter || DefaultTableFooter;\n const TableHeadComponent = TableHead || DefaultTableHead;\n const TableResizeComponent = TableResize || DefaultTableResize;\n const TableToolbarComponent = TableToolbar || DefaultTableToolbar;\n const TableToolbarSelectComponent = TableToolbarSelect || DefaultTableToolbarSelect;\n\n const rowCount = this.state.count || displayData.length;\n const rowsPerPage = this.options.pagination ? this.state.rowsPerPage : displayData.length;\n const showToolbar = hasToolbarItem(this.options, title);\n const columnNames = columns.map((column) => ({\n name: column.name,\n filterType: column.filterType || this.options.filterType\n }));\n const responsiveOption = this.options.responsive;\n let paperClasses = `${classes.paper} ${className}`;\n let maxHeight = this.options.tableBodyMaxHeight;\n let responsiveClass;\n\n switch (responsiveOption) {\n // deprecated\n case 'scroll':\n responsiveClass = classes.responsiveScroll;\n maxHeight = '499px';\n break;\n // deprecated\n case 'scrollMaxHeight':\n responsiveClass = classes.responsiveScrollMaxHeight;\n maxHeight = '499px';\n break;\n // deprecated\n case 'scrollFullHeight':\n responsiveClass = classes.responsiveScrollFullHeight;\n maxHeight = 'none';\n break;\n // deprecated\n case 'scrollFullHeightFullWidth':\n responsiveClass = classes.responsiveScrollFullHeight;\n paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;\n break;\n // deprecated\n case 'stacked':\n responsiveClass = classes.responsiveStacked;\n maxHeight = 'none';\n break;\n // deprecated\n case 'stackedFullWidth':\n responsiveClass = classes.responsiveStackedFullWidth;\n paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;\n maxHeight = 'none';\n break;\n\n default:\n responsiveClass = classes.responsiveBase;\n break;\n }\n\n var tableHeightVal = {};\n if (maxHeight) {\n tableHeightVal.maxHeight = maxHeight;\n }\n if (this.options.tableBodyHeight) {\n tableHeightVal.height = this.options.tableBodyHeight;\n }\n\n const tableProps = this.options.setTableProps ? this.options.setTableProps() || {} : {};\n const tableClassNames = clsx(classes.tableRoot, tableProps.className);\n delete tableProps.className; // remove className from props to avoid the className being applied twice\n\n const dndProps = {};\n if (typeof window !== 'undefined') {\n dndProps.context = window;\n }\n\n return (\n \n {selectedRows.data.length > 0 && [STP.ABOVE, STP.REPLACE].indexOf(this.options.selectToolbarPlacement) !== -1 && (\n {\n if (c.customFilterListOptions && c.customFilterListOptions.render) return c.customFilterListOptions.render;\n // DEPRECATED: This option is being replaced with customFilterListOptions.render\n if (c.customFilterListRender) return c.customFilterListRender;\n\n return (f) => f;\n })}\n customFilterListUpdate={columns.map((c) => {\n return c.customFilterListOptions && c.customFilterListOptions.update\n ? c.customFilterListOptions.update\n : null;\n })}\n filterList={filterList}\n filterUpdate={this.filterUpdate}\n columnNames={columnNames}\n />\n \n {(this.options.resizableColumns === true ||\n (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (\n
(this.updateDividers = fn)}\n setResizeable={(fn) => (this.setHeadResizeable = fn)}\n options={this.props.options}\n tableId={this.options.tableId}\n />\n )}\n {(() => {\n const components = (\n (this.tableRef = el)}\n tabIndex={'0'}\n role={'grid'}\n className={tableClassNames}\n {...tableProps}\n >\n {title} \n \n {components}\n \n );\n }\n\n return components;\n })()}\n \n {announceText}\n
\n \n );\n }\n}\n\nexport default withStyles(defaultTableStyles, { name: 'MUIDataTable' })(MUIDataTable);\n","/* eslint-disable */\nimport React, { useEffect } from 'react';\nimport Grow from '@material-ui/core/Grow';\nimport TextField from '@material-ui/core/TextField';\nimport SearchIcon from '@material-ui/icons/Search';\nimport IconButton from '@material-ui/core/IconButton';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport { withStyles } from '@material-ui/core/styles';\n\nfunction debounce(func, wait, immediate) {\n var timeout;\n return function () {\n var context = this,\n args = arguments;\n var later = function () {\n timeout = null;\n if (!immediate) func.apply(context, args);\n };\n var callNow = immediate && !timeout;\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n if (callNow) func.apply(context, args);\n };\n}\n\nconst defaultStyles = (theme) => ({\n main: {\n display: 'flex',\n flex: '1 0 auto'\n },\n searchIcon: {\n color: theme.palette.text.secondary,\n marginTop: '10px',\n marginRight: '8px'\n },\n searchText: {\n flex: '0.8 0'\n },\n clearIcon: {\n '&:hover': {\n color: theme.palette.error.main\n }\n }\n});\n\nclass _DebounceTableSearch extends React.Component {\n handleTextChangeWrapper = (debouncedSearch) => {\n return function (event) {\n debouncedSearch(event.target.value);\n };\n };\n\n componentDidMount() {\n document.addEventListener('keydown', this.onKeyDown, false);\n }\n\n componentWillUnmount() {\n document.removeEventListener('keydown', this.onKeyDown, false);\n }\n\n onKeyDown = (event) => {\n if (event.keyCode === 27) {\n this.props.onHide();\n }\n };\n\n render() {\n const { classes, options, onHide, searchText, debounceWait } = this.props;\n\n const debouncedSearch = debounce((value) => {\n this.props.onSearch(value);\n }, debounceWait);\n\n return (\n \n \n (this.searchField = el)}\n placeholder={options.searchPlaceholder}\n {...(options.searchProps ? options.searchProps : {})}\n />\n \n \n
\n \n );\n }\n}\n\nvar DebounceTableSearch = withStyles(defaultStyles, { name: 'MUIDataTableSearch' })(_DebounceTableSearch);\nexport { DebounceTableSearch };\n\nexport function debounceSearchRender(debounceWait = 200) {\n return (searchText, handleSearch, hideSearch, options) => {\n return (\n \n handleProfileChange('FirstName', e.target.value)}\n error={profileErrors.FirstName ? true : false}\n helperText={profileErrors.FirstName}\n />\n handleProfileChange('LastName', e.target.value)}\n error={profileErrors.LastName ? true : false}\n helperText={profileErrors.LastName}\n />\n {/* handleProfileChange('UserName', e.target.value)}\n /> */}\n handleProfileChange('SSN', e.target.value)}\n />\n handleProfileChange('Email', e.target.value)}\n error={profileErrors.Email ? true : false}\n helperText={profileErrors.Email}\n />\n\n handleProfileChange('BirthDay', e.target.value)}\n error={profileErrors.BirthDay ? true : false}\n helperText={profileErrors.BirthDay}\n />\n\n
\n \n \n Update\n \n\n
\n \n handleChangeTerminateDate(e.target.value)}\n defaultValue={\n fetchedData.termDate === null && viewDataOnly\n ? \"N/A\"\n : convertToDatePicker(fetchedData.termDate)\n }\n />\n {showTermButton ?\n \n Terminate\n : <>}\n {fetchedData?.termDate && moment(fetchedData?.termDate).year() > 1900 ?\n handleChangeRehireDate(e.target.value)}\n defaultValue={\n fetchedData.termDate === null && viewDataOnly\n ? \"N/A\"\n : convertToDatePicker(fetchedData.termDate)\n }\n /> : <>}\n {showRehireButton ?\n \n Rehire\n : <>}\n
\n \n \n Add Employment\n \n } />\n\n\n {/* Add Employment Modal */}\n { setAddEmploymentModal(false) }}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n className={ModalStyles.empDataModal}\n maxWidth=\"lg\"\n >\n \n Add Employment\n \n \n\n handleEmploymentChange('JobTitle', e.target.value)}\n />\n handleEmploymentChange('LocationCode', e.target.value)}\n />\n handleEmploymentChange('BeginDate', e.target.value)}\n error={profileErrors.BeginDate ? true : false}\n helperText={profileErrors.BeginDate}\n />\n handleEmploymentChange('EndDate', e.target.value)}\n error={profileErrors.EndDate ? true : false}\n helperText={profileErrors.EndDate}\n />\n\n handleEmploymentChange('HireDate', e.target.value)}\n />\n handleEmploymentChange('RehireDate', e.target.value)}\n />\n handleEmploymentChange('EmployeeNotes', e.target.value)}\n />\n \n Employee Group \n handleEmploymentChange('EmployeeGroupID', e.target.value)}\n error={employmentErrors.EmployeeGroupID ? true : false}\n >\n {employeeGroups.map((val, i) => {val.employeeGroupName} )}\n \n {employmentErrors.EmployeeGroupID} \n \n \n Employment Status \n handleEmploymentChange('EmploymentStatusID', e.target.value)}\n error={employmentErrors.EmploymentStatusID ? true : false}\n >\n {employmentStatus.map((val, i) => {val.employmentStatusName} )}\n\n \n {employmentErrors.EmploymentStatusID} \n \n\n $,\n }}\n className={ModalStyles.cField}\n label=\"Hourly Salary\"\n defaultValue={newEmployment.HourlySalary}\n onChange={e => handleEmploymentChange('HourlySalary', e.target.value)}\n />\n $,\n }}\n className={ModalStyles.cField}\n label=\"Weekly Salary\"\n defaultValue={newEmployment.WeeklySalary}\n onChange={e => handleEmploymentChange('WeeklySalary', e.target.value)}\n />\n $,\n }}\n className={ModalStyles.cField}\n label=\"Annual Salary\"\n defaultValue={newEmployment.AnnualSalary}\n onChange={e => handleEmploymentChange('AnnualSalary', e.target.value)}\n />\n \n \n \n Save\n \n { setAddEmploymentModal(false) }}\n className={ButtonStyle.CcancelBtn}\n >\n Close\n \n \n \n \n )\n}","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputLabel, Select, MenuItem, FormControl, Input, FormHelperText } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport _ from \"lodash\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst UpdateEmployeeBenefit = forwardRef(({ fetchedData,benefitPackageId,benefits, errors}, ref) => {\n const [formData, setFormData] = useState(fetchedData);\n const [costShares, setCostShares] = useState([]);\n\n useEffect(() => {\n fetchCostShare(benefitPackageId, fetchedData.benefitID)\n }, [fetchedData]);\n\n const fetchCostShare = (benefitPackageId, benefitId) => {\n console.log(benefitPackageId, \"benefitPackageId\");\n console.log(benefitId, \"benefitId\");\n apiGet(apiUrls.getCostShares(benefitPackageId, benefitId)).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchCostShare\");\n setCostShares(lovResponseData)\n }\n )\n }\n\n const handleChange = _.debounce((name, val, costShares) => {\n console.log(' in handle change Change Employee Benefits')\n let updatedValue = { [name]: val };\n if (name == 'coverageLevelID') {\n console.log(costShares, ' in handle change')\n let cs = costShares.find(c => c.coverageLevelID == val);\n updatedValue = { [name]: val, 'coverage': cs.coverageLevelName };\n }\n if (name == 'benefitID') {\n fetchCostShare(benefitPackageId, val)\n }\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n if (ref?.current) {\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n }\n }, 500);\n\n\n return (\n <>\n\n \n Benefit \n handleChange('benefitID', e.target.value)}\n error={errors?.benefitID ? true : false}\n helperText={errors?.benefitID}\n >\n\n { _.uniqBy(benefits.map(m=>({benefitID: m.benefitID, benefit: m.benefit})), 'benefitID').map((val, i) => {val.benefit} )}\n \n \n \n}\n\n \n Coverage Level \n handleChange('coverageLevelID', e.target.value, costShares)}\n error={errors?.coverageLevelID ? true : false}\n helperText={errors?.coverageLevelID}\n >\n\n {costShares.map((val, i) => {val.coverageLevelName} )}\n \n \n\n handleChange('coverageAmount', e.target.value)}\n error={errors?.coverageAmount ? true : false}\n helperText={errors?.coverageAmount}\n />\n\n handleChange('eeMonthlyCost', e.target.value)}\n error={errors?.eeMonthlyCost ? true : false}\n helperText={errors?.eeMonthlyCost}\n />\n\n handleChange('erMonthlyCost', e.target.value)}\n error={errors?.erMonthlyCost ? true : false}\n helperText={errors?.erMonthlyCost}\n />\n\n\n Effective Date \n {errors?.startDate} \n \n\n \n Termination Date \n {errors?.termDate} \n \n\n \n )\n});\n\nexport default UpdateEmployeeBenefit;","import React, { useContext, useState, useEffect, useMemo, useRef } from \"react\";\nimport PropTypes from 'prop-types';\nimport { alpha } from '@mui/material/styles';\nimport {\n Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Box, IconButton, Collapse, Typography, FormControl, InputLabel, Select,\n Menu, MenuItem, Dialog, DialogActions, DialogContent, DialogTitle, Button\n} from \"@mui/material\";\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport moment from \"moment\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport { Utils } from \"common/Utils\";\nimport TableAllData from \"../CustomTable/TableAllData\";\nimport AximTooltip from \"components/AximTooltip\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport UpdateEmployeeBenefit from \"area/employer/EmployeeDashboard/UpdateEmployeeBenefit\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nconst formatDate = (date) => date === null ? \"N/A\" : moment(date).format(\"MM/DD/YYYY\");\n\nfunction Row(props) {\n const { row } = props;\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n \n *': { borderBottom: 'unset' }, ...(isOpen && { backgroundColor: (theme) => alpha(theme.palette.secondary.main, .2) }) }}>\n {/* \n setIsOpen(!isOpen)}\n >\n {isOpen ? */}\n \n {row.benefit}\n \n {row.status} \n {row.benefitType} \n {formatDate(row.startDate)} \n {formatDate(row.endDate)} \n {row.coverage} \n {row.carrier} \n \n \n )\n}\n\nRow.propTypes = {\n row: PropTypes.shape({\n benefit: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n benefitType: PropTypes.string.isRequired,\n history: PropTypes.arrayOf(\n PropTypes.shape({\n startDate: PropTypes.instanceOf(Date).isRequired,\n endDate: PropTypes.instanceOf(Date).isRequired,\n coverageAmount: PropTypes.number.isRequired,\n eeMonthlyCost: PropTypes.number.isRequired,\n erMonthlyCost: PropTypes.number.isRequired,\n }),\n ).isRequired,\n startDate: PropTypes.instanceOf(Date).isRequired,\n endDate: PropTypes.instanceOf(Date).isRequired,\n coverage: PropTypes.string.isRequired,\n carrier: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nfunction Benefits({ employeeId, insuredId, benefitPackageId, benefitDate }) {\n const editBenefitsRef = useRef({});\n const { companyId } = useContext(PrivateRoutesContext);\n\n const [planPeriods, setPlanPeriods] = useState([]);\n const [selectedPlanPeriod, setSelectedPlanPeriod] = useState('');\n\n const [allBenefitPeriods, setAllBenefitPeriods] = useState([]);\n\n const [selectedBenefitPeriod, setSelectedBenefitPeriod] = useState('');\n const [benefitPeriods, setBenefitPeriods] = useState([]);\n const [enrollments, setEnrollments] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [openEditBenefitsModal, setOpenEditBenefitsModal] = useState(false)\n const [fetchedEditBenefitsData, setFetchedEditBenefitsData] = useState(null)\n const [availableBenefits, setAvailableBenefits] = useState([])\n useEffect(() => {\n apiGet(apiUrls.getEmpBenefitsDropdowns(employeeId)).then(\n (response) => {\n setPlanPeriods(response.data);\n\n if (response.data.length > 0) {\n setSelectedPlanPeriod(response.data[0].planPeriodId);\n }\n }\n )\n .catch((e) => {\n\n });\n }, [employeeId])\n\n useEffect(() => {\n // TODO: Update this to use employeeId\n apiGet(apiUrls.getBenefitPayPeriods(companyId)).then(\n (response) => {\n //setBenefitPeriods(response.data);\n setAllBenefitPeriods(response.data);\n\n }\n )\n .catch((e) => {\n\n });\n }, [companyId]);\n\n useEffect(() => {\n var pp = planPeriods.find(p => p.planPeriodId === selectedPlanPeriod);\n\n if (pp) {\n var bp = allBenefitPeriods.filter(a => new Date(pp.beginDate) <= new Date(a.benefitDate) && new Date(a.benefitDate) <= new Date(pp.endDate));\n\n setBenefitPeriods(bp);\n }\n }, [selectedPlanPeriod, allBenefitPeriods])\n\n useEffect(() => {\n if (benefitPeriods.length > 0) {\n let closed = benefitPeriods.filter(x => x.statusCode === 'CLOSE');\n if (closed.length === 0) {\n let currentTime = new Date();\n let latest = benefitPeriods.filter(x => Date.parse(x.benefitDate) < currentTime);\n\n if (latest.length === 0) {\n setSelectedBenefitPeriod(benefitPeriods[0].payPeriodID);\n }\n else {\n setSelectedBenefitPeriod(latest[0].payPeriodID);\n }\n }\n else {\n setSelectedBenefitPeriod(closed[0].payPeriodID);\n }\n }\n }, [benefitPeriods])\n\n useEffect(() => {\n if (selectedBenefitPeriod) {\n setIsLoading(true);\n\n apiGet(apiUrls.getEmpEnrollments(employeeId, selectedBenefitPeriod)).then(\n (response) => {\n console.log(response.data, 'erollment data ');\n setEnrollments(response.data);\n setIsLoading(false);\n }\n )\n .catch((e) => {\n\n });\n }\n }, [employeeId, selectedBenefitPeriod]);\n\n const openEditBenefit = (row) => {\n console.log(row.original, 'data')\n setOpenEditBenefitsModal(true)\n setFetchedEditBenefitsData(row.original)\n setAvailableBenefits([])\n }\n\n const openAddBenefit = () => {\n setOpenEditBenefitsModal(true)\n let bp = benefitPeriods.find(b => b.payPeriodID == selectedBenefitPeriod);\n let benefitDate = Utils.convertToDatePicker(bp.benefitDate);\n console.log(bp, 'bp')\n console.log(benefitDate, 'benefitDate')\n apiGet(apiUrls.getAvailableEnrollments(companyId, insuredId, benefitPackageId, benefitDate)).then(\n (response) => {\n console.log(response.data, 'data');\n setAvailableBenefits(response.data)\n }\n )\n .catch((e) => {\n console.log(e, 'error')\n });\n let newEnrollment =\n {\n enrollmentID: Utils.emptyGuid(),\n insuredID: insuredId,\n benefitCoverageID: null,\n benefit: null,\n status: \"Active\",\n benefitType: null,\n coverage: null,\n carrier: null,\n benefitID: null,\n coverageLevelID: null,\n benefitTypeID: null,\n planPeriodID: null,\n startDate: null,\n endDate: '9999-01-01',\n coverageAmount: null,\n eeMonthlyCost: null,\n erMonthlyCost: null\n }\n setFetchedEditBenefitsData(newEnrollment)\n }\n\n const columns = useMemo(() => [\n {\n Header: \"Edit\",\n accessor: \"enrollmentID\",\n Cell: ({ row }) => (\n \n { openEditBenefit(row) }}>\n \n \n ),\n },\n {\n Header: \"BenefitType\",\n accessor: \"benefitType\",\n },\n {\n Header: \"Benefit\",\n accessor: \"benefit\",\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n },\n {\n Header: \"Start Date\",\n accessor: (cell) => Utils.formatDate(cell.startDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.startDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Coverage\",\n accessor: \"coverage\",\n },\n {\n Header: \"Carrier\",\n accessor: \"carrier\",\n },\n ]);\n\n const handleEditBenefitSave = () => {\n console.log(editBenefitsRef)\n if (editBenefitsRef != null && editBenefitsRef.current.formData !== undefined) {\n let data = editBenefitsRef.current.formData;\n let postData = {\n EnrollmentID: data.enrollmentID,\n InsuredID: data.insuredID,\n BenefitID: data.benefitID,\n CoverageLevelID: data.coverageLevelID,\n StartDate: data.startDate,\n EndDate: (data.termDate ? data.termDate : data.endDate),\n CoverageAmount: data.coverageAmount,\n EEMonthlyCost: (data.eeMonthlyCost == \"\" ? null : data.eeMonthlyCost),\n ERMonthlyCost: (data.erMonthlyCost == \"\" ? null : data.erMonthlyCost),\n };\n console.log(postData, 'postData')\n apiPost(apiUrls.postEnrollment(employeeId), postData)\n .then((response) => {\n console.log(response, 'update enrollment response')\n setOpenEditBenefitsModal(false)\n\n apiGet(apiUrls.getEmpBenefitsDropdowns(employeeId)).then(\n (response) => {\n setPlanPeriods(response.data);\n\n if (response.data.length > 0) {\n setSelectedPlanPeriod(response.data[0].planPeriodId);\n }\n }\n )\n .catch((e) => {\n\n });\n })\n .catch((e) => {\n console.log(e, \"CATCHED\");\n })\n .finally(() => {\n //setSaving(false);\n });;\n\n }\n else {\n console.log('no change')\n }\n }\n\n return (\n <>\n \n \n setSelectedPlanPeriod(e.target.value)}\n pairs={planPeriods.map(p => { return { value: p.planPeriodId, text: p.label } })}\n />\n\n setSelectedBenefitPeriod(e.target.value)}\n pairs={benefitPeriods.map(x => ({ value: x.payPeriodID, text: Utils.formatDate(x.benefitDate) }))}\n />\n {selectedBenefitPeriod ? Add Benefit : <>}\n \n \n \n \n\n {/* Update Benefits Modal */}\n { setOpenEditBenefitsModal(false) }}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n className={ModalStyles.empDataModal}\n maxWidth=\"lg\"\n >\n \n Update Employee Benefits\n \n \n\n {fetchedEditBenefitsData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Save\n \n { setOpenEditBenefitsModal(false) }}\n className={ButtonStyle.CcancelBtn}\n >\n Close\n \n \n \n\n \n );\n}\n\nexport default Benefits;\n","import React, { useState, useEffect } from \"react\";\nimport { Button, TextField } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport { Utils } from \"common/Utils\";\n\nimport moment from \"moment\";\nimport AximDropdown from \"./Dropdown/AximDropdown\";\n\nexport default function TimeFrameDateSelector({ payPeriodsUrl, handleView, isViewEnabled, doUseName, defaultValue }) {\n const [timeframe, setTimeframe] = useState(\"Monthly\");\n const [selectedStartDate, setSelectedStartDate] = useState(\"\");\n const [startDatesDropdown, setStartDatesDropdown] = useState([]);\n\n const [selectedYear, setSelectedYear] = useState(\"\");\n const [yearDropdown, setYearDropdown] = useState([]);\n\n const [selectedQuarter, setSelectedQuarter] = useState(\"\");\n const [quarterDropdown, setQuarterDropdown] = useState([]);\n\n const [selectedYearOnly, setSelectedYearOnly] = useState(\"\");\n \n const [name, setName] = useState(\"\");\n\n const [isLoadingData, setIsLoadingData] = useState(false);\n const [doView, setDoView] = useState(false);\n\n useEffect(() => {\n setIsLoadingData(true);\n\n apiGet(payPeriodsUrl).then((response) => {\n setTimeframe(\"Monthly\");\n var found = null;\n\n var dates = response.data.map(d => new Date(d));\n setStartDatesDropdown(dates);\n if (dates.length > 0) {\n found = dates.find(e => Utils.formatDate(e) === Utils.formatDate(defaultValue));\n \n if (found) {\n setSelectedStartDate(found);\n }\n else {\n setSelectedStartDate(dates[0]);\n }\n }\n\n var years = dates.map(d => d.getYear() + 1900).filter(onlyUnique);\n setYearDropdown(years);\n if (years.length > 0) {\n setSelectedYear(years[0]);\n setSelectedYearOnly(years[0]);\n }\n\n setIsLoadingData(false);\n\n if (found) {\n setDoView(true);\n }\n });\n },[payPeriodsUrl,defaultValue]);\n\n useEffect(() => {\n var quarters = startDatesDropdown.filter(d => d.getYear() + 1900 === selectedYear)\n .map(d => Math.floor(d.getMonth() / 3) + 1)\n .filter(onlyUnique)\n .map(d => `${d}${nth(d)}`);\n\n setQuarterDropdown(quarters)\n if (quarters.length > 0) {\n setSelectedQuarter(quarters[0]);\n }\n },[selectedYear]);\n\n useEffect(() => {\n if (doView) {\n view();\n\n setDoView(false);\n }\n },[doView])\n\n const onlyUnique = (value, index, self) => {\n return self.indexOf(value) === index;\n }\n\n const nth = (n) => {return[\"st\",\"nd\",\"rd\"][((n+90)%100-10)%10-1]||\"th\"}\n\n const view = () => {\n let startDate = '';\n let endDate = '';\n \n if (timeframe === 'Monthly') {\n startDate = moment(selectedStartDate).format('yyyy-MM-DD');\n }\n else if (timeframe === 'Yearly') {\n startDate = moment(new Date(selectedYearOnly, 0, 1)).format('yyyy-MM-DD');\n endDate = moment(new Date(selectedYearOnly, 11, 31)).format('yyyy-MM-DD');\n }\n else if (timeframe === 'Quarterly') {\n if (selectedQuarter === '1st') {\n startDate = moment(new Date(selectedYear, 0, 1)).format('yyyy-MM-DD');\n endDate = moment(new Date(selectedYear, 2, 31)).format('yyyy-MM-DD');\n }\n else if (selectedQuarter === '2nd') {\n startDate = moment(new Date(selectedYear, 3, 1)).format('yyyy-MM-DD');\n endDate = moment(new Date(selectedYear, 5, 30)).format('yyyy-MM-DD');\n }\n else if (selectedQuarter === '3rd') {\n startDate = moment(new Date(selectedYear, 6, 1)).format('yyyy-MM-DD');\n endDate = moment(new Date(selectedYear, 8, 30)).format('yyyy-MM-DD');\n }\n else if (selectedQuarter === '4th') {\n startDate = moment(new Date(selectedYear, 9, 1)).format('yyyy-MM-DD');\n endDate = moment(new Date(selectedYear, 11, 31)).format('yyyy-MM-DD');\n }\n }\n\n handleView(timeframe, startDate, endDate, name);\n }\n\n return (\n <>\n setTimeframe(e.target.value)}\n value={timeframe}\n pairs={[{value: \"Monthly\"}, {value: \"Quarterly\"}, {value: \"Yearly\"}]}\n disabled={isLoadingData || !isViewEnabled}\n />\n\n {timeframe === \"Monthly\" ? (\n setSelectedStartDate(e.target.value)}\n value={selectedStartDate}\n pairs={startDatesDropdown.sort((a,b) => b-a).map(d => ({ value: d, text: moment(d).format(\"MMMM DD, YYYY\")}))}\n disabled={isLoadingData || !isViewEnabled}\n />\n ) : timeframe === \"Quarterly\" ? (\n <>\n setSelectedYear(e.target.value)}\n value={selectedYear}\n pairs={yearDropdown.map(y => ({ value: y }))}\n disabled={isLoadingData || !isViewEnabled}\n />\n setSelectedQuarter(e.target.value)}\n pairs={quarterDropdown.map(q => ({ value: q }))}\n disabled={isLoadingData || !isViewEnabled}\n />\n \n ) : timeframe === \"Yearly\" ? (\n setSelectedYearOnly(e.target.value)}\n pairs={yearDropdown.map(y => ({ value: y }))}\n disabled={isLoadingData || !isViewEnabled}\n />\n ) : null}\n\n {doUseName ?\n setName(e.target.value)}\n disabled={isLoadingData || !isViewEnabled} \n /> : null}\n\n \n \n \n \n {hasLoadedData ?\n isLoadingData ? \n \n \n \n \n Contract Code \n Pay Date \n Start Date \n End Date \n {hourTypes.length > 0 ? \n hourTypes.map(hourType => (\n {hourType.typeOfHoursName} \n )) : null}\n Total Hours \n Fringe Rate \n \n \n \n {employeeHours.map((row) => (\n \n \n {row.contractCodeCode}\n \n {moment(row.payDate).calendar()} \n {moment(row.workStart).calendar()} \n {moment(row.workEnd).calendar()} \n {hourTypes.length > 0 ? \n hourTypes.map(hourType => {\n let matchingIndex = row.employeeHours.findIndex(eh => eh.typeOfHoursName == hourType.typeOfHoursName);\n\n return (\n {matchingIndex > -1 ? row.employeeHours[matchingIndex].hours.toFixed(4) : '0.0000'} \n )\n }) : null}\n {row.totalHours.toFixed(4)} \n {row.fringeRate.toFixed(4)} \n \n ))}\n \n
\n \n : null}\n \n \n );\n}\n\nexport default Contracts;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport TableStyle from \"./Content/Table/TableStyle.module.css\";\nimport { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Box, Grid } from \"@mui/material\";\nimport moment from \"moment\";\nimport { Utils } from \"common/Utils\";\n\nfunction HWStatementDetail ({delay, statementDetails,time ,statementDisclaimers }) {\n const [visible, setVisible] = useState(false);\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n setVisible(true)\n }, delay)\n \n return () => clearTimeout(timeout)\n })\n \n let divStyle = {marginBottom: \"75px\", display:(visible?\"\":\"none\")}\n //let divStyle = {marginBottom: \"75px\"}\n let contractGroup = []\n let contractPerRow = 4\n for (let c = 0; c < statementDetails.contracts.length; c = c + contractPerRow) {\n contractGroup.push(statementDetails.contracts.slice(c, c + contractPerRow))\n }\n return (\n \n \n \n \n \n {`${statementDetails && statementDetails.lastName}, ${statementDetails && statementDetails.firstName}`}\n \n \n {statementDetails.companyName} H&W Benefit Statement {statementDetails.timePeriod} {moment(statementDetails.payDate).format(\"MMMM DD, YYYY\")}{statementDetails.endDate ? ` - ${moment(statementDetails.endDate).format(\"MMMM DD, YYYY\")}` : ''}\n \n \n \n
\n {/* CONTRACTS */}\n {contractGroup.map((contracts) => {\n return (\n \n \n \n {/* CONTRACT CODE */}\n \n \n Contract Code\n \n {/* {statementDetails.contracts[i].contractCode} */}\n {contracts.map((contract, i) => {\n return (\n \n {contract.contractCode}\n \n );\n })\n }\n \n {/* Hours */}\n {\n statementDetails.hourTypes.map(\n (hourNameType, k) => {\n return (\n \n\n \n {hourNameType}\n \n {contracts.map((contract, i) => {\n let hours = 0\n contract.hours.filter(h => h.name == hourNameType).map(item => {\n hours += item.amount\n })\n return (\n \n {Utils.roundToTwo(hours)}\n \n );\n }\n )}\n \n )\n }\n )}\n {/* Total Hours */}\n \n \n Total Hours\n \n\n {contracts.map((contract, i) => {\n let totalHours = 0\n contract.hours.map(item => {\n totalHours += item.amount\n })\n return (\n \n {Utils.roundToTwo(totalHours)}\n \n );\n })}\n \n {/* H&W Fringe Rate */}\n \n \n H&W Fringe Rate\n \n {contracts.map((contract, i) => {\n return (\n \n {Utils.formatCurrency(contract.fringeRate)}\n \n );\n })}\n \n {/* H&W Due to Employee */}\n \n \n H&W Due to Employee\n \n {contracts.map((contract, i) => {\n return (\n \n {Utils.formatCurrency(contract.totalHWDue)}\n \n );\n })}\n \n\n \n
\n \n )\n })}\n \n \n \n \n \n H&W Due to Employee Total\n \n \n {Utils.formatCurrency(statementDetails.totalHwDue)}\n \n \n \n
\n \n\n {/* COSTS */}\n \n \n \n \n \n H&W Costs\n \n \n Description\n \n \n Full Cost/Mo\n \n \n \n \n {statementDetails.benefitCost.map(\n (eeCostDetails) =>\n eeCostDetails.doDisplayEECost && (\n \n \n {eeCostDetails.eeCostLabel}\n \n \n {eeCostDetails.eeCostDescription}\n \n \n {Utils.formatCurrency(eeCostDetails.totalCost)}\n \n \n )\n )}\n \n
\n \n {/* H&W COST */}\n \n \n \n \n \n H&W Cost\n \n \n {Utils.formatCurrency(statementDetails.totalBenefitCost)}\n \n \n \n
\n \n {/* EE CREDIT */}\n \n \n \n \n \n H&W Credits\n \n \n Description\n \n Amount \n \n \n \n {/* statementDetails.benefitCost.doDisplayEECost === true ? */}\n {statementDetails.benefitCost.map(\n (eeCreditDetails) =>\n eeCreditDetails.doDisplayCredit && (\n \n \n {eeCreditDetails.creditLabel}\n \n \n {eeCreditDetails.creditDescription}\n \n \n {Utils.formatCurrency(eeCreditDetails.erCost)}\n \n \n )\n )}\n \n
\n \n {/* H&W Credits */}\n \n \n \n \n \n H&W Credits\n \n \n {Utils.formatCurrency(statementDetails.totalHWCredit)}\n \n \n \n
\n \n {/* H&W Amount Due - H&W Credits */}\n \n \n \n \n \n H&W Amount Due - H&W Credits\n \n \n {Utils.formatCurrency(statementDetails.netHWDue)}\n \n \n \n
\n \n\n {/* Hourbank Used */}\n {statementDetails.hourBankUsed !== 0 ? (\n \n \n \n \n \n Hourbank Used\n \n \n {Utils.formatCurrency(statementDetails.hourBankUsed)}\n \n \n \n
\n \n ) : (\n \"\"\n )}\n\n {/* Hourbank amount used to cover shortages */}\n {statementDetails.fringeExcessAllocation.map(\n (excessAllocationHB) => {\n if (\n excessAllocationHB.name === \"Hourbank\" &&\n excessAllocationHB.amount < 0\n ) {\n var excessAllocationHBAmount =\n excessAllocationHB.amount;\n\n excessAllocationHBAmount *= -1; // change negative value to positive of Hourbank Amount\n return (\n \n \n \n \n \n Hourbank amount used to cover shortages\n \n \n {Utils.formatCurrency(excessAllocationHBAmount)}\n \n \n \n
\n \n );\n }\n }\n )}\n\n {/* Contribution to 'fringeExcessAllocationDetails.name' from H&W */}\n \n \n \n {statementDetails.fringeExcessAllocation.map(\n (fringeExcessAllocationDetails) => {\n return (\n \n \n {`Contribution to ${fringeExcessAllocationDetails.name} from H&W`}\n \n \n {Utils.formatCurrency(fringeExcessAllocationDetails.amount)}\n \n \n // \n
\n \n\n {/* Additional Contribution to 'fringeExcessAllocationDetails.name' from H&W */}\n\n {statementDetails.fringeExcessAllocationAdditional.map(\n (fringeExcessAllocationAdditionalDetails) => {\n return (\n \n \n \n \n \n Additional Contribution to{\" \"}\n \n {\n fringeExcessAllocationAdditionalDetails.name\n }\n {\" \"}\n from H&W\n \n \n {Utils.formatCurrency(fringeExcessAllocationAdditionalDetails.amount)}\n \n \n // \n
\n \n );\n }\n )}\n\n\n\n {/* Contribution type Name '{fringeExcessAllocationAdditional[0].name}' */}\n \n \n \n {statementDetails.fringeContribution.map(\n (fringeContributionDetails) => {\n return (\n \n \n {`${fringeContributionDetails.contributionTypeName} - ${fringeContributionDetails.typeName} at ${fringeContributionDetails.contributionRate}`}\n \n \n {Utils.formatCurrency(fringeContributionDetails.contributionAmount)}\n \n \n );\n }\n )}\n \n
\n \n\n {/* HOURLY CONTRIBUTION */}\n\n {statementDetails.outputDisplay.map(\n (outputDisplayDetails) => {\n if (\n // CHANGE CONDITION FOR EACH (ER and EE)\n outputDisplayDetails.erCost > 0 &&\n outputDisplayDetails.eeCost > 0\n ) {\n return (\n \n \n \n \n \n Employer Contribution to{\" \"}\n {outputDisplayDetails.benefitName}\n \n \n {Utils.formatCurrency(outputDisplayDetails.erCost)}\n \n \n \n \n Employee Contribution to{\" \"}\n {outputDisplayDetails.benefitName}\n \n \n {Utils.formatCurrency(outputDisplayDetails.eeCost)}\n \n \n \n
\n \n );\n }\n }\n )}\n\n {/* Total Contribution*/}\n \n \n \n \n \n Total Contribution\n \n \n {Utils.formatCurrency(statementDetails.totalContribution)}\n \n \n \n
\n \n {/* HOURBANK BALANCE */}\n {statementDetails.hourbankBalance.length > 0 ?\n \n \n \n \n \n Hourbank Type\n \n \n Beginning Balance\n \n \n Contribution\n \n \n Deduction\n \n \n Ending Balance\n \n \n \n \n {/* statementDetails.benefitCost.doDisplayEECost === true ? */}\n {statementDetails.hourbankBalance.map(\n (hourbankBalanceDetails) => {\n return (\n \n \n {hourbankBalanceDetails.hourbankTypeName}\n \n \n {Utils.formatCurrency(hourbankBalanceDetails.beginningHourbankBalance)}\n \n \n {Utils.formatCurrency(hourbankBalanceDetails.hourbankContribution)}\n \n \n {Utils.formatCurrency(hourbankBalanceDetails.hourbankTaken)}\n \n \n {Utils.formatCurrency(hourbankBalanceDetails.endingHourbankBalance)}\n \n \n );\n }\n )}\n \n
\n \n : null }\n {/* DISCLAIMER */}\n {statementDisclaimers.length > 0 ?\n \n Disclaimer \n \n {statementDisclaimers.map(d => {\n return ({d}
)\n })}\n \n \n \n : null }\n\n \n );\n}\nexport default HWStatementDetail;\n","import React, { useState, useEffect, useRef, useMemo, useContext } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { Box, Button, MenuItem, Select } from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport TimeFrameDateSelector from \"components/TimeFrameDateSelector\"\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport ListIcon from \"@mui/icons-material/List\";\nimport { Utils } from \"common/Utils\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport HWStatementDetail from \"components/HWStatementDetail\";\n\nexport default function Reports(props) {\n const { userInfo } = useContext(PrivateRoutesContext);\n\n const [hwStatements, setHwStatements] = useState([]);\n\n const [isLoadingData, setIsLoadingData] = useState(false);\n const [hasLoadedData, setHasLoadedData] = useState(false);\n const [hasLoadingError, setHasLoadingError] = useState(false);\n const [isViewEnabled, setIsViewEnabled] = useState(true);\n\n const [isExporting, setIsExporting] = useState(false);\n\n const report = useRef(\"\");\n let { hwBenefitDate } = useParams();\n\n const canDownload = useMemo(() => {\n return !Utils.isBroker(userInfo);\n },[userInfo]);\n\n const loadHWStatements = (time, payDate, endDate) => {\n setIsViewEnabled(false);\n setIsLoadingData(true);\n setHasLoadedData(true);\n setHasLoadingError(false);\n setHwStatements([]);\n\n apiGet(props.getHWStatementUrl(payDate, endDate)).then((response) => {\n let tempStatements = response.data.map(d => {\n d.endDate = endDate;\n d.timePeriod = time;\n\n return d;\n });\n\n setHwStatements(tempStatements);\n setIsLoadingData(false);\n setIsViewEnabled(true);\n })\n .catch(e => {\n console.log(e);\n setHasLoadingError(true);\n });\n };\n\n const handleExport = () => {\n if (hwStatements.length > 0) {\n setIsExporting(true);\n let pdfHtml = Utils.hwStatementReport(report.current.outerHTML);\n const formData = new FormData();\n formData.append(\"htmlData\", pdfHtml);\n \n console.log(\"Exporting\");\n\n apiPost(props.exportUrl, formData, {\n \"content-type\": \"multipart/form-data\",\n Accept: \"*/*\",\n responseType: \"blob\",\n }).then(response => {\n\n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", \"hwStatement.pdf\");\n document.body.appendChild(link);\n link.click();\n \n console.log(\"File downloading successfully\");\n })\n .catch((e) => {\n \n })\n .finally(() => {\n setIsExporting(false);\n });\n }\n else {\n \n }\n }\n\n return (\n \n \n \n \n {hasLoadingError ? Error Loading Report :\n !hasLoadedData ? null :\n isLoadingData ? \n {hwStatements.map(statementDetails => \n \n }\n \n \n )\n}\n","import React, { useState, useContext, useMemo } from \"react\";\nimport { IconButton, Menu, MenuItem, Dialog, DialogActions, DialogContent, DialogTitle, Button } from \"@mui/material\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport Details from \"area/employer/EmployeeDashboard/Details\";\nimport Benefits from \"components/Content/Table/Benefits\"\nimport Contracts from \"components/Content/Table/Contracts\";\nimport Reports from 'area/employee/Reports';\n// import {getFormattedDate} from 'DateFormat';\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport \"react-tabs/style/react-tabs.css\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport EmployeeBenefitsHistory from \"components/Content/Table/EmployeeBenefitsHistory\";\n\nimport AximTooltip from \"components/AximTooltip\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nconst axios = require(\"axios\");\n\nfunction EmployeeDetailMenu({ employeeId, canEdit,reloadEmployees }) {\n const { companyId, userInfo, error } = useContext(PrivateRoutesContext);\n \n const [openModal, setOpen] = useState(false);\n const [employeeView, setEmployeeView] = useState();\n const [viewDataOnly, setViewDataOnly] = useState();\n const [doShowSubmit, setDoShowSubmit] = useState();\n \n const isGsg = useMemo(() => userInfo?.companyDetails?.groupType === \"GSG\", [userInfo]);\n\n const handleEditAction = () => {\n loadEmployee(() => {\n setViewDataOnly(false);\n setDoShowSubmit(true);\n setOpen(true);\n });\n };\n const refreshEmployee = (close) => {\n loadEmployee()\n if(close){\n setOpen(false);\n reloadEmployees();\n }\n }\n const loadEmployee = (action) => {\n apiGet(apiUrls.getEmpView(employeeId)).then(\n (response) => {\n console.log(response.data,'employee view')\n setEmployeeView(response.data);\n\n if (action) {\n action();\n }\n }\n )\n }\n\n const handleClose = () => {\n setOpen(false);\n }\n\n const handleUpdate = () => {\n setOpen(false);\n }\n \n return <>\n <>\n \n \n \n \n \n\n {/* MODAL */}\n {employeeId !== undefined ? (\n \n {viewDataOnly ? (\n \n View Employee Details\n \n ) : (\n \n Edit Employee Details\n \n )}\n \n \n \n Details \n Benefits \n {/* {viewDataOnly ? Benefits History : null} */}\n {!isGsg ? Contracts : null}\n {!isGsg ? {\"H&W Statement\"} : null}\n \n\n \n {employeeView !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n {employeeView !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n {employeeView !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n {employeeView !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n \n \n Close\n \n \n \n ) : null}\n ;\n}\n\nexport default EmployeeDetailMenu;\n","import React, { useState, useContext } from \"react\";\nimport { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField } from '@mui/material';\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport modalStyles from \"./ModalStyles.module.css\";\nimport DateFnsUtils from \"@date-io/date-fns\";\nimport { DatePicker, MuiPickersUtilsProvider } from \"@material-ui/pickers\";\nimport datePickerStyles from \"components/Content/Modal/DatePickerStyles.module.css\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from 'common/ApiUrls';\nimport moment from \"moment\";\n\nfunction EmployeeBulkActionModal({ isOpen, closeModal, dataNames, bulkType}) {\n const { companyId } = useContext(PrivateRoutesContext);\n \n const [actionDate, handleActionDate] = useState(new Date());\n const [effectiveDate, handleEffectiveDate] = useState(new Date());\n\n const [communication, setCommunication] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n\n const getEmployeeIds = () => {\n let employeeIds = [];\n dataNames.map((item) => {\n employeeIds.push(item.employeeID);\n });\n\n return employeeIds;\n }\n\n const clearUI = () => {\n setCommunication(\"\");\n handleActionDate(new Date());\n handleEffectiveDate(new Date());\n setErrorMessage(\"\");\n }\n\n const handleClose = () => {\n closeModal(false);\n };\n\n // TERMINATE EMPLOYEE\n const handleTermData = () => {\n let employeeIds = getEmployeeIds();\n\n apiPost(apiUrls.terminateEmployee(companyId, moment(actionDate).calendar(), moment(effectiveDate).calendar()), [...employeeIds])\n .then((res) => {\n // console.log(\"term employee\");\n clearUI();\n closeModal(false);\n })\n .catch(error => {\n setErrorMessage(\"Termination Action Unsuccessful, Please Try Again...\");\n console.log(\n \"Termination Action Unsuccessful, Please Try Again...\",\n error\n );\n });\n };\n\n // REHIRE DATA POST API\n const handleRehireData = () => {\n let employeeIds = getEmployeeIds();\n\n // debugger\n apiPost(apiUrls.rehireEmployee(companyId, moment(actionDate).calendar(), moment(effectiveDate).calendar()), [...employeeIds])\n .then((res) => {\n // console.log(\"rehire employee\");\n clearUI();\n closeModal(false);\n })\n .catch(error => {\n setErrorMessage(\"Rehire Action Unsuccessful, Please Try Again...\");\n console.log(\n \"Rehire Action Unsuccessful, Please Try Again...\",\n error\n );\n });\n };\n\n // RESET PASSWORD POST API\n const handleResetPassword = () => {\n let employeeIds = getEmployeeIds();\n\n // debugger\n apiPost(apiUrls.employeePasswordReset(companyId), [...employeeIds])\n .then((res) => {\n // console.log(\"employee password reset\");\n clearUI();\n closeModal(false);\n })\n .catch(error => {\n let errorMsg = \"Reset Password Action Unseccessful, Please Try Again...\"\n setErrorMessage(errorMsg);\n console.log(errorMsg,error);\n });\n };\n\n // HANDLE UPDATE COMMUNICATION\n const handleUpdateCommunication = (e) => {\n setCommunication(e.target.value);\n };\n\n const handleSendCommunication = () => {\n let employeeIds = getEmployeeIds();\n\n // console.log(`Send communication: ${communication}`);\n \n apiPost(apiUrls.sendCommunication(companyId), { message: communication, employees: employeeIds })\n .then((res) => {\n // console.log(\"communication sent\");\n clearUI();\n closeModal(false);\n })\n .catch(error => {\n setErrorMessage(\"Send Communication Action Unseccessful, Please Try Again...\");\n console.log(\n \"Send Communication Action Unseccessful, Please Try Again...\",\n error\n );\n });\n };\n\n const handleClickCancel = () => {\n closeModal(false);\n setErrorMessage(\"\");\n }\n\n return (\n \n
\n {bulkType} \n \n {/* */}\n \n \n \n \n First Name \n Last Name \n \n \n \n {dataNames.map((item) => {\n return (\n \n {item.firstName} \n {item.lastName} \n \n );\n })}\n \n
\n \n {bulkType === \"Termination\" || bulkType === \"Rehire\" ? (\n \n ) : bulkType === \"ResetPassword\" ? (\n <>\n ) : bulkType === \"SendCommunication\" ? (\n \n
\n ) : null}\n {/* */}\n { errorMessage === \"\" ? null : {errorMessage} }\n \n \n {/* \n bulkType === \"Termination\"\n ? handleTermData()\n : bulkType === \"Rehire\"\n ? handleRehireData()\n : bulkType === \"ResetPassword\"\n ? handleResetPassword()\n : bulkType === \"SendCommunication\"\n ? handleSendCommunication()\n : null}\n >\n Submit\n \n {/* */}\n \n Cancel\n \n \n \n handleDownloadAttachment(cell)}\n loading={downloadingEmailFileId === cell.externalEmailFileId}\n loadingPosition=\"start\"\n startIcon={ \n {isEditable ?\n handlePromptDeleteAttachment(cell, e)}\n >\n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Update By\",\n accessor: (cell) => `${cell.updateUser}`,\n },\n ];\n\n return cols;\n });\n\n const loadAttachments = () => {\n if (templateId == Utils.emptyGuid()) {\n setAttachments([]);\n }\n else {\n apiGet(apiUrls.getEmailAttachments(companyId, templateId)).then((response) => {\n setAttachments(response.data);\n }).catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading email attachments.\");\n error.setDoShowError(true);\n });\n }\n }\n\n const handleDownloadAttachment = (attachment) => {\n setDownloadingEmailFileId(attachment.externalEmailFileId);\n Utils.downloadFile(apiUrls.downloadEmailAttachments(attachment.externalEmailFileId), attachment.fileName, \n () => {\n setDownloadingEmailFileId('');\n }\n , \n () => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred downloading the file.\");\n error.setDoShowError(true);\n });\n }\n\n return (\n Send Email \n \n \n \n \n \n Recipients \n \n \n \n \n setEmailAddress(e.target.value)}\n sx={{width: \"100%\"}}/>\n \n \n \n Add Recipient\n \n \n \n \n First Name Last Name Email \n {recipients.map(r => {\n return (\n \n \n {r.isManuallyAdded ?\n removeRecipient(r.emailAddress)}\n >\n \n {r.firstName} \n {r.lastName} \n {r.emailAddress} \n \n );\n })}\n \n \n \n \n\n \n \n Template \n \n \n setSelectedTemplateId(e.target.value)}\n sx={{width: \"100%\"}}>\n {templates.map(t => {t.emailTemplateDescription} )}\n \n \n \n \n \n Email Subject \n \n \n \n \n \n \n Email Body \n \n \n \n \n \n \n \n Attachments \n \n \n \n \n \n \n \n \n {selectedTemplate && selectedTemplate.isWelcomeEmail ?\n \n \n \n \n setDoOnlySendNew(e.target.checked)} />\n } label=\"Only send welcome email to new employees\" />\n \n : null}\n \n \n \n setDelayDateTime(value)}\n renderInput={(params) => \n setDelayDateTime(null)} variant=\"outlined\">\n Clear\n \n \n \n \n \n\n \n \n \n \n \n \n Close\n \n \n \n\n \n \n \n\n setOpen(openModal)}\n dataNames={data}\n bulkType={bulkAction}\n />\n setIsSendEmailOpen(false)} names={data} />\n
\n );\n}\n\nexport default BulkActionsDropdown;\n","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputLabel, Select, MenuItem, FormControl, Input, FormHelperText, InputAdornment } from \"@mui/material\";\nimport moment from \"moment\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport _ from \"lodash\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst EmployeeProfile = forwardRef(({ fetchedData, states, maritalStatuses, genders,employmentStatus,employeeGroups, errors }, ref) => {\n const [formData, setFormData] = useState(fetchedData);\n useEffect(() => {\n console.log('ee profile')\n }, []);\n\n const handleChange = _.debounce((name, val) => {\n console.log(val, 'handle change value')\n console.log(formData, 'handle change formData')\n let updatedValue = { [name]: val };\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n if (ref?.current) {\n console.log('setting current')\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n console.log(ref.current.formData, ' set ref current formData')\n }\n }, 500);\n\n return (\n <>\n handleChange('firstName', e.target.value)}\n error={errors.firstName ? true : false}\n helperText={errors.firstName}\n />\n handleChange('middleName', e.target.value)}\n />\n handleChange('lastName', e.target.value)}\n error={errors.lastName ? true : false}\n helperText={errors.lastName}\n\n />\n handleChange('ssn', e.target.value)}\n error={errors.ssn ? true : false}\n helperText={errors.ssn}\n />\n\n \n Birth Date \n {errors.birthDate} \n \n\n \n Gender \n handleChange('genderID', e.target.value)}\n >\n {genders.map((val, i) => {val.genderName} )}\n \n \n\n \n Marital Status \n handleChange('maritalStatusID', e.target.value)}\n >\n {maritalStatuses.map((val, i) => {val.maritalStatusName} )}\n \n \n\n handleChange('mailingAddress1', e.target.value)}\n />\n handleChange('mailingAddress2', e.target.value)}\n />\n handleChange('mailingCity', e.target.value)}\n />\n\n \n State \n handleChange('mailingStateID', e.target.value)}\n >\n {states.map((val, i) => {val.stateAbbr} )}\n\n \n \n handleChange('mailingZipCode', e.target.value)}\n />\n handleChange('email', e.target.value)}\n error={errors.email ? true : false}\n helperText={errors.email}\n />\n handleChange('homePhone', e.target.value)}\n />\n handleChange('workPhone', e.target.value)}\n />\n\n \n Hire Date \n {errors.hireDate} \n \n\n \n Employment Status \n handleChange('employmentStatusID', e.target.value)}\n >\n {employmentStatus.map((val, i) => {val.employmentStatusName} )}\n\n \n {errors.employmentStatusID} \n \n\n \n Employee Group \n handleChange('employeeGroupID', e.target.value)}\n >\n {employeeGroups.map((val, i) => {val.employeeGroupName} )}\n\n \n {errors.employeeGroupID} \n \n \n $,\n }}\n className={ModalStyles.cField}\n label=\"Hourly Salary\"\n defaultValue={\n formData.hourlySalary === null && viewDataOnly\n ? \"N/A\"\n : formData.hourlySalary\n }\n />\n $,\n }}\n className={ModalStyles.cField}\n label=\"Weekly Salary\"\n defaultValue={\n formData.weeklySalary === null && viewDataOnly\n ? \"N/A\"\n : formData.weeklySalary\n }\n />\n $,\n }}\n className={ModalStyles.cField}\n label=\"Monthly Salary\"\n defaultValue={\n formData.monthlySalary === null && viewDataOnly\n ? \"N/A\"\n : formData.monthlySalary\n }\n />\n \n )\n});\n\nexport default EmployeeProfile;","import React, { useState, useEffect, useMemo, useContext, useRef } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport MUIDataTable from \"components/mui-datatable\";\nimport { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';\nimport EmployeeDetailMenu from \"components/Menu/EmployeeDetailMenu\"\nimport BulkActionsDropdown from \"components/Content/Dropdown/BulkActionsDropdown\"\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\"\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport { Grow, TextField, IconButton, Tooltip } from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\n\nimport { Utils } from \"common/Utils\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport EmployeeProfile from \"area/employer/EmployeeCensus/EmployeeProfile\";\nimport * as Yup from 'yup';\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Grid, FormControl, Input, Badge } from \"@mui/material\";\n\nfunction EmployeeDashboard() {\n const profileRef = useRef({});\n const [openProfileModal, setOpenProfileModal] = useState(false);\n const [profileErrors, setProfileErrors] = useState({});\n const { companyId, userInfo } = useContext(PrivateRoutesContext);\n const [namesData, setNamesData] = useState([]);\n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [states, setStates] = useState([]);\n const [employmentStatus, setEmploymentStatus] = useState([]);\n const [employeeGroups, setEmployeeGroups] = useState([]);\n const [maritalStatuses, setMaritalStatuses] = useState([]);\n const emptyEmployee = {\n \"Action\": \"New\",\n \"ChangeType\": \"New\",\n \"employeeID\": \"00000000-0000-0000-0000-000000000000\",\n \"companyID\": \"00000000-0000-0000-0000-000000000000\",\n \"insuredID\": \"00000000-0000-0000-0000-000000000000\",\n \"firstName\": \"\",\n \"lastName\": \"\",\n \"userName\": null,\n \"ssn\": \"\",\n \"emailAddress\": null,\n \"status\": null,\n \"contract\": null,\n \"classification\": null,\n \"serviceFee\": 0,\n \"dateCreated\": null,\n \"effectiveDateOfChange\": null,\n \"beginDate\": null,\n \"endDate\": null,\n \"changeDate\": null,\n \"prevBeginDate\": \"0001-01-01T00:00:00\",\n \"prevEndDate\": \"0001-01-01T00:00:00\",\n \"employeeGroupID\": null,\n \"hourlySalary\": 0,\n \"weeklySalary\": 0,\n \"annualSalary\": 0,\n \"employeeAltKey\": null,\n \"jobTitle\": null,\n \"locationCode\": null,\n \"hireDate\": null,\n \"rehireDate\": null,\n \"termDate\": null,\n \"serviceCreditDate\": \"0001-01-01T00:00:00\",\n \"employmentStatusID\": null,\n \"employeeNotes\": null,\n \"location\": null,\n \"division\": null,\n \"department\": null,\n \"jobClass\": null,\n \"importFileID\": \"00000000-0000-0000-0000-000000000000\",\n \"employmentStatusName\": null,\n \"companyName\": null,\n \"companyCode\": null,\n \"jobsiteID\": \"00000000-0000-0000-0000-000000000000\",\n \"jobsiteName\": null,\n \"jobsiteCode\": null,\n \"payCalendarID\": \"00000000-0000-0000-0000-000000000000\",\n \"payCalendarName\": null,\n \"payCalendarCode\": null,\n \"benefitPackageID\": \"00000000-0000-0000-0000-000000000000\",\n \"benefitPackageName\": null,\n \"benefitPackageCode\": null,\n \"benefitClassID\": \"00000000-0000-0000-0000-000000000000\",\n \"benefitClassName\": null,\n \"benefitClassCode\": null,\n \"groupServiceFee\": 0,\n \"classServiceFee\": 0,\n \"effectiveDate\": null,\n \"birthDate\": null,\n \"email\": \"\",\n \"contractCode\": null,\n \"contractFringeRate\": 0,\n \"loginName\": null,\n \"employeeGroupCode\": null,\n \"isActiveConfigurationRow\": true,\n \"benefitEnrollments\": [],\n \"birthDateStr\": \"\",\n \"termDateStr\": \"\",\n \"hireDateStr\": \"\",\n \"genderID\": 0,\n \"maritalStatusID\": 0,\n \"mailingAddress1\": null,\n \"mailingAddress2\": null,\n \"mailingStateID\": null,\n \"mailingCity\": null,\n \"mailingZipCode\": null,\n \"homePhone\": null,\n \"workPhone\": null\n };\n\n const [newEmployeeProfileData, setNewEmployeeProfileData] = React.useState(emptyEmployee)\n const [genders, setGenders] = useState([]);\n\n const fetchStates = () => {\n apiGet(apiUrls.getStates()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchStates\");\n setStates(lovResponse.data)\n }\n )\n }\n\n const fetchEmploymentStatus = () => {\n apiGet(apiUrls.getEmploymentStatuses()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchEmploymentStatus\");\n setEmploymentStatus(lovResponse.data)\n }\n )\n }\n\n const fetchEmployeeGroups = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getEmployeeGroups(selectedCompany)).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchEmployeeGroups\");\n setEmployeeGroups(lovResponse.data)\n }\n )\n }\n\n const fetchMaritalStatuses = () => {\n apiGet(apiUrls.getMaritalStatuses()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchMaritalStatuses\");\n setMaritalStatuses(lovResponse.data)\n }\n )\n }\n\n const fetchGenders = () => {\n apiGet(apiUrls.getGenders()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchGenders\");\n setGenders(lovResponse.data)\n }\n )\n }\n\n const selectedRows = useMemo(\n () => namesData.map((index) => fetchedData[index]),\n [namesData]\n );\n\n\n const [thisRowSelected, setThisRowSelected] = useState();\n\n const rowIsSelected = (rowData) => {\n setThisRowSelected(rowData[0]);\n };\n\n const handleProfileClose = () => {\n setOpenProfileModal(false);\n }\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n useEffect(() => {\n fetchStates()\n fetchEmploymentStatus()\n fetchEmployeeGroups()\n fetchMaritalStatuses()\n fetchGenders()\n }, []);\n\n const canDownloadAndEdit = useMemo(() => {\n return !Utils.isBroker(userInfo);\n }, [userInfo]);\n\n const columns = [\n {\n name: \"employeeID\",\n label: \"\",\n options: {\n filter: false,\n sort: false,\n viewColumns: false,\n }\n },\n {\n name: \"menu\",\n label: \" \",\n options: {\n filter: false,\n sort: false,\n viewColumns: false,\n }\n },\n \"First Name\",\n \"Last Name\",\n \"Username\",\n \"SSN\",\n \"Email\",\n \"Status\",\n \"Contract\",\n \"Classification\",\n \"Date Created\",\n ];\n\n const options = {\n filter: true,\n filterType: \"dropdown\",\n selectableRows: \"multiple\",\n rowsSelected: namesData,\n onRowClick: rowIsSelected,\n onRowSelectionChange: (rowsSelectedData, allRows, rowsSelected) => {\n setNamesData(rowsSelected);\n },\n responsive: \"standard\",\n viewColumns: true,\n download: canDownloadAndEdit,\n print: false,\n downloadOptions: {\n filename: \"ActiveEmployeeList.csv\",\n separator: \",\",\n filterOptions: {\n useDisplayedColumnsOnly: true,\n useDisplayedRowsOnly: true,\n },\n },\n customToolbarSelect: () => {\n return \n {children}\n \n );\n }\n\n const handleAddEmployee = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n setProfileErrors({});\n setOpenProfileModal(true);\n }\n\n const keysChangeCase = (j, toUpper = true) => {\n if (typeof j === 'string') { // so it works for javascript arrays as well\n try {\n j = JSON.parse(j);\n } catch (err) {\n console.error('Invalid JSON input');\n console.error(err);\n }\n }\n if (Array.isArray(j)) {\n console.log('is array?')\n if (j.length == 0) {\n return [];\n }\n return j.map(o => keysChangeCase(o, toUpper));\n }\n else {\n let newObj = Object.fromEntries(\n Object.entries(j).map(([k, v]) => [(toUpper ? k.charAt(0).toUpperCase() : k.charAt(0).toLowerCase()) + k.slice(1), v])\n );\n return newObj;\n }\n }\n const handleSaveEmployeeProfile = async () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n console.log(profileRef, 'profileRef')\n if (profileRef != null && profileRef.current.formData !== undefined) {\n let formData = profileRef.current.formData;\n\n console.log(formData, 'handleSaveEmployeeProfile formData');\n const newProfile = {\n \"companyID\": selectedCompany,\n \"birthDate\": formData.birthDate,\n \"email\": formData.email,\n \"firstName\": formData.firstName,\n \"genderID\": formData.genderID,\n \"insuredID\": formData.insuredID,\n \"lastName\": formData.lastName,\n \"mailingAddress1\": formData.mailingAddress1,\n \"mailingAddress2\": formData.mailingAddress2,\n \"mailingCity\": formData.mailingCity,\n \"mailingStateID\": formData.mailingStateID,\n \"mailingZipCode\": formData.mailingZipCode,\n \"maritalStatusID\": formData.maritalStatusID,\n \"middleName\": formData.middleName,\n \"ssn\": formData.ssn,\n \"workPhone\": formData.workPhone,\n \"homePhone\": formData.homePhone,\n \"beginDate\": formData.hireDate,\n \"hireDate\": formData.hireDate,\n \"endDate\": formData.EndDate,\n \"changeDate\": Utils.convertToDatePickerDefaultToday(),\n \"employeeGroupID\": formData.employeeGroupID,\n \"hourlySalary\": formData.hourlySalary,\n \"weeklySalary\": formData.weeklySalary,\n \"annualSalary\": formData.annualSalary,\n \"employeeAltKey\": formData.employeeAltKey,\n \"jobTitle\": formData.jobTitle,\n \"locationCode\": formData.locationCode,\n \"hireDate\": formData.hireDate,\n \"employmentStatusID\": formData.employmentStatusID,\n \"employeeNotes\": formData.employeeNotes,\n \"jobsiteID\": formData.jobsiteID,\n \"effectiveDate\": formData.hireDate,\n };\n\n const profileValidationSchema = Yup.object().shape({\n firstName: Yup.string().required('First Name is required')\n .max(50, 'First Name must not exceed 50 characters'),\n lastName: Yup.string().required('Last Name is required')\n .max(50, 'Last Name must not exceed 50 characters'),\n ssn: Yup.string().required('SSN is required')\n .max(11, 'SSN must not exceed 10 characters')\n .required(),\n birthDate: Yup.date().min('1901-01-01').typeError('Birth date is required'),\n email: Yup.string().email().required(),\n employeeGroupID: Yup.mixed().required('Employee group is required'),\n employmentStatusID: Yup.mixed().required('status is required'),\n hireDate: Yup.mixed().required('Hire date is required'),\n \n });\n\n try {\n const valid = await profileValidationSchema.validateSync(newProfile,\n { abortEarly: false }\n );\n\n apiPost(apiUrls.addEmployee(), keysChangeCase(newProfile, true))\n .then((response) => {\n console.log(response, 'add employee response')\n // if (response.data != null && response.data.censusManagementID) {\n // setCensusManagementID(response.data.censusManagementID)\n // }\n // else {\n // setSaving(false);\n // }\n\n })\n .catch((e) => {\n console.log(e, \"CATCHED\");\n })\n .finally(() => {\n //setSaving(false);\n });;\n\n console.log(valid, 'valid')\n //handleProfileSave(formData.employeeID, newProfile)\n\n } catch (error) {\n // error.inner\n console.log(error, 'valid error')\n let pErrors = {};\n for (const err of error.inner) {\n if (err.path) {\n console.log(err.path, 'err.path')\n console.log(err.message, 'err.message')\n Object.defineProperty(pErrors, err.path, {\n value: err.message,\n writable: true\n });\n //pErrors[error.path] = error.message;\n }\n }\n\n console.dir(pErrors, 'pErrors')\n setProfileErrors(pErrors)\n }\n }\n }\n\n\n return (\n <>\n
\n \n Add Employee\n \n
\n
\n {/* \n */}\n {\n return [\n item.employeeID,\n ,\n item.firstName,\n item.lastName,\n item.userName === null ? \"N/A\" : item.userName,\n item.ssn,\n item.emailAddress,\n item.status,\n item.contract,\n item.classification,\n moment(item.dateCreated).calendar(),\n ];\n })\n }\n columns={columns}\n options={options}\n className=\"custom-mui-tabel\"\n components={{\n Tooltip: CustomTooltip\n }}\n />\n {/* \n */}\n
\n\n \n \n Add Employee\n \n \n\n \n \n \n \n Save\n \n\n \n Close\n \n \n \n \n );\n}\n\nexport default EmployeeDashboard;\n","const COLORS = [\n '#4dc9f6',\n '#f67019',\n '#7C8B27',//'#acc236',\n //'#f53794',\n '#537bc4',\n '#166a8f',\n '#00a950',\n '#58595b',\n '#8549ba'\n ];\n\nexport var ChartColors = {\n Colors: COLORS,\n getColor: (i) => {\n return COLORS[i % COLORS.length];\n }\n}","import React, { useMemo } from \"react\";\nimport { Avatar, Box, Card, Stack } from '@mui/material';\nimport { Doughnut } from 'react-chartjs-2';\nimport { ChartColors } from \"common/ChartColors\";\nimport { Utils } from 'common/Utils';\n\nexport default function AximDoughnut ({ title, data, isCurrency, showStack=true, showTotal=true }) {\n const doughnutData = useMemo(() => {\n return {\n labels: data.map(d => d.label),\n datasets: [\n {\n data: data.map(d => d.value),\n backgroundColor: ChartColors.Colors,\n borderColor: ChartColors.Colors,\n borderWidth: 1,\n },\n ],\n }\n },[data]);\n\n const formatLabel = (label, value) => {\n if (label) {\n label += ': ';\n }\n if (value !== null) {\n label += isCurrency ? Utils.formatCurrency(value) : value;\n }\n return label;\n }\n\n const options = useMemo(() => {\n var o = {\n plugins: {\n tooltip: {\n callbacks: {\n label: function(context) {\n return formatLabel(context.label || '', context.parsed);\n }\n }\n },\n legend: {\n display: false,\n position: \"right\",\n labels: {\n generateLabels: (chart) => {\n const datasets = chart.data.datasets;\n return datasets[0].data.map((data, i) => ({\n text: formatLabel(chart.data.labels[i], data),\n fillStyle: datasets[0].backgroundColor[i],\n }))\n }\n }\n }\n }\n }\n\n if (title) {\n o.plugins.title = {\n display: true,\n text: title,\n font: {\n size: 30,\n weight: 'bold',\n }\n }\n }\n\n return o;\n },[title, data]);\n\n const plugins = useMemo(() => {\n if(showTotal){\n var sum = data.map(e => e.value).reduce((a, b) => a + b, 0);\n\n return [{\n id: 'text',\n beforeDraw: function(chart, a, b) {\n var width = chart.width,\n height = chart.height,\n ctx = chart.ctx;\n\n ctx.restore();\n var fontSize = (height / 220).toFixed(2);\n ctx.font = fontSize + \"em sans-serif\";\n ctx.textBaseline = \"middle\";\n\n var text = isCurrency ? Utils.formatCurrency(sum) : sum,\n textX = Math.round((width - ctx.measureText(text).width) / 2),\n textY = (height + chart.titleBlock.height) / 2;\n\n // ctx.fillStyle = theme.palette.primary.main;\n ctx.fillText(text, textX, textY);\n ctx.save();\n }\n }]\n }\n else\n {\n return[{}]\n }\n },[data]);\n\n return (\n \n \n {data.map((e,i) =>\n \n \n \n {e.label} \n \n {isCurrency ? Utils.formatCurrency(e.value) : e.value} \n \n )}\n \n \n )\n}","import React, { useContext, useEffect, useMemo, useState, useRef } from \"react\";\n\nimport {\n Avatar,\n Box,\n Button,\n Card,\n Paper,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n InputLabel,\n Menu,\n MenuItem,\n TextField,\n Typography,\n List,\n ListItemButton,\n ListItemText,\n Chip,\n FormControl,\n Select,\n OutlinedInput,\n Autocomplete,\n Checkbox\n} from \"@mui/material\";\nimport Alert from '@mui/material/Alert';\nimport Stack from '@mui/material/Stack';\nimport { Link } from 'react-router-dom'\n//import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { contractorApiUrls } from \"common/ApiUrls\";\nimport { Utils } from 'common/Utils';\nimport {\n Chart as ChartJS, ArcElement, Tooltip, Legend,\n CategoryScale,\n LinearScale,\n BarElement,\n Title\n} from 'chart.js';\nimport {\n Doughnut, Bar,\n getElementAtEvent,\n getDatasetAtEvent\n} from 'react-chartjs-2';\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\n\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport dayjs from 'dayjs';\nimport _ from \"lodash\";\n\nconst ITEM_HEIGHT = 48;\nconst ITEM_PADDING_TOP = 8;\nconst MenuProps = {\n PaperProps: {\n style: {\n maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,\n width: 250,\n },\n },\n}\nexport default function SubContractorDashboard(props) {\n const colors = [\n { name: 'Red', value: 'rgba(200, 0, 0, 0.85)' },\n { name: 'Yellow', value: 'rgba(255,103,0, 0.85)' },\n { name: 'Green', value: 'rgba(0, 128, 0, 0.85)' }\n ]\n const failColor = \"rgba(200, 0, 0, 0.85)\"\n const failHoverColor = \"rgba(200, 0, 0, 0.65)\"\n const warningColor = \"rgba(255,103,0, 0.85)\"\n const warningHoverColor = \"rgba(255,103,0, 0.65)\"\n const passColor = \"rgba(0, 128, 0, 0.85)\"\n const passHoverColor = \"rgba(0, 128, 0, 0.65)\"\n\n const availableComplianceList = ['Provider Deposits', 'Carrier Disbursements', 'ACA Compliance', 'Cash in lieu', 'Contract Updates', 'Hours Management'];\n const barChartlabels = ['Provider Deposits', 'Carrier Disbursements', 'ACA Compliance', 'Cash in lieu', 'Contract Updates'];\n const initBarChartData = {\n labels: barChartlabels,\n datasets: []\n };\n const [contracts, setContracts] = useState([]);\n const [barChartData, setBarChartData] = useState(initBarChartData);\n const [beginDate, setBeginDate] = useState(dayjs().set('date', 1))\n const [endDate, setEndDate] = useState(dayjs().endOf('month'))\n const [isLoading, setIsLoading] = useState(false);\n const [showChart, setShowChart] = useState(true);\n const [complianceFilter, setComplianceFilter] = useState(barChartlabels);\n const [highLightedComplianceType, setHighLightedComplianceType] = useState('');\n const [colorFilter, setColorFilter] = useState(\"none\");\n const [selectedContract, setSelectedContract] = useState();\n const [selectedContractList, setSelectedContractList] = useState([])\n const [currentElement, setCurrentElement] = useState();\n const [openBeginDate, setOpenBeginDate] = useState(false);\n const [openEndDate, setOpenEndDate] = useState(false);\n const [beginDateError, setBeginDateError] = useState(null);\n const [endDateError, setEndDateError] = useState(null);\n useEffect(() => {\n console.log('should fetch all contracts')\n }, []);\n\n const chartRef = useRef();\n\n const barChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n minBarLength: 0,\n legend: { position: 'bottom' },\n\n };\n const statusToSeverity = (status) => {\n switch (status) {\n case \"pass\":\n return \"success\";\n case \"failed\":\n return \"error\";\n default:\n return \"warning\";\n }\n }\n const showAction = (contractorCompliance) => {\n if (contractorCompliance.status != \"pass\") {\n if (\n //(props.isAximClinet === undefined || !props.isAximClinet) && \n contractorCompliance.complianceType == \"Contract Updates\") {\n return \n {cell.name}\n \n ),\n },\n {\n Header: \"Compliance Status\",\n accessor: \"compliances\",\n Cell: ({ row }) => (\n \n \n {(row.original?.compliances?.map((c, idx) => {c.complianceType} {(c.status == 'missing' ? ' is missing' : `${c.status} ${c.notes}`)} [{Utils.formatDate(c.beginDate)} - {Utils.formatDate(c.endDate)}] ))}\n \n \n )\n }\n ];\n\n const [chartPassFaildata, setChartPassFaildata] = useState({\n labels: ['Fail', 'Pass'],\n datasets: [\n {\n label: '# of contractors',\n data: [0, 0],\n backgroundColor: [\n 'rgba(250, 0, 0, 1)',\n 'green',\n ],\n borderColor: [\n 'rgba(250, 0, 0, 1)',\n 'green',\n ],\n borderWidth: 1,\n },\n ],\n });\n\n\n const getContracts = (start, end) => {\n setIsLoading(true);\n console.log('getContracts')\n console.log(contractorApiUrls.getDashboard(start, end))\n apiGet(contractorApiUrls.getDashboard(start, end))\n .then((response) => {\n console.log('dashboard contracts', response.data);\n setContracts(response.data);\n const uniqueCompanyId = [...new Set(response.data.map(r => r.companyId))];\n // if (uniqueCompanyId.length > 0) {\n // setCompany(uniqueCompanyId[0])\n // }\n\n console.log('fail pass')\n const failedList = response.data.filter(({ status }) => status.value < 1);\n const passList = response.data.filter(({ status }) => status.value == 1);\n const graphData = complianceFilter.map(b => failedList.filter(f => f.compliances.filter(c => c.complianceType == b && (c.status == \"failed\" || c.status == \"missing\")).length > 0).length);\n setChartPassFaildata({\n labels: [`Fail: ${failedList.length}`, `Pass: ${passList.length}`],\n datasets: [\n {\n label: '# of contracts',\n data: [failedList.length, passList.length],\n backgroundColor: [\n 'rgba(200, 0, 0, 1)',\n 'rgba(0, 128, 0, 1)'\n ],\n hoverBackgroundColor: [\n 'rgba(220, 0, 0, 1)',\n 'rgba(0, 148, 0, 1)'\n ],\n borderWidth: 1,\n },\n ],\n })\n\n\n const totalContracts = failedList.length + passList.length;\n console.log('graphData')\n const graphColors = graphData.map(x => {\n if ((x / totalContracts) > 0.75) {\n return 'rgba(200, 0, 0, 1)'\n }\n else if ((x / totalContracts) > 0.5) {\n return 'rgba(255,103,0, 1)'\n }\n else {\n return 'rgba(0, 128, 0, 1)'\n }\n })\n const graphRed = graphData.map(x => {\n if ((x / totalContracts) > 0.75) {\n return x\n }\n return 0\n })\n console.log(graphRed, 'graph red')\n const graphYellow = graphData.map(x => {\n const per = (x / totalContracts);\n if (per <= 0.75) {\n return x\n }\n return 0\n })\n const graphGreen = graphData.map(x => {\n return totalContracts - x\n })\n setBarChartData({\n labels: complianceFilter,\n datasets: [{\n label: 'Failed over 75%',\n scales: {\n y: {\n display: false // Hide Y axis labels\n },\n x: {\n display: false // Hide X axis labels\n }\n },\n legend: {\n display: true\n },\n backgroundColor: failColor,\n hoverBackgroundColor: failHoverColor,\n data: graphRed,\n stack: 'Stack 0',\n }, {\n label: 'Failed less than 75%',\n legend: {\n display: true\n },\n backgroundColor: warningColor,\n hoverBackgroundColor: warningHoverColor,\n data: graphYellow,\n stack: 'Stack 0',\n }, {\n label: 'Pass',\n legend: {\n display: true\n },\n backgroundColor: passColor,\n hoverBackgroundColor: passHoverColor,\n data: graphGreen,\n stack: 'Stack 0',\n }],\n })\n\n let element = currentElement\n if (element.length > 0) {\n let complianceType = barChartlabels[element[0].index]\n if (barChartData.datasets[element[0].datasetIndex].backgroundColor == failColor || barChartData.datasets[element[0].datasetIndex].backgroundColor == warningColor) {\n setSelectedContractList(response.data.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n else {\n setSelectedContractList(response.data.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n }\n })\n .catch(e => {\n //console.log(e);\n //setHasInitializationError(true);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n const colorFilterUpdate = useMemo(() => {\n console.log('colorFilterUpdate')\n\n let status = \"\"\n if (colorFilter) {\n console.log('colorFilter', colorFilter)\n }\n if (colorFilter.name == \"Green\") {\n status = \"pass\"\n }\n else if (colorFilter.name == \"Red\") {\n status = \"failed\"\n }\n else if (colorFilter.name == \"Yellow\") {\n status = \"failed\"\n }\n\n if (status == \"failed\") {\n //this sets at the contract level\n setSelectedContractList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n if (status == \"pass\") {\n setSelectedContractList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\") && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n\n if (status == \"\") {\n setSelectedContractList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")))))\n }\n }, [colorFilter])\n\n const highLightedComplianceTypeUpdate = useMemo(() => {\n console.log('highLightedComplianceType')\n if (highLightedComplianceType == '') {\n setColorFilter(\"none\")\n }\n }, [highLightedComplianceType])\n\n const complianceFilterUpdate = useMemo(() => {\n console.log('complianceFilterUpdate')\n if (colorFilter) {\n console.log('colorFilter', colorFilter)\n }\n\n if (complianceFilter) {\n console.log('complianceFilter', complianceFilter)\n }\n getContracts(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }, [complianceFilter])\n\n const isNotFirstDay = (date) => {\n return date.date() != 1;\n }\n\n const isNotLastDay = (date) => {\n return date.date() != date.endOf('month').date();\n }\n\n const handleBeginDateChange = _.debounce((val) => {\n console.log(' handleBeginDateChange', val)\n setBeginDate(val)\n if (endDate > val) {\n setBeginDateError(null)\n setEndDateError(null)\n getContracts(val?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n else {\n setBeginDateError({ message: 'Begin date must be less than end date' })\n setEndDateError({ message: 'End date must be greater than begin date' })\n }\n }, 1000);\n\n const handleEndDateChange = _.debounce((val) => {\n console.log(' handleEndDateChange', val)\n setEndDate(val)\n if (beginDate < val) {\n setBeginDateError(null)\n setEndDateError(null)\n getContracts(beginDate?.format('YYYY-MM-DD'), val?.format('YYYY-MM-DD'))\n }\n else {\n setBeginDateError({ message: 'Begin date must be less than end date' })\n setEndDateError({ message: 'End date must be greater than begin date' })\n }\n }, 1000);\n\n\n useEffect(() => {\n getContracts(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }, []);\n\n const translateColor = (colorFilter) => {\n if (colorFilter?.name) {\n switch (colorFilter?.name) {\n case \"Green\":\n return \"success\";\n case \"Yellow\":\n return \"warning\";\n case \"Red\":\n return \"error\";\n default:\n return \"\";\n }\n }\n return \"\";\n }\n const ComplianceFilterBox = ({ compliances, complianceFilter, setComplianceFilter, highLightedComplianceType, setHighLightedComplianceType, colorFilter }) => {\n return (\n \n \n {highLightedComplianceType == '' ? Compliance Filter : { setHighLightedComplianceType('') }}\n />}\n \n {\n const {\n target: { value },\n } = event;\n setComplianceFilter(\n // On autofill we get a stringified value.\n typeof value === 'string' ? value.split(',') : value,\n )\n }}\n input={\n -1)} />\n )}\n \n \n )\n }\n const ColorFilterBox = ({ colors, colorFilter, setColorFilter }) => {\n return (\n <>\n\n \n \n Filter By Color:\n \n \n setColorFilter(\"none\")}\n color=\"Grey\"\n >\n None\n \n\n {colors.map((value) => {\n return (\n setColorFilter(value)}\n color={value.name}\n >\n {value.name}\n \n )\n })\n }\n \n \n \n )\n }\n\n const SearchAndFilterBox = ({ companies, companyFilter, setCompanyFilter, colors, colorFilter, setColorFilter, compliances, complianceFilter, setComplianceFilter, highLightedComplianceType, setHighLightedComplianceType }) => {\n return (\n \n \n {/* \n \n \n \n );\n }\n return (((contracts && contracts.length) > 0 ?\n \n \n \n \n \n \n
\n \n \n \n\n \n setOpenBeginDate(false)}\n id=\"beginDate\"\n name=\"beginDate\"\n minDate={dayjs('01/01/1900')}\n value={beginDate}\n onAccept={(newValue) => handleBeginDateChange(newValue)}\n shouldDisableDate={isNotFirstDay}\n label=\"Compliance Begin Date\"\n slotProps={{\n textField: {\n readOnly: true,\n onClick: () => setOpenBeginDate(true),\n error: !!beginDateError,\n helperText: beginDateError?.message,\n },\n layout: {\n sx: {\n '.MuiPickersDay-root:not(.Mui-disabled):not(.Mui-selected)': {\n color: '#000',\n borderRadius: 2,\n borderWidth: 1,\n borderColor: '#2196f3',\n border: '1px solid',\n backgroundColor: '#bbdefb',\n }\n }\n }\n }}\n />\n \n \n \n \n setOpenEndDate(false)}\n id=\"endDate\"\n name=\"endDate\"\n minDate={beginDate}\n value={endDate}\n onAccept={(newValue) => handleEndDateChange(newValue)}\n shouldDisableDate={isNotLastDay}\n label=\"Compliance End Date\"\n slotProps={{\n textField: {\n readOnly: true,\n onClick: () => setOpenEndDate(true),\n error: !!endDateError,\n helperText: endDateError?.message,\n },\n layout: {\n sx: {\n '.MuiPickersDay-root:not(.Mui-disabled):not(.Mui-selected)': {\n color: '#000',\n borderRadius: 2,\n borderWidth: 1,\n borderColor: '#2196f3',\n border: '1px solid',\n backgroundColor: '#bbdefb',\n }\n }\n }\n }}\n />\n \n \n \n\n \n \n \n
\n \n {showChart ?\n \n \n \n \n \n \n \n \n \n : <>}\n \n \n Total Records: {selectedContractList.length} }>\n \n \n \n \n {\n selectedContract?.compliances.map((c, idx) => {\n if ((props.isAximClinet) && c.complianceType == \"Contract Updates\") {\n return <>\n }\n\n return \n {c.complianceType}
\n {c.notes}
\n \n {showAction(c)}\n
\n \n })\n }\n \n \n \n \n : <>\n )\n );\n}\n\n","import PropTypes from 'prop-types';\n\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { Card } from '@mui/material';\n\nexport default function WidgetNumberSummary({ title, total, icon, color = 'primary', sx, ...other }) {\n return (\n \n {icon && {icon} }\n\n \n {total} \n\n \n {title}\n \n \n \n );\n}\n\nWidgetNumberSummary.propTypes = {\n color: PropTypes.string,\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n sx: PropTypes.object,\n title: PropTypes.string.isRequired,\n total: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),\n};","import React, { useContext, useEffect, useState } from \"react\";\nimport PropTypes from 'prop-types';\n\nimport Grid from '@mui/material/Unstable_Grid2';\nimport { Box, Card, CardHeader, CardContent, Container, Stack, Tooltip, Typography } from '@mui/material';\nimport { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';\nimport WidgetSummary from 'components/widgets/widget-summary';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';\nimport VisibilityIcon from '@mui/icons-material/Visibility';\nimport BookmarkAddedIcon from '@mui/icons-material/BookmarkAdded';\nimport MouseIcon from '@mui/icons-material/Mouse';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport AximDoughnut from \"components/Content/Graphs/AximDoughnut\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\n\nconst additionalData = [\n { title: \"Total\", total: () => { return \"100\"; }, icon: \n \n \n \n );\n}\n\nwidget.propTypes = {\n children: PropTypes.node,\n title: PropTypes.string.isRequired,\n tooltip: PropTypes.string.isRequired,\n total: PropTypes.func.isRequired,\n icon: PropTypes.node\n};\n\nfunction donut(props, idx) {\n const { title, showStack, showTotal, data, isCurrency } = props;\n\n return (\n \n \n );\n}\n\ndonut.propTypes = {\n title: PropTypes.string.isRequired,\n showStack: PropTypes.bool,\n showTotal: PropTypes.bool,\n data: PropTypes.array.isRequired,\n isCurrency: PropTypes.bool\n};\n\nfunction DataSection(props) {\n const { children, title, sx, ...other } = props;\n return (\n \n \n \n {title} \n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nDataSection.propTypes = {\n children: PropTypes.node,\n title: PropTypes.string.isRequired,\n};\n\n\nTableList.propTypes = {\n title: PropTypes.string.isRequired,\n data: PropTypes.array.isRequired,\n subheader: PropTypes.string,\n};\n\nfunction TableList(props) {\n const { data, title, subheader, ...otherProps } = props;\n return (\n \n \n \n \n {data.map((e, i) =>\n \n \n {e.label} \n \n {e.value} \n \n )}\n \n \n \n \n );\n}\n\nexport default function ShowcaseDashboard({ isVisible }) {\n const { companyId } = useContext(PrivateRoutesContext);\n const [isLoading, setIsLoading] = useState(true);\n const [userData, setUserData] = useState(null);\n const [liveEventData, setLiveEventData] = useState(null);\n const [educationData, setEducationData] = useState(null);\n const [navigationData, setNavigationData] = useState(null);\n const [communicationEngagementData, setCommunicationEngagementData] = useState(null);\n \n useEffect(() => {\n if (isVisible) {\n setIsLoading(true);\n apiGet(apiUrls.getShowcaseDashboard(companyId))\n .then((response) => {\n if (response.data) {\n updateUserData(response.data.userDashboard);\n updateLiveEvent(response.data.liveEventDashboard);\n updateEducationData(response.data.educationDashboard);\n updateNavigationData(response.data.navigationDashboard);\n updateCommunicationData(response.data.communicationEngagementDashboard);\n }\n })\n .catch((error) => {\n \n })\n .finally(() => {\n setIsLoading(false);\n })\n }\n }, [isVisible, companyId]);\n\n const updateUserData = (u) => {\n if (u) {\n var tempUserData = {\n userCounts: [\n {\n title: \"Total Users Invited\",\n tooltip: \"The total number of invited users to your showcase.\",\n total: () => { return u.totalUsersInvited; },\n icon: \n {userData ?\n \n {userData.userCounts.map((val, i) => {\n return (widget(val, i));\n })}\n {userData.mobileCounts.map((val, i) => {\n return (donut(val, i));\n })}\n : null}\n\n {liveEventData ?\n \n {liveEventData.liveEventCounts.map((val, i) => {\n return (widget(val, i)\n );\n })}\n {liveEventData.liveEventLists.map((val, i) => \n : null}\n\n {educationData ?\n \n {educationData.educationCounts.map((val, i) => {\n return (widget(val, i)\n );\n })}\n {educationData.educationLists.map((val, i) =>\n : null}\n {navigationData ?\n \n : null}\n\n {communicationEngagementData ?\n \n {communicationEngagementData.notifications.map((val, i) => {\n return (donut(val, i)\n );\n })}\n : null}\n\n {/* \n {additionalData.map((val, i) => {\n return (widget(val, i)\n );\n })}\n */}\n\n {/* \n {liveEventData.map((val, i) => {\n return (widget(val, i)\n );\n })}\n\n \n \n {liveEventData.map((val, i) => {\n return (widget(val, i)\n );\n })}\n */}\n \n );\n}\n","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport PropTypes from 'prop-types';\n\nimport { Alert, Box, Button, Stack, Paper, Grid, Tab, Tabs, Typography, SvgIcon } from '@mui/material';\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport { makeStyles } from '@mui/styles';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls, contractorApiUrls } from \"common/ApiUrls\";\n\nimport { Line, Bar, getElementAtEvent, getDatasetAtEvent } from 'react-chartjs-2';\nimport { Chart as ChartJS } from \"chart.js/auto\";\nimport { defaults } from \"chart.js\";\nimport { ChartColors } from \"common/ChartColors\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport moment from \"moment\";\nimport AximDoughnut from \"components/Content/Graphs/AximDoughnut\";\nimport { spacing } from '@mui/system';\nimport SubContractorDashboard from \"components/SubContractorDashboard\";\nimport ShowcaseDashboard from \"components/ShowcaseDashboard\";\nimport { ReactComponent as ShowcaseLogo } from \"assets/img/ShowcaseIcon.svg\";\n\nconst defaultTab = 'compliance';\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n paper: {\n margin: spacing(2),\n textAlign: \"left\",\n color: theme.palette.text.secondary,\n boxShadow: \"0px 4px 30px rgba(0, 0, 0, 0.05)\",\n },\n}));\n\nfunction CustomTabPanel(props) {\n const { children, value, index, isAvailable=true, ...other } = props;\n if(!isAvailable){\n return null;\n }\n return (\n \n {value === index && (\n \n {children}\n \n )}\n \n );\n}\n\nCustomTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n value: index,\n id: `simple-tab-${index}`,\n 'aria-controls': `simple-tabpanel-${index}`,\n };\n}\n\nfunction Dashboard() {\n const { companyId, acknowledgement } = useContext(PrivateRoutesContext);\n\n const [dashboardData, setDashboardData] = useState();\n\n const [chartData, setChartData] = useState();\n const [isLoadingDetails, setIsLoadingDetails] = useState(false);\n const [details, setDetails] = useState(null);\n\n const [isLoading, setIsLoading] = useState(true);\n const [currentTab, setCurrentTab] = useState(defaultTab);\n const [isSubContractor, setIsSubContractor] = useState(false);\n const [hasShowcase, sethasShowcase] = useState(true);\n\n useEffect(() => {\n if (companyId) {\n setCurrentTab(defaultTab)\n getDashboards();\n }\n }, [companyId]);\n\n useEffect(() => {\n // userInfo?.companyDetails?.showcaseUri ? sethasShowcase(true) : sethasShowcase(false);\n companyId.toUpperCase() === 'A579F785-CD14-461D-B6D2-09ADC9D43564' ? sethasShowcase(true) : sethasShowcase(false);\n }, [companyId])\n\n const getDashboards = () => {\n setIsLoading(true);\n setDetails(null);\n apiGet(apiUrls.getDashboardCards(companyId)).then((response) => {\n // console.log(response.data);\n setDashboardData(response.data);\n\n if (response.data.charts) {\n setChartData(response.data.charts);\n // console.log(response.data.charts, \"data\");\n }\n setIsLoading(false);\n });\n\n apiGet(apiUrls.getIsSubContractor(companyId)).then((response) => {\n setIsSubContractor(response.data)\n });\n };\n\n const handleClickChart = (chart, chartRef, event) => {\n var element = getElementAtEvent(chartRef.current, event);\n var dataset = getDatasetAtEvent(chartRef.current, event);\n\n // console.log(element, \"element\");\n // console.log(dataset, \"dataset\");\n\n if (element && element.length > 0 &&\n dataset && dataset.length > 0) {\n const datasetIndex = dataset[0].datasetIndex;\n\n var dataPoints = chart.dataSets[datasetIndex].dataPoints;\n\n // console.log(chart, \"chart\");\n\n if (dataPoints && dataPoints.length > 0 && chart.dataSets[datasetIndex].detailItemId) {\n // console.log(dataPoints[element[0].index], \"dp\");\n\n setIsLoadingDetails(true);\n apiGet(apiUrls.getDashboardItem(companyId, chart.dataSets[datasetIndex].detailItemId, moment(dataPoints[element[0].index].key).format(\"YYYY-MM-DD\")))\n .then(response => {\n // console.log(response.data);\n\n response.data.details.sort((a, b) => b.value - a.value); // sort by value descending\n\n setDetails(response.data);\n })\n .catch(response => {\n setDetails(null);\n })\n .finally(() => {\n setIsLoadingDetails(false);\n })\n }\n }\n }\n\n function ChartsArray({ charts, handleClickChart }) {\n if (charts) {\n return (\n charts.map((c, idx) =>\n \n : null\n }\n \n {!isLoading ? \n\n \n {!isLoading ?\n \n {acknowledgement?.acknowledgements?.implementation?.documentId ? acknowledgement.setDoShowClientAcknowledgement(true)}>Implementation Acknowledgement : null}\n {acknowledgement?.acknowledgements?.service?.documentId ? acknowledgement.setDoShowDeliverablesAcknowledgement(true)}>{\"Services & Deliverables Acknowledgement\"} : null}\n {acknowledgement?.acknowledgements?.brd?.documentId ? acknowledgement.setDoShowBRDAcknowledgement(true)}>{\"BRD Acknowledgement\"} : null}\n : null\n }\n {!isLoading && dashboardData !== undefined ?\n \n \n {dashboardData.reminders.map((prop, idx) => {\n return {prop} \n \n : \"\"}\n {!isLoading && dashboardData !== undefined ?\n \n \n \n \n {isLoadingDetails ? \n \n \n : null}\n \n : \"\"}\n \n\n \n {(!isLoading && dashboardData !== undefined && isSubContractor) ?\n \n \n \n \n \n \n \n : <>}\n \n \n );\n}\n\nfunction GenericChart({ chart, index, handleClickChart }) {\n const chartRef = useRef();\n\n const currencyTooltipOptions = {\n plugins: {\n tooltip: {\n callbacks: {\n label: function (context) {\n var label = context.dataset.label || '';\n // console.log(\"callback context\", context);\n\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n switch (context.dataset.format) {\n case \"decimal\":\n label += new Intl.NumberFormat('en-US', { style: 'decimal' }).format(context.parsed.y);\n break;\n default:\n label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);\n break;\n }\n\n // console.log(label);\n\n return label;\n }\n },\n footer: function (context) {\n var label = '';\n\n // console.log(context, \"context\");\n\n if (context.every(c => c.dataset.doShowTotal)) {\n var total = context.map(c => {\n var r = 0;\n\n if (c.formattedValue) {\n var n = c.formattedValue.replace(/,/g, '');\n if (!isNaN(n)) {\n r = parseFloat(n);\n }\n }\n\n return r;\n }).reduce((a, b) => a + b, 0)\n\n if (context.every(c => c.dataset.format !== \"decimal\")) {\n total = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(total);\n }\n\n label = `Total: ${total}`;\n }\n\n return label;\n }\n }\n }\n }\n };\n const defaultOptions = {\n responsive: true,\n interaction: { mode: 'index' },\n stacked: false,\n scales: {\n y: {\n display: true,\n type: \"linear\",\n position: \"left\",\n suggestedMin: 0,\n ticks: {\n beginAtZero: true,\n },\n },\n y2: {\n display: false,\n type: \"linear\",\n position: \"right\",\n suggestedMin: 0,\n grid: {\n drawOnChartArea: false,\n },\n ticks: {\n beginAtZero: true,\n },\n },\n },\n animation: {\n duration: 0\n }\n };\n\n let chartData = [];\n chartData.labels = chart.xAxis;\n chartData.datasets = [];\n chartData.chartType = chart.chartType;\n\n defaults.font.family = \"'Roboto', 'Helvetica', 'Arial', sans-serif\";\n\n let chartOptions = { ...defaultOptions, ...currencyTooltipOptions }\n chart.dataSets.map((prop, idx) => {\n const newDataSet = {\n key: idx,\n label: prop.label,\n data: prop.values,\n fill: false,\n backgroundColor: ChartColors.getColor(idx),\n hoverBackgroundColor: ChartColors.getColor(idx),\n borderColor: ChartColors.getColor(idx),\n yAxisID: prop.secondaryAxis ? \"y2\" : \"y\",\n stack: prop.stackGroupName,\n format: prop.numberFormat,\n doShowTotal: chart.doShowTotal,\n }\n if (prop.secondaryAxis) {\n chartOptions.scales.y2.display = true;\n }\n\n if (prop.overrideChartType) {\n newDataSet.type = prop.overrideChartType;\n }\n chartData.datasets.push(newDataSet);\n });\n\n chartOptions.plugins = { ...chartOptions.plugins, ...{ title: { display: true, text: chart.title, font: { size: 21, weight: \"normal\" } } } };\n var chartProps = {\n id: `chart${index}Ctx`,\n type: chartData.chartType,\n data: { ...chartData },\n options: { ...chartOptions },\n onClick: (event) => handleClickChart(chart, chartRef, event)\n };\n let component = null;\n\n switch (chartProps.type) {\n case \"Bar\":\n component = \n \n {/* \n \n ) : \"\";\n}\n\nexport default Dashboard;\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\nimport { Markup } from \"interweave\";\n\nimport MobileStepper from '@mui/material/MobileStepper';\nimport KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';\nimport KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';\nimport PlayArrowIcon from '@mui/icons-material/PlayArrow';\nimport PauseIcon from '@mui/icons-material/Pause';\n\nimport { Box, IconButton, Paper } from \"@mui/material\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nexport default function MessageCarousel ({ messages, hasInitializationError }) {\n const [isAdvancing, setIsAdvancing] = useState(true);\n \n const messageLength = useMemo(() => {\n return messages ? messages.length : 0;\n },[messages]);\n\n const messagesLengthRef = useRef(messageLength);\n messagesLengthRef.current = messageLength;\n\n const [activeStep, setActiveStep] = useState(0);\n const activeStepRef = useRef(activeStep);\n activeStepRef.current = activeStep;\n const [timeoutId, setTimeoutId] = useState(null);\n\n const handleNext = () => {\n setActiveStep((activeStepRef.current + 1) % messagesLengthRef.current);\n };\n\n const handleBack = () => {\n setActiveStep((activeStepRef.current + messagesLengthRef.current - 1) % messagesLengthRef.current);\n };\n\n const toggleAutoAdvance = () => {\n setIsAdvancing((prevIsAdvancing) => !prevIsAdvancing);\n }\n\n useEffect(() => {\n setActiveStep(0);\n }, [messages]);\n\n useEffect(() => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n\n if (isAdvancing) {\n let id = setTimeout(handleNext, 5000);\n setTimeoutId(id);\n }\n },[activeStep, isAdvancing])\n\n return (\n \n {hasInitializationError ? Error Loading Messages. \n : messages === null ? No Messages to display. \n : \n <>\n \n \n {isAdvancing ? \n\n \n \n \n }\n backButton={\n \n \n }\n />\n\n \n \n \n \n \n }\n \n );\n}\n","import React, { useState, useEffect, useContext } from \"react\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from 'common/ApiUrls';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport MessageCarousel from \"components/MessageCarousel\";\n\nexport default function Messages () {\n const { companyId } = useContext(PrivateRoutesContext);\n\n const [messages, setMessages] = useState([]);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n apiGet(apiUrls.getMessages(companyId)).then(\n (response) => {\n setMessages(response.data);\n setHasInitializationError(false);\n }\n )\n .catch((response) => {\n setHasInitializationError(true);\n });\n }\n\n return (\n \n {Utils.formatDate(row.original.payPeriodDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Start Date\",\n accessor: (cell) => Utils.formatDate(cell.startDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.startDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Total Hours\",\n accessor: \"totalHours\",\n },\n ];\n \n function getColmunValue (item) {\n if (item) {\n return item.replace(\"Header\", \"\");\n }\n }\n \n function getDynamicColumns (data) {\n Object.keys(data).map((item, index) => {\n if (data[item] !== null\n && item !== \"employeeHours\"\n && item !== \"currentPayDate\"\n ) {\n columns.push({ Header: data[item], accessor: getColmunValue(item) });\n }\n });\n }\n\n const initialTableState={\n pageIndex: 0, \n pageSize: 10,\n sortBy: [\n {\n id: 'name',\n desc: false\n }\n ]\n }\n\n return (\n \n {isLoading || isLoadingTimeSheets ? \n : timeSheets.length === 0 ?\n No Records Found, please select a different pay date. \n :\n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport moment from \"moment\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport TimeSheetsTable from \"components/Content/Table/TimeSheetsTable\"\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport { Utils } from \"common/Utils\";\n\nfunction TimeSheets (props) {\n const { companyId, userInfo } = useContext(PrivateRoutesContext);\n\n // PAYDATES DROPDOWN\n const [payDatesDropdown, setPayDatesDropdown] = useState([]);\n const [payDateSelected, setPayDateSelected] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const payDate = useMemo(() => payDateSelected ? moment(payDateSelected).format(\"YYYY-MM-DD\") : \"\", [payDateSelected]);\n\n useEffect(() => {\n handleChangeCompany();\n }, [companyId]);\n\n useEffect(() => {\n if (payDatesDropdown.length > 0) {\n setPayDateSelected(payDatesDropdown[0]);\n }\n }, [payDatesDropdown])\n\n const canDownload = useMemo(() => {\n return !Utils.isBroker(userInfo);\n },[userInfo]);\n\n const handleChangeCompany = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n setIsLoading(true);\n\n apiGet(apiUrls.getDropdown(selectedCompany))\n .then((response) => {\n setPayDatesDropdown(response.data.closedPayPeriods);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n return (\n \n
\n {payDatesDropdown.length > 0 ? (\n
setPayDateSelected(e.target.value)}\n value={payDateSelected}\n pairs={payDatesDropdown.map(payDates => ({ value: payDates, text: moment(payDates).format(\"MMMM DD, YYYY\") }))} />\n ) : (\n \"\"\n )}\n \n
\n \n
\n
\n
\n \n \n \n \n : null}\n \n\n
\n\n {checkingData ? (\n
\n ) : (\n hwStatements.length === 0 && No Record Found \n )}\n\n \n {\n\n hwStatements.map((statementDetails, i) => {\n return (\n \n
\n {dialogTitle} \n {dialogText} \n\n \n \n Close\n \n \n \n \n );\n}\n\nexport default HWStatement;\n","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport FileUploadTable from \"components/Content/CustomTable/FileUploadTable\";\nimport { Button } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport PublishOutlinedIcon from \"@mui/icons-material/PublishOutlined\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport FileUploadsDialog from \"components/Content/Modal/FileUploadsDialog\";\n\nfunction Uploads(props) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n const [openModal, setOpen] = useState(false); \n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n // FILE UPLOAD START\n useEffect(() => {\n getUserUploads(companyId);\n }, [companyId]);\n\n const getUserUploads = (companyId) => {\n setIsLoading(true);\n\n apiGet(apiUrls.getUserUploads(companyId)).then(\n (response) => {\n setFetchedData(response.data);\n setIsLoading(false);\n }\n ).catch(\n (response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading the files.\");\n error.setDoShowError(true);\n setIsLoading(false);\n }\n );\n }\n\n return (\n \n
\n
setOpen(true)}\n startIcon={ setOpen(false)} getUserUploads={getUserUploads} />\n \n
\n \n {\"File Upload\"}\n \n \n {/* SELECT UPLOAD TYPE */}\n \n \n Select Upload Type\n \n setUploadType(e.target.value)}\n label=\"Select Upload Type\"\n >\n Select a value \n {uploadTypes.map((item, i) => {\n return({item.uploadTypeName} );\n })}\n \n \n\n {/* SELECT PAY PERIOD */}\n {isPayPeriodRequired ? (\n \n \n \n Pay Period\n \n setPayPeriod(e.target.value)}\n label=\"Pay Period\"\n >\n Pay Date Included in File \n Open Pay Dates \n {currentOpenPayPeriods.map((item, i) => { \n return({moment(item).format('MMMM DD, YYYY')} );\n })}\n Closed Pay Dates \n {closedPayPeriods.map((item, i) => {\n return({moment(item).format('MMMM DD, YYYY')} );\n })}\n \n \n
\n ) : (\n <>\n )}\n\n {/* UPLOAD FILE */}\n \n \n \n Cancel\n \n \n \n )\n}","import React, { useState, useEffect,useContext } from \"react\";\nimport { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { CloudDownloadOutlined } from \"@mui/icons-material\";\nimport DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';\nimport ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';\nimport moment from \"moment\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\";\nimport StatusDetailsDialog from \"components/Content/Modal/StatusDetailsDialog\";\nimport AximTooltip from \"components/AximTooltip\";\nimport SummarizeOutlinedIcon from '@mui/icons-material/SummarizeOutlined';\nimport ReportRequestDialog from \"components/Content/Modal/ReportRequestDialog\";\n\nfunction Reports() {\n const { modalIsOpen, setModalIsOpen, companyId, setCompanyId } = useContext(PrivateRoutesContext);\n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [doShowDialog, setDoShowDialog] = useState(false);\n const [dialogTitle, setDialogTitle] = useState(\"\");\n const [dialogText, setDialogText] = useState(\"\");\n\n const [isReportRequestDialogOpen, setIsReportRequestDialogOpen] = useState(false);\n const [doShowConfirm, setDoShowConfirm] = useState(false);\n const [confirmCloseAction, setConfirmCloseAction] = useState(null);\n const [confirmTitle, setConfirmTitle] = useState('');\n const [confirmText, setConfirmText] = useState('');\n const [confirmButtonsDisabled, setConfirmButtonsDiabled] = useState(false);\n\n const [doShowStatusDetails, setDoShowStatusDetails] = useState(false);\n const [statusTitle, setStatusTitle] = useState(\"\");\n const [statuses, setStatuses] = useState([]);\n\n //REPORTSTATUSQUEUE\n\n const columns = [\n {\n Header: \"\",\n accessor: \"reportQueueId\",\n Cell: e =>\n <>\n \n promptDownloadReport(`${e.value}`,`${e.row.values.name}`)} color=\"primary\"> \n \n \n promptDeleteReport(`${e.value}`)} color=\"primary\"> \n \n \n ,\n maxWidth: 100,\n disableFilters: true,\n },\n {\n Header: \"Report Name\",\n accessor: \"name\",\n },\n {\n Header: () => {\n return (\n <>\n Report Status\n \n
\n \n
\n {dialogTitle} \n {dialogText} \n\n \n \n Close\n \n \n \n\n setIsReportRequestDialogOpen(false)} />\n downloadCreditNote(`${e.row.values.invoiceNumber}`,`${e.row.values.invoiceId}`)} color=\"primary\">{e.row.values.invoiceNumber} )\n apiGet(apiUrls.getInvoiceCreditDetails(invoiceDetailRowSelected)).then(\n (response) => {\n let newArray = [];\n Object.keys(response.data).map((item) => {\n if (response.data[item].length > 0) {\n if (item === \"creditNotes\") {\n newArray.push({\n creditNoteNumber:response.data[item][0].creditNoteNumber,\n creditNoteID:response.data[item][0].creditNoteID\n }\n );\n } else {\n newArray.push(item);\n }\n }\n });\n setKeyType(newArray);\n\n const creditResponse = [\n ...response.data.overpayments,\n ...response.data.prepayments,\n ...response.data.creditNotes,\n ];\n\n setCreditResponse(creditResponse);\n setDataEmpty(creditResponse.length === 0);\n }\n )\n .finally(() => {\n setCheckingData(false);\n });\n }\n };\n\n const downloadInvoice = (invoiceNumber, invoiceId) => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n console.log(invoiceId,'invoiceId');\n apiGet(apiUrls.downloadInvoice(invoiceId), { responseType: \"blob\" }).then(response => {\n\n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", `${invoiceNumber}.pdf`);\n document.body.appendChild(link);\n link.click();\n\n console.log(\"Invoice downloading successfully\");\n }).catch(\n (response) => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n }\n );\n }\n\n const getInvoiceUrl = (invoiceNumber, invoiceId) => {\n apiGet(apiUrls.getInvoiceUrl(invoiceId)).then(response => {\n const url = response.data.invoiceUrl\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"target\", \"_blank\");\n document.body.appendChild(link);\n link.click();\n }).catch(\n (response) => {\n setErrorText(\"An Error occurred getting invoice.\");\n setDoShowError(true);\n }\n );\n }\n\n const downloadCreditNote = (creditNoteNumber, creditNoteId) => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n console.log(creditNoteId,'creditNoteId');\n apiGet(apiUrls.downloadCreditNote(creditNoteId), { responseType: \"blob\" }).then(response => {\n\n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", `${creditNoteNumber}.pdf`);\n document.body.appendChild(link);\n link.click();\n\n console.log(\"Invoice downloading successfully\");\n }).catch(\n (response) => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n }\n );\n }\n const handleClose = () => {\n setOpen(false);\n };\n\n const columns = [\n {\n Header: \"Row ID\",\n accessor: \"invoiceId\",\n disableFilters: true,\n }, \n {\n Header: \"Invoice #\",\n accessor: \"invoiceNumber\",\n Cell: e => {\n // return ( downloadInvoice(`${e.row.values.invoiceNumber}`,`${e.row.values.invoiceId}`)} color=\"primary\">{e.row.values.invoiceNumber} )\n return (\n <>\n downloadInvoice(`${e.row.values.invoiceNumber}`,`${e.row.values.invoiceId}`)} color=\"primary\">{e.row.values.invoiceNumber} \n {\n \n (e.row.values.invoiceNumber?.endsWith(\"FSG\") && e.row.original.amountDue)>0? getInvoiceUrl(`${e.row.values.invoiceNumber}`,`${e.row.values.invoiceId}`)} color=\"primary\">\n :<>}\n \n )\n \n },\n },\n {\n Header: \"Reference\",\n accessor: \"reference\",\n },\n {\n Header: \"Due Date\",\n accessor: (cell) => Utils.formatDate(cell.dueDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.dueDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end',\n },\n {\n Header: \"Invoice Total\",\n accessor: (cell) => Utils.formatCurrency(cell.total),\n Cell: ({ row }) => (\n \n {Utils.formatCurrency(row.original.total)}\n \n ),\n className: 'text-end'\n },\n {\n Header: \"Amount Due\",\n accessor: (cell) => Utils.formatCurrency(cell.amountDue),\n Cell: ({ row }) => (\n \n {Utils.formatCurrency(row.original.amountDue)}\n \n ),\n className: 'text-end'\n },\n {\n Header: \"Payment Applied\",\n accessor: (cell) => Utils.formatCurrency(cell.amountPaid),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"paymentCol\");\n }}\n >\n {Utils.formatCurrency(row.original.amountPaid)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Credit Applied\",\n accessor: (cell) => Utils.formatCurrency(cell.credit),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"creditCol\");\n }}\n >\n {Utils.formatCurrency(row.original.credit)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Payment Rcvd\",\n accessor: (cell) => Utils.formatDate(cell.paymentDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.paymentDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end'\n },\n {\n Header: \"Disbursement Amt\",\n accessor: (cell) => Utils.formatCurrency(cell.disbursementAmount),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"disbursementCol\");\n }}\n >\n {Utils.formatCurrency(row.original.disbursementAmount)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Disbursement Date\",\n accessor: (cell) => Utils.formatDate(cell.disbursementDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.disbursementDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end'\n },\n ];\n\n // PAYMENT AMOUNT HEADERS\n const paymentColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.date),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.amount),\n },\n {\n Header: \"Type\",\n accessor: () => \"Payment\",\n },\n ];\n\n // CREDIT AMOUNT HEADERS\n const creditColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.date),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.appliedAmount),\n },\n {\n Header: \"Type\",\n accessor: () => keyType.join(),\n Cell: ({row}) => (\n \n { keyType.map(k => {\n return downloadCreditNote(`${k.creditNoteNumber}`,`${k.creditNoteID}`)} color=\"primary\">{k.creditNoteNumber} \n }) }\n \n ),\n },\n ];\n\n // DISBERSEMENT AMOUNT HEADERS\n const disbursementColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.disbursementDate),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.disbursementAmount),\n },\n {\n Header: \"Method\",\n accessor: \"disbursementMethod\",\n },\n {\n Header: \"Notes\",\n accessor: \"disbursementNote\",\n },\n ];\n\n const handleChangeCompany = () => {\n setIsLoading(true);\n\n apiGet(apiUrls.getAccounting(companyId)).then(\n (response) => {\n if (response.data.invoices) {\n setFetchedData(response.data.invoices);\n }\n console.log(response.data)\n setAmtAccountingBalance(response.data.amtAccountingBalance)\n setAmrsAccountingBalance(response.data.amrsAccountingBalance)\n setFsgAccountingBalance(response.data.fsgAccountingBalance)\n setAgsgAccountingBalance(response.data.agsgAccountingBalance)\n setRemittances(response.data.remittances);\n }\n )\n .finally(() => {\n setIsLoading(false);\n });\n \n // apiGet(apiUrls.getRemittance(companyId)).then(\n // (response) => {\n // setRemittances(response.data);\n // }\n // )\n }\n\n const handleRemittance = (remittanceType) => {\n let search = remittances.find(r => r.remittanceType === remittanceType);\n\n if (search) {\n setSelectedRemittance(search);\n setIsRemittanceVisible(true);\n }\n }\n\n const handleCloseRemittance = () => {\n setIsRemittanceVisible(false);\n }\n\n return (\n <>\n \n
\n {remittances.map((remittance, index) => \n handleRemittance(remittance.remittanceType)}\n className={ButtonStyle.CsubmitBtn}\n style={{ marginRight: \"15px\" }}\n startIcon={
\n\n {(amtAccountingBalance && (amtAccountingBalance.amountDue>0 || amtAccountingBalance.prepay>0 || amtAccountingBalance.remainingCredit>0)) ?
: null }\n {(fsgAccountingBalance && (fsgAccountingBalance.amountDue>0 || fsgAccountingBalance.prepay>0 || fsgAccountingBalance.remainingCredit>0)) ? : null }\n {(amrsAccountingBalance && (amrsAccountingBalance.amountDue>0 || amrsAccountingBalance.prepay>0 || amrsAccountingBalance.remainingCredit>0)) ? : null }\n {(agsgAccountingBalance && (agsgAccountingBalance.amountDue>0 || agsgAccountingBalance.prepay>0 || agsgAccountingBalance.remainingCredit>0)) ? : null }\n \n \n \n {\"Invoice Payments\"} \n \n {checkingData ? (\n No Data \n ) : (\n \n \n \n Close\n \n \n \n\n {selectedRemittance !== null ?\n \n {selectedRemittance.remittanceType} Remittance Information \n \n CHECK \n {selectedRemittance.address.map(line => \n {line}
\n )}\n\n WIRE/ACH INSTRUCTIONS \n Bank: {selectedRemittance.bankName}
\n Address: {selectedRemittance.bankAddress}
\n Account Name: {selectedRemittance.accountName}
\n Account Number: {selectedRemittance.accountNumber}
\n Routing Number: {selectedRemittance.routingNumber}
\n \n \n \n Close\n \n \n : <>}\n\n \n setDoShowError(false)}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n setDoShowError(false)} color=\"primary\">\n Close\n \n \n \n \n );\n}\n\nexport default Accounting;\n","import React, { useState, useEffect,useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\n\nimport { Box } from \"@mui/material\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\n\nfunction ExcessAllocation(props) {\n const { companyId, userInfo } = useContext(PrivateRoutesContext);\n const [isLoading, setIsLoading] = useState(false);\n const [selectedYear, setSelectedYear] = useState(\"\");\n const [excessAllocations, setExcessAllocations] = useState([]);\n const [excessTypesDictionary, setExcessTypesDictionary] = useState([]);\n const [years, setYears] = useState([]);\n const [excessTypes, setExcessTypes] = useState([]);\n const [selectedExcessType, setSelectedExcessType] = useState(\"\");\n\n useEffect(() => {\n apiGet(apiUrls.getExcessAllocationTypes(companyId))\n .then((response) => {\n if (response.data) {\n var groupedByYear = Utils.groupByArrays(response.data, 'year')\n .sort().reverse();\n\n if (groupedByYear && groupedByYear.length > 0 && groupedByYear[0] !== undefined)\n {\n var excessTypesDictionary = groupedByYear.map(y => { return { key: y.key, values: y.values.map(v => v.payoutTypeCode)} });\n setExcessTypesDictionary(excessTypesDictionary);\n }\n }\n })\n .catch((e) => {\n\n });\n }, [companyId]);\n\n const canDownload = useMemo(() => {\n return !Utils.isBroker(userInfo);\n },[userInfo]);\n\n useEffect(() => {\n setYears(excessTypesDictionary.map(v => v.key));\n },[excessTypesDictionary]);\n\n useEffect(() => {\n if (years && years.length > 0) {\n setSelectedYear(years[0]);\n }\n },[years])\n\n useEffect(() => {\n if (selectedYear) {\n var types = excessTypesDictionary.find(v => v.key === selectedYear).values;\n\n setExcessTypes(types);\n }\n },[selectedYear]);\n\n useEffect(() => {\n if (excessTypes && excessTypes.length > 0) {\n setSelectedExcessType(excessTypes[0]);\n }\n },[excessTypes])\n\n useEffect(() => {\n setIsLoading(true);\n\n if (selectedYear && selectedExcessType) {\n apiGet(apiUrls.getExcessAllocationDetails(companyId, selectedExcessType, selectedYear))\n .then((response) => {\n setExcessAllocations(response.data);\n })\n .catch((e) => {\n \n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n else {\n setIsLoading(false);\n }\n },[selectedYear, selectedExcessType])\n\n const handleChange = (event) => {\n setSelectedYear(event.target.value);\n };\n\n const handleExcessType = (event) => {\n setSelectedExcessType(event.target.value);\n };\n\n const columns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.periodName), // format date\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.periodName)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Payout Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Retro Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Recoup Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Actual Payout Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n ];\n\n return (\n \n \n \n ({ value: item }))} />\n \n \n ({ value: item }))} />\n \n \n \n \n );\n}\n\nexport default ExcessAllocation;\n","import React, { useState, useEffect,useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\n\nimport { Box } from \"@mui/material\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\n\nfunction Hourbank () {\n const { companyId, userInfo } = useContext(PrivateRoutesContext);\n const [isLoading, setIsLoading] = useState(false);\n const [selectedYear, setSelectedYear] = useState(\"\");\n const [fetchedData, setHourBanks] = useState([]);\n const [years, setYears] = useState([]);\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const canDownload = useMemo(() => {\n return !Utils.isBroker(userInfo);\n },[userInfo]);\n\n useEffect(() => {\n if (years && years.length > 0) {\n setSelectedYear(years[0]);\n }\n },[years])\n\n useEffect(() => {\n if (companyId && selectedYear) {\n setIsLoading(true);\n\n apiGet(apiUrls.getHourbankDetails(companyId, selectedYear)).then(\n (response) => {\n setHourBanks(response.data);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n },[companyId, selectedYear])\n\n const handleChangeCompany = () => {\n apiGet(apiUrls.getCompanyDropdowns(companyId)).then(\n (response) => {\n console.log(response.data);\n if (response.data && response.data.years && response.data.years.length > 0) {\n setYears(response.data.years.sort().reverse());\n }\n else {\n setYears([]);\n }\n })\n .catch((e) => {\n \n });\n }\n\n const columns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.periodName), // format date\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.periodName)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Beginning Balance\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Contribution Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Retro Amount This Year\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Retro Amount Prior Year\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Total Retro Amount\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Ending Balance\",\n accessor: (cell) => \n \n ,\n className: 'text-end',\n },\n {\n Header: \"Hourbank Type\",\n accessor: \"hourbankTypeCode\",\n },\n ];\n\n\n return (\n \n
\n
\n
setSelectedYear(e.target.value)}\n value={selectedYear}\n pairs={years.map(item => ({ value: item }))} />\n \n {/* HOURBANK TYPE DROPDOWN */}\n {/*
\n
({ value: item, text: item.hourbankTypeCode }))} />\n */}\n
\n
\n
\n promptDownloadFile(`${e.value}`, `${e.row.values.fileName}`)} color=\"primary\"> \n ,\n maxWidth: 100,\n disableFilters: true,\n },\n {\n Header: \"File Name\",\n accessor: \"fileName\",\n },\n {\n Header: \"Update Date\",\n accessor: (cell) => Utils.formatDate(cell.updateDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\"\n },\n {\n Header: \"Update By\",\n accessor: \"updateUser\",\n },\n ];\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n setIsLoading(true);\n\n apiGet(apiUrls.getFiles(companyId)).then(\n (response) => {\n // debugger\n setFetchedData(response.data);\n }\n )\n .finally(() => setIsLoading(false));\n }\n \n const promptDownloadFile = (fileId, fileName) => {\n setConfirmCloseAction(() => (result) => downloadFile(result, fileId, fileName));\n setConfirmTitle('Download File');\n setConfirmText(`Are you sure you would like to download file?`);\n setDoShowConfirm(true);\n }\n\n const downloadFile = (isConfirmed, fileId, fileName) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n\n Utils.downloadFile(apiUrls.downloadFile(companyId, fileId),\n fileName,\n null,\n () => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n },\n () => {\n setConfirmButtonsDiabled(false);\n setDoShowConfirm(false);\n });\n }\n else {\n setDoShowConfirm(false);\n }\n }\n\n return (\n \n {/*
*/}\n
\n
\n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n \n Close\n \n \n \n\n confirmCloseAction(result)}\n confirmTitle={confirmTitle}\n confirmText={confirmText}\n buttonsDisabled={confirmButtonsDisabled} />\n \n toggleExpandedRow(row)} />\n :\n \n toggleExpandedRow(row)} />\n \n },\n },\n {\n Header: \"HW Benefit Date\",\n accessor: (cell) => Utils.formatDate(cell.hwBenefitDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.hwBenefitDate, true)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: () => {\n return (\n <>\n Status\n \n {Utils.formatDate(row.original.uploadDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Upload By\",\n accessor: \"uploadUser\",\n },\n ]);\n \n const showStatuses = e => {\n e.stopPropagation();\n\n setStatusTitle(\"Hours Upload Statuses\");\n setDoShowStatusDetails(true);\n }\n\n const toggleExpandedRow = (row, fileId) => {\n row.toggleRowExpanded();\n }\n\n const renderRowSubComponent = React.useCallback(\n ({ row, rowProps, visibleColumns }) => {\n return (\n \n
\n
setIsFileDialogOpen(true)}\n startIcon={ setIsFileDialogOpen(false)} getUserUploads={getUserUploads} />\n\n setDoShowStatusDetails(false)} title={statusTitle} statuses={statuses} />\n \n
\n
\n\n )\n }\n}\n\n\n/* \n * PropType validation\n */\nEmailTemplateBodyEditor.propTypes = {\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n value: PropTypes.string,\n placeholders: PropTypes.array\n}\n\nexport default EmailTemplateBodyEditor;","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport { Box, Button, Checkbox, ClickAwayListener, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, MenuItem, Select, TextField } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\nimport EmailTemplateBodyEditor from \"components/EmailTemplateBodyEditor\";\n\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Utils } from 'common/Utils';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport moment from \"moment\";\n\nimport AttachEmailOutlinedIcon from '@mui/icons-material/AttachEmailOutlined';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport SendIcon from '@mui/icons-material/Send';\nimport AximTooltip from \"components/AximTooltip\";\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\"\nimport EmailAttachments from \"../Table/EmailAttachments\";\n\nexport default function EmailTemplateDialog({isOpen, handleClose, templateToEdit, showWelcomeEmailOption = true, allowCodeUpdate = true}) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const [isInitialized, setIsInitialized] = useState(false);\n const [templatesToCopy, setTemplatesToCopy] = useState([]);\n const [doShowTemplateToCopy, setDoShowTemplateToCopy] = useState(false);\n const [selectedTemplate, setSelectedTemplate] = useState(\"\");\n const [emailFroms, setEmailFroms] = useState([]);\n const [placeholders, setPlaceholders] = useState([]);\n const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);\n const [isCloseDisabled, setIsCloseDisabled] = useState(false);\n\n const [lastSavedTemplate, setLastSavedTemplate] = useState({\n templateId: Utils.emptyGuid(),\n templateDescription: '',\n templateCode: '',\n isWelcomeEmail: false,\n fromId: Utils.emptyGuid(),\n templateSubject: ''\n });\n\n const [currentTemplate, setCurrentTemplate] = useState({\n templateId: Utils.emptyGuid(),\n templateDescription: '',\n templateCode: '',\n isWelcomeEmail: false,\n fromId: Utils.emptyGuid(),\n templateSubject: '',\n isTestEmailRequired: false\n });\n\n const [savedBody, setSavedBody] = useState('');\n const [templateBody, setTemplateBody] = useState('');\n\n const [isSavingAttachment, setIsSavingAttachment] = useState(false);\n const [attachmentRefresh, setAttachmentRefresh] = useState(0);\n\n const [testEmailAddress, setTestEmailAddress] = useState('');\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isSendingTestEmail, setIsSendingTestEmail] = useState(false);\n\n const [doShowConfirm, setDoShowConfirm] = useState(false);\n const [confirmTitle, setConfirmTitle] = useState('');\n const [confirmText, setConfirmText] = useState('');\n const [confirmAction, setConfirmAction] = useState(null);\n\n useEffect(() => {\n if (isOpen && !isInitialized) {\n apiGet(apiUrls.getGenericEmailTemplates).then(\n (response) => {\n setTemplatesToCopy(response.data);\n }\n ).catch(\n (response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading templates.\");\n error.setDoShowError(true);\n }\n );\n\n apiGet(apiUrls.getEmailAddresses).then((response) => {\n setEmailFroms(response.data);\n }).catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading email addresses.\");\n error.setDoShowError(true);\n });\n\n apiGet(apiUrls.getEmailTemplatePlaceholders).then((response) => {\n setPlaceholders(response.data);\n console.log(response.data);\n }).catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading placeholders.\");\n error.setDoShowError(true);\n });\n\n setTestEmailAddress(localStorage.getItem(`loginName`));\n setIsInitialized(true);\n }\n },[isOpen]);\n\n useEffect(() => {\n setSelectedTemplate('');\n setFirstEmailFrom();\n setIsTooltipVisible(false);\n },[isOpen]);\n\n useEffect(() => {\n if (templateToEdit) {\n setDoShowTemplateToCopy(false);\n // console.log(templateToEdit);\n\n setLastSavedTemplate({\n templateId: templateToEdit.emailTemplateId,\n templateDescription: templateToEdit.emailTemplateDescription,\n templateCode: templateToEdit.emailTemplateCode,\n isWelcomeEmail: templateToEdit.isWelcomeEmail,\n fromId: templateToEdit.emailFromId,\n templateSubject: templateToEdit.emailTemplateSubject\n });\n\n setCurrentTemplate({\n templateId: templateToEdit.emailTemplateId,\n templateDescription: templateToEdit.emailTemplateDescription,\n templateCode: templateToEdit.emailTemplateCode,\n isWelcomeEmail: templateToEdit.isWelcomeEmail,\n fromId: templateToEdit.emailFromId,\n templateSubject: templateToEdit.emailTemplateSubject,\n isTestEmailRequired: templateToEdit.isTestEmailRequired,\n });\n\n setSavedBody(templateToEdit.emailTemplateBody);\n setTemplateBody(templateToEdit.emailTemplateBody);\n }\n else {\n setDoShowTemplateToCopy(true);\n clearInputs();\n }\n },[templateToEdit]);\n\n useEffect(() => {\n setFirstEmailFrom();\n },[emailFroms])\n\n useEffect(() => {\n var t = templatesToCopy.find(c => c.emailTemplateId === selectedTemplate);\n\n if (t) {\n setCurrentTemplate({\n ...currentTemplate,\n templateId: Utils.emptyGuid(),\n templateDescription: t.emailTemplateDescription,\n templateCode: t.emailTemplateCode,\n isWelcomeEmail: t.isWelcomeEmail,\n templateSubject: t.emailTemplateSubject,\n isTestEmailRequired: t.isTestEmailRequired\n });\n \n setTemplateBody(t.emailTemplateBody);\n }\n else {\n clearInputs();\n }\n \n setAttachmentRefresh(attachmentRefresh + 1);\n }, [selectedTemplate])\n\n useEffect(() => {\n checkSubmitDisabled();\n },[currentTemplate,templateBody])\n\n const isTestEmailDisabled = useMemo(() =>\n currentTemplate.templateDescription != lastSavedTemplate.templateDescription ||\n currentTemplate.templateCode != lastSavedTemplate.templateCode ||\n currentTemplate.fromId != lastSavedTemplate.fromId ||\n currentTemplate.templateSubject != lastSavedTemplate.templateSubject ||\n (`${templateBody}` != savedBody && templateBody != savedBody)\n ,[currentTemplate, lastSavedTemplate, templateBody, savedBody])\n\n const isAttachmentDisabled = useMemo(() => currentTemplate.templateId === Utils.emptyGuid(), [currentTemplate.templateId])\n\n const checkSubmitDisabled = () => {\n setIsSubmitDisabled(currentTemplate.templateDescription === '' ||\n currentTemplate.templateCode === '' ||\n currentTemplate.templateSubject === '' ||\n currentTemplate.fromId === '' ||\n templateBody === '' ||\n templateBody === '
'); // Quill makes blank templateBody ===
\n }\n\n const clearInputs = () => {\n setCurrentTemplate({\n templateId: Utils.emptyGuid(),\n templateDescription: '',\n templateCode: '',\n isWelcomeEmail: false,\n templateSubject: '',\n isTestEmailRequired: false\n });\n\n setLastSavedTemplate({\n templateId: Utils.emptyGuid(),\n templateDescription: '',\n templateCode: '',\n isWelcomeEmail: false,\n templateSubject: ''\n });\n\n setTemplateBody('');\n setSavedBody('');\n }\n\n const setFirstEmailFrom = () => {\n if (emailFroms.length > 0) {\n setCurrentTemplate({\n ...currentTemplate,\n fromId: emailFroms[0].emailFromId\n });\n }\n }\n\n const handlePromptUploadAttachment = (e) => {\n if (e.target.files[0]) {\n //console.log(e.target.files[0]);\n\n setConfirmTitle(\"Upload Attachment\");\n setConfirmText(`Are you sure you would like to upload attachment: ${e.target.files[0].name}?`);\n setDoShowConfirm(true);\n setConfirmAction(() => (result) => handleUploadAttachment(e, result));\n }\n }\n\n const handleUploadAttachment = (e, result) => {\n if (e.target.files[0] && result) {\n setIsSavingAttachment(true);\n\n const formData = new FormData();\n formData.append(\"file\", e.target.files[0]);\n\n return apiPost(apiUrls.postEmailAttachment(companyId, currentTemplate.templateId), formData, {\n headers: {\n \"content-type\": \"multipart/form-data\",\n Accept: \"*/*\",\n },\n })\n .then ((response) => {\n setAttachmentRefresh(attachmentRefresh + 1);\n })\n .catch((response) => {\n console.log(response);\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred saving attachment.\");\n error.setDoShowError(true);\n })\n .finally(() => {\n e.target.value = null;\n setIsSavingAttachment(false);\n setDoShowConfirm(false);\n });\n }\n else {\n setDoShowConfirm(false);\n e.target.value = null;\n }\n }\n\n const handlePromptDeleteAttachment = (cell) => {\n //console.log(cell, \"cell\");\n\n setConfirmTitle(\"Delete Attachment\");\n setConfirmText(`Are you sure you would like to delete attachment: ${cell.fileName}?`);\n setDoShowConfirm(true);\n setConfirmAction(() => (result) => handleDeleteAttachment(cell, result));\n }\n\n const handleDeleteAttachment = (cell, result) => {\n setDoShowConfirm(false);\n\n if (result) {\n apiPost(apiUrls.deleteEmailAttachment(companyId, cell.externalEmailFileId))\n .then ((response) => {\n setAttachmentRefresh(attachmentRefresh + 1);\n })\n .catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred deleting attachment.\");\n error.setDoShowError(true);\n });\n }\n }\n\n const handleSubmit = () => {\n // TODO: Disable controls\n setIsCloseDisabled(true);\n setIsSubmitDisabled(true);\n\n apiPost(apiUrls.postEmailTemplate(companyId), {\n emailTemplateId: currentTemplate.templateId,\n emailTemplateDescription: currentTemplate.templateDescription,\n emailTemplateCode: currentTemplate.templateCode,\n isWelcomeEmail: currentTemplate.isWelcomeEmail,\n emailFromID: currentTemplate.fromId,\n emailTemplateSubject: currentTemplate.templateSubject,\n emailTemplateBody: templateBody\n })\n .then((response) => {\n //console.log(response);\n\n setIsTooltipVisible(true);\n \n setLastSavedTemplate({\n templateId: response.data,\n templateDescription: currentTemplate.templateDescription,\n templateCode: currentTemplate.templateCode,\n isWelcomeEmail: currentTemplate.isWelcomeEmail,\n fromId: currentTemplate.fromId,\n templateSubject: currentTemplate.templateSubject\n });\n setSavedBody(templateBody);\n setDoShowTemplateToCopy(false);\n setCurrentTemplate({ ...currentTemplate, templateId: response.data, isTestEmailRequired: true });\n })\n .catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred saving Email Template.\");\n error.setDoShowError(true);\n\n console.log(response);\n })\n .finally(() => {\n checkSubmitDisabled();\n setIsCloseDisabled(false);\n })\n }\n\n const handleSendTestEmail = () => {\n setIsTooltipVisible(false);\n setIsSendingTestEmail(true);\n\n apiPost(apiUrls.sendTestEmail(companyId, currentTemplate.templateId), { emailAddresses: [ testEmailAddress ] })\n .then((response) => {\n setCurrentTemplate({ ...currentTemplate, isTestEmailRequired: false });\n })\n .catch((response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred sending Test Email.\");\n error.setDoShowError(true);\n })\n .finally((response) => {\n setIsSendingTestEmail(false);\n })\n \n }\n\n const handleConfirmClose = (result) => {\n confirmAction(result);\n }\n\n return (\n <>\n \n Email Template \n \n \n \n {doShowTemplateToCopy ? \n <>\n \n Template to Copy \n \n \n setSelectedTemplate(e.target.value)}\n sx={{width: \"100%\"}}>\n {templatesToCopy.map(t => {t.emailTemplateDescription} )}\n \n \n : null}\n \n Template Description \n \n \n setCurrentTemplate({ ...currentTemplate, templateDescription: e.target.value })}\n sx={{width: \"100%\"}} />\n \n \n Template Code \n \n \n setCurrentTemplate({ ...currentTemplate, templateCode: e.target.value })}\n sx={{width: \"100%\"}} \n disabled={!allowCodeUpdate}\n />\n \n {showWelcomeEmailOption?<>\n setCurrentTemplate({ ...currentTemplate, isWelcomeEmail: e.target.checked})} />\n } label=\"Is Welcome Email\" />\n :<>}\n \n \n Email From \n \n \n setCurrentTemplate({ ...currentTemplate, fromId: e.target.value })}\n sx={{width: \"100%\"}}>\n {emailFroms.map(e => {`${e.emailType} - ${e.email}`} )}\n \n \n \n Email Subject \n \n \n setCurrentTemplate({ ...currentTemplate, templateSubject: e.target.value })}\n sx={{width: \"100%\"}} />\n \n \n Email Body \n \n \n setTemplateBody(e)} />\n \n \n \n \n Attachments \n \n \n \n \n \n \n \n\n \n \n \n setIsTooltipVisible(false)}>\n \n
setIsTooltipVisible(false)}\n onOpen={() => setIsTooltipVisible(true)}\n title={isTestEmailDisabled ? \"Save Template before sending Test Email\" : \"Send Test Email to Enable Employee Emails\"}\n >\n \n \n \n setTestEmailAddress(e.target.value)}\n sx={{minWidth: \"300px\"}} />\n {currentTemplate.isTestEmailRequired ? \n \n \n \n \n \n \n\n \n \n Save Template\n \n \n Close\n \n \n \n\n \n editTemplate(cell)}> \n \n \n promptRemoveTemplate(cell)}> \n \n {cell.isTestEmailRequired ? \n \n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Update By\",\n accessor: (cell) => `${cell.updateUserFirstName} ${cell.updateUserLastName}`,\n },\n ];\n\n return (\n \n \n \n \n \n\n \n )\n}","import React, { useState, useEffect,useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, Paper, TextField } from \"@mui/material\";\nimport { LoadingButton } from '@mui/lab';\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport SendIcon from '@mui/icons-material/Send';\n\nfunction Feedback({ portal }) {\n const { companyId } = useContext(PrivateRoutesContext);\n\n const [feedbackType, setFeedbackType] = useState(\"\");\n const [fetchedData, setFetchedData] = useState([]);\n const [subjectVal, setSubjectVal] = useState(\"\");\n const [descVal, setDescVal] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false)\n\n const [doDisplayMessage, setDoDisplayMessage] = useState(false);\n const [title, setTitle] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n\n const isFormComplete = useMemo(() => {\n return feedbackType && subjectVal && descVal;\n },[feedbackType, subjectVal, descVal]);\n\n const handleChange = (event) => {\n setFeedbackType(event.target.value);\n };\n const handleSubjectVal = (event) => {\n setSubjectVal(event.target.value);\n };\n const handleDescVal = (event) => {\n setDescVal(event.target.value);\n };\n // SUBMIT FORM\n const submitFeedback = () => {\n let feedbackData = {\n feedbackTypeCodeID: feedbackType,\n subject: subjectVal,\n content: descVal,\n };\n \n setIsSubmitting(true);\n\n apiPost(apiUrls.postFeedbackForm(companyId), feedbackData)\n .then((res) => {\n setTitle(\"Success!\");\n setMessage(\"Thank you for your feedback!\");\n setDoDisplayMessage(true);\n\n setSubjectVal(\"\");\n setDescVal(\"\");\n setFeedbackType(fetchedData[0].feedbackTypeCodeID);\n })\n .catch((e) => {\n setTitle(\"Failure\");\n setMessage(\"Error submitting feedback.\");\n setDoDisplayMessage(true);\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n };\n\n const handleChangeCompany = () => {\n apiGet(apiUrls.getFeedbackType(portal)).then((response) => {\n setFetchedData(response.data);\n\n if (response.data.length > 0) {\n setFeedbackType(response.data[0].feedbackTypeCodeID);\n }\n });\n }\n \n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n return (\n \n \n \n \n ({ value: item.feedbackTypeCodeID, text: item.feedbackTypeName }))} />\n \n \n \n \n \n \n submitFeedback()}\n disabled={isSubmitting || !isFormComplete}\n loading={isSubmitting}\n loadingPosition=\"start\"\n startIcon={ \n \n \n\n \n {title} \n \n {message}\n \n\n \n setDoDisplayMessage(false)} color=\"primary\">\n Close\n \n \n \n \n );\n}\n\nexport default Feedback;\n","import React, { useState, useEffect, useMemo, useContext } from \"react\";\n\nimport { Box } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\n\nimport UploadOutlinedIcon from '@mui/icons-material/UploadOutlined';\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport ImageHandler from \"./ImageHandler\";\n\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nexport default function LogoSettings () {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const sqrImgMaxWidth = 500;\n const sqrImgMaxHeight = 500;\n\n const rectImgMaxWidth = 1000;\n const rectImgMaxHeight = 500;\n\n const [sqrLogo, setSqrLogo] = useState(null);\n const [sqrLogoIsUpdated, setSqrLogoIsUpdated] = useState(false);\n const [rectLogo, setRectLogo] = useState(null);\n const [rectLogoIsUpdated, setRectLogoIsUpdated] = useState(false);\n const [isUpdating, setIsUpdating] = useState(false);\n\n useEffect(() => {\n loadLogo(\"sqr\", setSqrLogo);\n loadLogo(\"rect\", setRectLogo);\n },[companyId]);\n\n const sqrLogoSrc = useMemo(\n () => { console.log(sqrLogo, \"updating sqr\"); return sqrLogo ? ((typeof sqrLogo === 'string' || sqrLogo instanceof String) ? sqrLogo : window.URL.createObjectURL(sqrLogo)) : null; },\n [sqrLogo]\n )\n \n const rectLogoSrc = useMemo(\n () => rectLogo ? ((typeof rectLogo === 'string' || rectLogo instanceof String) ? rectLogo : window.URL.createObjectURL(rectLogo)) : null,\n [rectLogo]\n )\n\n const sqr = {\n title: \"Square Logo\",\n setLogo: setSqrLogo,\n setIsUpdated: setSqrLogoIsUpdated,\n maxWidth: sqrImgMaxWidth,\n maxHeight: sqrImgMaxHeight,\n src: sqrLogoSrc,\n };\n\n const rect = {\n title: \"Rectangular Logo\",\n setLogo: setRectLogo,\n setIsUpdated: setRectLogoIsUpdated,\n maxWidth: rectImgMaxWidth,\n maxHeight: rectImgMaxHeight,\n src: rectLogoSrc,\n };\n\n const handleUpdateAppearance = () => {\n setIsUpdating(true);\n\n const formData = new FormData();\n formData.append(\"squareLogo\", sqrLogo);\n formData.append(\"isSquareLogoUpdated\", sqrLogoIsUpdated);\n formData.append(\"rectangularLogo\", rectLogo);\n formData.append(\"isRectangularLogoUpdated\", rectLogoIsUpdated);\n\n apiPost(apiUrls.uploadImage(companyId), formData, {\n headers: {\n \"content-type\": \"multipart/form-data\",\n Accept: \"*/*\",\n }}).then((response) => {\n setIsUpdating(false);\n // SUCCESS\n });\n }\n\n \n const loadLogo = (shape, setter) => {\n apiGet(apiUrls.downloadImage(companyId, shape)).then(response => {\n if (response.data) {\n setter(`data:image/${response.data.extension};base64, ${response.data.file}`);\n }\n }).catch(\n (response) => {\n setter(\"\");\n }\n );\n };\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n","import React, { useContext, useEffect, useState } from \"react\";\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport AximTooltip from \"components/AximTooltip\";\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';\nimport {\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n InputLabel,\n Select,\n MenuItem,\n TextField,\n FormGroup,\n FormControlLabel,\n Checkbox,\n FormControl,\n IconButton\n} from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { useForm } from 'react-hook-form';\nimport * as Yup from 'yup';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n handleEdit(cell)}\n >\n \n \n promptDelete(cell)}\n >\n \n ),\n disableFilters: true,\n };\n\n if (isReadonly && !isAdmin) {\n setColumnsArray(columns);\n }\n else {\n setColumnsArray([actionColumn, ...columns]);\n }\n }, [isReadonly, isAdmin, refresh]);\n\n useEffect(() => {\n fetchTypeOfHours()\n if ( refresh > 0) {\n fetchHourTypes()\n }\n }, [refresh]);\n \n let columns = [\n {\n Header: \"Type Of Hour\",\n accessor: \"typeOfHoursName\",\n },\n {\n Header: \"Hour Type name\",\n accessor: \"hourTypeName\",\n },\n {\n Header: \"Is Paid Hour?\",\n accessor: (cell) => (cell.isPaid ? \"Yes\" : \"No\"),\n },\n {\n Header: \"Is Work Hour?\",\n accessor: (cell) => (cell.isWork ? \"Yes\" : \"No\"),\n },\n {\n Header: \"Is Contract Hour?\",\n accessor: (cell) => (cell.isContract ? \"Yes\" : \"No\"),\n }\n ];\n\n const options = {\n filter: true,\n filterType: \"dropdown\",\n responsive: \"standard\",\n viewColumns: true,\n download: false,\n print: false,\n textLabels: {\n body: {\n noMatch:\n fetchedData !== undefined ? (\n \n \n {(hourType.hourTypeID == Utils.emptyGuid() ? \"Add New Hour Type\" : \"Edit Hour Type\")}\n \n \n \n \n handleHourTypeChange('hourTypeName', e.target.value)}\n error={errors.hourTypeName ? true : false}\n helperText={errors.hourTypeName?.message}\n />\n \n Type Of Hour \n handleHourTypeChange('typeOfHoursID', e.target.value)}\n error={errors.typeOfHoursID ? true : false}\n >\n {typeOfHours.map((th, i) => {th.typeOfHoursName} )}\n\n \n \n
\n \n \n \n
\n \n \n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n\n \n \n \n \n }\n />\n\n handleEdit(cell)}\n >\n \n {Utils.formatDate(row.original.beginDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Rate\",\n accessor: (cell) => \n \n {(contract.contractRateID == Utils.emptyGuid() ? \"Add Contract\" : \"Edit Contract\")}\n \n \n \n \n handleContractChange('contractName', e.target.value)}\n error={errors.contractName ? true : false}\n helperText={errors.contractName?.message}\n />\n\n $,\n }}\n required\n defaultValue={contract.rate}\n value={contract.rate}\n onChange={(e) => handleContractChange('rate', e.target.value)}\n id=\"rate\"\n name=\"rate\"\n variant=\"standard\"\n error={errors.rate ? true : false}\n helperText={errors.rate?.message}\n />\n
\n \n \n handleContractChange('beginDate', newValue?.format('YYYY-MM-DD'))}\n label=\"Begin Date\"\n slotProps={{\n textField: {\n helperText: errors.beginDate?.message,\n },\n }}\n />\n \n \n \n handleContractChange('endDate', newValue?.format('YYYY-MM-DD'))}\n label=\"End Date\"\n slotProps={{\n textField: {\n helperText: errors.endDate?.message,\n },\n }}\n />\n \n\n
\n \n \n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n \n \n \n changeTab('contractUsers')}\n >\n \n {isReadonly && !isAdmin ? null :\n <>\n \n \n \n }\n }\n />\n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport MUIDataTable from \"components/mui-datatable\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n TextField,\n IconButton,\n Checkbox\n} from \"@mui/material\";\n\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { Box } from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return handleEditUser(cell)}\n >\n {\n let newList = userContractList.map(c =>\n c.contractID === cell.contractID\n ? { ...c, checked: !cell.checked }\n : c\n )\n setUserContractList(newList)\n }}\n >),\n disableFilters: true,\n },\n {\n Header: \"Contract Name\",\n accessor: \"contractName\",\n }\n ];\n const options = {\n filter: true,\n filterType: \"dropdown\",\n responsive: \"standard\",\n viewColumns: true,\n download: false,\n print: false,\n textLabels: {\n body: {\n noMatch:\n fetchedData !== undefined ? (\n \n \n {(contractUser.userID == Utils.emptyGuid() ? \"Add Contract User\" : \"Edit Contract User\")}\n \n \n \n \n handleUserChange('firstName', e.target.value)}\n error={userErrors.firstName ? true : false}\n helperText={userErrors.firstName?.message}\n />\n handleUserChange('lastName', e.target.value)}\n error={userErrors.lastName ? true : false}\n helperText={userErrors.lastName?.message}\n />\n
\n \n handleUserChange('email', e.target.value)}\n error={userErrors.email ? true : false}\n helperText={userErrors.email?.message}\n />\n
\n \n {contractUserError}\n
\n \n \n \n {(isAdmin || !isReadonly ?\n {(savingUserData ? \"Saving\" : \"Save\")}\n :<>)}\n \n \n Cancel\n \n \n \n\n {/* Assign Contract MODAL */}\n \n Contract List\n \n \n \n \n
\n }\n hidePagination={true}\n />\n \n \n {(isAdmin || !isReadonly ?\n {(savingUserData ? \"Saving\" : \"Save\")}\n :<>)}\n \n \n Cancel\n \n \n \n \n \n changeTab('contracts')}\n >\n \n {(isReadonly && !isAdmin ? null :\n \n \n )}\n }\n />\n \n )\n}","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Fade\n} from \"@mui/material\"\n\n\nexport default function ConfirmationDialog(props) {\n const { onClose,onConfirm, value: valueProp, open, ...other } = props;\n const [value, setValue] = React.useState(valueProp);\n\n React.useEffect(() => {\n if (!open) {\n setValue(valueProp);\n }\n }, [valueProp, open]);\n\n\n// const handleCancel = () => {\n// onClose();\n// };\n\n// const handleOk = () => {\n// onConfirm()\n// };\n\n\n return (\n \n {props.title} \n \n {props.message}\n \n \n \n Cancel\n \n {props.processing?props.processingLabel:props.confirmLabel} \n \n \n );\n}\n\nConfirmationDialog.propTypes = {\n onClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n onConfirm: PropTypes.func.isRequired,\n};\n","import React, { useState, useMemo, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n InputLabel,\n Select,\n MenuItem,\n TextField,\n Box,\n Snackbar,\n FormControl,\n Alert,\n IconButton\n} from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { apiGet, apiPost, apiDelete } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\nimport moment from \"moment\";\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport ConfirmationDialog from \"components/ConfirmationDialog\";\nimport StatusDetailsDialog from \"components/Content/Modal/StatusDetailsDialog\";\nimport dayjs from 'dayjs';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return handleEdit(cell)}\n >\n \n {Utils.formatDate(row.original.payDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Work Start\",\n accessor: (cell) => Utils.formatDate(cell.workStart),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.workStart)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Work End\",\n accessor: (cell) => Utils.formatDate(cell.workEnd),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.workEnd)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Benefit Date\",\n accessor: (cell) => Utils.formatDate(cell.benefitDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.benefitDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"HW Benefit Date\",\n accessor: (cell) => Utils.formatDate(cell.hwBenefitDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.hwBenefitDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Tax Period\",\n accessor: (cell) => Utils.formatDate(cell.taxPeriod),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.taxPeriod)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: () => {\n return (\n <>\n Status\n \n handleCalendarChange(props.fieldName, newValue.toDate())}\n label={props.label}\n slotProps={{\n textField: {\n helperText: errors[props.fieldName]?.message,\n },\n }}\n />\n \n )\n }\n\n const ErrorAlert = (props) => {\n if (props.error != null && props.error != '') {\n return (\n {props.error}\n )\n }\n return null\n }\n\n return (\n <>\n {/* Add calendar MODAL */}\n \n \n Add Pay Periods\n \n \n \n \n \n Pay Frequency \n handleCalendarChange('paymentFrequency', e.target.value)}\n required\n variant=\"standard\"\n error={errors.paymentFrequency ? true : false}\n helperText={errors.paymentFrequency?.message}\n >\n {payFrequencies.map((th, i) => {th.payFrequencyName} )}\n\n \n \n\n
\n \n
\n \n
\n \n
\n {/* \n
*/}\n \n
\n \n \n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n\n {/* Edit Payperiod MODAL */}\n \n \n Edit Pay Periods\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n\n setPayPeriodDeleted(false)}\n >Pay period deleted. \n \n \n \n \n \n \n \n }\n />\n\n setDoShowStatusDetails(false)} title={statusTitle} statuses={statuses} />\n \n )\n}","import React, { useState, useEffect } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n InputLabel,\n Select,\n FormLabel,\n Paper,\n TextField,\n FormControlLabel,\n Checkbox,\n FormControl,\n Alert,\n MenuItem,\n Snackbar,\n Switch,\n Divider\n} from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { Box } from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport _ from 'lodash';\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n Start End Tobacco User Reduction % Amount \n {rates.map((r, index) => (\n {r.ageStart} {r.ageEnd} {r.tobaccoStatusName} {r.ageReduction} {r.amount} \n
)\n }\n else if (rateType == 'SALARYBASE') {\n return (\n Start End Tobacco User Amount \n {rates.map((r, index) => (\n {r.salaryStart} {r.salaryEnd} {r.tobaccoStatusName} {r.amount} \n
)\n }\n else if (rateType == 'AGESALARYBASE') {\n return (\n Age Start Age End Salary Start Salary End Tobacco User Reduction % Amount \n {rates.map((r, index) => (\n {r.ageStart} {r.ageEnd} {r.salaryStart} {r.salaryEnd} {r.tobaccoStatusName} {r.ageReduction} {r.amount} \n
)\n }\n else if (rateType == 'HOURS') {\n return (\n Start End Amount \n {rates.map((r, index) => (\n {r.hoursStart} {r.hoursEnd} {r.amount} \n
)\n }\n else if (rateType == 'CONTRACTCODE') {\n return (\n Contract Code Amount \n {rates.map((r, index) => (\n {r.contractCodeCode} {r.amount} \n
)\n }\n else if (rateType == 'CONTRACTCODEPAYDATE') {\n return (\n Contract Code Pay Date Start Pay Date End Amount \n {rates.map((r, index) => (\n {r.contractCodeCode} {r.payDateStart} {r.payDateEnd} {r.amount} \n
)\n }\n else if (rateType == 'AGEHOURS') {\n return (\n Start End Tobacco User Reduction % Amount Amount Per Hour \n {rates.map((r, index) => (\n {r.ageStart} {r.ageEnd} {r.tobaccoStatusName} {r.ageReduction} {r.amount} {r.amountPerHour} \n
)\n }\n return <>;\n }\n const renderCoverage = (c, index) => {\n if (c.enabled) {\n return (\n \n handleChangeCoverage(c)}\n inputProps={{ 'aria-label': 'controlled' }}\n />} label={`${c.coverageLevelName}`}\n sx={{ m: 1, minWidth: 220 }} />\n\n handleViewRates(c)}\n sx={{ m: 1, minWidth: 80 }}>\n Rates\n \n \n \n \n Employee % \n {\n updateCoverageLevel(c, 'EmployerAmount', e.target.value)\n }}\n disabled={c.EmployeePercentage > 0}\n />\n \n \n Employer $ \n {\n updateCoverageLevel(c, 'EmployeePercentage', e.target.value)\n }}\n disabled={c.EmployerAmount > 0}\n />\n \n \n \n \n handleChangeCoverage(c)}\n inputProps={{ 'aria-label': 'controlled' }}\n />} label={`${c.coverageLevelName}`}\n sx={{ m: 1, minWidth: 200 }} />\n\n \n \n \n Benefit {currentBenefit?.benefitName}\n \n \n \n \n \n \n Benefit Name \n {\n setBenefitName(e.target.value)\n setValue('benefitName', e.target.value, { shouldValidate: true })\n }}\n />\n \n \n \n \n Benefit Type \n {\n setBenefitTypeID(e.target.value)\n setValue('benefitTypeID', e.target.value, { shouldValidate: true })\n }}\n required\n shrink\n variant=\"standard\"\n error={errors['benefitTypeID'] ? true : false}\n helpertext={errors['benefitTypeID']?.message}\n >\n {benefitTypeList.map((val, i) => {val.benefitTypeName} )}\n \n \n \n \n \n Carrier \n {\n setCarrierID(e.target.value)\n setValue('carrierID', e.target.value, { shouldValidate: true })\n }}\n required\n shrink\n size=\"small\"\n variant=\"standard\"\n error={errors['carrierID'] ? true : false}\n helpertext={errors['carrierID']?.message}\n >\n {carrierList.map((val, i) => {val.carrierName} )}\n \n \n \n \n \n Calculation Type \n {\n setVariableTypeID(e.target.value)\n setValue('variableTypeID', e.target.value, { shouldValidate: true })\n }}\n required\n shrink\n size=\"small\"\n variant=\"standard\"\n error={errors['variableTypeID'] ? true : false}\n helpertext={errors['variableTypeID']?.message}\n >\n {benefitCalcTypes.map((val, i) => {val.variableTypeName} )}\n \n \n \n \n \n {/* \n */}\n \n {\n setIsFringeCost(e.target.checked)\n setValue('isFringeCost', e.target.checked)\n }}\n />} label=\"Taken against fringe\" />\n \n
\n \n
\n Coverage Levels \n \n {\n coverageList.map((c, index) =>\n (\n renderCoverage(c, index)\n ))\n }\n\n \n \n
\n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n\n\n \n \n {(coverageRates != null && coverageRates.length > 0) ? coverageRates[0].rateVariableTypeName : \"\"} Rates\n \n \n \n \n \n {\n (coverageRates != null && coverageRates.length > 0) ? renderCoverageRate(coverageRates[0].rateVariableTypeCode, coverageRates) : <>\n }\n \n \n \n \n \n \n Cancel\n \n \n \n\n setOpenSnack(false)}\n autoHideDuration={5000}\n message=\"Benefit setting saved successfully!\"\n key=\"bottom-center-snack\"\n >\n setOpenSnack(false)}\n severity=\"success\" sx={{ width: '100%' }}>\n Benefit setting saved successfully!\n \n \n\n \n )\n}","import { yupResolver } from '@hookform/resolvers/yup';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport {\n AccordionSummary,\n AccordionDetails,\n Accordion,\n Box,\n Button,\n Checkbox,\n Typography,\n IconButton\n} from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport BenefitSettingsModal from \"components/BenefitSettingsModal\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport moment from \"moment\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport React, { useEffect, useState, useContext } from \"react\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { useForm } from 'react-hook-form';\nimport * as Yup from 'yup';\nimport PdfViewerModal from './PdfViewerModal';\nimport CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';\nimport AximTooltip from './AximTooltip';\nimport { Utils } from 'common/Utils';\nimport ConfirmDialog from './Content/Modal/ConfirmDialog';\n\nexport default function PlanSettings ({ refresh, isAdmin, isReadonly }) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const validationSchema = Yup.object().shape({\n });\n const {\n register,\n control,\n handleSubmit,\n reset,\n setValue,\n formState: { errors }\n } = useForm({\n resolver: yupResolver(validationSchema)\n });\n \n const [checkingData, setCheckingData] = useState(true)\n const [checkingDetailData, setCheckingDetailData] = useState(false);\n const [openModal, setOpen] = useState(false)\n const [currentBenefit, setCurrentBenefit] = useState({})\n\n const [planColumns, setPlanColumns] = useState([]);\n const [planData, setPlanData] = useState([])\n const [expanded, setExpanded] = React.useState(-1)\n\n const [isShowingPlans, setIsShowingPlans] = useState(true);\n\n const [documents, setDocuments] = useState([]);\n const [openPdfViewer, setOpenPdfViewer] = useState(false);\n const [document, setDocument] = useState(null);\n const [selectedDocuments, setSelectedDocuments] = useState([]);\n\n const [doShowConfirm, setDoShowConfirm] = useState(false);\n const [confirmTitle, setConfirmTitle] = useState('');\n const [confirmText, setConfirmText] = useState('');\n const [confirmAction, setConfirmAction] = useState(null);\n\n useEffect(() => {\n if (refresh > 0) {\n fetchPlans();\n }\n\n var planActionColumn = \n {\n Header: \"Action\",\n accessor: (cell) => (\n handleEdit(cell)}\n >\n toggleSelectDocument(cell)} checked={isDocumentSelected(cell)} />\n \n promptDownloadDocument(cell)} >\n \n \n {cell.filename.endsWith(\".pdf\") ? \n \n showDocument(cell)} >\n \n \n : null\n }\n ,\n disableFilters: true,\n },\n {\n Header: \"File Name\",\n accessor: \"filename\"\n },\n {\n Header: \"Description\",\n accessor: \"description\"\n }\n ];\n\n const fetchDocuments = (planObj) => {\n setCheckingDetailData(true);\n\n apiGet(apiUrls.getPlanDocuments(companyId, planObj.planPeriodID))\n .then((response) => {\n setDocuments(response.data);\n })\n .catch((e) => {\n setDocuments([]);\n })\n .finally(() => {\n setCheckingDetailData(false);\n setSelectedDocuments([]);\n });\n }\n\n const promptDownloadAll = (planObj) => {\n setConfirmTitle(\"Download Documents\");\n setConfirmText(`Are you sure you would like to download all documents?`);\n setDoShowConfirm(true);\n setConfirmAction(() => (result) => downloadAll(result, planObj));\n }\n\n const downloadAll = (result, planObj) => {\n if (result) {\n Utils.downloadFile(apiUrls.downloadAllPlanDocuments(companyId, planObj.planPeriodID),\n null,\n null,\n () => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"Unable to download documents.\");\n error.setDoShowError(true);\n },\n () => {\n // setConfirmButtonsDiabled(false);\n // setDoShowConfirm(false);\n });\n }\n \n setDoShowConfirm(false);\n }\n\n const promptDownloadSelected = (planObj) => {\n setConfirmTitle(\"Download Documents\");\n setConfirmText(`Are you sure you would like to download the selected documents?`);\n setDoShowConfirm(true);\n setConfirmAction(() => (result) => downloadSelected(result, planObj));\n }\n\n const downloadSelected = (result, planObj) => {\n if (result) {\n Utils.downloadFile(apiUrls.downloadSelectedPlanDocuments(companyId, planObj.planPeriodID, selectedDocuments),\n null,\n null,\n () => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"Unable to download documents.\");\n error.setDoShowError(true);\n },\n () => {\n setSelectedDocuments([]);\n },\n true,\n selectedDocuments);\n }\n \n setDoShowConfirm(false);\n }\n\n const toggleSelectDocument = (cell) => {\n if (isDocumentSelected(cell)) {\n let index = selectedDocuments.indexOf(cell.documentId);\n\n setSelectedDocuments(selectedDocuments.filter((_, i) => i != index));\n }\n else {\n setSelectedDocuments([...selectedDocuments, cell.documentId]);\n }\n }\n\n const isDocumentSelected = (cell) => {\n return selectedDocuments.some(d => d === cell.documentId);\n }\n\n const showDocument = (cell) => {\n apiGet(apiUrls.getPlanDocument(companyId, cell.documentId))\n .then((response) => {\n setDocument(response.data);\n })\n .catch((e) => {\n setDocument(null);\n\n error.setTitle(\"An Error Occurred\");\n error.setText(\"Unable to display document.\");\n error.setDoShowError(true);\n })\n .finally(() => {\n setOpenPdfViewer(true);\n });\n }\n\n const promptDownloadDocument = (cell) => {\n setConfirmTitle(\"Download Document\");\n setConfirmText(`Are you sure you would like to download this document?`);\n setDoShowConfirm(true);\n setConfirmAction(() => (result) => downloadDocument(result, cell));\n }\n\n const downloadDocument = (result, cell) => {\n if (result) {\n Utils.downloadFile(apiUrls.downloadPlanDocument(companyId, cell.documentId),\n cell.filename,\n null,\n () => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"Unable to download document.\");\n error.setDoShowError(true);\n },\n () => {\n // setConfirmButtonsDiabled(false);\n // setDoShowConfirm(false);\n });\n }\n\n setDoShowConfirm(false);\n }\n\n const handleConfirmClose = (result) => {\n confirmAction(result);\n }\n\n return (\n <>\n {\n setOpen(false)\n //refresh plan\n let benefitPlan = planData.find(p=>p.planPeriodID==currentBenefit.planPeriodID)\n fetchPlanDetail(benefitPlan)\n }}\n />\n {document ? \n {\n setOpenPdfViewer(false);\n setDocument(null);\n }}\n handleDownloadUrl={apiUrls.downloadPlanDocument(companyId, document.documentId)}\n />\n : null}\n\n { handleChange(key) }}\n >\n \n \n {moment(plan.beginDate).format(\"MM/DD/YYYY\")} to {moment(plan.endDate).format(\"MM/DD/YYYY\")} - {plan.planPeriodName}\n \n {expanded === key ? \n \n {isShowingPlans ? \"View Documents\" : \"View Benefits\"}\n \n : null}\n \n \n \n {checkingDetailData ? \n \n \n );\n })\n }\n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport PropTypes from 'prop-types';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport moment from \"moment\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport Box from '@mui/material/Box';\nimport { Button } from \"@mui/material\";\nimport Container from '@mui/material/Container';\nimport Grid from '@mui/material/Grid';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport MenuItem from '@mui/material/MenuItem';\nimport Paper from '@mui/material/Paper';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport NumberFormat from 'react-number-format';\n\nconst hoursMethods = [\n {\n value: 'Upload',\n label: 'File Upload',\n },\n {\n value: 'Integration',\n label: 'Integration',\n },\n];\n\nconst censusMethods = [\n {\n value: 'CensusManagment',\n label: 'Census Management',\n },\n {\n value: 'EASE',\n label: 'EASE Integration',\n },\n {\n value: 'Upload',\n label: 'File Upload',\n },\n {\n value: 'Other',\n label: 'Other Integration',\n },\n];\n\nconst NumberFormatCustom = React.forwardRef(function NumberFormatCustom(props, ref) {\n const { onChange, ...other } = props;\n\n return (\n \n {/* fetchedData length check required to allow dropdown value to display after data load */}\n {Object.keys(fetchedData).length !== 0 ?\n \n \n \n {/* */}\n To make changes to this information please contact AXIM \n {/* */}\n \n Contact AXIM\n \n \n \n \n \n \n Company Details\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n {groupType === \"FSG\" ?\n \n \n \n \n Configuration Details\n \n \n \n \n \n \n \n \n \n \n {hoursMethods.map((option) => (\n \n {option.label}\n \n ))}\n \n \n \n \n {censusMethods.map((option) => (\n \n {option.label}\n \n ))}\n \n \n \n \n : null}\n \n \n : \"\"}\n \n );\n}\n\nexport default CompanyDetailSettings;\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle } from \"@mui/material\";\n\nimport moment from \"moment\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport TimeSheetsTable from \"components/Content/Table/TimeSheetsTable\";\n\nexport default function ComplianceHours ({isActive, complianceId, setComplianceHoursComplete, isViewOnly, completedMessage}) {\n const { error } = useContext(PrivateRoutesContext);\n\n const [complianceHours, setComplianceHours] = useState(null);\n \n const [formattedHWBenefitDate, setFormattedHWBenefitDate] = useState(\"\");\n const [isLoadingComplianceHours, setIsLoadingComplianceHours] = useState(false);\n const [isEmployeeCountApproved, setIsEmployeeCountApproved] = useState(false);\n const [hourTypeApproval, setHourTypeApproval] = useState([]);\n const [doShowTimeSheetsDialog, setDoShowTimeSheetsDialog] = useState(false);\n\n useEffect(() => {\n if (isActive || isViewOnly) {\n getComplianceHours();\n }\n },[isActive, isViewOnly, complianceId])\n\n useEffect(() => {\n if (complianceHours) {\n setFormattedHWBenefitDate(complianceHours.currentPeriod ? moment(complianceHours.currentPeriod).format(\"YYYY-MM-DD\") : \"\");\n\n setIsEmployeeCountApproved(false);\n setHourTypeApproval(complianceHours.hours.map(r => !r.doRequireApproval))\n }\n else {\n setFormattedHWBenefitDate(\"\");\n setIsEmployeeCountApproved(false);\n setHourTypeApproval([]);\n }\n },[complianceHours])\n\n useEffect(() => {\n var canComplete = !(hourTypeApproval && hourTypeApproval.length > 0 && hourTypeApproval.every(c => c) && (isEmployeeCountApproved || !(complianceHours && complianceHours.doRequireApproval)));\n\n setComplianceHoursComplete(canComplete);\n },[isEmployeeCountApproved, complianceHours, hourTypeApproval]);\n\n const getComplianceHours = () => {\n if (complianceId) {\n setIsLoadingComplianceHours(true);\n setComplianceHours(null);\n\n apiGet(apiUrls.getComplianceHours(complianceId)).then(response => {\n if (response.data) {\n setComplianceHours(response.data);\n }\n }).catch(response => {\n console.log(response, \"error\");\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading hours.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsLoadingComplianceHours(false);\n });\n }\n }\n\n return (\n \n \n {isLoadingComplianceHours ?\n \n \n Current: {Utils.formatDate(complianceHours.currentPeriod)} \n \n \n Prior: {Utils.formatDate(complianceHours.priorPeriod)} \n \n \n Approve1 \n \n \n \n \n Employees with Hours\n \n \n {complianceHours.currentPeriodEmployees}\n \n \n {complianceHours.priorPeriodEmployees}\n \n \n {complianceHours.doRequireApproval ? \n setIsEmployeeCountApproved((prevState) => !prevState)}\n disabled={isViewOnly}\n />\n : null}\n \n \n \n \n Hours \n \n \n Total \n \n \n Retro \n \n \n Total \n \n \n {complianceHours.hours.map((h,i) => (\n \n \n {h.hourType}\n \n \n {h.totalCurrentHours}\n \n \n {h.retroCurrentHours}\n \n \n {h.totalPriorHours}\n \n \n {h.doRequireApproval ? \n setHourTypeApproval((prevState) => {\n let s = [...prevState];\n s[i] = !s[i];\n return s;\n })}\n disabled={isViewOnly}\n />\n : null}\n \n ))}\n \n 1 Note: All deviations above 10% require approval \n {completedMessage ? \n \n {completedMessage} \n \n : null}\n : null}\n \n \n setDoShowTimeSheetsDialog(true)}\n disabled={complianceHours == null}\n >\n See Details\n \n \n setDoShowTimeSheetsDialog(false)}\n fullWidth={true}\n maxWidth=\"xl\"\n >\n \n {`Time Sheets${complianceHours && complianceHours.currentPeriod ? ` - ${Utils.formatDate(complianceHours.currentPeriod)}` : \"\"}`}\n \n \n \n\n \n setDoShowTimeSheetsDialog(false)} color=\"primary\">\n Close\n \n \n \n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle } from \"@mui/material\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { Utils } from \"common/Utils\";\n\nexport default function ComplianceEnrollments ({isActive, complianceId, setComplianceEnrollmentsComplete, isViewOnly, completedMessage}) {\n const { error } = useContext(PrivateRoutesContext);\n \n const [complianceEnrollments, setComplianceEnrollments] = useState(null);\n const [isLoadingComplianceEnrollments, setIsLoadingComplianceEnrollments] = useState(false);\n const [enrollmentApproval, setEnrollmentApproval] = useState([]);\n const [doShowCensusDialog, setDoShowCensusDialog] = useState(false);\n\n useEffect(() => {\n if (isActive || isViewOnly) {\n getComplianceEnrollments();\n }\n },[isActive, isViewOnly, complianceId])\n\n useEffect(() => {\n if (complianceEnrollments?.enrollments) {\n setEnrollmentApproval(complianceEnrollments.enrollments.map(r => !r.doRequireApproval))\n }\n else {\n setEnrollmentApproval([]);\n }\n },[complianceEnrollments])\n\n useEffect(() => {\n var canComplete = !(enrollmentApproval && enrollmentApproval.length > 0 && enrollmentApproval.every(c => c));\n\n setComplianceEnrollmentsComplete(canComplete);\n },[enrollmentApproval]);\n\n const getComplianceEnrollments = () => {\n if (complianceId) {\n setIsLoadingComplianceEnrollments(true);\n setComplianceEnrollments(null);\n\n apiGet(apiUrls.getComplianceEnrollments(complianceId)).then(response => {\n if (response.data) {\n setComplianceEnrollments(response.data);\n }\n }).catch(response => {\n console.log(response, \"error\");\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading enrollments.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsLoadingComplianceEnrollments(false);\n });\n }\n }\n\n return (\n \n \n {isLoadingComplianceEnrollments ?\n \n \n Benefit Type \n \n \n Current: {Utils.formatDate(complianceEnrollments.currentPeriod)} \n \n \n Prior: {Utils.formatDate(complianceEnrollments.priorPeriod)} \n \n \n Approve1 \n \n \n {complianceEnrollments.enrollments.map((e,i) => \n \n \n {e.benefitTypeName}\n \n \n {e.currentPeriod}\n \n \n {e.previousPeriod}\n \n \n {e.doRequireApproval ? \n setEnrollmentApproval((prevState) => {\n let s = [...prevState];\n s[i] = !s[i];\n return s;\n })}\n disabled={isViewOnly}\n />\n : null}\n \n )\n }\n \n 1 Note: All deviations above 10% require approval \n : null}\n \n {completedMessage ? \n \n {completedMessage} \n \n : null}\n {/* \n setDoShowCensusDialog(true)}\n disabled={complianceEnrollments == null}\n >\n See Details\n \n */}\n setDoShowCensusDialog(false)}\n fullWidth={true}\n maxWidth=\"md\"\n >\n \n {`Census`}\n \n \n This is where the details go!\n \n\n \n setDoShowCensusDialog(false)} color=\"primary\">\n Close\n \n \n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Box, Checkbox } from \"@mui/material\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nexport default function ComplianceCompare ({isActive, complianceId, setComplianceCompareComplete, isViewOnly, completedMessage}) {\n const { error } = useContext(PrivateRoutesContext);\n\n const [complianceDetails, setComplianceDetails] = useState(null);\n const [isLoadingComplianceDetails, setIsLoadingComplianceDetails] = useState(false);\n const [initialComplianceApprovals, setInitialComplianceApprovals] = useState([]);\n\n useEffect(() => {\n if (isActive || isViewOnly) {\n getComplianceDetails();\n }\n },[isActive, isViewOnly, complianceId])\n \n useEffect(() => {\n if (complianceDetails && complianceDetails.statistics) {\n setInitialComplianceApprovals(complianceDetails.statistics.map(r => !(r.doRequireApproval || r.overrideRequireApproval)))\n }\n },[complianceDetails]);\n\n useEffect(() => {\n var canComplete = !(initialComplianceApprovals && initialComplianceApprovals.length > 0 && initialComplianceApprovals.every(c => c));\n\n setComplianceCompareComplete(canComplete);\n },[initialComplianceApprovals])\n\n const getComplianceDetails = () => {\n setIsLoadingComplianceDetails(true);\n setComplianceDetails(null);\n\n apiGet(apiUrls.getInitialComplianceDetails(complianceId)).then(response => {\n if (response.data) {\n setComplianceDetails(response.data);\n }\n }).catch(response => {\n console.log(response, \"error\");\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading details.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsLoadingComplianceDetails(false);\n });\n }\n\n return (\n \n \n {isLoadingComplianceDetails ?\n \n \n {`Retro Date: ${Utils.formatDate(complianceDetails.retroDate)}`} \n \n : null}\n \n \n \n \n Current: {Utils.formatDate(complianceDetails.currentPeriod)} \n \n \n \n Prior Average{!Utils.isMinDate(complianceDetails.compareStart) && !Utils.isMinDate(complianceDetails.compareEnd) ? \n complianceDetails.compareStart === complianceDetails.compareEnd ? `: ${Utils.formatDate(complianceDetails.compareStart)}` :\n `: ${Utils.formatDate(complianceDetails.compareStart)} - ${Utils.formatDate(complianceDetails.compareEnd)}` : \n null\n }\n \n \n \n Approve1 \n \n \n \n \n Name \n \n \n Total \n \n \n Retro \n \n \n Total \n \n \n Retro \n \n \n {complianceDetails.statistics.map((s,i) => {\n var isInt = Number.isInteger(s.currentPeriod) &&\n Number.isInteger(s.retroCurrentPeriod) &&\n Number.isInteger(s.previousAverage) &&\n Number.isInteger(s.retroPreviousAverage);\n\n return (\n \n \n {s.name}\n \n \n {s.isCurrency ? \n \n {s.isCurrency ? \n \n {s.isCurrency ? \n \n {s.isCurrency ? \n \n {s.doRequireApproval || s.overrideRequireApproval ? \n setInitialComplianceApprovals((prevState) => {\n let s = [...prevState];\n s[i] = !s[i];\n return s;\n })}\n />\n : null}\n \n );\n })}\n \n 1 Note: All deviations above 10% require approval \n {completedMessage ? \n \n {completedMessage} \n \n : null}\n : \n \n Unable to load compliance detials.\n \n }\n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Box } from \"@mui/material\";\n\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\n\nimport { Utils } from \"common/Utils\";\n\nexport default function ComplianceReport({ reportData }) {\n const [columnsArray, setColumnsArray] = useState([]);\n\n useEffect(() => {\n let c = [];\n\n if (reportData && reportData.headerInfo) {\n if (reportData.report && reportData.report.length > 0) {\n for (var key in reportData.report[0]) {\n let headerInfo = reportData.headerInfo.find(h => h.name === key);\n\n let header = { Header: key, accessor: key};\n\n if (headerInfo) {\n header.Header = headerInfo.header;\n\n if (headerInfo.isCurrency) {\n header.accessor = (cell) => !isNaN(cell[headerInfo.name]) ? \n {reportData && reportData.report ?\n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel } from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport ComplianceReport from \"components/Content/Table/ComplianceReport\";\n\nexport default function CompleteCompliance ({isActive, complianceId, isComplianceApproved, setIsComplianceApproved }) {\n const { error } = useContext(PrivateRoutesContext);\n\n const [isComplianceReportVisible, setIsComplianceReportVisible] = useState(false);\n const [isLoadingComplianceReport, setIsLoadingComplianceReport] = useState(false);\n const [complianceReportData, setComplianceReportData] = useState(null);\n\n const loadComplianceReport = () => {\n if (!isLoadingComplianceReport) {\n setIsLoadingComplianceReport(true);\n\n apiGet(apiUrls.getComplianceReport(complianceId)).then(response => {\n setIsComplianceReportVisible(true);\n setComplianceReportData(response.data);\n }).catch(response => {\n console.log(response);\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading compliance report.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsLoadingComplianceReport(false);\n });\n }\n }\n\n return (\n \n {isComplianceReportVisible ?\n \n loadComplianceReport()}\n color=\"primary\"\n variant=\"outlined\"\n disabled={isLoadingComplianceReport}\n loadingPosition=\"center\"\n loading={isLoadingComplianceReport}\n >\n View Compliance Report\n \n }\n \n setIsComplianceApproved((prevState) => !prevState)}\n />}\n label=\"I acknowledge the generated compliance report is accurate and complete\"\n />\n \n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle,\n FormControl, FormControlLabel, InputLabel, MenuItem, Select, Step, StepLabel, Stepper, Typography } from \"@mui/material\";\nimport { LoadingButton } from '@mui/lab';\n\nimport moment from \"moment\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Utils } from \"common/Utils\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\";\nimport AximTooltip from \"components/AximTooltip\";\nimport ComplianceHours from \"components/Compliance/ComplianceHours\";\nimport ComplianceEnrollments from \"components/Compliance/ComplianceEnrollments\";\nimport ComplianceCompare from \"components/Compliance/ComplianceCompare\";\nimport CompleteCompliance from \"components/Compliance/CompleteCompliance\";\n\nconst formatDate = (date) => moment(date).format(\"MM/DD/YYYY\");\n\nexport default function Compliance({ isVisible, isAdmin, isReadonly }) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const [activeStep, setActiveStep] = useState(-1);\n const [isLoading, setIsLoading] = useState(true);\n\n const [doShowView, setDoShowView] = useState(false);\n const [viewTitle, setViewTitle] = useState('');\n const [viewContent, setViewContent] = useState(null);\n\n const [compliance, setCompliance] = useState(null);\n const [lastCompletedSteps, setLastCompletedSteps] = useState(null);\n const [inProgressStep, setInProgressStep] = useState(null);\n const [isPolling, setIsPolling] = useState(null);\n const [timeoutId, setTimeoutId] = useState(null);\n\n const [complianceHoursComplete, setComplianceHoursComplete] = useState(false);\n const [complianceEnrollmentsComplete, setComplianceEnrollmentsComplete] = useState(false);\n const [complianceCompareComplete, setComplianceCompareComplete] = useState(false);\n const [isComplianceApproved, setIsComplianceApproved] = useState(false);\n\n const [retroPeriods, setRetroPeriods] = useState([]);\n const [selectedRetroDate, setSelectedRetroDate] = useState(null);\n const [isLoadingRetroPeriods, setIsLoadingRetroPeriods] = useState(false);\n const [isInitialComplianceComplete, setIsInitialComplianceComplete] = useState(false);\n const [isRunningInitialCompliance, setIsRunningInitialCompliance] = useState(false);\n const noRetroPlaceholder = \"No Retro Period\";\n\n const [doShowConfirm, setDoShowConfirm] = useState(false);\n const [confirmCloseAction, setConfirmCloseAction] = useState(null);\n const [confirmTitle, setConfirmTitle] = useState('');\n const [confirmText, setConfirmText] = useState('');\n const [confirmButtonsDisabled, setConfirmButtonsDiabled] = useState(false);\n\n const steps = [\n {\n label: 'Hours',\n content: (isViewOnly, completedMessage) =>\n \n \n {isLoadingRetroPeriods ?\n \n Earliest Retro Period \n setSelectedRetroDate(e.target.value)}\n placeholder=\"Select Retro Period\"\n variant=\"standard\"\n label=\"Earliest Retro Period\"\n labelId=\"retros-label\"\n disabled={isLoadingRetroPeriods || isRunningInitialCompliance || isInitialComplianceComplete}\n >\n {noRetroPlaceholder} \n {retroPeriods.map((item, i) => {\n let date = formatDate(item);\n\n return (\n \n {date}\n \n );\n })}\n \n \n : No Retro Hours Loaded \n }\n \n \n promptRunInitialCompliance()}\n >\n Run Initial Compliance\n \n \n {isInitialComplianceComplete ?\n \n Click Next to View Initial Compliance Results\n \n : isRunningInitialCompliance ?\n \n },\n {\n label: 'Compare Previous Month',\n content: (isViewOnly, completedMessage) =>\n \n {isLoading ? \n Speak with your AXIM representative to complete compliance\n \n :\n \n \n {\"Start Compliance for Next H&W Benefit Date\"}\n \n \n :\n \n \n \n {`H&W Benefit Date: ${compliance && compliance.hwbenefitDate ? formatDate(compliance.hwbenefitDate) : ''}` }\n \n \n \n {steps.map((step, index) => {\n let tooltip = \"\";\n\n if (lastCompletedSteps && lastCompletedSteps.length > index) {\n tooltip = getTooltipText(lastCompletedSteps[index]);\n }\n\n return (\n \n handleClickStep(step, index, tooltip)}>\n {step.label} \n \n \n );\n })}\n \n {activeStep === steps.length ? (\n \n \n {\"All steps completed\"}\n \n \n ) : (\n \n \n {steps[activeStep].content instanceof Function ? steps[activeStep].content(false) : steps[activeStep].content}\n \n \n \n Back\n \n \n Restart Compliance\n \n \n \n {activeStep === steps.length - 1 ? \"Complete\" : \"Next\"}\n \n \n \n )}\n \n }\n\n \n {viewTitle} \n \n {viewContent}\n \n \n setDoShowView(false)} color=\"primary\" variant=\"outlined\">\n Close\n \n \n \n\n \n );\n}","import React, { useState, useEffect, useContext, useMemo, useCallback, useRef } from \"react\";\nimport { Box, IconButton } from \"@mui/material\";\nimport { LoadingButton } from '@mui/lab';\n\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport ComplianceReport from \"components/Content/Table/ComplianceReport\";\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';\nimport NoteAddOutlinedIcon from '@mui/icons-material/NoteAddOutlined';\nimport CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';\nimport ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport AximTooltip from \"components/AximTooltip\";\n\nexport default function ComplianceReportTable({ isVisible }) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const [isLoading, setIsLoading] = useState(false);\n const [complianceReports, setComplianceReports] = useState([]);\n const complianceReportsRef = useRef(complianceReports);\n complianceReportsRef.current = complianceReports;\n\n const [isGeneratingComplianceReport, setIsGeneratingComplianceReport] = useState(false);\n \n const [isPolling, setIsPolling] = useState(null);\n const [timeoutId, setTimeoutId] = useState(null);\n\n useEffect(() => {\n if (isVisible && companyId) {\n setIsLoading(true);\n apiGet(apiUrls.getComplianceReports(companyId)).then(response => {\n if (response.data) {\n setComplianceReports(response.data);\n }\n else {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading compliance reports.\");\n error.setDoShowError(true);\n }\n }).catch(response => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading compliance reports.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsLoading(false);\n });\n }\n \n if (timeoutId) {\n setIsPolling(false);\n clearTimeout(timeoutId);\n setTimeoutId(null);\n }\n },[isVisible, companyId])\n\n const columns = useMemo(() => [\n {\n id: 'expander',\n Header: \"\",\n Cell: ({ row }) => {\n return <>\n {row.isExpanded ?\n toggleExpandedRow(row)} /> :\n toggleExpandedRow(row)} />\n }\n \n \n generateComplianceReport(row.original.complianceId)}\n color=\"primary\"\n disabled={isGeneratingComplianceReport || row.original.reportQueueId}\n >\n \n \n {row.original.reportQueueId ?\n row.original.statusId <= 3 ? \n \n \n downloadComplianceReport(row.original.reportQueueId)}\n color=\"primary\"\n disabled={row.original.statusId < 3}\n loadingPosition=\"center\"\n loading={row.original.statusId < 3}\n >\n \n \n : \n \n \n \n \n \n \n \n : null}\n \n },\n },\n {\n Header: \"HW Benefit Date\",\n accessor: (cell) => Utils.formatDate(cell.hwbenefitDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.hwbenefitDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"User\",\n accessor: (cell) => cell.updateName,\n },\n {\n Header: \"Update Date\",\n accessor: (cell) => Utils.formatDate(cell.updateDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\",\n },\n ]);\n \n const toggleExpandedRow = (row) => {\n row.toggleRowExpanded();\n }\n\n const generateComplianceReport = (complianceId) => {\n setIsGeneratingComplianceReport(true);\n apiGet(apiUrls.generateComplianceReport(complianceId)).then(response => {\n if (response.data) {\n var cr = updateComplianceReportItem(\n complianceReportsRef.current,\n (cr) => cr.findIndex(c => c.complianceId === complianceId),\n (copy) => {\n copy.reportQueueId = response.data;\n copy.statusId = 1;\n }\n );\n }\n else {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"Unable to generate report.\");\n error.setDoShowError(true);\n }\n }).catch(response => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred generating report.\");\n error.setDoShowError(true);\n }).finally(() => {\n setIsGeneratingComplianceReport(false);\n });\n }\n\n const updateComplianceReportItem = (reportsArray, selectFunction, updateFunction) => {\n let cr = [...reportsArray];\n let index = selectFunction(cr);\n\n if (index > -1) {\n let copy = {...cr[index]}\n\n if (copy) {\n updateFunction(copy);\n cr[index] = copy;\n\n setComplianceReports(cr);\n }\n }\n\n return cr;\n }\n\n const downloadComplianceReport = (reportQueueId) => {\n Utils.downloadFile(apiUrls.downloadFile(companyId, reportQueueId), \"ComplianceReport.pdf\", null,\n () => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred downloading the file.\");\n error.setDoShowError(true);\n });\n }\n\n useEffect(() => {\n if (complianceReports.some(r => r.statusId < 3)) {\n setIsPolling(true);\n }\n },[complianceReports])\n\n useEffect(() => {\n if (isPolling && !timeoutId) {\n poll();\n }\n },[isPolling, timeoutId]);\n\n const poll = () => {\n apiGet(apiUrls.getComplianceReportStatus(companyId)).then(response => {\n if (response.data) {\n var cr = complianceReportsRef.current;\n\n for (var index in response.data) {\n let id = response.data[index];\n\n cr = updateComplianceReportItem(\n cr,\n (cr) => cr.findIndex(r => r.reportQueueId === id.reportQueueId),\n (copy) => {\n copy.statusId = id.reportQueueStatusId;\n }\n );\n }\n\n if (cr && cr.some(r => r.statusId < 3)) {\n let id = setTimeout(poll, 30000);\n setTimeoutId(id);\n }\n else {\n setIsPolling(false);\n }\n }\n });\n }\n\n const renderRowSubComponent = useCallback(\n ({ row, rowProps, visibleColumns }) => (\n \n {complianceReports ?\n \n )\n}\n\nfunction ComplianceReportSubRowAsync({ row, rowProps, visibleColumns }) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n\n const [isLoading, setIsLoading] = useState(true);\n const [hasError, setHasError] = useState(false);\n const [data, setData] = useState([]);\n \n useEffect(() => {\n apiGet(apiUrls.getComplianceReport(row.original.complianceId)).then(response => {\n setIsLoading(true);\n setData(response.data);\n }).catch(response => {\n setHasError(true);\n }).finally(() => {\n setIsLoading(false);\n });\n }, []);\n \n return (\n isLoading ? Unable to load compliance report : \n \n \n {currentTab !== \"\" ? \n \n {tabs.map(t => : null}\n \n\n \n \n {refresh.companyDetails > 0 ?\n \n \n\n \n \n \n {refresh.logo > 0 ? \n \n \n\n \n \n {refresh.hourType > 0 ?\n \n \n\n \n \n {shownContractSettings === \"contracts\" ?\n \n \n\n \n \n {refresh.calendar > 0 ?\n \n \n\n \n \n {refresh.plans > 0 ?\n \n \n\n \n \n {refresh.emailTemplates > 0 ?\n \n \n\n \n \n \n \n\n \n \n \n \n \n \n );\n}\n\nexport default Settings;\n","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputLabel, Select, MenuItem, FormControl, Input, FormHelperText } from \"@mui/material\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport _ from \"lodash\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst EmployeeEmployment = forwardRef(({ fetchedData, employmentStatus, employeeGroups,errors }, ref) => {\n console.log('ee employment')\n console.dir(fetchedData)\n const [formData, setFormData] = useState(fetchedData);\n\n const handleChange = _.debounce((name, val) => {\n console.log(val, 'handle change value')\n console.log(formData, 'handle change formData')\n \n let updatedValue = { [name]: val };\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n if (ref?.current) {\n console.log('setting current')\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n console.log(ref.current.formData, ' set ref current formData')\n }\n if(name=='employeeGroupID'){\n let empGrp = employeeGroups.find(eg=>eg.employeeGroupId==val);\n if(empGrp!=null){\n handleChange('benefitPackageID',empGrp.benefitPackageId)\n }\n }\n }, 500);\n\n return (\n <>\n \n Effective Change Date \n \n handleChange('employeeAltKey', e.target.value)}\n />\n \n Employee Group \n handleChange('employeeGroupID', e.target.value)}\n >\n {employeeGroups.map((val, i) => {val.employeeGroupName} )}\n\n \n {errors.employeeGroupID} \n \n \n Hire Date \n {errors.hireDate} \n \n\n \n Employment Status \n handleChange('employmentStatusID', e.target.value)}\n >\n {employmentStatus.map((val, i) => {val.employmentStatusName} )}\n\n \n {errors.employmentStatusID} \n \n\n handleChange('hourlySalary', e.target.value)}\n error={errors.hourlySalary ? true : false}\n helperText={errors.hourlySalary}\n />\n handleChange('weeklySalary', e.target.value)}\n error={errors.weeklySalary ? true : false}\n helperText={errors.weeklySalary}\n />\n handleChange('annualSalary', e.target.value)}\n error={errors.annualSalary ? true : false}\n helperText={errors.annualSalary}\n />\n\n handleChange('jobTitle', e.target.value)}\n />\n handleChange('locationCode', e.target.value)}\n />\n \n \n Rehire Date \n \n\n \n Service Credit Date \n \n \n\n \n Term Date \n \n \n \n )\n});\n\nexport default EmployeeEmployment;","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputLabel, Select, MenuItem, FormControl, Input, FormHelperText } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport _ from \"lodash\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst ChangeEmployeeBenefits = forwardRef(({ fetchedData, employee ,errors}, ref) => {\n const [formData, setFormData] = useState(fetchedData);\n const [costShares, setCostShares] = useState([]);\n useEffect(() => {\n fetchCostShare(employee.benefitPackageID, fetchedData.benefitID)\n }, [employee]);\n\n const fetchCostShare = (benefitPackageId, benefitId) => {\n console.log(benefitPackageId, \"benefitPackageId\");\n console.log(benefitId, \"benefitId\");\n apiGet(apiUrls.getCostShares(benefitPackageId, benefitId)).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchCostShare\");\n setCostShares(lovResponseData)\n }\n )\n }\n\n const handleChange = _.debounce((name, val, costShares) => {\n console.log(' in handle change Change Employee Benefits')\n let updatedValue = { [name]: val };\n if (name == 'coverageLevelID') {\n console.log(costShares, ' in handle change')\n let cs = costShares.find(c => c.coverageLevelID == val);\n updatedValue = { [name]: val, 'coverage': cs.coverageLevelName };\n }\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n if (ref?.current) {\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n }\n }, 500);\n\n\n return (\n <>\n\n \n Coverage Level \n handleChange('coverageLevelID', e.target.value, costShares)}\n error={errors.coverageLevelID ? true : false}\n helperText={errors.coverageLevelID}\n >\n\n {costShares.map((val, i) => {val.coverageLevelName} )}\n \n \n\n handleChange('coverageAmount', e.target.value)}\n error={errors.coverageAmount ? true : false}\n helperText={errors.coverageAmount}\n />\n\n handleChange('eeCost', e.target.value)}\n error={errors.eeCost ? true : false}\n helperText={errors.eeCost}\n />\n\n handleChange('erCost', e.target.value)}\n error={errors.erCost ? true : false}\n helperText={errors.erCost}\n />\n\n\n Effective Date \n {errors.startDate} \n \n\n \n Termination Date { (formData.termDate == null || formData.termDate == '') ?\"y\":\"n\" } \n {errors.termDate} \n \n\n \n )\n});\n\nexport default ChangeEmployeeBenefits;","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputLabel, Select, MenuItem, FormControl, Input, FormHelperText } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport _ from \"lodash\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst ViewEmployeeBenefitsHistory = forwardRef(({ fetchedData, employee ,errors}, ref) => {\n \n return (\n <>\n \n \n \n Benefit \n Benefit Type \n Start Date \n End Date \n Coverage \n Carrier \n Coverage Amount \n EE Cost \n ER Cost \n \n \n \n {fetchedData.data.map((val, i) => (\n {val.benefit} \n {val.benefitType} \n {Utils.formatDate(val.startDate)} \n {Utils.formatDate(val.endDate)} \n {val.coverage} \n {val.carrier} \n {val.coverageAmount} \n {(val.eeMonthlyCost==0?\"\":val.eeMonthlyCost)} \n {(val.erMonthlyCost==0?\"\":val.erMonthlyCost)} \n ))}\n \n
\n\n\n \n )\n});\n\nexport default ViewEmployeeBenefitsHistory;","import React, { useState, useEffect, useCallback, forwardRef, useRef } from \"react\";\nimport { IconButton, Menu, MenuItem, Dialog, DialogActions, DialogContent, DialogTitle, Button } from \"@mui/material\";\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ChangeEmployeeBenefits from \"area/employer/EmployeeCensus/ChangeEmployeeBenefits\";\nimport ViewEmployeeBenefitsHistory from \"area/employer/EmployeeCensus/ViewEmployeeBenefitsHistory\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport * as Yup from 'yup';\n\nimport { Utils } from \"common/Utils\";\nconst viewDataOnly = false\nconst EmployeeBenefits = forwardRef(({ fetchedData, employee, handleSaveEmployeeBenefit }, ref) => {\n const [openViewBenefitsModal, setViewOpenBenefitsModal] = useState(false);\n const [openEditBenefitsModal, setEditOpenBenefitsModal] = useState(false);\n const [fetchedEditBenefitsData, setFetchedEditBenefitsData] = useState({});\n const [fetchedEnrollmentHistory, setFetchedEnrollmentHistory] = useState({});\n\n const editBenefitsRef = useRef({});\n const [benefitErrors, setBenefitErrors] = useState({});\n const [formData, setFormData] = useState(fetchedData);\n\n\n const benefitValidationSchema = Yup.object().shape({\n coverageLevelID: Yup.string().required('Coverage is required'),\n startDate: Yup.date().min('1901-01-01').typeError('Start date is required')\n });\n\n const handleEditBenefitClose = () => {\n setEditOpenBenefitsModal(false)\n }\n\n const handleViewBenefitClose = () => {\n setViewOpenBenefitsModal(false)\n }\n\n const handleEditBenefitSave = async () => {\n console.log('in handleEditBenefitSave')\n console.log(editBenefitsRef, 'editBenefitsRef')\n console.log(editBenefitsRef.current.formData, 'editBenefitsRef')\n if (editBenefitsRef != null && editBenefitsRef.current.formData !== undefined) {\n let editFormData = editBenefitsRef.current.formData;\n\n try {\n const valid = await benefitValidationSchema.validateSync(editFormData,\n { abortEarly: false }\n );\n console.log(valid, 'valid')\n\n editFormData[\"updated\"] = true;\n console.log(editFormData, 'handleEditBenefitSave')\n console.log(formData, 'existing form data')\n let newFormData = formData.map((obj => obj.benefitID == editFormData.benefitID ?\n { ...obj, ...editFormData } : obj))\n console.log(newFormData)\n\n if (editBenefitsRef?.current) {\n editBenefitsRef.current.formData = newFormData\n }\n setFormData(newFormData)\n handleSaveEmployeeBenefit(newFormData)\n setEditOpenBenefitsModal(false)\n\n } catch (error) {\n // error.inner\n console.log(error, 'valid error')\n console.log(error.inner, 'valid error inner')\n let pErrors = {};\n for (const err of error.inner) {\n if (err.path) {\n console.log(err.path, 'err.path')\n console.log(err.message, 'err.message')\n Object.defineProperty(pErrors, err.path, {\n value: err.message,\n writable: true\n });\n //pErrors[error.path] = error.message;\n }\n }\n\n console.log(pErrors, 'pErrors')\n setBenefitErrors(pErrors)\n }\n\n /*\n let updatedValue = {[name]:val};\n if (ref?.current) {\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n }\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n */\n }\n }\n const handleViewEmployeeBenefit = (enrollment) => {\n console.log(enrollment)\n\n\n apiGet(apiUrls.getEnrollmentHistory(enrollment.insuredID, enrollment.benefitTypeID, enrollment.planPeriodID)).then(\n (empResponse) => {\n console.dir('emp enrollments history response');\n console.dir(empResponse);\n setFetchedEnrollmentHistory(empResponse)\n setViewOpenBenefitsModal(true)\n });\n }\n\n const handleEditEmployeeBenefit = (enrollment) => {\n setFetchedEditBenefitsData(enrollment)\n setEditOpenBenefitsModal(true)\n }\n\n const handleChange = useCallback(\n (name, val) => {\n let updatedValue = { [name]: val };\n if (ref?.current) {\n ref.current.formData = {\n ...formData,\n ...updatedValue\n };\n }\n setFormData(formData => ({\n ...formData,\n ...updatedValue\n }));\n },\n [ref]\n );\n return (\n <>\n \n \n \n Benefit \n Benefit Type \n Start Date \n End Date \n Coverage \n Carrier \n \n \n \n {formData.map((val, i) => (\n \n \n handleEditEmployeeBenefit(val)}>\n \n \n \n handleViewEmployeeBenefit(val)}>\n \n \n \n {val.benefit} \n {val.benefitType} \n {Utils.formatDate(val.startDate)} \n {Utils.formatDate(val.endDate)} \n {val.coverage} \n {val.carrier} \n ))}\n \n
\n\n\n {/* Update Benefits Modal */}\n \n \n Update Employee Benefits\n \n \n\n {fetchedEditBenefitsData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Save\n \n \n Close\n \n \n \n\n {/* Update Benefits Modal */}\n \n \n View Employee Enrollment History\n \n \n\n {fetchedEnrollmentHistory !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Close\n \n \n \n \n )\n});\n\nexport default EmployeeBenefits;","import React, { useState, useEffect, useCallback, forwardRef } from \"react\";\nimport { TextField, InputAdornment, Button } from \"@mui/material\";\nimport Checkbox from '@mui/material/Checkbox';\nimport moment from \"moment\";\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport { Utils } from \"common/Utils\";\n\nconst viewDataOnly = false\nconst AddEmployeeBenefits = forwardRef(({ fetchedData, hwBenefitDate, employee }, ref) => {\n const [formData, setFormData] = useState(fetchedData);\n const [effectiveDate, setEffectiveDate] = useState(hwBenefitDate);\n\n useEffect(() => {\n console.log(fetchedData, 'AddEmployeeBenefits')\n setFormData(fetchedData.map(f => ({\n benefit: f.benefit,\n benefitID: f.benefitID,\n benefitCode: f.benefitCode,\n benefitType: f.benefitType,\n benefitCoverageID: f.benefitCoverageID,\n coverage: f.coverage,\n coverageAmount: f.coverageAmount,\n toAdd: false,\n })))\n }, [fetchedData]);\n\n // const handleChange = useCallback(\n // (name, val) => {\n // let updatedValue = { [name]: val };\n // if (ref?.current) {\n // ref.current.formData = {\n // ...formData,\n // ...updatedValue\n // };\n // }\n // setFormData(formData => ({\n // ...formData,\n // ...updatedValue\n // }));\n // },\n // [ref]\n // );\n const benefitTypes = [...new Set(formData.filter(obj => (employee.benefitEnrollments?(!employee.benefitEnrollments.map(b=>b.benefit).includes(obj.benefit)):true)).map(obj => obj.benefitType))];\n\n const handleCheckBenefit = useCallback((benefitCoverageId, event) => {\n let data = [...formData]\n let benIdx = data.findIndex(b => (b.benefitCoverageID == benefitCoverageId));\n if (benIdx > -1) {\n data[benIdx].toAdd = event.currentTarget.checked\n data[benIdx].effectiveDate = effectiveDate\n data[benIdx].startDate = effectiveDate\n setFormData(data)\n \n if (ref?.current) {\n ref.current.formData = data;\n }\n console.log(formData.filter(f => (f.toAdd == true)), 'after update')\n }\n },\n [ref]\n);\n\n const handleChangeCoverageAmount = useCallback((benefitCoverageId, event) => {\n let data = [...formData]\n let benIdx = data.findIndex(b => (b.benefitCoverageID == benefitCoverageId));\n if (benIdx > -1) {\n data[benIdx].coverageAmount = event.currentTarget.value\n data[benIdx].effectiveDate = effectiveDate\n data[benIdx].startDate = effectiveDate\n setFormData(data)\n if (ref?.current) {\n ref.current.formData = data;\n }\n console.log(formData.filter(f => (f.coverageAmount > 0)), 'after update')\n }\n },\n [ref]\n);\n\nconst handleChangeEffectiveDate = useCallback((event) => {\n let data = [...formData]\n for(let i = 0;iNo benefits available:(\n
\n {\n benefitTypes.map((benfitType, i) => {\n return (\n
\n
{benfitType}
\n
\n \n \n Benefit \n Coverage Level \n Benefit Effective Date \n Coverage Amount \n \n \n \n {formData.filter(b => b.benefitType == benfitType).sort((a, b) => { return ((a.benefit < b.benefit) ? 1 : -1); }).map((val, i) => (\n handleCheckBenefit(val.benefitCoverageID, e)}> {val.benefit} \n {val.coverage} \n {Utils.formatDate(val.startDate)} \n \n handleChangeCoverageAmount(val.benefitCoverageID, e)}\n \n />\n \n ))}\n \n
\n
\n )\n })\n }\n
\n \n
\n \n\n {/* MODAL */}\n {/* Profile Modal */}\n \n \n Edit Employee Profile\n \n \n\n {fetchedProfileData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Save\n \n\n \n Close\n \n \n \n\n {/* Employment Modal */}\n \n \n Edit Employee Employment\n \n \n\n {fetchedEmploymentData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Save\n \n\n \n Close\n \n \n \n\n {/* Benefits Modal */}\n \n \n Edit Employee Benefits\n \n \n\n {fetchedBenefitsData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Add Benefit\n \n {/* \n \n Save\n */}\n\n \n Close\n \n \n \n\n\n {/* Add Benefits Modal */}\n \n \n Add Employee Benefits\n \n \n\n {fetchedBenefitsData !== undefined ? (\n \n ) : (\n No Data Available \n )}\n \n \n \n Save\n \n\n \n Close\n \n \n \n ;\n}\n\nexport default EmployeeBenefitsMenu;\n","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { styled, alpha } from '@mui/material/styles';\n// import { AppContext } from \"AppContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Grid, FormControl, Input, Divider } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport EmployeeBenefitsMenu from \"components/Menu/EmployeeBenefitsMenu\";\nimport EmployeeProfile from \"area/employer/EmployeeCensus/EmployeeProfile\";\nimport moment from \"moment\";\nimport { Utils } from \"common/Utils\";\nimport * as Yup from 'yup';\nimport AximTooltip from \"components/AximTooltip\";\n\nconst CensusPriorDataModal = ({ openPriorDataModal, setOpenPriorDataModal, priorData}) => {\n\n const [priorDataDetail, setPriorDataDetail] = React.useState([]);\n const [priorDataFiles, setPriorDataFiles] = React.useState([]);\n const [priorDataDetailCounts, setPriorDataDetailCounts] = useState({\n New: 0,\n Rehire: 0,\n Term: 0,\n Update: 0\n });\n\n const [openPriorDataDetailModal, setOpenPriorDataDetailModal] = React.useState(false);\n\n const showPriorDataDetail = (row) => {\n //openPriorDataDetailModal\n console.log(row.values.censusManagementID);\n\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getPriorCensusManagementDetail(selectedCompany, row.values.censusManagementID)).then(\n (cesResponse) => {\n console.log(cesResponse, 'census detail');\n\n let censusData = JSON.parse(cesResponse.data.censusData);\n let NumberOfNew = censusData.filter(function (elm) {\n return (elm.Action == \"Add\");\n }).length;\n let NumberOfRehire = censusData.filter(function (elm) {\n return (elm.ChangeType == \"Rehire\");\n }).length;\n let NumberOfTerm = censusData.filter(function (elm) {\n return (elm.ChangeType == \"Term\");\n }).length;\n\n let NumberOfChange = censusData.filter(function (elm) {\n return (elm.Action == \"Update\" && (!elm.hasOwnProperty(\"ChangeType\") || elm.ChangeType == \"Change\"));\n }).length;\n\n setPriorDataDetailCounts({\n New: NumberOfNew,\n Rehire: NumberOfRehire,\n Term: NumberOfTerm,\n Update: NumberOfChange,\n });\n setOpenPriorDataDetailModal(true)\n setOpenPriorDataModal(false)\n });\n apiGet(apiUrls.getPriorCensusManagementDetailFiles(selectedCompany, row.values.censusManagementID)).then(\n (cesResponse) => {\n console.log(cesResponse, 'census detail files');\n setPriorDataFiles(cesResponse.data)\n }\n );\n\n }\n\n const priorDataFileColumns = [\n {\n Header: \"File Name\",\n accessor: \"fileName\",\n Cell: ({ row }) => (\n \n showPriorDataDetail(row)}>\n {row.values.fileName}\n \n \n )\n },\n {\n Header: \"fileID\",\n accessor: \"fileID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"File Type\",\n accessor: \"fileTypeName\"\n },\n {\n Header: \"Create Date\",\n accessor: \"createDate\",\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.values.createDate)}\n \n )\n },\n {\n Header: \"Total Rows\",\n accessor: \"totalRows\"\n },\n {\n Header: \"Error\",\n accessor: \"errorCount\"\n },\n {\n Header: \"Warning\",\n accessor: \"warningCount\"\n }\n ];\n\n const priorDataColumns = [\n {\n Header: \"HW Benefit Date\",\n accessor: \"hwBenefitDate\",\n Cell: ({ row }) => (\n \n showPriorDataDetail(row)}>\n {Utils.formatDate(row.values.hwBenefitDate)}\n \n \n )\n },\n {\n Header: \"censusManagementID\",\n accessor: \"censusManagementID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"employeeFileErrorCount\",\n accessor: \"employeeFileErrorCount\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"enrollmentFileErrorCount\",\n accessor: \"enrollmentFileErrorCount\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"Status\",\n accessor: \"statusCode\",\n Cell: ({ row }) => (\n \n {row.values.statusCode} {(row.values.employeeFileErrorCount > 0 || row.values.enrollmentFileErrorCount > 0) ? (' WITH ERROR') : ('')}\n \n )\n },\n {\n Header: \"Create by\",\n accessor: \"createUser\"\n },\n {\n Header: \"Create Date\",\n accessor: \"createDate\",\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.values.createDate)}\n \n )\n },\n {\n Header: \"Update by\",\n accessor: \"updateUser\"\n },\n {\n Header: \"Update Date\",\n accessor: \"updateDate\",\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.values.updateDate)}\n \n )\n }\n ];\n\n return (\n <>\n setOpenPriorDataModal(false)}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n className={ModalStyles.empDataModal}\n maxWidth=\"lg\"\n >\n \n Prior Data\n \n \n \n \n setOpenPriorDataModal(false)}\n className={ButtonStyle.CcancelBtn}\n >\n Close\n \n \n \n\n\n setOpenPriorDataDetailModal(false)}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n className={ModalStyles.empDataModal}\n maxWidth=\"lg\"\n >\n \n Prior Submitted Data\n \n \n \n \n \n New Rehire Term Update \n \n \n \n \n {priorDataDetailCounts.New} {priorDataDetailCounts.Rehire} {priorDataDetailCounts.Term} {priorDataDetailCounts.Update} \n \n \n
\n\n \n \n \n File Name File Type Create Date Total Rows Error Warning \n \n \n \n {\n priorDataFiles.map((f) => (\n \n {f.fileName} {f.fileTypeName} {Utils.formatDate(f.createDate)} {f.totalRows} \n \n {\n /*\n downloadFileError(f.fileID)} disabled={f.errorCount==0}>\n {f.errorCount}\n \n */\n }\n \n {f.errorCount} \n \n \n {f.warningCount} \n \n ))\n }\n \n
\n\n \n \n setOpenPriorDataDetailModal(false)}\n className={ButtonStyle.CcancelBtn}\n >\n Close\n \n \n \n \n )\n};\n\nexport default CensusPriorDataModal;","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { styled, alpha } from '@mui/material/styles';\n// import { AppContext } from \"AppContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Grid, FormControl, Input, Divider } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport EmployeeBenefitsMenu from \"components/Menu/EmployeeBenefitsMenu\";\nimport EmployeeProfile from \"area/employer/EmployeeCensus/EmployeeProfile\";\nimport moment from \"moment\";\nimport { Utils } from \"common/Utils\";\nimport * as Yup from 'yup';\nimport AximTooltip from \"components/AximTooltip\";\n\nconst CensusRehireEmployeeModal = ({ openRehireEmployeesModal, handleRehireEmployeesClose, termedEmployees, setTermedEmployees, employeesToRehire, setEmployeesToRehire,handleSaveRehireEmployee }) => {\n\n const formatSSN = (val) => \"XXX-XX-\" + val.replaceAll(\"-\", \"\").slice(5);\n const [canRehire, setCanRehire] = React.useState(false);\n const toggleRehireEmployee = (insuredId, checked) => {\n console.log('toggleRehireEmployee')\n console.log(insuredId)\n console.log(checked)\n let ees = [...termedEmployees];\n console.log(ees, 'ees')\n let empIdx = ees.findIndex(e => e.insuredID == insuredId);\n ees[empIdx].toRehire = checked;\n ees[empIdx].Action = \"Update\";\n ees[empIdx].ChangeType = \"Rehire\";\n setTermedEmployees(ees);\n if (checked) {\n console.log([...employeesToRehire, ...ees.filter(e => e.insuredID == insuredId)])\n console.log('huh')\n console.log([...employeesToRehire, ...ees.filter(e => e.insuredID == insuredId)].filter(ee => ee.rehireDate == \"\" || moment(ee.rehireDate).year() < 1901))\n setCanRehire([...employeesToRehire, ...ees.filter(e => e.insuredID == insuredId)].filter(ee => ee.rehireDate == \"\" || moment(ee.rehireDate).year() < 1901).length == 0);\n setEmployeesToRehire([...employeesToRehire, ...ees.filter(e => e.insuredID == insuredId)])\n }\n else {\n console.log(employeesToRehire.filter(e => e.insuredID != insuredId))\n setCanRehire(employeesToRehire.filter(e => e.insuredID != insuredId).length > 0);\n setEmployeesToRehire(employeesToRehire.filter(e => e.insuredID != insuredId))\n }\n }\n const toggleRehireEmployeeDate = (insuredId, rehireDate) => {\n console.log('toggleRehireEmployeeDate')\n console.log(insuredId)\n console.log(rehireDate, 'rehireDate')\n let ees = [...termedEmployees];\n console.log(ees, 'ees')\n let empIdx = ees.findIndex(e => e.insuredID == insuredId);\n ees[empIdx].rehireDate = rehireDate;\n setTermedEmployees(ees);\n let empToHireIdx = employeesToRehire.findIndex(e => e.insuredID == insuredId);\n if (empToHireIdx >= 0) {\n let newEmployeesToRehire = [...employeesToRehire];\n newEmployeesToRehire[empToHireIdx].rehireDate = rehireDate;\n setEmployeesToRehire(newEmployeesToRehire);\n console.log('huh')\n console.log(newEmployeesToRehire.filter(ee => ee.rehireDate == \"\" || moment(ee.rehireDate).year() < 1901))\n setCanRehire(newEmployeesToRehire.filter(ee => ee.rehireDate == \"\" || moment(ee.rehireDate).year() < 1901).length == 0);\n }\n\n }\n\n const termEmployeeColumns = [\n {\n Header: \"\",\n accessor: \"toRehire\",\n Cell: ({ row }) => (\n \n toggleRehireEmployee(row.values.insuredID, e.target.checked)}\n > \n \n )\n },\n {\n Header: \"Rehire Date\",\n accessor: \"rehireDate\",\n Cell: ({ row }) => (\n \n \n \n )\n },\n {\n Header: \"InsuredID\",\n accessor: \"insuredID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"benefitPackageID\",\n accessor: \"benefitPackageID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n },\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n },\n {\n Header: \"Email\",\n accessor: \"email\",\n },\n {\n Header: \"SSN\",\n accessor: \"ssn\",\n Cell: ({ row }) => (\n \n {formatSSN(row.values.ssn)}\n \n )\n },\n {\n Header: \"DOB\",\n accessor: \"birthDateStr\",\n },\n {\n Header: \"Term Date\",\n accessor: \"termDateStr\",\n }\n ];\n\n\n return (\n <>\n \n {/* Rehire Employees Modal */}\n \n \n Rehire Employees\n \n \n \n \n \n Save\n \n\n \n Close\n \n \n \n \n )\n};\n\nexport default CensusRehireEmployeeModal;","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { styled, alpha } from '@mui/material/styles';\n// import { AppContext } from \"AppContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Grid, FormControl, Input, Divider } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport EmployeeBenefitsMenu from \"components/Menu/EmployeeBenefitsMenu\";\nimport EmployeeProfile from \"area/employer/EmployeeCensus/EmployeeProfile\";\nimport moment from \"moment\";\nimport { Utils } from \"common/Utils\";\nimport * as Yup from 'yup';\nimport AximTooltip from \"components/AximTooltip\";\n\nconst CensusChooseEmployeeModal = ({ openChooseEmployeesModal, handleChooseEmployeesClose,employeesNotInList,setEmployeesNotInList,employeesToAdd,setEmployeesToAdd,handleSaveAddEmployee }) => {\n\n const formatSSN = (val) => \"XXX-XX-\" + val.replaceAll(\"-\", \"\").slice(5);\n \n const toggleAddEmployee = (insuredId, checked) => {\n console.log('toggleAddEmployee')\n console.log(insuredId)\n console.log(checked)\n let ees = [...employeesNotInList];\n console.log(ees, 'ees')\n let empIdx = ees.findIndex(e => e.insuredID == insuredId);\n ees[empIdx].toAdd = checked;\n\n setEmployeesNotInList(ees);\n if (checked) {\n console.log([...employeesToAdd, ...ees.filter(e => e.insuredID == insuredId)])\n setEmployeesToAdd([...employeesToAdd, ...ees.filter(e => e.insuredID == insuredId)])\n }\n else {\n console.log(employeesToAdd.filter(e => e.insuredID != insuredId))\n setEmployeesToAdd(employeesToAdd.filter(e => e.insuredID != insuredId))\n }\n }\n\n\n const chooseEmployeeColumns = [\n {\n Header: \"\",\n accessor: \"toAdd\",\n Cell: ({ row }) => (\n \n toggleAddEmployee(row.values.insuredID, e.target.checked)}\n >\n \n )\n },\n {\n Header: \"InsuredID\",\n accessor: \"insuredID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"benefitPackageID\",\n accessor: \"benefitPackageID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n }\n },\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n },\n {\n Header: \"Email\",\n accessor: \"email\",\n },\n {\n Header: \"SSN\",\n accessor: \"ssn\",\n Cell: ({ row }) => (\n \n {formatSSN(row.values.ssn)}\n \n )\n },\n {\n Header: \"Job Title\",\n accessor: \"jobTitle\",\n },\n {\n Header: \"DOB\",\n accessor: \"birthDateStr\",\n },\n {\n Header: \"DOH\",\n accessor: \"hireDateStr\",\n },\n {\n Header: \"Term Date\",\n accessor: \"termDateStr\",\n },\n {\n Header: \"Hourly Salary\",\n accessor: \"hourlySalary\",\n }\n ];\n\n\n\n return (\n <>\n \n \n \n Choose Employees\n \n \n \n \n \n Save\n \n\n \n Close\n \n \n \n\n \n )\n};\n\nexport default CensusChooseEmployeeModal;","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { styled, alpha } from '@mui/material/styles';\n// import { AppContext } from \"AppContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Checkbox, Grid, FormControl, Input, Badge } from \"@mui/material\";\nimport LoadingButton from '@mui/lab/LoadingButton';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport EmployeeBenefitsMenu from \"components/Menu/EmployeeBenefitsMenu\";\nimport EmployeeProfile from \"area/employer/EmployeeCensus/EmployeeProfile\";\nimport moment from \"moment\";\nimport { Utils } from \"common/Utils\";\nimport * as Yup from 'yup';\nimport AximTooltip from \"components/AximTooltip\";\nimport CensusPriorDataModal from \"area/employer/EmployeeCensus/CensusPriorDataModal\";\nimport CensusRehireEmployeeModal from \"area/employer/EmployeeCensus/CensusRehireEmployeeModal\";\nimport CensusChooseEmployeeModal from \"area/employer/EmployeeCensus/CensusChooseEmployeeModal\";\n\nconst formatSSN = (val) => \"XXX-XX-\" + val.replaceAll(\"-\", \"\").slice(5);\n\nfunction Census(props) {\n const { modalIsOpen, setModalIsOpen, companyId, setCompanyId } = useContext(PrivateRoutesContext);\n const [isActive, setActive] = useState(false);\n // const { oauthToken, setOauth } = useContext(AppContext);\n const [fetchedData, setFetchedData] = useState([]);\n const [dataEmpty, setDataEmpty] = useState(false);\n const [checkingData, setCheckingData] = useState(false);\n const [hwBenefitDate, setHwBenefitDate] = useState(null);\n const [currentCompany, setCurrentCompany] = useState(null);\n\n const [anchorEl, setAnchorEl] = useState(null);\n const updateButtonOpen = Boolean(anchorEl);\n const [openUpdateButton, setOpenUpdateButton] = React.useState(false);\n const [openChooseEmployeesModal, setOpenChooseEmployeesModal] = React.useState(false);\n const [employeesNotInList, setEmployeesNotInList] = React.useState([]);\n const [openRehireEmployeesModal, setOpenRehireEmployeesModal] = React.useState(false);\n const [termedEmployees, setTermedEmployees] = React.useState([]);\n const [employeesToAdd, setEmployeesToAdd] = React.useState([]);\n const [employeesToRehire, setEmployeesToRehire] = React.useState([]);\n const [saving, setSaving] = React.useState(false);\n const [openPriorDataModal, setOpenPriorDataModal] = React.useState(false);\n const [priorData, setPriorData] = React.useState([]);\n const [dataFilter, setDataFilter] = React.useState(null);\n const [canSubmit, setCanSubmit] = React.useState(false);\n const [submitBadgeMessage, setSubmitBadgeMessage] = React.useState(null);\n const profileRef = useRef({});\n\n //List of Values\n const [states, setStates] = useState([]);\n const [employmentStatus, setEmploymentStatus] = useState([]);\n const [employeeGroups, setEmployeeGroups] = useState([]);\n const [maritalStatuses, setMaritalStatuses] = useState([]);\n const [genders, setGenders] = useState([]);\n\n const [censusManagementID, setCensusManagementID] = useState(null);\n const [censusManagementStatusID, setCensusManagementStatusID] = useState(130);\n const [modalTitle, setModalTitle] = useState();\n const [open, setOpen] = useState(false);\n const [profileErrors, setProfileErrors] = useState({});\n const [openProfileModal, setOpenProfileModal] = useState(false);\n const [openSubmitModal, setOpenSubmitModal] = useState(false);\n const [isLoadingCensus, setIsLoadingCensus] = useState(true);\n const emptyEmployee = {\n \"Action\": \"New\",\n \"ChangeType\": \"New\",\n \"employeeID\": \"00000000-0000-0000-0000-000000000000\",\n \"companyID\": \"00000000-0000-0000-0000-000000000000\",\n \"insuredID\": \"00000000-0000-0000-0000-000000000000\",\n \"firstName\": \"\",\n \"lastName\": \"\",\n \"userName\": null,\n \"ssn\": \"\",\n \"emailAddress\": null,\n \"status\": null,\n \"contract\": null,\n \"classification\": null,\n \"serviceFee\": 0,\n \"dateCreated\": \"0001-01-01T00:00:00\",\n \"effectiveDateOfChange\": \"0001-01-01T00:00:00\",\n \"beginDate\": \"0001-01-01T00:00:00\",\n \"endDate\": \"0001-01-01T00:00:00\",\n \"changeDate\": \"0001-01-01T00:00:00\",\n \"prevBeginDate\": \"0001-01-01T00:00:00\",\n \"prevEndDate\": \"0001-01-01T00:00:00\",\n \"employeeGroupID\": \"00000000-0000-0000-0000-000000000000\",\n \"hourlySalary\": 0,\n \"weeklySalary\": 0,\n \"annualSalary\": 0,\n \"employeeAltKey\": \"NULL\",\n \"jobTitle\": null,\n \"locationCode\": null,\n \"hireDate\": \"\",\n \"rehireDate\": \"0001-01-01T00:00:00\",\n \"termDate\": \"\",\n \"serviceCreditDate\": \"0001-01-01T00:00:00\",\n \"employmentStatusID\": 0,\n \"employeeNotes\": null,\n \"location\": null,\n \"division\": null,\n \"department\": null,\n \"jobClass\": null,\n \"importFileID\": \"00000000-0000-0000-0000-000000000000\",\n \"employmentStatusName\": null,\n \"companyName\": null,\n \"companyCode\": null,\n \"jobsiteID\": \"00000000-0000-0000-0000-000000000000\",\n \"jobsiteName\": null,\n \"jobsiteCode\": null,\n \"payCalendarID\": \"00000000-0000-0000-0000-000000000000\",\n \"payCalendarName\": null,\n \"payCalendarCode\": null,\n \"benefitPackageID\": \"00000000-0000-0000-0000-000000000000\",\n \"benefitPackageName\": null,\n \"benefitPackageCode\": null,\n \"benefitClassID\": \"00000000-0000-0000-0000-000000000000\",\n \"benefitClassName\": null,\n \"benefitClassCode\": null,\n \"groupServiceFee\": 0,\n \"classServiceFee\": 0,\n \"effectiveDate\": \"0001-01-01T00:00:00\",\n \"birthDate\": \"\",\n \"email\": \"\",\n \"contractCode\": null,\n \"contractFringeRate\": 0,\n \"loginName\": null,\n \"employeeGroupCode\": null,\n \"isActiveConfigurationRow\": true,\n \"benefitEnrollments\": [],\n \"birthDateStr\": \"\",\n \"termDateStr\": \"\",\n \"hireDateStr\": \"\",\n \"genderID\": 0,\n \"maritalStatusID\": 0,\n \"mailingAddress1\": null,\n \"mailingAddress2\": null,\n \"mailingStateID\": \"00000000-0000-0000-0000-000000000000\",\n \"mailingCity\": null,\n \"mailingZipCode\": null,\n \"homePhone\": null,\n \"workPhone\": null\n };\n\n const [newEmployeeProfileData, setNewEmployeeProfileData] = React.useState(emptyEmployee)\n const [columnsArray, setColumnsArray] = useState([]);\n\n // SET COLUMN TYPE\n const [columnType, setColumnType] = useState(\"\");\n const [keyType, setKeyType] = useState(null);\n\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n useEffect(() => {\n fetchStates()\n fetchEmploymentStatus()\n fetchEmployeeGroups()\n fetchMaritalStatuses()\n fetchGenders()\n }, []);\n\n\n useEffect(() => {\n console.log('setting can submit')\n console.log(fetchedData.filter(e => e.Action !== undefined))\n setSubmitBadgeMessage(null)\n if(fetchedData.length > 0 && fetchedData.filter(e => e.Action !== undefined).length > 0){\n if(fetchedData.filter(e => e.Action == 'New' && (e.NewEmployment === undefined || e.NewEmployment == null)).length > 0){\n setSubmitBadgeMessage(fetchedData.filter(e => e.Action == 'New' && (e.NewEmployment === undefined || e.NewEmployment == null)).length)\n }\n }\n console.log((fetchedData.length > 0 && fetchedData.filter(e => e.Action !== undefined).length > 0 && fetchedData.filter(e => e.Action == 'New' && (e.NewEmployment === undefined || e.NewEmployment == null)).length == 0))\n setCanSubmit((fetchedData.length > 0 && fetchedData.filter(e => e.Action !== undefined).length > 0 && fetchedData.filter(e => e.Action == 'New' && (e.NewEmployment === undefined || e.NewEmployment == null)).length == 0))\n }, [fetchedData]);\n\n const uuid = () => {\n var chars = '0123456789abcdef'.split('');\n\n var uuid = [], rnd = Math.random, r;\n uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';\n uuid[14] = '4'; // version 4\n\n for (var i = 0; i < 36; i++) {\n if (!uuid[i]) {\n r = 0 | rnd() * 16;\n\n uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r & 0xf];\n }\n }\n\n return uuid.join('');\n }\n\n const fetchCostShares = () => {\n\n }\n const fetchStates = () => {\n apiGet(apiUrls.getStates()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchStates\");\n setStates(lovResponse.data)\n }\n )\n }\n\n const fetchEmploymentStatus = () => {\n apiGet(apiUrls.getEmploymentStatuses()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchEmploymentStatus\");\n setEmploymentStatus(lovResponse.data)\n }\n )\n }\n\n const fetchEmployeeGroups = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getEmployeeGroups(selectedCompany)).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchEmployeeGroups\");\n setEmployeeGroups(lovResponse.data)\n }\n )\n }\n\n const fetchMaritalStatuses = () => {\n apiGet(apiUrls.getMaritalStatuses()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchMaritalStatuses\");\n setMaritalStatuses(lovResponse.data)\n }\n )\n }\n\n const fetchGenders = () => {\n apiGet(apiUrls.getGenders()).then(\n (lovResponse) => {\n let lovResponseData = lovResponse.data;\n console.log(lovResponseData, \"fetchGenders\");\n setGenders(lovResponse.data)\n }\n )\n }\n\n const handleChooseEmployeesClose = () => {\n setOpenChooseEmployeesModal(false);\n }\n\n const handleRehireEmployee = () => {\n console.log('handleRehireEmployee');\n if (termedEmployees.length == 0) {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getTerminatedEmployees(selectedCompany)).then(\n (empResponse) => {\n let empData = empResponse.data.filter(emp => {\n return fetchedData.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n setTermedEmployees(empData);\n console.log(empData, 'rehire employees');\n setOpenRehireEmployeesModal(true);\n }\n );\n }\n else {\n let empData = termedEmployees.filter(emp => {\n return fetchedData.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n setTermedEmployees(empData);\n setOpenRehireEmployeesModal(true);\n }\n }\n\n\n const handleRehireEmployeesClose = () => {\n setOpenRehireEmployeesModal(false);\n }\n const handleChooseEmployee = () => {\n console.log('handleChooseEmployee');\n if (employeesNotInList.length == 0) {\n\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getNotInComplianceEmployees(selectedCompany)).then(\n (empResponse) => {\n let empData = empResponse.data.filter(emp => {\n return fetchedData.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n setEmployeesNotInList(empData);\n console.log(empData, 'choose employees');\n setOpenChooseEmployeesModal(true);\n }\n );\n }\n else {\n let empData = employeesNotInList.filter(emp => {\n return fetchedData.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n setEmployeesNotInList(empData);\n setOpenChooseEmployeesModal(true);\n }\n }\n\n const handleSaveAddEmployee = () => {\n console.log(employeesToAdd, 'employeesToAdd');\n let empData = employeesNotInList.filter(emp => {\n return employeesToAdd.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n\n setFetchedData([...fetchedData, ...employeesToAdd]);\n setEmployeesNotInList(empData);\n setEmployeesToAdd([]);\n setOpenChooseEmployeesModal(false);\n }\n\n const handleSaveRehireEmployee = () => {\n console.log(employeesToRehire, 'employeesToRehire');\n let empData = termedEmployees.filter(emp => {\n return employeesToRehire.findIndex(d => d.insuredID == emp.insuredID) < 0;\n })\n\n // console.log(empData,'empData')\n setFetchedData([...fetchedData, ...employeesToRehire]);\n\n setTermedEmployees(empData);\n setEmployeesToRehire([]);\n setOpenRehireEmployeesModal(false);\n }\n\n const handleClose = () => {\n setOpen(false);\n };\n const profileValidationSchema = Yup.object().shape({\n firstName: Yup.string().required('First Name is required')\n .max(50, 'First Name must not exceed 50 characters'),\n lastName: Yup.string().required('Last Name is required')\n .max(50, 'Last Name must not exceed 50 characters'),\n ssn: Yup.string().required('SSN is required')\n .max(11, 'SSN must not exceed 10 characters')\n .required(),\n birthDate: Yup.date().min('1901-01-01').typeError('Birth date is required'),\n email: Yup.string().email().required(),\n });\n const handleProfileSave = (employeeId, newData) => {\n console.log('profile save ' + employeeId)\n if (newData.Action == 'New') {\n console.log('new profile')\n let objToMerge = { ...newData, ...{ NewProfile: newData } }\n let newFetchedData = [...fetchedData]\n newFetchedData.push(objToMerge)\n setFetchedData(newFetchedData);\n setOpenProfileModal(false)\n }\n else {\n let empIdx = fetchedData.findIndex(obj => obj.employeeID == employeeId);\n if (empIdx > -1) {\n if (!fetchedData[empIdx].original !== undefined) {\n fetchedData[empIdx]['original'] = copyToOriginal(fetchedData[empIdx]);\n }\n }\n let objToMerge = { ...newData, ...{ NewProfile: newData } }\n objToMerge['Action'] = 'Update';\n objToMerge['ChangeType'] = 'Change';\n console.log('objToMerge ' + objToMerge)\n console.log(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...objToMerge } : obj)))\n setFetchedData(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...objToMerge } : obj)))\n }\n }\n\n\n const handleEmploymentSave = (employeeId, newData) => {\n console.log('employment edit ' + employeeId)\n\n if (newData.Action == 'New') {\n console.log('new')\n let objToMerge = { ...newData, ...{ NewEmployment: newData } }\n let newFetchedData = [...fetchedData]\n newFetchedData.push(objToMerge)\n setFetchedData(newFetchedData);\n setOpenProfileModal(false)\n }\n else {\n let empIdx = fetchedData.findIndex(obj => obj.employeeID == employeeId);\n if (empIdx > -1) {\n if (!fetchedData[empIdx].original !== undefined) {\n fetchedData[empIdx]['original'] = copyToOriginal(fetchedData[empIdx]);\n }\n }\n if (newData.termDate != \"\" && moment(newData.termDate).year() > 1900) {//0001-01-01T00:00:00\n newData.termDateStr = moment(newData.termDate).format(\"MM/DD/YYYY\");\n }\n let objToMerge = { ...newData, ...{ NewEmployment: newData } }\n objToMerge['Action'] = 'Update';\n objToMerge['ChangeType'] = 'Change';\n if (fetchedData[empIdx]['original'].termDate != newData.termDate) {\n if (newData.termDate != \"\" && moment(newData.termDate).year() > 1900) {//0001-01-01T00:00:00\n objToMerge['ChangeType'] = 'Term';\n }\n }\n console.log('objToMerge ' + objToMerge)\n console.log(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...objToMerge } : obj)))\n setFetchedData(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...objToMerge } : obj)))\n }\n }\n\n const handleBenefitSave = (employeeId, newData) => {\n console.log('benefit edit ' + employeeId)\n\n if (newData.Action == 'New') {\n console.log('new')\n let objToMerge = { ...newData, ...{ benefitEnrollments: newData } }\n let newFetchedData = [...fetchedData]\n newFetchedData.push(objToMerge)\n setFetchedData(newFetchedData);\n setOpenProfileModal(false)\n }\n else {\n\n let empIdx = fetchedData.findIndex(obj => obj.employeeID == employeeId);\n if (empIdx > -1) {\n if (!fetchedData[empIdx].original !== undefined) {\n fetchedData[empIdx]['original'] = copyToOriginal(fetchedData[empIdx]);\n }\n }\n let emp = fetchedData[empIdx];\n if (emp != null) {\n console.log(emp, 'org benefitEnrollments')\n let updatedBenefits = newData.filter(n => n.updated == true)\n console.log(updatedBenefits, 'updated benefit data')\n let benefitsToAdd = [];\n emp.benefitEnrollments = newData;\n if (emp['NewEnrollment'] == null) {\n emp['NewEnrollment'] = [];\n }\n\n for (let nb of updatedBenefits) {\n let bIdx = emp['NewEnrollment'].findIndex(n => n.benefitID == nb.benefitID);\n if (bIdx >= 0) {\n emp['NewEnrollment'][bIdx] = nb;\n }\n else {\n benefitsToAdd.push(nb);\n }\n }\n emp['NewEnrollment'] = [...emp['NewEnrollment'], ...benefitsToAdd];\n\n emp['Action'] = 'Update';\n emp['ChangeType'] = 'Change';\n console.log(emp, 'after benefitEnrollments')\n }\n console.log(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...emp } : obj)))\n setFetchedData(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...emp } : obj)))\n\n }\n }\n\n const handlePriorData = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n apiGet(apiUrls.getPriorCensusManagement(selectedCompany))\n .then((response) => {\n console.log(response, 'prior census data')\n setOpenPriorDataModal(true);\n setPriorData(response.data)\n })\n .catch((e) => {\n console.log(e, \"CATCHED handlePriorData\");\n });\n }\n\n const handleAddEmployee = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n let newEmpObj = { companyID: selectedCompany, employeeID: uuid(), insuredID: uuid(), Action: 'New' };\n setNewEmployeeProfileData({ ...emptyEmployee, ...newEmpObj });\n setProfileErrors({});\n setOpenProfileModal(true);\n }\n\n const copyToOriginal = (obj) => {\n let orgObj = { ...obj };\n if (orgObj.NewProfile !== undefined) {\n delete orgObj.NewProfile;\n }\n if (orgObj.NewEnrollment !== undefined) {\n delete orgObj.NewEnrollment;\n }\n if (orgObj.NewEnrollment !== undefined) {\n delete orgObj.NewEnrollment;\n }\n if (orgObj.Action !== undefined) {\n delete orgObj.Action;\n }\n if (orgObj.ChangeType !== undefined) {\n delete orgObj.ChangeType;\n }\n return orgObj;\n }\n\n const handleAddBenefitSave = (employeeId, benefitsToAdd,isNew = false) => {\n console.log(benefitsToAdd, 'benefits to add in census')\n\n let empIdx = fetchedData.findIndex(obj => obj.employeeID == employeeId);\n if (empIdx > -1) {\n if (!fetchedData[empIdx].original !== undefined) {\n fetchedData[empIdx]['original'] = copyToOriginal(fetchedData[empIdx]);\n }\n }\n let emp = fetchedData[empIdx];\n if (emp != null) {\n console.log(emp, 'org benefitEnrollments')\n if(!emp.benefitEnrollments){\n emp.benefitEnrollments = [] \n }\n emp.benefitEnrollments = [...emp.benefitEnrollments, ...benefitsToAdd];\n if (emp['NewEnrollment'] == null) {\n emp['NewEnrollment'] = [];\n }\n emp['NewEnrollment'] = [...emp['NewEnrollment'], ...benefitsToAdd];\n emp['Action'] = 'Update';\n emp['ChangeType'] = 'Change';\n console.log(emp, 'after benefitEnrollments')\n }\n console.log(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...emp } : obj)))\n setFetchedData(fetchedData.map((obj => obj.employeeID == employeeId ?\n { ...obj, ...emp } : obj)))\n }\n const handleEmployeeReset = (employeeId) => {\n console.log('reset ' + employeeId)\n let empIdx = fetchedData.findIndex(obj => obj.employeeID == employeeId);\n console.log(fetchedData[empIdx], 'found ')\n if (empIdx > -1) {\n if (fetchedData[empIdx].original !== undefined) {\n let objToMerge = { ...fetchedData[empIdx].original };\n\n console.log(fetchedData[empIdx], 'reset to')\n setFetchedData(fetchedData.map((obj => obj.employeeID == employeeId ?\n objToMerge : obj)))\n }\n }\n }\n\n const handleSaveEmployeeProfile = async () => {\n console.log(profileRef, 'profileRef')\n if (profileRef != null && profileRef.current.formData !== undefined) {\n let formData = profileRef.current.formData;\n\n console.log(formData, 'handleSaveEmployeeProfile formData');\n const newProfile = {\n \"employeeID\": formData.employeeID,\n \"birthDate\": formData.birthDate,\n \"email\": formData.email,\n \"firstName\": formData.firstName,\n \"genderID\": formData.genderID,\n \"insuredID\": formData.insuredID,\n \"lastName\": formData.lastName,\n \"mailingAddress1\": formData.mailingAddress1,\n \"mailingAddress2\": formData.mailingAddress2,\n \"mailingCity\": formData.mailingCity,\n \"mailingStateID\": formData.mailingStateID,\n \"mailingZipCode\": formData.mailingZipCode,\n \"maritalStatusID\": formData.maritalStatusID,\n \"middleName\": formData.middleName,\n \"ssn\": formData.ssn,\n \"workPhone\": formData.workPhone,\n \"homePhone\": formData.homePhone,\n \"Action\": \"New\",\n \"ChangeType\": \"New\"\n };\n\n try {\n const valid = await profileValidationSchema.validateSync(newProfile,\n { abortEarly: false }\n );\n console.log(valid, 'valid')\n handleProfileSave(formData.employeeID, newProfile)\n\n } catch (error) {\n // error.inner\n console.log(error, 'valid error')\n let pErrors = {};\n for (const err of error.inner) {\n if (err.path) {\n console.log(err.path, 'err.path')\n console.log(err.message, 'err.message')\n Object.defineProperty(pErrors, err.path, {\n value: err.message,\n writable: true\n });\n //pErrors[error.path] = error.message;\n }\n }\n\n console.dir(pErrors, 'pErrors')\n setProfileErrors(pErrors)\n }\n }\n }\n\n const handleReset = () => {\n //reset from client?\n setFetchedData(fetchedData.filter(obj => (obj.Action === undefined || obj.Action == 'New')).map((obj) => {\n if (obj.original !== undefined) {\n console.log(obj, 'has original');\n return obj.original;\n }\n else {\n return obj;\n }\n }));\n }\n\n const handleProfileClose = () => {\n setOpenProfileModal(false);\n }\n\n const keysChangeCase = (j, toUpper = true) => {\n if (typeof j === 'string') { // so it works for javascript arrays as well\n try {\n j = JSON.parse(j);\n } catch (err) {\n console.error('Invalid JSON input');\n console.error(err);\n }\n }\n if (Array.isArray(j)) {\n console.log('is array?')\n if (j.length == 0) {\n return [];\n }\n return j.map(o => keysChangeCase(o, toUpper));\n }\n else {\n let newObj = Object.fromEntries(\n Object.entries(j).map(([k, v]) => [(toUpper ? k.charAt(0).toUpperCase() : k.charAt(0).toLowerCase()) + k.slice(1), v])\n );\n return newObj;\n }\n }\n\n const handleSave = (submitParse = false) => {\n setSaving(true)\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n\n //convert property names to correct format before saving\n let updatedEmployees = fetchedData.filter(r => r.Action != null).map(ee => {\n if (ee.benefitEnrollments !== undefined) {\n console.log('yes BenefitEnrollments')\n console.log(keysChangeCase(ee.benefitEnrollments, true), 'yes BenefitEnrollments')\n\n ee.BenefitEnrollments = keysChangeCase(ee.benefitEnrollments, true);\n }\n if (ee.NewProfile !== undefined) {\n console.log('yes NewProfile')\n ee.NewProfile = keysChangeCase(ee.NewProfile, true);\n }\n\n if (ee.NewEmployment !== undefined) {\n console.log('yes NewEmployment')\n ee.NewEmployment = keysChangeCase(ee.NewEmployment, true);\n }\n\n if (ee.NewEnrollment !== undefined) {\n console.log('yes NewEnrollment')\n ee.NewEnrollment = keysChangeCase(ee.NewEnrollment, true);\n }\n ee = keysChangeCase(ee, true);\n return ee;\n })\n\n console.log(updatedEmployees, 'updatedEmployees');\n\n let censusData = {\n CompanyID: selectedCompany,\n HWBenefitDate: hwBenefitDate,\n CensusData: JSON.stringify(updatedEmployees.map(ee => keysChangeCase(ee, true)))\n };\n if (censusManagementID != null) {\n censusData.CensusManagementID = censusManagementID;\n }\n apiPost(apiUrls.postCensusManagement(selectedCompany), censusData)\n .then((response) => {\n console.log(response, 'census response')\n if (response.data != null && response.data.censusManagementID) {\n setCensusManagementID(response.data.censusManagementID)\n if (submitParse) {\n let censusData = {\n CompanyID: selectedCompany,\n CensusManagementID: response.data.censusManagementID\n }\n apiPost(apiUrls.parseCensusManagement(selectedCompany), censusData)\n .then((response) => {\n console.log(response, 'parse census response')\n setCensusManagementID(response.data.censusManagementID)\n setOpenSubmitModal(true)\n setTimeout(() => {\n window.location.reload(false)\n }, 3000);\n })\n .catch((e) => {\n console.log(e, \"CATCHED\");\n })\n .finally(() => {\n setSaving(false);\n });\n }\n }\n else {\n setSaving(false);\n }\n\n })\n .catch((e) => {\n console.log(e, \"CATCHED\");\n })\n .finally(() => {\n setSaving(false);\n });;\n\n }\n\n const handleSaveSubmit = () => {\n handleSave(true)\n }\n\n\n const showBenefits = (benefits) => {\n return (\n {\n Array.isArray(benefits) ?\n benefits.map((enrollment) => {\n return ({enrollment.benefit} {(enrollment.benefit.toUpperCase().includes(\"WAIVE\") ? (\"\" + ((benefits.length > 1) ? \"\\n\" : \"\")) : \" : \" + enrollment.coverage + ((benefits.length > 1) ? \"\\n\" : \"\"))}
);\n }\n\n const rowStyles = [\n {\n\n }\n ]\n\n const badgeProps = (action, changeType) => {\n // badgeContent={badgeContent(row.values.Action, row.values.ChangeType)}\n // invisible={badgeContent(row.values.Action, row.values.ChangeType)==\"\"}>\n\n return {\n badgeContent: \"Updated\",\n invisible: true\n };\n /*\n if(changeType==\"Change\"){\n return {\n badgeContent: \"Updated\",\n invisible: true\n };\n }\n else if(changeType==\"Term\"){\n \n return {\n badgeContent: \"Updated\",\n invisible: true\n };\n\n return \"Term\";\n }\n else if(changeType==\"Rehire\"){\n return \"Term\";\n }\n if(action==\"New\"){\n return \"New\";\n }\n return \"\";\n */\n }\n\n const columns = [\n {\n Header: \"InsuredID\",\n accessor: \"insuredID\",\n disableFilters: true,\n },\n {\n Header: \"benefitPackageID\",\n accessor: \"benefitPackageID\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n },\n disableFilters: true,\n },\n {\n Header: \"Action\",\n accessor: \"Action\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n },\n disableFilters: true,\n },\n {\n Header: \"ChangeType\",\n accessor: \"ChangeType\",\n style: {\n display: \"none\"\n },\n cellStyle: {\n display: \"none\"\n },\n disableFilters: true,\n },\n {\n Header: \"Action\",\n accessor: \"employeeID\",\n Cell: ({ row }) => (\n <>\n \n obj.employeeID == row.values.employeeID))}\n />\n \n \n ),\n disableFilters: true,\n },\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n },\n // {\n // Header: \"Email\",\n // accessor: \"email\",\n // },\n {\n Header: \"SSN\",\n accessor: \"ssn\",\n Cell: ({ row }) => (\n \n {formatSSN(row.values.ssn)}\n \n )\n },\n {\n Header: \"Job Title\",\n accessor: \"jobTitle\",\n },\n {\n Header: \"DOB\",\n accessor: (cell) => Utils.formatDate(cell.birthDateStr),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.birthDateStr)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"DOH\",\n accessor: (cell) => Utils.formatDate(cell.hireDateStr),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.hireDateStr)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Term Date\",\n accessor: (cell) => Utils.formatDate(cell.termDateStr),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.termDateStr)}\n \n ),\n sortType: \"dateSort\",\n },\n // {\n // Header: \"Hourly Salary\",\n // accessor: \"hourlySalary\",\n // },\n {\n Header: \"Benefits\",\n accessor: \"benefitEnrollments\",\n //accessor: (cell) => < />,\n Cell: ({ row }) => (\n \n {showBenefits(row.values.benefitEnrollments)}\n \n )\n }\n ];\n\n const fetchCensusData = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n setIsLoadingCensus(true);\n apiGet(apiUrls.getComplianceEmployees(selectedCompany)).then(\n (empResponse) => {\n let empData = empResponse.data;\n console.log(empData, \"Census employee\");\n apiGet(apiUrls.getCensus(selectedCompany)).then(\n (censusResponse) => {\n console.log(censusResponse, \"Census data\");\n let draftData = censusResponse.data;\n if (draftData.length == 0) {//no draft\n //get the next open payperiod\n console.log('no draft found');\n apiGet(apiUrls.getNextOpenPayperiod(selectedCompany)).then((ppResponse) => {\n console.dir(ppResponse, \"pp response\");\n console.dir(ppResponse.data.hwBenefitDate, \" set hw benefit date\")\n setHwBenefitDate(ppResponse.data.hwBenefitDate)\n })\n\n setCensusManagementID(null);\n setCensusManagementStatusID(130);\n }\n else {\n console.log(draftData, ' found draft');\n setCensusManagementID(draftData[0].censusManagementID);\n setHwBenefitDate(draftData[0].hwBenefitDate);\n setCensusManagementStatusID(draftData[0].statusID);\n let draftCensus = JSON.parse(draftData[0].censusData);\n console.log(draftCensus, ' censusData');\n for (let dc of draftCensus) {\n let empIdx = empData.findIndex(ed => ed.insuredID == dc.InsuredID);\n if (empIdx < 0) {\n empData.push(keysChangeCase(dc, false))\n empIdx = empData.findIndex(ed => ed.insuredID == dc.InsuredID);\n }\n if (empIdx >= 0) {\n console.log('found ee')\n //change key to first letter lower case\n empData[empIdx] = keysChangeCase(dc, false)\n if (dc.Action !== undefined) {\n console.log('set action');\n empData[empIdx].Action = dc.Action;\n }\n if (dc.ChangeType !== undefined) {\n empData[empIdx].ChangeType = dc.ChangeType;\n }\n\n if (dc.NewProfile !== undefined) {\n empData[empIdx].NewProfile = dc.NewProfile;\n }\n if (dc.NewEmployment !== undefined) {\n empData[empIdx].NewEmployment = dc.NewEmployment;\n }\n if (dc.NewEnrollment !== undefined) {\n empData[empIdx].NewEnrollment = dc.NewEnrollment;\n }\n if (dc.BenefitEnrollments !== undefined) {\n empData[empIdx].benefitEnrollments = keysChangeCase(dc.BenefitEnrollments, false);\n }\n }\n }\n }\n if (empData) {\n console.log(\"Set Fetch empdata\");\n setFetchedData(empData);\n\n }\n setIsLoadingCensus(false);\n console.log(empData, \"Census employee\");\n }\n );\n\n\n }\n );\n }\n const handleChangeCompany = () => {\n const selectedCompany = localStorage.getItem(`selectedCompanyId`);\n setCurrentCompany(selectedCompany)\n if (selectedCompany != currentCompany) {\n fetchCensusData();\n }\n }\n const filterFetchedData = () => {\n console.log(dataFilter, 'filterFetchedData');\n if (dataFilter == null || dataFilter == \"ALL\") {\n return fetchedData;\n }\n else if (dataFilter == \"New\") {\n return fetchedData.filter(f => f.Action == \"New\");\n }\n else if (dataFilter == \"Change\") {\n return fetchedData.filter(f => f.ChangeType == \"Change\");\n }\n else if (dataFilter == \"Term\") {\n return fetchedData.filter(f => f.ChangeType == \"Term\");\n }\n else if (dataFilter == \"Rehire\") {\n return fetchedData.filter(f => f.ChangeType == \"Rehire\");\n }\n else if (dataFilter == \"Update\") {\n return fetchedData.filter(f => f.Action == \"New\" || f.Action == \"Update\");\n }\n return fetchedData;\n }\n\n const downloadFileError = (fileId) => {\n console.log(fileId, 'error fileId')\n\n apiGet(apiUrls.getDownloadImportErrors(fileId), { responseType: \"blob\" }).then(response => {\n\n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", \"errors.csv\");\n document.body.appendChild(link);\n link.click();\n\n console.log(\"File downloading successfully\");\n }).catch(\n (response) => {\n\n console.error(\"File downloading successfully\");\n //setErrorText(\"An Error occurred downloading the file.\");\n //setDoShowError(true);\n }\n );\n\n }\n\n return (\n <>\n \n
\n
\n \n Prior Data\n \n \n Add Employee\n \n \n Choose Employees\n \n \n Rehire Employees\n \n {/* \n Rehire Employee\n */}\n
\n
\n\n \n Reset\n \n \n handleSave(true)}\n loading={saving}\n disabled={!canSubmit}\n loadingIndicator=\"Saving...\"\n >\n Save & Submit\n \n \n handleSave(false)}\n loading={saving}\n loadingIndicator=\"Saving...\"\n >\n Save\n \n
\n
\n
\n \n HW Benefit Date {moment(hwBenefitDate).format(\"MM/DD/YYYY\")}
\n \n \n New: setDataFilter(\"New\")}>{fetchedData.filter(f => f.Action == \"New\").length}
\n \n \n Rehire: setDataFilter(\"Rehire\")}>{fetchedData.filter(f => f.ChangeType == \"Rehire\").length}
\n \n \n Change: setDataFilter(\"Change\")}>{fetchedData.filter(f => f.ChangeType == \"Change\").length}
\n \n \n Term: setDataFilter(\"Term\")}>{fetchedData.filter(f => f.ChangeType == \"Term\").length}
\n \n \n Total: setDataFilter(\"Update\")}>{fetchedData.filter(f => f.Action == \"New\" || f.Action == \"Update\").length}
\n \n \n Total Employees: setDataFilter(null)}>{fetchedData.length}
\n \n \n {/* Census Table Data */}\n
\n {isLoadingCensus ? (\n \n {/* {columnType === 'paymentCol' ? \"Invoice Payments\" : columnType === 'disbursementCol' ? \"Disbursements\" : columntType === 'creditCol' ? \"Invoice Credits\" : <>} */}\n {\"Invoice Payments\"} \n \n {checkingData ? (\n No Data \n ) : (\n <>\n )}\n \n \n \n Close\n \n \n \n\n \n \n Add Employee\n \n \n\n \n \n \n \n Save\n \n\n \n Close\n \n \n \n\n { setOpenSubmitModal(false) }}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n \n {\"Census management\"}\n \n \n Changes have been submitted to process.\n \n \n \n \n \n\n );\n}\n\nexport default Census;\n","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\n// import { AppContext } from \"AppContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Box } from \"@mui/material\";\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport { Utils } from \"common/Utils\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\n\nconst formatSSN = (val) => \"XXX-XX-\" + val.replaceAll(\"-\", \"\").slice(5);\n\nfunction GsgCensus (props) {\n const { companyId } = useContext(PrivateRoutesContext);\n // const { oauthToken, setOauth } = useContext(AppContext);\n const [fetchedData, setFetchedData] = useState([]);\n\n const [isLoadingCensus, setIsLoadingCensus] = useState(true);\n\n const [benefitTypeSelected, setBenefitTypeSelected] = useState(\"ALL\");\n const [benefitDatesDropdown, setbenefitDatesDropdown] = useState([]);\n const [benefitDateSelected, setBenefitDateSelected] = useState(\"\");\n \n const benefitTypesDropdown = [{ value: \"ALL\", text: \"All Benefits\" }, { value: \"MEDICAL\", text: \"Medical Only\" }];\n\n\n useEffect(() => {\n fetchDropdownData();\n }, [companyId]);\n\n const fetchDropdownData = () => {\n apiGet(apiUrls.getBenefitPayPeriods(companyId))\n .then((response) => {\n if (response.data)\n {\n var date = new Date(getDefaultBenefitDate(response.data));\n\n // restrict benefit dates to dates within the next 4 months\n var fourMonths = new Date(date.setMonth(date.getMonth()+4));\n\n var dates = response.data.filter(d => new Date(d.benefitDate) < fourMonths);\n\n setbenefitDatesDropdown(dates)\n }\n })\n .catch(function (error) {\n })\n .then(function () {\n });\n }\n\n useEffect(() => {\n if (benefitDatesDropdown.length > 0) {\n var date = getDefaultBenefitDate(benefitDatesDropdown);\n \n setBenefitDateSelected(date);\n }\n }, [benefitDatesDropdown]);\n\n useEffect(() => {\n fetchCensusData();\n },[benefitDateSelected, benefitTypeSelected]);\n\n const fetchCensusData = () => {\n if (benefitDateSelected && benefitTypeSelected) {\n setIsLoadingCensus(true);\n \n apiGet(apiUrls.getEmployeesWithEnrollmentInfo(companyId, benefitDateSelected, benefitTypeSelected)).then(\n (empResponse) => {\n if (empResponse.data) {\n setFetchedData(empResponse.data);\n }\n setIsLoadingCensus(false);\n }\n );\n }\n }\n\n const getDefaultBenefitDate = (dates) => {\n var date = dates[0];\n\n let closed = dates.filter(x => x.statusCode === 'CLOSE');\n let open = dates.filter(x => x.statusCode === \"OPEN\");\n\n if (closed.length > 0) {\n // sort descending\n var orderedClosed = closed.sort((a,b) => new Date(b.benefitDate) - new Date(a.benefitDate));\n\n date = orderedClosed[0].benefitDate;\n }\n else if (open.length > 0) {\n // sort ascending\n var orderedOpen = open.sort((a,b) => new Date(a.benefitDate) - new Date(b.benefitDate));\n\n date = orderedOpen[0].benefitDate;\n }\n\n return date;\n }\n\n const showBenefits = (benefits) => {\n return (\n {\n Array.isArray(benefits) ?\n benefits.map((enrollment) => {\n return ({enrollment.benefit} { (enrollment.benefit.toUpperCase().includes(\"WAIVE\")?(\" (\"+Utils.formatDate(enrollment.startDate)+\" to \"+Utils.formatDate(enrollment.endDate) +\")\"+((benefits.length>1)?\"\\n\":\"\")):\" : \"+enrollment.coverage+\" (\"+Utils.formatDate(enrollment.startDate)+\" to \"+Utils.formatDate(enrollment.endDate) +\")\"+((benefits.length>1)?\"\\n\":\"\"))}
);\n }\n\n const columns = [\n {\n Header: \"InsuredID\",\n accessor: \"insuredID\",\n disableFilters: true,\n },\n {\n Header: \"benefitPackageID\",\n accessor: \"benefitPackageID\",\n disableFilters: true,\n },\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n },\n // {\n // Header: \"Email\",\n // accessor: \"email\",\n // },\n {\n Header: \"SSN\",\n accessor: \"ssn\",\n Cell: ({ row }) => (\n \n {formatSSN(row.values.ssn)}\n \n )\n },\n {\n Header: \"DOB\",\n accessor: (cell) => Utils.formatDate(cell.birthDateStr),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.birthDateStr)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"DOH\",\n accessor: (cell) => Utils.formatDate(cell.hireDateStr),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.hireDateStr)}\n \n ),\n sortType: \"dateSort\",\n },\n // {\n // Header: \"Term Date\",\n // accessor: (cell) => Utils.formatDate(cell.termDateStr),\n // Cell: ({row}) => (\n // \n // {Utils.formatDate(row.original.termDateStr)}\n // \n // ),\n // sortType: \"dateSort\",\n // },\n {\n Header: \"Benefits\",\n accessor: \"benefitEnrollments\",\n //accessor: (cell) => < />,\n Cell: ({ row }) => (\n \n {showBenefits(row.values.benefitEnrollments)}\n \n )\n }\n ];\n\n const downloadBenefits = () => {\n if (benefitDateSelected && benefitTypeSelected) {\n \n apiGet(apiUrls.exportEmployeesWithEnrollmentInfo(companyId, benefitDateSelected, benefitTypeSelected)).then(response => {\n \n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", \"export.csv\");\n document.body.appendChild(link);\n link.click();\n \n console.log(\"File downloading successfully\");\n }).catch(\n (response) => {\n }\n );\n\n \n }\n }\n return (\n <>\n \n
\n \n\n setBenefitDateSelected(e.target.value)}\n pairs={benefitDatesDropdown.map(x => ({ value: x.benefitDate, text: Utils.formatDate(x.benefitDate) }))} />\n\n setBenefitTypeSelected(e.target.value)}\n pairs={benefitTypesDropdown} />\n\n \n \n {/* Census Table Data */}\n
\n {isLoadingCensus ? (\n )}\n
\n
\n
\n `;\n\n this.hide();\n\n this.title = this.parent.querySelector('.title');\n this.subtitle = this.parent.querySelector('.subtitle');\n this.pointer = this.parent.querySelector('.pointer');\n }\n\n show(options) {\n if (!options.target_element) {\n throw new Error('target_element is required to show popup');\n }\n if (!options.position) {\n options.position = 'left';\n }\n const target_element = options.target_element;\n\n if (this.custom_html) {\n let html = this.custom_html(options.task);\n html += '
';\n this.parent.innerHTML = html;\n this.pointer = this.parent.querySelector('.pointer');\n } else {\n // set data\n this.title.innerHTML = options.title;\n this.subtitle.innerHTML = options.subtitle;\n this.parent.style.width = this.parent.clientWidth + 'px';\n }\n\n // set position\n let position_meta;\n if (target_element instanceof HTMLElement) {\n position_meta = target_element.getBoundingClientRect();\n } else if (target_element instanceof SVGElement) {\n position_meta = options.target_element.getBBox();\n }\n\n if (options.position === 'left') {\n this.parent.style.left =\n position_meta.x + (position_meta.width + 10) + 'px';\n this.parent.style.top = position_meta.y + 'px';\n\n this.pointer.style.transform = 'rotateZ(90deg)';\n this.pointer.style.left = '-7px';\n this.pointer.style.top = '2px';\n }\n\n // show\n this.parent.style.opacity = 1;\n this.parent.style.zIndex = 0;\n }\n\n hide() {\n this.parent.style.opacity = 0;\n this.parent.style.left = 0;\n this.parent.style.zIndex = -999\n }\n}\n","import date_utils from './date_utils';\nimport { $, createSVG } from './svg_utils';\nimport Bar from './bar';\nimport Milestone from './milestone';\nimport Arrow from './arrow';\nimport Popup from './popup';\n\nimport './gantt.scss';\n\nconst VIEW_MODE = {\n QUARTER_DAY: 'Quarter Day',\n HALF_DAY: 'Half Day',\n DAY: 'Day',\n WEEK: 'Week',\n MONTH: 'Month',\n YEAR: 'Year',\n};\n\nexport default class Gantt {\n constructor(wrapper, tasks, options) {\n this.setup_wrapper(wrapper);\n this.setup_options(options);\n this.setup_tasks(tasks);\n // initialize with default view mode\n this.change_view_mode();\n this.bind_events();\n }\n\n setup_wrapper(element) {\n let svg_element, wrapper_element;\n\n // CSS Selector is passed\n if (typeof element === 'string') {\n element = document.querySelector(element);\n }\n\n // get the SVGElement\n if (element instanceof HTMLElement) {\n wrapper_element = element;\n svg_element = element.querySelector('svg');\n } else if (element instanceof SVGElement) {\n svg_element = element;\n } else {\n throw new TypeError(\n 'Frappé Gantt only supports usage of a string CSS selector,' +\n \" HTML DOM element or SVG DOM element for the 'element' parameter\"\n );\n }\n\n // svg element\n if (!svg_element) {\n // create it\n this.$svg = createSVG('svg', {\n append_to: wrapper_element,\n class: 'gantt',\n });\n } else {\n this.$svg = svg_element;\n this.$svg.classList.add('gantt');\n }\n\n // wrapper element\n this.$container = document.createElement('div');\n this.$container.classList.add('gantt-container');\n\n const parent_element = this.$svg.parentElement;\n parent_element.appendChild(this.$container);\n this.$container.appendChild(this.$svg);\n\n // popup wrapper\n this.popup_wrapper = document.createElement('div');\n this.popup_wrapper.classList.add('popup-wrapper');\n this.$container.appendChild(this.popup_wrapper);\n }\n\n setup_options(options) {\n const default_options = {\n header_height: 50,\n column_width: 30,\n step: 24,\n view_modes: [...Object.values(VIEW_MODE)],\n bar_height: 20,\n bar_corner_radius: 3,\n arrow_curve: 5,\n padding: 18,\n view_mode: 'Day',\n date_format: 'YYYY-MM-DD',\n popup_trigger: 'click',\n custom_popup_html: null,\n language: 'en',\n readonly: false,\n date_padding: null,\n };\n this.options = Object.assign({}, default_options, options);\n }\n\n setup_tasks(tasks) {\n // prepare tasks\n this.tasks = tasks.map((task, i) => {\n // convert to Date objects\n task._start = date_utils.parse(task.start);\n task._end = date_utils.parse(task.end);\n\n // make task invalid if duration too large\n if (date_utils.diff(task._end, task._start, 'year') > 10) {\n task.end = null;\n }\n\n // cache index\n task._index = i;\n\n // invalid dates\n if (!task.start && !task.end) {\n const today = date_utils.today();\n task._start = today;\n task._end = date_utils.add(today, 2, 'day');\n }\n\n if (!task.start && task.end) {\n task._start = date_utils.add(task._end, -2, 'day');\n }\n\n if (task.start && !task.end) {\n task._end = date_utils.add(task._start, 2, 'day');\n }\n\n // if hours is not set, assume the last day is full day\n // e.g: 2018-09-09 becomes 2018-09-09 23:59:59\n const task_end_values = date_utils.get_date_values(task._end);\n if (task_end_values.slice(3).every((d) => d === 0)) {\n task._end = date_utils.add(task._end, 24, 'hour');\n }\n\n // round to nearest hour\n if (task_end_values.slice(4).some((d) => d !== 0)) {\n task._end = date_utils.round_to_hour(task._end);\n }\n\n // invalid flag\n if (!task.start || !task.end) {\n task.invalid = true;\n }\n\n // dependencies\n if (typeof task.dependencies === 'string' || !task.dependencies) {\n let deps = [];\n if (task.dependencies) {\n deps = task.dependencies\n .split(',')\n .map((d) => d.trim())\n .filter((d) => d);\n }\n task.dependencies = deps;\n }\n\n // uids\n if (!task.id) {\n task.id = generate_id(task);\n }\n\n return task;\n });\n\n this.setup_dependencies();\n }\n\n setup_dependencies() {\n this.dependency_map = {};\n for (let t of this.tasks) {\n for (let d of t.dependencies) {\n this.dependency_map[d] = this.dependency_map[d] || [];\n this.dependency_map[d].push(t.id);\n }\n }\n }\n\n refresh(tasks,options) {\n if (options) {\n this.setup_options(options);\n }\n\n this.setup_tasks(tasks);\n this.change_view_mode();\n }\n\n change_view_mode(mode = this.options.view_mode) {\n this.update_view_scale(mode);\n this.setup_dates();\n this.render();\n // fire viewmode_change event\n this.trigger_event('view_change', [mode]);\n }\n\n update_view_scale(view_mode) {\n this.options.view_mode = view_mode;\n\n if (view_mode === VIEW_MODE.DAY) {\n this.options.step = 24;\n this.options.column_width = 38;\n } else if (view_mode === VIEW_MODE.HALF_DAY) {\n this.options.step = 24 / 2;\n this.options.column_width = 38;\n } else if (view_mode === VIEW_MODE.QUARTER_DAY) {\n this.options.step = 24 / 4;\n this.options.column_width = 38;\n } else if (view_mode === VIEW_MODE.WEEK) {\n this.options.step = 24 * 7;\n this.options.column_width = 140;\n } else if (view_mode === VIEW_MODE.MONTH) {\n this.options.step = 24 * 30;\n this.options.column_width = 120;\n } else if (view_mode === VIEW_MODE.YEAR) {\n this.options.step = 24 * 365;\n this.options.column_width = 120;\n }\n }\n\n setup_dates() {\n this.setup_gantt_dates();\n this.setup_date_values();\n }\n\n setup_gantt_dates() {\n this.gantt_start = this.gantt_end = null;\n\n for (let task of this.tasks) {\n // set global start and end date\n if (!this.gantt_start || task._start < this.gantt_start) {\n this.gantt_start = task._start;\n }\n if (!this.gantt_end || task._end > this.gantt_end) {\n this.gantt_end = task._end;\n }\n }\n\n this.gantt_start = date_utils.start_of(this.gantt_start, 'day');\n this.gantt_end = date_utils.start_of(this.gantt_end, 'day');\n\n // add date padding on both sides\n if (this.options.date_padding) {\n if (this.view_is([VIEW_MODE.QUARTER_DAY, VIEW_MODE.HALF_DAY, VIEW_MODE.DAY])) {\n this.gantt_start = date_utils.add(this.gantt_start, -this.options.date_padding, 'day');\n this.gantt_end = date_utils.add(this.gantt_end, this.options.date_padding, 'day');\n } else if (this.view_is(VIEW_MODE.MONTH)) {\n this.gantt_start = date_utils.add(this.gantt_start, -this.options.date_padding, 'month');\n this.gantt_end = date_utils.add(this.gantt_end, this.options.date_padding, 'month');\n } else if (this.view_is(VIEW_MODE.YEAR)) {\n this.gantt_start = date_utils.add(this.gantt_start, -this.options.date_padding, 'year');\n this.gantt_end = date_utils.add(this.gantt_end, this.options.date_padding, 'year');\n } else if (this.view_is(VIEW_MODE.WEEK)) {\n this.gantt_start = date_utils.add(this.gantt_start, -this.options.date_padding * 7, 'day');\n this.gantt_end = date_utils.add(this.gantt_end, this.options.date_padding * 7, 'day');\n }\n }\n else {\n if (this.view_is([VIEW_MODE.QUARTER_DAY, VIEW_MODE.HALF_DAY])) {\n this.gantt_start = date_utils.add(this.gantt_start, -7, 'day');\n this.gantt_end = date_utils.add(this.gantt_end, 7, 'day');\n } else if (this.view_is(VIEW_MODE.MONTH)) {\n this.gantt_start = date_utils.start_of(this.gantt_start, 'year');\n this.gantt_end = date_utils.add(this.gantt_end, 1, 'year');\n } else if (this.view_is(VIEW_MODE.YEAR)) {\n this.gantt_start = date_utils.add(this.gantt_start, -2, 'year');\n this.gantt_end = date_utils.add(this.gantt_end, 2, 'year');\n } else {\n this.gantt_start = date_utils.add(this.gantt_start, -1, 'month');\n this.gantt_end = date_utils.add(this.gantt_end, 1, 'month');\n }\n }\n }\n\n setup_date_values() {\n this.dates = [];\n let cur_date = null;\n\n while (cur_date === null || cur_date < this.gantt_end) {\n if (!cur_date) {\n cur_date = date_utils.clone(this.gantt_start);\n } else {\n if (this.view_is(VIEW_MODE.YEAR)) {\n cur_date = date_utils.add(cur_date, 1, 'year');\n } else if (this.view_is(VIEW_MODE.MONTH)) {\n cur_date = date_utils.add(cur_date, 1, 'month');\n } else {\n cur_date = date_utils.add(\n cur_date,\n this.options.step,\n 'hour'\n );\n }\n }\n this.dates.push(cur_date);\n }\n }\n\n bind_events() {\n this.bind_grid_click();\n this.bind_bar_events();\n }\n\n render() {\n this.clear();\n this.setup_layers();\n this.make_grid();\n this.make_dates();\n this.make_bars();\n this.make_arrows();\n this.map_arrows_on_bars();\n this.set_width();\n this.set_scroll_position();\n }\n\n setup_layers() {\n this.layers = {};\n const layers = ['grid', 'date', 'arrow', 'progress', 'bar', 'details'];\n // make group layers\n for (let layer of layers) {\n this.layers[layer] = createSVG('g', {\n class: layer,\n append_to: this.$svg,\n });\n }\n }\n\n make_grid() {\n this.make_grid_background();\n this.make_grid_rows();\n this.make_grid_header();\n this.make_grid_ticks();\n this.make_grid_highlights();\n }\n\n make_grid_background() {\n const grid_width = this.dates.length * this.options.column_width;\n const grid_height =\n this.options.header_height +\n this.options.padding +\n (this.options.bar_height + this.options.padding) *\n this.tasks.length;\n\n createSVG('rect', {\n x: 0,\n y: 0,\n width: grid_width,\n height: grid_height,\n class: 'grid-background',\n append_to: this.layers.grid,\n });\n\n $.attr(this.$svg, {\n height: grid_height + this.options.padding + 100,\n width: '100%',\n });\n }\n\n make_grid_rows() {\n const rows_layer = createSVG('g', { append_to: this.layers.grid });\n const lines_layer = createSVG('g', { append_to: this.layers.grid });\n\n const row_width = this.dates.length * this.options.column_width;\n const row_height = this.options.bar_height + this.options.padding;\n\n let row_y = this.options.header_height + this.options.padding / 2;\n\n for (let task of this.tasks) {\n createSVG('rect', {\n x: 0,\n y: row_y,\n width: row_width,\n height: row_height,\n class: 'grid-row',\n append_to: rows_layer,\n });\n\n createSVG('line', {\n x1: 0,\n y1: row_y + row_height,\n x2: row_width,\n y2: row_y + row_height,\n class: 'row-line',\n append_to: lines_layer,\n });\n\n row_y += this.options.bar_height + this.options.padding;\n }\n }\n\n make_grid_header() {\n const header_width = this.dates.length * this.options.column_width;\n const header_height = this.options.header_height + 10;\n createSVG('rect', {\n x: 0,\n y: 0,\n width: header_width,\n height: header_height,\n class: 'grid-header',\n append_to: this.layers.grid,\n });\n }\n\n make_grid_ticks() {\n let tick_x = 0;\n let tick_y = this.options.header_height + this.options.padding / 2;\n let tick_height =\n (this.options.bar_height + this.options.padding) *\n this.tasks.length;\n\n for (let date of this.dates) {\n let tick_class = 'tick';\n // thick tick for monday\n if (this.view_is(VIEW_MODE.DAY) && date.getDate() === 1) {\n tick_class += ' thick';\n }\n // thick tick for first week\n if (\n this.view_is(VIEW_MODE.WEEK) &&\n date.getDate() >= 1 &&\n date.getDate() < 8\n ) {\n tick_class += ' thick';\n }\n // thick ticks for quarters\n if (\n this.view_is(VIEW_MODE.MONTH) &&\n (date.getMonth() + 1) % 3 === 0\n ) {\n tick_class += ' thick';\n }\n\n createSVG('path', {\n d: `M ${tick_x} ${tick_y} v ${tick_height}`,\n class: tick_class,\n append_to: this.layers.grid,\n });\n\n if (this.view_is(VIEW_MODE.MONTH)) {\n tick_x +=\n (date_utils.get_days_in_month(date) *\n this.options.column_width) /\n 30;\n } else {\n tick_x += this.options.column_width;\n }\n }\n }\n\n make_grid_highlights() {\n // highlight today's date\n if (this.view_is(VIEW_MODE.DAY)) {\n const x =\n (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /\n this.options.step) *\n this.options.column_width;\n const y = 0;\n\n const width = this.options.column_width;\n const height =\n (this.options.bar_height + this.options.padding) *\n this.tasks.length +\n this.options.header_height +\n this.options.padding / 2;\n\n createSVG('rect', {\n x,\n y,\n width,\n height,\n class: 'today-highlight',\n append_to: this.layers.grid,\n });\n }\n }\n\n make_dates() {\n for (let date of this.get_dates_to_draw()) {\n createSVG('text', {\n x: date.lower_x,\n y: date.lower_y,\n innerHTML: date.lower_text,\n class: 'lower-text',\n append_to: this.layers.date,\n });\n\n if (date.upper_text) {\n const $upper_text = createSVG('text', {\n x: date.upper_x,\n y: date.upper_y,\n innerHTML: date.upper_text,\n class: 'upper-text',\n append_to: this.layers.date,\n });\n\n // remove out-of-bound dates\n if (\n $upper_text.getBBox().x2 > this.layers.grid.getBBox().width\n ) {\n $upper_text.remove();\n }\n }\n }\n }\n\n get_dates_to_draw() {\n let last_date = null;\n const dates = this.dates.map((date, i) => {\n const d = this.get_date_info(date, last_date, i);\n last_date = date;\n return d;\n });\n return dates;\n }\n\n get_date_info(date, last_date, i) {\n if (!last_date) {\n last_date = date_utils.add(date, 1, 'year');\n }\n const date_text = {\n 'Quarter Day_lower': date_utils.format(\n date,\n 'HH',\n this.options.language\n ),\n 'Half Day_lower': date_utils.format(\n date,\n 'HH',\n this.options.language\n ),\n Day_lower:\n date.getDate() !== last_date.getDate()\n ? date_utils.format(date, 'D', this.options.language)\n : '',\n Week_lower:\n date.getMonth() !== last_date.getMonth()\n ? date_utils.format(date, 'D MMM', this.options.language)\n : date_utils.format(date, 'D', this.options.language),\n Month_lower: date_utils.format(date, 'MMMM', this.options.language),\n Year_lower: date_utils.format(date, 'YYYY', this.options.language),\n 'Quarter Day_upper':\n date.getDate() !== last_date.getDate()\n ? date_utils.format(date, 'D MMM', this.options.language)\n : '',\n 'Half Day_upper':\n date.getDate() !== last_date.getDate()\n ? date.getMonth() !== last_date.getMonth()\n ? date_utils.format(\n date,\n 'D MMM',\n this.options.language\n )\n : date_utils.format(date, 'D', this.options.language)\n : '',\n Day_upper:\n date.getMonth() !== last_date.getMonth()\n ? date_utils.format(date, 'MMMM', this.options.language)\n : '',\n Week_upper:\n date.getMonth() !== last_date.getMonth()\n ? date_utils.format(date, 'MMMM', this.options.language)\n : '',\n Month_upper:\n date.getFullYear() !== last_date.getFullYear()\n ? date_utils.format(date, 'YYYY', this.options.language)\n : '',\n Year_upper:\n date.getFullYear() !== last_date.getFullYear()\n ? date_utils.format(date, 'YYYY', this.options.language)\n : '',\n };\n\n const base_pos = {\n x: i * this.options.column_width,\n lower_y: this.options.header_height,\n upper_y: this.options.header_height - 25,\n };\n\n const x_pos = {\n 'Quarter Day_lower': (this.options.column_width * 4) / 2,\n 'Quarter Day_upper': 0,\n 'Half Day_lower': (this.options.column_width * 2) / 2,\n 'Half Day_upper': 0,\n Day_lower: this.options.column_width / 2,\n Day_upper: (this.options.column_width * 30) / 2,\n Week_lower: 0,\n Week_upper: (this.options.column_width * 4) / 2,\n Month_lower: this.options.column_width / 2,\n Month_upper: (this.options.column_width * 12) / 2,\n Year_lower: this.options.column_width / 2,\n Year_upper: (this.options.column_width * 30) / 2,\n };\n\n return {\n upper_text: date_text[`${this.options.view_mode}_upper`],\n lower_text: date_text[`${this.options.view_mode}_lower`],\n upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],\n upper_y: base_pos.upper_y,\n lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],\n lower_y: base_pos.lower_y,\n };\n }\n\n make_bars() {\n this.bars = this.tasks.map((task) => {\n if (task.custom_class && task.custom_class.includes(\"milestone\")) {\n const milestone = new Milestone(this, task);\n this.layers.bar.appendChild(milestone.group);\n return milestone;\n } else {\n const bar = new Bar(this, task);\n this.layers.bar.appendChild(bar.group);\n return bar;\n }\n });\n }\n\n make_arrows() {\n this.arrows = [];\n for (let task of this.tasks) {\n let arrows = [];\n arrows = task.dependencies\n .map((task_id) => {\n const dependency = this.get_task(task_id);\n if (!dependency) return;\n const arrow = new Arrow(\n this,\n this.bars[dependency._index], // from_task\n this.bars[task._index] // to_task\n );\n this.layers.arrow.appendChild(arrow.element);\n return arrow;\n })\n .filter(Boolean); // filter falsy values\n this.arrows = this.arrows.concat(arrows);\n }\n }\n\n map_arrows_on_bars() {\n for (let bar of this.bars) {\n bar.arrows = this.arrows.filter((arrow) => {\n return (\n arrow.from_task.task.id === bar.task.id ||\n arrow.to_task.task.id === bar.task.id\n );\n });\n }\n }\n\n set_width() {\n const cur_width = this.$svg.getBoundingClientRect().width;\n const actual_width = this.$svg\n .querySelector('.grid .grid-row')\n .getAttribute('width');\n if (cur_width < actual_width) {\n this.$svg.setAttribute('width', actual_width);\n }\n }\n\n set_scroll_position() {\n const parent_element = this.$svg.parentElement;\n if (!parent_element) return;\n\n const hours_before_first_task = date_utils.diff(\n this.get_oldest_starting_date(),\n this.gantt_start,\n 'hour'\n );\n\n const scroll_pos =\n (hours_before_first_task / this.options.step) *\n this.options.column_width -\n this.options.column_width;\n\n parent_element.scrollLeft = scroll_pos;\n }\n\n bind_grid_click() {\n $.on(\n this.$svg,\n this.options.popup_trigger,\n '.grid-row, .grid-header',\n () => {\n this.unselect_all();\n this.hide_popup();\n }\n );\n }\n\n bind_bar_events() {\n let is_dragging = false;\n let x_on_start = 0;\n let y_on_start = 0;\n let is_resizing_left = false;\n let is_resizing_right = false;\n let parent_bar_id = null;\n let bars = []; // instanceof Bar\n this.bar_being_dragged = null;\n\n function action_in_progress() {\n return is_dragging || is_resizing_left || is_resizing_right;\n }\n\n $.on(this.$svg, 'mousedown', '.bar-wrapper, .handle', (e, element) => {\n if (this.options.readonly) return;\n const bar_wrapper = $.closest('.bar-wrapper', element);\n\n if (element.classList.contains('left')) {\n is_resizing_left = true;\n } else if (element.classList.contains('right')) {\n is_resizing_right = true;\n } else if (element.classList.contains('bar-wrapper')) {\n is_dragging = true;\n }\n\n bar_wrapper.classList.add('active');\n\n x_on_start = e.offsetX;\n y_on_start = e.offsetY;\n\n parent_bar_id = bar_wrapper.getAttribute('data-id');\n const ids = [\n parent_bar_id,\n ...this.get_all_dependent_tasks(parent_bar_id),\n ];\n bars = ids.map((id) => this.get_bar(id));\n\n this.bar_being_dragged = parent_bar_id;\n\n bars.forEach((bar) => {\n if (bar && bar.$bar) {\n const $bar = bar.$bar;\n $bar.ox = $bar.getX();\n $bar.oy = $bar.getY();\n $bar.owidth = $bar.getWidth();\n $bar.finaldx = 0;\n }\n });\n });\n\n $.on(this.$svg, 'mousemove', (e) => {\n if (!action_in_progress()) return;\n if (this.options.readonly) return;\n const dx = e.offsetX - x_on_start;\n const dy = e.offsetY - y_on_start;\n\n bars.forEach((bar) => {\n if (bar && bar.$bar) {\n const $bar = bar.$bar;\n $bar.finaldx = this.get_snap_position(dx);\n this.hide_popup();\n if (is_resizing_left) {\n if (parent_bar_id === bar.task.id) {\n bar.update_bar_position({\n x: $bar.ox + $bar.finaldx,\n width: $bar.owidth - $bar.finaldx,\n });\n } else {\n bar.update_bar_position({\n x: $bar.ox + $bar.finaldx,\n });\n }\n } else if (is_resizing_right) {\n if (parent_bar_id === bar.task.id) {\n bar.update_bar_position({\n width: $bar.owidth + $bar.finaldx,\n });\n }\n } else if (is_dragging) {\n bar.update_bar_position({ x: $bar.ox + $bar.finaldx });\n }\n }\n });\n });\n\n document.addEventListener('mouseup', (e) => {\n if (this.options.readonly) return;\n if (is_dragging || is_resizing_left || is_resizing_right) {\n bars.forEach((bar) => { if (bar && bar.group) { bar.group.classList.remove('active') } });\n }\n\n is_dragging = false;\n is_resizing_left = false;\n is_resizing_right = false;\n });\n\n $.on(this.$svg, 'mouseup', (e) => {\n if (this.options.readonly) return;\n this.bar_being_dragged = null;\n bars.forEach((bar) => {\n if (bar && bar.$bar) {\n const $bar = bar.$bar;\n if (!$bar.finaldx) return;\n bar.date_changed();\n bar.set_action_completed();\n }\n });\n });\n\n this.bind_bar_progress();\n }\n\n bind_bar_progress() {\n let x_on_start = 0;\n let y_on_start = 0;\n let is_resizing = null;\n let bar = null;\n let $bar_progress = null;\n let $bar = null;\n\n $.on(this.$svg, 'mousedown', '.handle.progress', (e, handle) => {\n if (this.options.readonly) return;\n is_resizing = true;\n x_on_start = e.offsetX;\n y_on_start = e.offsetY;\n\n const $bar_wrapper = $.closest('.bar-wrapper', handle);\n const id = $bar_wrapper.getAttribute('data-id');\n bar = this.get_bar(id);\n\n $bar_progress = bar.$bar_progress;\n $bar = bar.$bar;\n\n $bar_progress.finaldx = 0;\n $bar_progress.owidth = $bar_progress.getWidth();\n $bar_progress.min_dx = -$bar_progress.getWidth();\n $bar_progress.max_dx = $bar.getWidth() - $bar_progress.getWidth();\n });\n\n $.on(this.$svg, 'mousemove', (e) => {\n if (this.options.readonly) return;\n if (!is_resizing) return;\n let dx = e.offsetX - x_on_start;\n let dy = e.offsetY - y_on_start;\n\n if (dx > $bar_progress.max_dx) {\n dx = $bar_progress.max_dx;\n }\n if (dx < $bar_progress.min_dx) {\n dx = $bar_progress.min_dx;\n }\n\n const $handle = bar.$handle_progress;\n $.attr($bar_progress, 'width', $bar_progress.owidth + dx);\n $.attr($handle, 'points', bar.get_progress_polygon_points());\n $bar_progress.finaldx = dx;\n });\n\n $.on(this.$svg, 'mouseup', () => {\n if (this.options.readonly) return;\n is_resizing = false;\n if (!($bar_progress && $bar_progress.finaldx)) return;\n bar.progress_changed();\n bar.set_action_completed();\n });\n }\n\n get_all_dependent_tasks(task_id) {\n let out = [];\n let to_process = [task_id];\n while (to_process.length) {\n const deps = to_process.reduce((acc, curr) => {\n acc = acc.concat(this.dependency_map[curr]);\n return acc;\n }, []);\n\n out = out.concat(deps);\n to_process = deps.filter((d) => !to_process.includes(d));\n }\n\n return out.filter(Boolean);\n }\n\n get_snap_position(dx) {\n let odx = dx,\n rem,\n position;\n\n if (this.view_is(VIEW_MODE.WEEK)) {\n rem = dx % (this.options.column_width / 7);\n position =\n odx -\n rem +\n (rem < this.options.column_width / 14\n ? 0\n : this.options.column_width / 7);\n } else if (this.view_is(VIEW_MODE.MONTH)) {\n rem = dx % (this.options.column_width / 30);\n position =\n odx -\n rem +\n (rem < this.options.column_width / 60\n ? 0\n : this.options.column_width / 30);\n } else {\n rem = dx % this.options.column_width;\n position =\n odx -\n rem +\n (rem < this.options.column_width / 2\n ? 0\n : this.options.column_width);\n }\n return position;\n }\n\n unselect_all() {\n [...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {\n el.classList.remove('active');\n });\n }\n\n view_is(modes) {\n if (typeof modes === 'string') {\n return this.options.view_mode === modes;\n }\n\n if (Array.isArray(modes)) {\n return modes.some((mode) => this.options.view_mode === mode);\n }\n\n return false;\n }\n\n get_task(id) {\n return this.tasks.find((task) => {\n return task.id === id;\n });\n }\n\n get_bar(id) {\n return this.bars.find((bar) => {\n return bar.task.id === id;\n });\n }\n\n show_popup(options) {\n if (!this.popup) {\n this.popup = new Popup(\n this.popup_wrapper,\n this.options.custom_popup_html\n );\n }\n this.popup.show(options);\n }\n\n hide_popup() {\n this.popup && this.popup.hide();\n }\n\n trigger_event(event, args) {\n if (this.options['on_' + event]) {\n this.options['on_' + event].apply(null, args);\n }\n }\n\n /**\n * Gets the oldest starting date from the list of tasks\n *\n * @returns Date\n * @memberof Gantt\n */\n get_oldest_starting_date() {\n return this.tasks\n .map((task) => task._start)\n .reduce((prev_date, cur_date) =>\n cur_date <= prev_date ? cur_date : prev_date\n );\n }\n\n /**\n * Clear all elements from the parent svg element\n *\n * @memberof Gantt\n */\n clear() {\n this.$svg.innerHTML = '';\n }\n}\n\nGantt.VIEW_MODE = VIEW_MODE;\n\nfunction generate_id(task) {\n return task.name + '_' + Math.random().toString(36).slice(2, 12);\n}\n","import React, { useState, useEffect, useContext, useMemo, useRef, createRef } from \"react\";\n\nimport { Utils } from \"common/Utils\";\n\nimport Gantt from \"components/frappe-gantt\";\nimport moment from \"moment\";\n\nexport default function AximGantt ({ tasks, viewMode, readonly, onTasksChange, onClickTask, customClass }) {\n const [_tasks, setTasks] = useState([]);\n const [_viewMode, setViewMode] = useState(null);\n const [_gantt, setGantt] = useState(null);\n\n const _svg = createRef()\n const _target = createRef()\n\n const options = useMemo(() => {\n return {\n readonly: readonly ?? true,\n date_padding: 7,\n popup_trigger: \"mouseover\",\n custom_popup_html: (task) => {\n return `\n \n
${task.name} \n
${task.description} \n
${Utils.formatDate(task.start)} - ${Utils.formatDate(task.end)}
\n
${task.progress}% completed!
\n
Responsibility: ${task.responsibility}
\n
\n
\n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Slider, Switch, Tab, Tabs, TextField, Typography } from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\n\nimport UndoIcon from '@mui/icons-material/Undo';\nimport RedoIcon from '@mui/icons-material/Redo';\nimport ReplayOutlinedIcon from '@mui/icons-material/ReplayOutlined';\nimport SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';\nimport DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';\n\nimport { makeStyles } from '@mui/styles';\n\nimport AximGantt from \"components/AximGantt\";\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\";\n\nimport moment from \"moment\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport BrdDocumentLink from \"components/Button/BrdDocumentLink\";\n\nconst useStyles = makeStyles((theme) => ({\n complete: {\n '& .bar' : {\n stroke: `${theme.palette?.Green?.main} !important`,\n \"stroke-width\": 1,\n },\n '& .bar-progress' : {\n fill: `${theme.palette?.Green?.main} !important`\n },\n },\n atRisk: {\n '& .bar' : {\n stroke: `${theme.palette?.Yellow?.main} !important`,\n \"stroke-width\": 1,\n },\n '& .bar-progress' : {\n fill: `${theme.palette?.Yellow?.main} !important`\n },\n },\n overdue: {\n '& .bar' : {\n stroke: `${theme.palette?.Red?.main} !important`,\n \"stroke-width\": 1,\n },\n '& .bar-progress' : {\n fill: `${theme.palette?.Red?.main} !important`\n },\n },\n onTime: {\n '& .bar-progress' : {\n fill: `${theme.palette?.Grey?.main} !important`\n },\n },\n milestone: {\n '& .milestone' : {\n fill: 'dodgerblue !important'\n },\n '& .bar-label' : {\n fill: 'black !important'\n }\n },\n gantt: {\n '& .today-highlight': {\n fill: `${theme.palette?.primary?.main} !important`,\n },\n '& .gantt-container': {\n \"max-height\": \"calc(100vh - 230px);\",\n },\n }\n}));\n\nfunction EditDialog({ doShow, buttonsDisabled, task, completeEdit }) {\n const [name, setName] = useState(null);\n const [start, setStart] = useState(null);\n const [end, setEnd] = useState(null);\n const [progress, setProgress] = useState(0);\n\n useEffect(() => {\n if (doShow && task) {\n setName(task.name);\n setStart(Utils.convertToDatePicker(task.start));\n setEnd(Utils.convertToDatePicker(task.end));\n setProgress(task.progress);\n }\n },[doShow, task]);\n\n return (\n \n {name} \n \n \n \n \n setName(e.target.value)}\n />\n \n \n \n \n setStart(e.target.value)}\n />\n \n \n setEnd(e.target.value)}\n />\n \n \n \n \n Progress \n setProgress(newValue))}\n valueLabelDisplay=\"auto\"\n />\n \n \n \n \n\n \n completeEdit(true, { id: task.id, name, start, end, progress })}\n color=\"primary\"\n variant=\"outlined\"\n loadingPosition=\"center\"\n loading={buttonsDisabled}\n >\n Ok\n \n completeEdit(false)}\n color=\"primary\"\n variant=\"outlined\"\n disabled={buttonsDisabled}\n >\n Cancel\n \n \n \n )\n}\n\nfunction ContactAXIM() {\n const { feedback } = useContext(PrivateRoutesContext);\n \n const handleContactAXIM = () => {\n feedback.setType('Configuration Inquiries');\n feedback.setSubject('Update Implementation Timeline');\n feedback.setDoShow(true);\n }\n\n return (\n \n To collaborate on this Timeline please contact AXIM \n \n Contact AXIM\n \n \n );\n}\n\nexport default function BrdTimeline () {\n const { companyId, feedback, userInfo } = useContext(PrivateRoutesContext);\n\n const [isInitializing, setIsInitializing] = useState(false)\n\n const [clientEffectiveDate, setClientEffectiveDate] = useState(Utils.convertToDatePicker(moment().add(3, 'months')));\n const [timelineStartDate, setTimelineStartDate] = useState(Utils.convertToDatePicker(moment().add(1, 'months')));\n const [timelineType, setTimelineType] = useState(\"compliance-only\");\n\n const [isLoading, setIsLoading] = useState(false);\n\n const [isEditing, setIsEditing] = useState(false);\n const [timeline, setTimeline] = useState(null);\n const [tasks, setTasks] = useState([]);\n const [currentTasks, setCurrentTasks] = useState([]);\n const [updatedTasks, setUpdatedTasks] = useState([]);\n const [undoStack, setUndoStack] = useState([]);\n const [redoStack, setRedoStack] = useState([]);\n\n const [doShowConfirm, setDoShowConfirm] = useState(false);\n const [confirmCloseAction, setConfirmCloseAction] = useState(null);\n const [confirmTitle, setConfirmTitle] = useState('');\n const [confirmText, setConfirmText] = useState('');\n const [confirmButtonsDisabled, setConfirmButtonsDiabled] = useState(false);\n\n const [doShowTaskDialog, setDoShowTaskDialog] = useState(false);\n const [editTask, setEditTask] = useState(null);\n const [taskDialogDisabled, setTaskDialogDisabled] = useState(false);\n\n const classes = useStyles();\n\n useEffect(() => {\n setTimeline(null);\n\n setIsInitializing(true);\n loadTimeline();\n },[companyId]);\n\n const isEditable = useMemo(() => {\n return userInfo && userInfo.roles && userInfo.roles.some(r => ['ADMIN-SYS-ADMIN','ADMIN-SYS-MANAGER'].includes(r));\n }, [userInfo])\n\n const loadTimeline = (finallyAction) => {\n setIsLoading(true);\n\n apiGet(apiUrls.getBrdTimeline(companyId))\n .then((response) => {\n if (response.data) {\n setTimeline(response.data);\n }\n })\n .finally(() => {\n setIsLoading(false);\n setIsInitializing(false);\n\n if (finallyAction) {\n finallyAction();\n }\n });\n }\n\n const createTimelineTasks = (timeline) => {\n var newTasks = [];\n\n for (var i = 0; i < timeline.brdTimelineMilestones.length; i++) {\n var milestone = timeline.brdTimelineMilestones[i];\n\n newTasks.push(\n {\n name: milestone.title,\n custom_class: `milestone ${classes.milestone}`,\n start: new Date (Math.min.apply(null, milestone.brdTimelineSteps.map(s => new Date(s.targetDate ?? s.dueDate)))),\n end: new Date(Math.max.apply(null, milestone.brdTimelineSteps.map(s => new Date(s.dueDate)))),\n }\n );\n\n for (var j = 0; j < milestone.brdTimelineSteps.length; j++) {\n var step = milestone.brdTimelineSteps[j];\n\n newTasks.push(\n {\n id: step.brdTimelineStepId,\n name: step.title,\n description: step.stepDescription,\n responsibility: step.responsibility,\n start: step.targetDate ?? step.dueDate,\n end: step.dueDate,\n progress: step.completionPercentage,\n dependencies: step.dependencies ? step.dependencies.join(\",\") : null,\n custom_class: step.completionPercentage === 100 ? classes.complete :\n moment(step.dueDate) < moment() ? classes.overdue :\n moment(step.dueDate).add(-2, \"days\") < moment() ? classes.atRisk : classes.onTime\n }\n );\n }\n }\n\n return newTasks;\n }\n\n useEffect(() => {\n var t = [];\n\n if (timeline && timeline.brdTimelineMilestones) {\n t = createTimelineTasks(timeline);\n }\n\n setTasks(t);\n setUndoStack([]);\n setRedoStack([]);\n }, [timeline]);\n\n useEffect(() => {\n setCurrentTasks(tasks.map(a => { return {...a}}));\n },[tasks])\n\n const handleTasksChange = (updatedTasks) => {\n setUpdatedTasks(updatedTasks);\n }\n\n useEffect(() => {\n if (JSON.stringify(currentTasks) != JSON.stringify(updatedTasks)) {\n setUndoStack(current => {\n current.push([...currentTasks].map(a => { return {...a}}))\n\n return current;\n });\n setRedoStack([]);\n setTasks(updatedTasks);\n }\n },[updatedTasks]);\n\n const handleTaskClick = (task) => {\n if (isEditing) {\n setDoShowTaskDialog(true);\n setEditTask(task);\n }\n }\n\n const completeEdit = (doSave, task) => {\n if (doSave) {\n var allTasks = [...tasks];\n\n var t = allTasks.find(a => a.id === task.id);\n\n if (t &&\n (t.name !== task.name ||\n t.start !== task.start ||\n t.end !== task.end ||\n t.progress !== task.progress)) {\n t.name = task.name;\n t.start = task.start;\n t.end = task.end;\n t.progress = task.progress;\n \n setUndoStack(current => {\n current.push(currentTasks.map(a => { return {...a}}))\n\n return current;\n });\n\n setRedoStack([]);\n setTasks(allTasks);\n }\n\n setDoShowTaskDialog(false);\n }\n else {\n setDoShowTaskDialog(false);\n }\n }\n\n const undoChange = () => {\n if (undoStack.length > 0) {\n var copyUndo = [...undoStack];\n var undoTasks = copyUndo.pop();\n setUndoStack(copyUndo);\n\n var copyRedo = [...redoStack];\n copyRedo.push(tasks);\n setRedoStack(copyRedo);\n\n setTasks(undoTasks);\n }\n }\n\n const redoChange = () => {\n if (redoStack.length > 0) {\n var copyRedo = [...redoStack];\n var redoTasks = copyRedo.pop();\n setRedoStack(copyRedo);\n\n var copyUndo = [...undoStack]\n copyUndo.push(tasks);\n setUndoStack(copyUndo)\n\n setTasks(redoTasks)\n }\n }\n\n const promptReset = () => {\n setConfirmCloseAction(() => (result) => reset(result));\n setConfirmTitle('Reset Timeline');\n setConfirmText(`Are you sure you would like to undo all changes the BRD timeline?`);\n setDoShowConfirm(true);\n }\n\n const reset = (isConfirmed) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n loadTimeline(() => hideConfirm(false));\n }\n else {\n hideConfirm();\n }\n }\n\n const promptSave = () => {\n setConfirmCloseAction(() => (result) => save(result));\n setConfirmTitle('Save Timeline');\n setConfirmText(`Are you sure you would like to save the BRD timeline?`);\n setDoShowConfirm(true);\n }\n\n const save = (isConfirmed) => {\n if (isConfirmed) {\n var steps = tasks.filter(t => Utils.isGuid(t.id))\n .map(t => {\n return {\n brdTimelineStepId: t.id,\n targetDate: t.start,\n dueDate: t.end,\n completionPercentage: t.progress,\n title: t.name,\n responsibility: t.responsibility,\n stepDescription: t.description,\n }});\n \n setConfirmButtonsDiabled(true);\n apiPost(apiUrls.postBrdTimeline(companyId), steps)\n .then((response) => {\n loadTimeline(() => hideConfirm());\n })\n .catch((response) => {\n\n })\n .finally(() => {\n\n });\n }\n else {\n hideConfirm();\n }\n }\n\n const promptCreate = () => {\n setConfirmCloseAction(() => (result) => create(result));\n setConfirmTitle('Create Timeline');\n setConfirmText(`Are you sure you would like to create the BRD timeline?`);\n setDoShowConfirm(true);\n }\n\n const create = (isConfirmed) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n apiPost(apiUrls.createBrdTimeline(companyId), { timelineType, clientEffectiveDate, timelineStartDate })\n .then((response) => {\n loadTimeline(() => hideConfirm())\n })\n .catch((response) => {\n\n })\n .finally(() => {\n \n });\n }\n else\n {\n hideConfirm();\n }\n }\n\n const promptRemove = () => {\n setConfirmCloseAction(() => (result) => remove(result));\n setConfirmTitle('Delete Timeline');\n setConfirmText(`Are you sure you would like to delete the BRD timeline?`);\n setDoShowConfirm(true);\n }\n\n const remove = (isConfirmed) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n apiPost(apiUrls.deleteBrdTimeline(companyId))\n .then((response) => {\n setTimeline(null);\n \n setIsInitializing(true);\n loadTimeline(() => hideConfirm(false));\n })\n .catch((response) => {\n\n })\n .finally(() => {\n \n });\n }\n else {\n hideConfirm();\n }\n }\n\n const hideConfirm = () => {\n setDoShowConfirm(false);\n setConfirmButtonsDiabled(false);\n }\n\n const handleConfirmClose = (result) => {\n confirmCloseAction(result);\n }\n\n return (\n <>\n {isInitializing ? \n \n Client Effective Date: {Utils.formatDate(timeline?.clientEffectiveDate)}\n \n \n \n {isEditable ?\n \n setIsEditing(!isEditing)}\n color=\"success\"\n />\n } \n label=\"Enable Editing\"\n />\n : null}\n \n \n {!isEditing ?\n \n \n :\n \n }\n \n \n\n {undoStack.length !== 0 ? \n \n There are unsaved changes. \n \n : null}\n\n {tasks && tasks.length > 0 ?\n \n : isEditable ?\n \n \n Generate a new BRD Timeline\n \n setTimelineType(e.target.value)}\n value={timelineType}\n pairs={[{ value: \"compliance-only\", text: \"Compliance Only\" },\n { value: \"compliance-benefits\", text: \"Compliance and Benefits Administration\" },\n { value: \"prevailing-wage\", text: \"Prevailing Wage Timeline\" }]}\n />\n \n setClientEffectiveDate(e.target.value)}\n />\n \n \n setTimelineStartDate(e.target.value)}\n />\n \n \n \n \n :\n \n \n Implementation Timeline has not been created yet.\n \n \n \n \n \n }\n \n \n \n {\"File Upload\"}\n \n \n {/* SELECT UPLOAD TYPE */}\n\n {showContractList?\n \n Select Contract\n \n setContractId(e.target.value)}\n label=\"Select a contract\"\n >\n Select a contract \n {contractList.map((item, i) => {\n return ({item.contractName} );\n })}\n \n :{contractList[0].contractname} }\n\n \n \n Select Upload Type\n \n setUploadType(e.target.value)}\n label=\"Select Upload Type\"\n >\n Select a value \n {uploadTypes.map((item, i) => {\n return ({item.uploadTypeName} );\n })}\n \n \n\n {/* SELECT PAY PERIOD */}\n {isPayPeriodRequired ? (\n \n \n \n Pay Period\n \n setPayPeriod(e.target.value)}\n label=\"Pay Period\"\n >\n Pay Date Included in File \n Open Pay Dates \n {currentOpenPayPeriods.map((item, i) => {\n return ({moment(item).format('MMMM DD, YYYY')} );\n })}\n Closed Pay Dates \n {closedPayPeriods.map((item, i) => {\n return ({moment(item).format('MMMM DD, YYYY')} );\n })}\n \n \n
\n ) : (\n <>\n )}\n\n {/* UPLOAD FILE */}\n {errorMessage} :<>}\n \n \n \n Cancel\n \n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { useTheme } from '@mui/material/styles';\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { contractorApiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport { PortalNames } from \"common/Portals\";\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport PublishOutlinedIcon from '@mui/icons-material/PublishOutlined';\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport CheckIcon from '@mui/icons-material/Check';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport HistoryIcon from '@mui/icons-material/History';\nimport ContractorFileUploadsDialog from \"components/Content/Modal/ContractorFileUploadsDialog\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n IconButton,\n Box,\n Grid\n} from \"@mui/material\";\n\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport _ from 'lodash';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n {Utils.formatDate(row.original.beginDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Rate\",\n accessor: (cell) => \n viewAllChanges(cell.primeSubContractID)}\n >\n \n \n \n openFileUpload(cell)}\n >\n \n \n \n ),\n disableFilters: true,\n },\n {\n Header: \"Contract Name\",\n accessor: \"contractName\",\n },\n {\n Header: \"Contract Code\",\n accessor: \"contractCode\",\n },\n {\n Header: \"Begin Date\",\n accessor: (cell) => (\n <>\n {Utils.formatDate(cell.beginDate)}\n ),\n },\n {\n Header: \"End Date\",\n accessor: (cell) => (\n <>\n {Utils.formatDate(cell.endDate)}\n ),\n },\n {\n Header: \"Rate\",\n accessor: \"rate\",\n Cell: ({ row }) => (\n viewChanges(cell.primeSubContractID)}\n >\n \n : <>}\n ),\n }\n ];\n\n const childContract = (row, rowProps, visibleColumns) => {\n if (row.row.original.children.length == 0) {\n return <>\n }\n return (\n row.row.original.children.map((c, idx) => {\n return \n \n \n \n \n { viewAllChanges(c.primeSubContractID) }} >\n \n \n \n openFileUpload(c)}\n >\n \n \n \n \n \n {Utils.formatDate(c.beginDate)}\n \n {Utils.formatDate(c.endDate)}\n \n \n viewChanges(c.primeSubContractID)}\n >\n \n : <>}\n \n \n \n })\n )\n }\n\nconst renderChanges = (cell) => {\n if (cell.operation == 'UPDATE') {\n return (\n cell.changes ?\n \n Old New \n {cell.changes.map((obj, i) => {obj.name} {obj.old} {obj.new} \n\n
: <>)\n }\n else if (cell.operation == 'INSERT') {\n return (\n \n New \n {cell.changes.map((obj, i) => {obj.name} {obj.new} \n
)\n }\n else if (cell.operation == 'DELETE') {\n return (\n cell.changes ?\n \n Old \n {cell.changes.map((obj, i) => {obj.name} {obj.old} \n\n
: <>)\n }\n}\n\nconst convertStatus = (status) => {\n switch (status) {\n case 2:\n return 'Acknowledged';\n case 1:\n return 'Pending';\n default:\n return '';\n }\n}\n\nlet changeLogColumnsArray = [\n {\n Header: \"Update Date\",\n accessor: (cell) => (Utils.formatDate(cell.updateDate))\n },\n {\n Header: \"Status\",\n //accessor: (cell) => {cell.statusID} ,\n accessor: \"statusID\",\n Cell: ({ row }) => convertStatus(row.original.statusID),\n },\n {\n Header: \"Change\",\n accessor: (cell) => (\n \n {parseChanges(cell.changes).map(c => { return {c} })} \n \n ),\n },\n];\n\nconst options = {\n filter: true,\n filterType: \"dropdown\",\n responsive: \"standard\",\n viewColumns: true,\n download: false,\n print: false,\n textLabels: {\n body: {\n noMatch:\n fetchedData !== undefined ? (\n \n \n Contract Changes\n \n \n \n \n {((!loadingData && changeLogSinceAck.length == 0) ? \"No Change\" :
)}\n
\n \n {(showAckButton && changeLogSinceAck && changeLogSinceAck.length > 0) ?\n acknowledgeContractChanges(currentContract)}\n disabled={savingData}\n >\n Acknowledge Changes\n : <>}\n \n Close\n \n \n \n\n\n {/* view Contract MODAL */}\n \n \n Contract\n \n \n \n \n \n \n \n \n Close\n \n \n \n\n setFileUploadModal(false)}\n //getUserUploads={getUserUploads}\n availableUploadTypes={availableUploadTypes}\n contractList={contractList} />\n \n);\n}\n\nexport default Contracts;\n","import React,{ useState } from 'react';\nimport DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';\nimport AssignmentIndOutlinedIcon from '@mui/icons-material/AssignmentIndOutlined';\nimport MessageOutlinedIcon from '@mui/icons-material/MessageOutlined';\nimport ContactsOutlinedIcon from '@mui/icons-material/ContactsOutlined';\nimport PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport QueryBuilderOutlinedIcon from '@mui/icons-material/QueryBuilderOutlined';\nimport HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';\nimport PublishOutlinedIcon from '@mui/icons-material/PublishOutlined';\nimport ShowChartOutlinedIcon from '@mui/icons-material/ShowChartOutlined';\nimport PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';\nimport LaunchOutlinedIcon from '@mui/icons-material/LaunchOutlined';\nimport OutboundOutlinedIcon from '@mui/icons-material/OutboundOutlined';\nimport TimelapseOutlinedIcon from '@mui/icons-material/TimelapseOutlined';\nimport MoreTimeOutlinedIcon from '@mui/icons-material/MoreTimeOutlined';\nimport SmsFailedOutlinedIcon from '@mui/icons-material/SmsFailedOutlined';\nimport AssessmentOutlinedIcon from '@mui/icons-material/AssessmentOutlined';\nimport WorkOutlineOutlinedIcon from '@mui/icons-material/WorkOutlineOutlined';\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';\nimport AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';\nimport { ReactComponent as LogIQmindIcon } from 'assets/img/LogIQmindIcon.svg';\nimport { Icon, SvgIcon } from '@mui/material';\nimport { PortalNames } from \"common/Portals\";\nimport { Utils } from 'common/Utils';\n\nexport var SidebarData = {\n getItems: (userInfo) => {\n var sidebarItems = [];\n\n var companySidebar = userInfo?.companyDetails?.sidebarItems;\n if (companySidebar && companySidebar.find(s => s.portal == \"Employer\")) {\n sidebarItems = companySidebar.find(s => s.portal == \"Employer\").items\n .map(i => {\n return {\n title: i.title,\n link: (i.link.startsWith('/') ? `/${PortalNames.Employer.Path}${i.link}` : i.link),\n index: i.index,\n icon: i.isSVGIcon ? {i.icon} ,\n isExternalLink: !i.link.startsWith('/'),\n };\n });\n }\n else {\n \n var isBroker = Utils.isBroker(userInfo);\n var groupType = userInfo?.companyDetails?.groupType ?? \"\";\n\n sidebarItems.push({\n title: \"Dashboard\",\n icon: \n ,\n link: `/${PortalNames.Employer.Path}/logiqmind-reports`\n });\n }\n\n sidebarItems = sidebarItems.sort((a,b) => a.index - b.index);\n\n return sidebarItems;\n }\n}\n","import React, { useState, useContext, useEffect } from \"react\";\nimport Sidebar from \"components/Content/Sidebar/Sidebar\";\nimport Topbar from \"components/Content/Topbar/Topbar\";\nimport Footer from \"components/Content/Footer/Footer\";\nimport SidebarStyles from \"components/Content/Sidebar/Sidebar.module.css\";\nimport { SidebarData } from \"./SidebarData\"\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nexport default function Layout(props) {\n const { userInfo } = useContext(PrivateRoutesContext);\n\n const [sidebarData, setSidebarData] = useState([]);\n\n const toggleClass = () => {\n setActive(!isActive);\n };\n const [isActive, setActive] = useState(false);\n const [title, setTitle] = useState(\"\");\n\n const changeTitle = (newTitle) => {\n setTitle(newTitle);\n }\n\n useEffect(() => {\n setSidebarData(SidebarData.getItems(userInfo));\n }, [userInfo]);\n\n return (\n <>\n \n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { BrowserRouter as Router, Switch, Route, Redirect, useRouteMatch } from \"react-router-dom\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport Logout from \"pages/Auth/Logout\";\nimport EmployeeDashboard from \"area/employer/EmployeeDashboard\";\nimport Dashboard from \"area/employer/Dashboard\";\nimport Messages from \"area/employer/Messages\";\nimport TimeSheets from \"area/employer/TimeSheets\";\nimport HWStatement from \"area/employer/HWStatement\";\nimport Uploads from \"area/employer/Uploads\";\nimport Reports from \"area/employer/Reports\";\nimport Accounting from \"area/employer/Accounting\";\nimport ExcessAllocation from \"area/employer/ExcessAllocation\";\nimport Hourbank from \"area/employer/Hourbank\";\nimport Files from \"area/employer/Files\";\nimport HoursUpload from \"area/employer/HoursUpload\";\nimport Communication from \"area/employer/Communication\";\n\nimport Feedback from \"area/Feedback\";\nimport Settings from \"area/employer/Settings\";\nimport Census from \"area/employer/Census\";\nimport GsgCensus from \"area/employer/GsgCensus\";\nimport SpaceCoLab from \"area/employer/SpaceCoLab\";\nimport BrdTimeline from \"area/employer/BrdTimeline\";\nimport LogiqMindManager from \"components/Pages/LogiqMindManager\";\nimport Contracts from \"area/employer/Contracts\";\nimport Layout from \"./Layout\"\n\nexport default function ERUIRoutes({ portal }) {\n const { modalIsOpen,setModalIsOpen, companyId, setCompany,userInfo } = useContext(PrivateRoutesContext);\n\n useEffect(() => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n console.log(`selected company ${selectedCompany}`)\n if (selectedCompany !== undefined){\n if (selectedCompany != null && selectedCompany != \"\") {\n setCompany(selectedCompany)\n }\n else{\n console.log(\"Prompting for company from ERUIRoutes\")\n setModalIsOpen(true)\n } \n }\n else{\n console.log(\"selectedCompany undefined Prompting for company from ERUIRoutes\")\n setModalIsOpen(true)\n }\n\n document.title = \"AXIM FringeSecure | Employer\";\n }, []);\n\n let { path, url } = useRouteMatch();\n let censusComponent = Census;\n if(userInfo?.companyDetails?.groupType=='GSG'){\n censusComponent = GsgCensus;\n }\n return (\n \n \n \n \n } />\n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Avatar, Box, Button, Card, CardActions, CardContent, IconButton, Stack, Tab, Tabs } from '@mui/material';\nimport { Link } from \"react-router-dom\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';\nimport QueryBuilderOutlinedIcon from '@mui/icons-material/QueryBuilderOutlined';\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport { useTheme } from '@mui/material/styles';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { employeeApiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport { PortalNames } from \"common/Portals\";\n\nimport AximDoughnut from \"components/Content/Graphs/AximDoughnut\";\n\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\n \n function TabPanel(props) {\n const { children, value, index, ...other } = props;\n \n return (\n \n {value === index && (\n \n {children}\n \n )}\n \n );\n }\n\n function a11yProps(index) {\n return {\n id: `vertical-tab-${index}`,\n 'aria-controls': `vertical-tabpanel-${index}`,\n };\n }\n\nfunction Dashboard() {\n const { insuredId } = useContext(PrivateRoutesContext);\n\n const [hasLoadError, setHasLoadError] = useState(false);\n const [hwPeriods, setHwPeriods] = useState(null);\n const [hwDashboardDetails, setHwDashboardDetails] = useState([]);\n const [value, setValue] = useState(0);\n \n const theme = useTheme();\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n\n var hwBenefitDate = hwPeriods[newValue].hwbenefitDate;\n\n if (!hwDashboardDetails[newValue].hasData) {\n var details = [...hwDashboardDetails];\n details[newValue].isLoading = true;\n setHwDashboardDetails(details);\n\n apiGet(employeeApiUrls.getDashboardDataHwBenefit(insuredId, hwBenefitDate)).then((response) => {\n addDashboardDetails(newValue, [...hwDashboardDetails], response.data);\n })\n .catch((response) => {\n var errorDetails = [...hwDashboardDetails];\n errorDetails[newValue].isLoading = true;\n setHwDashboardDetails(errorDetails);\n })\n }\n };\n\n useEffect(() => {\n if (insuredId) {\n apiGet(employeeApiUrls.getDashboardData(insuredId)).then((response) => {\n if (response.data.hwPeriods) {\n setHwPeriods(response.data.hwPeriods);\n\n var details = response.data.hwPeriods.map(p => {\n return {\n isLoading: false,\n hasData: false,\n };\n });\n\n addDashboardDetails(0, details, response.data);\n }\n })\n .catch((response) => {\n setHasLoadError(true);\n })\n }\n },[insuredId])\n\n const addDashboardDetails = (index, details, data) => {\n if (data.contracts) {\n details[index].hwBenefitDate = data.hwBenefitDate;\n details[index].contracts = data.contracts;\n details[index].contributions = data.contributions;\n details[index].hourbanks = data.hourbanks;\n details[index].hasData = true;\n details[index].isLoading = false;\n }\n\n setHwDashboardDetails(details);\n }\n\n const cardLine = (label, value, index, indent) => {\n return (\n \n {label} \n {value} \n \n );\n }\n\n return (\n \n {hwPeriods ?\n \n {hwPeriods.map((d,i) =>\n \n \n {`H&W Benefit Date: ${Utils.formatDate(d.hwbenefitDate)}`}\n \n \n {`H&W Due: ${Utils.formatCurrency(d.sumActualHwdue)}`}\n \n \n {`Total Hours: ${d.sumActualHours}`}\n \n \n } {...a11yProps(i)}/>\n )}\n :\n hasLoadError ? Unable to load Dashboard :\n \n {d.isLoading ? No data :\n \n \n {`H&W Benefit Date: ${Utils.formatDate(d.hwBenefitDate)}`}\n \n \n \n \n \n \n \n \n \n Contracts \n {d.contracts.map((e,i) => \n \n {/* */}\n {cardLine(\"Contract Code:\", e.contractCode, 0)}\n {cardLine(\n <>\n {\"Pay Date:\"}\n \n \n \n \n \n ,\n Utils.formatDate(e.payDate, 1))\n }\n {e.hours.map((f,j) => cardLine(`${f.type}:`, f.hours, 10+j, 2))}\n {cardLine(\"Total Hours:\", e.totalHours, 2)}\n {cardLine(\"H&W Due:\", Utils.formatCurrency(e.hwDue), 3)}\n {/* */}\n \n )}\n \n \n \n \n \n \n {d.hourbanks.map((h,i) => \n \n {h.type} \n {cardLine(\"Beginning:\", Utils.formatCurrency(h.beginningBalance), 0)}\n {cardLine(\"Contribution:\", Utils.formatCurrency(h.contribution), 1)}\n {cardLine(\"Deduction:\", Utils.formatCurrency(h.deduction), 2)}\n {cardLine(\"Ending:\", Utils.formatCurrency(h.endingBalance), 3)}\n \n )}\n \n \n \n }\n \n )}\n \n );\n}\n\nexport default Dashboard;\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { employeeApiUrls } from 'common/ApiUrls';\n\nimport MessageCarousel from \"components/MessageCarousel\";\n\nexport default function Messages() {\n const [messages, setMessages] = useState(null);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n\n useEffect(() => {\n apiGet(employeeApiUrls.getMyMessages).then(\n (response) => {\n setMessages(response.data);\n setHasInitializationError(false);\n }\n )\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n },[]);\n\n return (\n \n {hasInitializationError ? Error Loading Time Sheets :\n timeSheets === null ? No Time Sheets to display :\n \n \n {payDatesDropdown.length > 0 ? (\n setPayDateSelected(e.target.value)}\n value={payDateSelected}\n pairs={payDatesDropdown.map(payDates => ({ value: payDates, text: moment(payDates).format(\"MMMM DD, YYYY\") }))} />\n ) : (\n \"\"\n )}\n \n \n {timeSheets.length > 0 && (\n timeSheets.map((timeSheet, index) => {\n if (payDateSelected !== null && payDateSelected !== timeSheet.payDate) {\n return null;\n }\n\n let contractHours = timeSheet.payPeriodHours.filter(a => a.isContract == 1).map(a => a.hours).reduce((a,b) => a + b, 0);\n\n return (\n \n \n \n \n \n {`Pay Period: ${moment(timeSheet.workStart).format(\"MMMM DD, YYYY\")} To ${moment(timeSheet.workEnd).format(\"MMMM DD, YYYY\")}`}\n \n \n \n \n {timeSheet.payPeriodHours.map((hours, index) =>\n \n {hours.hoursTypeName} \n {hours.hours.toFixed(2)} \n \n )}\n \n Total Contract Hours \n {contractHours.toFixed(2)} \n \n \n\n \n Total Pay Period Hours \n {contractHours.toFixed(2)} \n \n \n )\n })\n )}\n \n \n }\n \n )\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport { Box } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { employeeApiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\n\nimport { Utils } from \"common/Utils\";\nimport moment from \"moment\";\n\nexport default function Hourbank () {\n const [hourbankTypeDropdown, setHourbankTypeDropdown] = useState([]);\n const [hourbankYearDropdown, setHourbankYearDropdown] = useState([]);\n const [hourbankTypeSelected, setHourbankTypeSelected] = useState(null);\n const [hourbankYearSelected, setHourbankYearSelected] = useState(null);\n\n const [payDatesDropdown, setPayDatesDropdown] = useState([]);\n const [payDateSelected, setPayDateSelected] = useState(\"\");\n const [hourbanks, setHourbanks] = useState([]);\n const [hourbankTypes, setHourbankTypes] = useState(null);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n apiGet(employeeApiUrls.getHourbankTypes).then((response) => {\n setHourbankTypes(response.data)\n setHourbankTypeDropdown(response.data.map(hb => hb.hourbankTypeCode).filter(Utils.onlyUnique))\n setHourbankYearDropdown(response.data.map(hb => hb.hwBenefitDate).filter(Utils.onlyUnique))\n\n if (response.data.length > 0) {\n let firstHourType = response.data[0];\n setHourbankTypeSelected(firstHourType.hourbankTypeCode)\n setHourbankYearSelected(firstHourType.hwBenefitDate)\n loadHourbankData(firstHourType.hourbankTypeCode, firstHourType.hwBenefitDate)\n\n }\n else {\n //no hourbank available\n }\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n\n }, [])\n const loadHourbankData = (hourbankType, hourbankYear) => {\n apiGet(employeeApiUrls.getHourbankBalance(hourbankType, hourbankYear + '-01-01')).then((balanceResponse) => {\n console.log(balanceResponse.data, 'hourbank balance');\n let beggingBalance = balanceResponse.data\n apiGet(employeeApiUrls.getHourbanks(hourbankType, hourbankYear + '-01-01', hourbankYear + '-12-31')).then((hourbanksResponse) => {\n console.log(hourbanksResponse.data, ' hourbank data');\n for (let i = 0; i < hourbanksResponse.data.length; i++) {\n hourbanksResponse.data[i].beginningBalance = beggingBalance\n hourbanksResponse.data[i].endingBalance = beggingBalance + hourbanksResponse.data[i].amount + hourbanksResponse.data[i].retroAmount\n beggingBalance = hourbanksResponse.data[i].endingBalance\n }\n setHourbanks(hourbanksResponse.data)\n setIsLoading(false)\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n }\n\n const columns = [\n {\n Header: \"Date\",\n accessor: \"periodName\",\n accessor: (cell) => moment(cell.periodName).format(\"yyyy-MM-DD\"),\n },\n {\n Header: \"Beginning Balance\",\n accessor: \"beginningBalance\",\n accessor: (cell) => Utils.formatCurrency(cell.beginningBalance),\n canFilter: false\n },\n {\n Header: \"Contribution Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.amount),\n canFilter: false\n },\n {\n Header: \"Retro Amount This Year\",\n accessor: (cell) => Utils.formatCurrency(cell.retroAmountInYear),\n },\n {\n Header: \"Retro Amount Prior Year\",\n accessor: (cell) => Utils.formatCurrency((cell.retroAmount - cell.retroAmountInYear)),\n },\n {\n Header: \"Total Retro Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.retroAmount),\n },\n {\n Header: \"Ending Balance\",\n accessor: (cell) => Utils.formatCurrency(cell.endingBalance),\n }\n ];\n\n return (\n \n \n {hourbankTypes === null ? {\n setHourbankTypeSelected(e.target.value)\n loadHourbankData(e.target.value, hourbankYearSelected)\n }}\n value={hourbankTypeSelected}\n pairs={hourbankTypeDropdown.map(ht => ({ value: ht, text: ht }))} />\n\n {\n setHourbankYearSelected(e.target.value) \n loadHourbankData(hourbankTypeSelected, e.target.value)\n }}\n value={hourbankYearSelected}\n pairs={hourbankYearDropdown.map(ht => ({ value: ht, text: ht }))} />\n \n ) : (\n \"\"\n )}\n \n \n {hasInitializationError ? Error Loading Hourbank :\n hourbanks === null ? No hourbank to display :\n \n \n \n \n \n }\n \n \n )\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport { Box } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { employeeApiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\n\nimport { Utils } from \"common/Utils\";\nimport moment from \"moment\";\n\nexport default function ExcessAllocation () {\n const [payoutTypeDropdown, setPayoutTypeDropdown] = useState([]);\n const [payoutYearDropdown, setPayoutYearDropdown] = useState([]);\n const [payoutTypeSelected, setPayoutTypeSelected] = useState(null);\n const [payoutYearSelected, setPayoutYearSelected] = useState(null);\n\n const [payouts, setPayouts] = useState([]);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n apiGet(employeeApiUrls.getPayoutTypes).then((response) => {\n setPayoutTypeDropdown(response.data.map(hb => hb.payoutTypeCode).filter(Utils.onlyUnique))\n setPayoutYearDropdown(response.data.map(hb => hb.year).filter(Utils.onlyUnique))\n\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n\n }, [])\n\n useEffect(() => {\n if (payoutTypeDropdown && payoutTypeDropdown.length > 0) {\n setPayoutTypeSelected(payoutTypeDropdown[0]);\n }\n },[payoutTypeDropdown]);\n\n useEffect(() => {\n if (payoutYearDropdown && payoutYearDropdown.length > 0) {\n setPayoutYearSelected(payoutYearDropdown[0]);\n }\n },[payoutYearDropdown]);\n\n useEffect(() => {\n loadPayoutData(payoutTypeSelected, payoutYearSelected);\n },[payoutTypeSelected, payoutYearSelected]);\n\n const loadPayoutData = () => {\n if (payoutTypeSelected && payoutYearSelected) {\n apiGet(employeeApiUrls.getPayouts(payoutTypeSelected, payoutYearSelected + '-01-01', payoutYearSelected + '-12-31'))\n .then((response) => {\n setPayouts(response.data)\n setIsLoading(false)\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n }\n }\n\n const columns = [\n {\n Header: \"Date\",\n accessor: \"payPeriodName\"\n },\n {\n Header: \"Payout Amount\",\n accessor: \"currentPayout\",\n accessor: (cell) => Utils.formatCurrency(cell.currentPayout),\n canFilter: false\n },\n {\n Header: \"Retro Amount\",\n accessor: \"retroAmount\",\n accessor: (cell) => Utils.formatCurrency(cell.retroAmount),\n canFilter: false\n },\n {\n Header: \"Recoup Amount\",\n accessor: \"recoupAmount\",\n accessor: (cell) => Utils.formatCurrency(cell.recoupAmount),\n canFilter: false\n },\n {\n Header: \"Actual Payout Amount\",\n accessor: \"actualPayAmount\",\n accessor: (cell) => Utils.formatCurrency(cell.actualPayAmount),\n canFilter: false\n }\n ];\n\n return (\n \n \n {payoutTypeDropdown === null ? {\n setPayoutTypeSelected(e.target.value)\n }}\n value={payoutTypeSelected}\n pairs={payoutTypeDropdown.map(ht => ({ value: ht, text: ht }))} />\n\n {\n setPayoutYearSelected(e.target.value)\n }}\n value={payoutYearSelected}\n pairs={payoutYearDropdown.map(ht => ({ value: ht, text: ht }))} />\n \n ) : (\n \"\"\n )}\n \n \n {hasInitializationError ? Error Loading payout :\n payouts === null ? No payout to display :\n \n \n \n \n }\n \n \n )\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport AximDropdown from \"components/Dropdown/AximDropdown\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport { Box } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { employeeApiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport moment from \"moment\";\n\nexport default function Benefits() {\n const { insuredId } = useContext(PrivateRoutesContext);\n\n const [benefitPeriodsDropdown, setBenefitPeriodsDropdown] = useState(null);\n const [benefitPeriodSelected, setBenefitPeriodSelected] = useState(\"\");\n const [benefit, setBenefits] = useState(null);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n const [hasLoadingError, setHasLoadingError] = useState(false);\n\n useEffect(() => {\n apiGet(employeeApiUrls.getBenefitPeriods(insuredId)).then((response) => {\n console.log(response.data);\n\n setBenefitPeriodsDropdown(response.data);\n if (response.data.length > 0) {\n setBenefitPeriodSelected(response.data[0]);\n }\n })\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n },[insuredId])\n\n useEffect(() => {\n setBenefits(null);\n setHasLoadingError(false);\n if (benefitPeriodSelected !== \"\") {\n apiGet(employeeApiUrls.getBenefits(insuredId, benefitPeriodSelected)).then((response) => {\n console.log(response.data);\n setBenefits(response.data);\n })\n .catch(e => {\n console.log(e);\n setHasLoadingError(true);\n });\n }\n },[benefitPeriodSelected])\n\n return (\n \n {hasInitializationError ? Error initializing Employee Benefits Page. :\n <>\n \n {benefitPeriodsDropdown === null ? setBenefitPeriodSelected(e.target.value)}\n value={benefitPeriodSelected}\n pairs={benefitPeriodsDropdown.map(benefitPeriod => ({ value: benefitPeriod, text: moment(benefitPeriod).format(\"MMMM DD, YYYY\") }))} />\n ) : (\n \"\"\n )}\n \n \n {hasLoadingError ? Error Loading Data. :\n benefit === null ? \n }\n \n <>\n {benefit.dental === null ? null :\n \n }\n \n \n <>\n {benefit.vision === null ? null :\n \n }\n \n <>\n {benefit.otherBenefits === null || benefit.otherBenefits.length === 0 ? null :\n \n \n \n \n Other Benefits\n \n {benefit.otherBenefits.map(b => \n <>\n {b.benefitTypeName} \n \n \n }\n \n \n }\n \n \n }\n \n )\n}\n\nfunction BenefitDetails(props) {\n return (\n \n \n \n \n {props.type}\n \n Carrier \n {props.benefit.carrier} \n Plan Type \n {props.benefit.planType} \n Plan Selected \n {props.benefit.planSelected} \n Coverage \n {props.benefit.coverage} \n Total Cost Per Month \n Employer Contribution Per Month \n Employee Net Cost Per Month \n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from \"@mui/material\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls, employeeApiUrls } from \"common/ApiUrls\";\nimport { CloudDownloadOutlined } from \"@mui/icons-material\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\n\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\n\nexport default function Files() {\n const [isLoading, setIsLoading] = useState(true);\n const [files, setFiles] = useState([]);\n const [doShowError, setDoShowError] = useState(false);\n const [errorText, setErrorText] = useState(\"\");\n const [hasInitializationError, setHasInitializationError] = useState(false);\n\n useEffect(() => {\n apiGet(employeeApiUrls.getFiles).then(\n (response) => {\n setFiles(response.data);\n setIsLoading(false);\n }\n )\n .catch(e => {\n console.log(e);\n setHasInitializationError(true);\n });\n },[])\n\n const columns = [\n {\n Header: \"\",\n accessor: \"fileId\",\n Cell: e =>\n \n downloadFile(`${e.value}`, `${e.row.values.fileName}`)} color=\"primary\"> \n ,\n maxWidth: 100,\n disableFilters: true,\n },\n {\n Header: \"File Name\",\n accessor: \"fileName\",\n },\n {\n Header: \"Upload Date\",\n accessor: (cell) => moment(cell.uploadDate).format(\"MM/DD/yyyy hh:mm:ss A\"), // You format date here\n },\n {\n Header: \"Update Date\",\n accessor: (cell) => moment(cell.updateDate).format(\"MM/DD/yyyy hh:mm:ss A\"),\n },\n ];\n\n const downloadFile = (fileId, fileName) => {\n apiGet(apiUrls.downloadFile('', fileId), { responseType: \"blob\" }).then(response => {\n \n const url = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement(\"a\");\n link.href = url;\n link.setAttribute(\"download\", fileName);\n document.body.appendChild(link);\n link.click();\n \n console.log(\"File downloading successfully\");\n }).catch(\n (response) => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n }\n );\n }\n\n \n const handleClose = () => {\n setDoShowError(false);\n }\n\n return (\n \n {hasInitializationError ? Error Loading File List \n : \n \n }\n \n \n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n \n Close\n \n \n \n \n )\n}","import React from 'react';\nimport DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';\nimport MessageOutlinedIcon from '@mui/icons-material/MessageOutlined';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport PersonPinCircleOutlinedIcon from '@mui/icons-material/PersonPinCircleOutlined';\nimport QueryBuilderOutlinedIcon from '@mui/icons-material/QueryBuilderOutlined';\nimport TimelapseOutlinedIcon from '@mui/icons-material/TimelapseOutlined';\nimport OutboundOutlinedIcon from '@mui/icons-material/OutboundOutlined';\nimport HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined';\nimport SmsFailedOutlinedIcon from '@mui/icons-material/SmsFailedOutlined';\nimport { PortalNames } from \"common/Portals\";\n\nexport const SidebarData = {\n getItems: (groupType) => {\n var sidebarItems = \n [\n {\n title: \"Dashboard\",\n icon: \n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Switch, Route, Redirect, useRouteMatch, useLocation } from \"react-router-dom\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { Utils } from \"common/Utils\";\nimport { employeeApiUrls } from \"common/ApiUrls\";\nimport { PortalNames } from \"common/Portals\";\n\nimport Dashboard from 'area/employee/Dashboard';\nimport Messages from 'area/employee/Messages';\nimport TimeSheet from 'area/employee/TimeSheet';\nimport Hourbank from 'area/employee/Hourbank';\nimport ExcessAllocation from 'area/employee/ExcessAllocation';\nimport Benefits from 'area/employee/Benefits';\nimport Reports from 'area/employee/Reports';\nimport Files from 'area/employee/Files';\nimport Feedback from 'area/Feedback';\n\nimport Layout from \"./Layout\"\n\nexport default function EmployeeRoutes({ portal }) {\n const { setInsuredId } = useContext(PrivateRoutesContext);\n let { path } = useRouteMatch();\n \n useEffect(() => {\n getInsuredId();\n \n document.title = \"AXIM FringeSecure | Employee\";\n },[])\n\n const getInsuredId = () => {\n apiGet(employeeApiUrls.getInsuredId).then((response) => {\n if (response.data === Utils.emptyGuid()) { // HACK: For some reason the InsuredId comes back as empty sometimes\n getInsuredId();\n }\n else {\n setInsuredId(response.data);\n }\n })\n }\n\n return (\n \n \n \n \n \n employeeApiUrls.getHWStatement(payDate, endDate)}\n exportUrl={employeeApiUrls.exportReport(\"hwStatement\")}\n />}\n />\n } />\n \n \n )\n}","import React, { useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { Button, Grid, Box } from \"@mui/material\";\nimport Alert from '@mui/material/Alert';\nimport Stack from '@mui/material/Stack';\nimport { Link } from 'react-router-dom'\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { contractorApiUrls } from \"common/ApiUrls\";\nimport SubContractorDashboard from \"components/SubContractorDashboard\";\nexport default function Dashboard() {\n return (\n \n \n );\n}\n\n","import React, { useState, useEffect, useContext } from \"react\";\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { useTheme } from '@mui/material/styles';\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { contractorApiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport { PortalNames } from \"common/Portals\";\nimport moment from \"moment\";\nimport AximTooltip from \"components/AximTooltip\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport PublishOutlinedIcon from '@mui/icons-material/PublishOutlined';\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport CheckIcon from '@mui/icons-material/Check';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport ContractorFileUploadsDialog from \"components/Content/Modal/ContractorFileUploadsDialog\";\nimport HistoryIcon from '@mui/icons-material/History';\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n IconButton,\n Box,\n Grid\n} from \"@mui/material\";\n\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport _ from 'lodash';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n {Utils.formatDate(row.original.beginDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Rate\",\n accessor: (cell) => \n viewAllChanges(cell.primeSubContractID)}\n >\n \n \n \n openFileUpload(cell)}\n >\n \n \n \n ),\n disableFilters: true,\n },\n {\n Header: \"Contract Name\",\n accessor: \"contractName\",\n },\n {\n Header: \"Contract Code\",\n accessor: \"contractCode\",\n },\n {\n Header: \"Begin Date\",\n accessor: (cell) => (\n <>\n {Utils.formatDate(cell.beginDate)}\n ),\n },\n {\n Header: \"End Date\",\n accessor: (cell) => (\n <>\n {Utils.formatDate(cell.endDate)}\n ),\n },\n {\n Header: \"Rate\",\n accessor: \"rate\",\n Cell: ({ row }) => (\n viewChanges(cell.primeSubContractID)}\n >\n \n : <>}\n ),\n }\n ];\n\n const childContract = (row, rowProps, visibleColumns) => {\n if (row.row.original.children.length == 0) {\n return <>\n }\n return (\n row.row.original.children.map((c, idx) => {\n return \n \n \n \n \n { viewAllChanges(c.primeSubContractID) }} >\n \n \n \n openFileUpload(c)}\n >\n \n \n \n \n \n {Utils.formatDate(c.beginDate)}\n \n {Utils.formatDate(c.endDate)}\n \n \n viewChanges(c.primeSubContractID)}\n >\n \n : <>}\n \n \n \n })\n )\n }\n\nconst renderChanges = (cell) => {\n if (cell.operation == 'UPDATE') {\n return (\n cell.changes ?\n \n Old New \n {cell.changes.map((obj, i) => {obj.name} {obj.old} {obj.new} \n\n
: <>)\n }\n else if (cell.operation == 'INSERT') {\n return (\n \n New \n {cell.changes.map((obj, i) => {obj.name} {obj.new} \n
)\n }\n else if (cell.operation == 'DELETE') {\n return (\n cell.changes ?\n \n Old \n {cell.changes.map((obj, i) => {obj.name} {obj.old} \n\n
: <>)\n }\n}\n\nconst convertStatus = (status) => {\n switch (status) {\n case 2:\n return 'Acknowledged';\n case 1:\n return 'Pending';\n default:\n return '';\n }\n}\n\nlet changeLogColumnsArray = [\n {\n Header: \"Update Date\",\n accessor: (cell) => (Utils.formatDate(cell.updateDate))\n },\n {\n Header: \"Status\",\n //accessor: (cell) => {cell.statusID} ,\n accessor: \"statusID\",\n Cell: ({ row }) => convertStatus(row.original.statusID),\n },\n {\n Header: \"Change\",\n accessor: (cell) => (\n \n {parseChanges(cell.changes).map(c => { return {c} })} \n \n ),\n },\n];\n\nconst options = {\n filter: true,\n filterType: \"dropdown\",\n responsive: \"standard\",\n viewColumns: true,\n download: false,\n print: false,\n textLabels: {\n body: {\n noMatch:\n fetchedData !== undefined ? (\n \n \n Contract Changes\n \n \n \n \n {((!loadingData && changeLogSinceAck.length == 0) ? \"No Change\" :
)}\n
\n \n {(showAckButton && changeLogSinceAck && changeLogSinceAck.length > 0) ?\n acknowledgeContractChanges(currentContract)}\n disabled={savingData}\n >\n Acknowledge Changes\n : <>}\n \n Close\n \n \n \n\n\n {/* view Contract MODAL */}\n \n \n Contract\n \n \n \n \n \n \n \n \n Close\n \n \n \n\n setFileUploadModal(false)}\n //getUserUploads={getUserUploads}\n availableUploadTypes={availableUploadTypes}\n contractList={contractList} />\n \n);\n}\n\nexport default Contracts;\n","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport FileUploadTable from \"components/Content/CustomTable/FileUploadTable\";\nimport { Button } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport PublishOutlinedIcon from \"@mui/icons-material/PublishOutlined\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls, contractorApiUrls } from \"common/ApiUrls\";\n\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport ContractorFileUploadsDialog from \"components/Content/Modal/ContractorFileUploadsDialog\";\n\nfunction Uploads(props) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n const [openModal, setOpen] = useState(false);\n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [contractList, setContractList] = useState([]);\n const availableUploadTypes = ['B4A66DD8-120B-4817-B290-2F178C4B0D13'];\n\n // FILE UPLOAD START\n useEffect(() => {\n console.log(`current company ${companyId}`)\n getUserUploads(companyId);\n fetchContracts()\n }, [companyId]);\n\n const getUserUploads = (companyId) => {\n console.log('getting user uploads')\n setIsLoading(true);\n\n apiGet(apiUrls.getUserUploads(companyId)).then(\n (response) => {\n setFetchedData(response.data);\n setIsLoading(false);\n }\n ).catch(\n (response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading the files.\");\n error.setDoShowError(true);\n setIsLoading(false);\n }\n );\n }\n\n const fetchContracts = (event) => {\n console.log('fetching contracts')\n // setCheckingData(true);\n apiGet(contractorApiUrls.getContracts())\n .then((response) => {\n console.log('fetch contracts')\n console.dir(response)\n setContractList(response.data)\n })\n .catch(function (error) {\n // console.log(\"THIS IS ERROR\", error); \n // setColumnsArray([]);\n // setFetchedData([]);\n })\n .then(function () {\n // always executed\n // setCheckingData(false);\n });\n };\n\n return (\n \n
\n
setOpen(true)}\n startIcon={ setOpen(false)}\n getUserUploads={getUserUploads}\n availableUploadTypes={availableUploadTypes}\n contractList={contractList} />\n \n
\n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Switch, Route, Redirect, useRouteMatch, useLocation } from \"react-router-dom\";\nimport Dashboard from \"../Dashboard\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { Utils } from \"common/Utils\";\nimport { contractorApiUrls } from \"common/ApiUrls\";\nimport { PortalNames } from \"common/Portals\";\n\nimport Contracts from 'area/contractor/Contracts';\nimport Uploads from \"area/contractor/Uploads\";\n\nimport Layout from \"./Layout\"\n\nexport default function ContractorRoutes({ portal }) {\n const { modalIsOpen,setModalIsOpen, companyId,setInsuredId, setCompany,userInfo } = useContext(PrivateRoutesContext);\n let { path } = useRouteMatch();\n\n useEffect(() => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n console.log(`selected company ${selectedCompany}`)\n if (selectedCompany !== undefined){\n if (selectedCompany != null && selectedCompany != \"\") {\n setCompany(selectedCompany)\n }\n else{\n console.log(\"Prompting for company from ERUIRoutes\")\n setModalIsOpen(true)\n } \n }\n else{\n console.log(\"selectedCompany undefined Prompting for company from ContractorRoutes\")\n setModalIsOpen(true)\n }\n \n document.title = \"AXIM FringeSecure | Contractor\";\n }, []);\n\n return (\n \n \n \n \n \n \n )\n}","import React, { useContext, useEffect, useMemo, useState, useRef } from \"react\";\n\nimport {\n Avatar,\n Box,\n Button,\n Card,\n Paper,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n InputLabel,\n Menu,\n MenuItem,\n TextField,\n Typography,\n List,\n ListItemButton,\n ListItemText,\n Chip,\n FormControl,\n Select,\n OutlinedInput,\n Autocomplete,\n Checkbox\n} from \"@mui/material\";\nimport CircleIcon from '@mui/icons-material/Circle';\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { Utils } from 'common/Utils';\nimport { PortalNames } from \"common/Portals\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport SortBox from \"components/Filters/SortBox\";\nimport _ from \"lodash\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { ap3ApiUrls, primeApiUrls } from \"common/ApiUrls\";\nimport {\n Chart as ChartJS, ArcElement, Tooltip, Legend,\n CategoryScale,\n LinearScale,\n BarElement,\n Title\n} from 'chart.js';\nimport {\n Doughnut, Bar,\n getElementAtEvent,\n getDatasetAtEvent\n} from 'react-chartjs-2';\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\n\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport dayjs from 'dayjs';\nimport { Margin } from \"@mui/icons-material\";\nimport { set } from \"date-fns\";\n\nChartJS.register(ArcElement, Tooltip, Legend,\n CategoryScale,\n LinearScale,\n BarElement,\n Title);\n\nexport const barChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n minBarLength: 0,\n legend: {\n position: 'bottom',\n },\n scale: {\n pointStyle: {\n fontStyle: \"bold\",\n }\n }\n\n};\n\n\nconst availableComplianceList = ['Provider Deposits', 'Carrier Disbursements', 'ACA Compliance', 'Cash in lieu', 'Contract Updates', 'Hours Management'];\nconst barChartlabels = ['Provider Deposits', 'Carrier Disbursements', 'ACA Compliance', 'Cash in lieu', 'Contract Updates'];\nexport const initBarChartData = {\n labels: barChartlabels,\n datasets: []\n};\nconst ITEM_HEIGHT = 48;\nconst ITEM_PADDING_TOP = 8;\nconst MenuProps = {\n PaperProps: {\n style: {\n maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,\n width: 250,\n },\n },\n}\nexport default function Dashboard() {\n\n const failColor = \"rgba(200, 0, 0, 0.85)\"\n const failHoverColor = \"rgba(200, 0, 0, 0.65)\"\n const warningColor = \"rgba(255,103,0, 0.85)\"\n const warningHoverColor = \"rgba(255,103,0, 0.65)\"\n const passColor = \"rgba(0, 128, 0, 0.85)\"\n const passHoverColor = \"rgba(0, 128, 0, 0.65)\"\n const [isLoading, setIsLoading] = useState(false);\n const [showChart, setShowChart] = useState(true);\n const [contracts, setContracts] = useState([]);\n const [searchFilter, setSearchFilter] = useState(\"\");\n const [filterSelected, setFilterSelected] = useState(null);\n const [searchContractor, setSearchContractor] = useState(\"\");\n const [statusFilter, setStatusFilter] = useState(\"\");\n const [complianceFilter, setComplianceFilter] = useState(barChartlabels);\n const [highLightedComplianceType, setHighLightedComplianceType] = useState('');\n const [companyFilter, setCompanyFilter] = useState({ label: 'ALL', id: 'ALL' });\n const [sortValue, setSortValue] = useState(\"name\");\n const [colorFilter, setColorFilter] = useState(\"none\");\n const [failedCompanies, setFailedCompanies] = useState([]);\n const [passCompanies, setPassCompanies] = useState([]);\n const [companies, setCompanies] = useState([]);\n const [openRed, setOpenRed] = useState(true);\n const [openGreen, setOpenGreen] = useState(false);\n const [selectedCompanyList, setSelectedCompanyList] = useState([])\n const [anchorEl, setAnchorEl] = useState(null)\n const [beginDate, setBeginDate] = useState(dayjs().set('date', 1))\n const [endDate, setEndDate] = useState(dayjs().endOf('month'))\n const [barChartData, setBarChartData] = useState(initBarChartData);\n const { userInfo, setUserInfo, setCompany, setCurrentPortal } = useContext(PrivateRoutesContext);\n const [availableCompanyList, setAvailableCompanyList] = useState([]);\n const [availableCompanyIdList, setAvailableCompanyIdList] = useState([]);\n const [currentElement, setCurrentElement] = useState();\n const [openBeginDate, setOpenBeginDate] = useState(false);\n const [openEndDate, setOpenEndDate] = useState(false);\n const [beginDateError, setBeginDateError] = useState(null);\n const [endDateError, setEndDateError] = useState(null);\n const [chartPassFaildata, setChartPassFaildata] = useState({\n labels: ['Fail', 'Pass'],\n datasets: [\n {\n label: '# of contractors',\n data: [0, 0],\n backgroundColor: [\n 'rgba(255, 99, 132, 0.2)',\n 'rgba(60, 179, 113, 0.2)',\n ],\n borderColor: [\n 'rgba(255, 99, 132, 1)',\n 'rgba(60, 179, 113, 1)',\n ],\n borderWidth: 1,\n },\n ],\n });\n const openMenu = Boolean(anchorEl);\n const chartRef = useRef();\n\n\n const handleMenuClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n const handleMenuClose = () => {\n setAnchorEl(null);\n };\n const handleFilterChange = (selectedFilter) => {\n console.log('handleFilterChange')\n console.log(selectedFilter)\n setFilterSelected(selectedFilter)\n setOpenGreen(true)\n setFailedCompanies(failedCompaniesList)\n // console.log('fail filter')\n\n };\n\n const colors = [\n { name: 'Red', value: 'rgba(200, 0, 0, 0.85)' },\n { name: 'Yellow', value: 'rgba(255,103,0, 0.85)' },\n { name: 'Green', value: 'rgba(0, 128, 0, 0.85)' }\n ]\n\n const getContractDashboard = (companyId, start, end) => {\n // setIsLoading(true);\n // console.log('getContracts')\n // console.log(primeApiUrls.getContractorDashboard(start, end))\n apiGet(primeApiUrls.getContractorDashboard(companyId, start, end))\n .then((response) => {\n console.log('dashboard contracts', response.data);\n setContracts(response.data);\n const uniqueCompanyId = [...new Set(response.data.map(r => r.companyId))];\n // if (uniqueCompanyId.length > 0) {\n // setCompany(uniqueCompanyId[0])\n // }\n\n console.log('fail pass')\n const failedList = response.data.filter(({ status }) => status.value < 1);\n const passList = response.data.filter(({ status }) => status.value == 1);\n const graphData = complianceFilter.map(b => failedList.filter(f => f.compliances.filter(c => c.complianceType == b && (c.status == \"failed\" || c.status == \"missing\")).length > 0).length);\n setChartPassFaildata({\n labels: [`Fail: ${failedList.length}`, `Pass: ${passList.length}`],\n datasets: [\n {\n label: '# of contracts',\n data: [failedList.length, passList.length],\n backgroundColor: [\n 'rgba(200, 0, 0, 1)',\n 'rgba(0, 128, 0, 1)'\n ],\n hoverBackgroundColor: [\n 'rgba(220, 0, 0, 1)',\n 'rgba(0, 148, 0, 1)'\n ],\n borderWidth: 1,\n },\n ],\n })\n\n\n const totalContracts = failedList.length + passList.length;\n console.log('graphData')\n const graphColors = graphData.map(x => {\n if ((x / totalContracts) > 0.75) {\n return 'rgba(200, 0, 0, 1)'\n }\n else if ((x / totalContracts) > 0.5) {\n return 'rgba(255,103,0, 1)'\n }\n else {\n return 'rgba(0, 128, 0, 1)'\n }\n })\n const graphRed = graphData.map(x => {\n if ((x / totalContracts) > 0.75) {\n return x\n }\n return 0\n })\n console.log(graphRed, 'graph red')\n const graphYellow = graphData.map(x => {\n const per = (x / totalContracts);\n if (per <= 0.75) {\n return x\n }\n return 0\n })\n const graphGreen = graphData.map(x => {\n return totalContracts - x\n })\n console.log('before setBarChartData')\n setBarChartData({\n labels: complianceFilter,\n datasets: [{\n label: 'Failed over 75%',\n scales: {\n y: {\n display: false // Hide Y axis labels\n },\n x: {\n display: false // Hide X axis labels\n }\n },\n legend: {\n display: true\n },\n backgroundColor: failColor,\n hoverBackgroundColor: failHoverColor,\n data: graphRed,\n stack: 'Stack 0',\n }, {\n label: 'Failed less than 75%',\n legend: {\n display: true\n },\n backgroundColor: warningColor,\n hoverBackgroundColor: warningHoverColor,\n data: graphYellow,\n stack: 'Stack 0',\n }, {\n label: 'Pass',\n legend: {\n display: true\n },\n backgroundColor: passColor,\n hoverBackgroundColor: passHoverColor,\n data: graphGreen,\n stack: 'Stack 0',\n }]\n })\n\n let element = currentElement\n if (element.length > 0) {\n\n let foundColor = colors.find(c => c.value == barChartData.datasets[element[0].datasetIndex].backgroundColor)\n if (foundColor) {\n setColorFilter(foundColor)\n }\n let complianceType = complianceFilter[element[0].index]\n if (barChartData.datasets[element[0].datasetIndex].backgroundColor == failColor || barChartData.datasets[element[0].datasetIndex].backgroundColor == warningColor) {\n setSelectedCompanyList(response.data.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n else {\n setSelectedCompanyList(response.data.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n }\n })\n .catch(e => {\n //console.log(e);\n //setHasInitializationError(true);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n\n const statuses = useMemo(() => {\n var groups = [];\n\n if (companies && companies.length > 0) {\n groups = Utils.groupByArrays(companies, (c) => c.status.description)\n .map(g => g.key);\n }\n\n return groups;\n }, [companies])\n\n useEffect(() => {\n getAvailableCompanyList();\n getCompanies(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'));\n }, []);\n\n const failedCompaniesList = useMemo(() => {\n var regEx = new RegExp(Utils.escapeRegExp(searchContractor), 'i');\n return companies.filter(({ name, status }) => name.match(regEx) && status.value < 1)\n })\n\n const passCompaniesList = useMemo(() => {\n var regEx = new RegExp(Utils.escapeRegExp(searchContractor), 'i');\n return companies.filter(({ name, status }) => name.match(regEx) && status.value == 1)\n })\n\n const getAvailableCompanyList = () => {\n apiGet(ap3ApiUrls.getDashboard)\n .then((response) => {\n setAvailableCompanyList(response.data);\n setAvailableCompanyIdList(response.data.map(m => m.id))\n })\n .catch(e => {\n //console.log(e);\n //setHasInitializationError(true);\n })\n .finally(() => {\n });\n }\n\n const getCompanies = (start, end) => {\n console.log('getCompanies ')\n setIsLoading(true);\n apiGet(primeApiUrls.getDashboard(start, end))\n .then((response) => {\n // console.log('getCompanies dashboard companies', response.data);\n setCompanies(response.data);\n const failedList = response.data.filter(({ status }) => status.value < 1);\n setFailedCompanies(failedList)\n const passList = response.data.filter(({ status }) => status.value == 1);\n setPassCompanies(passList)\n const graphData = complianceFilter.map(b => failedList.filter(f => f.compliances.filter(c => c.complianceType == b && (c.status == \"failed\" || c.status == \"missing\")).length > 0).length);\n console.log('graphData 1', graphData);\n setChartPassFaildata({\n labels: [`Fail: ${failedList.length}`, `Pass: ${passList.length}`],\n datasets: [\n {\n label: '# of contractors',\n data: [failedList.length, passList.length],\n backgroundColor: [\n 'rgba(200, 0, 0, 0.85)',\n 'rgba(0, 128, 0, 0.85)'\n ],\n hoverBackgroundColor: [\n 'rgba(220, 0, 0, 0.65)',\n 'rgba(0, 128, 0, 0.65)'\n ],\n borderWidth: 1,\n },\n ],\n })\n\n const totalContractors = failedList.length + passList.length;\n console.log('graphData')\n const graphColors = graphData.map(x => {\n if ((x / totalContractors) > 0.75) {\n return 'rgba(200, 0, 0, 0.85)'\n }\n else if ((x / totalContractors) > 0.5) {\n return 'rgba(255,103,0, 0.85)'\n }\n else {\n return 'rgba(0, 128, 0, 0.85)'\n }\n })\n const graphRed = graphData.map(x => {\n if ((x / totalContractors) > 0.75) {\n return x\n }\n return 0\n })\n const graphYellow = graphData.map(x => {\n const per = (x / totalContractors);\n if (per <= 0.75) {\n return x\n }\n return 0\n })\n const graphGreen = graphData.map(x => {\n return totalContractors - x\n })\n console.log('before setBarChartData')\n setBarChartData({\n labels: complianceFilter,\n datasets: [{\n label: 'Failed over 75%',\n scales: {\n y: {\n display: false // Hide Y axis labels\n },\n x: {\n display: false // Hide X axis labels\n }\n },\n legend: {\n display: true\n },\n backgroundColor: failColor,\n hoverBorderWidth: 1,\n hoverBackgroundColor: failHoverColor,\n data: graphRed,\n stack: 'Stack 0',\n }, {\n label: 'Failed less than 75%',\n legend: {\n display: false\n },\n backgroundColor: warningColor,\n hoverBorderWidth: 1,\n hoverBackgroundColor: warningHoverColor,\n data: graphYellow,\n stack: 'Stack 0',\n }, {\n label: 'Pass',\n legend: {\n display: false\n },\n backgroundColor: passColor,\n hoverBorderWidth: 1,\n hoverBackgroundColor: passHoverColor,\n data: graphGreen,\n stack: 'Stack 0',\n }]\n })\n\n let element = currentElement\n if (element != null && element.length > 0) {\n\n let foundColor = colors.find(c => c.value == barChartData.datasets[element[0].datasetIndex].backgroundColor)\n if (foundColor) {\n setColorFilter(foundColor)\n }\n let complianceType = complianceFilter[element[0].index]\n if (barChartData.datasets[element[0].datasetIndex].backgroundColor == failColor || barChartData.datasets[element[0].datasetIndex].backgroundColor == warningColor) {\n console.log('fail list', complianceType)\n setSelectedCompanyList(response.data.filter(f => f.status.value < 1 && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n else {\n console.log('pass list', complianceType)\n setSelectedCompanyList(response.data.filter(f => f.status.value > 0 && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n }\n\n })\n .catch(e => {\n //console.log(e);\n //setHasInitializationError(true);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n const showContractor = (c) => {\n console.log(`show contractor`)\n console.dir(c)\n\n apiGet(primeApiUrls.getContractor(c.id))\n .then((response) => {\n console.log('dashboard companies', response.data);\n setCompanies(response.data);\n setShowChart(false);\n })\n .catch(e => {\n //console.log(e);\n //setHasInitializationError(true);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n const companyFilterUpdate = useMemo(() => {\n console.log('companyFilterUpdate')\n var comp = companies;\n if (companyFilter) {\n console.log('companyFilter', companyFilter)\n console.log('show contractor dashboard')\n if (companyFilter.id != 'ALL') {\n getContractDashboard(companyFilter.id, beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n }\n else {\n console.log('no companyFilter', companyFilter)\n setCompanyFilter({ label: 'ALL', id: 'ALL' })\n console.log('back to main dashboard')\n getCompanies(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'));\n }\n setComplianceFilter(barChartlabels)\n setColorFilter(\"none\")\n\n return comp;\n }, [companyFilter])\n\n const colorFilterUpdate = useMemo(() => {\n console.log('colorFilterUpdate')\n\n let status = \"\"\n if (colorFilter) {\n console.log('colorFilter', colorFilter)\n }\n if (colorFilter.name == \"Green\") {\n status = \"pass\"\n }\n else if (colorFilter.name == \"Red\") {\n status = \"failed\"\n }\n else if (colorFilter.name == \"Yellow\") {\n status = \"failed\"\n }\n\n if (status == \"failed\") {\n if (companyFilter && companyFilter.id != 'ALL') {\n //this sets at the contract level\n setSelectedCompanyList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n else {\n //this sets at the company level\n setSelectedCompanyList(companies.filter(f => f.status.value < 1 && (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n }\n if (status == \"pass\") {\n if (companyFilter && companyFilter.id != 'ALL') {\n setSelectedCompanyList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\") && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n else {\n setSelectedCompanyList(companies.filter(f => f.status.value > 0 && (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")\n && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n }\n\n if (status == \"\") {\n if (companyFilter && companyFilter.id != 'ALL') {\n setSelectedCompanyList(contracts.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")))))\n }\n else {\n setSelectedCompanyList(companies.filter(f => (f.compliances.filter(c => (c.complianceType == highLightedComplianceType || highLightedComplianceType == null || highLightedComplianceType == \"\")))))\n }\n }\n // let element = currentElement\n // console.log('element',element)\n // element[0].element.options.backgroundColor=\"black\"\n }, [colorFilter])\n\n const complianceFilterUpdate = useMemo(() => {\n console.log('complianceFilterUpdate')\n var comp = companies;\n\n if (statusFilter) {\n console.log('statusFilter', statusFilter)\n }\n\n if (colorFilter) {\n console.log('colorFilter', colorFilter)\n }\n\n if (complianceFilter) {\n console.log('complianceFilter', complianceFilter)\n }\n\n var comp = companies;\n if (companyFilter) {\n console.log('companyFilter', companyFilter)\n console.log('show contractor dashboard')\n if (companyFilter.id != 'ALL') {\n getContractDashboard(companyFilter.id, beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n else {\n getCompanies(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n }\n else {\n console.log('no companyFilter', companyFilter)\n setCompanyFilter({ label: 'ALL', id: 'ALL' })\n console.log('back to main dashboard')\n getCompanies(beginDate?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n return comp;\n }, [complianceFilter])\n\n\n const highLightedComplianceTypeUpdate = useMemo(() => {\n console.log('highLightedComplianceType')\n if (highLightedComplianceType == '') {\n setColorFilter(\"none\")\n }\n }, [highLightedComplianceType])\n\n const isNotFirstDay = (date) => {\n return date.date() != 1;\n }\n\n const isNotLastDay = (date) => {\n return date.date() != date.endOf('month').date();\n }\n\n const handleBeginDateChange = _.debounce((val) => {\n console.log(' handleBeginDateChange', val)\n setBeginDate(val)\n if (endDate > val) {\n setBeginDateError(null)\n setEndDateError(null)\n getCompanies(val?.format('YYYY-MM-DD'), endDate?.format('YYYY-MM-DD'))\n }\n else {\n setBeginDateError({ message: 'Begin date must be less than end date' })\n setEndDateError({ message: 'End date must be greater than begin date' })\n }\n }, 1000);\n\n const handleEndDateChange = _.debounce((val) => {\n console.log(' handleEndDateChange', val)\n setEndDate(val)\n if (beginDate < val) {\n setBeginDateError(null)\n setEndDateError(null)\n getCompanies(beginDate?.format('YYYY-MM-DD'), val?.format('YYYY-MM-DD'))\n }\n else {\n setBeginDateError({ message: 'Begin date must be less than end date' })\n setEndDateError({ message: 'End date must be greater than begin date' })\n }\n }, 1000);\n\n const goToEmployerPortal = (id) => {\n console.log(id)\n if (id) {\n setCompany(id);\n setCurrentPortal(PortalNames.Employer.Name);\n window.location.href = `/${PortalNames.Employer.Path}/dashboard`;\n }\n }\n const handleClickChart = (event) => {\n\n let element = getElementAtEvent(chartRef.current, event);\n setCurrentElement(element);\n if (element.length > 0) {\n console.log('element', element)\n\n let complianceType = complianceFilter[element[0].index]\n setHighLightedComplianceType(complianceType)\n //setComplianceFilter(complianceType)\n console.log(colors)\n console.log('color', barChartData.datasets[element[0].datasetIndex].backgroundColor)\n\n let foundColor = colors.find(c => c.value == barChartData.datasets[element[0].datasetIndex].backgroundColor)\n if (foundColor) {\n setColorFilter(foundColor)\n }\n if (barChartData.datasets[element[0].datasetIndex].backgroundColor == failColor || barChartData.datasets[element[0].datasetIndex].backgroundColor == warningColor) {\n console.log('fail list', complianceType)\n\n if (companyFilter && companyFilter.id != 'ALL') {\n //this sets at the contract level\n setSelectedCompanyList(contracts.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n else {\n //this sets at the company level\n setSelectedCompanyList(companies.filter(f => f.status.value < 1 && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length > 0)))\n }\n }\n else {\n console.log('pass list', complianceType)\n if (companyFilter && companyFilter.id != 'ALL') {\n setSelectedCompanyList(contracts.filter(f => (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n else {\n setSelectedCompanyList(companies.filter(f => f.status.value > 0 && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"pass\")).length > 0)\n && (f.compliances.filter(c => c.complianceType == complianceType && (c.status == \"failed\" || c.status == \"missing\")).length == 0)))\n }\n }\n\n }\n }\n\n const subContractListColumnsArray = [\n {\n Header: \"Subcontractor Name\",\n accessor: (cell) => (\n \n {(availableCompanyIdList.includes(cell.id) ? { goToEmployerPortal(cell.id) }} variant=\"outlined\">{cell.name} : <>{cell.name})}\n\n \n ),\n },\n {\n Header: \"Compliance Status\",\n accessor: \"compliances\",\n Cell: ({ row }) => (\n \n \n {/* {(row.original?.compliances?.map((c, idx) => {c.complianceType} {dayjs(c.beginDate).format('YYYY-MM-DD')} - {dayjs(c.endDate).format('YYYY-MM-DD')} {(c.status == 'missing' ? ' is missing' : `${c.status} ${c.notes}`)} ))} */}\n {(row.original?.compliances?.map((c, idx) => {c.complianceType} {(c.status == 'missing' ? ' is missing' : `${c.status} ${c.notes}`)} [{Utils.formatDate(c.beginDate)} - {Utils.formatDate(c.endDate)}] ))}\n \n \n )\n }\n ];\n\n const ColorFilterBox = ({ colors, colorFilter, setColorFilter }) => {\n return (\n <>\n\n \n \n Filter By Color:\n \n \n setColorFilter(\"none\")}\n color=\"Grey\"\n >\n None\n \n\n {colors.map((value) => {\n return (\n setColorFilter(value)}\n color={value.name}\n >\n {value.name}\n \n )\n })\n }\n \n \n \n )\n }\n\n const CompanyFilterBox = ({ companies, companyFilter, setCompanyFilter }) => {\n return (\n <>\n { return { label: value.name, id: value.id } }))}\n isOptionEqualToValue={(option, value) => option.id === value.id}\n // sx={{ width: 300 }}\n value={companyFilter}\n autoHighlight\n getOptionLabel={(option) => option.label}\n onChange={(e, val) => setCompanyFilter(val)}\n // onInputChange={(event, newInputValue, reason) => {\n // console.log('onInputChange')\n // console.log(reason)\n // if (reason === 'clear') {\n // console.log('set to all ')\n // setCompanyFilter({ label: 'ALL', id: 'ALL' })\n // return\n // } \n // // else if (reason != 'reset') {\n // // setCompanyFilter(newInputValue)\n // // }\n // }}\n renderInput={(params) => \n \n \n \n \n \n );\n }\n return (\n \n \n \n \n \n \n
\n \n \n \n \n setOpenBeginDate(false)}\n id=\"beginDate\"\n name=\"beginDate\"\n minDate={dayjs('01/01/1900')}\n value={beginDate}\n onAccept={(newValue) => handleBeginDateChange(newValue)}\n shouldDisableDate={isNotFirstDay}\n label=\"Compliance Begin Date\"\n slotProps={{\n textField: {\n readOnly: true,\n onClick: () => setOpenBeginDate(true),\n error: !!beginDateError,\n helperText: beginDateError?.message,\n },\n layout: {\n sx: {\n '.MuiPickersDay-root:not(.Mui-disabled):not(.Mui-selected)': {\n color: '#000',\n borderRadius: 2,\n borderWidth: 1,\n borderColor: '#2196f3',\n border: '1px solid',\n backgroundColor: '#bbdefb',\n }\n }\n }\n }}\n />\n \n \n \n\n \n setOpenEndDate(false)}\n id=\"endDate\"\n name=\"endDate\"\n minDate={beginDate}\n value={endDate}\n onChange={(newValue) => handleEndDateChange(newValue)}\n shouldDisableDate={isNotLastDay}\n label=\"Compliance End Date\"\n slotProps={{\n textField: {\n readOnly: true,\n onClick: () => setOpenEndDate(true),\n error: !!endDateError,\n helperText: endDateError?.message,\n },\n layout: {\n sx: {\n '.MuiPickersDay-root:not(.Mui-disabled):not(.Mui-selected)': {\n color: '#000',\n borderRadius: 2,\n borderWidth: 1,\n borderColor: '#2196f3',\n border: '1px solid',\n backgroundColor: '#bbdefb',\n }\n }\n }\n }}\n />\n \n \n\n \n\n \n \n \n
\n \n {showChart ?\n \n \n \n \n \n \n \n \n \n : <>}\n {selectedCompanyList.length > 0 ?\n \n \n Total Records: {selectedCompanyList.length} }>\n : <>}\n \n \n \n );\n}\n\nfunction BasicSearch({ searchFilter, setSearchFilter }) {\n return (\n <>\n {/* hack alignment */}\n setSearchFilter(e.target.value)}\n />\n \n )\n}\n\nconst StatusFilterBox = ({ statuses, statusFilter, setStatusFilter }) => {\n return (\n setStatusFilter(e.target.value)}\n label=\"Status Filter\"\n >\n \n All \n \n {statuses.map((value, index) => {value} )}\n \n )\n}\nconst translateColor = (colorFilter) => {\n if (colorFilter?.name) {\n switch (colorFilter?.name) {\n case \"Green\":\n return \"success\";\n case \"Yellow\":\n return \"warning\";\n case \"Red\":\n return \"error\";\n default:\n return \"\";\n }\n }\n return \"\";\n}\nconst ComplianceFilterBox = ({ compliances, complianceFilter, setComplianceFilter, highLightedComplianceType, setHighLightedComplianceType, colorFilter }) => {\n return (\n \n \n {highLightedComplianceType == '' ? Compliance Filter : { setHighLightedComplianceType('') }}\n />}\n \n {\n const {\n target: { value },\n } = event;\n setComplianceFilter(\n // On autofill we get a stringified value.\n typeof value === 'string' ? value.split(',') : value,\n )\n }}\n input={\n -1)} />\n )}\n \n \n )\n}\n\nfunction CompanySummary(props) {\n const { setCompany, setCurrentPortal } = useContext(PrivateRoutesContext);\n let companyInfo = props.company;\n\n const handleClick = (e) => {\n if (companyInfo.id) {\n setCompany(companyInfo.id);\n setCurrentPortal(PortalNames.Employer.Name);\n window.location.href = `/${PortalNames.Employer.Path}/dashboard`;\n }\n }\n\n return (\n \n \n \n Status: {companyInfo.status.description} \n {\n (companyInfo.notes ?\n companyInfo.notes.map((c, idx) => {\n return \n {c}\n \n }) : <>)\n }\n \n \n {/* View Employer Portal */}\n \n \n );\n}\n\nfunction CompanyHeader(props) {\n const [avatar, setAvatar] = useState(\"\");\n\n useEffect(() => {\n let companyInfo = props.company;\n let a = null;\n if (companyInfo.image && companyInfo.image.data !== null) {\n a = \n \n )\n}\n","import React, { useState, useMemo, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport MUIDataTable from \"components/mui-datatable\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n TextField,\n Typography,\n InputAdornment,\n IconButton,\n Checkbox\n} from \"@mui/material\";\n\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { Box } from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport moment from \"moment\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport { useForm, Controller } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return handleEditUser(cell)} >\n ),\n disableFilters: true,\n },\n {\n Header: \"First Name\",\n accessor: \"firstName\",\n },\n {\n Header: \"Last Name\",\n accessor: \"lastName\",\n },\n {\n Header: \"Login Name\",\n accessor: \"userName\",\n }\n ];\n\n const contractColumns = [\n {\n Header: \"Action\",\n accessor: (cell) => (<>\n {\n let newList = userContractList.map(c =>\n c.contractID === cell.contractID\n ? { ...c, checked: !cell.checked }\n : c\n )\n setUserContractList(newList)\n }}\n >),\n disableFilters: true,\n },\n {\n Header: \"Contract Name\",\n accessor: \"contractName\",\n }\n ];\n return (\n <>\n {/* Add Contract MODAL */}\n \n \n {(contractUser.userID == Utils.emptyGuid() ? \"Add Contract User\" : \"Edit Contract User\")}\n \n \n \n \n handleUserChange('firstName', e.target.value)}\n error={userErrors.firstName ? true : false}\n helperText={userErrors.firstName?.message}\n />\n handleUserChange('lastName', e.target.value)}\n error={userErrors.lastName ? true : false}\n helperText={userErrors.lastName?.message}\n />\n
\n \n handleUserChange('email', e.target.value)}\n error={userErrors.email ? true : false}\n helperText={userErrors.email?.message}\n />\n
\n \n {contractUserError}\n
\n \n \n \n {(\n {(savingUserData ? \"Saving\" : \"Save\")}\n )}\n \n \n Cancel\n \n \n \n\n \n )\n}","import React, { useState, useMemo, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';\nimport HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined';\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';\nimport TocOutlinedIcon from '@mui/icons-material/TocOutlined';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n TextField,\n Switch,\n InputAdornment,\n IconButton,\n Autocomplete,\n Grid,\n Link,\n List,\n ListItem,\n ListItemText,\n Typography,\n Divider,\n InputLabel, Select, MenuItem, FormControl\n} from \"@mui/material\";\n\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\n//import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { Box } from \"@mui/material\";\nimport { apiDelete, apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport moment from \"moment\";\nimport CurrencyFormatter from \"components/Formatter/CurrencyFormatter\";\nimport { useForm, Controller } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\nimport { PropaneSharp } from \"@mui/icons-material\";\nimport ContractUsers from \"components/Pages/ContractUsers\";\nimport AddContractUserModal from \"components/AddContractUserModal\";\nimport dayjs from 'dayjs';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n handleEdit(cell)} >\n \n \n \n { showSubContractor(cell) }} >\n \n \n \n { showHistory(cell) }} >\n \n \n \n { addChildContract(cell) }} >\n \n \n : <>),\n disableFilters: true,\n className: (canEdit ? \"\" : \"invisible\")\n },\n {\n Header: \"Contract Name\",\n accessor: \"contractName\",\n },\n {\n Header: \"Contract Code\",\n accessor: \"contractCode\",\n },\n {\n Header: \"Begin Date\",\n accessor: (cell) => Utils.formatDate(cell.beginDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.beginDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"End Date\",\n accessor: (cell) => Utils.formatDate(cell.endDate),\n Cell: ({ row }) => (\n \n {Utils.formatDate(row.original.endDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Rate\",\n accessor: (cell) => \n {\n _.uniq(cell.notificationList.map(a => a.emailTemplateDescription)).map(a =>\n <>\n \n { a }\n }\n secondary={\n cell.notificationList.filter(f => f.emailTemplateDescription == a).map(f => \n \n { f.userName }\n \n { f.statusID==0?\"Pending\":\"Sent\" } )\n \n }\n />\n \n \n )\n }\n
\n // return {_.uniq(cell.notificationList.map(a => { return a.emailTemplateDescription })).map(a => ho\" disableFocusListener>{a}
\n }\n\n const rednerAck = (cell) => {\n return \n {\n _.uniq(cell.ackList.map(a => a.statusID)).map(a =>\n <>\n \n {a == 1 ? \"Pending\" : \"Acknowledged\"}\n }\n secondary={\n cell.ackList.filter(f => f.statusID == a).map(f => \n \n { f.userName }\n )\n \n }\n />\n \n \n )\n }\n
\n // return {_.uniq(cell.notificationList.map(a => { return a.emailTemplateDescription })).map(a => ho\" disableFocusListener>{a}
\n }\n const changeHistoryListColumnsArray = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.createDate),\n style: { width: \"150px\" },\n cellStyle: { width: \"150px\" },\n },\n {\n Header: \"Change\",\n accessor: (cell) => (\n \n {parseChanges(cell.changes).map(c => { return {c} })} \n \n ),\n style: { width: \"250px\" },\n cellStyle: { width: \"250px\" },\n },\n {\n Header: \"Notification\",\n accessor: (cell) => (\n \n {(cell.requireNotification == 0 ? \"\" : rednerNotification(cell))}\n \n ),\n style: { width: \"300px\" },\n cellStyle: { width: \"300px\" },\n },\n {\n Header: \"Acknowledgement\",\n accessor: (cell) => (\n \n {(cell.requireAck == 0 ? \"\" : rednerAck(cell))}\n \n )\n }\n ];\n const subContractListColumnsArray = [\n {\n Header: \"Subcontractor Name\",\n accessor: (cell) => (\n \n \n {\n e.preventDefault()\n console.dir(cell.companyID);\n setCurrentSubContractor(cell)\n getContractUsers(cell.companyID)\n }}\n >\n {cell.companyName}\n \n \n \n ),\n }\n ];\n\n const subContractUserListColumnsArray = [\n {\n Header: \"User\",\n accessor: \"userName\",\n },\n {\n Header: \"Action\",\n accessor: (cell) =>\n \n { toggleUserAccess(cell) }} />\n ,\n disableFilters: true,\n className: (canEdit ? \"\" : \"invisible\")\n }\n ];\n\n const childContract = (row, rowProps, visibleColumns) => {\n if (row.row.original.children.length == 0) {\n return <>\n }\n return (\n row.row.original.children.map((c, idx) => {\n return \n \n \n \n\n \n handleEdit(c)} >\n \n \n \n { showHistory(c) }} >\n \n \n \n \n \n {Utils.formatDate(c.beginDate)}\n \n {Utils.formatDate(c.endDate)}\n \n \n \n \n })\n )\n }\n return (\n <>\n {/* Add Contract MODAL */}\n \n \n {(contract.primeSubContractID == Utils.emptyGuid() ? \"Add Contract\" : \"Edit Contract\")}\n \n \n \n \n\n handleContractChange('contractName', e.target.value)}\n id=\"contractName\"\n name=\"contractName\"\n variant=\"standard\"\n error={errors.contractName ? true : false}\n helperText={errors.contractName?.message}\n InputProps={contract.parentID != null ? {\n readOnly: true,\n } : {}}\n />\n\n handleContractChange('contractCode', e.target.value)}\n id=\"contractCode\"\n name=\"contractCode\"\n variant=\"standard\"\n error={errors.contractCode ? true : false}\n helperText={errors.contractCode?.message}\n InputProps={contract.parentID != null ? {\n readOnly: true,\n } : {}}\n />\n
\n \n\n $,\n }}\n required\n value={contract.rate}\n onChange={(e) => handleContractChange('rate', e.target.value)}\n id=\"rate\"\n name=\"rate\"\n variant=\"standard\"\n error={errors.rate ? true : false}\n helperText={errors.rate?.message}\n />\n
\n \n \n handleContractChange('beginDate', newValue?.format('YYYY-MM-DD'))}\n label=\"Begin Date\"\n slotProps={{\n textField: {\n helperText: errors.beginDate?.message,\n },\n }}\n />\n \n\n \n handleContractChange('endDate', newValue?.format('YYYY-MM-DD'))}\n label=\"End Date\"\n slotProps={{\n textField: {\n helperText: errors.endDate?.message,\n },\n }}\n />\n \n\n
\n \n \n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n \n Cancel\n \n \n \n\n\n <>\n {/* Assign Company MODAL */}\n \n \n {currentContract?.contractName}\n \n \n \n \n
\n \n {\n setAssignSubContractor(newValue);\n }}\n disablePortal\n id=\"combo-box-demo\"\n options={companyList.map((val, i) => { return { label: val.companyName, value: val.companyId } })}\n renderInput={(params) => \n \n \n Assign\n \n \n \n
\n\n
\n \n \n \n {currentSubContractor ?\n \n {currentSubContractor.companyName}\n \n \n \n \n }\n /> : <>}\n \n \n\n
\n \n \n Close\n \n \n \n \n {/* History Modal */}\n { setOpenHistoryModal(false) }}\n aria-labelledby=\"alert-dialog-slide-title\"\n aria-describedby=\"alert-dialog-slide-description\"\n className={TableStyle.fileTypeModalWrapper}\n fullWidth\n maxWidth=\"lg\" >\n \n {currentContract?.contractName}\n \n \n \n \n \n \n \n { setOpenHistoryModal(false) }} className={ButtonStyle.CcancelBtn}>\n Close\n \n \n \n {openAddUserModal ? {\n console.log('close');\n setOpenAddUserModal(false)\n }}\n refreshUsers={() => {\n getContractUsers(currentSubContractor.companyID)\n }}\n >\n : <>}\n\n\n \n {canEdit ? \n \n \n : <>}\n\n\n \n Company \n { setCurrentCompany(e.target.value); fetchContracts(e.target.value) }}\n >\n All \n {companyList.map((val, i) => {val.companyName} )}\n\n \n \n }\n />\n \n )\n}","import React, { useState, useMemo, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport MUIDataTable from \"components/mui-datatable\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport ModalStyles from \"components/Content/Modal/ModalStyles.module.css\";\nimport ExpandLess from '@mui/icons-material/ExpandLess';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n TextField,\n Grid,\n Chip,\n IconButton,\n InputLabel,\n Select,\n MenuItem,\n FormControl,\n List,\n ListItem,\n Divider,\n ListItemText,\n Typography,\n ListItemButton,\n Collapse\n\n} from \"@mui/material\";\n\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\n//import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\nimport { Box } from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls, primeApiUrls } from \"common/ApiUrls\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport moment from \"moment\";\nimport { useForm, Controller } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\nimport ContractUsers from \"components/Pages/ContractUsers\";\nimport dayjs from 'dayjs';\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return handleEdit(cell)} >\n ),\n disableFilters: true,\n className: (canEdit ? \"\" : \"invisible\")\n },\n {\n Header: \"Company Name\",\n accessor: \"name\",\n },\n {\n Header: \"Pending Action\",\n // accessor: \"userUploads\",\n accessor: (cell) => (cell.userUploads.map(u => u.fileName).join('')),\n Cell: ({ row }) => (\n \n {row.original.userUploads.map(u => Review {u.userUploadTypeName} file {u.fileName} Uploaded by {u.updateUserFirstName} {u.updateUserLastName} )}\n \n ),\n },\n {\n Header: \"Status\",\n accessor: \"status.value\",\n Cell: ({ row }) => (\n <>{(row.original.status.value > 0 ? {c.complianceType} {c.status == \"missing\" ? \"is missing\" : `${c.status} from ${moment(c.beginDate).format(\"MM/DD/YYYY\")} to ${moment(c.endDate).format(\"MM/DD/YYYY\")}, updated ${moment(c.updateDate).format(\"MM/DD/YYYY\")}`} )\n return \n {\n complianceTypes.map((t) => {\n const complianceList = compliances.filter(c => c.complianceType == t)\n return <>{showComplianceHistory==t?setShowComplianceHistory(''):setShowComplianceHistory(t)}} >\n {t} {statusToChip(complianceList[0].status)} {complianceList[0].status==\"missing\"?\"\":<>{moment(complianceList[0].beginDate).format(\"MM/DD/YYYY\")} - {moment(complianceList[0].endDate).format(\"MM/DD/YYYY\")}}} />\n {showComplianceHistory==t? \n\n {complianceList.map((c, idx) => <>\n \n \n {c.status==\"missing\"?<>:{moment(c.updateDate).format(\"MM/DD/YYYY\")} update to {statusToChip(c.status)}
\n \n\n \n )}\n })\n }\n
\n }\n return <>\n }\n return (\n <>\n {/* Add MODAL */}\n \n \n {currentCompany?.name} Compliance\n \n \n \n \n
\n {currentCompany?.userUploads.map((u, idx) =>\n \n Review {u.userUploadTypeName} file {u.fileName} Uploaded by {u.updateUserFirstName} {u.updateUserLastName}\n { handleApprove(u) }}>Approve { handleReject(u) }}>Reject \n )}\n \n {\n showComplianceList(currentCompany?.compliances)\n //currentCompany?.compliances.map((c, idx) =>
{c.complianceType} {c.status == \"missing\" ? \"is missing\" : `${c.status} from ${moment(c.beginDate).format(\"MM/DD/YYYY\")} to ${moment(c.endDate).format(\"MM/DD/YYYY\")}, updated ${moment(c.updateDate).format(\"MM/DD/YYYY\")}`} )\n }\n
\n \n \n {(savingData ? \"Saving\" : \"Add Compliance\")}\n \n \n Cancel\n \n \n \n\n {/* Reject MODAL */}\n { setOpenRejectModal(false) }}\n aria-labelledby=\"alert-dialog-slide-title\"\n aria-describedby=\"alert-dialog-slide-description\"\n className={TableStyle.fileTypeModalWrapper}\n fullWidth\n >\n \n Reject File\n \n \n \n Review {currentFile?.fileName}
\n setRejectNotes(event.target.value)}> \n \n \n \n { handleRejectSubmit() }}\n disabled={savingData}\n >\n {(savingData ? \"Saving\" : \"Save\")}\n \n { setOpenRejectModal(false) }} className={ButtonStyle.CcancelBtn}>\n Cancel\n \n \n \n\n {/* Approve MODAL */}\n { setOpenApproveModal(false) }}\n aria-labelledby=\"alert-dialog-slide-title\"\n aria-describedby=\"alert-dialog-slide-description\"\n className={TableStyle.fileTypeModalWrapper}\n fullWidth\n >\n \n Approve Compliance\n \n \n \n \n
{currentFile?.fileName} \n \n\n \n \n \n Compliance Type\n \n setCurrentComplianceType(e.target.value)}\n onChange={(e) => handleComplianceChange('complianceType', e.target.value)}\n error={errors.complianceType ? true : false}\n readOnly={lockComplianceType}\n >\n Select a value \n {complianceTypes.map((item, i) => {\n return ({item} );\n })}\n \n \n\n
\n \n \n handleComplianceChange('beginDate', newValue?.format('YYYY-MM-DD'))}\n label=\"Begin Date\"\n slotProps={{\n textField: {\n helperText: errors.beginDate?.message,\n },\n }}\n />\n \n \n handleComplianceChange('endDate', newValue?.format('YYYY-MM-DD'))}\n label=\"End Date\"\n slotProps={{\n textField: {\n helperText: errors.endDate?.message,\n },\n }}\n />\n \n\n
\n \n handleComplianceChange('notes', event.target.value)}> \n
\n \n\n \n \n\n \n {(savingData ? \"Saving\" : \"Save\")}\n \n { setOpenApproveModal(false) }} className={ButtonStyle.CcancelBtn}>\n Cancel\n \n \n \n\n\n {/* Add Compliance MODAL */}\n { setOpenAddComplianceModal(false) }}\n aria-labelledby=\"alert-dialog-slide-title\"\n aria-describedby=\"alert-dialog-slide-description\"\n className={TableStyle.fileTypeModalWrapper}\n fullWidth\n >\n \n Add Compliance\n \n \n \n \n \n \n \n Compliance Type\n \n setCurrentComplianceType(e.target.value)}\n onChange={(e) => handleComplianceChange('complianceType', e.target.value)}\n error={errors.complianceType ? true : false}\n >\n Select a value \n {complianceTypes.map((item, i) => {\n return ({item} );\n })}\n \n \n \n \n \n \n Status\n \n setCurrentComplianceType(e.target.value)}\n onChange={(e) => handleComplianceChange('status', e.target.value)}\n error={errors.complianceType ? true : false}\n >\n Pass \n Failed \n \n \n \n \n \n handleComplianceChange('beginDate', newValue?.format('YYYY-MM-DD'))}\n label=\"Begin Date\"\n slotProps={{\n textField: {\n helperText: errors.beginDate?.message,\n },\n }}\n />\n \n \n handleComplianceChange('endDate', newValue?.format('YYYY-MM-DD'))}\n label=\"End Date\"\n slotProps={{\n textField: {\n helperText: errors.endDate?.message,\n },\n }}\n />\n \n\n \n \n handleComplianceChange('notes', event.target.value)}> \n\n \n \n \n\n \n \n \n {(savingData ? \"Saving\" : \"Save\")}\n \n { setOpenAddComplianceModal(false) }} className={ButtonStyle.CcancelBtn}>\n Cancel\n \n \n \n downloadInvoice(`${e.row.values.invoiceNumber}`,`${e.row.values.invoiceId}`)} color=\"primary\">{e.row.values.invoiceNumber} )\n },\n },\n {\n Header: \"Reference\",\n accessor: \"reference\",\n },\n {\n Header: \"Due Date\",\n accessor: (cell) => Utils.formatDate(cell.dueDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.dueDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end',\n },\n {\n Header: \"Invoice Total\",\n accessor: (cell) => Utils.formatCurrency(cell.total),\n Cell: ({ row }) => (\n \n {Utils.formatCurrency(row.original.total)}\n \n ),\n className: 'text-end'\n },\n {\n Header: \"Amount Due\",\n accessor: (cell) => Utils.formatCurrency(cell.amountDue),\n Cell: ({ row }) => (\n \n {Utils.formatCurrency(row.original.amountDue)}\n \n ),\n className: 'text-end'\n },\n {\n Header: \"Payment Applied\",\n accessor: (cell) => Utils.formatCurrency(cell.amountPaid),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"paymentCol\");\n }}\n >\n {Utils.formatCurrency(row.original.amountPaid)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Credit Applied\",\n accessor: (cell) => Utils.formatCurrency(cell.credit),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"creditCol\");\n }}\n >\n {Utils.formatCurrency(row.original.credit)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Payment Rcvd\",\n accessor: (cell) => Utils.formatDate(cell.paymentDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.paymentDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end'\n },\n {\n Header: \"Disbursement Amt\",\n accessor: (cell) => Utils.formatCurrency(cell.disbursementAmount),\n Cell: ({ row }) => (\n <>\n \n {\n handleClickOpen(row.original.invoiceId, \"disbursementCol\");\n }}\n >\n {Utils.formatCurrency(row.original.disbursementAmount)}\n \n \n \n ),\n className: 'text-end'\n },\n {\n Header: \"Disbursement Date\",\n accessor: (cell) => Utils.formatDate(cell.disbursementDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.disbursementDate)}\n \n ),\n sortType: \"dateSort\",\n className: 'text-end'\n },\n ];\n\n // PAYMENT AMOUNT HEADERS\n const paymentColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.date),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.amount),\n },\n {\n Header: \"Type\",\n accessor: () => \"Payment\",\n },\n ];\n\n // CREDIT AMOUNT HEADERS\n const creditColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.date),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.appliedAmount),\n },\n {\n Header: \"Type\",\n accessor: () => keyType.join(),\n },\n ];\n\n // DISBERSEMENT AMOUNT HEADERS\n const disbursementColumns = [\n {\n Header: \"Date\",\n accessor: (cell) => Utils.formatDate(cell.disbursementDate),\n },\n {\n Header: \"Amount\",\n accessor: (cell) => Utils.formatCurrency(cell.disbursementAmount),\n },\n {\n Header: \"Method\",\n accessor: \"disbursementMethod\",\n },\n {\n Header: \"Notes\",\n accessor: \"disbursementNote\",\n },\n ];\n\n \n\n const handleChangeCompany = () => {\n setIsLoading(true);\n\n apiGet(apiUrls.getAccounting(companyId)).then(\n (response) => {\n if (response.data.invoices) {\n setFetchedData(response.data.invoices);\n }\n console.log(response.data)\n setAmtAccountingBalance(response.data.amtAccountingBalance)\n setAmrsAccountingBalance(response.data.amrsAccountingBalance)\n setFsgAccountingBalance(response.data.fsgAccountingBalance)\n setAgsgAccountingBalance(response.data.agsgAccountingBalance)\n setRemittances(response.data.remittances);\n }\n )\n .finally(() => {\n setIsLoading(false);\n });\n \n // apiGet(apiUrls.getRemittance(companyId)).then(\n // (response) => {\n // setRemittances(response.data);\n // }\n // )\n }\n\n const handleRemittance = (remittanceType) => {\n let search = remittances.find(r => r.remittanceType === remittanceType);\n\n if (search) {\n setSelectedRemittance(search);\n setIsRemittanceVisible(true);\n }\n }\n\n const handleCloseRemittance = () => {\n setIsRemittanceVisible(false);\n }\n\n return (\n <>\n \n
\n {remittances.map((remittance, index) => \n handleRemittance(remittance.remittanceType)}\n className={ButtonStyle.CsubmitBtn}\n style={{ marginRight: \"15px\" }}\n startIcon={
\n\n {(amtAccountingBalance && (amtAccountingBalance.amountDue>0 || amtAccountingBalance.prepay>0 || amtAccountingBalance.remainingCredit>0)) ?
: null }\n {(fsgAccountingBalance && (fsgAccountingBalance.amountDue>0 || fsgAccountingBalance.prepay>0 || fsgAccountingBalance.remainingCredit>0)) ? : null }\n {(amrsAccountingBalance && (amrsAccountingBalance.amountDue>0 || amrsAccountingBalance.prepay>0 || amrsAccountingBalance.remainingCredit>0)) ? : null }\n {(agsgAccountingBalance && (agsgAccountingBalance.amountDue>0 || agsgAccountingBalance.prepay>0 || agsgAccountingBalance.remainingCredit>0)) ? : null }\n \n \n \n {\"Invoice Payments\"} \n \n {checkingData ? (\n No Data \n ) : (\n \n \n \n Close\n \n \n \n\n {selectedRemittance !== null ?\n \n {selectedRemittance.remittanceType} Remittance Information \n \n CHECK \n {selectedRemittance.address.map(line => \n {line}
\n )}\n\n WIRE/ACH INSTRUCTIONS \n Bank: {selectedRemittance.bankName}
\n Address: {selectedRemittance.bankAddress}
\n Account Name: {selectedRemittance.accountName}
\n Account Number: {selectedRemittance.accountNumber}
\n Routing Number: {selectedRemittance.routingNumber}
\n \n \n \n Close\n \n \n : <>}\n\n \n setDoShowError(false)}\n aria-labelledby=\"alert-dialog-title\"\n aria-describedby=\"alert-dialog-description\"\n >\n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n setDoShowError(false)} color=\"primary\">\n Close\n \n \n \n \n );\n}\n\nexport default Accounting;\n","import React, { useState, useMemo, useEffect, useContext } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport MUIDataTable from \"components/mui-datatable\";\nimport TableAllData from \"components/Content/CustomTable/TableAllData\";\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport ConfirmDialog from \"components/Content/Modal/ConfirmDialog\";\nimport ErrorIcon from '@mui/icons-material/Error';\nimport AximTooltip from \"components/AximTooltip\";\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Slide,\n TextField,\n Typography,\n InputAdornment,\n IconButton,\n InputLabel, Select, MenuItem, FormControl\n} from \"@mui/material\";\n\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { Box } from \"@mui/material\";\nimport { apiGet, apiPost } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { Utils } from \"common/Utils\";\nimport _ from 'lodash';\nimport moment from \"moment\";\nimport EmailTemplateDialog from \"components/Content/Modal/EmailTemplateDialog\";\nimport AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n editTemplate(cell)}> \n \n {cell.isTestEmailRequired ? \n \n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\",\n },\n {\n Header: \"Update By\",\n accessor: (cell) => `${cell.updateUserFirstName} ${cell.updateUserLastName}`,\n },\n ]);\n const newTemplate = () => {\n setSelectedTemplate(null);\n setIsEmailTemplateDialogOpen(true);\n }\n\n const editTemplate = (cell) => {\n setSelectedTemplate(cell);\n setIsEmailTemplateDialogOpen(true);\n }\n return (\n <>\n \n \n \n\n \n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport FileUploadTable from \"components/Content/CustomTable/FileUploadTable\";\nimport { Button } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport PublishOutlinedIcon from \"@mui/icons-material/PublishOutlined\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport FileUploadsDialog from \"components/Content/Modal/FileUploadsDialog\";\n\nfunction Uploads(props) {\n const { modalIsOpen, setModalIsOpen, companyId, setCompany, error } = useContext(PrivateRoutesContext);\n const [openModal, setOpen] = useState(false); \n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n // FILE UPLOAD START\n useEffect(() => {\n let selectedCompany = localStorage.getItem(`selectedParentCompanyId`);\n console.log(`current company ${selectedCompany}`)\n if (selectedCompany == null || selectedCompany === \"\") {\n setModalIsOpen(true)\n }\n else {\n setCompany(selectedCompany, \"Prime\")\n }\n getUserUploads();\n }, [companyId]);\n\n const getUserUploads = () => {\n setIsLoading(true);\n\n let selectedCompany = localStorage.getItem(`selectedParentCompanyId`);\n apiGet(apiUrls.getUserUploads(selectedCompany)).then(\n (response) => {\n setFetchedData(response.data);\n setIsLoading(false);\n }\n ).catch(\n (response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading the files.\");\n error.setDoShowError(true);\n setIsLoading(false);\n }\n );\n }\n\n return (\n \n
\n
setOpen(true)}\n startIcon={ setOpen(false)} getUserUploads={getUserUploads} />\n \n
\n ,\n link: `/${PortalNames.CollectionPartner.Path}/logiqmind-manager`\n },\n {\n title: \"Accounting\",\n icon: \n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { Switch, Route, Redirect, useRouteMatch } from \"react-router-dom\";\n\nimport Dashboard from \"area/cui/Dashboard\"\nimport Appearance from \"components/Pages/Appearance\"\nimport ContractMangement from \"area/cui/ContractMangement\"\nimport ComplianceMangement from \"area/cui/ComplianceMangement\"\nimport Accounting from \"area/cui/Accounting\"\nimport EmailTemplate from \"area/cui/EmailTemplate\"\nimport LogiqMindManager from \"components/Pages/LogiqMindManager\"\nimport Uploads from \"area/cui/Uploads\";\nimport Layout from \"./Layout\"\n\nexport default function CUIRoutes() {\n let { path, url } = useRouteMatch();\n\n useEffect(() => {\n document.title = \"AXIM FringeSecure | Prime Contract Partner\";\n },[])\n\n return (\n \n \n \n \n \n \n )\n}","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport { Alert, Box, Button, Stack, Paper, Grid } from '@mui/material';\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport makeStyles from '@mui/styles/makeStyles';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport { Line, Bar, getElementAtEvent, getDatasetAtEvent } from 'react-chartjs-2';\nimport { Chart as ChartJS } from \"chart.js/auto\";\nimport { defaults } from \"chart.js\";\nimport { ChartColors } from \"common/ChartColors\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport moment from \"moment\";\nimport AximDoughnut from \"components/Content/Graphs/AximDoughnut\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n paper: {\n margin: theme.spacing(2),\n textAlign: \"left\",\n color: theme.palette.text.secondary,\n boxShadow: \"0px 4px 30px rgba(0, 0, 0, 0.05)\",\n },\n}));\n\nfunction Dashboard() {\n const { companyId, acknowledgement } = useContext(PrivateRoutesContext);\n\n const [dashboardData, setDashboardData] = useState();\n\n const [chartData, setChartData] = useState();\n const [isLoadingDetails, setIsLoadingDetails] = useState(false);\n const [details, setDetails] = useState(null);\n\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n if (companyId) {\n getDashboards();\n }\n }, [companyId]);\n\n const getDashboards = () => {\n setIsLoading(true);\n setDetails(null);\n // apiGet(apiUrls.getDashboardCards(companyId)).then((response) => {\n // // console.log(response.data);\n // setDashboardData(response.data);\n\n // if (response.data.charts) {\n // setChartData(response.data.charts);\n // // console.log(response.data.charts, \"data\");\n // }\n // setIsLoading(false);\n // });\n setIsLoading(false);\n };\n\n const handleClickChart = (chart, chartRef, event) => {\n var element = getElementAtEvent(chartRef.current, event);\n var dataset = getDatasetAtEvent(chartRef.current, event);\n\n // console.log(element, \"element\");\n // console.log(dataset, \"dataset\");\n\n if (element && element.length > 0 &&\n dataset && dataset.length > 0) {\n const datasetIndex = dataset[0].datasetIndex;\n\n var dataPoints = chart.dataSets[datasetIndex].dataPoints;\n\n // console.log(chart, \"chart\");\n\n if (dataPoints && dataPoints.length > 0 && chart.dataSets[datasetIndex].detailItemId) {\n // console.log(dataPoints[element[0].index], \"dp\");\n\n setIsLoadingDetails(true);\n apiGet(apiUrls.getDashboardItem(companyId, chart.dataSets[datasetIndex].detailItemId, moment(dataPoints[element[0].index].key).format(\"YYYY-MM-DD\")))\n .then(response => {\n // console.log(response.data);\n\n response.data.details.sort((a,b) => b.value - a.value); // sort by value descending\n\n setDetails(response.data);\n })\n .catch(response => {\n setDetails(null);\n })\n .finally(() => {\n setIsLoadingDetails(false);\n })\n }\n }\n }\n\n function ChartsArray( { charts, handleClickChart }) {\n if (charts) {\n return (\n charts.map((c, idx) =>\n \n {acknowledgement?.acknowledgements?.implementation?.documentId ? acknowledgement.setDoShowClientAcknowledgement(true)}>Implementation Acknowledgement : null}\n : null\n }\n \n \n dashboard information, e.g. files received, files uploaded \n \n {!isLoading && dashboardData !== undefined ?\n \n \n test {prop} \n \n : \"\"}\n {!isLoading && dashboardData !== undefined ?\n \n \n \n \n {isLoadingDetails ? \n \n \n : null}\n \n : \"\"}\n \n );\n}\n\nfunction GenericChart({ chart, index, handleClickChart }) {\n const chartRef = useRef();\n\n const currencyTooltipOptions = {\n plugins: {\n tooltip: {\n callbacks: {\n label: function (context) {\n var label = context.dataset.label || '';\n // console.log(\"callback context\", context);\n\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n switch (context.dataset.format) {\n case \"decimal\":\n label += new Intl.NumberFormat('en-US', { style: 'decimal' }).format(context.parsed.y);\n break;\n default:\n label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);\n break;\n }\n\n // console.log(label);\n\n return label;\n }\n },\n footer: function (context) {\n var label = '';\n\n // console.log(context, \"context\");\n\n if (context.every(c => c.dataset.doShowTotal)) {\n var total = context.map(c => {\n var r = 0;\n\n if (c.formattedValue) {\n var n = c.formattedValue.replace(/,/g,'');\n if (!isNaN(n)) {\n r = parseFloat(n);\n }\n }\n\n return r;\n }).reduce((a, b) => a + b, 0)\n\n if (context.every(c => c.dataset.format !== \"decimal\")) {\n total = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(total);\n }\n\n label = `Total: ${total}`;\n }\n\n return label;\n }\n }\n }\n }\n };\n const defaultOptions = {\n responsive: true,\n interaction: { mode: 'index' },\n stacked: false,\n scales: {\n y: {\n display: true,\n type: \"linear\",\n position: \"left\",\n suggestedMin: 0,\n ticks: {\n beginAtZero: true,\n },\n },\n y2: {\n display: false,\n type: \"linear\",\n position: \"right\",\n suggestedMin: 0,\n grid: {\n drawOnChartArea: false,\n },\n ticks: {\n beginAtZero: true,\n },\n },\n },\n animation: {\n duration: 0\n }\n };\n\n let chartData = [];\n chartData.labels = chart.xAxis;\n chartData.datasets = [];\n chartData.chartType = chart.chartType;\n\n defaults.font.family = \"'Roboto', 'Helvetica', 'Arial', sans-serif\";\n\n let chartOptions = { ...defaultOptions, ...currencyTooltipOptions }\n chart.dataSets.map((prop, idx) => {\n const newDataSet = {\n key: idx,\n label: prop.label,\n data: prop.values,\n fill: false,\n backgroundColor: ChartColors.getColor(idx),\n hoverBackgroundColor: ChartColors.getColor(idx),\n borderColor: ChartColors.getColor(idx),\n yAxisID: prop.secondaryAxis ? \"y2\" : \"y\",\n stack: prop.stackGroupName,\n format: prop.numberFormat,\n doShowTotal: chart.doShowTotal,\n }\n if (prop.secondaryAxis) {\n chartOptions.scales.y2.display = true;\n }\n\n if (prop.overrideChartType) {\n newDataSet.type = prop.overrideChartType;\n }\n chartData.datasets.push(newDataSet);\n });\n\n chartOptions.plugins = { ...chartOptions.plugins, ...{ title: { display: true, text: chart.title, font: { size: 21, weight: \"normal\" } } } };\n var chartProps = {\n id: `chart${index}Ctx`,\n type: chartData.chartType,\n data: { ...chartData },\n options: { ...chartOptions },\n onClick: (event) => handleClickChart(chart, chartRef, event)\n };\n let component = null;\n\n switch (chartProps.type) {\n case \"Bar\":\n component = \n \n {/* \n \n ) : \"\";\n}\n\nexport default Dashboard;\n","import React, { useState, useEffect, useContext } from \"react\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from 'common/ApiUrls';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport MessageCarousel from \"components/MessageCarousel\";\n\nexport default function Messages () {\n const { companyId } = useContext(PrivateRoutesContext);\n\n const [messages, setMessages] = useState([]);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n apiGet(apiUrls.getMessages(companyId)).then(\n (response) => {\n setMessages(response.data);\n setHasInitializationError(false);\n }\n )\n .catch((response) => {\n setHasInitializationError(true);\n });\n }\n\n return (\n \n \n {\"File Upload\"}\n \n \n {/* SELECT UPLOAD TYPE */}\n \n \n Select Vendor Type\n \n setVendor(e.target.value)}\n label=\"Select Vendor\"\n >\n Select a value \n {vendors.map((item, i) => {\n return({item.vendorName} );\n })}\n \n \n \n \n Select Upload Type\n \n setUploadType(e.target.value)}\n label=\"Select Upload Type\"\n >\n Select a value \n {uploadTypes.map((item, i) => {\n return({item.uploadTypeName} );\n })}\n \n \n\n {/* SELECT PAY PERIOD */}\n {isPayPeriodRequired ? (\n \n \n \n Pay Period\n \n setPayPeriod(e.target.value)}\n label=\"Pay Period\"\n >\n Pay Date Included in File \n Open Pay Dates \n {currentOpenPayPeriods.map((item, i) => { \n return({moment(item).format('MMMM DD, YYYY')} );\n })}\n Closed Pay Dates \n {closedPayPeriods.map((item, i) => {\n return({moment(item).format('MMMM DD, YYYY')} );\n })}\n \n \n
\n ) : (\n <>\n )}\n\n {/* UPLOAD FILE */}\n \n \n \n Cancel\n \n \n \n )\n}","import React, { useState, useEffect, useContext, useMemo } from \"react\";\nimport TableStyle from \"components/Content/Table/TableStyle.module.css\";\nimport FileUploadTable from \"components/Content/CustomTable/FileUploadTable\";\nimport { Button } from \"@mui/material\";\nimport ButtonStyle from \"components/Button/ButtonStyle.module.css\";\n\nimport PublishOutlinedIcon from \"@mui/icons-material/PublishOutlined\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport FileToVendorUploadsDialog from \"components/Content/Modal/FileToVendorUploadsDialog\";\n\nfunction Uploads(props) {\n const { companyId, error } = useContext(PrivateRoutesContext);\n const [openModal, setOpen] = useState(false); \n const [fetchedData, setFetchedData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const availableUploadTypes = ['288CC680-5E36-40B2-8186-5CFBB4A3CC36'];\n // FILE UPLOAD START\n useEffect(() => {\n getUserUploads(companyId);\n }, [companyId]);\n\n const getUserUploads = (companyId) => {\n setIsLoading(true);\n\n apiGet(apiUrls.getUserUploadsByUser(companyId, null, 'TOVENDOR')).then(\n (response) => {\n setFetchedData(response.data);\n setIsLoading(false);\n }\n ).catch(\n (response) => {\n error.setTitle(\"An Error Occurred\");\n error.setText(\"An Error occurred loading the files.\");\n error.setDoShowError(true);\n setIsLoading(false);\n }\n );\n }\n\n return (\n \n
\n
setOpen(true)}\n startIcon={ setOpen(false)} getUserUploads={getUserUploads} availableUploadTypes={availableUploadTypes} />\n \n
\n promptDownloadFile(`${e.value}`, `${e.row.values.fileName}`)} color=\"primary\"> \n ,\n maxWidth: 100,\n disableFilters: true,\n },\n {\n Header: \"File Name\",\n accessor: \"fileName\",\n },\n {\n Header: \"Update Date\",\n accessor: (cell) => Utils.formatDate(cell.updateDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\"\n },\n {\n Header: \"Update By\",\n accessor: \"updateUser\",\n },\n ];\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n setIsLoading(true);\n\n apiGet(apiUrls.getUserUploads(companyId, null, 'FROMVENDOR')).then(\n (response) => {\n // debugger\n setFetchedData(response.data);\n }\n )\n .finally(() => setIsLoading(false));\n }\n \n const promptDownloadFile = (fileId, fileName) => {\n setConfirmCloseAction(() => (result) => downloadFile(result, fileId, fileName));\n setConfirmTitle('Download File');\n setConfirmText(`Are you sure you would like to download file?`);\n setDoShowConfirm(true);\n }\n\n const downloadFile = (isConfirmed, fileId, fileName) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n\n Utils.downloadFile(apiUrls.downloadFile(companyId, fileId),\n fileName,\n null,\n () => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n },\n () => {\n setConfirmButtonsDiabled(false);\n setDoShowConfirm(false);\n });\n }\n else {\n setDoShowConfirm(false);\n }\n }\n\n return (\n \n {/*
*/}\n
\n
\n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n \n Close\n \n \n \n\n confirmCloseAction(result)}\n confirmTitle={confirmTitle}\n confirmText={confirmText}\n buttonsDisabled={confirmButtonsDisabled} />\n \n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { BrowserRouter as Router, Switch, Route, Redirect, useRouteMatch } from \"react-router-dom\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport Logout from \"pages/Auth/Logout\";\nimport Dashboard from \"area/ccui/Dashboard\";\nimport Messages from \"area/ccui/Messages\";\nimport Uploads from \"area/ccui/Uploads\";\nimport Files from \"area/ccui/Files\";\nimport Layout from \"./Layout\"\n\nexport default function CCUIRoutes({ portal }) {\n const { modalIsOpen,setModalIsOpen, companyId, setCompany,userInfo } = useContext(PrivateRoutesContext);\n\n useEffect(() => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n if (selectedCompany == null || selectedCompany === \"\") {\n console.log(\"Prompting for company from CCUIRoutes\")\n setModalIsOpen(true)\n }\n else{\n setCompany(selectedCompany)\n }\n\n document.title = \"AXIM FringeSecure | Collection Company\";\n }, []);\n\n let { path, url } = useRouteMatch();\n return (\n \n \n \n \n \n \n )\n}","import React, { useState, useEffect, useContext, useRef } from \"react\";\nimport { Alert, Box, Button, Stack, Paper, Grid } from '@mui/material';\n\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport makeStyles from '@mui/styles/makeStyles';\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\n\nimport { Line, Bar, getElementAtEvent, getDatasetAtEvent } from 'react-chartjs-2';\nimport { Chart as ChartJS } from \"chart.js/auto\";\nimport { defaults } from \"chart.js\";\nimport { ChartColors } from \"common/ChartColors\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport moment from \"moment\";\nimport AximDoughnut from \"components/Content/Graphs/AximDoughnut\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n paper: {\n margin: theme.spacing(2),\n textAlign: \"left\",\n color: theme.palette.text.secondary,\n boxShadow: \"0px 4px 30px rgba(0, 0, 0, 0.05)\",\n },\n}));\n\nfunction Dashboard() {\n const { companyId, acknowledgement } = useContext(PrivateRoutesContext);\n\n const [dashboardData, setDashboardData] = useState();\n\n const [chartData, setChartData] = useState();\n const [isLoadingDetails, setIsLoadingDetails] = useState(false);\n const [details, setDetails] = useState(null);\n\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n if (companyId) {\n getDashboards();\n }\n }, [companyId]);\n\n const getDashboards = () => {\n setIsLoading(true);\n setDetails(null);\n // apiGet(apiUrls.getDashboardCards(companyId)).then((response) => {\n // // console.log(response.data);\n // setDashboardData(response.data);\n\n // if (response.data.charts) {\n // setChartData(response.data.charts);\n // // console.log(response.data.charts, \"data\");\n // }\n // setIsLoading(false);\n // });\n setIsLoading(false);\n };\n\n const handleClickChart = (chart, chartRef, event) => {\n var element = getElementAtEvent(chartRef.current, event);\n var dataset = getDatasetAtEvent(chartRef.current, event);\n\n // console.log(element, \"element\");\n // console.log(dataset, \"dataset\");\n\n if (element && element.length > 0 &&\n dataset && dataset.length > 0) {\n const datasetIndex = dataset[0].datasetIndex;\n\n var dataPoints = chart.dataSets[datasetIndex].dataPoints;\n\n // console.log(chart, \"chart\");\n\n if (dataPoints && dataPoints.length > 0 && chart.dataSets[datasetIndex].detailItemId) {\n // console.log(dataPoints[element[0].index], \"dp\");\n\n setIsLoadingDetails(true);\n apiGet(apiUrls.getDashboardItem(companyId, chart.dataSets[datasetIndex].detailItemId, moment(dataPoints[element[0].index].key).format(\"YYYY-MM-DD\")))\n .then(response => {\n // console.log(response.data);\n\n response.data.details.sort((a,b) => b.value - a.value); // sort by value descending\n\n setDetails(response.data);\n })\n .catch(response => {\n setDetails(null);\n })\n .finally(() => {\n setIsLoadingDetails(false);\n })\n }\n }\n }\n\n return (\n <>\n {isLoading && \n {acknowledgement?.acknowledgements?.implementation?.documentId ? acknowledgement.setDoShowClientAcknowledgement(true)}>Implementation Acknowledgement : null}\n : null\n }\n \n \n dashboard information, e.g. files received, files uploaded \n \n {!isLoading && dashboardData !== undefined ?\n \n \n test {prop} \n \n : \"\"}\n \n );\n}\n\nexport default Dashboard;\n","import React, { useState, useEffect, useContext } from \"react\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from 'common/ApiUrls';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport MessageCarousel from \"components/MessageCarousel\";\n\nexport default function Messages () {\n const { companyId } = useContext(PrivateRoutesContext);\n\n const [messages, setMessages] = useState([]);\n const [hasInitializationError, setHasInitializationError] = useState(false);\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n apiGet(apiUrls.getMessages(companyId)).then(\n (response) => {\n setMessages(response.data);\n setHasInitializationError(false);\n }\n )\n .catch((response) => {\n setHasInitializationError(true);\n });\n }\n\n return (\n \n
\n
setOpen(true)}\n startIcon={ setOpen(false)} getUserUploads={getUserUploads} availableUploadTypes={availableUploadTypes} />\n \n
\n promptDownloadFile(`${e.value}`, `${e.row.values.fileName}`)} color=\"primary\"> \n ,\n maxWidth: 100,\n disableFilters: true,\n },\n {\n Header: \"File Name\",\n accessor: \"fileName\",\n },\n {\n Header: \"Update Date\",\n accessor: (cell) => Utils.formatDate(cell.updateDate),\n Cell: ({row}) => (\n \n {Utils.formatDate(row.original.updateDate)}\n \n ),\n sortType: \"dateSort\"\n },\n {\n Header: \"Update By\",\n accessor: \"updateUser\",\n },\n ];\n\n useEffect(() => {\n handleChangeCompany()\n }, [companyId]);\n\n const handleChangeCompany = () => {\n setIsLoading(true);\n\n apiGet(apiUrls.getUserUploads(companyId, null, 'TOVENDOR')).then(\n (response) => {\n // debugger\n setFetchedData(response.data);\n }\n )\n .finally(() => setIsLoading(false));\n }\n \n const promptDownloadFile = (fileId, fileName) => {\n setConfirmCloseAction(() => (result) => downloadFile(result, fileId, fileName));\n setConfirmTitle('Download File');\n setConfirmText(`Are you sure you would like to download file?`);\n setDoShowConfirm(true);\n }\n\n const downloadFile = (isConfirmed, fileId, fileName) => {\n if (isConfirmed) {\n setConfirmButtonsDiabled(true);\n\n Utils.downloadFile(apiUrls.downloadFile(companyId, fileId),\n fileName,\n null,\n () => {\n setErrorText(\"An Error occurred downloading the file.\");\n setDoShowError(true);\n },\n () => {\n setConfirmButtonsDiabled(false);\n setDoShowConfirm(false);\n });\n }\n else {\n setDoShowConfirm(false);\n }\n }\n\n return (\n \n {/*
*/}\n
\n
\n {\"An Error Occurred\"} \n \n {errorText}\n \n\n \n \n Close\n \n \n \n\n confirmCloseAction(result)}\n confirmTitle={confirmTitle}\n confirmText={confirmText}\n buttonsDisabled={confirmButtonsDisabled} />\n \n \n \n \n {props.children}\n
\n \n \n \n \n );\n}\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { BrowserRouter as Router, Switch, Route, Redirect, useRouteMatch } from \"react-router-dom\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\n\nimport Logout from \"pages/Auth/Logout\";\nimport Dashboard from \"area/cvui/Dashboard\";\nimport Messages from \"area/cvui/Messages\";\nimport Uploads from \"area/cvui/Uploads\";\nimport Files from \"area/cvui/Files\";\nimport Layout from \"./Layout\"\n\nexport default function CVUIRoutes({ portal }) {\n const { modalIsOpen,setModalIsOpen, companyId, setCompany,userInfo } = useContext(PrivateRoutesContext);\n\n useEffect(() => {\n let selectedCompany = localStorage.getItem(`selectedCompanyId`);\n if (selectedCompany == null || selectedCompany === \"\") {\n console.log(\"Prompting for company from CCUIRoutes\")\n setModalIsOpen(true)\n }\n else{\n setCompany(selectedCompany)\n }\n\n document.title = \"AXIM FringeSecure | Collection Vendor\";\n }, []);\n\n let { path, url } = useRouteMatch();\n return (\n \n \n \n \n \n \n )\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Box, Button, FormControl, InputLabel, Select, MenuItem,Link } from \"@mui/material\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"common/ApiUrls\";\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { Portals } from \"common/Portals\";\n\nexport default function LandingPage() {\n const { setCurrentPortal, portals } = useContext(PrivateRoutesContext);\n\n const [isPortalButtonDisabled, setIsPortalButtonDisabled] = useState(false);\n\n useEffect(() => {\n localStorage.setItem('currentPortal', '');\n localStorage.setItem('deferredAcks', \"\");\n },[]);\n\n useEffect(() => {\n apiGet(apiUrls.getRoles).then((response) => {\n let userRoles = response.data.map(d => d.applicationRoleCode);\n let matchingPortals = Portals.filter(r => r.Roles.filter(value => userRoles.includes(value)).length > 0);\n if (matchingPortals.length === 1) {\n navigateToPortal(matchingPortals[0].Portal)\n }\n });\n },[portals]);\n\n const navigateToPortal = (portal) => {\n setIsPortalButtonDisabled(true);\n setCurrentPortal(portal);\n }\n\n return (\n \n {portals === null ?\n Loading available portals... \n : portals.length === 0 ?\n No portals available for the logged in user. \n : portals.length === 1 ?\n Redirecting... \n :\n \n \n Select portal to visit \n \n navigateToPortal(p.Portal)}\n variant=\"outlined\"\n className=\"mx-2\"\n disabled={isPortalButtonDisabled}\n >\n {p.Label}\n \n ))}\n \n }\n \n );\n}","import React, { useEffect, useState } from \"react\";\nimport { BrowserRouter as Router, Switch, Route } from \"react-router-dom\";\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from 'common/ApiUrls';\nimport { PrivateRoutesContext } from \"app/PrivateRoutesContext\";\nimport { PortalNames, Portals } from \"common/Portals\";\n\nimport AP3Routes from \"area/ap3/Layout/AP3Routes\";\nimport BrokerRoutes from \"area/broker/Layout/BrokerRoutes\";\nimport ERUIRoutes from \"area/employer/Layout/ERUIRoutes\";\nimport EmployeeRoutes from \"area/employee/Layout/EmployeeRoutes\";\nimport ContractorRoutes from \"area/contractor/Layout/ContractorRoutes\";\nimport CCRoutes from \"area/cui/Layout/CUIRoutes\";\nimport CCUIRoutes from \"area/ccui/Layout/CCUIRoutes\";\nimport CVUIRoutes from \"area/cvui/Layout/CVUIRoutes\";\nimport ErrorPage from \"pages/NotFound/ErrorPage\";\nimport Logout from \"pages/Auth/Logout\";\nimport LandingPage from \"pages/LandingPage\";\nimport ReleaseNotes from \"pages/ReleaseNotes\";\n\nfunction PrivateRoutes ({ updateTheme }) {\n const [companyId, setCompanyId] = useState(\"\");\n const [insuredId, setInsuredId] = useState(\"\");\n const [userInfo, setUserInfo] = useState([]);\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [currentPortal, setCurrentPortal] = useState(\"\");\n const [portals, setPortals] = useState(null);\n\n const [doShowError, setDoShowError] = useState(false);\n const [text, setText] = useState('');\n const [title, setTitle] = useState('');\n const error = {\n doShowError,\n setDoShowError,\n title,\n setTitle,\n text,\n setText\n }\n\n const [doShowFeedback, setDoShowFeedback] = useState(false);\n const [feedbackType, setFeedbackType] = useState('');\n const [feedbackSubject, setFeedbackSubject] = useState('');\n const feedback = {\n doShow: doShowFeedback,\n setDoShow: setDoShowFeedback,\n type: feedbackType,\n setType: setFeedbackType,\n subject: feedbackSubject,\n setSubject: setFeedbackSubject,\n };\n\n const [doShowClientAcknowledgement, setDoShowClientAcknowledgement] = useState(false);\n const [doShowDeliverablesAcknowledgement, setDoShowDeliverablesAcknowledgement] = useState(false);\n const [doShowBRDAcknowledgement, setDoShowBRDAcknowledgement] = useState(false);\n const [acknowledgements, setAcknowledgements] = useState(null);\n const acknowledgement = {\n doShowClientAcknowledgement,\n setDoShowClientAcknowledgement,\n doShowDeliverablesAcknowledgement,\n setDoShowDeliverablesAcknowledgement,\n doShowBRDAcknowledgement,\n setDoShowBRDAcknowledgement,\n acknowledgements,\n setAcknowledgements,\n }\n\n function getCompanyInfo(){\n console.log('getCompanyInfo')\n let companyId = localStorage.getItem(`selectedCompanyId`);\n if (companyId !== undefined && companyId != null) {\n apiGet(apiUrls.getUserInfo(companyId))\n .then((response) => {\n if (response.data.companyId) {\n setUserInfo(response.data);\n }\n });\n }\n }\n\n const setCompany = (id, companyType = null) => {\n if(companyType == \"AP3\" || companyType == \"Prime\"){\n localStorage.setItem(`selectedParentCompanyId`, id)\n localStorage.setItem(`selectedCompanyId`, id)\n }\n else if(companyType == \"Broker\"){\n localStorage.setItem(`selectedBrokerCompanyId`, id)\n localStorage.setItem(`selectedCompanyId`, id)\n }\n else{\n localStorage.setItem(`selectedCompanyId`, id)\n }\n setCompanyId(id)\n getCompanyInfo();\n setModalIsOpen(false)\n }\n\n useEffect(() => {\n let storedCurrentPortal = localStorage.getItem('currentPortal');\n\n if (storedCurrentPortal && storedCurrentPortal !== currentPortal) {\n setCurrentPortal(storedCurrentPortal);\n }\n }, []);\n\n useEffect(() => {\n apiGet(apiUrls.getRoles).then((response) => {\n let userRoles = response.data.map(d => d.applicationRoleCode);\n let matchingPortals = Portals.filter(r => r.Roles.filter(value => userRoles.includes(value)).length > 0);\n\n setPortals(matchingPortals);\n });\n }, []);\n\n useEffect(() => {\n if (currentPortal && portals !== null) {\n let storedCurrentPortal = localStorage.getItem('currentPortal');\n\n localStorage.setItem('currentPortal', currentPortal);\n var portal = portals.filter(p => p.Portal === currentPortal);\n\n if (portal.length === 1 && currentPortal !== storedCurrentPortal) {\n window.location.href = portal[0].Path;\n }\n }\n }, [currentPortal, portals]);\n\n useEffect(() => {\n if (insuredId) {\n apiGet(apiUrls.getUserInfo(insuredId))\n .then((response) => {\n if (response.data.insuredId) {\n setUserInfo(response.data);\n }\n });\n }\n },[insuredId])\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default PrivateRoutes\n","import { action } from \"easy-peasy\";\n\n \nconst companyListing = {\n testState: \"123\",\n secondState: \"ABC\",\n\n\n // ACTIONS\n updateThisState: action((state, payload) => {\n state.testState = payload\n }),\n\n // THUNK\n // updateCompanyId: thunk(async actions => {\n // const res = await fetch(\n // \"https://jsonplaceholder.typicode.com/todos?_limit=5\"\n // );\n // const todos = await res.json();\n \n // actions.setTodos(todos);\n // }),\n\n \n\n};\n\n export default companyListing;","import {createStore} from 'easy-peasy';\nimport companyListing from './companyListing.store';\n\nexport const store = createStore({\n companyListing: companyListing,\n});\n","import React, { useState, useEffect } from \"react\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport PublicApp from \"app/Public\";\nimport \"./style.css\";\nimport SplashScreen from \"pages/SplashScreen\";\nimport PrivateRoutes from \"app/PrivateRoutes\";\nimport { oauthClient, scopes } from \"./Auth\";\nimport { AppContext } from \"./AppContext\";\nimport LoaderAnimation from \"pages/LoaderAnimation\";\n\nimport CacheBuster from 'react-cache-buster';\nimport { version } from '../package.json';\n\nimport { StoreProvider } from \"easy-peasy\";\nimport { store } from './store';\nimport { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\nimport { ThemeProvider as ThemeProviderLegacy } from \"@mui/styles\";\n\nimport { alpha } from \"@mui/material\";\n\nimport { apiGet } from \"app/Services/ApiService\";\nimport { apiUrls } from \"./common/ApiUrls\";\n\nconst accessToken = localStorage.getItem(\"accessToken\");\nconst refreshToken = localStorage.getItem(\"refreshToken\");\nlet oauthToken = null;\nlet isAuthenticated = null;\nif (accessToken != null) {\n oauthToken = oauthClient.createToken(accessToken, refreshToken, \"bearer\");\n}\n\n// AXIM Orange - #f16824\n// AXIM Blue - #03049b\n// Lighter Blue - ##7171C5\n// AXIM Green - #7acd31\n// Light Gray - #eef6f7\n// Light Orange - #f5a983\n// Lighter Orange - #F7C9B3\n// Lighter Green - #6cb80d\n// Even Lighter Green - #cbe9b1\n\nfunction App() {\n const isProduction = process.env.NODE_ENV === 'production';\n const [checkingData, setCheckingData] = useState(true);\n const [apiTheme, setApiTheme] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n setTimeout(() => {\n setCheckingData(false);\n }, 1500);\n isAuthenticated = oauthToken ? true : false;\n }, []);\n //const token = localStorage.getItem('token');\n\n useEffect(() => {\n if (isLoading) {\n loadTheme();\n }\n }, []);\n\n const loadTheme = () => {\n apiGet(apiUrls.getTheme).then(\n (response) => {\n setApiTheme(response.data);\n setIsLoading(false);\n });\n }\n\n const theme = React.useMemo(() =>\n createTheme({\n palette: {\n mode: 'light',\n primary: {\n main: apiTheme?.primary ?? \"#000\",\n contrastText: apiTheme?.primaryText ?? \"#FFF\",\n veryLight: apiTheme ? alpha(apiTheme.primary, 0.1) : \"#000\",\n },\n secondary: {\n main: apiTheme?.secondary ?? \"#808080\",\n veryLight: apiTheme ? alpha(apiTheme.secondary, 0.1) : alpha(\"#808080\", 0.1),\n },\n Red: { main: \"#FF0000\" },\n Yellow: { main: \"#FFA500\" },\n Green: { main: \"#008000\" },\n Grey: { main: \"#808080\" },\n },\n components: {\n MuiTooltip: {\n styleOverrides: {\n tooltip: {\n backgroundColor: apiTheme?.primary ?? \"#000\",\n }\n }\n },\n MuiDialogTitle: {\n styleOverrides: {\n root: {\n backgroundColor: apiTheme?.primary ?? \"#000\",\n marginBottom: \"15px\",\n }\n }\n }\n },\n overrides: {\n MUIDataTableToolbarSelect: {\n title: {\n fontWeight: 600,\n }\n },\n MuiTableRow: {\n root: {\n '&$selected': {\n backgroundColor: \"#7acd31 !important\"\n },\n '&$selected&$hover:hover': {\n backgroundColor: \"#6cb80d !important\"\n }\n }\n }\n }\n }), [apiTheme]);\n return (\n } //If not pass, nothing appears at the time of new version check.\n metaFileDirectory={'.'} //If public assets are hosted somewhere other than root on your server.\n >\n \n \n \n \n \n \n \n {checkingData ? (\n
\n ) : isAuthenticated ? (\n
\n ) : (\n
\n )}\n
\n \n \n \n \n \n \n );\n}\n\nexport default App;\n","import {React, StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport 'material-icons/iconfont/material-icons.css';\n\nReactDOM.render(\n \n ,\n document.getElementById(\"root\")\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tableWrapper\":\"TableStyle_tableWrapper__3eT-n\",\"table\":\"TableStyle_table__1qJKy\",\"search\":\"TableStyle_search__ekk6V\",\"allTableDataWrapper\":\"TableStyle_allTableDataWrapper__1wHt2\",\"globalSearchWrapper\":\"TableStyle_globalSearchWrapper__1ogwu\",\"searchIcon\":\"TableStyle_searchIcon__3ZCRk\",\"tableActionWrapper\":\"TableStyle_tableActionWrapper__2REgF\",\"CompanyDropdownWrapper\":\"TableStyle_CompanyDropdownWrapper__1t7R0\",\"CompanyDropdown\":\"TableStyle_CompanyDropdown__3xDn-\",\"formWrapper\":\"TableStyle_formWrapper__1BRNn\",\"typeDropdownWrapper\":\"TableStyle_typeDropdownWrapper__2e1Ve\",\"payperiodDropdownWrapper\":\"TableStyle_payperiodDropdownWrapper__1oaxS\",\"sliderWrapper\":\"TableStyle_sliderWrapper__1kwn-\",\"InvoicesWrapper\":\"TableStyle_InvoicesWrapper__11-zA\",\"hwWrapper\":\"TableStyle_hwWrapper__3OyB6\",\"hwTwoColWrapper\":\"TableStyle_hwTwoColWrapper__16Lf5\",\"hwOneRcd\":\"TableStyle_hwOneRcd__2Kzqi\",\"hwThreeColRcdWrapper\":\"TableStyle_hwThreeColRcdWrapper__1VEJh\",\"firstTd\":\"TableStyle_firstTd__bI_yL\",\"dataTd20\":\"TableStyle_dataTd20__1XHRF\",\"dataTd30\":\"TableStyle_dataTd30__1S6Lr\",\"filtersWrapper\":\"TableStyle_filtersWrapper__16mHG\",\"indBtn\":\"TableStyle_indBtn__3rAjp\",\"ContributionWrappe\":\"TableStyle_ContributionWrappe__3SJoY\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"primaryButton\":\"ButtonStyle_primaryButton__dfarj\",\"buttonWrapper\":\"ButtonStyle_buttonWrapper__hKMcg\",\"CsubmitBtn\":\"ButtonStyle_CsubmitBtn__3hQP_\",\"CcancelBtn\":\"ButtonStyle_CcancelBtn__1J2Ci\",\"formWrapped\":\"ButtonStyle_formWrapped__25-3v\",\"formItem\":\"ButtonStyle_formItem__15Do0\",\"MuiSelect-select\":\"ButtonStyle_MuiSelect-select__3w2PH\",\"feedback-select\":\"ButtonStyle_feedback-select__cs-YY\",\"MuiFormControl-root\":\"ButtonStyle_MuiFormControl-root__2UiTO\",\"MuiTextField-root\":\"ButtonStyle_MuiTextField-root__2qqAn\",\"feedbackDropdown\":\"ButtonStyle_feedbackDropdown__2MJ5b\",\"feedbackSubject\":\"ButtonStyle_feedbackSubject__3mHWO\",\"feedbackTextarea\":\"ButtonStyle_feedbackTextarea__3nW0q\",\"fileUploadWrapper\":\"ButtonStyle_fileUploadWrapper__1LkxY\",\"CuploadBtnWrapper\":\"ButtonStyle_CuploadBtnWrapper__1Fc3S\",\"payperiodDropdownWrapper\":\"ButtonStyle_payperiodDropdownWrapper__F4AlD\",\"uploadFileWrapper\":\"ButtonStyle_uploadFileWrapper__qG9Ez\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"datePickerWrapper\":\"ModalStyles_datePickerWrapper__31hK2\",\"dateWrap\":\"ModalStyles_dateWrap__kjcXK\",\"terminateDate\":\"ModalStyles_terminateDate__3dtPK\",\"effectiveDate\":\"ModalStyles_effectiveDate__3iwks\",\"MuiTypography-colorTextSecondary\":\"ModalStyles_MuiTypography-colorTextSecondary__2xrvR\",\"empDataModal\":\"ModalStyles_empDataModal__2pPak\",\"MuiDialog-container\":\"ModalStyles_MuiDialog-container__1b-qS\",\"MuiDialog-paperScrollPaper\":\"ModalStyles_MuiDialog-paperScrollPaper__2j18D\",\"grid\":\"ModalStyles_grid__3KgfR\",\"cField\":\"ModalStyles_cField__1OZYw\",\"CustomTabsWrapper\":\"ModalStyles_CustomTabsWrapper__XiZ6K\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"nodeLogo\":\"SplashStyles_nodeLogo__hTbl-\",\"babelLogo\":\"SplashStyles_babelLogo__3pSUp\",\"reactLogo\":\"SplashStyles_reactLogo__3NwnY\",\"sassLogo\":\"SplashStyles_sassLogo__3i6YF\",\"webpackLogo\":\"SplashStyles_webpackLogo__3ar1i\",\"aximLogo\":\"SplashStyles_aximLogo__21rfD\",\"heartBeat\":\"SplashStyles_heartBeat__18YHi\",\"splashWrapper\":\"SplashStyles_splashWrapper__1Ptwo\",\"imgContainer\":\"SplashStyles_imgContainer__3uG_C\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"profileDropdown\":\"ProfileDropdown_profileDropdown__27_iT\",\"bulkDropdownWrapper\":\"ProfileDropdown_bulkDropdownWrapper__2kTzj\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"topbarWrapper\":\"Topbar_topbarWrapper__Wdp6u\",\"pageTitle\":\"Topbar_pageTitle__2fUfD\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"datePickerWrapper\":\"DatePickerStyles_datePickerWrapper__1npa4\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarWrapper\":\"Sidebar_sidebarWrapper__3K9NU\",\"menuIcon\":\"Sidebar_menuIcon__F5a_1\",\"menuTitle\":\"Sidebar_menuTitle__1Zf3i\",\"actions\":\"Sidebar_actions__1ImHa\",\"logout\":\"Sidebar_logout__fWuTW\",\"toggleSidebarIcon\":\"Sidebar_toggleSidebarIcon__1fcL4\",\"toggle\":\"Sidebar_toggle__bdxWO\",\"closed\":\"Sidebar_closed__3jdTo\",\"hideContent\":\"Sidebar_hideContent__3GT3E\",\"active\":\"Sidebar_active__3aXO0\",\"rightPanel\":\"Sidebar_rightPanel__33lSN\",\"closedRightPanel\":\"Sidebar_closedRightPanel__2wcKs\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"login\":\"login_login__2Yyhe\",\"inputControl\":\"login_inputControl__tROVp\",\"title\":\"login_title__uLCYY\",\"forgotPassword\":\"login_forgotPassword__3HzbB\",\"actions\":\"login_actions__1r88S\",\"primaryButton\":\"login_primaryButton__2udZk\",\"secondaryLink\":\"login_secondaryLink__nv1JQ\",\"unlockLogin\":\"login_unlockLogin__2IzTl\",\"loginBtn\":\"login_loginBtn__1NFgr\",\"authLoadWrapper\":\"login_authLoadWrapper__2pXQb\",\"authLoad\":\"login_authLoad__3yzIN\"};"],"sourceRoot":""} 
\n }\n else if (companyInfo.image && companyInfo.image.uri !== \"\") {\n a = 