props.onDownload(s.filter(id => canShowDownloadButton(table.rows.find(ri => ri.id === id))))}\n onDelete={props.onDelete}\n onSend={documents => setOpenModal({ show: true, documents })}\n />\n )\n }\n ];\n\n if (!props.hasSelectedProvider) {\n columns.splice(1, 0, {\n field: 'providerName',\n headerName: 'Provider Name',\n flex: 1,\n renderCell: (params) => (\n \n {params.value}\n \n )\n });\n }\n\n useEffect(() => {\n handleRowFiltering(null, null);\n }, [props.model]);\n\n // Returns the ISO week of the date.\n Date.prototype.getWeek = function () {\n var date = new Date(this.getTime());\n date.setHours(0, 0, 0, 0);\n date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);\n var week1 = new Date(date.getFullYear(), 0, 4);\n return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000\n - 3 + (week1.getDay() + 6) % 7) / 7);\n }\n\n function applyFilter(rows, optionID) {\n if (optionID === 0) {\n let thisWeek = new Date(Date.now()).getWeek();\n return rows.filter(r => r.uploadDate.getWeek() === thisWeek);\n } else if (optionID === 1) {\n let today = new Date(Date.now()).toLocaleDateString();\n return rows.filter(r => r.uploadDate.toLocaleDateString() === today);\n }\n return rows;\n }\n\n function applySearch(rows, text) {\n return rows.filter(r => r.fullText.includes(text.toLowerCase()));\n }\n\n function handleRowFiltering(action, value) {\n let t = Object.assign({}, table);\n\n if (action === \"filter\") {\n t.filterOption = value;\n t.rows = applyFilter(props.model, value.id);\n\n if (table.searchText) {\n t.rows = applySearch(t.rows, table.searchText);\n }\n } else if (action === \"search\") {\n if (!value) {\n return;\n }\n\n t.searchText = value;\n if (table.filterOption) {\n t.rows = applyFilter(props.model, table.filterOption.id);\n t.rows = applySearch(t.rows, value);\n } else {\n t.rows = applySearch(props.model, value);\n }\n } else if (action === \"clearFilter\") {\n t.filterOption = value;\n if (table.searchText) {\n t.rows = applySearch(props.model, table.searchText);\n } else {\n t.rows = props.model;\n }\n\n } else if (action === \"clearSearch\") {\n t.searchText = \"\";\n if (table.filterOption) {\n t.rows = applyFilter(props.model, table.filterOption.id);\n } else {\n t.rows = props.model;\n }\n } else {\n t.rows = t.filterOption\n ? applyFilter(props.model, t.filterOption.id)\n : props.model;\n if (table.searchText) {\n t.rows = applySearch(t.rows, table.searchText)\n }\n }\n t.changed = !t.changed;\n setTable(t);\n }\n\n return (\n \n \n \n \n {\n !currentUser.originalID &&\n <>\n props.onDownload?.(selection.filter(id => canShowDownloadButton(table.rows.find(ri => ri.id === id))))} disabled={selection.length < 1} />\n {\n currentUser.userType === userType.SacUser &&\n <>\n setOpenModal({ show: true, documents: selection })} disabled={selection.length < 1} />\n 1 ? 's' : '')}`}\n onSend={emails => {\n props.onSend?.(openModal.documents, emails);\n setSelection([]);\n setOpenModal({ show: false, documents: [] });\n }}\n onCancel={() => setOpenModal({ show: false, documents: [] })}\n />\n \n }\n \n {(props.showDeleteButton ?? true) &&\n 1 ? 's' : ''}`}\n onClick={e => props.onDelete?.(selection)}\n disabled={selection.length < 1}\n count={selection.length} />\n }\n {!!props.hasSelectedProvider && }\n \n \n }\n \n \n \n \n \n \n setPageSize(value)} />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst filters = {\n options: [\n { id: 0, title: \"This week\" },\n { id: 1, title: \"Today\" }\n ],\n getOptionLabel: (option) => option.title\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > button': {\n marginRight: theme.spacing(2),\n },\n },\n trucate: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n sendIcn: {\n display: \"none\",\n borderRadius: \"50%\",\n marginLeft: \"10px\",\n padding: \"4px\",\n \"& > svg\": {\n color: \"#8FE1F4\",\n fontSize: \"16px\",\n transform: \"rotate(-45deg)\"\n\n },\n },\n}));","import React, { useState, useEffect } from 'react';\nimport { makeStyles, Tabs, Tab, Typography } from '@material-ui/core';\nimport { useProviderChangeEvent, useProviderContext, useUserContext, fileUpDownLoadManager } from '../../Shared';\nimport TabPanel from '../../TabPanel';\nimport DocumentTable from '../DocumentTable';\nimport { fileUpDownLoadAction, userType } from '../../../constants';\nimport { trackPromise } from 'react-promise-tracker';\nimport { delay } from '../../../_helpers';\nimport { documentApi } from '../../../api';\nimport env from \"../../../env\";\n\nexport default function DocumentTab(props) {\n\n const currentUser = useUserContext();\n const providerContext = useProviderContext();\n const classes = useStyles();\n\n const [model, setModel] = useState();\n const [selectedTabIndex, setSelectedTabIndex] = useState(0);\n\n function init() {\n if (model) return;\n\n loadDocuments();\n }\n\n useEffect(init, []);\n useProviderChangeEvent(\"documents\", loadDocuments);\n\n function Document(doc) {\n this.id = doc.id;\n this.name = doc.name;\n this.providerName = doc.providerName;\n this.uploadByFirstName = doc.uploadByFirstName;\n this.uploadByLastName = doc.uploadByLastName;\n this.uploadDate = new Date(`${doc.uploadDate.slice(0, 19)}.000Z`);\n this.description = doc.description;\n this.firstName = doc.firstName;\n this.lastName = doc.lastName;\n this.account = doc.account;\n this.userType = doc.userType;\n this.sentTimes = doc.sentTimes;\n\n Object.defineProperty(this, \"uploadByFullName\", {\n get() {\n return `${this.uploadByFirstName} ${this.uploadByLastName}`;\n }\n });\n\n Object.defineProperty(this, \"fullText\", {\n get() {\n return [...Object.values(this).filter(v => typeof v === \"string\"), this.uploadDate.toLocaleDateString()].join(\"�\").toLowerCase();\n }\n });\n }\n\n function loadDocuments() {\n trackPromise(documentApi.getAll(providerContext.current?.id ?? null).then(async data => {\n let docs = [];\n for (let i = 0; i < data.length; i++) {\n docs.push(new Document(data[i]));\n }\n setModel(docs);\n\n // do artificial delay to load data in grid\n await delay(1000);\n }), \"documents\");\n }\n\n function onDownload(selection) {\n if (!(selection && selection.length > 0)) return;\n \n const docModel = {\n metadata: selection,\n name: selection.length > 1\n ? new Date(Date.now()).toISOString().replaceAll(/T|-|:|\\./g, '_').replace('Z', '.zip')\n : model.find(d => d.id === selection[0]).name,\n do: fileUpDownLoadAction.download,\n };\n fileUpDownLoadManager.upDownLoad(docModel);\n }\n\n function onUpload(doc) {\n doc.onProcessed = onUploaded;\n fileUpDownLoadManager.upDownLoad(doc);\n }\n\n function onUploaded(doc) {\n if (doc) {\n setModel(oldModel => {\n const m = Object.assign([], oldModel);\n m.unshift(new Document(doc));\n \n return m.sort((a,b) => b.id - a.id);\n });\n }\n }\n\n function onDelete(selection) {\n trackPromise(documentApi.delete(selection).then(data => {\n let m = model.filter(doc => !(selection.includes(doc.id)));\n setModel(m);\n }), \"documents\");\n }\n\n function onSend(selection, emails) {\n trackPromise(documentApi.send(selection).then(data => {\n window.location.href = `mailto:${emails.join(';')}?body=${env.url}/api/public/download?key=${data}`;\n let m = Object.assign([], model);\n let sentDocs = m.filter(doc => selection.includes(doc.id));\n sentDocs.forEach(doc => {\n doc.sentTimes++;\n let index = m.findIndex(d => d.id === doc.id);\n m.splice(index, 1, doc);\n });\n setModel(m);\n }), \"documents\")\n }\n\n return (\n \n \n Documents\n \n { setSelectedTabIndex(newValue) }}\n aria-label=\"simple tabs example\"\n indicatorColor=\"primary\"\n >\n \n \n \n \n \n \n \n \n d.userType === currentUser.userType) : []}\n hasSelectedProvider={providerContext.current !== null}\n onDownload={onDownload}\n onDelete={onDelete}\n onUpload={onUpload}\n onSend={onSend}\n />\n \n \n d.userType !== currentUser.userType) : []}\n hasSelectedProvider={providerContext.current !== null}\n showDeleteButton={currentUser.userType === userType.SacUser}\n onDownload={onDownload}\n onDelete={onDelete}\n onUpload={onUpload}\n onSend={onSend}\n />\n \n
\n )\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n backgroundColor: \"white\",\n borderRadius: \"10px\"\n },\n tabs: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n '& .MuiTab-root': {\n [theme.breakpoints.down('sm')]: {\n width: '33.3%',\n },\n '&:hover': {\n backgroundColor: '#f7f7f7',\n },\n },\n },\n margPadd: {\n marginLeft: theme.spacing(3),\n marginRight: theme.spacing(3),\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(2),\n },\n}));","import React from 'react';\nimport { makeStyles, Box } from '@material-ui/core';\nimport { useProviderContext } from \"../Shared\";\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n marginTop: theme.spacing(4),\n padding: theme.spacing(0, 9, 4, 9),\n },\n imgContainer: {\n padding: \"0\",\n marginBottom: theme.spacing(1),\n \"& img\": {\n display: \"block\",\n maxWidth: \"100%\",\n height: \"auto\",\n maxHeight: \"125px\",\n },\n },\n}));\n\nconst ProviderLogo = () => {\n\n const classes = useStyles();\n const providerContext = useProviderContext();\n if (!providerContext.current?.logoUrl)\n return null;\n\n return (\n \n {
}\n \n );\n};\n\nexport default ProviderLogo;","import React from 'react';\nimport DocumentTab from '../Documents/DocumentTab';\nimport { makeStyles, Container } from '@material-ui/core';\nimport ProviderLogo from '../Provider/ProviderLogo';\n\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n padding: theme.spacing(9, 2),\n [theme.breakpoints.up('lg')]: {\n padding: theme.spacing(4, 9),\n },\n },\n imgContainer: {\n padding: \"0\",\n width: \"160px\",\n marginBottom: theme.spacing(1),\n \"& img\": {\n maxWidth: \"100%\",\n height: \"auto\",\n },\n },\n}));\n\n\n\nconst Documents = () => {\n\n const classes = useStyles();\n\n return (\n \n \n \n \n );\n};\n\nexport { Documents };","import React from 'react';\nimport { Button } from '@material-ui/core';\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nfunction ReportSendButton(props) {\n const classes = useStyles();\n \n return ;\n}\n\nconst useStyles = makeStyles(theme => ({\n root: {\n backgroundColor: '#10224b',\n textTransform: 'none',\n minWidth: 100,\n \n '& .MuiButton-label': {\n color: \"#fff\",\n },\n \n '&:hover': {\n backgroundColor: 'rgba(1, 18, 48, 0.8)',\n },\n },\n}));\n\nexport { ReportSendButton };","import React from 'react';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport SendOutlinedIcon from '@material-ui/icons/SendOutlined';\n\nfunction ReportSendIconButton(props) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport { ReportSendIconButton };\n","import React from 'react';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport GetAppOutlinedIcon from '@material-ui/icons/GetAppOutlined';\n\nfunction ReportExportIconButton(props) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport { ReportExportIconButton };","import React from 'react';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';\n\nfunction ReportRunIconButton(props) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport { ReportRunIconButton };","import React, { useEffect, useRef, useState } from \"react\";\nimport { DataGrid } from '@material-ui/data-grid';\nimport { Button, makeStyles, Tooltip } from '@material-ui/core';\nimport { trackPromise } from \"react-promise-tracker\";\nimport { reportsApi } from \"../../../../api\";\nimport { toast, utcToLocalDate } from \"../../../../_helpers\";\nimport { ReportRunIconButton, ReportExportIconButton, ReportSendIconButton } from \"../Actions\";\nimport { useProviderChangeEvent, useProviderContext, useUserContext } from \"../../../Shared\";\nimport { useHistory } from \"react-router-dom\";\nimport { userType } from \"../../../../constants\";\n\nfunction ReportDataGrid(props) {\n const [reports, setReports] = useState({ data: [], total: 0 });\n const [pageSize] = useState(15);\n const [page, setPage] = useState(1);\n const [sort, setSort] = useState([{ field: 'name', sort: \"asc\" }]);\n let canUpdateGrid = useRef(false);\n const providerContext = useProviderContext();\n const currentUser = useUserContext();\n const history = useHistory();\n\n const classes = useStyles();\n const columns = [\n {\n field: 'name',\n headerName: 'Name',\n flex: 1,\n renderCell: params => (\n <>\n \n \n \n \n ),\n },\n {\n field: 'description',\n headerName: 'Description',\n flex: 1,\n renderCell: params => (\n \n {params.value}\n \n ),\n },\n {\n field: 'uploadDate',\n headerName: 'Upload date',\n flex: 1,\n renderCell: params => {\n const date = utcToLocalDate(params.value).toLocaleDateString();\n return (\n \n {date}\n \n );\n },\n },\n {\n field: \"actions\",\n headerName: 'Actions',\n flex: 1,\n sortable: false,\n renderCell: params => (\n \n props.onRun(params.row.id.toString())} />\n props.onExport(params.row.id.toString())} />\n {currentUser.userType === userType.SacUser\n && props.onSend({ id: params.row.id.toString(), name: params.row.name })} />}\n
\n ),\n },\n ];\n\n useEffect(dataBind, []);\n useEffect(updateData, [page, sort]);\n useEffect(resetGridProps, [props.category, props.search]);\n\n useProviderChangeEvent(\"reports\", () => {\n if (providerContext.current) return;\n\n history.push('/home');\n toast.warning('Provider must be selected for report view');\n });\n\n function updateDataWithRet() {\n const { category, search } = props;\n return trackPromise(reportsApi.getReports(category, search, page, pageSize, sort[0]).then(setReports), \"reports\");\n }\n\n function updateData() {\n if (canUpdateGrid.current)\n updateDataWithRet();\n }\n\n function resetGridProps() {\n let changed = false;\n if (page !== 1) {\n setPage(1);\n changed = true;\n }\n if (sort[0]?.field !== \"name\" || sort[0]?.sort !== \"asc\") {\n setSort([{ field: 'name', sort: \"asc\" }]);\n changed = true;\n }\n\n if (!changed)\n updateData();\n }\n\n function dataBind() {\n if (!providerContext.current) {\n history.push('/not-found');\n return;\n }\n\n updateDataWithRet().then(() => canUpdateGrid.current = true);\n }\n\n if (!providerContext.current) return null;\n return (\n \n setPage(params.page)}\n rowCount={reports.total}\n sortingMode=\"server\"\n sortModel={sort}\n onSortModelChange={params => setSort(params.sortModel)}\n disableColumnFilter\n />\n
\n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n dataGrid: {\n width: '100%',\n position: 'relative',\n height: \"620px\",\n '& > div:first-child': {\n height: '100% !important'\n },\n \n '& .MuiDataGrid-cell': {\n outline: 'none',\n '&:focus': {\n outline: 'none',\n },\n },\n '& .MuiDataGrid-colCellWrapper': {\n backgroundColor: \"#E1F2FF\",\n },\n '& .MuiDataGrid-row:hover .MuiBox-root': {\n display: \"flex\",\n },\n },\n name: {\n color: \"#10224B\",\n fontWeight: \"700\",\n textTransform: \"none\",\n textDecoration: \"underline\",\n padding: 0,\n display: 'inline',\n whiteSpace: 'pre-line',\n \n '&.MuiButton-text:hover': {\n textDecoration: \"underline\",\n },\n '& > .MuiButton-label': {\n textAlign: 'left'\n },\n },\n truncate: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n}));\n\nexport default ReportDataGrid;","import React, { useState } from 'react';\nimport { Button, ButtonGroup, makeStyles } from \"@material-ui/core\";\nimport { getToday } from \"../../../../../_helpers\";\n\nconst periods = [{ id: 1, name: \"Day\" }, { id: 2, name: \"Month\" }, { id: 3, name: \"Year\" }];\n\nconst ReportDatePeriod = ({ onChange }) => {\n const classes = useStyles();\n const [clickedPeriodId, setClickedPeriodId] = useState(1);\n\n function getVariant(id) {\n return clickedPeriodId === id ? 'contained' : 'outlined';\n }\n\n function onClick(id) {\n if (clickedPeriodId === id) return;\n\n setClickedPeriodId(id);\n\n const end = getToday();\n let start = new Date(end);\n switch (id) {\n case 1:\n start.setDate(start.getDate() - 1);\n break;\n case 2:\n start.setMonth(start.getMonth() - 1);\n break;\n case 3:\n start.setFullYear(start.getFullYear() - 1);\n break;\n default:\n throw new Error(\"Period is not specified\");\n }\n\n onChange({ start, end });\n }\n\n return (\n \n {periods.map(p =>\n )}\n \n );\n};\n\nconst useStyles = makeStyles((theme) => ({\n btnGroup: {\n width: \"100%\",\n justifyContent: \"flex-end\",\n '& > button': {\n minWidth: 100,\n textTransform: 'none',\n [theme.breakpoints.down('xs')]: {\n minWidth: \"33.3%\",\n },\n '&.MuiButton-contained': {\n backgroundColor: '#10224b',\n\n '& .MuiButton-label': {\n color: \"#fff\",\n },\n },\n },\n },\n}));\n\nexport default ReportDatePeriod;","import React, { useEffect, useState } from \"react\";\nimport { Grid, makeStyles, TextField } from '@material-ui/core';\nimport moment from \"moment-timezone\";\nimport { utcToLocalDate } from \"../../../../../_helpers\";\n\nfunction ReportDateRangePicker({ initialValue, forceUpdate, onForceUpdated, onChange, onEnter }) {\n const classes = useStyles();\n\n const [range, setRange] = useState({\n start: moment(utcToLocalDate(initialValue.start)).format(\"YYYY-MM-DD\"),\n end: moment(utcToLocalDate(initialValue.end)).format(\"YYYY-MM-DD\"),\n });\n\n useEffect(forceUpdateExec, [forceUpdate]);\n\n function forceUpdateExec() {\n if (!forceUpdate) return;\n\n setRange({\n start: moment(utcToLocalDate(initialValue.start)).format(\"YYYY-MM-DD\"),\n end: moment(utcToLocalDate(initialValue.end)).format(\"YYYY-MM-DD\"),\n });\n if (onForceUpdated) onForceUpdated();\n }\n\n function pickDate(name) {\n return e => {\n setRange({ ...range, [name]: e.target.value });\n\n const targetDate = new Date(e.target.value);\n if (!isNaN(targetDate.getTime()))\n setDateIfChanged({ [name]: targetDate });\n };\n }\n\n function setDateIfChanged(newRange) {\n let isChanged = false;\n\n const start = new Date(range.start);\n const end = new Date(range.end);\n\n if (newRange.start && start.getTime() !== newRange.start.getTime())\n isChanged = true;\n if (newRange.end && end.getTime() !== newRange.end.getTime)\n isChanged = true;\n\n if (isChanged)\n onChange({ start, end, ...newRange });\n }\n\n return (\n \n e.key === 'Enter' ? onEnter?.({ start: new Date(range.start), end: new Date(range.end) }) : null}\n className={classes.dateField}\n InputLabelProps={{ shrink: true }}\n variant=\"outlined\"\n size=\"small\"\n />\n -\n e.key === 'Enter' ? onEnter?.({ start: new Date(range.start), end: new Date(range.end) }) : null}\n className={classes.dateField}\n InputLabelProps={{ shrink: true }}\n variant=\"outlined\"\n size=\"small\"\n />\n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n justifyContent: \"flex-end\",\n display: 'flex',\n alignItems: 'center',\n [theme.breakpoints.down('xs')]: {\n width: \"100%\",\n },\n },\n dateField: {\n width: 200,\n [theme.breakpoints.down('xs')]: {\n width: \"100%\",\n },\n '& .MuiInputBase-input': {\n paddingTop: 7,\n paddingBottom: 7,\n },\n },\n delimiter: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n}));\n\nexport default ReportDateRangePicker;","import React, { useState } from 'react';\nimport { Box, Grid, makeStyles } from \"@material-ui/core\";\nimport ReportDateRangePicker from \"./ReportDateRangePicker\";\n// import ReportDatePeriod from \"./ReportDatePeriod\";\n\nfunction ReportDatePickBox({ value, onDatePick }) {\n const classes = useStyles();\n\n const [forceUpdate, setForceUpdate] = useState(false);\n //\n // function forceDatePick(date) {\n // setForceUpdate(true);\n // onDatePick(date);\n // }\n\n return (\n <>\n \n Date Range:\n setForceUpdate(false)} onChange={onDatePick} />\n \n {/**/}\n {/* */}\n {/**/}\n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n gridItem: {\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n fieldName: {\n marginRight: theme.spacing(1.5),\n [theme.breakpoints.down('xs')]: {\n display: \"none\",\n },\n },\n}));\n\nexport default ReportDatePickBox;","import React from 'react';\nimport { Grid, Typography, Switch, makeStyles } from \"@material-ui/core\";\nimport { useProviderContext } from \"../Shared\";\n\nfunction ProviderSystemSwitch({ value, onChange }) {\n const providerContext = useProviderContext();\n const classes = useStyles();\n\n if (!providerContext.current?.hasSystem) return null;\n return (\n \n \n !!value ? onChange(false) : null}>Provider\n \n onChange(!value)} name=\"provider-system-switch\" />\n \n !value ? onChange(true) : null}>System\n \n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n '& > .MuiGrid-root': {\n cursor: 'pointer',\n\n '& *': {\n color: '#10224B',\n },\n\n '& .MuiSwitch-thumb': {\n color: '#c4c4c4',\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: '#10224B',\n },\n\n '&.switch-text': {\n fontWeight: 500,\n\n '&:nth-child(1)': {\n paddingRight: 0\n },\n '&:nth-child(3)': {\n paddingLeft: 0\n }\n },\n },\n },\n}));\n\nexport default ProviderSystemSwitch;","import React, { useEffect, useRef, useState } from 'react';\nimport { Box, Button, TextField, makeStyles, RadioGroup, FormControlLabel, Radio } from \"@material-ui/core\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { configurationApi } from \"../../../../../api\";\nimport { useProviderContext } from \"../../../../Shared\";\nimport env from \"../../../../../env\";\n\nconst labels = [\"Admin Users\", \"Contacts\"];\n\nfunction ReportSendForm({ data, onClose }) {\n const classes = useStyles();\n const providerContext = useProviderContext();\n \n const sacUsers = useRef([]);\n const contacts = useRef([]);\n \n const [autocompleteData, setAutocompleteData] = useState({\n options: [],\n label: labels[1] + ' *',\n });\n const [selectedItems, setSelectedItems] = useState([]);\n \n useEffect(init, []);\n \n function init() {\n trackPromise(configurationApi.getUserProviderContacts().then(d => {\n setAutocompleteData({ ...autocompleteData, options: d });\n contacts.current = d;\n }));\n trackPromise(configurationApi.getSacUsers().then(d => sacUsers.current = d));\n }\n \n function sendReport(event) {\n event.preventDefault();\n \n const { report, dateRange, runBySystem, insurer } = data;\n const items = {\n ProviderID: providerContext.current.id,\n StartDate: dateRange.start.toISOString(),\n EndDate: dateRange.end.toISOString(),\n BySystem: runBySystem,\n };\n if (insurer)\n items.Insurer = insurer;\n \n const queryString = Object.getOwnPropertyNames(items).reduce((p, c) => p + `${c}=${encodeURIComponent(items[c])}&`, '').slice(0, -1);\n const downloadUrl = `${env.url}/api/public/downloadreport/${report.id}?${encodeURIComponent(queryString)}`;\n const body = `Hello,%0D%0A\n%0D%0A\nPlease follow the link below to view the monthly report(s) for ${providerContext.current.name} for ${dateRange.start.toLocaleDateString('en-US')}-${dateRange.end.toLocaleDateString('en-US')}%0D%0A\n${downloadUrl}%0D%0A\n%0D%0A\nLet us know if you have any questions.%0D%0A\n%0D%0A\nThank you,%0D%0A\nSAC Support`\n const to = selectedItems.map(c => c.email).join(';');\n const subject = encodeURIComponent(`SACLink Report: ${report.name}`);\n window.location.href = `mailto:${to}?subject=${subject}&body=${body}`;\n onClose();\n }\n \n function handleUserTypeChange(e) {\n const val = e.target.value;\n \n setSelectedItems([]);\n setAutocompleteData({\n options: val === \"0\" ? sacUsers.current : contacts.current,\n label: labels[val] + ' *',\n });\n }\n \n return (\n \n );\n}\n\nconst useStyles = makeStyles(theme => ({\n form: {\n width: 500,\n },\n radio: {\n marginBottom: theme.spacing(1),\n \n '& .MuiFormControlLabel-root > .MuiIconButton-root': {\n color: \"#10224B\"\n }\n },\n actions: {\n marginTop: theme.spacing(4),\n \n '& > button + button': {\n marginLeft: 10,\n },\n },\n}));\n\nexport default ReportSendForm;","import React from 'react';\nimport { Box, makeStyles } from \"@material-ui/core\";\nimport ReportSendForm from \"./ReportSendForm\";\nimport { BlockSpinner, SaclinkModal } from \"../../../../Shared\";\n\nfunction ReportSendModal({ isOpen, data, onClose }) {\n const classes = useStyles();\n \n return (\n \n \n \n \n \n \n );\n}\n\nconst useStyles = makeStyles(theme => ({\n modalBox: {\n position: 'relative',\n padding: theme.spacing(2, 2, 0),\n },\n}));\n\nexport default ReportSendModal;","import React, { useEffect, useState } from 'react';\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport { TextField } from \"@material-ui/core\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { reportsApi } from \"../../../api\";\n\nconst ReportInsurerSelect = ({ value, onChange }) => {\n const [insurers, setInsurers] = useState([]);\n \n useEffect(init, []);\n \n function init() {\n trackPromise(reportsApi.getInsurers().then(setInsurers));\n }\n \n return (\n onChange(newValue)}\n renderInput={(params) => }\n />\n );\n};\n\nexport default ReportInsurerSelect;","import React, { useState } from 'react';\nimport { makeStyles, Box, Grid, Paper } from '@material-ui/core';\nimport ReportDataGrid from './ReportDataGrid';\nimport { BlockSpinner, useUserContext } from \"../../../Shared\";\nimport ReportDatePickBox from \"./Date\";\nimport { getDayBefore, getToday } from \"../../../../_helpers\";\n// import DataTableSearch from \"../../../Shared/DataTableSearch\";\nimport ProviderSystemSwitch from \"../../../Provider/ProviderSystemSwitch\";\nimport { ReportSendModal } from \"../Modals\";\nimport ReportInsurerSelect from \"../ReportInsurerSelect\";\nimport { userType } from \"../../../../constants\";\n\nconst end = getToday();\nconst start = getDayBefore(end);\n\nexport default function ReportTable(props) {\n const classes = useStyles();\n const currentUser = useUserContext();\n \n // const [filter, setFilter] = useState(0);\n const [search/*, setSearch*/] = useState('');\n const [dateRange, setDateRange] = useState({ start, end });\n const [runBySystem, setRunBySystem] = useState(false);\n const [openModal, setOpenModal] = useState({ show: false, report: null });\n const [insurer, setInsurer] = useState(null);\n \n return (\n \n {/**/}\n {/* */}\n {/**/}\n \n \n {/**/}\n {/* */}\n {/* setPageSize(value)} />*/}\n {/* */}\n {/**/}\n {/**/}\n {/* */}\n {/**/}\n \n \n \n \n \n {/* setSearch(v)} />*/}\n \n \n \n {\n currentUser.userType === userType.SacUser && (\n \n \n \n \n \n )\n }\n \n {props.category ? (\n <>\n \n props.onRun(id, dateRange, runBySystem, insurer)}\n onExport={id => props.onExport(id, dateRange, runBySystem, insurer)}\n onSend={report => setOpenModal({ show: true, report: { report, dateRange, runBySystem, insurer } })}\n />\n \n ) : null}\n \n setOpenModal({ show: false, report: null })}\n />\n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n padding: theme.spacing(2),\n boxSizing: \"border-box\",\n },\n paper: {\n position: 'relative',\n padding: theme.spacing(1),\n boxSizing: \"border-box\",\n '& .MuiTypography-h5': {\n paddingTop: theme.spacing(3),\n fontWeight: \"500\",\n },\n },\n}));","import React, { useState } from 'react';\nimport { Box, Button, ButtonGroup, makeStyles } from \"@material-ui/core\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { reportsApi } from \"../../../api\";\nimport { useZoomAnimationEffect, withZoomAnimation } from \"../../Shared\";\n\nfunction ReportCategoryButtonGroup(props) {\n const [categories, setCategories] = useState([]);\n const classes = useStyles();\n\n useZoomAnimationEffect(init, props);\n\n function init() {\n return trackPromise(reportsApi.getCategories().then((data) => {\n setCategories(data);\n if (data[0])\n props.onSelect(data[0].id);\n }), \"report-categories\");\n }\n\n return (\n \n \n {categories.map(c => )}\n \n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n group: {\n padding: theme.spacing(2, 0),\n '& .MuiButtonBase-root': {\n padding: theme.spacing(1.5),\n border: 'none',\n textTransform: \"none\",\n },\n },\n selected: {\n fontWeight: \"bold\",\n backgroundColor: \"rgba(16, 34, 75, 0.04)\",\n }\n}));\n\nexport default withZoomAnimation(ReportCategoryButtonGroup);","import React, { useState } from 'react';\nimport { Container, makeStyles, Grid, Typography, Paper } from '@material-ui/core';\nimport ProviderLogo from '../../Provider/ProviderLogo';\nimport { BlockSpinner } from '../../Shared';\nimport ReportTable from './Table';\nimport ReportCategoryButtonGroup from \"./ReportCategoryButtonGroup\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { reportsApi } from \"../../../api\";\n\nexport default function Reports(props) {\n\n const classes = useStyles();\n const [category, setCategory] = useState(null);\n \n function exportHandler(id, date, runBySystem, insurer) {\n trackPromise(reportsApi.export(id, date.start, date.end, runBySystem, insurer), \"reports\");\n }\n \n function runHandler(id, date, runBySystem, insurer) {\n props.history.push(`/reports/${id}`, { date, runBySystem, insurer });\n }\n\n return (\n \n \n \n \n \n Reports\n \n \n \n \n \n \n \n \n \n );\n}\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n padding: theme.spacing(9, 2),\n [theme.breakpoints.up('lg')]: {\n padding: theme.spacing(4, 9),\n },\n },\n paper: {\n borderRadius: \"10px\",\n padding: theme.spacing(1, 0),\n boxSizing: \"border-box\",\n '& .MuiTypography-h5': {\n paddingTop: theme.spacing(3),\n fontWeight: \"500\",\n },\n '& *': {\n color: '#10224B',\n },\n },\n}));","import React, { useState } from 'react';\nimport { makeStyles, Typography, Box, Link } from '@material-ui/core';\nimport locationIcon from \"../../../assets/svg/location.svg\";\nimport phoneIcon from \"../../../assets/svg/phone.svg\";\nimport websiteIcon from \"../../../assets/svg/url.svg\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { useProviderChangeEvent, useProviderContext, useZoomAnimationEffect, withZoomAnimation } from \"../../Shared\";\nimport { homeApi } from '../../../api';\n\nconst useStyles = makeStyles(theme => ({\n boxLogo: {\n '& img': {\n display: \"block\",\n maxWidth: \"100%\",\n height: \"auto\",\n maxHeight: \"105px\",\n },\n },\n boxName: {\n '& p': {\n color: \"#10224B\",\n lineHeight: \"1.4em\",\n fontSize: \"18px\",\n [theme.breakpoints.down('md')]: {\n fontSize: \"16px\",\n },\n },\n },\n boxInfo: {\n '& h6': {\n color: \"#4A4A4A\",\n fontWeight: \"400\",\n fontSize: \"16px\",\n [theme.breakpoints.down('md')]: {\n fontSize: \"14px\",\n },\n },\n },\n icon: {\n marginRight: theme.spacing(3),\n width: \"20px\",\n [theme.breakpoints.down('md')]: {\n marginRight: theme.spacing(1),\n },\n },\n linkStyle: {\n textTransform: \"lowercase\",\n wordBreak: \"break-word\",\n },\n}));\n\nconst ProviderInfo = (props) => {\n const classes = useStyles();\n const providerContext = useProviderContext();\n const [provider, setProvider] = useState(null);\n\n useZoomAnimationEffect(getProviderInfo, props);\n\n useProviderChangeEvent(\"provider-info\", getProviderInfo)\n\n function getProviderInfo() {\n return providerContext.current\n ? trackPromise(homeApi.getProviderInfo().then(setProvider), \"provider-info\")\n : setProvider(null);\n }\n \n function getFormattedPhone(value) {\n const numbers = value.replace(/[() -]/g, '');\n return `(${numbers.slice(0, 3)}) ${numbers.slice(3, 6)}-${numbers.slice(6)}`;\n }\n\n if (!provider) return null;\n return (\n <>\n {provider.logoUrl ?\n \n 
\n : null}\n {provider.name ?\n \n \n {provider.name}\n \n : null}\n {provider.address ?\n \n 
\n \n {provider.address}\n \n : null}\n {provider.phone ?\n \n 
\n \n {getFormattedPhone(provider.phone)}\n \n : null}\n {provider.website ?\n \n 
\n \n {provider.website}\n \n : null}\n \n );\n};\n\nexport default withZoomAnimation(ProviderInfo);\n","import React, { useState, useRef, useEffect } from 'react';\nimport { Line } from 'react-chartjs-2';\nimport { makeStyles, MenuItem, Select, Tabs, Tab, Box } from \"@material-ui/core\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { chartApi } from '../../api';\nimport ProviderSystemSwitch from \"../Provider/ProviderSystemSwitch\";\n\nconst ReferenceTrendlineChart = ({ providerID, variant }) => {\n const classes = useStyles();\n const data = useRef();\n const [runBySystem, setRunBySystem] = useState(false);\n\n const [crossing, setCrossing] = useState({\n x: xAxis.Year,\n y: yAxis.GrossReferral,\n chartData: {}\n });\n \n useEffect(fetchData, [runBySystem]);\n useEffect(onProviderChange, [providerID]);\n \n function fetchData(systemRun = runBySystem) {\n trackPromise(chartApi.getCreatedClaimsData(providerID, systemRun).then(d => {\n \n let year = [], count = [], month = [], monthCount = [], grossSum = [], grossVal = [];\n \n for (const dataObj of d) {\n month.push((dataObj.month) + \" / \" + (dataObj.year));\n monthCount.push(dataObj.count);\n grossVal.push(dataObj.grossReferralSum);\n }\n \n let sort = mergeValue(d);\n \n for (const ob of sort) {\n year.push(ob.year);\n count.push(ob.count);\n grossSum.push(ob.grossReferralSum);\n }\n \n data.current = {\n yearData: year,\n countDataYear: count,\n monthData: month,\n countDataMonth: monthCount,\n grossYear: grossSum,\n grossMonth: grossVal,\n };\n \n setCrossing({\n ...crossing,\n chartData: createChartData(crossing.x, crossing.y),\n });\n }), variant);\n }\n \n function onProviderChange() {\n if (!data.current) return; // worked only not for first call\n \n const system = false;\n setRunBySystem(system);\n if (system === runBySystem)\n fetchData(system);\n }\n \n const mergeValue = (o) => {\n return [...o].reduce((acc, val,) => {\n const { year, count, grossReferralSum } = val;\n const ind = acc.findIndex(el => el.year === year);\n if (ind !== -1) {\n acc[ind].count += count;\n acc[ind].grossReferralSum += grossReferralSum;\n } else {\n acc.push({\n year,\n count,\n grossReferralSum,\n });\n }\n return acc;\n }, []);\n }\n\n const createChartData = (x, y) => {\n return {\n labels: x === xAxis.Year ? data.current.yearData : data.current.monthData,\n datasets: [\n {\n label: x === xAxis.Year\n ? y === yAxis.GrossReferral\n ? \"Gross Referral (year)\" : \"Created Claims (year)\"\n : y === yAxis.GrossReferral\n ? \"Gross Referral (month)\" : \"Created Claims (month)\",\n data: x === xAxis.Year\n ? y === yAxis.GrossReferral\n ? data.current.grossYear : data.current.countDataYear\n : y === yAxis.GrossReferral\n ? data.current.grossMonth : data.current.countDataMonth,\n fill: false,\n borderColor: '#61BDFF',\n pointBorderColor: '#E94E1B',\n pointBorderWidth: '2',\n pointRadius: '4'\n }\n ],\n }\n }\n\n const handleCrossingOptionChange = (axisName, axisValue) => {\n if (crossing[axisName] !== axisValue) {\n let cr = { ...crossing, [axisName]: axisValue };\n cr.chartData = createChartData(cr.x, cr.y)\n setCrossing(cr);\n }\n };\n\n return (\n \n
\n handleCrossingOptionChange('y', e.target.value)}\n MenuProps={{\n anchorOrigin: {\n vertical: \"bottom\",\n horizontal: \"left\"\n },\n getContentAnchorEl: null\n }}\n >\n \n \n \n handleCrossingOptionChange('x', v)}\n indicatorColor=\"primary\"\n >\n \n \n \n \n {\n providerID ?\n
\n \n \n : null\n }\n
= 1000000000) {\n return (label / 1000000000).toFixed(1).replace(/\\.0$/, '') + 'G';\n }\n if (label >= 1000000) {\n return (crossing.category === \"GrossReferral\" ? '$' : '') + (label / 1000000).toFixed(1).replace(/\\.0$/, '') + 'M';\n }\n if (label >= 1000) {\n return (crossing.category === \"GrossReferral\" ? '$' : '') + (label / 1000).toFixed(1).replace(/\\.0$/, '') + 'K';\n }\n return (crossing.category === \"GrossReferral\" ? '$' : '') + label;\n\n }\n },\n }\n ]\n }\n }}\n />\n \n
\n setCrossing({ ...crossing, y: e.target.value })}\n MenuProps={{\n anchorOrigin: {\n vertical: \"bottom\",\n horizontal: \"left\",\n },\n getContentAnchorEl: null,\n }}\n >\n {yAxis.map((v, i) => )}\n \n setCrossing({ ...crossing, x })}\n indicatorColor=\"primary\"\n >\n {xAxis.map((v, i) => )}\n \n \n {\n providerID ?\n
\n \n \n : null\n }\n
\n {\n legends.length ?\n
\n {legends.map((item, i) => {\n return (\n - legendClickHandler(i)}>\n \n {item.text}\n
\n );\n })}\n
\n : null\n }\n
\n {legends.map((item, i) => (\n - legendClickHandler(i)}>\n \n {item.text}\n
\n ))}\n
\n : null\n }\n \n );\n}\n\nfunction createChartData(data) {\n return {\n labels: data.map(i => i.name),\n datasets: [\n {\n data: data.map(i => i.sum),\n backgroundColor: data.map(function () {\n let r = Math.floor(Math.random() * 255);\n let g = Math.floor(Math.random() * 255);\n let b = Math.floor(Math.random() * 255);\n return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n }),\n },\n ],\n };\n}\n\nfunction cloneChartData(data, legends = []) {\n const newChartData = {\n labels: [],\n datasets: [\n {\n data: [],\n backgroundColor: [],\n },\n ],\n };\n for (let index = 0; index < data.labels.length; index++) {\n if (legends[index] && legends[index].hidden) continue;\n\n newChartData.labels.push(data.labels[index]);\n newChartData.datasets[0].data.push(data.datasets[0].data[index]);\n newChartData.datasets[0].backgroundColor.push(data.datasets[0].backgroundColor[index]);\n }\n\n return newChartData;\n}\n\nconst useStyles = makeStyles(() => ({\n labelsChart: {\n display: \"flex\",\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n listStyle: \"none\",\n padding: 0,\n margin: \"10px 0\",\n\n \"& > li\": {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"12px\",\n margin: \"3px 10px 3px 0\",\n cursor: 'pointer',\n '& span': {\n height: \"11px\",\n width: \"22px\",\n display: \"inline-block\",\n marginRight: \"5px\",\n },\n },\n }\n}));\n\nexport { ClaimsByGrossRefIssueChart };\n\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { Box, Tab, Tabs } from \"@material-ui/core\";\nimport { Bar } from \"react-chartjs-2\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { chartApi } from '../../api';\nimport ProviderSystemSwitch from \"../Provider/ProviderSystemSwitch\";\n\nconst claimsTabs = ['Year', 'Month'];\n\nfunction ClaimsByIssueChart({ providerID, variant }) {\n\n const [selectedTab, setSelectedTab] = useState(0);\n const [claimsData, setClaimsData] = useState(null);\n const [runBySystem, setRunBySystem] = useState(false);\n \n useEffect(fetchData, [runBySystem]);\n useEffect(onProviderChange, [providerID]);\n\n function fetchData(systemRun = runBySystem) {\n trackPromise(chartApi.getClaimsByIssueCount(providerID, systemRun).then(setClaimsData), variant ?? \"claims-by-issue\");\n }\n \n function onProviderChange() {\n if (!claimsData) return; // worked only not for first call\n \n const system = false;\n setRunBySystem(system);\n if (system === runBySystem)\n fetchData(system);\n }\n \n const chartData = useMemo(() => {\n if (!claimsData) return {};\n\n return getChartData(claimsData[`${claimsTabs[selectedTab].toLowerCase()}Items`], claimsTabs[selectedTab]);\n }, [claimsData, selectedTab]);\n\n return (\n \n
\n \n {claimsTabs.map((t, i) => setSelectedTab(i)} />)}\n \n \n {\n providerID ?\n
\n \n \n : null\n }\n
\n
\n
\n \n {claimsTabs.map((t, i) => setSelectedTab(i)} />)}\n \n \n {\n providerID ?\n
\n \n \n : null\n }\n
\n
\n {legends.map((item, i) => (\n - legendClickHandler(i)}>\n \n {item.text}\n
\n ))}\n
\n : null\n }\n \n );\n};\n\nfunction createChartData(data) {\n return {\n labels: data.map(i => i.name),\n datasets: [\n {\n data: data.map(i => i.count),\n backgroundColor: data.map(function () {\n let r = Math.floor(Math.random() * 255);\n let g = Math.floor(Math.random() * 255);\n let b = Math.floor(Math.random() * 255);\n return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n }),\n },\n ],\n };\n}\n\nfunction cloneChartData(data, legends = []) {\n const newChartData = {\n labels: [],\n datasets: [\n {\n data: [],\n backgroundColor: [],\n },\n ],\n };\n for (let index = 0; index < data.labels.length; index++) {\n if (legends[index] && legends[index].hidden) continue;\n\n newChartData.labels.push(data.labels[index]);\n newChartData.datasets[0].data.push(data.datasets[0].data[index]);\n newChartData.datasets[0].backgroundColor.push(data.datasets[0].backgroundColor[index]);\n }\n\n return newChartData;\n}\n\nconst useStyles = makeStyles(() => ({\n labelsChart: {\n display: \"flex\",\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n listStyle: \"none\",\n padding: 0,\n margin: \"10px 0\",\n\n \"& > li\": {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"12px\",\n margin: \"3px 10px 3px 0\",\n cursor: 'pointer',\n '& span': {\n height: \"11px\",\n width: \"22px\",\n display: \"inline-block\",\n marginRight: \"5px\",\n },\n },\n },\n}));\n\nexport { ClaimsByStatusChart };\n\n","/* eslint-disable */\nimport { Box } from '@material-ui/core';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { Bar } from \"react-chartjs-2\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { chartApi } from '../../api';\nimport ProviderSystemSwitch from \"../Provider/ProviderSystemSwitch\";\n\nfunction PayorsByGrossReferralChart({ getPayorId, providerID, variant }) {\n\n const [barData, setBarData] = useState(null);\n const [selectedPayorId, setSelectedPayorId] = useState(null);\n const barRef = useRef();\n const [runBySystem, setRunBySystem] = useState(false);\n \n useEffect(fetchData, [runBySystem]);\n useEffect(onProviderChange, [providerID]);\n\n function fetchData(systemRun = runBySystem) {\n trackPromise(chartApi.getClaimsGrossReferralsByPayorSum(providerID, systemRun).then(data => {\n setBarData(data);\n const firstId = data[0]?.id ?? null;\n getPayorId?.(firstId);\n setSelectedPayorId(firstId);\n }), variant ?? \"payors-by-gross-ref\");\n }\n \n function onProviderChange() {\n if(!barData) return; // worked only not for first call\n \n const system = false;\n setRunBySystem(system);\n if (system === runBySystem)\n fetchData(system);\n }\n\n const chartData = useMemo(() => {\n if (!barData) return {};\n\n return getChartData(barData, selectedPayorId);\n }, [barData, selectedPayorId]);\n\n return (\n <>\n {\n providerID ?\n \n \n \n : null\n }\n \n {\n if (elements.length > 0) {\n const element = elements[0]._chart.getElementAtEvent(event)[0];\n const currentId = elements[0]._chart.data.datasets[element._datasetIndex].id[element._index];\n getPayorId?.(currentId);\n setSelectedPayorId(currentId);\n }\n },\n tooltips: {\n callbacks: {\n label: function (tooltipItem) {\n return Math.round(tooltipItem.yLabel).toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n },\n },\n },\n scales: {\n yAxes: [\n {\n ticks: {\n callback: function (label) {\n if (label >= 1000000000) {\n return (label / 1000000000).toFixed(1).replace(/\\.0$/, '') + 'G';\n }\n if (label >= 1000000) {\n return (label / 1000000).toFixed(1).replace(/\\.0$/, '') + 'M';\n }\n if (label >= 1000) {\n return (label / 1000).toFixed(1).replace(/\\.0$/, '') + 'K';\n }\n return label;\n }\n },\n }\n ],\n xAxes: [\n {\n ticks: {\n fontSize: 12,\n }\n }\n ]\n },\n }}\n />\n \n \n );\n}\n\nfunction getChartData(data, current) {\n const names = [];\n const itemsSum = [];\n const ids = [];\n const colors = [];\n const backgroundColors = [];\n\n let green = 100;\n let blue = 255;\n const step = Math.round((blue - green) / (data.length / 2));\n for (let index = 0; index < data.length; index++) {\n const item = data[index];\n names.push(item.name);\n itemsSum.push(Math.round(item.sum));\n ids.push(item.id);\n\n const targetBackColor = `rgb(87, ${green}, ${blue})`;\n backgroundColors.push(targetBackColor);\n colors.push(item.id === current ? '#090048' : targetBackColor);\n\n if (255 - green - step > 0)\n green += step;\n else blue -= step;\n }\n\n return {\n labels: names,\n datasets: [\n {\n data: itemsSum,\n id: ids,\n borderColor: colors,\n backgroundColor: backgroundColors,\n borderWidth: 4,\n },\n ],\n\n };\n}\n\nexport { PayorsByGrossReferralChart };","/* eslint-disable */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Pie } from \"react-chartjs-2\";\nimport { trackPromise } from \"react-promise-tracker\";\nimport { chartApi } from '../../api';\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\nimport { Box, makeStyles, MenuItem, Select } from '@material-ui/core';\nimport ProviderSystemSwitch from \"../Provider/ProviderSystemSwitch\";\n\nconst options = {\n legend: {\n display: false,\n labels: {\n boxWidth: 11,\n },\n },\n tooltips: {\n callbacks: {\n label: function (tooltipItem, data) {\n let format = Math.round(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n return data.labels[tooltipItem.index] + \": \" + format + \" $\";\n },\n },\n },\n plugins: {\n datalabels: {\n color: 'white', anchor: \"end\", align: 'start',\n formatter: (value) => {\n return Math.round(value).toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") + \" $\";\n },\n font: {\n size: 12,\n },\n },\n },\n};\n\nfunction ResolvedCasesByIssueTypeChart({ dataPayorId, providerID, variant }) {\n const classes = useStyles();\n const payors = useRef([]);\n const [model, setModel] = useState(null);\n const [payor, setPayor] = useState(null);\n const [chartData, setChartData] = useState({});\n const [legends, setLegends] = useState([]);\n const skipEffect = useRef(false);\n const chartRef = useRef(null);\n const [runBySystem, setRunBySystem] = useState(false);\n \n useEffect(fetchData, [dataPayorId, runBySystem]);\n useEffect(onProviderChange, [providerID]);\n\n function fetchData(systemRun = runBySystem) {\n if (dataPayorId !== undefined) {\n if (!dataPayorId) setModel(createChartData([]));\n else trackPromise(chartApi.getResolvedClaims(dataPayorId, providerID, systemRun).then(data => setModel(createChartData(data))), \"resolved-cases-by-issue-type\");\n } else {\n trackPromise(chartApi.getClaimsGrossReferralsByPayorSum(providerID).then(data => {\n payors.current = data;\n trackPromise(chartApi.getResolvedClaims(data[0].id, providerID, systemRun).then(d => {\n setPayor(payors.current[0]);\n setModel(createChartData(d));\n }), variant);\n }), variant);\n }\n }\n \n function onProviderChange() {\n if (!model) return; // worked only not for first call\n \n const system = false;\n setRunBySystem(system);\n if (system === runBySystem)\n fetchData(system);\n }\n \n const handlePayorChange = p => {\n const oldPayor = { ...payor };\n setPayor(p);\n trackPromise(chartApi.getResolvedClaims(p.id, providerID, runBySystem)\n .then(data => setModel(createChartData(data)))\n .catch(() => setPayor(oldPayor)), variant);\n };\n\n useEffect(() => {\n if (!model) return;\n\n setChartData(cloneChartData(model));\n skipEffect.current = false;\n }, [model]);\n\n useEffect(legendsSetter, [chartData]);\n function legendsSetter() {\n if (chartData === {} || skipEffect.current) return;\n\n const { legendItems } = chartRef.current.chartInstance.legend;\n for (let item of legendItems)\n item.hidden = !model.labels.some(v => v === item.text);\n setLegends(legendItems);\n }\n\n function legendClickHandler(i) {\n const newLegends = [...legends];\n const newItem = newLegends[i];\n newItem.hidden = !newItem.hidden;\n setLegends(newLegends);\n\n if (model.datasets[0].data[i] !== 0) {\n skipEffect.current = true;\n setChartData(cloneChartData(model, newLegends));\n }\n }\n\n return (\n \n {(!dataPayorId && payors.current.length !== 0) &&\n
\n handlePayorChange(e.target.value)}\n MenuProps={{\n anchorOrigin: {\n vertical: \"bottom\",\n horizontal: \"left\",\n },\n getContentAnchorEl: null,\n }}\n >\n {payors.current.map(x => )}\n \n \n }\n {\n providerID ?\n
\n \n \n : null\n }\n
\n {\n legends.length ?\n
\n {legends.map((item, i) => (\n - legendClickHandler(i)}>\n \n {item.text}\n
\n ))}\n
\n : null\n }\n
\n {(!dataPayorId && payors.current.length !== 0) &&\n
\n handlePayorChange(e.target.value)}\n MenuProps={{\n anchorOrigin: {\n vertical: \"bottom\",\n horizontal: \"left\",\n },\n getContentAnchorEl: null,\n }}\n >\n {payors.current.map(x => )}\n \n \n }\n {\n providerID ?\n
\n \n \n : null\n }\n
\n {\n legends.length ?\n
\n {legends.map((item, i) => (\n - legendClickHandler(i)}>\n \n {item.text}\n
\n ))}\n
\n : null\n }\n
\n
\n {faqItems}\n
\n {data.faqs.length > itemsPerPage &&\n
setPage(v)}\n size=\"small\"\n />\n }\n \n \n
\n \n );\n}\n\nexport default Summary;\n\nconst useStyles = makeStyles((theme) => ({\n header: {\n marginBottom: 20,\n display: \"flex\",\n \n \"& > .MuiTextField-root\": {\n marginRight: 15,\n maxWidth: 400,\n }\n },\n summaryGrid: {\n height: \"55vh\",\n minHeight: \"300px\",\n width: '100%',\n position: 'relative',\n '& .MuiDataGrid-colCellWrapper': {\n backgroundColor: \"#E1F2FF\",\n },\n '& .MuiDataGrid-window': {\n overflow: \"hidden\",\n },\n },\n link: {\n color: \"#10224B\",\n fontWeight: \"700\"\n },\n iconButton: {\n padding: 10,\n },\n iconButtonHidden: {\n display: 'none',\n },\n selectItem: {\n minWidth: \"138px\",\n \"& .MuiSelect-select:focus\": {\n backgroundColor: \"white\",\n },\n }\n}));","import React, { useEffect, useRef, useState } from 'react';\nimport { makeStyles, Container, Grid, Paper, Typography, IconButton, Collapse, Box } from \"@material-ui/core\";\nimport ProviderInfo from \"./ProviderInfo\";\nimport DocumentUpload from \"../../Documents/DocumentUpload\";\nimport Chart from '../../Shared/Chart';\nimport Faq from './Faq';\nimport Summary from './Summary';\nimport { BlockSpinner, fileUpDownLoadManager, useProviderContext, useUserContext } from \"../../Shared\";\nimport clsx from 'clsx';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { trackPromise } from \"react-promise-tracker\";\nimport { homeApi } from \"../../../api\";\nimport DataTableSearch from \"../../Shared/DataTableSearch\";\n\nfunction Home() {\n const providerContext = useProviderContext();\n const currentUser = useUserContext();\n const classes = useStyles();\n const [expanded, setExpanded] = useState(true);\n const summaryRef = useRef({ searchHandler: null });\n\n useEffect(init, []);\n\n function init() {\n trackPromise(homeApi.getUserSummaryState().then(v => !v ? setExpanded(v) : null));\n }\n\n const handleExpandClick = () => {\n const value = !expanded;\n setExpanded(value);\n trackPromise(homeApi.toggleUserSummaryState()).catch(() => setExpanded(!value));\n };\n\n function searchHandler(event, text) {\n summaryRef.current.searchHandler(event, text);\n }\n\n return (\n <>\n \n \n {\n providerContext.current && !currentUser.originalID &&\n \n \n \n Quick Upload\n \n \n fileUpDownLoadManager.upDownLoad(doc)} />\n \n \n }\n \n \n \n \n \n {\n !currentUser.originalID ?\n \n providerContext.current ?\n \n \n \n \n \n :\n \n \n \n \n \n \n \n {providerContext.count}\n \n \n Providers\n \n \n \n \n \n :\n \n \n \n \n \n \n \n \n \n \n \n \n }\n \n \n \n {providerContext.current &&\n \n \n \n \n \n Summary\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n \n \n \n {providerContext.current &&\n \n \n \n }\n \n \n \n \n );\n}\n\nexport default Home;\n\nconst useStyles = makeStyles(theme => ({\n container: {\n padding: theme.spacing(9, 2),\n [theme.breakpoints.up('lg')]: {\n padding: theme.spacing(4, 9),\n },\n },\n paper: {\n position: \"relative\",\n padding: theme.spacing(3),\n boxSizing: \"border-box\",\n height: \"100%\",\n '& h5': {\n fontSize: \"1.4rem\",\n marginBottom: theme.spacing(2.5),\n color: \"#10224B\",\n },\n },\n gridItem: {\n marginBottom: theme.spacing(1),\n '& .MuiPaper-rounded': {\n borderRadius: \"10px\"\n }\n },\n twoItem: {\n height: \"100%\",\n },\n gridItemTwoColl: {\n height: \"100%\",\n \"& >div\": {\n marginBottom: 0,\n paddingBottom: \"0 !important\",\n }\n },\n mobileOrder: {\n [theme.breakpoints.down('sm')]: {\n order: 1,\n },\n },\n expand: {\n transform: 'rotate(0deg)',\n marginLeft: 'auto',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n summarySearch: {\n margin: '0 40px 0 10px',\n width: 400\n }\n}));","import React from 'react';\nimport { useHistory } from 'react-router';\nimport { Button, makeStyles } from \"@material-ui/core\";\n\nfunction NotFound() {\n \n let routerHistory = useHistory();\n const classes = useStyles();\n \n return (\n \n
\n
Oops!!
\n
Page not found
\n
\n