@digihmis/esm-administration-app 1.0.0

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/schemas/form-schemas.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod';
+
+const ServiceConceptSchema = z.object({
+  concept: z.object({
+    uuid: z.string(),
+    display: z.string(),
+  }),
+  conceptName: z.object({
+    uuid: z.string(),
+    display: z.string(),
+  }),
+  display: z.string(),
+});
+
+export const servicePriceSchema = z.object({
+  price: z.number().gt(0.01, 'Price must be greater than 0').min(0.01, 'Price must be at least 0.01'),
+  paymentMode: z.object({ uuid: z.string(), name: z.string() }),
+});
+
+export const billableFormSchema = z.object({
+  name: z.string().min(1, 'Service name is required'),
+  shortName: z
+    .string()
+    .refine((value) => value.length !== 1, { message: 'Short name must be at least 1 character long' }),
+  serviceType: z.object({ uuid: z.string(), display: z.string() }),
+  servicePrices: z.array(servicePriceSchema).min(1, 'At least one price is required'),
+  serviceStatus: z.enum(['ENABLED', 'DISABLED']),
+  concept: ServiceConceptSchema,
+  stockItem: z.string().nullable().optional(),
+});
+
+export type BillableFormSchema = z.infer<typeof billableFormSchema>;
+export type ServicePriceSchema = z.infer<typeof servicePriceSchema>;

package/src/billing-management/billing-charge-items/billing-charge-items.component.tsx

@@ -0,0 +1,222 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Layer,
+  Pagination,
+  Tile,
+  IconButton,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/react/icons';
+import { launchWorkspace, useLayoutType, ErrorState, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './billing-charge-items.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { useChargeItems } from './billing-charge-items.resource';
+
+const ChargeItemsTable = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+
+  const { chargeSummaryItems, isLoading, error } = useChargeItems();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const headers = [
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'status',
+      header: t('status', 'Status'),
+    },
+    {
+      key: 'type',
+      header: t('type', 'Type'),
+    },
+    {
+      key: 'price',
+      header: t('price', 'Price'),
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    if (!chargeSummaryItems || !Array.isArray(chargeSummaryItems)) {
+      return [];
+    }
+
+    return chargeSummaryItems.map((item) => ({
+      id: item.uuid,
+      name: item.name || '-',
+      status: item.serviceStatus === 'ENABLED' ? t('enabled', 'Enabled') : t('disabled', 'Disabled'),
+      type: item.serviceType?.display || t('stockItem', 'Stock Item'),
+      price:
+        item.servicePrices && item.servicePrices.length > 0
+          ? item.servicePrices.map((p) => `${p.name}: ${p.price}`).join(', ')
+          : '-',
+      chargeItem: item,
+    }));
+  }, [chargeSummaryItems, t]);
+
+  const paginatedRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * currentPageSize;
+    const endIndex = startIndex + currentPageSize;
+    return tableRows.slice(startIndex, endIndex);
+  }, [tableRows, currentPage, currentPageSize]);
+
+  const handleAddChargeService = () => {
+    launchWorkspace('billing-charge-service-workspace', {
+      workspaceTitle: t('addChargeService', 'Add Charge Service'),
+    });
+  };
+
+  const handleAddChargeItem = () => {
+    launchWorkspace('billing-charge-item-workspace', {
+      workspaceTitle: t('addChargeItem', 'Add Charge Item'),
+    });
+  };
+
+  const handleEdit = (service) => {
+    Boolean(service?.serviceType?.display)
+      ? launchWorkspace('billing-charge-service-workspace', {
+          initialValues: service,
+          workspaceTitle: t('editServiceChargeItem', 'Edit Service Charge Item'),
+        })
+      : launchWorkspace('billing-charge-item-workspace', {
+          initialValues: service,
+          workspaceTitle: t('editChargeItem', 'Edit Charge Item'),
+        });
+  };
+
+  const showDeleteChargeItemModal = (chargeItem) => {
+    const dispose = showModal('delete-billable-service-modal', {
+      closeModal: () => dispose(),
+      chargeableItem: chargeItem,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.section}>
+        <h3>{t('chargeItems', 'Charge Items')}</h3>
+        <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('chargeItems', 'Charge Items')} />;
+  }
+
+  return (
+    <div className={styles.section}>
+      <CardHeader title={t('chargeItems', 'Charge Items')}>
+        <div className={styles.headerActions}>
+          <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddChargeService}>
+            {t('addChargeService', 'Add Charge Service')}
+          </Button>
+          <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddChargeItem}>
+            {t('addChargeItem', 'Add Charge Item')}
+          </Button>
+        </div>
+      </CardHeader>
+      <Layer>
+        <DataTable rows={paginatedRows} headers={headers} isSortable size={responsiveSize} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()} aria-label={t('chargeItemsTable', 'Charge items table')}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                    <TableHeader>{t('actions', 'Actions')}</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    const chargeItem = paginatedRows[index]?.chargeItem;
+                    return (
+                      <TableRow key={row.id} {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                        <TableCell>
+                          <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <IconButton
+                              kind="ghost"
+                              size={responsiveSize}
+                              label={t('edit', 'Edit')}
+                              onClick={() => handleEdit(chargeItem)}>
+                              <Edit />
+                            </IconButton>
+                            <IconButton
+                              kind="danger--ghost"
+                              size={responsiveSize}
+                              label={t('delete', 'Delete')}
+                              onClick={() => showDeleteChargeItemModal(chargeItem)}>
+                              <TrashCan />
+                            </IconButton>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {tableRows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noChargeItemsFound', 'No charge items found')}</p>
+                      <p className={styles.emptyStateHelperText}>
+                        {t('checkFilters', 'Please check the filters above and try again')}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              {tableRows.length > 0 && (
+                <Pagination
+                  forwardText={t('nextPage', 'Next page')}
+                  backwardText={t('previousPage', 'Previous page')}
+                  page={currentPage}
+                  pageSize={currentPageSize}
+                  pageSizes={pageSizes}
+                  totalItems={tableRows.length}
+                  className={styles.pagination}
+                  onChange={({ pageSize, page }) => {
+                    if (pageSize !== currentPageSize) {
+                      setCurrentPageSize(pageSize);
+                      setCurrentPage(1);
+                    }
+                    if (page !== currentPage) {
+                      setCurrentPage(page);
+                    }
+                  }}
+                />
+              )}
+            </TableContainer>
+          )}
+        </DataTable>
+      </Layer>
+    </div>
+  );
+};
+
+export default ChargeItemsTable;

package/src/billing-management/billing-charge-items/billing-charge-items.resource.ts

@@ -0,0 +1,20 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type ChargeItemsResponse } from './type';
+
+export const useChargeItems = () => {
+  const url = `${restBaseUrl}/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,paymentMode,price),concept:(uuid,display),stockItem:(uuid,display))`;
+
+  const { data, isLoading, isValidating, error, mutate } = useSWR<FetchResponse<ChargeItemsResponse>>(
+    url,
+    openmrsFetch,
+  );
+
+  return {
+    chargeSummaryItems: data?.data?.results ?? [],
+    isLoading,
+    isValidating,
+    error,
+    mutate,
+  };
+};

package/src/billing-management/billing-charge-items/billing-charge-items.scss

@@ -0,0 +1,84 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+:global(.cds--tab-content) {
+  padding: 0 !important;
+  padding-top: var(--cds-layout-density-padding-inline-local) !important;
+}
+
+.adminPage {
+  //   padding: layout.$spacing-05;
+  background: var(--cds-field);
+}
+
+.section {
+  margin-bottom: layout.$spacing-07;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid var(--cds-border-subtle);
+
+  h3 {
+    margin: 0;
+    color: var(--cds-text-primary);
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 768px) {
+  .adminPage {
+    padding: layout.$spacing-03;
+  }
+
+  .sectionHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-03;
+
+    h3 {
+      font-size: 1.125rem;
+    }
+  }
+}
+
+.tileContainer {
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.singleLineDisplay {
+  white-space: nowrap;
+}
+
+.emptyStateHelperText {
+  @include type.type-style('helper-text-02');
+}

package/src/billing-management/billing-charge-items/type/index.ts

@@ -0,0 +1,88 @@
+import { OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface ChargeItems {
+  uuid: string;
+  name: string;
+  shortName: string;
+  serviceStatus: 'ENABLED' | 'DISABLED';
+  stockItem: OpenmrsResource;
+  serviceType: {
+    uuid: string;
+    display: string;
+  };
+  servicePrices: Array<{
+    uuid: string;
+    name: string;
+    price: number;
+  }>;
+  concept: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface ChargeItemsResponse {
+  results: Array<ChargeItems>;
+}
+
+export type ServiceConcept = {
+  concept: {
+    uuid: string;
+    display: string;
+  };
+  conceptName: {
+    uuid: string;
+    display: string;
+  };
+  display: string;
+};
+
+export type ServiceType = { uuid: string; display: string; id: number };
+
+export type ServiceTypesResponse = {
+  setMembers: Array<ServiceType>;
+};
+
+export type StockItemResponse = {
+  results: Array<{
+    uuid: string;
+    drugUuid: string;
+    drugName: string;
+    conceptUuid: string;
+    conceptName: string;
+    hasExpiration: boolean;
+    preferredVendorUuid: string;
+    preferredVendorName: string;
+    purchasePrice: number | null;
+    purchasePriceUoMUuid: string | null;
+    purchasePriceUoMName: string | null;
+    purchasePriceUoMFactor: number | null;
+    dispensingUnitName: string;
+    dispensingUnitUuid: string;
+    dispensingUnitPackagingUoMUuid: string;
+    dispensingUnitPackagingUoMName: string;
+    dispensingUnitPackagingUoMFactor: number;
+    defaultStockOperationsUoMUuid: string | null;
+    defaultStockOperationsUoMName: string | null;
+    defaultStockOperationsUoMFactor: number | null;
+    categoryUuid: string;
+    categoryName: string;
+    commonName: string;
+    acronym: string | null;
+    reorderLevel: number | null;
+    reorderLevelUoMUuid: string | null;
+    reorderLevelUoMName: string | null;
+    reorderLevelUoMFactor: number | null;
+    dateCreated: string;
+    creatorGivenName: string;
+    creatorFamilyName: string;
+    voided: boolean;
+    expiryNotice: number;
+    links: {
+      rel: string;
+      uri: string;
+      resourceAlias: string;
+    }[];
+    resourceVersion: string;
+  }>;
+};

package/src/billing-management/billing-charge-items/utils/index.ts

@@ -0,0 +1,96 @@
+import { BillableFormSchema, ServicePriceSchema } from '../billing-charge-items-workspace/schemas/form-schemas';
+
+export type BillableServicePayload = {
+  name: string;
+  shortName: string;
+  serviceType: number | string;
+  servicePrices: Array<{
+    paymentMode: string;
+    price: string | number;
+    name: string;
+  }>;
+  serviceStatus: string;
+  concept: string | number;
+  stockItem: string;
+  uuid?: string;
+};
+
+export const formatBillableServicePayloadForSubmission = (
+  formData: BillableFormSchema,
+  uuid?: string,
+): BillableServicePayload => {
+  const formPayload = {
+    name: formData.name,
+    shortName: formData.shortName,
+    serviceType: formData.serviceType.uuid,
+    servicePrices: formData.servicePrices.map((servicePrice) => ({
+      paymentMode: servicePrice.paymentMode.uuid,
+      price: servicePrice.price,
+      name: servicePrice.paymentMode.name,
+    })),
+    serviceStatus: formData.serviceStatus,
+    concept: formData.concept.concept.uuid,
+    stockItem: formData.stockItem || null,
+  };
+
+  return uuid ? Object.assign(formPayload, { uuid: uuid }) : formPayload;
+};
+
+export function mapInputToPayloadSchema(service): BillableFormSchema {
+  const servicePrices: Array<ServicePriceSchema> = service.servicePrices.map((price: any) => ({
+    price: price.price,
+    paymentMode: {
+      uuid: price.paymentMode?.uuid,
+      name: price.paymentMode?.name,
+    },
+  }));
+
+  const payload: BillableFormSchema = {
+    name: service.name,
+    shortName: service.shortName,
+    serviceType: {
+      uuid: service?.serviceType?.uuid,
+      display: service?.serviceType?.display,
+    },
+    servicePrices: servicePrices,
+    serviceStatus: service.serviceStatus,
+    concept: {
+      concept: {
+        uuid: service?.concept?.uuid,
+        display: service.concept?.display,
+      },
+      conceptName: {
+        uuid: service?.concept?.uuid,
+        display: service?.concept?.display,
+      },
+      display: service?.concept?.display,
+    },
+    stockItem: service?.stockItem?.uuid ?? null,
+  };
+
+  return payload;
+}
+
+export const formatStockItemToPayload = (stockItem: any): BillableFormSchema => {
+  return {
+    name: stockItem.commonName,
+    shortName: stockItem.commonName.length > 1 ? stockItem.commonName : `${stockItem.commonName} `,
+    serviceType: {
+      uuid: stockItem.serviceType?.uuid || '',
+      display: stockItem.serviceType?.display || '',
+    },
+    servicePrices: [],
+    concept: {
+      concept: {
+        uuid: stockItem.conceptUuid,
+        display: stockItem.conceptName,
+      },
+      conceptName: {
+        uuid: stockItem.conceptUuid,
+        display: stockItem.conceptName,
+      },
+      display: stockItem.conceptName,
+    },
+    stockItem: stockItem.uuid,
+  };
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+import styles from './billing-management.scss';
+import { ConfigObject } from '../config-schema';
+import { CustomPageHeader } from '../components/custom-page-header/custom-page-header.component';
+import { useTranslation } from 'react-i18next';
+import BillManagement from './billing-tabs/billing-tabs.component';
+
+const BillingManagementDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { billingIcon } = useConfig<ConfigObject>();
+
+  return (
+    <div className={styles.dashboardContainer}>
+      <CustomPageHeader subTitle={t('configureBilling', 'Configure billing')} iconSrc={billingIcon.src} />
+      <BillManagement />
+    </div>
+  );
+};
+
+export default BillingManagementDashboard;

package/src/billing-management/billing-payment-modes/billing-payment-modes-modal/billing-delete-payment-modes.modal.scss

@@ -0,0 +1,28 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+
+.modalHeaderLabel {
+  @include type.type-style('heading-compact-02');
+
+  & > div {
+    display: none;
+  }
+}
+.button_spinner {
+  padding: 0;
+  margin-right: layout.$spacing-03;
+}
+
+.loading_wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.contentContainer {
+  padding-left: layout.$spacing-05;
+}
+
+.contentValue {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-03;
+}

package/src/billing-management/billing-payment-modes/billing-payment-modes-modal/billing-delete-payment-modes.modal.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ModalBody, ModalFooter, Button, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import styles from './billing-delete-payment-modes.modal.scss';
+import { PaymentMethod } from '../type';
+import { deletePaymentMode, handleMutation } from '../billing-payment-modes-workspace/billing-payment-modes.resource';
+
+type DeletePaymentModeModalProps = {
+  closeModal: () => void;
+  paymentMode: PaymentMethod;
+};
+
+const DeletePaymentModeModal: React.FC<DeletePaymentModeModalProps> = ({ closeModal, paymentMode }) => {
+  const { t } = useTranslation();
+  const paymentModeName = paymentMode?.name || '';
+
+  const handleDelete = async () => {
+    try {
+      await deletePaymentMode(paymentMode.uuid);
+      showSnackbar({
+        title: t('paymentModeDeleted', 'Payment mode deleted'),
+        subtitle: t('paymentModeDeletedSubtitle', 'The payment mode has been deleted'),
+        kind: 'success',
+        isLowContrast: true,
+        timeoutInMs: 5000,
+        autoClose: true,
+      });
+      handleMutation(`${restBaseUrl}/cashier/paymentMode?v=full`);
+      closeModal();
+    } catch (error) {
+      showSnackbar({
+        title: t('paymentModeDeletedError', 'Error deleting payment mode'),
+        subtitle: t('paymentModeDeletedErrorSubtitle', 'An error occurred while deleting the payment mode'),
+        kind: 'error',
+        isLowContrast: true,
+        timeoutInMs: 5000,
+        autoClose: true,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader className={styles.modalHeaderLabel} closeModal={closeModal}>
+        {t('deletePaymentMode', 'Delete Payment Mode')}
+      </ModalHeader>
+      <ModalBody className={styles.modalHeaderHeading}>
+        {t(
+          'deletePaymentModeDescription',
+          `Are you sure you want to delete this {{paymentModeName}} payment mode? Proceed cautiously.`,
+          { paymentModeName },
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete}>
+          {t('delete', 'Delete')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeletePaymentModeModal;