@digihmis/esm-billing-app 1.0.0

package/src/bills-table/bills-table.scss

@@ -0,0 +1,252 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  // margin-top: layout.$spacing-05;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.billListContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :has(.filterEmptyState) {
+    border-bottom: none;
+  }
+}
+
+.filterDropdown {
+  margin-left: 1rem;
+}
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--list-box__menu) {
+    min-width: max-content;
+  }
+
+  :global(.cds--list-box) {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.menu {
+  margin-left: layout.$spacing-03;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  &:global(.cds--inline-loading) {
+    max-height: 1rem;
+  }
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  flex: 1;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  // border: 1px solid $ui-03;
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.expendableRow {
+  padding-left: 1rem;
+}
+
+.scalpel {
+  cursor: pointer;
+}
+
+// Status badge styles
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-02 layout.$spacing-03;
+  border-radius: 12px;
+  @include type.type-style('label-01');
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.statusPaid {
+  // background-color: $support-success;
+  // color: $inverse-02;
+}
+
+.statusPending {
+  background-color: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffeaa7;
+}
+
+.statusExempted {
+  background-color: #e7d6f8;
+  color: #4a1d7a;
+  border: 1px solid #d4b5f0;
+}
+
+.statusPosted {
+  // background-color: $support-info;
+  // color: $inverse-02;
+}
+.emptyStateContainer {
+  border: 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;
+}

package/src/config-schema.ts

@@ -0,0 +1,148 @@
+import { ConfigSchema, Type, validators } from '@openmrs/esm-framework';
+export interface BillingConfig {
+  visitAttributeTypes: {
+    isPatientExempted: string;
+    paymentMethods: string;
+    insuranceScheme: string;
+    policyNumber: string;
+    exemptionCategory: string;
+    billPaymentStatus: string;
+    shaBenefitPackagesAndInterventions: string;
+  };
+  insurancePaymentMethod: string;
+  patientExemptionCategories: Array<{ value: string; label: string }>;
+  insuranceSchemes: Array<string>;
+  excludedPaymentMode: Array<{ uuid: string; label: string }>;
+  registrationServiceType: string;
+  localeCurrencyMapping: Record<string, string>;
+  billingIcon: {
+    src: string;
+    alt?: string;
+  };
+}
+
+export const configSchema: ConfigSchema = {
+  billingIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/billing.svg',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+  },
+  visitAttributeTypes: {
+    isPatientExempted: {
+      _type: Type.String,
+      _default: '3b9dfac8-9e4d-11ee-8c90-0242ac120002',
+      _description: 'Whether the patient should be exempted from paying for service i.e Prisoners',
+    },
+    paymentMethods: {
+      _type: Type.String,
+      _description: 'The payment methods visit attribute uuid',
+      _default: 'e6cb0c3b-04b0-4117-9bc6-ce24adbda802',
+    },
+    insuranceScheme: {
+      _type: Type.String,
+      _description: 'The insurance scheme visit attribute uuid',
+      _default: '2d0fa959-6780-41f1-85b1-402045935068',
+    },
+    policyNumber: {
+      _type: Type.String,
+      _description: 'The policy number visit attribute uuid',
+      _default: '0f4f3306-f01b-43c6-af5b-fdb60015cb02',
+    },
+    exemptionCategory: {
+      _type: Type.String,
+      _description: 'The exemption category visit attribute uuid',
+      _default: 'df0362f9-782e-4d92-8bb2-3112e9e9eb3c',
+    },
+    billPaymentStatus: {
+      _type: Type.String,
+      _description: 'The bill payment status visit attribute uuid',
+      _default: '919b51c9-8e2e-468f-8354-181bf3e55786',
+    },
+  },
+  insurancePaymentMethod: {
+    _type: Type.String,
+    _description: 'Insurance Payment method UUID',
+    _default: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+  },
+  patientExemptionCategories: {
+    _type: Type.Array,
+    _elements: {
+      value: {
+        _type: Type.String,
+        _description: 'The value of the exemption category',
+      },
+      label: {
+        _type: Type.String,
+        _default: null,
+        _description: 'The label of the exemption category',
+      },
+    },
+    _default: [{ value: 'IN_PRISON', label: 'In Prison' }],
+  },
+  excludedPaymentMode: {
+    _type: Type.Array,
+    _elements: {
+      uuid: {
+        _type: Type.UUID,
+        _description: 'The value of the payment mode to be excluded',
+      },
+      label: {
+        _type: Type.String,
+        _default: null,
+        _description: 'The label of the payment mode to be excluded',
+      },
+    },
+    _default: [
+      {
+        uuid: 'eb6173cb-9678-4614-bbe1-0ccf7ed9d1d4',
+        label: 'Waiver',
+      },
+    ],
+  },
+  insuranceSchemes: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.String,
+    },
+    _default: [
+      'Jubilee Insurance',
+      'AAR Insurance',
+      'Old Mutual Insurance',
+      'Britam Insurance',
+      'CIC Insurance',
+      'Madison Insurance',
+      'APA Insurance',
+      'ICEA LION Insurance',
+    ],
+    _description: 'List of insurance schemes',
+  },
+  registrationServiceType: {
+    _type: Type.UUID,
+    _description: 'Registrationn service type concept Uuid',
+    _default: 'b4b020ed-24a1-4c50-bcbd-12695cbe89d5',
+  },
+  localeCurrencyMapping: {
+    _type: Type.Object,
+    _description: 'Mapping of locale codes to currency codes for internationalization',
+    _default: {
+      en: 'KES',
+      sw: 'KES',
+      am: 'ETB',
+      ar: 'SAR',
+      es: 'EUR',
+      fr: 'EUR',
+      he: 'ILS',
+      km: 'KHR',
+      pt: 'EUR',
+      vi: 'VND',
+      zh: 'CNY',
+      'en-KE': 'KES',
+      'sw-KE': 'KES',
+      'am-ET': 'ETB',
+    },
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export const PENDING_PAYMENT_STATUS = 'PENDING';
+export const EXEMPTED_PAYMENT_STATUS = 'EXEMPTED';

package/src/dashboard.meta.ts

@@ -0,0 +1,16 @@
+import { PiggyBank, PiggyBankSlot } from '@carbon/react/icons';
+
+export const billingQueueMeta = {
+  name: 'billing',
+  slot: 'billing-dashboard-slot',
+  title: 'Billing queue',
+  icon: PiggyBankSlot,
+};
+
+export const billingFileMeta = {
+  name: 'billing/patient/:patientUuid/bill',
+  slot: 'billing-file-dashboard-slot',
+  title: 'Patient Bills',
+  icon: PiggyBank,
+  showOnlyOnRoute: '/bill',
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/index.ts

@@ -0,0 +1,37 @@
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import BillingCheckInForm from './billing-checkin-form/billing-checkin-form.extension';
+import PaymentTypeTag from './billing-checkin-form/billing-patient-type-tag/billing-patient-type-tag.component';
+import { createDashboardLink } from './leftpanel/left-panel.component';
+import { billingFileMeta, billingQueueMeta } from './dashboard.meta';
+import BillingDashboard from './billing-dashboard/billing-dashboard.component';
+import { BillingTimesheetModal } from './billing-timesheet-modal/billing-timesheet-modal';
+const moduleName = '@digihmis/esm-billing-app';
+const pageName = 'billing';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+// Core Components
+export const billingCheckInForm = getSyncLifecycle(BillingCheckInForm, options);
+
+export const paymentTypeTag = getSyncLifecycle(PaymentTypeTag, options);
+
+// left panel component
+export const billingQueueleftPanelLink = getSyncLifecycle(createDashboardLink(billingQueueMeta), options);
+export const patientBillingLeftPanelLink = getSyncLifecycle(createDashboardLink(billingFileMeta), options);
+
+// billing dashboard components
+export const billingDashboard = getSyncLifecycle(BillingDashboard, options);
+
+// Billing modals
+export const billingCheckInFormModal = getSyncLifecycle(BillingCheckInForm, options);
+export const billingTimesheetModal = getSyncLifecycle(BillingTimesheetModal, options);
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/leftpanel/left-panel.component.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { BrowserRouter, useLocation, useParams } from 'react-router-dom';
+import { type CarbonIconType } from '@carbon/react/icons';
+import last from 'lodash-es/last';
+import styles from './left-panel.scss';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  icon?: string | CarbonIconType;
+  showOnlyOnRoute?: string;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon, showOnlyOnRoute } = dashboardLinkConfig;
+  const location = useLocation();
+  const params = useParams();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  const patientUuid = useMemo(() => {
+    if (params.patientUuid) {
+      return params.patientUuid;
+    }
+    const pathParts = location.pathname.split('/');
+    const billingIndex = pathParts.indexOf('billing');
+    if (billingIndex !== -1 && pathParts.length > billingIndex + 1) {
+      const nextPart = pathParts[billingIndex + 1];
+      // Check if it's a UUID pattern (basic check)
+      if (nextPart && nextPart.length > 20 && nextPart.includes('-')) {
+        return nextPart;
+      }
+      // Check if path is /billing/patient/UUID/file
+      if (nextPart === 'patient' && pathParts.length > billingIndex + 2) {
+        const uuidPart = pathParts[billingIndex + 2];
+        if (uuidPart && uuidPart.length > 20 && uuidPart.includes('-')) {
+          return uuidPart;
+        }
+      }
+    }
+    return null;
+  }, [params.patientUuid, location.pathname]);
+
+  const shouldShow = useMemo(() => {
+    if (!showOnlyOnRoute) {
+      return true;
+    }
+    return location.pathname.includes(showOnlyOnRoute);
+  }, [showOnlyOnRoute, location.pathname]);
+
+  const linkPath = useMemo(() => {
+    let path = name;
+    if (name.includes(':patientUuid') && patientUuid) {
+      path = name.replace(':patientUuid', patientUuid);
+    }
+    return path;
+  }, [name, patientUuid]);
+
+  const isActive = useMemo(() => {
+    if (name.includes(':patientUuid')) {
+      return location.pathname.includes('/bill');
+    }
+    const urlSegment = decodeURIComponent(last(location.pathname.split('/')));
+    const nameSegment = name.split('/').at(-1);
+    return nameSegment === urlSegment;
+  }, [location.pathname, name]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${linkPath}`}
+      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
+      {typeof icon === 'string' ? (
+        <MaybeIcon icon={icon} className={styles.icon} size={16} />
+      ) : (
+        IconComp && <IconComp className={styles.icon} />
+      )}
+      {t(title)}
+    </ConfigurableLink>
+  );
+};
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
+  return (
+    <BrowserRouter>
+      <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );
+};
+
+export default DashboardLink;

package/src/leftpanel/left-panel.scss

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-05;
+  fill: colors.$gray-70;
+}

package/src/routes.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "billing-check-in-form",
+      "slot": "extra-visit-attribute-slot",
+      "component": "billingCheckInForm",
+      "order": 0
+    },{
+      "name": "payment-type-tag",
+      "slot": "patient-banner-tags-slot",
+      "component": "paymentTypeTag",
+      "online": true,
+      "offline": true
+    },{
+      "name": "billing-db-link",
+      "slot": "billing-dashboard-slot",
+      "component": "billingQueueleftPanelLink",
+      "meta": {
+        "name": "billing",
+        "slot": "billing-homepage-dashboard-slot",
+        "title": "Billing queue"
+      },
+      "order": 1,
+      "online": true,
+      "offline": true
+    }, {
+      "name": "care-panel-link",
+      "slot": "billing-dashboard-slot",
+      "component": "carePanelLink",
+      "meta": {
+        "name": "billing/patient/:patientUuid/bill",
+        "slot": "patient-bill-dashboard-slot",
+        "title": "Patient Bill",
+        "showOnlyOnRoute": "/bill"
+      },
+      "order": 2,
+      "online": true,
+      "offline": true
+    },{
+      "name": "billing-dashboard",
+        "slot": "billing-homepage-dashboard-slot",
+      "component": "billingDashboard",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "modals": [
+     {
+      "name": "billing-timesheet-modal",
+      "component": "billingTimesheetModal"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';