Add dummy data for summary cards

UCSF-IGHS · Jul 16, 2024 · 2c1df7f · 2c1df7f
1 parent ee15b23
commit 2c1df7f
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 22 deletions.
diff --git a/src/common.scss b/src/common.scss
@@ -1,4 +1,7 @@
 @use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
 @import './root.scss';
 
 // .widgetContainer {
@@ -36,3 +39,63 @@
 .hivStatusTag {
   min-width: 80px;
 }
+
+.title {
+  @extend .productiveHeading03;
+}
+
+.cardTitle {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+}
+
+.cardTitle>h4:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  // border-bottom: 0.375rem solid $brand-teal-01;
+}
+
+.tile {
+  height: 100%;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  border: solid 1px #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: #ffffff;
+}
+
+.tileTitle {
+  @include type.type-style('label-01');
+  display: block;
+}
+
+.tileValue {
+  display: block;
+  font-size: 20px;
+  line-height: 1.29;
+  color: #161616;
+  display: block;
+  margin: 15px 65px 24px 0;
+}
+
+.tileBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.tileBoxColumn {
+  flex: 1 1 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 1rem;
+}
+
+
+
diff --git a/src/config-schema.ts b/src/config-schema.ts
@@ -11,6 +11,7 @@ export const configSchema = {
       oiEncounterType: "2dc31190-cf0e-4ab0-a5a1-6ad601d6ecc0",
       imageEncounterType: "74bf4fe6-8fdb-4228-be39-680a93a9cf6d",
       problemEncounterType: "2dc31190-cf0e-4ab0-a5a1-6ad601d6ecc0",
+      adultReturnEncountertype: "8d5b2be0-c2cc-11de-8d13-0010c6dffd0f",
     },
   },
   obsConcepts: {
@@ -32,11 +33,10 @@ export const configSchema = {
       whoStageConcept: "3cdb3b02-26fe-102b-80cb-0017a47871b2",
       criteriaConcept: "3ce6d5fc-26fe-102b-80cb-0017a47871b2",
       imageOrderedConcept: "3cd937e4-26fe-102b-80cb-0017a47871b2",
-      oiConcept: "",
-      programStatusConcept: "",
-      viralLoadConcept: "",
+      oiConcept: "0ae23a5a-15f5-102d-96e4-000c29c2a5d7",
+      viralLoadConcept: "	3cd4a882-26fe-102b-80cb-0017a47871b2",
       vlReasonConcept: "",
-      lastCd4CountConcept: "",
+      lastCd4CountConcept: "3ceda710-26fe-102b-80cb-0017a47871b2",
       artCohortConcept: "",
       currentRegimenConcept: "",
       dsdModelConcept: "",

diff --git a/src/patient-summary/patient-summary-config.json b/src/patient-summary/patient-summary-config.json
@@ -11,31 +11,31 @@
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "artCohortConcept"
+          "concept": "15 - May - 2024"
         },
         {
           "id": "currentRegimen",
           "title": "Current Regimen",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "currentRegimenConcept"
+          "concept": "ABC + 3TC + ATVr"
         },
         {
           "id": "dsdModel",
           "title": "DSD Model",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "dsdModelConcept"
+          "concept": "Community medication distribution"
         },
         {
           "id": "populationType",
           "title": "Population Type",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "populationTypeConcept"
+          "concept": "General Population"
         }
       ]
     },
@@ -49,23 +49,23 @@
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "viralLoadConcept"
+          "concept": "Undetected"
         },
         {
           "id": "vlReason",
           "title": "Reason For Current VL",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "vlReasonConcept"
+          "concept": "Routine"
         },
         {
           "id": "lastCd4Count",
           "title": "Last Cd4 Count",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "lastCd4CountConcept"
+          "concept": "252"
         }
       ]
     },
@@ -79,15 +79,15 @@
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "tbScreeningConcept"
+          "concept": "Positive"
         },
         {
           "id": "oi",
           "title": "Opportunistic Infections",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "oiConcept"
+          "concept": "None"
         },
         {
           "id": "nextVisit",
@@ -96,15 +96,15 @@
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "nextVisitConcept"
+          "concept": "2024-09-01"
         },
         {
           "id": "programStatus",
           "title": "Program Status",
           "encounterTypes": [
             "visitEncounterType"
           ],
-          "concept": "programStatusConcept"
+          "concept": "Active"
         }
       ]
     }

diff --git a/src/patient-summary/patient-summary.component.tsx b/src/patient-summary/patient-summary.component.tsx
@@ -6,6 +6,8 @@ import {
   getSummaryCardProps,
   SummaryCard,
 } from "@ohri/openmrs-esm-ohri-commons-lib";
+import { Tile } from "@carbon/react";
+import { CardHeader } from "@openmrs/esm-patient-common-lib";
 
 interface PatientSummaryProps {
   patientUuid: string;
@@ -17,13 +19,18 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
 
   return (
     <div className={styles.tabContainer}>
-      {cards.map((cardContent) => (
-        <SummaryCard
-          key={cardContent.cardId}
-          headerTitle={cardContent.cardTitle}
-          patientUuid={patientUuid}
-          columns={getSummaryCardProps(cardContent, config)}
-        />
+      {cards.map((card) => (
+        <Tile key={card.cardId} className={styles.tile}>
+          <CardHeader title={card.cardTitle}> </CardHeader>
+          <div className={styles.tileBox}>
+            {card.columns.map((column) => (
+              <div key={column.id} className={styles.tileBoxColumn}>
+                <span className={styles.tileTitle}>{column.title}</span>
+                <span className={styles.tileValue}>{column.concept}</span>
+              </div>
+            ))}
+          </div>
+        </Tile>
       ))}
     </div>
   );

diff --git a/src/root.scss b/src/root.scss
@@ -13,3 +13,15 @@
 .explainer {
   margin-bottom: 2rem;
 }
+
+.productiveHeading01 {
+  @include type.type-style("heading-compact-01");
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-compact-02");
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+}