Feat/set up billing esm

IntelliSOFT-Consulting · Nov 18, 2024 · d060180 · d060180
2 parents 61af2a1 + ab2c63c
commit d060180
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 deletions.
diff --git a/packages/esm-billing-app/package.json b/packages/esm-billing-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ehospital/esm-billing-app",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Billing frontend module for use in O3",
   "browser": "dist/ehospital-esm-billing-app.js",
   "main": "src/index.ts",
@@ -120,5 +120,5 @@
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
   },
   "packageManager": "[email protected]",
-  "gitHead": "3da8e933011df5e2d58ecc9e184c9e89119bf91b"
+  "gitHead": "5423ece3ee2d68371f78ff585003c794a97b9b8a"
 }
diff --git a/packages/esm-billing-app/src/index.ts b/packages/esm-billing-app/src/index.ts
@@ -1,5 +1,5 @@
 import { configSchema } from './config-schema';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { createLeftPanelLink } from './left-panel-link.component';
 import { dashboardMeta } from './dashboard.meta';
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, registerFeatureFlag } from '@openmrs/esm-framework';
@@ -26,13 +26,12 @@ registerFeatureFlag(
   'This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features',
 );
 
-// t('billing', 'Billing')
 export const billingDashboardLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'billing',
-    title: 'Billing',
+    name: "billing",
+    title: "Billing Overview",
   }),
-  options,
+  options
 );
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');

diff --git a/packages/esm-billing-app/src/root.component.tsx b/packages/esm-billing-app/src/root.component.tsx
@@ -1,17 +1,39 @@
-import React from 'react';
+import React,{useEffect} from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
 import Invoice from './invoice/invoice.component';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './root.scss';
+import { SideNav } from '@carbon/react';
+import { SideNavItems } from '@carbon/react';
+import { SideNavLink } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 
 const RootComponent: React.FC = () => {
-  const baseName = window.getOpenmrsSpaBase() + 'home/billing';
+  const basePath = `${window.spaBase}/billing`;
+  const { t } = useTranslation();
+
+  const handleNavigation = (path: string) => {
+    navigate({ to: `${basePath}/${path}` });
+  };
 
   return (
-    <BrowserRouter basename={baseName}>
-      <Routes>
-        <Route path="/" element={<BillingDashboard />} />
-        <Route path="/patient/:patientUuid/:billUuid" element={<Invoice />} />
-      </Routes>
+    <BrowserRouter basename={basePath}>
+      <main className={styles.container}>
+      <section>
+          <SideNav>
+            <SideNavItems>
+              <SideNavLink onClick={() => handleNavigation('')} isActive>
+                {t('billingOverview', 'Billing Overview')}
+              </SideNavLink>
+            </SideNavItems>
+          </SideNav>
+        </section>
+        <Routes>
+          <Route path="/" element={<BillingDashboard />} />
+          <Route path="/patient/:patientUuid/:billUuid" element={<Invoice />} />
+        </Routes>
+      </main>
     </BrowserRouter>
   );
 };

diff --git a/packages/esm-billing-app/src/root.scss b/packages/esm-billing-app/src/root.scss
@@ -0,0 +1,12 @@
+@use '@carbon/colors';
+@use "@carbon/type";
+
+
+.container {
+    background-color: colors.$white-0;
+    height: calc(100vh - 3rem);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+    margin-left: var(--omrs-sidenav-width);
+}
diff --git a/packages/esm-billing-app/src/routes.json b/packages/esm-billing-app/src/routes.json
@@ -8,24 +8,18 @@
     {
       "component": "billableServicesHome",
       "route":"billable-services"
+    },
+    {
+      "component": "root",
+      "route": "billing"
     }
   ],
   "extensions": [
     {
       "component": "billingDashboardLink",
-      "name": "billing-dashboard-link",
-      "slot": "homepage-dashboard-slot",
-      "meta": {
-        "name": "billing",
-        "title": "billing",
-        "slot": "billing-dashboard-slot"
-      },
-      "featureFlag": "billing"
-    },
-    {
-      "component": "root",
-      "name": "billing-dashboard-root",
-      "slot": "billing-dashboard-slot"
+      "name": "billing-left-panel-link",
+      "slot": "billing-left-panel-slot",
+      "order": 0
     },
     {
       "name": "billing-patient-summary",