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

package/src/item-mapping/etims-item-mapping-table.component.tsx

@@ -0,0 +1,398 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBatchAction,
+  TableBatchActions,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableSelectAll,
+  TableSelectRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  type DataTableHeader,
+} from '@carbon/react';
+import { Add, Send } from '@carbon/react/icons';
+import {
+  ErrorCard,
+  formatDatetime,
+  launchWorkspace2,
+  parseDate,
+  showModal,
+  useDebounce,
+  usePaginationInfo,
+  UserHasAccess,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useEtimsItemMappings } from './etims-item-mapping.resource';
+import type { EtimsItemMapping, EtimsRegistrationStatus } from './etims-item-mapping.types';
+import styles from './etims-item-mapping-table.scss';
+
+const DEFAULT_PAGE_SIZE = 10;
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+type StatusFilter = 'ALL' | EtimsRegistrationStatus;
+
+type MappingRow = {
+  id: string;
+  itemName: string;
+  itemCode: string;
+  source: string;
+  itemClassCode: string;
+  taxType: string;
+  itemType: string;
+  registrationStatus: string;
+  resultMessage: string;
+  registeredAt: string;
+};
+
+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 statusTagType = (status?: string | null): 'green' | 'red' | 'blue' | 'gray' => {
+  if (status === 'REGISTERED') {
+    return 'green';
+  }
+  if (status === 'FAILED') {
+    return 'red';
+  }
+  if (status === 'PENDING') {
+    return 'blue';
+  }
+  return 'gray';
+};
+
+const sourceLabel = (mapping: EtimsItemMapping, t: ReturnType<typeof useTranslation>['t']) => {
+  if (mapping.stockItemId) {
+    return t('stockItemSource', 'Stock #{{id}}', { id: mapping.stockItemId });
+  }
+  if (mapping.billableServiceId) {
+    return t('billableServiceSource', 'Service #{{id}}', { id: mapping.billableServiceId });
+  }
+  return '--';
+};
+
+const EtimsItemMappingTable: React.FC = () => {
+  const { t } = useTranslation();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const { mappings, error, isLoading, mutate } = useEtimsItemMappings();
+
+  const statusItems = useMemo(
+    () => [
+      { id: 'ALL', label: t('allStatuses', 'All statuses') },
+      { id: 'PENDING', label: t('pending', 'Pending') },
+      { id: 'REGISTERED', label: t('registered', 'Registered') },
+      { id: 'FAILED', label: t('failed', 'Failed') },
+    ],
+    [t],
+  );
+
+  const filteredMappings = useMemo(() => {
+    const query = debouncedSearchTerm.trim().toLowerCase();
+
+    return mappings.filter((mapping) => {
+      if (statusFilter !== 'ALL' && mapping.registrationStatus !== statusFilter) {
+        return false;
+      }
+
+      if (!query) {
+        return true;
+      }
+
+      return [
+        mapping.itemName,
+        mapping.itemCode,
+        mapping.itemClassCode,
+        mapping.taxType,
+        mapping.itemType,
+        mapping.registrationResultMessage,
+        mapping.billableServiceId,
+        mapping.stockItemId,
+      ].some((value) => displayValue(value).toLowerCase().includes(query));
+    });
+  }, [debouncedSearchTerm, mappings, statusFilter]);
+
+  const pagedMappings = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return filteredMappings.slice(start, start + pageSize);
+  }, [filteredMappings, page, pageSize]);
+
+  const { pageSizes } = usePaginationInfo(DEFAULT_PAGE_SIZE, filteredMappings.length, page, pagedMappings.length);
+
+  const headers: Array<DataTableHeader> = useMemo(
+    () => [
+      { key: 'itemName', header: t('itemName', 'Item name') },
+      { key: 'itemCode', header: t('itemCode', 'Item code') },
+      { key: 'source', header: t('source', 'Source') },
+      { key: 'itemClassCode', header: t('itemClassCode', 'Item class') },
+      { key: 'taxType', header: t('taxType', 'Tax type') },
+      { key: 'itemType', header: t('itemType', 'Item type') },
+      { key: 'registrationStatus', header: t('registrationStatus', 'Registration') },
+      { key: 'resultMessage', header: t('resultMessage', 'Last result') },
+      { key: 'registeredAt', header: t('registeredAt', 'Registered at') },
+    ],
+    [t],
+  );
+
+  const tableRows: Array<MappingRow> = useMemo(
+    () =>
+      pagedMappings.map((mapping, index) => ({
+        id: mapping.uuid ?? `mapping-${index}`,
+        itemName: displayValue(mapping.itemName),
+        itemCode: displayValue(mapping.itemCode),
+        source: sourceLabel(mapping, t),
+        itemClassCode: displayValue(mapping.itemClassCode),
+        taxType: displayValue(mapping.taxType),
+        itemType: displayValue(mapping.itemType),
+        registrationStatus: displayValue(mapping.registrationStatus),
+        resultMessage: displayValue(mapping.registrationResultMessage),
+        registeredAt: formatNullableDatetime(mapping.registeredAt),
+      })),
+    [pagedMappings, t],
+  );
+
+  const openForm = useCallback(
+    (mapping?: EtimsItemMapping) => {
+      launchWorkspace2('etims-item-mapping-form', {
+        mapping,
+        mutateMappings: mutate,
+      });
+    },
+    [mutate],
+  );
+
+  const openRegisterModal = useCallback(
+    (scope: 'one' | 'selected' | 'all', options?: { uuid?: string; mappingUuids?: string[]; itemName?: string }) => {
+      const dispose = showModal('etims-register-item-mapping-modal', {
+        close: () => dispose(),
+        scope,
+        uuid: options?.uuid,
+        mappingUuids: options?.mappingUuids,
+        itemName: options?.itemName,
+        onRegistered: () => mutate(),
+      });
+    },
+    [mutate],
+  );
+
+  const openVoidModal = useCallback(
+    (mapping: EtimsItemMapping) => {
+      const dispose = showModal('etims-void-item-mapping-modal', {
+        close: () => dispose(),
+        uuid: mapping.uuid,
+        itemName: mapping.itemName ?? mapping.itemCode ?? mapping.uuid,
+        onVoided: () => mutate(),
+      });
+    },
+    [mutate],
+  );
+
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement> | '', value?: string) => {
+    setSearchTerm(typeof event === 'string' ? value ?? '' : event.target.value);
+    setPage(1);
+  }, []);
+
+  const handlePaginationChange = useCallback(
+    ({ page: nextPage, pageSize: nextSize }: { page: number; pageSize: number }) => {
+      if (nextSize !== pageSize) {
+        setPageSize(nextSize);
+      }
+      setPage(nextPage);
+    },
+    [pageSize],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={styles.container}>
+        <DataTableSkeleton headers={headers} rowCount={5} showHeader showToolbar />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.dataTableContainer}>
+        <ErrorCard error={error} headerTitle={t('itemMappingsError', 'Item mappings')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <DataTable rows={tableRows} headers={headers} size="sm" useZebraStyles isSortable>
+        {({
+          rows,
+          headers: tableHeaders,
+          getHeaderProps,
+          getRowProps,
+          getSelectionProps,
+          getToolbarProps,
+          getBatchActionProps,
+          getTableProps,
+          getTableContainerProps,
+          selectedRows,
+        }) => {
+          const batchActionProps = getBatchActionProps();
+
+          return (
+            <TableContainer
+              title={t('itemMappings', 'Item mappings')}
+              description={t(
+                'itemMappingsDescription',
+                'Map cashier billable services and stock items to KRA item codes, then sync them to eTIMS.',
+              )}
+              {...getTableContainerProps()}>
+              <TableToolbar {...getToolbarProps()}>
+                <TableBatchActions {...batchActionProps}>
+                  <UserHasAccess privilege="Register eTIMS Items">
+                    <TableBatchAction
+                      renderIcon={Send}
+                      onClick={() =>
+                        openRegisterModal('selected', { mappingUuids: selectedRows.map((row) => row.id) })
+                      }>
+                      {t('syncSelectedToKra', 'Sync selected to KRA')}
+                    </TableBatchAction>
+                  </UserHasAccess>
+                </TableBatchActions>
+                <TableToolbarContent aria-hidden={batchActionProps.shouldShowBatchActions}>
+                  <TableToolbarSearch
+                    persistent
+                    onChange={handleSearchChange}
+                    placeholder={t('searchItemMappings', 'Search mappings')}
+                  />
+                  <Dropdown
+                    size="sm"
+                    id="registration-status-filter"
+                    className={styles.statusFilter}
+                    label={t('registrationStatus', 'Registration')}
+                    titleText=""
+                    items={statusItems}
+                    itemToString={(item) => item?.label ?? ''}
+                    selectedItem={statusItems.find((item) => item.id === statusFilter)}
+                    onChange={({ selectedItem }) => {
+                      setStatusFilter((selectedItem?.id as StatusFilter) ?? 'ALL');
+                      setPage(1);
+                    }}
+                  />
+                  <UserHasAccess privilege="Register eTIMS Items">
+                    <Button kind="tertiary" size="sm" renderIcon={Send} onClick={() => openRegisterModal('all')}>
+                      {t('syncAllToKra', 'Sync all to KRA')}
+                    </Button>
+                  </UserHasAccess>
+                  <Button kind="primary" size="sm" renderIcon={Add} onClick={() => openForm()}>
+                    {t('addItemMapping', 'Add item mapping')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()} aria-label={t('itemMappings', 'Item mappings')}>
+                <TableHead>
+                  <TableRow>
+                    <TableSelectAll {...getSelectionProps()} />
+                    {tableHeaders.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('rowActions', 'Row actions')} />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    const mapping = pagedMappings[index];
+
+                    return (
+                      <TableRow {...getRowProps({ row })}>
+                        <TableSelectRow {...getSelectionProps({ row })} />
+                        {row.cells.map((cell) => {
+                          if (cell.info.header === 'registrationStatus') {
+                            return (
+                              <TableCell key={cell.id}>
+                                <Tag type={statusTagType(cell.value)} size="sm">
+                                  {cell.value}
+                                </Tag>
+                              </TableCell>
+                            );
+                          }
+
+                          return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                        })}
+                        <TableCell className="cds--table-column-menu">
+                          <OverflowMenu flipped size="sm" aria-label={t('rowActions', 'Row actions')}>
+                            <OverflowMenuItem itemText={t('edit', 'Edit')} onClick={() => openForm(mapping)} />
+                            <UserHasAccess privilege="Register eTIMS Items">
+                              <OverflowMenuItem
+                                itemText={t('syncToKra', 'Sync to KRA')}
+                                onClick={() =>
+                                  openRegisterModal('one', {
+                                    uuid: mapping.uuid,
+                                    itemName: mapping.itemName ?? mapping.itemCode ?? mapping.uuid,
+                                  })
+                                }
+                              />
+                            </UserHasAccess>
+                            <OverflowMenuItem
+                              isDelete
+                              itemText={t('void', 'Void')}
+                              onClick={() => openVoidModal(mapping)}
+                            />
+                          </OverflowMenu>
+                        </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={page}
+        pageSize={pageSize}
+        pageSizes={pageSizes?.length > 0 ? pageSizes : PAGE_SIZE_OPTIONS}
+        totalItems={filteredMappings.length}
+        onChange={handlePaginationChange}
+      />
+    </div>
+  );
+};
+
+export default EtimsItemMappingTable;

package/src/item-mapping/etims-item-mapping-table.scss

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