@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false},{"component":"billingAdmin","route":"billing-admin"}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slots":["homepage-dashboard-slot"],"meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"},{"name":"payments-points-dashboard-link","component":"paymentPointDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"cashier-points","title":"Payment Point","slot":"payment-point-dashboard-slot"}},{"name":"payment-points-dashboard","component":"paymentPoints","slot":"payment-point-dashboard-slot"},{"name":"payment-mode-dashboard-link","component":"paymentModeLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-modes","title":"Payment Mode","slot":"payment-mode-dashboard-slot"}},{"name":"payment-mode-dashboard","component":"paymentModeDashboard","slot":"payment-mode-dashboard-slot"},{"name":"bill-deposit-dashboard-link","component":"billDepositDashboardLink","slot":"billing-admin-dashboard-slot","meta":{"name":"bill-deposit","title":"Bill Deposit","slot":"billing-deposit-dashboard-slot"}},{"name":"bill-deposit-dashboard","component":"billDepositDashboard","slot":"billing-deposit-dashboard-slot"},{"name":"billable-exemptions-dashboard-link","component":"billableExemptionsLink","slot":"billing-admin-dashboard-slot","meta":{"name":"billable-exemptions","title":"Billable Exemptions","slot":"billing-exemptions-dashboard-slot"}},{"name":"billable-exemptions-dashboard","component":"billableExemptions","slot":"billing-exemptions-dashboard-slot"},{"name":"clinical-charges-dashboard-link","component":"clinicalChargesLink","slot":"billing-admin-dashboard-slot","meta":{"name":"clinical-charges","title":"Clinical Charges","slot":"clinical-charges-dashboard-slot"}},{"name":"clinical-charges-dashboard","component":"clinicalCharges","slot":"clinical-charges-dashboard-slot"},{"name":"payment-history-dashboard-link","component":"paymentHistoryLink","slot":"billing-admin-dashboard-slot","meta":{"name":"payment-history","title":"Payment History","slot":"payment-history-dashboard-slot"}},{"name":"payment-history-dashboard","component":"paymentHistoryDashboard","slot":"payment-history-dashboard-slot"},{"name":"patient-billing-dashboard-link","component":"patientBillingLink","slot":"billing-admin-dashboard-slot","meta":{"name":"patient-billing","title":"Patient Billing","slot":"patient-billing-dashboard-slot"}},{"name":"patient-billing-dashboard","component":"patientBilling","slot":"patient-billing-dashboard-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"commodityForm","title":"Charge Commodity Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"claim-summary-modal","component":"claimSummaryModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.30"}

package/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@palladium-ethiopia/esm-billing-app",
+  "version": "5.4.2-pre.30",
+  "description": "Billing app for EthiopiaEMR",
+  "keywords": [
+    "openmrs"
+  ],
+  "homepage": "https://github.com/palladium-group/ethiopiaemr-esm-3.x#readme",
+  "bugs": {
+    "url": "https://github.com/palladium-group/ethiopiaemr-esm-3.x/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladium-group/ethiopiaemr-esm-3.x.git"
+  },
+  "license": "MPL-2.0",
+  "main": "src/index.ts",
+  "source": true,
+  "browser": "dist/ethiopia-esm-billing-app.js",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "^1.83.0",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "1.0.0"
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-rspack-config');

package/src/autosuggest/autosuggest.component.tsx

@@ -0,0 +1,203 @@
+import { Layer, Search } from '@carbon/react';
+import classNames from 'classnames';
+import React, { type HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
+import styles from './autosuggest.scss';
+
+// FIXME Temporarily included types from Carbon
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded?: boolean;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?(): void;
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the Search
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: Function;
+  getFieldValue: Function;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean | undefined;
+  invalidText?: string | undefined;
+  renderEmptyState?: (searchValue: string) => ReactNode;
+  renderSuggestionItem?: (item: any) => ReactNode;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  renderEmptyState,
+  renderSuggestionItem,
+  ...searchProps
+}) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const [showEmptyState, setShowEmptyState] = useState(false);
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSuggestions([]);
+      setShowEmptyState(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query) {
+      getSearchResults(query).then((suggestions) => {
+        setShowEmptyState(suggestions.length < 1);
+        setSuggestions(suggestions);
+      });
+    } else {
+      setSuggestions([]);
+    }
+  };
+
+  const handleClear = () => {
+    onSuggestionSelected(name, undefined);
+  };
+
+  const handleClick = (index: number) => {
+    const display = getDisplayValue(suggestions[index]);
+    const value = getFieldValue(suggestions[index]);
+    searchBox.current.value = display;
+    onSuggestionSelected(name, value);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {suggestions.length > 0 && (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <li
+              key={index}
+              onClick={(e) => handleClick(index)}
+              role="presentation"
+              className={typeof renderSuggestionItem !== 'function' && styles.displayText}>
+              {typeof renderSuggestionItem === 'function'
+                ? renderSuggestionItem(suggestion)
+                : getDisplayValue(suggestion)}
+            </li>
+          ))}
+        </ul>
+      )}
+      {showEmptyState && searchBox.current?.value?.length >= 3 && typeof renderEmptyState === 'function' && (
+        <span className={styles.suggestions}>{renderEmptyState(searchBox.current?.value)}</span>
+      )}
+      {invalid ? <label className={classNames(styles.invalidMsg)}>{invalidText}</label> : <></>}
+    </div>
+  );
+};

package/src/autosuggest/autosuggest.scss

@@ -0,0 +1,68 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: colors.$white;
+  margin-bottom: 20px;
+  z-index: 99;
+  box-shadow: layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 colors.$gray-30;
+}
+
+.suggestions li {
+  color: colors.$gray-70;
+  border-bottom: 1px solid colors.$gray-50;
+}
+
+.displayText {
+  padding: layout.$spacing-05;
+}
+
+.suggestions li:hover {
+  background-color: #e5e5e5;
+  color: colors.$gray-100;
+  cursor: pointer;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid colors.$gray-40-hover;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, colors.$red-60);
+  outline-offset: -2px;
+  margin-bottom: layout.$spacing-02;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, colors.$red-60);
+  font-size: small;
+}

package/src/autosuggest/patient-search-info.component.tsx

@@ -0,0 +1,29 @@
+import { Tag, Tile } from '@carbon/react';
+import { Patient, PatientPhoto } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './patient-search-info.scss';
+type PatientSearchInfoProps = {
+  patient: Patient;
+};
+
+const PatientSearchInfo: React.FC<PatientSearchInfoProps> = ({ patient }) => {
+  return (
+    <Tile className={styles.patientInfo}>
+      <div className={styles.patientAvatar} role="img">
+        <PatientPhoto patientUuid={patient.uuid} patientName={patient.person.display} />
+      </div>
+      <div className={styles.patientDetails}>
+        <h2 className={styles.patientName}>{patient.person.display}</h2>
+        <div className={styles.demographics}>
+          {patient?.person?.gender} <span className={styles.middot}>&middot;</span> {patient?.person?.age}
+          <span className={styles.middot}>&middot;</span>
+          <Tag>
+            OpenmrsId:{patient.identifiers.find((id) => id.identifierType.display === 'OpenMRS ID')?.identifier}
+          </Tag>
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default PatientSearchInfo;

package/src/autosuggest/patient-search-info.scss

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  background-color: colors.$white;
+}
+
+.patientInfo:hover {
+  background-color: colors.$gray-10;
+}
+
+.patientDetails {
+  flex: 1;
+}
+
+.patientName {
+  @include type.type-style('heading-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-02;
+}
+
+.demographics {
+  display: flex;
+  align-items: center;
+  margin-bottom: layout.$spacing-02;
+  color: colors.$gray-70;
+  text-transform: uppercase;
+}
+
+.middot {
+  margin: 0 0.25rem;
+}

package/src/autosuggest/search-empty-state.component.tsx

@@ -0,0 +1,27 @@
+import { Button, Tile } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import styles from './search-empty-state.scss';
+
+type SearchEmptyStateProps = {
+  searchValue?: string;
+  message: string;
+  onAdd?: () => void;
+};
+
+const SearchEmptyState: React.FC<SearchEmptyStateProps> = ({ searchValue, message, onAdd }) => {
+  return (
+    <Tile className={styles.container}>
+      <EmptyDataIllustration height="50" width="50" />
+      <p>{message}</p>
+      {typeof onAdd === 'function' && (
+        <Button kind="ghost" renderIcon={Add} onClick={onAdd}>
+          Create patient
+        </Button>
+      )}
+    </Tile>
+  );
+};
+
+export default SearchEmptyState;

package/src/autosuggest/search-empty-state.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: layout.$spacing-01;
+  font-size: xx-small;
+  background-color: colors.$white;
+  border: solid 1px colors.$gray-30;
+  color: colors.$gray-50;
+}
+
+.emptyIllustration {
+  color: colors.$teal-70;
+}

package/src/benefits-package/benefits/benefits-header.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './benefits.scss';
+import { useTranslation } from 'react-i18next';
+import { useShifIdentifiersData } from '../benefits-package.mock';
+
+interface BenefitsHeaderProps {}
+
+const BenefitsHeader: React.FC<BenefitsHeaderProps> = () => {
+  const { t } = useTranslation();
+  const shifIdentifiers = useShifIdentifiersData();
+
+  return (
+    <div className={styles.headerContainer}>
+      <h4>{t('benefits', 'Benefits')}</h4>
+      <div>
+        <h6>{t('SHIF', 'Social Health Insurance Fund')}</h6>
+        {shifIdentifiers.map((identifier) => (
+          <h6 key={identifier.identiferNumber}>
+            <span>{t('shaNo', 'SHA NUMBER: ')}</span>
+            <span>{identifier.identiferNumber}</span>
+          </h6>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BenefitsHeader;

package/src/benefits-package/benefits/benefits.component.tsx

@@ -0,0 +1,74 @@
+import { Accordion, AccordionItem, Layer, Search } from '@carbon/react';
+import React, { useState } from 'react';
+import styles from './benefits.scss';
+import { CheckmarkFilled } from '@carbon/react/icons';
+import { useBenefitsData } from '../benefits-package.mock';
+import BenefitsHeader from './benefits-header.component';
+import { useTranslation } from 'react-i18next';
+import EmptyStateSearch from '../empty-state/empty-state.component';
+
+const Benefits: React.FC = () => {
+  const { t } = useTranslation();
+  const benefitsData = useBenefitsData();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredBenefits = benefitsData.filter((benefit) =>
+    benefit.title.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <div className={`omrs-main-content`}>
+      <BenefitsHeader />
+      <div className={styles.search}>
+        <Search
+          labelText={t('searchBenefits', 'Search benefits')}
+          placeholder={t('searchByBenefit', 'Search by benefit')}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          value={searchTerm}
+        />
+      </div>
+
+      {filteredBenefits.length === 0 ? (
+        <EmptyStateSearch
+          title={t('noBenefitFound', 'No benefit found')}
+          subTitle={t('noResultsSuggestion', `We couldn't find any matching benefit.`)}
+        />
+      ) : (
+        filteredBenefits.map((benefit) => (
+          <Accordion key={benefit.title}>
+            <AccordionItem title={benefit.title}>
+              <Layer className={styles.accordionLayer}>
+                {benefit.description && (
+                  <p className={styles.description}>
+                    <strong>Description:</strong> {benefit?.description}
+                  </p>
+                )}
+                <span>
+                  <strong>Allocation: </strong>
+                  {benefit.allocation}
+                </span>
+                <span>
+                  <strong>Expenditure: </strong>
+                  {benefit.expenditure}
+                </span>
+                <span>
+                  <strong>Balance: </strong>
+                  {benefit.balance}
+                </span>
+                <hr />
+                <span className={styles.activeContainer}>
+                  <CheckmarkFilled className={benefit.isActive ? styles.activeIcon : styles.inactiveIcon} />
+                  <span className={benefit.isActive ? '' : styles.inactiveIcon}>
+                    {benefit.isActive ? 'Active' : 'Inactive'}
+                  </span>
+                </span>
+              </Layer>
+            </AccordionItem>
+          </Accordion>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default Benefits;

package/src/benefits-package/benefits/benefits.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars';
+
+.headerContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  background-color: colors.$white;
+  color: colors.$gray-70;
+  padding-left: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+    }
+  }
+}
+
+.accordionLayer {
+  background-color: colors.$white;
+  width: 130%;
+  padding: layout.$spacing-03;
+  border: solid colors.$gray-30 0.1rem;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  margin: 0 auto;
+
+  & > hr {
+    width: 100%;
+  }
+}
+
+.activeIcon {
+  color: colors.$green-40;
+}
+
+.inactiveIcon {
+  color: colors.$red-60;
+}
+
+.activeContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+.search {
+  margin-bottom: layout.$spacing-07;
+  border: solid colors.$gray-30 0.1rem;
+}

package/src/benefits-package/benefits-package.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import BenefitsTable from './table/benefits-table.component';
+import styles from './benefits-package.scss';
+import { useTranslation } from 'react-i18next';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import Benefits from './benefits/benefits.component';
+import { Layer, Tile, Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
+import { Task, Upload } from '@carbon/react/icons';
+
+const BenefitsPackage = () => {
+  const { t } = useTranslation();
+  return (
+    <Layer className={styles.container}>
+      <Tile>
+        <CardHeader title={t('shaBenefits', 'SHA benefits')} children={''} />
+      </Tile>
+      <div className={styles.tabs}>
+        <Tabs>
+          <TabList contained activation="manual" aria-label="List of panels">
+            <Tab renderIcon={Task}>{t('eligibleBenefits', 'Eligible benefits')}</Tab>
+            <Tab renderIcon={Upload}>{t('preauthRequest', 'Preauth requests')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Benefits />
+            </TabPanel>
+            <TabPanel>
+              <BenefitsTable />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </Layer>
+  );
+};
+
+export default BenefitsPackage;