@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.4 → 5.4.2-pre.6

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"triage","slot":"triage-dashboard-slot","title":"triage"}},{"name":"triage-dashboard","component":"triageDashboard","slot":"triage-dashboard-slot"}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"}],"modals":[],"workspaceGroups":[],"version":"5.4.2-pre.4"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"triage","slot":"triage-dashboard-slot","title":"triage"}},{"name":"triage-dashboard","component":"triageDashboard","slot":"triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"modals":[],"workspaceGroups":[],"version":"5.4.2-pre.6"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladium-ethiopia/esm-clinical-workflow-app",
-  "version": "5.4.2-pre.4",
+  "version": "5.4.2-pre.6",
   "description": "Express workflow app for OpenMRS 3",
   "keywords": [
     "openmrs",

package/src/config-schema.ts

@@ -7,8 +7,24 @@ export const configSchema = {
     _elements: { _type: Type.String },
     _default: ['Central Triage', 'Pediatrics Triage', 'Emergency Triage'],
   },
+  billingVisitAttributeTypes: {
+    _type: Type.Object,
+    _description: 'Visit attribute type UUIDs for billing information',
+    _default: {
+      paymentMethod: 'e6cb0c3b-04b0-4117-9bc6-ce24adbda802',
+      creditType: '5cd1eb62-e006-4146-bd22-80bc4d5bd2f7',
+      creditTypeDetails: 'd824aa96-d2c7-4a52-aa8d-03f60a516083',
+      freeType: '7523ecfe-b8f1-4e7f-80a7-1a495b15ace4',
+    },
+  },
 };
 
 export type ClinicalWorkflowConfig = {
   triageServices: Array<string>;
+  billingVisitAttributeTypes: {
+    paymentMethod: string;
+    creditType: string;
+    creditTypeDetails: string;
+    freeType: string;
+  };
 };

package/src/index.ts

@@ -2,6 +2,9 @@ import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmr
 import { createDashboardLink } from './createDashboardLink';
 import { configSchema } from './config-schema';
 import { dashboardMeta } from './dashboard.meta';
+import MRUDashboard from './mru/dashboard.component';
+import { spaBasePath } from './constants';
+import BillingInformationWorkspace from './mru/billing-information/billing-information.workspace';
 
 const moduleName = '@ethiopia/esm-clinical-workflow-app';
 
@@ -24,3 +27,15 @@ export const patientRegistrationWorkspace = getAsyncLifecycle(
   () => import('./patient-registration/patient.registration.workspace'),
   options,
 );
+
+export const mruDashboard = getSyncLifecycle(MRUDashboard, options);
+export const mruLeftPanelLink = getSyncLifecycle(
+  createDashboardLink({
+    path: 'mru',
+    title: 'MRU',
+    basePath: spaBasePath,
+  }),
+  options,
+);
+
+export const billingInformationWorkspace = getSyncLifecycle(BillingInformationWorkspace, options);

package/src/mru/billing-information/billing-information.resource.ts

@@ -0,0 +1,137 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { z } from 'zod';
+// Create the billing form schema factory with conditional validation based on skip logic
+export const createBillingFormSchema = (t: (key: string, defaultValue?: string) => string) => {
+  return z
+    .object({
+      billingType: z.enum(['credit', 'free', 'cash']).optional(),
+      creditType: z.string().optional(),
+      name: z.string().optional(),
+      code: z.string().optional(),
+      id: z.string().optional(),
+      expiryDate: z.string().optional(),
+      zone: z.string().optional(),
+      freeType: z.string().optional(),
+    })
+    .superRefine((data, ctx) => {
+      // Billing type is required on submit
+      if (!data.billingType) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('billingTypeRequired', 'Billing type is required'),
+          path: ['billingType'],
+        });
+        return;
+      }
+
+      // Credit billing type validation
+      if (data.billingType === 'credit') {
+        // Credit type is required
+        if (!data.creditType || data.creditType.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: t('creditTypeRequired', 'Credit type is required'),
+            path: ['creditType'],
+          });
+        }
+
+        // If creditType is insurance, require additional fields
+        if (data.creditType === 'insurance') {
+          if (!data.id || data.id.trim() === '') {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('idRequired', 'ID is required'),
+              path: ['id'],
+            });
+          }
+        }
+      }
+
+      // Free billing type validation
+      if (data.billingType === 'free') {
+        if (!data.freeType || data.freeType.trim() === '') {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: t('freeTypeRequired', 'Free type is required'),
+            path: ['freeType'],
+          });
+        }
+      }
+    });
+};
+
+export type BillingFormData = z.infer<ReturnType<typeof createBillingFormSchema>>;
+
+const transformFormObjectToVisitAttributes = (
+  formObject: Record<string, any>,
+  visitAttributeTypeUuidsMap: Record<string, string>,
+) => {
+  return Object.entries(formObject)
+    .map(([key, value]) => ({
+      attributeType: visitAttributeTypeUuidsMap[key],
+      value: value,
+    }))
+    .filter((item) => {
+      // Filter out undefined, null, or empty string values
+      if (item.value === undefined || item.value === null || item.value === '') {
+        return false;
+      }
+      // Filter out empty creditTypeDetails object
+      if (item.value && typeof item.value === 'object' && !Array.isArray(item.value)) {
+        const creditDetails = item.value as Record<string, any>;
+        const hasAnyValue = Object.values(creditDetails).some((val) => val !== undefined && val !== null && val !== '');
+        if (!hasAnyValue) {
+          return false;
+        }
+      }
+      return true;
+    })
+    .map((item) => ({
+      attributeType: item.attributeType,
+      value: item.value && typeof item.value === 'object' ? JSON.stringify(item.value) : item.value,
+    }));
+};
+
+export const createBillingInformationVisitAttribute = (
+  billingFormData: BillingFormData,
+  visitAttributeTypeUuidsMap: {
+    paymentMethod: string;
+    creditType: string;
+    creditTypeDetails: string;
+    freeType: string;
+  },
+) => {
+  const { billingType, creditType, name, code, id, expiryDate, zone, freeType } = billingFormData;
+
+  const formObject = {
+    paymentMethod: billingType,
+    creditType: creditType,
+    creditTypeDetails: {
+      name: name,
+      code: code,
+      id: id,
+      expiryDate: expiryDate,
+      zone: zone,
+    },
+    freeType: freeType,
+  };
+
+  const visitAttributePayload = transformFormObjectToVisitAttributes(formObject, visitAttributeTypeUuidsMap);
+
+  return visitAttributePayload;
+};
+
+export const updateVisitWithBillingInformation = (
+  visitAttributePayload: Array<{ attributeType: string; value: string }>,
+  visitUuid: string,
+) => {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: {
+      attributes: visitAttributePayload,
+    },
+  });
+};

package/src/mru/billing-information/billing-information.scss

@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.sectionTitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.buttonSet {
+  width: 100%;
+  padding-top: spacing.$spacing-05;
+  background-color: colors.$white-0;
+  justify-content: space-between;
+  bottom: 0;
+  position: absolute;
+  & > button {
+    max-width: 50% !important;
+    width: 50%;
+  }
+}
+
+.billingInformationContainer {
+  margin: spacing.$spacing-05;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.creditDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-05;
+  margin-top: spacing.$spacing-03;
+  min-height: 45rem;
+  border: 1px solid colors.$gray-20;
+  padding: spacing.$spacing-03;
+}
+
+.freeDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-05;
+  margin-top: spacing.$spacing-03;
+  min-height: 20rem;
+  border: 1px solid colors.$gray-20;
+  padding: spacing.$spacing-03;
+}
+
+.creditTypeDetailsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-03;
+}

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

@@ -0,0 +1,369 @@
+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 { 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: (key: string, defaultValue?: string) => string;
+};
+
+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: (key: string, defaultValue?: string) => string;
+};
+
+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;