CCP Dashboard Audit

src/components/CCPDashboard/CCPDashboardPage.tsx

@@ -59,12 +59,11 @@ const useStyles = makeStyles({
     background: Colours.BackgroundGray,
   },
   tabPanel: {
-    paddingLeft: '30px',
-    paddingRight: '30px',
+    padding: '0 56px',
   },
   tabs: {
     background: Colours.White,
-    padding: '0 165px',
+    padding: '0 56px',
   },
   fullHeightGridItem: {
     display: 'flex',

src/components/CCPDashboard/HospitalOverview.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles({
     height: '100%',
   },
   select: {
-    minWidth: '300px',
+    minWidth: '240px',
   },
   menuItem: {
     boxSizing: 'border-box',
@@ -44,6 +44,12 @@ const useStyles = makeStyles({
   patientTableCard: {
     marginTop: '24px',
     marginBottom: '145px',
+    width: '100%',
+  },
+  remainingWidthGridItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
   },
 });
 
@@ -94,8 +100,13 @@ export const HospitalOverview = (props: HospitalOverviewProps) => {
   };
 
   return (
-    <Grid container direction="row" justify="center" alignItems="center">
-      <Grid item>
+    <Grid
+      container
+      direction="row"
+      alignItems="center"
+      style={{ marginTop: '52px' }}
+    >
+      <Grid>
         <Card variant="outlined" className={classes.card}>
           <Select
             variant="outlined"
@@ -136,7 +147,7 @@ export const HospitalOverview = (props: HospitalOverviewProps) => {
           </Box>
         </Card>
       </Grid>
-      <Grid item>
+      <Grid className={classes.remainingWidthGridItem}>
         <TriageCard patients={filteredPatients} />
       </Grid>
       <Card variant="outlined" className={classes.patientTableCard}>

src/components/CCPDashboard/PatientDetailsDialog.tsx

@@ -2,15 +2,17 @@ import React from 'react';
 import {
   Typography,
   Box,
+  Grid,
   makeStyles,
   DialogContent,
   IconButton,
   TextField,
 } from '@material-ui/core';
 import { Close } from '@material-ui/icons';
 import { Colours } from '../../styles/Constants';
+import { statusLabels } from './PatientInfoTable';
 import { Patient } from '../../graphql/queries/patients';
-import { capitalize } from '../../utils/format';
+import { capitalize, formatLastUpdated } from '../../utils/format';
 
 const useStyles = makeStyles({
   label: {
@@ -51,19 +53,25 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => {
 
   const patientDetails: PatientDetail[] = [
     { label: 'Barcode Number', value: patient.barcodeValue },
+    { label: 'Status', value: statusLabels[patient.status] },
     {
       label: 'Triage',
       value: patient.triageLevel,
-      styles: {
-        color: Colours[`Triage${capitalize(patient.triageLevel)}`],
-      },
+    },
+    {
+      label: 'CTAS',
+      value: patient.ctas,
     },
     { label: 'Run Number', value: patient.runNumber },
     { label: 'Hospital', value: patient.hospitalId?.name },
+    { label: 'Ambulance Number', value: patient.ambulanceId?.vehicleNumber },
     { label: 'CCP', value: patient.collectionPointId.name },
-    { label: 'Status', value: patient.status },
     { label: 'Gender', value: patient.gender },
     { label: 'Age', value: patient.age },
+    {
+      label: 'Last Edited',
+      value: formatLastUpdated(patient.updatedAt, true),
+    },
   ];
 
   return (
@@ -81,28 +89,34 @@ export const PatientDetailsDialog = (props: PatientDetailsDialogProps) => {
       >
         <Close />
       </IconButton>
-      {patientDetails.map((d: PatientDetail) => (
-        <Box display="flex" marginBottom="24px" key={d.label}>
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            className={classes.label}
-          >
-            {`${d.label}:`}
-          </Typography>
-          {d.label === 'Run Number' ? (
-            <TextField
-              type="number"
-              onChange={(e: any) => updateRunNumber(e.target.value)}
-              value={runNumber === null ? '' : runNumber}
-            />
-          ) : (
-            <Typography variant="body1" style={d.styles}>
-              {d.value}
-            </Typography>
-          )}
-        </Box>
-      ))}
+      <Grid container>
+        {patientDetails.map((d: PatientDetail) => (
+          <Grid container direction="row" key={d.label}>
+            <Grid item xs={5} style={{ marginBottom: '24px' }}>
+              <Typography
+                variant="body2"
+                color="textSecondary"
+                className={classes.label}
+              >
+                {`${d.label}:`}
+              </Typography>
+            </Grid>
+            <Grid item xs={7}>
+              {d.label === 'Run Number' ? (
+                <TextField
+                  type="number"
+                  onChange={(e: any) => updateRunNumber(e.target.value)}
+                  value={runNumber === null ? '' : runNumber}
+                />
+              ) : (
+                <Typography variant="body1" style={d.styles}>
+                  {d.value}
+                </Typography>
+              )}
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
       <Box display="flex" flexDirection="column" marginBottom="12px">
         <Typography
           variant="body2"

src/components/CCPDashboard/PatientInfoTable.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import { useHistory } from 'react-router-dom';
 import clsx from 'clsx';
 import {
@@ -36,7 +35,7 @@ import ConfirmModal from '../common/ConfirmModal';
 import { CCPDashboardTabOptions, CCPDashboardTabMap } from './CCPDashboardPage';
 import { EDIT_PATIENT, DELETE_PATIENT } from '../../graphql/mutations/patients';
 import { PatientDetailsDialog } from './PatientDetailsDialog';
-import { capitalize } from '../../utils/format';
+import { capitalize, formatLastUpdated } from '../../utils/format';
 
 const useStyles = makeStyles({
   visuallyHidden: {
@@ -103,7 +102,8 @@ const EnhancedTableHead = (props: EnhancedTableProps) => {
             sortDirection={orderBy === headCell.headerId ? order : false}
             width={headCell.width}
             style={{
-              minWidth: headCell.width,
+              width: headCell.width,
+              maxWidth: headCell.width,
               ...(index === 0 && { borderLeft: '16px hidden' }),
             }}
           >
@@ -127,6 +127,13 @@ const EnhancedTableHead = (props: EnhancedTableProps) => {
   );
 };
 
+export const statusLabels = {
+  [Status.ON_SITE]: 'On Scene',
+  [Status.TRANSPORTED]: 'Transported',
+  [Status.RELEASED]: 'Released',
+  [Status.DELETED]: 'Deleted',
+};
+
 export const PatientInfoTable = ({
   patients,
   type,
@@ -186,13 +193,6 @@ export const PatientInfoTable = ({
     },
   };
 
-  const statusLabels = {
-    [Status.ON_SITE]: 'On Scene',
-    [Status.TRANSPORTED]: 'Transported',
-    [Status.RELEASED]: 'Released',
-    [Status.DELETED]: 'Deleted',
-  };
-
   const [editPatient] = useMutation(EDIT_PATIENT, {
     update(cache): void {
       const patientId = ((selectedPatient as unknown) as Patient).id;
@@ -209,8 +209,9 @@ export const PatientInfoTable = ({
   const headCells: HeadCell[] = [
     { headerId: 'triageLevel', label: 'Triage', width: '78px' },
     { headerId: 'barcodeValue', label: 'Barcode', width: '94px' },
-    { headerId: 'gender', label: 'Gender', width: '72px' },
+    { headerId: 'gender', label: 'Gender', width: '62px' },
     { headerId: 'age', label: 'Age', width: '34px' },
+    { headerId: 'ctas', label: 'CTAS', width: '46px' },
     { headerId: 'status', label: 'Status', width: '104px' },
     ...(type === CCPDashboardTabOptions.PatientOverview
       ? [
@@ -397,16 +398,19 @@ export const PatientInfoTable = ({
             case 'triageLevel':
               content = triageLevels[content].label;
               border = {
-                borderLeft: `${isActive ? '16px' : '0px'} solid ${
-                  triageLevels[patient.triageLevel].colour
+                borderLeft: `16px solid ${
+                  isActive
+                    ? triageLevels[patient.triageLevel].colour
+                    : Colours.White
                 }`,
               };
               break;
             case 'hospitalId.name':
               content = patient.hospitalId?.name;
               break;
             case 'updatedAt':
-              content = moment(patient[value]).format('MMM D YYYY, h:mm A');
+            case 'transportTime':
+              content = formatLastUpdated(patient[value], false);
               break;
             case 'status':
               content = statusLabels[patient[value]];

src/components/CCPDashboard/PatientOverview.tsx

@@ -39,12 +39,15 @@ const useStyles = makeStyles({
     display: 'flex',
     alignSelf: 'stretch',
   },
+  wideFullHeightGridItem: {
+    marginRight: '13px',
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
   categoryTableCard: {
     display: 'flex',
     alignItems: 'center',
-    paddingRight: '22px',
-    paddingLeft: '22px',
-    marginTop: '16px',
   },
   lightBorder: {
     borderColor: Colours.BackgroundGray,
@@ -59,6 +62,7 @@ const useStyles = makeStyles({
   patientTableCard: {
     marginTop: '24px',
     marginBottom: '145px',
+    width: '100%',
   },
   scanButton: {
     boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)',
@@ -104,13 +108,13 @@ export const PatientOverview = (props: PatientOverviewProps) => {
     });
 
   return (
-    <Grid container direction="row" justify="center" alignItems="center">
-      <Grid>
+    <Grid container direction="row" style={{ marginTop: '52px' }}>
+      <Grid className={classes.wideFullHeightGridItem}>
         <Grid item>
           <TotalPatientCard numPatients={patients.length} />
         </Grid>
         <Grid item>
-          <TriageCard patients={patients} styles={{ marginRight: '24px' }} />
+          <TriageCard patients={patients} />
         </Grid>
       </Grid>
       <Grid item className={classes.fullHeightGridItem}>

src/components/CCPDashboard/TotalPatientCard.tsx

@@ -4,9 +4,6 @@ import { Box, Typography, makeStyles, Card } from '@material-ui/core';
 const useStyles = makeStyles({
   card: {
     padding: '24px',
-    marginTop: '16px',
-    marginRight: '24px',
-    height: '100%',
   },
 });
 

src/components/CCPDashboard/TriageCard.tsx

@@ -7,8 +7,7 @@ import { TriageTag } from './TriageTag';
 const useStyles = makeStyles({
   card: {
     padding: '24px',
-    marginTop: '16px',
-    height: '100%',
+    marginTop: '24px',
   },
 });