@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/shared/otp-verification/otp-verification.scss

@@ -100,3 +100,377 @@
   line-height: 1.29;
   font-weight: 400;
 }
+
+.eyebrow {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: colors.$gray-60;
+  margin: 0 0 layout.$spacing-02;
+  font-weight: 500;
+}
+
+.authLandingContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-05;
+}
+
+.authIntro {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-04;
+  line-height: 1.5;
+}
+
+.methodCard {
+  display: flex;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  background: colors.$white-0;
+  cursor: pointer;
+  align-items: flex-start;
+  text-align: left;
+  width: 100%;
+  transition: border-color 0.15s, background 0.15s;
+  border-radius: 4px;
+
+  &:hover:not(:disabled) {
+    border-color: colors.$blue-60;
+    background: colors.$gray-10;
+  }
+}
+
+.methodCardDisabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.methodIconWrap {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  background: colors.$blue-10;
+  color: colors.$blue-70;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.methodIconWarning {
+  background: colors.$yellow-20;
+  color: colors.$yellow-90;
+}
+
+.methodContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.methodTitleRow {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-02;
+}
+
+.methodTitle {
+  @include type.type-style('body-compact-01');
+  font-weight: 500;
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.methodDesc {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.methodArrow {
+  color: colors.$gray-50;
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.badgeRequired {
+  @include type.type-style('label-01');
+  background: colors.$yellow-20;
+  color: colors.$yellow-90;
+  padding: 2px layout.$spacing-03;
+  border-radius: 4px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.dividerWithText {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  margin: layout.$spacing-04 0 layout.$spacing-03;
+  @include type.type-style('label-01');
+  color: colors.$gray-50;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: colors.$gray-20;
+  }
+}
+
+.whitelistLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04;
+  background: transparent;
+  border: 1px dashed colors.$gray-30;
+  color: colors.$blue-70;
+  cursor: pointer;
+  width: 100%;
+  border-radius: 4px;
+  @include type.type-style('body-compact-01');
+
+  &:hover {
+    background: colors.$gray-10;
+    border-color: colors.$blue-60;
+  }
+}
+
+.dataNotice {
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04;
+  background: colors.$gray-10;
+  border-radius: 4px;
+  margin-top: layout.$spacing-04;
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  line-height: 1.5;
+
+  svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+}
+
+.biometricContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-04;
+}
+
+.iframeWrapper {
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  overflow: hidden;
+  background: colors.$white-0;
+}
+
+.biometricIframe {
+  width: 100%;
+  height: 480px;
+  border: 0;
+  display: block;
+}
+
+.biometricHint {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  text-align: center;
+  margin: 0;
+}
+
+.failedContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-05;
+}
+
+.chooseLabel {
+  @include type.type-style('body-compact-01');
+  font-weight: 500;
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.tryAgainButton {
+  align-self: center;
+}
+
+.escapeHatch {
+  width: 100%;
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid colors.$gray-20;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+}
+
+.escapeHatchButton {
+  align-self: center;
+}
+
+.whitelistFormContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}
+
+.whitelistIntro {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.whitelistContextRow {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-03 layout.$spacing-04;
+  background: colors.$gray-10;
+  border-left: 2px solid colors.$blue-60;
+  border-radius: 4px;
+}
+
+.whitelistContextLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.whitelistContextValue {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  color: colors.$gray-100;
+  background: colors.$white-0;
+  padding: 2px layout.$spacing-03;
+  border-radius: 2px;
+  border: 1px solid colors.$gray-20;
+}
+
+.whitelistReasonHint {
+  background: colors.$gray-10;
+  padding: layout.$spacing-04;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.whitelistReasonDesc {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.whitelistReasonMeta {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+}
+
+.reviewBadge {
+  @include type.type-style('label-01');
+  padding: 2px layout.$spacing-03;
+  border-radius: 2px;
+  font-weight: 500;
+}
+
+.reviewAuto {
+  background: colors.$green-20;
+  color: colors.$green-80;
+}
+
+.reviewManual {
+  background: colors.$blue-20;
+  color: colors.$blue-80;
+}
+
+.requiresAttachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  @include type.type-style('label-01');
+  color: colors.$yellow-90;
+  font-weight: 500;
+}
+
+// ── Whitelist waiting (polling) ──
+
+.whitelistWaitingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-07 layout.$spacing-05;
+  text-align: center;
+}
+
+.whitelistWaitingIconWrap {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: colors.$blue-10;
+  color: colors.$blue-70;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.whitelistWaitingTitle {
+  @include type.type-style('heading-03');
+  font-weight: 500;
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.whitelistWaitingBody {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+  line-height: 1.5;
+  max-width: 440px;
+}
+
+.whitelistPollProgress {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-04;
+  background: colors.$gray-10;
+  border-radius: 4px;
+  margin-top: layout.$spacing-03;
+}
+
+.whitelistPollTimer {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+.backButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-04;
+}

package/src/shared/patient-chart/patient-summary-dashboard/patient-summary-dashboard.component.tsx

@@ -1,91 +1,12 @@
-import React, { useMemo } from 'react';
-import { Layer, Grid, Column } from '@carbon/react';
-import {
-  CloudMonitoring,
-  Activity,
-  IbmWatsonDiscovery,
-  Settings,
-  Dashboard,
-  Calendar,
-  Attachment,
-  GraphicalDataFlow,
-} from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import styles from './patient-summary-dashboard.scss';
-import ExtensionTabs, { ExtensionTabItem } from '../../tabs/extension-tabs.component';
-import { useShowPatography } from '../patient-chart.resources';
+import React from 'react';
+import ExtensionTabs from '../../tabs/extension-tabs.component';
 
 type PatientSummaryDashboardProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
-
-const PatientSummaryDashboard: React.FC<PatientSummaryDashboardProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const { showPartography } = useShowPatography(patient);
-  const items: Array<ExtensionTabItem> = [
-    {
-      label: t('patientSummary', 'Patient Summary'),
-      icon: Dashboard,
-      slotName: 'ewf-patient-summary-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('vitalsAndAnthropometric', 'Vitals & Anthropometric'),
-      icon: Activity,
-      slotName: 'ewf-vitals-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('carePanel', 'Care Panel'),
-      icon: CloudMonitoring,
-      slotName: 'ewf-care-panel-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('immunizations', 'Immunizations'),
-      icon: IbmWatsonDiscovery,
-      slotName: 'ewf-immunizations-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('relationships', 'Relationships'),
-      icon: Settings,
-      slotName: 'ewf-relationships-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('appointments', 'Appointments'),
-      icon: Calendar,
-      slotName: 'ewf-appointments-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-    {
-      label: t('attachments', 'Attachments'),
-      icon: Attachment,
-      slotName: 'ewf-attachments-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    },
-  ];
-  if (showPartography) {
-    items.push({
-      label: t('partograph', 'Partograph'),
-      icon: GraphicalDataFlow,
-      slotName: 'maternal-and-child-health-partograph-slot',
-      slotClassName: styles.ewfExtensionSlot,
-    });
-  }
-
-  return (
-    <Layer>
-      <Grid condensed>
-        <Column lg={16} md={8} sm={4}>
-          <ExtensionTabs items={items} state={state} />
-        </Column>
-      </Grid>
-    </Layer>
-  );
+const PATIENT_CHART_PATIENT_SUMMARY_EXTENSION_SLOT = 'ewf-patient-chart-patient-summary-tabs-extension-slot';
+const PatientSummaryDashboard: React.FC<PatientSummaryDashboardProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName={PATIENT_CHART_PATIENT_SUMMARY_EXTENSION_SLOT} patientUuid={patientUuid} />;
 };
 
 export default PatientSummaryDashboard;

package/src/shared/pin-put/pinput.component.test.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 import PinPut from './pinput.component';
 
 describe('PinPut Component', () => {
   const defaultProps = {
     value: '',
-    onChange: jest.fn(),
+    onChange: vi.fn(),
     numInputs: 5,
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders with default props', () => {
@@ -37,7 +38,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onChange when input value changes', async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onChange={onChange} />);
@@ -109,7 +110,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onComplete when all inputs are filled', async () => {
-    const onComplete = jest.fn();
+    const onComplete = vi.fn();
 
     // Test with a pre-filled value that matches the number of inputs
     render(<PinPut {...defaultProps} numInputs={3} onComplete={onComplete} value="123" />);
@@ -119,7 +120,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onFocus when input gains focus', async () => {
-    const onFocus = jest.fn();
+    const onFocus = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onFocus={onFocus} />);
@@ -131,7 +132,7 @@ describe('PinPut Component', () => {
   });
 
   it('calls onBlur when input loses focus', async () => {
-    const onBlur = jest.fn();
+    const onBlur = vi.fn();
     const user = userEvent.setup();
 
     render(<PinPut {...defaultProps} onBlur={onBlur} />);

package/src/shared/tabs/create-tab-extension.tsx

@@ -0,0 +1,33 @@
+import { ExtensionSlot, FHIRResource } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './patient-summary-dashboard.scss';
+export const createTabExtension = (extensionSlotName?: string) => {
+  return function TabExtension(props: any) {
+    return <TabWithExtensionSlot extensionSlotName={extensionSlotName} {...props} />;
+  };
+};
+
+const TabWithExtensionSlot: React.FC<{
+  extensionSlotName?: string;
+  patientUuid: string;
+  patient: FHIRResource;
+  _meta?: {
+    slot?: string;
+    [key: string]: any;
+  };
+}> = ({ extensionSlotName, patientUuid, patient, _meta }) => {
+  if (!_meta?.slot && !extensionSlotName) {
+    console.warn(
+      'No slot provided for TabExtension. Please provide a slot in the route meta or as an argument to createTabExtension.',
+    );
+    return null;
+  }
+  const { slot, ...others } = _meta || {};
+  return (
+    <ExtensionSlot
+      name={_meta?.slot ?? (extensionSlotName as string)}
+      state={{ patientUuid, patient, ...others }}
+      className={styles.ewfExtensionSlot}
+    />
+  );
+};

package/src/shared/tabs/extension-tabs.component.tsx

@@ -1,41 +1,59 @@
-import React, { useState } from 'react';
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
-import { ExtensionSlot } from '@openmrs/esm-framework';
-
-export type ExtensionTabItem = {
-  label: React.ReactNode;
-  icon?: React.ComponentType<unknown>;
-  slotName: string;
-  slotClassName?: string;
-};
+import { Layer, Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton } from '@carbon/react';
+import { ErrorState, Extension, translateFrom, usePatient } from '@openmrs/esm-framework';
+import { ComponentContext, useExtensionSlot } from '@openmrs/esm-framework/src/internal';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type ExtensionTabsProps = {
-  items: Array<ExtensionTabItem>;
-  state?: Record<string, unknown>;
-  contained?: boolean;
+  extensionSlotName: string;
+  patientUuid: string;
 };
 
-const ExtensionTabs: React.FC<ExtensionTabsProps> = ({ items, state, contained = true }) => {
-  const [activeTab, setActiveTab] = useState<number>(0);
+const ExtensionTabs: React.FC<ExtensionTabsProps> = ({ extensionSlotName, patientUuid }) => {
+  const { t } = useTranslation();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+
+  const { extensions, extensionSlotModuleName } = useExtensionSlot(extensionSlotName, state);
+  if (isLoading) {
+    return <TabsSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('error', 'Error')} error={error} />;
+  }
+
   return (
-    <Tabs selectedIndex={activeTab} onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}>
-      <TabList contained={contained}>
-        {items.map((item) => (
-          <Tab key={item.slotName} renderIcon={item.icon}>
-            {item.label}
-          </Tab>
-        ))}
-      </TabList>
-      <TabPanels>
-        {items.map((item, index) => (
-          <TabPanel key={item.slotName}>
-            {index === activeTab ? (
-              <ExtensionSlot className={item.slotClassName} name={item.slotName} state={state} />
-            ) : null}
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </Tabs>
+    <Layer>
+      <Tabs>
+        <TabList contained>
+          {extensions.map((ext) => (
+            <Tab key={ext.name}>{translateFrom(extensionSlotModuleName, ext.meta.title, ext.meta.title)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels
+          data-extension-slot-name={extensionSlotName}
+          data-extension-slot-module-name={extensionSlotModuleName}>
+          {extensions.map((ext) => (
+            <TabPanel key={ext.name}>
+              <ComponentContext.Provider
+                key={ext.id}
+                value={{
+                  featureName: ext.meta.featureName,
+                  moduleName: ext.moduleName,
+                  extension: {
+                    extensionId: ext.id,
+                    extensionSlotName: extensionSlotName,
+                    extensionSlotModuleName: ext.moduleName,
+                  },
+                }}>
+                <Extension state={state} />
+              </ComponentContext.Provider>
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Layer>
   );
 };