@kenyaemr/esm-billing-app 5.4.5-pre.607 → 5.4.5-pre.611

package/src/visits/visits.component.tsx

@@ -1,220 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  DataTable,
-  DataTableSkeleton,
-  Layer,
-  OverflowMenu,
-  OverflowMenuItem,
-  Pagination,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableToolbar,
-  TableToolbarContent,
-  TableToolbarSearch,
-  Tile,
-  type DataTableHeader,
-} from '@carbon/react';
-import { FilterRemove } from '@carbon/react/icons';
-import {
-  ErrorState,
-  formatDatetime,
-  isDesktop,
-  launchWorkspace2,
-  parseDate,
-  useLayoutType,
-} from '@openmrs/esm-framework';
-import { EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
-import { useActiveVisits } from './visits.resource';
-import VisitFilters, { getDateRange, type VisitFilterValues } from './visits-filters.component';
-import styles from './visits.scss';
-
-const DEFAULT_FILTERS: VisitFilterValues = {
-  dateRangePreset: 'today',
-};
-
-const headers: Array<DataTableHeader> = [
-  { key: 'patientName', header: 'Patient name' },
-  { key: 'visitType', header: 'Visit type' },
-  { key: 'location', header: 'Location' },
-  { key: 'startDatetime', header: 'Start date' },
-];
-
-const ActiveVisit: React.FC = () => {
-  const { t } = useTranslation();
-  const layout = useLayoutType();
-  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-
-  const [filters, setFilters] = useState<VisitFilterValues>(DEFAULT_FILTERS);
-  const [pageSize, setPageSize] = useState(10);
-
-  const [fromDate, toDate] = getDateRange(filters);
-  const { visits, isLoading, error, pagination } = useActiveVisits({ fromDate, toDate, pageSize });
-  const { goTo, currentPage, totalCount } = pagination;
-  const { pageSizes } = usePaginationInfo(pageSize, totalCount, currentPage, visits.length);
-
-  const rows = useMemo(
-    () =>
-      visits.map((visit) => ({
-        id: visit.uuid,
-        patientName: visit.patient?.display?.split('-')?.slice(1)?.join('-')?.trim() || visit.patient?.display || '--',
-        visitType: visit.visitType?.display ?? '--',
-        location: visit.location?.display ?? '--',
-        startDatetime: visit.startDatetime ? formatDatetime(parseDate(visit.startDatetime), { mode: 'wide' }) : '--',
-      })),
-    [visits, t],
-  );
-
-  const visitsByUuid = useMemo(() => new Map(visits.map((visit) => [visit.uuid, visit])), [visits]);
-
-  if (isLoading) {
-    return (
-      <div className={styles.loaderContainer}>
-        <DataTableSkeleton
-          rowCount={pageSize}
-          showHeader={false}
-          showToolbar={false}
-          zebra
-          columnCount={headers.length}
-        />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={styles.errorContainer}>
-        <Layer>
-          <ErrorState error={error} headerTitle={t('activeVisits', 'Active visits')} />
-        </Layer>
-      </div>
-    );
-  }
-
-  if (visits.length === 0) {
-    return (
-      <div className={styles.visitsListContainer}>
-        <VisitFilters values={filters} onChange={setFilters} />
-        <Layer className={styles.emptyStateContainer}>
-          <Tile className={styles.tile}>
-            <div className={styles.illo}>
-              <EmptyDataIllustration />
-            </div>
-            <p className={styles.content}>
-              {t('noActiveVisitsInRange', 'There are no active visits within the selected date range.')}
-            </p>
-            <Button kind="ghost" size="sm" renderIcon={FilterRemove} onClick={() => setFilters(DEFAULT_FILTERS)}>
-              {t('clearFilters', 'Clear filters')}
-            </Button>
-          </Tile>
-        </Layer>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.visitsListContainer}>
-      <VisitFilters values={filters} onChange={setFilters} />
-      <DataTable isSortable rows={rows} headers={headers} size={responsiveSize} useZebraStyles>
-        {({
-          rows: tableRows,
-          headers: tableHeaders,
-          getHeaderProps,
-          getRowProps,
-          getToolbarProps,
-          getTableProps,
-          getTableContainerProps,
-          onInputChange,
-        }) => (
-          <TableContainer
-            title={t('activeVisits', 'Active visits')}
-            description={t('activeVisitsDescription', 'Patients with an ongoing visit within the selected date range.')}
-            {...getTableContainerProps()}>
-            <TableToolbar {...getToolbarProps()}>
-              <TableToolbarContent>
-                <TableToolbarSearch
-                  persistent
-                  onChange={(e) => onInputChange(e as React.ChangeEvent<HTMLInputElement>)}
-                  placeholder={t('searchVisits', 'Search visits')}
-                />
-              </TableToolbarContent>
-            </TableToolbar>
-            <Table {...getTableProps()} aria-label={t('activeVisits', 'Active visits')}>
-              <TableHead>
-                <TableRow>
-                  {tableHeaders.map((header) => (
-                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
-                  ))}
-                  <TableHeader aria-label={t('visitActions', 'Visit actions')} />
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {tableRows.map((row) => {
-                  const visit = visitsByUuid.get(row.id);
-                  if (!visit) {
-                    return null;
-                  }
-
-                  return (
-                    <TableRow {...getRowProps({ row })} key={row.id}>
-                      {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>{cell.value}</TableCell>
-                      ))}
-                      <TableCell className="cds--table-column-menu">
-                        <div className={styles.overflowMenuItemContainer}>
-                          <OverflowMenu aria-label={t('visitActions', 'Visit actions')} size="sm" flipped>
-                            <OverflowMenuItem
-                              itemText={t('manageVisit', 'Manage visit')}
-                              onClick={() =>
-                                launchWorkspace2(
-                                  'visit-attributes-workspace',
-                                  {
-                                    patientUuid: visit.patient?.uuid,
-                                    visit,
-                                    workspaceTitle: t('manageVisit', 'Manage visit'),
-                                  },
-                                  {},
-                                  {},
-                                )
-                              }
-                            />
-                          </OverflowMenu>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      </DataTable>
-      <Pagination
-        forwardText={t('nextPage', 'Next page')}
-        backwardText={t('previousPage', 'Previous page')}
-        page={currentPage ?? 1}
-        pageSize={pageSize}
-        pageSizes={pageSizes}
-        totalItems={totalCount}
-        className={styles.pagination}
-        size={responsiveSize}
-        onChange={({ pageSize: newPageSize, page: newPage }) => {
-          if (newPageSize !== pageSize) {
-            setPageSize(newPageSize);
-          }
-          if (newPage !== currentPage) {
-            goTo(newPage);
-          }
-        }}
-      />
-    </div>
-  );
-};
-
-export default ActiveVisit;

package/src/visits/visits.resource.ts

@@ -1,66 +0,0 @@
-import { restBaseUrl, useOpenmrsPagination, type Visit } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
-
-const activeVisitsRepresentation =
-  'custom:(uuid,startDatetime,stopDatetime,patient:(uuid,display),visitType:(uuid,display),location:(uuid,display))';
-
-export const useActiveVisits = (
-  options: {
-    fromDate?: Date;
-    toDate?: Date;
-    pageSize?: number;
-  } = {},
-) => {
-  const { fromDate = dayjs().startOf('day').toDate(), toDate = dayjs().endOf('day').toDate(), pageSize = 10 } = options;
-
-  const url =
-    `${restBaseUrl}/visit?includeInactive=false&v=${activeVisitsRepresentation}` +
-    `&fromStartDate=${dayjs(fromDate).format('YYYY-MM-DD')}`;
-
-  const {
-    data: visits,
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-    totalPages,
-    totalCount,
-    currentPage,
-    currentPageSize,
-    paginated,
-    showNextButton,
-    showPreviousButton,
-    goTo,
-    goToNext,
-    goToPrevious,
-  } = useOpenmrsPagination<Visit>(url, pageSize, {
-    swrConfig: { errorRetryCount: 2, keepPreviousData: true, revalidateOnFocus: true },
-  });
-
-  // The endpoint only filters by a lower `fromStartDate` bound, so enforce the upper bound here.
-  const toDateMs = dayjs(toDate).valueOf();
-  const filteredVisits = (visits ?? []).filter(
-    (visit) => visit.startDatetime && dayjs(visit.startDatetime).valueOf() <= toDateMs,
-  );
-
-  return {
-    visits: filteredVisits,
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-    pagination: {
-      totalPages,
-      totalCount,
-      currentPage,
-      currentPageSize,
-      paginated,
-      showNextButton,
-      showPreviousButton,
-      goTo,
-      goToNext,
-      goToPrevious,
-      pageSize,
-    },
-  };
-};

package/src/visits/visits.scss

@@ -1,129 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.container {
-  margin-top: layout.$spacing-05;
-}
-
-.emptyStateContainer,
-.loaderContainer,
-.errorContainer {
-  @extend .container;
-}
-
-.visitsListContainer {
-  background-color: $ui-02;
-  border: 1px solid $ui-03;
-  width: 100%;
-  margin: 0 auto;
-  padding-bottom: 0;
-
-  :global(.cds--table-toolbar) {
-    position: relative !important;
-  }
-}
-
-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: layout.$spacing-04 layout.$spacing-05;
-  background-color: $ui-02;
-}
-
-.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);
-    }
-  }
-}
-
-.backgroundDataFetchingIndicator {
-  align-items: center;
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
-
-  &:global(.cds--inline-loading) {
-    max-height: 1rem;
-  }
-}
-
-.toolbarContent {
-  align-items: flex-end;
-  gap: layout.$spacing-05;
-}
-
-.dateRangePicker {
-  :global(.cds--date-picker-container) {
-    max-width: 12rem;
-  }
-}
-
-.pagination {
-  overflow: hidden;
-
-  &:global(.cds--pagination) {
-    border-top: none;
-  }
-}
-
-.tile {
-  text-align: center;
-  border: 1px solid $ui-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;
-}
-
-.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;
-}
-
-.overflowMenuItemContainer {
-  display: flex;
-  justify-content: flex-end;
-}