@digihmis/esm-outpatient-app 1.0.0

package/src/patient-management/patient-management-workspace/patient-management.resource.ts

@@ -0,0 +1,182 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, showSnackbar, useConfig, useVisit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { useCallback, useMemo } from 'react';
+import { Patient } from '../../main-dashboard/type';
+import {
+  BillableItem,
+  BillableItemsResponse,
+  ConceptAnswers,
+  ConceptResponse,
+  DiagnosisResponse,
+  PaymentInfo,
+  TransformedBillableItem,
+} from './type';
+import { ConfigObject } from '../../config-schema';
+import { useCurrencyFormatting } from './utils';
+import useSWRImmutable from 'swr/immutable';
+
+export const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),identifiers:(uuid,identifier,identifierType:(uuid,display),preferred),person:(uuid`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};
+
+export const useDiagnosis = (searchQuery: string) => {
+  const customRepresentation = `custom:(uuid,display)`;
+  const ICD11_SOURCE_UUID = '39ADDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD';
+  const url = `${restBaseUrl}/concept?v=${customRepresentation}&q=${searchQuery}&source=${ICD11_SOURCE_UUID}`;
+
+  const { isLoading, error, data } = useSWR<FetchResponse<DiagnosisResponse>>(
+    searchQuery && searchQuery.length >= 3 ? url : null,
+    openmrsFetch,
+  );
+
+  const diagnoses = data?.data?.results;
+  return { isLoading, error, diagnoses };
+};
+
+export const usePatientPaymentType = (patientUuid: string): PaymentInfo => {
+  const { activeVisit } = useVisit(patientUuid);
+  const { visitAttributeTypes, insurancePaymentMethod } = useConfig<ConfigObject>();
+
+  const paymentInfo = useMemo<PaymentInfo>(() => {
+    if (!activeVisit?.attributes) {
+      return {
+        paymentType: null,
+        isInsurance: false,
+        isCash: false,
+        insuranceScheme: null,
+        policyNumber: null,
+      };
+    }
+
+    const paymentMethodAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.paymentMethods,
+    );
+
+    const insuranceSchemeAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.insuranceScheme,
+    );
+
+    const policyNumberAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.policyNumber,
+    );
+
+    if (!paymentMethodAttr) {
+      return {
+        paymentType: null,
+        isInsurance: false,
+        isCash: false,
+        insuranceScheme: null,
+        policyNumber: null,
+      };
+    }
+
+    const paymentMethodValue =
+      typeof paymentMethodAttr?.value === 'object' ? paymentMethodAttr?.value?.uuid : paymentMethodAttr?.value;
+
+    const isInsurance = paymentMethodValue === insurancePaymentMethod;
+
+    return {
+      paymentType: isInsurance ? ('insurance' as const) : ('cash' as const),
+      isInsurance,
+      isCash: !isInsurance,
+      insuranceScheme: insuranceSchemeAttr?.value || null,
+      policyNumber: policyNumberAttr?.value || null,
+    };
+  }, [activeVisit, visitAttributeTypes, insurancePaymentMethod]);
+
+  return paymentInfo;
+};
+
+export const useBillableServicesByType = (serviceTypeUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,price,paymentMode:(uuid,name,description)),concept:(uuid))';
+
+  const { data, error, isLoading, mutate } = useSWR<{ data: BillableItemsResponse }, Error>(
+    serviceTypeUuid ? `${restBaseUrl}/cashier/billableService?v=${customRepresentation}` : null,
+    openmrsFetch,
+  );
+
+  const lineItems = useMemo<BillableItem[]>(() => {
+    if (!data?.data?.results || !serviceTypeUuid) {
+      return [];
+    }
+
+    return data.data.results.filter((item) => item.serviceType?.uuid === serviceTypeUuid);
+  }, [data, serviceTypeUuid]);
+
+  return {
+    lineItems,
+    isLoading,
+    error,
+    mutate,
+  };
+};
+
+export const useBillableServicesWithPricing = (serviceTypeUuid: string) => {
+  const { formatSimple } = useCurrencyFormatting();
+  const { lineItems, isLoading, error, mutate } = useBillableServicesByType(serviceTypeUuid);
+
+  const transformItems = useCallback(
+    (items: BillableItem[], isInsurance: boolean): TransformedBillableItem[] => {
+      if (!items || items.length === 0) {
+        return [];
+      }
+
+      return items.map((item) => {
+        const priceForPaymentMode = isInsurance
+          ? item.servicePrices?.find((p) => p.paymentMode?.name?.toLowerCase().includes('insurance'))
+          : item.servicePrices?.find((p) => p.paymentMode?.name?.toLowerCase().includes('cash'));
+
+        const finalPrice = priceForPaymentMode || item?.servicePrices?.[0];
+        const price = finalPrice ? parseFloat(finalPrice.price.toString()) : 0;
+        const conceptUuid = item?.concept?.uuid || item?.uuid;
+
+        return {
+          id: conceptUuid,
+          text: `${item.name} - ${formatSimple(price, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
+          name: item.name,
+          price: price,
+          paymentModeUuid: finalPrice?.paymentMode?.uuid || '',
+          paymentModeName: finalPrice?.paymentMode?.name || 'Cash',
+          billableServiceUuid: item.uuid,
+          conceptUuid: conceptUuid,
+          priceUuid: finalPrice?.uuid || '',
+        };
+      });
+    },
+    [formatSimple],
+  );
+
+  return {
+    lineItems,
+    isLoading,
+    error,
+    mutate,
+    transformItems,
+  };
+};
+
+export function useConceptAnswers(conceptUuid: string): {
+  data: Array<ConceptAnswers>;
+  isLoading: boolean;
+  error: Error;
+} {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  const results = useMemo(() => ({ data: data?.data?.answers, isLoading, error }), [isLoading, error, data]);
+  return results;
+}

package/src/patient-management/patient-management-workspace/type/index.ts

@@ -0,0 +1,193 @@
+import { FetchResponse } from '@openmrs/esm-framework';
+
+export interface DiagnosisResponse {
+  results: Array<{ uuid: string; display: string }>;
+}
+
+export interface DiagnosisItem {
+  id: string;
+  text: string;
+}
+
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  datatype: {
+    uuid: string;
+    display: string;
+  };
+  answers: Array<ConceptAnswers>;
+  setMembers: Array<ConceptAnswers>;
+}
+
+export interface OpenmrsObject {
+  uuid: string;
+}
+
+export type BaseOpenmrsObject = OpenmrsObject;
+
+export interface SessionPriviledge {
+  uuid: string;
+  name: string;
+}
+
+export interface Person {
+  uuid: string;
+  display: string;
+}
+
+export interface Role {
+  role: string;
+  display: string;
+}
+
+export interface User {
+  uuid: string;
+  display: string;
+  givenName: string;
+  familyName: string;
+  firstName: string;
+  lastName: string;
+  person?: Person;
+  roles?: Array<Role>;
+  privileges: Array<SessionPriviledge>;
+}
+
+export interface Auditable extends OpenmrsObject {
+  creator: User;
+  dateCreated: Date;
+  changedBy: User;
+  dateChanged: Date;
+}
+
+export interface Retireable extends OpenmrsObject {
+  retired: boolean;
+  dateRetired: Date;
+  retiredBy: User;
+  retireReason: string;
+}
+
+export interface ConceptName extends BaseOpenmrsObject {
+  conceptNameId: number;
+  concept: Concept;
+  name: string;
+  localePreferred: boolean;
+  short: boolean;
+  preferred: boolean;
+  indexTerm: boolean;
+  synonym: boolean;
+  fullySpecifiedName: boolean;
+}
+
+export interface Concept extends BaseOpenmrsObject, Auditable, Retireable {
+  conceptId: number;
+  display: string;
+  set: boolean;
+  version: string;
+  names: Array<ConceptName>;
+  name: ConceptName;
+  numeric: boolean;
+  complex: boolean;
+  shortNames: Array<ConceptName>;
+  indexTerms: Array<ConceptName>;
+  synonyms: Array<ConceptName>;
+  setMembers: Array<Concept>;
+  possibleValues: Array<Concept>;
+  preferredName: ConceptName;
+  shortName: ConceptName;
+  fullySpecifiedName: ConceptName;
+  answers: Array<Concept>;
+}
+
+export type ConceptResult = FetchResponse<Concept>;
+export type ConceptResults = FetchResponse<{ setMembers: Array<Concept> }>;
+
+export interface ProceduresType {
+  label: string;
+  conceptUuid: string;
+}
+
+export interface UseProceduresType {
+  testTypes: Array<ProceduresType>;
+  isLoading: boolean;
+  error: Error;
+}
+
+export interface PaymentMode {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  retireReason: string | null;
+  attributeTypes: Array<any>;
+  sortOrder: number | null;
+  resourceVersion: string;
+}
+
+export interface ServicePrice {
+  uuid: string;
+  name: string;
+  price: number;
+  paymentMode: PaymentMode;
+}
+
+export interface ServiceType {
+  uuid: string;
+  display: string;
+}
+
+export interface BillableItem {
+  uuid: string;
+  name: string;
+  shortName: string;
+  serviceStatus: string;
+  serviceType: ServiceType;
+  servicePrices: Array<ServicePrice>;
+  concept: {
+    uuid: string;
+  };
+}
+
+export interface BillableItemsResponse {
+  results: Array<BillableItem>;
+}
+
+export interface ProcedureWithBillingDetails {
+  id: string;
+  text: string;
+  name: string;
+  price: number;
+  paymentModeUuid: string;
+  paymentModeName: string;
+  billableServiceUuid: string;
+  conceptUuid: string;
+  priceUuid: string;
+}
+
+export type TransformedBillableItem = ProcedureWithBillingDetails;
+
+export interface PaymentInfo {
+  paymentType: 'insurance' | 'cash' | null;
+  isInsurance: boolean;
+  isCash: boolean;
+  insuranceScheme: string | null;
+  policyNumber: string | null;
+}
+
+export interface GenericItem {
+  id: string;
+  text: string;
+}
+
+export interface BillableServicesHookResult {
+  lineItems: Array<BillableItem>;
+  isLoading: boolean;
+  error: Error | undefined;
+  mutate: () => void;
+  transformItems: (items: Array<BillableItem>, isInsurance: boolean) => Array<TransformedBillableItem>;
+}

package/src/patient-management/patient-management-workspace/utils/index.ts

@@ -0,0 +1,172 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { ConfigObject } from '../../../config-schema';
+
+export const DEFAULT_LOCALE_CURRENCY_MAP: Record<string, string> = {
+  en: 'KSH', // English - US Dollar
+  sw: 'KES', // Swahili - Kenyan Shilling
+  am: 'ETB', // Amharic - Ethiopian Birr
+  ar: 'SAR', // Arabic - Saudi Riyal
+  es: 'EUR', // Spanish - Euro
+  fr: 'EUR', // French - Euro
+  he: 'ILS', // Hebrew - Israeli Shekel
+  km: 'KHR', // Khmer - Cambodian Riel
+  pt: 'EUR', // Portuguese - Euro
+  vi: 'VND', // Vietnamese - Vietnamese Dong
+  zh: 'CNY', // Chinese - Chinese Yuan
+  'en-KE': 'KES', // English Kenya
+  'sw-KE': 'KES', // Swahili Kenya
+  'am-ET': 'ETB', // Amharic Ethiopia
+};
+
+/**
+ * Gets the currency code for the current locale
+ * @returns The currency code (e.g., 'KES', 'ETB', 'USD')
+ */
+export const getCurrencyForLocale = (): string => {
+  const currentLocale = localStorage.getItem('i18nextLng') ?? 'en';
+
+  // Try exact match first
+  if (DEFAULT_LOCALE_CURRENCY_MAP[currentLocale]) {
+    return DEFAULT_LOCALE_CURRENCY_MAP[currentLocale];
+  }
+
+  // Try base language (e.g., 'en-US' → 'en')
+  const baseLanguage = currentLocale.split('-')[0];
+  if (DEFAULT_LOCALE_CURRENCY_MAP[baseLanguage]) {
+    return DEFAULT_LOCALE_CURRENCY_MAP[baseLanguage];
+  }
+
+  // Final fallback
+  return 'USD';
+};
+
+/**
+ * Gets the currency code for the current locale with config support
+ * @param config - The billing configuration object
+ * @returns The currency code (e.g., 'KES', 'ETB', 'USD')
+ */
+export const getCurrencyForLocaleWithConfig = (config?: ConfigObject): string => {
+  const currentLocale = localStorage.getItem('i18nextLng') ?? 'en';
+
+  // Use config mapping if available, otherwise fall back to default
+  const currencyMap = config?.localeCurrencyMapping || DEFAULT_LOCALE_CURRENCY_MAP;
+
+  // Try exact match first
+  if (currencyMap[currentLocale]) {
+    return currencyMap[currentLocale];
+  }
+
+  // Try base language (e.g., 'en-US' → 'en')
+  const baseLanguage = currentLocale.split('-')[0];
+  if (currencyMap[baseLanguage]) {
+    return currencyMap[baseLanguage];
+  }
+
+  // Final fallback
+  return 'USD';
+};
+
+/**
+ * Gets the current locale from localStorage
+ * @returns The current locale (e.g., 'en', 'sw', 'am')
+ */
+export const getCurrentLocale = (): string => {
+  return localStorage.getItem('i18nextLng') ?? 'en';
+};
+
+/**
+ * Formats a number as currency based on the current locale
+ * @param amount - The amount to format
+ * @param options - Additional Intl.NumberFormat options
+ * @returns Formatted currency string
+ */
+export const formatCurrency = (amount: number, options: Intl.NumberFormatOptions = {}): string => {
+  const currentLocale = getCurrentLocale();
+  const currency = getCurrencyForLocale();
+
+  const formatter = new Intl.NumberFormat(currentLocale, {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2,
+    ...options,
+  });
+
+  let formattedAmount = formatter.format(Math.abs(amount));
+
+  if (amount < 0) {
+    formattedAmount = `- ${formattedAmount}`;
+  }
+
+  return formattedAmount;
+};
+
+/**
+ * Formats a number as currency without negative sign handling
+ * @param amount - The amount to format
+ * @param options - Additional Intl.NumberFormat options
+ * @returns Formatted currency string
+ */
+export const formatCurrencySimple = (amount: number, options: Intl.NumberFormatOptions = {}): string => {
+  const currentLocale = getCurrentLocale();
+  const currency = getCurrencyForLocale();
+
+  const formatter = new Intl.NumberFormat(currentLocale, {
+    style: 'currency',
+    currency: currency,
+    ...options,
+  });
+
+  return formatter.format(amount);
+};
+
+/**
+ * Hook to get currency formatting with config support
+ * @returns Object with currency formatting functions
+ */
+export const useCurrencyFormatting = () => {
+  const config = useConfig<ConfigObject>();
+
+  const getCurrency = () => getCurrencyForLocaleWithConfig(config);
+
+  const getLocale = () => getCurrentLocale();
+
+  const format = (amount: number, options: Intl.NumberFormatOptions = {}) => {
+    const currentLocale = getLocale();
+    const currency = getCurrency();
+
+    const formatter = new Intl.NumberFormat(currentLocale, {
+      style: 'currency',
+      currency: currency,
+      minimumFractionDigits: 2,
+      ...options,
+    });
+
+    let formattedAmount = formatter.format(Math.abs(amount));
+
+    if (amount < 0) {
+      formattedAmount = `- ${formattedAmount}`;
+    }
+
+    return formattedAmount;
+  };
+
+  const formatSimple = (amount: number, options: Intl.NumberFormatOptions = {}) => {
+    const currentLocale = getLocale();
+    const currency = getCurrency();
+
+    const formatter = new Intl.NumberFormat(currentLocale, {
+      style: 'currency',
+      currency: currency,
+      ...options,
+    });
+
+    return formatter.format(amount);
+  };
+
+  return {
+    getCurrency,
+    getLocale,
+    format,
+    formatSimple,
+  };
+};

package/src/patient-management/patient-management.component.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './patient-management.scss';
+import { getPatientUuidFromUrl } from './utils';
+import { ExtensionSlot, launchWorkspace, launchWorkspace2, usePatient } from '@openmrs/esm-framework';
+import {
+  Tabs,
+  TabsVertical,
+  TabListVertical,
+  TextInput,
+  Stack,
+  Layer,
+  Tab,
+  RadioButtonGroup,
+  RadioButton,
+  Checkbox,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Button,
+} from '@carbon/react';
+import { AssetMovement } from '@carbon/react/icons';
+import PatientBanner from './patient-banner/patient-banner.component';
+import { CardHeader } from '@openmrs/esm-patient-common-lib/src';
+
+const CarePanel: React.FC = () => {
+  const { t } = useTranslation();
+  const patientUuid = getPatientUuidFromUrl();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
+
+  const handleConsultationStart = (patientUuid: string) => {
+    launchWorkspace('patient-consultation', { patientUuid });
+  };
+
+  return (
+    <>
+      <div className={styles.header}>
+        {patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow={true} />}
+        <ExtensionSlot name="patient-vitals-header-slot" state={{ patientUuid }} />
+        <Button
+          size="sm"
+          kind="primary"
+          renderIcon={AssetMovement}
+          className={styles.buttonStartConsultation}
+          onClick={() => handleConsultationStart(patientUuid!)}>
+          {t('startConsultation', 'Start Consultation')}
+        </Button>
+      </div>
+      {/* <TabsVertical height="3">
+        <TabListVertical>
+          <Tab>{t('clinicalEncounter', 'Clinical Encounter')}</Tab>
+          <Tab>{t('labResults', 'Laboratory Results')}</Tab>
+          <Tab>{t('procedureResults', 'Procedure Results')}</Tab>
+          <Tab>{t('imagingResults', 'Imaging Results')}</Tab>
+          <Tab>{t('prescriptions', 'Prescriptions')}</Tab>
+          <Tab>{t('appointments', 'Appointments')}</Tab>
+        </TabListVertical>
+        <TabPanels>
+          <TabPanel>Tab Panel 1</TabPanel>
+          <TabPanel>
+            <Layer>
+              <form
+                style={{
+                  margin: '2em',
+                }}>
+                <Stack gap={7}>
+                  <TextInput id="one" labelText="First Name" />
+                  <TextInput id="three" labelText="Middle Initial" />
+                  <TextInput id="two" labelText="Last Name" />
+                  <RadioButtonGroup
+                    defaultSelected="radio-1"
+                    legendText="Radio button heading"
+                    name="formgroup-default-radio-button-group">
+                    <RadioButton id="radio-1" labelText="Option 1" value="radio-1" />
+                    <RadioButton id="radio-2" labelText="Option 2" value="radio-2" />
+                    <RadioButton id="radio-3" labelText="Option 3" value="radio-3" />
+                  </RadioButtonGroup>
+                  <Checkbox id="checkbox-label-1" labelText="Checkbox one" />
+                  <Checkbox id="checkbox-label-2" labelText="Checkbox two" />
+                  <Button>Submit</Button>
+                </Stack>
+              </form>
+            </Layer>
+          </TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+          <TabPanel>Tab Panel 4</TabPanel>
+          <TabPanel>Tab Panel 5</TabPanel>
+          <TabPanel>Tab Panel 6</TabPanel>
+          <TabPanel>Tab Panel 7</TabPanel>
+        </TabPanels>
+      </TabsVertical> */}
+    </>
+  );
+};
+
+export default CarePanel;

package/src/patient-management/patient-management.scss

@@ -0,0 +1,30 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  margin-top: layout.$spacing-04;
+}
+
+:global(.cds--css-grid) {
+  --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
+  --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
+  --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
+  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  width: 100%;
+  max-width: 150rem;
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  display: grid;
+}
+:global(.-esm-outpatient__card-header__desktopHeader___Qe2fu),
+:global(.-esm-outpatient__card-header__tabletHeader___gFxMA) {
+  // background-color: #f4f4f4 !important; // Your desired color
+  padding-bottom: 1rem;
+}
+:global(.cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--selected) {
+  box-shadow: inset 3px 0 0 0 var(--cds-border-interactive, #4a90b8);
+  border-left: none;
+  border-right: none;
+}

package/src/patient-management/utils/index.ts

@@ -0,0 +1,5 @@
+export function getPatientUuidFromUrl(): string {
+  const match = /\/patient\/([a-zA-Z0-9\-]+)\/?/.exec(location.pathname);
+  const patientUuidFromUrl = match && match[1];
+  return patientUuidFromUrl || '';
+}