@kenyaemr/esm-version-app 5.4.3 → 5.4.4-pre.100

package/src/about/about.component.tsx

@@ -1,45 +1,213 @@
-import React, { useEffect } from 'react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { formatDatetime, useConfig } from '@openmrs/esm-framework';
+import { InlineLoading } from '@carbon/react';
+import { Phone, Email, Location, Globe, WarningAlt } from '@carbon/react/icons';
+
 import styles from './about.scss';
-import { useModules } from '../hooks/useModules';
-import { formatDate, formatDatetime, showNotification } from '@openmrs/esm-framework';
+import { useModules, useGlobalProperty } from '../hooks/useModules';
 import FrontendModule from '../frontend-modules/frontend-modules.component';
+import type { FacilityContacts, FacilityInformation } from '../types';
+
 const packageInfo = require('../release-version.js');
 
+function parseFacilityInformation(value: unknown): FacilityInformation | null {
+  if (value == null) {
+    return null;
+  }
+
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return value as FacilityInformation;
+  }
+
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value) as FacilityInformation;
+    } catch {
+      return null;
+    }
+  }
+
+  return null;
+}
+
+interface FacilityHeaderProps {
+  facilityName: string;
+  taglineText?: string;
+  logoSrc: string;
+  titleClassName: string;
+  taglineClassName: string;
+  logoAlt: string;
+}
+
+const FacilityHeader: React.FC<FacilityHeaderProps> = ({
+  facilityName,
+  taglineText,
+  logoSrc,
+  titleClassName,
+  taglineClassName,
+  logoAlt,
+}) => (
+  <div className={titleClassName}>
+    <img src={logoSrc} alt={logoAlt} width="300" height="100" />
+    <div>
+      <h3>{facilityName}</h3>
+      {taglineText ? <p className={taglineClassName}>{taglineText}</p> : null}
+    </div>
+  </div>
+);
+
+interface FacilityContactsProps {
+  contacts?: FacilityContacts;
+  contactsClassName: string;
+  contactItemClassName: string;
+  t: TFunction;
+}
+
+const FacilityContactsSection: React.FC<FacilityContactsProps> = ({
+  contacts,
+  contactsClassName,
+  contactItemClassName,
+  t,
+}) => {
+  if (
+    !contacts ||
+    (!contacts.tel && !contacts.email && !contacts.emergency && !contacts.address && !contacts.website)
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={contactsClassName}>
+      {contacts.tel && (
+        <div className={contactItemClassName}>
+          <Phone size={16} />
+          <span>{contacts.tel}</span>
+        </div>
+      )}
+      {contacts.email && (
+        <div className={contactItemClassName}>
+          <Email size={16} />
+          <a href={`mailto:${contacts.email}`}>{contacts.email}</a>
+        </div>
+      )}
+      {contacts.emergency && (
+        <div className={contactItemClassName}>
+          <WarningAlt size={16} />
+          <span>
+            {t('emergency', 'Emergency')}: {contacts.emergency}
+          </span>
+        </div>
+      )}
+      {contacts.address && (
+        <div className={contactItemClassName}>
+          <Location size={16} />
+          <span>{contacts.address}</span>
+        </div>
+      )}
+      {contacts.website && (
+        <div className={contactItemClassName}>
+          <Globe size={16} />
+          <a
+            href={contacts.website.startsWith('http') ? contacts.website : `https://${contacts.website}`}
+            target="_blank"
+            rel="noopener noreferrer">
+            {contacts.website}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface VersionDetailsProps {
+  kenyaEmrVersion?: string;
+  spaVersion: string;
+  buildDate: Date;
+  aboutBodyClassName: string;
+  t: TFunction;
+}
+
+const VersionDetails: React.FC<VersionDetailsProps> = ({
+  kenyaEmrVersion,
+  spaVersion,
+  buildDate,
+  aboutBodyClassName,
+  t,
+}) => (
+  <div className={aboutBodyClassName}>
+    <p>{t('mainModuleVersion', 'Main Module Version')}</p>
+    <p>{`v${kenyaEmrVersion ?? '—'}`}</p>
+    <p>{t('spaVersion', 'SPA Version')}</p>
+    <p>{`v${spaVersion}`}</p>
+    <p>{t('buildDateTime', 'Build date time')}</p>
+    <p>{formatDatetime(buildDate, { mode: 'standard' })}</p>
+  </div>
+);
+
 interface AboutProps {}
 
 const About: React.FC<AboutProps> = () => {
-  const { modules, isLoading } = useModules();
-  const kenyaEMR = modules.find(({ uuid }) => uuid === 'kenyaemr');
-  const { title, container, aboutBody, aboutPage } = styles;
+  const { t } = useTranslation();
+  const { modules } = useModules();
+  const { defaultLogoPath } = useConfig();
+  const { data: facilityInformation, isLoading: isFacilityInformationLoading } = useGlobalProperty(
+    'kenyaemr.cashier.receipt.facilityInformation',
+  );
+
+  const kenyaEmrModule = modules.find(({ uuid }) => uuid === 'kenyaemr');
+  const { title, container, aboutBody, aboutPage, tagline, contacts, contactItem } = styles;
   const { VERSION } = packageInfo;
 
+  const facility = useMemo(() => parseFacilityInformation(facilityInformation?.['value']), [facilityInformation]);
+
+  if (isFacilityInformationLoading) {
+    return <InlineLoading description={t('loadingFacilityInformation', 'Loading facility information...')} />;
+  }
+
+  const contactsData = facility?.contacts;
+
+  const facilityName = facility?.facilityName ?? 'Ministry of Health';
+  const facilityTagline = facility?.tagline;
+  const logoAlt = facility?.facilityName ?? t('facilityLogo', 'Facility logo');
+
+  const spaVersion = VERSION.version;
+  const buildDate = new Date(VERSION.buildDate);
+  const kenyaEmrVersion = kenyaEmrModule?.version;
+
   return (
     <div className={styles.main}>
       <div className={aboutPage}>
         <div className={container}>
-          <div className={title}>
-            <div>
-              <h3>Government of Kenya</h3>
-              <h4>Ministry of Health</h4>
-            </div>
-            <img
-              src="/openmrs/ms/uiframework/resource/kenyaemr/images/logos/moh.png"
-              alt="court_of_arms"
-              width="50"
-              height="50"
-            />
-          </div>
-          <div className={aboutBody}>
-            <p>KenyaEMR Version</p>
-            <p>{`v${kenyaEMR?.version}`}</p>
-            <p>SPA Version</p>
-            <p>{`v${VERSION.version}`}</p>
-            <p>Build date time</p>
-            <p>{formatDatetime(new Date(VERSION.buildDate), { mode: 'standard' })}</p>
-          </div>
+          <FacilityHeader
+            facilityName={facilityName}
+            taglineText={facilityTagline}
+            logoSrc={defaultLogoPath}
+            titleClassName={title}
+            taglineClassName={tagline}
+            logoAlt={logoAlt}
+          />
+
+          <FacilityContactsSection
+            contacts={contactsData}
+            contactsClassName={contacts}
+            contactItemClassName={contactItem}
+            t={t}
+          />
+
+          <VersionDetails
+            kenyaEmrVersion={kenyaEmrVersion}
+            spaVersion={spaVersion}
+            buildDate={buildDate}
+            aboutBodyClassName={aboutBody}
+            t={t}
+          />
         </div>
       </div>
-      <FrontendModule />
+      <div className={styles.frontendModules}>
+        <FrontendModule />
+      </div>
     </div>
   );
 };

package/src/about/about.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
+@use '@carbon/layout';
 
 .main {
   display: flex;
@@ -12,6 +13,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
 }
 
 .container {
@@ -21,28 +23,69 @@
   flex-direction: column;
   align-items: center;
   border: 0.5px solid colors.$gray-30;
-  width: 23rem;
+  width: 60rem;
+  padding: layout.$spacing-05;
 }
 
 .title {
   display: flex;
-  align-items: center;
-  padding-bottom: 0.25rem;
-  margin-bottom: 0.25rem;
+  padding-bottom: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
   border-bottom: 0.5px solid colors.$gray-30;
   width: 100%;
   justify-content: center;
+  flex-direction: column;
+  align-items: center;
 
   h3 {
-    @include type.type-style('body-compact-02');
+    @include type.type-style('heading-compact-01');
+    text-align: center;
+    margin: 0 0 layout.$spacing-02;
   }
 
-  h4 {
-    @include type.type-style('body-compact-01');
+  img {
+    margin-bottom: layout.$spacing-03;
+    object-fit: contain;
   }
+}
 
-  img {
-    margin-left: 0.25rem;
+.tagline {
+  @include type.type-style('body-compact-01');
+  text-align: center;
+  color: colors.$gray-70;
+  margin: 0;
+  max-width: 28rem;
+}
+
+.contacts {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  width: 100%;
+  padding: layout.$spacing-03 0;
+  margin-bottom: layout.$spacing-03;
+  border-bottom: 0.5px solid colors.$gray-30;
+  align-items: center;
+
+  a {
+    color: colors.$blue-60;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.contactItem {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  @include type.type-style('body-compact-01');
+
+  svg {
+    flex-shrink: 0;
+    color: colors.$gray-70;
   }
 }
 
@@ -56,3 +99,8 @@
     margin-bottom: 0.25rem;
   }
 }
+
+.frontendModules {
+  width: 100%;
+  padding: layout.$spacing-05;
+}

package/src/config-schema.ts

@@ -1 +1,10 @@
-export const configSchema = {};
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  defaultLogoPath: {
+    _type: Type.String,
+    _default: '/openmrs/spa/kenyaemr-login-logo_poweredby_kenyaemr.png',
+    _description:
+      'Path to the default facility logo (relative to SPA base), used when facility information has no logo.',
+  },
+};

package/src/frontend-modules/frontend-modules.component.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+
+import FrontendModule from './frontend-modules.component';
+import { useFrontendModules } from '../hooks/useFrontendModules';
+
+vi.mock('../hooks/useFrontendModules');
+
+type UseFrontendModulesMock = ReturnType<typeof vi.fn>;
+
+describe('FrontendModule', () => {
+  const useFrontendModulesMock = useFrontendModules as unknown as UseFrontendModulesMock;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders table headers for module name and version', () => {
+    useFrontendModulesMock.mockReturnValue([{ name: 'Test module', version: '1.0.0' }]);
+
+    render(<FrontendModule />);
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /module name/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /version/i })).toBeInTheDocument();
+  });
+
+  it('renders a row for each frontend module with name and version', () => {
+    useFrontendModulesMock.mockReturnValue([
+      { name: 'Module A', version: '1.0.0' },
+      { name: 'Module B', version: '2.0.0' },
+    ]);
+
+    render(<FrontendModule />);
+
+    const table = screen.getByRole('table');
+    const rows = within(table).getAllByRole('row');
+
+    // First row is the header; data rows follow
+    const dataRows = rows.slice(1);
+    expect(dataRows).toHaveLength(2);
+
+    expect(within(dataRows[0]).getByText('Module A')).toBeInTheDocument();
+    expect(within(dataRows[0]).getByText('1.0.0')).toBeInTheDocument();
+
+    expect(within(dataRows[1]).getByText('Module B')).toBeInTheDocument();
+    expect(within(dataRows[1]).getByText('2.0.0')).toBeInTheDocument();
+  });
+
+  it('falls back to "No version found" when version is missing', () => {
+    useFrontendModulesMock.mockReturnValue([{ name: 'No Version Module' }]);
+
+    render(<FrontendModule />);
+
+    const table = screen.getByRole('table');
+    const rows = within(table).getAllByRole('row');
+    const dataRow = rows[1];
+
+    expect(within(dataRow).getByText('No version found')).toBeInTheDocument();
+  });
+});

package/src/frontend-modules/frontend-modules.component.tsx

@@ -1,32 +1,55 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
 import { useFrontendModules } from '../hooks/useFrontendModules';
-import {
-  StructuredListWrapper,
-  StructuredListHead,
-  StructuredListRow,
-  StructuredListCell,
-  StructuredListBody,
-} from '@carbon/react';
 
 const FrontendModule: React.FC = () => {
+  const { t } = useTranslation();
   const installedModules = useFrontendModules();
+
+  const headers = [
+    { key: 'name', header: t('moduleName', 'Module name') },
+    { key: 'version', header: t('version', 'Version') },
+  ];
+  const rows = useMemo(
+    () =>
+      installedModules.map((module, index) => ({
+        id: `module-${index}`,
+        name: module.name,
+        version: module.version ?? t('noVersionFound', 'No version found'),
+      })),
+    [installedModules, t],
+  );
+
   return (
-    <StructuredListWrapper ariaLabel="Structured list">
-      <StructuredListHead>
-        <StructuredListRow head tabIndex={0}>
-          <StructuredListCell head>Module name</StructuredListCell>
-          <StructuredListCell head>Version</StructuredListCell>
-        </StructuredListRow>
-      </StructuredListHead>
-      <StructuredListBody>
-        {installedModules.map((module) => (
-          <StructuredListRow tabIndex={0}>
-            <StructuredListCell>{module.name}</StructuredListCell>
-            <StructuredListCell>{module.version ?? 'No version found'} </StructuredListCell>
-          </StructuredListRow>
-        ))}
-      </StructuredListBody>
-    </StructuredListWrapper>
+    <DataTable
+      rows={rows}
+      headers={headers}
+      size="sm"
+      useZebraStyles
+      aria-label={t('frontendModules', 'Frontend modules')}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </DataTable>
   );
 };
 

package/src/hooks/useModules.tsx

@@ -14,3 +14,12 @@ export function useModules() {
 
   return { modules: data?.data?.results ?? [], isLoading };
 }
+
+export function useGlobalProperty(property: string) {
+  const { data, isLoading } = useSWRImmutable<{ data: { results: Array<OpenmrsResource> } }>(
+    `/ws/rest/v1/systemsetting?q=${property}&v=full`,
+    openmrsFetch,
+  );
+
+  return { data: data?.data?.results?.[0] ?? [], isLoading };
+}

package/src/index.ts

@@ -1,6 +1,5 @@
-import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import rootComponent from './root.component';
 
 const moduleName = '@kenyaemr/esm-version-app';
 
@@ -11,7 +10,7 @@ const options = {
 
 export const importTranslations = require.context('../translations', false, /.json$/, 'lazy');
 
-export const about = getSyncLifecycle(rootComponent, options);
+export const about = getAsyncLifecycle(() => import('./root.component'), options);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);

package/src/release-version.js

@@ -2,10 +2,10 @@
 // IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
 /* tslint:disable */
 export const VERSION = {
-    "dirty": false,
-    "raw": "v5.4.3-0-gbde73da",
-    "hash": "gbde73da",
-    "distance": 0,
+    "dirty": true,
+    "raw": "v5.4.3-71-g0defd25d-dirty",
+    "hash": "g0defd25d",
+    "distance": 71,
     "tag": "v5.4.3",
     "semver": {
         "options": {
@@ -21,9 +21,9 @@ export const VERSION = {
         "build": [],
         "version": "5.4.3"
     },
-    "suffix": "0-gbde73da",
-    "semverString": "5.4.3",
-    "version": "5.4.3",
-    "buildDate": "2026-02-02T07:55:57.637Z"
+    "suffix": "71-g0defd25d-dirty",
+    "semverString": "5.4.3+71.g0defd25d",
+    "version": "5.4.4-pre.100",
+    "buildDate": "2026-04-14T10:33:40.622Z"
 };
 /* tslint:enable */

package/src/types/index.ts

@@ -11,3 +11,18 @@ export interface DefaultFacility {
   shaContracted: string;
   shaFacilityExpiryDate: string;
 }
+
+export interface FacilityContacts {
+  tel?: string;
+  email?: string;
+  emergency?: string;
+  address?: string;
+  website?: string;
+}
+
+export interface FacilityInformation {
+  facilityName?: string;
+  tagline?: string;
+  logoPath?: string;
+  contacts?: FacilityContacts;
+}

package/translations/am.json

@@ -1,3 +1,13 @@
 {
-  "systemInfo": "System Info"
+  "buildDateTime": "Build date time",
+  "emergency": "Emergency",
+  "facilityLogo": "Facility logo",
+  "frontendModules": "Frontend modules",
+  "loadingFacilityInformation": "Loading facility information...",
+  "mainModuleVersion": "Main Module Version",
+  "moduleName": "Module name",
+  "noVersionFound": "No version found",
+  "spaVersion": "SPA Version",
+  "systemInfo": "System Info",
+  "version": "Version"
 }

package/translations/en.json

@@ -1,3 +1,13 @@
 {
-  "systemInfo": "System Info"
+  "buildDateTime": "Build date time",
+  "emergency": "Emergency",
+  "facilityLogo": "Facility logo",
+  "frontendModules": "Frontend modules",
+  "loadingFacilityInformation": "Loading facility information...",
+  "mainModuleVersion": "Main Module Version",
+  "moduleName": "Module name",
+  "noVersionFound": "No version found",
+  "spaVersion": "SPA Version",
+  "systemInfo": "System Info",
+  "version": "Version"
 }

package/translations/sw.json

@@ -1,3 +1,13 @@
 {
-  "systemInfo": "System Info"
+  "buildDateTime": "Build date time",
+  "emergency": "Emergency",
+  "facilityLogo": "Facility logo",
+  "frontendModules": "Frontend modules",
+  "loadingFacilityInformation": "Loading facility information...",
+  "mainModuleVersion": "Main Module Version",
+  "moduleName": "Module name",
+  "noVersionFound": "No version found",
+  "spaVersion": "SPA Version",
+  "systemInfo": "System Info",
+  "version": "Version"
 }

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*", "increment-version.js"],
-  "exclude": ["src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.outdated.tsx"]
 }

package/dist/127.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_kenyaemr_esm_version_app=globalThis.webpackChunk_kenyaemr_esm_version_app||[]).push([["127"],{1066:function(e){e.exports=JSON.parse('{"systemInfo":"System Info"}')}}]);