@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20

package/src/mru/billing-information/billing-information.workspace.tsx

@@ -0,0 +1,371 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  Button,
+  ButtonSet,
+  InlineLoading,
+  ContentSwitcher,
+  Dropdown,
+  Switch,
+  TextInput,
+  Form,
+  FormGroup,
+} from '@carbon/react';
+import {
+  DefaultWorkspaceProps,
+  ExtensionSlot,
+  usePatient,
+  OpenmrsDatePicker,
+  useConfig,
+  useVisit,
+  showSnackbar,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+
+import { useForm, Controller, Control, FieldErrors, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  type BillingFormData,
+  createBillingFormSchema,
+  createBillingInformationVisitAttribute,
+  updateVisitWithBillingInformation,
+} from './billing-information.resource';
+import type { ClinicalWorkflowConfig } from '../../config-schema';
+import styles from './billing-information.scss';
+
+type BillingInformationWorkspaceProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+};
+
+const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> = ({
+  patientUuid,
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+}) => {
+  const { t } = useTranslation();
+  const { patient, isLoading } = usePatient(patientUuid);
+  const { activeVisit, mutate: mutateVisit } = useVisit(patientUuid);
+  const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
+  const billingFormSchema = useMemo(() => createBillingFormSchema(t), [t]);
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors, isDirty },
+  } = useForm<BillingFormData>({
+    resolver: zodResolver(billingFormSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      billingType: undefined,
+      creditType: '',
+      name: '',
+      code: '',
+      id: '',
+      expiryDate: '',
+      zone: '',
+      freeType: '',
+    },
+  });
+
+  const billingType = watch('billingType');
+
+  const onSubmit = async (data: BillingFormData) => {
+    try {
+      const visitAttributePayload = createBillingInformationVisitAttribute(data, billingVisitAttributeTypes);
+      const response = await updateVisitWithBillingInformation(visitAttributePayload, activeVisit?.uuid);
+      if (response.status === 200) {
+        showSnackbar({
+          title: t('updateVisitWithBillingInfo', 'Update Visit With Billing Information'),
+          subtitle: t('updateVisitWithBillingInfoSuccess', 'Update Visit With Billing Information Success'),
+          kind: 'success',
+          isLowContrast: true,
+          timeoutInMs: 5000,
+        });
+        mutateVisit();
+        closeWorkspaceWithSavedChanges();
+      }
+    } catch (error) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorUpdatingBillingInformation', 'Error updating billing information, {{error}}', {
+          error: error.message,
+        }),
+        kind: 'error',
+        isLowContrast: true,
+        timeoutInMs: 5000,
+      });
+    }
+  };
+
+  const handleBillingTypeChange = (type: 'credit' | 'free' | 'cash') => {
+    // Clear form fields to avoid carrying over values from previous billing type
+    setValue('billingType', type, { shouldDirty: true });
+    setValue('creditType', '', { shouldDirty: false });
+    setValue('name', '', { shouldDirty: false });
+    setValue('code', '', { shouldDirty: false });
+    setValue('id', '', { shouldDirty: false });
+    setValue('expiryDate', '', { shouldDirty: false });
+    setValue('zone', '', { shouldDirty: false });
+    setValue('freeType', '', { shouldDirty: false });
+  };
+
+  const getSelectedIndex = () => {
+    if (billingType === 'cash') {
+      return 0;
+    }
+    if (billingType === 'free') {
+      return 1;
+    }
+    if (billingType === 'credit') {
+      return 2;
+    }
+    return -1;
+  };
+
+  const handleContentSwitcherChange = ({ index }: { index: number }) => {
+    const types: ('cash' | 'free' | 'credit')[] = ['cash', 'free', 'credit'];
+    if (index >= 0 && index < types.length) {
+      handleBillingTypeChange(types[index]);
+    }
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [promptBeforeClosing, isDirty]);
+
+  if (isLoading) {
+    return <InlineLoading status="active" iconDescription="Loading" description="Loading billing information..." />;
+  }
+
+  return (
+    <>
+      {patient && (
+        <ExtensionSlot
+          name="patient-header-slot"
+          state={{
+            patient,
+            patientUuid: patientUuid,
+            hideActionsOverflow: true,
+          }}
+        />
+      )}
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <div className={styles.billingInformationContainer}>
+          <p className={styles.sectionTitle}>{t('paymentMethods', 'Payment Methods')}</p>
+          <ContentSwitcher onChange={handleContentSwitcherChange} selectedIndex={getSelectedIndex()} size="md">
+            <Switch name="cash" text={t('cash', 'Cash')} />
+            <Switch name="free" text={t('free', 'Free')} />
+            <Switch name="credit" text={t('credit', 'Credit')} />
+          </ContentSwitcher>
+
+          {billingType === 'credit' && <CreditDetails control={control} errors={errors} t={t} />}
+          {billingType === 'free' && <FreeDetails control={control} errors={errors} t={t} />}
+        </div>
+        <ButtonSet className={styles.buttonSet}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button disabled={!isDirty} className={styles.button} kind="primary" type="submit">
+            {t('saveAndClose', 'Save & Close')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </>
+  );
+};
+
+export default BillingInformationWorkspace;
+
+type CreditDetailsProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+};
+
+const CreditDetails: React.FC<CreditDetailsProps> = ({ control, errors, t }) => {
+  const creditType = useWatch({
+    control,
+    name: 'creditType',
+  });
+
+  const creditTypeOptions = [
+    {
+      id: 'chbi',
+      text: t('chbi', 'CHBI'),
+    },
+    {
+      id: 'shi',
+      text: t('shi', 'SHI'),
+    },
+    {
+      id: 'creditCompanies',
+      text: t('creditCompanies', 'Credit Companies'),
+    },
+    {
+      id: 'insurance',
+      text: t('insurance', 'Insurance'),
+    },
+  ];
+
+  const showCreditCompanyFields = creditType === 'creditCompanies' || creditType === 'insurance';
+
+  return (
+    <FormGroup className={styles.creditDetailsContainer} legendText={t('creditDetails', 'Credit Details')}>
+      <Controller
+        name="creditType"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Dropdown
+            id="credit-type"
+            invalid={!!errors.creditType}
+            invalidText={errors.creditType?.message || 'invalid selection'}
+            itemToString={(item) => item?.text ?? ''}
+            items={creditTypeOptions}
+            label="Credit"
+            titleText="Credit"
+            type="default"
+            selectedItem={creditTypeOptions.find((item) => item.id === value) || null}
+            onChange={({ selectedItem }) => onChange(selectedItem?.id || '')}
+          />
+        )}
+      />
+
+      {showCreditCompanyFields && (
+        <FormGroup
+          legendText={t('creditTypeDetails', 'Credit Type Details')}
+          className={styles.creditTypeDetailsContainer}>
+          <Controller
+            name="id"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextInput
+                id="credit-id"
+                labelText={t('id', 'ID')}
+                value={value || ''}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={t('enterId', 'Enter ID')}
+                invalid={!!errors.id}
+                invalidText={errors.id?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="name"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextInput
+                id="credit-name"
+                labelText={t('name', 'Name')}
+                value={value || ''}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={t('enterName', 'Enter name')}
+                invalid={!!errors.name}
+                invalidText={errors.name?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="code"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextInput
+                id="credit-code"
+                labelText={t('code', 'Code')}
+                value={value || ''}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={t('enterCode', 'Enter code')}
+                invalid={!!errors.code}
+                invalidText={errors.code?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="expiryDate"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <OpenmrsDatePicker
+                id="credit-expiry-date"
+                labelText={t('expiryDate', 'Expiry Date')}
+                minDate={new Date()}
+                value={value || ''}
+                onChange={(date) => {
+                  const dateValue = typeof date === 'string' ? date : date.toISOString().split('T')[0];
+                  onChange(dateValue);
+                }}
+              />
+            )}
+          />
+          <Controller
+            name="zone"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <TextInput
+                id="credit-zone"
+                labelText={t('zone', 'Zone')}
+                value={value || ''}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={t('enterZone', 'Enter zone')}
+                invalid={!!errors.zone}
+                invalidText={errors.zone?.message}
+              />
+            )}
+          />
+        </FormGroup>
+      )}
+    </FormGroup>
+  );
+};
+
+type FreeDetailsProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+};
+
+const FreeDetails: React.FC<FreeDetailsProps> = ({ control, errors, t }) => {
+  const items = [
+    {
+      id: 'staff',
+      text: t('staff', 'Staff'),
+    },
+    {
+      id: '24Hours',
+      text: t('24Hours', '24 Hours'),
+    },
+    {
+      id: 'exempted',
+      text: t('exempted', 'Exempted'),
+    },
+  ];
+
+  return (
+    <FormGroup className={styles.freeDetailsContainer} legendText={t('freeDetails', 'Free Details')}>
+      <Controller
+        name="freeType"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Dropdown
+            id="free-type"
+            hideLabel={true}
+            invalid={!!errors.freeType}
+            invalidText={errors.freeType?.message || 'invalid selection'}
+            itemToString={(item) => item?.text ?? ''}
+            items={items}
+            label={t('selectOption', 'Select a free type')}
+            titleText={t('selectOption', 'Select a free type')}
+            type="default"
+            selectedItem={items.find((item) => item.id === value) || null}
+            onChange={({ selectedItem }) => onChange(selectedItem?.id || '')}
+          />
+        )}
+      />
+    </FormGroup>
+  );
+};

package/src/mru/dashboard.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { spaBasePath } from '../constants';
+import MRU from './mru.component';
+
+const MRUDashboard: React.FC = () => {
+  return (
+    <BrowserRouter basename={`${spaBasePath}/mru`}>
+      <Routes>
+        <Route path="/" element={<MRU />} />
+        <Route path="/:patientUuid" element={<MRU />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default MRUDashboard;

package/src/mru/mru.component.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Button, InlineLoading, Layer } from '@carbon/react';
+import {
+  ExtensionSlot,
+  PageHeader,
+  RegistrationPictogram,
+  fetchCurrentPatient,
+  launchWorkspace,
+  navigate,
+  useConfig,
+  useVisit,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Close, Edit, Money } from '@carbon/react/icons';
+import useSWR from 'swr';
+import { useParams } from 'react-router-dom';
+
+import styles from './mru.scss';
+import { type ClinicalWorkflowConfig } from '../config-schema';
+const MRU: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <PageHeader
+        title={t('medicalRecordUpdate', 'Medical Record Unit(MRU)')}
+        illustration={<RegistrationPictogram />}
+        className={styles.pageHeader}
+      />
+      <PatientSearch />
+    </div>
+  );
+};
+
+export default MRU;
+
+const PatientSearch: React.FC = () => {
+  const params = useParams<{ patientUuid: string }>();
+  const { t } = useTranslation();
+  const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
+  const [patientUuid, setPatientUuid] = React.useState<string>(params.patientUuid || undefined);
+  const { data: patient, isLoading } = useSWR(patientUuid ? ['patient', patientUuid] : null, () =>
+    fetchCurrentPatient(patientUuid!),
+  );
+  const { activeVisit } = useVisit(patientUuid);
+
+  // TODO: Add ability for user to edit billing information
+  const hasAtLeastOneBillingInformation = activeVisit?.attributes?.some(
+    (attribute) => attribute.attributeType.uuid === billingVisitAttributeTypes.paymentMethod,
+  );
+
+  const handleLaunchBillingInformationWorkspace = () => {
+    launchWorkspace('billing-information-workspace', {
+      patientUuid: patientUuid,
+    });
+  };
+
+  const handlePatientInformationEdit = () => {
+    navigate({ to: `${window.spaBase}/patient/${patientUuid}/edit` });
+  };
+
+  return (
+    <div className={styles.patientSearchContainer}>
+      <Layer>
+        <ExtensionSlot
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: (patientUuid: string) => setPatientUuid(patientUuid),
+            buttonProps: {
+              kind: 'secondary',
+            },
+          }}
+        />
+      </Layer>
+      {isLoading && <InlineLoading description={t('loading', 'Loading...')} />}
+      {patient && (
+        <div className={styles.patientHeaderContainer}>
+          <div className={styles.patientHeaderActions}>
+            <Button kind="ghost" size="md" renderIcon={Edit} onClick={handlePatientInformationEdit}>
+              {t('editPatientInformation', 'Edit Patient Information')}
+            </Button>
+            <Button
+              disabled={hasAtLeastOneBillingInformation}
+              kind="ghost"
+              size="md"
+              renderIcon={Money}
+              onClick={handleLaunchBillingInformationWorkspace}>
+              {t('addBillingInformation', 'Add Billing Information')}
+            </Button>
+            <Button kind="ghost" size="md" renderIcon={Close} onClick={() => setPatientUuid(undefined)}>
+              {t('close', 'Close')}
+            </Button>
+          </div>
+          <ExtensionSlot
+            name="patient-header-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+              hideActionsOverflow: true,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/mru/mru.scss

@@ -0,0 +1,28 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.patientSearchContainer {
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+
+  & form {
+    border: none;
+  }
+}
+
+.patientHeaderContainer {
+  margin-top: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$white;
+}
+
+.patientHeaderActions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

package/src/patient-registration/patient-registration.resource.tsx

@@ -0,0 +1,129 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import type { PatientRegistrationFormData } from './patient.registration.workspace';
+
+const calculateBirthdate = (
+  formData: PatientRegistrationFormData,
+): { formattedBirthDate: string; birthdateEstimated: boolean } => {
+  let formattedBirthDate: string;
+  let birthdateEstimated = false;
+
+  if (formData.dateOfBirth) {
+    formattedBirthDate = dayjs(formData.dateOfBirth).format('YYYY-M-D');
+    birthdateEstimated = formData.isEstimatedDOB || false;
+  } else if (
+    formData.isEstimatedDOB &&
+    (formData.ageYears !== undefined || formData.ageMonths !== undefined || formData.ageDays !== undefined)
+  ) {
+    const currentDate = dayjs();
+    let calculatedDate = currentDate;
+
+    if (formData.ageYears !== undefined && formData.ageYears !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageYears, 'year');
+    }
+    if (formData.ageMonths !== undefined && formData.ageMonths !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageMonths, 'month');
+    }
+    if (formData.ageDays !== undefined && formData.ageDays !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageDays, 'day');
+    }
+
+    formattedBirthDate = calculatedDate.format('YYYY-M-D');
+    birthdateEstimated = true;
+  } else if (formData.ageYears !== undefined || formData.ageMonths !== undefined || formData.ageDays !== undefined) {
+    const currentDate = dayjs();
+    let calculatedDate = currentDate;
+
+    if (formData.ageYears !== undefined && formData.ageYears !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageYears, 'year');
+    }
+    if (formData.ageMonths !== undefined && formData.ageMonths !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageMonths, 'month');
+    }
+    if (formData.ageDays !== undefined && formData.ageDays !== null) {
+      calculatedDate = calculatedDate.subtract(formData.ageDays, 'day');
+    }
+
+    formattedBirthDate = calculatedDate.format('YYYY-M-D');
+    birthdateEstimated = false;
+  } else {
+    formattedBirthDate = dayjs().format('YYYY-M-D');
+    birthdateEstimated = false;
+  }
+
+  return { formattedBirthDate, birthdateEstimated };
+};
+
+export const buildPatientRegistrationPayload = (
+  formData: PatientRegistrationFormData,
+  uuid: string,
+  identifier: string,
+  defaultIdentifierTypeUuid: string,
+  locationUuid: string,
+  isMedicoLegalCase?: boolean,
+  medicoLegalCasesAttributeTypeUuid?: string,
+  triageFormName?: string,
+) => {
+  const { formattedBirthDate, birthdateEstimated } = calculateBirthdate(formData);
+
+  const genderCode = formData.gender === 'Male' ? 'M' : 'F';
+
+  const attributes: Array<{ attributeType: string; value: string }> = [];
+  if (isMedicoLegalCase === true && medicoLegalCasesAttributeTypeUuid && triageFormName === 'Emergency Triage Form') {
+    attributes.push({
+      attributeType: medicoLegalCasesAttributeTypeUuid,
+      value: 'true',
+    });
+  }
+
+  return {
+    uuid: uuid,
+    person: {
+      uuid: uuid,
+      names: [
+        {
+          preferred: true,
+          givenName: formData.firstName,
+          middleName: formData.middleName,
+          familyName: formData.lastName,
+        },
+      ],
+      gender: genderCode,
+      birthdate: formattedBirthDate,
+      birthdateEstimated: birthdateEstimated,
+      attributes: attributes,
+      addresses: [{}],
+      dead: false,
+    },
+    identifiers: [
+      {
+        identifier: identifier,
+        identifierType: defaultIdentifierTypeUuid,
+        location: locationUuid,
+        preferred: true,
+      },
+    ],
+  };
+};
+
+export const registerNewPatient = (payload) => {
+  const url = `${restBaseUrl}/patient`;
+
+  return openmrsFetch<fhir.Patient>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+};
+export const generateIdentifier = (identifierSourceUuid: string) => {
+  const url = `${restBaseUrl}/idgen/identifiersource/${identifierSourceUuid}/identifier`;
+  return openmrsFetch<fhir.Identifier>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {},
+  });
+};

package/src/patient-registration/patient.registration.workspace.scss

@@ -0,0 +1,47 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.patientRegistrationFormContainer {
+  padding: 16px;
+}
+
+.submitButton {
+  margin-top: 16px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  row-gap: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.ageFormGroup {
+  width: 100%;
+}