@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/registry/registry.component.tsx

@@ -1,81 +1,172 @@
 import {
+  Breadcrumb,
+  BreadcrumbItem,
   Button,
   Dropdown,
-  InlineLoading,
+  Layer,
+  Loading,
   RadioButton,
-  RadioButtonGroup,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Tag,
   TextInput,
 } from '@carbon/react';
+import {
+  Search,
+  SearchLocate,
+  WarningAlt,
+  WarningAltFilled,
+  UserMultiple,
+  Identification,
+  CheckmarkOutline,
+  Close,
+} from '@carbon/react/icons';
 import React, { useState } from 'react';
 import styles from './registry.component.scss';
-import { type HieClient, IDENTIFIER_TYPES, type IdentifierType, type RequestCustomOtpDto } from './types';
+import {
+  type ClientRegistrySearchRequest,
+  type CreateVisitDto,
+  type HieClient,
+  IDENTIFIER_TYPES,
+  type IdentifierType,
+  type QueueEntryDto,
+  type RequestCustomOtpDto,
+  type VisitAttribute,
+} from './types';
+import { createVisit } from '../resources/visit.resource';
+import { createQueueEntry } from '../resources/queue.resource';
+import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../shared/constants/concepts';
+import { VisitTypeUuids } from '../shared/constants/visit-types';
+import {
+  createConsultationClearance,
+  findOpenPrepaidService,
+  fulfillPrepaidService,
+} from '../shared/services/consultation-clearance.resource';
 import { fetchClientRegistryData } from './registry.resource';
-import { type Patient, showSnackbar, useSession } from '@openmrs/esm-framework';
-import OtpVerificationModal from './modal/otp-verification-modal/otp-verification-modal';
-import { maskExceptFirstAndLast, maskValue } from './utils/mask-data';
-import ClientDetailsModal from './modal/client-details-modal/client-details-modal';
+import { type Patient, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
+import { maskCrNumber, maskExceptFirstAndLast } from './utils/mask-data';
 import { searchPatientByCrNumber } from '../resources/patient-search.resource';
 import SendToTriageModal from './modal/send-to-triage/send-to-triage.modal';
-import { useNavigate } from 'react-router-dom';
-import { formatDependantDisplayData } from './utils/format-dependant-display-data';
+import WorkflowDrawer from './drawer/workflow-drawer.component';
 import { registerHieClientInAmrs } from '../resources/hie-amrs-automatic-registration.service';
-import { getErrorMessages } from './utils/error-handler';
+import { getErrorMessages, getReadableErrorMessage } from './utils/error-handler';
+import { IdentifierTypesUuids } from '../resources/identifier-types';
+import { formatPhoneNumberForOTP } from './utils/phone-number-formatter';
+import { usePatient } from '../context/patient-context';
+import FacilityAndWorkerSlot from '../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+import RegistrationList from './registration-list/registration-list.component';
+import { type ConfigObject } from '../config-schema';
 
 interface RegistryComponentProps {}
 const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
   const [identifierValue, setIdentifierValue] = useState('');
+  const [validationError, setValidationError] = useState<string>('');
+  const [notFound, setNotFound] = useState<boolean>(false);
+  const [fetchError, setFetchError] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
   const [principal, setPrincipal] = useState<HieClient>();
-  const [selectedDependant, setSelectedDependant] = useState<HieClient>();
   const [amrsPatients, setAmrsPatients] = useState<Patient[]>([]);
+  const [amrsChecked, setAmrsChecked] = useState<boolean>(false);
+  const [syncingAmrs, setSyncingAmrs] = useState<boolean>(false);
   const [selectedPatient, setSelectedPatient] = useState<string>('principal');
   const [displayOtpModal, setDisplayOtpModal] = useState<boolean>(false);
   const [displayClientDetailsModal, setDisplayClientDetailsModal] = useState<boolean>(false);
-  const [displaytriageModal, setDisplaytriageModal] = useState<boolean>(false);
+  const [displaytStartVisitModal, setdisplaytStartVisitModal] = useState<boolean>(false);
+  const [displayDrawer, setDisplayDrawer] = useState<boolean>(false);
   const [requestCustomOtpDto, setRequestCustomOtpDto] = useState<RequestCustomOtpDto>();
   const session = useSession();
-  const locationUuid = session.sessionLocation.uuid;
-  const navigate = useNavigate();
+  const locationUuid = session?.sessionLocation?.uuid;
+  const { setPatient } = usePatient();
+  const { cashPaymentModeUuid, shaPaymentModeUuid } = useConfig<ConfigObject>();
+
+  const validateForm = (): string => {
+    const value = identifierValue.trim();
+    if (!value) {
+      return `${identifierType} value is required`;
+    }
+    if (value.length < 4) {
+      return `Enter a valid ${identifierType.toLowerCase()} (minimum 4 characters)`;
+    }
+    if (identifierType === 'National ID' && !/^\d+$/.test(value)) {
+      return 'National ID must contain digits only';
+    }
+    if (!locationUuid) {
+      return 'No default location selected. Please set your session location.';
+    }
+    return '';
+  };
 
   const handleSearchPatient = async () => {
+    const error = validateForm();
+    if (error) {
+      setValidationError(error);
+      return;
+    }
+    setValidationError('');
+    setNotFound(false);
+    setFetchError('');
     setLoading(true);
     try {
-      const payload = {
-        identificationNumber: identifierValue,
-        identificationType: identifierType,
-        locationUuid,
-      };
+      const searchClientPayload = getSearchClientDto();
 
-      if (!isValidCustomSmsPayload(payload)) return false;
+      if (!isValidSeatchClientPayload(searchClientPayload)) return false;
 
-      setRequestCustomOtpDto(payload);
-
-      const result = await fetchClientRegistryData(payload);
+      const result = await fetchClientRegistryData(searchClientPayload);
       const patients = Array.isArray(result) ? result : [];
 
       if (patients.length === 0) {
-        handleCancel();
-        throw new Error('No matching patient found in Client Registry.');
+        setPrincipal(null);
+        setNotFound(true);
+        return;
       }
 
       const patient = patients[0];
+      setPatient(patient);
       setPrincipal(patient);
-      showAlert('success', 'Client Data Loaded', 'Patient fetched successfully');
+      // Auto-select the principal by default so the worker can proceed immediately.
+      setSelectedPatient('principal');
     } catch (err: any) {
-      const errorMessage = err.message || 'Failed to fetch client data';
-      handleCancel();
-      showAlert('error', 'Fetch Failed', errorMessage);
+      // Communicate the failure on the page (keep the worker's input so they can retry).
+      const errorMessage = getReadableErrorMessage(err, 'We couldn’t reach the Client Registry.');
+      setPrincipal(null);
+      setFetchError(errorMessage);
     } finally {
       setLoading(false);
     }
   };
+
+  const getSearchClientDto = (): ClientRegistrySearchRequest => {
+    return {
+      identificationNumber: identifierValue.trim(),
+      identificationType: identifierType,
+      locationUuid,
+    };
+  };
+
+  const isValidSeatchClientPayload = (payload: ClientRegistrySearchRequest): boolean => {
+    if (!payload.identificationNumber) {
+      showAlert('error', 'Please enter a valid identification number', '');
+      return false;
+    }
+    if (!payload.identificationType) {
+      showAlert('error', 'Please enter a valid identification type', '');
+      return false;
+    }
+    if (!payload.locationUuid) {
+      showAlert('error', 'No default location selected', '');
+      return false;
+    }
+    return true;
+  };
+
+  const generateCustomSmsPayload = (): RequestCustomOtpDto => {
+    return {
+      identificationNumber: identifierValue,
+      identificationType: identifierType,
+      locationUuid,
+      phoneNumber: principal?.phone ? formatPhoneNumberForOTP(principal.phone ?? '') : '',
+    };
+  };
+
   const isValidCustomSmsPayload = (payload: RequestCustomOtpDto): boolean => {
     if (!payload.identificationNumber) {
       showAlert('error', 'Please enter a valid identification number', '');
@@ -89,9 +180,13 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
       showAlert('error', 'No default location selected', '');
       return false;
     }
+    if (!payload.phoneNumber) {
+      showAlert('error', 'No phone number selected', '');
+      return false;
+    }
     return true;
   };
-  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+  const showAlert = (alertType: 'error' | 'success' | 'info' | 'warning', title: string, subtitle: string) => {
     showSnackbar({
       kind: alertType,
       title: title,
@@ -101,70 +196,96 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const handleSelectedPatient = (sp: string) => {
     setSelectedPatient(sp);
   };
-  const handleOtpVerification = () => {
-    setDisplayOtpModal(true);
+  // Open the registration workflow drawer, which handles biometric + OTP verification,
+  // consent and starting the visit inline (replacing the old OTP/client-details modals).
+  const handleOtpVerification = async () => {
+    const smsPayload = generateCustomSmsPayload();
+    if (!isValidCustomSmsPayload(smsPayload)) {
+      return;
+    }
+    setRequestCustomOtpDto(smsPayload);
+    const client = getPatient();
+    if (client?.id) {
+      await searchAmrsPatient(client.id);
+    }
+    setDisplayDrawer(true);
+  };
+  const handleClearIdentifier = () => {
+    setIdentifierValue('');
+    setValidationError('');
+    setNotFound(false);
   };
   const handleModelClose = () => {
     setDisplayOtpModal(false);
   };
   const onClientDetailsModalClose = () => {
+    onClientDetailsModalClose();
     setDisplayClientDetailsModal(false);
   };
-  const handleClientDetailsSubmit = () => {
-    return;
+  const handleClientDetailsSubmit = async (crId: string) => {
+    setDisplayClientDetailsModal(false);
+    await searchAmrsPatient(crId);
+    setDisplayDrawer(true);
   };
   const handleEmergencyRegistration = () => {
     window.location.href = `${window.spaBase}/patient-registration`;
   };
   const handleManualRegistration = () => {
-    setDisplaytriageModal(false);
+    setdisplaytStartVisitModal(false);
     handleEmergencyRegistration();
   };
-  const handleSendClientToTriage = async (crId: string) => {
-    onClientDetailsModalClose();
+  // Look the client up in the EMR. The found / not-found result is surfaced in the
+  // workflow drawer (see amrsPatients / amrsChecked) so the user can decide whether to
+  // create the patient in the EMR or sync an existing record.
+  const searchAmrsPatient = async (crId: string) => {
+    setAmrsChecked(false);
     const resp = await searchPatientByCrNumber(crId);
     if (resp.totalCount > 0) {
-      showAlert(
-        'success',
-        `${resp.totalCount} ${resp.totalCount > 0 ? 'Patients' : 'Patient'} found in the system with ${crId}`,
-        '',
-      );
-      setAmrsPatients(resp.results);
-      setDisplaytriageModal(true);
+      const validPatients = validateAmrsPatient(crId, resp.results ?? []);
+      setAmrsPatients(validPatients);
     } else {
-      showAlert('error', 'Patient not found in the system', '');
       setAmrsPatients([]);
-      setDisplaytriageModal(true);
     }
+    setAmrsChecked(true);
+  };
+  // Refresh the matched EMR record so the latest state is used for the visit.
+  const syncAmrsPatient = async () => {
+    const client = getPatient();
+    if (!client?.id) {
+      return;
+    }
+    setSyncingAmrs(true);
+    try {
+      await searchAmrsPatient(client.id);
+      showAlert('success', 'EMR record refreshed', '');
+    } catch (e) {
+      showAlert('error', 'Could not sync the EMR record', '');
+    } finally {
+      setSyncingAmrs(false);
+    }
+  };
+  const validateAmrsPatient = (crNo: string, patients: Patient[]) => {
+    return patients.filter((p) => {
+      return p.identifiers.some((id) => {
+        return id.identifier === crNo && id.identifierType.uuid === IdentifierTypesUuids.CLIENT_REGISTRY_NO_UUID;
+      });
+    });
   };
   const onSendToTriageModalClose = (modalCloseResp?: { success: boolean }) => {
-    setDisplaytriageModal(false);
+    setdisplaytStartVisitModal(false);
     if (modalCloseResp && modalCloseResp.success) {
-      navigate('/triage');
+      window.location.href = `${window.spaBase}/home/triage`;
     }
   };
   const handleSendToTriageModalSubmit = () => {};
   const getPatient = (): HieClient => {
-    if (selectedPatient === 'principal') {
-      return principal;
-    } else if (selectedPatient === 'dependants') {
-      return selectedDependant;
-    } else {
+    if (!principal || selectedPatient === 'principal') {
       return principal;
     }
+    const match = principal.dependants?.find((d) => d.result[0].id === selectedPatient);
+    return match ? (match.result[0] as unknown as HieClient) : principal;
   };
-  const handleSelectedDependant = (dependantId: string) => {
-    const dependants = principal.dependants;
-    if (dependants.length > 0) {
-      const dependant = dependants.find((d) => {
-        return d.result[0].id === dependantId;
-      });
-      if (dependant) {
-        setSelectedDependant(dependant.result[0] as unknown as HieClient);
-      }
-    }
-  };
-  const createAmrsPatient = async () => {
+  const createAmrsPatient = async (): Promise<Patient | undefined> => {
     const patient = getPatient();
     if (!patient) {
       showAlert('error', 'Principal or dependant not selected', '');
@@ -175,6 +296,7 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
       if (resp) {
         showAlert('success', 'Patient created succesfully', '');
         setAmrsPatients([resp]);
+        return resp;
       }
     } catch (e) {
       const errorResp = e['responseBody'] ?? e.message;
@@ -187,211 +309,415 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
       }
     }
   };
+  // Create the AMRS visit for the verified client once the workflow drawer is submitted,
+  // add them to the selected triage queue, and raise the consultation clearance so they
+  // wait "Awaiting clearance" until Accounting settles the fee (exempt patients auto-clear).
+  const getVisitAttributes = (paymentMethod: 'cash' | 'insurance', insurance: string) => {
+    const attributes: VisitAttribute[] = [];
+    if (paymentMethod) {
+      attributes.push({
+        attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+        value: paymentMethod === "cash"
+          ? cashPaymentModeUuid
+          : shaPaymentModeUuid // /sha|shif/i.test(insurance) ? shaPaymentModeUuid : "",
+      });
+    }
+    return attributes;
+  }
+  const startVisitForClient = async (details: {
+    patientCategory: string;
+    room: string;
+    roomUuid: string;
+    visitType: string;
+    method?: 'cash' | 'insurance';
+    insurance?: string;
+  }) => {
+    // Ensure the client exists in AMRS before starting a visit.
+    let amrsPatient = amrsPatients[0];
+    if (!amrsPatient) {
+      amrsPatient = await createAmrsPatient();
+    }
+    if (!amrsPatient?.uuid) {
+      showAlert('error', 'No patient available to start a visit for', '');
+      return;
+    }
+    if (!details.roomUuid) {
+      showAlert('error', 'Selected triage room could not be resolved to a queue', '');
+      return;
+    }
+    const visitType =
+      details.visitType === 'Inpatient'
+        ? VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID
+        : VisitTypeUuids.OPD_VISIT_TYPE_UUID;
+    const visitDto: CreateVisitDto = {
+      visitType,
+      location: locationUuid ?? '',
+      startDatetime: null,
+      stopDatetime: null,
+      patient: amrsPatient.uuid,
+    };
+    const visitAttributes = getVisitAttributes(details.method, details.insurance);
+    if (visitAttributes.length > 0) {
+      visitDto['attributes'] = visitAttributes;
+    }
+    try {
+      const visit = await createVisit(visitDto);
+      if (!visit?.uuid) {
+        showAlert('error', 'Error creating visit', '');
+        return;
+      }
+
+      // Place the patient in the selected triage queue (Waiting / Normal priority).
+      const queueEntryDto: QueueEntryDto = {
+        visit: { uuid: visit.uuid },
+        queueEntry: {
+          status: { uuid: QUEUE_STATUS_UUIDS.WAITING_UUID },
+          priority: { uuid: QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID },
+          queue: { uuid: details.roomUuid },
+          patient: { uuid: amrsPatient.uuid },
+          startedAt: visit.startDatetime ?? new Date().toISOString(),
+          sortWeight: 0,
+        },
+      };
+      await createQueueEntry(queueEntryDto);
+
+      // Raise the consultation clearance for CASH patients only — they sit
+      // "Awaiting payment" in the Accounting dashboard until the fee is settled.
+      // SHA/insurance patients are cleared through the SHA claim (their real
+      // active visit is the source of truth under "Pending clearance"), so we
+      // don't raise a cash clearance record for them.
+      /*
+      const client = getPatient();
+      const isCash = details.method !== 'insurance';
+      if (isCash) {
+        // A patient who prepaid on an earlier visit clears without a new fee.
+        const prepaid = client?.id ? findOpenPrepaidService(client.id) : undefined;
+        createConsultationClearance({
+          patientName: [client?.first_name, client?.middle_name, client?.last_name].filter(Boolean).join(' '),
+          crNumber: client?.id ?? '',
+          locationUuid: locationUuid ?? '',
+          queue: details.room,
+          visitType: details.visitType,
+          payer: 'Cash',
+          exempt: false,
+          preCleared: !!prepaid,
+          amountOverride: prepaid?.amount,
+        });
+        if (prepaid) {
+          fulfillPrepaidService(prepaid.id);
+        }
+      }
+      */
+    
+
+      showAlert('success', 'Patient sent to the triage queue, awaiting clearance', '');
+      // Land on the accounting Pending clearance section so the new patient can be cleared.
+      // window.location.href = `${window.spaBase}/home/billing`;
+    } catch (e) {
+      const errorResp = e['responseBody'] ?? e.message;
+      showAlert('error', 'Error creating visit', '');
+      const errors = getErrorMessages(errorResp);
+      if (errors && errors.length > 0) {
+        for (let error of errors) {
+          showAlert('error', error, '');
+        }
+      }
+    }
+  };
   const handleCancel = () => {
     setPrincipal(null);
-    setSelectedDependant(null);
     setAmrsPatients([]);
     setSelectedPatient(null);
     setIdentifierValue('');
+    setValidationError('');
+    setNotFound(false);
+    setFetchError('');
     setIdentifierType('National ID');
     setDisplayClientDetailsModal(false);
     setDisplayOtpModal(false);
-    setDisplaytriageModal(false);
+    setdisplaytStartVisitModal(false);
     setSelectedPatient('principal');
   };
   const handleOtpSuccessfullVerification = () => {
     setDisplayOtpModal(false);
     setDisplayClientDetailsModal(true);
   };
-  const registerOnAfyaYangu = () => {
-    window.open('https://afyayangu.go.ke/', '_blank');
-  };
   return (
     <>
       <div className={styles.registryLayout}>
+        <div className={styles.headerSection}>
+            <FacilityAndWorkerSlot />
+        </div>
         <div className={styles.mainContent}>
           <div className={styles.registryHeader}>
-            <h4>Client Registry</h4>
+            <h4>Registration</h4>
             <p>Please enter identification number to begin</p>
           </div>
           <div className={styles.registryContent}>
-            <div className={styles.formRow}>
-              <div className={styles.formControl}>
+            <Layer className={styles.card}>
+              <div className={styles.sectionHeader}>
+                <Identification size={20} className={styles.sectionIcon} />
+                <h5 className={styles.sectionTitle}>Search client</h5>
+              </div>
+              <p className={styles.formIntro}>
+                Search the national Client Registry by identification number to begin.
+              </p>
+              <div className={styles.formGrid}>
                 <Dropdown
                   id="identifier-type-dropdown"
-                  label="Identifier Type"
-                  titleText="Select Identifier Type"
+                  label="Select identifier type"
+                  titleText={
+                    <span className={styles.fieldLabel}>
+                      Identifier type<span className={styles.required}>*</span>
+                    </span>
+                  }
                   items={IDENTIFIER_TYPES}
                   selectedItem={identifierType}
-                  onChange={({ selectedItem }) => setIdentifierType(selectedItem as IdentifierType)}
+                  onChange={({ selectedItem }) => {
+                    const nextType = selectedItem as IdentifierType;
+                    setIdentifierType(nextType);
+                    if (!identifierValue.trim()) {
+                      setValidationError(`${nextType} number is required`);
+                    } else {
+                      setValidationError('');
+                    }
+                  }}
                 />
+                <div className={styles.clearableInput}>
+                  <TextInput
+                    id="identifier-value"
+                    labelText={
+                      <span className={styles.fieldLabel}>
+                        {identifierType} number<span className={styles.required}>*</span>
+                      </span>
+                    }
+                    value={identifierValue}
+                    onChange={(e) => {
+                      setIdentifierValue(e.target.value);
+                      if (validationError) {
+                        setValidationError('');
+                      }
+                      if (notFound) {
+                        setNotFound(false);
+                      }
+                    }}
+                    onBlur={() => {
+                      if (!identifierValue.trim()) {
+                        setValidationError(`${identifierType} number is required`);
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleSearchPatient();
+                      }
+                    }}
+                    invalid={!!validationError}
+                    invalidText={validationError}
+                    placeholder={`e.g. enter ${identifierType.toLowerCase()} number`}
+                  />
+                  {identifierValue && !validationError ? (
+                    <button
+                      type="button"
+                      className={styles.clearBtn}
+                      onClick={handleClearIdentifier}
+                      aria-label="Clear field"
+                    >
+                      <Close size={16} />
+                    </button>
+                  ) : null}
+                </div>
               </div>
-
-              <div className={styles.formControl}>
-                <TextInput
-                  id="identifier-value"
-                  labelText={`${identifierType} Value`}
-                  value={identifierValue}
-                  onChange={(e) => setIdentifierValue(e.target.value)}
-                  placeholder={`Enter ${identifierType.toLowerCase()} value`}
-                />
+              <div className={styles.formBtn}>
+                <Button
+                  className={styles.searchButton}
+                  size="sm"
+                  kind="primary"
+                  renderIcon={loading ? undefined : Search}
+                  onClick={handleSearchPatient}
+                  disabled={loading || !identifierValue.trim()}
+                >
+                  {loading ? (
+                    <span className={styles.btnLoading}>
+                      <Loading small withOverlay={false} className={styles.btnSpinner} description="Searching" />
+                      Searching…
+                    </span>
+                  ) : (
+                    'Search'
+                  )}
+                </Button>
+                <Button size="sm" kind="secondary" renderIcon={WarningAlt} onClick={handleEmergencyRegistration}>
+                  Emergency Registration
+                </Button>
               </div>
-            </div>
-            <div className={styles.formRow}>
-              <div className={styles.formControl}>
-                <div className={styles.formBtn}>
-                  <Button
-                    className={styles.registrySearchBtn}
-                    kind="primary"
-                    onClick={handleSearchPatient}
-                    disabled={loading}
-                  >
-                    {loading ? <InlineLoading description="Searching..." /> : 'Search'}
-                  </Button>
-                  <Button className={styles.registrySearchBtn} kind="secondary" onClick={handleEmergencyRegistration}>
-                    Emergency Registration
-                  </Button>
-                  <Button className={styles.registrySearchBtn} kind="tertiary" onClick={registerOnAfyaYangu}>
-                    Register on Afya Yangu
-                  </Button>
+            </Layer>
+            {notFound ? (
+              <div className={styles.emptyState}>
+                <div className={styles.emptyIcon}>
+                  <SearchLocate size={24} />
+                </div>
+                <div>
+                  <h5 className={styles.emptyTitle}>No match found</h5>
+                  <p className={styles.emptyText}>
+                    No client matching that <strong>{identifierType}</strong> was found in the Client Registry. Ask the
+                    patient to register on the{' '}
+                    <a href="https://afyayangu.go.ke/" target="_blank" rel="noopener noreferrer">
+                      Afya Yangu portal
+                    </a>{' '}
+                    first, then search again — or use <strong>Emergency Registration</strong>.
+                  </p>
                 </div>
               </div>
-            </div>
+            ) : (
+              <></>
+            )}
+            {fetchError ? (
+              <div className={styles.errorState}>
+                <div className={styles.errorStateIcon}>
+                  <WarningAltFilled size={24} />
+                </div>
+                <div>
+                  <h5 className={styles.errorStateTitle}>Couldn&apos;t complete the search</h5>
+                  <p className={styles.errorStateText}>{fetchError} Please check your connection and try again.</p>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
             {principal ? (
-              <div className={styles.formRow}>
+              <Layer className={styles.card}>
                 <div className={styles.hieData}>
+                  <div className={styles.sectionHeader}>
+                    <UserMultiple size={20} className={styles.sectionIcon} />
+                    <h5 className={styles.sectionTitle}>Principal &amp; dependants</h5>
+                  </div>
+                  <p className={styles.formIntro}>
+                    Select the patient to proceed with, then ask them to share the OTP sent to their phone.
+                  </p>
                   <div className={styles.selectionHeader}>
-                    <h5>Please select one patient and request patient to share the OTP sent</h5>
+                    <p className={styles.summaryLine}>
+                      <span className={styles.summaryPrincipal} />1 principal
+                      <span className={styles.summaryDot} />
+                      <span className={styles.summaryDependant} />
+                      {principal.dependants?.length ?? 0}{' '}
+                      {(principal.dependants?.length ?? 0) === 1 ? 'dependant' : 'dependants'}
+                    </p>
                   </div>
-                  <div className={styles.patientSelect}>
-                    <div className={styles.patientSelectRadio}>
-                      <RadioButtonGroup
-                        defaultSelected="principal"
-                        legendText="Patient"
-                        onChange={(v) => handleSelectedPatient(v as string)}
-                        name="radio-button-default-group"
+                  <div className={styles.principalDependantSection}>
+                    <div className={styles.optionList}>
+                      <div
+                        className={`${styles.optionCard} ${styles.principalOption} ${
+                          selectedPatient === 'principal' ? styles.optionSelected : ''
+                        }`}
+                        onClick={() => handleSelectedPatient('principal')}
                       >
-                        <RadioButton id="principal" labelText="Principal" value="principal" />
-                        <RadioButton id="dependants" labelText="Dependants" value="dependants" />
-                      </RadioButtonGroup>
+                        <RadioButton
+                          id="select-principal"
+                          name="patient-selection"
+                          labelText=""
+                          value="principal"
+                          checked={selectedPatient === 'principal'}
+                          onChange={() => handleSelectedPatient('principal')}
+                        />
+                        <div className={styles.optionBody}>
+                          <div className={styles.optionTopline}>
+                            <span className={styles.optionName}>
+                              {maskExceptFirstAndLast(principal.first_name)} {maskExceptFirstAndLast(principal.middle_name)}{' '}
+                              {maskExceptFirstAndLast(principal.last_name)}
+                            </span>
+                            <Tag type="blue" size="sm">
+                              Principal
+                            </Tag>
+                          </div>
+                          <span className={styles.optionCr}>CR {maskCrNumber(principal.id)}</span>
+                        </div>
+                      </div>
+                      {principal.dependants
+                        ?.filter((d) => d?.result?.[0])
+                        .map((d) => {
+                          const dependant = d.result[0];
+                          const relationship = d.relationship;
+                          return (
+                            <div
+                              key={dependant.id}
+                              className={`${styles.optionCard} ${styles.dependantOption} ${
+                                selectedPatient === dependant.id ? styles.optionSelected : ''
+                              }`}
+                              onClick={() => handleSelectedPatient(dependant.id)}
+                            >
+                              <RadioButton
+                                id={`select-${dependant.id}`}
+                                name="patient-selection"
+                                labelText=""
+                                value={dependant.id}
+                                checked={selectedPatient === dependant.id}
+                                onChange={() => handleSelectedPatient(dependant.id)}
+                              />
+                              <div className={styles.optionBody}>
+                                <div className={styles.optionTopline}>
+                                  <span className={styles.optionName}>
+                                    {maskExceptFirstAndLast(dependant.first_name)} {maskExceptFirstAndLast(dependant.middle_name)}{' '}
+                                    {maskExceptFirstAndLast(dependant.last_name)}
+                                  </span>
+                                  <Tag type="teal" size="sm">
+                                    {relationship || 'Dependant'}
+                                  </Tag>
+                                </div>
+                                <span className={styles.optionCr}>CR {maskCrNumber(dependant.id)}</span>
+                              </div>
+                            </div>
+                          );
+                        })}
                     </div>
                     <div className={styles.patientConfirmSelection}>
                       <div className={styles.btnContainer}>
-                        <Button kind="primary" onClick={handleOtpVerification}>
+                        <Button kind="primary" size="sm" onClick={handleOtpVerification}>
                           {' '}
                           Confirm
                         </Button>
                       </div>
                       <div className={styles.btnContainer}>
-                        <Button kind="secondary" onClick={handleCancel}>
+                        <Button kind="secondary" size="sm" onClick={handleCancel}>
                           Cancel
                         </Button>
                       </div>
                     </div>
-                  </div>
-                  <div className={styles.principalDependantSection}>
-                    {selectedPatient === 'principal' ? (
-                      <>
-                        <Table>
-                          <TableHead>
-                            <TableRow>
-                              <TableHeader>Name</TableHeader>
-                              <TableHeader>CR</TableHeader>
-                              <TableHeader>Phone No</TableHeader>
-                              <TableHeader>ID No</TableHeader>
-                            </TableRow>
-                          </TableHead>
-                          <TableBody>
-                            <TableRow>
-                              <TableCell>
-                                {principal.first_name} {maskExceptFirstAndLast(principal.middle_name)}{' '}
-                                {maskExceptFirstAndLast(principal.last_name)}
-                              </TableCell>
-                              <TableCell>{maskValue(principal.id)}</TableCell>
-                              <TableCell>{maskValue(principal.phone)}</TableCell>
-                              <TableCell>{maskValue(principal.identification_number)}</TableCell>
-                            </TableRow>
-                          </TableBody>
-                        </Table>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-                    {selectedPatient === 'dependants' ? (
-                      <>
-                        <RadioButtonGroup
-                          defaultSelected=""
-                          helperText=""
-                          invalidText=""
-                          legendText=""
-                          name="dependant-group"
-                          onChange={(dependantId) => handleSelectedDependant(dependantId as string)}
-                        >
-                          {principal.dependants.map((d) => {
-                            const dependant = d.result[0];
-                            const relationship = d.relationship;
-                            return (
-                              <RadioButton
-                                id={dependant.id}
-                                labelText={formatDependantDisplayData(dependant, relationship)}
-                                value={dependant.id}
-                              />
-                            );
-                          })}
-                        </RadioButtonGroup>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-
-                    {displayOtpModal ? (
-                      <OtpVerificationModal
-                        requestCustomOtpDto={requestCustomOtpDto}
-                        phoneNumber={principal.phone}
-                        open={displayOtpModal}
-                        onModalClose={handleModelClose}
-                        onOtpSuccessfullVerification={handleOtpSuccessfullVerification}
-                      />
-                    ) : (
-                      <></>
-                    )}
-
-                    {principal && displayClientDetailsModal ? (
-                      <>
-                        <ClientDetailsModal
-                          client={getPatient()}
-                          open={displayClientDetailsModal}
-                          onModalClose={onClientDetailsModalClose}
-                          onSubmit={handleClientDetailsSubmit}
-                          onSendClientToTriage={handleSendClientToTriage}
-                        />{' '}
-                      </>
-                    ) : (
-                      <></>
-                    )}
 
-                    {principal && displaytriageModal ? (
-                      <>
-                        <SendToTriageModal
-                          client={getPatient()}
-                          patients={amrsPatients}
-                          open={displaytriageModal}
-                          onModalClose={onSendToTriageModalClose}
-                          onSubmit={handleSendToTriageModalSubmit}
-                          onCreateAmrsPatient={createAmrsPatient}
-                          onManualRegistration={handleManualRegistration}
-                        />
-                      </>
-                    ) : (
-                      <></>
-                    )}
+                    <WorkflowDrawer
+                      open={displayDrawer}
+                      client={getPatient()}
+                      clientType={
+                        selectedPatient === 'principal'
+                          ? 'Principal'
+                          : principal.dependants?.find((d) => d.result[0]?.id === selectedPatient)?.relationship ||
+                            'Dependant'
+                      }
+                      locationUuid={locationUuid}
+                      requestCustomOtpDto={generateCustomSmsPayload()}
+                      phoneNumber={principal.phone ? formatPhoneNumberForOTP(principal.phone) : ''}
+                      amrsPatient={amrsPatients[0] ?? null}
+                      amrsChecked={amrsChecked}
+                      syncingAmrs={syncingAmrs}
+                      onCreatePatient={createAmrsPatient}
+                      onSyncPatient={syncAmrsPatient}
+                      onClose={() => {
+                        setDisplayDrawer(false);
+                        setAmrsChecked(false);
+                      }}
+                      onStartVisit={(details) => {
+                        setDisplayDrawer(false);
+                        startVisitForClient(details);
+                      }}
+                    />
                   </div>
                 </div>
-              </div>
+              </Layer>
             ) : (
               <></>
             )}
           </div>
+          <div className={styles.registeredPatientsSection}>
+             <RegistrationList />
+          </div>
         </div>
       </div>
     </>