Adding Out Patient Module

packages/esm-patient-visit-report-app/package.json → packages/esm-patient-visits-report-app/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@sjthc/esm-patient-visit-report-app",
+  "name": "@sjthc/esm-patient-visits-report-app",
   "version": "1.0.0",
   "license": "MPL-2.0",
-  "description": "Custom Patient list microfrontend for the OpenMRS SPA",
-  "browser": "dist/sjthc-esm-patient-visit-report-app.js",
+  "description": "Custom Patient Visits Reports microfrontend for the OpenMRS SPA",
+  "browser": "dist/sjthc-esm-patient-visits-report-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {

packages/esm-patient-visit-report-app/src/DashboardLink.tsx → packages/esm-patient-visits-report-app/src/DashboardLink.tsx

@@ -31,12 +31,12 @@ function DashboardExtension({
         navLink.match(name) && "active-left-nav-link"
       }`}
     >
-      {t("todayVisitsReports", "Today's Visit Reports")}
+      {t("outPatient", "Out Patient")}
     </ConfigurableLink>
   );
 }
 
-export const createVisitsDashboardLink =
+export const createDashboardLink =
   (dashboardLinkConfig: DashboardLinkConfig) => () =>
     (
       <BrowserRouter>

packages/esm-patient-visits-report-app/src/constants.ts

@@ -0,0 +1 @@
+export const moduleName = "@sjthc/esm-patient-visits-report-app";

packages/esm-patient-visits-report-app/src/dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const homeVisitsDashboardMeta = {
+  slot: "patients-visits-dashboard-slot",
+  path: "patients-visits-dashboard",
+  title: "OPD Visit's Reports",
+  name: "patients-visits-dashboard",
+};

packages/esm-patient-visit-report-app/src/home-dashboard/dashboard-card/dashboard-card.component.tsx → packages/esm-patient-visits-report-app/src/home-dashboard/dashboard-card/dashboard-card.component.tsx

@@ -7,6 +7,7 @@ import { ConfigurableLink } from "@openmrs/esm-framework";
 import styles from "../home-dashboard.scss";
 
 interface MetricsCardProps {
+  className?: string;
   label: string;
   value: number | string;
   headerLabel: string;
@@ -17,6 +18,7 @@ interface MetricsCardProps {
 }
 
 const MetricsCard: React.FC<MetricsCardProps> = ({
+  className,
   label,
   value,
   headerLabel,

packages/esm-patient-visit-report-app/src/home-dashboard/home-dashboard.component.tsx → packages/esm-patient-visits-report-app/src/home-dashboard/home-dashboard.component.tsx

@@ -13,11 +13,11 @@ import {
 import {usePatientList} from "../hooks/usePatientList";
 import DataTable from "react-data-table-component";
 
-type TodaysVisitHomeProps = {
+type PatientVisistsReportHomeProps = {
   patientUuid?: string;
 };
 
-const TodaysVisitHome: React.FC<TodaysVisitHomeProps> = () => {
+const PatientVisitsReportHome: React.FC<PatientVisistsReportHomeProps> = () => {
   const {t} = useTranslation();
 
   const {
@@ -45,8 +45,7 @@ const TodaysVisitHome: React.FC<TodaysVisitHomeProps> = () => {
             <div className={styles["left-justified-items"]}>
               <PatientQueueIllustration/>
               <div className={styles["page-labels"]}>
-                <p className={styles.title}>{t("patients", "Patients")}</p>
-                <p className={styles.subTitle}>{t("dashboard", "Dashboard")}</p>
+                <p className={styles.title}>{t("outPatient", "Out Patient")}</p>
               </div>
             </div>
           </div>
@@ -66,17 +65,23 @@ const TodaysVisitHome: React.FC<TodaysVisitHomeProps> = () => {
             <div className={styles["left-justified-items"]}>
               <PatientQueueIllustration/>
               <div className={styles["page-labels"]}>
-                <p className={styles.title}>{t("patients", "Patients")}</p>
-                <p className={styles.subTitle}>{t("dashboard", "Dashboard")}</p>
+                <p className={styles.title}>{t("outPatient", "Out Patient")}</p>
               </div>
             </div>
           </div>
+
+
           <div className={styles.homeContainer}>
-            <div
-              className={styles.cardContainer}
-              data-testid="registered-patients"
-            >
+          <div className={styles.cardContainerParent} data-testid="clinic-metrics">
+              <MetricsCard
+                className="metricsCard"
+                label={t("total", "Total")}
+                value={totalPatients.toString()}
+                headerLabel={t("registeredPatients", "Registered Patients")}
+                service="scheduled"
+              />
               <MetricsCard
+                className="metricsCard"
                 label={t("total", "Total")}
                 value={totalPatients.toString()}
                 headerLabel={t("registeredPatients", "Registered Patients")}
@@ -136,4 +141,4 @@ const TodaysVisitHome: React.FC<TodaysVisitHomeProps> = () => {
   );
 };
 
-export default TodaysVisitHome;
+export default PatientVisitsReportHome;

packages/esm-patient-visit-report-app/src/home-dashboard/home-dashboard.scss → packages/esm-patient-visits-report-app/src/home-dashboard/home-dashboard.scss

@@ -187,3 +187,16 @@ html[dir='rtl'] {
   width: 100%;
   border: 1px solid $ui-03;
 }
+
+.cardContainerParent {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.metricsCard {
+  width: 100%;
+  box-sizing: border-box;
+}

packages/esm-patient-visits-report-app/src/home-dashboard/patient-queue-illustration.component.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+const PatientQueueIllustration: React.FC = () => {
+  return (
+    <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+  >
+    <title>medical, medicine, healthcare, health, chart, edit, clipboard</title>
+    <rect
+      style={{ fill: "#dfe8f4" }}
+      x="8"
+      y="12.7"
+      width="32.73"
+      height="37.38"
+      rx="3.88"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M15.16,12.87H33.28a0,0,0,0,1,0,0v1.6a2.18,2.18,0,0,1-2.18,2.18H17.34a2.18,2.18,0,0,1-2.18-2.18v-1.6A0,0,0,0,1,15.16,12.87Z"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M31.1,10.69H28.87a2.48,2.48,0,0,1-2.14-1.31,2.72,2.72,0,0,0-4.73,0,2.46,2.46,0,0,1-2.13,1.31H17.64a2.26,2.26,0,0,0-2.48,2.18v.74a1.1,1.1,0,0,0,1.1,1.1H32.17a1.11,1.11,0,0,0,1.11-1.1v-.74A2.19,2.19,0,0,0,31.1,10.69Z"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M26.73,9.38a2.72,2.72,0,0,0-4.73,0,2.46,2.46,0,0,1-2.13,1.31h9A2.48,2.48,0,0,1,26.73,9.38Z"
+    />
+    <rect
+      style={{ fill: "#7BBCB9" }}
+      x="20.94"
+      y="19.88"
+      width="6.85"
+      height="14.93"
+      rx="0.51"
+    />
+    <rect
+      style={{ fill: "#7BBCB9" }}
+      x="20.94"
+      y="19.88"
+      width="6.85"
+      height="14.93"
+      rx="0.51"
+      transform="translate(51.71 2.98) rotate(90)"
+    />
+    <rect
+      style={{ fill: "#7BBCB9" }}
+      x="16.9"
+      y="37.43"
+      width="14.93"
+      height="1.1"
+    />
+    <rect
+      style={{ fill: "#7BBCB9" }}
+      x="16.9"
+      y="39.62"
+      width="14.93"
+      height="1.1"
+    />
+    <rect
+      style={{ fill: "#7BBCB9" }}
+      x="16.9"
+      y="41.81"
+      width="7.47"
+      height="1.1"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M39.31,49.69,54.66,34.34a4.91,4.91,0,0,0,1.27-4.75h0a4.91,4.91,0,0,0-3.47-3.47h0a4.92,4.92,0,0,0-4.74,1.27L32.37,42.74a18.91,18.91,0,0,0-4.23,6.46l-2,5.11a1.23,1.23,0,0,0,1.6,1.6l5.11-2A18.74,18.74,0,0,0,39.31,49.69Z"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M55.93,29.59a4.91,4.91,0,0,0-3.47-3.47h0a4.92,4.92,0,0,0-4.74,1.27l-4.95,5a4.91,4.91,0,1,1,6.95,6.94l4.94-4.94A4.91,4.91,0,0,0,55.93,29.59Z"
+    />
+    <path
+      style={{ fill: "#7BBCB9" }}
+      d="M27.74,55.91,31,54.63a.3.3,0,0,0,0-.1,4.9,4.9,0,0,0-3.47-3.48l-.1,0-1.29,3.28A1.23,1.23,0,0,0,27.74,55.91Z"
+    />
+  </svg>
+  );
+};
+
+export default PatientQueueIllustration;

packages/esm-patient-visit-report-app/src/index.ts → packages/esm-patient-visits-report-app/src/index.ts

@@ -6,10 +6,10 @@ import {
 import { moduleName } from "./constants";
 import { configSchema } from "./config-schema";
 import { homeVisitsDashboardMeta } from "./dashboard.meta";
-import { createVisitsDashboardLink as createVisitsHomeDashboardLink } from "./DashboardLink";
+import { createDashboardLink as createHomeDashboardLink } from "./DashboardLink";
 
 const options = {
-  featureName: "esm-patient-visit-report-app",
+  featureName: "esm-patient-visits-report-app",
   moduleName,
 };
 
@@ -29,7 +29,7 @@ export const rootHome = getAsyncLifecycle(
   options
 );
 
-export const homeTodayVisitsLink = getSyncLifecycle(
-  createVisitsHomeDashboardLink(homeVisitsDashboardMeta),
+export const homePatientRegisterationLink = getSyncLifecycle(
+  createHomeDashboardLink(homeVisitsDashboardMeta),
   options
 );

packages/esm-patient-visit-report-app/src/root.component.tsx → packages/esm-patient-visits-report-app/src/root.component.tsx

@@ -1,21 +1,21 @@
 import React from "react";
 import { SWRConfig } from "swr";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import TodaysVisitHome from "./home-dashboard/home-dashboard.component";
+import PatientVisitsReportHome from "./home-dashboard/home-dashboard.component";
 
 const swrConfiguration = {
   errorRetryCount: 3,
 };
 
 const RootComponent: React.FC = () => {
-  const baseName = window.getOpenmrsSpaBase() + "home/today-visits-reports";
+  const baseName = window.getOpenmrsSpaBase() + "home/patients-visits-dashboard";
 
   return (
     <main>
       <SWRConfig value={swrConfiguration}>
         <BrowserRouter basename={baseName}>
           <Routes>
-            <Route path="/" element={<TodaysVisitHome />} />
+            <Route path="/" element={<PatientVisitsReportHome />} />
           </Routes>
         </BrowserRouter>
       </SWRConfig>

packages/esm-patient-visit-report-app/src/routes.json → packages/esm-patient-visits-report-app/src/routes.json

@@ -2,21 +2,21 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "extensions": [
     {
-      "name": "home-today-visits-dashboard-link",
-      "component": "homeTodayVisitsLink",
+      "name": "home-visits-report-dashboard-link",
+      "component": "homePatientRegisterationLink",
       "slot": "homepage-dashboard-slot",
       "order": 0,
       "meta": {
-        "name": "patient-visit-report",
-        "slot": "patients-visit-report-dashboard-slot",
-        "title": "Today's Visits Reports"
+        "name": "patients-visits-dashboard",
+        "slot": "patients-visits-dashboard-slot",
+        "title": "OPD Visit's Reports"
       },
       "online": true,
       "offline": true
     },
     {
       "name": "root-visits-report-dashboard",
-      "slot": "patients-visit-report-dashboard-slot",
+      "slot": "patients-visits-dashboard-slot",
       "component": "rootHome"
     }
   ],