@digihmis/esm-administration-app 1.0.0 → 1.0.2

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

@@ -40,16 +40,16 @@ const ChargeItemsTable = () => {
       header: t('name', 'Name'),
     },
     {
-      key: 'status',
-      header: t('status', 'Status'),
+      key: 'serviceType',
+      header: t('serviceType', 'Service type'),
     },
     {
-      key: 'type',
-      header: t('type', 'Type'),
+      key: 'prices',
+      header: t('prices', 'Prices'),
     },
     {
-      key: 'price',
-      header: t('price', 'Price'),
+      key: 'status',
+      header: t('status', 'Status'),
     },
   ];
 
@@ -58,17 +58,22 @@ const ChargeItemsTable = () => {
       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,
-    }));
+    const formatMode = (mode: string) =>
+      mode ? mode.charAt(0) + mode.slice(1).toLowerCase().replace(/_/g, ' ') : mode;
+
+    return chargeSummaryItems.map((item) => {
+      const perMode = item.prices ?? [];
+      return {
+        id: item.uuid,
+        name: item.name || '-',
+        serviceType: item.serviceType?.display || '—',
+        prices: perMode.length
+          ? perMode.map((p) => `${formatMode(p.paymentMode)}: ${p.price}`).join(', ')
+          : (item.price ?? '-'),
+        status: item.retired ? t('retired', 'Retired') : t('active', 'Active'),
+        chargeItem: item,
+      };
+    });
   }, [chargeSummaryItems, t]);
 
   const paginatedRows = useMemo(() => {
@@ -83,22 +88,11 @@ const ChargeItemsTable = () => {
     });
   };
 
-  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'),
-        });
+    launchWorkspace('billing-charge-service-workspace', {
+      initialValues: service,
+      workspaceTitle: t('editServiceChargeItem', 'Edit Service Charge Item'),
+    });
   };
 
   const showDeleteChargeItemModal = (chargeItem) => {
@@ -128,9 +122,6 @@ const ChargeItemsTable = () => {
           <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>

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

@@ -3,7 +3,7 @@ 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 url = `${restBaseUrl}/digihmisbilling/billableitem`;
 
   const { data, isLoading, isValidating, error, mutate } = useSWR<FetchResponse<ChargeItemsResponse>>(
     url,

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

@@ -3,22 +3,22 @@ import { OpenmrsResource } from '@openmrs/esm-framework';
 export interface ChargeItems {
   uuid: string;
   name: string;
-  shortName: string;
-  serviceStatus: 'ENABLED' | 'DISABLED';
-  stockItem: OpenmrsResource;
-  serviceType: {
+  price: number | string;
+  description?: string;
+  retired?: boolean;
+  concept: {
     uuid: string;
     display: string;
   };
-  servicePrices: Array<{
-    uuid: string;
-    name: string;
-    price: number;
-  }>;
-  concept: {
+  serviceType?: {
     uuid: string;
     display: string;
   };
+  prices?: Array<{
+    uuid?: string;
+    paymentMode: string;
+    price: number | string;
+  }>;
 }
 
 export interface ChargeItemsResponse {

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

@@ -1,96 +1,54 @@
-import { BillableFormSchema, ServicePriceSchema } from '../billing-charge-items-workspace/schemas/form-schemas';
+import { BillableFormSchema } 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;
+  concept?: string;
+  serviceType?: string;
+  price: string | number;
+  description?: string;
   uuid?: string;
 };
 
+/**
+ * Map the form to the billable-item create/update payload. Pricing is per payment mode, but the
+ * module still stores a fallback default price, so the first configured mode's price is used for it;
+ * the per-mode prices are then synced separately as overrides.
+ */
 export const formatBillableServicePayloadForSubmission = (
   formData: BillableFormSchema,
   uuid?: string,
 ): BillableServicePayload => {
-  const formPayload = {
+  const prices = formData.servicePrices ?? [];
+  const fallbackPrice = prices.length ? Number(prices[0].price ?? 0) : 0;
+  const payload: BillableServicePayload = {
     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,
+    concept: formData.concept?.concept?.uuid,
+    // Empty string clears the service type on update; a uuid sets it.
+    serviceType: formData.serviceType?.uuid ?? '',
+    price: fallbackPrice,
+    description: formData.description,
   };
-
-  return uuid ? Object.assign(formPayload, { uuid: uuid }) : formPayload;
+  return uuid ? { ...payload, uuid } : payload;
 };
 
+/** Map an existing billable item (from the list) back onto the form for editing. */
 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 servicePrices = (service?.prices ?? []).map((override: { paymentMode?: string; price?: number | string }) => ({
+    paymentMode: { uuid: override?.paymentMode ?? '', name: override?.paymentMode ?? '' },
+    price: Number(override?.price ?? 0),
   }));
-
-  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: [],
+    name: service?.name ?? '',
+    description: service?.description ?? '',
     concept: {
       concept: {
-        uuid: stockItem.conceptUuid,
-        display: stockItem.conceptName,
-      },
-      conceptName: {
-        uuid: stockItem.conceptUuid,
-        display: stockItem.conceptName,
+        uuid: service?.concept?.uuid ?? '',
+        display: service?.concept?.display ?? '',
       },
-      display: stockItem.conceptName,
     },
-    stockItem: stockItem.uuid,
+    serviceType: service?.serviceType
+      ? { uuid: service.serviceType.uuid, display: service.serviceType.display }
+      : null,
+    servicePrices,
   };
-};
+}

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

@@ -1,6 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import {
-  Button,
   DataTable,
   DataTableSkeleton,
   Table,
@@ -10,88 +9,35 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableExpandHeader,
-  TableExpandRow,
-  TableExpandedRow,
   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 { useLayoutType, ErrorState } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import startCase from 'lodash-es/startCase';
 import styles from './billing-payment-modes.scss';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
-import { PaymentMethod } from './type';
 import { usePaymentModes } from './billing-payment-modes.resource';
 
+/**
+ * DigiHMIS payment modes are a fixed set (the billing module's PaymentMode enum), so this tab lists
+ * them read-only -- there is nothing to add, edit or delete.
+ */
 const PaymentModeTable = () => {
   const { t } = useTranslation();
-  const layout = useLayoutType();
-  const isTablet = layout === 'tablet';
+  const isTablet = useLayoutType() === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
 
   const { paymentModes, isLoading, error } = usePaymentModes(false);
 
-  // Pagination state
-  const [currentPage, setCurrentPage] = useState(1);
-  const [currentPageSize, setCurrentPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
-
   const headers = [
-    {
-      key: 'dateCreated',
-      header: t('dateCreated', 'Date Created'),
-    },
-    {
-      key: 'name',
-      header: t('name', 'Name'),
-    },
-    {
-      key: 'description',
-      header: t('description', 'Description'),
-    },
-    {
-      key: 'retired',
-      header: t('retired', 'Retired'),
-    },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'description', header: t('code', 'Code') },
   ];
 
-  // Transform payment modes to table rows
-  const tableRows = useMemo(() => {
-    if (!paymentModes) {
-      return [];
-    }
-
-    return paymentModes.map((mode) => ({
-      id: mode.uuid,
-      dateCreated: new Date(mode.auditInfo.dateCreated).toLocaleDateString(),
-      name: mode.name,
-      description: mode.description || '-',
-      retired: mode.retired ? t('yes', 'Yes') : t('no', 'No'),
-      paymentMode: mode, // Store full object for expandable row
-    }));
-  }, [paymentModes, t]);
-
-  // Paginated rows
-  const paginatedRows = useMemo(() => {
-    const startIndex = (currentPage - 1) * currentPageSize;
-    const endIndex = startIndex + currentPageSize;
-    return tableRows.slice(startIndex, endIndex);
-  }, [tableRows, currentPage, currentPageSize]);
-
-  const handleAddPaymentMode = () => {
-    launchWorkspace('payment-mode-workspace');
-  };
-
-  const showDeletePaymentModeModal = (paymentMode: PaymentMethod) => {
-    const dispose = showModal('delete-payment-mode-modal', {
-      closeModal: () => dispose(),
-      paymentMode,
-    });
-  };
+  const rows = useMemo(
+    () => (paymentModes ?? []).map((mode) => ({ id: mode.uuid, name: mode.name, description: mode.description || '-' })),
+    [paymentModes],
+  );
 
   if (isLoading) {
     return (
@@ -109,102 +55,41 @@ const PaymentModeTable = () => {
   return (
     <div className={styles.section}>
       <CardHeader title={t('paymentModes', 'Payment Modes')}>
-        <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddPaymentMode}>
-          {t('addPaymentMode', 'Add Payment Mode')}
-        </Button>
+        <span>{t('builtInPaymentModes', 'Built-in payment modes')}</span>
       </CardHeader>
       <Layer>
-        <DataTable rows={paginatedRows} headers={headers} isSortable size={responsiveSize} useZebraStyles>
-          {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getExpandedRowProps }) => (
+        <DataTable rows={rows} headers={headers} isSortable size={responsiveSize} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
             <TableContainer>
               <Table {...getTableProps()} aria-label={t('paymentModesTable', 'Payment modes table')}>
                 <TableHead>
                   <TableRow>
-                    <TableExpandHeader />
                     {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 paymentMode = paginatedRows[index]?.paymentMode;
-                    return (
-                      <React.Fragment key={row.id}>
-                        <TableExpandRow {...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={() =>
-                                  launchWorkspace('payment-mode-workspace', {
-                                    workspaceTitle: t('editPaymentMode', 'Edit Payment Mode'),
-                                    initialPaymentMode: paymentMode,
-                                  })
-                                }>
-                                <Edit />
-                              </IconButton>
-                              <IconButton
-                                kind="danger--ghost"
-                                size={responsiveSize}
-                                label={t('delete', 'Delete')}
-                                onClick={() => showDeletePaymentModeModal(paymentMode)}>
-                                <TrashCan />
-                              </IconButton>
-                            </div>
-                          </TableCell>
-                        </TableExpandRow>
-                        <TableExpandedRow
-                          colSpan={headers.length + 2}
-                          className="demo-expanded-td"
-                          {...getExpandedRowProps({ row })}>
-                          {paymentMode && <PaymentModeAttributes paymentMode={paymentMode} />}
-                        </TableExpandedRow>
-                      </React.Fragment>
-                    );
-                  })}
+                  {rows.map((row) => (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
                 </TableBody>
               </Table>
-              {tableRows.length === 0 ? (
+              {rows.length === 0 ? (
                 <div className={styles.tileContainer}>
                   <Tile className={styles.tile}>
                     <div className={styles.tileContent}>
                       <p className={styles.content}>{t('noPaymentModesFound', 'No payment modes 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>
@@ -213,31 +98,4 @@ const PaymentModeTable = () => {
   );
 };
 
-const PaymentModeAttributes: React.FC<{ paymentMode: PaymentMethod }> = ({ paymentMode }) => {
-  const { t } = useTranslation();
-  const { attributeTypes } = paymentMode;
-
-  return (
-    <div className={styles.attributeContainer}>
-      {attributeTypes.map((attributeType, index) =>
-        Object.entries(attributeType).map(([key, value]) => {
-          if (key === 'uuid') {
-            return null;
-          }
-          return <AttributeCard key={`${index}-${key}`} label={key} value={JSON.stringify(value)} />;
-        }),
-      )}
-    </div>
-  );
-};
-
-const AttributeCard: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className={styles.attributeCard}>
-      <div className={styles.attributeLabel}>{startCase(label).replace(/\s+/g, ' ')}</div>
-      <div className={styles.attributeValue}>{value.replace(/['"]/g, '')}</div>
-    </div>
-  );
-};
-
 export default PaymentModeTable;

package/src/billing-management/billing-payment-modes/billing-payment-modes.resource.ts

@@ -1,21 +1,31 @@
-import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
-import { PaymentMethod } from './type';
-import { ConfigObject } from '../../config-schema';
 
+export interface PaymentModeOption {
+  uuid: string;
+  name: string;
+  description?: string;
+}
+
+/**
+ * The payment modes are a fixed enum in the DigiHMIS billing module, served read-only at
+ * /digihmisbilling/paymentmode. The `uuid` carries the enum name (what a visit attribute / payment
+ * stores) and `name` its label.
+ */
 export const usePaymentModes = (excludeWaiver: boolean = true) => {
-  const { excludedPaymentMode } = useConfig<ConfigObject>();
-  const url = `${restBaseUrl}/cashier/paymentMode?v=full`;
-  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<PaymentMethod> } }>(url, openmrsFetch, {
-    errorRetryCount: 2,
-  });
-  const allowedPaymentModes =
-    excludedPaymentMode?.length > 0
-      ? (data?.data?.results.filter((mode) => !excludedPaymentMode.some((excluded) => excluded.uuid === mode.uuid)) ??
-        [])
-      : (data?.data?.results ?? []);
+  const url = `${restBaseUrl}/digihmisbilling/paymentmode`;
+  const { data, isLoading, error, mutate } = useSWR<{
+    data: { results: Array<{ value: string; uuid: string; display: string }> };
+  }>(url, openmrsFetch);
+
+  const modes: Array<PaymentModeOption> = (data?.data?.results ?? []).map((mode) => ({
+    uuid: mode.uuid ?? mode.value,
+    name: mode.display,
+    description: mode.value,
+  }));
+
   return {
-    paymentModes: excludeWaiver ? allowedPaymentModes : data?.data?.results,
+    paymentModes: excludeWaiver ? modes.filter((mode) => mode.uuid !== 'WAIVER') : modes,
     isLoading,
     mutate,
     error,

package/src/billing-management/billing-payment-points/billing-payment-point-modal/billing-delete-payment-point.modal.tsx

@@ -28,7 +28,7 @@ const DeletePaymentPointModal: React.FC<DeletePaymentPointModalProps> = ({ close
         timeoutInMs: 5000,
         autoClose: true,
       });
-      handleMutation(`${restBaseUrl}/cashier/cashPoint?v=full`);
+      handleMutation(`${restBaseUrl}/digihmisbilling/paymentpoint`);
       closeModal();
     } catch (error) {
       showSnackbar({

package/src/billing-management/billing-payment-points/billing-payment-point.resource.ts

@@ -3,7 +3,7 @@ import { PaymentPoint } from './type';
 import useSWR from 'swr';
 
 export const usePaymentPoints = () => {
-  const url = `${restBaseUrl}/cashier/cashPoint?v=full`;
+  const url = `${restBaseUrl}/digihmisbilling/paymentpoint`;
 
   const { data, isLoading, error, mutate } = useSWR<FetchResponse<{ results: Array<PaymentPoint> }>>(url, openmrsFetch);
 

package/src/billing-management/billing-payment-points/billing-payment-point.scss

@@ -0,0 +1,47 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.section {
+  margin-bottom: layout.$spacing-07;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.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;
+}
+
+.emptyStateHelperText {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}