@ampath/esm-dha-workflow-app 4.0.0-next.13 → 4.0.0-next.130

package/src/shared/types/index.ts

@@ -0,0 +1,152 @@
+import { type Location } from '@openmrs/esm-framework';
+
+export type BillableService = {
+  uuid: string;
+  name?: string;
+  display?: string;
+  shortName: string;
+  serviceStatus: 'ENABLED' | 'DISABLED';
+  serviceType: ServiceType | null;
+  servicePrices: ServicePrice[];
+  resourceVersion: string;
+};
+
+export type ServiceType = {
+  display: string;
+  resourceVersion: string;
+};
+
+export type ServicePrice = {
+  uuid: string;
+  name: string;
+  price: number;
+  item: string;
+  paymentMode: PaymentMode;
+  billableService: BillableService;
+  resourceVersion: string;
+};
+
+export type PaymentMode = {
+  uuid: string;
+  name: string;
+  description: string | null;
+  retired: boolean;
+  retireReason: string;
+  attributeTypes: unknown[];
+  sortOrder: number | null;
+  resourceVersion: string;
+};
+
+export type PayableBillableService = ServicePrice & {
+  billableService: BillableService;
+};
+
+export type PaymentStatus = 'PENDING' | 'PAID' | 'FAILED' | 'CANCELLED';
+
+export type LineItem = {
+  uuid?: string;
+  billableService: string;
+  quantity: number;
+  price: number;
+  priceName: string;
+  priceUuid: string;
+  lineItemOrder: number;
+  paymentStatus: PaymentStatus;
+  voided?: boolean;
+  voidedReason?: string;
+};
+
+export type CreateBillDto = {
+  lineItems: LineItem[];
+  cashPoint: string;
+  patient: string;
+  status: PaymentStatus;
+  payments: any[];
+};
+
+export type CashPoint = {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  location: Location;
+};
+
+export type CreateClientPaymentModeDto = {
+  clientId: string;
+  paymentModeUuid: string;
+};
+export type HieClientPaymentMode = {
+  client_id: string;
+  payment_mode_uuid: string;
+};
+
+export type HieBillPayment = {
+  billUuid: string;
+  paymentUuid: string;
+  referenceNo: string;
+};
+
+export type ServiceQueueDailyReport = {
+  queue_room_name: string;
+  patients: number;
+};
+
+export type ServiceQueueDailyReportResp = {
+  schemas: any;
+  sqlQuery: string;
+  size: number;
+  result: ServiceQueueDailyReport[];
+};
+
+export type ServiceQueueReportPatientList = {
+  queue_entry_id: number;
+  patient_id: number;
+  queue_id: number;
+  queue_room_name: string;
+  queue_room_id: number;
+  service_name: string;
+  patient_uuid: string;
+  uuid: string;
+  person_id: number;
+  gender: string;
+  birthdate: string;
+  age: number;
+  person_name: string;
+  identifiers: string;
+  phone_number: string;
+  served_status: string;
+};
+
+export type ServiceQueueDailyPatientListReportResp = {
+  schemas: any;
+  sqlQuery: string;
+  size: number;
+  results: {
+    results: ServiceQueueReportPatientList[];
+  };
+};
+
+export type OrderAction = 'NEW';
+export type OrderUrgency = 'ROUTINE';
+export type Order = {
+  action: OrderAction;
+  type: string;
+  patient: string;
+  careSetting: string;
+  orderer: string;
+  encounter: string;
+  concept: string;
+  accessionNumber: string;
+  urgency: OrderUrgency;
+  scheduledDate: null;
+};
+
+export type CreateOrderEncounterDto = {
+  patient: string;
+  location: string;
+  encounterType: string;
+  visit: string;
+  obs: any[];
+  orders: Order[];
+};

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

@@ -0,0 +1,42 @@
+.aggregateStatsCard{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid #d2d2d2;
+    min-height: 100px;
+    padding: 10px 10px;
+    column-gap: 10px;
+    .aggregateStatsCardHeader{
+        display: flex;
+        flex-direction: column;
+        width: 50%;
+        column-gap: 3px;
+    }
+    .stats{
+        display: flex;
+        flex-direction: column;
+        width: 50%;
+        font-size: 14px;
+        row-gap: 5px;
+       .statDetails{
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        .title{
+           width: 90%;
+        }
+        .count{
+            width: 10%;
+        }
+    }
+    }
+}
+
+.totalCount{
+    color: rgb(15, 98, 254);
+}
+
+.totalCount:hover{
+    cursor: pointer;
+}

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/otp-input/otp-input.component.scss

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

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

@@ -0,0 +1,90 @@
+import React, { useRef, useState } from 'react';
+import { TextInput } from '@carbon/react';
+import styles from './otp-input.component.scss';
+
+interface OTPInputProps {
+  onChange: (otp: string) => void;
+  otpLength: number;
+}
+
+const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength }) => {
+  const [otp, setOtp] = useState(Array(otpLength).fill(''));
+  const inputsRef = useRef([]);
+
+  if (!otpLength) {
+    return <>OTP Length not defined</>;
+  }
+
+  const focusInput = (index) => {
+    if (inputsRef.current[index]) {
+      inputsRef.current[index].focus();
+    }
+  };
+
+  const handleChange = (value, index) => {
+    if (!/^\d?$/.test(value)) return;
+
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+
+    if (value && index < otpLength - 1) {
+      focusInput(index + 1);
+    }
+
+    onChange?.(newOtp.join(''));
+  };
+
+  const handleKeyDown = (e, index) => {
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      focusInput(index - 1);
+    }
+  };
+
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, otpLength);
+
+    if (!pasted) return;
+
+    const newOtp = [...otp];
+    pasted.split('').forEach((digit, i) => {
+      newOtp[i] = digit;
+    });
+
+    setOtp(newOtp);
+    onChange?.(newOtp.join(''));
+    focusInput(pasted.length - 1);
+  };
+
+  return (
+    <div className={styles.otpInputContainer} onPaste={handlePaste}>
+      {otp.map((digit, index) => (
+        <div className={styles.otpDataInputContainer}>
+          <TextInput
+            className={styles.otpDataInput}
+            key={index}
+            id={`otp-${index}`}
+            value={digit}
+            labelText=""
+            hideLabel
+            maxLength={1}
+            inputMode="numeric"
+            pattern="[0-9]*"
+            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',
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OTPInput;

package/src/shared/ui/stat-card/stat-card.component.scss

@@ -0,0 +1,10 @@
+.statsCard{
+    display: flex;
+    flex-direction: column;
+    width: 40%;
+    row-gap: 5px;
+    border-radius: 12px;
+    border: 1px solid #d2d2d2;
+    height: 100px;
+    padding: 10px 10px;
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import styles from './stat-card.component.scss';
+
+interface StatCardProps {
+  title: string;
+  count?: number;
+  other?: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, count, other }) => {
+  if (!title) {
+    return <></>;
+  }
+  return (
+    <div className={styles.statsCard}>
+      <div className={styles.statsCardHeader}>
+        <h5>{title}</h5>
+        <h1>
+          {count} {other}
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

package/src/shared/ui/timer/timer.component.scss

@@ -0,0 +1,5 @@
+.timerData{
+   height: 3rem;
+   font-size: 30px;
+   color: #0055a5;
+}

package/src/shared/ui/timer/timer.component.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import styles from './timer.component.scss';
+
+interface TimerProps {
+  durationInSeconds: number;
+  resetTimer: () => void;
+  onTimeUp: () => void;
+}
+const Timer: React.FC<TimerProps> = ({ durationInSeconds, resetTimer, onTimeUp }) => {
+  const [timeLeft, setTimeLeft] = useState(durationInSeconds);
+
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      onTimeUp?.();
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setTimeLeft((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [timeLeft]);
+
+  const convertToMinsAndSeconds = (timeInSeconds: number) => {
+    const min = Math.floor(timeInSeconds / 60);
+    const seconds = timeInSeconds % 60;
+    const formatedMin = min > 9 ? min : `0${min}`;
+    const formattedSec = seconds > 9 ? seconds : `0${seconds}`;
+    return `${formatedMin}:${formattedSec}`;
+  };
+  return (
+    <>
+      <div className={styles.timerData}>
+        <b>{convertToMinsAndSeconds(timeLeft)}</b>
+      </div>
+    </>
+  );
+};
+export default Timer;

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

@@ -0,0 +1,27 @@
+import { getConfig } from '@openmrs/esm-framework';
+import { moduleName } from '../..';
+
+export async function getSubDomainUrl() {
+  const { subDomainUrl } = await getConfig(moduleName);
+  return subDomainUrl ?? null;
+}
+
+export async function getEtlBaseUrl() {
+  const { etlBaseUrl } = await getConfig(moduleName);
+  return etlBaseUrl ?? null;
+}
+
+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;
+}

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

@@ -0,0 +1,66 @@
+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.Priority:
+      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/side-nav-menu/nav-link-config.ts

@@ -72,5 +72,11 @@ export const navLinksConfig = [
   {
     to: 'bookings',
     title: 'Bookings',
+    children: [
+      {
+        to: 'daily',
+        title: 'Daily',
+      },
+    ],
   },
 ];

package/src/triage/metrics/attended-patients.extension.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../../registry/types';
+
+export default function TriageAttendedToPatientsExtension() {
+  const { t } = useTranslation();
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+
+  const attendedToPatientsCount = triageQueueEntries?.filter((p) => p.status === 'COMPLETED').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
+      <MetricsCardBody>
+        <MetricsCardItem
+          label={t('patients', 'Patients')}
+          value={attendedToPatientsCount ? attendedToPatientsCount : '--'}
+        />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/triage/metrics/metrics.scss

@@ -0,0 +1,36 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  padding: layout.$spacing-05;
+  flex-flow: row wrap;
+  gap: layout.$spacing-05;
+  align-items: stretch;
+}
+
+.cardContainer > * {
+  flex: 1 0 0%;
+  min-width: 16rem;
+}
+
+// If we're on tablet and the screen is too small for 3 cards across
+// @TODO: This will do nonsense things if there are not exactly 3 cards
+@media (max-width: calc(layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-lt-desktop) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}
+
+// If we're on desktop and the screen is too small for the left nav bar
+// plus 3 cards across
+@media (max-width: calc(16rem + layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-gt-tablet) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}

package/src/triage/metrics/triage-metrics.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './metrics.scss';
+import TriageWaitingPatientsExtension from './waiting-patients.extension';
+import TriageAttendedToPatientsExtension from './attended-patients.extension';
+
+export interface Service {
+  display: string;
+  uuid?: string;
+}
+
+function TriageMetricsContainer() {
+  return (
+    <div className={styles.cardContainer}>
+      <TriageWaitingPatientsExtension />
+      <TriageAttendedToPatientsExtension />
+    </div>
+  );
+}
+
+export default TriageMetricsContainer;