(feat) Add billing module header

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import styles from './billing-header.scss';
+import BillingIllustration from './billing-illustration.component';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
+
+interface BillingHeaderProps {
+  title: string;
+}
+
+const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header} data-testid="billing-header">
+      <div className={styles['left-justified-items']}>
+        <BillingIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('billing', 'Billing')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.userContainer}>
+          <p>{session?.user?.person?.display}</p>
+          <UserFollow size={16} className={styles.userIcon} />
+        </div>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BillingHeader;

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

@@ -0,0 +1,81 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin: spacing.$spacing-03;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: spacing.$spacing-05 0;
+
+  p:first-of-type {
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: spacing.$spacing-03;
+  gap: spacing.$spacing-05; 
+}
+
+.value {
+  margin-left: spacing.$spacing-02;
+}
+
+.middot {
+  margin: 0 spacing.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    & > svg {
+      order: -1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}
+
+.userIcon {
+  fill: $ui-05;
+  margin: spacing.$spacing-01;
+}

packages/esm-billing-app/src/billing-header/billing-illustration.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const BillingIllustration: React.FC = () => {
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>Billing module illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          opacity="0.5"
+          d="M58.75 68.639C60.8886 66.8242 64.1114 66.8242 66.25 68.639C67.703 69.8719 70 68.8873 70 67.0314V12.9686C70 11.1128 67.703 10.1281 66.25 11.3611C64.1114 13.1758 60.8886 13.1758 58.75 11.3611C56.6114 9.54632 53.3886 9.54632 51.25 11.3611C49.1114 13.1758 45.8886 13.1758 43.75 11.3611C41.6114 9.54632 38.3886 9.54632 36.25 11.3611C34.1114 13.1758 30.8886 13.1758 28.75 11.3611C26.6114 9.54632 23.3886 9.54632 21.25 11.3611C19.1114 13.1758 15.8886 13.1758 13.75 11.3611C12.297 10.1281 10 11.1128 10 12.9686V67.0314C10 68.8873 12.297 69.8719 13.75 68.639C15.8886 66.8242 19.1114 66.8242 21.25 68.639C23.3886 70.4537 26.6114 70.4537 28.75 68.639C30.8886 66.8242 34.1114 66.8242 36.25 68.639C38.3886 70.4537 41.6114 70.4537 43.75 68.639C45.8886 66.8242 49.1114 66.8242 51.25 68.639C53.3886 70.4537 56.6114 70.4537 58.75 68.639Z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M22.5 51.6666C22.5 50.2859 23.6193 49.1666 25 49.1666H55C56.3807 49.1666 57.5 50.2859 57.5 51.6666C57.5 53.0474 56.3807 54.1666 55 54.1666H25C23.6193 54.1666 22.5 53.0474 22.5 51.6666Z"
+          fill="#7BBCB9"
+        />
+        <path
+          d="M22.5 40C22.5 38.6193 23.6193 37.5 25 37.5H55C56.3807 37.5 57.5 38.6193 57.5 40C57.5 41.3807 56.3807 42.5 55 42.5H25C23.6193 42.5 22.5 41.3807 22.5 40Z"
+          fill="#7BBCB9"
+        />
+        <path
+          d="M22.5 28.3333C22.5 26.9526 23.6193 25.8333 25 25.8333H55C56.3807 25.8333 57.5 26.9526 57.5 28.3333C57.5 29.714 56.3807 30.8333 55 30.8333H25C23.6193 30.8333 22.5 29.714 22.5 28.3333Z"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default BillingIllustration;

packages/esm-billing-app/src/routes.json

@@ -21,4 +21,4 @@
       "slot": "billing-dashboard-slot"
     }
   ]
-}
+}