Moving User Dashboard to Health Exchnage

package.json

@@ -93,11 +93,16 @@
         "jest-cli": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "openmrs": "next",
+        "plotly.js": "^2.24.3",
         "prettier": "^2.8.8",
         "pretty-quick": "^3.1.3",
+        "raw-loader": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-grid-layout": "^1.4.1",
         "react-i18next": "^11.18.6",
+        "react-pivottable": "^0.11.0",
+        "react-plotly.js": "^2.0.0",
         "react-router-dom": "^6.14.1",
         "rxjs": "^6.6.7",
         "swc-loader": "^0.2.3",
@@ -107,4 +112,4 @@
         "webpack-cli": "^5.1.4"
     },
     "packageManager": "[email protected]"
-}
+}

src/declarations.d.ts

@@ -36,7 +36,7 @@
   urlUserName?: string;
   urlPassword?: string;
   links?: Array<link>;
   actions: any;
 };
 
 declare type exchangeProfile = {
@@ -81,7 +81,7 @@
   statusCode?: string;
   dateCreated?: string;
   comment?: string;
   actions?: any;
   patientUuid?: string;
 };
 
@@ -110,3 +110,50 @@
   group: string;
   value: number;
 }>;
+
+declare type Report = {
+  id: string;
+  label: string;
+};
+
+declare type ReportProps = {
+  categoryName: string;
+  reports: Array<Report>;
+};
+
+declare type Indicator = {
+  id: string;
+  label: string;
+  type?: string;
+  attributes?: Array<IndicatorItem>;
+};
+
+declare type IndicatorItem = {
+  id: string;
+  label: string;
+  type?: string;
+};
+
+declare type ReportParamItem = {
+  label: string;
+  type?: string;
+  expression: string;
+};
+
+type savedReport = {
+  id: string;
+  label: string;
+  description: string;
+  type: string;
+  columns: string;
+  rows: string;
+  aggregator: string;
+  report_request_object: string;
+};
+
+type savedDashboard = {
+  uuid: string;
+  name: string;
+  description: string;
+  items: any;
+};

src/facility-metrics/helper-components/tab-builder.tsx

@@ -6,6 +6,7 @@ import HIEDashboard from "../hie-metrics/hie-dashboard.component";
 import styles from "./tab-builder.scss";
 import FacilityPerformance from "../performance/performance.component";
 import EntryStatistics from "../data-entry-statistics/data-entry-statistics.component";
+import UserDashboard from "../user-dashboard/user-dashboard.component";
 
 interface TabItem {
   name: string;
@@ -19,6 +20,10 @@ const TabBuilder: React.FC = () => {
       name: t("hie", "HIE Metrics"),
       component: <HIEDashboard />,
     },
+    {
+      name: t("userDashboard", "User Dashboard"),
+      component: <UserDashboard />,
+    },
     {
       name: t("performance", "Performance"),
       component: <FacilityPerformance />,

src/facility-metrics/user-dashboard/user-dasboard.scss

@@ -0,0 +1,137 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+@import '../../root.scss';
+@import '~@openmrs/esm-styleguide/src/vars';
+.createIcon {
+    padding: 1.0rem;
+    margin-right: 60px;
+}
+
+.iconButton {
+    width: 45px;
+    height: 40px;
+    background: lightgrey;
+    font-size: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-right: 30px;
+}
+
+.searchField {
+    width: 100%;
+    border: 0 !important;
+}
+
+.searchBox {
+    padding: 1.0rem;
+    width: 100%;
+    display: flex;
+    justify-content: left;
+    margin-left: 30px;
+}
+
+.cardContainer {
+    background-color: $ui-background;
+    display: flex;
+    justify-content: space-between;
+    padding: spacing.$spacing-05;
+}
+
+.sectionTitle {
+    @include type.type-style('heading-compact-02');
+    margin-bottom: spacing.$spacing-04;
+}
+
+.dashboardModal,
+.dashboardTabs {
+     :global(.cds--modal-container) {
+        min-width: 80%;
+        min-height: 80%;
+    }
+     :global(.pvtAxisContainer),
+     :global(.pvtRenderers),
+     :global(.pvtVals),
+     :global(.modebar-container) {
+        display: none;
+    }
+}
+
+.modalInput {
+    margin-bottom: spacing.$spacing-06;
+}
+
+.dashboardSection {
+    width: 80%;
+}
+
+.dashboardTabs {
+     :global(.cds--tabs) {
+        padding-left: 2rem;
+    }
+     :global(.cds--tab-content) {
+        padding-left: 1.5rem;
+    }
+}
+
+.layer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: spacing.$spacing-05;
+    margin: 2rem 1rem;
+    text-align: center;
+    border: 1px solid colors.$gray-20;
+}
+
+.tile {
+    margin: auto;
+}
+
+.content {
+    @include type.type-style("heading-compact-02");
+    color: colors.$gray-70;
+    margin-top: spacing.$spacing-05;
+    margin-bottom: spacing.$spacing-03;
+}
+
+.explainer {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+}
+
+.dropdownContainer {
+    margin: 2rem 0 2rem 0;
+}
+
+.dashboardChartContainer {
+    width: fit-content;
+    height: auto;
+    border: 1px solid #8080801f;
+    box-shadow: 0 0 1px 0 #999999fc;
+    margin-bottom: spacing.$spacing-06;
+    cursor: all-scroll;
+}
+
+.tabLabelWrapper {
+    display: flex;
+    align-items: center;
+     :global(.cds--btn--ghost) {
+        background-color: transparent;
+    }
+}
+
+.tabOverFlowMenu {
+    margin-left: -20px;
+}
+
+.tabHeaderText {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.dashboardItemTrash {
+    text-align: right;
+    margin: 5px;
+}

src/facility-metrics/user-dashboard/user-dashboard-illustration.component.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+const UserIllustration: React.FC = () => {
+  return (
+    <svg
+      width="100"
+      height="72"
+      viewBox="0 0 250 250"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <g>
+          <g>
+            <path
+              fill="#7BBCB9"
+              data-title="Layer 0"
+              d="M24.1,116.2v106.2h89.7h89.7V116.2V10h-89.7H24.1V116.2L24.1,116.2z M137.1,44.7c3.7,1.9,5.7,3.8,7.6,7.3c1.7,2.9,1.8,3.6,1.8,8.9v5.7l5.8,3.5l5.8,3.5l2.7-1.6c2.4-1.3,3.5-1.5,7.8-1.5c5.7,0,8.4,1.1,12.1,4.7c3.7,3.7,4.7,6.4,4.7,12.1s-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-4.5,0-5.4-0.2-8.1-1.8c-3.5-1.9-5.4-3.9-7.4-7.6c-1.1-2-1.3-3.4-1.3-8.1l0.1-5.6l-5.8-3.6l-5.9-3.5l-2.6,1.5c-1.7,0.9-4,1.5-6.3,1.8l-3.7,0.3l-7.5,12.4l-7.5,12.4l1.7,2.1c3.3,4.2,3.9,5.9,3.9,11.3c0,5.7-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-5.7,0-8.4-1.1-12.1-4.7c-3.7-3.8-4.7-6.4-4.7-12.5v-5.3l-5.8-4l-5.8-4l-2.4,1.1c-3.7,1.7-11.1,1.5-14.4-0.2c-3.2-1.7-6.3-4.8-8-8c-1.1-2-1.4-3.4-1.4-7.5c0-4.5,0.2-5.4,1.8-8.1c1.9-3.5,3.9-5.4,7.6-7.4c1.9-1,3.4-1.3,7.4-1.3c5.7,0,8.4,1.1,12.1,4.7c3.4,3.5,4.7,6.4,4.7,11.5c0,2.4-0.2,5.2-0.5,6.3c-0.5,1.8-0.4,1.9,4.9,5.5l5.4,3.7l2.9-1.6c1.9-1,4.3-1.7,6.8-1.9l3.9-0.4l7.3-12.1c4.7-7.7,7.2-12.3,6.8-12.8c-0.2-0.4-1.2-1.8-2.1-3.1c-6.8-9.5-2.8-22.2,8.3-26.4C127.4,42.7,134,43.1,137.1,44.7z M161,156.3v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V156.3z M161,184.6v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V184.6z"
+            />
+            <path
+              fill="#7BBCB9"
+              data-title="Layer 1"
+              d="M208.2,38.3V43h7.1h7.1v96.8v96.8h-80.2H61.8v-4.7v-4.7h-4.7h-4.7v9.4v9.4h89.4h89.4v-38.5c0-21.1,0.2-68.9,0.4-106.2l0.4-67.7h-11.9h-11.9V38.3z"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default UserIllustration;