\n \n Create New Session\n \n\n \n \n );\n}\n\nNewSessionDialog.propTypes = {\n onClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n};\n\nexport default function NewSession() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = (value) => {\n setOpen(false);\n };\n\n return (\n \n \n New Session\n \n\n
\n );\n}\n","import React from \"react\";\nimport {\n AppBar,\n Toolbar,\n Grid,\n InputBase,\n IconButton,\n Badge,\n makeStyles,\n Typography,\n Divider,\n} from \"@material-ui/core\";\nimport ArrowBackOutlinedIcon from \"@material-ui/icons/ArrowBackOutlined\";\nimport ArrowForwardOutlinedIcon from \"@material-ui/icons/ArrowForwardOutlined\";\nimport DirectionsRunIcon from \"@material-ui/icons/DirectionsRun\";\nimport ScheduleIcon from \"@material-ui/icons/Schedule\";\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from \"@material-ui/pickers\";\nimport DateFnsUtils from \"@date-io/date-fns\";\n\nimport DateRangePickers from \"../../sharedComponents/DateRangePickers\";\nimport NewSession from \"../otherComponents/NewSession\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: \"#fff\",\n },\n date: {\n paddingLeft: theme.spacing(2),\n },\n left: {\n color: \"#4dd2ff\",\n },\n right: {\n color: \"#4dd2ff\",\n paddingRight: theme.spacing(2),\n },\n}));\n\nconst Months = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n];\n\n//Top heading for the MonthlyView\nexport default function MonthlySessionHeading(props) {\n const classes = useStyles();\n const [selectedDate, setSelectedDate] = React.useState(new Date());\n\n let month = props.month;\n let year = props.year;\n\n let value = 10;\n\n return (\n \n \n \n {/*Icon 1*/}\n \n \n \n \n\n {/*Icon 2*/}\n \n \n \n \n\n \n \n {Months[month]} {year}\n \n \n\n \n \n\n \n \n \n \n \n \n \n );\n}\n","import React from \"react\";\nimport { Grid, Typography, Card, makeStyles } from \"@material-ui/core\";\n\nconst useStyles = makeStyles((theme) => ({\n daysDisplay: {\n paddingTop: \"10px\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n width: \"1800px\",\n },\n card: {\n width: \"150px\",\n textAlign: \"center\",\n backgroundColor: theme.palette.info.light,\n color: theme.palette.primary.contrastText,\n },\n}));\n\nconst DaysOfWeek = [\n \"Sunday\",\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n];\n\nexport default function WeekHeader() {\n const classes = useStyles();\n\n return (\n \n {/* Temporary List providing the values for days 1 to 7*/}\n {[0, 1, 2, 3, 4, 5, 6].map((value) => (\n \n {DaysOfWeek[value]} \n \n ))}\n \n );\n}\n","import React, { useState, setState } from \"react\";\nimport {\n Grid,\n makeStyles,\n CssBaseline,\n Typography,\n Card,\n} from \"@material-ui/core\";\nimport Weeks from \"./MonthlyView/Week\";\nimport Header from \"./MonthlyView/MonthlySessionHeading\";\nimport WeekHeader from \"./otherComponents/WeekHeader\";\n\nconst useStyles = makeStyles((theme) => ({\n monthView: {\n paddingTop: \"10px\",\n textAlign: \"center\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n width: \"1800px\",\n },\n}));\n\nfunction renderWeek(date, day, month, year) {\n return (\n \n \n \n {/* Renders the week using the first day of the week, the position in the week (0 - Sunday), and the current month*/}\n {renderWeek(\n firstWeek,\n date.getDay(),\n date.getMonth(),\n date.getUTCFullYear()\n )}\n {renderWeek(secondWeek, 0, date.getMonth(), date.getUTCFullYear())}\n {renderWeek(thirdWeek, 0, date.getMonth(), date.getUTCFullYear())}\n {renderWeek(fourthWeek, 0, date.getMonth(), date.getUTCFullYear())}\n {renderWeek(fifthWeek, 0, date.getMonth(), date.getUTCFullYear())}\n {renderWeek(sixthWeek, 0, date.getMonth(), date.getUTCFullYear())}\n \n \n
\n );\n}\n","import React from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport Select from \"@material-ui/core/Select\";\n\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { updateWithinDateRange } from \"../../actions\";\nimport { createDateString } from \"../../lib\";\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n marginTop: theme.spacing(1),\n margin: theme.spacing(0),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n}));\n\nexport default function ChartRangeDropdown() {\n const dispatch = useDispatch();\n const date = useSelector((state) => state.userRadarPlotReducer.selectedDate);\n const classes = useStyles();\n const handleChange = (e) => dispatch(updateWithinDateRange(e.target.value));\n\n return (\n \n \n Within \n \n {createDateString(30)}\n 30 Days \n 60 Days \n 90 Days \n All \n {/* All Sessions */}\n \n \n Sessions that occured within the last (days)\n \n \n
\n );\n}\n\n// http://reactchartjs.github.io/react-chartjs-2/#/radar\n","import React from \"react\";\n\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport Select from \"@material-ui/core/Select\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { updateSelectedUser } from \"../../actions\";\nimport {\n Dialog,\n Button,\n DialogTitle,\n DialogContent,\n DialogActions,\n Typography,\n} from \"@material-ui/core\";\nimport ChartRangeDropdown from \"../sharedComponents/ChartRangeDropdown\";\n\nconst useStyles = makeStyles((theme) => ({\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n dropdownList: {\n marginBottom: \"1.5rem\",\n },\n}));\n\nexport default function UsersDropdown(props) {\n const classes = useStyles();\n const email = useSelector((state) => state.userReducer.selectedUser);\n const dispatch = useDispatch();\n\n const [open, setOpen] = React.useState(false);\n\n const handleChange = (e) => {\n dispatch(updateSelectedUser(e.target.value));\n };\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n function renderMenuItems() {\n return props.users.map((user) => {\n return (\n \n {`${user.first_name.trim()}, ${user.last_name}`}\n \n );\n });\n }\n\n return (\n \n \n Users \n \n \n Select a user for creating visualization\n \n \n
\n );\n}\n","import {\n min,\n max,\n scaleLinear,\n scaleTime,\n select,\n axisBottom,\n axisLeft,\n selectAll,\n line,\n entries,\n area,\n} from \"d3\";\n\nconst MARGIN = { TOP: 50, BOTTOM: 80, LEFT: 70, RIGHT: 180 };\nconst WIDTH = 800 - MARGIN.LEFT - MARGIN.RIGHT;\nconst HEIGHT = 600 - MARGIN.TOP - MARGIN.BOTTOM;\n\nclass GeneralMetricsChart {\n constructor(\n element,\n data,\n attentionLineToggle,\n processingLineToggle,\n memoryLineToggle\n ) {\n let vis = this;\n\n vis.g = select(element)\n .append(\"svg\")\n .attr(\"width\", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)\n .attr(\"height\", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)\n .append(\"g\")\n .attr(\"transform\", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);\n\n //Set our range scales to the height and width of our visualization\n vis.x = scaleTime().range([0, WIDTH]);\n\n vis.y = scaleLinear().range([HEIGHT, 0]);\n\n //Create axis groups for x y on main vis instance\n vis.xAxisGroup = vis.g\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${HEIGHT})`);\n\n vis.yAxisGroup = vis.g.append(\"g\");\n\n //X axis label\n vis.g\n .append(\"text\")\n .attr(\"x\", WIDTH / 2)\n .attr(\"y\", HEIGHT + 40)\n .attr(\"font-size\", 20)\n .attr(\"text-anchor\", \"middle\")\n .text(\"Time of Session\");\n //Y Axis Label\n vis.g\n .append(\"text\")\n .attr(\"x\", -(HEIGHT / 2))\n .attr(\"y\", -50)\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"font-size\", 20)\n .attr(\"text-anchor\", \"middle\")\n .text(\"Accuracy %\");\n\n vis.update(\n data,\n attentionLineToggle,\n processingLineToggle,\n memoryLineToggle\n );\n }\n\n update(data, attentionLineToggle, processingLineToggle, memoryLineToggle) {\n let vis = this;\n let raw_response = entries(data);\n let processingLineData = [];\n let memoryLineData = [];\n let attentionLineData = [];\n let allLines = [];\n\n for (let i = 0; i < raw_response.length; i++) {\n const lineData = entries(raw_response[i].value.daily_aggregates);\n allLines.push(lineData);\n switch (raw_response[i].value.categories) {\n case \"memory\":\n memoryLineData.push(lineData);\n break;\n case \"processing\":\n processingLineData.push(lineData);\n break;\n case \"attention\":\n attentionLineData.push(lineData);\n break;\n default:\n break;\n }\n }\n\n function calculateAveragePercentage(data) {\n return (\n (parseFloat(data.correct) * 100) /\n (parseFloat(data.correct) + parseFloat(data.incorrect))\n );\n }\n\n function sortedMetricData(lineData) {\n let line = [];\n\n lineData[0].map((item, i) => {\n //find matching item in array by key, and filter out item from array.\n const found_match = lineData[1].find(\n (element) => element.key === item.key\n );\n\n //found a matching key, (need to comibine data when it's accurate)\n if (found_match) {\n //update our second array and filter out the object we just added to the matching day.\n lineData[1] = lineData[1].filter(\n (element) => element.key !== item.key\n );\n }\n //push point data\n return line.push(lineData[0][i]);\n });\n //combine what's left of our second array with our line array\n return line.concat(lineData[1]);\n }\n\n if (memoryLineData[0]) {\n //sort our data\n memoryLineData = sortedMetricData(memoryLineData);\n processingLineData = sortedMetricData(processingLineData);\n attentionLineData = sortedMetricData(attentionLineData);\n allLines = allLines.flat(1);\n\n //add data to visualization oject\n vis.data = {};\n vis.data.memoryLine = memoryLineData.sort(\n (a, b) => new Date(a.key) - new Date(b.key)\n );\n vis.data.processingLine = processingLineData.sort(\n (a, b) => new Date(a.key) - new Date(b.key)\n );\n vis.data.attentionLine = attentionLineData.sort(\n (a, b) => new Date(a.key) - new Date(b.key)\n );\n vis.data.allLines = allLines.sort(\n (a, b) => new Date(a.key) - new Date(b.key)\n );\n\n //Set our domains for each axis\n //Take our domain and parse string back into a date\n if (vis.data.allLines.length > 0) {\n vis.x.domain([\n new Date(vis.data.allLines[0].key),\n new Date(vis.data.allLines[vis.data.allLines.length - 1].key),\n ]);\n //Calculate the total amont of correct vs incorrect values get the percentage of correct to total for each entry in our general dataset\n vis.y.domain([\n min(\n vis.data.allLines,\n (d) =>\n (d.value.max.correct * 100) /\n (d.value.max.correct + d.value.max.incorrect)\n ),\n max(\n vis.data.allLines,\n (d) =>\n (d.value.min.correct * 100) /\n (d.value.min.correct + d.value.min.incorrect)\n ),\n ]);\n\n //create axis calls\n const xAxisCall = axisBottom(vis.x);\n const yAxisCall = axisLeft(vis.y);\n\n //render axis with a transition of 1s\n vis.xAxisGroup.transition(1000).call(xAxisCall);\n vis.yAxisGroup.transition(1000).call(yAxisCall);\n }\n\n const makeLine = line()\n .x(function (d) {\n return vis.x(new Date(d.key));\n })\n .y(function (d) {\n return vis.y(\n (Number(d.value.avg.correct) * 100) /\n (Number(d.value.avg.correct) + Number(d.value.avg.incorrect))\n );\n });\n\n const makeErrorBar = area()\n .x(function (d) {\n return vis.x(new Date(d.key));\n })\n .y0(function (d) {\n return vis.y(\n (d.value.min.correct * 100) /\n (d.value.min.correct + d.value.min.incorrect)\n );\n })\n .y1(function (d) {\n return vis.y(\n (d.value.max.correct * 100) /\n (d.value.max.correct + d.value.max.incorrect)\n );\n });\n\n const circleStyles = {\n circleRadius: 5,\n circleRadiusHover: 7,\n };\n\n // //JOIN MEMORY\n const memoryLine = vis.g\n .selectAll(\"memory-line-group\")\n .data([vis.data.memoryLine], (d) => d);\n\n const memoryErrorBars = vis.g\n .selectAll(\"memory-line-group\")\n .data(vis.data.memoryLine, (d) => d);\n\n const memoryLineCircles = vis.g\n .selectAll(\"memory-circle\")\n .data(vis.data.memoryLine, (d) => d);\n\n // //EXIT MEMORY\n memoryLine.exit();\n selectAll(\".memory-line-group\").remove();\n\n memoryLineCircles.exit();\n selectAll(\".memory-circle\").remove();\n //UPDATE\n\n if (memoryLineToggle) {\n //ENTER MEMORY\n memoryLine\n .enter()\n .append(\"g\")\n .attr(\"class\", \"memory-line-group\")\n .on(\"mouseover\", function (d) {\n select(this)\n .append(\"text\")\n .attr(\"class\", \"line-text\")\n .text(`Memory`)\n .attr(\"x\", WIDTH / 2 - 35)\n .attr(\"y\", -10);\n })\n .on(\"mouseout\", function (d) {\n selectAll(\".line-text\").remove();\n })\n .append(\"path\")\n .attr(\"class\", \"memory-line\")\n .transition(1000)\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeLine(d));\n\n memoryErrorBars\n .enter()\n .append(\"g\")\n .attr(\"class\", \"memory-line-group\")\n .append(\"path\")\n .attr(\"class\", \"memory-line-errorbar\")\n .transition(1000)\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeErrorBar([d]));\n\n memoryLineCircles\n .enter()\n .append(\"g\")\n .append(\"g\")\n .attr(\"class\", \"memory-circle\")\n .on(\"mouseover\", function (d) {\n select(this)\n .style(\"cursor\", \"pointer\")\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .text(`${calculateAveragePercentage(d.value.avg).toFixed(2)}%`)\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 35\n );\n select(this)\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .text(`At ${new Date(d.key).toLocaleDateString()} for Memory`)\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 20\n );\n })\n .on(\"mouseout\", function (d) {\n select(this)\n .style(\"cursor\", \"none\")\n .selectAll(\".circle-text\")\n .transition(500)\n .remove();\n })\n .append(\"circle\")\n .attr(\"cx\", (d) => vis.x(new Date(d.key)))\n .attr(\"cy\", (d) => vis.y(calculateAveragePercentage(d.value.avg)))\n .attr(\"r\", circleStyles.circleRadius)\n .style(\"opacity\", 1)\n .on(\"mouseover\", function (d) {\n select(this)\n .transition(500)\n .attr(\"r\", circleStyles.circleRadiusHover);\n })\n .on(\"mouseout\", function (d) {\n select(this).transition(500).attr(\"r\", circleStyles.circleRadius);\n });\n }\n\n //JOIN ATTENTION\\\n const attentionLine = vis.g\n .selectAll(\"attention-line-group\")\n .data([vis.data.attentionLine], (d) => d);\n\n const attentionCircles = vis.g\n .selectAll(\"attention-circle\")\n .data(vis.data.attentionLine, (d) => d.id);\n\n const attentionBars = vis.g\n .selectAll(\"attention-line-group\")\n .data(vis.data.attentionLine, (d) => d);\n\n // //EXIT ATTENTION\n attentionLine.exit();\n selectAll(\".attention-line-group\").remove();\n\n attentionCircles.exit();\n selectAll(\".attention-circle\").remove();\n\n // //UPDATE\n if (attentionLineToggle) {\n //ENTER ATTENTION\n attentionLine\n .enter()\n .append(\"g\")\n .attr(\"class\", \"attention-line-group\")\n .on(\"mouseover\", function (d) {\n select(this)\n .append(\"text\")\n .attr(\"class\", \"line-text\")\n .text(`Attention`)\n .attr(\"x\", WIDTH / 2 - 35)\n .attr(\"y\", -10);\n })\n .on(\"mouseout\", function (d) {\n selectAll(\".line-text\").remove();\n })\n .append(\"path\")\n .attr(\"class\", \"attention-line\")\n .transition(1000)\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeLine(d));\n\n attentionCircles\n .enter()\n .append(\"g\")\n .append(\"g\")\n .attr(\"class\", \"attention-circle\")\n .on(\"mouseover\", function (d) {\n select(this)\n .style(\"cursor\", \"pointer\")\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .text(`${calculateAveragePercentage(d.value.avg).toFixed(2)}%`)\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 35\n );\n select(this)\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .text(`At ${new Date(d.key).toLocaleDateString()} for Attention`)\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 20\n );\n })\n .on(\"mouseout\", function (d) {\n select(this)\n .style(\"cursor\", \"none\")\n .selectAll(\".circle-text\")\n .transition(500)\n .remove();\n })\n .append(\"circle\")\n .attr(\"cx\", (d) => vis.x(new Date(d.key)))\n .attr(\"cy\", (d) => vis.y(calculateAveragePercentage(d.value.avg)))\n .attr(\"r\", circleStyles.circleRadius)\n .style(\"opacity\", 1)\n .on(\"mouseover\", function (d) {\n select(this)\n .transition(500)\n .attr(\"r\", circleStyles.circleRadiusHover);\n })\n .on(\"mouseout\", function (d) {\n select(this).transition(500).attr(\"r\", circleStyles.circleRadius);\n });\n\n attentionBars\n .enter()\n .append(\"g\")\n .attr(\"class\", \"attention-line-group\")\n .append(\"path\")\n .attr(\"class\", \"attention-line-errorbar\")\n .transition(1000)\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeErrorBar([d]));\n }\n\n //JOIN PROCESSING\n const processingLine = vis.g\n .selectAll(\"processing-line-group\")\n .data([vis.data.processingLine], (d) => d.id);\n\n const processingCircles = vis.g\n .selectAll(\"processing-circle\")\n .data(vis.data.processingLine, (d) => d.id);\n\n const processingBars = vis.g\n .selectAll(\"processing-line-group\")\n .data(vis.data.processingLine, (d) => d);\n\n //EXIT PROCESSING\n processingLine.exit();\n selectAll(\".processing-line-group\").remove();\n\n processingCircles.exit();\n selectAll(\".processing-circle\").remove();\n\n //UPDATE\n if (processingLineToggle) {\n //ENTER PROCESSING\n processingLine\n .enter()\n .append(\"g\")\n .attr(\"class\", \"processing-line-group\")\n .on(\"mouseover\", function (d) {\n select(this)\n .append(\"text\")\n .attr(\"class\", \"line-text\")\n .text(`Processing`)\n .attr(\"x\", WIDTH / 2 - 35)\n .attr(\"y\", -10);\n })\n .on(\"mouseout\", function (d) {\n selectAll(\".line-text\").remove();\n })\n\n .append(\"path\")\n .attr(\"class\", \"processing-line\")\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeLine(d));\n\n processingCircles\n .enter()\n .append(\"g\")\n .append(\"g\")\n .attr(\"class\", \"processing-circle\")\n .on(\"mouseover\", function (d) {\n select(this)\n .style(\"cursor\", \"pointer\")\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .text(`${calculateAveragePercentage(d.value.avg).toFixed(2)}%`)\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 35\n );\n select(this)\n .append(\"text\")\n .attr(\"class\", \"circle-text\")\n .attr(\"x\", (d) => vis.x(new Date(d.key)) - 30)\n .text(\n `At ${new Date(d.key).toLocaleDateString()} for Processing`\n )\n .attr(\n \"y\",\n (d) => vis.y(calculateAveragePercentage(d.value.avg)) - 20\n );\n })\n .on(\"mouseout\", function (d) {\n select(this)\n .style(\"cursor\", \"none\")\n .selectAll(\".circle-text\")\n .transition(500)\n .remove();\n })\n .append(\"circle\")\n .attr(\"cx\", (d) => vis.x(new Date(d.key)))\n .attr(\"cy\", (d) => vis.y(calculateAveragePercentage(d.value.avg)))\n .attr(\"r\", circleStyles.circleRadius)\n .style(\"opacity\", 1)\n .on(\"mouseover\", function (d) {\n select(this)\n .transition(500)\n .attr(\"r\", circleStyles.circleRadiusHover);\n })\n .on(\"mouseout\", function (d) {\n select(this).transition(500).attr(\"r\", circleStyles.circleRadius);\n });\n\n processingBars\n .enter()\n .append(\"g\")\n .attr(\"class\", \"processing-line-group\")\n .append(\"path\")\n .attr(\"class\", \"processing-line-errorbar\")\n .attr(\"id\", (d) => `line-${d.id}`)\n .attr(\"d\", (d) => makeErrorBar([d]));\n }\n }\n }\n}\n\nexport default GeneralMetricsChart;\n","import React, { Component } from \"react\";\nimport GeneralMetricsChart from \"./GeneralMetricsChart\";\n\nexport default class ChartWrapper extends Component {\n componentDidMount() {\n this.setState({\n chart: new GeneralMetricsChart(\n this.refs.chart,\n this.props.data,\n this.props.attentionLineToggle,\n this.props.processingLineToggle,\n this.props.memoryLineToggle\n ),\n });\n }\n\n shouldComponentUpdate() {\n return false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.state.chart.update(\n nextProps.data,\n nextProps.attentionLineToggle,\n nextProps.processingLineToggle,\n nextProps.memoryLineToggle\n );\n }\n\n render() {\n return (\n \n );\n }\n}\n","import { select, scaleLinear, line, selectAll } from \"d3\";\n\nconst MARGIN = { TOP: 75, BOTTOM: 50, LEFT: 100, RIGHT: 25 };\nconst WIDTH = 750 - MARGIN.LEFT - MARGIN.RIGHT;\nconst HEIGHT = 750 - MARGIN.TOP - MARGIN.BOTTOM;\n\nclass RadarPlot {\n constructor(element, data) {\n let vis = this;\n\n // the svg element\n vis.g = select(element)\n .append(\"svg\")\n .attr(\"width\", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)\n .attr(\"height\", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)\n .append(\"g\")\n .attr(\"transform\", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);\n\n // range of the svg\n let radialScale = scaleLinear().domain([0, 5]).range([0, 150]);\n\n this.radialScale = radialScale;\n\n // number of circle that surrounds the radar\n let ticks = [1, 2, 3, 4, 5];\n\n ticks.forEach((t) => {\n vis.g\n .append(\"circle\")\n .attr(\"cx\", WIDTH / 2)\n .attr(\"cy\", HEIGHT / 2)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#555\") //colour of the ticks\n .attr(\"r\", radialScale(t));\n });\n\n ticks.forEach((t) =>\n vis.g\n .append(\"text\")\n .attr(\"x\", WIDTH / 2 + 5.5)\n .attr(\"y\", HEIGHT / 2 - 5.5 - radialScale(t))\n .text(t.toString())\n );\n\n function angleToCoordinate(angle, value) {\n let x = Math.cos(angle) * radialScale(value);\n let y = Math.sin(angle) * radialScale(value);\n return { x: WIDTH / 2 + x, y: HEIGHT / 2 - y };\n }\n\n function getPathCoordinates(data_point) {\n let coordinates = [];\n\n for (let i = 0; i < data[1].length; i++) {\n let ft_name = data[1][i];\n // let ft_name = (data[1][i] !== null) ? data[1][i] : `0.0`;\n let angle = Math.PI / 2 + (2 * Math.PI * i) / data[1].length;\n\n coordinates.push(angleToCoordinate(angle, data_point[ft_name]));\n }\n return coordinates;\n }\n\n this.getPathCoordinates = getPathCoordinates;\n\n for (let i = 0; i < data[1].length; i++) {\n let ft_name = data[1][i]; //data title: (difficulty, effort ...etc.)\n let angle = Math.PI / 2 + (2 * Math.PI * i) / data[1].length;\n let line_coordinate = angleToCoordinate(angle, 5);\n let label_coordinate = angleToCoordinate(angle, 5.25);\n\n //Ajust label corrdinates based on angle.\n if (angle < 2) {\n label_coordinate.y = label_coordinate.y - 15;\n label_coordinate.x = label_coordinate.x - 25;\n } else if (angle > 2 && angle < 4) {\n label_coordinate.x = label_coordinate.x - 40;\n } else if (angle > 4 && angle < 5) {\n label_coordinate.x = label_coordinate.x - 50;\n label_coordinate.y = label_coordinate.y + 10;\n }\n\n //draw axis line\n vis.g\n .append(\"line\")\n .attr(\"x1\", WIDTH / 2)\n .attr(\"y1\", HEIGHT / 2)\n .attr(\"x2\", line_coordinate.x)\n .attr(\"y2\", line_coordinate.y)\n .attr(\"stroke\", \"black\");\n\n //draw axis label\n vis.g\n .append(\"text\")\n .attr(\"x\", label_coordinate.x)\n .attr(\"y\", label_coordinate.y)\n .text(ft_name);\n }\n\n vis.update(data, getPathCoordinates);\n }\n\n update(data) {\n let vis = this;\n vis.data = data;\n\n const colour = \"#64b5f6\";\n const coordinates = vis.getPathCoordinates(data[0]);\n const makeLine = line()\n .x((d) => d.x)\n .y((d) => d.y);\n\n const circleEntries = Object.entries(data[0]);\n\n //JOIN DATA and assoicated it our line selection\n const radarLine = vis.g\n .selectAll(\"data-line-group\")\n .data([data[0]], (d) => d);\n\n //EXIT DATA\n radarLine.exit();\n selectAll(\".data-line-group\").remove();\n\n radarLine\n .enter()\n .append(\"g\")\n .attr(\"class\", \"data-line-group\")\n .append(\"path\")\n .datum(coordinates)\n .attr(\"d\", makeLine)\n .attr(\"stroke-width\", 3)\n .attr(\"stroke\", colour)\n .attr(\"fill\", colour)\n .attr(\"stroke-opacity\", 1)\n .attr(\"opacity\", 0.5);\n }\n}\n\nexport default RadarPlot;\n","import React, { Component } from \"react\";\nimport RadarPlot from \"./RadarPlot\";\nimport { Radar } from \"react-chartjs-2\";\n\nexport default class RadarPlotWrapper extends Component {\n componentDidMount() {\n this.setState({\n chart: new RadarPlot(this.refs.chart, this.props.data),\n });\n }\n\n shouldComponentUpdate() {\n return false;\n }\n\n componentWillReceiveProps(nextProps) {\n this.state.chart.update(nextProps.data);\n }\n\n render() {\n return
;\n }\n}\n","import React from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: 250,\n },\n}));\n\nexport default function RedarLegend(props) {\n const classes = useStyles();\n return (\n \n \n Graph Info\n \n \n Difficulty:{\" \"}\n {props.data[0].Difficulty === null\n ? 0\n : props.data[0].Difficulty.toFixed(2)}{\" \"}\n / 5\n \n \n Satisfaction:{\" \"}\n {props.data[0].Satisfaction === null\n ? 0\n : props.data[0].Satisfaction.toFixed(2)}{\" \"}\n / 5\n \n \n Frustration:{\" \"}\n {props.data[0].Frustration === null\n ? 0\n : props.data[0].Frustration.toFixed(2)}{\" \"}\n / 5\n \n \n Enjoyment:{\" \"}\n {props.data[0].Enjoyment === null\n ? 0\n : props.data[0].Enjoyment.toFixed(2)}{\" \"}\n / 5\n \n \n Effort:{\" \"}\n {props.data[0].Effort === null ? 0 : props.data[0].Effort.toFixed(2)} /\n 5\n \n \n );\n}\n","import React from \"react\";\nimport {\n AppBar,\n Container,\n Paper,\n Tabs,\n Tab,\n Box,\n Typography,\n} from \"@material-ui/core\";\nimport MaterialTable from \"material-table\";\nimport moment from \"moment\";\nimport TabPanel from \"../../sharedComponents/TabPanel\";\nimport { getUserSessionData } from \"../../../actions/index\";\nimport { Debug, capitalize } from \"../../../lib/index\";\nimport ChartBase from \"./ChartBase\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Accordion from \"@material-ui/core/Accordion\";\nimport AccordionSummary from \"@material-ui/core/AccordionSummary\";\nimport AccordionDetails from \"@material-ui/core/AccordionDetails\";\n\n// Gets the properties for the tab panels\nconst tabPanelProps = (index) => {\n return {\n id: `scrollable-auto-tab-${index}`,\n \"aria-controls\": `scrollable-auto-tabpanel-${index}`,\n };\n};\n\n// for material table\nconst options = {\n search: false,\n sortable: false,\n paging: true,\n pageSize: 5,\n emptyRowsWhenPaging: false,\n pageSizeOptions: [5, 10, 25, 50, 100],\n exportButton: true,\n};\n\n/* ----------------------------- Main component ----------------------------- */\nclass UserSession extends ChartBase {\n constructor(props) {\n super(props, getUserSessionData);\n this.parseData = this.parseData.bind(this);\n this.renderChart = this.renderChart.bind(this);\n this.handleTabChange = this.handleTabChange.bind(this);\n this.dispatchAPI = this.dispatchAPI.bind(this);\n this.getFileName = this.getFileName.bind(this);\n\n this.state = {\n ...this.state,\n tab_index: 0,\n };\n }\n\n dispatchAPI(user_id, start_date, end_date) {\n return getUserSessionData(user_id, start_date, end_date, true);\n }\n\n parseData(payload) {\n let categories = {};\n\n // Group all related level categories into arrays\n for (let key in payload) {\n let category = payload[key].categories;\n if (category !== null && category != \"null\") {\n categories[category] = categories[category] || [];\n categories[category].push(payload[key]);\n }\n }\n\n let tableData = [];\n\n // Iterate over all level categories\n for (let category in categories) {\n const levels = categories[category];\n\n // Will store all data for this line\n let categoryData = {\n name: capitalize(category),\n levels: [],\n };\n\n // Iterate over all levels within the category\n for (const level of levels) {\n let levelData = {\n name: level.name,\n sessions: [],\n columns: [\n {\n title: \"Date\",\n field: \"created_at\",\n },\n ],\n };\n // Add all the tracked fields from aggregates to the table\n for (let key in level.avg) {\n if (key != \"count\")\n levelData.columns.push({ title: capitalize(key), field: key });\n }\n levelData.sessions = level.sessions;\n\n categoryData.levels.push(levelData);\n }\n tableData.push(categoryData);\n }\n this.table_data = tableData;\n\n return { chartData: {}, chartOptions: {} };\n }\n\n // Handles when a new tab is selected\n handleTabChange(event, newValue) {\n event.preventDefault();\n this.setState({\n ...this.state,\n tab_index: newValue,\n });\n }\n\n getFileName(levelData) {\n let user_name = \"\";\n if (this.props.user != undefined) {\n user_name = this.props.user.first_name || \"\";\n user_name += \"_\" + (this.props.user.last_name || \"\");\n }\n return `${user_name}_${levelData.name}_${moment(\n this.props.start_date\n ).format(\"YYYY_MM_DD\")}-${moment(this.props.end_date).format(\n \"YYYY_MM_DD\"\n )}.csv`;\n }\n\n renderChart() {\n const tabBar = (\n \n \n {this.table_data.map((category, ix) => (\n \n );\n\n return (\n \n {tabBar}\n {this.table_data.map((category, ix) => (\n \n {category.levels.map((level, ix) => (\n \n \n {level.name} \n \n \n \n \n \n \n \n \n ))}\n \n ))}\n \n );\n }\n}\n\nexport default UserSession;\n","import React from \"react\";\nimport { Bar } from \"react-chartjs-2\";\nimport ChartBase from \"./ChartBase\";\nimport { getUserSessionData } from \"../../../actions/index\";\n\nclass UserPerformanceRatio extends ChartBase {\n constructor(props) {\n super(props, getUserSessionData);\n this.renderChart = this.renderChart.bind(this);\n this.parseData = this.parseData.bind(this);\n this.dispatchAPI = this.dispatchAPI.bind(this);\n }\n\n dispatchAPI(user_id, start_date, end_date) {\n return getUserSessionData(user_id, start_date, end_date);\n }\n\n parseData(payload) {\n const {\n mail_room,\n nature_path,\n restaurant,\n spot_the_difference,\n trail_making,\n western,\n } = payload;\n\n // --------------- this gets the skill's average correct value --------------\n const getCorrect = (value) => {\n return value.session_count !== 0 ? value.avg.correct : 0;\n };\n\n //-------------- this gets the skill's average incorrect value -------------\n const getIncorrect = (value) => {\n return value.session_count !== 0\n ? value.avg.missed || value.avg.incorrect\n : 0;\n };\n\n //------ put correct values in to an array and gets the sum afterwards -----\n const attentionCorr = [\n getCorrect(mail_room),\n getCorrect(spot_the_difference),\n ].reduce((attentionCorr, x) => Math.floor(attentionCorr + x));\n\n const memoryCorr = [\n getCorrect(trail_making),\n getCorrect(nature_path),\n ].reduce((memoryCorr, x) => Math.floor(memoryCorr + x));\n\n const processingCorr = [getCorrect(restaurant), getCorrect(western)].reduce(\n (processingCorr, x) => Math.floor(processingCorr + x)\n );\n\n //----- put incorrect values in to an array and gets the sum afterwards ----\n const attentionInCorr = [\n getIncorrect(mail_room),\n getIncorrect(spot_the_difference),\n ].reduce((attentionInCorr, x) => Math.floor(attentionInCorr + x));\n\n const memoryInCorr = [\n getIncorrect(trail_making),\n getIncorrect(nature_path),\n ].reduce((memoryInCorr, x) => Math.floor(memoryInCorr + x));\n\n const processingInCorr = [\n getIncorrect(restaurant),\n getIncorrect(western),\n ].reduce((processingInCorr, x) => Math.floor(processingInCorr + x));\n\n let chartData = {\n labels: [\"Attention\", \"Memory\", \"Processing\"],\n datasets: [\n {\n data: [attentionCorr, memoryCorr, processingCorr],\n label: \"Correct\",\n fillColor: \"rgb(21.2%,76.9%,98%)\",\n backgroundColor: \"rgb(21.2%,76.9%,98%)\",\n },\n {\n data: [attentionInCorr, memoryInCorr, processingInCorr],\n label: \"Incorrect\",\n fillColor: \"rgb(98.4%,31%,45.9%)\",\n backgroundColor: \"rgb(98.4%,31%,45.9%)\",\n },\n ],\n };\n const chartOptions = {\n legend: { display: false },\n scales: {\n xAxes: [\n {\n ticks: { fontSize: 15 },\n },\n ],\n yAxes: [\n {\n ticks: {\n beginAtZero: true,\n fontSize: 15,\n },\n scaleLabel: {\n display: true,\n labelString: \"Cumulative Incorrect vs Correct\",\n fontSize: 15,\n },\n },\n ],\n },\n responsive: true,\n };\n\n return { chartData, chartOptions };\n }\n\n renderChart() {\n return (\n \n
\n )\n }else{\n return (No Session Data )\n }\n\n\n}\n*/\n","import React, { Component, useEffect } from \"react\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport PropTypes from \"prop-types\";\n\n// importing Material UI Components\nimport {\n Fab,\n Grid,\n Input,\n MenuItem,\n Select,\n Typography,\n} from \"@material-ui/core\";\nimport moment from \"moment\";\nimport { capitalize, trimRight } from \"../../../lib/index\";\nimport { updateUser } from \"../../../actions/index\";\n\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport SaveIcon from \"@material-ui/icons/Save\";\nimport CancelIcon from \"@material-ui/icons/Cancel\";\nimport { DatePicker, MuiPickersUtilsProvider } from \"@material-ui/pickers\";\nimport MomentUtils from \"@date-io/moment\";\nimport PermissionsService from \"../../../lib/PermissionsSystem\";\nimport {\n DEFAULT_PRONOUN_SETS,\n DEFAULT_GENDERS,\n USER_TYPES,\n} from \"../../../lib/Constants\";\n\nimport Tooltip from \"@material-ui/core/Tooltip\";\n\n// imports the user data that will be used later on when rendering\n// import { useDispatch, useSelector, connect } from 'react-redux';\n// import { updateSelectedUser } from '../../actions/';\n// import { BrowserRouter as Router, Route, Link, useLocation, Switch } from 'react-router-dom'\n\nconst styles = (theme) => ({\n patientContainer: {\n backgroundColor: \"#fafafa\",\n border: \"3px solid #D0EEFB\",\n borderRadius: \"5px\",\n margin: \"0\",\n width: \"90%\",\n padding: \".5rem\",\n color: \"#555555\",\n },\n infoLabel: {\n fontWeight: \"bold\",\n float: \"right\",\n paddingRight: \"0.5em\",\n },\n icon: {\n width: \"32px\",\n height: \"32px\",\n float: \"right\",\n marginLeft: \"16px\",\n },\n input: {\n width: \"100%\",\n },\n});\n\n/**\n * Component for patient basic information (name, gender, contact info, etc...)\n */\nclass UserFile extends React.Component {\n constructor(props) {\n super(props);\n\n this.submitUpdate = this.submitUpdate.bind(this);\n this.cancelChanges = this.cancelChanges.bind(this);\n this.getInitialState = this.getInitialState.bind(this);\n this.mapToState = this.mapToState.bind(this);\n this.mapToStateValue = this.mapToStateValue.bind(this);\n this.updateGender = this.updateGender.bind(this);\n this.updatePronounSet = this.updatePronounSet.bind(this);\n this.generatePronounSample = this.generatePronounSample.bind(this);\n\n this.state = this.getInitialState();\n }\n\n getInitialState() {\n const props = this.props;\n\n return {\n isEditing: false,\n user_id: props.user_id,\n user_data: {\n ...props.user,\n ...props.patient_data,\n dob: moment(props.user.dob),\n },\n // User data that has been edited\n working_user_data: {},\n has_custom_pronouns:\n DEFAULT_PRONOUN_SETS.find(\n (x) => x.subject === props.user.pronoun_subject\n ) === undefined,\n has_custom_gender: !DEFAULT_GENDERS.includes(\n props.user.gender.toLowerCase()\n ),\n info_message: undefined,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.user !== this.props.user) {\n console.log(\"Refreshing user state\");\n this.setState(this.getInitialState());\n }\n }\n\n async submitUpdate() {\n try {\n const result = await updateUser(\n this.state.user_id,\n this.state.working_user_data\n )();\n this.setState({\n ...this.state,\n user_data: {\n ...this.state.user_data,\n ...this.state.working_user_data,\n },\n info_message: (\n \n Updated user account\n \n ),\n isEditing: false,\n });\n } catch (e) {\n console.log(e);\n this.setState({\n ...this.state,\n working_user_data: {},\n error_message: (\n \n Failed to update account\n \n ),\n isEditing: false,\n });\n }\n }\n\n async cancelChanges() {\n this.setState({\n ...this.state,\n working_user_data: {},\n isEditing: false,\n });\n }\n\n mapToState(target) {\n return {\n value:\n this.state.working_user_data[target] === undefined\n ? this.state.user_data[target]\n : this.state.working_user_data[target],\n onChange: (event) => {\n this.setState({\n ...this.state,\n working_user_data: {\n ...this.state.working_user_data,\n [target]: event.target.value,\n },\n });\n },\n };\n }\n\n mapToStateValue(target) {\n return {\n value:\n this.state.working_user_data[target] === undefined\n ? this.state.user_data[target]\n : this.state.working_user_data[target],\n onChange: (value) => {\n this.setState({\n ...this.state,\n working_user_data: {\n ...this.state.working_user_data,\n [target]: value,\n },\n });\n },\n };\n }\n\n updateGender(event) {\n let newState = this.state;\n newState.has_custom_gender = event.target.value === \"custom\";\n if (newState.has_custom_gender) {\n newState.working_user_data.gender =\n this.state.working_user_data.gender || newState.user_data.gender;\n } else {\n newState.working_user_data.gender = event.target.value;\n }\n console.log(newState.gender);\n this.setState(newState);\n }\n\n updatePronounSet(event) {\n let newState = this.state;\n newState.has_custom_pronouns = event.target.value === \"custom\";\n if (!newState.has_custom_pronouns) {\n let set = DEFAULT_PRONOUN_SETS.find(\n (x) => x.subject == event.target.value\n );\n newState.working_user_data.pronoun_subject = set.subject;\n newState.working_user_data.pronoun_possessive = set.possessive;\n newState.working_user_data.pronoun_object = set.object;\n }\n this.setState(newState);\n }\n\n generatePronounSample(options) {\n const pronoun_subject =\n this.state.working_user_data.pronoun_subject ||\n this.state.user_data.pronoun_subject;\n const pronoun_object =\n this.state.working_user_data.pronoun_object ||\n this.state.user_data.pronoun_object;\n const pronoun_possessive =\n this.state.working_user_data.pronoun_possessive ||\n this.state.user_data.pronoun_possessive;\n const pronoun_reflexive = pronoun_object + \"self\";\n const pronoun_is_plural = pronoun_subject === \"they\";\n\n return (\n \n {options.capitalize_subject ? (\n \n {capitalize(pronoun_subject)} \n \n ) : (\n {capitalize(pronoun_subject)} \n )}\n \n {pronoun_is_plural ? \"are\" : \"is\"} early for{\" \"}\n {options.capitalize_possessive ? (\n \n {pronoun_possessive} \n \n ) : (\n {pronoun_possessive} \n )}{\" \"}\n appointment, can you go talk to{\" \"}\n {options.capitalize_object ? (\n \n {pronoun_object} \n \n ) : (\n {pronoun_object} \n )}\n ?{\" \"}\n {options.capitalize_subject ? (\n \n {capitalize(pronoun_subject)} \n \n ) : (\n {capitalize(pronoun_subject)} \n )}{\" \"}\n {pronoun_is_plural ? \"don't\" : \"doesn't\"} like waiting by{\" \"}\n {pronoun_reflexive}.\n \n );\n }\n\n render() {\n const { patientContainer, infoLabel } = this.props.classes;\n const classes = this.props.classes;\n const {\n first_name,\n last_name,\n gender,\n dob,\n email,\n education,\n diagnosis,\n fitpoints,\n } = this.state.user_data;\n\n const isEditing = this.state.isEditing;\n\n const canEdit =\n !(\n PermissionsService.GetUserID() == this.state.user_id &&\n !PermissionsService.HasPermission(\"org.admin.self.update\")\n ) &&\n (this.state.user_data.user_type === USER_TYPES.Patient\n ? PermissionsService.HasPermission(\"org.admin.patients.update\")\n : this.state.user_data.user_type === USER_TYPES.Practitioner\n ? PermissionsService.HasPermission(\"org.admin.users.update\")\n : PermissionsService.GetUser().type === USER_TYPES.Admin);\n\n return (\n \n {/* Form Group */}\n \n {canEdit && (\n \n {this.state.isEditing ? (\n \n \n \n \n \n \n \n \n ) : (\n \n {\n this.setState({ ...this.state, isEditing: true });\n }}\n className={classes.icon}\n >\n \n )}\n \n )}\n {/* Basic Info */}\n \n \n Basic Information \n \n {/* Name row */}\n \n \n Name: \n \n \n {this.state.isEditing ? (\n \n \n ) : (\n \n {first_name} \n {last_name}\n \n )}\n \n \n {/* DOB row */}\n \n \n Date of Birth: \n \n \n {this.state.isEditing ? (\n \n \n \n \n ) : (\n {dob.format(\"MMMM Do, YYYY\")} \n )}\n \n \n {/* Gender row */}\n \n \n Gender: \n \n \n {this.state.isEditing ? (\n \n \n \n Prefer not to say \n Male \n Female \n Non-binary \n Custom \n \n {this.state.has_custom_gender && (\n \n \n ) : (\n {capitalize(gender)} \n )}\n \n \n {/* Pronouns row */}\n \n \n \n EX: \n Pronouns: \n \n \n \n {this.state.isEditing ? (\n \n \n Feminine (she/her/hers) \n Masculine (he/him/his) \n \n Neuter (they/them/theirs)\n \n Custom \n \n {this.state.has_custom_pronouns && (\n \n \n \n \n Pronoun subject\n \n EX: he, she, they\n \n }\n aria-label=\"pronoun subject\"\n >\n \n \n \n \n Pronoun objective\n \n EX: him, her, them\n \n \n \n \n Pronoun possessive\n \n EX: his, her, their\n \n \n )}\n \n ) : (\n \n \n EX: \n \n }\n aria-label=\"pronouns\"\n >\n \n {this.state.user_data.pronoun_subject}/\n {this.state.user_data.pronoun_object}/\n {this.state.user_data.pronoun_possessive}\n \n \n \n )}\n \n \n {/* Contact Email */}\n \n \n Email: \n \n \n {email} \n \n \n \n {/* Patient Info */}\n {PermissionsService.HasPermission(\n \"org.admin.patients.notes.read\"\n ) && (\n \n \n Patient Information \n \n {/* Diagnosis */}\n \n \n Diagnosis: \n \n \n {this.state.isEditing ? (\n \n \n ) : (\n {diagnosis} \n )}\n \n \n {/* Education */}\n \n \n Education: \n \n \n {this.state.isEditing ? (\n \n \n ) : (\n {education} \n )}\n \n \n {/* Fitpoints */}\n \n \n Fitpoints: \n \n \n {fitpoints} \n \n \n \n )}\n \n {this.state.info_message} \n \n \n \n );\n }\n}\n\nUserFile.propTypes = {\n classes: PropTypes.object.isRequired,\n user: PropTypes.object.isRequired,\n patient_data: PropTypes.object.isRequired,\n user_id: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles)(UserFile);\n","import {\n Button,\n Container,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n Grid,\n Input,\n InputLabel,\n Snackbar,\n Tooltip,\n} from \"@material-ui/core\";\nimport React from \"react\";\nimport JoditEditor from \"jodit-react\";\n// https://xdsoft.net/jodit/doc/\nimport { connect } from \"react-redux\";\n\nimport NotesActions from \"../../../actions/NotesActions\";\nimport Editor from \"rich-markdown-editor\";\nimport { DateTimePicker, MuiPickersUtilsProvider } from \"@material-ui/pickers\";\nimport moment from \"moment\";\nimport MomentUtils from \"@date-io/moment\";\nimport { Label, Save, ShowChart } from \"@material-ui/icons\";\nimport DeleteForeverIcon from \"@material-ui/icons/DeleteForever\";\nimport SaveIcon from \"@material-ui/icons/Save\";\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport Alert from \"@material-ui/lab/Alert\";\nimport PermissionsService from \"../../../lib/PermissionsSystem\";\nimport { Debug } from \"../../../lib/index\";\n\nclass PatientNotes extends React.Component {\n constructor(props) {\n super(props);\n\n this.onTextChanged = this.onTextChanged.bind(this);\n this.handleSave = this.handleSave.bind(this);\n this.filterNotes = this.filterNotes.bind(this);\n this.handleFilterChanged = this.handleFilterChanged.bind(this);\n this.onCreateNewNote = this.onCreateNewNote.bind(this);\n this.noteDateChanged = this.noteDateChanged.bind(this);\n this.goToData = this.goToData.bind(this);\n this.deleteNote = this.deleteNote.bind(this);\n this.onDeleteModalClose = this.onDeleteModalClose.bind(this);\n this.openDeleteModal = this.openDeleteModal.bind(this);\n\n this.state = {\n note: \"\",\n start_date: undefined,\n end_date: undefined,\n note_date: moment(), // LOCAL TIME\n note_id: undefined,\n creator_first_name: undefined,\n creator_last_name: undefined,\n creator_id: undefined,\n can_edit_note: PermissionsService.HasPermission(\n \"org.admin.patients.notes.create\"\n ),\n can_delete_note: false,\n is_editing: true,\n delete_modal_open: false,\n message:
,\n filtered_notes: this.props.patient_notes,\n note_data_callback: () => {\n return \"\";\n },\n };\n }\n\n componentDidMount() {\n if (this.props.user_id) {\n NotesActions.GetNotes(this.props.user_id)(this.props.dispatch);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (\n (this.props.patient_notes !== prevProps.patient_notes) |\n (this.props.patient_notes?.length != prevProps.patient_notes?.length)\n ) {\n Debug.log(\"Refresh in order!\");\n this.setState({\n ...this.state,\n filtered_notes: this.filterNotes(this.state.filter),\n });\n }\n\n if (prevProps.user_id != this.props.user_id) {\n NotesActions.GetNotes(this.props.user_id)(this.props.dispatch);\n }\n }\n\n async deleteNote() {\n let result = await NotesActions.DeleteNote(\n this.props.user.id,\n this.state.note_id\n )(this.props.dispatch);\n\n if (result.status == 200) {\n this.setState({\n ...this.state,\n delete_modal_open: false,\n message: (\n \n Note has been deleted \n \n ),\n });\n this.onCreateNewNote();\n } else {\n this.setState({\n ...this.state,\n delete_modal_open: false,\n message: (\n \n \n Failed to delete note {result.data?.message}\n \n \n ),\n });\n }\n }\n\n filterNotes(text) {\n const filter = text?.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\") || \"\";\n if (/\\s/g.test(filter)) {\n return this.props.patient_notes;\n } else {\n const regex = new RegExp(filter, \"i\");\n console.log(\"filter: \" + filter);\n return this.props.patient_notes.filter((x) => {\n return (\n regex.test(x.note) ||\n regex.test(x.admin.first_name) ||\n regex.test(x.admin.last_name) ||\n regex.test(\n moment.utc(x.note_date).local().format(\"MMM D, YYYY h:mmA\")\n )\n );\n });\n }\n }\n\n onTextChanged(contentCallback) {\n this.setState({\n ...this.state,\n note_data_callback: contentCallback,\n });\n }\n\n onCreateNewNote() {\n this.setState({\n ...this.state,\n note: \" \",\n note_date: moment(),\n note_id: undefined,\n creator_first_name: undefined,\n creator_last_name: undefined,\n creator_id: undefined,\n can_edit_note: true,\n is_editing: PermissionsService.HasPermission(\n \"org.admin.patients.notes.create\"\n ),\n message:
,\n });\n }\n\n async handleFilterChanged(e) {\n let filter = e.target.value;\n this.setState({\n ...this.state,\n filter,\n filtered_notes: this.filterNotes(filter),\n });\n }\n\n goToData() {\n if (this.props.jumpToDate) {\n this.props.jumpToDate(moment(this.state.note_date).utc(true));\n }\n }\n\n noteDateChanged(newDate) {\n this.setState({\n ...this.state,\n note_date: newDate,\n });\n }\n\n onDeleteModalClose() {\n this.setState({\n ...this.state,\n delete_modal_open: false,\n });\n }\n\n openDeleteModal() {\n this.setState({\n ...this.state,\n delete_modal_open: true,\n });\n }\n\n async handleNoteChanged(note_id) {\n let note = this.props.patient_notes?.find((x) => x.id === note_id);\n if (note) {\n const can_edit = !PermissionsService.HasPermission(\n \"org.admin.patients.notes.update\"\n )\n ? false\n : note.admin.id != PermissionsService.GetUserID()\n ? PermissionsService.HasPermission(\n \"org.admin.patients.notes.update.others\"\n )\n : true;\n const can_delete_note = PermissionsService.HasPermission(\n \"org.admin.patients.notes.delete\"\n )\n ? note.admin.id != PermissionsService.GetUserID()\n ? PermissionsService.HasPermission(\n \"org.admin.patients.notes.delete.others\"\n )\n : true\n : false;\n this.setState({\n ...this.state,\n note: note.note,\n note_id: note.id,\n note_date: moment.utc(note.note_date).local(),\n can_edit_note: can_edit,\n can_delete_note: can_delete_note,\n creator_first_name: note.admin.first_name,\n creator_last_name: note.admin.last_name,\n creator_id: note.admin.id,\n is_editing: false,\n });\n }\n }\n\n async handleSave() {\n if (this.state.note_id) {\n let result = await NotesActions.UpdateNote(\n this.props.user.id,\n this.state.note_id,\n {\n note: this.state.note_data_callback(),\n note_date: moment(this.state.note_date).utc().toISOString(),\n }\n )(this.props.dispatch);\n\n if (result.status == 200) {\n this.setState({\n ...this.state,\n is_editing: false,\n can_edit: true,\n note_id: result.data?.note?.id,\n message: (\n \n Updated note \n \n ),\n });\n } else {\n this.setState({\n ...this.state,\n message: (\n \n \n Failed to update note {result.data?.message}\n \n \n ),\n });\n }\n }\n // We are creating a new note\n else {\n let result = await NotesActions.CreateNote(this.props.user.id, {\n note: this.state.note_data_callback(),\n note_date: moment(this.state.note_date).utc().toISOString(),\n })(this.props.dispatch);\n\n if (result.status == 200) {\n this.setState({\n message: (\n \n Created new note \n \n ),\n });\n this.handleNoteChanged(result.data.note.id);\n } else {\n this.setState({\n ...this.state,\n message: (\n \n \n Failed to create note {result.data?.message}\n \n \n ),\n });\n }\n }\n }\n\n render() {\n const editorOptions = {\n width: \"100%\",\n minHeight: \"400px\",\n };\n const padding = {\n padding: \"2px 4px\",\n };\n\n const button = this.state.is_editing ? (\n \n \n ) : !this.state.is_editing & this.state.can_edit_note ? (\n {\n this.setState({ ...this.state, is_editing: true });\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n
\n );\n const deleteButton =\n !this.state.is_editing && this.state.can_delete_note ? (\n \n
\n );\n\n const creator_name =\n (this.state.creator_first_name ||\n PermissionsService.GetUser().first_name) +\n \" \" +\n (this.state.creator_last_name || PermissionsService.GetUser().last_name);\n\n return (\n \n \n \n \n {this.props.note_count}
\n {this.state.filtered_notes?.map((note) => {\n const date = moment\n .utc(note.note_date)\n .local()\n .format(\"MMM D, YYYY h:mmA\");\n return (\n \n \n
{\n this.handleNoteChanged(note.id);\n e.preventDefault();\n }}\n >\n {date}\n \n \n );\n }) ||
}\n \n {PermissionsService.HasPermission(\n \"org.admin.patients.notes.create\"\n ) && (\n \n \n {\n this.onCreateNewNote(e);\n e.preventDefault();\n }}\n >\n \n )}\n \n \n \n \n Note Date: \n \n \n \n \n \n {creator_name}\n \n \n \n \n \n {this.state.message}\n \n \n \n {\"Delete this note?\"}\n \n \n \n Are you sure you wish to delete this note? This cannot be\n undone and the note will not be recoverable.\n \n \n \n \n Cancel\n \n \n Confirm\n \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n user: state.userReducer.viewed_user,\n patient_notes: state.notesReducer.notes,\n note_count: state.notesReducer.note_count,\n has_fetched_notes: state.notesReducer.has_fetched,\n };\n};\nexport default connect(mapStateToProps, (dispatch) => {\n return {\n CreateNote: PatientNotes.CreateNote,\n GetNotes: PatientNotes.GetNotes,\n UpdateNote: PatientNotes.UpdateNote,\n DeleteNote: PatientNotes.DeleteNote,\n dispatch,\n };\n})(PatientNotes);\n","import React, { Component, useEffect } from \"react\";\nimport moment from \"moment\";\nimport Container from \"@material-ui/core/Container\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Button from \"@material-ui/core/Button\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grid from \"@material-ui/core/Grid\";\n\nimport UsersDropdown from \"../../sharedComponents/UsersDropdown\";\nimport GeneralMetricsChartWrapper from \"../../d3Components/GeneralMetricsChartWrapper\";\nimport LoadingSpinner from \"../../sharedComponents/LoadingSpinner\";\nimport DateRangePickers from \"../../sharedComponents/DateRangePickers\";\nimport MetricSwitches from \"../../d3Components/MetricSwitches\";\nimport RadarPlotWrapper from \"../../d3Components/RadarPlotWrapper\";\nimport RadarLegend from \"../../d3Components/RadarLegend\";\nimport UserSession from \"./UserSession\";\nimport UserSkillLevels from \"./UserSkillLevels\";\nimport UserPerformanceRatio from \"./UserPerformanceRatio\";\nimport UserMood from \"./UserMood\";\n\n// icon\nimport {\n DesktopWindows,\n FolderShared,\n Label,\n Mood,\n ExpandMore,\n Comment,\n} from \"@material-ui/icons\";\nimport BarChartIcon from \"@material-ui/icons/BarChart\";\nimport NotesIcon from \"@material-ui/icons/Notes\";\n\n//import patient file\nimport UserFile from \"./UserFile\";\nimport PatientNotes from \"./PatientNotes\";\n\nimport { connect } from \"react-redux\";\nimport {\n getGraphData,\n getUsersByOrg,\n getUserSessionData,\n getRadarPlotData,\n updateSelectedUser,\n getUserSession,\n getUser,\n updateEndDateSelect,\n updateStartDateSelect,\n} from \"../../../actions/index\";\nimport { Debug } from \"../../../lib/index\";\nimport {\n Divider,\n Accordion,\n AccordionDetails,\n AccordionSummary,\n capitalize,\n} from \"@material-ui/core\";\nimport { dispatch } from \"d3-dispatch\";\nimport NotesActions from \"../../../actions/NotesActions\";\n\nclass UserProfilePage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n radarPlotData: [],\n userSkillLevels: [],\n userSession: [],\n graphData: [],\n user: undefined,\n patient_data: undefined,\n start_date: moment().subtract(1, \"month\").toISOString(),\n end_date: moment().toISOString(),\n accordions: {\n profile_info: true,\n charts: true,\n notes: false,\n },\n };\n\n this.renderPlaysOverTime = this.renderPlaysOverTime.bind(this);\n this.jumpToSingleDay = this.jumpToSingleDay.bind(this);\n this.handleDateRangeChanged = this.handleDateRangeChanged.bind(this);\n this.handleAccordionStatusChanged =\n this.handleAccordionStatusChanged.bind(this);\n\n this.chartsRef = React.createRef();\n }\n\n componentDidMount() {\n // Get the user's information\n this.props.getUser(this.props.match.params.id)(this.props.dispatch);\n }\n\n handleAccordionStatusChanged(key_name, value) {\n // Update the relevant accordion state depending on the id of the accordion\n this.setState({\n ...this.state,\n accordions: {\n ...this.state.accordions,\n [key_name]: value,\n },\n });\n }\n\n handleDateRangeChanged(start_date, end_date) {\n console.log(start_date);\n console.log(end_date);\n this.setState({\n ...this.state,\n start_date: moment(start_date).utc().toISOString(),\n end_date: moment(end_date).utc().toISOString(),\n });\n }\n\n jumpToSingleDay(date) {\n let start_date = moment(date).local().startOf(\"day\");\n let end_date = moment(date).local().endOf(\"day\");\n console.log(start_date);\n console.log(end_date);\n let newState = this.state;\n newState.accordions.charts = true;\n this.setState(newState);\n this.chartsRef?.current?.scrollIntoView();\n updateStartDateSelect(start_date.utc())(this.props.dispatch);\n updateEndDateSelect(end_date.utc())(this.props.dispatch);\n this.handleDateRangeChanged(start_date, end_date);\n }\n\n renderPlaysOverTime = () => {\n if (this.props.graphData) {\n return (\n No Session Data ;\n }\n };\n\n render() {\n const center_style = {\n textAlign: \"center\",\n width: \"100%\",\n display: \"inline-block\",\n height: \"1.5em\",\n margin: \"0 auto\",\n };\n return (\n \n {this.props.user === undefined && \n \n {this.props.user.first_name} {this.props.user.last_name}\n \n \n {capitalize(this.props.user.gender)} | \n {moment().diff(this.props.user.dob, \"years\")} | \n {`${this.props.user.pronoun_subject}/${this.props.user.pronoun_object}/${this.props.user.pronoun_possessive}`} {\" \"}\n | \n {this.props.user.patient_data?.diagnosis}\n \n \n \n \n {\n this.handleAccordionStatusChanged(\"profile_info\", v);\n }}\n style={{ width: \"100%\" }}\n >\n \n \n \n \n \n \n \n \n {/** CHARTS AND GRAPHS */}\n \n {\n this.handleAccordionStatusChanged(\"charts\", v);\n }}\n style={{ width: \"100%\" }}\n >\n \n \n \n \n \n \n \n \n Select Data Range\n \n \n \n \n {/* renders the mood chart --- radar plot */}\n \n \n \n Average Mood\n \n \n \n \n Skill Over Time\n \n \n \n \n Performance Ratio\n \n \n \n \n Raw Session Data\n \n \n \n \n \n \n \n\n {/** Patient Notes */}\n \n {\n this.handleAccordionStatusChanged(\"notes\", v);\n }}\n style={{ width: \"100%\" }}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n user: state.userReducer.viewed_user,\n patient_data: state.userReducer.viewed_patient_data,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n getUser: getUser,\n dispatch,\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserProfilePage);\n","import React, { Component } from \"react\";\n\nimport Container from \"@material-ui/core/Container\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Button from \"@material-ui/core/Button\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grid from \"@material-ui/core/Grid\";\n\nimport UsersDropdown from \"../sharedComponents/UsersDropdown\";\nimport LoadingSpinner from \"../sharedComponents/LoadingSpinner\";\nimport RadarPlotWrapper from \"./RadarPlotWrapper\";\nimport RadarLegend from \"./RadarLegend\";\nimport ChartRangeDropdown from \"../sharedComponents/ChartRangeDropdown\";\n\nimport { connect } from \"react-redux\";\nimport { getRadarPlotData, getUsersByOrg } from \"../../actions/\";\nimport { Divider } from \"@material-ui/core\";\n\nimport { Radar } from \"react-chartjs-2\";\n\nclass UserFeedbackGraph extends Component {\n loadingClients = () => {\n if (this.props.users.length === 0) {\n this.props.getUsersByOrg();\n return \n \n {\n this.props.getRadarPlotData(\n this.props.selectedUser,\n this.props.dateSelect\n );\n }}\n >\n Get Data\n \n
\n\n {/* \n \n \n \n \n \n \n \n );\n } else {\n return (\n \n No rating data found\n \n );\n }\n } else {\n return (\n \n No rating data found\n \n );\n }\n };\n\n // button\n\n render() {\n return (\n \n \n User Mood\n \n \n \n {this.loadingClients()}\n \n \n {this.renderChart()}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n users: state.userReducer.users,\n selectedUser: state.userReducer.selectedUser,\n userChartData: state.userRadarPlotReducer.userChartData,\n dateSelect: state.userRadarPlotReducer.dateSelect,\n };\n};\n\nexport default connect(mapStateToProps, { getUsersByOrg, getRadarPlotData })(\n UserFeedbackGraph\n);\n","import React from \"react\";\nimport Button from \"@material-ui/core/Button\";\nimport ExitToAppIcon from \"@material-ui/icons/ExitToApp\";\nimport Modal from \"@material-ui/core/Modal\";\nimport Backdrop from \"@material-ui/core/Backdrop\";\nimport Fade from \"@material-ui/core/Fade\";\n\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { useHistory } from \"react-router-dom\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { toggleLogoutModal } from \"../../actions\";\n\nconst useStyles = makeStyles((theme) => ({\n button: {\n margin: theme.spacing(1),\n color: \"#000 \",\n \"&:hover\": {\n color: \"#f00\",\n // background: \"#f00\"\n },\n },\n modal: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: \"2px soild #000\",\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n drawerButton: {\n width: \"100%\",\n },\n}));\n\nexport default function LogoutButton(props) {\n const classes = useStyles();\n let history = useHistory();\n const open = useSelector((state) => state.appbarReducer.logoutModalOpen);\n const users = useSelector((state) => state.userReducer.users);\n const dispatch = useDispatch();\n const handleOpen = () => dispatch(toggleLogoutModal(true));\n const handleClose = () => dispatch(toggleLogoutModal(false));\n\n function goToLogin() {\n history.push(\"/\");\n }\n\n let canLogin = true;\n if (Array.isArray(users)) {\n if (\n users.filter(function (e) {\n return e.can_login === false;\n }).length > 0\n ) {\n // if we find any users that are logged in, the toggle with logout all users.\n canLogin = false;\n }\n }\n\n const logoutComponent = () => {\n return (\n \n {logoutButtonStyle()}\n
\n \n \n
Finished? Toggle off. \n
\n Leaving a user's login status switch on can allow them access\n while you are not logged in.\n
\n {logoutComponent()}\n
\n \n \n
{user ? `Hello ${user.first_name}` : \"\"} \n
\n \n
\n \n Manage Users \n \n \n Session Schedule \n \n \n Billing Info \n \n {props.privilege === 1 && (\n \n \n Manage Organizations \n \n {/* \n \n \n \n \n \n */}\n \n )}\n {/*
\n
\n \n Give Feedback\n \n \n \n
\n \n \n \n \n \n \n \n
*/\n }}\n
\n {MainLinks}\n \n {mobileOpen && drawer}
\n \n
\n \n \n Name: {perm?.name}\n \n \n Parent:\n {parent_id ? (\n \n {this.props.permissions.find((x) => x.id === parent_id)?.name ||\n \"Not Found\"}\n \n ) : (\n \n \n \n \n Description: {perm?.description}\n \n \n Requires Privileged Account? {perm?.description}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n permissions: state.permissionsReducer.permissions,\n hasFetchedPerms: state.permissionsReducer.hasFetchedPerms,\n };\n};\n\nexport default connect(mapStateToProps)(PermissionDetail);\n","import React, { Component } from \"react\";\n\nimport Container from \"@material-ui/core/Container\";\nimport OrganizationsList from \"./OrganizationsList\";\nimport AddOrganizationForm from \"./AddOrganizationForm\";\nimport LoadingSpinner from \"../sharedComponents/LoadingSpinner\";\nimport Switch from \"@material-ui/core/Switch\";\nimport Grid from \"@material-ui/core/Grid\";\n\nimport { connect } from \"react-redux\";\nimport AdminActions from \"../../actions/AdminActions\";\nimport {\n Checkbox,\n Button,\n FormControl,\n FormControlLabel,\n FormGroup,\n FormLabel,\n Input,\n InputLabel,\n MenuItem,\n Select,\n TextField,\n Typography,\n} from \"@material-ui/core\";\n\nimport ActiveUsersChart from \"./ActiveUsersChart\";\nimport DateRangePickers from \"../sharedComponents/DateRangePickers\";\nimport moment from \"moment\";\n\nimport store from \"../../store\";\nimport AlignedLabel from \"../sharedComponents/AlignedLabel\";\n\nimport AddPermissionForm from \"./permissions/AddPermForm\";\nimport PermissionsDetail from \"./permissions/PermissionsDetail\";\nimport MaterialTable from \"material-table\";\n\nclass PermissionsPage extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n add_perm: {\n name: \"\",\n privilege: false,\n parent_id: null,\n },\n };\n }\n\n componentDidMount() {\n AdminActions.GetPermissionsList()(this.props.dispatch);\n AdminActions.GetRoleList()(this.props.dispatch);\n }\n\n render() {\n const permissions_grid_data = {\n columns: [\n { field: \"name\", title: \"Name\", editable: \"onAdd\" },\n { field: \"description\", title: \"Description\" },\n {\n field: \"privilege_req\",\n title: \"Privilege\",\n render: (row) => {\n return 0} disabled />;\n },\n editComponent: (props) => (\n 0}\n onChange={(e) => {\n props.onChange(e.target.checked ? 1 : 0);\n }}\n />\n ),\n },\n { field: \"parent_permission\", title: \"Parent\" },\n ],\n options: {\n search: true,\n headerStyle: {\n textAlign: \"left\",\n minWidth: \"100px\",\n position: \"sticky\",\n top: 0,\n backgroundColor: \"#D0EEFB\",\n color: \"#555\",\n },\n paging: true,\n pageSize: 10,\n emptyRowsWhenPaging: false,\n pageSizeOptions: [10, 25, 50, 100],\n tableLayout: \"auto\",\n },\n };\n\n const permissions_editing_data = {\n onRowUpdate: (newData, oldData) => {\n return AdminActions.UpdatePermission({\n id: oldData.id,\n privilege_req: newData.privilege_req,\n description: newData.description,\n parent_id: newData.parent_id,\n })(this.props.dispatch);\n },\n };\n\n const permissions = this.props.hasFetchedPerms ? (\n \n \n {role.name}\n \n {role.permissions.map((x) => {\n return (\n \n {x.name}\n \n );\n })}\n \n );\n })\n ) : (\n \n \n \n \n \n \n Found {this.props.permission_count} permissions\n \n {permissions}\n {this.props.hasFetchedPerms ? \"Y\" : \"N\"}
\n {roles}\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n permissions: state.permissionsReducer.permissions,\n hasFetchedPerms: state.permissionsReducer.hasFetchedPerms,\n roles: state.permissionsReducer.roles,\n hasFetchedRoles: state.permissionsReducer.hasFetchedRoles,\n permission_count: state.permissionsReducer.permission_count,\n };\n};\n\nexport default connect(mapStateToProps, (dispatch) => {\n return {\n GetPermissionsList: AdminActions.GetPermissionsList,\n GetRoleList: AdminActions.GetRoleList,\n UpdatePermission: AdminActions.UpdatePermission,\n dispatch,\n };\n})(PermissionsPage);\n","import React, { Component } from \"react\";\n\nimport Container from \"@material-ui/core/Container\";\nimport OrganizationsList from \"./OrganizationsList\";\nimport AddOrganizationForm from \"./AddOrganizationForm\";\nimport LoadingSpinner from \"../sharedComponents/LoadingSpinner\";\nimport Switch from \"@material-ui/core/Switch\";\nimport Grid from \"@material-ui/core/Grid\";\n\nimport { connect } from \"react-redux\";\nimport AdminActions from \"../../actions/AdminActions\";\nimport {\n Checkbox,\n Button,\n FormControl,\n FormControlLabel,\n FormGroup,\n FormLabel,\n Input,\n InputLabel,\n MenuItem,\n Select,\n TextField,\n Typography,\n Accordion,\n AccordionSummary,\n AccordionDetails,\n TableContainer,\n Table,\n TableHead,\n TableRow,\n TableCell,\n Paper,\n TableBody,\n IconButton,\n Box,\n Collapse,\n TablePagination,\n Tooltip,\n} from \"@material-ui/core\";\n\nimport ActiveUsersChart from \"./ActiveUsersChart\";\nimport DateRangePickers from \"../sharedComponents/DateRangePickers\";\nimport moment from \"moment\";\n\nimport store from \"../../store\";\nimport AlignedLabel from \"../sharedComponents/AlignedLabel\";\n\nimport AddPermissionForm from \"./permissions/AddPermForm\";\nimport PermissionsDetail from \"./permissions/PermissionsDetail\";\nimport MaterialTable from \"material-table\";\nimport {\n CloudDownload,\n ExpandMore,\n KeyboardArrowDown,\n KeyboardArrowUp,\n MailTwoTone,\n Refresh,\n} from \"@material-ui/icons\";\nimport { Utility } from \"../../lib/Utility\";\n\nimport * as queryString from \"query-string\";\n\nclass DeepDataDive extends Component {\n constructor(props) {\n super(props);\n\n let query = queryString.parse(props.location.search);\n this.state = {\n selected_level_id: null,\n selected_level_version: null,\n available_levels: [],\n template_data_tables: {},\n table_refs: {},\n filter_org_id: query.org_id,\n };\n\n this.composeDataTables = this.composeDataTables.bind(this);\n this.renderDataTable = this.renderDataTable.bind(this);\n this.renderMetaTemplateRow = this.renderMetaTemplateRow.bind(this);\n this.setTemplateOpen = this.setTemplateOpen.bind(this);\n this.exportData = this.exportData.bind(this);\n }\n\n componentDidMount() {\n AdminActions.GetAvailableLevelVersions({\n org_id: this.state.filter_org_id,\n })(this.props.dispatch).then((res) => {\n console.log(\"metatemplates:\");\n console.log(res);\n this.setState({\n ...this.state,\n available_levels: res.levels || [],\n is_template_expanded: {},\n });\n this.composeDataTables();\n });\n\n if (this.state.filter_org_id !== undefined) {\n AdminActions.GetOrganization({ org_id: this.state.filter_org_id })(\n this.props.dispatch\n ).then((res) => {\n this.setState({\n ...this.state,\n filter_org_name: res.name,\n });\n });\n }\n }\n\n async exportData(level, template) {\n let filename = level.name + \".csv\";\n\n // Fetch all sessions so we have the most up to date data\n let rows = await AdminActions.GetSessions({\n level_id: template.level_id,\n level_version: template.level_version,\n org_id: this.state.filter_org_id,\n })(this.props.dispatch).then((result) => {\n return result.results;\n });\n\n // Handles processing a single record\n var processRow = function (row) {\n var finalVal = \"\";\n // Iterate over all fields of the blob and add them\n for (let key of Object.keys(row)) {\n // Use JSON stringify\n let innerValue = JSON.stringify(row[key] || \"undefined\");\n // Replace single \" with \"\"\n var result = innerValue.replace(/\"/g, '\"\"');\n // Replace If there are special characters in the value, we need to escape the whole cell\n if (result.search(/(\"|,|\\n)/g) >= 0) result = '\"' + result + '\"';\n // Append cell to results\n finalVal += result + \",\";\n }\n // Newline to end row\n return finalVal + \"\\n\";\n };\n\n // Start compositing the CSV\n var csvFile = \"\";\n\n // Add all headers for fields\n for (let key of Object.keys(rows[0])) {\n csvFile += key + \",\";\n }\n // Next row\n csvFile += \"\\n\";\n\n // Iterate over all data and add to CSV\n for (var i = 0; i < rows.length; i++) {\n csvFile += processRow(rows[i]);\n }\n\n // https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side\n\n // Generate the blob to be downloaded\n var blob = new Blob([csvFile], { type: \"text/csv;charset=utf-8;\" });\n // If someones is using IE, god save their soul\n if (navigator.msSaveBlob) {\n // IE 10+\n navigator.msSaveBlob(blob, filename);\n }\n // Using a real browser\n else {\n // Create a temp element for downloading the file\n var link = document.createElement(\"a\");\n if (link.download !== undefined) {\n // feature detection\n // Browsers that support HTML5 download attribute\n var url = URL.createObjectURL(blob);\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", filename);\n link.style.visibility = \"hidden\";\n // We add the hidden link, click it, then remove it, lol\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n }\n }\n\n composeDataTables() {\n let tempState = this.state;\n for (let level of tempState.available_levels) {\n for (let template of level.templates) {\n let columns = [];\n for (let key of Object.keys(template.fields.RootFields)) {\n columns.push({\n field: key,\n title: key,\n render: (data) => {\n return {JSON.stringify(data[key])}
;\n },\n });\n }\n tempState.table_refs[template.id] = React.createRef();\n console.log(columns);\n let tableRef = tempState.table_refs[template.id];\n const tableSettings = {\n columns,\n tableRef,\n options: {\n search: true,\n headerStyle: {\n textAlign: \"left\",\n minWidth: \"100px\",\n position: \"sticky\",\n top: 0,\n backgroundColor: \"#D0EEFB\",\n color: \"#555\",\n },\n paging: true,\n pageSize: 10,\n emptyRowsWhenPaging: false,\n pageSizeOptions: [10, 25, 50, 100],\n tableLayout: \"auto\",\n },\n data: async (query) => {\n return new Promise((resolve, reject) => {\n AdminActions.GetSessions({\n level_id: template.level_id,\n level_version: template.level_version,\n limit: query.pageSize,\n offset: query.page * query.pageSize,\n org_id: this.state.filter_org_id,\n })(this.props.dispatch)\n .then((result) => {\n console.log(result);\n let data = {\n data: result.results,\n page: query.page,\n totalCount: result.total_count,\n };\n console.log(data);\n resolve(data);\n })\n .catch((err) => reject(err));\n });\n },\n components: {\n Pagination: (props) => {\n return (\n \n \n \n \n \n \n \n tableRef.current &&\n tableRef.current.onQueryChange()\n }\n />\n \n \n \n \n this.exportData(level, template)}\n />\n \n \n \n \n \n \n );\n },\n },\n actions: [\n {\n icon: \"refresh\",\n tooltip: \"Refresh Data\",\n isFreeAction: true,\n onClick: () =>\n tableRef.current && tableRef.current.onQueryChange(),\n },\n ],\n };\n tempState.template_data_tables[template.id] = tableSettings;\n }\n }\n this.setState(tempState);\n }\n\n renderDataTable(template, sessionData) {\n const template_chart_data = this.state.template_data_tables[template.id];\n return template_chart_data !== undefined ? (\n \n \n \n this.setTemplateOpen(template.id, !open)}\n >\n {open ? \n {template.level_version} \n {template.dependant_count} \n \n \n \n \n {this.renderDataTable(template)} \n \n \n \n \n );\n }\n\n render() {\n const levels =\n this.state.available_levels.length > 0 ? (\n this.state.available_levels.map((level) => {\n return (\n \n {level.name} \n \n \n {level.templates.map((template) => {\n return (\n \n \n \n \n Template ID \n Session Count \n \n \n \n {this.renderMetaTemplateRow(template)}\n \n
\n \n );\n })}\n \n \n );\n })\n ) : (\n \n \n \n Found {this.state.available_levels.length} Levels\n \n {this.state.filter_org_id !== undefined &&\n this.state.filter_org_name && (\n \n Showing Data For: {this.state.filter_org_name}\n \n )}\n {levels}\n \n // \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n permissions: state.permissionsReducer.permissions,\n hasFetchedPerms: state.permissionsReducer.hasFetchedPerms,\n roles: state.permissionsReducer.roles,\n hasFetchedRoles: state.permissionsReducer.hasFetchedRoles,\n permission_count: state.permissionsReducer.permission_count,\n };\n};\n\nexport default connect(mapStateToProps, (dispatch) => {\n return {\n GetAvailableLevelVersions: AdminActions.GetAvailableLevelVersions,\n GetSessions: AdminActions.GetSessions,\n dispatch,\n };\n})(DeepDataDive);\n","export const VALUE = \"value\";\nexport const ERROR = \"error\";\nexport const REQUIRED_FIELD_ERROR = \"Field can't be empty\";\n\nfunction is_bool(value) {\n return typeof value === \"boolean\";\n}\n\n/**\n * Determines a value if it's an object\n *\n * @param {object} value\n */\nexport function is_object(value) {\n return typeof value === \"object\" && value !== null;\n}\n\n/**\n *\n * @param {string} value\n * @param {boolean} isRequired\n */\nexport function is_required(value, isRequired) {\n if (!value && isRequired) return REQUIRED_FIELD_ERROR;\n return \"\";\n}\n\nexport function get_prop_values(stateSchema, prop) {\n return Object.keys(stateSchema).reduce((field, key) => {\n field[key] = is_bool(prop) ? prop : stateSchema[key][prop];\n return field;\n }, {});\n}\n","import { useState, useEffect, useCallback } from \"react\";\nimport { get_prop_values, is_object, is_required, VALUE, ERROR } from \"./utils\";\n\n/**\n * useForm hooks to handle your validation in your forms\n *\n * @param {object} stateSchema stateSchema.\n * @param {object} stateValidatorSchema stateSchemaValidation to validate your forms in react.\n * @param {function} submitFormCallback function to be execute during form submission.\n */\nfunction useForm(\n stateSchema = {},\n stateValidatorSchema = {},\n submitFormCallback\n) {\n const [state, setStateSchema] = useState(stateSchema);\n\n const [values, setValues] = useState(get_prop_values(state, VALUE));\n const [errors, setErrors] = useState(get_prop_values(state, ERROR));\n const [dirty, setDirty] = useState(get_prop_values(state, false));\n\n const [disable, setDisable] = useState(true);\n const [isDirty, setIsDirty] = useState(false);\n\n // Get a local copy of stateSchema\n useEffect(() => {\n setStateSchema(stateSchema);\n setDisable(true); // Disable button in initial render.\n setInitialErrorState();\n }, []); // eslint-disable-line\n\n // Set a brand new field values and errors\n // If stateSchema changes\n useEffect(() => {\n const values = get_prop_values(state, VALUE);\n setValues(values);\n setErrors(\n Object.keys(values).reduce((accu, curr) => {\n accu[curr] = validateField(curr, values[curr]);\n return accu;\n }, {})\n );\n }, [state]); // eslint-disable-line\n\n // For every changed in our state this will be fired\n // To be able to disable the button\n useEffect(() => {\n if (isDirty) {\n setDisable(validateErrorState());\n }\n }, [errors, isDirty]); // eslint-disable-line\n\n // Set a value of a specific field\n const setFieldValue = ({ name, value }) => {\n setValues((prevState) => ({ ...prevState, [name]: value }));\n setDirty((prevState) => ({ ...prevState, [name]: true }));\n };\n\n // Set an error of a specific field\n const setFieldError = ({ name, error }) =>\n setErrors((prevState) => ({ ...prevState, [name]: error }));\n\n // Validate fields in forms\n const validateField = useCallback(\n (name, value) => {\n const validator = stateValidatorSchema;\n // Making sure that stateValidatorSchema name is same in\n // stateSchema\n if (!validator[name]) return;\n\n const field = validator[name];\n\n let error = \"\";\n error = is_required(value, field.required);\n\n if (is_object(field[\"validator\"]) && error === \"\") {\n const validateFieldByCallback = field[\"validator\"];\n\n // Test the function callback if the value is meet the criteria\n if (!validateFieldByCallback[\"func\"](value, values)) {\n error = validateFieldByCallback[\"error\"];\n }\n }\n\n return error;\n },\n [stateValidatorSchema, values]\n );\n\n // Set Initial Error State\n // When hooks was first rendered...\n const setInitialErrorState = useCallback(() => {\n Object.keys(errors).map((name) =>\n setFieldError({ name, error: validateField(name, values[name]) })\n );\n }, [errors, values, validateField]);\n\n // Used to disable submit button if there's a value in errors\n // or the required field in state has no value.\n // Wrapped in useCallback to cached the function to avoid intensive memory leaked\n // in every re-render in component\n const validateErrorState = useCallback(\n () => Object.values(errors).some((error) => error),\n [errors]\n );\n\n // Use this callback function to safely submit the form\n // without any errors in state...\n const handleOnSubmit = useCallback(\n (event) => {\n event.preventDefault();\n\n // Making sure that there's no error in the state\n // before calling the submit callback function\n if (!validateErrorState()) {\n submitFormCallback(values);\n }\n },\n [validateErrorState, submitFormCallback, values]\n );\n\n // Event handler for handling changes in input.\n const handleOnChange = useCallback(\n (event) => {\n setIsDirty(true);\n\n const name = event.target.name;\n const value = event.target.value;\n\n const error = validateField(name, value);\n\n setFieldValue({ name, value });\n setFieldError({ name, error });\n },\n [validateField]\n );\n\n return {\n dirty,\n values,\n errors,\n disable,\n setStateSchema,\n setFieldValue,\n setFieldError,\n handleOnChange,\n handleOnSubmit,\n validateErrorState,\n };\n}\n\nexport default useForm;\n","import React, { useState, useEffect } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport useForm from \"./useForm\";\nimport {\n Typography,\n Button,\n Grid,\n Checkbox,\n TextField,\n OutlinedInput,\n FormControl,\n InputLabel,\n InputAdornment,\n IconButton,\n Select,\n MenuItem,\n} from \"@material-ui/core\";\nimport PhoneInput from \"react-phone-number-input\";\nimport \"react-phone-number-input/style.css\";\n\nimport Visibility from \"@material-ui/icons/Visibility\";\nimport VisibilityOff from \"@material-ui/icons/VisibilityOff\";\nimport SendSharpIcon from \"@material-ui/icons/SendSharp\";\nimport BlockSharpIcon from \"@material-ui/icons/BlockSharp\";\nimport Radio from \"@material-ui/core/Radio\";\nimport RadioGroup from \"@material-ui/core/RadioGroup\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\n\nconst useStyles = makeStyles({\n mainContainer: {\n display: \"grid\",\n justifyContent: \"center\",\n position: \"relative\",\n zIndex: 5,\n },\n\n formContainer: {\n position: \"relative\",\n width: \"28.125rem\",\n height: \"auto\",\n padding: \"2rem\",\n },\n inputField: {\n width: \"100%\",\n marginBottom: \"1rem\",\n },\n\n btn: {\n width: \"100%\",\n height: \"3rem\",\n background: \"red\",\n color: \"#fff\",\n \"&:hover\": {\n color: \"red\",\n opacity: \".7\",\n transition: \".3s eases-in-out \",\n },\n },\n disabledBtn: {\n background: \"rbga(0,0,0, 0.38)\",\n height: \"3rem\",\n width: \"100%\",\n },\n});\n\nconst StepOne = ({\n activeStep,\n steps,\n callbackHandleNext,\n checkoutData,\n callbackSetCheckoutData,\n}) => {\n // DEFINE THE STATE SCHEMA\n const stateSchema = {\n firstName: { value: \"\", error: \"\" },\n lastName: { value: \"\", error: \"\" },\n email: { value: \"\", error: \"\" },\n gender: { value: \"\", error: \"\" },\n pronouns: { value: \"\", error: \"\" },\n password: { value: \"\", error: \"\" },\n confirmPassword: { value: \"\", error: \"\" },\n };\n\n const stateValidatorSchema = {\n firstName: {\n required: true,\n validator: {\n func: (value) =>\n /^([A-Za-z][A-Za-z'-])+([A-Za-z][A-Za-z'-]+)*/.test(value),\n error: \"First Name must be more then 1 character\",\n },\n },\n lastName: {\n required: true,\n validator: {\n func: (value) =>\n /^([A-Za-z][A-Za-z'-])+([A-Za-z][A-Za-z'-]+)*/.test(value),\n error: \"Last Name must be more then 1 character\",\n },\n },\n email: {\n required: true,\n validator: {\n func: (value) =>\n /^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$/.test(\n value\n ),\n error: \"Invalid email format\",\n },\n },\n password: {\n required: true,\n validator: {\n func: (value) =>\n /^(?=.*[A-Za-z])(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{6,}$/.test(value),\n error:\n \"Minimum 6 character and at least one speacial character `@,$,!,%,*,#,?,&`\",\n },\n },\n };\n\n const { values, errors, dirty, handleOnChange } = useForm(\n stateSchema,\n stateValidatorSchema\n );\n const [showPasswordValue, setShowPasswordValue] = useState({\n showPassword: false,\n });\n const [showConfirmPasswordValue, setShowConfirmPasswordValue] = useState({\n showConfirmPassword: false,\n });\n\n const handleClickShowPassword = () => {\n setShowPasswordValue({\n showPassword: !showPasswordValue.showPassword,\n });\n };\n\n const handleClickShowConfirmPassword = () => {\n setShowConfirmPasswordValue({\n showConfirmPassword: !showConfirmPasswordValue.showConfirmPassword,\n });\n };\n\n const {\n firstName,\n lastName,\n email,\n gender,\n pronouns,\n password,\n confirmPassword,\n } = values;\n const classes = useStyles();\n const [value, setValue] = useState(\"\");\n\n const handleClick = (e) => {\n console.log(values);\n let newArr = [...checkoutData];\n newArr[0] = values;\n callbackSetCheckoutData(newArr);\n callbackHandleNext();\n };\n\n return (\n \n
\n Sign up with Email\n \n
\n
\n \n Monthly\n \n \n \n \n Yearly\n \n
\n\n \n
\n
\n \n
\n \n This plan is suitable for those looking to get started with \n \n
Starter Plan \n\n
\n
\n 5 users
\n\n
\n \n $15 USD \n monthly \n
\n \n\n or
\n\n \n \n $162 USD \n anually \n
\n \n\n \n 10% savings\n \n \n\n
\n select\n \n \n\n
\n
\n \n
\n Plan 2 description \n \n
Standard Plan \n\n
\n
\n 6 to 30
\n\n
\n \n $15 USD \n monthly \n
\n \n\n or
\n\n \n \n $126 USD \n anually \n
\n \n\n \n 15% savings\n \n \n\n
\n select\n \n \n\n
\n
\n \n
\n Plan 3 description \n \n
Premium Plan \n\n
\n
\n More than
\n\n
\n \n $15 USD \n monthly \n
\n \n\n or
\n\n \n \n $105.60 USD \n anually \n
\n \n\n \n 20% savings\n \n \n\n
\n select\n \n \n
\n {/*
{JSON.stringify(checkoutData,null,2)} */}\n
\n First Name: {checkoutData[0].firstName}
\n Last Name: {checkoutData[0].lastName}
\n Email: {checkoutData[0].email}
\n {/* Plan: {checkoutData[1].title}
*/}\n {checkoutData[1].is_yearly ? (\n \n Thank you! We have confirmed your option of{\" \"}\n {checkoutData[1].title} \n starting at{\" \"}\n \n ${checkoutData[1].pricing_anually_usd * checkoutData[1].starting}\n /year\n \n . Yearly billing suggestion..? \n
\n ) : (\n \n Thank you! We have confirmed your option of{\" \"}\n {checkoutData[1].title} \n starting at{\" \"}\n \n ${checkoutData[1].pricing_monthly_usd * checkoutData[1].starting}\n /month\n \n .\n Don't worry! You won't be charged until the end of the month.\n \n
\n )}\n \n\n
\n
\n \n {steps.map((label) => (\n \n {label} \n \n ))}\n \n\n <>\n {activeStep === steps.length ? (\n \"The Steps completed\"\n ) : (\n <>\n {getStepsContent(activeStep)}\n \n {activeStep === steps.length ? \"Finish\" : \"Next\"}\n \n \n )}\n \n
\n );\n};\n\nexport default Register;\n","import React, { useState, useEffect } from \"react\";\nimport Register from \"./Register\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nimport stripe from \"@stripe/react-stripe-js\";\n\n//const stripePromise = require('stripe')('pk_live_51JRiXRBWsdetEdR0RNskAvglxtlJRDrmQbQ2Rop1X3BaWxFUl5YPbUGs9KB4bW7qdwc6QowV00U2dw4mFJO6N48K00FIUERxqB');\n\nconst RegisterContainer = () => {\n // logic should go here\n\n const [checkoutData, setCheckoutData] = useState([\n {\n firstName: \"\",\n lastName: \"\",\n email: \"\",\n dob: \"\",\n gender: \"\",\n pronouns: \"\",\n },\n {\n pricing_id: null,\n title: \"\",\n desc: \"\",\n price_monthly_usd: 0,\n price_anually_usd: 0,\n starting: 0,\n is_yearly: false,\n },\n ]);\n\n // changes in any array\n useEffect(() => {\n console.log(checkoutData);\n }, [checkoutData]);\n\n // only trigger when card form data changes\n useEffect(() => {\n console.log(checkoutData);\n }, [checkoutData[2]]);\n\n /*stripePromise.customers.create({ checkoutData }, (error, customer) => {\n if (error) {\n console.error(error);\n } else {\n console.log(customer);\n }\n }); */\n\n return (\n \n
\n
\n
\n \n
\n\n
\n
Manage Users \n \n { showSchedule && Session Schedule \n }\n {/* Session Schedule \n */}\n Manage Organizations \n \n { PermissionsService.HasPermission(\"admin.billing.read\") && \n Billing Details \n \n }\n \n Sign Out\n \n \n
\n
\n \n\n
\n \n \n\n \n
\n
\n
\n \n
\n\n
\n Manage Users \n \n \n Session Schedule \n \n \n Manage Organizations \n \n {\n PermissionsService.HasPermission(\"admin.billing.read\") && \n \n Billing Details \n \n }\n \n \n Sign Out\n \n
;\n }\n }\n\n return AsyncComponent;\n}\n","import { createTheme } from \"@material-ui/core/styles\"\n\nconst theme = createTheme({\n palette: {\n secondary: {\n main: \"#57B8F1\",\n },\n white: \"rgba(255, 255, 255, 1)\",\n gray: {\n 100: \"rgba(248, 248, 248, 1)\",\n 200: \"rgba(237, 236, 236, 1)\",\n 300: \"rgba(212, 212, 212, 1)\",\n 400: \"rgba(158, 158, 158, 1)\",\n 500: \"rgba(112, 112, 112, 1)\",\n 600: \"rgba(28, 27, 26, 1)\",\n },\n blue: {\n 100: \"rgba(233, 245, 251, 1)\",\n 200: \"rgba(219, 238, 247, 1)\",\n 300: \"rgba(197, 223, 238, 1)\",\n 400: \"rgba(146, 202, 235, 1)\",\n 500: \"rgba(12, 131, 191, 1)\",\n },\n orange: {\n 100: \"rgba(255, 242, 227, 1)\",\n 200: \"rgba(242, 138, 20, 1)\",\n 300: \"rgba(199, 85, 4, 1)\",\n },\n red: {\n 100: \"rgba(255, 240, 240, 1)\",\n 200: \"rgba(218, 3, 3, 1)\",\n },\n green: {\n 100: \"rgba(238, 249, 213, 1)\",\n 200: \"rgba(9, 118, 38, 1)\",\n },\n },\n typography: {\n fontSize: 14,\n fontFamily: [\n \"Roboto\",\n '\"Helvetica Neue\"',\n \"Arial\",\n \"sans-serif\",\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n ].join(\",\"),\n h1: {\n fontSize: \"2rem\",\n fontWeight: 500,\n },\n h2: {\n fontSize: \"1.5rem\",\n fontWeight: 500,\n }\n },\n})\n\nexport default theme\n","import React, { Component } from \"react\";\nimport { BrowserRouter as Router, Switch, Route } from \"react-router-dom\";\nimport Login from \"./sharedComponents/Login\";\nimport ForgotPassword from \"./sharedComponents/ForgotPassword\";\nimport ResetPassword from \"./sharedComponents/ResetPassword\";\n\nimport Organizations from \"./adminView/Organizations\";\nimport BillingOrganizations from \"./adminView/BillingOrganizations\";\nimport MonthlyView from \"./scheduledSessions/MonthlyView\";\n\nimport Users from \"./organizationView/Users\";\n// import Practitioners from \"./organizationView/Practitioners\";\nimport UserGeneralGraph from \"./dashboards/profile_views/UserProfilePage\";\nimport UserFeedbackGraph from \"./d3Components/UserFeedbackGraph\";\nimport AppBar from \"./sharedComponents/AppBar\";\n\nimport { connect } from \"react-redux\";\nimport { signOut } from \"../actions\";\n\nimport { Debug } from \"../lib\";\n\nimport \"../styles/style.scss\";\nimport UserFile from \"./dashboards/profile_views/UserFile\";\nimport PermissionsPage from \"./adminView/PermissionsPage\";\nimport DeepDataDive from \"./adminView/DeepDataDive\";\nimport ActiveUsersChart from \"./adminView/ActiveUsersChart\";\nimport { MuiThemeProvider, createTheme } from \"@material-ui/core/styles\";\n\nimport PermissionsService from \"../lib/PermissionsSystem\";\n\n\n// Neurofit logo\nimport logo from \"../assets/images/neurofit-logo.svg\";\n\n// will be replaced with a parent component (sub-nav)\nimport BillingInformation from \"./Billing\";\n\n// register component\nimport RegisterContainer from \"./sharedComponents/Register/RegisterContainer\";\n\n// navbar 1.1\nimport NavbarContainer from \"./sharedComponents/Navbar/NavbarContainer\";\nimport NavbarMobileContainer from \"./sharedComponents/Navbar/NavbarMobile\";\n\n// Patient Profile 1.1\n\n// Main scss for App.js\nimport \"./App.scss\";\n\nimport asyncComponent from \"../highOrderComponents/asyncComponent/asyncComponent\";\n\nimport theme from \"./theme\";\n\nconst AsyncPractitionersComponent = asyncComponent(() =>\n import(\"./practitionersManagement/PractitionersManagement\")\n);\nconst AsyncScheduler = asyncComponent(() =>\n import(\"./scheduledSessions/index\")\n);\nconst AsyncPatientDashboard = asyncComponent(() =>\n import(\"./dashboards/PatientDashboard\")\n);\nconst AsyncOrgDashboard = asyncComponent(() =>\n import(\"./dashboards/OrganizationDashboard\")\n);\nconst AsyncPractitionerDashboard = asyncComponent(() =>\n import(\"./dashboards/PractitionerDashboard\")\n);\nconst AsyncError404Page = asyncComponent(() => import(\"./Error/404\"));\n\nconst AsyncBillingInformation = asyncComponent(() => import(\"./Billing\"))\n\nclass App extends Component {\n getPrivilege = async () => {\n parseInt(localStorage.getItem(\"privilege\"), 10);\n };\n\n renderRoutes = () => {\n if (this.props.isAuthenticated && this.props.privilege != undefined) {\n this.getPrivilege();\n if (this.props.privilege === 0) {\n return (\n \n \n {/* \n \n );\n } else if (this.props.privilege === 1) {\n return (\n \n \n {\n PermissionsService.HasPermission(\"admin.billing.read\") && \n } />*/}\n \n \n );\n }\n } else {\n return (\n \n \n \n (\n \n )}\n />\n \n
\n \n );\n }\n };\n\n // hides and displays the appbar\n renderAppBar = () => {\n // if the authentication is false, the AppBar hides\n if (!this.props.isAuthenticated) {\n return (\n \n {/* */}\n {this.renderRoutes()}\n {/*
*/}\n \n );\n }\n // else, the AppBar will display\n else {\n // navbar and dynamic components rendered here\n return (\n \n \n
{this.renderRoutes()}
\n
\n );\n }\n };\n\n render() {\n return {this.renderAppBar()}
;\n }\n}\n\nconst mapStateToProps = (state) => {\n // console.log(state.authReducer);\n return {\n isAuthenticated: state.authReducer.isAuthenticated,\n privilege: state.authReducer.privilege,\n user: state.authReducer.user,\n org: state.authReducer.org,\n };\n};\n\nexport default connect(mapStateToProps, { signOut })(App);\n","export default __webpack_public_path__ + \"static/media/EditPad.67bdd170.svg\";","import React from \"react\"\nimport { Link } from \"react-router-dom\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport TableCell from \"@material-ui/core/TableCell\"\nimport TableRow from \"@material-ui/core/TableRow\"\n// Absolute import paths are not working with this configuration & CRA version\nimport EditPadIcon from \"../../../assets/images/EditPad.svg\"\n\nconst useStyles = makeStyles((theme) => ({\n tableRow: {\n // coupled with _variables.scss gray-200\n borderBottom: theme.palette.gray[200],\n },\n wideCell: {\n minWidth: \"150px\",\n },\n styledCell: {\n borderBottom: 0,\n },\n editLink: {\n width: \"1rem\",\n height: \"1rem\",\n // border: \"1px solid\",\n // borderColor: theme.palette.orange[200],\n borderRadius: \"0.25rem\",\n \"&:hover\": {\n // borderColor: theme.palette.orange[300],\n \"& > svg\": {\n color: theme.palette.orange[300],\n },\n },\n },\n editIcon: {\n color: theme.palette.orange[200],\n // position: \"relative\",\n // top: \"-0.5rem\",\n // right: \"-0.5rem\",\n },\n}))\n\nexport default function OrganizationsListRow(props) {\n function privilegeText(privilege) {\n switch (privilege) {\n case -1:\n return \"Inactive\"\n case 0:\n return \"Active\"\n\n case 1:\n return \"Admin\"\n\n default:\n return \"Error\"\n }\n }\n\n const classes = useStyles()\n\n const owner = props.Owner\n const first_name = owner ? owner.first_name : \"\"\n const last_name = owner ? owner.last_name : \"\"\n const email = owner ? owner.email : \"\"\n return (\n \n \n \n Default \n \n {first_name} {last_name}\n \n {email} \n {props.updated_at.split(\" \")[0]} \n {props.created_at.split(\" \")[0]} \n\n {privilegeText(props.privilege)} \n Billing Status \n \n \n \n \n )\n}\n","import React, { useEffect } from \"react\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport Table from \"@material-ui/core/Table\"\nimport TableBody from \"@material-ui/core/TableBody\"\nimport TableCell from \"@material-ui/core/TableCell\"\nimport TableContainer from \"@material-ui/core/TableContainer\"\nimport TableHead from \"@material-ui/core/TableHead\"\nimport TableRow from \"@material-ui/core/TableRow\"\nimport Paper from \"@material-ui/core/Paper\"\nimport OrganizationsListRow from \"./OrganizationsListRow\"\nimport TableSortLabel from \"@mui/material/TableSortLabel\"\n\nconst useStyles = makeStyles((theme) => ({\n table: {\n minWidth: 800,\n padding: theme.spacing(1),\n },\n paper: {\n // coupled with _variables.scss gray-200\n border: \"1px solid rgba(237, 236, 236, 1)\",\n borderRadius: \"0.75rem\",\n marginBottom: theme.spacing(3),\n boxShadow: \"none\",\n },\n sortTableActive: {\n color: \"rgba(34, 144, 209 , 0.87) !important\",\n },\n wideCell: {\n minWidth: \"150px\",\n },\n dataDeep: {\n minWidth: \"100px\",\n color: \"#2290D1\",\n },\n}))\n\nfunction renderTableRows(props, order, orderBy) {\n function descendingComparator(a, b, orderBy) {\n if (b[\"Owner\"] && a[\"Owner\"] && b[\"Owner\"][orderBy] < a[\"Owner\"][orderBy]) {\n return -1\n }\n if (b[\"Owner\"] && a[\"Owner\"] && b[\"Owner\"][orderBy] > a[\"Owner\"][orderBy]) {\n return 1\n }\n return 0\n }\n\n function descendingComparator_1(a, b, orderBy) {\n if (b && a && b[orderBy] < a[orderBy]) {\n return -1\n }\n if (b && a && b[orderBy] > a[orderBy]) {\n return 1\n }\n return 0\n }\n\n function getComparator(order, orderBy) {\n if (\n orderBy === \"name\" ||\n orderBy === \"created_at\" ||\n orderBy === \"updated_at\"\n ) {\n return order === \"desc\"\n ? (a, b) => descendingComparator_1(a, b, orderBy)\n : (a, b) => -descendingComparator_1(a, b, orderBy)\n }\n return order === \"desc\"\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy)\n }\n\n function stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index])\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0])\n if (order !== 0) {\n return order\n }\n return a[1] - b[1]\n })\n return stabilizedThis.map((el) => el[0])\n }\n\n if (Array.isArray(props.organizations) && props.organizations.length > 0) {\n let data = props.hide_inactive\n ? props.organizations.filter((x) => x.privilege !== -1)\n : props.organizations\n return data.sort(getComparator(order, orderBy)).map((row) => {\n return (\n \n )\n })\n } else if (props.searchString && props.organizations.length === 0) {\n return (\n \n \n Your search {\"{props.searchString}\" } did not return any results.\n \n \n )\n } else if (props.organizations?.privilege === 0) {\n let data = props.organizations\n return (\n \n )\n } else {\n return (\n \n Failed to load organizations \n \n )\n }\n}\n\nexport default function OrganizationsList(props) {\n const classes = useStyles()\n const [order, setOrder] = React.useState(\"\")\n const [orderBy, setOrderBy] = React.useState(\"\")\n const [tableRows, setTableRows] = React.useState(\n renderTableRows(props, order, orderBy)\n )\n useEffect(() => {\n if (order || orderBy || props.hide_inactive !== null) {\n setTableRows(renderTableRows(props, order, orderBy))\n }\n }, [props, order, orderBy, props.hide_inactive])\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === \"asc\"\n setOrder(isAsc ? \"desc\" : \"asc\")\n setOrderBy(property)\n }\n\n const createSortHandler = (property) => (event) => {\n handleRequestSort(event, property)\n }\n\n return (\n \n \n \n \n \n \n ORGANIZATION\n \n \n \n \n TYPE\n \n \n \n \n ADMIN NAME\n \n \n \n \n EMAIL\n \n \n \n \n UPDATED\n \n \n \n \n CREATED\n \n \n \n \n STATUS\n \n \n \n \n BILLING\n \n \n \n \n {tableRows} \n
\n \n )\n}\n","import React from \"react\"\nimport { useForm } from \"react-hook-form\"\n\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport TextField from \"@material-ui/core/TextField\"\nimport Typography from \"@material-ui/core/Typography\"\nimport Button from \"@material-ui/core/Button\"\nimport Modal from \"@material-ui/core/Modal\"\nimport Alert from \"@material-ui/lab/Alert\"\nimport FormLabel from \"@material-ui/core/FormLabel\"\nimport { Grid } from \"@material-ui/core\"\n\nimport * as yup from \"yup\"\nimport { useSelector } from \"react-redux\"\nimport { yupResolver } from \"@hookform/resolvers/yup\"\n\nconst useStyles = makeStyles((theme) => ({\n form: {\n width: \"100%\",\n marginTop: theme.spacing(1),\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\",\n },\n paper: {\n flexDirection: \"column\",\n justifyContent: \"center\",\n maxWidth: \"800px\",\n backgroundColor: \"#fdfdfd\",\n padding: theme.spacing(6),\n border: `3px solid ${theme.palette.primary.main}`,\n margin: \"auto\",\n position: \"fixed\",\n top: theme.spacing(8),\n bottom: theme.spacing(8),\n right: 0,\n left: 0,\n overflowY: \"scroll\",\n },\n addBtn: {\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n fontSize: \"15px\",\n fontWeight: 500,\n backgroundColor: theme.palette.orange[200],\n color: theme.palette.white,\n borderRadius: \"0.5rem\",\n boxShadow: \"none\",\n \"&:hover\": {\n backgroundColor: theme.palette.orange[300],\n boxShadow: \"none\",\n },\n },\n messageContainer: {\n marginTop: theme.spacing(3),\n },\n}))\n\nconst schema = yup.object().shape({\n org_name: yup.string().required(),\n user_email: yup.string().email(),\n user_password: yup\n .string()\n .required()\n .min(8, \"Password should be at least 6 characters!\"),\n passwordConfirmation: yup\n .string()\n .oneOf([yup.ref(\"user_password\")], \"Passwords must match\"),\n email: yup.string().email(),\n first_name: yup.string().required(),\n last_name: yup.string().required(),\n})\n\nexport default function AddOrganizationForm(props) {\n const classes = useStyles()\n\n const { register, handleSubmit, setValue, errors, reset } = useForm({\n resolver: yupResolver(schema),\n })\n\n const open = useSelector((state) => state.modalReducer.modalProps.open)\n const responseMessage = useSelector(\n (state) => state.organizationReducer.response\n )\n\n const handleOpen = () => {\n props.showModal({\n modalProps: {\n open: true,\n },\n modalType: \"addOrganizationModal\",\n })\n }\n\n const handleClose = () => props.hideModal()\n\n const onSubmit = async (data) => {\n const user_data = {\n email: data.user_email.trim(),\n password: data.user_password,\n first_name: data.first_name.trim(),\n last_name: data.last_name.trim(),\n }\n\n const org_data = {\n name: data.org_name,\n }\n\n const response = await props.registerOrganization({\n user: user_data,\n org: org_data,\n })\n\n if (response.status === 200) {\n reset()\n setTimeout(props.hideModal, 2000)\n }\n }\n\n const renderResponseMessage = () => {\n if (responseMessage.status === 200) {\n return (\n \n
\n {responseMessage.message}\n \n
\n
{responseMessage.message} \n
\n \n Create an Organization\n \n \n {renderResponseMessage()}\n {errors.email && renderFormError(errors.email.message)}\n {errors.username && renderFormError(errors.username.message)}\n {errors.password && renderFormError(errors.password.message)}\n {errors.passwordConfirmation &&\n renderFormError(errors.passwordConfirmation.message)}\n
\n )\n\n return (\n \n \n CREATE ORGANIZATION\n \n \n {body}\n \n
\n )\n}\n","import { useState } from \"react\"\nimport TextField from \"@material-ui/core/TextField\"\nimport { withStyles } from \"@material-ui/core/styles\"\nimport SearchIcon from \"@material-ui/icons/Search\"\nimport InputAdornment from \"@material-ui/core/InputAdornment\"\n\nconst styles = (theme) => ({\n root: {\n width: \"100%\",\n \"& svg\": {\n marginTop: \"1rem\",\n color: theme.palette.gray[500],\n zIndex: 100,\n },\n },\n input: {\n \"& input\": {\n zIndex: 200,\n height: \"1rem\",\n padding: 0,\n marginTop: \"1.5rem\",\n },\n\n \"& fieldset\": {\n background: theme.palette.white,\n border: \"1px solid\",\n borderColor: theme.palette.gray[300],\n borderRadius: \"0.5rem\",\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n top: 0,\n },\n },\n})\n\nconst TypeaheadSearch = ({ value, label, handleChange, classes }) => {\n const [shrink, setShrink] = useState(false)\n\n return (\n \n setShrink(true)}\n onBlur={(e) => setShrink(!!e.target.value)}\n onChange={handleChange}\n className={classes.root}\n InputProps={{\n type: \"search\",\n className: classes.input,\n value: value,\n startAdornment: (\n \n \n ),\n }}\n />\n
\n )\n}\n\nexport default withStyles(styles)(TypeaheadSearch)\n","import { makeStyles, withStyles } from \"@material-ui/core/styles\"\nimport InputLabel from \"@material-ui/core/InputLabel\"\nimport MenuItem from \"@material-ui/core/MenuItem\"\nimport FormControl from \"@material-ui/core/FormControl\"\nimport Select from \"@material-ui/core/Select\"\nimport InputBase from \"@material-ui/core/InputBase\"\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n margin: 0,\n width: \"100%\",\n },\n input: {\n height: \"3rem\",\n minWidth: \"12rem\",\n boxSizing: \"border-box\",\n borderRadius: \"0.5rem\",\n backgroundColor: theme.palette.white,\n border: `1px solid ${theme.palette.gray[300]}`,\n padding: \"10px 26px 10px 12px\",\n },\n}))(InputBase)\n\nconst useStyles = makeStyles((theme) => ({\n select: {\n borderRadius: \"0.5rem\",\n backgroundColor: theme.palette.white,\n border: `1px solid ${theme.palette.gray[300]}`,\n padding: \"10px 26px 10px 12px\",\n height: \"2rem\",\n },\n label: {\n zIndex: 200,\n paddingLeft: \"1rem\",\n transform: \"translate(0, 18px) scale(1)\",\n },\n}))\n\nconst SelectField = ({\n label = \"Select\",\n value = \"\",\n handleChange,\n options = [],\n}) => {\n const classes = useStyles()\n\n return (\n \n {label} \n \n None \n \n {options.map((o) => (\n {o.label} \n ))}\n \n \n )\n}\n\nexport default SelectField\n","export default function privilegeText(privilege) {\n switch (privilege) {\n case -1:\n return \"Inactive\"\n case 0:\n return \"Active\"\n\n case 1:\n return \"Admin\"\n\n default:\n return \"Error\"\n }\n}\n","import React, { Component } from \"react\"\n\nimport { withStyles } from \"@material-ui/core/styles\"\nimport { connect } from \"react-redux\"\nimport OrganizationsList from \"./OrganizationsList\"\nimport AddOrganizationForm from \"./AddOrganizationForm\"\nimport LoadingSpinner from \"../../sharedComponents/LoadingSpinner\"\nimport SearchField from \"../sharedComponents/SearchField\"\nimport SelectField from \"../sharedComponents/SelectField\"\nimport privilegeText from \"../sharedComponents/privilegeText\"\n\nimport Grid from \"@material-ui/core/Grid\"\nimport {\n getOrganizations,\n setPrivilege,\n registerOrganization,\n showModal,\n hideModal,\n} from \"../../../actions\"\n\nimport ActiveUsersChart from \"../../adminView/ActiveUsersChart\"\nimport moment from \"moment\"\n\nconst styles = (theme) => ({\n select: {\n width: \"50%\",\n height: \"40px\",\n },\n title: {\n fontSize: \"30px\",\n lineHeight: \"37px\",\n color: \"#333437\",\n fontWeight: \"500\",\n padding: \"6px 0.8em\",\n },\n controlRow: {\n display: \"flex\",\n justifyContent: \"space-between\",\n margin: \"1.5rem 0\",\n },\n controlSearch: {\n minWidth: \"20rem\",\n marginRight: \"0.75rem\",\n flexGrow: 1,\n },\n controlFilter: {\n minWidth: \"8rem\",\n maxWidth: \"12rem\",\n marginRight: \"0.75rem\",\n flexShrink: 0,\n },\n selectedItem: {\n backgroundColor: theme.palette.info.light,\n },\n selectContainer: {\n padding: \"6px 1.5em\",\n width: \"100%\",\n },\n gridContainer: {\n \"& .MuiFab-label\": {\n color: \"#333437\",\n fontWeight: \"700\",\n lineHeight: \"37px\",\n },\n },\n userTypesLabel: {\n display: \"inline-block !important\",\n marginRight: \"10px\",\n },\n})\n\nconst searchStringify = (o) =>\n `${o.name} ${o.Owner.first_name} ${o.Owner.last_name} ${o.Owner.email}`.toLowerCase()\n\nconst filterString = (searchString, organizations) => {\n if (!searchString) {\n return organizations\n }\n return organizations.filter((o) =>\n searchStringify(o).includes(searchString.toLowerCase())\n )\n}\n\nconst filterStatus = (status, organizations) => {\n if (status === \"\") {\n return organizations\n }\n\n return organizations.filter((o) => o.privilege === parseInt(status))\n}\n\nconst filter = (searchString, status, organizations) => {\n return filterStatus(status, filterString(searchString, organizations))\n}\n\nclass Organizations extends Component {\n constructor(props) {\n super(props)\n this.state = {\n hide_inactive: false,\n start_date: moment().subtract(1, \"month\").toISOString(),\n end_date: moment().toISOString(),\n searchString: \"\",\n statusFilter: \"\",\n }\n this.handleInactiveToggleChange = this.handleInactiveToggleChange.bind(this)\n this.handleSearch = this.handleSearch.bind(this)\n this.handleFilterSelect = this.handleFilterSelect.bind(this)\n this.handleFilter = this.handleFilter.bind(this)\n }\n\n componentDidMount() {\n if (!this.props.hasFetched) {\n this.props.getOrganizations()\n }\n }\n\n handleInactiveToggleChange(event) {\n this.setState({ ...this.state, hide_inactive: event.target.checked })\n this.forceUpdate()\n }\n\n handleFilter({ searchString = \"\", statusFilter = \"\" }) {\n this.setState({\n filteredOrganizations: filter(\n searchString,\n statusFilter,\n this.props.organizations\n ),\n searchString: searchString,\n statusFilter: statusFilter,\n })\n }\n\n handleSearch(event) {\n this.handleFilter({ searchString: event.target.value })\n }\n\n handleFilterSelect(event) {\n this.handleFilter({ statusFilter: event.target.value })\n }\n\n render() {\n const { classes, organizations } = this.props\n const { searchString, statusFilter } = this.state\n const filteredOrganizations = filter(\n searchString,\n statusFilter,\n this.props.organizations\n )\n\n return (\n <>\n \n Manage Organizations \n \n
\n
\n
\n ({\n value: i,\n label: privilegeText(i),\n }))}\n value={this.state.statusFilter}\n handleChange={this.handleFilterSelect}\n />\n
\n {organizations?.privilege !== 0 && this.props.hasFetched && (\n
\n )}\n
\n \n {this.props.hasFetched ? (\n
\n ) : (\n
\n )}\n {organizations?.privilege !== 0 && (\n
\n )}\n
\n Days of Week \n {DAYS.map((title, i) => (\n handleDayChange(i)}>\n {title}\n \n ))}\n \n \n Time Window \n handleChange('time_start', e.target.value)}\n label='Start'\n variant='outlined'\n type='time'\n className={classes.textField}\n InputLabelProps={{\n shrink: true,\n }}\n inputProps={{\n step: 1800,\n }}\n />\n handleChange('time_end', e.target.value)}\n label='End'\n variant='outlined'\n type='time'\n className={classes.textField}\n InputLabelProps={{\n shrink: true,\n }}\n inputProps={{\n step: 1800,\n }}\n />\n \n \n Date Range \n handleChange('date_start', e.target.value)}\n label='Start'\n variant='outlined'\n type='date'\n className={classes.textField}\n InputLabelProps={{\n shrink: true,\n }}\n />\n handleChange('date_end', e.target.value)}\n label='End'\n variant='outlined'\n type='date'\n className={classes.textField}\n InputLabelProps={{\n shrink: true,\n }}\n />\n \n \n )\n}\n\nexport default ActivityForm\n","import {\n FormControl,\n FormLabel,\n Select,\n TextField,\n MenuItem,\n} from \"@material-ui/core\"\nimport Autocomplete from \"@material-ui/lab/Autocomplete\"\nimport { makeStyles } from \"@material-ui/core/styles\"\n\nconst useStyles = makeStyles((theme) => ({\n form: {\n marginTop: theme.spacing(1),\n display: \"flex\",\n flexDirection: \"column\",\n },\n formGroup: {\n marginTop: theme.spacing(2),\n },\n textField: {\n padding: theme.spacing(1),\n width: 160,\n },\n fullTextField: {\n padding: theme.spacing(1),\n width: 320,\n },\n paper: {\n borderRadius: \"0.75rem\",\n boxShadow: \"none\",\n padding: \"2rem\",\n },\n divider: {\n paddingTop: \"1rem\",\n paddingBottom: \"1rem\",\n },\n buttonPrimary: {\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n fontSize: \"15px\",\n fontWeight: 500,\n borderRadius: \"0.5rem\",\n boxShadow: \"none\",\n \"&:hover\": {\n boxShadow: \"none\",\n backgroundColor: theme.palette.orange[300],\n },\n backgroundColor: theme.palette.orange[200],\n color: theme.palette.white,\n maxWidth: \"8rem\",\n },\n buttonSecondary: {\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n fontSize: \"15px\",\n fontWeight: 500,\n borderRadius: \"0.5rem\",\n boxShadow: \"none\",\n \"&:hover\": {\n boxShadow: \"none\",\n backgroundColor: theme.palette.gray[100],\n },\n backgroundColor: theme.palette.gray[200],\n color: theme.palette.gray[600],\n },\n messageContainer: {\n marginTop: theme.spacing(3),\n },\n}))\n\nconst LevelForm = ({ index, levels, selectedLevels, setLevels }) => {\n const classes = useStyles()\n\n const handleLevelChange = (event) => {\n const { id } = event.target\n const levelId = parseInt(id.split(\"-\")[4])\n // levels are sequential 1-n, but option IDs overwritten by MUI\n setLevels(index, levelId + 1)\n }\n\n const handleChange = (event, newValue) => {\n const newSelectedLevels = newValue.map(level => level.id);\n setLevels(index, newSelectedLevels);\n };\n\n const levelOptions = levels.map((level) => ({\n ...level,\n levelId: level.id,\n }))\n\n return (\n <>\n \n Activity \n option.name}\n value={levels.filter(level => selectedLevels.includes(level.id))}\n onChange={handleChange}\n className={classes.fullTextField}\n renderInput={(params) => (\n \n \n )\n}\n\nexport default LevelForm\n","import { makeStyles } from \"@material-ui/core/styles\"\n\nconst useStyles = makeStyles((theme) => ({\n dividerWrapper: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n divider: {\n width: \"75%\",\n display: \"block\",\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n border: 0,\n borderBottomWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: theme.palette.gray[300],\n },\n}))\n\nconst Divider = () => {\n const classes = useStyles()\n\n return (\n \n )\n}\n\nexport default Divider","import React from \"react\"\nimport { Grid, Typography } from \"@material-ui/core\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport ArrowBackIosIcon from \"@material-ui/icons/ArrowBackIos\"\nimport NFButton from \"../sharedComponents/NFButton\"\nimport { useHistory } from \"react-router-dom\"\n\nconst useStyles = makeStyles((theme) => ({\n titleRow: {\n marginTop: theme.spacing(3),\n marginBottom: theme.spacing(3),\n },\n}))\n\nconst TitleRow = ({ title, backDestination }) => {\n const classes = useStyles()\n const history = useHistory()\n\n return (\n \n \n \n backDestination ? history.push(backDestination) : history.go(-1)\n }>\n \n \n \n {title}\n \n \n \n )\n}\n\nexport default TitleRow\n","import moment from \"moment\"\nimport React, { useState, useEffect } from \"react\"\nimport { useParams, useHistory } from \"react-router-dom\"\nimport { useDispatch, useSelector } from \"react-redux\"\nimport { useSnackbar } from \"notistack\"\nimport {\n Grid,\n Paper,\n Button,\n FormControl,\n FormLabel,\n TextField,\n Typography,\n} from \"@material-ui/core\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport AddIcon from \"@material-ui/icons/Add\"\n\nimport {\n getLevels,\n getUserThunk,\n createAssignment,\n createAssignmentReset,\n getAssignments,\n} from \"../../../actions/index\"\nimport ActivityForm from \"./ActivityForm\"\nimport LevelForm from \"./LevelForm\"\nimport Divider from \"../sharedComponents/Divider\"\nimport NFButton from \"../sharedComponents/NFButton\"\nimport TitleRow from \"../sharedComponents/TitleRow\"\n\nconst ACTIVITY = {\n days: [],\n levels: [],\n time_start: \"09:00\",\n time_end: \"12:00\",\n date_start: moment().format(\"YYYY-MM-DD\"),\n date_end: moment().add(7, \"days\").format(\"YYYY-MM-DD\"),\n}\n\nconst useStyles = makeStyles((theme) => ({\n topRow: {\n marginTop: theme.spacing(3),\n marginBottom: theme.spacing(2),\n },\n form: {\n marginTop: theme.spacing(1),\n display: \"flex\",\n flexDirection: \"column\",\n },\n divider: {\n width: \"75%\",\n display: \"block\",\n margin: `${theme.spacing(1)} 0`,\n border: 0,\n borderBottomWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: theme.palette.gray[400],\n },\n paper: {\n borderRadius: \"0.75rem\",\n boxShadow: \"none\",\n padding: \"2rem\",\n },\n formGroup: {\n marginTop: theme.spacing(2),\n },\n textField: {\n margin: theme.spacing(1),\n width: 160,\n },\n buttonPrimary: {\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n fontSize: \"15px\",\n fontWeight: 500,\n borderRadius: \"0.5rem\",\n boxShadow: \"none\",\n \"&:hover\": {\n boxShadow: \"none\",\n backgroundColor: theme.palette.orange[300],\n },\n backgroundColor: theme.palette.orange[200],\n color: theme.palette.white,\n maxWidth: \"16rem\",\n marginTop: theme.spacing(1),\n },\n buttonSecondary: {\n height: \"3rem\",\n padding: \"0.5rem 0.75rem\",\n fontSize: \"15px\",\n fontWeight: 500,\n borderRadius: \"0.5rem\",\n boxShadow: \"none\",\n \"&:hover\": {\n boxShadow: \"none\",\n backgroundColor: theme.palette.gray[100],\n },\n backgroundColor: theme.palette.gray[200],\n color: theme.palette.gray[600],\n maxWidth: \"16rem\",\n marginTop: theme.spacing(1),\n },\n messageContainer: {\n marginTop: theme.spacing(3),\n },\n}))\n\nconst AssignmentCreate = () => {\n let { id } = useParams()\n const classes = useStyles()\n const dispatch = useDispatch()\n const history = useHistory()\n const { enqueueSnackbar } = useSnackbar()\n\n const levels = useSelector((state) => state.gameLevelReducer.levels)\n const creating = useSelector((state) => state.assignmentReducer.creating)\n const createSuccess = useSelector(\n (state) => state.assignmentReducer.createSuccess\n )\n const createError = useSelector(\n (state) => state.assignmentReducer.createError\n )\n const user = useSelector((state) => state.userReducer.viewed_user)\n\n const [activities, setActivities] = useState([{ ...ACTIVITY }])\n const [duration, setDuration] = useState(null)\n const [message, setMessage] = useState(\"\")\n let userId = id\n\n useEffect(() => {\n if (createSuccess) {\n setMessage(\"Assignments created successfully!\")\n dispatch(createAssignmentReset())\n enqueueSnackbar(`Assignment created successfully!`, {\n variant: \"success\",\n persist: false,\n })\n setActivities([]) // Clear the form\n history.push(`/user-profile/${id}`)\n } else if (createError) {\n setMessage(`Error creating assignments: ${createError}`)\n }\n }, [createSuccess, createError, dispatch, history, id])\n\n useEffect(() => {\n dispatch(getLevels())\n }, [dispatch])\n\n useEffect(() => {\n if (userId) {\n dispatch(getUserThunk(userId))\n }\n }, [dispatch, userId])\n\n const addActivity = () => {\n setActivities([...activities, { ...ACTIVITY }])\n console.log(activities)\n }\n\n const handleActivityChange = (index, updatedActivity) => {\n const newActivities = [...activities]\n newActivities[index] = updatedActivity\n setActivities(newActivities)\n }\n\n const setLevels = (idx, value) => {\n const newActivities = [...activities]\n newActivities[idx].levels = value\n setActivities(newActivities)\n }\n\n const handleDurationChange = (event) => {\n setDuration(parseInt(event.target.value))\n }\n\n const onSubmit = (e) => {\n e.preventDefault()\n if (activities.length === 0) {\n setMessage(\"Please add at least one assignment.\")\n return\n }\n dispatch(createAssignment(id, activities, duration))\n }\n\n return (\n <>\n \n \n \n \n \n \n (Optional) How much time should be spent on this assignment?\n \n \n addActivity()}>\n \n {creating ? \"Creating...\" : \"Create Assignments\"}\n \n \n \n \n \n \n )\n}\n\nexport default AssignmentCreate\n","import { useEffect } from \"react\"\nimport { useLocation } from \"react-router-dom\"\n\nexport default function ScrollToTop() {\n const { pathname } = useLocation()\n\n useEffect(() => {\n window.scrollTo(0, 0)\n }, [pathname])\n\n return null\n}\n","import React from \"react\"\nimport {\n TextField,\n Select,\n MenuItem,\n Checkbox,\n FormControl,\n InputLabel,\n FormControlLabel,\n Typography,\n makeStyles,\n} from \"@material-ui/core\"\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n textField: {\n backgroundColor: theme.palette.white,\n },\n}))\n\nconst ActivityInput = ({\n parameter,\n value,\n onChange,\n name,\n inputRef,\n error,\n}) => {\n const classes = useStyles()\n\n const renderParameter = (parameter) => {\n switch (parameter.type) {\n case \"integer\":\n return (\n onChange(parseInt(e.target.value, 10))}\n helperText={error ? error.message : parameter.description}\n error={!!error}\n fullWidth\n margin='normal'\n className={classes.textField}\n inputRef={inputRef}\n />\n )\n case \"enum\":\n return (\n \n {parameter.name} \n onChange(e.target.value)}\n inputRef={inputRef}>\n {parameter.values?.map((value) => (\n \n {value}\n \n )) || []}\n \n \n {error ? error.message : parameter.description}\n \n \n )\n case \"boolean\":\n return (\n onChange(e.target.checked)}\n inputRef={inputRef}\n />\n }\n label={\n \n {parameter.name} \n \n {error ? error.message : parameter.description}\n \n
\n }\n />\n )\n default:\n return null\n }\n }\n\n if (!parameter || !parameter.type) {\n return <>\n }\n return {renderParameter(parameter)}
\n}\n\nexport default ActivityInput\n","import React, { useState, useEffect } from \"react\"\nimport moment from \"moment\"\nimport { useSelector, useDispatch } from \"react-redux\"\nimport {\n CircularProgress,\n FormControl,\n FormControlLabel,\n FormLabel,\n Grid,\n Paper,\n Radio,\n RadioGroup,\n Slider,\n Switch,\n Typography,\n} from \"@material-ui/core\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport { useForm, Controller } from \"react-hook-form\"\nimport { useHistory, useParams, useLocation } from \"react-router-dom\"\nimport { useSnackbar } from \"notistack\"\n\nimport ScrollToTop from \"../sharedComponents/ScrollToTop\"\nimport NFButton from \"../sharedComponents/NFButton\"\nimport ActivityInput from \"./ActivityInput\"\nimport {\n getLevel,\n updateActivity,\n updateActivityReset,\n deleteActivity,\n} from \"../../../actions/index\"\nimport TitleRow from \"../sharedComponents/TitleRow\"\n\nconst TOPLEVEL_ACTIVITY_PARAMS = [\n \"completion_condition_mode\",\n \"timer\",\n \"is_adaptive_difficulty\",\n \"difficulty\",\n \"completion_clears\",\n \"completion_duration\",\n]\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n padding: theme.spacing(6),\n borderRadius: \"0.25rem\",\n boxShadow: \"none\",\n border: `1px solid ${theme.palette.blue[200]}`,\n },\n formGroup: {\n marginBottom: theme.spacing(3),\n },\n slider: {\n width: \"100%\",\n },\n buttonPrimary: {\n marginTop: theme.spacing(2),\n },\n}))\n\nconst AssignmentEdit = () => {\n const dispatch = useDispatch()\n const history = useHistory()\n let { id } = useParams()\n const loadedActivity = useLocation().state?.activity\n const { enqueueSnackbar } = useSnackbar()\n\n const { levels, hasFetchedLevels } = useSelector(\n (state) => state.gameLevelReducer\n )\n const { updating, updateSuccess, updateError } = useSelector(\n (state) => state.assignmentReducer\n )\n\n useEffect(() => {\n if (!hasFetchedLevels) {\n dispatch(getLevel(loadedActivity.game_level.id))\n }\n }, [dispatch, hasFetchedLevels, loadedActivity])\n\n // @todo handle direct navigation case with no levels loaded, race condition\n const level = levels.find((l) => l.id === loadedActivity.game_level.id)\n const [activity, setActivity] = useState({ ...loadedActivity })\n // const [isClearsCompletion, setIsClearsCompletion] = useState(\n // loadedActivity.activity_parameters.completion_condition_mode === \"CLEARS\"\n // )\n // const [isAdaptiveDifficulty, setIsAdaptiveDifficulty] = useState(\n // loadedActivity.activity_parameters.is_adaptive_difficulty\n // )\n const classes = useStyles()\n\n const { control, handleSubmit, watch, errors } = useForm({\n defaultValues: {\n ...loadedActivity.activity_parameters,\n ...loadedActivity.gameplay_parameters,\n },\n })\n\n useEffect(() => {\n if (updateSuccess) {\n dispatch(updateActivityReset())\n enqueueSnackbar(\n `${activity.game_level.name} ${moment(activity.start).format(\n \"MMM D\"\n )} updated`,\n {\n variant: \"success\",\n persist: false,\n }\n )\n history.push(`/user-profile/${id}`)\n }\n }, [dispatch, updateSuccess, history, id, enqueueSnackbar, activity.game_level.name, activity.start])\n\n const isClearsCompletion = watch(\"completion_condition_mode\") === \"CLEARS\"\n const isAdaptiveDifficulty = watch(\"is_adaptive_difficulty\")\n\n const onSubmit = (data) => {\n // separate flattened form data back into activity and gameplay params\n const activityParams = Object.entries(data).reduce((acc, [key, value]) => {\n if (Object.keys(level.activity_parameters).includes(key)) {\n acc[key] = value\n }\n return acc\n }, {})\n const gameplayParams = Object.entries(data).reduce((acc, [key, value]) => {\n if (Object.keys(level.gameplay_parameters).includes(key)) {\n acc[key] = value\n }\n return acc\n }, {})\n activityParams.is_edited = true\n dispatch(\n updateActivity(activity.id, {\n activity_parameters: activityParams,\n gameplay_parameters: gameplayParams,\n })\n )\n }\n\n const nonTopLevelActivityParams =\n level.activity_parameters &&\n Object.fromEntries(\n Object.entries(level.activity_parameters).filter(\n ([key]) => !TOPLEVEL_ACTIVITY_PARAMS.includes(key)\n )\n )\n\n const handleGameParamChange = (key, value) => {\n setActivity({\n ...activity,\n gameplay_parameters: { ...activity.gameplay_parameters, [key]: value },\n })\n }\n\n const handleDelete = () => {\n if (window.confirm(\"Are you sure you want to delete this assignment?\")) {\n dispatch(deleteActivity(activity.id))\n history.push(`/user-profile/${id}`)\n }\n }\n\n if (!activity || !level.name) {\n return Loading Activity... \n }\n\n const formattedStartDate = moment(activity.start).isValid()\n ? moment(activity.start).format(\"- MM/D [at] h:mm A\")\n : null;\n\n const pageTitle = `Edit Activity: ${activity.game_level.name} ${formattedStartDate}`;\n\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}\n\nexport default AssignmentEdit\n","import React, { useEffect } from \"react\"\n\nimport { Link } from \"react-router-dom\"\nimport { makeStyles } from \"@material-ui/core/styles\"\n\n//components\nimport { Button, Toolbar, IconButton } from \"@material-ui/core\"\n\nimport List from \"@material-ui/core/List\"\nimport ListItem from \"@material-ui/core/ListItem\"\nimport MenuItem from \"@material-ui/core/MenuItem\"\nimport Menu from \"@material-ui/core/Menu\"\nimport ExpandMore from \"@material-ui/icons/ExpandMore\"\nimport MaterialLink from \"@material-ui/core/Link\"\n\nimport MenuIcon from \"@material-ui/icons/Menu\"\n\nimport { useHistory } from \"react-router-dom\"\nimport { useDispatch, useSelector } from \"react-redux\"\n\nimport { useTranslation } from \"../../../i18n/translate\"\nimport { activeLinkChanged, setLanguage } from \"../../../actions\"\nimport PermissionsService from \"../../../lib/PermissionsSystem.js\"\nimport \"./AppBar.scss\"\n\nconst drawerWidth = 288\n\nconst useStyles = makeStyles((theme) => ({\n title: {\n flexGrow: 1,\n },\n navLink: {\n color: \"#ffffff\",\n textDecoration: \"none\",\n fontSize: \"18px\",\n },\n navLinkIcon: {\n marginRight: 0,\n marginLeft: \"auto\",\n paddingLeft: \"1em\",\n },\n drawerNavLink: {\n color: \"#222\",\n textDecoration: \"none\",\n borderBottom: 1,\n fontSize: \"24px\",\n },\n list: {\n width: 250,\n },\n fullList: {\n width: \"auto\",\n },\n logoutButton: {\n margin: 0,\n width: \"100%\",\n },\n feedbackButton: {\n width: \"100%\",\n height: \"48px\",\n textDecoration: \"none\",\n },\n drawer: {\n [theme.breakpoints.up(\"sm\")]: {\n width: drawerWidth,\n flexShrink: 0,\n },\n },\n appBar: {\n [theme.breakpoints.up(\"sm\")]: {\n paddingLeft: \"17.5%\",\n },\n },\n menuButton: {\n marginRight: 0,\n [theme.breakpoints.up(\"md\")]: {\n display: \"none\",\n },\n },\n // necessary for content to be below app bar\n toolbar: {\n display: \"flex\",\n ...theme.mixins.toolbar,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n },\n brand: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n \"& img\": {\n width: \"40px\",\n },\n },\n active: {\n borderBottom: \"2px solid #333437\",\n },\n}))\n\n// MainLinks -- this renders the logout component\n// checks if the user is authenticated\n\nconst renderMainLinks = (\n props,\n classes,\n anchorEl,\n setAnchorEl,\n history,\n t,\n lng,\n setLng\n) => {\n const open = Boolean(anchorEl)\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget)\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n // if the user is authenticated, logout link renders\n if (props.isAuthenticated) {\n let user = PermissionsService.GetUser()\n const userInitial =\n (user && user.first_name && user.first_name.slice(0, 1).toUpperCase()) ||\n \"U\"\n return (\n \n {userInitial} \n {user ? `${user.first_name}` : \"\"} \n \n
\n )\n }\n}\n\nfunction renderDrawerLinks(props, classes, handleDrawerToggle) {\n return (\n \n
\n \n Manage Users \n \n \n Session Schedule \n \n \n Billing Info \n \n {props.privilege === 1 && (\n \n \n Manage Organizations \n \n \n )}\n {/*
\n
\n \n Give Feedback\n \n \n \n {MainLinks}\n
\n \n \n
{mobileOpen && drawer}
\n
\n \n
\n {isExpanded ? (\n \n
\n {isExpanded &&
{t(\"COLLAPSE\")} }\n
\n \n {/* \n \n )\n } else if (this.props.privilege === 1) {\n return (\n \n \n {PermissionsService.HasPermission(\"admin.billing.read\") && (\n } />*/}\n \n \n )\n }\n } else {\n return (\n \n \n \n (\n \n )}\n />\n \n
\n \n )\n }\n }\n\n // hides and displays the appbar\n renderAppBar = () => {\n // if the authentication is false, the AppBar hides\n if (!this.props.isAuthenticated) {\n return (\n \n {/* */}\n {this.renderRoutes()}\n {/*
*/}\n \n )\n }\n // else, the AppBar will display\n else {\n // navbar and dynamic components rendered here\n return (\n \n \n
\n
\n
\n \n {this.renderRoutes()}
\n \n
{this.renderRoutes()}
\n
\n )\n }\n }\n\n render() {\n return {this.renderAppBar()}
\n }\n}\n\nconst mapStateToProps = ({ authReducer, navReducer }) => {\n // console.log(state.authReducer);\n return {\n isAuthenticated: authReducer.isAuthenticated,\n privilege: authReducer.privilege,\n user: authReducer.user,\n org: authReducer.org,\n isExpanded: navReducer.isExpanded,\n }\n}\n\nexport default connect(mapStateToProps, { signOut })(App)\n","import React from \"react\"\nimport { connect } from \"react-redux\"\n\nimport App from \"./App.js\"\nimport AppV2 from \"./v2/App.js\"\n\nconst AppVersionDispatcher = ({ features }) => {\n if (features && features.find((f) => f.is_active && f.name === \"dashboard_v2\")) {\n return \n \n \n \n ,\n document.getElementById(\"root\")\n)\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport './index.scss'\nconst successPayment = (props) => {\n return (\n \n
\n \n Congratulations!
\n \n
\n \n {props.first_name} {props.last_name}\n \n \n {props.id}\n \n {props.email} \n \n {moment(props.created_at).format(\"MMM D, YYYY\")}\n \n \n {props.last_session \n ? moment(props.last_session).format(\"MMM D, YYYY\")\n : \"Never\"\n }\n \n \n )\n} ","import React, { useEffect } from \"react\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport Table from \"@material-ui/core/Table\"\nimport TableBody from \"@material-ui/core/TableBody\"\nimport TableCell from \"@material-ui/core/TableCell\"\nimport TableContainer from \"@material-ui/core/TableContainer\"\nimport TableHead from \"@material-ui/core/TableHead\"\nimport TableRow from \"@material-ui/core/TableRow\"\nimport Paper from \"@material-ui/core/Paper\"\nimport TableSortLabel from \"@mui/material/TableSortLabel\"\nimport PatientsListRow from \"./PatientsListRow\"\n\nconst useStyles = makeStyles((theme) => ({\n table: {\n minWidth: 800,\n padding: theme.spacing(1),\n },\n paper: {\n border: \"1px solid rgba(237, 236, 236, 1)\",\n borderRadius: \"0.75rem\",\n marginBottom: theme.spacing(3),\n boxShadow: \"none\",\n },\n sortTableActive: {\n color: \"rgba(34, 144, 209 , 0.87) !important\",\n },\n wideCell: {\n minWidth: \"150px\",\n },\n dataDeep: {\n minWidth: \"100px\",\n color: \"#2290D1\",\n },\n}))\n\nfunction renderTableRows(props, order, orderBy) {\n function descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1\n }\n if (b[orderBy] > a[orderBy]) {\n return 1\n }\n return 0\n }\n\n function getComparator(order, orderBy) {\n return order === \"desc\"\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy)\n }\n\n if (Array.isArray(props.patients) && props.patients.length > 0) {\n return props.patients.sort(getComparator(order, orderBy)).map((row) => {\n return (\n \n \n Your search {\"{props.searchString}\" } did not return any results.\n \n \n )\n } else {\n return (\n \n No patients found \n \n )\n }\n}\n\nexport default function PatientsList(props) {\n const classes = useStyles()\n const [order, setOrder] = React.useState(\"\")\n const [orderBy, setOrderBy] = React.useState(\"\")\n const [tableRows, setTableRows] = React.useState(\n renderTableRows(props, order, orderBy)\n )\n\n useEffect(() => {\n setTableRows(renderTableRows(props, order, orderBy))\n }, [props, order, orderBy])\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === \"asc\"\n setOrder(isAsc ? \"desc\" : \"asc\")\n setOrderBy(property)\n }\n\n const createSortHandler = (property) => (event) => {\n handleRequestSort(event, property)\n }\n\n return (\n \n \n \n \n \n \n PATIENT NAME\n \n \n \n USER ID\n \n \n \n EMAIL\n \n \n \n \n JOINED\n \n \n \n \n LAST ACTIVE\n \n \n \n \n {tableRows} \n
\n \n )\n} ","import React, { useState, useEffect } from \"react\";\nimport { useDispatch, useSelector } from 'react-redux'\nimport Footer from \"../dashboards/Footer\";\nimport SuccessPayment from './SuccessPayment'\n\nimport { connect } from \"react-redux\";\n\nimport \"./index.scss\"\nimport { getDetailsForCurrOrg, getActivePatients } from \"../../actions\";\nimport { GetLocalStorageValueSafe } from \"../../lib\";\nimport LoadingSpinner from \"../sharedComponents/LoadingSpinner\";\nimport PatientsList from \"../v2/PatientsList\";\n\nimport moment from \"moment\";\nimport http from \"../../http-common\";\nimport PermissionsService from \"../../lib/PermissionsSystem\";\n\nconst BillingInformation = (props) => {\n const [stripeInfo , setStripeInfo] = useState(\"\")\n const [subscriptionINFO , setSubscriptionINFO] = useState(null)\n const [stripeID , setStripeID] = useState(null)\n const [numberOfPatients , setNumberOfPatients] = useState(0)\n const [subscriptionID , setSubscriptionID] = useState(null)\n const [userID , setUserID] = useState(JSON.parse(GetLocalStorageValueSafe('user_data')).id || \"\")\n const [trial , setTrial] = useState(true)\n const [loadingSpinner , setLoadingSpinner] = useState(true)\n \n // Update to handle three separate patient lists\n const [monthlyPatients, setMonthlyPatients] = useState({\n 1: { month: moment().subtract(1, 'months').format('MMMM'), patients: [] },\n 2: { month: moment().subtract(2, 'months').format('MMMM'), patients: [] },\n 3: { month: moment().subtract(3, 'months').format('MMMM'), patients: [] }\n })\n\n const dispatch = useDispatch()\n const features = useSelector(state => state.authReducer.features)\n\n const shouldShowBilling = !(features && features.find((f) => f.is_active && f.name === \"is_billing_hidden\"))\n\n useEffect(() => {\n dispatch(getActivePatients())\n .then(patientsData => {\n setMonthlyPatients({\n 1: { \n month: moment().subtract(1, 'months').format('MMMM'), \n patients: patientsData[0] || [] \n },\n 2: { \n month: moment().subtract(2, 'months').format('MMMM'), \n patients: patientsData[1] || [] \n },\n 3: { \n month: moment().subtract(3, 'months').format('MMMM'), \n patients: patientsData[2] || [] \n }\n });\n })\n .catch(error => {\n console.log(\"Error fetching patients\")\n })\n }, [dispatch])\n\n //params \n const params = new URLSearchParams(props.location.search).get(\"success\")\n\n useEffect(() => {\n if(stripeID) {\n createPortalSession()\n }\n },[stripeID])\n\n useEffect(() => {\n if(subscriptionID) {\n getSubscriptionsDetails()\n }\n },[stripeID , stripeInfo])\n\n\n useEffect(() => {\n (async () => {\n const {userEntry , noOfPatients } = await props.getDetailsForCurrOrg()\n setStripeID(userEntry.stripe_id)\n setSubscriptionID(userEntry.subscription)\n setLoadingSpinner(false)\n setTrial(userEntry.trial)\n setNumberOfPatients(noOfPatients)\n })();\n },[])\n\n useEffect(() => {\n if(props.user) {\n setUserID(props.user.id)\n }\n },[props.user])\n\n const getSubscriptionsDetails = async () => {\n const payload = {\n url: `/billing/retrieve_an_invoice/${subscriptionID}`,\n method: \"get\",\n }\n const result = await http(payload)\n if (!result) {\n console.log(result.error.message);\n } else {\n setSubscriptionINFO(result?.data || \"\")\n }\n }\n const createPortalSession = async () => {\n const payload = {\n url: `/billing/create-customer-portal-session`,\n method: \"post\",\n data : { stripe_id : stripeID },\n }\n const result = await http(payload)\n if (!result) {\n console.log(result.error.message);\n } else {\n setStripeInfo(result?.data || \"\")\n }\n };\n \n const Billing = () => (\n \n {subscriptionID &&
\n \n
\n Your Subscription\n
\n
\n {subscriptionID && subscriptionINFO && subscriptionINFO?.status !== 'canceled' &&
\n
\n {subscriptionINFO?.product_name} {subscriptionINFO?.items?.data[subscriptionINFO?.items?.data?.length -1 ]?.price?.recurring?.interval === 'month' ? 'Monthly' :'Yearly'}\n
\n
\n last updated on {moment.unix(subscriptionINFO?.current_period_start).local().format(\"DD MMM YYYY\")}\n
\n
}\n {subscriptionID && subscriptionINFO && subscriptionINFO?.status !== 'canceled' &&
\n
\n {numberOfPatients} / {subscriptionINFO?.quantity} {subscriptionINFO?.quantity > 1 ? 'users' : 'user'} \n
\n
\n last updated on {moment.unix(subscriptionINFO?.current_period_start).local().format(\"DD MMM YYYY\")}\n
\n
}\n
\n {subscriptionINFO?.status === 'trialing' && subscriptionINFO?.canceled_at === null &&
\n After your free trial ends on {moment.unix(subscriptionINFO?.current_period_end).local().format(\"DD MMM YYYY\")},
}\n {subscriptionID && subscriptionINFO && subscriptionINFO?.canceled_at !== null &&
\n You've cancelled this plan. It will end automatically on {moment.unix(subscriptionINFO?.current_period_end).local().format(\"DD MMM YYYY\")}.\n
}\n
\n
\n Your next bill\n
\n
\n
\n CA$ { (subscriptionINFO?.plan?.amount / 100) * (subscriptionINFO?.quantity)} \n
\n
\n
\n on {moment.unix(subscriptionINFO?.current_period_end).local().format(\"DD MMM YYYY\")}\n
\n {stripeID && subscriptionID && \n
\n view details\n \n }\n
\n
\n
\n }\n {/*subscriptionID && subscriptionINFO?.status !== 'canceled' &&
*/}\n {!subscriptionID && trial &&
\n }\n {!subscriptionID && !trial &&
\n }\n {stripeID && subscriptionID &&
}\n
\n
\n
Active Patients: {monthlyPatients[1].month} \n
{}}\n />\n \n \n
\n
Active Patients: {monthlyPatients[2].month} \n
{}}\n />\n \n \n
\n
Active Patients: {monthlyPatients[3].month} \n
{}}\n />\n \n
\n
\n {responseMessage.message}\n \n
\n
{responseMessage.message} \n
\n
\n {renderResponseMessage()}\n {errors.email && renderFormError(errors.email.message)}\n {errors.firstName && renderFormError(errors.firstName.message)}\n {errors.lastName && renderFormError(errors.lastName.message)}\n {errors.education && renderFormError(errors.education.message)}\n {errors.diagnosis && renderFormError(errors.diagnosis.message)}\n {errors.practitioner && renderFormError(errors.practitioner.message)}\n {errors.occupation && renderFormError(errors.occupation.message)}\n {errors.gender && renderFormError(errors.gender.message)}\n {errors.user_password && renderFormError(errors.user_password.message)}\n {errors.passwordConfirmation &&\n renderFormError(errors.passwordConfirmation.message)}\n\n
\n \n Cancel\n \n \n Save\n \n
\n
\n
\n {props.notEnoughNF}\n \n\n {\n PermissionsService.HasPermission(\"admin.billing.read\")\n ?\n
\n \n Cancel\n \n \n Upgrade Plan\n \n
\n :\n
\n \n Cancel\n \n
\n }\n \n
\n {`${\n row.user_type === \"PATIENT\"&&\"Patient\"\n }`} \n );\n }else {\n const roles = row?.roles?.map(i=>{\n\n let role = \"\"\n if(i.role_name === UserTypes[1].value2) {\n role += UserTypes[1].label\n }else if(i.role_name === UserTypes[2].value) {\n role += UserTypes[2].label\n }else if(i.role_name === UserTypes[3].value) {\n role += UserTypes[3].label\n }\n return (<>{`${\n role\n }`} {`${row.first_name.trim()} ${row.last_name.trim()}`} \n );\n },\n },\n {\n title: \"Birth Date\",\n field: \"dob\",\n editable: \"never\",\n render: (row) => {\n return (\n {`${\n row.user_type === \"PATIENT\"\n ? moment(row.dob.split(\"T\")[0]).format(\"YYYY-MM-DD\") || \"\"\n : \"-\"\n }`} \n );\n },\n },\n {\n title: \"Gender\",\n field: \"gender\",\n editable: \"never\",\n render: (row) => {\n return {`${row.gender || \"\"}`} ;\n },\n },\n {\n title: \"Email\",\n field: \"email\",\n editable: \"never\",\n },\n {\n title: \"Login Status\",\n field: \"status\",\n editable: \"always\",\n render: (row) => {\n return row.user_type === \"PATIENT\" ? (\n {\n //row.status = row.status !== \"ENABLED\" ? Can login
: Can’t login
;\n row.status =\n row.status !== \"ENABLED\" ? \"ENABLED\" : \"DISABLED\";\n try {\n const response = await dispatch(toggleLogin(row.id, row.status === \"ENABLED\")); \n if(response) { \n row.status =\n row.status !== \"ENABLED\" ? \"ENABLED\" : \"DISABLED\";\n }\n } catch (e) {\n row.status = \"DISABLED\";\n this.props.enqueueSnackbar(e.response?.data?.message || \"You are not allow to modify patient login status\", {variant : 'error'})\n }\n }}\n disabled={\n row.id === PermissionsService.GetUserID() ||\n row.status === \"ARCHIVED\"\n ? true\n : row.user_type === \"PATIENT\" ||\n row.user_type === \"ORG_USER\"\n ? !PermissionsService.HasPermission(\n \"org.admin.patients.manage\"\n )\n : !PermissionsService.HasPermission(\n \"org.admin.users.update\"\n )\n }\n name=\"status\"\n sx={{\n \"& .MuiSwitch-switchBase.Mui-checked\": {\n color: \"#8FCAED\",\n },\n }}\n />\n }\n labelPlacement={\"start\"}\n label={\n row.status === \"ENABLED\" ? (\n Can login
\n ) : (\n Can’t login
\n )\n }\n />\n ) : (\n \n Not applicable{\" \"}\n ? \n
\n );\n },\n },\n ];\n\n const canArchive =\n (this.props.user_types == undefined &&\n (PermissionsService.HasPermission(\"org.admin.patients.archive\") ||\n PermissionsService.HasPermission(\"org.admin.users.archive\"))) ||\n (this.props.user_types !== undefined &&\n ((this.props.user_types.includes(\"PATIENT\") &&\n PermissionsService.HasPermission(\"org.admin.patients.archive\")) ||\n (this.props.user_types.includes(\"USER\") &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) ||\n (this.props.user_types.includes(\"ORG_USER\") &&\n PermissionsService.HasPermission(\"org.admin.users.archive\"))));\n const row = this.state.selectedRowData;\n if (canArchive) {\n tableColumns.push(\n {\n title: \"Actions\",\n field: \"is_archive\",\n editable: \"never\",\n render: (row) => {\n var roles = row.roles.map(function(item) {\n return item['role_name'];\n });\n if (\n (row.id != PermissionsService.GetUserID()) &\n (row.user_type === \"PATIENT\" &&\n PermissionsService.HasPermission(\n \"org.admin.patients.archive\"\n )) ||\n (row.user_type === \"USER\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) ||\n (row.user_type === \"ORG_USER\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) ||\n (row.user_type === \"ORG_ADMIN\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\"))\n ) {\n // If the user not archived, show the archive button\n if (row.status != \"ARCHIVED\") {\n return (\n \n
{\n this.setState({\n selectedRowData: row,\n roles : roles\n });\n this.props.toggleEditUserModal();\n }}\n />\n {\n this.setState({\n selectedRowData: row,\n roles : roles\n });\n this.props.toggleEditUserModal();\n }}\n >\n {\"Edit\"}\n \n {\n this.setState({\n selectedRowData: row,\n });\n this.props.toggleArchiveModal();\n }}\n />\n {\n this.setState({\n selectedRowData: row,\n });\n this.props.toggleArchiveModal();\n }}\n >\n {\"Archive\"}\n \n \n
\n
{\"Edit\"}
\n
{\n this.setState({\n selectedRowData: row,\n });\n this.props.toggleArchiveModal();\n }}\n />\n {\"Unarchive\"}
\n
;\n }\n\n return tableColumns;\n }\n\n onRowClick = (e, props) => {\n console.log(`Setting selected row to ${props.data.id}`);\n };\n\n onRowDoubleClick = (e, props) => {\n const row = props.data;\n this.props.history.push(`/user-profile/${row.id}`);\n };\n\n onRemoveSelectedClick = (e, data) => {\n this.setState({\n selectedRowData: data[0],\n });\n this.props.toggleArchiveModal();\n };\n\n onChangeSelectedRowData = (rows) => {\n\n this.setState({\n selectedRowData: rows[0],\n });\n };\n upgradePlanes = () => {\n this.props.history.push(\"/billing\")\n this.setState({\n NFErrorMsg : null\n })\n this.props.toggleErrorModalNF()\n }\n\n handleReset = () => {\n this.setState({\n NFErrorMsg : null\n })\n this.props.toggleErrorModalNF()\n }\n\n onArchiveUser = async () => {\n const canArchive =\n (this.props.user_types == undefined &&\n (PermissionsService.HasPermission(\"org.admin.patients.archive\") ||\n PermissionsService.HasPermission(\"org.admin.users.archive\"))) ||\n (this.props.user_types !== undefined &&\n ((this.props.user_types.includes(\"PATIENT\") &&\n PermissionsService.HasPermission(\"org.admin.patients.archive\")) ||\n (this.props.user_types.includes(\"USER\") &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) ||\n (this.props.user_types.includes(\"ORG_USER\") &&\n PermissionsService.HasPermission(\"org.admin.users.archive\"))) ||\n (this.props.user_types.includes(\"ORG_ADMIN\") &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")));\n const row = this.state.selectedRowData;\n if (canArchive) {\n if (\n (row.id != PermissionsService.GetUserID()) &\n (row.user_type === \"PATIENT\" &&\n PermissionsService.HasPermission(\"org.admin.patients.archive\")) ||\n (row.user_type === \"USER\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) ||\n (row.user_type === \"ORG_USER\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\")) || \n (row.user_type === \"ORG_ADMIN\" &&\n PermissionsService.HasPermission(\"org.admin.users.archive\"))\n ) {\n this.props.toggleArchiveModal();\n if (row.status != \"ARCHIVED\") {\n try {\n await this.props.dispatch(archiveUser(row.id, true));\n }catch (err) {\n this.props.toggleErrorModalNF()\n this.setState({\n NFErrorMsg : err.response?.data?.message || \"You are not allowed to modify patient login status\"\n }) }\n } else {\n try {\n await this.props.dispatch(archiveUser(row.id, false));\n }catch (err) {\n this.props.toggleErrorModalNF()\n this.setState({\n NFErrorMsg : err.response?.data?.message || \"You are not allowed to modify patient login status\"\n })\n }\n }\n await this.props.dispatch(getUsersByOrg(this.props.user_types))\n } else {\n return
;\n }\n }\n };\n render() {\n const tableColumns = this.getTableSettings();\n const { classes, toggleArchiveModal, toggleEditUserModal, modals , toggleErrorModalNF} =\n this.props;\n const {practitioners} = this.state\n const tableActions = [];\n if (this.state.is_loaded) {\n if (!this.state.is_error) {\n let users = Array.isArray(this.props.users) ? this.props.users : [];\n if (\n this.state.selectOptions.includes(UserStatus[0].value) &&\n this.state.selectOptions.includes(UserStatus[1].value)\n ) {\n users = this.props.users;\n } else {\n if (\n this.state.selectOptions.includes(UserStatus[0].value) &&\n !this.state.selectOptions.includes(UserStatus[1].value)\n ) {\n users = users.filter((x) => x.status !== \"ARCHIVED\");\n }\n if (\n this.state.selectOptions.includes(UserStatus[1].value) &&\n !this.state.selectOptions.includes(UserStatus[0].value)\n ) {\n users = users.filter((x) => x.status === \"ARCHIVED\");\n }\n }\n if (Array.isArray(this.props.user_types)) {\n users = users.filter((x) =>\n this.props.user_types.includes(x.user_type)\n );\n }\n let userPat = [];\n let userPrac = [] \n let userOrg = [];\n let usersDeveloper = [] ;\n let usersAdmin = [];\n let isContainUserTypes = false\n if (this.state.selectOptions.includes(UserTypes[0].value)) {\n isContainUserTypes = true\n userPat = users.filter((x) => x.user_type === UserTypes[0].value);\n }\n if (this.state.selectOptions.includes(UserTypes[1].value)) {\n isContainUserTypes = true\n userPrac = users.filter((x) => { \n var roles = x.roles.map(function(item) {\n return item['role_name'];\n });\n return roles.includes(UserTypes[1].value2)\n });\n }\n if (this.state.selectOptions.includes(UserTypes[2].value)) {\n isContainUserTypes = true\n userOrg = users.filter((x) => { \n var roles = x.roles.map(function(item) {\n return item['role_name'];\n });\n return roles.includes(UserTypes[2].value)\n });\n }\n if (this.state.selectOptions.includes(UserTypes[3].value)) {\n isContainUserTypes = true\n usersAdmin = users.filter((x) => { \n var roles = x.roles.map(function(item) {\n return item['role_name'];\n });\n return roles.includes(UserTypes[3].value)\n });\n }\n const setUsers = [...new Set([...userPat,...userOrg,...userPrac,...usersDeveloper,...usersAdmin])]\n var filtered = [];\n for(var arr in users){\n for(var filter in setUsers){\n if(users[arr].id === setUsers[filter].id){\n filtered.push(users[arr]);\n }\n }\n }\n if(this.state.selectOptions.length !== 0 && isContainUserTypes ) {\n users = filtered\n }\n return (\n \n
\n
\n\n \n \n
\n Are you sure you want to{\" \"}\n {this.state.selectedRowData?.status !== \"ARCHIVED\"\n ? \"archive\"\n : \"unarchive\"}{\" \"}\n {this.state.selectedRowData &&\n this.state.selectedRowData?.first_name +\n \" \" +\n this.state.selectedRowData?.last_name}\n ?\n \n
\n {this.state.selectedRowData?.status !== \"ARCHIVED\" &&\n \"Archiving will remove their access to Neurofit VR and their patients will need to be reactivated\"}\n
\n
\n Cancel\n \n
this.onArchiveUser()}\n variant=\"contained\"\n color=\"primary\"\n >\n {this.state.selectedRowData?.status !== \"ARCHIVED\"\n ? \"Archive\"\n : \"Unarchive\"}\n \n \n \n
\n Edit{\" \"}\n {(this.state.selectedRowData?.user_type === \"PATIENT\" || this.state.roles.length === 0)\n ? \"Patient\"\n :(this.state.roles.includes(UserTypes[1].value2)) ? \"Practitioner\" : \"User\"}{\" \"}\n Profile\n \n \n \n
\n Not enough Neurofit?\n \n \n \n
Failed to load users
\n
\n
\n
\n
\n Download the CSV template below to ensure you’ve got all the\n correct columns!\n \n {isPatient ? (\n
\n First Name \n Last Name \n Date of Birth \n Sex \n Email \n Diagnosis \n \n ) : (\n
\n First Name \n Last Name \n Occupation \n Email \n Sex \n \n )}\n
\n \n Download Sample Template\n \n \n
\n
\n {currentFile && (\n
\n
\n )}\n\n
\n {({ getRootProps, getInputProps }) => (\n \n \n
\n {selectedFiles && selectedFiles[0].name ? (\n
\n {selectedFiles && selectedFiles[0].name}\n
\n ) : (\n <>\n
\n Drag and drop or{\" \"}\n choose a file to\n upload your Users. All .csv, .xlsx, and .xls files\n types are supported\n
\n \n )}\n
\n )}\n \n\n {message && \n {message}\n
}\n\n {fileInfos.length > 0 && (\n \n
List of Files
\n
\n {fileInfos.map((file, index) => (\n \n {file.name} \n \n ))}\n \n
\n
\n
\n
\n
Individual User \n
{\n handleChange(\"individual\");\n }}\n >\n \n \n \n \n \n
\n
\n
\n
Multiple Users \n
{\n handleChange(\"multiple\");\n }}\n >\n \n \n \n \n \n
\n
\n
\n
{\n handleChange(\"PATIENT\");\n }}\n >\n \n \n \n Patient\n \n \n \n \n
\n
\n
\n
{\n handleChange(\"ORG_USER\");\n }}\n >\n \n \n \n Practitioner\n \n \n \n \n
\n
\n {responseMessage.message}\n \n
\n
{responseMessage.message} \n
\n \n A patient cannot access the Neurofit dashboard, but can sign into the\n Neurofit web client via their email when their account is enabled\n \n \n );\n };\n\n const renderPractitionerTooltip = () => {\n return (\n \n \n A practitioner is a user that can create and manage patients within\n your organization. They can sign onto the dashboard using an email and\n password\n \n \n );\n };\n\n const body = (\n // \n\n
\n \n {renderResponseMessage()}\n {errors.email && renderFormError(errors.email.message)}\n {errors.firstName && renderFormError(errors.firstName.message)}\n {errors.lastName && renderFormError(errors.lastName.message)}\n {errors.education && renderFormError(errors.education.message)}\n {errors.diagnosis && renderFormError(errors.diagnosis.message)}\n {errors.gender && renderFormError(errors.gender.message)}\n {errors.practitioner && renderFormError(errors.practitioner.message)}\n {errors.user_password && renderFormError(errors.user_password.message)}\n {errors.passwordConfirmation &&\n renderFormError(errors.passwordConfirmation.message)}\n\n
\n //
{body} ;\n}\n","import React, { useEffect } from \"react\";\nimport * as yup from \"yup\";\nimport { makeStyles, useTheme } from \"@material-ui/core/styles/index\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { useDispatch, useSelector, useStore } from \"react-redux\";\nimport useMediaQuery from \"@material-ui/core/useMediaQuery/index\";\nimport Alert from \"@material-ui/lab/Alert\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport Select from \"@material-ui/core/Select\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport Grid from \"@material-ui/core/Grid\";\nimport TextField from \"@material-ui/core/TextField\";\nimport { createUser, getUsersByOrg } from \"../../actions\";\nimport DateFnsUtils from \"@date-io/date-fns/build/index\";\nimport moment from \"moment/moment\";\nimport Input from \"@material-ui/core/Input\";\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from \"@material-ui/pickers\";\n\nconst useStyles = makeStyles((theme) => ({\n tiltStyle: {\n maxWidth: \"800px\",\n margin: \"2.5rem auto\",\n border: `2.5px solid #16A0D8`,\n borderRadius: \"10px\",\n outline: \"none\",\n height: \"90%\",\n },\n paper: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n maxWidth: \"800px\",\n width: \"auto\",\n height: \"auto\",\n // backgroundColor: '#fafafa',\n // padding: theme.spacing(6),\n padding: \"0\",\n // overflow: 'auto',\n margin: \"auto 0\",\n borderRadius: \"10px\",\n outline: \"none\",\n },\n form: {\n width: \"auto\",\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(0),\n padding: \"2.5rem 3.5rem\",\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(0),\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\",\n \"@media (max-width: 600px)\": {\n padding: \"0\",\n },\n },\n addBtn: {\n marginTop: theme.spacing(1),\n backgroundColor: theme.palette.success.main,\n color: theme.palette.success.contrastText,\n \"&:hover\": {\n backgroundColor: theme.palette.success.light,\n },\n },\n messageContainer: {\n marginTop: theme.spacing(3),\n },\n inlineInput: {\n width: \"100%\",\n },\n radioContainer: {\n marginTop: theme.spacing(1),\n },\n radioGroup: {\n flexDirection: \"row\",\n },\n personIcon: {\n fontSize: \"3.5rem\",\n margin: \"0 auto\",\n backgroundColor: \"#E8F5FB\",\n borderRadius: \"50%\",\n padding: \"5px\",\n border: \"2px solid #16A0D8\",\n },\n heading: {\n textAlign: \"center\",\n padding: \"10px 0\",\n marginTop: \"0\",\n marginBottom: \"0\",\n },\n input_container: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nconst OCCUPATION_TYPES = [\n { label: \"General Practitioner\", value: \"therapist\" },\n { label: \"Occupational Therapist\", value: \"ot\" },\n { label: \"Physical Therapist\", value: \"pt\" },\n { label: \"Speech Language Pathologist\", value: \"slp\" },\n];\n\nconst schema = yup.object().shape({\n email: yup.string().trim().email().required().label(\"Email\"),\n firstName: yup.string().trim().required().label(\"First Name\"),\n lastName: yup.string().trim().required().label(\"Last Name\"),\n occupation: yup.string().trim().required().label(\"Occupation\"),\n gender: yup.string().trim().required().label(\"Gender\"),\n dob: yup.string().required().label(\"Date of Birth\"),\n user_password: yup.string().optional(),\n passwordConfirmation: yup.string().optional(),\n});\n\nexport default function AddPractitionerUsers(props) {\n const classes = useStyles();\n const theme = useTheme();\n const store = useStore();\n const dispatch = useDispatch();\n\n const [dob, handleDobChanged] = React.useState(new Date());\n\n const responseMessage = useSelector((state) => state.userReducer.response);\n\n const { register, handleSubmit, setValue, errors, reset, control, setError } =\n useForm({\n resolver: yupResolver(schema),\n });\n\n const open = useSelector((state) => state.modalReducer.modalProps.open);\n const fullScreen = useMediaQuery(theme.breakpoints.down(\"sm\"));\n\n useEffect(() => {\n const unsubscribe = store.subscribe((action) => {\n handleSubmit(onSubmit)();\n });\n return () => unsubscribe();\n }, []);\n\n const onSubmit = async (data) => {\n // Prepare the data that will be saved for the patient\n const pronounSelect = data.pronouns;\n let pronouns = {};\n // For now we'll just use the radio buttons to select a gender and assign the relevant pronoun options\n switch (pronounSelect) {\n case \"masculine\":\n pronouns.pronoun_subject = \"he\";\n pronouns.pronoun_object = \"him\";\n pronouns.pronoun_possessive = \"his\";\n break;\n case \"feminine\":\n pronouns.pronoun_subject = \"she\";\n pronouns.pronoun_object = \"her\";\n pronouns.pronoun_possessive = \"hers\";\n break;\n case \"neuter\":\n default:\n pronouns.pronoun_subject = \"they\";\n pronouns.pronoun_object = \"them\";\n pronouns.pronoun_possessive = \"theirs\";\n break;\n }\n let req_data = {\n email: data.email,\n first_name: data.firstName,\n last_name: data.lastName,\n occupation: data.occupation,\n gender: data.gender,\n dob: moment().toISOString().split(\"T\")[0],\n role: \"GENERAL_PRACTITIONER\",\n is_patient: false,\n password: data.user_password,\n };\n\n let result = await dispatch(createUser(req_data));\n\n if (result !== undefined && result.status === 200) {\n props.moveToFinalStep();\n await dispatch(getUsersByOrg(props.user_types));\n reset();\n } else {\n if (result.errorType === \"DuplicateEntryError\") {\n setError(\"email\", {\n type: \"manual\",\n message: \"This email already exists\",\n });\n }\n }\n };\n\n const renderResponseMessage = () => {\n if (responseMessage.status === 200) {\n return (\n \n
\n {responseMessage.message}\n \n
\n
{responseMessage.message} \n
\n\n
\n \n {renderResponseMessage()}\n {errors.email && renderFormError(errors.email.message)}\n {errors.firstName && renderFormError(errors.firstName.message)}\n {errors.lastName && renderFormError(errors.lastName.message)}\n {errors.education && renderFormError(errors.education.message)}\n {errors.diagnosis && renderFormError(errors.diagnosis.message)}\n {errors.gender && renderFormError(errors.gender.message)}\n {errors.user_password && renderFormError(errors.user_password.message)}\n {errors.passwordConfirmation &&\n renderFormError(errors.passwordConfirmation.message)}\n
\n //
\n {column.map((element, index) => {\n return index === 0 ? (\n \n {element}\n
\n ) : (\n \n {element}\n
\n );\n })}\n \n );\n return (\n \n {containerContnt}\n \n );\n}\n\nexport default UserColumn;\n","export function formatDate(string) {\n var options = { year: \"numeric\", month: \"numeric\", day: \"numeric\" };\n return new Date(string).toLocaleDateString([], options);\n}\nexport const getColumn = (rows, col) => {\n const column = [];\n for (var i = 0; i < rows.length; i++) {\n if (\n formatDate(rows[i][col]) === \"Invalid Date\" ||\n i === 0 ||\n rows[i][col] === null ||\n typeof rows[i][col] == \"number\"\n ) {\n column.push(rows[i][col] === null ? \"\" : rows[i][col]);\n } else {\n column.push(formatDate(rows[i][col]));\n }\n }\n return column;\n};","import React, { useState } from \"react\";\nimport UserColumn from \"./helpers/UserColumn\";\nimport Stepper from \"@material-ui/core/Stepper\";\nimport Step from \"@material-ui/core/Step\";\nimport \"./ConfirmInputFields.scss\";\nimport {\n MAIN_COLUMN_PATIENT,\n MAIN_COLUMN_PRACTITONER,\n} from \"../../../lib/Constants\";\nimport { getColumn } from \"./Assets/HelperFunctions\";\n\nfunction ConfirmInputFields(props) {\n const userType = props.user_type;\n const [rows, setRows] = useState(props.users);\n const numberOfColumns = rows[0].length;\n const steps = userType === \"PATIENT\" ? 8 : 7;\n const [activeStep, setActiveStep] = useState(0);\n const [currentColumn, setCurrentColumn] = useState(null);\n const [selectedColumns, setSelectedColumns] = useState([]);\n const currentUserColumn =\n userType === \"PATIENT\" ? MAIN_COLUMN_PATIENT : MAIN_COLUMN_PRACTITONER;\n const handleNext = async () => {\n if (activeStep === steps - 1) {\n let copy = [];\n let criteria =\n userType === \"PATIENT\"\n ? [...MAIN_COLUMN_PATIENT]\n : [...MAIN_COLUMN_PRACTITONER];\n for (let i = 0; i < numberOfColumns; i++) {\n if (criteria.includes(rows[0][i])) {\n copy.push(getColumn(rows, i));\n }\n }\n props.setUsers(copy);\n } else {\n rows[0][currentColumn] =\n userType === \"PATIENT\"\n ? MAIN_COLUMN_PATIENT[activeStep - 1]\n : MAIN_COLUMN_PRACTITONER[activeStep - 1];\n setSelectedColumns((preVal) => {\n return [...preVal, currentColumn];\n });\n setCurrentColumn(null);\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n }\n };\n const handleCustomize = () => {\n if (activeStep === 0) {\n const copy = [...rows];\n for (let i = 0; i < numberOfColumns; i++) {\n copy[0][i] = \"\";\n }\n setRows(copy);\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n }\n };\n const handleImport = () => {\n let copy = [];\n let criteria =\n userType === \"PATIENT\"\n ? [...MAIN_COLUMN_PATIENT]\n : [...MAIN_COLUMN_PRACTITONER];\n for (let i = 0; i < numberOfColumns; i++) {\n if (criteria.includes(rows[0][i])) {\n copy.push(getColumn(rows, i));\n }\n }\n props.setUsers(copy);\n };\n const handleBack = () => {\n rows[0][selectedColumns[selectedColumns.length - 1]] = ``;\n const copy = [...selectedColumns];\n copy.pop();\n setSelectedColumns(copy);\n setCurrentColumn(null);\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const getStepTitle = (stepIndex) => {\n switch (stepIndex) {\n case 0:\n return \"Preview Import\";\n case 1:\n return \"Select “First Name” Column\";\n case 2:\n return \"Select “Last Name” Column\";\n case 3:\n return userType === \"PATIENT\"\n ? \"Select “Date of Birth” Column\"\n : \"Select “Occupation” Column\";\n case 4:\n return userType === \"PATIENT\"\n ? \"Select “Sex” Column\"\n : \"Select “Email” Column\";\n case 5:\n return userType === \"PATIENT\"\n ? \"Select “Email” Column\"\n : \"Select “Sex” Column\";\n case 6:\n return userType === \"PATIENT\"\n ? \"Select “Diagnosis” Column\"\n : \"Preview Columns\";\n case 7:\n return \"Preview Columns\";\n default:\n return \"Unknown stepIndex\";\n }\n };\n\n const columnClickedHandler = (index) => {\n if (activeStep !== 0) {\n setCurrentColumn(index);\n }\n };\n\n return (\n \n
\n
{getStepTitle(activeStep)}
\n {activeStep === 0 ? (\n
\n Please confirm columns are labelled as you expect. You can customize\n columns if needed\n
\n ) : (\n (activeStep === 6 && userType !== \"PATIENT\") ||\n (activeStep !== 7 && (\n
\n Please select the column which contains the “\n {currentUserColumn[activeStep - 1]}” data.\n
\n ))\n )}\n
\n
Total Users: {rows.length - 1}
\n
\n \n \n {Array.from({ length: numberOfColumns }, (_, index) => (\n {\n return columnClickedHandler(index);\n }}\n selectedColumn={currentColumn}\n index={index}\n selectedColumns={selectedColumns}\n />\n ))}\n
\n \n \n \n
\n Cancel\n \n
\n {activeStep !== 0 ? (\n \n Back\n \n ) : (\n \n Customize\n \n )}\n {activeStep !== 0 ? (\n \n Next\n \n ) : (\n \n Import\n \n )}\n
\n
\n
\n \n You’re ready to import {props.numberOfUsers} new{\" \"}\n {props.userType !== \"PATIENT\" ? \"Practitioners\" : \"Patients\"}\n
\n \n Clicking the import button will create accounts for each{\" \"}\n {props.userType !== \"PATIENT\" ? \"Practitioners\" : \"Patients\"}\n
\n \n
\n
\n Import in Progress
\n \n
\n \n {props.numberOfUsers} users are being uploaded\n
\n \n
\n {addingType === \"individual\" && (\n
\n \n
\n \n New user has successfully been added!\n
\n \n )}\n {addingType !== \"individual\" && (\n
\n \n
\n \n {numberOfUsers} Users have successfully been imported\n
\n \n )}\n
\n \n {addingType === \"individual\" && \"Add Another User\"}\n {addingType !== \"individual\" && \"Upload Additional Users\"}\n \n \n Continue\n \n
\n
\n {desiredElement.map((el, index) => {\n return el.errors.map((el) => {\n return (\n \n {el}\n \n );\n });\n })}\n \n );\n return errorJSX;\n };\n useEffect(() => {\n let err = [];\n props.error.forEach((element) => {\n err.push(element.path);\n });\n setInvalidColumn(err);\n }, [props.error]);\n useEffect(() => {\n if (props.isClicked) {\n let req_data = {\n FirstName: FirstName.current.value,\n LastName: LastName.current.value,\n Sex: Sex.current.value,\n Email: Email.current.value,\n };\n if (props.userType === \"PATIENT\") {\n req_data = {\n ...req_data,\n DateOfBirth: DateOfBirth.current.value,\n Diagnosis: Diagnosis.current.value,\n };\n } else {\n req_data = {\n ...req_data,\n Occupation: Diagnosis.current.value,\n };\n }\n props.getUser(req_data);\n }\n }, [props.isClicked]);\n let cellContent;\n let mappedColumn = {\n \"First Name\": \"FirstName\",\n \"Last Name\": \"LastName\",\n Sex: \"Sex\",\n Email: \"Email\",\n };\n if (props.userType === \"PATIENT\") {\n mappedColumn = {\n ...mappedColumn,\n \"Date of Birth\": \"DateOfBirth\",\n Diagnosis: \"Diagnosis\",\n };\n cellContent = {\n \"First Name\": (\n \n Male \n Female \n Other \n \n ),\n Email: (\n \n {item} \n })}\n \n ),\n };\n } else {\n mappedColumn = {\n ...mappedColumn,\n Occupation: \"Occupation\",\n };\n cellContent = {\n \"First Name\": (\n \n Male \n Female \n Other \n \n ),\n Email: (\n item.label === props.user.Occupation)?.id || props.user.Occupation).toLowerCase() || \"\"}\n style={\n invalidColumn.includes(\"Occupation\")\n ? errorStyle\n : { border: \"1px solid #eee\"}\n }\n >\n General Practitioner \n Occupational Therapist \n Physical Therapist \n Speech Language Pathologist \n \n ),\n };\n }\n return (\n \n {Array.from(\n { length: props.userType === \"PATIENT\" ? 6 : 5 },\n (_, index) =>\n invalidColumn.includes(mappedColumn[props.currentColumn[index]]) ? (\n
\n \n {cellContent[props.currentColumn[index]]}\n
\n \n ) : (\n \n {cellContent[props.currentColumn[index]]}\n
\n )\n )}\n \n \n
\n {validUsersCount} of {numberOfUsers}{\" \"}\n {numberOfUsers === 1 ? `user` : `users`} were successfully uploaded\n
\n
\n Please review an entry below:
\n \n
\n {Array.from({ length: currentColumn.length }, (_, index) => (\n
{currentColumn[index]}
\n ))}\n
\n
\n {errors.map((element) => {\n return (\n
\n
\n
\n Next\n \n \n );\n}\n\nexport default UploadingResult;\n","import React, { useEffect, useState } from \"react\";\nimport http from \"../../../http-common\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Stepper from \"@material-ui/core/Stepper\";\nimport Step from \"@material-ui/core/Step\";\nimport Button from \"@material-ui/core/Button\";\nimport UploadFile from \"../UploadFile\";\nimport AddTypeStep from \"./AddTypeStep\";\nimport AddUserTypes from \"./AddUserTypes\";\nimport AddUserForm from \"../../organizationView/AddUserForm\";\nimport { useDispatch } from \"react-redux\";\nimport { createUser, submitUserData } from \"../../../actions\";\nimport AddPractitionerUsers from \"../AddPractitionerUsers\";\nimport \"./AddUserStepper.scss\";\nimport ConfirmInputFields from \"./ConfirmInputFields\";\nimport ConfirmImport from \"./ConfirmImport\";\nimport ImportInProgress from \"./ImportInProgress\";\nimport * as yup from \"yup\";\nimport SuccessComponent from \"./SuccessComponent\";\nimport UploadingResult from \"./UploadingResult\";\nimport moment from \"moment/moment\";\nimport {\n MAIN_COLUMN_PATIENT,\n MAIN_COLUMN_PRACTITONER,\n SEX_TYPES,\n DIAGNOSIS,\n OCCUPATION,\n UserTypes,\n MAPPING_OCCUPATION,\n} from \"../../../lib/Constants\";\nimport { formatDate, getColumn } from \"./Assets/HelperFunctions\";\nimport { useSnackbar } from \"notistack\";\nimport NotEnoughNF from \"./NotEnoughNF\";\nimport { useHistory } from \"react-router\";\nconst patientSchema = yup.object().shape({\n FirstName: yup\n .string()\n .trim()\n .required(\"The First Name is required field\")\n .label(\"First Name\"),\n LastName: yup\n .string()\n .trim()\n .required(\"The Last Name is required field\")\n .label(\"Last Name\"),\n DateOfBirth: yup\n .date()\n .typeError(\"The Date of Birth must be valid\")\n .required()\n .test(\"dateOfBirthTest\", function (value) {\n const { createError } = this;\n if (formatDate(value) === \"Invalid Date\") {\n return createError({\n message: \"The Date of Birth must be valid\",\n });\n } else {\n return true;\n }\n })\n .label(\"Date of Birth\"),\n Sex: yup\n .string()\n .trim()\n .required()\n .test(\"sexTest\", function (value) {\n const { createError } = this;\n if (!SEX_TYPES.includes(value.toLowerCase())) {\n return createError({\n message: \"Please, make sure that the Sex is: male, female, or other\",\n });\n } else {\n return true;\n }\n })\n .label(\"Sex\"),\n Email: yup\n .string()\n .trim()\n .email()\n .required()\n .test(\"testForEmailDuplication\", function (value) {\n const { createError } = this;\n return new Promise((resolve) => {\n http\n .request({\n url: `/user/check/${value}/`,\n method: \"get\",\n params: {\n email: value,\n },\n })\n .then((response) => {\n resolve(true);\n })\n .catch((error) => {\n resolve(\n createError({\n message: \"This email is already taken\",\n })\n );\n });\n });\n })\n .label(\"Email\"),\n Diagnosis: yup\n .string()\n .required()\n .trim()\n .test(\"diagnosisTest\", function (value) {\n const { createError } = this;\n if (!DIAGNOSIS.includes(value)) {\n return createError({\n message: \"Please, make sure that the Diagnosis is supported\",\n });\n } else {\n return true;\n }\n })\n .label(\"Diagnosis\"),\n});\nconst practitionerSchema = yup.object().shape({\n FirstName: yup\n .string()\n .trim()\n .required(\"The First Name is required field\")\n .label(\"First Name\"),\n LastName: yup\n .string()\n .trim()\n .required(\"The Last Name is required field\")\n .label(\"Last Name\"),\n Occupation: yup\n .string()\n .required()\n .trim()\n .test(\"occupationTest\", function (value) {\n const { createError } = this;\n console.log(MAPPING_OCCUPATION.find( item => item.id === value))\n if (OCCUPATION.includes(value) || MAPPING_OCCUPATION.find( item => item.id === value) ) {\n return true;\n } else {\n return createError({\n message: \"Please, make sure that the Occupation is supported\",\n });\n }\n })\n .label(\"Occupation\"),\n Email: yup\n .string()\n .trim()\n .email()\n .required()\n .test(\"testForEmailDuplication\", function (value) {\n const { createError } = this;\n return new Promise((resolve) => {\n http\n .request({\n url: `/user/check/${value}/`,\n method: \"get\",\n })\n .then((response) => {\n resolve(true);\n })\n .catch((error) => {\n resolve(\n createError({\n message: \"This email is already taken\",\n })\n );\n });\n });\n })\n .label(\"Email\"),\n Sex: yup\n .string()\n .trim()\n .required()\n .test(\"sexTest\", function (value) {\n const { createError } = this;\n if (!SEX_TYPES.includes(value.toLowerCase())) {\n return createError({\n message: \"Please, make sure that the Sex is: male, female, or other\",\n });\n } else {\n return true;\n }\n })\n .label(\"Sex\"),\n});\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \"100%\",\n },\n backButton: {\n marginRight: theme.spacing(1),\n textTransform: \"capitalize\",\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n WizardTitle: {\n fontSize: \"30px\",\n width: \"auto\",\n lineHeight: \"37px\",\n margin: \"20px auto\",\n fontFamily: \"MontserratBold\",\n color: \"#333437\",\n },\n WizardTitle_2: {\n margin: \"0px auto\",\n fontSize: \"30px\",\n width: \"auto\",\n lineHeight: \"37px\",\n fontFamily: \"MontserratBold\",\n color: \"#333437\",\n },\n stepper: {\n padding: \"24px 113px\",\n display: \"block\",\n },\n buttons: {\n fontFamily: \"MontserratBold\",\n fontSize: \"16.86px\",\n color: \"#333437\",\n },\n buttonCnacel: {\n textTransform: \"capitalize\",\n },\n btnNext: {\n width: \"172px\",\n textTransform: \"capitalize\",\n \"@media (max-width: 600px)\": {\n width: \"100px\",\n padding: \"6px\",\n },\n },\n btnNextText: {\n textTransform: \"capitalize\",\n },\n resetbtn: {\n width: \"191px\",\n borderRaduis: \"5px\",\n textTransform: \"capitalize\",\n },\n divResetbutton: {\n margin: \"0px 5rem 7rem\",\n },\n}));\n\nexport default function AddUsersStepper(props) {\n const getSteps = () => {\n if (user_types === \"PATIENT\") {\n if (addingType === \"individual\") {\n return [\n \"Who are you creating an account for?\",\n \"How many users would you like to add?\",\n \"Create New User Profile\",\n ];\n }\n return [\n \"Select master blaster campaign settings\",\n \"Create an ad group\",\n \"Create an ad\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n ];\n } else {\n if (addingType === \"individual\") {\n return [\n \"Who are you creating an account for?\",\n \"How many users would you like to add?\",\n \"Create New User Profile\",\n ];\n }\n return [\n \"Select master blaster campaign settings\",\n \"Create an ad group\",\n \"Create an ad\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n \"test test\",\n ];\n }\n };\n\n const classes = useStyles();\n const dispatch = useDispatch();\n const [activeStep, setActiveStep] = React.useState(0);\n const [user_types, setUserTypes] = React.useState(\"\");\n const [addingType, setAddingType] = React.useState(\"\");\n const [users, setUsers] = React.useState(null);\n const [errors, setErrors] = React.useState([]);\n const [successImportedUser, setSuccessImportedUser] = useState(0);\n const [practitioner, setPractitioner] = useState([]);\n const [notEnoughNF,setNotEnoughNF] = useState(false)\n\n const { enqueueSnackbar } = useSnackbar();\n const steps = getSteps();\n let history = useHistory();\n\n const addUsers = async function (user) {\n // Prepare the data that will be saved for the patient\n let req_data;\n if (user_types === \"PATIENT\") {\n req_data = {\n email: user.Email,\n first_name: user.FirstName,\n last_name: user.LastName,\n gender: user.Sex,\n dob: formatDate(user.DateOfBirth),\n diagnosis: user.Diagnosis,\n education: user.education,\n is_patient: user_types === \"PATIENT\",\n password: undefined,\n };\n } else {\n req_data = {\n email: user.Email,\n first_name: user.FirstName,\n last_name: user.LastName,\n occupation: MAPPING_OCCUPATION.find(item => item.label === user.Occupation)?.id || user.Occupation,\n gender: user.Sex,\n dob: moment().toISOString().split(\"T\")[0],\n role: \"GENERAL_PRACTITIONER\",\n is_patient: false,\n };\n }\n return dispatch(createUser(req_data))\n .then((res) => {\n if (res && res.status === 200) {\n setSuccessImportedUser((preVal) => {\n return preVal + 1;\n });\n }\n return res;\n })\n .catch((err) => {\n return err;\n });\n };\n const validateUser = function (user) {\n let schema = user_types === \"PATIENT\" ? patientSchema : practitionerSchema;\n return schema\n .validate(user, { abortEarly: false })\n .then((res) => {\n return res;\n })\n .catch((err) => {\n return err;\n });\n };\n const tryUsers = async (users) => {\n const userPromises = [];\n users.forEach((user) => {\n userPromises.push(validateUser(user));\n });\n const _users = await new Promise((resolve) => {\n const validatedUsers = Promise.all(userPromises).then((res) => {\n return res;\n });\n resolve(validatedUsers);\n });\n const __errors = [];\n for (let i = 0; i < _users.length; i++) {\n if (_users[i].name !== \"ValidationError\") {\n await new Promise((resolve) => {\n return addUsers(_users[i]).then((res) => {\n if (res && res.status === 200) {\n enqueueSnackbar(res.message , {variant : 'success'})\n return resolve(true);\n }else {\n setNotEnoughNF(res.message)\n setActiveStep(8)\n }\n });\n });\n } else {\n let tempVar = [];\n _users[i].inner.forEach((inn) => {\n tempVar.push({\n errors: [...inn.errors],\n path: inn.path,\n oldValue: inn.value,\n });\n });\n __errors.push({ error: tempVar, user: _users[i].value });\n }\n }\n setErrors(__errors);\n setActiveStep(6);\n };\n const handleStartImport = () => {\n const numberOfUsers = users[0].length;\n const _columns = getColumn(users, 0);\n const _users = [];\n let forValidation;\n if (user_types === \"PATIENT\") {\n forValidation = [\n \"FirstName\",\n \"LastName\",\n \"DateOfBirth\",\n \"Sex\",\n \"Email\",\n \"Diagnosis\",\n ];\n } else {\n forValidation = [\n \"FirstName\",\n \"LastName\",\n \"Occupation\",\n \"Email\",\n \"Sex\",\n ];\n }\n for (let i = 1; i < numberOfUsers; i++) {\n const tempUser = {};\n for (let j = 0; j < users.length; j++) {\n tempUser[`${forValidation[j]}`] =\n users[\n _columns.indexOf(\n user_types === \"PATIENT\"\n ? MAIN_COLUMN_PATIENT[j]\n : MAIN_COLUMN_PRACTITONER[j]\n )\n ][i];\n }\n _users.push(tempUser);\n }\n tryUsers(_users);\n };\n const handleNext = async (users) => {\n if (activeStep === steps.length - 1) {\n await dispatch(submitUserData());\n } else {\n if (activeStep === 6) {\n if (errors && errors.length) {\n tryUsers(users);\n setActiveStep(5);\n } else {\n setActiveStep(7);\n }\n } else if (activeStep === 4) {\n setActiveStep(5);\n handleStartImport();\n } else {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n }\n }\n };\n\n const handleBack = () => {\n if (activeStep === 4) {\n setUsers(null);\n setActiveStep(2);\n } else {\n if (activeStep === 1) {\n setUserTypes(\"\");\n } else if (activeStep === 2) {\n setAddingType(\"\");\n }\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n }\n };\n\n const handleReset = () => {\n setUserTypes(\"\");\n setAddingType(\"\");\n setUsers(null);\n setErrors([]);\n setActiveStep(0);\n setSuccessImportedUser(0);\n setNotEnoughNF(null)\n };\n\n const upgradePlanes = () => {\n history.push(\"/billing\")\n setNotEnoughNF(null)\n setActiveStep(0)\n }\n\n const handleSetAddingType = (type) => {\n setAddingType(type);\n };\n\n const handleSetUserType = (type) => {\n setUserTypes(type);\n };\n const handleConfirmInputFields = (users) => {\n setUsers(users);\n handleNext();\n };\n\n const showSuccessMessage = () => {\n setActiveStep(7);\n };\n const handleAddOrUpload = () => {\n setUsers(null);\n setActiveStep(2);\n setSuccessImportedUser(0);\n };\n\n useEffect(() => {\n if(props.users) {\n const prac = props.users.filter(user => {\n var roles = user.roles.map(function(item) {\n return item['role_name'];\n });\n return roles.includes(UserTypes[1].value2)\n })\n setPractitioner(prac)\n }\n },[props.users])\n const getStepTitle = (stepIndex) => {\n switch (stepIndex) {\n case 0:\n return \"Who are you creating an account for?\";\n case 1:\n return \"How many users would you like to add?\";\n case 2:\n return user_types === \"PATIENT\"\n ? addingType === \"individual\"\n ? \"Create New Patient Profile\"\n : \"Upload Your File\"\n : addingType === \"individual\"\n ? \"Create New Practitioner Profile\"\n : \"Upload Your File\";\n case 3:\n return \"\";\n case 4:\n return addingType !== \"individual\" ? \"Confirm Import\" : \"\";\n case 5:\n return \"\";\n case 6:\n return \"Uploading Result\";\n case 7:\n return \"\";\n case 8:\n return \"Not enough Neurofit?\";\n default:\n return \"Unknown stepIndex\";\n }\n };\n const setActiveStepNOTNF= (res) => {\n setNotEnoughNF(res?.message)\n setActiveStep(8)\n }\n const getStepContent = (stepIndex) => {\n switch (stepIndex) {\n case 0:\n return \n ) : (\n \n
{getStepTitle(activeStep)} \n
\n {getStepContent(activeStep)} \n \n {activeStep !== 5 && activeStep !== 7 && activeStep !== 8 && (\n \n {activeStep !== 3 && (\n
\n Cancel\n \n )}\n {activeStep !== 3 && activeStep !== 6 && activeStep !== 7 && (\n \n
\n \n Back\n \n \n \n {activeStep === 4\n ? \"Start Import\"\n : activeStep === 2 && addingType === \"individual\"\n ? \"Add User\"\n : \"Next\"}\n \n
\n
\n Manage User Accounts \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n users: state.userReducer.users,\n hasFetched: state.userReducer.hasFetched,\n modal: state.modalReducer,\n toggleArchiveModal: ARCHIVE_MODAL,\n };\n};\n\nconst modalsProps = {\n toggleArchiveModal: ARCHIVE_MODAL,\n};\n\nexport default connect(mapStateToProps, {\n getUsersByOrg,\n updateUser,\n createUser,\n showModal,\n hideModal,\n archiveUser,\n downloadPractitionerPatientCsv,\n})(withStyles(styles)(withModals(Users, modalsProps)));\n","import http from \"../http-common\";\nimport moment from \"moment\";\n\nimport {\n GET_PATIENT_NOTES,\n CREATE_PATIENT_NOTE,\n UPDATE_PATIENT_NOTE,\n DELETE_PATIENT_NOTE,\n} from \"./types\";\n\nfunction tryDispatch(dispatch, args) {\n if (dispatch) {\n dispatch(args);\n }\n}\n\nclass NotesActions {\n static USER_NOTES_ROUTE = \"organization/users/{user_id}/notes\";\n static USER_NOTE_INSTANCE_ROUTE =\n \"organization/users/{user_id}/notes/{note_id}\";\n\n static __ResolvePath(path, user_id, note_id = \"\") {\n return path.replace(\"{user_id}\", user_id).replace(\"{note_id}\", note_id);\n }\n\n static GetNotes(user_id, options) {\n const route = NotesActions.__ResolvePath(\n NotesActions.USER_NOTES_ROUTE,\n user_id\n );\n const start_date = options?.start_date;\n const end_date = options?.end_date;\n\n return async (dispatch) => {\n const response = await http\n .get(route, {\n params: {\n start_date: start_date,\n end_date: end_date,\n },\n })\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n tryDispatch(dispatch, {\n type: GET_PATIENT_NOTES,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n\n /**\n * Creates a new note for the given user\n * @param { } user_id The UUID of the user to create the note for\n * @param { } note_data.note The text of the note in markdown format\n * @param { } note_data.note_date The date of the note, or null for the current date\n * @returns An axios HTTP response\n */\n static CreateNote(user_id, note_data) {\n const note = note_data.note;\n const note_date = moment(note_data.note_date).utc().toISOString(true);\n const route = NotesActions.__ResolvePath(\n NotesActions.USER_NOTES_ROUTE,\n user_id\n );\n\n return async (dispatch) => {\n const response = await http\n .post(route, {\n note,\n note_date,\n })\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n tryDispatch(dispatch, {\n type: CREATE_PATIENT_NOTE,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n\n /**\n * Updates a given note, overriding it's text or date\n * @param { } user_id The UUID of the user that the note is on\n * @param { } note_id The UUID of the note to update\n * @param { } note_data.note The text of the note in markdown format\n * @param { } note_data.note_date The date of the note, or null for the current date\n * @returns An axios HTTP response\n */\n static UpdateNote(user_id, note_id, note_data) {\n const note = note_data.note;\n const note_date = moment(note_data.note_date).utc().toISOString(true);\n const route = NotesActions.__ResolvePath(\n NotesActions.USER_NOTE_INSTANCE_ROUTE,\n user_id,\n note_id\n );\n\n return async (dispatch) => {\n const response = await http\n .put(route, {\n note,\n note_date,\n })\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n tryDispatch(dispatch, {\n type: UPDATE_PATIENT_NOTE,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n\n /**\n * Deletes a note associated with the user\n * @param {string} user_id The UUID of the user that the note is on\n * @param {string} note_id The UUID of the note to update\n * @returns An axios HTTP response\n */\n static DeleteNote(user_id, note_id) {\n const route = NotesActions.__ResolvePath(\n NotesActions.USER_NOTE_INSTANCE_ROUTE,\n user_id,\n note_id\n );\n\n return async (dispatch) => {\n const response = await http\n .delete(route)\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n tryDispatch(dispatch, {\n type: DELETE_PATIENT_NOTE,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n}\n\nexport default NotesActions;\n","import moment from \"moment\"\nimport http from \"../http-common\"\nimport util from \"util\"\nimport { Debug } from \"../lib\"\nimport {\n ACTIVE_PATH_CHANGED,\n ARCHIVE_USER,\n CREATE_USER,\n CREATE_ASSIGNMENT_REQUEST,\n CREATE_ASSIGNMENT_SUCCESS,\n CREATE_ASSIGNMENT_FAILURE,\n CREATE_ASSIGNMENT_RESET,\n UPDATE_ACTIVITY_REQUEST,\n UPDATE_ACTIVITY_SUCCESS,\n UPDATE_ACTIVITY_FAILURE,\n UPDATE_ACTIVITY_RESET,\n DISPLAY_USERNAME,\n GET_ASSIGNED_PATIENTS,\n GET_ASSIGNMENTS,\n GET_DETAILS_CURRENT_AUTH_ORG,\n GET_GRAPH_DATA,\n GET_LONGEST_STREAK,\n GET_ORGANIZATIONS,\n GET_OVER_PROGRESS_OVER_TIME,\n GET_PATIENTS_SESSIONS_ORG,\n GET_RADAR_PLOT_DATA,\n GET_RATINGS_PAITENTS_ORG,\n GET_SELECTED_USER,\n GET_SESSIONS_BY_ORGANIZATION,\n GET_STACKED_BAR_CHART,\n GET_USER_SESSIONS,\n GET_USER_SKILL_LEVELS,\n GET_USER,\n GET_USERS_BY_ORG_ID,\n GET_USERS_BY_ORG,\n GET_USER_REQUEST,\n GET_USER_SUCCESS,\n GET_USER_FAILURE,\n GET_USER_ACTIVITY_STATS_REQUEST,\n GET_USER_ACTIVITY_STATS_SUCCESS,\n GET_USER_ACTIVITY_STATS_FAILURE,\n GET_PATIENT_REPORT_CONFIG_REQUEST,\n GET_PATIENT_REPORT_CONFIG_SUCCESS,\n GET_PATIENT_REPORT_CONFIG_FAILURE,\n CREATE_PATIENT_REPORT_CONFIG_REQUEST,\n CREATE_PATIENT_REPORT_CONFIG_SUCCESS,\n CREATE_PATIENT_REPORT_CONFIG_FAILURE,\n CREATE_PATIENT_REPORT_CONFIG_CLEAR,\n HIDE_MODAL,\n NAV_COLLAPSE,\n NAV_EXPAND,\n REGISTER_ORGANIZATION,\n SHOW_MODAL,\n SIGN_IN,\n SIGN_OUT,\n SUBMIT_USER_DATA,\n TOGGLE_ATTENTION_LINE,\n TOGGLE_DRAWER,\n TOGGLE_LOGIN_FOR_USERS,\n TOGGLE_LOGOUT_MODAL,\n TOGGLE_MEMORY_LINE,\n TOGGLE_PROCESSING_LINE,\n UPDATE_ACCOUNT_PRIVILEGE,\n UPDATE_END_DATE_SELECT,\n UPDATE_SELECTED_ORGANIZATION,\n UPDATE_SELECTED_USER,\n UPDATE_START_DATE_SELECT,\n UPDATE_USER,\n UPDATE_USER_REQUEST,\n UPDATE_USER_SUCCESS,\n UPDATE_USER_FAILURE,\n SET_LANGUAGE,\n UPDATE_WITHIN_DATE_SELECT,\n GET_LEVELS_REQUEST,\n GET_LEVELS_SUCCESS,\n GET_LEVELS_FAILURE,\n GET_LEVEL_REQUEST,\n GET_LEVEL_SUCCESS,\n GET_LEVEL_FAILURE,\n GET_LEVEL_CLEAR,\n DELETE_ACTIVITY,\n GET_ACTIVE_PATIENTS_REQUEST,\n GET_ACTIVE_PATIENTS_SUCCESS,\n GET_ACTIVE_PATIENTS_FAILURE\n} from \"./types\"\nimport PermissionsService from \"../lib/PermissionsSystem\"\n\nconst ACTIVITY_TEST_DATA = JSON.parse(`{\n \"dailyStats\": [\n {\n \"date\": \"2024-11-28\",\n \"completionTime\": 13.676,\n \"activityCount\": 1,\n \"hintsCount\": 0,\n \"activities\": [\n {\n \"type\": \"TrailMaking\",\n \"completionTime\": 13.676,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 13.676,\n \"correct\": 10,\n \"incorrect\": 1,\n \"support_toggle\": 0\n }\n ]\n },\n {\n \"date\": \"2024-12-07\",\n \"completionTime\": 35.7265,\n \"activityCount\": 2,\n \"hintsCount\": 0,\n \"activities\": [\n {\n \"type\": \"TrailMaking\",\n \"completionTime\": 0,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 0,\n \"correct\": 10,\n \"incorrect\": 1,\n \"support_toggle\": 0\n },\n {\n \"type\": \"MailRoom\",\n \"completionTime\": 35.7265,\n \"difficulty\": 5,\n \"completion_time\": 35.7265,\n \"correct\": 1,\n \"incorrect\": 0\n }\n ]\n },\n {\n \"date\": \"2024-12-09\",\n \"completionTime\": 0,\n \"activityCount\": 2,\n \"hintsCount\": 0,\n \"activities\": [\n {\n \"type\": \"TrailMaking\",\n \"completionTime\": 0,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 0,\n \"correct\": 10,\n \"incorrect\": 0,\n \"support_toggle\": 0\n },\n {\n \"type\": \"Western\",\n \"completionTime\": 0,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 0,\n \"correct\": 5,\n \"incorrect\": 0,\n \"missed\": 3,\n \"target_lifetime\": 31.3881,\n \"support_toggle\": 0\n }\n ]\n },\n {\n \"date\": \"2024-12-10\",\n \"completionTime\": 23.493,\n \"activityCount\": 2,\n \"hintsCount\": 0,\n \"activities\": [\n {\n \"type\": \"NaturePath\",\n \"completionTime\": 23.493,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 23.493,\n \"correct\": 7,\n \"incorrect\": 2,\n \"revisits\": 4,\n \"support_toggle\": 0,\n \"hint_toggle\": 0\n },\n {\n \"type\": \"TrailMaking\",\n \"completionTime\": 0,\n \"difficulty\": 5,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 0,\n \"correct\": 10,\n \"incorrect\": 1,\n \"support_toggle\": 0\n }\n ]\n },\n {\n \"date\": \"2025-03-06\",\n \"completionTime\": 0,\n \"activityCount\": 1,\n \"hintsCount\": 0,\n \"activities\": [\n {\n \"type\": \"NaturePath\",\n \"completionTime\": 0,\n \"difficulty\": 0,\n \"supportToggle\": 0,\n \"hintToggle\": 0,\n \"completion_time\": 0,\n \"correct\": 2,\n \"incorrect\": 0,\n \"revisits\": 0,\n \"support_toggle\": 0,\n \"hint_toggle\": 0\n }\n ]\n }\n ],\n \"averageCompletionTimeByActivity\": {\n \"Western\": 147.92350822641512,\n \"MailRoom\": 41.399625,\n \"NaturePath\": 150.38099363309342,\n \"Restaurant\": 13.41531,\n \"TrailMaking\": 139.2391694576271,\n \"SpotTheDifference\": 0\n },\n \"averageDifficultyByActivity\": {\n \"Western\": 4.981102111320759,\n \"MailRoom\": 1.5005275,\n \"NaturePath\": 5.027435278417265,\n \"Restaurant\": 0.6705333333333333,\n \"TrailMaking\": 4.494371314915255,\n \"SpotTheDifference\": 0\n },\n \"averageHintsByActivity\": {\n \"Western\": 1.0150943396226415,\n \"MailRoom\": 0,\n \"NaturePath\": 2.0755395683453237,\n \"Restaurant\": 0,\n \"TrailMaking\": 0.8813559322033898,\n \"SpotTheDifference\": 0\n },\n \"totalAggregateCompletionTime\": 122287.04532999994,\n \"totalAggregateHints\": 1106,\n \"longestConsecutiveDays\": 264,\n \"totalGameSessions\": 1637,\n \"difficultyProgression\": {\n \"slope\": -0.00027456600577940697,\n \"intercept\": 5.0256687783895675,\n \"percentChange\": -100\n }\n}`)\n\n\nfunction tryDispatch(dispatch, args) {\n if (dispatch) {\n dispatch(args)\n }\n}\n\n//----------------------------- AUTH ACTIONS -----------------------------\nexport const signIn =\n ({ email, password }) =>\n async (dispatch) => {\n const response = await http\n .put(\"organization/login\", {\n email: email,\n password: password,\n })\n .then((response) => {\n Debug.log(\"Auth: \" + response.headers.authorization)\n Debug.log(\"Refresh: \" + response.headers.refresh_token)\n Debug.log(\"Permissions: \" + JSON.stringify(response.data.permissions))\n localStorage.setItem(\"auth_token\", response.headers.authorization)\n localStorage.setItem(\"refresh_token\", response.headers.refresh_token)\n localStorage.setItem(\n \"permissions_list\",\n JSON.stringify(response.data.permissions)\n )\n localStorage.setItem(\"privilege\", response.data.organization.privilege)\n localStorage.setItem(\"user_data\", JSON.stringify(response.data.user))\n localStorage.setItem(\n \"org_data\",\n JSON.stringify(response.data.organization)\n )\n localStorage.setItem(\"org_name\", response.data.organization.name)\n localStorage.setItem(\"org_status\", response.data.organization.status)\n localStorage.setItem(\"features\", JSON.stringify(response.data.features))\n PermissionsService.SetPermissions(response.data.permissions)\n PermissionsService.SetUserBlob(response.data.user)\n\n tryDispatch(dispatch, {\n type: SIGN_IN,\n payload: response,\n })\n return response.data\n })\n .catch((error) => {\n Debug.log(util.inspect(error))\n localStorage.clear()\n PermissionsService.Reset()\n if (error.response)\n return {\n status: error.response.status,\n is_error: true,\n message: error.response.data.message,\n }\n else\n return {\n status: 500,\n is_error: true,\n message: error.message || \"An unknown error has occurred\",\n }\n })\n\n return response\n }\n\nexport const signOut = () => {\n Debug.log(\"Logging Out!\")\n localStorage.clear()\n localStorage.removeItem(\"auth_token\")\n localStorage.removeItem(\"refresh_token\")\n localStorage.removeItem(\"permissions_list\")\n localStorage.removeItem(\"privilege\")\n localStorage.removeItem(\"org_name\")\n localStorage.removeItem(\"org_status\")\n localStorage.removeItem(\"features\")\n PermissionsService.Reset()\n\n return {\n type: SIGN_OUT,\n }\n}\n\nexport const reqPasswordReset =\n ({ email }) =>\n async (dispatch) => {\n const response = await http\n .post(\"user/request_reset_password\", {\n email,\n })\n .then((response) => {\n return true\n })\n .catch((error) => {\n return false\n })\n\n return response\n }\n\nexport const resetPassword =\n ({ new_password, token }) =>\n async (dispatch) => {\n const response = await http\n .post(\"user/reset_password\", {\n token,\n new_password,\n })\n .then((response) => {\n return true\n })\n .catch((error) => {\n return false\n })\n\n return response\n }\n\nexport const validateResetToken =\n ({ token }) =>\n async (dispatch) => {\n const response = await http\n .get(\"user/validate_reset_token\", {\n params: {\n token,\n },\n })\n .then((response) => {\n return true\n })\n .catch((error) => {\n return false\n })\n\n return response\n }\n\n//----------------------------- USER ACTIONS -----------------------------\n\nexport const getUsersByOrg = () => async (dispatch) => {\n const response = await http\n .post(\"/organization/users\", {\n include_archived: true,\n })\n .then((response) => {\n let data = response.data\n data.sort((a, b) => {\n if (a.last_name > b.last_name) return 1\n if (b.last_name > a.last_name) return -1\n return 0\n })\n return data\n })\n .catch((err) => {\n throw err\n })\n\n tryDispatch(dispatch, {\n type: GET_USERS_BY_ORG,\n payload: response,\n })\n return response\n}\n\nexport const getDetailsForCurrOrg = () => async (dispatch) => {\n const response = await http\n .get(\"/organization/details\")\n .then((response) => {\n let data = response.data\n return data\n })\n .catch((err) => {\n throw err\n })\n tryDispatch(dispatch, {\n type: GET_DETAILS_CURRENT_AUTH_ORG,\n payload: response,\n })\n return response\n}\n\nexport const getUsersByOrgId = (org_id) => async (dispatch) => {\n const response = await http\n .get(`/organization/${org_id}/practitioners`)\n .then((response) => {\n let data = response.data.selectPrac\n data.sort((a, b) => {\n if (a.last_name > b.last_name) return 1\n if (b.last_name > a.last_name) return -1\n return 0\n })\n return data\n })\n .catch((err) => {\n throw err\n })\n\n tryDispatch(dispatch, {\n type: GET_USERS_BY_ORG_ID,\n payload: response,\n })\n return response\n}\nexport const getUser = (user_id) => async (dispatch) => {\n const response = await http\n .get(`/organization/users/${user_id}`)\n .then((response) => {\n response.data.id = user_id\n return response\n })\n .catch((error) => {\n return error.response\n })\n\n tryDispatch(dispatch, {\n type: GET_USER,\n payload: response.data,\n response: response,\n })\n\n return response\n}\n\n// Action Creators\nconst getUserRequest = () => ({\n type: GET_USER_REQUEST,\n})\n\nconst getUserSuccess = (userData) => ({\n type: GET_USER_SUCCESS,\n payload: userData,\n})\n\nconst getUserFailure = (error) => ({\n type: GET_USER_FAILURE,\n payload: error,\n})\n\nexport const getUserThunk = (userId) => {\n return async (dispatch) => {\n dispatch(getUserRequest())\n\n try {\n const results = []\n const response = await http.get(`/organization/users/${userId}`)\n\n dispatch(getUserSuccess(response.data))\n return results\n } catch (error) {\n dispatch(getUserFailure(error.message))\n throw error\n }\n }\n}\n\nexport const updateSelectedUser = (userEmail) => (dispatch) => {\n tryDispatch(dispatch, {\n type: UPDATE_SELECTED_USER,\n userEmail: userEmail,\n })\n}\n\nexport const createUser = (formData) => async (dispatch) => {\n const response = await http\n .request({\n url: \"/user\",\n method: \"post\",\n data: {\n email: formData.email,\n first_name: formData.first_name,\n last_name: formData.last_name,\n dob: formData.dob,\n gender: formData.gender,\n education: formData.education,\n diagnosis: formData.diagnosis,\n is_patient: formData.is_patient,\n password: formData.password,\n role: formData.role,\n occupation: formData?.occupation,\n practitioner: formData?.practitioner,\n },\n })\n .then((response) => {\n return {\n status: response.status,\n message: response.data.message,\n }\n })\n .catch((error) => {\n return {\n status: 400,\n message: error.response.data.message,\n errorType: error.response.data.error_type,\n }\n })\n\n /*tryDispatch(dispatch, {\n type: CREATE_USER,\n payload: response\n });*/\n\n // dispatch(getUsersByOrg());\n\n return response\n}\n\nexport const updateUser = (id, formData) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/${id}`,\n method: \"put\",\n data: formData,\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n throw error\n })\n //Dispatch get users action to update user and fetch new list of users\n tryDispatch(dispatch, {\n type: UPDATE_USER,\n payload: response,\n })\n tryDispatch(dispatch, getUsersByOrg())\n return response\n}\n\nexport const updateUserRequest = () => ({\n type: UPDATE_USER_REQUEST,\n})\nexport const updateUserSuccess = (responseData) => ({\n type: UPDATE_USER_SUCCESS,\n payload: responseData,\n})\nexport const updateUserFailure = (error) => ({\n type: UPDATE_USER_FAILURE,\n payload: error,\n})\n\nexport const updateUserThunk = (user) => {\n return async (dispatch) => {\n dispatch(updateUserRequest())\n\n try {\n const response = await http.request({\n url: `/organization/users/${user.id}`,\n method: \"put\",\n data: user,\n })\n\n dispatch(updateUserSuccess(response.data))\n return response.data\n } catch (error) {\n dispatch(updateUserFailure(error.message))\n }\n }\n}\n\nexport const setLanguage = (language) => ({\n type: SET_LANGUAGE,\n payload: language,\n})\n\nexport const archiveUser = (user, is_archived) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/${user}/archive`,\n method: \"put\",\n params: {\n is_archived,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n throw error\n })\n\n console.log(response)\n tryDispatch(dispatch, {\n type: ARCHIVE_USER,\n payload: response,\n })\n}\n\nexport const toggleLogin = (userId, can_login) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/${userId}/can_login`,\n method: \"put\",\n data: {\n can_login,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n throw error\n })\n\n tryDispatch(dispatch, getUsersByOrg())\n return response\n}\n\nexport const toggleAllUsers = (can_login) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/can_login`,\n method: \"put\",\n data: {\n can_login,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error\n })\n\n tryDispatch(dispatch, {\n type: TOGGLE_LOGIN_FOR_USERS,\n payload: response,\n })\n\n tryDispatch(dispatch, getUsersByOrg())\n}\n\nexport const getSelectedUser = (user_id) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/${user_id}/`,\n method: \"put\",\n params: {\n user_id: user_id,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error\n })\n\n tryDispatch(dispatch, {\n type: GET_SELECTED_USER,\n payload: response,\n })\n tryDispatch(dispatch, getUsersByOrg())\n}\n\nexport const submitUserData = () => async (dispatch) => {\n tryDispatch(dispatch, {\n type: SUBMIT_USER_DATA,\n })\n}\n\n//----------------------------- MODAL ACTIONS -----------------------------\n\nexport const showModal =\n ({ modalProps, modalType }) =>\n (dispatch) => {\n modalProps.open = true\n\n tryDispatch(dispatch, {\n type: SHOW_MODAL,\n modalProps,\n modalType,\n })\n }\n\nexport const hideModal = () => (dispatch) => {\n tryDispatch(dispatch, {\n type: HIDE_MODAL,\n })\n}\n\n//----------------------------- GENERAL GRAPH ACTIONS (COGNITIVE PROFILE) -----------------------------\n\nexport const toggleMemoryLine = (value) => (dispatch) => {\n dispatch({\n type: TOGGLE_MEMORY_LINE,\n value,\n })\n}\n\nexport const toggleAttentionLine = (value) => (dispatch) => {\n dispatch({\n type: TOGGLE_ATTENTION_LINE,\n value,\n })\n}\n\nexport const toggleProcessingLine = (value) => (dispatch) => {\n dispatch({\n type: TOGGLE_PROCESSING_LINE,\n value,\n })\n}\n\nexport const updateStartDateSelect = (date) => (dispatch) => {\n try {\n // date = date.toISOString()\n date = moment(date).utc()\n } catch {\n date = \"\"\n }\n\n dispatch({\n type: UPDATE_START_DATE_SELECT,\n date: date,\n })\n}\n\nexport const updateEndDateSelect = (date) => (dispatch) => {\n try {\n date = moment(date).utc()\n } catch {\n date = \"\"\n }\n dispatch({\n type: UPDATE_END_DATE_SELECT,\n date: date,\n })\n}\n\nexport const getGraphData = (user, startDate, endDate) => async (dispatch) => {\n const response = await http\n .request({\n url: decodeURIComponent(\n `/organization/users/${user}/sessions/aggregated`\n ),\n params: {\n fromDate: startDate,\n toDate: endDate,\n include_records: true,\n },\n method: \"get\",\n })\n .then((response) => {\n if (response.data.trail_making.session_count <= 0) {\n return undefined\n }\n return response.data\n })\n .catch((error) => {\n return error\n })\n\n dispatch({\n type: GET_GRAPH_DATA,\n payload: response,\n })\n return response\n}\n\n// Action Creators\nconst getUserActivityStatsRequest = (userId) => ({\n type: GET_USER_ACTIVITY_STATS_REQUEST,\n payload: {userId: userId},\n})\n\nconst getUserActivityStatsSuccess = (userId, data) => ({\n type: GET_USER_ACTIVITY_STATS_SUCCESS,\n payload: {data: data, userId: userId},\n})\n\nconst getUserActivityStatsFailure = (userId, error) => ({\n type: GET_USER_ACTIVITY_STATS_FAILURE,\n payload: {error: error, userId: userId},\n})\n\n// Thunk Action\nexport const getUserActivityStats = (userId) => {\n return async (dispatch) => {\n dispatch(getUserActivityStatsRequest(userId))\n\n try {\n const response = await http.get(`/user/${userId}/activity_stats`)\n dispatch(getUserActivityStatsSuccess(userId, ACTIVITY_TEST_DATA))\n return response.data\n } catch (error) {\n dispatch(getUserActivityStatsFailure(userId, error.message))\n throw error\n }\n }\n}\n\n// Action Creators\nconst getPatientReportConfigRequest = () => ({\n type: GET_PATIENT_REPORT_CONFIG_REQUEST,\n})\n\nconst getPatientReportConfigSuccess = (data) => ({\n type: GET_PATIENT_REPORT_CONFIG_SUCCESS,\n payload: data,\n})\n\nconst getPatientReportConfigFailure = (error) => ({\n type: GET_PATIENT_REPORT_CONFIG_FAILURE,\n payload: error,\n})\n\n// Thunk Action\nexport const getPatientReportConfig = (patientId) => {\n return async (dispatch) => {\n dispatch(getPatientReportConfigRequest())\n\n try {\n const response = await http.request({\n url: `/user/${patientId}/report_config`,\n method: \"get\",\n })\n dispatch(getPatientReportConfigSuccess(response.data.configuration))\n return response.data.configuration\n } catch (error) {\n dispatch(getPatientReportConfigFailure(error.message))\n throw error\n }\n }\n}\n\n// Action Creators\nconst createPatientReportConfigRequest = () => ({\n type: CREATE_PATIENT_REPORT_CONFIG_REQUEST,\n})\n\nconst createPatientReportConfigSuccess = (data) => ({\n type: CREATE_PATIENT_REPORT_CONFIG_SUCCESS,\n payload: data,\n})\n\nconst createPatientReportConfigFailure = (error) => ({\n type: CREATE_PATIENT_REPORT_CONFIG_FAILURE,\n payload: error,\n})\n\n// Thunk Action\nexport const createPatientReportConfig = (patientId, reportConfig) => {\n return async (dispatch) => {\n dispatch(createPatientReportConfigRequest())\n\n try {\n const response = await http.request({\n url: `/user/${patientId}/report_config`,\n method: \"post\",\n data: reportConfig,\n })\n dispatch(createPatientReportConfigSuccess(response.data.configuration))\n return response.data.configuration\n } catch (error) {\n dispatch(createPatientReportConfigFailure(error.message))\n throw error\n }\n }\n}\n\nexport const createPatientReportConfigClear = () => (dispatch) => {\n dispatch({\n type: CREATE_PATIENT_REPORT_CONFIG_CLEAR,\n })\n}\n\n\n\n//----------------------------- USER RADAR PLOT ACTIONS (FEEDBACK / RATINGS) -----------------------------\n\nexport const getRadarPlotData =\n (user, start_date, end_date = new Date()) =>\n async (dispatch) => {\n const response = await http\n .request({\n method: \"get\",\n url: `/organization/users/${user}/ratings/averages?from=${start_date}&to=${end_date}`,\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n\n Debug.log(\"Radar data: \" + util.inspect(response))\n dispatch({\n type: GET_RADAR_PLOT_DATA,\n payload: response,\n })\n return response\n }\n\nexport const updateWithinDateRange = (date) => (dispatch) => {\n dispatch({\n type: UPDATE_WITHIN_DATE_SELECT,\n date: date,\n })\n}\n\n//----------------------------- APPBAR ACTIONS -----------------------------\n\nexport const toggleLogoutModal = (value) => (dispatch) => {\n dispatch({\n type: TOGGLE_LOGOUT_MODAL,\n value,\n })\n}\n\nexport const toggleDrawer = (value) => (dispatch) => {\n dispatch({\n type: TOGGLE_DRAWER,\n value,\n })\n}\n\nexport const activeLinkChanged = (value) => (dispatch) => {\n dispatch({\n type: ACTIVE_PATH_CHANGED,\n value,\n })\n}\n\n//----------------------------- ORGANIZATIONS ACTIONS -----------------------------\nexport const getOrganizations = () => async (dispatch) => {\n const response = await http\n .request({\n url: \"/organizations\",\n method: \"get\",\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error.response\n })\n\n dispatch({\n type: GET_ORGANIZATIONS,\n payload: response,\n })\n}\n\nexport const setPrivilege = (orgId, newPrivilege) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organizations/${orgId}/privilege/${newPrivilege}`,\n method: \"put\",\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error.response\n })\n\n dispatch({\n type: UPDATE_ACCOUNT_PRIVILEGE,\n payload: response,\n })\n\n dispatch(getOrganizations())\n}\n\nexport const downloadPractitionerPatientCsv = () => async () => {\n try {\n const response = await http.request({\n url: '/organization/report/practitioner-patient-csv',\n method: 'get',\n responseType: 'blob',\n })\n \n // Create a filename with the current date\n const filename = `neurofit_usage_report_${moment().format('YYYY-MM-DD')}.csv`\n \n // Create a blob from the response data\n const blob = new Blob([response.data], { type: 'text/csv' })\n \n // Create a download link and trigger the download\n const url = window.URL.createObjectURL(blob)\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 // Clean up\n window.URL.revokeObjectURL(url)\n document.body.removeChild(link)\n \n return { success: true }\n } catch (error) {\n console.error('Error downloading CSV:', error)\n return { success: false, error }\n }\n}\n\n\n\nexport const registerOrganization = (formData) => async (dispatch) => {\n // For now we'll hard code the roles :(\n formData.role = \"ORG_ADMIN\"\n\n const response = await http\n .post(\"/organizations/create\", formData)\n .then((res) => {\n return {\n status: res.status,\n message: res.data.message,\n }\n })\n .catch((err) => {\n return {\n status: 400,\n message: err.response.data.message || \"An error has occurred\",\n }\n })\n\n dispatch({\n type: REGISTER_ORGANIZATION,\n response: response,\n })\n\n dispatch(getOrganizations())\n return response\n}\n\nexport const getSessionsByOrganization =\n (orgId, startDate, endDate) => async (dispatch) => {\n const response = await http\n .request({\n url: `/organizations/${orgId}/time_tracking/total`,\n method: \"get\",\n params: {\n from: startDate,\n to: endDate,\n include_records: true,\n },\n })\n .then((response) => {\n dispatch({\n type: GET_SESSIONS_BY_ORGANIZATION,\n payload: response.data,\n })\n\n return response.data\n })\n .then((error) => {\n return error.response\n })\n }\n\nexport const ratingValueForOrganization =\n (org_id, start_date, end_date = new Date()) =>\n async (dispatch) => {\n const response = await http\n .request({\n method: \"get\",\n url: `/organization/${org_id}/ratings/averages?from=${start_date}&to=${end_date}`,\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n dispatch({\n type: GET_RATINGS_PAITENTS_ORG,\n payload: response,\n })\n return response\n }\n\nexport const progressOverTimeDataBasedOnFilter =\n (values) => async (dispatch) => {\n let filter = {\n exercise: null,\n }\n const {\n org_id,\n start_date,\n end_date,\n exercise,\n practitioners,\n sex,\n age,\n attendance,\n } = values\n\n if (exercise && Array.isArray(exercise) && exercise.length > 0) {\n filter.exercise = exercise.map((item) => {\n return \"&exercise=\" + item\n })\n filter.exercise = filter.exercise.join(\"\")\n }\n\n if (\n practitioners &&\n Array.isArray(practitioners) &&\n practitioners.length > 0\n ) {\n filter.practitioners = practitioners\n }\n if (sex && Array.isArray(sex) && sex.length > 0) {\n filter.sex = sex\n }\n if (age || (Array.isArray(age) && age.length > 0)) {\n filter.age = age\n }\n if (attendance || (Array.isArray(attendance) && attendance.length > 0)) {\n filter.attendance = attendance\n }\n const response = await http\n .request({\n method: \"get\",\n url: `/graphing/progress_over_time?org_id=${org_id}&start_date=${start_date}&end_date=${end_date}${\n filter?.exercise ? filter?.exercise : \"\"\n }`,\n params: {\n practitioners: filter.practitioners,\n sex: filter.sex,\n age: filter.age,\n attendance: filter.attendance,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n dispatch({\n type: GET_OVER_PROGRESS_OVER_TIME,\n payload: response,\n })\n return response\n }\nexport const StackedBarChart = (values) => async (dispatch) => {\n const { org_id, start_date, end_date } = values\n const response = await http\n .request({\n method: \"get\",\n url: `/graphing/stacked_chart?org_id=${org_id}&start_date=${start_date}&end_date=${end_date}`,\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n dispatch({\n type: GET_STACKED_BAR_CHART,\n payload: response,\n })\n return response\n}\nexport const getSessionsForOrg =\n (org_id, startDate, endDate) => async (dispatch) => {\n const response = await http\n .request({\n url: decodeURIComponent(`/organization/${org_id}/sessions`),\n params: {\n form: startDate,\n to: endDate,\n },\n method: \"get\",\n })\n .then((response) => {\n if (!response.data) {\n return undefined\n }\n return response.data\n })\n .catch((error) => {\n return error\n })\n\n dispatch({\n type: GET_PATIENTS_SESSIONS_ORG,\n payload: response,\n })\n return response\n }\n\nexport const updateSelectedOrganization = (id) => (dispatch) => {\n dispatch({\n type: UPDATE_SELECTED_ORGANIZATION,\n id,\n })\n}\n\n/* ------------------- User Session: Correct vs Incorrect ------------------- */\n\nexport const getUserSession = (user_id) => async (dispatch) => {\n const response = await http\n .request({\n url: decodeURIComponent(`/organization/users/${user_id}/sessions`),\n method: \"get\",\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error\n })\n\n dispatch({\n type: GET_USER_SESSIONS,\n payload: response,\n })\n\n return response\n}\n\n/* --------------------------- Data for line graph -------------------------- */\n\nexport const getUserSessionData =\n (user_id, startDate, endDate, include_records = false) =>\n async (dispatch) => {\n const response = await http\n .request({\n url: `/organization/users/${user_id}/sessions/aggregated`,\n method: \"get\",\n params: {\n fromDate: startDate,\n toDate: endDate,\n include_records,\n },\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n\n dispatch({\n type: GET_USER_SKILL_LEVELS,\n payload: response,\n })\n\n return response\n }\n\nexport const getLongestStreak =\n (user, start_date, end_date = new Date()) =>\n async (dispatch) => {\n const response = await http\n .request({\n method: \"get\",\n url: `/user/${user}/longest_streak?from=${start_date}&to=${end_date}`,\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n dispatch({\n type: GET_LONGEST_STREAK,\n payload: response,\n })\n return response\n }\n\n/* --------------------------- practitioner -------------------------- */\nexport const getAssignedPatients = (user_id) => async (dispatch) => {\n const response = await http\n .request({\n method: \"get\",\n url: `/user/${user_id}/assign_patients`,\n })\n .then((response) => {\n return response.data\n })\n .catch((err) => {\n return err.response\n })\n dispatch({\n type: GET_ASSIGNED_PATIENTS,\n payload: response,\n })\n return response\n}\n\n//----------------------------- GAME LEVEL ACTIONS ----------------------------\nconst getLevelRequest = () => ({\n type: GET_LEVEL_REQUEST,\n})\n\nconst getLevelSuccess = (levelData) => ({\n type: GET_LEVEL_SUCCESS,\n payload: levelData,\n})\n\nconst getLevelFailure = (error) => ({\n type: GET_LEVEL_FAILURE,\n payload: error,\n})\n\nexport const getLevelClear = () => ({\n type: GET_LEVEL_CLEAR,\n})\n\nexport const getLevel = (id) => {\n return async (dispatch) => {\n dispatch(getLevelRequest())\n\n try {\n const response = await http.request({\n url: `/levels/${id}`,\n method: \"get\",\n })\n dispatch(getLevelSuccess(response.data))\n\n return response.data\n } catch (error) {\n dispatch(getLevelFailure(error.message))\n throw error\n }\n }\n}\n\nconst getLevelsRequest = () => ({\n type: GET_LEVELS_REQUEST,\n})\n\nconst getLevelsSuccess = (levelsData) => ({\n type: GET_LEVELS_SUCCESS,\n payload: levelsData,\n})\n\nconst getLevelsFailure = (error) => ({\n type: GET_LEVELS_FAILURE,\n payload: error,\n})\n\nexport const getLevels = () => {\n return async (dispatch) => {\n dispatch(getLevelsRequest())\n\n try {\n const response = await http.request({\n url: \"/levels/\",\n method: \"get\",\n })\n dispatch(getLevelsSuccess(response.data))\n\n return response.data\n } catch (error) {\n dispatch(getLevelsFailure(error.message))\n throw error\n }\n }\n}\n\n//---------------------------- ASSIGNMENTS ACTIONS ----------------------------\nexport const getAssignments = (userId) => async (dispatch) => {\n const result = await http\n .request({\n url: `assignments/${userId}?all_time=true`,\n method: \"get\",\n })\n .then((response) => {\n return response.data\n })\n .catch((error) => {\n return error.response\n })\n\n dispatch({\n type: GET_ASSIGNMENTS,\n payload: result,\n })\n}\n\n// Action Creators\nconst createAssignmentRequest = () => ({\n type: CREATE_ASSIGNMENT_REQUEST,\n})\n\nconst createAssignmentSuccess = (assignmentData) => ({\n type: CREATE_ASSIGNMENT_SUCCESS,\n payload: assignmentData,\n})\n\nconst createAssignmentFailure = (error) => ({\n type: CREATE_ASSIGNMENT_FAILURE,\n payload: error,\n})\n\nexport const createAssignmentReset = () => ({\n type: CREATE_ASSIGNMENT_RESET,\n})\n\nexport const createAssignment = (userId, activities, duration = null) => {\n return async (dispatch) => {\n dispatch(createAssignmentRequest())\n\n try {\n const response = await http.request({\n url: `/assignments/${userId}`,\n method: \"post\",\n data: { activities, duration },\n })\n\n dispatch(\n createAssignmentSuccess({ data: response.data, assignment: activities })\n )\n dispatch(getAssignments(userId))\n return response.data\n } catch (error) {\n dispatch(createAssignmentFailure(error.message))\n throw error\n }\n }\n}\n\nexport const updateActivityRequest = () => ({\n type: UPDATE_ACTIVITY_REQUEST,\n})\n\nexport const updateActivitySuccess = (updatedActivity) => ({\n type: UPDATE_ACTIVITY_SUCCESS,\n payload: updatedActivity,\n})\n\nexport const updateActivityFailure = (error) => ({\n type: UPDATE_ACTIVITY_FAILURE,\n payload: error,\n})\n\nexport const updateActivityReset = () => ({\n type: UPDATE_ACTIVITY_RESET,\n})\n\nexport const updateActivity = (activityId, updatedData) => {\n return async (dispatch) => {\n dispatch(updateActivityRequest())\n\n try {\n const response = await http.request({\n url: `/assignments/${activityId}`,\n method: \"put\",\n data: updatedData,\n })\n\n dispatch(updateActivitySuccess(response.data))\n return response.data\n } catch (error) {\n dispatch(updateActivityFailure(error.message))\n }\n }\n}\n\nexport const deleteActivity = (activityId) => async (dispatch) => {\n try {\n await http.request({\n url: `/assignments/${activityId}`,\n method: \"delete\",\n })\n\n dispatch({\n type: DELETE_ACTIVITY,\n payload: activityId,\n });\n } catch (error) {\n console.error('Error deleting activity:', error);\n }\n};\n\n// Action Creators\nconst getActivePatientRequest = () => ({\n type: GET_ACTIVE_PATIENTS_REQUEST\n})\n\nconst getActivePatientSuccess = (patients) => ({\n type: GET_ACTIVE_PATIENTS_SUCCESS,\n payload: patients\n})\n\nconst getActivePatientFailure = (error) => ({\n type: GET_ACTIVE_PATIENTS_FAILURE, \n payload: error\n})\n\n// Thunk Action\nexport const getActivePatients = () => {\n return async (dispatch) => {\n dispatch(getActivePatientRequest())\n\n try {\n const response = await http.get('/organization/active-patients')\n dispatch(getActivePatientSuccess(response.data))\n return response.data\n } catch (error) {\n dispatch(getActivePatientFailure(error.message))\n throw error\n }\n }\n}\n","import React, { Component } from \"react\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport Button from \"@material-ui/core/Button\";\nimport Link from \"@material-ui/core/Link\";\nimport ArrowBackIcon from \"@material-ui/icons/ArrowBack\";\n\nimport \"./customDialogStyle.scss\";\n\nclass CustomDialog extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const {\n toggle,\n children,\n className,\n open,\n hideCloseButton,\n closeButtonText,\n welcomeEnabled,\n ...rest\n } = this.props;\n return (\n \n \n {!hideCloseButton && (\n
\n {closeButtonText && close }\n \n )}\n {!!children && (\n {children}
\n )}\n \n {children}\n \n )\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport default NFButton\n","import { Debug, GetLocalStorageValueSafe } from \".\";\nimport React from \"react\";\n\nclass PermissionsService {\n static _perms;\n static _user;\n\n static _Hydrate() {\n Debug.log(\"Hydrating permissions\");\n PermissionsService._perms = JSON.parse(\n GetLocalStorageValueSafe(\"permissions_list\") || \"[]\"\n );\n PermissionsService._user = JSON.parse(\n GetLocalStorageValueSafe(\"user_data\") || \"{}\"\n );\n }\n\n static SetPermissions(permissions) {\n PermissionsService._perms = permissions;\n }\n static SetUserBlob(user) {\n PermissionsService._user = user;\n }\n\n static GetPermissions() {\n PermissionsService._perms = PermissionsService._perms || [];\n return PermissionsService._perms;\n }\n\n static HasPermission(perm) {\n PermissionsService._perms = PermissionsService._perms || [];\n return PermissionsService._perms.includes(perm);\n }\n\n static GetUserID() {\n PermissionsService._user = PermissionsService._user || {};\n return PermissionsService._user.id;\n }\n\n static GetUser() {\n PermissionsService._user = PermissionsService._user || {};\n return PermissionsService._user;\n }\n\n static Reset() {\n PermissionsService._perms = [];\n PermissionsService._user = undefined;\n }\n}\n\nexport default PermissionsService;\n","import moment from \"moment\";\n\nexport const createDateString = (days) => {\n let date = moment();\n date = date.subtract(days, \"days\");\n return date.format(\"YYYY-MM-DD\");\n};\n\n/**\n * Gets the value from local storage, or null if it is undefined or null\n * @param {string} keyName The name of the key to get from local storage\n */\nexport function GetLocalStorageValueSafe(keyName) {\n let result = localStorage.getItem(keyName);\n if (\n result === undefined ||\n result === null ||\n result === \"undefined\" ||\n result === \"null\"\n ) {\n result = null;\n }\n return result;\n}\n\nexport class Debug {\n static log(value) {\n if (process.env.NODE_ENV === \"development\") {\n console.log(value);\n }\n }\n\n static error(value) {\n console.error(value);\n }\n}\n\nexport function mapObjectPath(obj, path) {\n var paths = path.split(\".\");\n var current = obj;\n for (var i = 0; i < paths.length; i++) {\n if (current[paths[i]] === undefined) {\n return undefined;\n } else {\n current = current[paths[i]];\n }\n }\n return current;\n}\n\n/**\n * Returns a random number withing the given range\n * @param {number} min The minimum value of the range (inclusive)\n * @param {number} max The maximum value of the range (exclusive)\n */\nexport function random_range(min, max) {\n return min + Math.random() * (max - min);\n}\n\n/**\n * Clamps a value between an upper and lower bounds\n * @param {number} value The value to clamp\n * @param {number} min The minimum value of the range\n * @param {number} max The maximum value of the range\n */\nexport function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\nexport function trimRight(string, character) {\n if (character === \"]\") character = \"\\\\]\";\n if (character === \"^\") character = \"\\\\^\";\n if (character === \"\\\\\") character = \"\\\\\\\\\";\n return string.replace(new RegExp(\"[\" + character + \"]+$\", \"g\"), \"\");\n}\n\n/**\n * Capitalizes first letters of words in string.\n * @param {string} str String to be modified\n * @param {boolean=false} lower Whether all other letters should be lower cased\n * @return {string}\n * @see https://stackoverflow.com/questions/2332811/capitalize-words-in-string\n * @usage\n * capitalize('fix this string'); // -> 'Fix This String'\n * capitalize('javaSCrIPT'); // -> 'JavaSCrIPT'\n * capitalize('javaSCrIPT', true); // -> 'Javascript'\n */\nexport const capitalize = (str, lower = false) =>\n (lower ? str.toLowerCase() : str).replace(/(?:^|\\s|[\"'([{])+\\S/g, (match) =>\n match.toUpperCase()\n );\n","'use strict';\n\nimport Chart from 'chart.js';\nimport Hammer from 'hammerjs';\n\nvar helpers = Chart.helpers;\n\n// Take the zoom namespace of Chart\nvar zoomNS = Chart.Zoom = Chart.Zoom || {};\n\n// Where we store functions to handle different scale types\nvar zoomFunctions = zoomNS.zoomFunctions = zoomNS.zoomFunctions || {};\nvar panFunctions = zoomNS.panFunctions = zoomNS.panFunctions || {};\n\nChart.Zoom.defaults = Chart.defaults.global.plugins.zoom = {\n\tpan: {\n\t\tenabled: false,\n\t\tmode: 'xy',\n\t\tspeed: 20,\n\t\tthreshold: 10\n\t},\n\tzoom: {\n\t\tenabled: false,\n\t\tmode: 'xy',\n\t\tsensitivity: 3,\n\t\tspeed: 0.1\n\t}\n};\n\nfunction resolveOptions(chart, options) {\n\tvar deprecatedOptions = {};\n\tif (typeof chart.options.pan !== 'undefined') {\n\t\tdeprecatedOptions.pan = chart.options.pan;\n\t}\n\tif (typeof chart.options.zoom !== 'undefined') {\n\t\tdeprecatedOptions.zoom = chart.options.zoom;\n\t}\n\tvar props = chart.$zoom;\n\toptions = props._options = helpers.merge({}, [options, deprecatedOptions]);\n\n\t// Install listeners. Do this dynamically based on options so that we can turn zoom on and off\n\t// We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page\n\t// and the mouse goes over a chart you don't want it intercepted unless the plugin is enabled\n\tvar node = props._node;\n\tvar zoomEnabled = options.zoom && options.zoom.enabled;\n\tvar dragEnabled = options.zoom.drag;\n\tif (zoomEnabled && !dragEnabled) {\n\t\tnode.addEventListener('wheel', props._wheelHandler);\n\t} else {\n\t\tnode.removeEventListener('wheel', props._wheelHandler);\n\t}\n\tif (zoomEnabled && dragEnabled) {\n\t\tnode.addEventListener('mousedown', props._mouseDownHandler);\n\t\tnode.ownerDocument.addEventListener('mouseup', props._mouseUpHandler);\n\t} else {\n\t\tnode.removeEventListener('mousedown', props._mouseDownHandler);\n\t\tnode.removeEventListener('mousemove', props._mouseMoveHandler);\n\t\tnode.ownerDocument.removeEventListener('mouseup', props._mouseUpHandler);\n\t}\n}\n\nfunction storeOriginalOptions(chart) {\n\tvar originalOptions = chart.$zoom._originalOptions;\n\thelpers.each(chart.scales, function(scale) {\n\t\tif (!originalOptions[scale.id]) {\n\t\t\toriginalOptions[scale.id] = helpers.clone(scale.options);\n\t\t}\n\t});\n\thelpers.each(originalOptions, function(opt, key) {\n\t\tif (!chart.scales[key]) {\n\t\t\tdelete originalOptions[key];\n\t\t}\n\t});\n}\n\n/**\n * @param {string} mode can be 'x', 'y' or 'xy'\n * @param {string} dir can be 'x' or 'y'\n * @param {Chart} chart instance of the chart in question\n */\nfunction directionEnabled(mode, dir, chart) {\n\tif (mode === undefined) {\n\t\treturn true;\n\t} else if (typeof mode === 'string') {\n\t\treturn mode.indexOf(dir) !== -1;\n\t} else if (typeof mode === 'function') {\n\t\treturn mode({chart: chart}).indexOf(dir) !== -1;\n\t}\n\n\treturn false;\n}\n\nfunction rangeMaxLimiter(zoomPanOptions, newMax) {\n\tif (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&\n\t\t\t!helpers.isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {\n\t\tvar rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];\n\t\tif (newMax > rangeMax) {\n\t\t\tnewMax = rangeMax;\n\t\t}\n\t}\n\treturn newMax;\n}\n\nfunction rangeMinLimiter(zoomPanOptions, newMin) {\n\tif (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&\n\t\t\t!helpers.isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {\n\t\tvar rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];\n\t\tif (newMin < rangeMin) {\n\t\t\tnewMin = rangeMin;\n\t\t}\n\t}\n\treturn newMin;\n}\n\nfunction zoomCategoryScale(scale, zoom, center, zoomOptions) {\n\tvar labels = scale.chart.data.labels;\n\tvar minIndex = scale.minIndex;\n\tvar lastLabelIndex = labels.length - 1;\n\tvar maxIndex = scale.maxIndex;\n\tvar sensitivity = zoomOptions.sensitivity;\n\tvar chartCenter = scale.isHorizontal() ? scale.left + (scale.width / 2) : scale.top + (scale.height / 2);\n\tvar centerPointer = scale.isHorizontal() ? center.x : center.y;\n\n\tzoomNS.zoomCumulativeDelta = zoom > 1 ? zoomNS.zoomCumulativeDelta + 1 : zoomNS.zoomCumulativeDelta - 1;\n\n\tif (Math.abs(zoomNS.zoomCumulativeDelta) > sensitivity) {\n\t\tif (zoomNS.zoomCumulativeDelta < 0) {\n\t\t\tif (centerPointer >= chartCenter) {\n\t\t\t\tif (minIndex <= 0) {\n\t\t\t\t\tmaxIndex = Math.min(lastLabelIndex, maxIndex + 1);\n\t\t\t\t} else {\n\t\t\t\t\tminIndex = Math.max(0, minIndex - 1);\n\t\t\t\t}\n\t\t\t} else if (centerPointer < chartCenter) {\n\t\t\t\tif (maxIndex >= lastLabelIndex) {\n\t\t\t\t\tminIndex = Math.max(0, minIndex - 1);\n\t\t\t\t} else {\n\t\t\t\t\tmaxIndex = Math.min(lastLabelIndex, maxIndex + 1);\n\t\t\t\t}\n\t\t\t}\n\t\t\tzoomNS.zoomCumulativeDelta = 0;\n\t\t} else if (zoomNS.zoomCumulativeDelta > 0) {\n\t\t\tif (centerPointer >= chartCenter) {\n\t\t\t\tminIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + 1) : minIndex;\n\t\t\t} else if (centerPointer < chartCenter) {\n\t\t\t\tmaxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - 1) : maxIndex;\n\t\t\t}\n\t\t\tzoomNS.zoomCumulativeDelta = 0;\n\t\t}\n\t\tscale.options.ticks.min = rangeMinLimiter(zoomOptions, labels[minIndex]);\n\t\tscale.options.ticks.max = rangeMaxLimiter(zoomOptions, labels[maxIndex]);\n\t}\n}\n\nfunction zoomNumericalScale(scale, zoom, center, zoomOptions) {\n\tvar range = scale.max - scale.min;\n\tvar newDiff = range * (zoom - 1);\n\n\tvar centerPoint = scale.isHorizontal() ? center.x : center.y;\n\tvar minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range;\n\tvar maxPercent = 1 - minPercent;\n\n\tvar minDelta = newDiff * minPercent;\n\tvar maxDelta = newDiff * maxPercent;\n\n\tscale.options.ticks.min = rangeMinLimiter(zoomOptions, scale.min + minDelta);\n\tscale.options.ticks.max = rangeMaxLimiter(zoomOptions, scale.max - maxDelta);\n}\n\nfunction zoomTimeScale(scale, zoom, center, zoomOptions) {\n\tzoomNumericalScale(scale, zoom, center, zoomOptions);\n\n\tvar options = scale.options;\n\tif (options.time) {\n\t\tif (options.time.min) {\n\t\t\toptions.time.min = options.ticks.min;\n\t\t}\n\t\tif (options.time.max) {\n\t\t\toptions.time.max = options.ticks.max;\n\t\t}\n\t}\n}\n\nfunction zoomScale(scale, zoom, center, zoomOptions) {\n\tvar fn = zoomFunctions[scale.type];\n\tif (fn) {\n\t\tfn(scale, zoom, center, zoomOptions);\n\t}\n}\n\n/**\n * @param chart The chart instance\n * @param {number} percentZoomX The zoom percentage in the x direction\n * @param {number} percentZoomY The zoom percentage in the y direction\n * @param {{x: number, y: number}} focalPoint The x and y coordinates of zoom focal point. The point which doesn't change while zooming. E.g. the location of the mouse cursor when \"drag: false\"\n * @param {string} whichAxes `xy`, 'x', or 'y'\n * @param {number} animationDuration Duration of the animation of the redraw in milliseconds\n */\nfunction doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animationDuration) {\n\tvar ca = chart.chartArea;\n\tif (!focalPoint) {\n\t\tfocalPoint = {\n\t\t\tx: (ca.left + ca.right) / 2,\n\t\t\ty: (ca.top + ca.bottom) / 2,\n\t\t};\n\t}\n\n\tvar zoomOptions = chart.$zoom._options.zoom;\n\n\tif (zoomOptions.enabled) {\n\t\tstoreOriginalOptions(chart);\n\t\t// Do the zoom here\n\t\tvar zoomMode = typeof zoomOptions.mode === 'function' ? zoomOptions.mode({chart: chart}) : zoomOptions.mode;\n\n\t\t// Which axe should be modified when figers were used.\n\t\tvar _whichAxes;\n\t\tif (zoomMode === 'xy' && whichAxes !== undefined) {\n\t\t\t// based on fingers positions\n\t\t\t_whichAxes = whichAxes;\n\t\t} else {\n\t\t\t// no effect\n\t\t\t_whichAxes = 'xy';\n\t\t}\n\n\t\thelpers.each(chart.scales, function(scale) {\n\t\t\tif (scale.isHorizontal() && directionEnabled(zoomMode, 'x', chart) && directionEnabled(_whichAxes, 'x', chart)) {\n\t\t\t\tzoomOptions.scaleAxes = 'x';\n\t\t\t\tzoomScale(scale, percentZoomX, focalPoint, zoomOptions);\n\t\t\t} else if (!scale.isHorizontal() && directionEnabled(zoomMode, 'y', chart) && directionEnabled(_whichAxes, 'y', chart)) {\n\t\t\t\t// Do Y zoom\n\t\t\t\tzoomOptions.scaleAxes = 'y';\n\t\t\t\tzoomScale(scale, percentZoomY, focalPoint, zoomOptions);\n\t\t\t}\n\t\t});\n\n\t\tif (animationDuration) {\n\t\t\tchart.update({\n\t\t\t\tduration: animationDuration,\n\t\t\t\teasing: 'easeOutQuad',\n\t\t\t});\n\t\t} else {\n\t\t\tchart.update(0);\n\t\t}\n\n\t\tif (typeof zoomOptions.onZoom === 'function') {\n\t\t\tzoomOptions.onZoom({chart: chart});\n\t\t}\n\t}\n}\n\nfunction panCategoryScale(scale, delta, panOptions) {\n\tvar labels = scale.chart.data.labels;\n\tvar lastLabelIndex = labels.length - 1;\n\tvar offsetAmt = Math.max(scale.ticks.length, 1);\n\tvar panSpeed = panOptions.speed;\n\tvar minIndex = scale.minIndex;\n\tvar step = Math.round(scale.width / (offsetAmt * panSpeed));\n\tvar maxIndex;\n\n\tzoomNS.panCumulativeDelta += delta;\n\n\tminIndex = zoomNS.panCumulativeDelta > step ? Math.max(0, minIndex - 1) : zoomNS.panCumulativeDelta < -step ? Math.min(lastLabelIndex - offsetAmt + 1, minIndex + 1) : minIndex;\n\tzoomNS.panCumulativeDelta = minIndex !== scale.minIndex ? 0 : zoomNS.panCumulativeDelta;\n\n\tmaxIndex = Math.min(lastLabelIndex, minIndex + offsetAmt - 1);\n\n\tscale.options.ticks.min = rangeMinLimiter(panOptions, labels[minIndex]);\n\tscale.options.ticks.max = rangeMaxLimiter(panOptions, labels[maxIndex]);\n}\n\nfunction panNumericalScale(scale, delta, panOptions) {\n\tvar tickOpts = scale.options.ticks;\n\tvar prevStart = scale.min;\n\tvar prevEnd = scale.max;\n\tvar newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart) - delta);\n\tvar newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd) - delta);\n\t// The time scale returns date objects so convert to numbers. Can remove at Chart.js v3\n\tnewMin = newMin.valueOf ? newMin.valueOf() : newMin;\n\tnewMax = newMax.valueOf ? newMax.valueOf() : newMax;\n\tvar rangeMin = newMin;\n\tvar rangeMax = newMax;\n\tvar diff;\n\n\tif (panOptions.scaleAxes && panOptions.rangeMin &&\n\t\t\t!helpers.isNullOrUndef(panOptions.rangeMin[panOptions.scaleAxes])) {\n\t\trangeMin = panOptions.rangeMin[panOptions.scaleAxes];\n\t}\n\tif (panOptions.scaleAxes && panOptions.rangeMax &&\n\t\t\t!helpers.isNullOrUndef(panOptions.rangeMax[panOptions.scaleAxes])) {\n\t\trangeMax = panOptions.rangeMax[panOptions.scaleAxes];\n\t}\n\n\tif (newMin >= rangeMin && newMax <= rangeMax) {\n\t\ttickOpts.min = newMin;\n\t\ttickOpts.max = newMax;\n\t} else if (newMin < rangeMin) {\n\t\tdiff = prevStart - rangeMin;\n\t\ttickOpts.min = rangeMin;\n\t\ttickOpts.max = prevEnd - diff;\n\t} else if (newMax > rangeMax) {\n\t\tdiff = rangeMax - prevEnd;\n\t\ttickOpts.max = rangeMax;\n\t\ttickOpts.min = prevStart + diff;\n\t}\n}\n\nfunction panTimeScale(scale, delta, panOptions) {\n\tpanNumericalScale(scale, delta, panOptions);\n\n\tvar options = scale.options;\n\tif (options.time) {\n\t\tif (options.time.min) {\n\t\t\toptions.time.min = options.ticks.min;\n\t\t}\n\t\tif (options.time.max) {\n\t\t\toptions.time.max = options.ticks.max;\n\t\t}\n\t}\n}\n\nfunction panScale(scale, delta, panOptions) {\n\tvar fn = panFunctions[scale.type];\n\tif (fn) {\n\t\tfn(scale, delta, panOptions);\n\t}\n}\n\nfunction doPan(chartInstance, deltaX, deltaY) {\n\tstoreOriginalOptions(chartInstance);\n\tvar panOptions = chartInstance.$zoom._options.pan;\n\tif (panOptions.enabled) {\n\t\tvar panMode = typeof panOptions.mode === 'function' ? panOptions.mode({chart: chartInstance}) : panOptions.mode;\n\n\t\thelpers.each(chartInstance.scales, function(scale) {\n\t\t\tif (scale.isHorizontal() && directionEnabled(panMode, 'x', chartInstance) && deltaX !== 0) {\n\t\t\t\tpanOptions.scaleAxes = 'x';\n\t\t\t\tpanScale(scale, deltaX, panOptions);\n\t\t\t} else if (!scale.isHorizontal() && directionEnabled(panMode, 'y', chartInstance) && deltaY !== 0) {\n\t\t\t\tpanOptions.scaleAxes = 'y';\n\t\t\t\tpanScale(scale, deltaY, panOptions);\n\t\t\t}\n\t\t});\n\n\t\tchartInstance.update(0);\n\n\t\tif (typeof panOptions.onPan === 'function') {\n\t\t\tpanOptions.onPan({chart: chartInstance});\n\t\t}\n\t}\n}\n\nfunction getXAxis(chartInstance) {\n\tvar scales = chartInstance.scales;\n\tvar scaleIds = Object.keys(scales);\n\tfor (var i = 0; i < scaleIds.length; i++) {\n\t\tvar scale = scales[scaleIds[i]];\n\n\t\tif (scale.isHorizontal()) {\n\t\t\treturn scale;\n\t\t}\n\t}\n}\n\nfunction getYAxis(chartInstance) {\n\tvar scales = chartInstance.scales;\n\tvar scaleIds = Object.keys(scales);\n\tfor (var i = 0; i < scaleIds.length; i++) {\n\t\tvar scale = scales[scaleIds[i]];\n\n\t\tif (!scale.isHorizontal()) {\n\t\t\treturn scale;\n\t\t}\n\t}\n}\n\n// Store these for later\nzoomNS.zoomFunctions.category = zoomCategoryScale;\nzoomNS.zoomFunctions.time = zoomTimeScale;\nzoomNS.zoomFunctions.linear = zoomNumericalScale;\nzoomNS.zoomFunctions.logarithmic = zoomNumericalScale;\nzoomNS.panFunctions.category = panCategoryScale;\nzoomNS.panFunctions.time = panTimeScale;\nzoomNS.panFunctions.linear = panNumericalScale;\nzoomNS.panFunctions.logarithmic = panNumericalScale;\n// Globals for category pan and zoom\nzoomNS.panCumulativeDelta = 0;\nzoomNS.zoomCumulativeDelta = 0;\n\n// Chartjs Zoom Plugin\nvar zoomPlugin = {\n\tid: 'zoom',\n\n\tafterInit: function(chartInstance) {\n\n\t\tchartInstance.resetZoom = function() {\n\t\t\tstoreOriginalOptions(chartInstance);\n\t\t\tvar originalOptions = chartInstance.$zoom._originalOptions;\n\t\t\thelpers.each(chartInstance.scales, function(scale) {\n\n\t\t\t\tvar timeOptions = scale.options.time;\n\t\t\t\tvar tickOptions = scale.options.ticks;\n\n\t\t\t\tif (originalOptions[scale.id]) {\n\n\t\t\t\t\tif (timeOptions) {\n\t\t\t\t\t\ttimeOptions.min = originalOptions[scale.id].time.min;\n\t\t\t\t\t\ttimeOptions.max = originalOptions[scale.id].time.max;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (tickOptions) {\n\t\t\t\t\t\ttickOptions.min = originalOptions[scale.id].ticks.min;\n\t\t\t\t\t\ttickOptions.max = originalOptions[scale.id].ticks.max;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\n\t\t\t\t\tif (timeOptions) {\n\t\t\t\t\t\tdelete timeOptions.min;\n\t\t\t\t\t\tdelete timeOptions.max;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (tickOptions) {\n\t\t\t\t\t\tdelete tickOptions.min;\n\t\t\t\t\t\tdelete tickOptions.max;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t});\n\n\t\t\tchartInstance.update();\n\t\t};\n\n\t},\n\n\tbeforeUpdate: function(chart, options) {\n\t\tresolveOptions(chart, options);\n\t},\n\n\tbeforeInit: function(chartInstance, pluginOptions) {\n\t\tchartInstance.$zoom = {\n\t\t\t_originalOptions: {}\n\t\t};\n\t\tvar node = chartInstance.$zoom._node = chartInstance.ctx.canvas;\n\t\tresolveOptions(chartInstance, pluginOptions);\n\n\t\tvar options = chartInstance.$zoom._options;\n\t\tvar panThreshold = options.pan && options.pan.threshold;\n\n\t\tchartInstance.$zoom._mouseDownHandler = function(event) {\n\t\t\tnode.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);\n\t\t\tchartInstance.$zoom._dragZoomStart = event;\n\t\t};\n\n\t\tchartInstance.$zoom._mouseMoveHandler = function(event) {\n\t\t\tif (chartInstance.$zoom._dragZoomStart) {\n\t\t\t\tchartInstance.$zoom._dragZoomEnd = event;\n\t\t\t\tchartInstance.update(0);\n\t\t\t}\n\t\t};\n\n\t\tchartInstance.$zoom._mouseUpHandler = function(event) {\n\t\t\tif (!chartInstance.$zoom._dragZoomStart) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tnode.removeEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);\n\n\t\t\tvar beginPoint = chartInstance.$zoom._dragZoomStart;\n\n\t\t\tvar offsetX = beginPoint.target.getBoundingClientRect().left;\n\t\t\tvar startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;\n\t\t\tvar endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;\n\n\t\t\tvar offsetY = beginPoint.target.getBoundingClientRect().top;\n\t\t\tvar startY = Math.min(beginPoint.clientY, event.clientY) - offsetY;\n\t\t\tvar endY = Math.max(beginPoint.clientY, event.clientY) - offsetY;\n\n\t\t\tvar dragDistanceX = endX - startX;\n\t\t\tvar dragDistanceY = endY - startY;\n\n\t\t\t// Remove drag start and end before chart update to stop drawing selected area\n\t\t\tchartInstance.$zoom._dragZoomStart = null;\n\t\t\tchartInstance.$zoom._dragZoomEnd = null;\n\n\t\t\tvar zoomThreshold = options.zoom && options.zoom.threshold || 0;\n\t\t\tif (dragDistanceX <= zoomThreshold && dragDistanceY <= zoomThreshold) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvar chartArea = chartInstance.chartArea;\n\n\t\t\tvar zoomOptions = chartInstance.$zoom._options.zoom;\n\t\t\tvar chartDistanceX = chartArea.right - chartArea.left;\n\t\t\tvar xEnabled = directionEnabled(zoomOptions.mode, 'x', chartInstance);\n\t\t\tvar zoomX = xEnabled && dragDistanceX ? 1 + ((chartDistanceX - dragDistanceX) / chartDistanceX) : 1;\n\n\t\t\tvar chartDistanceY = chartArea.bottom - chartArea.top;\n\t\t\tvar yEnabled = directionEnabled(zoomOptions.mode, 'y', chartInstance);\n\t\t\tvar zoomY = yEnabled && dragDistanceY ? 1 + ((chartDistanceY - dragDistanceY) / chartDistanceY) : 1;\n\n\t\t\tdoZoom(chartInstance, zoomX, zoomY, {\n\t\t\t\tx: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,\n\t\t\t\ty: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top\n\t\t\t}, undefined, zoomOptions.drag.animationDuration);\n\n\t\t\tif (typeof zoomOptions.onZoomComplete === 'function') {\n\t\t\t\tzoomOptions.onZoomComplete({chart: chartInstance});\n\t\t\t}\n\t\t};\n\n\t\tvar _scrollTimeout = null;\n\t\tchartInstance.$zoom._wheelHandler = function(event) {\n\t\t\t// Prevent the event from triggering the default behavior (eg. Content scrolling).\n\t\t\tif (event.cancelable) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\t// Firefox always fires the wheel event twice:\n\t\t\t// First without the delta and right after that once with the delta properties.\n\t\t\tif (typeof event.deltaY === 'undefined') {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvar rect = event.target.getBoundingClientRect();\n\t\t\tvar offsetX = event.clientX - rect.left;\n\t\t\tvar offsetY = event.clientY - rect.top;\n\n\t\t\tvar center = {\n\t\t\t\tx: offsetX,\n\t\t\t\ty: offsetY\n\t\t\t};\n\n\t\t\tvar zoomOptions = chartInstance.$zoom._options.zoom;\n\t\t\tvar speedPercent = zoomOptions.speed;\n\n\t\t\tif (event.deltaY >= 0) {\n\t\t\t\tspeedPercent = -speedPercent;\n\t\t\t}\n\t\t\tdoZoom(chartInstance, 1 + speedPercent, 1 + speedPercent, center);\n\n\t\t\tclearTimeout(_scrollTimeout);\n\t\t\t_scrollTimeout = setTimeout(function() {\n\t\t\t\tif (typeof zoomOptions.onZoomComplete === 'function') {\n\t\t\t\t\tzoomOptions.onZoomComplete({chart: chartInstance});\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t};\n\n\t\tif (Hammer) {\n\t\t\tvar mc = new Hammer.Manager(node);\n\t\t\tmc.add(new Hammer.Pinch());\n\t\t\tmc.add(new Hammer.Pan({\n\t\t\t\tthreshold: panThreshold\n\t\t\t}));\n\n\t\t\t// Hammer reports the total scaling. We need the incremental amount\n\t\t\tvar currentPinchScaling;\n\t\t\tvar handlePinch = function(e) {\n\t\t\t\tvar diff = 1 / (currentPinchScaling) * e.scale;\n\t\t\t\tvar rect = e.target.getBoundingClientRect();\n\t\t\t\tvar offsetX = e.center.x - rect.left;\n\t\t\t\tvar offsetY = e.center.y - rect.top;\n\t\t\t\tvar center = {\n\t\t\t\t\tx: offsetX,\n\t\t\t\t\ty: offsetY\n\t\t\t\t};\n\n\t\t\t\t// fingers position difference\n\t\t\t\tvar x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);\n\t\t\t\tvar y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY);\n\n\t\t\t\t// diagonal fingers will change both (xy) axes\n\t\t\t\tvar p = x / y;\n\t\t\t\tvar xy;\n\t\t\t\tif (p > 0.3 && p < 1.7) {\n\t\t\t\t\txy = 'xy';\n\t\t\t\t} else if (x > y) {\n\t\t\t\t\txy = 'x'; // x axis\n\t\t\t\t} else {\n\t\t\t\t\txy = 'y'; // y axis\n\t\t\t\t}\n\n\t\t\t\tdoZoom(chartInstance, diff, diff, center, xy);\n\n\t\t\t\tvar zoomOptions = chartInstance.$zoom._options.zoom;\n\t\t\t\tif (typeof zoomOptions.onZoomComplete === 'function') {\n\t\t\t\t\tzoomOptions.onZoomComplete({chart: chartInstance});\n\t\t\t\t}\n\n\t\t\t\t// Keep track of overall scale\n\t\t\t\tcurrentPinchScaling = e.scale;\n\t\t\t};\n\n\t\t\tmc.on('pinchstart', function() {\n\t\t\t\tcurrentPinchScaling = 1; // reset tracker\n\t\t\t});\n\t\t\tmc.on('pinch', handlePinch);\n\t\t\tmc.on('pinchend', function(e) {\n\t\t\t\thandlePinch(e);\n\t\t\t\tcurrentPinchScaling = null; // reset\n\t\t\t\tzoomNS.zoomCumulativeDelta = 0;\n\t\t\t});\n\n\t\t\tvar currentDeltaX = null;\n\t\t\tvar currentDeltaY = null;\n\t\t\tvar panning = false;\n\t\t\tvar handlePan = function(e) {\n\t\t\t\tif (currentDeltaX !== null && currentDeltaY !== null) {\n\t\t\t\t\tpanning = true;\n\t\t\t\t\tvar deltaX = e.deltaX - currentDeltaX;\n\t\t\t\t\tvar deltaY = e.deltaY - currentDeltaY;\n\t\t\t\t\tcurrentDeltaX = e.deltaX;\n\t\t\t\t\tcurrentDeltaY = e.deltaY;\n\t\t\t\t\tdoPan(chartInstance, deltaX, deltaY);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tmc.on('panstart', function(e) {\n\t\t\t\tcurrentDeltaX = 0;\n\t\t\t\tcurrentDeltaY = 0;\n\t\t\t\thandlePan(e);\n\t\t\t});\n\t\t\tmc.on('panmove', handlePan);\n\t\t\tmc.on('panend', function() {\n\t\t\t\tcurrentDeltaX = null;\n\t\t\t\tcurrentDeltaY = null;\n\t\t\t\tzoomNS.panCumulativeDelta = 0;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\tpanning = false;\n\t\t\t\t}, 500);\n\n\t\t\t\tvar panOptions = chartInstance.$zoom._options.pan;\n\t\t\t\tif (typeof panOptions.onPanComplete === 'function') {\n\t\t\t\t\tpanOptions.onPanComplete({chart: chartInstance});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tchartInstance.$zoom._ghostClickHandler = function(e) {\n\t\t\t\tif (panning && e.cancelable) {\n\t\t\t\t\te.stopImmediatePropagation();\n\t\t\t\t\te.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t\tnode.addEventListener('click', chartInstance.$zoom._ghostClickHandler);\n\n\t\t\tchartInstance._mc = mc;\n\t\t}\n\t},\n\n\tbeforeDatasetsDraw: function(chartInstance) {\n\t\tvar ctx = chartInstance.ctx;\n\n\t\tif (chartInstance.$zoom._dragZoomEnd) {\n\t\t\tvar xAxis = getXAxis(chartInstance);\n\t\t\tvar yAxis = getYAxis(chartInstance);\n\t\t\tvar beginPoint = chartInstance.$zoom._dragZoomStart;\n\t\t\tvar endPoint = chartInstance.$zoom._dragZoomEnd;\n\n\t\t\tvar startX = xAxis.left;\n\t\t\tvar endX = xAxis.right;\n\t\t\tvar startY = yAxis.top;\n\t\t\tvar endY = yAxis.bottom;\n\n\t\t\tif (directionEnabled(chartInstance.$zoom._options.zoom.mode, 'x', chartInstance)) {\n\t\t\t\tvar offsetX = beginPoint.target.getBoundingClientRect().left;\n\t\t\t\tstartX = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;\n\t\t\t\tendX = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;\n\t\t\t}\n\n\t\t\tif (directionEnabled(chartInstance.$zoom._options.zoom.mode, 'y', chartInstance)) {\n\t\t\t\tvar offsetY = beginPoint.target.getBoundingClientRect().top;\n\t\t\t\tstartY = Math.min(beginPoint.clientY, endPoint.clientY) - offsetY;\n\t\t\t\tendY = Math.max(beginPoint.clientY, endPoint.clientY) - offsetY;\n\t\t\t}\n\n\t\t\tvar rectWidth = endX - startX;\n\t\t\tvar rectHeight = endY - startY;\n\t\t\tvar dragOptions = chartInstance.$zoom._options.zoom.drag;\n\n\t\t\tctx.save();\n\t\t\tctx.beginPath();\n\t\t\tctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)';\n\t\t\tctx.fillRect(startX, startY, rectWidth, rectHeight);\n\n\t\t\tif (dragOptions.borderWidth > 0) {\n\t\t\t\tctx.lineWidth = dragOptions.borderWidth;\n\t\t\t\tctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)';\n\t\t\t\tctx.strokeRect(startX, startY, rectWidth, rectHeight);\n\t\t\t}\n\t\t\tctx.restore();\n\t\t}\n\t},\n\n\tdestroy: function(chartInstance) {\n\t\tif (!chartInstance.$zoom) {\n\t\t\treturn;\n\t\t}\n\t\tvar props = chartInstance.$zoom;\n\t\tvar node = props._node;\n\n\t\tnode.removeEventListener('mousedown', props._mouseDownHandler);\n\t\tnode.removeEventListener('mousemove', props._mouseMoveHandler);\n\t\tnode.ownerDocument.removeEventListener('mouseup', props._mouseUpHandler);\n\t\tnode.removeEventListener('wheel', props._wheelHandler);\n\t\tnode.removeEventListener('click', props._ghostClickHandler);\n\n\t\tdelete chartInstance.$zoom;\n\n\t\tvar mc = chartInstance._mc;\n\t\tif (mc) {\n\t\t\tmc.remove('pinchstart');\n\t\t\tmc.remove('pinch');\n\t\t\tmc.remove('pinchend');\n\t\t\tmc.remove('panstart');\n\t\t\tmc.remove('pan');\n\t\t\tmc.remove('panend');\n\t\t\tmc.destroy();\n\t\t}\n\t}\n};\n\nChart.plugins.register(zoomPlugin);\nexport default zoomPlugin;\n","import React from \"react\";\nconst withModals = (\n WrappedComponent,\n modalsToggleProps = {},\n modalsStatusProps = {}\n) => {\n return class extends React.Component {\n constructor(props) {\n super(props);\n this.toggleModal = this.toggleModal.bind(this);\n this.state = {\n modals: {},\n };\n }\n\n toggleModal(identifier) {\n this.setState((prevState) => ({\n modals: {\n ...prevState.modals,\n [identifier]: !prevState.modals[identifier],\n },\n }));\n }\n\n render() {\n // ... and renders the wrapped component with the fresh data!\n // Notice that we pass through any additional props\n const modalsProps = {};\n Object.keys(modalsToggleProps).forEach((modalProp) => {\n modalsProps[modalProp] = () =>\n this.toggleModal(modalsToggleProps[modalProp]);\n });\n Object.keys(modalsStatusProps).forEach((modalProp) => {\n modalsProps[modalProp] =\n this.state.modals[modalsStatusProps[modalProp]];\n });\n\n return (\n } A promise that returns a chartData and chartOptions pair\n */\n async fetchData() {\n const user_id = this.props.user_id;\n const start_date = this.props.start_date;\n const end_date = this.props.end_date;\n\n // Fetch data (async), using an empty dispatcher\n let response = await this.dispatchAPI(\n user_id,\n start_date,\n end_date\n )((x) => {});\n // Parse the results and return the graphing information\n return this.parseData(response);\n }\n\n dispatchAPI(user_id, start_date, end_date) {\n throw new Error(\"dispatchAPI must be overridden in child classes!\");\n }\n\n /**\n * Handles parsing the result of the API request and generating a ChartJS chart\n * @param {Object} payload\n */\n parseData(payload) {\n throw new Error(\"parseData must be overridden by child classes!\");\n }\n\n renderChart() {\n throw new Error(\"renderChart must be overridden by child classes!\");\n }\n\n render() {\n return this.state.isFetching ? (\n Data not loaded
\n );\n }\n}\n","import axios from \"axios\";\nimport util from \"util\";\nimport { Debug } from \"./lib\";\nimport { SIGN_OUT } from \"./actions/types\";\nimport PermissionsService from \"./lib/PermissionsSystem\";\n\nimport store from \"./store\";\n\nDebug.log(process.env);\nconst API_ROUTE =\n process.env.REACT_APP_API_ROUTE || \"https://api-staging.neurofit.ca/api\";\n\nconst client = axios.create({\n baseURL: API_ROUTE,\n headers: {\n \"Content-type\": \"application/json; charset=utf-8 \",\n },\n});\n\nclient.defaults.headers[\"Content-Type\"] = \"application/json; charset=utf-8\";\n\n// Middleware to load the auth token into the requests\nclient.interceptors.request.use(\n (config) => {\n const token = localStorage.getItem(\"auth_token\");\n if (token) {\n Debug.log(\"Attaching token!\");\n config.headers[\"Authorization\"] = token;\n }\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n);\n// Middleware to handle route refresh on 401/403 errors\nclient.interceptors.response.use(\n (response) => {\n return response;\n },\n (err) => {\n const originalReq = err.config;\n const refresh_route = API_ROUTE + \"/user/refresh_token\";\n\n const reject = (err) => {\n Debug.log(\"Refresh failed!\");\n localStorage.removeItem(\"auth_token\");\n localStorage.removeItem(\"refresh_token\");\n PermissionsService.Reset();\n throw err;\n };\n if (\n err.url !== refresh_route &&\n (err.response.status === 401) | (err.response.status === 403) &&\n err.config &&\n !err.config._retry\n ) {\n originalReq._retry = true;\n Debug.log(\"Attempting to refresh token!\");\n Debug.log(\"token: \" + localStorage.getItem(\"refresh_token\"));\n let result = axios\n .put(refresh_route, {\n refresh_token: localStorage.getItem(\"refresh_token\"),\n })\n .then((res) => {\n Debug.log(\"Got refresh, re-calling route\");\n Debug.log(\"Headers\" + util.inspect(res.headers));\n localStorage.setItem(\"auth_token\", res.headers.authorization);\n localStorage.setItem(\"refresh_token\", res.headers.refresh_token);\n originalReq.headers[\"Authorization\"] = res.headers.authorization;\n return axios(originalReq);\n })\n .catch((e) => {\n Debug.log(util.inspect(err));\n const thrown = {\n config: err.config,\n request: err.request,\n response: err.response,\n isAxiosError: err.isAxiosError,\n };\n store.dispatch({\n type: SIGN_OUT,\n payload: {},\n });\n reject(thrown);\n });\n\n return result;\n } else if (err.url === refresh_route) {\n store.dispatch({\n type: SIGN_OUT,\n payload: {},\n });\n reject(err);\n } else {\n return Promise.reject(err);\n }\n }\n);\n\nexport default client;\n","import React from \"react\";\nimport Fab from \"@material-ui/core/Fab\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { PersonAdd } from \"@material-ui/icons\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \"100%\",\n padding: \"6px 1em\",\n boxSizing: \"border-box\",\n },\n button: {\n margin: \"0px 6px\",\n textTransform: \"none\",\n backgroundColor: \"#8FCAED\",\n borderRadius: \"5px\",\n display: \"flex\",\n padding: \"0 10px\",\n width: \"100%\",\n height: \"40px\",\n color: \"#333437\",\n fontWeight: \"700\",\n fontSize: \"17px\",\n \"&:hover\": {\n backgroundColor: \"#8FCAED\",\n },\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n}));\n\nexport default function FabIcon(props) {\n const classes = useStyles();\n\n return (\n \n
\n {/* Data not loaded
\n );\n};\n\nUserSkillLevels.propTypes = {\n start_date: PropTypes.string.isRequired,\n end_date: PropTypes.string.isRequired,\n isFetching: PropTypes.string.isRequired,\n};\n\nexport default UserSkillLevels;\n","import React from \"react\";\nimport { Container, Box } from \"@material-ui/core\";\nimport PropTypes from \"prop-types\";\n\nconst 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\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nexport default TabPanel;\n","import React, { useState, useEffect } from \"react\";\nimport { Radar } from \"react-chartjs-2\";\n\nconst UserMood = (props) => {\n const [chartData, setChartData] = useState({});\n\n useEffect(() => {\n parseData(props.userRadarPlotData);\n }, [props.userRadarPlotData]);\n\n const parseData = (payload) => {\n let datasets = [];\n\n if (\n payload !== null &&\n payload !== undefined &&\n payload.average !== undefined && payload.entries.length !== 0\n ) {\n // do not delete this line\n\n let labels = Object.keys(payload.average);\n\n let averages_oldValue = payload.entries[0];\n let averages_newValue = payload.entries[payload.entries.length - 1];\n\n let startPeriod= []\n let endPeriod = []\n var array_keys = [\"perceived_difficulty\" , \"level_name\" , \"level_id\",\"date\"]\n\n array_keys.map(item => {\n delete averages_oldValue[item]\n delete averages_newValue[item]\n })\n\n Object.keys(averages_oldValue).map((key) => {\n if (averages_oldValue[key] !== null) {\n startPeriod.push(Number(averages_oldValue[key]).toFixed(2));\n } else {\n startPeriod.push(0);\n }\n return key;\n });\n\n Object.keys(averages_newValue).map((key) => {\n if (averages_newValue[key] !== null) {\n endPeriod.push(Number(averages_newValue[key]).toFixed(2));\n } else {\n endPeriod.push(0);\n }\n return key;\n });\n\n // Create the ChartJS dataset for the radar plot\n let chartData = {\n labels: labels,\n datasets: [\n {\n label: \"Start of Period\",\n data: [...startPeriod],\n backgroundColor: \"rgba(157, 137, 246, 0.5)\",\n borderColor: \"rgba(157, 137, 246, 0.5)\",\n borderWidth: 1,\n },\n {\n label: \"End of Period\",\n data: [...endPeriod],\n backgroundColor: \"rgba(125, 192, 230, 0.5)\",\n borderColor: \"rgba(125, 192, 230, 0.5)\",\n borderWidth: 1,\n }\n ],\n };\n\n // ChartJS options\n const options = {\n maintainAspectRatio: false,\n legend: {\n display: true,\n position: \"bottom\",\n labels : {\n borderRadius : \"5px\"\n }\n },\n scale: {\n pointLabels: {\n fontSize: 15,\n },\n },\n plugins : {\n customCanvasBackgroundColor: {\n backgroundColor: 'transparent',\n },\n },\n };\n\n setChartData({ chartData: chartData, chartOptions: options });\n }\n };\n\n return \n
\n );\n}\n","import moment from \"moment\";\nimport http from \"../http-common\";\nimport util from \"util\";\nimport { Debug } from \"../lib\";\nimport {\n GET_ORGANIZATION_SINGLE,\n GET_ACTIVE_USERS,\n PERMADMIN_GET_PERMISSIONS_LISTING,\n PERMADMIN_GET_ROLES_LISTING,\n PERMADMIN_CREATE_PERMISSION,\n PERMADMIN_UPDATE_PERMISSION,\n PERMADMIN_DELETE_PERMISSION,\n GET_META_TEMPLATES,\n GET_META_TEMPLATE_SESSIONS,\n GET_COUNT_PAITENTS_ORG,\n} from \"./types\";\n\nfunction tryDispatch(dispatch, args) {\n if (dispatch) {\n dispatch(args);\n }\n}\n\nexport default class AdminActions {\n static ACTIVE_USERS_ROUTE = \"organizations/active_users\";\n static ACTIVE_USERS_ROUTE_ORG = \"organizations/:org_id/active_users\";\n static ACTIVE_USERS_ROUTE_ORG_COUNTS = \"organizations/:org_id/active_users/patients\";\n static PERMISSIONS_LIST_ROUTE = \"developer/permissions\";\n static PERMISSIONS_MODIFY_ROUTE = \"developer/permissions/:id\";\n static ROLES_LIST_ROUTE = \"developer/permissions/roles\";\n static ROLES_LIST_ROUTE = \"developer/permissions/roles\";\n static GET_LEVELS_ROUTE = \"levels\";\n static GET_LEVELS_INSPECTED_ROUTE = \"levels/inspect_all\";\n static GET_SESSION_META = \"sessions/:level_id/:level_version/meta_data\";\n static GET_ORGANIZATION_ROUTE = \"organizations/:org_id\";\n\n static GetActiveUsers(options) {\n const start_date = options.start_date;\n const end_date = options.end_date;\n const org_id = options.org_id;\n const is_daily = options.is_daily;\n\n const route =\n org_id !== undefined\n ? AdminActions.ACTIVE_USERS_ROUTE_ORG.replace(\":org_id\", options.org_id)\n : AdminActions.ACTIVE_USERS_ROUTE;\n\n return async (dispatch) => {\n const response = await http\n .get(route, {\n params: {\n start_date: start_date,\n end_date: end_date,\n is_daily: is_daily,\n },\n })\n .then((response) => {\n let data = response.data;\n data.sort((a, b) => {\n if (a.date > b.date) return 1;\n if (b.date > a.date) return -1;\n return 0;\n });\n return data;\n })\n .catch((error) => {\n return error;\n });\n\n tryDispatch(dispatch, {\n type: GET_ACTIVE_USERS,\n payload: response,\n });\n\n return response;\n };\n }\n\n static GetCountPatientOrg (options) {\n const route = AdminActions.ACTIVE_USERS_ROUTE_ORG_COUNTS.replace(\":org_id\", options?.org_id)\n return async (dispatch) => {\n \n const response = await http\n .get(route, {\n params: {\n between_start: options.start_date,\n between_end: options.end_date,\n },\n })\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n dispatch({\n type: GET_COUNT_PAITENTS_ORG,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n\n static GetPermissionsList() {\n return async (dispatch) => {\n const response = await http\n .get(AdminActions.PERMISSIONS_LIST_ROUTE)\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n dispatch({\n type: PERMADMIN_GET_PERMISSIONS_LISTING,\n payload: response.data,\n response: response,\n });\n\n return response;\n };\n }\n\n static CreatePermission(options) {\n return async (dispatch) => {\n const data = {\n name: options.name,\n privilege_req: options.privilege || 0,\n parent_id: options.parent_id,\n description: options.description,\n };\n const response = await http\n .post(AdminActions.PERMISSIONS_LIST_ROUTE, data)\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n dispatch({\n type: PERMADMIN_CREATE_PERMISSION,\n payload: response.data || response,\n response: response,\n });\n\n return response;\n };\n }\n\n static UpdatePermission(options) {\n return async (dispatch) => {\n const data = {\n privilege_req: options.privilege_req,\n parent_id: options.parent_id,\n description: options.description,\n };\n const response = await http\n .put(\n AdminActions.PERMISSIONS_MODIFY_ROUTE.replace(\":id\", options.id),\n data\n )\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n dispatch({\n type: PERMADMIN_UPDATE_PERMISSION,\n payload: response.data || response,\n response: response,\n });\n\n return response;\n };\n }\n\n static DeletePermission(id) {\n return async (dispatch) => {\n const response = await http\n .delete(AdminActions.PERMISSIONS_MODIFY_ROUTE.replace(\":id\", id))\n .then((response) => {\n return response;\n })\n .catch((error) => {\n return error.response;\n });\n\n dispatch({\n type: PERMADMIN_DELETE_PERMISSION,\n payload: response.data || response,\n response: response,\n });\n\n return response;\n };\n }\n\n static GetRoleList() {\n return async (dispatch) => {\n const response = await http\n .get(AdminActions.ROLES_LIST_ROUTE)\n .then((response) => {\n let data = response.data.roles;\n data.sort((a, b) => {\n if (a.name > b.name) return 1;\n if (b.name > a.name) return -1;\n return 0;\n });\n return data;\n })\n .catch((error) => {\n return error;\n });\n\n dispatch({\n type: PERMADMIN_GET_ROLES_LISTING,\n payload: response,\n });\n\n return response;\n };\n }\n\n static GetAvailableLevelVersions(options) {\n options = options || {};\n return async (dispatch) => {\n const response = await http\n .get(AdminActions.GET_LEVELS_INSPECTED_ROUTE, {\n params: {\n org_id: options.org_id || undefined,\n start_date: options.start_date || undefined,\n end_date: options.end_date || undefined ,\n },\n })\n .then(async (response) => {\n let data = response.data;\n return data;\n })\n .catch((error) => {\n return error;\n });\n\n dispatch({\n type: GET_META_TEMPLATES,\n payload: response,\n });\n\n return response;\n };\n }\n\n static GetSessions(options) {\n return async (dispatch) => {\n const response = await http\n .get(\n AdminActions.GET_SESSION_META.replace(\n \":level_id\",\n options.level_id\n ).replace(\":level_version\", options.level_version),\n {\n params: {\n offset: options.offset || 0,\n limit: options.limit || undefined,\n org_id: options.org_id || undefined,\n start_date : options.start_date || undefined ,\n end_date : options.end_date || undefined\n },\n }\n )\n .then((response) => {\n let data = response.data;\n return data;\n })\n .catch((error) => {\n return error;\n });\n\n dispatch({\n type: GET_META_TEMPLATE_SESSIONS,\n payload: response,\n });\n return response;\n };\n }\n\n static GetOrganization(options) {\n return async (dispatch) => {\n const response = await http\n .get(\n AdminActions.GET_ORGANIZATION_ROUTE.replace(\":org_id\", options.org_id)\n )\n .then((response) => {\n let data = response.data;\n return data;\n })\n .catch((error) => {\n return error;\n });\n\n dispatch({\n type: GET_ORGANIZATION_SINGLE,\n payload: response,\n });\n return response;\n };\n }\n}\n","export default __webpack_public_path__ + \"static/media/instagram.12780e37.svg\";","import React from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport { Button, Divider } from \"@material-ui/core\";\nimport \"./index.scss\";\nimport {\n TiSocialFacebookCircular,\n TiSocialInstagramCircular,\n TiSocialLinkedinCircular,\n TiSocialTwitterCircular,\n} from \"react-icons/ti\";\nimport Instagram from \"../../../assets/images/instagram.svg\";\nconst Footer = () => {\n return (\n \n );\n};\nexport default withRouter(Footer);\n"],"sourceRoot":""}