@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

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,92 +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 { useSearchParams } from 'react-router-dom';
-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(patientUuid);
-  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} />);