@openmrs/esm-billing-app 1.0.2-pre.88 → 1.0.2-pre.880

package/src/billable-services/billable-services-home.component.tsx

@@ -1,56 +1,32 @@
 import React from 'react';
+import classNames from 'classnames';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react';
-import { Wallet, Money, Settings } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { UserHasAccess, navigate } from '@openmrs/esm-framework';
+import { useLeftNav, navigate, WorkspaceContainer, useLayoutType, isDesktop } from '@openmrs/esm-framework';
 import AddBillableService from './create-edit/add-billable-service.component';
 import BillWaiver from './bill-waiver/bill-waiver.component';
 import BillableServicesDashboard from './dashboard/dashboard.component';
 import BillingHeader from '../billing-header/billing-header.component';
 import CashPointConfiguration from './cash-point/cash-point-configuration.component';
-import PaymentModesConfig from './payyment-modes/payment-modes-config.component';
+import PaymentModesConfig from './payment-modes/payment-modes-config.component';
 import styles from './billable-services.scss';
 
 const BillableServiceHome: React.FC = () => {
   const { t } = useTranslation();
+  const layout = useLayoutType();
   const basePath = `${window.spaBase}/billable-services`;
 
-  const handleNavigation = (path: string) => {
-    navigate({ to: `${basePath}/${path}` });
-  };
+  useLeftNav({ name: 'billable-services-left-panel-slot', basePath });
 
   const handleCloseAddService = () => {
     navigate({ to: `${basePath}` });
   };
 
   return (
-    <BrowserRouter basename={`${window.spaBase}/billable-services`}>
-      <main className={styles.mainSection}>
-        <section>
-          <SideNav>
-            <SideNavItems>
-              <SideNavLink onClick={() => handleNavigation('')} renderIcon={Wallet} isActive>
-                {t('billableServices', 'Billable Services')}
-              </SideNavLink>
-              <UserHasAccess privilege="coreapps.systemAdministration">
-                <SideNavLink onClick={() => handleNavigation('waive-bill')} renderIcon={Money}>
-                  {t('billWaiver', 'Bill waiver')}
-                </SideNavLink>
-                <SideNavMenu title={t('billingSettings', 'Billing Settings')} renderIcon={Settings}>
-                  <SideNavMenuItem onClick={() => handleNavigation('cash-point-config')}>
-                    {t('cashPointConfig', 'Cash Point Config')}
-                  </SideNavMenuItem>
-                  <SideNavMenuItem onClick={() => handleNavigation('payment-modes-config')}>
-                    {t('paymentModesConfig', 'Payment Modes Config')}
-                  </SideNavMenuItem>
-                </SideNavMenu>
-              </UserHasAccess>
-            </SideNavItems>
-          </SideNav>
-        </section>
-        <section>
-          <BillingHeader title={t('billServicesManagement', 'Bill services management')} />
+    <BrowserRouter basename={basePath}>
+      <div className={styles.pageWrapper}>
+        <main className={classNames(styles.pageContent, { [styles.hasLeftNav]: isDesktop(layout) })}>
+          <BillingHeader title={t('billableServicesManagement', 'Billable services management')} />
           <Routes>
             <Route path="/" element={<BillableServicesDashboard />} />
             <Route path="/add-service" element={<AddBillableService onClose={handleCloseAddService} />} />
@@ -58,8 +34,9 @@ const BillableServiceHome: React.FC = () => {
             <Route path="/cash-point-config" element={<CashPointConfiguration />} />
             <Route path="/payment-modes-config" element={<PaymentModesConfig />} />
           </Routes>
-        </section>
-      </main>
+        </main>
+      </div>
+      <WorkspaceContainer contextKey="billable-services" />
     </BrowserRouter>
   );
 };

package/src/billable-services/billable-services-left-panel-link.component.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { SideNavLink } from '@carbon/react';
+import { navigate, UserHasAccess } from '@openmrs/esm-framework';
+
+export interface BillableServicesLinkConfig {
+  name: string;
+  title: string;
+  path: string;
+  icon?: React.ComponentType;
+  privilege?: string;
+}
+
+function BillableServicesLinkExtension({ config }: { config: BillableServicesLinkConfig }) {
+  const { title, path, icon: Icon, privilege } = config;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/billable-services`;
+
+  const isActive = useMemo(() => {
+    const currentPath = location.pathname.replace(spaBasePath, '');
+    if (path === '' || path === '/') {
+      return currentPath === '' || currentPath === '/';
+    }
+    return currentPath.startsWith(`/${path}`);
+  }, [location.pathname, path, spaBasePath]);
+
+  const handleNavigation = () => {
+    navigate({ to: `${spaBasePath}/${path}` });
+  };
+
+  const link = (
+    <SideNavLink onClick={handleNavigation} renderIcon={Icon} isActive={isActive}>
+      {title}
+    </SideNavLink>
+  );
+
+  if (privilege) {
+    return <UserHasAccess privilege={privilege}>{link}</UserHasAccess>;
+  }
+
+  return link;
+}
+
+export const createBillableServicesLeftPanelLink = (config: BillableServicesLinkConfig) => () => (
+  <BrowserRouter>
+    <BillableServicesLinkExtension config={config} />
+  </BrowserRouter>
+);

package/src/billable-services/billable-services-left-panel-menu.component.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { SideNavMenu, SideNavMenuItem } from '@carbon/react';
+import { navigate, UserHasAccess } from '@openmrs/esm-framework';
+
+export interface BillableServicesMenuConfig {
+  title: string;
+  icon?: React.ComponentType;
+  privilege?: string;
+  items: Array<{
+    name: string;
+    title: string;
+    path: string;
+  }>;
+}
+
+function BillableServicesMenuExtension({ config }: { config: BillableServicesMenuConfig }) {
+  const { title, icon: Icon, items, privilege } = config;
+  const spaBasePath = `${window.spaBase}/billable-services`;
+
+  const handleNavigation = (path: string) => {
+    navigate({ to: `${spaBasePath}/${path}` });
+  };
+
+  const menu = (
+    <SideNavMenu title={title} renderIcon={Icon}>
+      {items.map((item) => (
+        <SideNavMenuItem key={item.name} onClick={() => handleNavigation(item.path)}>
+          {item.title}
+        </SideNavMenuItem>
+      ))}
+    </SideNavMenu>
+  );
+
+  if (privilege) {
+    return <UserHasAccess privilege={privilege}>{menu}</UserHasAccess>;
+  }
+
+  return menu;
+}
+
+export const createBillableServicesLeftPanelMenu = (config: BillableServicesMenuConfig) => () => (
+  <BrowserRouter>
+    <BillableServicesMenuExtension config={config} />
+  </BrowserRouter>
+);

package/src/billable-services/billable-services.component.tsx

@@ -6,7 +6,6 @@ import {
   DataTable,
   InlineLoading,
   Layer,
-  Modal,
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
@@ -21,65 +20,75 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigate } from '@openmrs/esm-framework';
+import {
+  ErrorState,
+  getCoreTranslation,
+  isDesktop,
+  navigate,
+  showModal,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  type LayoutType,
+} from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { type BillableService } from '../types/index';
 import { useBillableServices } from './billable-service.resource';
-import AddBillableService from './create-edit/add-billable-service.component';
+import type { BillingConfig } from '../config-schema';
 import styles from './billable-services.scss';
 
+interface FilterableTableHeaderProps {
+  layout: LayoutType;
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isValidating: boolean;
+  responsiveSize: 'sm' | 'md' | 'lg';
+  t: (key: string, fallback: string) => string;
+}
+
 const BillableServices = () => {
   const { t } = useTranslation();
   const { billableServices, isLoading, isValidating, error, mutate } = useBillableServices();
   const layout = useLayoutType();
-  const config = useConfig();
+  const { pageSize: configuredPageSize } = useConfig<BillingConfig>();
   const [searchString, setSearchString] = useState('');
   const responsiveSize = isDesktop(layout) ? 'lg' : 'sm';
-  const pageSizes = config?.billableServices?.pageSizes ?? [10, 20, 30, 40, 50];
-  const [pageSize, setPageSize] = useState(config?.billableServices?.pageSize ?? 10);
-
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [editingService, setEditingService] = useState(null);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(configuredPageSize ?? 10);
 
   const headerData = [
     {
-      header: t('serviceName', 'Service Name'),
+      header: t('serviceName', 'Service name'),
       key: 'serviceName',
     },
     {
-      header: t('shortName', 'Short Name'),
+      header: t('shortName', 'Short name'),
       key: 'shortName',
     },
     {
-      header: t('serviceType', 'Service Type'),
+      header: t('serviceType', 'Service type'),
       key: 'serviceType',
     },
     {
-      header: t('status', 'Service Status'),
+      header: t('serviceStatus', 'Service status'),
       key: 'status',
     },
     {
       header: t('prices', 'Prices'),
       key: 'prices',
     },
-    {
-      header: t('actions', 'Actions'),
-      key: 'actions',
-    },
   ];
 
   const launchBillableServiceForm = useCallback(() => {
     navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
-    setEditingService(null);
-    setShowOverlay(true);
   }, []);
 
   const searchResults: BillableService[] = useMemo(() => {
     const flatBillableServices = Array.isArray(billableServices) ? billableServices.flat() : billableServices;
 
     if (flatBillableServices !== undefined && flatBillableServices.length > 0) {
-      if (searchString && searchString.trim() !== '') {
-        const search = searchString.toLowerCase();
+      const trimmedSearch = searchString.trim();
+      if (trimmedSearch) {
+        const search = trimmedSearch.toLowerCase();
         return flatBillableServices.filter((service: BillableService) =>
           Object.entries(service).some(([header, value]) => {
             return header === 'uuid' ? false : `${value}`.toLowerCase().includes(search);
@@ -94,31 +103,16 @@ const BillableServices = () => {
   const rowData = [];
 
   if (results) {
-    results.forEach((service, index) => {
+    results.forEach((service) => {
       const s = {
-        id: `${index}`,
+        id: service.uuid,
         uuid: service.uuid,
         serviceName: service.name,
         shortName: service.shortName,
         serviceType: service?.serviceType?.display,
         status: service.serviceStatus,
-        prices: '--',
-        actions: (
-          <TableCell>
-            <OverflowMenu size="sm" flipped>
-              <OverflowMenuItem
-                itemText={t('editBillableService', 'Edit Billable Service')}
-                onClick={() => handleEditService(service)}
-              />
-            </OverflowMenu>
-          </TableCell>
-        ),
+        prices: service.servicePrices.map((price) => `${price.name} (${price.price})`).join(', ') || '--',
       };
-      let cost = '';
-      service.servicePrices.forEach((price) => {
-        cost += `${price.name} (${price.price}) `;
-      });
-      s.prices = cost;
       rowData.push(s);
     });
   }
@@ -130,132 +124,138 @@ const BillableServices = () => {
     },
     [goTo, setSearchString],
   );
-  const handleEditService = useCallback((service) => {
-    setEditingService(service);
-    setShowOverlay(true);
-  }, []);
 
-  const closeModal = useCallback(() => {
-    setShowOverlay(false);
-    setEditingService(null);
-  }, []);
+  const handleEditService = useCallback(
+    (service: BillableService) => {
+      const dispose = showModal('edit-billable-service-modal', {
+        serviceToEdit: service,
+        onServiceUpdated: mutate,
+        closeModal: () => dispose(),
+      });
+    },
+    [mutate],
+  );
 
   if (isLoading) {
-    <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={getCoreTranslation('loading')}
+        description={t('loading', 'Loading data') + '...'}
+      />
+    );
   }
+
   if (error) {
-    <ErrorState headerTitle={t('billableService', 'Billable Service')} error={error} />;
+    return <ErrorState headerTitle={t('billableService', 'Billable service')} error={error} />;
   }
+
   if (billableServices.length === 0) {
-    <EmptyState
-      displayText={t('billableService', 'Billable Service')}
-      headerTitle={t('billableService', 'Billable Service')}
-      launchForm={launchBillableServiceForm}
-    />;
+    return (
+      <EmptyState
+        displayText={t('billableServices__lower', 'billable services')}
+        headerTitle={t('billableService', 'Billable service')}
+        launchForm={launchBillableServiceForm}
+      />
+    );
   }
 
   return (
-    <>
-      {billableServices?.length > 0 ? (
-        <div className={styles.serviceContainer}>
-          <FilterableTableHeader
-            handleSearch={handleSearch}
-            isValidating={isValidating}
-            layout={layout}
-            responsiveSize={responsiveSize}
-            t={t}
-          />
-          <DataTable
-            isSortable
-            rows={rowData}
-            headers={headerData}
-            size={responsiveSize}
-            useZebraStyles={rowData?.length > 1 ? true : false}>
-            {({ rows, headers, getRowProps, getTableProps }) => (
-              <TableContainer>
-                <Table {...getTableProps()} aria-label="service list">
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader key={header.key}>{header.header}</TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        {...getRowProps({
-                          row,
-                        })}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
-                        ))}
-                      </TableRow>
+    <div className={styles.serviceContainer}>
+      <FilterableTableHeader
+        handleSearch={handleSearch}
+        isValidating={isValidating}
+        layout={layout}
+        responsiveSize={responsiveSize}
+        t={t}
+      />
+      <DataTable
+        isSortable
+        rows={rowData}
+        headers={headerData}
+        overflowMenuOnHover={isDesktop(layout)}
+        size={responsiveSize}
+        useZebraStyles={rowData?.length > 1}>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label={t('serviceList', 'Service list')}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                      })}
+                      key={header.key}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader aria-label={getCoreTranslation('actions')} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
                     ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </DataTable>
-          {searchResults?.length === 0 && (
-            <div className={styles.filterEmptyState}>
-              <Layer level={0}>
-                <Tile className={styles.filterEmptyStateTile}>
-                  <p className={styles.filterEmptyStateContent}>
-                    {t('noMatchingServicesToDisplay', 'No matching services to display')}
-                  </p>
-                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-                </Tile>
-              </Layer>
-            </div>
-          )}
-          {paginated && (
-            <Pagination
-              forwardText="Next page"
-              backwardText="Previous page"
-              page={currentPage}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              totalItems={searchResults?.length}
-              className={styles.pagination}
-              size={responsiveSize}
-              onChange={({ pageSize: newPageSize, page: newPage }) => {
-                if (newPageSize !== pageSize) {
-                  setPageSize(newPageSize);
-                }
-                if (newPage !== currentPage) {
-                  goTo(newPage);
-                }
-              }}
-            />
-          )}
+                    <TableCell className="cds--table-column-menu">
+                      <OverflowMenu size="lg" flipped>
+                        <OverflowMenuItem
+                          className={styles.menuItem}
+                          itemText={t('editBillableService', 'Edit billable service')}
+                          onClick={() => handleEditService(results.find((service) => service.uuid === row.id))}
+                        />
+                      </OverflowMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {searchResults?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer level={0}>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>
+                {t('noMatchingServicesToDisplay', 'No matching services to display')}
+              </p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
         </div>
-      ) : (
-        <EmptyState
-          launchForm={launchBillableServiceForm}
-          displayText={t('noServicesToDisplay', 'There are no services to display')}
-          headerTitle={t('billableService', 'Billable service')}
-        />
       )}
-      {showOverlay && (
-        <Modal
-          open={showOverlay}
-          modalHeading={t('billableService', 'Billable Service')}
-          primaryButtonText={null}
-          secondaryButtonText={t('cancel', 'Cancel')}
-          onRequestClose={closeModal}
-          onSecondarySubmit={closeModal}
-          size="lg"
-          passiveModal={true}>
-          <AddBillableService editingService={editingService} onClose={closeModal} />
-        </Modal>
+      {paginated && (
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={searchResults?.length}
+          className={styles.pagination}
+          size={responsiveSize}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
       )}
-    </>
+    </div>
   );
 };
 
-function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
+function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }: FilterableTableHeaderProps) {
   return (
     <>
       <div className={styles.headerContainer}>
@@ -291,4 +291,5 @@ function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveS
     </>
   );
 }
+
 export default BillableServices;

package/src/billable-services/billable-services.scss

@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
@@ -217,3 +218,31 @@
   grid-template-columns: 16rem 1fr;
 }
 
+.menuItem {
+  max-width: none;
+}
+
+.pageWrapper {
+  display: flex;
+}
+
+.pageContent {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 0;
+  // Full vertical height minus the primary navigation menu height
+  height: calc(100vh - layout.$spacing-09);
+  // Ensure the width is fixed and does not expand based on children
+  width: calc(100% - 16rem);
+  background-color: colors.$gray-10;
+
+  & a {
+    width: 100%;
+  }
+
+  &.hasLeftNav {
+    // Make space for the left nav menu
+    margin-inline-start: 16rem;
+  }
+}