@digihmis/esm-administration-app 1.0.0

package/src/billing-management/billing-tabs/billing-tabs.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { LocationSave, Money, FinancialAssets } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import styles from './billing-tabs.component.scss';
+import PaymentModeTable from '../billing-payment-modes/billing-payment-modes.component';
+import PaymentPointTable from '../billing-payment-points/billing-payment-point.component';
+import ChargeItemsTable from '../billing-charge-items/billing-charge-items.component';
+
+const BillManagement = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.adminPage}>
+      <Tabs>
+        <TabList contained>
+          <Tab renderIcon={FinancialAssets}>{t('billableServices', 'Billable services')}</Tab>
+          <Tab renderIcon={Money}>{t('paymentsMode', 'Payment modes')}</Tab>
+          <Tab renderIcon={LocationSave}>{t('paymentPoints', 'Payment points')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <ChargeItemsTable />
+          </TabPanel>
+          <TabPanel>
+            <PaymentModeTable />
+          </TabPanel>
+          <TabPanel>
+            <PaymentPointTable />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default BillManagement;

package/src/components/custom-icon-wrapper/custom-icon-wrapper.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface IconWrapperProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const IconWrapper: React.FC<IconWrapperProps> = ({
+  src,
+  alt = 'Icon',
+  className,
+  style = { width: '100px', height: '148px' },
+}) => {
+  return <img src={src} alt={alt} className={className} style={style} />;
+};

package/src/components/custom-page-header/custom-page-header.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar } from '@carbon/react/icons';
+import { useSession, formatDate, ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './custom-page-header.scss';
+import { IconWrapper } from '../custom-icon-wrapper/custom-icon-wrapper.component';
+
+interface CustomPageHeaderProps {
+  subTitle?: string;
+  iconSrc?: string;
+  iconAlt?: string;
+}
+
+export const CustomPageHeader: React.FC<CustomPageHeaderProps> = ({ subTitle, iconSrc, iconAlt }) => {
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <IconWrapper src={iconSrc} alt={iconAlt} />
+        <div className={styles['page-labels']}>
+          <p className={styles['page-name']}>{userLocation}</p>
+          <p className={styles['page-subtitle']}>{subTitle}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.extensionSlot}>
+          <ExtensionSlot name={'provider-banner-slot'} />
+          <div className={styles['date-and-location']}>
+            <Calendar size={16} />
+            <span className={styles.value}>{formatDate(new Date(), { mode: 'wide', noToday: true })}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/custom-page-header/custom-page-header.scss

@@ -0,0 +1,76 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  border: 1px solid colors.$gray-20;
+  border-left: 0px;
+  display: flex;
+  background: var(--cds-field);
+  justify-content: space-between;
+  margin-top: 1.5rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-07;
+}
+
+.page-subtitle {
+  @include type.type-style('caption-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-06;
+}
+.page-name {
+  @include type.type-style('caption-01');
+  color: colors.$gray-80;
+  font-size: layout.$spacing-05;
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  margin-top: layout.$spacing-03;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+  @include type.type-style('caption-01');
+  font-size: 0.83rem;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('caption-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+}

package/src/config-schema.ts

@@ -0,0 +1,142 @@
+import { ConfigSchema, Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema: ConfigSchema = {
+  queueManagementIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/queue_management.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],
+    },
+  },
+  formBuilderIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/form_builder.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  inpatientIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/Inpatient.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  locationIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/location.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  digiHMISIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/digihmis-login-logo.svg',
+      _description:
+        'The path or URL to the DigiHMIS logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'DigiHMIS Logo',
+      _description: 'The alternative text for the DigiHMIS logo image, displayed when the image cannot be loaded.',
+    },
+  },
+  flagIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/kenya-flag.svg',
+      _description:
+        'The path or URL to the flag image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Kenya Flag',
+      _description: 'The alternative text for the flag image, displayed when the image cannot be loaded.',
+    },
+  },
+  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',
+      },
+    ],
+  },
+};
+
+export type ConfigObject = {
+  queueManagementIcon: {
+    src: string;
+  };
+  formBuilderIcon: {
+    src: string;
+  };
+  billingIcon: {
+    src: string;
+  };
+  inpatientIcon: {
+    src: string;
+  };
+  locationIcon: {
+    src: string;
+  };
+  digiHMISIcon: {
+    src: string;
+  };
+  flagIcon: {
+    src: string;
+  };
+  excludedPaymentMode: Array<{ uuid: string; label: string }>;
+};

package/src/constant/index.ts

@@ -0,0 +1 @@
+export const PAYMENT_MODE_ATTRIBUTE_FORMATS = ['java.lang.String', 'java.lang.Integer', 'java.lang.Double'];

package/src/dashboard.meta.ts

@@ -0,0 +1,47 @@
+import {
+  DataCenter,
+  DocumentSketch,
+  HospitalBed,
+  MessageQueue,
+  PiggyBank,
+  WebServicesTaskDefinitionVersion,
+} from '@carbon/react/icons';
+export const systemInfoDashboardMeta = {
+  name: 'system-info-management',
+  slot: 'administration-dashboard-slot',
+  title: 'System Info',
+  icon: WebServicesTaskDefinitionVersion,
+};
+export const queueManagementDashboardMeta = {
+  name: 'queue-management',
+  slot: 'administration-dashboard-slot',
+  title: 'Queue Management',
+  icon: MessageQueue,
+};
+
+export const locationManagementDashboardMeta = {
+  name: 'location-management',
+  slot: 'administration-dashboard-slot',
+  title: 'Location Management',
+  icon: DataCenter,
+};
+
+export const bedManagementDashboardMeta = {
+  name: 'bed-management',
+  slot: 'administration-dashboard-slot',
+  title: 'Bed Management',
+  icon: HospitalBed,
+};
+
+export const formBuilderDashboardMeta = {
+  name: 'form-builder',
+  slot: 'administration-dashboard-slot',
+  title: 'Form Builder',
+  icon: DocumentSketch,
+};
+export const billingManagementDashboardMeta = {
+  name: 'billing-management',
+  slot: 'administration-dashboard-slot',
+  title: 'Billing Management',
+  icon: PiggyBank,
+};

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/form-builder/form-builder.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './form-builder.scss';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject } from '../config-schema';
+import { CustomPageHeader } from '../components/custom-page-header/custom-page-header.component';
+
+const FormBuilderDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { formBuilderIcon } = useConfig<ConfigObject>();
+
+  return (
+    <div className={styles.dashboardContainer}>
+      <CustomPageHeader subTitle={t('configureForms', 'Manage  clinical forms')} iconSrc={formBuilderIcon.src} />
+    </div>
+  );
+};
+
+export default FormBuilderDashboard;

package/src/hooks/useConcept.ts

@@ -0,0 +1,13 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type Concept } from '../queue-management/queue-types';
+
+export function useConcept(uuid: string) {
+  const apiUrl = uuid ? `${restBaseUrl}/concept/${uuid}` : undefined;
+  const { data, error, isLoading } = useSWRImmutable<{ data: Concept }, Error>(apiUrl, openmrsFetch);
+  return {
+    concept: data?.data,
+    error,
+    isLoading,
+  };
+}

package/src/hooks/useQueues.ts

@@ -0,0 +1,22 @@
+import { getLocale, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { useMemo } from 'react';
+import { Queue } from '../queue-management/queue-types';
+
+export function useQueues(locationUuid?: string) {
+  const customRepresentation =
+    'custom:(uuid,display,name,description,service:(uuid,display),allowedPriorities:(uuid,display),allowedStatuses:(uuid,display),location:(uuid,display))';
+  const apiUrl = `${restBaseUrl}/queue?v=${customRepresentation}` + (locationUuid ? `&location=${locationUuid}` : '');
+
+  const { data, ...rest } = useSWRImmutable<{ data: { results: Array<Queue> } }, Error>(apiUrl, openmrsFetch);
+
+  const queues = useMemo(
+    () => data?.data?.results.sort((a, b) => a.display.localeCompare(b.display, getLocale())) ?? [],
+    [data?.data?.results],
+  );
+
+  return {
+    queues,
+    ...rest,
+  };
+}

package/src/hooks/useSystemSetting.ts

@@ -0,0 +1,18 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export interface SystemSetting {
+  uuid: string;
+  property: string;
+  value: string;
+}
+
+export function useSystemSetting(setting: string) {
+  const apiUrl = `${restBaseUrl}/systemsetting/${setting}?v=custom:(value)`;
+  const { data, error, isLoading } = useSWRImmutable<{ data: SystemSetting }, Error>(apiUrl, openmrsFetch);
+  return {
+    systemSetting: data?.data,
+    error,
+    isLoading,
+  };
+}

package/src/index.ts

@@ -0,0 +1,133 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from './left-panel/left-panel.component';
+import {
+  bedManagementDashboardMeta,
+  billingManagementDashboardMeta,
+  formBuilderDashboardMeta,
+  locationManagementDashboardMeta,
+  queueManagementDashboardMeta,
+  systemInfoDashboardMeta,
+} from './dashboard.meta';
+import QueueManagementDashboard from './queue-management/queue-management-dashboard.component';
+import LocationManagementDashboard from './location-management/location-management-dashboard.component';
+import BedManagementDashboard from './bed-management/bed-management.component';
+import FormBuilderDashboard from './form-builder/form-builder.component';
+import BillingManagementDashboard from './billing-management/billing-management.component';
+import SystemInfoDashboard from './system-info/system-info.component';
+import DeletePaymentModeModal from './billing-management/billing-payment-modes/billing-payment-modes-modal/billing-delete-payment-modes.modal';
+import DeletePaymentPointModal from './billing-management/billing-payment-points/billing-payment-point-modal/billing-delete-payment-point.modal';
+import DeleteBillableServiceModal from './billing-management/billing-charge-items/billing-charge-items-modal/billing-charge-items.modal';
+
+const moduleName = '@digihmis/esm-administration-app';
+const pageName = 'administration';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const queueLeftPanelLink = getSyncLifecycle(createDashboardLink(queueManagementDashboardMeta), options);
+export const locationLeftPanelLink = getSyncLifecycle(createDashboardLink(locationManagementDashboardMeta), options);
+export const bedLeftPanelLink = getSyncLifecycle(createDashboardLink(bedManagementDashboardMeta), options);
+export const formBuilderLeftPanelLink = getSyncLifecycle(createDashboardLink(formBuilderDashboardMeta), options);
+export const billingLeftPanelLink = getSyncLifecycle(createDashboardLink(billingManagementDashboardMeta), options);
+export const systemInfoLeftPanelLink = getSyncLifecycle(createDashboardLink(systemInfoDashboardMeta), options);
+
+export const queueManagementDashboard = getSyncLifecycle(QueueManagementDashboard, options);
+export const locationManagementDashboard = getSyncLifecycle(LocationManagementDashboard, options);
+export const bedManagementDashboard = getSyncLifecycle(BedManagementDashboard, options);
+export const formBuilderDashboard = getSyncLifecycle(FormBuilderDashboard, options);
+export const billingManagementDashboard = getSyncLifecycle(BillingManagementDashboard, options);
+export const systemInfoDashboard = getSyncLifecycle(SystemInfoDashboard, options);
+
+// t('addNewQueueService', 'Add New Queue Service')
+export const addNewQueueServiceWorkspace = getAsyncLifecycle(
+  () => import('./queue-management/queue-management-workspace/queue-service/queue-service-form.workspace'),
+  {
+    featureName: 'service-queues-service-form',
+    moduleName,
+  },
+);
+
+// t('addNewQueueServiceRoom', 'Add new queue service room')
+export const addNewQueueServiceRoomWorkspace = getAsyncLifecycle(
+  () => import('./queue-management/queue-management-workspace/queue-room/queue-room-form.workspace'),
+  {
+    featureName: 'service-queues-queue-room-form',
+    moduleName,
+  },
+);
+
+// t('addNewLocationWorkspace', 'Add new location')
+export const addNewLocationWorkspace = getAsyncLifecycle(
+  () => import('./location-management/forms/add-location/add-location.workspace'),
+  {
+    featureName: 'add-location-workspace',
+    moduleName,
+  },
+);
+
+// t('searchLocationWorkspace', 'Search Location')
+export const searchLocationWorkspace = getAsyncLifecycle(
+  () => import('./location-management/forms/search-location/search-location.workspace'),
+  {
+    featureName: 'search-location-workspace',
+    moduleName,
+  },
+);
+
+// t('paymentModeWorkspace', 'Payment Mode')
+export const paymentModeWorkspace = getAsyncLifecycle(
+  () =>
+    import(
+      './billing-management/billing-payment-modes/billing-payment-modes-workspace/billing-payment-modes.workspace'
+    ),
+  {
+    featureName: 'payment-mode-workspace',
+    moduleName,
+  },
+);
+
+// t('paymentPointWorkspace', 'Payment Point')
+export const paymentPointWorkspace = getAsyncLifecycle(
+  () =>
+    import(
+      './billing-management/billing-payment-points/billing-payment-points-workspace/billing-payment-points.workspace'
+    ),
+  {
+    featureName: 'payment-point-workspace',
+    moduleName,
+  },
+);
+
+// t('addCommodityItem', 'Add Commodity Item')
+export const commodityForm = getAsyncLifecycle(
+  () =>
+    import('./billing-management/billing-charge-items/billing-charge-items-workspace/billing-charge-item.workspace'),
+  {
+    featureName: 'billing-charge-item-workspace',
+    moduleName,
+  },
+);
+
+// t('addServiceItem', 'Add Charge Service')
+export const billableServiceForm = getAsyncLifecycle(
+  () =>
+    import('./billing-management/billing-charge-items/billing-charge-items-workspace/billing-charge-service.workspace'),
+  {
+    featureName: 'billing-charge-service-workspace',
+    moduleName,
+  },
+);
+
+// modals
+export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, options);
+export const deletePaymentPointModal = getSyncLifecycle(DeletePaymentPointModal, options);
+export const deleteBillableService = getSyncLifecycle(DeleteBillableServiceModal, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

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

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { BrowserRouter, useLocation } 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;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon } = dashboardLinkConfig;
+  const nameSegment = name.split('/').at(-1);
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home/administration';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+  const isActive = nameSegment === urlSegment;
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${name}`}
+      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/left-panel/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;
+}