@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/registry/modal/biometrics-verification-modal/biometrics-verification-modal.scss

@@ -0,0 +1,277 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 24px;
+  background: white;
+  border-radius: 8px;
+  width: 100%;
+  // max-width: 450px;
+  box-sizing: border-box;
+}
+
+.container h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #161616;
+}
+
+.container > p {
+  margin: 0;
+  font-size: 14px;
+  color: #525252;
+}
+
+.scannerZone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.scannerCircle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 1px solid #d0d7de;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f4f4f4;
+}
+
+.scannerCircle svg {
+  width: 56px;
+  height: 56px;
+  color: green;
+}
+
+
+
+.statusLabel {
+  text-align: center;
+  font-size: 13px;
+  color: #6f6f6f;
+}
+
+.statusLabel.active {
+  color: #0f62fe;
+}
+
+.button {
+  height: 40px;
+  border: none;
+  border-radius: 4px;
+  background: green;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  align-self: center;
+}
+
+.button:hover:not(:disabled) {
+  background: green;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.result {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.qualityRow {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: #525252;
+}
+
+.qualityBar {
+  width: 100%;
+  height: 6px;
+  background: #e0e0e0;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.qualityBarInner {
+  height: 100%;
+  background: #24a148;
+}
+
+.fingerprintImage {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  align-self: center;
+  border-radius: 8px;
+  border: 1px solid #dcdcdc;
+}
+
+.error {
+  padding: 12px;
+  background: #fff1f1;
+  border: 1px solid #ffd7d9;
+  border-radius: 4px;
+  color: #da1e28;
+  font-size: 13px;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.modal {
+  width: 100%;
+  max-width: 500px;
+  margin: 16px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #525252;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  background: #f4f4f4;
+}
+
+.centerText {
+  text-align: center;
+}
+
+.iframe {
+  width: 100%;
+  height: 700px;
+  border: none;
+}
+
+/* ---- Neat, colour-coded biometric status ---- */
+.bioWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.bioStatus {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+
+.bioIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.bioText {
+  flex: 1;
+  min-width: 0;
+}
+
+.bioTitle {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #161616;
+}
+
+.bioSubtitle {
+  margin: 0.125rem 0 0;
+  font-size: 0.8125rem;
+  color: #525252;
+}
+
+.bioDot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+// Ready — everything OK (green)
+.bioReady {
+  border-color: #a7f0ba;
+  background: #defbe6;
+
+  .bioIcon {
+    background: #a7f0ba;
+    color: #0e6027;
+  }
+  .bioDot {
+    background: #24a148;
+  }
+}
+
+// Not active / not detected (red)
+.bioError {
+  border-color: #ffd7d9;
+  background: #fff1f1;
+
+  .bioIcon {
+    background: #ffd7d9;
+    color: #a2191f;
+  }
+  .bioDot {
+    background: #da1e28;
+  }
+}
+
+// Connecting / detecting (neutral)
+.bioConnecting {
+  border-color: #e0e0e0;
+  background: #f4f4f4;
+
+  .bioIcon {
+    background: #e0e0e0;
+    color: #525252;
+  }
+  .bioDot {
+    background: #8d8d8d;
+  }
+}
+
+.bioLoading {
+  padding-left: 0.25rem;
+}
+
+.bioRetry {
+  flex-shrink: 0;
+  min-height: 2rem;
+}
+
+.retryButton {
+  margin-top: 1rem;
+  align-self: center;
+}

package/src/registry/modal/biometrics-verification-modal/biometrics-verification-modal.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable no-console */
+import React, { useEffect, useMemo, useState } from 'react';
+
+import styles from './biometrics-verification-modal.scss';
+import { getWorkstationId, getBiometrictsRequestUrl, getAuthorizations } from '../../hie.resource';
+import { usePatient } from '../../../context/patient-context';
+import { useSession } from '@openmrs/esm-framework';
+import { type BiometricsStatus } from '../../hie.types';
+import { Button, InlineLoading } from '@carbon/react';
+import { FingerprintRecognition, Renew } from '@carbon/react/icons';
+
+type BiometricsVerificationModalProps = {
+  open: boolean;
+  onClose: () => void;
+  serviceType: string;
+  interventionCode: string;
+  isDischarge?: boolean;
+  onScanStatusChange?: (status: string) => void;
+  /** Fired when this biometric attempt fails (rejected/expired/timeout/error). */
+  onFailure?: (reason: string) => void;
+  /** Fired as the panel moves between connecting / ready / error. */
+  onStatusChange?: (status: 'connecting' | 'ready' | 'error') => void;
+};
+
+const BiometricsVerificationModal: React.FC<BiometricsVerificationModalProps> = ({
+  open,
+  onClose,
+  serviceType,
+  interventionCode,
+  isDischarge,
+  onScanStatusChange,
+  onFailure,
+  onStatusChange,
+}) => {
+  const [error, setError] = useState<string | null>(null);
+  const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
+  const [biometricIframeUrl, setBiometricIframeUrl] = useState<string>('');
+  const [workstationId, setWorkstationId] = useState<string>('');
+  const [authGuid, setAuthGuid] = useState<string>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation?.uuid;
+
+  const { patient } = usePatient();
+
+  const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  const waitForAuthorization = async (token: string) => {
+    const maxAttempts = 10;
+    const interval = 5000;
+
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+      await delay(interval);
+
+      const pending = await getAuthorizations(locationUuid!, undefined, token);
+
+      if (!pending?.length) {
+        continue;
+      }
+
+      const authorization = pending[0];
+      const { status } = authorization;
+
+      switch (status) {
+        case 'AUTHORIZED': {
+          const authGuid = authorization.guid;
+
+          setAuthGuid(authGuid);
+          onScanStatusChange?.(authGuid);
+
+          return;
+        }
+
+        case 'REJECTED':
+          setError('Biometric verification was rejected.');
+          onFailure?.('rejected');
+          return;
+
+        case 'EXPIRED':
+          setError('Biometric verification has expired.');
+          onFailure?.('expired');
+          return;
+
+        case 'PENDING':
+          break;
+
+        default:
+          console.warn('Unknown authorization status:', status);
+          break;
+      }
+    }
+
+    setError('Authorization timed out. Please try again.');
+    onFailure?.('timeout');
+  };
+
+  const initialize = async () => {
+    if (!patient || !locationUuid) return;
+    try {
+      setError(null);
+      setBiometricIframeUrl('');
+      const workstation: BiometricsStatus = await getWorkstationId();
+      setWorkstationId(workstation.workstationID);
+
+      const urlData = await getBiometrictsRequestUrl(
+        patient,
+        locationUuid,
+        interventionCode,
+        serviceType,
+        workstation.workstationID,
+        {
+          isDischarge,
+        },
+      );
+      const token = urlData.token;
+
+      const url = urlData?.shaVerificationRequest?.requestUrl;
+
+      setBiometricIframeUrl(url);
+
+      await waitForAuthorization(token);
+    } catch {
+      // Expected when the biometric workstation service (localhost:18065) isn't
+      // running — handled gracefully by the "Scanner not detected" card below.
+      setError('Scanner not configured or not detected on this workstation.');
+      onFailure?.('error');
+    }
+  };
+
+  useEffect(() => {
+    initialize();
+  }, [patient, locationUuid, interventionCode, serviceType, onScanStatusChange]);
+
+  const config = useMemo(
+    () => ({
+      type: 'INIT_DEVICE_CONFIG',
+      payload: {
+        devices: [
+          {
+            id: 'H59241200603',
+            name: 'Secugen',
+            displayName: 'SladeID',
+            type: 'Fingerprint',
+          },
+        ],
+        card_readers: [],
+        isAuthed: true,
+        workstationID: workstationId || '54cf356c-c4f9-4fd2-a9df-9ca1723b98a6-B0A460977E12',
+        version: '1.14.0519.1301',
+      },
+    }),
+    [workstationId],
+  );
+
+  const status: 'ready' | 'connecting' | 'error' = error ? 'error' : biometricIframeUrl ? 'ready' : 'connecting';
+  const statusMeta = {
+    ready: {
+      title: 'Scanner ready',
+      subtitle: "Place the client's finger on the scanner to verify their identity.",
+    },
+    connecting: {
+      title: 'Connecting to scanner…',
+      subtitle: 'Detecting the fingerprint device on this workstation.',
+    },
+    error: {
+      title: /not detected|not configured|initialize|connect/i.test(error ?? '')
+        ? 'Scanner not detected'
+        : 'Verification failed',
+      subtitle: error || 'The fingerprint device is not configured or not connected on this workstation.',
+    },
+  }[status];
+  const statusClass = { ready: styles.bioReady, connecting: styles.bioConnecting, error: styles.bioError }[status];
+
+  useEffect(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+
+  return (
+    <div className={styles.bioWrap}>
+      <div className={`${styles.bioStatus} ${statusClass}`}>
+        <span className={styles.bioIcon}>
+          <FingerprintRecognition size={20} />
+        </span>
+        <div className={styles.bioText}>
+          <p className={styles.bioTitle}>{statusMeta.title}</p>
+          <p className={styles.bioSubtitle}>{statusMeta.subtitle}</p>
+        </div>
+        {status === 'error' ? (
+          <Button kind="danger--ghost" size="sm" renderIcon={Renew} onClick={initialize} className={styles.bioRetry}>
+            Retry
+          </Button>
+        ) : (
+          <span className={styles.bioDot} />
+        )}
+      </div>
+
+      {status === 'connecting' && (
+        <InlineLoading className={styles.bioLoading} description="Connecting to fingerprint scanner…" />
+      )}
+
+      {status === 'ready' && (
+        <iframe
+          ref={iframeRef}
+          src={biometricIframeUrl}
+          className={styles.iframe}
+          onLoad={() => {
+            setTimeout(() => {
+              const origin = new URL(biometricIframeUrl).origin;
+              iframeRef.current?.contentWindow?.postMessage(config, origin);
+            }, 500);
+          }}
+          onError={() => console.log('Iframe failed')}
+        />
+      )}
+    </div>
+  );
+};
+
+export default BiometricsVerificationModal;

package/src/registry/modal/biometrics-verification-modal/type.ts

@@ -0,0 +1,39 @@
+interface SGICaptureRequest {
+  Timeout: number;
+  Quality: number;
+  licstr: string;
+  templateFormat: 'ISO' | 'ANSI';
+}
+
+interface SGICaptureResponse {
+  ErrorCode: number;
+  Quality: number;
+  BMPBase64: string;
+  TemplateBase64: string;
+  Width: number;
+  Height: number;
+  MaxTemplateSize: number;
+  TemplateSize: number;
+}
+
+interface SGIMatchRequest {
+  template1: string;
+  template2: string;
+  templateFormat: 'ISO' | 'ANSI';
+}
+
+interface SGIMatchResponse {
+  ErrorCode: number;
+  MatchingScore: number;
+}
+
+interface CaptureResult {
+  image: string;
+  isoTemplate: string;
+  quality: number;
+}
+
+interface MatchResult {
+  matched: boolean;
+  score: number;
+}

package/src/registry/modal/client-details-modal/client-details-modal.tsx

@@ -1,16 +1,17 @@
-import { Button, Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
-import { type HieClient } from '../../types';
-import React from 'react';
+import { Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { type HieClientEligibility, type EligibilityFilterDto, type HieClient } from '../../types';
+import React, { useEffect, useState } from 'react';
 import styles from './client-details-modal.scss';
 import ClientDetails from '../../client-details/client-details';
-import PaymentOptionsComponent from '../../payment-details/payment-options/payment-options';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { getClientEligibityStatus } from '../../../shared/services/eligibility.resource';
+import EligibilityDetails from '../../eligibility/eligibility-details/eligibility-details';
 
 interface ClientDetailsModalProps {
   client: HieClient;
   open: boolean;
   onModalClose: () => void;
-  onSubmit: () => void;
-  onSendClientToTriage: (crId: string) => void;
+  onSubmit: (crId: string) => void;
 }
 
 const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({
@@ -18,59 +19,94 @@ const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({
   open,
   onModalClose,
   onSubmit,
-  onSendClientToTriage,
 }) => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation?.uuid;
+  const [clientEligibility, setClientEligibility] = useState<HieClientEligibility>();
+  useEffect(() => {
+    if (client && client.id) {
+      getPatientEligibilityStatus();
+    }
+  }, [client]);
   if (!client) {
     return <>No Client data</>;
   }
-  const registerOnAfyaYangu = () => {
-    window.open('https://afyayangu.go.ke/', '_blank');
-  };
+  function generatePatientEligibilityPayload(): EligibilityFilterDto {
+    const payload: EligibilityFilterDto = {
+      requestIdNumber: '',
+      requestIdType: '',
+      locationUuid: locationUuid ?? '',
+    };
+
+    if (client && client.id) {
+      payload.requestIdNumber = client.id;
+      payload.requestIdType = '3';
+    }
+
+    return payload;
+  }
+
+  async function getPatientEligibilityStatus() {
+    const payload = generatePatientEligibilityPayload();
+    if (!isValidEligibilityPayload(payload)) {
+      return;
+    }
+    try {
+      const resp = await getClientEligibityStatus(payload);
+      setClientEligibility(resp);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Failed getting eligibility status',
+        subtitle: 'An error occurred while fetching eligibility status. Please try again or contact support',
+      });
+    }
+  }
+  function isValidEligibilityPayload(eligibilityFilterDto: EligibilityFilterDto): boolean {
+    if (!eligibilityFilterDto.locationUuid) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdNumber) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdType) {
+      return false;
+    }
+
+    return true;
+  }
   return (
     <>
       <Modal
         open={open}
-        size="md"
+        size="lg"
         onSecondarySubmit={onModalClose}
         onRequestClose={onModalClose}
-        onRequestSubmit={registerOnAfyaYangu}
-        primaryButtonText="Register on Afya Yangu"
+        onRequestSubmit={() => onSubmit(client.id)}
+        primaryButtonText="Next"
         secondaryButtonText="Cancel"
       >
         <ModalBody>
           <div className={styles.clientDetailsLayout}>
             <div className={styles.sectionHeader}>
-              <h4 className={styles.sectionTitle}>Patient/Payment Details</h4>
+              <h4 className={styles.sectionTitle}>Patient Details</h4>
             </div>
             <div className={styles.sectionContent}>
               <Tabs>
                 <TabList contained>
                   <Tab>Patient Details</Tab>
-                  <Tab>Payment Details</Tab>
+                  <Tab>Eligibility Details</Tab>
                 </TabList>
                 <TabPanels>
                   <TabPanel>
                     <ClientDetails client={client} />
                   </TabPanel>
                   <TabPanel>
-                    <PaymentOptionsComponent />
+                    {clientEligibility && <EligibilityDetails hieClientEligibility={clientEligibility} />}
                   </TabPanel>
                 </TabPanels>
               </Tabs>
             </div>
-            <div className={styles.actionSection}>
-              <div className={styles.btnContainer}>
-                <Button kind="primary">Book Appointment</Button>
-              </div>
-              <div className={styles.btnContainer}>
-                <Button kind="secondary">Walk In Orders</Button>
-              </div>
-              <div className={styles.btnContainer}>
-                <Button kind="tertiary" onClick={() => onSendClientToTriage(client.id)}>
-                  Send To Triage
-                </Button>
-              </div>
-            </div>
           </div>
         </ModalBody>
       </Modal>