@kenyaemr/esm-etims-app 5.4.5-pre.1109

package/src/reference-data/etims-catalog-table.component.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Button,
+  type DataTableHeader,
+} from '@carbon/react';
+import { SyncSettings } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ErrorCard, useDebounce, usePaginationInfo } from '@openmrs/esm-framework';
+import styles from './etims-catalog-table.scss';
+
+const DEFAULT_PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+export type CatalogRow = {
+  id: string;
+  [key: string]: string;
+};
+
+type PaginationResult<T> = {
+  data?: T[];
+  error?: Error | null;
+  goTo: (page: number) => void;
+  currentPage: number;
+  totalCount?: number;
+};
+
+type EtimsCatalogTableProps<T> = {
+  title: string;
+  description: string;
+  searchPlaceholder: string;
+  errorTitle: string;
+  ariaLabel: string;
+  headers: Array<DataTableHeader>;
+  statusKeys?: string[];
+  fetchPage: (pageSize: number, searchTerm: string) => PaginationResult<T>;
+  mapRows: (items: T[]) => Array<CatalogRow>;
+  onSync: () => void;
+};
+
+const EtimsCatalogTable = <T,>({
+  title,
+  description,
+  searchPlaceholder,
+  errorTitle,
+  ariaLabel,
+  headers,
+  statusKeys = ['active'],
+  fetchPage,
+  mapRows,
+  onSync,
+}: EtimsCatalogTableProps<T>) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const { data: items = [], error, goTo, currentPage, totalCount } = fetchPage(pageSize, debouncedSearchTerm);
+
+  const { pageSizes } = usePaginationInfo(DEFAULT_PAGE_SIZE, totalCount ?? 0, currentPage, items.length);
+  const tableRows = useMemo(() => mapRows(items), [items, mapRows]);
+
+  const handleSearchChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement> | '', value?: string) => {
+      const searchValue = typeof event === 'string' ? value ?? '' : event.target.value;
+      setSearchTerm(searchValue);
+      if (currentPage !== 1) {
+        goTo(1);
+      }
+    },
+    [currentPage, goTo],
+  );
+
+  const handlePaginationChange = useCallback(
+    ({ page, pageSize: newSize }: { page: number; pageSize: number }) => {
+      if (newSize !== pageSize) {
+        setPageSize(newSize);
+      }
+      goTo(page);
+    },
+    [pageSize, goTo],
+  );
+
+  if (error) {
+    return (
+      <div className={styles.dataTableContainer}>
+        <ErrorCard error={error} headerTitle={errorTitle} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <DataTable size="sm" rows={tableRows} headers={headers} isSortable useZebraStyles>
+        {({
+          rows,
+          headers: tableHeaders,
+          getHeaderProps,
+          getRowProps,
+          getBatchActionProps,
+          getToolbarProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => {
+          const batchActionProps = getBatchActionProps();
+
+          return (
+            <TableContainer title={title} description={description} {...getTableContainerProps()}>
+              <TableToolbar {...getToolbarProps()}>
+                <TableToolbarContent aria-hidden={batchActionProps.shouldShowBatchActions}>
+                  <TableToolbarSearch persistent onChange={handleSearchChange} placeholder={searchPlaceholder} />
+                  <Button onClick={onSync} kind="ghost" size="sm" renderIcon={SyncSettings}>
+                    {t('sync', 'Sync')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()} aria-label={ariaLabel}>
+                <TableHead>
+                  <TableRow>
+                    {tableHeaders.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => {
+                        if (statusKeys.includes(cell.info.header)) {
+                          const isActive = cell.value === t('yes', 'Yes');
+                          return (
+                            <TableCell key={cell.id}>
+                              <Tag type={isActive ? 'green' : 'gray'} size="sm">
+                                {cell.value}
+                              </Tag>
+                            </TableCell>
+                          );
+                        }
+                        return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          );
+        }}
+      </DataTable>
+      <Pagination
+        itemsPerPageText={t('itemsPerPage', 'Items per page:')}
+        forwardText={t('nextPage', 'Next page')}
+        backwardText={t('previousPage', 'Previous page')}
+        itemRangeText={(min, max, total) => t('minMaxItems', '{{min}}-{{max}} of {{total}} items', { min, max, total })}
+        pageRangeText={(_current, total) => t('pageRangeText', 'of {{count}} pages', { count: total })}
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes?.length > 0 ? pageSizes : PAGE_SIZE_OPTIONS}
+        totalItems={totalCount ?? 0}
+        onChange={handlePaginationChange}
+      />
+    </div>
+  );
+};
+
+export default EtimsCatalogTable;

package/src/reference-data/etims-catalog-table.scss

@@ -0,0 +1,16 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.dataTableContainer {
+  height: 100%;
+  margin: layout.$layout-01;
+}
+
+.container {
+  margin: layout.$layout-01;
+  border: 1px solid colors.$gray-20;
+
+  :global(.cds--table-toolbar) {
+    position: relative !important;
+  }
+}

package/src/reference-data/etims-code-table.component.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useMemo } from 'react';
+import { type DataTableHeader } from '@carbon/react';
+import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import EtimsCatalogTable, { type CatalogRow } from './etims-catalog-table.component';
+import { useEtimsCodes } from './etims-reference-data.resource';
+import type { EtimsCode } from './etims-reference-data.types';
+
+const displayValue = (value?: string | number | boolean | null) => {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  return String(value);
+};
+
+const formatNullableDatetime = (value?: string | null) => {
+  if (!value) {
+    return '--';
+  }
+
+  try {
+    return formatDatetime(parseDate(value), { mode: 'standard', noToday: true });
+  } catch {
+    return value;
+  }
+};
+
+const EtimsCodeTable: React.FC = () => {
+  const { t } = useTranslation();
+  const handleSync = () => {
+    const dispose = showModal('etims-kra-meta-data-sync-modal', {
+      onClose: () => dispose(),
+      category: 'CODE_LIST',
+      heading: t('syncCodeList', 'Sync code list'),
+      message: t(
+        'syncCodeListMessage',
+        'Synchronization of code list from KRA, this will update code list to latest version, Do you want to proceed?',
+      ),
+    });
+  };
+
+  const headers: Array<DataTableHeader> = useMemo(
+    () => [
+      { key: 'codeCategory', header: t('codeCategory', 'Category') },
+      { key: 'codeCategoryName', header: t('codeCategoryName', 'Category name') },
+      { key: 'code', header: t('code', 'Code') },
+      { key: 'name', header: t('name', 'Name') },
+      { key: 'active', header: t('active', 'Active') },
+      { key: 'dateCreated', header: t('dateCreated', 'Date created') },
+    ],
+    [t],
+  );
+
+  const mapRows = useCallback(
+    (codes: EtimsCode[]): Array<CatalogRow> =>
+      codes.map((code, index) => ({
+        id: code.uuid ?? `etims-code-${index}`,
+        codeCategory: displayValue(code.codeCategory),
+        codeCategoryName: displayValue(code.codeCategoryName),
+        code: displayValue(code.code),
+        name: displayValue(code.name),
+        active: code.active ? t('yes', 'Yes') : t('no', 'No'),
+        dateCreated: formatNullableDatetime(code.dateCreated),
+      })),
+    [t],
+  );
+
+  return (
+    <EtimsCatalogTable
+      title={t('etimsCodes', 'eTIMS codes')}
+      description={t(
+        'etimsCodesDescription',
+        'Synchronized KRA reference codes such as tax types, item types, and units. Search by name, code, or category.',
+      )}
+      searchPlaceholder={t('searchEtimsCodes', 'Search eTIMS codes')}
+      errorTitle={t('etimsCodesError', 'eTIMS codes')}
+      ariaLabel={t('etimsCodes', 'eTIMS codes')}
+      headers={headers}
+      fetchPage={useEtimsCodes}
+      mapRows={mapRows}
+      onSync={handleSync}
+    />
+  );
+};
+
+export default EtimsCodeTable;

package/src/reference-data/etims-item-class-table.component.tsx

@@ -0,0 +1,86 @@
+import React, { useCallback, useMemo } from 'react';
+import { type DataTableHeader } from '@carbon/react';
+import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import EtimsCatalogTable, { type CatalogRow } from './etims-catalog-table.component';
+import { useEtimsItemClasses } from './etims-reference-data.resource';
+import type { EtimsItemClass } from './etims-reference-data.types';
+
+const displayValue = (value?: string | number | boolean | null) => {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  return String(value);
+};
+
+const formatNullableDatetime = (value?: string | null) => {
+  if (!value) {
+    return '--';
+  }
+
+  try {
+    return formatDatetime(parseDate(value), { mode: 'standard', noToday: true });
+  } catch {
+    return value;
+  }
+};
+
+const EtimsItemClassTable: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleSync = () => {
+    const dispose = showModal('etims-kra-meta-data-sync-modal', {
+      onClose: () => dispose(),
+      category: 'CLASS_LIST',
+      heading: t('syncCodeList', 'Sync class list'),
+      message: t(
+        'syncClassListMessage',
+        'Synchronization of class list from KRA, this will update class list to latest version, Do you want to proceed?',
+      ),
+    });
+  };
+
+  const headers: Array<DataTableHeader> = useMemo(
+    () => [
+      { key: 'itemClassCode', header: t('itemClassCode', 'Item class code') },
+      { key: 'name', header: t('name', 'Name') },
+      { key: 'description', header: t('description', 'Description') },
+      { key: 'active', header: t('active', 'Active') },
+      { key: 'dateCreated', header: t('dateCreated', 'Date created') },
+    ],
+    [t],
+  );
+
+  const mapRows = useCallback(
+    (itemClasses: EtimsItemClass[]): Array<CatalogRow> =>
+      itemClasses.map((itemClass, index) => ({
+        id: itemClass.uuid ?? `etims-item-class-${index}`,
+        itemClassCode: displayValue(itemClass.itemClassCode),
+        name: displayValue(itemClass.name),
+        description: displayValue(itemClass.description),
+        active: itemClass.active ? t('yes', 'Yes') : t('no', 'No'),
+        dateCreated: formatNullableDatetime(itemClass.dateCreated),
+      })),
+    [t],
+  );
+
+  return (
+    <EtimsCatalogTable
+      title={t('etimsItemClasses', 'eTIMS item classes')}
+      description={t(
+        'etimsItemClassesDescription',
+        'Synchronized KRA item classes used when mapping and registering cashier items. Search by name or item class code.',
+      )}
+      searchPlaceholder={t('searchEtimsItemClasses', 'Search eTIMS item classes')}
+      errorTitle={t('etimsItemClassesError', 'eTIMS item classes')}
+      ariaLabel={t('etimsItemClasses', 'eTIMS item classes')}
+      headers={headers}
+      fetchPage={useEtimsItemClasses}
+      mapRows={mapRows}
+      onSync={handleSync}
+    />
+  );
+};
+
+export default EtimsItemClassTable;

package/src/reference-data/etims-reference-data-dashboard.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { UserHasAccess } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import Header from '../components/header/header.component';
+import EtimsCodeTable from './etims-code-table.component';
+import EtimsItemClassTable from './etims-item-class-table.component';
+import styles from './etims-reference-data-dashboard.scss';
+
+const EtimsReferenceDataDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.dashboardContainer}>
+      <Header title={t('referenceData', 'Reference data')} />
+      <UserHasAccess privilege="Manage eTIMS Configuration">
+        <div className={styles.dashboard}>
+          <Tabs>
+            <TabList aria-label={t('referenceData', 'Reference data')} contained>
+              <Tab>{t('etimsCodes', 'eTIMS codes')}</Tab>
+              <Tab>{t('etimsItemClasses', 'eTIMS item classes')}</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel className={styles.tabPanel}>
+                <EtimsCodeTable />
+              </TabPanel>
+              <TabPanel className={styles.tabPanel}>
+                <EtimsItemClassTable />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      </UserHasAccess>
+    </div>
+  );
+};
+
+export default EtimsReferenceDataDashboard;

package/src/reference-data/etims-reference-data-dashboard.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  padding: layout.$spacing-05;
+}
+
+.tabPanel {
+  padding: 0;
+}

package/src/reference-data/etims-reference-data.resource.ts

@@ -0,0 +1,40 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, useOpenmrsPagination } from '@openmrs/esm-framework';
+import type { AllowedCategory, EtimsCode, EtimsItemClass, SyncKRAMetaDataResponse } from './etims-reference-data.types';
+
+export const etimsCodeUrl = `${restBaseUrl}/cashier/etimsCode`;
+export const etimsItemClassUrl = `${restBaseUrl}/cashier/etimsItemClass`;
+
+const buildCatalogParams = (searchTerm?: string, extra?: Record<string, string>) => {
+  const params = new URLSearchParams({ v: 'default', active: 'true', ...extra });
+  const trimmed = searchTerm?.trim();
+
+  if (trimmed) {
+    params.set('q', trimmed);
+  }
+
+  return params;
+};
+
+export function useEtimsCodes(pageSize: number = 10, searchTerm?: string) {
+  const params = buildCatalogParams(searchTerm, { catalog: 'CODE_LIST' });
+  return useOpenmrsPagination<EtimsCode>(`${etimsCodeUrl}?${params.toString()}`, pageSize);
+}
+
+export function useEtimsItemClasses(pageSize: number = 10, searchTerm?: string) {
+  const params = buildCatalogParams(searchTerm);
+  return useOpenmrsPagination<EtimsItemClass>(`${etimsItemClassUrl}?${params.toString()}`, pageSize);
+}
+
+export function syncReferenceDataFromKRA(category: AllowedCategory) {
+  const url = `${restBaseUrl}/cashier/etimsReferenceSync`;
+  const syncBody = {
+    categories: [category],
+  };
+  return openmrsFetch<FetchResponse<SyncKRAMetaDataResponse>>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(syncBody),
+  });
+}

package/src/reference-data/etims-reference-data.types.ts

@@ -0,0 +1,38 @@
+export interface EtimsCode {
+  uuid: string;
+  display?: string;
+  codeCategory?: string | null;
+  codeCategoryName?: string | null;
+  code?: string | null;
+  name?: string | null;
+  active?: boolean | null;
+  description?: string | null;
+  voided?: boolean;
+  dateCreated?: string | null;
+}
+
+export interface EtimsItemClass {
+  uuid: string;
+  display?: string;
+  itemClassCode?: string | null;
+  name?: string | null;
+  active?: boolean | null;
+  description?: string | null;
+  voided?: boolean;
+  dateCreated?: string | null;
+}
+
+export type AllowedCategory = 'CODE_LIST' | 'CLASS_LIST';
+
+interface ResultDetails {
+  category: AllowedCategory;
+  success: boolean;
+  recordCount: number;
+  message: string | null;
+  at: number;
+}
+
+export interface SyncKRAMetaDataResponse {
+  total: number;
+  results: Partial<Record<AllowedCategory, ResultDetails>>;
+}

package/src/reference-data/etims-sync-meta.modal.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { syncReferenceDataFromKRA } from './etims-reference-data.resource';
+import { AllowedCategory } from './etims-reference-data.types';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+type EtimsSyncMetaDataModalProps = {
+  heading: string;
+  message: string;
+  category: AllowedCategory;
+  onClose: () => void;
+};
+
+const EtimsSyncMetaDataModal: React.FC<EtimsSyncMetaDataModalProps> = ({ message, heading, category, onClose }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      const response = await syncReferenceDataFromKRA(category);
+      if (response.ok) {
+        showSnackbar({
+          title: t('syncKRAMetaData', 'Successful synchronization'),
+          subtitle: t('syncKRAMetaDataSubTitle', 'Synchronization of {{category}} is successful', { category }),
+          kind: 'success',
+          timeoutInMs: 5000,
+        });
+      }
+    } catch (error) {
+      showSnackbar({
+        title: t('syncKRAMetaDataError', 'Synchronization of KRA failed'),
+        subtitle: t('syncKRAMetaDataSubTitleError', 'Failed to sync meta with error {errorCode}', {
+          errorCode: JSON.stringify(error),
+        }),
+      });
+    } finally {
+      onClose();
+    }
+  };
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{heading}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>{message}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={handleSubmit} disabled={isSubmitting}>
+          {isSubmitting ? <InlineLoading description={t('syncing', 'Syncing...')} /> : heading}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default EtimsSyncMetaDataModal;

package/src/root.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useLeftNav } from '@openmrs/esm-framework';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import LeftPanel from './components/side-menu/left-panel.component';
+import EtimsCreditNoteDashboard from './credit-note/etims-credit-note-dashboard.component';
+import EtimsGlobalPropertiesDashboard from './global-properties/etims-global-properties-dashboard.component';
+import EtimsItemMappingDashboard from './item-mapping/etims-item-mapping-dashboard.component';
+import EtimsReferenceDataDashboard from './reference-data/etims-reference-data-dashboard.component';
+import EtimsStatusDashboard from './status/etims-status-dashboard.component';
+import EtimsTransactionDashboard from './transaction/etims-transaction-dashboard.component';
+import styles from './root.scss';
+
+const Root: React.FC = () => {
+  const etimsBasename = `${window.getOpenmrsSpaBase()}etims`;
+
+  useLeftNav({
+    name: 'etims-left-panel-slot',
+    basePath: window.spaBase,
+  });
+
+  return (
+    <BrowserRouter basename={etimsBasename}>
+      <LeftPanel />
+      <main className={styles.container}>
+        <Routes>
+          <Route path="/" element={<EtimsStatusDashboard />} />
+          <Route path="/reference-data" element={<EtimsReferenceDataDashboard />} />
+          <Route path="/item-mappings" element={<EtimsItemMappingDashboard />} />
+          <Route path="/transactions" element={<EtimsTransactionDashboard />} />
+          <Route path="/credit-notes" element={<EtimsCreditNoteDashboard />} />
+          <Route path="/global-properties" element={<EtimsGlobalPropertiesDashboard />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+
+.container {
+  background-color: colors.$white-0;
+  height: calc(100vh - var(--omrs-topnav-height));
+  overflow-y: auto;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}