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

package/src/billing/workspaces/create-order-bill-form-workspace/create-order-bill-form.resource.ts

@@ -0,0 +1,85 @@
+import { openmrsFetch, OpenmrsResource, restBaseUrl } from "@openmrs/esm-framework";
+import { useState } from "react";
+import useSWR from 'swr';
+import { getHieBaseUrl } from "../../../shared/utils/get-base-url";
+import { postJson } from "../../../registry/registry.resource";
+import dayjs from "dayjs";
+
+export const useBillableItems = (serviceTypeUuid: string = "") => {
+    const url = `${restBaseUrl}/billing/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,price,paymentMode),concept:(uuid))`;
+    const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+    const [searchTerm, setSearchTerm] = useState('');
+    let filteredItems =
+        data?.data?.results?.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())) ?? [];
+
+    if (serviceTypeUuid) {
+        filteredItems = filteredItems?.filter(item => item?.serviceType?.uuid === serviceTypeUuid);
+    }
+
+    return {
+        lineItems: filteredItems,
+        isLoading,
+        error,
+        searchTerm,
+        setSearchTerm,
+    };
+};
+
+export const usePatientBills = (patientUuid: string, billStatus: string = 'PENDING') => {
+    const url = `${restBaseUrl}/billing/bill?patientUuid=${patientUuid}&status=${billStatus}&v=custom:(uuid,lineItems,dateCreated)`;
+
+    const {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate: mutated,
+    } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch, {
+        errorRetryCount: 2,
+    });
+
+    const results = data?.data?.results ?? [];
+
+    const today = dayjs().startOf('day');
+
+    const currentDayBills = results.filter((bill) => {
+        const billDate = dayjs(bill?.dateCreated).startOf('day');
+        return billDate.isSame(today);
+    });
+
+    return {
+        currentDayBills,
+        error,
+        isLoading,
+        isValidating,
+        mutated,
+    };
+};
+
+export const useCashPoint = () => {
+    const url = `/ws/rest/v1/billing/cashPoint`;
+    const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+
+    return { isLoading, error, cashPoints: data?.data?.results ?? [] };
+};
+
+export const createPatientBill = (payload) => {
+    const postUrl = `${restBaseUrl}/billing/bill`;
+    return openmrsFetch<{ uuid: string, lineItems: Array<{ lineItemOrder: number; uuid: string }> }>(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
+};
+
+export const updatePatientBill = (billUuid: string, payload) => {
+    const postUrl = `${restBaseUrl}/billing/bill/${billUuid}`;
+    return openmrsFetch<{ uuid: string, lineItems: Array<{ lineItemOrder: number; uuid: string }> }>(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
+};
+
+export const removePatientBill = (uuid) => {
+    const purgeUrl = `${restBaseUrl}/billing/bill/${uuid}?purge=true`;
+    return openmrsFetch<{ uuid: string }>(purgeUrl, { method: 'DELETE' });
+};
+
+export const createOrderBillInHie = async (payload) => {
+    const hieBaseUrl = await getHieBaseUrl();
+    const url = `${hieBaseUrl}/bill-order`;
+    return postJson<{ bill_uuid: string }>(url, payload);
+}

package/src/billing/workspaces/create-order-bill-form-workspace/create-order-bill-form.scss

@@ -0,0 +1,58 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.formContainer {
+    margin: layout.$spacing-05;
+    display: flex;
+    flex-direction: column;
+    gap: layout.$spacing-05;
+}
+
+.tablet {
+    padding: layout.$spacing-06 layout.$spacing-05;
+    background-color: colors.$white;
+}
+
+.desktop {
+    padding: layout.$spacing-01 layout.$spacing-05;
+}
+
+.buttonContainer {
+    max-width: 50%;
+}
+
+.inlineLoading {
+    display: flex;
+    align-items: center;
+    gap: layout.$spacing-03;
+}
+
+.service {
+    padding: layout.$spacing-05 layout.$spacing-04;
+}
+
+.conceptsList {
+    background-color: $ui-02;
+    max-height: 14rem;
+    overflow-y: auto;
+    border: 1px solid $ui-03;
+
+    li:hover {
+        background-color: $ui-03;
+    }
+}
+
+.errorMessage {
+    @include type.type-style('label-02');
+    color: $danger;
+    margin-bottom: layout.$spacing-05;
+}

package/src/billing/workspaces/create-order-bill-form-workspace/create-order-bill-form.workspace.tsx

@@ -0,0 +1,330 @@
+import { Order } from "@openmrs/esm-patient-common-lib";
+import { useMemo, useRef, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { validationSchema, type CreateOrderBillFormSchema } from "./schema";
+import { FetchResponse, OpenmrsResource, ResponsiveWrapper, showSnackbar, useDebounce, useLayoutType } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { Column, FilterableMultiSelect, Select, SelectItem, Form, FormGroup, Stack, TextInput, InlineNotification, ButtonSet, Button, InlineLoading, Search, Layer, Tile, FormLabel } from "@carbon/react";
+import styles from './create-order-bill-form.scss';
+import React from "react";
+import classNames from 'classnames';
+import { createOrderBillInHie, createPatientBill, removePatientBill, updatePatientBill, useBillableItems, useCashPoint, usePatientBills } from "./create-order-bill-form.resource";
+import { generateUpdateBillLineItems } from "../../utils";
+
+interface CreateOrderBillFormProps {
+    closeWorkspace: () => void;
+    quantity: number;
+    order: Order,
+    mutated: () => void;
+    serviceTypeUuid: string;
+}
+
+const CreateOrderBillForm: React.FC<CreateOrderBillFormProps> = ({
+    closeWorkspace, quantity, order, mutated, serviceTypeUuid
+}) => {
+    const { t } = useTranslation();
+    const isTablet = useLayoutType() === 'tablet';
+    const { lineItems, isLoading: isLoadingLineItems } = useBillableItems(); //useBillableItems(serviceTypeUuid);
+    const { currentDayBills } = usePatientBills(order?.patient?.uuid);
+    const { cashPoints } = useCashPoint();
+    const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
+    const conceptUuid = order?.concept?.uuid;
+    const [searchTerm, setSearchTerm] = useState('');
+    const debouncedSearchTerm = useDebounce(searchTerm.trim());
+    const searchInputRef = useRef(null);
+    const searchResults = useMemo(() => {
+        if (debouncedSearchTerm) {
+            const filteredItems = lineItems.filter(item => item?.name.toLowerCase()?.includes(debouncedSearchTerm.toLowerCase()));
+            return filteredItems;
+        }
+        return [];
+    }, [debouncedSearchTerm])
+
+    const {
+        control,
+        watch,
+        handleSubmit,
+        setValue,
+        formState: { errors, isDirty, isSubmitting },
+    } = useForm<CreateOrderBillFormSchema>({
+        resolver: zodResolver(validationSchema),
+        defaultValues: {
+            quantity: quantity ?? 1
+        }
+    });
+
+    const initialPriceName = useMemo(() => {
+        let priceName = "";
+        if (currentDayBills && currentDayBills.length) {
+            const bill = currentDayBills[0];
+            priceName = bill?.lineItems?.find(i => i?.billableService?.toUpperCase() === "CONSULTATION")?.priceName;
+        }
+        return priceName;
+    }, [currentDayBills]);
+
+    const selectedBillableItem = useWatch({ control, name: 'billableItem' });
+    const billableItem = useMemo(() => {
+        if (selectedBillableItem) {
+            let filteredItems = lineItems.filter(item => item?.uuid === selectedBillableItem);
+            return filteredItems;
+        }
+        return [];
+    }, [selectedBillableItem, initialPriceName]);
+
+    const initialUnitPriceUuid = useMemo(() => {
+        if (billableItem && billableItem.length && initialPriceName) {
+            const servicePrices = billableItem[0]?.servicePrices ?? [];
+            const serviceUuid = billableItem[0]?.uuid ?? "";
+
+            const initialServicePriceUuid = servicePrices?.find(sP => sP?.paymentMode?.name?.toUpperCase() === initialPriceName.toUpperCase())?.uuid;
+            const value = serviceUuid + "#" + initialServicePriceUuid;
+            setValue("unitPrice", value);
+            return value;
+        }
+        return null;
+    }, [billableItem, initialPriceName])
+
+    const onSubmit = async (data) => {
+        try {
+            if (isSubmitting) {
+                return;
+            }
+
+            const unitPriceTxt = data?.unitPrice;
+            const serviceUuid = unitPriceTxt?.split("#")[0];
+            const servicePriceUuid = unitPriceTxt?.split("#")[1];
+            const lineItemOrder = order?.orderNumber?.split("-")[1] ?? null;
+
+            const billableItems = lineItems
+                .filter((item) => item.uuid === serviceUuid)
+                .map((item, index) => {
+                    const price = item.servicePrices?.find(service => service.uuid === servicePriceUuid)?.price || 0;
+                    const paymentStatus = price == 0 ? "PAID" : "PENDING";
+                    return {
+                        billableService: item.uuid,
+                        quantity: data.quantity,
+                        item: conceptUuid,
+                        price: price,
+                        priceName: item.servicePrices?.find(service => service.uuid === servicePriceUuid)?.name || 'Default',
+                        priceUuid: servicePriceUuid || '',
+                        lineItemOrder: Number(lineItemOrder) ?? index,
+                        paymentStatus: paymentStatus,
+                    }
+                });
+            let billPayload = {};
+
+            let response: FetchResponse<{ uuid: string, lineItems: Array<{ lineItemOrder: number; uuid: string }> }> | undefined;
+
+            if (currentDayBills && currentDayBills.length) {
+                const bill = currentDayBills[0];
+                const billUuid = bill?.uuid;
+                const initialLineItems = generateUpdateBillLineItems(bill, lineItems);
+                const lineItemsPayload = [...initialLineItems, ...billableItems];
+                billPayload = {
+                    lineItems: lineItemsPayload
+                }
+                response = await updatePatientBill(billUuid, billPayload);
+            } else {
+                billPayload = {
+                    lineItems: billableItems,
+                    cashPoint: cashPointUuid,
+                    patient: order?.patient?.uuid,
+                    status: 'PENDING',
+                    payments: []
+                };
+                response = await createPatientBill(billPayload);
+            }
+
+            const billUuidResp = response?.data?.uuid;
+            const lineItemUuid = response?.data?.lineItems?.find(v => v?.lineItemOrder === Number(lineItemOrder))?.uuid;
+
+            if (billUuidResp) {
+                const hiePayload = {
+                    bill_uuid: billUuidResp,
+                    order_no: order?.orderNumber,
+                    line_item_uuid: lineItemUuid
+                };
+
+                try {
+                    await createOrderBillInHie(hiePayload);
+                } catch (error) {
+                    await removePatientBill(billUuidResp);
+                    throw error;
+                }
+            } else {
+                throw new Error("Bill uuid not found!");
+            }
+
+            showSnackbar({
+                title: t('billSuccess', 'Bill created'),
+                subtitle: t('billSuccessMessage', "Patient's bill has been created successfully"),
+                kind: 'success',
+            });
+
+            mutated();
+            closeWorkspace();
+        } catch (error) {
+            showSnackbar({
+                title: t('error', 'Error'),
+                subtitle: error?.message || t('unknownError', 'An unknown error occurred'),
+                kind: 'error',
+            });
+        }
+    }
+
+    return (
+        <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+            <div className={styles.formContainer}>
+                <Stack gap={3}>
+                    <InlineNotification
+                        kind="info"
+                        title={`${order?.orderNumber} - ${order?.display}`}
+                        lowContrast
+                    />
+
+                    <ResponsiveWrapper>
+                        <FormGroup legendText="">
+                            <Column>
+                                <Controller
+                                    name="quantity"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <TextInput
+                                            {...field}
+                                            id="quantity"
+                                            labelText={t('quantity', 'Quantity *')}
+                                            placeholder={t('enterQuantity', 'Enter quantity')}
+                                            invalid={!!errors.quantity}
+                                            invalidText={errors.quantity?.message}
+                                        />
+                                    )}
+                                />
+                            </Column>
+                        </FormGroup>
+                    </ResponsiveWrapper>
+
+                    <ResponsiveWrapper>
+                        <Controller
+                            name="billableItem"
+                            control={control}
+                            render={({ field }) => (
+                                <>
+                                    <FormLabel className={styles.conceptLabel}>{t('billableItem', 'Billable item')}</FormLabel>
+                                    <Search
+                                        id="billableItemSearch"
+                                        labelText={t('billableItem', 'Billable item')}
+                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                                        onClear={() => {
+                                            setSearchTerm('');
+                                            field.onChange('');
+                                        }}
+                                        placeholder={t('searchBillableItem', 'Search billable item')}
+                                        ref={searchInputRef}
+                                        value={lineItems.find(v => v.uuid === selectedBillableItem)?.name || searchTerm}
+                                    />
+
+                                    {(() => {
+                                        if (!debouncedSearchTerm || selectedBillableItem) {
+                                            return null;
+                                        }
+                                        if (searchResults && searchResults.length) {
+
+                                            return (
+                                                <ul className={styles.conceptsList}>
+                                                    {searchResults?.map((item) => (
+                                                        <li
+                                                            className={styles.service}
+                                                            key={item?.uuid}
+                                                            onClick={() => {
+                                                                field.onChange(item?.uuid);
+                                                                setSearchTerm('');
+                                                            }}
+                                                            role="menuitem">
+                                                            {item?.name}
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            );
+                                        }
+                                        return (
+                                            <Layer>
+                                                <Tile className={styles.emptyResults}>
+                                                    <span>
+                                                        {t('noResultsFor', 'No results for {{searchTerm}}', { searchTerm: debouncedSearchTerm })}
+                                                    </span>
+                                                </Tile>
+                                            </Layer>
+                                        );
+                                    })()}
+                                </>
+                            )}
+                        />
+                    </ResponsiveWrapper>
+
+                    <Column>
+                        <Controller
+                            control={control}
+                            name="unitPrice"
+                            render={({ field }) => {
+                                const servicePrices = billableItem[0]?.servicePrices ?? [];
+                                const serviceUuid = billableItem[0]?.uuid ?? "";
+
+                                return (
+                                    <>
+                                        {billableItem && billableItem.length ?
+                                            (servicePrices.length > 0 ? (
+                                                <Select id="unitPrice" labelText={t('selectServicePrice', 'Select service price *')} invalid={!!errors.unitPrice}
+                                                    invalidText={errors.unitPrice?.message}
+                                                    onChange={(e) => {
+                                                        field.onChange(e.target.value);
+                                                    }}
+                                                    defaultValue={initialUnitPriceUuid ?? null}
+                                                >
+                                                    <SelectItem value="" text="Select service price" />
+                                                    {
+                                                        servicePrices.map((service) => {
+                                                            const value = serviceUuid + "#" + service?.uuid;
+                                                            const text = `${service?.name} - ${service?.price}`;
+                                                            return (
+                                                                <SelectItem value={value} text={text} />
+                                                            )
+                                                        })
+                                                    }
+                                                </Select>
+                                            ) : (
+                                                <InlineNotification
+                                                    kind="warning"
+                                                    title={t(
+                                                        'noServicesAvailable',
+                                                        'No service price has been configured for this order.',
+                                                    )}
+                                                    lowContrast
+                                                />
+                                            )) : null
+                                        }
+                                    </>
+                                );
+                            }}
+                        />
+                    </Column>
+                </Stack>
+            </div>
+
+            <ButtonSet className={classNames(styles.buttonSet, { [styles.tablet]: isTablet })}>
+                <Button kind="secondary" onClick={closeWorkspace}>
+                    {t('cancel', 'Cancel')}
+                </Button>
+                <Button kind="primary" type="submit" disabled={isSubmitting || !isDirty}>
+                    {isSubmitting ? (
+                        <InlineLoading description={t('submitting', 'Submitting...')} />
+                    ) : (
+                        t('saveAndClose', 'Save & close')
+                    )}
+                </Button>
+            </ButtonSet>
+        </Form>
+    )
+}
+
+export default CreateOrderBillForm;

package/src/billing/workspaces/create-order-bill-form-workspace/schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+const validationSchema = z.object({
+    unitPrice: z.string({ required_error: "Unit price is required" }),
+    quantity: z.number({ required_error: "Quantity is required" }),
+    billableItem: z.string().optional()
+});
+
+export { validationSchema };
+
+export type CreateOrderBillFormSchema = z.infer<typeof validationSchema>;

package/src/bookings/bookings.component.scss

@@ -0,0 +1,7 @@
+.bookingsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}

package/src/bookings/bookings.component.tsx

@@ -0,0 +1,31 @@
+import { Checkbox, Layer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import DailyBookings from './daily/daily-bookings.component';
+import styles from './bookings.component.scss';
+const Bookings: React.FC = () => {
+  return (
+    <>
+      <div className={styles.bookingsLayout}>
+        <div className={styles.bookingsHeader}>
+          <h4>Bookings</h4>
+        </div>
+        <div className={styles.bookingsContent}>
+          <Tabs>
+            <TabList contained>
+              <Tab>Daily</Tab>
+              <Tab>Monthly</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <DailyBookings />
+              </TabPanel>
+              <TabPanel></TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Bookings;

package/src/bookings/daily/daily-bookings.component.scss

@@ -0,0 +1,38 @@
+.bookingsLayout{
+    display: flex;
+    flex-direction: column;
+    padding: 15px 15px;
+    row-gap: 5px;
+}
+.bookingsHeader{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    width: 100%;
+}
+.bookingsFilters{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1px double lightgray;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-bottom: 10px;
+}
+.bookingsContent{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 15px;
+}
+.contentActions{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: flex-end;
+    column-gap: 5px;
+}