diff --git a/containers/ecr-viewer/src/app/components/EcrTable.tsx b/containers/ecr-viewer/src/app/components/EcrTable.tsx
index 91144ec262..e0025bbe14 100644
--- a/containers/ecr-viewer/src/app/components/EcrTable.tsx
+++ b/containers/ecr-viewer/src/app/components/EcrTable.tsx
@@ -1,5 +1,6 @@
import { Table } from "@trussworks/react-uswds";
import { EcrDisplay, listEcrData } from "@/app/api/services/listEcrDataService";
+import { toSentenceCase } from "@/app/services/formatService";
const basePath =
process.env.NODE_ENV === "production" ? process.env.NEXT_PUBLIC_BASEPATH : "";
@@ -68,22 +69,76 @@ const EcrTable = async ({
*/
const renderListEcrTableData = (listFhirData: EcrDisplay[]) => {
return listFhirData.map((item, index) => {
- return (
-
-
-
- {item.patient_first_name} {item.patient_last_name}
-
-
- {"DOB: " + item.patient_date_of_birth || ""}
- |
- {item.date_created} |
- {item.patient_report_date} |
- {item.reportable_condition} |
- {item.rule_summary} |
-
- );
+ return formatRow(item, index);
});
};
+/**
+ * Formats a single row of the eCR table.
+ * @param item - The eCR data to be formatted.
+ * @param index - The index of the eCR data in the list.
+ * @returns A JSX table row element representing the eCR data.
+ */
+const formatRow = (item: EcrDisplay, index: number) => {
+ let patient_first_name = toSentenceCase(item.patient_first_name);
+ let patient_last_name = toSentenceCase(item.patient_last_name);
+ let createDateObj = new Date(item.date_created);
+ let createDateDate = formatDate(createDateObj);
+ let createDateTime = formatTime(createDateObj);
+ let patientReportDateObj = new Date(item.patient_report_date);
+ let patientReportDate = formatDate(patientReportDateObj);
+ let patientReportTime = formatTime(patientReportDateObj);
+
+ return (
+
+
+
+ {patient_first_name} {patient_last_name}
+
+
+ {"DOB: " + item.patient_date_of_birth || ""}
+ |
+
+ {createDateDate}
+
+ {createDateTime}
+ |
+
+ {patientReportDate}
+
+ {patientReportTime}
+ |
+ {item.reportable_condition} |
+ {item.rule_summary} |
+
+ );
+};
+
+/**
+ * Formats a date object to a string in the format MM/DD/YYYY.
+ * @param date - The date object to be formatted.
+ * @returns A string in the format MM/DD/YYYY.
+ */
+const formatDate = (date: Date) => {
+ return date.toLocaleDateString("en-US");
+};
+
+/**
+ * Formats a date object to a string in the format HH:MM AM/PM.
+ * @param date - The date object to be formatted.
+ * @returns A string in the format HH:MM AM/PM.
+ */
+const formatTime = (date: Date) => {
+ let hours = date.getHours();
+ const minutes = date.getMinutes();
+ const ampm = hours >= 12 ? "PM" : "AM";
+
+ hours = hours % 12;
+ hours = hours ? hours : 12;
+
+ const minutesStr = minutes < 10 ? `0${minutes}` : minutes;
+
+ return `${hours}:${minutesStr} ${ampm}`;
+};
+
export default EcrTable;
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap
index 440b93f1d3..3bc82515f6 100644
--- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap
+++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap
@@ -51,18 +51,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-1
+ First-1
- last-1
+ Last-1
- DOB: 2000-01-01
+
+ DOB: 2000-01-01
+
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
reportable-condition-1
@@ -76,18 +82,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-2
+ First-2
- last-2
+ Last-2
- DOB: 2000-01-02
+
+ DOB: 2000-01-02
+
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
reportable-condition-2
@@ -101,18 +113,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-3
+ First-3
- last-3
+ Last-3
- DOB: 2000-01-03
+
+ DOB: 2000-01-03
+
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
reportable-condition-3
@@ -126,18 +144,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-4
+ First-4
- last-4
+ Last-4
- DOB: 2000-01-04
+
+ DOB: 2000-01-04
+
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
reportable-condition-4
@@ -151,18 +175,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-5
+ First-5
- last-5
+ Last-5
- DOB: 2000-01-05
+
+ DOB: 2000-01-05
+
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
reportable-condition-5
@@ -176,18 +206,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-6
+ First-6
- last-6
+ Last-6
- DOB: 2000-01-06
+
+ DOB: 2000-01-06
+
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
reportable-condition-6
@@ -201,18 +237,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-7
+ First-7
- last-7
+ Last-7
- DOB: 2000-01-07
+
+ DOB: 2000-01-07
+
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
reportable-condition-7
@@ -226,18 +268,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-8
+ First-8
- last-8
+ Last-8
- DOB: 2000-01-08
+
+ DOB: 2000-01-08
+
|
- 2021-01-08
+ 1/7/2021
+
+ 7:00 PM
|
- 2021-01-08
+ 1/7/2021
+
+ 7:00 PM
|
reportable-condition-8
@@ -251,18 +299,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-9
+ First-9
- last-9
+ Last-9
- DOB: 2000-01-09
+
+ DOB: 2000-01-09
+
|
- 2021-01-09
+ 1/8/2021
+
+ 7:00 PM
|
- 2021-01-09
+ 1/8/2021
+
+ 7:00 PM
|
reportable-condition-9
@@ -276,18 +330,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-10
+ First-10
- last-10
+ Last-10
- DOB: 2000-01-01
+
+ DOB: 2000-01-01
+
|
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
reportable-condition-10
@@ -301,18 +361,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-11
+ First-11
- last-11
+ Last-11
- DOB: 2000-01-02
+
+ DOB: 2000-01-02
+
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
reportable-condition-11
@@ -326,18 +392,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-12
+ First-12
- last-12
+ Last-12
- DOB: 2000-01-03
+
+ DOB: 2000-01-03
+
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
reportable-condition-12
@@ -351,18 +423,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-13
+ First-13
- last-13
+ Last-13
- DOB: 2000-01-04
+
+ DOB: 2000-01-04
+
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
reportable-condition-13
@@ -376,18 +454,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-14
+ First-14
- last-14
+ Last-14
- DOB: 2000-01-05
+
+ DOB: 2000-01-05
+
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
reportable-condition-14
@@ -401,18 +485,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-15
+ First-15
- last-15
+ Last-15
- DOB: 2000-01-06
+
+ DOB: 2000-01-06
+
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
reportable-condition-15
@@ -426,18 +516,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-16
+ First-16
- last-16
+ Last-16
- DOB: 2000-01-07
+
+ DOB: 2000-01-07
+
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
reportable-condition-16
@@ -451,18 +547,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-17
+ First-17
- last-17
+ Last-17
- DOB: 2000-01-08
+
+ DOB: 2000-01-08
+
|
- 2021-01-08
+ 1/7/2021
+
+ 7:00 PM
|
- 2021-01-08
+ 1/7/2021
+
+ 7:00 PM
|
reportable-condition-17
@@ -476,18 +578,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-18
+ First-18
- last-18
+ Last-18
- DOB: 2000-01-09
+
+ DOB: 2000-01-09
+
|
- 2021-01-09
+ 1/8/2021
+
+ 7:00 PM
|
- 2021-01-09
+ 1/8/2021
+
+ 7:00 PM
|
reportable-condition-18
@@ -501,18 +609,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-19
+ First-19
- last-19
+ Last-19
- DOB: 2000-01-01
+
+ DOB: 2000-01-01
+
|
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
- 2021-01-01
+ 12/31/2020
+
+ 7:00 PM
|
reportable-condition-19
@@ -526,18 +640,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-20
+ First-20
- last-20
+ Last-20
- DOB: 2000-01-02
+
+ DOB: 2000-01-02
+
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
- 2021-01-02
+ 1/1/2021
+
+ 7:00 PM
|
reportable-condition-20
@@ -551,18 +671,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-21
+ First-21
- last-21
+ Last-21
- DOB: 2000-01-03
+
+ DOB: 2000-01-03
+
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
- 2021-01-03
+ 1/2/2021
+
+ 7:00 PM
|
reportable-condition-21
@@ -576,18 +702,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-22
+ First-22
- last-22
+ Last-22
- DOB: 2000-01-04
+
+ DOB: 2000-01-04
+
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
- 2021-01-04
+ 1/3/2021
+
+ 7:00 PM
|
reportable-condition-22
@@ -601,18 +733,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-23
+ First-23
- last-23
+ Last-23
- DOB: 2000-01-05
+
+ DOB: 2000-01-05
+
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
- 2021-01-05
+ 1/4/2021
+
+ 7:00 PM
|
reportable-condition-23
@@ -626,18 +764,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-24
+ First-24
- last-24
+ Last-24
- DOB: 2000-01-06
+
+ DOB: 2000-01-06
+
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
- 2021-01-06
+ 1/5/2021
+
+ 7:00 PM
|
reportable-condition-24
@@ -651,18 +795,24 @@ exports[`EcrTable should match snapshot 1`] = `
- first-25
+ First-25
- last-25
+ Last-25
- DOB: 2000-01-07
+
+ DOB: 2000-01-07
+
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
- 2021-01-07
+ 1/6/2021
+
+ 7:00 PM
|
reportable-condition-25
diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss
index c5bf1ee03f..8f8b2f89bd 100644
--- a/containers/ecr-viewer/src/styles/custom-styles.scss
+++ b/containers/ecr-viewer/src/styles/custom-styles.scss
@@ -152,6 +152,24 @@ h4 {
.table-ecr-library {
font-size: 1rem;
border-collapse: separate;
+ font-family: "Source Sans Pro Web";
+
+ a {
+ color: var(--Primary-primary, #005EA2);
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 700;
+ }
+
+ a, u {
+ text-decoration: none;
+ }
+
+ tbody tr td div {
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ }
&.usa-table--striped tbody tr:nth-child(odd) td {
background-color: white;
|