@digihmis/esm-home-app 1.0.0

package/src/index.ts

@@ -0,0 +1,31 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+import ProviderHeader from './provider-banner/page-header.extension';
+import { GenericClockIn } from './generic-clock-in-modal/generic-clock-in.modal';
+import SideMenu from './side-nav/generic-side-nav.component';
+
+const moduleName = '@digihmis/esm-home-app';
+const pageName = 'home';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+export const providerBanner = getSyncLifecycle(ProviderHeader, options);
+export const registrationNavMenu = getSyncLifecycle(SideMenu, options);
+export const administrationNavMenu = getSyncLifecycle(SideMenu, options);
+export const triageNavMenu = getSyncLifecycle(SideMenu, options);
+export const outpatientNavMenu = getSyncLifecycle(SideMenu, options);
+export const billingNavMenu = getSyncLifecycle(SideMenu, options);
+
+// t('clockIn', 'Clock In')
+export const genericClockInModal = getSyncLifecycle(GenericClockIn, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/module-card/module-card-utils.component.tsx

@@ -0,0 +1,175 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject } from '../config-schema';
+const openmrsSpaBase = window['getOpenmrsSpaBase']();
+
+export const useModuleLinks = () => {
+  const { t } = useTranslation();
+  const {
+    excludeLinks,
+    administrationIcon,
+    appointmentsIcon,
+    billingIcon,
+    dentalIcon,
+    inpatientIcon,
+    inventoryIcon,
+    laboratoryIcon,
+    mchIcon,
+    pharmacyIcon,
+    outpatientIcon,
+    proceduresIcon,
+    radiologyIcon,
+    triageIcon,
+    referralIcon,
+    registrationIcon,
+    specialClinicIcon,
+    staffManagementIcon,
+    reportsIcon,
+    facilityDashboardIcon,
+    legacyUIIcon,
+  } = useConfig<ConfigObject>();
+  const moduleLinks = [
+    {
+      label: t('registration', 'Registration'),
+      url: `${openmrsSpaBase}home/registration`,
+      imgSrc: registrationIcon.src,
+      imgAlt: registrationIcon.alt,
+      privilege: 'o3: View Registration Module',
+    },
+    {
+      label: t('appointments', 'Appointments'),
+      url: `${openmrsSpaBase}home/appointments`,
+      imgSrc: appointmentsIcon.src,
+      imgAlt: appointmentsIcon.alt,
+      privilege: 'o3: View Appointments Module',
+    },
+    {
+      label: t('triage', 'Triage'),
+      url: `${openmrsSpaBase}home/triage`,
+      imgSrc: triageIcon.src,
+      imgAlt: triageIcon.alt,
+      privilege: 'o3: View Triage Module',
+    },
+    {
+      label: t('outpatient', 'Outpatient'),
+      url: `${openmrsSpaBase}home/outpatient`,
+      imgSrc: outpatientIcon.src,
+      imgAlt: outpatientIcon.alt,
+      privilege: 'o3: View Outpatient Module',
+    },
+    {
+      label: t('dental', 'Dental'),
+      url: `${openmrsSpaBase}home/dental`,
+      imgSrc: dentalIcon.src,
+      imgAlt: dentalIcon.alt,
+      privilege: 'o3: View Dental Module',
+    },
+    {
+      label: t('specialClinics', 'Special Clinics'),
+      url: `${openmrsSpaBase}home/special-clinics`,
+      imgSrc: specialClinicIcon.src,
+      imgAlt: specialClinicIcon.alt,
+      privilege: 'o3: View Special Clinics Module',
+    },
+    {
+      label: t('mch', 'Maternal Child Health'),
+      url: `${openmrsSpaBase}home/mch`,
+      imgSrc: mchIcon.src,
+      imgAlt: mchIcon.alt,
+      privilege: 'o3: View Maternal Child Health Module',
+    },
+    {
+      label: t('laboratory', 'Laboratory'),
+      url: `${openmrsSpaBase}home/laboratory`,
+      imgSrc: laboratoryIcon.src,
+      imgAlt: laboratoryIcon.alt,
+      privilege: 'o3: View Laboratory Module',
+    },
+    {
+      label: t('procedures', 'Procedures'),
+      url: `${openmrsSpaBase}home/procedures`,
+      imgSrc: proceduresIcon.src,
+      imgAlt: proceduresIcon.alt,
+      privilege: 'o3: View Procedures Module',
+    },
+    {
+      label: t('radiology', 'Radiology'),
+      url: `${openmrsSpaBase}home/radiology`,
+      imgSrc: radiologyIcon.src,
+      imgAlt: radiologyIcon.alt,
+      privilege: 'o3: View Radiology Module',
+    },
+    {
+      label: t('inpatient', 'Inpatient'),
+      url: `${openmrsSpaBase}/home/inpatient`,
+      imgSrc: inpatientIcon.src,
+      imgAlt: inpatientIcon.alt,
+      privilege: 'o3: View Inpatient Module',
+    },
+    {
+      label: t('referral', 'Referral'),
+      url: `${openmrsSpaBase}home/referral`,
+      imgSrc: referralIcon.src,
+      imgAlt: referralIcon.alt,
+      privilege: 'o3: View Referral Module',
+    },
+    {
+      label: t('billing', 'Billing'),
+      url: `${openmrsSpaBase}home/billing`,
+      imgSrc: billingIcon.src,
+      imgAlt: billingIcon.alt,
+      privilege: 'o3: View Billing Module',
+    },
+    {
+      label: t('pharmacy', 'Pharmacy'),
+      url: `${openmrsSpaBase}home/pharmacy`,
+      imgSrc: pharmacyIcon.src,
+      imgAlt: pharmacyIcon.alt,
+      privilege: 'o3: View Pharmacy Module',
+    },
+    {
+      label: t('inventory', 'Inventory'),
+      url: `${openmrsSpaBase}home/inventory`,
+      imgSrc: inventoryIcon.src,
+      imgAlt: inventoryIcon.alt,
+      privilege: 'o3: View Inventory Module',
+    },
+    {
+      label: t('reports', 'Reports'),
+      url: `${openmrsSpaBase}home/reports`,
+      imgSrc: reportsIcon.src,
+      imgAlt: reportsIcon.alt,
+      privilege: 'o3: View Reports Module',
+    },
+    {
+      label: t('facilityAnalytics', 'Facility Analytics'),
+      url: `${openmrsSpaBase}home/facility-analytics`,
+      imgSrc: facilityDashboardIcon.src,
+      imgAlt: facilityDashboardIcon.alt,
+      privilege: 'o3: View Facility Analytics Module',
+    },
+    {
+      label: t('administration', 'Administration'),
+      url: `${openmrsSpaBase}home/administration`,
+      imgSrc: administrationIcon.src,
+      imgAlt: administrationIcon.alt,
+      privilege: 'o3: View Administration Module',
+    },
+    {
+      label: t('staffManagement', 'Staff Management'),
+      url: `${openmrsSpaBase}home/staff-management`,
+      imgSrc: staffManagementIcon.src,
+      imgAlt: staffManagementIcon.alt,
+      privilege: 'o3: View Staff Management Module',
+    },
+    {
+      label: t('legacyUI', 'Legacy UI'),
+      url: `/openmrs/admin`,
+      imgSrc: legacyUIIcon.src,
+      imgAlt: legacyUIIcon.alt,
+      privilege: 'o3: View Legacy Admin Dashboard',
+    },
+  ];
+
+  return moduleLinks.filter((link) => !excludeLinks.some((excludeLink) => excludeLink === link.label));
+};

package/src/module-card/module-card.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './module-card.scss';
+import { invalidateAllSessionData } from '../generic-clock-in-modal/util/session-cache';
+
+type ModuleCardProps = {
+  imgSrc: string;
+  alt: string;
+  label: string;
+  url?: string;
+  onClick?: () => void;
+  privilege?: string;
+};
+
+const ModuleCard: React.FC<ModuleCardProps> = ({ imgSrc, alt, label, url, onClick, privilege }) => {
+  const handleClick = async () => {
+    await invalidateAllSessionData();
+
+    if (onClick) {
+      onClick();
+    } else if (url) {
+      navigate({ to: url });
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <div
+      className={styles.moduleCard}
+      role="button"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`Navigate to ${label}`}>
+      <div className={styles.cardIcon}>{imgSrc}</div>
+      <img alt={alt} className={styles.logo} key={imgSrc} src={imgSrc} />
+      <div className={styles.cardLabel}>{label}</div>
+    </div>
+  );
+};
+
+export default ModuleCard;

package/src/module-card/module-card.scss

@@ -0,0 +1,103 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.moduleCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-05;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: layout.$spacing-03;
+  cursor: pointer;
+  aspect-ratio: 1;
+  min-height: 160px;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-04;
+    min-height: 140px;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-04;
+    min-height: 120px;
+  }
+
+  :global(.omrs-breakpoint-lt-phone) & {
+    aspect-ratio: auto;
+    padding: layout.$spacing-03;
+    min-height: 80px;
+    flex-direction: row;
+    justify-content: flex-start;
+    text-align: left;
+  }
+}
+
+.cardIcon {
+  display: none;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  margin-bottom: layout.$spacing-03;
+  object-fit: contain;
+  filter: brightness(1.1) contrast(1.1);
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 100px;
+    height: 100px;
+    margin-bottom: layout.$spacing-03;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 118px;
+    height: 118px;
+    margin-bottom: layout.$spacing-02;
+  }
+
+  .moduleCard:hover & {
+    filter: brightness(1.2) contrast(1.2);
+  }
+}
+
+.cardLabel {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-100;
+  margin-bottom: 12px;
+  text-align: center;
+  font-weight: 500;
+  line-height: 1.3;
+  word-wrap: break-word;
+  hyphens: auto;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    @include type.type-style('body-compact-01');
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('helper-text-01');
+    font-weight: 500;
+  }
+
+  :global(.omrs-breakpoint-lt-phone) & {
+    text-align: left;
+    flex: 1;
+  }
+
+  .moduleCard:hover & {
+    color: #2e6b8a;
+    font-weight: 600;
+  }
+
+  .moduleCard:focus & {
+    color: colors.$blue-70;
+  }
+}

package/src/provider-banner/page-header.extension.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '@openmrs/esm-framework';
+import styles from './page-header.scss';
+import { Calendar, RuleTest } from '@carbon/react/icons';
+import { Tag } from '@carbon/react';
+import { Attribute, useProviderAttributes } from '../welcome-back-banner/welcome-back-banner.resource';
+
+const ProviderHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { currentProvider } = useSession();
+  const currentProviderUuid = currentProvider?.uuid;
+  const { providerAttributes, isLoading, error } = useProviderAttributes(currentProviderUuid);
+
+  const getAttributeValue = (attributes: Array<Attribute>, displayName: string): string => {
+    const attribute = attributes?.find((attr) => attr.attributeType.display === displayName);
+    return attribute?.value || '';
+  };
+
+  const getLicenseStatus = (expiryDate: string) => {
+    if (!expiryDate || expiryDate === '0000-00-00') {
+      return { status: 'unknown', message: t('unlicensed', 'Unlicensed'), tagType: 'magenta' as const };
+    }
+
+    const today = new Date();
+    const expiry = new Date(expiryDate);
+    const timeDiff = expiry.getTime() - today.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+
+    if (daysDiff < 0) {
+      return { status: 'expired', message: t('expired', 'Expired'), tagType: 'red' as const };
+    } else if (daysDiff <= 30) {
+      return { status: 'warning', message: t('expiring', 'Expiring'), tagType: 'blue' as const };
+    } else if (daysDiff <= 90) {
+      return { status: 'caution', message: t('caution', 'Caution'), tagType: 'teal' as const };
+    } else {
+      return { status: 'valid', message: t('valid', 'Valid'), tagType: 'green' as const };
+    }
+  };
+
+  const formatDate = (dateString: string): string => {
+    if (!dateString || dateString === '0000-00-00') {
+      return '0000-00-00';
+    }
+    try {
+      const date = new Date(dateString);
+      if (isNaN(date.getTime())) {
+        return '0000-00-00';
+      }
+      return date.toISOString().split('T')[0];
+    } catch {
+      return '0000-00-00';
+    }
+  };
+
+  const hwi = getAttributeValue(providerAttributes?.attributes, 'Practising License Number') || 'NONE';
+  const licenseExpiry = getAttributeValue(providerAttributes?.attributes, 'License Expiry Date');
+  const formattedExpiry = formatDate(licenseExpiry);
+  const licenseStatus = getLicenseStatus(licenseExpiry);
+
+  return (
+    <div className={`omrs-main-content`}>
+      <div className={styles.rightSection}>
+        <div className={styles.medicalInfo}>
+          <div className={styles.licenseInfo}>
+            <RuleTest className={styles.infoIcon} />
+            {t('license', 'License')}: {hwi}
+          </div>
+          <div className={styles.expiryInfo}>
+            <Calendar className={styles.infoIcon} />
+            <span className={styles.expiryText}>
+              {t('expires', 'Expires')}: {formattedExpiry}
+            </span>
+            <span className={styles.statusBadge}>
+              <Tag size="md" type={licenseStatus.tagType}>
+                {licenseStatus.message}
+              </Tag>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProviderHeader;

package/src/provider-banner/page-header.scss

@@ -0,0 +1,48 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.rightSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: layout.$spacing-02;
+}
+
+.subtitle {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  margin: 0;
+}
+
+.loginInfo,
+.licenseInfo {
+  @include type.type-style('caption-01');
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  color: colors.$gray-80;
+}
+
+.medicalInfo {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  padding-right: 1rem;
+}
+
+.expiryInfo {
+  @include type.type-style('caption-01');
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.expiryText {
+  color: colors.$gray-80;
+}
+
+.infoIcon {
+  width: layout.$spacing-04;
+  height: layout.$spacing-04;
+}

package/src/root.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import GridDashboard from './home-grid-dashboard/home-grid-dashboard.component';
+import RegistrationDashboard from './dashboards/registration-dashboard/registration-dashboard.component';
+import TriageDashboard from './dashboards/triage-dashboard/triage-dashboard.component';
+import AdministrationDashboard from './dashboards/administration-dashboard/administration-dashboard.component';
+import OutpatientDashboard from './dashboards/outpatient-dashboard/outpatient-dashboard.component';
+import BillingDashboard from './dashboards/billing-dashboard/billing-dashboard.component';
+
+const Root: React.FC = () => {
+  const spaBasePath = window.spaBase;
+
+  return (
+    <main className="omrs-main-content">
+      <BrowserRouter basename={spaBasePath}>
+        <Routes>
+          {/* homepage */}
+          <Route path="/home" element={<GridDashboard />} />
+          {/* registration */}
+          <Route path="/home/registration/*" element={<RegistrationDashboard />} />
+          {/* administration */}
+          <Route
+            path="/home/administration"
+            element={<Navigate to="/home/administration/system-info-management" replace />}
+          />
+          <Route path="/home/administration/:dashboard" element={<AdministrationDashboard />} />
+          {/* triage */}
+          <Route path="/home/triage" element={<TriageDashboard />} />
+          <Route path="/home/triage/patient/:patientUuid/vitals" element={<TriageDashboard />} />
+          {/* outpatient */}
+          <Route path="/home/outpatient" element={<OutpatientDashboard />} />
+          <Route path="/home/outpatient/patient/:patientUuid/file" element={<OutpatientDashboard />} />
+
+          {/* billing */}
+          <Route path="/home/billing" element={<BillingDashboard />} />
+          <Route path="/home/billing/patient/:patientUuid/bill" element={<BillingDashboard />} />
+        </Routes>
+      </BrowserRouter>
+    </main>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.container {
+  padding: spacing.$spacing-07;
+}
+
+.welcome {
+  @include type.type-style('heading-04');
+  margin: spacing.$spacing-05 0;
+}
+
+.explainer {
+  margin-bottom: 2rem;
+}

package/src/routes.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+     {
+      "name": "registration-nav-menu",
+      "slot": "registration-sidebar-slot",
+      "component": "registrationNavMenu",
+      "online": true,
+      "offline": true
+    },
+      {
+        "name": "administration-nav-menu",
+        "slot": "administration-sidebar-slot",
+        "component": "administrationNavMenu",
+        "online": true,
+        "offline": true
+      },
+       {
+        "name": "triage-nav-menu",
+        "slot": "triage-sidebar-slot",
+        "component": "triageNavMenu",
+        "online": true,
+        "offline": true
+      },
+      {
+      "name": "outpatient-nav-menu",
+      "slot": "outpatient-sidebar-slot",
+      "component": "outpatientNavMenu",
+      "online": true,
+      "offline": true
+      },
+      {
+      "name": "billing-nav-menu",
+      "slot": "billing-sidebar-slot",
+      "component": "billingNavMenu",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "patient-banner",
+      "slot": "patient-banner-slot",
+      "component": "patientBanner",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "provider-banner",
+      "slot": "provider-banner-slot",
+      "component": "providerBanner",
+      "online": true,
+      "offline": true
+    }
+  
+  ],
+  "modals": [
+     {
+      "name": "generic-clock-in-modal",
+      "component": "genericClockInModal"
+    }
+  ],
+    "pages": [
+    {
+      "component": "root",
+      "route": "home",
+      "online": true,
+      "offline": true
+    }
+  ]
+
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/side-nav/generic-side-nav.component.tsx

@@ -0,0 +1,17 @@
+import { LeftNavMenu } from '@openmrs/esm-framework';
+import React from 'react';
+
+const SideMenu = () => {
+  return (
+    <>
+      <style>{`
+        .cds--side-nav {
+          background-color:var(--cds-field);
+        }
+      `}</style>
+      <LeftNavMenu isChildOfHeader={true} />
+    </>
+  );
+};
+
+export default SideMenu;

package/src/type/index.ts

@@ -0,0 +1,5 @@
+export interface DashboardConfig {
+  name: string;
+  slot: string;
+  title: string;
+}