added postfestival summary components (#73)

Problem
Postfestival summary page requires components to be built.

Solution
- Added components to the postfestival summary page acording to the
design.
- Currently the components use mock data and will be updated to use
real data once the backend is ready.
- Layout and responsiveness of the page will be updated once actual data
is available.
- Patient Encounters by Acuity chart requires a library to be selected
and installed.
- http://localhost:3000/medical/dashboards/postevent-summary

Ticket URL
N/A

Documentation
N/A

Tests Run
- Navigated to page and verified that components are displayed.

app/web/components/dashboard/ChiefComplaintCountsTable.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+import { DataGrid, GridSortItem } from "@mui/x-data-grid";
+import { Box, Typography, Paper } from "@mui/material";
+import { ChiefComplaintCountsTableProps } from "../../interfaces/ChiefComplaintCountsTableProps";
+
+/**
+ * Represents the Chief Complaint Counts table
+ * 
+ * @param props The props for the Chief Complaint Counts table
+ * 
+ * @returns The ChiefComplaintCountsTable component
+ */
+export const ChiefComplaintCountsTable = ({ rows }: ChiefComplaintCountsTableProps) => {
+
+    const [totalChiefComplaint, setTotalChiefComplaint] = useState(0);
+
+    useEffect(() => {
+        setTotalChiefComplaint(rows.reduce((total, row) => total + row.total_count, 0));
+    }, [rows]);
+
+    const showPagination = rows.length > 17;
+
+    return (
+        <Paper
+            elevation={0}
+            sx={{
+                height: 1000,
+                width: 800,
+                "& .MuiDataGrid-columnHeaders": {
+                    backgroundColor: "#0073e6",
+                    color: "white",
+                    fontSize: "1.1rem",
+                    fontWeight: "bold",
+                },
+                "& .MuiDataGrid-row:nth-of-type(odd)": {
+                    backgroundColor: "#eff7fa",
+                },
+                "& .MuiDataGrid-row:nth-of-type(even)": {
+                    backgroundColor: "#ffffff",
+                },
+                "& .MuiDataGrid-columnHeaderTitle": {
+                    whiteSpace: "normal",
+                    lineHeight: "normal",
+                    wordBreak: "break-word",
+                },
+                "& .MuiDataGrid-footerContainer": {
+                    borderTop: "none",
+                },
+            }}
+        >
+            <Typography variant="h5">Chief Complaint Counts</Typography>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                pageSize={18}
+                rowsPerPageOptions={[18]}
+                sortModel={sortModel}
+                paginationMode={showPagination ? "server" : "client"}
+            />
+            <Box sx={{ textAlign: "center", marginTop: "1rem", marginBottom: "1rem", padding: "10px, 0px, 10px, 0px" }}>
+                <Typography variant="body1">Total Chief Complaints: {totalChiefComplaint}</Typography>
+            </Box>
+        </Paper>
+    )
+
+};
+
+/**
+ * The columns for the Chief Complaint Counts table
+ */
+const columns = [
+    { field: "chief_complaint", headerName: "Chief Complaint", flex: 1.25 },
+    { field: "total_count", headerName: "Total Count", flex: 0.5 },
+    { field: "prec_of_patient_encounters", headerName: "% of Patient Encounters", flex: 0.75 },
+    { field: "exclusive_cc_count", headerName: "Exclusive CC Count", flex: 0.75 },
+    { field: "co_occuring_cc_count", headerName: "Co-Occuring CC Count", flex: 0.75 },
+];
+
+/**
+ * The sort model for the Chief Complaint Counts table
+ */
+const sortModel: GridSortItem[] = [
+    {
+        field: "total_count",
+        sort: "desc",
+    },
+];

app/web/components/dashboard/ChiefComplaintEncounterCountsTable.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
+import { ChiefComplaintEncounterCountsTableProps } from "../../interfaces/ChiefComplaintEncounterCountsTableProps";
+
+
+/**
+ * Represents the table for the chief complaint encounter counts.
+ * 
+ * @param props The props for the component
+ * 
+ * @returns The ChiefComplaintEncounterCountsTable component
+ */
+export const ChiefComplaintEncounterCountsTable: React.FC<ChiefComplaintEncounterCountsTableProps> = ({ encounterCounts }) => {
+
+    const rows = [
+        { numberOfComplaints: "1", numberOfEncounters: encounterCounts[0] },
+        { numberOfComplaints: "2", numberOfEncounters: encounterCounts[1] },
+        { numberOfComplaints: "3", numberOfEncounters: encounterCounts[2] },
+        { numberOfComplaints: ">3", numberOfEncounters: encounterCounts[3] },
+    ]
+
+    return (
+        <TableContainer component={Paper}>
+            <Table sx={{ minWidth: 50 }} aria-label="simple table">
+                <TableHead>
+                    <TableRow>
+                        <TableCell colSpan={2} align="center">Chief Complaints across Patient Encounters</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell># of Complaints</TableCell>
+                        <TableCell align="right"># of Encounters</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow
+                            key={row.numberOfComplaints}
+                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                        >
+                            <TableCell component="th" scope="row" align="center">
+                                {row.numberOfComplaints}
+                            </TableCell>
+                            <TableCell align="center">{row.numberOfEncounters}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    )
+};

app/web/components/dashboard/CommonPresentationsTable.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Table, TableBody, TableCell, TableContainer, TableRow, Paper, Typography } from "@mui/material";
+import { CommonPresentationsTableProps } from "../../interfaces/CommonPresentationsTableProps";
+
+/**
+ * Represents the table for the common presentations.
+ * 
+ * @param props The props for the component
+ * 
+ * @returns The CommonPresentationsTable component
+ */
+export const CommonPresentationsTable = (props: CommonPresentationsTableProps) => {
+
+    const { commonPresentationsData } = props;
+    const { rows, totals, headerName, backgroundColor, textColor } = commonPresentationsData;
+    return (
+        <TableContainer component={Paper} sx={{ margin: "16px 0", bgcolor: backgroundColor }}>
+            <Typography variant="h6" sx={{ margin: "8px", color: textColor }}>{headerName}</Typography>
+            <Table>
+                <TableBody>
+                    {rows.map((item, index) => (
+                        <TableRow key={index} sx={{ color: textColor }}>
+                            <TableCell sx={{ color: textColor, borderBottom: "none" }}>{item.complaint}</TableCell>
+                            <TableCell align="right" sx={{ color: textColor, borderBottom: "none" }}>{item.count}</TableCell>
+                        </TableRow>
+                    ))}
+                    <TableRow sx={{ color: textColor }}>
+                        <TableCell sx={{ color: textColor, borderBottom: "none" }}>Total</TableCell>
+                        <TableCell align="right" sx={{ color: textColor, borderBottom: "none" }}>{totals.totalCount}/{totals.outOf}</TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};

app/web/components/dashboard/LengthOfStayCountsTable.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
+import { LengthOfStayCountsTableProps } from "./LengthOfStayCountsTableProps";
+
+
+/**
+ * Represents the table for the length of stay counts.
+ * 
+ * @param props The props for the component
+ * 
+ * @returns The LengthOfStayCountsTable component
+ */
+export const LengthOfStayCountsTable: React.FC<LengthOfStayCountsTableProps> = (
+    { rows, summaryRows }: LengthOfStayCountsTableProps
+) => {
+
+    return (
+        <TableContainer component={Paper}>
+            <Table aria-label="customized table">
+                <TableHead>
+                    <TableRow>
+                        <TableCell align="center">Length of Stay</TableCell>
+                        <TableCell align="center">Total</TableCell>
+                        <TableCell align="center">Rd</TableCell>
+                        <TableCell align="center">Yw</TableCell>
+                        <TableCell align="center">Gr</TableCell>
+                        <TableCell align="center">Wh</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row, index) => (
+                        <TableRow key={index}>
+                            {row.map((cell, cellIndex) => (
+                                <TableCell key={cellIndex} align="center">
+                                    {cell}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                    {/* Quartiles Header */}
+                    <TableRow>
+                        <TableCell colSpan={6} align="left">Quartiles</TableCell>
+                    </TableRow>
+                    {/* Quantiles, Mean, etc. */}
+                    {summaryRows.map((row, index) => (
+                        <TableRow key={index}>
+                            {row.map((cell, cellIndex) => (
+                                <TableCell key={cellIndex} align="center">
+                                    {cell}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};

app/web/components/dashboard/LengthOfStayCountsTableProps.tsx

@@ -0,0 +1,4 @@
+export interface LengthOfStayCountsTableProps {
+    rows: (string | number)[][];
+    summaryRows: (string | number)[][];
+};

app/web/components/dashboard/PatientEncounterAcuityChart.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Box, Typography, Paper } from "@mui/material";
+
+
+/**
+ * Placeholder representing the Patient Encounter Acuity bar chart.
+ * TODO: This is a placeholder component. Replace with data viz compenent when library is selected.
+ * 
+ * 
+ * @returns The PatientEncounterAcuityBarChart component
+ */
+export const PatientEncounterAcuityBarChart = () => {
+
+    return (
+        <Paper elevation={3} sx={{ padding: "1rem", minHeight: "300px" }}>
+            <Typography variant="h5" gutterBottom>TODO: Patient Encounters by Acuity Placeholder</Typography>
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                    backgroundColor: "#e0e0e0",
+                }}
+            >
+                <Typography variant="subtitle1" color="textSecondary">
+                    TODO: Bar Chart Placeholder
+                </Typography>
+            </Box>
+        </Paper>
+    );
+};

app/web/components/dashboard/TopTenCommonPresentationsTable.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { TopTenCommonPresentationsTableProps } from "../../interfaces/TopTenCommonPresentationsTableProps";
+import { CommonPresentationsTable } from "./CommonPresentationsTable";
+
+
+/**
+ * Represents the tables for the top ten common presentations and transports.
+ * 
+ * @param props The props for the component
+ * 
+ * @returns The CommonPresentationsAndTransportsTables component
+ */
+export const CommonPresentationsAndTransportsTables = (props: TopTenCommonPresentationsTableProps) => {
+    const { commonPresentationsDataRed, transportsDataRed, commonPresentationsDataYellow, transportsDataYellow } = props;
+
+    return (
+        <>
+            <CommonPresentationsTable commonPresentationsData={commonPresentationsDataRed} />
+            <CommonPresentationsTable commonPresentationsData={transportsDataRed} />
+            <CommonPresentationsTable commonPresentationsData={commonPresentationsDataYellow} />
+            <CommonPresentationsTable commonPresentationsData={transportsDataYellow} />
+        </>
+    );
+};

app/web/components/dashboard/YearSelectionField.tsx

@@ -0,0 +1,20 @@
+import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
+import React from "react";
+
+
+/**
+ * Used to select a year for the dashboard.
+ * 
+ * @returns The YearSelectionField component
+ */
+export const YearSelectionField = () => {
+
+    return (
+        <FormControl fullWidth>
+            <InputLabel>Year</InputLabel>
+            <Select>
+                <MenuItem value={2023}>2023</MenuItem>
+            </Select>
+        </FormControl>
+    );
+};

app/web/interfaces/ChiefComplaintCountsTableProps.tsx

@@ -0,0 +1,12 @@
+export interface ChiefComplaintCountsTableRowData {
+    id: number;
+    chief_complaint: string;
+    total_count: number;
+    prec_of_patient_encounters: number;
+    exclusive_cc_count: number;
+    co_occuring_cc_count: number;
+};
+
+export interface ChiefComplaintCountsTableProps {
+    rows: ChiefComplaintCountsTableRowData[];
+};

app/web/interfaces/ChiefComplaintEncounterCountsTableProps.tsx

@@ -0,0 +1,3 @@
+export interface ChiefComplaintEncounterCountsTableProps {
+    encounterCounts: number[];
+};

app/web/interfaces/CommonPresentationsTableProps.tsx

@@ -0,0 +1,5 @@
+import { PresentationGroup } from "./PresentationGroup";
+
+export interface CommonPresentationsTableProps {
+    commonPresentationsData: PresentationGroup;
+};

app/web/interfaces/PresentationGroup.tsx

@@ -0,0 +1,17 @@
+export interface ComplaintData {
+    complaint: string;
+    count: number;
+};
+
+export interface TotalOutOfData {
+    totalCount: number;
+    outOf: number;
+};
+
+export interface PresentationGroup {
+    rows: ComplaintData[];
+    totals: TotalOutOfData;
+    headerName: string;
+    backgroundColor: string;
+    textColor: string;
+};

app/web/interfaces/TopTenCommonPresentationsTableProps.tsx

@@ -0,0 +1,8 @@
+import { PresentationGroup } from "./PresentationGroup";
+
+export interface TopTenCommonPresentationsTableProps {
+    commonPresentationsDataRed: PresentationGroup;
+    transportsDataRed: PresentationGroup;
+    commonPresentationsDataYellow: PresentationGroup;
+    transportsDataYellow: PresentationGroup;
+};