Various UI tweaks (#74)

packages/esm-billing-app/src/billing-dashboard/billing-dashboard.component.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BillingHeader from '../billing-header/billing-header.component';
 import MetricsCards from '../metrics-cards/metrics-cards.component';
-import styles from './billing-dashboard.scss';
 import BillsTable from '../bills-table/bills-table.component';
+import styles from './billing-dashboard.scss';
 
 export function BillingDashboard() {
   const { t } = useTranslation();
 
   return (
-    <>
+    <main className={styles.container}>
       <BillingHeader title={t('home', 'Home')} />
       <MetricsCards />
-      <main className={styles.container}>
+      <main className={styles.billsTableContainer}>
         <BillsTable />
       </main>
-    </>
+    </main>
   );
 }

packages/esm-billing-app/src/billing-dashboard/billing-dashboard.scss

@@ -3,6 +3,10 @@
 @use '@carbon/type';
 
 .container {
+  height: calc(100vh - 3rem);
+}
+
+.billsTableContainer {
   margin: 2rem 1rem;
 }
 

packages/esm-billing-app/src/bills-table/bills-table.component.tsx

@@ -117,6 +117,7 @@ const BillsTable = () => {
         <FilterableTableHeader
           handleSearch={handleSearch}
           isValidating={isValidating}
+          layout={layout}
           responsiveSize={responsiveSize}
           t={t}
         />
@@ -148,6 +149,7 @@ const BillsTable = () => {
         <FilterableTableHeader
           handleSearch={handleSearch}
           isValidating={isValidating}
+          layout={layout}
           responsiveSize={responsiveSize}
           t={t}
         />
@@ -159,7 +161,7 @@ const BillsTable = () => {
           useZebraStyles={rowData?.length > 1 ? true : false}>
           {({ rows, headers, getRowProps, getTableProps }) => (
             <TableContainer>
-              <Table {...getTableProps()} aria-label="sample table">
+              <Table {...getTableProps()} aria-label="bill list">
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
@@ -232,11 +234,7 @@ const BillsTable = () => {
   );
 };
 
-export default BillsTable;
-
-function FilterableTableHeader({ handleSearch, isValidating, responsiveSize, t }) {
-  const layout = useLayoutType();
-
+function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
   return (
     <>
       <div className={styles.headerContainer}>
@@ -260,3 +258,5 @@ function FilterableTableHeader({ handleSearch, isValidating, responsiveSize, t }
     </>
   );
 }
+
+export default BillsTable;

packages/esm-billing-app/src/bills-table/bills-table.scss

@@ -14,6 +14,7 @@
 .billListContainer {
   background-color: $ui-02;
   border: 1px solid $ui-03;
+  border-bottom: none;
   width: 100%;
   margin: 0 auto;
   max-width: 95vw;

packages/esm-billing-app/src/bills-table/bills-table.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useConfig, usePagination } from '@openmrs/esm-framework';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { useBills } from '../billing.resource';
 import BillsTable from './bills-table.component';
 

packages/esm-billing-app/src/invoice/invoice.component.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import { ExtensionSlot, isDesktop, navigate, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import styles from './invoice.scss';
+
+type InvoiceProps = {};
+
+const Invoice: React.FC<InvoiceProps> = () => {
+  const params = useParams();
+  const layout = useLayoutType();
+  const { patient, patientUuid, isLoading } = usePatient(params?.patientUuid);
+
+  const invoiceDetails = {
+    'Invoice Number': '#105986',
+    'Billing Date & Time': 'Thu 04 Nov, 2023 01:20 pm',
+    'Total Amount': 'Ksh. 1000',
+    'Invoice Status': 'Pending',
+  };
+
+  const navigateToDashboard = () =>
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'home/billing',
+    });
+
+  if (isLoading) {
+    return (
+      <div className={styles.invoiceContainer}>
+        <InlineLoading
+          className={styles.loader}
+          status="active"
+          iconDescription="Loading"
+          description="Loading patient header..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.invoiceContainer}>
+      <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />
+
+      <section className={styles.details}>
+        {Object.entries(invoiceDetails).map(([label, value]) => (
+          <InvoiceDetails key={label} label={label} value={value} />
+        ))}
+      </section>
+
+      {isDesktop(layout) && (
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+            iconDescription="Return to billing dashboard"
+            size="sm"
+            onClick={navigateToDashboard}>
+            <span>Back to dashboard</span>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface InvoiceDetailsProps {
+  label: string;
+  value: string;
+}
+
+function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  return (
+    <div>
+      <h1 className={styles.label}>{label}</h1>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+}
+
+export default Invoice;

packages/esm-billing-app/src/invoice/invoice.scss

@@ -1,6 +1,52 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
+@use '@carbon/type';
 
 .invoiceContainer {
-  margin: layout.$spacing-03 layout.$spacing-05;
+  background-color: colors.$gray-10;
+  height: calc(100vh - 3rem);
+}
+
+.loader {
+  display: flex;
+  min-height: layout.$spacing-09;
+  justify-content: center;
+}
+
+.details {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: layout.$spacing-05;
+}
+
+.label {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+}
+
+.value {
+  @include type.type-style('heading-03');
+  display: inline-block;
+  margin-top: layout.$spacing-04;
+}
+
+.backButton {
+  margin: layout.$spacing-04;
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+
+    svg {
+      order: 1;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
 }

packages/esm-billing-app/src/left-panel-link.component.tsx

@@ -13,7 +13,16 @@ function LinkExtension({ config }: { config: LinkConfig }) {
   const location = useLocation();
   const spaBasePath = window.getOpenmrsSpaBase() + 'home';
 
-  const urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'billing';
+  }
 
   return (
     <ConfigurableLink

packages/esm-billing-app/src/root.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
-import Invoice from './invoice/invoce.component';
+import Invoice from './invoice/invoice.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/billing';