@kenyaemr/esm-reports-app 5.4.4-pre.483

package/src/components/report-history/report-history.component.tsx

@@ -0,0 +1,334 @@
+import React, { useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  InlineNotification,
+  Pagination,
+  SkeletonText,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+  type DataTableHeader,
+} from '@carbon/react';
+import { ArrowLeft, Play, View } from '@carbon/react/icons';
+import '@carbon/charts/styles.css';
+import {
+  ErrorState,
+  formatDatetime,
+  launchWorkspace2,
+  parseDate,
+  useDebounce,
+  usePagination,
+} from '@openmrs/esm-framework';
+
+import { useReportDefinition } from '../../hooks/useReportDefinition';
+import { useReportRequests } from '../../hooks/useReportRequests';
+import { type ReportRequest } from '../../types';
+import ReportDownloadMenu from '../report-download-menu/report-download-menu.component';
+import styles from './report-history.scss';
+
+const PAGE_SIZE = 10;
+const COMPLETED = 'COMPLETED';
+const FAILED = 'FAILED';
+
+const statusTagType = (status: string): 'green' | 'blue' | 'red' | 'gray' => {
+  switch (status) {
+    case COMPLETED:
+      return 'green';
+    case FAILED:
+      return 'red';
+    case 'PROCESSING':
+    case 'SCHEDULED':
+    case 'REQUESTED':
+      return 'blue';
+    default:
+      return 'gray';
+  }
+};
+
+const durationMs = (request: ReportRequest): number | null => {
+  if (!request.evaluateStartDatetime || !request.evaluateCompleteDatetime) {
+    return null;
+  }
+  return parseDate(request.evaluateCompleteDatetime).getTime() - parseDate(request.evaluateStartDatetime).getTime();
+};
+
+const formatDuration = (ms: number | null): string => {
+  if (ms === null) {
+    return '--';
+  }
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = `${Math.floor(totalSeconds / 3600)}`.padStart(2, '0');
+  const minutes = `${Math.floor((totalSeconds % 3600) / 60)}`.padStart(2, '0');
+  const seconds = `${totalSeconds % 60}`.padStart(2, '0');
+  const hundredths = `${Math.floor((ms % 1000) / 10)}`.padStart(2, '0');
+  return `${hours}:${minutes}:${seconds}.${hundredths}`;
+};
+
+const ReportHistory: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { reportUuid = '' } = useParams();
+
+  const { report, isLoading: isLoadingReport, error: reportError } = useReportDefinition(reportUuid);
+  const { requests, isLoading: isLoadingRequests, error: requestsError } = useReportRequests(reportUuid);
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const sortedRequests = useMemo(
+    () => [...requests].sort((a, b) => parseDate(b.requestDate).getTime() - parseDate(a.requestDate).getTime()),
+    [requests],
+  );
+
+  const metrics = useMemo(() => {
+    const total = sortedRequests.length;
+    const completed = sortedRequests.filter((request) => request.status === COMPLETED);
+    const failed = sortedRequests.filter((request) => request.status === FAILED);
+    const durations = sortedRequests.map(durationMs).filter((value): value is number => value !== null);
+    const avgMs = durations.length ? durations.reduce((sum, value) => sum + value, 0) / durations.length : null;
+    const successRate = total ? (completed.length / total) * 100 : 0;
+
+    return {
+      total,
+      completed: completed.length,
+      failed: failed.length,
+      pending: total - completed.length - failed.length,
+      successRate,
+      avgSeconds: avgMs !== null ? avgMs / 1000 : null,
+      lastRunBy: sortedRequests[0]?.requestedBy?.display ?? '--',
+    };
+  }, [sortedRequests]);
+
+  const filteredRequests = useMemo(() => {
+    if (!debouncedSearchTerm) {
+      return sortedRequests;
+    }
+    const term = debouncedSearchTerm.toLowerCase();
+    return sortedRequests.filter((request) =>
+      [request.requestedBy?.display, request.status, request.requestDate]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(term)),
+    );
+  }, [sortedRequests, debouncedSearchTerm]);
+
+  const { results, currentPage, goTo } = usePagination(filteredRequests, PAGE_SIZE);
+
+  const headers: Array<DataTableHeader> = useMemo(
+    () => [
+      { key: 'requestDate', header: t('requestedDateTime', 'Requested Date & Time') },
+      { key: 'requestedBy', header: t('requestedBy', 'Requested By') },
+      { key: 'status', header: t('status', 'Status') },
+      { key: 'timeTaken', header: t('timeTaken', 'Time Taken') },
+    ],
+    [t],
+  );
+
+  const rows = useMemo(
+    () =>
+      results.map((request) => ({
+        id: String(request.id),
+        requestDate: formatDatetime(parseDate(request.requestDate), { mode: 'standard' }),
+        requestedBy: request.requestedBy?.display ?? t('selfServicePortal', 'Self-Service Portal'),
+        status: request.status,
+        timeTaken: formatDuration(durationMs(request)),
+      })),
+    [results, t],
+  );
+
+  const handleRunReport = () => {
+    launchWorkspace2('report-request-workspace', { reportUuid });
+  };
+
+  if (isLoadingReport || isLoadingRequests) {
+    return (
+      <div className={styles.loadingState}>
+        <SkeletonText heading width="40%" />
+        <SkeletonText paragraph lineCount={3} />
+      </div>
+    );
+  }
+
+  if (reportError || requestsError) {
+    return (
+      <div className={styles.errorState}>
+        <ErrorState error={reportError ?? requestsError} headerTitle={t('reportHistory', 'Report History')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.breadcrumb}>
+        <button type="button" className={styles.backButton} onClick={() => navigate('/')}>
+          <ArrowLeft size={16} />
+          {t('backToAllReports', 'Back to all reports')}
+        </button>
+        <span>/</span>
+        <span>{t('reportHistory', 'Report History')}</span>
+      </div>
+
+      <div className={styles.titleRow}>
+        <div className={styles.titleGroup}>
+          <div className={styles.titleLine}>
+            <h2 className={styles.title}>{report?.name}</h2>
+            {report?.type && <Tag type="blue">{t('reportType', 'Report')}</Tag>}
+          </div>
+          {report?.description && <p className={styles.description}>{report.description}</p>}
+        </div>
+        <Button kind="primary" renderIcon={Play} onClick={handleRunReport}>
+          {t('runReportNow', 'Run Report Now')}
+        </Button>
+      </div>
+
+      <div className={styles.tiles}>
+        <Tile className={styles.tile}>
+          <p className={styles.tileLabel}>{t('totalRuns', 'Total Runs')}</p>
+          <div className={styles.tileValueRow}>
+            <span className={styles.tileValue}>{metrics.total}</span>
+          </div>
+        </Tile>
+        <Tile className={styles.tile}>
+          <p className={styles.tileLabel}>{t('successRate', 'Success Rate')}</p>
+          <div className={styles.tileValueRow}>
+            <span className={styles.tileValue}>{metrics.successRate.toFixed(1)}%</span>
+          </div>
+        </Tile>
+        <Tile className={styles.tile}>
+          <p className={styles.tileLabel}>{t('avgGenerationTime', 'Avg. Generation Time')}</p>
+          <div className={styles.tileValueRow}>
+            <span className={styles.tileValue}>
+              {metrics.avgSeconds !== null ? `${metrics.avgSeconds.toFixed(2)}s` : '--'}
+            </span>
+          </div>
+        </Tile>
+        <Tile className={styles.tile}>
+          <p className={styles.tileLabel}>{t('lastRunBy', 'Last Run By')}</p>
+          <div className={styles.lastRunBy}>
+            <span className={styles.tileValue} style={{ fontSize: '1rem' }}>
+              {metrics.lastRunBy}
+            </span>
+          </div>
+        </Tile>
+      </div>
+
+      <div className={styles.tableSection}>
+        <DataTable size="sm" rows={rows} headers={headers} isSortable useZebraStyles>
+          {({
+            rows: tableRows,
+            headers: tableHeaders,
+            getHeaderProps,
+            getRowProps,
+            getTableProps,
+            getToolbarProps,
+          }) => (
+            <TableContainer
+              title={t('reportExecutionHistory', 'Report Execution History')}
+              description={t('reportExecutionHistoryDescription', 'A list of all the runs of this report.')}>
+              <TableToolbar {...getToolbarProps()}>
+                <TableToolbarContent>
+                  <TableToolbarSearch
+                    persistent
+                    placeholder={t('searchHistory', 'Search history')}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement> | '', value?: string) => {
+                      setSearchTerm(typeof event === 'string' ? value ?? '' : event.target.value);
+                      goTo(1);
+                    }}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table {...getTableProps()} aria-label={t('reportExecutionHistory', 'Report Execution History')}>
+                <TableHead>
+                  <TableRow>
+                    {tableHeaders.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('actions', 'Actions')} />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {tableRows.map((row, index) => {
+                    const request = results[index];
+                    const isCompleted = request?.status === COMPLETED;
+                    return (
+                      <TableRow {...getRowProps({ row })} key={row.id}>
+                        {row.cells.map((cell) => {
+                          if (cell.info.header === 'status') {
+                            return (
+                              <TableCell key={cell.id}>
+                                <Tag type={statusTagType(cell.value)} size="sm">
+                                  {cell.value}
+                                </Tag>
+                              </TableCell>
+                            );
+                          }
+                          if (cell.info.header === 'timeTaken' && !isCompleted) {
+                            return (
+                              <TableCell key={cell.id}>
+                                <span className={styles.mutedText}>{t('processing', 'Processing...')}</span>
+                              </TableCell>
+                            );
+                          }
+                          return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                        })}
+                        <TableCell>
+                          <div className={styles.actionsCell}>
+                            {isCompleted ? (
+                              <>
+                                <button
+                                  type="button"
+                                  className={styles.actionLink}
+                                  onClick={() => navigate(`/report/${reportUuid}/requests/${request.id}`)}>
+                                  <View size={16} /> {t('view', 'View')}
+                                </button>
+                                <ReportDownloadMenu request={request} reportName={report?.name} />
+                              </>
+                            ) : (
+                              <span className={styles.mutedText}>{t('availableSoon', 'Available soon')}</span>
+                            )}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+        {filteredRequests.length === 0 ? (
+          <InlineNotification
+            lowContrast
+            kind="info"
+            title={t('noRuns', 'No runs yet')}
+            subtitle={t('noRunsSubtitle', 'This report has not been requested yet.')}
+          />
+        ) : (
+          <Pagination
+            page={currentPage}
+            pageSize={PAGE_SIZE}
+            pageSizes={[PAGE_SIZE]}
+            totalItems={filteredRequests.length}
+            itemRangeText={(min, max, total) =>
+              t('showingRuns', 'Showing {{min}} to {{max}} of {{total}} runs', { min, max, total })
+            }
+            onChange={({ page }) => goTo(page)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReportHistory;

package/src/components/report-history/report-history.scss

@@ -0,0 +1,175 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-06;
+  background-color: colors.$white;
+  padding: layout.$spacing-05 layout.$spacing-07;
+  margin-top: layout.$spacing-02;
+  border: 1px solid colors.$gray-10;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.backButton {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: colors.$blue-60;
+  @include type.type-style('body-compact-01');
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+}
+
+.titleGroup {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.titleLine {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+}
+
+.title {
+  @include type.type-style('heading-05');
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.description {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  max-width: 42rem;
+  margin: 0;
+}
+
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: layout.$spacing-05;
+}
+
+.tile {
+  min-height: 6rem;
+}
+
+.tileLabel {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: colors.$gray-70;
+}
+
+.tileValueRow {
+  display: flex;
+  align-items: baseline;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+}
+
+.tileValue {
+  @include type.type-style('heading-05');
+  color: colors.$gray-100;
+}
+
+.trendUp {
+  @include type.type-style('label-01');
+  color: colors.$green-60;
+}
+
+.trendDown {
+  @include type.type-style('label-01');
+  color: colors.$red-60;
+}
+
+.lastRunBy {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+}
+
+.tableSection {
+  border: 1px solid colors.$gray-20;
+
+  :global(.cds--table-toolbar) {
+    position: relative !important;
+  }
+}
+
+.actionsCell {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+  justify-content: flex-end;
+}
+
+.actionLink {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  color: colors.$blue-60;
+  text-decoration: none;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.mutedText {
+  color: colors.$gray-50;
+  font-style: italic;
+}
+
+.charts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$spacing-05;
+}
+
+.chartTile {
+  padding: layout.$spacing-05;
+}
+
+.chartTitle {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-04;
+}
+
+.errorState,
+.loadingState {
+  padding: layout.$spacing-07;
+}

package/src/components/report-table/report-panel.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import { type SwitchEventHandlersParams } from '@carbon/react/lib/components/Switch/Switch';
+import { useTranslation } from 'react-i18next';
+
+type ReportPanelProps = {
+  onSwitchChange?: (params: SwitchEventHandlersParams) => void;
+};
+
+const ReportPanel: React.FC<ReportPanelProps> = ({ onSwitchChange }) => {
+  const { t } = useTranslation();
+  return (
+    <ContentSwitcher size="lg" onChange={onSwitchChange ?? (() => undefined)} selectedIndex={0}>
+      <Switch name="indicators" text={t('indicators', 'Indicators')} />
+      <Switch name="patientFollowUpReports " text={t('patientFollowUpReports', 'Patient Follow-up Reports')} />
+    </ContentSwitcher>
+  );
+};
+
+export default ReportPanel;

package/src/components/report-table/report-table.component.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useState } from 'react';
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  DataTable,
+  TableContainer,
+  OverflowMenu,
+  OverflowMenuItem,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Pagination,
+} from '@carbon/react';
+
+import styles from './report-table.scss';
+import { usePaginationInfo, usePagination, useDebounce, launchWorkspace2, navigate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type ReportTableProps = {
+  tableRows: Array<any>;
+  tableHeaders: Array<any>;
+  tableTitle: string;
+  tableDescription: string;
+};
+
+const ReportTable: React.FC<ReportTableProps> = ({ tableRows, tableHeaders, tableTitle, tableDescription }) => {
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const { t } = useTranslation();
+  const filteredRows = tableRows.filter((row) =>
+    Object.values(row).some((value) => {
+      if (value === null || value === undefined) {
+        return false;
+      }
+      const searchableValue = typeof value === 'object' ? JSON.stringify(value) : String(value);
+      return searchableValue.toLowerCase().includes(debouncedSearchTerm.toLowerCase());
+    }),
+  );
+  const { results, currentPage, goTo } = usePagination(filteredRows ?? [], pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, filteredRows.length, currentPage, filteredRows.length);
+
+  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 handleRequestReport = useCallback((report: Record<string, unknown>) => {
+    launchWorkspace2('report-request-workspace', { reportUuid: report.id });
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <DataTable rows={results} headers={tableHeaders} isSortable useZebraStyles>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getBatchActionProps,
+          getToolbarProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => {
+          const batchActionProps = getBatchActionProps();
+
+          return (
+            <TableContainer title={tableTitle} description={tableDescription} {...getTableContainerProps()}>
+              <TableToolbar {...getToolbarProps()}>
+                <TableToolbarContent aria-hidden={batchActionProps.shouldShowBatchActions}>
+                  <TableToolbarSearch
+                    persistent
+                    placeholder={t('searchForReports', 'Search for reports by name, description, or category')}
+                    onChange={handleSearchChange}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()} aria-label={t('reportsTable', 'Reports table')}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('rowActions', 'Row actions')} />
+                  </TableRow>
+                </TableHead>
+
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => {
+                            if (cell.info.header === 'status') {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <Tag size="sm">{cell.value}</Tag>
+                                </TableCell>
+                              );
+                            }
+                            return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                          })}
+                          <TableCell className="cds--table-column-menu">
+                            <OverflowMenu flipped aria-label="overflow-menu">
+                              <OverflowMenuItem
+                                onClick={() => handleRequestReport(results[index])}
+                                itemText={t('requestReport', 'Request Report')}
+                              />
+                              <OverflowMenuItem
+                                onClick={() =>
+                                  navigate({ to: `\${openmrsSpaBase}/reporting/report/${results[index].id}` })
+                                }
+                                itemText={t('viewHistory', 'View History')}
+                              />
+                            </OverflowMenu>
+                          </TableCell>
+                        </TableRow>
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          );
+        }}
+      </DataTable>
+      {results.length > 0 && (
+        <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 ?? [10, 20, 30]}
+          totalItems={tableRows?.length}
+          onChange={({ page, pageSize }) => {
+            goTo(page);
+            setPageSize(pageSize);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ReportTable;

package/src/components/report-table/report-table.scss

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