@ampath/esm-dha-workflow-app 4.0.0-next.4 → 4.0.0-next.41

package/src/index.ts

@@ -4,10 +4,10 @@
  * connects the app shell to the React application(s) that make up this
  * microfrontend.
  */
-import { getAsyncLifecycle, defineConfigSchema } from '@openmrs/esm-framework';
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 
-const moduleName = '@ampath/esm-dha-workflow-app';
+export const moduleName = '@ampath/esm-dha-workflow-app';
 
 const options = {
   featureName: 'Consulation Workflow',
@@ -31,6 +31,11 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+export const navLinks = getAsyncLifecycle(() => import('./side-nav-menu/nav-links'), {
+  featureName: 'side-nav-workflow-link',
+  moduleName,
+});
+
 /**
  * This named export tells the app shell that the default export of `root.component.tsx`
  * should be rendered when the route matches `root`. The full route
@@ -39,6 +44,22 @@ export function startupApp() {
  */
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 export const registry = getAsyncLifecycle(() => import('./registry/registry.component'), options);
+export const waitingPatientsExtension = getAsyncLifecycle(
+  () => import('./service-queues/metrics/metrics-cards/waiting-patients.extension'),
+  options,
+);
+export const attendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./service-queues/metrics/metrics-cards/attended-patients.extension'),
+  options,
+);
+export const triageWaitingPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/waiting-patients.extension'),
+  options,
+);
+export const triageAttendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/attended-patients.extension'),
+  options,
+);
 
 export const workflowRegistryLink = getAsyncLifecycle(() => import('./widgets/workflow-registry-link.extension'), {
   featureName: 'workflow-registry-link',

package/src/laboratory/laboratory.component.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
+
+const LaboratoryComponent: React.FC = () => {
+  
+  return (
+    <div>
+      <ExtensionSlot name="laboratory-dashboard-slot" />
+    </div>
+  );
+};
+
+export default LaboratoryComponent;

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

@@ -0,0 +1,20 @@
+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';
+
+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/mch/queues/consultation/mch-consultation.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ServiceQueueComponent from '../../../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+
+interface MchConsultationProps {}
+const MchConsultation: React.FC<MchConsultationProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent
+          serviceTypeUuid={QUEUE_SERVICE_UUIDS.MCH_CLINICAL_CONSULTATION_SERVICE_UUID}
+          title="MCH Consultation"
+        />
+      </div>
+    </>
+  );
+};
+export default MchConsultation;

package/src/mch/queues/triage/mch-triage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ServiceQueueComponent from '../../../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+
+interface TriageProps {}
+const MchTriage: React.FC<TriageProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.MCH_TRIAGE_SERVICE_UUID} title="MCH Triage" />
+      </div>
+    </>
+  );
+};
+export default MchTriage;

package/src/modals/sign-off-modal.scss

@@ -0,0 +1,7 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.subHeading {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+}

package/src/modals/sign-off-modal.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './sign-off-modal.scss';
+import { type QueueEntry } from '../types/types';
+
+interface SignOffModalProps {
+  queueEntries: Array<QueueEntry>;
+  closeModal: () => void;
+}
+
+const SignOffModal: React.FC<SignOffModalProps> = ({ queueEntries, closeModal }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSignOffRequest = useCallback(() => {
+    setIsSubmitting(true);
+  }, []);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('signOffMessage', 'Sign off message')}
+        title={t('signOffMessage', 'Sign off message')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'signOffMessage',
+            'Sign off message',
+          )}
+          .
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting === true ? (
+          <ButtonSkeleton />
+        ) : (
+          <Button kind="danger" onClick={handleSignOffRequest}>
+            {t('signOff', 'SignOff')}
+          </Button>
+        )}
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default SignOffModal;

package/src/mortuary/mortuary.component.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
+
+const Mortuary: React.FC = () => {
+  
+  return (
+    <div>
+      <ExtensionSlot name="mortuary-dashboard-slot" />
+    </div>
+  );
+};
+
+export default Mortuary;

package/src/pharmacy/pharmacy.component.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
+
+const PharmacyComponent: React.FC = () => {
+  
+  return (
+    <div>
+      <ExtensionSlot name="dispensing-dashboard-slot" />
+    </div>
+  );
+};
+
+export default PharmacyComponent;

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,81 @@
+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;
+  onSendClientToTriage: (crId: string) => void;
+}
+
+const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({
+  client,
+  open,
+  onModalClose,
+  onSubmit,
+  onSendClientToTriage,
+}) => {
+  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" onClick={() => onSendClientToTriage(client.id)}>
+                  Send To Triage
+                </Button>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientDetailsModal;

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

@@ -0,0 +1,31 @@
+.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;
+}
+.otpSection{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  column-gap: 15px;
+}
+.otpForm{
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  row-gap: 15px;
+}
+.otpTimer{
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding-top: 6%;
+}

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

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { OtpStatus, type RequestCustomOtpDto } from '../../types';
+import { Button, FormLabel, InlineLoading, Modal, ModalBody } 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';
+import OTPInput from '../../../shared/ui/otp-input/otp-input.component';
+import Timer from '../../../shared/ui/timer/timer.component';
+
+interface OtpVerificationModalpProps {
+  requestCustomOtpDto: RequestCustomOtpDto;
+  phoneNumber: string;
+  open: boolean;
+  onModalClose: () => void;
+  onOtpSuccessfullVerification: () => void;
+}
+const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
+  requestCustomOtpDto,
+  phoneNumber,
+  open,
+  onModalClose,
+  onOtpSuccessfullVerification,
+}) => {
+  const [otp, setOtp] = useState('');
+  const [otpStatus, setOtpStatus] = useState<string>(OtpStatus.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(OtpStatus.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(OtpStatus.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 = () => {};
+  const handleTimeUp = () => {
+    if (OtpStatus.Sent) {
+      setOtpStatus(OtpStatus.Draft);
+    }
+  };
+  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 === OtpStatus.Draft ? (
+                  <>
+                    <h6>Send Code to Phone {maskValue(phoneNumber)}</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {otpStatus === OtpStatus.Verified ? (
+                  <>
+                    <h6>OTP Verification Successfull!</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div className={styles.otpSection}>
+                {otpStatus === OtpStatus.Sent ? (
+                  <>
+                    <div className={styles.otpForm}>
+                      <FormLabel>Enter OTP</FormLabel>
+                      <OTPInput otpLength={5} onChange={(value) => setOtp(value)} />
+                    </div>
+                    <div className={styles.otpTimer}>
+                      <Timer durationInSeconds={60} resetTimer={() => {}} onTimeUp={handleTimeUp} />
+                    </div>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+            <div className={styles.sectionAction}>
+              {otpStatus === OtpStatus.Draft ? (
+                <>
+                  <Button kind="primary" onClick={handleSendOtp}>
+                    {loading ? <InlineLoading description="Sending OTP..." /> : 'Send OTP'}
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === OtpStatus.Sent ? (
+                <>
+                  <Button kind="primary" onClick={handleVerifyOtp}>
+                    {loading ? <InlineLoading description="Verifying OTP..." /> : 'Verify'}
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === OtpStatus.Verified ? (
+                <>
+                  <Button kind="primary" onClick={onOtpSuccessfullVerification}>
+                    Continue
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default OtpVerificationModal;

package/src/registry/modal/send-to-triage/send-to-triage.modal.scss

@@ -0,0 +1,34 @@
+.formSection{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+    margin-top: 15px;
+}
+.formRow{
+   display: flex;
+   flex-direction: row;
+   width: 100%;
+   column-gap: 5px;
+}
+.formControl{
+   display: flex;
+   flex-direction: column;
+   width: 45%;
+   row-gap: 5px;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    margin-top: 15px;
+}
+.patientAction{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    margin-top: 15px;
+}
+.greenBtn{
+    background-color: #28a745;
+}