@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.448

package/src/shared/ui/aggregate-stat-card/aggregate-stat-card.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from './aggregate-stat-card.scss';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+
+interface AgregateStatCardProps {
+  title: string;
+  totalCount: number;
+  stats: { title: string; count: number }[];
+  onStatDetailsRequest: () => void;
+}
+
+const AgregateStatCard: React.FC<AgregateStatCardProps> = ({ title, totalCount, stats, onStatDetailsRequest }) => {
+  if (!title) {
+    return <></>;
+  }
+  return (
+    <div className={styles.aggregateStatsCard}>
+      <div className={styles.aggregateStatsCardHeader}>
+        <h5>{title}</h5>
+        <h1 className={styles.totalCount} onClick={onStatDetailsRequest}>
+          {totalCount}
+        </h1>
+      </div>
+      <div className={styles.stats}>
+        {stats.map((val, index) => {
+          return (
+            <>
+              <div className={styles.statDetails}>
+                <div className={styles.title}>{val.title} :</div>
+                <div className={styles.count}>
+                  <strong>{val.count}</strong>
+                </div>
+              </div>
+            </>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AgregateStatCard;

package/src/shared/ui/confirm-modal/confirm.modal.scss

@@ -0,0 +1,18 @@
+.modalLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    padding: 15px 15px;
+}
+.modalTitle{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.modalContentSection{
+    display: flex;
+    flex-direction: row;
+    row-gap: 15px;
+    align-items: center;
+    justify-content: center;
+}

package/src/shared/ui/confirm-modal/confirm.modal.tsx

@@ -0,0 +1,38 @@
+import { Modal, ModalBody } from '@carbon/react';
+import React from 'react';
+import styles from './confirm.modal.scss';
+interface ConfirmModal {
+  title: string;
+  subtitle: string;
+  open: boolean;
+  onModalClose: () => void;
+  onConfirm: () => void;
+}
+const ConfirmModal: React.FC<ConfirmModal> = ({ open, title, subtitle, onConfirm, onModalClose }) => {
+  return (
+    <>
+      <Modal
+        modalHeading=""
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={onConfirm}
+        primaryButtonText="Confirm"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.modalLayout}>
+            <div className={styles.modalTitle}>
+              <h4>{title}</h4>
+            </div>
+            <div className={styles.modalContentSection}>
+              <h6>{subtitle}</h6>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default ConfirmModal;

package/src/shared/ui/facility-worker-slot/facility-worker.component-slot.component.scss

@@ -0,0 +1,39 @@
+.fhwrSlotLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.fhwrSlotContent {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.fhwrSlot {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 18rem;
+  min-width: 0;
+
+  /* Collapse a slot that has no extension so the other fills the row neatly. */
+  &:empty {
+    display: none;
+  }
+
+  /* Let the extension card fill its column so the two sides stay aligned. */
+  > * {
+    width: 100%;
+  }
+
+  /* Trim the extension card's vertical padding so the facility / worker header
+     is a neat, compact band (keep the horizontal padding for alignment). */
+  :global(.cds--tile) {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    min-height: 0;
+  }
+}

package/src/shared/ui/facility-worker-slot/facility-worker.component-slot.component.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from './facility-worker.component-slot.component.scss';
+import { ExtensionSlot } from "@openmrs/esm-framework";
+interface facilityAndWorkerSlotProps {}
+const FacilityAndWorkerSlot: React.FC<facilityAndWorkerSlotProps> = ()=>{
+  return <>
+  <div className={styles.fhwrSlotLayout}>
+     <div className={styles.fhwrSlotContent}>
+          <div className={styles.fhwrSlot}>
+              <ExtensionSlot name="facility-hie-header-slot" />
+          </div>
+          <div className={styles.fhwrSlot}>
+              <ExtensionSlot name="health-worker-hie-header-slot" />
+          </div>
+     </div>
+  </div>
+  </>
+}
+export default FacilityAndWorkerSlot;

package/src/shared/ui/otp-input/otp-input.component.scss

@@ -1,14 +1,14 @@
-.otpDataInput{
-  width: 3rem;
-  height: 3rem;
-  text-align: center;
+.otpInputContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  column-gap: 0.5rem;
+}
+
+.otpDataInputContainer {
+  display: flex;
 }
-.otpInputContainer{
-   display: flex;
-   flex-direction: row;
-   column-gap: 5px;
+
+.otpDataInput {
+  text-align: center;
 }
-.otpDataInputContainer{
-    width: 4rem;
-    height: 4rem;
-}

package/src/shared/ui/otp-input/otp-input.component.tsx

@@ -5,9 +5,10 @@ import styles from './otp-input.component.scss';
 interface OTPInputProps {
   onChange: (otp: string) => void;
   otpLength: number;
+  disabled?: boolean;
 }
 
-const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength }) => {
+const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength, disabled = false }) => {
   const [otp, setOtp] = useState(Array(otpLength).fill(''));
   const inputsRef = useRef([]);
 
@@ -58,7 +59,7 @@ const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength }) => {
   };
 
   return (
-    <div className={styles.otpInputContainer} onPaste={handlePaste}>
+    <div className={styles.otpInputContainer} onPaste={disabled ? undefined : handlePaste}>
       {otp.map((digit, index) => (
         <div className={styles.otpDataInputContainer}>
           <TextInput
@@ -71,14 +72,20 @@ const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength }) => {
             maxLength={1}
             inputMode="numeric"
             pattern="[0-9]*"
+            disabled={disabled}
             ref={(el) => (inputsRef.current[index] = el)}
             onChange={(e) => handleChange(e.target.value, index)}
             onKeyDown={(e) => handleKeyDown(e, index)}
             style={{
-              height: '4rem',
-              width: '4rem',
-              borderStyle: 'solid grey',
-              backgroundColor: '#e5ebf7',
+              height: '3.5rem',
+              width: '3rem',
+              textAlign: 'center',
+              fontSize: '1.5rem',
+              fontWeight: 600,
+              color: disabled ? '#a8a8a8' : '#161616',
+              backgroundColor: disabled ? '#f4f4f4' : '#ffffff',
+              border: '1px solid #8d8d8d',
+              borderRadius: '6px',
             }}
           />
         </div>

package/src/{service-queues/service-queue/stats → shared/ui}/stat-card/stat-card.component.tsx

@@ -3,10 +3,11 @@ import styles from './stat-card.component.scss';
 
 interface StatCardProps {
   title: string;
-  count: number;
+  count?: number;
+  other?: string;
 }
 
-const StatCard: React.FC<StatCardProps> = ({ title, count }) => {
+const StatCard: React.FC<StatCardProps> = ({ title, count, other }) => {
   if (!title) {
     return <></>;
   }
@@ -14,7 +15,9 @@ const StatCard: React.FC<StatCardProps> = ({ title, count }) => {
     <div className={styles.statsCard}>
       <div className={styles.statsCardHeader}>
         <h5>{title}</h5>
-        <h1>{count}</h1>
+        <h1>
+          {count} {other}
+        </h1>
       </div>
     </div>
   );

package/src/shared/utils/format-title-case.ts

@@ -0,0 +1,8 @@
+export function formatToTitleCase(str: string) {
+    if (!str) return '';
+    return str
+      .replace(/_/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .toLowerCase()
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+}

package/src/shared/utils/get-base-url.ts

@@ -15,3 +15,18 @@ export async function getHieBaseUrl() {
   const { hieBaseUrl } = await getConfig(moduleName);
   return hieBaseUrl ?? null;
 }
+
+export async function getClaimsUrl() {
+  const { claimsBaseUrl } = await getConfig(moduleName);
+  return claimsBaseUrl ?? null;
+}
+
+export async function getClaimsKey() {
+  const { claimsKey } = await getConfig(moduleName);
+  return claimsKey ?? null;
+}
+
+export async function getCashPaymentModeUuid() {
+  const { cashPaymentModeUuid } = await getConfig(moduleName);
+  return cashPaymentModeUuid ?? null;
+}

package/src/shared/utils/get-tag-type.ts

@@ -0,0 +1,75 @@
+import { QueueEntryPriority, type TagColor, type TagType } from '../../types/types';
+
+export function getTagType(val: number | string): TagType {
+  if (val === 1 || val === '1') {
+    return 'green';
+  } else {
+    return 'red';
+  }
+}
+
+export const getTagTypeByPriority = (priority: string): TagColor => {
+  let type: TagColor;
+  switch (priority) {
+    case QueueEntryPriority.Emergency:
+      type = 'red';
+      break;
+    case QueueEntryPriority.Priority:
+      type = 'blue';
+      break;
+    case QueueEntryPriority.NonUrgent:
+      type = 'green';
+      break;
+    case `${QueueEntryPriority.Emergency} PRIORITY`:
+      type = 'red';
+      break;
+    case `${QueueEntryPriority.NonUrgent} PRIORITY`:
+      type = 'green';
+      break;
+    default:
+      type = 'gray';
+  }
+  return type;
+};
+
+export const getTagClassByPriority = (priority: string): string => {
+  let className: string;
+  switch (priority) {
+    case QueueEntryPriority.Emergency:
+      className = 'emergencyTag';
+      break;
+    case QueueEntryPriority.VeryUrgent:
+      className = 'emergencyTag';
+      break;
+    case QueueEntryPriority.Priority:
+      className = 'priorityTag';
+      break;
+    case QueueEntryPriority.Urgent:
+      className = 'priorityTag';
+      break;
+    case QueueEntryPriority.Routine:
+      className = 'priorityTag';
+      break;
+    case QueueEntryPriority.NonUrgent:
+      className = 'nonUrgentTag';
+      break;
+    case `${QueueEntryPriority.Emergency} PRIORITY`:
+      className = 'emergencyTag';
+      break;
+    case `${QueueEntryPriority.NonUrgent} PRIORITY`:
+      className = 'nonUrgentTag';
+      break;
+    case `${QueueEntryPriority.Priority} PRIORITY`:
+      className = 'priorityTag';
+      break;
+    case 'NORMAL PRIORITY':
+      className = 'priorityTag';
+      break;
+    case 'NOT URGENT':
+      className = 'nonUrgentTag';
+      break;
+    default:
+      className = 'gray';
+  }
+  return className;
+};

package/src/shr/shr-close-visit-form.component.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Button, Checkbox, InlineLoading, InlineNotification, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './shr.scss';
+
+interface ShrCloseVisitFormProps {
+  /**
+   * `true` when the patient cannot consent to their own closure.
+   *
+   * **Polarity warning.** This drives close-visit's `patient_incapable`, where
+   * `1` means "cannot consent". The consent *request* uses `patient_capable`,
+   * where `1` means the opposite — "can consent". Two similarly named flags on
+   * two endpoints, inverted; transposing them silently sends the wrong meaning,
+   * so read the field name every time rather than trusting the symmetry.
+   */
+  patientIncapable: boolean;
+  incapacityReason: string;
+  isClosing: boolean;
+  error?: string;
+  onPatientIncapableChange: (patientIncapable: boolean) => void;
+  onIncapacityReasonChange: (reason: string) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * The confirmation step in front of "Close visit".
+ *
+ * Closing is normally OTP-gated — the patient (or their representative) has to
+ * approve it, and the visit stays open until they do. That is impossible for a
+ * patient who is unconscious or deceased, so this offers the one documented
+ * escape: `patient_incapable: 1` with a reason closes the visit immediately,
+ * with no password sent or required.
+ *
+ * Off is the default and leaves today's behaviour untouched.
+ */
+const ShrCloseVisitForm: React.FC<ShrCloseVisitFormProps> = ({
+  patientIncapable,
+  incapacityReason,
+  isClosing,
+  error,
+  onPatientIncapableChange,
+  onIncapacityReasonChange,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const canConfirm = !isClosing && (!patientIncapable || Boolean(incapacityReason.trim()));
+
+  return (
+    <div className={styles.closePanel}>
+      <h5 className={styles.closePanelTitle}>{t('closeVisit', 'Close visit')}</h5>
+      <p className={styles.closePanelText}>
+        {t(
+          'shrCloseVisitExplainer',
+          'The patient is normally asked to approve the closure with an OTP, and the visit stays open until they do.',
+        )}
+      </p>
+
+      {error && (
+        <InlineNotification
+          kind="error"
+          lowContrast
+          hideCloseButton
+          title={t('shrCloseVisitFailed', "Couldn't close the visit.")}
+          subtitle={error}
+        />
+      )}
+
+      <Checkbox
+        id="shr-patient-incapable"
+        labelText={t('shrPatientIncapableOfClosure', 'Patient unable to consent to closure (unconscious/deceased)')}
+        helperText={t('shrPatientIncapableHelper', 'Closes the visit immediately, with no OTP sent.')}
+        checked={patientIncapable}
+        disabled={isClosing}
+        onChange={(_event, { checked }) => onPatientIncapableChange(checked)}
+      />
+
+      {patientIncapable && (
+        <TextInput
+          id="shr-close-incapacity-reason"
+          labelText={t('incapacityReason', 'Incapacity reason')}
+          placeholder={t('shrCloseIncapacityReasonPlaceholder', 'e.g. Unconscious')}
+          value={incapacityReason}
+          disabled={isClosing}
+          onChange={(event) => onIncapacityReasonChange(event.target.value)}
+        />
+      )}
+
+      <div className={styles.closePanelActions}>
+        <Button kind="secondary" size="sm" onClick={onCancel} disabled={isClosing}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" size="sm" onClick={onConfirm} disabled={!canConfirm}>
+          {isClosing ? <InlineLoading description={t('closing', 'Closing…')} /> : t('confirmClose', 'Confirm close')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ShrCloseVisitForm;