@ampath/esm-dha-workflow-app 4.0.0-next.10

package/src/left-panel/left-panel.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './left-panel.scss';
+
+attach('nav-menu-slot', 'bed-management-left-panel');
+
+const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  return (
+    isDesktop(layout) && (
+      <SideNav className={styles.leftPanel} expanded>
+        <ExtensionSlot name="dha-workflow-slot" />
+      </SideNav>
+    )
+  );
+};
+
+export default LeftPanel;

package/src/left-panel/left-panel.scss

@@ -0,0 +1,42 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.leftPanel {
+  border-right: 1px solid colors.$gray-20;
+  padding-top: layout.$spacing-05;
+
+  // Left nav menu item
+  :global(.cds--side-nav__link) {
+    color: colors.$gray-70;
+    @include type.type-style('heading-compact-01');
+
+    &:focus,
+    &:hover {
+      background-color: colors.$gray-10-hover;
+    }
+
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: colors.$gray-100;
+      border-left: layout.$spacing-02 solid var(--brand-01);
+      outline: none;
+      padding: 0 layout.$spacing-04;
+      background-color: colors.$gray-20;
+    }
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-07;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-09;
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { type HieClient } from '../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { generateHieClientDetails } from '../utils/hie-adapter';
+interface ClientDetailsProps {
+  client: HieClient;
+}
+export const ClientDetails: React.FC<ClientDetailsProps> = ({ client }) => {
+  const clientDetails = useMemo(() => generateHieClientDetails(client), [client]);
+
+  if (!client || !clientDetails) {
+    return (
+      <>
+        <h4>No patient Data to Display</h4>
+      </>
+    );
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Field</TableHeader>
+            <TableHeader>Value</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.keys(clientDetails).map((key) => (
+            <TableRow>
+              <TableCell>{key}</TableCell>
+              <TableCell>{clientDetails[key]}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ClientDetails;

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

@@ -0,0 +1,28 @@
+.clientDetailsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.sectionHeader{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+.sectionContent{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.btnContainer{
+    margin-top: 2px;
+    margin-bottom: 2px;
+}

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

@@ -0,0 +1,75 @@
+import { Button, Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { type HieClient } from '../../types';
+import React 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';
+
+interface ClientDetailsModalProps {
+  client: HieClient;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+}
+
+const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({ client, open, onModalClose, onSubmit }) => {
+  if (!client) {
+    return <>No Client data</>;
+  }
+  const registerOnAfyaYangu = () => {
+    window.open('https://afyayangu.go.ke/', '_blank');
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={registerOnAfyaYangu}
+        primaryButtonText="Register on Afya Yangu"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.clientDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient/Payment Details</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <Tabs>
+                <TabList contained>
+                  <Tab>Patient Details</Tab>
+                  <Tab>Payment Details</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel>
+                    <ClientDetails client={client} />
+                  </TabPanel>
+                  <TabPanel>
+                    <PaymentOptionsComponent />
+                  </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">Send To Triage</Button>
+              </div>
+              <div className={styles.btnContainer}>
+                <Button kind="primary">Send To Consultation</Button>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientDetailsModal;

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

@@ -0,0 +1,13 @@
+.modalVerificationLayout {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  width: 100%;
+}
+.sectionHeader{
+  display: flex;
+  flex-direction: column;
+  column-gap: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}

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

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { type RequestCustomOtpDto } from '../../types';
+import { Button, InlineLoading, Modal, ModalBody, TextInput } from '@carbon/react';
+import styles from './otp-verification-modal.scss';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { requestCustomOtp, validateCustomOtp } from '../../registry.resource';
+import { maskValue } from '../../utils/mask-data';
+
+interface OtpVerificationModalpProps {
+  requestCustomOtpDto: RequestCustomOtpDto;
+  phoneNumber: string;
+  open: boolean;
+  onModalClose: () => void;
+}
+const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
+  requestCustomOtpDto,
+  phoneNumber,
+  open,
+  onModalClose,
+}) => {
+  const [otp, setOtp] = useState('');
+  const [otpStatus, setOtpStatus] = useState<string>('DRAFT');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [sessionId, setSessionId] = useState<string>('');
+
+  const handleSendOtp = async () => {
+    if (!requestCustomOtpDto.identificationNumber) {
+      showAlert('error', 'Invalid Identification Value', 'Please enter a valid ID value');
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await requestCustomOtp(requestCustomOtpDto);
+      setSessionId(response.sessionId);
+      setOtpStatus('OTP_SENT');
+
+      showAlert('success', 'OTP sent successfully', `A code was sent to ${response.maskedPhone}`);
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to send OTP';
+      showAlert('error', 'Error sending OTP', errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp.trim()) {
+      showAlert('error', 'Please enter the OTP code', '');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const payload = { sessionId, otp, locationUuid: requestCustomOtpDto.locationUuid };
+      await validateCustomOtp(payload);
+
+      setOtpStatus('OTP_VERIFIED');
+
+      showSnackbar({
+        kind: 'success',
+        title: 'OTP Verified',
+        subtitle: 'You can now fetch data from Client Registry.',
+      });
+    } catch (err: any) {
+      const errorMessage = err.message || 'OTP verification failed';
+      showSnackbar({
+        kind: 'error',
+        title: 'OTP Verification Failed',
+        subtitle: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const registerOnAfyaYangu = () => {
+    window.open('https://afyayangu.go.ke/', '_blank');
+  };
+
+  const onSubmit = () => {};
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={registerOnAfyaYangu}
+        primaryButtonText="Register on Afya Yangu"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.modalVerificationLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>One Time Password (OTP)</h4>
+              <h6>Enter one time password to proceed</h6>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.contentHeader}>
+                {otpStatus === 'DRAFT' ? (
+                  <>
+                    <h6>Send Code to Phone {maskValue(phoneNumber)}</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {otpStatus === 'OTP_SENT' ? (
+                  <>
+                    <TextInput
+                      id="otp-input"
+                      labelText="Enter OTP"
+                      value={otp}
+                      onChange={(e) => setOtp(e.target.value)}
+                      placeholder="Enter the code sent to your phone"
+                    />
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {otpStatus === 'OTP_VERIFIED' ? (
+                  <>
+                    <h6>OTP Verification Successfull!</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+            <div className={styles.sectionAction}>
+              {otpStatus === 'DRAFT' ? (
+                <>
+                  <Button kind="primary" onClick={handleSendOtp}>
+                    {loading ? <InlineLoading description="Sending OTP..." /> : 'Send OTP'}
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === 'OTP_SENT' ? (
+                <>
+                  <Button kind="primary" onClick={handleVerifyOtp}>
+                    {loading ? <InlineLoading description="Verifying OTP..." /> : 'Verify'}
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === 'OTP_VERIFIED' ? (
+                <>
+                  <Button kind="primary" onClick={onModalClose}>
+                    Continue
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default OtpVerificationModal;

package/src/registry/payment-details/payment-options/payment-options.tsx

@@ -0,0 +1,21 @@
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import React from 'react';
+const PaymentOptionsComponent: React.FC = () => {
+  const handleSelectedPatientOption = (p: string) => {};
+  return (
+    <>
+      <RadioButtonGroup
+        defaultSelected="sha"
+        legendText="Patient"
+        onChange={(v) => handleSelectedPatientOption(v as string)}
+        name="payment-options-radio-group"
+      >
+        <RadioButton id="sha" labelText="Social Health Authority" value="sha" />
+        <RadioButton id="insurance" labelText="Other Insurance" value="other" />
+        <RadioButton id="cash" labelText="Cash" value="cash" />
+      </RadioButtonGroup>
+    </>
+  );
+};
+
+export default PaymentOptionsComponent;

package/src/registry/registry.component.scss

@@ -0,0 +1,63 @@
+.registryLayout{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}
+.mainContent{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.registryHeader{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}
+.registryContent{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.formRow{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.formControl{
+    width: 30%;
+}
+.hieData{
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    row-gap: 10px;
+}
+.btnContainer{
+    padding: 5px 5px;
+}
+.selectionHeader{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.patientSelect{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.patientSelectRadio{
+    width: 70%;
+}
+.patientConfirmSelection{
+    display: flex;
+    flex-direction: row;
+    width: 30%;
+    column-gap: 5px;
+}